/* ============================================================
   Nicracan — Contacto (formulario, mapa, reseñas).
   Requiere brand.css, style.css y blog.css (page-hero) antes.
   ============================================================ */

.contact-section{ background:var(--bone); padding:72px 0 100px; }
.contact-layout{
  display:grid; grid-template-columns:1fr; gap:48px; margin-top:20px;
}
@media(min-width:900px){ .contact-layout{ grid-template-columns:1.1fr 1fr; gap:64px; } }

/* ---------- formulario ---------- */
.form-banner{
  padding:16px 20px; margin-bottom:28px; font-size:14.5px; border-left:3px solid;
}
.form-banner--ok{ background:#eef5ea; border-color:#5a8a4a; color:#2f4a26; }
.form-banner--error{ background:#f7e9e6; border-color:#a8493a; color:#5c261e; }

.field{ margin-bottom:22px; }
.field label{
  display:block; font-family:'Oswald'; font-size:11.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--graphite); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; font-family:'Jost'; font-size:15px;
  border:1px solid rgba(13,13,13,0.18); background:var(--white); color:var(--ink);
  border-radius:1px;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold-deep);
}
.field textarea{ min-height:130px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr; gap:0; }
@media(min-width:560px){ .field-row{ grid-template-columns:1fr 1fr; gap:18px; } }

/* honeypot: oculto para personas, visible para bots que ignoran CSS */
.hp-field{ position:absolute; left:-9999px; top:-9999px; }

.form-submit{
  border:none; cursor:pointer; font-family:'Oswald'; font-size:13px;
  letter-spacing:0.1em; text-transform:uppercase; font-weight:600;
  padding:15px 34px; background:var(--ink); color:var(--bone);
  transition:background .2s ease, transform .2s ease;
}
.form-submit:hover{ background:var(--gold-deep); transform:translateY(-2px); }

/* ---------- lateral: mapa + info + reseñas ---------- */
.contact-side h2{ font-size:22px; margin-bottom:8px; }
.contact-info{ font-size:15px; line-height:1.9; color:var(--graphite); margin-bottom:32px; }
.contact-info a{ color:var(--gold-deep); text-decoration:none; border-bottom:1px solid var(--hair); }
.contact-info a:hover{ border-color:var(--gold-deep); }

.map-embed{ border:1px solid rgba(13,13,13,0.1); }
.map-embed iframe{ width:100%; height:280px; border:0; display:block; }