/* ============================================================ */
/* EDITORIAL HISPANITAS × JUAN VIDAL                             */
/* ============================================================ */
/* Ajustes generales */
.jv {
    --jv-font: "Satoshi", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --jv-negro: #000;
    --jv-blanco: #fff;
    /* Proporciones (ancho / alto) con las que se exportan las imágenes.
       Los huecos toman SIEMPRE esta proporción y las imágenes se muestran
       completas, sin recortes, en cualquier resolución. */
    --jv-trio-ratio: 0.6667; /* tres imágenes, escritorio y tablet horizontal: 2:3 */
    --jv-trio-ratio-m: 0.5625; /* tres imágenes, móvil y tablet vertical: 9:16 */
    --jv-video-ratio: 1.7778; /* vídeo horizontal: 16:9 */
    --jv-video-v-ratio: 0.5625; /* vídeo vertical: 9:16 */
    /* Distancia a la que se quedan fijas las imágenes (alto de la cabecera
       si tapa el contenido; 0 si no) */
    --jv-sticky-top: 0px;
    font-family: var(--jv-font);
    color: #111;
}

    .jv *,
    .jv *::before,
    .jv *::after {
        box-sizing: border-box;
    }

    .jv picture {
        display: block;
    }

    .jv img {
        display: block;
        max-width: 100%;
    }

/* Solo para lectores de pantalla / SEO */
.jv-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================ */
/* BOTÓN "VER PRODUCTOS" (abre el cajón Comprar el look)         */
/* ============================================================ */
.jv-btn-look {
    position: absolute;
    right: 15px;
    bottom: 35px;
    z-index: 2;
    height: 30px;
    padding: 0 15px;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.8);
    color: #000;
    font-family: var(--jv-font);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 30px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .jv-btn-look:hover {
        background: rgba(255, 255, 255, 0.95);
    }

/* Imagen con botón "Ver productos": se puede pulsar entera (lo gestiona el JS) */
.jv-con-look {
    cursor: pointer;
}

/* ============================================================ */
/* 1. HERO                                                       */
/* ============================================================ */
/* El alto del hero lo marca su imagen (alto automático): se ve completa
   y en su proporción. Los SVG van superpuestos. */
.jv-hero {
    position: relative;
    overflow: hidden;
    background: var(--jv-negro);
    color: var(--jv-blanco);
}

    .jv-hero img {
        width: 100%;
        height: auto;
    }

.jv-hero-logo {
    --jv-hero-logo-margen: 31px; /* distancia a los bordes */
    position: absolute;
    left: var(--jv-hero-logo-margen);
    right: auto;
    top: auto;
    bottom: var(--jv-hero-logo-margen);
    z-index: 1;
    transform: none;
    width: 62vw;
    color: var(--jv-blanco);
    line-height: 0;
}

.jv-hero-firma {
    position: absolute;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    color: var(--jv-blanco);
    line-height: 0;
}

    .jv-hero-logo svg,
    .jv-hero-firma svg {
        display: block;
        width: 100%;
        height: auto;
    }

.jv-hero-logo {
    width: min(30vw, 440px);
}

/* designed by JUAN VIDAL manufactured by HISPANITAS: abajo */
.jv-hero-firma {
    bottom: 7%;
    width: min(28vw, 1040px);
}

/* ============================================================ */
/* 2 y 8. TEXTO SOBRE FONDO NEGRO                                */
/* ============================================================ */
.jv-texto {
    background: var(--jv-negro);
    color: var(--jv-blanco);
    text-align: center;
    padding: 180px 24px;
}

.jv-texto-inner {
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.45;
}

    .jv-texto-inner p {
        margin: 0 0 1.4em;
    }

        .jv-texto-inner p:last-child {
            margin-bottom: 0;
        }

/* ============================================================ */
/* 3 y 5. VÍDEO CON PREVISUALIZACIÓN EN BUCLE                    */
/* ============================================================ */
/* El vídeo ocupa siempre todo el ancho y su alto lo marca su proporción
   (sin recortes ni franjas). */
.jv-video {
    --jv-r: var(--jv-video-ratio);
    position: relative;
    width: 100%;
    aspect-ratio: var(--jv-r);
    overflow: hidden;
    background: var(--jv-negro);
}

/* Móvil (EsMovil == 1): el primer vídeo usa la versión vertical */
.jv-video--movil {
    --jv-r: var(--jv-video-v-ratio);
}

/* Vídeo vertical (bloque 5) */
.jv-video--v {
    --jv-r: var(--jv-video-v-ratio);
}

/* La parcial _HlsVideoControles reserva su proporción con padding-top;
   aquí la da el bloque, así que el vídeo lo llena entero. */
.jv-video .video-card {
    position: absolute;
    inset: 0;
}

.jv-video .video-wrapper,
.jv-video .video-wrapper-v {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding-top: 0;
}

    /* contain: el vídeo se ve completo aunque su proporción no coincidiera
       exactamente con la del bloque */
    .jv-video .video-wrapper video,
    .jv-video .video-wrapper-v video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

/* Botón "Reproducir vídeo" centrado; desaparece al reproducir */
.jv-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    height: 30px;
    padding: 0 15px;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.8);
    color: #000;
    font-family: var(--jv-font);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 30px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.25s ease, background-color 0.2s ease;
}

    .jv-video-play:hover {
        background: rgba(255, 255, 255, 0.95);
    }

.jv-video.is-reproduciendo .jv-video-play {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================ */
/* 6 y 9. IMAGEN CON "COMPRAR EL LOOK"                           */
/* ============================================================ */
/* La imagen se ve completa (alto automático según su proporción) */
.jv-foto {
    position: relative;
}

    .jv-foto img {
        width: 100%;
        height: auto;
    }

/* ============================================================ */
/* 4, 7 y 10. TRES IMÁGENES                                      */
/* ============================================================ */
/* Las imágenes NUNCA se recortan: cada hueco tiene la proporción exacta
   de su imagen (--jv-trio-ratio / --jv-trio-ratio-m) y ocupa todo el ancho
   disponible. Se bloquean cuando su borde INFERIOR llega a la parte de
   abajo de la pantalla (como en Mango): si la imagen es más baja que la
   pantalla, encima se sigue viendo la página; si es más alta, la parte que
   no cabe queda por arriba, fuera de la vista (no recortada). */
.jv-trio {
    position: relative;
    container-type: inline-size; /* 100cqw = ancho de la sección */
}

.jv-trio-pista {
    position: relative;
}

.jv-trio-item {
    position: relative;
    overflow: hidden;
}

    .jv-trio-item picture {
        width: 100%;
        height: 100%;
    }

    /* contain: red de seguridad por si una foto no tuviera exactamente la
       proporción indicada (se vería entera, nunca recortada) */
    .jv-trio-item img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: contain;
    }

/* ---------- MÓVIL Y TABLET VERTICAL: la primera fija, las demás deslizan
   encima (como en París). Cada imagen ocupa todo el ancho con su alto
   proporcional. El JS añade marcas de scroll-snap para que cada gesto
   termine con una imagen completa. ---------- */
@media (max-width: 767px), (max-width: 1199px) and (orientation: portrait) {
    /* alto = ancho / proporción: siempre a todo el ancho y en su
       proporción. Si es más alta que la pantalla, al bloquearse por su
       borde inferior la parte que no cabe queda por arriba (no recortada). */
    .jv-trio-pista {
        --jv-trio-h: calc(100cqw / var(--jv-trio-ratio-m));
    }

    /* top = pantalla visible − alto de la imagen → se fija con su borde
       inferior en la parte de abajo de la pantalla. svh = alto con la barra
       del navegador visible, así el botón nunca queda debajo de ella. */
    .jv-trio-item {
        position: sticky;
        top: calc(100vh - var(--jv-trio-h));
        top: calc(100svh - var(--jv-trio-h));
        height: var(--jv-trio-h);
    }

    .jv-trio-snap {
        position: absolute;
        left: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    html.jv-snap {
        scroll-snap-type: y mandatory;
    }
}

/* ---------- ESCRITORIO Y TABLET HORIZONTAL: escalera de sticky ----------
   Tres columnas una al lado de otra, escalonadas en vertical (0, H, 2H),
   todas sticky dentro de .jv-trio-pista, que mide 3H: la primera sube y se
   queda fija cuando su borde inferior llega abajo; entonces empieza a subir
   la segunda, que se queda a su lado; la tercera igual, y en ese momento se
   llega al final de la pista y las tres se desbloquean juntas. H = ancho de columna / proporción de la imagen.
   Todo es CSS: el scroll es nativo y fluido. */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1200px) {
    .jv-trio-pista {
        --jv-trio-h: calc(100cqw / 3 / var(--jv-trio-ratio));
        display: flex;
        align-items: flex-start;
        height: calc(var(--jv-trio-h) * 3);
    }

    /* se fija con su borde inferior en la parte de abajo de la pantalla */
    .jv-trio-item {
        flex: 0 0 calc(100% / 3);
        height: var(--jv-trio-h);
        position: sticky;
        top: calc(100vh - var(--jv-trio-h));
        top: calc(100svh - var(--jv-trio-h));
    }

        .jv-trio-item:nth-child(2) {
            margin-top: var(--jv-trio-h);
        }

        .jv-trio-item:nth-child(3) {
            margin-top: calc(var(--jv-trio-h) * 2);
        }

    /* Orden inverso (jv-trio--inverso), solo en escritorio y tablet
       horizontal: aparece y se fija primero la imagen de la derecha, luego
       la del centro y por último la de la izquierda. En móvil y tablet
       vertical el orden es el normal (1, 2, 3). */
    .jv-trio--inverso .jv-trio-item:nth-child(1) {
        margin-top: calc(var(--jv-trio-h) * 2);
    }

    .jv-trio--inverso .jv-trio-item:nth-child(2) {
        margin-top: var(--jv-trio-h);
    }

    .jv-trio--inverso .jv-trio-item:nth-child(3) {
        margin-top: 0;
    }
}

@media (min-width: 768px) {
    .jv-texto {
        padding: 120px 24px;
    }

    .jv-texto-inner {
        font-size: 13px;
        line-height: 1.32;
        max-width: 493px;
    }

    .jv-hero-logo {
        --jv-hero-logo-margen: 40px;
        left: auto;
        right: var(--jv-hero-logo-margen);
        width: min(11vw, 440px);
    }

    .jv-grafica-svg {
        --jv-grafica-svg-ancho: 0.3;
    }
}

/* ============================================================ */
/* 11. IMAGEN CON GRÁFICA                                         */
/* ============================================================ */
/* Todo es CSS (sticky), sin JS:
   · La imagen ocupa todo el ancho con su proporción (sin recortes) y se
     bloquea cuando su borde inferior llega abajo de la pantalla.
   · La gráfica (SVG) está justo debajo de la imagen dentro de la pista:
     mientras la imagen está bloqueada, sube con el scroll por encima de
     ella, centrada en horizontal y al 50 % del ancho.
   · La pista mide H + V/2 + S/2 (H = alto de la imagen, V = parte de la
     imagen que se ve con ella bloqueada = el menor entre H y la pantalla,
     S = alto de la gráfica): justo cuando el centro de la gráfica llega al
     centro de la parte visible de la imagen, se acaba la pista y las dos se
     desbloquean juntas. Si la imagen cabe entera en la pantalla, ese punto
     es el centro exacto de la imagen; si es más alta, el de la pantalla.
   Ajustes:
     --jv-grafica-ratio     proporción (ancho/alto) de la imagen
     --jv-grafica-svg-ancho ancho de la gráfica respecto a la imagen
     --jv-grafica-svg-alto  alto máximo de la gráfica respecto a la pantalla
   El alto real de la gráfica (S) lo mide el JS y lo pasa en --jv-g-s, así
   el desbloqueo coincide exactamente con su centro, sea cual sea el SVG. */
.jv-grafica {
    --jv-grafica-ratio: 1.25; /* 5:4, casi cuadrada */
    --jv-grafica-svg-ancho: 0.4; /* 50 % del ancho de la imagen… */
    --jv-grafica-svg-alto: 70svh; /* …sin pasar del 70 % del alto de pantalla */
    position: relative;
    container-type: inline-size; /* 100cqw = ancho de la sección */
}

.jv-grafica-pista {
    --jv-g-h: calc(100cqw / var(--jv-grafica-ratio));
    --jv-g-s: 0px; /* alto real de la gráfica: lo calcula el JS */
    --jv-g-v: min(var(--jv-g-h), 100vh);
    --jv-g-v: min(var(--jv-g-h), 100svh);
    position: relative;
    height: calc(var(--jv-g-h) + var(--jv-g-v) / 2 + var(--jv-g-s) / 2);
}

.jv-grafica-img {
    position: sticky;
    top: calc(100vh - var(--jv-g-h));
    top: calc(100svh - var(--jv-g-h)); /* se fija con su borde inferior abajo */
    height: var(--jv-g-h);
    overflow: hidden;
}

    .jv-grafica-img picture {
        width: 100%;
        height: 100%;
    }

    .jv-grafica-img img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: contain; /* la proporción del hueco es la de la imagen: no recorta */
    }

.jv-grafica-svg {
    position: absolute;
    top: var(--jv-g-h); /* empieza justo debajo de la imagen */
    left: 50%;
    z-index: 2;
    width: calc(var(--jv-grafica-svg-ancho) * 100%);
    transform: translateX(-50%);
    color: #000; /* SVG con fill="currentColor" */
    line-height: 0;
    pointer-events: none;
}

    /* Si a ese ancho la gráfica fuera más alta que el límite, se reduce
       (sin deformarse) para verse entera, centrada en su hueco. */
    .jv-grafica-svg svg {
        display: block;
        width: 100%;
        height: auto;
        max-height: var(--jv-grafica-svg-alto);
    }

@media (max-width: 767px) {
    .jv-grafica {
        --jv-grafica-ratio: 0.8; /* móvil: 4:5, casi cuadrada en vertical */
    }
}

/* ---------- Ajustes de móvil del resto de bloques ---------- */
@media (max-width: 767px) {
    .jv-hero-firma {
        bottom: 6%;
        width: 84vw;
    }

    .jv-texto {
        padding: 64px 49px;
    }

    .jv-texto-inner {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jv-video-play,
    .jv-trio-item .jv-btn-look {
        transition: none;
    }
}

@media (min-width: 1280px) {
    .jv-texto {
        padding: 170px 24px;
    }

    .jv-btn-look {
        font-size: 11px;
        bottom: 15px;
        font-weight: bold;
    }

    .jv-grafica-svg {
        --jv-grafica-svg-ancho: 0.2;
    }
}

@media (min-width: 1500px) {
    .jv-hero-logo {
        --jv-hero-logo-margen: 55px;
        width: min(9.8vw, 440px);
    }

    .jv-texto-inner {
        font-size: 13px;
        line-height: 1.32;
        max-width: 560px;
    }
}

@media (min-width: 1920px) {
    .jv-texto {
        padding: 190px 24px;
    }

    .jv-texto-inner {
        font-size: 15px;
        line-height: 1.2;
    }
}
/* Imagen vertical con gráfica:
   · móvil: 9:16 (versión _M)
   · tablet y escritorio: 2:3, la proporción real de las _D (1920 × 2873) */
.jv-grafica.jv-grafica--vertical {
    --jv-grafica-ratio: 0.5625;
}

@media (min-width: 768px) {
    .jv-grafica.jv-grafica--vertical {
        --jv-grafica-ratio: 0.6683; /* 1920 / 2873 */
    }
}