/* vistoeb2.net — shared foundation for every page.
   Page-specific sections stay inline in each page's own <style>.
   Sourced from the approved homepage build; see docs/design.md. */

:root{
  --color-primary:#073A3E; --color-primary-deep:#06292D; --color-surface-dark:#0A4448;
  --color-on-primary:#F4F7F5; --color-on-primary-muted:#8FA6A3; --color-border-dark:#17494D;
  --color-surface:#FCFCFC; --color-surface-2:#F1F2F3; --color-on-surface:#12211F;
  /* Body copy on light surfaces. Darkened from #586B68 (5.5:1) on 2026-07-21 — long
     PT-BR paragraphs read better with more weight behind them.
     Measured on BOTH surfaces, because half the sections are tinted: 7.70:1 on
     --color-surface and 7.04:1 on --color-surface-2, so it clears AAA (7:1) on either.
     The obvious pick, #445653, hit 6.93 on the tint and missed AAA there by a hair.
     The gap to --color-on-surface stays 2.1x, so muted text still reads a step below a
     heading instead of merging with it. */
  --color-on-surface-muted:#435552; --color-border:#E5E7E9; --color-ghost:#C4CCC6;
  --color-accent:#FFED4E; --color-on-accent:#06292D;
  /* Quiet accent for micro-details on light surfaces, where --color-accent is unreadable.
     Darkened from the brand emerald to clear WCAG AA (5.18:1) as text. */
  --color-accent-quiet:#0B7A5C;
  /* Vivid brand emerald. Only for large text and graphic marks: at 3.09:1 it fails AA
     as small text — use --color-accent-quiet there instead. */
  --color-emerald:#10A47C;
  /* Line-icon stroke. Deliberately darker than --color-ghost: at 1.5px a lighter gray
     drops to ~2:1 on the gray card and visually dissolves. This holds ~3.2:1. */
  --color-icon-line:#7E8A87;
  --color-accent-cyan:#68D1EE;
  /* Semantic. Previously referenced by the quiz but never defined — the success
     check rendered transparent and errors rendered as body text. */
  --color-success:#3AA76D;
  --color-error:#C0472F;
  --color-accent-hover:#EFDA2E;
  --font-sans:'Inter',system-ui,sans-serif;
  --font-display:'Inter Tight',system-ui,sans-serif;
  --font-mono:'Inter',system-ui,sans-serif;
  --rounded-sm:4px; --rounded-md:10px; --rounded-lg:16px; --rounded-xl:22px; --rounded-pill:999px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* Desktop height of the sticky header. It is not a local value: the "Neste guia" bar
     sticks directly under it, anchored headings clear both, and the FAQ heading sticks
     below them — six rules used to repeat the number and drift apart. Change it here only.
     The mobile step-downs stay literal in their media queries (76 / 64), so this knob is
     desktop-only by design.
     --toc-h is the measured height of that bar (52px, not the 42 an older comment claimed)
     and --sticky-gap is the breathing room anchored headings keep below the pair. */
  --head-h:84px; --toc-h:52px; --sticky-gap:2px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-surface);color:var(--color-on-surface);font-family:var(--font-sans);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
/* Visible to screen readers only — e.g. a <caption> that names a table without showing it. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 90vw fluid container */
.wrap{width:90vw;margin-inline:auto}
.mono{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}

/* ---------- reveal: ease-out ---------- */
.reveal{opacity:0;transform:translateY(44px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal-img{opacity:0;transform:translateY(30px) scale(.985);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.reveal-img.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:.08s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.24s}
.stagger.in>*:nth-child(5){transition-delay:.32s}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  /* `translate` is reset alongside `transform`: an element whose entrance offset rides
     the independent property (see .fcard) would otherwise stay pushed down for good,
     because resetting transform does not touch it. */
  .reveal,.reveal-img,.stagger>*{opacity:1 !important;transform:none !important;translate:none !important;transition:none !important}
}

/* ---------- thin header (v4, Figma 57:460 — seamless dark green, 100px) ---------- */
.site-head{position:sticky;top:0;z-index:100;background:var(--color-primary)}
.site-head .bar{display:flex;align-items:center;gap:24px;width:90vw;margin:0 auto;min-height:var(--head-h);padding:0}
.logo{display:flex;align-items:center;text-decoration:none}
.logo-img{height:44px;width:auto;display:block}
/* Six items now, where four used to fit with ~105px to spare at 961px. The gap carries the
   difference instead of the type: it opens to 40px where there is room and closes to 22px
   at the narrow end, so the labels never shrink and the bar never overflows into the CTA. */
nav.main{display:flex;gap:clamp(22px,2.6vw,40px);font-size:1rem;font-weight:400;margin:0 auto}
nav.main a{text-decoration:none;color:#d6e2e0;transition:color .2s var(--ease-out)}
nav.main a:hover{color:#fff}
nav.main a[aria-current="page"]{color:#fff}
.head-link{flex-shrink:0;font-size:.875rem;font-weight:600;color:#fff;background:transparent;text-decoration:none;display:flex;align-items:center;gap:10px}
.head-link .dot{width:26px;height:26px;border-radius:50%;background:var(--color-accent);color:var(--color-primary);display:grid;place-items:center;font-size:12px;transition:transform .25s var(--ease-out)}
.head-link:hover .dot{transform:translateX(3px);background:var(--color-accent-hover)}
/* mobile menu (burger + drawer) */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:transparent;border:none;cursor:pointer;padding:10px;flex-shrink:0}
.burger span{display:block;width:100%;height:2px;background:#F4F7F5;border-radius:2px;transition:transform .25s var(--ease-out),opacity .2s var(--ease-out)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer[hidden]{display:none}
.drawer{border-top:1px solid var(--color-border-dark);background:var(--color-primary);padding:8px 5vw 24px}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{display:flex;align-items:center;min-height:52px;color:#d6e2e0;text-decoration:none;font-size:1.0625rem;border-bottom:1px solid var(--color-border-dark)}
.drawer nav a[aria-current="page"]{color:#fff;font-weight:600}
.drawer .drawer-cta{margin-top:20px;width:100%;justify-content:center}
/* The header was a fixed 100px bar with a 44px logo at every width — on a phone that is
   a quarter of the screen given to chrome before any content appears. Both step down
   at the breakpoints the header already uses. */
@media(max-width:960px){
  nav.main{display:none}
  .burger{display:flex}
  .head-link{margin-left:auto}
  .site-head .bar{min-height:76px;gap:16px}
  .logo-img{height:36px}
}
@media(min-width:961px){.drawer{display:none !important}}
@media(max-width:560px){
  .head-link span.t{display:none}
  .site-head .bar{min-height:64px;gap:12px}
  .logo-img{height:30px}
  .head-link .dot{width:22px;height:22px;font-size:11px}
}

/* ---------- line icons ----------
   One system for every mark on the site: thin gray geometry with a single solid
   emerald accent. Always authored on a `0 0 100 100` viewBox, then displayed at
   whatever size the module needs.

   vector-effect:non-scaling-stroke is what makes the set coherent — without it the
   same stroke-width renders ~2x heavier in a 100px box than in a 44px one, because
   the stroke scales with the viewBox. With it, 1.5 means 1.5 screen pixels anywhere. */
svg.ico{display:block}
svg.ico .ln{fill:none;stroke:var(--color-icon-line);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
svg.ico .ac{fill:var(--color-emerald)}

/* ---------- pill CTA ---------- */
/* No border: it used to be 1px of --color-primary, i.e. the exact colour of the dark
   backgrounds it was drawn on — invisible there, and a hard dark ring on light sections.
   Padding absorbs the 2px so the button keeps its size. */
.btn{display:inline-flex;align-items:center;gap:12px;font-size:.9375rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;border:none;cursor:pointer;border-radius:var(--rounded-pill);padding:14px 14px 14px 28px;text-decoration:none;background:var(--color-accent);color:var(--color-primary);transition:background .25s var(--ease-out)}
.btn .circ{width:34px;height:34px;border-radius:50%;background:transparent;color:var(--color-primary);display:grid;place-items:center;font-size:15px;transition:transform .3s var(--ease-out)}
.btn:hover{background:var(--color-accent-hover)}
.btn:hover .circ{transform:translateX(4px)}
/* 62px is a desktop size. Stepping down keeps the same proportions — the circle and the
   padding shrink together — while staying clear of the 44px minimum touch target:
   52px on tablet, 48px on phone. */
@media(max-width:960px){
  .btn{font-size:.875rem;gap:10px;padding:11px 11px 11px 22px}
  .btn .circ{width:30px;height:30px;font-size:14px}
}
@media(max-width:560px){
  .btn{font-size:.8125rem;gap:8px;padding:10px 10px 10px 20px}
  .btn .circ{width:28px;height:28px;font-size:13px}
}

/* ---------- floating CTA bar ----------
   A shortcut to the assessment for readers who are deep in a long guide. Built by app.js
   and ONLY on pages that actually host the form, so it can never point at a section that
   is not there.

   It is deliberately absent without JS: the bar's whole value is that it appears and
   disappears at the right moment, and a statically rendered one would sit over the content
   permanently — worse than not existing. The form stays reachable by scrolling and by the
   header CTA either way, so nothing is lost.

   z-index 60: above the "Neste guia" bar (20), below the header and its drawer (100). */
/* Light: solid #fff, the same surface the cards use, so the bar reads as a sheet resting on
   the page rather than a second header. A hairline alone is not enough separation over
   white content, so it also casts upward — the card shadow, flipped and kept faint: the
   bar sits over body copy the reader is still using, and a heavy edge would draw the eye
   away from it. */
/* The bar itself is only a full-width positioning track — it carries no surface of its own
   and no pointer events, so the empty space on either side of the pill never intercepts a
   click meant for the page underneath. */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;justify-content:center;pointer-events:none;
  padding:0 5vw calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateY(150%);opacity:0;visibility:hidden;
  transition:transform .35s var(--ease-out),opacity .25s var(--ease-out),visibility .35s}
.cta-bar.on{transform:none;opacity:1;visibility:visible}
/* The pill: width:auto overrides .wrap's 90vw so it shrinks to its own content and sits
   centred. One line of copy with the button beside it, the pair centred as a unit — not
   pushed to opposite edges, which on a wide screen left the two halves unrelated.
   Shadow points down and out now that it floats, rather than up off a docked edge. */
.cta-bar .wrap{pointer-events:auto;width:auto;max-width:100%;
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.5vw,28px);
  background:#fff;border:1px solid var(--color-border);border-radius:var(--rounded-pill);
  box-shadow:0 18px 40px -18px rgba(6,41,45,.28);
  padding:10px 10px 10px 28px}
.cta-bar p{margin:0;font-size:clamp(.9375rem,1.5vw,1.0625rem);line-height:1.35;font-weight:600;
  color:var(--color-on-surface)}
/* 700px, raised from 640 when the bar became a centred pill. 640 was measured against the
   old full-width bar, where the copy had 90vw to work with; the pill is narrower, so below
   ~700px the flex line was squeezed until BOTH the copy and the button's own label wrapped
   to two lines — an 89px pill with a 67px button. Below this the copy is dropped and the
   button takes the full row instead. */
@media(max-width:700px){
  /* Phone keeps the docked bar it always had: edge to edge, square, flush to the bottom,
     surface back on the bar itself. A floating pill here would either shrink the button
     below a comfortable tap width or leave almost no page visible beside it. */
  .cta-bar{display:block;pointer-events:auto;
    padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));
    background:#fff;border-top:1px solid var(--color-border);
    box-shadow:0 -14px 32px -20px rgba(6,41,45,.22);transform:translateY(110%)}
  .cta-bar.on{transform:none}
  .cta-bar .wrap{width:90vw;margin-inline:auto;
    background:none;border:0;border-radius:0;box-shadow:none;padding:0}
  .cta-bar p{display:none}
  .cta-bar .btn{width:100%;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){.cta-bar{transition:opacity .2s,visibility .2s}}

/* ---------- FAQ thin ---------- */
.faq-sec{padding:clamp(56px,12vw,150px) 0}
.faq-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(28px,4vw,80px);align-items:start}
.faq-grid h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,4vw,3.4rem);letter-spacing:-.01em;line-height:1.05;margin:0;position:sticky;top:calc(var(--head-h) + 10px)}
.faq details{border:1px solid var(--color-border);border-radius:16px;margin-bottom:12px;background:#fff}
/* Padding was a flat 24px, so tablets and phones got the same box as the desktop and the
   text sat in a lot of empty space. Now clamped: ~14/16px on a phone up to ~18/20px on
   desktop — tighter than before at every width, and it scales down proportionally instead
   of stepping at a breakpoint. The horizontal value is shared with `.a` below so the
   answer stays flush under its question. Vertical padding 18px + 17px line still clears
   the 44px touch target with room to spare (≈60px desktop, ≈52px phone). */
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:clamp(14px,1.8vw,18px) clamp(16px,2vw,20px);font-size:1.0625rem;font-weight:600;color:#12211f}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--color-accent-quiet);font-size:1.35rem;font-weight:400;flex-shrink:0;transition:transform .3s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
/* margin:0 is load-bearing — the block is spaced with padding, but the browser's default
   <p> margin was never reset, adding 15px on top of the summary's own padding and pushing
   the answer far from its question. Horizontal padding matches the summary so the answer
   lines up under it; bottom padding tracks the summary's vertical clamp. */
.faq .a{margin:0;padding:0 clamp(16px,2vw,20px) clamp(14px,1.8vw,18px);color:var(--color-on-surface-muted);font-size:1rem}
/* Smooth open/close. ::details-content is the only way to animate <details> without JS;
   interpolate-size is what lets block-size animate to `auto`. Browsers lacking either
   just open instantly — no breakage, so <details>/<summary> semantics stay intact.
   interpolate-size inherits, so it has to be declared on the root. */
@supports (interpolate-size: allow-keywords){:root{interpolate-size:allow-keywords}}
.faq details::details-content{
  block-size:0;overflow:hidden;
  transition:block-size .42s var(--ease-out),content-visibility .42s allow-discrete}
.faq details[open]::details-content{block-size:auto}
@media (prefers-reduced-motion: reduce){
  .faq details::details-content{transition:none}
  .faq summary::after{transition:none}
}
@media(max-width:820px){.faq-grid{grid-template-columns:1fr}.faq-grid h2{position:static}}

/* ---------- final: qualification quiz ---------- */
.final{background:var(--color-primary-deep);color:var(--color-on-primary)}
.final .grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(36px,5vw,90px);padding:clamp(56px,12vw,160px) 0;align-items:start}
.final .lbl{color:var(--color-accent);margin-bottom:22px;display:flex;gap:10px;align-items:center}
.final .lbl::before{content:"★";font-size:.6rem}
.final h2{font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,4.6vw,4.4rem);letter-spacing:-.01em;line-height:1.02;margin:0 0 22px;max-width:14ch}
.final h2 .yl{color:var(--color-accent)}
.final .sub{color:var(--color-on-primary-muted);max-width:38ch;margin:0 0 30px}
.assure{list-style:none;margin:0;padding:0}
.assure li{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--color-border-dark);font-size:.9rem;color:var(--color-on-primary-muted)}
.assure li::before{content:"★";color:var(--color-accent-quiet);font-size:.65rem;line-height:1.9}
/* quiz card (paper / white) */
/* container-type lets .opts below reflow on the CARD's own width, not the viewport's.
   The two are not the same thing: the card sits in the narrow right column of .final .grid
   above 900px and goes full-width below it, so a viewport media query would give two
   cramped option columns at 1024 (card ~453px) and two roomy ones at 899 (card ~756px) —
   backwards. inline-size containment measures what actually matters. */
.quiz{container-type:inline-size;background:var(--color-surface);color:var(--color-on-surface);border-radius:22px;padding:clamp(26px,3vw,40px);box-shadow:0 34px 80px -30px rgba(0,0,0,.55)}
.quiz-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:#586b68;margin-bottom:14px}
.quiz-top .pct{color:var(--color-accent-quiet);font-weight:600}
.quiz-bar{height:5px;border-radius:999px;background:var(--color-border);overflow:hidden;margin-bottom:clamp(24px,3vw,34px)}
.quiz-bar > i{display:block;height:100%;width:20%;border-radius:999px;background:linear-gradient(90deg,var(--color-accent-cyan),var(--color-accent));transition:width .45s var(--ease-out)}
.step{display:none}
.step.on{display:block;animation:stepin .45s var(--ease-out)}
@keyframes stepin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.step.on{animation:none}}
.q{font-family:var(--font-display);font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:800;letter-spacing:-.01em;line-height:1.16;margin:0 0 clamp(18px,2.4vw,26px);max-width:22ch}
/* One column by default; two only when the card is wide enough that each option keeps
   its label on roughly one line. 520px card = 2 cols at ~250px each, which is the point
   below which "Negócios / empreendedorismo" started wrapping to two lines. Capped at two
   columns on purpose (`1fr 1fr`, not auto-fit) — .wrap has no max-width, so on a 2560px
   monitor an auto-fit grid would spread the options into four or five across.
   No container-query support (old browser) → the default single column, which always
   reads fine. */
.opts{display:grid;grid-template-columns:1fr;gap:12px}
@container (min-width:520px){.opts{grid-template-columns:1fr 1fr}}
.opt{background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:17px 18px;font-family:var(--font-sans);font-size:.95rem;font-weight:600;color:var(--color-on-surface);text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;transition:border-color .25s,background .25s,transform .25s var(--ease-out),box-shadow .25s}
.opt::before{content:"";flex:0 0 20px;width:20px;height:20px;border-radius:10px;border:1px solid var(--color-border);transition:all .2s}
.opt:hover{border-color:var(--color-accent-quiet);transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(6,41,45,.5)}
.opt.sel{border-color:var(--color-primary);background:rgba(7,58,62,.05)}
.opt.sel::before{border-color:var(--color-primary);background:var(--color-primary);box-shadow:inset 0 0 0 3px var(--color-surface)}
/* (the old `@media(max-width:520px){.opts{1fr}}` is gone — the container query above now
    owns the single-column case, keyed to the card width instead of the viewport.) */
.qfields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qfield{display:flex;flex-direction:column}
.qfield.full{grid-column:1/-1}
.qfield label{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-on-surface-muted);margin-bottom:7px}
.qfield label .opt-tag{text-transform:none;letter-spacing:.04em;color:var(--color-on-surface-muted)}
.qinput{width:100%;background:var(--color-surface);color:var(--color-on-surface);border:1px solid var(--color-border);border-radius:12px;padding:13px 15px;font-family:var(--font-sans);font-size:1rem}
.qinput:focus{outline:2px solid var(--color-accent-quiet);outline-offset:1px;border-color:var(--color-accent-quiet)}
.qfield--conditional{margin-top:16px;animation:stepin .35s var(--ease-out)}
.qfield--conditional[hidden]{display:none}
.qconsent{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;color:var(--color-on-surface-muted);margin:16px 0 2px}
.qconsent input{width:18px;height:18px;margin-top:2px;accent-color:var(--color-primary)}
.qconsent a{color:var(--color-primary);font-weight:600}
@media(max-width:520px){.qfields{grid-template-columns:1fr}}
.qerr{color:var(--color-error);font-size:.8rem;margin:8px 0 0;min-height:1.1em}
.quiz-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:clamp(22px,3vw,30px)}
.quiz-foot[hidden]{display:none}
.qbtn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);font-size:.9375rem;font-weight:600;border-radius:999px;cursor:pointer;padding:14px 26px;transition:background .25s var(--ease-out),transform .2s,border-color .2s}
.qbtn[hidden]{display:none}
.qbtn:active{transform:translateY(1px)}
.qbtn--ghost{background:transparent;border:1px solid var(--color-border);color:var(--color-on-surface)}
.qbtn--ghost:hover{border-color:var(--color-on-surface-muted)}
.qbtn--go{background:var(--color-accent);border:none;color:var(--color-on-accent);padding:12px 12px 12px 28px;margin-left:auto}
.qbtn--go .circ{width:32px;height:32px;border-radius:50%;background:var(--color-primary-deep);color:var(--color-on-primary);display:grid;place-items:center;font-size:14px;transition:transform .3s var(--ease-out)}
.qbtn--go:hover{background:var(--color-accent-hover)}
.qbtn--go:hover .circ{transform:translateX(3px)}
.quiz-done{display:none;text-align:center;padding:clamp(16px,3vw,34px) 0}
.quiz-done.on{display:block;animation:stepin .5s var(--ease-out)}
.quiz-done .check{width:62px;height:62px;border-radius:50%;background:var(--color-success);color:#fff;display:grid;place-items:center;font-size:28px;margin:0 auto 20px}
.quiz-done h3{font-family:var(--font-display);font-size:1.45rem;font-weight:800;letter-spacing:-.01em;margin:0 0 12px}
.quiz-done p{color:var(--color-on-surface-muted);max-width:40ch;margin:0 auto;font-size:.95rem}
.hp{position:absolute;left:-9999px;opacity:0}
@media(max-width:900px){.final .grid{grid-template-columns:1fr}}

/* ---------- footer with giant logotype ---------- */
footer{background:var(--color-primary-deep);color:var(--color-on-primary-muted);font-size:.875rem;border-top:1px solid var(--color-border-dark);overflow:hidden}
/* Brand block + three link columns. The brand keeps the widest share; the legal column is
   narrowest because it holds three short entries. */
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr .9fr;gap:clamp(24px,3vw,56px);padding:clamp(32px,6vw,72px) 0 clamp(20px,4vw,44px)}
/* Tablets: the brand takes the full first row, the three link columns sit under it. Four
   columns at 900px leave ~150px each, which wraps "Requisitos do EB-2 NIW" onto three
   lines. */
@media(max-width:1024px){
  footer .cols{grid-template-columns:repeat(3,1fr)}
  footer .cols > :first-child{grid-column:1/-1}
}
footer h4{font-family:var(--font-mono);color:var(--color-on-primary);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:10px}
footer a{color:var(--color-on-primary-muted);text-decoration:none;transition:color .2s}
footer a:hover{color:var(--color-accent)}
.disclosure{max-width:46ch;font-size:.8125rem;line-height:1.6}
.legal-bar{border-top:1px solid var(--color-border-dark);padding:20px 0;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase}
.giant{display:block;text-align:center;font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;line-height:.72;font-size:clamp(4.6rem,16.5vw,19rem);color:#0b3338;margin:24px 0 -0.18em;user-select:none}
.giant span{color:var(--color-primary-deep)}
@media(max-width:560px){footer .cols{grid-template-columns:1fr}}
/* Between 560 and 760 the three link columns still fit side by side and reading them as
   three short lists beats one 14-item stack. */
@media(max-width:760px){footer .cols{gap:clamp(20px,4vw,32px)}}