/* ===========================================================================
   EL VANO — el slider de la portada
   ---------------------------------------------------------------------------
   La idea no es "un carrusel con efectos". Es una ventana corrediza: al cambiar
   de lámina, la nueva entra deslizándose sobre la anterior por un riel
   horizontal, igual que una hoja de vidrio sobre su marco. El recorte lo hace
   `clip-path`, que se anima en la GPU y no toca el layout.

   Encima se traza la perfilería: dos líneas horizontales, una vertical y los
   nodos de los cruces, como el despiece de un ventanal en un plano. Se dibuja
   UNA vez por lámina. No hay bucles de adorno: el movimiento aquí explica lo
   que el negocio hace, o no va.
   =========================================================================== */

.vano {
    position: relative;
    overflow: hidden;
    background: var(--canto-claro);
}

.vano__hojas {
    position: relative;
    /* El alto lo fija el contenido de la lámina más alta: sin una altura
       reservada, al cambiar de lámina la página daría un salto. */
    display: grid;
}

.vano__hoja {
    /* Todas las láminas ocupan la misma celda de la rejilla: se apilan sin
       posicionamiento absoluto, así que la más alta define el alto de todas. */
    grid-area: 1 / 1;
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    isolation: isolate;

    /* En reposo, la hoja está corrida fuera del riel. */
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition: clip-path 900ms var(--ambas), visibility 0s linear 900ms;
}

.vano__hoja.es-actual {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path 900ms var(--ambas), visibility 0s;
    z-index: 2;
}

/* Al retroceder, la hoja entra por el otro lado. Si siempre entrara por la
   derecha, volver a la lámina anterior se sentiría igual que avanzar y el
   movimiento dejaría de significar nada. */
.vano__hoja.es-atras {
    clip-path: inset(0 100% 0 0);
}

.vano__hoja.es-atras.es-actual {
    clip-path: inset(0 0 0 0);
}

/* La que sale se queda quieta debajo mientras la nueva la cubre: una hoja
   corrediza no se desvanece, se tapa. */
.vano__hoja.se-va {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    z-index: 1;
    transition: none;
}

.vano__foto {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -2;
}

.vano__velo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, .94) 0%,
        rgba(255, 255, 255, .84) 38%,
        rgba(255, 255, 255, .38) 78%,
        rgba(255, 255, 255, .14) 100%);
}

/* --- La perfilería ------------------------------------------------------- */

.vano__perfil,
.vano__nodos {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ⚠️ `vector-effect: non-scaling-stroke` hace que el grosor se cuente en
   PÍXELES DE PANTALLA, no en unidades del viewBox. Con `stroke-width: 0.12`
   —que en un viewBox de 100 parecía razonable— las líneas salían de 0,12 px:
   el navegador las dibujaba, pero no se veían. Aquí el número ya es px. */
.vano__linea {
    stroke: rgba(30, 34, 85, .3);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    /* La línea se dibuja: empieza recogida y se extiende. */
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

/* La vertical es la que parte el vano en dos: lleva el verde del canto y algo
   más de cuerpo, porque es la que se lee como perfil. */
.vano__linea--v {
    stroke: rgba(78, 122, 114, .65);
    stroke-width: 2;
}

/* Los nodos van en CSS, no en el SVG: aquel lleva `preserveAspectRatio="none"`
   para que las líneas lleguen a los bordes, y eso aplasta cualquier círculo
   (0,45 % de 1440 px de ancho contra 0,45 % de 640 px de alto). Además así
   admiten el aro claro que los despega de la foto. */
.vano__nodos {
    z-index: 1;
}

.vano__nodo {
    position: absolute;
    left: 62%;
    width: 9px;
    height: 9px;
    margin: -5px 0 0 -5px;
    background: var(--canto);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .8);
    opacity: 0;
}

/* --- El contenido -------------------------------------------------------- */

.vano__contenido {
    position: relative;
    z-index: 1;
    width: 100%;
}

.vano__texto {
    max-width: 40rem;
}

.vano__texto > * {
    /* Punto de partida: visibles. Si el JS no corre, la lámina se lee igual. */
    opacity: 1;
    transform: none;
}

/* --- Las marcas de cota (los indicadores) --------------------------------
   No son puntos de carrusel: son las marcas de una regla. La activa se alarga
   y toma el verde del canto. */
/* La barra ocupa el ancho entero para que su `.container` de adentro caiga
   exactamente donde cae el del texto; sin ella, las marcas quedaban colgadas a
   la izquierda de la cota, que empieza donde empieza el contenedor. */
.vano__barra {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    z-index: 4;
    pointer-events: none;   /* la barra no debe tapar la foto */
}

.vano__marcas {
    display: inline-flex;
    align-items: flex-end;
    gap: 10px;
    height: 22px;
    pointer-events: auto;
}

.vano__marca {
    width: 2px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(30, 34, 85, .35);
    cursor: pointer;
    transition: height 320ms var(--salida), background-color 320ms var(--salida);
}

.vano__marca:hover {
    background: rgba(30, 34, 85, .6);
}

.vano__marca.es-actual {
    height: 22px;
    background: var(--canto);
}

/* El área de toque real es mayor que la marca dibujada. */
.vano__marca::after {
    content: "";
    position: absolute;
    inset: -14px -8px;
}

.vano__marca {
    position: relative;
}

/* --- La entrada, una sola vez por lámina ---------------------------------
   Se dispara con la clase `pinta`, que pone el JS. El orden cuenta una cosa:
   primero el vano (las líneas), después lo que se dice dentro. */
@media (prefers-reduced-motion: no-preference) {
    .vano__hoja.pinta .vano__linea {
        animation: trazar 760ms var(--ambas) forwards;
    }

    .vano__hoja.pinta .vano__linea:nth-child(2) { animation-delay: 90ms; }
    .vano__hoja.pinta .vano__linea--v            { animation-delay: 180ms; }

    .vano__hoja.pinta .vano__nodo {
        animation: nodo 420ms var(--salida) forwards;
    }

    .vano__hoja.pinta .vano__nodo:nth-child(1) { animation-delay: 640ms; }
    .vano__hoja.pinta .vano__nodo:nth-child(2) { animation-delay: 720ms; }

    .vano__hoja.pinta .vano__texto > * {
        animation: asomar 620ms var(--salida) backwards;
    }

    .vano__hoja.pinta .marca-hero    { animation-delay: 160ms; }
    .vano__hoja.pinta h1,
    .vano__hoja.pinta h2             { animation-delay: 240ms; }
    .vano__hoja.pinta .hero-entrada  { animation-delay: 330ms; }
    .vano__hoja.pinta .hero-botones  { animation-delay: 410ms; }
    .vano__hoja.pinta .cota          { animation-delay: 520ms; }
}

@keyframes trazar {
    to { stroke-dashoffset: 0; }
}

@keyframes nodo {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
}

/* Asoma desde abajo, poco: 12 px. Lo suficiente para que se note que llegó,
   no tanto como para que se vea "animado". */
@keyframes asomar {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to   { opacity: 1; transform: none; }
}

/* --- Quien pidió menos movimiento ---------------------------------------
   No desaparece el slider: desaparece el movimiento. Las líneas quedan
   trazadas, los nodos visibles y el cambio de lámina es instantáneo. */
@media (prefers-reduced-motion: reduce) {
    .vano__hoja {
        transition: none;
    }

    .vano__linea {
        stroke-dashoffset: 0;
    }

    .vano__nodo {
        opacity: 1;
    }
}

/* --- Pantallas chicas ---------------------------------------------------- */
@media (max-width: 991px) {
    .vano__hoja {
        min-height: 0;
        padding: 92px 0 88px;
    }

    .vano__barra {
        bottom: 24px;
    }

    /* En un teléfono la vertical cae sobre el texto y los nodos con ella. */
    .vano__linea--v,
    .vano__nodos {
        display: none;
    }
}