/* ==========================================================================
   Basso | reconstrução PT-BR
   Base: 1rem = 14,8px (html 0.925em). Media queries em em = 16px.
   Breakpoints: 30.0625em 481 · 37.5em 600 · 60em 960 · 80em 1280 · 90em 1440 · 100em 1600
   ========================================================================== */

/* Fontes Klim (opcional). Com licença, coloque os WOFF2 em /fonts e descomente.
@font-face { font-family: "Untitled Sans"; src: url("../fonts/untitled-sans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Untitled Sans"; src: url("../fonts/untitled-sans-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Untitled Serif"; src: url("../fonts/untitled-serif-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Untitled Serif"; src: url("../fonts/untitled-serif-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
*/

/* ---------- 1. Tokens ---------- */
:root {
  --color-white: #FFF;
  --color-black: #000;
  --color-paper: #FAF6EB;
  --color-ink: #151006;
  --color-redline: #DF000C;
  --color-ochre: #A78651;
  --color-graphite: #615C52;
  --color-neutral-100: #E1DED2;
  --color-neutral-200: #C7C2B8;
  --color-neutral-300: #ADA89E;
  --color-neutral-400: #948F85;
  --color-neutral-500: #736E64;
  --color-neutral-700: #484339;
  --color-neutral-800: #2E291F;
  --color-form-panel: #292628;

  --color-bg: var(--color-paper);
  --color-text: var(--color-ink);
  --color-text-soft: var(--color-neutral-500);
  --color-accent: var(--color-redline);
  --color-text-link: var(--color-ink);
  --color-text-link-hover: var(--color-redline);
  --color-divider: var(--color-neutral-300);
  --color-bg-btn: var(--color-ink);
  --color-bg-btn-hover: var(--color-redline);
  --color-text-btn: var(--color-paper);

  --ff-sans: "Untitled Sans", "Inter", system-ui, Arial, sans-serif;
  --ff-serif: "Untitled Serif", "Source Serif 4", Georgia, "Times New Roman", serif;
  --fw-regular: 400;
  --fw-medium: 500;

  --space-0-5: .125rem; --space-1: .25rem; --space-1-5: .375rem; --space-2: .5rem; --space-3: .75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --space-32: 8rem; --space-40: 10rem; --space-48: 12rem; --space-56: 14rem;
  --space-fluid-xs: clamp(.25rem, .0625rem + .9375vw, 1rem);
  --space-fluid-sm: clamp(.5rem, .25rem + 1.25vw, 1.5rem);
  --space-fluid-md: clamp(1rem, .75rem + 1.25vw, 2rem);
  --space-fluid-lg: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);
  --space-fluid-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  --space-fluid-2xl: clamp(2.5rem, 1.625rem + 4.375vw, 6rem);
  --space-outer: clamp(1.25rem, 1.0625rem + .9375vw, 2rem);
  --space-section: 3.5rem;
  --stack-xxl: 2.5rem;

  --maw: calc(90rem * 1.075 * .92);
  --space-columns: 4;
  --nav-height: 4rem;
  --bdrs-full: 62.4375rem;

  --trs-time: .3s;
  --trs-tfunc: ease-in-out;
  --trs: var(--trs-time) var(--trs-tfunc);

  --z-signup: 950; --z-modal: 900; --z-overlay: 800; --z-dropdown: 700;
  --z-header-high: 690; --z-header-mid: 650; --z-header: 600; --z-footer: 500;

  --logo-spotlight-pad: 2rem;
  --scrollbar-comp: 0px;
}
@media (min-width: 37.5em) { :root { --space-columns: 8; --space-section: 4.5rem; --stack-xxl: 3.5rem; --logo-spotlight-pad: 2.5rem; } }
@media (min-width: 60em)   { :root { --space-columns: 12; --space-section: 6rem; --stack-xxl: 4.5rem; --nav-height: 5.5rem; } }
@media (min-width: 80em)   { :root { --space-section: 8rem; --stack-xxl: 5.5rem; --logo-spotlight-pad: 3rem; } }

/* ---------- 2. Temas ---------- */
.theme-dark {
  --color-bg: var(--color-ink); --color-text: var(--color-paper); --color-text-soft: var(--color-neutral-300);
  --color-text-link: var(--color-paper); --color-divider: var(--color-neutral-700); --color-bg-btn: var(--color-neutral-700);
}
.theme-graphite {
  --color-bg: var(--color-graphite); --color-text: var(--color-paper); --color-text-soft: var(--color-neutral-300);
  --color-text-link: var(--color-paper); --color-divider: var(--color-neutral-700); --color-bg-btn: var(--color-ink);
}
.theme-gold { --color-bg: var(--color-ochre); --color-text: var(--color-paper); }
.theme-red {
  --color-bg: var(--color-redline); --color-text: var(--color-paper); --color-text-soft: var(--color-neutral-200);
  --color-text-link: var(--color-paper); --color-text-link-hover: var(--color-white); --color-divider: var(--color-paper);
  --color-bg-btn-hover: var(--color-neutral-700);
}
.theme-light, .theme-dark, .theme-graphite, .theme-gold, .theme-red {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* ---------- 3. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: .925em;
  scroll-behavior: smooth;
  background: var(--color-bg);
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--ff-sans);
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}
main { flex: auto; display: block; }
main:focus { outline: none; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
:where(ul[class], ol[class], ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
img, video, canvas { display: block; max-width: 100%; height: auto; }
video { width: 100%; }
input, button, textarea, select, h1, h2, h3, h4, h5, h6 { font: inherit; }
button, label, select, summary, [role="button"] { cursor: pointer; }
sup, sub { font-size: .6em; line-height: 0; }
a { color: inherit; }
::selection { background-color: color-mix(in srgb, var(--color-redline) 10%, transparent); color: var(--color-redline); }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus-color, currentColor); outline-offset: var(--focus-offset, .3ch); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.icon { width: 1.5rem; height: 1.5rem; flex: none; }

html.scroll-locked { overflow: hidden; padding-right: var(--scrollbar-comp); }

/* ---------- 4. Utilitários ---------- */
.is-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 1rem; top: 1rem;
  z-index: var(--z-header-high);
  padding: .35em 1em;
  background: var(--color-ink);
  color: var(--color-paper);
  text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus-visible { transform: none; }

.container {
  box-sizing: content-box;
  max-width: var(--maw);
  padding-inline: var(--space-outer);
  margin-inline: auto;
}
.grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(var(--space-columns), minmax(10px, 1fr));
}
.grid--3up { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 37.5em) { .grid--3up { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em)   { .grid--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.stack > * + * { margin-top: 1rem; }
.stack--s > * + * { margin-top: .5rem; }
.stack--xl > * + * { margin-top: 2rem; }
.stack--xxl > * + * { margin-top: var(--stack-xxl); }

.frame {
  --ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  aspect-ratio: var(--ratio);
}
.frame > img, .frame > video { width: 100%; height: 100%; object-fit: cover; }
.frame--1-1 { --ratio: 1 / 1; }
.frame--4-5 { --ratio: 4 / 5; }
.frame--16-9 { --ratio: 16 / 9; }

.u-clickable { position: relative; }
.u-clickable a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.u-clickable a:focus-visible { outline: none; }
.u-clickable:focus-within:has(a:focus-visible) { outline: 3px solid currentColor; outline-offset: .3ch; }
.u-link-reset { color: inherit; text-decoration: none; }

fk-scroll-reveal { display: block; }

/* ---------- 5. Tipografia ---------- */
.type-headline-1 {
  font-family: var(--ff-serif);
  font-size: calc(clamp(2.6875rem, 1.75rem + 4.6875vw, 6.4375rem) * .9215);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  font-feature-settings: "liga" 1, "calt" 1;
}
@media (min-width: 60em) { .type-headline-1 { line-height: .95; } }
@media (min-width: 80em) { .type-headline-1 { line-height: .9; } }

.type-headline-2 {
  font-family: var(--ff-serif);
  font-size: calc(clamp(2.25rem, 1.796875rem + 2.265625vw, 4.0625rem) * .95);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-feature-settings: "liga" 1, "calt" 1;
}
.type-subhead-1-serif {
  font-family: var(--ff-serif);
  font-size: clamp(1.8125rem, 1.46875rem + 1.71875vw, 3.1875rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.04em;
}
.type-subhead-2-serif, .type-subhead-2-sans {
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.type-subhead-2-serif { font-family: var(--ff-serif); }
.type-subhead-2-sans { font-family: var(--ff-sans); letter-spacing: -.04em; }
@media (min-width: 37.5em) {
  .type-subhead-2-serif, .type-subhead-2-sans { font-size: 2.125rem; }
  .type-subhead-2-sans { letter-spacing: -.02em; }
}
@media (min-width: 60em) { .type-subhead-2-serif, .type-subhead-2-sans { font-size: 2.5rem; } }

.type-eyebrow-1 { font-family: var(--ff-serif); font-size: 1.25rem; font-weight: 400; letter-spacing: 0; }
.type-eyebrow-2 {
  font-family: var(--ff-sans);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.type-body-1 { font-family: var(--ff-sans); font-size: 1.5rem; font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
@media (min-width: 37.5em) { .type-body-1 { font-size: 1.75rem; } }
@media (min-width: 60em)   { .type-body-1 { font-size: 2rem; } }

.type-body-2, .type-body-2-highlight, .type-body-2-serif {
  font-family: var(--ff-sans);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.type-body-2-highlight { font-weight: 500; }
.type-body-2-serif { font-family: var(--ff-serif); }
@media (min-width: 37.5em) { .type-body-2, .type-body-2-highlight, .type-body-2-serif { font-size: 1.375rem; } }
@media (min-width: 60em)   { .type-body-2, .type-body-2-highlight, .type-body-2-serif { font-size: 1.5rem; } }

.type-body-3 { font-family: var(--ff-sans); font-size: 1.125rem; font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
@media (min-width: 37.5em) { .type-body-3 { font-size: 1.25rem; } }
.type-body-4, .type-body-4-highlight { font-family: var(--ff-sans); font-size: 1.125rem; font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
.type-body-4-highlight { font-weight: 500; }
.type-caption-1 { font-family: var(--ff-sans); font-size: .75rem; font-weight: 400; line-height: 1; letter-spacing: normal; text-transform: uppercase; }

.textLockUp__title { text-wrap: balance; }
.textLockUp__title--pretty, .textLockUp__description { text-wrap: pretty; }

blockquote, .quote { hanging-punctuation: first; }
@supports not (hanging-punctuation: first) {
  blockquote > p:first-child { text-indent: -.45em; }
}

/* ---------- 6. Botões ---------- */
.btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  inline-size: fit-content;
  padding: .875rem 1.25rem;
  border: 0;
  border-radius: 0;
  background: var(--color-bg-btn);
  color: var(--color-text-btn);
  font-family: var(--ff-sans);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all var(--trs);
  --focus-color: var(--color-bg-btn-hover);
  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
}
.btn:hover { background-color: var(--color-bg-btn-hover); }
.btn--big { min-height: 4.5rem; min-width: 15.1875rem; }
@media (min-width: 37.5em) { .btn--big { min-height: 5rem; min-width: 16.875rem; } }

/* ---------- 7. Layout de seção ---------- */
.section { padding-block: var(--space-section); }
.section--padded { padding-block: calc(var(--space-section) * 1.66); }
.section--collapse { padding-top: 0; }
.section--has-bottom-border { border-bottom: 1px solid var(--color-divider); }

.textLockUp { grid-column: 1 / -1; }
@media (min-width: 60em) { .textLockUp { grid-column: 2 / -2; } }
.textLockUp > * + *, .textLockUp__content > * + * { margin-top: 1rem; }
.textLockUp--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.textLockUp--left { text-align: left; }
.textLockUp > .textLockUp__cta, .textLockUp__content > .textLockUp__cta { margin-top: 1.5rem; }
@media (min-width: 37.5em) { .textLockUp > .textLockUp__cta, .textLockUp__content > .textLockUp__cta { margin-top: 2rem; } }
@media (min-width: 60em)   { .textLockUp > .textLockUp__cta, .textLockUp__content > .textLockUp__cta { margin-top: 2.5rem; } }
@media (min-width: 80em)   { .textLockUp > .textLockUp__cta, .textLockUp__content > .textLockUp__cta { margin-top: 3rem; } }

/* ==========================================================================
   HEADER
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-header-high);
  width: 100%;
  height: var(--nav-height);
  padding-inline: var(--space-outer);
  background-color: transparent; /* barra invisível: só logo e opções */
  color: var(--color-text);
}
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background-color: color-mix(in srgb, var(--color-ink) 15%, transparent);
  opacity: 0;
  transition: opacity var(--trs);
  pointer-events: none;
}
.nav--scrolled::after { opacity: 0; } /* sem linha embaixo do menu */
.nav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  height: 100%;
  max-width: var(--maw);
  min-width: 100%;
  margin-inline: auto;
}
.nav__branding {
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--trs), visibility var(--trs), color var(--trs);
}
.nav__branding__wordmark { display: flex; flex-direction: column; align-items: flex-start; }

/* Logo: "CONTABILIDADE" sob o BASSO, alinhado à haste do "B" */
.logoLockup__sub {
  display: block;
  font-family: var(--ff-sans);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .32em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: .8em;
  color: inherit;
}
.nav__branding .logoLockup__sub { font-size: .5rem; margin-top: .6em; }
@media (min-width: 60em) { .nav__branding .logoLockup__sub { font-size: .5625rem; } }
.homeHero__logo,
.site-footer__wordmark a { container-type: inline-size; }
.homeHero__logo .logoLockup__sub,
.site-footer__wordmark .logoLockup__sub { font-size: max(.625rem, 1.9cqi); }
.nav__branding .wordmark {
  display: block;
  height: 1.425rem;
  width: auto;
  aspect-ratio: 1452.11 / 339.199;
}
@media (min-width: 37.5em) { .nav__branding .wordmark { height: 1.6625rem; } }
@media (min-width: 60em)   { .nav__branding .wordmark { height: 1.9rem; } }
.nav__branding-wrapper--logo-hidden .nav__branding { opacity: 0; visibility: hidden; }
.nav--logo-visible .nav__branding-wrapper--logo-hidden .nav__branding { opacity: 1; visibility: visible; }

.nav__list { margin: 0; padding: 0; list-style: none; }
.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--nav-height);
  color: inherit;
  text-decoration: none;
  opacity: .6;
  transition: opacity var(--trs);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: 0;
  height: 2px;
  background: var(--color-redline);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--trs);
}
.nav__link[aria-current="page"] { opacity: 1; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__menu-mobile-buttons { display: flex; align-items: center; }
.nav__menu-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  transition: color var(--trs);
}
.nav__menu-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 2.5rem);
  height: max(100%, 2.5rem);
  transform: translate(-50%, -50%);
}
.nav__menu-btn .close-icon { display: none; }
.nav-menu-open .nav__menu-btn .menu-icon { display: none; }
.nav-menu-open .nav__menu-btn .close-icon { display: block; }
.nav-menu-open .nav { background-color: var(--color-redline); }
.nav-menu-open .nav::after { opacity: 0; }
.nav-menu-open .nav__menu-btn,
.nav-menu-open .nav__branding { color: var(--color-paper); }

@media (width < 60em) {
  .nav__menu { display: none; }
  .nav-menu-open .nav__menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: calc(100dvh - var(--nav-height));
    padding-inline: var(--space-outer);
    padding-bottom: var(--space-outer);
    background: var(--color-redline);
    color: var(--color-paper);
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  .nav__list--primary { display: flex; flex-direction: column; }
  .nav__link {
    width: 100%;
    font-family: var(--ff-serif);
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.02em;
  }
  .nav__item--cta { margin-top: 2rem; }
  .nav__item--cta .btn { --color-bg-btn: var(--color-paper); --color-text-btn: var(--color-ink); }
}
@media (min-width: 60em) {
  .nav__menu-mobile-buttons { display: none; }
  .nav__menu { display: flex; align-items: center; }
  .nav__list--primary { display: flex; gap: 2rem; } /* sem o botão, as opções vão até a margem */
  .nav__link { color: var(--color-ink); opacity: 1; } /* opções em preto, sem transparência */
}
@media (hover: hover) and (min-width: 60em) {
  .nav__link:hover { opacity: 1; }
}

/* ==========================================================================
   SEÇÃO 1 | HERO
   ========================================================================== */
.homeHero__logo-row { position: relative; z-index: 1; }
.homeHero__logo { grid-column: 1 / -1; }
/* Logo clicável, igual ao do rodapé */
.homeHero__logoLink { display: block; color: inherit; text-decoration: none; transition: color var(--trs); }
.homeHero__logoLink:hover { color: var(--color-redline); }
.homeHero__logo .wordmark { display: block; width: 100%; height: auto; aspect-ratio: 1452.11 / 339.199; }
.homeHero__inner { position: relative; isolation: isolate; }
.homeHero__inner > .grid { position: relative; z-index: 1; }
/* Frase do hero rente ao "B" do BASSO (ocupa a grade inteira) */
@media (min-width: 60em) { .homeHero__textLockUp { grid-column: 2 / -1; margin-left: -2.5rem; } } /* recuo à direita (desktop), ajustado um pouco para a esquerda */
.homeHero__textLockUp .btn { font-weight: 550; } /* meio termo no CTA do hero */
.homeHero__textLockUp .textLockUp__title {
  margin-left: -.03em; /* compensa o respiro lateral do "C" serifado */
  /* Menor e mais encorpada (referência: print do hero original) */
  font-size: calc(clamp(2.25rem, 1.5rem + 3.9vw, 5.25rem) * .82);
  font-weight: 400; /* um pouco mais fina (antes 450) */
  line-height: 1;
}
.homeHero__media {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 26.25rem;
  margin-inline: auto;
}
@media (min-width: 60em) {
  .homeHero__media {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    margin-block: auto;
    margin-inline: 0;
    block-size: fit-content;
    inline-size: 40%;
    /* nunca maior que a área visível abaixo do header (telas baixas) */
    max-inline-size: min(35rem, calc(100svh - var(--nav-height) - 2rem));
  }
}
.homeHero__frame { aspect-ratio: 1 / 1; background: #fff; }
.homeHero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-bg);
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Escultura 3D pronta: ela já pinta sobre a cor do papel (sem quadro branco
   + multiplicação), então não há emenda na borda em nenhuma escala */
.homeHero__frame[data-sculpture-ready] { background: var(--color-bg); }
.homeHero__frame[data-sculpture-ready]::after { display: none; }
.homeHero__media { pointer-events: none; } /* o efeito nunca bloqueia cliques */
.homeHero__frame video,
.homeHero__frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateZ(0);
}

/* ==========================================================================
   NOVA SEÇÃO (em branco) — mesmas dimensões e padrão da seção inicial (hero)
   Espaçamento: o mesmo .section do hero. Altura: o JS (main.js) copia a altura
   real do hero em --hero-height; os valores abaixo são só reserva sem JS.
   ========================================================================== */
.newSection { min-height: var(--hero-height, 50.8rem); }                                /* ~752px */
@media (min-width: 37.5em) { .newSection { min-height: var(--hero-height, 62rem); } }   /* ~918px */
@media (min-width: 60em)   { .newSection { min-height: var(--hero-height, 47rem); } }   /* ~696px */
@media (min-width: 80em)   { .newSection { min-height: var(--hero-height, 61rem); } }   /* ~903px */

/* Estrutura: título no topo, livre acima do globo;
   números à esquerda (alinhados à esquerda) e à direita (alinhados à direita).
   Celular/tablet: título → globo → números em duas colunas. */
.newSection {
  position: relative;
  display: flex;
  flex-direction: column;
  --ns-title-fs: clamp(1.125rem, .45rem + 1.25vw, 1.75rem);
  --ns-title-gap: var(--space-fluid-md);  /* espaço livre entre a base da frase e o topo da esfera */
  --ns-title-raise: calc(var(--space-fluid-md) / 2); /* desktop: frase sobe além do bloco (globo fica onde está) */
  --ns-stats-inset: 0rem;                 /* telas largas: números recuados das bordas, em direção ao globo */
  --ns-globe-inset: .105;  /* folga do quadro até a esfera: (1 - .79) / 2 com scale 8.7 (globe.js) */
  --ns-row-gap: var(--space-fluid-xl);
}
.newSection__inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--space-outer);
}
.newSection__stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* celular: título, globo, números em 2×2 */
  align-items: start;
  gap: var(--ns-row-gap) var(--space-fluid-md);
}
.newSection__title {                    /* mesma letra do "CONTABILIDADE" do logo: sans, peso 500 */
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 0;
  max-width: var(--maw);
  margin-inline: auto;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--ns-title-fs);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
}
.newSection__globe {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 1;
  justify-self: center;
  width: min(100%, 34rem);
  aspect-ratio: 1;
  /* topo da esfera a --ns-title-gap da base da frase (o quadro tem folga transparente) */
  margin-top: calc(var(--ns-title-gap) - var(--ns-globe-inset) * min(100%, 34rem) - var(--ns-row-gap));
  display: grid;
  place-items: center;
  container-type: size;
  pointer-events: none;                 /* globo sem interação */
}
.newSection__globeBox {                 /* quadrado: o globo nunca é cortado */
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
}
.newSection__stats { display: contents; }
.newSection__stats--left .stat { grid-column: 1; text-align: left; }
.newSection__stats--right .stat { grid-column: 2; text-align: right; }
.newSection__stats .stat:nth-child(1) { grid-row: 3; }
.newSection__stats .stat:nth-child(2) { grid-row: 4; }
.stat__value {
  font-family: var(--ff-serif);
  font-size: calc(clamp(2.6875rem, 1.75rem + 4.6875vw, 6.4375rem) * .6); /* menor (antes * .78) */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  font-feature-settings: "liga" 1, "calt" 1;
  font-variant-numeric: lining-nums tabular-nums; /* largura fixa dos dígitos: contagem sem tremer */
}
.stat__label {
  max-inline-size: 14em;
  margin-top: var(--space-3);
  text-wrap: balance;
}
.newSection__stats--right .stat__label { margin-left: auto; }
.newSection .stat__label { font-size: 1.0625rem; } /* textos menores */
@media (min-width: 60em) { .newSection .stat__label { font-size: 1.1875rem; } }
@media (min-width: 60em) {
  /* altura fixa = hero; título + globo formam um bloco centralizado na seção */
  .newSection { height: var(--hero-height, 47rem); }
  .newSection__stage {
    flex: 1 1 0;
    min-height: 0;
    container-type: size;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto; /* números na base da seção */
    align-items: start;
    row-gap: 0;
    column-gap: var(--space-fluid-lg);
  }
  /* Medidas do bloco (cq = palco):
     --ns-lift   topo da frase → topo da esfera
     --ns-B      lado do quadro do globo (esfera = 79% dele)
     --ns-top    topo da frase, centralizando frase + esfera na altura
     --ns-box-top topo do quadro do globo */
  .newSection__stage > * {
    --ns-lift: 0px; /* sem título acima do globo */
    /* globo pode avançar 60px no espaçamento de cima e de baixo da seção */
    --ns-B: min((100cqw - 2 * var(--space-fluid-lg)) * 3.2 / 5.2, (100cqh + 120px - var(--ns-lift)) / .79);
    --ns-top: calc((100cqh - var(--ns-lift) - .79 * var(--ns-B)) / 2);
    --ns-box-top: calc(var(--ns-top) + var(--ns-lift) - var(--ns-globe-inset) * var(--ns-B));
  }
  .newSection__title { position: absolute; inset-inline: 0; top: calc(var(--ns-top) - var(--ns-title-raise)); margin: 0 auto; }
  .newSection__globe {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    display: block;
    width: auto;
    aspect-ratio: auto;
    margin-top: 0;
    container-type: normal;             /* medidas vêm do palco */
  }
  .newSection__globeBox { width: var(--ns-B); height: var(--ns-B); margin: var(--ns-box-top) auto 0; }
  /* números: cada par (esquerda/direita) divide a mesma linha → ficam alinhados
     na horizontal; o bloco todo fica centralizado na altura do globo */
  .newSection__stats .stat:nth-child(1) { grid-row: 2; }
  .newSection__stats .stat:nth-child(2) { grid-row: 3; margin-top: var(--space-fluid-xl); }
  .newSection__stats--left .stat { grid-column: 1; justify-self: start; margin-left: var(--ns-stats-inset); }
  .newSection__stats--right .stat { grid-column: 3; justify-self: end; margin-right: var(--ns-stats-inset); }
}
@media (min-width: 80em) {
  .newSection { height: var(--hero-height, 61rem); }
  /* recuo das bordas em direção ao globo, limitado para a frase mais longa
     (≈ 25,5rem com folga) nunca encostar na esfera */
  .newSection__stage > * {
    --ns-stats-inset: max(0px, min(clamp(0rem, 12vw - 7rem, 7rem), (100cqw - .79 * var(--ns-B)) / 2 - 20.5rem)); /* 20.5rem ≈ frase mais longa (17,5px) + folga */
  }
  /* frase longa em duas linhas: pode avançar sobre a folga transparente ao lado da esfera */
  .newSection__stats .stat { width: max-content; }
  .stat__label--wide { max-inline-size: 19em; }
}

/* ==========================================================================
   SCROLL SUAVE (Lenis — mesma configuração do site de referência)
   ========================================================================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ==========================================================================
   TRANSIÇÃO EMPILHADA: hero → nova seção (modelo: tengilemalamala.com)
   - a caixa do hero rola normalmente e recorta o próprio conteúdo;
   - o conteúdo (logo, título, botão) recua a 50% da velocidade do scroll;
   - a mídia (escultura 3D) fica parada na tela, como o vídeo de fundo deles;
   - a nova seção sobe a 100% e cobre o hero.
   --stack-range = rolagem até a nova seção cobrir o hero (via JS).
   ========================================================================== */
.homeHero.is-stacked {
  position: relative;
  z-index: 0;
  overflow: clip;                    /* recorta o conteúdo na borda do hero */
}
.homeHero.is-stacked > .container,
.homeHero.is-stacked .homeHero__media { will-change: transform; }
.newSection {
  z-index: 1;                        /* camada superior: sobe por cima do hero */
  background-color: var(--color-bg);
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 15%, transparent); /* borda da "folha" que sobe */
}
@keyframes hero-anchor-content {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(var(--stack-range, 0px) * var(--stack-anchor, .5)), 0); }
}
@supports (animation-timeline: scroll()) {
  .homeHero.is-stacked.uses-timeline > .container {
    animation: hero-anchor-content linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 var(--stack-range, 100vh);
  }
  /* a escultura (.homeHero__media) não tem animação própria: acompanha o bloco da frase */
}

/* ==========================================================================
   SIMPLE CTA (Seções 3, 6, 9)
   ========================================================================== */
.simpleCta { position: relative; overflow-x: clip; text-align: center; }
.simpleCta.theme-graphite { --color-bg-btn: var(--color-ink); }
.simpleCta .container { position: relative; z-index: 1; }
.simpleCta__textLockUp .textLockUp__title { max-inline-size: 30ch; }

.simpleCta__image {
  position: absolute;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: clamp(.75rem, 1.5vw, 2rem);
  letter-spacing: 1.3em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .5;
  color: var(--color-text);
  user-select: none;
}
.simpleCta__image--top-right {
  top: .5em;
  right: .5em;
  align-items: flex-end;
  transform: translateX(1em);
  --reveal-translate-y: calc(-1 * 1rem);
}
.simpleCta__image--bottom-left {
  bottom: .5em;
  left: .5em;
  align-items: flex-start;
}

/* Revelação ao rolar (única animação de scroll do site) */
.js [data-reveal-child] {
  opacity: .01;
  transform: translateY(var(--reveal-translate-y, 1rem));
  transition: opacity .8s, transform .8s;
  transition-delay: .2s;
}
.js [data-reveal-child][data-is-visible="true"] { opacity: 1; transform: none; }
.js.no-io [data-reveal-child] { animation: reveal-fallback .8s 1.5s forwards; }
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }

/* ==========================================================================
   SEÇÃO EDITORIAL — layout do hero da A&O Shearman (medido a 1349px)
   Paleta mapeada para a do site: ink → --color-ink, accent → --color-redline,
   fundo → papel (theme-light). Fontes: serif e sans do próprio site.
   ========================================================================== */
.editorialHero {
  --eh-ink: var(--color-ink);
  --eh-accent: var(--color-redline);
  padding-block: clamp(80px, 9.7vw, 140px);
  overflow-x: clip;
}
.editorialHero__container {
  box-sizing: border-box;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 60px;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  column-gap: 24px;
  color: var(--eh-ink);
}
/* col. 1: marca vertical com a altura da imagem, lendo de baixo para cima */
.editorialHero__brand {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  container-type: size;
  display: flex;
  justify-content: center;
  align-items: flex-end;                 /* texto começa na base da imagem */
}
.editorialHero__brand span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: calc(100cqh / 17);          /* ~70% da altura da imagem, a partir da base */
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* col. 2–8: imagem retrato, cantos retos */
.editorialHero__media { grid-column: 2 / 9; grid-row: 1; margin: 0; }
.editorialHero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 10;
  object-fit: cover;
  filter: grayscale(100%);
}
/* col. 10–15: texto centralizado na altura da imagem (col. 9 e 16 vazias) */
.editorialHero__content { grid-column: 10 / 16; grid-row: 1; align-self: center; }
.editorialHero__eyebrow {
  margin-bottom: 29px;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.editorialHero__title {
  font-family: var(--ff-serif);
  font-size: clamp(40px, 4.35vw, 72px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: normal;
  text-wrap: pretty;
}
.editorialHero__text {
  margin-top: 48px;
  font-family: var(--ff-sans);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1.3;
}
/* CTA fantasma: barra de 4px à esquerda que preenche o botão no hover */
.editorialHero__cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 17px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--eh-accent);
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .3s ease-out;
}
.editorialHero__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--eh-accent);
  transform: translateX(calc(-100% + 4px));
  transition: transform .3s ease-out;
}
.editorialHero__cta > * { position: relative; z-index: 1; }
.editorialHero__cta:hover,
.editorialHero__about .editorialHero__cta:focus-visible { color: var(--color-white); }
.editorialHero__cta:hover::before,
.editorialHero__about .editorialHero__cta:focus-visible::before { transform: translateX(0); }
.editorialHero__cta:focus-visible { outline: 3px solid var(--eh-accent); outline-offset: 3px; }
.editorialHero__about .editorialHero__cta:focus-visible { outline-width: 2px; }
.editorialHero__arrow { width: 20px; height: 20px; flex: none; }

/* Bloco "Sobre nós" (parte de baixo da seção): mesma grade de 16 colunas;
   rótulo na borda esquerda da imagem (col. 2–4), frase + CTA nas col. 5–14 */
.editorialHero {
  --eh-unrevealed: var(--color-neutral-200); /* tom claro da frase ainda não revelada */
  --eh-about-fs: clamp(34px, calc(11.4px + 2.4vw), 52px);
}
.editorialHero__about { margin-top: clamp(80px, 10.4vw, 140px); }
.editorialHero__aboutEyebrow {
  grid-column: 2 / 5;
  grid-row: 1;
  align-self: start;
  margin: 0;
  padding-top: calc(var(--eh-about-fs) * .27); /* topo das letras = topo das maiúsculas da frase */
}
.editorialHero__aboutBody { grid-column: 5 / 15; grid-row: 1; }
.editorialHero__aboutTitle {
  max-width: 17.2em;                    /* ≈ 750px a 44px; cresce com a fonte para manter 3 linhas */
  font-family: var(--ff-serif);
  font-size: var(--eh-about-fs);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.editorialHero__about .editorialHero__cta { margin-top: 40px; }
/* Preenchimento da frase com o scroll: o degradê corre pelas linhas como uma
   faixa contínua (box-decoration-break: slice), da esquerda para a direita */
.js .editorialHero__fill {
  background: linear-gradient(90deg, var(--eh-ink) 50%, var(--eh-unrevealed) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
  color: transparent;
}

/* Entrada sutil: texto sobe 24px em cascata (80ms); imagem só aparece */
.js .editorialHero [data-editorial-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease-out, transform .6s ease-out, color .3s ease-out;
  transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s; /* cor do hover sem atraso */
}
.js .editorialHero .editorialHero__media[data-editorial-reveal] { transform: none; transition: opacity .8s ease-out; }
.js .editorialHero.is-in [data-editorial-reveal],
.js.no-io .editorialHero [data-editorial-reveal] { opacity: 1; transform: none; }

/* Até 1024px: empilha (imagem 4/3 em cima, texto abaixo), sem marca vertical */
@media (max-width: 1024px) {
  .editorialHero__container { grid-template-columns: minmax(0, 1fr); }
  .editorialHero__brand { display: none; }
  .editorialHero__media { grid-column: 1; }
  .editorialHero__media img { aspect-ratio: 4 / 3; }
  .editorialHero__content { grid-column: 1; grid-row: 2; align-self: start; margin-top: 40px; max-width: 560px; } /* linhas curtas, como no desktop */
  /* Sobre nós: rótulo, 32px, frase, 32px, CTA */
  .editorialHero__aboutEyebrow { grid-column: 1; padding-top: 0; }
  .editorialHero__aboutBody { grid-column: 1; grid-row: 2; margin-top: 32px; }
  .editorialHero__about .editorialHero__cta { margin-top: 32px; }
}
@media (max-width: 768px) {
  .editorialHero__container { padding-inline: 20px; }
  .editorialHero__text { margin-top: 24px; font-size: 16px; }
  .editorialHero__aboutEyebrow { font-size: 13px; }
}

/* ==========================================================================
   ENTRADA DE TEXTO "MASK REVEAL" — js/text-reveal.js ([data-reveal])
   ========================================================================== */
.js [data-reveal] { visibility: hidden; animation: rv-failsafe 0s 4s forwards; } /* sem flash; aparece de qualquer jeito após 4s */
@keyframes rv-failsafe { to { visibility: visible; } }
/* máscara maior que a linha: não corta descendentes (g, p, y, j) nem acentos */
.rv-mask { padding-block: .14em .16em; margin-block: -.14em -.16em; }
.rv-word, .rv-line { will-change: transform; }

/* ==========================================================================
   SEÇÃO FRASE GRANDE — mesmo efeito de preenchimento do "Sobre nós"
   Altura = a da seção "Números claros…" (--match-height, js/main.js);
   mesma grade/margens dela (16 colunas, 60px, gap 24px).
   ========================================================================== */
.bigStatement {
  --bs-ink: var(--color-ink);
  --bs-unrevealed: var(--color-neutral-200);
  --bs-fs: clamp(40px, 6.4vw, 140px); /* letra grande o bastante para preencher a altura da seção */
  display: flex;
  align-items: center;
  /* altura = texto + espaçamento (a altura da "Números claros" só serve de base para o tamanho da letra) */
  padding-block: clamp(52px, 6.3vw, 90px); /* menor em cima e embaixo (antes 80–140px) */
  overflow-x: clip;
}
.bigStatement__container {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  column-gap: 24px;
  width: 100%;
  padding-inline: 40px; /* bigStatement: ponta a ponta (mesma margem do menu) */
  color: var(--bs-ink);
}
.bigStatement__text {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--ff-serif);
  font-size: var(--bs-fs);
  text-align: justify; /* cada linha encosta nas duas bordas */
  text-align-last: left;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.03em;
  font-feature-settings: "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.js .bigStatement__fill {
  background: linear-gradient(90deg, var(--bs-ink) 50%, var(--bs-unrevealed) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
  color: transparent;
}
@media (max-width: 1024px) {
  .bigStatement__container { grid-template-columns: minmax(0, 1fr); }
  .bigStatement__text { grid-column: 1; }
}
@media (max-width: 768px) { .bigStatement__container { padding-inline: 20px; } }

/* ==========================================================================
   SEÇÃO PROMO — signpost texto + imagem (layout A&O Shearman, valores exatos)
   Paleta mapeada para a do site: texto → --color-ink, ação (CTA) →
   --color-redline (mesmo CTA da seção editorial), destaque (wipe + símbolo) →
   --color-ochre, fundo → papel. Fontes: serif e sans do próprio site.
   ========================================================================== */
.promo {
  --pr-ink: var(--color-ink);
  --pr-action: var(--color-redline);
  --pr-accent: var(--color-ochre);
  margin-bottom: 56px;
  overflow-x: clip;
  color: var(--pr-ink);
}
.promo, .promo * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* grid externo: 8 colunas (<1024) / 16 colunas (>=1024) */
.promo__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: 17px;
  row-gap: 0;
  margin-inline: 20px;
}
/* grid interno: largura total (<1024) / col. 2–17 com 15 colunas (>=1024) */
.promo__inner {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: dense;
}
/* <1024: eyebrow → título → imagem → texto → botão */
.promo__text { display: contents; }
.promo__eyebrow { order: 1; }
.promo__heading { order: 2; }
.promo__media   { order: 3; }
.promo__body    { order: 4; }
.promo__btnWrap { order: 5; }

/* ---- tipografia ---- */
.promo__eyebrow {
  display: block;
  margin-bottom: 22px;
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .91px;
  text-transform: uppercase;
}
.promo__heading {
  margin: 0 0 24px;
  font-family: var(--ff-serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.14;
}
.promo__body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 21.28px;
}

/* ---- CTA: barra de 4px à esquerda que preenche no hover ---- */
.promo__btnWrap { display: block; width: fit-content; margin-top: 24px; }
.promo__btn {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 17px 24px;
  border: 0;
  background: transparent;
  color: var(--pr-action);
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .98px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color .3s linear;
}
.promo__btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--pr-action);
  transform: translateX(calc(-100% + 4px));
  transform-origin: left center;
  transition: transform .3s ease-out;
}
.promo__btn:hover, .promo__btn:focus-visible { color: #FFFFFF; }
.promo__btn:hover::before, .promo__btn:focus-visible::before { transform: translateX(0); }
.promo__btn:focus-visible { outline: 2px solid var(--pr-action); outline-offset: 2px; }
.promo__btnText, .promo__btnIcon { position: relative; z-index: 1; }
.promo__btnIcon { display: flex; margin-left: 16px; }

/* ---- imagem, símbolo e wipe ---- */
.promo__mediaWrapper { position: relative; margin-bottom: 56px; }
.promo__accent {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  display: block;
  width: 68px;
  height: 68px;
  color: var(--pr-accent);
  transform: translateY(50%);
}
.promo__accent svg { display: block; width: 100%; height: 100%; }
.promo__wipe { position: relative; overflow: hidden; }
.promo__wipeBlock {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 200%;
  height: 100%;
  background: var(--pr-accent);
  transform: translateX(100%);          /* sem JS: estado final (fora) */
  will-change: transform;
}
.promo__wipeContent { transform-origin: center; will-change: transform; }
.promo__wipeContent img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1); }
/* com JS: estado inicial antes do scroll (bloco à esquerda, foto escondida e ampliada) */
.js .promo__wipeBlock { transform: translateX(-100%); }
.js .promo__wipeContent { opacity: 0; transform: scale(1.5); }

/* ---- breakpoints (valores fluidos exatos) ---- */
@media (min-width: 450px) {
  .promo { margin-bottom: calc(37.25px + 4.16667vw); }
  .promo__grid { column-gap: calc(13.4844px + .78125vw); margin-inline: calc(-16.3281px + 8.07292vw); }
  .promo__eyebrow { font-size: calc(11.8281px + .260417vw); letter-spacing: calc(.888571px + .0047619vw); margin-bottom: calc(19.6562px + .520833vw); }
  .promo__heading { font-size: calc(29.3125px + 1.04167vw); }
  .promo__body { font-size: calc(14.8281px + .260417vw); }
}
@media (min-width: 834px) {
  .promo { margin-bottom: calc(-138.695px + 25.2632vw); }
  .promo__grid { column-gap: calc(2.44211px + 2.10526vw); margin-inline: calc(11.4947px + 4.73684vw); }
  .promo__eyebrow { font-size: 14px; margin-bottom: calc(15.2211px + 1.05263vw); }
  .promo__heading { font-size: calc(46.7789px - 1.05263vw); margin-bottom: 40px; }
  .promo__body { font-size: calc(14.8053px + .263158vw); }
  .promo__media { margin-right: calc(263.368px - 31.5789vw); } /* sangra 0 → 60px à direita */
  .promo__mediaWrapper { margin-bottom: 80px; }
  .promo__accent { width: auto; height: auto; transform: translate(-50%, 50%); }
  .promo__accent svg { width: 97px; height: 114px; } /* tamanho natural */
}
@media (min-width: 1024px) {
  .promo { margin-bottom: calc(70.7692px + 4.80769vw); }
  .promo__grid { grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: 24px; margin-inline: 60px; }
  .promo__inner { grid-column: 2 / 17; grid-template-columns: repeat(15, minmax(0, 1fr)); column-gap: 24px; }
  .promo__text { display: block; grid-column: 1 / 6; grid-row: 1; align-self: center; }
  .promo__media { grid-column: 7 / -1; grid-row: 1; align-self: center; margin-right: -60px; } /* encosta na borda direita */
  .promo__eyebrow { margin-bottom: calc(16.1538px + .961538vw); }
  .promo__heading { font-size: calc(11.3846px + 2.40385vw); margin-bottom: 24px; }
  .promo__body { font-size: 17.5px; line-height: calc(16.8px + .4375vw); }
  .promo__btnWrap { margin-top: 50px; }
  .promo__mediaWrapper { margin-bottom: 0; }
  .promo__accent { transform: translate(-150%, 50%); }
}
@media (min-width: 1440px) {
  .promo { margin-bottom: calc(80px + 4.16667vw); }
  .promo__eyebrow { margin-bottom: calc(24px + .416667vw); }
  .promo__heading { font-size: calc(28px + 1.25vw); }
  .promo__body { font-size: calc(16px + .104167vw); }
}
@media (min-width: 1920px) {
  .promo { margin-bottom: 160px; }
  .promo__eyebrow { letter-spacing: .98px; margin-bottom: 32px; }
  .promo__heading { font-size: 52px; }
  .promo__body { font-size: 18px; line-height: 25.2px; }
  .promo__btnWrap { margin-top: 56px; }
  .promo__accent { transform: translate(-200%, 50%); }
}

/* ==========================================================================
   SEÇÃO FEATURE SCROLL (layout cerebrium.ai) — js/feature-scroll.js
   Medidas, tempos e easings da referência; cores e fontes mapeadas para o
   padrão do site (tokens próprios com prefixo --fs-):
     navy-900 (texto) → --color-ink · slate → neutros do site ·
     navy-500 → --color-graphite · pink → --color-redline ·
     purple → --color-ochre · charcoal → --color-ink
     tipografia = padrão do site: títulos → --ff-serif 400 · textos, rótulos,
     terminal e gráficos → --ff-sans (mesmos pesos e espaçamentos do site)
   ========================================================================== */
.fs-section {
  --fs-white: #ffffff;
  --fs-50: var(--color-paper);
  --fs-100: var(--color-neutral-100);
  --fs-200: #D4CFC3;
  --fs-300: var(--color-neutral-200);
  --fs-400: var(--color-neutral-300);
  --fs-navy-500: var(--color-graphite);
  --fs-ink: var(--color-ink);
  --fs-accent: var(--color-redline);
  --fs-accent-2: var(--color-ochre);
  --fs-charcoal: var(--color-ink);
  --fs-p50: var(--color-neutral-500);
  --fs-p90: var(--color-neutral-300);
  --fs-max: var(--color-redline);
  --fs-ff-sans: var(--ff-sans);
  --fs-ff-secondary: var(--ff-serif);
  --fs-ff-mono: var(--ff-sans);           /* sem fonte mono: o site não usa */
  --fs-sp-xl: clamp(40px, calc(33.459px + 1.677vw), 67px);
  --fs-sp-2xl: clamp(56px, calc(46.31px + 2.4845vw), 96px);
  --fs-sp-3xl: clamp(80px, calc(62.075px + 4.5963vw), 154px);
  --fs-safe-header: calc(var(--nav-height) + 16px); /* altura real do header + 16px */
  --fs-ease: cubic-bezier(.645, .045, .355, 1);
  --fs-ease-out: cubic-bezier(0, 0, .2, 1);
  position: relative;
  z-index: 1;
}
.fs-section *, .fs-section *::before, .fs-section *::after { box-sizing: border-box; }
.fs-section .container { box-sizing: content-box; } /* mesmo container do site */
.fs-section h2, .fs-section h3, .fs-section p, .fs-section ul { margin: 0; }
.fs-section ul { list-style: none; padding: 0; }

/* ---- tipografia ---- */
.fs-heading-xl { font-family: var(--fs-ff-secondary); font-size: clamp(40px, calc(27.888px + 3.1056vw), 90px); font-weight: 400; line-height: 1; letter-spacing: -.03em; font-feature-settings: "liga" 1, "calt" 1; } /* = type-headline-1 */
.fs-heading-md { font-family: var(--fs-ff-secondary); font-size: clamp(25px, calc(17.974px + 1.8012vw), 54px); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; font-feature-settings: "liga" 1, "calt" 1; } /* = type-headline-2 */
.fs-heading-sm { font-family: var(--fs-ff-sans); font-size: clamp(25px, calc(20.882px + 1.0559vw), 42px); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; }
.fs-heading-xs { font-family: var(--fs-ff-sans); font-size: clamp(20px, calc(17.578px + .6211vw), 30px); font-weight: 400; line-height: 1.35; letter-spacing: -.02em; }
.fs-body-md { font-family: var(--fs-ff-sans); font-size: 16px; font-weight: 400; line-height: 1.35; letter-spacing: -.02em; }
.fs-body-p { font-family: var(--fs-ff-sans); font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; color: var(--fs-ink); max-width: 100ch; }
@media (min-width: 700px)  { .fs-body-p { font-size: 22px; } }
@media (min-width: 1000px) { .fs-body-p { font-size: 24px; } }
.fs-body-p { padding-right: max(3.2em, 11%); } /* limite de linha ≈ uma palavra mais curto */
.fs-label-text { font-family: var(--fs-ff-sans); font-size: 13px; font-weight: 500; line-height: 1.13; letter-spacing: -.01em; text-transform: uppercase; } /* = type-eyebrow-2 */
@media (min-width: 1000px) { .fs-body-md, .fs-seg__tab { font-size: 17px; } }
@media (min-width: 2000px) { .fs-body-md, .fs-seg__tab { font-size: 18px; } }

/* ---- wrapper branco arredondado sobre as seções vizinhas ---- */
.fs-wrapper {
  position: relative;
  z-index: 1;
  margin-block: -30px;
  padding-block: var(--fs-sp-xl);
  border-radius: 32px;
  background: var(--fs-white);
  color: var(--fs-ink);
}
@media (min-width: 1000px) { .fs-wrapper { margin-block: -60px; padding-block: var(--fs-sp-2xl); } }
/* a seção seguinte (fundo transparente) fica por cima: os cantos do cartão
   continuam visíveis e as letras decorativas dela não são cobertas */
.fs-section + section { position: relative; z-index: 2; }
/* a palavra decorativa do topo começa abaixo do cartão (dentro da própria seção) */
.fs-section + .simpleCta .simpleCta__image--top-right { top: calc(.5em + 30px); }
@media (min-width: 1000px) { .fs-section + .simpleCta .simpleCta__image--top-right { top: calc(.5em + 60px); } }

/* [A] linha de topo (só desktop) */
.fs-top { display: none; }
@media (min-width: 1000px) {
  .fs-top { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: var(--fs-sp-3xl); }
  .fs-top__lead { max-width: 480px; text-wrap: balance; }
}
/* título split: gradiente em cada palavra */
.fs-word { display: inline-block; }
.fs-gradient .fs-word {
  /* área pintada maior que a linha (line-height 1): inclui a perna do "g"/"p" e os acentos;
     margens negativas compensam, sem mudar a posição do texto */
  margin-block: -.15em -.3em;
  padding-block: .15em .3em;
  background-image: linear-gradient(to right, var(--fs-accent) 0%, var(--fs-accent-2) 100%);
  background-image: linear-gradient(to right in oklab, var(--fs-accent) 0%, var(--fs-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.js .fs-split { opacity: 0; }
/* título em 2 linhas fixas ("Muito além dos números." / "Estratégia para crescer."):
   cada linha não quebra e o tamanho se ajusta à largura da coluna */
.fs-top__title, .fs-mobileTitle { container-type: inline-size; }
.fs-mobileTitle { --fs-title-fit: 9.3cqi; } /* letras mais largas em tamanho pequeno (tamanho óptico da fonte) */
.fs-heading-xl.fs-split { white-space: nowrap; font-size: min(clamp(40px, calc(27.888px + 3.1056vw), 90px), var(--fs-title-fit, 9.9cqi)); }
@media (min-width: 1000px) {
  .fs-top__title { margin-right: min(0px, calc(40px - (max(0px, (100vw - var(--maw) - 2 * var(--space-outer)) / 2) + var(--space-outer)))); }
}

/* [B] grid principal */
.fs-grid { display: grid; gap: 20px; margin-bottom: var(--fs-sp-2xl); }
.fs-grid:last-child { margin-bottom: 0; }
@media (min-width: 1000px) {
  .fs-grid { grid-template-columns: 1fr 1fr; }
  .fs-sticky { position: sticky; top: var(--fs-safe-header); }
}

/* [B1] label "• WHY ..." */
.fs-label { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-weight: 400; }
@media (min-width: 1000px) { .fs-label { margin-bottom: 50px; } }
.fs-label__dot {
  flex: none;
  width: 6px;
  height: 6px;
  background: currentColor;
  clip-path: inset(100% round 7px);
  transition: clip-path .2s var(--fs-ease) .3s;
}
.fs-label__text { opacity: 0; transform: translateX(10px); transition: transform .3s var(--fs-ease), opacity .3s var(--fs-ease); }
.fs-label.is-inview .fs-label__dot { clip-path: inset(0% round 7px); }
.fs-label.is-inview .fs-label__text { opacity: 1; transform: none; }
.no-js .fs-label__dot { clip-path: none; }
.no-js .fs-label__text { opacity: 1; transform: none; }

.fs-mobileTitle { margin-bottom: var(--fs-sp-2xl); }
@media (min-width: 1000px) { .fs-mobileTitle { display: none; } }

/* nav do scroll spy */
.fs-nav { display: none; }
@media (min-width: 1000px) {
  .fs-nav { display: grid; justify-items: start; row-gap: .32em; font-size: clamp(25px, calc(10px + 3.2vw), 66px); line-height: 1.15; }
  /* coluna da lista a 40px da borda da tela (como a referência), saindo do container */
  .fs-side, .fs-top__lead { margin-left: calc(40px - (max(0px, (100vw - var(--maw) - 2 * var(--space-outer)) / 2) + var(--space-outer))); }
}
.fs-nav__link { display: inline-block; color: #BAB5AB; text-decoration: none; transition: color .2s; } /* inativas: um pouco mais visíveis (antes #C7C2B8) */
@media (min-width: 1000px) { .fs-nav__link { font-size: inherit; letter-spacing: 0; } } /* letras maiores e menos apertadas */
.fs-nav__link:hover, .fs-nav__link.is-active { color: var(--fs-ink); }
.fs-nav__link:focus-visible { outline: 2px solid var(--fs-ink); outline-offset: 4px; }

/* [B2] cards */
.fs-cards { display: grid; max-width: 768px; gap: var(--fs-sp-2xl); min-width: 0; }
@media (min-width: 1000px) {
  .fs-cards {
    max-width: none;
    margin-left: 0; /* alinhado ao título "Muito além dos números." (mesma coluna) */
    /* esticados até 40px da borda direita da tela (espelha a lista, a 40px da esquerda) */
    margin-right: min(0px, calc(40px - (max(0px, (100vw - var(--maw) - 2 * var(--space-outer)) / 2) + var(--space-outer))));
  }
}
.fs-card { scroll-margin-top: var(--fs-safe-header); container: feature-card / inline-size; min-width: 0; }
.fs-card__inner { display: flex; flex-direction: column; gap: 24px; }
.fs-card__text { display: flex; flex-direction: column; gap: 16px; }
/* textos esticados até a borda direita da coluna (sem recuo à direita) */
.fs-card__title { color: var(--fs-ink); font-family: var(--fs-ff-sans); font-size: clamp(25px, calc(20.882px + 1.0559vw), 42px); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; }
@media (min-width: 1000px) { .fs-card__title { font-size: clamp(20px, calc(17.578px + .6211vw), 30px); font-weight: 400; line-height: 1.35; } }

/* ---- 5.0 segmented control ---- */
.fs-seg__list {
  position: relative;
  display: inline-flex;
  align-self: center;
  max-width: 100%;
  gap: 0;
  padding: 4px;
  border-radius: 7px;
  background: var(--fs-50);
  overflow-x: auto;
  scrollbar-width: none;
}
.fs-seg__list::-webkit-scrollbar { display: none; }
.fs-seg__indicator {
  position: absolute;
  border-radius: 7px;
  background: var(--fs-navy-500);
  pointer-events: none;
  transition: left .2s, width .2s, top .2s, height .2s;
  transition-timing-function: var(--fs-ease-out);
}
.fs-seg__tab {
  position: relative;
  z-index: 1;
  flex: none;
  min-height: 44px;
  padding: 8px 20px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--fs-ink);
  font-family: var(--fs-ff-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s;
}
.fs-seg__tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 7px;
  background: var(--fs-200);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .2s var(--fs-ease), transform .2s var(--fs-ease);
}
.fs-seg__tab[aria-selected="false"]:hover::before { opacity: 1; transform: scale(1); }
.fs-seg__tab[aria-selected="true"] { color: #fff; }
.fs-seg__tab:focus-visible { outline: 2px solid var(--fs-ink); outline-offset: 2px; }
.fs-seg__panels { position: relative; }

/* ---- 5.1 card 1: barras ---- */
.fs-v1 {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 24px;
  overflow: hidden;
  padding: 24px;
  border-radius: 15px;
  background: var(--fs-charcoal);
}
@media (min-width: 1000px) { .fs-v1 { min-height: 500px; } }
.fs-v1__bg { position: absolute; inset: 0; overflow: hidden; }
.fs-v1__bgInner { /* placeholder em CSS: trocar por imagem (object-fit: cover) */
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  background:
    radial-gradient(42% 30% at 70% 22%, color-mix(in srgb, var(--fs-accent) 85%, transparent) 0%, transparent 70%),
    radial-gradient(38% 28% at 22% 78%, color-mix(in srgb, var(--fs-accent-2) 80%, transparent) 0%, transparent 72%),
    radial-gradient(60% 45% at 50% 55%, #4a1a12 0%, transparent 75%),
    repeating-linear-gradient(125deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 46px),
    linear-gradient(160deg, #1d0b08 0%, #000 60%);
  opacity: 0;
  transition: opacity .3s var(--fs-ease);
  will-change: transform;
}
.fs-v1__bgInner.is-loaded { opacity: 1; }
.fs-v1__content { position: relative; z-index: 2; width: 100%; }
.fs-v1 .fs-seg { display: flex; flex-direction: column; row-gap: 24px; }
.fs-v1__panels {
  width: 100%;
  margin-block: var(--fs-sp-2xl);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}
@media (min-width: 700px) { .fs-v1__panels { width: 85%; } }
.fs-v1 .fs-seg__panel { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.fs-v1 .fs-seg__panel[hidden] { display: none; }
.fs-bar__label { text-wrap: balance; color: var(--fs-ink); }
.fs-bar__row { display: flex; align-items: center; gap: 8px; }
.fs-bar__track { width: 100%; height: 5px; border-radius: 10px; background: #fff; }
.fs-bar__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 10px;
  background: var(--fs-navy-500);
  opacity: 0;
  transition-property: width;
  transition-timing-function: cubic-bezier(0, 0, .2, 1);
}
.fs-bar__fill.is-accent { background: var(--fs-accent); }
.fs-bar__value { flex: 0 0 56px; text-align: right; color: var(--fs-ink); }
.no-js .fs-bar__fill { width: var(--value); opacity: 1; }

/* ---- 5.2 card 2: mapa ---- */
.fs-v2 { position: relative; }
.fs-v2__cap { position: absolute; z-index: 2; top: 12px; left: 12px; }
.fs-v2__cap .fs-label-text { display: inline-block; padding: 8px; border-radius: 7px; background: var(--fs-ink); color: #fff; }
.fs-v2__reg { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; }
.fs-v2__reg .fs-label-text { display: block; overflow: hidden; padding: 8px; border-radius: 7px; background: #fff; color: var(--fs-ink); white-space: nowrap; text-overflow: ellipsis; }
@container feature-card (min-width: 672px) {
  .fs-v2__cap { top: 24px; left: 24px; }
  .fs-v2__reg { top: 24px; right: 24px; bottom: auto; left: auto; max-width: 50%; }
}
.fs-v2__map { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 15px; background: var(--fs-100); }
.fs-v2__layer { position: absolute; inset: -10%; }
@media (min-width: 700px) {
  .fs-v2__map { aspect-ratio: 707 / 600; }
  .fs-v2__layer { inset: 0; }
}
.fs-v2__svg { display: block; width: 100%; height: 100%; }
.fs-v2__ocean { fill: var(--fs-50); }
.fs-v2__hot { fill: var(--fs-accent); }
.fs-v2__tag rect { fill: var(--fs-ink); }
.fs-v2__tag text { fill: #fff; font-family: var(--fs-ff-sans); font-size: 9px; font-weight: 500; }

/* ---- 5.3 card 3: terminal ---- */
.fs-v3 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-content: center;
  gap: 24px;
  overflow: hidden;
  padding: 24px;
  border-radius: 15px;
  background: var(--fs-charcoal);
}
@container feature-card (min-width: 672px) {
  .fs-v3 { aspect-ratio: 707 / 600; }
  .fs-v3__tag { position: absolute; top: 24px; left: 24px; }
}
.fs-v3__tag { position: relative; z-index: 2; }
.fs-v3__tag .fs-label-text { display: inline-block; padding: 8px; border-radius: 7px; background: var(--fs-300); color: var(--fs-charcoal); }
.fs-v3__window {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: auto;
  border-radius: 10px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}
@media (min-width: 700px) { .fs-v3__window { width: 85%; } }
.fs-term { padding: 16px; color: var(--fs-ink); font-family: var(--fs-ff-sans); font-size: 13px; letter-spacing: -.01em; text-wrap: wrap; white-space: pre-wrap; overflow-wrap: anywhere; }
.fs-term [data-line] { min-height: 1em; line-height: 1.07; opacity: 0; }
.fs-term__ok { color: var(--fs-accent); }
.no-js .fs-term [data-line] { opacity: 1; }

/* ---- 5.4 card 4: gráfico de linhas ---- */
.fs-v4 {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 24px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  padding-block: 10px;
  border-radius: 15px;
  background: var(--fs-50);
}
@media (min-width: 700px) { .fs-v4 { aspect-ratio: 707 / 600; padding-block: 24px; } }
.fs-v4 .fs-seg { position: relative; z-index: 2; display: flex; flex-direction: column; flex-grow: 1; width: 100%; row-gap: 24px; }
.fs-v4 .fs-seg__list { background: #fff; }
.fs-v4 .fs-seg__tab::before { background: var(--fs-100); }
.fs-v4__panels { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; overflow: hidden; }
.fs-v4 .fs-seg__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 16px 34px 72px;
}
.fs-v4 .fs-seg__panel[hidden] { display: none; }
@media (min-width: 700px) { .fs-v4 .fs-seg__panel { padding-inline: 88px; } }
.fs-v4__y { position: absolute; top: calc(50% - 72px); left: 10px; padding-top: 12px; transform: translateX(-50%) rotate(-90deg); color: var(--fs-ink); white-space: nowrap; }
.fs-v4__x { position: absolute; left: 0; right: 0; bottom: 44px; text-align: center; color: var(--fs-ink); }
@media (min-width: 700px) { .fs-v4__y { left: 28px; } .fs-v4__x { bottom: 8px; } }
.fs-v4__chart { width: 100%; aspect-ratio: 520 / 286; }
.fs-v4__chart svg { display: block; overflow: visible; }
.fs-v4__grid { stroke: var(--fs-300); }
.fs-v4__tick { fill: var(--fs-navy-500); font-family: var(--fs-ff-sans); font-size: 10px; }
.fs-v4__legend { position: absolute; bottom: 0; left: 10px; display: flex; gap: 8px; }
@media (min-width: 700px) { .fs-v4__legend { left: 28px; } }
.fs-v4__key { display: inline-flex; padding: 8px; border-radius: 7px; color: #fff; }
.fs-k-p50 { background: var(--fs-p50); }
.fs-k-p90 { background: var(--fs-p90); }
.fs-k-max { background: var(--fs-max); }
.fs-s-p50 { stroke: var(--fs-p50); }
.fs-s-p90 { stroke: var(--fs-p90); }
.fs-s-max { stroke: var(--fs-max); }

/* sem animação: tudo no estado final */

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.site-footer.section { padding-bottom: 0; }
.site-footer a { color: currentColor; text-decoration: none; transition: color var(--trs); }
.site-footer a:hover { color: var(--color-redline); }
.site-footer__top { row-gap: 2.5rem; }
.footer-nav { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2.5rem; }
.site-footer__meta { grid-column: 1 / -1; }
@media (min-width: 37.5em) {
  .footer-nav { grid-column: 5 / -1; grid-row: 1; flex-direction: row; gap: 1rem; }
  .footer-nav__list { flex: 1; }
  .site-footer__meta { grid-column: 1 / span 4; grid-row: 1; }
}
@media (min-width: 60em) {
  .footer-nav { grid-column: 7 / -1; }
  .site-footer__meta { grid-column: 1 / span 6; }
}
.footer-nav__list { display: flex; flex-direction: column; gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 37.5em) { .footer-nav__list { gap: 1.5rem; } }
.footer-nav a.type-subhead-2-sans { font-size: 2rem; }
@media (min-width: 37.5em) { .footer-nav a.type-subhead-2-sans { line-height: 1.2; letter-spacing: -.02em; } }

.site-footer__copyright { color: var(--color-text-soft); }
.site-footer__badges { display: flex; gap: 1rem; margin-top: 1.25rem; padding: 0; list-style: none; }
@media (min-width: 60em) { .site-footer__badges { margin-top: 1.5rem; } }
@media (min-width: 80em) { .site-footer__badges { margin-top: 2rem; } }
.site-footer__badge { display: block; width: 3rem; height: 3rem; opacity: .6; transition: opacity var(--trs), color var(--trs); }
.site-footer a.site-footer__badge:hover { opacity: 1; color: currentColor; }
.site-footer__badge svg { display: block; width: 100%; height: 100%; }

.site-footer__legal { grid-column: 1 / -1; }
@media (min-width: 37.5em) { .site-footer__legal { grid-column: 5 / -1; } }
@media (min-width: 60em)   { .site-footer__legal { grid-column: 7 / -1; } }
.site-footer__legal ul { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 30.0625em) { .site-footer__legal ul { flex-flow: row wrap; gap: 1.5rem; } }
@media (min-width: 60em)      { .site-footer__legal ul { gap: 2rem; } }
.site-footer .site-footer__legal a { color: var(--color-text-soft); }
.site-footer .site-footer__legal a:hover { color: var(--color-paper); }

.site-footer__wordmark a { display: block; color: var(--color-paper); padding-bottom: 1.25rem; }
.site-footer .site-footer__wordmark a:hover { color: var(--color-redline); }
.site-footer__wordmark .wordmark { display: block; width: 100%; height: auto; aspect-ratio: 1452.11 / 339.199; }

/* ==========================================================================
   MODAL #signup
   ========================================================================== */
.signup {
  position: fixed;
  inset: 0;
  z-index: var(--z-signup);
  display: flex;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8%);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out, visibility 0s linear .3s;
}
.signup:target {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out, visibility 0s linear 0s;
}
.signup__quote { display: none; }
@media (min-width: 37.5em) {
  .signup__quote {
    display: flex;
    flex: 0 0 50%;
    align-items: center;
    justify-content: center;
    padding: var(--space-fluid-2xl);
    background: var(--color-redline);
    color: var(--color-white);
  }
}
.signup__figure { display: flex; flex-direction: column; gap: 2.5rem; max-inline-size: 35rem; }
.signup__blockquote { color: var(--color-white); line-height: 1; }
.signup__caption { display: flex; flex-direction: column; gap: .25rem; color: var(--color-white); }
.signup__caption cite { font-style: normal; font-weight: 500; }

.signup__panel {
  position: relative;
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: 1.5rem;
  background: var(--color-form-panel);
  color: var(--color-white);
}
@media (min-width: 37.5em) { .signup__panel { flex-basis: 50%; } }
.signup__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  padding: 1rem;
  border: 0;
  background: none;
  color: var(--color-paper);
}

.signupForm {
  width: 100%;
  padding: 2.5rem 54px 1rem;
  font-family: "Inter", var(--ff-sans);
  font-size: 15px;
  line-height: 1.4;
}
@media (width < 37.5em) { .signupForm { padding-inline: 24px; } }
.signupForm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
@media (width < 30.0625em) { .signupForm__row { grid-template-columns: 1fr; gap: 20px; } }
.signupForm > * + * { margin-top: 20px; }
.signupForm__row > .field { margin-top: 0; }
.field__label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: #fff; }
.field__req { color: #F5A623; }
.field__help { margin: -2px 0 8px; font-size: 14px; color: #B5B5B5; }
.field__input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #555;
  border-radius: 4px;
  background: #3A3A3A;
  color: #fff;
  font-size: 15px;
  transition: border-color .15s ease;
  --focus-color: #fff;
}
.field__input::placeholder { color: #8A8A8A; }
.field__input:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 1px; border-color: #888; }
.field__input--textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; }
.field__input[aria-invalid="true"] { border-color: #F5A623; }
.field__control { position: relative; }
.field__control--icon .field__input { padding-left: 38px; }
.field__icon { position: absolute; left: 11px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: #8A8A8A; pointer-events: none; }
.field__control--select .field__input { appearance: none; padding-right: 48px; }
.field__control--select::before {
  content: "";
  position: absolute;
  right: 36px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #666;
  pointer-events: none;
}
.field__control--select::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #ccc;
  border-bottom: 1.5px solid #ccc;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.field__control--select option { background: #3A3A3A; color: #fff; }
.signupForm__submit {
  margin-top: 28px;
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #1F1F1F;
  font-weight: 500;
  font-size: 15px;
  transition: background-color .15s ease;
}
.signupForm__submit:hover { background: #e9e9e9; }
.signupForm__status { margin-top: 16px; font-size: 14px; color: #B5B5B5; min-height: 1.4em; }
.signupForm__status.is-success { color: #fff; font-size: 17px; font-weight: 500; }

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */