/* ---------------------------------------------------------------------------
   Componentes da home e das 26 paginas de conteudo do apollo_site.

   Carrega DEPOIS de styles.css, que e' copia fiel do arquivo da pre-venda.
   Toda a identidade (secoes, cartoes, botoes, cabecalho, rodape, grades de
   modulo, comparativo antes/depois, depoimentos) vem de la'. Aqui so' entra o
   que a landing nao tem porque nao precisava: os elementos de pagina de
   resposta — migalha, bloco de resposta direta, ficha tecnica, FAQ com
   pergunta visivel e a grade de links internos — e, no fim do arquivo, o pouco
   que e' exclusivo da home.
--------------------------------------------------------------------------- */

/* ---- .reveal invertido -----------------------------------------------------
   No styles.css o .reveal nasce com opacity:0 e so' vira visivel quando o
   script.js da pre-venda (1.018 linhas, com pagamento e roleta) roda o
   IntersectionObserver. Estas paginas nao carregam aquele arquivo — e mesmo o
   paginas.js daqui pode falhar por rede, extensao ou bloqueio.

   Entao o padrao se inverte: sem JS, tudo aparece. O script inline do <head>
   marca <html class="js"> e so' AI' o conteudo volta a comecar escondido para
   ser animado. Numa pagina cuja razao de existir e' ser lida — por gente e por
   rastreador — texto invisivel por falha de JS nao e' detalhe de animacao.
--------------------------------------------------------------------------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(28px)}
.js .reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ---- Cabecalho da pagina ---- */
.page-hero{padding:64px 0 56px;position:relative;overflow:hidden}
.page-hero .container{position:relative}
.page-hero h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-1.6px;margin:14px 0 18px;max-width:16ch}
.page-hero .page-sub{font-size:18px;color:#dce4ff;max-width:62ch;margin:0}
.page-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center}
.page-hero .hero-actions{margin-top:28px}
.page-hero-shot{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.3);box-shadow:0 30px 80px rgba(0,0,0,.34)}

/* ---- height:auto NAO E' SUPERFLUO ------------------------------------------
   Os <img> destas paginas levam width= e height= com as medidas reais do
   arquivo, para o navegador reservar o espaco antes de a imagem chegar (CLS).
   Com width:100% no CSS e nenhuma regra de altura, o navegador usa o ATRIBUTO
   height ao pe da letra: o print do dashboard renderizava 516x989 em vez de
   516x321 — esticado ao triplo da altura.

   O styles.css nao precisava disso porque as imagens da landing nao declaram
   width/height. Aqui declaram, entao a regra tem de vir junto. Vale para as
   duas imagens de print da pagina: a do hero e a do bloco de recurso.
--------------------------------------------------------------------------- */
.page-hero-shot img,
.split-feature .stack-main{display:block;width:100%;height:auto}

/* ---- Migalha de pao ---- */
.breadcrumb{font-size:13px;color:#b7c4ec;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0;margin:0}
.breadcrumb a{color:#b7c4ec;text-decoration:none}
.breadcrumb a:hover{color:#fff;text-decoration:underline}
.breadcrumb span[aria-current]{color:#fff;font-weight:600}
.breadcrumb .sep{opacity:.5}

/* ---- Bloco de resposta direta ----------------------------------------------
   O paragrafo que responde a pergunta da pagina inteira em duas ou tres frases.
   Fica no topo, antes de qualquer argumento de venda, e e' escrito para ser
   citado inteiro: sujeito explicito ("O Apollo Web e' ..."), sem pronome solto
   e sem depender do que veio antes.
--------------------------------------------------------------------------- */
.answer-box{background:#fff;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:14px;padding:26px 30px;box-shadow:0 12px 35px rgba(25,45,99,.06);margin:0}
.answer-box .answer-q{display:block;font-size:12px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:#0ca57f;margin-bottom:10px}
.answer-box p{margin:0 0 12px;font-size:17.5px;line-height:1.62;color:var(--ink)}
.answer-box p:last-child{margin-bottom:0}
.answer-box strong{color:#0c1c56}

/* ---- Ficha tecnica ---------------------------------------------------------
   Tabela de duas colunas com os dados duros do produto. Formato escolhido de
   proposito: rotulo + valor em <th>/<td> e' o que extrator de conteudo le' com
   menos ambiguidade — e e' o mesmo dado que vai no JSON-LD, escrito duas vezes
   para quem le' HTML e para quem le' dado estruturado.
--------------------------------------------------------------------------- */
.facts{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 12px 35px rgba(25,45,99,.05)}
.facts caption{caption-side:top;text-align:left;font-weight:800;color:#0c1c56;font-size:15px;padding:0 0 12px}
.facts th,.facts td{text-align:left;padding:14px 20px;font-size:14.5px;border-bottom:1px solid var(--line);vertical-align:top}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0}
.facts th{width:34%;color:#0c1c56;font-weight:700;background:#f7f9ff;white-space:nowrap}
.facts td{color:var(--muted)}
.facts td strong{color:var(--ink)}
@media(max-width:640px){
  .facts th,.facts td{display:block;width:auto;white-space:normal}
  .facts th{border-bottom:0;padding-bottom:2px}
  .facts td{padding-top:2px}
}

/* ---- Texto corrido (paginas institucionais e de resposta) ---- */
.prose{max-width:74ch}
.prose h2{font-size:clamp(26px,3vw,34px);line-height:1.16;letter-spacing:-1px;margin:44px 0 14px;color:#0c1c56}
.prose h3{font-size:20px;margin:30px 0 8px;color:#0c1c56}
.prose p{color:#48526b;font-size:16.5px;line-height:1.7;margin:0 0 16px}
.prose ul,.prose ol{color:#48526b;font-size:16.5px;line-height:1.7;padding-left:22px;margin:0 0 18px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink)}
.prose a{color:#1a50cd;font-weight:600}
.prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14.5px}
.prose th,.prose td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.prose th{background:#f7f9ff;color:#0c1c56}
.prose td{color:var(--muted)}

/* ---- Dor -> modulo que resolve ---- */
.solve-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.solve-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 26px 24px;box-shadow:0 10px 30px rgba(25,45,99,.05)}
.solve-card .solve-pain{display:flex;gap:11px;align-items:flex-start;color:#c0392b;font-weight:700;font-size:15px;margin-bottom:14px}
.solve-card .solve-pain i{margin-top:3px;font-size:13px;flex:0 0 auto}
.solve-card h3{margin:0 0 8px;font-size:18px;color:#0c1c56}
.solve-card p{margin:0 0 14px;color:var(--muted);font-size:14.5px}
.solve-card .solve-screen{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#0ca57f;background:#eafaf5;border:1px solid #c9ecdf;border-radius:999px;padding:6px 13px}
.solve-card .solve-screen i{font-size:11px}

/* ---- FAQ com a pergunta visivel em <h3> ------------------------------------
   A landing usa <details>/<summary>, que esconde a resposta ate' o clique. Aqui
   a resposta fica aberta: e' ela que a pagina existe para entregar, e a primeira
   frase de cada uma e' auto-suficiente (responde sem o resto do paragrafo).
--------------------------------------------------------------------------- */
.qa{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.qa-item{background:#fff;padding:24px 28px}
.qa-item h3{margin:0 0 8px;font-size:17.5px;color:#0c1c56;line-height:1.35}
.qa-item p{margin:0;color:#48526b;font-size:15px;line-height:1.65}
.qa-item p + p{margin-top:10px}

/* ---- Fachadas de clientes em grade estatica ---- */
.shots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.shots-grid figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(25,45,99,.05)}
.shots-grid img{display:block;width:100%;height:170px;object-fit:cover}
.shots-grid figcaption{padding:12px 14px;font-size:13.5px;font-weight:700;color:#0c1c56}

/* ---- Links internos --------------------------------------------------------
   Nao e' enfeite de rodape: e' o que costura as 26 paginas num site so'. Sem
   isso cada uma fica um documento solto, e um documento solto nao herda nada
   da autoridade dos outros.
--------------------------------------------------------------------------- */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.related-card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;text-decoration:none;transition:.22s;box-shadow:0 8px 24px rgba(25,45,99,.04)}
.related-card:hover{transform:translateY(-4px);border-color:#18d7a5;box-shadow:var(--shadow)}
.related-card strong{display:block;color:#0c1c56;font-size:15.5px;margin-bottom:5px}
.related-card span{display:block;color:var(--muted);font-size:13.5px;line-height:1.5}

/* ---- Rodape de atualizacao ---- */
.page-updated{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.page-updated a{color:#1a50cd}

/* ---- Faixa do topo (so' nas 26; a home nao tem) ---- */
.top-alert a{color:inherit}

/* ---- Ajustes de grade em telas menores ---- */
@media(max-width:980px){
  .page-hero-grid{grid-template-columns:1fr;gap:34px}
  .page-hero h1{max-width:none}
  .solve-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .page-hero{padding:44px 0 40px}
  .page-hero-visual{margin-top:44px}
  .related-grid{grid-template-columns:1fr}
  .answer-box{padding:22px 20px}
  .answer-box p{font-size:16.5px}
  .qa-item{padding:20px}
}

/* ===========================================================================
   HOME — https://apolloweb.com.br/

   A home reaproveita a folha inteira da landing (styles.css): hero, esteira de
   clientes, vitrine com abas, grade de modulos, comparativo, depoimentos,
   passos, acordeao e CTA final vem prontos de la'. O que entra aqui e' so' o
   que a landing nao precisava — mais o conserto de um detalhe que so' aparece
   quando as imagens declaram width/height, que e' o caso destas.
   =========================================================================== */

/* ---- height:auto, de novo ---------------------------------------------------
   Mesmo motivo explicado la' em cima para .page-hero-shot: as imagens da home
   levam width= e height= com as medidas reais do arquivo (para o navegador
   reservar o espaco antes de a imagem chegar). Com width:100%/110% no CSS e
   nenhuma regra de altura, o navegador usa o ATRIBUTO height ao pe da letra e
   estica a imagem.

   As da landing nao declaravam width/height — por isso o styles.css nunca
   precisou destas linhas.
--------------------------------------------------------------------------- */
.browser-frame img,
.showcase-image-wrap img,
.image-stack .stack-main,
.image-stack .stack-small,
.clients-track .client-shot img{height:auto}

/* A foto do cliente e' recortada num quadro fixo — aqui a altura e' de
   proposito, e tem de vencer a regra acima. */
.clients-track .client-shot img{height:180px;object-fit:cover}
@media(max-width:640px){.clients-track .client-shot img{height:140px}}

/* ---- Segundo titulo da secao de modulos ---- */
.modules-heading-2{margin-top:72px}
@media(max-width:640px){.modules-heading-2{margin-top:48px}}

/* ---- Mapa das paginas de conteudo ------------------------------------------
   A secao que reune as 26 paginas. Reusa .related-grid/.related-card das
   paginas de conteudo; o unico elemento novo e' o titulo de cada grupo.
--------------------------------------------------------------------------- */
.mapa-grupo{font-size:14px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;
  color:#2456d5;margin:38px 0 14px}
.mapa-grupo:first-of-type{margin-top:0}
#conteudo .related-grid + .mapa-grupo{margin-top:42px}

/* ---- Item de menu da secao atual --------------------------------------------
   Marcado pelo paginas.js na home. Sublinhado em vez de so' cor: a barra do
   cabecalho e' azul-escura e a diferenca entre #dfe6ff e #fff sozinha nao
   passa de um cinza para outro num monitor mal calibrado.
--------------------------------------------------------------------------- */
.desktop-nav a.is-current{color:#fff;box-shadow:inset 0 -2px 0 #20dbaa}

/* ---- Rodape da home ---------------------------------------------------------
   Quatro colunas de links num rodape que ja' e' o mesmo das 26 paginas. Sem
   isto o bloco da marca fica com a mesma largura das colunas de link, e a
   frase-ancora quebra em cinco linhas.
--------------------------------------------------------------------------- */
@media(min-width:981px){
  .footer-grid{grid-template-columns:1.35fr 1fr 1fr 1.25fr}
}

/* ---- Acoes do cabecalho -----------------------------------------------------
   "Efetuar login" e "Criar uma conta" no lugar do antigo CTA unico. O styles.css
   esconde `.nav .btn` abaixo de 640px porque o CTA do WhatsApp se repetia no
   hero; estes dois nao se repetem em lugar nenhum, e o cliente que abre o site
   no celular precisa achar o login. Ficam visiveis, so' mais compactos.
--------------------------------------------------------------------------- */
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-actions .btn-ghost:hover{background:rgba(255,255,255,.14)}
@media(max-width:640px){
  .nav .brand-logo{height:30px}
  .nav-actions{gap:6px}
  .nav .nav-actions .btn{display:inline-flex;padding:9px 10px;font-size:12px;white-space:nowrap}
}
.nav-actions .rot-curto{display:none}
@media(max-width:400px){
  .nav .brand-logo{height:26px}
  .nav-actions .rot-longo{display:none}
  .nav-actions .rot-curto{display:inline}
}