/* =====================================================================
   contato.css · Dr. Fabio Salomão
   Página Contato: hero + contatos + locais de atendimento + formulário.
   Universo clínico e institucional. Cor só via var(--…).
   ===================================================================== */

/* ===== 1. Hero (Marfim) ===== */
.ct-hero{position:relative;overflow:hidden;background:var(--marfim);border-bottom:1px solid var(--areia-escuro-01);padding:150px 0 96px}
.ct-hero .wrap{position:relative;z-index:1}
.ct-hero-copy{max-width:760px}
.ct-hero h1{margin-bottom:22px;max-width:10ch}
.ct-hero .lead{max-width:56ch;color:var(--grafite)}
.ct-hero .blob-nevoa{position:absolute;width:520px;height:520px;top:-180px;right:-160px;border-radius:50%;background:radial-gradient(circle at 40% 40%,var(--nevoa),transparent 68%);opacity:.5;filter:blur(2px);pointer-events:none}

/* ===== Cabeçalho comum de seção ===== */
.ct-sec-head{margin-bottom:40px}
.ct-sec-head h2{color:var(--azul-profundo);margin-bottom:14px}
.ct-sec-head p{color:var(--grafite);max-width:60ch;margin:0}

/* ===== 2. Contatos (Areia Claro 01) ===== */
.ct-contatos{background:var(--areia-claro-01)}

/* grade de dois cards de peso igual */
.ct-cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}

.ct-card{background:var(--marfim);border:1px solid var(--areia-escuro-01);border-radius:var(--radius-card);padding:38px 36px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;align-items:flex-start}
.ct-card-mark{display:block;width:34px;height:3px;border-radius:var(--radius-pill);background:var(--nevoa);margin-bottom:22px}
.ct-card h3{color:var(--azul-profundo);margin-bottom:12px}
.ct-card-line{color:var(--azul-profundo);font-weight:500;font-size:16px;line-height:1.5;margin-bottom:12px}
.ct-card-support{color:var(--grafite);font-size:15.5px;line-height:1.6;margin-bottom:auto;padding-bottom:26px;max-width:44ch}
.ct-card .btn{margin-top:0}

/* botão secundário (Enviar um e-mail): hover em Azul Névoa conforme briefing */
.ct-card .btn-outline:hover{background:var(--nevoa);color:var(--azul-escuro-02);border-color:var(--azul-escuro-02)}

/* ===== 3. Locais de atendimento (Marfim) ===== */
.ct-locais{background:var(--marfim)}
.ct-place{background:var(--areia-claro-01);border:1px solid var(--areia-escuro-01);border-radius:var(--radius-card);padding:38px 36px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;align-items:flex-start}
.ct-place-mark{display:block;width:34px;height:3px;border-radius:var(--radius-pill);background:var(--pessego);margin-bottom:22px}
.ct-place h3{color:var(--azul-profundo);margin-bottom:12px}
.ct-place-addr{color:var(--grafite);font-size:16px;line-height:1.6;margin-bottom:4px}
.ct-place-city{color:var(--grafite);font-size:14.5px;line-height:1.5;margin:0}

/* ===== 4. Envie uma mensagem (Areia Claro 01) ===== */
.ct-form-sec{background:var(--areia-claro-01)}
.ct-form-head{max-width:720px;margin:0 auto 40px;text-align:center}
.ct-form-head h2{color:var(--azul-profundo);margin:0 auto 14px}
.ct-form-head p{color:var(--grafite);margin:0 auto;max-width:56ch}

.ct-form{max-width:820px;margin:0 auto;background:var(--marfim);border:1px solid var(--areia-escuro-01);border-radius:var(--radius-img);box-shadow:var(--shadow-card);padding:48px 48px 44px;display:flex;flex-direction:column;gap:20px}
.ct-field{display:flex;flex-direction:column;gap:9px}
.ct-field label{font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--azul-profundo)}
/* campos: cantos mais suaves que o pill padrão, conforme briefing (18-22px) */
.ct-form .field{border-radius:var(--radius-tag);background:var(--marfim-claro-02)}
.ct-form textarea.field{min-height:160px}
.ct-submit{align-self:flex-start;margin-top:4px}

/* ===== Responsivo ===== */
@media (max-width:980px){
  .ct-hero{padding:132px 0 80px}
  .ct-cards{grid-template-columns:1fr;gap:22px}
  .ct-form{padding:40px 34px 36px}
}
@media (max-width:560px){
  .ct-card,.ct-place{padding:30px 26px}
  .ct-card .btn,.ct-submit{width:100%}
  .ct-form{padding:32px 24px 30px}
}