/* ============================================================
   ETW · v2 — sistema congelado (split editorial, ETW nativo)
   Capa --base-*: común a todas las páginas del frente.
   Capa --puerta-*: el sabor de cada puerta (hoy: celeste en todas).
   ============================================================ */
:root{
  --bg:#f4f7fa; --card:#fff; --ink:#0e1620; --soft:#5b6875; --hair:#e3eaf1;
  --accent:#1fa8e5; --deep:#0e75a8; --firma:#f0ae00; --wa:#25D366; --wa-ink:#06341a;
  --dark:#0e1620; --dark-soft:#9daebc; --dark-hair:#243242;
  --ui:'Manrope',sans-serif; --max:1150px;
  --sh:0 1px 2px rgba(14,22,32,.05), 0 14px 36px -18px rgba(14,22,32,.2);
  /* ── el acabado (2026-09-16) ──────────────────────────────────────────
     El anillo de tres capas reemplaza al borde pintado en las superficies:
     la 1ª capa hace de borde de 1px, la 2ª es el contacto con la superficie
     y la 3ª la sombra ambiente. Antes teníamos 13 de 19 sombras de UNA capa,
     y esa capa que faltaba —el contacto— es lo que se leía como plano.
     Un borde sólido además está pintado de un color que sólo sirve sobre el
     fondo para el que se eligió; el anillo es transparencia y sirve sobre
     cualquiera. Grado B del tablero de acabados, elegido por Moisés.
     Fuente de los valores: `make-interfaces-feel-better/surfaces.md`.
     El comparador vive en `_drafts/detalles-variantes.html`. */
  --anillo:      0 0 0 1px rgba(14,22,32,.07), 0 1px 2px -1px rgba(14,22,32,.07), 0 2px 4px rgba(14,22,32,.04);
  --anillo-alto: 0 0 0 1px rgba(14,22,32,.10), 0 2px 4px -2px rgba(14,22,32,.10), 0 8px 18px -8px rgba(14,22,32,.12);
  --luz:     inset 0 1px 0 rgba(255,255,255,.28);   /* el borde de luz del botón */
  --luz-osc: inset 0 1px 0 rgba(255,255,255,.09);   /* sobre oscuro no hay sombra: hay luz */
  /* la tipografía de la interfaz de Meta — NO es la nuestra, y ésa es la idea */
  --ui-meta:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ── LIMPIEZA · 2026-09-16 ────────────────────────────────────────────────
   Se sacaron 15 clases que no usaba NINGUNA página: abadge · acto · arow ·
   chip · cifras · feat · fui · link-arrow · loop-tag · loopchips · sigue ·
   trabajo, y las tres de los carriles (carriles · carril · rail).

   ⚠️ Lo de los carriles merece la aclaración: los dos carriles SÍ existen, en
   `medicion.html` — pero esa página es autocontenida y tiene su propia copia
   del CSS. Las reglas de acá eran un duplicado muerto que cargaban las otras
   23 páginas para nada. **No se borró contenido de ninguna página.**

   Salieron del inventario de `_drafts/componentes.html`, que las contó una por
   una contra el marcado de las 24 páginas. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font-family:var(--ui); font-weight:500;
  line-height:1.55; font-size:16px; -webkit-font-smoothing:antialiased}
::selection{background:var(--accent); color:#fff}
/* Contorno de 1px en las fotos: una foto clara sobre fondo claro no termina en
   ningún lado. ⛔ Negro puro al 10 %, nunca teñido con el celeste de la marca
   ni con el gris del sistema — un contorno con color propio se lee como
   suciedad en el borde. Va `outline` y no `border` porque no agranda la caja.
   Los logos quedan afuera: son .svg. */
img:not([src$=".svg"]){outline:1px solid rgba(0,0,0,.10); outline-offset:-1px}
.dash.post img:not([src$=".svg"]), .credencial img:not([src$=".svg"]),
.acto.oscuro img:not([src$=".svg"]){outline-color:rgba(255,255,255,.12)}
/* números de ancho fijo: sin esto una columna de plata baila de izquierda a
   derecha cada vez que cambia un dígito. */
table{font-variant-numeric:tabular-nums}
a{color:inherit}
/* foco visible propio en todo link: dos quedaban con el `outline:auto 1px` del
   browser, mucho menos visible que el resto del sistema */
/* dos anillos —uno nítido de 2px y uno difuso— se leen igual de claro sobre
   cualquier fondo, y no parecen un error de render como el sólido de 3px. */
a:focus-visible{outline:2px solid var(--deep); outline-offset:2px; border-radius:3px;
  box-shadow:0 0 0 6px rgba(31,168,229,.22)}
.head{max-width:var(--max); margin:0 auto; padding:20px 24px; display:flex; align-items:center; justify-content:space-between}
.head img{height:26px}
.head span{font-size:13px; font-weight:600; color:var(--soft)}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--deep)}
.eyebrow::before{content:'►'; color:var(--firma); font-size:11px}
h1{font-weight:800; font-size:clamp(2.4rem, 5.8vw, 3.9rem); line-height:1.02;
  letter-spacing:-.04em; margin:18px 0 0; max-width:14ch}
h1 .q{color:var(--deep)}
h2{font-weight:800; font-size:clamp(1.8rem,4.2vw,2.7rem); line-height:1.06; letter-spacing:-.035em; margin:16px 0 0; max-width:17ch}
h2 .q{color:var(--deep)}
.lead{font-weight:300; font-size:1.14rem; color:var(--soft); max-width:44ch; margin:22px 0 0}
.lead b{color:var(--ink); font-weight:700}
.btn-wa{display:inline-flex; align-items:center; background:var(--wa); color:var(--wa-ink);
  font:800 15.5px/1 var(--ui); padding:17px 28px; border-radius:99px; text-decoration:none;
  margin-top:30px; transition:transform .15s ease-out, box-shadow .15s ease-out;
  /* moldeado y no pintado: degradado vertical mínimo + una línea de luz de 1px
     arriba adentro + sombra de contacto de 1px, además de la ambiente teñida.
     ⛔ Sin reflejo que barre: es el único detalle que SE VE y se decidió
     dejarlo afuera (grado B, no C). Está listo en `_drafts/` si se quiere. */
  background:linear-gradient(180deg,#31dd76,#1fbe5c);
  box-shadow:var(--luz), 0 1px 1px rgba(6,52,26,.2), 0 12px 26px -12px rgba(37,211,102,.55)}
.btn-wa:hover{transform:translateY(-2px);
  box-shadow:var(--luz), 0 2px 3px rgba(6,52,26,.2), 0 18px 34px -14px rgba(37,211,102,.65)}
/* al apretar baja a 0,96 y vuelve más lento de lo que bajó. El número no es
   gusto: por debajo de 0,95 ya se lee como exageración (`emil-design-eng`). */
.btn-wa:active{transform:translateY(0) scale(.96); transition-duration:.1s}
.btn-wa:focus-visible{outline:2px solid var(--deep); outline-offset:2px; box-shadow:0 0 0 6px rgba(31,168,229,.22)}
.micro{font-weight:300; font-size:13px; color:var(--soft); margin-top:14px}
.micro b{font-weight:700; color:var(--ink)}
/* ---------- hero split ---------- */
/* overflow:hidden contiene el resplandor decorativo de ::before (620px con
   right:-60px), que en mobile empujaba la página 60px a la derecha */
.hero{position:relative; max-width:var(--max); margin:0 auto; padding:44px 24px 76px; overflow:hidden}
.hero::before{content:''; position:absolute; top:-40px; right:-60px; width:620px; height:520px;
  background:radial-gradient(closest-side, rgba(31,168,229,.11), transparent 70%); pointer-events:none}
.hero .grid{position:relative; display:grid; gap:44px; align-items:center}
@media(min-width:900px){ .hero .grid{grid-template-columns:1.04fr 1fr; gap:60px} }
/* ---------- panel (mockup nativo genérico) ---------- */
.panel{background:var(--card); border:1px solid transparent; border-radius:16px; overflow:hidden;
  /* el panel es la superficie más grande: lleva el anillo Y conserva la
     ambiente grande, si no el mockup del hero queda plano. */
  box-shadow:var(--anillo), 0 14px 36px -18px rgba(14,22,32,.16)}
.panel .bar{display:flex; align-items:center; gap:9px; padding:13px 18px; border-bottom:1px solid var(--hair); font-size:13px; font-weight:800}
.panel .bar img{height:15px}
.panel .bar .live{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--soft)}
.panel .bar .live i{width:7px;height:7px;border-radius:50%;background:var(--wa)}
@media(prefers-reduced-motion:no-preference){ .panel .bar .live i{animation:pulse 1.8s ease-in-out infinite} }
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.erow{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  padding:11px 18px; border-bottom:1px solid var(--hair); font-size:13.5px; opacity:0; transform:translateY(6px)}
.erow.in{opacity:1; transform:none; transition:opacity .4s ease, transform .4s ease}
.erow .n{font-weight:800}
.erow .n small{display:block; font-weight:500; font-size:11px; color:var(--soft); margin-top:1px}
.erow .src{font-size:10.5px; font-weight:600; color:var(--soft); text-align:right; line-height:1.55}
.erow .src s{color:#c0392b}
/* el anillo interno de la píldora sale de su propio color de texto, así no hay
   que escribir una variante por cada estado (ok / capi / mal / en curso). */
.erow .st{font-size:10.5px; font-weight:800; padding:5px 10px; border-radius:99px; white-space:nowrap;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent)}
.erow .st.ok{background:#e7f6fd; color:var(--deep)}
.erow .st.rec{background:#e8f9ef; color:#177a45}
.erow .st.bad{background:#fdeeea; color:#c0392b}
.panel .foot{display:flex; align-items:center; gap:16px; padding:14px 18px; background:#fafcfe}
.panel .foot .m{font-size:11px; font-weight:600; color:var(--soft); text-transform:uppercase; letter-spacing:.07em}
.panel .foot .m b{display:block; font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums}
.panel .track{flex:1; height:7px; border-radius:99px; background:var(--hair); overflow:hidden}
.panel .track i{display:block; height:100%; width:0; border-radius:99px; background:var(--accent); transition:width 1.2s ease}
/* ══════════════════════════════════════════════════════════════════════════
   EL MOCKUP DE META, FIEL · 2026-09-16

   Moisés marcó «El mockup de Meta» EN DUDA y «El panel, fiel a Meta» ME GUSTA.
   Es la misma pieza: lo que no convencía era el acabado, no el componente.

   ⭐ EL HALLAZGO, y no era de color: **nuestros mockups estaban tipografiados
   en Manrope**, que es la tipografía de NUESTRA marca. La interfaz real de Meta
   usa la del sistema. Por eso se veían «nuestros» y no «de Meta» — y por eso
   ninguna corrección de color lo arreglaba. Está medido en
   `_drafts/panel-meta-fiel.html`, con los dos lado a lado.

   ⚠️ NO VA EN TODOS LOS `.panel`. De los 16 del repo, **14 son pantallas de
   Meta y 2 no**: los de automotriz son nuestro embudo con una foto del salón.
   Ponerles la tipografía del sistema sería un error. La regla que los separa es
   semántica, no una lista: **un panel con barra de chrome es una pantalla
   ajena**. Por eso `:has(> .bar)` — y así cualquier mockup nuevo entra solo.

   📌 Y que el mockup tenga otra tipografía que el resto de la página es
   CORRECTO: marca que eso es una pantalla ajena y no parte de nuestro diseño.

   El logo de ETW sale de la barra: la pantalla no es nuestra. Era la decisión
   que estaba abierta en `_drafts/index.html` y queda cerrada acá.
   ══════════════════════════════════════════════════════════════════════════ */
.panel:has(> .bar){font-family:var(--ui-meta); border-radius:14px}
.panel:has(> .bar) .bar{font-size:15px; font-weight:600; padding:14px 18px; border-bottom-color:#CED0D4}
.panel:has(> .bar) .bar img{display:none}          /* la pantalla no es nuestra */
.panel:has(> .bar) .bar .live{font-size:12px; font-weight:400; color:#65676B}
.panel:has(> .bar) .erow{padding:14px 18px; border-bottom-color:#CED0D4; font-size:15px}
.panel:has(> .bar) .erow .n{font-weight:600}
.panel:has(> .bar) .erow .n small{font-size:12px; color:#65676B; font-weight:400}
.panel:has(> .bar) .erow .src{font-size:11.5px; font-weight:400; color:#65676B}
.panel:has(> .bar) .erow .st{border-radius:6px; font-weight:600; font-size:11.5px}
.panel:has(> .bar) .foot{padding:16px 18px; background:#F7F8FA; border-top:1px solid #CED0D4}
.panel:has(> .bar) .foot .m{font-size:12px; font-weight:400; color:#65676B;
  text-transform:none; letter-spacing:0}
.panel:has(> .bar) .foot .m b{font-weight:600; letter-spacing:-.01em}
.panel:has(> .bar) .cap{font-family:var(--ui)}     /* el pie es NUESTRO texto, no de la pantalla */

/* ⚠️ CUARTO CHOQUE CON `.sec-b p` (0,1,1), encontrado el 2026-09-13 MIRANDO la
   página, no leyendo el CSS: el pie del panel de `gestion` medía 328px adentro
   de un panel de 540 y su fondo gris cortaba a la mitad — se veía como un
   rectángulo mal pegado. `.panel .cap` es (0,2,0) en font-size, pero el
   `max-width:46ch` de la sección no tenía quién lo pisara.
   📌 La regla, por cuarta vez: **componente adentro de sección alterna = doble
   selector desde el principio.** */
.panel .cap, .sec-b .panel .cap{padding:0 18px 16px; background:#fafcfe; font-size:12px;
  font-weight:300; color:var(--soft); max-width:none}
.panel .cap b{color:var(--ink); font-weight:800}
/* .intro — el párrafo que sigue al h2 de una sección. Estaba escrito inline
   ("font-weight:300; color:var(--soft); max-width:62ch; margin-top:14px") y
   repetido en las 5 páginas de rubro, con variantes accidentales de max-width. */
.intro, .sec-b .intro{font-weight:300; color:var(--soft); font-size:1.06rem;
  max-width:62ch; margin:14px 0 0}
.intro b{color:var(--ink); font-weight:700}
/* ⚠️ DOBLE SELECTOR, igual que `.intro` cuatro líneas arriba y por el mismo
   motivo: `.sec-b p` (0,1,1) le gana a `.epig` (0,1,0) y le pisaba el
   `font-size:12px` con 1.08rem. El rótulo «valores de ejemplo» salía del tamaño
   de un párrafo y competía con el texto que acompaña.
   🔴 No era un bug nuevo: afectaba a SEIS páginas que ya usaban `.epig` dentro
   de `.sec-b` — madre · creativo · gestion · rubro-clinicas · rubro-ecommerce
   y su corta. Encontrado el 2026-09-06 al agregar un panel a `gestion`.
   📌 Si agregás otro componente de texto chico, escribilo con doble selector
   desde el principio: es el tercer choque igual en este archivo. */
.epig, .sec-b .epig{font-weight:300; font-size:12px; color:var(--soft); margin-top:12px;
  max-width:none}
/* 🔴 EL `max-width:none` SE AGREGÓ EL 2026-09-13, mirando la página. El doble
   selector de arriba arreglaba el `font-size` pero NO el `max-width:46ch`, que
   seguía llegando de `.sec-b p` — así que el rótulo salía en dos o tres líneas
   angostas debajo de un mockup de 540px o 614px de ancho. El arreglo estaba a
   medio hacer y nadie lo había visto porque el síntoma es feo, no roto. */

/* ---------- sección alterna (blanca) ---------- */
.sec-b{background:var(--card); border-top:1px solid var(--hair)}
.sec-b .wrap{max-width:var(--max); margin:0 auto; padding:76px 24px 72px; display:grid; gap:44px; align-items:center}
@media(min-width:900px){ .sec-b .wrap{grid-template-columns:1fr 1.05fr; gap:64px} }
.sec-b p{font-weight:300; color:var(--soft); font-size:1.08rem; max-width:46ch; margin:18px 0 0}
.sec-b p b{color:var(--ink); font-weight:700}
.sec-a{max-width:var(--max); margin:0 auto; padding:76px 24px 72px}
/* ---------- .subt · el encabezado que NO abre bloque ---------- */
/* §C de mecanismo-de-landing empareja secciones: "Activos (5) + con quién no
   funciona (6)" es UN bloque, y se venía escribiendo como dos <section> con
   eyebrow y h2 cada una — el lector cuenta los anuncios de tema, no las
   etiquetas. `.subt` es la segunda mitad de un par: continúa el bloque en vez
   de abrir uno. Sin eyebrow arriba: el eyebrow es lo que anuncia tema nuevo.

   ⚠️ Y para saber si un par sobra, el peso NO se mide contando <section>: la
   cadena de eslabones vive en un `<div class="sec-a">`, así que un inventario
   por etiqueta <section> la saltea entera. El 2026-08-26 eso hizo medir un
   bloque en "68 palabras" cuando tenía 557, y sobre ese número se borró la
   cadena de clínicas. Se cuenta por CONTENEDOR VISUAL. */
/* ⚠️ `.subt` ES UN ENCABEZADO (va en <h2>/<h3>), NO un párrafo. Puesto en un
   <p> lo saca en 1.7rem y peso 800 — se lee como otro título y rompe la
   jerarquía. Pasó el 2026-09-05 en clínicas e inmobiliaria a la vez.
   Para el párrafo que va debajo de un h2, usar:
   <p style="font-weight:300; color:var(--soft); max-width:64ch; margin-top:16px"> */
.subt{font-weight:800; font-size:clamp(1.3rem,2.5vw,1.72rem); line-height:1.14;
  letter-spacing:-.028em; margin:54px 0 0; max-width:24ch}
.subt .q{color:var(--deep)}
.subt + .intro{margin-top:12px}
@media(prefers-reduced-motion:no-preference){
  .on .rail.full .pkt{animation:go 2.8s ease-in-out .4s infinite}
  .on .rail.cut .pkt{animation:stop 2.8s ease-in-out .4s infinite}
}
@keyframes go{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
@keyframes stop{0%{left:0;opacity:0}12%{opacity:1}46%{left:52%;opacity:1}56%{left:52%;opacity:0}100%{opacity:0}}
/* ---------- antes / después ---------- */
.duo{display:grid; gap:20px; margin-top:40px}
@media(min-width:900px){ .duo{grid-template-columns:1fr 1fr} }
.dash{border-radius:16px; padding:26px}
.dash .dk{font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin-bottom:24px}
.dash.pre{background:var(--card); border:1px solid transparent; box-shadow:var(--anillo)}
.dash.pre .dk{color:var(--soft)}
/* ⚠️ sobre fondo oscuro las tres capas del anillo no se ven —no hay nada más
   oscuro que el fondo—. Queda una línea clara arriba y una ambiente profunda. */
.dash.post{background:var(--dark); color:#fff;
  box-shadow:var(--luz-osc), 0 24px 48px -28px rgba(0,0,0,.55)}
.dash.post .dk{color:var(--firma)}
.brow{display:grid; grid-template-columns:70px 1fr 52px; gap:14px; align-items:center; font-size:12.5px; font-weight:600; margin-bottom:16px}
.brow .bt{height:9px; border-radius:99px; overflow:hidden; position:relative}
.dash.pre .bt{background:#eef2f6}
.dash.post .bt{background:rgba(255,255,255,.1)}
.brow .bt i{position:absolute; inset:0 auto 0 0; width:0; border-radius:99px; background:var(--accent)}
.on .dash.post .bt i{width:var(--w); transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.brow .bv{text-align:right; font-weight:800; font-variant-numeric:tabular-nums}
.dash .blur{filter:blur(3.5px); opacity:.5; user-select:none}
.dash.pre .warn{margin-top:20px; font-size:12.5px; font-weight:700; color:#c0392b}
.dash.post .dfoot{margin-top:20px; font-size:12.5px; font-weight:300; color:var(--dark-soft)}
.dash.post .dfoot b{color:#fff; font-weight:800}
.resline{display:grid; gap:10px 28px; margin-top:34px; list-style:none}
@media(min-width:900px){ .resline{grid-template-columns:1fr 1fr} }
.resline li{font-size:14.5px; font-weight:600; display:flex; gap:10px; align-items:baseline}
.resline li::before{content:'✓'; color:var(--deep); font-weight:800}
/* ---------- confianza ---------- */
.conf{background:var(--card); border-top:1px solid var(--hair)}
.conf .wrap{max-width:760px; margin:0 auto; padding:80px 24px; text-align:center}
.quote{font-weight:300; font-size:clamp(1.35rem,3vw,1.9rem); line-height:1.35; letter-spacing:-.015em; color:var(--ink)}
.quote b{font-weight:800}
.conf .sub{font-weight:300; font-size:1.02rem; color:var(--soft); max-width:52ch; margin:22px auto 0}
.metodo{display:inline-block; margin-top:26px; font-size:14.5px; font-weight:800; color:var(--deep); text-decoration:none;
  border-bottom:2px solid rgba(15,127,181,.25); padding-bottom:2px}
.metodo:hover{border-color:var(--deep)}
.metodo:focus-visible{outline:2px solid var(--deep); outline-offset:3px; box-shadow:0 0 0 6px rgba(31,168,229,.22)}
/* ── el método, con el idioma (2026-09-16) ───────────────────────────────
   Era una línea de texto azul en 16 páginas — el link a la página que explica
   todo el método, leyéndose como un pie de página. Dicho en el idioma que
   eligió Moisés: el oscuro #212121 con la línea de luz arriba, y el texto al
   tamaño en que Meta titula (peso 500, no 800).

   ⚠️ Acotado a `.conf .metodo`, que es donde vive de verdad: último hijo del
   bloque de confianza, dentro de un `.wrap` de 760px. Hay UNA instancia suelta
   en `medicion-metodo.html`, en medio de un texto — ésa sigue siendo un link,
   y está bien que siga siéndolo. */
/* centrado: el texto ya termina en «→», así que `space-between` con un solo
   nodo de texto no hacía nada y la banda quedaba vacía a la derecha. */
.conf .metodo{display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:30px; padding:24px 26px; border-radius:14px; border-bottom:0; text-align:left;
  background:#212121; color:#fff; font-size:clamp(1.02rem,1.8vw,1.3rem); font-weight:500;
  letter-spacing:-.025em; line-height:1.3;
  box-shadow:var(--luz-osc), 0 24px 48px -28px rgba(0,0,0,.55);
  transition:transform .15s ease-out, box-shadow .15s ease-out}
.conf .metodo:hover{transform:translateY(-2px); border-color:transparent;
  box-shadow:var(--luz-osc), 0 30px 56px -26px rgba(0,0,0,.6)}
.conf .metodo:active{transform:translateY(0) scale(.99); transition-duration:.1s}
/* ---------- cierre oscuro (vende el diagnóstico) ---------- */
.cierre{background:var(--dark); color:#fff}
.cierre .wrap{max-width:720px; margin:0 auto; padding:84px 24px 76px; text-align:center}
.cierre .eyebrow{color:var(--firma)}
.cierre h2{margin:16px auto 0; max-width:16ch; color:#fff}
.cierre p{font-weight:300; color:var(--dark-soft); max-width:50ch; margin:20px auto 0; font-size:1.06rem}
.cierre p b{color:#fff; font-weight:700}
.pasos{display:flex; justify-content:center; align-items:center; gap:14px; margin-top:30px;
  font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--dark-soft); flex-wrap:wrap}
.pasos i{color:var(--firma); font-style:normal; font-size:10.5px}
.cierre .btn-wa{margin-top:30px}
.fine{font-weight:300; font-size:13px; color:var(--dark-soft); margin-top:26px}
.fine a{color:var(--firma); font-weight:700; text-decoration:none}
.fine a:hover{text-decoration:underline}
/* ---------- footer ---------- */
.footer{background:var(--card); border-top:1px solid var(--hair)}
.footer .wrap{max-width:var(--max); margin:0 auto; padding:34px 24px; display:flex;
  align-items:center; justify-content:space-between; gap:18px 30px; flex-wrap:wrap}
.footer .brand{display:flex; align-items:center; gap:14px}
.footer .brand img{height:22px}
.footer .brand span{font-weight:300; font-size:13px; color:var(--soft)}
.footer nav{display:flex; gap:22px; flex-wrap:wrap; font-size:13px; font-weight:600; color:var(--soft)}
.footer nav a{text-decoration:none}
.footer nav a:hover{color:var(--ink)}
.footer nav a.on{color:var(--deep); font-weight:800}
.footer .fwa{font-size:13px; font-weight:800; color:var(--deep); text-decoration:none}
.wa-float{position:fixed; right:16px; bottom:16px; z-index:60; display:inline-flex;
  background:var(--wa); color:var(--wa-ink); font:800 14px/1 var(--ui); padding:14px 18px;
  border-radius:99px; text-decoration:none; background-image:linear-gradient(180deg,#31dd76,#1fbe5c);
  box-shadow:var(--luz), 0 1px 1px rgba(6,52,26,.25), 0 8px 22px -8px rgba(6,52,26,.4)}
.wa-float:active{transform:scale(.96); transition:transform .1s ease-out}
@media(min-width:900px){ .wa-float{display:none} }
/* ============ componentes por puerta ============ */

/* --- CRM: tablero pipeline --- */
.board{background:var(--card); border:1px solid transparent; border-radius:16px; box-shadow:var(--anillo); padding:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media(max-width:640px){ .board{grid-template-columns:repeat(2,1fr)} }
.col{background:var(--bg); border:1px solid var(--hair); border-radius:12px; padding:10px; min-height:140px}
.col h6{font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--soft); display:flex; justify-content:space-between; margin-bottom:10px}
.col h6 b{color:var(--deep)}
.lc{background:var(--card); border:1px solid var(--hair); border-radius:9px; padding:9px; margin-bottom:8px; opacity:0; transform:translateY(8px)}
.lc.in{opacity:1; transform:none; transition:opacity .4s ease, transform .4s ease}
.lc .ln{font-size:12px; font-weight:800}
.lc .lm{font-size:10.5px; font-weight:500; color:var(--soft); margin-top:3px}
.lc .tagsrc{font-size:8.5px; font-weight:800; padding:3px 5px; border-radius:5px; background:#e7f6fd; color:var(--deep)}
.lc.won{border-color:#bfe9cf; background:#f4fbf6}
.lc.won .ln::after{content:' ✓'; color:#177a45}
/* --- PRESENTACIÓN --- */
.anclas{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair)}
.anclas .w{max-width:var(--max); margin:0 auto; padding:12px 24px; display:flex; gap:20px; overflow-x:auto;
  font-size:12.5px; font-weight:700; color:var(--soft); white-space:nowrap}
.anclas a{text-decoration:none}
.anclas a:hover{color:var(--deep)}
.timeline{display:grid; gap:14px; margin-top:40px}
@media(min-width:900px){ .timeline{grid-template-columns:repeat(4,1fr)} }
.tl{background:var(--card); border:1px solid transparent; border-radius:14px; padding:18px; box-shadow:var(--anillo)}
.tl .ty{font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--deep); font-variant-numeric:tabular-nums}
.tl .tt{font-size:13px; font-weight:700; margin-top:6px}
.tl .td{font-size:12px; font-weight:300; color:var(--soft); margin-top:4px}
@media(min-width:900px){ .trabajo{grid-template-columns:64px 1fr} }
.hallazgo{margin-top:12px; font-size:13px; font-weight:600; color:var(--soft); background:var(--bg);
  border-left:3px solid var(--firma); padding:10px 14px; border-radius:0 8px 8px 0; max-width:70ch}
.tresnum{display:grid; gap:14px; margin-top:40px; text-align:center}
@media(min-width:700px){ .tresnum{grid-template-columns:repeat(3,1fr)} }
.tn3{background:var(--card); border:1px solid transparent; border-radius:14px; padding:26px 18px; box-shadow:var(--anillo)}
.tn3 b{display:block; font-size:44px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1}
.tn3 span{display:block; font-size:12px; font-weight:600; color:var(--soft); margin-top:8px}
.grid18{display:grid; gap:10px; margin-top:36px; list-style:none}
@media(min-width:700px){ .grid18{grid-template-columns:repeat(3,1fr)} }
.grid18 li{background:var(--card); border:1px solid var(--hair); border-radius:10px; padding:12px 14px;
  font-size:12.5px; font-weight:700}
.grid18 li small{display:block; font-weight:300; color:var(--soft); font-size:11.5px; margin-top:3px}
.cols3{display:grid; gap:20px; margin-top:40px}
@media(min-width:900px){ .cols3{grid-template-columns:repeat(3,1fr)} }
.col3{background:var(--card); border:1px solid transparent; border-radius:14px; padding:24px; box-shadow:var(--anillo)}
.col3 h4{font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--deep); margin-bottom:12px}
.col3 ul{list-style:none; display:grid; gap:8px; font-size:13.5px; font-weight:500; color:var(--soft)}
.col3 li b{color:var(--ink)}
.pquote{font-weight:300; font-size:1.15rem; color:var(--ink); max-width:62ch; line-height:1.6}
.pquote b{font-weight:800}
/* --- "los activos son tuyos" (miedo #1 del comprador: rehén de la agencia) --- */
.tuyo{max-width:var(--max); margin:0 auto; padding:60px 24px}
.tuyo .box{background:var(--card); border:1px solid transparent; border-radius:18px;
  box-shadow:var(--anillo), 0 14px 36px -18px rgba(14,22,32,.16); padding:34px 32px; display:grid; gap:26px; align-items:center}
@media(min-width:900px){ .tuyo .box{grid-template-columns:1.1fr 1fr; gap:48px} }
.tuyo h2{margin:14px 0 0}
.tuyo p{font-weight:300; color:var(--soft); font-size:1.05rem; max-width:46ch; margin-top:16px}
.tuyo p b{color:var(--ink); font-weight:700}
.tuyo .items{display:grid; gap:12px}
.tuyo .it{display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--bg);
  border:1px solid var(--hair); border-radius:12px; font-size:14px; font-weight:700}
.tuyo .it .k{flex:1}
.tuyo .it .v{font-size:11.5px; font-weight:800; color:#177a45; background:#e8f9ef; padding:5px 10px;
  border-radius:99px; white-space:nowrap; box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent)}
/* --- chat mockups (CRM: mostrar antes que contar) --- */
.chatlist{margin-top:14px}
.chatrow{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
  padding:11px 20px; border-top:1px solid var(--hair)}
.chatrow .cn{font-weight:800; font-size:13px}
.chatrow .cp{font-size:12px; color:var(--soft); font-weight:500; max-width:26ch;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chatrow .meta{display:grid; justify-items:end; gap:4px}
.chatrow .ct{font-size:10.5px; font-weight:600; color:var(--soft)}
.chatrow .ct.old{color:#c0392b}
.chatrow .unread{background:var(--wa); color:#fff; font-size:10.5px; font-weight:800;
  border-radius:99px; padding:2px 7px}
.convo{padding:16px 20px; display:grid; gap:9px}
.bub{max-width:82%; padding:9px 12px; border-radius:11px; font-size:12.5px; font-weight:500; line-height:1.45}
.bub small{display:block; font-size:9.5px; color:var(--soft); margin-top:4px; text-align:right; font-weight:600}
.bub.in{background:var(--card); border:1px solid var(--hair); justify-self:start; color:var(--ink)}
.bub.out{background:#e8f9ef; justify-self:end; color:var(--ink)}
.bub.out small{color:#177a45}
.sysnote{font-size:10.5px; font-weight:700; color:var(--deep); background:#e7f6fd;
  border-radius:8px; padding:7px 12px; justify-self:center}
@media(min-width:900px){ .feat{grid-template-columns:56px 1fr 230px} }
@media(max-width:899px){ .feat .fui{display:none} }
/* ===== FAQ — las 5 preguntas validadas por M1 (los 5 miedos del comprador) ===== */
/* alineada a la izquierda, como .adlib, .alcance y .ritmo: con `margin:auto` la
   lista quedaba centrada a 141px del titular, que va a la izquierda — dos
   alineaciones en una sección. Es el mismo arreglo que ya se hizo en .adlib y
   que acá no había llegado. El ancho se mantiene: son filas de texto, a todo
   el ancho el «+» quedaría a un metro de la pregunta. */
.faq{max-width:820px; margin:34px 0 0; border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
/* ── las preguntas, con el idioma (2026-09-16) ───────────────────────────
   Moisés las marcó en duda, y marcó la versión «con el idioma» como que le
   gusta. Lo que cambia es el peso y el signo: **la pregunta pasa de 800 a 500**
   y crece, que es como titula Meta —chico y liviano—, y el `+` se vuelve un
   chevrón que gira. Las líneas y el espaciado ya estaban bien.
   ⚠️ No eran «cajas grises»: eso lo dije mal en el boceto y está corregido. */
.faq summary{list-style:none; cursor:pointer; padding:19px 40px 19px 0; position:relative;
  font-size:clamp(1rem,1.5vw,1.15rem); font-weight:500; letter-spacing:-.02em; line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:''; position:absolute; right:6px; top:50%;
  width:11px; height:11px; border-right:2px solid var(--soft); border-bottom:2px solid var(--soft);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease-out}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover::after{border-color:var(--deep)}
.faq summary:focus-visible{outline:2px solid var(--deep); outline-offset:3px; border-radius:4px; box-shadow:0 0 0 6px rgba(31,168,229,.22)}
.faq .a{padding:0 44px 22px 0; font-weight:300; color:var(--soft); font-size:1rem; max-width:64ch}
.faq .a b{color:var(--ink); font-weight:700}
.faq .a p+p{margin-top:11px}
.faq .a a{color:var(--deep); font-weight:700}
/* ===== ALCANCE — "con quién funciona y con quién no" (criterio-de-operador §2) ===== */
.alcance{display:grid; gap:14px; margin-top:30px}
@media(min-width:760px){ .alcance{grid-template-columns:1fr 1fr} }
.alcance .col{border-radius:14px; padding:24px 26px}
.alcance .col.si{background:var(--card); border:1px solid var(--hair)}
.alcance .col.no{background:var(--dark); color:#fff; border-color:transparent;
  box-shadow:var(--luz-osc), 0 24px 48px -28px rgba(0,0,0,.55)}
.alcance h3{font-size:1rem; font-weight:800; letter-spacing:-.01em}
.alcance .col.no h3{color:var(--firma)}
.alcance ul{list-style:none; margin-top:13px; display:grid; gap:9px}
.alcance li{font-size:13px; font-weight:600; color:var(--soft); padding-left:19px; position:relative; line-height:1.45}
.alcance .col.si li:before{content:'✓'; position:absolute; left:0; color:#177a45; font-weight:800}
.alcance .col.no li{color:#d8e3ec}
.alcance .col.no li:before{content:'—'; position:absolute; left:0; color:var(--firma)}
.alcance .nota{max-width:62ch; margin-top:22px; font-weight:300; color:var(--soft)}
.alcance .nota b{color:var(--ink); font-weight:700}
/* ===== RITMO — "qué pasa el mes 2" (criterio §11 · M1 miedo #2) ===== */
.ritmo{display:grid; gap:11px; margin-top:30px}
@media(min-width:860px){ .ritmo{grid-template-columns:repeat(4,1fr)} }
.rt{background:var(--card); border:1px solid transparent; border-radius:13px; padding:19px 20px; box-shadow:var(--anillo)}
.rt .w{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--deep)}
/* ⚠️ HIJO DIRECTO. Era `.rt b`, que matchea CUALQUIER `b` adentro de la
   tarjeta — también el que va dentro del `<p>`. En clínicas eso partía «Reporte
   con **turnos asistidos**, no formularios» en tres renglones, con la coma
   suelta al principio de una línea. Encontrado el 2026-09-17 MIRANDO la página;
   en el código no se ve. Afecta a las 8 páginas que usan `.rt`. */
.rt > b{display:block; font-size:13.5px; font-weight:800; margin-top:7px; letter-spacing:-.01em}
.rt p{font-size:12px; font-weight:300; color:var(--soft); margin-top:6px; line-height:1.5}
.rt.hi{border-color:var(--accent); background:#f8fcfe}
/* ===== .chain — el recorrido de 4 pasos con vuelta a Meta =====
   Rediseñada 2026-07-31. Antes cada paso llevaba un emoji que repetía lo que
   el label ya decía (📣 Anuncio, 🏬 Va al salón) y metía 4 paletas ajenas en
   una página de azul y gris. Y nada conectaba los pasos: se leían como cuatro
   pestañas sueltas, no como un recorrido. Ahora el conector ES el componente. */
.chain{width:100%; max-width:480px}
.chain-row{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
/* en mobile 4 columnas dejan 64px por paso y el label desborda: pasa a 2×2,
   y el conector cambia de lado según la posición */
@media(max-width:560px){
  .chain-row{grid-template-columns:repeat(2,1fr); gap:22px 26px}
  .chain-step:nth-child(2)::before, .chain-step:nth-child(2)::after{display:none}
}
.chain-step{position:relative; background:var(--card); border:1px solid transparent;
  border-radius:11px; padding:26px 8px; text-align:center; box-shadow:var(--anillo)}
.chain-step b{display:block; font-size:12px; font-weight:800; line-height:1.25}
/* el conector: línea + punta, viviendo en el gap */
.chain-step:not(:last-child)::before{content:''; position:absolute; top:50%; right:-26px;
  width:26px; border-top:2px solid #ccd8e4}
.chain-step:not(:last-child)::after{content:''; position:absolute; top:50%; right:-12px;
  width:6px; height:6px; border-top:2px solid #b9c8d6; border-right:2px solid #b9c8d6;
  transform:translateY(-50%) rotate(45deg)}
.chain-step.key{border-color:var(--accent); background:#f5fbfe}
.chain-step.key b{color:var(--deep)}
.chain-step.hit{background:var(--dark); border-color:transparent;
  box-shadow:var(--luz-osc), 0 18px 36px -20px rgba(0,0,0,.55)}
.chain-step.hit b{color:#fff}
/* la vuelta: un camino de regreso con dirección, no un corchete */
.chain-back{margin-top:12px; border:2px dashed var(--accent); border-top:none;
  border-radius:0 0 12px 12px; height:30px; position:relative}
.chain-back::after{content:''; position:absolute; left:-1px; top:-2px; width:7px; height:7px;
  border-top:2px solid var(--accent); border-left:2px solid var(--accent);
  transform:rotate(45deg) translate(-1px,1px)}
.chain-back span{position:absolute; left:50%; top:100%; transform:translate(-50%,-50%);
  background:var(--bg); padding:0 12px; font-size:11.5px; font-weight:800;
  color:var(--deep); white-space:nowrap}
.sec-b .chain-back span{background:var(--card)}
/* ===== hero de rubro: el índice de eslabones + la línea que autoriza =====
   Contesta "¿qué hacen?" arriba del pliegue (antes había que scrollear al 14%)
   y abre un segundo camino para el que no quiere escribir todavía. La línea de
   los 700k sube el "¿por qué les creo?" desde el 85% de la página. */
.eslabones-rot{font-size:12.5px; font-weight:600; color:var(--soft); margin-top:26px}
.eslabones-rot a{color:var(--deep); font-weight:800; text-underline-offset:3px}
.eslabones{display:flex; flex-wrap:wrap; gap:8px; margin-top:11px}
.eslabones a{display:inline-flex; align-items:center; gap:6px; padding:8px 12px 8px 9px;
  border:1px solid var(--hair); border-radius:99px; background:var(--card);
  font-size:12.5px; font-weight:700; color:var(--soft); text-decoration:none;
  transition:border-color .15s ease, color .15s ease}
.eslabones a i{font-style:normal; font-size:10.5px; font-weight:800; color:var(--deep);
  font-variant-numeric:tabular-nums}
.eslabones a:hover{border-color:var(--accent); color:var(--ink)}
.eslabones a:focus-visible{outline:2px solid var(--deep); outline-offset:2px}
.ben{scroll-margin-top:28px}
.panel-cred{max-width:470px; margin:16px auto 0; font-size:12.5px; font-weight:300;
  color:var(--soft); line-height:1.55; text-align:center}
.panel-cred b{color:var(--ink); font-weight:700}
/* ===== la cadena visible de momentos (variante elegida 2026-07-31) =====
   El número de cada momento cuelga en un canal a la izquierda y un hilo lo une
   con el siguiente: la página entera se lee como la cadena que el rubro vende.
   Vivía suelto en rubro-muebleria; se sube al sistema para que los rubros
   nuevos lo hereden. */
.ben{position:relative}
.ben .tagline{display:inline-flex; align-items:center; gap:16px; position:relative; z-index:1}
.ben .tagline i{font-style:normal; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex-shrink:0; border:2px solid var(--hair); border-radius:11px;
  background:var(--card); font-size:14px; font-weight:800; color:var(--deep);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}
@media(min-width:900px){
  /* El canal de 52px es del bloque de TEXTO — es donde cuelga el número y por
     donde pasa el hilo. Estaba escrito `>div:first-child`, que sólo acierta si
     el texto va primero en el markup: mueblería y automotriz lo escriben así,
     clínicas/ecommerce/inmobiliaria escriben la escena primero. En esas tres el
     padding se lo comía la escena (piezas corridas 52px, sin centrar) y el texto
     quedaba sin canal, así que el número se iba al margen y no tocaba el hilo.
     Es el mismo error que ya nos costó el zigzag: se ordena por identidad. */
  .ben>div:not(.bvis){padding-left:52px}
  .ben .tagline{margin-left:-52px}
  .ben::before{content:''; position:absolute; left:17px; top:0; bottom:0; width:2px;
    background:#dde5ee; z-index:0}
  /* ⚠️ `:first/last-of-type` matchea por ETIQUETA, no por clase: esto sólo
     acierta porque hoy los .ben son los únicos <div> de su padre (verificado en
     las 5 páginas, el cap de 74px aplica en todas). Si algún día se mete otro
     <div> hermano, los remates del hilo se rompen en silencio — pasar entonces
     a `.ben ~ .ben` y `.ben:not(:has(~ .ben))`, que van por clase. */
  .ben:first-of-type::before{top:74px}
  .ben:last-of-type::before{bottom:auto; height:74px}
  .ben.flip::before{left:calc(50% + 47px)}
  /* .suelto — dos columnas SIN cadena. Ver el bloque de abajo. */
  .ben.suelto::before{display:none}
  .ben.suelto>div:not(.bvis){padding-left:0}
  .ben.suelto .tagline{margin-left:0}
}
/* ===== .ben.suelto — el bloque de dos columnas que NO es un momento =====
   Faltaba y por eso se parcheaba a mano. `.ben` es el componente de dos
   columnas de todo el sistema, pero le viene pegada la decoración de cadena:
   el hilo `::before` y el canal de 52px donde cuelga el medallón.
   Un `.ben` solo en su padre matchea :first-of-type Y :last-of-type a la vez,
   así que dibuja un muñón de 74px que no une nada, y sin medallón el canal
   queda vacío: el tagline se va 52px a la izquierda del título.
   Así estaba el reporte de gestion.html, tapado con `style="border-top:0"`
   inline — el parche delataba el hueco. Medido y corregido el 2026-08-14.
   Usar cuando el bloque no forma parte de una secuencia numerada. */
.ben.suelto{border-top:0; padding-top:12px}
/* ===== .adlib — biblioteca de anuncios de la competencia =====
   Canónico desde 2026-07-30. Reemplaza 3 reinvenciones: madre.html (.lib/.la),
   rubro-automotriz (.lib2/.la2), rubro-muebleria (.lib3/.la3). Grid de 3 por
   defecto (pasar --adlib-cols inline si un rubro necesita 4). */
/* alineada a la izquierda y a todo el ancho, como .alcance y .ritmo: antes
   quedaba centrada a 600px bajo un titular alineado a la izquierda — tres
   alineaciones distintas en una sola sección */
.adlib{display:grid; grid-template-columns:repeat(var(--adlib-cols, 3), 1fr); gap:12px; margin:30px 0 0}
@media(max-width:760px){ .adlib{grid-template-columns:repeat(2,1fr)} }
.adlib-card{background:var(--card); border:1px solid transparent; border-radius:11px; overflow:hidden; box-shadow:var(--anillo)}
.adlib-card .t{padding:9px 12px; font-size:11px; font-weight:800; color:var(--soft); border-bottom:1px solid var(--hair)}
.adlib-card .v{aspect-ratio:5/3; background:linear-gradient(150deg,#eef4f8,#f7fafc); display:flex; align-items:center; justify-content:center; font-size:20px; overflow:hidden}
.adlib-card .v img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.08) contrast(1.05)}
/* la biblioteca ilustra un mecanismo (los anuncios vivos son públicos), no es
   una captura de la competencia real — la etiqueta lo dice, como el resto del
   sistema hace con "ejemplo" */
.adlib-nota{font-size:12.5px; font-weight:600; color:var(--soft); margin-top:12px}
/* .hook — el copy del anuncio. Faltaba en las 5 páginas y era el hueco grande:
   sin él, la tarjeta es "nombre + foto + fecha", que no se parece a un anuncio.
   En la Biblioteca de Anuncios real el texto es lo primero que se lee, y ese
   texto ES lo que el titular promete que se puede ver — qué línea está
   empujando cada competidor. Sin copy, la sección prometía algo que no mostraba. */
.adlib-card .hook{padding:10px 12px 0; font-size:12.5px; font-weight:700;
  line-height:1.35; color:var(--ink)}
.adlib-card .d{padding:9px 12px; font-size:11px; font-weight:800; display:flex; align-items:center; gap:5px}
.adlib-card .d i{width:6px; height:6px; border-radius:50%; background:#c9d5e0}
.adlib-card.viva{border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,168,229,.1)}
.adlib-card.viva .d{color:var(--deep)}
.adlib-card.viva .d i{background:var(--wa)}
/* ===== .ben — layout alternado de "momento" (imagen/texto, se invierte con
   .flip) ===== Canónico desde 2026-07-30. Era el componente MÁS repetido del
   sistema: estaba copiado en 8 páginas con deriva accidental (34px/36px de
   gap, 1.4rem/1.45rem de título) — nadie lo decidió, se fue desalineando solo.
   NUNCA redeclarar en una página — si hace falta un ajuste, se ajusta acá y
   se propaga a las 8 automáticamente. */
.ben{display:grid; gap:36px; align-items:center; padding:56px 0; border-top:1px solid var(--hair)}
@media(min-width:900px){
  .ben{grid-template-columns:1fr 1fr; gap:60px}
  /* El orden se fija por identidad, no por posición en el markup: mueblería y
     automotriz escriben el texto primero, clínicas/ecommerce/inmobiliaria la
     escena. Con `.flip .bvis{order:-1}` a secas, en las segundas no pasaba
     nada — las 5 escenas quedaban a la izquierda y el zigzag no existía. */
  .ben .bvis{order:2}
  .ben.flip .bvis{order:-1}
}
/* ── el momento alternado, con el idioma (2026-09-16) ────────────────────
   Es el componente más repetido del frente: 73 instancias en 19 páginas, y
   Moisés lo marcó en duda. El cambio es de una línea y es el mismo que ya
   aprobó dos veces —en las preguntas y en el héroe a escala Meta—:
   **el título pasa de peso 800 a 500 y crece un poco**.
   📌 Meta titula chico y liviano; 800 es el peso de un titular de campaña, no
   el de una sección. Con 73 instancias, es el cambio de tono más grande del
   sistema por línea de CSS escrita. Si no convence, se vuelve atrás acá. */
.ben h3{font-size:clamp(1.5rem,2.9vw,2rem); font-weight:500; letter-spacing:-.03em; line-height:1.15}
.ben h3 .q{color:var(--deep)}
.ben p{font-weight:300; color:var(--soft); font-size:1.03rem; margin-top:12px; max-width:46ch}
.ben p b{color:var(--ink); font-weight:700}
.ben .bvis{display:flex; justify-content:center; flex-direction:column; align-items:center}
.ben .tagline{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--deep)}
/* ===== remates de panel de hero: el hueco y su consecuencia =====
   Canónico desde 2026-08-05. Vivían sólo en rubro-clinicas; al darle a
   inmobiliaria su propio hero pasaron a estar en dos páginas, así que suben al
   sistema en vez de copiarse. */
.gapline{padding:11px 18px; background:#fdf5f3; border-bottom:1px solid var(--hair);
  font-size:12px; font-weight:700; color:#a5341f}
.bf2{padding:13px 18px; background:#fafcfe; font-size:12px; font-weight:700; color:var(--soft)}
.bf2 b{color:var(--ink)}
/* ===== .dl/.dr — lista de comprobación dentro de una escena =====
   Canónico desde 2026-08-05. Filas «etiqueta … valor/tilde», que es la forma de
   los momentos de destino en clínicas e inmobiliaria. Los dos estaban escritos
   con estilos inline; el de inmobiliaria además llevaba un `max-width:320px`
   inline sobre .bvis que dejaba esa escena al 61% de las otras. */
.comprob{display:grid; gap:0}
.comprob-fila{display:flex; justify-content:space-between; align-items:center; gap:14px;
  font-size:13px; font-weight:700; padding:13px 0; border-bottom:1px solid var(--hair)}
.comprob-fila:last-child{border-bottom:0}
.comprob-fila b{font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:99px; white-space:nowrap}
.comprob-fila b.ok{color:#177a45; background:#e8f9ef}
.comprob-fila b.mal{color:#c0392b; background:#fdeeea}
.comprob-fila.apagado{opacity:.5}
/* ===== áreas táctiles en mobile =====
   Medido en el visor de 390px: los chips de eslabones caían en 37px de alto y el
   botón flotante en 42 — abajo del mínimo de 44. En desktop no importa (hay
   puntero), así que el aumento va sólo en mobile para no engordar el hero.
   Los links DENTRO de párrafos quedan como están: WCAG los exceptúa
   explícitamente, y estirarlos a 44px rompería el interlineado del texto. */
@media(max-width:899px){
  .eslabones a{padding:12px 14px 12px 11px}
  .wa-float{padding:16px 20px}
  /* la navegación del footer son 7 links de 20px pegados: en un pulgar es una
     ruleta. Se les da alto y se separa la fila. */
  .footer nav{gap:4px 22px}
  .footer nav a{display:inline-block; padding:12px 0}
  .footer .fwa, .metodo, .fine a{display:inline-block; padding:12px 0}
  /* CTA de banda. ⚠️ Es `.conecta .b a`, con punto: el contenedor es un
     <div class="b">, no una etiqueta <b> — el nombre de clase se lee igual
     que el tag y el selector sin punto no matchea nada. */
  .conecta .b a{display:inline-block; padding:12px 0}
}
/* ===== .salon-tag — la etiqueta «ejemplo» sobre una foto de hero =====
   Canónico desde 2026-08-05. Es kit de firma (rotula que el dato es de ejemplo),
   estaba copiada idéntica en clínicas y automotriz, y inmobiliaria la usaba sin
   tenerla definida — o sea que ahí no se veía. */
.salon-tag{position:absolute; top:12px; right:12px; background:rgba(255,255,255,.92);
  padding:3px 10px; border-radius:99px; font-size:10.5px; font-weight:700; color:var(--soft)}
/* ===== .pol — el par rechazado/aprobado de políticas de anuncio =====
   Canónico desde 2026-08-03. Vivía sólo en creativo.html; baja a rubro-clínicas,
   que es donde la matriz marca "el rubro con más rechazos de anuncio". Se sube al
   sistema en vez de copiarse, que es como se rompió .vars (ver ese bloque). */
.pol{display:grid; gap:12px; margin-top:30px}
@media(min-width:820px){ .pol{grid-template-columns:1fr 1fr; gap:16px} }
.polc{background:var(--card); border:1px solid var(--hair); border-radius:14px; overflow:hidden}
.polc .hd{padding:11px 16px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--hair)}
.polc.no .hd{background:#fdf0ec; color:#a5341f}
.polc.si .hd{background:#eefaf2; color:#177a45}
.polc .bd{padding:16px; font-size:13.5px; font-weight:700; line-height:1.5}
.polc .bd mark{background:#ffe3dc; color:#a5341f; padding:1px 3px; border-radius:3px}
.polc .why{padding:0 16px 16px; font-size:11.5px; font-weight:600; color:var(--soft)}
/* ===== .vars/.vr — grilla de variantes en test (creativo A/B) =====
   Canónico desde 2026-07-30. Repetido idéntico en clínicas, e-commerce e
   inmobiliaria — solo cambiaba el color del degradé de fondo. Ese color SÍ
   varía por rubro: pisarlo con `.vr .vi{background:...}` inline en la página. */
.vars{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; max-width:480px}
.vr{background:var(--card); border:1px solid var(--hair); border-radius:12px; overflow:hidden; text-align:center}
.vr .vi{aspect-ratio:9/14; background:linear-gradient(135deg,#e8eef4,#f5f8fb); display:flex; align-items:center; justify-content:center; font-size:26px; position:relative}
/* Sin esto el aspect-ratio de arriba no manda: la <img> se renderiza a su alto
   natural y estira la tarjeta (una foto 3:4 llegaba a 1083px de alto en una caja
   que debía medir 233). Vivía en el <style> de rubro-clinicas, así que ecommerce
   e inmobiliaria usaban .vars sin ella — no se notaba porque tenían emoji en vez
   de foto, y se habría roto en silencio al ponerles fotos. */
.vr .vi img{width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.05) contrast(1.04)}
.vr .vi .fmt{position:absolute; top:6px; left:6px; font-size:11px; font-weight:800; background:rgba(14,22,32,.75); color:#fff; padding:2px 6px; border-radius:99px}
.vr .vb{padding:8px 8px 10px}
.vr .vb .hk{font-size:11px; font-weight:700; color:var(--soft); line-height:1.3; min-height:26px}
.vr .vb .ctr{font-size:13.5px; font-weight:800; margin-top:5px; font-variant-numeric:tabular-nums}
.vr.win{border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,168,229,.12)}
.vr.win .ctr{color:#177a45}
.vr.dead{opacity:.6}
.vr.dead .vb .ctr{color:#c0392b}
/* ===== .itemgrid/.item-card — grilla de inventario (catálogo, flota, stock) =====
   Canónico desde 2026-07-30. Reemplaza automotriz (.flota/.un) y muebleria
   (.amb/.am), que eran el mismo componente con nombre distinto. El color del
   degradé y el aspect-ratio de la imagen varían por rubro (pisar inline); el
   estado (`.tag`) es opcional y su texto se define en el HTML — "VENDIDA",
   "SIN STOCK", lo que pida el rubro. */
.itemgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; max-width:480px}
/* en mobile 3 columnas dejan la foto en ~110px y el nombre parte en dos líneas.
   Mismo criterio que .adlib, que ya bajaba a 2 */
@media(max-width:560px){ .itemgrid{grid-template-columns:repeat(2,1fr)} }
.item-card{background:var(--card); border:1px solid var(--hair); border-radius:11px; overflow:hidden; position:relative}
.item-card .im{aspect-ratio:4/3; background:linear-gradient(150deg,#eaf1f7,#f7fafc); display:flex; align-items:center; justify-content:center; font-size:22px; position:relative}
.item-card .im img{width:100%; height:100%; object-fit:cover; display:block}
.item-card .bd{padding:8px 9px}
.item-card .mo{font-size:12.5px; font-weight:800; line-height:1.2}
.item-card .pr{font-size:11.5px; font-weight:700; color:var(--deep); margin-top:2px; font-variant-numeric:tabular-nums}
.item-card.tag{opacity:.42}
.item-card.tag:after{content:attr(data-tag); position:absolute; top:34%; left:50%; transform:translate(-50%,-50%) rotate(-11deg);
  font-size:10.5px; font-weight:800; letter-spacing:.08em; color:#fff; background:#c0392b; padding:3px 9px; border-radius:4px}
.item-card.tag .pr{color:var(--soft)}
/* Kit de firma — el punto "conectado": mismo lenguaje que .panel .bar .live y
   .adlib-card .viva ("esto está vivo"), aplicado a cada foto de catálogo.
   No es decoración: dice que ese producto lo publica el catálogo conectado,
   no que lo cargaron a mano. Se repite igual en cualquier rubro con .itemgrid */
.item-card .im .live{position:absolute; top:8px; left:8px; display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.94); padding:3px 8px 3px 6px; border-radius:99px; font-size:10.5px; font-weight:800; color:#37424d}
.item-card .im .live i{width:6px; height:6px; border-radius:50%; background:var(--wa)}
@media(prefers-reduced-motion:no-preference){ .item-card .im .live i{animation:pulse 1.8s ease-in-out infinite} }
/* ============================================================
   TEJIDO DE ESCENA — los roles que rodean a TODA escena.
   Extraído 2026-07-31. El problema que corrige: base.css nombraba
   los componentes (.chain, .adlib, .vars, .itemgrid) pero NO las
   piezas que los envuelven, así que cada página las reinventaba:
   la leyenda de abajo existía con 4 nombres (.chain-foot,
   .itemgrid-foot, .varsfoot ×3, .dpafoot) en 2 tamaños y 3
   márgenes, y el rótulo de arriba con 1 nombre (.mvs ×3) en 2
   tamaños. Drift puro, sin criterio de diseño detrás.
   ============================================================ */

/* La leyenda DEBAJO de una escena — la frase que la cierra */
/* la especificidad de `.sec-b p` (0,1,1) le ganaba a `.escena-foot` (0,1,0) y la
   leyenda salía a 16.5px como un párrafo cualquiera — de ahí el doble selector */
.escena-foot, .sec-b .escena-foot{font-size:12.5px; font-weight:700; color:var(--soft);
  text-align:center; margin-top:14px; max-width:480px}
.escena-foot b, .sec-b .escena-foot b{color:var(--ink); font-weight:800}
/* .suelta: cuando la escena tiene un rótulo flotante abajo (ej. .chain-back) */
.escena-foot.suelta, .sec-b .escena-foot.suelta{margin-top:28px}
/* El rótulo ARRIBA de una escena — mayúsculas, para rotular un lado */
.escena-label{font-size:11px; font-weight:800; color:var(--soft);
  text-transform:uppercase; letter-spacing:.1em; text-align:center}
/* ===== .conecta — la banda de seguimiento (universal 11 del mecanismo) =====
   Va en TODA landing de rubro, tejiendo hacia crm.html. Era idéntica en 4
   páginas y en muebleria estaba reescrita con estilos inline. */
.conecta{max-width:var(--max); margin:0 auto; padding:0 24px}
.conecta .b{background:var(--bg); border:1px solid var(--hair); border-radius:14px;
  padding:20px 24px; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.conecta .b .tx{flex:1; min-width:240px; font-size:14px; font-weight:600}
.conecta .b .tx small{display:block; font-weight:300; color:var(--soft); font-size:13px; margin-top:3px}
.conecta .b a{font-size:13px; font-weight:800; color:var(--deep); text-decoration:none; white-space:nowrap}
/* ===== .escena-nota — tarjeta de apunte DENTRO de una escena =====
   El "y además..." de un momento: una observación corta que no merece
   escena propia. Estaba conflacionada con .conecta (automotriz la
   secuestraba con 2 overrides) y en muebleria escrita inline. */
.escena-nota{background:var(--card); border:1px solid var(--hair); border-radius:14px;
  padding:30px 28px; max-width:440px; font-size:13px; font-weight:600;
  color:var(--soft); line-height:1.5}
.escena-nota b{color:var(--ink); font-weight:800}
/* .panel .tot — fila de total al pie del panel: rótulo a la izquierda, número
   a la derecha. Era .camp .tot / .sales .tot, idéntica en 3 páginas de rubro. */
.panel .tot{display:flex; align-items:baseline; justify-content:space-between; padding:15px 18px; background:#fafcfe}
.panel .tot .l{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--soft)}
.panel .tot .v{font-size:18px; font-weight:800; font-variant-numeric:tabular-nums}
/* Kit de firma — la etiqueta "ejemplo" dentro de la barra de un panel.
   Antes era `em{float:right}` en cada página; con .bar en flex, va con
   margin-left:auto igual que .live */
.panel .bar em{margin-left:auto; font-style:normal; font-size:10.5px; font-weight:700; color:var(--soft)}
/* ===== .ganchos — tres piezas compitiendo por gancho, SIN foto =====
   Canónico desde 2026-08-26.
   ⚠️ Primero se usó `.vars/.vr` de base.css, que trae una caja de imagen. Sin
   fotos del rubro esa caja queda VACÍA — un placeholder disfrazado, que es lo
   mismo que el chequeo E persigue cuando la caja tiene un emoji. Lo que carga
   el argumento acá es el GANCHO y su CTR, no la foto: así que la escena se
   arma con eso y no finge una imagen que no tenemos. */
.ganchos{width:100%; max-width:440px; display:grid; gap:9px}
.gk{display:grid; grid-template-columns:1fr auto; gap:10px 14px; align-items:center;
  border:1px solid var(--hair); border-radius:12px; background:var(--card); padding:13px 15px}
.gk .tx{font-size:13.5px; font-weight:700; line-height:1.35}
.gk .fm{grid-column:1; font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--soft); margin-top:-4px}
/* ⚠️ grid-column:2 explícito. Sin él, `grid-row:1/span 2` deja que el
   auto-placement lo mande a la columna 1 y el CTR queda A LA IZQUIERDA del
   gancho — o sea, el número manda la lectura cuando el que manda es el texto. */
.gk .n{grid-column:2; grid-row:1 / span 2; font-size:15px; font-weight:800;
  color:var(--soft); font-variant-numeric:tabular-nums; white-space:nowrap}
.gk.win{border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,168,229,.1)}
.gk.win .n{color:var(--deep)}
.gk.pierde .tx, .gk.pierde .n{color:#9fb0bf}
/* ===== ESCALA MOBILE — el ritmo vertical no puede ser el de escritorio ===== */
/* ⚠️ Medido el 2026-08-26 en rubro-clinicas a 390px: la página medía 12.755px
   de alto y **1.176 de eso era padding de sección** — 76 arriba y 72 abajo en
   cada bloque, exactamente los mismos valores que en desktop. En una pantalla
   de 390 eso son casi 150px de aire entre bloque y bloque: el lector scrollea
   por vacío y la página se siente el doble de larga de lo que es.
   No había NINGUNA media query de padding en todo base.css.

   Sólo se toca el vertical. El horizontal (24px) se deja: cada escena calcula
   su ancho contra él y cambiarlo mueve la caja de todas las páginas.

   ⛔ No bajar más: por debajo de ~44px arriba el eyebrow queda pegado al borde
   del bloque anterior y se pierde de qué sección es.

   ⚠️ VA AL FINAL DEL ARCHIVO A PROPÓSITO. La primera versión quedó arriba, y
   `.footer .wrap{padding-bottom}` no aplicó nunca: misma especificidad (0,2,0)
   que la regla original, y con empate gana la que está más abajo. Es el tercer
   choque igual en este archivo — ver las notas de `.duelo-foot` y `.ftag`. */
@media(max-width:700px){
  .hero{padding:32px 24px 48px}
  .sec-a, .sec-b .wrap{padding:52px 24px 48px}
  .tuyo{padding:44px 24px}
  .conf .wrap{padding:52px 24px}
  .cierre .wrap{padding:56px 24px 52px}
  .sec-b .wrap{gap:32px}
  /* Cada `.ben` trae `padding:56px 0` — 112px que no se ven, iguales en todos
     los anchos. En una cadena de 5 eslabones son 560px de nada. A 390 la
     decoración de cadena ni existe (el hilo y el canal de 52px viven en
     min-width:900), así que acá el .ben es sólo un bloque con borde: se puede
     apretar sin romper nada. */
  .ben{padding:36px 0; gap:26px}
  /* el flotante mide 46px y vive a 16 del piso: sin esto tapa 62px del footer,
     que es justo donde está el link de WhatsApp. */
  .footer .wrap{padding-bottom:88px}
}
/* ===== .pedido — la prueba que no es un testimonio ==========================
   ⚠️ LEER ANTES DE USAR. Esto NO es un testimonio nuestro: no tenemos, y la
   doctrina (`briefs/pensamiento-diseno.md` §8) dice que no se inventan. Es un
   **pedido público de contratación** que escribió otra empresa buscando quien
   le arregle exactamente esto. Sale del corpus de 13.879 proyectos leído en
   `Meta/research/_corpus/` — 715 pedidos, uno por uno, con las citas
   verificadas contra el archivo crudo.

   POR QUÉ ES MÁS FUERTE QUE UN TESTIMONIO: un testimonio dice que somos
   buenos —y lo elegimos nosotros—. Esto dice que **el problema existe y
   alguien está pagando para resolverlo**, escrito por alguien que no nos
   conoce. Es la versión medida de los «hallazgos típicos» de la doctrina.

   ⛔ ANÓNIMO SIEMPRE. En los archivos de research los nombres se conservan
   porque son evidencia rastreable. Acá NO: son negocios reales que no pidieron
   aparecer. Se saca el nombre de la empresa, del pixel y del producto. Queda
   el rubro y el dato que hace falta para entender la escena.
   ⛔ Y NO SE RETOCA. Entre comillas va exactamente lo que escribieron, sin
   corregirles la ortografía. Si hace falta cortar, se corta con «…». */
.pedido{background:var(--card); border:1px solid var(--hair); border-left:3px solid var(--accent);
  border-radius:0 14px 14px 0; padding:20px 22px; max-width:64ch; box-shadow:var(--sh)}
.pedido .de{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--soft); display:block; margin-bottom:10px}
.pedido q{quotes:'“' '”'; font-size:15px; font-weight:400; line-height:1.62; color:var(--ink);
  display:block}
.pedido q b{font-weight:800}
.pedido .lee{margin-top:14px; padding-top:12px; border-top:1px solid var(--hair);
  font-size:12.5px; font-weight:600; color:var(--soft); line-height:1.55}
.pedido .lee b{color:var(--ink); font-weight:800}
/* ---------- .pedidos — la banda de prueba, 2-3 pedidos juntos ----------
   Un `.pedido` suelto es una anécdota. Tres del mismo rubro son un patrón, y
   ése es el argumento: «no sos el único, y no lo decimos nosotros».
   ⚠️ Máximo 3. Con más, deja de leerse y pasa a ser un muro. Elegí los que
   peguen en capas DISTINTAS del rubro — si los tres dicen lo mismo, sobran dos. */
.pedidos{display:grid; gap:16px; margin-top:30px}
@media(min-width:900px){ .pedidos{grid-template-columns:repeat(3,1fr); gap:18px} }
.pedidos .pedido{max-width:none; padding:18px 20px}
.pedidos .pedido q{font-size:14px; line-height:1.6}
.pedidos .pedido .lee{font-size:12px; margin-top:12px; padding-top:11px}
.pedidos-nota{margin-top:18px; font-size:12.5px; font-weight:600; color:var(--soft);
  max-width:72ch; line-height:1.6}
.pedidos-nota b{color:var(--ink); font-weight:800}
@media(max-width:420px){ .cifras b{font-size:1.3rem} }
/* ===== .sintomas / .sint — el beneficio, el arreglo y el dolor, en una fila ==
   Nació en `presentacion.html` y subió acá cuando `destino.html` la pidió.

   ⭐ TRES NIVELES POR FILA, y el orden es el componente:
     `b`     el beneficio DE NEGOCIO — qué cambia para él. Primero y grande.
     `.tec`  el arreglo técnico que lo hace posible — subordinado, gris.
     `.hoy`  el dolor, EN PALABRAS DEL COMPRADOR — es la prueba, no el argumento.

   ⚠️ LA PRIMERA VERSIÓN TENÍA SÓLO DOS NIVELES, y el primero era técnico
   («los eventos llegan por servidor»). Eso NO es un beneficio: es fontanería
   descripta. Moisés lo frenó dos veces el 2026-09-06 — la segunda con todas las
   letras: «marcás el dolor técnico y el beneficio para el cliente, para que
   entienda». Si alguien vuelve a poner el mecanismo arriba, está deshaciendo eso.

   ⛔ Y el dolor va A LA DERECHA y en gris. Invertido, la sección se convierte en
   una lista de miedos, que es justo lo que el operador viene sacando del set. */
/* ===== .duo-panel — dos pantallas de Meta lado a lado: la de hoy y la de después
   Nació en `presentacion.html` (Administrador de eventos) y subió acá cuando
   `recuperacion.html` la pidió para Calidad de la cuenta. Adentro va un `.panel`
   normal en cada lado; esto es sólo la grilla y los dos rótulos.
   📌 Es el molde de «el cambio» dicho por la interfaz: el lector reconoce su
   pantalla en la izquierda antes de que le expliquemos nada. */
.duo-panel{display:grid; gap:26px; margin-top:34px}
@media(min-width:900px){ .duo-panel{grid-template-columns:1fr 1fr; gap:28px} }
.duo-panel .dk{font-size:11.5px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; margin-bottom:12px}
.duo-panel .dk.pre{color:#c0392b}
.duo-panel .dk.post{color:#177a45}
/* ===== .remate — el número grande que el panel NO dice =====================
   Moisés, 2026-09-13, mirando el duo-panel y el hero: *«estos mockups como que
   se te hacen perder un poco a la vista»*.
   🔴 EL DIAGNÓSTICO: el panel muestra la evidencia y deja la conclusión a cargo
   del lector — tiene que comparar 3,1 contra 8,4, contar filas y sacar la cuenta
   solo. En las referencias que funcionan, **el número grande hace ese trabajo**.
   ⭐ LA REGLA: todo panel de esta casa termina en un `.remate`. El panel prueba;
   el remate dice qué gana. Sin él, el mockup es decoración informada.
   ⛔ El número del remate sale de las filas del panel — no se inventa aparte. */
.remate{display:grid; gap:14px 22px; align-items:center; margin-top:22px;
  padding:20px 22px; background:var(--card); border:1px solid var(--hair);
  border-left:4px solid var(--deep); border-radius:0 14px 14px 0; box-shadow:var(--sh)}
@media(min-width:640px){ .remate{grid-template-columns:auto 1fr} }
.remate .num{font-size:clamp(2.1rem,5.5vw,2.9rem); font-weight:800; letter-spacing:-.035em;
  line-height:1; color:var(--deep); font-variant-numeric:tabular-nums; white-space:nowrap}
.remate .num small{display:block; margin-top:6px; font-size:10.5px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; color:var(--soft); white-space:normal}
.remate .txt{font-size:1.02rem; font-weight:300; color:var(--soft); line-height:1.5; max-width:58ch}
.remate .txt b{color:var(--ink); font-weight:800}
/* ⚠️ EL REMATE NO SE ESTIRA A LA GRILLA. Visto en el navegador el 2026-09-13:
   a 1.150px de ancho y con el texto ya recortado, el de «164 compras» dejaba
   ~480px de nada a la derecha — se leía como una banda a medio llenar, no como
   una pieza. Con `fit-content` mide lo que necesita (623px ese, 759px el de los
   18 puntos) y vuelve a leerse como un bloque puesto a propósito.
   📌 Los que viven adentro de una columna (el del héroe, el de offline) ya
   medían bien: `max-width:100%` los deja intactos. */
@media(min-width:640px){ .remate{width:fit-content; max-width:100%} }
/* variante oscura, para heros o secciones sobre fondo claro que necesitan peso */
.remate.dark{background:var(--dark); border-color:var(--dark); border-left-color:var(--firma)}
.remate.dark .num{color:var(--firma)}
.remate.dark .num small{color:var(--dark-soft)}
.remate.dark .txt{color:var(--dark-soft)}
.remate.dark .txt b{color:#fff}
/* ===== .tablameta — el Administrador de anuncios como lo muestra la competencia
   Formato pedido por Moisés el 2026-09-13, con referencias a la vista: la tabla
   real de campañas, el total resaltado abajo, y **el número grande al costado**.

   ⚠️ QUÉ PUEDE IR ADENTRO — la línea, y no es negociable por diseño:
     ✅ un export REAL de una cuenta operada, con los nombres de campaña
        difuminados/anonimizados. Es dato del operador y es su decisión mostrarlo.
     ✅ valores de ejemplo, **rotulados como tales** (`.epig`).
     ⛔ números inventados presentados como «resultados de nuestros clientes».
        Eso es evidencia falsa para alguien que va a decidir con ella.
   📌 Mientras no haya export real, va con ejemplo y rótulo. El cambio después
   son tres líneas de HTML. */
.tablameta{display:grid; gap:26px; margin-top:30px; align-items:center}
@media(min-width:900px){ .tablameta{grid-template-columns:1.35fr 1fr; gap:34px} }
.tm-tabla{background:var(--card); border:1px solid var(--hair); border-radius:12px;
  overflow:hidden; box-shadow:var(--sh); font-variant-numeric:tabular-nums}
.tm-tabla .th, .tm-tabla .tr{display:grid; grid-template-columns:1.6fr .8fr .7fr .8fr;
  gap:10px; padding:10px 14px; align-items:center; font-size:11.5px}
.tm-tabla .th{background:#f7fafc; border-bottom:1px solid var(--hair); font-weight:800;
  color:var(--soft); font-size:10px; text-transform:uppercase; letter-spacing:.04em}
.tm-tabla .tr{border-bottom:1px solid var(--hair); font-weight:600; color:var(--soft)}
.tm-tabla .tr b{color:var(--ink); font-weight:700}
/* el nombre de campaña va difuminado: es cuenta de cliente y no se lee */
.tm-tabla .tr .nm{filter:blur(3.2px); user-select:none; color:var(--ink); font-weight:700}
.tm-tabla .tr .on::before{content:'●'; color:#177a45; font-size:8px; margin-right:5px;
  vertical-align:2px}
.tm-tabla .tot{display:grid; grid-template-columns:1.6fr .8fr .7fr .8fr; gap:10px;
  padding:13px 14px; background:#fafcfe; font-size:12px; font-weight:800; align-items:center}
.tm-tabla .tot .l{color:var(--soft); font-weight:700; font-size:11px}
/* el círculo rojo a mano, que es la firma de este formato */
.tm-tabla .tot .marca{position:relative; display:inline-block; padding:3px 9px}
.tm-tabla .tot .marca::after{content:''; position:absolute; inset:-3px -6px;
  border:2px solid #c0392b; border-radius:50%; transform:rotate(-3deg)}
.tm-lado .big{font-size:clamp(2.1rem,5.5vw,3.1rem); font-weight:800; letter-spacing:-.035em;
  line-height:1.05; color:var(--deep)}
.tm-lado .sub{margin-top:12px; font-size:1.02rem; font-weight:300; color:var(--soft);
  line-height:1.5; max-width:34ch}
.tm-lado .sub b{color:var(--ink); font-weight:800}
.tm-lado .tag{display:inline-block; margin-bottom:10px; font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.07em; color:var(--soft)}
/* ===== .credencial — el track record, con el lenguaje gráfico de Meta =======
   Moisés, 2026-09-13, mostrando cómo lo hace la competencia (capturas del
   Administrador de anuncios con el número grande al lado: «ROAS 5.49»,
   «€3.902.687,43 gasto total»): *«choca un poco con lo de no asegurar, pero hay
   que lograr un punto medio en el que mostramos resultados»*.

   ⭐ EL PUNTO MEDIO, Y ES UNA LÍNEA CLARA:
     ✅ **nuestro volumen operado** — es nuestro, no exhibe la cuenta de nadie y
        no promete nada. Es el único número con esa fuerza que sí es mostrable.
     ✅ **la ACR de SU cuenta** — la calcula Meta y sale en su diagnóstico.
     ⛔ **el resultado de un cliente** (ROAS, «multiplicamos por 5») — exhibe una
        cuenta ajena E implica promesa. Las dos cosas están prohibidas.

   📌 Y el remate da vuelta la restricción: mostrar el volumen y decir que las
   cuentas no se exhiben es, en un mercado lleno de capturas, la diferencia.
   El crédito de los 700k vivía como frase de texto en las 24 páginas y nunca
   se había graficado. */
.credencial{display:grid; gap:0; max-width:560px; margin-top:26px;
  background:var(--dark); border-radius:16px; overflow:hidden;
  box-shadow:var(--luz-osc), 0 24px 48px -28px rgba(0,0,0,.55)}
.credencial .cbar{display:flex; align-items:center; gap:9px; padding:13px 20px;
  border-bottom:1px solid var(--dark-hair); font-size:12px; font-weight:800; color:#fff}
.credencial .cbar em{margin-left:auto; font-style:normal; font-size:10.5px;
  font-weight:700; color:var(--dark-soft)}
.credencial .cbig{padding:24px 20px 20px; border-bottom:1px solid var(--dark-hair)}
.credencial .cbig b{display:block; font-size:clamp(2rem,6vw,2.9rem); font-weight:800;
  letter-spacing:-.035em; line-height:1; color:var(--firma); font-variant-numeric:tabular-nums}
.credencial .cbig span{display:block; margin-top:8px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--dark-soft)}
.credencial .crow{display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; padding:12px 20px; border-bottom:1px solid var(--dark-hair);
  font-size:12.5px; font-weight:700; color:var(--dark-soft)}
.credencial .crow b{color:#fff; font-variant-numeric:tabular-nums}
.credencial .cpie{padding:14px 20px; font-size:12px; font-weight:700; color:var(--dark-soft);
  line-height:1.5}
.credencial .cpie b{color:#fff}
/* ===== .aparato — dónde encaja esta pieza en la máquina =====================
   El mockup de las secciones de LÍMITE. Un límite no se dibuja con una lista:
   se dibuja mostrando el borde. Las cinco capas en fila, la nuestra encendida y
   las vecinas apagadas con su puerta linkeada.
   ⭐ Contesta sin decirlo la pregunta que sigue a cualquier límite: «¿y lo demás
   quién lo hace?». Nació en `medicion.html` y subió acá cuando `medicion-metodo`
   la pidió (2026-09-11).
   ⚠️ `medicion.html` es autocontenida: tiene su propia copia y hay que tocar
   las dos. Es el costo conocido de esa página. */
.aparato{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:30px}
@media(max-width:720px){ .aparato{grid-template-columns:repeat(2,1fr)} }
.ap{border:1px solid var(--hair); border-radius:12px; background:var(--card);
  padding:14px 12px; text-align:center; opacity:.5; transition:opacity .2s}
.ap:hover{opacity:.8}
.ap .n{font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--soft)}
.ap .t{font-size:13px; font-weight:800; margin-top:5px; color:var(--ink)}
.ap .g{display:block; font-size:10.5px; font-weight:700; color:var(--deep); margin-top:6px}
.ap.on{opacity:1; border-color:var(--deep); border-width:2px; background:#f5fbfe;
  box-shadow:var(--sh)}
.ap.on .n{color:var(--deep)}
.aparato-pie{margin-top:14px; font-size:12.5px; font-weight:600; color:var(--soft)}
.aparato-pie b{color:var(--ink); font-weight:800}
/* ===== .ganas — seis beneficios en grilla, una línea cada uno ===============
   Reemplaza a `.sintomas` cuando la página YA mostró el antes/después en un
   panel. Ahí las filas de tres niveles repiten con texto lo que la imagen ya
   dijo: en `medicion-metodo` eran ~400 palabras diciendo lo mismo que los dos
   paneles de arriba. Con esto son ~70.
   📌 Una línea de beneficio arriba, una de «hoy» abajo y en rojo. Nada más:
   el arreglo técnico vive en la sección de método, y las citas en la banda de
   prueba. Cada cosa en su lugar y una sola vez. */
.ganas{display:grid; gap:12px; margin-top:30px}
@media(min-width:640px){ .ganas{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){ .ganas{grid-template-columns:repeat(3,1fr)} }
.gc{background:var(--card); border:1px solid var(--hair); border-radius:13px;
  padding:16px 18px; border-left:3px solid #177a45}
.gc b{display:block; font-size:14px; font-weight:800; color:var(--ink); line-height:1.4}
.gc span{display:block; margin-top:7px; font-size:11.5px; font-weight:700; color:#c0392b}
.gc span::before{content:'✕ '; font-weight:800}
.sintomas{margin-top:46px; border-top:1px solid var(--hair)}
.sint{display:grid; gap:8px 26px; padding:19px 0; border-bottom:1px solid var(--hair)}
@media(min-width:760px){ .sint{grid-template-columns:1fr 1.15fr; align-items:start} }
.sint b{font-size:15.5px; font-weight:800; color:var(--ink); line-height:1.45}
.sint .tec{display:block; margin-top:7px; font-size:12.5px; font-weight:600;
  color:var(--soft); line-height:1.55}
.sint .tec::before{content:'→ '; color:var(--accent); font-weight:800}
.sint .hoy{font-size:13px; font-weight:300; color:var(--soft); line-height:1.62}
.sint .hoy .et{display:block; font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.07em; color:#c0392b; margin-bottom:5px}
.sint .hoy q{quotes:'“' '”'; font-weight:500; color:var(--ink)}
/* ===== .cuatro — el lector se clasifica solo ================================
   REEMPLAZA a las tres tarjetas de rubro que había en la madre (tiendas ·
   clínicas · inmobiliarias). Ésas dejaban afuera a los otros diecisiete rubros
   y —medido— a los **87 de 152 anunciantes del corpus que no caen en ninguno**.
   Con 20 rubros y sub-rubros adentro de cada uno, nombrarlos es una carrera que
   se pierde siempre.

   ⭐ LA IDEA: que se reconozca por **lo que cambia su máquina**, no por su
   industria. Son los interruptores del perfilador girados hacia el lector: en
   vez de que nosotros lo clasifiquemos, se clasifica él. Una mueblería y una
   concesionaria contestan igual —y por eso son la misma página—; un ecommerce
   de suplementos contesta distinto en dos, y por eso no.

   ⚠️ SON CUATRO Y NO MÁS. El perfilador tiene nueve interruptores; acá entran
   los cuatro que cambian el trabajo de verdad. Con nueve esto es un formulario
   y nadie lo lee. */
.cuatro{display:grid; gap:14px; margin-top:32px}
@media(min-width:820px){ .cuatro{grid-template-columns:1fr 1fr; gap:16px} }
.cq{background:var(--card); border:1px solid var(--hair); border-radius:16px;
  padding:22px 24px; box-shadow:var(--sh)}
.cq b{display:block; font-size:16px; font-weight:800; letter-spacing:-.01em; line-height:1.35}
.cq p{margin-top:10px; font-size:13.5px; font-weight:400; color:var(--soft); line-height:1.6}
.cq p em{font-style:normal; color:var(--ink); font-weight:700}
.cq .qn{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent); margin-bottom:9px}
.rub-min{margin-top:26px; font-size:13px; font-weight:600; color:var(--soft)}
.rub-min a{color:var(--deep); font-weight:800; text-decoration:none;
  border-bottom:1px solid rgba(14,117,168,.3)}
.rub-min a:hover{border-bottom-color:var(--deep)}
/* ===== .jobs — los cuatro trabajos, dichos por lo que él gana ===============
   ANTES: cuatro bloques de prosa (249 palabras) explicando Conversions API,
   event_id, EMQ y etiquetas. Explicaba el CÓMO. Nadie compra una API: compra
   que sus ventas aparezcan en el reporte.

   ⭐ LA REGLA DE LA TARJETA: un chip con el mecanismo (dos palabras, arriba y
   chico) · una frase con lo que se lleva (grande) · **un widget que muestra el
   cambio** · el hallazgo de campo en el pie. El texto bajó a ~90 palabras y
   cada tarjeta se entiende mirándola.

   ⛔ LOS NÚMEROS SALEN DE LOS PANELES DE LA MISMA PÁGINA — 126→164 del
   duo-panel, 3,1→8,4 de la calidad de coincidencia. Ninguna tarjeta estrena
   una cifra propia: si el widget necesita un número que el panel no muestra,
   el widget se hace sin número. */
.jobs{display:grid; gap:14px; margin-top:34px}
@media(min-width:860px){ .jobs{grid-template-columns:1fr 1fr; gap:16px} }
.job{background:var(--card); border:1px solid var(--hair); border-radius:16px;
  padding:20px 22px 18px; box-shadow:var(--sh); display:flex; flex-direction:column}
.job .jn{display:inline-flex; align-items:center; gap:7px; font-size:10.5px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; color:var(--accent)}
.job .jn i{font-style:normal; color:#b8c8d6}
.job > b{display:block; font-size:1.08rem; font-weight:800; letter-spacing:-.025em;
  line-height:1.35; margin-top:9px}
.job .jw{margin:16px 0 13px; background:var(--bg); border:1px solid var(--hair);
  border-radius:12px; padding:15px 16px; flex:1 0 auto; display:flex; align-items:center}
.job .jm{font-size:12.5px; font-weight:600; color:var(--soft); line-height:1.5}
.job .jm em{font-style:normal; color:var(--ink); font-weight:800}
/* 01 · dos barras: lo que reportaba el navegador y lo que reporta con servidor */
/* ⚠️ EL GAP Y EL GROSOR SALIERON DE MIRAR LA GRILLA EN EL NAVEGADOR, no de
   elegir un número lindo: con barras de 10px la tarjeta 01 quedaba con 73px de
   aire adentro del widget contra 32 de la vecina —las filas del grid se igualan
   a la más alta— y se veía a medio llenar. A 13px de barra el aire quedó parejo. */
.jb{display:grid; grid-template-columns:64px 1fr 34px; gap:18px 10px; align-items:center; width:100%}
.jb span{font-size:10.5px; font-weight:800; color:var(--soft); letter-spacing:.02em}
.jb .track{height:13px; background:#dde7ef; border-radius:7px; overflow:hidden}
.jb .fill{display:block; height:100%; background:#b8c8d6; border-radius:5px}
.jb .on .fill{background:linear-gradient(90deg,var(--accent),var(--deep))}
.jb .val{font-size:15px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; text-align:right}
.jb .on ~ .val{color:var(--deep)}
/* 02 · dos eventos, una compra */
.jd{display:grid; grid-template-columns:1fr 16px 1fr; gap:10px; align-items:center; width:100%}
.jd .pair{display:grid; gap:6px}
.jd .eq{font-size:15px; font-weight:800; color:#b8c8d6; text-align:center}
.jd .ev{display:block; background:var(--card); border:1px dashed #c8d6e2; border-radius:8px;
  padding:7px 9px; font-size:11px; font-weight:800; color:var(--soft); line-height:1.25}
.jd .ev small{display:block; font-size:9.5px; font-weight:600; opacity:.8; margin-top:2px}
.jd .ok{border:1px solid #177a45; border-left:3px solid #177a45; color:#177a45; background:#f0f8f3}
/* 03 · la barra de calidad de coincidencia, con la marca de dónde venía */
.jg{width:100%}
.jg .lbl{font-size:10.5px; font-weight:800; color:var(--soft); letter-spacing:.02em}
.jg .gt{position:relative; height:14px; background:#dde7ef; border-radius:7px; margin:13px 0 11px}
.jg .gf{display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--accent),var(--deep))}
.jg .mk{position:absolute; top:-4px; width:2px; height:19px; background:#8fa3b4; border-radius:2px}
.jg .gv{display:flex; align-items:baseline; gap:8px; font-variant-numeric:tabular-nums}
.jg .gv s{font-size:13px; font-weight:700; color:#8fa3b4}
.jg .gv em{font-style:normal; font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.02em}
.jg .gv small{font-size:11px; font-weight:700; color:var(--soft)}
/* 04 · cuál de las tres vende — sin cifras: la columna es el punto */
.jr{display:grid; gap:7px; width:100%}
.jr .rw{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
  background:var(--card); border:1px solid var(--hair); border-radius:8px; padding:7px 10px}
.jr .nm{height:8px; border-radius:4px; background:#dde7ef}
.jr .rw:nth-child(2) .nm{width:78%} .jr .rw:nth-child(3) .nm{width:64%}
.jr .tg{font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#a4b4c2}
.jr .win{border-color:#177a45; border-left:3px solid #177a45; background:#f0f8f3}
.jr .win .nm{background:#bfe0cd}
.jr .win .tg{color:#177a45}
/* ===== .off-grid / .cimi — «las ventas fuera de la web», mostrada ===========
   ANTES: dos párrafos (104 palabras) explicando que la venta vuelve desde el
   CRM. Era la única parte de la página donde el argumento se contaba y no se
   veía — justo el argumento que más cuesta creer.

   ⭐ Se muestra con la pantalla de Meta que el lector nunca abrió: el conjunto
   de eventos offline con las ventas del chat, del teléfono y del mostrador
   entrando con su plata. El remate es **la suma de las tres filas** (no una
   cifra nueva): $84.000 + $36.500 + $120.000.

   Y los cimientos pasan de párrafo a cuatro renglones con tilde: es una lista
   de cosas incluidas, y una lista se lee como lista. */
.off-grid{display:grid; gap:30px}
@media(min-width:940px){ .off-grid{grid-template-columns:1fr 1.15fr; gap:44px; align-items:center} }
.cimi{display:grid; gap:9px; margin-top:20px; list-style:none}
@media(min-width:760px){ .cimi{grid-template-columns:1fr 1fr; gap:10px 14px} }
.cimi li{display:grid; grid-template-columns:20px 1fr; gap:11px; align-items:center;
  background:var(--card); border:1px solid var(--hair); border-radius:10px;
  padding:12px 15px; font-size:13.5px; font-weight:700; letter-spacing:-.01em}
.cimi li i{font-style:normal; width:20px; height:20px; border-radius:50%; background:#177a45;
  color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center}
.cimi li small{display:block; font-size:11.5px; font-weight:500; color:var(--soft); margin-top:2px}