/*
 * Prohall — contato.php: classes exclusivas desta página
 * (padrões que só aparecem aqui; o que se repete em outras páginas está em
 * assets/css/components.css). Nenhum style="" deveria sobrar em contato.php.
 */

/* Hero */
.contato-hero-inner{position:relative;padding:92px 40px 84px}
.contato-hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.7) 50%,rgba(10,10,10,.42) 100%)}
.contato-hero-title{font:800 52px/1.04 'Manrope',sans-serif;letter-spacing:-1.8px;margin:24px 0 0;max-width:720px;text-wrap:balance}
.contato-hero-lead{font:400 16.5px/1.65 'Manrope',sans-serif;color:rgba(255,255,255,.8);max-width:560px;margin:20px 0 0}

/* Canais + formulário — layout */
.contato-channels-section{padding:72px 40px}

/* NOTE p/ consolidação futura: .ph-split é hook responsivo em components.css
   (sem base). produto-detalhe.css já define uma base própria de .ph-split
   (2 colunas, gap 56px, margin-top 32px) para aquela página; aqui a base
   precisa de colunas assimétricas (.92fr/1.08fr) sem margin-top, então fica
   como classe companheira em vez de reaproveitar a de produto-detalhe. */
.contato-split{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:start}

.contato-chan-col{display:flex;flex-direction:column;gap:16px}

/* NOTE p/ consolidação futura: .ph-chan só tem o estado :hover definido em
   prohall.css (border-color/box-shadow); a base (border/border-radius/padding/
   transition) não existe em nenhum arquivo compartilhado e foi movida pra cá
   a partir do style="" inline. Candidata a subir para prohall.css junto do
   .ph-chan:hover já existente. */
.ph-chan{border:1px solid rgba(0,0,0,.1);border-radius:16px;padding:26px;transition:border-color .3s,box-shadow .3s}

.contato-chan-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.contato-chan-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;background:#141414;flex-shrink:0}
.contato-chan-title{font:800 17px 'Manrope',sans-serif;letter-spacing:-.3px;margin:0}
.contato-chan-desc{font:400 13.5px/1.55 'Manrope',sans-serif;color:#666;margin:0 0 16px}
.contato-chan-rows{display:flex;flex-direction:column;gap:2px}

/* Reset dos botões "copiar" (.btn-copy já existe no HTML como hook de JS
   para querySelectorAll — aqui só ganha estilo, sem novo nome de classe).
   Os <a class="ph-chanrow"> não precisam disso pois âncora já reseta padrão. */
.btn-copy{width:100%;background:none;border:none;text-align:left;cursor:pointer}

/* Formulário */
.contato-form-card{border:1px solid rgba(0,0,0,.1);border-radius:18px;padding:34px 34px 38px;background:#fafafb}
.contato-form-title{font:800 24px 'Manrope',sans-serif;letter-spacing:-.6px;margin:0}
.contato-form-lead{font:400 14px/1.6 'Manrope',sans-serif;color:#666;margin:8px 0 24px}

.contato-success{display:none;background:#eef7f0;border:1px solid #cfe8d6;border-radius:12px;padding:22px}
.contato-success-row{display:flex;gap:14px;align-items:flex-start}
.contato-success-icon{flex-shrink:0;margin-top:1px}
.contato-success-title{font:800 16px 'Manrope',sans-serif;color:#166b3b}
.contato-success-text{font:400 13.5px/1.55 'Manrope',sans-serif;color:#3d7a55;margin:5px 0 0}

.contato-form{display:flex;flex-direction:column;gap:14px}

/* NOTE p/ consolidação futura: .ph-g2 é hook responsivo em components.css
   (sem base, só o "grid-template-columns:1fr" a 860px). A base 2 colunas
   fica aqui como classe companheira. */
.contato-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.contato-label{display:block;font:700 11px 'Manrope',sans-serif;letter-spacing:.5px;color:#666;margin-bottom:7px}
.contato-select{appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2214%22 height=%2214%22 fill=%22none%22 stroke=%22%23888%22 stroke-width=%222%22><path d=%22M3 5l4 4 4-4%22/></svg>');background-repeat:no-repeat;background-position:right 15px center}
.contato-textarea{resize:vertical}
.contato-submit-btn{justify-content:center;margin-top:6px;letter-spacing:.4px;border:none;cursor:pointer}

/* Social */
.contato-social-inner{padding:56px 40px}
.contato-social-title{font:800 26px 'Manrope',sans-serif;letter-spacing:-.8px;margin:0}
.contato-social-lead{font:400 15px/1.6 'Manrope',sans-serif;color:#666;margin:10px auto 26px;max-width:460px}
.contato-social-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---- Responsivo (mobile/tablet) ----
   Só o padding lateral por enquanto (padronizado em 24px em todas as
   páginas); o vertical continua no valor de desktop até ser revisado. */
@media (max-width:860px){
  .contato-hero-inner,
  .contato-channels-section,
  .contato-social-inner{padding-left:24px;padding-right:24px}
}

/* Tooltip "Copiado!" (antes em <style> inline no fim de contato.php) */
.copy-tooltip{
  position: absolute;
  top: -8px;
  right: 0;
  background: #141414;
  color: #fff;
  font: 700 11px 'Manrope', sans-serif;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}