/* ============================================================
   SIGINT — Contravigilancia Táctica
   Design system · derived from Manual de Marca
   ============================================================ */

/* Cuerpo (Roboto) y monoespaciada (Roboto Mono). Los títulos usan Articulat CF
   (self-host, abajo). Archivo/Space Grotesk/Manrope se quitaron: no se usaban. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

/* Articulat CF — fuente de marca (solo Bold). WOFF2 subseteado a Latin +
   puntuación (~20 KB); el .ttf queda como fallback para navegadores viejos.
   font-weight:400 900 = un único archivo Bold cubre todo el rango de display. */
@font-face{
  font-family:'Articulat CF';
  src:url('../fonts/ArticulatCF-Bold.woff2') format('woff2'),
      url('../fonts/ArticulatCF-Bold.ttf') format('truetype');
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Brand palette (manual de marca) */
  --rojo:#CB3C3B;
  --negro:#232020;
  --gris:#929292;
  --blanco:#FDFDFD;

  /* Derived surfaces (warm near-blacks) */
  --bg:        #161313;
  --bg-2:      #1c1818;
  --panel:     #211d1d;
  --panel-2:   #262121;
  --line:      rgba(146,146,146,.18);
  --line-2:    rgba(146,146,146,.30);
  --ink:       #FDFDFD;
  --ink-dim:   #b9b4b2;
  --ink-mute:  #8c8784;

  /* Accent (tweakable) */
  --accent:    #CB3C3B;
  --accent-ink:#fff;
  --accent-glow: rgba(203,60,59,.45);

  --f-display: 'Articulat CF', system-ui, sans-serif;
  --f-body:    'Roboto', system-ui, sans-serif;
  --f-mono:    'Roboto Mono', ui-monospace, monospace;

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.005em;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

/* ---- Typographic primitives ---- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.eyebrow b{color:var(--accent);font-weight:500}
.bracket::before{content:"[ ";color:var(--accent)}
.bracket::after{content:" ]";color:var(--accent)}

h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:0}
.display{
  /* nowrap + el <br> => SIEMPRE 2 líneas, nunca se parte una (no más "LO" suelto).
     El tamaño está afinado para que la línea más larga ("LO ENCONTRAMOS.", ~8.8×
     el font-size en Articulat) entre en la columna del hero en cada layout.
     Acá: layout a 2 columnas (desktop). El de 1 columna está en sections.css. */
  font-size:clamp(48px,4.8vw,64px);
  font-weight:900;
  letter-spacing:-.035em;
  text-transform:uppercase;
  white-space:nowrap;
}
.h2{font-size:clamp(30px,4.4vw,60px);text-transform:uppercase;letter-spacing:-.025em}
.lead{font-size:clamp(17px,1.5vw,21px);color:var(--ink-dim);font-weight:300;max-width:60ch}

.shell{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
section{position:relative}

/* hairline divider with registration tick */
.rule{height:1px;background:var(--line);position:relative}
.rule::before{content:"";position:absolute;left:var(--gut);top:-3px;width:7px;height:7px;border:1px solid var(--accent);background:var(--bg)}

/* ---- Buttons ---- */
.btn{
  --b:var(--accent);
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 22px;border:1px solid var(--b);color:var(--ink);
  background:transparent;cursor:pointer;position:relative;transition:.25s ease;
  white-space:nowrap;
}
.btn .dot{width:7px;height:7px;background:var(--b);border-radius:50%}
.btn--solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--solid .dot{background:#fff}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 1px var(--accent),0 14px 40px -12px var(--accent-glow)}
.btn:hover .dot{background:#fff}
.btn--ghost{border-color:var(--line-2)}
.btn--ghost:hover{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none}

/* corner crop marks utility */
.crops{position:relative}
.crops::before,.crops::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--line-2);pointer-events:none}
.crops::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.crops::after{right:-1px;bottom:-1px;border-left:0;border-top:0}

/* reveal */
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-rv].in{opacity:1;transform:none}
[data-rv-d="1"]{transition-delay:.08s}
[data-rv-d="2"]{transition-delay:.16s}
[data-rv-d="3"]{transition-delay:.24s}
[data-rv-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){[data-rv]{opacity:1;transform:none}}

/* ---- Brand lockup (isologo SIGINT) ---- */
.logo{
  display:inline-flex;align-items:center;line-height:1;white-space:nowrap;
  font-family:var(--f-display);font-weight:800;font-size:21px;letter-spacing:.005em;
  text-transform:uppercase;color:var(--ink);
}
.logo-g{width:.82em;height:.82em;margin:0 .01em;color:var(--rojo);flex:none;transform:translateY(1%)}
.logo--lg{font-size:clamp(30px,4vw,42px)}
.logo-lockup{display:inline-flex;flex-direction:column;align-items:flex-start;gap:7px}
.logo-sub{
  font-family:var(--f-body);font-weight:400;font-size:.32em;letter-spacing:.12em;
  text-transform:none;color:var(--ink-dim);padding-left:.05em;white-space:nowrap;
}
.logo--lg + .logo-sub,.logo-lockup .logo-sub{font-size:13px}

/* ---- Logos en imagen (PNG transparente, blanco + isotipo rojo) ---- */
.brand-logo{height:26px;width:auto;display:block}
.ftr-logo{height:58px;width:auto;max-width:100%;display:block}
@media(max-width:560px){.brand-logo{height:23px}}