/*
 * Capa de diseno compartida TMHUS.
 *
 * ADITIVA POR DISENO: se superpone al CSS existente en lugar de reescribirlo.
 * El sitio esta en produccion y no hay tests de regresion visual, asi que
 * revertir es quitar un <link>, no deshacer 5.000 lineas.
 *
 * Aplica las palancas 1, 2 y 4 de la seccion 11.D del skill de diseno:
 * tipografia, ritmo y espaciado, y capa de motion. No toca arquitectura de
 * informacion, clases, ids, ni copy (secciones 11.C y 11.F).
 *
 * Tokens tomados de .architecture/ux-branding.md.
 */

:root {
	--tmh-ink: #0b1b2b;
	--tmh-ink-2: #0d2435;
	--tmh-muted: #6e7a86;
	--tmh-line: #e3e9ee;
	--tmh-accent: #FCD92A;
	--tmh-soft: #A8E0FF;
	--tmh-cta: #0a7d35;

	/* Easing unico del sitio: el mismo que ya usaba nosotros.css. */
	--tmh-ease: cubic-bezier(.2, .7, .2, 1);

	/* Medida de lectura. 65ch es el limite superior comodo para prosa. */
	--tmh-measure: 68ch;
}

/* ---------------------------------------------------------------
   Palanca 1 y 2: tipografia y ritmo de lectura
   --------------------------------------------------------------- */

/*
 * El hallazgo mas relevante de la auditoria: en los blogs, .blog-text vive
 * dentro de un contenedor de 1240px sin medida de lectura. A 18px eso da
 * lineas de ~130 caracteres, mas del doble de lo comodo, y el lector pierde
 * el renglon al volver al margen izquierdo.
 */
.blog-text,
.blog-list,
.blog-subtitle {
	max-width: var(--tmh-measure);
}

.blog-text {
	line-height: 1.7;
	color: #2f3b45;
	text-wrap: pretty;
}

.blog-list {
	line-height: 1.7;
}

.blog-list li {
	margin-bottom: 10px;
}

/* Los subtitulos respiran mas por arriba que por abajo: agrupan con lo que
   viene despues, no con lo que quedo atras. */
.blog-subtitle {
	margin-top: 2.2em;
	margin-bottom: 0.6em;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.blog-title {
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Titulares del sitio: el ajuste de tracking en tamanos grandes es lo que
   separa un titular compuesto de uno por defecto. */
h1,
h2 {
	text-wrap: balance;
}

/* ---------------------------------------------------------------
   Accesibilidad: foco visible coherente en todo el sitio
   --------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--tmh-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------
   Palanca 4: capa de motion
   --------------------------------------------------------------- */

/*
 * Revelado al entrar en viewport. Motivado: escalona la lectura de secciones
 * largas en lugar de volcarlas de golpe. Lo dispara tmh-reveal.js con
 * IntersectionObserver; nunca un listener de scroll.
 *
 * El estado inicial se aplica SOLO cuando el JS marca el documento, para que
 * sin JavaScript el contenido sea visible en vez de quedar invisible.
 */
@media (prefers-reduced-motion: no-preference) {
	html.tmh-reveal-ready [data-tmh-reveal] {
		opacity: 0;
		transform: translateY(18px);
		transition:
			opacity 0.6s var(--tmh-ease),
			transform 0.6s var(--tmh-ease);
		will-change: opacity, transform;
	}

	html.tmh-reveal-ready [data-tmh-reveal].is-revealed {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}

/* Enlaces y botones existentes ganan respuesta tactil sin cambiar su aspecto. */
@media (prefers-reduced-motion: no-preference) {
	button,
	.btn,
	[role='button'] {
		transition: transform 0.18s var(--tmh-ease);
	}

	button:active,
	.btn:active,
	[role='button']:active {
		transform: translateY(1px);
	}
}

@media (prefers-reduced-motion: reduce) {
	html.tmh-reveal-ready [data-tmh-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}