/* ============================================================
   champe.agency — hoja de estilos de las páginas internas
   ------------------------------------------------------------
   La home (`/` y `/en/`) sigue con su CSS embebido: tiene blobs,
   globo, marquee y canvas que no viven en ningún otro lado.
   Estas páginas son documentos de texto, así que se sirven con
   una hoja aparte y liviana.

   Los tokens, la nav y el footer están copiados literales del
   fuente `web-boceto-v5.html` para que las dos superficies se vean
   iguales. Si alguien cambia la nav de la home, hay que cambiarla
   acá también — está anotado en `web/README.md`.
============================================================ */

/* ── TOKENS (copiados del fuente) ──────────────────────────── */
:root {
  --negro:   #000;
  --blanco:  #fff;
  --magenta: #FF0069;
  --mint:    #00FFB2;
  --cyan:    #00FFFF;
  --g100:    #f5f5f5;
  --g300:    #aaaaaa;
  --g500:    #666666;
  --g700:    #333333;
  --g800:    #1a1a1a;
  --g900:    #0d0d0d;

  --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;

  --mw:  1280px;
  --px:  clamp(24px, 7vw, 96px);

  --xs: 8px;  --s: 16px;  --m: 28px;
  --l: 48px;  --xl: 80px; --xxl: 130px;

  --f-xs:   clamp(.65rem,  .62rem + .2vw,  .75rem);
  --f-sm:   clamp(.8rem,   .76rem + .2vw,  .9rem);
  --f-base: clamp(.95rem,  .9rem  + .25vw, 1.05rem);
  --f-lg:   clamp(1.1rem,  1rem   + .6vw,  1.4rem);
  --f-xl:   clamp(1.4rem,  1.1rem + 1.4vw, 2rem);
  --f-2xl:  clamp(2rem,    1.5rem + 2.5vw, 3.2rem);
  --f-3xl:  clamp(3rem,    2rem   + 5vw,   6.5rem);
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--sans);
  font-size: var(--f-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
em { font-style: normal; }           /* el brand system no usa itálica */
img { max-width: 100%; height: auto; }

.wrap {
  max-width: var(--mw);
  margin-inline: auto;
  padding-inline: var(--px);
}
.eyebrow {
  font-family: var(--mono);
  font-size: var(--f-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--g500);
  display: block;
  margin-bottom: var(--s);
}
.eyebrow.accent { color: var(--magenta); }
.eyebrow.mint   { color: var(--mint); }
.eyebrow.cyan   { color: var(--cyan); }

/* Foco visible: estas páginas se navegan con teclado más que la home. */
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* ── REVEAL ────────────────────────────────────────────────── */
.r {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1);
}
.r.d1 { transition-delay: .06s; }
.r.d2 { transition-delay: .14s; }
.r.d3 { transition-delay: .22s; }
.r.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .r { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── LOGO ──────────────────────────────────────────────────── */
.brand-logo {
  height: 24px;
  width: auto;
  display: block;
  fill: currentColor;
  transition: color .25s;
}
.nav-logo { display: inline-flex; align-items: center; color: var(--blanco); }
.nav-logo:hover { color: var(--magenta); }
.f-logo { display: inline-flex; align-items: center; color: var(--blanco); }
.f-logo .brand-logo { height: 20px; }

/* ── NAV (copiada del fuente) ──────────────────────────────── */
.gnav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,8,8,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  max-width: calc(100% - 32px);
  transition: border-radius .3s ease, background .3s ease;
}
.gnav.open { border-radius: 18px; }
.gnav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
}
.gnav .brand-logo { height: 20px; }
.gnav-links { display: flex; gap: 26px; }
.gnav-link {
  font-family: var(--mono);
  font-size: var(--f-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.gnav-flip { display: block; overflow: hidden; height: 1.6em; }
.gnav-flip-col {
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.gnav-flip-col span { display: block; height: 1.6em; line-height: 1.6em; white-space: nowrap; }
.gnav-flip-col span:first-child { color: var(--g300); }
.gnav-flip-col span:last-child  { color: var(--blanco); }
.gnav-link:hover .gnav-flip-col  { transform: translateY(-50%); }
.gnav-link[aria-current="page"] .gnav-flip-col span:first-child { color: var(--blanco); }
.gnav-cta {
  font-family: var(--mono);
  font-size: var(--f-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  color: var(--blanco);
  transition: border-color .2s, color .2s;
  white-space: nowrap;
}
.gnav-cta:hover { border-color: var(--magenta); color: var(--magenta); }
.gnav-burger {
  display: none;
  width: 34px; height: 34px;
  place-items: center;
  background: none;
  border: none;
  color: var(--g300);
  cursor: pointer;
}
.gnav-burger svg { width: 22px; height: 22px; }
.gnav-burger .ico-close { display: none; }
.gnav.open .gnav-burger .ico-open  { display: none; }
.gnav.open .gnav-burger .ico-close { display: block; }
.gnav-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  pointer-events: none;
  transition: max-height .3s ease, opacity .3s ease, padding-top .3s ease;
}
.gnav.open .gnav-mobile {
  max-height: 420px;
  opacity: 1;
  padding-top: 18px;
  pointer-events: auto;
}
.gnav-mobile a {
  font-family: var(--mono);
  font-size: var(--f-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g300);
  transition: color .2s;
}
.gnav-mobile a:hover { color: var(--blanco); }
.gnav-mobile .gnav-cta { color: var(--blanco); }
.lang-sw {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--f-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lang-btn {
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--g500);
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 5px 12px;
  transition: background .25s, color .25s;
}
.lang-btn:hover { color: var(--blanco); }
.lang-btn.on { background: var(--blanco); color: var(--negro); }
@media(max-width:900px){
  .gnav { width: calc(100% - 32px); }
  .gnav-row { width: 100%; justify-content: space-between; }
  .gnav-links, .gnav-row .gnav-cta, .gnav-row .lang-sw { display: none; }
  .gnav-burger { display: grid; }
}

/* ── ENCABEZADO DE PÁGINA ──────────────────────────────────── */
.pg-head {
  padding-top: calc(var(--xxl) + 40px);
  padding-bottom: var(--xl);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}
/* Un blob apagado: la home tiene el gradiente animado, acá alcanza con
   una sola mancha estática que evite que el encabezado sea negro plano. */
.pg-head::before {
  content: "";
  position: absolute;
  top: -180px; right: -140px;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,0,105,.20), transparent 62%);
  filter: blur(50px);
  pointer-events: none;
}
.pg-head > .wrap { position: relative; z-index: 1; }

.crumbs {
  font-family: var(--mono);
  font-size: var(--f-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g500);
  margin-bottom: var(--m);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.crumbs li + li::before { content: "/"; color: var(--g700); margin-right: 10px; }
.crumbs a { color: var(--g500); transition: color .2s; }
.crumbs a:hover { color: var(--blanco); }
.crumbs [aria-current="page"] { color: var(--g300); }

.pg-h1 {
  font-family: var(--sans);
  font-weight: 300;
  /* Más chico que el hero de la home a propósito: acá abajo del H1 hay
     contenido que tiene que entrar en la misma pantalla. Con --f-3xl el
     titular de "paid media" se comía los 812px de un teléfono entero. */
  font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.6rem);
  line-height: .96;
  letter-spacing: -.035em;
  text-transform: lowercase;
  max-width: 17ch;
}
.pg-h1 .h1-cat,
.sg-h1 .h1-cat {
  display: block;
  font-family: var(--mono);
  font-weight: 300;
  font-size: var(--f-sm);
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: lowercase;
  color: var(--magenta);
  margin-bottom: var(--s);
}
.pg-h1 em { color: var(--g500); }
.pg-lead {
  margin-top: var(--m);
  max-width: 58ch;
  font-size: var(--f-lg);
  font-weight: 300;
  line-height: 1.5;
  color: var(--g300);
}

/* ── SECCIONES DE CUERPO ───────────────────────────────────── */
.pg-sec { padding-block: var(--xl); }
.pg-sec + .pg-sec { border-top: 1px solid rgba(255,255,255,.06); }
.pg-sec-h {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--f-xl);
  letter-spacing: -.02em;
  text-transform: lowercase;
  margin-bottom: var(--l);
  max-width: 22ch;
}
.pg-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--l) var(--xl);
  align-items: start;
}
.pg-prosa p { max-width: 62ch; color: var(--g300); font-weight: 300; }
.pg-prosa p + p { margin-top: var(--m); }
.pg-prosa b, .pg-prosa strong { color: var(--blanco); font-weight: 500; }
/* Listas en prosa —la usa /privacidad/—: guion mono en vez de viñeta. */
.pg-prosa ul { max-width: 62ch; list-style: none; }
.pg-prosa li { position: relative; padding-left: 1.75em; color: var(--g300); font-weight: 300; }
.pg-prosa li + li { margin-top: var(--m); }
.pg-prosa li::before { content: "—"; position: absolute; left: 0; font-family: var(--mono); color: var(--g500); }
.pg-prosa ul + p, .pg-prosa p + ul { margin-top: var(--m); }
.pg-prosa a { color: var(--magenta); text-decoration: underline; text-underline-offset: .2em; }

/* Lista de entregables */
.entregables { list-style: none; display: grid; gap: 1px; background: rgba(255,255,255,.08); }
.entregables li { background: var(--negro); padding: var(--m) 0; }
.entregables li:first-child { padding-top: 0; }
.entregables h3 {
  font-family: var(--mono);
  font-size: var(--f-sm);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: lowercase;
  color: var(--blanco);
  margin-bottom: var(--xs);
}
.entregables h3::before { content: "→ "; color: var(--mint); }
.entregables p { color: var(--g300); font-weight: 300; max-width: 60ch; }

/* Bloque destacado (por qué nosotros) */
.destacado {
  border-left: 2px solid var(--magenta);
  padding-left: var(--m);
  max-width: 68ch;
  font-size: var(--f-lg);
  font-weight: 300;
  line-height: 1.55;
  color: var(--g100);
}

/* ── FAQ ───────────────────────────────────────────────────── */
.faq { display: grid; gap: 1px; background: rgba(255,255,255,.08); max-width: 78ch; }
.faq-item { background: var(--negro); padding: var(--m) 0; }
.faq-item:first-child { padding-top: 0; }
.faq-q {
  font-size: var(--f-lg);
  font-weight: 300;
  letter-spacing: -.01em;
  margin-bottom: var(--xs);
}
.faq-a { color: var(--g300); font-weight: 300; }

/* ── GRILLA DE SERVICIOS (hub y "otros servicios") ─────────── */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}
.svc-card {
  background: var(--negro);
  padding: var(--m);
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  min-height: 210px;
  transition: background .25s;
}
.svc-card:hover { background: var(--g900); }
.svc-card .svc-n {
  font-family: var(--mono);
  font-size: var(--f-xs);
  letter-spacing: .18em;
  color: var(--g700);
}
.svc-card:hover .svc-n { color: var(--magenta); }
.svc-card h2, .svc-card h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--f-lg);
  letter-spacing: -.02em;
  text-transform: lowercase;
}
.svc-card p {
  color: var(--g300);
  font-weight: 300;
  font-size: var(--f-sm);
  margin-top: auto;
}
.svc-card .svc-go {
  font-family: var(--mono);
  font-size: var(--f-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g500);
  margin-top: var(--s);
  transition: color .2s;
}
.svc-card:hover .svc-go { color: var(--mint); }

/* ── CIERRE / CTA ──────────────────────────────────────────── */
.pg-cta {
  padding-block: var(--xxl);
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}
.pg-cta::before {
  content: "";
  position: absolute;
  bottom: -260px; left: -120px;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(0,255,178,.14), transparent 62%);
  filter: blur(60px);
  pointer-events: none;
}
.pg-cta > .wrap { position: relative; z-index: 1; }
.pg-cta-title {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--f-2xl);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-transform: lowercase;
  max-width: 18ch;
}
.pg-cta-title em { color: var(--g500); }
.pg-cta-body { margin-top: var(--m); max-width: 52ch; color: var(--g300); font-weight: 300; }
.btn-linea {
  display: inline-block;
  margin-top: var(--l);
  font-family: var(--mono);
  font-size: var(--f-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 30px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  transition: border-color .2s, color .2s, background .2s;
}
.btn-linea:hover { border-color: var(--magenta); color: var(--magenta); }
.volver {
  display: inline-block;
  margin-top: var(--l);
  font-family: var(--mono);
  font-size: var(--f-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g500);
  transition: color .2s;
}
.volver:hover { color: var(--blanco); }

/* ── NOTAS (/notas/) ────────────────────────────────────────
   Las notas usan el mismo molde que servicios e industrias. Lo
   único propio es la línea de fecha, el resumen de arriba y la
   lista de fuentes del pie. Todo lo demás (pg-head, pg-cols,
   entregables, faq, svc-grid) se reutiliza tal cual.
============================================================ */
.nota-meta {
  margin-top: var(--m);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s);
  font-family: var(--mono);
  font-size: var(--f-xs);
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--g500);
}
.nota-meta .eyebrow { margin: 0; color: var(--mint); }

/* El resumen de tres líneas: lo primero que lee una persona apurada
   y lo primero que levanta un motor generativo. */
.nota-resumen { list-style: none; display: grid; gap: var(--s); max-width: 68ch; }
.nota-resumen li {
  position: relative;
  padding-left: var(--m);
  color: var(--g100);
  font-size: var(--f-lg);
  font-weight: 300;
  line-height: 1.5;
}
.nota-resumen li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--magenta);
}

/* Fuentes: texto plano, medio y fecha. No se enlaza lo que no se verificó. */
.nota-fuentes { list-style: none; display: grid; gap: var(--xs); max-width: 72ch; }
.nota-fuentes li {
  position: relative;
  padding-left: var(--m);
  color: var(--g300);
  font-weight: 300;
  font-size: var(--f-sm);
}
.nota-fuentes li::before {
  content: "·";
  position: absolute;
  left: var(--xs);
  color: var(--g500);
}
.nota-fuentes-pie {
  margin-top: var(--m);
  max-width: 62ch;
  color: var(--g500);
  font-size: var(--f-xs);
  font-weight: 300;
}

/* Enlaces al árbol de servicios desde el pie de una nota. */
.nota-svc { display: flex; flex-wrap: wrap; gap: var(--s) var(--m); margin-top: var(--m); }
.nota-svc .volver { margin-top: 0; }

/* ── FOOTER (copiado del fuente) ───────────────────────────── */
#footer {
  padding: var(--m) 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--m);
}
.f-logo {
  font-family: var(--mono);
  font-size: var(--f-sm);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: lowercase;
}
.f-cities { display: flex; gap: var(--l); }
.f-city {
  font-family: var(--mono);
  font-size: var(--f-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g500);
}
.f-copy {
  font-family: var(--mono);
  font-size: var(--f-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g700);
}
.f-social { display: flex; gap: var(--m); }
.f-social a {
  font-family: var(--mono);
  font-size: var(--f-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g500);
  transition: color .2s ease;
}
.f-social a:hover, .f-social a:focus-visible { color: var(--magenta); }

@media(max-width:820px){
  .pg-cols { grid-template-columns: 1fr; }
  :root { --xxl: 90px; --xl: 56px; }
  .f-cities { gap: var(--m); }
}

/* ============================================================
   EL PANEL POR DENTRO  (sólo /servicios/posicionamiento-seo-geo/)
   ------------------------------------------------------------
   Cuatro pantallas del panel de posicionamiento reconstruidas en
   markup, no en imágenes: nítidas en retina, livianas, y se
   corrigen editando texto. El HTML lo arma `panel_visual.py`.

   Tres estados y nada más — la misma regla que el panel real:
     mint     = medido / activo
     amarillo = falta medir, o el período es parcial
     magenta  = bloqueado
   Ninguno se comunica sólo con color: siempre hay texto al lado.
============================================================ */
.pg-sec--panel { padding-block: var(--xl); }
.pg-panel-lead {
  color: var(--g300);
  font-weight: 300;
  max-width: 68ch;
  margin-bottom: var(--xl);
}
/* ── LA FICHA: una pantalla, su nombre y su texto ───────────────
   El rótulo va ARRIBA de la pantalla, no abajo. Un encabezado
   rotula lo que le sigue: con cuatro pantallas seguidas, ponerlo
   abajo hacía que cada texto pareciera hablar de la de abajo.
   El riel —número grande y hairline de altura completa— es la
   región común: todo lo que está a su derecha pertenece a esa
   pantalla. Reemplaza al border-top que separaba justo lo que
   había que agrupar.
   El chrome nuevo va en blanco y gris. Mint, amarillo y magenta
   siguen significando medido / falta medir / bloqueado y no salen
   de adentro del mockup.
─────────────────────────────────────────────────────────────── */
.pnl-fig {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  column-gap: var(--m);
  row-gap: var(--s);
  margin-bottom: var(--xxl);
}
.pnl-fig:last-of-type { margin-bottom: 0; }

/* `span 2` y no `1 / -1`: sin filas explícitas, `-1` colapsa a una
   sola fila, el riel queda del alto del encabezado y el sticky se
   queda sin recorrido. Falla en silencio y se ve casi bien. */
.pnl-fig-rail {
  grid-column: 1;
  grid-row: 1 / span 2;
  border-right: 1px solid rgba(255,255,255,.12);
  padding-right: var(--s);
}
.pnl-fig-n {
  position: sticky;
  top: 88px;                 /* alto de la .gnav fija más aire */
  display: block;
  font-family: var(--mono);
  font-size: var(--f-xl);
  font-weight: 100;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--g500);
  font-variant-numeric: tabular-nums;
}

.pnl-fig-h { grid-column: 2; }
.pnl-fig-t {
  font-family: var(--mono);
  font-size: var(--f-base);
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: lowercase;
  color: var(--blanco);
}
.pnl-fig-l {
  margin-top: var(--xs);
  max-width: 46ch;
  font-size: var(--f-lg);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--g100);
}

.pnl-fig-body { grid-column: 2; display: grid; gap: var(--m); min-width: 0; }
.pnl-shot     { min-width: 0; }
.pnl-fig-txt  { display: grid; gap: var(--m); min-width: 0; }
.pnl-fig-p    { max-width: 62ch; color: var(--g300); font-weight: 300; }

/* Pantalla ancha: el texto va abajo. Las notas casi tocan la
   pantalla porque apuntan a ella; el párrafo respira. */
.pnl-fig--full .pnl-fig-body { gap: 14px; }

/* Pantalla baja: sobra ancho, así que el texto va al costado. */
.pnl-fig--rail .pnl-fig-body {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--m);
}

/* ── Notas: el texto que apunta a un punto de la pantalla ────── */
.pnl-notas { list-style: none; display: grid; gap: 10px; }
.pnl-fig--full .pnl-notas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s); }
.pnl-notas li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: var(--f-sm);
  font-weight: 300;
  line-height: 1.45;
  color: var(--g300);
}
/* Cuadrado y gris, no círculo de color: no se puede confundir con
   un .pnl-dot, que sí comunica estado. */
.pnl-notas .pnl-nota-n,
.pnl-shot .pnl-mark {
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--blanco);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
}

/* La chincheta sobre la pantalla. Los selectores van prefijados
   con .pnl-shot a propósito: adentro del mockup hay reglas de
   descendencia (.pnl-score span, entre otras) que le ganan en
   especificidad y le pisan display, color y tamaño. Sin el
   prefijo la chincheta sale gris de 9px y no se oculta en mobile. */
.pnl-shot .pnl-anchor { position: relative; }
.pnl-shot .pnl-mark {
  position: absolute;
  top: -9px; left: -9px;
  z-index: 3;
  background: var(--g900);
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 0 0 3px var(--g900);
}
.pnl-shot .pnl-mark--tr { left: auto; right: -9px; }
/* Sobre un elemento chico —una pastilla, una etiqueta, un prompt— una marca
   clavada en la esquina le tapa una letra: la caja mide 18 px y el elemento
   tiene 4 px de padding. Verificado en render: "rutina activa" perdía la "a"
   y "2 de 3 observaciones" perdía el 2. Estas dos variantes la sacan afuera,
   al costado y centrada, sin pisar nada. */
.pnl-shot .pnl-mark--fuera-tl {
  top: 50%; bottom: auto; left: -26px; right: auto;
  transform: translateY(-50%);
}
.pnl-shot .pnl-mark--fuera-tr {
  top: 50%; bottom: auto; right: -26px; left: auto;
  transform: translateY(-50%);
}
.pnl-shot .pnl-mark--bl { top: auto; bottom: -9px; }
.pnl-shot .pnl-mark--br { top: auto; bottom: -9px; left: auto; right: -9px; }

/* Abajo de 1180 las tarjetas y filas del mockup se estrechan y la
   chincheta pisa texto. Se va: la lista numerada sigue completa. */
@media(max-width:1180px){
  .pnl-shot .pnl-mark { display: none; }
}
/* El riel se pliega: el número queda arriba del título, quieto. */
@media(max-width:1020px){
  .pnl-fig { grid-template-columns: 1fr; row-gap: 12px; }
  .pnl-fig-rail {
    grid-column: 1; grid-row: auto;
    border-right: 0; padding-right: 0;
  }
  .pnl-fig-n { position: static; font-size: var(--f-lg); }
  .pnl-fig-h, .pnl-fig-body { grid-column: 1; }
  .pnl-fig--rail .pnl-fig-body { grid-template-columns: 1fr; gap: 14px; }
}
@media(max-width:820px){
  .pnl-fig { margin-bottom: var(--xl); }
  .pnl-fig--full .pnl-notas { grid-template-columns: 1fr; gap: 10px; }
}

/* ── La ventana ─────────────────────────────────────────────── */
.mockup--pnl {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  overflow: hidden;
  background: var(--g900);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.mockup--pnl .mockup-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mockup--pnl .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mockup--pnl .dot.r { background: #ff5f56; }
.mockup--pnl .dot.y { background: #ffbd2e; }
.mockup--pnl .dot.g { background: #27c93f; }
.mockup--pnl .mockup-url {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--g500);
  letter-spacing: .04em;
}
.pnl-body { padding: var(--m); }
.pnl-kicker,
.pnl-nav-t,
.pnl-block-t,
.pnl-met-l,
.pnl-kpi-l,
.pnl-score span,
.pnl-proc-t {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g500);
  display: block;
}
.pnl-kicker { margin-bottom: var(--s); }

/* ── Pantalla A · la grilla ─────────────────────────────────── */
.pnl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--xs); }
@media(max-width:820px){ .pnl-grid { grid-template-columns: 1fr; } }
.pnl-card {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pnl-card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pnl-site {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: -.01em;
}
.pnl-score { text-align: right; }
.pnl-score { flex: none; max-width: 15ch; }
.pnl-score b {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  display: block;
  white-space: nowrap;
}
.pnl-score b i { font-style: normal; font-size: 11px; color: var(--g500); }
.pnl-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.pnl-pill {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--g300);
}
.pnl-pill.on { border-color: rgba(0,255,178,.4); color: var(--mint); }
.pnl-dom { font-family: var(--mono); font-size: 10px; color: var(--g500); }
.pnl-mets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pnl-met-v {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 300;
  display: block;
  margin-top: 2px;
}
/* "sin medir" se escribe con letra de texto, no de número: si va en mono y
   alineado con las cifras, se lee como una cifra. */
.pnl-met-v.nd {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--g500);
  font-style: normal;
}
/* En teléfono las tres métricas en fila dejan las etiquetas partidas en dos
   líneas y los valores desalineados. Pasan a filas etiqueta/valor. */
@media(max-width:560px){
  .pnl-mets { grid-template-columns: 1fr; gap: 2px; }
  .pnl-met {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s);
  }
  .pnl-met-v { margin-top: 0; }
}
.pnl-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--g300);
  line-height: 1.4;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 10px;
}
.pnl-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--g500); }
.pnl-alert.ok    .pnl-dot { background: var(--mint); }
.pnl-alert.amber .pnl-dot { background: #FFFF00; animation: pnlPulse 2.6s ease-in-out infinite; }
.pnl-alert.red   .pnl-dot { background: var(--magenta); animation: pnlPulse 2.6s ease-in-out infinite; }
.pnl-card-f {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.pnl-ghost {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--g300);
}
.pnl-perm .pnl-switch { margin-left: var(--s); }
.pnl-switch {
  width: 26px;
  height: 14px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  position: relative;
  margin-left: auto;
  flex: none;
  transition: background .3s ease;
}
.pnl-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--g300);
  transition: transform .3s ease, background .3s ease;
}
/* El interruptor de modo es la acción más frecuente de esta pantalla.
   Mostrarlo quieto no dice lo que hace. */
.pnl-sw--anima { animation: pnlSwBg 6s ease-in-out infinite; }
.pnl-sw--anima::after { animation: pnlSwKnob 6s ease-in-out infinite; }

/* ── Pantalla B · un sitio ──────────────────────────────────── */
.pnl-site-body { display: grid; grid-template-columns: 190px 1fr; }
@media(max-width:820px){ .pnl-site-body { grid-template-columns: 1fr; } }
.pnl-aside {
  border-right: 1px solid rgba(255,255,255,.06);
  padding: var(--s);
  display: grid;
  gap: 14px;
  align-content: start;
}
@media(max-width:820px){
  .pnl-aside { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
}
.pnl-ident { display: flex; gap: 8px; align-items: center; }
.pnl-ini {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--magenta);
  color: var(--negro);
  font-family: var(--mono);
  font-size: 13px;
  flex: none;
}
.pnl-ident > span { display: grid; min-width: 0; }
.pnl-ident b { font-family: var(--mono); font-size: 12px; font-weight: 400; }
.pnl-ident > span > span {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--g500);
  letter-spacing: .04em;
}
.pnl-nav-g { display: grid; gap: 3px; }
.pnl-nav-t { margin-bottom: 3px; }
.pnl-nav-i {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--g300);
  padding: 4px 6px;
  border-left: 2px solid transparent;
}
.pnl-nav-i.on {
  background: rgba(255,255,255,.04);
  border-left-color: var(--magenta);
  color: var(--blanco);
}
.pnl-nav-n { font-family: var(--mono); font-size: 9px; color: var(--g500); }
.pnl-nav-n.amber { color: #FFFF00; }
.pnl-main { padding: var(--s); }
.pnl-main-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s);
  flex-wrap: wrap;
  margin-bottom: var(--s);
}
.pnl-main-h .pnl-nav-t { margin: 0; }
.pnl-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--g300);
}
.pnl-tag.amber { border-color: rgba(255,255,0,.35); color: #FFFF00; }
.pnl-tag.mint  { border-color: rgba(0,255,178,.35); color: var(--mint); }
.pnl-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--xs); }
@media(max-width:820px){ .pnl-two { grid-template-columns: 1fr; } }
.pnl-block {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  padding: 14px;
}
.pnl-block-t { margin-bottom: 12px; }
.pnl-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pnl-kpi-v {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 300;
  display: block;
  line-height: 1.1;
}
/* Sin comparación válida no va un guion: un guion se lee como "no cambió",
   que es una afirmación distinta de "no hay contra qué comparar". */
.pnl-kpi-d {
  font-size: 10px;
  color: var(--g500);
  display: block;
  margin-top: 2px;
}
.pnl-acum { margin-bottom: 12px; }
.pnl-spark svg { width: 100%; height: 40px; display: block; }
/* Un mes medido es un punto, no una línea. El tramo que todavía no existe va
   punteado y se dibuja solo: es la espera, no una tendencia. */
.pnl-spark-base { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.pnl-spark-next {
  stroke: rgba(0,255,178,.35);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  stroke-dashoffset: 0;
  animation: pnlDash 3s linear infinite;
}
.pnl-spark-p { fill: var(--mint); opacity: 0; animation: pnlPoint .5s ease .4s forwards; }
.pnl-proc {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--g500);
  margin-top: 12px;
  line-height: 1.7;
}

/* Posiciones: la marca rankea y la categoría no tiene una sola impresión.
   Ese contraste es el diagnóstico de casi toda marca que llega. */
.pnl-block--pos { margin-top: var(--xs); }
.pnl-block--pos .pnl-main-h { margin-bottom: 10px; }
.pnl-pos { display: grid; gap: 1px; background: rgba(255,255,255,.06); }
.pnl-pos-row {
  background: var(--g900);
  display: grid;
  grid-template-columns: 1fr 10ch 16ch;
  gap: var(--s);
  align-items: baseline;
  padding: 9px 0;
}
@media(max-width:820px){
  .pnl-pos-row { grid-template-columns: 1fr auto; }
  .pnl-pos-row .pnl-intent { display: none; }
}
.pnl-term { font-size: 12px; font-weight: 300; }
.pnl-intent {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g500);
}
.pnl-pos-v { font-family: var(--mono); font-size: 14px; text-align: right; }
.pnl-pos-v.nd {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--g500);
  text-align: right;
}

/* ── Pantalla C · observaciones de IA ───────────────────────── */
.pnl-prop {
  height: 4px;
  background: rgba(255,255,255,.08);
  margin-bottom: var(--s);
  overflow: hidden;
}
.pnl-prop-f {
  display: block;
  height: 100%;
  width: 66.6%;
  background: var(--mint);
  transform-origin: left;
  animation: pnlFill 1.6s cubic-bezier(.16,1,.3,1) .2s both;
}
.pnl-geo { display: grid; gap: 1px; background: rgba(255,255,255,.08); }
.pnl-geo-row {
  background: var(--g900);
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: var(--s);
  align-items: center;
  padding: 12px 14px;
}
@media(max-width:820px){
  .pnl-geo-row { grid-template-columns: 1fr; gap: 4px; }
}
.pnl-engine { font-family: var(--mono); font-size: 11px; color: var(--g300); }
.pnl-prompt { font-size: 12px; color: var(--blanco); font-weight: 300; }
.pnl-state {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  white-space: nowrap;
}
.pnl-geo-row.ok  .pnl-state { color: var(--mint); }
.pnl-geo-row.red .pnl-state { color: var(--magenta); }
.pnl-geo-row.nd  { opacity: .55; }
.pnl-geo-row.nd .pnl-state,
.pnl-geo-row.nd .pnl-prompt { color: var(--g500); }

/* ── Pantalla D · permisos y procedencia ────────────────────── */
.pnl-perms { display: grid; gap: 1px; background: rgba(255,255,255,.08); }
.pnl-perm {
  background: var(--g900);
  display: flex;
  align-items: center;
  gap: var(--s);
  padding: 11px 14px;
  font-size: 12px;
  color: var(--g300);
}
.pnl-fijo {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--g500);
  border: 1px solid rgba(255,255,255,.12);
  padding: 2px 6px;
}
.pnl-perm-g {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g500);
  margin-left: auto;
}
.pnl-perm.fijo    .pnl-switch { background: rgba(0,255,178,.35); }
.pnl-perm.fijo    .pnl-switch::after { transform: translateX(12px); background: var(--mint); }
.pnl-perm.pedido  .pnl-switch { background: rgba(0,255,178,.35); }
.pnl-perm.pedido  .pnl-switch::after { transform: translateX(12px); background: var(--mint); }
.pnl-perm.pedido { color: var(--blanco); }
/* La cascada: estos dos se encienden porque el de arriba los necesita. */
.pnl-perm.cascada .pnl-switch { animation: pnlSwBgCasc 6s ease-in-out infinite; }
.pnl-perm.cascada .pnl-switch::after { animation: pnlSwKnobCasc 6s ease-in-out infinite; }
.pnl-perm.cascada:nth-of-type(3) .pnl-switch,
.pnl-perm.cascada:nth-of-type(3) .pnl-switch::after { animation-delay: .35s; }
.pnl-proc-box {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  padding: 14px;
  margin-top: var(--xs);
}
.pnl-proc-box .pnl-proc { margin-top: 6px; }
.pnl-proc-t { margin-bottom: 4px; }

/* ── Animaciones ────────────────────────────────────────────── */
@keyframes pnlPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes pnlDash  { to { stroke-dashoffset: -14; } }
@keyframes pnlPoint { to { opacity: 1; } }
@keyframes pnlFill  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pnlSwBg {
  0%, 45%   { background: rgba(255,255,255,.12); }
  55%, 100% { background: rgba(0,255,178,.35); }
}
@keyframes pnlSwKnob {
  0%, 45%   { transform: translateX(0);    background: var(--g300); }
  55%, 100% { transform: translateX(12px); background: var(--mint); }
}
@keyframes pnlSwBgCasc {
  0%, 30%  { background: rgba(255,255,255,.12); }
  40%, 90% { background: rgba(0,255,178,.35); }
  100%     { background: rgba(255,255,255,.12); }
}
@keyframes pnlSwKnobCasc {
  0%, 30%  { transform: translateX(0);    background: var(--g300); }
  40%, 90% { transform: translateX(12px); background: var(--mint); }
  100%     { transform: translateX(0);    background: var(--g300); }
}

/* Quien pidió menos movimiento ve las cuatro pantallas en su estado final:
   la línea dibujada, la barra llena y los interruptores encendidos. */
@media (prefers-reduced-motion: reduce) {
  .pnl-alert .pnl-dot,
  .pnl-sw--anima,
  .pnl-sw--anima::after,
  .pnl-perm.cascada .pnl-switch,
  .pnl-perm.cascada .pnl-switch::after,
  .pnl-spark-next,
  .pnl-spark-p,
  .pnl-prop-f {
    animation: none !important;
  }
  .pnl-spark-p { opacity: 1; }
  .pnl-sw--anima,
  .pnl-perm.cascada .pnl-switch { background: rgba(0,255,178,.35); }
  .pnl-sw--anima::after,
  .pnl-perm.cascada .pnl-switch::after { transform: translateX(12px); background: var(--mint); }
}


/* ============================================================
   PÁGINA DE PRODUCTO — posicionamiento seo y geo  (prefijo sg-)
   ------------------------------------------------------------
   Esta es la única página del sitio con layout propio. Los otros
   seis servicios, industrias y notas siguen con el molde de dos
   columnas de más arriba, que no se toca.

   Por qué existe: la página vendía como un documento —seis
   bloques del mismo peso, la oferta en prosa y el primer botón a
   4.500 px de scroll—. Acá el hero y el analizador son una sola
   unidad, la oferta son objetos y el ritmo lo marca la
   alternancia de bandas negro/g900, no un hairline por sección.

   Reglas duras heredadas del panel y del brand system:
   · Ningún estado se comunica sólo con color.
   · Sobre banda --g900 no se usa --g500 para texto chico: da
     3,39:1 y no pasa AA. Los eyebrow van en magenta o cyan.
   · Todo va prefijado con sg-: ninguna de estas reglas puede
     alcanzar a otra página del sitio.
   Diseño: UX UI AI, 10/09/2026.
============================================================ */
/* ============================================================
   PÁGINA DE PRODUCTO  (sólo /servicios/posicionamiento-seo-geo/
   y /en/services/seo-ai-visibility/)
   ------------------------------------------------------------
   Los otros seis servicios siguen con el molde `.pg-cols`: dos
   columnas de prosa, seis veces. Acá no, porque acá lo que se
   vende es un producto y la página tiene que parecerse a él.

   El vocabulario no es nuevo: son las celdas, los hairlines y
   los números tabulares del mockup del panel, aplicados a la
   página entera. Mismos tokens, misma nav, mismo footer, misma
   familia de componentes — distinto arreglo.

   RITMO
   Las bandas alternan negro / g900 y ESO es el separador entre
   secciones. No se dibujan hairlines de sección salvo dos casos
   marcados (.sg-regla y .sg-sec--otros). Si alguien agrega una
   sección, tiene que respetar la alternancia o el pulso se rompe.

   CONTRASTE — dos reglas duras sobre banda g900
     · --g500 sobre --g900 = 3,39:1. NO se usa para texto.
       Las etiquetas de sección van en --magenta (5,05:1) o
       --cyan (16,7:1), nunca en el gris por defecto del eyebrow.
     · --g700 sobre --g900 = 1,54:1. Sólo hairlines, nunca texto.
============================================================ */

/* ── Bandas y encabezado de sección ─────────────────────────── */
.sg-sec        { padding-block: var(--xl); }
.sg-sec--alt   { background: var(--g900); }
.sg-sec--otros { border-top: 1px solid rgba(255,255,255,.08); }

.sg-sec-h { margin-bottom: var(--l); }
.sg-h2 {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--f-xl);
  line-height: 1.1;
  letter-spacing: -.025em;
  text-transform: lowercase;
  max-width: 20ch;
}
.sg-h2 em { color: var(--g500); }   /* 32px = texto grande, 3:1 alcanza */

/* El encabezado del bloque del panel se alinea con el resto de la
   página. `.pg-sec--panel` sólo existe acá, así que el override no
   se le escapa a nadie. */
.pg-sec--panel .pg-sec-h {
  font-size: var(--f-xl);
  letter-spacing: -.025em;
  margin-bottom: var(--s);
  max-width: 20ch;
}
.pg-sec--panel .pg-panel-lead { margin-bottom: var(--l); }

/* ── Celdas: la grilla con hairline por gap ──────────────────
   Mismo truco que .svc-grid, .entregables, .faq y .pnl-pos: el
   `gap` de 1px deja ver el fondo del contenedor y eso ES la línea.
   Sobre g900 hay que subir el alfa o la línea desaparece. */
.sg-cells {
  display: grid;
  gap: 1px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  list-style: none;
}
.sg-cell {
  background: var(--negro);
  padding: var(--m);
  display: flex;
  flex-direction: column;
  gap: var(--xs);
}
.sg-sec--alt .sg-cells { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.sg-sec--alt .sg-cell  { background: var(--g900); }

/* ── 1 · Hero + analizador: una sola unidad ──────────────────
   El hero y el analizador comparten contenedor, blob y fondo. Sin
   costura entre los dos, el campo de entrada del producto entra en
   la primera pantalla: es el patrón de landing de producto.

   DEPENDENCIA FRÁGIL: los overrides de `.anz` de acá abajo asumen
   que `analizador.css` le da a `.anz` un `border-top`, un fondo
   radial propio y `padding-block: var(--xl)`. Si eso cambia allá,
   la costura vuelve a aparecer acá. Anotado en web/README.md. */
.sg-top { position: relative; overflow: hidden; }
.sg-top::before {
  content: "";
  position: absolute;
  top: -200px; right: -160px;
  width: 720px; height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,0,105,.22), transparent 62%);
  filter: blur(60px);
  pointer-events: none;
}
.sg-top > * { position: relative; z-index: 1; }

.sg-top .anz {
  border-top: 0;
  background: none;
  padding-top: 0;
  padding-bottom: var(--xl);
}
.sg-top .anz-head { margin-bottom: var(--m); }
/* Dos display distintos en la misma pantalla compiten. El h1 es Sans
   a 5,4rem; el del analizador baja a 2rem y se queda en Mono, que es
   la voz de etiqueta del producto. */
.sg-top .anz-h2 { font-size: var(--f-xl); }
/* La nav es fixed: sin esto el encabezado del bloque queda debajo. */
#analizador { scroll-margin-top: 96px; }

.sg-hero {
  padding-top: calc(var(--xxl) + 32px);
  padding-bottom: var(--l);
}
.sg-hero .crumbs { margin-bottom: var(--m); }
.sg-h1 {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 5.4rem);
  line-height: .94;
  letter-spacing: -.04em;
  text-transform: lowercase;
  max-width: 15ch;
}
/* Igual que en .pg-h1: el <em> es la segunda idea, va más apagado.
   El magenta de la página vive en h1-cat, en el botón primario y en
   los eyebrow de sección — un solo foco por pantalla. */
.sg-h1 em { color: var(--g500); }
.sg-sub {
  margin-top: var(--m);
  max-width: 52ch;
  font-size: var(--f-lg);
  font-weight: 300;
  line-height: 1.5;
  color: var(--g300);
}

/* ── Botones ─────────────────────────────────────────────────
   Rectangulares, como el .anz-btn que está justo debajo y como
   manda el brand system. El `.btn-linea` con forma de píldora se
   queda para las otras seis páginas; acá la página entera es
   cuadrada y mezclar las dos formas se vería como un descuido.

   El primario va NEGRO sobre magenta: 5,45:1. Blanco sobre magenta
   da 3,85:1 y no pasa AA — y además el brand system especifica
   texto negro (typography.json → cta_boton). */
.sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: var(--f-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 16px 30px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.sg-btn--1 { background: var(--magenta); border-color: var(--magenta); color: var(--negro); }
.sg-btn--1:hover { background: transparent; color: var(--magenta); }
.sg-btn--2 { border-color: rgba(255,255,255,.28); color: var(--blanco); }
.sg-btn--2:hover { border-color: var(--blanco); }
.sg-cta-row { display: flex; flex-wrap: wrap; gap: var(--xs); margin-top: var(--l); }

/* ── Chips de prueba ─────────────────────────────────────────
   Son hechos ("sin registro", "resultado en vivo"), no estados.
   Por eso el cuadradito va en gris y no en mint: mint significa
   "medido" en esta página y no se presta para decoración. */
.sg-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--xs);
  margin-top: var(--l);
  padding-top: var(--m);
  border-top: 1px solid rgba(255,255,255,.10);
}
.sg-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--f-xs);
  letter-spacing: .06em;
  text-transform: lowercase;
  color: var(--g300);
  border: 1px solid rgba(255,255,255,.16);
  padding: 7px 12px;
}
.sg-chip::before {
  content: "";
  width: 6px; height: 6px;
  flex: none;
  background: var(--g500);
}

/* ── 3 · El problema: tres celdas ────────────────────────────
   Sin numerar: tres problemas no son una secuencia. Los números
   se reservan para "cómo funciona", donde el orden es real. */
.sg-tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-tri-t {
  font-family: var(--mono);
  font-size: var(--f-base);
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: lowercase;
  color: var(--blanco);
}
.sg-tri-p {
  color: var(--g300);
  font-weight: 300;
  font-size: var(--f-sm);
  max-width: 34ch;
}

/* ── 5 · Qué incluye: seis celdas ────────────────────────────
   La flecha mint es la misma de `.entregables h3::before`: la
   lista de entregables de las otras seis páginas y esta grilla se
   leen como la misma familia aunque el layout sea distinto. */
.sg-feat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-feat-t {
  font-family: var(--mono);
  font-size: var(--f-sm);
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: var(--blanco);
}
.sg-feat-t::before { content: "→ "; color: var(--mint); }
.sg-feat-p {
  color: var(--g300);
  font-weight: 300;
  font-size: var(--f-sm);
  max-width: 32ch;
}

/* ── 6 · Cómo funciona: cuatro pasos ─────────────────────────
   Sin celdas y con gap grande: es la pausa entre dos grillas
   densas y el clímax. El riel es un border-top por paso, no una
   línea absoluta detrás de los números — así sobrevive al wrap
   sin cuentas. Al plegarse a una columna queda vertical, que es
   exactamente lo que hace `.pnl-fig` a los 1020. */
.sg-pasos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--m);
}
.sg-paso {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: var(--s);
  display: grid;
  gap: var(--xs);
  align-content: start;
}
.sg-paso-n {
  font-family: var(--mono);
  font-size: var(--f-xl);
  font-weight: 100;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--g500);
  font-variant-numeric: tabular-nums;
}
.sg-paso-t {
  font-family: var(--mono);
  font-size: var(--f-base);
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: lowercase;
  color: var(--blanco);
  margin-top: var(--xs);
}
.sg-paso-p {
  color: var(--g300);
  font-weight: 300;
  font-size: var(--f-sm);
  max-width: 28ch;
}

/* ── 7 · La regla ────────────────────────────────────────────
   La única sección con hairline arriba Y abajo, la única con
   padding xxl y la única con wash cyan. El peso sale de la
   estructura y la escala, no de un fondo saturado.

   El cyan es el neón de la paleta que NO significa un estado en
   esta página: mint = medido, amarillo = falta medir, magenta =
   bloqueado. Usar cualquiera de esos tres acá contaminaría el
   lenguaje del panel. */
.sg-regla {
  position: relative;
  overflow: hidden;
  padding-block: var(--xxl);
  border-block: 1px solid rgba(255,255,255,.12);
}
.sg-regla::before {
  content: "";
  position: absolute;
  top: 50%; right: -160px;
  width: 620px; height: 620px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(0,255,255,.13), transparent 62%);
  filter: blur(60px);
  pointer-events: none;
}
.sg-regla > .wrap { position: relative; z-index: 1; }
.sg-regla-t {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1.14;
  letter-spacing: -.03em;
  max-width: 21ch;
  color: var(--blanco);
}
/* Subrayado, no cambio de color: el énfasis sobrevive en escala de
   grises y para quien no distingue el magenta. */
.sg-regla-t b {
  font-weight: 300;
  border-bottom: 2px solid var(--magenta);
}
.sg-regla-p {
  margin-top: var(--m);
  max-width: 56ch;
  color: var(--g300);
  font-weight: 300;
}

/* ── 8 · FAQ compacta ────────────────────────────────────────
   <details> nativo: sin JS, navegable por teclado de fábrica, y
   el contenido sigue en el DOM para el FAQPage del JSON-LD.
   El marcador es un glifo (+ / –), no un color ni una rotación. */
.sg-faq {
  max-width: 82ch;
  border-top: 1px solid rgba(255,255,255,.14);
}
.sg-faq-i { border-bottom: 1px solid rgba(255,255,255,.14); }
.sg-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--m);
  padding: var(--s) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--f-lg);
  font-weight: 300;
  letter-spacing: -.01em;
  color: var(--blanco);
  transition: color .2s;
}
.sg-faq-q::-webkit-details-marker { display: none; }
.sg-faq-q:hover { color: var(--magenta); }
.sg-faq-q::after {
  content: "+";
  font-family: var(--mono);
  font-size: var(--f-lg);
  font-weight: 300;
  line-height: 1;
  color: var(--g300);
  flex: none;
}
.sg-faq-i[open] .sg-faq-q::after { content: "–"; }
.sg-faq-a {
  padding-bottom: var(--m);
  max-width: 68ch;
  color: var(--g300);
  font-weight: 300;
}

/* ── Cortes ──────────────────────────────────────────────────
   Los cinco del sitio y ninguno nuevo: 1180 y 1020 los usa el
   panel, 900 es donde la nav pasa a hamburguesa, 820 es donde
   `.pg-cols` se pliega y --xxl/--xl se achican, 560 es teléfono. */
@media(max-width:1020px){
  .sg-feat  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--l) var(--m); }
}
@media(max-width:900px){
  /* Tres tarjetas no se pliegan a dos: quedaría una huérfana y en
     una grilla de hairlines la celda vacía se ve como un error. */
  .sg-tri { grid-template-columns: 1fr; }
}
@media(max-width:560px){
  .sg-feat  { grid-template-columns: 1fr; }
  .sg-pasos { grid-template-columns: 1fr; gap: var(--m); }
  .sg-btn   { flex: 1 1 100%; }   /* botones a lo ancho, primario arriba */
  .sg-cell  { padding: var(--s) var(--m); }
}

/* Nada de lo nuevo se mueve: no hay animaciones propias. El reveal
   `.r` ya está contemplado en el @media de arriba de esta hoja. */