/* Abre tu sobre · dirección B "Pegatina" (docs/guia-estilo.md) */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --ink: #121212;
  --paper: #FFFFFF;
  --ground: #D9CCFF;
  --ground-deep: #BFAEF5;
  --track: #F1ECFF;
  --grid-line: rgba(18, 18, 18, .10);

  --tomato: #FF5A36;
  --sun: #FFD23F;
  --mint: #2ED8A3;
  --cobalt: #3D5AFE;
  --pink: #FF8AD8;

  --c-ser: var(--sun);
  --c-fam: var(--pink);
  --c-dep: var(--mint);
  --c-dib: var(--tomato);
  --c-pin: var(--mint); /* evento pingu: su única colección (el cobalto es del raro y del secreto) */
  --c-secreto: var(--cobalt);

  --border-s: 3px;
  --border-l: 4px;
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 20px;
  --r-xl: 26px;
  --r-pill: 999px;
  --shadow-s: 3px 3px 0 var(--ink);
  --shadow-m: 5px 5px 0 var(--ink);
  --shadow-l: 7px 7px 0 var(--ink);
  --diecut: 0 0 0 6px var(--paper), 8px 8px 0 6px var(--ink);
  --diecut-s: 0 0 0 4px var(--paper);

  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 450ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  --gutter: 22px;
  --font: "Bricolage Grotesque", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
}

@media (max-width: 359px) { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

.bg-grid {
  background-color: var(--ground);
  background-image:
    linear-gradient(var(--grid-line) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--grid-line) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}

h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
}
[tabindex="-1"]:focus { outline: none; }

/* ---------- Maquetación ---------- */

.columna {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Que nada (el abanico, la pregunta que llega desde la derecha) ensanche la página en móviles
     estrechos: el navegador la alejaba y el botón principal quedaba bajo el pliegue */
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

main { flex: 1; min-width: 0; padding: 24px 0 32px; }
main.cargando { visibility: hidden; }

.pantalla {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pantalla.entra { animation: entra var(--t-slow) var(--ease-out) both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Tipografía ---------- */

/* El H1 de la portada: antetítulo pequeño para buscadores y el titular de siempre */
.portada-h1 { font-size: inherit; font-weight: inherit; }
.antetitulo {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
.titular-portada {
  display: block;
  font-size: clamp(64px, 21vw, 84px);
  line-height: .9;
  font-weight: 800;
  letter-spacing: -.04em;
}
.titular-portada .destacado {
  display: inline-block;
  margin-top: 10px;
  padding: 0 10px 4px;
  background: var(--sun);
  border: var(--border-l) solid var(--ink);
  border-radius: var(--r-m);
  box-shadow: var(--diecut);
  transform: rotate(-3deg);
}
.titular {
  overflow-wrap: anywhere;
  font-size: clamp(40px, 13vw, 60px);
  line-height: .92;
  font-weight: 800;
  letter-spacing: -.03em;
}
.titular-dialogo {
  font-size: 34px;
  line-height: .92;
  font-weight: 800;
  letter-spacing: -.03em;
}
.lema { font-size: 20px; line-height: 1.25; font-weight: 800; }
.texto { font-size: 17px; line-height: 1.4; }
.nota { font-size: 15px; font-weight: 700; line-height: 1.35; }
.letra-pequena { font-size: 13px; line-height: 1.4; }

/* ---------- Botones ---------- */

.btn-principal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 62px;
  padding: 12px 20px;
  background: var(--tomato);
  color: var(--ink);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  border: var(--border-l) solid var(--ink);
  border-radius: var(--r-l);
  box-shadow: 6px 6px 0 var(--ink);
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-pop), box-shadow var(--t-base) var(--ease-pop);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn-principal:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 var(--ink);
  transition-duration: var(--t-fast);
}
.btn-principal:disabled {
  background: var(--track);
  color: rgba(18, 18, 18, .5);
  box-shadow: none;
  cursor: default;
}

.btn-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-pop), box-shadow var(--t-base) var(--ease-pop);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn-secundario:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
  transition-duration: var(--t-fast);
}

.btn-icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--paper);
  border: var(--border-s) solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-s);
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-pop), box-shadow var(--t-base) var(--ease-pop), opacity var(--t-base);
}
.btn-icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.btn-icono:active { transform: translate(3px, 3px); box-shadow: none; }
.btn-icono:disabled { opacity: 0; pointer-events: none; }

.enlace {
  align-self: flex-start;
  padding: 4px 0;
  background: none;
  border: 0;
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  color: inherit;
  cursor: pointer;
}

.enlace--centro { align-self: center; min-height: 44px; }

/* Secundario grande: "Retar a alguien", a ancho completo */
.btn-grande {
  width: 100%;
  min-height: 56px;
  border-width: var(--border-l);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-m);
  font-size: 19px;
  font-weight: 800;
}

/* ---------- Píldoras y pegatinas ---------- */

.pildora, .pegatina {
  display: inline-block;
  width: max-content;
  padding: 5px 11px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--paper);
}
.pegatina { box-shadow: var(--diecut-s); }
.pildora--pink, .pegatina--pink { background: var(--pink); }
.pegatina--sun { background: var(--sun); }
.pegatina--mint { background: var(--mint); }
.pildora--cobalt { background: var(--cobalt); color: #fff; }
.pildora--ink { background: var(--ink); color: var(--sun); }
.rot-5 { transform: rotate(5deg); }
.rot-n6 { transform: rotate(-6deg); }

/* ---------- Portada ---------- */

.portada { padding-top: 8px; }
.portada > .pegatina { align-self: flex-start; font-size: 15px; }
/* us. y nz., pasado el día de la elección (scripts/excel_a_json.py, fin_eleccion): fuera la fecha */
.tras-eleccion [data-t="portada.pegatina"] { display: none; }

.abanico {
  position: relative;
  height: 162px;
  margin: 6px 0 0;
}
/* Por debajo de 390 px el abanico no cabe entero: se encoge un poco */
@media (max-width: 389px) {
  .abanico { height: 146px; transform: scale(.9); transform-origin: 50% 0; }
}
.abanico .mini-cromo {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 92px;
  margin-left: -46px;
  transform-origin: 50% 120%;
}
.abanico .mini-cromo:nth-child(1) { transform: translateX(-124px) rotate(-12deg); }
.abanico .mini-cromo:nth-child(2) { transform: translateX(-41px) rotate(-4deg) translateY(-6px); }
.abanico .mini-cromo:nth-child(3) { transform: translateX(41px) rotate(4deg) translateY(-6px); }
.abanico .mini-cromo:nth-child(4) { transform: translateX(124px) rotate(12deg); }
/* Sobres de 2 cromos (evento pingu) */
.abanico[data-cromos="2"] .mini-cromo:nth-child(1) { transform: translateX(-52px) rotate(-7deg); }
.abanico[data-cromos="2"] .mini-cromo:nth-child(2) { transform: translateX(52px) rotate(7deg) translateY(-6px); }
.abanico .mini-cromo span { font-size: 12px; padding: 6px 2px 7px; }

.mini-cromo {
  display: block;
  background: var(--paper);
  border: var(--border-s) solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 0 0 4px var(--paper), 5px 5px 0 4px var(--ink);
  overflow: hidden;
}
.mini-cromo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-bottom: var(--border-s) solid var(--ink); }
.mini-cromo span {
  display: block;
  padding: 6px 6px 7px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.cta-fila { position: relative; }
.pegatina--cta { position: absolute; right: -6px; top: -18px; pointer-events: none; }
/* Crédito discreto bajo el botón: letra pequeña, pero 44 px de alto para tocarlo bien */
.credito-portada {
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0 -8px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.aviso-reto {
  padding: 12px 14px;
  background: var(--paper);
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-m);
  font-weight: 700;
  font-size: 15px;
}

/* ---------- Preguntas ---------- */

.preg-cabecera { display: flex; align-items: center; gap: 12px; }
.progreso {
  position: relative;
  flex: 1;
  height: 22px;
  background: var(--paper);
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progreso-relleno {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--mint);
  border-right: 3px solid var(--ink);
  transform-origin: left center;
  transform: scaleX(.05);
  transition: transform var(--t-slow) var(--ease-out);
}
.contador { flex: none; min-width: 58px; text-align: center; }
.frase-progreso { font-size: 15px; font-weight: 700; min-height: 21px; }

.preg-escena { display: flex; flex-direction: column; gap: 18px; }
.preg-escena.sale { animation: sale var(--t-base) var(--ease-out) both; }
.preg-escena.llega { animation: llega var(--t-slow) var(--ease-pop) both; }
.preg-escena.llega-atras { animation: llega-atras var(--t-slow) var(--ease-pop) both; }
@keyframes sale { to { opacity: 0; transform: translateX(-40px); } }
@keyframes llega { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes llega-atras { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }

.tarjeta-pregunta {
  position: relative;
  margin-top: 10px;
  padding: 26px 20px 22px;
  background: var(--paper);
  border: var(--border-l) solid var(--ink);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-l);
}
.situacion { position: absolute; top: -16px; left: 14px; transform: rotate(-4deg); }
.pregunta {
  font-size: clamp(26px, 8vw, 32px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.02em;
}

.respuestas { display: flex; flex-direction: column; gap: 12px; }
.respuesta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 10px 14px 10px 10px;
  background: var(--paper);
  border: var(--border-s) solid var(--ink);
  border-radius: 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-pop), box-shadow var(--t-base) var(--ease-pop), background-color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.respuesta .letra {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-s);
  font-weight: 800;
  font-size: 18px;
}
.respuesta:nth-child(1) .letra { background: var(--tomato); }
.respuesta:nth-child(2) .letra { background: var(--sun); }
.respuesta:nth-child(3) .letra { background: var(--mint); }
.respuesta:nth-child(4) .letra { background: var(--cobalt); color: #fff; }
.respuesta .letra svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.respuesta[aria-pressed="true"] {
  background: var(--sun);
  font-weight: 800;
  box-shadow: var(--shadow-m);
  transform: translate(-3px, -3px) rotate(-1deg);
}
.respuesta[aria-pressed="true"] .letra { background: var(--paper); color: var(--ink); }
.puntos-creador { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; opacity: .7; }

/* ---------- Transición ---------- */

.carga { align-items: center; justify-content: center; min-height: 60vh; text-align: center; }
.carga-sobre {
  width: 120px;
  height: 86px;
  background: var(--paper);
  border: var(--border-l) solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-m);
  animation: bota 600ms var(--ease-out) infinite alternate;
}
@keyframes bota { to { transform: translateY(-14px) rotate(-4deg); } }
.titular-carga { font-size: 28px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.carga-credito { margin-top: -8px; font-size: 13px; font-weight: 500; }

/* ---------- Sobre ---------- */

.sobre-pantalla { align-items: center; text-align: center; }
.sobre-pantalla .titular { align-self: stretch; }
.pegatina-holo { margin-top: -6px; }

.sobre {
  position: relative;
  width: min(318px, 100%);
  aspect-ratio: 318 / 228;
  margin: 44px 0 20px;
  perspective: 900px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.sobre-cuerpo, .sobre-frente {
  position: absolute;
  inset: 0;
  border: var(--border-l) solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
}
.sobre-cuerpo { box-shadow: var(--diecut); }
.sobre-frente {
  /* bolsillo delantero: tapa los cromos y deja ver solo la parte de arriba al abrir */
  top: 34%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background:
    linear-gradient(to top right, transparent calc(50% - 2px), var(--ink) calc(50% - 2px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px)) left bottom / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 2px), var(--ink) calc(50% - 2px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px)) right bottom / 50% 100% no-repeat,
    var(--paper);
  z-index: 2;
}
.sobre-cromos {
  position: absolute;
  inset: 8% 10% 10%;
  z-index: 1;
}
.sobre-cromos i {
  position: absolute;
  bottom: 0;
  width: 26%;
  aspect-ratio: 2 / 3;
  border: var(--border-s) solid var(--ink);
  border-radius: 10px;
  transform: translateY(20%);
  transition: transform var(--t-slow) var(--ease-pop);
}
.sobre-cromos i:nth-child(1) { left: 2%; background: var(--c-ser); }
.sobre-cromos i:nth-child(2) { left: 26%; background: var(--c-fam); }
.sobre-cromos i:nth-child(3) { left: 50%; background: var(--c-dep); }
.sobre-cromos i:nth-child(4) { left: 74%; background: var(--c-dib); }
.sobre[data-cromos="2"] .sobre-cromos i:nth-child(n+3) { display: none; }
.sobre[data-cromos="2"] .sobre-cromos i:nth-child(1) { left: 20%; }
.sobre[data-cromos="2"] .sobre-cromos i:nth-child(2) { left: 54%; }
.sobre-solapa {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 57%;
  z-index: 3;
  transform-origin: 50% 0;
  transition: transform var(--t-slow) var(--ease-out);
}
.sobre-solapa svg { width: 100%; height: 100%; overflow: visible; }
.sobre-solapa path { fill: var(--pink); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sobre-cierre {
  position: absolute;
  left: 50%;
  top: 57%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: -58px 0 0 -48px;
  padding: 10px;
  background: var(--sun);
  border: var(--border-l) solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--diecut-s), 5px 5px 0 4px var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}
.sobre-cierre::after {
  /* la esquina un poco despegada */
  content: "";
  position: absolute;
  top: 4px;
  right: 6px;
  width: 20px;
  height: 20px;
  background: #FFF3C2;
  border-left: var(--border-s) solid var(--ink);
  border-bottom: var(--border-s) solid var(--ink);
  border-radius: 0 50% 0 10px;
}
.oscila { animation: oscila 1.4s ease-in-out infinite; }
@keyframes oscila {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
.oscila-mas { animation: oscila-mas .9s ease-in-out infinite; }
@keyframes oscila-mas {
  0%, 100% { transform: rotate(-10deg) scale(1); }
  50% { transform: rotate(10deg) scale(1.06); }
}
.recordatorio { margin-top: -6px; }
.recordatorio:empty { display: none; }
.recordatorio:not(:empty) { animation: entra var(--t-slow) var(--ease-pop) both; }
.sobre.abierto .sobre-solapa { transform: rotateX(-180deg); }
.sobre.abierto .sobre-cierre { animation: vuela 600ms var(--ease-out) forwards; }
.sobre.abierto .sobre-cromos i { transform: translateY(-58%); }
.sobre.abierto .sobre-cromos i:nth-child(2) { transition-delay: 60ms; }
.sobre.abierto .sobre-cromos i:nth-child(3) { transition-delay: 120ms; }
.sobre.abierto .sobre-cromos i:nth-child(4) { transition-delay: 180ms; }
@keyframes vuela {
  to { transform: translate(140px, -220px) rotate(220deg) scale(.6); opacity: 0; }
}

.sobre--mini { width: min(240px, 80%); margin: 50px auto 18px; pointer-events: none; }
/* Algo más grande y con el texto un poco más abajo, para que "despega aquí" no toque la esquina */
.sobre--mini .sobre-cierre { width: 82px; height: 82px; margin: -48px 0 0 -41px; padding: 14px 10px 8px; font-size: 12px; }

/* ---------- Resultado: carrusel ---------- */

.aviso-rareza {
  align-self: flex-start;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--sun);
  border-radius: var(--r-m);
  font-weight: 800;
  font-size: 15px;
  transform: rotate(-2deg);
  animation: entra var(--t-slow) var(--ease-pop) both;
}

.carrusel {
  display: flex;
  gap: 22px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 26px var(--gutter) 28px;
  margin-top: -8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: none;
}
.carrusel::-webkit-scrollbar { display: none; }

.paginacion { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: -10px; }
.puntos { display: flex; gap: 8px; align-items: center; }
.punto {
  width: 12px;
  height: 12px;
  padding: 0;
  background: var(--paper);
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: width var(--t-base) var(--ease-pop), background-color var(--t-base);
}
.punto[aria-current="true"] { width: 26px; background: var(--ink); }
/* La tarjeta final no es un cromo: su punto es un rombo */
.punto--final { width: 11px; height: 11px; margin-left: 4px; border-radius: 2px; transform: rotate(45deg); }
.punto--final[aria-current="true"] { width: 11px; background: var(--ink); }
/* área táctil de 44 px sin agrandar el punto */
.punto { position: relative; }
.punto::before { content: ""; position: absolute; inset: -16px -6px; }

/* ---------- Cromo ---------- */

.cromo {
  --c: var(--paper);
  flex: none;
  position: relative;
  width: min(302px, calc(100vw - 2 * var(--gutter) - 34px));
  aspect-ratio: 302 / 460;
  padding: 0;
  background: none;
  border: 0;
  scroll-snap-align: center;
  perspective: 1200px;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.cromo[data-cat="ser"] { --c: var(--c-ser); }
.cromo[data-cat="fam"] { --c: var(--c-fam); }
.cromo[data-cat="dep"] { --c: var(--c-dep); }
.cromo[data-cat="dib"] { --c: var(--c-dib); }
.cromo[data-cat="pin"] { --c: var(--c-pin); }
.cromo:focus-visible { outline-offset: 10px; border-radius: var(--r-xl); }

.cromo.sale { animation: cromo-sale var(--t-slow) var(--ease-pop) both; }
@keyframes cromo-sale {
  from { opacity: 0; transform: translateY(120px) rotate(var(--giro, 0deg)) scale(.7); }
  to { opacity: 1; transform: none; }
}

/* Dentro de un <button> todo es <span>: se les da su display */
.cromo-caja, .cromo-arte, .cromo-nombre, .cromo-serie, .cromo-rareza, .eje, .eje-carril, .dorso-nombre, .bocadillo, .vibra { display: block; }
.eje-carril i { display: block; }

.cromo-caja {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease-out);
}
.cromo.girado .cromo-caja { transform: rotateY(180deg); }
.cromo.girando .cromo-caja { animation: rebote 500ms var(--ease-out); }
@keyframes rebote {
  50% { scale: 1.04; }
}

/* Pista para girar: pegatina sobre el primer cromo y un amago de giro, hasta el primer giro */
.pista-girar {
  position: absolute;
  top: -20px;
  right: -6px;
  z-index: 4;
  font-size: 14px;
  white-space: nowrap;
  pointer-events: none;
  transform: rotate(-6deg);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.pista-girar.fuera { opacity: 0; transform: rotate(-6deg) scale(.6); }
.cromo-caja.amago { animation: amago 900ms var(--ease-pop); }
@keyframes amago {
  45% { transform: rotateY(25deg); }
}

.cara, .dorso {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border: var(--border-l) solid var(--ink);
  border-radius: var(--r-xl);
  box-shadow: var(--diecut);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cara { background: var(--paper); }
.dorso { background: var(--c); transform: rotateY(180deg); padding: 18px 16px 16px; gap: 14px; }

.cromo-arte {
  position: relative;
  flex: none;
  height: 41%;
  background-color: var(--c);
  background-image:
    radial-gradient(circle, var(--paper) 2.6px, transparent 3px),
    radial-gradient(circle, var(--ink) 1.6px, transparent 2px);
  background-size: 34px 34px, 26px 26px;
  background-position: 4px 6px, 17px 19px;
  border-bottom: var(--border-l) solid var(--ink);
  overflow: hidden;
}
.cromo-arte img {
  position: absolute;
  left: 50%;
  bottom: -2px;
  height: 104%;
  width: auto;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
}
.cromo-arte .pildora { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 13px; }
.cromo-arte .marca { position: absolute; top: 12px; right: 12px; left: auto; z-index: 1; font-size: 13px; }

.cromo-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 12px 16px 16px; }
.cromo-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 74px; }
.cromo-nombre { font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cromo-nombre.largo { font-size: 23px; }
.cromo-serie { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0; }
.cromo-rareza { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0; }

.sello {
  flex: none;
  display: grid;
  place-content: center;
  width: 74px;
  height: 74px;
  margin: -34px -4px 0 0;
  background: var(--tomato);
  border: var(--border-l) solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--diecut-s), 4px 4px 0 4px var(--ink);
  text-align: center;
  transform: rotate(-8deg);
  position: relative;
  z-index: 2;
}
.sello b { font-size: 24px; line-height: 1; font-weight: 800; }
.sello span { font-size: 11px; font-weight: 800; line-height: 1; }

.ejes { display: flex; flex-direction: column; gap: 8px; }
.eje-carril {
  position: relative;
  height: 12px;
  background: var(--track);
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-pill);
  margin: 0 10px;
}
.eje-carril i {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background: var(--c);
  border: var(--border-s) solid var(--ink);
  border-radius: 50%;
}
.eje-etiquetas { display: flex; justify-content: space-between; margin-top: 3px; font-size: 12px; font-weight: 700; line-height: 1.1; }

/* Dorso */
.dorso .pildora { align-self: flex-start; font-size: 13px; }
.dorso-nombre { font-size: 22px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.bocadillo {
  padding: 12px 14px;
  background: var(--paper);
  border: var(--border-s) solid var(--ink);
  border-radius: 18px 18px 18px 4px;
  box-shadow: var(--shadow-s);
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
}
.vibra { font-size: 15px; line-height: 1.35; }
.cita { display: block; font-size: 14px; line-height: 1.3; font-style: italic; }
.cita small { display: block; font-style: normal; font-size: 12px; margin-top: 2px; }
.stat {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  background: var(--paper);
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--diecut-s);
  font-weight: 800;
  font-size: 15px;
  transform: rotate(-3deg);
}
.stat b { font-size: 22px; line-height: 1; }

/* Rarezas */
.cromo.raro .cara { box-shadow: 0 0 0 6px var(--cobalt), 0 0 0 10px var(--ink), 8px 8px 0 10px var(--ink); }
.cromo.raro .cromo-arte {
  background-image:
    radial-gradient(circle, var(--paper) 2.2px, transparent 2.6px),
    radial-gradient(circle, var(--sun) 2px, transparent 2.4px),
    radial-gradient(circle, var(--paper) 1.2px, transparent 1.6px),
    radial-gradient(circle, var(--ink) 1.4px, transparent 1.8px);
  background-size: 18px 18px, 14px 14px, 9px 9px, 26px 26px;
  background-position: 2px 3px, 9px 10px, 5px 1px, 17px 19px;
}

.holo {
  --mx: 50%;
  --my: 50%;
  background-image:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .75), transparent 45%),
    repeating-linear-gradient(120deg, transparent 0 12px, rgba(255, 255, 255, .55) 12px 15px),
    conic-gradient(from 210deg at var(--mx) var(--my), var(--pink), var(--sun), var(--mint), var(--cobalt), var(--pink));
  background-blend-mode: overlay, normal, normal;
}
.cromo.legendario .cara { padding: 12px; }
.cromo.legendario .cara-interior {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(255, 255, 255, .9);
  border: var(--border-s) solid var(--ink);
  border-radius: 16px;
  overflow: hidden;
}
.cromo:not(.legendario) .cara-interior { display: contents; }
.cromo.legendario .cromo-arte.holo { background-color: transparent; }
.cromo.legendario .sello { margin-top: -30px; }
.cromo.legendario .cromo-info { padding: 10px 12px 12px; }
.cromo.legendario .cromo-nombre { font-size: 25px; }
.cromo.legendario .cromo-nombre.largo { font-size: 21px; }
.cromo.legendario .holo.barrido { animation: barrido 3s ease-in-out infinite alternate; }
@keyframes barrido {
  from { --mx: 15%; --my: 20%; }
  to { --mx: 85%; --my: 80%; }
}
@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

.estrellas { position: absolute; inset: -18px; pointer-events: none; z-index: 3; }
.estrellas svg {
  position: absolute;
  width: 34px;
  height: 34px;
  fill: var(--sun);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
  animation: estrella 1.4s var(--ease-pop) both;
}
.estrellas svg:nth-child(1) { top: 0; left: 4px; }
.estrellas svg:nth-child(2) { top: 30%; right: -4px; animation-delay: 150ms; }
.estrellas svg:nth-child(3) { bottom: 8%; left: -2px; animation-delay: 300ms; }
@keyframes estrella {
  0% { transform: scale(0) rotate(-30deg); opacity: 1; }
  35% { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
.destello {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--paper);
  pointer-events: none;
  animation: destello 500ms ease-out forwards;
}
@keyframes destello { from { opacity: .85; } to { opacity: 0; } }

/* ---------- Tarjeta final (después del último cromo) ---------- */

.tarjeta-final {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: min(302px, calc(100vw - 2 * var(--gutter) - 34px));
  aspect-ratio: 302 / 460;
  padding: 22px 18px;
  background: var(--paper);
  border: var(--border-l) solid var(--ink);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-l);
  scroll-snap-align: center;
}
.tarjeta-final.sale { animation: cromo-sale var(--t-slow) var(--ease-pop) both; }
.final-titulo { font-size: 30px; line-height: .98; font-weight: 800; letter-spacing: -.02em; }
.final-texto { font-size: 16px; font-weight: 700; line-height: 1.35; }
.tarjeta-final img { width: 150px; height: auto; }
.tarjeta-final .btn-principal { min-height: 56px; font-size: 20px; text-decoration: none; }
.tarjeta-final .enlace { align-self: center; min-height: 44px; }

/* ---------- Compartir ---------- */

.compartir { display: flex; flex-wrap: wrap; gap: 10px; }
.compartir > * { flex: 1 1 120px; }
/* Bloque de compartir del resultado: 2 × 2 (sin "Más opciones", el tercero a lo ancho) */
.compartir--sobre { display: grid; grid-template-columns: 1fr 1fr; }
.compartir--sobre > :nth-child(3):has(+ [hidden]) { grid-column: 1 / -1; }
.aviso-copiado { min-height: 0; font-size: 15px; font-weight: 800; text-align: center; }

/* Compartir el test desde la portada (tutoría, 23 oct): el mismo bloque que al final, más discreto */
.compartir-portada-btn { align-self: center; }

/* Botón de idioma (EN / ES), solo en los eventos con dos idiomas. Va en el flujo, arriba a la
   derecha, para no tapar el contador de las preguntas. */
.btn-idioma {
  align-self: flex-end;
  margin-top: 12px;
  margin-bottom: -12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 44px;
  padding: 6px 12px;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-s);
}
.btn-idioma[hidden] { display: none; }
.btn-idioma:active { transform: translate(3px, 3px); box-shadow: none; }
.aviso-copiado:empty { display: none; }
.retar { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

/* ---------- Tarjeta @hbtdata ---------- */

.tarjeta-hbtdata {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding: 18px;
  background: var(--paper);
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-m);
}
.tarjeta-hbtdata img { width: 140px; height: auto; }
.tarjeta-hbtdata p { font-size: 16px; font-weight: 700; line-height: 1.35; }
.tarjeta-hbtdata .btn-secundario { align-self: flex-start; }

/* ---------- Compatibilidad ---------- */

.compat { align-items: center; text-align: center; }
.compat-titulo { font-size: clamp(30px, 9vw, 38px); line-height: .95; font-weight: 800; letter-spacing: -.03em; overflow-wrap: anywhere; }
.sello-grande {
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  margin: 10px 0 6px;
  background: var(--tomato);
  border: var(--border-l) solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--diecut);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-6deg);
  animation: sello 600ms var(--ease-pop) both;
}
@keyframes sello { from { transform: rotate(-30deg) scale(.3); opacity: 0; } }
.compat-frase { font-weight: 700; }
.filas-mini { align-self: stretch; display: flex; flex-direction: column; gap: 10px; text-align: left; margin-bottom: 8px; }
.etiqueta-fila { font-size: 15px; font-weight: 800; margin-top: 6px; }
.fila-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.fila-mini[data-cromos="2"] { grid-template-columns: repeat(2, minmax(0, 132px)); justify-content: center; gap: 18px; }
.fila-mini li { position: relative; display: grid; }
.fila-mini .mini-cromo { height: 100%; }
.fila-mini .mini-cromo { box-shadow: var(--shadow-s); border-radius: var(--r-s); }
/* Se corta solo entre palabras; si una no cabe, app.js baja la letra de esa miniatura */
.fila-mini .mini-cromo span { font-size: 11px; padding: 5px 2px 6px; overflow-wrap: normal; hyphens: manual; transition-property: none; }
.igual {
  position: absolute;
  top: -10px;
  right: -8px;
  z-index: 1;
  padding: 3px 7px;
  font-size: 11px;
  transform: rotate(8deg);
}
.compat .btn-secundario { width: 100%; }

/* ---------- Página /como-funciona/ ---------- */

.pagina-como { display: flex; flex-direction: column; gap: 18px; }
.volver-portada {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 14px 6px 8px;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-s);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}
.volver-portada svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.entradilla { font-size: 19px; line-height: 1.35; font-weight: 700; }
/* Miga de pan de las fichas de personajes de pingu (scripts/fichas_evento.py) */
.miga { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; font-weight: 700; }
.miga a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.miga [aria-current] { font-weight: 800; }

.bloque {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px;
  background: var(--paper);
  border: var(--border-l) solid var(--ink);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-l);
}
.titular-bloque { font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.bloque p { font-size: 17px; line-height: 1.4; }
.bloque img { width: 150px; height: auto; }
.bloque-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.bloque-botones > * { flex: 1 1 180px; }

/* Medidores como los del cromo; la bolita se pasea por el carril */
.medidor { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.medidor .eje-carril { margin: 0 10px; }
.eje-viaje {
  position: absolute;
  inset: 0;
  display: block;
  animation: viaje 4s ease-in-out infinite alternate;
}
.medidor:nth-child(3) .eje-viaje { animation-duration: 3.2s; animation-delay: -1s; }
.medidor:nth-child(4) .eje-viaje { animation-duration: 4.6s; animation-delay: -2.4s; }
.eje-viaje i { left: 50%; }
@keyframes viaje {
  from { transform: translateX(-38%); }
  to { transform: translateX(38%); }
}
.medidor p { font-size: 16px; }

.rarezas { display: flex; flex-wrap: wrap; gap: 8px; }

.cta-final { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.cta-final .titular-bloque { font-size: 32px; }
.cta-final .btn-principal { text-decoration: none; }

/* ---------- Álbum, fichas de cromo y temas (generados por scripts/paginas.py) ---------- */

.album-coleccion { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.album-coleccion .titular-bloque { display: flex; align-items: center; gap: 10px; }
.album-coleccion .titular-bloque .pildora { font-size: 14px; }
.album-fila {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 12px;
  margin: 0;
  padding: 4px 4px 8px 0;
  list-style: none;
}
.album-fila li { display: grid; }
.album-fila .mini-cromo { height: 100%; color: var(--ink); text-decoration: none; }
.album-fila .mini-cromo span { font-size: 13px; padding: 6px 3px 7px; overflow-wrap: normal; hyphens: manual; }
a.mini-cromo { transition: transform var(--t-base) var(--ease-pop), box-shadow var(--t-base) var(--ease-pop); }
a.mini-cromo:active { transform: translate(3px, 3px); box-shadow: 0 0 0 4px var(--paper), 2px 2px 0 4px var(--ink); }
@media (max-width: 359px) { .album-fila .mini-cromo span { font-size: 11px; } }

.cromo--ficha { align-self: center; margin: 10px 0 6px; cursor: default; }
.ficha-nota { text-align: center; font-weight: 500; font-size: 14px; margin-top: 4px; }
.cita-ficha { margin: 0; padding-left: 14px; border-left: var(--border-s) solid var(--ink); }
.cita-ficha p { font-style: italic; }
.cita-ficha footer { margin-top: 4px; font-size: 13px; }

.pagina-tema .titular--tema { font-size: clamp(34px, 10vw, 48px); }
.tema-pregunta { font-size: 22px; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; }
.tema-respuestas { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tema-respuestas li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border: var(--border-s) solid var(--ink);
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.tema-respuestas .letra {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-s);
  font-weight: 800;
}
.tema-respuestas li:nth-child(1) .letra { background: var(--tomato); }
.tema-respuestas li:nth-child(2) .letra { background: var(--sun); }
.tema-respuestas li:nth-child(3) .letra { background: var(--mint); }
.tema-respuestas li:nth-child(4) .letra { background: var(--cobalt); color: #fff; }
.posturas { display: flex; flex-direction: column; gap: 12px; }
.postura {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--track);
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-m);
}
.tema-dato { font-size: 22px; line-height: 1.15; font-weight: 800; }
.tema-fuentes { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 20px; font-size: 15px; }
.bloque a:not([class]) { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.tema-lista { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.tema-enlace {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  border: var(--border-l) solid var(--ink);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-m);
}
.tema-enlace b { font-size: 22px; line-height: 1.05; font-weight: 800; }
.tema-enlace span { font-size: 15px; }

/* ---------- Pie ---------- */

.pie {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 0 calc(24px + env(safe-area-inset-bottom));
  border-top: var(--border-s) solid var(--ink);
  font-size: 13px;
  line-height: 1.4;
}
.pie-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pie .enlace { font-size: 13px; }
/* Cómo funciona y el álbum, juntos a la izquierda de "hecho por" */
.pie-internos { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; }
.pie-hecho { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.pie-hecho a { display: inline-flex; padding: 6px 0; }
.pie-hecho img { height: 20px; width: auto; }
/* Instagram, LinkedIn y portfolio, juntos en su fila */
.pie-enlaces { justify-content: flex-start; gap: 8px; font-weight: 700; }
/* Instagram en su propia línea: más visible y la fila no se parte por un · */
.pie-ig { display: inline-flex; align-items: center; gap: 5px; flex-basis: 100%; }
.pie-ig svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.pie-ig svg .relleno { fill: currentColor; stroke: none; }
.pie-enlace {
  padding: 6px 0;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---------- Diálogos ---------- */

.dialogo {
  width: min(400px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 40px);
  padding: 24px 20px 20px;
  color: var(--ink);
  background: var(--paper);
  border: var(--border-l) solid var(--ink);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-l);
}
.dialogo[open] { display: flex; flex-direction: column; gap: 14px; animation: entra var(--t-slow) var(--ease-pop) both; }
.dialogo::backdrop { background: rgba(18, 18, 18, .55); }
.dialogo p { font-size: 16px; }
.dialogo form { margin: 0; }
.dialogo-cerrar { align-self: flex-end; margin: -8px -6px -10px 0 !important; }
.campo-etiqueta { font-size: 15px; font-weight: 800; }
.campo {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  background: var(--track);
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-m);
  font-size: 17px;
  font-weight: 700;
}
.campo::placeholder { color: rgba(18, 18, 18, .55); }
.reto-listo { display: flex; flex-direction: column; gap: 12px; }
.dialogo-story { align-items: center; text-align: center; }
.story-img {
  width: auto;
  height: min(58dvh, 520px);
  aspect-ratio: 1080 / 1920;
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-m);
  -webkit-touch-callout: default; /* pulsación larga para guardar en iPhone */
  user-select: auto;
}

/* ---------- Modo creador (sobrio) ---------- */

.creador {
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 20px;
  background: var(--paper);
  border: var(--border-s) solid var(--ink);
  border-radius: var(--r-m);
  font-size: 14px;
}
.creador h2 { font-size: 22px; margin-bottom: 8px; }
.creador p { margin: 6px 0; }
.creador button { padding: 8px 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--sun); font-weight: 800; cursor: pointer; }
.creador-pos { font-weight: 800; font-variant-numeric: tabular-nums; }
.sim { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 12px; }
.sim h3 { font-size: 15px; margin: 0 0 6px; }
.sim-fila { display: flex; justify-content: space-between; gap: 8px; padding: 2px 6px; border-radius: 6px; }
.sim-fila.cero { background: #FFD6D6; color: #8A0000; font-weight: 800; }
.sim-fila.mucho { background: #D6E0FF; color: #0A2A9A; font-weight: 800; }
#sim-rarezas { font-weight: 800; margin-top: 8px; }

/* ---------- Móviles pequeños (iPhone SE 375×667, Android 360×640) ---------- */

/* Pantallas bajas: que "Quiero mi sobre" y las 4 respuestas quepan sin scroll */
@media (max-height: 700px) {
  main { padding-top: 16px; }
  .pantalla, .preg-escena { gap: 14px; }
  .titular-portada { font-size: clamp(54px, 16vw, 64px); }
  .titular-portada .destacado { margin-top: 6px; }
  .lema { font-size: 18px; }
  .abanico { height: 128px; transform: scale(.8); transform-origin: 50% 0; }
  .portada .texto { font-size: 16px; line-height: 1.35; }
  .tarjeta-pregunta { padding: 22px 18px 16px; }
  .pregunta { font-size: clamp(22px, 6.6vw, 26px); }
  .respuestas { gap: 9px; }
  .respuesta { min-height: 54px; padding-top: 7px; padding-bottom: 7px; font-size: 15px; line-height: 1.25; }
  .respuesta .letra { width: 36px; height: 36px; }
}

/* Pantallas estrechas: el dorso más largo tiene que caber en el cromo */
@media (max-width: 374px) {
  .dorso { padding: 14px 14px 14px; gap: 10px; }
  .dorso-nombre { font-size: 20px; }
  .bocadillo { padding: 10px 12px; font-size: 16px; }
  .vibra { font-size: 14px; line-height: 1.3; }
  .cita { font-size: 13px; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}