/* =========================================================
   CONTACT PAGE — shares tokens/buttons from style.css
   ========================================================= */

/* ---- Hero ---- */
.contact-hero{
  padding:72px 0 56px;
  background:var(--primary-deep);
}
.contact-hero .breadcrumb{
  color:rgba(255,255,255,.6);
  font-size:.85rem;
  margin-bottom:14px;
}
.contact-hero .breadcrumb a{ color:var(--gold-bright); }
.contact-hero .breadcrumb span{ margin:0 6px; }
.contact-hero h1{
  color:var(--white);
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  margin-bottom:12px;
}
.contact-hero-lead{
  color:rgba(255,255,255,.8);
  max-width:58ch;
  margin:0;
}

/* ---- Main grid ---- */
.contact-main{ padding:88px 0; }
.contact-grid{
  display:grid;
  grid-template-columns:1.3fr .8fr;
  gap:56px;
  align-items:start;
}

/* ---- Form ---- */
.contact-form-wrap h2{ font-size:clamp(1.6rem,2.4vw,2.1rem); }
.contact-form-lead{ color:var(--muted); max-width:52ch; margin-bottom:28px; }

.contact-form{ display:flex; flex-direction:column; gap:18px; }
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.contact-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.85rem;
  font-weight:600;
  color:var(--primary-deep);
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  font-family:var(--font-body);
  font-size:.95rem;
  padding:12px 14px;
  border:1px solid var(--hairline);
  background:var(--white);
  color:var(--ink);
  border-radius:2px;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:2px solid var(--gold);
  outline-offset:1px;
}
.contact-form textarea{ resize:vertical; }
.contact-submit{ align-self:flex-start; margin-top:4px; }
.contact-note{
  font-size:.85rem;
  color:var(--muted);
  margin:0;
}
.contact-note a{ color:var(--gold-deep); border-bottom:1px solid var(--gold); }

.contact-success{
  display:none;
  margin-top:24px;
  padding:16px 18px;
  background:#f2f5f8;
  border-left:3px solid var(--gold);
  color:var(--primary-deep);
  font-size:.92rem;
}
.contact-success a{ color:var(--gold-deep); }
.contact-success.show{ display:block; }
.contact-form.hide{ display:none; }

/* ---- Info sidebar ---- */
.contact-info{
  display:flex;
  flex-direction:column;
  gap:20px;
  background:#fbf9f4;
  border:1px solid var(--hairline);
  padding:32px 28px;
}
.info-card{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding-bottom:20px;
  border-bottom:1px solid var(--hairline);
}
.info-card:last-of-type{ border-bottom:none; padding-bottom:0; }
.info-icon{
  flex:0 0 auto;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:var(--white);
  border:1px solid var(--hairline);
  font-size:1.05rem;
}
.info-card h3{ font-size:.95rem; margin-bottom:6px; }
.info-card p{ font-size:.9rem; margin:0 0 2px; color:var(--muted); }
.info-card p a{ color:var(--ink); }
.info-card p a:hover{ color:var(--gold-deep); }
.hours-placeholder{ font-style:italic; font-size:.82rem; }

.info-social{
  display:flex;
  gap:10px;
  margin-top:6px;
}
.social-pill{
  flex:1;
  text-align:center;
  padding:10px 14px;
  font-size:.85rem;
  font-weight:600;
  border:1px solid var(--hairline);
  color:var(--primary-deep);
}
.social-pill.whatsapp:hover{ background:#25d366; border-color:#25d366; color:var(--white); }
.social-pill.instagram:hover{
  background:radial-gradient(circle at 30% 110%, #ffdb73 0%, #fd5949 45%, #d6249f 70%, #285aeb 100%);
  border-color:transparent;
  color:var(--white);
}

/* ---- Map ---- */
.contact-map{
  padding:88px 0;
  background:#fbf9f4;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.map-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
  align-items:stretch;
}
.map-copy h2{ font-size:clamp(1.6rem,2.4vw,2.1rem); }
.map-copy p{ color:var(--muted); max-width:46ch; }
.map-address{ color:var(--ink) !important; font-weight:600; margin-top:14px; }

.map-frame{
  border:1px solid var(--hairline);
  min-height:340px;
}
.map-frame iframe{
  width:100%; height:100%;
  min-height:340px;
  border:0;
  display:block;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .contact-grid,
  .map-grid{ grid-template-columns:1fr; }
  .map-frame{ order:-1; min-height:280px; }
  .map-frame iframe{ min-height:280px; }
}
@media (max-width:640px){
  .form-row{ grid-template-columns:1fr; }
  .contact-submit{ width:100%; justify-content:center; }
  .info-social{ flex-direction:column; }
}

/* ---- Hero ---- */
.contact-hero{
  position:relative;
  min-height:44vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--primary-deep);
}
.contact-hero-media{ position:absolute; inset:0; }
.contact-hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.contact-hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,32,55,.55) 0%, rgba(13,32,55,.92) 100%);
}
.contact-hero-content{ position:relative; padding:0 32px 52px; }
.contact-hero .breadcrumb{
  color:rgba(255,255,255,.6);
  font-size:.85rem;
  margin-bottom:14px;
}
.contact-hero .breadcrumb a{ color:var(--gold-bright); }
.contact-hero .breadcrumb span{ margin:0 6px; }
.contact-hero h1{
  color:var(--white);
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  margin-bottom:12px;
}
.contact-hero-lead{
  color:rgba(255,255,255,.8);
  max-width:58ch;
  margin:0;
}