/**
 * Bellamar — web · hoja de marca
 *
 * Se encola después de la del padre. Aquí sólo vive lo que la maqueta pide y
 * theme.json no puede expresar: la cabecera azul, el pie, el rótulo con su
 * filete, las cursivas azules de los titulares y los ajustes de los bloques del
 * padre para que respiren como en el diseño.
 *
 * Orden del archivo:
 *   1. Base y utilidades      4. Bloques del padre
 *   2. Cabecera               5. Blog
 *   3. Pie                    6. Móvil
 */

/* ── 1. Base y utilidades ────────────────────────────────────────────────── */

/* Enlace de salto: sólo aparece al tabular, que es cuando sirve. */
.bellamar-saltar {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 8px 0;
	background: var( --wp--preset--color--navy );
	color: #fff;
	font-size: var( --wp--preset--font-size--sm );
}

.bellamar-saltar:focus {
	left: 0;
	top: 0;
	color: #fff;
}

/* La cursiva dentro de un titular es la segunda línea azul de la maqueta. Se
   escribe con el botón de cursiva del editor, así que no hace falta explicar
   ninguna clase a quien redacta. */
.bellamar-main h1 em,
.bellamar-main h2 em,
.bellamar-main h3 em,
.wp-block-post-content h2 em {
	color: var( --wp--preset--color--primary );
	font-style: italic;
}

/* El rótulo pequeño en versales con su filete debajo. */
.bellamar-rotulo {
	margin-bottom: 0.5rem;
	color: var( --wp--preset--color--navy );
	font-size: var( --wp--preset--font-size--sm );
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bellamar-rotulo::after {
	content: "";
	display: block;
	width: 4rem;
	height: 1px;
	margin-top: 0.5rem;
	background: var( --wp--preset--color--primary );
}

.bellamar-main {
	padding-bottom: 0;
}

/* Cabecera de las páginas que sí llevan título (legales, blog, 404). */
.bellamar-cabecera-pagina {
	padding-block: clamp( 2.5rem, 6vw, 5rem ) clamp( 1.5rem, 3vw, 2.5rem );
}

.bellamar-cabecera-pagina h1 {
	margin: 0;
}

/* Los dos botones de contacto, uno debajo del otro y a la misma anchura. */
.bellamar-botones-contacto .wp-block-button {
	width: 100%;
}

.bellamar-botones-contacto .wp-block-button__link {
	display: block;
	text-align: center;
}

/* Un botón salmón: el CTA de la cabecera y algún destacado suelto. */
.wp-block-button.is-style-salmon > .wp-block-button__link {
	background-color: var( --wp--preset--color--accent );
	/* Azul profundo: sobre el salmón, el azul noche se queda en 3,7:1. */
	color: var( --wp--preset--color--deep );
}

.wp-block-button.is-style-salmon > .wp-block-button__link:hover,
.wp-block-button.is-style-salmon > .wp-block-button__link:focus-visible {
	background-color: #e57c69;
	color: var( --wp--preset--color--deep );
}

/* ── 2. Cabecera ─────────────────────────────────────────────────────────── */

/* `relative` y `z-index` no son decoración: el panel de «Adicciones» se
   coloca respecto a esta caja para salir a ancho completo, y tiene que pintarse
   por encima de la primera sección de la página. */
.bellamar-header {
	position: relative;
	z-index: 50;
	background: linear-gradient( 90deg, #2f4166 0%, #384b71 45%, #5a73b8 100% );
	color: #fff;
	padding-block: 0;
	padding-inline: var( --wp--preset--spacing--40 );
}

.bellamar-header a {
	color: #fff;
}

.bellamar-header a:hover,
.bellamar-header a:focus-visible {
	color: var( --wp--preset--color--text-light );
}

.bellamar-header__inner {
	gap: var( --wp--preset--spacing--40 );
	min-height: 120px;
}

.bellamar-header .wp-block-site-logo img {
	width: 236px;
	max-width: 60vw;
	height: auto;
}

.bellamar-header__derecha {
	gap: 0.5rem;
	align-items: flex-end;
}

.bellamar-header__telefono {
	margin: 0;
	line-height: 1.7142;
	color: var( --wp--preset--color--text-light );
}

/* El número es un enlace suelto —no va dentro de una frase—, así que le toca el
   mínimo de 24 px de alto. Se consigue con inline-flex sin tocar la caja de
   alrededor, que son justo esos 24 y fija el alto de la cabecera. */
.bellamar-header__telefono a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* ── 3. Pie ──────────────────────────────────────────────────────────────── */

/* El pie son dos bandas: la principal en azul noche y, debajo, la legal en el
   azul profundo. La maqueta las dibuja así en las veintidós páginas. */
.bellamar-footer {
	background: var( --wp--preset--color--navy );
	color: #fff;
}

.bellamar-footer__principal {
	padding: 3rem var( --wp--preset--spacing--40 ) 3.75rem;
}

/* Las dos bandas van pegadas. WordPress mete su espaciado entre los hijos de un
   grupo en flujo y aquí abría una junta de 24 px entre el azul noche y el azul
   profundo; se nombra al hijo directo para ganarle. */
.bellamar-footer > .bellamar-footer__legal {
	margin-block-start: 0;
}

/* Las tres columnas de enlaces miden lo que mide su texto más largo —99, 126 y
   215 px en la maqueta—, no un tercio cada una. El hueco de 88 px las deja en
   la misma vertical que el lienzo, y lo que sobra a la derecha es justo el
   sitio de la burbuja de WhatsApp. */
.bellamar-footer__columnas {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 2.5rem 5.5rem;
}

.bellamar-footer__columnas > .bellamar-footer__marca {
	flex: 0 0 224px;
	max-width: 100%;
}

.bellamar-footer__columnas > .bellamar-footer__columna {
	flex: 0 0 auto;
}

/* WordPress imprime `.wp-container-x > * { margin: 0 }` para los grupos flex
   después de esta hoja, así que el margen automático hay que ponerlo nombrando
   al hijo directo: si no, se lo come y la burbuja se pega a la última columna. */
.bellamar-footer__columnas > .bellamar-footer__whatsapp {
	margin-left: auto;
}

.bellamar-footer a {
	color: #fff;
	text-decoration: none;
}

.bellamar-footer a:hover,
.bellamar-footer a:focus-visible {
	color: var( --wp--preset--color--text-light );
	text-decoration: underline;
}

.bellamar-footer p {
	color: #fff;
	line-height: 1.7142;
}

/* El rótulo de la sede va en salmón. El de la maqueta (#F08F7E) sobre el azul
   noche se queda en 3,70:1 y esto es texto de 14: aquí se aclara hasta pasar
   el 4,5:1. A ojo es el mismo salmón. */
/* Los datos de contacto: una columna con los 24 px de separación de siempre,
   y 32 bajo el logotipo, como en el lienzo. Antes esto lo hacía el espaciado
   entre bloques; ahora los pinta bellamar/datos-contacto desde los ajustes y la
   separación la pone su propia caja. */
.bellamar-footer__marca > .bellamar-datos-contacto {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-block-start: 2rem;
}

.bellamar-datos-contacto > p {
	margin: 0;
}

.bellamar-footer__rotulo {
	color: var( --wp--preset--color--accent-claro ) !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bellamar-footer__titulo {
	margin: 0 0 0.5rem;
	color: #fff;
	font-family: var( --wp--preset--font-family--display );
	font-weight: 400;
}

.bellamar-footer__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
	font-size: var( --wp--preset--font-size--sm );
}

.bellamar-footer__lista li {
	margin: 0;
}

.bellamar-footer__lista a {
	display: flex;
	align-items: center;
	min-height: 40px;
	line-height: 1.7142;
}

.bellamar-footer__redes {
	margin-top: 1rem;
}

/* La burbuja de WhatsApp: 72 px, arriba a la derecha del pie, a la altura del
   logotipo. Sale en las veintidós páginas del lienzo. */
.bellamar-footer__whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var( --wp--preset--color--whatsapp );
	color: #0b3d1f;
}

.bellamar-footer__whatsapp:hover,
.bellamar-footer__whatsapp:focus-visible {
	background: #1fbe5b;
	color: #0b3d1f;
}

.bellamar-footer__whatsapp svg {
	width: 36px;
	height: 36px;
	fill: currentColor;
}

/* La banda legal: 64 px de alto, en el azul profundo, a todo el ancho. */
.bellamar-footer__legal {
	padding: 0.75rem var( --wp--preset--spacing--40 );
	background: var( --wp--preset--color--deep );
}

.bellamar-footer__legal-fila {
	align-items: center;
	min-height: 2.5rem;
	gap: 1rem;
}

.bellamar-footer__legal p {
	margin: 0;
}

/* ── 4. Bloques del padre ────────────────────────────────────────────────── */

/* La maqueta alterna secciones blancas y azuladas con mucho aire alrededor.
   Los bloques del padre traen su propio padding vertical; aquí se iguala al de
   la maqueta (120px en escritorio) sin tocar el tema padre. */
.bellamar-main > .wp-block-group > [class*="wp-block-vidaytu-"],
.bellamar-main > [class*="wp-block-vidaytu-"],
.wp-block-post-content > [class*="wp-block-vidaytu-"] {
	padding-block: var( --wp--custom--seccion--padding );
}

/* Titulares de sección: Newsreader, tamaño de la maqueta y sin negrita. Los
   bloques del padre pintan el suyo con su propia clase `…__heading`, así que
   hace falta nombrarla: no basta con el selector de etiqueta. */
[class*="wp-block-vidaytu-"] h2,
[class*="wp-block-vidaytu-"] [class*="__heading"] {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xxxl );
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0;
}

/* Los títulos de tarjeta de la maqueta son serif de 24 y en azul noche.

   Ojo con el gancho: tiene que ser "wp-block-vidaytu-", no "vidaytu-" a secas.
   El padre marca el <html> con class="vidaytu-base" y el <body> con
   "wp-theme-vidaytu-base", así que [class*="vidaytu-"] h3 coincidía con todos
   los h3 del documento y pintaba de azul noche los títulos del pie, que van
   sobre fondo azul noche: desaparecían. */
[class*="wp-block-vidaytu-"] h3 {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 400;
	color: var( --wp--preset--color--navy );
}

/* Los botones que pintan los bloques del padre usan su propio azulón. Se les
   pone el tono fuerte por lo mismo que a los demás: blanco sobre el azulón
   claro se queda en 2,96:1 y un botón no se lee. */
[class*="wp-block-vidaytu-"] [class*="__cta--button"],
[class*="wp-block-vidaytu-"] .wp-block-button__link {
	background-color: var( --wp--preset--color--primary-fuerte );
	color: #fff;
}

[class*="wp-block-vidaytu-"] [class*="__cta--button"]:hover,
[class*="wp-block-vidaytu-"] .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--primary-hover );
	color: #fff;
}

/* Las fichas con icono: tarjeta blanca, esquinas de 16 y sin sombra, como en
   la maqueta —la profundidad la da el fondo azulado de la sección. */
.vidaytu-fichas-icon-cards__card {
	border-radius: 16px;
}

/* El rótulo (kicker) de los bloques del padre se pinta como el de la casa. */
[class*="wp-block-vidaytu-"] [class*="__kicker"] {
	color: var( --wp--preset--color--navy );
	font-size: var( --wp--preset--font-size--sm );
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

[class*="wp-block-vidaytu-"] [class*="__kicker"]::after {
	content: "";
	display: block;
	width: 4rem;
	height: 1px;
	margin-top: 0.5rem;
	background: var( --wp--preset--color--primary );
}

/* Centrada, la rayita tiene que ir centrada también. */
[class*="wp-block-vidaytu-"].is-header-center [class*="__kicker"]::after {
	margin-inline: auto;
}

/* Imágenes de los bloques del padre: mismas esquinas que la maqueta.
   OJO: el <html> lleva la clase `vidaytu-base`, así que este selector alcanza a
   TODAS las imágenes de la página, no sólo a las de esos bloques. Se deja
   porque la maqueta redondea también las suyas, pero cualquier imagen que no
   deba llevar esquinas hay que excluirla a mano. */
[class*="wp-block-vidaytu-"] img {
	border-radius: 16px;
}

/* La banda de cifras y las secciones sobre fondo azul necesitan texto claro. */
.vidaytu-imagenes-texto-stat-band.is-bg-navy,
.vidaytu-imagenes-texto-stat-band.is-bg-dark {
	color: #fff;
}

/* Secciones sobre foto a sangre. El velo va aquí y no en el bloque de portada
   porque el degradado cambia según la sección: en los testimonios oscurece de
   arriba abajo para que el texto blanco se lea, y en «apoyo familiar» aclara de
   izquierda a derecha para dejar sitio a la columna de texto. */
.bellamar-testimonios,
.bellamar-foto-texto {
	padding-block: var( --wp--custom--seccion--padding );
	padding-inline: var( --wp--preset--spacing--40 );
}

/* El velo va en el propio velo del bloque de portada (`__background`), que es
   la capa que WordPress coloca entre la foto y el contenido. Pintarlo con un
   ::after del contenedor no funciona: la foto y el contenido tienen z-index
   propios y el pseudoelemento se queda por debajo. */
/* Los tres selectores encadenados no son un capricho: el bloque de portada
   pinta el velo de negro (`.wp-block-cover .has-background-dim`) en una hoja
   que llega después de esta, y con menos peso el degradado quedaría por debajo
   de un rectángulo negro. */
.bellamar-testimonios > .wp-block-cover__background.has-background-dim {
	background-color: transparent;
	background-image: linear-gradient( 180deg, rgba( 56, 75, 113, 0.2 ) 0%, rgba( 56, 75, 113, 0.62 ) 55%, #384b71 100% );
	opacity: 1;
}

/* El blanco tiene que ser sólido donde empieza la columna de texto (al 55%),
   o el titular se lee sobre la foto y deja de leerse. */
.bellamar-foto-texto > .wp-block-cover__background.has-background-dim {
	background-color: transparent;
	background-image: linear-gradient( 90deg, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 0.55 ) 45%, #fff 68% );
	opacity: 1;
}

.bellamar-foto-texto {
	min-height: 48rem;
}

/* El bloque de portada pone el texto en blanco por defecto: sobre el velo
   claro de esta sección hay que devolverlo a la tinta de la casa. */
.bellamar-foto-texto .wp-block-cover__inner-container,
.bellamar-foto-texto .wp-block-cover__inner-container h2,
.bellamar-foto-texto .wp-block-cover__inner-container p {
	color: var( --wp--preset--color--text );
}

.bellamar-foto-texto .wp-block-cover__inner-container .bellamar-rotulo {
	color: var( --wp--preset--color--navy );
}

/* El contenido tiene que quedar por encima del velo. */
.bellamar-testimonios > .wp-block-cover__inner-container,
.bellamar-foto-texto > .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var( --wp--style--global--wide-size, 1104px );
	margin-inline: auto;
}

/* Testimonios: cabecera centrada en blanco sobre la foto del mar. */
.bellamar-testimonios__cabecera {
	text-align: center;
}

.bellamar-testimonios__cabecera .bellamar-rotulo,
.bellamar-testimonios__cabecera h2 {
	color: #fff;
}

/* La segunda línea del titular va en el beige claro de la maqueta, no en el
   azul: sobre el fondo oscuro el azul no se leería. */
.bellamar-testimonios__cabecera h2 em {
	color: var( --wp--preset--color--bg-warm );
}

.bellamar-testimonios__cabecera .bellamar-rotulo::after {
	margin-inline: auto;
	background: #fff;
}

.bellamar-resenas.wp-block-group {
	gap: 2rem;
	margin-top: 4rem;
}

.bellamar-resena {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	border-radius: var( --wp--custom--radius--md );
	background: #fff;
}

.bellamar-resena > * {
	margin: 0;
}

/* Los dos huecos de 24 px de la maqueta —estrellas → título y texto → firma—
   con el hijo directo nombrado para pesar más que el `margin: 0` que WordPress
   imprime, después de esta hoja, para los hijos de cualquier grupo flexible. */
.bellamar-resena > .bellamar-resena__estrellas {
	margin-bottom: 1rem;
}

.bellamar-resena > .bellamar-resena__nombre {
	margin-top: 1rem;
}

/* El hueco de 24 px que la maqueta deja entre las estrellas y el título, y
   entre el texto y la firma. Las demás separaciones son de 8 px. */
.bellamar-resena__estrellas {
	display: flex;
	gap: 4px;
	line-height: 0;
	margin-bottom: 1rem;
	color: var( --wp--preset--color--accent );
}

.bellamar-resena h3 {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 400;
	line-height: 1.33;
	color: var( --wp--preset--color--primary-fuerte );
}

.bellamar-resena__nombre {
	margin-top: 1rem;
	font-weight: 700;
}

@media ( max-width: 781px ) {
	/* En móvil el degradado lateral no deja hueco para nada: la foto ocupa el
	   ancho entero y el texto caería encima de la parte transparente. Se cambia
	   por un velo plano. Va sobre el mismo elemento que el de escritorio —el
	   velo del bloque de portada— y con los mismos tres selectores, porque el
	   bloque pinta su propio velo negro desde una hoja posterior. */
	.bellamar-foto-texto > .wp-block-cover__background.has-background-dim {
		background-image: none;
		background-color: rgba( 255, 255, 255, 0.88 );
	}
}

/* Preguntas frecuentes: el bloque nativo de WordPress, sin JavaScript. */
.bellamar-faq {
	padding-block: var( --wp--custom--seccion--padding );
}

/* La maqueta no dibuja tarjetas aquí: las preguntas son una lista con un filete
   por debajo de cada una, de 24 px de aire arriba y abajo. */
.bellamar-faq .wp-block-details {
	margin-block: 0;
	padding: 1.5rem 0;
	border-bottom: 1px solid #dfe6ff;
	border-radius: 0;
	background: transparent;
}

.bellamar-faq .wp-block-details summary {
	cursor: pointer;
	padding-right: 3rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 400;
	line-height: 1.33;
	color: var( --wp--preset--color--navy );
	list-style: none;
}

.bellamar-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* La flecha del desplegable, dibujada con CSS para no cargar ningún icono. */
.bellamar-faq .wp-block-details summary {
	position: relative;
}

.bellamar-faq .wp-block-details summary::after {
	content: "";
	position: absolute;
	top: 0.5em;
	right: 0.5rem;
	width: 0.5em;
	height: 0.5em;
	border-right: 1.5px solid var( --wp--preset--color--primary );
	border-bottom: 1.5px solid var( --wp--preset--color--primary );
	transform: rotate( 45deg );
	transition: transform 0.2s ease;
}

.bellamar-faq .wp-block-details[ open ] summary::after {
	transform: rotate( -135deg );
}

.bellamar-faq .wp-block-details p {
	margin-top: 1rem;
	color: var( --wp--preset--color--text );
}

/* Tarjetas simples que usan los patrones (señales, equipo, adicciones). */
.bellamar-tarjeta {
	padding: var( --wp--preset--spacing--40 );
	border-radius: 16px;
	background: #fff;
	height: 100%;
}

/* Las dos tarjetas de «qué tratamos» van en los dos tonos de la maqueta. */
.bellamar-tarjeta--suave {
	background: var( --wp--preset--color--bg-soft );
}

.bellamar-tarjeta--calida {
	background: var( --wp--preset--color--bg-warm );
}

.bellamar-tarjeta__icono {
	margin: 0 0 var( --wp--preset--spacing--30 );
	line-height: 0;
	color: var( --wp--preset--color--primary );
}

.bellamar-tarjeta--calida .bellamar-tarjeta__icono {
	color: var( --wp--preset--color--accent );
}

.bellamar-ficha__nombre {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xl );
}

.bellamar-tarjeta h3 {
	margin-top: 0;
}

.bellamar-tarjeta p:last-child {
	margin-bottom: 0;
}

/* Cuando la maqueta pone la foto a la izquierda, el marcado sigue llevando el
   texto primero —en el móvil se lee antes de qué va la página— y aquí se
   invierte sólo a partir de la anchura en la que las columnas dejan de
   apilarse. */
@media ( min-width: 782px ) {
	.bellamar-columnas--foto-izquierda {
		flex-direction: row-reverse;
	}
}

/* El botón «Ver todas las noticias», centrado bajo las dos tarjetas. */
.bellamar-ver-todas.wp-block-buttons {
	margin-top: 4rem;
}

/* Sección con fondo azulado, la alterna de la maqueta. */
.bellamar-seccion {
	padding-block: var( --wp--custom--seccion--padding );
}

.bellamar-seccion--suave {
	background: var( --wp--preset--color--bg-soft );
}

.bellamar-seccion--calida {
	background: var( --wp--preset--color--bg-warm );
}

/* Lista de etiquetas: las adicciones de la home y de la página de adicciones. */
.bellamar-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bellamar-etiquetas li {
	margin: 0;
}

.bellamar-etiquetas a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.25rem 1rem;
	border-radius: 8px;
	background: #fff;
	color: var( --wp--preset--color--navy );
	font-size: var( --wp--preset--font-size--md );
}

/* El hover lleva las mismas tres clases que la regla de la tarjeta de color de
   más abajo: con dos, esa regla le ganaba el fondo blanco y el texto —blanco
   también— desaparecía al pasar el ratón. */
.bellamar-seccion .bellamar-etiquetas a:hover,
.bellamar-seccion .bellamar-etiquetas a:focus-visible,
.bellamar-seccion .bellamar-tarjeta--suave .bellamar-etiquetas a:hover,
.bellamar-seccion .bellamar-tarjeta--suave .bellamar-etiquetas a:focus-visible,
.bellamar-seccion .bellamar-tarjeta--calida .bellamar-etiquetas a:hover,
.bellamar-seccion .bellamar-tarjeta--calida .bellamar-etiquetas a:focus-visible {
	background: var( --wp--preset--color--primary-fuerte );
	color: #fff;
}

/* Sobre fondo blanco, la etiqueta necesita el fondo azulado para verse. */
.bellamar-seccion:not( .bellamar-seccion--suave ) .bellamar-etiquetas a {
	background: var( --wp--preset--color--bg-soft );
}

/* …pero dentro de una tarjeta de color vuelve a ser blanca, como en la
   maqueta: si no, se confundiría con el fondo de la propia tarjeta. Lleva
   `.bellamar-seccion` delante para pesar lo mismo que la regla de arriba, que
   la anulaba. */
.bellamar-seccion .bellamar-tarjeta--suave .bellamar-etiquetas a,
.bellamar-seccion .bellamar-tarjeta--calida .bellamar-etiquetas a {
	background: #fff;
}

/* Ficha de persona del equipo. */
.bellamar-persona img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	border-radius: 16px;
}

.bellamar-persona__nombre {
	margin: 0.75rem 0 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--lg );
	color: var( --wp--preset--color--navy );
}

.bellamar-persona__cargo {
	margin: 0.125rem 0 0;
	color: var( --wp--preset--color--text-muted );
	font-size: var( --wp--preset--font-size--sm );
}

/* Hueco para una foto que todavía no ha llegado. */
.bellamar-persona__hueco {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border: 1px dashed var( --wp--preset--color--border );
	border-radius: 16px;
	background: var( --wp--preset--color--bg-soft );
	color: var( --wp--preset--color--text-muted );
	font-size: var( --wp--preset--font-size--sm );
}

/* ── 5. Blog ─────────────────────────────────────────────────────────────── */

/* Las categorías del blog, como las etiquetas de adicciones: el bloque de
   WordPress trae su propia lista con viñetas y aquí se convierte en fila de
   chips. */
.bellamar-categorias.wp-block-categories {
	/* Va dentro de la franja azul del listado, no colgando de la cabecera
	   blanca: el lienzo pone ahí su desplegable «Filtrar», y con el filtro
	   arriba quedaba una banda blanca encima de las tarjetas. A la derecha,
	   también como el lienzo. */
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.bellamar-categorias.wp-block-categories li::marker {
	content: "";
}


/* La paginación del listado, separada de la última tarjeta. */
.bellamar-paginacion {
	margin-top: var( --wp--preset--spacing--50 );
}

/* La cabecera del blog no necesita aire por abajo: el listado viene pegado. */
.bellamar-seccion--sin-aire-abajo {
	padding-bottom: var( --wp--preset--spacing--50 );
}


/* ── La entrada del blog ──────────────────────────────────────────────────

   Misma estructura que el artículo de la web hermana de Eclipse, que es la que
   el cliente ha dado por buena: columna de 880 centrada en los 1440 —280 a cada
   lado—, la cabecera a esos 880 y el cuerpo metido 224 más, en 656. Los colores
   y la tipografía son los de Bellamar.
   ─────────────────────────────────────────────────────────────────────────── */
.bellamar-articulo {
	--bellamar-art-columna: 880px;
	--bellamar-art-sangria: 224px;

	padding-block: 4.5rem 7.5rem;
	background: var( --wp--preset--color--bg );
}

.bellamar-articulo__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	width: 100%;
	max-width: calc( var( --bellamar-art-columna ) + var( --wp--preset--spacing--40 ) * 2 );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--40 );
}

.bellamar-articulo__cabecera {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.bellamar-articulo__titulo {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xxxl );
	font-weight: 500;
	line-height: 1.1;
	color: var( --wp--preset--color--navy );
}

/* Fecha y categoría seguidas, separadas por una barra que dibuja el CSS para
   que no la lea un lector de pantalla. */
.bellamar-articulo__meta {
	gap: 0.35em;
	margin: 0;
	font-size: var( --wp--preset--font-size--sm );
	line-height: 1.7142;
	color: var( --wp--preset--color--text-muted );
}

.bellamar-articulo__meta > * {
	margin: 0;
}

.bellamar-articulo__meta .wp-block-post-terms::before {
	content: "|";
	margin-right: 0.35em;
}

.bellamar-articulo__meta a {
	color: inherit;
	text-decoration: none;
}

.bellamar-articulo__meta a:hover,
.bellamar-articulo__meta a:focus-visible {
	text-decoration: underline;
}

/* La entradilla: el extracto, en serif y grande, antes de la foto. Es lo que
   hace que la entrada se lea como un artículo y no como una ficha. */
.bellamar-articulo__entradilla {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 400;
	line-height: 1.33;
	color: var( --wp--preset--color--navy );
}

.bellamar-articulo__entradilla p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.bellamar-articulo__destacada {
	margin: 0;
}

.bellamar-articulo__destacada img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --wp--custom--radius--md );
	object-fit: cover;
}

/* ── El cuerpo ───────────────────────────────────────────────────────────── */
.bellamar-articulo__cuerpo {
	/* 224 sobre los 880 de la columna del artículo, no sobre el ancho del
	   sitio, que es contra lo que resuelve un margen en porcentaje. Por debajo
	   de 1440 la sangría pasa a esa proporción; en píxeles fijos se comería la
	   columna de texto. */
	margin: 0 0 0 min( var( --bellamar-art-sangria ), 25.4545% );
	font-size: var( --wp--preset--font-size--md );
	line-height: 1.7;
	color: var( --wp--preset--color--text );
}

/* WordPress centra y mete aire lateral a los bloques del contenido; aquí la
   columna la fija el artículo, así que ese aire sobra. */
.bellamar-articulo .bellamar-articulo__cuerpo > * {
	max-width: none;
	margin-block: 0;
	margin-inline: 0;
	padding-inline: 0;
}

/* Cadencia: 16 px entre párrafos y entre un subtítulo y su texto; 40 para los
   cambios de sección, o sea cuando llega un subtítulo nuevo o una imagen. */
.bellamar-articulo .bellamar-articulo__cuerpo > * + * {
	margin-block-start: 1rem;
}

.bellamar-articulo .bellamar-articulo__cuerpo > * + :is( h2, h3, h4, h5, h6 ),
.bellamar-articulo .bellamar-articulo__cuerpo > * + :is( figure, .wp-block-image ),
.bellamar-articulo .bellamar-articulo__cuerpo > :is( figure, .wp-block-image ) + * {
	margin-block-start: 2.5rem;
}

.bellamar-articulo__cuerpo > :is( h2, h3, h4, h5, h6 ) {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--md );
	font-weight: 700;
	line-height: 1.5;
	color: var( --wp--preset--color--navy );
}

.bellamar-articulo__cuerpo :is( img, figure ) {
	max-width: 100%;
}

.bellamar-articulo__cuerpo figure {
	margin-inline: 0;
	padding-inline: 0;
}

.bellamar-articulo__cuerpo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --wp--custom--radius--md );
}

.bellamar-articulo__cuerpo a {
	color: var( --wp--preset--color--primary-fuerte );
	overflow-wrap: anywhere;
}

/* «Volver atrás» alineado con el cuerpo, no con la cabecera. */
.bellamar-articulo__volver {
	margin-left: min( var( --bellamar-art-sangria ), 25.4545% );
}

/* En pantalla estrecha la sangría desaparece: el texto necesita todo el ancho. */
@media ( max-width: 781px ) {
	.bellamar-articulo__cuerpo,
	.bellamar-articulo__volver {
		margin-left: 0;
	}

	.bellamar-articulo {
		padding-block: 2.5rem 4rem;
	}
}

/* El aviso de «falta el texto» de las entradas importadas. Se ve, y se ve que
   hay que quitarlo: un texto pendiente que pasa desapercibido acaba publicado. */
.bellamar-pendiente {
	padding: 0.75rem 1rem;
	border-left: 4px solid var( --wp--preset--color--accent );
	background: var( --wp--preset--color--bg-warm );
	color: var( --wp--preset--color--navy );
	font-size: var( --wp--preset--font-size--sm );
}

/* ── Páginas legales ──────────────────────────────────────────────────────

   El lienzo las monta como la entrada del blog: el titular al borde del
   contenido y el texto sangrado debajo. El titular ocupa los 1104 y el cuerpo
   se mete 80 px, en una columna de 776. El texto va a 14/24, que es el tamaño
   con el que están dibujadas.
   ─────────────────────────────────────────────────────────────────────────── */
/* La caja del contenido ocupa los 1104 del titular —así la sangría se cuenta
   desde la columna y no desde el borde de la página, que se mueve con el
   ancho— y son sus hijos los que se meten 80 px en una columna de 776. */
.bellamar-legal .wp-block-post-content {
	max-width: 1104px;
	font-size: var( --wp--preset--font-size--sm );
	line-height: 1.7142;
}

/* Con !important a propósito: el contenedor de WordPress centra a sus hijos con
   `margin-inline: auto !important` y no hay especificidad que le gane. */
.bellamar-legal .wp-block-post-content > * {
	max-width: 776px;
	margin-left: 80px !important;
	margin-right: 0 !important;
}

.bellamar-legal .wp-block-post-content h2 {
	margin-top: 2.5rem;
	font-size: var( --wp--preset--font-size--xl );
	line-height: 1.33;
}

.bellamar-legal .wp-block-post-content h3 {
	margin-top: 2rem;
	font-size: var( --wp--preset--font-size--lg );
}

.bellamar-legal .wp-block-post-content p,
.bellamar-legal .wp-block-post-content li {
	font-size: var( --wp--preset--font-size--sm );
	line-height: 1.7142;
}

/* La viñeta se mete 20 px, no los 40 de serie. */
.bellamar-legal .wp-block-post-content :is( ul, ol ) {
	padding-left: 20px;
}

/* En pantalla estrecha la sangría sobra: el texto necesita todo el ancho. */
@media ( max-width: 900px ) {
	.bellamar-legal .wp-block-post-content > * {
		max-width: none;
		margin-left: 0 !important;
	}
}

/* ── 6. Móvil ────────────────────────────────────────────────────────────── */

@media ( max-width: 1100px ) {
	.bellamar-header__inner {
		flex-wrap: wrap;
	}
}

@media ( max-width: 781px ) {
	.bellamar-header__derecha {
		flex-direction: row;
		align-items: center;
		gap: 0.75rem;
	}

	/* En el móvil el teléfono de la cabecera sobra: está el botón de la
	   hamburguesa y, dentro de la superposición, el número entero. */
	.bellamar-header__telefono {
		display: none;
	}

	.bellamar-footer__columnas {
		gap: 2rem;
	}

	.bellamar-ficha__nombre {
		font-size: var( --wp--preset--font-size--lg );
	}

	/* El equipo se queda a dos por fila también en el móvil: de una en una,
	   nueve fichas con su hueco de foto hacen la página interminable. */
	/* `.wp-block-columns` delante no sobra: el propio bloque, al pedirle que no
	   se apile en el móvil, fuerza `flex-wrap: nowrap !important`, y con menos
	   peso las nueve fichas se quedan en una sola fila que se sale de la
	   pantalla. */
}

/* ============================================================
   Portada: secciones rehechas con bloques nativos
   ============================================================ */

/* La maqueta deja 128 px entre la columna de texto y la foto. Con el hueco de
   serie el párrafo quedaba pegado a la imagen. */
.wp-block-columns.bellamar-columnas-aireadas {
	gap: clamp( 2rem, 9vw, 8rem );
}

/* «Da el primer paso»: seis fichas blancas de dos en dos. */
.bellamar-fichas-icono.wp-block-group {
	gap: 2rem;
}

.bellamar-ficha-icono {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	border-radius: var( --wp--custom--radius--md );
	background: #fff;
}

.bellamar-ficha-icono > * {
	margin: 0;
}

/* 0,5 rem de hueco + 1 rem aquí = los 24 px de la maqueta entre el icono y el
   título; entre título y cuerpo se quedan los 8 px. */
.bellamar-ficha-icono > .bellamar-ficha-icono__icono {
	margin-bottom: 1rem;
	line-height: 0;
	color: var( --wp--preset--color--primary );
}

.bellamar-ficha-icono h3 {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 400;
	line-height: 1.33;
}

/* Sobre el fondo azulado la ficha ya es blanca; si la sección es blanca, la
   ficha necesita el borde para no desaparecer. */
.bellamar-seccion:not( .bellamar-seccion--suave ) .bellamar-ficha-icono {
	border: 1px solid var( --wp--preset--color--border );
}

/* «¿Cómo trabajamos en Bellamar?»: cinco fases con el icono en un círculo. */
.bellamar-pasos.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.bellamar-paso.wp-block-group {
	gap: 1.5rem;
	align-items: center;
	flex-wrap: nowrap;
}

.bellamar-paso__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	margin: 0;
	border-radius: 50%;
	background: var( --wp--preset--color--primary );
	color: #fff;
}

.bellamar-paso__texto {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.bellamar-paso__texto > * {
	margin: 0;
}

.bellamar-paso__texto h3 {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 400;
	line-height: 1.33;
}

.bellamar-paso__cuerpo {
	font-size: var( --wp--preset--font-size--sm );
}

/* «Actualidad»: dos entradas en tarjeta apaisada, foto a la izquierda. */
.bellamar-actualidad .wp-block-post-template {
	gap: 2rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	/* Todas las tarjetas miden lo mismo: sin esto cada fila se ajusta a su
	   contenido y el listado queda con escalones de 32 px según lo largo que
	   sea el titular de cada entrada. */
	grid-auto-rows: 1fr;
}

.bellamar-actualidad .wp-block-post-template > li {
	display: flex;
}

.bellamar-actualidad__tarjeta.wp-block-group {
	width: 100%;
	gap: 2rem;
	align-items: stretch;
	flex-wrap: nowrap;
	padding: 1.5rem;
	border-radius: var( --wp--custom--radius--lg );
	background: #fff;
}

.bellamar-actualidad__foto {
	flex-shrink: 0;
	margin: 0;
}

.bellamar-actualidad__foto img {
	border-radius: var( --wp--custom--radius--md );
	object-fit: cover;
}

.bellamar-actualidad__texto {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex-grow: 1;
	min-width: 0;
}

.bellamar-actualidad__texto > * {
	margin: 0;
}

.bellamar-actualidad__texto :is( h2, h3 ) {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 400;
	line-height: 1.33;
}

.bellamar-actualidad__texto :is( h2, h3 ) a {
	color: var( --wp--preset--color--navy );
	text-decoration: none;
}

.bellamar-actualidad__texto :is( h2, h3 ) a:hover,
.bellamar-actualidad__texto :is( h2, h3 ) a:focus-visible {
	color: var( --wp--preset--color--primary-fuerte );
	text-decoration: underline;
}

/* La fecha y la categoría, abajo del todo, separadas por una barra. */
.bellamar-actualidad__texto > .bellamar-actualidad__meta {
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: var( --wp--preset--font-size--xs );
	color: var( --wp--preset--color--navy );
}

.bellamar-actualidad__meta > :not( :first-child )::before {
	content: "|";
	margin-right: 0.5rem;
	color: var( --wp--preset--color--navy );
}

.bellamar-actualidad__meta a {
	color: var( --wp--preset--color--primary-fuerte );
}

@media ( max-width: 781px ) {
	/* En móvil la ficha apaisada se apila: la foto ocupa el ancho y el texto
	   va debajo. */
	.bellamar-actualidad__tarjeta.wp-block-group {
		flex-direction: column;
		gap: 1rem;
	}

	.bellamar-actualidad__foto,
	.bellamar-actualidad__foto img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 10;
	}

	/* El círculo del método se encoge para dejar sitio al texto. */
	.bellamar-paso__icono {
		width: 56px;
		height: 56px;
	}

	.bellamar-paso__icono svg {
		width: 24px;
		height: 24px;
	}
}

/* El cuerpo corto de «Da el primer paso» va a 14 px, como en la maqueta. */
.bellamar-cuerpo-corto {
	font-size: var( --wp--preset--font-size--sm );
}

/* Cabecera de sección con el botón a la derecha («¿Qué tratamos?»): la maqueta
   deja 48 px hasta las tarjetas, no los 24 de serie. */
.bellamar-cabecera-seccion.wp-block-columns {
	margin-bottom: 3rem;
}

/* Dentro de las dos tarjetas de «qué tratamos» los tres bloques —icono,
   título y etiquetas— van a 24 px, como en la maqueta. */
.bellamar-tarjeta--suave .bellamar-tarjeta__icono,
.bellamar-tarjeta--calida .bellamar-tarjeta__icono {
	margin-bottom: 1.5rem;
}

.bellamar-tarjeta--suave h3.wp-block-heading,
.bellamar-tarjeta--calida h3.wp-block-heading {
	margin-top: 0;
}

/* Hueco intermedio: los 64 px que la maqueta deja entre el titular y las
   fichas en «Da el primer paso» y en el método, frente a los 128 px que separan
   texto y foto en las secciones partidas. */
.wp-block-columns.bellamar-columnas-medias {
	gap: clamp( 2rem, 4.5vw, 4rem );
}

/* Las rejillas nativas de WordPress no se estrechan solas: con dos o tres
   columnas fijas, en un móvil las palabras se parten a mitad. Aquí se les dice
   cuándo pasar a una sola columna. Las clases van dobladas para pesar más que
   la regla que WordPress imprime para cada rejilla. */
@media ( max-width: 900px ) {
	.bellamar-resenas.wp-block-group {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 600px ) {
	.bellamar-fichas-icono.wp-block-group,
	.bellamar-resenas.wp-block-group {
		grid-template-columns: 1fr;
	}

	.bellamar-actualidad .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}
}


/* El bloque de portada pinta de blanco todo el texto que lleva dentro, y las
   reseñas van en tarjeta blanca: sin esto, el cuerpo y la firma desaparecían. */
.bellamar-testimonios .bellamar-resena,
.bellamar-testimonios .bellamar-resena p {
	color: var( --wp--preset--color--text );
}

.bellamar-testimonios .bellamar-resena h3 {
	color: var( --wp--preset--color--primary-fuerte );
}

.bellamar-testimonios .bellamar-resena p.bellamar-resena__estrellas {
	color: var( --wp--preset--color--accent );
}

/* La lista de etiquetas nace sin márgenes (los necesita a cero para pegarse al
   texto en otras páginas); dentro de estas tarjetas recupera los 24 px que la
   separan del título en la maqueta. */
.bellamar-tarjeta--suave .bellamar-etiquetas,
.bellamar-tarjeta--calida .bellamar-etiquetas {
	margin-top: 1.5rem;
}

/* La columna vacía de la sección con foto es la que empuja el texto al margen
   derecho, así que en escritorio tiene que existir. Sólo estorba cuando las
   columnas se apilan: ahí deja un hueco de la nada y se esconde. Sin el
   `@media` desaparecía también en escritorio y el texto se iba a la izquierda,
   encima de la foto. */
@media ( max-width: 781px ) {
	.bellamar-foto-texto .wp-block-column:empty {
		display: none;
	}
}

/* La cabecera del bloque de preguntas mide 776 px en la maqueta y va pegada al
   margen izquierdo. Lo permite el grupo envolvente: al estar en flujo normal y
   no «constrained», WordPress no le pone márgenes automáticos. */
.bellamar-faq__cabecera {
	max-width: 776px;
}

.bellamar-faq__lista {
	margin-top: 3rem;
}

/* La respuesta se alinea con la pregunta, no con el borde de la caja. */
.bellamar-faq .wp-block-details p {
	max-width: 920px;
}

/* Hueco ancho: los 104 px que la maqueta deja en el método y en el proceso de
   las fichas. */
.wp-block-columns.bellamar-columnas-amplias {
	gap: clamp( 2rem, 7.2vw, 6.5rem );
}

/* Los pasos numerados de las fichas: mismo círculo que el método, con la cifra
   dentro y el texto alineado arriba, no al centro. */
.bellamar-pasos--numerados.wp-block-group {
	gap: 2rem;
}

.bellamar-paso--numerado.wp-block-group {
	align-items: flex-start;
}

.bellamar-paso__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	margin: 0;
	border-radius: 50%;
	background: var( --wp--preset--color--primary );
	color: #fff;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xl );
	line-height: 1;
}

.bellamar-paso--numerado .bellamar-paso__texto {
	padding-top: 0.25rem;
}

@media ( max-width: 781px ) {
	.bellamar-paso__numero {
		width: 56px;
		height: 56px;
		font-size: var( --wp--preset--font-size--lg );
	}
}

/* ============================================================
   Ajustes de fidelidad medidos contra la maqueta
   ============================================================ */

/* La maqueta escribe cada titular como una pila de líneas, y la parte en
   cursiva empieza siempre en línea nueva. Aquí el titular es un solo bloque con
   <em> dentro, así que la cursiva rompía donde le tocaba al navegador y las
   frases no partían por donde el diseño las parte. El bloque lo arregla.
   Se excluye el cierre con formulario, que en la maqueta sí va todo seguido. */
.bellamar-seccion h1 em,
.bellamar-seccion h2 em,
.bellamar-faq h2 em,
.bellamar-foto-texto h2 em,
.bellamar-testimonios h2 em {
	display: block;
}

/* El texto de 14 px va a 24 de interlínea en toda la maqueta, no a 21: es lo
   que da aire a los rótulos y a los cuerpos cortos. */
.bellamar-rotulo,
.bellamar-cuerpo-corto,
.bellamar-paso__cuerpo {
	line-height: 1.7142;
}

/* Los botones miden 40 px de alto en la maqueta, y los dos que la maqueta
   dibuja a medida —«¿Hablamos?» y «Ver todas las noticias»— miden 208 de
   ancho. El del encabezado no: ese se ajusta a su texto. */
.bellamar-seccion .wp-block-button.is-style-salmon > .wp-block-button__link {
	min-width: 13rem;
}

/* La fecha y la categoría de cada entrada van a 12/16, como en la maqueta. */
.bellamar-actualidad__meta.wp-block-group {
	line-height: 1.3333;
}

.bellamar-actualidad__meta .wp-block-post-date,
.bellamar-actualidad__meta .wp-block-post-terms {
	line-height: 1.3333;
}

/* La maqueta separa el botón del texto 56 px, no los 24 que WordPress pone
   entre bloques: es el aire que hace que el botón no parezca pegado al
   párrafo. Sólo dentro de una columna, que es donde la maqueta lo usa. */
.bellamar-seccion .wp-block-column > .wp-block-buttons,
.bellamar-foto-texto .wp-block-column > .wp-block-buttons {
	margin-top: 3.5rem;
}

/* ============================================================
   Las franjas van pegadas y a sangre
   ============================================================ */

/* Entre sección y sección no va nada: la maqueta las pone una encima de otra
   sin junta. WordPress separa 24 px a los hijos del contenedor principal, y
   entre el blanco del hero y el azulado de la siguiente esa junta se veía como
   una banda. Van dos clases para pesar más que la regla que WordPress imprime
   después de esta hoja. */
.bellamar-main .wp-block-post-content > .bellamar-seccion,
.bellamar-main .wp-block-post-content > .wp-block-cover,
.bellamar-main .wp-block-post-content > .bellamar-faq,
.bellamar-main .wp-block-post-content > .bellamar-cta,
.bellamar-main > .bellamar-seccion,
.bellamar-main > .wp-block-cover,
.bellamar-main > .bellamar-faq,
.bellamar-main > .bellamar-cta {
	margin-block: 0;
}

/* La foto de fondo de una sección a sangre no lleva esquinas redondeadas: es la
   franja entera, no una tarjeta. Se las estaba poniendo la regla que redondea
   las imágenes de los bloques del padre, que alcanza a toda la página porque el
   <body> lleva una clase con «vidaytu-» dentro. */
.wp-block-cover > img.wp-block-cover__image-background,
.wp-block-cover > video.wp-block-cover__video-background {
	border-radius: 0;
}

/* El pie llevaba una junta de 24 px por encima —el hueco entre bloques que
   WordPress pone a los hijos de la página— y se veía como una banda blanca
   entre la última franja y el azul del pie. Con la etiqueta en el selector pesa
   más que la regla que WordPress imprime detrás de esta hoja. */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block: 0;
}

/* El logotipo del pie: 224 px de ancho, como en la maqueta. */
.bellamar-footer .wp-block-site-logo img {
	width: 224px;
	max-width: 60vw;
	height: auto;
}

/* La barra legal del pie va a 14/24, como el resto. */
.bellamar-footer__legal a,
.bellamar-footer__legal p {
	line-height: 1.7142;
}

/* ============================================================
   Rejillas de las páginas interiores
   ============================================================ */

/* Las fichas de adicción de «Adicciones»: icono arriba, nombre centrado y toda
   la tarjeta enlazada. Tres por fila con 16 px de hueco, como en la maqueta. */
.bellamar-fichas.wp-block-group {
	gap: 1rem;
}

.bellamar-ficha {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	min-height: 144px;
	padding: 1.5rem;
	border-radius: var( --wp--custom--radius--md );
	background: #fff;
	color: var( --wp--preset--color--navy );
	text-align: center;
	text-decoration: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.bellamar-ficha:hover,
.bellamar-ficha:focus-visible {
	box-shadow: var( --wp--custom--shadow--md );
	color: var( --wp--preset--color--navy );
	transform: translateY( -2px );
}

.bellamar-ficha__icono {
	display: block;
	line-height: 0;
	color: var( --wp--preset--color--primary );
}

/* Las dos franjas de Adicciones comparten fondo y se reparten el aire: juntas
   se leen como una sola banda con dos bloques dentro. */
.bellamar-seccion--abre {
	padding-block: var( --wp--custom--seccion--padding ) 2.5rem;
}

.bellamar-seccion--cierra {
	padding-block: 2.5rem var( --wp--custom--seccion--padding );
}

/* La rejilla de tarjetas con texto (señales de cada ficha, «¿a quién ayudo?»):
   dos columnas con 32 px de hueco y todas las tarjetas de una fila a la misma
   altura. */
.bellamar-rejilla-tarjetas.wp-block-group {
	gap: 2rem;
}

.bellamar-tarjeta--texto {
	gap: 0.5rem;
	height: 100%;
}

.bellamar-tarjeta--texto h3 {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 400;
	line-height: 1.33;
	color: var( --wp--preset--color--navy );
}

.bellamar-tarjeta__cuerpo {
	margin: 0;
	font-size: var( --wp--preset--font-size--sm );
	line-height: 1.7142;
}

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

@media ( max-width: 600px ) {
	/* Tres fichas por fila no caben en un teléfono; dos sí. */
	.bellamar-fichas.wp-block-group {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* La banda de cifras de Lolo Drago: cuelga del hero, así que no lleva aire por
   arriba. */
.bellamar-seccion--sin-aire-arriba {
	padding-block: 0 var( --wp--custom--seccion--padding );
}

/* La parrilla del equipo: tres por fila, 56 px entre filas y 32 entre
   columnas, como en la maqueta. */
.bellamar-equipo.wp-block-group {
	gap: 3.5rem 2rem;
	margin-top: 3.5rem;
}

.bellamar-persona.wp-block-group {
	gap: 1.5rem;
}

.bellamar-persona__ficha.wp-block-group {
	gap: 0;
}

@media ( max-width: 900px ) {
	.bellamar-equipo.wp-block-group {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 480px ) {
	.bellamar-equipo.wp-block-group {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* «¿Dónde estamos?» de El centro: los datos debajo del titular con 32 px de
   aire, las dos líneas a 16, y al otro lado la llamada a la acción alineada a
   la derecha. */
.bellamar-donde__datos.wp-block-group {
	gap: 1rem;
	margin-top: 2rem;
}

.bellamar-donde__datos p {
	margin: 0;
}

.bellamar-donde__datos .wp-block-buttons {
	margin-top: 0;
}

.bellamar-donde__aparte.wp-block-group {
	gap: 1.5rem;
	align-items: flex-start;
}

.bellamar-donde__aparte h3 {
	width: 100%;
}

.bellamar-donde__aparte h3 {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xl );
	font-weight: 400;
	line-height: 1.33;
}

.bellamar-donde__aparte .wp-block-buttons {
	margin-top: 0;
}

.bellamar-donde__aparte .wp-block-button__link {
	min-width: 13rem;
}

@media ( max-width: 781px ) {
	/* Apiladas, las tres columnas necesitan aire entre ellas. */
	.wp-block-columns.bellamar-donde {
		gap: 2.5rem;
	}
}

/* La galería de «El centro»: cuatro fotos de 264×200 en dos columnas con 16 px
   de hueco, como en la maqueta. Sin la proporción fija cada foto entraba con
   la suya y la franja crecía 40 px. */
.bellamar-seccion .wp-block-gallery.has-nested-images {
	gap: 1rem;
}

.bellamar-seccion .wp-block-gallery.has-nested-images figure.wp-block-image img {
	aspect-ratio: 264 / 200;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: var( --wp--custom--radius--md );
}

/* En un grupo flexible vertical WordPress alinea a la izquierda y los hijos se
   encogen a su contenido: el hueco de «Foto pendiente» se quedaba en el ancho
   de esas dos palabras —y, con la proporción cuadrada, en una pastilla— en vez
   de ocupar la celda como una foto de verdad. Así la parrilla no cambiará de
   alto el día que lleguen los ocho retratos que faltan. */
.bellamar-persona > .bellamar-persona__hueco,
.bellamar-persona > .wp-block-image,
.bellamar-persona > .wp-block-image img,
.bellamar-persona > .bellamar-persona__ficha {
	width: 100%;
}

/* La maqueta pone los retratos a 320 px dentro de una celda de 347: la foto no
   llena la columna. */
.bellamar-persona > .bellamar-persona__hueco,
.bellamar-persona > .wp-block-image {
	max-width: 320px;
}

/* En el listado del blog, los titulares y los extractos reales son más largos
   que los de ejemplo del lienzo y estiraban la tarjeta al doble. Se recortan a
   la altura de la foto —dos líneas de titular y tres de entradilla—, que es lo
   que la maqueta enseña; el texto entero está a un clic. */
.bellamar-actualidad__texto .wp-block-post-title,
.bellamar-actualidad__texto .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bellamar-actualidad__texto .wp-block-post-title {
	-webkit-line-clamp: 2;
}

.bellamar-actualidad__texto .wp-block-post-excerpt__excerpt {
	-webkit-line-clamp: 3;
}

/* El párrafo de una cabecera se para a 776 px, como en la maqueta: a lo ancho
   de la página entera se leería a saltos. */
.bellamar-parrafo-ancho {
	max-width: 776px;
}

/* Y el botón que cierra esas cabeceras se separa 56 px del texto, no los 24
   que WordPress pone entre bloques. */
.bellamar-seccion > .wp-block-buttons,
.bellamar-cabecera > .wp-block-buttons {
	margin-top: 3.5rem;
}

/* El botón de contorno de «Cómo llegar»: la maqueta lo pone de 40 px de alto
   con un filete de 1 px, y el estilo de WordPress le mete 2 px de borde y más
   relleno. */
.bellamar-seccion .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 0.5rem 1rem;
	background-color: transparent;
	border-width: 1px;
	border-color: var( --wp--preset--color--navy );
	color: var( --wp--preset--color--navy );
	line-height: 1.7142;
}

/* El mapa de «El centro». No se carga solo: hasta que alguien pulsa, aquí no
   hay más que una caja con su aviso. */
.bellamar-mapa {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	margin: 0;
	overflow: hidden;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wp--custom--radius--md );
	background: var( --wp--preset--color--bg-soft );
}

.bellamar-mapa__aviso {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	max-width: 32rem;
	padding: 1.5rem;
	text-align: center;
}

.bellamar-mapa__texto {
	margin: 0;
	font-size: var( --wp--preset--font-size--sm );
	line-height: 1.7142;
	color: var( --wp--preset--color--text );
}

.bellamar-mapa__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0.5rem 2rem;
	border: 0;
	border-radius: 8px;
	background: var( --wp--preset--color--primary-fuerte );
	color: #fff;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--sm );
	line-height: 1.7142;
	cursor: pointer;
}

.bellamar-mapa__boton:hover,
.bellamar-mapa__boton:focus-visible {
	background: var( --wp--preset--color--primary-hover );
}

.bellamar-mapa.esta-abierto {
	border: 0;
	background: none;
}

.bellamar-mapa__marco {
	width: 100%;
	height: 100%;
	border: 0;
}

@media ( max-width: 781px ) {
	.bellamar-mapa {
		aspect-ratio: 4 / 3;
	}
}

/* «¿Dónde estamos?» en tres columnas: dirección, mapa y llamada a la acción. */
.wp-block-columns.bellamar-donde {
	gap: 3rem;
}

/* Las fotos de las secciones partidas llenan su columna. Las que vienen del
   lienzo están guardadas al tamaño al que se veían allí, así que algunas son
   más pequeñas que el hueco que ocupan: sin esto, «sala.jpg» salía a 264 px en
   una columna de 547 y dejaba un agujero. Cuando lleguen las fotos de verdad,
   esto no habrá que tocarlo. */
.bellamar-seccion .wp-block-columns > .wp-block-column > .wp-block-image img {
	width: 100%;
	height: auto;
}

/* Contacto: la cabecera cierra con 64 px porque la franja de abajo cuelga de
   ella, sin aire propio. */
.bellamar-seccion--corta-abajo {
	padding-block: var( --wp--custom--seccion--padding ) 4rem;
}

/* Los dos bloques de datos van uno al lado del otro con 64 px, al ancho de su
   texto, no repartidos por toda la página. */
.bellamar-contacto__datos.wp-block-group {
	gap: 4rem;
	margin-top: 2rem;
	align-items: flex-start;
}

.bellamar-contacto__bloque.wp-block-group {
	gap: 1rem;
}

.bellamar-contacto__bloque p {
	margin: 0;
}

.bellamar-contacto__bloque .wp-block-buttons {
	margin-top: 0;
}

/* Los dos botones directos: 208 px, como en la maqueta. */
.bellamar-contacto .bellamar-botones-contacto.wp-block-buttons {
	gap: 1rem;
	width: 13rem;
	max-width: 100%;
	margin-left: auto;
}

/* El botón «Cómo llegar» lleva en la maqueta un alfiler de mapa al lado. */
.bellamar-seccion .wp-block-button.is-style-outline > .wp-block-button__link::after {
	content: "";
	width: 1rem;
	height: 1rem;
	margin-left: 0.5rem;
	background-color: currentColor;
	-webkit-mask-image: var( --bellamar-alfiler );
	mask-image: var( --bellamar-alfiler );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

:root {
	--bellamar-alfiler: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.3-6-10a6 6 0 0 1 12 0c0 4.7-6 10-6 10zm0-8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E" );
}

@media ( max-width: 781px ) {
	/* Apilados, los dos bloques de datos no necesitan los 64 px de la maqueta:
	   ahí ese hueco separa columnas, no párrafos. */
	.bellamar-contacto__datos.wp-block-group {
		gap: 2rem;
	}
}

/* Tarjeta de icono en fila: el icono al lado del texto, no encima. El lienzo la
   usa donde hay muchas —las siete conductas del TLP—, porque apiladas ocuparían
   600 px de más. */
/* Las dos clases juntas, no sólo el modificador: el grupo es un bloque con
   disposición flexible y WordPress imprime `.is-layout-flex { display: flex }`
   detrás de esta hoja. Con una sola clase empatan y gana el suyo. */
.bellamar-ficha-icono.bellamar-ficha-icono--fila {
	display: grid;
	grid-template-columns: 2rem 1fr;
	column-gap: 1rem;
	row-gap: 0.25rem;
	align-items: start;
	padding: 1.25rem 1.5rem;
	border-radius: 16px;
}

.bellamar-ficha-icono--fila > .bellamar-ficha-icono__icono {
	grid-row: 1 / span 2;
	margin-bottom: 0;
}

.bellamar-ficha-icono--fila > .bellamar-ficha-icono__icono svg {
	width: 2rem;
	height: 2rem;
}

.bellamar-ficha-icono--fila > h3,
.bellamar-ficha-icono--fila > p.wp-block-paragraph {
	grid-column: 2;
}

/* El cuerpo a 14/24, no a 16: con el tamaño de siempre el texto se iba a tres
   líneas y cada tarjeta crecía 42 px —siete tarjetas, casi 300 px de más—. Se
   nombra el párrafo de texto porque el icono también vive dentro de un <p>. */
.bellamar-ficha-icono--fila > p.wp-block-paragraph {
	font-size: var( --wp--preset--font-size--sm );
	line-height: 1.7142;
}

/* 20/28. No hay ficha de 20 en la escala del tema y no merece una: es el único
   sitio donde el lienzo usa ese tamaño. */
.bellamar-ficha-icono--fila > h3 {
	font-size: 1.25rem;
	line-height: 1.4;
}

/* Doce píxeles entre tarjetas, como en el lienzo: aquí van muy juntas. */
.bellamar-fichas-icono.wp-block-group:has( > .bellamar-ficha-icono--fila ) {
	gap: 0.75rem;
}

/* En el cierre sobre foto la cursiva NO se tiñe de azul. El lienzo la deja en
   blanco —cursiva sí, color no— y con razón: el azulón sobre el velo azul
   oscuro se queda en 2,5:1 y es un titular de 40 px.

   Hace falta nombrar `.bellamar-main` porque la regla general de las cursivas
   la alcanza con esa misma especificidad, y el `:not()` deja en paz a la
   variante clara, donde el azul sí se lee. */
.bellamar-main .bellamar-cta:not( .is-overlay-claro ) .bellamar-cta__titulo em {
	color: inherit;
}

/* Las fotos de las secciones partidas van con las esquinas redondeadas, los
   mismos 16 px que las tarjetas. Lo tenían las galerías y los retratos del
   equipo, pero no la foto suelta de un `wp:image`, que es la que usan el hero
   y las secciones de texto con imagen. */
.bellamar-seccion .wp-block-image img,
.bellamar-foto-texto .wp-block-image img {
	border-radius: var( --wp--custom--radius--md );
}

/* El extracto del listado, a seis líneas exactas: las que enseña el lienzo. Se
   pide texto de sobra en la plantilla y se corta aquí, para que una entrada
   corta no deje la tarjeta a medias ni una larga la estire. */
.bellamar-actualidad__texto .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	overflow: hidden;
}

/* La franja del listado abre con 64 px, no con los 120 de una sección normal:
   el filtro va pegado arriba y las tarjetas empiezan enseguida. */
.bellamar-seccion--suave.bellamar-seccion:has( > .bellamar-categorias ) {
	padding-top: 4rem;
}

.bellamar-categorias + .wp-block-query .wp-block-post-template {
	margin-top: 3rem;
}

/* En el móvil los chips se parten en dos filas y alineados a la derecha se leen
   raro: ahí van a la izquierda, con el resto del texto. */
@media ( max-width: 781px ) {
	.bellamar-categorias.wp-block-categories {
		justify-content: flex-start;
	}
}