/* Archivo: hero.css
   Funcion: Banner/slider de la portada. Vive aparte del resto del CSS a proposito, para
   poder ajustar tamaño, velocidad y aspecto del banner sin tocar el resto del sitio.

   Para retocar el banner, normalmente basta con cambiar las variables de este bloque.
   El tiempo que dura cada slide en pantalla NO se toca aqui: se ajusta con el atributo
   data-interval (en milisegundos) del <section data-hero> en public/index.php. */
:root {
    --hero-height: clamp(440px, 60vh, 620px);   /* alto del banner (no crece con el texto) */
    --hero-image-size: clamp(220px, 22vw, 340px); /* tamaño de la foto de producto */
    --hero-transition: 900ms;                    /* duracion del cruce entre slides */
    --hero-panel-radius: 28px;
}

.hero {
    position: relative;
    overflow: hidden;
    height: var(--hero-height);
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}

/* Formas decorativas de fondo, fijas: no rotan con los slides, dan profundidad. */
.hero::before,
.hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero::before {
    width: 460px;
    height: 460px;
    background: rgba(255, 255, 255, 0.06);
    top: -160px;
    right: -120px;
}

.hero::after {
    width: 340px;
    height: 340px;
    background: rgba(255, 255, 255, 0.05);
    bottom: -180px;
    left: -90px;
}

/* Cada slide ocupa todo el banner y se superpone a los demas: el cruce entre imagenes
   es un fundido de opacidad simultaneo (uno sale, el otro entra a la vez), no un corte. */
.hero-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--hero-transition) var(--ease-smooth), visibility 0s linear var(--hero-transition);
}

.hero-slide.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--hero-transition) var(--ease-smooth);
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    width: 100%;
}

.hero-media {
    position: relative;
    flex: 0 0 auto;
    width: var(--hero-image-size);
    height: var(--hero-image-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Panel tipo "cristal" detras de la foto: le da marco y hace que el producto
   destaque sobre el degradado, en vez de flotar como una pegatina suelta. */
.hero-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--hero-panel-radius);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
}

.hero-media img {
    position: relative;
    z-index: 1;
    width: 78%;
    height: 78%;
    object-fit: contain;
    border-radius: 18px;
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.3));
}

.hero-slide.is-active .hero-media img {
    animation: hero-image-pop var(--hero-transition) var(--ease-smooth) both;
}

@keyframes hero-image-pop {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.hero-content {
    flex: 1 1 420px;
    max-width: 480px;
    color: var(--color-white);
    text-align: left;
}

.hero-content .eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-weight: 700;
}

.hero-content h1 {
    color: var(--color-white);
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    line-height: 1.15;
    margin-bottom: 16px;
}

.hero-content p {
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 26px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-dots {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 22px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.hero-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background var(--transition), transform var(--transition);
}

.hero-dot.is-active {
    background: var(--color-white);
    transform: scale(1.15);
}

/* ---------- Movil / tablet: apila imagen y texto, banner con alto libre ---------- */
@media (max-width: 860px) {
    .hero {
        height: auto;
        min-height: 0;
        padding: 44px 0 76px;
    }

    .hero-slide {
        position: relative;
        inset: auto;
        opacity: 1;
        visibility: visible;
    }

    .hero-slide:not(.is-active) {
        display: none;
    }

    .hero-slide.is-active {
        animation: hero-fade-in-mobile var(--hero-transition) var(--ease-smooth);
    }

    @keyframes hero-fade-in-mobile {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .hero-inner {
        flex-direction: column;
        text-align: center;
        gap: 28px;
    }

    :root {
        --hero-image-size: clamp(250px, 68vw, 320px);
    }

    .hero-media img {
        width: 84%;
        height: 84%;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
    }

    .hero-actions {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
}