/* Todos los valores de color y letra viven aquí arriba; ni el resto de la hoja ni
   el JavaScript escriben un literal: el 3D lee estos mismos tokens. */
:root{
  --sol:#ffc233; --tinta:#1d2145; --tinta-2:#23285a; --papel:#fffaf0;
  --verde:#2fbf71; --velo:rgba(13,15,34,.55);
  --titulo:"Bricolage Grotesque",system-ui,sans-serif;
  --cuerpo:"Figtree",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--sol);color:var(--tinta);font-family:var(--cuerpo);overflow:hidden}

/* 100dvh y no 100vh: en iPhone, 100vh mide con la barra del navegador escondida y
   la franja de abajo queda tapada. Los rellenos suman el área segura por lo mismo. */
.pant{position:fixed;inset:0;height:100dvh;display:none}
.pant.activa{display:block}
.centro{height:100%;display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:440px;margin:0 auto;
  padding:calc(24px + env(safe-area-inset-top)) 26px calc(24px + env(safe-area-inset-bottom))}
.sobre{font-size:13px;font-weight:700;opacity:.6}
h1{font-family:var(--titulo);font-weight:800;font-size:52px;line-height:.98;letter-spacing:-.03em}
h2{font-family:var(--titulo);font-weight:800;font-size:30px;letter-spacing:-.02em}
.texto{font-size:17px;line-height:1.4}
.pasos{list-style:none;display:flex;flex-direction:column;gap:9px;margin:4px 0}
.pasos li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600;background:var(--papel);border-radius:16px;padding:11px 14px}
.pasos b{width:28px;height:28px;border-radius:50%;background:var(--tinta);color:var(--papel);display:grid;place-items:center;font-size:14px}
.boton{font:700 17px var(--cuerpo);background:var(--tinta);color:var(--papel);border:0;border-radius:18px;padding:16px 22px;width:100%;cursor:pointer}
.boton:disabled{opacity:.5}
.boton.claro{background:var(--papel);color:var(--tinta)}
#repetir{box-shadow:0 0 0 3px var(--sol)}
.enlace{background:none;border:0;color:var(--papel);font:600 15px var(--cuerpo);padding:10px;cursor:pointer}
.nota{font-size:13px;opacity:.65;line-height:1.4}
.nota.mal{opacity:1;font-weight:700}

/* Captura: el vídeo se enseña en espejo (como un espejo de verdad), pero los
   fotogramas que se analizan y se guardan son los originales, sin voltear. */
#captura{background:var(--tinta)}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.ovalo{position:absolute;left:50%;top:47%;width:min(68vw,40dvh);aspect-ratio:3/4;transform:translate(-50%,-50%);border-radius:50%;
  border:4px solid var(--papel);box-shadow:0 0 0 100vmax var(--velo);transition:border-color .2s}
.ovalo.bien{border-color:var(--verde)}
.ovalo.foto{animation:foto .35s}
@keyframes foto{0%{background:var(--papel)}100%{background:transparent}}
.arriba{position:absolute;left:0;right:0;top:0;padding:calc(18px + env(safe-area-inset-top)) 22px 0;text-align:center;color:var(--papel);
  display:flex;flex-direction:column;align-items:center;gap:12px}
.arriba.oscuro{color:var(--tinta);gap:2px}
.arriba.oscuro p{font-size:14px;opacity:.6;font-weight:600}
#orden{font-family:var(--titulo);font-weight:800;font-size:25px;line-height:1.1;letter-spacing:-.01em;min-height:56px;display:flex;align-items:center}
.luces{display:flex;gap:10px}
.luces i{width:34px;height:8px;border-radius:4px;background:rgba(255,250,240,.3);transition:background .2s}
.luces i.on{background:var(--verde)}
.abajo{position:absolute;left:0;right:0;bottom:0;padding:0 22px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;max-width:440px;margin:0 auto}

#tres{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
.chips{display:flex;gap:8px;width:100%}
.chips button{flex:1;font:700 14px var(--cuerpo);white-space:nowrap;background:var(--papel);color:var(--tinta);border:0;border-radius:14px;padding:11px 4px;cursor:pointer}
.chips button.on{background:var(--tinta);color:var(--papel)}