/* ── Navegação ── */
html { --folga-ancora: var(--s4); scroll-padding-top: calc(var(--nav-h) + var(--folga-ancora)); }

/* Absolute sem `top`: fica logo abaixo da faixa, sem ocupar espaço. O engine.js
   o fixa quando a faixa sai da tela, onde as duas posições coincidem. */
#nav {
  position: absolute; left:0; right:0; z-index:100;
  padding: var(--s4) 0; background: transparent;
  transition: background-color .3s ease, padding .3s ease;
}
#nav.fixo {
  position: fixed; top:0;
  background: var(--areia);
  border-bottom: 1px solid var(--fio);
  padding: var(--s3) 0;
}
/* #nav vence .escuro: o fundo só escurece com o nav fixo. */
#nav.fixo.escuro { background: var(--escuro); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; min-height:var(--s7); }

.nav-logo { font-family: var(--ff-display); font-weight: 700; font-size: var(--t-sub); letter-spacing: -.02em; color: var(--tinta); }

.nav-links { display:flex; align-items:center; gap:var(--s6); margin-left:auto; }
.nav-links a { font-size:var(--t-nota); font-weight:500; color:var(--tinta-2); padding-block:var(--s2); border-bottom:1px solid transparent; transition:var(--transition); }
.nav-links a:hover { color:var(--tinta); }
.nav-links a[aria-current] { color:var(--tinta); border-bottom-color:var(--sienna); }

.nav-cta { font-size:var(--t-nota); min-height:44px; padding:0 var(--s4); margin-left:var(--s6); }

.menu-abrir {
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; background:none; border:none; cursor:pointer;
  width:var(--s7); height:var(--s7); padding:0; margin-right:calc(var(--s3) * -1);
}
.menu-abrir span { display:block; width:24px; height:1.5px; background:var(--tinta); }

.menu-movel {
  width:100%; height:100%; max-width:none; max-height:none;
  margin:0; border:0; padding:0; background:var(--areia);
}
.menu-movel[open] {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s6);
}
body:has(.menu-movel[open]) { overflow:hidden; }
.menu-link { font-family:var(--ff-display); font-weight:700; font-size:var(--t-sec); line-height:var(--lh-titulo); color:var(--tinta); transition:color .2s; }
.menu-link:hover { color:var(--sienna); }
.menu-fechar {
  position:absolute; top:var(--s4); right:var(--s4); width:var(--s7); height:var(--s7);
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--tinta); cursor:pointer;
}
.menu-fechar svg { width:24px; height:24px; }

/* ── Grade de margem: título nas colunas 1–4, conteúdo nas 5–12 ── */
section { padding: var(--r-secao) 0; }

.grade, .hero-grade {
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--s6);
}
.grade { row-gap:var(--s6); }
.fio   { border-top:1px solid var(--fio); padding-top:var(--s5); }
.margem { grid-column:1 / 5; align-self:start; }
.corpo  { grid-column:5 / -1; }

.margem p { margin-top:var(--s4); max-width:32ch; }
.margem .btn-ghost { margin-top:var(--s5); }

/* ── Hero ── */
#hero { padding: calc(var(--nav-h) + var(--s8)) 0 var(--s6); }
.hero-texto { grid-column:1 / 8; align-self:center; }

.hero-id { font-size:var(--t-nota); line-height:var(--lh-meio); color:var(--tinta-2); margin-bottom:var(--s5); }
.hero-id strong { display:block; font-size:var(--t-base); font-weight:600; color:var(--tinta); }

.hero-titulo {
  font-family: var(--ff-display); font-weight: 700; font-size: var(--t-hero);
  line-height: var(--lh-justo); letter-spacing: -.03em;
  color: var(--tinta); text-wrap: balance; max-width: 18ch;
}
.hero-apoio { color:var(--tinta-2); max-width:44ch; margin:var(--s5) 0 var(--s6); }

.hero-acoes { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s3) var(--s6); }

.hero-foto { grid-column:8 / -1; aspect-ratio:4 / 5; overflow:hidden; background:var(--folha); }
.hero-foto img { width:100%; height:100%; object-fit:cover; }

/* ── Sobre ── */
#sobre { padding-block: var(--s6) var(--s8); }
.sobre > * { max-width:40rem; }
.sobre > * + * { margin-top:var(--s4); }
.sobre .lide { margin-top:var(--s5); font-family:var(--ff-display); font-weight:500; font-size:var(--t-sub); line-height:var(--lh-meio); color:var(--tinta); }

/* ── Atendimento ── */
.ficha { display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s6); }
.ficha > div { border-top:1px solid var(--fio); padding:var(--s4) 0 var(--s5); }
.ficha > div:nth-child(-n + 2) { border-top:0; padding-top:0; }
.ficha dt { font-weight:600; color:var(--tinta); margin-bottom:var(--s1); }

/* ── Valores ── */
/* Meio pixel sob a borda do nav: sem fresta clara com alturas fracionárias. */
#planos { scroll-margin-top: calc(.5px - var(--folga-ancora)); }

.plano {
  display:grid; grid-template-columns:minmax(0, 1fr) 20rem; column-gap:var(--s6);
  grid-template-areas: "nome conta" "desc conta" "itens conta";
  grid-template-rows:auto auto 1fr;
  padding:var(--s6) 0; border-top:1px solid var(--fio);
}
.plano:first-child { border-top:0; padding-top:0; }
.plano-nome, .plano-preco .valor { font-family:var(--ff-display); font-weight:700; font-size:var(--t-sub); line-height:var(--lh-titulo); color:var(--tinta); }
.plano-nome { grid-area:nome; }
.plano-desc { grid-area:desc; margin-top:var(--s1); max-width:44ch; }
.plano-items { grid-area:itens; margin-top:var(--s3); }

.plano-conta { grid-area:conta; display:flex; flex-direction:column; align-items:stretch; }
.plano-preco { margin-bottom:var(--s3); }
.plano-preco .per { font-size:var(--t-nota); }
.plano-conta .nota { margin-top:var(--s3); }

/* O plano em destaque ganha moldura sem mudar a geometria: os botões continuam alinhados. */
.plano-destaque { outline:1px solid var(--sienna); outline-offset:calc(var(--s4) * -1); padding-inline:var(--s5); margin-inline:calc(var(--s5) * -1); }
.plano-selo { font-size:var(--t-nota); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--sienna); margin-bottom:var(--s2); }

/* ── Dúvidas ── */
.faq-item { border-bottom:1px solid var(--fio); }
.faq-item:first-child .faq-q { padding-top:0; }

.faq-q {
  list-style:none;
  padding: var(--s4) 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:var(--s4);
  font-weight:500; color:var(--tinta); transition:color .2s;
}
.faq-q:hover { color:var(--sienna); }

.faq-ico {
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  color:var(--tinta-2); flex-shrink:0; transition:var(--transition), transform .2s ease;
}
.faq-ico svg { width:18px; height:18px; }
.faq-q::-webkit-details-marker { display:none; }
.faq-item[open] .faq-ico { color:var(--sienna); transform:rotate(180deg); }

.faq-a { padding-bottom: var(--s5); max-width:62ch; }

@supports (interpolate-size: allow-keywords) {
  .faq-list { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size:0; overflow:hidden;
    transition: block-size .35s ease, content-visibility .35s allow-discrete;
  }
  .faq-item[open]::details-content { block-size:auto; }
}

/* ── Chamada final ── */
#cta { background:var(--folha); }
.cta-inner p { margin:var(--s4) 0 var(--s6); max-width:56ch; }

/* ── Rodapé ── */
footer { padding: var(--s8) 0 var(--s6); }

.footer-logo { font-family:var(--ff-display); font-weight:700; font-size:var(--t-sub); color:var(--tinta); margin-bottom:var(--s2); }
footer .margem .nota { max-width:36ch; }

.footer-col h3 { font-size:var(--t-nota); font-weight:600; color:var(--tinta); margin-bottom:var(--s1); }
/* Cada linha tem 44px, o alvo de toque; por isso não há gap entre elas. */
.footer-col li { min-height:44px; display:flex; align-items:center; font-size:var(--t-nota); }
.footer-col a { min-height:44px; display:inline-flex; align-items:center; color:var(--tinta-2); transition:color .2s; }
.footer-col a:hover { color:var(--sienna); }

.footer-bottom a { text-decoration:underline; text-underline-offset:.2em; }
.footer-bottom a:hover { color:var(--sienna); }

.footer-bottom { padding-top:var(--s4); font-size:var(--t-nota); }

/* ── Responsivo ── */
@media (max-width:960px) {
  .nav-links { display:none; }
  .nav-cta { margin-left:auto; }
  .menu-abrir { display:flex; margin-left:var(--s3); }

  .grade { grid-template-columns:minmax(0, 1fr); }
  .margem, .corpo { grid-column:1; }
  .margem p { max-width:56ch; }
}
@media (max-width:600px) {
  section { --r-secao: var(--s7); }
  #hero { padding: calc(var(--nav-h) + var(--s6)) 0 var(--s5); }
  .hero-grade { grid-template-columns:minmax(0, 1fr); row-gap:var(--s6); }
  .hero-texto { grid-column:1; }
  .hero-id { margin-bottom:var(--s4); }
  .hero-apoio { margin:var(--s4) 0 var(--s5); }
  /* No celular a foto vira uma faixa baixa depois do CTA, que continua na primeira tela. */
  .hero-foto { grid-column:1; aspect-ratio:5 / 2; }
  .hero-foto img { object-position:50% 25%; }

  .ficha { grid-template-columns:1fr; }
  .ficha > div:nth-child(2) { border-top:1px solid var(--fio); padding-top:var(--s4); }

  .plano { grid-template-columns:1fr; grid-template-areas:"nome" "desc" "itens" "conta"; grid-template-rows:auto; }
  .plano-conta { margin-top:var(--s5); }
  .plano-conta > a { padding-inline:var(--s3); }
}