/* ==========================================================================
   Pantra — folha de estilo única
   Ordem: tokens → reset → base → layout → seções → utilitários → @media
   Trocar a paleta = alterar só o bloco :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* superfícies */
  --tinta:         #0B1613; /* fundo escuro principal */
  --tinta-2:       #12201C; /* cartões sobre fundo escuro */
  --tinta-3:       #1B2C27; /* bordas e linhas sobre escuro */
  --papel:         #EEF1EC; /* fundo claro principal */
  --papel-2:       #E3E8E2; /* cartões sobre fundo claro */
  --linha-clara:   #C9D1CA; /* bordas e ruas sobre claro */

  /* texto */
  --texto-escuro:      #0B1613;
  --texto-suave:       #4A5752;
  --texto-claro:       #F2EFE7;
  --texto-claro-suave: #A9B5AF;

  /* acentos */
  --esmeralda:      #0F6B52;
  --esmeralda-viva: #1E9A74;
  --champanhe:      #C9A96E;
  --champanhe-suave:#E6D6B4;

  /* estados da grade do mapa (só em gráficos) */
  --mapa-ruim:  #C8553D;
  --mapa-medio: #D9A441;
  --mapa-bom:   #1E9A74;

  /* forma */
  --raio: 6px;
  --raio-card: 10px;
  --raio-pill: 999px;
  --sombra: 0 1px 0 rgba(11,22,19,.06), 0 12px 32px -16px rgba(11,22,19,.28);

  /* tipografia */
  --fonte-texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ritmo e grade */
  --container: 1200px;
  --gutter: 24px;
  --secao-pad: clamp(72px, 10vw, 140px);
  --altura-cabecalho: 72px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-cabecalho) + 16px);
}

body {
  min-height: 100%;
  background: var(--tinta);
  color: var(--texto-claro);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg, picture, video {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

ul, ol { padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   3. BASE — tipografia, links, botões
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}

/* destaque dentro do título: nunca itálico (a skill proíbe serifa itálica).
   Weight 600 + um traço champanhe por baixo. */
.realce { font-style: normal; position: relative; white-space: nowrap; }
.realce::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: .04em;
  height: 2px;
  background: var(--champanhe);
  opacity: .7;
}
.secao--papel .realce::after { background: var(--esmeralda); opacity: .45; }

h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: 1.25rem; }

p { max-width: 62ch; }

a {
  color: var(--esmeralda);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover { color: var(--esmeralda-viva); }

:focus-visible {
  outline: 2px solid var(--champanhe);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--esmeralda);
  color: var(--texto-claro);
}

/* botões ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.btn--primario {
  background: var(--esmeralda);
  color: var(--texto-claro);
}
.btn--primario:hover { background: var(--esmeralda-viva); color: var(--texto-claro); }

.btn--claro {
  background: var(--papel);
  color: var(--tinta);
}
.btn--claro:hover { background: #fff; color: var(--tinta); }

.btn--contorno {
  background: transparent;
  border-color: var(--linha-clara);
  color: var(--texto-escuro);
}
.btn--contorno:hover { border-color: var(--esmeralda); color: var(--esmeralda); }

/* link de texto com seta (CTA secundário) */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 8px;
  font-weight: 500;
  text-decoration: none;
  color: var(--texto-claro);
  border-bottom: 1px solid var(--tinta-3);
  padding-bottom: 10px;
}
.link-seta:hover { color: var(--champanhe); border-color: var(--champanhe); }
.link-seta span[aria-hidden] { transition: transform .2s ease; }
.link-seta:hover span[aria-hidden] { transform: translateX(3px); }

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

.pular-para-conteudo {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--papel);
  color: var(--tinta);
  border-radius: var(--raio);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .15s ease;
}
.pular-para-conteudo:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   4. LAYOUT — container, grade de 12, plaquinha de prancha
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grade {
  display: grid;
  gap: 24px;
}

.secao {
  padding-block: var(--secao-pad);
  position: relative;
}

.secao--tinta  { background: var(--tinta);  color: var(--texto-claro); }
.secao--papel  { background: var(--papel);  color: var(--texto-escuro); }
.secao--papel  a:not(.btn):not(.link-seta) { color: var(--esmeralda); }
.secao--papel  a:not(.btn):not(.link-seta):hover { color: var(--esmeralda-viva); }
.secao--papel  .link-seta { color: var(--texto-escuro); border-color: var(--linha-clara); }
.secao--papel  .link-seta:hover { color: var(--esmeralda); border-color: var(--esmeralda); }

/* `:where()` mantém a especificidade em 0, para que qualquer classe de
   componente definida mais abaixo vença sem precisar de `!important`. */
:where(.secao--tinta) p:not(.legenda) { color: var(--texto-claro-suave); }
:where(.secao--papel) p:not(.legenda) { color: var(--texto-suave); }

/* plaquinha de atlas: número da prancha + coordenada no canto */
.prancha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: clamp(28px, 4vw, 52px);
  border-bottom: 1px solid var(--tinta-3);
}
.secao--papel .prancha { border-color: var(--linha-clara); }

.prancha__numero {
  font-family: var(--fonte-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--champanhe);
}
.secao--papel .prancha__numero { color: var(--esmeralda); }

.prancha__coordenada {
  font-family: var(--fonte-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--texto-claro-suave);
  font-variant-numeric: tabular-nums;
}
.secao--papel .prancha__coordenada { color: var(--texto-suave); }

/* barra de escala cartográfica */
.regua-escala {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fonte-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--texto-claro-suave);
}
.secao--papel .regua-escala { color: var(--texto-suave); }
.regua-escala::before {
  content: "";
  width: 64px; height: 7px;
  border: 1px solid currentColor;
  border-top: 0;
}

/* legenda de dado ilustrativo */
.legenda {
  font-size: .875rem;
  color: var(--texto-claro-suave);
  max-width: none;
}
.secao--papel .legenda { color: var(--texto-suave); }

.titulo-secao { margin-bottom: 18px; }
.secao--papel .titulo-secao + p { color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   5. CABEÇALHO
   -------------------------------------------------------------------------- */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--altura-cabecalho);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}

.cabecalho--rolado {
  /* fundo sólido, sem backdrop-filter: o desfoque custa caro em GPU fraca */
  background: var(--tinta);
  border-bottom-color: var(--tinta-3);
}

.cabecalho__interno {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}

/* logotipo: marca completa (P + wordmark), imagem com fundo transparente */
.logo {
  display: inline-flex;
  align-items: center;
  padding-block: 9px;
  text-decoration: none;
  margin-right: auto;
}
.logo__img { height: 30px; width: auto; display: block; }

.cabecalho__nav ul {
  display: flex;
  align-items: center;
  gap: 26px;
}

.cabecalho__nav a {
  display: inline-block;
  padding-block: 13px;
  color: var(--texto-claro-suave);
  text-decoration: none;
  font-size: .97rem;
  white-space: nowrap;
}
.cabecalho__nav a:hover { color: var(--texto-claro); }

.cabecalho__acao { flex: none; }
.cabecalho__acao .btn { min-height: 44px; padding: 10px 18px; }

/* botão do menu (celular) */
.menu-botao {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--tinta-3);
  border-radius: var(--raio);
  color: var(--texto-claro);
  place-items: center;
}
.menu-botao svg { width: 22px; height: 22px; }
.menu-botao .icone-fechar { display: none; }
.menu-botao[aria-expanded="true"] .icone-abrir { display: none; }
.menu-botao[aria-expanded="true"] .icone-fechar { display: block; }

/* --------------------------------------------------------------------------
   6. RODAPÉ
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--tinta);
  color: var(--texto-claro-suave);
  border-top: 1px solid var(--tinta-3);
  padding-block: clamp(48px, 6vw, 80px) 32px;
}

.rodape__topo {
  display: grid;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--tinta-3);
}

.rodape__marca { display: flex; flex-direction: column; gap: 14px; }
.rodape__frase { max-width: 34ch; color: var(--texto-claro); }

.rodape__colunas {
  display: grid;
  gap: 32px;
}

.rodape__colunas h2 {
  font-family: var(--fonte-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--champanhe);
  margin-bottom: 14px;
}

.rodape__lista { display: grid; gap: 2px; }
.rodape__lista a {
  display: inline-block;
  padding-block: 12px;
  color: var(--texto-claro-suave);
  text-decoration: none;
  font-size: .97rem;
}
.rodape__lista a:hover { color: var(--texto-claro); }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  font-size: .875rem;
  color: var(--texto-claro-suave);
}
.rodape__base a {
  display: inline-block;
  padding-block: 12px;
  color: var(--texto-claro-suave);
}

/* --------------------------------------------------------------------------
   7. WHATSAPP FLUTUANTE
   -------------------------------------------------------------------------- */
.whatsapp-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  background: #25D366;
  border-radius: var(--raio-pill);
  box-shadow: 0 6px 20px -6px rgba(11, 22, 19, .5);
  transition: transform .2s ease;
}
.whatsapp-flutuante:hover { transform: scale(1.06); }
.whatsapp-flutuante svg { width: 30px; height: 30px; }

/* --------------------------------------------------------------------------
   7. SEÇÕES
   -------------------------------------------------------------------------- */

/* --- 7.1 Hero ------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--altura-cabecalho) + clamp(44px, 6vw, 84px));
}

.hero__contornos {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: .07;
  pointer-events: none;
}

.hero > .container { position: relative; }

.hero__grade { display: grid; gap: clamp(40px, 5vw, 60px); }

.hero__visual { max-width: 430px; width: 100%; }

.hero__sobretitulo {
  font-family: var(--fonte-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--champanhe) !important;
  margin-bottom: 20px;
}

.hero__subtitulo {
  font-size: 1.125rem;
  max-width: 46ch;
  margin-top: 22px;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 32px;
}

.hero__nota {
  font-size: .875rem;
  margin-top: 12px;
}

/* rota tracejada sob "no mapa", terminando no pino */
.rota {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.rota__linha {
  position: absolute;
  left: 0; right: 15px;
  bottom: .02em;
  width: auto; height: 10px;
  overflow: visible;
}
.rota__pino {
  position: absolute;
  right: 0;
  bottom: -.1em;
  width: 14px; height: 19px;
}
.rota__pino svg { width: 100%; height: 100%; }

/* --- 7.2 Cena do mapa: foto do bairro + grade por cima ------------------- */
.foto-mapa {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 820 / 1018;
  border-radius: var(--raio-card);
  overflow: hidden;
  background: var(--tinta-2);
  box-shadow: var(--sombra);
}
.foto-mapa__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* vinheta escura: a foto vira fundo e não compete com o texto (skill §8) */
.foto-mapa__vinheta {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 22, 19, .32) 0%,
    rgba(11, 22, 19, .05) 32%,
    rgba(11, 22, 19, .55) 78%,
    rgba(11, 22, 19, .9) 100%
  );
}
.foto-mapa__grade { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Durante a animação o JS controla o `fill` quadro a quadro; a transição
   ligaria 48 transições ao mesmo tempo. O contorno escuro é o que separa
   os pontos da foto sem clarear a cor. */
.grade-ponto {
  stroke: rgba(11, 22, 19, .5);
  stroke-width: 1.6;
  transition: fill .5s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.ponto { transform-box: fill-box; transform-origin: center; }
.grade--animando .grade-ponto { transition: none; }

.cena__grade-texto {
  font-family: var(--fonte-mono);
  font-size: 11px;
  fill: var(--tinta);
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: rgba(11, 22, 19, .3);
  stroke-width: 2.4px;
}

.foto-mapa__legenda {
  position: absolute;
  right: 12px; top: 12px;
  font-size: .68rem;
  color: var(--texto-claro) !important;
  background: rgba(11, 22, 19, .74);
  padding: 5px 10px;
  border-radius: var(--raio-pill);
}

.foto-mapa__selo {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--raio);
  background: rgba(11, 22, 19, .88);
  border: 1px solid rgba(201, 169, 110, .32);
}
.foto-mapa__selo > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.foto-mapa__selo dt {
  font-family: var(--fonte-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--champanhe) !important;
  white-space: nowrap;
}
.foto-mapa__selo dd {
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  color: var(--texto-claro) !important;
  white-space: nowrap;
}

.foto-mapa__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 12px;
}

/* painel de leitura (abaixo do mapa) */
.painel {
  border: 1px solid var(--tinta-3);
  border-radius: var(--raio);
  background: var(--tinta-2);
  padding: 14px 16px;
}
.secao--papel .painel { border-color: var(--linha-clara); background: var(--papel-2); }

.painel__titulo {
  font-family: var(--fonte-mono) !important;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--champanhe) !important;
  margin-bottom: 8px;
}

.painel__lista { display: grid; gap: 0; margin: 0; }

.painel__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--tinta-3);
}
.secao--papel .painel__linha { border-color: var(--linha-clara); }
.painel__linha:last-child { border-bottom: 0; }

.painel__linha dt {
  font-family: var(--fonte-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--texto-claro-suave);
}
.secao--papel .painel__linha dt { color: var(--texto-suave); }

.painel__linha dd {
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  color: var(--texto-claro);
  text-align: right;
}
.secao--papel .painel__linha dd { color: var(--texto-escuro); }

.painel__antes { color: var(--texto-claro-suave); }
.secao--papel .painel__antes { color: var(--texto-suave); }

.painel__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--tinta-3);
}
.secao--papel .painel__acoes { border-color: var(--linha-clara); }

.painel__rever {
  background: none;
  border: 0;
  padding: 8px 4px;
  min-height: 44px;
  font-family: var(--fonte-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--texto-claro-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.painel__rever:hover { color: var(--texto-claro); }

/* seletor antes | depois (aparece com reduced-motion) */
.painel__estado { display: flex; gap: 4px; }
.painel__opcao {
  font-family: var(--fonte-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  padding: 6px 10px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--tinta-3);
  border-radius: var(--raio-pill);
  color: var(--texto-claro-suave);
  cursor: pointer;
}
.painel__opcao--ativa {
  border-color: var(--esmeralda);
  color: var(--texto-claro);
  background: rgba(30, 154, 116, .16);
}
.secao--papel .painel__opcao { border-color: var(--linha-clara); }
.secao--papel .painel__opcao--ativa { border-color: var(--esmeralda); color: var(--texto-escuro); }

@media (min-width: 960px) {
  .hero__grade {
    /* minmax(0,…): sem isso, um nowrap dentro da foto estica a coluna */
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .hero__texto { padding-top: clamp(24px, 6vw, 84px); }
  .hero__visual { justify-self: end; }
}

/* --- 7.3 O problema ----------------------------------------------------- */
.problema__grade { display: grid; gap: clamp(32px, 4vw, 56px); }
.problema__texto { max-width: 46ch; }

.problema__cartoes {
  display: grid;
  gap: 1px;
  background: var(--linha-clara);
  border-block: 1px solid var(--linha-clara);
}

.cartao-problema {
  background: var(--papel);
  padding: 24px 0;
  display: grid;
  gap: 8px;
}
.cartao-problema__num {
  font-family: var(--fonte-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  color: var(--esmeralda);
}
.cartao-problema h3 { font-size: 1.125rem; }
.cartao-problema p { color: var(--texto-suave); font-size: 1rem; }

.mock-mapa { margin: 0; }
.mock-mapa__img {
  display: block;
  width: 100%; height: auto;
  border-radius: var(--raio-card);
}
.mock-mapa figcaption { margin-top: 10px; }

/* --- 7.4 Como funciona --------------------------------------------------- */
.como__titulo { max-width: 24ch; }

.passos {
  display: grid;
  gap: clamp(28px, 3vw, 40px);
  counter-reset: passo;
}

.passo {
  border-top: 1px solid var(--linha-clara);
  padding-top: 22px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.passo__marca {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  color: var(--esmeralda);
  border: 1px solid var(--linha-clara);
  border-radius: var(--raio);
}
.passo__marca svg { width: 22px; height: 22px; }
.passo__num {
  font-family: var(--fonte-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--esmeralda);
}
.passo__titulo { font-size: 1.25rem; }
.passo__texto { color: var(--texto-suave); font-size: 1rem; }

/* --- 7.5 Serviços -------------------------------------------------------- */
.servicos__grade { display: grid; gap: clamp(28px, 3vw, 40px); }

.servico {
  background: var(--tinta-2);
  border: 1px solid var(--tinta-3);
  border-radius: var(--raio-card);
  padding: clamp(22px, 3vw, 32px);
  display: grid;
  gap: 22px;
  align-content: start;
}
.servico__topo { display: grid; gap: 8px; }
.servico__sub {
  font-family: var(--fonte-mono);
  font-size: .82rem;
  color: var(--texto-claro-suave);
}

.servico__lista { display: grid; gap: 9px; }
.servico__lista li {
  position: relative;
  padding-left: 22px;
  font-size: 1rem;
  color: var(--texto-claro);
}
.servico__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 9px; height: 1px;
  background: var(--champanhe);
}

/* ilustração do cartão de anúncios: imagem gerada, emoldurada como o cartão do perfil */
.servico__figura {
  margin: 0;
  border: 1px solid var(--tinta-3);
  border-radius: var(--raio-card);
  overflow: hidden;
}
.servico__figura img { display: block; width: 100%; height: auto; }

/* cartão do perfil: nossa arte, com foto real de fachada.
   NÃO é cópia da interface do Google (pantra-graficos §3): sem logo, sem as
   cores e sem a tipografia do Google. */
.cartao-perfil {
  margin: 0;
  border: 1px solid var(--tinta-3);
  border-radius: var(--raio-card);
  overflow: hidden;
  background: var(--tinta-2);
}
.cartao-perfil__capa { position: relative; aspect-ratio: 4 / 3; }
.cartao-perfil__foto { width: 100%; height: 100%; object-fit: cover; }
.cartao-perfil__capa::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(11,22,19,0) 55%, rgba(11,22,19,.75) 100%);
}
.cartao-perfil__selo {
  position: absolute;
  right: 10px; top: 10px;
  z-index: 1;
  font-size: .68rem;
  color: var(--texto-claro) !important;
  background: rgba(11, 22, 19, .74);
  padding: 4px 10px;
  border-radius: var(--raio-pill);
}

.cartao-perfil__corpo { padding: 20px 20px 22px; display: grid; gap: 18px; }

.cartao-perfil__linha { display: grid; gap: 8px; }
.cartao-perfil__nome { font-size: 1.2rem; font-weight: 600; }
.cartao-perfil__nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.estrelas { display: block; width: 72px; color: var(--champanhe); }
.estrelas svg { width: 100%; height: auto; }
.cartao-perfil__categoria {
  font-family: var(--fonte-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--texto-claro-suave) !important;
  padding-left: 14px;
  border-left: 1px solid var(--tinta-3);
}

.cartao-perfil__itens { display: grid; gap: 9px; }
.cartao-perfil__itens li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9375rem;
  color: var(--texto-claro);
}
.cartao-perfil__marca {
  flex: none;
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(30, 154, 116, .16);
  color: var(--esmeralda-viva);
}
.cartao-perfil__marca svg { width: 11px; height: 11px; }

.cartao-perfil__barra { display: grid; gap: 8px; }
.cartao-perfil__barra-rotulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--fonte-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--texto-claro-suave) !important;
}
.cartao-perfil__barra-rotulo strong {
  font-size: .95rem;
  color: var(--texto-claro);
  font-variant-numeric: tabular-nums;
}
.cartao-perfil__trilho {
  height: 8px;
  border-radius: var(--raio-pill);
  background: var(--tinta-3);
  overflow: hidden;
}
.cartao-perfil__cheio {
  display: block;
  height: 100%;
  width: 92%;
  border-radius: var(--raio-pill);
  background: var(--esmeralda-viva);
}

/* --- 7.6 Para quem ------------------------------------------------------- */
.segmentos {
  display: grid;
  gap: 1px;
  background: var(--linha-clara);
  border-block: 1px solid var(--linha-clara);
}
.segmento {
  background: var(--papel);
  padding: 26px 0;
  display: grid;
  gap: 10px;
  align-content: start;
}
.segmento__icone {
  width: 34px; height: 34px;
  color: var(--esmeralda);
  display: block;
}
.segmento__icone svg { width: 100%; height: 100%; }
.segmento h3 { font-size: 1.125rem; }
.segmento p { color: var(--texto-suave); font-size: 1rem; }

/* --- 7.7 Painel do cliente ----------------------------------------------- */
.painel-cliente__grade { display: grid; gap: clamp(32px, 4vw, 56px); }

.painel-cliente__lista { display: grid; gap: 10px; margin-top: 22px; }
.painel-cliente__lista li {
  position: relative;
  padding-left: 24px;
  font-size: 1.0625rem;
  color: var(--texto-claro);
}
.painel-cliente__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--esmeralda-viva);
}

.mock-painel { margin: 0; display: grid; gap: 14px; }
.mock-painel__cards { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.mock-painel__card {
  border: 1px solid var(--tinta-3);
  border-radius: var(--raio);
  background: var(--tinta-2);
  padding: 14px 16px;
}
.mock-painel__rotulo {
  font-family: var(--fonte-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--texto-claro-suave) !important;
  margin-bottom: 6px;
}
.mock-painel__valor {
  font-family: var(--fonte-mono);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  color: var(--texto-claro) !important;
  line-height: 1.1;
}
.mock-painel__funil {
  width: 100%; height: auto;
  border: 1px solid var(--tinta-3);
  border-radius: var(--raio);
  background: var(--tinta-2);
  padding: 16px;
}

/* --- 7.8 Planos ---------------------------------------------------------- */
.planos__grade { display: grid; gap: 20px; align-items: stretch; }

.cartao-plano {
  border: 1px solid var(--linha-clara);
  border-radius: var(--raio-card);
  padding: clamp(22px, 3vw, 30px);
  display: grid;
  gap: 14px;
  align-content: start;
  background: var(--papel);
}
.cartao-plano--destaque {
  border-color: var(--esmeralda);
  background: var(--papel-2);
}
.cartao-plano__selo {
  font-family: var(--fonte-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--esmeralda) !important;
}
.cartao-plano__nome {
  font-family: var(--fonte-mono);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-suave) !important;
}
.cartao-plano__desc { color: var(--texto-suave); font-size: 1rem; }
.cartao-plano__cta { margin-top: auto; justify-self: start; }

.planos__nota {
  margin-top: 22px;
  font-size: .9375rem;
  color: var(--texto-suave);
}

/* --- 7.9 Dúvidas (FAQ) --------------------------------------------------- */
.duvidas__grade { display: grid; gap: clamp(28px, 4vw, 48px); }
.duvidas__intro { margin-top: 14px; }

.faq { border-top: 1px solid var(--linha-clara); }

.faq__item { border-bottom: 1px solid var(--linha-clara); }

.faq__pergunta {
  cursor: pointer;
  padding: 20px 40px 20px 0;
  font-size: 1.0625rem;
  font-weight: 500;
  list-style: none;
  position: relative;
  color: var(--texto-escuro);
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta::after {
  content: "";
  position: absolute;
  right: 6px; top: 28px;
  width: 12px; height: 12px;
  border-right: 1.5px solid var(--esmeralda);
  border-bottom: 1.5px solid var(--esmeralda);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq__item[open] .faq__pergunta::after { transform: rotate(225deg); top: 32px; }
.faq__pergunta:hover { color: var(--esmeralda); }

.faq__resposta {
  padding: 0 0 22px;
  color: var(--texto-suave);
  max-width: 58ch;
  font-size: 1rem;
}

/* --- 7.10 Diagnóstico / formulário --------------------------------------- */
.diagnostico__grade { display: grid; gap: clamp(32px, 4vw, 56px); }
.diagnostico__itens { display: grid; gap: 10px; margin-top: 22px; }
.diagnostico__itens li {
  position: relative;
  padding-left: 24px;
  font-size: 1.0625rem;
  color: var(--texto-claro);
}
.diagnostico__itens li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--champanhe);
}

.formulario {
  display: grid;
  gap: 18px;
  align-content: start;
  background: var(--tinta-2);
  border: 1px solid var(--tinta-3);
  border-radius: var(--raio-card);
  padding: clamp(22px, 3vw, 32px);
}

.campo { display: grid; gap: 7px; }
.campo__rotulo {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--texto-claro);
}
.campo__input {
  min-height: 48px;
  width: 100%;
  padding: 12px 14px;
  background: var(--tinta);
  border: 1px solid var(--tinta-3);
  border-radius: var(--raio);
  color: var(--texto-claro);
  transition: border-color .2s ease;
}
.campo__input::placeholder { color: var(--texto-claro-suave); opacity: .75; }
.campo__input:hover { border-color: var(--esmeralda); }
.campo__input:focus-visible { border-color: var(--champanhe); }
.campo__input[aria-invalid="true"] { border-color: var(--mapa-ruim); }

.campo__erro {
  font-size: .875rem;
  color: #E8896F !important;
}
.campo__erro::before { content: "— "; }

.formulario__botao { width: 100%; margin-top: 4px; }
.formulario__privacidade {
  font-size: .875rem;
  color: var(--texto-claro-suave);
}
.formulario__privacidade a {
  display: inline-block;
  padding-block: 12px;
  color: var(--esmeralda-viva);
}

/* --- 7.11 Grades de 2+ colunas ------------------------------------------- */
@media (min-width: 640px) {
  .problema__cartoes { grid-template-columns: repeat(3, 1fr); gap: 28px; background: none; border: 0; }
  .cartao-problema { padding: 0; }

  .passos { grid-template-columns: repeat(3, 1fr); }

  .planos__grade { grid-template-columns: repeat(2, 1fr); }
  .cartao-plano--destaque { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  .problema__grade {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
  .mock-mapa { grid-column: 2; padding-right: 72px; }

  /* altura própria por cartão: o de Anúncios é bem mais baixo que o de Perfil */
  .servicos__grade { grid-template-columns: 1fr 1fr; align-items: start; }
  .extras { grid-column: 1 / -1; }

  .segmentos { grid-template-columns: repeat(4, 1fr); gap: 28px; background: none; border: 0; }
  .segmento { padding: 0; }

  .painel-cliente__grade { grid-template-columns: 5fr 7fr; align-items: start; }

  .planos__grade { grid-template-columns: repeat(3, 1fr); }
  .cartao-plano--destaque { grid-column: auto; }

  .duvidas__grade { grid-template-columns: 5fr 7fr; align-items: start; }

  .diagnostico__grade { grid-template-columns: 5fr 7fr; align-items: start; }
}

/* --- 7.12 Extras (faixa) ------------------------------------------------- */
.extras {
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--tinta-3);
  padding-top: 26px;
  display: grid;
  gap: 20px;
}
.extras__titulo {
  font-family: var(--fonte-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--champanhe) !important;
}
.extras__lista { display: grid; gap: 20px; }
.extras__lista li { display: grid; gap: 4px; }
.extras__lista strong { font-weight: 500; color: var(--texto-claro); }
.extras__lista span { color: var(--texto-claro-suave); font-size: .9375rem; }

@media (min-width: 640px) {
  .extras__lista { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   8. UTILITÁRIOS
   -------------------------------------------------------------------------- */
.so-tela-pequena { display: none; }
[hidden] { display: none !important; }

/* página de política de privacidade */
.politica { max-width: 62ch; }
.politica h2 {
  font-size: 1.25rem;
  margin-top: 40px;
  margin-bottom: 10px;
}
.politica p { color: var(--texto-claro-suave); }
.politica a { color: var(--esmeralda-viva); }

/* revelar seções ao rolar (Fase 4) */
.revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .34s ease, transform .34s ease;
}
.revelar.visivel { opacity: 1; transform: none; }

/* sem JS (ou sem IntersectionObserver) nada é escondido: a classe só é
   aplicada por quem consegue depois desfazê-la. Impressão sempre mostra tudo. */
@media print {
  .revelar, .revelar.visivel { opacity: 1 !important; transform: none !important; }
  .cabecalho { position: static; }
  .whatsapp-flutuante { display: none; }
}

/* --------------------------------------------------------------------------
   9. @MEDIA
   -------------------------------------------------------------------------- */
@media (max-width: 959px) {
  /* menu vira gaveta */
  .menu-botao { display: grid; }

  .cabecalho__interno { gap: 12px; }

  .cabecalho__acao { display: none; }

  .cabecalho__nav {
    position: fixed;
    inset: var(--altura-cabecalho) 0 auto 0;
    background: var(--tinta);
    border-bottom: 1px solid var(--tinta-3);
    padding: 8px var(--gutter) 24px;
    display: none;
  }
  .cabecalho__nav.aberto { display: block; }
  .cabecalho__nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .cabecalho__nav li + li { border-top: 1px solid var(--tinta-3); }
  .cabecalho__nav a {
    display: block;
    padding: 15px 0;
    font-size: 1.05rem;
  }
  .cabecalho__nav .btn { width: 100%; margin-top: 20px; }
}

@media (max-width: 639px) {
  :root { --gutter: 16px; }

  .logo__img { height: 26px; }

  .whatsapp-flutuante { right: 14px; bottom: 14px; }

  .rodape__base { flex-direction: column; align-items: flex-start; }
}

/* respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .revelar { opacity: 1; transform: none; }
  .whatsapp-flutuante:hover { transform: none; }
}