/* ==========================================================================
   NAKE COMUNICA · LANDING PAGE
   Mobile first (390px → 1440px). Tokens do documento 03.
   Regra de ouro: o CSS descreve o ESTADO FINAL de tudo. As animações
   (CSS no topo, GSAP no resto) só partem dele, então sem JS ou com
   movimento reduzido a página fica completa e legível.
   ========================================================================== */

/* ---------- Fontes ---------------------------------------------------- */
@font-face {
  font-family: "Object Sans";
  src: url("../assets/fonts/object-sans-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Object Sans";
  src: url("../assets/fonts/object-sans-slanted.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Object Sans";
  src: url("../assets/fonts/object-sans-heavy.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Object Sans";
  src: url("../assets/fonts/object-sans-heavy-slanted.woff2") format("woff2");
  font-weight: 800; font-style: italic; font-display: swap;
}
/* Fallback com métricas ajustadas: reduz o "pulo" quando a Object Sans chega. */
@font-face {
  font-family: "Object Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  font-weight: 400; font-style: normal;
  size-adjust: 108.8%; ascent-override: 67.6%; descent-override: 21.1%; line-gap-override: 0%;
}
@font-face {
  font-family: "Object Sans Fallback";
  src: local("Arial Italic"), local("Arial-ItalicMT"), local("Liberation Sans Italic");
  font-weight: 400; font-style: italic;
  size-adjust: 112.8%; ascent-override: 65.1%; descent-override: 20.4%; line-gap-override: 0%;
}
@font-face {
  font-family: "Object Sans Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
  font-weight: 800; font-style: normal;
  size-adjust: 103.9%; ascent-override: 71.8%; descent-override: 22.1%; line-gap-override: 0%;
}

/* ---------- Tokens ---------------------------------------------------- */
:root {
  --preto: #2b2b2b;
  --branco: #f2f2f2;
  --bordo: #1a0a0f;
  --blush: #f6e6ea;
  --vinho: #7a1d3a;
  --rosa: #d9a3b1;

  --fonte: "Object Sans", "Object Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: 20px;
  --guarda: 24px;              /* distância mínima entre texto e módulo/imagem/pill/logo */
  --nav-h: 64px;
  --secao-y: clamp(72px, 9vw, 144px);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --fs-rotulo: 12px;
  --fs-corpo: clamp(1rem, .96rem + .2vw, 1.125rem);
  --fs-pequeno: clamp(.8125rem, .79rem + .1vw, .875rem);
  --fs-h1: clamp(2.5rem, 1.17rem + 6.48vw, 7rem);
  --fs-h2: clamp(2rem, 1.3rem + 2.9vw, 4rem);
  --fs-h2-grande: clamp(2.25rem, 1.15rem + 4.5vw, 5.5rem);
  --fs-h3: clamp(1.375rem, 1.12rem + 1vw, 2rem);
}
@media (max-width: 379px) { :root { --gutter: 16px; } }
@media (min-width: 768px) { :root { --gutter: 32px; --fs-rotulo: 13px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; --guarda: 48px; --nav-h: 76px; } }
@media (min-width: 1280px) { :root { --gutter: 64px; } }

/* Temas por seção: claro (branco/blush) e escuro (preto/bordô). */
.tema-claro, [data-tema="claro"] {
  --surface: var(--branco);
  --ink: var(--preto);
  --ink-muted: #666063;
  --accent: var(--vinho);
  --line: #c9c2c5;
  --modulo: var(--blush);
  --fantasma: #aca6a8;
  --btn-bg: var(--vinho);
  --btn-fg: var(--branco);
  --btn-ponto: var(--rosa);
  color: var(--ink);
}
.tema-escuro, [data-tema="escuro"] {
  --surface: var(--preto);
  --ink: var(--branco);
  --ink-muted: #a8a2a4;
  --accent: var(--rosa);
  --line: #5a5356;
  --modulo: var(--bordo);
  --fantasma: #5f5a5c;
  --btn-bg: var(--rosa);
  --btn-fg: var(--preto);
  --btn-ponto: var(--vinho);
  color: var(--ink);
}
.fundo-blush, [data-fundo="blush"] { --surface: var(--blush); --modulo: var(--branco); }
.fundo-bordo, [data-fundo="bordo"] { --surface: var(--bordo); --modulo: var(--preto); }

/* ---------- Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--preto);
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--fs-corpo);
  line-height: 1.55;
  font-synthesis: none;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--preto);
  color: var(--branco);
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--rosa); color: var(--preto); }
main:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--foco, var(--accent, var(--rosa)));
  outline-offset: 3px;
}
.tema-claro :focus-visible, [data-tema="claro"] :focus-visible { --foco: var(--vinho); }
.tema-escuro :focus-visible, [data-tema="escuro"] :focus-visible { --foco: var(--rosa); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.nowrap { white-space: nowrap; }

.pular {
  position: fixed; z-index: 100; left: 12px; top: 12px;
  padding: 12px 18px;
  background: var(--rosa); color: var(--preto);
  font-weight: 800; text-decoration: none;
  border-radius: 999px;
  transform: translateY(-150%);
  transition: transform .2s;
}
.pular:focus { transform: none; }

.container {
  width: 100%;
  max-width: calc(1312px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section, footer { position: relative; background: var(--surface); }
section { padding-block: var(--secao-y); }

/* ---------- Tipografia ------------------------------------------------ */
.rotulo {
  font-size: var(--fs-rotulo);
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-muted);
}
.secao-cab { margin-bottom: clamp(40px, 5vw, 72px); }
.secao-cab .rotulo, .telefone__cab .rotulo, .contato__cab .rotulo, .sobre__texto > .rotulo { margin-bottom: 20px; }
.h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.028em;
  max-width: 17ch;
  text-wrap: balance;
}
.h2--grande { font-size: var(--fs-h2-grande); max-width: 14ch; letter-spacing: -.032em; line-height: .95; }
p { text-wrap: pretty; }
strong { font-weight: 800; }
em { font-style: italic; }

/* Dado pendente: fica visível até a Nath confirmar no config.js */
mark.confirmar {
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .86em;
  padding: 0 .28em;
  outline: 1px dashed currentColor;
  outline-offset: 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  white-space: normal;
}

/* Marca-texto estático (rosa atrás de 1 a 3 palavras, texto preto) */
mark.marca-texto {
  background: var(--rosa);
  color: var(--preto);
  padding: 0 .14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- Módulos geométricos --------------------------------------- */
.mod { display: block; fill: currentColor; width: 100%; height: auto; }
.mod--tom, .mod--tom-alt { color: var(--modulo); }
.mod--acento { color: var(--accent); }

/* ---------- Botões (o ponto desliza para dentro no hover) ------------- */
.btn {
  --h: 50px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--h);
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .005em;
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn__ponto {
  position: absolute;
  left: 14px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--btn-ponto);
  transform: translateX(-26px) scale(.4);
  transition: transform .45s var(--ease);
}
.btn__texto { display: block; transition: transform .45s var(--ease); }
@media (hover: hover) {
  .btn:hover .btn__ponto, .btn:focus-visible .btn__ponto { transform: none; }
  .btn:hover .btn__texto, .btn:focus-visible .btn__texto { transform: translateX(7px); }
}
.btn:active { transform: scale(.98); }
.btn--sm { --h: 40px; padding: 0 16px; font-size: 13px; }
.btn--sm .btn__ponto { left: 10px; width: 6px; height: 6px; margin-top: -3px; }
.btn--lg { --h: 56px; padding: 0 30px; font-size: 16px; }
.btn--bloco { display: flex; width: 100%; }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;
  font-size: 15px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  text-decoration-color: var(--ink-muted);
}
.link-seta span { display: inline-block; transition: transform .35s var(--ease); }
.link-seta:hover span { transform: translateY(3px); }

/* ==========================================================================
   0. NAVEGAÇÃO
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: transparent;
  color: var(--ink);
  transition: transform .5s var(--ease);
}
.nav.is-solida { background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.nav.is-oculta { transform: translateY(-101%); }
.nav.is-aberta { transform: none; background: var(--surface); }
.nav__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--nav-h);
  max-width: calc(1312px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nav__logo { display: block; margin-right: auto; padding: 8px 0; color: var(--ink); }
.nav__logo svg { width: 76px; height: auto; fill: currentColor; overflow: visible; }
.nav__links { display: none; }
.nav__cta { flex: none; }
.nav__menu {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.nav__menu-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.nav__menu-icone { position: relative; display: block; width: 22px; height: 12px; }
.nav__menu-icone::before, .nav__menu-icone::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 2px;
  background: currentColor;
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.nav__menu-icone::before { top: 0; }
.nav__menu-icone::after { top: 10px; }
.nav__menu[aria-expanded="true"] .nav__menu-icone::before { top: 5px; transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__menu-icone::after { top: 5px; transform: rotate(-45deg); }
.nav__painel {
  padding: 8px var(--gutter) 28px;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--line);
}
.nav__painel ul { list-style: none; display: grid; }
.nav__painel a {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
  border-top: 1px solid var(--line);
}
@media (min-width: 380px) { .nav__logo svg { width: 84px; } .nav__inner { gap: 12px; } }
@media (min-width: 960px) {
  .nav__logo svg { width: 96px; }
  .nav__inner { gap: 40px; }
  .nav__logo { margin-right: 0; }
  .nav__links { display: block; margin-left: auto; }
  .nav__links ul { list-style: none; display: flex; gap: 32px; }
  .nav__links a {
    position: relative;
    display: inline-block;
    padding: 8px 0;
    font-size: 15px;
    text-decoration: none;
  }
  .nav__links a::after {
    content: "";
    position: absolute; left: 50%; bottom: -2px;
    width: 5px; height: 5px; margin-left: -2.5px;
    border-radius: 50%;
    background: var(--accent);
    transform: scale(0);
    transition: transform .35s var(--ease);
  }
  .nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scale(1); }
  .nav__menu, .nav__painel { display: none !important; }
  .btn--sm { --h: 44px; padding: 0 20px; font-size: 14px; }
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero {
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--nav-h) + 20px);
  padding-bottom: 56px;
  overflow: clip;
}
/* Mobile: faixa de módulos acima do título (sangra pela direita). */
.hero { --m: clamp(44px, 13vw, 64px); }
.hero__mosaico {
  display: grid;
  grid-template-columns: repeat(6, var(--m));
  gap: calc(var(--m) * .05);
  align-self: flex-end;
  margin-right: calc(var(--m) * -.55);
  margin-bottom: 36px;
}
.hero__mosaico .mod { width: var(--m); transform: rotate(var(--r, 0deg)); }
.mod--h1 { color: var(--branco); }
.mod--h2 { color: var(--bordo); }
.mod--h3 { color: var(--rosa); }
.mod--h4 { color: var(--branco); --r: 90deg; }
.mod--h5 { color: var(--bordo); --r: 90deg; }
.mod--h6 { color: var(--bordo); --r: 180deg; }
.hero__conteudo { position: relative; display: flex; flex-direction: column; }
.hero__titulo {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--ink);
  max-width: 15ch;
}
.hero__sub {
  max-width: 36rem;
  margin-top: clamp(20px, 3vh, 36px);
  color: var(--ink);
}
.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: clamp(24px, 4vh, 44px);
}

/* Palavras do H1: cada uma dentro da própria máscara */
.w {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: .02em;
  vertical-align: top;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.w__i { display: inline-block; }

/* Marca-texto do H1: base (branca) e capa (preta) se trocam atrás do traço rosa */
.marca {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  isolation: isolate;
}
.marca::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.07em; right: -.07em;
  top: .1em; bottom: .02em;
  background: var(--rosa);
  transform-origin: 0 50%;
}
/* O texto troca de branco para preto junto com o traço, sem duplicar palavras:
   cada palavra tem um degradê duro recortado no próprio texto, que desliza no
   mesmo ritmo do marca-texto (--t0/--t1 = onde a palavra começa e termina no traço). */
.marca__base { display: inline-block; }
.marca .w__i {
  color: transparent;
  background-image: linear-gradient(90deg, var(--preto) 0 50%, var(--ink) 50% 100%);
  background-size: 200% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
}

/* O ponto final é o ponto da logo */
.ponto-final {
  display: inline-block;
  width: .2em; height: .2em;
  margin-left: .045em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: baseline;
}

@media (min-width: 900px) {
  .hero {
    --m: clamp(112px, 11vw, 184px);
    justify-content: center;
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + 40px);
    padding-bottom: clamp(40px, 6vh, 72px);
  }
  .hero__mosaico {
    position: absolute;
    top: calc(50% + var(--nav-h) / 2);
    right: calc(var(--m) * -.42);
    grid-template-columns: repeat(2, var(--m));
    margin: 0;
    transform: translateY(-50%);
  }
  /* área reservada ao mosaico: 1,63 módulo visível + guarda (48px) + folga do giro */
  .hero__titulo { max-width: min(15.2ch, calc(100vw - 2 * var(--gutter) - var(--m) * 1.63 - 88px)); }
}

/* Entrada do hero: CSS puro, começa no primeiro quadro (não espera o JS). */
@media (prefers-reduced-motion: no-preference) {
  .hero__titulo .w__i { animation: sobe .6s var(--ease) both; animation-delay: calc(60ms + var(--i) * 40ms); }
  .hero__titulo .marca::before { animation: traca .42s linear both; animation-delay: calc(60ms + var(--m) * 40ms + 420ms); }
  .hero__titulo .marca .w__i {
    animation: sobe .6s var(--ease) both, tinta calc((var(--t1, 1) - var(--t0, 0)) * 420ms) linear both;
    animation-delay: calc(60ms + var(--i) * 40ms), calc(60ms + var(--m) * 40ms + 420ms + var(--t0, 0) * 420ms);
  }
  .hero__titulo .ponto-final { animation: pontoCai .75s cubic-bezier(.3, 1.35, .55, 1) both; animation-delay: calc(60ms + var(--n) * 40ms + 780ms); }
  .hero__sub { animation: surge .7s var(--ease) both; animation-delay: .34s; }
  .hero__acoes { animation: surge .7s var(--ease) both; animation-delay: .44s; }
  .hero__mosaico .mod { animation: encaixa .7s var(--ease) both; }
  .hero__mosaico .mod:nth-child(1) { animation-delay: .12s; }
  .hero__mosaico .mod:nth-child(2) { animation-delay: .22s; }
  .hero__mosaico .mod:nth-child(3) { animation-delay: .32s; }
  .hero__mosaico .mod:nth-child(4) { animation-delay: .42s; }
  .hero__mosaico .mod:nth-child(5) { animation-delay: .52s; }
  .hero__mosaico .mod:nth-child(6) { animation-delay: .62s; }
}
@keyframes sobe { from { transform: translateY(108%); } }
@keyframes surge { from { clip-path: inset(0 0 100% 0); transform: translateY(14px); } to { clip-path: inset(-30px); transform: none; } }
@keyframes traca { from { transform: scaleX(0); } }
@keyframes tinta { from { background-position: 100% 0; } }
@keyframes pontoCai {
  0% { opacity: 0; transform: translateY(-.5em); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes encaixa {
  from { opacity: 0; transform: rotate(calc(var(--r, 0deg) - 90deg)) scale(.6); }
  to { opacity: 1; transform: rotate(var(--r, 0deg)) scale(1); }
}

/* ==========================================================================
   2. FAIXA DE PROVA
   ========================================================================== */
.prova { padding-block: 40px; }
.prova__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px 16px;
}
.prova__titulo { grid-column: 1; }
.marquee__pausa { grid-column: 2; grid-row: 1; }
.marquee { grid-column: 1 / -1; }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__trilho { display: flex; width: max-content; }
.marquee__lista {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
  min-height: 56px;
}
.logo-cliente { height: var(--h, 32px); width: auto; max-width: none; }
.logo-cliente--pedagio { --h: 30px; }
.logo-cliente--colegio { --h: 34px; }
.logo-cliente--noana { --h: 24px; }
.logo-cliente--ultra { --h: 40px; }
.logo-cliente--podovip { --h: 38px; }
.logo-cliente--movvia { --h: 21px; }
.logo-cliente--rogoblins { --h: 32px; }
.logo-cliente--gr { --h: 46px; }
@media (prefers-reduced-motion: no-preference) {
  .marquee__trilho { animation: desliza 64s linear infinite; }
  .marquee:hover .marquee__trilho, .marquee:focus-within .marquee__trilho, .marquee.is-pausado .marquee__trilho { animation-play-state: paused; }
}
@keyframes desliza { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__lista[aria-hidden="true"], .prova .marquee__pausa { display: none; }
  .marquee__trilho { width: auto; }
  .marquee__lista { flex-wrap: wrap; justify-content: flex-start; gap: 24px 48px; padding: 0; }
}
.marquee__pausa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--fs-pequeno);
}
.marquee__pausa-icone { position: relative; width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%; }
.marquee__pausa-icone::before, .marquee__pausa-icone::after {
  content: ""; position: absolute; top: 4px; width: 1.5px; height: 5px; background: currentColor;
}
.marquee__pausa-icone::before { left: 4.5px; }
.marquee__pausa-icone::after { right: 4.5px; }
.marquee__pausa.is-pausado .marquee__pausa-icone::before {
  left: 5px; top: 3.5px; width: 0; height: 0; background: none;
  border-style: solid; border-width: 3.5px 0 3.5px 5px; border-color: transparent transparent transparent currentColor;
}
.marquee__pausa.is-pausado .marquee__pausa-icone::after { display: none; }
@media (min-width: 768px) {
  .prova { padding-block: 48px; }
  .prova__inner { grid-template-columns: minmax(150px, 190px) 1fr auto; gap: var(--guarda); }
  .prova__titulo { grid-column: 1; grid-row: 1; }
  .marquee { grid-column: 2; grid-row: 1; }
  .marquee__pausa { grid-column: 3; grid-row: 1; }
  .marquee__lista { gap: 80px; padding-right: 80px; min-height: 64px; }
  .logo-cliente--pedagio { --h: 36px; }
  .logo-cliente--colegio { --h: 40px; }
  .logo-cliente--noana { --h: 28px; }
  .logo-cliente--ultra { --h: 48px; }
  .logo-cliente--podovip { --h: 44px; }
  .logo-cliente--movvia { --h: 25px; }
  .logo-cliente--rogoblins { --h: 38px; }
  .logo-cliente--gr { --h: 54px; }
}

/* ==========================================================================
   3. PARA QUEM É · telefone sem fio
   ========================================================================== */
.telefone__cab .h2 { max-width: 19ch; }
.telefone__palco {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 40px;
}
.telefone__diagramas { display: grid; gap: 16px; }
.tel + .tel { padding-top: 16px; border-top: 1px solid var(--line); }
.tel__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: calc(var(--guarda) + 10px);
}
.tel__nome { padding-bottom: .45em; }
.tel__contador {
  display: flex;
  align-items: baseline;
  gap: .18em;
  font-weight: 800;
  font-size: clamp(2.25rem, 1.7rem + 2.7vw, 4.75rem);
  line-height: .85;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tel__unid { font-size: .3em; font-weight: 400; letter-spacing: .01em; }
.tel__contador--nake { color: var(--accent); }
.tel__contador mark.confirmar { font-size: .26em; font-weight: 400; letter-spacing: .02em; line-height: 1.3; }
.tel__mapa { position: relative; }
.tel__mapa--loop { height: 124px; }
.tel__mapa--reto { height: 38px; }
.tel__linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tel__linhas path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tel__linhas [data-tel-base] path { stroke: var(--line); stroke-width: 1.5; }
.tel__linhas [data-tel-trilha] path { stroke: var(--ink-muted); stroke-width: 1.5; }
.tel--nake .tel__linhas [data-tel-trilha] path { stroke: var(--accent); stroke-width: 2.5; }
.no {
  position: absolute;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--ink-muted);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  transition: border-color .3s, background-color .3s, color .3s;
}
.tel__mapa--loop .no--voce { left: 0; top: 0; }
.tel__mapa--loop .no--atendimento { right: 0; top: 0; }
.tel__mapa--loop .no--coordenacao { right: 0; bottom: 0; }
.tel__mapa--loop .no--criativo { left: 0; bottom: 0; }
.tel__mapa--reto .no--voce { left: 0; top: 0; }
.tel__mapa--reto .no--nath { right: 0; top: 0; background: var(--accent); border-color: var(--accent); color: var(--preto); font-weight: 800; }
.no.is-visitado { border-color: var(--ink); }
.tel__pedido {
  position: absolute;
  left: 0; top: 0;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  will-change: transform;
}
.telefone__texto { display: grid; gap: 16px; }
.telefone__itens { list-style: none; display: grid; gap: 8px; }
.telefone__itens li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-corpo);
  line-height: 1.4;
}
.telefone__itens li::before {
  content: "";
  position: absolute; left: 0; top: .52em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-muted);
}
.telefone__fecho { font-size: var(--fs-corpo); line-height: 1.4; color: var(--ink-muted); max-width: 36ch; }
.telefone__fecho strong { display: block; margin-top: 4px; color: var(--ink); font-size: 1.12em; }
@media (min-width: 600px) {
  .tel__mapa--loop { height: 168px; }
  .no { height: 42px; font-size: 14px; }
  .tel__mapa--reto { height: 42px; }
}
@media (min-width: 1024px) {
  .telefone__wrap {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto auto;
    column-gap: clamp(64px, 7vw, 128px);
    row-gap: 40px;
    align-content: center;
  }
  .telefone__palco { margin-top: 0; }
  .telefone__palco { display: contents; }
  .telefone__cab { grid-column: 1; grid-row: 1; align-self: end; }
  .telefone__texto { grid-column: 1; grid-row: 2; align-self: start; }
  .telefone__diagramas { grid-column: 2; grid-row: 1 / span 2; align-self: center; gap: 32px; }
  .tel + .tel { padding-top: 32px; }
  .tel__mapa--loop { height: 208px; }
  .no { height: 46px; padding: 0 22px; font-size: 15px; }
  .tel__mapa--reto { height: 46px; }
  .telefone__cab .h2 { font-size: clamp(2.25rem, 1.2rem + 2.2vw, 3.75rem); }
}

/* ==========================================================================
   4. COMO FUNCIONA
   ========================================================================== */
.como { overflow: clip; }
.como__modulos {
  --m: clamp(52px, 9vw, 132px);
  position: absolute;
  top: 0; right: 0;
  display: grid;
  grid-template-columns: repeat(2, var(--m));
  gap: calc(var(--m) * .05);
  transform: translate(22%, -18%);
}
.como__modulos .mod--c1 { grid-column: 1; grid-row: 1; }
.como__modulos .mod--c2 { grid-column: 2; grid-row: 1; }
.como__modulos .mod--c3 { grid-column: 2; grid-row: 2; transform: rotate(90deg); }
.como__cab .h2 { max-width: 15ch; }
.como__grade { display: grid; gap: 40px; }
.como__lista { list-style: none; display: grid; }
.diferencial { padding-block: 22px 26px; border-top: 1px solid var(--line); }
.como__lista .diferencial:last-child { border-bottom: 1px solid var(--line); }
.diferencial__titulo {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.diferencial p { max-width: 34ch; }
.diferencial--forte {
  --ink: var(--branco);
  --ink-muted: #f0d9df;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(28px, 4.2vw, 64px);
  border: 0;
  background: var(--vinho);
  color: var(--branco);
}
.diferencial--forte .diferencial__titulo {
  font-size: clamp(2.25rem, 1.35rem + 3.6vw, 4.75rem);
  line-height: .95;
  letter-spacing: -.034em;
  margin-bottom: 20px;
  max-width: 11ch;
}
.diferencial--forte .diferencial__texto { font-size: clamp(1.0625rem, .98rem + .4vw, 1.375rem); line-height: 1.45; max-width: 34ch; }
.diferencial__guia {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(217, 163, 177, .45);
  font-size: 15px;
  line-height: 1.35;
}
.diferencial__guia li { position: relative; padding-left: 17px; }
@media (max-width: 479px) { .diferencial__guia { grid-template-columns: 1fr; gap: 10px; } }
.diferencial__guia li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rosa);
}
.diferencial--forte :focus-visible { --foco: var(--branco); }
.como__fecho {
  display: grid;
  gap: calc(var(--guarda) + 20px);
  align-items: center;
  margin-top: clamp(72px, 9vw, 136px);
}
.agenda { margin: 0; }
.agenda__pontos {
  --pt: clamp(20px, 2.35vw, 32px);
  --pt-gap: clamp(9px, 1.05vw, 14px);
  display: grid;
  grid-template-columns: repeat(10, var(--pt));
  gap: var(--pt-gap);
}
@media (max-width: 379px) { .agenda__pontos { --pt: 19px; --pt-gap: 8px; } }
.agenda__ponto {
  width: var(--pt);
  height: var(--pt);
  border-radius: 50%;
  border: 1.5px solid var(--fantasma);
}
.agenda__ponto.is-marca { background: var(--accent); border-color: var(--accent); }
.agenda__legenda { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.agenda__chave { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.como__apoio {
  max-width: 21ch;
  font-size: clamp(1.75rem, 1.15rem + 2.5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.022em;
}
.como__destaque { font-weight: 800; color: var(--accent); letter-spacing: -.03em; }
@media (min-width: 1024px) {
  .como__cab .h2 { max-width: 19ch; }
  .como__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 5vw, 96px); align-items: stretch; }
  .como__lista { align-content: space-between; }
  .como__fecho { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(64px, 7vw, 128px); }
}

/* ==========================================================================
   5. SERVIÇOS (abas)
   ========================================================================== */
.abas__lista {
  display: flex;
  gap: 6px;
}
.aba {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--ink-muted);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.1;
  white-space: nowrap;
}
.aba__ponto { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: none; }
.aba[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--preto); }
@media (max-width: 379px) { .aba { font-size: 13px; padding: 0 10px; } }
.aba:hover:not([aria-selected="true"]) { border-color: var(--ink); }
.servicos { overflow-x: clip; }
.abas__palco {
  display: grid;
  gap: calc(var(--guarda) + 16px);
  margin-top: 40px;
}
.abas__icone {
  --m: clamp(96px, 26vw, 128px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, var(--m));
  gap: calc(var(--m) * .05);
  justify-self: end;
  margin-right: calc(var(--gutter) * -1);
}
.abas__icone [data-abas-modulo] { grid-column: 1; grid-row: 1; }
.abas__eco--1 { grid-column: 2; grid-row: 1; }
.abas__eco--2 { grid-column: 2; grid-row: 2; transform: rotate(180deg); }
.painel:focus-visible { outline-offset: 8px; }
.painel__titulo { font-size: var(--fs-h3); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 14px; }
.painel__texto { max-width: 36ch; font-size: clamp(1.0625rem, 1rem + .45vw, 1.375rem); line-height: 1.45; }
.painel__itens {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 28px 0 40px;
  max-width: 36rem;
  font-size: var(--fs-corpo);
  line-height: 1.35;
  color: var(--ink);
}
.painel__itens li { position: relative; padding: 13px 0 13px 18px; border-top: 1px solid var(--line); }
.painel__itens li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(13px + .45em);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
@media (min-width: 768px) {
  .abas__lista { flex-wrap: wrap; gap: 8px; }
  .aba { flex: 0 0 auto; padding: 0 22px; font-size: 15px; }
  .aba[aria-selected="true"] { font-weight: 800; }
  .aba[aria-selected="true"] .aba__ponto { display: block; }
}
@media (min-width: 768px) {
  .abas__palco {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(56px, 7vw, 128px);
    margin-top: 56px;
  }
  .abas__icone { --m: clamp(120px, 12vw, 196px); justify-self: end; margin-right: 0; margin-left: calc(var(--gutter) * -1 - var(--m) * .45); order: -1; }
  .abas__icone [data-abas-modulo] { grid-column: 2; grid-row: 1; }
  .abas__eco--1 { grid-column: 1; grid-row: 1; }
  .abas__eco--2 { grid-column: 1; grid-row: 2; }
}
@media (min-width: 1024px) {
  .abas__palco { margin-top: 64px; min-height: 420px; }
}

/* ==========================================================================
   6. CASES (cards empilhados)
   ========================================================================== */
/* o espaço entre os cards é o tempo em que cada case fica inteiro na tela
   antes de o próximo subir e cobrir */
.cases__pilha { list-style: none; display: grid; gap: clamp(160px, 30vh, 320px); }
.case {
  position: sticky;
  top: var(--stick-top, calc(var(--nav-h) + 16px + var(--i) * 12px));
  background: transparent;
}
.case__card {
  display: grid;
  gap: calc(var(--guarda) * 1.12);
  padding: 20px 20px 26px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  transform-origin: 50% 0;
}
.case.tema-escuro .case__card { border-color: var(--preto); }
.case.fundo-bordo .case__card { border-color: var(--bordo); }
.case.fundo-blush .case__card { border-color: var(--blush); }
.case__midia { order: -1; }
.case__segmento { margin-bottom: 10px; }
.case__nome {
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.75rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.032em;
  margin-bottom: 20px;
}
.case__etapas { position: relative; display: grid; gap: 14px; padding-left: 26px; }
.case__etapas::before {
  content: "";
  position: absolute;
  left: 4px; top: .6em; bottom: 1.4em;
  width: 1px;
  background: var(--line);
}
.etapa-case { position: relative; }
.etapa-case dt {
  position: relative;
  font-size: var(--fs-rotulo);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.etapa-case dt::before {
  content: "";
  position: absolute;
  left: -26px; top: .28em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.etapa-case dd { font-size: var(--fs-corpo); line-height: 1.45; max-width: 46ch; }
.case__resultado { padding-left: 26px; }
.case__resultado dd { max-width: none; }
.case__resultado-texto { max-width: 60ch; }
.case__resultado-texto + .metricas { margin-top: 18px; }
.metricas {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
/* celular: ícone à esquerda, número e rótulo à direita (caixas baixas) */
.metrica {
  --metrica-bg: var(--blush);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
  padding: 14px 16px;
  background: var(--metrica-bg);
}
.metrica__icone { grid-row: 1 / span 2; }
.case.fundo-blush .metrica { --metrica-bg: var(--branco); }
.case.fundo-bordo .metrica { --metrica-bg: var(--preto); }
.metrica__icone { width: 34px; height: 34px; color: var(--accent); overflow: visible; }
.metrica__icone .ic-traco { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.metrica__icone .ic-pupila { fill: currentColor; }
.metrica__valor {
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.625rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.metrica__rotulo { font-size: var(--fs-pequeno); line-height: 1.35; color: var(--ink-muted); }
.metricas__periodo { margin-top: 12px; font-size: var(--fs-pequeno); color: var(--ink-muted); }
/* Posts: três lado a lado; no celular viram uma faixa que desliza para o lado */
.case__midia--posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.post { margin: 0; background: var(--modulo); }
.post img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 767px) {
  .case__midia--posts {
    display: flex;
    gap: 10px;
    margin-inline: -20px;
    padding-inline: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  .case__midia--posts::-webkit-scrollbar { display: none; }
  .case__midia--posts .post { flex: 0 0 68%; scroll-snap-align: start; }
  .case__midia--posts .post:last-child { margin-right: 20px; }
}

/* Antes e depois (Noana): arraste a alça para comparar */
.ad__palco {
  --pos: 50%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--branco);
  border: 1px solid var(--line);
  touch-action: pan-y;
  cursor: ew-resize;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ad__par { position: absolute; inset: 0; margin: 0; }
.ad__par:not(.is-ativo):not(.is-saindo) { visibility: hidden; }
.ad__par.is-ativo { z-index: 1; }
.ad__img, .ad__img img { display: block; width: 100%; height: 100%; }
.ad__img img { object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ad__antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
/* selos nos cantos de baixo: no alto dos slides ficam os títulos */
.ad__rotulo {
  position: absolute;
  bottom: 10px;
  padding: 6px 11px 5px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ad__rotulo--antes { left: 10px; background: var(--branco); color: var(--preto); box-shadow: inset 0 0 0 1px var(--preto); }
.ad__rotulo--depois { right: 10px; background: var(--vinho); color: var(--branco); }
.ad__divisor {
  position: absolute;
  z-index: 3;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--preto);
  box-shadow: 1px 0 0 var(--branco), -1px 0 0 var(--branco);
  pointer-events: none;
}
.ad__alca {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: var(--pos);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border: 2px solid var(--branco);
  border-radius: 50%;
  background: var(--vinho);
  color: var(--branco);
  cursor: grab;
  transition: transform .25s var(--ease);
}
.ad__alca svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ad__alca:focus-visible { outline: 2px solid var(--vinho); outline-offset: 3px; }
.ad.is-arrastando .ad__alca { cursor: grabbing; transform: scale(1.1); }
.ad.is-arrastando .ad__palco { cursor: grabbing; }
.ad__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: var(--guarda);
}
.ad__legenda { display: flex; align-items: baseline; gap: 12px; min-width: 0; font-size: 15px; line-height: 1.3; }
.ad__contador {
  flex: none;
  font-size: var(--fs-rotulo);
  letter-spacing: .18em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ad__titulo { font-weight: 800; letter-spacing: -.01em; }
.ad__setas { display: flex; gap: 8px; flex: none; }
.ad__seta {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  transition: background-color .25s, color .25s, border-color .25s;
}
.ad__seta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .ad__seta:hover { background: var(--accent); border-color: var(--accent); color: var(--branco); } }
.no-js .ad__alca, .no-js .ad__nav { display: none; }
@media (max-width: 767px) {
  .case__midia--ad .ad__palco { margin: -20px -20px 0; border-width: 0 0 1px; }
}
@media (min-width: 768px) {
  .case__card { padding: 32px; }
  .ad__rotulo { bottom: 14px; font-size: 12px; padding: 7px 13px 6px; }
  .ad__rotulo--antes { left: 14px; }
  .ad__rotulo--depois { right: 14px; }
  .metricas { grid-template-columns: repeat(auto-fill, minmax(170px, 240px)); gap: 14px; }
  .metrica { grid-template-columns: 1fr; align-items: start; align-content: start; row-gap: 6px; padding: 16px 16px 18px; }
  .metrica__icone { grid-row: auto; margin-bottom: 10px; }
}
@media (min-width: 1024px) {
  .case__card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "texto midia" "resultado resultado";
    align-items: center;
    column-gap: calc(var(--guarda) * 1.12);
    row-gap: 60px;
    padding: clamp(40px, 4vw, 64px);
  }
  .case__texto { grid-area: texto; }
  .case__midia { grid-area: midia; order: 0; }
  .case__resultado { grid-area: resultado; }
  .case__midia--posts { gap: 14px; }
}

/* ==========================================================================
   7. PROCESSO
   ========================================================================== */
.processo__corpo { position: relative; padding-left: 44px; }
.processo__trilho {
  position: absolute;
  left: 7px; top: 12px; bottom: 60px;
  width: 2px;
  background: var(--line);
}
.processo__linha { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: 50% 0; }
.processo__lista { list-style: none; display: grid; gap: 44px; }
.passo-p { position: relative; }
.passo-p__ponto {
  position: absolute;
  left: -44px; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--surface);
}
.passo-p__num {
  display: block;
  font-size: clamp(2.5rem, 1.9rem + 2.4vw, 4.5rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.04em;
  color: var(--accent);
  margin-bottom: 16px;
}
.passo-p__titulo { font-size: clamp(1.25rem, 1.08rem + .75vw, 1.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin-bottom: 10px; max-width: 14ch; }
.passo-p p { color: var(--ink-muted); max-width: 30ch; }
@media (min-width: 1024px) {
  .processo__corpo { padding-left: 0; padding-top: 56px; }
  .processo__trilho { left: 8px; right: 12%; top: 7px; bottom: auto; width: auto; height: 2px; }
  .processo__linha { transform-origin: 0 50%; }
  .processo__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); }
  .passo-p__ponto { left: 0; top: -56px; }
}

/* ==========================================================================
   8. SOBRE
   ========================================================================== */
.sobre { overflow: clip; }
.sobre__modulo {
  position: absolute;
  right: 0; bottom: 0;
  width: clamp(88px, 17vw, 260px);
  transform: translate(28%, 28%);
}
.sobre__grade { display: grid; gap: var(--guarda); }
.sobre__manifesto {
  font-size: var(--fs-h2-grande);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.034em;
  max-width: 15ch;
}
.sobre__manifesto em { font-weight: 400; color: var(--vinho); letter-spacing: -.02em; }
.sobre__corpo {
  display: grid;
  gap: 20px;
  max-width: 40rem;
  margin-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(56px, 9vw, 64px);
}
.sobre__leitura { font-size: clamp(1.1875rem, 1.02rem + .75vw, 1.625rem); line-height: 1.45; letter-spacing: -.005em; }
.sobre__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 1024px) {
  .sobre__corpo { padding-bottom: 0; margin-left: clamp(0px, 8vw, 160px); }
  .sobre__grade.tem-foto { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; }
  .sobre__grade.tem-foto .sobre__corpo { margin-left: 0; }
}

/* ==========================================================================
   9. DEPOIMENTOS
   ========================================================================== */
.depoimentos__lista { display: grid; gap: 48px; }
.depoimento { border-top: 1px solid var(--line); padding-top: 28px; }
.depoimento blockquote { margin: 0; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.875rem); line-height: 1.3; letter-spacing: -.01em; }
.depoimento figcaption { margin-top: 20px; font-size: var(--fs-pequeno); color: var(--ink-muted); }
.depoimento figcaption strong { color: var(--ink); }
@media (min-width: 1024px) { .depoimentos__lista { grid-template-columns: repeat(2, 1fr); gap: 64px; } }

/* ==========================================================================
   10. NÃO É PARA TODO MUNDO
   ========================================================================== */
.nao-e__grade { display: grid; gap: 40px; }
.nao-e__titulo { font-size: var(--fs-h2-grande); max-width: 11ch; }
.nao-e__lista { list-style: none; display: grid; margin-bottom: 40px; }
.nao-e__item {
  position: relative;
  padding: 20px 0 20px 34px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  line-height: 1.35;
  color: var(--ink-muted);
}
.nao-e__item:last-child { border-bottom: 1px solid var(--line); }
.nao-e__item::before {
  content: "";
  position: absolute;
  left: 0; top: calc(20px + .42em);
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-muted);
}
.nao-e__item--sim { color: var(--ink); font-weight: 800; letter-spacing: -.01em; }
.nao-e__item--sim::before { background: var(--accent); border-color: var(--accent); }
@media (min-width: 1024px) {
  .nao-e__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 112px); align-items: start; }
}

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.faq__grade { display: grid; gap: 8px; }
.faq__cab .h2 { max-width: 12ch; }
.pergunta { border-top: 1px solid var(--line); }
.pergunta:last-child { border-bottom: 1px solid var(--line); }
.pergunta__titulo { font-size: inherit; }
.pergunta__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 72px;
  padding: 18px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.012em;
}
.pergunta__icone {
  position: relative;
  flex: none;
  width: 30px; height: 30px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transition: background-color .3s, border-color .3s;
}
.pergunta__icone::before, .pergunta__icone::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 11px; height: 1.5px;
  margin: -.75px 0 0 -5.5px;
  background: var(--ink);
  transition: transform .35s var(--ease), background-color .3s;
}
.pergunta__icone::after { transform: rotate(90deg); }
.pergunta__botao[aria-expanded="true"] .pergunta__icone { background: var(--accent); border-color: var(--accent); }
.pergunta__botao[aria-expanded="true"] .pergunta__icone::before,
.pergunta__botao[aria-expanded="true"] .pergunta__icone::after { background: var(--branco); }
.pergunta__botao[aria-expanded="true"] .pergunta__icone::after { transform: rotate(0deg); }
.pergunta__resposta { display: grid; grid-template-rows: 1fr; }
.pergunta__inner { overflow: hidden; }
.pergunta__inner p { max-width: 58ch; padding-bottom: 26px; }
.js .pergunta__resposta {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .5s var(--ease), visibility 0s linear .5s;
}
.js .pergunta.is-aberta .pergunta__resposta {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .5s var(--ease), visibility 0s;
}
@media (min-width: 1024px) {
  .faq__grade { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(48px, 6vw, 112px); align-items: start; }
  .faq__cab { position: sticky; top: calc(var(--nav-h) + 40px); margin-bottom: 0; }
}

/* ==========================================================================
   12. FORMULÁRIO
   ========================================================================== */
.contato__grade { display: grid; gap: 48px; }
.contato__apoio { margin-top: 24px; max-width: 36ch; color: var(--ink-muted); }
.contato__apoio strong { display: block; margin-bottom: 6px; color: var(--ink); font-weight: 800; }
.passos {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  margin-bottom: 36px;
}
.passo { display: flex; align-items: center; gap: 10px; font-size: var(--fs-pequeno); color: var(--ink-muted); }
.passo + .passo::before {
  content: "";
  display: block;
  width: clamp(16px, 5vw, 40px);
  height: 1px;
  margin: 0 12px 0 2px;
  background: var(--line);
}
.passo__ponto {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-muted);
  transition: transform .4s var(--ease), background-color .3s, border-color .3s;
}
.passo.is-feito .passo__ponto { background: var(--ink); border-color: var(--ink); }
.passo.is-atual { color: var(--ink); }
.passo.is-atual .passo__ponto { background: var(--accent); border-color: var(--accent); transform: scale(1.35); }
.etapa { margin: 0; padding: 0; border: 0; min-width: 0; }
.js .etapa:not(.is-ativa) { display: none; }
.etapa__legenda {
  display: block;
  padding: 0;
  margin-bottom: 28px;
  font-size: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
}
.etapa__legenda:focus { outline: none; }
.etapa__contagem {
  display: block;
  margin-bottom: 10px;
  font-size: var(--fs-rotulo);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.campo { margin-bottom: 22px; }
.campo__rotulo { display: block; margin-bottom: 8px; padding: 0; font-size: 15px; line-height: 1.3; color: var(--ink); }
.campo__opcional { color: var(--ink-muted); }
.campo__input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--ink-muted);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color .25s;
  -webkit-appearance: none;
  appearance: none;
}
.campo__input::placeholder { color: var(--ink-muted); opacity: 1; }
.campo__input:hover { border-color: var(--ink); }
.campo__input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.campo__input--area { min-height: 110px; resize: vertical; }
.campo__input[aria-invalid="true"] { border-color: var(--accent); border-width: 2px; padding: 11px 15px; }
.campo__erro { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--accent); }
.campo__erro:empty { display: none; }
.campo__erro::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: currentColor; vertical-align: .1em; }
.opcoes { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.opcoes__grade { display: grid; gap: 8px; }
.opcoes__grade--dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 18px;
  border: 1px solid var(--ink-muted);
  border-radius: 999px;
  font-size: 15px;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color .25s, background-color .25s;
}
.opcao:hover { border-color: var(--ink); }
.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.opcao__ponto {
  flex: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-muted);
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.opcao.is-marcada { border-color: var(--accent); }
.opcao.is-marcada .opcao__ponto { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.opcao.is-foco { outline: 2px solid var(--accent); outline-offset: 2px; }
.opcoes[aria-invalid="true"] .opcao { border-color: var(--accent); }
.campo--check { margin-top: 8px; }
.check { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; line-height: 1.4; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.check__caixa {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  margin-top: -1px;
  border: 1.5px solid var(--ink-muted);
  transition: background-color .25s, border-color .25s;
}
.check input:checked + .check__caixa { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check__caixa::after {
  content: "";
  position: absolute;
  left: 6.5px; top: 2.5px;
  width: 5px; height: 10px;
  border: solid var(--preto);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check input:focus-visible + .check__caixa { outline: 2px solid var(--accent); outline-offset: 2px; }
.check input[aria-invalid="true"] + .check__caixa { border-color: var(--accent); border-width: 2px; }
.check__link { display: inline-block; margin: 10px 0 0 34px; font-size: 14px; color: var(--ink-muted); }
.check__link:hover { color: var(--ink); }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
}
.form__acoes .btn { flex: 1 1 auto; }
.form__voltar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-color: var(--ink-muted);
}
.form.is-enviando [data-enviar] { pointer-events: none; }
.form.is-enviando [data-enviar] .btn__texto { opacity: .85; }
.form__noscript { padding: 20px; border: 1px dashed var(--ink-muted); }
.resultado { outline: none; }
.resultado__caixa { display: grid; gap: 20px; justify-items: start; }
.resultado__titulo { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem); font-weight: 800; line-height: 1.02; letter-spacing: -.025em; max-width: 18ch; }
.resultado__caixa > p:not(.rotulo) { max-width: 44ch; }
.resultado__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
@media (min-width: 600px) {
  .opcoes__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__acoes .btn { flex: 0 0 auto; }
  .campo--meio { display: inline-block; width: calc(50% - 8px); vertical-align: top; }
  .campo--meio + .campo--meio { margin-left: 12px; }
}
@media (min-width: 1024px) {
  .contato__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(56px, 7vw, 128px); align-items: start; }
  .contato__cab { position: sticky; top: calc(var(--nav-h) + 40px); }
}

/* ==========================================================================
   13. RODAPÉ
   ========================================================================== */
.rodape { padding-top: clamp(72px, 8vw, 128px); padding-bottom: calc(20px + env(safe-area-inset-bottom)); overflow: clip; }
.rodape__topo { display: grid; gap: 36px; }
.rodape__topo .rotulo { margin-bottom: 14px; }
.rodape__lista { list-style: none; display: grid; gap: 6px; font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); }
.rodape__lista a, .rodape__cookies {
  display: inline-block;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  text-decoration-color: var(--line);
  transition: text-decoration-color .3s;
}
.rodape__lista a:hover, .rodape__cookies:hover { text-decoration-color: var(--accent); }
.rodape__modulos {
  --m: clamp(48px, 7vw, 92px);
  display: grid;
  grid-template-columns: repeat(3, var(--m));
  gap: calc(var(--m) * .05);
  justify-self: end;
}
.rodape__modulos .mod--f1 { color: var(--rosa); }
.rodape__modulos .mod--f2 { color: var(--branco); }
.rodape__modulos .mod--f3 { color: var(--branco); transform: rotate(90deg); }
.rodape__base {
  margin-top: clamp(48px, 7vw, 96px);
  font-size: var(--fs-pequeno);
  color: var(--ink-muted);
}
.rodape__marca { margin-top: clamp(72px, 9vw, 136px); }
.rodape__wordmark { width: 100%; height: auto; overflow: hidden; }
.rodape__wordmark .wm-letra { fill: var(--branco); }
.rodape__wordmark .wm-ponto { fill: var(--rosa); }
.rodape__lista a { overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .rodape__topo { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--guarda); row-gap: 40px; align-items: start; }
  .rodape__modulos { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .rodape__topo { grid-template-columns: auto auto 1fr; column-gap: clamp(64px, 7vw, 128px); }
  .rodape__modulos { grid-column: auto; }
}

/* ==========================================================================
   BARRA FIXA (mobile), COOKIES, CURSOR
   ========================================================================== */
.barra-cta {
  position: fixed;
  z-index: 45;
  left: 0; right: 0;
  bottom: var(--cookies-h, 0px);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--bordo);
  box-shadow: inset 0 1px 0 #5a5356;
  transform: translateY(105%);
  visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s linear .45s;
  --btn-bg: var(--rosa); --btn-fg: var(--preto); --btn-ponto: var(--vinho);
}
.barra-cta.is-visivel { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
@media (min-width: 900px) { .barra-cta { display: none; } }

.cookies {
  position: fixed;
  z-index: 60;
  left: 10px; right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid #5a5356;
  font-size: 14px;
  line-height: 1.45;
}
.cookies__texto a { color: var(--ink); }
.cookies__acoes { display: flex; gap: 8px; }
.cookies__botao {
  flex: 1;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--branco);
  border-radius: 999px;
  background: transparent;
  color: var(--branco);
  font-size: 14px;
  font-weight: 800;
}
.cookies__botao--aceitar { background: var(--rosa); border-color: var(--rosa); color: var(--preto); }
@media (min-width: 768px) {
  .cookies { left: 24px; right: auto; bottom: 24px; max-width: 440px; }
  .cookies__botao { flex: 0 0 auto; }
}

.cursor {
  position: fixed;
  z-index: 80;
  left: 0; top: 0;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border: 1.5px solid transparent;
  border-radius: 50%;
  background: var(--cursor-cor, var(--vinho));
  pointer-events: none;
  opacity: 0;
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .3s, border-color .3s, opacity .3s;
}
.cursor[data-tema="escuro"] { --cursor-cor: var(--rosa); }
.cursor[data-tema="claro"] { --cursor-cor: var(--vinho); }
.cursor.is-ativo { opacity: 1; }
.cursor.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: transparent; border-color: var(--cursor-cor); }
.cursor.is-oculto { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ==========================================================================
   ESTADOS QUE SÓ EXISTEM QUANDO A ANIMAÇÃO ESTÁ ATIVA (motion.js)
   ========================================================================== */
[tabindex="-1"]:focus { outline: none; }
.linha { display: block; }
/* Texto-fantasma: cada palavra é pintada de tinta conforme a pessoa rola */
.is-fantasma .fp {
  background-image: linear-gradient(90deg, var(--ink) 0 50%, var(--fantasma) 50% 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Processo: o ponto só enche quando a linha chega */
.anima-processo .passo-p__ponto { transition: background-color .35s, box-shadow .35s; }
.anima-processo .passo-p:not(.is-alcancado) .passo-p__ponto {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 5px var(--surface);
}

/* ==========================================================================
   LENIS (scroll suave, só desktop)
   ========================================================================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ==========================================================================
   MOVIMENTO REDUZIDO: tudo no estado final, sem animação
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .cursor { display: none; }
}