/* ============================================================
   ANVIL · Contact page. Hero reuses division.css; form fields
   reuse the DPS .field components. This file = the layout.
   ============================================================ */

.contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: start; }

.contact-form .btn { margin-top: 10px; }
.form-note {
  margin-top: 18px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--label-info);
}

.contact-details { display: flex; flex-direction: column; gap: 34px; padding-top: 6px; }
.cd-block .cd-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-chrome); margin-bottom: 12px; }
.cd-email {
  display: inline-block; font-size: clamp(19px, 2.1vw, 28px); letter-spacing: -0.018em;
  color: var(--platinum); border-bottom: 1px solid var(--titanium-grey); padding-bottom: 4px;
  transition: border-color 300ms var(--ease-out);
}
.cd-email:hover { border-color: var(--platinum); }
.cd-val { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--cold-silver); }
.cd-note { font-size: 14px; line-height: 1.6; color: var(--cold-silver); max-width: 300px; }

/* Sent confirmation */
.form-sent {
  display: none; padding: 28px; border: 1px solid rgba(157,184,199,0.35); border-radius: 4px;
  background: rgba(125,143,163,0.05);
}
.form-sent .fs-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cold-cyan); }
.form-sent .fs-head::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cold-cyan); box-shadow: 0 0 10px rgba(157,184,199,0.6); }
.form-sent p { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--cold-silver); }
/* PUB-03 (auditoría 2026-07-10): el aviso post-envío es ADICIONAL — el
   formulario nunca se oculta ni se vacía (el mailto puede no tener cliente
   de correo; el mensaje del usuario no debe perderse). */
.contact-form.is-sent + .form-sent { display: block; margin-top: 28px; }

@media (max-width: 1000px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}