/* Narrative Center — design system del tema.
   Fuente de verdad: "Narrative Center web redesign/DESIGN-SYSTEM.md".
   Sin border-radius, sin box-shadow, sin gradientes (única excepción: punto 7px del panel oscuro). */

:root {
  --nc-bg:            #FAFAF9;
  --nc-ink:           #0F0F0E;
  --nc-ink-dark:      #131312;
  --nc-text:          #3A3A36;
  --nc-text-2:        #4A4A45;
  --nc-muted:         #6E6E68;
  --nc-muted-2:       #8A8A83;
  --nc-faint:         #A0A099;
  --nc-line:          #E4E3DE;
  --nc-line-soft:     #EDECE7;
  --nc-line-strong:   #C9C8C2;
  --nc-surface:       #F5F4F0;
  --nc-hover:         #F3F2EE;
  --nc-accent:        #2F6F7E;
  /* feedback de error del form — token propio, no está en DESIGN-SYSTEM §1; contraste 6.4:1 */
  --nc-error:         #A03A2E;

  --nc-on-dark:       #F2F1ED;
  --nc-on-dark-2:     #D6D5CE;
  --nc-on-dark-3:     #B4B3AC;
  --nc-on-dark-muted: #8C8C84;
  --nc-on-dark-line:  #2C2C29;

  --nc-sans: 'Archivo', Helvetica, Arial, sans-serif;
  --nc-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --nc-max:      1240px;
  --nc-gutter:   40px;
  --nc-header-h: 76px;

  --nc-ease: cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 1100px) { :root { --nc-gutter: 32px; } }
@media (max-width: 820px)  { :root { --nc-gutter: 24px; } }

/* ---- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; font-synthesis: none; }
body {
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--nc-ink); color: var(--nc-bg); }
img { max-width: 100%; height: auto; display: block; }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--nc-accent);
  outline-offset: 3px;
}

h1 { text-wrap: balance; }
p  { text-wrap: pretty; }

/* ---- Layout -------------------------------------------------------------- */
.nc-wrap { max-width: var(--nc-max); margin: 0 auto; padding: 0 var(--nc-gutter); }
.nc-main { padding-top: var(--nc-header-h); }
.nc-rule-top { border-top: 1px solid var(--nc-line); }

.nc-hairgrid {
  display: grid;
  gap: 1px;
  background: var(--nc-line);
  border: 1px solid var(--nc-line);
}
.nc-hairgrid > * { background: var(--nc-bg); margin: 0; }

/* ---- Tipografía utilitaria ------------------------------------------------ */
.nc-eyebrow {
  font-family: var(--nc-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--nc-muted); margin: 0; font-weight: 400;
}
/* Etiqueta lateral de sección (Visión / Nuestro propósito): a 11px y en gris se leía como nota al
   pie y no como rótulo de la sección. Modificador, no cambio de la base: el resto de los eyebrows
   del sitio (Contacto) sigue siendo la etiqueta chica del sistema. "Nuestra metodología" en las
   páginas por público pasó a usar este mismo modificador (pedido del cliente, +3px) en vez de
   inventar un tamaño nuevo — coherencia con Visión/Nuestro propósito de la home. */
.nc-eyebrow--seccion { font-size: 14px; font-weight: 500; color: var(--nc-ink); }
.nc-lead  { font-size: 20px; line-height: 1.5; color: var(--nc-text); max-width: 34ch; }
/* 19px solo en escritorio (pedido del cliente); ≤1100px vuelve a 17px — ver bloque responsive.
   La medida se mide en caracteres, así que 62ch sigue dando la misma línea cómoda con el cuerpo
   más grande (~590px de ancho, entra en la columna de 860px de .nc-labeled sin desbordar). */
.nc-body  { font-size: 19px; line-height: 1.72; color: var(--nc-text-2); max-width: 62ch; }
.nc-meta  { font-family: var(--nc-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--nc-faint); }
/* .nc-num: utilitaria del sistema (mono chico para numeración). Hoy sin uso en el sitio — las
   filas de servicios pasaron de número a check — se conserva junto a .nc-meta, que tampoco tiene
   uso y también es primitiva tipográfica. */
.nc-num   { font-family: var(--nc-mono); font-size: 11px; color: var(--nc-faint); }
.nc-manifesto { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.4; letter-spacing: -.015em; font-weight: 400; max-width: 32ch; }

/* ---- Header fijo ---------------------------------------------------------- */
.nc-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nc-header-h);
  background: rgba(250,250,249,.88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--nc-line);
  display: flex; align-items: center;
}
.nc-header .nc-wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nc-brand { display: flex; align-items: center; gap: 12px; }
.nc-brand img { width: 26px; height: 26px; }
.nc-brand span {
  font-family: var(--nc-mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 500; color: var(--nc-ink);
}

/* Nav — clase duplicada de core sube especificidad a 0-3-0: igualarla (gotcha wp:navigation) */
.nc-nav { display: flex; align-items: center; gap: 34px; }
.nc-nav a,
.nc-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
  font-family: var(--nc-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--nc-muted); transition: color .25s;
}
.nc-nav a:hover,
.nc-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  color: var(--nc-ink);
}
.nc-nav__cta.nc-nav__cta {
  border: 1px solid var(--nc-ink); padding: 10px 20px; color: var(--nc-ink);
  transition: background .25s, color .25s;
}
.nc-nav__cta.nc-nav__cta:hover { background: var(--nc-ink); color: var(--nc-bg); }

/* ---- Ítem del nav con submenú ("Áreas de trabajo") -------------------------- */
/* Link + botón: el texto navega, el chevron despliega (ver patterns/header-nav.php).
   El ítem toma el alto COMPLETO del header (no un padding aproximado) para que su borde
   inferior coincida exactamente con el del header: así el panel, anclado a top:100%, arranca
   pegado a la línea y el puntero nunca cruza una franja sin hover — sin eso el submenú
   parpadea al bajar hacia él. */
.nc-nav__item { position: relative; display: flex; align-items: center; gap: 8px; }
.nc-nav__item--sub { height: var(--nc-header-h); }
.nc-nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 4px; cursor: pointer;
  color: var(--nc-muted); transition: color .25s;
}
.nc-nav__toggle:hover { color: var(--nc-ink); }
.nc-nav__toggle svg { display: block; transition: transform .25s var(--nc-ease); }
.nc-nav__item--sub[data-open="true"] .nc-nav__toggle svg { transform: rotate(180deg); }

/* Panel: fondo sólido + hairline de 1px, sin radius ni sombra (design system).
   Anclado a la DERECHA del ítem: el nav vive pegado al borde derecho y con left:0 un panel
   de ~340px se salía del viewport en pantallas chicas de escritorio. */
.nc-nav__sub {
  display: none;
  position: absolute; top: 100%; right: 0; z-index: 1;
  min-width: 320px; max-width: 360px;
  background: var(--nc-bg); border: 1px solid var(--nc-line);
  padding: 8px 0;
}
.nc-nav__item--sub[data-open="true"] > .nc-nav__sub { display: block; }
/* Hover SOLO en escritorio con puntero real: es un atajo, nunca el único acceso — en táctil
   y teclado el estado lo pone el botón (data-open).
   :focus-within queda como fallback SIN JS (recorrido con Tab), y se apaga con html[data-js]:
   con JS el foco lo maneja front.js, y si esta regla siguiera activa Escape no podría cerrar
   el panel mientras el foco sigue dentro del ítem (el toggle también es parte del ítem). */
@media (hover: hover) and (min-width: 821px) {
  .nc-nav__item--sub:hover > .nc-nav__sub { display: block; }
  html:not([data-js]) .nc-nav__item--sub:focus-within > .nc-nav__sub { display: block; }
}
/* Archivo, no mono en versalitas: son nombres largos (hasta 42 caracteres) y en uppercase
   con letter-spacing el panel se volvía un bloque ilegible de tres líneas por ítem. */
.nc-nav__sub a {
  display: block; padding: 13px 22px;
  font-family: var(--nc-sans); font-size: 15px; line-height: 1.35;
  letter-spacing: 0; text-transform: none; color: var(--nc-text);
  transition: color .25s;
}
.nc-nav__sub a:hover { color: var(--nc-accent); }

/* Hamburguesa (≤820px) */
.nc-burger {
  display: none; background: none; border: 0; cursor: pointer;
  font-family: var(--nc-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--nc-ink); padding: 12px;
}

/* ---- Botones -------------------------------------------------------------- */
.nc-btn, .nc-btn--ghost {
  display: inline-block;
  font-family: var(--nc-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; padding: 16px 28px; border: 0; cursor: pointer;
  text-decoration: none; transition: background .25s, color .25s, border-color .25s;
}
.nc-btn { background: var(--nc-ink); color: var(--nc-bg); }
.nc-btn:hover { background: var(--nc-accent); color: var(--nc-bg); }
.nc-btn--ghost { background: transparent; color: var(--nc-ink); border: 1px solid var(--nc-line-strong); }
.nc-btn--ghost:hover { border-color: var(--nc-ink); color: var(--nc-ink); }

.nc-link-arrow {
  font-family: var(--nc-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--nc-muted); transition: color .25s;
}
.nc-link-arrow:hover { color: var(--nc-ink); }
.nc-link-arrow--underline { border-bottom: 1px solid var(--nc-line-strong); padding-bottom: 4px; }

/* Chip: primitiva del design system (nc-tokens.css §primitivas), copiada tal cual.
   Sin color propio: hereda la tinta del body (theme.json), igual que en el design system.
   SIN USO desde que el bloque "Incluye:" pasó a línea corrida (ver .nc-mod__incluye). Se conserva
   por ser primitiva del sistema, no CSS muerto de una sección eliminada. */
.nc-chip {
  font-family: var(--nc-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; border: 1px solid var(--nc-line-strong); padding: 12px 20px;
}

/* ---- Hero ------------------------------------------------------------------ */
/* Sin eyebrow: el aire que aportaba (11px x 1.72 de line-height = 19px, + 48px de margen)
   se traslada al padding-top para que el H1 caiga donde caía antes: 130 + 19 + 48 = 197px. */
.nc-hero { padding: 197px 0 90px; }
.nc-hero h1 {
  font-size: clamp(48px, 7.4vw, 108px); line-height: .96; letter-spacing: -.035em;
  font-weight: 600; margin: 0; max-width: 15ch;
}
.nc-hero__base {
  margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--nc-line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end;
}
.nc-hero__actions { display: flex; gap: 14px; justify-content: flex-end; }

/* ---- Sección etiqueta + contenido (Visión) ---------------------------------- */
/* OJO con el shorthand `padding`: estos bloques son TAMBIÉN .nc-wrap, y .nc-wrap fija
   `padding: 0 var(--nc-gutter)`. Un `padding: 100px 0` acá tiene la misma especificidad y
   va después en la hoja → pisaba el gutter y dejaba el contenido de la sección 40px a la
   izquierda del hero y del contacto (medido: x=93 contra x=133), y pegado al borde en móvil.
   Regla: en cualquier elemento que lleve .nc-wrap, el padding horizontal se declara
   explícito con var(--nc-gutter). Aplica igual a .nc-areas__head/__list y .nc-metodo__head/__list. */
.nc-labeled { display: grid; grid-template-columns: 240px 1fr; gap: 60px; padding: 100px var(--nc-gutter); }
.nc-labeled__body .nc-manifesto { margin: 0 0 32px; }
.nc-labeled__body .nc-body { margin: 0; }
.nc-labeled__body .nc-body + .nc-body { margin-top: 22px; }
/* Segundo sub-bloque de Visión: hairline al ancho del CONTENIDO (dentro del gutter), igual que
   las filas de Áreas. Va en ::before y no en border-top porque .nc-labeled es también .nc-wrap:
   un border ahí correría por fuera del gutter y no alinearía con el resto de las líneas. */
.nc-labeled--divided { position: relative; }
.nc-labeled--divided::before {
  content: ""; position: absolute; top: 0;
  left: var(--nc-gutter); right: var(--nc-gutter);
  border-top: 1px solid var(--nc-line);
}

/* ---- Áreas de trabajo (filas-índice) ---------------------------------------- */
.nc-areas__head {
  padding: 100px var(--nc-gutter) 0;
  display: flex; align-items: baseline; justify-content: space-between;
}
.nc-areas__list { padding: 44px var(--nc-gutter) 100px; }

/* Retícula de servicios: SEPARADORES, no rejilla.
   El cliente leía "demasiadas líneas". La sección ya está encerrada por su propia línea
   superior (.nc-rule-top) y por la de la sección siguiente, así que la primera y la última
   línea de la lista eran redundantes: se quitan (ver .nc-row:first-child / sin :last-child).
   Quedan solo las N-1 líneas ENTRE filas, y en --nc-line-soft en vez de --nc-line.
   La separación la hace ahora el aire: 26px → 34px de padding vertical por fila (68px entre
   nombres contra 52px antes). Resultado: 8 trazos → 6, y los que quedan pesan menos. */
.nc-row {
  display: grid; grid-template-columns: 60px 1fr 1fr 24px; gap: 24px;
  align-items: baseline; padding: 34px 0; border-top: 1px solid var(--nc-line-soft);
  transition: background .25s; text-decoration: none;
}
/* Primera fila sin línea propia: respira contra el borde de la sección. */
.nc-areas__list > .nc-row:first-child { border-top: 0; }
.nc-row:hover { background: var(--nc-hover); }
/* +4px sobre el tamaño original (21/15) por pedido del cliente: a 21px el nombre del servicio
   competía de igual a igual con el cuerpo de 19px y la fila no se leía como titular.
   La descripción queda en 19px = mismo cuerpo que .nc-body, así la fila comparte escala con
   el resto de la página en vez de tener una propia. */
.nc-row__name { font-size: 25px; letter-spacing: -.01em; font-weight: 500; color: var(--nc-ink); }
.nc-row__desc { font-size: 19px; color: var(--nc-muted); }
/* 13px → 18px: con la retícula más liviana la flecha pasa a ser la señal de que la fila
   se abre. En hover se desplaza 6px y toma el acento, igual que la flecha de las cards. */
.nc-row__arrow {
  font-family: var(--nc-mono); font-size: 18px; line-height: 1; color: var(--nc-faint);
  text-align: right;
  transition: transform .25s var(--nc-ease), color .25s var(--nc-ease);
}
.nc-row:hover .nc-row__arrow {
  transform: translateX(6px); color: var(--nc-accent);
}

/* Marcador de la primera columna: check en lugar de número (el cliente aclaró que la lista no
   tiene orden). Ocupa la misma columna de 60px, así nombre y descripción no se mueven.
   display:inline-block → la caja mantiene baseline, que es la alineación de la fila. */
.nc-check { display: inline-block; line-height: 0; color: var(--nc-faint); transition: color .25s var(--nc-ease); }
.nc-check svg { display: block; }
.nc-row:hover .nc-check { color: var(--nc-accent); }

/* Fila expandible (acordeón de servicios): reset de <button> conservando la grilla de .nc-row. */
.nc-row--toggle {
  background: transparent; color: inherit;
  border: 0; border-top: 1px solid var(--nc-line-soft);
  font: inherit; text-align: left; width: 100%;
  margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
}
/* Flecha: → en cerrado, ↓ (rotada 90°) en abierto. */
/* justify-self:end → la caja se ajusta al glifo, así rota sobre su propio centro. */
.nc-row--toggle .nc-row__arrow { justify-self: end; }
.nc-row--toggle[aria-expanded="true"] .nc-row__arrow { transform: rotate(90deg); }
/* Abierta + hover: el desplazamiento de 6px se compone DESPUÉS de la rotación (por eso el
   orden rotate → translateX), así la flecha ya vertical se mueve hacia abajo en vez de
   volver a la horizontal. Va después de la regla de hover genérica, con la que empata en
   especificidad (0-4-0). */
.nc-row--toggle[aria-expanded="true"]:hover .nc-row__arrow { transform: rotate(90deg) translateX(6px); }

/* Panel del acordeón. Sin borde propio: la fila siguiente ya trae border-top.
   Apertura con grid-template-rows 0fr → 1fr (sin medición por JS). */
.nc-row__panel {
  display: grid; grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .3s var(--nc-ease), visibility 0s .3s;
}
.nc-row__panel[hidden] { display: none; }
.nc-row__panel.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .3s var(--nc-ease), visibility 0s;
}
.nc-row__panel-inner { overflow: hidden; }
.nc-row__panel .nc-body { margin: 0; padding: 0 0 34px 84px; max-width: 62ch; }

@media (prefers-reduced-motion: reduce) {
  .nc-row__panel { transition: none; }
  .nc-row--toggle .nc-row__arrow { transition: none; }
  .nc-mod__panel,
  .nc-mod__panel-inner { transition: none; }
  /* !important: sin esto, la regla normal más abajo en el archivo (misma especificidad,
     2 clases) le gana por orden de cascada y reduced-motion queda roto. */
  .nc-mod__toggle .nc-row__arrow { transition: none !important; }
}

/* ---- Públicos (dos cards puerta de entrada) ----------------------------------- */
/* Las líneas de 1px se resuelven con la primitiva .nc-hairgrid tal cual (gap 1px sobre fondo
   --nc-line + borde de 1px): una sola mecánica da el separador vertical en desktop y el
   horizontal al apilarse en móvil, sin reglas extra. Se conserva el borde completo de la
   primitiva (no solo top/bottom como en .nc-row) porque el padding interior de 44px necesita
   un límite lateral que lo justifique: sin él la tipografía queda flotando dentro del gutter. */
/* El aire superior lo aporta el encabezado (.nc-areas__head, 100px), igual que en #areas. */
.nc-publicos { padding: 0 0 100px; }
.nc-publicos__grid { grid-template-columns: 1fr 1fr; margin-top: 44px; }
/* Columna flex: el CTA se ancla al pie (margin-top:auto) para que las dos
   cards lo muestren a la misma altura aunque sus bajadas tengan distinto largo. */
.nc-card {
  display: flex; flex-direction: column; height: 100%;
  padding: 54px 44px; text-decoration: none; cursor: pointer;
  transition: background .25s var(--nc-ease);
}
/* 0-2-0: gana sobre `.nc-hairgrid > *` (0-1-0), que fija el fondo de cada celda. */
.nc-publicos__grid .nc-card:hover { background: var(--nc-hover); }
/* Ícono de entrada de la card (ver inc/iconos-servicios.php). A 48px y no 40: acá abre una card
   grande, no ancla una columna. Y un punto MÁS OSCURO que .nc-mod__icono: a --nc-faint (el gris
   de las hairlines) el elemento de entrada de la card quedaba pálido, así que reposa en
   --nc-muted-2. En los módulos, donde el ícono es ancla de columna, --nc-faint sigue siendo el
   peso correcto. line-height:0 para que el SVG no arrastre el interlineado de la caja.
   El margen de 30px lo separa del título; el h3 aporta su propio margin-bottom, no el de arriba.
   La transición de color es la MISMA que la del título, la línea y la flecha (.25s var(--nc-ease)):
   los cuatro cambian juntos y el hover se lee como un solo gesto de la card.
   El tamaño NO baja en móvil (se verificó a 390px): apilada, la card mide 340x287 y el título cae
   a ~26px — a 48 el ícono sigue leyéndose como entrada y no compite; bajarlo a 40 lo dejaba
   anémico contra el padding de 36/24. El width/height los pone nc_icono_servicio( …, 48 ). */
.nc-card__icono {
  display: block; line-height: 0; margin-bottom: 30px;
  color: var(--nc-muted-2); transition: color .25s var(--nc-ease);
}
.nc-card__icono svg { display: block; }
.nc-publicos__grid .nc-card:hover .nc-card__icono { color: var(--nc-accent); }
.nc-card__title {
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.02em;
  font-weight: 500; color: var(--nc-ink); margin: 0 0 44px;
  transition: color .25s var(--nc-ease);
}
.nc-publicos__grid .nc-card:hover .nc-card__title { color: var(--nc-accent); }
.nc-card__desc {
  font-size: 17px; line-height: 1.6; color: var(--nc-muted);
  max-width: 34ch; margin: 22px 0 0;
}
/* CTA de la card. La línea de 1px sobre la flecha es la señal de afordancia PERMANENTE: sin ella,
   sin hover (móvil incluido) la card no se leía como accionable. Va en el contenedor y no en la
   flecha porque la flecha se desplaza en hover — si la línea llevara el transform, se movería. */
.nc-card__cta {
  display: block; margin-top: auto; padding-top: 28px;
  border-top: 1px solid var(--nc-line-strong);
  transition: border-color .25s var(--nc-ease);
}
.nc-card__arrow {
  display: inline-block;
  font-family: var(--nc-mono); font-size: 30px; line-height: 1; color: var(--nc-ink);
  transition: transform .25s var(--nc-ease), color .25s var(--nc-ease);
}
.nc-publicos__grid .nc-card:hover .nc-card__cta { border-top-color: var(--nc-accent); }
.nc-publicos__grid .nc-card:hover .nc-card__arrow { transform: translateX(10px); color: var(--nc-accent); }

/* ---- Banda oscura (primitiva del design system) ------------------------------ */
/* Ninguna sección la usa hoy (el footer tiene su propio .nc-footer). Se conserva porque es
   una primitiva de nc-tokens.css del design system, no CSS de la sección que se eliminó. */
.nc-dark { background: var(--nc-ink-dark); color: var(--nc-on-dark); }
.nc-dark a { color: var(--nc-on-dark-2); }
.nc-dark a:hover { color: #FFFFFF; }
.nc-dark .nc-eyebrow { color: var(--nc-on-dark-muted); }
.nc-dark p { color: var(--nc-on-dark-3); }

/* ---- Contacto ---------------------------------------------------------------- */
.nc-contact { padding: 100px 0 110px; }
/* Sin formulario en la home: contenido a la izquierda, gráfico a la derecha centrado en vertical. */
.nc-contact__grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 90px; align-items: center; }
.nc-contact h2 { margin: 26px 0 0; }
.nc-contact .nc-lead { margin: 22px 0 0; }
.nc-contact__body { min-width: 0; }

/* Vías de contacto directo: filas con hairline, mismo lenguaje que .nc-row pero propias. */
.nc-contact__channels { margin-top: 50px; }
.nc-contact__channel {
  display: block; padding: 26px 0; text-decoration: none;
  border-top: 1px solid var(--nc-line);
}
.nc-contact__channel:last-child { border-bottom: 1px solid var(--nc-line); }
.nc-contact__label {
  display: block; margin-bottom: 10px;
  font-family: var(--nc-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--nc-muted);
}
.nc-contact__value {
  display: block; font-size: 25px; line-height: 1.2; letter-spacing: -.015em;
  font-weight: 500; color: var(--nc-ink); transition: color .25s;
}
a.nc-contact__channel:hover .nc-contact__value { color: var(--nc-accent); }
/* Fila de WhatsApp: glifo + número en una línea, centrados entre sí. El SVG usa currentColor,
   así hereda la tinta del valor y el acento del hover sin regla propia de color. */
.nc-contact__value--wa { display: flex; align-items: center; gap: 12px; }
.nc-contact__icon { flex: 0 0 auto; }

/* Acción principal: mismo botón primario con más aire. */
.nc-btn--wa { display: inline-flex; align-items: center; padding: 20px 40px; margin-top: 40px; }

/* Gráfico decorativo de la columna derecha. */
.nc-contact__visual { align-self: center; }
.nc-contact__graph { display: block; width: 100%; height: auto; }

/* Formulario: el shortcode [nrtv_contact_form] de narrative-core sigue emitiendo este markup
   (narrative-core/src/ContactForm.php). Se saca de la home pero los estilos QUEDAN, para que
   el form siga bien presentado si el cliente lo reactiva en otra página. No es CSS muerto. */
.nc-form { display: grid; gap: 34px; margin-top: 46px; }
.nc-field { display: block; }
.nc-field > span {
  font-family: var(--nc-mono); font-size: 10px; letter-spacing: .16em;
  /* --nc-muted-2 (8A8A83) da 3.3:1 sobre --nc-bg: no cumple WCAG AA (4.5:1) en texto pequeño.
     --nc-muted (6E6E68) da 5.3:1 — desviación puntual del design system por accesibilidad. */
  text-transform: uppercase; color: var(--nc-muted); display: block; margin-bottom: 10px;
}
.nc-field input, .nc-field textarea {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--nc-line-strong);
  padding: 10px 0; font-size: 16px; color: var(--nc-ink); outline: none;
  transition: border-color .25s;
}
.nc-field input:focus, .nc-field textarea:focus { border-bottom-color: var(--nc-ink); }
/* outline:none arriba pisa el :where() global (0 especificidad): foco visible explícito */
.nc-field input:focus-visible, .nc-field textarea:focus-visible {
  outline: 2px solid var(--nc-accent); outline-offset: 3px;
}
.nc-field textarea { resize: vertical; }
.nc-form .nc-btn { padding: 17px 34px; justify-self: start; }
.nc-form__msg { font-size: 15px; margin: 0; }
.nc-form__msg--ok { color: var(--nc-accent); }
.nc-form__msg--error { color: var(--nc-error); }
/* Honeypot */
.nc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Página interna genérica (templates/page.html) -------------------------------- */
/* Aire vertical coherente con el resto de las secciones (110px = spacingSize 70). */
.nc-page { padding: 110px 0; }
.nc-page > .wp-block-post-title { margin: 0 0 40px; }

/* ---- Comunicación política: apertura ---------------------------------------------- */
/* H1 un escalón por debajo del display de la home (preset display-sm de theme.json):
   es un título de página interna, no la portada, y el copy es largo (5 palabras + conjunción). */
.nc-pol-hero { padding: 150px 0 90px; }
.nc-pol-hero h1 {
  /* Pedido del cliente: un escalón más chico que el preset display-sm del theme.json
     (clamp(38px, 5.4vw, 78px) → 77.76px a 1440). Override local, NO se toca el preset:
     display-sm se usa en otros lugares del tema. Tope 70px, perceptible pero suave. */
  font-size: clamp(36px, 5vw, 70px); line-height: 1.0; letter-spacing: -.03em;
  font-weight: 600; margin: 0; max-width: 25ch;
  /* max-width recalculado para el tamaño nuevo (antes 23ch a 78px). A 70px el texto es más
     angosto, así que 23ch dejaba "Inteligencia de Comunicación" / "para Empresas" entrar en
     una sola línea y romper el quiebre en 3. 25ch lo devuelve a 2 líneas en ambas páginas
     (política: "Comunicación Política" / "y Asuntos Públicos"; empresas: "Inteligencia de
     Comunicación" / "para Empresas"). Medido en wp-env a 1440px y 1280px. */
}
.nc-pol-hero .nc-manifesto { margin: 44px 0 0; color: var(--nc-text); }

/* Objetivos de apertura: línea corrida separada por guión (el separador lo arma el PHP con
   implode, ver nc_render_pagina_publico), mismo criterio que .nc-mod__incluye pero SIN
   pasar a mono/chico — es contenido de apertura, tiene que leerse grande. Hereda el tamaño
   de .nc-body (19px escritorio / 17px ≤1100px vía la misma regla responsive) y max-width
   propio: a 62ch (medida de .nc-body) el bloque se volvía una sola línea larguísima porque
   acá el texto es corrido, no párrafos cortos. */
.nc-obj__inline {
  font-family: var(--nc-sans); font-size: 19px; line-height: 1.7;
  color: var(--nc-text-2); max-width: 58ch; margin: 44px 0 0;
}

.nc-pol-hero__body { margin-top: 60px; }
.nc-pol-hero__body .nc-body { margin: 0; }
.nc-pol-hero__body .nc-body + .nc-body { margin-top: 22px; }

/* Pieza gráfica del hero: el ícono del área a gran escala en el vacío de la derecha.
   Anclada al .nc-wrap y NO a la <section>: con right:0 el borde derecho del ícono cae sobre el
   borde exterior del contenedor de 1240px (una línea de grilla real del sistema). En viewports
   menores el .nc-wrap es full-width, así que el sangrado al borde de pantalla sale solo.
   z-index:-1 + isolation en el wrap: queda detrás del texto sin tener que declarar z-index en
   cada nodo de texto. Sin data-reveal — el reveal anima transform y pisaría el translateY(-50%). */
.nc-pol-hero { position: relative; overflow: clip; }
.nc-pol-hero .nc-wrap { position: relative; isolation: isolate; }

.nc-pol-hero__glyph {
  position: absolute; z-index: -1; top: 50%; right: 0;
  transform: translateY(-50%);
  width: 520px; height: 520px;
  line-height: 0; pointer-events: none;
  /* La tinta EXACTA de todas las hairlines de 1px del sitio: por eso el dibujo puede ser enorme
     sin competir nunca con la tipografía. Contraste del texto más claro del hero (--nc-text-2
     #4A4A45) sobre esta tinta: 6.9:1 — AA pleno incluso en solape total. */
  color: var(--nc-line);
}
.nc-pol-hero__glyph svg { display: block; width: 100%; height: 100%; }

/* COMPENSACIÓN DE TRAZO (obligatoria, se recalcula si cambia el lado).
   El SVG es viewBox 32x32 con stroke-width="1": a 520px el escalado es 16.25x y el trazo se
   dibujaría a 16px. Sin vector-effect disponible, se pisa por CSS — la propiedad CSS gana sobre
   el atributo de presentación, así que iconos-servicios.php queda intacto.
   Fórmula: stroke-width = 3.5 * 32 / lado  →  trazo APARENTE fijo de 3.5px en todo breakpoint.
   3.5 y no 1: a este tamaño un pelo de 1px se pierde y la pieza se lee solo como cinco puntos.
   Va en el <svg> (los hijos lo heredan). */
.nc-pol-hero__glyph svg { stroke-width: .215; }

/* COMPENSACIÓN DE RELLENO. Los satélites r1.7 escalan a discos de ~55px: el peso de un área
   crece al cuadrado y el de una línea linealmente, así que a esta escala los nodos aplastan a
   los trazos. .7 los devuelve al peso del trazo sin romper A2 (satélite relleno / núcleo hueco:
   el par se sigue leyendo). Selector por atributo: solo los satélites lo llevan. */
.nc-pol-hero__glyph [fill="currentColor"] { fill-opacity: .7; }

/* ---- Comunicación política: metodología -------------------------------------------- */
/* Mismo gotcha que .nc-labeled: son .nc-wrap, el gutter va explícito. */
.nc-metodo__head { padding: 100px var(--nc-gutter) 0; }
.nc-metodo__list { padding: 20px var(--nc-gutter) 100px; }

/* Módulo: mismo grid asimétrico que .nc-labeled (240px + contenido), con el número
   como ancla visual de la columna izquierda. Hairline propia por módulo (no .nc-labeled--divided:
   acá el separador va entre módulos, dentro de .nc-wrap, así que border-top alinea con el contenido). */
/* El módulo pasa a ser un acordeón (mismo mecanismo que .nc-row--toggle en la home): el
   <article> queda como caja de bloque y solo conserva las hairlines; el grid asimétrico y
   el padding vertical se mudan a .nc-mod__toggle, que es la cabecera clicable. */
.nc-mod {
  border-top: 1px solid var(--nc-line);
}
.nc-mod:last-child { border-bottom: 1px solid var(--nc-line); }

/* <h2> que envuelve al botón (patrón WAI-ARIA de accordion). Es SOLO wrapper semántico:
   se le saca todo el estilo de h2 de theme.json para que no pinte nada. */
.nc-mod__h {
  margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit;
  letter-spacing: normal;
}

/* Cabecera clicable: mismo reset de <button> que .nc-row--toggle, conservando la grilla que
   antes vivía en .nc-mod. Tercera columna de 24px para la flecha, igual que .nc-row. */
.nc-mod__toggle {
  display: grid; grid-template-columns: 240px 1fr 32px; gap: 60px;
  align-items: start; width: 100%; padding: 50px 0;
  background: transparent; color: inherit; border: 0; margin: 0;
  font: inherit; text-align: left; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background .25s;
}
.nc-mod__toggle:hover { background: var(--nc-hover); }
.nc-mod__head { display: block; }

/* Flecha: pieza propia (.nc-row__arrow) pero escalada — el toggle de módulo es una fila más
   grande que la de la home, 24px contra 18px. justify-self:center (no end, como en la home):
   sin desplazamiento lateral la caja gira sobre su propio centro y la rotación nunca la saca
   del recuadro de :hover. Cuatro estados: cerrado 0°/faint, cerrado+hover 45°/accent, abierto
   90°/accent, abierto+hover 90°/accent (NO vuelve a 45°). Por eso la regla de aria-expanded
   sin hover va DESPUÉS del bloque @media (hover:hover): así gana en cascada sobre la de
   :hover cuando las dos aplican (abierto + hover con soporte real de hover). */
.nc-mod__toggle .nc-row__arrow {
  justify-self: center;
  font-size: 24px;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  color: var(--nc-faint);
  transition: transform .25s var(--nc-ease), color .25s var(--nc-ease);
}
@media (hover: hover) {
  .nc-mod__toggle:hover .nc-row__arrow,
  .nc-mod__toggle:focus-visible .nc-row__arrow {
    transform: rotate(45deg); color: var(--nc-accent);
  }
  .nc-mod__toggle[aria-expanded="true"]:hover .nc-row__arrow,
  .nc-mod__toggle[aria-expanded="true"]:focus-visible .nc-row__arrow {
    transform: rotate(90deg); color: var(--nc-accent);
  }
}
.nc-mod__toggle[aria-expanded="true"] .nc-row__arrow { transform: rotate(90deg); color: var(--nc-accent); }

/* Panel colapsable: reglas idénticas a .nc-row__panel (0fr → 1fr, sin medir alturas por JS).
   La sangría de 300px = 240 (columna del ícono) + 60 (gap) alinea el contenido con la
   pregunta. Va en __panel-inner (que es quien tiene overflow:hidden) y no en __panel: con
   box-sizing:border-box global, cerrado el alto es 0 y el padding queda recortado. */
.nc-mod__panel {
  display: grid; grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .3s var(--nc-ease), visibility 0s .3s;
}
.nc-mod__panel[hidden] { display: none; }
.nc-mod__panel.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .3s var(--nc-ease), visibility 0s;
}
.nc-mod__panel-inner {
  overflow: hidden; padding: 0 0 72px 300px;
  transition: padding-bottom .3s var(--nc-ease);
}
/* GOTCHA: con la fila en 0fr el alto del item se va a 0, pero el PADDING no — el mínimo
   automático de la pista lo sigue contando (medido: panel cerrado de 72px de alto, un hueco
   fantasma entre módulos). Por eso .nc-row__panel no lleva padding y se lo pasa a .nc-body.
   Acá el contenido son 4 bloques distintos, así que en vez de repartirlo se anula el
   padding-bottom mientras está cerrado y se anima junto con la fila. El padding-left no
   necesita este trato: no aporta alto. */
.nc-mod__panel:not(.is-open) .nc-mod__panel-inner { padding-bottom: 0; }
/* Ícono del servicio en lugar del número (ver inc/iconos-servicios.php). Es GRÁFICO decorativo,
   no texto: el requisito de contraste WCAG que obligaba al número a --nc-muted-2 no aplica —
   el nombre del servicio ya está en el título del módulo. Vuelve a --nc-faint, el gris de las
   hairlines, que es el peso que le corresponde a un ancla estructural.
   line-height:0 en el contenedor para que el SVG no arrastre el interlineado de la caja.
   display:block porque ahora es un <span> dentro del <button> (ver inc/render-publico.php).
   En hover toma el acento, igual que .nc-check en las filas de la home. */
.nc-mod__icono {
  display: block; color: var(--nc-faint); line-height: 0;
  transition: color .25s var(--nc-ease);
}
.nc-mod__icono svg { display: block; }
.nc-mod__toggle:hover .nc-mod__icono { color: var(--nc-accent); }
/* La pregunta es el gancho: se lee antes que el título del servicio. Pedido del cliente:
   subirla más — reutiliza el tamaño exacto de .nc-manifesto (misma escala del sistema, no
   se inventa un tamaño nuevo).
   display:block: ahora es un <span> dentro del <button> (ver inc/render-publico.php). */
.nc-mod__q {
  display: block;
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1.35; letter-spacing: -.01em;
  font-weight: 400; color: var(--nc-ink); margin: 0; max-width: 30ch;
}
/* Título del servicio, bajado de `seccion-sm` a un tamaño propio: con la pregunta ahora en
   clamp(22,2.4vw,32) (antes 20-26) el preset seccion-sm (28-44) volvía a aplastarla. Baja a
   26-36 para que la pregunta se siga leyendo primero y el título quede claramente más chico
   pero sin perder jerarquía de nombre de servicio.
   Bajó de <h2> a <h3> (el <h2> es ahora el wrapper del botón, ver .nc-mod__h): se fijan acá
   font-weight / line-height / letter-spacing que antes heredaba del elemento h2 de
   theme.json, para que el nombre del servicio se vea EXACTAMENTE igual que antes. */
.nc-mod__title {
  margin: 10px 0 0;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 600; line-height: 1.02; letter-spacing: -.03em;
}
.nc-mod__text { margin-top: 30px; }
.nc-mod__text .nc-body { margin: 0; }
.nc-mod__text .nc-body + .nc-body { margin-top: 22px; }
.nc-mod__block { margin-top: 42px; }

/* Etiqueta de sub-bloque ("Para objetivos como:", "Incluye:").
   --nc-muted-2 (8A8A83) da 3.3:1 sobre --nc-bg: no cumple WCAG AA en texto de 10px.
   Se usa --nc-muted (6E6E68, 5.3:1) — misma desviación ya documentada en .nc-field > span. */
.nc-microlabel {
  font-family: var(--nc-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--nc-muted); margin: 0;
}

/* Lista de objetivos: sin bullets del navegador. El marcador es el MISMO check inline que
   la lista de servicios de la home (.nc-check) — antes era una línea de 1px, que a esta
   escala se confundía con las hairlines estructurales de la página.
   li como flex (y no ::before absoluto) para que en ítems de dos líneas el texto sangre
   parejo bajo la primera. margin-top .28em centra el check de 15px con la primera línea
   (16px × 1.5 = 24px de caja → centro en 12px; 12 − 7.5 = 4.5px ≈ .28em). */
.nc-mod__objs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.nc-mod__objs li {
  display: flex; gap: 12px;
  font-size: 16px; line-height: 1.5; color: var(--nc-text-2);
}
.nc-mod__obj-check {
  flex: 0 0 auto; line-height: 0; margin-top: .28em; color: var(--nc-faint);
}
.nc-mod__obj-check svg { display: block; }

/* "Incluye:" — línea corrida de ítems separados por guión, sin cajas (reemplaza los chips).
   SIN uppercase a propósito: son listas de 7 a 9 sintagmas que ocupan 2-3 líneas; en versalitas
   con .14em el bloque pesaba más que el cuerpo del módulo, justo lo contrario de "más sutil".
   En minúscula queda como texto corrido y el guión hace de respiración. letter-spacing .08em:
   el .14em del sistema es para versalitas; en minúscula abre demasiado y se lee deshilachado.
   12px → 14px (pedido del cliente: se leía chico). line-height baja de 1.9 a 1.8: a 14px la
   misma proporción ya da suficiente aire entre líneas envueltas, 1.9 quedaba de más. */
.nc-mod__incluye {
  font-family: var(--nc-mono); font-size: 14px; letter-spacing: .08em; line-height: 1.8;
  color: var(--nc-muted); margin: 16px 0 0; max-width: 68ch;
}

/* Bloque "destacado": texto libre opcional debajo de "Incluye:" (pedido del cliente, solo en
   Estrategia digital / empresas — ver inc/render-publico.php y patterns/empresas.php). Mismo
   margen superior que separa los demás .nc-mod__block entre sí (34px en mobile más abajo), sin
   caja/borde/fondo: es texto corrido, no una card. */
.nc-mod__destacado {
  margin-top: 34px; max-width: 62ch;
}
.nc-mod__destacado p {
  font-size: 17px; line-height: 1.7; color: var(--nc-text-2); margin: 0;
}
.nc-mod__destacado p + p { margin-top: 14px; }
.nc-mod__destacado a {
  color: var(--nc-ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--nc-line-strong); transition: color .25s, text-decoration-color .25s;
}
.nc-mod__destacado a:hover { color: var(--nc-accent); text-decoration-color: var(--nc-accent); }

/* ---- Comunicación política: cierre -------------------------------------------------- */
.nc-pol-cierre { padding: 100px 0 110px; }
.nc-pol-cierre .nc-manifesto { margin: 0; }
.nc-pol-cierre .nc-btn { margin-top: 40px; }
/* Sin frase (el cliente la sacó, ver nc_render_pagina_publico): sin el texto que sostenía
   el padding de 100/110px, quedaba solo el botón con mucho hueco arriba y abajo — se leía
   como error de maquetación. La línea superior YA existe (.nc-rule-top, en el <section>) y
   alcanza como límite visual del cierre; acá solo se compacta el aire vertical, sin agregar
   texto para llenarlo. */
.nc-pol-cierre--solo { padding: 56px 0 70px; }
.nc-pol-cierre--solo .nc-btn { margin-top: 0; }

/* ---- Footer -------------------------------------------------------------------- */
.nc-footer { background: var(--nc-ink-dark); color: var(--nc-on-dark); padding: 80px 0 40px; }
.nc-footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 60px;
  padding-bottom: 60px; border-bottom: 1px solid var(--nc-on-dark-line);
}
.nc-footer__brand img { width: 32px; height: 32px; filter: invert(1); margin-bottom: 22px; }
.nc-footer__claim { font-size: 22px; line-height: 1.35; max-width: 26ch; margin: 0; color: var(--nc-on-dark); }
.nc-footer__col h3 {
  font-family: var(--nc-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--nc-on-dark-muted); font-weight: 400; margin: 0 0 20px;
  line-height: normal; /* neutraliza line-height:1.28 del elemento h3 global de theme.json */
}
.nc-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.nc-footer__col a { font-size: 15px; color: var(--nc-on-dark-2); text-decoration: none; }
.nc-footer__col a:hover { color: #FFFFFF; }
.nc-footer__bar {
  display: flex; justify-content: space-between; padding-top: 40px;
  font-family: var(--nc-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--nc-on-dark-muted);
}

/* ---- Reveal al scroll (estilos solo con JS presente) ----------------------------- */
html[data-js] [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .9s var(--nc-ease), transform .9s var(--nc-ease);
}
html[data-js] [data-reveal="in"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html[data-js] [data-reveal] { opacity: 1; transform: none; transition: none; }
  /* Acotado a lo propio (sin selector universal): convive con animaciones de plugins de terceros. */
  [data-reveal],
  .nc-row__panel,
  .nc-row__arrow,
  .nc-mod__panel,
  .nc-mod__panel-inner,
  .nc-mod__icono,
  .nc-card,
  .nc-card__icono,
  .nc-card__cta,
  .nc-card__arrow,
  .nc-check,
  .nc-nav {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- Responsive ------------------------------------------------------------------- */
@media (max-width: 1440px) {
  /* Solo achica: sigue centrado en la columna derecha. stroke-width re-derivado con
     3.5 * 32 / 400 para mantener el trazo aparente de 3.5px. */
  .nc-pol-hero__glyph { width: 400px; height: 400px; }
  .nc-pol-hero__glyph svg { stroke-width: .28; }
}

@media (max-width: 1100px) {
  /* El cuerpo a 19px es SOLO de escritorio: de acá para abajo vuelve a 17px. Una sola regla
     cubre los dos breakpoints del sistema (≤1100 y ≤820), porque ambos entran en esta query.
     .nc-obj__inline iguala el tamaño de .nc-body a propósito (pedido del cliente: apertura
     grande), así que sigue la misma regla responsive. */
  .nc-body, .nc-obj__inline { font-size: 17px; }

  /* Una columna: el gráfico baja (el contenido tiene que leerse primero). */
  .nc-contact__grid { grid-template-columns: 1fr; gap: 60px; }
  .nc-contact__visual { max-width: 420px; }

  /* 3.5 * 32 / 300 */
  .nc-pol-hero__glyph { width: 300px; height: 300px; }
  .nc-pol-hero__glyph svg { stroke-width: .373; }
}

@media (max-width: 820px) {
  .nc-burger { display: block; }

  /* BUG del panel transparente — causa raíz.
     `backdrop-filter` en .nc-header lo convierte en CONTAINING BLOCK de sus descendientes
     `position: fixed` (CSS Filter Effects §Backdrop Filter: un valor distinto de `none`
     establece bloque contenedor para fixed, igual que un `transform`). El panel resolvía
     entonces `inset: 76px 0 0 0` contra la caja del HEADER (76px de alto), no contra el
     viewport: top 76 + bottom 0 sobre una caja de 76 → caja de ALTO 0 (medido: 80px, que
     es solo el padding). El fondo --nc-bg se pintaba en esa caja de 80px y los ítems
     desbordaban por fuera, sobre la página: de ahí el "se ve el contenido por detrás".
     NO era opacidad heredada (un background rgba del padre no se hereda) ni z-index.
     Comprobación: con backdrop-filter:none, nav.offsetParent pasa de .nc-header a null
     (viewport) y la altura de 80px a 768px = 844 − 76.
     Fix: en móvil el header no lleva filtro y va con fondo sólido — el blur solo tenía
     sentido en escritorio, donde el nav es inline y no hay panel. */
  .nc-header {
    background: var(--nc-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nc-nav {
    display: none;
    position: fixed; inset: var(--nc-header-h) 0 0 0; z-index: 55;
    background: var(--nc-bg); flex-direction: column; align-items: flex-start;
    padding: 40px var(--nc-gutter); gap: 28px;
    overflow-y: auto; /* con el submenú abierto el contenido puede pasar el alto del viewport */
  }
  .nc-nav.is-open { display: flex; animation: nc-fade .2s ease; }
  .nc-nav a,
  .nc-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
    font-family: var(--nc-sans); font-size: 28px; letter-spacing: -.02em;
    text-transform: none; color: var(--nc-ink);
  }

  /* Submenú anidado dentro del panel: el chevron pasa a la derecha de la fila (área táctil
     de 44px vía padding, con margen negativo para que no corra el texto) y el panel deja de
     ser flotante — se apila en flujo, con una hairline vertical que marca la dependencia. */
  .nc-nav__item { width: 100%; flex-wrap: wrap; justify-content: space-between; }
  .nc-nav__item--sub { height: auto; }
  .nc-nav__toggle {
    padding: 12px; margin: -12px -12px -12px 0; color: var(--nc-ink);
  }
  .nc-nav__toggle svg { width: 15px; height: 15px; }
  .nc-nav__sub {
    position: static; width: 100%;
    min-width: 0; max-width: none;
    margin-top: 16px; padding: 0;
    border: 0; border-left: 1px solid var(--nc-line);
  }
  /* 0-2-1: gana sobre el `.nc-nav a` de 28px de este mismo bloque. */
  .nc-nav .nc-nav__sub a {
    display: block; padding: 12px 0 12px 18px;
    font-size: 16px; line-height: 1.4; color: var(--nc-text);
    text-align: left;
  }

  .nc-nav__cta.nc-nav__cta {
    margin-top: auto; font-family: var(--nc-mono); font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase; width: 100%; text-align: center;
  }
  @keyframes nc-fade { from { opacity: 0; } to { opacity: 1; } }

  /* Móvil: se recupera parte del aire del eyebrow (90 → 130), no los 67px completos:
     sin texto que lo sostenga, 157px de vacío sobre un viewport de 844 se lee como bug. */
  .nc-hero { padding: 130px 0 60px; }
  .nc-hero__base { grid-template-columns: 1fr; gap: 30px; }
  .nc-hero__actions { justify-content: flex-start; flex-direction: column; }
  .nc-hero__actions .nc-btn, .nc-hero__actions .nc-btn--ghost { width: 100%; text-align: center; }

  /* Gutter explícito: el shorthand pisa el `padding: 0 var(--nc-gutter)` de .nc-wrap y los
     títulos de sección quedaban pegados al borde de la pantalla. */
  .nc-labeled { grid-template-columns: 1fr; gap: 26px; padding: 80px var(--nc-gutter); }

  .nc-row { grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 8px 16px; }
  /* Colocación explícita (nada de auto-placement): marcador (check) y nombre en la fila 1,
     descripción en la fila 2 arrancando en la MISMA columna que el nombre. Con `grid-column: 1 / -1`
     la descripción empezaba bajo el marcador y el nombre quedaba corrido ~29px a la derecha. */
  .nc-check     { grid-column: 1; grid-row: 1; align-self: center; }
  .nc-row__name { grid-column: 2; grid-row: 1; }
  .nc-row__desc { grid-column: 2 / -1; grid-row: 2; }
  .nc-row__arrow { display: none; }
  /* En el acordeón la flecha no es decorativa: indica abierto/cerrado, se mantiene.
     Anclada a la fila 1, última columna — si no, el auto-placement la manda a una fila propia. */
  .nc-row--toggle { grid-template-columns: auto 1fr auto; }
  .nc-row--toggle .nc-row__arrow { display: block; grid-column: 3; grid-row: 1; }
  .nc-row__panel .nc-body { padding-left: 0; }

  /* Cards apiladas: el gap de 1px de .nc-hairgrid pasa a ser el separador horizontal. */
  .nc-publicos { padding: 0 0 80px; }
  .nc-publicos__head { padding-top: 80px; }
  .nc-publicos__grid { grid-template-columns: 1fr; margin-top: 32px; }
  .nc-card { padding: 36px 24px; }
  .nc-card__title { margin-bottom: 28px; }
  .nc-card__desc { font-size: 16px; margin-top: 16px; }
  /* Sin hover en táctil: la línea + la flecha grande en tinta son toda la afordancia. */
  .nc-card__cta { padding-top: 22px; }
  .nc-card__arrow { font-size: 26px; }

  .nc-contact { padding: 80px 0 90px; }
  .nc-contact__value { font-size: 22px; }
  /* Acción principal a ancho completo; el gráfico no domina la pantalla. */
  .nc-btn--wa { width: 100%; text-align: center; padding: 20px 24px; }
  .nc-contact__visual { max-width: 320px; margin: 0 auto; }

  .nc-footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .nc-footer__bar { flex-direction: column; gap: 10px; }

  /* ---- Páginas internas ---- */
  .nc-page { padding: 80px 0; }
  .nc-pol-hero { padding: 120px 0 60px; }
  .nc-pol-hero .nc-manifesto { margin-top: 30px; }

  .nc-obj__inline { margin-top: 32px; }
  .nc-pol-hero__body { margin-top: 40px; }

  /* Sin vacío lateral, la pieza cambia de rol: se ancla arriba a la derecha, en el aire de la
     bandera del H1, sangrando 40px fuera del borde (queda ~83% visible; el recorte lo garantiza
     el overflow:clip de la sección). Acá SÍ pasa por detrás del texto, así que baja a .6 y se
     lee como textura. transform:none porque ya no centra vertical. 3.5 * 32 / 240 = .467 */
  .nc-pol-hero__glyph {
    width: 240px; height: 240px;
    top: -24px; right: -40px; transform: none;
    opacity: .6;
  }
  .nc-pol-hero__glyph svg { stroke-width: .467; }

  /* Módulo apilado: el ícono queda arriba, como ancla de entrada, y la flecha del acordeón
     se va al extremo derecho de esa primera fila (mismo criterio que .nc-row--toggle). */
  /* Columna 2 fija en 32px (no `auto`): `auto` medía el glifo SIN rotar (13.2px) y la flecha
     rotada 90° ocupa 24px, así que a módulo abierto se salía ~5px por la derecha del botón.
     32px + justify-self:center es el mismo criterio que en desktop: la caja tiene holgura
     para el bounding box de la flecha en cualquier ángulo (0°, 45° y 90°). */
  .nc-mod__toggle {
    grid-template-columns: 1fr 32px; grid-template-rows: auto auto;
    gap: 20px; padding: 39px 0;
  }
  .nc-mod__icono { grid-column: 1; grid-row: 1; }
  .nc-mod__head  { grid-column: 1 / -1; grid-row: 2; }
  /* display:block explícito: más arriba, en este mismo breakpoint, .nc-row__arrow se apaga
     para las filas de la home; acá la flecha SÍ tiene que seguir viéndose (es la única
     señal de que el módulo se abre), igual que en .nc-row--toggle. */
  .nc-mod__toggle .nc-row__arrow { display: block; grid-column: 2; grid-row: 1; align-self: center; justify-self: center; }
  /* Sin sangría en móvil: mismo criterio que .nc-row__panel .nc-body. */
  .nc-mod__panel-inner { padding: 0 0 56px; }
  .nc-metodo__head { padding: 80px var(--nc-gutter) 0; }
  .nc-metodo__list { padding: 16px var(--nc-gutter) 80px; }
  .nc-mod__text { margin-top: 24px; }
  .nc-mod__block { margin-top: 34px; }

  .nc-pol-cierre { padding: 80px 0 90px; }
  .nc-pol-cierre--solo { padding: 48px 0 56px; }
  .nc-pol-cierre .nc-btn { width: 100%; text-align: center; }
}

/* Área táctil mínima 44px */
@media (max-width: 820px) {
  .nc-nav a, .nc-btn, .nc-btn--ghost, .nc-burger { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}