/* ===== HERO ANIMADO (home): pantallas reales de la app =====
   Capturas reales de appticc (images/hero-app/, hechas con una cuenta de
   pruebas en local) dentro de un marco de móvil. La animación solo añade
   movimiento (fundidos, desplazamiento, un toque y un resaltado): no se
   inventa interfaz. Cuatro escenas de 4s con la propuesta de valor.
   Bucle de 16s en CSS puro; keyframes por elemento, sin animation-delay,
   para que todo se resetee a la vez. Tamaños en cqw.
   Con prefers-reduced-motion se muestra una escena fija (panel al día). */

.ha-stage {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    overflow: hidden;
    container-type: inline-size;
    background:
        radial-gradient(circle at 50% 100%, rgba(59,130,246,0.22), transparent 55%),
        radial-gradient(circle at 100% 0%, rgba(217,119,6,0.10), transparent 45%),
        #0B1220;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
    color: #fff;
    text-align: left;
    user-select: none;
}
.ha-stage *,
.ha-stage *::before,
.ha-stage *::after {
    animation-duration: 16s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ha-stage.is-paused *,
.ha-stage.is-paused *::before,
.ha-stage.is-paused *::after { animation-play-state: paused; }

/* ---------- Progreso por escena ---------- */
.ha-bars {
    position: absolute;
    top: 5.5cqw;
    left: 7cqw;
    right: 7cqw;
    display: flex;
    gap: 1.4cqw;
}
.ha-bar {
    flex: 1;
    height: 0.7cqw;
    border-radius: 1cqw;
    background: rgba(255,255,255,0.14);
    overflow: hidden;
}
.ha-bar i {
    display: block;
    height: 100%;
    background: #fff;
    transform-origin: left;
    animation-timing-function: linear;
}

/* ---------- Texto de cada escena ---------- */
.ha-scene {
    position: absolute;
    top: 10cqw;
    left: 7cqw;
    right: 7cqw;
}
.ha-step {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 2.5cqw;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 1.6cqw;
}
.ha-head {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 8.4cqw;
    line-height: 1;
    letter-spacing: -0.01em;
    margin: 0 0 1.6cqw;
    color: #fff;
}
.ha-sub {
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 3.2cqw;
    line-height: 1.4;
    color: rgba(255,255,255,0.65);
    margin: 0;
}

/* ---------- Móvil con capturas reales ---------- */
.ha-phone {
    position: absolute;
    left: 50%;
    top: 40cqw;
    width: 62cqw;
    margin-left: -31cqw;
    aspect-ratio: 1 / 2;
    padding: 1.6cqw;
    border-radius: 9cqw;
    background: #1E293B;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.14),
        0 -2cqw 12cqw rgba(59,130,246,0.25),
        0 4cqw 10cqw rgba(0,0,0,0.6);
}
.ha-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 7.6cqw;
    overflow: hidden;
    background: #F8FAFC;
}
.ha-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}
.ha-hl {
    position: absolute;
    border-radius: 3cqw;
    border: 0.6cqw solid var(--c);
    box-shadow: 0 0 0 1.2cqw color-mix(in srgb, var(--c) 22%, transparent), 0 0 6cqw color-mix(in srgb, var(--c) 45%, transparent);
    pointer-events: none;
}
.ha-tap {
    position: absolute;
    width: 9cqw;
    height: 9cqw;
    margin: -4.5cqw 0 0 -4.5cqw;
    border-radius: 50%;
    background: rgba(59,130,246,0.35);
    border: 0.5cqw solid rgba(59,130,246,0.9);
}

.ha-bar:nth-child(1) i { animation-name: ha-bar-0; }
@keyframes ha-bar-0 {
    0% { transform: scaleX(0); }
    25.00%, 99% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
}
.ha-scene--0 { animation-name: ha-scene-0; }
@keyframes ha-scene-0 {
    0% { opacity: 0; transform: translateY(3cqw); }
    2.00%, 23.00% { opacity: 1; transform: none; }
    25.00%, 100% { opacity: 0; transform: translateY(-2cqw); }
}

.ha-bar:nth-child(2) i { animation-name: ha-bar-1; }
@keyframes ha-bar-1 {
    0%, 25.00% { transform: scaleX(0); }
    50.00%, 99% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
}
.ha-scene--1 { animation-name: ha-scene-1; }
@keyframes ha-scene-1 {
    0%, 25.00% { opacity: 0; transform: translateY(3cqw); }
    27.00%, 48.00% { opacity: 1; transform: none; }
    50.00%, 100% { opacity: 0; transform: translateY(-2cqw); }
}

.ha-bar:nth-child(3) i { animation-name: ha-bar-2; }
@keyframes ha-bar-2 {
    0%, 50.00% { transform: scaleX(0); }
    75.00%, 99% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
}
.ha-scene--2 { animation-name: ha-scene-2; }
@keyframes ha-scene-2 {
    0%, 50.00% { opacity: 0; transform: translateY(3cqw); }
    52.00%, 73.00% { opacity: 1; transform: none; }
    75.00%, 100% { opacity: 0; transform: translateY(-2cqw); }
}

.ha-bar:nth-child(4) i { animation-name: ha-bar-3; }
@keyframes ha-bar-3 {
    0%, 75.00% { transform: scaleX(0); }
    100.00%, 99% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
}
.ha-scene--3 { animation-name: ha-scene-3; }
@keyframes ha-scene-3 {
    0%, 75.00% { opacity: 0; transform: translateY(3cqw); }
    77.00%, 98.00% { opacity: 1; transform: none; }
    100.00%, 100% { opacity: 0; transform: translateY(-2cqw); }
}
.ha-shot--tareas-0 { animation-name: ha-shot-tareas-0, none; animation-timing-function: linear, cubic-bezier(0.6, 0, 0.2, 1); }
@keyframes ha-shot-tareas-0 {
    0.00% { opacity: 1; }
    8.20% { opacity: 1; }
    9.00% { opacity: 0; }
    98.20% { opacity: 0; }
    99.00% { opacity: 1; }
    100.00% { opacity: 1; }
}
.ha-shot--tareas-1 { animation-name: ha-shot-tareas-1, none; animation-timing-function: linear, cubic-bezier(0.6, 0, 0.2, 1); }
@keyframes ha-shot-tareas-1 {
    0% { opacity: 0; }
    8.20% { opacity: 0; }
    9.00% { opacity: 1; }
    14.20% { opacity: 1; }
    15.00% { opacity: 0; }
    100% { opacity: 0; }
}
.ha-shot--tareas-6 { animation-name: ha-shot-tareas-6, none; animation-timing-function: linear, cubic-bezier(0.6, 0, 0.2, 1); }
@keyframes ha-shot-tareas-6 {
    0% { opacity: 0; }
    14.20% { opacity: 0; }
    15.00% { opacity: 1; }
    25.20% { opacity: 1; }
    26.00% { opacity: 0; }
    100% { opacity: 0; }
}
.ha-shot--panel-pendiente { animation-name: ha-shot-panel-pendiente, none; animation-timing-function: linear, cubic-bezier(0.6, 0, 0.2, 1); }
@keyframes ha-shot-panel-pendiente {
    0% { opacity: 0; }
    24.20% { opacity: 0; }
    25.00% { opacity: 1; }
    50.20% { opacity: 1; }
    51.00% { opacity: 0; }
    100% { opacity: 0; }
}
.ha-shot--panel-al-dia { animation-name: ha-shot-panel-al-dia, none; animation-timing-function: linear, cubic-bezier(0.6, 0, 0.2, 1); }
@keyframes ha-shot-panel-al-dia {
    0% { opacity: 0; }
    49.20% { opacity: 0; }
    50.00% { opacity: 1; }
    75.20% { opacity: 1; }
    76.00% { opacity: 0; }
    100% { opacity: 0; }
}
.ha-shot--informe-0 { animation-name: ha-shot-informe-0, ha-pan-a; animation-timing-function: linear, cubic-bezier(0.6, 0, 0.2, 1); }
@keyframes ha-shot-informe-0 {
    0% { opacity: 0; }
    74.20% { opacity: 0; }
    75.00% { opacity: 1; }
    86.20% { opacity: 1; }
    87.00% { opacity: 0; }
    100% { opacity: 0; }
}
.ha-shot--informe-1 { animation-name: ha-shot-informe-1, ha-pan-b; animation-timing-function: linear, cubic-bezier(0.6, 0, 0.2, 1); }
@keyframes ha-shot-informe-1 {
    0% { opacity: 0; }
    85.20% { opacity: 0; }
    86.00% { opacity: 1; }
    100.00% { opacity: 1; }
}
/* Desplazamiento hacia el botón de generar informe (mismo gesto que en la app) */
@keyframes ha-pan-a {
    0%, 77% { transform: none; }
    82%, 100% { transform: translateY(-28%); }
}
@keyframes ha-pan-b {
    0%, 100% { transform: translateY(-28%); }
}
.ha-hl--t { left: 3.5%; top: 13%; width: 93%; height: 22.5%; --c: #22C55E; animation-name: ha-hl-t; }
@keyframes ha-hl-t {
    0%, 16.00% { opacity: 0; transform: scale(1.06); }
    17.50%, 24.00% { opacity: 1; transform: none; }
    25.00%, 100% { opacity: 0; transform: none; }
}
.ha-hl--p { left: 3.5%; top: 13%; width: 93%; height: 31%; --c: #F59E0B; animation-name: ha-hl-p; }
@keyframes ha-hl-p {
    0%, 29.00% { opacity: 0; transform: scale(1.06); }
    30.50%, 48.00% { opacity: 1; transform: none; }
    49.00%, 100% { opacity: 0; transform: none; }
}
.ha-hl--a { left: 3.5%; top: 36%; width: 93%; height: 16.5%; --c: #22C55E; animation-name: ha-hl-a; }
@keyframes ha-hl-a {
    0%, 54.00% { opacity: 0; transform: scale(1.06); }
    55.50%, 73.00% { opacity: 1; transform: none; }
    74.00%, 100% { opacity: 0; transform: none; }
}
.ha-hl--i { left: 69%; top: 58.5%; width: 29.5%; height: 8%; --c: #22C55E; animation-name: ha-hl-i; }
@keyframes ha-hl-i {
    0%, 89.00% { opacity: 0; transform: scale(1.06); }
    90.50%, 98.00% { opacity: 1; transform: none; }
    99.00%, 100% { opacity: 0; transform: none; }
}
.ha-tap--0 { left: 11%; top: 57.3%; animation-name: ha-tap-0; }
@keyframes ha-tap-0 {
    0%, 5.50% { opacity: 0; transform: scale(1.6); }
    7.00% { opacity: 1; transform: scale(0.8); }
    9.50%, 100% { opacity: 0; transform: scale(2.2); }
}
.ha-tap--1 { left: 33%; top: 60.8%; animation-name: ha-tap-1; }
@keyframes ha-tap-1 {
    0%, 82.50% { opacity: 0; transform: scale(1.6); }
    84.00% { opacity: 1; transform: scale(0.8); }
    86.50%, 100% { opacity: 0; transform: scale(2.2); }
}

/* ---------- Movimiento reducido: escena fija "Todo al día" ---------- */
@media (prefers-reduced-motion: reduce) {
    .ha-stage *,
    .ha-stage *::before,
    .ha-stage *::after { animation: none !important; }
    .ha-scene, .ha-shot, .ha-hl, .ha-tap { opacity: 0; }
    .ha-scene--2, .ha-shot--panel-al-dia, .ha-hl--a { opacity: 1; }
    .ha-bar i { transform: scaleX(0); }
    .ha-bar:nth-child(-n+3) i { transform: scaleX(1); }
}