/* ========================================================== */
/* 1. PALETA DE COLORES SALESIANA */
/* ========================================================== */
:root {
    /* Azul Principal (Oscuro, Confianza, Salesiano) */
    --salesian-primary: #003366; 
    /* Amarillo/Naranja (Énfasis, Dinamismo, CTA) */
    --salesian-emphasis: #FF9900; 
    /* Gris para texto secundario */
    --salesian-secondary-dark: #495057; 
    /* Gris claro para texto en fondos oscuros */
    --salesian-secondary-light: #cccccc; 
}

/* Clases de texto y fondo para aplicar en el HTML */
.text-salesian-primary {
    color: var(--salesian-primary) !important;
}
.text-salesian-secondary-dark {
    color: var(--salesian-secondary-dark) !important;
}
.bg-salesian-primary {
    background-color: var(--salesian-primary) !important;
}
.text-salesian-secondary-light {
    color: var(--salesian-secondary-light) !important;
}


/* ========================================================== */
/* 2. OVERRIDES DE LA PLANTILLA BASE */
/* ========================================================== */

/* A. Ajuste del Logo en el Header (Sobrescribe las reglas de .logo) */
.header .logo-sm {
    /* Define un tamaño máximo para los logos en el header */
    max-width: 120px; 
    height: auto;
}

/* B. Ajuste de Estilos del Banner/Text-BG para sobrescribir 'style.css' */
.text-bg h1 {
    /* Sobrescribe el color genérico '#0f98f8' de la plantilla con el color Salesiano */
    color: var(--salesian-primary) !important;
    /* Ajuste de tamaño y línea de altura para mejor legibilidad */
    font-size: 3rem; /* Equivalente a display-4 de Bootstrap */
    line-height: 1.2;
    padding-bottom: 20px;
}
.text-bg p {
    /* Asegura que el texto secundario sea visible */
    font-size: 1.25rem; /* Equivalente a lead de Bootstrap */
    line-height: 1.5;
    font-weight: 400; /* Quita el font-weight: 500 impuesto por style.css para párrafos */
}

/* ========================================================== */
/* 3. BOTÓN CTA (ÉNFASIS) */
/* ========================================================== */
.btn-salesian-emphasis {
    background-color: var(--salesian-emphasis);
    border-color: var(--salesian-emphasis);
    color: var(--salesian-primary); /* Texto oscuro para alto contraste */
    font-weight: bold;
    letter-spacing: 0.5px;
    padding: 12px 20px;
    transition: background-color 0.3s ease;
    /* Forzar Bootstrap/Template override */
    border-radius: 0.5rem !important;
}

.btn-salesian-emphasis:hover {
    background-color: #ffc300; /* Ligeramente más claro al pasar el mouse */
    border-color: #ffc300;
    color: var(--salesian-primary);
}

/* ========================================================== */
/* 4. FOOTER Y COPYRIGHT */
/* ========================================================== */
footer {
    /* Detalle de color de énfasis en la parte superior del footer */
    border-top: 5px solid var(--salesian-emphasis); 
}

/* Sobreescribir el color y padding del copyright de la plantilla */
.footer .copyright {
    background-color: var(--salesian-primary) !important; /* Asegura el color primario */
    margin-top: 0; /* Elimina margen innecesario */
    padding: 20px 0;
}

.footer .copyright p {
    font-size: 0.9rem; /* Tamaño más pequeño para el copyright */
}

/* Estilo de los íconos sociales */
.social-icons a i {
    transition: color 0.2s ease;
}
.social-icons a:hover i {
    color: var(--salesian-emphasis) !important;
}