/*
 * Gastrototem · Páginas · Interiores (afinación / criterio / nosotros / contacto)
 *
 * Andamiaje común de las páginas interiores propias (page-{slug}.php): banda
 * tinta de apertura —reutiliza .gtt-doc-band de components/documento.css— y, bajo
 * ella, el cuerpo papel con secciones. Los primitivos (kicker, pasos, zonas,
 * pull-quote) viven en components/primitivos.css; aquí va el SHELL del cuerpo y
 * las secciones BESPOKE de cada página (cada una en su propio commit).
 *
 * Centrado igual que la banda (.gtt-doc-band__inner): max-width contenido +
 * gutter de tokens; así banda y cuerpo alinean en pantallas anchas.
 *
 * Cero hex literales · cero font-family literal. Solo var(--gtt-*).
 */

/* ============================================================
 * SHELL — cuerpo papel bajo la banda
 * ============================================================ */
.gtt-pagina {
	background-color: var(--gtt-color-papel-100);
	color: var(--gtt-color-grafito-900);
}

.gtt-pagina__inner {
	max-width: var(--gtt-container-content);
	margin-inline: auto;
	padding-inline: var(--gtt-space-6);
	padding-block: var(--gtt-space-12) var(--gtt-space-32);
}

/* Ritmo vertical entre secciones. */
.gtt-pagina-seccion + .gtt-pagina-seccion {
	margin-top: var(--gtt-space-24);
}

/* ============================================================
 * PROSA — bloques de lectura (punto de vista / el oficio).
 * Medida estrecha; primer párrafo pegado al kicker.
 * ============================================================ */
.gtt-prosa {
	max-width: 40rem;
	margin-top: var(--gtt-space-6);
}

.gtt-prosa p {
	margin: var(--gtt-space-6) 0 0;
	font-family: var(--gtt-font-sans);
	font-weight: 400;
	font-size: var(--gtt-text-prose);
	line-height: var(--gtt-leading-prose);
	color: var(--gtt-color-grafito-900);
}

.gtt-prosa p:first-child {
	margin-top: 0;
}

/* ============================================================
 * ENLACE-CORREO / CTA «Escríbenos» sobre papel.
 * Tinta como texto sobre fondo claro = permitido (la prohibición
 * es tinta-texto sobre fondo oscuro).
 * ============================================================ */
.gtt-pagina-mail {
	display: inline-flex;
	align-items: baseline;
	gap: var(--gtt-space-2);
	font-family: var(--gtt-font-sans);
	font-weight: 500;
	color: var(--gtt-color-tinta-500);
	text-decoration: none;
}

.gtt-pagina-mail-flecha {
	display: inline-block;
	transition: transform 180ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
	.gtt-pagina-mail:hover .gtt-pagina-mail-label {
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.gtt-pagina-mail:hover .gtt-pagina-mail-flecha {
		transform: translateX(var(--gtt-space-1));
	}
}

@media (prefers-reduced-motion: reduce) {
	.gtt-pagina-mail-flecha {
		transition: none;
	}
}

/* ============================================================
 * /AFINACIÓN — precio + reserva por zonas + Afinación en Profundidad
 * ============================================================ */
.gtt-afinacion-precio {
	margin: var(--gtt-space-6) 0 0;
	font-family: var(--gtt-font-sans);
	font-weight: 500;
	font-size: var(--gtt-text-2xl);
	line-height: var(--gtt-leading-snug);
	color: var(--gtt-color-grafito-900);
}

.gtt-afinacion-nota {
	margin: var(--gtt-space-2) 0 0;
	font-family: var(--gtt-font-sans);
	font-weight: 400;
	font-size: var(--gtt-text-base);
	line-height: var(--gtt-leading-normal);
	color: var(--gtt-color-grafito-900);
}

.gtt-afinacion-zonas-intro {
	margin: var(--gtt-space-6) 0 0;
	font-family: var(--gtt-font-sans);
	font-weight: 400;
	font-size: var(--gtt-text-lg);
	line-height: var(--gtt-leading-normal);
	color: var(--gtt-color-grafito-900);
}

/* Afinación en Profundidad: hairline de separación + medida estrecha. */
.gtt-profundidad {
	border-top: 1px solid var(--gtt-color-grafito-200);
	padding-top: var(--gtt-space-12);
	max-width: 40rem;
}

.gtt-profundidad__texto {
	margin: var(--gtt-space-6) 0 0;
	font-family: var(--gtt-font-sans);
	font-weight: 400;
	font-size: var(--gtt-text-base);
	line-height: var(--gtt-leading-relaxed);
	color: var(--gtt-color-grafito-900);
}

.gtt-profundidad__cta {
	margin-top: var(--gtt-space-6);
	font-size: var(--gtt-text-base);
}

/* ============================================================
 * /CRITERIO — las cuatro miradas (rejilla 1 col → 2×2 con hairlines)
 * ============================================================ */
.gtt-miradas {
	margin-top: var(--gtt-space-6);
	display: grid;
	grid-template-columns: 1fr;
	border-top: 1px solid var(--gtt-color-grafito-200);
}

.gtt-mirada {
	padding: var(--gtt-space-8) 0;
	border-bottom: 1px solid var(--gtt-color-grafito-200);
}

.gtt-mirada:last-child {
	border-bottom: 0;
}

.gtt-mirada__titulo {
	margin: 0;
	font-family: var(--gtt-font-sans);
	font-weight: 500;
	font-size: var(--gtt-text-xl);
	line-height: var(--gtt-leading-tight);
	color: var(--gtt-color-grafito-900);
}

.gtt-mirada__texto {
	margin: var(--gtt-space-3) 0 0;
	font-family: var(--gtt-font-sans);
	font-weight: 400;
	font-size: var(--gtt-text-base);
	line-height: var(--gtt-leading-relaxed);
	color: var(--gtt-color-grafito-900);
}

@media (min-width: 768px) {
	.gtt-miradas {
		grid-template-columns: 1fr 1fr;
	}

	.gtt-mirada {
		padding: var(--gtt-space-8);
		border-bottom: 1px solid var(--gtt-color-grafito-200);
	}

	/* Columna izquierda: hairline vertical de separación + sangrado al borde. */
	.gtt-mirada:nth-child(odd) {
		padding-left: 0;
		border-right: 1px solid var(--gtt-color-grafito-200);
	}

	.gtt-mirada:nth-child(even) {
		padding-right: 0;
	}

	/* Última fila (3.ª y 4.ª) sin regla inferior. */
	.gtt-mirada:nth-child(3),
	.gtt-mirada:nth-child(4) {
		border-bottom: 0;
	}
}

/* ============================================================
 * /NOSOTROS — los dos afinadores (1 col → 2 col)
 * ============================================================ */
.gtt-dos__intro {
	margin: var(--gtt-space-6) 0 0;
	font-family: var(--gtt-font-sans);
	font-weight: 400;
	font-size: var(--gtt-text-lg);
	line-height: var(--gtt-leading-snug);
	color: var(--gtt-color-grafito-900);
}

.gtt-dos {
	margin-top: var(--gtt-space-8);
	display: flex;
	flex-direction: column;
	gap: var(--gtt-space-12);
}

@media (min-width: 768px) {
	.gtt-dos {
		flex-direction: row;
	}

	.gtt-persona {
		flex: 1;
	}
}

.gtt-persona__nombre {
	margin: 0;
	font-family: var(--gtt-font-sans);
	font-weight: 500;
	font-size: var(--gtt-text-xl);
	line-height: var(--gtt-leading-tight);
	color: var(--gtt-color-grafito-900);
}

.gtt-persona__rol {
	margin: var(--gtt-space-2) 0 0;
	font-family: var(--gtt-font-sans);
	font-weight: 400;
	font-size: var(--gtt-text-sm);
	color: var(--gtt-color-grafito-500);
}

.gtt-persona__bio {
	margin: var(--gtt-space-4) 0 0;
	font-family: var(--gtt-font-sans);
	font-weight: 400;
	font-size: var(--gtt-text-base);
	line-height: var(--gtt-leading-relaxed);
	color: var(--gtt-color-grafito-900);
}

/* ============================================================
 * /CONTACTO — canales (correo único, reservar, la firma)
 * ============================================================ */
.gtt-canal + .gtt-canal {
	margin-top: var(--gtt-space-12);
}

.gtt-canal__mail {
	display: inline-block;
	margin-top: var(--gtt-space-3);
	font-family: var(--gtt-font-sans);
	font-weight: 500;
	font-size: var(--gtt-text-2xl);
	line-height: var(--gtt-leading-tight);
	color: var(--gtt-color-tinta-500);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.gtt-canal__mail:hover {
		text-decoration: underline;
		text-underline-offset: 4px;
	}
}

.gtt-canal__texto {
	margin: var(--gtt-space-3) 0 0;
	font-family: var(--gtt-font-sans);
	font-weight: 400;
	font-size: var(--gtt-text-base);
	line-height: var(--gtt-leading-normal);
	color: var(--gtt-color-grafito-900);
}

.gtt-canal__texto a {
	color: var(--gtt-color-tinta-500);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gtt-firma-descriptor {
	margin: var(--gtt-space-3) 0 0;
	font-family: var(--gtt-font-sans);
	font-weight: 400;
	font-size: var(--gtt-text-base);
	line-height: var(--gtt-leading-normal);
	color: var(--gtt-color-grafito-900);
}

.gtt-firma-descriptor__nota {
	margin: var(--gtt-space-2) 0 0;
	font-family: var(--gtt-font-sans);
	font-weight: 400;
	font-size: var(--gtt-text-sm);
	line-height: var(--gtt-leading-normal);
	color: var(--gtt-color-grafito-500);
}