/* ========= CONTACTO ========= */

/* Hero */
.contact-hero{
  border-bottom:1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 92%, black 8%);
}
.contact-hero .container{ padding:18px 0; }
.contact-hero h1{ margin:0 0 6px; }
.contact-hero .lead{ color:var(--muted); }

/* Grid principal */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:16px;
  align-items:start;
}

/* Tarjetas (no toques si ya tienes .card global; aquí es seguro) */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
}

/* ---------- Formulario ---------- */
.contact-card h2{ margin-top:0; }

/* Honeypot (oculto para usuarios, visible para bots) */
.hp{
  position:absolute !important;
  left:-100vw !important;
  width:0 !important;
  height:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}

.row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.form-group{ display:grid; gap:6px; margin-bottom:12px; }
.form-group label{ font-weight:600; }

.form-group input,
.form-group select,
.form-group textarea{
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  width:100%;
}

.form-group textarea{ resize:vertical; min-height:140px; }
.hint{ color:var(--muted); font-size:12px; }

/* Estados de foco accesibles */
.form-group :is(input,select,textarea):focus-visible{
  outline:2px solid color-mix(in oklab, var(--brand) 60%, white 40%);
  outline-offset:2px;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent);
  border-color: color-mix(in oklab, var(--brand) 60%, var(--border));
}

/* (Opcional) estados de error si algún script añade .error al form-group */
.form-group.error :is(input,select,textarea){
  border-color:#b55;
  box-shadow:0 0 0 3px rgba(181,85,85,.2);
}
.form-group .field-msg{
  font-size:12px; color:#e09; display:none;
}
.form-group.error .field-msg{ display:block; }

/* Acciones */
.form-actions{ display:flex; gap:8px; margin-top:8px; }

/* Nota legal */
.form-note{ margin-top:10px; color:var(--muted); }

/* Alertas de estado */
.alert{
  margin-top:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid transparent;
  display:none;
}
.alert.show{ display:block; }
.alert.ok{ background:#0f1b2a; border-color:var(--border); }
.alert.err{ background:#2a1111; border-color:#512; }

/* ---------- Lateral ---------- */
.contact-side{ display:grid; gap:16px; }
.side-card h3{ margin-top:0; }

.contact-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:8px;
}
.contact-list li{
  display:grid;
  grid-template-columns:22px 1fr;
  align-items:start; gap:8px;
}
.contact-list .ico{ opacity:.85; }

/* ---------- Mapa ---------- */
.map-wrap{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:16 / 10;
  margin-bottom:10px;
}
.map-wrap iframe{ width:100%; height:100%; border:0; }

/* ---------- Responsivo ---------- */
@media (max-width: 980px){
  .contact-grid{ grid-template-columns:1fr; }
  .row-2{ grid-template-columns:1fr; }
}

/* Reduce motion: suaviza animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}