/* =====================================================================
   AHAV · CONTATO (contato.html)
   Carrega depois de: base.css, formulario.css

   ÍNDICE  (mesma ordem da página)
   0. Ajustes da página sobre a base
   1. BOAS-VINDAS + FORMULÁRIO (painel roxo)
   2. E-MAIL E INSTAGRAM (cards "Prefere falar direto?")
   3. O QUE ACONTECE DEPOIS
   4. Responsivo
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. AJUSTES DA PÁGINA SOBRE A BASE
   --------------------------------------------------------------------- */
.t1{font-size:clamp(42px,5.2vw,72px)}


/* ---------------------------------------------------------------------
   1. BOAS-VINDAS + FORMULÁRIO (layout e campos em formulario.css)
   --------------------------------------------------------------------- */
.contact .stack{position:sticky;top:24px}
.contact h1 i{color:#f28643}
.ah textarea.inp{min-height:150px}
/* avisos de enviado / falhou */
.note{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border-radius:20px;font-size:15px;line-height:1.5}
.note svg{flex:none;width:22px;height:22px;margin-top:1px}
.note.ok{background:#6b2ea0;color:#f2e9d7}
.note.fail{background:#f05444;color:#000}
/* cor do texto girando em volta da mão */
.rf{color:#f2e9d7}
.rb{color:rgba(242,233,215,.34)}


/* ---------------------------------------------------------------------
   2. E-MAIL E INSTAGRAM
   --------------------------------------------------------------------- */
.direct-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}
.dcard{border-radius:32px;padding:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.dcard .addr{font-family:Galline,Georgia,serif;font-weight:700;font-size:clamp(24px,2.4vw,32px);line-height:1.15;overflow-wrap:anywhere}
.dcard-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* botões Copiar / Abrir */
.ah .mini{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:1.5px solid #000;background:#f2e9d7;color:#000;font:700 14px/1 Poppins,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:transform 160ms var(--ease)}
.ah .mini:hover{transform:translateY(-2px);color:#000}
.ah .mini:active{transform:scale(.96)}
.mini svg{width:15px;height:15px}
/* aviso "E-mail copiado!" */
.toast{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;background:#6b2ea0;color:#f2e9d7;font-size:13px;font-weight:700;animation:toast-in 260ms var(--ease)}
@keyframes toast-in{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}


/* ---------------------------------------------------------------------
   3. O QUE ACONTECE DEPOIS
   --------------------------------------------------------------------- */
.s-depois{padding-top:48px}
.after{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.after li{border:1.5px solid #000;border-radius:32px;padding:28px 24px 32px;display:flex;flex-direction:column;gap:12px}
.after .thin{color:#6b2ea0}
.after h3{font-size:24px;line-height:1.2;margin-top:12px}
.after p{font-size:15px;line-height:1.6}


/* ---------------------------------------------------------------------
   4. RESPONSIVO
   --------------------------------------------------------------------- */
@media (max-width:900px){
  .contact .stack{position:static}
  .direct-row,.after{grid-template-columns:1fr}
  .dcard{padding:24px}
}