/**
 * T-03 · Contacto — templates/contact-page/styles.css
 *
 * Estilos propios de la plantilla de contacto. Handle
 * `pf_pfuture_template_contact_page`, solo en `/contacto/`.
 *
 * Los estilos del formulario los trae common/form-contacto/ (agente leads).
 * Aquí solo se coloca: esta hoja no pinta campos ni botones del formulario.
 *
 * Bloques raíz:
 *   .pf-contact             contenedor de la plantilla
 *   .pf-contact__grid       columna de datos + columna de formulario
 *   .pf-contact__datos      datos de contacto (desde configuración del tema)
 *   .pf-contact__form       hueco del componente de formulario
 *   .pf-contact__confianza  bloque de confianza
 *   .pf-contact__clientes   clientes reales, por nombre
 *
 * Tokens: solo nombres canonicos de style.css seccion 1, y sin literal de respaldo
 * (issue #60). `var(--x, 3rem)` se queda con el literal siempre que el token falte,
 * que es como el andamiaje dejo de consumir la escala de verdad sin que se notara.
 *
 * @package pfuture
 */

/* Canalón --------------------------------------------------------------------
 *
 * El canalón lo da la plantilla a sus hijos directos, con el idiom de
 * `.pf-container` —style.css sección 5—. Convención del tema desde el #78 y el
 * #84; aquí se adopta con el #90. Ver DEC-027 y DEC-028 de `portafolio`.
 *
 * T-03 tiene hero, así que el desajuste se veía dentro de la propia página y no
 * solo al navegar a otra. Medido antes de tocar, tema claro forzado en cliente,
 * borde izquierdo del contenido:
 *
 *   ventana   <h1> del hero   __inner
 *   400       24              16
 *   768       24              16
 *   1024      24              16
 *   1280      64              56
 *   1440      144             136
 *
 * Ocho píxeles a la izquierda del titular en los cinco anchos, porque `__inner`
 * contenía por su cuenta y con `--pf-space-sm` mientras `.pf-hero__inner` usa
 * `--pf-gutter`. Es el defecto del #78 y el #84 con otro número: allí eran 24px
 * por el idiom de `min()`, aquí 8 por el token equivocado. `__inner` conserva
 * su relleno de bloque, que no es canalón.
 *
 * Sobre el hijo directo y no sobre cada bloque, para que un componente con
 * canalón propio no se lo sume encima. Dos clases (0,2,0) para ganar a
 * `.pf-cta-box--section` (0,1,0), que encola su hoja al pintarse o sea después
 * de esta. Hero excluido porque va a sangre y pone el canalón en su `__inner`,
 * que es justo el borde con el que ahora coincide el contenido.
 */
.pf-contact > :not(.pf-hero) {
	margin-inline: auto;
	max-width: var(--pf-container);
	padding-inline: var(--pf-gutter);
	width: 100%;
}

.pf-contact__inner {
	padding-block: var(--pf-space-xl);
}

/*
 * El andamiaje pedia 2.5rem de separacion entre las dos columnas y la escala
 * canonica no tiene ese paso: salta de `lg` (2rem) a `xl` (3rem). Se redondea
 * arriba, que es lo que corresponde a un medianil entre columnas de 18rem y
 * 1.6fr; 2rem las deja pegadas.
 */
.pf-contact__grid {
	display: grid;
	gap: var(--pf-space-xl);
	grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
	.pf-contact__grid {
		grid-template-columns: minmax(18rem, 1fr) minmax(0, 1.6fr);
	}
}

.pf-contact__section-title {
	margin: 0 0 var(--pf-space-sm);
}

/* Datos de contacto --------------------------------------------------------- */

.pf-contact__datos-list {
	display: grid;
	gap: var(--pf-space-sm);
	list-style: none;
	margin: 0 0 var(--pf-space-md);
	padding: 0;
}

.pf-contact__dato {
	display: flex;
	flex-direction: column;
	gap: var(--pf-space-3xs);
}

.pf-contact__dato-label {
	font-weight: var(--pf-weight-bold);
}

.pf-contact__redes-title {
	font-size: var(--pf-text-base);
	margin: 0 0 var(--pf-space-2xs);
}

.pf-contact__redes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pf-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Bloque de confianza ------------------------------------------------------- */

.pf-contact__confianza {
	margin-top: var(--pf-space-xl);
}

/* Prosa con la medida de lectura de la dirección «Expediente» (issue #113). */
.pf-contact__confianza-text {
	font-size: var(--pf-text-prose);
	line-height: var(--pf-leading-loose);
	margin: 0 0 var(--pf-space-sm);
}

/* Clientes reales, por nombre. No es una rejilla de logos: solo 1 de los 12
   términos de `cliente` tiene logo, y una fila con un logo y once huecos resta
   en vez de sumar. Ver DEC-024. */
.pf-contact__clientes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pf-space-2xs) var(--pf-space-xs);
	list-style: none;
	margin: 0 0 var(--pf-space-md);
	padding: 0;
}

/*
 * El fondo salia de `--pf-surface-2`, que no lo definia nadie —ni en la seccion 1
 * ni en la capa de alias—, asi que la unica hoja del modulo donde el respaldo
 * mandaba de verdad era esta: se pintaba `rgba(0, 0, 0, .05)` a pelo. Sobre fondo
 * claro pasaba por gris; sobre el fondo oscuro es negro translucido sobre navy y
 * el distintivo desaparecia. `--pf-color-bg-alt` es una superficie de verdad y
 * cambia con el tema, que es lo que este bloque necesitaba desde el principio.
 */
.pf-contact__cliente {
	background: var(--pf-color-bg-alt);
	border-radius: var(--pf-radius-pill);
	font-size: 0.9375rem;
	padding: var(--pf-space-3xs) var(--pf-space-xs);
}

.pf-contact__confianza-list {
	display: grid;
	gap: var(--pf-space-md);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.pf-contact__confianza-item-title {
	margin: 0 0 var(--pf-space-2xs);
}

.pf-contact__confianza-item-text {
	margin: 0;
}