/**
 * Widget Hero — réplica de assets/css/hero-slider.css del prototipo
 * original. Antes ese archivo redefinía la paleta completa como variables
 * locales (--brand-marca, --brand-botones, etc.) para no depender de
 * ningún :root global — acá SÍ hay un :root de marca unificado (el tema
 * "Senseben"), así que este archivo referencia esas variables
 * directamente en vez de repetirlas.
 */
.hero-banner {
    color-scheme: light;

    --background: var(--bg);
    --foreground: var(--fg);
    --muted-foreground: var(--fg-muted);
    --primary: var(--color-primary);
    --primary-foreground: var(--bg);
    --secondary: color-mix(in srgb, var(--color-rose) 35%, white);
    --ring: var(--color-marca);

    --hero-line: color-mix(in srgb, var(--color-rose) 40%, white);
    --hero-accent-text: var(--color-marca);
    --accent: var(--secondary);

    --radius-full: 999px;
    --hero-h: 50vh;
    --hero-duration: 6000ms;
    --hero-ease: cubic-bezier(0.22, 0.61, 0.24, 1);
    --hero-ease-ui: ease-out;
    --hero-duration-ui: 160ms;
    --hero-duration-slide: 800ms;
    --hero-duration-copy: 800ms;

    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    margin: 0;
    font-family: var(--font-sans);
    background: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    min-height: var(--hero-h);
}
@media (max-width: 1024px) { .hero-banner { --hero-h: 46vh; } }
@media (max-width: 640px)  { .hero-banner { --hero-h: 43vh; } }

.hero-banner .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Barra de progreso ---------- */
.hero__progress { position: absolute; inset-inline: 0; top: 0; z-index: 30; height: 1px; background: var(--hero-line); }
.hero__progress-bar { height: 1px; width: 0%; background: var(--primary); }

/* ---------- Fondo ---------- */
.hero__canvas {
    position: absolute; inset: 0; z-index: -1;
    background-image: url("../img/hero-fondo-movil.webp");
    background-size: cover; background-position: center; background-repeat: no-repeat;
    animation: hero-canvas-fade 8s ease-in-out infinite;
}
@media (min-width: 768px) and (max-width: 1023px) {
    .hero__canvas { background-image: url("../img/hero-fondo-tablet.webp"); }
}
@media (min-width: 1024px) {
    .hero__canvas { background-image: url("../img/hero-fondo-escritorio.webp"); }
}
@keyframes hero-canvas-fade { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.05; } }

.hero__canvas-gradient {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--color-marca) 10%, transparent) 0%,
        color-mix(in srgb, var(--color-rose) 6%, transparent) 55%,
        color-mix(in srgb, var(--bg) 20%, transparent) 100%);
}

/* ---------- Grid ---------- */
.hero__grid {
    position: relative; z-index: 10;
    margin: 0 auto; display: grid; width: 100%; max-width: 1240px;
    grid-template-columns: 1fr; align-items: center; gap: 1.75rem;
    padding: 3.5rem 1.5rem;
    grid-template-areas: "copy" "product";
}
.hero__copy-stack { grid-area: copy; display: flex; flex-direction: column; }
.hero__product { grid-area: product; }

@media (max-width: 1023px) {
    .hero__copy-stack { display: contents; }
    .hero__copy-top { grid-area: top; }
    .hero__copy-bottom { grid-area: bottom; }
    .hero__actions { grid-area: actions; }
    .hero__grid { grid-template-areas: "top" "product" "bottom" "actions"; }
    .hero__eyebrow { justify-content: center; }
    .hero__actions { justify-content: center; }
}
@media (min-width: 768px) { .hero__grid { padding-inline: 2.5rem; gap: 1rem; } }
@media (min-width: 1024px) {
    .hero__grid {
        grid-template-columns: 1.05fr 0.95fr; gap: 2.75rem;
        padding-block: 0; padding-inline: 3.5rem;
        grid-template-areas: "copy product";
    }
    .hero__copy-stack { padding-block: 4.25rem; }
    .hero-banner .btn { height: 2.5rem; }
}

.hero__copy-inner {
    transition: opacity var(--hero-duration-copy) var(--hero-ease), transform var(--hero-duration-copy) var(--hero-ease), filter var(--hero-duration-copy) var(--hero-ease);
    opacity: 1; transform: translateY(0); filter: blur(0);
}
.hero__copy-inner.is-transitioning { opacity: 0; transform: translateY(-12px); filter: blur(4px); }

.hero__eyebrow {
    display: flex; align-items: center; gap: 0.75rem; margin: 0;
    font-size: 0.7rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.32em; color: var(--muted-foreground);
}
.hero__eyebrow-line { height: 1px; width: 2rem; background: var(--primary); flex-shrink: 0; }

.hero__title {
    margin: 1.25rem 0 0; max-width: 100%;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.2vw, 1.9rem);
    font-weight: 300; line-height: 1; letter-spacing: -0.03em;
    color: var(--color-marca);
}
.hero__title-highlight { display: block; font-weight: 400; color: var(--hero-accent-text); }

.hero__subtitle { margin: 1rem 0 0; max-width: 100%; font-size: 0.85rem; line-height: 1.4; color: var(--muted-foreground); }
@media (min-width: 640px) { .hero__subtitle { font-size: 0.95rem; } }

@media (max-width: 1023px) {
    .hero__title { text-align: center; margin-inline: auto; }
    .hero__subtitle { text-align: center; margin-inline: auto; }
}

.hero__actions {
    margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    opacity: 0; transform: translateY(10px);
    animation: hero-rise-in 900ms var(--hero-ease) 320ms forwards;
}
@keyframes hero-rise-in { to { opacity: 1; transform: translateY(0); } }

.hero-banner .btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 2rem; padding-inline: 1.25rem; border-radius: var(--radius-full);
    font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; text-decoration: none;
    transition: transform var(--hero-duration-ui) var(--hero-ease-ui), background-color var(--hero-duration-ui) var(--hero-ease-ui), border-color var(--hero-duration-ui) var(--hero-ease-ui);
    white-space: nowrap;
}
.hero-banner .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.hero-banner .btn--primary { background: var(--primary); color: var(--primary-foreground); border: 1px solid transparent; }
.hero-banner .btn--primary:hover { transform: scale(1.015); background: color-mix(in oklab, var(--primary) 90%, transparent); }
.hero-banner .btn--outline { background: transparent; color: var(--foreground); border: 1px solid var(--hero-line); }
.hero-banner .btn--outline:hover { border-color: var(--primary); background: color-mix(in oklab, var(--secondary) 60%, transparent); }
.hero-banner .btn:empty { display: none; }

@media (max-width: 479px) {
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero-banner .btn { width: 100%; }
}

@media (max-width: 767px) {
    .hero__subtitle { display: none; }
    .hero__copy-bottom { display: none; }
    .hero__grid { grid-template-areas: "top" "product" "actions"; padding: 1.5rem; padding-bottom: 4rem; }
    .hero__actions { margin-top: 0; }
    .hero-banner .btn--outline { display: none; }
    .hero-banner .btn--primary {
        width: auto; height: auto; background: transparent; border: none;
        padding-inline: 0; color: var(--foreground);
    }
    .hero-banner .btn--primary:hover { background: transparent; transform: none; }
}

/* ---------- Visual del producto ---------- */
.hero__product { position: relative; display: flex; height: max(27vh, 150px); align-items: center; justify-content: center; }
@media (min-width: 640px) { .hero__product { height: max(30vh, 170px); } }
@media (min-width: 768px) and (max-width: 1023px) { .hero__product { height: max(34vh, 220px); } }
@media (min-width: 1024px) { .hero__product { height: var(--hero-h); } }

.hero__halo {
    position: absolute; left: 50%; top: 50%; height: 68%; width: 68%;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(closest-side, oklch(0.9 0.02 240 / 0.55), transparent 72%);
    filter: blur(70px);
}

.hero__product-float { position: relative; height: 100%; width: 100%; animation: hero-float-y 7s ease-in-out infinite; }
@keyframes hero-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

.hero__product-stage {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    transform: translateX(var(--hero-drag-x, 0px));
    transition: transform 380ms var(--hero-ease);
}
.hero-banner.is-dragging .hero__product-stage { transition: none; }

.hero__product-img {
    position: absolute; inset: 0; margin: auto; height: 100%; width: auto; max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 30px 40px oklch(0.42 0.03 250 / 0.28)) drop-shadow(0 4px 10px oklch(0.42 0.03 250 / 0.12));
    opacity: 0;
    transform: translateX(var(--hero-img-offset, 0px)) scale(0.96);
    transition: opacity var(--hero-duration-slide) var(--hero-ease), transform var(--hero-duration-slide) var(--hero-ease);
}
.hero__product-img.is-active { opacity: 1; transform: translateX(0) scale(1); }

.hero__product-shadow {
    pointer-events: none; margin-inline: auto; height: 2.5rem; width: 38%;
    transform: translateY(-0.5rem); border-radius: 50%;
    background: radial-gradient(closest-side, oklch(0.55 0.02 250 / 0.28), transparent 75%);
    filter: blur(24px);
}

/* ---------- Controles ---------- */
.hero__controls {
    position: absolute; inset-inline: 0; bottom: 1.1rem; z-index: 20;
    margin-inline: auto; display: flex; width: 100%; max-width: 1240px;
    align-items: center; justify-content: space-between; padding-inline: 1.5rem;
}
@media (min-width: 768px) { .hero__controls { padding-inline: 2.5rem; } }
@media (min-width: 1024px) { .hero__controls { padding-inline: 3.5rem; } }

.hero__tabs { display: flex; align-items: center; gap: 0.75rem; }
.hero__tab { padding-block: 0.75rem; padding-inline: 0; background: none; border: none; cursor: pointer; }
.hero__tab-bar {
    display: block; height: 1px; width: 1.5rem; background: var(--hero-line);
    transition: width 700ms var(--hero-ease), background-color var(--hero-duration-ui) var(--hero-ease-ui);
}
.hero__tab:hover .hero__tab-bar { background: var(--muted-foreground); }
.hero__tab[aria-selected="true"] .hero__tab-bar { width: 3rem; background: var(--foreground); }
.hero__counter {
    margin-left: 0.5rem; font-size: 0.75rem; font-variant-numeric: tabular-nums;
    letter-spacing: 0.2em; color: var(--muted-foreground); white-space: nowrap; flex-shrink: 0;
}

.hero__nav { display: flex; align-items: center; gap: 0.5rem; }
.hero__nav-btn {
    display: flex; height: 2.75rem; width: 2.75rem; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--hero-line); background: transparent;
    color: var(--foreground); cursor: pointer;
}
.hero__nav-btn:hover { border-color: var(--primary); background: color-mix(in oklab, var(--secondary) 60%, transparent); }
.hero__nav-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.hero__nav-btn svg { width: 1rem; height: 1rem; }
.hero__nav-btn svg[hidden] { display: none; }

@media (max-width: 640px) {
    .hero__controls { padding-inline: 1rem; }
    .hero__tabs { gap: 0.4rem; }
    .hero__tab { padding-block: 0.5rem; }
    .hero__nav { gap: 0.35rem; }
    .hero__nav-btn { height: 2.35rem; width: 2.35rem; }
    .hero__nav-btn svg { width: 0.9rem; height: 0.9rem; }
}

/* ---------- Preferencias de movimiento/rendimiento ---------- */
.hero-banner.is-offscreen .hero__product-float,
.hero-banner.is-offscreen .hero__canvas { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .hero__product-float, .hero__canvas, .hero__actions { animation: none !important; }
    .hero__actions { opacity: 1; transform: none; }
    .hero__copy-inner, .hero__product-img, .hero__progress-bar { transition-duration: 1ms !important; }
}