/* /contact/ · estilos propios (solo se cargan en esta página). La columna derecha de la cabecera
   es una caja blanca (formulario, canales o el paso de empezar) en lugar de la llamada de ejemplo;
   «Before you write» no deja tarjetas huérfanas con 2 o 4; la dirección va en claro.
   Solo tokens de tokens.css. */

/* Caja de la cabecera: mismo lenguaje que la tarjeta de llamada (blanca, borde, sombra). */
.contacto-caja {
	min-width: 0; padding: var(--sp-24);
	background: var(--arg-surface-card); color: var(--arg-text);
	border: 1px solid var(--arg-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}
.contacto-caja__titulo { font-size: var(--fs-28); line-height: var(--lh-sub); }
.contacto-caja__texto { margin-top: var(--sp-12); color: var(--arg-text-weak); font-size: var(--fs-16); line-height: 1.5; }
.contacto-caja__formulario { margin-top: var(--sp-24); }
.contacto-caja__accion { margin-top: var(--sp-24); }
@media (min-width: 600px) { .contacto-caja { padding: var(--sp-32); } }
@media (min-width: 1024px) { .contacto-caja { margin-top: var(--sp-32); } }

/* Correo y teléfono como filas táctiles (≥ 44 px), con el valor que puede ser largo partible. */
.contacto-canales { list-style: none; padding: 0; margin: var(--sp-16) 0 0; display: grid; gap: var(--sp-8); }
.contacto-canal {
	display: flex; align-items: center; gap: var(--sp-16); min-height: var(--target);
	padding: var(--sp-12); border-radius: var(--radius-md); color: var(--arg-text); text-decoration: none;
}
.contacto-canal:hover { background: var(--arg-lime-tint); }
.contacto-canal > span:last-child { display: grid; min-width: 0; }
.contacto-canal__etiqueta { color: var(--arg-text-weak); }
.contacto-canal__valor { font-size: var(--fs-18); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }

/* Antes de escribir: con 2 o 4 tarjetas, dos columnas (y 4 en pantallas anchas), nunca 3 + 1. */
@media (min-width: 1024px) {
	.contacto-antes--2, .contacto-antes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
	.contacto-antes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Datos de la empresa, en claro: si no hay banda de cierre, un bloque oscuro se fundiría con el
   pie. La cifra pasa de lima (sin contraste sobre crema) a hoja. */
.contacto-oficio .pag-oficio__numero { color: var(--arg-leaf); }
.contacto-oficio .pag-oficio__cifra .mono-etiqueta { color: var(--arg-text-weak); }
.contacto-empresa { display: grid; gap: var(--sp-4); font-style: normal; font-size: var(--fs-20); line-height: 1.5; overflow-wrap: anywhere; }
.contacto-empresa span { color: var(--arg-text-weak); }
.contacto-empresa a { display: inline-flex; align-items: center; min-height: var(--target); justify-self: start; }