/* 14-az-sistema-folio.css · LA VOZ DE «FOLIO+» EN LAS PÁGINAS INTERIORES · 2-oct-2026
 *
 * Javier eligió para la portada «Folio+» (13-az-portada-folio.css) y su letra, Newsreader, para TODA la web:
 * «la nuestra es mucho más acertada»; «los estilos inspirados en las webs que lideran». Esta hoja lleva esa voz a
 * las páginas que usan los ladrillos del sistema `.azs` (terapias, fichas de terapia, procesos, contacto, TNAI…).
 * Es un SISTEMA: reglas para los ladrillos, no para cada página. Se carga DETRÁS de 10-az-sistema.css en todas las
 * páginas que NO son la portada; todo cuelga de `html body:not(.home)` y la portada no se entera.
 * No cambia ni una palabra ni el marcado. Sin texto por `content:` (solo filetes vacíos).
 * Maqueta, capturas y notas: scratchpad/diseno/sistema-folio/ (NOTAS.md).
 *
 * Qué hace, en una línea por gesto (el detalle, en cada apartado):
 *   §0 tokens · §1 cuerpo 17/18 px a 1,6 · §2 titulares Newsreader (y la regla de las páginas de PROCESO) ·
 *   §3 tres papeles · §4 la orla de cabeza de oro en el margen (escritorio) o como titulillo (móvil) ·
 *   §5 la retícula de 12 columnas · §6 hero · §7 listas · §8 tablas (rejilla) · §9 ficha · §10 preguntas ·
 *   §11 cita · §12 pasos con numeral e hilo · §13 bandas (y el retrato, nunca protagonista) · §14 botones ·
 *   §15 cierre · §16 bloques de los plugins (relacionadas, aviso, pie) · §17 aire · §18 las líneas se trazan.
 *
 * PREFIJO: `html body:not(.home) .azs.azs` (0,3,2): gana a las reglas de 10-az-sistema.css por especificidad; solo
 * lleva !important donde 10/02 ya pintan con !important (colores, familia de titulares, alturas de img).
 */

/* El avance del trazo de cada filete (§18). En reposo vale 100 %: sin animación, la línea está entera. */
@property --a-p {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 100%;
}

/* ── 0 · Tokens ───────────────────────────────────────────────────────────────────────────────── */
html body:not(.home) .azs.azs,
html body:not(.home) .az-related-block,
html body:not(.home) .az-disclaimer-block {
	--a-lino: #EBE2D3;            /* tercer papel (texto 6,6:1 · tinta 8,3:1) */
	--a-oro-lino: #735724;        /* oro de TEXTO sobre lino: 5,2:1 (el --azs-oro-hondo ahí da 4,1) */
	--a-filete: rgba(55, 65, 47, .22);
	--a-filete-claro: rgba(245, 239, 231, .2);
	--a-hilo: rgba(210, 173, 99, .5);
	--a-gap: clamp(1.25rem, 2.2vw, 2rem);
	--a-orla: linear-gradient(90deg, var(--azs-oro) 0 2.5rem, var(--a-filete) 2.5rem 100%);
	--a-orla-clara: linear-gradient(90deg, var(--azs-oro) 0 2.5rem, var(--a-filete-claro) 2.5rem 100%);
	--a-col: var(--a-filete);     /* color del filete que se traza (§18); cada fondo pone el suyo */
	--a-aire: 7.5rem;             /* 120 px de aire de capítulo en escritorio (§25 de la portada) */
}
html body:not(.home) .azs.azs {
	/* Escala de la serifa. Newsreader a tamaño natural, como en la portada (el ajuste a Cormorant de 02-az-base
	   se anula aquí). Un momento por capítulo: el h2; lo demás, un escalón por debajo. */
	--az-display-ajuste: none;
	/* REMATE 2-oct: el h1 (que se queda al tamaño visual de hoy, ajuste cap-height .63) manda siempre. La altura de
	   mayúscula del h1 (.63 × su tamaño) queda por encima de la de cualquier h2 y del cierre (.72 × tamaño, Newsreader
	   natural) a 320, 390, 768, 1000 y 1440 (comprobado en mide.mjs: «escala»). Antes, 52/56 px: cada capítulo pesaba
	   más que el título de la página. */
	--a-h2: clamp(1.5625rem, 1.15rem + 1.35vw, 2.5rem);      /* 25 px en móvil · 40 a 1440 */
	--a-h3: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);         /* 22 → 28 */
	--a-faq: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);         /* 20 → 24 */
	--a-cita: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);         /* 24 → 34 */
	--a-cierre: clamp(1.625rem, 1.2rem + 1.6vw, 2.75rem);    /* 26 → 44 */
}
/* PÁGINAS DE PROCESO (dolor crónico, ansiedad, fibromialgia, lesión deportiva, migraña, vértigos y fisioterapia).
   COMPLIANCE: llevan el nombre del proceso en sus títulos; el diseño no puede darle más énfasis que hoy. Aquí la
   serifa se queda al tamaño VISUAL de hoy (los tamaños de 10-az-sistema.css con el ajuste a la altura de mayúscula
   de Cormorant) y más fina: la voz de Folio llega por la orla, el papel, el aire y la retícula, no por la escala.
   Es una regla de TIPO de página. Ids comprobados el 2-oct con GET /wp-json/wp/v2/pages?slug=… (4031 fisioterapia,
   4444 dolor crónico, 4445 ansiedad, 4446 fibromialgia, 4447 lesión deportiva, 4448 migraña, 4449 vértigos).
   `.az-proceso`: la clase de cuerpo que functions.php debería poner a toda página de proceso (filtro body_class; ver
   NOTAS «Para instalar»), para que una página de proceso NUEVA o duplicada no entre a tamaño natural. Los ids se
   quedan como respaldo. */
html body:is(.az-proceso, .page-id-4031, .page-id-4444, .page-id-4445, .page-id-4446, .page-id-4447, .page-id-4448, .page-id-4449):not(.home) .azs.azs {
	--az-display-ajuste: cap-height .63;
	--a-h2: var(--azs-t-h2);
	--a-h3: var(--azs-t-h3);
	--a-faq: var(--azs-t-h3);
	--a-cita: var(--azs-t-cita);
	--a-cierre: var(--azs-t-h2);
}

/* ── 1 · El cuerpo de lectura ─────────────────────────────────────────────────────────────────────
 * Alexandria 300 a 17 px (móvil) y 18 px (escritorio), interlineado 1,6, medida ≈ 55-60 caracteres. */
html body:not(.home) .azs.azs .azs-prosa { font-size: 1.0625rem; font-weight: 300; line-height: 1.62; max-width: 38rem; }
html body:not(.home) .azs.azs .azs-prosa p { margin: 0; text-wrap: pretty; hanging-punctuation: first; }
html body:not(.home) .azs.azs .azs-prosa > * + :is(p, ul, ol, div, blockquote) { margin-top: 1.15em; }   /* (0,4,3): gana al margin 0 de arriba y al de 02-az-base */
html body:not(.home) .azs.azs .azs-prosa strong { font-weight: 500; }
html body:not(.home) .azs.azs .azs-prosa a { text-decoration-thickness: 1px; text-underline-offset: .3em; }
html body:not(.home) .azs.azs .azs-lede { font-weight: 300; }
/* Lo que matiza no puede quedar más pequeño que lo que matiza (guardián): la nota de la puerta única y la nota de
   pie de sección van al tamaño EXACTO del cuerpo (17 px móvil · 18 px escritorio), y la nota de pie deja de ir a
   media tinta. */
html body:not(.home) .azs.azs .azs-nota { font-size: 1.0625rem; font-weight: 300; line-height: 1.6; max-width: 38rem; }
html body:not(.home) .azs.azs .azs-pie-sec { font-size: 1.0625rem; line-height: 1.6; opacity: 1; }
@media (min-width: 62rem) {
	html body:not(.home) .azs.azs .azs-prosa { font-size: 1.125rem; line-height: 1.6; }
	html body:not(.home) .azs.azs .azs-nota { font-size: 1.125rem; }
	html body:not(.home) .azs.azs .azs-pie-sec { font-size: 1.125rem; }
}
/* wpautop deja <p></p> vacíos entre bloques: en una rejilla ocupan fila. Sin texto: no se esconde nada. */
html body:not(.home) .azs.azs .azs-caja > p:empty,
html body:not(.home) .azs.azs .azs-prosa > p:empty,
html body:not(.home) .azs.azs .azs-faq-r > p:empty { display: none; }

/* ── 2 · Titulares en Newsreader ──────────────────────────────────────────────────────────────────
 * Finos (300 los grandes, 400 los nombres), tracking −0,01 em, cursiva solo donde habla la voz (la cita).
 * Ninguno puede salirse de la pantalla: se parten antes que desbordar (Javier lo pidió expresamente). */
html body:not(.home) .azs.azs :is(h1, h2, h3, h4, summary, .azs-cita p) {
	font-family: var(--azs-display) !important;
	font-optical-sizing: auto;
	font-size-adjust: var(--az-display-ajuste);
	overflow-wrap: break-word;
	max-width: 100%;
}
html body:not(.home) .azs.azs h2 { font-size: var(--a-h2); font-weight: 300; line-height: 1.06; letter-spacing: -.01em; max-width: 20em; text-wrap: balance; }
html body:not(.home) .azs.azs :is(.azs-prosa, .azs-rejilla, .azs-pasos) :is(h3, h4) { font-size: var(--a-h3); font-weight: 400; line-height: 1.16; letter-spacing: -.005em; text-wrap: balance; }
html body:not(.home) .azs.azs .azs-prosa h3 { margin: 2.25rem 0 0; }
html body:not(.home) .azs.azs .azs-prosa > h3:first-child { margin-top: 0; }
html body:not(.home) .azs.azs .azs-prosa h3 + p { margin-top: .75rem; }
html body:not(.home) .azs.azs .azs-prosa h3 strong { font-weight: inherit; }
/* El h1 de TODAS las páginas interiores se queda a su tamaño visual de hoy (altura de mayúscula de Cormorant):
   la primera pantalla del móvil no crece y ningún nombre de terapia o de proceso gana énfasis. Solo se afina. */
html body:not(.home) .azs.azs .azs-hero h1 { font-size-adjust: cap-height .63; font-weight: 300; letter-spacing: -.012em; }

/* ── 3 · TRES PAPELES: papel · lino · verde ──────────────────────────────────────────────────────────
 * Crema y papel casi no se distinguían. Ahora: «crema» → papel (#FAF5EC), «papel» → lino (#EBE2D3), y el verde.
 * Nunca dos claros iguales seguidos: si dos secciones del mismo claro van pegadas, la segunda cambia de papel. */
html body:not(.home) .azs.azs .azs-sec--crema { background: var(--azs-papel); }
html body:not(.home) .azs.azs .azs-sec--papel,
html body:not(.home) .azs.azs .azs-sec--crema + .azs-sec--crema { background: var(--a-lino); }
html body:not(.home) .azs.azs .azs-sec--papel + .azs-sec--papel { background: var(--azs-papel); }
/* Sobre lino, el oro de TEXTO es #735724 (el oro hondo ahí no llega a 4,5:1) */
html body:not(.home) .azs.azs :is(.azs-sec--papel, .azs-sec--crema + .azs-sec--crema):not(.azs-sec--papel + .azs-sec--papel) :is(.azs-kicker, .azs-ficha dt, .azs-destacado, .azs-rejilla a:not(.azs-btn), .azs-prosa a, .azs-insignias li),
html body:not(.home) .azs.azs :is(.azs-sec--papel, .azs-sec--crema + .azs-sec--crema):not(.azs-sec--papel + .azs-sec--papel) .azs-pasos > *::before { color: var(--a-oro-lino) !important; }

/* ── 4 · LA ORLA DE CABEZA DE ORO ─────────────────────────────────────────────────────────────────
 * Un solo filete para toda la web: línea fina con la cabeza de oro. Las secciones interiores no llevan antetítulo,
 * así que (como la guía y el boletín de la portada) la orla va SOLA: en escritorio cuelga en la columna de margen a la
 * altura del titular; en móvil es el titulillo, encima del titular. Es un elemento gráfico vacío: no añade texto. */
html body:not(.home) .azs.azs .azs-sec:not(.azs-hero):not(.azs-cierre) > .azs-caja::before {
	content: '';
	display: block;
	height: 1px;
	margin: 0 0 1.75rem;
	background: var(--a-orla);
	transform-origin: left center;
}
html body:not(.home) .azs.azs .azs-sec--oscura:not(.azs-cierre) > .azs-caja::before { background: var(--a-orla-clara); }

/* ── 5 · LA RETÍCULA (escritorio) ──────────────────────────────────────────────────────────────────
 * 12 columnas; las dos primeras son el margen (con la orla). Todo lo demás arranca en la 3: titular, prosa, listas,
 * tablas y fichas comparten la misma línea izquierda en toda la página. La caja conserva el ancho del sistema
 * (1160 px), que deja sitio al índice fijo de la izquierda en pantallas anchas. */
@media (min-width: 62rem) {
	html body:not(.home) .azs.azs .azs-sec:not(.azs-hero):not(.azs-cierre) > .azs-caja {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--a-gap);
		row-gap: 0;
		align-items: start;
	}
	html body:not(.home) .azs.azs .azs-sec:not(.azs-hero):not(.azs-cierre) > .azs-caja > * { grid-column: 3 / -1; min-width: 0; margin-top: 2.5rem; margin-bottom: 0; }
	html body:not(.home) .azs.azs .azs-sec:not(.azs-hero):not(.azs-cierre) > .azs-caja::before { grid-area: 1 / 1 / 2 / 3; align-self: start; margin: 1.35rem 0 0; }
	html body:not(.home) .azs.azs .azs-sec:not(.azs-hero):not(.azs-cierre) > .azs-caja > h2:first-of-type { grid-row: 1; margin: 0; }
	/* un segundo titular en la misma sección (Contacto: «Horario de atención») abre su propio tramo */
	html body:not(.home) .azs.azs .azs-sec:not(.azs-hero):not(.azs-cierre) > .azs-caja > h2 ~ h2 { margin-top: 5rem; }
	html body:not(.home) .azs.azs .azs-sec:not(.azs-hero):not(.azs-cierre) > .azs-caja > h2 + * { margin-top: 2rem; }
	html body:not(.home) .azs.azs .azs-sec:not(.azs-hero):not(.azs-cierre) > .azs-caja > :is(.azs-rejilla, .azs-ficha, .azs-pasos, .azs-faq) { margin-top: 3rem; }
	html body:not(.home) .azs.azs .azs-sec:not(.azs-hero):not(.azs-cierre) > .azs-caja > .azs-acciones { margin-top: 3rem; }
	/* la medida de lectura: la prosa y las notas no pasan de ~60 caracteres aunque la columna sea ancha */
	html body:not(.home) .azs.azs .azs-sec:not(.azs-hero):not(.azs-cierre) > .azs-caja > :is(.azs-prosa, .azs-nota, .azs-pie-sec, .azs-formulario) { grid-column: 3 / 10; }
	/* prosa + cita: la cita cuelga a la derecha, en las columnas 9-12 */
	html body:not(.home) .azs.azs .azs-doscol { grid-template-columns: minmax(0, 1fr) minmax(14rem, 19rem); gap: var(--a-gap) clamp(2rem, 4vw, 4rem); }
}

/* ── 6 · HERO ──────────────────────────────────────────────────────────────────────────────────────
 * Mismas medidas que hoy (la primera pantalla no crece). El antetítulo con su raya de oro delante; el colofón de
 * datos en versalitas finas sobre un filete claro. */
html body:not(.home) .azs.azs .azs-hero .azs-kicker { letter-spacing: .24em; font-weight: 500; }
html body:not(.home) .azs.azs .azs-hero .azs-kicker::after { content: none; }
html body:not(.home) .azs.azs .azs-hero .azs-kicker::before { content: ''; flex: none; width: 2.5rem; height: 1px; background: var(--azs-oro); }
html body:not(.home) .azs.azs .azs-hero .azs-meta { border-top-color: var(--a-filete-claro); gap: 1rem 3rem; padding-left: 0; }
html body:not(.home) .azs.azs .azs-hero .azs-meta b { font-size: .75rem; font-weight: 500; letter-spacing: .18em; }
html body:not(.home) .azs.azs .azs-hero .azs-meta span { font-weight: 300; font-variant-numeric: lining-nums tabular-nums; }
html body:not(.home) .azs.azs .azs-hero .azs-prosa { color: var(--azs-crema); }
@media (max-width: 48rem) {
	html body:not(.home) .azs.azs .azs-hero .azs-kicker::before { width: 1.75rem; }
}

/* ── 7 · LISTAS · filas entre filetes, sin raya delante ─────────────────────────────────────────────
 * Las listas son de procesos y de formación: van a tamaño de cuerpo (no se agrandan nombres de proceso). */
html body:not(.home) .azs.azs .azs-lista { border-top: 0; column-gap: var(--a-gap); max-width: none; }
html body:not(.home) .azs.azs .azs-lista li { padding: 1.05rem 0 1.1rem; font-size: 1rem; font-weight: 300; line-height: 1.55; border-bottom-color: var(--a-filete); }
html body:not(.home) .azs.azs .azs-sec--oscura .azs-lista li { border-bottom-color: var(--a-filete-claro); }
html body:not(.home) .azs.azs .azs-lista li::before { content: none; }
html body:not(.home) .azs.azs .azs-lista li > strong { font-weight: 500; }
@media (min-width: 62rem) {
	html body:not(.home) .azs.azs .azs-lista li { font-size: 1.0625rem; }
	html body:not(.home) .azs.azs .azs-lista > li:nth-child(-n+2) { border-top: 1px solid var(--a-col); }
	html body:not(.home) .azs.azs .azs-sec--oscura .azs-lista { --a-col: var(--a-filete-claro); }
}
@media (max-width: 61.99rem) {
	/* prosa y lista seguidas (el subtítulo «Formación y especialidades:» se apoyaba en el filete) */
	html body:not(.home) .azs.azs .azs-caja > .azs-prosa + .azs-lista,
	html body:not(.home) .azs.azs .azs-caja > .azs-lista + .azs-prosa { margin-top: 1.5rem; }
	html body:not(.home) .azs.azs .azs-lista > li:first-child { border-top: 1px solid var(--a-col); }
	html body:not(.home) .azs.azs .azs-sec--oscura .azs-lista { --a-col: var(--a-filete-claro); }
}

/* ── 8 · REJILLA · de tarjetas a TABLA ──────────────────────────────────────────────────────────────
 * Sin caja blanca, sin radio, sin sombra: columnas abiertas, cada una con su filete de cabeza (como los Programas
 * de la portada). El nombre en la serifa; la descripción asentada debajo. */
html body:not(.home) .azs.azs .azs-rejilla {
	gap: 0 var(--a-gap);
	background: none;
	border: 0;
	border-radius: 0;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
html body:not(.home) .azs.azs .azs-rejilla > * {
	background: none;
	padding: 1.4rem 0 1.75rem;
	border-top: 1px solid var(--azs-tinta);
	gap: .75rem;
	border-radius: 0;
	box-shadow: none;
}
html body:not(.home) .azs.azs .azs-sec--oscura .azs-rejilla > * { background: none; border-top-color: rgba(245, 239, 231, .5); }
html body:not(.home) .azs.azs .azs-rejilla > *:hover,
html body:not(.home) .azs.azs .azs-sec--crema .azs-rejilla > *:hover,
html body:not(.home) .azs.azs .azs-sec--oscura .azs-rejilla > *:hover { background: none; box-shadow: none; }
html body:not(.home) .azs.azs .azs-rejilla > :focus-within { box-shadow: none; outline: 0; }
html body:not(.home) .azs.azs .azs-rejilla p { margin: 0; font-size: 1rem; font-weight: 300; line-height: 1.6; }
html body:not(.home) .azs.azs .azs-rejilla :is(h3, h4) { margin: 0; }   /* 02-az-base les daba 2rem arriba y 1rem abajo (0,3,2) */
/* Sin «celda ensanchada»: la rejilla ya no tiene fondo gris, así que una celda vacía no se ve; la última vuelve a su
   columna (10-az-sistema la estiraba y dos columnas salían una estrecha y otra ancha). */
html body:not(.home) .azs.azs .azs-rejilla > *,
html body:not(.home) .azs.azs .azs-rejilla > :last-child { grid-column: auto; }
html body:not(.home) .azs.azs .azs-rejilla p strong { font-weight: 500; }
html body:not(.home) .azs.azs .azs-rejilla a:not(.azs-btn) { letter-spacing: .12em; font-weight: 500; font-size: .75rem; border-bottom: 1px solid currentColor; padding: .4rem 0 .15rem; }
html body:not(.home) .azs.azs .azs-rejilla a:not(.azs-btn):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (min-width: 62rem) {
	html body:not(.home) .azs.azs .azs-rejilla p { font-size: 1.0625rem; }
	/* dos o cuatro piezas: dos columnas (cuatro en tres columnas dejaban una sola debajo) */
	html body:not(.home) .azs.azs .azs-rejilla:not(:has(> :nth-child(3))),
	html body:not(.home) .azs.azs .azs-rejilla:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 9 · FICHA DE DATOS · un colofón entre filetes ──────────────────────────────────────────────────
 * Fuera las celdas blancas y el radio: rótulo en versalitas, el dato debajo, filete fino entre filas. La cifra de la
 * duración en la serifa, SIN ganar peso: baja de 600 a 400 y, a 22 px con el ajuste de mayúscula, queda a la altura
 * de mayúscula del cuerpo (Newsreader no tiene cifras elzevirianas: no «mide lo que medía», pesa menos). Es una
 * duración de cita, no un resultado. Si una ficha de PROCESO llevara una cifra de sesiones o de meses, esa dd b
 * va a 1.125rem (guardián). */
html body:not(.home) .azs.azs .azs-ficha {
	gap: 0 var(--a-gap);
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
	max-width: none;
}
html body:not(.home) .azs.azs .azs-ficha > div,
html body:not(.home) .azs.azs .azs-sec--crema .azs-ficha > div,
html body:not(.home) .azs.azs .azs-sec--oscura .azs-ficha > div { background: none; padding: 1.15rem 0 1.35rem; border-top: 1px solid var(--a-col); }
html body:not(.home) .azs.azs .azs-sec--oscura .azs-ficha { --a-col: var(--a-filete-claro); }
html body:not(.home) .azs.azs .azs-ficha dt { font-size: .75rem; font-weight: 500; letter-spacing: .18em; margin-bottom: .6rem; }
html body:not(.home) .azs.azs .azs-ficha dd { font-size: 1rem; font-weight: 300; line-height: 1.6; }
html body:not(.home) .azs.azs .azs-ficha dd b { font-family: var(--azs-display); font-size: 1.375rem; font-size-adjust: cap-height .63; font-weight: 400; letter-spacing: 0; margin-bottom: .4rem; font-variant-numeric: lining-nums tabular-nums; }
html body:not(.home) .azs.azs .azs-ficha dd a { font-weight: 400; }
/* sobre verde, la ficha ya no es panel claro: rótulo en oro claro y dato en crema */
html body:not(.home) .azs.azs .azs-sec--oscura .azs-ficha dt { color: var(--azs-oro-claro) !important; }
html body:not(.home) .azs.azs .azs-sec--oscura .azs-ficha :is(dd, dd b, dd a) { color: var(--azs-crema) !important; }
@media (min-width: 62rem) {
	html body:not(.home) .azs.azs .azs-ficha dd { font-size: 1.0625rem; }
}

/* ── 10 · PREGUNTAS FRECUENTES · la pregunta en la serifa, entre filetes ────────────────────────── */
html body:not(.home) .azs.azs .azs-faq { max-width: none; border-top: 0; }
html body:not(.home) .azs.azs .azs-faq details { border-bottom: 0; border-top: 1px solid var(--a-col); }
html body:not(.home) .azs.azs .azs-faq details:last-of-type { box-shadow: inset 0 -1px 0 var(--a-filete); }
html body:not(.home) .azs.azs .azs-faq summary { font-size: var(--a-faq); font-weight: 400; line-height: 1.25; letter-spacing: -.005em; padding: 1.35rem 0 1.4rem; }
html body:not(.home) .azs.azs .azs-faq summary:focus-visible { outline-offset: 2px; }
/* La respuesta es donde viven los matices más fuertes («no sustituye psicología ni psiquiatría», «¿Esto es
   fisioterapia? No…»): va a la MISMA escala que la prosa, 17 / 18 px (guardián). */
html body:not(.home) .azs.azs .azs-faq .azs-faq-r { font-size: 1.0625rem; font-weight: 300; line-height: 1.62; padding-bottom: 1.75rem; max-width: 40rem; }
html body:not(.home) .azs.azs .azs-faq .azs-faq-r p { margin: 0; }
html body:not(.home) .azs.azs .azs-sec--oscura .azs-faq { --a-col: var(--a-filete-claro); }
@media (min-width: 62rem) {
	html body:not(.home) .azs.azs .azs-faq .azs-faq-r { font-size: 1.125rem; line-height: 1.6; }
}

/* ── 11 · CITA · donde habla la voz: cursiva fina, colgada de la orla ───────────────────────────── */
html body:not(.home) .azs.azs .azs-cita,
html body:not(.home) .page-content .azs.azs blockquote.azs-cita {
	margin: 2.5rem 0 0;
	padding: 0 !important;          /* 02-az-base pone sangría y filete izquierdo a todo blockquote con !important */
	border: 0 !important;
	max-width: 26ch;
	font-style: normal;
}
html body:not(.home) .azs.azs .azs-cita::before { content: ''; display: block; height: 1px; margin: 0 0 1.1rem; background: var(--a-orla); transform-origin: left center; }
html body:not(.home) .azs.azs .azs-sec--oscura .azs-cita::before { background: var(--a-orla-clara); }
html body:not(.home) .azs.azs .azs-cita p { font-size: var(--a-cita); font-style: italic; font-weight: 300; line-height: 1.22; letter-spacing: -.005em; }
@media (min-width: 62rem) {
	html body:not(.home) .azs.azs .azs-doscol .azs-cita { margin-top: .4rem; }
}

/* ── 12 · PASOS · el numeral ensartado (Primera sesión de la portada) ───────────────────────────────
 * Cifra en cursiva fina, colgada a la izquierda; un hilo fino cae de cada cifra a la siguiente (no hay cola tras la
 * última). En escritorio, si son tres o menos, en una fila y el hilo corre en horizontal: 1 —— 2 —— 3. */
html body:not(.home) .azs.azs .azs-pasos { gap: 0; }
html body:not(.home) .azs.azs .azs-pasos > * {
	position: relative;
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	column-gap: 1rem;
	align-content: start;
	padding: 1.5rem 0 1.75rem;
	border: 0;
}
html body:not(.home) .azs.azs .azs-pasos > *::before {
	content: counter(azs-paso);
	grid-row: 1 / span 9;
	margin: 0;
	font-family: var(--azs-display);
	font-size: 2.875rem;
	font-style: italic;
	font-weight: 300;
	line-height: .78;
	letter-spacing: 0;
	font-variant-numeric: lining-nums proportional-nums;
}
html body:not(.home) .azs.azs .azs-pasos > :not(:last-child)::after {
	content: '';
	position: absolute;
	top: 5rem;
	bottom: -1rem;
	left: .85rem;
	width: 1px;
	background: var(--a-hilo);
	pointer-events: none;
	transform-origin: center top;
}
html body:not(.home) .azs.azs :is(.azs-sec--crema, .azs-sec--papel) .azs-pasos > :not(:last-child)::after { background: rgba(134, 103, 45, .45); }
html body:not(.home) .azs.azs .azs-pasos h3 { margin: 0 0 .5rem; }
html body:not(.home) .azs.azs .azs-pasos p { font-size: 1rem; font-weight: 300; line-height: 1.6; }
@media (min-width: 62rem) {
	html body:not(.home) .azs.azs .azs-pasos:not(:has(> :nth-child(4))) { --a-hueco: 2.5rem; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--a-hueco); }
	html body:not(.home) .azs.azs .azs-pasos:not(:has(> :nth-child(4))) > * { display: block; padding: 0; }
	html body:not(.home) .azs.azs .azs-pasos:not(:has(> :nth-child(4))) > *::before { display: block; width: max-content; margin: 0 0 1.4rem; }
	html body:not(.home) .azs.azs .azs-pasos:not(:has(> :nth-child(4))) > :not(:last-child)::after { top: 1.15rem; bottom: auto; left: 2.75rem; right: calc(-1 * var(--a-hueco) + 1.25rem); width: auto; height: 1px; transform-origin: left center; }
	html body:not(.home) .azs.azs .azs-pasos:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-gap); }
	html body:not(.home) .azs.azs .azs-pasos:has(> :nth-child(4)) > :not(:last-child)::after { content: none; }
	html body:not(.home) .azs.azs .azs-pasos p { font-size: 1.0625rem; }
}

/* ── 13 · BANDAS DE FOTO ───────────────────────────────────────────────────────────────────────────
 * Radio 0; el pie, alineado con la retícula de la página.
 * EL RETRATO NUNCA ES PROTAGONISTA (Javier: «no quiero el protagonismo para mí, sino para el centro y el método»).
 * Una banda cuya foto es la de Javier (su alt empieza por «Javier») deja de ir a sangre: es un retrato pequeño en
 * 4:5, a la derecha de la retícula, sobre el mismo verde de la sección que lo presenta, con su pie a la izquierda. */
html body:not(.home) .azs.azs .azs-banda img,
html body:not(.home) .page-content .azs.azs .azs-banda img { border-radius: 0; box-shadow: none; }
html body:not(.home) .azs.azs .azs-banda figcaption { font-weight: 500; letter-spacing: .2em; text-wrap: balance; }
@media (min-width: 48.0625rem) {
	html body:not(.home) .azs.azs .azs-banda figcaption { padding-inline: max(2.5rem, calc((100vw - var(--azs-ancho)) / 2 + 2.5rem)); }
}
html body:not(.home) .azs.azs .azs-banda:has(> img[alt^="Javier"]) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 6rem;
	align-items: center;   /* pie y retrato comparten eje: sin losa vacía encima del pie */
	column-gap: 1.25rem;
	max-width: calc(var(--azs-ancho));
	margin-inline: auto;
	padding: 3rem clamp(1.25rem, 5vw, 2.5rem) 0;
	background: none;
}
html body:not(.home) .azs.azs .azs-banda:has(> img[alt^="Javier"]):has(+ .azs-sec--oscura) { max-width: none; padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100% - var(--azs-ancho)) / 2 + clamp(1.25rem, 5vw, 2.5rem))); background: var(--azs-verde); }
html body:not(.home) .azs.azs .azs-banda:has(> img[alt^="Javier"]) > img,
html body:not(.home) .page-content .azs.azs .azs-banda:has(> img[alt^="Javier"]) > img {
	grid-area: 1 / 2;
	width: 100% !important;
	height: 7.5rem !important;        /* 96 × 120: 4:5 */
	max-width: none !important;
	object-fit: cover;
	object-position: 46% 18%;
}
html body:not(.home) .azs.azs .azs-banda:has(> img[alt^="Javier"]) > figcaption {
	grid-area: 1 / 1;
	position: static;
	padding: 0 0 .1rem;
	background: none;
	border-top: 1px solid var(--a-filete);
	padding-top: .9rem;
	color: var(--azs-tinta);
	letter-spacing: .12em;
	text-wrap: wrap;   /* sin «balance»: el corte cae DESPUÉS del «·» (el pie lleva espacio normal antes de «&nbsp;·») */
}
html body:not(.home) .azs.azs .azs-banda:has(> img[alt^="Javier"]) > figcaption span { color: var(--azs-oro-hondo); }
html body:not(.home) .azs.azs .azs-banda:has(> img[alt^="Javier"]):has(+ .azs-sec--oscura) > figcaption { color: var(--azs-crema); border-top-color: var(--a-filete-claro); }
html body:not(.home) .azs.azs .azs-banda:has(> img[alt^="Javier"]):has(+ .azs-sec--oscura) > figcaption span { color: var(--azs-oro-claro); }
@media (min-width: 62rem) {
	html body:not(.home) .azs.azs .azs-banda:has(> img[alt^="Javier"]) { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--a-gap); padding-top: 3rem; }
	html body:not(.home) .azs.azs .azs-banda:has(> img[alt^="Javier"]) > img,
	html body:not(.home) .page-content .azs.azs .azs-banda:has(> img[alt^="Javier"]) > img { grid-area: 1 / 10 / 2 / -1; justify-self: end; width: 13rem !important; height: 16.25rem !important; }   /* 208 × 260, 4:5 */
	html body:not(.home) .azs.azs .azs-banda:has(> img[alt^="Javier"]) > figcaption { grid-area: 1 / 3 / 2 / 9; letter-spacing: .2em; }
	/* la sección que sigue (la de Javier) ya no necesita su aire de arriba: el retrato es su cabecera */
	html body:not(.home) .azs.azs .azs-banda:has(> img[alt^="Javier"]) + .azs-sec { padding-top: 4rem; }
}
html body:not(.home) .azs.azs .azs-banda:has(> img[alt^="Javier"]) + .azs-sec { padding-top: 2.5rem; }

/* El mapa: lámina sencilla, sin canto */
html body:not(.home) .azs.azs .azs-mapa { border-radius: 0; }
html body:not(.home) .azs.azs .azs-mapa figcaption { font-weight: 500; letter-spacing: .14em; line-height: 1.5; text-wrap: balance; }   /* el mapa trae line-height 0: un pie en dos líneas se montaba */

/* ── 14 · BOTONES · un solo botón relleno: el de reservar ───────────────────────────────────────────
 * La píldora se queda (es lo único redondo de la página). El dorado relleno es SOLO para reservar (Square o /cita):
 * un «principal» que no reserva (p. ej. «Conocer TNAI», que baja por la página) pasa a contorno de 1 px.
 * Los secundarios, contorno de 1 px más visible que hoy. */
html body:not(.home) .azs.azs .azs-btn { font-weight: 500; letter-spacing: .01em; }
html body:not(.home) .azs.azs .azs-btn--secundario { border-width: 1px; }
html body:not(.home) .azs.azs :is(.azs-sec--crema, .azs-sec--papel) .azs-btn--secundario { border-color: rgba(55, 65, 47, .55); }
html body:not(.home) .azs.azs :is(.azs-sec--crema, .azs-sec--papel) .azs-btn--secundario:hover { border-color: var(--azs-tinta); }
html body:not(.home) .azs.azs :is(.azs-hero, .azs-sec--oscura) .azs-btn--secundario { border-color: rgba(245, 239, 231, .55); }
html body:not(.home) .azs.azs :is(.azs-hero, .azs-sec--oscura) .azs-btn--secundario:hover { border-color: var(--azs-crema); }
html body:not(.home) .azs.azs .azs-btn--principal:not([href*="squareup"]):not([href*="/cita"]) { background: transparent; border: 1px solid rgba(55, 65, 47, .55); color: var(--azs-tinta) !important; }
html body:not(.home) .azs.azs :is(.azs-hero, .azs-sec--oscura) .azs-btn--principal:not([href*="squareup"]):not([href*="/cita"]) { border-color: rgba(245, 239, 231, .55); color: var(--azs-crema) !important; }
html body:not(.home) .azs.azs .azs-btn--principal:not([href*="squareup"]):not([href*="/cita"]):hover { background: rgba(55, 65, 47, .06); border-color: var(--azs-tinta); }
html body:not(.home) .azs.azs :is(.azs-hero, .azs-sec--oscura) .azs-btn--principal:not([href*="squareup"]):not([href*="/cita"]):hover { background: rgba(245, 239, 231, .08); border-color: var(--azs-crema); }
html body:not(.home) .azs.azs .azs-acciones--tras { margin-top: 3rem; }

/* ── 15 · CIERRE · centrado, con la cabeza de oro encima ────────────────────────────────────────── */
html body:not(.home) .azs.azs .azs-cierre > .azs-caja::before { content: ''; display: block; width: 2.5rem; height: 1px; margin: 0 auto 2rem; background: var(--azs-oro); transform-origin: center; }
html body:not(.home) .azs.azs .azs-cierre h2 { font-size: var(--a-cierre); line-height: 1.06; max-width: 18em; margin-inline: auto; }
html body:not(.home) .azs.azs .azs-cierre .azs-prosa { margin-top: 1.5rem; }
html body:not(.home) .azs.azs .azs-cierre .azs-tel { font-size: 1rem; font-weight: 300; line-height: 1.7; max-width: 44rem; text-wrap: wrap; }   /* sin «balance»: con él, una línea empezaba por «·» (el texto lleva espacio normal antes de «&nbsp;·») */
html body:not(.home) .azs.azs .azs-cierre .azs-tel a { font-weight: 400; font-variant-numeric: lining-nums tabular-nums; border-bottom-color: rgba(210, 173, 99, .5); }
/* La nota de la puerta única en el cierre: sin la franja dorada de 2 px a la izquierda (descentrada en un cierre
   centrado); un filete fino de 1 px encima, a todo su ancho, y el texto centrado. Mismo tamaño que el cuerpo y en el
   mismo sitio, justo detrás de la prosa que matiza (guardián). */
html body:not(.home) .azs.azs .azs-cierre .azs-nota { text-align: center; border-left: 0 !important; padding-left: 0; padding-top: 1.1rem; border-top: 1px solid var(--a-filete-claro); margin-inline: auto; }
html body:not(.home) .azs.azs .azs-nota { border-left: 0 !important; padding-left: 0; }

/* ── 16 · BLOQUES DE LOS PLUGINS (solo CSS) ─────────────────────────────────────────────────────────
 * RELACIONADAS: de tarjetas blancas a un índice entre filetes, como «Terapias» de la portada. El título es el que
 * pinta el plugin (en las de proceso lleva el nombre del proceso): se queda a su tamaño de hoy (lo pone 02-az-base
 * con el ajuste), solo pasa a la izquierda y se afina. */
html body:not(.home) .az-related-block { background: var(--azs-papel); border-top: 0; padding: var(--azs-e6) clamp(1.25rem, 5vw, 2.5rem); }
html body:not(.home) .az-related-block .az-related-inner { max-width: calc(var(--azs-ancho) - 5rem); text-align: left; }
html body:not(.home) .az-related-block .az-related-eyebrow { display: block; font-size: .75rem; font-weight: 500; letter-spacing: .18em; line-height: 1.55; color: var(--azs-oro-hondo); }
html body:not(.home) .az-related-block .az-related-eyebrow::before { content: ''; display: block; height: 1px; margin: 0 0 .9rem; background: var(--a-orla); transform-origin: left center; }
html body:not(.home) .az-related-block .az-related-title { font-weight: 300; letter-spacing: -.005em; margin-bottom: 1.75rem; text-wrap: balance; overflow-wrap: break-word; }
html body:not(.home) .az-related-block .az-related-grid { gap: 0 var(--a-gap); }
html body:not(.home) .az-related-block a.az-related-card {
	background: none;
	border: 0;
	border-top: 1px solid var(--a-col);
	border-radius: 0;
	box-shadow: none;
	padding: 1.1rem 2rem 1.3rem 0;
	transform: none;
}
html body:not(.home) .az-related-block a.az-related-card:hover { background: none; box-shadow: none; transform: none; --a-col: var(--azs-oro-hondo); }
html body:not(.home) .az-related-block a.az-related-card:focus-visible { outline: 2px solid var(--azs-tinta); outline-offset: 3px; }
html body:not(.home) .az-related-block .az-related-card-title { font-weight: 400; }
html body:not(.home) .az-related-block .az-related-card-sub { font-size: .9375rem; font-weight: 300; color: var(--azs-texto); }
html body:not(.home) .az-related-block .az-related-card-arrow { top: 1.25rem; right: .25rem; color: var(--azs-oro-hondo); }
@media (max-width: 768px) {
	html body:not(.home) .az-related-block .az-related-grid { gap: 0; }
}
/* AVISO IMPORTANTE (descargo): COMPLIANCE. Ni más pequeño ni más lejos que lo que matiza: = el cuerpo, 17 px móvil
   · 18 px escritorio (antes 14,7), y conserva su peso normal y su contraste. Pierde el panel con radio: se lee como
   una nota de la página, con la orla encima y alineado a la columna de texto. */
html body:not(.home) .az-disclaimer-block {
	max-width: calc(var(--azs-ancho) - 5rem);
	margin: var(--azs-e6) auto;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 1.0625rem;
	line-height: 1.62;
	color: var(--azs-texto);
}
@media (max-width: 768px) {
	html body:not(.home) .az-disclaimer-block { margin: var(--azs-e6) clamp(1.25rem, 5vw, 2.5rem); padding: 0; font-size: 1.0625rem; }
}
html body:not(.home) .az-disclaimer-block::before { content: ''; display: block; height: 1px; margin: 0 0 1.1rem; background: var(--a-orla); transform-origin: left center; }
html body:not(.home) .az-disclaimer-block > * { max-width: 44rem; }
html body:not(.home) .az-disclaimer-block p { color: var(--azs-texto) !important; }
html body:not(.home) .az-disclaimer-block .az-disclaimer-title { font-size: 1.25rem; font-weight: 400; letter-spacing: 0; line-height: 1.2; color: var(--azs-tinta) !important; margin-bottom: .6rem; } /* el título del aviso no baja: 20 px en la serifa (antes 16,8) */
@media (min-width: 62rem) {
	html body:not(.home) .az-disclaimer-block { font-size: 1.125rem; line-height: 1.6; }   /* = el cuerpo de la página */
}
/* La nota de privacidad del formulario de Contacto y su casilla llevan el matiz sanitario y de RGPD («no sustituye
   atención sanitaria urgente», «no debo enviar información de salud detallada»): ni más pequeñas que la prosa que
   las precede (guardián). Nota = cuerpo (17/18); casilla un punto por debajo, como una etiqueta (16/17). Sin radio.
   Siguen ENCIMA de los campos, donde están. (0,4,2) gana al atajo `font` de 02-az-base (0,1,0), sin !important. */
html body:not(.home) .azs.azs .az-contact-privacy-note { border-radius: 0; font-size: 1.0625rem; line-height: 1.6; max-width: none; padding: 1rem 1.15rem; }
html body:not(.home) .azs.azs .az-contact-privacy-check { font-size: 1rem; line-height: 1.55; }
@media (min-width: 62rem) {
	html body:not(.home) .azs.azs .az-contact-privacy-note { font-size: 1.125rem; }
	html body:not(.home) .azs.azs .az-contact-privacy-check { font-size: 1.0625rem; }
}
/* /fisioterapia-plasencia/ · el aviso de honestidad «No ofrecemos servicios de fisioterapia» (div con estilo en línea
   que pinta el fragmento 454 encima del hero). Es EL matiz de la página: al tamaño del cuerpo (17/18 px, antes 16 en
   línea) y con su filete en la línea del hero. !important porque el estilo va en línea. No se oculta, no se mueve y
   no pierde su negrita. A medio plazo, corregir el origen (fragmento 454: font-size 18px y este ancho). */
html body.page-id-4031:not(.home) .page-content > div[style*="border-left"]:has(+ .azs) { box-sizing: border-box !important; font-size: 1.0625rem !important; line-height: 1.6 !important; max-width: calc(var(--azs-ancho) - 5rem) !important; }   /* border-box: el filete cae en x = la línea del hero */
@media (min-width: 62rem) {
	html body.page-id-4031:not(.home) .page-content > div[style*="border-left"]:has(+ .azs) { font-size: 1.125rem !important; }
}
/* PIE: un solo zócalo oscuro (§21 de la portada). El descargo «de carácter no sanitario» a 14 px (antes 11), IGUAL que
   el lema que matiza («Terapias naturales e hipnoterapia integrativa en Plasencia»): visible y legible en todas las
   páginas. El color lo da 02-az-base (.85, 10,6:1). */
html body:not(.home) footer.azf { background: #1E2417 !important; border-top: 1px solid rgba(196, 155, 87, .35); }
html body:not(.home) footer.azf .azf-tag { font-size: .875rem; text-wrap: balance; }
html body:not(.home) footer.azf .azf-descargo,
html body:not(.home) footer.azf p.azf-descargo { font-size: .875rem !important; line-height: 1.6 !important; }
html body:not(.home) footer.azf .azf-logo { font-family: var(--azs-display); font-size-adjust: cap-height .63; font-weight: 400; }

/* PIEZA PROPIA de /mindfulness/ · «También para empresas» (.azmemp-bloque, va detrás de la plantilla, dentro del
   contenido, entre el cierre verde y el pie oscuro). Era una tarjeta verde de radio 18 px: pasa a un zócalo de LINO a
   sangre, con la orla de cabeza de oro encima y el texto en la caja de la página. Así entre el cierre (la última
   palabra de la página) y el pie hay un claro, y el bloque B2B no se lee como parte del pie. Tinta sobre lino 8,3:1;
   etiqueta en el oro de texto #735724 (5,2:1). Mismo texto, mismos botones. La nota «Formación no reglada…» matiza
   al bloque: al tamaño de sus párrafos (antes 14,5 frente a 17). Las !important ganan a las de `.az-dark-auto` (02). */
html body:not(.home) .page-content > .azmemp-bloque {
	--a-filete: rgba(55, 65, 47, .22);
	--a-orla: linear-gradient(90deg, var(--azs-oro) 0 2.5rem, var(--a-filete) 2.5rem 100%);
	margin: 0;
	border-radius: 0;
	background: #EBE2D3;
	color: var(--azs-tinta);
	padding: var(--azs-e6) max(clamp(1.25rem, 5vw, 2.5rem), calc((100% - var(--azs-ancho)) / 2 + clamp(1.25rem, 5vw, 2.5rem)));
}
html body:not(.home) .page-content > .azmemp-bloque::before { content: ''; display: block; height: 1px; margin: 0 0 1.75rem; background: var(--a-orla); transform-origin: left center; }
html body:not(.home) .page-content > .azmemp-bloque > * { max-width: 44rem; }
html body:not(.home) .page-content > .azmemp-bloque h2 { font-family: var(--azs-display) !important; font-weight: 300; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-size-adjust: none; line-height: 1.12; letter-spacing: -.01em; overflow-wrap: break-word; color: var(--azs-tinta) !important; }
html body:not(.home) .page-content > .azmemp-bloque .azmemp-k { font-weight: 500; letter-spacing: .18em; color: #735724 !important; }
html body:not(.home) .page-content > .azmemp-bloque p { color: var(--azs-texto) !important; }
html body:not(.home) .page-content > .azmemp-bloque p strong { color: var(--azs-tinta); font-weight: 500; }
html body:not(.home) .page-content > .azmemp-bloque p.azmemp-nota { font-size: 1rem; line-height: 1.6; color: var(--azs-texto) !important; }
@media (min-width: 701px) {
	html body:not(.home) .page-content > .azmemp-bloque p.azmemp-nota { font-size: 1.0625rem; }   /* = sus párrafos (17 px) */
}
html body:not(.home) .page-content > .azmemp-bloque a.azmemp-btn--s { color: var(--azs-tinta) !important; border-width: 1px; border-color: rgba(55, 65, 47, .55); }
html body:not(.home) .page-content > .azmemp-bloque a.azmemp-btn--s:hover { background: var(--azs-tinta); color: var(--azs-crema) !important; border-color: var(--azs-tinta); }
html body:not(.home) .page-content > .azmemp-bloque a.azmemp-btn--p { color: #14261B !important; }

/* ── 17 · AIRE ─────────────────────────────────────────────────────────────────────────────────────
 * En escritorio cada capítulo respira 120 px arriba y abajo (las referencias, 130-210). El móvil no cambia. */
@media (min-width: 62rem) {
	html body:not(.home) .azs.azs .azs-sec:not(.azs-hero) { padding-block: var(--a-aire); }
}

/* ── 18 · LAS LÍNEAS SE TRAZAN (§27 de la portada) ──────────────────────────────────────────────────
 * La orla de cada capítulo se traza desde su cabeza de oro; los filetes de fila (listas, tabla, ficha, preguntas,
 * relacionadas) se dibujan de izquierda a derecha, uno a uno; el hilo de los pasos corre de cifra a cifra.
 * Técnica: `border-image` con un degradado que llega hasta --a-p sobre el borde de siempre (la caja no cambia ni un
 * píxel). --a-p vale 100 % en reposo: sin `animation-timeline`, con movimiento reducido o sin @property, las líneas
 * están enteras y quietas. Y las apariciones del sistema pasan a ser SOLO de opacidad (como en la portada). */
html body:not(.home) .azs.azs :is(.azs-lista > li, .azs-rejilla > *, .azs-ficha > div, .azs-faq details),
html body:not(.home) .az-related-block a.az-related-card {
	border-image: linear-gradient(90deg, var(--a-col) var(--a-p), transparent var(--a-p)) 1;
}
html body:not(.home) .azs.azs .azs-lista > li { --a-col: var(--a-filete); }
html body:not(.home) .azs.azs .azs-sec--oscura .azs-lista > li { --a-col: var(--a-filete-claro); }
html body:not(.home) .azs.azs .azs-rejilla > * { --a-col: var(--azs-tinta); }
html body:not(.home) .azs.azs .azs-sec--oscura .azs-rejilla > * { --a-col: rgba(245, 239, 231, .5); }
@media (hover: hover) {
	html body:not(.home) .azs.azs .azs-rejilla > *:hover { --a-col: var(--azs-oro-hondo); }
	html body:not(.home) .azs.azs .azs-sec--oscura .azs-rejilla > *:hover { --a-col: var(--azs-oro-claro); }
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) and (animation-range: entry 0% entry 25vh) {
		/* las apariciones del sistema, solo opacidad (y el trazo de su propio filete) */
		@keyframes azs-entra   { 0% { opacity: 0; --a-p: 0%; } 50% { opacity: 1; } 100% { opacity: 1; --a-p: 100%; } }
		@keyframes azs-enfoca  { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }
		@keyframes azs-crece   { 0% { opacity: 0; --a-p: 0%; } 50% { opacity: 1; } 100% { opacity: 1; --a-p: 100%; } }
		@keyframes azs-lateral { 0% { opacity: 0; --a-p: 0%; } 50% { opacity: 1; } 100% { opacity: 1; --a-p: 100%; } }
		@keyframes a-traza   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
		@keyframes a-traza-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
		@keyframes a-filete  { from { --a-p: 0%; } to { --a-p: 100%; } }

		/* 1 · la orla de cada capítulo (y la de la cita, las relacionadas y el aviso), desde la cabeza de oro */
		html body:not(.home) .azs.azs .azs-sec:not(.azs-hero) > .azs-caja,
		html body:not(.home) .azs.azs .azs-cita,
		html body:not(.home) .az-related-block .az-related-eyebrow,
		html body:not(.home) .az-disclaimer-block { view-timeline-name: --a-orla; }
		html body:not(.home) .azs.azs .azs-sec:not(.azs-hero) > .azs-caja::before,
		html body:not(.home) .azs.azs .azs-cita::before,
		html body:not(.home) .az-related-block .az-related-eyebrow::before,
		html body:not(.home) .az-disclaimer-block::before {
			animation: a-traza linear both;
			animation-timeline: --a-orla;
			animation-range: entry 4vh entry 48vh;
		}
		/* 2 · listas: cada fila traza su filete sobre la timeline de la lista (las filas ya entraban escalonadas) */
		html body:not(.home) .azs.azs .azs-lista > li { animation-range: entry 4vh entry 44vh; }
		html body:not(.home) .azs.azs .azs-lista > li:nth-child(2) { animation-range: entry 9vh entry 49vh; }
		html body:not(.home) .azs.azs .azs-lista > li:nth-child(3) { animation-range: entry 14vh entry 54vh; }
		html body:not(.home) .azs.azs .azs-lista > li:nth-child(4) { animation-range: entry 19vh entry 59vh; }
		html body:not(.home) .azs.azs .azs-lista > li:nth-child(5) { animation-range: entry 24vh entry 64vh; }
		html body:not(.home) .azs.azs .azs-lista > li:nth-child(n+6) { animation-range: entry 29vh entry 69vh; }
		/* 3 · ficha, preguntas y relacionadas: solo el filete (el texto ya está) */
		html body:not(.home) .azs.azs :is(.azs-ficha > div, .azs-faq details),
		html body:not(.home) .az-related-block a.az-related-card {
			animation: a-filete linear both;
			animation-timeline: view();
			animation-range: entry 4vh entry 48vh;
		}
		html body:not(.home) .azs.azs .azs-ficha > div:nth-child(2),
		html body:not(.home) .az-related-block a.az-related-card:nth-child(2) { animation-range: entry 9vh entry 53vh; }
		html body:not(.home) .azs.azs .azs-ficha > div:nth-child(3),
		html body:not(.home) .az-related-block a.az-related-card:nth-child(3) { animation-range: entry 14vh entry 58vh; }
		/* 4 · el hilo de los pasos, de cifra a cifra */
		html body:not(.home) .azs.azs .azs-pasos > * { view-timeline-name: --a-paso; }
		html body:not(.home) .azs.azs .azs-pasos > :not(:last-child)::after {
			animation: a-traza-v linear both;
			animation-timeline: --a-paso;
			animation-range: entry 10vh entry 52vh;
		}
		@media (min-width: 62rem) {
			html body:not(.home) .azs.azs .azs-pasos:not(:has(> :nth-child(4))) > :not(:last-child)::after { animation-name: a-traza; }
		}
		/* lo que tiene el foco, entero */
		html body:not(.home) .azs.azs .azs-faq details:focus-within,
		html body:not(.home) .az-related-block a.az-related-card:focus-visible { animation: none; }
	}
}

/* ── ÍNDICE LATERAL legible sobre cualquier fondo (3-oct-2026) ─────────────────────────────────────────
 * Javier: «el texto que sale a la izquierda flotante… se ve súper elegante, pero no se ve bien con los fondos oscuros».
 * Era tinta al 42 % sin soporte: sobre el hero y los capítulos verdes quedaba a 1,1:1. Ahora lleva su propia lámina:
 * papel translúcido con desenfoque del fondo, un filete fino y la cabeza de oro de Folio arriba. Se lee igual sobre
 * claro y sobre verde, sin JavaScript ni cambios de color al pasar. Enlaces a tinta al 72 % (≈5,6:1 sobre la lámina). */
@media (min-width: 82rem) {
	html body:not(.home) .azs-indice {
		background:
			linear-gradient(90deg, var(--azs-oro) 0 2.5rem, rgba(55, 65, 47, .16) 2.5rem 100%) top left / 100% 1px no-repeat,
			rgba(250, 245, 236, .9);
		-webkit-backdrop-filter: blur(10px) saturate(1.1);
		backdrop-filter: blur(10px) saturate(1.1);
		border: 1px solid rgba(55, 65, 47, .12);
		border-top: 0;
		border-radius: 0;
		box-shadow: none;
	}
	html body:not(.home) .azs-indice a { color: rgba(55, 65, 47, .72); }
	html body:not(.home) .azs-indice a:is(:hover, :focus-visible, [aria-current], .is-active, .activo) { color: var(--azs-oro-hondo); }
}
/* …y FIJO de verdad: 02-az-base.css pone «contain: layout» a .site-main (regla antigua «contra colapso»), y eso convierte
 * a .site-main en el bloque contenedor de lo fijo: el índice se quedaba a media PÁGINA (top 50 % de 11.000 px) y pasaba
 * por encima de lo que tocara. Sin «contain» en las páginas con índice, flota a media PANTALLA como estaba pensado. */
html body:not(.home) .site-main:has(.azs-indice) { contain: none !important; }
/* la lámina no puede tocar el titular (a 1440 el texto empieza en x≈180): más cerca del borde y más estrecha */
@media (min-width: 82rem) {
	html body:not(.home) .azs-indice { left: 1rem; padding: .7rem .85rem .7rem 0; }
	html body:not(.home) .azs-indice a { max-width: 7.75rem; padding: .4rem 0 .4rem .85rem; font-size: .65rem; }
}
/* entre 82 y 90rem (1312-1439 px) la lámina pisaba el titular del hero: el índice aparece solo desde 90rem (1440 px) */
@media (min-width: 82rem) and (max-width: 89.99rem) { html body:not(.home) .azs-indice { display: none !important; } }
/* 3-oct (2) · Javier: «así queda muy muy feo… ¿no podrías hacer difuminado el borde?». Fuera la caja: ni borde, ni filete
 * de oro, ni esquinas. Detrás del texto, un VELO de papel que se desvanece hacia los cuatro lados (más hacia la derecha),
 * con el fondo desenfocado: no se ve ningún recuadro, solo el texto legible sobre claro y sobre verde. */
@media (min-width: 90rem) {
	html body:not(.home) .azs-indice {
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
	}
	html body:not(.home) .azs-indice a { padding-left: 1rem; }
}
/* 3-oct (3) · ni caja ni velo: el texto cambia de color según el fondo (az-indice-contraste.php pone .azs-indice--oscuro
 * mientras el índice está sobre el hero o un capítulo verde). Claro: tinta .72 · oscuro: crema .85, con la misma línea. */
@media (min-width: 90rem) {
	html body:not(.home) .azs-indice {
		left: clamp(1rem, 2.2vw, 2.25rem); padding: 0 !important; background: none !important;
		-webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; border: 0 !important;
	}
	html body:not(.home) .azs-indice a { color: rgba(55, 65, 47, .72); border-left: 1px solid rgba(55, 65, 47, .2); transition: color .45s cubic-bezier(.25, 1, .5, 1), border-color .45s cubic-bezier(.25, 1, .5, 1); }
	html body:not(.home) .azs-indice.azs-indice--oscuro a { color: rgba(245, 239, 231, .85); border-left-color: rgba(245, 239, 231, .25); }
	html body:not(.home) .azs-indice a:is(:hover, :focus-visible) { color: var(--azs-oro-hondo); }
	html body:not(.home) .azs-indice.azs-indice--oscuro a:is(:hover, :focus-visible) { color: var(--azs-oro-claro, #D2AD63); }
}