/* /app · cómo usar tu app. Negro, rojo y amarillo de la app; Bebas Neue y DM Sans; esquinas rectas.
   REGLA: todo cambio a este archivo sube su ?v= en app/index.html. */
@font-face{font-family:'Bebas Neue';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/bebas-neue-latin-400-normal-v1.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/dm-sans-latin-400-normal-v1.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/dm-sans-latin-500-normal-v1.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/dm-sans-latin-700-normal-v1.woff2') format('woff2')}
:root{--bg:#0c0c0c;--tile:#161616;--rojo:#e5483b;--oro:#e0c48a;--tx:#f4f4f4;--tx2:rgba(244,244,244,.74);--linea:rgba(255,255,255,.14);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:400 19px/1.55 'DM Sans',system-ui,-apple-system,sans-serif;padding:0 20px env(safe-area-inset-bottom,0)}
.cab{display:flex;align-items:center;justify-content:center;gap:10px;padding:calc(18px + env(safe-area-inset-top,0)) 0 6px;color:var(--oro);font-size:15px;letter-spacing:.22em;text-transform:uppercase}
main,.pie{max-width:720px;margin:0 auto}
h1,h2{font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase;line-height:.98;margin:0}
h1{font-size:clamp(58px,15vw,96px)}
h2{font-size:clamp(40px,10vw,60px);margin-bottom:8px}
p{margin:0 0 14px}
.portada{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 0 40px;gap:0}
.chispa{display:block;width:min(220px,56vw);height:auto}
.burbuja{position:relative;background:#fff;color:#0c0c0c;padding:14px 20px;margin:18px 0 22px;font-weight:500;font-size:19px;line-height:1.35;max-width:100%}
.burbuja::before{content:'';position:absolute;left:50%;top:-9px;margin-left:-9px;border:9px solid transparent;border-top:0;border-bottom:9px solid #fff}
.portada h1{margin-bottom:24px}
.video{margin:0 0 24px;width:min(340px,100%)}
.video video{display:block;width:100%;aspect-ratio:9/16;background:#000;border:1px solid var(--linea)}
.btn{display:flex;align-items:center;justify-content:center;min-height:60px;padding:0 28px;background:#fff;color:#0c0c0c;text-decoration:none;font:400 26px 'Bebas Neue',Impact,sans-serif;letter-spacing:.1em;text-transform:uppercase;width:100%;max-width:420px}
.btn-rojo{background:var(--rojo);color:#fff;margin:26px auto 0}
.portada .btn-rojo{margin:0 0 14px}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--oro);outline-offset:3px}
.bloque{padding:42px 0;border-top:1px solid var(--linea)}
.kick{color:var(--rojo);font-size:17px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:8px}
.lead{color:var(--oro);font-size:22px;font-weight:500;margin-bottom:18px}
.tres{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.tres a{display:flex;flex-direction:column;gap:4px;min-height:96px;padding:18px 18px 18px 74px;background:var(--tile);color:var(--tx);text-decoration:none;position:relative;border-left:4px solid var(--rojo)}
.tres strong{font:400 34px/1 'Bebas Neue',Impact,sans-serif;letter-spacing:.03em;text-transform:uppercase}
.tres span:not(.n){color:var(--tx2);font-size:18px}
.tres .n{position:absolute;left:18px;top:16px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--rojo);color:#fff;font:400 28px 'Bebas Neue',Impact,sans-serif}
.datos{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.datos li{background:var(--tile);padding:16px 18px;border-left:4px solid var(--oro)}
.donde{background:var(--tile);padding:16px 18px;border-left:4px solid var(--rojo);margin:20px 0 26px}
.pasos{list-style:none;margin:0;padding:0;position:relative}
.pasos::before{content:'';position:absolute;left:21px;top:10px;bottom:10px;width:2px;background:var(--linea)}
.pasos li{display:flex;gap:16px;align-items:flex-start;padding:10px 0;position:relative}
.pasos .num{flex:0 0 44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--bg);border:2px solid var(--rojo);color:#fff;font:400 26px 'Bebas Neue',Impact,sans-serif;border-radius:50%;position:relative;z-index:1}
.pasos b{display:block;font-weight:500;line-height:1.35}
.pasos small{display:block;color:var(--tx2);font-size:16px;margin-top:2px}
.pasos .dia14 .num{background:var(--oro);border-color:var(--oro);color:#0c0c0c}
.pasos .dia14 small{color:var(--oro)}
.tel{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 20px}
.tel button{min-height:60px;background:var(--tile);color:var(--tx);border:1px solid var(--linea);border-radius:0;font:500 19px 'DM Sans',sans-serif;cursor:pointer}
.tel button[aria-selected="true"]{background:#fff;color:#0c0c0c;border-color:#fff}
.como{margin:0;padding:0;list-style:none;counter-reset:p;display:grid;gap:12px}
.como li{counter-increment:p;position:relative;background:var(--tile);padding:16px 18px 16px 70px}
.como li::before{content:counter(p);position:absolute;left:16px;top:14px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--rojo);color:#fff;font:400 26px 'Bebas Neue',Impact,sans-serif}
.pie{text-align:center;padding:36px 0 56px;border-top:1px solid var(--linea)}
.pie p{color:var(--tx2)}
.correo{color:var(--oro);font-size:22px;font-weight:500;display:inline-block;min-height:44px;padding:8px 0;word-break:break-word}
.visor{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:8px}
.visor img{display:block;width:min(420px,100%);height:auto;aspect-ratio:9/16;background:#000;border:1px solid var(--linea)}
.barra{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;width:min(420px,100%)}
.barra button{min-height:60px;border:0;border-radius:0;background:#fff;color:#0c0c0c;font:400 26px 'Bebas Neue',Impact,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.barra button:last-child{background:var(--rojo);color:#fff}
.barra button:disabled{background:var(--tile);color:rgba(244,244,244,.4);cursor:default}
.barra span{font-size:19px;color:var(--tx2);white-space:nowrap}
@media (min-width:900px){
  main,.pie{max-width:980px}
  .tres{grid-template-columns:repeat(3,1fr)}
  .tres a{padding:78px 18px 18px}
  .tres .n{top:18px}
}
/* ── El orden desde el 2026-11-09: video, como instalarla, lo que tiene. Chispa abre "lo que tiene". ── */
.saludo{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:10px}
.saludo .chispa{width:min(170px,44vw)}
.saludo .burbuja{margin:16px 0 26px}
#rojo{position:relative;overflow-x:clip}
.pulso{position:absolute;right:40px;top:50px;width:52px;height:52px;border-radius:50%;background:var(--rojo)}
.pulso::before,.pulso::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--rojo);opacity:0}

/* ── Animaciones. Solo con html.anima (lo pone el script si hay IntersectionObserver y no se pidio quietud). ── */
@keyframes sube{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes flota{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-2deg)}}
@keyframes saluda{0%{opacity:0;transform:scale(.6) rotate(-8deg)}70%{transform:scale(1.06) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes globo{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
@keyframes onda{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
@keyframes brilla{0%,100%{box-shadow:0 0 0 0 rgba(224,196,138,.55)}50%{box-shadow:0 0 0 12px rgba(224,196,138,0)}}
@keyframes linea{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pop{0%{opacity:0;transform:scale(.4)}70%{transform:scale(1.12)}100%{opacity:1;transform:none}}
@keyframes funde{from{opacity:.25}to{opacity:1}}
.video.entra{animation:sube .8s cubic-bezier(.2,.7,.2,1) both}
.portada h1{animation:sube .7s cubic-bezier(.2,.7,.2,1) both}
.portada .btn{animation:sube .7s .25s cubic-bezier(.2,.7,.2,1) both}
.portada .btn+.btn{animation-delay:.35s}
.pulso::before{animation:onda 2.2s ease-out infinite}
.pulso::after{animation:onda 2.2s 1.1s ease-out infinite}
.pasos .dia14 .num{animation:brilla 2.6s ease-in-out infinite}
.visor img.cambia{animation:funde .35s ease-out}
.anima .revela:not(.vista){opacity:0}
.anima .revela.vista{animation:sube .7s cubic-bezier(.2,.7,.2,1) both}
.anima .revela.vista .tres li,.anima .revela.vista .datos li{animation:sube .6s calc(.15s + var(--i,0) * 110ms) cubic-bezier(.2,.7,.2,1) both}
.anima .revela:not(.vista) .tres li,.anima .revela:not(.vista) .datos li{opacity:0}
.anima #partes.vista .chispa{animation:saluda .9s cubic-bezier(.2,.7,.2,1) both,flota 4.5s 1s ease-in-out infinite}
.anima #partes.vista .burbuja{animation:globo .5s .55s cubic-bezier(.2,.7,.2,1) both}
.anima #partes:not(.vista) .chispa,.anima #partes:not(.vista) .burbuja{opacity:0}
.anima #pasos::before{transform-origin:top;transform:scaleY(0)}
.anima #pasos.vista::before{animation:linea 1.6s .2s cubic-bezier(.4,0,.2,1) both}
.anima #pasos:not(.vista) .num,.anima #pasos:not(.vista) li>div{opacity:0}
.anima #pasos.vista .num{animation:pop .45s calc(.2s + var(--i,0) * 130ms) cubic-bezier(.2,.7,.2,1) both}
.anima #pasos.vista .dia14 .num{animation:pop .45s calc(.2s + var(--i,0) * 130ms) cubic-bezier(.2,.7,.2,1) both,brilla 2.6s 2s ease-in-out infinite}
.anima #pasos.vista li>div{animation:sube .5s calc(.28s + var(--i,0) * 130ms) cubic-bezier(.2,.7,.2,1) both}
/* Los pasos para instalarla entran uno por uno cada vez que se abre su panel (iPhone o Android). */
.anima .revela.vista [role=tabpanel]:not([hidden]) .como li{animation:sube .5s calc(.1s + var(--i,0) * 140ms) cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}