/* Juegos / Premios — se apoya en los tokens de styles.css */

#juegos{scroll-margin-top:96px}

.games-inner{width:100%}
#juegos .games-month{
  margin:0 0 10px;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-deep);
}
.games-layout{max-width:920px;margin:0 auto}

.games-tabs{
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px;
  margin:0 auto 22px;
}
.games-tab{
  appearance:none;border:1px solid var(--border);background:#fff;color:var(--navy-deep);
  border-radius:999px;padding:10px 18px;min-height:44px;
  font-family:inherit;font-size:14px;font-weight:700;line-height:1;
}
.games-tab:hover{border-color:var(--gold)}
.games-tab[aria-selected="true"]{
  background:var(--navy);border-color:var(--navy);color:#fff;
}
.games-tab:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

.game-panel{
  background:#fff;border:1px solid var(--border);border-radius:22px;
  padding:28px 24px 24px;
  box-shadow:0 22px 50px -34px rgba(0,51,71,.45);
}
.game-panel[hidden]{display:none}
.game-panel-head{text-align:center;margin-bottom:18px}
.game-panel-head h3{
  font-size:clamp(26px,3vw,34px);color:var(--navy-deep);margin:0 0 8px;
}
.game-panel-head p{
  margin:0 auto;max-width:58ch;
  color:var(--ink-soft);font-size:14.5px;line-height:1.55;
}

.game-note{
  margin:14px auto 0;max-width:62ch;
  text-align:center;color:var(--ink-faint);font-size:12.5px;line-height:1.5;
}
.games-disclaimer{
  max-width:70ch;margin:22px auto 0;text-align:center;
  color:var(--ink-faint);font-size:12.5px;line-height:1.55;
}
.games-noscript{
  text-align:center;color:var(--ink-soft);font-size:14px;margin:0;
}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Ruleta */
.wheel-stage{
  position:relative;width:min(100%,400px);margin:0 auto;
}
.wheel-svg{width:100%;height:auto;display:block;overflow:visible;
  filter:drop-shadow(0 16px 28px rgba(0,51,71,.16));
}
.wheel-legend{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;
  margin:16px 0 0;padding:0;list-style:none;
}
.wheel-legend li{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--navy-deep);
}
.wheel-swatch{
  width:12px;height:12px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(0,51,71,.16);
}
.wheel-actions{display:flex;justify-content:center;margin-top:18px}
.wheel-actions .btn{min-height:52px;min-width:220px;justify-content:center}
.game-panel .btn:disabled{
  opacity:.55;cursor:not-allowed;transform:none;
}

/* Resultado compartido */
.game-result{
  margin-top:18px;
  background:linear-gradient(180deg,#fff,var(--bg-alt));
  border:1px solid rgba(195,159,73,.5);
  border-radius:16px;padding:22px 18px 18px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.game-result-kicker{
  margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);
}
.game-result-title{
  font-size:clamp(26px,3.4vw,36px);color:var(--navy-deep);margin:0;line-height:1.2;
  max-width:22ch;text-wrap:balance;
}
.game-result-title:focus{outline:none}
.game-result-title:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.game-result-text{
  margin:0 auto;max-width:48ch;
  color:var(--ink-soft);font-size:14.5px;line-height:1.55;
}
.game-actions{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px;
}
.game-actions .btn{min-height:48px;justify-content:center}

/* Quiz */
.quiz-progress{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:8px;font-size:12.5px;font-weight:700;color:var(--navy);
}
.quiz-bar{
  height:8px;border-radius:99px;background:rgba(0,85,116,.12);overflow:hidden;margin-bottom:16px;
}
.quiz-bar > span{
  display:block;height:100%;width:0;background:linear-gradient(90deg,var(--navy),var(--gold));
}
.quiz-question{
  font-family:Inter,system-ui,sans-serif;font-weight:700;
  font-size:clamp(18px,2.2vw,22px);line-height:1.35;color:var(--navy-deep);
  margin:0 0 14px;
}
.quiz-question:focus{outline:none}
.quiz-options{display:flex;flex-direction:column;gap:8px}
.quiz-option{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  background:#fff;border:1.5px solid var(--border);border-radius:12px;
  padding:13px 14px;min-height:52px;
  font-family:inherit;font-size:15px;line-height:1.4;color:var(--ink);
}
.quiz-option:hover:not(:disabled){border-color:var(--gold)}
.quiz-option:disabled{cursor:default}
.quiz-option .mark{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;margin-top:1px;
  border:1.5px solid var(--border);display:grid;place-items:center;
  font-size:12px;font-weight:800;color:transparent;
}
.quiz-option.is-correct{
  border-color:var(--navy);background:var(--bg-tint);
}
.quiz-option.is-correct .mark{
  border-color:var(--navy);background:var(--navy);color:#fff;
}
.quiz-option.is-wrong{
  border-color:#c0392b;background:#fdf6f5;
}
.quiz-option.is-wrong .mark{
  border-color:#c0392b;background:#c0392b;color:#fff;
}
.quiz-feedback{min-height:0;margin-top:14px}
.quiz-feedback-title{
  margin:0 0 4px;font-size:14px;font-weight:800;color:var(--navy-deep);
}
.quiz-feedback-title.is-bad{color:#8e2f26}
.quiz-feedback-text{margin:0;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.quiz-next{margin-top:14px;display:flex;justify-content:flex-end}
.quiz-score{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:56px;line-height:1;color:var(--navy);margin:0 0 8px;
}
.quiz-score span{font-size:28px;color:var(--gold-deep)}

/* Caries */
.cavity-start{text-align:center;padding:8px 0 4px}
.cavity-start p{margin:0 auto 16px;max-width:46ch;color:var(--ink-soft);font-size:14.5px;line-height:1.55}
.cavity-trail{font-weight:700;color:var(--navy);font-size:13.5px}
.cavity-hud{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;
}
.cavity-stat{
  background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:8px 6px;text-align:center;
}
.cavity-stat strong{
  display:block;font-family:Inter,system-ui,sans-serif;font-size:18px;font-weight:800;
  color:var(--navy-deep);font-variant-numeric:tabular-nums;
}
.cavity-stat span{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
}
.cavity-timer{
  height:8px;border-radius:99px;background:rgba(0,85,116,.12);overflow:hidden;margin-bottom:14px;
}
.cavity-timer > span{
  display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--navy),var(--gold));
  transform-origin:left center;transform:scaleX(1);
}
.cavity-timer.is-urgent > span{background:#a9843a}
.cavity-round-label{
  margin:0 0 10px;text-align:center;font-size:13px;font-weight:700;color:var(--navy);
}
.cavity-round-label:focus{outline:none}
.cavity-round-label:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.cavity-progress{display:flex;justify-content:center;gap:8px;margin:0 0 10px}
.cavity-dot{width:10px;height:10px;border-radius:99px;background:rgba(0,85,116,.16)}
.cavity-dot.is-current{background:var(--navy);box-shadow:0 0 0 3px var(--gold-soft)}
.cavity-dot.is-done{background:var(--gold-deep)}
.cavity-dot.is-miss{background:#c0392b}
.cavity-level-note{margin:-2px auto 12px;max-width:46ch;text-align:center;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.cavity-next{display:flex;justify-content:center;margin-top:14px}
.cavity-grid{
  display:grid;gap:10px;margin:0 auto;max-width:560px;
}
.cavity-tooth{
  appearance:none;border:1.5px solid var(--border);background:
    radial-gradient(120% 80% at 50% 0%,#fff,#f7f4ee 70%);
  border-radius:16px;padding:8px 6px 6px;min-height:88px;
  display:grid;place-items:center;color:var(--navy);
}
.cavity-tooth:hover:not(:disabled){border-color:var(--gold);transform:translateY(-1px)}
.cavity-tooth:disabled{cursor:default}
.cavity-tooth.is-correct{border-color:var(--navy);background:var(--gold-soft);box-shadow:inset 0 0 0 2px var(--gold)}
.cavity-tooth.is-wrong{border-color:#c0392b;background:#fdf6f5;animation:tooth-nudge .35s ease}
.cavity-tooth svg{width:min(100%,54px);height:auto;display:block}
@keyframes tooth-nudge{
  0%,100%{transform:translateX(0)}
  30%{transform:translateX(-4px)}
  70%{transform:translateX(4px)}
}
.cavity-live{margin:12px 0 0;min-height:1.4em;text-align:center;font-size:15px;font-weight:800;color:var(--navy-deep)}
.cavity-live.is-ok{color:var(--navy)}
.cavity-live.is-bad{color:#8e2f26}

@media (max-width:1180px) and (min-width:861px){
  .nav-links{gap:22px}
  .nav-inner{padding-left:24px;padding-right:24px}
  .nav-links a{font-size:14.5px}
}

@media (max-width:640px){
  .game-panel{padding:18px 14px 16px;border-radius:18px}
  .games-tab{padding:10px 14px;font-size:13.5px}
  .wheel-actions .btn,.game-actions .btn,.cavity-start .btn,.cavity-next .btn,.quiz-next .btn{width:100%}
  .game-actions,.quiz-next,.wheel-actions{flex-direction:column}
  .quiz-option{font-size:14.5px}
  .cavity-tooth{min-height:76px;border-radius:14px}
  .cavity-grid{gap:8px}
}

@media (prefers-reduced-motion: reduce){
  .cavity-tooth.is-wrong{animation:none}
  .cavity-tooth:hover:not(:disabled){transform:none}
  .quiz-bar > span,.cavity-timer > span{transition:none}
  .smile-before,.smile-divider{transition:none}
}

/* Simulador de sonrisa */
.smile-treatments{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px;
}
.smile-treatment{
  appearance:none;min-height:52px;padding:10px 12px;border-radius:14px;
  border:1.5px solid var(--border);background:#fff;color:var(--navy-deep);
  font-family:inherit;font-size:13.5px;font-weight:700;line-height:1.25;text-align:center;
}
.smile-treatment:hover{border-color:var(--gold)}
.smile-treatment[aria-checked="true"]{
  background:var(--navy);border-color:var(--navy);color:#fff;
}
.smile-blurb{
  margin:0 auto 14px;max-width:58ch;text-align:center;
  color:var(--ink-soft);font-size:14.5px;line-height:1.5;
}
.smile-frame{margin:0 auto;max-width:640px}
.smile-stage{
  --pos:58%;
  position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;
  background:#f6f1ea;border:1px solid rgba(195,159,73,.45);
  box-shadow:0 18px 40px -28px rgba(0,51,71,.55);
  touch-action:pan-y;
}
.smile-layer{position:absolute;inset:0}
.smile-layer svg{width:100%;height:100%;display:block}
.smile-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);z-index:1}
.smile-chip{
  position:absolute;top:12px;z-index:2;pointer-events:none;
  background:rgba(0,51,71,.78);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;
}
.smile-chip-before{left:12px}
.smile-chip-after{right:12px}
.smile-divider{
  position:absolute;top:0;bottom:0;left:var(--pos);z-index:2;
  width:2px;background:#fff;transform:translateX(-50%);
  box-shadow:0 0 0 1px rgba(0,51,71,.28);
  pointer-events:none;
}
.smile-knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:#fff;color:var(--navy);
  border:2px solid var(--gold);display:grid;place-items:center;
  box-shadow:0 8px 18px rgba(0,51,71,.22);
}
.smile-stage:focus-within .smile-knob{outline:2px solid var(--gold-deep);outline-offset:3px}
.smile-range{
  position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;appearance:none;
}
.smile-hint{
  margin:8px 0 0;text-align:center;color:var(--ink-faint);font-size:12.5px;
}
.smile-controls{margin-top:16px}
.smile-options-label{
  margin:12px 0 8px;text-align:center;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);
}
.smile-options{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.smile-choice,.smile-swatch{
  appearance:none;min-height:44px;padding:8px 14px;border-radius:999px;
  border:1.5px solid var(--border);background:#fff;color:var(--navy-deep);
  font-family:inherit;font-size:13.5px;font-weight:700;
  display:inline-flex;align-items:center;gap:8px;
}
.smile-swatch i{
  width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,51,71,.16);display:block;
}
.smile-choice:hover,.smile-swatch:hover{border-color:var(--gold)}
.smile-choice[aria-checked="true"],.smile-swatch[aria-checked="true"]{
  border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);
}
.smile-disclaimer{
  margin:16px auto 0;max-width:52ch;text-align:center;
  font-size:13px;font-weight:700;line-height:1.45;color:var(--navy-deep);
}
.smile-disclaimer::before{
  content:"";display:block;width:36px;height:2px;margin:0 auto 8px;background:var(--gold);border-radius:2px;
}

@media (max-width:640px){
  .smile-treatments{grid-template-columns:1fr}
  .smile-treatment{font-size:15px;min-height:48px}
  .smile-stage{aspect-ratio:4/3;border-radius:16px}
  .smile-chip{font-size:10px;top:8px}
  .smile-chip-before{left:8px}
  .smile-chip-after{right:8px}
  .smile-knob{width:44px;height:44px}
}