/* ===== fontes da casa (22/09/2026) =====
   As mesmas Funnel Display e Funnel Sans que vinham do Google Fonts, agora servidas daqui: os arquivos são os que o
   fonts.gstatic.com entrega (variáveis, latin e latin-ext), baixados em 22/09. Motivo: a folha do Google bloqueava a
   primeira pintura (1.070 ms no celular, PageSpeed). Nada muda no desenho — as capturas saem pixel a pixel iguais.
   Licença: SIL Open Font License 1.1 (Funnel, Sander Pedersen / Google Fonts). Trocar de versão = rebaixar os .woff2
   da mesma URL do css2 e conferir os unicode-range abaixo. */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../assets/fonts/funnel-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../assets/fonts/funnel-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/funnel-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/funnel-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   enlance · base.css
   tokens · reset · typography · layout · reusable components · header ·
   mobile sheet · hero · footer
   Rules: no CSS case transforms anywhere (write text in its final case);
   animate only transform/opacity; glows = radial-gradient (no filter blur).
   ===================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  /* palette (original enlance) */
  --cream: #F5EFE6;          /* page */
  --paper: #FBF8F2;          /* cards, light surfaces */
  --sand: #EFE8DC;           /* alt section */
  --ink: #1A1714;            /* text, dark sections */
  --ink-2: #3A332B;          /* body text */
  --muted: #6B6358;          /* secondary text, menu items */
  --soft-muted: #B6ADA0;     /* outlines, disabled */
  --line: #E4DCCF;           /* borders */
  --rust: #A04E2E;           /* accent text, eyebrows, focus */
  --coral: #E08763;
  --peach: #EDB199;          /* accent on dark */
  --lavender: #9A8FD1;
  --lavender-light: #C2B9E5;
  --white: #FFFFFF;

  --grad: linear-gradient(100deg, #E08763, #9A8FD1);
  --divider: rgba(182, 173, 160, .55);        /* soft-muted @55% */
  --on-dark: #FBF8F2;
  --on-dark-2: #EFE8DC;
  --on-dark-muted: rgba(251, 248, 242, .66);
  --line-dark: rgba(251, 248, 242, .14);
  --surface-dark: rgba(251, 248, 242, .06);
  --selection: #F7DDCF;

  /* type */
  --font-display: "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans: "Funnel Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-h1: clamp(46px, 5.55vw, 80px);
  --fs-h2: clamp(32px, 4vw, 52px);
  --fs-h2-xl: clamp(40px, 5vw, 64px);   /* contact H2 */
  --fs-h3: clamp(22px, 1.8vw, 26px);
  --fs-price: clamp(44px, 5vw, 60px);
  --fs-lead: clamp(17.5px, 1.35vw, 19.5px);
  --fs-body: 17px;
  --fs-menu: 15px;
  --fs-btn: 15px;
  --fs-btn-lg: 17px;
  --fs-eyebrow: 14px;
  --fs-chip: 13.5px;
  --fs-caption: 14px;

  /* spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: clamp(20px, 4vw, 40px);
  --container: 1240px;
  --section-y: clamp(64px, 6.2vw, 88px);     /* one vertical rhythm: 88 at 1440 (integration) */
  --svc-gap: clamp(48px, 5.6vw, 80px);       /* between the service blocks, parts A and B (fix pass: pays for the sob demanda panel and the 88px end of part B) */
  --section-y-tight: clamp(44px, 5vw, 72px);
  --head-gap: clamp(32px, 4vw, 52px);     /* section header → content */

  /* radii */
  --r-xs: 6px; --r-sm: 10px; --r-frame: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 26px; --r-pill: 999px;

  /* shadows */
  --shadow-btn: 0 12px 26px rgba(184, 95, 60, .24);
  --shadow-card: 0 1px 2px rgba(26, 23, 20, .04), 0 14px 34px -22px rgba(26, 23, 20, .22);
  --shadow-frame: 0 1px 2px rgba(26, 23, 20, .06), 0 24px 60px -24px rgba(26, 23, 20, .30);
  --shadow-phone: 0 2px 6px rgba(26, 23, 20, .16), 0 30px 60px -22px rgba(26, 23, 20, .45);

  /* motion (plan §9) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.76, 0, .24, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-slow: 450ms;
  --dur-reveal: 500ms;
  --dur-hero: 900ms;
  --stagger: 70ms;

  /* header */
  --header-h: 56px;
  --z-header: 50;
  --z-progress: 60;
  --z-sheet: 70;
}
@media (min-width: 1024px) {
  :root { --header-h: 72px; }
}
@media (max-width: 759.98px) {
  :root { --fs-body: 16px; --fs-eyebrow: 13px; --fs-chip: 13px; --svc-gap: 40px; }
}

/* ---------- 2. reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* only light: o modo escuro forçado do Android/Samsung não inverte a paleta (fundo marrom, título branco) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: only light; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  font-variant-numeric: lining-nums;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--selection); color: var(--ink); }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
@media (min-width: 1024px) { [id] { scroll-margin-top: calc(var(--header-h) + 8px); } }
/* the two anchors that follow a dark band land flush under the header, so no sliver of the band shows (fix pass) */
#antes, #duvidas { scroll-margin-top: var(--header-h); }

:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
.section--dark :focus-visible, .on-dark :focus-visible { outline-color: var(--peach); }

/* ---------- 3. typography ---------- */
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -.025em;
  word-spacing: .02em;
  text-wrap: balance;
  color: var(--ink);
}
@media (max-width: 759.98px) { .h1 { letter-spacing: -.02em; } }
.h1__line { display: block; }
.h2 {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.h2--xl { font-weight: 700; font-size: var(--fs-h2-xl); line-height: 1.02; letter-spacing: -.025em; }
.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-price);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 520px;
  text-wrap: pretty;
}
.body, .prose p { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); max-width: 66ch; text-wrap: pretty; }
p { text-wrap: pretty; }
.caption { font-size: var(--fs-caption); line-height: 1.45; color: var(--muted); }
.num { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; }
.nowrap { white-space: nowrap; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--rust);
}
.eyebrow__rings { width: 16px; height: 10px; flex: none; }

/* gradient text (fallback: rust) */
.grad-text { color: var(--rust); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-text {
    background-image: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}
.accent-peach { color: var(--peach); }
@media (forced-colors: active) {
  .grad-text { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; }
}

.sr-only {
  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;
}

/* ---------- 4. layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* iPhone deitado (viewport-fit=cover): o conteúdo não entra embaixo do entalhe nem da borda arredondada.
     Fora desse caso env() vale 0 e a margem continua a --gutter. O cabeçalho usa o mesmo .container */
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.container--narrow { max-width: calc(880px + 2 * var(--gutter)); }

.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--paper { background: var(--paper); }
.section--sand { background: var(--sand); }
.section--line { border-top: 1px solid var(--line); }

.section-head { max-width: 680px; margin-bottom: var(--head-gap); }
.section-head > * + * { margin-top: 14px; }
.section-head > .lead { margin-top: 16px; }
.section-head > .cluster, .section-head > .btn, .section-head > .link-arrow { margin-top: 24px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

.stack > * + * { margin-top: var(--stack, 16px); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, 12px); }

/* dark section with coral + lavender glows (radial gradients, no blur filter) */
.section--dark {
  /* original: coral + lavender circles with blur(110px), rebuilt as radial gradients with brighter, tighter cores
     (peach → coral, lavender-light → lavender) and a faint lavender bridge along the bottom (fix pass) */
  color: var(--on-dark);
  background:
    radial-gradient(380px circle at 80% 0%, rgba(237, 177, 153, .34), rgba(224, 135, 99, .16) 40%, rgba(224, 135, 99, 0) 70%),
    radial-gradient(420px circle at 12% 100%, rgba(194, 185, 229, .30), rgba(154, 143, 209, .12) 45%, rgba(154, 143, 209, 0) 72%),
    radial-gradient(900px 260px at 50% 100%, rgba(154, 143, 209, .08), rgba(154, 143, 209, 0) 70%),
    var(--ink);
}
.section--dark .eyebrow { color: var(--peach); }
.section--dark .h2, .section--dark .h3 { color: var(--on-dark); }
.section--dark .lead, .section--dark .body, .section--dark p { color: var(--on-dark-2); }
.section--dark .caption { color: var(--on-dark-muted); }

/* ---------- 5. components ---------- */

/* 5.1 buttons */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-btn);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .005em;
  white-space: nowrap;
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn .arw { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
/* :hover só onde há mouse de verdade (launch, 17/09/2026): no toque o estado de hover gruda depois do toque */
@media (hover: hover) {
  .btn:hover .arw { transform: translateX(3px); }
  .btn:hover .arw--down { transform: translateY(2px); }
}
.btn:active { transform: translateY(1px) scale(.99); transition-duration: 100ms; }
.btn svg { flex: none; }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: var(--fs-btn-lg); }
.btn--block { display: flex; width: 100%; }

.btn--primary { background: var(--grad); color: var(--white); box-shadow: var(--shadow-btn); }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(100deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .btn--primary:hover { color: var(--white); transform: translateY(-2px); }
  .btn--primary:hover::after { opacity: 1; }
}

.btn--secondary { background: var(--paper); color: var(--ink); border: 1px solid var(--soft-muted); font-weight: 500; }
.btn--secondary .arw { color: var(--rust); }
@media (hover: hover) { .btn--secondary:hover { border-color: var(--ink); } }

.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark .arw { color: var(--peach); }
.btn--dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--ink-2); opacity: 0; transition: opacity var(--dur-fast) linear;
}
@media (hover: hover) { .btn--dark:hover::after { opacity: 1; } }

.btn--ghost-dark { color: var(--on-dark); border: 1px solid rgba(251, 248, 242, .32); font-weight: 500; }
.btn--ghost-dark .arw { color: var(--peach); }
@media (hover: hover) { .btn--ghost-dark:hover { border-color: var(--on-dark); } }

/* 5.2 text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  font-size: 16px;
  color: var(--rust);
}
.link-arrow .arw { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  .link-arrow:hover { color: var(--ink); }
  .link-arrow:hover .arw { transform: translateX(3px); }
}
.link-arrow--muted { color: var(--muted); font-weight: 500; font-size: 14px; }
.section--dark .link-arrow { color: var(--peach); }
@media (hover: hover) { .section--dark .link-arrow:hover { color: var(--on-dark); } }

/* 5.3 chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(251, 248, 242, .72);
  font-size: var(--fs-chip);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--muted);
  white-space: nowrap;
}
.chip b { color: var(--ink); font-weight: 600; }
a.chip { transition: border-color var(--dur-fast) linear; }
@media (hover: hover) { a.chip:hover { border-color: var(--soft-muted); color: var(--ink-2); } }
.chip--sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.chip--dark { background: var(--surface-dark); border-color: var(--line-dark); color: var(--on-dark-2); }
.chip--dark b { color: var(--on-dark); }

/* 5.4 card */
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.2vw, 28px);
}
.card--shadow { box-shadow: var(--shadow-card); }
.card--dark { background: var(--surface-dark); border-color: var(--line-dark); color: var(--on-dark); }

/* 5.5 dados row (prazo | inclui) */
/* side by side while each cell gets ≥180px, stacked otherwise (depends on the space the
   row actually has, so it works in a wide block and in a narrow price card alike).
   Separators are pseudo-elements in the gap, clipped by overflow:hidden at the row edges. */
.dados {
  --dados-line: var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  column-gap: 41px;
  overflow: hidden;
  border-block: 1px solid var(--dados-line);
}
.dados > div { position: relative; padding: 14px 0; min-width: 0; }
.dados > div::before { content: ""; position: absolute; left: -21px; top: 14px; bottom: 14px; width: 1px; background: var(--dados-line); }
.dados > div::after { content: ""; position: absolute; left: -41px; right: -41px; top: -1px; height: 1px; background: var(--dados-line); }
.dados dt { font-size: 13.5px; font-weight: 600; letter-spacing: .01em; color: var(--muted); }
.dados dd { margin-top: 4px; font-size: 15.5px; font-weight: 500; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.dados dd b { font-weight: 600; }
.section--dark .dados { --dados-line: var(--line-dark); }
.section--dark .dados dt { color: var(--on-dark-muted); }
.section--dark .dados dd { color: var(--on-dark); }

/* 5.6 bullet list with mini rings */
.lista-aneis { display: grid; gap: 10px; }
.lista-aneis > li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lista-aneis > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 17px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 46'%3E%3Ccircle cx='23' cy='23' r='15' fill='none' stroke='%23E08763' stroke-width='9'/%3E%3Ccircle cx='47' cy='23' r='15' fill='none' stroke='%239A8FD1' stroke-width='9'/%3E%3Cpath d='M28.3 9A15 15 0 0 1 40.2 19.6' fill='none' stroke='%23E08763' stroke-width='9'/%3E%3C/svg%3E") no-repeat center / contain;
}
.section--dark .lista-aneis > li { color: var(--on-dark-2); }

/* 5.7 BrowserFrame */
/* chrome sizes are in em of a 12px base: set --bf-ui (e.g. .8) to scale the chrome
   down for small windows without touching the capture */
.bf {
  --bf-ratio: 16 / 10;
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-frame);
  background: #FBFAF8;
  border: 1px solid rgba(26, 23, 20, .10);
  box-shadow: var(--shadow-frame);
  isolation: isolate;
  font-family: var(--font-sans);
  font-size: calc(12px * var(--bf-ui, 1));
  line-height: 1;
}
.bf__tabs {
  display: flex;
  align-items: flex-end;
  height: 3em;
  padding: 0 .85em 0 1.15em;
  background: #E9E4DC;
}
.bf__lights { display: flex; gap: .58em; align-self: center; margin-right: 1.15em; }
.bf__lights i { width: .92em; height: .92em; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .14); }
.bf__lights i:nth-child(2) { background: #FEBC2E; }
.bf__lights i:nth-child(3) { background: #28C840; }
.bf__tab {
  display: flex;
  align-items: center;
  gap: .58em;
  height: 2.42em;
  min-width: 0;
  max-width: 18.5em;
  padding: 0 .85em 0 .92em;
  border-radius: .75em .75em 0 0;
  background: #FBFAF8;
  font-weight: 500;
  color: #3A332B;
  white-space: nowrap;
}
.bf__tab-title { overflow: hidden; text-overflow: ellipsis; }
.bf__favicon { width: 1.17em; height: 1.17em; flex: none; border-radius: .25em; object-fit: cover; }
.bf__tab-x { width: .67em; height: .67em; margin-left: .67em; flex: none; color: #8C857B; }
.bf__newtab { width: .85em; height: .85em; margin: 0 0 .75em .85em; color: #6B6358; }
.bf__toolbar {
  display: flex;
  align-items: center;
  gap: 1em;
  height: 3.35em;
  padding: 0 1em;
  background: #FBFAF8;
  border-bottom: 1px solid rgba(26, 23, 20, .08);
}
.bf__navbtns { display: flex; gap: 1em; color: #8C857B; }
.bf__navbtns svg { width: 1.08em; height: 1.08em; }
.bf__omni {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .58em;
  min-width: 0;
  height: 2.25em;
  padding: 0 1em;
  border-radius: var(--r-pill);
  background: #EFE9E1;
  font-size: 1.04em;
  white-space: nowrap;
  overflow: hidden;
}
.bf__lock { width: .88em; height: .88em; flex: none; color: #6B635A; }
.bf__domain { color: #1A1714; }
.bf__path { color: #6B635A; overflow: hidden; text-overflow: ellipsis; }
.bf__domain + .bf__path { margin-left: -.58em; }   /* cancels the omnibox gap: "domain.com.br/path", no space (integration) */
.bf__view { position: relative; aspect-ratio: var(--bf-ratio); overflow: clip; background: #FFFFFF; }
.bf__view > img { width: 100%; height: auto; max-width: none; }
.bf--mini .bf__tabs { display: none; }
.bf--mini .bf__toolbar { height: 2.85em; gap: .85em; }
.bf--mini .bf__toolbar::before {
  content: ""; flex: none; width: 3.75em; height: .92em;
  background:
    radial-gradient(circle at .46em 50%, #FF5F57 .43em, transparent .47em),
    radial-gradient(circle at 1.875em 50%, #FEBC2E .43em, transparent .47em),
    radial-gradient(circle at 3.29em 50%, #28C840 .43em, transparent .47em);
}
.bf--mini .bf__toolbar::after { content: ""; flex: none; width: 3.75em; }   /* balances the lights so the omnibox is centered */
.bf--mini .bf__navbtns { display: none; }
.bf--mini .bf__omni { flex: 0 1 auto; margin-inline: auto; min-width: 45%; height: 1.92em; font-size: .96em; justify-content: center; }

/* 5.8 janela viva (auto-scrolling capture inside a fixed-size viewport) */
.janela-viva { container-type: size; overflow: clip; }
.janela-viva > img {
  will-change: transform;
  animation: janela-viva var(--jv-dur, 22s) cubic-bezier(.45, 0, .55, 1) infinite alternate both;
  animation-play-state: paused;
}
.janela-viva.is-playing > img { animation-play-state: running; }
@keyframes janela-viva {
  0%, 6% { transform: translateY(0); }
  94%, 100% { transform: translateY(min(0px, calc(100cqh - 100%))); }
}
@media (prefers-reduced-motion: reduce) {
  .janela-viva > img { animation: none; }
}
.jv-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper);
  font-size: 13px; font-weight: 500; color: var(--muted);
}
@media (hover: hover) { .jv-toggle:hover { color: var(--ink); border-color: var(--soft-muted); } }
/* one look for every pause button: pause/play glyph + label (the label text is swapped by core.js) */
.jv-toggle svg { flex: none; }
.jv-toggle__play { display: none; }
.jv-toggle.is-paused .jv-toggle__pause { display: none; }
.jv-toggle.is-paused .jv-toggle__play { display: block; }
/* one place for every pause button: a small frosted pill inside the bottom-left corner of its frame, like a video control (fix pass) */
.jv-toggle--frame {
  position: absolute;
  z-index: 3;
  min-height: 30px;
  padding: 0 11px;
  border-color: rgba(26, 23, 20, .10);
  background: rgba(251, 248, 242, .85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink-2);
  box-shadow: 0 4px 12px -6px rgba(26, 23, 20, .35);
}
.jv-toggle--frame::after { content: ""; position: absolute; inset: -7px -4px; }   /* 44px touch area */
html:not(.js) .jv-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .jv-toggle { display: none; } }

/* 5.9 PhoneFrame (graphite, island, status bar via --pf-status / --pf-status-ink) */
.pf {
  --pf-status: #FFFFFF;
  --pf-status-ink: #1A1714;
  --pf-home: rgba(26, 23, 20, .82);
  container-type: inline-size;
  position: relative;
  width: var(--pf-w, 260px);
  max-width: 100%;
  margin: 0;
}
.pf__body {
  position: relative;
  padding: 3.4cqi;
  border-radius: 15.5cqi;
  background: linear-gradient(150deg, #4A4A50 0%, #2A2A2E 38%, #1F1F22 100%);
  box-shadow:
    inset 0 0 0 .6cqi rgba(255, 255, 255, .07),
    inset 0 0 0 1.1cqi #151517,
    0 0 0 1px rgba(26, 23, 20, .30),
    var(--shadow-phone);
}
.pf__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 390 / 844;
  overflow: clip;
  border-radius: 12.4cqi;
  background: var(--pf-status);
}
.pf__status {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 11.2cqi;
  padding: 1.2cqi 7.4cqi 0 8.6cqi;
  background: var(--pf-status);
  color: var(--pf-status-ink);
  font-family: -apple-system, "SF Pro Text", var(--font-sans);
  font-size: 3.9cqi;
  font-weight: 600;
  letter-spacing: -.01em;
}
.pf__island {
  position: absolute;
  left: 50%;
  top: 2.3cqi;
  width: 28.5cqi;
  height: 8.2cqi;
  margin-left: -14.25cqi;
  border-radius: 99px;
  background: #0B0B0C;
}
.pf__icons { display: flex; align-items: center; gap: 1.4cqi; }
.pf__icons svg { height: 3.3cqi; width: auto; fill: currentColor; }
.pf__view { position: relative; flex: 1; min-height: 0; overflow: clip; background: #FFFFFF; }
.pf__view > img { width: 100%; height: auto; max-width: none; }
.pf__home {
  position: absolute;
  left: 50%;
  bottom: 2cqi;
  width: 32cqi;
  height: 1.25cqi;
  margin-left: -16cqi;
  border-radius: 99px;
  background: var(--pf-home);
  z-index: 2;
}

/* 5.10 overlapped desktop + phone composition */
.duo { position: relative; padding-bottom: 24px; }
.duo > .bf { width: 100%; }
.duo > .pf {
  position: absolute;
  right: -24px;
  bottom: 0;
  width: clamp(150px, 28%, 280px);
  transition: transform var(--dur-base) var(--ease-out);
}
@media (min-width: 1024px) { .duo > .pf { min-width: 220px; } }
@media (hover: hover) { .duo:hover > .pf { transform: translateY(-6px); } }
@media (max-width: 759.98px) { .duo > .pf { right: -8px; } }

/* 5.10b NotebookFrame (.nb) e composição .nb-duo (notebook + celular) · 17/09/2026
   Notebook de frente, sem perspectiva e sem logo na tampa, com uma barra de navegador de UMA linha dentro da tela 16:10
   (a única moldura sem aba nem favicon). Toda a geometria em cqi do próprio .nb (100cqi = largura da base; a tampa,
   --nb-lw, fica centrada). A tela mostra a captura a largura × 0,593 (a barra come o topo): capture a 1100×652 ou 1440×854,
   ou garanta que os 3,2% de baixo não tenham nada importante. Mudou a captura? Meça e troque --nb-capw / --nb-cut.
   Os valores padrão são os do topo (captura da Raiz a 1100px, corte em 652): o topo usa o componente sem sobrescrever nada.
   Contrato, medidas e armadilhas no COMPONENTS.md §11 "NotebookFrame". */
.nb {
  --nb-lw: 96;       /* tampa, centrada (a base vai de 0 a 100 − --nb-tuck) */
  --nb-rim: .3;      /* aro de alumínio da tampa */
  --nb-bs: 1.1;      /* moldura dos lados */
  --nb-bt: 2.3;      /* moldura de cima, com a câmera */
  --nb-bb: 2.4;      /* queixo */
  --nb-hinge: .4;    /* dobradiça */
  --nb-bh: 2;        /* base */
  --nb-tuck: 0;      /* quanto a ponta direita da base termina antes da borda (2 na .nb-duo, debaixo do celular) */
  --nb-capw: 1100;   /* largura da captura mostrada na tela, em px do site */
  --nb-cut: 652;     /* px do site onde a tela corta embaixo (capw × 0,625 − barra) */
  --nb-sw: calc(var(--nb-lw) - 2 * var(--nb-rim) - 2 * var(--nb-bs));                         /* 93,2: largura da tela */
  --nb-bar: calc(var(--nb-sw) * (var(--nb-capw) * .625 - var(--nb-cut)) / var(--nb-capw));   /* 3,008: altura da barra */
  container-type: inline-size;
  position: relative;
  font-family: var(--font-sans);
  line-height: 1;
}
/* tampa: aro de alumínio prata levemente quente + moldura de vidro escuro, sem logo */
.nb__lid {
  position: relative;
  z-index: 1;
  width: calc(var(--nb-lw) * 1cqi);
  margin-inline: auto;
  padding: calc(var(--nb-rim) * 1cqi);
  border-radius: 2.1cqi 2.1cqi .5cqi .5cqi;
  background: linear-gradient(180deg, #DCD8D2, #B9B4AD);
  /* a receita do --shadow-frame, em cqi (valores dela quando o notebook tem 640px) */
  box-shadow: 0 0 0 .1cqi rgba(26, 23, 20, .12), 0 .16cqi .32cqi rgba(26, 23, 20, .06), 0 3.75cqi 9.4cqi -3.75cqi rgba(26, 23, 20, .30);
}
.nb__bezel {
  position: relative;
  padding: calc(var(--nb-bt) * 1cqi) calc(var(--nb-bs) * 1cqi) calc(var(--nb-bb) * 1cqi);
  border-radius: 1.8cqi 1.8cqi .25cqi .25cqi;
  background: #141315;
  box-shadow: inset 0 0 0 .1cqi rgba(255, 255, 255, .06);
}
.nb__cam {
  position: absolute;
  left: 50%;
  top: calc(var(--nb-bt) * .5cqi);
  width: .5cqi;
  height: .5cqi;
  margin: -.25cqi 0 0 -.25cqi;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #474B55 0, #1B1C21 45%, #070708 100%);
}
.nb__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 10;
  overflow: clip;
  border-radius: .2cqi;
  background: var(--nb-bg, #FFFFFF);   /* --nb-bg = fundo do site, enquanto a captura carrega */
}
/* barra de navegador de uma linha (tokens da .bf): semáforos à esquerda, pílula com cadeado + domínio (+ caminho) no centro */
.nb__bar {
  flex: none;
  display: flex;
  align-items: center;
  height: calc(var(--nb-bar) * 1cqi);
  padding: 0 .75em;
  font-size: calc(var(--nb-bar) * .5cqi);   /* 1em = metade da barra */
  background: #FBFAF8;
  box-shadow: inset 0 -1px 0 rgba(26, 23, 20, .08);
}
.nb__lights { display: flex; gap: .5em; width: 3.2em; flex: none; }
.nb__lights i { width: .68em; height: .68em; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .14); }
.nb__lights i:nth-child(2) { background: #FEBC2E; }
.nb__lights i:nth-child(3) { background: #28C840; }
.nb__bar::after { content: ""; flex: none; width: 3.2em; }   /* equilibra os semáforos: a pílula fica no centro */
.nb__omni {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42em;
  min-width: 46%;
  height: 1.66em;
  margin-inline: auto;
  padding: 0 1.1em;
  border-radius: 99px;
  background: #EFE9E1;
  white-space: nowrap;
}
.nb__lock { width: .78em; height: .78em; flex: none; color: #6B635A; }
.nb__domain { font-size: 1.16em; color: #1A1714; }
.nb__path { font-size: 1.16em; color: #6B635A; }
.nb__domain + .nb__path { margin-left: -.42em; }   /* "dominio.com.br/caminho", sem espaço (como na .bf) */
/* celular: semáforos de ~3px viram ruído; fica só a pílula, maior e centralizada */
@media (max-width: 759.98px) {
  .nb__lights, .nb__bar::after { display: none; }
  .nb__omni { height: 1.76em; min-width: 58%; }
  .nb__domain, .nb__path { font-size: 1.26em; }
}
.nb__view { position: relative; flex: 1; min-height: 0; background: var(--nb-bg, #FFFFFF); }
.nb__view > picture { display: block; }
.nb__view > img, .nb__view > picture > img { display: block; width: 100%; height: auto; max-width: none; }

/* dobradiça: grafite, mais estreita que a tampa, com um fio de luz de 1px embaixo */
.nb__hinge {
  width: calc(var(--nb-lw) * .9cqi);
  height: calc(var(--nb-hinge) * 1cqi);
  min-height: 2px;
  margin-inline: auto;
  border-radius: 0 0 .3cqi .3cqi;
  background: linear-gradient(180deg, #2B2A29, #464440);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .22);
}
/* base: tampo claro + frente prata num degradê só, pontas iguais e arredondadas embaixo. Na .nb-duo a ponta direita termina
   --nb-tuck antes da borda, escondida debaixo do celular: o canto dele (raio 3,68cqi) é mais redondo que o da base e,
   com a base até 100cqi, sobrava um fio claro (e uma cunha prata no hover) ao lado dele */
.nb__base {
  position: relative;
  height: calc(var(--nb-bh) * 1cqi);
  margin-right: calc(var(--nb-tuck) * 1cqi);
  border-radius: .6cqi .6cqi 2cqi 2cqi / .4cqi .4cqi 1.2cqi 1.2cqi;
  background: linear-gradient(180deg, #F2EFEA 0, #F2EFEA 18%, #DAD6D0 19%, #BCB7B0 100%);
  box-shadow: inset 0 -.14cqi 0 rgba(26, 23, 20, .16);
}
.nb__notch {
  position: absolute;
  left: 50cqi;   /* meio do notebook (= da tampa), não da base encurtada */
  top: 0;
  width: 13cqi;
  height: .9cqi;
  margin-left: -6.5cqi;
  border-radius: 0 0 1.4cqi 1.4cqi / 0 0 .9cqi .9cqi;
  background: linear-gradient(180deg, #C6C1BA, #D6D2CC);
  box-shadow: inset 0 .12cqi .2cqi rgba(26, 23, 20, .16);
}
/* sombra de contato na mesa (radial, sem blur) */
.nb__base::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -1.5cqi;
  right: calc(-1.5cqi - var(--nb-tuck) * 1cqi);   /* 1,5cqi pra fora do notebook dos dois lados, com ou sem --nb-tuck */
  top: 45%;
  height: 3.4cqi;
  background: radial-gradient(50% 50% at 50% 50%, rgba(26, 23, 20, .30), rgba(26, 23, 20, .12) 50%, rgba(26, 23, 20, 0) 100%);
  pointer-events: none;
}
/* celular: a sombra não passa de 8px pra fora (com o notebook a 8px da borda da tela, 1,5cqi passaria dela acima de
   ~533px e criaria rolagem lateral) */
@media (max-width: 759.98px) { .nb__base::after { left: max(-1.5cqi, -8px); right: calc(max(-1.5cqi, -8px) - var(--nb-tuck) * 1cqi); } }

/* composição notebook + celular: o celular (23,75cqi, 78% da altura da tampa) fica rente à direita e pisa --nb-drop à frente
   da linha da base; a altura da composição = notebook + pisada ≈ 67cqi. Sobe no hover, mas nunca mais que a pisada
   menos 1px (o pé não passa da linha de baixo da base e a ponta dela continua escondida) */
.nb-duo { --nb-drop: 1.1; position: relative; container-type: inline-size; min-width: 0; margin: 0; }
.nb-duo > .nb { --nb-tuck: 2; z-index: 1; margin-bottom: calc(var(--nb-drop) * 1cqi); }
.nb-duo > .pf {
  --pf-w: var(--nb-pf-w, 23.75cqi);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  transition: transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .nb-duo:hover > .pf { transform: translateY(max(-6px, calc(1px - var(--nb-drop) * 1cqi))); } }
/* celular: camada própria pro corpo do celular (nada anima). Sem ela, a 344 e 360px, a sombra grande do celular saía com
   uma aresta vertical reta na junção de dois ladrilhos de pintura */
@media (max-width: 759.98px) { .nb-duo > .pf .pf__body { will-change: transform; } }
@media (prefers-reduced-motion: reduce) { .nb-duo > .pf { transition: none; } }

/* 5.11 FAQ <details> */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: balance;
}
.faq-item > summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .faq-item > summary:hover { color: var(--rust); } }
.faq-icon {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  transition: transform 240ms var(--ease-out);
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px;
  border-radius: 2px; background: var(--rust);
}
.faq-icon::after { transform: rotate(90deg); transition: opacity 240ms linear; }
.faq-item[open] .faq-icon { transform: rotate(180deg); }
.faq-item[open] .faq-icon::after { opacity: 0; }
.faq-a { padding: 0 48px 22px 0; }
.faq-a p { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-a { animation: faq-in 320ms var(--ease-out); }
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 5.12 reveal on scroll (content is visible without JS / with reduced motion) */
.reveal-pending { opacity: 0; transform: translateY(24px); }
.reveal-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
@media (max-width: 759.98px) {
  .reveal-pending { transform: translateY(12px); }
  .reveal-in { transition-duration: 450ms; }
}

/* ---------- 6. skip link + progress ---------- */
.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: 15px;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline-color: var(--peach); }

.progress { position: fixed; inset: 0 0 auto; z-index: var(--z-progress); height: 2px; pointer-events: none; }
.progress__bar { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- 7. header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  padding-top: env(safe-area-inset-top);
}
/* .95 keeps the bar reading as solid cream over the dark faixa too (it turned muddy grey at .86, fix pass) */
.site-header__bg {
  position: absolute;
  inset: 0;
  background: rgba(245, 239, 230, .95);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
}
.site-header.is-scrolled .site-header__bg { opacity: 1; }
/* over a full-bleed dark section (#como-funciona, [data-header-dark]) the bar turns ink instead (core.js toggles .is-over-dark) */
.site-header__bg--dark { background: rgba(26, 23, 20, .9); border-bottom-color: var(--line-dark); }
.site-header.is-scrolled .site-header__bg--dark,
.site-header.is-over-dark .site-header__bg:not(.site-header__bg--dark) { opacity: 0; }
.site-header.is-scrolled.is-over-dark .site-header__bg--dark { opacity: 1; }
/* sem JS nada liga o .is-scrolled: a barra fica sempre com o fundo creme, senão o conteúdo passa por trás do logo */
html:not(.js) .site-header__bg:not(.site-header__bg--dark) { opacity: 1; }
/* the pinned services index sits right under the header: one line between them, not two */
html.svc-stuck .site-header__bg { border-bottom-color: transparent; }
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); flex: none; min-height: 44px; }
.logo__rings { width: 34px; height: 21px; flex: none; }   /* plan §4: 34×21 on phones */
.logo__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  transform: translateY(-1px);
}
@media (min-width: 1024px) {
  .logo__rings { width: 44px; height: 27px; }
  .logo__word { font-size: 25px; }
}

/* desktop capsule menu */
.nav, .header-cta { display: none; }
@media (min-width: 1024px) {
  .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .header-cta { display: inline-flex; justify-self: end; min-height: 44px; padding: 0 20px; font-size: var(--fs-btn); }
  .header-cta::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 6px rgba(224, 135, 99, .22);
    opacity: 0; transition: opacity var(--dur-fast) linear;
  }
  .site-header.is-halo .header-cta::before { opacity: 1; }

  .nav {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 3px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: rgba(251, 248, 242, .55);
  }
  .nav__group { display: flex; align-items: center; }
  .nav__group > li { position: relative; display: flex; align-items: center; }
  .nav__group > li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 14px;
    margin-top: -7px;
    background: var(--divider);
    transition: opacity var(--dur-fast) linear;
  }
  .nav__group > li:has(> [aria-current])::before,
  .nav__group > li:has(> [aria-current]) + li::before { opacity: 0; }
  .nav__link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--r-pill);
    font-size: var(--fs-menu);
    font-weight: 500;
    line-height: 1;
    color: var(--muted);
    white-space: nowrap;
    transition: color var(--dur-fast) linear;
  }
  /* reserves the semibold width so the active state never shifts the capsule */
  .nav__link::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; pointer-events: none; user-select: none; }
  @media (hover: hover) { .nav__link:hover { color: var(--ink); } }
  .nav__link[aria-current] { color: var(--ink); font-weight: 600; }
  .nav__pill {
    position: absolute;
    left: 0;
    top: 3px;
    width: 0;
    height: 36px;
    border-radius: var(--r-pill);
    background: var(--grad);
    opacity: 0;
    transform-origin: 0 50%;
    pointer-events: none;
    transition: opacity var(--dur-slow) var(--ease-out);
  }
  .nav__pill.is-on { opacity: .16; }
  .nav__rings { width: 16px; height: 10px; margin: 0 12px; flex: none; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .nav__link { padding: 0 11px; font-size: 14px; }
  .nav__rings { margin: 0 8px; }
  .header-cta { padding: 0 16px; font-size: 14px; }
}

/* mobile bar */
.mbar { display: flex; align-items: center; gap: 8px; }
@media (min-width: 1024px) { .mbar { display: none; } }
.menu-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 13px 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(251, 248, 242, .72);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.menu-pill::after { content: ""; position: absolute; inset: -3px -2px; }  /* 44px touch area */
.menu-pill__label { display: inline-flex; align-items: center; gap: 7px; transition: opacity var(--dur-fast) linear; }
.menu-pill__label.is-swapping { opacity: 0; }
.menu-pill__dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
.menu-pill.has-section .menu-pill__dot { display: block; }
.menu-pill__icon { width: 16px; height: 16px; color: var(--muted); }
.menu-pill__label { white-space: nowrap; }
/* narrow phones: "• antes & depois" / "• como funciona" must stay on one line next to the logo and the
   WhatsApp button, so the pill drops the ≡ icon while it names a section (the dot still marks it) */
@media (max-width: 419.98px) {
  .menu-pill { gap: 8px; padding: 0 13px 0 14px; }
  .menu-pill.has-section { padding-inline: 14px; }
  .menu-pill.has-section .menu-pill__icon { display: none; }
}
@media (max-width: 374.98px) {
  .menu-pill { font-size: 14px; }
  .menu-pill__label { gap: 6px; }
}
/* a steady width, so the pill doesn't grow and shrink under the thumb as the section label changes (fix pass) */
@media (max-width: 1023.98px) { .menu-pill { min-width: 146px; justify-content: center; } }
@media (max-width: 374.98px) { .menu-pill { min-width: 138px; } }
/* sem JS a pílula não abre a folha: some, e ficam o logo e o botão do WhatsApp (o menu do desktop são âncoras e funciona) */
html:not(.js) .menu-pill { display: none; }
/* abaixo de 360px (logo 123 + pílula 138 + WhatsApp 40 + vãos passavam da tela: o botão redondo saía 21px a 320):
   vãos e margem da barra menores e a pílula encolhe; se ainda faltar espaço, o nome da seção corta com reticências.
   A largura sai de um width fixo de 138px que encolhe com a barra, e não do texto: só depende da tela, então a pílula não cresce
   nem encolhe ao trocar "menu" pelo nome da seção (revisão do lançamento, 17/09/2026; a 320 fica em ~113px) */
@media (max-width: 359.98px) {
  .site-header__inner { gap: 8px; padding-left: 16px; padding-right: 16px; }
  .site-header .logo { gap: 8px; }
  .mbar { gap: 6px; min-width: 0; }
  .menu-pill, .menu-pill.has-section { flex: 0 1 auto; width: 138px; min-width: 0; gap: 6px; padding-inline: 12px; }
  .menu-pill__label { min-width: 0; overflow: hidden; }
  .menu-pill__label > [data-menu-text] { overflow: hidden; text-overflow: ellipsis; }
  .wa-round { flex: none; }
}
.wa-round {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  -webkit-tap-highlight-color: transparent;
}
.wa-round::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
.wa-round::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 5px rgba(224, 135, 99, .24); opacity: 0; transition: opacity var(--dur-fast) linear;
}
.site-header.is-halo .wa-round::before { opacity: 1; }

/* header over a dark section: light logo and menu, inverted buttons (fix pass) */
.site-header.is-over-dark .logo, .site-header.is-over-dark .logo__word { color: var(--on-dark); }
.site-header.is-over-dark :focus-visible { outline-color: var(--peach); }
.site-header.is-over-dark .menu-pill { border-color: var(--line-dark); background: rgba(251, 248, 242, .08); color: var(--on-dark); }
.site-header.is-over-dark .menu-pill__icon { color: var(--on-dark-muted); }
.site-header.is-over-dark .wa-round { background: var(--paper); color: var(--ink); }
@media (min-width: 1024px) {
  .site-header.is-over-dark .nav { border-color: var(--line-dark); background: rgba(251, 248, 242, .07); }
  .site-header.is-over-dark .nav__link { color: rgba(251, 248, 242, .74); }
  .site-header.is-over-dark .nav__link[aria-current] { color: var(--on-dark); }
  @media (hover: hover) { .site-header.is-over-dark .nav__link:hover { color: var(--on-dark); } }
  .site-header.is-over-dark .nav__group > li + li::before { background: rgba(251, 248, 242, .22); }
  .site-header.is-over-dark .nav__pill.is-on { opacity: .34; }
  .site-header.is-over-dark .header-cta { background: var(--paper); color: var(--ink); }
  .site-header.is-over-dark .header-cta .arw { color: var(--rust); }
  .site-header.is-over-dark .header-cta::after { background: var(--sand); }
}

/* ---------- 8. mobile bottom sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); }
.sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(26, 23, 20, .44);
  opacity: 0;
  transition: opacity 220ms var(--ease-in);
}
.sheet.is-open .sheet__backdrop { opacity: 1; transition: opacity var(--dur-base) var(--ease-out); }
.sheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--cream);
  box-shadow: 0 -14px 44px rgba(26, 23, 20, .20);
  transform: translateY(100%);
  transition: transform 220ms var(--ease-in);
}
.sheet.is-open .sheet__panel { transform: translateY(var(--sheet-drag, 0px)); transition: transform var(--dur-base) var(--ease-out); }
.sheet.is-dragging .sheet__panel { transition: none; }
@media (min-width: 640px) {
  .sheet__panel { left: auto; right: 16px; bottom: 16px; width: 420px; border-radius: var(--r-xl); transform: translateY(calc(100% + 24px)); }
}
.sheet__handle { display: grid; place-items: center; height: 22px; margin: 0 -16px; touch-action: none; cursor: grab; }
.sheet__handle span { width: 38px; height: 4px; border-radius: 4px; background: var(--soft-muted); opacity: .7; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 2px; }
.sheet__title { font-size: 14px; font-weight: 500; color: var(--muted); }
.sheet__close {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--sand); color: var(--ink);
}
.sheet__group {
  display: flex; align-items: center; gap: 9px;
  margin: 12px 6px 8px;
  font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--rust);
}
.sheet__group:first-child { margin-top: 6px; }
.sheet__ring { width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid var(--coral); flex: none; }
.sheet__ring--lavanda { border-color: var(--lavender); }
.sheet__group:has(.sheet__ring--lavanda) { color: var(--ink-2); }
.sheet__list {
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
}
.sheet__list > li + li { border-top: 1px solid var(--line); }
.sheet__list > li:has(> [aria-current]), .sheet__list > li:has(> [aria-current]) + li { border-top-color: transparent; }
.sheet__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 50px;
  padding: 0 14px;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}
.sheet__name { font-size: 17px; font-weight: 500; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.sheet__desc, .sheet__here { font-size: 13.5px; line-height: 1.25; color: var(--muted); text-align: right; min-width: 0; }
.sheet__here { display: none; color: var(--rust); font-weight: 500; }
/* active item = the desktop capsule's look: brand gradient at 16% + ink text, no dark pill (integration) */
.sheet__link[aria-current] { background: linear-gradient(100deg, rgba(224, 135, 99, .16), rgba(154, 143, 209, .16)); }
.sheet__link[aria-current] .sheet__name { color: var(--ink); font-weight: 600; }
.sheet__link[aria-current] .sheet__desc { display: none; }
.sheet__link[aria-current] .sheet__here { display: block; }
.sheet__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 12px; }
.sheet__chips .chip--sm { position: relative; min-height: 36px; }
.sheet__chips .chip--sm::after { content: ""; position: absolute; inset: -3px 0; }   /* 42px touch area, no overlap across the 6px gap */
.sheet__foot { margin-top: 16px; }
.sheet__note { margin-top: 10px; text-align: center; font-size: 13.5px; color: var(--muted); }

html.is-sheet-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .sheet__panel, .sheet.is-open .sheet__panel, .sheet__backdrop, .sheet.is-open .sheet__backdrop { transition: none; }
}

/* ---------- 9. hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding: calc(var(--header-h) + clamp(28px, 4.6vw, 60px)) 0 clamp(52px, 5vw, 72px);
}
/* soft peach + lavender glows; allowed to bleed below the hero onto the cream page */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 -240px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(640px circle at 0% 4%, rgba(237, 177, 153, .62), rgba(237, 177, 153, .34) 36%, rgba(237, 177, 153, .12) 64%, rgba(237, 177, 153, 0) 100%),
    radial-gradient(520px circle at 102% 58%, rgba(194, 185, 229, .46), rgba(194, 185, 229, .2) 44%, rgba(194, 185, 229, 0) 100%);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 6vw, 56px);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 60px); }
  /* the four deadlines as a tidy 2×2 inside the text column (a single row overflowed it, 3 + 1 orphaned "app") (fix pass) */
  .hero__chips { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; }
  .hero__chips > li { display: flex; }
  .hero__chips .chip { flex: 1; font-size: 14px; padding: 0 14px; }
}
@media (min-width: 1280px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 620px; }
}
.hero__title { margin-top: 20px; }
.hero__lead { margin-top: 26px; max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__chips { margin-top: 26px; }
@media (min-width: 1024px) { .hero__lead { max-width: 510px; } }
/* small laptops: the two hero buttons stay on one row (they wrapped from 1024 up to ~1350) */
@media (min-width: 1024px) and (max-width: 1359.98px) {
  .hero__actions { gap: 10px; }
  .hero__actions .btn--lg { min-height: 52px; padding: 0 18px; font-size: 15px; }
}
@media (max-width: 759.98px) {
  .hero { padding-bottom: 36px; }
  .hero__title { margin-top: 16px; }
  .hero__lead { margin-top: 18px; }
  .hero__actions { margin-top: 26px; gap: 6px; }
  .hero__cta { width: 100%; }
  /* the secondary action stays an outlined pill on phones too (fix pass) */
  .hero__more { min-height: 44px; padding: 0 22px; margin-inline: auto; font-size: 16px; }
  .hero__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* 5px acima e 7px abaixo: a área de toque de 44px dos chips (::after, 5px pra fora de cada lado) cabe dentro da rolagem, que
       corta o que passa do padding (embaixo o Chrome ainda reserva ~1,5px pra barra de rolagem invisível). As margens descontam
       o padding a mais (3px em cima, 5px embaixo), então nada muda de lugar */
    margin: 15px calc(-1 * var(--gutter)) -5px;
    padding: 5px var(--gutter) 7px;
    scroll-padding-inline: var(--gutter);   /* snap to the gutter, not to the screen edge */
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* the cut-off chip fades out, so the row reads as scrollable */
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .hero__chips::-webkit-scrollbar { display: none; }
  .hero__chips > li { scroll-snap-align: start; }
}
@media (max-width: 1023.98px) {
  .hero__chips .chip { position: relative; }
  /* área de toque: o ::after se mede pela caixa de dentro da borda de 1px (32px), então -5px dá 42px (760-1023, com 8px de
     vão entre as fileiras) e -6px dá 44px no celular, onde os chips são uma fileira só dentro da rolagem */
  .hero__chips .chip::after { content: ""; position: absolute; inset: -5px 0; }
}
@media (max-width: 759.98px) { .hero__chips .chip::after { inset: -6px 0; } }

/* ===== topo · palco notebook + celular (16/09/2026) · versão navegador guardada em _versoes/topo-navegador ===== */
/* Notebook de frente (sem perspectiva) + celular numa caixa que escala com a coluna. O notebook e a composição são os
   componentes .nb e .nb-duo (5.10b, fora deste bloco, valem pro site inteiro): a .hero-stage__box é uma .nb-duo
   (largura da caixa = 100cqi; a base vai de 0 a 100 − --nb-tuck) e aqui fica só o que é do topo. A tela é 16:10 e mostra
   o site da Raiz capturado a 1100px; a barra de navegador come o topo da tela, então o corte de baixo, em px do site, é
   1100 × 10/16 − barra = 687,5 − 35,5 = 652 (os valores padrão do .nb), em todas as larguras: no meio do vão de 40px entre
   a borda de baixo dos botões 250 g / 500 g / 1 kg (último px escuro em 631, antisserrilhado em 632 no pôster) e o topo do
   "Assinar" (672), aberto no PATCHES.raiz do tools/demo-shots.js. Mudou a captura? Meça de novo e troque o --nb-cut na .hero-nb. */
.hero-stage { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
.hero-stage__box { position: relative; container-type: inline-size; }   /* + .nb-duo: pisada 1,1cqi, celular 23,75cqi, --nb-tuck 2 */
/* celular: o palco (caixa + legenda) avança sobre a margem e fica sempre a 8px da borda da tela (12px de avanço até
   500px de largura, até ~22px perto de 760, porque a margem é clamp(20px, 4vw, 40px)): o site fica maior (0,29 da
   captura a 360px), com mais folga dos dois lados do corte, e a legenda ganha a mesma largura e cabe numa linha até 320px */
@media (max-width: 759.98px) { .hero-stage { margin-inline: calc(8px - var(--gutter)); } }

.hero-nb { --nb-bg: #FBF6EE; }   /* fundo do site da Raiz na tela, enquanto a captura carrega */
.hero-win__shot { display: block; width: 100%; height: auto; max-width: none; }
/* celular: o pôster fica parado no primeiro quadro, com o corte no vão dos botões (a janela viva desceria ~59px
   e levaria o corte junto; a captura inteira só entra em ≥760px) */
@media (max-width: 759.98px) { .nb__view > .hero-win__shot { animation: none; } }

/* celular do topo (a .nb-duo põe o celular com 23,75cqi rente à direita, pisando à frente da base). A borda esquerda
   (76,25cqi) passa 1cqi à esquerda do selo "Torrado há 3 dias" (x 872 do site = 77,3cqi) e o topo cai em y≈141 do site, no
   meio do vão entre a linha do menu (123) e o topo da foto (158): o selo fica inteiro coberto, sem toco */
.hero-phone .pf__screen { background: #3B2A20; }
.hero-phone .pf__view > img { display: block; }

/* app notification (plan §9 #6): enters once, 2.4 s after the stage is on screen, leaves after 4 s (core.js) */
.hero-notif {
  position: absolute;
  z-index: 2;
  left: 3.2cqi;
  right: 3.2cqi;
  top: 12.6cqi;
  display: flex;
  align-items: center;
  gap: 2.6cqi;
  padding: 2.6cqi 3.4cqi 2.6cqi 2.6cqi;
  border-radius: 6.4cqi;
  background: rgba(250, 247, 243, .9);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 1.2cqi 4cqi rgba(0, 0, 0, .28);
  font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  color: #1C1C1E;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
  pointer-events: none;
}
.hero-notif.is-in { opacity: 1; transform: none; }
.hero-notif.is-out { opacity: 0; transform: translateY(-12px); }
.hero-notif__icon { flex: none; display: grid; place-items: center; width: 9.4cqi; height: 9.4cqi; border-radius: 2.2cqi; background: #3B2A20; }
.hero-notif__icon svg { width: 6.6cqi; height: 6.6cqi; }
.hero-notif__txt { display: grid; min-width: 0; flex: 1; }
.hero-notif__top { display: flex; justify-content: space-between; font-size: 3cqi; color: #6B6B70; }
.hero-notif__top b { font-weight: 600; color: #3C3C43; }
.hero-notif__title { margin-top: .4cqi; font-size: 3.6cqi; font-weight: 600; letter-spacing: -.01em; }
.hero-notif__body { font-size: 3.5cqi; color: #3C3C43; }
html[data-capture] .hero-notif { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-notif { display: none; } }

/* legenda + pausa: uma linha embaixo do notebook, fora da tela (a pausa nunca cobre a demonstração) */
.hero-stage__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  text-wrap: balance;   /* abaixo de ~306px, se quebrar, quebra em duas linhas parecidas */
}
.hero-stage__caption svg { width: 16px; height: 10px; flex: none; }
.hero-stage__pause { position: relative; justify-self: center; }
.hero-stage__pause::after { content: ""; position: absolute; inset: -7px -3px; }   /* área de toque de 44px de altura: 32 + 2 × 7 − os 2px da borda */
@media (max-width: 759.98px) { .hero-stage__pause { display: none; } }   /* no celular o palco fica no pôster parado */
@media (min-width: 760px) {
  .hero-stage {
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    grid-template-areas: "box box box box" ". cap pause .";
    align-items: center;
  }
  .hero-stage__box { grid-area: box; }
  .hero-stage__caption { grid-area: cap; }
  .hero-stage__pause { grid-area: pause; margin-left: 16px; }   /* margem, não gap: sem a pausa (movimento reduzido) a legenda fica no centro exato */
}
@media (min-width: 760px) and (max-width: 1023.98px) {
  /* legenda + pausa centralizadas juntas: a pausa já nasce com a largura de "continuar", senão a legenda anda 8px a cada clique */
  .hero-stage__pause { justify-content: center; min-width: 7.6em; }
}
@media (min-width: 1024px) {
  /* legenda à esquerda, pausa logo depois */
  .hero-stage { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "box box box" "cap pause ."; }
  .hero-stage__caption { justify-content: flex-start; padding-left: 2px; }
  .hero-stage__pause { justify-self: start; }
}
/* 1024-1279 (notebooks pequenos, iPad deitado): a caixa tem 430-547px e o notebook fica bem mais baixo que a coluna
   de texto; notebook + legenda andam juntos (vão de 14px, texto da legenda a ~20px do pé do celular, como em 760-1023)
   e o grupo fica centralizado na altura da coluna. O alinhamento com os chips fica só a partir de 1280 */
@media (min-width: 1024px) and (max-width: 1279.98px) { .hero-stage { align-self: center; } }
@media (min-width: 1280px) {
  /* o palco ocupa a altura da coluna de texto: o notebook fica centralizado nessa altura e a linha da legenda
     ancora embaixo, na altura da última fileira de chips (34px, centros alinhados) */
  .hero-stage {
    align-self: stretch;
    grid-template-rows: minmax(0, 1fr) 34px;
    row-gap: 0;
  }
  .hero-stage__box { grid-row: 1 / 3; align-self: center; }
  /* caixa de 640px (era 620) e vão de 44px: o texto fica com 556px a 1440 e 516px a 1280. Sobrescreve a grade
     de ≥1280 de fora do bloco (620px), que volta sozinha se o bloco sair */
  .hero__grid { grid-template-columns: minmax(0, 1fr) 640px; gap: 44px; }
}
/* ===== fim · topo · palco notebook ===== */

/* hero entrance: plays only with JS + motion allowed; starts at .2 opacity (never 0, LCP).
   Starts on the first paint and no longer waits for the web fonts (launch, 17/09/2026): on 4G the H1 and the button sat
   at 20% until ~4,0s (now ~3,1s, same FCP of ~2,05s, Slow 4G + CPU 4x). It only moves transform/opacity: CLS stayed the same
   (0 at 390; 0,0135-0,017 at 1440, from the font swap on the faixa and the "ver o que fazemos" button, before and after) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-hero-in] { animation: hero-in var(--dur-hero) var(--ease-expo) var(--d, 0ms) both; }
  /* the H1 lines only rise (launch review, 17/09/2026): the title is fully opaque on the first paint, the fade stays on
     the eyebrow, the lead, the buttons and the chips. Delays grow top to bottom, so the lines only move apart, never overlap */
  .js .h1__line[data-hero-in] { animation-name: hero-rise; }
  .js [data-stage-in] { animation: stage-in var(--dur-hero) var(--ease-expo) 120ms both; }
  html[data-capture] [data-hero-in], html[data-capture] .h1__line[data-hero-in], html[data-capture] [data-stage-in] { animation: none; }
}
@keyframes hero-in { from { opacity: .2; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hero-rise { from { transform: translateY(24px); } to { transform: none; } }
@keyframes stage-in { from { transform: translateY(12px); } to { transform: none; } }

/* ---------- 10. footer ---------- */
.site-footer { padding: 36px 0 16px; border-top: 1px solid var(--line); background: var(--cream); }
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__tagline { margin-top: 8px; max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--muted); }
.site-footer__title { margin-bottom: 2px; font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--rust); }
.site-footer__col a { display: inline-flex; align-items: center; min-height: 32px; font-size: 15px; color: var(--ink-2); white-space: nowrap; }   /* 32 = desktop rows; well above the 24px target size (integration) */
.site-footer__ico { flex: none; margin-right: 8px; color: currentColor; opacity: .75; }
@media (hover: hover) { .site-footer__col a:hover { color: var(--rust); } .site-footer__col a:hover .site-footer__ico { opacity: 1; } }
.site-footer__col:last-child { grid-column: 1 / -1; }
.site-footer__col:last-child ul { display: flex; flex-wrap: wrap; gap: 0 22px; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.site-footer__bottom .link-arrow { min-height: 40px; }
@media (max-width: 759.98px) { .site-footer__nome { display: none; } }   /* one line on phones (mobile length, fix pass) */
@media (min-width: 900px) {
  .site-footer { padding: 52px 0 16px; }
  .site-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
  .site-footer__brand, .site-footer__col:last-child { grid-column: auto; }
  .site-footer__col:last-child ul { display: grid; }
  .site-footer__title { margin-bottom: 6px; }
  .site-footer__col a { min-height: 32px; }
  .site-footer__bottom { margin-top: 36px; }
}

/* ---------- 11. capture mode (tools/capture.js sets html[data-capture]) ---------- */
html[data-capture] .janela-viva > img { animation: none; }
html[data-capture] .reveal-pending { opacity: 1; transform: none; }