/* ═══════════════════════════════════════════════════════════════════════════
   Repaso · kx-rsl-estudio — hoja de estilos
   Tokens y reglas: DESIGN.md en la raíz del proyecto. NO inventar valores aquí.
   Dirección: «mesa de guardia». El oro es EXCLUSIVO del sello de vigencia.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── fuentes propias (OFL) — §4 prohíbe las del sistema ─────────────────── */
@font-face{
  font-family:'Fraunces'; src:url('/fuentes/fraunces-var.woff2') format('woff2-variations');
  font-weight:300 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Figtree'; src:url('/fuentes/figtree-var.woff2') format('woff2-variations');
  font-weight:300 800; font-style:normal; font-display:swap;
}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  color-scheme:dark light;

  --mesa:        oklch(21%   0.028 168);
  --mesa-honda:  oklch(16%   0.026 168);
  --carta:       oklch(27.5% 0.026 168);
  --carta-alta:  oklch(31%   0.028 168);
  --tinta:       oklch(95%   0.012 150);
  --tinta-media: oklch(78%   0.020 160);
  --tinta-leve:  oklch(64%   0.022 162);
  --linea:       oklch(36%   0.030 168);

  --brasa:       oklch(74% 0.16 45);
  --brasa-viva:  oklch(82% 0.15 48);
  --brasa-lavada:oklch(30% 0.05 45);
  --sobre-brasa: oklch(18% 0.03 45);

  --acierto:     oklch(80% 0.18 138);
  --acierto-lav: oklch(28% 0.06 138);
  --yerro:       oklch(66% 0.11 352);
  --yerro-lav:   oklch(28% 0.045 352);
  --oro:         oklch(80% 0.13 88);
  --oro-lav:     oklch(29% 0.05 88);
  --espera:      oklch(72% 0.10 70);
  --espera-lav:  oklch(28% 0.04 70);

  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:36px; --e7:56px; --e8:88px;
  --r-carta:20px; --r-control:12px;

  --hondura: 0 2px 6px oklch(10% 0.02 168 / .45), 0 18px 40px oklch(8% 0.02 168 / .55);
  --hondura-baja: 0 1px 3px oklch(10% 0.02 168 / .4), 0 6px 16px oklch(8% 0.02 168 / .35);

  --display:'Fraunces', 'Iowan Old Style', Palatino, serif;
  --cuerpo:'Figtree', 'Segoe UI', system-ui, sans-serif;

  --salida:cubic-bezier(.16,1,.3,1);
  --volteo:cubic-bezier(.7,0,.2,1);
}

@media (prefers-color-scheme: light){
  :root{
    --mesa:        oklch(96.5% 0.012 150);
    --mesa-honda:  oklch(92%   0.014 150);
    --carta:       oklch(99%   0.005 140);
    --carta-alta:  oklch(97%   0.008 145);
    --tinta:       oklch(24%   0.030 168);
    --tinta-media: oklch(44%   0.028 168);
    --tinta-leve:  oklch(52%   0.024 166);
    --linea:       oklch(88%   0.016 155);

    --brasa:       oklch(58% 0.17 42);
    --brasa-viva:  oklch(66% 0.16 45);
    --brasa-lavada:oklch(94% 0.035 55);
    --sobre-brasa: oklch(99% 0.01 60);

    --acierto:     oklch(52% 0.15 145);
    --acierto-lav: oklch(94% 0.04 145);
    --yerro:       oklch(50% 0.13 355);
    --yerro-lav:   oklch(95% 0.025 355);
    --oro:         oklch(56% 0.11 85);
    --oro-lav:     oklch(95% 0.045 88);
    --espera:      oklch(50% 0.10 68);
    --espera-lav:  oklch(95% 0.04 70);

    --hondura: 0 2px 6px oklch(45% 0.03 168 / .13), 0 18px 40px oklch(45% 0.03 168 / .16);
    --hondura-baja: 0 1px 3px oklch(45% 0.03 168 / .10), 0 6px 16px oklch(45% 0.03 168 / .10);
  }
}

/* El interruptor manda sobre la preferencia del sistema, en los dos sentidos.
   Sin estos dos bloques el botón de tema no hace nada cuando el sistema ya
   tiene una preferencia declarada — que es siempre. */
:root[data-tema="claro"]{
  --mesa:oklch(96.5% 0.012 150); --mesa-honda:oklch(92% 0.014 150);
  --carta:oklch(99% 0.005 140); --carta-alta:oklch(97% 0.008 145);
  --tinta:oklch(24% 0.030 168); --tinta-media:oklch(44% 0.028 168);
  --tinta-leve:oklch(52% 0.024 166); --linea:oklch(88% 0.016 155);
  --brasa:oklch(58% 0.17 42); --brasa-viva:oklch(66% 0.16 45);
  --brasa-lavada:oklch(94% 0.035 55); --sobre-brasa:oklch(99% 0.01 60);
  --acierto:oklch(52% 0.15 145); --acierto-lav:oklch(94% 0.04 145);
  --yerro:oklch(50% 0.13 355); --yerro-lav:oklch(95% 0.025 355);
  --oro:oklch(56% 0.11 85); --oro-lav:oklch(95% 0.045 88);
  --espera:oklch(50% 0.10 68); --espera-lav:oklch(95% 0.04 70);
  --hondura:0 2px 6px oklch(45% 0.03 168 / .13), 0 18px 40px oklch(45% 0.03 168 / .16);
  --hondura-baja:0 1px 3px oklch(45% 0.03 168 / .10), 0 6px 16px oklch(45% 0.03 168 / .10);
}
:root[data-tema="claro"] body::before{opacity:.55}

:root[data-tema="oscuro"]{
  --mesa:oklch(21% 0.028 168); --mesa-honda:oklch(16% 0.026 168);
  --carta:oklch(27.5% 0.026 168); --carta-alta:oklch(31% 0.028 168);
  --tinta:oklch(95% 0.012 150); --tinta-media:oklch(78% 0.020 160);
  --tinta-leve:oklch(64% 0.022 162); --linea:oklch(36% 0.030 168);
  --brasa:oklch(74% 0.16 45); --brasa-viva:oklch(82% 0.15 48);
  --brasa-lavada:oklch(30% 0.05 45); --sobre-brasa:oklch(18% 0.03 45);
  --acierto:oklch(80% 0.18 138); --acierto-lav:oklch(28% 0.06 138);
  --yerro:oklch(66% 0.11 352); --yerro-lav:oklch(28% 0.045 352);
  --oro:oklch(80% 0.13 88); --oro-lav:oklch(29% 0.05 88);
  --espera:oklch(72% 0.10 70); --espera-lav:oklch(28% 0.04 70);
  --hondura:0 2px 6px oklch(10% 0.02 168 / .45), 0 18px 40px oklch(8% 0.02 168 / .55);
  --hondura-baja:0 1px 3px oklch(10% 0.02 168 / .4), 0 6px 16px oklch(8% 0.02 168 / .35);
}
:root[data-tema="oscuro"] body::before{opacity:.9}

*{box-sizing:border-box; margin:0; padding:0}

html{ -webkit-text-size-adjust:100% }

body{
  font-family:var(--cuerpo);
  font-size:clamp(16px, 1rem + .2vw, 17.5px);
  line-height:1.5;
  color:var(--tinta);
  background:var(--mesa);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

/* el fieltro: viñeta + grano sutil, sin imagen */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -20%, transparent 30%, var(--mesa-honda) 100%),
    repeating-conic-gradient(from 0deg at 50% 50%, var(--mesa) 0deg 90deg, var(--mesa-honda) 90deg 180deg);
  background-size:100% 100%, 5px 5px;
  opacity:.9;
}
@media (prefers-color-scheme: light){ body::before{ opacity:.55 } }

.tapete{position:relative; z-index:1; max-width:560px; margin:0 auto;
  padding:0 clamp(14px, 4vw, 22px) var(--e8)}

h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.15;
  letter-spacing:-.015em; text-wrap:balance}
.cifra{font-variant-numeric:tabular-nums}

button{font:inherit; color:inherit; cursor:pointer; border:0; background:none;
  border-radius:var(--r-control); -webkit-tap-highlight-color:transparent}
:focus-visible{outline:2.5px solid var(--brasa-viva); outline-offset:3px; border-radius:8px}

/* ── controles ──────────────────────────────────────────────────────────── */
.pulsar{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e2);
  min-height:52px; padding:0 var(--e5); font-weight:650; font-size:1rem;
  background:var(--brasa); color:var(--sobre-brasa);
  box-shadow:0 3px 0 var(--brasa-viva), var(--hondura-baja);
  transition:transform .09s cubic-bezier(.2,.9,.3,1), box-shadow .09s, filter .15s;
}
.pulsar:hover{filter:brightness(1.07)}
.pulsar:active{transform:translateY(3px); box-shadow:0 0 0 var(--brasa-viva)}
.pulsar[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none}
.pulsar--ancho{width:100%}
.pulsar--calma{
  background:transparent; color:var(--tinta-media);
  box-shadow:inset 0 0 0 1px var(--linea); font-weight:550;
}
.pulsar--calma:hover{color:var(--tinta); box-shadow:inset 0 0 0 1px var(--brasa); filter:none}
.enlace{background:none; color:var(--tinta-leve); text-decoration:underline;
  text-underline-offset:4px; padding:var(--e3); min-height:44px}
.enlace:hover{color:var(--tinta)}

.redondo{
  width:44px; height:44px; display:grid; place-items:center; flex:none;
  border-radius:50%; color:var(--tinta-media);
  box-shadow:inset 0 0 0 1px var(--linea);
  transition:color .15s, box-shadow .15s, transform .15s;
}
.redondo:hover{color:var(--brasa); box-shadow:inset 0 0 0 1px var(--brasa); transform:translateY(-1px)}
.redondo[aria-pressed="true"]{color:var(--brasa); box-shadow:inset 0 0 0 1.5px var(--brasa); background:var(--brasa-lavada)}

/* ── cabecera ───────────────────────────────────────────────────────────── */
.testera{display:flex; align-items:center; gap:var(--e3); padding:var(--e5) 0 var(--e4)}
.emblema{
  width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:11px;
  color:var(--brasa); background:var(--brasa-lavada);
  box-shadow:inset 0 0 0 1.5px var(--brasa);
}
.testera__nombre{font-family:var(--display); font-size:1.15rem; font-weight:700; line-height:1}
.testera__pie{font-size:.76rem; color:var(--tinta-leve); margin-top:2px}
.testera__mandos{margin-left:auto; display:flex; gap:var(--e2)}

/* ── pantallas ──────────────────────────────────────────────────────────── */
.pantalla{display:none}
.pantalla.viva{display:block; animation:entrar .34s var(--salida) both}
@keyframes entrar{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

/* ── LA PUERTA ──────────────────────────────────────────────────────────── */
.puerta{
  background:var(--carta); border-radius:var(--r-carta); box-shadow:var(--hondura);
  padding:var(--e6) var(--e5); margin-top:6vh;
  border-top:3px solid var(--brasa);
}
.puerta h1{font-size:clamp(1.5rem, 5vw, 1.8rem); margin-bottom:var(--e2)}
.puerta__decir{color:var(--tinta-media); font-size:.94rem; margin-bottom:var(--e5)}
.campo{display:block; margin-bottom:var(--e4)}
.campo > span{display:block; font-weight:600; font-size:.85rem; margin-bottom:var(--e2)}
.campo input{
  width:100%; min-height:52px; padding:0 var(--e4); font:inherit; color:var(--tinta);
  background:var(--mesa); border-radius:var(--r-control);
  box-shadow:inset 0 0 0 1px var(--linea);
  transition:box-shadow .15s;
}
.campo input:focus{box-shadow:inset 0 0 0 2px var(--brasa); outline:none}
.campo--folio input{letter-spacing:.24em; text-transform:uppercase; font-weight:600}
.aviso{
  color:var(--yerro); font-size:.9rem; min-height:1.3em; margin-top:var(--e3);
}
.letra-chica{
  margin-top:var(--e5); padding-top:var(--e4); border-top:1px dashed var(--linea);
  font-size:.8rem; line-height:1.6; color:var(--tinta-leve);
}
.letra-chica b{color:var(--tinta-media)}

/* Aviso de que se está trabajando sin red. Se dice siempre: mostrar contenido
   viejo sin avisar es mentir sobre el avance. */
.sin-senal{
  display:flex; align-items:flex-start; gap:var(--e2);
  padding:var(--e3) var(--e4); margin-bottom:var(--e4); border-radius:12px;
  background:var(--espera-lav); color:var(--espera);
  font-size:.8rem; line-height:1.45;
  box-shadow:inset 0 0 0 1px var(--espera);
}
.sin-senal svg{flex:none; margin-top:2px}
.sin-senal b{font-weight:700}

/* ── invitación a instalar ──────────────────────────────────────────────── */
.instalar{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--e3); align-items:center;
  margin-top:var(--e4); padding:var(--e3) var(--e4);
  background:var(--carta); border-radius:16px; box-shadow:var(--hondura-baja);
  animation:asomar .5s .6s var(--salida) both; position:relative;
}
.instalar__icono{
  width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
  background:var(--brasa-lavada); color:var(--brasa);
}
.instalar__titulo{font-weight:650; font-size:.9rem}
.instalar__decir{font-size:.79rem; color:var(--tinta-leve); line-height:1.4; margin-top:2px}
.instalar .pulsar{min-height:44px; padding:0 var(--e4); font-size:.88rem}
.instalar__cerrar{
  position:absolute; top:6px; right:6px; width:30px; height:30px;
  box-shadow:none; color:var(--tinta-leve);
}
.instalar__cerrar:hover{box-shadow:none; color:var(--tinta)}
/* Ya instalada: la invitación no tiene sentido y no se pinta. */
@media (display-mode: standalone){ .instalar{display:none !important} }

/* ── EL TABLERO ─────────────────────────────────────────────────────────── */
.hoy{
  display:grid; grid-template-columns:auto 1fr; gap:var(--e4); align-items:center;
  background:var(--carta); border-radius:var(--r-carta); box-shadow:var(--hondura-baja);
  padding:var(--e4) var(--e5); margin-bottom:var(--e6);
  position:relative; overflow:hidden;
}
.hoy::after{content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--brasa)}
.disco{position:relative; width:76px; height:76px; flex:none}
.disco svg{transform:rotate(-90deg); display:block}
.disco__arco{stroke:var(--brasa); stroke-linecap:round;
  transition:stroke-dashoffset 1.2s var(--salida)}
.disco__centro{position:absolute; inset:0; display:grid; place-content:center; text-align:center}
.disco__centro b{font-family:var(--display); font-size:1.7rem; font-weight:700; line-height:1}
.disco__centro small{display:block; font-size:.58rem; letter-spacing:.14em; color:var(--tinta-leve)}
.hoy__saludo{font-size:1.1rem; margin-bottom:2px}
.hoy__frase{font-size:.87rem; color:var(--tinta-media)}

.rotulo{font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-leve); font-weight:600}
.encabeza{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--e3); margin:0 var(--e1) var(--e4)}

/* la senda de temas: nodos encadenados, no una lista de tarjetas */
.senda{list-style:none; position:relative; padding-left:var(--e6)}
.senda::before{
  content:''; position:absolute; left:19px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(180deg, var(--brasa) 0%, var(--linea) 22%, var(--linea) 100%);
  border-radius:2px;
}
.parada{position:relative; margin-bottom:var(--e3)}
.parada__nodo{
  position:absolute; left:calc(-1 * var(--e6) + 8px); top:50%; translate:0 -50%;
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:.72rem; font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--mesa); color:var(--tinta-leve);
  box-shadow:inset 0 0 0 2px var(--linea);
  z-index:1;
}
.parada--viva .parada__nodo{
  background:var(--brasa); color:var(--sobre-brasa); box-shadow:0 0 0 4px var(--brasa-lavada);
}
.ficha{
  display:grid; grid-template-columns:1fr auto; gap:var(--e3); align-items:center;
  width:100%; text-align:left; padding:var(--e3) var(--e4);
  background:var(--carta); border-radius:14px; box-shadow:var(--hondura-baja);
  transition:transform .18s var(--salida), box-shadow .18s;
  animation:asomar .45s var(--salida) both;
}
@keyframes asomar{from{opacity:0; transform:translateX(-14px)} to{opacity:1; transform:none}}
.parada--viva .ficha{box-shadow:var(--hondura), inset 0 0 0 1px var(--brasa)}
.parada--viva .ficha:hover{transform:translateX(4px)}
.parada--espera .ficha{background:transparent; box-shadow:inset 0 0 0 1px var(--linea); opacity:.62}
.ficha > span{display:block; min-width:0}
.ficha__nombre{display:block; font-weight:600; font-size:.96rem; line-height:1.25}
.ficha__estado{display:block; font-size:.78rem; color:var(--tinta-leve); margin-top:3px}
.ficha__medida{
  font-size:.74rem; font-weight:700; color:var(--brasa); font-variant-numeric:tabular-nums;
  padding:4px 9px; border-radius:999px; background:var(--brasa-lavada); white-space:nowrap;
}

/* ── LA BANDEJA DE MODOS ────────────────────────────────────────────────── */
.velo{position:fixed; inset:0; z-index:20; background:oklch(10% 0.02 168 / .7);
  opacity:0; pointer-events:none; transition:opacity .3s}
.velo.abierta{opacity:1; pointer-events:auto}
.bandeja{
  position:fixed; left:0; right:0; bottom:0; z-index:21; max-width:560px; margin:0 auto;
  background:var(--carta); border-radius:24px 24px 0 0; box-shadow:var(--hondura);
  padding:var(--e2) var(--e5) calc(var(--e5) + env(safe-area-inset-bottom));
  transform:translateY(102%); transition:transform .38s var(--salida);
  max-height:88dvh; overflow-y:auto;
}
.bandeja.abierta{transform:none}
.bandeja__asa{width:44px; height:4px; border-radius:999px; background:var(--linea); margin:var(--e2) auto var(--e4)}
.bandeja h2{font-size:1.35rem; margin-bottom:var(--e1)}
.bandeja__decir{font-size:.86rem; color:var(--tinta-media); margin-bottom:var(--e5)}

.modos{display:flex; flex-direction:column; gap:var(--e2); margin-bottom:var(--e5)}
.modo{
  display:grid; grid-template-columns:42px 1fr auto; gap:var(--e3); align-items:center;
  width:100%; text-align:left; padding:var(--e3) var(--e4); min-height:64px;
  background:var(--mesa); border-radius:14px;
  box-shadow:inset 0 0 0 1px var(--linea);
  transition:transform .16s var(--salida), box-shadow .16s;
}
.modo:hover:not([disabled]){transform:translateX(4px); box-shadow:inset 0 0 0 1.5px var(--brasa)}
.modo[disabled]{opacity:.45; cursor:not-allowed}
.modo__marca{width:42px; height:42px; display:grid; place-items:center; border-radius:11px;
  background:var(--brasa-lavada); color:var(--brasa)}
.modo__nombre{display:block; font-weight:650; font-size:.97rem}
.modo__glosa{display:block; font-size:.79rem; color:var(--tinta-leve); margin-top:2px; line-height:1.35}
.modo__cuenta{font-size:.75rem; color:var(--tinta-leve); font-variant-numeric:tabular-nums; white-space:nowrap}

.grados{margin-bottom:var(--e3)}
.grados__titulo{display:flex; align-items:center; gap:var(--e2); margin-bottom:var(--e3);
  font-size:.82rem; font-weight:600; color:var(--tinta-media)}
.pastillas{display:flex; flex-wrap:wrap; gap:var(--e2)}
.pastilla{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 var(--e4);
  border-radius:999px; font-size:.83rem; font-weight:550; color:var(--tinta-media);
  background:var(--mesa); box-shadow:inset 0 0 0 1px var(--linea);
  transition:color .15s, box-shadow .15s, background .15s;
}
.pastilla[aria-pressed="true"]{
  color:var(--brasa); background:var(--brasa-lavada); font-weight:700;
  box-shadow:inset 0 0 0 1.5px var(--brasa);
}
.pastilla[disabled]{opacity:.35; cursor:not-allowed}

/* ═══ LA MESA ═══════════════════════════════════════════════════════════ */
.mesa__cinta{display:flex; align-items:center; gap:var(--e3); margin:var(--e2) 0 var(--e4)}
.muescas{display:flex; gap:3px; flex:1; min-width:0}
.muesca{height:4px; flex:1; border-radius:999px; background:var(--linea);
  transition:background .3s, transform .3s var(--salida)}
.muesca.buena{background:var(--acierto)}
.muesca.mala{background:var(--yerro)}
.muesca.aqui{transform:scaleY(2.4)}

/* la racha: sólo dentro de la sesión (CAR-054 §17.4) */
.racha{
  display:inline-flex; align-items:center; gap:5px; font-size:.78rem; font-weight:700;
  color:var(--acierto); font-variant-numeric:tabular-nums; white-space:nowrap;
  opacity:0; transform:scale(.8); transition:opacity .25s, transform .25s var(--salida);
}
.racha.encendida{opacity:1; transform:none}
.racha.sube{animation:latir .4s var(--salida)}
@keyframes latir{0%{transform:scale(1)} 40%{transform:scale(1.28)} 100%{transform:scale(1)}}

/* — el mazo: cartas reales apiladas — */
.mazo{position:relative; perspective:1600px; perspective-origin:50% 30%;
  margin-bottom:var(--e4); touch-action:pan-y}
.dorso-apilado{
  position:absolute; inset:0; border-radius:var(--r-carta);
  background:var(--carta); box-shadow:var(--hondura-baja);
  pointer-events:none;
}
/* Las cartas de abajo tienen que ASOMAR: si no se ven, no hay mazo — hay una
   tarjeta suelta. Giran en sentidos distintos para que parezcan repartidas a
   mano y no una copia desplazada. */
#dorso1{transform:translateY(24px) scale(.92) rotate(-2.4deg); opacity:.5}
#dorso2{transform:translateY(12px) scale(.96) rotate(1.5deg);  opacity:.78}

/* — la carta: dos caras que se relevan —
   MEDIDO en SES-INV-620: la versión con `preserve-3d` + doble `rotateY(180deg)`
   se veía perfecta y NO se podía tocar: `elementFromPoint` sobre una opción
   devolvía `.carta`, no el botón. En un teléfono, responder no habría hecho
   nada. Por eso el volteo NO rota el contenedor: son dos medias vueltas
   encadenadas sobre el mismo plano. Se ve igual y el toque cae donde debe. */
.carta{
  position:relative;
  animation:repartir .48s var(--salida) both;
}
@keyframes repartir{
  from{opacity:0; transform:translateY(34px) rotateX(-14deg) rotateZ(-3deg) scale(.93)}
  to{opacity:1; transform:none}
}
.carta.se-va{animation:volar .52s cubic-bezier(.5,0,.75,0) forwards}
@keyframes volar{
  to{opacity:0; transform:translate(38vw, -30vh) rotateZ(26deg) scale(.55)}
}
.carta.temblor{animation:temblar .38s ease-in-out}
@keyframes temblar{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-7px)}
  75%{transform:translateX(7px)}
}

.cara{
  background:var(--carta); border-radius:var(--r-carta); box-shadow:var(--hondura);
  padding:var(--e5);
}
.cara--frente{display:none}
.carta.volteada .cara--dorso{display:none}
.carta.volteada .cara--frente{display:block}

.cara.saliendo{animation:media-sale .3s cubic-bezier(.6,0,1,.5) forwards}
.cara.entrando{animation:media-entra .34s cubic-bezier(0,.5,.35,1) both}
@keyframes media-sale{ to{transform:rotateY(-88deg); opacity:.55} }
@keyframes media-entra{ from{transform:rotateY(88deg); opacity:.55} to{transform:none; opacity:1} }

/* el cintillo de la carta */
.cintillo{display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap; margin-bottom:var(--e4)}
.marbete{
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px;
  font-size:.74rem; font-weight:650; color:var(--tinta-media);
  background:var(--mesa); box-shadow:inset 0 0 0 1px var(--linea);
}
.serie{margin-left:auto; font-size:.72rem; color:var(--tinta-leve);
  font-variant-numeric:tabular-nums; letter-spacing:.04em}

/* EL SELLO — lo único que lleva oro y lo único que brilla */
.sello{
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:8px;
  font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--oro); background:var(--oro-lav);
  box-shadow:inset 0 0 0 1.5px var(--oro);
  rotate:-1.8deg; position:relative; overflow:hidden;
  animation:estampar .45s cubic-bezier(.2,1.4,.4,1) .3s both;
}
.sello::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:linear-gradient(105deg, transparent 36%, var(--oro) 48%, transparent 60%);
  background-size:260% 100%; background-repeat:no-repeat;
  animation:lustre 4.5s ease-in-out 1.4s infinite;
}
@keyframes estampar{
  from{opacity:0; rotate:-15deg; scale:1.8}
  to{opacity:1; rotate:-1.8deg; scale:1}
}
@keyframes lustre{0%,76%{background-position:240% 0} 100%{background-position:-80% 0}}
.sello--espera{color:var(--espera); background:var(--espera-lav); box-shadow:inset 0 0 0 1.5px var(--espera)}
.sello--espera::after{display:none}
.sello--muerta{color:var(--yerro); background:var(--yerro-lav);
  box-shadow:inset 0 0 0 1.5px var(--yerro); text-decoration:line-through}
.sello--muerta::after{display:none}

.pregunta{
  font-family:var(--display); font-size:clamp(1.24rem, 4.6vw, 1.42rem);
  font-weight:500; line-height:1.32; letter-spacing:-.01em; margin-bottom:var(--e5);
}

/* el momento a ciegas: el corazón pedagógico */
.aciegas{text-align:center; padding:var(--e4) var(--e3) var(--e2)}
.arena{
  width:44px; height:44px; margin:0 auto var(--e3); position:relative;
}
.arena svg{display:block; transform:rotate(-90deg)}
.arena__arco{stroke:var(--brasa); stroke-linecap:round; transition:stroke-dashoffset 1s linear}
.aciegas__decir{font-size:.9rem; color:var(--tinta-media); line-height:1.55; margin-bottom:var(--e4)}
.aciegas__decir b{color:var(--tinta); font-weight:700}
.aciegas__pista{
  display:block; font-size:.76rem; color:var(--tinta-leve); margin-top:var(--e3);
}

/* las opciones */
.opciones{display:flex; flex-direction:column; gap:var(--e2)}
.opcion{
  display:grid; grid-template-columns:28px 1fr; gap:var(--e3); align-items:start;
  width:100%; text-align:left; padding:var(--e3) var(--e4); min-height:56px;
  font-size:.94rem; line-height:1.45; color:var(--tinta);
  background:var(--mesa); border-radius:14px; box-shadow:inset 0 0 0 1px var(--linea);
  transition:transform .16s var(--salida), box-shadow .16s, opacity .3s;
  animation:caer .4s var(--salida) both;
}
@keyframes caer{from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none}}
.opcion:hover:not([disabled]){transform:translateX(4px); box-shadow:inset 0 0 0 1.5px var(--brasa)}
.opcion[disabled]{cursor:default}
.opcion__letra{
  width:28px; height:28px; display:grid; place-items:center; flex:none; border-radius:9px;
  font-size:.78rem; font-weight:800; color:var(--tinta-leve);
  box-shadow:inset 0 0 0 1px var(--linea);
}
.opcion--buena{background:var(--acierto-lav); box-shadow:inset 0 0 0 2px var(--acierto)}
.opcion--buena .opcion__letra{color:var(--acierto); box-shadow:inset 0 0 0 1.5px var(--acierto)}
.opcion--mala{background:var(--yerro-lav); box-shadow:inset 0 0 0 1.5px var(--yerro)}
.opcion--mala .opcion__letra{color:var(--yerro); box-shadow:inset 0 0 0 1.5px var(--yerro)}
.opcion--tenue{opacity:.6}
.opcion--tuya{box-shadow:inset 0 0 0 2px var(--brasa), 0 0 0 3px var(--brasa-lavada)}

.porque{
  font-size:.85rem; line-height:1.6; color:var(--tinta-media);
  padding:var(--e1) var(--e2) var(--e3) 44px;
  animation:caer .38s var(--salida) both;
}
.porque__voz{display:block; font-size:.66rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:3px}
.porque--buena .porque__voz{color:var(--acierto)}
.porque--mala .porque__voz{color:var(--yerro)}

.enelhospital{
  margin-top:var(--e4); padding:var(--e4); border-radius:14px;
  background:var(--mesa); box-shadow:inset 3px 0 0 var(--brasa);
  font-size:.89rem; line-height:1.6; color:var(--tinta-media);
  animation:caer .42s .08s var(--salida) both;
}
.enelhospital b{
  display:flex; align-items:center; gap:6px; margin-bottom:5px;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brasa); font-weight:800;
}

.pie-mesa{margin-top:var(--e4)}

/* — el montón de dominadas, esquina superior — */
.monton{
  position:fixed; top:14px; right:14px; z-index:15;
  display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  background:var(--carta); box-shadow:var(--hondura-baja);
  font-size:.8rem; font-weight:700; color:var(--acierto);
  font-variant-numeric:tabular-nums;
  opacity:0; transform:translateY(-10px); transition:opacity .3s, transform .3s var(--salida);
}
.monton.visible{opacity:1; transform:none}
.monton.crece{animation:latir .45s var(--salida)}

/* — chispas al acertar — */
.chispa{
  position:fixed; width:9px; height:9px; border-radius:2px; pointer-events:none; z-index:30;
  animation:chispear .72s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes chispear{
  from{opacity:1; transform:translate(0,0) rotate(0) scale(1)}
  to{opacity:0; transform:translate(var(--dx), var(--dy)) rotate(var(--giro)) scale(.3)}
}

/* ── EL CIERRE ──────────────────────────────────────────────────────────── */
.recuento{
  background:var(--carta); border-radius:var(--r-carta); box-shadow:var(--hondura);
  padding:var(--e6) var(--e5); margin-top:4vh; text-align:center;
  border-top:3px solid var(--brasa);
}
/* La corona sólo se pone verde si de verdad hubo aciertos: coronar en verde
   una ronda de 0/5 es felicitar a alguien por algo que no pasó. */
.recuento[data-logro="pleno"]{border-top-color:var(--acierto)}
.recuento[data-logro="nada"]{border-top-color:var(--linea)}
.recuento h2{font-size:1.5rem; margin:var(--e3) 0 var(--e1)}
.tanteo{font-family:var(--display); font-size:clamp(3rem, 14vw, 3.8rem); font-weight:700;
  line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
  animation:brotar .6s var(--salida) both}
@keyframes brotar{from{opacity:0; transform:scale(.6)} to{opacity:1; transform:none}}
.tanteo small{font-size:.35em; color:var(--tinta-leve); font-weight:400}
.recuento__decir{font-size:.9rem; color:var(--tinta-media); margin-bottom:var(--e5)}

.regreso{text-align:left; margin-top:var(--e5)}
.regreso__titulo{display:flex; align-items:center; gap:var(--e2); margin-bottom:var(--e3);
  font-size:.82rem; font-weight:600; color:var(--tinta-media)}
.calendario{list-style:none; position:relative; padding-left:var(--e5)}
.calendario::before{content:''; position:absolute; left:6px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(180deg, var(--brasa), transparent)}
.calendario li{
  display:grid; grid-template-columns:1fr auto; gap:var(--e3); align-items:center;
  padding:7px 0; font-size:.85rem; position:relative;
  animation:caer .4s var(--salida) both;
}
.calendario li::before{
  content:''; position:absolute; left:calc(-1 * var(--e5) + 2px); top:50%; translate:0 -50%;
  width:10px; height:10px; border-radius:50%; background:var(--acierto);
  box-shadow:0 0 0 3px var(--carta);
}
.calendario li.fallada::before{background:var(--yerro)}
.calendario .que{color:var(--tinta-media); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.calendario .cuando{font-size:.76rem; color:var(--tinta-leve); white-space:nowrap;
  font-variant-numeric:tabular-nums}

.par-botones{display:flex; gap:var(--e3); margin-top:var(--e5)}
.par-botones > *{flex:1}

.escondido{display:none !important}

/* ── movimiento reducido: la información nunca depende del gesto ────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* El relevo de caras ya es por `display`, así que sin movimiento sigue
     funcionando igual: sólo desaparecen las medias vueltas y las chispas. */
  .cara.saliendo, .cara.entrando{animation:none; transform:none; opacity:1}
  .chispa{display:none}
}