/* hc_home — slider del hero (2026): vídeo de fondo con glass (frost blanco) +
   tarjetas flotantes con la imagen ENTERA (sin recorte) + flechas glassmorphism +
   transición fluida y arrastre. Alto fijo → sin CLS. */

.home-hero--slider {
    --hh: 620px;                          /* alto fijo del hero (desktop) — solo con slides */
    --cardh: calc(var(--hh) - 80px);      /* alto de la tarjeta = hero − 80px → 40px de margen flotante arriba/abajo; al subir el hero, las tarjetas crecen solas */
    position: relative;
    width: 100%;
    height: var(--hh);
    overflow: hidden;
    background: #fff;       /* fondo blanco base (bajo el vídeo) */
}

/* ── Fondo: vídeo + capa glass (frost blanco) ── */
.home-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.home-hero-bgvideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-hero-glass {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.32);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    backdrop-filter: blur(8px) saturate(1.1);
}

/* ── Escenario de tarjetas ── */
.home-hero-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    outline: none;
}

.home-hero-cards {
    display: flex;
    height: 100%;
    will-change: transform;
    /* La transición de "snap" la activa/desactiva el JS (drag = sin transición). */
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    touch-action: pan-y;
    cursor: grab;
}

.home-hero-cards.is-dragging {
    cursor: grabbing;
    transition: none;
}

.home-hero-card {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    align-items: center;     /* centra verticalmente → margen arriba/abajo (flotante) */
    justify-content: center;
    padding: 0 84px;         /* hueco lateral para las flechas */
    box-sizing: border-box;
}

/* Caja contenedora definida (rellena la tarjeta) para que la imagen se contenga
   manteniendo SIEMPRE su proporción. */
.home-hero-cardlink,
.home-hero-cardinner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Imagen ENTERA, proporción SIEMPRE intacta (contain): se limita por alto (--cardh)
   y por ancho (100% de la tarjeta). En desktop manda el alto → todas al mismo alto;
   en móvil manda el ancho → se reduce manteniendo la proporción (nunca deforma). */
.home-hero-cardmedia {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--cardh);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    background: #fff;
    -webkit-user-drag: none;
    user-select: none;
}

/* Bloques de texto (slides de vídeo / imagen de fondo) sobre la tarjeta. */
.home-hero-cardinner > .home-hero-txt,
.home-hero-cardinner > .home-hero-price-box {
    position: absolute;
    z-index: 2;
}

.home-hero-cardinner > .home-hero-txt {
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
}

.home-hero-cardinner > .home-hero-price-box {
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
}

/* ── Flechas glassmorphism (el hero original las ocultaba con !important) ── */
.home-hero--slider .home-hero-arrow {
    display: flex !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
    color: #1d3557;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.home-hero--slider .home-hero-arrow:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%) scale(1.07);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.24);
}

.home-hero--slider .home-hero-arrow:active {
    transform: translateY(-50%) scale(0.97);
}

.home-hero--slider .home-hero-arrow--prev {
    left: 26px;
}

.home-hero--slider .home-hero-arrow--next {
    right: 26px;
}

@media (max-width: 767px) {
    .home-hero--slider {
        --hh: 400px;       /* --cardh se calcula solo (= --hh − 80px) */
    }

    /* Tarjeta a casi todo el ancho de la pantalla; hueco inferior reservado para
       las flechas (que pasan a estar DEBAJO). La proporción se mantiene (contain). */
    .home-hero-card {
        padding: 12px 8px 58px;
    }

    .home-hero-cardmedia {
        border-radius: 12px;
    }

    /* Flechas DEBAJO de la tarjeta, en fila centrada. */
    .home-hero--slider .home-hero-arrow {
        width: 42px;
        height: 42px;
        top: auto;
        bottom: 14px;
        transform: none;
    }

    .home-hero--slider .home-hero-arrow--prev {
        left: calc(50% - 50px);
        right: auto;
    }

    .home-hero--slider .home-hero-arrow--next {
        right: calc(50% - 50px);
        left: auto;
    }

    .home-hero--slider .home-hero-arrow:hover {
        transform: scale(1.06);
    }

    .home-hero--slider .home-hero-arrow:active {
        transform: scale(0.94);
    }
}