/* =========================================================
   Proyecto Raíces — PAGES · Contacto (contacto.html)
   ---------------------------------------------------------
   Canales de contacto + panel claro con el formulario.
   ========================================================= */

/* ---------- Contacto ---------- */
.contact-wrap{display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--space-9); align-items:start;}
#whatsapp-cta-holder{margin-top:var(--space-5);}
/* "Canales de contacto" vive sobre el verde base de la página (no
   sobre .bg-surface): los tres canales comparten la misma escala,
   peso y acento (amarillo) — la separación es por espacio (gap), no
   por líneas. */
.contact-channels{margin-top:var(--space-2); display:flex; flex-direction:column; gap:24px;}
.contact-label{display:block; font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:0.14em; color:var(--text-secondary); margin-bottom:7px;}
.contact-value{display:inline-block; font-family:var(--font-heading); font-weight:700; font-size:clamp(17px,2.1vw,21px); line-height:1.3; text-decoration:none; border-bottom:1.5px solid transparent; padding-bottom:3px; word-break:break-word; overflow-wrap:anywhere; transition:border-color .25s ease, opacity .25s ease;}
.contact-value-amarillo{color:var(--color-accent-2); border-bottom-color:rgba(var(--amarillo-rgb),0.4);}
.contact-value-amarillo:hover,
.contact-value-amarillo:focus-visible{border-bottom-color:var(--color-accent-2); opacity:0.82;}
.contact-form-panel{background:var(--bg-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:var(--space-7);}
@media (max-width:640px){
  .contact-form-panel{padding:var(--space-5);}
}
@media (max-width: 860px){
  .contact-wrap{grid-template-columns:1fr;}
}
/* Sobre papel: foco marrón y texto secundario oscuro (ver tokens). */
.contact-form-panel{--focus-ring:var(--focus-ring-on-paper); --text-secondary:var(--text-secondary-on-paper); --text-muted:var(--text-secondary-on-paper);}