/*
 * 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);
	overflow-wrap: anywhere;
	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);
}

/* Afinación · landing --------------------------------------------------- */
.gtt-lede { font-size: var(--gtt-text-2xl); line-height: var(--gtt-leading-snug); font-weight: 500; max-width: 30ch; margin: 0 0 var(--gtt-space-6); text-wrap: balance; }
.gtt-para-quien { display: grid; gap: var(--gtt-space-8); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.gtt-para-quien__titulo { font-size: var(--gtt-text-xl); font-weight: 500; margin: 0 0 var(--gtt-space-2); }
.gtt-para-quien__texto { margin: 0; color: var(--gtt-color-grafito-500); }
.gtt-incluye { list-style: none; margin: var(--gtt-space-4) 0 0; padding: 0; max-width: var(--gtt-container-prose); }
.gtt-incluye li { padding: var(--gtt-space-3) 0; border-top: 1px solid var(--gtt-color-rule); }
.gtt-incluye li:last-child { border-bottom: 1px solid var(--gtt-color-rule); }
.gtt-informe { list-style: none; margin: var(--gtt-space-6) 0 0; padding: 0; display: grid; gap: 1px; background: var(--gtt-color-rule); border-block: 1px solid var(--gtt-color-rule); }
.gtt-informe__seccion { display: grid; grid-template-columns: 3rem 1fr; gap: var(--gtt-space-4); background: var(--gtt-color-bg); padding: var(--gtt-space-4) 0; align-items: baseline; }
.gtt-informe__num { font-family: var(--gtt-font-mono); font-size: var(--gtt-text-sm); color: var(--gtt-color-tinta-500); }
.gtt-informe__titulo { font-size: var(--gtt-text-xl); font-weight: 500; margin: 0; }
.gtt-informe__texto { grid-column: 2; margin: 0; color: var(--gtt-color-grafito-500); }
.gtt-ejemplo { margin: var(--gtt-space-12) 0 0; padding: var(--gtt-space-6); background: var(--gtt-color-papel-50); border-left: 2px solid var(--gtt-color-tinta-500); max-width: 42rem; }
.gtt-ejemplo__titulo { font-weight: 600; margin: var(--gtt-space-3) 0 var(--gtt-space-2); }
.gtt-ejemplo__parte { margin: 0 0 var(--gtt-space-3); font-size: var(--gtt-text-base); line-height: var(--gtt-leading-relaxed); }
.gtt-ejemplo__parte strong { font-weight: 600; }
.gtt-faq { max-width: var(--gtt-container-prose); border-top: 1px solid var(--gtt-color-rule); }
.gtt-faq__item { border-bottom: 1px solid var(--gtt-color-rule); }
.gtt-faq__pregunta { cursor: pointer; padding: var(--gtt-space-4) 0; font-weight: 500; font-size: var(--gtt-text-lg); list-style: none; display: flex; justify-content: space-between; gap: var(--gtt-space-4); }
.gtt-faq__pregunta::-webkit-details-marker { display: none; }
.gtt-faq__pregunta::after { content: '+'; font-family: var(--gtt-font-mono); color: var(--gtt-color-tinta-500); }
.gtt-faq__item[open] .gtt-faq__pregunta::after { content: '−'; }
.gtt-faq__respuesta { padding: 0 0 var(--gtt-space-4); color: var(--gtt-color-grafito-500); max-width: 60ch; }
.gtt-faq__respuesta p { margin: 0; }
.gtt-precio-bloque { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gtt-space-3) var(--gtt-space-6); margin: 0 0 var(--gtt-space-2); }
.gtt-precio-bloque__iva { font-family: var(--gtt-font-mono); font-size: var(--gtt-text-sm); color: var(--gtt-color-grafito-400); }
.gtt-nota-legal { font-size: var(--gtt-text-sm); color: var(--gtt-color-grafito-400); max-width: 60ch; }
.gtt-nota-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gtt-ctas { display: flex; flex-wrap: wrap; gap: var(--gtt-space-4); margin-top: var(--gtt-space-8); }
/* Quiénes somos ------------------------------------------------------------ */
/* Retrato: blanco y negro (la identidad de marca) y sin caja. El grayscale se
 * mantiene aunque el fichero ya venga desaturado: blinda cualquier retrato
 * futuro que entre en color. */
.gtt-persona__retrato { aspect-ratio: 4 / 5; max-width: 18rem; background: var(--gtt-color-papel-200); margin: 0 0 var(--gtt-space-6); overflow: hidden; }
.gtt-persona__retrato img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1); }
.gtt-persona__bio p { margin: 0 0 var(--gtt-space-3); }

/* Enlaces personales: icono de línea + identificador, en mono como el resto de
 * las etiquetas de la página. Uno por línea, no una fila de iconos sueltos. */
.gtt-persona__enlaces { list-style: none; padding: 0; margin: var(--gtt-space-4) 0 0; display: flex; flex-direction: column; gap: var(--gtt-space-2); }
.gtt-persona__enlaces a { display: inline-flex; align-items: center; gap: var(--gtt-space-2); font-family: var(--gtt-font-mono); font-size: var(--gtt-text-xs); letter-spacing: var(--gtt-tracking-wide); color: var(--gtt-color-tinta-500); text-decoration: none; }
.gtt-persona__enlaces .gtt-icono { flex: 0 0 auto; }

@media (hover: hover) and (pointer: fine) {
	.gtt-persona__enlaces a:hover { text-decoration: underline; text-underline-offset: 4px; }
}
.gtt-lista-plana { list-style: none; padding: 0; margin: var(--gtt-space-4) 0 0; max-width: var(--gtt-container-prose); }
.gtt-lista-plana li { padding: var(--gtt-space-3) 0; border-top: 1px solid var(--gtt-color-rule); }

/* ============================================================
 * LANDING DE PROVINCIA (template-provincia.php)
 * Reutiliza la piel de /afinacion; aquí solo lo propio: la lista
 * «Lo que miramos», las fechas de cada zona, el formulario de
 * espera suelto y la línea de otras provincias.
 * ============================================================ */
.gtt-lectura-intro { margin-top: var(--gtt-space-8); }
.gtt-lectura { list-style: none; margin: var(--gtt-space-6) 0 0; padding: 0; display: grid; gap: var(--gtt-space-6); max-width: var(--gtt-container-prose); }
.gtt-lectura__item { padding-left: var(--gtt-space-4); border-left: 1px solid var(--gtt-color-rule); }
.gtt-lectura__titulo { margin: 0 0 var(--gtt-space-1); font-size: var(--gtt-text-lg); font-weight: 500; line-height: var(--gtt-leading-snug); }
.gtt-lectura__texto { margin: 0; color: var(--gtt-color-grafito-500); }
.gtt-provincia__cierre { margin-top: var(--gtt-space-8); }
.gtt-zona__fechas { margin: var(--gtt-space-3) 0 0; font-family: var(--gtt-font-mono); font-size: var(--gtt-text-xs); letter-spacing: 0.06em; color: var(--gtt-color-success); font-variant-numeric: tabular-nums; }
.gtt-provincia__espera { max-width: 26rem; margin-top: var(--gtt-space-6); }
.gtt-otras-provincias { list-style: none; margin: var(--gtt-space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gtt-space-3) var(--gtt-space-8); }
.gtt-otras-provincias__item { display: flex; align-items: center; gap: var(--gtt-space-2); }
.gtt-otras-provincias__estado { font-family: var(--gtt-font-mono); font-size: var(--gtt-text-xs); letter-spacing: var(--gtt-tracking-wide); text-transform: uppercase; color: var(--gtt-color-grafito-400); }