/* ═══════════════════════════════════════════════════════════
   BASE
   AFFORDANCES. Regla dura: cursor, hover y active existen
   solamente en <button>. Si algo se puede tocar, es un botón.
   ═══════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--umbra);color:var(--tinta);font-family:var(--sans);font-size:15px;
  line-height:1.5;font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased}

svg.i{width:1em;height:1em;flex:none;vertical-align:-.13em;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
b,strong{font-weight:600}

/* ══ PÁGINA ══
   Dos columnas de verdad: el rail oscuro pegado al borde
   izquierdo y, al lado, la hoja centrada con el contenido y la
   columna de reojo. El rail va a sangre —no entra en el ancho
   máximo— para que se lea como el costado de la pantalla y no
   como un panel flotando. */
.pag{background:var(--tiza);display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  align-items:stretch;min-height:calc(100vh - var(--banda))}
.hoja{max-width:1064px;width:100%;margin:0 auto;padding:26px 24px 92px;display:grid;
  grid-template-columns:minmax(0,1fr) 296px;gap:28px;align-items:start}
/* Sin paneles de reojo, el contenido se queda con todo el ancho.
   Antes había un cuadrado ahí aunque no tuviera nada que decir. */
.hoja[data-aside="0"]{grid-template-columns:minmax(0,1fr);max-width:900px}
.hoja[data-aside="0"] aside{display:none}

/* Un hijo de grilla trae min-width:auto, así que el track se estira
   hasta el mínimo de su contenido y arrastra la página entera con él.
   Sin esto, en el teléfono las cinco pestañas en fila —que tienen su
   propio scroll y no deberían empujar nada— hacían que TODO el juego
   fuera más ancho que la pantalla. Lo que tenga que desbordar,
   desborda adentro de su caja. */
.pag>*,.hoja>*{min-width:0}
@media(max-width:1180px){.hoja{grid-template-columns:minmax(0,1fr) 262px;gap:22px}}
@media(max-width:980px){.hoja{grid-template-columns:1fr;gap:22px}}
@media(max-width:900px){.pag{grid-template-columns:1fr;min-height:0}
  .hoja{padding:20px 14px 92px}}

main h2{font-family:var(--disp);font-size:31px;font-weight:500;color:var(--tinta);
  letter-spacing:.02em;line-height:1.05}
p.baja{font-family:var(--serif);font-size:15.5px;color:var(--tinta2);margin:7px 0 22px;
  max-width:64ch;line-height:1.5}
p.baja.mt{margin-top:18px}
main h3{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tiza5);font-weight:700;margin:32px 0 11px;display:flex;align-items:center;gap:8px;
  padding-bottom:7px;border-bottom:var(--lin)}
main h3 svg.i{width:14px;height:14px;color:var(--pig,var(--tiza4))}
main h3:first-of-type{margin-top:4px}
p.nada{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--tiza5)}

.mal{color:var(--almagre)}
.bien{color:var(--verde)}

/* ══ MAPA ══ */
.mapa{background:var(--umbra2);margin:14px 0 22px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--tiza3)}
canvas{display:block;width:100%;height:auto}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}