/* Componentes da página. As cores, fontes e raios vêm de tokens.css (carregar antes deste arquivo). */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte-texto); color: var(--cor-texto); background: var(--fundo); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); color: var(--cor-titulo); line-height: 1.2; margin: 0 0 .6em;
  font-variant-numeric: lining-nums; }
h1 { font-size: var(--tam-h1); }
h2 { font-size: var(--tam-h2); }
h3 { font-size: var(--tam-h3); }
p { margin: 0 0 1em; }
a { color: var(--cor-acento); }
strong { color: var(--cor-titulo); }

/* Estrutura */
.largura { width: min(1140px, 100% - 40px); margin: 0 auto; }
.estreita { width: min(780px, 100% - 40px); }
.bloco { padding: clamp(56px, 8vw, 100px) 0; background: var(--fundo); }
.alt { background: var(--fundo-alt); }
.painel { background: var(--degrade); color: var(--cor-sobre-acento); }
.painel h1, .painel h2, .painel h3, .painel strong { color: var(--cor-sobre-acento); }
.centro { text-align: center; }
.destaque { color: var(--cor-acento); }
.sub-bloco { color: var(--cor-texto-suave); margin-top: -.3em; }
.fecho { color: var(--cor-texto-suave); font-style: italic; }

/* Botões */
.botao { display: inline-block; text-align: center; text-decoration: none; min-height: 52px; border: 2px solid transparent;
  font-family: var(--fonte-destaque); font-weight: var(--botao-peso); font-size: var(--botao-tamanho); text-transform: var(--botao-caixa);
  padding: var(--botao-padding); border-radius: var(--raio-botao); background: var(--cor-acento); color: var(--cor-sobre-acento);
  line-height: 1.25; transition: transform .15s ease, filter .15s ease; }
.botao:hover { transform: translateY(-1px); filter: brightness(1.08); }
.botao-contorno { background: transparent; border-color: var(--cor-acento); color: var(--cor-acento); }
.painel .botao { background: var(--cor-sobre-acento); color: var(--cor-acento); }
.apoio { margin-top: 12px; font-size: .92rem; color: var(--cor-texto-suave); }
.painel .apoio { color: var(--cor-sobre-acento); opacity: .9; }

/* Selo pequeno acima do título */
.selo { display: inline-block; font-family: var(--fonte-destaque); font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cor-acento); border: 1px solid var(--cor-acento); border-radius: var(--raio-botao);
  padding: 6px 14px; margin-bottom: 18px; }

/* Abertura com foto: no computador a faixa larga é fundo; no celular, recorte no topo */
.abertura { position: relative; background: var(--fundo); }
.abertura-foto { height: 320px; background-image: var(--foto-abertura); background-size: cover;
  background-position: var(--foto-abertura-x-celular) top; }
.abertura-texto { padding: 28px 0 56px; }
.logo { height: 56px; width: auto; margin-bottom: 20px; }
.abertura .sub { font-size: 1.1rem; color: var(--cor-texto); max-width: 34em; margin-bottom: 26px; }

/* Cartões e listas */
.cartao { background: var(--fundo-cartao-alt); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); padding: 24px; }
.alt .cartao { background: var(--fundo-cartao); }
.painel .cartao { background: var(--fundo-cartao); color: var(--cor-texto); }
.frases { list-style: none; padding: 0; margin: 28px 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.frases li { font-family: var(--fonte-destaque); font-weight: 600; font-size: 1.08rem; line-height: 1.4; color: var(--cor-titulo); }
.checks, .xis { list-style: none; padding: 0; margin: 18px 0 0; }
.checks li, .xis li { position: relative; padding-left: 32px; margin-bottom: 12px; }
.checks li::before { content: ""; position: absolute; left: 4px; top: .42em; width: 12px; height: 7px;
  border-left: 2.5px solid var(--cor-acento); border-bottom: 2.5px solid var(--cor-acento); transform: rotate(-45deg); }
.painel .checks li::before { border-color: var(--cor-sobre-acento); }
.xis li::before { content: "×"; position: absolute; left: 4px; top: -.05em; font-size: 1.3rem; font-weight: 700; color: var(--cor-alerta); }

/* Lista numerada em cartões (etapas, módulos) */
.etapas { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.etapas li { display: flex; gap: 16px; align-items: flex-start; }
.etapas .num { flex: 0 0 42px; height: 42px; border-radius: 50%; background: var(--cor-acento); color: var(--cor-sobre-acento);
  font-family: var(--fonte-destaque); font-weight: 700; display: grid; place-items: center; font-variant-numeric: lining-nums; }
.etapas strong { display: block; line-height: 1.3; }
.etapas .qtd { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--cor-acento); letter-spacing: .05em;
  text-transform: uppercase; margin: 2px 0 4px; }
.etapas em { display: block; font-style: normal; color: var(--cor-texto-suave); font-size: .95rem; line-height: 1.4; }
.etapas em::before { content: "Ex.: "; font-weight: 700; }

/* Passos numerados */
.passos { list-style: none; counter-reset: passo; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
.passos li { counter-increment: passo; }
.passos li::before { content: counter(passo) "."; display: block; font-family: var(--fonte-destaque); font-size: 2.4rem;
  font-weight: 700; color: var(--cor-acento); line-height: 1; margin-bottom: 12px; font-variant-numeric: lining-nums; }

/* Amostra do produto (ex.: um prompt inteiro). Cores próprias do produto, se a página definir. */
.amostra-grade { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.card-amostra { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.14); text-align: left;
  background: var(--amostra-fundo, var(--fundo-cartao)); }
.card-topo { background: var(--amostra-topo, var(--cor-acento)); color: var(--amostra-titulo, var(--cor-sobre-acento));
  padding: 18px 20px; font-family: var(--amostra-fonte-titulo, var(--fonte-titulo)); font-size: 1.3rem; font-weight: 700; line-height: 1.3;
  font-variant-numeric: lining-nums; }
.card-num { display: inline-block; background: var(--amostra-rotulo, var(--cor-sobre-acento)); color: var(--amostra-topo, var(--cor-acento));
  font-family: var(--fonte-texto); font-size: .8rem; font-weight: 700; padding: 4px 10px; margin-right: 6px; vertical-align: 3px; }
.card-corpo { margin: 0; padding: 20px; font-family: ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace; font-size: .8rem;
  line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: #2B2B2B; }
.card-corpo .campo { font-weight: 700; text-decoration: underline; text-decoration-color: var(--amostra-rotulo, var(--cor-acento));
  text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Autor com foto: no computador a faixa larga é fundo e o texto fica à direita; no celular, recorte no topo */
.autor { background: var(--fundo-alt); }
.autor-foto { height: 340px; background-image: var(--foto-autor); background-size: cover; background-position: var(--foto-autor-x-celular) top; }
.autor-texto { padding: 32px 0 56px; }
.credenciais { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.credenciais li { background: var(--fundo-cartao); border-radius: calc(var(--raio-cartao) * .5); padding: 12px 16px; font-size: .96rem; }
.credenciais a { font-weight: 700; white-space: nowrap; }
blockquote { margin: 0; font-style: italic; color: var(--cor-texto); border-left: 3px solid var(--cor-acento); padding-left: 16px; }

/* Duas colunas de cartões (limites, comparação) */
.duas-colunas { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 24px 0; }

/* Oferta */
.oferta-cartao { width: min(560px, 100%); margin: 0 auto; text-align: center; padding: 36px 26px; }
.oferta-capa { width: 150px; margin: 0 auto 22px; border-radius: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.oferta-cartao h2 { color: var(--cor-titulo); }
.oferta-cartao .checks { text-align: left; margin-bottom: 22px; }
.oferta-cartao .checks li::before { border-color: var(--cor-acento); }
.preco { font-family: var(--fonte-destaque); font-size: 3.2rem; font-weight: 700; color: var(--cor-acento); line-height: 1; margin: 8px 0 22px;
  font-variant-numeric: lining-nums; }
.oferta-cartao .botao { width: 100%; background: var(--cor-acento); color: var(--cor-sobre-acento); }
.oferta-cartao .apoio { color: var(--cor-texto-suave); opacity: 1; }

/* Garantia */
.garantia { display: flex; gap: 24px; align-items: center; }
.selo-garantia { flex: none; width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--cor-acento); display: grid;
  place-items: center; align-content: center; color: var(--cor-acento); }
.selo-garantia strong { font-family: var(--fonte-destaque); font-size: 2.3rem; line-height: 1; color: var(--cor-acento); font-variant-numeric: lining-nums; }
.selo-garantia span { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.garantia h2 { margin-bottom: .3em; }
.garantia p { margin: 0; }

/* Perguntas */
details { background: var(--fundo-cartao); border-radius: calc(var(--raio-cartao) * .6); margin-bottom: 10px; }
summary { cursor: pointer; padding: 18px 52px 18px 22px; font-family: var(--fonte-destaque); font-weight: 700; color: var(--cor-titulo);
  list-style: none; position: relative; min-height: 44px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--cor-acento); }
details[open] summary::after { content: "−"; }
details p { padding: 0 22px 18px; margin: 0; color: var(--cor-texto-suave); }

/* Fechamento e rodapé */
.fechamento { text-align: center; padding: 64px 0 40px; }
.frase-final { font-family: var(--fonte-titulo); font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 700; line-height: 1.25; margin-bottom: 24px; }
.rodape { margin-top: 44px; font-size: .85rem; line-height: 1.9; }
.rodape a { color: inherit; }

/* Página de obrigado */
.obrigado { padding: clamp(40px, 7vw, 88px) 0; }
.passos-curtos { list-style: none; counter-reset: passo; padding: 0; margin: 20px 0; }
.passos-curtos li { counter-increment: passo; position: relative; padding-left: 44px; margin-bottom: 14px; }
.passos-curtos li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--cor-acento); color: var(--cor-sobre-acento); font-weight: 700; display: grid; place-items: center; font-size: .95rem; }
.aviso { border-left: 4px solid var(--cor-acento); background: var(--fundo-cartao-alt); border-radius: 0 12px 12px 0; padding: 16px 20px; }

/* Telas maiores */
@media (min-width: 760px) {
  .frases, .etapas, .duas-colunas { grid-template-columns: 1fr 1fr; }
  .passos { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .abertura { background-image: var(--foto-abertura); background-size: cover; background-position: center; min-height: 620px;
    display: flex; align-items: center; }
  .abertura-foto, .autor-foto { display: none; }
  .abertura-texto { width: 46%; padding: 64px 0; }
  .autor { background-image: var(--foto-autor); background-size: cover; background-position: center; min-height: 680px;
    display: flex; align-items: center; }
  .autor-texto { margin-left: 52%; width: 44%; padding: 64px 0; }
  .amostra-grade { grid-template-columns: 1fr 1.2fr; }
}
@media (max-width: 480px) {
  .garantia { flex-direction: column; text-align: center; }
  .botao { width: 100%; padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) { .botao { transition: none; } }