/*
 * Componentes de maqueta de Sempatiza.
 *
 * Reglas que NO se pueden expresar como atributos de bloque y que se repiten en
 * todas las webs. Cada una lleva escrito por qué existe: sin eso, dentro de seis
 * meses nadie sabrá si se puede borrar.
 *
 * Se aplican por clase, puesta desde el editor en «Avanzado → Clases CSS
 * adicionales». No hace falta tocar código para usarlas.
 */

/* Hero de categoría — Cover a pantalla completa con el título abajo.
 *
 * `minHeight` de un bloque Cover es un número fijo: 240 px son 240 px en móvil y
 * en un monitor de 27 pulgadas. En pantalla grande eso deja el hero raquítico y
 * en móvil, si se pone el valor grande, ocupa media pantalla. La maqueta lo
 * resuelve con clamp(): crece con el ancho de la ventana entre dos topes.
 *
 * Se usa `!important` porque el bloque Cover escribe su min-height en el
 * atributo `style` del elemento, y un estilo en línea solo se puede vencer así.
 * Es la única forma de mantener el valor visible en el editor y a la vez que la
 * página lo escale. */
/* Alto del hero interior: MÁS que la maqueta, y a propósito.
   La maqueta usa `clamp(240px, 32vw, 360px)`. Esa banda de 4:1 solo enseña el 37% de una
   foto de 3:2, y con fotos de personas eso deja cabezas flotando sin cuerpo ni sitio: se
   ve quién, pero no dónde ni haciendo qué. En una web de terapia el «dónde» es la mitad
   del mensaje —una consulta con luz, dos sillones, una conversación—, así que la banda
   sube a 480px, que enseña el 50%.
   El mínimo son 360 y no 280: a 375px el titular y la entradilla ocupan unos 200px, así
   que con 280 la foto quedaba reducida a una franja de 80px detrás del texto. Medido. */
.wp-block-cover.hero-categoria {
	min-height: clamp(360px, 33vw, 480px) !important;
}

/* No hay corte extra en móvil: clamp() ya devuelve 240 px por debajo de 750 px
 * de ventana, que es exactamente lo que hace la maqueta. Añadir aquí un valor
 * menor sería una desviación inventada de la referencia. */

/* Rejilla de tres, con corte propio — `.rejilla-3`
 *
 * Gutenberg ofrece dos modos de rejilla y ninguno reproduce esto:
 *
 *   · «número de columnas» fija 3 y no baja NUNCA, ni a 375 px.
 *   · «ancho mínimo» usa `auto-fill`, que crea carriles vacíos cuando sobra
 *     sitio. Para tener 3 columnas a 768 px hace falta un mínimo de 217 px o
 *     menos, y ese mismo mínimo genera 5 carriles a 1440 px: las tarjetas
 *     adelgazan y aparecen huecos. Los dos rangos no se cruzan, así que el
 *     atributo por sí solo no puede dar 1 / 3 / 3 / 3 columnas.
 *
 * Se fija el número de columnas en el bloque y aquí se añade el único corte que
 * falta, el mismo que usa la maqueta: por debajo de 720 px, una sola columna.
 *
 * Cuándo usarla: bloques de 3 elementos que deben ir en fila en tablet — equipo,
 * sellos de confianza, cifras. Para rejillas de 6 tarjetas NO hace falta:
 * ahí «ancho mínimo: 285px» sí da 1 / 2 / 3 / 3 correctamente. */
.wp-block-group.rejilla-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 720px) {
	.wp-block-group.rejilla-3 {
		grid-template-columns: 1fr;
	}
}

/* Preguntas frecuentes — `.faq` sobre un grupo que contiene bloques `core/details`
 *
 * El bloque Detalles del núcleo genera el `<details>/<summary>` nativo, que es
 * accesible, funciona sin JavaScript y es editable — a diferencia de un acordeón
 * hecho con HTML crudo, que es lo que suele acabar en un `wp:html`.
 *
 * Lo que no se puede expresar como atributo de bloque y por eso vive aquí: la
 * tipografía del summary, el marcador «+ / –» (es un `::after`) y la línea que
 * aparece bajo la pregunta al abrirla. El borde y el radio de la tarjeta SÍ son
 * atributos, pero `core/details` no admite `border-radius` —comprobado en su
 * block.json: `__experimentalBorder` solo acepta color, width y style—, así que
 * también se resuelven aquí en lugar de envolver cada pregunta en un grupo. */
.faq .wp-block-details {
	background: var(--wp--preset--color--blanco, #fff);
	border: 1px solid var(--wp--preset--color--linea, #e4e8dd);
	border-radius: 10px;
	margin-bottom: 11.2px;
}

.faq .wp-block-details > summary {
	cursor: pointer;
	padding: 16px 19.2px;
	font-family: var(--wp--preset--font-family--titulos, "Bellota", cursive);
	font-weight: 700;
	color: var(--wp--preset--color--verde-osc, #35600a);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	list-style: none;
}

/* Se oculta el triángulo del navegador para poner el «+ / –» de la maqueta. */
.faq .wp-block-details > summary::-webkit-details-marker { display: none; }
.faq .wp-block-details > summary::marker { content: ""; }

.faq .wp-block-details > summary::after {
	content: "+";
	color: var(--wp--preset--color--naranja, #f2a41c);
	font-size: 24px;
	line-height: 1;
	flex: none;
}

.faq .wp-block-details[open] > summary::after { content: "\2013"; }

.faq .wp-block-details[open] > summary {
	border-bottom: 1px solid var(--wp--preset--color--linea, #e4e8dd);
}

/* El contenido de la respuesta. `core/details` lo mete suelto detrás del
 * summary, sin envoltorio propio al que aplicar relleno. */
.faq .wp-block-details > :not(summary) {
	padding-left: 19.2px;
	padding-right: 19.2px;
}

.faq .wp-block-details > :not(summary):first-of-type { padding-top: 16px; }
.faq .wp-block-details > :not(summary):last-child    { padding-bottom: 16px; }

/* Encabezados — por qué esto no está solo en theme.json
 *
 * Nuestro theme.json SÍ emite `h2{color:…;font-size:…}` y esa hoja llega
 * después de la de Astra. Aun así pierde, y no por orden: Astra escribe
 * `.entry-content :where(h2)`, que tiene especificidad 0-1-0, mientras que el
 * `h2` pelado que emite theme.json para los estilos de elemento se queda en
 * 0-0-1. Contra eso el orden no decide.
 *
 * Así que las mismas reglas se repiten aquí con un selector que iguala a Astra.
 * Los valores NO se duplican: se toman de las variables que genera el propio
 * theme.json, así que el diseño sigue viviendo en `tokens/<sitio>.json`.
 *
 * Y theme.json se queda como está porque gobierna el EDITOR, donde la hoja de
 * Astra no interviene: sin él, el equipo vería en el editor unos encabezados
 * distintos de los publicados.
 *
 * Valores de la maqueta (css/style.css:39-42):
 *   h1,h2,h3,h4 { font-family: Bellota; color: var(--oliva); line-height: 1.2 }
 *   h1 { clamp(2rem, 5vw, 3.1rem); color: var(--verde-osc) }
 *   h2 { clamp(1.7rem, 3.6vw, 2.4rem) }
 *   h3 { 1.3rem } */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--wp--preset--font-family--titulos);
	color: var(--wp--preset--color--oliva);
	line-height: 1.2;
}

/* ⚠️ En PÍXELES, no en rem, y es la misma trampa de siempre: Astra pone la raíz
 * del documento en 17 px, así que los 2.4rem de la maqueta —escrita sobre una
 * raíz de 16 px— se convertirían en 40,8 px en vez de 38,4. La regla no es solo
 * para los puntos de ruptura: **todo valor copiado de la maqueta se pasa a
 * píxeles**, porque allí un rem son 16 px y aquí no. */
.entry-content h1 {
	color: var(--wp--preset--color--verde-osc);
	font-size: clamp(32px, 5vw, 49.6px);   /* 2rem · 3.1rem de la maqueta */
}

.entry-content h2 { font-size: clamp(27.2px, 3.6vw, 38.4px); }  /* 1.7rem · 2.4rem */
.entry-content h3 { font-size: 20.8px; }                        /* 1.3rem */
.entry-content h4 { font-size: 17.6px; }                        /* 1.1rem */

/* Sobre las bandas oscuras el encabezado va en blanco, como en la maqueta
 * (`.seccion--verde h2{color:#fff}`). Los bloques que lo necesitan ya llevan su
 * color en línea, que gana a todo; esto cubre los que no lo lleven. */
.entry-content .has-verde-osc-background-color h1,
.entry-content .has-verde-osc-background-color h2,
.entry-content .has-verde-osc-background-color h3 {
	color: var(--wp--preset--color--blanco);
}

/* Objetivos táctiles — WCAG 2.2 AA, criterio 2.5.8 (24x24 px)
 *
 * El enlace del logotipo envuelve solo una imagen, así que su altura es la de la
 * imagen: 21 px en móvil, por debajo del mínimo. Se le da altura de objetivo sin
 * mover el logotipo de sitio.
 *
 * La norma exime los enlaces dentro de una frase —su tamaño lo fija la altura de
 * línea del texto que los rodea—, así que esos no se tocan: agrandarlos rompería
 * el párrafo. Los enlaces que iban sueltos como llamada a la acción ya no son
 * enlaces de texto: son bloques Botón, que traen su propio relleno. */
.custom-logo-link,
.site-logo-img a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* Un enlace que ocupa él solo un párrafo —el correo, «Cómo llegar», el enlace a
 * otra página de servicio— no está «dentro de una frase», así que no le vale la
 * excepción de la norma: tiene que llegar a 24 px de alto.
 *
 * `:only-child` limita la regla a los párrafos y elementos de lista donde el
 * enlace es el único
 * elemento; los enlaces repartidos por un texto corrido tienen hermanos y no
 * entran. Y `inline-flex` mantiene el enlace en línea: no rompe el párrafo. */
.entry-content p > a:only-child,
.entry-content li > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* Botones — la maqueta los quiere con esquina suave, no de píldora
 *
 * Astra los pinta completamente redondeados y eso cambia el carácter de la web:
 * una píldora se lee como algo blando y comercial; el diseño de Erika usa
 * `border-radius: 6px`, que es firme sin ser duro.
 *
 * Valores de la maqueta (css/style.css:57-59):
 *   .btn { border-radius: 6px; padding: .72em 1.5em; font-family: Bellota;
 *          font-weight: 700; font-size: .98rem }
 *
 * El tamaño va en píxeles: .98rem sobre la raíz de 16 px de la maqueta son
 * 15,7 px, y aquí la raíz son 17. */
/* Botones. La clase va DUPLICADA por especificidad, no por descuido:
   el núcleo emite `.wp-block-buttons .wp-block-button.is-style-outline
   .wp-block-button__link.wp-element-button` (0-5-0) con Mulish 500, y el botón de
   contorno salía con la tipografía equivocada. Medido, no supuesto.
   Los valores salen de `.btn` de la maqueta: .98rem sobre raíz de 16 = 15.7px. */
.entry-content .wp-block-buttons .wp-block-button.wp-block-button .wp-block-button__link.wp-element-button,
.entry-content .wp-block-button.wp-block-button .wp-block-button__link,
.wp-block-button__link,
.ast-button {
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 700;
	font-size: 15.7px;
	padding: 0.72em 1.5em;
	line-height: 1;
	/* La maqueta declara `border: 2px solid transparent` en TODOS los botones, también
	   en los de fondo lleno. No es decorativo: son los 4px de alto que separaban
	   «Pedir cita» (137x45) de la maqueta (141x49). Sin él, el botón de contorno y el
	   de fondo lleno no miden lo mismo y no se alinean.
	   OJO: aquí van solo GROSOR y ESTILO. El color se pone abajo y únicamente en los
	   botones que no son de contorno — al ponerlo aquí, «transparent» le borraba el
	   borde al botón de contorno y se quedaba en texto suelto. */
	border-width: 2px;
	border-style: solid;
}

.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	border-color: transparent;
}

/* Variante grande — `.btn--lg` de la maqueta, la que usan las llamadas a la acción
   principales de una portada: 1.05rem y relleno .85em/1.9em sobre raíz de 16.
   Se aplica poniendo la clase `boton-grande` al bloque Botones. */
.entry-content .boton-grande .wp-block-button.wp-block-button .wp-block-button__link.wp-element-button,
.entry-content .boton-grande .wp-block-button.wp-block-button .wp-block-button__link {
	font-size: 16.8px;
	padding: 14.28px 31.92px;
}

/* El botón «Pedir cita» de la cabecera es el mismo objeto y debe verse igual. */
.ast-header-button-1 .ast-custom-button,
.site-header .ast-custom-button {
	border-radius: 6px;
}

/* Distintivo del hero — píldora blanca, no texto suelto
 *
 * En la maqueta el «Terapia Gestalt relacional · Granada» va dentro de una
 * píldora blanca con sombra, y funciona como sello sobre el fondo verde claro.
 * Sin ella queda un renglón naranja en mayúsculas que no dice nada.
 *
 * Se aplica por clase desde el editor, en «Avanzado → Clases CSS adicionales».
 * Valores: css/style.css:108-110. */
.sello-hero {
	display: inline-block;
	background: var(--wp--preset--color--blanco, #fff);
	color: var(--wp--preset--color--verde, #467d00) !important;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 700;
	font-size: 12.8px;
	letter-spacing: 0.06em;
	padding: 0.4em 0.9em;
	border-radius: 30px;
	box-shadow: var(--wp--custom--sombra);
	text-transform: none;
	width: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPONENTES DE LA MAQUETA
   ═══════════════════════════════════════════════════════════════════════

   Cada pieza que la maqueta declara con nombre se resuelve AQUÍ, una vez, y
   las páginas la invocan por su clase. Antes estaba al revés: los estilos se
   escribían a mano en cada instancia, y bastaba olvidar una propiedad para que
   la pieza dejara de parecerse a sí misma.

   Los tamaños van en píxeles: la raíz del documento son 17 px por el ajuste de
   tipografía de Astra, y los valores de la maqueta están calculados sobre 16.
   ═══════════════════════════════════════════════════════════════════════ */

/* Antetítulo de sección — `.eyebrow` en la maqueta
   Va sobre cada H2 de sección y es lo que da el ritmo de lectura. */
.antetitulo {
	font-family: var(--wp--preset--font-family--texto);
	color: var(--wp--preset--color--naranja-texto);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 13.1px;          /* .82rem sobre raíz de 16 */
	font-weight: 700;
	margin-bottom: 6.4px;
}

/* Sección centrada — `.centrado`
   La maqueta centra antetítulo, título e introducción en la mayoría de bandas.
   Es una decisión de composición que se repite y por eso es una pieza. */
.seccion-centrada > .antetitulo,
.seccion-centrada > h2,
.seccion-centrada > .intro-seccion {
	text-align: center;
}

/* Entradilla de sección — `.intro-seccion` */
.intro-seccion {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 41.6px;
	color: var(--wp--preset--color--gris);
}

/* Icono en círculo — `.ayuda__ico`
   Un icono suelto de 24 px sobre fondo blanco no se lee como icono: se lee como
   un defecto. El círculo verde claro es lo que lo convierte en pieza. */
.icono-circulo img,
.icono-circulo .wp-block-image img,
.icono-circulo svg {
	width: 38px;
	height: 38px;
}

.icono-circulo {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--wp--preset--color--verde-claro);
	display: grid;
	place-items: center;
	margin: 0 auto 14.4px;
	color: var(--wp--preset--color--verde-logo);
}

/* Tarjeta de servicio — `.serv-card`
   Seis en la portada. La imagen llega al borde superior, el título va en verde
   OSCURO —no en oliva como el resto de H3— y la modalidad es una etiqueta, no
   un párrafo. */
.tarjeta-servicio {
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 12px;
	box-shadow: var(--wp--custom--sombra);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0;
}

.tarjeta-servicio > .wp-block-image { margin: 0; }
.tarjeta-servicio > .wp-block-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	height: auto;
	object-fit: cover;
	display: block;
	border-radius: 0;
	background-color: var(--wp--preset--color--verde-claro);
}

/* El contenido de la tarjeta va alineado a la izquierda y compacto.
 *
 * Dos cosas lo estropeaban y ninguna se ve en el `text-align`:
 *  · La tarjeta es un grupo «constrained», y WordPress centra cada bloque hijo
 *    dentro del ancho de contenido. El texto quedaba centrado aunque su
 *    alineación calculada fuera «start».
 *  · Cada hijo llevaba 24 px de margen superior por el hueco de bloque, cuando
 *    la maqueta usa los márgenes normales de párrafo. Eran +331 px en la
 *    sección de servicios, la mayor parte del sobrante de la portada. */
.tarjeta-servicio > :not(.wp-block-image) {
	padding-left: 22.4px;
	padding-right: 22.4px;
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	text-align: left;
}

.tarjeta-servicio > :not(.wp-block-image) + :not(.wp-block-image) {
	margin-top: 0;
}

/* El cuerpo de la tarjeta, con los valores de `.serv-card__body`
 *
 * Medido en móvil: nuestra tarjeta 544 px contra 455 de la maqueta. El desglose
 * señalaba dos culpables — el botón ocupaba 83 px donde la maqueta le da 38, y
 * el encabezado 46 donde debería rondar 25 — y ninguno se veía en el porcentaje
 * de diferencia, que solo decía «hay diferencia».
 *
 * Valores: `.serv-card__body{padding:1.3rem 1.4rem 1.5rem}`,
 * `h3{margin-bottom:.3rem}`, `.modalidad{margin-bottom:.6rem}`,
 * `.btn{align-self:flex-start;margin-top:.6rem}`. */
/* ⚠️ `:first-of-type` NO significa «primer hijo»: significa «primer hermano de
 * ESA etiqueta». Los hijos de la tarjeta son FIGURE, H3, P, P, DIV — y como solo
 * hay un DIV, el contenedor de botones también era «first-of-type» y se llevaba
 * el relleno superior. Igual el primer P. Resultado: 20,8 px de más en tres
 * hijos en vez de en uno, 41,6 px sobrantes por tarjeta, seis tarjetas.
 *
 * Perseguí ese sobrante dos veces creyendo que lo metía WordPress —comprobado
 * en `block-supports/layout.php`: el tipo `flex` no declara ni altura ni
 * relleno— y lo metía mi propia hoja.
 *
 * «El hermano inmediatamente posterior a la imagen» es literalmente «el primer
 * bloque del cuerpo», sin depender de la etiqueta ni del orden. */
.tarjeta-servicio > .wp-block-image + * { padding-top: 20.8px; }
.tarjeta-servicio > :last-child { padding-bottom: 24px; }

.entry-content .tarjeta-servicio h3 {
	margin-top: 0;
	margin-bottom: 4.8px;
	line-height: 1.2;
}

.tarjeta-servicio .modalidad {
	margin-top: 0;
	margin-bottom: 9.6px;
	line-height: 1.3;
}

.tarjeta-servicio p:not(.modalidad) {
	margin-top: 0;
	margin-bottom: 0;
	flex: 1;
	line-height: 1.65;
}

.tarjeta-servicio .wp-block-buttons {
	margin-top: 9.6px;
	margin-bottom: 0;
	justify-content: flex-start;
}

/* El bloque Botones no necesita nada: el núcleo ya le pone `margin:0` a sus
 * hijos (`wp-includes/blocks/buttons/style.css`) y el hueco lo controla el
 * `margin-top` de esta pieza. */
/* ⚠️ `:first-of-type` NO significa «primer hijo»: significa «primer hermano de
 * ESA etiqueta». Los hijos de la tarjeta son FIGURE, H3, P, P, DIV — y como solo
 * hay un DIV, el contenedor de botones también era «first-of-type» y se llevaba
 * el relleno superior. Igual el primer P. Resultado: 20,8 px de más en tres
 * hijos en vez de en uno, 41,6 px sobrantes por tarjeta, seis tarjetas.
 *
 * Perseguí ese sobrante dos veces creyendo que lo metía WordPress —comprobado
 * en `block-supports/layout.php`: el tipo `flex` no declara ni altura ni
 * relleno— y lo metía mi propia hoja.
 *
 * «El hermano inmediatamente posterior a la imagen» es literalmente «el primer
 * bloque del cuerpo», sin depender de la etiqueta ni del orden. */
.tarjeta-servicio > .wp-block-image + * { padding-top: 20.8px; }
.tarjeta-servicio > :last-child { padding-bottom: 24px; }

.entry-content .tarjeta-servicio h3 {
	color: var(--wp--preset--color--verde-osc);
	margin-bottom: 4.8px;
}

/* `:not(.modalidad)` no es un adorno: sin él, `.tarjeta-servicio p` (0-2-0) gana a
   `.modalidad` (0-1-0) y la etiqueta de modalidad sale en gris a 15,4px en vez de en
   naranja a 11,8px. La clase de un componente pierde contra el selector de su
   contenedor si este es más específico. Medido. */
.tarjeta-servicio p:not(.modalidad) { color: var(--wp--preset--color--gris); font-size: 15.4px; }

/* Etiqueta de modalidad — `.modalidad` */
.modalidad {
	font-family: var(--wp--preset--font-family--texto);
	font-size: 11.8px;          /* .74rem sobre raíz de 16 */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--naranja-texto);
	font-weight: 700;
	margin-bottom: 9.6px;
}

/* Testimonio — `.testi`
   El filete naranja de arriba es lo que los distingue de una tarjeta cualquiera,
   y el texto va en cursiva porque es voz de otra persona. */
.testimonio {
	background: var(--wp--preset--color--blanco);
	border-radius: 14px;
	padding: 22.4px 24px;
	box-shadow: var(--wp--custom--sombra);
	border-top: 4px solid var(--wp--preset--color--naranja);
}

.testimonio .estrellas {
	color: var(--wp--preset--color--naranja-texto);
	margin-bottom: 8px;
	letter-spacing: 2px;
}

.testimonio p {
	color: #41473a;
	font-size: 15.2px;
	font-style: italic;
}

.testimonio .autor {
	font-family: var(--wp--preset--font-family--texto);
	font-weight: 800;
	font-style: normal;
	color: var(--wp--preset--color--verde-osc);
	margin-top: 9.6px;
}

/* Bloque destacado — `.destacado`
   Tarjeta blanca con filete naranja a la izquierda. Sin él es un párrafo más. */
.destacado {
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--linea);
	border-left: 6px solid var(--wp--preset--color--naranja);
	border-radius: 16px;
	box-shadow: var(--wp--custom--sombra);
	padding: 32px;            /* 2rem */
}

.entry-content .destacado .cita-destacada {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 21.6px;          /* 1.35rem sobre raíz de 16 */
	color: var(--wp--preset--color--oliva);
	font-style: italic;
	margin: 0 0 1rem;
	line-height: 1.35;
}

/* Aviso en línea — `.promo`
   La banda verde clara con icono, texto y botón a la derecha. */
.aviso-linea {
	background: var(--wp--preset--color--verde-claro);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 12px;
	padding: 22.4px 28.8px;   /* 1.4rem 1.8rem sobre raíz de 16 */
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 25.6px;              /* 1.6rem */
	align-items: center;
}

@media (max-width: 720px) {
	.aviso-linea { grid-template-columns: 1fr; }
}
.entry-content .aviso-linea h3 { color: var(--wp--preset--color--verde-osc); margin: 0; }
.aviso-linea p { color: var(--wp--preset--color--gris); margin: 3.2px 0 0; }

/* Barra superior — contraste
 *
 * ⚠️ Cicatriz: al poner el fondo de esta barra en verde oscuro, los enlaces del
 * menú se quedaron del MISMO verde. Texto invisible sobre su propio fondo,
 * relación de contraste 1,00:1, en las dieciséis páginas. Ninguna de las ocho
 * puertas lo detectó: el marcado era válido, el texto correcto y los objetivos
 * táctiles suficientes.
 *
 * El fondo lo pone el ajuste del tema (`hba-header-bg-obj-responsive`) pero el
 * color del texto de un MENÚ no lo gobierna `hba-header-link-color-responsive`:
 * esa clave es para el texto suelto de la fila, no para los elementos de menú.
 * De ahí el desajuste.
 *
 * Valores de la maqueta: `.topbar{color:#e2ecd6}` y `.topbar a{color:#e2ecd6}`,
 * que sobre #35600a da 7,4:1 — holgado para WCAG 2.2 AA. */
.ast-above-header-wrap,
.ast-above-header-wrap a {
	color: #e2ecd6;
}

.ast-above-header-wrap a:hover { color: #ffffff; }

/* Los ELEMENTOS DE MENÚ de esta barra NO se tocan aquí: los gobierna
 * `header-menu2-color-responsive` en el perfil de Astra, que es su sitio.
 * Declararlo también aquí sería tenerlo en dos lugares, que es justo el fallo
 * que este protocolo persigue. */


/* ⚠️ Alcance del color de enlace — efecto secundario de un cambio propio
 *
 * Nuestro theme.json define el color de enlace para `a`, y al hacer que la hoja
 * de estilos globales cargue DESPUÉS de la de Astra —para que los encabezados
 * ganaran— ese color pasó a imponerse también en la cabecera y el pie, que son
 * territorio del tema. Resultado: enlaces verdes sobre fondos oscuros, con
 * contraste de 1,48:1 y 3,2:1.
 *
 * La corrección no es deshacer el orden de carga —los encabezados lo necesitan—
 * sino acotar dónde manda cada capa:
 *   · contenido de la página → nuestro color de enlace
 *   · cabecera y pie         → los colores del tema
 *
 * Los valores salen de la maqueta: `.topbar a{color:#e2ecd6}` sobre #35600a da
 * 7,4:1, y `.footer a{color:#dbe6cd}` sobre #1b2417 da 10,9:1. Los dos con
 * holgura sobre el 4,5:1 que exige la norma. */
.site-header a:where(:not(.wp-element-button):not(.ast-custom-button)),
.ast-above-header-wrap a {
	color: #e2ecd6;
}

/* Los elementos del menú de la barra superior necesitan igualar la
 * especificidad de Astra, que los pinta con
 * `.ast-builder-menu-2 .menu-item > .menu-link` (0-3-0).
 *
 * NOTA: `header-menu2-color-responsive` en el perfil de Astra SÍ funciona —lo
 * di por roto durante un rato porque WP Super Cache seguía sirviendo la página
 * vieja—. Esta regla es redundante con él y se puede borrar; se deja porque
 * documenta el selector exacto y porque no estorba. Lección aparte: al
 * comprobar un cambio de estilo, vaciar la caché ANTES de concluir nada. */
.ast-above-header-wrap .ast-builder-menu-2 .menu-item > .menu-link {
	color: #e2ecd6;
}

.ast-above-header-wrap .ast-builder-menu-2 .menu-item > .menu-link:hover {
	color: #ffffff;
}

.main-header-bar a:where(:not(.wp-element-button):not(.ast-custom-button)),
.site-primary-header-wrap a:where(:not(.wp-element-button):not(.ast-custom-button)) {
	color: #2a2f25;
}

.site-footer a:where(:not(.wp-element-button)),
.site-footer .menu-link,
.site-primary-footer-wrap a,
.site-below-footer-wrap a {
	color: #dbe6cd;
}

.site-footer a:hover,
.site-footer .menu-link:hover { color: #ffffff; }


/* Enlaces sobre bandas oscuras
 *
 * Un enlace hereda el verde de marca, que sobre el verde oscuro de las bandas
 * da 1,48:1: se lee peor que un texto gris. Pasó con «WhatsApp · Instagram ·
 * Facebook» en la llamada a la acción de la portada.
 *
 * Es un caso que se repite en cualquier web con secciones de color, así que va
 * como pieza y no como parche de una página. */
.has-verde-osc-background-color a:where(:not(.wp-element-button)),
.has-verde-background-color a:where(:not(.wp-element-button)),
.has-oliva-background-color a:where(:not(.wp-element-button)) {
	color: #eaf1e1;
	text-decoration-color: rgba(234, 241, 225, 0.6);
}

.has-verde-osc-background-color a:where(:not(.wp-element-button)):hover,
.has-verde-background-color a:where(:not(.wp-element-button)):hover {
	color: #ffffff;
}


/* Botón con borde sobre banda oscura
 *
 * `is-style-outline` toma el color del texto del enlace, que es el verde de
 * marca: sobre la banda verde oscura da 1,48:1 y se lee peor que un texto gris.
 * En la maqueta ese botón va en blanco (`.btn--outline` dentro de
 * `.seccion--verde`). Se resuelve por la banda, no por el botón, para que valga
 * en cualquier página que use una banda de color. */
.has-verde-osc-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-verde-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-oliva-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	color: #ffffff;
	border-color: #ffffff;
}

.has-verde-osc-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-verde-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: #ffffff;
	color: var(--wp--preset--color--verde-osc);
}


/* Enlaces sobre fondo oscuro, con la especificidad suficiente
 *
 * Las reglas anteriores perdían contra el color de enlace de los estilos
 * globales, que va con `a:where(...)` pero se imprime después. Se antepone
 * `.entry-content` para igualar y ganar, y se cubren los dos casos que quedaban:
 * la miga de pan dentro del hero de categoría, y el botón con borde de la banda
 * de cierre. */
.entry-content .wp-block-cover a:where(:not(.wp-element-button)),
.entry-content .has-verde-osc-background-color a:where(:not(.wp-element-button)),
.entry-content .has-verde-background-color a:where(:not(.wp-element-button)) {
	color: #eaf1e1;
}

.entry-content .has-verde-osc-background-color .is-style-outline > .wp-block-button__link,
.entry-content .has-verde-background-color .is-style-outline > .wp-block-button__link,
.entry-content .wp-block-cover .is-style-outline > .wp-block-button__link {
	color: #ffffff;
	border-color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════
   FASE A · PLANTILLA — un cambio, dieciséis páginas
   ═══════════════════════════════════════════════════════════════════════
   Estas reglas cierran 296 de las 561 diferencias medidas contra la maqueta,
   porque cabecera, pie y tipografía son iguales en todas las páginas.
   ═══════════════════════════════════════════════════════════════════════ */

/* Peso de los encabezados
 *
 * La maqueta NO declara `font-weight` en h1-h4: deja el valor por defecto del
 * navegador, que es 700. Astra sí lo declara, y lo pone en 600. Como nuestras
 * reglas fijaban familia, color y tamaño pero no el peso, ganaba Astra.
 * Resultado: 115 encabezados un punto más ligeros de lo que deberían, en las
 * dieciséis páginas. Bellota 700 estaba cargada desde el principio.
 *
 * Lección: al reproducir una pieza hay que copiar también lo que la maqueta
 * NO dice, porque el valor por defecto del navegador es una decisión de diseño
 * tanto como los que sí están escritos. */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-weight: 700;
}

/* Botón de la cabecera — «Pedir cita»
 *
 * Cuatro de los ocho grupos de diferencias de alcance total eran ESTE botón:
 * fondo, color de texto, radio y tipografía. No eran cuatro fallos, era un
 * componente sin resolver.
 *
 * Y el motivo de que mis reglas anteriores no hicieran nada: apuntaban a
 * `.ast-custom-button`, y la clase real del enlace es `.ast-custom-button-link`.
 * Un nombre de clase equivocado no da error: simplemente no pasa nada. */
.site-header .ast-custom-button-link,
.ast-header-button-1 .ast-custom-button-link {
	background-color: var(--wp--preset--color--verde);
	color: #ffffff;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 700;
	font-size: 15.7px;
	padding: 0.72em 1.5em;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	border: 2px solid transparent;
}

.site-header .ast-custom-button-link:hover {
	background-color: var(--wp--preset--color--verde-osc);
	color: #ffffff;
}

/* Barra superior — tamaño y teléfono en negrita
 * Maqueta: `.topbar{font-size:.82rem}` = 13,12 px sobre raíz de 16.
 * Y `.topbar__info a{font-weight:700}`: el teléfono va en negrita. */
.ast-above-header-wrap,
.ast-above-header-wrap a,
.ast-above-header-wrap .menu-link {
	font-size: 13.12px;
}

.ast-above-header-wrap a[href^="tel:"],
.ast-above-header-wrap .ast-builder-html-element a {
	font-weight: 700;
}

/* Pie — color, relleno y tamaño que faltaban
 * Maqueta: `.footer{color:#c4ceb6;padding:2.6rem 0 1.4rem;font-size:.9rem}`
 * y `.footer__copy{font-size:.82rem;opacity:.75}`. En píxeles, como todo lo
 * copiado de la maqueta. */
.site-footer {
	color: #c4ceb6;
	font-size: 14.4px;
}

.site-primary-footer-wrap {
	padding-top: 41.6px;
	padding-bottom: 22.4px;
}

.site-footer .menu-link,
.site-below-footer-wrap {
	font-size: 13.12px;
}

/* El filete separador del pie va en blanco al 12%, no en verde brillante. */
.site-below-footer-wrap {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* El copyright: Astra le pone su color global 3 (el verde de marca) con una
 * regla de dos clases, y ese verde sobre el #1b2417 del pie no llega a 3:1 —se
 * leía a duras penas—. Mismo gris verdoso que el resto del pie: #c4ceb6 sobre
 * #1b2417 da 10,4:1. */
.site-footer .ast-footer-copyright.site-footer-focus-item {
	color: #c4ceb6;
}

/* Móvil: el pie se apilaba pegado a los bordes de la pantalla (logo y franja de
 * sellos tocando el canto) y el botón flotante de WhatsApp tapaba la última
 * línea del copyright. Aire a los lados y hueco abajo del tamaño del botón. */
@media (max-width: 544px) {
	.site-primary-footer-wrap .ast-builder-grid-row,
	.site-below-footer-wrap .ast-builder-grid-row {
		padding-left: 20px;
		padding-right: 20px;
	}

	.site-below-footer-wrap {
		padding-bottom: 88px;
	}
}

/* Los tres residuos de plantilla que quedaban tras la fase A */

/* 1 · El bloque de texto suelto de la barra superior («📍 Granada y online…»)
 *     no es un enlace ni un menú, así que se escapaba de las reglas anteriores. */
.ast-above-header-wrap .ast-builder-html-element,
.ast-above-header-wrap .ast-builder-html-element * {
	font-size: 13.12px;
}

/* 2 · Migas de pan: la maqueta las pinta en oliva (`.breadcrumb a{color:var(--oliva)}`),
 *     no en el verde de enlace general. */
.entry-content .wp-block-cover .miga a,
.entry-content .miga a,
.entry-content nav.breadcrumb a {
	color: var(--wp--preset--color--oliva);
}

/* Entradilla — `.lead` en la maqueta, con tres variantes según dónde vive
 *
 * Es el párrafo que va justo debajo del h1 y da contexto antes del cuerpo. La
 * maqueta lo distingue del texto corriente por color y por ancho de línea, y al
 * aplanarlo perdimos las dos cosas: salía en tinta y a todo el ancho.
 *
 * Valores (css/style.css:111, 208, 220), pasados a píxeles:
 *   .hero p.lead      → 18.4px, #3f4636, 36ch
 *   .page-hero .lead  → 17.9px, #3f4636, 62ch
 *   .cat-hero .lead   → 17.9px, #eaf1e1, 60ch   (sobre el hero oscuro) */
.entry-content .entradilla {
	font-size: 17.9px;
	color: #3f4636;
	max-width: 62ch;
}

.entry-content .wp-block-cover .entradilla {
	color: #eaf1e1;
	max-width: 60ch;
}

/* Ítem de la rejilla de ventajas — `.ayuda__item{text-align:center}`
 * Puse la clase en el marcado y olvidé escribir la regla: los seis ítems salían
 * alineados a la izquierda con el icono ya centrado encima. */
.ayuda-item {
	text-align: center;
}

/* Iconos de trazo — lo que el bloque Icono no deja poner como atributo
 *
 * Los iconos de la maqueta están dibujados con LÍNEAS
 * (`fill:none; stroke:currentColor; stroke-width:1.6`), no con relleno. Esa
 * información vive en el SVG original, pero el bloque Icono del núcleo lo vuelve
 * a serializar con una lista blanca muy corta: conserva `d` y `fill`, y descarta
 * todo lo de `stroke`. Comprobado en las tres capas —el <svg>, un <g> envolvente
 * y la propia forma— y en las tres se pierde.
 *
 * Sin trazo, un icono de líneas se pinta como una mancha sólida. Con
 * `fill="none"` y sin trazo, invisible. El CSS es la única capa que el bloque no
 * toca, así que es aquí donde tiene que estar. */
.wp-block-icon svg path,
.wp-block-icon svg rect,
.wp-block-icon svg circle,
.wp-block-icon svg ellipse,
.wp-block-icon svg line,
.wp-block-icon svg polyline,
.wp-block-icon svg polygon {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Enlace del mapa — corrección de accesibilidad sobre la maqueta
 *
 * ⚠️ Este NO es un fallo de reproducción: la maqueta pinta
 * `.mapa-card__link{color:var(--verde)}` sobre `var(--verde-claro)`, y esa
 * combinación da 4,44:1 cuando la WCAG 2.2 AA exige 4,5:1 para texto normal.
 * O sea que la web estática de referencia también incumple, y conviene decírselo
 * a quien la mantiene.
 *
 * Se sube al verde oscuro de la misma paleta: 6,58:1, misma familia de color,
 * ningún cambio perceptible de carácter. */
.enlace-mapa a,
.entry-content .has-verde-claro-background-color a[href*="maps.google"],
.entry-content .has-verde-claro-background-color a[href*="google.com/maps"] {
	color: var(--wp--preset--color--verde-osc);
	font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   FASE E · PORTADA
   ═══════════════════════════════════════════════════════════════════════ */

/* Píldoras de redes sociales — `.social`
 * Yo las había dejado como enlaces de texto separados por puntos. En la maqueta
 * son tres píldoras con fondo blanco translúcido sobre la banda verde, y esa
 * forma es lo que las convierte en botones a ojo. */
.redes-sociales {
	display: flex;
	gap: 12.8px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 22.4px;
}

.entry-content .redes-sociales a {
	padding: 0.5em 1.3em;
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 700;
	font-size: 14.4px;
	text-decoration: none;
}

.entry-content .redes-sociales a:hover {
	background: var(--wp--preset--color--naranja);
	color: var(--wp--preset--color--verde-osc);
}

/* Fondo del hero — degradado, no color plano
 * `.hero{background:linear-gradient(135deg,#f4f8ee 0%,var(--verde-claro) 100%)}`.
 * Con un verde suave plano el hero pierde la profundidad que le da el degradado
 * y el titular se lee sobre un tono más oscuro del que debería. */
.hero-portada {
	background: linear-gradient(135deg, #f4f8ee 0%, #eaf5df 100%);
}

/* Texto de cuerpo dentro de las piezas — `var(--gris)` = #515151
 * La maqueta distingue el texto de una tarjeta del texto corrido: el primero va
 * en gris, no en tinta. Al aplanar las piezas se perdió esa diferencia. */
.tarjeta-servicio p:not(.modalidad),
.ayuda-item p,
.testimonio p {
	color: var(--wp--preset--color--gris);
}

/* Enlaces del pie — #dbe6cd
 * La regla de color general del pie (#c4ceb6, para el texto) estaba ganando
 * también a los enlaces, que la maqueta pinta un tono más claro. */
.site-footer a,
.site-footer .menu-link,
.site-primary-footer-wrap a {
	color: #dbe6cd;
}

/* Franja de Doctoralia — logotipo, valoración y botón en una fila
 * Estaba apilada en vertical y sin el botón. La maqueta la pone en horizontal,
 * que es lo que hace que se lea como un sello de confianza y no como otra
 * sección más. */
.franja-doctoralia .linea-valoracion {
	margin: 0;
	color: var(--wp--preset--color--gris);
}
.franja-doctoralia .linea-valoracion strong { color: var(--wp--preset--color--verde-osc); }

/* Foto del hero de portada — `.hero__media img`
 * La maqueta solo le pone radio y sombra: el tamaño lo decide la columna. La
 * nuestra salía más alta de lo que debía y empujaba el hero 138 px. */
.foto-hero img {
	border-radius: 18px;
	box-shadow: var(--wp--custom--sombra);
	margin-inline: auto;
	max-height: 478px;
	width: auto;
	object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════════════
   RITMO VERTICAL — el relleno de sección, adaptable
   ═══════════════════════════════════════════════════════════════════════

   Los presets de espaciado del núcleo son FIJOS: `spacing|80` son 86 px lo
   mismo a 1440 que a 768. La maqueta usa un ritmo adaptable —
   `.seccion{padding:clamp(48px,7vw,86px) 0}`— que a 768 pide 54 px. Poner 86
   donde van 54, multiplicado por siete secciones, eran más de 300 px de alto
   sobrante solo en la portada, y otro tanto en cada una de las dieciséis.

   Se intentó declararlo en `tokens/defabula.json` como `settings.spacing.
   spacingSizes` y NO prende: con un tema clásico, el theme.json inyectado no
   reemplaza los presets de espaciado del núcleo. Comprobado midiendo la
   variable en la web, no supuesto.

   Así que se redefinen las variables aquí. Es una regla, funciona, y el marcado
   no cambia: las 142 apariciones de `var(--wp--preset--spacing--70)` siguen
   valiendo y ahora son adaptables.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
	--wp--preset--spacing--70: clamp(48px, 7vw, 86px);
	--wp--preset--spacing--80: clamp(48px, 7vw, 86px);
	--wp--preset--spacing--60: clamp(32px, 4.5vw, 56px);
}

/* Hero de categoría — el contenido va DENTRO del contenedor
 *
 * El bloque Cover a ancho completo no limita el ancho de su contenedor interior,
 * así que la miga de pan, el h1 y la entradilla salían pegadas al borde de la
 * ventana (x=17) cuando la maqueta las alinea con el resto de la página (x=152).
 * `.cat-hero__inner{max-width:var(--max);margin:0 auto;padding:2.4rem 22px}`. */
/* Especificidad: Astra declara `.ast-page-builder-template
 * .entry-content[data-ast-blocks-layout] > * { max-width: none }` —dos clases y
 * un atributo— y se llevaba por delante el ancho de este contenedor. Se iguala
 * anteponiendo `.entry-content`. */
/* El contenido del hero se centra en 1180px, como en la maqueta.
   La clase va DUPLICADA a propósito: hay que superar dos reglas ajenas a la vez.
     · Astra  `.entry-content[data-ast-blocks-layout] > .wp-block-cover …`  0-4-0  max-width:none
     · Núcleo `.wp-block-cover.has-custom-content-position.has-custom…`     0-5-0  width:auto
   Con .hero-categoria repetida esta regla suma 0-6-0 y gana a las dos sin `!important`
   y sin depender del orden de carga. Medido, no supuesto. */
.entry-content .wp-block-cover.hero-categoria.hero-categoria.has-custom-content-position > .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding: 38px 22px;
}

/* Dentro del hero NADA se centra solo. La disposición «constrained» del núcleo pone
   `margin-left:auto;margin-right:auto` a todo hijo que tenga ancho máximo, así que la entradilla
   —60ch— se iba 246 px a la derecha del titular (medido: marginLeft 245.797px).

   El `!important` es OBLIGATORIO aquí, no es pereza: el núcleo emite esa regla como
       .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
       { margin-left: auto !important; margin-right: auto !important }
   Comprobado con getPropertyPriority(): vale "important". Al ir dentro de :where() la regla tiene
   especificidad 0-1-0, así que parece fácil de ganar y NO LO ES: contra `!important` la
   especificidad no decide. La única alternativa seria quitar el ancho máximo del hijo, y entonces
   la entradilla perdería su medida de 60ch. */
.entry-content .wp-block-cover.hero-categoria.hero-categoria .wp-block-cover__inner-container > * {
	margin-inline: 0 !important;
}

/* Los huecos verticales de la maqueta, no el `blockGap` de 24 px del núcleo:
   migas 12.8px y titular 8px, pasados a píxeles por la regla de la raíz de 17px. */
.entry-content .wp-block-cover.hero-categoria.hero-categoria .wp-block-cover__inner-container > * {
	margin-block: 0 13px;
}
.entry-content .wp-block-cover.hero-categoria.hero-categoria .wp-block-cover__inner-container > h1 {
	margin-block: 0 8px;
}
.entry-content .wp-block-cover.hero-categoria.hero-categoria .wp-block-cover__inner-container > *:last-child {
	margin-block-end: 0;
}

/* El formulario no lleva caja
 *
 * SureForms envuelve el formulario en `.srfm-form-container.srfm-bg` con fondo
 * blanco propio. La maqueta lo pone directamente sobre el fondo de la sección, y
 * esa caja blanca parchea la composición. */
.srfm-form-container,
.srfm-form-container.srfm-bg {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding-left: 0;
	padding-right: 0;
}

/* Botón de volver arriba — la maqueta NO lo tiene
 *
 * Astra lo añade por su cuenta y se solapa con el botón de WhatsApp: los dos
 * viven en la esquina inferior derecha, uno a 1360 y otro a 1379. El diseño no
 * incluye ese botón, así que se quita; con eso desaparece el solape sin mover
 * el de WhatsApp, que sí está en el diseño. */
#ast-scroll-top,
.ast-scroll-top-icon,
.ast-scroll-to-top-right {
	display: none !important;
}

/* Alineación de las bandas centradas
 *
 * La regla anterior solo centraba tres hijos directos —antetítulo, h2 y
 * entradilla— y dejaba fuera los párrafos y los botones. En la portada todo va
 * centrado, así que el botón «Te cuento mi historia» y el texto del destacado
 * salían a la izquierda rompiendo el eje. */
/* ⚠️ Aquí ponía `.seccion-centrada > *`, y eso centró TODO: la columna de datos
 * de contacto y las etiquetas del formulario incluidas. Centrar el titular de
 * una sección no significa centrar su contenido.
 *
 * Se centra solo el encabezado de la banda —antetítulo, título, entradilla y los
 * botones que van sueltos debajo—, y las columnas conservan su alineación. */
.seccion-centrada > .antetitulo,
.seccion-centrada > h2,
.seccion-centrada > .intro-seccion,
.seccion-centrada > p:not(.modalidad),
.seccion-centrada > .wp-block-buttons {
	text-align: center;
	justify-content: center;
}

/* El destacado y las tarjetas mantienen su texto a la izquierda: son piezas con
 * su propia composición, no párrafos de la sección. */
.seccion-centrada .destacado,
.seccion-centrada .tarjeta-servicio,
.seccion-centrada .testimonio,
.seccion-centrada .wp-block-columns,
.seccion-centrada .srfm-form {
	text-align: left;
}


/* ═══ Sección de contacto ═════════════════════════════════════════════ */

/* Datos de contacto — icono + etiqueta en una línea, valor debajo
 * La maqueta usa `.contacto__datos li{display:flex;gap:.8rem}` con el icono a
 * 20 px en verde y la etiqueta en negrita. Aplanado salían encabezados grandes
 * en oliva, que se leen como títulos de sección y no como etiquetas de dato. */
.dato-contacto {
	display: flex;
	gap: 12.8px;
	align-items: flex-start;
	margin-bottom: 16px;
	color: #41473a;
}

.dato-contacto .wp-block-icon,
.dato-contacto .wp-block-icon svg {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--wp--preset--color--verde);
}

.entry-content .dato-contacto__etiqueta {
	font-family: var(--wp--preset--font-family--texto);
	font-weight: 700;
	font-size: 16px;
	color: var(--wp--preset--color--tinta);
	margin: 0 0 2px;
	line-height: 1.4;
}

.dato-contacto__valor { margin: 0; font-size: 16px; }

/* Tarjeta del mapa — `.mapa-card` */
.tarjeta-mapa {
	display: flex;
	gap: 16px;
	align-items: center;
	background: var(--wp--preset--color--verde-claro);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 12px;
	padding: 19.2px 22.4px;
}

.tarjeta-mapa .wp-block-icon svg { width: 30px; height: 30px; }
.entry-content .tarjeta-mapa a { color: var(--wp--preset--color--verde-osc); font-weight: 700; font-size: 14.4px; }

/* Formulario — los campos de la maqueta
 * `.form input,.form textarea{padding:.8em 1em;border:1.5px solid var(--linea);
 *  border-radius:9px;background:#fff}` y `.form{gap:.9rem}`. */
.srfm-form .srfm-input-common,
.srfm-form textarea,
.srfm-form input[type="text"],
.srfm-form input[type="email"],
.srfm-form input[type="tel"] {
	background: #ffffff !important;
	border: 1.5px solid var(--wp--preset--color--linea) !important;
	border-radius: 9px !important;
	padding-block: 0.8em !important;
	padding-inline-end: 1em !important;
	font-family: inherit;
	font-size: 16px;
	width: 100%;
	box-shadow: none !important;
}

/* El relleno IZQUIERDO va aparte, y nunca en el campo de teléfono.
   `srfm/phone` monta encima el componente intl-tel-input, que coloca su botón de bandera
   en posición absoluta sobre el campo y calcula el relleno izquierdo que necesita para
   dejarle hueco. Un `padding: 0.8em 1em !important` sobre todos los campos se lo pisaba,
   y la bandera y el «+34» quedaban ENCIMA del texto «Teléfono *».
   Medido: el botón ocupa 47 px y el campo tenía 16 px de relleno.
   No hay atributo que quite la bandera: `autoCountry` solo controla la detección
   geográfica del país por defecto, no que el componente exista. Y cambiar a un campo de
   texto simple quitaría el teclado numérico en el móvil. Así que se le deja su sitio. */
.srfm-form textarea,
.srfm-form input[type="text"],
.srfm-form input[type="email"] {
	padding-inline-start: 1em !important;
}


.srfm-form .srfm-input-common:focus,
.srfm-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--oliva);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--oliva) !important;
}

.srfm-form textarea { min-height: 130px; resize: vertical; }
.srfm-form .srfm-block { margin-bottom: 14.4px; }

/* Las etiquetas se ocultan a la vista pero NO al lector de pantalla.
 *
 * La maqueta usa el texto dentro del campo como etiqueta, y eso es un problema
 * de accesibilidad conocido: al escribir desaparece y quien usa lector de
 * pantalla se queda sin referencia. Ocultarla visualmente y dejarla en el
 * marcado da el mismo aspecto SIN el problema. El asterisco de obligatorio va
 * dentro del texto del campo, como en la maqueta. */
/* Ojo: la casilla de consentimiento queda FUERA. Su etiqueta es el texto que
 * lee la persona antes de aceptar; ocultarla sería un problema legal, no de
 * estilo. Por eso se excluye por su contenedor, no solo por su clase. */
.srfm-form .srfm-block:not(.srfm-gdpr-block) .srfm-block-label,
.srfm-form .srfm-input-block-wrap > label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* El botón de envío: verde de marca y a todo el ancho, como la maqueta. */
.srfm-form .srfm-submit-button,
.srfm-form button[type="submit"] {
	background: var(--wp--preset--color--verde) !important;
	color: #ffffff !important;
	border-radius: 9px !important;
	width: 100% !important;
	justify-content: center;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 700;
	font-size: 16px;
	padding: 0.8em 1.5em !important;
	border: 0 !important;
}

.srfm-form .srfm-submit-button:hover {
	background: var(--wp--preset--color--verde-osc) !important;
}

/* ---------------------------------------------------------------------------
   Formulario de SureForms: ritmo vertical de la maqueta
   ---------------------------------------------------------------------------
   SureForms deja 60 px entre campos donde la maqueta deja 14. Son tres sumandos,
   medidos uno a uno sobre la página publicada:
     · `gap: 18px` en el propio formulario
     · `margin-bottom: 14.4px` en cada bloque de campo
     · 28 px dentro del bloque: 6+6 de márgenes del campo y 16 reservados para el
       mensaje de error, que ocupa sitio aunque no haya error
   Con las cuatro reglas el formulario pasa de 626 px a 423; la maqueta mide 419.
   El hueco del error se deja crecer (`height:auto`) en vez de borrarlo: si algún día
   falla la validación, el aviso sigue teniendo dónde aparecer.                   */
.srfm-form {
	gap: 0 !important;
}
.srfm-form .srfm-block {
	margin-bottom: 14px !important;
}
.srfm-form .srfm-input-common {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	min-height: 48px !important;
}
.srfm-form .srfm-error-wrap {
	min-height: 0 !important;
	height: auto !important;
}

/* ---------------------------------------------------------------------------
   Enlaces sin subrayado: SOLO fuera del texto corrido
   ---------------------------------------------------------------------------
   La maqueta pone `a { text-decoration: none }` en todo el sitio y solo subraya
   al pasar el ratón. No se copia tal cual, y el motivo es medible:

     verde de enlace #467d00 contra texto #2a2f25  ->  2,74 : 1

   La WCAG 2.2, criterio 1.4.1, exige 3:1 entre el enlace y el texto que lo rodea
   para poder distinguirlo SOLO por color. 2,74 no llega. Un enlace dentro de un
   párrafo, sin subrayado y con ese verde, es invisible para quien no distingue
   bien los colores — y esta web publica una declaración de accesibilidad.

   El criterio habla de enlaces DENTRO de un bloque de texto. Los que van solos
   —un dato de contacto, una tarjeta— se distinguen por su sitio, no por su color,
   así que ahí sí se copia la maqueta.                                            */
/* El selector lleva `.ast-single-post .entry-content` porque eso es exactamente lo que
   escribe Astra para subrayar los enlaces del contenido (0-2-1), y `.dato-contacto a`
   (0-1-1) pierde. Se comprobó regla a regla sobre la página publicada. */
.ast-single-post .entry-content .dato-contacto a,
.ast-single-post .entry-content .tarjeta-mapa a,
.ast-single-post .entry-content .enlace-mapa a,
.dato-contacto a,
.tarjeta-mapa a,
.enlace-mapa a {
	text-decoration: none;
}
.dato-contacto a:hover,
.dato-contacto a:focus-visible,
.tarjeta-mapa a:hover,
.tarjeta-mapa a:focus-visible,
.enlace-mapa a:hover,
.enlace-mapa a:focus-visible {
	text-decoration: underline;
}

/* Menú legal del pie: 24 px de alto mínimo por dedo.
   WCAG 2.2 AA, criterio 2.5.8 «Target Size (Minimum)»: 24x24 px CSS. Estos enlaces
   medían 132x22 porque su altura la fijaba la altura de línea (22,3 px) y no llevaban
   relleno. No entran en ninguna de las excepciones del criterio: no van dentro de una
   frase ni están ocultos hasta recibir el foco — son un menú.
   Se resuelve con relleno vertical, no agrandando la letra, para no tocar el diseño. */
.site-footer .menu-item > .menu-link,
.site-footer .menu-item > a,
.ast-footer-copyright .menu-item > a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding-block: 1px;
}

/* Píldora — `.chips a` de la maqueta. Etiquetas de navegación secundaria bajo un
   titular: los servicios en la portada, las modalidades en una página de servicio.
   Toma el oliva, no la línea gris: son enlaces, tienen que leerse como tales. */
.pildora {
	display: inline-block;
	padding: 5.6px 14px;
	border: 1.5px solid var(--wp--preset--color--oliva);
	border-radius: 30px;
	color: var(--wp--preset--color--oliva);
	font-family: var(--wp--preset--font-family--texto);
	font-weight: 600;
	font-size: 14.08px;
	line-height: 1.5;
	text-decoration: none;
}
.pildora:hover,
.pildora:focus-visible {
	background: var(--wp--preset--color--oliva);
	color: #ffffff;
}

/* Hero de portada — el relleno es SUYO, no el del token general.
   La maqueta usa `clamp(40px, 6vw, 72px)` en `.hero__grid`; el token de espaciado 70
   del sistema da 86px a 1440. Son 28px de más en el alto de la sección.
   Se pone aquí y no en el token porque el token gobierna las otras ocho secciones de
   la portada y moverlo para arreglar una rompería las demás. */
.hero-portada {
	padding-block: clamp(40px, 6vw, 72px) !important;
}

/* Ritmo vertical del hero de portada, tomado de la maqueta y pasado a píxeles:
     sello  -> titular   18px   (`.hero__badge{margin-bottom:1.1rem}`)
     píldoras al grupo   21px   (`.chips{margin:1.3rem 0 0}`)
   Sin esto manda el `blockGap` del núcleo, que son 24px iguales para todo y deja
   26px de más entre el sello y el titular. */
.hero-portada .sello-hero {
	margin-block: 0 18px;
}
.hero-portada h1 {
	margin-block-start: 0;
}
.hero-portada .pildora {
	margin-block-start: 21px;
}
.hero-portada .pildora ~ .pildora {
	margin-block-start: 21px;
}

/* En móvil, la foto va ANTES que el texto. La maqueta lo hace con `order:-1` en
   `.hero__media`, y no es un capricho de maquetación: en un teléfono la primera
   pantalla es casi toda la cabecera, y lo que tiene que aparecer es la cara de la
   terapeuta, no un párrafo. WordPress apila las columnas en el orden del marcado,
   así que hay que invertirlo aquí.
   El corte es el mismo que usa el núcleo para apilar columnas (781px). */
@media (max-width: 781px) {
	.hero-portada .wp-block-columns {
		flex-direction: column-reverse;
	}
}

/* Botón de la cabecera de Astra. Su marcado es
       <a class="ast-custom-button-link"><div class="ast-custom-button">Texto</div></a>
   y el relleno lo pone Astra en el DIV, desde el ajuste `section-hb-button-1-padding`
   del perfil. Si además se lo pone uno al enlace, se suma dos veces: el botón pasaba
   de los 119x42 de la maqueta a 183x76, y en la cabecera se veía enorme.
   Aquí solo van tipografía y forma; la medida vive en el perfil, que es su sitio. */
.site-header .ast-custom-button-link,
.ast-header-button-1 .ast-custom-button-link {
	padding: 0;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 700;
	font-size: 15.7px;
	line-height: 1;
}
.site-header .ast-custom-button-link .ast-custom-button {
	line-height: 1;
}

/* Cabecera: el logotipo cabe dentro del alto de barra que fija el perfil.
   Astra deja `padding: 17px 0` en `.site-branding` —1rem sobre una raíz de 17px—, así
   que el logotipo de 53px hacía una barra de 87 cuando `hb-header-height` dice 68.
   Un ajuste de altura que el contenido desborda no sirve de nada.
   No hay opción de Personalizador para esto: se comprobó contra
   `Astra_Theme_Options::defaults()` y no existe ninguna clave de relleno de logotipo,
   así que va aquí y no en el perfil.
   El selector es `.ast-site-identity`, NO `.site-branding`: es el mismo elemento y lleva
   las dos clases, pero Astra escribe `.ast-logo-title-inline .ast-site-identity` (0-2-0)
   y una regla sobre `.site-branding` (0-1-0) pierde. Medido. */
.ast-hfb-header .ast-site-identity,
.ast-logo-title-inline .ast-site-identity {
	padding-block: 7px;
}

/* Cabecera fija al hacer scroll, como la maqueta (`position:sticky; top:0; z-index:60`).
   Astra solo trae cabecera fija en su versión de pago, así que va aquí — y no es un
   adorno: sin esto, en un teléfono se pierde el menú en cuanto bajas una pantalla, y
   volver arriba para navegar es la primera causa de abandono en una web de servicios.
   La barra de administración de WordPress mide 32px en escritorio y 46 en móvil, así que
   la cabecera se descuelga por debajo de ella cuando hay sesión iniciada; si no, se
   quedaría tapada al editar. */
#masthead {
	position: sticky;
	top: 0;
	z-index: 60;
}
.admin-bar #masthead {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar #masthead {
		top: 46px;
	}
}
/* Al tabular, el elemento enfocado no puede quedar tapado por la cabecera fija (109px en
   escritorio, 98 en móvil) ni, en móvil, por el botón flotante: foco-visible.css lee estos
   márgenes de desplazamiento y les suma 16px de aire para el anillo. */
html {
	--sempatiza-scroll-arriba: 125px;
}
@media (max-width: 921px) {
	html {
		--sempatiza-scroll-arriba: 114px;
		--sempatiza-scroll-abajo: 96px;
	}
}

/* El icono de la banda no lleva el círculo de 84px de la rejilla: aquí va suelto y a su
   tamaño, como en la maqueta (`.ayuda__ico` con `margin:0`). Se reutiliza la clase para
   no inventar otra, y se le quitan el fondo y el tamaño fijo. */
.aviso-linea > .icono-circulo {
	width: auto;
	height: auto;
	background: none;
	margin: 0;
	padding: 0;
}

/* Sección estrecha — la maqueta baja el contenedor a 760px en las secciones que son
   solo texto («Me presento», llamadas a la acción). Es una decisión de legibilidad, no
   de estética: un párrafo a 1136px pasa de los 90 caracteres por línea y el ojo pierde
   el renglón al volver. A 760px se queda en unos 75. */
.seccion-estrecha > :where(:not(.alignfull):not(.alignwide)) {
	max-width: 760px !important;
	margin-inline: auto !important;
}

/* Destacado: dos columnas, panel del icono a la izquierda. La maqueta usa
   `grid-template-columns: auto 1fr` con 38.4px de hueco, y el icono va dentro de un
   panel verde claro de 200px de alto mínimo. En móvil pasa a una columna. */
.destacado {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 38.4px;
	align-items: center;
}
.destacado__panel {
	background: var(--wp--preset--color--verde-claro);
	border-radius: 12px;
	min-height: 200px;
	width: 120px;
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--verde-logo);
}
@media (max-width: 781px) {
	.destacado { grid-template-columns: 1fr; }
	.destacado__panel { min-height: 120px; width: 100%; }
}
/* La cita del destacado va en píxeles, no en rem: `margin: 0 0 1rem` sobre una raíz de
   17px daría 17 y la maqueta calcula 16. */
.entry-content .destacado .cita-destacada { margin: 0 0 16px; }

/* El bloque Cita del núcleo pinta un filete vertical a la izquierda. Dentro del
   destacado sobra: la tarjeta ya tiene el suyo en naranja, y dos filetes seguidos
   compiten. La maqueta usa un `blockquote` sin borde. */
.destacado .cita-destacada {
	border: 0;
	padding-left: 0;
}

/* ===========================================================================
   CAUSAS COMUNES — arreglar una vez en vez de seis veces el mismo síntoma
   ===========================================================================
   Salieron de auditar las seis secciones restantes a la vez, en vez de una a una.
   Cada una afectaba a varias secciones y yo las estaba corrigiendo por separado.
   Todas verificadas midiendo maqueta contra web antes de escribirlas.            */

/* C4 · Interlineado 1,65, no 1,7.
   La maqueta declara `body{line-height:1.65}` y Astra sirve 1,7. Son 0,85px por
   línea, que no se ven en un párrafo y suman 45px en una sección larga: es la mitad
   de las diferencias de alto que llevo persiguiendo sección a sección. */
body,
.entry-content {
	line-height: 1.65;
}

/* C5 · Sombra fantasma en los botones.
   Astra pone `box-shadow: rgba(0,0,0,.05) 0 1px 2px` a todo botón y la hoja de
   componentes NO declara `box-shadow`, así que no es que pierda: es que no compite.
   Se nota poco sobre fondo claro y bastante sobre el verde oscuro. */
.entry-content .wp-block-button__link,
.wp-block-button__link,
.ast-custom-button-link,
.ast-button {
	box-shadow: none;
}

/* C6 · Astra gana a las citas con un selector `:not()`.
   `.wp-block-quote:not(.has-text-align-right):not(.has-text-align-center)` suma 0-3-0
   y le gana tanto a nuestra regla como al filete naranja de theme.json: TODAS las citas
   del sitio salían con un filete gris de 5px, no solo la del destacado. */
.entry-content .wp-block-quote:not(.has-text-align-right):not(.has-text-align-center) {
	border-left: 4px solid var(--wp--preset--color--naranja);
	padding-left: 20px;
}
.entry-content .destacado .wp-block-quote:not(.has-text-align-right):not(.has-text-align-center) {
	border-left: 0;
	padding-left: 0;
}

/* C2 + C1 · El margen de los párrafos y el hueco entre bloques, juntos.
   Van juntos a la fuerza: `.entry-content p{margin-bottom:1.6em}` de Astra (0-1-1) gana
   a cualquier regla nuestra de una sola clase, y el `margin-block-start:24px` del
   layout constrained se suma por arriba. Arreglar solo una no cambia nada, porque el
   mayor de los dos manda.
   La maqueta: antetítulo 6,4px hasta el titular, y 16px entre párrafos. */
.entry-content .antetitulo {
	margin-bottom: 6.4px;
}
.entry-content .antetitulo + h2,
.entry-content .antetitulo + h3 {
	margin-block-start: 0;
}
.entry-content .dato-contacto__valor,
.entry-content .dato-contacto__etiqueta {
	margin-bottom: 0;
}
.entry-content .tarjeta-mapa p,
.entry-content .dato-contacto p {
	margin-block-start: 0;
}

/* C3 · Relleno lateral en móvil: 22px, como la maqueta.
   Astra calcula el suyo con `1.5em` sobre la raíz de 17px = 25,5. Son 7px de ancho útil
   en cada pantalla de teléfono, y en una sección hacían que una entradilla partiera en
   dos líneas donde la maqueta la deja en una. */
@media (max-width: 781px) {
	:root {
		--wp--custom--ast-default-block-left-padding: 22px;
		--wp--custom--ast-default-block-right-padding: 22px;
	}
}

/* Hero de página interior: el aspecto en las clases, no dentro del bloque.
   Las diez páginas llevaban el color y el tamaño escritos en el atributo `style` de cada
   bloque: `#cdd8c1`, `#eaf1e1`, `0.9rem`, `clamp(2rem,4vw,2.7rem)`. Eso ata la pieza a
   ESTA marca —cambiar de cliente obligaría a editar diez páginas a mano— y además mete
   dos `rem` calculados sobre una raíz de 16 en un tema que usa 17.
   Los valores son los mismos, en píxeles y con nombre. */
/* El selector lleva `.entry-content` porque sin él el color pierde: el texto del hero
   salía en verde oscuro sobre la foto, ilegible. Medido sobre la página publicada.
   Y el titular NO lleva tamaño propio: el h1 del tema ya mide lo que la maqueta
   (49,6px), y ponerle un `clamp` encima lo dejaba en 43,2. */
/* El rival es `body .wp-block-cover:not(.has-text-color.has-link-color) p`, que suma
   0-3-2 porque los argumentos de `:not()` SÍ cuentan (a diferencia de `:where()`, que
   vale cero). Contra eso, `.entry-content .hero-categoria .hero-migas` (0-3-0) pierde y
   el texto del hero salía en verde oscuro sobre la foto: ilegible.
   Con `.wp-block-cover` y el selector de etiqueta suma 0-4-1 y gana. */
.entry-content .wp-block-cover.hero-categoria p.hero-migas {
	color: #cdd8c1;
	font-size: 13.12px;     /* .82rem sobre raíz de 16 */
}
.entry-content .wp-block-cover.hero-categoria p.hero-migas a {
	color: #e6efdd;
}
.entry-content .hero-categoria h1 {
	color: #ffffff;
	line-height: 1.15;
}
.entry-content .wp-block-cover.hero-categoria p.entradilla {
	color: #eaf1e1;
	font-size: 17.9px;      /* 1.12rem */
	max-width: 60ch;
}

/* ===========================================================================
   CC-4 y CC-5 · El ritmo del texto corrido
   ===========================================================================
   Salieron de auditar las 16 páginas interiores. Son de sitio y valen unos 134 px de
   alto por página, que es el motivo principal de que los altos no cuadraran.

   La maqueta:
     p          margin: 0 0 1rem       ->  16px
     h1..h4     margin: 0 0 .5em       ->  medio tamaño de su propia letra
     .prose h2  margin-top: 2.2rem     ->  35.2px
     .prose h3  margin-top: 1.4rem     ->  22.4px

   Nuestro: `.entry-content p{margin-bottom:1.6em}` de Astra da 27,2 sobre raíz de 17, y
   encima el `blockGap` del layout constrained mete 24px por arriba. **Manda el mayor**,
   así que hay que anular los DOS. Anular solo uno no cambia nada y lleva a concluir —en
   falso— que la regla no aplica.

   No se toca el `blockGap` global: se anula solo donde hay texto corrido.               */
.entry-content > p,
.entry-content .prosa p,
.entry-content .wp-block-group > p {
	margin-block-start: 0;
	margin-block-end: 16px;
}
.entry-content > h2,
.entry-content .prosa h2,
.entry-content .wp-block-group > h2 {
	margin-block-start: 35.2px;
	margin-block-end: 19.2px;
}
.entry-content > h3,
.entry-content .prosa h3,
.entry-content .wp-block-group > h3 {
	margin-block-start: 22.4px;
	margin-block-end: 0.5em;
}
/* Las secciones que ya tienen su propio ritmo escrito quedan fuera: si no, esta regla
   les pisa lo que se midió una a una. */
/* Las piezas que ya tienen su ritmo medido quedan fuera, y hay que anular los DOS
   márgenes: la primera versión solo quitaba el de arriba y la regla de prosa le metía
   16px por abajo a cada dato de contacto. La sección de contacto pasó de 591 a 762px.
   Un arreglo de alcance de sitio puede romper una pieza ya validada: por eso se remide
   TODO después, no solo lo que se ha tocado. */
.entry-content .hero-portada p,
.entry-content .hero-categoria p,
.entry-content .tarjeta-servicio p,
.entry-content .dato-contacto p,
.entry-content .tarjeta-mapa p,
.entry-content .testimonio p,
.entry-content .aviso-linea p,
.entry-content .destacado p,
.entry-content .srfm-form p {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Entradilla grande — el primer párrafo de una página que aún no tiene contenido, o el
   que abre un apartado. La maqueta usa `1.15rem`. */
.entry-content .entradilla-grande {
	font-size: 18.4px;
}

/* Ficha de persona — el retrato y lo que acredita, en la primera pantalla de su página.
   La maqueta pone a la terapeuta como una de tres en «quiénes estamos detrás», con el
   retrato a 120px y en escala de grises. En su propia página eso la convierte en una
   colaboradora más: quien llega buscando a alguien concreto no encuentra a nadie.
   Aquí el retrato manda y los datos que acreditan van al lado, no enterrados en el texto. */
.ficha-persona .wp-block-image img {
	width: 100%;
	max-width: 300px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}
.entry-content .ficha-persona h2 {
	margin-block: 0 4px;
}
.entry-content .ficha-persona__cargo {
	font-family: var(--wp--preset--font-family--texto);
	font-size: 17px;
	color: var(--wp--preset--color--oliva);
	margin-block: 0 20px;
}
.ficha-persona .dato-contacto {
	margin-bottom: 12px;
}
@media (max-width: 781px) {
	.ficha-persona .wp-block-image img { max-width: 220px; margin-inline: auto; }
}