/* ===== Contato · complementa home-v2.css + theme.css =====
   Design v3 (Pandorium). Sem cores hardcoded: tudo por variável,
   para a página virar junto no tema claro. */

/* ===== hero curto ===== */
.ct-hero{position:relative;padding:clamp(52px,6.5vw,88px) 0 clamp(28px,3vw,40px);overflow:hidden}
.ct-hero::before{content:"";position:absolute;left:50%;top:-52%;width:min(94vw,1080px);aspect-ratio:2/1;transform:translateX(-50%);background:radial-gradient(ellipse at center,color-mix(in srgb,var(--ouro) 16%,transparent),transparent 62%);pointer-events:none}
.ct-hero .wrap{position:relative;z-index:2}
.ct-hero h1{max-width:16ch;margin-top:22px;font-size:clamp(2.2rem,5.6vw,4.4rem)}
.ct-sub{margin-top:24px;max-width:62ch;color:var(--grafite);font-size:clamp(.96rem,1.3vw,1.08rem)}

.pg-selo{display:inline-flex;align-items:center;gap:9px;font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro-claro)}
.pg-selo-dot{width:6px;height:6px;border-radius:50%;background:var(--ouro);box-shadow:0 0 10px 1px color-mix(in srgb,var(--ouro) 90%,transparent)}

/* o hero já apresenta a seção: o h2 do formulário fica só para leitor de tela */
.ct-secao{padding-top:clamp(24px,3vw,40px)}
.ct-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ===== botão de tema (fallback: o markup final é do pane da home) ===== */
.tema-botao{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--linha);border-radius:50%;background:transparent;color:var(--papel);cursor:pointer;transition:border-color .25s ease,color .25s ease}
.tema-botao:hover{border-color:var(--ouro);color:var(--ouro)}
.tema-botao span{display:block;width:15px;height:15px;border-radius:50%;border:1px solid currentColor;background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%)}

/* ===== alternativa de WhatsApp ===== */
.ct-alternativa{margin-top:clamp(32px,4vw,44px);padding:clamp(22px,2.4vw,30px);border:1px solid var(--linha);border-radius:var(--raio-m);background:color-mix(in srgb,var(--papel) 5%,transparent)}
.ct-alternativa-titulo{font-family:var(--serif);font-weight:500;font-size:1.15rem;color:var(--papel)}
.ct-alternativa-texto{margin-top:10px;color:var(--grafite);font-size:.92rem}
.ct-alternativa .botao{margin-top:20px}

/* ===== rodapé em colunas ===== */
.rodape-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.rodape-col{display:flex;flex-direction:column;gap:11px}
.rodape-col h3{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro)}
.rodape-col a{color:var(--grafite);font-size:.85rem;text-decoration:none;transition:color .2s ease}
.rodape-col a:hover{color:var(--papel)}

/* ===== responsivo ===== */
@media (max-width:820px){
  .rodape-nav{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .ct-hero h1{font-size:clamp(2rem,9vw,2.8rem);max-width:100%}
  .ct-alternativa .botao{width:100%}
  .rodape-nav{grid-template-columns:1fr}
}