/* «Exprime 30 segundos» (41-reto-tech-show.md). Rediseño del 4/11/2026: oscuro profundo con luz amarilla,
   superficies de cristal, limones con volumen y movimiento que responde al dedo. Móvil primero: se juega
   con un pulgar, sin que la página se mueva y respetando las zonas seguras. Con «reducir movimiento»
   no se anima nada que no haga falta. La gestión (/admin/reto/) usa las mismas piezas. */
.reto {
  --r-bg: #0a0b0c;
  --r-s1: rgba(255, 255, 255, .035);
  --r-s2: rgba(255, 255, 255, .06);
  --r-s3: rgba(255, 255, 255, .09);
  --r-b1: rgba(255, 255, 255, .08);
  --r-b2: rgba(255, 255, 255, .15);
  --r-t1: #f6f6f3;
  --r-t2: #b9bbc0;
  --r-t3: #8e9197;
  --r-am: #ffe100;
  --r-am2: #ffc400;
  --r-cielo: #6cbee4;
  --r-verde: #46c08a;
  --r-rojo: #ff7d6e;
  --r-radio: 22px;
  --r-ease: cubic-bezier(.2, .8, .2, 1);
  --r-muelle: cubic-bezier(.34, 1.56, .64, 1);
  margin: 0;
  min-height: 100dvh;
  color: var(--r-t1);
  font-family: var(--text);
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(255, 225, 0, .16), transparent 62%),
    radial-gradient(700px 520px at -10% 105%, rgba(108, 190, 228, .09), transparent 60%),
    radial-gradient(600px 420px at 110% 60%, rgba(70, 192, 138, .05), transparent 60%),
    var(--r-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
/* Rejilla de puntos y grano: dan textura sin pesar (todo CSS) */
.reto::before,
.reto::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.reto::before { background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 10%, transparent 75%); }
.reto::after { background-image: var(--grano-luz); opacity: .55; mix-blend-mode: overlay; }
.reto > * { position: relative; z-index: 1; }
/* hidden gana siempre, aunque la pieza tenga su propio display */
.reto [hidden] { display: none !important; }
.reto a { color: var(--r-t1); }
.reto ::selection { background: var(--r-am); color: #141400; }
.reto .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.reto .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Cabecera ─────────────────────────────────────────────────────────────────────────────────── */
.reto-cab { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: linear-gradient(to bottom, rgba(10, 11, 12, .86), rgba(10, 11, 12, .6)); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--r-b1); }
.reto-marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--display); font-weight: 650; font-size: 16px; letter-spacing: -.01em; text-decoration: none; }
.reto-marca img { border-radius: 8px; }
.reto-marca-sep { width: 1px; height: 16px; background: var(--r-b2); }
.reto-marca-t { color: var(--r-t2); font-weight: 600; font-size: 14px; }
.reto-volver { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--r-b1); background: var(--r-s1); color: var(--r-t2) !important; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.reto-volver:hover { background: var(--r-s2); color: var(--r-t1) !important; border-color: var(--r-b2); }
.reto-volver svg { width: 16px; height: 16px; }

/* ── Estructura ───────────────────────────────────────────────────────────────────────────────── */
.reto-main { max-width: 540px; margin: 0 auto; padding: 18px max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.reto-main.ancho { max-width: 680px; }
.reto-pantalla { display: flex; flex-direction: column; gap: 16px; }
.reto-pantalla[hidden] { display: none; }
.reto-pantalla.entra { animation: reto-entra .45s var(--r-ease) both; }
.reto-superficie { position: relative; padding: 18px; border-radius: var(--r-radio); background: linear-gradient(180deg, var(--r-s2), var(--r-s1)); border: 1px solid var(--r-b1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 40px -28px rgba(0, 0, 0, .9); }
/* Borde de luz amarilla para lo importante */
.reto-destacada { border-color: transparent; background: linear-gradient(180deg, rgba(31, 30, 18, .96), rgba(17, 17, 15, .96)) padding-box, linear-gradient(160deg, rgba(255, 225, 0, .75), rgba(255, 225, 0, .08) 45%, rgba(108, 190, 228, .3)) border-box; box-shadow: 0 30px 60px -36px rgba(255, 200, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); }

/* ── Texto ────────────────────────────────────────────────────────────────────────────────────── */
.reto-ojo { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--r-am); }
.reto-ojo::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--r-am), transparent); }
.reto-h1 { margin: 0; font-family: var(--display); font-weight: 650; font-size: clamp(40px, 11.5vw, 68px); line-height: .96; letter-spacing: -.04em; text-wrap: balance; }
.reto-h1 em { font-style: normal; background: linear-gradient(180deg, #fff38a 0%, var(--r-am) 45%, var(--r-am2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reto-h2 { margin: 0; font-family: var(--display); font-weight: 650; font-size: clamp(26px, 7.4vw, 34px); line-height: 1.06; letter-spacing: -.025em; outline: none; text-wrap: balance; }
.reto-h3 { margin: 0; font-family: var(--display); font-weight: 650; font-size: 20px; letter-spacing: -.015em; }
.reto-sub { margin: 0; font-size: 17px; line-height: 1.5; color: var(--r-t2); text-wrap: pretty; }
.reto-sub b { color: var(--r-t1); font-weight: 650; }
.reto-nota { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--r-t3); }
.reto-nota a { color: var(--r-t2); text-underline-offset: 3px; }
.reto-msg { margin: 0; min-height: 1.5em; font-size: 15.5px; font-weight: 600; color: var(--r-am); text-align: center; }
.reto-msg:empty { min-height: 0; }

/* Aviso del momento de la campaña: un punto que late y el texto */
.reto-aviso { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--r-s1); border: 1px solid var(--r-b1); font-size: 14.5px; line-height: 1.45; color: var(--r-t2); }
.reto-aviso::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--r-t3); box-shadow: 0 0 0 4px rgba(142, 145, 151, .15); }
.reto-aviso[data-tono='abierta']::before { background: var(--r-verde); box-shadow: 0 0 0 4px rgba(70, 192, 138, .18); animation: reto-late-punto 1.8s infinite; }
.reto-aviso[data-tono='abierta'] { color: var(--r-t1); border-color: rgba(70, 192, 138, .3); }
.reto-aviso[data-tono='demo']::before { background: var(--r-am); box-shadow: 0 0 0 4px rgba(255, 225, 0, .15); }
.reto-red { margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 125, 110, .1); border: 1px solid rgba(255, 125, 110, .35); color: #ffd9d3; font-size: 14px; }

/* ── Botones ──────────────────────────────────────────────────────────────────────────────────── */
.reto-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 16px; border: 0; background: linear-gradient(180deg, #fff066 0%, var(--r-am) 40%, var(--r-am2) 100%); color: #141400 !important; font: inherit; font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: .01em; text-align: center; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 12px 28px -12px rgba(255, 200, 0, .7); transition: transform .15s var(--r-ease), box-shadow .2s, filter .2s; -webkit-tap-highlight-color: transparent; }
.reto-btn:hover { filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 16px 34px -12px rgba(255, 200, 0, .85); }
.reto-btn:active { transform: translateY(1px) scale(.985); }
.reto-btn svg { width: 20px; height: 20px; flex: none; }
.reto-btn.grande { min-height: 60px; font-size: 18px; width: 100%; border-radius: 18px; letter-spacing: .03em; }
.reto-btn.sec { background: var(--r-s2); color: var(--r-t1) !important; border: 1px solid var(--r-b2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.reto-btn.sec:hover { background: var(--r-s3); filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.reto-btn.peq { min-height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: 12px; }
.reto-btn[disabled] { opacity: .55; cursor: default; transform: none; }
.reto-btn.cargando { color: transparent !important; pointer-events: none; }
.reto-btn.cargando::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(20, 20, 0, .25); border-top-color: #141400; animation: reto-gira .7s linear infinite; }
.reto-btn.brilla { background-image: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%), linear-gradient(180deg, #fff066 0%, var(--r-am) 40%, var(--r-am2) 100%); background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; animation: reto-brillo 2.8s var(--r-ease) infinite; }
.reto-btn:focus-visible, .reto-limon:focus-visible, .reto-icono:focus-visible, .reto a:focus-visible, .reto input:focus-visible, .reto textarea:focus-visible, .reto select:focus-visible, .reto summary:focus-visible, .reto-volver:focus-visible { outline: 3px solid var(--r-cielo); outline-offset: 3px; }
.reto-icono { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--r-b1); background: var(--r-s1); color: var(--r-t2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.reto-icono:hover { background: var(--r-s2); color: var(--r-t1); }
.reto-icono svg { width: 18px; height: 18px; }
.reto-icono[aria-pressed='true'] { color: var(--r-am); border-color: rgba(255, 225, 0, .35); }
.reto-icono .on { display: none; }
.reto-icono[aria-pressed='true'] .on { display: inline; }
.reto-icono[aria-pressed='true'] .off { display: none; }

/* Enlaces de abajo */
.reto-enlaces { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.reto-enlaces a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; color: var(--r-t2); font-size: 14px; font-weight: 600; text-decoration: none; transition: color .2s, background-color .2s; }
.reto-enlaces a:hover { color: var(--r-t1); background: var(--r-s1); }
.reto-enlaces svg { width: 18px; height: 18px; }

/* ── Inicio ───────────────────────────────────────────────────────────────────────────────────── */
.reto-hero { display: flex; flex-direction: column; gap: 14px; }
.reto-reglas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.reto-regla { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; border-radius: 18px; background: var(--r-s1); border: 1px solid var(--r-b1); }
.reto-regla svg { width: 22px; height: 22px; color: var(--r-am); }
.reto-regla b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.reto-regla span { font-size: 12.5px; color: var(--r-t3); line-height: 1.3; }
.reto-regla.menos svg, .reto-regla.menos b { color: var(--r-rojo); }
.reto-regla.mas b { color: var(--r-am); }
.reto-demo { display: flex; flex-direction: column; gap: 14px; }
.reto-demo-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reto-demo-cab .reto-ojo { color: var(--r-cielo); }
.reto-demo-cab .reto-ojo::before { background: linear-gradient(90deg, var(--r-cielo), transparent); }
.reto-instruccion { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.reto-paso { font-size: 12.5px; color: var(--r-t3); font-weight: 600; }
.reto-empezar { animation: reto-sube .5s var(--r-muelle) both; }
.reto-empezar[hidden] { display: none; }
.reto-recuperar { border-radius: 16px; border: 1px solid var(--r-b1); background: var(--r-s1); font-size: 14.5px; color: var(--r-t2); }
.reto-recuperar summary { list-style: none; cursor: pointer; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; font-weight: 600; }
.reto-recuperar summary::-webkit-details-marker { display: none; }
.reto-recuperar summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.reto-recuperar[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.reto-recuperar form { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.reto-recuperar .reto-msg { text-align: left; color: var(--r-t2); font-weight: 500; }
.reto-fila { display: flex; gap: 8px; }
.reto-fila input { flex: 1; min-width: 0; }

/* ── El tablero y los limones ─────────────────────────────────────────────────────────────────── */
.reto-tablero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(7px, 2.2vw, 12px); width: 100%; aspect-ratio: 1; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.reto-tablero.grande { width: min(100%, calc(100dvh - 270px)); min-width: min(100%, 280px); margin: 0 auto; }
.reto-limon { position: relative; display: grid; place-items: center; padding: 9%; border-radius: clamp(16px, 4.6vw, 24px); border: 1px solid var(--r-b1); background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .085), rgba(255, 255, 255, .02) 70%), rgba(20, 21, 23, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -10px 20px -12px rgba(0, 0, 0, .6), 0 10px 22px -16px rgba(0, 0, 0, .9); cursor: pointer; transition: transform .14s var(--r-ease), border-color .2s, background-color .2s, box-shadow .2s; overflow: visible; }
.reto-limon svg { width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: transform .18s var(--r-muelle); }
@media (hover: hover) and (pointer: fine) {
  .reto-limon:hover { border-color: rgba(255, 225, 0, .4); transform: translateY(-2px); }
  .reto-limon:hover svg { transform: scale(1.04); }
}
.reto-limon:active { transform: scale(.94); }
.reto-tablero.nuevo .reto-limon { animation: reto-aparece .16s var(--r-ease) both; animation-delay: calc(var(--i, 0) * 8ms); }
.reto-limon.bien { border-color: rgba(255, 225, 0, .9); background: radial-gradient(circle at 50% 45%, rgba(255, 225, 0, .38), rgba(255, 225, 0, .06) 70%), rgba(40, 36, 8, .9); box-shadow: 0 0 0 4px rgba(255, 225, 0, .14), 0 0 32px rgba(255, 225, 0, .35); }
.reto-limon.bien svg { animation: reto-exprime .42s var(--r-muelle); }
.reto-limon.mal { border-color: rgba(255, 125, 110, .85); background: radial-gradient(circle at 50% 50%, rgba(255, 125, 110, .22), transparent 70%), rgba(40, 18, 16, .85); animation: reto-no .32s; }
.reto-tablero.bloqueado .reto-limon:not(.mal) { opacity: .45; filter: saturate(.4); transition: opacity .12s, filter .12s; }
.reto-tablero.esperando { display: grid; place-items: center; grid-template-columns: 1fr; }
.reto-espera { margin: 0; color: var(--r-t3); }
/* El dibujo: piel con volumen (degradados de las <defs> de la página), hojas, cara y una sombra en el suelo */
:is(.reto-limon, .reto-fantasma) .sombra { fill: url(#rl-sombra); }
.reto-fantasma .sombra { display: none; }
:is(.reto-limon, .reto-fantasma) .cuerpo { fill: url(#rl-piel); stroke: #c99a00; stroke-width: 1.4; }
:is(.reto-limon, .reto-fantasma) .brillo { fill: #fff; opacity: .55; }
:is(.reto-limon, .reto-fantasma) .poro { fill: #b38500; opacity: .14; }
:is(.reto-limon, .reto-fantasma) .hoja { fill: url(#rl-hoja); stroke: #1f6a46; stroke-width: 1.2; stroke-linejoin: round; }
:is(.reto-limon, .reto-fantasma) .vena { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.1; stroke-linecap: round; }
:is(.reto-limon, .reto-fantasma) .moflete { fill: #ff9a5c; opacity: .32; }
:is(.reto-limon, .reto-fantasma) .cara { fill: #3b2b00; }
:is(.reto-limon, .reto-fantasma) .cara .l { fill: none; stroke: #3b2b00; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
/* El limón acertado, exprimido encima del tablero nuevo; y gotas de zumo (los pone el JS) */
.reto-fantasma { position: absolute; inset: 9%; width: 82%; height: 82%; overflow: visible; animation: reto-fantasma .42s var(--r-ease) forwards; filter: drop-shadow(0 0 14px rgba(255, 225, 0, .7)); }
.reto-gota { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50% 50% 50% 0; background: radial-gradient(circle at 35% 35%, #fff9b0, var(--r-am) 60%, var(--r-am2)); pointer-events: none; animation: reto-gota .5s var(--r-ease) forwards; }

/* ── La partida ───────────────────────────────────────────────────────────────────────────────── */
html.reto-jugando, html.reto-jugando body { overscroll-behavior: none; }
.reto-juego { position: relative; min-height: calc(100dvh - 110px); justify-content: flex-start; gap: 16px; }
.reto-marcador { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 24px; background: linear-gradient(180deg, var(--r-s2), var(--r-s1)); border: 1px solid var(--r-b1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.reto-dato { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.reto-dato-t { font-size: 11.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--r-t3); }
.reto-dato-n { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; min-width: 4ch; display: inline-block; transform-origin: left center; }
.reto-dato-n.sube { animation: reto-pop .3s var(--r-muelle); }
.reto-dato-n.baja { animation: reto-baja .3s; color: var(--r-rojo); }
/* Reloj en anillo */
.reto-reloj { position: relative; width: 78px; height: 78px; display: grid; place-items: center; }
.reto-reloj svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.reto-reloj .pista { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 6; }
.reto-reloj .anillo { fill: none; stroke: var(--r-am); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 213.6; stroke-dashoffset: 0; transition: stroke-dashoffset .12s linear, stroke .3s; filter: drop-shadow(0 0 6px rgba(255, 225, 0, .45)); }
.reto-reloj .reto-dato-n { min-width: 2ch; text-align: center; font-size: 27px; color: var(--r-t1); transform-origin: center; }
.reto-reloj-t { position: absolute; bottom: 12px; font-size: 9.5px; font-weight: 650; letter-spacing: .14em; color: var(--r-t3); }
.reto-reloj.poco .anillo { stroke: var(--r-rojo); filter: drop-shadow(0 0 8px rgba(255, 125, 110, .6)); }
.reto-reloj.poco .reto-dato-n { color: var(--r-rojo); animation: reto-tic 1s infinite; }
/* El vaso de limonada */
.reto-vaso { justify-self: end; display: flex; align-items: center; gap: 10px; color: var(--r-t1); }
.reto-vaso svg { width: 46px; height: 62px; overflow: visible; }
.reto-vaso-n { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.reto-vaso-n b { font-family: var(--mono); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.reto-liquido { transform: translateY(56px); transition: transform .45s var(--r-muelle); }
.reto-ola { animation: reto-ola 2.4s linear infinite; }
.reto-burbuja { fill: rgba(255, 255, 255, .7); animation: reto-burbuja 2.2s ease-in infinite; }
.reto-burbuja:nth-of-type(2) { animation-delay: .7s; }
.reto-burbuja:nth-of-type(3) { animation-delay: 1.4s; }
/* Racha y puntos que flotan */
.reto-racha { position: absolute; left: 50%; top: 104px; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 225, 0, .14); border: 1px solid rgba(255, 225, 0, .4); color: var(--r-am); font-size: 13px; font-weight: 700; letter-spacing: .04em; pointer-events: none; animation: reto-sube .35s var(--r-muelle) both; }
.reto-racha[hidden] { display: none; }
.reto-racha svg { width: 14px; height: 14px; }
.reto-flota { position: absolute; z-index: 4; pointer-events: none; font-family: var(--mono); font-weight: 800; font-size: 22px; color: var(--r-am); text-shadow: 0 2px 12px rgba(0, 0, 0, .6); transform: translate(-50%, -50%); animation: reto-flota .7s var(--r-ease) forwards; }
.reto-flota.menos { color: var(--r-rojo); }
.reto-barra { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .07); overflow: hidden; }

/* ── Cuenta atrás ─────────────────────────────────────────────────────────────────────────────── */
.reto-cuenta { min-height: 66dvh; align-items: center; justify-content: center; text-align: center; gap: 22px; }
.reto-cuenta-aro { position: relative; width: 200px; height: 200px; display: grid; place-items: center; }
.reto-cuenta-aro svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.reto-cuenta-aro .pista { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 5; }
.reto-cuenta-aro .anillo { fill: none; stroke: var(--r-am); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 597; stroke-dashoffset: 597; filter: drop-shadow(0 0 10px rgba(255, 225, 0, .5)); }
.reto-cuenta-aro.va .anillo { animation: reto-aro .8s linear forwards; }
.reto-num { margin: 0; font-family: var(--display); font-size: 120px; font-weight: 700; line-height: 1; letter-spacing: -.05em; color: var(--r-am); font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(255, 225, 0, .35); }
.reto-num.late { animation: reto-late .8s var(--r-ease); }
.reto-cuenta .reto-msg { color: var(--r-t2); font-weight: 600; }

/* ── El resultado ─────────────────────────────────────────────────────────────────────────────── */
.reto-resultado { text-align: left; }
.reto-res { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; overflow: hidden; }
.reto-res::before { content: ''; position: absolute; inset: -40% -20% auto; height: 70%; background: radial-gradient(closest-side, rgba(255, 225, 0, .22), transparent); pointer-events: none; }
.reto-res > * { position: relative; }
.reto-res-cifra { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 0; }
.reto-res-cifra b { font-family: var(--mono); font-size: clamp(60px, 19vw, 84px); font-weight: 800; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff 0%, #fff6a6 55%, var(--r-am) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reto-res-cifra span { font-size: 16px; font-weight: 650; color: var(--r-t2); }
.reto-res-linea { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--r-t2); }
.reto-record { margin: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; background-image: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .7) 50%, transparent 60%), linear-gradient(180deg, #fff066, var(--r-am) 45%, var(--r-am2)); background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; animation: reto-brillo 2.4s var(--r-ease) infinite; color: #141400; font-family: var(--display); font-weight: 750; font-size: 14.5px; letter-spacing: .04em; box-shadow: 0 10px 26px -10px rgba(255, 200, 0, .8); position: relative; overflow: hidden; }
.reto-record[hidden] { display: none; }
.reto-record svg { width: 16px; height: 16px; }

.reto-pos { margin: 0; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--r-b1); font-size: 15px; line-height: 1.45; color: var(--r-t1); }
.reto-pos[hidden] { display: none; }
.reto-pos::before { content: ''; flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 225, 0, .12) var(--copa) center / 20px no-repeat; }
.reto-resultado { --copa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe100' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4z'/%3E%3Cpath d='M17 5h3a3 3 0 0 1-3 4M7 5H4a3 3 0 0 0 3 4'/%3E%3C/svg%3E"); }

/* Guardar la marca: el formulario */
.reto-guardar[hidden] { display: none; }
.reto-form { display: flex; flex-direction: column; gap: 14px; }
.reto-form-cab { display: flex; flex-direction: column; gap: 6px; }
.reto-form-cab p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--r-t2); }
.reto-campos { display: grid; gap: 12px; }
.reto-campos.dos { grid-template-columns: 1fr 1fr; }
.reto-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.reto-campo label { font-size: 13.5px; font-weight: 650; color: var(--r-t2); }
.reto-campo label small { font-weight: 500; color: var(--r-t3); font-size: 12.5px; }
.reto input[type='text'], .reto input[type='email'], .reto input[type='tel'], .reto input:not([type]), .reto textarea, .reto select { width: 100%; min-height: 50px; box-sizing: border-box; border-radius: 14px; border: 1px solid var(--r-b2); background: rgba(0, 0, 0, .28); color: var(--r-t1); padding: 0 14px; font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.reto textarea { padding: 12px 14px; }
.reto input::placeholder, .reto textarea::placeholder { color: #6f7277; }
.reto input:hover, .reto textarea:hover { border-color: rgba(255, 255, 255, .24); }
.reto input:focus, .reto textarea:focus, .reto select:focus { outline: none; border-color: var(--r-am); background: rgba(0, 0, 0, .38); box-shadow: 0 0 0 4px rgba(255, 225, 0, .16); }
.reto input[aria-invalid='true'] { border-color: var(--r-rojo); box-shadow: 0 0 0 4px rgba(255, 125, 110, .14); }
.reto-campo-error { margin: 0; font-size: 13px; font-weight: 600; color: #ffb3a8; }
.reto-campo-error:empty { display: none; }
.reto-campo-ayuda { margin: 0; font-size: 12.5px; color: var(--r-t3); }
.reto-casilla { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.45; color: var(--r-t2); cursor: pointer; }
.reto-casilla input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border-radius: 7px; border: 1.5px solid var(--r-b2); background: rgba(0, 0, 0, .28); display: grid; place-items: center; cursor: pointer; transition: background-color .15s, border-color .15s; }
.reto-casilla input::after { content: ''; width: 6px; height: 11px; border: solid #141400; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px) scale(0); transition: transform .15s var(--r-muelle); }
.reto-casilla input:checked { background: var(--r-am); border-color: var(--r-am); }
.reto-casilla input:checked::after { transform: rotate(45deg) translate(-1px, -1px) scale(1); }
.reto-casilla input:focus-visible { outline: 3px solid var(--r-cielo); outline-offset: 2px; }
.reto-casilla input[aria-invalid='true'] { border-color: var(--r-rojo); }
.reto-casilla a { color: var(--r-t1); text-underline-offset: 3px; }
.reto-guardar-como { margin: 0; font-size: 16px; color: var(--r-t2); }
.reto-guardar-como b { color: var(--r-t1); }
.reto-guardar .reto-msg { text-align: left; }

/* El código privado, como una entrada */
.reto-codigo { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 20px; background: linear-gradient(135deg, rgba(255, 225, 0, .14), rgba(255, 225, 0, .03) 60%), rgba(18, 18, 16, .9); border: 1px dashed rgba(255, 225, 0, .55); -webkit-mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; animation: reto-sube .45s var(--r-muelle) both; }
.reto-codigo[hidden] { display: none; }
.reto-codigo p { margin: 0; }
.reto-codigo-t { font-size: 12.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--r-am); }
.reto-codigo-n { font-family: var(--mono); font-size: clamp(24px, 7.6vw, 32px); font-weight: 700; letter-spacing: .06em; color: var(--r-t1); user-select: all; -webkit-user-select: all; }
.reto-codigo .reto-btn { align-self: flex-start; }

.reto-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reto-acciones .grande { grid-column: 1 / -1; }
.reto-acciones .sec, .reto-pie-acc .sec { font-size: 14px; padding: 0 12px; line-height: 1.2; }

/* Los premios */
.reto-premios { display: flex; flex-direction: column; gap: 12px; animation: reto-sube .5s var(--r-ease) both; }
.reto-premios[hidden] { display: none; }
.reto-premios-cab { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.reto-premio { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 18px; border-radius: 20px; background: linear-gradient(180deg, var(--r-s2), var(--r-s1)); border: 1px solid var(--r-b1); }
.reto-premio > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.reto-premio p { margin: 0; line-height: 1.5; color: var(--r-t2); font-size: 14.5px; }
.reto-premio p b { color: var(--r-t1); font-size: 16px; font-weight: 650; line-height: 1.35; }
.reto-premio-i { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 225, 0, .12); color: var(--r-am); }
.reto-premio-i svg { width: 26px; height: 26px; }
.reto-premio.plata .reto-premio-i { background: rgba(108, 190, 228, .12); color: var(--r-cielo); }
.reto-premio-t { font-size: 11.5px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--r-am) !important; }
.reto-premio.plata .reto-premio-t { color: var(--r-cielo) !important; }
.reto-premio.todos { grid-template-columns: 1fr; text-align: center; padding: 24px 20px; background: linear-gradient(160deg, #fff066 0%, var(--r-am) 45%, var(--r-am2) 100%); border: 0; box-shadow: 0 24px 50px -26px rgba(255, 200, 0, .8); }
.reto-premio.todos p { color: #3b3200; }
.reto-premio.todos .reto-premio-t { color: #5c4e00 !important; }
.reto-frase { margin: 4px 0 !important; font-family: var(--display); font-size: clamp(23px, 7vw, 34px) !important; font-weight: 750; letter-spacing: -.02em; color: #141400 !important; line-height: 1.1 !important; }
.reto-premio.todos .reto-nota { color: #5c4e00; }
.reto-identidad { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--r-t3); }
.reto-firma { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 18px; background: var(--r-s1); border: 1px solid var(--r-b1); font-size: 14px; color: var(--r-t2); }
.reto-firma p { margin: 0; line-height: 1.5; }
.reto-firma a { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--r-am); text-decoration: none; }
.reto-firma a::after { content: '→'; transition: transform .2s; }
.reto-firma a:hover::after { transform: translateX(3px); }
/* Confeti de la mejor marca (lo pone el JS; nunca con «reducir movimiento») */
.reto-confeti { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.reto-confeti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: reto-cae var(--d, 1.6s) var(--r-ease) forwards; }

/* ── La clasificación ─────────────────────────────────────────────────────────────────────────── */
.reto-clas-cab { display: flex; flex-direction: column; gap: 12px; }
.reto-estado { margin: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; background: var(--r-s2); border: 1px solid var(--r-b1); font-weight: 650; font-size: 13.5px; color: var(--r-t1); }
.reto-estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--r-am); }
.reto-estado[data-tono='provisional']::before { background: var(--r-verde); animation: reto-late-punto 1.8s infinite; }
.reto-estado[data-tono='final']::before { background: var(--r-cielo); }
.reto-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--r-t3); }
.reto-podio { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "p2 p1 p3"; align-items: end; gap: 10px; }
.reto-podio:empty { display: none; }
.reto-podio li { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; animation: reto-sube .5s var(--r-muelle) both; }
.reto-podio .p1 { grid-area: p1; animation-delay: .05s; }
.reto-podio .p2 { grid-area: p2; animation-delay: .15s; }
.reto-podio .p3 { grid-area: p3; animation-delay: .25s; }
.reto-avatar { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 22px; color: #141400; background: linear-gradient(160deg, #e9ecf1, #aeb4bd); box-shadow: 0 0 0 3px rgba(255, 255, 255, .08), 0 12px 24px -12px rgba(0, 0, 0, .9); }
.p1 .reto-avatar { width: 74px; height: 74px; font-size: 28px; background: linear-gradient(160deg, #fff27a, var(--r-am) 50%, var(--r-am2)); box-shadow: 0 0 0 4px rgba(255, 225, 0, .2), 0 0 36px rgba(255, 225, 0, .4); }
.p3 .reto-avatar { background: linear-gradient(160deg, #f2c49a, #c98a52); }
.reto-corona { position: absolute; top: -18px; left: 50%; width: 26px; height: 18px; transform: translateX(-50%); color: var(--r-am); }
.reto-podio .nombre { max-width: 100%; font-weight: 650; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reto-podio .pts { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--r-am); }
.reto-podio .ac { font-size: 12px; color: var(--r-t3); }
.reto-peana { width: 100%; display: grid; place-items: start center; padding-top: 10px; border-radius: 16px 16px 6px 6px; background: linear-gradient(180deg, var(--r-s3), var(--r-s1)); border: 1px solid var(--r-b1); border-bottom: 0; font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--r-t2); }
.p1 .reto-peana { height: 104px; color: var(--r-am); background: linear-gradient(180deg, rgba(255, 225, 0, .2), rgba(255, 225, 0, .03)); border-color: rgba(255, 225, 0, .35); }
.p2 .reto-peana { height: 76px; }
.p3 .reto-peana { height: 58px; }
.reto-podio .mia .reto-avatar { box-shadow: 0 0 0 3px var(--r-cielo), 0 12px 24px -12px rgba(0, 0, 0, .9); }
.reto-lista { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.reto-fila-c { display: grid; grid-template-columns: 2.4ch 38px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--r-s1); border: 1px solid var(--r-b1); animation: reto-sube .4s var(--r-ease) both; }
.reto-fila-c .pos { font-family: var(--mono); font-weight: 700; color: var(--r-t3); text-align: right; }
.reto-fila-c .ini { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--r-s3); font-family: var(--display); font-weight: 700; color: var(--r-t1); }
.reto-fila-c .quien { display: flex; flex-direction: column; min-width: 0; }
.reto-fila-c .nombre { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reto-fila-c .ac { font-size: 12.5px; color: var(--r-t3); }
.reto-fila-c .pts { font-family: var(--mono); font-weight: 700; color: var(--r-am); }
.reto-fila-c.mia { border-color: rgba(108, 190, 228, .6); background: rgba(108, 190, 228, .08); }
.reto-tu { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--r-cielo); color: #06202e; font-size: 11px; font-weight: 750; letter-spacing: .04em; vertical-align: 2px; }
.reto-vacio { margin: 26px 0 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 20px; border-radius: 22px; border: 1px dashed var(--r-b2); text-align: center; color: var(--r-t2); }
.reto-vacio[hidden] { display: none; }
.reto-vacio svg { width: 84px; height: 84px; }
.reto-vacio b { font-family: var(--display); font-size: 19px; color: var(--r-t1); }
.reto-yo { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(108, 190, 228, .08); border: 1px solid rgba(108, 190, 228, .35); color: var(--r-t1); }
.reto-yo[hidden] { display: none; }
.reto-pie-acc { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reto-pie-acc .grande { grid-column: 1 / -1; }
.reto-otra-tabla { margin: 16px 0 0; text-align: center; font-size: 14px; }
.reto-otra-tabla a { color: var(--r-t2); }

/* ── Las condiciones ──────────────────────────────────────────────────────────────────────────── */
.reto-doc { display: flex; flex-direction: column; gap: 14px; }
.reto-doc section { display: flex; flex-direction: column; gap: 10px; }
.reto-doc p, .reto-doc li { margin: 0; color: var(--r-t2); line-height: 1.65; font-size: 15.5px; }
.reto-doc b { color: var(--r-t1); }
.reto-premios-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.reto-premios-lista li { padding-left: 16px; border-left: 2px solid rgba(255, 225, 0, .45); }
.reto-cond { margin: 0; padding: 0; list-style: none; counter-reset: cond; display: flex; flex-direction: column; gap: 12px; }
.reto-cond li { counter-increment: cond; display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.reto-cond li::before { content: counter(cond); width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--r-s3); color: var(--r-am); font-family: var(--mono); font-weight: 700; font-size: 14px; }

/* ── Animaciones ──────────────────────────────────────────────────────────────────────────────── */
@keyframes reto-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes reto-sube { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes reto-aparece { from { opacity: .35; transform: scale(.93); } to { opacity: 1; transform: none; } }
@keyframes reto-fantasma { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.25, .72); opacity: 1; } 100% { transform: scale(.6, 1.3) translateY(-12px); opacity: 0; } }
@keyframes reto-exprime { 0% { transform: scale(1); } 30% { transform: scale(1.18, .8); } 60% { transform: scale(.92, 1.1); } 100% { transform: scale(1); } }
@keyframes reto-no { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px) rotate(-2deg); } 50% { transform: translateX(5px) rotate(2deg); } 75% { transform: translateX(-3px); } }
@keyframes reto-gota { from { opacity: 1; transform: translate(0, 0) rotate(var(--r, 0deg)) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r, 0deg)) scale(.4); } }
@keyframes reto-flota { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 25% { opacity: 1; transform: translate(-50%, -80%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -170%) scale(1); } }
@keyframes reto-pop { 0% { transform: scale(1); } 40% { transform: scale(1.2); color: var(--r-am); } 100% { transform: scale(1); } }
@keyframes reto-baja { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }
@keyframes reto-tic { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } }
@keyframes reto-late { 0% { transform: scale(1.4); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes reto-aro { to { stroke-dashoffset: 0; } }
@keyframes reto-ola { from { transform: translateX(0); } to { transform: translateX(-40px); } }
@keyframes reto-burbuja { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .8; } 100% { transform: translateY(-26px); opacity: 0; } }
@keyframes reto-brillo { 0% { background-position: 120% 0, 0 0; } 60%, 100% { background-position: -120% 0, 0 0; } }
@keyframes reto-late-punto { 0%, 100% { box-shadow: 0 0 0 0 rgba(70, 192, 138, .45); } 50% { box-shadow: 0 0 0 6px rgba(70, 192, 138, 0); } }
@keyframes reto-gira { to { transform: rotate(360deg); } }
@keyframes reto-cae { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x, 0), 105vh) rotate(var(--g, 540deg)); opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  .reto *, .reto *::before, .reto *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reto-ola, .reto-burbuja, .reto-btn.brilla, .reto-record { animation: none !important; }
}
@media (max-width: 380px) {
  .reto-campos.dos { grid-template-columns: 1fr; }
  .reto-regla { padding: 12px 10px; }
  .reto-regla b { font-size: 18px; }
  .reto-dato-n { font-size: 30px; }
}
@media (min-width: 761px) {
  .reto-main { padding-top: 40px; }
  .reto-pantalla { gap: 22px; }
}

/* ── La recompensa segura (4/11/2026): se ve al empezar, durante la partida y se abre al guardar ── */
.reto-cofre { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; padding: 16px; border-radius: 20px; overflow: hidden; border: 1px solid transparent; background: linear-gradient(135deg, rgba(41, 37, 6, .95), rgba(20, 19, 12, .95)) padding-box, linear-gradient(120deg, var(--r-am), rgba(255, 225, 0, .1) 40%, var(--r-cielo) 75%, var(--r-am)) border-box; background-size: 100% 100%, 300% 300%; animation: reto-borde 5s linear infinite; }
.reto-cofre::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .08) 50%, transparent 60%); background-size: 250% 100%; animation: reto-brillo-solo 3.4s var(--r-ease) infinite; pointer-events: none; }
.reto-cofre-i, .reto-bloq-i { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(160deg, #fff066, var(--r-am) 50%, var(--r-am2)); color: #141400; box-shadow: 0 0 28px rgba(255, 225, 0, .45); animation: reto-candado 2.6s ease-in-out infinite; }
.reto-cofre-i svg, .reto-bloq-i svg { width: 28px; height: 28px; }
.reto-cofre-t, .reto-bloq-t { margin: 0; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--r-am); }
.reto-cofre-s, .reto-bloq-s { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: var(--r-t2); }
.reto-cofre-s b { color: var(--r-t1); }
.reto-mia { border-radius: 16px; border: 1px solid rgba(70, 192, 138, .4); background: rgba(70, 192, 138, .08); }
.reto-mia summary { list-style: none; cursor: pointer; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 16px; font-weight: 650; color: var(--r-t1); }
.reto-mia summary::-webkit-details-marker { display: none; }
.reto-mia summary svg { width: 20px; height: 20px; color: var(--r-verde); }
.reto-mia-in { padding: 0 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
/* En la partida: la barra que se llena hasta la recompensa */
.reto-meta { display: grid; grid-template-columns: 22px auto 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 225, 0, .07); border: 1px solid rgba(255, 225, 0, .25); }
.reto-meta-i { color: var(--r-am); display: grid; place-items: center; }
.reto-meta-i svg { width: 20px; height: 20px; }
.reto-meta-t { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--r-am); white-space: nowrap; }
.reto-meta-barra { position: relative; height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.reto-meta-lleno { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--r-am2), var(--r-am), #fff27a); box-shadow: 0 0 12px rgba(255, 225, 0, .6); transition: width .2s linear; }
.reto-meta-lleno::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .25) 0 6px, transparent 6px 12px); animation: reto-rayas .8s linear infinite; }
.reto-meta-n { font-size: 13px; font-weight: 700; color: var(--r-t1); min-width: 4ch; text-align: right; }
.reto-meta.cerca { border-color: rgba(255, 225, 0, .7); box-shadow: 0 0 24px rgba(255, 225, 0, .25); }
.reto-meta.cerca .reto-meta-i { animation: reto-candado .7s ease-in-out infinite; }
.reto-meta.abierta .reto-meta-t, .reto-meta.abierta .reto-meta-i { color: var(--r-verde); }
.reto-racha { top: 172px; }
/* En el resultado: bloqueada hasta guardar */
.reto-bloq { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; padding: 18px; border-radius: 20px; border: 1px dashed rgba(255, 225, 0, .6); background: radial-gradient(120% 120% at 0% 0%, rgba(255, 225, 0, .14), transparent 60%), rgba(18, 18, 14, .9); animation: reto-sube .45s var(--r-muelle) both; }
.reto-bloq-falsa { margin: 6px 0 0; font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: .02em; color: var(--r-am); filter: blur(6px); user-select: none; -webkit-user-select: none; }
/* Desbloqueada: la frase, el QR y qué hacer */
.reto-recompensa { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 20px; border-radius: 24px; text-align: center; background: linear-gradient(160deg, #fff066 0%, var(--r-am) 45%, var(--r-am2) 100%); color: #3b3200; box-shadow: 0 30px 60px -28px rgba(255, 200, 0, .85); outline: none; animation: reto-abre .6s var(--r-muelle) both; }
.reto-recompensa p { margin: 0; line-height: 1.5; font-size: 14.5px; }
.reto-recompensa .reto-premio-t { color: #5c4e00 !important; }
.reto-recompensa .reto-h3 { color: #141400; }
.reto-recompensa .reto-nota { color: #5c4e00; font-size: 12.5px; }
.reto-qr { width: min(100%, 240px); aspect-ratio: 1; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); }
.reto-qr svg { display: block; width: 100%; height: 100%; }
.reto-qr:empty { display: none; }
.reto-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: flex; flex-direction: column; gap: 8px; text-align: left; width: 100%; max-width: 360px; }
.reto-pasos li { counter-increment: paso; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.45; color: #2b2400; }
.reto-pasos li::before { content: counter(paso); width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #141400; color: var(--r-am); font-family: var(--mono); font-weight: 700; font-size: 13px; }
.reto-pasos b { color: #141400; }
.reto-dentro { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; background: #141400; color: var(--r-verde) !important; font-weight: 700; }
.reto-mia .reto-qr { width: min(100%, 220px); }
/* La página del panel que lee el QR */
.reto-validar { display: flex; flex-direction: column; gap: 10px; }
.reto-validar-apodo { margin: 0; font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.reto-validar-pregunta { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.reto-validar-hecho { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 0; text-align: center; animation: reto-abre .5s var(--r-muelle) both; }
.reto-validar-hecho svg { width: 96px; height: 96px; }
@keyframes reto-borde { to { background-position: 0 0, 300% 0; } }
@keyframes reto-brillo-solo { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
@keyframes reto-candado { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-9deg); } 20% { transform: rotate(8deg); } 30% { transform: rotate(-5deg); } 40% { transform: rotate(0); } }
@keyframes reto-rayas { to { background-position: 17px 0; } }
@keyframes reto-abre { 0% { opacity: 0; transform: scale(.85) rotate(-1.5deg); } 60% { opacity: 1; transform: scale(1.03); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .reto-cofre, .reto-cofre::after, .reto-cofre-i, .reto-bloq-i, .reto-meta-lleno::after { animation: none !important; } }
.reto-recompensa, .reto-guardar, .reto-premios { scroll-margin-top: 84px; }