/* Permitir que el banner se desborde de su contenedor */
body, html {
    overflow-x: hidden;
}
/* Pega esto en tu archivo CSS principal (ej. app.css) */

/*
========================================================
--- FORZAR LA ELIMINACIÓN DEL ESPACIO ENTRE SECCIONES ---
========================================================
*/

/* Le decimos a la sección ANTERIOR al mapa que no deje espacio ABAJO */


/* Le decimos a la sección del mapa que no deje espacio ARRIBA */
.map-section {
    margin-top: 0 !important;
}
/*
========================================================
--- ICP02_SPRINT3 ---
========================================================
*/
/* --- Definición de Animaciones (Nuevas) --- */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Estilos del Componente (Desktop) --- */

/* 1. En el contenedor principal */
.hero-container {
    display: flex;
    flex-direction: row;
    /* --- CORRECCIÓN (Centrado): 
       Cambiado de 'stretch' a 'center' para centrar verticalmente las columnas. --- */
    align-items: center;
    justify-content: flex-start;
    gap: 13rem;
    width: 90%;
    max-width: 100%;
    margin: 40px auto;
    height: auto;
    overflow: hidden;
}

/* Contenedor para agrupar título y subtítulo */
.title-group {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    animation: slideInFromLeft 0.5s ease-in-out forwards;
    padding-top: 16px;
    align-items: flex-start;
}

.hero-title {
    font-family: 'Plus Jakarta Sans';
    font-weight: 700;
    font-size: 45px;
    line-height: 1.2;
    margin-right: 0;
    background: linear-gradient(270deg, #35A8E0, #0D4AE6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-align: left;
    /* --- CORRECCIÓN (Letra 'g' cortada): 
       Añade un pequeño espacio inferior para evitar el corte del descensor. --- */
    padding-bottom: 6px;
}

/* Estilo para "en Transformación Digital" */
.hero-subtitle {
    font-family: 'Plus Jakarta Sans';
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    color: #14293E;
    margin-top: 1rem;
    text-align: left;
}

.description-wrapper {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    padding: 0;
    border-left: none;
    max-width: 660px;
    opacity: 0;
    animation: slideInFromRight 0.7s 0.3s ease-in-out forwards;
}

/* El contenedor que SÍ tiene la línea */
.text-with-line {
    border-left: 3px solid #0D4AE6;
    padding: 5px 0 5px 120px;
    /* --- CORRECCIÓN (Hover): 
       Añade una transición suave para el efecto hover. --- */
    transition: border-left-width 0.3s ease-out;
}

/* --- CORRECCIÓN (Hover): 
   Regla nueva para el efecto hover solicitado. --- */
.description-wrapper:hover .text-with-line {
    border-left-width: 6px; /* Hacemos la línea más gruesa */
}


.description-text {
    font-family: 'Source Sans Pro';
    line-height: 1.6;
    color: #252B42;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}


/* ========================================================
--- CORREGIDO: Media Query para Tablet (768px - 1199px) ---
========================================================
*/
@media (min-width: 768px) and (max-width: 1199px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .title-group {
        align-items: center;
        animation: slideInFromBottom 0.5s ease-in-out forwards;
    }

    .hero-title {
        font-size: 32px;
        margin-right: 0;
        text-align: center;
        /* --- CORRECCIÓN (Letra 'g'): 
           Mantenemos el padding para el renderizado. --- */
        padding-bottom: 6px;
    }

    .hero-subtitle {
        font-size: 32px;
        text-align: center;
    }

    .description-wrapper {
        border-left: none;
        border-top: 3px solid #0D4AE6;
        padding: 24px 8px 8px 8px;
        justify-content: center;
        animation: slideInFromBottom 0.6s 0.2s ease-in-out forwards;
    }

        /* --- CORRECCIÓN (Hover): 
       Desactivamos el hover de la línea en tablet/móvil 
       ya que no aplica. --- */
        .description-wrapper:hover .text-with-line {
            border-left-width: 0px;
        }

    .text-with-line {
        border-left: none;
        padding: 0;
        margin-left: 0;
        transition: none; /* Desactivamos transición */
    }

    .description-text {
        font-size: 1px;
        text-align: center;
        margin-left: 0;
    }
}


/* ========================================================
--- Media Query para Móviles (< 767px) ---
========================================================
*/
@media (max-width: 767px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
        width: 100%;
        min-height: 500px;
        align-items: center;
        justify-content: center;
    }

    .title-group {
        align-items: center;
        animation: slideInFromBottom 0.5s ease-in-out forwards;
    }

    .hero-title {
        font-size: 27px;
        margin-right: 0;
        line-height: 1.28;
        text-align: center;
        /* --- CORRECCIÓN (Letra 'g'): 
           Mantenemos el padding para el renderizado. --- */
        padding-bottom: 6px;
    }

    .hero-subtitle {
        font-size: 27px;
        text-align: center;
    }

    .description-wrapper {
        border-left: none;
        border-top: 3px solid #0D4AE6;
        padding: 24px 8px 8px 8px;
        justify-content: center;
        animation: slideInFromBottom 0.6s 0.2s ease-in-out forwards;
    }

    .text-with-line {
        border-left: none;
        padding: 0;
        margin-left: 0;
        transition: none;
    }

    .description-wrapper:hover .text-with-line {
        border-left-width: 0px;
    }

    .description-text {
        font-size: 17px;
        text-align: center;
        margin-left: 0;
    }
}

/*
========================================================
--- NUEVO: Media Query para Móviles Horizontales (Landscape) ---
========================================================
*/
@media (orientation: landscape) and (max-height: 500px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        width: 100%;
        align-items: center;
        padding: 40px 0;
        justify-content: center;
    }

    .title-group {
        align-items: center;
        animation: slideInFromBottom 0.5s ease-in-out forwards;
    }

    .hero-title {
        font-size: 30px;
        margin-right: 0;
        line-height: 1.29;
        text-align: center;
        /* --- CORRECCIÓN (Letra 'g'): 
           Mantenemos el padding para el renderizado. --- */
        padding-bottom: 6px;
    }

    .hero-subtitle {
        font-size: 30px;
        text-align: center;
    }

    .description-wrapper {
        border-left: none;
        border-top: 3px solid #0D4AE6;
        padding: 24px 8px 8px 8px;
        justify-content: center;
        animation: slideInFromBottom 0.6s 0.2s ease-in-out forwards;
    }

    .text-with-line {
        border-left: none;
        padding: 0;
        margin-left: 0;
        transition: none;
    }

    .description-wrapper:hover .text-with-line {
        border-left-width: 0px;
    }

    .description-text {
        font-size: 14px;
        text-align: center;
        margin-left: 0;
    }
}

/* ======================================================== --- ICP03_SPRINT3_Corregido --- ======================================================== */ /* --- Contenedor Principal y Fondo --- */

.vision-banner-container {
    position: relative;
    width: 100%;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}
/* --- Imagen de Fondo (con Blur) --- */

.vision-banner-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url('/Img/Nosotros/visionbanner.png');
    background-size: cover;
    background-position: center;
    filter: blur(5px);
    transform: scale(1.02);
}
/* --- Overlay de Degradado (TU degradado) --- */

.vision-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(90deg,rgba(104, 189, 242, 0.86) 10%, rgba(173, 219, 248, 0.39) 48%, rgba(255, 255, 255, 0) 60%);
}
/* --- Contenedor del Contenido (Texto y Botón) --- */

.vision-banner-content {
    position: relative;
    z-index: 3;
    padding-left: 10%;
    max-width: 100%;
    text-align: left;
}
/* --- Título Principal (CORREGIDO) --- */

.vision-banner-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 60px;
    line-height: 76px;
    background: linear-gradient(270deg, #65A6EB 3.36%, #498BE9 15.38%, #0D4AE6 58.17%), #FFFFFF;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin: 0;
}
/* --- Subtítulo (Como en el mockup) --- */

.vision-banner-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #0E091E;
    margin-top: 15px;
    margin-bottom: 30px;
    line-height: 1.2;
    margin-bottom: 2.5rem;
}
/* --- Botón (CORREGIDO) --- */

/* Busca la clase .vision-banner-cta y modifica la línea transition-delay */

.vision-banner-cta {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF !important;
    background-color: #0D4AE6 !important;
    border: none;
    border-radius: 37px;
    padding: 12px 24px;
    min-width: 200px;
    height: 48px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Estado inicial */
    opacity: 0;
    transform: translateY(30px);
    /* CORRECCIÓN AQUÍ: */
    /* Se reduce el delay de 0.4s a 0.1s para una respuesta rápida */
    transition: transform 0.3s ease-in-out, opacity 0.5s ease-in-out !important;
    transition-delay: 0.1s;
    text-decoration: none !important;
}

    .vision-banner-cta:hover {
        transform: scale(1.1) !important; /* --- 3. MODIFICACIÓN: Anulamos el delay SÓLO para el hover --- */ /* Esto hace que el hover sea inmediato */
        transition-delay: 0s !important;
        background-color: #0B3AC1 !important;
    }
/* CORRECCIÓN: Hover según especificación (0.3s) */ /* ======================================================== --- INICIO: Animaciones de Carga (Faltantes) --- ======================================================== */ /* --- Keyframes (Definición de la animación) --- */

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px); /* Especificación: -40px */
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* --- 4. MODIFICACIÓN: ELIMINAMOS @keyframes fadeInUp (ya no se usa) --- */ /* --- Estado Inicial (Oculto) --- */ /* Ocultamos los elementos por defecto. JS añadirá '.is-visible' */ /* --- 5. MODIFICACIÓN: Quitamos '.vision-banner-cta' de este grupo --- */

.vision-banner-title, .vision-banner-subtitle {
    opacity: 0;
}
/* --- Aplicación de Animaciones (Cuando JS añade 'is-visible') --- */ /* Título: 0.6s, -40px, ease-in-out */

.vision-banner-content.is-visible .vision-banner-title {
    animation: fadeInDown 0.6s ease-in-out forwards;
}
/* Subtítulo: (Asumimos que anima con el título) */

.vision-banner-content.is-visible .vision-banner-subtitle {
    animation: fadeInDown 0.6s ease-in-out forwards;
}
/* Botón: 0.5s, +30px, 0.4s delay, ease-in-out */ /* --- 6. MODIFICACIÓN: Cambiamos 'animation' por el estado final --- */

.vision-banner-content.is-visible .vision-banner-cta { /* Define el estado final al que la 'transition' debe llegar */
    opacity: 1;
    transform: translateY(0);
}
/* --- Media Queries (Responsivo Básico) --- */

@media (max-width: 767px) {
    .vision-banner-container {
        height: 400px;
    }

    .vision-banner-content {
        padding-left: 5%;
        padding-right: 5%;
        max-width: 100%;
    }

    .vision-banner-title {
        font-size: 42px;
        line-height: 1.2;
    }

    .vision-banner-subtitle {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .vision-banner-cta {
        min-width: 180px;
        height: 44px;
        font-size: 15px;
    }
}

/* Archivo: Components/HistorySection.razor.css (CON CORRECCIONES) */

.history-section-wrapper {
    position: relative;
    width: 100%;
    height: 50vw;
    padding: 80px 5% 40px 5%;
    overflow-x: visible;
}

    .history-section-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        z-index: 0;
        /* Tu estilo de fondo original */
        background: radial-gradient(circle at 50% 90%, rgba(118, 199, 253, 0.32) 20%, rgba(237, 248, 248, 0) 73%);
    }

.history-text-content {
    position: relative;
    max-width: 563.49px;
    z-index: 20;
    margin-bottom: 100px;
}

/* --- history-title (Tus estilos + Animación) --- */
.history-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-style: normal;
    font-weight: 800; /* Tu estilo original */
    font-size: 35px; /* Tu estilo original */
    line-height: 59px; /* Tu estilo original */
    letter-spacing: -0.02em;
    color: #000000; /* Tu estilo original */
    margin: 0 0 22px 0;
    /* --- Animación de Carga (0.6s, -40px) --- */
    opacity: 0;
    transform: translateY(-40px);
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

.history-description {
    font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.02em;
    color: #64607D;
    margin: 0 0 40px 0;
}
/*
========================================================
--- ESTILOS history-section-wrapper (history-section-wrapper.css) ---
========================================================
*/

/* [ ... Estilos existentes del history-section-wrapper ... ] */

/* --- cta-button (Tus estilos + Corrección de Hover) --- */
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 48px;
    padding: 0 30px;
    background: #0D4AE6;
    color: #FFFFFF;
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    letter-spacing: -0.05em;
    border-radius: 50px;
    text-decoration: none;
    position: relative;
    z-index: 25;
    border: none;
    /* ESTADO INICIAL SEGURO (Se anula si el JS aplica .history-section-wrapper .cta-button) */
    opacity: 1;
    transform: translateY(0);
    /* TRANSICIÓN BASE (Se usa para el hover-out) */
    transition: all 0.3s ease, transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

    /* ⬇️ CORRECCIÓN: Estilos de Enlace (Quita subrayado y color azul) ⬇️ */
    .cta-button:link,
    .cta-button:visited,
    .cta-button:active,
    .cta-button:focus {
        color: #FFFFFF;
        text-decoration: none;
    }

/* ----------------------------------------------------------------- */
/* --- Reglas para la Animación de Entrada (Manejadas por historySectionHelpers.init) --- */
/* ----------------------------------------------------------------- */

/* 1. ESTADO INICIAL (OCULTA el botón y aplica el delay de 1.8s) */
/* Esta regla es específica y define el estado de inicio de la animación de entrada. */
.history-section-wrapper .cta-button {
    opacity: 0;
    transform: translateY(30px);
    /* Aplicamos el delay de 1.8s AQUI, para la entrada. */
    transition: all 0.3s ease 0s, transform 0.5s ease-in-out 0s, opacity 0.5s ease-in-out 1.8s;
}

/* 2. ESTADO FINAL DE LA ANIMACIÓN (HACE VISIBLE el botón) */
/* Activado por JS/Blazor al detectar visibilidad. */
.history-section-wrapper.is-visible .cta-button {
    opacity: 1;
    transform: translateY(0);
}


    /* ----------------------------------------------------------------- */
    /* --- HOVER CORRECTO (Prioridad y Fluidez) --- */
    /* ----------------------------------------------------------------- */

    /* 🛑 CORRECCIÓN FINAL: Selector muy específico para que el hover SIEMPRE gane y se sienta fluido */
    .history-section-wrapper.is-visible .cta-button:hover,
    .history-section-wrapper .cta-button:hover {
        /* 1. Efecto: Agrandarse */
        transform: scale(1.1);
        /* ⭐️ CORRECCIÓN: Añadido cambio de color al hover (ej. un azul más oscuro) */
        background-color: #0A3BBE;
        /* 2. Anula el retraso (en hover-in y hover-out) */
        /* Esto es lo que soluciona el problema de que tarde en regresar. */
        transition-delay: 0s !important;
    }

/* [ ... Resto de los estilos de timeline, hitos, etc. ... ] */

.timeline-container {
    position: relative;
    width: 90%;
    overflow: visible;
    aspect-ratio: 1628 / 551;
    transform: translateY(-60%);
    overflow: visible;
}

.timeline-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

    .timeline-svg svg {
        width: 100%;
        height: 100%;
    }

    /* --- Animación de Carga SVG --- */
    .timeline-svg path {
        stroke-dasharray: 2500;
        stroke-dashoffset: 2500;
        transition: stroke-dashoffset 2.5s ease-in-out;
    }
        .timeline-svg path.animate-line {
            stroke-dashoffset: 0;
        }


/* --- Dots (Tus estilos + Animación) --- */
.timeline-dot {
    position: absolute;
    width: 30px; /* Tu estilo original */
    height: 30px; /* Tu estilo original */
    background: #E8E8E8; /* Tu estilo original */
    border-radius: 50%;
    /* ⭐️ CORRECCIÓN: Hito 2025 no hace hover.
       Aumentado z-index de 10 a 21 para que esté sobre el texto (z-index: 20) */
    z-index: 21;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    /* --- Animación de Carga (opacity 0.5s, transform 0.4s) --- */
    opacity: 0;
    /* ⭐️ CORRECCIÓN: Esta transición base maneja el hover (transform 0.4s) */
    transition: opacity 0.5s ease-in-out, transform 0.4s ease;
}

    .timeline-dot::after {
        content: '';
        width: 14px;
        height: 14px;
        background: #C4C4C4;
        border-radius: 50%;
    }

/* Posicionamiento de dots - relativo a timeline-container (Tus estilos) */
.dot-2004 {
    left: 10%;
    top: 78.3%;
    /* ⭐️ CORRECCIÓN: Hito hover en 2 tiempos.
       Eliminada transición duplicada. La transición base de .timeline-dot la maneja. */
    /* transition: ease 0.4s; */
}

.dot-2015 {
    left: 45%;
    top: 51%;
    /* ⭐️ CORRECCIÓN: Hito hover en 2 tiempos.
       Eliminada transición duplicada. La transición base de .timeline-dot la maneja. */
    /* transition: ease 0.4s; */
}

.dot-2025 {
    right: 8%;
    top: -2.2%;
    /* ⭐️ CORRECCIÓN: Hito hover en 2 tiempos.
       Eliminada transición duplicada. La transición base de .timeline-dot la maneja. */
    /* transition: ease 0.4s; */
}

    .dot-2004:hover,
    .dot-2015:hover,
    .dot-2025:hover {
        transform: scale(1.2);
        transition-delay: 0s !important;
    }

/* --- Milestone (Tus estilos + Animación) --- */
.milestone {
    position: absolute;
    z-index: 15;
    /* --- Animación de Carga (opacity 0.5s) --- */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.milestone-year {
    font-family: 'Manrope', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: #000000;
    margin: 0 0 8px 0;
    padding-top: 0.3rem;
}

.milestone-text {
    font-family: 'Manrope', sans-serif; /* Tu estilo original */
    font-style: normal;
    font-weight: 500;
    font-size: 13.5px; /* Tu estilo original */
    line-height: 1.6;
    letter-spacing: -0.02em;
    color: #64607D;
    margin: 0;
}

/* ⭐️ CORRECCIÓN: Añadida clase para el +85 (bold y color azul de la línea) */
.milestone-highlight {
    font-weight: 700;
    color: #0D4AE6;
}


/* Posicionamiento de hitos - relativo a timeline-container (Tus estilos) */
.milestone-2004 {
    left: 19.3%;
    top: calc(77% + 55px);
    text-align: left;
    max-width: 15vw;
    transform: translateX(-50%);
}

.milestone-2015 {
    left: 56.7%;
    top: calc(51% + 55px);
    transform: translateX(-50%);
    text-align: left;
    max-width: 18vw;
}

.milestone-2025 {
    right: -12.8%;
    top: calc(-2.2% + 55px);
    text-align: left;
    max-width: 18vw;
}


/* --- Reglas de Visibilidad (Estado Final - Activan animaciones) --- */
/* Se activan cuando JS añade .is-visible a .history-section-wrapper */

.history-section-wrapper.is-visible .history-title {
    opacity: 1;
    transform: translateY(0);
}

/*.history-section-wrapper.is-visible .timeline-svg path {
    stroke-dashoffset: 0;
}*/

/* Hitos con delays escalonados (manteniendo tus tiempos de 0.5s) */
.history-section-wrapper.is-visible .dot-2004,
.history-section-wrapper.is-visible .milestone-2004 {
    opacity: 1;
    transition-delay: 0.5s 0s;
}

.history-section-wrapper.is-visible .dot-2015,
.history-section-wrapper.is-visible .milestone-2015 {
    opacity: 1;
    transition-delay: 1.0s 0s; /* 0.5s del dot + 0.5s extra */
}

.history-section-wrapper.is-visible .dot-2025,
.history-section-wrapper.is-visible .milestone-2025 {
    opacity: 1;
    transition-delay: 1.3s 0s; /* 0.5s del dot + 0.5s extra */
}

/* [ ... RESTO DE MEDIA QUERIES SIN CAMBIOS ... ] */

/* TIMELINE VERTICAL Y LEGIBLE para MOBILE (Corregido) */
/* TIMELINE VERTICAL Y LEGIBLE para MOBILE (Color Corregido) */

/* TIMELINE VERTICAL Y LEGIBLE para MOBILE (Color Corregido) */
@media (max-width: 767px) {

    .history-section-wrapper {
        height: 930px;
    }

    /* 1. Contenedor del timeline */
    .timeline-container {
        width: 100%;
        height: auto;
        padding-bottom: 20px;
        margin-top: 60px;
        overflow: hidden;
        /* Reducimos la altura mínima para evitar espacio vacío */
        min-height: 350px;
        transform: none !important;
    }

    /* 2. SVG (La curva) - Ocultar en móvil */
    .timeline-svg {
        display: none !important;
    }

    /* ========================================================
       AQUI ESTA LA CORRECCIÓN DEL BOTÓN (Nuevo)
       El botón aparece rápido (0.2s) en lugar de esperar 1.8s
       ======================================================== */
    .history-section-wrapper .cta-button {
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
        transition-delay: 0s !important;
        opacity: 0;
        transform: translateY(20px);
    }

    .history-section-wrapper.is-visible .cta-button {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s !important;
    }
    /* ======================================================== */


    /* 3. Estructura Vertical de la Línea (#3974CE) */
    .timeline-container::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 15px;
        width: 3px;
        height: calc(100% - 20px);
        background-color: #3974CE;
        z-index: 1;
    }

    /* 4. Dots (Puntos de Hito) - POSICIONES REDUCIDAS EN ~33% */
    .timeline-dot {
        width: 25px;
        height: 25px;
        transform: translate(-50%, 0);
        left: 15px !important;
        z-index: 3;
    }

    .dot-2004 {
        top: 0px !important;
    }

    /* ANTES: 180px. NUEVO: 120px (Reducción de 33%) */
    .dot-2015 {
        top: 120px !important;
    }

    /* ANTES: 400px. NUEVO: 270px (Separación de 150px desde 2015) */
    .dot-2025 {
        top: 270px !important;
    }

    /* 5. Textos de los hitos (Milestones) - POSICIONES REDUCIDAS EN ~33% */
    .milestone {
        left: 45px !important;
        width: calc(100% - 60px);
        text-align: left !important;
        padding: 1px 0;
        opacity: 1 !important;
        transform: none !important;
        max-width: none !important;
    }

    /* Nuevo top basado en los dots */
    .milestone-2004 {
        top: -10px !important;
    }

    /* 10px antes del dot 2015 */
    .milestone-2015 {
        top: 110px !important;
    }

    /* 10px antes del dot 2025 */
    .milestone-2025 {
        top: 260px !important;
    }

    /* Estilos de texto (se mantienen) */
    .milestone-year {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 2px;
    }

    .milestone-text {
        font-size: 13px;
        line-height: 1.5;
    }

    /* Ajustes para pantallas muy pequeñas */
    @media (max-width: 400px) {

        .history-section-wrapper {
            height: 1050px;
        }

        /* Aumentamos ligeramente las distancias para evitar que se amontonen */
        .timeline-container {
            min-height: 400px;
        }

        .dot-2015 {
            top: 140px !important;
        }

        .dot-2025 {
            top: 320px !important;
        }

        .milestone-2015 {
            top: 130px !important;
        }

        .milestone-2025 {
            top: 310px !important;
        }
    }
}
/* =========================================================
   CORRECCIÓN IPAD PRO / TABLET (768px - 1199px)
   ========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {

    /* 1. SOLUCIÓN AL "FUSIONAMIENTO":
       Cambiamos la altura fija de '50vw' a 'auto' para que crezca según el contenido,
       y añadimos padding extra abajo. */
    .history-section-wrapper {
        height: auto !important;
        min-height: 850px !important; /* Altura mínima segura */
        padding-bottom: 100px !important;
        overflow: visible !important;
    }

    /* 2. BAJAMOS EL TIMELINE:
       Reducimos el translateY agresivo (-60%) para que no se coma el texto de arriba. */
    .timeline-container {
        transform: translateY(-20%) !important; /* Antes era -60%, lo bajamos */
        margin-top: -4rem;
        width: 87% !important; /* Aprovechar más ancho */
        margin-left: auto;
        margin-right: auto;
    }

    /* 3. AJUSTE DE POSICIÓN DE PUNTOS (Dots)
       Al cambiar el transform, hay que asegurar que los puntos sigan en la línea. */

    /* Dot 2004 */
    .dot-2004 {
        left: 10% !important;
        top: 78% !important; /* Ajustado */
    }

    /* Dot 2015 */
    .dot-2015 {
        left: 45% !important;
        top: 48.8% !important; /* Ajustado */
    }

    /* Dot 2025 */
    .dot-2025 {
        right: 8% !important;
        left: auto !important;
        top: -2.9% !important; /* Ajustado */
    }

    /* 4. AJUSTE DE TEXTOS (Milestones)
       Para evitar que choquen con la línea curva. */

    .milestone-2004 {
        left: 23% !important;
        top: 90% !important;
        max-width: 220px !important;
    }

    .milestone-2015 {
        left: 58% !important;
        top: 63% !important;
        max-width: 220px !important;
    }

    .milestone-2025 {
        right: -12% !important;
        left: auto !important;
        top: 10% !important; /* Bajamos el texto un poco */
        max-width: 200px !important;
        text-align: left !important;
    }
}


@media (min-width: 901px) and (max-width: 992px) {
    .dot-2025 {
        /* Ejemplo de ajuste: puede que necesites subir o bajarlo */
        top: 12.7% !important; /* Estaba en 17% o 20% */
        right: 9.8% !important;
        left: auto !important;
    }
}



    /* ImpactMap.razor.css - VERSIÓN COMPACTA */
.impact-section-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto 0px auto;
    padding-left: 2rem;
    background: linear-gradient(360deg,rgba(118, 199, 253, 0.19) 0%, rgba(237, 248, 248, 0.26) 65%);
}

    /* 1. COLUMNA DEL MAPA - Reducida a 35% */
    .map-column {
        flex: 0 0 35%;
        position: relative;
    }

    .map-svg {
        width: 100%;
        height: auto;
        display: block;
    }

    .map-points-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .map-point {
        position: absolute;
        transform: translate(-50%, -50%);
        animation: pulse 2s infinite ease-in-out;
    }

        .map-point svg {
            width: 19px;
            height: 19px;
            filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.2));
        }

    /* 2. TARJETA DE TEXTO - Ligeramente más compacta */
    .content-box {
        flex: 0 0 52%;
        box-sizing: border-box;
        padding: 40px 45px; /* ← Reducido de 50px a 44px */
        margin: 0 4.2rem;
        background: #D9EDFF;
        border-radius: 25px;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    /* 3. ESPACIO VACÍO - Reducido a 13% */
    .right-spacer {
        flex: 0 0 13%;
    }

    /* --- Estilos de texto REDUCIDOS --- */
    .scope-pill {
        display: inline-block;
        background-color: #FFFFFF;
        color: #0D4AE6;
        font-weight: 400;
        padding: 7px 16px;
        border-radius: 18px;
        font-size: 0.85em;
        margin-bottom: 20px; /* ← Reducido de 22px */
    }

    .content-box h2 {
        font-size: 2rem;
        font-weight: 400;
        line-height: 1.25;
        margin-bottom: 23px; /* ← Reducido de 26px */
        color: #0D4AE6;
    }

    .content-box p {
        font-size: 1em; /* ← Aumentado de 0.95em */
        line-height: 1.7;
        color: #6F6F6E;
        margin: 0;
    }

    @keyframes pulse {
        0% {
            transform: translate(-50%, -50%) scale(0.95);
            opacity: 0.7;
        }

        70% {
            transform: translate(-50%, -50%) scale(1.1);
            opacity: 1;
        }

        100% {
            transform: translate(-50%, -50%) scale(0.95);
            opacity: 0.7;
        }
    }

    /* --- INICIO: REGLAS DE ANIMACIÓN AGREGADAS --- */

    /* Estado inicial del mapa (invisible y escalado pequeño) */
    .map-svg.map-initial-state {
        opacity: 0;
        transform: scale(0.8);
        transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    }

    /* Estado final del mapa (visible y escala normal), activado por .animate en el padre (.map-column) */
    .map-column.animate .map-svg.map-initial-state {
        opacity: 1;
        transform: scale(1);
    }

    /* Estado inicial de los elementos de texto (invisible y desplazado a la derecha) */
    .scope-pill[data-animate],
    .content-box h2[data-animate],
    .content-box p[data-animate] {
        opacity: 0;
        /* Desplazamiento inicial grande (para el pill, 50px es el default si no hay h2) */
        transform: translateX(50px);
        transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    }

    /* Ajuste del desplazamiento inicial para el título h2 */
    .content-box h2[data-animate] {
        /* Desplazamiento inicial mediano (30px como especificación) */
        transform: translateX(30px);
    }

    /* Estado final de los elementos de texto (visible y posición normal) */
    .content-box [data-animate].animate {
        opacity: 1;
        transform: translateX(0);
    }

    /* --- FIN: REGLAS DE ANIMACIÓN AGREGADAS --- */

    /* RESPONSIVE */
    @media (max-width: 1200px) {
        .content-box {
            padding: 45px 35px; /* Mantén generosidad en tablets */
        }

            .content-box h2 {
                font-size: 2em;
            }
    }

    @media (max-width: 992px) {
        .impact-section-container {
            flex-direction: column;
            padding: 0 20px;
        }

        .map-column,
        .content-box,
        .right-spacer {
            flex: 0 0 100%;
            margin: 0;
        }

        .content-box {
            margin-top: 30px;
            padding: 45px 35px; /* Mantén generosidad en mobile */
        }

        .right-spacer {
            display: none;
        }
    }

    @media (max-width: 768px) {
        .content-box {
            padding: 35px 28px;
        }

            .content-box h2 {
                font-size: 1.6em;
            }

            .content-box p {
                font-size: 0.95em;
            }

        .scope-pill {
            font-size: 0.8em;
            padding: 6px 14px;
        }
    }









/* Contenedor principal */
.filosofia-container {
    width: 100%;
    margin: 0 auto;
    padding: 60px 40px;
    background: #FAFAFA;
}

.filosofia-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    text-align: center;
    color: black;
    margin-bottom: 50px;
}

.cards-wrapper {
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* ===== EFECTO FLIP 3D ===== */

/* Contenedor con perspectiva 3D */
.card-flip-container {
    width: 280px;
    height: 170px;
    perspective: 1000px;
}

/* Contenedor interno que rota */
.card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

/* Efecto de volteo al hacer hover */
.card-flip-container:hover .card-flip-inner {
    transform: rotateY(180deg);
}

/* ===== ESTILOS DE LAS CARAS ===== */

/* Estilos comunes para frente y reverso */
.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    overflow: hidden;
}

/* Parte frontal */
.card-front {
    gap: 12px;
    padding: 15px 25px;
}

/* Parte posterior (rotada 180 grados) */
.card-back {
    transform: rotateY(180deg);
    padding: 20px 30px;
}

/* ===== COLORES DE TARJETAS ===== */
.card-primary .card-front,
.card-primary .card-back {
    background: #3974CE;
}

.card-secondary .card-front,
.card-secondary .card-back {
    background: #FFFFFF;
}

/* ===== ICONOS ===== */
.icon-wrapper {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .icon-wrapper svg {
        width: 100%;
        height: 100%;
    }

.card-primary .icon-wrapper svg path {
    fill: #FFFFFF;
}

.card-secondary .icon-wrapper svg path {
    fill: #0D4AE6;
}

/* ===== TEXTOS FRENTE ===== */
.card-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 32px;
    text-align: center;
    margin: 0;
}

.card-primary .card-title {
    color: #E6E6F2;
}

.card-secondary .card-title {
    color: #000073;
}

/* ===== TEXTOS REVERSO ===== */

.back-content {
    text-align: center;
    margin-top: 0.3rem;
}

.back-title {
    font-size: 19px;
    font-weight: 600;
    opacity: 0.9;
}

.card-primary .back-title {
    color: #FFFFFF;
}

.card-secondary .back-title {
    color: #000073;
}

.back-text {
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.85;
}

.card-primary .back-text {
    color: #E6E6F2;
}

.card-secondary .back-text {
    color: #335D70;
}

.cards-wrapper .card-flip-container:first-child .card-back .back-title,
.cards-wrapper .card-flip-container:first-child .card-back .back-text {
    color: #FFFFFF;
}

/* Lista de valores */
.value-list {
    list-style: none;
    padding-left: 0;
    margin-top: 5px;
    margin-bottom: 0;
    text-align: center;
}

    .value-list li {
        display: inline-block;
        font-size: 12px;
        line-height: 1.2;
        margin: 1px 3px;
        color: inherit;
    }

/* Estilos base de fuentes */
.card-back .back-content,
.card-back .back-content p,
.card-back .value-list li {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #6F6F6E;
    line-height: 1.5;
}

.card-secondary .back-text {
    margin-bottom: 4px;
    font-size: 13px;
}

/* ===== RESPONSIVE MEJORADO PARA MÓVIL (CÓDIGO ORIGINAL) ===== */

@media (max-width: 1200px) {
    .filosofia-container {
        padding: 30px 20px;
    }

    .cards-wrapper {
        gap: 15px;
    }

    .card-flip-container {
        width: 250px;
        height: 150px;
    }

    .card-title {
        font-size: 24px;
        line-height: 32px;
    }
}

@media (max-width: 900px) {
    .filosofia-title {
        font-size: 28px;
        line-height: 36px;
        margin-bottom: 30px;
    }

    .card-flip-container {
        width: 220px;
        height: 140px;
    }

    .card-title {
        font-size: 20px;
        line-height: 28px;
    }

    .icon-wrapper {
        width: 40px;
        height: 40px;
    }

    .back-title {
        font-size: 18px;
    }

    .back-text {
        font-size: 14px;
    }
}

/* MÓVIL - CAMBIOS PRINCIPALES */
@media (max-width: 768px) {
    .filosofia-container {
        padding: 20px 15px;
    }

    .filosofia-title {
        font-size: 26px;
        line-height: 32px;
        margin-bottom: 25px;
    }

    /* Tarjetas en columna y centradas */
    .cards-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    /* Tarjetas con altura más moderada */
    .card-flip-container {
        width: 85%;
        max-width: 320px;
        height: 190px; /* Altura moderada - NO SE MODIFICA */
    }

    /* Ajustes de padding balanceados */
    .card-front {
        padding: 18px 25px;
    }

    .card-back {
        padding: 20px 18px;
        overflow-y: auto;
    }

    /* Textos del frente más grandes */
    .card-title {
        font-size: 24px;
    }

    /* Textos del reverso más legibles */
    .back-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .back-text {
        font-size: 15px;
        line-height: 1.5;
    }

    /* Lista de valores, ya no usamos grid para la solución en línea */
    .value-list {
        display: block; /* Cambiado de grid a block para el flujo inline-block */
        gap: 6px;
        margin-top: 8px;
        text-align: center; /* Centrar los elementos inline-block */
    }

        .value-list li {
            display: inline-block; /* CLAVE: Para el efecto "en línea" */
            font-size: 13px; /* Reducido a 13px para ganar espacio vertical */
            padding: 2px 4px; /* Reducido el padding */
            margin: 2px 3px; /* Pequeño margen entre valores */
            background: transparent; /* Eliminamos el fondo de píldora */
            border-radius: 0; /* Eliminamos el borde */
            white-space: nowrap; /* Evita que las palabras se rompan */
            line-height: 1.2; /* Altura de línea compacta */
        }

    /* ******************************************************************* */
    /* SOLUCIÓN ESPECÍFICA PARA LA TARJETA DE VALORES (TERCERA TARJETA) */
    /* Ajustes adicionales para que el contenido quepa en la altura fija */
    /* ******************************************************************* */

    .cards-wrapper .card-flip-container:nth-child(3) .card-back {
        /* Reducimos el padding de la tercera tarjeta (Valores) para ganar espacio */
        padding: 15px 10px !important;
        /* Forzamos la eliminación del scroll, el contenido ya debe caber */
        overflow-y: hidden !important;
    }

    .cards-wrapper .card-flip-container:nth-child(3) .back-title {
        font-size: 19px; /* Reducción ligera */
        margin-bottom: 5px; /* Reducción de margen */
    }

    .cards-wrapper .card-flip-container:nth-child(3) .value-list {
        margin-top: 5px; /* Ajuste fino del margen superior */
        line-height: 1.3; /* Compactar la altura de línea */
    }

        .cards-wrapper .card-flip-container:nth-child(3) .value-list li {
            font-size: 12px; /* Reducción máxima para asegurar que quepa */
            margin: 1px 3px;
        }
}

/* MÓVIL PEQUEÑO */
@media (max-width: 480px) {
    .filosofia-title {
        font-size: 24px;
        line-height: 30px;
    }

    /* Altura optimizada para móviles pequeños */
    .card-flip-container {
        width: 90%;
        height: 200px; /* Altura balanceada - NO SE MODIFICA */
    }

    /* Espaciado compacto pero cómodo */
    .card-back {
        padding: 18px 16px;
    }

    .card-title {
        font-size: 22px;
    }

    .back-title {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .back-text {
        font-size: 14px;
        line-height: 1.5;
    }

    /* Lista de valores, se mantiene el display: inline-block heredado del 768px */
    .value-list {
        /* Eliminamos las reglas de grid que ya no son necesarias */
        gap: 5px;
    }

        .value-list li {
            font-size: 12px; /* Mínimo para legibilidad */
            padding: 2px 4px;
        }

    /* Ajuste para la tarjeta de metodologías */
    .card-secondary .back-text {
        font-size: 13px;
        line-height: 1.5;
    }

    /* ******************************************************************* */
    /* SOLUCIÓN ESPECÍFICA PARA LA TARJETA DE VALORES (TERCERA TARJETA) */
    /* Ajustes adicionales para que el contenido quepa en la altura fija */
    /* ******************************************************************* */

    .cards-wrapper .card-flip-container:nth-child(3) .card-back {
        /* Ajuste fino del padding para la tercera tarjeta (Valores) */
        padding: 12px 8px !important;
    }

    .cards-wrapper .card-flip-container:nth-child(3) .back-title {
        font-size: 17px; /* Reducción máxima del título */
        margin-bottom: 4px;
    }

    .cards-wrapper .card-flip-container:nth-child(3) .value-list {
        margin-top: 3px;
    }

        .cards-wrapper .card-flip-container:nth-child(3) .value-list li {
            font-size: 11px; /* Mínimo absoluto para asegurar que quepa */
            margin: 1px 2px;
        }
}

/* Mejora del scroll en móvil para el contenido del reverso - ESTA SECCIÓN SE ANULA PARA LA TARJETA DE VALORES */
@media (max-width: 768px) {
    .card-back {
        -webkit-overflow-scrolling: touch; /* Smooth scrolling en iOS */
    }

        /* Indicador visual de que hay más contenido. Lo eliminamos si ya no hay scroll. */
        .card-back::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 20px;
            background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1));
            pointer-events: none;
            opacity: 0;
        }

        .card-back:hover::after {
            opacity: 1;
        }
}
/* TeamBanner.razor.css */

/* --------------------------------------
   SECCIÓN PRINCIPAL Y DECORACIÓN
   -------------------------------------- */
.team-banner-section {
    position: relative;
    width: 100%;
    padding: 80px 0 100px 0;
    background-color: #F8F8F8;
}

/* Fondo añadido circular */
.decorative-circle {
    position: absolute;
    width: 740px;
    height: 740px;
    left: -364px;
    top: -12px;
    background: #D9EDFF;
    opacity: 0.5;
    border-radius: 50%;
    z-index: 1;
}

/* Títulos principales (Centrados) */
.header-titles {
    text-align: center;
    position: relative;
    z-index: 5;
    margin-bottom: 50px;
}

/* --------------------------------------
   TIPOGRAFÍA
   -------------------------------------- */
.main-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 56.4676px;
    line-height: 1.2;
    margin-bottom: 5px;
    color: #000000;
}

    .main-title .title-gradient {
        background: linear-gradient(90deg, #0D4AE6 0%, #35A8E0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
    }

    .main-title .title-solid {
        color: #000000;
        -webkit-background-clip: initial;
        -webkit-text-fill-color: initial;
        background-clip: initial;
        text-fill-color: initial;
    }

.subtitle-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 19.2448px;
    color: #000000;
    margin-bottom: 20px;
}

/* --------------------------------------
   CONTENEDOR DE COLUMNAS (40%/60%)
   -------------------------------------- */
.team-banner-content {
    position: relative;
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    gap: 120px;
    align-items: flex-start;
    padding: 0 50px;
    z-index: 5;
}

/* --------------------------------------
   COLUMNA DE IMAGEN (40%)
   -------------------------------------- */
.team-image-col {
    flex: 0 0 40%;
    display: flex;
    /* Por defecto a la derecha en escritorio */
    justify-content: flex-end;
    align-items: flex-end;
}

.image-wrapper {
    right: 20px;
    position: relative;
    width: auto;
    height: 500px;
    border-radius: 40px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

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

/* --- CORRECCIÓN IMPORTANTE AQUÍ --- */
.founders-image {
    display: block;
    width: 100%;
    height: 100%;
    /* CAMBIO: de scale-down a cover para forzar llenado */
    object-fit: cover;
    object-position: center;
}

    /* Animación de entrada */
    .founders-image.fade-in-left {
        opacity: 0;
        transform: translateX(-50px);
        animation: fadeInLeft 0.7s ease-in-out forwards;
    }

@keyframes fadeInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --------------------------------------
   COLUMNA DE TEXTO (60%)
   -------------------------------------- */
.team-text-col {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 600px;
    padding-top: 20px;
}

.synergy-label {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #000000;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

    .synergy-label::before {
        content: '';
        display: inline-block;
        width: 2px;
        height: 18px;
        background-color: #3974CE;
        margin-right: 8px;
        border-radius: 2px;
    }

.content-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.25;
    color: #000000;
    margin-top: 0;
    margin-bottom: 20px;
    animation: fadeInRight 0.5s ease-in-out 0.2s forwards;
    opacity: 0;
    transform: translateX(50px);
}

.description-text {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.58;
    color: #000000;
    margin-bottom: 15px;
    text-align: left;
    animation: fadeInRight 0.6s ease-in-out 0.4s forwards;
    opacity: 0;
    transform: translateX(20px);
    margin-top: 1REM;
    max-width: 30rem;
}

@keyframes fadeInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --------------------------------------
   BOTÓN
   -------------------------------------- */
.btn-directory {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13.89px 27.79px;
    background: #0D4AE6;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.2px;
    border-radius: 34.73px;
    text-decoration: none !important;
    position: relative;
    z-index: 25;
    border: none;
    transition: all 0.3s ease, transform 0.3s ease-in-out;
    margin-top: 30px;
    min-height: 50px;
}

    .btn-directory:hover {
        background: #0935A9;
        transform: scale(1.15) !important;
        box-shadow: 0 5px 15px rgba(9, 53, 169, 0.4);
        color: #FFFFFF !important;
    }

    .btn-directory:visited,
    .btn-directory:focus {
        color: #FFFFFF !important;
        text-decoration: none !important;
        outline: none;
    }

/* ===================================
   MEDIA QUERIES CORREGIDOS
   =================================== */

/* 1. TABLET Y IPAD PRO (Subimos el rango a 1200px para cubrir iPad Pro Landscape) */
@media (max-width: 1200px) {
    .team-banner-content {
        flex-direction: column !important;
        padding: 0 20px !important;
        gap: 40px !important;
        align-items: center !important;
    }

    .team-image-col {
        flex: 0 0 auto !important;
        width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        /* Forzamos el centrado aquí para anular el flex-end del escritorio */
        justify-content: center !important;
        align-items: center !important;
    }

    .image-wrapper {
        /* Forzamos anchura para que no dependa del contenido */
        width: 100% !important;
        max-width: 500px !important;
        height: 450px !important;
        margin: 0 auto !important;
        right: 0 !important; /* Reseteamos el right: 20px global */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .founders-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Asegura que cubra todo */
        transform: none !important;
    }

    .team-text-col {
        flex: 0 0 auto !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        align-items: center !important; /* Centra elementos flex hijos */
    }

    .description-text {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .synergy-label {
        justify-content: center !important;
    }

    .btn-directory {
        display: inline-flex !important; /* Mejor que block para botones */
        margin: 30px auto 0 !important;
    }
}

/* 2. MÓVIL (max-width: 768px) */
/* Eliminado el anidamiento doble que causaba error */
@media (max-width: 768px) {
    .team-banner-section {
        padding: 40px 0 !important;
    }

    .team-image-col {
        width: 100% !important;
        justify-content: center !important;
    }

    .image-wrapper {
        height: 300px !important;
        width: 85% !important; /* Ancho relativo a la pantalla */
        max-width: 400px !important;
        border-radius: 20px !important;
        right: 0 !important;
    }

    .founders-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transform: none !important;
    }

    .main-title {
        font-size: 28px !important;
    }

    .content-title {
        font-size: 22px !important;
        text-align: center !important;
    }

    .team-text-col {
        align-items: center !important;
    }

    .btn-directory {
        width: auto !important;
        min-width: 200px !important;
        padding: 16px 35px !important;
    }
}

/* 3. MÓVIL PEQUEÑO (max-width: 480px) */
@media (max-width: 480px) {
    .image-wrapper {
        height: 250px !important;
        width: 90% !important;
    }

    .main-title {
        font-size: 24px !important;
    }

    .content-title {
        font-size: 20px !important;
    }
}