/* Escaque «Cómic» — sistema visual nuevo (23/10/2026): página de noche con trama de puntos, viñetas de papel con tinta
   gruesa y sombra dura, cartelas amarillas, bocadillos, botones con relieve de cómic. Títulos en Bangers, texto en
   Nunito, bocadillos en Comic Neue. */
@font-face { font-family: 'Bangers'; font-weight: 400; font-display: swap; src: url(/fuentes/bangers-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bangers'; font-weight: 400; font-display: swap; src: url(/fuentes/bangers-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-weight: 400 900; font-display: swap; src: url(/fuentes/nunito-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-weight: 400 900; font-display: swap; src: url(/fuentes/nunito-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Comic Neue'; font-weight: 700; font-display: swap; src: url(/fuentes/comicneue-latin.woff2) format('woff2'); }

:root {
  --tinta: #15110e;
  --papel: #fff8e8;
  --papel-2: #f3e7cb;
  --noche: #1b2046;
  --noche-2: #262d63;
  --amarillo: #ffd23f;
  --rojo: #ef4136;
  --azul: #2f80ed;
  --cielo: #5b9bd5;
  --cian: #3ed3e0;
  --verde: #4cc26b;
  --magenta: #e8458b;
  --violeta: #4a3f63;
  --f-comic: 'Bangers', Impact, sans-serif;
  --f-cuerpo: 'Nunito', system-ui, sans-serif;
  --f-globo: 'Comic Neue', 'Comic Sans MS', sans-serif;
  --sombra-dura: 5px 5px 0 var(--tinta);
}

.c-titulo { font: 400 clamp(34px, 5vw, 64px)/1 var(--f-comic); letter-spacing: .03em; color: var(--amarillo); -webkit-text-stroke: 2.5px var(--tinta); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--tinta); margin: 0; }
.vineta { background: var(--papel); color: var(--tinta); border: 3px solid var(--tinta); box-shadow: var(--sombra-dura); border-radius: 3px; }
.cartela { display: inline-block; background: var(--amarillo); color: var(--tinta); border: 3px solid var(--tinta); box-shadow: 4px 4px 0 var(--tinta);
  padding: 5px 12px; font: 700 14px/1.2 var(--f-globo); text-transform: uppercase; letter-spacing: .03em; }
.globo { position: relative; background: #fff; color: var(--tinta); border: 3px solid var(--tinta); border-radius: 22px; padding: 10px 14px;
  font: 700 16px/1.3 var(--f-globo); box-shadow: 4px 4px 0 rgba(21, 17, 14, .35); }
.globo::after { content: ''; position: absolute; left: 26px; bottom: -14px; width: 22px; height: 22px; background: #fff;
  border-right: 3px solid var(--tinta); border-bottom: 3px solid var(--tinta); transform: skewX(35deg) rotate(45deg); transform-origin: center; }
.globo.arriba::after { bottom: auto; top: -14px; transform: skewX(35deg) rotate(-135deg); }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none !important;
  font: 400 21px/1 var(--f-comic); letter-spacing: .05em; color: var(--tinta); background: var(--amarillo);
  border: 3px solid var(--tinta); box-shadow: 4px 4px 0 var(--tinta); padding: 9px 16px 8px; border-radius: 4px;
  transition: transform .08s, box-shadow .08s;
}
.boton:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tinta); }
.boton:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
.boton.rojo { background: var(--rojo); color: #fff; }
.boton.azul { background: var(--cielo); color: #fff; }
.boton.verde { background: var(--verde); }
.boton.papel { background: var(--papel); }
.boton.peq { font-size: 16px; padding: 6px 10px 5px; box-shadow: 3px 3px 0 var(--tinta); }
.boton svg { width: 20px; height: 20px; }
.boton[aria-pressed="true"] { background: var(--verde); }
.boton[aria-pressed="false"] { background: #d9cfba; }