/* El atributo `hidden` DEBE ganar a cualquier `display` de las clases. Sin esto,
   `.pila { display: grid }` lo pisaba y se veian todas las vistas a la vez. */
[hidden] { display: none !important; }

/* ============================================================
   De Dónde Es — styles.css
   Vanilla, sin framework, sin build. Mobile-first (base = 360px).
   Orden: reset · tipografía · piezas de papel · componentes ·
          layout · pantallas · escritorio.
   ============================================================ */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-etiqueta);
  font-weight: 600;
  font-size: var(--t-cuerpo);
  line-height: 1.55;
  text-wrap: pretty;
  /* textura de papel: rejilla de cuaderno muy tenue */
  background-image:
    repeating-linear-gradient(0deg, rgba(185,151,95,.10) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(185,151,95,.07) 0 1px, transparent 1px 32px);
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: var(--terracota); text-decoration: none; border-bottom: 2px solid rgba(193,73,42,.32); }
a:hover { color: var(--azul); border-bottom-color: rgba(20,72,95,.45); }

:where(a, button, [tabindex], input, summary):focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- tipografía ---------- */
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 800; margin: 0; line-height: 1.02; letter-spacing: var(--tr-titulo); }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 700; }
p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }

.display { font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-display); line-height: .95; }
.mano { font-family: var(--f-mano); font-weight: 700; font-size: var(--t-mano); line-height: 1.3; }
.etiqueta {
  font-family: var(--f-etiqueta); font-weight: 700;
  font-size: var(--t-etiqueta); letter-spacing: var(--tr-etiqueta);
  text-transform: uppercase;
}
.micro { font-size: var(--t-micro); letter-spacing: .06em; color: var(--texto-suave); }
.suave { color: var(--texto-suave); }
.num { font-family: var(--f-titulo); font-weight: 800; font-variant-numeric: tabular-nums; }
.vo { /* solo lectores de pantalla */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- piezas de papel ---------- */
.papel {
  background: var(--crema);
  border: var(--b) solid var(--borde);
  border-radius: var(--r);
  box-shadow: var(--s-2);
  padding: var(--e-5);
}
.papel--fuerte { border-width: var(--b-fuerte); box-shadow: var(--s-3); }
.papel--filete { position: relative; }
.papel--filete::after {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid var(--kraft-tinta); border-radius: 4px; pointer-events: none;
}
.papel--kraft { background: var(--kraft); }
.papel--nota {
  background: var(--crema-2);
  border: 2px solid var(--kraft-tinta);
  border-left: 8px solid var(--terracota);
  border-radius: var(--r-s);
  box-shadow: var(--s-2);
  padding: var(--e-4) var(--e-5);
}
.papel--hundido { background: var(--fondo-hundido); box-shadow: none; border-width: 2px; }
.rot-1 { transform: rotate(-1.2deg); }
.rot-2 { transform: rotate(-2deg); }
.rot-3 { transform: rotate(-3deg); }
.rot-p1 { transform: rotate(1.4deg); }

/* cinta adhesiva: decorativa, siempre aria-hidden */
.cinta {
  position: absolute; width: 108px; height: 32px;
  background: rgba(234,130,68,.74);
  border-left: 3px solid rgba(193,73,42,.45);
  border-right: 3px solid rgba(193,73,42,.45);
  transform: rotate(7deg);
  pointer-events: none;
}
.cinta--dr { top: -14px; right: -12px; }
.cinta--iz { top: -14px; left: 18px; transform: rotate(-6deg); }

/* etiqueta de equipaje */
.equipaje {
  display: inline-flex; align-items: center; gap: var(--e-3);
  background: var(--kraft); border: var(--b) solid var(--borde);
  border-radius: var(--r); box-shadow: var(--s-1);
  padding: var(--e-2) var(--e-4) var(--e-2) var(--e-3);
}
.equipaje::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: var(--azul); flex: none;
}

/* pestaña de carpeta */
.pestana {
  display: inline-flex; align-items: center; min-height: 30px;
  padding: 2px var(--e-3);
  background: var(--terracota); color: var(--crema);
  border-radius: var(--r-s) var(--r-s) 0 0;
  margin-bottom: -3px; position: relative; z-index: 1;
}
.pestana--lugares { background: var(--pilar-lugares); }
.pestana--naturaleza { background: var(--pilar-naturaleza); }
.pestana--sabores { background: var(--pilar-sabores); }

/* sello de pasaporte */
.sello {
  display: grid; place-content: center; text-align: center;
  width: 104px; height: 104px; border-radius: 50%;
  border: 5px solid var(--sello); color: var(--sello);
  background: rgba(250,241,224,.72);
  transform: rotate(-8deg); position: relative; padding: 4px;
}
.sello::before {
  content: ""; position: absolute; inset: 7px;
  border: 2px solid currentColor; border-radius: 50%;
}
.sello b { font-family: var(--f-titulo); font-weight: 800; font-size: 1.5rem; line-height: 1; display: block; }
.sello span { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sello--s { width: 78px; height: 78px; border-width: 4px; }
.sello--s b { font-size: 1.125rem; }

/* ---------- botones ---------- */
.btn {
  --btn-bg: var(--crema);
  --btn-fg: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-3);
  min-height: var(--toque); padding: var(--e-3) var(--e-5);
  background: var(--btn-bg); color: var(--btn-fg);
  border: var(--b) solid var(--borde); border-radius: var(--r);
  box-shadow: var(--s-2); cursor: pointer;
  font-family: var(--f-titulo); font-weight: 800;
  font-size: 1.375rem; letter-spacing: .01em; text-align: center;
  transition: transform var(--dur) ease, box-shadow var(--dur) ease;
  text-decoration: none;
}
.btn:hover { color: var(--btn-fg); }
.btn:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 rgba(20,72,95,.26); }
.btn--principal { --btn-bg: var(--sol); box-shadow: var(--s-3); font-size: 1.625rem; }
.btn--sello { --btn-bg: var(--sello); --btn-fg: var(--crema); }
.btn--turquesa { --btn-bg: var(--turquesa); --btn-fg: var(--crema); }
.btn--azul { --btn-bg: var(--azul); --btn-fg: var(--crema); }
.btn--bloque { width: 100%; }
.btn--grande { min-height: 68px; font-size: clamp(1.5rem, 6.5vw, 2rem); }
.btn--fantasma {
  --btn-bg: transparent; box-shadow: none; border-width: 2px;
  font-family: var(--f-etiqueta); font-weight: 700; font-size: var(--t-etiqueta);
  letter-spacing: var(--tr-etiqueta); text-transform: uppercase;
}
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---------- foto + atribución ---------- */
.foto {
  position: relative; border: var(--b) solid var(--borde); border-radius: var(--r);
  box-shadow: var(--s-2); overflow: hidden; background: var(--fondo-hundido);
}
.foto > img { width: 100%; height: 100%; object-fit: cover; }
.foto--pregunta { aspect-ratio: 4 / 3; }
@media (min-height: 720px) { .foto--pregunta { aspect-ratio: 1 / 1; } }
.foto__vacia {
  position: absolute; inset: 0; display: grid; place-content: center; gap: var(--e-3);
  text-align: center; padding: var(--e-5);
  background: var(--fondo-hundido);
}

/* botón de créditos: 44px, discreto, sobre la foto */
.credito { position: absolute; right: 6px; bottom: 6px; }
.credito__btn {
  width: var(--toque); height: var(--toque); border-radius: 50%;
  display: grid; place-content: center; cursor: pointer;
  background: rgba(36,31,27,.62); color: var(--crema);
  border: 2px solid rgba(250,241,224,.7);
  font-family: var(--f-titulo); font-weight: 800; font-size: 1.125rem; line-height: 1;
  backdrop-filter: blur(2px);
}
.credito__panel {
  position: absolute; right: 0; bottom: calc(var(--toque) + 8px);
  width: min(19rem, calc(100vw - 3rem));
  background: var(--crema); color: var(--texto);
  border: var(--b) solid var(--borde); border-radius: var(--r);
  box-shadow: var(--s-2); padding: var(--e-3) var(--e-4);
  font-size: var(--t-micro); line-height: 1.5; text-align: left;
}
.credito__panel[hidden] { display: none; }

/* ---------- opciones de respuesta ---------- */
.opciones { display: grid; gap: var(--e-3); margin: 0; padding: 0; border: 0; }
.opcion {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center;
  gap: 0 var(--e-4); width: 100%; min-height: 62px; padding: 0;
  background: var(--crema); border: var(--b) solid var(--borde);
  border-radius: var(--r); box-shadow: var(--s-2); cursor: pointer;
  text-align: left; overflow: hidden;
  transition: transform var(--dur) ease;
}
.opcion:active { transform: translate(3px, 3px); }
.opcion__letra {
  align-self: stretch; display: grid; place-content: center;
  background: var(--azul); color: var(--sol);
  border-right: var(--b) solid var(--borde);
  font-family: var(--f-titulo); font-weight: 800; font-size: 1.75rem;
}
.opcion__texto { font-family: var(--f-titulo); font-weight: 700; font-size: 1.5rem; padding: var(--e-3) 0; }
.opcion__marca { padding-right: var(--e-4); font-size: 1.5rem; line-height: 1; }
.opcion--correcta { background: var(--sol); border-color: var(--sello); border-width: 4px; box-shadow: var(--s-3); }
.opcion--correcta .opcion__letra { background: var(--sello); color: var(--crema); }
.opcion--fallada { background: var(--fallo-papel); }
.opcion--fallada .opcion__letra { background: var(--terracota); color: var(--crema); }
.opcion--fallada .opcion__texto { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--terracota); }
.opcion--apagada { opacity: .55; box-shadow: none; }
.opciones[aria-disabled="true"] .opcion { cursor: default; }

/* ---------- progreso ---------- */
.progreso { display: flex; align-items: center; gap: var(--e-3); }
.progreso__pistas { display: flex; gap: 5px; flex: 1; }
.pista {
  flex: 1; height: 10px; border-radius: 3px;
  border: 2px solid var(--tinta); background: transparent;
}
.pista--ok { background: var(--acierto); }
.pista--ko { background: var(--terracota); }
.pista--actual { background: var(--sol); }
.combo { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- liga ---------- */
.liga { display: grid; gap: var(--e-3); list-style: none; margin: 0; padding: 0; }
.fila {
  display: grid; grid-template-columns: 44px 56px 1fr auto; align-items: center;
  gap: 0 var(--e-3);
  background: var(--crema); border: var(--b) solid var(--borde);
  border-radius: var(--r); box-shadow: var(--s-1); overflow: hidden;
}
.fila__puesto {
  align-self: stretch; display: grid; place-content: center;
  background: var(--kraft); border-right: var(--b) solid var(--borde);
  font-family: var(--f-titulo); font-weight: 800; font-size: 1.375rem;
}
.fila--1 .fila__puesto { background: var(--sol); }
.fila--2 .fila__puesto { background: var(--kraft); }
.fila--3 .fila__puesto { background: var(--coral); }
.fila--yo { border-color: var(--sello); border-width: 4px; box-shadow: var(--s-2); }
.fila__pais { min-width: 0; padding: var(--e-2) 0; }
.fila__nombre {
  font-family: var(--f-titulo); font-weight: 700; font-size: 1.375rem; line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fila__nota { padding-right: var(--e-4); font-family: var(--f-titulo); font-weight: 800; font-size: 1.75rem; }
.fila--1 .fila__nota { color: var(--terracota); }

/* hueco de bandera: el PNG/SVG se sirve desde /img/banderas */
.bandera {
  width: 40px; height: 27px; margin-left: var(--e-3);
  border: 2px solid var(--borde); box-shadow: 2px 2px 0 rgba(20,72,95,.22);
  background: repeating-linear-gradient(45deg, var(--kraft) 0 6px, #cbab7f 6px 12px);
  object-fit: cover; flex: none;
}
.bandera--lg { width: 60px; height: 40px; }
.bandera--xl { width: 84px; height: 56px; border-width: 3px; }

/* ---------- avisos y estados ---------- */
.aviso {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-3);
  align-items: start;
  background: var(--crema-2); border: 2px solid var(--kraft-tinta);
  border-radius: var(--r-s); padding: var(--e-3) var(--e-4);
  font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: .01em; text-transform: none;
}
.aviso--provisional { border-left: 8px solid var(--coral); }
.aviso--liga { border-left: 8px solid var(--turquesa); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--coral); color: var(--tinta);
  border: 2px solid var(--borde); border-radius: var(--r-s);
  padding: 3px var(--e-3);
}
.chip--sol { background: var(--sol); }
.chip--sello { background: var(--sello); color: var(--crema); }
.chip--turquesa { background: var(--turquesa); color: var(--crema); }

.veredicto {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--e-4);
  border: var(--b-fuerte) solid var(--borde); border-radius: var(--r);
  box-shadow: var(--s-3); padding: var(--e-4) var(--e-5);
}
.veredicto--ok { background: var(--acierto-papel); }
.veredicto--ko { background: var(--fallo-papel); }
.veredicto__icono {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-content: center;
  border: var(--b) solid var(--borde); background: var(--crema);
}
.veredicto--ok .veredicto__icono { background: var(--acierto); color: var(--crema); }
.veredicto--ko .veredicto__icono { background: var(--terracota); color: var(--crema); }
.veredicto h2 { font-size: 1.75rem; }

/* ---------- cuadrícula tipo Wordle ---------- */
.rejilla { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 15rem; }
.rejilla span {
  aspect-ratio: 1; border: 2px solid var(--tinta); border-radius: 4px;
  display: grid; place-content: center; font-size: 12px; font-weight: 700; color: var(--crema);
}
.rejilla .ok { background: var(--acierto); }
.rejilla .ko { background: var(--terracota); }

/* ---------- layout ---------- */
.envoltorio { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.envoltorio--ancho { width: min(100% - 2rem, var(--ancho-ancho)); }
.pila { display: grid; gap: var(--e-5); }
.pila--s { gap: var(--e-3); }
.pila--l { gap: var(--e-8); }
.fila-flex { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }

.cabecera {
  background: var(--azul); color: var(--crema);
  border-bottom: 3px solid var(--sol);
  padding: var(--e-3) 0;
}
.cabecera .envoltorio, .cabecera .envoltorio--ancho { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.cabecera__marca { color: var(--sol); font-size: var(--t-etiqueta); }
.cabecera__reto { color: rgba(242,229,204,.82); font-size: var(--t-micro); letter-spacing: .08em; }
.cabecera a { color: var(--sol); border-bottom-color: rgba(244,183,63,.5); }

.principal { padding: var(--e-6) 0 var(--e-12); }
.principal--juego { padding-bottom: calc(var(--barra-inf) + var(--e-8)); }

.barra-inf {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  background: rgba(250,241,224,.97);
  border-top: var(--b) solid var(--borde);
  padding: var(--e-3) 0 max(var(--e-3), env(safe-area-inset-bottom));
}

.pie {
  margin-top: var(--e-12); padding: var(--e-8) 0 var(--e-10);
  background: var(--azul); color: rgba(242,229,204,.9);
  border-top: 3px solid var(--sol); font-size: var(--t-etiqueta);
}
.pie a { color: var(--sol); border-bottom-color: rgba(244,183,63,.45); }
.pie nav { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); margin-bottom: var(--e-5); }
.pie__pais {
  display: inline-flex; align-items: center; gap: var(--e-3); min-height: var(--toque);
  background: transparent; color: var(--crema);
  border: 2px solid rgba(244,183,63,.6); border-radius: var(--r);
  padding: var(--e-2) var(--e-4); cursor: pointer;
}

/* ---------- home ---------- */
.heroe { position: relative; }
.heroe__foto { aspect-ratio: 5 / 4; }
.racha {
  display: inline-flex; align-items: center; gap: var(--e-2);
  background: var(--sol); border: var(--b) solid var(--borde); border-radius: var(--r-pill);
  box-shadow: var(--s-1); padding: 4px var(--e-4);
}
.pilares { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.pilares span {
  border: 2px solid var(--borde); border-radius: var(--r-pill);
  padding: 2px var(--e-3); background: var(--crema);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.pasos { counter-reset: p; display: grid; gap: var(--e-3); list-style: none; margin: 0; padding: 0; }
.pasos li { display: grid; grid-template-columns: 34px 1fr; gap: var(--e-3); align-items: start; }
.pasos li::before {
  counter-increment: p; content: counter(p);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--azul); color: var(--sol);
  display: grid; place-content: center;
  font-family: var(--f-titulo); font-weight: 800; font-size: 1.25rem;
}

/* ---------- selector de país ---------- */
.buscador {
  display: flex; align-items: center; gap: var(--e-3);
  background: var(--crema); border: var(--b) solid var(--borde);
  border-radius: var(--r); padding: 0 var(--e-4); min-height: 54px;
}
.buscador input {
  flex: 1; border: 0; background: transparent; min-height: 50px;
  font-family: var(--f-etiqueta); font-weight: 600; font-size: var(--t-cuerpo-lg); color: var(--texto);
}
.buscador input:focus { outline: none; }
.buscador:focus-within { box-shadow: var(--s-1); }
.paises { display: grid; gap: var(--e-2); list-style: none; margin: 0; padding: 0; }
.pais {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-4);
  width: 100%; min-height: 60px; padding: var(--e-2) var(--e-4);
  background: var(--crema); border: 2px solid var(--borde); border-radius: var(--r);
  cursor: pointer; text-align: left;
}
.pais__nombre { font-family: var(--f-titulo); font-weight: 700; font-size: 1.375rem; }
.pais[aria-pressed="true"] { background: var(--sol); border-width: var(--b-fuerte); box-shadow: var(--s-1); }
.pais[aria-pressed="true"] .pais__marca { color: var(--sello); font-weight: 700; }
.pais .bandera { margin-left: 0; }

/* ---------- tarjeta compartible (previsualización) ---------- */
.previews { display: grid; gap: var(--e-6); }
.preview { display: grid; gap: var(--e-3); justify-items: start; }
.preview canvas, .preview .lienzo {
  width: 100%; max-width: 320px; height: auto;
  border: var(--b) solid var(--borde); border-radius: var(--r); box-shadow: var(--s-2);
  background: var(--crema);
}

/* ---------- tabla de licencias ---------- */
.fuentes { display: grid; gap: var(--e-3); list-style: none; margin: 0; padding: 0; }
.fuente { display: grid; grid-template-columns: 72px 1fr; gap: var(--e-4); align-items: center; }
.fuente img, .fuente .hueco {
  width: 72px; height: 72px; object-fit: cover;
  border: 2px solid var(--borde); border-radius: var(--r-s);
  background: var(--fondo-hundido);
}
details.plegable {
  background: var(--crema); border: 2px solid var(--borde); border-radius: var(--r); padding: var(--e-3) var(--e-4);
}
details.plegable summary { cursor: pointer; font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; min-height: var(--toque); display: flex; align-items: center; }
details.plegable[open] summary { margin-bottom: var(--e-3); }

/* ---------- escritorio ---------- */
@media (min-width: 60rem) {
  .principal { padding-block: var(--e-12); }
  .principal--juego { padding-bottom: var(--e-12); }
  .barra-inf { position: static; background: transparent; border-top: 0; padding: 0; }
  .barra-inf .envoltorio { width: 100%; }
  .home-2col {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--e-10); align-items: start;
  }
  .juego-2col {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--e-8); align-items: start;
  }
  .foto--pregunta { aspect-ratio: 4 / 3; }
  .liga--tabla .fila { grid-template-columns: 56px 76px 1fr auto auto; }
  .previews { grid-template-columns: 1fr 1fr; align-items: start; }
}