/* ============================
   Contact page — styles only
   ============================ */
:root{
  --brand:#7c0130;
  --brand-2:#5b0125;
  --gold:#E6C068;
  --ink:#3D2F24;
  --cream:#F2E9E0;
  --shadow:0 22px 60px rgba(61,47,36,.25);
  --radius:18px;
}

/* Fundo claro do miolo */
.section,.after-hero{ background:#F6EFE7; }

/* ===== Banner como a HOME ===== */
.hero{
  position:relative;
  isolation:isolate;
  overflow:visible;
  z-index:10;
}
.hero .subcopy{ z-index:50; }

/* imagem de fundo da página de contato */
.contact-hero-media{
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.30)),
    url("../img/bannercontact.jpg") center/cover no-repeat !important;
  z-index:-2;
}

.after-hero{
  position:relative;
  z-index:0;
}
@media (max-width:760px){
  .after-hero{ padding-top:140px; }
}

/* ===== Layout do corpo ===== */
.section-contact .contact-grid{
  display:grid; grid-template-columns:1.2fr .8fr; gap:28px;
}
@media (max-width:1024px){
  .section-contact .contact-grid{ grid-template-columns:1fr; }
}

.contact-card, .contact-info{
  background:#fff;
  border:1px solid rgba(61,47,36,.08);
  border-radius:16px;
  box-shadow:0 14px 40px rgba(61,47,36,.10);
  padding:18px 18px 20px;
}

.contact-card h2,
.contact-info h3{
  margin:0 0 12px;
  color:var(--brand);
  font-weight:800;
}

/* ===== Form ===== */
.field{ display:grid; gap:6px; margin-bottom:12px }
.field > span{ font-size:13px; font-weight:700; color:var(--brand) }
.field input,
.field select,
.field textarea{
  width:100%;
  border:1px solid rgba(61,47,36,.18);
  background:#fff;
  padding:12px 12px;
  border-radius:12px;
  color:var(--ink);
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(230,192,104,.25);
}
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:640px){ .grid-2{ grid-template-columns:1fr } }

.check{ display:flex; align-items:center; gap:10px; margin:6px 0 14px; color:var(--ink) }
.check input{ width:18px; height:18px }

.btn-submit{
  margin-top:6px;
  box-shadow:0 12px 34px rgba(230,192,104,.35);
  border:1px solid rgba(61,47,36,.1);
}

/* ===== Info ===== */
.info-block{
  display:grid; grid-template-columns:32px 1fr; gap:10px; align-items:start;
  margin:10px 0;
}
.info-block i{
  color:var(--brand);
  font-size:20px;
  margin-top:2px;
}
.info-block strong{ display:block; color:var(--brand); }

/* Telefone e e-mail em marrom forte */
.contact-line a{
  color: rgb(96 60 32);
  font-weight: 700;
}

/* Links sociais */
.social-links a{
  display:inline-flex; align-items:center; gap:8px; margin-right:12px; color:var(--brand);
}

/* SweetAlert acima de tudo */
.swal2-container{ z-index:2147483647 !important; }
.swal2-popup{
  border-radius:16px; border:1px solid rgba(124,1,48,.25);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.swal2-confirm{
  background:#E6C068 !important; color:#3D2F24 !important;
  font-weight:800 !important; border-radius:999px !important;
}
.swal2-icon.swal2-warning{ border-color:#E6C068 !important; color:#E6C068 !important; }

/* --- Espaço extra entre o banner (hero) e o formulário --- */
.hero .subcopy{
  /* deixa um respiro embaixo do balão */
  margin-bottom: clamp(12px, 2.5vw, 28px);
  display: inline-block;
}

/* dá um “pé” pro hero para que o próximo bloco comece mais abaixo */
.hero .hero-inner{
  padding-bottom: clamp(20px, 5vw, 72px) !important;
}

/* garante espaço no topo do miolo, independente do hero */
.after-hero{
  padding-top: clamp(28px, 6vw, 96px) !important;
}

/* Mobile: o banner costuma ficar mais alto, então aumenta um pouco */
@media (max-width: 760px){
  .after-hero{ padding-top: 160px !important; }
}