/**
 * Base del tema Acompañamiento Vital.
 *
 * Solo reglas globales. Todo lo específico de una sección vive en el CSS de su
 * bloque, que WordPress carga únicamente si el bloque está en la página.
 *
 * Los colores, tamaños y espaciados NO se escriben a mano aquí: se consumen
 * como custom properties generadas por theme.json (--wp--preset--*).
 */

/* ---------------------------------------------------------------------------
   1. Tokens derivados
   Alias cortos sobre los presets de theme.json, para no repetir nombres largos.
   Cambiar un color se hace en theme.json, nunca aquí.
   --------------------------------------------------------------------------- */
:root {
	--av-base: var(--wp--preset--color--base);
	--av-contrast: var(--wp--preset--color--contrast);
	--av-muted: var(--wp--preset--color--muted);
	--av-primary: var(--wp--preset--color--primary);
	--av-primary-dark: var(--wp--preset--color--primary-dark);
	--av-navy: var(--wp--preset--color--navy);
	--av-surface: var(--wp--preset--color--surface);
	--av-accent-soft: var(--wp--preset--color--accent-soft);
	--av-border: var(--wp--preset--color--border);
	--av-brand-red: var(--wp--preset--color--brand-red);

	--av-radius-sm: 10px;
	--av-radius: 16px;
	--av-radius-lg: 24px;
	--av-radius-pill: 999px;

	--av-shadow-card: var(--wp--preset--shadow--card);
	--av-shadow-float: var(--wp--preset--shadow--float);

	--av-transition: 180ms cubic-bezier(0.2, 0, 0.2, 1);

	/*
	 * Ancho de contenido — MEDIDO en el Figma, no estimado.
	 *
	 * Lienzo 1440. Los contenedores flotantes («Trust bar» e «Impact metrics»)
	 * son X=70 / W=1300, y el bloque de texto del hero arranca en X=72. Es
	 * decir: 70px de margen a cada lado y 1300px útiles.
	 *
	 * Antes estaba en 1100 (y antes de eso en 1050): 200px menos que el diseño.
	 * Como los contenedores aplican padding-inline, el max-width incluye ese
	 * padding para que el área útil sea exactamente 1300.
	 */
	--av-gutter: clamp(1rem, 4vw, 70px);
	--av-content: calc(1300px + 2 * var(--av-gutter));

	/*
	 * Medida de lectura de los textos largos (entradas del blog).
	 *
	 * 44rem = 704px. Con el cuerpo a 19px salen unos 70 caracteres por línea,
	 * dentro del rango de 45-75 que recomienda la literatura tipográfica y que
	 * recoge la propia WCAG en su criterio 1.4.8 (tope de 80).
	 *
	 * Vive aquí y no en el CSS de la entrada porque la cabecera del artículo, el
	 * cuerpo y el pie son tres bloques distintos con tres hojas distintas, y los
	 * tres tienen que alinear su columna al mismo píxel.
	 */
	--av-medida: 44rem;

	/* ---------------------------------------------------------------------
	 * Geometría medida en el Figma (lienzo 1440 × 4200).
	 *
	 *   Header ............  Y    0  H  86   #FFFFFF
	 *   Hero ..............  Y   86  H 650   #F5FAFC
	 *   Trust bar (flota) .  Y  680  H 118   X70 W1300 r24 #FFFFFF
	 *   Servicios .........  Y  850  H 690   #F5FAFC
	 *   Impact metrics ....  Y 1570  H 112   X70 W1300 r24 gap 85
	 *   Testimonials ......  Y 1694  H 500   #FFFFFF
	 *   Alliances .........  Y 2240  H 330   #F5FAFC
	 *   News ..............  Y 2570  H 500   #FFFFFF
	 *   Contact ...........  Y 3070  H 430   #0E3D64
	 *   Footer ............  Y 3500  H 700   #141F2E
	 *
	 * La barra de garantías NO va debajo del hero: lo solapa 56px por arriba
	 * (hero termina en 736, la barra empieza en 680).
	 * --------------------------------------------------------------------- */
	/*
	 * 106 y no los 86 del Figma: petición expresa del cliente para que el
	 * logotipo se lea. Cada píxel de logotipo es un píxel de cabecera, y con
	 * el eslogan debajo la cuenta sale 75 + 2 + 13 + 16 de aire = 106.
	 *
	 * Todo lo que dependía de esta medida —el hueco que reserva la pieza de
	 * plantilla, el recorrido de la animación de scroll y el tope del panel
	 * del menú en móvil— la lee de aquí, así que no hay nada más que tocar.
	 */
	--av-header-h: 106px;

	/*
	 * Estado compacto de la cabecera.
	 *
	 * La cuenta es la del logotipo compacto: 55 de símbolo + 18 de aire (9
	 * arriba y 9 abajo) = 73. Antes esta medida la marcaba el botón «Programar
	 * una cita», que medía 52 y no se encogía; al retirarlo de la cabecera
	 * manda el logotipo, y la cifra resultante es la misma.
	 */
	--av-header-h-compacta: 73px;

	/*
	 * 8px de aire y no 12: es lo que libera para que el símbolo respire sin
	 * que el eslogan de debajo le robe altura.
	 */
	--av-header-aire: 8px;
	--av-header-aire-compacta: 9px;

	/*
	 * Reparto de los 90px útiles de la cabecera (106 menos 8 de aire arriba y
	 * abajo) entre el símbolo y el eslogan que va justo debajo:
	 *
	 *   75 del logotipo + 2 de separación + 13 del eslogan = 90
	 *
	 * Si se toca uno hay que rehacer la cuenta o la marca desborda la cabecera.
	 *
	 * El archivo aguanta de sobra: mide 400x246 px reales, así que a 75 de
	 * alto se pinta a poco más de un tercio de su tamaño y sigue nítido en
	 * pantallas de 3x. Quien manda aquí es la altura de la cabecera, no el
	 * archivo.
	 */
	--av-logo-h: 75px;
	--av-logo-h-compacta: 55px;
	--av-eslogan-fs: 11px;

	--av-hero-h: 650px;
	--av-trustbar-overlap: 56px;

	/*
	 * Ritmo vertical de sección.
	 * En «Testimonials» las tarjetas arrancan en Y=160 relativo y terminan a
	 * 65px del borde inferior: 72 de padding superior + ~88 del encabezado.
	 */
	--av-sec-pt: clamp(2.5rem, 5vw, 72px);
	--av-sec-pb: clamp(2.25rem, 4.5vw, 64px);

	/* Botones: H=52, radio 26 (píldora), separación entre CTAs 18px. */
	--av-btn-h: 52px;
	--av-btn-gap: 18px;

	/* Interlineado «Auto» de Plus Jakarta Sans tal y como lo calcula Figma. */
	--av-lh-figma: 1.26;

	/* WCAG 2.2 · 2.5.8 (AA): mínimo para un objetivo puntero aislado. */
	--av-tap-min: 24px;
}

/* ---------------------------------------------------------------------------
   2. Reset mínimo
   No se usa un reset completo: WordPress ya normaliza bastante y cada regla
   extra es peso que viaja en todas las páginas.
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/*
 * Los enlaces ancla (#valores, #contacto) deben parar DEBAJO de la cabecera
 * pegajosa, no detrás de ella. Sin esto el titular de destino queda tapado y
 * el usuario cree que el enlace no funcionó.
 *
 * Se suma la altura de la barra de administración de WordPress cuando existe.
 * Especificidad 0,1,1 porque el núcleo también fija `scroll-padding-top` en
 * :root (0,1,0) para su propia barra y se imprime después.
 */
html:root {
	scroll-padding-top: calc(
		var(--wp-admin--admin-bar--height, 0px) + var(--av-header-h) + 1rem
	);
}

/*
 * La reserva de arriba usa la altura COMPLETA de la cabecera, que es la
 * correcta allí donde la cabecera no se compacta: sin animaciones ligadas al
 * scroll —Firefox hoy— la barra mide siempre 106px, y reservar los 73 del
 * estado compacto dejaba el destino del ancla 17px por debajo del borde de la
 * cabecera, medio tapado.
 *
 * Donde SÍ se compacta se descuenta la diferencia, con el mismo `@supports` que
 * gobierna la compactación para que las dos no puedan separarse: si un día se
 * retira la animación, esta regla se apaga sola.
 *
 * Importa más de lo que parece desde que el botón «Programar una cita» de cada
 * servicio baja a un ancla de su propia página: si el destino queda tapado,
 * quien pulsa cree que no ha pasado nada.
 */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		html:root {
			scroll-padding-top: calc(
				var(--wp-admin--admin-bar--height, 0px) + var(--av-header-h-compacta) + 1rem
			);
		}
	}
}

body {
	margin: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/*
 * Reset de medios envuelto en :where() para que su especificidad sea CERO.
 *
 * Sin esto, `img[width][height] { height: auto }` (especificidad 0,2,1) gana a
 * `.av-hero__img { height: 100% }` (0,1,0) y cualquier imagen que deba llenar
 * su contenedor con object-fit se desborda. Costó un rato encontrarlo: la
 * imagen del hero se cargaba, pero se pintaba a 857px de alto dentro de un
 * contenedor de 559px, de modo que solo se veía la franja superior.
 *
 * Con :where() la regla sigue haciendo su trabajo por defecto, pero cualquier
 * clase la sobrescribe sin pelear.
 */
:where(img, svg, video) {
	max-width: 100%;
	height: auto;
	display: block;
}

:where(p, li) {
	text-wrap: pretty;
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   3. Accesibilidad
   --------------------------------------------------------------------------- */

/* Foco visible y consistente en todo el sitio (WCAG 2.2 · 2.4.11 y 2.4.13). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--av-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Respeta la preferencia del sistema. Importante en un sitio para adultos mayores. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Enlace de salto al contenido. */
.av-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--av-navy);
	color: #fff;
	border-radius: 0 0 var(--av-radius-sm) 0;
	font-weight: 600;
	text-decoration: none;
}

.av-skip-link:focus {
	left: 0;
}

/* Texto solo para lectores de pantalla. */
.screen-reader-text,
.av-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   4. Utilidades compartidas entre bloques
   Deliberadamente pocas: una utilidad que solo usa un bloque va en ese bloque.
   --------------------------------------------------------------------------- */

/*
 * Etiqueta superior de sección ("CUIDAMOS LO QUE MÁS AMAS").
 * Medido en Figma: Plus Jakarta Sans Regular 13 · interlineado Auto ·
 * letter-spacing 0% · color #1775BF. Estaba en peso 600 y 0.09em de tracking.
 */
.av-eyebrow {
	display: block;
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--av-primary);
}

/* Contenedor de sección: aplica el ancho de contenido y el gutter lateral. */
.av-container {
	width: 100%;
	max-width: var(--av-content);
	margin-inline: auto;
	padding-inline: var(--av-gutter);
}

/* Ritmo vertical uniforme entre secciones (derivado del Figma, ver §1). */
.av-section {
	padding-block: var(--av-sec-pt) var(--av-sec-pb);
}

.av-section--tight {
	padding-block: var(--wp--preset--spacing--60);
}

.av-section--surface {
	background-color: var(--av-surface);
}

/* Encabezado de sección reutilizable. */
.av-section__intro {
	max-width: 34ch;
}

.av-section__title {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--x-large);

	/* Figma: interlineado Auto y letter-spacing 0 en todos los titulares. */
	line-height: var(--av-lh-figma);
	letter-spacing: 0;
}

/*
 * Medido en Figma: Regular 18 · Auto · 0% · #596673, en una caja de 310px.
 * No usa el preset «medium» (19px) porque ése es el del párrafo del hero, que
 * el Figma sí pone un punto más grande.
 */
.av-section__text {
	margin: 0;
	font-size: 1.125rem;
	line-height: var(--av-lh-figma);
	color: var(--av-muted);
}

/* Botones fuera de core/button (los de nuestros bloques dinámicos). */
.av-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;

	/*
	 * Figma: alto 52, radio 26 (píldora exacta), borde de 1px en el secundario.
	 * El padding vertical se deja en 0 y la altura la fija min-height para que
	 * los dos botones midan lo mismo aunque uno tenga el texto más largo.
	 */
	min-height: var(--av-btn-h);
	padding: 0 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--av-radius-pill);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--av-transition), color var(--av-transition), border-color var(--av-transition);
}

.av-btn--primary {
	background-color: var(--av-primary);
	color: #fff;
}

.av-btn--primary:hover {
	background-color: var(--av-primary-dark);
	color: #fff;
	text-decoration: none;
}

.av-btn--ghost {
	background-color: transparent;
	border-color: currentcolor;
	color: var(--av-primary);
}

.av-btn--ghost:hover {
	background-color: var(--av-primary);
	border-color: var(--av-primary);
	color: #fff;
	text-decoration: none;
}

.av-btn--on-dark {
	background-color: #fff;
	color: var(--av-primary-dark);
}

.av-btn--on-dark:hover {
	background-color: var(--av-surface);
	color: var(--av-navy);
	text-decoration: none;
}

/* Enlace con flecha ("Más información →"). */
/* Medido en Figma: Regular 14 · Auto · 0% · #1775BF. Estaba en peso 600. */
.av-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--av-primary);
	text-decoration: none;
}

.av-link-arrow::after {
	content: "\2192";
	transition: transform var(--av-transition);
}

.av-link-arrow:hover::after {
	transform: translateX(3px);
}

/* Rejilla fluida: se adapta sin una sola media query. */
.av-grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* Tarjeta genérica. Figma usa radio 24 en todas las tarjetas y barras. */
.av-card {
	display: flex;
	flex-direction: column;
	background: var(--av-base);
	border-radius: var(--av-radius-lg);
	box-shadow: var(--av-shadow-card);
	overflow: hidden;
}

/*
 * El armazón de la página va sin separaciones: cabecera, cuerpo y pie se tocan.
 *
 * WordPress aplica `margin-block-start: 24px` a todo hijo directo de
 * `.wp-site-blocks` para separar los bloques del flujo. Eso alcanza a las tres
 * piezas de la plantilla, y dejaba dos franjas blancas que no están en el
 * diseño: una entre la cabecera y el hero (el hero arranca en Y=86, justo
 * donde termina la cabecera) y otra entre la última sección y el pie.
 *
 * Se anula solo en <main> y <footer>, que son las piezas estructurales. El
 * resto del flujo conserva su separación.
 *
 * Especificidad 0,1,1 para ganarle a la regla del núcleo, que es 0,1,0. La
 * segunda línea de cada par cubre el caso en que la plantilla envuelve la
 * pieza en un grupo, porque entonces el selector del núcleo también gana por
 * orden de aparición en la hoja.
 */
.wp-site-blocks > main,
.wp-site-blocks > main.wp-block-group,
.wp-site-blocks > footer,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
   4bis. Carruseles
   Controles compartidos por «Testimonios» y «Entradas». Viven aquí y no en el
   CSS de cada bloque porque son idénticos: duplicarlos garantizaría que un día
   divergieran. El coste es que viajan en todas las páginas, pero son ~40
   líneas.
   --------------------------------------------------------------------------- */

.av-carrusel__controles {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-block-start: 1.5rem;
}

.av-carrusel__puntos {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/*
 * El punto que se ve mide 10px, pero el botón mide 24 × 24: es el mínimo que
 * pide la WCAG 2.2 para un objetivo puntero aislado (2.5.8). Un punto de 10px
 * sería imposible de acertar con el dedo.
 */
.av-carrusel__punto {
	display: grid;
	place-items: center;
	inline-size: var(--av-tap-min);
	block-size: var(--av-tap-min);
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.av-carrusel__punto::before {
	content: "";
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	background: var(--av-border);
	transition: background-color var(--av-transition), transform var(--av-transition);
}

.av-carrusel__punto:hover::before {
	background: var(--av-muted);
}

.av-carrusel__punto[aria-current="true"]::before {
	background: var(--av-primary);
	transform: scale(1.3);
}

.av-carrusel__pausa {
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	padding: 0;
	color: var(--av-primary-dark);
	background: var(--av-surface);
	border: 1px solid var(--av-border);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--av-transition);
}

.av-carrusel__pausa:hover {
	background: var(--av-border);
}

.av-carrusel__pausa svg {
	inline-size: 18px;
	block-size: 18px;
	grid-area: 1 / 1;
}

/* Se muestra el icono contrario al estado: pausa mientras corre, play si está detenido. */
.av-carrusel__pausa .av-carrusel__icono-play,
.av-carrusel__pausa.esta-pausado .av-carrusel__icono-pausa {
	display: none;
}

.av-carrusel__pausa.esta-pausado .av-carrusel__icono-play {
	display: block;
}


/* ---------------------------------------------------------------------------
   5. Cabecera y pie
   Viven en base.css porque están presentes en todas las páginas: separarlos en
   un CSS por bloque no ahorraría nada y añadiría una petición.
   --------------------------------------------------------------------------- */

/*
 * La plantilla anida dos <header>: el exterior es la pieza de plantilla, que
 * vive en el flujo, y el interior es la barra visible.
 *
 * El exterior se queda en el documento como HUECO RESERVADO de 86px y el
 * interior se saca del flujo. Se hace así, y no con `position: sticky` a
 * secas, porque la barra cambia de altura al bajar: si siguiera en el flujo,
 * encogerla movería 22px hacia arriba todo el contenido de la página mientras
 * se hace scroll. Con el hueco fijo, el documento no se entera.
 *
 * `sticky` tampoco servía en esta estructura: un elemento pegajoso solo puede
 * desplazarse dentro de la caja de su padre, y el padre mide 86px.
 */
.wp-site-blocks > header.wp-block-template-part {
	min-height: var(--av-header-h);
}

.av-header {
	position: fixed;
	inset-inline: 0;

	/*
	 * La barra de administración de WordPress ocupa la franja superior cuando
	 * hay sesión iniciada. Se lee su propia variable en lugar de codificar 32px
	 * porque en móvil mide 46 y para un visitante no existe (0).
	 */
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: rgb(255 255 255 / 92%);
	backdrop-filter: saturate(180%) blur(8px);
	border-block-end: 1px solid var(--av-border);

	/* Figma: la cabecera mide 86px de alto (Y 0 → 86). */
	min-height: var(--av-header-h);
}

.av-header__inner {
	width: 100%;
	max-width: var(--av-content);
	margin-inline: auto;
	padding-block: var(--av-header-aire);
	padding-inline: var(--av-gutter);
	gap: 1.5rem;
}

.av-header .wp-block-site-logo img {
	max-height: var(--av-logo-h);
	width: auto;
}

/*
 * Cabecera compacta al bajar.
 *
 * Va con animación ligada al scroll en lugar de JavaScript: sin oyente de
 * scroll, sin trabajo en el hilo principal en cada rueda del ratón y sin un
 * kilobyte más de descarga. Donde el navegador no la soporte —Firefox y
 * Safari antiguos— la cabecera simplemente se queda con sus 86px: se pierde el
 * detalle, no la función, que es quedarse pegada arriba.
 *
 * Se respeta `prefers-reduced-motion`: un elemento que cambia de tamaño
 * mientras se hace scroll molesta a quien tiene sensibilidad vestibular.
 */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.av-header,
		.av-header__inner,
		.av-header__eslogan,
		.av-header .wp-block-site-logo img {
			animation-timeline: scroll(root block);
			animation-range: 0 var(--av-header-h);
			animation-timing-function: linear;
			animation-fill-mode: both;
		}

		.av-header {
			animation-name: av-cabecera-compacta;
		}

		.av-header__inner {
			animation-name: av-cabecera-aire;
		}

		.av-header .wp-block-site-logo img {
			animation-name: av-logo-compacto;
		}

		/*
		 * Al compactar no caben símbolo y eslogan: se pliega el eslogan y el
		 * símbolo recupera su tamaño. Se anima el tamaño de letra —y no
		 * `display`, que no es animable— para que la caja llegue a cero.
		 */
		.av-header__eslogan {
			animation-name: av-eslogan-plegado;
		}
	}
}

@keyframes av-cabecera-compacta {
	to {
		min-height: var(--av-header-h-compacta);
		background: rgb(255 255 255 / 97%);
		box-shadow: 0 8px 24px -12px rgb(20 31 46 / 28%);
	}
}

@keyframes av-cabecera-aire {
	to {
		padding-block: var(--av-header-aire-compacta);
	}
}

@keyframes av-logo-compacto {
	to {
		max-height: var(--av-logo-h-compacta);
	}
}

@keyframes av-eslogan-plegado {
	to {
		font-size: 0;
		opacity: 0;
	}
}


.av-nav {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.av-nav .wp-block-navigation-item__content {
	color: var(--av-contrast);
	text-decoration: none;
}

.av-nav .wp-block-navigation-item__content:hover {
	color: var(--av-primary);
}

/*
 * La cabecera llevaba aquí el botón «Programar una cita». Se retiró a petición
 * del cliente y el menú pasó a ocupar su sitio: con `space-between` y solo dos
 * hijos —marca y menú—, el segundo se va al extremo derecho sin más reglas.
 *
 * Se conservan los ajustes de `gap` por ancho, que siguen haciendo falta para
 * que marca y menú no se toquen en pantallas estrechas.
 */
@media (width < 56rem) {
	.av-header__inner {
		gap: 0.75rem;
	}
}

/*
 * Con el panel del menú abierto, el fondo no se desplaza y no hay nada
 * flotando por encima.
 *
 * Las dos reglas van dentro de la media query del menú colapsable a propósito:
 * si alguien abre el panel en móvil y luego agranda la ventana, el menú vuelve
 * a su barra horizontal pero la clase `is-open` se queda puesta. Fuera de la
 * media query, eso dejaría la página sin scroll en escritorio.
 *
 * El botón flotante de llamada se declara con el z-index máximo posible, así
 * que se le monta encima al panel y tapa un enlace. Ocultarlo mientras el menú
 * está abierto es más honesto que pelear por el z-index: durante esos segundos
 * la persona está eligiendo a dónde ir, no llamando.
 */
@media (width < 56rem) {
	html:has(.av-menu--colapsable.is-open) {
		overflow: hidden;
	}

	/*
	 * Se listan los widgets flotantes de los plugins instalados: el botón de
	 * llamada (Call Now Button) y el de WhatsApp (QLWAPP). Los dos se declaran
	 * con z-index de siete cifras, así que no hay forma de ganarles por
	 * apilamiento; hay que apagarlos mientras el panel está abierto. Si mañana
	 * se añade otro widget flotante, su selector va aquí.
	 */
	body:has(.av-menu--colapsable.is-open) #callnowbutton,
	body:has(.av-menu--colapsable.is-open) .qlwapp__container {
		display: none;
	}
}

.av-footer {
	background: var(--av-navy);
	color: rgb(255 255 255 / 80%);
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.av-footer :where(h1, h2, h3, h4) {
	color: #fff;
	font-size: var(--wp--preset--font-size--large);
	margin-block: 0 0.75rem;
}

.av-footer a {
	color: rgb(255 255 255 / 88%);
	text-decoration: none;
}

.av-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.av-footer__cols {
	gap: clamp(1.5rem, 4vw, 3rem);
}

.av-footer__nav {
	font-size: var(--wp--preset--font-size--small);
	gap: 0.5rem;
}

/*
 * Redes sociales. El icono mide 24 px, que es justo el mínimo del criterio
 * 2.5.8 de la WCAG 2.2; se amplía el área pulsable a 44 px sin mover ni
 * agrandar el icono (el margen negativo compensa exactamente el crecimiento),
 * que es la medida cómoda para el dedo en móvil.
 */
.av-footer .wp-block-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	margin: -10px;
	border-radius: var(--av-radius-pill, 999px);
}

.av-footer__legal {
	margin-block: var(--wp--preset--spacing--60) 0;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid rgb(255 255 255 / 12%);
	color: rgb(255 255 255 / 55%);
}

/* La banda de contacto va pegada al footer: se elimina el hueco entre ambos. */
.av-contacto + .av-footer,
.wp-block-post-content > .av-contacto:last-child + * {
	margin-block-start: 0;
}

/*
 * Botón de contorno sobre fondo oscuro. Es el estilo que usa el diseño en la
 * banda de contacto: borde y texto blancos sobre azul, relleno solo al pasar
 * el cursor. Se mantiene el contraste por encima de 4.5:1 en ambos estados.
 */
.av-btn--outline-light {
	background-color: transparent;
	border-color: rgb(255 255 255 / 85%);
	color: #fff;
}

.av-btn--outline-light:hover,
.av-btn--outline-light:focus-visible {
	background-color: #fff;
	border-color: #fff;
	color: var(--av-primary-dark);
	text-decoration: none;
}

/*
 * Marca de la cabecera. El título del sitio actúa de respaldo mientras no haya
 * logo cargado; en cuanto se sube uno, se oculta el texto para no duplicar la
 * identidad. Se hace con :has() en lugar de JavaScript.
 */
/*
 * La marca es una columna: el símbolo arriba y el eslogan pegado debajo.
 * La dirección la impone el propio bloque desde parts/header.html
 * (layout.orientation = vertical); aquí solo se ajusta el pegado.
 */
.av-header__marca {
	gap: 2px;
	align-items: flex-start;
}

/*
 * El eslogan va como TEXTO, no dibujado dentro del PNG.
 *
 * En el logotipo antiguo estaba incrustado en la imagen y ocupaba 33x3
 * píxeles: una mancha roja ilegible. Como texto se lee, lo indexa un buscador,
 * lo dicta un lector de pantalla, escala con la tipografía del sistema y no
 * pesa un solo byte extra.
 *
 * #C20F2F es el rojo exacto muestreado de la cruz del logotipo. Sobre blanco
 * da 6,2:1 de contraste: cumple el AA de la WCAG (4,5:1) con margen.
 */
.av-header__eslogan {
	margin: 0;
	font-size: var(--av-eslogan-fs);
	font-weight: 600;
	font-style: italic;
	line-height: 1.15;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--av-brand-red);
}

.av-header__titulo a {
	color: var(--av-navy);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.01em;
	text-decoration: none;
	line-height: 1.1;
}

.av-header__marca:has(.wp-block-site-logo img) .av-header__titulo {
	display: none;
}

/*
 * Los elementos flex no encogen por debajo del ancho de su contenido salvo que
 * se les ponga min-width: 0. Sin esto, la marca + el menú + el CTA sumaban más
 * de 375px y provocaban desbordamiento horizontal en móvil.
 * Detectado en el banco de pruebas de viewports, no en escritorio.
 */
.av-header__inner > *,
.av-header__marca,
.av-header__titulo {
	min-width: 0;
}

/*
 * El título del sitio es un enlace aislado, no va dentro de una frase: le
 * aplica el mínimo de 24x24 de WCAG 2.2 · 2.5.8. Medía 21px de alto.
 * Se usa flex en vez de block para que min-block-size afecte al área de
 * pulsación sin romper el recorte con puntos suspensivos.
 */
.av-header__titulo a {
	display: flex;
	align-items: center;
	min-block-size: var(--av-tap-min);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (width < 34rem) {
	.av-header__titulo a {
		font-size: var(--wp--preset--font-size--small);
	}
}

/*
 * A 375px el CTA se salía 2px del viewport. Se aprieta el gap de la cabecera y
 * el padding del botón en el rango más estrecho. Verificado a 360px de ancho
 * de documento, que es el viewport real de un iPhone SE con la barra de
 * desplazamiento del banco de pruebas.
 */
@media (width < 34rem) {
	.av-header__inner {
		gap: 0.5rem;
	}
}


/*
 * Títulos: red de seguridad para que una palabra larga no se salga de su caja.
 *
 * `hyphens: auto` estaba aquí y se ha quitado. Chrome, con los diccionarios de
 * español instalados, partía titulares que SÍ cabían: «Aliados para am-pliar el
 * cuidado» en una caja de 320px con la palabra midiendo 150. Un titular de 40px
 * con guiones no se parece al Figma. En el banco de pruebas no se veía porque
 * el Chromium headless no trae esos diccionarios; salió al medir el sitio real.
 *
 * Queda `overflow-wrap: break-word`, que solo actúa cuando la palabra no cabe
 * de ninguna forma. Los tamaños ya están ajustados para que eso no ocurra.
 */
.av-servicio__titulo,
.av-entrada__titulo,
.av-split__titulo,
.av-section__title {
	overflow-wrap: break-word;
	hyphens: manual;
}

/*
 * Enlaces del pie que van solos en su párrafo (teléfono, correo): son objetivos
 * aislados, no enlaces dentro de una frase, así que les aplica el mínimo de
 * 24x24 de WCAG 2.2 · 2.5.8. El correo medía 234x18.
 */
/*
 * Enlaces del pie con área de pulsación suficiente (WCAG 2.2 · 2.5.8: 24x24).
 *
 * `:only-child` no bastaba: los teléfonos van dentro de un párrafo junto a su
 * etiqueta («Línea Telefónica» y el número en otra línea), así que el enlace
 * no es hijo único y se quedaba en 18px de alto. Se cubren también los enlaces
 * de teléfono y correo estén donde estén dentro del pie.
 */
.av-footer p > a:only-child,
.av-footer a[href^="tel:"],
.av-footer a[href^="mailto:"] {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--av-tap-min);
}

/* ---------------------------------------------------------------------------
   9. Migas de pan

   Vivían en el CSS del bloque av/servicio-hero, que es donde nacieron. Al
   usarlas también la cabecera de las entradas dejaron de pertenecer a un
   bloque: en un artículo, donde av/servicio-hero no está en la página, su hoja
   no se carga y las migas salían como una lista numerada suelta.

   Son treinta líneas compartidas por dos plantillas distintas; el sitio
   correcto para eso es la base.
   --------------------------------------------------------------------------- */

.av-migas__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--av-muted);
}

/*
 * El separador va como pseudoelemento y no como texto para que el lector de
 * pantalla no lea «punto medio» entre cada nivel.
 *
 * Y va escapado como \00B7, no como el carácter literal. base.css lo sirve
 * Apache sin `charset` en la cabecera y no lleva `@charset`, así que el
 * navegador lo lee como latin-1 y el punto medio salía «Â·». En el CSS de un
 * bloque no pasaba porque la compilación le antepone `@charset "UTF-8"`. La
 * escapada no depende de cómo se sirva el archivo.
 */
.av-migas__item + .av-migas__item::before {
	content: "\00B7";
	margin-inline-end: 0.4rem;
	color: var(--av-border);
}

.av-migas__item a {
	color: inherit;
	text-decoration: none;

	/* WCAG 2.2 · 2.5.8: enlace aislado, mínimo 24px de área de pulsación. */
	display: inline-flex;
	align-items: center;
	min-block-size: var(--av-tap-min);
}

.av-migas__item a:hover {
	color: var(--av-primary);
	text-decoration: underline;
}