/* ══════════════════════════════════════════════════════════════════════════════
   CDMX Isométrica · hoja de estilos de las páginas de texto   ·   v2

   QUÉ SE CAMBIÓ Y POR QUÉ. La versión anterior ponía TODO el texto en
   monoespaciada, con bordes duros de 2 px y sombras sólidas desplazadas. Esa
   combinación es exactamente la que hace que una página se lea como de 2001:
   la monoespaciada es una tipografía de etiqueta, no de lectura, y a 15 px en
   párrafos largos cansa y se ve a máquina de escribir.

   Lo que se conserva: la paleta, que no es decoración sino la del propio mapa
   —el gris verdoso del suelo entre manzanas, la teja de los techos, el dorado
   de los patrocinados, la tinta de las etiquetas—, y la monoespaciada, que
   sigue siendo la voz del mapa pero ahora solo donde es una etiqueta: la marca,
   los antetítulos, las cifras, los pies y los encabezados de tabla.

   Lo que se agrega: una tipografía de sistema para leer, una escala de tamaños
   con aire, sombras suaves en capas en vez de bloques negros, y el elemento que
   amarra las páginas con el mapa —una retícula isométrica de 30°, la misma
   geometría con la que está dibujada la ciudad, apenas insinuada detrás del
   encabezado. Sin tipografías externas: nada que descargar, nada que parpadee.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --papel:#e6e2d8;        /* fondo de página, un tono arriba del suelo del mapa */
  --papel-alto:#f3f0e8;   /* tarjetas y superficies elevadas */
  --manzana:#b0aca0;      /* el suelo entre calles */
  --tinta:#221e19;        /* las etiquetas del mapa */
  --tinta-suave:#57503f;
  --ink:#f4efe2;          /* texto claro sobre tinta */
  --oro:#f0b03c;          /* patrocinados */
  --teja:#c0432c;         /* los techos */
  --agua:#5f92b5;
  --linea:rgba(34,30,25,.14);

  --mono:'DejaVu Sans Mono','SFMono-Regular',Consolas,'Courier New',monospace;
  --texto:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',
          'Noto Sans',Arial,sans-serif;

  --r:12px;
  --sombra:0 1px 2px rgba(34,30,25,.06), 0 6px 18px rgba(34,30,25,.09);
  --sombra-alta:0 2px 4px rgba(34,30,25,.07), 0 14px 34px rgba(34,30,25,.13);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.68;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}

/* ── barra superior ─────────────────────────────────────────────────────────
   Translúcida y con desenfoque, para que el contenido pase por debajo en vez
   de chocar con una franja opaca.                                           */
.barra{
  position:sticky; top:0; z-index:20;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px;
  padding:13px 26px;
  background:rgba(28,24,19,.90);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid rgba(244,239,226,.10);
  color:var(--ink);
}
.barra a{
  /* v2.1: iban en gris apagado y sin subrayado — no se leían como enlaces.
     Ahora subrayado tenue de base, que se enciende al pasar encima. */
  color:var(--ink); opacity:.88;
  font-size:13px; letter-spacing:.02em;
  text-decoration:underline; text-underline-offset:5px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(244,239,226,.35);
  transition:opacity .18s ease, color .18s ease, text-decoration-color .18s ease;
}
.barra a:hover{opacity:1; color:var(--oro); text-decoration-color:var(--oro);}
.barra .marca,.barra .volver{text-decoration:none;}
.barra .marca{
  font-family:var(--mono); font-weight:700;
  font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  opacity:1; margin-right:auto;
}
.barra .marca span{color:var(--teja);}
.barra .marca:hover{color:var(--ink);}
.barra .volver{
  border:1px solid rgba(240,176,60,.55); border-radius:999px;
  color:var(--oro); opacity:.95;
  padding:6px 15px; font-size:12.5px; letter-spacing:.02em;
}
.barra .volver:hover{background:var(--oro); color:#241d10; opacity:1;}

/* ── encabezado con la retícula isométrica ──────────────────────────────────
   Tres juegos de líneas a 30°, -30° y verticales: la misma proyección con la
   que se dibuja el mapa. Va detrás del título, casi invisible, y se corta con
   una máscara para que no termine en un borde recto.                        */
main{
  max-width:860px;
  margin:0 auto;
  padding:0 24px 96px;
}
h1{
  position:relative;
  font-size:clamp(32px, 5.4vw, 52px);
  line-height:1.06;
  letter-spacing:-.022em;
  font-weight:800;
  margin:0;
  padding:64px 0 22px;
}
h1::before{
  content:''; position:absolute; inset:-10px -40vw 8px;
  z-index:-1; pointer-events:none;
  background-image:
    repeating-linear-gradient( 30deg, var(--linea) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-30deg, var(--linea) 0 1px, transparent 1px 46px);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 92%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 92%);
}
h1::after{
  content:''; display:block;
  width:64px; height:4px; margin-top:24px;
  background:var(--teja); border-radius:2px;
}

.entradilla{
  font-size:clamp(18px, 2.3vw, 21px);
  line-height:1.55;
  color:var(--tinta-suave);
  margin:26px 0 46px;
  max-width:64ch;
}

h2{
  font-size:clamp(23px, 3vw, 29px);
  line-height:1.22;
  letter-spacing:-.014em;
  font-weight:750;
  margin:64px 0 16px;
  padding-top:26px;
  border-top:1px solid var(--linea);
}
h3{
  font-family:var(--mono);
  font-size:13px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--teja);
  margin:38px 0 10px;
}
p{margin:0 0 20px; max-width:70ch;}
a{color:#9a3f25; text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:rgba(154,63,37,.4);}
a:hover{text-decoration-color:currentColor;}
strong{font-weight:700; color:#171310;}

/* ── el dato duro: la pieza que distingue estas páginas ──────────────────── */
.dato{
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-left:4px solid var(--teja);
  border-radius:var(--r);
  box-shadow:var(--sombra);
  padding:24px 26px;
  margin:34px 0;
}
.dato .cifra{
  display:block;
  font-family:var(--mono);
  font-size:clamp(34px, 6vw, 46px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--teja);
  font-variant-numeric:tabular-nums;
}
.dato .pie{
  display:block; margin-top:12px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em;
  color:var(--tinta-suave);
}

/* ── tablas ─────────────────────────────────────────────────────────────── */
table{
  width:100%; border-collapse:separate; border-spacing:0;
  margin:30px 0; font-size:15px;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--r);
  box-shadow:var(--sombra);
  overflow:hidden;
}
th,td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--linea);}
th{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-suave);
  background:rgba(176,172,160,.32);
}
td{font-variant-numeric:tabular-nums;}
tbody tr:last-child td{border-bottom:0;}
tbody tr:hover td{background:rgba(240,176,60,.10);}

ul,ol{margin:0 0 22px; padding-left:24px; max-width:70ch;}
li{margin-bottom:10px;}
li::marker{color:var(--teja);}

blockquote{
  margin:32px 0; padding:20px 24px;
  background:linear-gradient(180deg, rgba(240,176,60,.16), rgba(240,176,60,.07));
  border:1px solid rgba(240,176,60,.42);
  border-radius:var(--r);
  font-size:16.5px; color:#4a3f28;
}
blockquote p:last-child{margin-bottom:0;}

/* ── llamada al mapa ────────────────────────────────────────────────────── */
.ir-mapa{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--tinta); color:var(--ink);
  border:0; border-radius:999px;
  padding:14px 26px;
  font-family:var(--mono); font-size:13px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none;
  box-shadow:var(--sombra);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ir-mapa::after{content:'→'; font-size:15px; transition:transform .18s ease;}
.ir-mapa:hover{
  background:var(--teja); transform:translateY(-2px); box-shadow:var(--sombra-alta);
}
.ir-mapa:hover::after{transform:translateX(4px);}

/* ── hueco de anuncio ───────────────────────────────────────────────────── */
.anuncio{
  margin:52px 0; padding:16px 0; min-height:90px; text-align:center;
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
}
.anuncio small{
  display:block; margin-bottom:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta-suave); opacity:.65;
}

footer{
  margin-top:80px; padding:34px 24px 56px;
  border-top:1px solid var(--linea);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.03em;
  color:var(--tinta-suave); text-align:center;
}
footer a{color:var(--tinta-suave);}

a:focus-visible,.ir-mapa:focus-visible,.barra a:focus-visible{
  outline:2px solid var(--teja); outline-offset:3px; border-radius:4px;
}

@media(max-width:640px){
  body{font-size:16px;}
  .barra{padding:11px 16px; gap:6px 16px;}
  .barra .marca{font-size:12.5px; letter-spacing:.1em;}
  main{padding:0 18px 64px;}
  h1{padding-top:44px;}
  h2{margin-top:48px;}
  .dato{padding:20px;}
  table{font-size:14px;}
  th,td{padding:10px 12px;}
}