/* ==========================================================================
   RESET
========================================================================== */
*{ margin:0; padding:0; box-sizing:border-box; }

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-base);
    background:var(--bg-dark);
    overflow-x:hidden;
}

/* Los elementos de formulario no heredan tipografía por defecto en los
   navegadores: se normaliza una sola vez aquí en vez de repetirlo en
   cada selector de .footer-form. */
button, input, textarea, select{
    font:inherit;
    color:inherit;
}

/* Accesibilidad: foco visible consistente en toda la página */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
    outline:2px solid var(--accent-cyan);
    outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
    *{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* ==========================================================================
   DESIGN TOKENS
   Un solo lugar para colores, tipografía y ritmo vertical. Antes estos
   valores estaban repetidos como hex sueltos por todo el archivo (varios
   tonos oscuros distintos para "texto sobre fondo claro", tres formas
   distintas de definir el padding vertical de una sección, etc). Ahora
   cada sección referencia el mismo token, así que cambiar la paleta o el
   ritmo entre secciones se hace en un solo sitio y queda uniforme.
========================================================================== */
:root{

    /* Tipografía */
    --font-base: "Figtree", sans-serif;

    /* Fondos */
    --bg-dark: #34394E;
    --bg-hero-grad-top: #384275;
    --bg-hero-grad-bottom: #34384E;
    --bg-panel: #181C2B;
    --bg-panel-dark: #22273A;
    --bg-card-grad-start: #455066;
    --bg-card-grad-end: #34384E;
    /* FIX: esta variable se usaba en .comparativa-carousel__card pero nunca
       se había definido, así que el fondo de las cards del carrusel mobile
       quedaba transparente (por eso se veía como texto suelto en vez de
       tarjetas). Reutiliza el mismo gradiente que ya usa la tabla desktop
       para mantener consistencia visual entre ambas versiones. */
    --card-grad: linear-gradient(160deg, var(--bg-card-grad-start) 0%, var(--bg-card-grad-end) 100%);
    --bg-purple-grad-start: #919ED0;
    --bg-purple-grad-end: #B9AEC3;
    --bg-light: #EEEEEE;
    --bg-light-alt: #F5F6F8;
    --bg-gray: #E6ECEF;
    --bg-footer: #232A45;

    /* Texto */
    --text-light: #F8F8F8;
    --text-muted-on-dark: #d5dbe4;
    --text-dark: #20253B;
    --text-muted-on-light: #6C7384;
    --text-gray: #525866;
    --text-footer-muted: #B9BFD4;

    /* Acentos */
    --accent-cyan: #00C3D7;
    --accent-red: #B51E23;
    --accent-coral: #E2665D;
    --accent-purple: #7C86E8;
    --accent-lilac: #C8C0F4;

    /* Bordes / radios */
    --radius-card: 8px;
    --radius-panel: 14.56px;
    --border-subtle: rgba(255,255,255,.1);
    --border-subtle-strong: rgba(255,255,255,.15);

    /* Ritmo vertical: mismo padding en todas las secciones de contenido
       (Cómo funciona, Comparativa, Beneficios, FAQ, Footer), en vez del
       120px fijo / 100dvh / clamp distinto que tenía cada una antes. */
    --section-padding-y: clamp(64px, 9vw, 120px);
    --section-header-gap: clamp(32px, 4vw, 56px);

    --degradado-hero: linear-gradient(180deg, #7882B4 -17.53%, #34384E 89.99%);
}

/* ==========================================================================
   ESTILOS DE TEXTO
========================================================================== */

h1{
    color: var(--text-light);
    text-align: center;
    font-size: clamp(1.75rem, 1.1vw + 1.5rem, 2.5rem); /* 28px → 40px */
    font-weight: 600;
    line-height: 120%;
    max-width: 720px;
    margin: 0 auto;
}

h2{
    color: var(--text-light);
    font-size: clamp(1.875rem, 1.4vw + 1.55rem, 2.8125rem); /* 30px → 45px */
    font-weight: 600;
    line-height: 110%;
}

/* Encabezados de sección sobre fondo claro (Beneficios, FAQ): antes usaban
   dos grises oscuros distintos (#20253B y #0a0f20) para el mismo propósito;
   ahora comparten el mismo token de texto. */
.beneficios-header h2,
.faq-header h2{
    color: var(--text-dark);
}

h3{
    color: var(--text-light);
    font-size: clamp(1.25rem, 0.4vw + 1.15rem, 1.5rem); /* 20px → 24px */
    font-weight: 400;
    line-height: 110%;
}

p{
    color: var(--text-muted-on-dark);
    font-size: clamp(0.9375rem, 0.1vw + 0.9rem, 1rem); /* 15px → 16px */
    font-weight: 300;
    line-height: 130%;
}

/* ==========================================================================
   UTILIDADES DE SECCIÓN
========================================================================== */
.section-header{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom: var(--section-header-gap);
}

/* ==========================================================================
   BOTONES
========================================================================== */
.btn{
    position: relative;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: .9rem 1.8rem;

    border: 1px solid var(--border-subtle-strong);
    border-radius: 999px;

    background: transparent;
    color: white;
    text-decoration: none;

    transition: color .35s ease;

    font-size: 16px;
    font-weight: 400;
}

.btn::before{
    content: "";
    position: absolute;
    inset: 0;
    background: white;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s ease;
    z-index: -1;
}

.btn:hover::before{
    transform: scaleX(1);
}

.btn:hover{
    color: #08131F;
}

/* ==========================================================================
   HEADER
========================================================================== */
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1rem 0;
}

.header-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
}

.logo{
    display: flex;
    align-items: center;
    height: 100%;
}

.logo img{
    display: block;
    height: 100%;
    width: auto;
    object-fit: contain;
}

.btn-primary{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.6rem 1.7rem;

    background: white;
    color: black;

    border: none;
    border-radius: 999px;

    text-decoration: none;
    font-weight: 600;

    cursor: pointer;
    transition: filter .3s ease;

    font-size: 16px;
}

.btn-primary:hover{
    filter: brightness(0.92);
}

/* ==========================================================================
   LAYOUT BASE
========================================================================== */
.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* ==========================================================================
   HERO
========================================================================== */
.hero{
    position:relative;
    min-height:100vh;
    overflow:hidden; /* evita scroll horizontal cuando el símbolo sale de pantalla */
    background: linear-gradient(180deg, #7882B4 -17.53%, #34384E 89.99%);
}

.hero .container{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: 100vh;
    min-height: 100dvh;

    padding-top: clamp(90px, 8vw + 60px, 110px); /* altura del header fijo */
    padding-bottom: clamp(24px, 4vw, 32px);
}

/* -------------------------- */
/* ISOTIPO */
/* -------------------------- */

.hero-symbol {
    position: absolute;
    top: 50vh;
    top: 50dvh;
    left: 50%;

    width: clamp(340px, 45vw + 100px, 900px);
    height: 100vh;
    /* sin transform: lo controla el JS (xPercent/yPercent) */

    z-index: 1;
    color: #7882B4;
    pointer-events: none;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;
    will-change: transform, opacity;
}

.hero-symbol svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    fill: #7882B4;
}

/* -------------------------- */
/* CONTENIDO */
/* -------------------------- */

.hero-content{
    position: relative;
    z-index: 2;
    flex: 1.2;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 16px;
    max-width: 760px;
    text-align: center;
}

.hero-content p{
    max-width:580px;
    line-height:1.6;
}

.hero-content .btn{
    margin-top:8px;
}

.accent{
    color: var(--accent-cyan);
}

.botones{
    display: flex;
    gap: 16px;
}

/* -------------------------- */
/* ESTADÍSTICAS */
/* -------------------------- */

.hero-stats{
    position: relative;
    z-index: 2;
    width: 100%;

    display: grid;
    grid-template-columns: repeat(2, 1fr); /* mínimo 2 columnas siempre */
    column-gap: 1.5rem;
    row-gap: 1.5rem;
    justify-items: center;

    margin-top: auto;
    padding-top: clamp(16px, 3vw, 48px);
}

@media (min-width: 1024px){
    .hero-stats{
        grid-template-columns: repeat(4, 1fr); /* desktop: las 4 en una sola fila */
    }
}

.stat{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    max-width: 20rem;
    margin: 0 auto;
    text-align: center;
}

/* Línea VERTICAL (entre columnas) — única línea que existe */
.stat::after{
    content: "";
    position: absolute;
    top: 50%;
    right: -0.75rem; /* mitad de column-gap */
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: var(--border-subtle-strong);
}

/* Mobile/tablet (2 columnas): oculta la línea en la columna derecha (pares) */
.stat:nth-child(even)::after{
    display: none;
}


@media (min-width: 1024px){
    .stat::after{
        display: block;
    }
    .stat:nth-child(even)::after{
        display: block; /* revierte específicamente la regla que oculta los pares en mobile */
    }
    .stat:last-child::after{
        display: none; /* solo se oculta en el último de los 4 */
    }
}

.stat:hover {
    transform: translateY(-4px);
}

/* ==========================================================================
   RESPONSIVE — ajustes específicos para tablet/desktop chico
========================================================================== */

@media (max-width: 1024px) {
    .hero-content {
        max-width: 600px;
    }
}

@media (max-width: 768px) {
    .botones {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hero-content .btn {
        width: 100%;
    }
}
/* ==========================================================================
   SECCIÓN CÓMO FUNCIONA
   Desktop-first: los estilos base son desktop, las media queries reducen.
========================================================================== */
.como{
    padding: var(--section-padding-y) 0;
    overflow: hidden;
}

.two-columns{
    display:flex;
    align-items:center;
    justify-content:space-between;
    /* antes: 80px fijo. Ahora escala solo con el viewport,
       elimina la necesidad de un breakpoint extra sólo para el gap */
    gap: clamp(32px, 6vw, 80px);
    min-height:100vh;
}

.como-content{
    flex: 0 1 560px;
    min-width: 0; /* evita que texto/hijos desborden el flex item al achicarse */
}

.como-header{
    /* más aire entre el título y el subtítulo ("Cómo funciona" /
       "Los pasos que seguimos"), un poco más que el gap:16px genérico
       de .section-header */
    gap: 24px;
    /* más separación respecto al card de abajo (Diagnóstico inicial),
       por encima del margin-bottom genérico de .section-header */
    margin-bottom: clamp(48px, 6vw, 80px);
    /* el card de abajo (.slider) ya queda centrado gracias a
       justify-content:space-between; centramos también el título y
       el subtítulo para que compartan el mismo eje central, en vez
       de quedar pegados al borde izquierdo mientras el card flota
       en el medio */
    text-align: center;
}

/* -------------------------- */
/* SLIDER */
/* -------------------------- */

.slider{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:28px;
}

.prev-btn,
.next-btn{
    box-sizing: border-box;
    width:40px;
    height:40px;
    flex-shrink: 0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--border-subtle);
    border-radius:50%;

    background: rgba(255,255,255,.06);
    color:white; /* controla el color del svg vía currentColor */

    cursor:pointer;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.prev-btn svg,
.next-btn svg{
    transform: scale(0.7);
    transition: transform .4s ease;
}

/* la flecha apunta a la derecha por defecto → rotamos 180° para "prev" */
.prev-btn svg{
    transform: scale(0.7) rotate(180deg);
}

.prev-btn:hover,
.next-btn:hover{
    background: rgba(255,255,255,.14);
    border-color: var(--border-subtle-strong);
}

.prev-btn:hover svg{
    transform: scale(0.7) rotate(180deg) translateX(-2px);
}

.next-btn:hover svg{
    transform: scale(0.7) translateX(2px);
}

.prev-btn:active,
.next-btn:active{
    background: rgba(255,255,255,.14);
}

.prev-btn:disabled,
.next-btn:disabled{
    opacity:.5;
    cursor:default;
    transform:none;
}

.prev-btn:disabled svg{
    transform: scale(0.7) rotate(180deg);
}

/* -------------------------- */
/* CARD */
/* -------------------------- */

.card{
    display:flex;
    align-items:flex-start;
    gap:28px;
    flex:0 1 auto;
    min-width: 0;
}

.card-number{
    flex-shrink:0;
    /* antes: 8rem fijo. Escala fluido en laptops/tablets antes de
       llegar al breakpoint mobile, que define su propio tamaño */
    font-size: clamp(6rem, 9vw, 11rem);
    font-weight:300;
    line-height:1;
    color:#F8F8F8;
    opacity:.3;
    transition: opacity .35s ease, transform .35s ease;
}

.card-info{
    display:flex;
    flex-direction:column;
    gap:16px;
    max-width:560px;
    min-width: 0;
}

.card-title{
    margin:0;
    transition: opacity .35s ease, transform .35s ease;
}

.card-description{
    color: var(--text-muted-on-dark);
    line-height:130%;
    /* reserva espacio para que el cambio de paso no salte de alto,
       pero ya no fuerza altura fija en pantallas angostas */
    min-height: clamp(96px, 9vw, 120px);
    transition: opacity .35s ease, transform .35s ease;
}

/* estado de transición al cambiar de paso */
.card-number.is-changing,
.card-title.is-changing,
.card-description.is-changing{
    opacity:0;
    transform:translateY(8px);
}

/* -------------------------- */
/* LÍNEA DE PROGRESO */
/* -------------------------- */

.progress-line{
    position:relative;
    width:100%;
    height:2px;
    margin-top:24px;
    background:rgba(181,30,35,.15);
    border-radius:999px;
    overflow:hidden;
}

.progress-line::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:calc(100% / var(--steps, 5));
    background: var(--accent-cyan);
    border-radius:999px;
    transform:translateX(calc(100% * var(--step, 0)));
    transition: transform .45s ease;
}

/* -------------------------- */
/* COLUMNA VISUAL */
/* -------------------------- */

.como-visual{
    flex: 1.2;
    height:auto;
    min-width: 0;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:visible;
}

.robot-placeholder{
    width:100%;
    height:100%;
    overflow:visible;
}

.robot-image{
    /* % puro: ya escala solo con el ancho de su columna flex,
       no necesita clamp ni breakpoints extra antes del stack mobile */
    width:130%;
    max-width:none;
    height:auto;
    display:block;
    opacity:1;
    transform:scale(1) translateY(0);
    transition: opacity .35s ease, transform .35s ease;
}

.robot-image.hide{
    opacity:0;
    transform:scale(1.03) translateY(10px);
}


/* ==========================================================================
   RESPONSIVE
========================================================================== */

/* --------------------------------------------------------------------
   TABLET LANDSCAPE / LAPTOP PEQUEÑO
   Único ajuste necesario: el bleed de 170% empieza a verse muy agresivo
   antes de que el layout colapse a una columna.
-------------------------------------------------------------------- */
@media (max-width: 1200px){
    .robot-image{
        width: 115%;
    }
}

/* --------------------------------------------------------------------
   BREAKPOINT PRINCIPAL: layout de una columna (mobile / tablet portrait)
-------------------------------------------------------------------- */
@media (max-width: 900px){

    .como{
        padding: 60px 0;
    }

    .two-columns{
        flex-direction: column;
        min-height: auto;
        gap: 40px;
    }

    /* .como-content deja de generar su propia caja: sus hijos
       (.como-header y .slider) pasan a ser hijos directos de
       .two-columns, para poder ordenarlos de forma independiente
       respecto a .como-visual en vez de moverse los dos juntos. */
    .como-content{
        display: contents;
    }

    /* 1) Título + descripción */
    .como-header{
        order: 1;
        width: 100%;
        text-align: center;
        margin-bottom: 32px;
    }

    /* 2) Imagen */
    .como-visual{
        order: 2;
        width: 100%;
        flex: none;
        overflow: hidden; /* ya no hay bleed en mobile, contenemos la imagen */
    }

    .robot-image{
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }

    /* 3) Pasos — además de reordenarse, el slider se convierte en grid.
       Aplanamos .card y .card-info con display:contents para poder
       ubicar cada elemento libremente dentro de este mismo grid. */
    .slider{
        order: 3;
        width: 100%;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "title  title"
            "number description"
            "nav    nav";
        column-gap: 24px;
        row-gap: 16px;
        align-items: start;

        /* deja el gesto horizontal libre para el JS del swipe,
           sin bloquear el scroll vertical nativo de la página */
        touch-action: pan-y;
    }

    /* mientras se arrastra, evita que se seleccione texto por accidente
       (clase agregada/quitada por el script de swipe) */
    .slider.is-dragging,
    .slider.is-dragging *{
        user-select: none;
    }

    .card,
    .card-info{
        display: contents;
    }

    /* ambos botones de navegación (antes solo existía "siguiente") */
    .prev-btn{
        grid-area: nav;
        justify-self: start;
        align-self: center;
    }

    .card-title{
        grid-area: title;
    }

    .card-number{
        grid-area: number;
        font-size: clamp(2.75rem, 13vw, 4.5rem);
    }

    .card-description{
        grid-area: description;
        min-height: auto;
    }

    /* la fila de navegación (flecha anterior + puntos + flecha
       siguiente) comparte la misma grid-area, con los tres alineados
       cada uno a su posición: extremos para las flechas, centro para
       los puntos de progreso */
    .progress-line{
        grid-area: nav;
        justify-self: center;
        align-self: center;
        width: calc(100% - 112px);
        margin-top: 0;

        /* --- versión "puntos" reutilizando --step / --steps del JS --- */
        height: 10px;
        overflow: visible;
        background-color: transparent;
        background-image: radial-gradient(circle, rgba(181,30,35,.3) 3px, transparent 3.5px);
        background-size: calc(100% / var(--steps, 5)) 100%;
        background-position: left center;
        background-repeat: repeat-x;
    }

    .progress-line::after{
        width: calc(100% / var(--steps, 5));
        height: 100%;
        background-color: transparent;
        background-image: radial-gradient(circle, var(--accent-cyan) 4px, transparent 4.5px);
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 0;
    }

    .next-btn{
        grid-area: nav;
        justify-self: end;
        align-self: center;
    }
}

/* --------------------------------------------------------------------
   MOBILE PEQUEÑO
-------------------------------------------------------------------- */
@media (max-width: 480px){

    .robot-image{
        max-width: 320px;
    }

    .slider{
        column-gap: 16px;
        row-gap: 14px;
    }

    .progress-line{
        width: calc(100% - 96px);
    }
}

/* --------------------------------------------------------------------
   MOBILE MUY PEQUEÑO (iPhone SE y similares, ~360px)
-------------------------------------------------------------------- */
@media (max-width: 360px){

    .como{
        padding: 48px 0;
    }

    .card-number{
        font-size: clamp(2.25rem, 15vw, 3rem);
    }

    .card-info{
        gap: 12px;
    }
}
/* ==========================================================================
   SECCIÓN COMPARATIVA
========================================================================== */
.comparativa{ padding: var(--section-padding-y) 0; }
.comparativa-header p{ color: var(--text-muted-on-dark); }

.comparativa-table{
    max-width:1292px;
    margin:0 auto;
    padding:32px 48px;
    border-radius: var(--radius-panel);
    background: linear-gradient(118deg, var(--bg-card-grad-start) -4.69%, var(--bg-card-grad-end) 65.64%);
}
.comparativa-row{
    display:grid;
    grid-template-columns: minmax(0,1fr) 426.33px 426.33px;
    column-gap:32px;
    align-items:center;
}
.comparativa-row + .comparativa-row{ margin-top:32px; }
.comparativa-row--head{ align-items:end; padding-bottom:32px; }
.comparativa-divider{ height:1px; background: var(--border-subtle); margin-bottom:32px; }
.comparativa-col--label{ color:#fff; font-weight:600; }
.comparativa-col--head{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.comparativa-col--head svg{ width:64px; height:64px; padding:16px; border-radius:50%; border:1.5px solid currentColor; }
.comparativa-col--head span{ color:#fff; font-weight:600; }
.comparativa-col--manual{ color: var(--accent-coral); }
.comparativa-col--luna{ color: var(--accent-purple); }
.comparativa-item{ display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; }
.comparativa-item svg{ flex-shrink:0; }
.comparativa-item span{ color: var(--text-muted-on-dark); }
.comparativa-item strong{ color:#fff; font-weight:600; }
.comparativa-item--no{ color: var(--accent-coral); }
.comparativa-item--yes{ color: var(--accent-purple); }

/* ==========================================================================
   CARRUSEL MOBILE
========================================================================== */
.comparativa-carousel{ display:none; }

@media (max-width: 960px){

    .comparativa-table{ display:none; }

    .comparativa-carousel{
        display:block;
        position:relative; /* ancla para las flechas (position:absolute) */
        padding:8px 0 56px;
    }

    /* el stage es más grande que la card para dar espacio a la rotación
       y al recorrido de salida/entrada sin que nada se recorte */
    .comparativa-carousel__stage{
        position:relative;
        width:280px;
        height:470px;
        margin:0 auto;
    }

    .comparativa-carousel__card{
        position:absolute;
        top:50%;
        left:50%;
        width:240px;
        height:430px;
        padding:16px 0;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:space-evenly;
        border-radius:16px;
        background: var(--card-grad);
        box-shadow: 0 4px 4px 0 rgba(0,0,0,0.05);
        will-change: transform, opacity;
    }

    /* cards decorativas de fondo: dan profundidad al stack.
       Tienen su propia transición para "respirar" levemente
       mientras se arrastra la card activa (ver JS). */
    .comparativa-carousel__card--back-1,
    .comparativa-carousel__card--back-2{
        transition: opacity .18s ease, transform .18s ease;
        box-shadow: 0 6px 14px 0 rgba(0,0,0,0.18);
    }

    .comparativa-carousel__card--back-1{
        transform: translate(-50%,-50%) rotate(-5deg) translateY(6px);
        opacity:.7;
        z-index:1;
    }

    .comparativa-carousel__card--back-2{
        transform: translate(-50%,-50%) rotate(5deg) translateY(6px);
        opacity:.45;
        z-index:0;
    }

    .comparativa-carousel__card--active{
        transform: translate(-50%,-50%);
        z-index:2;
        text-align:center;
        touch-action: pan-y; /* deja que el scroll vertical de la página siga libre */
    }

    /* --- Fases de animación de la card activa (tipo Tinder) ---------------
       El JS alterna estas clases sobre la misma card activa:
       - is-dragging  → mientras el dedo la mueve: SIN transición,
                         para que el translateX/rotate sigan al dedo 1:1.
       - is-snapping  → soltó sin llegar al umbral: vuelve al centro con
                         un pequeño rebote elástico.
       - is-leaving   → soltó superando el umbral (o click en flecha/dot):
                         la card sale despedida hacia el lado del swipe.
       - is-entering  → tras cambiar el contenido, la card "nueva" entra
                         desde el lado opuesto y se asienta en el centro.
       ----------------------------------------------------------------- */
    .comparativa-carousel__card--active.is-dragging{
        transition: none;
    }

    .comparativa-carousel__card--active.is-snapping{
        transition: transform .42s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .comparativa-carousel__card--active.is-leaving{
        transition: transform .26s cubic-bezier(0.55, 0, 1, 0.45),
                    opacity .26s ease-in;
    }

    .comparativa-carousel__card--active.is-entering{
        transition: transform .38s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity .38s ease-out;
    }

    /* reposiciona sin animar (usado un frame antes de is-entering) */
    .comparativa-carousel__card--active.is-instant{
        transition: none;
    }

    /* 1. categoría */
    .comparativa-carousel__category{
        margin:0;
        padding:0 20px;
        font-size:20px;
        font-weight:600;
        color:#fff;
    }

    /* 2. título + descripción manual / 4-5. título + descripción luna */
    .comparativa-carousel__block{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:6px;
        padding:0 24px;
    }

    .comparativa-carousel__block strong{
        font-size:15px;
        font-weight:600;
        color:#fff;
    }

    .comparativa-carousel__block p{
        margin:0;
        font-size:13px;
        line-height:1.4;
        color: var(--text-muted-on-dark);
    }

    /* 3. icono */
    .comparativa-carousel__icon{
        width:56px;
        height:56px;
        flex-shrink:0;
        border-radius:14px;
        background: rgba(255,255,255,.08);
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
    }

    .comparativa-carousel__icon svg{ width:24px; height:24px; }

    .comparativa-carousel__arrow{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        width:40px;
        height:40px;
        border-radius:50%;
        border:1px solid var(--border-subtle);
        background: rgba(255,255,255,.06);
        color:#fff;
        font-size:20px;
        line-height:1;
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        z-index:3;
    }

    .comparativa-carousel__arrow:active{ background: rgba(255,255,255,.14); }
    .comparativa-carousel__arrow--prev{ left:0; }
    .comparativa-carousel__arrow--next{ right:0; }

    .comparativa-carousel__dots{
        display:flex;
        justify-content:center;
        gap:8px;
        margin-top:20px;
    }

    .comparativa-carousel__dots button{
        width:6px;
        height:6px;
        border-radius:50%;
        border:none;
        padding:0;
        background: var(--border-subtle);
        cursor:pointer;
        transition: width .2s ease, background .2s ease;
    }

    .comparativa-carousel__dots button.is-active{
        background:#fff;
        width:16px;
        border-radius:3px;
    }

    /* respeta a quien prefiere menos movimiento en pantalla */
    @media (prefers-reduced-motion: reduce){
        .comparativa-carousel__card--active.is-snapping,
        .comparativa-carousel__card--active.is-leaving,
        .comparativa-carousel__card--active.is-entering,
        .comparativa-carousel__card--back-1,
        .comparativa-carousel__card--back-2{
            transition-duration: .01ms !important;
        }
    }
}
/* ==========================================================================
   BANNER
========================================================================== */
.banner{
    width:100%;
    overflow:hidden;
}

.banner-image{
    display:block;
    width:100%;
    height:auto;
}

/* ==========================================================================
   BENEFICIOS
========================================================================== */
.beneficios{
    padding: var(--section-padding-y) 0;
    background: var(--bg-light);
    position: relative;
    overflow: hidden;
}

.beneficios::before{
    content: "";
    position: absolute;
    top: -220px;
    right: -220px;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(circle, #927EBD 0%, transparent 70%);
    filter: blur(90px);
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}

.beneficios-header{
    position: relative;
    z-index: 1;
}

.beneficios-header p{
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    color: var(--text-muted-on-light);
}

.bento-grid{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "large experience adaptado"
        "large eficiencia clientes";
    gap: clamp(12px, 1.6vw, 20px);
    align-items: stretch;
}

.bento-card{
    /* El texto y las imágenes dentro reaccionan al ancho de LA TARJETA
       (container query), no al del viewport — así el tamaño de letra se
       mantiene proporcional sin importar cómo se reparta el grid. */
    container-type: inline-size;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card);
}

.bento-card h3{
    font-size: clamp(1.1rem, 5.5cqi, 1.4rem);
}

.bento-card p{
    font-size: clamp(0.8rem, 2.6cqi, 0.95rem);
    line-height: 1.5;
}

/* Tarjeta grande */
.card-large{
    grid-area: large;
    min-height: clamp(200px, 24vw, 360px);
}

.card-large img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, #0a0f20);
}

.card-large .card-content{
    position: absolute;
    left: clamp(16px, 2.5cqi, 28px);
    right: clamp(16px, 2.5cqi, 28px);
    bottom: clamp(16px, 2.5cqi, 28px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: white;
    text-align: right;
}

.card-small{
    margin-bottom: 18px;
}

.card-large h3{
    font-size: clamp(2rem, 9cqi, 4rem);
    line-height: 1;
}

/* Experiencia */
.card-purple{
    grid-area: experience;
    position: relative;
    z-index: 0;
    background: linear-gradient(180deg, var(--bg-purple-grad-start) 62.71%, var(--bg-purple-grad-end) 100%);
    padding: clamp(18px, 4cqi, 28px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card-purple::before{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg-purple-grad-start);
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 0;
}

.card-purple:hover::before{
    opacity: 1;
}

.card-purple > *{
    position: relative;
    z-index: 1;
}

.card-purple h3,
.card-purple .card-description{
    color: white;
}

.card-purple .card-logo{
    width: clamp(100px, 42cqi, 170px);
    height: auto;
    margin-top: auto;
    align-self: center;
}

/* Adaptado a Bolivia */
.card-light{
    grid-area: adaptado;
    position: relative;
    background: var(--bg-light-alt);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: clamp(120px, 16cqi, 180px);
    overflow: hidden;
}

/* Círculo exterior: el gradiente completo (esto SÍ es un relleno, a propósito) */
.card-light::before{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -620px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #D9D0F0 0%, #927EBD 100%);
    background-size: 200% 100%;
    background-position: 0% 0%;
    z-index: 1;
    pointer-events: none;
    transition: background-position 0.5s ease;
}

.card-light:hover::before{
    background-position: 100% 0%;
}

/* Círculo interior: tapa el centro con el mismo color de fondo de la card, dejando solo el aro de 16px visible */
.card-light::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -604px;
    width: 668px;
    height: 668px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--bg-light-alt);
    z-index: 1;
    pointer-events: none;
}

.card-light .card-body{
    position: relative;
    z-index: 2;
    padding: clamp(16px, 4cqi, 22px);
    width: 80%;
}

.card-light .card-body h3,
.card-light .card-body p{
    color: var(--text-dark);
}

.card-light .card-body p{
    margin-top: 12px;
}

/* Eficiencia en insumos */
.card-dark{
    grid-area: eficiencia;
    position: relative;
    background: var(--bg-panel-dark);
    display: flex;
    align-items: stretch;   /* ← déjalo como estaba, NO lo cambies a center */
    color: white;
    min-height: clamp(160px, 20cqi, 220px);
}

.card-dark .card-body{
    width: 60%;
    padding: clamp(16px, 4cqi, 22px);
    display: flex;
    flex-direction: column;
    justify-content: center;   /* ← este es el cambio: antes era space-between */
    gap: 14px;
}

.card-dark-visual{
    width: 40%;               /* was 55% — bigger visual column */
    display: flex;
    flex-direction: column;
    align-items: flex-end;    /* was center — pushes the logo to the right too */
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 0 16px 0;   /* no right padding = image bleeds to the edge */
    min-height: 0;
    overflow: hidden;         /* clip the oversized product image so only one bottle shows */
}

.card-dark-product{
    position: absolute;
    top: 0;
    left: calc(50% + 18px);
    height: 90%;
    width: auto;
    object-fit: contain;
    transform-origin: left center;
    transition: transform 0.3s ease;/* keep the first bottle in frame; the second gets cropped away on the right */
}

.card-dark-logo{
    flex-shrink: 0;
    width: clamp(80px, 22cqi, 120px); /* was 70–110px — slightly bigger */
    height: auto;
    object-fit: contain;
    margin-right: clamp(12px, 3cqi, 20px); /* keeps logo from touching the very edge, since image now does */
}

.card-dark:hover .card-dark-product{
    transform: scale(1.06);
    transition: transform .3s ease;
}

.card-dark h3,
.card-dark p{
    color: var(--text-footer-muted);
}

/* Clientes de referencia */

.card-gray{
    grid-area: clientes;
    position: relative;
    background: var(--bg-gray);
    padding: clamp(18px, 4cqi, 28px);
    overflow: hidden;
    min-height: clamp(120px, 16cqi, 180px);
}

.card-gray-circles{
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
    width: clamp(220px, 60cqi, 360px);
    height: clamp(220px, 60cqi, 360px);
    pointer-events: none;
    z-index: 0;
    transition: transform 0.3s ease;
}

.card-gray:hover .card-gray-circles{
    transform: translate(50%, 50%) scale(1.08);
}

.card-gray-circles svg{
    width: 100%;
    height: 100%;
}

.card-gray-circles circle{
    fill: none;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 1.5;
}

.card-gray h3{
    /* antes heredaba el h3 blanco por defecto y quedaba invisible sobre
       este fondo claro */
    color: var(--text-dark);
    position: relative;
    z-index: 1;
}

.card-gray ul{
    position: relative;
    z-index: 1;
    list-style: none;
    margin-top: 18px;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-gray li{
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-gray);
    font-size: clamp(0.8rem, 2.4cqi, 0.95rem);
}

.client-logo{
    display: inline-flex;
    width: clamp(52px, 20cqi, 64px);
    height: clamp(32px, 9cqi, 44px);
    flex-shrink: 0;
}

.client-logo svg{
    width: 100%;
    height: 100%;
    fill: currentColor;
}

@media (max-width: 1024px){

    .bento-grid{
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "large large"
            "experience adaptado"
            "eficiencia clientes";
    }
}

@media (max-width: 640px){

    .bento-grid{
        grid-template-columns: 1fr;
        grid-template-areas:
            "large"
            "experience"
            "adaptado"
            "eficiencia"
            "clientes";
    }

    .card-light{
        min-height: clamp(200px, 26cqi, 280px);
    }

    .card-dark{
        min-height: clamp(240px, 30cqi, 340px);
    }

    .card-dark-visual{
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: clamp(140px, 42cqi, 220px);
        padding: 20px 16px 16px;
    }

    .card-dark-product{
        left: 8px;
        height: 85%;
    }

    

    .card-dark-logo{
        width: clamp(70px, 22cqi, 100px);
    }

    .card-dark .card-body{
        width: 55%;
    }
}

/* ==========================================================================
   FAQ
========================================================================== */
.faq{
    padding: var(--section-padding-y) 0;
    background: var(--bg-light);
}

.faq-header p{
    color: var(--text-gray);
}

.faq-list{
    display:flex;
    flex-direction:column;
}

.faq-item{
    border-bottom:1px solid #B9C1D3;
    cursor:pointer;
}

.faq-question{
    width:100%;
    border:none;
    background:none;

    position:relative;
    display:flex;
    align-items:center;
    gap:24px;

    padding:28px 0 28px 180px;
    cursor:pointer;
    text-align:left;
}

.faq-number-wrap{
    --num-size:clamp(6rem,9vw,8.5rem);

    position:absolute;
    top:28px;
    left:0;
    width:180px;
    bottom:0;
    overflow:hidden;
    pointer-events:none;

    transition:height .4s cubic-bezier(.4,0,.2,1);
}

.faq-item.active .faq-number-wrap{
    height:var(--num-size);
}

.faq-number{
    display:block;
    font-size:var(--num-size);
    line-height:1;
    margin-bottom:-0.08em;
    font-weight:300;
    color: var(--accent-lilac);
    opacity:.9;
    user-select:none;
}

.faq-title{
    text-align:left;
    font-size:clamp(1rem,1.3vw,1.3rem);
    font-weight:600;
    color: var(--text-dark);
    max-width:700px;
    flex:0 1 auto;
}

.faq-icon{
    flex-shrink:0;
    margin-left:auto;
    width:34px;
    height:34px;
    border:1px solid #7C8399;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:1.4rem;
    color: var(--text-dark);

    transition:transform .35s cubic-bezier(.4,0,.2,1);
}

.faq-answer{
    display:grid;
    grid-template-rows:0fr;
    padding-left:180px;

    transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1);
}

.faq-answer-inner{
    overflow:hidden;
}

.faq-answer p{
    max-width:700px;
    padding-top:4px;
    padding-bottom:24px;
    color: var(--text-muted-on-light);
    line-height:1.7;
}

.faq-item.active .faq-answer{
    grid-template-rows:1fr;
}

.faq-item.active .faq-icon{
    transform:rotate(45deg);
}

@media (max-width:900px){
    .faq-question{
        padding-left:100px;
    }

    .faq-number-wrap{
        --num-size:4.5rem;
        width:100px;
        top:24px;
    }

    .faq-answer{
        padding-left:100px;
    }
}

@media (max-width:640px){
    .faq-question{
        padding-left:76px;
        gap:16px;
    }

    .faq-number-wrap{
        --num-size:3rem;
        width:76px;
        top:22px;
    }

    .faq-title{
        font-size:1rem;
    }

    .faq-answer{
        padding-left:76px;
    }
}

/* ==========================================================================
   FOOTER
========================================================================== */
.footer{
    background: var(--bg-footer);
    border-radius: clamp(24px,3vw,48px) clamp(24px,3vw,48px) 0 0;
    color: var(--text-light);
}

.footer-container{
    display:flex;
    flex-direction:column;
    gap:60px;
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

.footer-top{
    display:flex;
    align-items:flex-start;
    gap:32px;
    flex-wrap:wrap;
}

.footer-left{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:60px;
    flex:1 1 320px;
}

.footer-title{
    text-align:left;
    max-width:none;
    margin:0;
}

.footer-contact{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.footer-contact-item{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.footer-label{
    font-size:.9rem;
    font-weight:600;
    color: var(--text-light);
}

.footer-value,
.footer-link{
    font-size:.95rem;
    font-weight:300;
    color: var(--text-footer-muted);
    text-decoration:none;
}

.footer-link{
    text-decoration:underline;
    text-underline-offset:3px;
}

.footer-right{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    flex:1 1 380px;
    width:100%;
}

.footer-form{
    display:flex;
    flex-direction:column;
    gap:16px;
    width:100%;
}

.form-row{
    display:flex;
    gap:16px;
    width:100%;
}

.form-field{
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
}

.form-field label{
    font-size:.9rem;
    font-weight:400;
    color: var(--text-light);
}

.form-field input,
.form-field textarea{
    width:100%;
    background:transparent;
    border:1px solid rgba(245,246,250,.3);
    border-radius:8px;
    padding:14px 16px;
    color: var(--text-light);
    font-size:.95rem;
    resize:none;
}

.form-field input::placeholder,
.form-field textarea::placeholder{
    color:rgba(245,246,250,.45);
}

.form-field input:focus,
.form-field textarea:focus{
    outline:none;
    border-color:rgba(245,246,250,.7);
}

.footer-submit{
    width:100%;
    margin-top:8px;
    padding:16px;
    border:none;
    border-radius:999px;
    cursor:pointer;

    background:linear-gradient(180deg,#7B84B8 0%,#565F8C 100%);
    color: var(--text-light);
    font-size:.95rem;
    font-weight:500;

    transition:filter .25s ease;
}

.footer-submit:hover{
    filter:brightness(1.1);
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:32px 24px;
    width:100%;
}

.footer-brand{
    font-size:.95rem;
    font-weight:300;
    color: var(--text-light);
}

.footer-social,
.footer-nav{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.footer-social a,
.footer-nav a{
    font-size:.95rem;
    font-weight:300;
    color: var(--text-light);
    text-decoration:underline;
    text-underline-offset:3px;
}

.footer-nav a{
    text-decoration:none;
}

.footer-copy{
    font-size:.9rem;
    font-weight:300;
    color: var(--text-light);
    white-space:nowrap;
}

@media (max-width:900px){

    .footer-top{
        flex-direction:column;
    }

    .footer-bottom{
        justify-content:flex-start;
        align-items:flex-start;
        gap:32px;
    }
}

@media (max-width:640px){

    .form-row{
        flex-direction:column;
        gap:16px;
    }

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
    }
}
/* ==========================================================================
   GALERÍA DE LUNA (sección oscura, después de "Cómo funciona")
========================================================================== */
.galeria-luna{
    padding: var(--section-padding-y) 0;
}

/* ==========================================================================
   GALERÍA DE EQUIPOS (sección clara, antes de FAQ)
========================================================================== */
.galeria-equipos{
    padding: var(--section-padding-y) 0;
    background: var(--bg-light);
}

.galeria-equipos-header h2,
.galeria-equipos-header p{
    color: var(--text-dark);
}

.galeria-equipos-header p{
    color: var(--text-muted-on-light);
}

/* ==========================================================================
   GRID DE GALERÍA (compartido por ambas secciones)
========================================================================== */
.gallery-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(12px, 1.6vw, 20px);
}

.gallery-item{
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-card);
    border: none;
    padding: 0;
    cursor: pointer;
    background: var(--bg-panel-dark);
}

.galeria-equipos .gallery-item{
    background: var(--bg-light-alt);
}

.gallery-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.gallery-item:hover img,
.gallery-item:focus-visible img{
    transform: scale(1.06);
}

.gallery-item::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 60%, rgba(0,0,0,.35));
    opacity: 0;
    transition: opacity .3s ease;
}

.gallery-item:hover::after,
.gallery-item:focus-visible::after{
    opacity: 1;
}

.gallery-empty{
    grid-column: 1 / -1;
    text-align: center;
    padding: clamp(32px, 6vw, 56px) 16px;
    border: 1px dashed var(--border-subtle-strong);
    border-radius: var(--radius-card);
    color: var(--text-muted-on-dark);
}

.galeria-equipos .gallery-empty{
    color: var(--text-muted-on-light);
    border-color: rgba(32,37,59,.18);
}

@media (max-width: 640px){
    .gallery-grid{
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* ==========================================================================
   LIGHTBOX (visor ampliado de las galerías)
========================================================================== */
.lightbox{
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 3vw, 32px);
    padding: clamp(16px, 4vw, 48px);
    background: rgba(8, 10, 20, .92);
}

.lightbox[hidden]{
    display: none;
}

.lightbox-figure{
    margin: 0;
    max-width: min(90vw, 1100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.lightbox-image{
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: var(--radius-card);
}

.lightbox-caption{
    color: var(--text-muted-on-dark);
    font-size: .9rem;
    text-align: center;
}

.lightbox-close,
.lightbox-nav{
    background: rgba(255,255,255,.08);
    border: 1px solid var(--border-subtle-strong);
    color: var(--text-light);
    border-radius: 999px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .25s ease;
}

.lightbox-close:hover,
.lightbox-nav:hover{
    background: rgba(255,255,255,.18);
}

.lightbox-close{
    position: absolute;
    top: clamp(12px, 3vw, 28px);
    right: clamp(12px, 3vw, 28px);
}

@media (max-width: 640px){
    .lightbox{
        flex-direction: column;
        gap: 12px;
    }
    .lightbox-nav{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .lightbox-prev{ left: 8px; }
    .lightbox-next{ right: 8px; }
}