/* ============================================================================
   CONSUME LOCAL · Corredor Norte del Valle de México
   Sistema de diseño — CEOO Tecnologías

   Dirección de arte: papel de alta gama contra acero. Negro carbón, blanco
   cálido y UN acento en bronce apagado. Nada de neón, nada de degradado
   morado-cian. La textura es real (grano y retícula técnica), la profundidad
   viene de sombras en capas y de un doble bisel, no de un `box-shadow` duro.
   ========================================================================= */

:root{
  /* --- tinta y papel: ningún blanco puro, ningún negro puro --- */
  --tinta:#20222A;
  --tinta-2:#5E626C;
  --tinta-3:#8D9099;
  --papel:#F4F3EF;
  --papel-2:#E9E7E1;
  --superficie:#ffffff;
  --linea:rgba(32,34,42,.11);
  --linea-suave:rgba(32,34,42,.06);

  /* --- un solo acento: bronce apagado --- */
  --bronce:#160A7E;
  --bronce-claro:#241795;
  --bronce-tenue:rgba(22,10,126,.09);
  --alerta:#8c3626;

  /* --- vidrio y elevación --- */
  --vidrio:rgba(244,243,239,.78);
  --vidrio-borde:rgba(32,34,42,.09);
  --vidrio-panel:rgba(255,255,255,.90);
  --luz-superior:rgba(255,255,255,.9);
  --elev-1:0 1px 1px rgba(32,34,42,.04), 0 2px 6px rgba(32,34,42,.04);
  --elev-2:0 1px 2px rgba(32,34,42,.05), 0 6px 16px rgba(32,34,42,.07), 0 18px 40px rgba(32,34,42,.05);
  --elev-3:0 2px 4px rgba(32,34,42,.06), 0 14px 34px rgba(32,34,42,.10), 0 34px 70px rgba(32,34,42,.08);

  /* --- métrica --- */
  --nav-h:56px;
  --ancho:1060px;
  --ancho-ancho:1280px;
  --r-s:10px;
  --r-m:14px;
  --r-l:20px;

  /* curvas propias, no ease-in-out de fábrica */
  --sal:cubic-bezier(.22,.61,.24,1);
  --entra:cubic-bezier(.16,.84,.34,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --tinta:#E8E6E1;
    --tinta-2:#9C9E9F;
    --tinta-3:#6E7175;
    --papel:#1C1E20;
    --papel-2:#16181A;
    --superficie:#232629;
    --linea:rgba(197,187,171,.13);
    --linea-suave:rgba(197,187,171,.07);
    --bronce:#C5BBAB;
    --bronce-claro:#DCD3C4;
    --bronce-tenue:rgba(197,187,171,.12);
    --alerta:#D98A6E;
    --vidrio:rgba(28,30,32,.80);
    --vidrio-borde:rgba(197,187,171,.11);
    --vidrio-panel:rgba(22,24,26,.93);
    --luz-superior:rgba(255,255,255,.07);
    --elev-1:0 1px 1px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
    --elev-2:0 2px 6px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.4);
    --elev-3:0 3px 8px rgba(0,0,0,.55), 0 18px 44px rgba(0,0,0,.5), 0 44px 90px rgba(0,0,0,.45);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:"Manrope","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}

/* Grano de papel. Es una textura real, no un degradado disfrazado: se genera
   con ruido fractal y se fija sobre todo el documento con mezcla suave. */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
  opacity:.30;mix-blend-mode:multiply;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) body::before{opacity:.16;mix-blend-mode:screen}
}
body>*{position:relative;z-index:2}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--bronce);color:#fff}

/* ---------------------------------------------------------------- tipografía */
h1,h2,h3,h4{
  font-family:"Manrope","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1.06;
  margin:0;
  text-wrap:balance;
}
.t-gigante{font-size:clamp(3rem,7.6vw,5.6rem);letter-spacing:-.042em;font-weight:600}
.t-grande{font-size:clamp(2.1rem,4.8vw,3.5rem);letter-spacing:-.034em}
.t-media{font-size:clamp(1.55rem,2.7vw,2.2rem);letter-spacing:-.028em}
.t-chica{font-size:1.24rem;letter-spacing:-.02em}

.entrada{
  font-size:clamp(1.1rem,1.55vw,1.32rem);line-height:1.5;
  color:var(--tinta-2);font-weight:400;letter-spacing:-.012em;
  text-wrap:pretty;
}
/* Antetítulo con filete: el trazo corto es lo que lo saca de "texto pequeño
   en mayúsculas" y lo vuelve una marca de sección. */
.sobretitulo{
  display:flex;align-items:center;gap:11px;
  font-size:.72rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--bronce);margin:0 0 18px;
}
.sobretitulo::before{content:"";width:26px;height:1px;background:currentColor;opacity:.65;flex:none}
/* El nombre miente: "ambar" no añade un acento cálido, QUITA el acento y deja
   el gris más apagado del sistema. Y estaba puesto justo encima de las
   secciones que sostienen el argumento —"La evidencia", "Retorno esperado",
   "Sello verificable", "Tecnología", "Gobernanza"—, mientras el acento se lo
   quedaban las rutinarias: la jerarquía cromática iba al revés de la jerarquía
   del contenido. Ahora se reserva para lo que de verdad es secundario o
   accesorio. Se conserva el nombre porque renombrarlo tocaría el HTML de media
   docena de páginas sin ganar nada. */
.sobretitulo.ambar{color:var(--tinta-3)}
p{margin:0 0 1em}
.apagado{color:var(--tinta-3)}
.nota{font-size:.85rem;line-height:1.55;color:var(--tinta-3);letter-spacing:0}

/* ---------------------------------------------------------------- estructura */
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 28px}
.envoltura.ancha{max-width:var(--ancho-ancho)}
section{position:relative}
.banda{padding:clamp(60px,7vw,100px) 0}
.banda.apretada{padding:clamp(42px,4.8vw,64px) 0}

/* Retícula técnica tenue: da profundidad de plano sin ser un patrón decorativo. */
.banda.gris{
  background:var(--papel-2);
  background-image:
    linear-gradient(rgba(32,34,42,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,34,42,.022) 1px, transparent 1px);
  background-size:88px 88px, 88px 88px;
  border-top:1px solid var(--linea-suave);
  border-bottom:1px solid var(--linea-suave);
}
.banda.papel{background:var(--superficie)}
.banda.tinta{
  background:#1C1E20;color:#E8E6E1;
  background-image:radial-gradient(120% 90% at 12% 0%, rgba(197,187,171,.09), transparent 62%);
}
.banda.tinta .apagado,.banda.tinta .nota{color:#7E7D78}
.banda.tinta .entrada{color:#C0BCB4}
.banda.tinta .sobretitulo{color:var(--bronce-claro)}

/* ------------------------------------------------------- barra de navegación */
.nav{
  position:sticky;top:0;z-index:900;height:var(--nav-h);
  background:var(--vidrio);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--vidrio-borde);
}
.nav-in{max-width:var(--ancho-ancho);margin:0 auto;padding:0 26px;height:100%;display:flex;align-items:center;gap:4px}
.marca{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.96rem;letter-spacing:-.022em;padding-right:18px}
.marca .glifo{width:21px;height:21px;flex:none;color:var(--bronce)}
.nav-items{display:flex;align-items:center;gap:1px;flex:1}
.nav-b{
  appearance:none;background:none;border:0;cursor:pointer;
  padding:8px 14px;border-radius:8px;
  font-size:.845rem;font-weight:450;letter-spacing:-.008em;color:var(--tinta);
  opacity:.72;transition:opacity .22s var(--sal),background .22s var(--sal);
  white-space:nowrap;
}
.nav-b:hover{opacity:1;background:var(--linea-suave)}
.nav-b[aria-expanded="true"]{opacity:1;background:var(--linea)}
.nav-b.activo{opacity:1;font-weight:600}
.nav-cta{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  background:var(--tinta);color:var(--papel);
  font-size:.83rem;font-weight:500;padding:9px 19px;border-radius:980px;white-space:nowrap;
  box-shadow:var(--elev-1);
  transition:transform .24s var(--sal),box-shadow .24s var(--sal),opacity .2s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:var(--elev-2)}
.nav-cta:active{transform:translateY(0)}
.nav-menu-movil{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px;border-radius:8px}

/* ------------------------------------------------------------- mega desplegable */
.velo{
  position:fixed;inset:var(--nav-h) 0 0 0;z-index:850;
  background:rgba(10,10,11,.5);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .34s var(--sal);
}
.velo.abierto{opacity:1;pointer-events:auto}
.mega{
  position:fixed;left:0;right:0;top:var(--nav-h);z-index:880;
  background:var(--vidrio-panel);
  -webkit-backdrop-filter:saturate(170%) blur(24px);
  backdrop-filter:saturate(170%) blur(24px);
  border-bottom:1px solid var(--vidrio-borde);
  box-shadow:var(--elev-3);
  overflow:hidden;max-height:0;
  transition:max-height .44s var(--entra);
}
.mega.abierto{max-height:80vh;overflow-y:auto}
.mega-panel{display:none;padding:40px 26px 48px;max-width:var(--ancho-ancho);margin:0 auto}
.mega-panel.visible{display:block;animation:sube .42s var(--entra) both}
@keyframes sube{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mega-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:34px 52px}
.mega-col h4{font-size:.7rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:18px}
.mega-col a{
  display:block;padding:7px 0;
  font-size:1.28rem;font-weight:600;letter-spacing:-.03em;line-height:1.22;
  transition:color .2s var(--sal),transform .2s var(--sal);
}
.mega-col a:hover{color:var(--bronce);transform:translateX(2px)}
.mega-col a small{display:block;font-size:.83rem;font-weight:400;letter-spacing:-.005em;color:var(--tinta-3);margin-top:3px;line-height:1.45}

/* ------------------------------------------------------------------ botones */
/* Doble bisel: una línea de luz arriba y la sombra en capas abajo. Es lo que
   hace que el botón parezca una pieza física y no un rectángulo de color. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 27px;border-radius:980px;border:1px solid transparent;
  font-size:.97rem;font-weight:500;letter-spacing:-.012em;cursor:pointer;
  transition:transform .24s var(--sal),box-shadow .24s var(--sal),background .24s var(--sal),border-color .24s var(--sal);
}
.btn-lleno{
  background:var(--tinta);color:var(--papel);
  box-shadow:inset 0 1px 0 var(--luz-superior), var(--elev-2);
}
.btn-lleno:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 var(--luz-superior), var(--elev-3)}
.btn-lleno:active{transform:translateY(0);box-shadow:inset 0 1px 0 var(--luz-superior), var(--elev-1)}
.btn-linea{border-color:var(--linea);color:var(--tinta);background:transparent}
.btn-linea:hover{border-color:var(--bronce);color:var(--bronce);transform:translateY(-1px)}
.banda.tinta .btn-lleno{background:var(--papel);color:var(--tinta)}
.banda.tinta .btn-linea{border-color:rgba(197,187,171,.26);color:#E8E6E1}
.banda.tinta .btn-linea:hover{border-color:var(--bronce-claro);color:var(--bronce-claro)}

.enlace-flecha{
  display:inline-flex;align-items:center;gap:7px;color:var(--bronce);
  font-size:.99rem;font-weight:500;letter-spacing:-.01em;
  border-bottom:1px solid transparent;transition:border-color .22s var(--sal);
}
.enlace-flecha::after{content:"→";font-size:.96em;transition:transform .26s var(--sal)}
.enlace-flecha:hover{border-color:currentColor}
.enlace-flecha:hover::after{transform:translateX(4px)}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* -------------------------------------------------------------------- héroe */
.heroe{
  position:relative;overflow:hidden;
  padding:clamp(78px,9vw,124px) 0 clamp(84px,9vw,126px);
  background:#191B1D;color:#E9E7E1;
  background-image:
    radial-gradient(68% 54% at 18% 6%, rgba(197,187,171,.14), transparent 62%),
    radial-gradient(52% 44% at 90% 94%, rgba(197,187,171,.06), transparent 66%);
}
.heroe .envoltura{position:relative;z-index:3}
/* Retícula del corredor, apenas insinuada y desvanecida hacia los bordes. */
.heroe::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(197,187,171,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,187,171,.03) 1px, transparent 1px);
  background-size:76px 76px, 76px 76px;
  -webkit-mask-image:radial-gradient(78% 68% at 45% 42%, #000 18%, transparent 76%);
  mask-image:radial-gradient(78% 68% at 45% 42%, #000 18%, transparent 76%);
}
.heroe-brillo{display:none}
.heroe h1{margin-bottom:20px;max-width:15ch;color:#E9E7E1}
.heroe .entrada{max-width:56ch;color:#9C9E9F}
.heroe .btn-lleno{background:#E9E7E1;color:#191B1D}
.heroe .btn-linea{border-color:rgba(197,187,171,.24);color:#E9E7E1}
.heroe .btn-linea:hover{border-color:#C5BBAB;color:#C5BBAB}
.heroe .sobretitulo{color:#C5BBAB}
.sello-borrador{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 16px 6px 7px;margin-bottom:30px;border-radius:980px;
  background:rgba(197,187,171,.055);border:1px solid rgba(197,187,171,.14);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-size:.78rem;color:#9C9E9F;letter-spacing:-.004em;
}
.sello-borrador b{
  background:#160A7E;color:#fff;font-size:.63rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:4px 10px;border-radius:980px;
}

/* --------------------------------------------------------------- cifras */
/* Las cifras van en serif de alto contraste: son el dato, merecen otra voz. */
.cifras{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--linea);border:1px solid var(--linea);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--elev-1);
}
.cifra{background:var(--superficie);padding:30px 26px}
.banda.gris .cifra{background:var(--papel)}
.banda.tinta .cifra{background:#232629}
.cifra .n{
  font-family:"New York","Iowan Old Style",Georgia,"Times New Roman",serif;
  font-size:clamp(2.1rem,3.6vw,2.9rem);font-weight:600;
  letter-spacing:-.035em;line-height:.98;color:var(--tinta);
  font-variant-numeric:tabular-nums lining-nums;
}
.cifra .n.ambar{color:var(--bronce)}
.cifra .et{font-size:.9rem;color:var(--tinta-2);margin-top:12px;line-height:1.42}
.cifra .fu{font-size:.72rem;color:var(--tinta-3);margin-top:11px;line-height:1.45;letter-spacing:0}

/* --------------------------------------------------------------- tarjetas */
.rejilla{display:grid;gap:18px}
.rejilla.c2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.rejilla.c3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.rejilla.c4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tarjeta{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-l);
  padding:29px 27px;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 var(--luz-superior), var(--elev-1);
  transition:transform .34s var(--sal),box-shadow .34s var(--sal),border-color .34s var(--sal);
}
.banda.gris .tarjeta{background:var(--papel)}
.banda.tinta .tarjeta{background:#232629;border-color:rgba(197,187,171,.1)}
.tarjeta:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 var(--luz-superior), var(--elev-3);border-color:rgba(22,10,126,.3)}
.tarjeta h3{font-size:1.3rem;margin-bottom:12px;letter-spacing:-.026em}
.tarjeta p{font-size:.97rem;color:var(--tinta-2);margin:0;line-height:1.58}
.banda.tinta .tarjeta p{color:#9C9E9F}
.tarjeta .indice{
  font-family:"New York",Georgia,serif;font-size:.86rem;font-weight:600;
  letter-spacing:.06em;color:var(--bronce);margin-bottom:18px;display:block;
  font-variant-numeric:tabular-nums;
}
.icono{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--bronce-tenue);color:var(--bronce);
  box-shadow:inset 0 1px 0 var(--luz-superior);
}
.icono.ambar{background:var(--linea-suave);color:var(--tinta-2)}
.icono svg{width:21px;height:21px}

/* --------------------------------------------------- tarjeta municipio */
.municipio{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:inset 0 1px 0 var(--luz-superior), var(--elev-1);
  transition:transform .34s var(--sal),box-shadow .34s var(--sal);
}
.banda.gris .municipio{background:var(--papel)}
.municipio:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 var(--luz-superior), var(--elev-3)}
.municipio .cabeza{padding:28px 28px 20px;border-bottom:1px solid var(--linea-suave)}
.municipio .cabeza h3{font-size:1.42rem;margin-bottom:6px;letter-spacing:-.03em}
.municipio .cabeza .sub{font-size:.83rem;color:var(--tinta-3);line-height:1.4}
.municipio dl{margin:0;padding:22px 28px 28px;display:grid;gap:14px}
.municipio .fila{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.municipio dt{font-size:.87rem;color:var(--tinta-2)}
.municipio dd{
  margin:0;font-size:1rem;font-weight:600;letter-spacing:-.018em;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------------ tabla */
.tabla-caja{
  overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r-m);
  background:var(--superficie);box-shadow:var(--elev-1);
}
.banda.gris .tabla-caja{background:var(--papel)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.93rem}
th,td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--linea-suave);vertical-align:top}
th{font-size:.71rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3);white-space:nowrap}
tbody tr{transition:background .2s var(--sal)}
tbody tr:hover{background:var(--linea-suave)}
tbody tr:last-child td{border-bottom:0}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ------------------------------------------------------------------ fases */
.fases{display:grid;gap:0;border-left:1px solid var(--linea);margin-left:8px}
.fase{position:relative;padding:0 0 34px 32px}
.fase:last-child{padding-bottom:0}
.fase::before{
  content:"";position:absolute;left:-5px;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--bronce);box-shadow:0 0 0 5px var(--papel);
}
.banda.gris .fase::before{box-shadow:0 0 0 5px var(--papel-2)}
.fase .rotulo{font-size:.71rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:9px}
.fase h3{font-size:1.3rem;margin-bottom:11px;letter-spacing:-.026em}
.fase p{font-size:.98rem;color:var(--tinta-2);margin:0 0 12px;line-height:1.58}
.fase ul{margin:0;padding-left:20px;font-size:.94rem;color:var(--tinta-2)}
.fase li{margin-bottom:6px}

/* ------------------------------------------------------------------ acordeón */
.acordeon{border-top:1px solid var(--linea)}
.ac-item{border-bottom:1px solid var(--linea)}
.ac-b{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:24px 4px;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-size:1.11rem;font-weight:600;letter-spacing:-.024em;
  transition:color .22s var(--sal);
}
.ac-b:hover{color:var(--bronce)}
.ac-b .mas{flex:none;width:20px;height:20px;position:relative;opacity:.45;transition:transform .34s var(--entra),opacity .22s}
.ac-b .mas::before,.ac-b .mas::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)}
.ac-b .mas::before{width:14px;height:1.5px}
.ac-b .mas::after{width:1.5px;height:14px;transition:opacity .3s var(--sal)}
.ac-b[aria-expanded="true"] .mas{transform:rotate(90deg);opacity:1}
.ac-b[aria-expanded="true"] .mas::after{opacity:0}
.ac-cuerpo{max-height:0;overflow:hidden;transition:max-height .44s var(--entra)}
.ac-cuerpo .dentro{padding:0 4px 28px;font-size:.99rem;color:var(--tinta-2);max-width:70ch;line-height:1.62}
.ac-cuerpo .dentro p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------- formulario */
.forma{display:grid;gap:18px;max-width:600px}
.campo{display:grid;gap:8px}
.campo label{font-size:.85rem;font-weight:500;color:var(--tinta-2);letter-spacing:-.005em}
.campo input,.campo select,.campo textarea{
  width:100%;padding:13px 15px;border-radius:var(--r-s);
  border:1px solid var(--linea);background:var(--superficie);color:var(--tinta);
  font:inherit;font-size:.97rem;
  box-shadow:inset 0 1px 2px rgba(32,34,42,.04);
  transition:border-color .22s var(--sal),box-shadow .22s var(--sal);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--bronce);
  box-shadow:0 0 0 3px var(--bronce-tenue), inset 0 1px 2px rgba(32,34,42,.04);
}
.campo textarea{min-height:130px;resize:vertical}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.aviso-ok{
  padding:16px 20px;border-radius:var(--r-m);
  background:var(--bronce-tenue);border:1px solid rgba(22,10,126,.26);
  color:var(--bronce);font-size:.95rem;line-height:1.5;
}

/* ------------------------------------------------------------- pie de página */
.pie{
  background:var(--papel-2);border-top:1px solid var(--linea);
  padding:64px 0 38px;font-size:.84rem;color:var(--tinta-3);
}
.pie-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:36px;margin-bottom:40px}
.pie-col h5{font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta);margin:0 0 15px}
.pie-col a{display:block;padding:5px 0;color:var(--tinta-3);transition:color .2s var(--sal)}
.pie-col a:hover{color:var(--bronce)}
.pie-base{border-top:1px solid var(--linea-suave);padding-top:26px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.pie-base .firma{display:flex;align-items:center;gap:9px}
.pie-base .glifo{color:var(--bronce)}

/* ------------------------------------------------- próximamente en plataformas */
.plataformas{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;
}
.plataforma{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border-radius:12px;
  border:1px solid var(--linea);background:var(--superficie);
  box-shadow:inset 0 1px 0 var(--luz-superior), var(--elev-1);
  font-size:.86rem;color:var(--tinta-2);
  transition:transform .26s var(--sal),box-shadow .26s var(--sal);
}
.plataforma:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 var(--luz-superior), var(--elev-2)}
.plataforma svg{width:19px;height:19px;flex:none;opacity:.75}
.plataforma b{font-weight:600;color:var(--tinta);letter-spacing:-.01em}
.plataforma span{font-size:.72rem;color:var(--tinta-3);letter-spacing:.06em;text-transform:uppercase}
.banda.tinta .plataforma{background:#232629;border-color:rgba(197,187,171,.1);color:#9C9E9F}
.banda.tinta .plataforma b{color:#E8E6E1}

/* ---------------------------------------------------------- aparición al scroll */
.rev{opacity:1;transform:none}
/* La entrada por scroll solo se activa cuando hay JavaScript: el script marca
   el documento con .js. Sin esa marca el contenido se ve siempre. Ocultar por
   defecto y confiar en el observador deja la página en blanco si el script
   falla, tarda o el rastreador no lo ejecuta. */
.js .rev{opacity:0;transform:translateY(18px);transition:opacity .8s var(--entra),transform .8s var(--entra)}
.js .rev.vista{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* -------------------------------------------------------------------- móvil */
@media (max-width:880px){
  :root{--nav-h:54px}
  .nav-items,.nav-cta{display:none}
  .nav-menu-movil{display:block}
  .mega-panel{padding:28px 24px 38px}
  .mega-col a{font-size:1.15rem}
  .dos{grid-template-columns:1fr}
  body{font-size:16px}
  .heroe h1{max-width:none}
}
@media (max-width:540px){
  .envoltura{padding:0 20px}
  .tarjeta{padding:28px 24px}
  .acciones .btn{width:100%}
  .cifra{padding:24px 22px}
}

/* ------------------------------------------------------------ impresión */
@media print{
  .nav,.mega,.velo,.pie,.acciones{display:none !important}
  body::before{display:none}
  .banda{padding:20px 0}
  .rev{opacity:1;transform:none}
  body{background:#fff;color:#000;font-size:11pt}
}

/* --------------------------------------------- retícula asimétrica y arte */
/* Rompe el ritmo de "titular + tres tarjetas" que se repetía sección tras
   sección. El texto ocupa cinco doceavos y el arte el resto. */
.parte-dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(36px,5vw,64px);align-items:center}
.parte-texto{min-width:0}
.parte-arte{min-width:0}
@media (max-width:940px){ .parte-dos{grid-template-columns:1fr;gap:40px} }

.lista-dato{margin:34px 0 0;display:grid;gap:0;border-top:1px solid var(--linea)}
.lista-dato>div{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:15px 2px;border-bottom:1px solid var(--linea-suave);
}
.lista-dato dt{font-size:1.02rem;font-weight:600;letter-spacing:-.02em;margin:0}
.lista-dato dd{
  margin:0;font-size:.9rem;color:var(--tinta-2);text-align:right;
  font-variant-numeric:tabular-nums;letter-spacing:-.005em;
}

.mapa-corredor{
  width:100%;height:auto;display:block;color:var(--tinta);
  filter:drop-shadow(0 18px 40px rgba(32,34,42,.07));
}
.mapa-corredor .m-nom{font-size:19px}
.mapa-corredor .m-dat{font-size:15px}
.mapa-corredor .m-ref{font-size:11px}
.mapa-corredor .m-nom{
  font-family:"Manrope","SF Pro Display",-apple-system,sans-serif;font-size:17px;font-weight:600;
  fill:var(--tinta);letter-spacing:-.02em;
}
.mapa-corredor .m-dat{
  font-family:"New York",Georgia,serif;font-size:13px;fill:var(--bronce);
  font-variant-numeric:tabular-nums;
}
.mapa-corredor .m-ref{
  font-family:"Manrope","SF Pro Text",-apple-system,sans-serif;font-size:10.5px;
  fill:var(--tinta-3);letter-spacing:.09em;text-transform:uppercase;
}

/* Cuatro piezas en dos filas de dos: evita la tarjeta huérfana que deja un
   grid automático cuando el cuarto elemento cae solo en la última fila. */
.rejilla.dosxdos{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){ .rejilla.dosxdos{grid-template-columns:1fr} }
.banda.tinta .tarjeta:hover{border-color:rgba(197,187,171,.36)}
.banda.tinta .enlace-flecha{color:var(--bronce-claro)}
.banda.tinta .icono{background:rgba(197,187,171,.13);color:var(--bronce-claro)}
.banda.tinta .icono.ambar{background:rgba(197,187,171,.07);color:#9C9E9F}


/* --------------------------------------------------- profundidad por capas */
/* Una banda que sube sobre la anterior deja de estar "después" y pasa a estar
   "delante". Eso es profundidad; una sombra más fuerte no lo es. */
.encima{margin-top:clamp(-84px,-5.5vw,-50px);position:relative;z-index:5}
.banda.sin-tope{padding-top:0}
@media (max-width:880px){ .encima{margin-top:-38px} }

/* --------------------------------------------------------- movimiento */
/* Fuera el desvanecido con desplazamiento, que es el gesto por defecto de
   cualquier plantilla. El contenido se descubre tras una máscara que se abre,
   y los grupos entran escalonados en vez de todos a la vez. */
.js .rev{
  opacity:0;transform:translateY(12px);clip-path:inset(0 0 16% 0);
  transition:opacity .6s var(--entra), transform .82s var(--entra), clip-path .88s cubic-bezier(.44,.06,.16,1);
}
.js .rev.vista{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

.js .rejilla > *, .js .cifras > *, .js .plataformas > *, .js .fases > *{
  opacity:0;transform:translateY(16px) scale(.988);
  transition:opacity .54s var(--entra), transform .66s var(--entra);
}
.js .vista .rejilla > *, .js .vista .cifras > *, .js .vista .plataformas > *, .js .vista .fases > *,
.js .rejilla.vista > *, .js .cifras.vista > *, .js .plataformas.vista > *, .js .fases.vista > *{
  opacity:1;transform:none;transition-delay:calc(var(--i, 0) * 66ms);
}

/* El filete del antetítulo se traza al entrar la sección. */
.js .rev .sobretitulo::before{transform:scaleX(0);transition:transform .7s var(--sal) .18s}
.js .rev.vista .sobretitulo::before{transform:scaleX(1)}

/* Filo de luz que recorre el borde superior de la tarjeta al pasar el cursor. */
.tarjeta::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--bronce),transparent);
  opacity:0;transition:opacity .42s var(--sal);
}
.tarjeta:hover::after{opacity:.9}

/* Subrayado de navegación que crece desde el centro, en vez de un fondo gris. */
.nav-b{position:relative}
.nav-b:hover{background:none !important}
.nav-b[aria-expanded="true"]{background:none !important}
.nav-b::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1px;
  background:var(--bronce);transform:scaleX(0);transform-origin:center;
  transition:transform .34s var(--sal);
}
.nav-b:hover::after,.nav-b[aria-expanded="true"]::after,.nav-b.activo::after{transform:scaleX(1)}

/* Los enlaces del mega-panel llegan uno tras otro. */
.mega-panel.visible .mega-col a{animation:llega .5s var(--entra) both;animation-delay:calc(var(--i,0) * 36ms)}
@keyframes llega{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .js .rev,.js .rev.vista{opacity:1;transform:none;clip-path:none;transition:none}
  .js .rejilla > *,.js .cifras > *,.js .plataformas > *,.js .fases > *{opacity:1;transform:none;transition:none}
  .mega-panel.visible .mega-col a{animation:none}
}

/* ============================================================================
   ACERO Y AZUL INSTITUCIONAL · Consume Local
   ---------------------------------------------------------------------------
   La paleta viene medida del sitio de INDUSTRIALES MX: azul marino #040D36,
   índigo #160A7E, arena #C5BBAB y gris cálido #7E7D78. El problema del primer
   intento fue el REPARTO, no los colores: el azul ocupaba el suelo y, plano y
   con texto blanco encima, se leía como cartel de campaña.

   Aquí el reparto se invierte, y esa inversión es toda la idea:

     · El GRAFITO manda. Es el suelo de todo el sitio. Un partido no se
       construye sobre grafito, así que la lectura política no arranca.
     · El AZUL entra como MASA y como BANDA. Aparece en las sombras del héroe
       y en una franja de firma que se usa poco y por eso pesa. Nunca es un
       campo plano detrás de texto blanco.
     · El ARENA es la única luz cálida. El duotono cálido/frío es lenguaje de
       fotografía nocturna, no de propaganda, y remata la distancia.

   La textura es real: estriado de lámina cepillada, retícula técnica y viñeta
   de lente. Ningún degradado de adorno, ningún glow difuso.
   ========================================================================= */

@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){

    /* ── El héroe: acero al frente, azul en el fondo, una luz cálida ── */
    .heroe{
      background-color:#1C1E20;
      color:#E8E6E1;
      background-image:
        /* la luz arena entra por el hombro izquierdo */
        radial-gradient(58% 48% at 13% 2%,   rgba(197,187,171,.17), transparent 62%),
        /* la masa institucional: marino que sube desde el pie */
        radial-gradient(104% 82% at 4% 104%, rgba(4,13,54,.92),     transparent 58%),
        /* índigo que separa esa masa del suelo y le da distancia */
        radial-gradient(72% 58% at 26% 92%,  rgba(22,10,126,.46),   transparent 62%),
        /* contraluz frío para que la escena no se cargue a un lado */
        radial-gradient(44% 38% at 94% 8%,   rgba(126,146,224,.07), transparent 64%),
        /* lámina cepillada */
        repeating-linear-gradient(90deg, rgba(232,230,225,.028) 0 1px, transparent 1px 5px),
        /* viñeta de lente */
        radial-gradient(124% 102% at 48% 36%, transparent 40%, rgba(8,10,12,.58) 100%);
    }
    .heroe::after{opacity:.6}
    .heroe h1{color:#E8E6E1}
    .heroe .entrada{color:#9C9E9F}
    .heroe .sobretitulo{color:#C5BBAB}
    .heroe .btn-lleno{background:#C5BBAB;color:#1C1E20}
    .heroe .btn-linea,.heroe .btn-línea{border-color:rgba(197,187,171,.26);color:#E8E6E1}

    /* ── La banda de firma: aquí el azul de la asociación se declara ──
       Se usa poco a propósito. Un color que aparece en todas partes deja de
       significar; apareciendo dos veces, marca. */
    .banda.tinta{
      background-color:#040D36;
      color:#E8E6E1;
      background-image:
        radial-gradient(78% 62% at 8% 0%,    rgba(197,187,171,.11), transparent 62%),
        radial-gradient(84% 68% at 98% 100%, rgba(22,10,126,.62),   transparent 64%),
        repeating-linear-gradient(90deg, rgba(232,230,225,.02) 0 1px, transparent 1px 6px);
    }
    .banda.tinta .tarjeta{
      background-color:#0A1440;
      border-color:rgba(197,187,171,.14);
      background-image:linear-gradient(180deg, rgba(197,187,171,.05), transparent 54%);
    }
    .banda.tinta .sobretitulo{color:#C5BBAB}
    .banda.tinta .apagado,.banda.tinta .nota{color:#8990AC}
    .banda.tinta .entrada{color:#B9BDCC}

    /* ── Costura: que el acero entre en el azul, no que choque ── */
    .banda.tinta{position:relative}
    .banda.tinta::before{
      content:"";position:absolute;left:0;right:0;top:0;height:110px;pointer-events:none;
      background:linear-gradient(180deg, rgba(28,30,32,.85), transparent);
    }
    .banda.tinta>*{position:relative;z-index:2}

    /* ── Superficies sobre acero: bisel de luz arriba, azul insinuado ── */
    .tarjeta,.plataforma,.municipio{
      background-image:linear-gradient(180deg, rgba(197,187,171,.04), rgba(22,10,126,.05) 88%);
    }

    /* ── El acento arena, medido ── */
    .sobretitulo{color:var(--bronce)}
    .banda.gris{
      background-color:#16181A;
      background-image:
        linear-gradient(rgba(197,187,171,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(197,187,171,.026) 1px, transparent 1px);
      background-size:88px 88px,88px 88px;
    }
  }
}

/* ── Modo claro: papel cálido, retícula de plano, índigo de acento ── */
@media (prefers-color-scheme:light){
  :root:not([data-tema="oscuro"]){
    .heroe{
      background-color:#1C1E20;color:#E8E6E1;
      background-image:
        radial-gradient(58% 48% at 13% 2%,   rgba(197,187,171,.16), transparent 62%),
        radial-gradient(104% 82% at 4% 104%, rgba(4,13,54,.90),     transparent 58%),
        repeating-linear-gradient(90deg, rgba(232,230,225,.026) 0 1px, transparent 1px 5px),
        radial-gradient(124% 102% at 48% 36%, transparent 42%, rgba(8,10,12,.52) 100%);
    }
    .heroe h1{color:#E8E6E1}
    .heroe .entrada{color:#9C9E9F}
    .heroe .sobretitulo{color:#C5BBAB}
    .heroe .btn-lleno{background:#C5BBAB;color:#1C1E20}
    .banda.tinta{background-color:#040D36;color:#E8E6E1}
    .banda.tinta .sobretitulo{color:#C5BBAB}
  }
}

/* A 390px el estriado solo ensucia y la costura estorba. */
@media (max-width:768px){
  .banda.tinta::before{height:56px}
}

/* El distintivo de borrador: en acero, arena sobre grafito. El índigo puro
   sobre grafito picaba como un chip de neón y rompía el duotono. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .sello-borrador b{background:#C5BBAB;color:#1C1E20}
  :root:not([data-tema="claro"]) .sello-borrador{color:#9C9E9F}
}

/* ============================================================================
   PLANO CINEMATOGRÁFICO · Consume Local
   ---------------------------------------------------------------------------
   Idea tomada de una maqueta de infraestructura de IA: un plano en movimiento a
   sangre detrás de la columna tipográfica, con desvanecidos medidos a los lados
   y al pie, y una franja de respaldo asentada dentro de ese desvanecido.

   Dos desviaciones deliberadas respecto del original, y conviene saber por qué:

   1) NO es un vídeo. El original carga un MP4 desde una CDN ajena. La política
      de seguridad del runtime solo admite medios del propio origen, así que ese
      archivo quedaría bloqueado — y además no es nuestro. La atmósfera se
      genera aquí, en un lienzo, sin depender de nadie.
   2) NO es un escenario fijo de pantalla completa. Aquel diseño bloquea el
      desplazamiento porque solo tiene un titular. Este sitio tiene ocho páginas
      de información real que no se toca, así que el plano es una BANDA superior
      por la que el contenido entra, no una jaula.
   ========================================================================= */

.atmos{
  position:absolute;top:0;left:0;right:0;
  height:clamp(460px, 86vh, 1000px);
  z-index:0;pointer-events:none;overflow:hidden;
  background:var(--papel);
}
.atmos canvas{display:block;width:100%;height:100%}

/* Los desvanecidos: a los lados encajona la escena como un fotograma ancho;
   abajo la entrega al contenido sin costura visible. */
.atmos::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to bottom,
      rgba(28,30,32,0) 56%,
      rgba(28,30,32,.28) 66%,
      rgba(28,30,32,.62) 76%,
      rgba(28,30,32,.86) 86%,
      rgba(28,30,32,.96) 94%,
      var(--papel) 100%),
    linear-gradient(to right,
      var(--papel) 0%,
      rgba(28,30,32,.55) 5%,
      transparent 16%,
      transparent 84%,
      rgba(28,30,32,.55) 95%,
      var(--papel) 100%);
}

/* El contenido siempre por encima del plano. */
body>nav,body>main,body>footer{position:relative;z-index:2}

/* ── El encabezado de CADA página se apoya en el plano ───────────────────
   En la portada existe .heroe; en las otras siete, la primera banda hace de
   encabezado. Se marca por posición, así que ninguna página tuvo que
   reescribirse y no se perdió una sola línea de texto. */
.heroe,
main>section.banda:first-child{
  background-color:transparent;
  position:relative;
}
main>section.banda:first-child{
  padding-top:clamp(74px,11vh,148px);
  padding-bottom:clamp(52px,7vh,96px);
}

/* La portada conserva su masa azul, atenuada para que no pelee con el plano. */
.heroe{background-image:none}

/* ── Escala tipográfica sensible a la altura ─────────────────────────────
   Del original: la medida se ata a la ALTURA de la ventana para que el titular
   llene el encuadre en cualquier pantalla, con un tope para que no se desborde
   en monitores muy anchos. */
:root{
  --u:calc(100vh / 1058);
  --uw:calc(100vw / 1487);
  --h:clamp(var(--u), calc(var(--u) * .65 + var(--uw) * .35), calc(var(--u) * 1.16));
}
@supports (height:100dvh){ :root{ --u:calc(100dvh / 1058) } }

.heroe h1,
main>section.banda:first-child>.envoltura>h1{
  font-size:clamp(2.4rem, calc(62 * var(--h)), 4.6rem);
  line-height:1.04;
  letter-spacing:-.03em;
}

/* ── Entrada escalonada ──────────────────────────────────────────────────
   Curva propia del original: cubic-bezier(.22,1,.36,1). Sube y aparece. */
@keyframes sube-entra{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:no-preference){
  .heroe .sobretitulo,        main>section.banda:first-child .sobretitulo,
  .heroe h1,                  main>section.banda:first-child>.envoltura>h1,
  .heroe .entrada,            main>section.banda:first-child>.envoltura>.entrada,
  .heroe .acciones,           main>section.banda:first-child .acciones{
    animation:sube-entra .9s cubic-bezier(.22,1,.36,1) both;
  }
  .heroe .sobretitulo,main>section.banda:first-child .sobretitulo{animation-delay:.02s}
  .heroe h1,main>section.banda:first-child>.envoltura>h1{animation-delay:.08s}
  .heroe .entrada,main>section.banda:first-child>.envoltura>.entrada{animation-delay:.16s}
  .heroe .acciones,main>section.banda:first-child .acciones{animation-delay:.24s}
}

/* ── Franja de respaldo, asentada dentro del desvanecido ─────────────────
   El original pone cuatro logotipos de relleno. Aquí van los cuatro municipios
   del corredor, que es información verdadera y además es la prueba que este
   público pide. */
.franja-corredor{
  position:relative;z-index:2;
  margin:0 auto;padding:0 22px clamp(26px,4vh,54px);
  max-width:var(--ancho);
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:clamp(18px,3.2vw,52px);
}
.franja-corredor .fc-etq{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-3);margin-right:4px;
}
.franja-corredor b{
  font-weight:600;font-size:clamp(.92rem,1.5vw,1.06rem);
  color:var(--tinta-2);letter-spacing:-.01em;
}
@media (prefers-reduced-motion:no-preference){
  .franja-corredor{animation:sube-entra 1.1s cubic-bezier(.22,1,.36,1) .34s both}
}

/* ── Retrato ─────────────────────────────────────────────────────────────
   El encajonado lateral se retira: a 390px solo estrecha la lectura. */
@media (max-width:768px){
  .atmos{height:clamp(400px,64vh,620px)}
  .atmos::after{
    background-image:
      linear-gradient(to bottom,
        rgba(28,30,32,0) 44%,
        rgba(28,30,32,.40) 62%,
        rgba(28,30,32,.80) 80%,
        rgba(28,30,32,.95) 92%,
        var(--papel) 100%);
  }
  main>section.banda:first-child{padding-top:clamp(48px,8vh,84px)}
  .franja-corredor{gap:12px 20px;padding-bottom:26px}
}

/* ── Corredor 3D ─────────────────────────────────────────────────────────
   El lienzo 3D va ENCIMA del atmosférico, no en su lugar. Si el equipo no
   tiene WebGL, el 3D queda transparente y se ve el fondo de siempre: nadie
   se queda mirando un hueco negro. */
.atmos{height:clamp(560px,108vh,1200px)}
.atmos>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#atmosLienzo{z-index:0}
#placa3d{z-index:1}
.atmos::after{z-index:2}

/* Con el recorrido más largo, el encabezado necesita respirar arriba. */
.heroe,main>section.banda:first-child{padding-top:clamp(92px,14vh,180px)}

@media (max-width:768px){
  /* En el teléfono el recorrido se acorta: una entrada de dos pantallas
     completas antes del primer texto se siente como que no carga. */
  .atmos{height:clamp(440px,74vh,700px)}
  .heroe,main>section.banda:first-child{padding-top:clamp(56px,9vh,96px)}
}

/* ── Velos, replanteados para el 3D ──────────────────────────────────────
   Los desvanecidos anteriores se diseñaron para un fondo plano y ahogaban la
   escena: encajonaban los lados al 55% y empezaban a oscurecer desde el 56%
   de altura. Con una escena que hay que VER, eso la mata.
   Ahora el velo es LOCAL: una sombra por detrás de la columna de texto, que
   es donde de verdad hace falta contraste, más un cierre al pie para entregar
   la escena al contenido. El resto del cuadro queda limpio. */
.atmos::after{
  background-image:
    linear-gradient(to bottom,
      rgba(28,30,32,0) 68%,
      rgba(28,30,32,.55) 84%,
      rgba(28,30,32,.90) 94%,
      var(--papel) 100%),
    linear-gradient(to right,
      rgba(28,30,32,.86) 0%,
      rgba(28,30,32,.62) 34%,
      rgba(28,30,32,.14) 56%,
      transparent 72%);
}
@media (max-width:768px){
  .atmos::after{
    background-image:
      linear-gradient(to bottom,
        rgba(28,30,32,.30) 0%,
        rgba(28,30,32,.10) 30%,
        rgba(28,30,32,.72) 78%,
        rgba(28,30,32,.94) 92%,
        var(--papel) 100%);
  }
}

/* ── Escala visible en las tarjetas de municipio ─────────────────────────
   La barra no decora: codifica la proporción respecto al municipio mayor.
   Sin ella, Ecatepec y Coacalco se veían igual de "grandes" pese a llevar
   una diferencia de cinco veces y media. */
.municipio .fila{position:relative;padding-bottom:11px}
.barra-muni{
  position:absolute;left:0;right:0;bottom:3px;height:2px;
  background:var(--linea-suave);border-radius:2px;overflow:hidden;
}
.barra-muni i{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--bronce),var(--bronce-claro));
  border-radius:2px;
  /* Entra dibujándose: refuerza que es una medida, no un adorno fijo. */
  transform-origin:left center;
}
@media (prefers-reduced-motion:no-preference){
  .js .rejilla .municipio .barra-muni i{transform:scaleX(0);transition:transform .9s cubic-bezier(.22,1,.36,1) .18s}
  .js .vista .municipio .barra-muni i,
  .js .rejilla.vista .municipio .barra-muni i{transform:scaleX(1)}
}

/* El subtítulo de Ecatepec ocupaba dos renglones y desalineaba TODA su tabla
   respecto a las otras tres. Se le fija una altura de dos líneas a las cuatro. */
.municipio .cabeza .sub{min-height:2.9em}

/* ── Encabezado a PANTALLA COMPLETA ──────────────────────────────────────
   Antes la atmósfera era una franja discreta y el encabezado una sección
   más. Ricardo lo dijo claro: al abrir no pasa nada. Ahora la primera
   pantalla ES la escena, con la placa al centro y el texto encima. */
.atmos{height:100vh;min-height:560px}
@supports (height:100dvh){ .atmos{height:100dvh} }

.heroe,
main>section.banda:first-child{
  min-height:100vh;
  display:flex;align-items:center;
  padding-top:var(--nav-h);padding-bottom:clamp(90px,13vh,150px);
}
@supports (height:100dvh){
  .heroe,main>section.banda:first-child{min-height:100dvh}
}
.heroe>.envoltura,
main>section.banda:first-child>.envoltura{width:100%}

/* La franja de municipios se ancla al pie de esa primera pantalla, dentro
   del desvanecido, como pie de cartel. */
.franja-corredor{
  position:absolute;left:0;right:0;
  top:calc(100vh - clamp(74px,10vh,104px));
  z-index:3;
}
@supports (height:100dvh){
  .franja-corredor{top:calc(100dvh - clamp(74px,10vh,104px))}
}

/* Señal de que hay que bajar. Sin ella, una pantalla completa sin borde
   inferior visible hace dudar de si el sitio termina ahí. */
.heroe::after,
main>section.banda:first-child::after{
  content:"";position:absolute;left:50%;bottom:clamp(120px,16vh,170px);
  width:1px;height:44px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--bronce));
  opacity:.55;
}
@media (prefers-reduced-motion:no-preference){
  .heroe::after,main>section.banda:first-child::after{
    animation:baja 2.6s cubic-bezier(.22,1,.36,1) infinite;
  }
  @keyframes baja{
    0%{transform:translateY(-8px);opacity:0}
    35%{opacity:.6}
    100%{transform:translateY(12px);opacity:0}
  }
}

@media (max-width:768px){
  .atmos{height:88vh;min-height:480px}
  .heroe,main>section.banda:first-child{min-height:88vh;padding-bottom:clamp(70px,11vh,110px)}
  .franja-corredor{top:calc(88vh - 86px)}
  .heroe::after,main>section.banda:first-child::after{bottom:96px;height:32px}
}

/* ── El velo, acotado a la columna de texto ──────────────────────────────
   El degradado anterior llegaba al 72% del ancho y tapaba la placa, que es
   lo que hay que ver. Ahora muere en el 46%: protege la lectura y suelta
   la mitad derecha del cuadro para el objeto. */
.atmos::after{
  background-image:
    linear-gradient(to bottom,
      rgba(28,30,32,0) 74%,
      rgba(28,30,32,.50) 86%,
      rgba(28,30,32,.90) 95%,
      var(--papel) 100%),
    linear-gradient(to right,
      rgba(28,30,32,.90) 0%,
      rgba(28,30,32,.72) 24%,
      rgba(28,30,32,.28) 38%,
      transparent 46%);
}
@media (max-width:768px){
  /* En el telefono no hay dos columnas: la placa queda detras del texto, asi
     que el velo vuelve a ser de arriba abajo y ella se hunde al fondo. */
  .atmos::after{
    background-image:
      linear-gradient(to bottom,
        rgba(28,30,32,.55) 0%,
        rgba(28,30,32,.42) 34%,
        rgba(28,30,32,.78) 76%,
        rgba(28,30,32,.95) 92%,
        var(--papel) 100%);
  }
}

/* Con la placa 3D pintando su propio fondo opaco, el lienzo atmosférico 2D
   sobra y solo compite. Se retira aquí; si no hay WebGL, placa3d.js no llega
   a ocultar nada y el 2D sigue siendo el respaldo. */
#placa3d{z-index:1}

/* ── El encabezado deja ver la escena ────────────────────────────────────
   La etapa anterior le dio a .heroe un fondo grafito OPACO más degradados
   radiales. Con la placa 3D detrás, eso la tapaba entera: se veía el fondo
   pintado por CSS y nunca el objeto. Ahora la atmósfera la pone la escena,
   así que el encabezado se queda sin fondo propio.
   Va al final del archivo y con doble selector para ganarle al bloque de
   modo oscuro que lo fijaba. */
.heroe,
main>section.banda:first-child,
:root:not([data-tema="claro"]) .heroe,
:root:not([data-tema="claro"]) main>section.banda:first-child{
  background-color:transparent;
  background-image:none;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .heroe,
  :root:not([data-tema="claro"]) main>section.banda:first-child{
    background-color:transparent;
    background-image:none;
  }
}

/* ============================================================================
   BARRA INFERIOR DEL SISTEMA
   ---------------------------------------------------------------------------
   Por debajo de 880 px la hoja apaga .nav-items y .nav-cta. El sitio publico
   tiene su menu movil; el sistema nunca lo tuvo, asi que en un telefono se
   perdian "Validar", "Mi QR", "Mi negocio" y "Salir", y "Mis canjes" no tenia
   ningun camino. Esta barra es ese repuesto. Se emite siempre y solo se ve en
   el tramo donde la barra de arriba calla, para no duplicar navegacion.

   Va abajo a proposito: quien la usa es un comerciante con una mano ocupada y
   el cliente enfrente. El pulgar llega abajo, no arriba.
   ========================================================================= */
.barra-abajo{display:none}
@media (max-width:880px){
  .barra-abajo{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--papel);border-top:1px solid var(--linea);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -1px 14px rgba(28,30,32,.07);
  }
  .ba-b{
    flex:1;min-height:56px;display:flex;align-items:center;justify-content:center;
    text-align:center;padding:8px 4px;text-decoration:none;
    color:var(--tinta-2);font-size:.8rem;font-weight:500;letter-spacing:-.008em;
    border-top:2px solid transparent;transition:color .18s var(--sal),border-color .18s var(--sal);
  }
  .ba-b.activo{color:var(--bronce);border-top-color:var(--bronce);font-weight:600}
  .ba-b:active{background:var(--linea-suave)}
  /* El pie y el ultimo contenido no pueden quedar debajo de la barra. */
  .pie{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* Safari en iPhone hace zoom en cualquier campo por debajo de 16 px, y el
   sistema los tenia en .97rem (15.5 px). Cada vez que el comerciante tocaba
   "Monto de la cuenta" la pagina saltaba y habia que reencuadrarla a mano. */
@media (max-width:880px){
  .forma .campo input,.forma .campo select,.forma .campo textarea{font-size:16px}
}

/* ============================================================================
   PÁGINAS SIN OBJETO
   ---------------------------------------------------------------------------
   La placa 3D se emitía en las ocho páginas y el resultado era papel tapiz: el
   mismo objeto detrás de ocho argumentos distintos. Peor, la hoja reservaba una
   PANTALLA COMPLETA para el primer bloque de todas ellas, así que las páginas
   que solo tienen un titular y un párrafo abrían con 550-600 px de vacío
   medido, y el aviso de privacidad —un documento que hay que leer— quedaba con
   un QR girando por detrás del texto.

   Aquí el encabezado vuelve a medir lo que mide su contenido. Se conserva la
   capa atmosférica 2D, que es textura de fondo y no compite con nadie: no es
   "quitar el ambiente", es dejar de fingir que hay algo que enseñar.
   ========================================================================= */
.atmos.sin-objeto{
  height:clamp(320px,46vh,520px);
}
.atmos.sin-objeto ~ main > .heroe,
.atmos.sin-objeto ~ main > section.banda:first-child{
  min-height:0;
  display:block;
  padding-top:calc(var(--nav-h) + clamp(46px,7vh,86px));
  padding-bottom:clamp(46px,7vh,86px);
}
/* El indicador de "siga bajando" solo tiene sentido si hay una pantalla que
   agotar. Sin objeto, sobra. */
.atmos.sin-objeto ~ main > section.banda:first-child::after{content:none}
/* La franja de municipios se ancla al pie de la primera pantalla; sin pantalla
   completa que anclar, se coloca en el flujo. */
.atmos.sin-objeto ~ main .franja-corredor{position:static;top:auto}

/* ── Cifras que documentan un fracaso ──────────────────────────────────────
   /industriales pone dos casos que funcionaron y dos que no, con el mismo
   tamaño y a propósito: enseñar los datos malos con el mismo cuerpo que los
   buenos es justo lo que este público no espera de una cámara empresarial, y
   es lo que compra credibilidad. Se distinguen por el tono y por una marca
   discreta, no por ser más pequeñas. */
.cifra .n.mal{color:var(--alerta)}
.cifra .n.mal::after{
  content:"";display:block;width:34px;height:2px;margin-top:12px;
  background:currentColor;opacity:.5;
}

/* ── Jerarquía de autoridad ────────────────────────────────────────────────
   /propuesta declara tres niveles de poder radicalmente distintos y los
   dibujaba en tres cajas idénticas de 319 x 238 px: quien puede detener el
   programa, quien responde por lo que publica, y quien explícitamente no
   manda. El lector tenía que deducir leyendo lo que debería ver de un golpe.

   Aquí el tamaño y el peso dicen lo mismo que el texto. No se cambió una sola
   palabra: solo se dejó de contradecirla. */
.rejilla.autoridad .manda{
  grid-column:1 / -1;
  border-color:var(--bronce);
  box-shadow:var(--elev-2);
}
.rejilla.autoridad .manda h3{font-size:1.32rem}
.rejilla.autoridad .acompana{
  background:transparent;
  border-style:dashed;
  box-shadow:none;
}
.rejilla.autoridad .acompana h3,
.rejilla.autoridad .acompana p{color:var(--tinta-2)}
@media (max-width:720px){
  .rejilla.autoridad .manda{grid-column:auto}
}