/*
 * Tema de jist.es: lo que theme.json no puede expresar.
 * Vocabulario: regla de 2 px en tinta = encabeza un elemento; línea de 1 px = separa filas.
 * El monoespaciado solo aparece en lo que de verdad es un SRT (índices y tiempos).
 */

:root {
	--jist-error: #b9362f;
}

/* ---------- modo oscuro: los mismos valores que la plataforma (app/web/src/styles.css) ---------- */
@media (prefers-color-scheme: dark) {
	:root:root,
	:root body {
		--wp--preset--color--papel: #161615;
		--wp--preset--color--papel-2: #1f1f1d;
		--wp--preset--color--tinta: #ededea;
		--wp--preset--color--tinta-2: #b9b9b3;
		--wp--preset--color--gris: #8f8f89;
		--wp--preset--color--linea: #2c2c2a;
		--wp--preset--color--ambar: #e6b53a;
		--wp--preset--color--ambar-suave: #3a2f12;
		--jist-error: #ec7a72;
		color-scheme: dark;
	}
}

/* ---------- base ---------- */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, .wp-block-post-title { text-wrap: balance; }
p, li { text-wrap: pretty; }
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }
:where(a, button, input, select, textarea, summary, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--ambar);
	outline-offset: 2px;
	border-radius: 2px;
}
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.wp-site-blocks > * { margin-block-start: 0; }
.wp-element-button { transition: background-color 120ms ease, color 120ms ease; }
body .wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--tinta);
	padding: calc(0.75rem - 1px) calc(1.25rem - 1px);
}
body .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--papel-2);
	color: var(--wp--preset--color--tinta);
}

/* ---------- cabecera ---------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 30;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0px); }
.jist-cabecera {
	background: var(--wp--preset--color--papel);
	border-bottom: 1px solid var(--wp--preset--color--linea);
	padding-block: 0.8rem;
}
.jist-marca {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: inherit;
	text-decoration: none;
}
.jist-marca svg {
	flex: none;
	width: 2.5rem;
	height: auto;
}
.jist-marca__nombre {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.375rem;
	letter-spacing: 0.04em;
	line-height: 1;
}
.jist-cabecera .wp-block-navigation-item__content { text-decoration: none; }
.jist-cabecera .wp-block-navigation-item__content:hover { text-decoration: underline; }
@media (max-width: 959px) {
	.jist-boton-cabecera { display: none; }
}

/* ---------- plano de apertura: el titular es un subtítulo quemado ---------- */
.jist-apertura { padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); }
.jist-plano {
	position: relative;
	aspect-ratio: 2.39 / 1;
	overflow: hidden;
	border-radius: 3px;
	background: var(--wp--preset--color--pantalla);
	color: var(--wp--preset--color--luz);
}
.jist-toma {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(0.9rem, 2.5vw, 1.75rem) clamp(1rem, 4vw, 3rem) clamp(1.25rem, 6%, 3.25rem);
}
.jist-toma__tc {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--luz-tenue);
}
.jist-toma__texto {
	margin: 0 auto;
	max-width: 42ch;
	text-align: center;
	font-family: var(--wp--preset--font-family--texto);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--subtitulo);
	line-height: 1.22;
	letter-spacing: 0;
	color: var(--wp--preset--color--subtitulo);
	text-wrap: balance;
}
/* Español 3,92 s, 80 ms de pantalla vacía, inglés 3,92 s, 80 ms vacía: el hueco mínimo de la plataforma. */
.jist-toma--en { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
	.jist-toma--es { animation: jist-toma-a 8s step-end infinite; }
	.jist-toma--en { animation: jist-toma-b 8s step-end infinite; }
}
@media (prefers-reduced-motion: reduce) {
	.jist-toma--en { display: none; }
}
@keyframes jist-toma-a {
	0% { opacity: 1; }
	49% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes jist-toma-b {
	0% { opacity: 0; }
	50% { opacity: 1; }
	99% { opacity: 0; }
	100% { opacity: 0; }
}
@media (max-width: 781px) {
	.jist-plano { aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
	.jist-plano { aspect-ratio: 4 / 5; }
}
body .jist-apertura__pie { margin-block-start: var(--wp--preset--spacing--40); }
@media (max-width: 781px) {
	.jist-apertura__pie .wp-block-buttons { justify-content: flex-start; }
}

/* ---------- secciones ---------- */
.jist-seccion {
	padding-block: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--linea);
}
body .jist-seccion__titulo { max-width: 24ch; }
body .jist-seccion__entrada {
	max-width: 62ch;
	color: var(--wp--preset--color--tinta-2);
}
body .jist-seccion > :where(.wp-block-columns, .jist-pasos, .jist-perfiles, .jist-hechos, .wp-block-buttons) {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* tres caminos y confidencialidad: cada elemento lo encabeza una regla de tinta */
.jist-caminos .wp-block-column,
.jist-hecho {
	padding-top: 1rem;
	border-top: 2px solid var(--wp--preset--color--tinta);
}
body .jist-caminos h3,
body .jist-hecho h3 { margin: 0 0 0.5rem; }
body .jist-hecho p { margin: 0; color: var(--wp--preset--color--tinta-2); }
body .jist-caminos__cierre {
	max-width: 50ch;
	margin-block-start: var(--wp--preset--spacing--50);
}
body .jist-hechos {
	column-gap: clamp(1.5rem, 3vw, 2.5rem);
	row-gap: 2rem;
}

/* ---------- antes y después: subtítulos reales ---------- */
body .jist-comparacion { gap: clamp(1.5rem, 3vw, 2.5rem); }
body .jist-comparacion h3 { margin: 0 0 0.75rem; font-weight: 600; }
/* El tamaño se calcula para que 42 caracteres quepan en una línea sin cortar: es lo que se enseña. */
body .jist-srt {
	margin: 0;
	padding: 1.25rem 1rem;
	overflow-x: auto;
	border-radius: 4px;
	background: var(--wp--preset--color--papel-2);
	color: var(--wp--preset--color--tinta);
	font-size: min(0.9375rem, calc(3.9vw - 3px));
	line-height: 1.6;
	white-space: pre;
	font-variant-numeric: tabular-nums;
}
@media (min-width: 782px) {
	body .jist-srt {
		padding: 1.25rem 1.5rem;
		font-size: min(0.9375rem, calc(1.95vw - 4.5px));
	}
}
.jist-srt mark { padding: 0; background: none; color: inherit; }
.jist-srt .jist-mal {
	text-decoration: underline wavy var(--jist-error);
	text-decoration-thickness: 1.5px;
	text-decoration-skip-ink: none;
	text-underline-offset: 0.28em;
}
.jist-srt .jist-bien {
	border-radius: 2px;
	background: var(--wp--preset--color--ambar-suave);
	box-shadow: 0 0 0 2px var(--wp--preset--color--ambar-suave);
}
body .jist-notas {
	margin: 1rem 0 0;
	padding-left: 1.1rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--tinta-2);
}
.jist-notas li + li { margin-top: 0.4rem; }
.jist-notas li::marker { color: var(--wp--preset--color--ambar); }
.jist-notas--mal li::marker { color: var(--jist-error); }

body .jist-tabla__titulo { margin-block-start: var(--wp--preset--spacing--50); }
body .jist-tabla { margin-block-start: 1rem; }
body .jist-tabla table {
	width: 100%;
	min-width: 42rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
body .jist-tabla thead { border-bottom: 0; }
body .jist-tabla th,
body .jist-tabla td {
	padding: 0.8rem 1.25rem 0.8rem 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--linea);
	text-align: left;
	vertical-align: top;
}
body .jist-tabla thead th {
	font-weight: 600;
	border-bottom: 2px solid var(--wp--preset--color--tinta);
}
body .jist-tabla td:first-child { width: 17%; font-weight: 500; }
body .jist-tabla td:nth-child(2) { color: var(--wp--preset--color--tinta-2); }

/* ---------- cómo trabajamos: una secuencia, numerada como los bloques de un SRT ---------- */
body .jist-pasos > *,
body .jist-perfiles > * { margin-block: 0; }
.jist-paso {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 14rem) minmax(0, 40rem);
	column-gap: clamp(1rem, 3vw, 2.5rem);
	align-items: baseline;
	padding-block: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--linea);
}
body .jist-paso > * { margin: 0; }
body .jist-paso__n {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--gris);
}
body .jist-paso__titulo { font-size: var(--wp--preset--font-size--grande); font-weight: 700; }
@media (max-width: 781px) {
	.jist-paso {
		grid-template-columns: 2rem minmax(0, 1fr);
		row-gap: 0.5rem;
	}
	.jist-paso__texto { grid-column: 2; }
}

/* ---------- para quién ---------- */
.jist-perfil {
	display: grid;
	grid-template-columns: minmax(0, 20rem) minmax(0, 40rem);
	column-gap: clamp(1rem, 3vw, 2.5rem);
	padding-block: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--linea);
}
body .jist-perfil > * { margin: 0; }
body .jist-perfil__nombre { font-size: var(--wp--preset--font-size--medio); }
.jist-perfil__detalle {
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 400;
	color: var(--wp--preset--color--gris);
}
@media (max-width: 781px) {
	.jist-perfil {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.4rem;
	}
}

/* ---------- pie ---------- */
.jist-pie { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
.jist-pie a { color: var(--wp--preset--color--luz); }
body .jist-pie__lema { max-width: 38ch; margin: 0; }
body .jist-pie__legal {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-top: 1rem;
	border-top: 1px solid #2c2c2a;
}
body .jist-pie__legal p { margin: 0; }
body .jist-pie__enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.jist-pie__enlaces a { color: var(--wp--preset--color--luz-tenue); }
.jist-pie__enlaces a:hover { color: var(--wp--preset--color--luz); }

/* ---------- páginas, entradas y 404 ---------- */
.jist-pagina { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
body .jist-lista > li {
	padding-block: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--linea);
}
.jist-lista .wp-block-post-title a { text-decoration: none; }
.jist-lista .wp-block-post-title a:hover { text-decoration: underline; }
.jist-plano--corto { aspect-ratio: 3.2 / 1; }
@media (max-width: 781px) {
	.jist-plano--corto { aspect-ratio: 4 / 3; }
}