/* ============================================================================
   FIRMUM — Design System  (handoff for Symfony/Twig implementation)
   Editorial-terminal identity · Registry Green rebrand
   One stylesheet, token-driven. Every page links this file.
   ============================================================================ */

/* ---- Fonts (web) --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ============================================================================
   TOKENS
   ============================================================================ */
:root{
  /* Two-tone discipline + single accent */
  --ink:        #0B0B0C;   /* near-black */
  --paper:      #F5F4EF;   /* off-white  */
  --white:      #FFFFFF;
  --accent:     #14402E;   /* Registry Green — brand + interactive ONLY */
  --accent-700: #0F3324;   /* hover/darker */
  --accent-500: #1E5740;   /* lighter line */
  --accent-tint:#E9EEEA;   /* faint green wash for blocks */
  --accent-ghost:#14402E14;/* 8% green for hovers/tints */

  /* Neutral scale (warm, derived from paper/ink) */
  --ink-90:  #0B0B0Ce6;
  --ink-70:  #0B0B0Cb3;
  --ink-55:  #0B0B0C8c;   /* muted body / labels */
  --ink-40:  #0B0B0C66;   /* faint meta */
  --ink-25:  #0B0B0C40;
  --line:    #0B0B0C1f;   /* hairline borders ~12% */
  --line-2:  #0B0B0C12;   /* fainter rule */
  --panel:   #EFEDE6;     /* recessed panel on paper */
  --panel-2: #EAE8E0;

  /* Status palette — DELIBERATELY a different family from brand forest.
     Muted earth tones + shape-coding (see .status). Never pure brand green. */
  --st-activa:  #5C8A5A;  /* sage  ● */
  --st-suspensa:#B0892F;  /* ochre ◧ */
  --st-dissol:  #A24A3C;  /* brick ◆ */
  --st-desconh: #9A988F;  /* warm grey ● */

  /* Spacing scale (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Section rhythm (unified) */
  --section-y: var(--s9);
  --section-y-mobile: var(--s8);

  /* Radius — restrained, official */
  --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:6px;

  /* Type */
  --f-display:'Archivo', system-ui, sans-serif;
  --f-body:'IBM Plex Sans', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --header-h: 64px;
  --ticker-h: 30px;
}

/* ============================================================================
   RESET / BASE
   ============================================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{
  margin:0; padding:0;
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body);
  font-size:16px; line-height:1.5;
  overflow-x:hidden;            /* hard stop on horizontal scroll, all pages */
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body{ min-width:0; }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--accent); color:var(--paper); }

.container{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter);
}

/* ============================================================================
   TYPE SYSTEM
   ============================================================================ */
.display{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:0.98; letter-spacing:-0.025em;
  text-wrap:balance;
}
.display--xl{ font-size:clamp(3rem, 7.5vw, 5.6rem); }
.h2{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.7rem, 3.4vw, 2.5rem);
  line-height:1.02; letter-spacing:-0.02em; text-wrap:balance;
}
.h3{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.15rem, 2vw, 1.45rem);
  line-height:1.1; letter-spacing:-0.01em;
}
.lede{
  font-size:clamp(1rem, 1.4vw, 1.18rem); line-height:1.55;
  color:var(--ink-70); max-width:54ch; text-wrap:pretty;
}
.body{ color:var(--ink-70); text-wrap:pretty; }

/* Uppercase mono letter-spaced label — the identity workhorse */
.label{
  font-family:var(--f-mono); font-weight:500;
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-55);
}
.label--accent{ color:var(--accent); }
.label--sm{ font-size:0.66rem; letter-spacing:0.16em; }
.mono{ font-family:var(--f-mono); }
.num{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }

/* ============================================================================
   LIVE FEED TICKER  (contained — never causes body overflow)
   ============================================================================ */
.ticker{
  height:var(--ticker-h); background:var(--ink); color:var(--paper);
  display:flex; align-items:center; overflow:hidden;
  font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.06em;
  position:relative; z-index:60; width:100%;
}
.ticker__tag{
  flex:0 0 auto; display:flex; align-items:center; gap:var(--s2);
  height:100%; padding:0 var(--s4); background:var(--accent);
  font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  font-size:0.66rem; white-space:nowrap; z-index:2;
}
.ticker__dot{
  width:6px; height:6px; border-radius:50%; background:#7FE0A8;
  box-shadow:0 0 0 0 #7FE0A8aa; animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 #7FE0A899; }
  70%{ box-shadow:0 0 0 6px #7FE0A800; }
  100%{ box-shadow:0 0 0 0 #7FE0A800; }
}
.ticker__view{ flex:1 1 auto; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent); mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent); }
.ticker__track{
  display:inline-flex; align-items:center; white-space:nowrap;
  will-change:transform; animation:marquee 60s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{ display:inline-flex; align-items:center; gap:var(--s3); padding:0 var(--s5); color:#cfceC8; }
.ticker__co{ color:var(--paper); font-weight:500; }
.ticker__sep{ color:var(--accent-500); }
.ticker__time{ color:#8FB9A4; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none; } }

/* ============================================================================
   HEADER + NAV
   ============================================================================ */
.site-header{
  position:sticky; top:0; z-index:50; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-bar{
  height:var(--header-h); display:flex; align-items:center; gap:var(--s5);
}
.brand{ display:flex; align-items:center; gap:var(--s3); flex:0 0 auto; }
.brand__word{ font-family:var(--f-display); font-weight:800; font-size:1.32rem; letter-spacing:-0.02em; color:var(--ink); }
.brand .logo-mark{ width:30px; height:30px; color:var(--accent); }

.nav{ display:flex; align-items:center; gap:var(--s5); margin-left:var(--s4); }
.nav-link{
  font-size:0.94rem; color:var(--ink-70); padding:var(--s2) 0; position:relative;
  transition:color .15s;
}
.nav-link:hover{ color:var(--ink); }
.nav-link.is-active{ color:var(--accent); font-weight:600; }
.nav-link.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); }

.header-right{ display:flex; align-items:center; gap:var(--s4); margin-left:auto; }

/* compact search affordance in header */
.search-pill{
  display:flex; align-items:center; gap:var(--s3);
  height:38px; padding:0 var(--s3) 0 var(--s4);
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--white); color:var(--ink-55); font-size:0.86rem;
  min-width:180px; cursor:text;
}
.search-pill kbd{
  margin-left:auto; font-family:var(--f-mono); font-size:0.66rem;
  border:1px solid var(--line); border-radius:3px; padding:1px 5px; color:var(--ink-40);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--f-body); font-size:0.92rem; font-weight:600; line-height:1;
  padding:0 var(--s5); height:40px; border-radius:var(--r-sm);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s, transform .05s;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--accent); color:var(--paper); border-color:var(--accent); }
.btn--primary:hover{ background:var(--accent-700); border-color:var(--accent-700); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--text{ background:transparent; color:var(--ink); border:0; padding:0 var(--s2); height:auto; }
.btn--text:hover{ color:var(--accent); }
.btn--lg{ height:48px; font-size:1rem; padding:0 var(--s6); }
.btn--block{ width:100%; }
.btn--on-dark.btn--ghost{ color:var(--paper); border-color:#ffffff33; }
.btn--on-dark.btn--ghost:hover{ border-color:#ffffff99; }

/* ============================================================================
   CARDS / PANELS
   ============================================================================ */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
}
.card--pad{ padding:var(--s5); }
.card--paper{ background:transparent; }
.card--hover{ transition:border-color .15s, box-shadow .15s; }
.card--hover:hover{ border-color:var(--ink-40); }
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.rule--strong{ background:var(--ink); height:2px; }

/* breadcrumb / kicker */
.crumbs{ font-family:var(--f-mono); font-size:0.74rem; color:var(--ink-40); letter-spacing:0.04em; }
.crumbs a{ color:var(--ink-55); } .crumbs a:hover{ color:var(--accent); }
.kicker{ display:inline-flex; align-items:center; gap:var(--s2); }
.kicker__bar{ width:18px; height:2px; background:var(--accent); }

/* ============================================================================
   STATUS — distinct from brand green. shape + muted colour (redundant coding)
   ============================================================================ */
.status{ display:inline-flex; align-items:center; gap:var(--s2); font-size:0.86rem; color:var(--ink-70); }
.status__dot{ width:9px; height:9px; flex:0 0 auto; }
.status--activa   .status__dot{ background:var(--st-activa);   border-radius:50%; }
.status--suspensa .status__dot{ background:var(--st-suspensa); border-radius:1px; }   /* square */
.status--dissol   .status__dot{ background:var(--st-dissol);   border-radius:1px; transform:rotate(45deg); } /* diamond */
.status--desconh  .status__dot{ background:transparent; border:1.5px solid var(--st-desconh); border-radius:50%; } /* hollow */
.status--activa{ color:#3f6b3e; } .status--suspensa{ color:#7d611f; }
.status--dissol{ color:#7a382e; } .status--desconh{ color:var(--ink-55); }

/* status as a chip */
.status-chip{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  padding:4px 10px 4px 8px; border:1px solid var(--line); border-radius:100px; background:var(--white);
}

/* ============================================================================
   STAT BLOCK (reusable — from person page)
   ============================================================================ */
.stats{ display:grid; gap:var(--s5); grid-template-columns:repeat(4,1fr); }
.stat__num{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.2rem,4vw,3rem); line-height:1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.stat__label{ margin-top:var(--s3); }

/* ============================================================================
   DATA ROWS (officers, acts, results)
   ============================================================================ */
.drow{ display:flex; align-items:center; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--line-2); }
.tag{
  display:inline-flex; align-items:center; font-family:var(--f-mono);
  font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase;
  padding:3px 8px; border:1px solid var(--line); border-radius:var(--r-xs);
  color:var(--ink-55); background:var(--white); white-space:nowrap;
}
.tag--accent{ color:var(--accent); border-color:var(--accent-500); background:var(--accent-ghost); }

/* search result row */
.result{ display:block; padding:var(--s4) var(--s5); border:1px solid var(--line); border-radius:var(--r-md); background:var(--white); transition:border-color .15s, background .15s; }
.result + .result{ margin-top:var(--s3); }
.result:hover{ border-color:var(--accent-500); }
.result__name{ font-weight:600; font-size:1.02rem; }
.result__name u{ text-decoration-color:var(--ink-25); text-underline-offset:3px; }
.result__nipc{ font-family:var(--f-mono); font-size:0.8rem; color:var(--ink-40); margin-top:4px; }

/* ============================================================================
   EMPTY STATE — "not yet indexed", deliberately NOT broken-looking
   ============================================================================ */
.empty{
  border:1px dashed var(--ink-25); border-radius:var(--r-md);
  background:repeating-linear-gradient(135deg,transparent,transparent 9px,#0b0b0c08 9px,#0b0b0c08 10px);
  padding:var(--s6) var(--s5); text-align:center;
}
.empty__mark{ width:34px; height:34px; margin:0 auto var(--s3); color:var(--ink-25); }
.empty__title{ font-family:var(--f-mono); font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-55); }
.empty__msg{ margin-top:var(--s2); font-size:0.92rem; color:var(--ink-55); max-width:46ch; margin-inline:auto; text-wrap:pretty; }
.empty--inline{ padding:var(--s5); text-align:left; display:flex; gap:var(--s4); align-items:flex-start; }
.empty--inline .empty__mark{ margin:2px 0 0; flex:0 0 auto; width:26px; height:26px; }

/* small "—" placeholder used in spec rows; make it intentional not blank */
.nodata{ color:var(--ink-25); font-family:var(--f-mono); }
.nodata::after{ content:" · não indexado"; font-size:0.72rem; letter-spacing:0.04em; }

/* ============================================================================
   FORM / NIF INPUT
   ============================================================================ */
.field-label{ display:block; margin-bottom:var(--s2); }
.input{
  width:100%; height:48px; padding:0 var(--s4); background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-sm); font-family:var(--f-mono);
  font-size:1rem; color:var(--ink);
}
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ghost); }
.input::placeholder{ color:var(--ink-25); }

.searchbar{ display:flex; border:1px solid var(--ink); border-radius:var(--r-md); overflow:hidden; background:var(--white); }
.searchbar .input{ border:0; border-radius:0; height:60px; font-size:1.1rem; }
.searchbar .btn{ border-radius:0; height:auto; padding-inline:var(--s6); }

/* segmented toggle (Pessoa singular | ROC) — strong active state */
.segmented{ display:inline-flex; padding:3px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); gap:2px; }
.segmented__opt{
  font-family:var(--f-mono); font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:8px 16px; border-radius:var(--r-sm); color:var(--ink-55); cursor:pointer; border:0; background:transparent;
}
.segmented__opt[aria-pressed="true"]{ background:var(--accent); color:var(--paper); font-weight:600; }

/* ============================================================================
   FOOTER
   ============================================================================ */
.site-footer{ border-top:1px solid var(--line); padding:var(--s8) 0 var(--s6); margin-top:var(--s9); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s6); }
.footer-col h4{ margin-bottom:var(--s4); }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3); }
.footer-col a{ color:var(--ink-70); font-size:0.92rem; } .footer-col a:hover{ color:var(--accent); }
.footer-bottom{ display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line-2); }
.footer-meta{ font-family:var(--f-mono); font-size:0.72rem; color:var(--ink-40); letter-spacing:0.03em; }

/* ============================================================================
   MOBILE DRAWER + HAMBURGER
   ============================================================================ */
.hamburger{
  display:none; width:42px; height:42px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; color:var(--ink);
}
.hamburger svg{ width:20px; height:20px; }
.drawer-backdrop{
  position:fixed; inset:0; background:#0b0b0c80; opacity:0; visibility:hidden;
  transition:opacity .22s; z-index:90;
}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(86vw,360px);
  background:var(--paper); z-index:100; transform:translateX(100%);
  transition:transform .26s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column;
  border-left:1px solid var(--line); box-shadow:-20px 0 60px #0b0b0c2e;
}
body.drawer-open .drawer{ transform:translateX(0); }
body.drawer-open .drawer-backdrop{ opacity:1; visibility:visible; }
body.drawer-open{ overflow:hidden; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:var(--s4) var(--s5); border-bottom:1px solid var(--line); height:calc(var(--header-h) + 1px); }
.drawer__close{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--r-sm); background:transparent; cursor:pointer; }
.drawer__nav{ display:flex; flex-direction:column; padding:var(--s3) var(--s4); gap:2px; overflow-y:auto; }
.drawer__link{ display:flex; align-items:center; justify-content:space-between; padding:var(--s4); font-size:1.1rem; border-radius:var(--r-sm); color:var(--ink); }
.drawer__link:hover, .drawer__link.is-active{ background:var(--accent-ghost); color:var(--accent); }
.drawer__link .label{ font-size:0.6rem; }
.drawer__foot{ margin-top:auto; padding:var(--s5); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:var(--s3); }

/* ============================================================================
   SECTION RHYTHM
   ============================================================================ */
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:var(--s8); }
.section + .section{ border-top:1px solid var(--line); }
.section__head{ margin-bottom:var(--s7); }

/* hero (dark) */
.hero{ background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.hero .label{ color:#8FB9A4; }
.hero .lede{ color:#cfceC8; }

/* pricing tiers */
.tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }
.tier{ border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s5); background:var(--white); display:flex; flex-direction:column; gap:var(--s3); }
.tier--featured{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.tier__price{ font-family:var(--f-display); font-weight:800; font-size:2rem; letter-spacing:-0.02em; }
.tier__feat{ list-style:none; margin:var(--s3) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--s2); font-size:0.88rem; color:var(--ink-70); }
.tier__feat li{ padding-left:var(--s4); position:relative; }
.tier__feat li::before{ content:"·"; position:absolute; left:2px; color:var(--accent); font-weight:700; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:920px){
  :root{ --section-y:var(--section-y-mobile); }
  .nav{ display:none; }
  .search-pill{ display:none; }
  .header-right .btn--entrar{ display:none; }   /* moves into drawer */
  .hamburger{ display:inline-flex; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:var(--s5) var(--s4); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--s6) var(--s4); }
  .tiers{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .stats{ grid-template-columns:1fr 1fr; }
  .tiers{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .searchbar{ flex-direction:column; }
  .searchbar .btn{ padding-block:var(--s4); }
  .footer-bottom{ flex-direction:column; }
  .display{ font-size:clamp(2.2rem,9vw,3rem); }
}

/* utility */
.flex{ display:flex; } .items-center{ align-items:center; } .gap-2{ gap:var(--s2); } .gap-3{ gap:var(--s3); } .gap-4{ gap:var(--s4); }
.between{ justify-content:space-between; } .wrap{ flex-wrap:wrap; }
.grid{ display:grid; } .mt-2{ margin-top:var(--s2); } .mt-3{ margin-top:var(--s3); } .mt-4{ margin-top:var(--s4); } .mt-5{ margin-top:var(--s5); } .mt-6{ margin-top:var(--s6); } .mt-7{ margin-top:var(--s7); }
.muted{ color:var(--ink-55); } .faint{ color:var(--ink-40); }
.hide-mobile{ } @media (max-width:920px){ .hide-mobile{ display:none !important; } }
.show-mobile{ display:none !important; } @media (max-width:920px){ .show-mobile{ display:revert !important; } }