/* Duman Contabilidade — landing page */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* height:auto é obrigatório: os <img> trazem width/height no HTML, e sem isso
   o atributo height vence o aspect-ratio do CSS (era o que deixava a foto do
   "Sobre" com 1440px de altura no mobile). */
img { display: block; max-width: 100%; height: auto; }
canvas, svg { display: block; max-width: 100%; }

/* Âncora não pode parar embaixo do header fixo. */
[id] { scroll-margin-top: 5.5rem; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; }

/* Palavra enfatizada: itálico serifado dourado — o grifo da marca.
   --gold-soft por pedido direto: mede 1,35:1 sobre --paper, abaixo do
   mínimo de 3:1 do WCAG para texto grande — aceito conscientemente, não
   é uma omissão. Como é a mesma cor em claro e escuro (7,24:1 no navy),
   não precisa mais de override por superfície. */
em, .accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--gold-soft);
}

/* Indicador de foco precisa de 3:1 contra o fundo (WCAG 2.4.11).
   --navy sobre claro: 9,79:1 no --paper. --gold sobre escuro: 4,76:1 no --navy. */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.panel--result :focus-visible,
.footer :focus-visible { outline-color: var(--gold); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--white); color: var(--navy); padding: .75rem 1.25rem; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--cream); }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex; align-items: center; gap: .55rem;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--gold-soft); }

.lede { font-size: var(--fs-md); color: var(--muted); max-width: 62ch; }

.head { display: grid; gap: 1rem; margin-bottom: var(--gap-block); max-width: 46rem; }

/* ---------- Botoes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem 1.6rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
/* Feedback de toque: no celular :hover nunca se aplica, então sem :active o
   botão não dá nenhum sinal de que foi tocado. */
.btn:active { transform: scale(.98); }
.svc-arrow:active:not(:disabled),
.teamcard__icon:active,
.nav-toggle:active,
.beta:active { transform: scale(.96); }
.faq summary:active { opacity: .8; }

/* Seção atual na navegação — o JS marca com aria-current. */
.nav a[aria-current="true"] { color: var(--navy); font-weight: 700; }
@media (min-width: 861px) {
  .nav a[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--gold-soft); }
}
.btn--cta { background: var(--gold-soft); color: var(--ink); box-shadow: 0 8px 24px rgba(241, 213, 145, .45); }
.btn--cta:hover { background: var(--gold); box-shadow: 0 12px 32px rgba(217, 183, 104, .42); }
.btn--ghost { border-color: rgba(255,255,255,.32); color: var(--white); }
.btn--ghost:hover { background: rgba(255,255,255,.1); }
/* Borda precisa de 3:1 contra o fundo para ser percebida como controle. */
.btn--block { width: 100%; padding-block: 1.15rem; font-size: var(--fs-base); }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; }
.header__logo { display: flex; align-items: center; min-height: 44px; }
.header__logo img { height: 34px; width: auto; }
/* O hero é claro (frames de fundo branco), então o header já nasce com
   texto escuro — não há mais um estado "sobre fundo escuro" a distinguir. */
.header__logo .logo--light { display: none; }
.header__logo .logo--dark { display: block; }
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav__cta { display: none; }
@media (max-width: 860px) { .nav__cta { display: flex; } }
.nav a {
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0;
  color: var(--ink); transition: color .2s var(--ease);
}
.nav a:hover { color: var(--navy); }
.header .btn { padding: .8rem 1.25rem; }
.header .btn--cta { background: var(--gold-soft); color: var(--ink); border-color: transparent; box-shadow: 0 8px 24px rgba(241,213,145,.45); }
.header .btn--cta:hover { background: var(--gold); }

/* Fundo sólido só entra ao sair do hero (troca de seção), não num %fixo da
   rolagem — o header fica transparente sobre o hero inteiro até esse ponto. */
.header.is-solid { background: var(--paper); box-shadow: 0 1px 0 var(--line); }

.nav-toggle { display: none; width: 44px; height: 44px; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--navy); }

/* ---------- Hero ----------
   O stage é o curso de rolagem; o hero gruda nele. Sticky nativo = o "pin".
   Sem máscara sobre a animação: os frames são fundo claro (mesa/parede branca),
   por isso todo o texto do hero é escuro — a mesma leitura que levou a navbar
   a trocar para texto escuro sobre o hero. */
.hero-stage { height: 240vh; }
.hero {
  position: sticky; top: 0;
  height: 100vh; min-height: 620px; overflow: clip;
  background: var(--paper); border-radius: 0 0 var(--r-section) var(--r-section);
}
.hero__canvas, .hero__fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.hero__canvas { display: none; }
.hero.has-frames .hero__canvas { display: block; }
.hero.has-frames .hero__fallback { display: none; }
.hero__inner {
  position: relative; z-index: 2; height: 100%;
  padding-block: 120px 80px; color: var(--ink);
}
/* Estado A (entrada) fica à esquerda; estado B (saída) do lado oposto,
   em contraste de posição — e só aparece no fim da rolagem do hero. */
.hero__states { position: relative; height: 100%; }
.hero__state {
  position: absolute; transform: translateY(-50%);
  max-width: 16ch; color: var(--ink);
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 300;
  line-height: 1.08; letter-spacing: var(--tracking-tight); text-wrap: balance;
}
/* A fica sobre a parte clara de cima do frame; B mais abaixo, sem cobrir o rosto. */
.hero__state--a { left: 0; top: 30%; }
.hero__state--b { right: 0; top: 68%; text-align: right; }
/* Só esconde quem o JS vai animar: sem JS, os dois estados e o CTA ficam
   visíveis (hero estática funcional) em vez de sumirem para sempre. */
.js .hero__state--b { opacity: 0; }
.hero__state em { font-size: 1.12em; }
.hero__actions {
  position: absolute; right: 0; bottom: 80px; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 1rem 1.5rem; text-align: right;
}
.js .hero__actions { opacity: 0; pointer-events: none; }
/* Quem pediu menos movimento não acompanha o scrub — recebe o hero no
   estado final, com o CTA clicável desde o primeiro paint. */
@media (prefers-reduced-motion: reduce) {
  .js .hero__state--b { opacity: 1; }
  .js .hero__actions { opacity: 1; pointer-events: auto; }
}

/* ---------- Manifesto ---------- */
.manifesto {
  display: flex; align-items: flex-start; gap: var(--gap-block);
}
.manifesto__label {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; padding-top: .4rem;
}
.manifesto__label span[aria-hidden] { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.manifesto__body { flex: 1 1 auto; min-width: 0; }
/* Título e lide dividem fonte, corpo e peso — o bloco é um texto só. O corpo
   é menor que o --fs-h2 original para o par não crescer a altura da seção. */
.manifesto__headline,
.manifesto__lede {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 1.875rem);
  line-height: 1.25; letter-spacing: var(--tracking-tight);
  max-width: 46ch;
}
.manifesto__lede { margin-top: 1.5rem; color: var(--muted); }
/* Cada letra parte apagada (opacity .2) e ganha opacidade conforme a seção
   rola pela tela — scrub contínuo preso à posição de scroll, não um fade
   único (js/app.js escreve opacity por char a cada frame). */
[data-char-reveal] .char { display: inline-block; white-space: pre; will-change: opacity; }

@media (max-width: 720px) {
  .manifesto { flex-direction: column; gap: 1.5rem; }
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: var(--gap-grid); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Perfis (Para quem é) — linhas em accordion: hover escurece (--ink),
   expande a lista de bullets e revela a foto do perfil à direita.
   Cores, fonte e CTA são os tokens/padrões do site. */
.profiles { border-top: 1px solid var(--line); }
.profile {
  position: relative; overflow: visible;
  display: grid; grid-template-columns: 3rem 1fr; gap: 0 2rem;
  padding: 2rem 1.5rem; border-bottom: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: background-color .35s var(--ease), padding .35s var(--ease), color .35s var(--ease);
}
.profile__num { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--muted); transition: color .35s var(--ease); }
.profile__text h3 { font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }
.profile__text p { color: var(--muted); margin-top: .4rem; max-width: 52ch; transition: color .35s var(--ease); }
.profile__list {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin-top: 1rem; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .35s var(--ease), opacity .3s var(--ease), margin-top .35s var(--ease);
}
.profile__list li { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); }
.profile__list li::before {
  content: "✓"; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--gold-soft); color: var(--ink);
  font-size: .65rem; flex: 0 0 auto;
}
/* Foto: fica sempre inclinada 6° (medido na referência) e transborda a borda
   do card — só escala e opacidade animam. pointer-events off enquanto invisível
   para não roubar clique/hover vizinho. */
.profile__media {
  position: absolute; right: -2.5rem; top: 50%;
  width: min(340px, 34vw); aspect-ratio: 4/3;
  opacity: 0;
  transform: translateY(-52%) rotate(6deg) scale(.937);
  pointer-events: none; z-index: 2;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.profile__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--shadow-lift); }

.profile:hover,
.profile:focus-within {
  background: var(--ink); color: var(--white);
  padding-inline: 2.5rem; padding-block: 2.5rem;
}
.profile:hover .profile__num,
.profile:focus-within .profile__num,
.profile:hover .profile__text p,
.profile:focus-within .profile__text p { color: var(--on-navy-dim); }
.profile:hover .profile__text h3,
.profile:focus-within .profile__text h3 { color: var(--white); }
.profile:hover .profile__list,
.profile:focus-within .profile__list { max-height: 6rem; opacity: 1; margin-top: 1.25rem; }
.profile:hover .profile__media,
.profile:focus-within .profile__media { opacity: 1; transform: translateY(-52%) rotate(6deg) scale(1); }

@media (max-width: 720px) {
  .profile { grid-template-columns: 1fr; gap: .5rem; }
  .profile__media { display: none; }
  /* Não há :hover no toque: os bullets (Fator R, DAS/DASN-SIMEI, eSocial…)
     ficam sempre visíveis em vez de nunca aparecerem no celular. */
  .profile__list { max-height: none; opacity: 1; margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .profile, .profile__num, .profile__text p, .profile__list, .profile__media { transition: none; }
}

/* Passos — painel em scrub sticky (mesma mecânica do hero: o stage dá o curso
   de rolagem, o painel gruda). A etapa ativa fica opaca; as outras somem para
   20% de opacidade, como na referência copiada. Layout copiado; fonte e cores
   são as do site. */
.steps__headline { max-width: 22ch; }
.steps__headline span { display: block; color: var(--ink); }

.steps-titles { list-style: none; padding: 0; margin: 0; }
.steps-title {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 300;
  line-height: 1.08; letter-spacing: var(--tracking-tight); color: var(--ink);
}
.steps-figure { margin: 0; }
.steps-figure img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--shadow-lift); }
.steps-text { color: var(--muted); font-size: var(--fs-md); }

/* --- Desktop: painel grudado; títulos empilhados, foto e texto sobrepostos
       na mesma célula (só a etapa ativa aparece). --- */
@media (min-width: 960px) {
  /* 3 etapas × ~1 tela de curso de rolagem cada. */
  .steps-stage { padding-bottom: 0; }
  .steps-pin { height: 300vh; }
  .steps-pin__inner {
    position: sticky; top: 0;
    min-height: 100vh; display: grid; align-items: center; gap: var(--gap-block);
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.1fr) minmax(0, .85fr);
    padding-block: clamp(3rem, 8vh, 6rem);
  }
  .steps-titles { display: grid; gap: clamp(1.5rem, 5vh, 3.5rem); }
  .steps-title { opacity: .2; transition: opacity .5s var(--ease); }
  .steps-title.is-active { opacity: 1; }

  .steps-media, .steps-copy { display: grid; }
  .steps-figure, .steps-text { grid-area: 1 / 1; }
  .steps-figure {
    width: min(420px, 100%); margin-inline: auto;
    opacity: 0; transform: scale(.97);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .steps-figure.is-active { opacity: 1; transform: none; }
  .steps-text { max-width: 34ch; opacity: 0; transition: opacity .5s var(--ease); }
  .steps-text.is-active { opacity: 1; }
}

/* --- Mobile: sem curso extra de rolagem. Os três blocos viram um só fluxo e
       o `order` intercala título → foto → texto de cada etapa. --- */
@media (max-width: 959px) {
  .steps-pin { height: auto; }
  .steps-pin__inner {
    position: static; min-height: 0; padding-block: 0;
    display: flex; flex-direction: column;
  }
  .steps-titles, .steps-media, .steps-copy { display: contents; }
  .steps-title, .steps-figure, .steps-text { opacity: 1; transform: none; }
  .steps-title[data-step="0"] { order: 0; }
  .steps-figure[data-step="0"] { order: 1; }
  .steps-text[data-step="0"]  { order: 2; }
  .steps-title[data-step="1"] { order: 3; }
  .steps-figure[data-step="1"] { order: 4; }
  .steps-text[data-step="1"]  { order: 5; }
  .steps-title[data-step="2"] { order: 6; }
  .steps-figure[data-step="2"] { order: 7; }
  .steps-text[data-step="2"]  { order: 8; }
  .steps-figure { margin-block: 1.25rem; }
  .steps-text { margin-bottom: var(--gap-block); }
}

@media (prefers-reduced-motion: reduce) {
  .steps-title, .steps-figure, .steps-text { transition: none; }
}

/* Sobre */
.head--center { max-width: 42rem; margin-inline: auto; text-align: center; justify-items: center; }

/* Sobre nós — bento: card grande com fotos flutuantes, 2 cards de destaque,
   foto full-height com texto sobreposto. Layout copiado de referência
   externa; cores/fonte/CTA são os tokens do site (--navy, --cream, etc). */
.about-bento { display: grid; gap: var(--gap-grid); grid-template-columns: 1fr; }
@media (min-width: 900px) { .about-bento { grid-template-columns: 1.1fr .9fr; align-items: stretch; } }
.about-bento__col { display: grid; gap: var(--gap-grid); align-content: start; }
.about-bento__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid); }
@media (max-width: 560px) { .about-bento__row { grid-template-columns: 1fr; } }

.about-card { border-radius: var(--r-card); padding: 2.25rem; position: relative; overflow: hidden; }
.about-card h3 { font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; margin-bottom: 1rem; }
.about-card p { color: inherit; }

.about-card--lg { background: var(--cream); }
.about-card--lg p { color: var(--muted); margin-top: 1.25rem; max-width: 34ch; }
.about-card__figures { position: relative; height: 130px; margin-inline: auto; max-width: 220px; }
.about-card__figures img { position: absolute; border-radius: calc(var(--r-card) - .5rem); box-shadow: var(--shadow-lift); object-fit: cover; }
.about-card__figures img:first-child { top: 0; left: 0; width: 140px; height: 110px; }
.about-card__figure-front { top: 32px; left: 78px; width: 120px; height: 98px; border: 3px solid var(--paper); }

.about-card--dark { background: var(--navy); color: var(--white); }
.about-card--dark p { color: var(--on-navy-dim); font-size: var(--fs-sm); margin-top: .6rem; }

.about-card--tint { background: var(--cream); display: grid; align-content: center; gap: .75rem; }
.about-card__stat { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 300; line-height: 1.15; color: var(--ink); }
.about-card__badge { font-size: var(--fs-xs); color: var(--muted); }

.about-card--photo { padding: 0; min-height: 340px; display: flex; align-items: flex-end; }
.about-card--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-card__overlay {
  position: relative; z-index: 1; margin: 1.25rem; padding: 1.5rem;
  background: var(--paper); border-radius: var(--r-card); box-shadow: var(--shadow-lift);
  font-size: var(--fs-sm); color: var(--ink);
}
/* Nota (ex.: fora de escopo Lucro Real) */
.note {
  font-size: var(--fs-sm); font-style: italic; color: var(--muted);
  border-left: 2px solid var(--line); padding-left: 1rem; margin-top: 1rem;
}

/* Serviços — carrossel horizontal: cada card é
   uma foto sangrada com um selo numerado e um painel branco por cima; no hover
   o painel expande e revela o texto e o CTA. Cores, tipografia, conteúdo e
   imagens são os do site. */
.services__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  margin-bottom: var(--gap-block);
}
.services__head h2 { max-width: 26ch; margin-top: .5rem; }

.svc-carousel { position: relative; }

/* Trilho com scroll-snap: funciona no toque e na roda sem JS; as setas só
   empurram o scroll. */
.svc-track {
  display: flex; gap: var(--gap-card);
  overflow-x: auto; scroll-snap-type: x proximity;
  scroll-behavior: smooth; scrollbar-width: none;
  padding-bottom: .5rem;
}
.svc-track::-webkit-scrollbar { display: none; }
.svc-track:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: var(--r-card); }

.svc {
  position: relative; flex: 0 0 auto; scroll-snap-align: start;
  width: min(408px, 78vw); aspect-ratio: 408 / 492;
  border-radius: var(--r-card); overflow: hidden; isolation: isolate;
}
.svc__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  transition: transform .5s var(--ease);
}
.svc:hover .svc__img { transform: scale(1.04); }

/* Selo numerado: pílula clara sobre a foto, acima do painel. */
.svc__badge {
  position: absolute; left: 6px; top: 6px; z-index: 2;
  display: inline-flex; align-items: center;
  padding: .63rem 1rem; border-radius: var(--r-pill);
  background: var(--gold-soft); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}

/* Painel branco preso ao rodapé do card. */
.svc__panel {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 1;
  background: var(--white); color: var(--ink);
  border-radius: var(--r-card); padding: 1.5rem;
}
.svc__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-lg); line-height: 1.2; letter-spacing: var(--tracking-tight);
}

/* O trecho extra abre no hover (350ms na referência). grid-template-rows 0fr→1fr
   anima altura automática sem precisar medir nada em JS. */
.svc__more {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease), opacity .35s var(--ease);
  opacity: 0;
}
.svc__more-in { min-height: 0; overflow: hidden; }
.svc:hover .svc__more,
.svc:focus-within .svc__more { grid-template-rows: 1fr; opacity: 1; }
.svc__more p { font-size: var(--fs-sm); color: var(--muted); padding-top: .75rem; }
.svc__cta { margin-top: 1rem; }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--navy); }

/* Setas: ao lado do título, como na referência. */
.svc-nav { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem; }
.svc-arrow {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line);
  transition: background-color .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
}
.svc-arrow:hover:not(:disabled) { background: var(--ink); color: var(--white); border-color: transparent; }
.svc-arrow:disabled { opacity: .35; cursor: default; }

@media (max-width: 860px) {
  /* Sem hover confiável no toque: o texto fica sempre aberto. */
  .svc { aspect-ratio: auto; }
  .svc__panel { position: static; margin: 0; }
  .svc__img { position: relative; height: 260px; }
  .svc__more { grid-template-rows: 1fr; opacity: 1; }
  /* Sem setas no mobile, a scrollbar nativa vira a única pista de que
     existem mais 5 serviços à direita. Escondê-la some com os cards. */
  .svc-nav { display: none; }
  .svc-track { scrollbar-width: thin; }
  .svc-track::-webkit-scrollbar { display: block; height: 4px; }
  .svc-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
}

@media (max-width: 640px) {
  .services__head { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-track { scroll-behavior: auto; }
  .svc__img, .svc__more, .svc-arrow { transition: none; }
}

/* Diferenciais — cabeçalho com CTA outline ao lado do título; abaixo, um
   grid preso (sticky) enquanto os cards sobem em stagger e depois abrem para
   as colunas. Layout e animações copiados de referência externa; cores,
   fonte, conteúdo e imagens são os do site. */
.diffs__head {
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  margin-bottom: var(--gap-block); text-align: center;
}
.diffs__head h2 { max-width: 22ch; margin-top: .5rem; }
.btn--outline { border-color: var(--line); color: var(--ink); }
.btn--outline:hover { background: var(--cream); border-color: var(--navy); }

.team-grid {
  display: grid; gap: var(--gap-card); grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .team-grid { grid-template-columns: 1fr 1fr; } }
/* A partir daqui o grid gruda e o JS faz o scrub dos cards ao longo do curso. */
@media (min-width: 1100px) {
  .team-pin  { height: 350vh; }
  .team-grid { grid-template-columns: repeat(4, 1fr); position: sticky; top: 15vh; }
}

.teamcard {
  display: flex; flex-direction: column;
  background: var(--cream); border-radius: var(--r-card);
  overflow: hidden; position: relative; will-change: transform;
}
.teamcard__media { overflow: hidden; }
.teamcard__media img {
  display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover;
  transition: transform .4s var(--ease);
}
.teamcard:hover .teamcard__media img { transform: scale(1.05); }
.teamcard__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.teamcard__text h3 {
  font-size: var(--fs-lg); font-family: var(--font-display); font-weight: 300;
  line-height: 1.15; letter-spacing: var(--tracking-tight);
}
.teamcard__icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--white); color: var(--ink);
  transition: background-color .3s var(--ease);
}
.teamcard:hover .teamcard__icon { background: var(--gold-soft); }
.teamcard__desc {
  margin-top: auto;
  padding: 0 clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: var(--fs-sm); color: var(--muted);
}
.tag {
  display: inline-block; margin-left: .6rem; vertical-align: middle;
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: var(--gold-soft); border-radius: var(--r-pill); padding: .2rem .6rem;
}

@media (prefers-reduced-motion: reduce) {
  .teamcard__media img, .teamcard__icon { transition: none; }
  .teamcard { transform: none !important; }
}

/* Selo "beta" do simulador: abre no clique (botão real, acessível) e no hover.
   O aviso é do tipo tooltip — some com Esc e ao sair do bloco. */
.beta {
  display: inline-block; vertical-align: baseline; margin-left: .4rem;
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: var(--gold-soft);
  border: 0; border-radius: var(--r-pill); padding: .15rem .55rem;
  cursor: help; transition: background-color .2s var(--ease);
}
.beta:hover, .beta:focus-visible { background: var(--gold); }
.beta-wrap { position: relative; display: inline-block; }
.beta-info {
  position: absolute; z-index: 5; left: 0; top: calc(100% + .5rem);
  width: min(320px, 78vw); padding: .85rem 1rem;
  background: var(--ink); color: var(--white);
  border-radius: var(--r-card); box-shadow: var(--shadow-lift);
  font-size: var(--fs-sm); line-height: 1.45; font-family: var(--font-sans);
}
.beta-info strong { color: var(--gold-soft); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .beta { transition: none; } }

/* ---------- Calculadora ---------- */
.calc { display: grid; gap: var(--gap-grid); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .calc { grid-template-columns: 1fr 1fr; } }
.panel { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r-card); padding: clamp(1.5rem, 3vw, 2.25rem); }
.panel--result { background: var(--navy); color: var(--white); display: grid; align-content: start; gap: 1.25rem; }

.field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.field label { font-size: var(--fs-sm); font-weight: 600; }
/* 14px, não 12px: é texto de apoio dentro do formulário de lead, não letra miúda. */
.field .hint { font-size: var(--fs-sm); color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { background: var(--white); border-color: var(--blue); }
.field textarea { min-height: 6.5rem; resize: vertical; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select { border-color: #C0392B; }
.field .error { font-size: var(--fs-xs); color: #C0392B; }
.field .error:empty { display: none; }

.result-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .85rem; border-bottom: 1px solid rgba(255,255,255,.14); }
.result-row dt { font-size: var(--fs-sm); color: var(--on-navy-dim); }
.result-row dd { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--white); }
.result-row--key dd { color: var(--gold-soft); font-size: var(--fs-h3); }
.calc__note { font-size: var(--fs-xs); color: var(--on-navy-dim); line-height: 1.5; }
.calc__runs { font-size: var(--fs-xs); color: var(--gold-soft); }
.calc__warn { font-size: var(--fs-sm); color: var(--gold-soft); }
.calc__warn:empty { display: none; }

.lock { display: none; text-align: center; gap: 1rem; }
/* A trava esconde simulações NOVAS, não confisca a que o usuário já viu:
   o resultado fica legível atrás, e o convite entra abaixo dele. */
.panel--result.is-locked .calc__out { opacity: .45; pointer-events: none; }
.panel--result.is-locked .lock { display: grid; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.16); }
.lock p { color: var(--on-navy-dim); }

/* ---------- Formulario ---------- */
.form-wrap { display: grid; gap: var(--gap-block); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .form-wrap { grid-template-columns: .85fr 1.15fr; } }
.form-grid { display: grid; gap: 0 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.form-grid .field--full { grid-column: 1 / -1; }
/* Redução de risco encostada no botão: é o argumento que sustenta o clique,
   então não pode ler como letra miúda. */
.reassure {
  display: grid; gap: .5rem; font-size: var(--fs-sm); color: var(--ink);
  margin-block: 1.5rem 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft);
}
.reassure span { display: flex; gap: .55rem; align-items: baseline; }
/* O ✓ é copy (Guidelines §10), não enfeite — e --mint-deep dava só 2,53:1
   sobre o branco do painel. --navy dá 10,37:1 e já é o token de foco aqui. */
.reassure span::before { content: "\2713"; color: var(--navy); font-weight: 700; }
.lgpd { font-size: var(--fs-sm); color: var(--muted); margin-top: 1rem; line-height: 1.55; }
.form-status { margin-top: 1rem; font-size: var(--fs-sm); border-radius: 12px; padding: .9rem 1rem; }
.form-status:empty { display: none; }
.form-status[data-tone="ok"] { background: rgba(5,67,108,.09); color: var(--navy); }
.form-status[data-tone="err"] { background: rgba(192,57,43,.09); color: #9E2A1F; }

/* ---------- FAQ ----------
   Bloco escuro com cards claros: coluna de apoio à esquerda e o acordeão à
   direita. Cores e fonte são as do site. */
.faq-section { background: var(--navy); color: var(--white); border-radius: var(--r-section); }
.faq-grid { display: grid; gap: var(--gap-block); grid-template-columns: 1fr; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }

.faq-aside h2 { color: var(--white); max-width: 14ch; margin-block: 1.25rem 2rem; }
.faq-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem 1rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.1);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.faq-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-soft); }
.faq-aside__cta { color: var(--on-navy-dim); font-size: var(--fs-sm); line-height: 1.8; }
.faq-aside__cta a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }

.faq { display: grid; gap: .75rem; }
.faq details {
  background: var(--paper); color: var(--ink); border-radius: var(--r-card);
  padding: 0 1.75rem;
  transition: background-color .3s var(--ease);
}
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.4rem 0; cursor: pointer; list-style: none;
  font-size: var(--fs-lg); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
/* Sinal de abrir/fechar: círculo vazado que ganha fundo dourado quando aberto
   e gira para virar "×" — o mesmo gesto da referência. */
.faq summary::after {
  content: "+"; flex: 0 0 auto;
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 50%;
  font-family: var(--font-sans); font-size: 1.25rem; font-weight: 400; line-height: 1;
  color: var(--ink); background: transparent;
  transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
  background: var(--gold-soft); border-color: transparent;
}
.faq p { color: var(--muted); padding-bottom: 1.5rem; max-width: 62ch; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--white); padding-block: var(--section-y) 2.5rem; border-radius: var(--r-section) var(--r-section) 0 0; }
.footer__top { display: grid; gap: var(--gap-block); grid-template-columns: 1fr; }
@media (min-width: 800px) { .footer__top { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.footer__brand img { height: 38px; width: auto; margin-bottom: 1.25rem; }
.footer__brand p { color: var(--on-navy-dim); max-width: 34ch; }
/* Mesma cor (--white) em toda a seção — só a opacidade muda por hierarquia,
   como na referência copiada: títulos de coluna mais opacos que os links. */
.footer h2 { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 1.1rem; font-family: var(--font-sans); }
.footer ul { list-style: none; padding: 0; display: grid; gap: .7rem; }
.footer li, .footer a { color: var(--on-navy-dim); font-size: var(--fs-sm); }
.footer a:hover { color: var(--white); }

/* Wordmark gigante como marca d'água: mesmo branco da seção, quase invisível
   (7% de opacidade) — puro efeito decorativo, não deve ser lido como texto. */
.footer__watermark {
  overflow: hidden; margin-top: clamp(2rem, 6vw, 4rem);
  line-height: 1; user-select: none; pointer-events: none;
}
.footer__watermark span {
  display: block; white-space: nowrap;
  font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(4rem, 14vw, 11rem); letter-spacing: -.02em;
  color: rgba(255,255,255,.07);
}
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: var(--gap-block); padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: var(--fs-xs); color: rgba(255,255,255,.55);
}

/* Bloco próprio, fora do .footer__bottom. Dentro dele era item de flex, e aí
   o max-width clampava o tamanho principal hipotético: a linha nunca quebrava
   e o aviso ficava espremido numa coluna à direita do copyright. Como bloco,
   quebra sozinho — e os links dele param de casar com .footer__bottom a. */
.footer__lgpd {
  max-width: 80ch; margin-top: 1rem; line-height: 1.75;
  font-size: var(--fs-xs); color: rgba(255,255,255,.55);
}
.footer__lgpd a { font-size: inherit; text-decoration: underline; }

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); }
[data-reveal].is-revealed { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  /* Prosa corrida não desce de 14px, nem sendo aviso legal — é a mesma regra
     que já vale para .cookies e .hint. */
  .calc__note, .footer__lgpd { font-size: var(--fs-sm); }

  /* O painel .nav é position:fixed dentro do header; sendo posicionado, ele
     pintava por cima do botão estático e o segundo toque nunca fechava o menu
     (elementFromPoint no centro do #navToggle devolvia o NAV). Dar contexto de
     pintura ao botão e ao logo devolve o hit-test para eles. */
  .nav-toggle, .header__logo { position: relative; z-index: 1; }
  .nav-toggle { display: grid; }
  .nav {
    position: fixed; inset: 0 0 auto; padding: 5.5rem var(--gutter) 2rem;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); box-shadow: var(--shadow-lift);
    transform: translateY(-100%);
    /* translateY sozinho tira da tela mas deixa os links tabuláveis: quem usa
       teclado passava por 6 links invisíveis antes de chegar ao conteúdo.
       visibility corta o foco e ainda anima (delay só ao fechar). */
    visibility: hidden;
    transition: transform .35s var(--ease), visibility 0s linear .35s;
  }
  .nav a { color: var(--navy); font-size: var(--fs-base); text-transform: none; letter-spacing: 0; padding-block: 1rem; border-bottom: 1px solid var(--line-soft); }
  /* O único item do menu que é ação, não navegação: sem borda de lista e com
     o dourado dos CTAs, para não se perder entre os links de seção. */
  .nav a.nav__cta {
    margin-top: 1rem; border-bottom: 0; border-radius: var(--r-pill);
    background: var(--gold-soft); color: var(--ink);
    font-weight: 600; text-align: center; min-height: 48px;
    display: flex; align-items: center; justify-content: center;
  }
  .nav.is-open { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
  /* O CTA do header é o único caminho de conversão sempre visível no
     celular: o do hero só aparece no fim do scrub. Versão compacta para
     caber ao lado do logo (126px) e do toggle (44px) em telas de 360px. */
  .header .btn--cta {
    padding: .6rem .9rem; font-size: var(--fs-xs); letter-spacing: 0;
    min-height: 44px; white-space: nowrap;
  }
  .header .btn--cta .btn__long { display: none; }
  /* is-solid só entra quando o hero (200vh) sai inteiro: até lá o logo navy
     fica sobre a mesma região escura. No mobile o header já nasce sólido. */
  .header { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
  .hero-stage { height: 200vh; }
  .hero__inner { padding-block: 96px 120px; }
  /* Larguras curtas não cabem os dois títulos lado a lado (20ch cada):
     os dois estados empilham centralizados, mesmo crossfade de opacidade.
     inset:0 esticava a caixa a 100% de .hero__states e recentralizava o
     texto fora da tela — aqui cada estado fica no fluxo normal, sobreposto
     só pelo grid (mesma célula), sem herdar altura da seção inteira. */
  /* No mobile o texto cai no centro do frame — onde está o cabelo escuro do
     sujeito. Navy sobre quase-preto não resolve. Scrim radial só atrás do
     texto: some nas bordas, não vira caixa. */
  .hero__states { display: grid; place-items: center; text-align: center; isolation: isolate; }
  .hero__states::before {
    content: ""; position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(251,248,243,.92) 0%, rgba(251,248,243,.72) 45%, rgba(251,248,243,0) 72%);
  }
  .hero__state--a, .hero__state--b {
    grid-area: 1 / 1;
    position: static; margin-inline: auto;
    text-align: center; max-width: min(20ch, 86%);
  }
  .hero__actions { position: static; justify-content: center; text-align: center; margin-top: 2rem; }

  /* Alvo de toque >= 44px sem inflar a coluna: o gap vira o próprio padding. */
  .footer ul { gap: 0; }
  .footer li { display: flex; align-items: center; min-height: 44px; }
  .footer li a { display: flex; align-items: center; align-self: stretch; width: 100%; }
  .footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
}