/* Fontes da marca servidas pelo próprio site (pasta fontes/, licença SIL Open Font, ver OFL-*.txt): a visita não
   passa pelo Google. São os arquivos "latin" do Google Fonts (cobrem o português); um arquivo variável por família. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fontes/fraunces-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fontes/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Layout: uma coluna no celular; no computador, ficha à esquerda e resultado fixo à direita. Páginas de texto em coluna de leitura. */
:root {
  --bg: #FFF8F0;        /* glacê */
  --surface: #FFFFFF;
  --ink: #3B2418;       /* cacau */
  --muted: #76604F;
  --line: #E8D7C5;
  --accent: #2E7D5B;    /* pistache */
  --accent-ink: #FFFFFF;
  --rosa: #F4B6C2;
  --alerta: #B3261E;
  --bubble: #F4E8DB;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1C130F; --surface: #261A15; --ink: #F5E9DC; --muted: #C2AC9B; --line: #3E2D25;
    --accent: #6CC196; --accent-ink: #0F241A; --rosa: #8C4A58; --alerta: #FF8A80; --bubble: #30221C;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1C130F; --surface: #261A15; --ink: #F5E9DC; --muted: #C2AC9B; --line: #3E2D25;
  --accent: #6CC196; --accent-ink: #0F241A; --rosa: #8C4A58; --alerta: #FF8A80; --bubble: #30221C;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; margin: 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0;
}
.wrap { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 24px 48px; }
.wrap > *, .secao > *, .figuras > *, .tres > *, .planos > * { min-width: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; text-wrap: balance; margin: 0; line-height: 1.12; }
p { margin: 0; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Topo e navegação */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.marca { font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.marca span { color: var(--accent); }
.nav { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 0.92rem; }
.nav a { color: var(--ink); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--accent); }

.abertura { display: grid; gap: 12px; max-width: 42rem; }
.abertura h1 { font-size: clamp(2rem, 6vw, 3.1rem); }
.abertura p { font-size: 1.1rem; color: var(--muted); max-width: 36rem; }
.selo { display: inline-flex; gap: 8px; align-items: center; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

/* Ferramenta (calculadora) */
.ferramenta { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 880px) { .ferramenta { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .lado { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); } }
.ficha { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px; display: grid; gap: 16px; min-width: 0; }
.ficha-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ficha h2 { font-size: 1.45rem; }
.rende { font-size: 0.85rem; color: var(--muted); }
.grupo-titulo { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 4px; }
.itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.item:last-child { border-bottom: 0; }
.item-nome { min-width: 0; }
.item-nome strong { font-weight: 600; }
.item-nome small { display: block; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.preco { display: flex; align-items: center; gap: 6px; }
.preco span { color: var(--muted); font-size: 0.85rem; }
input[type="number"], input[type="text"] {
  font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; width: 6.2rem; text-align: right; font-variant-numeric: tabular-nums;
}
input[type="text"] { text-align: left; width: 100%; }
input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.ajustes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ajustes label { display: grid; gap: 4px; font-size: 0.85rem; color: var(--muted); }
.ajustes input { width: 100%; }
details { font-size: 0.9rem; color: var(--muted); }
summary { cursor: pointer; color: var(--ink); font-weight: 500; }
details p { margin-top: 8px; }
.lado { display: grid; gap: 16px; min-width: 0; }
.resultado { background: var(--ink); color: var(--bg); border-radius: var(--r); padding: 22px 20px; display: grid; gap: 14px; }
.resultado .grupo-titulo { color: color-mix(in srgb, var(--bg) 70%, var(--ink)); }
.custo { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.precos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.precos div { display: grid; gap: 2px; }
.precos small { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 70%, var(--ink)); }
.valor { font-family: var(--display); font-size: clamp(1.9rem, 5vw, 2.4rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.valor.sugerido { color: var(--rosa); }
.aviso { color: var(--rosa); font-size: 0.9rem; }
.orcamento { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: grid; gap: 12px; }
.orcamento h3 { font-size: 1.15rem; }
.campos { display: grid; grid-template-columns: minmax(0, 1fr) 6.2rem; gap: 10px; }
.campos label { display: grid; gap: 4px; font-size: 0.85rem; color: var(--muted); min-width: 0; }
.mensagem { background: var(--bubble); border-radius: 4px 14px 14px 14px; padding: 14px 16px; white-space: pre-wrap; font-size: 0.95rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { font: inherit; font-weight: 600; border-radius: 999px; padding: 11px 18px; border: 1px solid var(--accent); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.btn-cheio { background: var(--accent); color: var(--accent-ink); }
.btn-borda { background: transparent; color: var(--accent); }
.feito { font-size: 0.85rem; color: var(--accent); min-height: 1.3em; }
.outras { font-size: 0.95rem; color: var(--muted); }

/* Chamada para o kit (nas calculadoras) */
.kit { border-top: 1px solid var(--line); padding-top: 32px; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 880px) { .kit { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.kit h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.kit ul, .texto ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 8px; }
.oferta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: grid; gap: 10px; }
.oferta .preco-kit { font-family: var(--display); font-size: 2.4rem; font-weight: 700; }
.oferta small { color: var(--muted); }
.nota-previa { font-size: 0.85rem; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; }

/* Página de vendas */
.secao { display: grid; gap: 16px; }
.secao > h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
.texto { display: grid; gap: 12px; max-width: 42rem; }
.tres { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tres > div { display: grid; gap: 6px; align-content: start; }
.tres strong { font-family: var(--display); font-size: 1.15rem; }
.tres p { color: var(--muted); }
.passos { list-style: none; counter-reset: passo; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.passos li { counter-increment: passo; display: grid; gap: 6px; align-content: start; padding-top: 12px; border-top: 2px solid var(--accent); }
.passos li::before { content: "Passo " counter(passo); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.receitas { columns: 2 220px; column-gap: 24px; margin: 0; padding-left: 1.1rem; }
.receitas li { break-inside: avoid; padding: 2px 0; }
.receitas small { color: var(--muted); }
.figura { margin: 0; display: grid; gap: 8px; }
.figura img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; }
.figura img.estreita { max-width: 320px; }
.kit-texto { display: grid; gap: 14px; min-width: 0; }
.figura figcaption { font-size: 0.85rem; color: var(--muted); }
.figuras { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) { .figuras { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.planos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.plano { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 20px; display: grid; gap: 12px; }
.plano.destaque { border: 2px solid var(--accent); }
.plano h3 { font-size: 1.25rem; }
.plano .preco-kit { font-family: var(--display); font-size: 2.6rem; font-weight: 700; line-height: 1; }
.plano ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 6px; }
.plano .fora { color: var(--muted); text-decoration: line-through; }
.bonus { background: var(--bubble); border-radius: var(--r); padding: 16px 18px; display: grid; gap: 6px; }
.resumo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: grid; gap: 0; }
.resumo div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.resumo div:last-child { border-bottom: 0; }
.resumo dt { font-weight: 600; }
.resumo dd { margin: 0; color: var(--muted); }
@media (max-width: 520px) { .resumo div { grid-template-columns: 1fr; } }
.faq { display: grid; gap: 4px; max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 1rem; }
.faq summary { font-weight: 600; }
.faq details p { color: var(--muted); }
.versao { border-left: 3px solid var(--accent); padding-left: 16px; display: grid; gap: 6px; }
.versao h2 { font-size: 1.4rem; }

footer { border-top: 1px solid var(--line); padding-top: 20px; font-size: 0.85rem; color: var(--muted); display: grid; gap: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Lista de espera */
.lista { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 20px; }
.lista-lede { color: var(--muted); max-width: 40rem; }
.lista-form { display: grid; gap: 14px; max-width: 30rem; }
.lista-form label { display: grid; gap: 4px; font-size: 0.9rem; color: var(--muted); }
.lista-form label small { font-size: 0.8rem; }
.lista-form input[type="email"], .lista-form input[type="text"] { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.lista-form .aceite { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); }
.lista-form .aceite input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.lista-form .armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lista-form .btn { justify-self: start; }
.lista-nota { font-size: 0.85rem; color: var(--muted); }