/* Base: el sistema visual v3 «Pop con caramelo» (fuente de verdad: _mockups/v3-E-pop-caramelo.html).

   · Pop pone el cartel: cada pantalla es un color plano a sangre (html[data-step], lo pone el router), titulares enormes en
     Futura Condensed ExtraBold y una pegatina troquelada grande (ui/stickers.js) en una esquina o medio fuera.
   · Caramelo pone el tacto: lo que se toca sobresale con un canto sólido del mismo color, más hondo (--canto), y se hunde al pulsar;
     lo que se rellena (casillas, medidores, pistas) va hundido. Sin degradados, sin brillos, sin sombras difusas.
   · Tres voces: --display (Futura Condensed ExtraBold) para titulares, cifras, teclas y casillas; --ui (SF Pro Rounded) para lo que se
     lee y se toca; --voz (New York cursiva) solo cuando habla Mario.
   · Tres radios: 34 tarjetas, 22 teselas y teclas, píldora para los botones.
   · Contraste: tinta sobre los claros y blanco sobre cobalto y tinta, todo ≥ 4,5:1. Zonas táctiles de 44 px o más.
   · Relieve (28-10-2026): css/relieve.css, la última hoja, pone encima la textura, la luz y el volumen (grano de papel, trama por
     pantalla, brillo de caramelo, sombras blandas del color del canto); ui/fx.js, la inclinación de las fotos y la cortina entre
     pantallas. Los colores, las letras y las medidas siguen saliendo de aquí. */

@font-face{font-family:"FCX";src:local("Futura-CondensedExtraBold"),local("Futura Condensed ExtraBold");}
@font-face{font-family:"E Rounded";src:local("SF Pro Rounded"),local("SFProRounded-Regular");font-weight:100 1000;}
@font-face{font-family:"E Serif";src:local("New York Italic"),local("NewYorkItalic-Regular");font-weight:100 1000;font-style:italic;}

:root{
  /* un color por pantalla, cada uno con su canto (el mismo color, más hondo) */
  --tomate:#FF5436;  --tomate-d:#D2381B;
  --cobalto:#2E4CEB; --cobalto-d:#1B30B5; --cobalto-dd:#13228A;
  --lima:#CBF250;    --lima-d:#98C11C;
  --chicle:#FF8FC8;  --chicle-d:#E35E9E;
  --girasol:#FFC530; --girasol-d:#DE9A00;
  --menta:#4ADB9C;   --menta-d:#1FAE73;
  --tinta:#1D1442;   --tinta-d:#0A0624; --tinta-2:#30266A; --tinta-3:#4B4189;
  --leche:#FFFAF3;   --leche-d:#E7DCCB; --crema:#FFEFD6;
  --anil:#93A5FF;    /* el azul de Mario cuando va como letra sobre tinta */
  --lila:#CFC9F2;    /* texto secundario sobre tinta (11:1) */
  --wa-bg:#0B141A; --wa-own:#005C4B; --wa-other:#202C33;

  --display:"FCX","Futura Condensed ExtraBold",Futura,"Avenir Next Condensed",sans-serif;
  --ui:ui-rounded,"E Rounded","SF Pro Rounded",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --voz:ui-serif,"New York","E Serif",Georgia,serif;

  /* titulares (una talla por papel; se ajustan al ancho hasta el iPhone de 390 px) */
  --t-hero:clamp(70px,23.6vw,92px);
  --t-xl:clamp(46px,14.4vw,56px);
  --t-l:clamp(36px,11.3vw,44px);
  --t-m:clamp(26px,7.8vw,30px);
  --fs-lead:19px; --fs-body:16.5px; --fs-small:15px; --fs-xs:13px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --r-hoja:34px; --r-tesela:22px; --r-pill:999px;
  --canto:6px; --g:24px;

  --sat:env(safe-area-inset-top,0px);
  --sar:env(safe-area-inset-right,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --rh:0px;                          /* franja de arriba para la píldora del ensayo (solo con ?ensayo=2222) */

  /* el color de la pantalla: --bg fondo, --fg letra, --fg-2 letra secundaria, --d canto; el botón principal (--btn) */
  --bg:var(--tomate); --fg:var(--tinta); --fg-2:#3D1A1A; --d:var(--tomate-d);
  --btn:var(--tinta); --btn-lab:var(--bg); --btn-d:var(--tinta-d);
}
html.is-ensayo{--rh:30px}
html.has-inicio{--rh:26px}
html.has-inicio[data-step="intro"]{--rh:0px}

/* ---------- un color por pantalla (cambios v3) ----------
   tomate: inicio, bienvenida y final · cobalto: caja fuerte, La Ruleta pupi y el mapa · lima: el test · menta: la línea del tiempo ·
   tinta: el Wrapped (cada diapositiva con su color) · girasol: la música · chicle: el rasca, las revelaciones y la Cartera.
   Sobre cobalto y tinta el botón principal pasa a girasol, el amarillo de la ruleta. */
html[data-step="safe"],html[data-step="p2"],html[data-step="p4"]{--bg:var(--cobalto);--fg:#FFFFFF;--fg-2:#D6DCFF;--d:var(--cobalto-d)}
html[data-step="p1"]{--bg:var(--lima);--fg:var(--tinta);--fg-2:#3D3666;--d:var(--lima-d)}
html[data-step="p3"]{--bg:var(--menta);--fg:var(--tinta);--fg-2:#24304A;--d:var(--menta-d)}
html[data-step="p5"]{--bg:var(--tinta);--fg:#FFFFFF;--fg-2:var(--lila);--d:var(--tinta-d)}
html[data-step="p6"]{--bg:var(--girasol);--fg:var(--tinta);--fg-2:#4A3A12;--d:var(--girasol-d)}
html:has(.prize-screen),html:has(#app > [class^="rv"]){--bg:var(--chicle);--fg:var(--tinta);--fg-2:#4A2140;--d:var(--chicle-d)}
html[data-step="safe"],html[data-step="p2"],html[data-step="p4"],html[data-step="p5"]{--btn:var(--girasol);--btn-lab:var(--tinta);--btn-d:var(--girasol-d)}
html:has(.prize-screen),html:has(#app > [class^="rv"]){--btn:var(--tinta);--btn-lab:var(--chicle);--btn-d:var(--tinta-d)}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{
  background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%;text-size-adjust:100%;
  transition:background-color .45s ease,color .45s ease;
}
body{
  margin:0;min-height:100vh;min-height:100dvh;overflow-x:hidden;
  font:500 16px/1.4 var(--ui);-webkit-font-smoothing:antialiased;
}

button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;touch-action:manipulation}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--fg);outline-offset:3px}

/* Contenedor de pantallas, respetando el notch y la barra de inicio. */
#app{
  position:relative;display:flex;flex-direction:column;
  width:100%;max-width:480px;margin:0 auto;
  min-height:100vh;min-height:100dvh;
  padding:calc(20px + var(--sat) + var(--rh)) calc(var(--g) + var(--sar)) calc(28px + var(--sab)) calc(var(--g) + var(--sal));
  overflow:clip; /* las pegatinas se salen por los lados y por abajo: se recortan en el borde sin dar desplazamiento */
}

/* ---------- titulares y textos ---------- */
.t-hero{margin:0;font:400 var(--t-hero)/.84 var(--display);letter-spacing:-.012em}
.t-xl{margin:0;font:400 var(--t-xl)/.9 var(--display);letter-spacing:-.005em;text-wrap:balance}
.t-l{margin:0;font:400 var(--t-l)/.92 var(--display);text-wrap:balance}
.t-m{margin:0;font:400 var(--t-m)/1 var(--display)}
.voz{font-family:var(--voz);font-style:italic;font-weight:400}
.chip{
  display:inline-flex;align-items:center;align-self:flex-start;height:34px;padding:0 15px;border-radius:var(--r-pill);
  background:var(--fg);color:var(--bg);font:700 15px/1 var(--ui);white-space:nowrap;
}

/* ---------- botones gorditos: sobresalen con su canto y se hunden al pulsar ----------
   .btn.gold es el principal de cada pantalla (tinta; girasol sobre cobalto y tinta); .btn.cream y .btn.ghost, el blandito (leche). */
.btn{
  --face:var(--btn); --lab:var(--btn-lab); --edge:var(--btn-d);
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:58px;margin-bottom:var(--canto);padding:0 22px;border-radius:var(--r-pill);
  background:var(--face);color:var(--lab);font:800 19px/1.1 var(--ui);text-align:center;
  box-shadow:0 var(--canto) 0 var(--edge);
  user-select:none;-webkit-user-select:none;
  transition:transform .08s ease,box-shadow .08s ease,background-color .12s,opacity .2s ease;
}
.btn:active:not(:disabled),.btn.is-down{transform:translateY(var(--canto));box-shadow:0 0 0 var(--edge)}
/* apagado: medio transparente. armButton lo deja así 350 ms al aparecer: el retraso evita que parpadee en ese rato */
.btn:disabled{opacity:.42;cursor:default;transition-delay:0s,0s,0s,.4s}
.btn.cream,.btn.ghost{--face:var(--leche);--lab:var(--tinta);--edge:var(--d)}
.btn.sun{--face:var(--girasol);--lab:var(--tinta);--edge:var(--girasol-d)}
.btn svg{width:22px;height:22px;flex:none}
.btn:focus-visible{outline:3px solid var(--fg);outline-offset:4px}

/* ---------- pegatinas (ui/stickers.js): adorno, detrás del texto y sin toques ---------- */
.stk{position:absolute;z-index:0;display:block;pointer-events:none}
.stk svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes stk-enter{0%{transform:scale(.6) rotate(-10deg);opacity:0}100%{transform:none;opacity:1}}
.stk.is-enter svg{animation:stk-enter .7s cubic-bezier(.2,1.5,.4,1) .2s both}

/* ---------- bombillas (el letrero de la ruleta y el gran premio): puntos girasol que se encienden por turnos ---------- */
:root{--bulb:radial-gradient(circle,#FFF4C7 0 1.8px,var(--girasol) 2.6px 3.8px,transparent 4.4px)}
.bulbs{height:10px;background:var(--bulb) 0 50%/14px 14px repeat-x}
.marq{position:relative}
.marq::before,.marq::after{content:"";position:absolute;inset:7px;pointer-events:none;border-radius:22px}
.marq::before{
  background:var(--bulb) 0 0/28px 14px repeat-x,var(--bulb) 0 100%/28px 14px repeat-x,var(--bulb) 0 0/14px 28px repeat-y,var(--bulb) 100% 0/14px 28px repeat-y;
  animation:marq-a 1.2s steps(1,end) infinite;
}
.marq::after{
  background:var(--bulb) 14px 0/28px 14px repeat-x,var(--bulb) 14px 100%/28px 14px repeat-x,var(--bulb) 0 14px/14px 28px repeat-y,var(--bulb) 100% 14px/14px 28px repeat-y;
  animation:marq-b 1.2s steps(1,end) infinite;
}
@keyframes marq-a{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes marq-b{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- logo pequeño y pantallas de paso ---------- */
.logo-mini{margin:0;text-align:center;text-wrap:balance;font:400 24px/1 var(--display);letter-spacing:.01em;color:var(--fg)}
[data-logo]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.screen-stub{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);text-align:center}
.stub-msg{margin:0;font:400 var(--t-l)/.95 var(--display);color:var(--fg);text-wrap:balance}

/* ---------- vibrar = temblar la pantalla (iOS web no puede vibrar) ---------- */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-9px)} 30%{transform:translateX(8px)}
  45%{transform:translateX(-6px)} 60%{transform:translateX(5px)}
  75%{transform:translateX(-3px)} 90%{transform:translateX(2px)}
}
.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}

@keyframes blink{50%{opacity:.15}}
@keyframes rise{0%{transform:translateY(22px);opacity:0}100%{transform:none;opacity:1}}
@keyframes pop{0%{transform:scale(.92)}100%{transform:none}}

/* ---------- menú de ensayo (solo con ?ensayo=2222): píldora de «grabando» arriba a la izquierda, en su propia franja (--rh),
   así nunca tapa los botones de las pantallas ---------- */
.ensayo{position:fixed;z-index:1000;left:calc(10px + var(--sal));top:calc(3px + var(--sat));font-family:var(--ui)}
.ensayo-toggle{
  position:relative;display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px 0 9px;border-radius:var(--r-pill);
  background:var(--tinta);color:#fff;font:700 12px/1 var(--ui);letter-spacing:.04em;
}
.ensayo-toggle::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--tomate)}
.ensayo-toggle::after{content:"";position:absolute;inset:-10px -8px} /* zona de toque de 44 px */
.ensayo-toggle[aria-expanded="true"]{background:var(--tomate);color:var(--tinta)}
.ensayo-toggle[aria-expanded="true"]::before{background:var(--tinta)}
.ensayo-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ensayo-panel{
  position:absolute;left:0;top:calc(100% + 8px);width:min(300px,calc(100vw - 20px));
  max-height:calc(100dvh - 60px - var(--sat));overflow:auto;
  padding:12px;border-radius:var(--r-tesela);background:var(--tinta);color:#fff;box-shadow:0 var(--canto) 0 var(--tinta-d);
}
.ensayo-panel[hidden]{display:none}
/* en las pantallas sin marcador la franja de la píldora lleva el color de la pantalla, como una barra:
   lo que se desplaza pasa por debajo y nunca asoma junto a la píldora (con marcador, el fondo ya lo pone el propio marcador) */
html.is-ensayo body:has(> #hud:empty)::after,html.has-inicio:not([data-step="intro"]) body:has(> #hud:empty)::after{
  content:"";position:fixed;z-index:999;left:0;right:0;top:0;height:calc(var(--sat) + var(--rh) + 6px);pointer-events:none;
  background:var(--bg);transition:background-color .45s ease;
}
.ensayo-info{margin:0 0 10px;font:500 13px/1.3 var(--ui);color:var(--lila)}
.ensayo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:10px}
.ensayo-actions{display:grid;gap:6px}
.ensayo-btn{
  min-height:44px;padding:0 8px;border-radius:14px;background:var(--tinta-2);color:#fff;
  font:700 15px/1 var(--ui);
}
.ensayo-btn[aria-current="true"]{background:var(--girasol);color:var(--tinta)}
.ensayo-btn.warn{background:var(--tomate-d)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
  html{transition:none}
  .btn{transition-duration:.01ms}
  .marq::before,.marq::after{animation:none} /* todas encendidas y quietas */
}

/* «Inicio» (sin ensayo, main.js): empezar el programa de cero. Pequeñita arriba a la izquierda, en su franja (--rh), y con
   confirmación; en la portada no sale */
.inicio{position:fixed;z-index:1000;left:calc(10px + var(--sal));top:calc(3px + var(--sat));height:21px;padding:0 9px;border:0;
  border-radius:var(--r-pill);background:rgba(29,20,66,.55);color:#fff;font:700 11px/1 var(--ui);letter-spacing:.03em;opacity:.8}
.inicio::after{content:"";position:absolute;inset:-12px -8px} /* zona de toque de 44 px */
.inicio:focus-visible{outline:2px solid #fff;outline-offset:2px}
html[data-step="intro"] .inicio{display:none}
/* el menú de ensayo: anterior y siguiente, encima de los pasos */
.ensayo-nav{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
/* en el negro del «Fin» no asoman la píldora de «Inicio» ni la franja de arriba */
body:has(> .iris) .inicio,body:has(> .iris) .paso-navs,body:has(> .iris)::after{display:none}
/* «‹ Atrás» y «Adelante ›» (main.js): pequeñitos arriba a la derecha, en la misma franja que «Inicio» o la píldora del ensayo */
.paso-navs{position:fixed;z-index:1000;right:calc(10px + var(--sar));top:calc(3px + var(--sat));display:flex;gap:6px}
.paso-nav{position:relative;height:21px;padding:0 9px;border:0;border-radius:var(--r-pill);background:rgba(29,20,66,.55);color:#fff;
  font:700 11px/1 var(--ui);letter-spacing:.03em;opacity:.8}
.paso-nav::after{content:"";position:absolute;inset:-12px -3px} /* zona de toque de 44 px */
.paso-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
html.is-ensayo .paso-nav{height:24px;font-size:12px}
html[data-step="intro"] .paso-navs{display:none}