/* ============================================================
   PÁGINA PÚBLICA (raiz) · complementos ao app.css
   Só o que a apresentação não tinha: hero com botões, faixa de
   fatos, preços, como chegar e perguntas. Tokens do app.css.
   ============================================================ */

/* hero: título em três linhas mais curto que o da apresentação, com CTA */
.hero h1{font-size:clamp(2.1rem,5.6vw,5rem)}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:2.2rem}
html.pre .hero-cta{opacity:0}
.hero-cta{transition:opacity .6s ease .9s}

/* fatos */
.fatos{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.fatos-lista{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.4rem 2rem}
.fatos-lista li{display:flex;flex-direction:column;gap:.15rem}
.fatos-lista b{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05;color:var(--brass-lt)}
.fatos-lista span{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-mute)}

/* preços */
.precos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem}
.preco-card{border:1px solid var(--line);border-radius:4px;background:var(--ink-2);padding:1.6rem 1.5rem}
.preco-tit{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.02em;text-transform:uppercase;line-height:1.15;padding-top:.15em}
.preco-sub{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-mute);margin:.4rem 0 1.2rem}
.preco-card dl{display:flex;flex-direction:column}
.preco-card dl div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-top:1px solid var(--line-soft);font-size:17px}
.preco-card dt{color:var(--bone-dim)}
.preco-card dd{font-family:var(--font-serif);font-weight:600;color:var(--brass-lt);white-space:nowrap}
.preco-ex{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line-soft);font-size:16px;color:var(--bone-dim)}
.preco-ex b{color:var(--bone)}
.preco-nota{margin-top:1.4rem;font-size:15px;color:var(--bone-mute);max-width:70ch}

/* como chegar */
.chegar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.4rem;margin-top:2.6rem;align-items:start}
.chegar-lista{list-style:none;display:flex;flex-direction:column}
.chegar-lista li{display:grid;grid-template-columns:130px 1fr;gap:1rem;padding:.9rem 0;border-top:1px solid var(--line-soft);font-size:17px}
.chegar-lista li:last-child{border-bottom:1px solid var(--line-soft)}
.chegar-lista b{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);padding-top:.25em}
.chegar-lista span{color:var(--bone-dim)}
@media(max-width:520px){.chegar-lista li{grid-template-columns:1fr;gap:.3rem}}

/* perguntas frequentes */
.faq{margin-top:2.6rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.2rem 0;font-family:var(--font-serif);font-size:clamp(1.15rem,1.8vw,1.4rem);font-weight:600;color:var(--bone)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--font-mono);color:var(--brass);font-size:1.4rem;flex-shrink:0;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 1.4rem;max-width:70ch;font-size:17px;line-height:1.65;color:var(--bone-dim)}

/* ============================================================
   GUIA (páginas de referência) · /guia/
   ============================================================ */
.artigo-body{opacity:1}
.artigo-body.ready{transition:none}
.artigo{max-width:820px;margin:0 auto;padding:clamp(2rem,6vh,4rem) var(--pad-x) clamp(3rem,8vh,6rem)}
.migalha{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-mute);margin-bottom:1.4rem}
.migalha a{color:var(--bone-dim)}
.artigo h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,5.2vw,3.6rem);line-height:1.14;text-transform:uppercase;margin:.5rem 0 1.2rem;padding-top:.2em}
.artigo .resumo{font-family:var(--font-serif);font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.5;color:var(--bone);border-left:3px solid var(--brass);padding-left:1.1rem;margin-bottom:2.4rem}
.artigo h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;text-transform:uppercase;margin:2.6rem 0 1rem;padding-top:.15em}
.artigo h3{font-family:var(--font-serif);font-weight:600;font-size:1.25rem;margin:1.6rem 0 .5rem;color:var(--brass-lt)}
.artigo p{font-size:17px;line-height:1.7;color:var(--bone-dim);margin-bottom:1rem;max-width:70ch}
.artigo p b,.artigo li b{color:var(--bone);font-weight:600}
.artigo a{color:var(--copper-lt);text-decoration:underline;text-underline-offset:3px}
.lista-simples{padding-left:1.2rem;display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.2rem}
.lista-simples li{font-size:17px;line-height:1.6;color:var(--bone-dim)}
.tab{width:100%;border-collapse:collapse;margin:1.2rem 0 1.4rem;font-size:16px;display:block;overflow-x:auto}
.tab thead,.tab tbody,.tab tr{width:100%}
.tab th,.tab td{text-align:left;padding:.65rem .7rem;border-bottom:1px solid var(--line);vertical-align:top;min-width:120px}
.tab th{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);border-bottom-color:var(--brass)}
.tab td{color:var(--bone-dim)}
.tab td b{color:var(--bone)}
.nota{font-size:15px;color:var(--bone-mute);max-width:70ch}
.art-faq{margin-top:2.4rem}
.art-cta{margin:3rem 0;border:1px solid var(--brass);border-radius:4px;padding:1.6rem 1.4rem;background:var(--ink-2)}
.art-cta h2{margin-top:.5rem}
.art-cta h2 em{font-style:normal;color:var(--brass)}
.art-fontes ol{padding-left:1.2rem;display:flex;flex-direction:column;gap:.45rem;margin-bottom:1rem}
.art-fontes li{font-size:15px;color:var(--bone-mute);line-height:1.5;word-break:break-word}
.art-rel ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.art-rel a{font-family:var(--font-serif);font-weight:600;font-size:1.1rem;text-decoration:none}
.guia-lista{list-style:none;display:flex;flex-direction:column;gap:1rem;margin-top:1rem}
.guia-lista a{display:flex;flex-direction:column;gap:.4rem;border:1px solid var(--line);border-radius:4px;padding:1.2rem 1.3rem;background:var(--ink-2);text-decoration:none;transition:border-color .2s}
.guia-lista a:hover{border-color:var(--copper-lt)}
.guia-lista b{font-family:var(--font-serif);font-weight:600;font-size:1.2rem;color:var(--bone)}
.guia-lista span{font-size:16px;line-height:1.55;color:var(--bone-dim)}

/* cabeçalho simples (guia e formulário): as mesmas regras do form.css, aqui para as páginas que não carregam aquele arquivo */
.po-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem var(--pad-x);border-bottom:1px solid var(--line-soft)}
.po-brand img{height:52px}
.po-wa{font-size:.8rem;padding:.7rem 1rem}
@media(max-width:600px){.po-wa .arw{display:none}}
.po-footer{margin-top:0}

/* chamada para o guia, na página pública */
.guia-chamada{margin-top:2.6rem;border-top:1px solid var(--line);padding-top:1.6rem}
.guia-chamada ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-top:.8rem}
.guia-chamada a{font-family:var(--font-serif);font-weight:600;font-size:1.1rem;color:var(--bone);text-decoration:underline;text-decoration-color:var(--copper);text-underline-offset:4px}
.guia-chamada a:hover{color:var(--brass-lt)}