:root{
  --accent: #2C3527;       /* verde NovArk para botones */
  --accent-2: #161b15;     /* tono más oscuro */
  --surface: #0f1411;      /* panel oscuro */
  --surface-2: #111813;    /* gradiente */
}

/* Hero */
.contact-hero{
  background:
    linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.25)),
    url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=2000&auto=format&fit=crop')
    center/cover no-repeat;
}

/* Layout principal */
.contact-grid-2{
  display:grid; gap:22px; align-items:start;
}
@media (min-width: 980px){
  .contact-grid-2{ grid-template-columns: .95fr 1.25fr; }
}

/* Cards base */
.card{
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
  border: 1px solid #e5e7eb;
  background:#fff;
}

/* Panel izquierdo (oscuro) */
.info-card{
  padding:22px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid rgba(255,255,255,.06);
  color:#e7ece8;
}
.info-card h2{ margin:0 0 12px; color:#fff; }
.info-list{ list-style:none; margin:6px 0 16px; padding:0; }
.info-list li{ display:flex; gap:10px; align-items:center; margin:10px 0; opacity:.95; }
.info-list a{ color:#e7ece8; text-decoration:none; }
.info-list .ico{ width:28px; height:28px; display:grid; place-items:center; background:#1b231c; border-radius:10px; }

.socials{ display:flex; gap:10px; }
.socials a{
  width:36px; height:36px; display:grid; place-items:center; border-radius:999px;
  background:#1b231c; color:#dfe6e0; text-decoration:none; font-weight:700;
  border:1px solid rgba(255,255,255,.06);
  transition: transform .2s ease, background .2s ease;
}
.socials a:hover{ transform: translateY(-2px); background:#263126; }

.seal{
  display:flex; gap:10px; align-items:flex-start; margin-top:16px;
  padding:12px; border-radius:16px; background:#0f1411; border:1px solid rgba(255,255,255,.08);
}
.seal div{
  width:28px; height:28px; border-radius:8px; background:#1b231c; display:grid; place-items:center;
}

/* Formulario (derecha) */
.form-card{ padding:22px; }
.form-card h2{ margin:0 0 10px; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field > span{ font-weight:700; font-size:.95rem; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1px solid #e5e7eb; border-radius:14px; background:#fff; font:inherit;
}
.field textarea{ resize:vertical; }
.char-hint{ text-align:right; font-size:.82rem; color:#6b7280; margin-top:4px; }

.row{ display:grid; gap:12px; margin:12px 0; }
@media (min-width:680px){ .row{ grid-template-columns:1fr 1fr; } }

.consent{ display:flex; gap:10px; align-items:flex-start; margin:10px 0; }

/* Botones */
.actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn{ background:var(--accent); }
.btn:hover{ background: var(--accent-2); }
.btn.btn-alt{
  background:#f3f4f6; color:#111827;
}
.btn[disabled]{ opacity:.65; cursor:not-allowed; }

/* Estado */
.form-status{ min-height:24px; margin-top:8px; font-weight:600; }
.form-status.success{ color:#166534; }
.form-status.error{ color:#b91c1c; }

/* Honeypot */
.hp{ position:absolute; left:-9999px; opacity:0; pointer-events:none; }
