/* Conheça o App do Pregador — página oficial de apresentação (mobile-first; 1rem = 10px).
   Mesmo visual do app (grafite + azul noite) com o dourado da SanWeb; cenas reais atrás dos aparelhos. */
:root {
  --cq-ouro: #c9a24a; --cq-ouro-claro: #e9c46f; --cq-ouro-fundo: rgba(201,162,74,.14);
  --cq-escuro: #0b0c0e; --cq-escuro-2: #16181c; --cq-claro: #f5f5f7; --cq-claro-sub: #b9bcc4;
  --cq-largura: 116rem;
  --cq-titulo: clamp(3rem, 7.4vw, 5.6rem);
  --cq-h2: clamp(2.6rem, 5.4vw, 4.2rem);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.cq { overflow-x: hidden; }
body.cq::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--cq-escuro); }
.cq img { max-width: 100%; display: block; }

/* ── Topo ─────────────────────────────────────── */
.cq-topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 1rem;
  padding: 1rem max(1.6rem, env(safe-area-inset-right, 0px)) 1rem max(1.6rem, env(safe-area-inset-left, 0px));
  background: rgba(11,12,14,.72); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid rgba(255,255,255,.08); color: var(--cq-claro); }
.cq-marca { display: inline-flex; align-items: center; gap: .8rem; color: var(--cq-claro); text-decoration: none; font-weight: 700; font-size: 1.6rem; letter-spacing: -.01em; margin-right: auto; }
.cq-marca i { font-size: 2.6rem; color: #9dbcf0; }
.cq-selo { display: none; align-items: center; gap: .6rem; color: var(--cq-claro-sub); text-decoration: none; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; }
.cq-s { display: inline-block; width: 1.6rem; aspect-ratio: 680 / 680; vertical-align: middle;
  background: linear-gradient(110deg, #a8761f 0%, #e9c46f 40%, #fff4d6 50%, #e9c46f 60%, #a8761f 100%); background-size: 260% 100%;
  -webkit-mask: url(/assets/conheca/sanweb-simbolo.webp) center / contain no-repeat; mask: url(/assets/conheca/sanweb-simbolo.webp) center / contain no-repeat;
  animation: cq-brilho 6s linear infinite; }
.cq-selo .cq-s { width: 2.4rem; }
.cq-entrar { display: inline-flex; align-items: center; min-height: 4.4rem; padding: 0 1.8rem; border-radius: 98rem; font-weight: 600; font-size: 1.5rem;
  color: var(--cq-escuro); background: var(--cq-claro); text-decoration: none; }
@media (min-width: 560px) { .cq-selo { display: inline-flex; } }
@keyframes cq-brilho { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* ── Peças comuns ─────────────────────────────── */
.cq-largura { width: 100%; max-width: var(--cq-largura); margin: 0 auto;
  padding-left: max(2rem, env(safe-area-inset-left, 0px)); padding-right: max(2rem, env(safe-area-inset-right, 0px)); }
.cq-estreito { max-width: 80rem; }
.cq-faixa { padding-block: 6.4rem; }
.cq-faixa--suave { background: var(--ap-cartao); border-block: 1px solid var(--ap-contorno); }
.cq-dois { display: grid; gap: 4.4rem; align-items: center; }
.cq-pilha { display: flex; flex-direction: column; gap: 3.2rem; }
.cq-col { display: flex; flex-direction: column; gap: 1.6rem; }
.cq-col h2, .cq-cabeca h2 { margin: 0; font-size: var(--cq-h2); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
.cq-col p { margin: 0; font-size: 1.75rem; line-height: 1.55; color: var(--ap-sub); max-width: 58rem; }
.cq-cabeca { display: flex; flex-direction: column; gap: 1rem; }
.cq-rotulo { display: inline-flex; align-items: center; gap: .6rem; color: var(--ap-acento); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .12em; }
.cq-rotulo--ouro { color: var(--cq-ouro); }
.cq-lista { margin: .4rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.1rem; }
.cq-lista li { position: relative; padding-left: 3rem; font-size: 1.65rem; line-height: 1.5; }
.cq-lista li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--ap-acento-suave) center / 1.1rem no-repeat; box-shadow: inset 0 0 0 1.5px var(--ap-acento); }
.cq-lista li::after { content: ""; position: absolute; left: .6rem; top: calc(.35em + .45rem); width: .6rem; height: .35rem; border-left: 2px solid var(--ap-acento); border-bottom: 2px solid var(--ap-acento); transform: rotate(-45deg); }

.cq-btn { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 5.2rem; padding: 0 2.4rem; border-radius: 98rem;
  font-weight: 700; font-size: 1.65rem; text-decoration: none; transition: transform .15s, filter .2s, background-color .2s; }
.cq-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.cq-btn:focus-visible, .cq a:focus-visible, .cq summary:focus-visible { outline: 3px solid var(--cq-ouro); outline-offset: 3px; }
.cq-btn--ouro { color: #1c1406; background: linear-gradient(180deg, #f0d48a, var(--cq-ouro)); box-shadow: 0 12px 28px -12px rgba(201,162,74,.75); }
.cq-btn--vidro { color: var(--cq-claro); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cq-btn--linha { color: var(--ap-texto); box-shadow: inset 0 0 0 1.5px var(--ap-contorno); background: transparent; }
.cq-btn--linha-claro { color: var(--cq-claro); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); align-self: flex-start; }
.cq-btn--grande { min-height: 6rem; padding: 0 3.2rem; font-size: 1.8rem; }

/* ── Aparelhos (moldura realista em CSS + tela real) ─ */
.cel { position: relative; margin: 0; width: min(27rem, 72vw); aspect-ratio: 600 / 1299; padding: 1rem; border-radius: 4.6rem;
  background: linear-gradient(145deg, #3a3d44, #121316 38%, #050506 62%, #2c2f35);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 0 2px #0a0a0b, 0 50px 80px -30px rgba(0,0,0,.6), 0 18px 30px -18px rgba(0,0,0,.5); }
.cel::before { content: ""; position: absolute; top: 2.1rem; left: 50%; z-index: 2; width: 30%; height: 2.6rem; transform: translateX(-50%); border-radius: 98rem; background: #000; }
.cel::after { content: ""; position: absolute; inset: 1rem; z-index: 3; border-radius: 3.7rem; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 26%, transparent 42%); }
.cel__tela { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 3.7rem; background: #000; }
.cel__tela img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tab { position: relative; margin: 0; width: 100%; aspect-ratio: 1000 / 1439; padding: 1.4rem; border-radius: 3.4rem;
  background: linear-gradient(145deg, #3a3d44, #121316 40%, #050506 64%, #2c2f35);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 50px 90px -34px rgba(0,0,0,.55); }
.tab::after { content: ""; position: absolute; inset: 1.4rem; border-radius: 2.2rem; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.14), transparent 35%); }
.tab__tela { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 2.2rem; background: #fff; }
.tab__tela img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ── 1. Abertura ──────────────────────────────── */
.cq-heroi { position: relative; isolation: isolate; overflow: hidden; color: var(--cq-claro); background: var(--cq-escuro);
  padding-block: 4rem 6rem; }
.cq-heroi__fundo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
.cq-heroi::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,12,14,.55) 0%, rgba(11,12,14,.35) 30%, rgba(11,12,14,.86) 70%, var(--cq-escuro) 100%); }
.cq-heroi__grade { width: 100%; max-width: var(--cq-largura); margin: 0 auto; display: grid; gap: 4rem; align-items: center;
  padding-left: max(2rem, env(safe-area-inset-left, 0px)); padding-right: max(2rem, env(safe-area-inset-right, 0px)); }
.cq-heroi__texto { display: flex; flex-direction: column; gap: 1.8rem; }
.cq-heroi .cq-rotulo { color: var(--cq-ouro-claro); }
.cq-heroi h1 { margin: 0; font-size: var(--cq-titulo); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }
.cq-heroi h1 span { color: var(--cq-ouro-claro); font-family: "Literata", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -.02em; }
.cq-heroi p { margin: 0; font-size: 1.8rem; line-height: 1.55; color: #d6d8de; max-width: 52rem; }
.cq-botoes { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.cq-botoes .cq-btn { flex: 1 1 auto; }
.cq-selos { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; font-size: 1.4rem; color: var(--cq-claro-sub); }
.cq-selos li { display: inline-flex; align-items: center; gap: .6rem; }
.cq-selos i { color: var(--cq-ouro-claro); font-size: 1.8rem; }
.cq-heroi__aparelhos { position: relative; display: flex; justify-content: center; perspective: 1600px; padding-block: 1rem 2rem; }
.cel--heroi { transform: rotateY(-14deg) rotateX(4deg) rotateZ(1.5deg); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 0 0 2px #0a0a0b, 40px 60px 90px -30px rgba(0,0,0,.85), 0 0 120px -20px rgba(233,196,111,.28); }
.cq-relogio { position: absolute; left: 50%; bottom: 0; transform: translateX(-108%); display: grid; grid-template-columns: auto auto; column-gap: .8rem; align-items: center;
  padding: 1.2rem 1.6rem; border-radius: 1.8rem; background: rgba(22,24,28,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 20px 40px -18px rgba(0,0,0,.8); }
.cq-relogio i { grid-row: span 2; font-size: 2.8rem; color: var(--cq-ouro-claro); }
.cq-relogio b { font-size: 2.6rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cq-relogio small { font-size: 1.2rem; color: var(--cq-claro-sub); }

/* Entrada da abertura: começa visível; só desliza um pouco (animações encadeadas) */
.cq-entra { animation: cq-sobe .9s cubic-bezier(.2,.7,.2,1) both; }
.cq-entra--2 { animation-delay: .25s; }
@keyframes cq-sobe { from { transform: translateY(2rem); } to { transform: none; } }

/* Revelar ao rolar: nunca escondido; só ganha um leve deslize quando entra na tela */
.cq-js .cq-revela { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.cq-js .cq-revela.cq-espera { transform: translateY(3rem); }
@media (prefers-reduced-motion: reduce) { .cq-entra, .cq-s { animation: none; } .cq-js .cq-revela.cq-espera { transform: none; } }

/* ── 2. Problema ──────────────────────────────── */
.cq-dores { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.cq-dores li { display: flex; gap: 1.4rem; align-items: flex-start; padding: 1.6rem; border-radius: 1.8rem; background: var(--ap-cartao); border: 1px solid var(--ap-contorno); font-size: 1.6rem; line-height: 1.5; color: var(--ap-sub); }
.cq-dores b { color: var(--ap-texto); }
.cq-dores i { flex: none; font-size: 2.4rem; color: var(--ap-vermelho); margin-top: .1rem; }
.cq-virada { font-weight: 700; color: var(--ap-texto) !important; font-size: 1.9rem !important; }
.cq-foto { margin: 0; border-radius: 2.4rem; overflow: hidden; box-shadow: var(--ap-elev-alta); }
.cq-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 40%; }

/* ── Cenas com foto atrás ─────────────────────── */
.cq-cena, .cq-final { position: relative; isolation: isolate; overflow: hidden; padding-block: 7rem; color: var(--cq-claro); background: var(--cq-escuro); }
.cq-cena__fundo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cq-cena::after, .cq-final::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.cq-cena--mesa::after { background: linear-gradient(180deg, rgba(11,12,14,.86), rgba(11,12,14,.55) 55%, rgba(11,12,14,.35)); }
.cq-cena--noite::after { background: linear-gradient(180deg, rgba(8,12,22,.88), rgba(8,12,22,.5) 60%, rgba(8,12,22,.3)); }
.cq-col--claro p { color: #d6d8de; }
.cq-col--claro .cq-rotulo { color: var(--cq-ouro-claro); }
.cq-col--claro .cq-lista li { color: var(--cq-claro); }
.cq-col--claro .cq-lista li::before { box-shadow: inset 0 0 0 1.5px var(--cq-ouro-claro); background-color: rgba(233,196,111,.14); }
.cq-col--claro .cq-lista li::after { border-color: var(--cq-ouro-claro); }

/* Dois aparelhos sobrepostos */
.cq-par { position: relative; display: flex; justify-content: center; align-items: center; min-height: 52rem; perspective: 1600px; }
.cq-par .cel { width: min(23rem, 56vw); }
.cel--tras { transform: translateX(-26%) rotateY(18deg) rotateZ(-4deg) scale(.92); filter: brightness(.86); }
.cel--frente { position: absolute; transform: translateX(28%) translateY(6%) rotateY(-12deg) rotateZ(3deg); }
.cq-nota { position: absolute; right: 2%; top: 6%; z-index: 4; display: flex; flex-direction: column; padding: 1.2rem 1.6rem; border-radius: 1.6rem;
  background: rgba(22,24,28,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: var(--cq-claro-sub); font-size: 1.2rem; }
.cq-nota b { font-size: 2.8rem; color: var(--cq-ouro-claro); letter-spacing: -.03em; line-height: 1; }

/* ── 3b. Púlpito ──────────────────────────────── */
.cq-pulpito { padding-block: 7rem; color: var(--cq-claro); background: radial-gradient(80rem 50rem at 20% 30%, rgba(233,196,111,.12), transparent 60%), radial-gradient(60rem 40rem at 90% 90%, rgba(109,155,224,.12), transparent 60%), var(--cq-escuro); }
.cq-pulpito .cq-col p { color: #c9ccd3; }
.cq-pulpito .cq-rotulo { color: var(--cq-ouro-claro); }
.cq-pulpito .cq-lista li { color: var(--cq-claro); }
.cq-pulpito .cq-lista li::before { box-shadow: inset 0 0 0 1.5px var(--cq-ouro-claro); background-color: rgba(233,196,111,.14); }
.cq-pulpito .cq-lista li::after { border-color: var(--cq-ouro-claro); }
.cq-pulpito__aparelho { display: flex; justify-content: center; perspective: 1600px; }
.cel--reto { box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 0 0 2px #0a0a0b, 0 60px 100px -30px rgba(0,0,0,.9), 0 0 140px -30px rgba(233,196,111,.35); transform: rotateY(10deg) rotateX(3deg); }
.cq-cronometro { display: flex; flex-direction: column; gap: 1.2rem; padding: 1.8rem; border-radius: 2rem; background: var(--cq-escuro-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.cq-cronometro__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1.5rem; color: var(--cq-claro-sub); }
.cq-cronometro__topo b { font-size: 3.2rem; color: var(--cq-claro); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.cq-trilho { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; height: 1.2rem; }
.cq-trilho li { position: relative; overflow: hidden; border-radius: 98rem; background: rgba(255,255,255,.1); }
.cq-trilho .cq-t1 { flex: 4; } .cq-trilho .cq-t2 { flex: 8; } .cq-trilho .cq-t3 { flex: 8; } .cq-trilho .cq-t4 { flex: 7; } .cq-trilho .cq-t5 { flex: 3; }
.cq-trilho i { position: absolute; inset: 0; width: var(--cheio, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--cq-ouro), var(--cq-ouro-claro)); }
.cq-trilho li.passou i { background: #6d9be0; }
.cq-cronometro__agora { margin: 0; font-size: 1.5rem; color: var(--cq-claro-sub) !important; }
.cq-cronometro__agora b { color: var(--cq-ouro-claro); }

/* ── 3c. Três aparelhos ───────────────────────── */
.cq-trio { position: relative; display: flex; justify-content: center; align-items: center; min-height: 50rem; perspective: 1800px; }
.cq-trio .cel { width: min(21rem, 46vw); }
.cel--a { position: absolute; transform: translateX(-62%) rotateY(22deg) scale(.86); filter: brightness(.9); }
.cel--b { position: relative; z-index: 2; }
.cel--c { position: absolute; transform: translateX(62%) rotateY(-22deg) scale(.86); filter: brightness(.9); }

/* ── 3d. Bíblia ───────────────────────────────── */
.cq-biblia { position: relative; padding-right: 12%; padding-bottom: 8%; }
.cq-biblia .tab { transform: rotate(-2deg); }
.cel--canto { position: absolute; right: 0; bottom: 0; width: min(15rem, 34vw); padding: .7rem; border-radius: 3rem; transform: rotate(5deg); }
.cel--canto::before { top: 1.4rem; height: 1.6rem; }
.cel--canto::after { inset: .7rem; border-radius: 2.4rem; }
.cel--canto .cel__tela { border-radius: 2.4rem; }
.cq-versiculo { font-family: "Literata", Georgia, serif; font-style: italic; font-size: 2rem !important; line-height: 1.45 !important; color: var(--ap-texto) !important;
  border-left: 3px solid var(--cq-ouro); padding-left: 1.6rem; }
.cq-versiculo cite { display: block; margin-top: .4rem; font-style: normal; font-family: "Inter", sans-serif; font-size: 1.35rem; color: var(--ap-sub); }

/* ── 3e. Noite ────────────────────────────────── */
.cel--noite { justify-self: center; transform: rotate(-4deg); }

/* ── 4. Pro ───────────────────────────────────── */
.cq-grade-pro { display: grid; gap: 1.2rem; margin-top: .4rem; }
.cq-grade-pro div { display: grid; grid-template-columns: auto 1fr; column-gap: 1.2rem; row-gap: .3rem; padding: 1.6rem; border-radius: 1.8rem;
  background: var(--ap-cartao); border: 1px solid var(--ap-contorno); }
.cq-grade-pro i { grid-row: span 2; font-size: 2.6rem; color: var(--cq-ouro); }
.cq-grade-pro b { font-size: 1.65rem; }
.cq-grade-pro span { font-size: 1.45rem; line-height: 1.45; color: var(--ap-sub); }

/* ── 5. Planos ────────────────────────────────── */
.cq-planos { display: grid; gap: 2rem; }
.cq-plano { position: relative; display: flex; flex-direction: column; gap: 1.6rem; padding: 2.8rem 2.4rem; border-radius: 2.4rem; background: var(--ap-fundo); border: 1px solid var(--ap-contorno); }
.cq-plano h3 { margin: 0; display: flex; align-items: center; gap: .8rem; font-size: 2.2rem; letter-spacing: -.02em; }
.cq-plano ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .9rem; font-size: 1.55rem; flex: 1; }
.cq-plano li { padding-left: 2.6rem; position: relative; }
.cq-plano li::before { content: ""; position: absolute; left: .4rem; top: .45em; width: .7rem; height: .4rem; border-left: 2px solid var(--ap-acento); border-bottom: 2px solid var(--ap-acento); transform: rotate(-45deg); }
.cq-plano .cq-btn { width: 100%; }
.cq-preco { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .8rem; }
.cq-preco b { font-size: 4.8rem; letter-spacing: -.045em; line-height: 1; }
.cq-preco s { font-size: 2rem; color: var(--ap-sub); }
.cq-preco span { color: var(--ap-sub); font-size: 1.5rem; }
.cq-preco-ano { margin: -1rem 0 0; color: var(--ap-sub); font-size: 1.45rem; }
.cq-plano--pro { color: var(--cq-claro); background: linear-gradient(160deg, #20232a, #0f1013); border-color: rgba(201,162,74,.55);
  box-shadow: 0 30px 60px -30px rgba(201,162,74,.45); }
.cq-plano--pro h3 i { color: var(--cq-ouro-claro); }
.cq-plano--pro .cq-preco b { color: var(--cq-ouro-claro); }
.cq-plano--pro .cq-preco s, .cq-plano--pro .cq-preco span, .cq-plano--pro .cq-preco-ano { color: var(--cq-claro-sub); }
.cq-plano--pro li::before { border-color: var(--cq-ouro-claro); }
.cq-plano__fita { position: absolute; top: -1.3rem; left: 2.4rem; padding: .5rem 1.2rem; border-radius: 98rem; font-size: 1.2rem; font-weight: 700; letter-spacing: .04em;
  color: #1c1406; background: linear-gradient(180deg, #f0d48a, var(--cq-ouro)); }

/* ── 6. Convite ───────────────────────────────── */
.cq-convite { display: flex; flex-direction: column; gap: 1.6rem; padding: 3.2rem 2.4rem; border-radius: 2.8rem; background: var(--cq-ouro-fundo); border: 1px solid rgba(201,162,74,.4); }
.cq-convite > i { font-size: 4.4rem; color: var(--cq-ouro); }
.cq-convite h2 { margin: 0 0 .8rem; font-size: clamp(2.4rem, 4.6vw, 3.4rem); letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.cq-convite p { margin: 0; font-size: 1.65rem; line-height: 1.5; color: var(--ap-sub); max-width: 62rem; }

/* ── 7. Perguntas ─────────────────────────────── */
.cq-perguntas { display: flex; flex-direction: column; gap: 1rem; }
.cq-perguntas details { background: var(--ap-fundo); border: 1px solid var(--ap-contorno); border-radius: 1.6rem; padding: 0 2rem; }
.cq-perguntas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 5.6rem; font-weight: 600; font-size: 1.65rem; }
.cq-perguntas summary::-webkit-details-marker { display: none; }
.cq-perguntas summary::after { content: "+"; color: var(--ap-acento); font-size: 2.4rem; line-height: 1; transition: transform .25s; flex: none; }
.cq-perguntas details[open] summary::after { transform: rotate(45deg); }
.cq-perguntas details p { margin: 0 0 1.8rem; color: var(--ap-sub); font-size: 1.6rem; line-height: 1.55; }

/* ── 8. Vídeos ────────────────────────────────── */
.cq-videos { display: grid; gap: 2rem; }
.cq-video { margin: 0; display: flex; flex-direction: column; gap: .8rem; }
.cq-video video { width: 100%; aspect-ratio: 16 / 9; border-radius: 1.6rem; background: #000; box-shadow: var(--ap-elev-alta); }
.cq-video figcaption { font-weight: 600; font-size: 1.55rem; }
.cq-mais { align-self: flex-start; display: inline-flex; align-items: center; gap: .6rem; min-height: 4.4rem; color: var(--ap-acento); font-weight: 600; font-size: 1.6rem; text-decoration: none; }

/* ── SanWeb ───────────────────────────────────── */
.cq-sanweb { padding-block: 7rem; color: var(--cq-claro); background: radial-gradient(70rem 40rem at 15% 50%, rgba(201,162,74,.16), transparent 65%), #0a0c12; }
.cq-sanweb__grade { display: grid; gap: 3.6rem; align-items: center; }
.cq-sanweb .cq-col p { color: #c3c7d1; }
.cq-sanweb__logo { display: flex; align-items: center; gap: 1.6rem; }
.cq-sanweb__s { flex: none; width: clamp(8rem, 22vw, 15rem); aspect-ratio: 1;
  background: linear-gradient(110deg, #a8761f 0%, #e9c46f 40%, #fff4d6 50%, #e9c46f 60%, #a8761f 100%); background-size: 260% 100%;
  -webkit-mask: url(/assets/conheca/sanweb-simbolo.webp) center / contain no-repeat; mask: url(/assets/conheca/sanweb-simbolo.webp) center / contain no-repeat;
  animation: cq-brilho 6s linear infinite; }
.cq-sanweb__nomes { display: flex; flex-direction: column; gap: .8rem; min-width: 0; flex: 1; max-width: 32rem; }
.cq-sanweb__nome { display: block; width: 100%; aspect-ratio: 720 / 142; background: #f5f5f7;
  -webkit-mask: url(/assets/conheca/sanweb-nome.webp) center / contain no-repeat; mask: url(/assets/conheca/sanweb-nome.webp) center / contain no-repeat; }
.cq-sanweb__sub { width: 55%; height: auto; }

/* ── 9. Final ─────────────────────────────────── */
.cq-final { padding-block: 9rem; text-align: center; }
.cq-final::after { background: radial-gradient(60rem 40rem at 50% 40%, rgba(11,12,14,.55), rgba(11,12,14,.92)); }
.cq-final .cq-cena__fundo { object-position: 38% 50%; }
.cq-final__txt { display: flex; flex-direction: column; align-items: center; gap: 1.8rem; }
.cq-final__ico { font-size: 5.6rem; color: #9dbcf0; }
.cq-final h2 { margin: 0; font-size: var(--cq-titulo); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.cq-final p { margin: 0; font-size: 1.8rem; color: #d6d8de; max-width: 52rem; }

.cq-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem;
  padding: 3.2rem max(2rem, env(safe-area-inset-right, 0px)) calc(3.2rem + env(safe-area-inset-bottom, 0px)) max(2rem, env(safe-area-inset-left, 0px));
  background: var(--cq-escuro); color: var(--cq-claro-sub); font-size: 1.45rem; }
.cq-rodape span { display: inline-flex; align-items: center; gap: .6rem; color: var(--cq-claro); font-weight: 700; }
.cq-rodape span i { color: #9dbcf0; font-size: 2rem; }
.cq-rodape nav { display: flex; flex-wrap: wrap; gap: .4rem 2rem; }
.cq-rodape a { color: var(--cq-claro-sub); text-decoration: none; min-height: 4.4rem; display: inline-flex; align-items: center; }
.cq-rodape__sanweb { gap: .6rem; }

/* ── Celular pequeno ──────────────────────────── */
@media (max-width: 400px) {
  .cq-marca span { font-size: 1.5rem; }
  .cq-par { min-height: 44rem; }
  .cq-trio { min-height: 42rem; }
  .cq-relogio { transform: translateX(-96%); padding: 1rem 1.2rem; }
}

/* ── Tablet ───────────────────────────────────── */
@media (min-width: 700px) {
  .cq-planos { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .cq-videos { grid-template-columns: 1fr 1fr; }
  .cq-grade-pro { grid-template-columns: 1fr 1fr; }
  .cq-convite { flex-direction: row; align-items: center; gap: 2.8rem; padding: 4rem; }
  .cq-botoes .cq-btn { flex: 0 0 auto; }
}

/* ── Notebook e computador ────────────────────── */
@media (min-width: 960px) {
  .cq-faixa { padding-block: 10rem; }
  .cq-cena, .cq-pulpito, .cq-sanweb { padding-block: 11rem; }
  .cq-dois { grid-template-columns: 1fr 1fr; gap: 6.4rem; }
  .cq-dois--inverso > :first-child { order: 2; }
  .cq-heroi { padding-block: 6rem 8rem; min-height: min(92vh, 88rem); display: flex; align-items: center; }
  .cq-heroi__grade { grid-template-columns: 1.1fr .9fr; }
  .cq-heroi::after { background: linear-gradient(90deg, rgba(11,12,14,.9) 0%, rgba(11,12,14,.6) 45%, rgba(11,12,14,.25) 100%), linear-gradient(0deg, var(--cq-escuro), transparent 30%); }
  .cq-heroi__fundo img { object-position: 50% 50%; }
  .cel { width: 28rem; }
  .cel--heroi { width: 31rem; }
  .cq-par { min-height: 64rem; }
  .cq-par .cel { width: 27rem; }
  .cq-trio { min-height: 60rem; }
  .cq-trio .cel { width: 25rem; }
  .cq-relogio { transform: translateX(-120%); bottom: 12%; }
  .cq-sanweb__grade { grid-template-columns: .9fr 1.1fr; }
  .cq-cena--mesa::after { background: linear-gradient(90deg, rgba(11,12,14,.92) 0%, rgba(11,12,14,.7) 45%, rgba(11,12,14,.2) 100%); }
  .cq-cena--noite::after { background: linear-gradient(90deg, rgba(8,12,22,.92) 0%, rgba(8,12,22,.6) 50%, rgba(8,12,22,.15) 100%); }
  .cq-videos { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1500px) {
  :root { --cq-largura: 128rem; }
  .cel--heroi { width: 34rem; }
}

/* Títulos nas faixas escuras ficam sempre claros (o app pinta títulos com a cor do tema) */
.cq-heroi h1, .cq-cena h2, .cq-pulpito h2, .cq-sanweb h2, .cq-final h2, .cq-plano--pro h3 { color: var(--cq-claro); }