/*
 * Páginas de venda (/) e de obrigado (/obrigado). Tokens, vidro, barra, botões e rodapé vêm de g10.css.
 * Sem estilo inline nas páginas (a CSP não deixa): tudo aqui, por classe.
 * Cartões, painéis e faixa de cookies têm fundo quase opaco de propósito: a seda se mexe atrás e o texto não pode oscilar.
 */

:root { --ok: #0b7a55; --superficie: rgba(255, 255, 255, .84); --borda-sup: rgba(255, 255, 255, .8); }
html.dark { --ok: #4ade9b; --superficie: rgba(10, 20, 51, .86); --borda-sup: rgba(255, 255, 255, .1); }

/* display do componente vence o atributo hidden: sem isto o chip aparece vazio */
[hidden] { display: none !important; }

/* ===== acessibilidade e barra ===== */
.pular {
  position: absolute; z-index: 60; left: 12px; top: -80px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--navy); color: var(--ice); font-weight: 600; text-decoration: none;
}
.pular:focus { top: 12px; }

.btn-bar {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: 12px;
  font-weight: 600; font-size: 15px; color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #2a6df0, #1456d9);
  box-shadow: 0 10px 18px -10px rgba(20, 86, 217, .85), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .35s var(--ease), box-shadow .25s var(--ease);
}
.btn-bar:hover { transform: translateY(-1px); box-shadow: 0 14px 22px -10px rgba(20, 86, 217, .95), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn-bar:active { transform: scale(.97); }

main { position: relative; z-index: 1; }
.miolo { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }

/* ===== superfície comum: cartões e painéis ===== */
.painel, .oferta, .assessor, .atualizacao, .avisos {
  background: var(--superficie);
  border: 1px solid var(--borda-sup);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 22px 44px -30px rgba(8, 27, 75, .5);
}
html.dark .painel, html.dark .oferta, html.dark .assessor, html.dark .atualizacao, html.dark .avisos {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 22px 44px -30px rgba(0, 0, 0, .8);
}
@media (prefers-reduced-transparency: reduce) {
  :root { --superficie: rgba(255, 255, 255, .97); }
  html.dark { --superficie: rgba(10, 20, 51, .97); }
}

/* ===== hero ===== */
.hero { padding: 120px 0 36px; }
.hero .miolo { display: grid; gap: 28px; }
.selo {
  display: inline-flex; align-items: center; min-height: 34px; padding: 4px 14px; margin-bottom: 18px;
  font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--inst);
  border-radius: 18px; border: 1px solid var(--line); background: var(--superficie);
}
.hero h1 { font-size: clamp(36px, 8.6vw, 64px); max-width: 16ch; }
.lede { margin-top: 18px; max-width: 54ch; font-size: clamp(16px, 2.3vw, 19px); line-height: 1.55; color: var(--body); }
.lede strong { color: var(--ink); }
.hero .btn-main { width: auto; margin-top: 26px; }
.chip-preco {
  display: inline-flex; align-items: center; min-height: 36px; margin-top: 16px; padding: 6px 14px;
  font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ink);
  border-radius: 999px;
  background: color-mix(in srgb, var(--inst) 10%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--inst) 30%, transparent);
}
.hero .nota { margin-top: 12px; text-align: left; color: var(--body); }

.oferta { align-self: center; border-radius: 26px; padding: 28px 28px 26px; }
.oferta-rotulo { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--inst); }
.oferta-preco { margin: 6px 0 10px; font-size: clamp(56px, 9vw, 76px); font-weight: 800; line-height: 1; letter-spacing: -.045em; color: var(--ink); }
.oferta-linha { font-size: 15.5px; line-height: 1.5; color: var(--body); }
.oferta-linha + .oferta-linha { margin-top: 8px; }

@media (min-width: 900px) {
  .hero { padding-top: 156px; padding-bottom: 56px; }
  .hero .miolo { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 56px; align-items: center; }
}

/* ===== seções ===== */
.secao { padding: 14px 0; }
.secao h2, .painel h2 {
  font-size: clamp(26px, 4.6vw, 38px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  color: var(--ink); text-wrap: balance;
}
.lead { margin-top: 10px; max-width: 64ch; font-size: 17px; line-height: 1.55; color: var(--body); }
.painel { border-radius: 26px; padding: clamp(22px, 4vw, 40px); }
.painel p { font-size: 16.5px; line-height: 1.6; color: var(--body); }
.painel p + p { margin-top: 12px; }
.painel strong, .atualizacao strong, .avisos strong { color: var(--ink); }
.painel a, .atualizacao a { color: var(--inst); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* para quem é: título de um lado, frase grande do outro */
.duas-colunas { display: grid; gap: 14px 40px; align-items: start; }
.duas-colunas h2 { margin-bottom: 0; }
.painel .grande { font-size: clamp(19px, 2.6vw, 24px); font-weight: 500; line-height: 1.5; color: var(--ink); }
@media (min-width: 800px) { .duas-colunas { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }

/* os 9 assessores */
.assessores { display: grid; gap: 14px; margin-top: 24px; grid-template-columns: minmax(0, 1fr); }
.assessor { border-radius: 20px; padding: 20px 22px 22px; }
.assessor h3, .atualizacao h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); }
.assessor p, .atualizacao p { font-size: 15.5px; line-height: 1.55; color: var(--body); }
@media (min-width: 640px) { .assessores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .assessores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* o que chega depois: uma coluna abaixo de 768 px */
.atualizacoes { display: grid; gap: 14px; margin-top: 24px; grid-template-columns: minmax(0, 1fr); }
.atualizacao { border-radius: 20px; padding: 20px 22px 22px; border-left: 4px solid var(--inst); }
.atualizacao .previsao { margin-top: 8px; }
@media (min-width: 768px) {
  .atualizacoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atualizacao:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* antes de comprar: lista com divisórias, sem cartões */
.avisos { list-style: none; margin: 22px 0 0; padding: 6px clamp(18px, 4vw, 32px); border-radius: 22px; }
.avisos li { position: relative; padding: 16px 0 16px 26px; font-size: 16.5px; line-height: 1.55; color: var(--body); border-top: 1px solid var(--line); }
.avisos li:first-child { border-top: 0; }
.avisos li::before { content: ""; position: absolute; left: 2px; top: 1.45em; width: 9px; height: 9px; border-radius: 50%; background: var(--inst); }

/* preço */
.preco-grade { display: grid; gap: 28px; }
.preco-rotulo { margin-top: 14px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--inst); }
.painel .preco-grande { margin: 4px 0 12px; font-size: clamp(56px, 11vw, 88px); font-weight: 800; line-height: 1; letter-spacing: -.045em; color: var(--ink); }
.painel .preco-ref { font-size: 15.5px; color: var(--muted); }
.preco-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.preco-lista li {
  padding: 16px 18px; border-radius: 16px; font-size: 16px; line-height: 1.55; color: var(--body);
  background: color-mix(in srgb, var(--inst) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--inst) 18%, transparent);
}
.preco-lista strong { color: var(--ink); }
@media (min-width: 860px) { .preco-grade { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; } }

/* entrega e bônus */
.dupla { display: grid; gap: 14px; }
.painel h2 { margin-bottom: 14px; }
.painel.destaque { color: #fff; background: linear-gradient(160deg, #0e3a9c, #1456d9); border-color: rgba(255, 255, 255, .25); }
html.dark .painel.destaque { background: linear-gradient(160deg, #0e3a9c, #1456d9); border-color: rgba(255, 255, 255, .2); }
.painel.destaque h2, .painel.destaque strong { color: #fff; }
.painel.destaque p { color: rgba(255, 255, 255, .94); }
@media (min-width: 860px) { .dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* licença e reembolso: um painel, duas colunas com divisória */
.trilho { display: grid; gap: 26px 0; }
.trilho > * + * { padding-top: 26px; border-top: 1px solid var(--line); }
@media (min-width: 860px) {
  .trilho { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .trilho > * { padding-right: 40px; }
  .trilho > * + * { padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--line); }
}

/* fecho */
.fechamento { padding: 44px 0 8px; text-align: center; }
.fechamento h2 { font-size: clamp(30px, 6vw, 48px); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.fechamento .lead { margin: 12px auto 0; }
.fechamento .btn-main { width: auto; margin-top: 24px; }
.fechamento .btn-main, .hero .btn-main { padding-inline: 28px; }

/* ===== aviso de cookies: Aceitar e Recusar com o mesmo peso ===== */
.cookies {
  position: fixed; z-index: 40; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: min(780px, calc(100% - 24px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 12px 14px 12px 20px; border-radius: 20px;
  background: #fff; /* opaco: o texto da página não pode aparecer por baixo do aviso */
}
html.dark .cookies { background: #0a1433; }
.cookies p { flex: 1 1 280px; font-size: 14.5px; line-height: 1.45; color: var(--body); }
.cookies a { color: var(--inst); text-underline-offset: 3px; }
.cookies-acoes { display: flex; gap: 10px; flex: 0 0 auto; }
.btn-cookie {
  min-width: 108px; height: 44px; padding: 0 20px; border-radius: 12px; cursor: pointer;
  font: 600 15px/1 var(--f-ui); color: var(--navy); background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--navy) 30%, transparent);
  transition: border-color .2s, color .2s, background .2s;
}
.btn-cookie:hover { border-color: var(--inst); color: var(--inst); background: color-mix(in srgb, var(--inst) 7%, transparent); }

/* ===== obrigado ===== */
.palco.palco-curto { min-height: calc(100svh - 110px); padding-bottom: 8px; }
.selo-estado { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; }
.selo-estado .ms { font-size: 30px; }
.selo-estado.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.selo-estado.erro { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); }
.selo-estado.espera { color: var(--inst); background: color-mix(in srgb, var(--inst) 13%, transparent); }
.cartao h1 { font-size: clamp(32px, 8vw, 42px); }
.cartao .apoio { max-width: none; }
.cartao .apoio + .apoio { margin-top: 10px; }
.cartao .apoio strong { color: var(--ink); overflow-wrap: anywhere; }
.cartao .apoio a { color: var(--inst); text-underline-offset: 3px; overflow-wrap: anywhere; }
.cartao a.btn-sec { display: flex; align-items: center; justify-content: center; margin-top: 12px; text-decoration: none; }
.cartao a.btn-main { width: 100%; }

/* links dentro de frase do rodapé: sem caixa de 44 px (o espaço entre linhas ficava largo); os links legais seguem com 44 px */
.rodape p a { display: inline; min-height: 0; padding: 0; }
.rodape p a:hover { text-decoration: underline; }

/* ===== celular ===== */
@media (max-width: 560px) {
  .bar { padding: 0 8px 0 14px; }
  .logo { font-size: 16px; }
  .acts { gap: 8px; }
  .btn-bar { padding: 0 14px; font-size: 14.5px; }
  .hero { padding-top: 100px; }
  .hero .btn-main, .fechamento .btn-main { width: 100%; padding-inline: 22px; }
  .oferta { padding: 22px 22px 20px; }
  .cookies { bottom: 10px; padding: 14px 16px; }
  .cookies-acoes { width: 100%; }
  .btn-cookie { flex: 1; }
  .palco.palco-curto { padding-top: 92px; }
}
@media (max-width: 360px) {
  .logo { font-size: 15px; }
  .btn-bar { padding: 0 12px; }
}