/* Por Que Eu Creio: página de venda (estrutura de página de infoproduto, com a nossa marca) */
/* fontes servidas pelo próprio site (ferramentas/fontes.mjs) */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500; font-display: swap; src: url('fontes/fredoka-500.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-display: swap; src: url('fontes/fredoka-600.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-display: swap; src: url('fontes/fredoka-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('fontes/nunito-400.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('fontes/nunito-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('fontes/nunito-800.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url('fontes/nunito-900.woff2') format('woff2'); }
:root {
  --azul: #1C2A5A;
  --azul-2: #243670;
  --tinta: #1E2547;
  --suave: #5D6584;
  --amarelo: #FFC23B;
  --amarelo-claro: #FFF1C9;
  --coral: #FF6A4D;
  --coral-escuro: #E8553A;
  /* coral do botão: um tom mais fechado para o texto branco ter contraste */
  --coral-botao: #F25C3F;
  --coral-botao-sombra: #D4462B;
  --verde-botao: #16A34A; /* botão de compra verde (pedido do dono, 29/10) */
  --verde-botao-claro: #DCF5E4;
  --creme: #FFF6E6;
  --fundo: #F4F5FA;
  --linha: #E3E6EF;

  /* régua única de espaços */
  --s1: 8px;
  --s2: 12px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --secao: 56px;
  --lado: 16px;
  --pad: 24px;
  --raio: 20px;
  --largura: 1080px;
}
@media (min-width: 900px) { :root { --secao: 96px; --lado: 32px; --pad: 32px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* o body é o contêiner de largura: 100cqw = largura da página sem a barra de rolagem do Windows (100vw contava a barra e criava rolagem para o lado) */
html { overflow-x: clip; }
body { container-type: inline-size; font-family: 'Nunito', system-ui, sans-serif; font-size: 17px; line-height: 1.55; color: var(--tinta); background: var(--fundo); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, li { text-wrap: pretty; }
h1, h2, h3 { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; color: var(--azul); line-height: 1.12; text-wrap: balance; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 21px; line-height: 1.2; }
@media (min-width: 900px) { body { font-size: 18px; } h1 { font-size: 56px; } h2 { font-size: 42px; } h3 { font-size: 23px; } }

/* marca-texto nas palavras-chave dos títulos */
.marca { background: linear-gradient(transparent 60%, var(--amarelo) 60%, var(--amarelo) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px; }
.noite .marca { background: none; color: var(--amarelo); padding: 0; }

.miolo { width: 100%; max-width: calc(var(--largura) + 2 * var(--lado)); margin: 0 auto; padding: 0 var(--lado); }
.secao { padding: var(--secao) 0; }
.branco { background: #fff; }
/* cartão dentro de seção branca ganha o fundo cinza-claro, senão some */
.branco .cartao, .branco .passo, .branco .garantia, .branco .lista-check li, .branco .faq details { background: var(--fundo); }

/* cabeçalho de seção centralizado: etiqueta, título e apoio */
.cabeca { max-width: 760px; margin: 0 auto; text-align: center; }
.cabeca > * + * { margin-top: var(--s2); }
.cabeca > .etiqueta-secao + h2 { margin-top: var(--s1); }
.cabeca + * { margin-top: var(--s4); }
.etiqueta-secao { font-weight: 900; font-size: 13px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.apoio { color: var(--suave); }

/* botões */
.botao {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; min-height: 60px; padding: 0 24px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--verde-botao); color: #fff; text-decoration: none; text-align: center;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.15; text-transform: uppercase; letter-spacing: .02em;
  padding-top: 12px; padding-bottom: 12px;
  box-shadow: 0 12px 26px rgba(22, 163, 74, .34); transition: transform .12s ease, box-shadow .12s ease;
}
.botao svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 400px) { .botao { font-size: 17px; letter-spacing: .01em; padding-left: 16px; padding-right: 16px; gap: var(--s1); } }
@media (max-width: 359px) { .botao { font-size: 17px; text-transform: none; letter-spacing: 0; } } /* celular de 320: em maiúsculas o botão quebrava em duas linhas */
.botao:hover { transform: translateY(-1px); }
.botao:active { transform: translateY(2px); box-shadow: 0 5px 12px rgba(22, 163, 74, .3); }
.botao-claro, .botao-whats { text-transform: none; letter-spacing: 0; }
.depois-botao.depois-email { white-space: normal; text-wrap: balance; text-align: left; grid-template-columns: 20px fit-content(calc(100% - 28px)); }
.depois-botao { display: grid; grid-template-columns: 20px auto; gap: var(--s1); align-items: center; justify-content: center; color: var(--suave); font-size: 15px; font-weight: 700; white-space: nowrap; }
.depois-botao svg { width: 20px; height: 20px; display: block; }
.noite .depois-botao { color: #C9D0E8; }
.chamada { max-width: 520px; margin-left: auto; margin-right: auto; }
.chamada > * + * { margin-top: var(--s2); }

/* barra do topo */
.barra { background: var(--azul); color: #fff; text-align: center; font-weight: 900; font-size: 13px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; padding: var(--s2) var(--lado); }

/* abertura */
.heroi { padding: var(--s5) 0 var(--secao); text-align: center; }
.heroi .miolo > * + * { margin-top: var(--s3); }
.marca-topo { height: 30px; width: auto; margin: 0 auto; }
.seguro { display: grid; grid-template-columns: 18px auto; justify-content: center; gap: var(--s1); align-items: center; font-weight: 900; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.seguro svg { width: 18px; height: 18px; display: block; }
.heroi h1 { max-width: 760px; margin-left: auto; margin-right: auto; }
.heroi .produto { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
.heroi .lead { max-width: 620px; margin-left: auto; margin-right: auto; font-size: 18px; color: var(--suave); }
.heroi .lead b { color: var(--azul); font-weight: 900; }
.heroi .chamada { margin-top: var(--s4); }
@media (min-width: 900px) { .heroi { padding-top: 48px; } .heroi .lead { font-size: 20px; } }
.link-amostra { display: inline-block; font-weight: 800; color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }

/* o conteúdo por dentro */
.paginas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.paginas figure { background: #fff; border-radius: 12px; padding: var(--s1); box-shadow: 0 6px 18px rgba(28, 42, 90, .10); }
.paginas img { border-radius: 6px; }
.paginas .mais { display: flex; align-items: center; justify-content: center; text-align: center; background: transparent; box-shadow: none; }
.paginas .mais p { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--azul); }
@media (min-width: 900px) { .paginas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } }
.nota-fichas { margin-top: var(--s4); text-align: center; color: var(--suave); max-width: 640px; margin-left: auto; margin-right: auto; }

/* cartões brancos com ícone */
.cartoes { display: grid; gap: var(--s2); }
.cartao { background: #fff; border-radius: var(--raio); padding: var(--pad); }
.cartao > * + * { margin-top: var(--s1); }
.cartao p { color: var(--suave); }
@media (min-width: 900px) { .cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); } }

/* bloco azul de chamada */
.noite { background: var(--azul); color: #fff; }
.noite h2, .noite h3 { color: #fff; }
.noite .cartao h3 { color: var(--azul); } /* cartão branco dentro da faixa escura: título volta a ser azul */
.noite .etiqueta-secao { color: var(--amarelo); }
.destaque-azul { max-width: 640px; margin: 0 auto; text-align: center; }
.destaque-azul > * + * { margin-top: var(--s3); }
.destaque-azul .frase { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 26px; line-height: 1.3; }
.destaque-azul .frase strong { color: var(--amarelo); font-weight: 600; }
.destaque-azul .chamada { margin-top: var(--s4); }
@media (min-width: 900px) { .destaque-azul .frase { font-size: 34px; } }

/* lista "ideal para você" */
.lista-check { list-style: none; display: grid; gap: var(--s2); max-width: 760px; margin-left: auto; margin-right: auto; }
.lista-check li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--s2); align-items: start; background: #fff; border-radius: 16px; padding: var(--s3); font-weight: 700; color: var(--azul); }
.lista-check svg { width: 26px; height: 26px; display: block; margin-top: calc((1.55em - 26px) / 2); }
@media (min-width: 900px) { .lista-check { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } }

/* método: os 4 passos */
.passos { list-style: none; display: grid; gap: var(--s5) var(--s4); padding-top: 14px; }
.passo { position: relative; background: #fff; border-radius: var(--raio); padding: var(--pad); }
.passo > * + * { margin-top: var(--s1); }
.passo p { color: var(--suave); }
.pilula-passo {
  position: absolute; top: 0; left: var(--pad); transform: translateY(-50%);
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--coral); color: #fff; font-weight: 900; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
@media (min-width: 900px) { .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .passo h3 { min-height: 2.4em; } }

/* caixa da oferta */
.oferta { max-width: 640px; margin: 0 auto; background: #fff; border-radius: 24px; padding: var(--pad); text-align: center; }
.oferta > * + * { margin-top: var(--s2); }
.oferta > .etiqueta-secao + h2 { margin-top: var(--s1); }
.oferta > img { margin-left: auto; margin-right: auto; margin-top: var(--s3); }
.oferta .lista-check { text-align: left; grid-template-columns: minmax(0, 1fr); margin-top: var(--s3); }
.oferta .lista-check li { background: var(--fundo); }
.oferta .chamada { margin-top: var(--s4); }
.chamada-bonus { margin-top: var(--s4); text-align: center; }

/* bônus */
.bonus { display: grid; gap: var(--s4); max-width: 880px; margin-left: auto; margin-right: auto; }
.bonus .cartao img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; margin: 0 auto; }
.bonus .numero { font-weight: 900; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.bonus .cartao img + .numero { margin-top: var(--s3); }
.incluso { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: #E3F6EC; color: #16855A; font-weight: 900; font-size: 14px; }
.bonus .cartao .incluso { margin-top: var(--s3); }
.bonus .cartao { display: flex; flex-direction: column; }
.bonus .cartao p strong { color: var(--tinta); font-weight: 800; } /* o principal de cada bônus, para quem só passa o olho */
.bonus .cartao .incluso { align-self: flex-start; }
@media (min-width: 900px) {
  .bonus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bonus h3 { min-height: 2.4em; }
  .bonus .cartao > p:not(.numero) { margin-bottom: var(--s3); }
  .bonus .cartao .incluso { margin-top: auto; }
  /* o 5º bônus ocupa a linha inteira: foto à esquerda, texto à direita */
  .bonus .bonus-largo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--s4); align-content: center; }
  .bonus .bonus-largo picture { grid-row: 1 / 4; align-self: center; }
  .bonus .bonus-largo > * { grid-column: 2; }
  .bonus .bonus-largo > picture { grid-column: 1; }
  .bonus .bonus-largo .numero { align-self: end; margin-top: 0; }
  .bonus .bonus-largo h3 { min-height: 0; margin-top: var(--s1); }
  .bonus .bonus-largo > p:not(.numero) { margin-top: var(--s2); margin-bottom: 0; }
}

/* planos */
.planos { display: grid; gap: var(--s4); max-width: 880px; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .planos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
.plano { background: #fff; border-radius: 24px; border: 4px solid #fff; padding: var(--pad); display: flex; flex-direction: column; }
.plano > * + * { margin-top: var(--s2); }
.plano.destaque { border-color: var(--amarelo); background: #fff linear-gradient(180deg, #FFF8E4 0%, #fff 34%); box-shadow: 0 0 0 6px rgba(255, 194, 59, .2), 0 24px 56px rgba(232, 160, 20, .28); }
.destaque .inclui li.li-bonus { margin: 0 -8px; padding: 4px 8px; border-radius: 10px; background: var(--amarelo-claro); }
.plano-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); min-height: 30px; }
.plano .etiqueta {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px; border-radius: 999px;
  background: var(--amarelo); color: var(--azul); font-weight: 900; font-size: 12px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.plano .sub { color: var(--suave); }
.plano .foto { margin-top: var(--s3); }
.inclui { list-style: none; display: grid; gap: var(--s1); }
.plano .foto + .inclui { margin-top: var(--s3); }
.inclui li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s1); align-items: start; }
.inclui svg { width: 22px; height: 22px; display: block; margin-top: calc((1.55em - 22px) / 2); }
.inclui li.fora { color: #A3A8BC; }
.inclui li.fora span { text-decoration: line-through; }
.plano .preco-bloco { margin-top: var(--s4); }
@media (min-width: 900px) { .plano .preco-bloco { margin-top: auto; } .plano > :has(+ .preco-bloco) { margin-bottom: var(--s4); } } /* lado a lado: preço e botão descem até o pé do cartão e os dois planos ficam alinhados */
.preco { font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--azul); font-size: 52px; line-height: 1; }
.preco small { font-size: 24px; vertical-align: .55em; margin-right: 4px; }
.preco-bloco p + p { margin-top: var(--s1); }
.por-semana { color: var(--suave); font-weight: 700; font-size: 15px; }
.plano .botao { margin-top: auto; }
.plano .preco-bloco + .botao { margin-top: var(--s4); }
.plano:not(.destaque) .botao { background: var(--azul); box-shadow: 0 5px 0 #0F1840, 0 12px 24px rgba(28, 42, 90, .2); }

/* garantia */
.garantia { max-width: 640px; margin: 0 auto; background: #fff; border-radius: 24px; padding: var(--pad); text-align: center; }
.garantia > * + * { margin-top: var(--s2); }
.garantia p { color: var(--suave); }

/* perguntas frequentes */
.faq { max-width: 760px; margin-left: auto; margin-right: auto; display: grid; gap: var(--s2); }
.faq details { border-radius: 16px; background: #fff; }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: var(--s2); align-items: center;
  padding: var(--s3) var(--s4); font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--azul);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: 28px; height: 28px; flex: none; border-radius: 50%; background: linear-gradient(var(--azul), var(--azul)) center / 12px 2.5px no-repeat, linear-gradient(var(--azul), var(--azul)) center / 2.5px 12px no-repeat, var(--amarelo); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 var(--s4) var(--s3); color: var(--suave); }

/* chamada final e rodapé */
.final { text-align: center; }
.final .chamada { margin-top: var(--s4); }
.rodape { padding: 40px 0; background: #121A3D; color: #AEB7D6; font-size: 14px; text-align: center; }
.rodape .miolo > * + * { margin-top: var(--s2); }
.rodape img { height: 28px; width: auto; margin: 0 auto; }
.rodape nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s3); }
.rodape a { color: #fff; font-weight: 700; text-decoration: none; }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

/* ---------- livro 3D girando no topo ---------- */
.livro3d { --w: 190px; --h: calc(var(--w) * 1.4143); --d: 28px; --volta: 10s; --topo3d: var(--s2);
  position: relative; width: 100%; display: grid; justify-items: center; padding: var(--topo3d) 0 0; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.livro3d:active { cursor: grabbing; }
@media (min-width: 600px) { .livro3d { --w: 250px; --d: 34px; --topo3d: var(--s3); } }
@media (min-width: 900px) { .livro3d { --w: 270px; --d: 36px; } }
@media (prefers-reduced-motion: reduce) { .livro3d { --volta: 16s; } } /* gira mais devagar, mas gira */
.cena3d { width: var(--w); height: var(--h); perspective: 1500px; animation: flutuar 6s ease-in-out infinite; }
.giro { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: girar var(--volta) ease-in-out infinite; }
.livro3d.arrastando .giro { animation: none; }
/* balança devagar, sempre mostrando a capa (girar 360 deixava a contracapa à mostra metade do tempo) */
@keyframes girar { 0%, 100% { transform: rotateX(-8deg) rotateY(-34deg); } 50% { transform: rotateX(-8deg) rotateY(12deg); } }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.face { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frente, .verso { inset: 0; border-radius: 2px 6px 6px 2px; overflow: hidden; }
.frente { transform: translateZ(calc(var(--d) / 2)); }
.verso { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); border-radius: 6px 2px 2px 6px; }
.frente::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,0) 75%, rgba(0,0,0,.12) 100%); }
.lombada, .folhas { width: var(--d); height: 100%; left: calc(50% - var(--d) / 2); top: 0; }
.lombada { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); background: linear-gradient(90deg, #121B42, #1C2A5A 40%, #24346B 70%, #16214D);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 0; }
.lombada img { width: 62%; height: auto; }
.lombada span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: calc(var(--d) * .42); color: #fff; letter-spacing: .02em; white-space: nowrap; }
.lombada b { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: calc(var(--d) * .4); color: var(--amarelo); }
.folhas { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); background: repeating-linear-gradient(90deg, #FBF8F1 0 2px, #E7E1D3 2px 3px); }
.topo3d, .base3d { width: 100%; height: var(--d); left: 0; top: calc(50% - var(--d) / 2); background: repeating-linear-gradient(0deg, #FBF8F1 0 2px, #E7E1D3 2px 3px); }
.topo3d { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.base3d { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
.sombra3d { width: calc(var(--w) * 1.05); height: 22px; margin-top: 20px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(28,42,90,.28), rgba(28,42,90,0)); animation: sombra var(--volta) linear infinite, sombra-flutua 6s ease-in-out infinite; }
.livro3d.arrastando .sombra3d { animation: sombra-flutua 6s ease-in-out infinite; }
@keyframes sombra { 0%, 50%, 100% { scale: 1 1; } 25%, 75% { scale: .45 1; } }
@keyframes sombra-flutua { 0%, 100% { opacity: 1; } 50% { opacity: .75; } }

/* ---------- animações ao rolar ---------- */
.anima .revela { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.anima .revela.visto { opacity: 1; transform: none; }
.anima .marca { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size .9s ease .25s; }
.anima .visto .marca, .anima .marca.visto { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) { /* o iPhone com "Reduzir movimento" também vê as animações, só mais suaves */
  .anima .revela { transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
}

/* ---------- comparação ---------- */
.compara { display: grid; gap: var(--s2); max-width: 880px; margin-left: auto; margin-right: auto; }
.compara-col { border-radius: var(--raio); padding: var(--pad); }
.compara-col > * + * { margin-top: var(--s2); }
.compara-col h3 { font-size: 20px; }
.compara-col ul { list-style: none; display: grid; gap: var(--s2); }
.compara-col li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s2); align-items: start; }
.compara-col li svg { width: 24px; height: 24px; display: block; margin-top: calc((1.55em - 24px) / 2); }
.compara-col.comum { background: #fff; color: var(--suave); }
.compara-col.comum h3 { color: var(--suave); }
.compara-col.nosso { background: var(--azul); color: #fff; }
.compara-col.nosso h3 { color: var(--amarelo); }
.branco .compara-col.comum { background: var(--fundo); }
@media (min-width: 900px) { .compara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } }


/* ---------- WhatsApp flutuante ---------- */
.whats {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .45), 0 2px 6px rgba(0,0,0,.15); transition: transform .2s ease, bottom .25s ease;
}
.whats:hover { transform: scale(1.06); }
.whats svg { width: 32px; height: 32px; display: block; }
.whats::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); animation: pulso 2.6s ease-out infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 70%, 100% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } }
@media (prefers-reduced-motion: reduce) { .whats::after { animation-duration: 4s; } }
.com-barra .whats { bottom: calc(92px + env(safe-area-inset-bottom)); }
.com-barra:has(.barra-compra .relogio-mini) .whats { bottom: calc(124px + env(safe-area-inset-bottom)); }

/* ---------- barra de compra fixa no celular ---------- */
.barra-compra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 39; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: center;
  padding: var(--s3) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -6px 24px rgba(28, 42, 90, .14);
  transform: translateY(110%); transition: transform .3s ease;
}
.com-barra .barra-compra { transform: none; }
.barra-compra .rotulo-barra { font-weight: 800; font-size: 13px; color: var(--suave); line-height: 1.2; }
.barra-compra .preco-barra { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 24px; line-height: 1.1; color: var(--azul); }
.barra-compra .botao { width: auto; min-height: 52px; font-size: 17px; padding: 0 18px; }
@media (min-width: 900px) { .barra-compra { display: none; } .com-barra .whats { bottom: calc(16px + env(safe-area-inset-bottom)); } }

/* ---------- luz e brilhos atrás do livro 3D ---------- */
.cena3d { position: relative; z-index: 1; }
.luz3d { position: absolute; left: 50%; top: calc(var(--topo3d) + var(--h) / 2); width: calc(var(--w) * 2.3); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; }
.luz3d .halo { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 194, 59, .55) 0%, rgba(255, 194, 59, .22) 38%, rgba(255, 194, 59, 0) 68%); animation: respirar 5s ease-in-out infinite; }
.luz3d .raios { position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 194, 59, .30) 0deg 6deg, rgba(255, 194, 59, 0) 6deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .55) 42%, transparent 66%); mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .55) 42%, transparent 66%);
  animation: girar-raios 70s linear infinite; }
.luz3d .brilho { position: absolute; width: 22px; height: 22px; animation: piscar 3.2s ease-in-out infinite; }
.luz3d .brilho svg { width: 100%; height: 100%; display: block; }
.luz3d .b1 { left: 14%; top: 22%; }
.luz3d .b2 { right: 13%; top: 17%; width: 16px; height: 16px; animation-delay: .8s; }
.luz3d .b3 { right: 9%; top: 58%; width: 26px; height: 26px; animation-delay: 1.6s; }
.luz3d .b4 { left: 10%; top: 66%; width: 14px; height: 14px; animation-delay: 2.2s; }
.luz3d .b5 { left: 24%; top: 9%; width: 12px; height: 12px; animation-delay: 1.1s; }
.luz3d .b6 { right: 22%; bottom: 10%; width: 18px; height: 18px; animation-delay: 2.7s; }
@keyframes respirar { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes girar-raios { to { transform: rotate(360deg); } }
@keyframes piscar { 0%, 100% { transform: scale(.55) rotate(0deg); opacity: .25; } 50% { transform: scale(1) rotate(20deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .luz3d .raios { animation-duration: 90s; } .luz3d .brilho { animation-duration: 6s; } }

/* ---------- céu de desenho no topo ---------- */
.heroi { position: relative; overflow: hidden; background: linear-gradient(180deg, #BFE2FF 0%, #D9EEFF 42%, #EEF4FB 78%, var(--fundo) 100%); }
.heroi .miolo { position: relative; z-index: 1; }
.ceu { position: absolute; top: 0; left: 0; right: 0; height: var(--chao, 40%); overflow: hidden; pointer-events: none; z-index: 0; } /* o céu termina no chão (--chao vem do site.js) */
.nuvem { position: absolute; left: 0; display: block; animation: passar linear infinite; will-change: transform; }
.nuvem svg { width: 100%; height: auto; display: block; }
.n1 { width: 150px; top: 2%; animation-duration: 38s; animation-delay: -8s; }
.n2 { width: 110px; top: 16%; animation-duration: 52s; animation-delay: -34s; }
.n3 { width: 190px; top: 28%; animation-duration: 64s; animation-delay: -20s; opacity: .9; }
.n4 { width: 130px; top: 38%; animation-duration: 46s; animation-delay: -40s; opacity: .85; }
.n5 { width: 90px; top: 10%; animation-duration: 80s; animation-delay: -62s; opacity: .7; }
@keyframes passar { from { transform: translateX(-110%); } to { transform: translateX(100vw); } }
@media (prefers-reduced-motion: reduce) { .nuvem { animation-duration: 80s; } } /* mais devagar, mas passa */
@media (min-width: 900px) { .n1 { width: 220px; } .n2 { width: 170px; } .n3 { width: 260px; } .n4 { width: 200px; } .n5 { width: 130px; } }
.heroi .lead { color: #4E577A; }

/* ---------- confiança ---------- */
.plano .conta-valor + .botao { margin-top: var(--s4); }
.conta-valor { font-size: 14px; line-height: 1.45; color: #16855A; background: #E3F6EC; border-radius: 12px; padding: var(--s2); font-weight: 700; }
.duvida { max-width: 760px; margin: var(--s4) auto 0; text-align: center; }
.duvida > * + * { margin-top: var(--s2); }
.duvida p { font-weight: 800; color: var(--azul); }
.botao-whats { background: #1E9E4F; box-shadow: 0 5px 0 #167A3C, 0 12px 24px rgba(30, 158, 79, .28); max-width: 360px; margin-left: auto; margin-right: auto; }
.botao-whats svg { width: 26px; height: 26px; }

/* ---------- ícones Phosphor em quadradinhos coloridos ---------- */
.ph { display: block; }
.ph-miolo { fill: var(--miolo, currentColor); opacity: var(--miolo-op, .2); }
.quadro { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: var(--azul); flex: none; }
.quadro svg { width: 32px; height: 32px; }
.quadro.amarelo { background: #FFF1C9; --miolo: #FFC23B; --miolo-op: 1; }
.quadro.coral { background: #FFE4DD; --miolo: #FF8D74; --miolo-op: 1; }
.quadro.azul { background: #E2ECFF; --miolo: #8DB0FF; --miolo-op: 1; }
.quadro.verde { background: #DCF4E7; --miolo: #67CF99; --miolo-op: 1; }
.item-texto > * + * { margin-top: 4px; }
.cartao.item, .cartao.etapa { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s3); align-items: center; }
.cartao.etapa { align-items: start; }
.cartao.item > * + *, .cartao.etapa > * + * { margin-top: 0; }
@media (min-width: 900px) {
  .cartao.item, .cartao.etapa { display: block; }
  .cartao.item > .item-texto, .cartao.etapa > .item-texto { margin-top: var(--s3); }
}
.passo .quadro + h3 { margin-top: var(--s3); }
.seguro svg { color: var(--coral); }

/* ---------- selos de confiança ---------- */
.selos { list-style: none; max-width: 640px; margin: var(--s4) auto 0; background: #fff; border-radius: var(--raio); padding: 0 var(--s3); box-shadow: 0 6px 20px rgba(28, 42, 90, .08); text-align: left; }
.selos li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s2); align-items: center; padding: var(--s2) 0; }
.selos li + li { border-top: 1px solid var(--linha); }
.selos .quadro { width: 44px; height: 44px; border-radius: 12px; }
.selos .quadro svg { width: 26px; height: 26px; }
.selo-texto { display: grid; line-height: 1.3; }
.selo-texto b { font-weight: 900; font-size: 15px; color: var(--azul); }
.selo-texto small { font-weight: 700; font-size: 13px; color: var(--suave); }
/* no topo: três colunas compactas, só o título */
.selos-topo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--s3) 0; text-align: center; }
.selos-topo li { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: var(--s1); padding: 0 var(--s1); }
.selos-topo li + li { border-top: 0; border-left: 1px solid var(--linha); }
.selos-topo .selo-texto b { font-size: 13px; }
.selos-topo .selo-texto small { display: none; }
@media (min-width: 600px) {
  .selos:not(.selos-topo) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--s3) 0; text-align: center; }
  .selos:not(.selos-topo) li { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: var(--s1); padding: 0 var(--s2); }
  .selos:not(.selos-topo) li + li { border-top: 0; border-left: 1px solid var(--linha); }
  .selos-topo .selo-texto b { font-size: 15px; }
  .selos-topo .selo-texto small { display: block; }
}
.formas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s1); margin-top: var(--s3); }
.formas-rotulo { width: 100%; text-align: center; font-weight: 900; font-size: 12px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.forma { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--linha); font-weight: 800; font-size: 14px; color: var(--azul); }
.forma svg { width: 20px; height: 20px; }
.forma:nth-of-type(2) svg { color: #32BCAD; }
.parcelas { font-weight: 800; font-size: 15px; color: var(--azul); }

/* ---------- garantia com selo ---------- */
.selo-garantia { display: block; width: 148px; height: 148px; margin: 0 auto; filter: drop-shadow(0 8px 16px rgba(28, 42, 90, .18)); }
.selo-garantia + h2 { margin-top: var(--s3); }
.garantia .garantia-risco { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: 24px auto; gap: var(--s1); align-items: center; padding: var(--s2) var(--s3); border-radius: 14px; background: #DCF4E7; color: #126B48; font-weight: 800; line-height: 1.35; text-align: left; }
.garantia-risco svg { width: 24px; height: 24px; --miolo: #67CF99; --miolo-op: 1; }
.garantia > .garantia-risco { margin-top: var(--s3); }
/* o WhatsApp flutuante sai da frente quando a pessoa chega na dúvida, no fim ou no rodapé */
.sem-whats .whats { opacity: 0; pointer-events: none; transform: scale(.8); }
.whats { transition: transform .2s ease, bottom .25s ease, opacity .2s ease; }

/* ---------- como você recebe ---------- */
.entrega { list-style: none; display: grid; gap: var(--s2); max-width: 880px; margin-left: auto; margin-right: auto; }
.entrega .numero { font-weight: 900; font-size: 13px; line-height: 1.3; letter-spacing: .14em; color: var(--coral); }
@media (min-width: 900px) { .entrega { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } }

/* ---------- depoimentos (só aparecem quando houver depoimento real) ---------- */
.depoimentos { display: grid; gap: var(--s2); max-width: 880px; margin-left: auto; margin-right: auto; }
.depoimento { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s5); }
.depoimento .aspas { position: absolute; top: 4px; left: 20px; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 56px; line-height: 1; color: var(--amarelo); }
.depoimento blockquote { font-weight: 700; color: var(--tinta); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.depoimento figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; color: var(--suave); font-size: 15px; line-height: 1.3; }
.depoimento figcaption b { display: block; color: var(--tinta); }
.depoimento figcaption small { display: block; font-size: 14px; }
.dep-inicial { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: #fff; font-weight: 800; font-size: 17px; }
.dep-cor-0 { background: #F2A900; } .dep-cor-1 { background: #FF6A4D; } .dep-cor-2 { background: #2FA79A; } .dep-cor-3 { background: #6F8FE6; }
@media (min-width: 900px) { .depoimentos { grid-template-columns: repeat(auto-fit, minmax(0, 380px)); justify-content: center; gap: var(--s4); max-width: none; } } /* 1, 2 ou 3 depoimentos, sempre no centro */

/* ---------- botão amarelo (folhear) e convite no livro do topo ---------- */
.botao-claro { background: var(--amarelo); color: var(--azul); box-shadow: 0 5px 0 #E0A21F, 0 12px 24px rgba(255, 194, 59, .3); }
.botao-claro:active { box-shadow: 0 1px 0 #E0A21F; }
.nota-fichas + .chamada { margin-top: var(--s4); }
.folhear { position: relative; z-index: 2; margin-top: -8px; display: inline-flex; align-items: center; gap: var(--s1); min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: var(--azul); font: 800 14px/1.2 'Nunito', system-ui, sans-serif; box-shadow: 0 2px 10px rgba(28, 42, 90, .1); cursor: pointer; }
.folhear svg { width: 20px; height: 20px; color: var(--coral); animation: tocar 2.4s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes tocar { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(2px) scale(.9); } 80% { transform: none; } }
.livro3d .cena3d, .livro3d .sombra3d { transition: opacity .25s ease; }
.livro3d.saiu .cena3d, .livro3d.saiu .sombra3d { opacity: 0; }

/* ---------- livro por dentro (folhear) ---------- */
.folheando, .folheando body { overflow: hidden; }
.folhear-tela { position: fixed; inset: 0; z-index: 100; touch-action: none; overscroll-behavior: contain; }
.folhear-tela[hidden] { display: none; }
.folhear-fundo { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, #2A3C78 0%, #121A3D 72%); }
.folhear-fundo, .folhear-topo, .folhear-controles { opacity: 0; transition: opacity .35s ease; }
.visivel .folhear-fundo, .visivel .folhear-topo, .visivel .folhear-controles { opacity: 1; }
.folhear-caixa:focus { outline: none; }
.folhear-caixa { position: relative; height: 100%; max-width: 1240px; margin: 0 auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(var(--s2) + env(safe-area-inset-top)) var(--lado) calc(var(--s3) + env(safe-area-inset-bottom)); }
.folhear-topo { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: var(--s2); align-items: center; }
.folhear-topo p { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 18px; line-height: 1.2; color: #fff; }
.folhear-topo b { font-weight: 600; color: var(--amarelo); }
.folhear-fechar { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.folhear-fechar svg { width: 22px; height: 22px; }
.folhear-palco { min-height: 0; display: grid; place-items: center; padding: var(--s3) 0; touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; cursor: pointer; }
.livro-voo { transition: transform .65s cubic-bezier(.2, .75, .25, 1), opacity .25s ease; }
.saindo .livro-voo { opacity: 0; transform: scale(.94); }
.livro-aberto { --pw: 300px; --ph: 424px; position: relative; width: var(--pw); height: var(--ph); perspective: 2400px; transition: transform .9s cubic-bezier(.45, .05, .25, 1); }
.livro-aberto.duplo { width: calc(var(--pw) * 2); }
.livro-aberto.duplo.fechado { transform: translateX(calc(var(--pw) * -.5)); }
.folha-livro, .pg-base { position: absolute; top: 0; left: 0; width: var(--pw); height: var(--ph); }
.duplo .folha-livro, .duplo .pg-base { left: var(--pw); }
.folha-livro { transform-origin: left center; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.45, .05, .25, 1), opacity .2s ease; }
.folha-livro.virada { transform: rotateY(-180deg); }
.livro-aberto:not(.duplo) .folha-livro.virada { opacity: 0; transition: transform .9s cubic-bezier(.45, .05, .25, 1), opacity .25s ease .65s; }
.face-pg { position: absolute; inset: 0; overflow: hidden; background: #fff; border-radius: 2px 6px 6px 2px; backface-visibility: hidden; -webkit-backface-visibility: hidden; container-type: inline-size; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.verso-pg { transform: rotateY(180deg); border-radius: 6px 2px 2px 6px; }
.face-pg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(28, 42, 90, .16), rgba(28, 42, 90, 0) 7%); }
.verso-pg::after { background: linear-gradient(270deg, rgba(28, 42, 90, .16), rgba(28, 42, 90, 0) 7%); }
.face-pg > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-branca { width: 100%; height: 100%; background: linear-gradient(270deg, #EFEDE6, #FFFFFF 40%); }
.sem-transicao .livro-voo, .sem-transicao .livro-aberto, .sem-transicao .folha-livro { transition: none !important; }
.folhear-controles { width: 100%; max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: var(--s2); align-items: center; }
.folhear-seta { width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--amarelo); color: var(--azul); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 0 #E0A21F; }
.folhear-seta svg { width: 26px; height: 26px; }
.folhear-seta:disabled { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .35); box-shadow: none; cursor: default; }
.folhear-meio { text-align: center; }
.folhear-contador { font-weight: 800; font-size: 15px; line-height: 1.3; color: #fff; }
.folhear-dica { margin-top: 4px; font-weight: 700; font-size: 13px; line-height: 1.3; color: #AEB7D6; transition: opacity .3s ease; }
.mexeu .folhear-dica { opacity: 0; }
/* páginas feitas em HTML dentro do livro (crescem junto com a página) */
.pg-html { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw; padding: 10cqw 9cqw; text-align: center; background: var(--creme); }
.pg-etiqueta { font-weight: 900; font-size: 3.4cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.pg-titulo { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 7.2cqw; line-height: 1.15; color: var(--azul); text-wrap: balance; }
.pg-texto { font-weight: 700; font-size: 4.3cqw; line-height: 1.45; color: var(--suave); }
.pg-capas { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4cqw; }
.pg-capas img { width: calc((100% - 4 * 2.4cqw) / 5); height: auto; border-radius: 1cqw; box-shadow: 0 1cqw 2.5cqw rgba(28, 42, 90, .2); }
.pg-fim { background: #fff; }
.pg-fim img { width: 18cqw; height: 18cqw; }
.pg-botao { width: 100%; min-height: max(44px, 13cqw); margin-top: 2cqw; display: flex; align-items: center; justify-content: center; border-radius: 3cqw; background: var(--verde-botao); color: #fff; text-decoration: none; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 5.2cqw; box-shadow: 0 1.6cqw 3.6cqw rgba(22, 163, 74, .34); }
.pg-link { font-weight: 800; font-size: 4.2cqw; color: var(--azul); text-underline-offset: 3px; }

/* turma dividida em volta do livro 3D: Theo e Lia à esquerda, Rafa e Pista à direita, pés na linha da sombra */
.turma-lado { --alt: 84px; position: absolute; bottom: 46px; z-index: 1; display: flex; align-items: flex-end; pointer-events: none; }
.turma-lado.esq { right: calc(50% + var(--w) / 2 - 10px); }
.turma-lado.dir { left: calc(50% + var(--w) / 2 - 10px); }
.turma-lado img { display: block; height: var(--alt); width: auto; }
.turma-lado .p-lia { margin-left: -10px; }
.turma-lado .p-pista { height: calc(var(--alt) * .64); margin-left: -6px; }
@media (min-width: 600px) { .turma-lado { --alt: 150px; } }
@media (min-width: 900px) { .turma-lado { --alt: 210px; bottom: 50px; } .turma-lado.esq { right: calc(50% + var(--w) / 2 + 10px); } .turma-lado.dir { left: calc(50% + var(--w) / 2 + 10px); } }
.livro3d.saiu .turma-lado { opacity: 0; transition: opacity .25s ease; }

/* seção do gibi */
.paginas-gibi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.paginas-gibi img { border-radius: 10px; box-shadow: 0 8px 24px rgba(28, 42, 90, .14); }
.legenda-gibi { list-style: none; display: grid; gap: var(--s2); max-width: 640px; margin: var(--s4) auto 0; padding: 0; text-align: left; }
.legenda-gibi li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.4; }
.legenda-gibi b { color: var(--azul); font-weight: 900; }

/* cartão "em breve" */
.selo-breve { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: var(--amarelo, #FFC23B); color: var(--azul, #1C2A5A); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.cartao.em-breve { outline: 2px dashed var(--amarelo); outline-offset: -2px; }
.legenda-gibi + .chamada { margin-top: var(--s4); }
.cartao.em-breve { position: relative; }
.cartao.em-breve .selo-breve { position: absolute; top: -10px; right: 14px; margin: 0; }
@media (min-width: 900px) { .cartoes-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .cartoes-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* aviso de compra real (vendas.js): canto inferior esquerdo, acima da barra de preço */
.aviso-venda { position: fixed; left: 12px; bottom: 96px; z-index: 40; max-width: 250px; padding: 8px 12px; font-size: 13px !important; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(28, 42, 90, .18); font-size: 14px; line-height: 1.35; color: var(--azul); display: grid; gap: 2px; opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.aviso-venda.aberto { opacity: 1; transform: none; }
.aviso-venda b { font-weight: 900; }
.aviso-venda span { color: var(--suave); }
@media (min-width: 900px) { .aviso-venda { bottom: 24px; left: 24px; } }

/* grama na linha dos pés da turma e do livro */
.grama { position: absolute; left: -20px; right: -20px; bottom: 22px; height: 42px; z-index: 0; background: url(img/grama.svg) repeat-x center bottom / 240px 42px; pointer-events: none; }
.livro3d .cena3d, .livro3d .sombra3d { position: relative; z-index: 1; }
.livro3d .sombra3d { opacity: .55; }
@media (min-width: 900px) { .grama { height: 54px; bottom: 26px; background-size: 300px 54px; } }
.heroi .legenda-turma { margin-top: var(--s2); font-size: 15px; color: var(--suave); }
.legenda-turma b { color: var(--azul); font-weight: 900; }
/* pés da turma dentro da grama */
.turma-lado { bottom: 36px; }
@media (min-width: 900px) { .turma-lado { bottom: 40px; } }
/* tufos na frente dos pés: a turma pisa dentro da grama */
.grama-frente { position: absolute; left: -20px; right: -20px; bottom: 30px; height: 14px; z-index: 2; background: url(img/grama-frente.svg) repeat-x left bottom / 120px 14px; pointer-events: none; }
@media (min-width: 900px) { .grama-frente { bottom: 32px; height: 18px; background-size: 150px 18px; } }

/* prévias legíveis do caso (recortes grandes em vez de páginas inteiras) */
.previas { display: grid; gap: var(--s4); max-width: 880px; margin-left: auto; margin-right: auto; }
.previa { margin: 0; background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 8px 24px rgba(28, 42, 90, .12); }
.previa img { display: block; width: 100%; height: auto; border-radius: 10px; }
.previa figcaption { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 15px; line-height: 1.4; text-align: left; }
.previa figcaption b { color: var(--azul); font-weight: 900; }
.previas + .chamada { margin-top: var(--s4); }
@media (min-width: 900px) { .previas { grid-template-columns: 1.25fr 1fr 1fr; align-items: start; } }

/* página "O que vem no kit" no fim do livro que folheia */
.pg-kit { gap: 3cqw; }
.pg-lista { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 2.6cqw; text-align: left; }
.pg-lista li { display: flex; align-items: center; gap: 3.5cqw; padding: 2cqw 3cqw; border-radius: 3cqw; background: #fff; box-shadow: 0 .8cqw 2cqw rgba(28, 42, 90, .08); }
.pg-lista img { width: 15cqw; height: 15cqw; object-fit: contain; flex: none; }
.pg-lista span { font-weight: 700; font-size: 3.6cqw; line-height: 1.35; color: var(--suave); }
.pg-lista b { display: block; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 4.6cqw; color: var(--azul); }
.pg-lista i { font-style: normal; margin-left: 1cqw; padding: .3cqw 1.6cqw; border-radius: 99px; background: var(--amarelo); font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 2.6cqw; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }

/* selo de conteúdo cristão no topo e contador de vendas reais */
.etiqueta-crista { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .75); color: var(--azul); font-weight: 800; font-size: 14px; }
.etiqueta-crista svg { width: 18px; height: 18px; color: var(--coral); }
.contador-vendas { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; margin-right: auto; padding: 6px 14px; border-radius: 99px; background: #E3F6E8; color: #1E6B3A; font-weight: 800; font-size: 14px; }
.contador-vendas[hidden] { display: none; }
.contador-vendas svg { width: 18px; height: 18px; }
.heroi .etiqueta-crista { display: flex; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.heroi .etiqueta-crista + h1 { margin-top: var(--s3); }
.aviso-venda { display: flex; align-items: center; gap: 10px; }
.aviso-inicial { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #1C2A5A; font-weight: 900; font-size: 15px; }
.aviso-texto { display: grid; gap: 1px; }
.aviso-texto small { font-size: 11px; font-weight: 800; color: #1E6B3A; }
.aviso-texto small::before { content: '✓ '; }
.heroi .contador-vendas { display: flex; width: max-content; max-width: 100%; }
.heroi .contador-vendas + .lead { margin-top: var(--s3); }

/* celular: o botão de compra precisa aparecer na primeira tela */
@media (max-width: 599px) {
  .heroi { padding-top: var(--s3); }
  .heroi .seguro { display: none; }
  .heroi .chamada { margin-top: var(--s3); }
  .heroi .chamada + .legenda-turma { margin-top: var(--s4); }
  .livro3d { --w: 158px; --d: 24px; --topo3d: 0px; }
  .turma-lado { --alt: 76px; }
  .sombra3d { margin-top: 12px; }
}
@media (max-width: 599px) and (max-height: 700px) {
  .livro3d { --w: 140px; }
  .turma-lado { --alt: 70px; }
}
.previa figcaption .quadro { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.previa figcaption .quadro svg { width: 24px; height: 24px; }
/* computador: os 4 cartões em 2 x 2, com a mesma altura de imagem */
@media (min-width: 900px) {
  .previas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .previa { display: flex; flex-direction: column; }
  .previa img { aspect-ratio: auto; object-fit: initial; } /* a tira inteira, sem cortar os balões dos lados */
  .previa figcaption { margin-top: auto; padding-top: 12px; } /* legendas alinhadas no pé dos cartões da mesma linha */
}
/* turma maior no celular (cresce com a largura da tela) */
@media (max-width: 599px) {
  .turma-lado { --alt: clamp(96px, 28vw, 122px); }
  .turma-lado.esq { right: calc(50% + var(--w) / 2 - 22px); }
  .turma-lado.dir { left: calc(50% + var(--w) / 2 - 22px); }
}
@media (max-width: 599px) and (max-height: 700px) { .turma-lado { --alt: 92px; } }

/* Preço de lançamento do Completo: preço riscado e relógio até a data fixa */
.preco-de { color: var(--coral-botao); font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s1); }
.preco-de s { text-decoration-thickness: 2px; text-decoration-color: #E5484D; }
.relogio { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s2); padding: 8px 12px; border-radius: 12px; background: #FFF1EE; color: #C2410C; font-weight: 700; font-size: 15px; line-height: 1.2; }
.relogio svg { width: 20px; height: 20px; flex: none; }
.relogio b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra-compra .preco-barra s { font-size: 15px; color: var(--suave); text-decoration-color: #E5484D; }
.relogio-mini { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: #C2410C; font-weight: 700; font-size: 12px; line-height: 1.2; }
.relogio-mini svg { width: 14px; height: 14px; flex: none; }
.relogio-mini b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.relogio-mini span { white-space: nowrap; }
/* barra de compra no estilo das páginas de venda: selo de desconto e relógio em pílula */
.barra-compra .rotulo-barra { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.selo-desconto { padding: 2px 6px; border-radius: 6px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 800; line-height: 1.3; }
.barra-compra .relogio-mini { grid-column: 1 / -1; justify-content: center; margin: calc(-1 * var(--s3)) calc(-1 * var(--s3)) 0; padding: 6px var(--s3); background: #FFF1EE; font-size: 13px; }

.depoimento-print { padding: var(--s2); }
.depoimento-print img { display: block; width: 100%; height: auto; border-radius: 12px; }
.depoimento-print figcaption { display: flex; align-items: center; gap: 12px; margin-top: var(--s2); padding: 0 var(--s1) var(--s1); color: var(--suave); font-size: 15px; line-height: 1.3; }
.depoimento-print figcaption b { display: block; color: var(--tinta); }
.depoimento-print .dep-destaque { margin: var(--s1) var(--s1) var(--s3); font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 21px; line-height: 1.25; color: var(--azul); text-wrap: balance; } /* a frase da pessoa, legível sem zoom */
.breve-mini { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: var(--amarelo-claro); color: #8A5A00; font-style: normal; font-weight: 800; font-size: 12px; line-height: 1.4; vertical-align: 1px; white-space: nowrap; }

/* planos: o Essencial tem botão secundário e o empurrão de R$ 10 para o Completo */
.plano .empurra { margin-top: var(--s3); padding: var(--s2) var(--s3); border-radius: 12px; background: var(--amarelo-claro); color: var(--tinta); font-size: 15px; font-weight: 600; line-height: 1.4; }
.plano .empurra a { color: var(--azul); font-weight: 800; }
.plano .empurra + .botao { margin-top: var(--s3); }
.plano:not(.destaque) .botao.botao-leve, .botao.botao-leve { background: #fff; color: var(--verde-botao); border: 2px solid var(--verde-botao); box-shadow: 0 6px 16px rgba(22, 163, 74, .14); }

/* por que funciona: técnicas com pesquisa e a estante das fontes */
.ciencia { margin-top: var(--s5); padding-top: var(--s5); border-top: 2px dashed #E3E7F2; }
.ciencia-titulo { display: flex; align-items: center; justify-content: center; gap: var(--s1); margin-bottom: var(--s3); color: var(--azul); font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.3; text-align: center; }
.ciencia-titulo svg { width: 28px; height: 28px; flex: none; }
.ciencia-titulo.pesquisado { margin-top: var(--s5); }
.ciencia .fonte { color: var(--suave); font-size: 13px; font-style: italic; line-height: 1.4; }
.ciencia-nota { margin-top: var(--s2); color: var(--suave); font-size: 14px; text-align: center; }
.estante { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); padding: 0; }
.estante li { display: flex; flex-direction: column; gap: 4px; padding: var(--s2) var(--s3); border-radius: 12px; background: #fff; border-left: 6px solid var(--amarelo); line-height: 1.3; }
.estante li:nth-child(3n+2) { border-left-color: var(--coral, #FF6A4D); }
.estante li:nth-child(3n) { border-left-color: #2FA79A; }
.estante b { color: var(--tinta); font-size: 15px; }
.estante span { color: var(--suave); font-size: 13px; }
.secao.branco .estante li { background: #F4F6FB; }
@media (min-width: 900px) { .cartoes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .estante { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px) { .estante { grid-template-columns: repeat(2, minmax(0, 1fr)); } .estante li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* site enxuto (12/10): "por que funciona" em lista, estante em etiquetas, bônus deitados no celular */
.ciencia-lista { list-style: none; display: grid; gap: var(--s3); padding: 0; }
.ciencia-lista li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s2); align-items: start; line-height: 1.45; }
.ciencia-lista li > :first-child { width: 44px; height: 44px; }
.ciencia-lista b { color: var(--tinta); }
.ciencia-lista small { display: block; margin-top: 2px; color: var(--suave); font-size: 13px; font-style: italic; }
.estante { display: flex !important; flex-wrap: wrap; gap: var(--s1); }
.estante li { display: inline-block; padding: 6px 12px; border-radius: 999px; border-left: 0; background: #fff; font-size: 13px; color: var(--suave); }
.secao.branco .estante li { background: #F4F6FB; }
.estante li b { font-size: 13px; }
@media (max-width: 599px) {
  /* celular: foto larga em cima, na largura toda do cartão, com páginas reais do material */
  .bonus { gap: var(--s3); } /* cartões mais juntos: menos rolagem entre um bônus e outro */
  .bonus .cartao { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px var(--s3); align-items: start; text-align: left; }
  .bonus .cartao picture { grid-row: auto; display: block; position: relative; margin-bottom: var(--s2); }
  .bonus .bonus-biblia picture { padding-top: 30px; }
  .bonus .cartao img { width: 100%; height: auto; margin: 0; aspect-ratio: auto; object-fit: initial; }
  .bonus .bonus-biblia picture::after { content: 'Páginas reais'; position: absolute; left: 0; top: 0; padding: 4px 10px; border-radius: 999px; background: var(--azul); color: #fff; font-weight: 900; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
  .bonus .cartao h3 { font-size: 17px; }
  .bonus .cartao p:not(.numero) { font-size: 14px; }
  /* o bônus largo (leque de desenhos) não cabe em miniatura: no celular a foto vai inteira em cima */
  .bonus .cartao.bonus-largo { grid-template-columns: minmax(0, 1fr); }
  .bonus .bonus-largo picture { grid-row: auto; margin-bottom: var(--s2); }
  .bonus .bonus-largo img { width: 100%; }
}

/* logo da turma (Agência Por Quê?) no topo da seção do gibi */
.logo-turma { display: block; width: min(280px, 78vw); height: auto; margin: 0 auto var(--s3); translate: 2.1% 0; /* as letras ficam 19 px à esquerda na imagem: centro óptico */ transform-origin: 50% 90%; animation: logo-balanca 4.8s ease-in-out infinite; }
.secao:has(> .miolo > .cabeca > .logo-turma) { padding-top: var(--s4); } /* a logo já pesa: o vão até o herói fica menor que o das outras seções */
@keyframes logo-balanca { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-6px) rotate(1.2deg); } }
@media (prefers-reduced-motion: reduce) { .logo-turma { animation-duration: 6.5s; } } /* mais devagar, mas mexe */
@media (min-width: 900px) { .logo-turma { width: 340px; } }

/* briefing da turma: 4 rostos com nome e papel, logo abaixo da logo */
.turma-mini { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1); max-width: 440px; margin: 0 auto var(--s4); padding: 0; }
.turma-mini li { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; line-height: 1.2; }
.turma-mini img { width: 64px; height: 64px; border-radius: 50%; display: block; }
.turma-mini b { color: var(--tinta); font-size: 15px; }
.turma-mini span { color: var(--suave); font-size: 13px; }
@media (max-width: 359px) { .turma-mini img { width: 56px; height: 56px; } .turma-mini span { font-size: 12px; } }

/* artigo de pré-venda */
.artigo { max-width: 680px; margin: 0 auto; }
.artigo-selo { display: inline-flex; align-items: center; gap: var(--s1); padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--suave); font-size: 14px; font-weight: 700; }
.artigo-selo svg { width: 18px; height: 18px; flex: none; color: var(--azul); }
.artigo h1 { margin-top: var(--s3); font-size: clamp(28px, 7vw, 40px); line-height: 1.15; }
.artigo h2 { margin-top: var(--s5); font-size: 22px; }
.artigo p { margin-top: var(--s2); color: var(--tinta); font-size: 18px; line-height: 1.6; }
.artigo .artigo-abre { margin-top: var(--s3); font-size: 20px; }
.artigo-figura { margin: var(--s4) 0 0; }
.artigo-figura img { width: 100%; height: auto; display: block; border-radius: 16px; }
.artigo-figura figcaption { margin-top: var(--s1); color: var(--suave); font-size: 14px; text-align: center; }
.artigo-chamada { margin-top: var(--s4); display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.artigo-link { color: var(--azul); font-weight: 800; }
.artigo .artigo-fonte { margin-top: var(--s5); color: var(--suave); font-size: 13px; line-height: 1.5; }
.plano .nota-qg { display: flex; gap: var(--s1); align-items: flex-start; margin-top: var(--s3); padding: var(--s2) var(--s3); border-radius: 12px; background: #EEF2FF; color: var(--tinta); font-size: 14px; line-height: 1.4; }
.plano .nota-qg svg { width: 20px; height: 20px; flex: none; color: var(--azul); }
.plano .nota-qg:has(.nota-qg-logo) { align-items: center; }
.nota-qg-logo { width: 52px; height: auto; flex: none; } /* a logo do QG da Turma no lugar do ícone de controle */
/* texto só para leitor de tela */
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.barra-compra .rotulo-barra { white-space: nowrap; }

/* os 52 casos, por livro */
.temas { display: grid; gap: var(--s1); max-width: 760px; margin: var(--s4) auto 0; }
.temas details { border-radius: 16px; background: #fff; }
.secao.branco .temas details { background: #F4F6FB; }
.temas summary { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); cursor: pointer; list-style: none; font-weight: 800; color: var(--tinta); }
.temas summary::-webkit-details-marker { display: none; }
.temas summary::after { content: ''; width: 24px; height: 24px; margin-left: auto; flex: none; border-radius: 50%; background: linear-gradient(var(--azul), var(--azul)) center / 10px 2.5px no-repeat, linear-gradient(var(--azul), var(--azul)) center / 2.5px 10px no-repeat, var(--amarelo); transition: transform .2s ease; }
.temas details[open] summary::after { transform: rotate(45deg); }
.temas-n { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--azul); color: #fff; font-size: 12px; letter-spacing: .04em; }
.temas-t { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.25; }
.temas ol { list-style: none; display: grid; gap: var(--s1); padding: 0 var(--s3) var(--s3); margin: 0; }
.temas li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s1); color: var(--tinta); font-size: 15px; line-height: 1.4; }
.temas li span { color: var(--coral-botao); font-weight: 800; font-size: 13px; padding-top: 1px; }
.temas-cabeca { margin-top: var(--s5); }
.temas-t { text-wrap: balance; }
/* sequência nova (12/10, avaliação do GPT): subtítulos dentro da mesma seção, faixa dos pais, pesquisa que abre */
.sub-cabeca { margin-top: 56px; }
#planos { scroll-margin-top: var(--s5); }
.faixa-pais { display: flex; gap: var(--s2); align-items: flex-start; max-width: 760px; margin: var(--s4) auto 0; padding: var(--s3); border-radius: 16px; background: #E9F7EF; color: var(--tinta); line-height: 1.45; }
.faixa-pais svg { width: 28px; height: 28px; flex: none; color: #1E8E5A; }
/* Para cada idade: o que muda dos 6 aos 14 anos (mesmo texto da página Como usar dos livros) */
.idades { max-width: 760px; margin: var(--s4) auto 0; }
.idades-titulo { display: flex; align-items: center; justify-content: center; gap: var(--s1); font-weight: 900; color: var(--tinta); }
.idades-titulo svg { width: 24px; height: 24px; flex: none; color: var(--coral); }
.idades ul { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: var(--s2); }
.idades li { display: flex; flex-direction: column; gap: 4px; padding: var(--s3); border-radius: 16px; background: #F4F6FB; line-height: 1.45; }
.idades li b { color: var(--azul); font-weight: 900; }
.idades li span { color: var(--suave); font-size: 15px; }
@media (min-width: 700px) { .idades ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); } }
details.ciencia > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
details.ciencia > summary::-webkit-details-marker { display: none; }
details.ciencia > summary::after { content: ''; width: 24px; height: 24px; flex: none; border-radius: 50%; background: linear-gradient(var(--azul), var(--azul)) center / 10px 2.5px no-repeat, linear-gradient(var(--azul), var(--azul)) center / 2.5px 10px no-repeat, var(--amarelo); transition: transform .2s ease; }
details.ciencia[open] > summary::after { transform: rotate(45deg); }
details.ciencia[open] > summary { margin-bottom: var(--s3); }
/* rua da turma com o QG atrás da logo (ilustração parada, sem animação).
   A ilustração ocupa a seção inteira (altura 100%, largura 3x a altura) e o QG, que fica a 47,5% dela,
   cai bem debaixo da logo; só a borda de cima se funde com o fundo da página. */
.bairro { position: relative; width: 100cqw; margin: 0 0 var(--s4) calc(50% - 50cqw); padding: 64px 0 clamp(120px, 26vw, 220px); overflow: hidden; } /* 64px de céu acima da turma: a fusão (48px) termina antes das cabeças */
.secao:has(> .miolo > .cabeca > .bairro), .secao:has(> .miolo > .bairro) { padding-top: 0; } /* o céu começa colado no fim do topo */
.bairro::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; aspect-ratio: 3 / 1; translate: -47.5% 0; background: url(img/bairro-qg-900.webp) center / 100% 100% no-repeat; -webkit-mask-image: linear-gradient(transparent, #000 48px); mask-image: linear-gradient(transparent, #000 48px); pointer-events: none; }
.bairro::after { content: ''; position: absolute; inset: auto 0 0 0; height: 24px; background: linear-gradient(rgba(244, 245, 250, 0), var(--fundo)); pointer-events: none; }
.bairro .logo-turma { position: relative; z-index: 1; margin-bottom: 0; }
@media (min-width: 900px) { .bairro::before { background-image: url(img/bairro-qg.webp); } }
/* topo: céu aberto e gramado ilustrados (mesmo traço da rua da Agência); nuvens animadas por cima */
.ceu { background: url(img/ceu-topo-800.webp) center bottom / cover no-repeat; -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
@media (min-width: 700px) { .ceu { background-image: url(img/ceu-topo.webp); } }
.livro3d .grama, .livro3d .grama-frente { visibility: hidden; } /* o gramado agora é da ilustração; a .grama só marca onde a turma pisa */

/* as nuvens só passam no céu: nunca descem até o gramado ou as casinhas */
.heroi .nuvem { max-height: 18%; }
/* sombra no gramado embaixo dos pés de cada personagem */
.turma-lado .pe { position: relative; display: block; flex: none; }
.turma-lado .pe img { max-width: none; }
.turma-lado .pe::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: -7px; height: 16px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(22, 58, 16, .6), rgba(22, 58, 16, .25) 60%, rgba(22, 58, 16, 0)); }
.turma-lado .pe:has(.p-pista)::after { left: 8%; right: 18%; }
@media (min-width: 900px) { .turma-lado .pe::after { height: 24px; bottom: -10px; } }
.livro3d .sombra3d { opacity: .8; }
/* os dois grupos com a mesma largura: o conjunto fica simétrico em volta do livro (Theo+Lia é mais largo que Rafa+Pista) */
.turma-lado .p-lia { margin-left: calc(var(--alt) * -.22); }
.turma-lado .p-pista { margin-left: calc(var(--alt) * .07); }
/* sombra mais larga que os pés (o botão "Toque no livro" cobre a parte de baixo) */
.turma-lado .pe::after { left: -12%; right: -12%; bottom: -3px; height: 18px; background: radial-gradient(closest-side, rgba(22, 58, 16, .55), rgba(22, 58, 16, .22) 65%, rgba(22, 58, 16, 0)); }
@media (min-width: 900px) { .turma-lado .pe::after { height: 26px; bottom: -6px; } }
/* brilho mais forte atrás do livro: o livro é o herói da página */
.luz3d .halo { inset: 4%; background: radial-gradient(circle, rgba(255, 246, 214, .95) 0%, rgba(255, 214, 102, .7) 26%, rgba(255, 194, 59, .3) 50%, rgba(255, 194, 59, 0) 72%); }
/* camadas: sombra (0) embaixo do personagem (1), sem z-index negativo, que sumia atrás do gramado */
.turma-lado .pe::after { z-index: 0; }
.turma-lado .pe img { position: relative; z-index: 1; }

/* ===== O que seu filho vai receber: a maleta da Agência ===== */
.maleta-secao { overflow: hidden; }
.maleta-secao .apoio { color: #C9D0E8; }
/* o que tem dentro, explicado */
.dentro { list-style: none; display: grid; gap: var(--s3); margin-top: var(--s5, 32px); }
@media (min-width: 700px) { .dentro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .dentro { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dentro-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.dentro-item > * + * { margin-top: 0; }
.dentro-item h3 { font-size: 20px; }
.dentro-item p:last-child { margin-top: var(--s1); }
.dentro-plano { font-weight: 900; font-size: 12px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: #2BA36A; }
.dentro-plano.completo { color: var(--coral); }
.dentro-plano + h3 { margin-top: 4px; }
.nota-pdf { display: flex; gap: var(--s2); align-items: center; justify-content: center; max-width: 720px; margin: var(--s4) auto 0; color: #E4E8F5; text-align: left; }
.nota-pdf svg { width: 30px; height: 30px; flex: none; color: var(--amarelo); --miolo: var(--amarelo); --miolo-op: .35; }

/* ===== Maleta digital dos planos: toca na maleta do cartão e ela abre em tela cheia ===== */
.maleta-abrir { position: relative; display: block; width: 100%; margin-top: var(--s3); padding: 0 0 26px; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.maleta-abrir img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: contain; transform-origin: 50% 90%; animation: balanca 5s ease-in-out 1.5s infinite; }
.maleta-abrir + .inclui { margin-top: var(--s3); }
.maleta-convite { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--s1); min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--azul); color: #fff; font: 800 14px/1.2 'Nunito', system-ui, sans-serif; white-space: nowrap; box-shadow: 0 4px 12px rgba(28, 42, 90, .25); }
.maleta-convite svg { width: 20px; height: 20px; color: var(--amarelo); animation: tocar 2.4s ease-in-out infinite; transform-origin: 50% 80%; }
.maleta-abrir:hover .maleta-convite, .maleta-abrir:focus-visible .maleta-convite { background: #26387A; }
@keyframes balanca { 0%, 80%, 100% { transform: none; } 84% { transform: rotate(-3deg); } 88% { transform: rotate(3deg); } 92% { transform: rotate(-2deg); } 96% { transform: rotate(1deg); } }

.maleta-tela .folhear-caixa { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.maleta-compra { width: 100%; max-width: 460px; margin: 0 auto var(--s3); }
.maleta-compra .botao { width: 100%; min-height: 48px; }
.maleta-compra .botao[hidden] { display: none; }
.no-fim .maleta-compra { display: none; }
.maleta-palco { display: block; align-self: stretch; height: 100%; overflow: hidden; margin: 0 calc(-1 * var(--lado)); padding: var(--s3) 0; }
.maleta-trilho { display: flex; width: 100%; height: 100%; /* largura presa: a capa (flex em coluna com imagem em %) alargava o trilho do Completo para 584px num celular de 390 */ transition: transform .45s cubic-bezier(.2, .75, .25, 1); }
.maleta-trilho[hidden] { display: none; }
.maleta-trilho.sem-transicao { transition: none; }
.saindo .maleta-trilho { opacity: 0; transition: opacity .25s ease; }
.maleta-slide { flex: 0 0 100%; min-width: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center; padding: 0 var(--lado); }
/* capa: a maleta fechada, que brilha ao abrir */
.maleta-capa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); }
.maleta-capa-img { display: block; width: min(80%, 420px); height: auto; max-height: 72%; object-fit: contain; transition: transform .55s cubic-bezier(.2, .75, .25, 1); }
.aberta .maleta-capa-img { animation: maleta-abre .7s ease-out both; }
@keyframes maleta-abre { 0% { filter: none; transform: scale(1); } 45% { filter: drop-shadow(0 0 36px rgba(255, 194, 59, .85)); transform: scale(1.07); } 100% { filter: drop-shadow(0 0 22px rgba(255, 194, 59, .5)); transform: scale(1); } }
.maleta-capa-txt { font-weight: 700; font-size: 16px; line-height: 1.4; color: #AEB7D6; text-align: center; }
.maleta-capa-txt b { color: #fff; }
/* cada item da maleta */
.maleta-item { width: 100%; max-width: 460px; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.maleta-foto { min-height: 0; padding: var(--s3); background: var(--creme); }
/* a foto cresce até o espaço que sobra na tela (topo, setas e texto do item ocupam uns 400 px) */
.maleta-foto img { display: block; width: 100%; height: auto; max-height: max(140px, calc(100dvh - 420px)); object-fit: contain; }
.maleta-texto { padding: var(--s3) var(--s4) var(--s4); text-align: center; }
.maleta-tag { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #E3F5EA; color: #1E7A45; font-weight: 900; font-size: 13px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.maleta-tag.bonus { background: var(--amarelo); color: var(--azul); } /* o que só o Completo tem: etiqueta forte, para decidir passando o olho */
.maleta-texto h3, .maleta-fim h3 { margin-top: var(--s1); font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--azul); text-wrap: balance; }
.maleta-texto p:last-child { margin-top: var(--s1); font-size: 15px; line-height: 1.45; color: var(--suave); }
/* fim da maleta: o botão do plano */
.maleta-fim { width: 100%; max-width: 460px; max-height: 100%; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s4); border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.maleta-fim h3 { margin-top: 0; }
.maleta-fim .botao { width: 100%; margin-top: var(--s1); }
.maleta-fim-img { width: 150px; height: auto; }
.maleta-mini { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s2); gap: var(--s1); width: 100%; }
.maleta-mini li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.maleta-mini img { width: 100%; height: auto; max-height: 64px; object-fit: contain; }
.maleta-mini span { font-weight: 800; font-size: 12px; line-height: 1.2; color: var(--suave); }
.maleta-preco { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 44px; line-height: 1; color: var(--azul); }
.maleta-preco small { font-size: 20px; margin-right: 4px; }
.maleta-fim-nota { font-size: 14px; font-weight: 700; color: var(--suave); }
.maleta-link { min-height: 44px; padding: 0 var(--s2); border: 0; background: none; color: var(--azul); font: 800 15px/1.3 'Nunito', system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .maleta-abrir img, .maleta-convite svg, .aberta .maleta-capa-img { animation: none; }
  .maleta-trilho, .maleta-capa-img { transition: none; }
}
@media (min-width: 900px) { .maleta-item, .maleta-fim, .maleta-compra { max-width: 520px; } }

/* Com a Bíblia aberta: três Pistas da Bíblia reais, no mesmo desenho do livro */
.pistas-biblia { display: grid; gap: var(--s4); }
.pista-b { display: flex; flex-direction: column; background: #fff; border-radius: var(--raio); padding: var(--pad); box-shadow: 0 6px 20px rgba(28, 42, 90, .08); }
.pista-caso { font-weight: 900; font-size: 12px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-escuro); }
.pista-b h3 { margin-top: var(--s1); }
.pista-cartao { flex: 1; margin-top: var(--s3); padding: var(--s3); border: 1.5px solid var(--azul); border-radius: 14px; }
.pista-rotulo { display: flex; align-items: center; gap: var(--s1); font-weight: 900; font-size: 14px; color: var(--azul); }
.pista-rotulo svg { width: 28px; height: 28px; flex: none; padding: 4px; border-radius: 8px; background: var(--amarelo-claro); color: #9A6B00; }
.pista-cartao b { display: block; margin-top: var(--s2); font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 24px; line-height: 1.1; color: var(--azul); }
.pista-cartao small { display: block; margin-top: var(--s1); font-weight: 900; font-size: 11px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.pista-cartao p:last-child { margin-top: 4px; color: var(--tinta); line-height: 1.5; }
@media (min-width: 900px) { .pistas-biblia { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pista-b h3 { min-height: 2.4em; } }
.faixa-biblia { background: var(--amarelo-claro); }
.faixa-biblia svg { color: #9A6B00; }

/* perto do preço: deixa claro que é digital */
.nota-digital { display: flex; gap: var(--s2); align-items: flex-start; max-width: 640px; margin: var(--s4) auto 0; padding: var(--s3); border-radius: 16px; background: #EEF2FF; color: var(--tinta); font-size: 15px; line-height: 1.45; }
.nota-digital svg { width: 24px; height: 24px; flex: none; color: var(--azul); }
.nota-digital + .compra-segura { margin-top: var(--s4); }

/* perto dos planos: ver o produto por dentro antes de comprar */
.ver-antes { max-width: 760px; margin: var(--s5) auto 0; padding: var(--pad); border-radius: var(--raio); background: #fff; text-align: center; box-shadow: 0 6px 20px rgba(28, 42, 90, .08); }
.ver-antes p { margin-top: var(--s1); color: var(--suave); }
/* o que acontece no Caso 01 grátis: quem lê, quem conduz, quanto tempo e o que fica */
.ver-antes-lista { list-style: none; max-width: 560px; margin: var(--s3) auto 0; padding: 0; display: grid; gap: var(--s1); text-align: left; }
.ver-antes-lista li { position: relative; padding-left: 24px; line-height: 1.45; color: var(--tinta); }
.ver-antes-lista li::before { content: ''; position: absolute; left: 4px; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.ver-antes-lista b { font-weight: 900; }
.ver-antes-acoes { display: flex; flex-direction: column; align-items: center; gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 600px) { .ver-antes-acoes { flex-direction: row; justify-content: center; gap: var(--s4); } }
.ver-antes .botao { max-width: 320px; }

/* Completo: brilho atrás da maleta (raios girando devagar, halo e estrelinhas) */
.maleta-abrir.com-luz img { position: relative; z-index: 1; }
.maleta-abrir.com-luz .maleta-convite { z-index: 2; }
.maleta-luz { position: absolute; left: 50%; top: 44%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; }
.maleta-luz .halo { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 214, .95) 0%, rgba(255, 214, 102, .65) 30%, rgba(255, 194, 59, .22) 52%, rgba(255, 194, 59, 0) 70%); animation: respirar 5s ease-in-out infinite; }
.maleta-luz .raios { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 194, 59, .34) 0deg 6deg, rgba(255, 194, 59, 0) 6deg 24deg); -webkit-mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .5) 40%, transparent 64%); mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .5) 40%, transparent 64%); animation: girar-raios 70s linear infinite; }
.maleta-luz .brilho { position: absolute; width: 20px; height: 20px; animation: piscar 3.2s ease-in-out infinite; }
.maleta-luz .brilho svg { width: 100%; height: 100%; display: block; }
.maleta-luz .b1 { left: 16%; top: 24%; }
.maleta-luz .b2 { right: 15%; top: 20%; width: 14px; height: 14px; animation-delay: .8s; }
.maleta-luz .b3 { right: 12%; top: 60%; width: 24px; height: 24px; animation-delay: 1.6s; }
.maleta-luz .b4 { left: 12%; top: 64%; width: 14px; height: 14px; animation-delay: 2.2s; }
.plano.destaque { overflow: hidden; } /* os raios não passam da borda do cartão */
@media (prefers-reduced-motion: reduce) { .maleta-luz .raios { animation-duration: 90s; } .maleta-luz .brilho { animation-duration: 6s; } }

/* "O que seu filho vai receber": os 6 bônus do Completo numa faixa de destaque, a linha inteira */
.dentro-item.dentro-bonus { grid-column: 1 / -1; background: #fff linear-gradient(90deg, #FFF3CF 0%, #fff 70%); box-shadow: inset 0 0 0 3px var(--amarelo); }

/* "Veja por dentro" agora abre a seção dos bônus: sem vão em cima, e o título dos bônus respira depois dele */
.miolo > .ver-antes:first-child { margin-top: 0; }
.ver-antes + .cabeca-bonus { margin-top: var(--secao); }

/* perguntas frequentes: as 4 respostas que mais importam, já abertas */
.faq-rapido { max-width: 760px; margin-left: auto; margin-right: auto; padding: var(--pad); border-radius: var(--raio); background: var(--amarelo-claro); }
.faq-rapido-titulo { font-weight: 900; color: var(--azul); }
.faq-rapido dl { display: grid; gap: var(--s2); margin-top: var(--s2); }
.faq-rapido dt { font-weight: 800; color: var(--azul); }
.faq-rapido dd { color: var(--tinta); line-height: 1.45; }
@media (min-width: 700px) { .faq-rapido dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); } }
.faq-rapido + .faq { margin-top: var(--s4); }

/* barra fixa: só o Completo, preço e a garantia de pagamento único */
.barra-compra .nota-barra { font-size: 12px; font-weight: 700; color: var(--suave); line-height: 1.3; }
.barra-compra .nota-barra span { display: block; }

/* oferta de 24 horas do Completo */
.preco-bloco [hidden] { display: none !important; }
.depois-oferta { color: var(--suave); font-weight: 800; font-size: 15px; }
.oferta-fim { padding: 8px 12px; border-radius: 12px; background: #FFF1EE; color: #C2410C; font-weight: 700; font-size: 15px; line-height: 1.35; }
.barra b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* compra segura: 4 informações concretas de como a compra funciona (sem selo genérico) */
.compra-segura { max-width: 760px; margin: var(--s3) auto 0; }
.compra-segura-titulo { text-align: center; font-weight: 900; color: var(--azul); }
.compra-segura .selos { max-width: none; margin-top: var(--s2); }
.selos-compra li { align-items: start; }
.selos-compra .selo-texto small { font-size: 14px; line-height: 1.45; font-weight: 600; }
@media (min-width: 600px) {
  .selos.selos-compra { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s4); padding: var(--s2) var(--s3); text-align: left; }
  .selos.selos-compra li { grid-template-columns: 44px minmax(0, 1fr); justify-items: stretch; gap: var(--s2); padding: var(--s2) 0; }
  .selos.selos-compra li + li { border-left: 0; border-top: 1px solid var(--linha); }
  .selos.selos-compra li:nth-child(2) { border-top: 0; }
}
.https { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--s2); font-size: 13px; font-weight: 700; color: var(--suave); }
.https svg { width: 16px; height: 16px; }

/* vitrine: "O que você recebe" com os dois planos */
.pg-kit { gap: 1.8cqw; justify-content: center; padding-top: 6cqw; padding-bottom: 6cqw; } /* a frase do QG foi para a página própria: o conteúdo cabe e fica no meio */
.pg-grupo { width: 100%; margin-top: 1.6cqw; text-align: left; font-weight: 900; font-size: 3.1cqw; letter-spacing: .1em; text-transform: uppercase; color: #2BA36A; }
.pg-grupo.destaque { color: var(--coral); }
.pg-itens { list-style: none; margin: 0; padding: 2.4cqw 3cqw; width: 100%; display: grid; gap: 1.4cqw; text-align: left; border-radius: 3cqw; background: #fff; box-shadow: 0 .8cqw 2cqw rgba(28, 42, 90, .08); }
.pg-itens.pg-bonus { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3cqw; background: var(--amarelo-claro); }
.pg-itens .pg-presente { grid-column: 1 / -1; color: var(--azul); font-weight: 900; } /* 7 itens em 2 colunas: o QG fecha a lista na linha toda, sem buraco */
.pg-itens li { position: relative; padding-left: 4.6cqw; font-weight: 700; font-size: 3.5cqw; line-height: 1.3; color: var(--tinta); }
.pg-itens li::before { content: ''; position: absolute; left: 0; top: .5cqw; width: 3cqw; height: 3cqw; border-radius: 50%; background: #2BB673 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat; }
.pg-itens.pg-bonus li::before { background-color: var(--coral); }
.pg-nota { width: 100%; font-weight: 700; font-size: 3cqw; line-height: 1.35; color: var(--suave); text-align: left; }
.ciencia-nota.autoridade { margin-top: var(--s5); font-weight: 800; font-size: 16px; color: var(--azul); }
.ciencia-nota.autoridade + .ciencia-titulo.pesquisado { margin-top: var(--s3); }

/* ---------- mãozinha que mostra onde tocar no livro 3D (aparece uma vez e some) ---------- */
.mao-dica { --mao: 54px; position: absolute; z-index: 5; left: 50%; top: calc(var(--topo3d) + var(--h) * .55); width: var(--mao); height: var(--mao);
  margin: calc(var(--mao) * -.088) 0 0 calc(var(--mao) * -.441); pointer-events: none; opacity: 0; filter: drop-shadow(0 4px 6px rgba(28, 42, 90, .28)); }
@media (min-width: 600px) { .mao-dica { --mao: 64px; } }
.mao-dica svg { display: block; width: 100%; height: 100%; transform-origin: 44% 9%; }
.mao-dica .onda { position: absolute; left: 44.1%; top: 8.8%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(28, 42, 90, .3); opacity: 0; }
.mao-dica.mostra { animation: mao-vem 5s ease-in-out forwards; }
.mao-dica.mostra svg { animation: mao-toca 5s ease-in-out forwards; }
.mao-dica.mostra .onda { animation: mao-onda 5s ease-out forwards; }
@keyframes mao-vem { 0% { opacity: 0; transform: translate(70px, 80px); } 10% { opacity: 1; } 30% { transform: none; } 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(26px, 34px); } }
@keyframes mao-toca { 0%, 34% { transform: none; } 40% { transform: translateY(3px) scale(.86); } 46%, 58% { transform: none; } 64% { transform: translateY(3px) scale(.86); } 70%, 100% { transform: none; } }
@keyframes mao-onda { 0%, 39% { opacity: 0; transform: scale(.3); } 41% { opacity: 1; transform: scale(.4); } 52% { opacity: 0; transform: scale(1.4); } 63% { opacity: 0; transform: scale(.3); } 65% { opacity: 1; transform: scale(.4); } 76%, 100% { opacity: 0; transform: scale(1.4); } }
/* "Reduzir movimento": a mão aparece no lugar, sem viajar, e toca de leve */
@media (prefers-reduced-motion: reduce) {
  @keyframes mao-vem { 0% { opacity: 0; transform: translate(12px, 14px); } 14% { opacity: 1; } 30% { transform: none; } 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
}
.livro3d.saiu .mao-dica { display: none; }
/* aviso de amostra no topo do folhear (o livro completo é maior do que o que aparece) */
.folhear-amostra { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; line-height: 1.35; opacity: .85; }

/* vitrine: página do QG da Turma (antes da página final), no mesmo céu da Central */
.pg-qg { gap: 2.6cqw; background: radial-gradient(120% 60% at 50% 100%, #F3FBFF 0%, rgba(243, 251, 255, 0) 60%), linear-gradient(#7CC6F4, #B7E1FB 55%, #E4F5FF); }
.pg-qg .pg-etiqueta { color: var(--azul); }
.pg-qg-logo { width: 48cqw; height: auto; filter: drop-shadow(0 1.6cqw 2cqw rgba(28, 42, 90, .22)); }
.pg-qg-ilha { width: 74cqw; height: auto; margin-top: -6cqw; filter: drop-shadow(0 2.6cqw 2.6cqw rgba(28, 42, 90, .18)); animation: c-flutua-pg 5.5s ease-in-out infinite; }
@keyframes c-flutua-pg { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.4cqw; } }
@media (prefers-reduced-motion: reduce) { .pg-qg-ilha { animation-duration: 10s; } }
.pg-qg .pg-texto { color: var(--azul); }
/* blocos "?" em 3D na página do QG (os mesmos da Central): dão a cara de fase de jogo */
.pg-qg { position: relative; overflow: hidden; }
.pg-bloco-voo { --t: 9cqw; position: absolute; width: var(--t); height: var(--t); perspective: 60cqw; animation: c-flutua-pg 4.2s ease-in-out infinite; }
.pg-bloco-voo.b1 { left: 8cqw; top: 44%; animation-delay: -1.4s; }
.pg-bloco-voo.b2 { right: 8cqw; top: 27%; --t: 7.4cqw; animation-delay: -2.8s; }
.pg-bloco { position: absolute; inset: 0; transform-style: preserve-3d; animation: pg-gira 9s linear infinite; }
.b2 .pg-bloco { animation-duration: 12s; animation-direction: reverse; }
@keyframes pg-gira { from { transform: rotateX(-14deg) rotateY(0deg); } to { transform: rotateX(-14deg) rotateY(360deg); } }
.pg-bloco i { position: absolute; inset: 0; display: grid; place-items: center; border: max(2px, .7cqw) solid #1C2A5A; border-radius: 1.6cqw; background: linear-gradient(145deg, #FFDB6E, #FFC23B 55%, #F2A516);
  box-shadow: inset 0 .7cqw 0 rgba(255, 255, 255, .55), inset 0 -.7cqw 0 rgba(150, 90, 0, .25); color: #1C2A5A; font: 700 calc(var(--t) * .6)/1 'Fredoka', system-ui, sans-serif; font-style: normal; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pg-bloco .f1 { transform: translateZ(calc(var(--t) / 2)); }
.pg-bloco .f2 { transform: rotateY(90deg) translateZ(calc(var(--t) / 2)); }
.pg-bloco .f3 { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
.pg-bloco .f4 { transform: rotateY(-90deg) translateZ(calc(var(--t) / 2)); }
.pg-bloco .f5 { transform: rotateX(90deg) translateZ(calc(var(--t) / 2)); background: #FFD45E; }
.pg-bloco .f6 { transform: rotateX(-90deg) translateZ(calc(var(--t) / 2)); background: #E09A12; }
@media (prefers-reduced-motion: reduce) { .pg-bloco { animation-duration: 30s; } .pg-bloco-voo { animation-duration: 10s; } }
/* brilhinhos de jogo na página do QG: losango de pontas arredondadas (não é estrela), amarelo com miolo claro, que pulsa devagar */
.pg-brilho { position: absolute; width: 4cqw; height: 4cqw; border-radius: 30%; background: radial-gradient(circle at 50% 50%, #FFFBE6 0 28%, #FFD45E 30%); border: .5cqw solid #F2A516; transform: rotate(45deg); box-shadow: 0 0 2.6cqw .4cqw rgba(255, 200, 70, .7); animation: pg-brilha 3.2s ease-in-out infinite; pointer-events: none; }
.pg-brilho.g1 { left: 12cqw; top: 22%; }
.pg-brilho.g2 { right: 14cqw; top: 47%; width: 3cqw; height: 3cqw; animation-delay: -1.1s; }
.pg-brilho.g3 { left: 18cqw; bottom: 30%; width: 2.6cqw; height: 2.6cqw; animation-delay: -2.2s; }
@keyframes pg-brilha { 0%, 100% { opacity: .65; scale: .78; } 50% { opacity: 1; scale: 1.08; } }
@media (prefers-reduced-motion: reduce) { .pg-brilho { animation-duration: 7s; } }
.maleta-tag.presente { background: #E3F2FF; color: #1C2A5A; } /* QG: presente que vem depois, com cor diferente dos bônus */

/* QG da Turma na página de venda: cartão escuro (a cara do Fliperama), print da sala e os 4 jogos com a logo de cada um */
.qg-venda { max-width: 880px; margin: var(--secao) auto 0; padding: var(--pad) var(--s3); border-radius: var(--raio); background: radial-gradient(120% 70% at 50% 0%, #2E4386 0%, rgba(46, 67, 134, 0) 70%), linear-gradient(#1C2A5A, #16224B); color: #fff; box-shadow: 0 14px 40px rgba(28, 42, 90, .28); }
.qg-venda-cabeca { max-width: 640px; margin: 0 auto; text-align: center; }
.qg-venda-cabeca > * + * { margin-top: var(--s2); }
.qg-venda-cabeca > .etiqueta-secao + h2 { margin-top: var(--s1); }
.qg-venda-logo { width: 156px; height: auto; margin: 0 auto var(--s3); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); }
.qg-venda .etiqueta-secao { color: var(--amarelo); }
.qg-venda h2 { color: #fff; }
.qg-venda .marca { background: none; color: var(--amarelo); padding: 0; }
.qg-venda .apoio { color: #C9D2F0; }
.qg-venda-sala { margin: var(--s4) 0 0; }
.qg-venda-sala img { width: 100%; border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 255, 255, .12); }
.qg-venda-sala figcaption { margin-top: var(--s2); text-align: center; font-size: 14px; line-height: 1.4; color: #C9D2F0; }
.qg-venda-sala figcaption b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--amarelo); color: var(--azul); font-weight: 900; font-size: 13px; vertical-align: 1px; }
.qg-venda-jogos { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s2); margin-top: var(--s4); }
/* cada jogo num cartão retangular, como no Fliperama do QG: print do jogo atrás, a logo por cima e o versículo no rodapé */
.qg-venda-jogos li { overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); text-align: center; }
.qg-venda-print { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.qg-venda-print > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.qg-venda-print::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(14, 22, 56, .4), rgba(14, 22, 56, 0)); }
/* todas as logos na mesma caixa (a da Arca é mais alta): ficam do mesmo tamanho nos 4 cartões */
.qg-venda-logo-jogo { position: absolute; z-index: 1; left: 50%; top: 50%; width: 80%; aspect-ratio: 358 / 288; translate: -50% -50%; object-fit: contain; object-position: center; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.qg-venda-jogos p { padding: 8px 6px; font-weight: 800; font-size: 15px; line-height: 1.3; color: var(--azul); }
.qg-venda-fatos { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1); margin-top: var(--s4); }
.qg-venda-fatos li { display: inline-flex; align-items: center; gap: var(--s1); min-height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-weight: 800; font-size: 14px; }
.qg-venda-fatos svg { width: 20px; height: 20px; color: var(--amarelo); flex: none; }
.qg-venda-nota { margin-top: var(--s2); text-align: center; font-size: 14px; color: #C9D2F0; }
.qg-venda + .sub-cabeca { margin-top: var(--secao); }
@media (min-width: 900px) {
  .qg-venda { padding: var(--pad); }
  .qg-venda-logo { width: 190px; }
  .qg-venda-jogos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
}

/* as 3 formas de fazer a atividade (papel, caderno, celular), logo abaixo das prévias */
.jeitos { max-width: 880px; margin: var(--s4) auto 0; padding: var(--pad); border-radius: var(--raio); background: #fff; box-shadow: 0 6px 20px rgba(28, 42, 90, .08); }
.jeitos-titulo { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--azul); text-align: center; }
.jeitos ul { list-style: none; display: grid; gap: var(--s3); margin-top: var(--s3); }
.jeitos li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s2); align-items: center; font-size: 15px; line-height: 1.4; }
.jeitos li .quadro { width: 48px; height: 48px; border-radius: 14px; }
.jeitos li .quadro svg { width: 28px; height: 28px; }
.jeitos li b { display: block; color: var(--azul); font-weight: 900; font-size: 16px; }
.jeitos + .chamada { margin-top: var(--s4); }
@media (min-width: 900px) {
  .jeitos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
  .jeitos li { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
}

/* "O que seu filho vai receber": o QG com a própria logo e cor de céu, para não confundir com os PDFs */
.dentro-item.dentro-qg { grid-template-columns: 72px minmax(0, 1fr); align-items: center; background: #fff linear-gradient(90deg, #DDEEFF 0%, #fff 70%); box-shadow: inset 0 0 0 3px #8DB0FF; }
.dentro-qg-logo { width: 72px; height: auto; }

/* maleta do Essencial: abaixo das miniaturas dos 6 bônus, a linha do QG */
.maleta-mini-qg { display: flex; align-items: center; justify-content: center; gap: var(--s1); font-weight: 800; font-size: 13px; line-height: 1.3; color: var(--suave); }
.maleta-mini-qg img { width: 40px; height: auto; flex: none; }

/* Completo: o QG é a última linha da lista, com a logo no lugar do ✓ (fica na mesma altura da linha riscada do Essencial) */
.destaque .inclui li.li-qg { margin: 0 -8px; padding: 4px 8px; border-radius: 10px; background: #E2ECFF; grid-template-columns: 34px minmax(0, 1fr); }
.inclui li.li-qg img { width: 34px; height: auto; margin-top: calc((1.55em - 28px) / 2); }

/* vitrine: as logos dos 4 jogos no lugar da ilha */
.pg-qg-jogos { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2cqw 3cqw; width: 64cqw; }
.pg-qg-jogos li { display: grid; place-items: center; }
.pg-qg-jogos img { width: 100%; height: 22cqw; object-fit: contain; filter: drop-shadow(0 1.2cqw 1.4cqw rgba(28, 42, 90, .22)); animation: c-flutua-pg 5.5s ease-in-out infinite; }
.pg-qg-jogos li:nth-child(2) img { animation-delay: -1.4s; }
.pg-qg-jogos li:nth-child(3) img { animation-delay: -2.8s; }
.pg-qg-jogos li:nth-child(4) img { animation-delay: -4.2s; }
/* vitrine: a página do QG com a cabana da sala no fundo (a mesma do QG), escurecida em cima e embaixo para o texto ficar legível */
.pg-qg { background: linear-gradient(rgba(16, 24, 58, .78), rgba(16, 24, 58, .25) 32%, rgba(16, 24, 58, .25) 62%, rgba(16, 24, 58, .86)), url('qg/img/sala.webp') 50% 40% / cover no-repeat, #1C2A5A; }
.pg-qg .pg-etiqueta { color: var(--amarelo); }
.pg-qg .pg-texto { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .45); }

/* maleta: todos os cartões com a mesma altura (ocupam o espaço entre o título e o botão de compra, com o mesmo vão em cima e embaixo).
   Antes cada item tinha a altura da sua foto e ficava solto no meio: o vão mudava de item para item e o cartão "pulava" ao passar. */
.maleta-slide:has(> .maleta-item), .maleta-slide:has(> .maleta-fim) { place-items: stretch center; }
.maleta-item, .maleta-fim { height: 100%; max-height: 680px; align-self: center; }
/* a foto preenche a área creme sem empurrar o texto (as fotos em pé, como o Guia, faziam o cartão crescer) */
.maleta-foto { position: relative; flex: 1 1 0; }
.maleta-foto img { position: absolute; inset: var(--s3); width: calc(100% - 2 * var(--s3)); height: calc(100% - 2 * var(--s3)); max-height: none; object-fit: contain; }
.maleta-texto { flex: none; }
.maleta-fim { justify-content: center; }
/* celular baixo: o cartão final (com as 7 miniaturas e 3 botões) fica mais compacto para caber sem rolar */
@media (max-height: 760px) {
  .maleta-fim { gap: var(--s1); padding: var(--s3); }
  .maleta-fim h3 { font-size: 19px; }
  .maleta-mini img { max-height: 44px; }
  .maleta-fim .botao { margin-top: 0; }
}
@media (max-height: 660px) {
  .maleta-mini { row-gap: 4px; }
  .maleta-mini img { max-height: 32px; }
  .maleta-fim .maleta-link { min-height: 36px; }
}
/* maleta, item do QG: a cabana da sala preenche a área da foto e as logos (imagem transparente) ficam por cima, no meio */
.maleta-foto-qg { background: linear-gradient(rgba(16, 24, 58, .5), rgba(16, 24, 58, .12) 40%, rgba(16, 24, 58, .12) 66%, rgba(16, 24, 58, .55)), url('qg/img/sala.webp') 50% 45% / cover no-repeat, #1C2A5A; }
@media (min-width: 900px) { .qg-venda-jogos p { font-size: 16px; } }
/* maleta: texto do item um tom mais escuro, para ler melhor no celular */
.maleta-texto p:last-child { color: #4A5272; }
@media (max-width: 359px) { .depois-botao { font-size: 14px; } } /* celular de 320: a linha cabe inteira, sem cortar */

/* topo: a amostra grátis como botão de contorno, logo abaixo do botão principal (o pai prova antes de pagar) */
.botao-amostra { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: 44px; padding: 0 var(--s4); border-radius: 999px; border: 2px solid var(--azul); background: #fff; color: var(--azul); font-weight: 800; font-size: 16px; text-decoration: none; }
.botao-amostra svg { width: 22px; height: 22px; flex: none; }
.botao-amostra:hover { background: var(--amarelo-claro); }
button.link-amostra { border: 0; background: none; font: inherit; font-weight: 800; cursor: pointer; padding: 0; }

/* depois da compra: 3 telas de verdade da Central em moldura de celular (no celular, passam para o lado) */
.depois-compra { margin-top: var(--s5); text-align: center; }
.depois-compra h3 { margin-top: var(--s1); color: #fff; }
.depois-compra ul { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--s3); margin: var(--s4) calc(-1 * var(--lado)) 0; padding: 0 var(--lado) var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--lado); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.depois-compra ul::-webkit-scrollbar { display: none; }
.depois-compra li { scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; }
.depois-compra li .celular-moldura { width: min(64%, 240px); }
.celular-moldura { display: block; padding: 6px; border-radius: 30px; background: #0B1230; box-shadow: 0 14px 30px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .12); }
.celular-moldura img { width: 100%; height: auto; border-radius: 24px; }
.depois-compra li p { display: flex; gap: var(--s1); align-items: flex-start; justify-content: center; margin-top: var(--s2); font-weight: 800; font-size: 15px; line-height: 1.35; color: #fff; text-align: left; }
.depois-compra li p b { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--amarelo); color: var(--azul); font-size: 14px; }
@media (min-width: 700px) { .depois-compra ul { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; } }

/* celular: os 3 exemplos da Pista da Bíblia passam para o lado (antes eram 3 cartões altos um embaixo do outro) */
@media (max-width: 899px) {
  .pistas-biblia { grid-auto-flow: column; grid-auto-columns: 100%; column-gap: calc(2 * var(--lado)); margin-left: calc(-1 * var(--lado)); margin-right: calc(-1 * var(--lado)); padding: 0 var(--lado) var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--lado); scrollbar-width: none; }
  .pistas-biblia::-webkit-scrollbar { display: none; }
  .pista-b { scroll-snap-align: center; }
}

/* celular: "O que seu filho vai receber" mais compacto (ícone menor, menos vão) */
@media (max-width: 599px) {
  .dentro { gap: var(--s2); }
  .dentro-item { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s2); padding: var(--s3); }
  .dentro-item .quadro { width: 44px; height: 44px; border-radius: 12px; }
  .dentro-item .quadro svg { width: 26px; height: 26px; }
  .dentro-item h3 { font-size: 18px; }
  .dentro-item p:last-child { font-size: 15px; }
  .dentro-item.dentro-qg { grid-template-columns: 60px minmax(0, 1fr); }
  .dentro-qg-logo { width: 60px; }
}
.heroi .contador-vendas[hidden] { display: none; } /* só aparece com vendas de verdade (vendas.js) */
@media (max-width: 359px) { .ver-antes .botao { padding-left: var(--s3); padding-right: var(--s3); gap: 6px; font-size: 17px; } } /* 320: o botão da amostra cabe numa linha */
@media (min-width: 700px) { .depois-compra li .celular-moldura { width: 100%; } }
/* bolinhas embaixo dos carrosséis do celular: mostram que há mais e qual está na tela (site.js) */
.pontos-carrossel { display: flex; justify-content: center; gap: 8px; margin-top: var(--s3); }
.pontos-carrossel button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(28, 42, 90, .22); cursor: pointer; transition: width .25s ease, background .25s ease; }
.pontos-carrossel button[aria-current="true"] { width: 26px; border-radius: 6px; background: var(--azul); }
.noite .pontos-carrossel button { background: rgba(255, 255, 255, .3); }
.noite .pontos-carrossel button[aria-current="true"] { background: var(--amarelo); }
.pontos-carrossel[hidden] { display: none; }
/* QG: slogan para os pais logo abaixo do título (o que mais preocupa é jogo e tela) */
.qg-venda-slogan { display: inline-block; margin-top: var(--s2); padding: 6px 16px; border-radius: 999px; background: rgba(255, 194, 59, .16); color: var(--amarelo); font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.3; text-wrap: balance; }
@media (min-width: 900px) { .qg-venda-slogan { font-size: 21px; } }
/* slogan em amarelo cheio (antes o fundo translúcido ficava cinza no azul) */
.qg-venda-slogan { background: var(--amarelo); color: var(--azul); box-shadow: 0 4px 0 #E0A21F; }
/* os 4 fatos para os pais em 2 colunas iguais (antes, no celular, ficavam 4 linhas; no PC, 3 + 1 sobrando) */
.qg-venda-fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-left: auto; margin-right: auto; }
.qg-venda-fatos li { justify-content: flex-start; min-height: 48px; padding: 6px 12px; border-radius: 14px; font-size: 14px; line-height: 1.25; text-align: left; }
@media (min-width: 600px) { .qg-venda-fatos li { justify-content: center; font-size: 15px; } }
@media (max-width: 419px) { .qg-venda-fatos { grid-template-columns: minmax(0, 1fr); max-width: 300px; gap: var(--s1); } .qg-venda-fatos li { min-height: 44px; } } /* celular estreito: um por linha, sem quebrar o texto */

/* play do vídeo dos jogos: em cima da foto da sala e na linha do QG do plano Completo */
.qg-venda-sala { position: relative; }
.qg-venda-play { position: absolute; left: 50%; top: calc(50% - 30px); translate: -50% -50%; z-index: 1; display: inline-flex; align-items: center; gap: var(--s1); min-height: 56px; padding: 0 var(--s4) 0 var(--s2); border: 0; border-radius: 999px; background: var(--amarelo); color: var(--azul); font: 700 18px/1 'Fredoka', system-ui, sans-serif; box-shadow: 0 6px 0 #E0A21F, 0 14px 30px rgba(0, 0, 0, .35); cursor: pointer; white-space: nowrap; }
.qg-venda-play svg { width: 40px; height: 40px; flex: none; padding: 9px; border-radius: 50%; background: var(--azul); color: #fff; }
.qg-venda-play:hover { filter: brightness(1.05); }
.li-qg-play { display: inline-flex; align-items: center; gap: 4px; vertical-align: 1px; margin-left: 4px; min-height: 30px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; background: var(--azul); color: #fff; font: 800 13px/1 'Nunito', system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.li-qg-play svg { width: 18px; height: 18px; flex: none; }
/* a janela do vídeo (em pé, 9:16): ocupa a altura da tela sem cortar */
.video-qg { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; }
.video-qg::backdrop { background: rgba(10, 14, 34, .88); }
.video-qg[open] { display: grid; place-items: center; }
.video-qg-caixa { position: relative; height: min(92dvh, calc((100vw - 32px) * 16 / 9)); aspect-ratio: 9 / 16; }
.video-qg video { display: block; width: 100%; height: 100%; border-radius: 18px; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.video-qg-fechar { position: absolute; right: -6px; top: -6px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--azul); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); cursor: pointer; }
.video-qg-fechar svg { width: 22px; height: 22px; }
@media (min-width: 700px) { .video-qg-fechar { right: -56px; top: 0; } }
/* fim do vídeo: o convite para o Completo aparece por cima, embaixo do vídeo */
.video-qg-fim { position: absolute; left: 50%; bottom: 3%; translate: -50% 0; display: flex; align-items: center; gap: var(--s1); width: min(88%, 360px); }
.video-qg-fim[hidden] { display: none; }
.video-qg-fim .botao { flex: 1; min-width: 0; min-height: 48px; padding-left: var(--s3); padding-right: var(--s3); }
.video-qg-de-novo { display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--azul); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); cursor: pointer; }
.video-qg-de-novo svg { width: 24px; height: 24px; }
/* o play da linha do QG não aumenta a altura da linha (senão a logo sai do alinhamento com os ✓) */
.li-qg-play { min-height: 26px; height: 26px; margin-top: -5px; margin-bottom: -5px; vertical-align: middle; line-height: 1; }
.junto { white-space: nowrap; } /* a palavra e o botão de play ficam na mesma linha */
.inclui li.li-qg span { text-wrap: balance; } /* se precisar quebrar, as duas linhas saem do mesmo tamanho */
/* play do vídeo logo abaixo do slogan (antes ficava em cima da foto da sala, cobrindo a agente): botão branco para não repetir o amarelo do slogan */
.qg-venda-play { position: static; translate: none; display: flex; width: max-content; margin: var(--s3) auto 0; min-height: 52px; background: #fff; color: var(--azul); box-shadow: 0 5px 0 rgba(0, 0, 0, .28), 0 12px 26px rgba(0, 0, 0, .3); font-size: 18px; }
.qg-venda-play svg { width: 36px; height: 36px; padding: 8px; background: var(--coral); }
.qg-venda-cabeca .qg-venda-play + .apoio { margin-top: var(--s3); }

/* vitrine, página do QG: botão secundário (contorno claro) que fecha o livro e leva à seção do QG, com os prints e o vídeo */
.pg-qg-ir { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6cqw; border: 2px solid rgba(255, 255, 255, .85); border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 800; font-size: 4.2cqw; text-decoration: none; }
.pg-qg-ir:active { background: rgba(255, 255, 255, .24); }
/* maleta do Essencial: os 7 bônus em 2 linhas (4 + 3, a de baixo centralizada), na mesma altura que os 6 de antes */
.maleta-mini { display: flex; flex-wrap: wrap; justify-content: center; }
.maleta-mini li { flex: 0 0 calc((100% - 3 * var(--s1)) / 4); }

/* frase de acesso embaixo dos botões de compra dos planos */
.acesso-hora { display: flex; gap: 8px; align-items: flex-start; justify-content: center; margin-top: var(--s2); font-size: 13px; line-height: 1.4; font-weight: 700; color: var(--suave, #5D6584); text-align: left; }
.acesso-hora .ph { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: var(--coral); }

/* "Qual é a dúvida do seu filho?": 8 perguntas reais logo depois da primeira tela */
.duvidas { list-style: none; max-width: 880px; margin: var(--s4) auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.duvidas a { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s1); height: 100%; padding: var(--s3); border-radius: 16px; background: #F4F6FB; color: var(--tinta); text-decoration: none; }
.duvidas b { font-weight: 900; font-size: 16px; line-height: 1.3; }
.duvidas small { color: var(--coral); font-weight: 900; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.duvidas-mais { margin-top: var(--s3); text-align: center; }
.duvidas-mais a { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 900; color: var(--azul); }
.duvidas-mais svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .duvidas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); } }
@media (max-width: 359px) { .duvidas b { font-size: 15px; } .duvidas a { padding: var(--s2); } }

/* "No que o material se apoia": a linha de fé à vista, logo depois das Pistas da Bíblia */
.linha-fe { max-width: 760px; margin: var(--s4) auto 0; padding: var(--pad); border-radius: var(--raio); background: #fff; box-shadow: 0 6px 20px rgba(28, 42, 90, .08); }
.linha-fe-titulo { display: flex; align-items: center; justify-content: center; gap: var(--s1); font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--azul); }
.linha-fe-titulo svg { width: 26px; height: 26px; color: var(--coral); flex: none; }
.linha-fe ul { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s2); }
.linha-fe li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s2); align-items: start; line-height: 1.45; color: var(--tinta); }
.linha-fe li svg { width: 24px; height: 24px; }
.linha-fe-nota { margin-top: var(--s3); font-size: 15px; line-height: 1.45; color: var(--suave); }
@media (min-width: 700px) { .linha-fe ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); } }

/* coleção atrás do livro 3D (arte do GPT, 29/10): tablet e celular à esquerda, caixa dos 13 livros à direita, centro vazio para o livro.
   A base fica 2 px acima da grama da frente (mais atrás que os pés da turma), os dois lados na mesma linha. */
.colecao-lado { --lw: 150px; --entra: 34px; position: absolute; bottom: 46px; z-index: 0; width: var(--lw); pointer-events: none; }
.colecao-lado img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(28, 42, 90, .18)); }
.colecao-lado.esq { right: calc(50% + var(--w) / 2 - var(--entra)); }
.colecao-lado.dir { left: calc(50% + var(--w) / 2 - var(--entra)); }
@media (min-width: 600px) { .colecao-lado { --lw: 250px; --entra: 44px; } }
@media (min-width: 900px) { .colecao-lado { --lw: 300px; --entra: 50px; bottom: 52px; } } /* 300 px: o topo das folhas não encosta no título */
.livro3d.saiu .colecao-lado { opacity: 0; transition: opacity .25s ease; }
/* tela larga: a turma fica do lado de fora da coleção, sem tapar o celular nem a caixa */
@media (min-width: 1280px) {
  .turma-lado.esq { right: calc(50% + var(--w) / 2 + 300px - 50px - 24px); }
  .turma-lado.dir { left: calc(50% + var(--w) / 2 + 300px - 50px - 24px); }
}
/* barra de compra fixa: com o botão em maiúsculas, o preço precisa caber numa linha até no celular de 320 */
.barra-compra .botao { font-size: 16px; letter-spacing: 0; padding: 0 16px; white-space: nowrap; }
.barra-compra .preco-barra, .barra-compra .nota-barra span { white-space: nowrap; }
@media (max-width: 359px) { .barra-compra .botao { font-size: 14px; padding: 0 12px; } }
/* frase de apoio logo abaixo da arte do topo (como na página do concorrente, com as nossas fontes) */
.heroi .slogan-topo { max-width: 400px; margin-left: auto; margin-right: auto; font-size: 17px; line-height: 1.5; color: #4E577A; text-wrap: balance; }
.slogan-topo b { color: var(--azul); font-weight: 900; }
.slogan-topo strong { color: var(--coral-botao); font-weight: 900; }
@media (min-width: 900px) { .heroi .slogan-topo { max-width: 520px; font-size: 19px; } }
/* bônus em 3D, como na página do concorrente: os livros no mesmo modelo do livro do topo (bonus-livros3d.mjs),
   o pôster e os cartões feitos no GPT; selo verde "Incluso no Completo" no fim de cada cartão (sem "valor de R$" inventado) */
.bonus .bonus-3d picture { display: block; text-align: center; }
.bonus .bonus-3d img { width: 220px; max-width: 100%; height: auto; aspect-ratio: 1; margin: 0 auto; object-fit: contain; }
@media (min-width: 600px) { .bonus .bonus-3d img { width: 260px; } }
.bonus .cartao .incluso { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--verde-botao-claro); color: #15803D; font-weight: 900; font-size: 14px; line-height: 1.2; }
.bonus .cartao .incluso svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 599px) { .bonus .cartao .incluso { margin-top: var(--s2); justify-self: start; } }
@media (min-width: 600px) { .bonus .bonus-largo .incluso { justify-self: start; align-self: start; margin-top: var(--s3); } }

/* página enxuta (29/10, noite): depoimentos em seção própria, garantia junto dos planos, "Para quem é" no topo das dúvidas, FAQ com "Mais perguntas" */
.planos ~ .garantia { margin-top: var(--s5); }
.planos ~ .garantia + .compra-segura { margin-top: var(--s4); }
.para-quem { max-width: 720px; margin-left: auto; margin-right: auto; margin-bottom: var(--s4); }
.para-quem-titulo { display: flex; align-items: center; justify-content: center; gap: var(--s1); font-weight: 900; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--azul); margin-bottom: var(--s2); }
.para-quem-titulo svg { width: 22px; height: 22px; color: var(--coral); }
.faq .faq-mais { margin-top: var(--s2); }
.faq .faq-mais > summary { font-weight: 900; color: var(--azul); }
.faq-lista { display: grid; gap: var(--s3); padding: 0 var(--s4) var(--s4); }
.faq-lista dt { font-weight: 800; color: var(--azul); }
.faq-lista dd { margin-top: 4px; color: var(--suave); line-height: 1.45; }
.nota-pdf a { color: var(--amarelo); font-weight: 900; text-underline-offset: 3px; }
/* 2ª rodada de cortes: o que vem no livro numa linha de selinhos, os 52 casos fechados num "Ver", fontes no fim das dúvidas */
.dentro-chips { list-style: none; padding: 0; max-width: 760px; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1); }
.dentro-chips li { display: inline-flex; align-items: center; gap: var(--s1); padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-weight: 800; font-size: 15px; line-height: 1.25; }
.dentro-chips svg { width: 20px; height: 20px; flex: none; color: var(--amarelo); }
.temas-todos { max-width: 760px; margin-left: auto; margin-right: auto; }
.temas-todos > summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: var(--s1); min-height: 52px; padding: 0 var(--s3); border-radius: 999px; border: 2px solid var(--azul); background: #fff; color: var(--azul); font-weight: 900; font-size: 16px; cursor: pointer; }
.temas-todos > summary::-webkit-details-marker { display: none; }
.temas-todos > summary::after { content: '+'; font-size: 22px; line-height: 1; color: var(--coral); }
.temas-todos[open] > summary::after { content: '−'; }
.temas-todos[open] > summary + .temas { margin-top: var(--s3); }
.faq + .faq-fontes { max-width: 760px; margin-left: auto; margin-right: auto; margin-top: var(--s3); }
.noite .apoio { color: #C9D0E8; } /* no fundo azul o cinza do apoio sumia */
/* 3ª rodada: no celular os bônus ficam 2 por linha (mesmo visual, metade da rolagem) */
@media (max-width: 599px) {
  .bonus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* subgrade: foto, número, título, texto e selo ficam na mesma altura nos dois cartões da linha */
  .bonus .cartao, .bonus .cartao.bonus-largo { grid-column: auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 5; gap: 0; padding: 12px; align-items: stretch; }
  .bonus .cartao .numero, .bonus .cartao h3 { margin-top: 4px; }
  .bonus .cartao p:not(.numero):not(.incluso) { margin-top: 4px; }
  .bonus .cartao picture { margin-bottom: 12px; }
  .bonus .bonus-3d img { width: 100%; }
  .bonus .bonus-biblia picture { padding-top: 0; }
  .bonus .bonus-biblia picture::after { display: none; }
  .bonus .bonus-largo picture { display: flex; align-items: center; aspect-ratio: 1; }
  .bonus .numero { font-size: 11px; letter-spacing: .1em; }
  .bonus .cartao h3 { font-size: 15px; line-height: 1.25; }
  .bonus .cartao p:not(.numero):not(.incluso) { font-size: 13px; line-height: 1.4; }
  .bonus .cartao .incluso { margin-top: 12px; align-self: start; justify-self: start; font-size: 11.5px; padding: 5px 9px 5px 7px; gap: 4px; white-space: nowrap; }
  .bonus .cartao .incluso svg { width: 14px; height: 14px; }
}
/* topo: um botão só; a amostra grátis vira link discreto */
.heroi .botao-amostra { min-height: 44px; padding: 0 var(--s1); border: 0; background: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; font-weight: 800; }
.heroi .botao-amostra:hover { background: none; }
@media (max-width: 389px) { .bonus .cartao p.incluso { white-space: normal; line-height: 1.25; } } /* celular pequeno: o selo quebra em duas linhas em vez de vazar do cartão */
@media (min-width: 420px) { .qg-venda-fatos { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; } } /* 3 selos (sem anúncio, sem compra, sem estranho) numa linha */
@media (max-width: 599px) { .bonus .cartao p.incluso { justify-self: stretch; justify-content: center; padding: 5px 6px; gap: 4px; font-size: 11px; white-space: normal; text-align: center; line-height: 1.25; } } /* o selo ocupa a largura do cartão e nunca vaza */
@media (max-width: 599px) { .bonus .cartao .incluso svg { display: none; } }
/* depoimentos no computador: os 3 lado a lado em tela larga; entre 900 e 1179 px, 2 em cima e o 3º no centro */
@media (min-width: 900px) { .depoimentos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); } .depoimentos > * { flex: 0 1 380px; min-width: 0; } }
@media (min-width: 1180px) { .depoimentos { gap: var(--s3); } .depoimentos > * { flex-basis: 336px; } }

/* botões de compra mais chamativos: um brilho que atravessa o botão a cada 3,5 s e um halo verde que respira.
   No iPhone com "Reduzir movimento" também aparece, só mais devagar (como o resto da página) */
.botao:not(.botao-claro):not(.botao-whats):not(.botao-leve) { position: relative; overflow: hidden; isolation: isolate; animation: cta-halo 2.8s ease-in-out infinite; }
.botao:not(.botao-claro):not(.botao-whats):not(.botao-leve)::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 42%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-20deg); animation: cta-brilho 3.5s ease-in-out infinite; }
.botao:not(.botao-claro):not(.botao-whats):not(.botao-leve) svg { transition: transform .2s ease; }
.botao:not(.botao-claro):not(.botao-whats):not(.botao-leve):hover svg { transform: translateX(3px); }
@keyframes cta-brilho { 0%, 52% { left: -70%; } 82%, 100% { left: 135%; } }
@keyframes cta-halo { 0%, 100% { box-shadow: 0 12px 26px rgba(22, 163, 74, .34); } 50% { box-shadow: 0 12px 30px rgba(22, 163, 74, .5), 0 0 0 5px rgba(22, 163, 74, .14); } }
.botao.botao-leve { position: relative; }
@media (prefers-reduced-motion: reduce) { .botao:not(.botao-claro):not(.botao-whats):not(.botao-leve) { animation-duration: 5s; } .botao:not(.botao-claro):not(.botao-whats):not(.botao-leve)::after { animation-duration: 6s; } }
@media (max-width: 599px) { .chamada-bonus .botao, .maleta-compra .botao, .maleta-fim .botao, .video-qg-fim .botao { font-size: 17px; letter-spacing: .01em; padding-left: 14px; padding-right: 14px; } } /* botões com o preço: uma linha só no celular */
@media (max-width: 359px) { .chamada-bonus .botao, .maleta-compra .botao, .maleta-fim .botao, .video-qg-fim .botao { font-size: 15px; padding-left: 10px; padding-right: 10px; gap: 6px; } }