/* =============================================
   Hero Slider - Valento (Swiper.js)
   Portada mayorista: fade + Ken Burns, overlay
   cálido, animaciones de entrada y paginación
   con progreso de autoplay.
   ============================================= */

.vl-hero {
    --vl-black: #16130F;
    --vl-gold: #C4A35A;
    --vl-gold-light: #e7b669;
    --vl-white: #fff;
    --vl-font: 'Montserrat', sans-serif;
    --vl-ease: cubic-bezier(.22, .61, .36, 1);
    --vl-h: clamp(540px, 82vh, 780px);

    position: relative;
    background: var(--vl-black);
    overflow: hidden;
}

/* min-height: red de seguridad si un Safari antiguo no entiende clamp()/svh
   (la variable queda inválida y el slider se quedaría sin alto) */
.vl-hero__swiper { height: var(--vl-h); min-height: 520px; }

/* Sin JS (o antes de iniciar Swiper) solo se ve el primer slide.
   Se libera con .swiper-initialized, que Swiper pone ANTES de medir los slides.
   Antes dependía de .is-ready (que llega después): Swiper medía los slides 2 y 3
   ocultos con ancho 0, se bloqueaba o desordenaba el loop, y en iPhone se saltaba
   el 2.º slide y el 3.º salía sin texto. */
.vl-hero:not(.is-fallback) .vl-hero__swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) { display: none; }

.vl-hero__slide {
    position: relative;
    overflow: hidden;
    background: var(--vl-black);
}

/* ── Imagen + Ken Burns ─────────────────── */
.vl-hero__img {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.04);
    /* Sin will-change: en iOS, 3 capas grandes permanentes hacían que WebKit dejara slides sin pintar */
}
.vl-hero.is-ready .swiper-slide-active .vl-hero__img {
    animation: vl-kenburns 7.5s linear forwards;
}
/* iPhone/iPad: sin zoom lento (menos carga de composición en WebKit) */
.vl-hero.is-ios .vl-hero__img,
.vl-hero.is-ios.is-ready .swiper-slide-active .vl-hero__img {
    animation: none;
    transform: none;
}
@keyframes vl-kenburns {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to   { transform: scale(1.16) translate3d(-1.5%, -1%, 0); }
}

/* ── Overlay: degradado negro cálido ─────── */
.vl-hero__overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(22,19,15,.92) 0%, rgba(22,19,15,.72) 38%, rgba(22,19,15,.18) 75%, rgba(22,19,15,.05) 100%),
        linear-gradient(0deg, rgba(22,19,15,.55) 0%, rgba(22,19,15,0) 35%);
}

/* ── Contenido ───────────────────────────── */
.vl-hero__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 110px 40px;
}

.vl-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    font-family: var(--vl-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--vl-gold-light);
}
.vl-hero__eyebrow::before {
    content: "";
    width: 38px;
    height: 1px;
    background: currentColor;
}

.vl-hero__title {
    max-width: 13ch;
    margin: 0 0 22px;
    font-family: var(--vl-font);
    font-size: clamp(34px, 4.6vw, 66px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.5px;
    color: var(--vl-white);
    text-transform: none;
}

.vl-hero__text {
    max-width: 480px;
    margin: 0 0 36px;
    font-family: var(--vl-font);
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.65;
    color: rgba(255,255,255,.82);
}

/* ── Botón con barrido dorado ────────────── */
.vl-hero__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 17px 34px;
    overflow: hidden;
    isolation: isolate;
    font-family: var(--vl-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--vl-black);
    background: var(--vl-gold);
    border: 1px solid var(--vl-gold);
    border-radius: 2px;
    text-decoration: none;
    transition: color .4s var(--vl-ease), border-color .4s var(--vl-ease), box-shadow .4s var(--vl-ease);
}
.vl-hero__btn::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    z-index: -1;
    background: var(--vl-black);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--vl-ease);
}
.vl-hero__btn i { transition: transform .35s var(--vl-ease); }
.vl-hero__btn:hover,
.vl-hero__btn:focus-visible {
    color: var(--vl-gold-light);
    border-color: var(--vl-gold-light);
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(196,163,90,.25);
}
.vl-hero__btn:hover::before,
.vl-hero__btn:focus-visible::before {
    transform: scaleX(1);
    transform-origin: left;
}
.vl-hero__btn:hover i,
.vl-hero__btn:focus-visible i { transform: translateX(5px); }
.vl-hero__btn:focus-visible { outline: 2px solid var(--vl-gold-light); outline-offset: 4px; }

/* ── Animaciones de entrada ──────────────── */
/* El texto es visible por defecto; la entrada es una animación (@keyframes) que
   se reinicia cada vez que el slide pasa a activo. Antes eran transiciones que
   partían de opacity:0 y en iPhone (WebKit) a veces no corrían: el texto quedaba
   invisible a partir del segundo slide. */
@keyframes vl-text-in {
    from { opacity: 0; transform: translate3d(0, 28px, 0); }
    to   { opacity: 1; transform: none; }
}
.vl-hero.is-ready .swiper-slide-active .vl-hero__eyebrow,
.vl-hero.is-ready .swiper-slide-active .vl-hero__title,
.vl-hero.is-ready .swiper-slide-active .vl-hero__text,
.vl-hero.is-ready .swiper-slide-active .vl-hero__btn {
    animation: vl-text-in .8s var(--vl-ease) both;
}
.vl-hero.is-ready .swiper-slide-active .vl-hero__eyebrow { animation-delay: .35s; }
.vl-hero.is-ready .swiper-slide-active .vl-hero__title   { animation-delay: .5s; }
.vl-hero.is-ready .swiper-slide-active .vl-hero__text    { animation-delay: .68s; }
.vl-hero.is-ready .swiper-slide-active .vl-hero__btn     { animation-delay: .85s; }

/* ── Flechas laterales ───────────────────── */
.vl-hero__nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 56px;
    height: 56px;
    margin-top: -28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 22px;
    color: var(--vl-white);
    background: rgba(22,19,15,.35);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.vl-hero__nav--prev { left: 32px; }
.vl-hero__nav--next { right: 32px; }
.vl-hero__nav:hover,
.vl-hero__nav:focus-visible {
    color: var(--vl-black);
    background: var(--vl-gold);
    border-color: var(--vl-gold);
    outline: none;
}
.vl-hero__nav--prev:hover { transform: translateX(-3px); }
.vl-hero__nav--next:hover { transform: translateX(3px); }

/* ── Dots con progreso de autoplay ───────── */
.vl-hero__pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.vl-hero__pagination .swiper-pagination-bullet {
    position: relative;
    width: 34px;
    height: 3px;
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
    background: rgba(255,255,255,.35);
    border: 0;
    border-radius: 2px;
    opacity: 1;
    cursor: pointer;
    transition: width .4s var(--vl-ease), background .3s;
}
/* Área de clic más cómoda sin agrandar el trazo */
.vl-hero__pagination .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    top: -10px; right: 0; bottom: -10px; left: 0;
    inset: -10px 0;
}
.vl-hero__pagination .swiper-pagination-bullet:hover { background: rgba(255,255,255,.6); }
.vl-hero__pagination .swiper-pagination-bullet-active { width: 64px; }
.vl-hero__pagination .swiper-pagination-bullet-active::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    background: var(--vl-gold);
    transform-origin: left;
    transform: scaleX(var(--vl-progress, 0));
}
.vl-hero__pagination .swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--vl-gold-light);
    outline-offset: 4px;
}

/* Contador 01 / 03 */
.vl-hero__counter {
    position: absolute;
    right: 40px;
    bottom: 26px;
    z-index: 5;
    font-family: var(--vl-font);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    color: rgba(255,255,255,.6);
}
.vl-hero__counter strong { color: var(--vl-gold-light); font-weight: 600; }

/* ── Responsive ──────────────────────────── */
@media (max-width: 1199px) {
    .vl-hero__content { padding: 0 100px 40px; }
}

@media (max-width: 991px) {
    .vl-hero { --vl-h: clamp(520px, 72vh, 680px); }
    .vl-hero__content { padding: 0 90px 50px; }
    .vl-hero__nav { width: 46px; height: 46px; margin-top: -23px; font-size: 18px; }
    .vl-hero__nav--prev { left: 20px; }
    .vl-hero__nav--next { right: 20px; }
}

@media (max-width: 767px) {
    /* vh primero: Safari < 15.4 no entiende svh y dejaría el slider sin alto */
    .vl-hero { --vl-h: clamp(520px, 80vh, 640px); }
    @supports (height: 100svh) {
        .vl-hero { --vl-h: clamp(520px, 80svh, 640px); }
    }
    .vl-hero__overlay {
        background: linear-gradient(0deg, rgba(22,19,15,.95) 0%, rgba(22,19,15,.78) 45%, rgba(22,19,15,.25) 100%);
    }
    .vl-hero__content {
        justify-content: flex-end;
        padding: 0 22px 92px;
    }
    .vl-hero__eyebrow { font-size: 11px; letter-spacing: 3px; margin-bottom: 16px; }
    .vl-hero__eyebrow::before { width: 26px; }
    .vl-hero__title { max-width: none; margin-bottom: 16px; }
    .vl-hero__text { margin-bottom: 26px; }
    .vl-hero__btn { padding: 15px 26px; font-size: 12px; }
    /* En móvil se navega deslizando; las flechas quitan espacio al texto */
    .vl-hero__nav { display: none; }
    /* Dots a la derecha: la izquierda la ocupa el botón flotante de WhatsApp */
    .vl-hero__pagination { justify-content: flex-end; left: auto; right: 22px; bottom: 40px; }
    .vl-hero__counter { display: none; }
}

/* ── Carrusel de respaldo (sin Swiper) ───── */
/* hero-slider.js lo activa si Swiper no carga o falla (p. ej. Safari antiguo) */
.vl-hero.is-fallback .swiper-wrapper {
    position: relative;
    height: 100%;
}
.vl-hero.is-fallback .swiper-slide {
    display: block !important;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0;
    -webkit-transition: opacity 1.1s ease;
    transition: opacity 1.1s ease;
}
.vl-hero.is-fallback .swiper-slide.swiper-slide-active {
    opacity: 1;
    z-index: 1;
}
.vl-hero.is-fallback .swiper-pagination-bullet-active::before {
    -webkit-transition: -webkit-transform 5s linear;
    transition: transform 5s linear;
}
.vl-hero.is-fallback .vl-hero__pagination.is-resetting .swiper-pagination-bullet-active::before {
    -webkit-transition: none;
    transition: none;
}

/* ── Movimiento reducido ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    .vl-hero.is-ready .swiper-slide-active .vl-hero__img { animation: none; }
    .vl-hero.is-ready .swiper-slide-active .vl-hero__eyebrow,
    .vl-hero.is-ready .swiper-slide-active .vl-hero__title,
    .vl-hero.is-ready .swiper-slide-active .vl-hero__text,
    .vl-hero.is-ready .swiper-slide-active .vl-hero__btn { animation: none; }
}