/* Peticalc · site institucional. Identidade C1-PESO. Sem dependência externa.
   Movimentos modelados no site do InícialPro (entradas ao rolar, órbitas girando,
   faixa de palavras em passos, cabeçalho que gruda, botão que inverte), escritos
   do zero aqui. Tudo desliga com prefers-reduced-motion. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-VF.woff2") format("woff2-variations"), url("../fonts/Manrope-VF.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --preto: #0E0D0B;
  --grafite: #26241F;
  --grafite-2: #1A1915;
  --linha-escura: #38352E;
  --latao: #A5874F;
  --latao-claro: #C2A672;
  --latao-escuro: #846C3F;
  --latao-texto: #6E5933;      /* latão para texto pequeno sobre papel (contraste >= 4,5:1) */
  --papel: #F6F2EA;
  --papel-2: #EDE6D8;
  --papel-3: #E2D9C7;
  --tinta: #0E0D0B;
  --tinta-2: #4A463D;          /* texto secundário sobre papel */
  --claro-2: rgba(246, 242, 234, .74); /* texto secundário sobre preto */
  --raio: 18px;
  --raio-p: 12px;
  --ease: cubic-bezier(.25, .1, .25, 1);       /* o "ease" do InícialPro */
  --ease-saida: cubic-bezier(.22, .61, .36, 1);
  --dur-entrada: 1.25s;                         /* duração das entradas no InícialPro */
  --dur-hover: .3s;
  --sombra: 0 18px 50px -18px rgba(14, 13, 11, .35);
  --sombra-forte: 10px 4px 60px rgba(14, 13, 11, .18);
  --largura: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 450;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 800; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
.num, table td:last-child, .preco, .por-geracao, [data-conta] { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--latao); color: var(--preto); padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--latao); outline-offset: 3px; border-radius: 6px; }
.container { width: min(100% - 40px, var(--largura)); margin-inline: auto; }

/* ---------- Botões: inverte a cor e a seta no círculo (como no InícialPro) ---------- */
.btn {
  --btn-bg: var(--latao); --btn-cor: var(--preto); --btn-bg-h: var(--papel); --btn-cor-h: var(--preto);
  --seta-bg: var(--preto); --seta-cor: var(--latao); --seta-bg-h: var(--latao); --seta-cor-h: var(--preto);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 14px 12px 22px; min-height: 48px;
  border-radius: 999px; border: 1.5px solid transparent;
  background: var(--btn-bg); color: var(--btn-cor);
  font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-hover) linear, color var(--dur-hover) linear, border-color var(--dur-hover) linear, transform var(--dur-hover) var(--ease);
}
.btn .seta {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--seta-bg); color: var(--seta-cor); flex: none;
  transition: background-color var(--dur-hover) linear, color var(--dur-hover) linear, transform var(--dur-hover) var(--ease);
}
.btn .seta svg { width: 14px; height: 14px; }
.btn:hover { background: var(--btn-bg-h); color: var(--btn-cor-h); }
.btn:hover .seta { background: var(--seta-bg-h); color: var(--seta-cor-h); transform: translateX(3px) rotate(-45deg); }
.btn:active { transform: translateY(1px); }
.btn-sem-seta { padding: 12px 22px; }
.btn-escuro { --btn-bg: var(--preto); --btn-cor: var(--papel); --btn-bg-h: var(--latao); --btn-cor-h: var(--preto); --seta-bg: var(--papel); --seta-cor: var(--preto); --seta-bg-h: var(--preto); --seta-cor-h: var(--latao); }
.btn-contorno { --btn-bg: transparent; --btn-cor: currentColor; --btn-bg-h: var(--papel); --btn-cor-h: var(--preto); border-color: currentColor; }
.btn-contorno-escuro { --btn-bg: transparent; --btn-cor: var(--preto); --btn-bg-h: var(--preto); --btn-cor-h: var(--papel); border-color: var(--preto); }
.btn-grande { min-height: 56px; font-size: 17px; padding-left: 26px; }
.btn-bloco { width: 100%; }

/* ---------- Topo: transparente sobre o hero, gruda escuro ao rolar ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: var(--papel);
  transition: background-color .3s linear, box-shadow .3s linear, padding .3s var(--ease), border-color .3s linear;
  padding: 18px 0;
  border-bottom: 1px solid transparent;
}
.topo.grudado { background: rgba(14, 13, 11, .94); box-shadow: 0 0 10px rgba(0, 0, 0, .35); padding: 10px 0; border-bottom-color: var(--linha-escura); }
@supports (backdrop-filter: blur(8px)) { .topo.grudado { background: rgba(14, 13, 11, .82); backdrop-filter: blur(10px) saturate(1.2); } }
.topo .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marca { display: block; flex: none; }
.marca img { width: 168px; height: auto; }            /* acima de 120 px: lockup completo com "Peti" Regular */
.topo nav { display: flex; gap: 4px; padding: 5px; border-radius: 999px; border: 1px solid var(--linha-escura); background: rgba(38, 36, 31, .55); }
.topo nav a { text-decoration: none; font-size: 14.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; color: var(--claro-2); transition: background-color .3s linear, color .3s linear; }
.topo nav a:hover, .topo nav a.ativo { background: var(--grafite); color: var(--papel); }
.topo-acoes { display: flex; align-items: center; gap: 18px; }
.entrar { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--claro-2); transition: color .3s linear; }
.entrar:hover { color: var(--latao-claro); }
.topo .btn { min-height: 42px; font-size: 15px; padding: 8px 10px 8px 18px; }
.topo .btn .seta { width: 26px; height: 26px; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--preto); color: var(--papel); padding: 150px 0 0; overflow: hidden; isolation: isolate; }
.hero::before { /* grade fina atrás do título, que some nas bordas */
  content: ""; position: absolute; inset: 0 0 auto; height: 760px; z-index: -1;
  background-image: linear-gradient(rgba(165, 135, 79, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(165, 135, 79, .13) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 46% 60% at 50% 30%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 46% 60% at 50% 30%, #000 25%, transparent 75%);
}
.hero::after { /* brilho de latão, no lugar do verde do InícialPro */
  content: ""; position: absolute; left: 50%; top: 520px; width: 1400px; height: 900px; transform: translateX(-50%); z-index: -2;
  background: radial-gradient(closest-side, rgba(165, 135, 79, .34), rgba(165, 135, 79, .10) 55%, transparent 100%);
}
.orbita { position: absolute; z-index: -1; width: 840px; height: 840px; top: -400px; pointer-events: none; color: var(--latao); }
.orbita-esq { left: -540px; }
.orbita-dir { right: -540px; }
.orbita .gira { transform-box: fill-box; transform-origin: 50% 50%; animation: gira 15s linear infinite; }
.orbita-dir .gira { animation-duration: 21s; animation-direction: reverse; }
@keyframes gira { to { transform: rotate(360deg); } }

.hero-texto { text-align: center; max-width: 900px; margin-inline: auto; }
.selo {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 7px 16px;
  border-radius: 999px; border: 1px solid rgba(165, 135, 79, .45); background: rgba(165, 135, 79, .12);
  color: var(--latao-claro); font-size: 14.5px; font-weight: 600;
}
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--latao); box-shadow: 0 0 0 4px rgba(165, 135, 79, .22); }
.hero h1 { font-size: clamp(38px, 6.2vw, 76px); letter-spacing: -.035em; line-height: 1.04; margin-bottom: 26px; }
.hero h1 em { font-style: normal; color: var(--latao); }
.hero-lead { font-size: clamp(17px, 1.6vw, 19.5px); color: var(--claro-2); max-width: 760px; margin: 0 auto 32px; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hero-micro { margin: 20px 0 0; font-size: 15px; color: var(--claro-2); }
.hero-micro strong { color: var(--papel); font-weight: 700; }

/* Janela do caso (exemplo), entra com zoom como a tela do app no InícialPro */
.palco { position: relative; margin: 64px auto 0; max-width: 1020px; padding-bottom: 90px; }
.janela { position: relative; border-radius: 22px 22px 18px 18px; background: var(--grafite-2); border: 1px solid var(--linha-escura); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8), 0 0 0 8px rgba(38, 36, 31, .45); overflow: hidden; text-align: left; }
.janela-topo { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--linha-escura); background: var(--grafite); }
.janela-topo i { width: 10px; height: 10px; border-radius: 50%; background: var(--linha-escura); }
.janela-topo i:first-child { background: var(--latao); }
.janela-topo b { font-weight: 700; font-size: 14px; color: var(--papel); margin-left: 6px; }
.janela-topo span { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--latao-claro); border: 1px solid rgba(165, 135, 79, .45); border-radius: 999px; padding: 3px 10px; }
.janela-corpo { display: grid; grid-template-columns: 1.35fr 1fr; }
.janela-pedidos { padding: 22px 26px 18px; border-right: 1px solid var(--linha-escura); }
.janela-pedidos h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--claro-2); font-weight: 700; margin-bottom: 10px; }
.janela table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.janela td { padding: 11px 0; border-bottom: 1px dashed var(--linha-escura); color: var(--papel); }
.janela td:last-child { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 16px; }
.janela tfoot td { border-bottom: 0; padding-top: 16px; font-size: 17px; font-weight: 800; }
.janela tfoot td:last-child { color: var(--latao); font-size: 20px; }
.ressalva { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--claro-2); padding: 10px 12px; border-radius: 10px; background: rgba(165, 135, 79, .10); border: 1px solid rgba(165, 135, 79, .25); }
.janela-arquivos { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 10px; }
.janela-arquivos h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--claro-2); font-weight: 700; margin-bottom: 2px; }
.arquivo { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--grafite); border: 1px solid var(--linha-escura); transition: border-color .3s linear, transform .3s var(--ease); }
.arquivo:hover { border-color: var(--latao); transform: translateX(4px); }
.arquivo .nome { font-size: 14px; font-weight: 600; color: var(--papel); overflow-wrap: anywhere; }
.arquivo em { display: block; font-style: normal; font-size: 12.5px; color: var(--claro-2); font-weight: 500; }
.ext { flex: none; display: inline-grid; place-items: center; min-width: 50px; height: 30px; padding: 0 8px; border-radius: 8px; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.ext-pjc { background: var(--latao); color: var(--preto); }
.ext-pdf { background: var(--papel); color: var(--preto); }
.ext-docx { background: transparent; color: var(--papel); border: 1.5px solid var(--claro-2); }
.ext-docs { background: transparent; color: var(--tinta); border: 1.5px solid var(--tinta-2); }
.janela-nota { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--claro-2); }

/* ---------- Faixa de palavras em passos (o carrossel de palavras do InícialPro) ---------- */
.faixa { background: var(--preto); color: var(--papel); padding: 0 0 70px; }
.faixa-rotulo { text-align: center; color: var(--claro-2); font-size: 15px; margin: 0 0 26px; }
.faixa-janela { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.faixa-trilho { display: flex; gap: 56px; list-style: none; width: max-content; will-change: transform; }
.faixa-trilho li { flex: none; font-size: clamp(16px, 1.7vw, 20px); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; display: flex; align-items: center; gap: 56px; }
.faixa-trilho li::after { content: ""; width: 14px; height: 7px; border-top: 2px solid var(--linha-escura); border-bottom: 2px solid var(--linha-escura); } /* "=" discreto entre as palavras */
.faixa-trilho li:nth-child(even) { color: var(--latao); }

/* ---------- Seções ---------- */
.secao { padding: clamp(80px, 10vw, 128px) 0; position: relative; }
.secao-papel { background: var(--papel); }
.secao-papel-2 { background: var(--papel-2); }
.secao-escura { background: var(--preto); color: var(--papel); }
.secao-grafite { background: var(--grafite-2); color: var(--papel); }
.cabeca { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.cabeca.esq { margin-left: 0; text-align: left; }
.sobre {
  display: inline-block; margin: 0 0 16px; padding: 5px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--papel-3); color: var(--latao-texto);
}
.secao-escura .sobre, .secao-grafite .sobre { background: rgba(165, 135, 79, .14); color: var(--latao-claro); }
h2 { font-size: clamp(30px, 4.2vw, 50px); }
.cabeca p { font-size: 18px; color: var(--tinta-2); }
.secao-escura .cabeca p, .secao-grafite .cabeca p { color: var(--claro-2); }

/* Entregas */
.entregas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cartao {
  position: relative; background: #FBF9F4; border: 1px solid var(--papel-3); border-radius: var(--raio); padding: 28px 24px;
  transition: transform .4s var(--ease), box-shadow .3s ease, border-color .3s linear, background-color .3s linear;
}
.cartao:hover { transform: translateY(-6px); box-shadow: var(--sombra-forte); border-color: var(--latao); }
.cartao h3 { font-size: 20px; margin: 18px 0 10px; }
.cartao p, .cartao li { font-size: 15.5px; color: var(--tinta-2); }
.cartao ul { list-style: none; display: grid; gap: 6px; }
.cartao li::before { content: "="; color: var(--latao-texto); font-weight: 800; margin-right: 8px; }
.cartao-destaque { background: var(--preto); color: var(--papel); border-color: var(--preto); }
.cartao-destaque p { color: var(--claro-2); }
.cartao-destaque .marcador { position: absolute; top: -12px; right: 18px; background: var(--latao); color: var(--preto); font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px; letter-spacing: .03em; }
.cartao .ext-pdf { background: var(--papel-3); }
.cartao .ext-docx { color: var(--tinta); border-color: var(--tinta-2); }
.nota-norma { margin: 36px auto 0; max-width: 820px; text-align: center; font-size: 15px; color: var(--tinta-2); }
.nota-norma a { color: var(--latao-texto); font-weight: 600; }

/* Passos (cartões que entram em salto, como no InícialPro) */
.passos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: passo; }
.passo {
  position: relative; border-radius: var(--raio); padding: 34px 28px 30px;
  background: linear-gradient(180deg, var(--grafite) 0%, var(--grafite-2) 100%); border: 1px solid var(--linha-escura);
  transition: transform .4s var(--ease), border-color .3s linear, box-shadow .3s ease;
}
.passo:hover { transform: translateY(-6px); border-color: var(--latao); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9); }
.passo-num { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--latao); color: var(--preto); font-weight: 800; font-size: 22px; margin-bottom: 20px; }
.passo h3 { font-size: 22px; }
.passo p { color: var(--claro-2); font-size: 15.5px; }
.passo .detalhe { color: var(--latao-claro); font-weight: 600; margin: 0; font-size: 15px; }

/* Anamnese: texto à esquerda, celular à direita */
.dupla { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.lista-igual { list-style: none; display: grid; gap: 14px; margin: 28px 0 32px; }
.lista-igual li { position: relative; padding-left: 36px; color: var(--tinta-2); }
.lista-igual li strong { color: var(--tinta); }
.lista-igual li::before { content: "="; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--preto); color: var(--latao); font-weight: 800; font-size: 15px; line-height: 1; }
.celular { position: relative; width: min(100%, 360px); margin-inline: auto; border-radius: 40px; padding: 12px; background: var(--preto); box-shadow: var(--sombra), 0 0 0 1px var(--linha-escura); }
.celular-tela { border-radius: 30px; background: var(--papel); overflow: hidden; padding: 22px 20px 24px; }
.celular-topo { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--tinta-2); margin-bottom: 10px; }
.progresso { height: 6px; border-radius: 99px; background: var(--papel-3); overflow: hidden; margin-bottom: 20px; }
.progresso i { display: block; height: 100%; width: 37%; background: var(--latao); border-radius: 99px; transform-origin: left; }
.js .visto .progresso i { animation: enche 1.6s var(--ease-saida) .6s both; }
@keyframes enche { from { transform: scaleX(.15); } }
.pergunta { margin-bottom: 16px; }
.pergunta p { font-weight: 700; font-size: 15.5px; margin: 0 0 8px; line-height: 1.35; }
.resposta-campo { border: 1.5px solid var(--papel-3); background: #fff; border-radius: 12px; padding: 10px 14px; font-weight: 700; font-size: 16px; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes span { border: 1.5px solid var(--papel-3); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; }
.opcoes span.marcada { border-color: var(--preto); background: var(--preto); color: var(--papel); }
.celular-rodape { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--papel-3); font-size: 12.5px; color: var(--tinta-2); }

/* Carrossel dos blocos da anamnese (o carrossel de depoimentos do InícialPro, com outro conteúdo) */
.carrossel { margin-top: 72px; }
.carrossel-topo { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.carrossel-topo h3 { font-size: 24px; margin: 0; }
.carrossel-botoes { display: flex; gap: 10px; }
.carrossel-botoes button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--preto); background: transparent; color: var(--preto); cursor: pointer; display: grid; place-items: center; transition: background-color .3s linear, color .3s linear; }
.carrossel-botoes button:hover { background: var(--preto); color: var(--latao); }
.carrossel-botoes svg { width: 16px; height: 16px; }
.carrossel-janela { overflow: hidden; margin: -24px 0; padding: 24px 0; touch-action: pan-y; }
.carrossel-trilho { display: flex; gap: 22px; list-style: none; transition: transform .5s var(--ease); will-change: transform; cursor: grab; }
.carrossel-trilho.arrastando { transition: none; cursor: grabbing; }
.bloco { flex: 0 0 calc((100% - 44px) / 3); background: #FBF9F4; border: 1px solid var(--papel-3); border-radius: var(--raio); padding: 26px 24px; transition: box-shadow .3s ease, border-color .3s linear; user-select: none; }
.bloco:hover { box-shadow: var(--sombra-forte); border-color: var(--latao); }
.bloco-num { font-size: 13px; font-weight: 800; color: var(--latao-texto); letter-spacing: .06em; text-transform: uppercase; }
.bloco h4 { font-size: 20px; margin: 8px 0 12px; letter-spacing: -.01em; }
.bloco ul { list-style: none; display: grid; gap: 8px; }
.bloco li { font-size: 15px; color: var(--tinta-2); padding-left: 18px; position: relative; }
.bloco li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--latao); box-shadow: 0 4px 0 var(--latao); }
.pontos { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.pontos button { width: 10px; height: 10px; border-radius: 99px; border: 0; padding: 0; background: var(--papel-3); cursor: pointer; transition: width .3s var(--ease), background-color .3s linear; }
.pontos button[aria-current="true"] { width: 30px; background: var(--latao); }

/* Pedidos */
.pedidos { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; }
.pedidos-bloco { border-radius: var(--raio); padding: 30px 30px 26px; }
.pedidos-sim { background: #FBF9F4; border: 1px solid var(--papel-3); }
.pedidos-nao { background: var(--papel-2); border: 1px dashed var(--tinta-2); }
.pedidos-bloco h3 { font-size: 20px; margin-bottom: 16px; }
.pedidos-bloco ul { list-style: none; display: grid; gap: 8px 22px; }
.pedidos-sim ul { grid-template-columns: 1fr 1fr; }
.pedidos-bloco li { font-size: 15.5px; position: relative; padding-left: 26px; }
.pedidos-sim li::before { content: "="; position: absolute; left: 0; font-weight: 800; color: var(--latao-texto); }
.pedidos-nao li::before { content: "·"; position: absolute; left: 6px; font-weight: 800; color: var(--tinta-2); }
.pedidos-nao p { margin: 18px 0 0; font-size: 15px; color: var(--tinta-2); }

/* Por que liquidar */
.fatos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.fato { border-radius: var(--raio); padding: 28px 28px 22px; background: var(--grafite-2); border: 1px solid var(--linha-escura); transition: border-color .3s linear, transform .4s var(--ease); }
.fato:hover { border-color: var(--latao); transform: translateY(-4px); }
.fato h3 { font-size: 21px; }
.fato p { color: var(--claro-2); font-size: 15.5px; }
.fonte { font-size: 13.5px !important; margin: 0; }
.fonte a { color: var(--latao-claro); }
.ressalva-caixa { margin-top: 26px; border-radius: var(--raio); padding: 30px; background: linear-gradient(120deg, rgba(165, 135, 79, .2), rgba(165, 135, 79, .06)); border: 1px solid rgba(165, 135, 79, .45); display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
.ressalva-caixa .icone-igual { width: 56px; height: 56px; border-radius: 14px; background: var(--latao); display: grid; place-items: center; }
.ressalva-caixa .icone-igual i { display: block; width: 26px; height: 6px; background: var(--preto); box-shadow: 0 11px 0 var(--preto); margin-top: -11px; }
.ressalva-caixa h3 { font-size: 22px; }
.ressalva-caixa p { color: var(--claro-2); font-size: 15.5px; }
.ressalva-caixa a { color: var(--latao-claro); }

/* Preços */
.ciclo-radio { position: absolute; opacity: 0; pointer-events: none; }
.ciclo { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: max-content; margin: 0 auto 44px; padding: 5px; border-radius: 999px; background: var(--papel-3); isolation: isolate; }
.ciclo::before { content: ""; position: absolute; z-index: -1; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--preto); transition: transform .45s var(--ease); }
.ciclo label { padding: 10px 22px; font-weight: 700; font-size: 15px; cursor: pointer; text-align: center; border-radius: 999px; transition: color .3s linear; white-space: nowrap; }
.ciclo label small { font-size: 12px; font-weight: 800; color: var(--preto); background: var(--latao); padding: 2px 8px; border-radius: 99px; margin-left: 6px; }
#ciclo-mensal:checked ~ .ciclo label[for="ciclo-mensal"], #ciclo-anual:checked ~ .ciclo label[for="ciclo-anual"] { color: var(--papel); }
#ciclo-anual:checked ~ .ciclo::before { transform: translateX(100%); }
#ciclo-mensal:focus-visible ~ .ciclo label[for="ciclo-mensal"], #ciclo-anual:focus-visible ~ .ciclo label[for="ciclo-anual"] { outline: 3px solid var(--latao); outline-offset: 2px; }
.planos { display: grid; grid-template-columns: 1fr 1.08fr .92fr; gap: 22px; align-items: stretch; }
.plano { position: relative; display: flex; flex-direction: column; border-radius: var(--raio); padding: 32px 28px 28px; background: #FBF9F4; border: 1px solid var(--papel-3); transition: transform .4s var(--ease), box-shadow .3s ease, border-color .3s linear; }
.plano:hover { transform: translateY(-6px); box-shadow: var(--sombra-forte); border-color: var(--latao); }
.plano h3 { font-size: 24px; margin-bottom: 6px; }
.plano .para { font-size: 15px; color: var(--tinta-2); min-height: 48px; }
.preco { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 4px; font-weight: 800; letter-spacing: -.03em; }
.preco .moeda { font-size: 20px; font-weight: 700; }
.preco .valor { font-size: 52px; line-height: 1; }
.preco .periodo { font-size: 16px; font-weight: 600; color: var(--tinta-2); letter-spacing: 0; }
.por-geracao { font-weight: 700; margin: 0 0 18px; font-size: 15.5px; }
.por-geracao span { display: block; font-weight: 500; font-size: 14px; color: var(--tinta-2); }
.plano ul { list-style: none; display: grid; gap: 9px; margin: 6px 0 26px; padding-top: 18px; border-top: 1px solid var(--papel-3); }
.plano li { font-size: 15px; padding-left: 26px; position: relative; }
.plano li::before { content: "="; position: absolute; left: 0; font-weight: 800; color: var(--latao-texto); }
.plano .btn { margin-top: auto; }
.plano-destaque { background: var(--preto); color: var(--papel); border-color: var(--preto); box-shadow: 0 30px 80px -30px rgba(14, 13, 11, .7); }
.plano-destaque:hover { border-color: var(--latao); box-shadow: 0 34px 90px -30px rgba(14, 13, 11, .8); }
.plano-destaque .para, .plano-destaque .preco .periodo, .plano-destaque .por-geracao span { color: var(--claro-2); }
.plano-destaque ul { border-top-color: var(--linha-escura); }
.plano-destaque li::before { color: var(--latao); }
.plano-destaque .preco .valor { color: var(--latao); }
.etiqueta { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--latao); color: var(--preto); font-weight: 800; font-size: 13px; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.plano-avulso { background: transparent; border-style: dashed; }
.plano-avulso .preco .valor { font-size: 40px; }
.anual { display: none; }
#ciclo-anual:checked ~ .planos .anual { display: block; animation: troca .45s var(--ease) both; }
#ciclo-anual:checked ~ .planos .mensal { display: none; }
#ciclo-mensal:checked ~ .planos .mensal { animation: troca .45s var(--ease) both; }
@keyframes troca { from { opacity: 0; transform: translateY(8px); } }
.so-mensal-nota { display: none; font-size: 13.5px; color: var(--tinta-2); margin: -8px 0 16px; }
#ciclo-anual:checked ~ .planos .so-mensal-nota { display: block; }
.teste-faixa { margin: 34px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding: 24px 28px; border-radius: var(--raio); background: var(--papel-2); border: 1px solid var(--papel-3); }
.teste-faixa p { margin: 0; font-size: 17px; max-width: 640px; }
.teste-faixa strong { font-weight: 800; }
.precos-notas { margin: 22px 0 0; font-size: 14px; color: var(--tinta-2); text-align: center; }

/* Dúvidas: título à esquerda, sanfona à direita (layout do InícialPro) */
.duvidas-grade { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.duvidas-grade .cabeca { position: sticky; top: 110px; margin: 0; }
.faq { display: grid; gap: 12px; }
.faq details { border-radius: 14px; background: #FBF9F4; border: 1px solid var(--papel-3); transition: border-color .3s linear, box-shadow .3s ease; }
.faq details[open] { border-color: var(--latao); box-shadow: var(--sombra-forte); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 22px; font-weight: 700; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mais { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--papel-3); transition: background-color .3s linear, transform .35s var(--ease); }
.faq summary .mais::before, .faq summary .mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--preto); transform: translate(-50%, -50%); transition: transform .35s var(--ease), background-color .3s linear; }
.faq summary .mais::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary .mais { background: var(--preto); transform: rotate(180deg); }
.faq details[open] summary .mais::before, .faq details[open] summary .mais::after { background: var(--latao); }
.faq details[open] summary .mais::after { transform: translate(-50%, -50%) rotate(0deg); }
.resposta { padding: 0 22px 20px; color: var(--tinta-2); font-size: 16px; overflow: hidden; }
.resposta ul { padding-left: 20px; margin-bottom: 12px; display: grid; gap: 6px; }
.resposta a { color: var(--latao-texto); font-weight: 600; }

/* Fundador (bloco PENDENTE, comentado no HTML) */
.fundador { text-align: center; max-width: 820px; margin: 0 auto; }
.fundador blockquote { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
#fundador { padding: clamp(56px, 7vw, 92px) 0; border-top: 1px solid var(--linha-escura); }
#fundador blockquote { max-width: 760px; margin-inline: auto; }

/* CTA final: caixa de latão com pontos (o bloco verde com mapa do InícialPro) */
.final { padding: 0 0 clamp(70px, 9vw, 110px); background: var(--papel); }
.final-caixa {
  position: relative; overflow: hidden; isolation: isolate; text-align: center; border-radius: 28px; padding: clamp(56px, 8vw, 96px) 24px;
  background: var(--latao); color: var(--preto);
}
.final-caixa::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(14, 13, 11, .22) 1.2px, transparent 1.4px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, #000 80%); mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, #000 80%); }
.final-caixa .sobre { background: var(--preto); color: var(--latao-claro); }
.final-caixa h2 { max-width: 820px; margin-inline: auto; }
.final-caixa p { max-width: 620px; margin: 0 auto 30px; font-size: 18px; color: var(--preto); font-weight: 600; }

/* Rodapé */
.rodape { background: var(--preto); color: var(--claro-2); padding: 64px 0 34px; font-size: 14.5px; }
.rodape-grade { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--linha-escura); }
.rodape .marca img { width: 168px; }
.rodape-frase { margin: 18px 0 0; color: var(--papel); font-weight: 600; }
.rodape nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 40px; justify-content: end; align-content: start; }
.rodape nav a { text-decoration: none; transition: color .3s linear; }
.rodape nav a:hover { color: var(--latao-claro); }
.rodape-base { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding-top: 26px; }
.rodape-base small { display: block; font-size: 13px; line-height: 1.6; margin-bottom: 6px; }
.aviso-vinculo { color: var(--papel); }
.topo-volta { flex: none; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; color: var(--papel); }
.topo-volta .seta { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--latao); color: var(--preto); transition: transform .3s var(--ease), background-color .3s linear; }
.topo-volta .seta svg { width: 14px; height: 14px; transform: rotate(-90deg); }
.topo-volta:hover .seta { transform: translateY(-4px); background: var(--papel); }

/* Barra fixa de CTA no celular */
.cta-fixo { display: none; }

/* Aviso de cookies (só aparece se o GA4 for ligado) */
.consent { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-inline: auto; background: var(--grafite); color: var(--papel); border: 1px solid var(--linha-escura); border-radius: 16px; padding: 18px 20px; box-shadow: var(--sombra); font-size: 14.5px; }
.consent[hidden], .consent-prefs[hidden] { display: none; }
.consent a { color: var(--latao-claro); }
.consent-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.consent .btn { min-height: 40px; min-width: 112px; font-size: 14px; padding: 8px 18px; }
.consent-prefs { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha-escura); }
.consent-prefs label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.consent-prefs input { margin-top: 3px; accent-color: var(--latao); }
.consent-prefs .btn { justify-self: start; }
.consent-link { background: none; border: 0; padding: 4px 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.consent-link:hover { color: var(--latao-claro); }
.rodape-base .consent-link { display: block; margin-top: 10px; font-size: 13px; }

/* Páginas legais */
.legal { padding: 140px 0 90px; background: var(--papel); }
.legal .container { max-width: 820px; }
.legal h1 { font-size: clamp(32px, 4.4vw, 46px); }
.legal h2 { font-size: 22px; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--tinta-2); }
.legal ul { padding-left: 22px; margin-bottom: 1em; display: grid; gap: 6px; }
.legal .meta { font-size: 14.5px; color: var(--tinta-2); }
.legal .rascunho { border: 1px dashed var(--latao-escuro); background: var(--papel-2); border-radius: 12px; padding: 14px 16px; font-size: 15px; }
.legal a { color: var(--latao-texto); font-weight: 600; }
.legal .citacao { border-left: 4px solid var(--latao); padding: 6px 0 6px 18px; margin: 0 0 1em; font-weight: 600; color: var(--tinta); }
.pagina-simples .topo { background: rgba(14, 13, 11, .96); }

/* ---------- Entradas ao rolar (fadeInUp, fadeInLeft/Right, zoomIn, bounceIn do InícialPro) ----------
   Só escondem se o JS estiver ativo (classe .js posta por js/cedo.js); sem JS tudo aparece. */
.js [data-anima] { opacity: 0; }
.js [data-anima].visto { opacity: 1; animation-duration: var(--dur-entrada); animation-timing-function: var(--ease); animation-fill-mode: both; animation-delay: var(--atraso, 0ms); }
.js [data-anima="sobe"].visto { animation-name: sobe; }
.js [data-anima="desce"].visto { animation-name: desce; }
.js [data-anima="esquerda"].visto { animation-name: daEsquerda; }
.js [data-anima="direita"].visto { animation-name: daDireita; }
.js [data-anima="zoom"].visto { animation-name: zoom; }
.js [data-anima="salto"].visto { animation-name: salto; animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
.js [data-anima="rapido"].visto { animation-name: sobe; animation-duration: .75s; }
@keyframes sobe { from { opacity: 0; transform: translate3d(0, min(100%, 110px), 0); } to { opacity: 1; transform: none; } }
@keyframes desce { from { opacity: 0; transform: translate3d(0, max(-100%, -110px), 0); } to { opacity: 1; transform: none; } }
@keyframes daEsquerda { from { opacity: 0; transform: translate3d(max(-100%, -180px), 0, 0); } to { opacity: 1; transform: none; } }
@keyframes daDireita { from { opacity: 0; transform: translate3d(min(100%, 180px), 0, 0); } to { opacity: 1; transform: none; } }
@keyframes zoom { 0% { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes salto {
  0% { opacity: 0; transform: scale3d(.3, .3, .3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(.9, .9, .9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(.97, .97, .97); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .topo nav { display: none; }
  .entregas { grid-template-columns: repeat(2, 1fr); }
  .bloco { flex-basis: calc((100% - 22px) / 2); }
}
@media (max-width: 860px) {
  .janela-corpo { grid-template-columns: 1fr; }
  .janela-pedidos { border-right: 0; border-bottom: 1px solid var(--linha-escura); }
  .passos, .fatos, .dupla, .pedidos, .duvidas-grade, .rodape-grade { grid-template-columns: 1fr; }
  .planos { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .plano-destaque { order: -1; }   /* no celular o plano em destaque vem primeiro; o avulso segue por último */
  .duvidas-grade .cabeca { position: static; }
  .rodape nav { justify-content: start; }
  .rodape-base { flex-direction: column; align-items: flex-start; }
  .celular { margin-top: 10px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { width: min(100% - 32px, var(--largura)); }
  .topo { padding: 12px 0; }
  .marca img, .rodape .marca img { width: 140px; }   /* nunca abaixo de 120 px (regra da marca) */
  .entrar { display: none; }
  .topo .btn { font-size: 14px; padding: 7px 8px 7px 14px; }
  .hero { padding-top: 116px; }
  .hero-cta .btn { width: 100%; }
  .orbita { width: 560px; height: 560px; top: -300px; }
  .orbita-esq { left: -420px; }
  .orbita-dir { right: -420px; }
  .palco { margin-top: 44px; padding-bottom: 60px; }
  .janela-pedidos, .janela-arquivos { padding: 18px 16px 14px; }
  .janela table { font-size: 14px; }
  .entregas { grid-template-columns: 1fr; }
  .bloco { flex-basis: 86%; }
  .pedidos-sim ul { grid-template-columns: 1fr; }
  .ressalva-caixa { grid-template-columns: 1fr; padding: 24px; }
  .carrossel-topo { flex-direction: column; align-items: flex-start; }
  .teste-faixa .btn { width: 100%; }
  .ciclo { max-width: 100%; }
  .ciclo label { padding: 10px 14px; font-size: 14.5px; }
  .ciclo label small { margin-left: 4px; padding: 2px 6px; }
  .janela-topo b { font-size: 13px; }
  .cta-fixo {
    display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(14, 13, 11, .96); color: var(--papel); border-top: 1px solid var(--linha-escura);
    transform: translateY(110%); transition: transform .35s var(--ease);
  }
  .cta-fixo.visivel { transform: none; }
  .cta-fixo span { font-size: 13.5px; line-height: 1.3; font-weight: 600; }
  .cta-fixo .btn { min-height: 44px; font-size: 15px; padding: 8px 18px; }
  .rodape { padding-bottom: 96px; }
}

/* ---------- Movimento reduzido: nada gira, nada desliza, tudo aparece ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
  .js [data-anima] { opacity: 1; }
  .orbita .gira { animation: none !important; }
}
.nq { white-space: nowrap; }