/* ============================================================
   BASTIONE — Sistema de identidad de marca (fuente única)
   Manual de Marca V4.0 «Mármol y neón» (18-sep-2026), cara oscura:
   negro + una sola familia de verdes (bosque → esmeralda → neón),
   JAMÁS oro. Archivo condensada en titulares, Inter para leer,
   JetBrains Mono para cejas y el nombre del producto.
   El logotipo es el SVG oficial de Legaltech (brand/…-blanco.svg).
   ============================================================ */

:root{
  /* --- Marca (valores del manual; los nombres viejos se conservan) --- */
  --b-green:#0B3B27;        /* bosque */
  --b-green-2:#0B3B27;
  --b-emerald:#0FA56D;      /* esmeralda */
  --b-emerald-600:#067A50;  /* esmeralda de texto / líneas */
  --b-emerald-400:#1FE08F;  /* neón: solo detalles pequeños, nunca fondo */
  --b-emerald-300:#8CEFC0;  /* tinte claro del neón, para texto sobre negro */

  /* --- Superficies (cara oscura de la marca) --- */
  --b-black:#040605;
  --b-ink:#070B09;          /* noche: fondo de página */
  --b-surface:#0c130f;      /* panel */
  --b-surface-2:#101a14;    /* tarjeta */
  --b-line:rgba(15,165,109,.16);
  --b-text:#eaf3ec;
  --b-soft:#b6ccc0;
  --b-muted:#7e948a;

  /* --- Tipografía --- */
  --b-font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --b-font-disp:'Archivo','Arial Narrow',system-ui,sans-serif;   /* titulares, con font-stretch:88% */
  --b-font-serif:var(--b-font-disp);                             /* alias viejo: ya no es serif */
  --b-font-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;

  --b-nav-h:60px;
}

/* Textura de marca: malla de puntos esmeralda muy tenue */
.b-dots{
  background-image:radial-gradient(circle, rgba(15,165,109,.10) 1px, transparent 1px);
  background-size:34px 34px;
}

/* ============ NAVBAR DE MARCA ============ */
.bnav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:16px;
  height:var(--b-nav-h); padding:0 16px;
  background:#000;
  border-bottom:2px solid var(--b-emerald-600);
  box-shadow:0 8px 30px -14px rgba(0,0,0,.85);
}
.bnav-brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; flex:none;
  transition:transform .2s; }
.bnav-brand:hover{ transform:scale(1.03); }
.bnav-logo{ height:44px; width:auto; object-fit:contain; display:block; }
/* El nombre del producto junto al logotipo, tras una línea fina (patrón «CUENTA» de micuenta) */
.bnav-badge{
  font-family:var(--b-font-mono); font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.22em; line-height:24px;
  color:var(--b-emerald-400);
  padding-left:13px; border-left:1px solid rgba(255,255,255,.16);
  white-space:nowrap;
}
.bnav-tabs{ display:flex; gap:3px; margin-left:auto; flex-wrap:wrap; align-items:center; }
.bnav-tab{
  font-family:var(--b-font-sans); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.17em;
  color:#8aa294; text-decoration:none;
  padding:9px 13px; border-radius:9px; border:1px solid transparent; white-space:nowrap;
  transition:color .15s, border-color .15s, background .15s;
}
.bnav-tab:hover{ color:var(--b-emerald-300); background:rgba(15,165,109,.06); }
.bnav-tab.on{ color:var(--b-emerald-300); border-color:rgba(15,165,109,.4); background:rgba(15,165,109,.1); }

/* ============ ÁTOMOS DE MARCA ============ */
/* Eyebrow: etiqueta esmeralda en mayúsculas con líneas, firma visual de la marca */
.b-eyebrow{
  display:inline-flex; align-items:center; gap:.75em;
  font-family:var(--b-font-mono); font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.34em; color:var(--b-emerald-400);
}
.b-eyebrow::before, .b-eyebrow::after{ content:""; width:26px; height:2px; background:var(--b-emerald-600); opacity:.65; }
.b-eyebrow.solo::after{ display:none; }

/* Wordmark serif (estilo BASTIONE) */
.b-serif{ font-family:var(--b-font-disp); font-stretch:88%; }

/* ============ FOOTER DE MARCA ============ */
.b-foot{
  background:#000; border-top:8px solid var(--b-emerald-600);
  color:#9fb3a8; padding:34px 18px 26px; font-family:var(--b-font-sans);
}
.b-foot-inner{
  max-width:1180px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:22px 44px; align-items:center; justify-content:space-between;
}
.b-foot-logo{ height:104px; width:auto; opacity:.95; }
.b-foot-tag{ font-size:.84rem; line-height:1.55; max-width:460px; opacity:.85; }
.b-foot-tag b{ color:var(--b-emerald-400); font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.b-foot-tag a{ color:var(--b-emerald-300); text-decoration:none; border-bottom:1px dashed rgba(140,239,192,.4); }
.b-foot-copy{
  max-width:1180px; margin:20px auto 0; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.66rem; text-transform:uppercase; letter-spacing:.22em; font-weight:800;
  opacity:.5; text-align:center;
}

@media (max-width:560px){
  .bnav{ gap:8px; padding:0 10px; }
  .bnav-badge{ display:none; }
  .bnav-logo{ height:34px; }
  .bnav-tab{ padding:8px 9px; letter-spacing:.1em; }
}