/* ==========================================================================
   Blacknexus — sistema visual bn-*
   Migrado y LIMPIADO desde el CSS Adicional del Customizer del sitio anterior
   (theme Blank Canvas sobre Seedlet). Ver BLACKNEXUS-DESIGN-SYSTEM.md para el
   origen de cada valor, y BLACKNEXUS-THEME-NOTES.md sección "Diferencias
   respecto a Seedlet" para el detalle de qué se quitó y por qué.

   Qué se quitó al migrar (todo documentado en BLACKNEXUS-DESIGN-SYSTEM.md §B):
     - Casi todos los `!important`: existían únicamente para ganarle a
       `.wp-block-group.has-background` y al cap de ~620px ("aligndefault") de
       Seedlet. Sin Seedlet, no hace falta pelear la cascada.
     - El bloque completo "Kill Seedlet's default aligndefault content cap"
       (10+ selectores de `.entry-content .bn-*` forzando max-width/width/margin).
       bn-container ya define su propio max-width sin competencia.
     - Los selectores `> .wp-block-group__inner-container` — existían porque
       Gutenberg envuelve los hijos reales de un core/group en ese div extra.
       front-page.php ya no pasa por el editor de bloques: bn-hero-grid,
       bn-ecosystem-tags y bn-topbar-inner contienen sus hijos directamente.
     - El scoping por `.page-id-21` / `.entry-content` — front-page.php es su
       propia plantilla, no necesita aislarse de otras páginas por ID de post.
     - `.site-footer .site-info` (ocultaba el crédito "Powered by WordPress" de
       Seedlet) — footer.php propio no genera ese markup, no hay nada que ocultar.
     - Las reglas `.page-id-31` / `.crm-shell` de la página del producto TinyCRM
       — son contenido específico de esa página placeholder, no forman parte
       del sistema de diseño del sitio y no se portaron en esta tarea.

   Qué se corrigió al migrar:
     - `font-weight: 600` en botones ahora SÍ se aplica (antes competía y
       perdía contra una regla de Seedlet sobre `.wp-element-button`).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base / reset mínimo
   -------------------------------------------------------------------------- */
img { height: auto; max-width: 100%; }

body {
  font-family: var(--wp--preset--font-family--system);
  font-size: 18px;
  line-height: 1.7;
  color: #333333;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Layout: contenedor, secciones, ritmo vertical
   -------------------------------------------------------------------------- */
.bn-container {
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 56px);
  box-sizing: border-box;
}

.bn-section { padding-block: 72px; }
.bn-topbar  { padding-block: 24px; }
.bn-footer  { padding-block: 40px; }

@media (max-width: 782px) {
  .bn-section { padding-block: 48px; }
  .bn-topbar  { padding-block: 20px; }
  .bn-footer  { padding-block: 32px; }
}

/* Colapso de padding entre secciones consecutivas sin color propio (Sept 2026).
   front-page.php tiene 4 secciones seguidas sin `style` de fondo (todas
   blancas por defecto: "No hacemos solamente páginas", "Lo que hacemos",
   "35 años...", "WordPress cuando conviene..."). Sin esta regla, cada límite
   entre dos de ellas suma el padding-bottom de una (72px) + el padding-top
   de la siguiente (72px) = 144px de blanco sin ningún cambio de color que
   lo justifique — se lee como un hueco accidental, no como una pausa de
   diseño (reportado por Alex: "muchos espacios... parece mal diseñada").
   Donde SÍ hay cambio de color (hero negro → blanco, blanco → .bn-dark,
   etc.) el padding completo de ambos lados se mantiene intacto: ahí el
   espacio está comunicando la transición, no sobrando.
   `:not([style])` detecta exactamente las secciones sin fondo inline (todas
   las secciones con color propio lo declaran vía `style="...background-
   color:..."`, ver front-page.php) — no depende de un color específico.
   Primera vuelta (0.2.2): solo se puso padding-top:0 en la sección
   siguiente → quedaba en 72px (48px mobile) el total. Alex reportó que
   seguía viendo "espacio muy grande" incluso así. Segunda vuelta: además
   se reduce el padding-bottom de la sección ANTERIOR (via :has(), soporte
   amplio en navegadores modernos) para que el total de estos límites sin
   color baje a 48px desktop / 24px mobile — un salto claramente menor al
   de un límite con cambio de color (144px / 96px), que es justo la señal
   que debía transmitir. */
.bn-section:not([style]) + .bn-section:not([style]) {
  padding-top: 0;
}
.bn-section:not([style]):has(+ .bn-section:not([style])) {
  padding-bottom: 48px;
}
@media (max-width: 782px) {
  .bn-section:not([style]):has(+ .bn-section:not([style])) {
    padding-bottom: 24px;
  }
}

/* Título de sección (h2 directo dentro de .bn-container): un solo gap consistente */
.bn-container > h2,
.bn-container > h3 {
  margin-top: 0;
  margin-bottom: 24px;
}

/* Ritmo vertical de párrafos de cuerpo (Sept 2026, revisado).
   Primera vuelta (0.2.1): además de estandarizar el margen, se les puso
   max-width:60ch (el mismo ancho fijo de .bn-lede) a los párrafos "planos".
   Alex probó eso en un monitor grande y señaló, correctamente, que el
   texto se quedaba mucho más angosto que los márgenes definidos por
   .bn-container — un 60ch fijo (~582px) es apenas la mitad de los ~1108px
   de columna disponible, y no crece con la pantalla. Se quita ese
   max-width fijo: el texto de cuerpo ahora usa el mismo ancho que ya
   usan los `<h2>` (llena la columna definida por .bn-container, "se
   ajusta a los márgenes"), y por lo tanto también se angosta solo en
   pantallas chicas porque el contenedor mismo se angosta — sin necesidad
   de un tope aparte. .bn-lede mantiene su propio max-width:60ch (más
   abajo): es un tratamiento tipográfico deliberado y ya documentado para
   el párrafo destacado, no lo que Alex está señalando.
   Se mantiene el margen vertical fijo en vez del margen por defecto del
   navegador (1em arriba/abajo) — que se sumaba sin necesidad al
   padding-block de .bn-section en el último párrafo de cada bloque. No
   toca los párrafos dentro de .bn-cta (ya tienen su propio ancho
   centrado de 640px) ni los de columnas (ya son angostos por el layout
   de flex).
   .bn-eyebrow y .bn-timeline-close también son <p> hijos directos de
   .bn-container en algunas secciones (ej. "Presencia digital como
   servicio") y ya tienen su propio margen/tamaño específico — se excluyen
   explícitamente para no pisar esas reglas. */
.bn-section:not(.bn-cta) > .bn-container > p:not(.bn-lede):not(.bn-eyebrow):not(.bn-timeline-close) {
  margin: 0 0 18px;
}
.bn-section:not(.bn-cta) > .bn-container > p:not(.bn-lede):not(.bn-eyebrow):not(.bn-timeline-close):last-child,
.bn-section > .bn-container > .bn-lede:last-child {
  margin-bottom: 0;
}

/* Encabezados de card dentro de columnas: sin cortes de palabra, tamaño fluido */
.wp-block-column h3,
.wp-block-column h4 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 12px;
}
.wp-block-column p { margin-top: 0; }

/* --------------------------------------------------------------------------
   Topbar (header.php)
   -------------------------------------------------------------------------- */
.bn-topbar-inner p { margin: 0; }
.bn-word {
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
}
.bn-word a { color: inherit; text-decoration: none; }

/* Logo real (Sept 2026) — the_custom_logo() no trae ningún tamaño por
   defecto y el archivo subido (277×147px, ícono + wordmark apilados) se
   ve desproporcionado a resolución nativa dentro del topbar. Se limita
   por altura, no por ancho, para que mantenga su proporción real.
   Subido de 56px/44px a 84px/64px a pedido de Alex (§6.12) — el archivo
   fuente es de baja resolución (277×147px), así que ~84px es más o
   menos el techo antes de que se empiece a notar borroso en pantallas
   de alta densidad; si se pide más grande todavía, conviene primero
   pedir una versión de mayor resolución del logo (ver nota en §6.11). */
.bn-topbar-inner .custom-logo-link { display: inline-block; }
.bn-topbar-inner .custom-logo { max-height: 84px; width: auto; display: block; }
@media (max-width: 600px) {
  .bn-topbar-inner .custom-logo { max-height: 64px; }
}

/* El menú de navegación (wp_nav_menu, .bn-nav-menu) es funcionalidad NUEVA —
   no existía en producción (el "topbar" de hoy es contenido de post, sin
   nav real), así que no había ningún estilo que portar. Sin esta regla el
   <ul> del menú sale con viñetas por defecto del navegador. Encontrado en
   la revisión pre-activación (Sept 2026). */
.bn-topbar-nav { margin-top: 12px; }
.bn-nav-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bn-nav-menu a {
  color: #0A0A0C;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}
.bn-nav-menu a:hover,
.bn-nav-menu a:focus { color: #007CBA; }

/* --------------------------------------------------------------------------
   Tipografía compartida
   -------------------------------------------------------------------------- */
.bn-eyebrow {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
}
.bn-lede { max-width: 60ch; margin-bottom: 32px; }
.bn-hero-heading {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.05;
  margin: 0 0 20px;
  max-width: none;
}

/* Accent close-out line usada al final de secciones tipo timeline */
.bn-timeline-close { margin-top: 20px; font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.wp-block-button__link {
  border-radius: 4px;
  padding: 14px 28px;
  font-weight: 600;
}

/* Variante "outline" (usada en "Hablemos", en hero y CTA final) — documentada
   en BLACKNEXUS-DESIGN-SYSTEM.md §5.1: fondo transparente, texto y borde
   #007CBA. Sin esta regla el botón hereda el fill sólido del primario y se
   pierde la jerarquía visual primario/secundario. Encontrado en la revisión
   pre-activación (Sept 2026) — en producción esta variante la resolvía el
   CSS del bloque `core/button` de WordPress (wp-block-library), que este
   theme no carga a propósito. */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: #007CBA;
  border: 2px solid #007CBA;
  padding: 12px 26px; /* -2px vs. el primario para compensar el borde y que ambos midan igual */
}

/* front-page.php reutiliza las clases de core/buttons (wp-block-buttons /
   wp-block-button) como markup plano, sin pasar por el editor de bloques —
   por eso el theme NO carga wp-block-library y estas clases llegan sin su
   CSS base de WordPress core (display:flex en fila). Sin esta regla, cada
   botón cae en flujo normal (bloque) y los pares de CTA (hero, sección CTA)
   se apilan uno debajo del otro en vez de quedar lado a lado. Encontrado y
   corregido en la revisión en vivo del theme instalado (Sept 2026). */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.wp-block-buttons > .wp-block-button { margin: 0; }

/* Mismo motivo que arriba: el timeline de 35 años y la grilla "Cómo
   trabajamos" reutilizan wp-block-columns / wp-block-column como markup
   plano de 4 columnas. Sin esta regla se apilan verticalmente en vez de
   mostrarse en fila. */
.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
}
.wp-block-columns > .wp-block-column {
  flex: 1 1 0%;
  min-width: 0;
}
@media (max-width: 900px) {
  .wp-block-columns { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Hero: layout de dos columnas (copy + stat panel)
   -------------------------------------------------------------------------- */
/* z-index:0 (no "auto") es necesario para que .bn-hero forme su propio
   stacking context: sin él, el z-index:-1 de .bn-hero-canvas (ver más abajo)
   se resuelve contra el stacking context de un ancestro más arriba (el de
   <body>), y el propio fondo sólido de .bn-hero — que sí participa en ESE
   contexto superior a nivel 0 — termina pintándose ENCIMA del canvas,
   dejándolo invisible aunque esté dibujando correctamente. Con z-index:0 el
   fondo de .bn-hero pasa a pintarse primero DENTRO de su propio contexto, y
   el canvas (z-index:-1 dentro de ESE contexto) queda por encima de él.
   Bug real, encontrado en la revisión en vivo del theme instalado (Sept
   2026) — en producción esto no se nota porque el wrapper de bloques de
   Gutenberg (.wp-block-group__inner-container, con position:relative y
   z-index:1) crea sin querer un contexto de apilamiento equivalente. */
.bn-hero { position: relative; overflow: hidden; z-index: 0; }

.bn-hero-grid {
  display: flex;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
}
.bn-hero-grid > .bn-hero-copy  { flex: 1 1 520px; min-width: 320px; }
.bn-hero-grid > .bn-stat-panel { flex: 0 1 360px; min-width: 280px; }

@media (max-width: 900px) {
  .bn-hero-grid { flex-direction: column; align-items: stretch; }

  /* flex-basis (520px / 360px) dimensiona WIDTH en flex-direction:row, pero al
     pasar a flex-direction:column esa misma base pasa a dimensionar HEIGHT —
     forzando una altura fija sin relación con el contenido real. */
  .bn-hero-grid > .bn-hero-copy,
  .bn-hero-grid > .bn-stat-panel {
    flex: 1 1 auto;
    height: auto;
    min-width: 0;
  }
}

.bn-hero-pillars {
  font-weight: 600;
  line-height: 1.7;
  color: #D4D4D8;
  margin: 0 0 28px;
}

.bn-stat-panel {
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 32px 28px;
  background: rgba(255,255,255,0.035);
}
.bn-stat-number  { font-size: 4.5rem; line-height: 1; margin: 0; font-weight: 700; }
.bn-stat-caption { margin: 8px 0 24px; color: #D4D4D8; }
.bn-spec-row {
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  margin: 0;
  font-size: 14px;
  color: #D4D4D8;
}

/* --------------------------------------------------------------------------
   Nexus visual: canvas de nodos/conexiones detrás del contenido del hero
   -------------------------------------------------------------------------- */
.bn-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.bn-hero-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Pillars — lista "Lo que hacemos" (divisores horizontales, sin cards)
   -------------------------------------------------------------------------- */
.bn-pillars-list { margin-top: 32px; }
.bn-pillar {
  padding-block: 28px;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.bn-pillar:first-child { border-top: none; padding-top: 0; }
.bn-pillar-num {
  margin: 0 0 8px;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
}
.bn-pillar-tags {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.6;
  margin: 0 0 12px;
}
.bn-pillar p:last-child { margin: 0; }

/* Variante clara del divisor para secciones sobre fondo oscuro (hero, CTA) */
.bn-hero .bn-pillar,
.bn-cta .bn-pillar { border-top-color: rgba(255,255,255,0.14); }

/* --------------------------------------------------------------------------
   Chips — pastillas de texto (ecosistema / servicios)
   -------------------------------------------------------------------------- */
.bn-ecosystem-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.bn-chip {
  margin: 0;
  padding: 8px 16px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
/* Variante oscura: sección marcada con .bn-dark necesita borde claro */
.bn-dark .bn-chip { border-color: rgba(255,255,255,0.25); color: inherit; }

/* --------------------------------------------------------------------------
   CTA final — único bloque centrado del sitio (el resto es alineado a la izquierda)
   -------------------------------------------------------------------------- */
.bn-cta h2,
.bn-cta > .bn-container > p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.bn-cta .wp-block-buttons { justify-content: center; }

/* --------------------------------------------------------------------------
   Formulario de leads ("Analizar mi sitio") — inc/leads.php (Sept 2026).
   Vive dentro de .bn-cta (fondo oscuro, texto blanco por style inline),
   por eso los campos usan blancos translúcidos en vez de los grises del
   resto del sitio. Centrado igual que el resto del bloque CTA (ver arriba).
   -------------------------------------------------------------------------- */
.bn-lead-form-wrap {
  margin: 32px auto 0;
  max-width: 480px;
  text-align: left;
}
/* Honeypot: invisible para una persona (posicionado fuera de pantalla),
   presente en el DOM para que un bot de formularios lo rellene y así
   se pueda descartar el envío sin exponer nada al usuario real. */
.bn-lead-field-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
}
.bn-lead-row { margin-bottom: 16px; }
.bn-lead-row label {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  opacity: 0.8;
}
.bn-lead-row input,
.bn-lead-row textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color: inherit;
  font: inherit;
}
.bn-lead-row input::placeholder,
.bn-lead-row textarea::placeholder { color: rgba(255,255,255,0.5); }
.bn-lead-row input:focus,
.bn-lead-row textarea:focus {
  outline: 2px solid #007CBA;
  outline-offset: 1px;
}
.bn-lead-submit {
  display: inline-block;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.bn-lead-message {
  padding: 16px 20px;
  border-radius: 8px;
  max-width: 480px;
  margin: 32px auto 0;
  text-align: left;
}
.bn-lead-message--ok { background: rgba(46, 204, 113, 0.15); border: 1px solid rgba(46, 204, 113, 0.4); }
.bn-lead-message--error { background: rgba(231, 76, 60, 0.15); border: 1px solid rgba(231, 76, 60, 0.4); }
.bn-contact-direct { margin-top: 24px; font-size: 15px; }
.bn-contact-direct a { color: inherit; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Página TinyCRM (post 31, /31-2/) — placeholder "producto en desarrollo"
   -------------------------------------------------------------------------- */
/* Usa page-31.php (ver ese archivo), que NO agrega su propio wrapper
   .bn-section/.bn-container porque el contenido de la página ya trae el
   suyo. Acá solo se define el tratamiento oscuro — reemplaza el hack
   #050505/#f5f5f5 de producción (documentado como inconsistente en
   BLACKNEXUS-DESIGN-SYSTEM.md §7.4) por la paleta real de marca, la misma
   que Hero y CTA final. Añadido en la revisión post-activación (Sept 2026).

   IMPORTANTE: el selector se ancla a "#primary" (el <main> de header.php),
   no a ".page-id-31" solo — .bn-topbar TAMBIÉN carga la clase .bn-section
   (ver header.php: <header class="bn-section bn-topbar">), así que un
   selector ".page-id-31 .bn-section" sin ese anclaje oscurece por error el
   topbar entero del sitio en esta página. Encontrado en la verificación
   visual de este mismo fix, antes de subirlo — nunca llegó a producción. */
.page-id-31 #primary .bn-section {
  background: #0A0A0C;
  color: #FFFFFF;
  text-align: center;
  padding-block: 120px;
}
.page-id-31 #primary .bn-eyebrow { color: #D4D4D8; }
.page-id-31 #primary .bn-lede { margin-left: auto; margin-right: auto; }
@media (max-width: 782px) {
  .page-id-31 #primary .bn-section { padding-block: 72px; }
}