/* ==========================================================================
   Hero: slider principal a pantalla completa
   - Alto = pantalla visible completa; el header de vidrio flota encima, por eso
     el contenido reserva arriba su espacio (--header-h lo calcula header-scroll.js)
   - Texto a la izquierda; lista de temas a la derecha, en la misma grilla
   - Detalles: zoom lento del fondo, degradado azul marca, progreso vertical,
     número de slide gigante y tenue
   ========================================================================== */

.hero {
    --hero-delay: 6s;          /* duración de cada slide (debe coincidir con sliders.js) */
    --hero-ice: #7cc4ff;       /* acento "frío" para líneas y progreso */
    --hero-navy: 0, 26, 56;    /* azul profundo del degradado: #0066cc oscurecido (RGB) */
    --hero-tint: 0, 72, 150;   /* #0066cc atenuado: tiñe el lado claro de la foto con el azul de marca */
    /* Margen lateral común de la página (base.css): el texto arranca alineado con el
       logo y los temas terminan alineados con el botón CTA */
    --hero-gutter: var(--page-gutter);

    /* Espacio que ocupa el header de vidrio sobre el hero */
    --hero-top: calc(var(--header-h, 82px) + var(--header-offset, 14px));

    /* Ancho del bloque de texto: título y párrafo comparten el mismo límite derecho */
    --hero-measure: 540px;
    /* Franja de contenido centrada en la grilla: texto y temas arrancan en su borde
       superior, así comparten la misma línea de inicio en todos los slides */
    --hero-band: 400px;
    /* Relleno vertical de cada tema de la lista (se usa también para alinear su texto) */
    --hero-topic-pad: 16px;

    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
    background-color: rgb(var(--hero-navy));
    color: var(--color-white);
}

.hero__slider,
.hero__slider .swiper-wrapper,
.hero__slide {
    height: 100%;
}

.hero__slide {
    position: relative;
    overflow: hidden;
}

/* --- Fondo con zoom lento --------------------------------------------- */

.hero__bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.12);
    transition: transform 7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero__slide.swiper-slide-active .hero__bg {
    transform: scale(1);
}

/* Degradado de la marca: más denso del lado del texto */
.hero__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(var(--hero-navy), 0.88) 0%,
        rgba(var(--hero-navy), 0.6) 45%,
        rgba(var(--hero-tint), 0.3) 100%);
}

/* --- Grilla compartida: texto | temas ---------------------------------- */

/* Columnas: texto | temas. Filas: espacio | franja de contenido | espacio.
   Texto (en cada slide) y temas (en .hero__ui) usan esta misma grilla y se ubican
   al inicio de la franja: comparten eje y línea de inicio en cualquier resolución */
.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
    grid-template-rows: 1fr var(--hero-band) 1fr;
    align-items: start;
    column-gap: clamp(32px, 6vw, 112px);
    height: 100%;
    padding: var(--hero-top) var(--hero-gutter) 0;
}

/* --- Contenido de cada slide ------------------------------------------ */

.hero__content {
    grid-column: 1;
    grid-row: 2;
    max-width: var(--hero-measure);
}

/* Entrada escalonada al activarse el slide */
.hero__content > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero__slide.swiper-slide-active .hero__content > * {
    opacity: 1;
    transform: none;
}

.hero__slide.swiper-slide-active .hero__content > :nth-child(1) { transition-delay: 0.25s; }
.hero__slide.swiper-slide-active .hero__content > :nth-child(2) { transition-delay: 0.4s; }
.hero__slide.swiper-slide-active .hero__content > :nth-child(3) { transition-delay: 0.55s; }
.hero__slide.swiper-slide-active .hero__content > :nth-child(4) { transition-delay: 0.7s; }

/* Ritmo vertical: etiqueta 18px · título 24px · párrafo 36px · botones */
.hero__eyebrow {
    margin: 0 0 18px;
    font-family: var(--font-alt);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* margin-left negativo en em = corrección óptica: compensa el espacio propio de la
   primera letra (≈0.07em en Montserrat 700) para que la tinta del título quede en el
   mismo eje que la etiqueta, el párrafo y los botones; escala con el tamaño de letra */
.hero__title {
    margin: 0 0 24px -0.07em;
    color: var(--color-white);
    font-size: clamp(30px, 3.4vw, 50px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.hero__text {
    margin: 0 0 36px;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-alt);
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.6;
}

.hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero .btn--primary:hover,
.hero .btn--primary:focus-visible {
    background-color: #0057ad;
}

/* --- Capa de navegación (temas + contador) ----------------------------- */

.hero__ui {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* El margen derecho de la capa de navegación es la distancia hasta donde termina el botón
   "¡Contáctanos!" del header (--header-cta-end, lo mide header-scroll.js): los temas terminan
   exactamente en esa línea. Sin el botón (tablet/móvil) rige el margen común */
.hero__ui .hero__inner {
    padding-right: var(--header-cta-end, var(--hero-gutter));
}

/* Misma fila que el texto, alineada a la derecha. El margen superior negativo descuenta el
   relleno del primer tema para que "Quiénes somos 01" quede en la misma línea que la etiqueta
   del slide. La línea vertical de progreso va del lado derecho, sobre el final del botón */
.hero__topics {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    margin: calc(var(--hero-topic-pad) * -1) 0 0;
    padding: 0;
    list-style: none;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    pointer-events: auto;
}

/* Número pegado a la línea y nombre a su izquierda: "Quiénes somos  01 │" */
.hero__topic {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: baseline;
    gap: 14px;
    width: 100%;
    padding: var(--hero-topic-pad) 24px var(--hero-topic-pad) 0;
    border: 0;
    background: none;
    color: var(--color-white);
    font-family: var(--font-alt);
    text-align: right;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.hero__topic:hover,
.hero__topic:focus-visible,
.hero__topic.is-active {
    opacity: 1;
}

.hero__topic:focus-visible {
    outline: 2px solid var(--hero-ice);
    outline-offset: -2px;
}

.hero__topic-num {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--hero-ice);
}

.hero__topic-label {
    font-size: 16px;
    line-height: 1.3;
}

/* Línea de progreso vertical: se llena durante el tiempo del slide */
.hero__topic-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1px;
    width: 2px;
    background-color: var(--hero-ice);
    transform: scaleY(0);
    transform-origin: top;
}

.hero__topic.is-active .hero__topic-bar {
    animation: hero-progress var(--hero-delay) linear forwards;
}

.hero.is-paused .hero__topic.is-active .hero__topic-bar {
    animation-play-state: paused;
}

@keyframes hero-progress {
    to { transform: scaleY(1); }
}

/* Número de slide gigante y tenue */
.hero__counter {
    position: absolute;
    right: var(--hero-gutter);
    bottom: clamp(16px, 4vh, 40px);
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.1);
}

.hero__counter-current {
    font-size: clamp(72px, 10vw, 160px);
    letter-spacing: -0.04em;
}

.hero__counter-total {
    font-size: clamp(16px, 1.4vw, 22px);
    color: rgba(255, 255, 255, 0.35);
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 1024px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(170px, 210px);
    }

    .hero__topic {
        padding-right: 18px;
    }

    .hero__topic-label {
        font-size: 15px;
    }
}

/* Móvil: texto abajo y temas en fila debajo del texto */
@media (max-width: 767px) {
    .hero {
        min-height: 580px;
    }

    .hero__slide::after {
        background: linear-gradient(0deg,
            rgba(var(--hero-navy), 0.92) 0%,
            rgba(var(--hero-navy), 0.55) 55%,
            rgba(var(--hero-tint), 0.3) 100%);
    }

    /* Sin franja central: una sola fila, contenido apoyado abajo */
    .hero__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        align-items: end;
    }

    .hero__content,
    .hero__topics {
        grid-row: 1;
    }

    /* Espacio inferior = fila de temas + margen para no quedar bajo el botón de WhatsApp */
    .hero__content {
        padding-bottom: 180px;
    }

    .hero__eyebrow {
        margin-bottom: 16px;
        font-size: 12px;
    }

    .hero__text {
        margin-bottom: 26px;
    }

    .hero__buttons {
        gap: 10px;
    }

    .hero .btn {
        padding: 15px 20px;
    }

    .hero__ui .hero__inner {
        align-items: end;
    }

    /* En móvil los temas vuelven a ser una fila de 3 segmentos alineados a la izquierda */
    .hero__topics {
        grid-column: 1;
        justify-self: stretch;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin: 0 0 104px;
        border-right: 0;
    }

    .hero__topic {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        text-align: left;
    }

    .hero__topic-label {
        font-size: 12px;
    }

    .hero__topic-bar {
        top: -1px;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 2px;
        transform: scaleX(0);
        transform-origin: left;
    }

    @keyframes hero-progress-x {
        to { transform: scaleX(1); }
    }

    .hero__topic.is-active .hero__topic-bar {
        animation-name: hero-progress-x;
    }

    .hero__counter {
        display: none;
    }
}

/* Sin JS: mostrar el primer slide estático */
.no-js .hero__content > * {
    opacity: 1;
    transform: none;
}

/* Movimiento reducido: sin zoom ni entradas animadas */
@media (prefers-reduced-motion: reduce) {
    .hero__bg,
    .hero__content > * {
        transition: none;
    }

    .hero__bg {
        transform: none;
    }
}