@font-face { font-family: "Playfair Display"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fontes/playfair-display-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fontes/playfair-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-style: italic; font-display: swap; src: url("/fontes/playfair-display-latin-700-italic.woff2") format("woff2"); }

:root {
  --fundo: #120d0b;
  --fundo-2: #1b1411;
  --cartao: #221915;
  --linha: rgba(212, 175, 55, 0.22);
  --texto: #f4ece4;
  --suave: #bfae9f;
  --ouro: #d4af37;
  --ouro-claro: #ecd37a;
  --magenta: #c2398a;
  --lilas: #b79ae0;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1, h2, h3 { font-family: "Playfair Display", Georgia, "Times New Roman", serif; line-height: 1.15; margin: 0; }
a { color: inherit; }
.miolo { width: min(1080px, 100% - 40px); margin: 0 auto; }

.topo { position: sticky; top: 0; z-index: 5; background: rgba(18, 13, 11, 0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.topo .miolo { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; white-space: nowrap; flex: 0 1 auto; min-width: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 20px; text-decoration: none; }
.marca i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--linha); background: var(--fundo-2); font-style: normal; }
.botao { display: inline-block; padding: 12px 22px; border-radius: 12px; font-weight: 600; white-space: nowrap; text-align: center; line-height: 1.2; text-decoration: none; background: linear-gradient(135deg, var(--ouro), var(--ouro-claro)); color: #1a1208; border: 0; }
.botao.vazado { background: transparent; color: var(--texto); border: 1px solid var(--linha); }
.botao:focus-visible, a:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; }

.heroi { padding: 88px 0 72px; text-align: center; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(194, 57, 138, 0.22), transparent 70%), radial-gradient(ellipse 50% 40% at 85% 20%, rgba(183, 154, 224, 0.14), transparent 70%); }
.selo { display: inline-block; padding: 6px 16px; border-radius: 99px; border: 1px solid var(--linha); color: var(--ouro-claro); font-size: 14px; margin-bottom: 26px; }
.heroi h1 { font-size: clamp(38px, 7vw, 70px); font-weight: 700; margin-bottom: 22px; }
.heroi h1 em { font-style: italic; background: linear-gradient(135deg, var(--ouro), var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heroi p { max-width: 640px; margin: 0 auto 34px; color: var(--suave); font-size: 19px; }
.acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

section.bloco { padding: 68px 0; border-top: 1px solid var(--linha); }
.bloco h2 { font-size: clamp(28px, 4.5vw, 40px); margin-bottom: 12px; }
.bloco > .miolo > p.lead { color: var(--suave); max-width: 640px; margin: 0 0 36px; }
.grade { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--cartao); border: 1px solid var(--linha); border-radius: 18px; padding: 24px; }
.card h3 { font-size: 22px; margin-bottom: 8px; color: var(--ouro-claro); }
.card p { margin: 0; color: var(--suave); font-size: 16px; }
.card .ico { font-size: 26px; margin-bottom: 10px; display: block; }

ol.passos { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; gap: 16px; }
ol.passos li { counter-increment: p; display: grid; grid-template-columns: 52px 1fr; gap: 18px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 18px; padding: 22px; }
ol.passos li::before { content: counter(p); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font: 700 22px "Playfair Display", Georgia, serif; color: #1a1208; background: linear-gradient(135deg, var(--ouro), var(--ouro-claro)); }
ol.passos h3 { font-size: 21px; margin-bottom: 4px; }
ol.passos p { margin: 0; color: var(--suave); font-size: 16px; }

.guia details { background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; margin-bottom: 12px; }
.guia summary { cursor: pointer; padding: 18px 22px; font-family: "Playfair Display", Georgia, serif; font-size: 20px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.guia summary::-webkit-details-marker { display: none; }
.guia summary::after { content: "+"; color: var(--ouro); font-size: 24px; line-height: 1; }
.guia details[open] summary::after { content: "–"; }
.guia .corpo { padding: 0 22px 20px; color: var(--suave); font-size: 16px; }
.guia .corpo ul { margin: 8px 0 0; padding-left: 20px; }
.guia .corpo li { margin-bottom: 6px; }

.seguro { background: var(--fundo-2); }
.aviso { border-left: 3px solid var(--lilas); padding: 4px 0 4px 16px; color: var(--suave); font-size: 15px; margin-top: 26px; }
.final { text-align: center; padding: 76px 0 90px; background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(212, 175, 55, 0.14), transparent 70%); }
.final h2 { font-size: clamp(28px, 4.5vw, 42px); margin-bottom: 20px; }
footer { border-top: 1px solid var(--linha); padding: 26px 0; color: var(--suave); font-size: 14px; text-align: center; }
footer a { margin: 0 8px; }
@media (max-width: 560px) { ol.passos li { grid-template-columns: 1fr; } .heroi { padding: 60px 0 52px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Cabeçalho compacto: o botão nunca quebra em duas linhas, mesmo com a letra grande do celular */
.topo .botao { flex: 0 0 auto; padding: 10px 18px; font-size: 15px; }
.topo .marca { font-size: clamp(17px, 5vw, 20px); }
@media (max-width: 380px) { .marca i { display: none; } }