/* --- Cambio de Fuente Global a Raleway --- */

html, body, p, div, span, h1, h2, h3, h4, h5, h6, a, li, button, input {
    font-family: 'Raleway', sans-serif !important;
}

/* Optimización de legibilidad */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Ajuste fino para títulos */
h1, h2, h3, h4 {
    font-weight: 700; /* Negrita elegante para encabezados */
    letter-spacing: -0.5px;
}

/* Ajuste para el cuerpo de texto */
p, li {
    font-weight: 400;
    line-height: 1.7;
}

/*ibprogrammes*/
/* Contenedor de la Tarjeta */
.ib-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
}

.ib-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(30, 84, 143, 0.15);
}

/* Encabezados de Colores por Programa */
.ib-image-wrapper {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pyp-bg { background: linear-gradient(135deg, #ffcc00, #ffb300); }
.myp-bg { background: linear-gradient(135deg, #e63946, #b91d1d); }
.dp-bg { background: linear-gradient(135deg, #48cae4, #0077b6); }

.ib-logo {
    max-height: 80%;
    max-width: 90%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Contenido de Texto */
.ib-title {
    color: #1e3d5a;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 15px;
    min-height: 50px; /* Para que todos los títulos alineen igual */
}

.ib-description {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6;
    flex-grow: 1; /* Empuja el botón hacia abajo */
}

/* Botón "Haz clic aquí" */
.btn-ib-more {
    display: inline-block;
    padding: 8px 25px;
    border: 1px solid #1e3d5a;
    color: #1e3d5a;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-ib-more:hover {
    background-color: #1e3d5a;
    color: #ffffff;
}

/* Línea decorativa del título */
.header-line {
    width: 60px;
    height: 3px;
    background: #1e548f;
    margin: 10px auto;
    border-radius: 2px;
}
/*fin ib programmes*/
/*slider middle*/
/* Contenedor con altura controlada */
.half-height-container {
    position: relative;
    width: 100%;
    height: 350px; /* AJUSTA AQUÍ: Esta es la altura que verán los usuarios */
    overflow: hidden;
}

/* La clave para no perder proporciones */
.westhill-vivid-style .carousel-item img {
    width: 100%;
    height: 100%; /* Obligamos a la imagen a llenar el contenedor de 350px */
    object-fit: cover; /* Recorta la imagen sin deformarla */
    object-position: center; /* Centra el recorte (puedes usar 'top' si quieres ver más las caras) */
    transition: transform 5000ms linear;
}

/* Efecto Ken Burns mejorado para la altura corta */
.westhill-vivid-style .carousel-item.active img {
    transform: scale(1.1);
}

/* Estilo de la "Card" del Slider */
.westhill-vivid-style {
    border-radius: 30px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* Overlay sutil */
.vivid-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(30, 84, 143, 0.3) 100%);
}

/* Responsividad para móviles (reducimos un poco más la altura) */
@media (max-width: 768px) {
    .half-height-container {
        height: 200px;
    }
}
/*fin slider middle*/
/*mapamiddle*/
/* Contenedor principal para ambos iframes */
#santa-fe-virtual-tour .media-container {
    border-radius: 30px !important;
    overflow: hidden !important;
    position: relative;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    line-height: 0; /* Elimina espacios extra debajo del iframe */
}

/* Forzar que los iframes ocupen el 100% de su contenedor */
#santa-fe-virtual-tour iframe {
    width: 100%;
    height: 450px;
    display: block;
    transition: transform 0.3s ease;
}

/* Efecto sutil al pasar el mouse */
#santa-fe-virtual-tour .media-container:hover {
    box-shadow: 0 10px 30px rgba(30, 84, 143, 0.15) !important;
}

/* Ajuste para tablets y celulares */
@media (max-width: 991px) {
    #santa-fe-virtual-tour iframe {
        height: 350px; /* Reducimos la altura en pantallas pequeñas */
    }
}
/*fin mapa middle*/
/*work iniico*/
/* Reducimos la altura para que dos banners quepan mejor en la pantalla */
#work-with-us-banners .apply-header-card {
    height: 300px !important; /* Altura más compacta */
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

/* Forzamos que la imagen cubra el área sin estirarse */
#work-with-us-banners .apply-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Estilo del texto en el título */
#work-with-us-banners .apply-card-title h1 {
    font-size: 2.5rem; /* Un poco más pequeño para banners dobles */
    color: #1e548f !important;;
}

/* Ajuste de la capa de hover para que el texto sea legible */
#work-with-us-banners .apply-card-hover {
    background-color: rgba(30, 84, 143, 0.9) !important;;
    padding: 30px;
}

/* Responsividad: En móviles quitamos márgenes extra */
@media (max-width: 768px) {
    #work-with-us-banners .apply-header-card {
        height: 250px !important;
    }
    #work-with-us-banners .apply-card-title h1 {
        font-size: 1.8rem;
    }
}
/* Contenedor de la Tarjeta */
.value-card {
    background: #ffffff !important;;
    border-radius: 30px;
    overflow: hidden;
    height: 100%;
    transition: all 0.4s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(30, 84, 143, 0.15);
}

/* Ajuste de Imágenes */
.value-image-wrapper {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.value-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.value-card:hover .value-image-wrapper img {
    transform: scale(1.1);
}

/* Texto y Títulos */
.value-title {
    color: #1e548f !important;; /* Azul institucional */
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 1.1rem;
}

.value-description {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 300;
    text-align: center;
}

/* Responsividad */
@media (max-width: 991px) {
    .value-image-wrapper {
        height: 200px;
    }
}
#teacher-requirements {
    background-color: #ffffff;
}

/* Títulos */
.section-title {
    color: #1e3d5a !important;;
    font-weight: 800;
    font-size: 2.2rem;
    position: relative;
    padding-bottom: 15px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: #1abc9c !important;; /* Verde turquesa institucional */
    border-radius: 2px;
}

.sub-title {
    color: #2b5f8c !important;;
    font-weight: 700;
}

.minor-title {
    color: #1e3d5a !important;;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Listas y Viñetas */
.main-requirements li, .sub-requirements li {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.main-requirements i, .sub-requirements i {
    color: #1e548f !important;;
    margin-top: 5px;
}

.highlight-item {
    color: #d9534f; /* Color para resaltar el NO REQUIRED */
    font-size: 1.1rem;
}

.minimal-list {
    padding-left: 20px;
    color: #666;
}

/* Contenedor de Mascota */
.mascot-container {
    padding: 20px;
    position: relative;
}

.mascot-img {
    max-width: 90%;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
    transition: transform 0.5s ease;
}

.mascot-img:hover {
    transform: translateY(-10px) rotate(2deg);
}

/* Responsividad */
@media (max-width: 991px) {
    .section-title {
        text-align: center;
        font-size: 1.8rem;
    }
    .section-title::after {
        left: 50%;
        margin-left: -30px;
    }
    .mascot-img {
        max-width: 60%;
        margin-top: 40px;
    }
}
/*SECCION WH ENVIRROMENT*/
/* Contenedor de la Imagen */
#alabama-partnership .poster-container {
    position: relative;
    z-index: 1;
}

#alabama-partnership .poster-img {
    border-radius: 20px;
    border: 8px solid #ffffff;
    transition: transform 0.3s ease;
}

#alabama-partnership .poster-img:hover {
    transform: scale(1.02);
}

/* Decoración detrás de la imagen */
.decoration-circle {
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 100px;
    height: 100px;
    background: rgba(30, 84, 143, 0.1);
    border-radius: 50%;
    z-index: -1;
}

/* Estilo de la Lista de Beneficios */
.benefits-title {
    color: #1e3d5a !important;;
    font-weight: 800;
    font-size: 2rem;
    position: relative;
    margin-bottom: 30px;
}

.benefits-list li {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    padding-left: 30px;
    position: relative;
    font-weight: 300;
}

/* Viñeta personalizada (punto azul) */
.benefits-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 10px;
    height: 10px;
    background-color: #1e548f !important;; /* Azul Westhill */
    border-radius: 50%;
}

/* Resalte de la alianza */
.benefits-list li strong {
    color: #b11313; /* Rojo Alabama para resaltar la alianza */
    font-weight: 600;
}

/* Responsividad */
@media (max-width: 991px) {
    #alabama-partnership .poster-container {
        margin-bottom: 40px;
        text-align: center;
    }
    .benefits-title {
        text-align: center;
        font-size: 1.7rem;
    }
}
/*FIN WH ENVIROMENT*/
/* --- Estilos para el Formulario Apply Now --- */

#apply-now-form {
    background-color: #f8faff;
}

.smartsheet-container {
    background-color: #ffffff;
    border-radius: 20px; /* Bordes redondeados consistentes con el resto del sitio */
    overflow: hidden;
    border: 1px solid #eee;
    /* Aseguramos que el iframe respete el diseño */
    line-height: 0; 
}

/* Ajuste de altura dinámica para móviles */
@media (max-width: 768px) {
    .smartsheet-container iframe {
        height: 1000px; /* Los formularios suelen hacerse más largos en móvil */
    }
    .section-title-blue {
        font-size: 1.8rem;
    }
}
/*open position ini*/
/* Cabecera Azul de la Sección */
.positions-header {
    background: #3b7bb6 !important;; /* Azul de tu imagen */
    padding: 15px 40px;
    display: inline-block;
    border-radius: 50px;
    min-width: 300px;
}

/* Estilo del Acordeón */
#open-positions-section .accordion {
    border-radius: 20px;
    overflow: hidden;
    border: none;
}

#open-positions-section .accordion-item {
    border-bottom: 1px solid #ffffff;
}

#open-positions-section .accordion-button {
    padding: 20px;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

#open-positions-section .accordion-button:not(.collapsed) {
    background-color: #f0f7ff !important;
    color: #1e548f !important;
    box-shadow: none;
}

.job-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e3d5a !important;
}

/* Listas de Requisitos */
.job-list {
    list-style: none;
    padding-left: 0;
}

.job-list li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.job-list li::before {
    content: "•";
    color: #3b7bb6 !important;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Botón Final */
.btn-apply-now {
    background-color: #00bcd4 !important;; /* Color turquesa de tu imagen */
    color: white;
    font-weight: bold;
    padding: 12px 30px;
    border-radius: 10px;
    border: none;
    transition: transform 0.3s;
    text-decoration: none;
    display: inline-block;
}

.btn-apply-now:hover {
    background-color: #00acc1 !important;
    color: white;
    transform: translateY(-3px);
}

/* Ajustes Responsivos */
@media (max-width: 768px) {
    .job-title { font-size: 1.1rem; }
    .positions-header { width: 90%; }
}
/*fin open position*/
/*work fin*/
/********** acreditation**********/
/* Fondo general de la sección con el azul tenue */
#accreditations-section {
    background-color: #f0f7ff; /* Azul muy tenue */
    border-radius: 50px;
}

/* Contenedor del texto con la línea naranja */
.content-wrapper {
    padding: 20px 30px;
    position: relative;
}

/* Línea naranja a la izquierda (para bloques impares) */
.left-border {
    border-left: 4px solid #3553ff; /* Naranja institucional */
}

/* Línea naranja a la derecha (para bloques pares) */
.right-border {
    border-right: 4px solid #3553ff;
}

/* Estilo de los logos */
.logo-img {
    max-width: 220px;
    height: auto;
    transition: transform 0.3s ease;
}

.accreditation-row:hover .logo-img {
    transform: scale(1.05);
}

/* Estilo del texto */
.accreditation-text {
    color: #4a5568;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 0;
}

/* Línea bajo el título principal */
.header-line {
    width: 60px;
    height: 3px;
    background: #3553ff;
    margin: 15px auto 0;
    border-radius: 2px;
}

/* Ajustes para Móviles */
@media (max-width: 767px) {
    .content-wrapper {
        border-right: none !important;
        border-left: 4px solid #3553ff !important; /* Siempre a la izquierda en móvil */
        text-align: left !important;
        margin-top: 20px;
    }
    .logo-img {
        max-width: 150px;
    }
}
/* fin acreditation*/
/*inicio slider index cinta*/
/* --- Carrusel Infinito de Logos --- */

#logos-acreditaciones {
    background-color: #c1beeb4b;
    overflow: hidden;
    padding: 40px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.logos-slider {
    position: relative;
    width: 100%;
    margin: auto;
    overflow: hidden;
}

.logos-track {
    display: flex;
    width: calc(250px * 10); /* Ancho de cada logo * total de logos (incluyendo duplicados) */
    animation: scroll-infinito 25s linear infinite;
}

.logo-slide {
    width: calc(100% / 3); /* Muestra 3 logos al mismo tiempo */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
}

.logo-slide img {
    max-width: 180px;
    max-height: 80px;
    height: auto;
    filter: grayscale(0%); /* Efecto elegante en gris */
    opacity: 0.6;
    transition: all 0.3s ease;
}

/* Al pasar el mouse, los logos cobran color y vida */
.logo-slide img:hover {
    filter: grayscale(100%);
    opacity: 1;
    transform: scale(1.1);
}

/* Animación del Movimiento */
@keyframes scroll-infinito {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 5)); /* Se desplaza la mitad exacta (el primer set de logos) */
    }
}

/* Ajustes para Tablets y Celulares */
@media (max-width: 768px) {
    .logo-slide {
        width: 50%; /* Muestra 2 logos en tablets */
    }
    .logo-slide img {
        max-width: 120px;
    }
}

@media (max-width: 480px) {
    .logo-slide {
        width: 100%; /* Muestra 1 logo en celulares para que se aprecie bien */
    }
}
/*fin slider index cinta*/
:root {
    --primary: #1878b8;
    --light: #2f4be7;
    --dark: #103741;
}

.back-to-top {
    position: fixed;
    display: hidden;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}
/*apply now */
/* Contenedor del Banner */
.banner-apply-wrapper {
    position: relative;
    width: 100%;
    height: 450px; /* Puedes ajustar la altura según necesites */
    border-radius: 30px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Estilo general para las imágenes */
.banner-apply-wrapper .img-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.6s ease-in-out;
}

/* Imagen principal visible por defecto */
.banner-apply-wrapper .img-main {
    z-index: 1;
    opacity: 1;
}

/* Imagen de hover oculta por defecto */
.banner-apply-wrapper .img-hover {
    z-index: 2;
    opacity: 0;
}

/* Efecto de cambio al pasar el mouse */
.banner-apply-wrapper:hover .img-hover {
    opacity: 1;
}

/* Overlay de gradiente para legibilidad del texto */
.banner-apply-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(30, 84, 143, 0.7) 0%, transparent 60%);
    z-index: 3;
    pointer-events: none;
}

/* Texto superpuesto */
.banner-text-overlay {
    position: absolute;
    bottom: 30px;
    left: 40px;
    z-index: 4;
    color: white;
}

.banner-text-overlay h1 {
    margin: 0;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    font-weight: 800;
}

/* Responsividad */
@media (max-width: 768px) {
    .banner-apply-wrapper {
        height: 250px;
    }
    .banner-text-overlay {
        left: 20px;
        bottom: 20px;
    }
}
/* Contenedor principal del banner */
.apply-header-card {
    position: relative;
    width: 100%;
    height: 350px; /* Altura ajustable */
    border-radius: 30px;
    overflow: hidden;
    cursor: default;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background-color: #1e548f; /* Color base por si la imagen tarda en cargar */
}

/* Imagen principal */
.apply-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease, opacity 0.5s ease;
}
/*********************************/
/* --- Estilos Encapsulados: Logo al 70% --- */

#wh-apply-now-section {
    width: 100% !important;
    margin: 40px 0 !important;
    display: block !important;
}

.wh-apply-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 350px !important;
    overflow: hidden !important;
    background-color: #2c5d8f !important;
    cursor: pointer !important;
}

.wh-apply-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 0.8s ease !important;
    z-index: 1 !important;
}

.wh-apply-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #2c5d8f !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
    z-index: 2 !important;
    padding: 0 10% !important;
}

/* --- Configuración del Logo Gigante --- */
.wh-apply-watermark {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    /* Ocupa el 70% del ancho del banner */
    width: 60% !important; 
    max-width: 900px !important; 
    height: auto !important;
    /* Reducimos opacidad al 8% para no interferir con la lectura */
    opacity: 0.08 !important; 
    z-index: 3 !important; 
    filter: brightness(0) invert(1) !important;
    pointer-events: none !important;
}

.wh-apply-content {
    position: relative !important;
    z-index: 4 !important;
    max-width: 850px !important;
    text-align: center !important;
}

.wh-apply-quote {
    font-family: 'Raleway', sans-serif !important;
    color: #ffffff !important;
    font-size: 1.15rem !important;
    line-height: 1.7 !important;
    font-weight: 500 !important;
    font-style: italic !important;
    margin: 0 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* --- Estados Hover --- */
.wh-apply-wrapper:hover .wh-apply-overlay {
    opacity: 1 !important;
}

.wh-apply-wrapper:hover .wh-apply-bg {
    transform: scale(1.05) !important;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .wh-apply-watermark {
        width: 85% !important; /* En móvil el logo necesita ser un poco más ancho */
    }
    .wh-apply-quote {
        font-size: 1rem !important;
    }
}
/**********************************/
/* Capa de Hover (Cita sobre azul sólido) */
.apply-card-hover {
    position: absolute;
    inset: 0;
    background-color: #1e558f79; /* Azul sólido de la imagen 2 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0; /* Oculto inicialmente */
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 2;
}

/* Caja de la cita */
.apply-quote-box {
    max-width: 85%;
    text-align: center;
    color: white;
}

.apply-quote-text {
    font-size: 1.25rem;
    line-height: 1.6;
    font-weight: 400;
    margin: 0;
}

/* Título "Apply Now" inferior */
.apply-card-title {
    position: absolute;
    bottom: 30px;
    left: 40px;
    z-index: 3;
    color: white;
    transition: opacity 0.3s ease;
}

/* Gradiente inferior para legibilidad inicial */
.apply-header-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(30, 85, 143, 0.973) 0%, transparent 50%);
    z-index: 1;
}

/* =========================================
   EFECTO HOVER
   ========================================= */

.apply-header-card:hover .apply-card-hover {
    opacity: 1;
    visibility: visible;
}

.apply-header-card:hover .apply-card-img {
    transform: scale(1.1); /* Zoom sutil a la imagen de fondo antes de taparla */
}

.apply-header-card:hover .apply-card-title {
    opacity: 0; /* Ocultamos el título "Apply Now" para que no estorbe la cita */
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .apply-header-card { height: auto; min-height: 350px; }
    .apply-quote-text { font-size: 1rem; }
    .apply-card-title { left: 20px; bottom: 20px; }
}
/* Asegurar que la fila de Bootstrap use Flexbox para igualar alturas */
#admission-section .custom-input {
    border: 1px solid oklch(59.414% 0.01976 17.535);
    border-radius: 5px;
    padding: 10px;
}

#admission-section .btn-submit {
    background-color: #1e548f;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    transition: 0.3s;
}

#admission-section .btn-submit:hover {
    background-color: #1abc9c;
}

/* Botón de Unmute */
.unmute-overlay {
    position: absolute;
    bottom: 25px;
    right: 25px;
    background: rgba(0, 43, 91, 0.7);
    color: white;
    border: 2px solid white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.unmute-overlay:hover {
    background: #1abc9c;
    transform: scale(1.1);
}

/* Asegurar que en móviles el video mantenga proporción */
@media (max-width: 991px) {
    #admission-section .col-lg-6:last-child {
        height: 350px;
    }
}

#admission-form-video .form-check-input:checked {
    background-color: #1e548f;
    border-color: #1e548f;
}
/*mapa*/
/* Contenedor con estética institucional */
#santa-fe-location .map-card {
    border-radius: 30px;
    overflow: hidden;
    border: none;
    background: #fff;
}

/* Encabezado con el gradiente azul de Westhill */
#santa-fe-location .map-header {
    background: linear-gradient(135deg, #1e558fa1 0%, #2b5f8c 100%);
}

/* Efecto para el iframe */
#santa-fe-location .ratio {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow: hidden;
}

#santa-fe-location iframe {
    filter: saturate(1.2); /* Hace que los colores del mapa resalten un poco más */
}

/* Ajuste responsivo para que el mapa no sea tan alto en pantallas pequeñas */
@media (max-width: 768px) {
    #santa-fe-location .ratio {
        --bs-aspect-ratio: 50%; /* Cambia a 2:1 aproximadamente en móviles */
    }
}
/*fin apply*/
#section-programs .program-card {
    position: relative;
    height: 320px;
    border-radius: 25px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #002b5b; /* Color de fondo base */
    text-decoration: none;
    border: none;
}

/* Imagen de fondo con transparencia */
#section-programs .card-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.4; /* AJUSTA AQUÍ: 0.1 a 1.0 para ver más o menos la imagen */
    z-index: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Gradientes combinados */
#section-programs .card-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    mix-blend-mode: multiply; /* Mezcla el color con la imagen */
    transition: all 0.5s ease;
}

.gradient-1 { background: linear-gradient(135deg, #1abc9c15, #7aade40c); }

/* Contenido */
#section-programs .card-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: rgb(255, 255, 255);
    width: 100%;
}

.program-title {
    color: #ffffff;
    transition: all 0.4s ease; /* Crucial para la suavidad */
}

/* --- EFECTO DE OCULTADO --- */
#section-programs .program-card:hover .program-title {
    opacity: 0;
    transform: translateY(-10px); /* Opcional: un pequeño salto hacia arriba al irse */
}

#section-programs .content-hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

/* --- HOVER EFFECTS --- */

#section-programs .program-card:hover .card-bg-img {
    opacity: 1; /* La imagen se aclara al pasar el mouse */
    transform: scale(1.1);
}

#section-programs .program-card:hover .card-overlay {
    background: rgba(73, 161, 255, 0.377); /* El azul del hover que pediste */
}

#section-programs .program-card:hover .content-default {
    opacity: 0;
    transform: translateY(-20px);
}

#section-programs .program-card:hover .content-hover {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}

/* Estado Hover (Visit Our Campuses) */
#section-programs .content-hover {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -40%);
    width: 100%;
    opacity: .4;
    visibility: hidden;
    transition: all 0.4s ease;
}

#section-programs .hover-title {
     /* O la fuente cursiva que prefieras */
    font-size: 1.8rem;
    color: rgb(255, 255, 255);
}

#section-programs .btn-click {
    display: inline-block;
    border: 2px solid white;
    color: white;
    padding: 8px 25px;
    border-radius: 50px;
    text-decoration: none;
    margin-top: 15px;
}

/* ACCIÓN DE HOVER */
#section-programs .program-card:hover .card-bg {
    opacity: 0.3;
}

#section-programs .program-card:hover .card-overlay {
    background: rgba(30, 84, 143, 0.85); /* El azul del hover */
}

#section-programs .program-card:hover .content-default {
    opacity: 1;
    transform: translateY(-20px);
}

#section-programs .program-card:hover .content-hover {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}
/*slider*/
/* Ajustes específicos para el Slider de Graduados */
#graduateSlider {
    max-height: 450px; /* Ajusta según la altura de tus imágenes */
}

#graduateSlider .carousel-item img {
    height: 450px;
    object-fit: cover; /* Evita que las imágenes se deformen */
    transition: transform 0.8s ease;
}

/* Efecto visual al pasar el mouse por la imagen que es link */
#graduateSlider .carousel-item a:hover img {
    transform: scale(1.02);
}

/* Estilo de los indicadores (bolitas de abajo) */
#graduateSlider .carousel-indicators [button] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #1e548f;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    #graduateSlider, #graduateSlider .carousel-item img {
        height: 250px;
    }
}
/*fin slider*/
/*CARDS RECTANGURALES*/
#stats-section .stat-card {
    position: relative;
    display: block;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: white;
    transition: transform 0.3s ease;
}

#stats-section .stat-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

#stats-section .stat-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 43, 91, 0.6); /* Azul oscuro translúcido */
    z-index: 2;
    transition: background 0.3s ease;
}

#stats-section .stat-card:hover .stat-overlay {
    background: rgba(0, 43, 91, 0.4);
}

#stats-section .stat-card:hover {
    transform: scale(1.02);
}

#stats-section .stat-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
}

#stats-section .stat-icon {
    width: 70px;
    height: 70px;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 15px;
}

#stats-section .stat-number {
    font-size: 4rem;
    font-weight: 800;
    margin: 0;
    display: inline-block;
}

#stats-section .symbol {
    font-size: 2.5rem;
    font-weight: 800;
}

#stats-section .stat-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 5px;
}

#stats-section .stat-text {
    font-size: 1rem;
    max-width: 80%;
}
/*FIN CARDS*/
/*head master*/
/* Contenedor de la tarjeta */
#headmaster-section .headmaster-card {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    height: 550px;
    background-color: #002b5b; /* Color de respaldo */
}

#headmaster-section .headmaster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Capa de Hover (Oculta por defecto) */
#headmaster-section .headmaster-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 43, 91, 0.9); /* Azul sólido translúcido */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

/* Texto de la cita */
#headmaster-section .quote-container {
    text-align: center;
    color: white;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

#headmaster-section .quote-text {
    font-size: 1.5rem;
    font-style: italic;
    font-family: 'Georgia', serif;
    line-height: 1.4;
    margin-bottom: 10px;
}

#headmaster-section .quote-author {
    font-weight: 300;
    letter-spacing: 1px;
}

/* Bloque de info inferior (Nombre/Cargo) */
#headmaster-section .headmaster-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    z-index: 3;
}

#headmaster-section .name {
    margin: 0;
    font-weight: 700;
}

#headmaster-section .title {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
   
}

/* =========================================
   ACCIÓN DE HOVER
   ========================================= */

#headmaster-section .headmaster-card:hover .headmaster-overlay {
    opacity: 1;
}

#headmaster-section .headmaster-card:hover .quote-container {
    transform: translateY(0);
}

#headmaster-section .headmaster-card:hover .headmaster-img {
    transform: scale(1.05); /* Zoom suave a la foto */
}
/*fin head master*/
/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary {
    color: #FFFFFF;
    background: #41a5e7;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50px;
}
/* Configuración General */
#house-section .house-card {
    position: relative;
    display: block;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: white;
    text-align: center;
    transition: transform 0.3s ease;
    border: none;
}

/* Colores Base */
.bobcat-bg { background-color: #b21f1f; } /* Rojo */
.puma-bg   { background-color: #c5f100; } /* Azul suave */
.lynx-bg   { background-color: #00d600; } /* Verde */
.jaguar-bg { background-color: #1a23bc; } /* Azul intenso */

/* Overlay de Gradiente para el Hover */
#house-section .house-gradient-overlay {
    position: absolute;
    inset: 0;
    background-color:#206092 ;    
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

#house-section .house-card:hover .house-gradient-overlay {
    opacity: 1;
}

#house-section .house-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.50);
}

/* Contenido */
#house-section .house-content {
    position: relative;
    z-index: 2;
    padding: 30px 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#house-section .house-logo {
    width: 150px;
    height: auto;
    filter: brightness(0) invert(1); /* Convierte el logo a blanco si es oscuro */
}

#house-section .house-counter {
    font-size: 5rem;
    font-weight: 800;
    margin: 0;
}

#house-section .house-name {
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1.1rem;
    margin: 0;
}
#spotify-player-section .spotify-wrapper {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 10px;
    /* Evita que el iframe sobresalga antes de cargar */
    min-height: 152px; 
    overflow: hidden;
    transition: transform 0.3s ease;
}

#spotify-player-section .spotify-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* Ajuste para que en móviles sea siempre legible */
@media (max-width: 576px) {
    #spotify-player-section .col-lg-8 {
        padding: 0 20px;
    }
}

/*** Heading ***/
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
     font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
 
  font-style: normal;
    
    font-weight: 700;
}

h5,
h6,
.h5,
.h6 {
    font-weight: 600;
}
.section-title::after

 {
        left: 50%;
        margin-left: -30px;
        background-color: #0097b2 !important;
    }

.font-secondary {
    font-family: 'Raleway';
}
/*font-family: 'Lobster Two', cursive; fuente original*/

/***ocupar ancho completo sitio ***/
.container-xxl.bg-white {
    max-width: 100% !important;
    width: 100% !important;
}
/*** Navbar ***/
/* --- Ajustes del Navbar --- */
/* --- Estilos del Navbar y Submenús --- */

/* 1. Reset para que los links funcionen (Quitamos el bloqueo de Bootstrap) */
/* Cambiar color de fondo al pasar el mouse (Hover) en el menú */
.navbar-nav .nav-link:hover, 
.navbar-nav .nav-item:hover {
    background-color: #0097b2 !important;
    border-radius: 10px;
    color: #ffffff !important; /* Asegura que el texto sea blanco sobre el azul */
    transition: background-color 0.3s ease;
}

/* Cambiar color de fondo del ítem activo/seleccionado */
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-link.active {
    background-color: #0097b22d !important;
    color: #070707 !important;
    border-radius: 10px;
}

/* Si tu menú usa dropdowns (submenús), aplica el cambio aquí también */
.dropdown-item:hover, 
.dropdown-item:focus {
    background-color: #0097b2!important;
    color: #ffffff !important;
    border-radius: 10px;
}

/* 2. Comportamiento en ESCRITORIO (PC) */
@media (min-width: 992px) {
    /* Abrir Nivel 1 al pasar el mouse */
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }

    /* Estilos para el Sub-menú de Nivel 2 */
    .dropdown-submenu {
        position: relative;
    }

    .submenu-child {
        display: none; /* OCULTO POR DEFECTO */
        position: absolute;
        top: 0;
        left: 100%; /* Aparece a la derecha */
        min-width: 200px;
        background-color: #ffffffd0;        
        z-index: 1000;
        border: 1px solid #000000;
    }

    /* Mostrar Nivel 2 al pasar el mouse por el padre (Elementary) */
    .dropdown-submenu:hover > .submenu-child {
        display: block;
    }

    /* Flecha lateral para indicar que hay más contenido */
    .dropdown-toggle-side::after {
        content: "›";
        float: right;
        border: none;
        font-weight: bold;
    }
}


/* --- COMPORTAMIENTO PARA PC (Escritorio) --- */
@media (min-width: 992px) {
    /* Ocultar sub-menús por defecto en PC */
    .submenu-child {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 200px;
        background: #ffffffe0;
        border: 1px solid #00000013;
        box-shadow: #000;
        border-radius: 10px;
        z-index: 10;
    }

    /* Mostrar nivel 1 al pasar el mouse */
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }

    /* Mostrar nivel 2 al pasar el mouse */
    .dropdown-submenu:hover > .submenu-child {
        display: block;
    }

    .dropdown-submenu { position: relative; }
}

/* --- COMPORTAMIENTO PARA MÓVIL (Expandido) --- */
@media (max-width: 991px) {
    /* Forzar que todos los menús y sub-menús estén abiertos */
    .dropdown-menu, 
    .submenu-child {
        display: block !important; 
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-shadow: none !important;
        border: none !important;
        padding-left: 20px !important; /* Sangría para mostrar jerarquía */
        background-color: #fcfcfc !important;
    }

    /* Estilo visual para diferenciar los niveles en móvil */
    .dropdown-submenu .dropdown-item.fw-bold {
        color: #2c5d8f;
        margin-top: 10px;
        border-bottom: 1px solid #eee;
    }

    .submenu-child .dropdown-item {
        font-size: 0.9rem;
        padding: 8px 25px;
        border-left: 2px solid #2c5d8f; /* Línea azul lateral para los hijos */
        margin-left: 5px;
    }
}
/* --- Sección Child Protection --- */

#child-protection-section {
    background-color: #ffffff;
    padding: 60px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Icono de Estrella */
.protection-icon {
    color: #89d0f0; /* Azul claro de la imagen */
    font-size: 3.5rem;
    margin-bottom: 25px;
    display: block;
}

/* Títulos de los bloques */
.protection-title {
    color: #5bbce4; /* Azul un poco más intenso para el texto */
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

/* Párrafos descriptivos */
.protection-text {
    color: #777777; /* Gris suave */
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    max-width: 90%;
    margin: 0 auto;
}

/* Efecto opcional al pasar el mouse */
.protection-item {
    transition: transform 0.3s ease;
}

.protection-item:hover {
    transform: translateY(-5px);
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .protection-icon {
        font-size: 2.8rem;
    }
    .protection-title {
        font-size: 1.4rem;
    }
    .protection-text {
        max-width: 100%;
    }
}
/* --- Sección Student Support --- */

#student-support {
    font-family: 'Segoe UI', sans-serif;
}

.color-institucional {
    color: #2c5d8f;
}

/* Estilo de Tarjetas */
.support-card {
    border-radius: 15px;
    border: none;
    transition: all 0.3s ease;
    border-bottom: 4px solid transparent;
}

.support-card:hover {
    transform: translateY(-10px);
    border-bottom: 4px solid #2c5d8f;
}

.support-card h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
}

/* Iconos Decorativos */
.icon-circle {
    width: 60px;
    height: 60px;
    background-color: #f0f4f8;
    color: #2c5d8f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.5rem;
}

/* Bloques de Texto con Borde */
.border-start-custom {
    background-color: #fff;
    border-left: 5px solid #2c5d8f;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    border-radius: 0 10px 10px 0;
}

.border-start-custom.secondary {
    border-left-color: #5bbce4; /* Azul claro para diferenciar el programa SPED */
}

/* Ajustes Responsive */
@media (max-width: 768px) {
    .support-card {
        margin-bottom: 20px;
    }
}
/* --- Estilos para Videos de YouTube --- */

#seccion-videos-institucionales {
    background-color: #fcfcfc;
}

.contenedor-video-youtube {
    position: relative;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 15px; /* Bordes redondeados elegantes */
    background-color: #000;
}

.contenedor-video-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Efecto opcional al pasar el mouse */
.contenedor-video-youtube:hover {
    box-shadow: 0 10px 25px rgba(44, 93, 143, 0.2) !important;
    transition: box-shadow 0.3s ease;
}
/* --- Estilos del Slider de Acreditaciones pawprint --- */

#acreditaciones-slider {
    border-top: 1px solid #eee;
}

/* Altura fija para que el slider no salte entre imágenes de distintos tamaños */
.slider-h {
    height: 200px;
}

.logo-slider {
    max-height: 120px; /* Tamaño elegante para los logos */
    width: auto;
    filter: grayscale(20%); /* Opcional: un toque de gris que se quita al pasar el mouse */
    transition: all 0.3s ease;
}

.carousel-item:hover .logo-slider {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* Cambiar color de las flechas para que se vean sobre fondo blanco */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none;
    color: #2c5d8f; /* Azul institucional */
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-control-prev-icon::after { content: '❮'; }
.carousel-control-next-icon::after { content: '❯'; }

/* Estilo de los puntitos (Indicadores) */
.carousel-indicators [data-bs-target] {
    background-color: #2c5d8f;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 5px;
}

/* Responsivo */
@media (max-width: 768px) {
    .slider-h { height: 150px; }
    .logo-slider { max-height: 80px; }
}
/* --- Sección IB Programme pawprint --- */

#ib-programme-section {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
}

/* Contenedor de imagen con bordes redondeados profundos */
.ib-image-container {
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.ib-image-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.ib-image-container:hover img {
    transform: scale(1.03);
}

/* Estilos de Texto */
.ib-content p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
}

.ib-content strong {
    color: #333;
    font-weight: 700;
}

/* Botón Turquesa */
.btn-ib-learn {
    display: inline-block;
    background-color: #11bcd4; /* Color turquesa de la imagen */
    color: #ffffff;
    padding: 15px 35px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: none;
}

.btn-ib-learn:hover {
    background-color: #0ea5bb;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(17, 188, 212, 0.3);
}

/* Ajustes Responsive */
@media (max-width: 991px) {
    .ib-content {
        text-align: center;
    }
    .ib-image-container {
        max-width: 500px;
        margin: 0 auto;
    }
}
/* --- Sección UNAM Programs --- */

#unam-programs {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 80px 0;
}

/* Títulos principales */
.unam-main-title {
    color: #2c5d8f; /* Azul institucional */
    font-weight: 800;
    font-size: 2rem;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.unam-subtitle {
    color: #2c5d8f;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.3;
    max-width: 800px;
    margin: 0 auto 50px auto;
}

/* Contenedor de cada ítem */
.program-item {
    padding: 20px;
    transition: all 0.3s ease;
}

.program-icon-wrapper {
    height: 180px; /* Altura uniforme para alinear los nombres */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.unam-icon {
    max-height: 240px;
    width: auto;
    transition: transform 0.4s ease;
}

/* Efecto al pasar el mouse */
.program-item:hover .unam-icon {
    transform: scale(1.1);
}

.program-name {
    color: #2c5d8f;
    font-weight: 700;
    font-size: 1.25rem;
    margin-top: 10px;
}

/* Ajustes Responsive */
@media (max-width: 768px) {
    .unam-main-title { font-size: 1.6rem; }
    .unam-subtitle { font-size: 1.1rem; }
    .program-icon-wrapper { height: 140px; }
    .unam-icon { max-height: 120px; }
}
/* --- Sección high School counceling Profile --- */

#upper-school-profile {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #ffffff;
    color: #444;
}

/* Títulos principales */
.section-title {
    color: #2c5d8f; /* Azul institucional */
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.2;
}

/* Párrafos de texto */
.content-text {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.content-text.secondary {
    color: #777;
    font-size: 0.95rem;
}

/* Imagen con estilo */
.image-box img {
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    transition: transform 0.4s ease;
    border-radius: 10px;
}

.image-box:hover img {
    transform: scale(1.02);
}

/* Tarjetas de Perfil (Fila Inferior) */
.profile-card {
    padding: 20px 0;
}

.profile-title {
    color: #2c5d8f;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.profile-desc {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
}

/* Detalle decorativo para la segunda tarjeta en tablets/PC */
@media (min-width: 768px) {
    .border-start-highlight {
        padding-left: 40px;
    }
}

/* Ajustes Responsive */
@media (max-width: 991px) {
    .section-title {
        font-size: 1.8rem;
        text-align: center;
    }
    .image-box {
        margin-top: 30px;
        text-align: center;
    }
    .profile-title {
        font-size: 1.5rem;
    }
}
/* --- Sección Our College Counselor --- */

#college-counselor-profile {
    background-color: #ffffff;
}

/* Contenedor Azul */
.counselor-card {
    background-color: #2c5d8f; /* Azul institucional Westhill */
    color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.counselor-title {
    font-family: 'Segoe UI', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* Estilo de la Imagen */
.profile-image-wrapper {
    display: inline-block;
}

.profile-img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border: 5px solid rgba(255, 255, 255, 0.2); /* Borde elegante semitransparente */
    background-color: #fff;
}

/* Estilo de los Textos y Enlaces */
.contact-info p {
    font-size: 1.3rem;
    margin-bottom: 10px;
    font-weight: 400;
}

.contact-info strong {
    font-weight: 700;
}

.contact-info a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
    border-bottom: 1px solid transparent;
}

.contact-info a:hover {
    opacity: 0.8;
    border-bottom: 1px solid #ffffff;
}

/* Ajustes para Móviles */
@media (max-width: 768px) {
    .counselor-card {
        padding: 30px 20px !important;
    }
    .counselor-title {
        font-size: 1.8rem;
    }
    .profile-img {
        width: 140px;
        height: 140px;
    }
    .contact-info p {
        font-size: 1rem;
    }
}
.stats-bg-main {
    background: linear-gradient(135deg, #2c5d8f 0%, #1c3d5e 100%);
    width: 100%;
    margin: 20px 0; /* Margen externo reducido */
    border-top: 3px solid #5bbce4;
}

.stat-column {
    padding: 15px 10px; /* Padding vertical reducido drásticamente de 40px a 15px */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.counter-display {
    font-size: 2.8rem; /* Reducido de 4.5rem a 2.8rem para mayor elegancia */
    font-weight: 800;
    line-height: 1;
    font-family: 'Segoe UI', sans-serif;
}

.stat-symbol {
    font-size: 1.8rem; /* Símbolos proporcionales al nuevo tamaño */
    font-weight: 700;
    color: #5bbce4;
}

.stat-description {
    font-size: 0.75rem; /* Texto un poco más pequeño */
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 5px; /* Menos espacio entre número y texto */
    color: rgba(255, 255, 255, 0.8);
}

/* Responsivo para celulares */
@media (max-width: 991px) {
    .counter-display { font-size: 2.2rem; }
    .stat-column { padding: 10px 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
}
/* --- Estilos para Acordeones Elegantes --- */

.color-institucional {
    color: #2c5d8f;
}

#accordionBeliefs .accordion-item {
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 5px;
}

#accordionBeliefs .accordion-button {
    font-weight: 700;
    color: #2c5d8f;
    background-color: #ffffff;
    font-size: 1.1rem;
    padding: 20px;
    border: none;
    transition: all 0.3s ease;
}

/* Estado cuando el acordeón está abierto */
#accordionBeliefs .accordion-button:not(.collapsed) {
    background-color: #f8faff;
    color: #11bcd4; /* Azul turquesa para destacar apertura */
    box-shadow: none;
}

/* Icono del acordeón (flecha) */
#accordionBeliefs .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232c5d8f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

#accordionBeliefs .accordion-body {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
    padding: 25px 30px;
    background-color: #fcfcfc;
}
/* --- Configuración de Secciones Institucionales --- */

.institucional-section {
    overflow: hidden;
}

.section-title-blue {
    color: #2c5d8f; /* Azul Westhill */
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
}

.section-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
    text-align: justify;
}

/* Lista estilizada para el IB */
.section-list {
    list-style: none;
    padding-left: 0;
}

.section-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color: #555;
}

.section-list li::before {
    content: "•";
    color: #2c5d8f;
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

/* Caja destacada para la historia/fundadores */
.highlight-box {
    background-color: #f0f4f8;
    padding: 20px;
    border-left: 4px solid #11bcd4;
    border-radius: 0 10px 10px 0;
    font-style: italic;
}

/* Manejo de Imágenes */
.rounded-custom {
    border-radius: 30px; /* Bordes redondeados elegantes */
}

.img-container img {
    width: 100%;
    transition: transform 0.5s ease;
}

.img-container:hover img {
    transform: scale(1.02); /* Efecto zoom sutil */
}

.ib-logo-img {
    max-width: 80%; /* El logo del IB no debe tocar los bordes */
}

/* Responsivo */
@media (max-width: 991px) {
    .section-title-blue {
        font-size: 1.8rem;
        text-align: center;
    }
    .section-text {
        font-size: 1rem;
    }
}

/* Sombra suave al contenedor principal */
#accordionBeliefs {
    border: 1px solid #dee2e6;
    border-radius: 12px;
}
/*** Header ***/
.header-carousel::before,
.header-carousel::after,
.page-header::before,
.page-header::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 10px;
    top: 0;
    left: 0;
    background: url(../img/bg-header-top.png) center center repeat-x;
    z-index: 1;
}

.header-carousel::after,
.page-header::after {
    height: 19px;
    top: auto;
    bottom: 0;
    background: url(../img/bg-header-bottom.png) center center repeat-x;
}

@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 500px;
    }
    
    .header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .header-carousel .owl-carousel-item p {
        font-size: 16px !important;
        font-weight: 400 !important;
    }

    .header-carousel .owl-carousel-item h1 {
        font-size: 30px;
        font-weight: 600;
    }
}

.header-carousel .owl-nav {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    margin: 7px 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 45px;
    font-size: 22px;
    transition: .5s;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.page-header {
    background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .5);
}
.owl-carousel-item {
    height: 100vh; /* O la altura que desees para el banner */
    min-height: 500px;
    overflow: hidden;
}

.owl-carousel-item video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Esto evita que el video se estire feo */
}

/* Footer Principal con Gradiente */
.footer {
    background: linear-gradient(to bottom, #2b5f8c 0%, #1e3d5a 100%) !important;
    color: #ffffff;
    margin-top: 0 !important; /* Eliminamos el margen superior excesivo */
    clear: both; /* Evita que flote sobre otras secciones */
}

/* Enlaces del Centro */
.footer .footer-links {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Espacio reducido entre links */
}

.footer .footer-link-item {
    color: #ffffff !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    transition: 0.3s;
}

.footer .footer-link-item:hover {
    color: #1abc9c !important;
    transform: translateX(3px);
}

/* Botones Sociales Compactos */
.footer .btn-social-white {
    width: 38px; /* Reducido de 45px */
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #2b5f8c;
    border-radius: 8px;
    margin: 0 4px;
    font-size: 16px;
    transition: .3s;
    text-decoration: none;
}

.footer .btn-social-white:hover {
    background: #1aa4db;
    color: #ffffff;
}

/* Copyright más pequeño */
.footer .copyright {
    padding: 15px 0 !important;
}

/* --- FIX PARA LA SECCION HEADMASTER --- */
#headmaster-section {
    position: relative;
    z-index: 10;
    margin-bottom: 0 !important;
    padding-bottom: 40px !important;
}