/* Testimonios — reseñas literales de Google.

   Solo tokens de rol (--bg, --fg, --fg-muted, --accent, --hl, --line): la
   sección tiene que funcionar en las cinco paletas y con cualquiera de los tres
   tonos que le pase el switch (ninguno, `section--accent`, `section--invert`).

   El color se usa en TRES gestos y en ninguno más: la cifra de la nota, la
   comilla de apertura de la cita destacada y la regla de arriba de cada cita
   del carril. Los tres son el mismo color —el "destacado"— para que se lean
   como una sola voz. Los textos chicos (nombre, experiencia, estrellas) van en
   --fg / --fg-muted, que son los que tienen AA garantizado en todas las
   combinaciones.

   Escala de las citas: la destacada en clamp(28px → 60px) entre 360 y 1440 px
   de viewport, con la misma fórmula que los --fs-* de los tokens; las del
   carril en --fs-h4. */

.testimonios {
	/* El destacado. Sobre el fondo base es --hl, que en Fundido se cambia por
	   un blanco cálido porque ahí el acento es igual al texto (ver tokens).
	   Dentro de un bloque de tono --hl NO se redeclara —se quedaría con el
	   acento vivo de :root, que en `section--accent` es el mismo color del
	   fondo—, así que ahí se usa --accent, que el bloque ya invierte para que
	   contraste. */
	--tes-hl: var(--hl);

	background: var(--bg);
	color: var(--fg);
	padding: var(--section-y) var(--pad);

	&.section--accent,
	&.section--invert {
		--tes-hl: var(--accent);
	}

	/* --- Cabecera: titular a la izquierda, nota a la derecha ------------- */
	.tes-head {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: end;
		gap: var(--space-6);
		margin-bottom: var(--space-8);
	}

	.title {
		font-family: var(--serif);
		font-size: var(--fs-h2);
		font-weight: 400;
		line-height: var(--lh-title);
		letter-spacing: var(--track-title);
		margin: var(--space-4) 0 0;
		max-width: 14ch;
	}

	.ital {
		font-style: italic;
		color: var(--tes-hl);
	}

	/* La nota como cifra de titular. Es texto grande (>= 52px), así que el
	   3:1 de AA para texto grande basta: es el caso de Fundido, ~3.6:1. */
	.tes-nota {
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		text-align: right;
	}

	.tes-nota-cifra {
		font-family: var(--serif);
		font-size: var(--fs-display);
		line-height: var(--lh-display);
		letter-spacing: var(--track-display);
		color: var(--tes-hl);
	}

	.tes-nota-pie {
		margin-top: var(--space-3);
		font-family: var(--sans);
		font-size: var(--fs-label);
		font-weight: 600;
		letter-spacing: var(--track-caps-sm);
		text-transform: uppercase;
		color: var(--fg);
	}

	/* Estrellas discretas: tamaño de etiqueta, color de texto apagado. No
	   compiten con la cifra, que ya dice la nota. */
	.tes-estrellas {
		font-family: var(--sans);
		font-size: var(--fs-label);
		letter-spacing: 0.12em;
		color: var(--fg-muted);
	}

	/* --- Citas ----------------------------------------------------------- */
	.tes-cita {
		margin: 0;
	}

	/* `skin.css` fuerza Syne en todos los <p>: la clase gana a esa regla, la
	   herencia no. Por eso la serif va declarada aquí y no en el blockquote. */
	.tes-cita p {
		font-family: var(--serif);
		font-weight: 400;
		margin: 0;
		color: var(--fg);
		overflow-wrap: break-word;
	}

	.tes-firma {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--space-2) var(--space-4);
		margin-top: var(--space-5);
	}

	.tes-nombre {
		font-family: var(--sans);
		font-size: var(--fs-label);
		font-weight: 700;
		letter-spacing: var(--track-caps-sm);
		text-transform: uppercase;
		color: var(--fg);
	}

	.tes-exp {
		font-family: var(--sans);
		font-size: var(--fs-sm);
		color: var(--fg-muted);
	}

	/* La destacada: comilla colgada a la izquierda, en su propia columna, para
	   que el borde del texto quede limpio. Es el gesto grande de la sección. */
	.tes-top {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: clamp(12px, 2vw, 32px);
		margin: 0 0 var(--space-8);
		max-width: 1100px;

		&::before {
			content: '\201C';
			grid-row: 1 / span 2;
			font-family: var(--serif);
			font-size: clamp(96px, calc(60px + 10vw), 220px);
			line-height: 0.72;
			color: var(--tes-hl);
		}

		.tes-cita p {
			font-size: clamp(28px, calc(17.33px + 2.96vw), 60px);
			line-height: 1.08;
			letter-spacing: var(--track-title);
		}
	}

	/* --- El carril ------------------------------------------------------- */

	/* Escritorio: rejilla de 6 columnas. Con 5 citas (el caso normal) quedan 3
	   arriba y 2 abajo, más anchas; con 4, dos y dos; con 2, mitad y mitad;
	   con 1, todo el ancho. Así cualquier cantidad que deje la dueña en el
	   panel compone sin huecos. */
	.tes-rail {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--space-7) var(--space-6);
	}

	.tes-item {
		grid-column: span 2;
		margin: 0;
		padding-top: var(--space-5);
		border-top: 2px solid var(--tes-hl);
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.tes-cita p {
			font-size: var(--fs-h4);
			line-height: 1.22;
		}
	}

	.tes-item:nth-child(4):nth-last-child(2),
	.tes-item:nth-child(5):last-child,
	.tes-item:first-child:nth-last-child(4),
	.tes-item:first-child:nth-last-child(4) ~ .tes-item,
	.tes-item:first-child:nth-last-child(2),
	.tes-item:first-child:nth-last-child(2) ~ .tes-item {
		grid-column: span 3;
	}

	.tes-item:only-child {
		grid-column: 1 / -1;
	}

	.tes-rail:focus-visible {
		outline: 2px solid var(--tes-hl);
		outline-offset: 6px;
	}

	/* --- Enlace a Google ------------------------------------------------- */
	.tes-mas {
		margin: var(--space-8) 0 0;
		font-family: var(--sans);
		font-size: var(--fs-sm);
		font-weight: 600;
		letter-spacing: var(--track-caps-md);
		text-transform: uppercase;
	}

	.tes-mas a {
		color: var(--fg);
		text-decoration: none;
	}

	/* --- Móvil: el carril se desliza de lado ----------------------------- */

	/* Sin JS: scroll-snap nativo. El carril se sale del margen de página hasta
	   los bordes de la pantalla (margen negativo = --pad, el mismo padding de
	   la sección) para que la cita siguiente asome y se entienda que hay más;
	   como mide exactamente el ancho de la pantalla, no desborda a 390px. */
	@media (max-width: 900px) {
		.tes-head {
			grid-template-columns: 1fr;
			align-items: start;
			margin-bottom: var(--space-7);
		}

		.tes-nota {
			flex-direction: row;
			align-items: baseline;
			flex-wrap: wrap;
			gap: var(--space-3);
			text-align: left;
		}

		.tes-nota-cifra {
			font-size: var(--fs-h2);
		}

		.tes-nota-pie {
			margin-top: 0;
		}

		.tes-top {
			margin-bottom: var(--space-7);
		}

		.tes-rail {
			display: flex;
			gap: var(--space-5);
			overflow-x: auto;
			overscroll-behavior-x: contain;
			scroll-snap-type: x mandatory;
			scroll-padding-inline: var(--pad);
			margin-inline: calc(var(--pad) * -1);
			padding: 0 var(--pad) var(--space-4);
			scrollbar-width: thin;
			scrollbar-color: var(--tes-hl) transparent;
		}

		.tes-item,
		.tes-item:nth-child(n) {
			flex: 0 0 min(82%, 340px);
			scroll-snap-align: start;
		}
	}

	/* El salto del snap no es una animación, pero el `smooth` sí: los tokens
	   ya lo apagan en todo el documento; aquí se apaga también dentro del
	   carril, que es su propio contenedor de scroll. */
	@media (prefers-reduced-motion: reduce) {
		.tes-rail {
			scroll-behavior: auto;
		}
	}
}