/* =========================================================
   Lucimara Hahn | Tráfego & Conteúdo — estilos do site
   Página única: seções alternando preto/grafite e branco acinzentado.
   ========================================================= */
:root {
  /* paleta oficial */
  --preto: #101114;
  --grafite: #25282D;
  --prata: #A9ADB3;
  --branco: #FFFFFF;
  --branco-cinza: #F1F2F3;
  /* apoio (derivados da paleta) */
  --grafite-2: #1A1C20;          /* cartões sobre o preto */
  --linha-escura: #34383F;
  --texto-claro: #C9CCD1;        /* texto corrido em fundo escuro */
  --texto-escuro: #333840;       /* texto corrido em fundo claro */
  --borda-clara: #D0D3D7;
  --prata-claro: #DADDE1;
  --prata-medio: #B5B9BF;
  --prata-escuro: #8C9198;
  --luz: rgba(64, 69, 78, 0.55); /* luz de fundo atrás do corpo na capa */
  /* tipografia */
  --f-titulo: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio: 6px;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --topo-h: 60px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { background: var(--preto); color: var(--branco); }
body { margin: 0; font: 400 16px/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--prata); outline-offset: 3px; }
.clara :focus-visible { outline-color: var(--grafite); }

.pular { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--branco); color: var(--preto); padding: 10px 14px; border-radius: var(--raio); font-weight: 600; }
.pular:focus { top: calc(10px + env(safe-area-inset-top, 0px)); }

/* ---------------- MENU ---------------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 31; background: var(--preto); }
.topo {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 30;
  background: rgba(16, 17, 20, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .3s ease, background-color .3s ease;
}
.topo.rolou { border-bottom-color: var(--linha-escura); background: rgba(16, 17, 20, 0.94); }
.topo-in { height: var(--topo-h); padding-left: var(--gutter-l); padding-right: var(--gutter-r); max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marca { font: 800 15px/1 var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--branco); }
.menu { display: flex; gap: 28px; }
.menu a { font: 500 14px/1 var(--f-texto); color: var(--texto-claro); text-decoration: none; padding: 10px 0; position: relative; transition: color .2s ease; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--prata); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.menu a:hover, .menu a[aria-current="true"] { color: var(--branco); }
.menu a:hover::after, .menu a[aria-current="true"]::after { transform: scaleX(1); }
.menu-botao { display: none; }

@media (max-width: 899px) {
  .menu-botao {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px;
    background: transparent; border: 0; color: var(--branco); cursor: pointer; border-radius: var(--raio);
  }
  .menu-icone { width: 22px; height: 12px; position: relative; display: block; }
  .menu-icone span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s ease, top .3s ease; }
  .menu-icone span:first-child { top: 0; }
  .menu-icone span:last-child { top: 10px; }
  .menu-botao[aria-expanded="true"] .menu-icone span:first-child { top: 5px; transform: rotate(45deg); }
  .menu-botao[aria-expanded="true"] .menu-icone span:last-child { top: 5px; transform: rotate(-45deg); }
  .menu {
    position: fixed; left: 0; right: 0; top: calc(var(--topo-h) + env(safe-area-inset-top, 0px));
    flex-direction: column; gap: 0; background: var(--preto); border-bottom: 1px solid var(--linha-escura);
    padding: 8px var(--gutter-r) 20px var(--gutter-l);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .menu.aberto { visibility: visible; opacity: 1; transform: none; transition: opacity .25s ease, transform .25s ease; }
  .menu a { font-size: 18px; padding: 15px 0; border-bottom: 1px solid var(--linha-escura); }
  .menu a::after { display: none; }
}

/* ---------------- BOTÕES ---------------- */
.botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 50px; padding: 0 24px; border-radius: var(--raio);
  font: 600 13px/1.2 var(--f-texto); letter-spacing: .1em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
/* prata metálico suave: só tons e um brilho fixo na borda superior; sem textura escovada (exclusiva do SOCIAL MEDIA) */
.btn-prata, .btn-metal {
  color: var(--preto); border-color: #8C9198;
  background: linear-gradient(180deg, #E8EAED 0%, #CDD1D5 42%, #B3B7BD 58%, #C6CACF 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(0,0,0,.12);
}
.btn-prata:hover, .btn-metal:hover { background: linear-gradient(180deg, #F2F3F5 0%, #D9DCE0 42%, #C2C6CB 58%, #D3D6DA 100%); border-color: #A9ADB3; }
.btn-contorno-claro { background: transparent; color: var(--branco); border-color: var(--prata); }
.btn-contorno-claro:hover { background: rgba(169, 173, 179, .14); }
.btn-grafite { background: var(--grafite); color: var(--branco); border-color: var(--grafite); }
.btn-grafite:hover { background: var(--preto); border-color: var(--preto); }
.btn-contorno-escuro { background: transparent; color: var(--preto); border-color: var(--grafite); box-shadow: inset 0 0 0 1px var(--grafite); }
.btn-contorno-escuro:hover, .btn-contorno-escuro[aria-expanded="true"] { background: rgba(37, 40, 45, .08); }

/* ---------------- 1. CAPA ---------------- */
.capa {
  position: relative; overflow: hidden; isolation: isolate; width: 100%;
  height: max(640px, 100svh);
  background-color: var(--preto);
  background-image: radial-gradient(ellipse var(--luz-w, 40%) var(--luz-h, 55%) at var(--luz-x, 50%) var(--luz-y, 60%), var(--luz) 0%, rgba(16, 17, 20, 0) 100%);
}
@media (min-width: 900px) { .capa { height: clamp(640px, 100vh, 1000px); } }
.capa-palavras { position: absolute; inset: 0; z-index: 1; pointer-events: none; will-change: transform; }
.capa-palavras .linha {
  position: absolute; left: 0; width: 100%; text-align: center; white-space: nowrap;
  font-family: var(--f-titulo); font-weight: 800; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase;
}
.capa-palavras .letra {
  display: inline-block;
  /* prata metalizado escovado (exclusivo do SOCIAL MEDIA).
     As camadas cobrem a linha inteira; cada letra mostra o seu trecho (--bx), então o metal é contínuo
     entre as letras e se move junto com elas. Nada é animado no próprio brilho. */
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,.02) 1px 2px),
    repeating-linear-gradient(180deg, rgba(255,255,255,0) 0 5px, rgba(255,255,255,.05) 5px 6px, rgba(0,0,0,0) 6px 13px, rgba(0,0,0,.045) 13px 14px, rgba(255,255,255,0) 14px 23px, rgba(255,255,255,.04) 23px 25px, rgba(0,0,0,0) 25px 31px),
    linear-gradient(104deg, rgba(255,255,255,0) 14%, rgba(255,255,255,.20) 27%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.12) 71%, rgba(255,255,255,0) 82%),
    linear-gradient(180deg, #F2F3F5 0%, #CDD1D6 20%, #9DA2A9 46%, #D9DCE0 57%, #A8ADB4 76%, #7B8088 100%);
  background-size: auto, auto, var(--lw, 100%) 100%, var(--lw, 100%) 100%;
  background-position: 0 0, 0 0, var(--bx, 0px) 0, var(--bx, 0px) 0;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--prata-medio);
}
.capa-foto {
  position: absolute; z-index: 2; max-width: none; height: auto; user-select: none; -webkit-user-drag: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, #000 var(--f0, 78%), rgba(0,0,0,.84) var(--f1, 85%), rgba(0,0,0,.48) var(--f2, 91%), rgba(0,0,0,.15) var(--f3, 96%), transparent var(--f4, 99%));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, #000 var(--f0, 78%), rgba(0,0,0,.84) var(--f1, 85%), rgba(0,0,0,.48) var(--f2, 91%), rgba(0,0,0,.15) var(--f3, 96%), transparent var(--f4, 99%));
  mask-composite: intersect;
}
.capa-texto { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; gap: 16px; max-width: 1440px; margin: 0 auto; }
.capa-a, .capa-b { display: grid; gap: 14px; }
.capa-kicker { font: 600 12px/1.3 var(--f-texto); letter-spacing: .2em; color: var(--prata); }
@media (max-width: 400px) { .capa-kicker { font-size: 11px; letter-spacing: .12em; } }
.capa h1 { font-family: var(--f-titulo); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; color: var(--branco); font-size: clamp(28px, 8.2vw, 40px); text-wrap: balance; }
.capa-lead { font-size: 15.5px; line-height: 1.55; color: var(--branco-cinza); max-width: 40ch; }
.capa .botoes .btn { flex: 1 1 auto; }
@media (min-width: 900px) {
  .capa-texto { grid-template-columns: 1fr 1fr; align-items: end; gap: 32px; }
  .capa h1 { font-size: clamp(32px, 3vw, 56px); }
  .capa-b { justify-items: end; text-align: right; gap: 22px; }
  .capa-lead { font-size: 17px; max-width: 34ch; }
  .capa .botoes { justify-content: flex-end; }
  .capa .botoes .btn { flex: 0 0 auto; }
}

/* alternativa B aprovada (celular e computador): sombra suave sobre a região da mão, só na máscara; a foto não é alterada */
@media (min-width: 0px) {
  .capa-foto {
    -webkit-mask-image: radial-gradient(ellipse 30% 17% at 55% 78%, rgba(0,0,0,.22) 0%, rgba(0,0,0,.5) 50%, #000 100%), linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, #000 var(--f0, 78%), rgba(0,0,0,.84) var(--f1, 85%), rgba(0,0,0,.48) var(--f2, 91%), rgba(0,0,0,.15) var(--f3, 96%), transparent var(--f4, 99%));
    -webkit-mask-composite: source-in, source-in;
    mask-image: radial-gradient(ellipse 30% 17% at 55% 78%, rgba(0,0,0,.22) 0%, rgba(0,0,0,.5) 50%, #000 100%), linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, #000 var(--f0, 78%), rgba(0,0,0,.84) var(--f1, 85%), rgba(0,0,0,.48) var(--f2, 91%), rgba(0,0,0,.15) var(--f3, 96%), transparent var(--f4, 99%));
    mask-composite: intersect, intersect;
  }
}

/* animação de entrada da capa (mais lenta, sem pressa) */
.capa.anima .capa-foto { animation: aparece 1.1s ease .15s both; }
.capa.anima .letra { animation: surge 1.9s cubic-bezier(.19,.8,.22,1) var(--atraso, .7s) both; }
.capa.anima .capa-kicker { animation: sobe .9s ease 2.0s both; }
.capa.anima h1 { animation: sobe 1s ease 2.15s both; }
.capa.anima .capa-lead { animation: sobe 1s ease 2.35s both; }
.capa.anima .botoes { animation: sobe .9s ease 2.6s both; }
@keyframes aparece { from { opacity: 0; } }
@keyframes surge { 0% { transform: translateX(var(--dx, 0px)); opacity: 0; } 35% { opacity: 0; } 78% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes sobe { from { transform: translateY(14px); opacity: 0; } }

/* ---------------- SEÇÕES ---------------- */
.secao-in { max-width: 1240px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-block: 88px; }
@media (min-width: 900px) { .secao-in { padding-block: 128px; } }
.escura { background: var(--preto); color: var(--branco); }
.clara { background: var(--branco-cinza); color: var(--texto-escuro); }
.secao-cab { display: grid; gap: 18px; max-width: 980px; margin-bottom: 48px; }
@media (min-width: 900px) { .secao-cab { margin-bottom: 64px; } }
.rotulo { font: 600 12px/1.3 var(--f-texto); letter-spacing: .2em; color: var(--prata-escuro); }
.escura .rotulo { color: var(--prata); }
.secao h2 { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(30px, 7.4vw, 56px); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.clara h2 { color: var(--preto); }
.abertura { font-size: clamp(17px, 2vw, 19px); line-height: 1.6; max-width: 60ch; }
.escura .abertura { color: var(--texto-claro); }
.explicacao { line-height: 1.65; max-width: 62ch; }
.nota { font-size: 14px; line-height: 1.55; color: #5B616B; max-width: 62ch; }
.escura .nota { color: var(--prata); }

/* ---------------- 2. COMO EU TRABALHO ---------------- */
.etapas { display: grid; gap: 32px; }
@media (min-width: 900px) { .etapas { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.etapa {
  background: var(--branco); border: 1px solid var(--borda-clara); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; transition: border-color .3s ease, transform .3s ease;
}
.etapa:hover { border-color: var(--prata); transform: translateY(-3px); }
.etapa-foto { aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--borda-clara); }
.etapa-foto img { width: 100%; height: 100%; object-fit: cover; }
.etapa-texto { padding: 24px 24px 28px; display: grid; gap: 10px; }
.etapa-num { font: 600 13px/1 var(--f-texto); letter-spacing: .12em; color: #6E737B; }
.etapa h3 { font: 800 20px/1.2 var(--f-titulo); letter-spacing: .04em; color: var(--preto); }
.etapa p:not(.etapa-num) { font-size: 16px; line-height: 1.6; color: var(--texto-escuro); }

/* ---------------- 3. SERVIÇOS ---------------- */
.servicos { display: grid; gap: 24px; }
@media (min-width: 700px) { .servicos { gap: 16px; } }
@media (min-width: 700px) { .servicos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .servicos { grid-template-columns: repeat(4, 1fr); } }
.servico {
  background: var(--grafite-2); border: 1px solid var(--linha-escura); border-radius: 10px;
  padding: 28px 24px 30px; display: grid; gap: 12px; align-content: start;
  transition: border-color .3s ease, background-color .3s ease;
}
.servico:hover { border-color: var(--prata-escuro); background: var(--grafite); }
.servico h3 { font: 700 19px/1.3 var(--f-titulo); color: var(--branco); display: flex; align-items: center; gap: 8px; }
.servico p { color: var(--texto-claro); font-size: 15.5px; }
/* computador/tablet: títulos reservam duas linhas, então as descrições começam na mesma altura */
@media (min-width: 700px) { .servico h3 { min-height: 2.6em; align-items: flex-start; } }
.icone { width: 28px; height: 28px; color: var(--prata); stroke-width: 1.5; display: inline-block; }
svg.icone { stroke-width: 1.5; }
.servico-link { padding: 0; }
.servico-link a { display: grid; gap: 12px; align-content: start; padding: 28px 24px 30px; text-decoration: none; border-radius: 10px; height: 100%; }
.servico-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.selo { font: 600 11px/1 var(--f-texto); letter-spacing: .16em; color: var(--prata); border: 1px solid var(--linha-escura); padding: 7px 9px; border-radius: 4px; }
.seta { width: 24px; height: 24px; flex: none; color: var(--prata); transition: transform .3s ease; }
svg.seta { stroke-width: 2; }
.servico-link a:hover .seta { transform: translate(2px, 2px); }

/* ---------------- 4. TRÁFEGO PAGO ---------------- */
.explicacao { color: var(--texto-escuro); }
.beneficios { display: grid; gap: 24px; }
@media (min-width: 700px) { .beneficios { gap: 16px; } }
@media (min-width: 700px) { .beneficios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .beneficios { grid-template-columns: repeat(4, 1fr); } }
.beneficio { background: var(--branco); border: 1px solid var(--borda-clara); border-radius: 10px; padding: 26px 24px 28px; display: grid; gap: 10px; align-content: start; transition: border-color .3s ease; }
.beneficio:hover { border-color: var(--prata); }
.beneficio h3 { font: 800 14px/1.2 var(--f-titulo); letter-spacing: .14em; color: var(--preto); padding-bottom: 12px; border-bottom: 1px solid var(--borda-clara); }
.beneficio p { font: 600 18px/1.4 var(--f-titulo); color: var(--grafite); }
.trafego-acao { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--borda-clara); display: grid; gap: 24px; align-items: center; }
.trafego-acao > div { display: grid; gap: 12px; }
.trafego-convite { font: 700 clamp(19px, 2.2vw, 23px)/1.4 var(--f-titulo); color: var(--preto); max-width: 46ch; }
@media (min-width: 900px) { .trafego-acao { grid-template-columns: 1fr auto; gap: 48px; } }

#trafego-pago .nota { font-size: 15px; color: #4A5059; }

/* ---------------- 5. PLANOS ---------------- */
.escura#planos { background: var(--preto); }
.planos { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .planos { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.plano {
  position: relative; display: grid; gap: 22px; align-content: start;
  background: var(--grafite-2); border: 1px solid var(--linha-escura); border-radius: 10px; padding: 26px 22px 22px;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.plano.destaque { background: var(--grafite); border-color: var(--prata-escuro); }
.plano:hover { border-color: var(--prata); }
.plano.selecionado { border-color: var(--prata-claro); box-shadow: inset 0 0 0 1px var(--prata-claro); }
.plano-sel { position: relative; display: block; cursor: pointer; }
.plano-sel input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.plano-sel:has(input:focus-visible) { outline: 2px solid var(--prata); outline-offset: 6px; border-radius: 6px; }
.plano-corpo { display: grid; gap: 16px; align-content: start; }
.plano-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plano-nome { font: 800 13px/1.2 var(--f-titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--prata); }
.plano-marca { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--prata-escuro); display: grid; place-items: center; flex: none; transition: border-color .2s ease; }
.plano-marca::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--branco); transform: scale(0); transition: transform .2s ease; }
.plano.selecionado .plano-marca { border-color: var(--branco); }
.plano.selecionado .plano-marca::after { transform: scale(1); }
.plano-beneficio { font: 700 20px/1.3 var(--f-titulo); color: var(--branco); }
@media (min-width: 900px) { .plano-beneficio { min-height: 2.6em; } .plano { grid-template-rows: 1fr auto; } }
.plano-valor { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; padding-bottom: 18px; border-bottom: 1px solid var(--linha-escura); }
.plano-valor .rs { font: 500 16px var(--f-texto); color: var(--prata); }
.plano-valor .num { font: 800 46px/1 var(--f-titulo); letter-spacing: -0.02em; color: var(--branco); }
.plano-valor .mes { font: 400 15px var(--f-texto); color: var(--prata); }
.plano-entregas { display: grid; gap: 8px; }
.plano-entregas li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: baseline; color: var(--texto-claro); font-size: 15.5px; }
.plano-entregas li::before { content: ""; width: 10px; height: 1px; background: var(--prata); transform: translateY(-4px); }
.plano-entregas li:last-child { color: var(--branco); font-weight: 600; }
.plano-btn { width: 100%; }
.btn-discreto { background: transparent; color: var(--branco-cinza); border-color: var(--prata-escuro); }
.btn-discreto:hover { color: var(--branco); border-color: var(--prata-claro); background: rgba(169, 173, 179, .08); }

/* condições em blocos */
.condicoes { margin-top: 48px; display: grid; gap: 16px; }
@media (min-width: 900px) { .condicoes { grid-template-columns: 1fr 1.35fr; gap: 20px; margin-top: 56px; } }
.bloco-cond { background: var(--grafite-2); border: 1px solid var(--linha-escura); border-radius: 10px; padding: 24px 22px 22px; }
@media (min-width: 900px) { .bloco-cond { padding: 30px 30px 28px; } }
.mini { font: 600 12px/1.3 var(--f-texto); letter-spacing: .2em; color: var(--prata); margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--linha-escura); }
.lista { display: grid; gap: 12px; }
.lista li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: baseline; color: var(--texto-claro); font-size: 15.5px; line-height: 1.55; }
.lista li::before { content: ""; width: 10px; height: 1px; background: var(--prata); transform: translateY(-4px); }
.lista-divisorias { gap: 0; }
.lista-divisorias li { padding-block: 12px; border-bottom: 1px solid var(--linha-escura); }
.lista-divisorias li:first-child { padding-top: 0; }
.lista-divisorias li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------------- 6. CONTATO ---------------- */
.contato-in > * { max-width: 980px; }
.contato-botoes { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) { .contato-botoes .btn { flex: 1 1 100%; } }
.form {
  margin-top: 28px; background: var(--branco); border: 1px solid var(--borda-clara); border-radius: 10px;
  padding: 28px 24px; display: grid; gap: 18px;
}
@media (min-width: 700px) { .form { grid-template-columns: 1fr 1fr; padding: 36px; gap: 22px 24px; } .campo-largo { grid-column: 1 / -1; } }
.form[hidden] { display: none; }
/* abertura e fechamento suaves do formulário */
.form.abrindo { animation: form-abre .45s cubic-bezier(.2,.7,.2,1) both; }
.form.fechando { animation: form-fecha .3s ease both; }
@keyframes form-abre { from { opacity: 0; transform: translateY(-10px); } }
@keyframes form-fecha { to { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .form.abrindo, .form.fechando { animation: none; } }
.campo { display: grid; gap: 8px; min-width: 0; }
.campo label { font: 600 14px var(--f-texto); color: var(--preto); }
.campo label span { color: #5B616B; }
.opcional { font-weight: 400; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: 400 16px/1.4 var(--f-texto); color: var(--preto); background: #F7F8F9;
  border: 1px solid #A9ADB3; border-radius: var(--raio); padding: 13px 14px; min-height: 50px;
  transition: border-color .2s ease, background-color .2s ease; color-scheme: light;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--grafite); box-shadow: 0 0 0 1px var(--grafite); background: var(--branco); }
.campo [aria-invalid="true"] { border-color: #A3342C; }
.erro { font-size: 13.5px; color: #A3342C; }
.form-rodape { display: grid; gap: 14px; justify-items: start; }
@media (max-width: 560px) { .form-rodape .btn { width: 100%; } }
.form-aviso { font-size: 14px; color: var(--texto-escuro); }
.form-aviso a { font-weight: 600; }
.contato-dados { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--borda-clara); display: flex; flex-wrap: wrap; gap: 12px 32px; color: var(--texto-escuro); }
.contato-dados strong { color: var(--preto); font-weight: 600; user-select: all; }
.contato-dados a { color: var(--preto); font-weight: 600; text-decoration-color: var(--borda-clara); text-underline-offset: 4px; }

/* ---------------- RODAPÉ ---------------- */
.rodape { background: var(--preto); border-top: 1px solid var(--linha-escura); }
.rodape-in {
  max-width: 1240px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  padding-block: 20px calc(20px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 4px; font-size: 13px; line-height: 1.4; color: var(--prata);
}
.rodape-in > p { padding-block: 12px 0; }
.rodape-links { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.rodape a { color: var(--prata); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; transition: color .2s ease; }
.rodape a:hover { color: var(--branco); }
.rodape .voltar svg { width: 15px; height: 15px; }
@media (min-width: 700px) {
  .rodape-in { grid-template-columns: 1fr auto; align-items: center; gap: 32px; padding-block: 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .rodape-in > p { padding-block: 0; }
  .rodape-links { justify-content: flex-end; gap: 32px; }
}

/* ---------------- ENTRADA DURANTE A ROLAGEM ----------------
   O conteúdo nasce visível. O script só esconde o que ainda está abaixo da tela
   e revela ao chegar nele (sem script, tudo continua visível). */
.revela.espera { opacity: 0; transform: translateY(22px); }
.revela.entrou { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .capa.anima .capa-foto, .capa.anima .letra, .capa.anima .capa-kicker, .capa.anima h1, .capa.anima .capa-lead, .capa.anima .botoes { animation: none !important; }
  .capa-palavras { transform: none !important; }
  .revela.espera { opacity: 1; transform: none; }
  .etapa:hover { transform: none; }
}

/* telas estreitas: botões cabem em uma linha */
@media (max-width: 400px) {
  .btn { letter-spacing: .06em; padding: 0 14px; font-size: 12.5px; }
}
@media (max-width: 560px) { .capa .botoes .btn { flex: 1 1 100%; } }