/*
 * Acordia Tema — estilos.
 *
 * REGLA INNEGOCIABLE: ni un color, tamaño o espaciado de marca escrito a mano.
 * Todo sale de theme.json vía var(--wp--preset--*). Si hay un hexadecimal de
 * marca en este archivo, la promesa de «cambiar el azul es tocar una línea»
 * es falsa. Ver 04-tema/decision-tema.md §4.
 */

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; }

img, video { max-width: 100%; height: auto; }

:where(a) { color: var(--wp--preset--color--marca); }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, select, textarea):focus-visible {
	/* El foco va en azul, no en terracota: la terracota da 2.51:1 sobre blanco
	   y el contorno de foco exige 3:1. El azul da 7.31:1. */
	outline: 3px solid var(--wp--preset--color--marca);
	outline-offset: 2px;
}

.saltar-al-contenido {
	position: absolute;
	left: -9999px;
	background: var(--wp--preset--color--fondo);
	padding: var(--wp--preset--spacing--20);
}
.saltar-al-contenido:focus { left: var(--wp--preset--spacing--20); top: var(--wp--preset--spacing--20); z-index: 100; }

.contenedor {
	max-width: var(--wp--style--global--wide-size, 72rem);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}

/* ---------- Cabecera y pie provisionales (fase 3B.1) ---------- */


.contenido { padding-block: var(--wp--preset--spacing--50); }
/* Escala del contenido compartida con la ficha del centro (0.8.22).
   Las variables se limitan a <main>: navegación y pie conservan su escala. */
main.contenido {
	--wp--preset--font-size--base: var(--wp--preset--font-size--centro-lectura);
	--wp--preset--font-size--medio: var(--wp--preset--font-size--contenido-subtitulo);
	--wp--preset--font-size--grande: var(--wp--preset--font-size--contenido-subtitulo);
	--wp--preset--font-size--titulo-3: var(--wp--preset--font-size--contenido-subtitulo);
	--wp--preset--font-size--titulo-2: var(--wp--preset--font-size--centro-seccion);
	--wp--preset--font-size--titulo-1: clamp(var(--wp--preset--font-size--contenido-titulo-min), 3.2vw, var(--wp--preset--font-size--contenido-titulo-max));
	font-size: var(--wp--preset--font-size--base);
}

/* En la portada las secciones van a sangre y se ponen su propio relleno.
   El del contenedor salía como una franja blanca entre la cabecera y el
   héroe, y otra entre el cierre y el pie. */
.home .contenido { padding-block: 0; }


/* ---------- Componentes ---------- */

.boton {
	display: inline-block;
	background: var(--wp--preset--color--acento);
	/* Texto oscuro sobre la terracota de marca: 6.46:1 en reposo y 5.24:1 en
	   hover. NO puede llevar texto blanco: daría 2.51:1 y 3.10:1, y ninguno
	   llega al 4.5:1 exigido. La terracota de Acordia es un color claro y eso
	   condiciona el botón — no es una preferencia, es el color que es. */
	color: var(--wp--preset--color--texto);
	font-weight: 600;
	text-decoration: none;
	border: 2px solid var(--wp--preset--color--acento);
	border-radius: 6px;
	padding: 0.7em 1.4em;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--base);
}
.boton:hover { background: var(--wp--preset--color--acento-oscuro); border-color: var(--wp--preset--color--acento-oscuro); color: var(--wp--preset--color--texto); }

.boton--secundario {
	background: transparent;
	color: var(--wp--preset--color--marca);
	border-color: var(--wp--preset--color--marca);
}
.boton--secundario:hover { background: var(--wp--preset--color--marca); color: var(--wp--preset--color--fondo); }

.confianza {
	border-inline-start: 4px solid var(--wp--preset--color--marca);
	background: var(--wp--preset--color--fondo-suave);
	padding: var(--wp--preset--spacing--30);
}
.confianza__titulo { font-weight: 700; margin: 0 0 var(--wp--preset--spacing--10); color: var(--wp--preset--color--marca-oscuro); }
.confianza__dato { margin: 0; font-size: var(--wp--preset--font-size--pequeno); color: var(--wp--preset--color--texto-suave); }

.tarjeta {
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--30);
	max-width: 24rem;
}
.tarjeta__titulo { margin-block: 0 var(--wp--preset--spacing--10); }
.tarjeta__meta { margin: 0 0 var(--wp--preset--spacing--10); color: var(--wp--preset--color--texto-suave); font-size: var(--wp--preset--font-size--pequeno); }
.tarjeta__texto { margin: 0 0 var(--wp--preset--spacing--30); }

.formulario { max-width: 28rem; }
.formulario label { display: block; font-weight: 600; margin-bottom: var(--wp--preset--spacing--10); }
.formulario input, .formulario select {
	width: 100%;
	padding: 0.6em 0.8em;
	/* «linea» es para separar, no para delimitar un control: 1.30:1 no se ve.
	   «borde» está calculado para esto: 3.37:1 sobre blanco. */
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--base);
	font-family: inherit;
}
.campo--error input { border-color: var(--wp--preset--color--error); }
.mensaje-error { display: block; margin-top: var(--wp--preset--spacing--10); color: var(--wp--preset--color--error); font-size: var(--wp--preset--font-size--pequeno); }

/* El separador va a ancho completo desde el tema: los estilos de bloque
   (is-style-wide, is-style-dots) no funcionan al no existir customClassName. */
.wp-block-separator { width: 100%; border-top: 1px solid var(--wp--preset--color--linea); }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: start; padding: var(--wp--preset--spacing--20); border-bottom: 1px solid var(--wp--preset--color--linea); }
th { background: var(--wp--preset--color--fondo-suave); }

/* ---------- Solo para el banco de pruebas. Se borra antes del lanzamiento. ---------- */

.banco__aviso { background: var(--wp--preset--color--fondo-suave); border: 1px dashed var(--wp--preset--color--linea); padding: var(--wp--preset--spacing--20); }
.banco__seccion { padding-block: var(--wp--preset--spacing--40); border-top: 1px solid var(--wp--preset--color--linea); }
.banco__titulo { font-size: var(--wp--preset--font-size--titulo-3); }
.banco__etiqueta, .banco__nota { color: var(--wp--preset--color--texto-suave); font-size: var(--wp--preset--font-size--pequeno); }
.banco__paleta { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); }
.banco__color { text-align: center; font-size: var(--wp--preset--font-size--pequeno); }
.banco__muestra { display: block; width: 5rem; height: 3.5rem; border: 1px solid var(--wp--preset--color--linea); border-radius: 4px; margin-bottom: var(--wp--preset--spacing--10); }
.banco__espaciado { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); margin-bottom: var(--wp--preset--spacing--10); }
.banco__espaciado span { display: block; height: 1.25rem; background: var(--wp--preset--color--marca); }

/* =========================================================================
   PORTADA — borrador de composición (tarea 1.6)
   Aquí se deciden espaciados y puntos de ruptura mirando el navegador.
   Cuando se valide, lo que sea sistema sube a theme.json.
   ========================================================================= */

/* --- utilidades --- */
.visualmente-oculto {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}
.etiqueta {
	font-family: var(--wp--preset--font-family--titular);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--wp--preset--color--marca);
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* --- tope: barra superior + cabecera, como una sola pieza ---
   Va pegado arriba con `sticky`, no `fixed`: así ocupa su sitio en el flujo
   y no hay que compensar con relleno en el cuerpo ni medir nada. Al bajar,
   la barra del aval se pliega y el menú se queda.

   En la portada el tope arranca sobre el héroe profundo, con el logo blanco;
   en cuanto se baja —o se abre el menú de móvil— vuelve al estado claro. */
.tope {
	position: sticky; top: 0; z-index: 50;
	background: var(--wp--preset--color--fondo);
	transition: background-color .28s ease, box-shadow .28s ease;
}
.tope--compacto {
	box-shadow: 0 1px 0 var(--wp--preset--color--linea),
	            0 10px 30px -24px var(--wp--preset--color--marca-profundo);
}

/* Estado oscuro (portada, arriba del todo).

   Aquí el tope NO pinta ningún fondo: flota sobre el héroe y deja que se vea
   el de abajo. Es la única forma de que no haya costura. Antes el tope pintaba
   el azul plano y el héroe el azul MÁS el degradado, así que justo debajo del
   logo aparecía una raya: a la derecha coincidían, pero a la izquierda, donde
   el degradado aclara, no.

   Por eso en la portada pasa a `fixed`: el héroe empieza en lo alto de la
   página y su degradado corre por detrás del menú, de una pieza.

   En el resto de páginas el tope sigue en `sticky` y con su fondo claro, que
   es lo que evita tener que compensar alturas allí. Aquí sí se puede: el
   hueco del menú lo reserva el relleno superior del propio héroe, y si esa
   medida se queda corta o larga por un par de píxeles solo cambia el aire
   sobre el antetítulo — no deja ninguna franja a la vista. */
.home .tope { position: fixed; inset: 0 0 auto 0; background: transparent; }
.home .tope .menu-principal a { color: var(--wp--preset--color--fondo); }
/* `.cabecera` trae su propio fondo blanco (más abajo en este archivo), y en
   la portada lo pintaba ENCIMA del tope oscuro: la cabecera salía en blanco
   con el logo blanco invisible dentro. Quien pinta el fondo es el tope; la
   cabecera se queda transparente en la portada, en los dos estados. */
.home .tope .cabecera { background: transparent; border-bottom-color: transparent; }
/* Menos con el menú de móvil abierto: ahí el panel es blanco y la cabecera
   tiene que ser blanca opaca, no translúcida. */
body.menu-abierto .tope .cabecera { background: var(--wp--preset--color--fondo); }
.home .tope .cabecera__hamburguesa-icono,
.home .tope .cabecera__hamburguesa-icono::before,
.home .tope .cabecera__hamburguesa-icono::after { background: var(--wp--preset--color--fondo); }
/* Con el selector padre delante a propósito: `.cabecera__logo img` (más
   abajo) pone display:block a los dos logos y pesa más que una clase sola,
   así que fuera de la portada se veían los dos, el blanco por sus trazos
   terracota. Se vio al maquetar la primera página interior (0.7.0). */
.cabecera__logo .cabecera__logo-blanco { display: none; }
.home .tope .cabecera__logo-color  { display: none; }
.home .tope .cabecera__logo-blanco { display: block; }

/* Vuelta al estado claro: al bajar, o con el menú de móvil abierto */
.home .tope.tope--compacto,
body.menu-abierto .tope {
	background: color-mix(in srgb, var(--wp--preset--color--fondo) 95%, transparent);
}
/* CUIDADO con `backdrop-filter` aquí: un elemento que lo lleva se convierte en
   el bloque contenedor de sus descendientes `position: fixed`. El panel del
   menú de móvil es hijo de la cabecera, o sea del tope, así que con el
   desenfoque puesto su `inset: 0` dejaba de medir la ventana y el panel se
   quedaba del alto de la cabecera en vez de ocupar la pantalla.
   Por eso el desenfoque va solo por encima del punto de ruptura, donde el
   panel a pantalla completa no existe. Lo mismo valdría para `transform`,
   `filter` o `will-change`: no ponerlos en `.tope`. */
@media (min-width: 62.0625rem) {
	.tope--compacto { backdrop-filter: blur(10px); }
}

/* --- ajuste fino de escala, solo en escritorio ---
   Los tamaños de `theme.json` son fluidos: `clamp(mínimo, …, máximo)`. Bajar
   el máximo ya encoge los titulares en pantallas grandes sin tocar el móvil,
   y eso cubre casi todo. Aquí quedan los tres que NO son fluidos —el menú y
   la franja de avales usan `pequeno` y `base`, que valen igual en todas las
   anchuras—, así que se ajustan a mano y encerrados por encima del punto de
   ruptura para no tocar el móvil, donde ya se ven bien.

   La franja se veía tosca no solo por tamaño: etiqueta y valor iban casi
   iguales y el valor en negrita. Separarlos más la aligera. */
@media (min-width: 62.0625rem) {
	.menu-principal a,
	.cabecera__cta { font-size: .875rem; }
	.prueba__etiqueta { font-size: .875rem; }
	.prueba__valor { font-size: 1rem; }
}
.home .tope.tope--compacto .menu-principal a,
body.menu-abierto .tope .menu-principal a { color: var(--wp--preset--color--marca-oscuro); }
.home .tope.tope--compacto .cabecera__hamburguesa-icono,
.home .tope.tope--compacto .cabecera__hamburguesa-icono::before,
.home .tope.tope--compacto .cabecera__hamburguesa-icono::after,
body.menu-abierto .tope .cabecera__hamburguesa-icono,
body.menu-abierto .tope .cabecera__hamburguesa-icono::before,
body.menu-abierto .tope .cabecera__hamburguesa-icono::after { background: var(--wp--preset--color--marca-oscuro); }
.home .tope.tope--compacto .cabecera__logo-blanco,
body.menu-abierto .tope .cabecera__logo-blanco { display: none; }
.home .tope.tope--compacto .cabecera__logo-color,
body.menu-abierto .tope .cabecera__logo-color { display: block; }

@media (prefers-reduced-motion: reduce) {
	.tope { transition: none; }
}

/* --- cabecera --- */

.cabecera { border-bottom: 1px solid var(--wp--preset--color--linea); background: var(--wp--preset--color--fondo); }
.cabecera__interior { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30); padding-block: var(--wp--preset--spacing--20); }
/* --- logo ---
   Un solo archivo con la composición ya hecha dentro. Aquí solo se fija el
   alto; el ancho sale del propio SVG. */
.cabecera__logo { display: block; flex: 0 0 auto; line-height: 0; text-decoration: none; }
.cabecera__logo img { display: block; height: 46px; width: auto; }

.cabecera__nav { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); }
.menu-principal { display: flex; gap: var(--wp--preset--spacing--30); list-style: none; margin: 0; padding: 0; }
.menu-principal a {
	text-decoration: none; color: var(--wp--preset--color--marca-oscuro);
	font-weight: 600; font-size: var(--wp--preset--font-size--pequeno);
}
.menu-principal a:hover { color: var(--wp--preset--color--marca); text-decoration: underline; }
.cabecera__cta { font-size: var(--wp--preset--font-size--pequeno); padding: .6em 1.1em; }

/* --- hamburguesa ---
   Las tres barras se colocan en absoluto sobre el mismo centro: así al abrir
   basta con llevar las dos exteriores a top:0 y girarlas para formar el aspa.
   Con las barras en flujo normal los giros no coincidían y no se cerraba. */
.cabecera__hamburguesa {
	display: none; position: relative;
	width: 44px; height: 44px; padding: 0;
	background: none; border: 0; cursor: pointer;
}
.cabecera__hamburguesa-icono {
	position: absolute; top: 50%; left: 50%;
	width: 26px; height: 2px; margin: -1px 0 0 -13px;
	background: var(--wp--preset--color--marca-oscuro);
	transition: background-color .12s ease;
}
.cabecera__hamburguesa-icono::before,
.cabecera__hamburguesa-icono::after {
	content: ''; position: absolute; left: 0;
	width: 100%; height: 2px;
	background: var(--wp--preset--color--marca-oscuro);
	transition: top .18s ease, transform .18s ease;
}
.cabecera__hamburguesa-icono::before { top: -8px; }
.cabecera__hamburguesa-icono::after  { top:  8px; }

.menu-abierto .cabecera__hamburguesa-icono { background: transparent; }
.menu-abierto .cabecera__hamburguesa-icono::before { top: 0; transform: rotate(45deg); }
.menu-abierto .cabecera__hamburguesa-icono::after  { top: 0; transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
	.cabecera__hamburguesa-icono,
	.cabecera__hamburguesa-icono::before,
	.cabecera__hamburguesa-icono::after { transition: none; }
}

/* --- héroe ---
   Sobre `marca-profundo`. Los degradados salen de los tokens con color-mix:
   ni un hexadecimal escrito a mano, que es la regla del proyecto. */
.heroe {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--marca-profundo);
	color: var(--wp--preset--color--fondo);
	/* El relleno superior reserva el hueco del menú, que va flotando encima,
	   más el aire sobre el antetítulo. */
	padding-block: calc(5rem + var(--wp--preset--spacing--50)) 0;
	display: flex; flex-direction: column;
	/* La ventana entera: el héroe empieza en lo alto de la página, por detrás
	   del menú. `svh` y no `vh` para que la barra del navegador de móvil no lo
	   desborde. */
	min-height: 100svh;
}
/* Una luz azul arriba a la izquierda y un rebote cálido abajo a la derecha,
   donde se apoya la imagen. Decorativos: van en pseudoelementos. */
.heroe::before, .heroe::after { content: ''; position: absolute; pointer-events: none; }
.heroe::before {
	inset: -20% 40% 30% -25%;
	background: radial-gradient(ellipse at 30% 20%,
		color-mix(in srgb, var(--wp--preset--color--marca) 55%, transparent), transparent 62%);
}
.heroe::after {
	inset: 25% -20% -30% 35%;
	background: radial-gradient(ellipse at 65% 70%,
		color-mix(in srgb, var(--wp--preset--color--acento) 22%, transparent), transparent 60%);
}
.heroe__interior {
	position: relative; z-index: 1;
	display: grid;
	grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	flex: 1;
}
.heroe .etiqueta { color: color-mix(in srgb, var(--wp--preset--color--fondo) 72%, var(--wp--preset--color--marca)); }
/* El color del h1 lo fija theme.json (marca-oscuro) y sobre el fondo profundo
   daba 1.7:1: el titular se leía en azul sobre azul. Aquí se fuerza en blanco. */
.heroe__titulo { font-size: var(--wp--preset--font-size--titulo-1); line-height: 1.06; margin: 0 0 var(--wp--preset--spacing--30); color: var(--wp--preset--color--fondo); text-wrap: balance; }
.heroe__entradilla {
	font-size: var(--wp--preset--font-size--base); line-height: 1.5;
	color: color-mix(in srgb, var(--wp--preset--color--fondo) 88%, var(--wp--preset--color--marca-profundo));
	margin: 0 0 var(--wp--preset--spacing--40); max-width: 34ch;
}
.heroe__acciones { display: flex; gap: var(--wp--preset--spacing--20); flex-wrap: wrap; margin: 0 0 var(--wp--preset--spacing--20); }
.heroe__nota {
	font-size: var(--wp--preset--font-size--pequeno);
	color: color-mix(in srgb, var(--wp--preset--color--fondo) 62%, var(--wp--preset--color--marca-profundo));
	margin: 0; max-width: 42ch;
}
.heroe__figura { display: flex; align-items: center; justify-content: center; }
/* --- la fotografía del héroe ---
   La foto va PLANA, con su propio fondo, y todo el trabajo de integración lo
   hace el CSS. Se descartó recortarle el fondo: queda a montaje.

   SOBRE LA IMAGEN NO HAY NI SOMBRAS NI DEGRADADOS. Solo el radio de las
   esquinas y un filo de un píxel. Es deliberado y costó tres pasadas llegar
   aquí, así que conviene no deshacerlo sin leer esto:

     - Se quitó un **resplandor** propio detrás de la foto (azul + terracota).
       El halo terracota caía justo bajo la imagen y sobre el azul se leía
       como una mancha de arena, no como luz. La capa azul, al probarla
       aparte, no aportaba nada: el héroe ya tiene su degradado detrás.
     - Se quitó la **sombra**. Una sombra negra sobre un fondo oscuro casi no
       se lee: al comparar la misma pantalla con y sin ella la diferencia era
       inapreciable. Es un reflejo heredado de maquetar sobre fondo claro, y
       aquí solo ensuciaba.

   Lo que integra la imagen no es ninguna de esas dos cosas: son **las dos
   marcas de las esquinas**, que al salirse del recuadro rompen la silueta
   rectangular, más que el fondo de la propia foto sea oscuro y cercano al
   del héroe.

   Lo que NO es esto: el degradado general del héroe (`.heroe::before` y
   `.heroe::after`). Ese se queda, y es el que hace que el fondo corra por
   detrás del menú. */
.heroe__figura { position: relative; }
.heroe__figura img {
	position: relative;
	display: block; width: 100%; max-width: 32rem; height: auto;
	border-radius: 18px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--fondo) 13%, transparent);
}

/* --- etiqueta del acta ---
   Monta sobre la esquina de la foto a propósito: al salirse del recuadro
   rompe la silueta rectangular, que es lo que hacía que la imagen pareciera
   pegada encima de la página. Además nombra lo que se ve: el acta es el
   producto, y así la foto deja de ser decoración.

   NI ESTA NI EL SELLO LLEVAN SOMBRA. Se probaron con ella y, ampliando las
   dos esquinas al doble de resolución, el resultado era indistinguible: las
   dos marcas caen sobre zonas oscuras —el fondo de la propia foto— y una
   sombra negra ahí no se lee. Todo el héroe es plano a propósito. */
.etiqueta-acta {
	/* Anclada a la esquina, no flotando a media altura: así cae en el mismo
	   sitio en cualquier pantalla en vez de moverse con el alto de la foto.
	   Que sobresalga es a propósito. */
	position: absolute; left: -16px; bottom: -16px; z-index: 2;
	display: flex; align-items: center; gap: .6rem;
	background: color-mix(in srgb, var(--wp--preset--color--marca-profundo) 92%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--fondo) 16%, transparent);
	border-radius: 999px;
	padding: .65rem 1.1rem .65rem .85rem;
}
.etiqueta-acta__marca {
	width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: 0 0 auto;
	background: var(--wp--preset--color--acento);
	color: var(--wp--preset--color--texto);
	display: grid; place-items: center;
	font-size: .8rem; font-weight: 700; line-height: 1;
}
.etiqueta-acta__texto {
	font-family: var(--wp--preset--font-family--titular);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600; color: var(--wp--preset--color--fondo);
	white-space: nowrap;
}

/* --- sello de autorización ---
   En la esquina opuesta a la etiqueta, sobresaliendo igual: las dos marcas
   en diagonal equilibran la foto y las dos rompen el rectángulo.

   Va en forma de sello redondo y no de otra cápsula alargada a propósito. El
   aval del MINJUS ya está escrito con todas sus letras en la franja de abajo;
   repetirlo con la misma forma sería redundante, mientras que un sello se lee
   como una marca sobre el documento, no como otra frase. */
.sello-acta {
	position: absolute; right: -16px; top: -16px; z-index: 2;
	width: 5.25rem; height: 5.25rem; border-radius: 50%;
	display: grid; place-items: center; text-align: center;
	background: color-mix(in srgb, var(--wp--preset--color--marca-profundo) 94%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--acento) 55%, transparent);
}
/* El anillo interior es lo que lo hace leer como sello y no como botón. */
.sello-acta::before {
	content: '';
	position: absolute; inset: 5px; border-radius: 50%;
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--acento) 40%, transparent);
}
.sello-acta__texto {
	font-family: var(--wp--preset--font-family--titular);
	font-size: .5625rem; font-weight: 700; line-height: 1.35;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--wp--preset--color--acento);
	padding-inline: .4rem;
}
.sello-acta__texto strong {
	display: block; font-size: .8125rem; letter-spacing: .06em;
	color: var(--wp--preset--color--fondo); font-weight: 700;
}

/* --- franja de avales, pegada al borde inferior del héroe ---
   Era la caja de «Centro autorizado por el MINJUS» de la columna derecha.
   Aquí libera el sitio para la imagen y es lo último que se lee antes de bajar. */
.prueba {
	position: relative; z-index: 1;
	margin-top: var(--wp--preset--spacing--50);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--fondo) 18%, transparent);
}
.prueba__rejilla {
	display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--20);
}
.prueba__dato p { margin: 0; }
.prueba__etiqueta {
	font-size: var(--wp--preset--font-size--pequeno);
	color: color-mix(in srgb, var(--wp--preset--color--fondo) 62%, var(--wp--preset--color--marca-profundo));
	margin-bottom: .2rem;
}
.prueba__valor {
	font-family: var(--wp--preset--font-family--titular);
	font-weight: 600;
	color: var(--wp--preset--color--fondo);
}

/* Botón de contorno sobre fondo oscuro. El `boton--secundario` no sirve aquí:
   es azul de marca sobre azul profundo y no se ve. */
.boton--fantasma {
	background: transparent;
	color: var(--wp--preset--color--fondo);
	border-color: color-mix(in srgb, var(--wp--preset--color--fondo) 45%, transparent);
}
.boton--fantasma:hover {
	background: color-mix(in srgb, var(--wp--preset--color--fondo) 10%, transparent);
	border-color: var(--wp--preset--color--fondo);
	color: var(--wp--preset--color--fondo);
}

/* --- secciones --- */
.seccion { padding-block: var(--wp--preset--spacing--60); }
.seccion--suave { background: var(--wp--preset--color--fondo-suave); }
.seccion__titulo { font-size: var(--wp--preset--font-size--titulo-2); margin: 0 0 var(--wp--preset--spacing--20); text-wrap: balance; }
.seccion__entradilla { font-size: var(--wp--preset--font-size--base); color: var(--wp--preset--color--texto-suave); max-width: 52ch; margin: 0 0 var(--wp--preset--spacing--40); }
.seccion__pie { margin: var(--wp--preset--spacing--40) 0 0; color: var(--wp--preset--color--texto-suave); }

.rejilla { display: grid; gap: var(--wp--preset--spacing--30); }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* --- tarjetas --- */
.tarjeta { max-width: none; display: flex; flex-direction: column; }
.tarjeta__marca { font-size: var(--wp--preset--font-size--pequeno); font-weight: 600; color: var(--wp--preset--color--marca); margin: 0 0 var(--wp--preset--spacing--10); }
.tarjeta__titulo { font-size: var(--wp--preset--font-size--titulo-3); }
.tarjeta__texto { flex: 1; }
.tarjeta--centro .tarjeta__titulo { font-size: var(--wp--preset--font-size--titulo-3); }

.enlace-flecha { font-weight: 600; text-decoration: none; }
.enlace-flecha::after { content: ' →'; }
.enlace-flecha:hover { text-decoration: underline; }

/* --- pasos --- */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--wp--preset--spacing--30); }
.paso__numero {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem; border-radius: 50%;
	background: var(--wp--preset--color--marca); color: var(--wp--preset--color--fondo);
	font-family: var(--wp--preset--font-family--titular); font-weight: 700;
	margin-bottom: var(--wp--preset--spacing--20);
}
.paso__titulo { font-size: var(--wp--preset--font-size--medio); margin: 0 0 var(--wp--preset--spacing--10); }
.paso__texto { margin: 0; color: var(--wp--preset--color--texto-suave); }

.razon__titulo { font-size: var(--wp--preset--font-size--medio); margin: 0 0 var(--wp--preset--spacing--10); }
.razon__texto { margin: 0; color: var(--wp--preset--color--texto-suave); }

/* --- orientación y modalidad virtual --- */
.seccion[id], .ficha[id], .perfil[id], .perfil__bloque[id], .tarjeta[id], .contacto-opcion[id], .ancla-legada { scroll-margin-top: calc(5rem + var(--wp--preset--spacing--20)); }
.ancla-legada { display: block; height: 0; }
.orientacion-materias { margin-top: var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--wp--preset--color--linea); }
.orientacion-materias__titulo { font-size: var(--wp--preset--font-size--grande); margin: 0 0 var(--wp--preset--spacing--30); }
.orientacion-materias__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); margin: 0; }
.orientacion-materias__lista dt { color: var(--wp--preset--color--marca-oscuro); font-weight: 600; margin-bottom: var(--wp--preset--spacing--10); }
.orientacion-materias__lista dd { margin: 0; color: var(--wp--preset--color--texto-suave); }
.modalidad { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--wp--preset--spacing--50); align-items: center; }
.modalidad .seccion__entradilla { margin-bottom: var(--wp--preset--spacing--20); }
.modalidad__guia { max-width: none; }
.modalidad__guia .confianza__titulo { font-size: var(--wp--preset--font-size--grande); }
.modalidad__lista { margin: 0; padding-left: var(--wp--preset--spacing--30); }
.modalidad__lista li + li { margin-top: var(--wp--preset--spacing--20); }
.modalidad__lista li::marker { color: var(--wp--preset--color--marca); }

/* Preguntas nativas: se pueden abrir con teclado y funcionan sin JavaScript. */
.preguntas { max-width: 56rem; }
.pregunta { border-top: 1px solid var(--wp--preset--color--linea); }
.pregunta:last-child { border-bottom: 1px solid var(--wp--preset--color--linea); }
.pregunta summary { cursor: pointer; padding-block: var(--wp--preset--spacing--30); color: var(--wp--preset--color--marca-oscuro); font-family: var(--wp--preset--font-family--titular); font-size: var(--wp--preset--font-size--medio); font-weight: 600; }
.pregunta summary:focus-visible { outline: 3px solid var(--wp--preset--color--marca); outline-offset: 4px; }
.pregunta p { margin: 0 0 var(--wp--preset--spacing--30); color: var(--wp--preset--color--texto-suave); }

/* --- cierre --- */
.cierre { background: var(--wp--preset--color--marca-oscuro); color: var(--wp--preset--color--fondo); padding-block: var(--wp--preset--spacing--60); }
/* El cierre repite el fondo del héroe y cierra el paréntesis de la portada.
   Además, sobre `marca-oscuro` el borde del botón terracota se quedaba en
   3.83:1; sobre el profundo sube a 6.5:1. */
.cierre--profundo { background: var(--wp--preset--color--marca-profundo); }
.cierre__interior { text-align: center; }
.cierre__titulo { color: var(--wp--preset--color--fondo); font-size: var(--wp--preset--font-size--titulo-2); margin: 0 0 var(--wp--preset--spacing--20); }
.cierre__texto { max-width: 44ch; margin: 0 auto var(--wp--preset--spacing--40); color: color-mix(in srgb, var(--wp--preset--color--fondo) 80%, var(--wp--preset--color--marca-profundo)); }
.cierre__acciones { display: flex; gap: var(--wp--preset--spacing--20); justify-content: center; flex-wrap: wrap; margin: 0; }
.boton--claro { background: transparent; color: var(--wp--preset--color--fondo); border-color: var(--wp--preset--color--fondo); }
.boton--claro:hover { background: var(--wp--preset--color--fondo); color: var(--wp--preset--color--marca-oscuro); border-color: var(--wp--preset--color--fondo); }
.cierre[id] { scroll-margin-top: 5rem; }
.contacto-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); text-align: left; }
.contacto-opcion { border: 1px solid color-mix(in srgb, var(--wp--preset--color--fondo) 30%, transparent); border-radius: 8px; padding: var(--wp--preset--spacing--30); }
.contacto-opcion h3 { color: var(--wp--preset--color--fondo); font-size: var(--wp--preset--font-size--grande); margin: 0 0 var(--wp--preset--spacing--20); }
.contacto-opcion p { color: color-mix(in srgb, var(--wp--preset--color--fondo) 80%, var(--wp--preset--color--marca-profundo)); }
.contacto-opcion__telefono { margin-bottom: 0; }
.contacto-opcion__telefono a { color: var(--wp--preset--color--fondo); white-space: nowrap; }
.cierre a:focus-visible, .heroe a:focus-visible { outline-color: var(--wp--preset--color--fondo); }

/* --- pie --- */
.pie { background: var(--wp--preset--color--fondo-suave); border-top: 1px solid var(--wp--preset--color--linea); padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30); color: var(--wp--preset--color--texto); }
.pie__interior { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--wp--preset--spacing--40); }
.pie__isotipo { height: 48px; width: auto; margin-bottom: var(--wp--preset--spacing--20); }
.pie__nombre { font-family: var(--wp--preset--font-family--titular); font-weight: 700; font-size: var(--wp--preset--font-size--medio); color: var(--wp--preset--color--marca-oscuro); margin: 0 0 var(--wp--preset--spacing--10); }
.pie__lema, .pie__aval { margin: 0 0 var(--wp--preset--spacing--10); font-size: var(--wp--preset--font-size--pequeno); color: var(--wp--preset--color--texto-suave); }
.pie__titulo { font-weight: 700; color: var(--wp--preset--color--marca-oscuro); margin: 0 0 var(--wp--preset--spacing--20); }
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--10); }
.pie__lista a { font-size: var(--wp--preset--font-size--pequeno); text-decoration: none; }
.pie__lista a:hover { text-decoration: underline; }
.pie__legal { border-top: 1px solid var(--wp--preset--color--linea); margin-top: var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--pequeno); color: var(--wp--preset--color--texto-suave); }
.pie__legal p { margin: 0; }

/* =========================================================================
   PUNTOS DE RUPTURA — propuesta para la tarea 1.4
   Elegidos por dónde se rompe ESTE contenido, no por tamaños de dispositivo.
   ========================================================================= */

/* 62rem — el héroe a dos columnas y los cuatro pasos dejan de caber */
@media (max-width: 62rem) {
	.heroe__interior { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
	/* La imagen se queda también en móvil, debajo del texto y más pequeña.
	   No se esconde: es la mitad del argumento visual de la portada. */
	.heroe__texto  { order: 1; }
	.heroe__figura { order: 2; }
	.heroe__figura img { max-width: 24rem; }
	.etiqueta-acta { left: 0; bottom: -12px; }
	.sello-acta { right: 0; top: -12px; width: 4.5rem; height: 4.5rem; }
	.prueba__rejilla { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.pasos { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.modalidad { gap: var(--wp--preset--spacing--30); }
	.pie__interior { grid-template-columns: 1fr 1fr; }
	.cabecera__hamburguesa { display: block; }

	/* --- menú de móvil: a pantalla completa ---
	   El panel ocupa la ventana entera y la cabecera se fija encima mientras
	   está abierto, de modo que el logo y el aspa quedan siempre a la vista
	   aunque la página estuviera desplazada. El alto real de la cabecera lo
	   mide el script al abrir (`--acordia-alto-cabecera`): así no hay ninguna
	   medida escrita a mano que se descuadre si cambia el logo.

	   Antes era un panel colgado de la cabecera (`top: 100%`). Se descartó:
	   dejaba ver la página por debajo, cortada a media frase. */
	.cabecera__nav {
		display: none;
		position: fixed; inset: 0; z-index: 30;
		background: var(--wp--preset--color--fondo);
		flex-direction: column; align-items: stretch;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--30);
		padding-top: calc(var(--acordia-alto-cabecera, 5rem) + var(--wp--preset--spacing--30));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.menu-abierto .cabecera__nav { display: flex; }
	.menu-abierto .cabecera {
		position: fixed; top: 0; left: 0; right: 0; z-index: 40;
		background: var(--wp--preset--color--fondo);
	}
	/* El panel es hijo de la cabecera, así que dentro de ella se pinta por
	   encima de sus hermanos: sin esto se come el logo y el aspa. Es el mismo
	   fallo de la 0.4.3 con otra ropa, y por eso se deja escrito. */
	.menu-abierto .cabecera__logo,
	.menu-abierto .cabecera__hamburguesa { position: relative; z-index: 40; }
	/* Con el panel a pantalla completa, dejar correr la página de debajo es
	   un fallo, no un detalle: se desplaza lo que no se ve. */
	body.menu-abierto { overflow: hidden; }

	/* Entradas grandes y separadas: es la pantalla entera, no una lista
	   apretada. La línea las separa sin necesidad de recuadros. */
	.menu-principal { flex-direction: column; gap: 0; }
	.menu-principal li + li { border-top: 1px solid var(--wp--preset--color--linea); }
	.menu-principal a {
		display: block;
		padding-block: var(--wp--preset--spacing--30);
		font-family: var(--wp--preset--font-family--titular);
		font-size: var(--wp--preset--font-size--grande);
	}
	/* El botón de acción se va al fondo de la pantalla: es el final del
	   recorrido, no una entrada más de la lista. */
	.cabecera__cta {
		text-align: center; margin-top: auto;
		font-size: var(--wp--preset--font-size--base);
		padding: .8em 1.2em;
	}
}

/* 44rem — todo a una columna */
@media (max-width: 44rem) {
	.rejilla--2, .rejilla--3, .pasos, .pie__interior, .orientacion-materias__lista, .modalidad, .contacto-opciones { grid-template-columns: 1fr; }
	.heroe { padding-block: calc(5rem + var(--wp--preset--spacing--40)) var(--wp--preset--spacing--40); }
	.seccion { padding-block: var(--wp--preset--spacing--50); }
	.heroe__acciones .boton, .cierre__acciones .boton { width: 100%; text-align: center; }
	.prueba__rejilla { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--20); }
	.heroe__figura img { max-width: 19rem; }
}

/* =========================================================================
   PÁGINA DE UBICACIÓN E ÍNDICE DE CENTROS (3B.2) — 20/09/2026
   Plantillas single-acordia_ubicacion.php y archive-acordia_ubicacion.php.
   Reutiliza .seccion, .contenedor, .tarjeta, .confianza, .modalidad y el
   cierre de la portada; aquí solo va lo que esas páginas tienen y la portada
   no: migas, cabecera con título, ficha del centro, galería y personas.
   Mismos puntos de ruptura (62rem y 44rem), ningún color escrito a mano.
   ========================================================================= */

/* Igual que en la portada: las secciones van a sangre y se ponen su propio
   relleno; el del contenedor dejaría una franja blanca bajo la cabecera. */
.single-acordia_ubicacion .contenido,
.post-type-archive-acordia_ubicacion .contenido { padding-block: 0; }

/* --- migas --- */
.migas { margin: 0 0 var(--wp--preset--spacing--30); }
.migas__lista {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: .5em;
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--texto-suave);
}
.migas__lista li { display: flex; gap: .5em; }
.migas__lista a { text-decoration: none; }
.migas__lista a:hover { text-decoration: underline; }
.migas__separador { color: var(--wp--preset--color--borde); }

/* --- cabecera de la página --- */
.ubicacion__cabecera { padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); }
.ubicacion__titulo { font-size: var(--wp--preset--font-size--titulo-1); margin: 0 0 var(--wp--preset--spacing--20); text-wrap: balance; }
.ubicacion__meta { margin: 0; font-size: var(--wp--preset--font-size--medio); color: var(--wp--preset--color--texto-suave); }
/* La imagen destacada es una franja, no un muro: recortada a un formato
   apaisado fijo para que el contenido siga cerca del titular en cualquier foto. */
.ubicacion__imagen {
	display: block; width: 100%; height: auto;
	aspect-ratio: 21 / 9; object-fit: cover;
	border-radius: 12px;
	margin-top: var(--wp--preset--spacing--40);
}

/* --- ficha de perfil del centro ---
   La marca pertenece a la barra, pero esta se apila sobre la portada:
   sin ese nivel, la imagen tapa la mitad superior del isotipo. */
.ubicacion--con-centro {
	background: var(--wp--preset--color--fondo);
	font-size: 1rem;
}
.ubicacion__apertura { padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); }
.ubicacion--con-centro .migas { margin-bottom: var(--wp--preset--spacing--20); }
.ubicacion--con-centro .migas__lista { font-size: .875rem; font-weight: 400; }
.ubicacion--con-centro .boton { font-size: 1rem; font-weight: 500; }

.perfil {
	background: var(--wp--preset--color--fondo);
}
.perfil + .perfil { margin-top: var(--wp--preset--spacing--50); }

.perfil__portada {
	position: relative;
	height: 18rem;
	background: var(--wp--preset--color--marca-profundo);
	border-radius: 16px 16px 0 0;
	overflow: hidden;
}
.perfil__foto {
	display: block; width: 100%; height: 100%;
	object-fit: cover;
}
.perfil__portada--con-modalidad::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 6rem;
	background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--marca-profundo) 68%, transparent), transparent);
}
.perfil__modalidad-portada {
	position: absolute;
	z-index: 1;
	right: var(--wp--preset--spacing--30);
	bottom: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .2rem;
	max-width: calc(100% - var(--wp--preset--spacing--30) - var(--wp--preset--spacing--30));
	padding-left: .625rem;
	border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--fondo) 55%, transparent);
	color: var(--wp--preset--color--fondo);
	text-align: left;
	line-height: 1.25;
}
.perfil__modalidad-tipo {
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--centro-etiqueta);
	font-weight: 400;
	letter-spacing: .394em;
	/* Compensa el espacio añadido tras la última letra. */
	margin-right: -.394em;
	text-transform: uppercase;
}
.perfil__modalidad-forma {
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--centro-etiqueta);
	font-weight: 400;
	letter-spacing: .025em;
	margin-right: -.025em;
	text-transform: uppercase;
}
.perfil__barra {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	padding: 0 var(--wp--preset--spacing--30);
	min-height: 4rem;
}
.perfil__marca {
	position: absolute;
	left: var(--wp--preset--spacing--30);
	top: -3rem;
	width: 6rem; height: 6rem;
	display: grid; place-items: center;
	background: var(--wp--preset--color--fondo);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 12px;
}
.perfil__marca img { width: 3.5rem; height: 3.5rem; }
.perfil__nav {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	margin-left: 7.25rem;
	overflow-x: auto;
	scrollbar-width: thin;
}
.perfil__nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--titular);
	font-size: .875rem;
	font-weight: 500;
	color: var(--wp--preset--color--texto-suave);
	text-decoration: none;
	white-space: nowrap;
}
.perfil__nav a + a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	height: 1rem;
	border-left: 1px solid var(--wp--preset--color--linea);
	transform: translateY(-50%);
}
.perfil__nav a:hover { color: var(--wp--preset--color--marca-oscuro); background: var(--wp--preset--color--fondo-suave); }
.perfil__nav-corto { display: none; }

.perfil__intro {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.8fr);
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	align-items: start;
}
.perfil__identidad {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	min-width: 0;
}
.perfil__nombre-fila {
	order: 1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}
.perfil__nombre {
	font-size: clamp(2.125rem, 3.2vw, 2.625rem);
	font-weight: 500;
	margin: 0;
	overflow-wrap: anywhere; text-wrap: balance;
}
.perfil__verificado {
	display: inline-grid;
	place-items: center;
	width: 1.375rem;
	height: 1.375rem;
	color: var(--wp--preset--color--marca);
}
.perfil__verificado svg { display: block; width: 100%; height: 100%; }
.perfil__verificado svg path { fill: currentColor; }
h1.perfil__donde {
	order: 2;
	margin: 0;
	font-family: var(--wp--preset--font-family--texto);
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--texto-suave);
}
.perfil__direccion {
	order: 3;
	margin: 0;
	font-size: 1rem;
	color: var(--wp--preset--color--texto-suave);
}
.perfil__autorizacion {
	order: 4;
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: .875rem;
	font-weight: 500;
	color: var(--wp--preset--color--marca-oscuro);
}
.perfil__cta { width: 100%; max-width: 22rem; justify-self: end; }
.perfil__cta .acciones { flex-direction: column; }
.perfil__cta .boton { text-align: center; }

.acciones { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin: 0; }
.boton .numero { white-space: nowrap; }

.perfil__bloque {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}
.perfil__titulo {
	font-size: var(--wp--preset--font-size--titulo-2);
	font-weight: 500;
	margin: 0 0 var(--wp--preset--spacing--30);
}
.perfil__acreditacion {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--linea);
	font-size: var(--wp--preset--font-size--centro-nota);
	line-height: 1.55;
	color: var(--wp--preset--color--texto-suave);
}
.perfil__acreditacion > div { min-width: 0; }
.perfil__razon { margin: 0 0 var(--wp--preset--spacing--10); font-size: inherit; overflow-wrap: anywhere; }
.perfil__razon:last-child { margin-bottom: 0; }
.perfil__minjus {
	margin: 0;
	font-size: inherit;
	color: var(--wp--preset--color--texto-suave);
	overflow-wrap: anywhere;
}
.perfil__lectura {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}
.perfil__lectura--una { grid-template-columns: minmax(0, 1fr); }
.perfil__texto { min-width: 0; max-width: 68ch; }
.perfil__texto > :first-child { margin-top: 0; }
.perfil__texto > :last-child { margin-bottom: 0; }
/* La presentación y la información local tienen funciones distintas. Los
   puntos destacados son una lista editable en el texto del centro. */
.perfil__texto--centro > p { margin: 0 0 var(--wp--preset--spacing--20); }
.perfil__texto--centro > ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
}
.perfil__texto--centro > ul > li {
	min-width: 0;
	margin: 0;
	padding-top: var(--wp--preset--spacing--20);
	border-top: 2px solid color-mix(in srgb, var(--wp--preset--color--acento) 70%, var(--wp--preset--color--fondo));
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.55;
	color: var(--wp--preset--color--texto-suave);
}
.perfil__texto--centro > ul > li strong {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--titular);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--marca-oscuro);
}
.perfil__texto--centro > ul > li > p { margin: 0; }
/* Escala del contenido institucional: tokens propios, sin cambiar la portada. */
.perfil > .perfil__bloque > .perfil__titulo,
.perfil__lectura--centro .perfil__titulo,
.perfil__metodo-panel > .perfil__titulo {
	font-size: var(--wp--preset--font-size--centro-seccion);
	line-height: 1.25;
}
.perfil__lectura--centro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
.perfil__lectura--centro.perfil__lectura--una { grid-template-columns: minmax(0, 1fr); }
.perfil__lectura--centro .perfil__texto--centro { max-width: none; }
.perfil__texto--centro,
.perfil__local,
.perfil__editorial {
	font-size: var(--wp--preset--font-size--centro-lectura);
	line-height: 1.65;
}
.perfil__editorial { min-width: 0; }
.perfil__editorial > p { max-width: 85ch; margin: 0 0 var(--wp--preset--spacing--30); }
.perfil__editorial > :last-child { margin-bottom: 0; }
.perfil__editorial > ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	list-style: none;
	margin: 0;
	padding: 0;
}
.perfil__editorial--valores > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: propuesta; }
.perfil__editorial > ul > li {
	min-width: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--20) 0 0;
	border-top: 1.5px solid color-mix(in srgb, var(--wp--preset--color--acento) 55%, var(--wp--preset--color--fondo));
	font-size: inherit;
	line-height: inherit;
	color: var(--wp--preset--color--texto-suave);
	overflow-wrap: anywhere;
}
.perfil__editorial > ul > li strong {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--titular);
	font-size: var(--wp--preset--font-size--centro-punto);
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--marca-oscuro);
}
/* Al pegar desde el chat, el editor añade un salto tras el título. El título
   ya es bloque: se oculta solo ese salto redundante, no los del contenido. */
.perfil__editorial > ul > li > strong + br,
.perfil__editorial > ul > li > p > strong + br { display: none; }
.perfil__editorial > ul > li > p { margin: 0; }
.perfil__editorial > ul > li > p + p { margin-top: var(--wp--preset--spacing--10); }
/* Numeración editorial de las propuestas; las técnicas y compromisos
   comparten el separador, sin presentarse como pasos consecutivos. */
.perfil__editorial--valores > ul > li { counter-increment: propuesta; }
.perfil__editorial--valores > ul > li::before {
	content: counter(propuesta, decimal-leading-zero);
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--titular);
	font-size: var(--wp--preset--font-size--centro-nota);
	font-weight: 300;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--texto-suave);
}
/* Un mismo eje de lectura. Sin cajas que añadan una sangría al contenido. */
.perfil__metodo-panel { padding: 0; }
.perfil__local {
	max-width: none;
	padding: 0;
}
.perfil__local-titulo {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--centro-seccion);
	font-weight: 500;
	line-height: 1.3;
	text-wrap: balance;
}
.perfil__local-contenido {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20);
}
.perfil__local-contenido > p { margin: 0; }
/* Los demás bloques del editor conservan toda su anchura y orden. */
.perfil__local-contenido > :not(p) { grid-column: 1 / -1; }
@media (max-width: 62rem) {
	.perfil__lectura--centro { grid-template-columns: minmax(0, 1fr); }
	.perfil__editorial--valores > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.perfil__local-contenido { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--20); }
}
@media (max-width: 44rem) {
	.perfil__editorial > ul, .perfil__editorial--valores > ul { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--30); }
	.perfil__metodo-panel { padding: 0; }
}
.perfil__nota {
	margin: calc(var(--wp--preset--spacing--30) * -1) 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--texto-suave);
}

.horario { list-style: none; margin: 0; padding: 0; }

/* Galería: tantas columnas como imágenes, hasta cuatro. Una sola no se
   estira a todo el ancho de la ficha. */
.galeria { display: grid; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--40); }
.galeria--1 { grid-template-columns: minmax(0, 32rem); }
.galeria--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galeria--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galeria--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galeria img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }

.ficha__texto { margin-top: var(--wp--preset--spacing--40); max-width: 68ch; }
.ficha__texto > :first-child { margin-top: 0; }
.ficha__texto > :last-child { margin-bottom: 0; }

/* Lista compacta para ubicaciones sin ficha cuando haya muchas materias. */
.lista-servicios { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--linea); }
.lista-servicios__item { border-bottom: 1px solid var(--wp--preset--color--linea); }
.lista-servicios__enlace {
	display: flex; align-items: center; gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--20);
	text-decoration: none;
}
.lista-servicios__enlace:hover .lista-servicios__nombre { text-decoration: underline; }
.lista-servicios__icono {
	flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem;
	object-fit: cover; border-radius: 50%;
}
.lista-servicios__cuerpo { display: grid; gap: .15em; min-width: 0; }
.lista-servicios__nombre {
	font-family: var(--wp--preset--font-family--titular);
	font-weight: 700;
	color: var(--wp--preset--color--marca-oscuro);
}
.lista-servicios__extracto {
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--texto-suave);
}

/* En los perfiles, las materias son imágenes cuadradas. Tres columnas
   mantienen una sola materia visible y dejan crecer la colección por filas. */
.servicios-visuales {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	margin: 0;
	padding: 0;
}
.servicio-visual { min-width: 0; }
.servicio-visual__enlace {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 12px;
	background: var(--wp--preset--color--fondo);
	color: var(--wp--preset--color--texto);
	text-decoration: none;
}
.servicio-visual__enlace:hover { border-color: var(--wp--preset--color--marca); }
/* Materias: apertura editorial, preparación y navegación entre servicios. */
.single-acordia_materia .contenido { padding-block: 0; }
.materia { padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); }
.materia .migas { margin-bottom: var(--wp--preset--spacing--20); }
.materia .migas__lista { font-size: var(--wp--preset--font-size--centro-nota); font-weight: 400; }
.materia .migas__lista li { min-width: 0; }
.materia .migas__lista [aria-current] { overflow-wrap: anywhere; }
.materia__apertura {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	grid-template-areas: "presentacion imagen" "continuacion imagen";
	grid-template-rows: max-content 1fr;
	row-gap: 0;
}
.materia__apertura--sin-imagen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "presentacion" "continuacion"; }
.materia__presentacion { min-width: 0; grid-area: presentacion; }
.materia__continuacion { min-width: 0; grid-area: continuacion; margin-top: var(--wp--preset--spacing--30); }
.materia__presentacion .perfil__nombre { margin-bottom: var(--wp--preset--spacing--30); text-wrap: balance; }
.materia__texto { min-width: 0; max-width: 68ch; overflow-wrap: anywhere; }
.materia__texto > :first-child { margin-top: 0; }
.materia__texto > :last-child { margin-bottom: 0; }
.materia__texto h2 { font-size: var(--wp--preset--font-size--titulo-2); font-weight: 500; }
.materia__texto h3 { font-size: var(--wp--preset--font-size--medio); font-weight: 500; }
.materia__orientacion { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--30); font-weight: 500; text-decoration: none; }
.materia__orientacion:hover { text-decoration: underline; }
.materia__imagen { grid-area: imagen; width: 100%; min-width: 0; position: relative; aspect-ratio: 1; align-self: stretch; }
.materia__imagen img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; }
.materia__desarrollo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}
.materia__desarrollo--unico { grid-template-columns: minmax(0, 1fr); }
.materia__casos ul { margin-bottom: 0; padding-left: var(--wp--preset--spacing--30); }
.materia__casos li + li { margin-top: var(--wp--preset--spacing--10); }
.materia__desarrollo--unico .materia__casos { max-width: none; }
.materia__desarrollo--unico .materia__casos ul { columns: 2; column-gap: var(--wp--preset--spacing--40); }
.materia__casos li { break-inside: avoid; }
.materia__casos li::marker { color: var(--wp--preset--color--marca); }
.materia__detalles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
	scroll-margin-top: var(--wp--preset--spacing--60);
}
.materia__detalles > :only-child { grid-column: 1 / -1; }
.materia__panel { min-width: 0; display: flex; flex-direction: column; padding: var(--wp--preset--spacing--40); border-radius: 12px; }
.materia__panel--arena { background: color-mix(in srgb, var(--wp--preset--color--acento) 14%, var(--wp--preset--color--fondo)); }
.materia__panel--azul { background: var(--wp--preset--color--fondo-suave); }
.materia__panel > .perfil__titulo { line-height: 1.2; min-height: 2.4em; }
.materia__respuesta { margin: 0 0 var(--wp--preset--spacing--20); font-weight: 500; color: var(--wp--preset--color--marca-oscuro); }
.materia__documentos { margin: 0; padding-left: var(--wp--preset--spacing--30); }
.materia__documentos li { padding-left: var(--wp--preset--spacing--10); overflow-wrap: anywhere; }
.materia__documentos li + li { margin-top: var(--wp--preset--spacing--10); }
.materia__nota { margin: auto 0 0; padding-top: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--centro-nota); color: var(--wp--preset--color--texto-suave); }
.materia__ayuda { margin-top: auto; padding-top: var(--wp--preset--spacing--30); font-weight: 500; text-decoration: none; }
.materia__ayuda:hover { text-decoration: underline; }
.materia__plazo { margin-top: var(--wp--preset--spacing--30); }
.materia__plazo p { margin: 0; }
.materia__plazo h3 { font-size: var(--wp--preset--font-size--medio); margin: 0 0 var(--wp--preset--spacing--20); }
.materia__consulta { margin-top: var(--wp--preset--spacing--50); padding-block: var(--wp--preset--spacing--50); border-top: 1px solid var(--wp--preset--color--linea); text-align: center; }
.materia__consulta p { max-width: 58ch; margin: 0 auto var(--wp--preset--spacing--30); }
.materia__centros { display: block; width: fit-content; margin: var(--wp--preset--spacing--20) auto 0; text-decoration: none; }
.materia__centros:hover { text-decoration: underline; }
.materia__relacionadas { padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--wp--preset--color--linea); }
.materia__servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--wp--preset--spacing--30); list-style: none; margin: 0; padding: 0; }
.materia__servicios li { min-width: 0; }
.materia__servicio { display: flex; flex-direction: column; height: 100%; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--30); border: 1px solid var(--wp--preset--color--linea); text-decoration: none; color: var(--wp--preset--color--texto); }
.materia__servicio:hover { border-color: var(--wp--preset--color--marca); }
.materia__servicio h3 { margin: 0; font-size: var(--wp--preset--font-size--contenido-subtitulo); color: var(--wp--preset--color--marca-oscuro); font-weight: 500; }
.materia__servicio p { margin: 0; color: var(--wp--preset--color--texto-suave); }
.materia__servicio-ir { display: flex; justify-content: space-between; gap: var(--wp--preset--spacing--20); margin-top: auto; padding-top: var(--wp--preset--spacing--20); color: var(--wp--preset--color--marca); font-weight: 500; }
@media (max-width: 55rem) {
	.materia__apertura, .materia__desarrollo, .materia__detalles { grid-template-columns: minmax(0, 1fr); }
	.materia__apertura { grid-template-areas: "presentacion" "imagen" "continuacion"; grid-template-rows: auto; }
	.materia__apertura--sin-imagen { grid-template-areas: "presentacion" "continuacion"; }
	.materia__continuacion { margin-top: 0; }
	.materia__apertura, .materia__desarrollo { gap: var(--wp--preset--spacing--30); }
	.materia__desarrollo--unico .materia__casos ul { columns: 1; }
	.materia__panel { padding: var(--wp--preset--spacing--30); }
	.materia__panel > .perfil__titulo { min-height: 0; }
	.materia__consulta { padding-block: var(--wp--preset--spacing--40); }
}

.servicio-visual__imagen {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--wp--preset--color--fondo-suave);
}
.servicio-visual__imagen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.servicio-visual__imagen--sin-foto {
	background: linear-gradient(145deg, var(--wp--preset--color--marca-oscuro), var(--wp--preset--color--marca));
}
.servicio-visual__imagen--sin-foto::after {
	content: '';
	position: absolute;
	inset: 22%;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--fondo) 65%, transparent);
	border-radius: 50%;
}
.servicio-visual__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--20);
}
.servicio-visual__nombre {
	font-family: var(--wp--preset--font-family--titular);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--marca-oscuro);
}
.servicio-visual__extracto { font-size: var(--wp--preset--font-size--base); color: var(--wp--preset--color--texto-suave); }
.servicio-visual__ir {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--10);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600;
	color: var(--wp--preset--color--marca);
}

/* --- texto propio de la ubicación --- */
.texto-propio { max-width: var(--wp--style--global--content-size, 44rem); }
.texto-propio > :first-child { margin-top: 0; }
.texto-propio > :last-child { margin-bottom: 0; }

/* --- tarjetas con imagen (materias, distritos, ciudades del índice) --- */
.tarjeta__imagen {
	display: block; width: 100%; height: auto;
	aspect-ratio: 16 / 9; object-fit: cover;
	border-radius: 6px;
	margin: 0 0 var(--wp--preset--spacing--20);
}
.tarjeta__titulo a { text-decoration: none; }
.tarjeta__titulo a:hover { text-decoration: underline; }

/* --- personas ---
   Sin foto, las iniciales sobre el azul de marca (blanco sobre `marca` da
   7.31:1). Mismo tamaño y forma que el retrato, para que una rejilla con
   fotos y sin ellas no baile. */
.persona__foto,
.persona__iniciales {
	width: 6rem; height: 6rem; border-radius: 50%;
	margin: 0 0 var(--wp--preset--spacing--20);
}
.persona__foto { display: block; object-fit: cover; }
.persona__iniciales {
	display: grid; place-items: center;
	background: var(--wp--preset--color--marca);
	color: var(--wp--preset--color--fondo);
	font-family: var(--wp--preset--font-family--titular);
	font-size: var(--wp--preset--font-size--grande); font-weight: 700;
	letter-spacing: .04em;
}
.persona__nombre { font-size: var(--wp--preset--font-size--grande); margin: 0 0 var(--wp--preset--spacing--10); }
.ubicacion--con-centro .persona__nombre { font-size: 1.25rem; font-weight: 600; }
.persona__registro, .persona__especialidades { margin: 0 0 var(--wp--preset--spacing--10); font-size: var(--wp--preset--font-size--pequeno); color: var(--wp--preset--color--texto-suave); }
.persona__registro-etiqueta {
	display: block;
	margin-bottom: calc(var(--wp--preset--spacing--10) / 2);
	font-weight: 500;
}
.persona__registro-dato { display: block; overflow-wrap: anywhere; }
.persona__bio { color: var(--wp--preset--color--texto-suave); }
.persona__bio > :first-child { margin-top: 0; }
.persona__bio > :last-child { margin-bottom: 0; }
.ubicacion--con-centro .perfil__minjus,
.ubicacion--con-centro .servicio-visual__ir,
.ubicacion--con-centro .persona__registro,
.ubicacion--con-centro .persona__especialidades { font-size: .875rem; }

/* El contacto cierra la ficha: primero la consulta y después los datos,
   tanto en escritorio como en móvil. */
.contacto-centro { padding-block: var(--wp--preset--spacing--50); }
.contacto-centro .cierre__titulo {
	font-size: var(--wp--preset--font-size--titulo-2);
	font-weight: 500;
	margin-bottom: var(--wp--preset--spacing--30);
}
.contacto-centro__grupo + .contacto-centro__grupo {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--fondo) 22%, transparent);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--50);
}
.contacto-centro__nombre { margin: 0 0 var(--wp--preset--spacing--20); color: var(--wp--preset--color--fondo); font-size: 1.25rem; font-weight: 500; }
.contacto-centro__ficha {
	display: grid;
	grid-template-columns: minmax(17rem, .8fr) minmax(0, 1.2fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}
.contacto-centro__datos {
	min-width: 0;
	margin: 0;
}
.contacto-centro__dato {
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
	padding-block: var(--wp--preset--spacing--20);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--fondo) 22%, transparent);
}
.contacto-centro__dato dt {
	margin: 0;
	font-family: var(--wp--preset--font-family--titular);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--fondo) 70%, var(--wp--preset--color--marca-profundo));
}
.contacto-centro__dato dd { margin: 0; overflow-wrap: anywhere; }
.contacto-centro__dato address { font-style: normal; }
.contacto-centro__referencia { display: block; opacity: .8; }
.contacto-centro__dato a { color: var(--wp--preset--color--fondo); text-underline-offset: .2em; }
.contacto-centro__mapa { display: inline-block; margin-top: var(--wp--preset--spacing--10); }
.contacto-centro__consulta {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--fondo) 24%, transparent);
	border-radius: 12px;
	background: transparent;
}
.contacto-centro__consulta-titulo {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--titular);
	font-size: 1.25rem;
	font-weight: 500;
}
.contacto-centro__consulta > p:not(.contacto-centro__consulta-titulo) { margin: 0 0 var(--wp--preset--spacing--20); opacity: .82; }
.contacto-centro__acciones { display: grid; gap: var(--wp--preset--spacing--10); }
.contacto-centro__acciones .boton { text-align: center; }

/* Paginación del índice, por si algún día hacen falta más de cuarenta ciudades. */
.pagination { margin-top: var(--wp--preset--spacing--40); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10); }
.pagination .page-numbers { padding: .4em .8em; border: 1px solid var(--wp--preset--color--linea); border-radius: 6px; text-decoration: none; }
.pagination .page-numbers.current { background: var(--wp--preset--color--marca); color: var(--wp--preset--color--fondo); border-color: var(--wp--preset--color--marca); }

@media (max-width: 62rem) {
	.servicios-visuales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.perfil__lectura { grid-template-columns: minmax(0, 1fr); }
	.perfil__texto { max-width: none; }
	.perfil__cta { justify-self: start; }
	.galeria--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.perfil__intro { grid-template-columns: minmax(0, 1fr); }
	.perfil__portada { height: 14rem; }
	.contacto-centro__ficha { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--30); }
	.contacto-centro__consulta { max-width: 28rem; }
}

@media (max-width: 44rem) {
	.servicios-visuales { grid-template-columns: minmax(0, 1fr); }
	.perfil__nombre { font-size: 2.125rem; }
	.ubicacion__cabecera { padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); }
	.ubicacion__imagen { aspect-ratio: 16 / 9; margin-top: var(--wp--preset--spacing--30); }
	.perfil__barra { padding-inline: var(--wp--preset--spacing--20); }
	.perfil__marca { left: var(--wp--preset--spacing--20); top: -2.375rem; width: 4.75rem; height: 4.75rem; }
	.perfil__marca img { width: 2.75rem; height: 2.75rem; }
	.perfil__nav { margin-left: 5.25rem; justify-content: space-between; }
	.perfil__nav a { flex: 1 1 0; min-width: 0; padding-inline: .25rem; font-size: .8125rem; }
	.perfil__nav-largo { display: none; }
	.perfil__nav-corto { display: inline; }
	.perfil__intro, .perfil__bloque { padding-inline: var(--wp--preset--spacing--20); }
	.perfil__intro { row-gap: var(--wp--preset--spacing--30); }
	.perfil__lectura { gap: var(--wp--preset--spacing--30); }
	.perfil__texto--centro > ul { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--20); }
	.perfil__local { padding: 0; }
	.perfil__cta { max-width: none; }
	.perfil__modalidad-portada { right: var(--wp--preset--spacing--20); bottom: var(--wp--preset--spacing--20); max-width: calc(100% - var(--wp--preset--spacing--20) - var(--wp--preset--spacing--20)); }
	.contacto-centro__dato { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--10); }
	.galeria--2, .galeria--3, .galeria--4 { grid-template-columns: 1fr 1fr; }
	.acciones .boton { width: 100%; text-align: center; }
}

@media (max-width: 24rem) {
	.perfil__nav .perfil__nav-equipo { display: none; }
	.perfil__nav a { font-size: .75rem; padding-inline: 0; }
}