/* ═══════════════════════════════════════
   ESTILOS EXCLUSIVOS PORTADA (home.css)
═══════════════════════════════════════ */

/* ── ANIMACIONES SVG DRONE-THEMED ── */
.abstract-anim {
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px; margin-top: auto; display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden; height: 130px;
}
.abstract-anim svg { width: 100%; height: 100%; display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   ANIMACIONES DE LAS TARJETAS

   Antes eran seis animaciones `infinite` corriendo siempre: repintado continuo
   y consumo de bateria en movil aunque la tarjeta estuviera fuera de pantalla.
   Ahora se reproducen UNA VEZ, cuando la tarjeta entra en el viewport, y se
   quedan en su estado final.

   El disparo lo hace .visible, que ya coloca el IntersectionObserver de la
   portada sobre los elementos .reveal.
   ══════════════════════════════════════════════════════════════════════════ */

/* Estado de reposo: el dibujo ya se ve, solo faltan las capas animadas. */
.anim-fig      { --dur: 1.1s; }
.anim-draw     { stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300); }
.anim-fade     { opacity: 0; }
.anim-rise     { opacity: 0; transform: translateY(6px); }
/* En SVG el origen de transformacion necesita transform-box explicito, si no
   se calcula contra el viewport y las piezas salen disparadas. */
.anim-grow     { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
.anim-sweep    { opacity: 0; transform: rotate(-88deg); transform-box: view-box; transform-origin: 100px 92px; }

/* Reproduccion al entrar en pantalla */
.reveal.visible .anim-draw  { animation: figDraw  var(--dur) cubic-bezier(0.65,0,0.35,1) forwards; }
.reveal.visible .anim-fade  { animation: figFade  0.5s ease-out forwards; }
.reveal.visible .anim-rise  { animation: figRise  0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
.reveal.visible .anim-grow  { animation: figGrow  0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
.reveal.visible .anim-sweep { animation: figSweep 1.2s cubic-bezier(0.34,1.3,0.64,1) forwards; }

/* Escalonado: cada elemento entra un poco despues del anterior */
.d1 { animation-delay: 0.05s; } .d2 { animation-delay: 0.20s; }
.d3 { animation-delay: 0.35s; } .d4 { animation-delay: 0.50s; }
.d5 { animation-delay: 0.65s; } .d6 { animation-delay: 0.80s; }

@keyframes figDraw  { to { stroke-dashoffset: 0; } }
@keyframes figFade  { to { opacity: 1; } }
@keyframes figRise  { to { opacity: 1; transform: translateY(0); } }
@keyframes figGrow  { to { transform: scaleX(1); } }
@keyframes figSweep { to { opacity: 1; transform: rotate(0deg); } }

/* Ping tipo radar en el punto de impacto. Es una sola forma por tarjeta
   animando opacity y transform, de modo que el compositor lo resuelve en GPU
   y puede repetirse sin coste apreciable. */
.anim-pulse { transform-box: fill-box; transform-origin: center; opacity: 0; }
.reveal.visible .anim-pulse { animation: figPulse 3.2s ease-out 0.9s infinite; }
@keyframes figPulse {
    0%   { opacity: 0.55; transform: scale(0.6); }
    70%, 100% { opacity: 0; transform: scale(1.9); }
}

/* ── Accesibilidad: quien pide reducir movimiento ve el resultado, no el viaje ──
   Ninguna animacion del sitio respetaba prefers-reduced-motion. Para personas con
   trastornos vestibulares o migrana el movimiento no es un adorno, es un sintoma. */
@media (prefers-reduced-motion: reduce) {
    .anim-draw, .anim-fade, .anim-rise, .anim-grow, .anim-sweep, .anim-pulse,
    .reveal.visible .anim-draw, .reveal.visible .anim-fade, .reveal.visible .anim-rise,
    .reveal.visible .anim-grow, .reveal.visible .anim-sweep, .reveal.visible .anim-pulse {
        animation: none !important;
        stroke-dashoffset: 0 !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .anim-pulse { opacity: 0 !important; }
}

/* ═══════════════════════════════════════
   HERO Y HUD DJI
═══════════════════════════════════════ */
.hero { 
    position:relative; min-height: 80vh; display:flex; align-items:center; justify-content:center; 
    overflow:hidden; background-color: #000; z-index: 1;
}
.hero-picture { position:absolute; inset:0; z-index:1; display:block; overflow:hidden; }
.hero-picture img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* Deriva lenta de la foto (efecto Ken Burns). El hero de produccion pedia un
   video alojado en Cloudflare Stream que hoy responde 404, asi que la portada
   llevaba tiempo mostrando un rectangulo negro. Con la foto y este movimiento
   muy lento el hero respira sin depender de un CDN externo, sin los 90 KB de
   hls.js y sin consumo de streaming. */
.hero-picture img { animation: heroDeriva 34s ease-in-out infinite; will-change: transform; }
@keyframes heroDeriva {
    0%   { transform: scale(1.05) translate3d(0, 0, 0); }
    50%  { transform: scale(1.13) translate3d(-1.6%, -1.1%, 0); }
    100% { transform: scale(1.05) translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero-picture img { animation: none; transform: scale(1.05); } }

/* La intensidad esta calcada de produccion: alli el overlay vivia dentro de
   .hero-video (opacity 0.6), asi que su efecto real era ~0,24 en el centro y
   ~0,59 en el borde. Aqui va suelto, con los valores ya multiplicados y algo
   mas abiertos para que se vean las luces de la ciudad. */
.hero-overlay { position:absolute; inset:0; pointer-events:none; z-index: 2; background: radial-gradient(circle at center, rgba(4,8,20,0.18) 0%, rgba(4,8,20,0.68) 100%); }
.hero-bottom-fade {position:absolute;bottom:0;left:0;right:0;height:200px;background:linear-gradient(to top,var(--bg),transparent); z-index: 3;}

/* HUD TIPO DJI */
/* La referencia es DJI Fly: barras traslucidas muy oscuras, texto blanco puro,
   numeros en monoespaciada y iconos vectoriales. Antes habia emoji (un helicoptero,
   un satelite, dos antenas y una pila), que en cada sistema se dibujan distinto y
   delataban al instante que no era una interfaz de vuelo. */
.dji-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; font-family: 'Share Tech Mono', ui-monospace, monospace; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.9); font-variant-numeric: tabular-nums; }

.hud-top-bar { position: absolute; top: 0; left: 0; right: 0; padding: 14px 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: linear-gradient(to bottom, rgba(0,0,0,0.72), transparent); }
.hud-top-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hud-mode { font-size: 0.78rem; letter-spacing: 1.5px; padding: 3px 9px; border-radius: 4px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); }
.hud-status { display: inline-flex; align-items: center; gap: 7px; color: #34d399; font-size: 0.95rem; letter-spacing: 1px; white-space: nowrap; }
.hud-status-dot { width: 8px; height: 8px; background: #34d399; border-radius: 50%; box-shadow: 0 0 8px #34d399; flex: none; }

.hud-telemetry-top { display: flex; gap: 16px; align-items: center; font-size: 0.9rem; letter-spacing: 0.5px; }
.hud-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hud-chip svg { width: 15px; height: 15px; flex: none; fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* El icono de satelite es trazo; los de barras son relleno. */
.hud-chip svg path { fill: none; }
.hud-chip svg rect { stroke: none; }
.hud-bar-off { opacity: 0.32; }
.hud-batt { width: 26px; height: 13px; }
.hud-batt-shell { fill: none; stroke: currentColor; stroke-width: 1.4; }
.hud-batt-tip, .hud-batt-fill { fill: currentColor; stroke: none; }

.hud-bracket-container { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 15px; }
.hud-left { left: 4%; }
.hud-right { right: 4%; flex-direction: row-reverse; }
.bracket-lines { width: 25px; height: 220px; border: 2px solid rgba(255,255,255,0.4); position: relative; }
.hud-left .bracket-lines { border-left: none; border-radius: 0 8px 8px 0; }
.hud-right .bracket-lines { border-right: none; border-radius: 8px 0 0 8px; }
.bracket-lines::before, .bracket-lines::after { content: ''; position: absolute; background: rgba(255,255,255,0.4); height: 2px; width: 10px; }
.hud-left .bracket-lines::before { top: 25%; right: 0; }
.hud-left .bracket-lines::after { bottom: 25%; right: 0; }
.hud-right .bracket-lines::before { top: 25%; left: 0; }
.hud-right .bracket-lines::after { bottom: 25%; left: 0; }
.bracket-indicator { position: absolute; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-style: solid; }
.hud-left .bracket-indicator { right: -2px; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent #34d399; }
.hud-right .bracket-indicator { left: -2px; border-width: 6px 8px 6px 0; border-color: transparent #34d399 transparent transparent; }
.hud-value-box { text-align: center; }
.hud-value-label { font-size: 0.8rem; letter-spacing: 1px; color: rgba(255,255,255,0.65); margin-bottom: -4px; }
.hud-value-number { font-size: 2.2rem; color: #fff; line-height: 1.1; }
.hud-value-unit { font-size: 0.8rem; color: rgba(255,255,255,0.65); }

.hud-center-cross { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; }
.hud-center-cross::before { content: ''; position: absolute; top: 50%; left: -20px; right: -20px; height: 1px; background: rgba(255,255,255,0.3); }
.hud-center-cross::after { content: ''; position: absolute; left: 50%; top: -20px; bottom: -20px; width: 1px; background: rgba(255,255,255,0.3); }

/* El radar sube para dejar sitio a la tira de telemetria. */
.hud-radar { position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%); width: 150px; height: 75px; border: 2px solid rgba(255,255,255,0.2); border-bottom: none; border-radius: 150px 150px 0 0; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 9px; }
.hud-radar-arrow { width: 0; height: 0; border-style: solid; border-width: 0 9px 18px 9px; border-color: transparent transparent #f43f5e transparent; }

/* Tira inferior D / H / H.S / V.S: es la firma visual de DJI Fly. */
.hud-bottom-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: clamp(14px, 4vw, 42px); padding: 10px 20px 14px; background: linear-gradient(to top, rgba(0,0,0,0.72), transparent); font-size: 0.92rem; }
.hud-readout { display: inline-flex; align-items: baseline; gap: 5px; }
.hud-readout b { font-weight: 400; color: rgba(255,255,255,0.6); letter-spacing: 0.5px; }
.hud-readout i { font-style: normal; color: #fff; font-size: 1.12rem; }
.hud-readout u { text-decoration: none; color: rgba(255,255,255,0.6); font-size: 0.78rem; }


/* CONTENIDO CENTRAL HERO */
.hero-content { position:relative; z-index: 5; max-width:800px; opacity:0; animation:fadeUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards; text-align: center; padding: 2rem; background: radial-gradient(circle, rgba(4,8,20,0.6) 0%, transparent 70%); border-radius: 50%;}
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.1); border-radius:50px; padding:6px 18px; margin-bottom:24px; backdrop-filter: blur(5px); }
.badge-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow: 0 0 10px var(--green); }
.badge-text { font-size:0.75rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--text); font-family: 'Outfit', sans-serif;}

.hero h1 { font-family: 'Outfit', sans-serif; font-size:clamp(3rem, 6vw, 5.5rem); font-weight:900; line-height:1.05; letter-spacing:-2px; margin-bottom:20px; text-shadow: 0 10px 30px rgba(0,0,0,0.8);}
.text-gradient { background:linear-gradient(135deg, #00c8ff 0%, #c850ff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero p { font-family: 'Outfit', sans-serif; font-size:1.15rem; color:var(--text); line-height:1.6; max-width:600px; margin: 0 auto 40px; text-shadow: 0 2px 10px rgba(0,0,0,0.8);}

.hero-funnel { display:flex; gap:15px; justify-content: center; flex-wrap:wrap; font-family: 'Outfit', sans-serif;}
.btn-funnel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 26px; border-radius: 16px; text-decoration: none; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; flex: 1; min-width: 220px; z-index:1;}
.btn-funnel::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s; transform: skewX(-20deg); z-index:-1;}
.btn-funnel:hover::after { left: 150%; }
.btn-funnel:hover { transform: translateY(-5px); }

.bf-title-wrap { display: flex; align-items: center; gap: 10px; overflow: hidden;}
.bf-svg { width: 24px; height: 24px; transition: 0.4s; stroke-width: 3;}
.btn-funnel:hover .bf-svg { animation: springArrow 0.6s forwards; stroke: #fff;}
@keyframes springArrow { 0%{transform:translate(0,0);opacity:1} 30%{transform:translate(20px,-20px);opacity:0} 31%{transform:translate(-20px,20px);opacity:0} 100%{transform:translate(0,0);opacity:1} }

.bf-primary { background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%); color: #fff; box-shadow: 0 10px 30px rgba(200,80,255,0.3); border: none;}
.bf-primary span { font-weight: 900; font-size: 1.15rem; display: block;}
.bf-primary small { font-weight: 600; font-size: 0.8rem; opacity: 0.9; margin-top: 4px;}

.bf-secondary { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(10px);}
.bf-secondary:hover { background: rgba(255,255,255,0.1); border-color: var(--accent); box-shadow: 0 10px 30px rgba(0,200,255,0.2);}
.bf-secondary span { font-weight: 900; font-size: 1.15rem; display: block;}
.bf-secondary small { font-weight: 500; font-size: 0.8rem; color: var(--muted); margin-top: 4px;}

.bf-tertiary { background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(10px);}
.bf-tertiary:hover { background: rgba(255,255,255,0.1); border-color: var(--green); box-shadow: 0 10px 30px rgba(16,185,129,0.2);}
.bf-tertiary span { font-weight: 900; font-size: 1.15rem; display: block;}
.bf-tertiary small { font-weight: 500; font-size: 0.8rem; color: var(--muted); margin-top: 4px;}

/* Es un <button> para que sea accesible por teclado; se neutralizan los estilos nativos. */
.scroll-mouse { position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255,255,255,0.4); border-radius: 20px; z-index: 10; cursor: pointer; transition: 0.3s; display: flex; justify-content: center; appearance: none; -webkit-appearance: none; background: transparent; padding: 0; color: inherit; font: inherit; }
.scroll-mouse:hover { border-color: var(--accent); }
.scroll-mouse:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-color: var(--accent); }
.scroll-wheel { display: block; width: 4px; height: 8px; background: var(--accent); border-radius: 2px; margin-top: 6px; animation: scrollWheel 2s infinite; }
@keyframes scrollWheel { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }

/* ── 1. EL PANEL OFICIAL MÓSICO ── */
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.panel-card {
    background: rgba(22, 32, 55, 0.85); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px;
    padding: 2.5rem 2rem 2rem; text-align: center; position: relative; overflow: hidden;
    backdrop-filter: blur(16px); transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06); display: flex; flex-direction: column;
}
.panel-card:hover { transform: translateY(-8px); border-color: rgba(255,255,255,0.25); box-shadow: 0 20px 40px rgba(0,0,0,0.5); background: rgba(35, 48, 72, 0.95); }
.panel-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top, var(--glow-color), transparent 60%); opacity: 0.06; transition: 0.5s; z-index: 0; pointer-events: none; }
.panel-card:hover::before { opacity: 0.2; }

.panel-card.cyan { --glow-color: var(--accent); }
.panel-card.green { --glow-color: var(--green); }
.panel-card.amber { --glow-color: var(--amber); }
.panel-card.purple { --glow-color: var(--accent2); }

.p-icon-wrap {
    width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; transition: 0.4s; position: relative; z-index: 1;
}
.panel-card:hover .p-icon-wrap { transform: scale(1.15) rotate(5deg); background: rgba(255,255,255,0.1); border-color: #fff;}
.p-icon-wrap svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 2; transition: 0.4s; }
.panel-card.cyan .p-icon-wrap { color: var(--accent); }
.panel-card.green .p-icon-wrap { color: var(--green); }
.panel-card.amber .p-icon-wrap { color: var(--amber); }
.panel-card.purple .p-icon-wrap { color: var(--accent2); }

.p-title { font-size: 1.3rem; font-weight: 900; color: #fff; margin-bottom: 10px; position: relative; z-index: 1;}
.p-desc { font-size: 0.95rem; color: var(--muted); line-height: 1.6; position: relative; z-index: 1; flex: 1;}

/* ── 2. BENTO GRID ECOSISTEMA ── */
.bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
.bento-card {
    background: rgba(22, 32, 55, 0.85); border: 1px solid rgba(255,255,255,0.12); border-radius: 24px; 
    padding: 2.5rem; display: flex; flex-direction: column; backdrop-filter: blur(16px); position: relative; overflow: hidden;
    transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 15px 35px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.bento-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.2); box-shadow: 0 20px 50px rgba(0,0,0,0.5); background: rgba(35, 48, 72, 0.95); }
.bento-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--accent); opacity:0.5; transition:0.3s; }
.bento-card:hover::before { opacity:1; }

.bento-card.bg-cyan:hover { border-color: rgba(0,200,255,0.3); box-shadow: 0 20px 50px rgba(0,200,255,0.1);}
.bento-card.bg-cyan::before { background: var(--accent); }
.bento-card.bg-amber:hover { border-color: rgba(245,158,11,0.3); box-shadow: 0 20px 50px rgba(245,158,11,0.1);}
.bento-card.bg-amber::before { background: var(--amber); }
.bento-card.bg-green:hover { border-color: rgba(16,185,129,0.3); box-shadow: 0 20px 50px rgba(16,185,129,0.1);}
.bento-card.bg-green::before { background: var(--green); }
.bento-card.bg-rose:hover { border-color: rgba(244,63,94,0.3); box-shadow: 0 20px 50px rgba(244,63,94,0.1);}
.bento-card.bg-rose::before { background: var(--rose); }

.bc-icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; transition: 0.4s; }
.bento-card:hover .bc-icon { transform: scale(1.1) rotate(-5deg); background: rgba(255,255,255,0.1); border-color: #fff; box-shadow: 0 0 20px rgba(255,255,255,0.2);}
.bc-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; transition: 0.4s; }

.bento-card.bg-cyan .bc-icon { color: var(--accent); }
.bento-card.bg-amber .bc-icon { color: var(--amber); }
.bento-card.bg-green .bc-icon { color: var(--green); }
.bento-card.bg-rose .bc-icon { color: var(--rose); }

.bc-title { font-size: 1.5rem; font-weight: 900; color: #fff; margin-bottom: 12px; letter-spacing: -0.5px;}
.bc-desc { font-size: 1.05rem; color: var(--text); line-height: 1.6; margin-bottom: 2rem; flex: 1;}

.bc-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.bc-link { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; font-weight: 700; color: var(--text); padding: 12px 16px; background: rgba(255,255,255,0.03); border-radius: 12px; transition: 0.3s; border: 1px solid rgba(255,255,255,0.05);}
.bc-link:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.2); padding-left: 20px; }
.bc-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; opacity: 0; transform: translateX(-10px); transition: 0.3s;}
.bc-link:hover svg { opacity: 1; transform: translateX(0); stroke: var(--accent);}

/* Grid sizes */
.bento-large { grid-column: span 8; min-height: 440px;}
.bento-medium { grid-column: span 4; min-height: 440px;}

/* ── 3. PREMIUM & STATS ── */
.stats-premium-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; margin-top: 60px;}
.stats-box { background: linear-gradient(135deg, rgba(31,41,55,0.6), rgba(17,24,39,0.8)); border-radius: 24px; padding: 3rem 2rem; text-align: center; border: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; backdrop-filter: blur(12px);}
.stat-row { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem;}
.stat-item { flex: 1; min-width: 140px;}
.stat-num { font-size: 3.5rem; font-weight: 900; color: var(--accent); font-family: 'Share Tech Mono', monospace; line-height: 1; margin-bottom: 5px; text-shadow: 0 0 20px rgba(0,200,255,0.3);}
.stat-lbl { font-size: 0.8rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 1px;}

.premium-card {
    background: linear-gradient(145deg, #100918 0%, #1a0a2a 100%);
    border: 1px solid rgba(200,80,255,0.4); border-radius: 24px; padding: 3rem;
    position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 30px rgba(200,80,255,0.1) inset;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
    transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.premium-card::before { content:''; position:absolute; top:0; left:-100%; width:50%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transform:skewX(-20deg); animation: shimmerLight 5s infinite; pointer-events: none;}
@keyframes shimmerLight { 0% { left: -100%; } 100% { left: 200%; } }
.premium-card:hover { transform: translateY(-5px); border-color: rgba(200,80,255,0.8); box-shadow: 0 25px 60px rgba(200,80,255,0.2), 0 0 40px rgba(200,80,255,0.2) inset;}

.prem-title { font-size: 2.2rem; font-weight: 900; color: #fff; margin-bottom: 1rem; display: flex; align-items: center; gap: 10px;}
.prem-title svg { width: 32px; height: 32px; stroke: var(--accent2); fill: none; stroke-width: 2.5; filter: drop-shadow(0 0 10px rgba(200,80,255,0.6));}
.prem-desc { font-size: 1.05rem; color: #cbd5e1; margin-bottom: 2rem; line-height: 1.6;}
.prem-list { list-style: none; padding: 0; margin: 0 0 2.5rem; display: flex; flex-direction: column; gap: 12px;}
.prem-list li { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; color: #fff;}
.prem-list li svg { width: 20px; height: 20px; stroke: #10b981; fill: none; stroke-width: 3;}
.btn-prem-action { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff; text-align: center; padding: 14px; border-radius: 50px; font-weight: 900; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; box-shadow: 0 10px 30px rgba(200,80,255,0.3);}
.btn-prem-action:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 15px 40px rgba(200,80,255,0.5); filter: brightness(1.1);}

/* ── 4. NOTICIAS ── */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem;}
.news-card { background: rgba(22, 32, 55, 0.85); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; overflow: hidden; transition: 0.4s; display: flex; flex-direction: column; backdrop-filter: blur(10px); box-shadow: 0 8px 25px rgba(0,0,0,0.25);}
.news-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,200,255,0.15); background: rgba(35, 48, 72, 0.95);}
.news-img { height: 180px; width: 100%; object-fit: cover; border-bottom: 1px solid var(--border); transition: 0.4s;}
.news-card:hover .news-img { transform: scale(1.05); }
.news-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; background: transparent; position: relative; z-index: 2;}
.news-tag { font-size: 0.7rem; font-weight: 900; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;}
.news-title { font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1.4; margin-bottom: 15px; flex: 1;}
.news-date { font-size: 0.8rem; color: var(--muted); font-weight: 600;}

/* ── 5. FAQ ACCORDION HUD ── */
.faq-container { max-width: 850px; margin: 80px auto 0; }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: 16px; margin-bottom: 12px; overflow: hidden; transition: 0.3s; backdrop-filter: blur(10px);}
.faq-item:hover { border-color: rgba(255,255,255,0.15); transform: translateX(5px);}
.faq-item.active { border-color: var(--accent); box-shadow: 0 10px 30px rgba(0,200,255,0.1); transform: none; background: var(--card-h);}
.faq-question { width: 100%; text-align: left; padding: 1.5rem; background: none; border: none; font-size: 1.1rem; font-weight: 800; color: #fff; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: inherit;}
.faq-question svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 2.5; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.faq-item.active .faq-question svg { transform: rotate(135deg); stroke: var(--rose);}
.faq-answer { max-height: 0; padding: 0 1.5rem; color: var(--text); font-size: 1rem; line-height: 1.6; transition: all 0.4s ease; opacity: 0;}
.faq-item.active .faq-answer { max-height: 300px; padding-bottom: 1.5rem; opacity: 1;}

@media(max-width:1024px){
  .bento-large, .bento-medium { grid-column: span 12; min-height: auto;}
  .stats-premium-wrap { grid-template-columns: 1fr; }
  .section-title { font-size: 2.4rem; }
}
@media(max-width:768px){
  .hero { min-height: 65vh; padding: 90px 1.5rem 60px; }
  /* Antes el HUD entero se ocultaba en movil, que es justo donde mas trafico
     hay. Se conservan la barra superior y la tira inferior, que son las dos
     piezas que dan el aire de interfaz de vuelo, y se retiran los corchetes
     laterales, la cruz y el radar, que si estorbaban al texto. */
  .hud-bracket-container,
  .hud-center-cross,
  .hud-radar { display: none; }
  .hud-top-bar { padding: 10px 14px; gap: 10px; }
  .hud-mode { font-size: 0.66rem; padding: 2px 6px; letter-spacing: 1px; }
  .hud-status { font-size: 0.78rem; }
  .hud-status .hud-status-text { display: none; }
  .hud-telemetry-top { gap: 10px; font-size: 0.76rem; }
  .hud-chip svg { width: 13px; height: 13px; }
  .hud-batt { width: 22px; height: 11px; }
  .hud-bottom-bar { gap: 12px; font-size: 0.76rem; padding: 8px 10px 10px; }
  .hud-readout i { font-size: 0.95rem; }
  .hero h1 { font-size: 2.8rem; }
  .hero-content { background: none; padding: 0;}
  .section-wrapper { padding: 60px 1.2rem; }
  .panel-grid { grid-template-columns: 1fr; }
  .bc-links { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO — regla general de la portada

   El bloque de arriba cubre las figuras de las tarjetas. Este cubre el resto:
   el HUD del hero, el indicador de scroll, el brillo de la tarjeta premium y
   las entradas por scroll. Para quien activa "reducir movimiento" en su sistema
   el contenido debe llegar completo y quieto, no a medias.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .hero-content,
    .reveal,
    .reveal.visible {
        opacity: 1 !important;
        transform: none !important;
    }
    .scroll-wheel,
    .premium-card::before,
    .dji-hud *,
    .hud-status-dot,
    .ambient-orb {
        animation: none !important;
    }
    .btn-funnel:hover .bf-svg { animation: none !important; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   DEMOS DE PRODUCTO
   Recreaciones fieles de la interfaz real, en HTML/CSS. No son capturas:
   pesan unos KB, se ven nitidas en cualquier pantalla y pueden narrar el flujo.

   CONVENCION DE TIEMPOS — leer antes de tocar nada
   Cada demo es un bucle de 12 s y NO se usa animation-delay. El retardo
   desplazaba la fase de cada elemento respecto a la narracion y los pasos
   acababan contando una cosa mientras la pantalla mostraba otra. Aqui cada
   @keyframes describe el ciclo completo en porcentaje absoluto:

       1 s = 8,33 %        fase 1:  4 % - 33 %   (0,5 s - 4,0 s)
                           fase 2: 38 % - 66 %   (4,6 s - 7,9 s)
                           fase 3: 69 % - 98 %   (8,3 s - 11,8 s)

   Es decir: si quieres que algo aparezca a los 5 s, su keyframe entra en el
   42 %. Lo que se ve en pantalla y lo que dice el texto van siempre juntos.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --demoDur: 12s; }

.demo-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 52px; align-items: center; margin-bottom: 96px; }
.demo-row.invertida .demo-copy { order: 2; }
.demo-row.invertida .demo-frame { order: 1; }

.demo-step { display: inline-flex; align-items: center; gap: 8px; font-size: 0.7rem; font-weight: 800;
    letter-spacing: 1.6px; text-transform: uppercase; color: var(--tono);
    background: color-mix(in srgb, var(--tono) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--tono) 26%, transparent);
    padding: 6px 14px; border-radius: 50px; margin-bottom: 16px; }
.demo-copy h3 { font-size: clamp(1.45rem, 2.5vw, 2rem); font-weight: 900; line-height: 1.15; margin-bottom: 13px; letter-spacing: -0.5px; }
.demo-copy > p { color: var(--muted); line-height: 1.65; margin-bottom: 20px; font-size: 0.95rem; }
.demo-puntos { list-style: none; padding: 0; margin: 0 0 24px; }
.demo-puntos li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 10px; font-size: 0.9rem; line-height: 1.45; }
.demo-puntos svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--tono); }
.demo-cta { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 12px;
    background: var(--tono); color: #04121a; font-weight: 800; text-decoration: none; transition: 0.25s; font-size: 0.92rem; }
.demo-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--tono) 35%, transparent); }

/* ── Marco de navegador ── */
.demo-frame { border-radius: 16px; overflow: hidden; background: #0b0e16;
    border: 1px solid rgba(255,255,255,0.11);
    box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 0 0 1px color-mix(in srgb, var(--tono) 12%, transparent),
                0 0 46px color-mix(in srgb, var(--tono) 9%, transparent); }
.demo-chrome { display: flex; align-items: center; gap: 7px; padding: 10px 13px; background: #131722; border-bottom: 1px solid rgba(255,255,255,0.07); }
.demo-chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.demo-url { flex: 1; margin-left: 7px; font-family: 'Share Tech Mono', monospace; font-size: 0.68rem; color: var(--muted);
    background: rgba(0,0,0,0.35); padding: 5px 11px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-screen { padding: 16px; position: relative; }

/* ── Narración sincronizada: lo que hace entendible la demo ── */
.demo-narra { border-top: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.28);
    padding: 13px 16px 16px; position: relative; min-height: 74px; }
.demo-narra p { margin: 0; font-size: 0.83rem; line-height: 1.45; color: var(--text); opacity: 0;
    position: absolute; left: 16px; right: 16px; top: 13px; display: flex; gap: 9px; align-items: flex-start; }
.demo-narra p b { color: var(--tono); font-weight: 800; flex-shrink: 0; }
.demo-narra .hueco { display: none; }
.reveal.visible .demo-narra .t1 { animation: narra1 var(--demoDur) infinite; }
.reveal.visible .demo-narra .t2 { animation: narra2 var(--demoDur) infinite; }
.reveal.visible .demo-narra .t3 { animation: narra3 var(--demoDur) infinite; }
@keyframes narra1 { 0% { opacity: 0; transform: translateY(5px); } 4%,31% { opacity: 1; transform: translateY(0); } 35%,100% { opacity: 0; } }
@keyframes narra2 { 0%,34% { opacity: 0; transform: translateY(5px); } 38%,62% { opacity: 1; transform: translateY(0); } 66%,100% { opacity: 0; } }
@keyframes narra3 { 0%,65% { opacity: 0; transform: translateY(5px); } 69%,96% { opacity: 1; transform: translateY(0); } 99%,100% { opacity: 0; } }

.demo-barra { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: rgba(255,255,255,0.06); }
.demo-barra i { display: block; height: 100%; width: 0; background: var(--tono);
    box-shadow: 0 0 8px color-mix(in srgb, var(--tono) 60%, transparent); }
.reveal.visible .demo-barra i { animation: barra var(--demoDur) linear infinite; }
@keyframes barra { 0% { width: 0; } 98%,100% { width: 100%; } }

/* ── Cursor simulado ── */
.demo-cursor { position: absolute; width: 17px; height: 17px; z-index: 6; opacity: 0; pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.demo-cursor svg { width: 100%; height: 100%; }

/* Aparicion estandar de una tarjeta de resultado (fase 3). */
@keyframes dmSube { 0%,70% { opacity: 0; transform: translateY(10px); } 74%,96% { opacity: 1; transform: translateY(0); } 99%,100% { opacity: 0; } }

/* ══ DEMO 1 · Calculadora de permisos ══════════════════════════════════════
   El guion sigue el orden real de la herramienta: fijar coordenadas, cruzar
   zonas, calcular viabilidad y devolver el tramite. Los textos son los que
   renderiza permisos.php, no una version simplificada.                      */
.dm-pasos { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.dm-paso { display: flex; align-items: center; gap: 7px; font-size: 0.68rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.dm-paso b { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,0.07); color: var(--muted); font-size: 0.64rem; }
.dm-linea { flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
.reveal.visible .dm-paso.p1 b { animation: dmPaso1 var(--demoDur) infinite; }
.reveal.visible .dm-paso.p2 b { animation: dmPaso2 var(--demoDur) infinite; }
.reveal.visible .dm-paso.p3 b { animation: dmPaso3 var(--demoDur) infinite; }
@keyframes dmPaso1 {
    0%,3% { background: rgba(255,255,255,0.07); color: var(--muted); box-shadow: none; }
    6%    { background: var(--tono); color: #04121a; box-shadow: 0 0 0 6px color-mix(in srgb, var(--tono) 30%, transparent); }
    11%,97% { background: var(--tono); color: #04121a; box-shadow: 0 0 0 0 transparent; }
    100%  { background: rgba(255,255,255,0.07); color: var(--muted); }
}
@keyframes dmPaso2 {
    0%,37% { background: rgba(255,255,255,0.07); color: var(--muted); box-shadow: none; }
    40%   { background: var(--tono); color: #04121a; box-shadow: 0 0 0 6px color-mix(in srgb, var(--tono) 30%, transparent); }
    45%,97% { background: var(--tono); color: #04121a; box-shadow: 0 0 0 0 transparent; }
    100%  { background: rgba(255,255,255,0.07); color: var(--muted); }
}
@keyframes dmPaso3 {
    0%,68% { background: rgba(255,255,255,0.07); color: var(--muted); box-shadow: none; }
    71%   { background: var(--tono); color: #04121a; box-shadow: 0 0 0 6px color-mix(in srgb, var(--tono) 30%, transparent); }
    76%,97% { background: var(--tono); color: #04121a; box-shadow: 0 0 0 0 transparent; }
    100%  { background: rgba(255,255,255,0.07); color: var(--muted); }
}

.dm-mapa { position: relative; height: 158px; border-radius: 11px; overflow: hidden;
    background: radial-gradient(circle at 40% 52%, #16283a 0%, #0a121c 70%); border: 1px solid rgba(255,255,255,0.08); }
.dm-mapa .rejilla { position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 24px 24px; }

/* Rotulo de estado en la esquina del mapa. Sustituye al recuadro que antes se
   dibujaba dentro y tapaba la zona urbana justo cuando se estaba marcando. */
.dm-hud { position: absolute; top: 8px; left: 9px; z-index: 4; opacity: 0;
    font-family: 'Share Tech Mono', monospace; font-size: 0.58rem; letter-spacing: 0.4px;
    color: var(--tono); background: rgba(3,10,18,0.75); padding: 3px 7px; border-radius: 5px;
    border: 1px solid color-mix(in srgb, var(--tono) 30%, transparent); }
.reveal.visible .dm-hud { animation: dmHud var(--demoDur) infinite; }
@keyframes dmHud { 0%,37% { opacity: 0; } 40%,53% { opacity: 1; } 56%,100% { opacity: 0; } }

/* Barrido tipo radar durante el segundo paso. */
.dm-barrido { position: absolute; top: 0; bottom: 0; width: 90px; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tono) 22%, transparent) 60%, color-mix(in srgb, var(--tono) 70%, transparent));
    border-right: 1.5px solid var(--tono); }
.reveal.visible .dm-barrido { animation: dmBarrido var(--demoDur) infinite; }
@keyframes dmBarrido {
    0%,38%  { opacity: 0; transform: translateX(-110px); }
    40%     { opacity: 1; }
    52%     { opacity: 1; transform: translateX(460px); }
    54%,100%{ opacity: 0; transform: translateX(460px); }
}

/* Mira que converge sobre el punto antes de soltar el pin. */
.dm-mira { position: absolute; left: 26%; top: 62%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
    opacity: 0; z-index: 3; }
.dm-mira i { position: absolute; inset: 0; border: 1.5px solid var(--tono); border-radius: 50%; }
.dm-mira i:nth-child(2) { inset: 12px; border-style: dashed; opacity: 0.6; }
.reveal.visible .dm-mira { animation: dmMira var(--demoDur) infinite; }
@keyframes dmMira {
    0%,5%   { opacity: 0; transform: scale(2.1) rotate(-25deg); }
    8%      { opacity: 0.9; }
    13%     { opacity: 0.9; transform: scale(1) rotate(0deg); }
    19%,100%{ opacity: 0; transform: scale(0.7) rotate(0deg); }
}

.dm-zona { position: absolute; opacity: 0; }
.dm-zona span { position: absolute; top: -9px; left: 6px; font-size: 0.53rem; font-weight: 800; letter-spacing: 0.8px;
    padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.dm-urb { left: 8%; top: 46%; width: 106px; height: 58px; border-radius: 7px;
    border: 1.5px solid rgba(245,158,11,0.55); background: rgba(245,158,11,0.1); }
.dm-urb span { background: rgba(245,158,11,0.9); color: #1a1000; }
.dm-ctr { right: 5%; top: 9%; width: 100px; height: 100px; border-radius: 50%;
    border: 1.5px dashed rgba(239,68,68,0.55); background: rgba(239,68,68,0.07); }
.dm-ctr span { background: rgba(239,68,68,0.9); color: #fff; top: 42%; left: 12%; }
.reveal.visible .dm-urb { animation: dmZonaA var(--demoDur) infinite; }
.reveal.visible .dm-ctr { animation: dmZonaB var(--demoDur) infinite; }
@keyframes dmZonaA { 0%,43% { opacity: 0; transform: scale(0.86); } 46% { opacity: 1; transform: scale(1.07); } 49%,96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.86); } }
@keyframes dmZonaB { 0%,46% { opacity: 0; transform: scale(0.86); } 49% { opacity: 1; transform: scale(1.07); } 52%,96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.86); } }

.dm-pin { position: absolute; left: 26%; top: 62%; width: 14px; height: 14px; margin: -14px 0 0 -7px; opacity: 0; z-index: 5; }
.dm-pin::after { content: ''; position: absolute; inset: 0; border-radius: 50% 50% 50% 0;
    background: var(--tono); transform: rotate(-45deg); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--tono) 75%, transparent); }
.reveal.visible .dm-pin { animation: dmPin var(--demoDur) infinite; }
@keyframes dmPin {
    0%,12% { opacity: 0; transform: translateY(-26px) scale(0.7); }
    16%    { opacity: 1; transform: translateY(2px) scale(1.15); }
    18%,96%{ opacity: 1; transform: translateY(0) scale(1); }
    100%   { opacity: 0; transform: translateY(-26px) scale(0.7); }
}
.dm-onda { position: absolute; left: 26%; top: 62%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%; border: 2px solid var(--tono); opacity: 0; z-index: 4; }
.reveal.visible .dm-onda { animation: dmOndaA var(--demoDur) infinite; }
.reveal.visible .dm-onda.o2 { animation: dmOndaB var(--demoDur) infinite; }
@keyframes dmOndaA { 0%,14% { opacity: 0; transform: scale(0.4); } 17% { opacity: 0.8; } 30%,100% { opacity: 0; transform: scale(6); } }
@keyframes dmOndaB { 0%,17% { opacity: 0; transform: scale(0.4); } 20% { opacity: 0.7; } 33%,100% { opacity: 0; transform: scale(6); } }

/* Franja "Ubicacion fijada". Va DEBAJO del mapa, como en la herramienta real:
   dentro tapaba la zona urbana en el momento en que se estaba dibujando. */
.dm-fijada { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: 9px; opacity: 0;
    background: rgba(0,200,255,0.05); border: 1px solid color-mix(in srgb, var(--tono) 32%, transparent);
    border-radius: 9px; padding: 7px 11px; }
.dm-fijada b { font-size: 0.7rem; color: #fff; font-weight: 800; }
.dm-fijada b::before { content: '📍 '; }
.dm-fijada .coord { font-family: 'Share Tech Mono', monospace; font-size: 0.67rem; color: var(--tono); }
.dm-fijada .det { font-size: 0.62rem; color: var(--amber); font-weight: 700; margin-left: auto; }
.reveal.visible .dm-fijada { animation: dmFijada var(--demoDur) infinite; }
@keyframes dmFijada { 0%,17% { opacity: 0; transform: translateY(8px); } 21%,96% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(8px); } }

/* Overlay "Calculando Viabilidad": el mismo cartel que muestra la herramienta
   mientras resuelve. Marca el corte entre analizar y responder. */
.dm-cargando { position: absolute; inset: 0; z-index: 8; opacity: 0; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px;
    background: rgba(5,10,18,0.84); backdrop-filter: blur(3px); }
.dm-cargando b { font-size: 0.85rem; font-weight: 800; color: #fff; letter-spacing: 0.3px; }
.dm-cargando .aspa { width: 30px; height: 30px; border-radius: 50%;
    border: 2.5px solid color-mix(in srgb, var(--tono) 22%, transparent); border-top-color: var(--tono); }
.reveal.visible .dm-cargando { animation: dmCarga var(--demoDur) infinite; }
.reveal.visible .dm-cargando .aspa { animation: dmGiro 0.8s linear infinite; }
@keyframes dmCarga { 0%,53% { opacity: 0; } 56%,64% { opacity: 1; } 67%,100% { opacity: 0; } }
@keyframes dmGiro { to { transform: rotate(360deg); } }

.reveal.visible .dm-cursor { animation: dmCur var(--demoDur) infinite; }
@keyframes dmCur {
    0%,2%  { opacity: 0; left: 64%; top: 80%; }
    5%     { opacity: 1; }
    11%    { left: 26%; top: 66%; opacity: 1; }
    12%    { transform: scale(0.75); }
    14%    { transform: scale(1); }
    20%    { opacity: 1; }
    25%,100% { opacity: 0; }
}

/* Cabecera de diagnostico: los tres estados reales son Via Libre, Tramite
   Burocratico y Vuelo Restringido/Denegado. Aqui se muestra el intermedio. */
.dm-res { display: flex; align-items: center; gap: 11px; margin-top: 10px; opacity: 0;
    border-radius: 11px; padding: 10px 13px; background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.28); }
.dm-res .ico { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
.dm-res b { display: block; font-size: 0.9rem; color: #fff; font-weight: 800; }
.dm-res span { font-size: 0.71rem; color: var(--muted); line-height: 1.4; }
.reveal.visible .dm-res { animation: dmRes var(--demoDur) infinite; }
@keyframes dmRes { 0%,68% { opacity: 0; transform: translateY(10px); } 72%,96% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }

.dm-diag { margin-top: 9px; border-radius: 11px; padding: 11px 13px; opacity: 0;
    border: 1px solid rgba(255,255,255,0.07); border-left: 3px solid var(--amber);
    background: rgba(245,158,11,0.05); }
.dm-diag .cab { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; flex-wrap: wrap; }
.dm-diag .t { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 0.8rem; color: var(--amber); }
.dm-diag .pill { margin-left: auto; background: var(--amber); color: #1a1000; padding: 3px 8px;
    border-radius: 50px; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.3px; white-space: nowrap; }
.dm-diag .d { font-size: 0.74rem; color: var(--muted); line-height: 1.5; }
.dm-diag .d strong { color: var(--text); font-weight: 700; }
.dm-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.dm-tags span { font-size: 0.63rem; font-weight: 700; padding: 4px 8px; border-radius: 5px; background: rgba(255,255,255,0.07); opacity: 0; }
.reveal.visible .dm-diag { animation: dmSube var(--demoDur) infinite; }
.reveal.visible .dm-tags span:nth-child(1) { animation: dmTagA var(--demoDur) infinite; }
.reveal.visible .dm-tags span:nth-child(2) { animation: dmTagB var(--demoDur) infinite; }
.reveal.visible .dm-tags span:nth-child(3) { animation: dmTagC var(--demoDur) infinite; }
@keyframes dmTagA { 0%,78% { opacity: 0; transform: translateY(5px); } 81%,96% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes dmTagB { 0%,80% { opacity: 0; transform: translateY(5px); } 83%,96% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes dmTagC { 0%,82% { opacity: 0; transform: translateY(5px); } 85%,96% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }

/* ══ DEMO 2 · Aviso al Ministerio del Interior ═════════════════════════════
   Calcado del asistente de ministerio.php: Operador y Piloto, Aeronave y
   Equipamiento, Operacion y Coordenadas, Generar Documento, y el cartel
   "Compilando Anexo" que sale al final.                                     */
.dw-prog { position: relative; display: flex; justify-content: space-between; margin-bottom: 15px; }
.dw-linea { position: absolute; left: 9px; right: 9px; top: 10px; height: 2px; background: rgba(255,255,255,0.08); }
.dw-linea i { display: block; height: 100%; width: 0; background: var(--tono);
    box-shadow: 0 0 8px color-mix(in srgb, var(--tono) 60%, transparent); }
.dw-p { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dw-p b { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 0.62rem;
    font-weight: 800; background: #131722; border: 1.5px solid rgba(255,255,255,0.12); color: var(--muted); }
.dw-p u { font-size: 0.58rem; text-decoration: none; color: var(--muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px; }
.reveal.visible .dw-linea i { animation: dwLinea var(--demoDur) infinite; }
@keyframes dwLinea { 0%,4% { width: 0; } 14% { width: 20%; } 40% { width: 42%; } 56% { width: 68%; } 72%,96% { width: 100%; } 100% { width: 0; } }
.reveal.visible .dw-p.w1 b { animation: dwOn var(--demoDur) infinite; }
.reveal.visible .dw-p.w2 b { animation: dwOn2 var(--demoDur) infinite; }
.reveal.visible .dw-p.w3 b { animation: dwOn3 var(--demoDur) infinite; }
.reveal.visible .dw-p.w4 b { animation: dwOn4 var(--demoDur) infinite; }
@keyframes dwOn  { 0%,4%  { background: #131722; color: var(--muted); border-color: rgba(255,255,255,0.12); } 7%,96% { background: var(--tono); color: #1a1000; border-color: var(--tono); } 100% { background: #131722; color: var(--muted); } }
@keyframes dwOn2 { 0%,13% { background: #131722; color: var(--muted); border-color: rgba(255,255,255,0.12); } 16%,96% { background: var(--tono); color: #1a1000; border-color: var(--tono); } 100% { background: #131722; color: var(--muted); } }
@keyframes dwOn3 { 0%,40% { background: #131722; color: var(--muted); border-color: rgba(255,255,255,0.12); } 43%,96% { background: var(--tono); color: #1a1000; border-color: var(--tono); } 100% { background: #131722; color: var(--muted); } }
@keyframes dwOn4 { 0%,70% { background: #131722; color: var(--muted); border-color: rgba(255,255,255,0.12); } 73%,96% { background: var(--tono); color: #1a1000; border-color: var(--tono); } 100% { background: #131722; color: var(--muted); } }

.dr-campos { display: flex; flex-direction: column; gap: 6px; }
.dr-c { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 9px; opacity: 0;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); }
.dr-c .k { font-size: 0.62rem; color: var(--muted); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; width: 40%; flex-shrink: 0; }
.dr-c .v { font-size: 0.73rem; color: #fff; font-weight: 700; }
.dr-c .v.mono { font-family: 'Share Tech Mono', monospace; font-weight: 400; }
.dr-c .ok { margin-left: auto; color: var(--green); font-weight: 900; font-size: 0.8rem; }
.reveal.visible .dr-c.c1 { animation: drC1 var(--demoDur) infinite; }
.reveal.visible .dr-c.c2 { animation: drC2 var(--demoDur) infinite; }
.reveal.visible .dr-c.c3 { animation: drC3 var(--demoDur) infinite; }
.reveal.visible .dr-c.c4 { animation: drC4 var(--demoDur) infinite; }
@keyframes drC1 { 0%,6%  { opacity: 0; transform: translateX(-9px); } 10%,96% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes drC2 { 0%,12% { opacity: 0; transform: translateX(-9px); } 16%,96% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes drC3 { 0%,18% { opacity: 0; transform: translateX(-9px); } 22%,96% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
/* Este es el que llega en la fase 2, cuando el texto habla de las coordenadas. */
@keyframes drC4 { 0%,42% { opacity: 0; transform: translateX(-9px); } 46% { opacity: 1; transform: translateX(0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono) 25%, transparent); } 52%,96% { opacity: 1; box-shadow: none; } 100% { opacity: 0; } }
.reveal.visible .dr-carga { animation: drCarga var(--demoDur) infinite; }
@keyframes drCarga { 0%,55% { opacity: 0; } 58%,66% { opacity: 1; } 69%,100% { opacity: 0; } }

.dr-doc { display: flex; gap: 13px; align-items: center; margin-top: 12px; opacity: 0;
    border-radius: 11px; padding: 11px 13px; background: color-mix(in srgb, var(--tono) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--tono) 26%, transparent); }
.dr-doc .hoja { position: relative; width: 62px; height: 80px; flex-shrink: 0; border-radius: 4px;
    background: #f4f5f7; padding: 9px 7px; display: flex; flex-direction: column; gap: 4px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.45); }
.dr-doc .hoja .l { display: block; height: 3px; border-radius: 2px; background: #b9bfc9; }
.dr-doc .hoja .w95 { width: 95%; } .dr-doc .hoja .w88 { width: 88%; }
.dr-doc .hoja .w80 { width: 80%; } .dr-doc .hoja .w70 { width: 70%; } .dr-doc .hoja .w60 { width: 60%; }
.dr-doc .hoja .sello { align-self: flex-end; font-size: 0.42rem; font-weight: 900; letter-spacing: 0.5px;
    color: var(--tono); border: 1.2px solid var(--tono); border-radius: 3px; padding: 1px 3px;
    transform: rotate(-11deg); margin: 2px 2px 3px 0; opacity: 0; }
.dr-doc .hoja .firma { width: 60%; height: 9px; margin-top: auto; border-radius: 2px;
    background: repeating-linear-gradient(115deg, #4a5568 0 2px, transparent 2px 4px); opacity: 0; }
.reveal.visible .dr-doc .sello { animation: drSello var(--demoDur) infinite; }
.reveal.visible .dr-doc .firma { animation: drFirma var(--demoDur) infinite; }
@keyframes drSello { 0%,77% { opacity: 0; transform: rotate(-11deg) scale(2.4); } 81%,96% { opacity: 1; transform: rotate(-11deg) scale(1); } 100% { opacity: 0; } }
@keyframes drFirma { 0%,83% { opacity: 0; } 87%,96% { opacity: 1; } 100% { opacity: 0; } }
.dr-doc .meta b { display: block; font-size: 0.82rem; color: #fff; font-weight: 800; margin-bottom: 3px; }
.dr-doc .meta > span { display: block; font-size: 0.68rem; color: var(--muted); line-height: 1.45; }
.dr-doc .meta .pill { display: inline-block; margin-top: 7px; background: var(--tono); color: #1a1000;
    padding: 3px 8px; border-radius: 50px; font-size: 0.55rem; font-weight: 900; letter-spacing: 0.3px; }
.reveal.visible .dr-doc { animation: dmRes var(--demoDur) infinite; }

/* ══ DEMO 3 · Generador EARO ═══════════════════════════════════════════════
   Los seis bloques son los de earo.php (Aeronave, Mapa, SORA, MAE/MAT,
   Archivos, Firma) y los tres pasos finales son los que la propia pantalla de
   descarga enumera: convertir a PDF, firmar con AutoFirma y subir a Planea. */
.de-prog { margin-bottom: 14px; }
.de-track { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.de-track i { display: block; height: 100%; width: 0; border-radius: 3px;
    background: linear-gradient(90deg, var(--tono), #a5b4fc);
    box-shadow: 0 0 10px color-mix(in srgb, var(--tono) 60%, transparent); }
.reveal.visible .de-track i { animation: deTrack var(--demoDur) infinite; }
@keyframes deTrack { 0%,4% { width: 0; } 30% { width: 66%; } 52%,96% { width: 100%; } 100% { width: 0; } }
.de-et { display: flex; justify-content: space-between; margin-top: 7px; }
.de-et em { font-style: normal; font-size: 0.57rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.3px; color: var(--muted); }
.reveal.visible .de-et em:nth-child(1) { animation: deEt var(--demoDur) infinite; }
.reveal.visible .de-et em:nth-child(2) { animation: deEt2 var(--demoDur) infinite; }
.reveal.visible .de-et em:nth-child(3) { animation: deEt3 var(--demoDur) infinite; }
.reveal.visible .de-et em:nth-child(4) { animation: deEt4 var(--demoDur) infinite; }
.reveal.visible .de-et em:nth-child(5) { animation: deEt5 var(--demoDur) infinite; }
.reveal.visible .de-et em:nth-child(6) { animation: deEt6 var(--demoDur) infinite; }
@keyframes deEt  { 0%,5%  { color: var(--muted); } 8%,96%  { color: var(--tono); } 100% { color: var(--muted); } }
@keyframes deEt2 { 0%,9%  { color: var(--muted); } 12%,96% { color: var(--tono); } 100% { color: var(--muted); } }
@keyframes deEt3 { 0%,13% { color: var(--muted); } 16%,96% { color: var(--tono); } 100% { color: var(--muted); } }
@keyframes deEt4 { 0%,17% { color: var(--muted); } 20%,96% { color: var(--tono); } 100% { color: var(--muted); } }
@keyframes deEt5 { 0%,21% { color: var(--muted); } 24%,96% { color: var(--tono); } 100% { color: var(--muted); } }
@keyframes deEt6 { 0%,25% { color: var(--muted); } 28%,96% { color: var(--tono); } 100% { color: var(--muted); } }

/* Las dos etapas comparten hueco y se relevan sin mover el resto: primero los
   campos que vas rellenando, y en su sitio aparece luego la evaluacion SORA. */
.de-etapa { position: relative; height: 74px; }
.de-campos, .de-sora { position: absolute; inset: 0; }
.de-campos { display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.de-campos .dv { display: flex; align-items: baseline; gap: 9px; font-size: 0.68rem; opacity: 0;
    padding: 4px 9px; border-radius: 7px; background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07); }
.de-campos .k { font-size: 0.55rem; color: var(--muted); font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.4px; width: 62px; flex-shrink: 0; }
.de-campos .v { color: #fff; font-weight: 700; }
.reveal.visible .de-campos .v1 { animation: deV1 var(--demoDur) infinite; }
.reveal.visible .de-campos .v2 { animation: deV2 var(--demoDur) infinite; }
.reveal.visible .de-campos .v3 { animation: deV3 var(--demoDur) infinite; }
@keyframes deV1 { 0%,7%  { opacity: 0; transform: translateX(-8px); } 11%,31% { opacity: 1; transform: translateX(0); } 36%,100% { opacity: 0; } }
@keyframes deV2 { 0%,13% { opacity: 0; transform: translateX(-8px); } 17%,31% { opacity: 1; transform: translateX(0); } 36%,100% { opacity: 0; } }
@keyframes deV3 { 0%,19% { opacity: 0; transform: translateX(-8px); } 23%,31% { opacity: 1; transform: translateX(0); } 36%,100% { opacity: 0; } }
.de-sora { display: flex; align-items: center; gap: 8px; }

.de-s { flex: 1; text-align: center; border-radius: 10px; padding: 9px 6px; opacity: 0;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); }
.de-s .et { display: block; font-size: 0.54rem; color: var(--muted); font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.8px; }
.de-s b { display: block; font-size: 1.25rem; font-weight: 900; color: var(--tono); line-height: 1.15; }
.de-s .d { display: block; font-size: 0.55rem; color: var(--muted); }
.de-fl { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); opacity: 0; }
.reveal.visible .de-s.s1 { animation: deS1 var(--demoDur) infinite; }
.reveal.visible .de-s.s2 { animation: deS2 var(--demoDur) infinite; }
.reveal.visible .de-s.s3 { animation: deS3 var(--demoDur) infinite; }
.reveal.visible .de-fl:nth-of-type(1) { animation: deS2 var(--demoDur) infinite; }
.reveal.visible .de-fl:nth-of-type(2) { animation: deS3 var(--demoDur) infinite; }
@keyframes deS1 { 0%,38% { opacity: 0; transform: translateY(8px); } 42%,96% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes deS2 { 0%,42% { opacity: 0; transform: translateY(8px); } 46%,96% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes deS3 { 0%,46% { opacity: 0; transform: translateY(8px); } 50%,96% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }

.de-mit { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.de-mit .m { font-size: 0.66rem; font-weight: 700; color: var(--text); opacity: 0;
    padding: 6px 10px; border-radius: 7px; border-left: 2px solid var(--tono);
    background: color-mix(in srgb, var(--tono) 8%, transparent); }
.reveal.visible .de-mit .m1 { animation: deM1 var(--demoDur) infinite; }
.reveal.visible .de-mit .m2 { animation: deM2 var(--demoDur) infinite; }
@keyframes deM1 { 0%,52% { opacity: 0; transform: translateX(-8px); } 56%,96% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes deM2 { 0%,55% { opacity: 0; transform: translateX(-8px); } 59%,96% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }

.de-doc { display: flex; align-items: center; gap: 11px; margin-top: 12px; opacity: 0;
    border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--tono) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--tono) 28%, transparent); }
.de-doc .ico { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center;
    background: color-mix(in srgb, var(--tono) 20%, transparent); color: var(--tono); }
.de-doc .ico svg { width: 17px; height: 17px; }
.de-doc b { display: block; font-size: 0.76rem; color: #fff; font-weight: 800;
    font-family: 'Share Tech Mono', monospace; }
.de-doc span { font-size: 0.65rem; color: var(--muted); }
.reveal.visible .de-doc { animation: dmRes var(--demoDur) infinite; }

.de-sig { margin-top: 10px; }
.de-sig .t { display: block; font-size: 0.55rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: var(--muted); margin-bottom: 6px; }
.de-p { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 8px; opacity: 0;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 5px; font-size: 0.68rem; font-weight: 700; }
.de-p i { width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
    font-style: normal; font-size: 0.55rem; font-weight: 900; color: #06070f; }
.de-p.p1 i { background: var(--accent); }
.de-p.p2 i { background: #ec4899; }
.de-p.p3 i { background: var(--green); }
.reveal.visible .de-p.p1 { animation: deP1 var(--demoDur) infinite; }
.reveal.visible .de-p.p2 { animation: deP2 var(--demoDur) infinite; }
.reveal.visible .de-p.p3 { animation: deP3 var(--demoDur) infinite; }
@keyframes deP1 { 0%,77% { opacity: 0; transform: translateX(-8px); } 80%,96% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes deP2 { 0%,80% { opacity: 0; transform: translateX(-8px); } 83%,96% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes deP3 { 0%,83% { opacity: 0; transform: translateX(-8px); } 86%,96% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }

/* ══ DEMO 4 · Simulador de tests ═══════════════════════════════════════════ */
.dt-cab { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.dt-num { width: 26px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--tono) 16%, transparent);
    color: var(--tono); display: grid; place-items: center; font-weight: 800; font-size: 0.78rem; flex-shrink: 0; }
.dt-meta b { display: block; font-size: 0.76rem; font-weight: 800; }
.dt-meta span { font-size: 0.62rem; color: var(--muted); letter-spacing: 0.6px; }
.dt-crono { margin-left: auto; font-family: 'Share Tech Mono', monospace; font-size: 0.78rem; color: var(--muted);
    background: rgba(0,0,0,0.3); padding: 4px 9px; border-radius: 6px; }
.dt-preg { font-size: 0.89rem; font-weight: 700; line-height: 1.45; margin-bottom: 13px; }
.dt-op { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 9px;
    border: 1.5px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); margin-bottom: 7px;
    font-size: 0.79rem; line-height: 1.4; }
.dt-op i { width: 20px; height: 20px; border-radius: 6px; background: rgba(255,255,255,0.08); flex-shrink: 0;
    display: grid; place-items: center; font-size: 0.65rem; font-weight: 800; font-style: normal; color: var(--muted); }
.dt-op .marca { margin-left: auto; font-size: 0.9rem; font-weight: 900; opacity: 0; }

.reveal.visible .dt-op.elegida  { animation: dtSel var(--demoDur) infinite; }
.reveal.visible .dt-op.correcta { animation: dtOk  var(--demoDur) infinite; }
.reveal.visible .dt-op.correcta i { animation: dtOkI var(--demoDur) infinite; }
.reveal.visible .dt-op.correcta .marca { animation: dtMar var(--demoDur) infinite; }
.reveal.visible .dt-op.fallada  { animation: dtKo  var(--demoDur) infinite; }
.reveal.visible .dt-op.fallada i { animation: dtKoI var(--demoDur) infinite; }
.reveal.visible .dt-op.fallada .marca { animation: dtMar var(--demoDur) infinite; }
.reveal.visible .dt-cursor { animation: dtCur var(--demoDur) infinite; }

@keyframes dtSel { 0%,13% { border-color: rgba(255,255,255,0.07); } 16%,38% { border-color: var(--tono); background: color-mix(in srgb, var(--tono) 7%, transparent); } 42%,100% { border-color: rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); } }
@keyframes dtOk  { 0%,40% { border-color: rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); } 44%,96% { border-color: var(--green); background: rgba(16,185,129,0.1); } 100% { border-color: rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); } }
@keyframes dtOkI { 0%,40% { background: rgba(255,255,255,0.08); color: var(--muted); } 44%,96% { background: var(--green); color: #04140e; } 100% { background: rgba(255,255,255,0.08); color: var(--muted); } }
@keyframes dtKo  { 0%,39% { border-color: rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); } 43%,96% { border-color: var(--red); background: rgba(239,68,68,0.09); } 100% { border-color: rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); } }
@keyframes dtKoI { 0%,39% { background: rgba(255,255,255,0.08); color: var(--muted); } 43%,96% { background: var(--red); color: #fff; } 100% { background: rgba(255,255,255,0.08); color: var(--muted); } }
@keyframes dtMar { 0%,41% { opacity: 0; } 46%,96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dtCur { 0%,3% { opacity: 0; left: 70%; top: 20%; } 6% { opacity: 1; } 13% { left: 30%; top: 62%; opacity: 1; } 14% { transform: scale(0.8); } 16% { transform: scale(1); } 24% { opacity: 1; } 30%,100% { opacity: 0; } }

.dt-exp { margin-top: 11px; border-left: 3px solid var(--tono); border-radius: 0 9px 9px 0;
    background: color-mix(in srgb, var(--tono) 7%, transparent); padding: 11px 14px; opacity: 0; }
.dt-exp b { display: block; font-size: 0.74rem; color: var(--tono); margin-bottom: 4px; font-weight: 800; }
.dt-exp p { font-size: 0.73rem; color: var(--muted); line-height: 1.55; margin: 0; }
.reveal.visible .dt-exp { animation: dmSube var(--demoDur) infinite; }

/* ══ DEMO 5 · Comparador de drones ═════════════════════════════════════════ */
.dc-cab { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 8px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 4px; }
.dc-cab div { text-align: center; }
.dc-cab .et { font-size: 0.6rem; color: var(--muted); letter-spacing: 1px; font-weight: 800; text-align: left; align-self: end; }
.dc-cab b { display: block; font-size: 0.78rem; font-weight: 800; }
.dc-cab u { display: block; font-size: 0.66rem; color: var(--tono); font-weight: 700; text-decoration: none; }
.dc-fila { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 8px; padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.045); font-size: 0.74rem; opacity: 0; }
.dc-fila .k { color: var(--muted); font-weight: 600; }
.dc-fila .v { text-align: center; font-weight: 700; }
/* El ganador no nace verde: se marca en la fase 2, que es cuando el texto
   dice que el comparador senala cual gana en cada especificacion. */
.dc-fila .v.gana { color: var(--text); }
.reveal.visible .dc-fila.f1 { animation: dcFilaA var(--demoDur) infinite; }
.reveal.visible .dc-fila.f2 { animation: dcFilaB var(--demoDur) infinite; }
.reveal.visible .dc-fila.f3 { animation: dcFilaC var(--demoDur) infinite; }
.reveal.visible .dc-fila.f4 { animation: dcFilaD var(--demoDur) infinite; }
.reveal.visible .dc-fila.f5 { animation: dcFilaE var(--demoDur) infinite; }
@keyframes dcFilaA { 0%,4%  { opacity: 0; transform: translateX(-9px); } 8%,96%  { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes dcFilaB { 0%,8%  { opacity: 0; transform: translateX(-9px); } 12%,96% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes dcFilaC { 0%,12% { opacity: 0; transform: translateX(-9px); } 16%,96% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes dcFilaD { 0%,16% { opacity: 0; transform: translateX(-9px); } 20%,96% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes dcFilaE { 0%,20% { opacity: 0; transform: translateX(-9px); } 24%,96% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
.reveal.visible .dc-fila.f1 .v.gana { animation: dcGana var(--demoDur) infinite; }
.reveal.visible .dc-fila.f2 .v.gana { animation: dcGana var(--demoDur) infinite; }
.reveal.visible .dc-fila.f3 .v.gana { animation: dcGana var(--demoDur) infinite; }
.reveal.visible .dc-fila.f4 .v.gana { animation: dcGana var(--demoDur) infinite; }
.reveal.visible .dc-fila.f5 .v.gana { animation: dcGana var(--demoDur) infinite; }
@keyframes dcGana {
    0%,40% { color: var(--text); text-shadow: none; }
    45%    { color: var(--green); text-shadow: 0 0 12px rgba(16,185,129,0.8); }
    50%,96%{ color: var(--green); text-shadow: none; }
    100%   { color: var(--text); }
}
.dc-veredicto { margin-top: 12px; border-radius: 10px; padding: 11px 13px; opacity: 0;
    background: color-mix(in srgb, var(--tono) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--tono) 25%, transparent); font-size: 0.75rem; line-height: 1.5; }
.dc-veredicto b { color: var(--tono); }
.reveal.visible .dc-veredicto { animation: dmSube var(--demoDur) infinite; }

/* ══ DEMO 6 · Academia gamificada ══════════════════════════════════════════ */
.da-top { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; color: var(--muted); font-weight: 700; }
.da-top b { color: var(--text); font-size: 0.8rem; }
.da-barra { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; margin: 7px 0 14px; }
.da-barra i { display: block; height: 100%; width: 12%; background: linear-gradient(90deg, var(--tono), #a855f7); border-radius: 4px; }
.reveal.visible .da-barra i { animation: daProg var(--demoDur) infinite; }
@keyframes daProg { 0%,6% { width: 12%; } 30%,96% { width: 74%; } 100% { width: 12%; } }
.da-fila { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); margin-bottom: 7px;
    font-size: 0.77rem; opacity: 0; }
.da-fila .ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
    font-size: 0.7rem; font-weight: 800; flex-shrink: 0;
    background: color-mix(in srgb, var(--tono) 16%, transparent); color: var(--tono); }
.da-fila .xp { margin-left: auto; font-size: 0.67rem; font-weight: 800; color: var(--green); white-space: nowrap; }
.reveal.visible .da-fila.l1 { animation: daFilaA var(--demoDur) infinite; }
.reveal.visible .da-fila.l2 { animation: daFilaB var(--demoDur) infinite; }
.reveal.visible .da-fila.l3 { animation: daFilaC var(--demoDur) infinite; }
@keyframes daFilaA { 0%,38% { opacity: 0; transform: translateX(-9px); } 42%,96% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes daFilaB { 0%,44% { opacity: 0; transform: translateX(-9px); } 48%,96% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes daFilaC { 0%,50% { opacity: 0; transform: translateX(-9px); } 54%,96% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
.da-logro { margin-top: 12px; display: flex; align-items: center; gap: 11px; padding: 12px 14px;
    border-radius: 11px; opacity: 0; background: rgba(245,158,11,0.09); border: 1px solid rgba(245,158,11,0.3); }
.da-logro b { font-size: 0.8rem; color: var(--amber); display: block; }
.da-logro span { font-size: 0.7rem; color: var(--muted); }
.reveal.visible .da-logro { animation: dmSube var(--demoDur) infinite; }

/* ══ DEMO 7 · Panel del piloto ═════════════════════════════════════════════
   Reproduce el carnet digital de usuario/panel/panel.php: cara frontal con
   numero de operador y titulaciones, y reverso con el registro de flota. El
   giro es la interaccion real del panel, no un adorno inventado.            */
.dp-escena { perspective: 1100px; display: grid; place-items: center; margin-bottom: 14px; }
.dp-tarjeta { position: relative; width: min(360px, 100%); aspect-ratio: 1.6 / 1; transform-style: preserve-3d; }
.reveal.visible .dp-tarjeta { animation: dpGiro var(--demoDur) infinite; }
@keyframes dpGiro {
    0%,34%   { transform: rotateY(0deg); }
    42%,64%  { transform: rotateY(180deg); }
    72%,100% { transform: rotateY(0deg); }
}
.dp-cara { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 13px; overflow: hidden;
    display: flex; flex-direction: column;
    background: linear-gradient(135deg, #140a1a 0%, #0a050d 100%);
    box-shadow: 0 16px 34px rgba(0,0,0,0.6), 0 0 0 1px color-mix(in srgb, var(--tono) 30%, transparent),
                0 0 26px color-mix(in srgb, var(--tono) 18%, transparent); }

/* Brillo holografico: es la misma animacion "holograma" del panel real. */
.dp-holo { position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background: linear-gradient(125deg, transparent 40%, color-mix(in srgb, var(--tono) 5%, transparent) 48%,
        color-mix(in srgb, var(--tono) 22%, transparent) 50%, color-mix(in srgb, var(--tono) 5%, transparent) 52%, transparent 60%);
    background-size: 200% 200%; }
.reveal.visible .dp-holo { animation: dpHolo 4s infinite linear; }
@keyframes dpHolo { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.dp-head { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--tono) 20%, transparent), rgba(0,0,0,0));
    border-bottom: 1px solid rgba(255,255,255,0.08); position: relative; z-index: 1; }
.dp-head b { font-size: 0.72rem; font-weight: 900; letter-spacing: 1px; color: var(--tono);
    text-shadow: 0 0 10px color-mix(in srgb, var(--tono) 50%, transparent); }
.dp-head span { font-size: 0.55rem; color: var(--muted); font-weight: 800; text-transform: uppercase; }

.dp-body { display: flex; gap: 11px; padding: 10px 12px; flex: 1; align-items: center; position: relative; z-index: 1; }
.dp-foto { width: 50px; height: 64px; border-radius: 8px; flex-shrink: 0; background: #000;
    border: 1.5px solid var(--tono); box-shadow: 0 0 12px color-mix(in srgb, var(--tono) 35%, transparent);
    display: grid; place-items: center; color: color-mix(in srgb, var(--tono) 70%, transparent); }
.dp-foto svg { width: 26px; height: 26px; }
.dp-info { flex: 1; min-width: 0; }
.dp-info .lbl { display: block; font-size: 0.5rem; color: var(--muted); text-transform: uppercase;
    font-weight: 800; letter-spacing: 0.5px; }
.dp-info .nom { display: block; font-size: 0.92rem; font-weight: 900; color: #fff; letter-spacing: 0.3px; margin-bottom: 6px; }
.dp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
.dp-grid .val { display: block; font-size: 0.64rem; color: #fff; font-weight: 800; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.dp-grid .val.mono { font-family: 'Share Tech Mono', monospace; font-weight: 400; }

.dp-foot { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px;
    background: rgba(0,0,0,0.45); border-top: 1px dashed rgba(255,255,255,0.1); position: relative; z-index: 1; }
.dp-lics { display: flex; gap: 4px; }
.dp-lics span { font-size: 0.52rem; font-weight: 900; padding: 3px 6px; border-radius: 5px; color: #fff;
    background: linear-gradient(135deg, #c850ff 0%, #00c8ff 100%); box-shadow: 0 0 10px rgba(200,80,255,0.45); opacity: 0; }
.reveal.visible .dp-lics span:nth-child(1) { animation: dpBadgeA var(--demoDur) infinite; }
.reveal.visible .dp-lics span:nth-child(2) { animation: dpBadgeB var(--demoDur) infinite; }
.reveal.visible .dp-lics span:nth-child(3) { animation: dpBadgeC var(--demoDur) infinite; }
@keyframes dpBadgeA { 0%,9%  { opacity: 0; transform: scale(0.6); } 12% { opacity: 1; transform: scale(1.15); } 15%,100% { opacity: 1; transform: scale(1); } }
@keyframes dpBadgeB { 0%,12% { opacity: 0; transform: scale(0.6); } 15% { opacity: 1; transform: scale(1.15); } 18%,100% { opacity: 1; transform: scale(1); } }
@keyframes dpBadgeC { 0%,15% { opacity: 0; transform: scale(0.6); } 18% { opacity: 1; transform: scale(1.15); } 21%,100% { opacity: 1; transform: scale(1); } }
.dp-mrz { font-family: 'Share Tech Mono', monospace; font-size: 0.55rem; color: var(--muted); letter-spacing: 1.5px; }
.dp-vuelta { position: absolute; bottom: 32px; right: 12px; z-index: 2; font-size: 0.5rem; font-weight: 800;
    text-transform: uppercase; color: rgba(255,255,255,0.45); letter-spacing: 0.3px; }
.reveal.visible .dp-vuelta { animation: dpParpadeo var(--demoDur) infinite; }
@keyframes dpParpadeo { 0%,25% { opacity: 0.45; } 28% { opacity: 1; color: #fff; } 30% { opacity: 0.45; } 32% { opacity: 1; color: #fff; } 35%,100% { opacity: 0.45; } }

/* ── Reverso: registro de flota ── */
.dp-dorso { transform: rotateY(180deg); background: #0a050d; }
.dp-banda { display: block; width: 100%; height: 26px; background: #000; margin-top: 14px; flex-shrink: 0; }
.dp-dtitulo { font-size: 0.6rem; color: var(--tono); font-weight: 900; text-transform: uppercase; letter-spacing: 1px;
    padding: 8px 12px 5px; border-bottom: 1px solid rgba(255,255,255,0.08); margin: 0 0 6px; }
.dp-flota { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; flex: 1; }
.dp-dron { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); opacity: 0; }
.dp-dron .cls { font-family: 'Share Tech Mono', monospace; font-size: 0.58rem; font-weight: 900; color: #fff;
    background: rgba(255,255,255,0.1); padding: 2px 5px; border-radius: 4px; flex-shrink: 0; }
.dp-dron b { display: block; font-size: 0.66rem; font-weight: 800; color: #fff; line-height: 1.25; }
.dp-dron > div > span { display: block; font-size: 0.52rem; color: var(--muted); font-family: 'Share Tech Mono', monospace; }
.dp-dron .est { margin-left: auto; font-size: 0.55rem; font-weight: 800; white-space: nowrap; }
.dp-dron .est.ok { color: var(--green); }
.dp-dron .est.mant { color: var(--amber); }
.reveal.visible .dp-dron:nth-child(1) { animation: dpFilaA var(--demoDur) infinite; }
.reveal.visible .dp-dron:nth-child(2) { animation: dpFilaB var(--demoDur) infinite; }
.reveal.visible .dp-dron:nth-child(3) { animation: dpFilaC var(--demoDur) infinite; }
@keyframes dpFilaA { 0%,43% { opacity: 0; transform: translateX(-10px); } 47%,62% { opacity: 1; transform: translateX(0); } 66%,100% { opacity: 0; } }
@keyframes dpFilaB { 0%,46% { opacity: 0; transform: translateX(-10px); } 50%,62% { opacity: 1; transform: translateX(0); } 66%,100% { opacity: 0; } }
@keyframes dpFilaC { 0%,49% { opacity: 0; transform: translateX(-10px); } 53%,62% { opacity: 1; transform: translateX(0); } 66%,100% { opacity: 0; } }
.dp-nota { display: block; font-size: 0.48rem; color: var(--muted); text-align: center; padding: 6px 12px 8px; }

/* ── Rejilla de areas del panel ── */
.dp-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.dp-area { border-radius: 9px; padding: 8px 9px; opacity: 0;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); }
.dp-area .ey { display: block; font-size: 0.5rem; color: var(--muted); text-transform: uppercase;
    font-weight: 800; letter-spacing: 0.6px; }
.dp-area b { display: block; font-size: 0.72rem; font-weight: 800; color: #fff; margin: 1px 0 3px; }
.dp-area .n { font-size: 0.56rem; color: var(--muted); }
.dp-area .n i { font-style: normal; font-weight: 800; color: var(--tono); }
.dp-area.a1 { border-left: 2px solid var(--accent); }
.dp-area.a2 { border-left: 2px solid var(--tono); }
.dp-area.a3 { border-left: 2px solid var(--green); }
.reveal.visible .dp-area.a1 { animation: dpAreaA var(--demoDur) infinite; }
.reveal.visible .dp-area.a2 { animation: dpAreaB var(--demoDur) infinite; }
.reveal.visible .dp-area.a3 { animation: dpAreaC var(--demoDur) infinite; }
@keyframes dpAreaA { 0%,71% { opacity: 0; transform: translateY(8px); } 75%,96% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes dpAreaB { 0%,73% { opacity: 0; transform: translateY(8px); } 77%,96% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes dpAreaC { 0%,75% { opacity: 0; transform: translateY(8px); } 79%,96% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }

.reveal.visible .dp-cursor { animation: dpCur var(--demoDur) infinite; }
@keyframes dpCur {
    0%,24% { opacity: 0; left: 22%; top: 78%; }
    27%    { opacity: 1; }
    33%    { left: 56%; top: 40%; opacity: 1; }
    34.5%  { transform: scale(0.75); }
    36%    { transform: scale(1); }
    40%,100% { opacity: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   MINI PANTALLAS DE LAS TARJETAS DEL PANEL UAS

   Misma idea que las demos grandes, en formato reducido: en vez de una figura
   abstracta, cada tarjeta enseña un trozo reconocible de la herramienta. El
   ciclo es de 8 s y tambien va en porcentaje absoluto, sin animation-delay.
       1 s = 12,5 %
   El color lo hereda de --glow-color, que ya distingue cada tarjeta.
   ══════════════════════════════════════════════════════════════════════════ */
.mini-frame { --mini: var(--glow-color, var(--accent)); --miniDur: 8s;
    margin-top: auto; border-radius: 12px; overflow: hidden; text-align: left;
    background: #0b0e16; border: 1px solid rgba(255,255,255,0.09); position: relative; z-index: 1;
    box-shadow: 0 10px 24px rgba(0,0,0,0.4), 0 0 0 1px color-mix(in srgb, var(--mini) 10%, transparent); }
.mini-chrome { display: flex; align-items: center; gap: 5px; padding: 6px 9px; background: #131722;
    border-bottom: 1px solid rgba(255,255,255,0.06); }
.mini-chrome i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.mini-chrome span { margin-left: 5px; font-family: 'Share Tech Mono', monospace; font-size: 0.57rem;
    color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-body { padding: 10px; min-height: 126px; display: flex; flex-direction: column; }

/* Entrada estandar de una fila dentro de una mini pantalla. */
@keyframes miFila { 0%,4% { opacity: 0; transform: translateX(-7px); } 9%,92% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }

/* ── Mantenimiento UAS ── */
.mm-fila { display: flex; align-items: center; gap: 7px; font-size: 0.66rem; margin-bottom: 5px; opacity: 0; }
.mm-fila .ic { width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0; display: grid; place-items: center;
    font-size: 0.55rem; font-weight: 900; }
.mm-fila .ic.ok { background: rgba(16,185,129,0.16); color: var(--green); }
.mm-fila .ic.due { background: rgba(245,158,11,0.18); color: var(--amber); }
.mm-fila b { font-weight: 700; color: var(--text); }
.mm-fila .v { margin-left: auto; color: var(--muted); font-family: 'Share Tech Mono', monospace; font-size: 0.6rem; }
.mm-fila .v.due { color: var(--amber); }
.reveal.visible .mm-fila.f1 { animation: miFila var(--miniDur) infinite; }
.reveal.visible .mm-fila.f2 { animation: mmF2 var(--miniDur) infinite; }
.reveal.visible .mm-fila.f3 { animation: mmF3 var(--miniDur) infinite; }
@keyframes mmF2 { 0%,10% { opacity: 0; transform: translateX(-7px); } 15%,92% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes mmF3 { 0%,16% { opacity: 0; transform: translateX(-7px); } 21%,92% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
.mm-barra { margin-top: auto; padding-top: 8px; }
.mm-barra i { display: block; height: 5px; border-radius: 3px; width: 0;
    background: linear-gradient(90deg, var(--mini), color-mix(in srgb, var(--mini) 45%, #fff));
    box-shadow: 0 0 8px color-mix(in srgb, var(--mini) 55%, transparent); }
.mm-barra span { display: block; font-size: 0.55rem; color: var(--muted); margin-top: 4px; }
.reveal.visible .mm-barra i { animation: mmBarra var(--miniDur) infinite; }
@keyframes mmBarra { 0%,24% { width: 0; } 42%,92% { width: 24%; } 100% { width: 0; } }

/* ── Alertas Meteo Kp ── */
.mw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.mw-c { border-radius: 8px; padding: 4px 8px; opacity: 0;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); }
.mw-c .et { display: block; font-size: 0.53rem; color: var(--muted); font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.4px; }
.mw-c b { font-size: 0.9rem; font-weight: 900; color: #fff; }
.mw-c .u { font-size: 0.55rem; color: var(--muted); margin-left: 3px; }
.reveal.visible .mw-c.f1 { animation: miFila var(--miniDur) infinite; }
.reveal.visible .mw-c.f2 { animation: mwF2 var(--miniDur) infinite; }
.reveal.visible .mw-c.f3 { animation: mwF3 var(--miniDur) infinite; }
.reveal.visible .mw-c.f4 { animation: mwF4 var(--miniDur) infinite; }
@keyframes mwF2 { 0%,8%  { opacity: 0; transform: translateY(6px); } 13%,92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes mwF3 { 0%,12% { opacity: 0; transform: translateY(6px); } 17%,92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes mwF4 { 0%,16% { opacity: 0; transform: translateY(6px); } 21%,92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
.mw-veredicto { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 7px;
    font-size: 0.64rem; font-weight: 700; color: var(--green); opacity: 0; }
.mw-veredicto .pt { width: 7px; height: 7px; border-radius: 50%; background: var(--green);
    box-shadow: 0 0 9px var(--green); flex-shrink: 0; }
.reveal.visible .mw-veredicto { animation: mwVer var(--miniDur) infinite; }
.reveal.visible .mw-veredicto .pt { animation: mwLatido 1.9s ease-in-out infinite; }
@keyframes mwVer { 0%,26% { opacity: 0; transform: translateY(6px); } 32%,92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes mwLatido { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.45); opacity: 0.55; } }

/* ── Análisis de Riesgo SORA ── */
.ms-cadena { display: flex; align-items: center; gap: 5px; }
.ms-c { flex: 1; text-align: center; border-radius: 8px; padding: 7px 4px; opacity: 0;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); }
.ms-c .et { display: block; font-size: 0.5rem; color: var(--muted); font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.7px; }
.ms-c b { font-size: 1.05rem; font-weight: 900; color: #fff; }
.ms-c.dest { border-color: color-mix(in srgb, var(--mini) 45%, transparent);
    background: color-mix(in srgb, var(--mini) 12%, transparent); }
.ms-c.dest b { color: var(--mini); }
.ms-fl { color: var(--muted); font-size: 0.7rem; opacity: 0; flex-shrink: 0; }
.reveal.visible .ms-c.f1 { animation: miFila var(--miniDur) infinite; }
.reveal.visible .ms-c.f2, .reveal.visible .ms-fl.f2 { animation: msF2 var(--miniDur) infinite; }
.reveal.visible .ms-c.f3, .reveal.visible .ms-fl.f3 { animation: msF3 var(--miniDur) infinite; }
@keyframes msF2 { 0%,11% { opacity: 0; transform: scale(0.85); } 16%,92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes msF3 { 0%,18% { opacity: 0; transform: scale(0.85); } 22% { opacity: 1; transform: scale(1.09); } 26%,92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.ms-escala { position: relative; display: flex; justify-content: space-between; margin-top: 11px;
    padding-top: 7px; border-top: 1px solid rgba(255,255,255,0.07); }
.ms-escala span { font-size: 0.53rem; font-weight: 800; color: var(--muted); }
.ms-escala span:nth-child(3) { color: var(--mini); }
.ms-escala i { position: absolute; top: -1px; left: 0; width: 16.6%; height: 2px; background: var(--mini);
    box-shadow: 0 0 8px color-mix(in srgb, var(--mini) 70%, transparent); opacity: 0; }
.reveal.visible .ms-escala i { animation: msMarca var(--miniDur) infinite; }
@keyframes msMarca { 0%,24% { opacity: 0; transform: translateX(0); } 30% { opacity: 1; transform: translateX(0); } 38%,92% { opacity: 1; transform: translateX(100%); } 100% { opacity: 0; } }
.ms-nota { font-size: 0.55rem; color: var(--muted); margin-top: auto; padding-top: 7px; }

/* ── Logbook de apoyo PDF ── */
.ml-fila { display: grid; grid-template-columns: 0.7fr 1fr 0.6fr; gap: 6px; font-size: 0.63rem;
    padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.045); opacity: 0; }
.ml-fila .d { text-align: right; font-family: 'Share Tech Mono', monospace; color: var(--mini); }
.ml-fila.cab { opacity: 1; font-size: 0.52rem; color: var(--muted); font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.4px; border-bottom-color: rgba(255,255,255,0.09); }
.ml-fila.cab .d { color: var(--muted); font-family: inherit; }
.reveal.visible .ml-fila.f1 { animation: mlF1 var(--miniDur) infinite; }
.reveal.visible .ml-fila.f2 { animation: mlF2 var(--miniDur) infinite; }
.reveal.visible .ml-fila.f3 { animation: mlF3 var(--miniDur) infinite; }
@keyframes mlF1 { 0%,6%  { opacity: 0; transform: translateX(-7px); } 11%,92% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes mlF2 { 0%,11% { opacity: 0; transform: translateX(-7px); } 16%,92% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes mlF3 { 0%,16% { opacity: 0; transform: translateX(-7px); } 21%,92% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; } }
.ml-exportar { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; align-self: flex-start;
    padding: 6px 11px; border-radius: 7px; font-size: 0.62rem; font-weight: 800; opacity: 0;
    background: color-mix(in srgb, var(--mini) 16%, transparent); color: var(--mini);
    border: 1px solid color-mix(in srgb, var(--mini) 35%, transparent); }
.ml-exportar svg { width: 12px; height: 12px; flex-shrink: 0; }
.reveal.visible .ml-exportar { animation: mlExp var(--miniDur) infinite; }
@keyframes mlExp {
    0%,26% { opacity: 0; transform: translateY(6px); }
    32%    { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 0 color-mix(in srgb, var(--mini) 55%, transparent); }
    40%    { box-shadow: 0 0 0 7px transparent; }
    92%    { opacity: 1; transform: translateY(0); }
    100%   { opacity: 0; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .demo-row { grid-template-columns: 1fr; gap: 26px; margin-bottom: 62px; }
    .demo-row.invertida .demo-copy { order: 1; }
    .demo-row.invertida .demo-frame { order: 2; }
    .demo-screen { padding: 13px; }
    .dm-mapa { height: 142px; }
    .dm-pasos, .demo-cursor { display: none; }
    .demo-narra { min-height: 92px; }
    .dc-cab, .dc-fila { grid-template-columns: 1fr 0.8fr 0.8fr; font-size: 0.68rem; }
    .dp-areas { grid-template-columns: 1fr; }
    .dp-area { display: flex; align-items: baseline; gap: 8px; }
    .dp-area b { margin: 0; }
    .dp-area .n { margin-left: auto; }
    /* El asistente del MIR: cuatro etiquetas no caben en una linea estrecha. */
    .dw-p u { display: none; }
    .dr-c { flex-wrap: wrap; }
    .dr-c .k { width: 100%; }
    .de-et em { font-size: 0.5rem; }
    .de-et em:nth-child(4) { display: none; }
}

/* ── Sin movimiento: las demos se congelan en su estado final ──────────────
   El bloque global de prefers-reduced-motion pone animation-duration en
   0,001 ms, de modo que cada animacion salta directa a su fotograma 100 %.
   Como casi todos los ciclos terminan en opacity 0 para poder repetirse
   limpios, sin estas reglas la demo entera desapareceria. Aqui se fija el
   estado final visible y la narracion pasa a ser una lista de tres pasos:
   quien desactiva el movimiento recibe la misma informacion, quieta.       */
@media (prefers-reduced-motion: reduce) {
    .demo-cursor, .dm-barrido, .dm-onda, .dm-mira, .dm-hud, .dm-cargando, .demo-barra { display: none !important; }

    .dm-zona, .dm-pin, .dm-fijada, .dm-res, .dm-diag, .dm-tags span,
    .dt-op .marca, .dt-exp, .dc-fila, .dc-veredicto, .da-fila, .da-logro,
    .dp-lics span, .dp-dron, .dp-area,
    .dr-c, .dr-doc, .dr-doc .sello, .dr-doc .firma,
    .de-s, .de-fl, .de-mit .m, .de-doc, .de-p,
    .mm-fila, .mw-c, .mw-veredicto, .ms-c, .ms-fl, .ms-escala i, .ml-fila, .ml-exportar {
        opacity: 1 !important;
        transform: none !important;
    }
    .dm-paso b, .dw-p b { background: var(--tono) !important; color: #04121a !important; border-color: var(--tono) !important; }
    .de-et em { color: var(--tono) !important; }

    .dt-op.correcta { border-color: var(--green) !important; background: rgba(16,185,129,0.1) !important; }
    .dt-op.correcta i { background: var(--green) !important; color: #04140e !important; }
    .dt-op.fallada { border-color: var(--red) !important; background: rgba(239,68,68,0.09) !important; }
    .dt-op.fallada i { background: var(--red) !important; color: #fff !important; }

    .dc-fila .v.gana { color: var(--green) !important; }

    /* Barras de progreso: se dejan en su valor final, no en cero. */
    .da-barra i { width: 74% !important; }
    .dw-linea i, .de-track i { width: 100% !important; }
    .mm-barra i { width: 24% !important; }
    .ms-escala i { transform: translateX(100%) !important; }

    /* El carnet deja de girar: se muestran las dos caras, una debajo de otra. */
    .dp-escena { perspective: none; display: block; }
    .dp-tarjeta { width: 100%; aspect-ratio: auto; transform: none !important; }
    .dp-cara { position: static; backface-visibility: visible; transform: none !important;
        min-height: 178px; margin-bottom: 10px; }
    .dp-holo { display: none; }
    .de-campos { display: none !important; }

    .demo-narra { min-height: 0; }
    .demo-narra p { position: static; opacity: 1 !important; transform: none !important; margin-bottom: 8px; }
    .demo-narra p:last-of-type { margin-bottom: 0; }
}