/* ============================================================
   sitio.css — EL ARMAZÓN DE atozh.cl. Una sola fuente para lo que se repite en
   todas las páginas vivas: tokens, tipografía base, contenedor, franja, barra de
   navegación, cabecera de página, botones, pie, y los pocos componentes que ya eran
   idénticos en más de una página.

   POR QUÉ EXISTE (15-sep-2026). Diego, con capturas de /, /tu-mes/ y /el-cargo/:
   «hay q homologar los formatos de las paginas... q se siente q sigo donde mismo,
   ahora se siente q me voy a otra, podrian revisar la causa y mejorar de raiz».
   La causa, medida ese día sobre las 7 páginas: no había armazón común. Cada página
   llevaba su propia copia de los estilos y del esqueleto —6 versiones de CSS, 4 de
   barra, 4 de pie, la franja navy sólo en la home y la banda gris de migas sólo en
   dos puertas— porque cada una nació en una generación distinta y se armó copiando.
   `sistema-check` daba verde porque medía ingredientes (un ancho, 18 tokens, «una
   navegación»), no el esqueleto.

   LAS REGLAS, y las vigila scripts/audit/armazon-check.mjs:
   · el HTML compartido (franja + barra, pie) lo escribe scripts/gen-armazon.mjs entre
     marcadores `<!-- armazon:… -->`; no se edita a mano;
   · una página no redeclara inline nada de lo que está acá, ni pinta elementos a
     secas (todo selector de página lleva su clase): lo propio de su contenido, y nada más.

   PALETA: el traje Mosaik. El azul de marca es acento, nunca manto (traje-check lee
   también este archivo). Tipografía: Sora + IBM Plex Mono auto-hospedadas en /fuentes/.
   Cero CDN.
   ============================================================ */

/* ---------- TOKENS: un solo vocabulario (sistema-check compara los nombres) ---------- */
:root{
  --sans:'Sora',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --paper:#FFFFFF; --panel:#F2F6FB; --soft:#F6F9FD;
  --border:#DCE6F1; --rule:#9DB8E0;
  --navy:#072A42; --acento:#0B72B0; --acento-claro:#4FB3E8; --on-navy:#BBD3E2;
  --text:#1B2430; --dim:#5B6B7C; --muted:#8E9AA8;
  --green:#367952; --red:#CD2627; --amber:#826B35; --amber-bg:#FCF3E1;
}

/* ---------- BASE ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);
     font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{margin:0;letter-spacing:-.026em;color:var(--navy);text-wrap:balance}
p{margin:0}
figure{margin:0}
.pw{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.k{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}

/* ---------- LA FRANJA: el número vivo arriba de todo, con su fuente y su fecha.
     Es la misma en las siete páginas: es lo primero que se lee al llegar y lo que
     dice «seguís en el mismo sitio» al cruzar. ---------- */
.franja{background:var(--navy);color:var(--on-navy);font-family:var(--mono);font-size:12px;
        letter-spacing:.02em;padding:9px 0}
.franja .pw{display:flex;gap:2px 14px;align-items:baseline;flex-wrap:wrap}
.franja b{color:#fff;font-weight:500;font-size:13px}
.franja span{color:#6E93AC}
/* 27-sep-2026 (juez de pantalla, anuncios-whatsapp-27sep): en celular lo primero que leía el visitante frío de un
   aviso eran ~100 px de un dato del padrón en letra de máquina. Bajo 720px la franja se va; el dato sigue en la
   portada y en el Radar, donde se explica. */
@media(max-width:720px){.franja{display:none}}

/* ---------- LA BARRA. El sticky va en el CONTENEDOR que tiene recorrido (.navwrap) —en
     .nav no se pegaba— y el menú de celular es un desplegable real, no uno que se apaga. ---------- */
.navwrap{position:sticky;top:0;z-index:60}
.nav{background:var(--paper);border-bottom:1px solid var(--border);position:relative}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.marca{display:flex;align-items:center;min-height:44px;text-decoration:none}
/* EL LOGOTIPO lleva el apellido «Control de Gestión» en una línea bajo «atozh»
   (viewBox 500×128). Alturas 44 → 40 (bajo 380px) → 32 (bajo 360px): las que el juez de
   pantalla midió el 14-sep-2026 sobre 6a1b586, con el apellido a 13,1 / 11,9 / 9,5px. */
.wm{height:44px;width:auto;display:block}
.navlinks{display:none;gap:26px;font-size:13px;color:var(--dim)}
.navlinks a{text-decoration:none;color:var(--dim);white-space:nowrap}
.navlinks a:hover{color:var(--acento)}
/* «page» es la página en que se está; «true», la raíz de su sección (Radar, en las piezas del Radar) */
.navlinks a[aria-current]{color:var(--navy);font-weight:600}
.navright{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.navcta{background:var(--navy);color:#fff;border-radius:8px;padding:14px 17px;font-size:13px;
        font-weight:600;white-space:nowrap;line-height:1.25;text-decoration:none}

/* ---------- EL GLIFO DE WHATSAPP (27-sep-2026, bloqueante del juez de pantalla: «ningún botón dice que abre
     WhatsApp»; el fix «glifo + microcopy» de docs/focus-group-hallazgos.md:22 se había perdido). Lo escribe
     scripts/glifo-whatsapp.mjs; pinta con currentColor, así que no suma un color al manual. ---------- */
.wa{width:1.12em;height:1.12em;vertical-align:-.2em;margin-right:.45em;flex:none;display:inline-block}
.navtoggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
           background:var(--paper);border:1px solid var(--border);border-radius:8px;color:var(--navy);
           font-size:15px;line-height:1;cursor:pointer;padding:0;font-family:var(--sans)}
/* el corte sube de 900 a 1010 px el 27-sep-2026: con el ítem de temporada, entre 900 y ~1005 px el menú partía
   cada ítem en dos líneas (juez de pantalla sobre la temporada C, residual 1, #26) */
@media(min-width:1010px){.navlinks{display:flex}.navtoggle{display:none}}
/* SIN JAVASCRIPT EL ☰ NO ABRE NADA, así que no se dibuja (fix R12 de MOCKUPS.md del 31-ago-2026, que se había
   perdido: el juez lo volvió a cazar el 27-sep). La navegación sigue alcanzable: el pie la repite entera.
   La marca `.js` la pone el armazón (gen-armazon, bloque hoja) en todas las páginas. Lo vigila pantalla-check (5-bis). */
html:not(.js) .navtoggle{display:none}
@media(max-width:1009px){
  .navlinks{position:absolute;left:0;right:0;top:100%;z-index:50;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--border);padding:4px clamp(20px,4vw,40px) 12px}
  .navlinks[data-open]{display:flex}
  .navlinks a{padding:11px 0;border-bottom:1px solid var(--border);font-size:14.5px}
  .navlinks a:last-child{border-bottom:0}
}

/* ---------- LA SUB-NAVEGACIÓN DE UNA SECCIÓN (15-sep-2026, firma un-solo-menu-en-todo-atozh-cl-15sep).
     Sólo en las páginas del Radar, justo debajo de la barra. Se tiene que leer como parte del Radar y
     no como una segunda barra del sitio: más baja (44px contra 69), sobre el gris más claro, con
     pestañas en vez de botones y el mismo ancho de columna. NO es fija: fija queda sólo la barra.
     Si no cabe en una línea se desplaza de lado dentro de su propia franja; nunca se esconde. El
     rótulo «La publicación de Atozh» es decoración: bajo 620px se va para no meter ruido. ---------- */
.subnav{background:var(--soft);border-bottom:1px solid var(--border)}
.subnav-in{display:flex;align-items:stretch;gap:24px;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
.subnav-links{display:flex;gap:22px;flex:0 0 auto}
.subnav-links a{display:flex;align-items:center;min-height:44px;font-size:13px;color:var(--dim);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav-links a:hover{color:var(--acento)}
.subnav-links a[aria-current]{color:var(--navy);font-weight:600;border-bottom-color:var(--navy)}
.subnav-rot{display:flex;align-items:center;margin-left:auto;flex:0 0 auto;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
/* a 390 los tres enlaces caben en una línea con 12px entre ellos (medido: 18px desbordaba 10px) */
@media(max-width:620px){.subnav-rot{display:none}.subnav-links{gap:12px}}
/* Bajo 380px el logotipo baja a 40px, y bajo 360px a 32px. Ahí «Hablemos» y ☰ se aprietan un
   poco, para que el ☰ no se salga del margen a 320px (lo midió el builder del armazón, 15-sep). */
@media(max-width:379px){.wm{height:40px}}
@media(max-width:359px){
  .nav-in{gap:10px}.navright{gap:6px}.navcta{padding-inline:11px}
  .wm{height:32px}
}

/* ---------- LA CABECERA DE PÁGINA: la misma en las siete. Rótulo en mono (si la página
     tiene uno), H1, bajada; y si hay bloque lateral, la misma grilla y el mismo aire. ---------- */
.hero{background:var(--paper);border-bottom:1px solid var(--border);padding:60px 0 56px}
.hero.con-lado .pw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:start}
.hero .k{display:block;color:var(--acento);margin-bottom:14px}
.hero h1{font-size:clamp(32px,3.9vw,48px);line-height:1.07;font-weight:700;max-width:24ch}
.hero h1 em{font-style:normal;color:var(--acento)}
.hero .bajada{font-size:17px;color:var(--dim);margin-top:18px;max-width:52ch;line-height:1.6}
.hero .bajada b{color:var(--text);font-weight:600}
/* Un H1 de más de 12 palabras se compone en dos pesos (juez de pantalla, 15-sep, residual R1 sobre la N°1:
   la frase canónica completa ocupaba 8 líneas y 411px a 1440). La frase sigue entera dentro del H1. */
.hero h1.dos-pesos{font-size:clamp(28px,3.2vw,40px)}
.hero h1.dos-pesos span{display:block;font-size:.62em;font-weight:600;line-height:1.2;margin-top:.45em}
@media(max-width:960px){.hero.con-lado .pw{grid-template-columns:1fr;gap:32px}}
@media(max-width:620px){.hero{padding:44px 0 42px}}

/* ---------- BOTONES Y ENLACES DE ACCIÓN ---------- */
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center}
.acts a{text-decoration:none;font-weight:600;font-size:15px;padding:13px 22px;border-radius:9px}
.acts .p{background:var(--navy);color:#fff}
.acts .s{color:var(--navy);border:1px solid var(--rule)}
.masinfo{display:inline-flex;align-items:center;min-height:44px;color:var(--acento);
         font-weight:600;text-decoration:none}

/* ---------- SECCIONES: el mismo ritmo vertical en todas las páginas de servicio ---------- */
section.s{padding:64px 0;border-bottom:1px solid var(--border)}
section.s.alt{background:var(--panel)}
.enc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:start}
.enc h2{font-size:30px;font-weight:700}
.enc>div>p{color:var(--dim);font-size:16px;margin-top:14px;max-width:48ch}
@media(max-width:960px){.enc{grid-template-columns:1fr;gap:32px}}

/* ---------- CIFRAS A 390: el tipo de un SVG que escala con su contenedor no tiene piso —
     a 390 los rótulos de los gráficos caían a 4,2-5,9px. Bajo 620px el dibujo se queda con
     las barras y las cifras salen a HTML, donde tienen tamaño propio. Hallazgo del juez de
     pantalla, 8-sep-2026. Era la misma regla copiada en tres páginas. ---------- */
.cifras{display:none}
.cifras .mal{color:var(--red)}
@media(max-width:620px){
  .graf svg text,.mail svg text,.hall svg text{display:none}
  .cifras{display:grid;gap:11px;margin-top:14px}
  .cifras .fila{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;
    border-top:1px solid var(--border);padding-top:9px}
  .cifras .rot{flex:0 0 100%;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--dim);margin-bottom:2px}
  .cifras .val{font-family:var(--mono);font-size:16px;color:var(--navy);font-variant-numeric:tabular-nums}
  .cifras .txt{font-size:13.5px;color:var(--dim);flex:1 1 auto}
}

/* ---------- EL RADAR USA EL ANCHO (15-sep-2026). Diego, sobre /radar/cuantas-empresas-hay-en-chile/
     en computador: «no estamos usando bien los espacioooos!!, porq?». Medido ese día: la lectura
     era una columna de 768px pegada a la izquierda y sin nada al lado (`.prosa{max-width:48rem}`),
     y dejaba 352px vacíos —el 29% del contenedor— en las cuatro páginas del Radar, desde el 7-sep.
     El arreglo NO estira el párrafo: la medida de lectura sube a 38rem en las piezas (unos
     67-68 caracteres de mediana, medido por el juez de pantalla el 15-sep). Cambia la composición, y cada página reubica lo que ya tenía:
       · .destacada     — a la derecha de la cabecera: la cifra principal con su fuente y su fecha
                          (en el método, su índice y su fuente).
       · .pieza         — lectura (8/12) + .lateral (4/12), que queda pegado debajo de la barra al
                          bajar: «En esta pieza» (lo escribe scripts/gen-indice.mjs desde los <h2>)
                          y el «¿Un número no le cuadra?» que antes cerraba la lectura.
       · .lado-a-lado   — en las páginas que no son pieza: el título de la sección a la izquierda y
                          su texto a la derecha, el mismo gesto de las secciones del servicio.
       · .publicaciones — las piezas del índice, en tarjetas de a dos.
     Bajo 1100px todo vuelve a una columna y nada se esconde: el lateral cae al final de la lectura,
     donde estaba el cierre de la pieza. Lo vigila pantalla-check (11): ningún bloque deja vacía más
     del 20% de la columna a 1280 ni a 1440. ---------- */
main [id]{scroll-margin-top:96px}
.hero .destacada{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:24px 28px;align-self:center}
.destacada .cifra+.cifra{border-top:1px solid var(--border);margin-top:16px;padding-top:16px}
.destacada .n{font-family:var(--mono);font-size:clamp(34px,3.6vw,46px);line-height:1.05;font-weight:500;
  color:var(--navy);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.destacada .n small{font-size:.42em;letter-spacing:0;color:var(--dim);font-weight:400}
.destacada .que{font-size:15.5px;color:var(--text);margin-top:6px;line-height:1.45}
.hero .destacada .k{color:var(--dim);margin:20px 0 6px}
.hero .destacada nav .k{margin-top:0}
.destacada .fte{font-size:13.5px;color:var(--dim);line-height:1.55}
.destacada .fte a{color:var(--acento)}

.indice{list-style:none;margin:0;padding:0}
.indice li+li{border-top:1px solid var(--border)}
.indice a{display:flex;align-items:center;min-height:44px;padding:6px 0;color:var(--navy);text-decoration:none;
  line-height:1.4}
.indice a:hover{color:var(--acento)}
.lateral{background:var(--paper);border:1px solid var(--border);border-radius:12px;
  padding:20px 24px;margin:0 0 3.5rem;font-size:14.5px;line-height:1.5}
.lateral .k{display:block;margin-bottom:6px}
.lateral .correo{border-top:1px solid var(--rule);margin-top:10px;padding-top:14px;color:var(--dim)}
.lateral .correo a{color:var(--acento);text-underline-offset:2px}
@media(min-width:1100px){
  .pieza{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:56px;align-items:start}
  .pieza>.lateral{position:sticky;top:96px;margin:clamp(2rem,5vw,2.8rem) 0 4rem}
  /* C1 del juez de pantalla (15-sep): a 34rem el párrafo dejaba 23-24% de su columna vacío y leía a
     58-60 caracteres; a 38rem queda en 11-18% y 67-68 caracteres. */
  .pieza .prosa p{max-width:38rem}
  .lado-a-lado{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
}
.publicaciones{display:grid;gap:16px}
.publicaciones>.fila-entera{grid-column:1/-1}
@media(min-width:760px){.publicaciones{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- EL PIE ---------- */
.pie-sitio{background:var(--navy);color:var(--on-navy);padding:44px 0 38px;font-size:14px}
.pie-sitio .pw{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.pie-sitio .wm{height:44px}
.pie-sitio b{color:#fff;display:block;margin-bottom:9px;font-family:var(--mono);font-size:10.5px;
             letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.pie-sitio a{color:var(--on-navy);text-decoration:none;display:flex;align-items:center;min-height:44px}
.pie-sitio p{color:var(--on-navy);max-width:38ch;margin:12px 0 0}
.pie-sitio .sm{display:block;font-family:var(--mono);font-size:11.5px;color:#6E93AC;margin-top:10px}
.pie-sitio a.pie-priv{display:inline-flex;font-size:13px;text-decoration:underline;text-underline-offset:3px}
@media(max-width:960px){.pie-sitio .pw{grid-template-columns:1fr;gap:28px}}

/* ===== LA FRANJA DE TEMPORADA (18-sep-2026, encargos campana-plan-2027-18sep y banner-temporada-puertas-18sep) =====
   Vive acá y no en la portada desde que va en tres páginas: un estilo, no tres copias.
   La puerta de entrada de las campañas: una tarjeta por campaña vigente. La escribe
   scripts/gen-temporada.mjs; cada campaña sale sola al vencer. Desde la v15 (versión C, 27-sep-2026) la
   llevan sólo /tu-mes/ y /el-cargo/: la portada abre con el titular de temporada, y el menú tiene su ítem. */
.temporada{background:var(--acento);padding:18px 0}
.temporada-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 28px;align-items:center}
.t-rot{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#fff}
.t-puertas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.t-puertas.t-1{grid-template-columns:minmax(0,1fr)}
.t-puertas.t-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 18-sep-2026, encargo home-banner-temporada-18sep: lo que sirve de los retailers es el banner de
   campaña FIJO (Diego preguntó por un carrusel; se descartó: ~1% de clics y 84% en la primera
   lámina en Notre Dame, y NN/g mide que el giro automático se ignora). Las dos campañas a la vez,
   quietas, sobre el azul de acento (no navy: en /tu-mes/ y /el-cargo/ la sección que sigue es navy y la banda se fundía), justo debajo del titular (el sistema pide que
   después de la barra venga el titular: armazon-check). */
.t-puerta{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:18px;
          align-content:center;background:var(--paper);border-radius:12px;padding:18px 20px 18px 22px;
          text-decoration:none;color:var(--navy);transition:box-shadow .15s}
.t-puerta:hover,.t-puerta:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--navy)}
.t-k{grid-column:1;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acento)}
.t-puerta b{grid-column:1;font-size:clamp(18px,1.45vw,21px);font-weight:700;line-height:1.25;letter-spacing:-.02em;margin-top:5px}
.t-ir{grid-column:2;grid-row:1/3;align-self:center;display:grid;place-items:center;min-width:44px;min-height:44px;
      border-radius:10px;background:var(--navy);color:#fff;font-size:20px}
@media(max-width:900px){.temporada-in{grid-template-columns:1fr}.t-puertas,.t-puertas.t-3{grid-template-columns:1fr}}
@media(max-width:620px){.temporada{padding:14px 0}.t-puertas{gap:10px}.t-puerta{padding:14px 16px}}

/* ===== EL ÍTEM DE TEMPORADA DEL MENÚ (v15, versión C «Una sola vitrina», 27-sep-2026) =====
   Uno solo, primero, que gen-armazon pone y saca por fecha (menuTemporada de gen-temporada.mjs). */
.navlinks a.nav-temp{color:var(--acento);font-weight:600;display:inline-flex;align-items:center;gap:7px}
.navlinks a.nav-temp::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acento);flex:0 0 auto}
/* en /plan-2027/ marca «estás aquí» como los demás ítems (juez de pantalla, residual 2) */
.navlinks a.nav-temp[aria-current]{color:var(--navy)}
.navlinks a.nav-temp[aria-current]::before{background:var(--navy)}

/* ===== LA REGLA DE TEMPORADA (v15, versión C, 27-sep-2026) — el instrumento del titular de temporada, en la
   portada y en /plan-2027/: de septiembre a enero, en dos tramos (lo que le queda a 2026 · 2027), con una
   parada por campaña vigente. La escribe scripts/gen-temporada.mjs desde la fecha. */
.regla{background:var(--soft);border:1px solid var(--border);border-radius:14px;padding:26px 28px;margin:0}
.regla .fecha{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.tramos-r{display:grid;grid-template-columns:4fr 1fr;gap:6px;margin-top:16px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.tramos-r span{border-top:3px solid var(--navy);padding-top:7px;line-height:1.35}
.tramos-r .tr27{border-color:var(--acento);color:var(--acento)}
.meses5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:10px;align-items:start}
.regla .m{display:flex;flex-direction:column;gap:6px}
.regla .mes{height:54px;border-radius:7px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}
.regla .mes.hecho{background:var(--border);color:var(--text)}
.regla .mes.falta{background:#fff;border:1.5px solid var(--navy);color:var(--navy);font-weight:500}
.regla .mes.falta.p27{border-color:var(--acento);color:var(--acento)}
.regla .mes.hoy,.regla .mes.falta.hoy.p27{background:var(--navy);border-color:var(--navy);color:#fff}
.regla .hoy-rot{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);font-weight:600;text-align:center}
.leyenda-r{display:flex;gap:10px;align-items:center;margin-top:14px}
.leyenda-r .n{font-family:var(--mono);font-size:22px;color:var(--navy);font-weight:500;line-height:1}
.leyenda-r span:last-child{font-size:14px;color:var(--dim);line-height:1.45}
.paradas{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:10px}
.paradas a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:#fff;
  border:1px solid var(--border);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--navy);min-height:44px}
.paradas a:hover,.paradas a:focus-visible{border-color:var(--navy)}
.paradas .no{font-family:var(--mono);font-size:12px;color:var(--acento)}
.paradas .pk{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.paradas b{display:block;font-size:15.5px;font-weight:600;line-height:1.3;margin-top:2px}
.paradas .ir{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:var(--navy);color:#fff}
@media(max-width:620px){.regla{padding:20px 18px}.tramos-r{font-size:9.5px}.regla .mes{height:46px;font-size:10.5px}}

/* ===== LA CASA, UN LUGAR MÁS ABAJO (v15, versión C, 27-sep-2026) — sólo en la portada: su titular de siempre, entero, como
   segunda sección mientras dura la temporada. gen-temporada.mjs le cambia el envoltorio; el texto es el mismo. ===== */
.casa{background:var(--paper);border-bottom:1px solid var(--border);padding:56px 0 52px}
.casa .pw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:start}
.casa h2.h1{font-size:clamp(28px,3.2vw,40px);line-height:1.1;font-weight:700;max-width:24ch}
.casa .bajada{font-size:17px;color:var(--dim);margin-top:18px;max-width:52ch;line-height:1.6}
@media(max-width:960px){.casa .pw{grid-template-columns:1fr;gap:32px}}

/* «Cuánto cuesta», la escalera (29-sep-2026, firma escalera-atozh-cl-4-6-10-29sep). La escribe gen-precio.mjs
   en la portada, /el-cargo/ y /tu-mes/: tres planes del mismo analista, sus cinco entregables y los agregados. */
.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan{background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:24px 24px 22px}
.plan h3{font-size:17px;font-weight:600}
.plan .n{font-size:31px;font-weight:700;color:var(--navy);letter-spacing:-.03em;line-height:1.15;margin-top:10px}
.plan .n em{font-style:normal;font-size:15px;font-weight:400;color:var(--dim);letter-spacing:0}
.plan .baj{font-size:14.5px;color:var(--text);margin:10px 0 14px;line-height:1.5}
.plan ul.lim{gap:8px;margin:0}
.plan ul.lim li{font-size:14px}
.esc-pie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;margin-top:40px;align-items:start}
.esc-pie>div>.k{display:block;margin-bottom:14px}
.esc-pie ul.lim{margin:0}
.agregados{border-top:1px solid var(--border)}
.ag{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px solid var(--border)}
.ag b{display:block;color:var(--text);font-weight:600;font-size:15px}
.ag div span{display:block;color:var(--dim);font-size:14px;line-height:1.5}
.ag .pr{flex:none;font-family:var(--mono);font-size:13.5px;color:var(--navy);white-space:nowrap}
.escalera .acts{margin-top:22px}
.escalera .sinf{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:14px;line-height:1.6}
@media(max-width:960px){.planes,.esc-pie{grid-template-columns:1fr}.esc-pie{gap:32px}}

/* «Cuánto cuesta», la puerta chica de temporada (27-sep-2026): debajo del analista, más chica que él.
   La escribe gen-temporada.mjs mientras /plan-2027/ esté vigente. */
.precio-otra{display:flex;gap:24px;align-items:center;justify-content:space-between;margin-top:36px;
  padding:20px 24px;border:1px solid var(--border);border-radius:12px;background:var(--paper)}
.precio-otra .k{display:block;margin-bottom:6px}
.precio-otra p{font-size:15px;color:var(--dim);margin:0;max-width:62ch}
.precio-otra p b{color:var(--text)}
.precio-otra p b:last-of-type{white-space:nowrap}
.precio-otra a{flex:none;font-weight:600;font-size:15px;color:var(--navy);text-decoration:none;
  padding:12px 18px;border:1px solid var(--rule);border-radius:9px;min-height:44px;box-sizing:border-box}
@media (max-width:720px){.precio-otra{flex-direction:column;align-items:flex-start}
  .precio-otra a{align-self:stretch;text-align:center}}

/* ===== EL AVISO DE MEDICIÓN DE CAMPAÑAS (27-sep-2026, firma pixeles-meta-y-google-atozh-cl-27sep). NACE APAGADO:
   lo dibuja terceros/consentimiento.js, que gen-pixel escribe sólo cuando hay una etiqueta de anuncios encendida.
   Mientras no la haya, estas reglas no pintan nada. «Aceptar» y «Rechazar» pesan lo mismo, a propósito: un
   «Rechazar» escondido no es consentimiento (borrador de Privacidad de fiscal, §1.a). ===== */
.consentimiento{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:640px;margin:0 auto;
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:18px 20px;
  box-shadow:0 8px 32px rgba(7,42,66,.18);font-size:14px;line-height:1.5;color:var(--text)}
.consentimiento p{margin:0}
.consentimiento a{color:var(--acento);text-underline-offset:2px}
.consentimiento-acts{display:flex;gap:10px;margin-top:14px}
.consentimiento-acts button{flex:1 1 0;min-height:44px;font:inherit;font-weight:600;border-radius:9px;cursor:pointer;
  background:var(--paper);color:var(--navy);border:1.5px solid var(--navy)}