/* ============================================================
   ARCHIVO: mainnuevo.css
   Sincronización Total: Control Escolar + Escuela de Lenguas
   Versión: 2.0 - Corrección de contraste en iconos
   ============================================================ */

:root {
    --buo-orange: #f75e25 !important;
    --buo-dark: #05083d !important;
}

/* --- ESTRUCTURA GENERAL --- */
.main {
    position: relative !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
}

.bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.buo-blob {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(247, 94, 37, 0.1) 0%, rgba(247, 94, 37, 0) 70%);
    border-radius: 50%;
    filter: blur(60px);
    animation: float-buo 25s infinite alternate ease-in-out;
}

@keyframes float-buo {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(150px, 100px);
    }
}

/* --- SLIDER DE BANDERAS --- */
.banderas-slider-container {
    overflow: hidden;
    width: 100%;
    margin: 20px 0;
    padding: 5px 0;
    position: relative;
    z-index: 2;
}

.banderas-slider {
    display: flex;
    animation: scrollBanderas 15s linear infinite;
    width: max-content;
}

.bandera {
    height: 60px;
    width: 90px;
    margin: 0 15px;
    transition: 0.3s;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.bandera:hover {
    transform: scale(1.2) !important;
    z-index: 20;
}

@keyframes scrollBanderas {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* --- TIPOGRAFÍA --- */
.t-impact {
    font-family: 'Archivo Black', sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    line-height: 0.9 !important;
    letter-spacing: -3px !important;
    font-size: 5.2rem !important;
    color: var(--buo-dark) !important;
}

.t-accent {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;

    color: var(--buo-orange) !important;
    text-transform: none !important;
    display: inline-block !important;
    transform: rotate(-1.5deg) !important;


    position: relative !important;
    top: -10px !important;
    margin-bottom: -20px;
    /* Evita que deje un hueco grande abajo */

    transform: rotate(-0.5deg) !important;
}

/* Estilo para títulos secundarios como Doctorados, Maestrías, etc. */
h3 .t-accent {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 900 !important;
    color: #f75e25 !important;
    text-transform: none !important;
    display: inline-block !important;

    /* Tamaño reducido */
    font-size: 3.2rem !important;

    /* Ajuste de posición para que no flote demasiado */
    position: relative !important;
    top: -5px !important;

    transform: rotate(-0.5deg) !important;
    letter-spacing: 0px !important;
}

h4 .t-accent {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 900 !important;
    color: #f75e25 !important;
    text-transform: capitalize !important;
    display: inline-block !important;

    /* Tamaño reducido */
    font-size: 2.0rem !important;

    /* Ajuste de posición para que no flote demasiado */
    position: relative !important;
    top: -5px !important;

    transform: rotate(-0.5deg) !important;
    letter-spacing: 0px !important;
}

/* --- TARJETAS (CARDS MODERNAS) --- */
.organization-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 35px 30px !important;
    height: 100% !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.organization-card::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0;
    height: 5px !important;
    background: var(--buo-orange) !important;
    transition: 0.4s !important;
}

.organization-card:hover::after {
    width: 100% !important;
}

.organization-card:hover {
    transform: translateY(-15px) !important;
    box-shadow: 0 25px 50px rgba(247, 94, 37, 0.15) !important;
}

/* --- ICONOS Y EFECTOS DE MOVIMIENTO (AJUSTADO) --- */
.icon-box {
    width: 65px !important;
    height: 65px !important;
    background: var(--buo-orange) !important;
    color: #ffffff !important;
    /* Icono blanco por defecto */
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 18px !important;
    font-size: 2rem !important;
    margin-bottom: 25px !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* EFECTO: Al pasar el mouse, el fondo cambia a azul y el icono se mantiene/fuerza en blanco */
.organization-card:hover .icon-box {
    background-color: var(--buo-dark) !important;
    transform: rotate(12deg) scale(1.1) !important;
    box-shadow: 0 10px 20px rgba(5, 8, 61, 0.2) !important;
}

/* Asegura que el icono interior sea blanco y pulse al hacer hover */
.organization-card:hover .icon-box i,
.organization-card:hover .icon-box svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    animation: pulse-icon 1.5s infinite;
}

@keyframes pulse-icon {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Corregir títulos h5 en tarjetas (Ajustado para Escuela de Lenguas) */
.organization-card h5.t-accent {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    color: var(--buo-orange) !important;
    text-transform: none !important;
    display: inline-block !important;
    transform: rotate(-1.5deg) !important;
    /* Inclinación recuperada */
    position: relative !important;
    top: -5px !important;
    /* Ajuste de altura */
    font-size: 1.4rem !important;
    letter-spacing: 0px !important;
}

/* Asegurar que la tarjeta no corte la inclinación */
.organization-card {
    overflow: visible !important;
}

/* --- BOTONES / BADGES --- */
.badge-custom {
    background: rgba(247, 94, 37, 0.08) !important;
    color: #f75e25 !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid rgba(247, 94, 37, 0.15) !important;
    margin-top: 15px !important;
    margin-right: 5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

.badge-custom:hover {
    background: #f75e25 !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 5px 15px rgba(247, 94, 37, 0.3) !important;
}

/* --- GALERÍA --- */
.gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 15px;
}

.gallery-item img {
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    object-fit: cover !important;
    display: block !important;
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(247, 94, 37, 0.7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.4s;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* --- BLOQUE FINAL (CTA) --- */
.cta-block .t-impact {
    color: #ffffff !important;
}

.cta-block .t-accent {
    color: var(--buo-orange) !important;
    transform: none !important;
    top: 0 !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .t-impact {
        font-size: 3.2rem !important;
    }
}

/* ============================================================
   SECCIÓN: SALUD INTEGRAL / SERVICIO
   ============================================================ */

.facility-card-pro {
    background: #ffffff !important;
    border-radius: 25px !important;
    /* Más redondeado como el sitio oficial */
    overflow: hidden !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03) !important;
    height: 100% !important;
    transition: all 0.4s ease !important;
}

.facility-card-pro:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(247, 94, 37, 0.2) !important;
}

.facility-image-wrapper {
    width: 100% !important;
    height: 250px !important;
    overflow: hidden !important;
}

.facility-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.8s ease !important;
}

.facility-card-pro:hover .facility-image-wrapper img {
    transform: scale(1.08) !important;
}

/* Títulos de Servicios: Naranja BUO, pero elegantes */
.facility-card-pro h3.t-accent {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    color: var(--buo-orange) !important;
    font-size: 1.6rem !important;
    text-transform: none !important;
    transform: none !important;
    /* En servicios médicos la legibilidad es prioridad */
    margin-bottom: 15px !important;
    display: block !important;
}

/* Iconos circulares o cuadrados minimalistas */
.icon-box-pro {
    width: 55px !important;
    height: 55px !important;
    background: #fff4f0 !important;
    /* Naranja muy suave de fondo */
    color: var(--buo-orange) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 15px !important;
    font-size: 1.6rem !important;
    margin-bottom: 20px !important;
    transition: 0.3s !important;
}

.facility-card-pro:hover .icon-box-pro {
    background: var(--buo-orange) !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

/* Lista de ítems con check naranja */
.facility-list {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px dashed #eee !important;
}

.facility-list div {
    margin-bottom: 10px !important;
    font-weight: 500 !important;
    color: #555 !important;
}

.text-orange {
    color: var(--buo-orange) !important;
}

/* ============================================================
   SECCIÓN HERO: IMAGEN CON MARCO Y BADGE GRANDE
   ============================================================ */
.alumni-img-container {
    position: relative !important;
    display: inline-block !important;
    margin-top: 30px !important;
}

/* El marco naranja de atrás */
.alumni-img-container::before {
    content: "" !important;
    position: absolute !important;
    top: -20px !important;
    right: -20px !important;
    width: 100% !important;
    height: 100% !important;
    border: 3px solid #f75e25 !important;
    /* Naranja exacto */
    border-radius: 40px !important;
    z-index: 1 !important;
}

.alumni-img-container img {
    position: relative !important;
    z-index: 2 !important;
    /* Encima del marco */
    border-radius: 40px !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15) !important;
}

/* Badge Negro "Servicios de Calidad" - MÁS GRANDE */
.service-badge-float {
    position: absolute !important;
    bottom: 30px !important;
    left: -40px !important;
    background: #05083d !important;
    color: #ffffff !important;
    padding: 18px 30px !important;
    /* Más grande */
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    box-shadow: 0 15px 35px rgba(5, 8, 61, 0.35) !important;
    border-left: 6px solid #f75e25 !important;
    z-index: 10 !important;
    animation: float-badge-buo 4s infinite ease-in-out !important;
}

@keyframes float-badge-buo {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* ============================================================
   STATS: LAS 3 PEQUEÑAS TARJETAS CON MOVIMIENTO
   ============================================================ */
.feature-highlights {
    display: flex !important;
    gap: 15px !important;
    margin-top: 40px !important;
    flex-wrap: wrap !important;
}

.highlight-item-new {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 15px 25px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.highlight-item-new:hover {
    transform: translateY(-8px) !important;
    /* Movimiento de "brinco" */
    border-color: #f75e25 !important;
    box-shadow: 0 15px 30px rgba(247, 94, 37, 0.15) !important;
}

.highlight-item-new i {
    font-size: 1.6rem !important;
    color: #f75e25 !important;
}

.highlight-item-new .number {
    font-family: 'Archivo Black', sans-serif !important;
    font-size: 1.5rem !important;
    color: #05083d !important;
    line-height: 1 !important;
}

.highlight-item-new .label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #888 !important;
    text-transform: uppercase !important;
}

/* ============================================================
   TARJETAS DE SERVICIOS (ABAJO)
   ============================================================ */
.facility-card-pro {
    background: #fff !important;
    border-radius: 25px !important;
    border: 1px solid #f0f0f0 !important;
    transition: all 0.4s ease !important;
    height: 100% !important;
    overflow: hidden !important;
}

.facility-card-pro:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

.facility-image-wrapper {
    height: 240px !important;
    overflow: hidden !important;
}

.facility-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: 0.5s !important;
}

.facility-card-pro:hover .facility-image-wrapper img {
    transform: scale(1.1) !important;
}

.facility-card-pro h3.t-accent {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    color: #f75e25 !important;
    font-size: 1.5rem !important;
    transform: none !important;
    /* En servicios de salud van rectos */
    margin: 15px 0 !important;
}

/* ============================================================
   ESTILO FINAL LIC
   ============================================================ */

/* 1. Reset de variables para asegurar el Naranja BUO */
:root {
    --buo-orange-clean: #f75e25 !important;
    --buo-dark-blue: #05083d !important;
}

/* 2. Tarjetas de Oferta Educativa */
.lic-card {
    background: #fff !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

.lic-card:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 20px 40px rgba(255, 102, 0, 0.15) !important;
    border-color: var(--buo-orange) !important;
}

.lic-img-wrapper {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.lic-img-wrapper img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.6s ease !important;
}

.lic-card:hover .lic-img-wrapper img {
    transform: scale(1.08) !important;
}

.lic-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 5. Campo Laboral (Estilo Tags Limpios) */
.campo-item {
    background: #fff5f1 !important;
    /* Fondo naranja casi blanco */
    color: var(--buo-orange-clean) !important;
    border: 1px solid rgba(247, 94, 37, 0.1) !important;
    font-size: 0.65rem !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    margin: 2px !important;
    font-weight: 700 !important;
    display: inline-block !important;
}

/* 6. Botón (Azul a Naranja) */
.btn-buo-more {
    background: var(--buo-dark-blue) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    margin-top: auto !important;
    /* Lo empuja siempre al final */
    transition: 0.3s !important;
    border: none !important;
}

.btn-buo-more:hover {
    background: var(--buo-orange-clean) !important;
    color: #fff !important;
}

/* ============================================================
   ESTILO STATS (Aprendizaje, Clases, Vinculación, etc.)
   ============================================================ */

.stat-card-buo {
    background: #ffffff !important;
    padding: 30px 25px !important;
    border-radius: 12px !important;
    /* Redondeo suave igual a las lic-cards */
    border: 1px solid #eeeeee !important;
    border-bottom: 4px solid #f2f2f2 !important;
    /* Borde gris base */
    transition: all 0.3s ease-in-out !important;
    height: 100% !important;
    text-align: center !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02) !important;
}

.stat-card-buo:hover {
    transform: translateY(-8px) !important;
    border-bottom-color: #f75e25 !important;
    /* El naranja BUO al pasar el mouse */
    box-shadow: 0 12px 25px rgba(247, 94, 37, 0.1) !important;
}

/* El Icono: Naranja Puro sin sombras raras */
.stat-card-buo i {
    color: #f75e25 !important;
    font-size: 2.8rem !important;
    margin-bottom: 20px !important;
    display: block !important;
    transition: 0.3s !important;
}

/* El Título dentro de la Stat Card */
.stat-card-buo h5 {
    color: #05083d !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
}

/* El texto descriptivo */
.stat-card-buo p {
    color: #666666 !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
}

/* Efecto opcional: El icono crece un poco al hover */
.stat-card-buo:hover i {
    transform: scale(1.1) !important;
}

/* ============================================================
   PARA PAGINA PRINCIPAL
   ============================================================ */

/* 1. SECCIÓN VIDA ESTUDIANTIL (SLICK CAROUSEL) */
#buo-custom-engine #slick {
    display: none !important;
}

#buo-custom-engine #slick.slick-initialized {
    display: block !important;
}

#buo-custom-engine #slick .slick-list {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

#buo-custom-engine #slick .slick-slide {
    padding-right: 15px !important;
    padding-left: 15px !important;
}

#buo-custom-engine #slick .slide {
    position: relative !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 12px !important;
}

#buo-custom-engine #slick .slide img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 12px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
}

#buo-custom-engine #slick .slide:hover img {
    transform: scale(2.1) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
    filter: brightness(1.1) !important;
}

#buo-custom-engine #slick .slide::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%) !important;
    border-radius: 12px !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    z-index: 0 !important;
}

#buo-custom-engine #slick .slide:hover::before {
    opacity: 1 !important;
}

#buo-custom-engine #slick .slide::after {
    content: '🔍' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    font-size: 48px !important;
    color: white !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    z-index: 2 !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#buo-custom-engine #slick .slide:hover::after {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
}

#buo-custom-engine #slick .slick-arrow {
    display: none !important;
}

/* 2. TIPOGRAFÍAS DE IMPACTO Y ACENTOS */
#buo-custom-engine .t-impact,
#buo-custom-engine .section-header h2,
#buo-custom-engine .featured-programs .section-title h2 {
    font-family: 'Archivo Black', sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    line-height: 0.9 !important;
    letter-spacing: -1px !important;
    font-size: 4.2rem !important;
    color: #05083d !important;
    padding-bottom: 10px !important;
}

#buo-custom-engine .hero-content .display-1 {
    font-size: 4.8rem !important;
    color: #ffffff !important;
}

#buo-custom-engine .t-accent {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 980 !important;
    color: #f75e25 !important;
    text-transform: none !important;
    display: inline-block !important;
    transform: rotate(-3deg) !important;
    position: relative !important;
    top: -8px !important;
    padding: 0 5px !important;
}

/* 3. HERO SLIDER Y VIDEO BACKGROUND */
#buo-custom-engine .hero-content {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-align: left !important;
}

#buo-custom-engine .box-highlight {
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 40px !important;
    border-radius: 20px !important;
    backdrop-filter: blur(4px) !important;
    border-left: 10px solid #f75e25 !important;
}

#buo-custom-engine .carousel-video-bg::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(5, 8, 61, 0.4) !important;
    z-index: 1 !important;
}

#buo-custom-engine .hero-content h1,
#buo-custom-engine .hero-content p,
#buo-custom-engine .hero-content h6 {
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.7) !important;
}

/* 4. SECCIÓN SERVICIOS (FEATURE CARDS) */
#buo-custom-engine .feature-card {
    background: #ffffff !important;
    padding: 40px 30px !important;
    border-radius: 20px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    height: 100% !important;
}

#buo-custom-engine .feature-card:hover {
    transform: translateY(-15px) scale(1.02) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12) !important;
    border-color: #f75e25 !important;
}

#buo-custom-engine .feature-icon {
    width: 70px !important;
    height: 70px !important;
    background: rgba(247, 94, 37, 0.1) !important;
    color: #f75e25 !important;
    border-radius: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    margin-bottom: 25px !important;
    transition: 0.4s !important;
}

#buo-custom-engine .bg-servicios-custom {
    background-color: rgba(5, 8, 61, 0.20) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 80px 0 !important;
}

/* 5. MARCAS DE AGUA (BACKDROP TEXT) */
#buo-custom-engine #featured-programs::after {
    content: "El éxito esta en la BUO" !important;
    position: absolute !important;
    top: 2% !important;
    left: 7% !important;
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 700 !important;
    font-size: 8rem !important;
    color: #666666 !important;
    opacity: 0.1 !important;
    white-space: nowrap !important;
    transform: rotate(-3deg) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

#buo-custom-engine .about::after {
    content: "somos BUO" !important;
    position: absolute !important;
    top: 1% !important;
    left: 15% !important;
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-size: 14rem !important;
    color: #666666 !important;
    opacity: 0.1 !important;
    transform: rotate(-3deg) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* 6. RESPONSIVE */
@media (max-width: 768px) {

    #buo-custom-engine .display-1,
    #buo-custom-engine .section-header h2,
    #buo-custom-engine .featured-programs .section-title h2 {
        font-size: 3rem !important;
    }

    #buo-custom-engine #slick .slide img {
        height: 250px !important;
    }
}

/* ===== DISEÑO DE TARJETAS (EDUCACIÓN, LICENCIATURAS, POSGRADOS) ===== */

#buo-custom-engine .feature-card {
    background: #ffffff !important;
    padding: 45px 35px !important;
    border-radius: 20px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

/* Efecto al pasar el mouse */
#buo-custom-engine .feature-card:hover {
    transform: translateY(-15px) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12) !important;
    border-color: #f75e25 !important;
}

/* El icono circular naranja */
#buo-custom-engine .feature-icon {
    width: 70px !important;
    height: 70px !important;
    background: rgba(247, 94, 37, 0.1) !important;
    color: #f75e25 !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2.2rem !important;
    margin-bottom: 25px !important;
    transition: all 0.5s ease !important;
}

#buo-custom-engine .feature-card:hover .feature-icon {
    background: #f75e25 !important;
    color: #ffffff !important;
    transform: rotateY(360deg) !important;
}

/* Títulos de las tarjetas */
#buo-custom-engine .feature-content h3 {
    font-family: 'Archivo Black', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.4rem !important;
    color: #05083d !important;
    margin-bottom: 15px !important;
    letter-spacing: -0.5px !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
}

/* El texto cursiva naranja (Continua, 2026) */
#buo-custom-engine .t-accent-small {
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 980 !important;
    font-size: 2.0rem !important;
    color: #f75e25 !important;
    text-transform: none !important;
    display: inline-block !important;
    transform: rotate(-2deg) !important;
    margin-left: 5px !important;
}

/* Texto de descripción */
#buo-custom-engine .feature-content p {
    font-family: 'Inter', sans-serif !important;
    color: #555 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
}

/* Barra naranja inferior que aparece al hover */
#buo-custom-engine .feature-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 6px !important;
    background: #f75e25 !important;
    transition: width 0.4s ease !important;
}

#buo-custom-engine .feature-card:hover::after {
    width: 100% !important;
}

#buo-custom-engine a {
    text-decoration: none !important;
}

/* ===== SECCIÓN LICENCIATURAS (MARCA DE AGUA) ===== */
#buo-custom-engine #featured-programs {
    position: relative !important;
    overflow: hidden !important;
    padding: 80px 0 !important;
}

#buo-custom-engine #featured-programs::after {
    content: "El éxito está en la BUO" !important;
    position: absolute !important;
    top: 2% !important;
    left: 2% !important;
    font-family: 'Playfair Display', serif !important;
    font-style: italic !important;
    font-weight: 700 !important;
    /* Tamaño para Desktop */
    font-size: 9rem !important;
    color: #666666 !important;
    opacity: 0.08 !important;
    /* Ajustado para que se note igual que la web */
    white-space: nowrap !important;
    transform: rotate(-3deg) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
}

/* AJUSTE PARA CELULARES (Pantallas menores a 768px) */
@media (max-width: 767px) {
    #buo-custom-engine #featured-programs::after {
        font-size: 3.5rem !important;
        /* Mucho más pequeño para que quepa en el ancho del celular */
        top: 5% !important;
        left: 5% !important;
        white-space: normal !important;
        /* Permite que el texto baje si es necesario */
        line-height: 1 !important;
        width: 100% !important;
    }

    #buo-custom-engine #featured-programs {
        padding: 40px 0 !important;
    }
}

/* AJUSTE PARA TABLETS */
@media (min-width: 768px) and (max-width: 1199px) {
    #buo-custom-engine #featured-programs::after {
        font-size: 6rem !important;
    }
}

/* Asegurar que el contenido esté por encima de la marca de agua */
#buo-custom-engine #featured-programs .container {
    position: relative !important;
    z-index: 2 !important;
}

/* Estilo de los items de la lista de carreras */
#buo-custom-engine .program-item {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    padding: 15px !important;
    border-radius: 15px !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

#buo-custom-engine .program-item:hover {
    transform: translateX(10px) !important;
    border-color: #f75e25 !important;
    box-shadow: 0 10px 25px rgba(247, 94, 37, 0.1) !important;
}

/* ===== ESTILO DEL VIDEO (LADO DERECHO) ===== */
#buo-custom-engine .video-graphic-container {
    position: relative !important;
    padding: 20px !important;
    height: 100% !important;
}

#buo-custom-engine .video-frame-style {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    /* Mantiene proporción de cine */
    background: #000 !important;
    border: 12px solid #ffffff !important;
    /* Marco blanco grueso */
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
}

#buo-custom-engine .video-frame-style iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

#buo-custom-engine .video-badge {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    background: #f75e25 !important;
    color: #fff !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    z-index: 10 !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Decoraciones circulares de fondo */
#buo-custom-engine .bg-circle-decoration {
    position: absolute !important;
    top: -20px !important;
    right: -20px !important;
    width: 150px !important;
    height: 150px !important;
    background: rgba(247, 94, 37, 0.1) !important;
    border-radius: 50% !important;
    z-index: -1 !important;
}

@media (max-width: 767px) {
    #buo-custom-engine .video-frame-style {
        border-width: 6px !important;
        /* Marco más delgado en móvil */
        min-height: 200px !important;
    }

    #buo-custom-engine .video-badge {
        font-size: 0.6rem !important;
        padding: 4px 10px !important;
        top: 10px !important;
        left: 10px !important;
    }

    /* Evita que las tarjetas de licenciatura se amontonen */
    #buo-custom-engine .program-item {
        flex-direction: column !important;
        text-align: center !important;
    }

    #buo-custom-engine .item-icon {
        margin-right: 0 !important;
        margin-bottom: 15px !important;
    }
}

/* ===== FONDO DE PATRÓN DE LOGOS (POSGRADOS) ===== */
.campus-facilities {
    position: relative !important;
    padding: 80px 0 !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.campus-facilities::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;

    background-image: url('../img/logog.png') !important;

    background-repeat: repeat !important;
    background-size: 150px !important;
    opacity: 0.05 !important;
    /* Opacidad sutil */
    transform: rotate(-20deg) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Forzar que el contenedor sea transparente para ver el fondo */
.campus-facilities .container {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
}

/* Ajuste para que los títulos y carruseles se vean bien sobre el fondo */
.campus-slider {
    background: transparent !important;
    margin-bottom: 50px;
}

/* Forzar transparencia para que el fondo sea visible */
#buo-custom-engine .campus-facilities .container,
#buo-custom-engine .campus-facilities .highlights-carousel {
    background: transparent !important;
    position: relative !important;
    z-index: 2 !important;
}

/* AJUSTE RESPONSIVO PARA MÓVIL */
@media (max-width: 767px) {
    #buo-custom-engine .campus-facilities::before {
        background-size: 100px !important;
        opacity: 0.04 !important;
    }
}

/* ===== EFECTO HOVER NARANJA EN TARJETAS DE POSGRADO ===== */

/* 1. Estado base de la tarjeta */
#campus-facilities .highlight-card {
    background: #ffffff !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    height: 100% !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 2. El efecto mágico al pasar el mouse */
#campus-facilities .highlight-card:hover {
    transform: translateY(-10px) !important;
    /* Se eleva un poco */

    /* Sombra naranja (Glow) */
    box-shadow: 0 15px 35px rgba(247, 94, 37, 0.25) !important;

    /* Borde naranja sutil */
    border-color: rgba(247, 94, 37, 0.5) !important;
}

/* 3. Opcional: Que la imagen también haga un pequeño zoom al pasar el mouse */
#campus-facilities .highlight-card:hover .card-image img {
    transform: scale(1.05) !important;
    transition: transform 0.4s ease !important;
}

/* Asegurar que el contenedor de la imagen no se desborde con el zoom */
#campus-facilities .card-image {
    overflow: hidden !important;
}

/* ============================================================ */
/* SECCIÓN FILOSOFÍA (IDENTIDAD) - VERSIÓN FINAL */
/* ============================================================ */

/* 1. Cambiamos el fondo de la sección a un gris MUY sutil para que el blanco de la tarjeta resalte */
#about.about {
    background-color: #f9f9f9 !important;
}

/* 2. Aseguramos que el texto sea visible y oscuro dentro de las tarjetas */
#about .value-card {
    background: #ffffff !important;
    color: #333333 !important;
    /* Gris oscuro para lectura */
    /* Aumentamos un poquito la sombra para que se note el borde de la tarjeta */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

/* 3. Forzamos el color de los párrafos específicamente */
#about .value-card p {
    color: #555555 !important;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* 4. Títulos de las tarjetas en el Azul Marino BUO */
#about .value-card h4 {
    color: #05083d !important;
    margin-top: 15px;
}

/* 5. Si la marca de agua "somos BUO" tapa las tarjetas, bajamos su nivel */
#about.about::after {
    z-index: 0 !important;
    /* Asegura que esté al fondo de todo */
}

/* Tarjetas de Valores y Misión/Visión */
#about .value-card {
    background: #ffffff !important;
    padding: 40px 30px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    text-align: center !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Efecto Hover en Tarjetas */
#about .value-card:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 20px 40px rgba(247, 94, 37, 0.15) !important;
    border-color: #f75e25 !important;
}

/* Iconos Circulares de los 4 Valores Superiores */
#about .value-icon {
    width: 80px !important;
    height: 80px !important;
    background: linear-gradient(135deg, #05083d 0%, #0a1163 100%) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2.2rem !important;
    margin: 0 auto 25px !important;
    transition: 0.4s !important;
    box-shadow: 0 8px 15px rgba(5, 8, 61, 0.2) !important;
}

#about .value-card:hover .value-icon {
    background: linear-gradient(135deg, #f75e25 0%, #ff8c61 100%) !important;
    transform: scale(1.1) rotate(10deg) !important;
}

/* ICONOS PARA MISIÓN Y VISIÓN (Agregados vía CSS) */
#about .row.g-4.justify-content-center .col-lg-5 .value-card {
    margin-top: 30px !important;
}

/* Icono Misión (El primero de la fila de 2) */
#about .row.g-4.justify-content-center .col-lg-5:first-child .value-card::before {
    content: "\f2db" !important;
    font-family: "bootstrap-icons" !important;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: #f75e25;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 5px 15px rgba(247, 94, 37, 0.3);
}

/* Icono Visión (El segundo de la fila de 2) */
#about .row.g-4.justify-content-center .col-lg-5:last-child .value-card::before {
    content: "\f33e" !important;
    font-family: "bootstrap-icons" !important;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: #05083d;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 5px 15px rgba(5, 8, 61, 0.3);
}

/* REGLAS RESPONSIVAS PARA LA MARCA DE AGUA (Ajusta esto al final de tu CSS) */

@media (max-width: 768px) {
    #about.about::after {
        font-size: 2.8 !important;
        /* Tamaño de letra para celular */
        top: 65px !important;
        opacity: 0.1 !important;
        transform: translateX(-50%) rotate(-3deg) !important;
        /* Menos rotación para que quepa bien */
    }

    /* Ajustamos el padding de la sección en móvil para que no haya tanto hueco */
    #about.about {
        padding: 60px 0 !important;
    }

    #about .t-impact {
        font-size: 3rem !important;
        line-height: 1 !important;
    }
}

/* ===== VIDA UNIVERSITARIA ===== */

/* 1. Estabilizar el contenedor del carrusel */
#slick .slick-track {
    display: flex !important;
    align-items: stretch !important;
}

/* 2. El Slide (Asegurar que tenga cuerpo) */
#slick .slide {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #667eea !important;
    /* Fondo sólido por si falla el gradiente */
    height: 100% !important;
    min-height: 300px !important;
}

/* 3. El Enlace <a> (Ajuste vital para que no colapse la imagen) */
#slick .slide a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    /* Cambiado de absolute a relative */
    z-index: 10 !important;
}

/* 4. La Imagen (Forzar a que llene el contenedor sin cortarse feo) */
#slick .slide img {
    width: 100% !important;
    height: 300px !important;
    /* Altura base */
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease !important;
}

/* Hover: Zoom controlado */
#slick .slide:hover img {
    transform: scale(2.1) !important;
    filter: brightness(0.8) !important;
}

/* 5. La Lupa (Asegurar visibilidad absoluta) */
#slick .slide::after {
    content: '🔍' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    font-size: 50px !important;
    color: #ffffff !important;
    z-index: 15 !important;
    opacity: 0 !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    pointer-events: none !important;
    display: block !important;
}

#slick .slide:hover::after {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
}

/* 6. Alturas Responsivas (Forzar consistencia) */
@media (min-width: 768px) {

    #slick .slide img,
    #slick .slide {
        height: 350px !important;
    }
}

@media (min-width: 992px) {

    #slick .slide img,
    #slick .slide {
        height: 400px !important;
    }
}

@media (min-width: 1200px) {

    #slick .slide img,
    #slick .slide {
        height: 450px !important;
    }
}

/* Ocultar flechas */
#slick .slick-arrow {
    display: none !important;
}

/* ===== SECCIÓN SERVICIOS UNIVERSITARIOS (VERSIÓN FINAL CON DECORACIONES) ===== */

/* 1. Fondo y Contenedor Principal */
.bg-servicios-custom {
    background-color: rgba(5, 8, 61, 0.20) !important;
    background-image: none !important;
    position: relative;
    padding: 100px 0 !important;
    overflow: hidden;
    z-index: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Matamos el logo repetido para que luzcan tus decoraciones */
.bg-servicios-custom::before {
    content: none !important;
    display: none !important;
}

/* 2. Recuperación de Elementos Gráficos de Fondo */
.bg-circle-decoration-servicios {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    background: rgba(247, 94, 37, 0.15);
    /* Un poco más de presencia */
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.bg-dots-decoration-servicios {
    position: absolute;
    bottom: 5%;
    left: 2%;
    width: 120px;
    height: 180px;
    background-image: radial-gradient(#f75e25 2px, transparent 2px);
    background-size: 20px 20px;
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

/* 3. Tarjetas Uniformes */
.campus-slider .swiper-slide {
    height: auto !important;
    display: flex !important;
}

.highlight-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* 4. Botón Azul Alargado sobre la imagen */
.highlight-card .category-tag {
    background-color: #05083d !important;
    color: #ffffff !important;

    /* 1. MÁS ALARGADO: Aumentamos padding horizontal */
    padding: 10px 35px !important;

    /* 2. POSICIÓN RECARGADA: Valores menores para pegarlo más a la esquina */
    position: absolute;
    top: 5px !important;
    right: 5px !important;

    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.6) !important;

    /* 4. DETALLES FINALES */
    border-radius: 50px !important;
    font-size: 10px !important;
    /* Un poco más pequeña la letra para que luzca lo largo */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    z-index: 10 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    /* Brillo sutil en el borde */
}

/* Opcional: un pequeño efecto cuando pasas el mouse por la tarjeta */
.highlight-card:hover .category-tag {
    background-color: #f75e25 !important;
    /* Cambia a naranja al hacer hover en la tarjeta */
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* 5. Título Naranja con Línea Azul (Identidad BUO) */
.highlight-card .card-body h4 {
    font-family: 'Archivo Black', sans-serif !important;
    color: #f75e25 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    margin-bottom: 18px !important;
    padding-left: 20px !important;
    /* Espacio para la línea */
    position: relative !important;
    text-align: left !important;
}

/* La línea azul lateral */
.highlight-card .card-body h4::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 6px !important;
    height: 100% !important;
    background-color: #05083d !important;
    border-radius: 4px !important;
}

/* 6. Cuerpo y Texto */
.highlight-card .card-body {
    padding: 30px !important;
    flex-grow: 1 !important;
}

.highlight-card .card-body p {
    color: #555 !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    text-align: justify !important;
}

/* Hover de la Tarjeta */
.highlight-card:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 25px 50px rgba(247, 94, 37, 0.15) !important;
    border-color: #f75e25 !important;
}

/* ===== SECCIÓN VALORES: ELIMINACIÓN DE GRISES Y FONDO TOTAL ===== */

.section-valores-envolvente {
    /* Usamos el azul marino institucional con transparencia para el efecto Glassmorphism */
    background-color: #080924 !important;
    padding: 100px 0 !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Decoración: Círculo Naranja sutil de fondo */
.section-valores-envolvente::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(247, 94, 37, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

/* Decoración: Puntos de fondo */
.section-valores-envolvente::after {
    content: "";
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: -1;
}

/* Ajuste de Texto para fondo oscuro */
.section-valores-envolvente .t-impact {
    color: #ffffff !important;
    /* Blanco para resaltar sobre el azul */
}

.section-valores-envolvente p.description-valores {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1.1rem;
}

/* Tarjetas de Valores (Look más limpio sobre fondo oscuro) */
.value-card {
    text-align: center !important;
    /* Centrado absoluto */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.value-card:hover {
    background: #ffffff !important;
    transform: translateY(-15px) !important;
}

.value-card h4 {
    margin-bottom: 15px !important;
    /* Mantenemos el naranja que ya tenías */
}

.value-card:hover h4 {
    color: #f75e25 !important;
    /* Cambia a naranja en hover */
}

.value-card p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    /* Mejora la legibilidad */
    margin: 0 !important;
    padding: 0 10px;
    /* Evita que el texto toque los bordes */
    text-align: center !important;
    /* Refuerzo del centrado */
}

.value-card:hover p {
    color: #555555 !important;
    /* Oscuro cuando la tarjeta se vuelve blanca */
}

/* Iconos */
.value-icon {
    width: 70px;
    height: 70px;
    background: #f75e25 !important;
    /* Naranja para que resalte */
    color: #fff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto;
}

/* Estilos para la envolvente de Historia */
.historia-envolvente {
    padding: 80px 0;
    background-color: #ffffff;
    /* Fondo limpio para que contraste con la de valores azul */
    position: relative;
}

/* Ajuste del título Descubre Historia */
.historia-envolvente .t-impact {
    font-size: 4rem !important;
    line-height: 0.85;
    margin-bottom: 30px;
    color: #05083d;
}

.historia-envolvente .t-accent {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #f75e25;
    font-size: 0.8em;
    text-transform: none;
}

/* Estilo para Misión y Visión dentro de esta sección */
.historia-envolvente .t-impact-sub {
    font-family: 'Archivo Black', sans-serif;
    color: #f75e25;
    border-left: 5px solid #080924;
    padding-left: 15px;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

/* Aseguramos que la sección ocupe todo el ancho y no tenga rastro de gris */
.section-valores-envolvente {
    background-color: #080924 !important;
    /* Azul Marino BUO */
    padding: 100px 0 !important;
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Título en blanco para contraste */
.section-valores-envolvente h2.t-impact {
    color: #ffffff !important;
    font-size: 4rem !important;
}

/* Párrafo descriptivo en blanco sutil */
.description-valores {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 300;
}

/* Tarjetas con efecto Glassmorphism */
.value-card {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    border-radius: 20px !important;
    padding: 35px 25px !important;
    height: 100% !important;
    transition: all 0.4s ease;
}

.value-card:hover {
    background: #ffffff !important;
    transform: translateY(-12px);
}

.value-card h4 {
    color: #f75e25 !important;
    /* Naranja para que vibre */
    font-family: 'Archivo Black', sans-serif;
    margin-top: 15px;
}

.value-card p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.value-card:hover p {
    color: #444444 !important;
}

/* ===== ANIMACIONES SUTILES DE PROFUNDIDAD ===== */

/* Movimiento de flotación lenta y corta */
@keyframes subtleFloat {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(2deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* Pulso de luz muy suave */
@keyframes gentlePulse {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.05);
    }
}

/* Desplazamiento lateral para los puntos */
@keyframes drift {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(20px);
    }

    100% {
        transform: translateX(0);
    }
}

.section-valores-envolvente {
    background-color: #05083d !important;
    padding: 100px 0 !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Contenedor de Capas */
.bg-animated-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* Esferas de Luz */
.glow-sphere {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(247, 94, 37, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    animation: gentlePulse 12s infinite ease-in-out;
}

/* Triángulos sutiles a la derecha */
.floating-triangle {
    position: absolute;
    right: 8%;
    top: 25%;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid rgba(247, 94, 37, 0.25);
    filter: drop-shadow(0 0 10px rgba(247, 94, 37, 0.2));
    animation: subtleFloat 15s infinite ease-in-out;
}

.floating-triangle-2 {
    position: absolute;
    right: 15%;
    bottom: 20%;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 45px solid rgba(255, 255, 255, 0.15);
    transform: rotate(30deg);
    animation: subtleFloat 20s infinite ease-in-out reverse;
}

/* Trama de puntos */
.moving-dots {
    position: absolute;
    top: 15%;
    left: 10%;
    width: 300px;
    height: 300px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    animation: drift 18s infinite ease-in-out;
}

/* ================================================================
   SECCIÓN IDENTIDAD INSTITUCIONAL: ESTILO DEPURADO Y FINAL
   ================================================================ */

.identidad-envolvente {
    background-color: #ffffff !important;
    padding: 100px 0 !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* --- Fondo con Logos Repetidos (Patrón) --- */
.identidad-envolvente::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image: url('../img/logog.png') !important;
    background-repeat: repeat !important;
    background-size: 150px;
    /* Tamaño un poco más pequeño para que sea más sutil */
    opacity: 0.03;
    /* Muy tenue, como marca de agua */
    z-index: -1;
    pointer-events: none;
    filter: grayscale(100%);
    animation: patternMove 80s linear infinite;
    /* Movimiento más lento aún */
}

/* --- Estilo de Tarjetas Escuela de Lenguas (Identidad) --- */
.language-style-card {
    background: #ffffff;
    border-radius: 12px;
    /* Bordes ligeramente más suaves */
    position: relative;
    height: auto;
    min-height: 100%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    /* Sombra suave de Lenguas */
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    margin-top: 35px;
    z-index: 2;
}

.card-accent-line {
    height: 8px;
    background: #f75e25;
    /* Naranja BUO */
    width: 100%;
    border-radius: 15px 15px 0 0;
}

.card-icon-wrapper {
    width: 60px;
    height: 60px;
    background: #05083d;
    /* Azul Marino BUO */
    color: #f75e25;
    /* Icono naranja */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: -30px auto 15px;
    position: relative;
    border: 4px solid #ffffff;
    z-index: 3;
    transition: 0.4s;
}

.card-body-content {
    padding: 20px 25px 35px;
    text-align: center;
    flex-grow: 1;
}

/* Títulos de las tarjetas (Estilo Lenguas) */
.card-body-content h4 {
    font-family: 'Archivo Black', sans-serif;
    /* O la fuente que uses en Lenguas */
    font-size: 1.2rem;
    /* Tamaño optimizado */
    font-weight: 900;
    color: #05083d;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    /* Este ajuste es clave en Lenguas */
    line-height: 1.2;
}

/* Texto de las tarjetas (Estilo Lenguas) */
.card-body-content p {
    font-family: 'Montserrat', sans-serif;
    /* Tipografía más limpia */
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 0;
    font-weight: 400;
}

/* --- Efectos Hover --- */
.language-style-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(247, 94, 37, 0.15);
    border-color: #f75e25;
}

.language-style-card:hover .card-icon-wrapper {
    background: #f75e25;
    color: #ffffff;
    transform: scale(1.1) rotate(10deg);
}

/* --- Elementos Gráficos de Fondo (Z-index 0) --- */
.glow-sphere-light {
    position: absolute;
    top: -10%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(5, 8, 61, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    animation: gentlePulse 15s infinite ease-in-out;
    z-index: 0;
}

.moving-dots-gray {
    position: absolute;
    bottom: 5%;
    left: 5%;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    animation: drift 20s infinite linear;
    z-index: 0;
}

.floating-triangle-outline {
    position: absolute;
    left: 45%;
    top: 10%;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid rgba(247, 94, 37, 0.1);
    transform: rotate(-15deg);
    animation: subtleFloat 18s infinite ease-in-out;
    z-index: 0;
}

/* --- Animaciones --- */
@keyframes float-logo-subtle {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(-20px, 30px) rotate(2deg);
    }

    66% {
        transform: translate(10px, -15px) rotate(-1deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes gentlePulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes drift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 40px 40px;
    }
}

@keyframes subtleFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-15deg);
    }

    50% {
        transform: translateY(-20px) rotate(-10deg);
    }
}

/* Animación para que el patrón se mueva suavemente */
@keyframes patternMove {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-150px, -150px);
    }
}

/* Replicamos el hover de Lenguas */
.language-style-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(247, 94, 37, 0.12);
    border-color: #f75e25;
}

/* Mantener las tarjetas legibles sobre el patrón */
.language-style-card {
    background: #ffffff;
    /* Fondo sólido para que el patrón no pase por dentro */
    z-index: 2;
    /* ... resto de tus estilos de tarjeta se mantienen igual ... */
}

/* ===== SECCIÓN JUNTA DIRECTIVA: DISEÑO PREMIUM ===== */

.junta-envolvente {
    background-color: #fcfcfc !important;
    /* Un gris casi blanco para diferenciar de Identidad */
    padding: 100px 0 !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Patrón de logos invertido para esta sección */
.junta-envolvente::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image: url('../img/logog.png') !important;
    background-repeat: repeat !important;
    background-size: 200px;
    opacity: 0.03;
    z-index: -1;
    pointer-events: none;
    filter: grayscale(100%);
    animation: patternMoveReverse 70s linear infinite;
}

@keyframes patternMoveReverse {
    from {
        transform: translate(-200px, -200px);
    }

    to {
        transform: translate(0, 0);
    }
}

/* Estilo de la Imagen con Marco */
.visit-image {
    position: relative;
    z-index: 2;
}

.visit-image::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100%;
    height: 100%;
    border: 2px solid #f75e25;
    /* El marco naranja */
    border-radius: 1rem;
    z-index: -1;
    transition: 0.5s ease;
}

.visit-image:hover::after {
    top: 10px;
    left: 10px;
    background-color: rgba(247, 94, 37, 0.05);
}

/* Lista de funciones estilo Lenguas */
.visit-options li {
    font-family: 'Montserrat', sans-serif;
    color: #444;
    font-size: 1rem;
    display: flex;
    align-items: center;
    padding: 8px 0;
    transition: 0.3s;
}

.visit-options li i {
    color: #f75e25;
    /* Iconos en Naranja */
    font-size: 1.2rem;
    margin-right: 15px;
}

.visit-options li:hover {
    padding-left: 10px;
    color: #05083d;
}

.text-orange {
    color: #f75e25 !important;
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===== SECCIÓN HISTORIA: ESTILO UNIFICADO DE TARJETAS ===== */

.historia-envolvente {
    background-color: #ffffff;
    padding: 80px 0;
}

/* Título igual a Identidad Institucional */
.historia-title-unified {
    font-family: 'Archivo Black', sans-serif;
    font-size: 2.5rem;
    color: #05083d;
    text-transform: uppercase;
    margin-bottom: 40px;
    text-align: center;
}

/* Texto en columnas */
.history-text-columns {
    column-count: 2;
    column-gap: 50px;
    margin-bottom: 60px;
}

.history-text-columns p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.02rem;
    line-height: 1.8;
    color: #444;
    text-align: justify;
    break-inside: avoid;
}

/* --- Contenedor de Video Animado --- */
.video-frame-container {
    max-width: 100%;
    position: relative;
    padding: 10px;
    background: #fff;
    border-radius: 20px;
}

.video-frame-container::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    background: linear-gradient(45deg, #f75e25, #05083d, #f75e25);
    background-size: 400%;
    border-radius: 22px;
    opacity: 0.2;
    filter: blur(8px);
    animation: glow-animation 10s linear infinite;
}

/* --- Replicando Tarjetas de Identidad --- */
.history-card-style {
    background: #ffffff;
    border-radius: 15px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    /* Espacio para el icono */
    transition: 0.4s;
}

.history-card-style:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(247, 94, 37, 0.1);
}

.card-accent-line {
    height: 6px;
    background: #f75e25;
    width: 100%;
    border-radius: 15px 15px 0 0;
}

.card-icon-wrapper {
    width: 50px;
    height: 50px;
    background: #05083d;
    color: #f75e25;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin: -25px auto 10px;
    position: relative;
    border: 3px solid #ffffff;
    z-index: 2;
}

.card-body-content {
    padding: 15px 25px 25px;
    text-align: center;
}

.card-body-content h4 {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.1rem;
    color: #05083d;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* ===== ELEMENTOS GEOMÉTRICOS Y DINÁMICOS ===== */

.historia-envolvente {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: #ffffff;
}

/* 1. Malla de Color en Movimiento (Fondo Dinámico) */
.color-mesh-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(at 0% 0%, rgba(247, 94, 37, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(5, 8, 61, 0.05) 0px, transparent 50%);
    z-index: -2;
    animation: meshFlow 20s infinite alternate;
}

/* 2. Triángulos Flotantes Visibles */
.floating-triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 80px solid rgba(247, 94, 37, 0.1);
    /* Naranja transparente */
    z-index: -1;
    filter: blur(2px);
    pointer-events: none;
}

.triangle-1 {
    top: 10%;
    left: 5%;
    animation: floatGeometry 12s infinite ease-in-out;
}

.triangle-2 {
    bottom: 20%;
    right: 10%;
    transform: rotate(180deg);
    animation: floatGeometry 18s infinite ease-in-out reverse;
}

/* 3. Líneas de Conexión Tecnológica */
.tech-lines-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(90deg, rgba(5, 8, 61, 0.03) 1px, transparent 1px) 0 0 / 50px 50px,
        linear-gradient(rgba(5, 8, 61, 0.03) 1px, transparent 1px) 0 0 / 50px 50px;
    z-index: -2;
}

/* Animaciones */
@keyframes meshFlow {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

@keyframes floatGeometry {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    50% {
        transform: translateY(-40px) rotate(15deg) scale(1.1);
    }

    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

/* Efecto de "Cristal" para las tarjetas de Misión/Visión */
.history-card-style {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(247, 94, 37, 0.2) !important;
}

/* ===== CONFIGURACIÓN DEL CARRUSEL CONTINUO ===== */

.history-carousel-container {
    width: 100%;
    /* Cambiamos 'hidden' por 'auto' para que puedas hacer scroll manual si hay muchas */
    overflow-x: auto;
    overflow-y: visible;
    padding: 60px 0;
    position: relative;
    background: transparent;
    perspective: 2000px;
}

/* Ocultar la barra de scroll para que se vea limpio */
.history-carousel-container::-webkit-scrollbar {
    display: none;
}

.history-carousel-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    /* QUITAMOS LA ANIMACIÓN AQUÍ */
    animation: none !important;
    padding: 0 50px;
    /* Un poco de espacio a los lados */
}

/* Ya no necesitamos la pausa al hover porque ya no se mueve */
.history-carousel-container:hover .history-carousel-track {
    animation-play-state: running;
}

/* Mantenemos tus tarjetas exactamente igual porque el efecto hover es genial */
.history-card-custom {
    position: relative;
    flex: 0 0 285px;
    margin-right: -50px;
    background: #05083d;
    padding: 55px 35px 35px;
    border-radius: 4px;
    border: 1px solid rgba(0, 153, 255, 0.3);
    box-shadow: -15px 0 30px rgba(0, 0, 0, 0.6);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    transform: rotateY(-20deg);
    z-index: 1;
    cursor: pointer;
}

.history-card-custom:hover {
    transform: rotateY(0deg) scale(1.1);
    z-index: 500;
    margin-right: 20px;
    margin-left: 20px;
    border-color: #0099ff;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 153, 255, 0.3);
}

/* Mantenemos el estilo de número que te gustaba */
.card-step-number {
    position: absolute;
    top: 15px;
    left: 25px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.4rem;
    color: #0099ff;
    text-shadow: 0 0 10px rgba(0, 153, 255, 0.8);
    letter-spacing: 1px;
}

.card-step-number::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 20px;
    height: 3px;
    background: #f75e25;
    /* Línea naranja BUO */
    box-shadow: 0 0 8px rgba(247, 94, 37, 0.6);
}

/* El texto se ilumina un poco al hover para mejor lectura */
.history-card-custom p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #e0e6ed;
    text-align: justify;
    transition: color 0.3s ease;
}

.history-card-custom:hover p {
    color: #ffffff;
}

/* ANIMACIÓN: Mueve el track el 50% (la primera tanda de tarjetas) */
@keyframes infinite-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Ajuste para móviles: tarjetas más angostas */
@media (max-width: 768px) {
    .history-card-custom {
        flex: 0 0 300px;
    }

    @keyframes infinite-scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }
}