/*
 * Arenas Clínica Médica — sistema visual v2 (refactorización).
 *
 * Lenguaje visual: lienzo crema cálido, fotografía protagonista con esquinas
 * redondeadas, titulares serif editoriales de gran tamaño, botones píldora,
 * bandas oscuras de conversión y footer casi negro. CSS propio, sin
 * frameworks. Los colores base provienen de theme.json.
 */

/* ==========================================================================
   0. Fuentes auto-alojadas (Montserrat + Open Sans, OFL). Sin recursos
      remotos: los .woff2 viven en assets/fonts/ del tema.
   ========================================================================== */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/montserrat-500.woff2") format("woff2");
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/montserrat-600.woff2") format("woff2");
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/montserrat-700.woff2") format("woff2");
}
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/opensans-400.woff2") format("woff2");
}
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/opensans-600.woff2") format("woff2");
}
@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/opensans-400i.woff2") format("woff2");
}

/* ==========================================================================
   1. Variables y base
   ========================================================================== */

:root {
	--arenas-radio: 14px;
	--arenas-radio-s: 8px;
	--arenas-transicion: 200ms ease;
	--arenas-sombra-suave: 0 2px 14px rgba(79, 62, 52, 0.08);
	--arenas-oscuro: var(--wp--preset--color--teal-noche);
	--arenas-negro: #242424;
	--arenas-maxw: 1240px;

	/* Alias de la paleta (identidad cliente 2026: turquesa prioritario).
	   El acento de marca pasa de marrón a TURQUESA. Se repuntan las
	   variables --color-brown/-dark al turquesa profundo accesible para
	   que todos los detalles, estados activos, pasos, pestañas y el fondo
	   del formulario de contacto adopten el turquesa de una sola vez,
	   manteniendo contraste WCAG AA (texto oscuro/blanco según superficie). */
	--color-background: #F6F7F2;
	--color-background-light: #FAFAF5;
	--color-background-alt: #F3F3EE;
	--color-primary: #5FC1CB;          /* Turquesa principal (logo) */
	--color-primary-deep: #1C6B72;     /* Turquesa profundo (fondos con texto blanco, enlaces) */
	--color-primary-hover: #278F99;    /* Turquesa hover */
	--color-brown: #1C6B72;            /* [compat] acento -> turquesa profundo */
	--color-brown-dark: #17565C;       /* [compat] acento oscuro -> turquesa */
	--color-nude: #CFB3A3;
	--color-border: #DDE3E4;
	--color-charcoal: #23262D;
	--color-white: #FFFFFF;
	--color-muted: #6C7A7C;
	--color-arenas-graphite: #23262D;
	--color-arenas-turquoise: #5FC1CB;
	--color-arenas-turquoise-light: #93D7DE;
	--color-footer: #4d4d4d;           /* Footer gris oscuro 30% (no negro) — petición cliente */
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

body {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.125rem;   /* 18px — lectura ampliada (petición cliente) */
	letter-spacing: 0;
	line-height: 1.7;
}

/* Titulares, menú y botones en Montserrat (petición cliente). */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.arenas-navegacion,
.arenas-boton,
.wp-block-button__link {
	font-family: var(--wp--preset--font-family--titulares);
}

@media (max-width: 600px) {
	body {
		font-size: 1.0625rem; /* 17px móvil */
	}
}

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

/* Fotografía siempre con esquinas suaves (rasgo del sistema). */
.wp-block-post-featured-image img,
.wp-block-image img,
.wp-block-media-text__media img,
.wp-block-video video,
.wp-block-embed iframe {
	border-radius: var(--arenas-radio);
}

/* Foco visible coherente (WCAG). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--turquesa-oscuro);
	outline-offset: 2px;
	border-radius: 2px;
}

.skip-link,
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.skip-link:focus,
.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	clip-path: none;
	color: var(--wp--preset--color--turquesa-profundo);
	display: block;
	font-weight: 600;
	height: auto;
	left: 1rem;
	line-height: normal;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100000;
	box-shadow: var(--arenas-sombra-suave);
}

/* Aparición suave de secciones (el JS añade .arenas-visible al entrar en
   pantalla; con prefers-reduced-motion nunca se aplica la clase inicial). */
.arenas-revelable {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 500ms ease, transform 500ms ease;
}

.arenas-revelable.arenas-visible {
	opacity: 1;
	transform: none;
}

/* Etiqueta superior (antetítulo/kicker) en mayúsculas pequeñas.
   Misma familia que los títulos (Montserrat), petición del cliente (punto 5). */
.arenas-etiqueta {
	color: var(--color-brown);
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

/* Entradillas / subtítulos bajo los títulos: misma familia que los títulos
   (Montserrat), peso medium (500) para lectura cómoda. El cuerpo largo de
   contenido permanece en Open Sans. Petición del cliente (punto 5). */
.arenas-hero-cover .wp-block-cover__inner-container > p,
.arenas-directorio__intro,
.arenas-consulta__intro {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 500;
}

/* ==========================================================================
   2. Botones píldora
   ========================================================================== */

.arenas-boton,
.wp-block-button__link,
.wp-block-search__button,
.arenas-form__envio button {
	/* Turquesa principal del logo (#5FC1CB) con texto grafito: contraste
	   AAA (~8:1). Al hover pasa a turquesa profundo con texto blanco. */
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: 999px;
	color: var(--color-arenas-graphite);
	cursor: pointer;
	display: inline-block;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	padding: 0.85rem 1.9rem;
	text-decoration: none;
	transition: background-color var(--arenas-transicion), color var(--arenas-transicion), border-color var(--arenas-transicion);
}

.arenas-boton:hover,
.arenas-boton:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.wp-block-search__button:hover,
.arenas-form__envio button:hover {
	background-color: var(--color-primary-deep);
	border-color: var(--color-primary-deep);
	color: #fff;
}

/* Variante contorno (sobre fondo claro). */
.arenas-boton--secundario,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--contraste);
	color: var(--wp--preset--color--contraste);
}

.arenas-boton--secundario:hover,
.arenas-boton--secundario:focus-visible,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--contraste);
	border-color: var(--wp--preset--color--contraste);
	color: #fff;
}

/* Variantes sobre fondo oscuro/fotográfico. */
.arenas-boton--claro {
	background-color: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--contraste);
}

.arenas-boton--claro:hover,
.arenas-boton--claro:focus-visible {
	background-color: var(--wp--preset--color--crema);
	border-color: var(--wp--preset--color--crema);
	color: var(--wp--preset--color--contraste);
}

.arenas-boton--contorno-claro {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.85);
	color: #fff;
}

.arenas-boton--contorno-claro:hover,
.arenas-boton--contorno-claro:focus-visible {
	background-color: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--contraste);
}

/* Botones claros dentro de secciones oscuras o cover. */
.arenas-seccion-oscura .wp-block-button__link,
.wp-block-cover .wp-block-button__link {
	background-color: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--contraste);
}

.arenas-seccion-oscura .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.85);
	color: #fff;
}

.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: #fff;
	color: var(--wp--preset--color--contraste);
}

/* ==========================================================================
   3. Cabecera
   ========================================================================== */

.arenas-barra-superior {
	background-color: var(--arenas-negro);
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.82rem;
}

.arenas-barra-superior__interior {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--arenas-maxw);
	padding: 0.45rem var(--wp--preset--spacing--50);
}

.arenas-barra-superior p {
	align-items: center;
	display: flex;
	gap: 1.5rem;
	margin: 0;
}

.arenas-barra-superior a {
	align-items: center;
	color: rgba(255, 255, 255, 0.9);
	display: inline-flex;
	gap: 0.4rem;
	text-decoration: none;
}

.arenas-barra-superior a:hover,
.arenas-barra-superior a:focus-visible {
	color: var(--wp--preset--color--turquesa);
	text-decoration: underline;
}

.arenas-barra-superior .arenas-icono {
	height: 14px;
	width: 14px;
}

.arenas-barra-superior__pendiente {
	color: rgba(255, 255, 255, 0.5);
	font-style: italic;
}

.arenas-barra-superior__cta a {
	color: var(--wp--preset--color--turquesa);
	font-weight: 600;
}

.arenas-cabecera {
	backdrop-filter: blur(10px);
	background-color: rgba(246, 247, 242, 0.95) !important;
	position: sticky;
	top: 0;
	transition: box-shadow var(--arenas-transicion), background-color 300ms ease;
	z-index: 1000;
}

/* Distribución de la referencia: logo a la izquierda, menú centrado y CTA
   a la derecha, en rejilla explícita de tres zonas. */
.arenas-cabecera__inner {
	align-items: center;
	display: grid !important;
	grid-template-columns: auto 1fr auto;
}

.arenas-cabecera__inner > .arenas-navegacion {
	justify-self: center;
}

.arenas-cabecera__inner > .arenas-cabecera__acciones {
	justify-self: end;
}

/* El menú horizontal solo respira en pantallas grandes: por debajo de
   1100 px se pasa a hamburguesa a la IZQUIERDA con el logo centrado, como
   la referencia (WordPress solo lo haría a <600 px, aquí se adelanta). */
@media (max-width: 1099px) {
	.arenas-navegacion .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.arenas-navegacion .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.arenas-cabecera__inner {
		grid-template-columns: 1fr auto 1fr;
	}

	.arenas-cabecera__inner > .arenas-navegacion {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.arenas-cabecera__inner > .arenas-cabecera__marca {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}

	.arenas-cabecera__inner > .arenas-cabecera__acciones {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}
}

.wp-block-navigation__responsive-container-open svg {
	height: 28px;
	width: 28px;
}

/* ------- Cabecera transparente superpuesta al hero (estilo IMR) -------
   Activa vía body.arenas-header-overlay en portada, páginas, fichas y blog.
   Arriba del todo: transparente con texto/logo blancos; al hacer scroll el
   JS añade --sombra y pasa a crema sólido con texto oscuro. */
.arenas-header-overlay .arenas-cabecera {
	left: 0;
	position: fixed;
	right: 0;
}

.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) {
	backdrop-filter: none;
	/* Totalmente transparente (petición del cliente): sin banda gris; la
	   legibilidad la aporta el velo oscuro del propio hero. */
	background: transparent !important;
	border-bottom-color: transparent !important;
	box-shadow: none;
}

/* Sin hueco entre la cabecera (fija) y el hero: el block-gap de WordPress
   dejaba una rayita clara asomando por encima del vídeo. */
.arenas-header-overlay .wp-site-blocks > main.wp-block-group {
	margin-block-start: 0 !important;
}

.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .arenas-navegacion a,
.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .wp-block-navigation__submenu-icon {
	color: #fff;
}

.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .arenas-boton-cita .wp-block-button__link {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.85);
	color: #fff;
}

.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .arenas-boton-cita .wp-block-button__link:hover {
	background-color: #fff;
	color: var(--wp--preset--color--contraste);
}

/* Alternancia de logotipo claro/oscuro en el fallback del tema. */
.arenas-logo-fallback .arenas-logo-claro {
	display: none;
}

.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .arenas-logo-fallback .arenas-logo-oscuro {
	display: none;
}

.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .arenas-logo-fallback .arenas-logo-claro {
	display: block;
	max-height: 68px;
}

/* El subrayado de hover en blanco sobre el hero. */
.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .arenas-navegacion > .wp-block-navigation__container > .wp-block-navigation-item > a::after,
.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .arenas-navegacion > .wp-block-navigation__container > .wp-block-navigation-submenu > a::after {
	background-color: #fff;
}

/* Icono hamburguesa blanco sobre el hero. */
.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .wp-block-navigation__responsive-container-open {
	color: #fff;
}

/* La altura de la cabecera se controla con el padding del logo/CTA para
   que el estado sticky sea más compacto SIN saltos de contenido (solo se
   reduce el logo, la caja mantiene su alto). */
.arenas-cabecera.arenas-cabecera--sombra {
	box-shadow: 0 1px 0 rgba(36, 36, 36, 0.08), 0 8px 24px rgba(36, 36, 36, 0.05);
}

.arenas-cabecera__marca .custom-logo,
.arenas-cabecera__marca img {
	height: auto;
	max-height: 52px;
	transition: max-height var(--arenas-transicion);
	width: auto;
}

.arenas-cabecera--sombra .arenas-cabecera__marca .custom-logo,
.arenas-cabecera--sombra .arenas-cabecera__marca img {
	max-height: 42px;
}

/* Si se sube un logotipo personalizado (imagen) desde el Editor del sitio, que
   también se aclare (blanco) sobre el hero cuando la cabecera es transparente, y
   recupere sus colores al hacer scroll. Así el «cambio de logo al bajar» funciona
   con cualquier logo, no solo con el del tema. */
.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .arenas-cabecera__marca .custom-logo {
	filter: brightness(0) invert(1);
	transition: filter var(--arenas-transicion);
}

/* ------- Carrito y cuenta de WooCommerce en la cabecera ------- */
.arenas-cabecera__acciones .wc-block-mini-cart,
.arenas-cabecera__acciones .wp-block-woocommerce-customer-account {
	display: flex;
	align-items: center;
	margin: 0;
}

.arenas-cabecera__acciones .wc-block-mini-cart__button,
.arenas-cabecera__acciones .wc-block-customer-account__link {
	color: var(--wp--preset--color--contraste);
	padding: 0.25rem;
	line-height: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.arenas-cabecera__acciones .wc-block-mini-cart__button svg,
.arenas-cabecera__acciones .wc-block-customer-account__account-icon {
	width: 22px;
	height: 22px;
	display: block;
}

.arenas-cabecera__acciones .wc-block-mini-cart__badge {
	background: var(--color-brown);
	color: #fff;
}

/* Separación extra entre el carrito y el botón «Pide cita». El hueco de la
   zona de acciones (0.5rem) va bien entre la lupa y el carrito, pero deja
   el botón pegado al icono (y a su contador). Solo se amplía ante el CTA. */
.arenas-cabecera__acciones .arenas-cabecera__cta {
	margin-left: 0.75rem;
}

/* Iconos en blanco sobre el hero (cabecera transparente). */
.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .wc-block-mini-cart__button,
.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .wc-block-customer-account__link {
	color: #fff;
}

.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .wc-block-mini-cart__button svg,
.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .wc-block-customer-account__account-icon {
	fill: #fff;
	stroke: #fff;
	color: #fff;
}

/* ------- «Tarjeta Regalo» destacada en el menú desplegable ------- */
/* Mayor especificidad que la regla base del submenú, para que el color mande. */
.arenas-navegacion a[href*="tarjeta-regalo"],
.arenas-navegacion .wp-block-navigation__submenu-container a[href*="tarjeta-regalo"] {
	color: #1c6b72 !important;
	font-weight: 700;
}

.arenas-navegacion a[href*="tarjeta-regalo"]:hover,
.arenas-navegacion a[href*="tarjeta-regalo"]:focus-visible,
.arenas-navegacion .wp-block-navigation__submenu-container a[href*="tarjeta-regalo"]:hover,
.arenas-navegacion .wp-block-navigation__submenu-container a[href*="tarjeta-regalo"]:focus-visible {
	color: #14535a !important;
}

.arenas-navegacion a {
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	position: relative;
}

/* Hover editorial: subrayado fino que aparece bajo el enlace. */
.arenas-navegacion > .wp-block-navigation__container > .wp-block-navigation-item > a::after,
.arenas-navegacion > .wp-block-navigation__container > .wp-block-navigation-submenu > a::after {
	background-color: var(--wp--preset--color--turquesa-oscuro);
	bottom: -6px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--arenas-transicion);
	width: 100%;
}

.arenas-navegacion > .wp-block-navigation__container > .wp-block-navigation-item > a:hover::after,
.arenas-navegacion > .wp-block-navigation__container > .wp-block-navigation-item > a:focus-visible::after,
.arenas-navegacion > .wp-block-navigation__container > .wp-block-navigation-submenu > a:hover::after {
	transform: scaleX(1);
}

/* Desplegables estilo IMR: panel blanco cálido, sin adornos, esquinas
   suaves, una columna con mucha respiración y enlaces serenos. */
.arenas-navegacion .wp-block-navigation__submenu-container {
	background-color: #FBFAF7 !important;
	border: 0;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 24px 60px rgba(36, 36, 36, 0.16);
	/* !important: el hover de core la rebaja a 200px. */
	min-width: 320px !important;
	padding: 1.4rem 0.9rem;
}

.arenas-navegacion .wp-block-navigation__submenu-container a {
	border-radius: 8px;
	color: var(--wp--preset--color--contraste) !important;
	font-size: 0.98rem;
	letter-spacing: 0.01em;
	line-height: 1.35;
	padding: 0.62rem 1.2rem !important;
	transition: background-color var(--arenas-transicion), color var(--arenas-transicion), padding-left var(--arenas-transicion);
	white-space: nowrap;
}

.arenas-navegacion .wp-block-navigation__submenu-container a:hover,
.arenas-navegacion .wp-block-navigation__submenu-container a:focus-visible {
	background-color: rgba(129, 201, 210, 0.12);
	color: var(--wp--preset--color--turquesa-profundo) !important;
	padding-left: 1.45rem !important;
}

/* Paneles anchos (listas planas muy largas, como Dermatología): dos
   columnas equilibradas y CENTRADOS bajo su elemento para no salirse de la
   pantalla en anchos intermedios. Solo primer nivel y solo escritorio. */
@media (min-width: 1100px) {
	.arenas-navegacion .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:nth-child(14)) {
		columns: 2;
		column-gap: 1rem;
		display: block;
		left: 50%;
		min-width: 700px !important;
		padding: 1.4rem 1.1rem;
		right: auto;
		transform: translateX(-50%);
	}

	.arenas-navegacion .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:nth-child(14)) > .wp-block-navigation-item {
		break-inside: avoid;
		display: block;
		width: 100%;
	}

	.arenas-navegacion .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container:has(> .wp-block-navigation-item:nth-child(14)) a {
		white-space: normal;
	}

	/* Chevron › junto al rótulo del subgrupo: indica que abre a la derecha. */
	.arenas-navegacion .wp-block-navigation__submenu-container .wp-block-navigation-submenu > a::after {
		border-bottom: 2px solid currentColor;
		border-right: 2px solid currentColor;
		content: "";
		display: inline-block;
		height: 7px;
		margin-left: 0.5rem;
		transform: rotate(-45deg) translateY(-1px);
		width: 7px;
	}
}

/* Subgrupos anidados (Alopecia, Faciales/Corporal): rótulo sereno con
   separador superior, como los grupos de la referencia. En bloque para que
   el rótulo quede ENCIMA de su lista, no al lado. */
.arenas-navegacion .wp-block-navigation__submenu-container .wp-block-navigation-submenu {
	border-top: 1px solid var(--color-border);
	display: block;
	margin-top: 0.6rem;
	padding-top: 0.5rem;
}

.arenas-navegacion .wp-block-navigation__submenu-container .wp-block-navigation-submenu > a {
	color: var(--color-brown) !important;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Evitar que el último desplegable (Contacto) se salga por la derecha.
   Solo el primer nivel: sin acotar, capturaba también al último subgrupo
   anidado (Alopecia) y lo lanzaba fuera de la pantalla. */
.arenas-navegacion > .wp-block-navigation__container > .wp-block-navigation-item:last-child > .wp-block-navigation__submenu-container {
	left: auto;
	right: 0;
}

/* Base de los subgrupos anidados: plegados por defecto (en el panel móvil
   manda el acordeón, que tiene reglas más específicas). */
.arenas-navegacion .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	display: none;
	height: auto;
	opacity: 1;
	visibility: visible;
}

/* El chevron nativo del subgrupo sobra en escritorio (lo dibuja el ::after
   del rótulo); en el panel móvil sigue mandando el acordeón. */
.arenas-navegacion .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
	display: none;
}

/* Subgrupos en escritorio: FLYOUT a la DERECHA del panel (petición del
   cliente). Es estable: no desplaza el resto de elementos, el panel
   principal se mantiene corto y el flyout arranca pegado al rótulo, sin
   hueco muerto para el ratón. Con scroll interno si la lista es larga. */
@media (min-width: 1100px) {
	.arenas-navegacion .wp-block-navigation__submenu-container .wp-block-navigation-submenu {
		position: relative;
	}

	/* !important: la regla de hover de core (.has-child:not(.open-on-click)
	   :hover > …) gana en especificidad y reimpone overflow:visible y
	   width:auto justo al pasar el ratón, cortando el flyout.
	   El mostrado/ocultado va por visibility+opacity (no display) para
	   poder dar un periodo de gracia al cerrar: si el ratón se sale un
	   momento del recorrido, el panel aguanta abierto ~0,8 s. */
	.arenas-navegacion .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		background-color: #FBFAF7 !important;
		border: 0;
		border-radius: 12px;
		box-shadow: 0 24px 60px rgba(36, 36, 36, 0.2);
		display: block;
		left: 100%;
		max-height: min(65vh, 620px) !important;
		max-width: 420px !important;
		min-width: 320px !important;
		opacity: 0;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		padding: 1rem 0.9rem;
		position: absolute;
		top: -0.6rem;
		transition: opacity 0.16s ease 0.8s, visibility 0s linear 0.96s;
		visibility: hidden;
		width: max-content !important;
		z-index: 10;
	}

	.arenas-navegacion .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container a {
		white-space: normal;
	}

	.arenas-navegacion .wp-block-navigation__submenu-container .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
	.arenas-navegacion .wp-block-navigation__submenu-container .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
		opacity: 1;
		transition: opacity 0.14s ease 0.05s, visibility 0s linear 0.05s;
		visibility: visible;
	}

	/* El último subgrupo del panel (Alopecia) queda abajo: su flyout se
	   ancla por abajo y crece hacia ARRIBA para no salirse de la pantalla
	   en portátiles poco altos. */
	.arenas-navegacion .wp-block-navigation__submenu-container .wp-block-navigation-submenu:last-child > .wp-block-navigation__submenu-container {
		bottom: -0.6rem;
		top: auto;
	}
}

.arenas-boton-cita .wp-block-button__link {
	font-size: 0.88rem;
	padding: 0.65rem 1.5rem;
	white-space: nowrap; /* nunca partir «Pide cita» en vertical */
}

/* En móvil la cabecera (hamburguesa · logo · búsqueda · CTA) no tiene ancho
   para el botón «Pide cita»; se oculta porque la franja de contacto justo
   debajo ya ofrece WhatsApp, teléfono y «Pide cita». Punto 6 (responsive). */
@media (max-width: 600px) {
	.arenas-cabecera__acciones .arenas-cabecera__cta {
		display: none;
	}
}

/* ------- Buscador de la cabecera (lupa + barra desplegable) ------- */
.arenas-busqueda__boton {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--contraste);
	cursor: pointer;
	display: flex;
	height: 44px;
	justify-content: center;
	padding: 0;
	transition: background-color var(--arenas-transicion);
	width: 44px;
}

.arenas-busqueda__boton:hover,
.arenas-busqueda__boton:focus-visible {
	background-color: rgba(36, 36, 36, 0.08);
}

.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .arenas-busqueda__boton {
	color: #fff;
}

.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .arenas-busqueda__boton:hover,
.arenas-header-overlay .arenas-cabecera:not(.arenas-cabecera--sombra) .arenas-busqueda__boton:focus-visible {
	background-color: rgba(255, 255, 255, 0.16);
}

/* Barra a todo el ancho bajo la cabecera, como la referencia. */
.arenas-busqueda__panel {
	background-color: var(--wp--preset--color--crema);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 24px 48px rgba(36, 36, 36, 0.12);
	display: none;
	left: 0;
	padding: 1.1rem clamp(1rem, 5vw, 4rem);
	position: absolute;
	right: 0;
	top: 100%;
}

.arenas-busqueda__panel.arenas-busqueda__panel--abierto,
.arenas-busqueda:not(.arenas-busqueda--js):focus-within .arenas-busqueda__panel {
	display: block;
}

.arenas-busqueda__form {
	display: flex;
	gap: 0.75rem;
	margin: 0 auto;
	max-width: 760px;
}

.arenas-busqueda__form input[type="search"] {
	background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	color: var(--wp--preset--color--contraste);
	flex: 1;
	font-size: 1rem;
	min-width: 0;
	padding: 0.65rem 1.25rem;
}

.arenas-busqueda__form input[type="search"]:focus-visible {
	border-color: var(--wp--preset--color--turquesa-profundo);
	outline: 2px solid var(--wp--preset--color--turquesa-profundo);
	outline-offset: 1px;
}

.arenas-busqueda__enviar {
	background-color: var(--color-brown);
	border: 1px solid var(--color-brown);
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0.65rem 1.5rem;
	transition: background-color var(--arenas-transicion);
}

.arenas-busqueda__enviar:hover,
.arenas-busqueda__enviar:focus-visible {
	background-color: var(--wp--preset--color--teal-noche);
}

.admin-bar .arenas-cabecera {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* En móvil (≤782px) la barra de administración de WordPress es «absolute» (se
   va con el scroll), lo que dejaba un hueco sobre el header o lo solapaba. La
   mantenemos FIJA también en móvil, igual que en escritorio: así el header
   pegajoso (top = altura de la barra) se apoya justo debajo, sin hueco ni
   recorte. Solo afecta a usuarios con sesión iniciada; el visitante no la ve. */
@media screen and (max-width: 782px) {
	#wpadminbar {
		position: fixed !important;
		top: 0 !important;
	}

	.admin-bar .arenas-cabecera {
		top: 46px;
	}
}

/* Menú móvil en panel oscuro a pantalla completa (estilo de la referencia):
   enlaces serif blancos con chevron a la derecha y submenús en acordeón. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--contraste) !important;
	color: #fff;
	overflow-y: auto;
	padding: 5.5rem 1.9rem 3rem;
}

/* El panel hereda la justificación derecha del menú de escritorio: aquí
   todo va alineado a la izquierda y a ancho completo. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	text-align: left;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	padding: 0.55rem 0;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open a {
	color: #fff !important;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.35rem;
}

/* Core impone columna alineada según la justificación del menú de
   escritorio (derecha): aquí cada elemento va a ancho completo. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: stretch !important;
}

/* Fila superior de cada elemento: enlace a la izquierda, chevron a la
   derecha; el submenú abierto ocupa todo el ancho debajo. */
.wp-block-navigation__responsive-container.is-menu-open .has-child {
	align-items: center !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* WordPress oculta los iconos de submenú dentro del panel (los mostraría
   todos desplegados); aquí el chevron es el control del acordeón. Core le
   deja un tamaño de .6em al botón, así que se redimensiona a tocable. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	align-items: center;
	color: #fff;
	display: flex !important;
	height: 44px;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: 44px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
	flex: none;
	height: 22px;
	transform: rotate(-90deg);
	transition: transform var(--arenas-transicion);
	width: 22px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(0deg);
}

/* Acordeón: los submenús permanecen plegados hasta pulsar el chevron
   (WordPress los mostraría todos abiertos y el panel sería inabarcable). */
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
	display: none;
	flex-basis: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
	display: block;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent !important;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	columns: 1 !important;
	left: auto !important;
	min-width: 0;
	padding: 0.25rem 0 0.6rem 0.85rem;
	transform: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	color: rgba(255, 255, 255, 0.78) !important;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1rem;
	padding: 0.45rem 0 !important;
	white-space: normal;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a:focus-visible {
	background-color: transparent;
	color: #fff !important;
}

/* Subgrupos anidados dentro del panel: rótulo nude con separador tenue. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-submenu {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-submenu > a {
	color: var(--wp--preset--color--nude) !important;
	font-size: 0.8rem !important;
}

.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contraste);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: #fff;
}

/* ==========================================================================
   4. Hero de portada e interiores (cover)
   ========================================================================== */

.arenas-hero-cover {
	border-radius: 0;
	/* Pantalla COMPLETA (petición del cliente): el vídeo del hero llena
	   todo el viewport, sin franja visible debajo. svh evita el salto de
	   la barra de direcciones en móvil (vh queda de reserva). */
	min-height: 100vh !important;
	min-height: 100svh !important;
}

.arenas-hero-cover .wp-block-cover__inner-container {
	margin: 0 auto;
	max-width: var(--arenas-maxw);
	padding: 0 var(--wp--preset--spacing--50);
	width: 100%;
}

.arenas-hero-cover h1 {
	color: #fff;
	/* Titular principal más contenido (petición del cliente). El !important
	   gana a la clase de preset «has-hero-font-size» que aplica WordPress. */
	font-size: clamp(2.1rem, 4.2vw, 3.5rem) !important;
	line-height: 1.12;
	max-width: 17ch;
}

.arenas-hero-cover p {
	color: rgba(255, 255, 255, 0.92);
	max-width: 46ch;
}

/* Pestaña activa de la barra de anclas (scrollspy). */
.arenas-anclas a[aria-current="true"] {
	box-shadow: inset 0 -2px 0 var(--color-brown);
	color: var(--color-brown);
	font-weight: 600;
}

/* Hero interior (fichas y páginas): generoso, como la referencia. */
.arenas-hero-interior {
	min-height: min(64vh, 620px) !important;
}

.arenas-hero-interior h1 {
	color: #fff;
	line-height: 1.1;
}

/* Portada-carrusel: fondo rotativo de imágenes del hero de especialidad, por
   detrás de la capa de color (dim) y del título. */
.arenas-hero-carrusel {
	inset: 0;
	overflow: hidden;
	position: absolute;
	z-index: 0;
}

/* Si la portada tiene carrusel, manda el carrusel: se oculta la imagen
   destacada del bloque «cover» (a veces genérica) para que se vea la rotación. */
.arenas-hero-interior:has(.arenas-hero-carrusel) .wp-block-cover__image-background,
.arenas-hero-interior:has(.arenas-hero-carrusel) .wp-block-cover__video-background {
	display: none;
}

.arenas-hero-carrusel .arenas-carrusel__pista {
	inset: 0;
	position: absolute;
}

.arenas-hero-carrusel .arenas-carrusel__img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	transition: opacity 1200ms ease;
	width: 100%;
}

.arenas-hero-carrusel .arenas-carrusel__img.is-activa {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.arenas-hero-carrusel .arenas-carrusel__img {
		transition: none;
	}
}

/* Barra de anclas bajo el hero, como pestañas a todo el ancho (referencia):
   celdas iguales con separadores finos y hover en beige; en móvil se
   convierte en acordeón «Menú» apilado. */
.arenas-anclas {
	background-color: var(--wp--preset--color--crema);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 800;
}

.arenas-anclas__resumen {
	display: none;
}

.arenas-anclas ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.arenas-anclas li {
	border-left: 1px solid var(--color-border);
	flex: 1 1 0;
	text-align: center;
}

.arenas-anclas li:first-child {
	border-left: 0;
}

.arenas-anclas a {
	color: var(--color-brown);
	display: block;
	font-size: 1.02rem;
	padding: 1.3rem 1rem;
	text-decoration: none;
	transition: background-color var(--arenas-transicion);
}

.arenas-anclas a:hover,
.arenas-anclas a:focus-visible {
	background-color: #EDE9E0;
}

@media (max-width: 768px) {
	.arenas-anclas {
		position: static;
	}

	.arenas-anclas__resumen {
		color: var(--color-brown);
		cursor: pointer;
		display: block;
		font-size: 0.95rem;
		list-style: none;
		padding: 1rem;
		text-align: center;
	}

	.arenas-anclas__resumen::-webkit-details-marker {
		display: none;
	}

	.arenas-anclas__resumen::after {
		content: " ⌃";
	}

	.arenas-anclas__detalle:not([open]) .arenas-anclas__resumen::after {
		content: " ⌄";
	}

	.arenas-anclas ul {
		flex-direction: column;
	}

	.arenas-anclas li {
		border-left: 0;
		border-top: 1px solid var(--color-border);
	}

	.arenas-anclas a {
		padding: 0.9rem 1rem;
	}
}

/* «Nuestros tratamientos» relacionados en la ficha (referencia). */
.arenas-rel-tratamientos {
	margin: 0 auto;
	max-width: var(--arenas-maxw);
	scroll-margin-top: 140px;
}

.arenas-rel-tratamientos__etiqueta {
	color: var(--wp--preset--color--texto);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	margin: 0 0 1.5rem;
	text-transform: uppercase;
}

.arenas-rel-tratamientos h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 2rem;
}

/* Tarjetas con miniatura por tratamiento, a todo lo ancho. */
.arenas-rel-tratamientos__grid {
	display: grid;
	gap: 2rem 1.5rem;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.arenas-rel-tratamientos__grid a {
	color: var(--wp--preset--color--contraste);
	display: block;
	text-decoration: none;
}

.arenas-rel-tratamientos__foto {
	aspect-ratio: 4 / 3;
	background-color: var(--wp--preset--color--nude);
	border-radius: var(--arenas-radio);
	display: block;
	margin-bottom: 0.8rem;
	overflow: hidden;
}

.arenas-rel-tratamientos__foto img {
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
	width: 100%;
}

.arenas-rel-tratamientos__grid a:hover .arenas-rel-tratamientos__foto img,
.arenas-rel-tratamientos__grid a:focus-visible .arenas-rel-tratamientos__foto img {
	transform: scale(1.05);
}

.arenas-rel-tratamientos__nombre {
	display: block;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.1rem;
	line-height: 1.3;
	transition: color var(--arenas-transicion);
}

.arenas-rel-tratamientos__grid a:hover .arenas-rel-tratamientos__nombre,
.arenas-rel-tratamientos__grid a:focus-visible .arenas-rel-tratamientos__nombre {
	color: var(--color-brown);
}

/* ------- Maquinaria al final de la ficha (por especialidad) ------- */
.arenas-maquinaria {
	margin: 0 auto;
	max-width: var(--arenas-maxw);
	scroll-margin-top: 140px;
}

.arenas-maquinaria h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 2rem;
}

.arenas-maquinaria__grid {
	display: grid;
	gap: 2rem 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.arenas-maquinaria__grid a,
.arenas-maquinaria__grid > li {
	color: var(--wp--preset--color--contraste);
	display: block;
	text-decoration: none;
}

.arenas-maquina-card__foto {
	align-items: center;
	aspect-ratio: 4 / 3;
	background-color: var(--wp--preset--color--crema);
	border-radius: var(--arenas-radio);
	display: flex;
	justify-content: center;
	margin-bottom: 0.8rem;
	overflow: hidden;
	padding: 0.8rem;
}

.arenas-maquina-card__foto img {
	height: 100%;
	object-fit: contain;
	transition: transform 400ms ease;
	width: 100%;
}

.arenas-maquinaria__grid a:hover .arenas-maquina-card__foto img,
.arenas-maquinaria__grid a:focus-visible .arenas-maquina-card__foto img {
	transform: scale(1.04);
}

.arenas-maquina-card__ph {
	background-color: var(--wp--preset--color--nude);
	border-radius: var(--arenas-radio);
	display: block;
	height: 100%;
	width: 100%;
}

.arenas-maquina-card__nombre {
	display: block;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.02rem;
	line-height: 1.3;
	transition: color var(--arenas-transicion);
}

.arenas-maquinaria__grid a:hover .arenas-maquina-card__nombre,
.arenas-maquinaria__grid a:focus-visible .arenas-maquina-card__nombre {
	color: var(--color-brown);
}

.arenas-maquinaria__pie {
	margin-top: 2.5rem;
}

/* ============================================================
   PÁGINA DE TECNOLOGÍA — diseño premium
   ============================================================ */

/* Hero: degradado inferior para dar profundidad al título. */
.arenas-tecnologia-indice .arenas-hero-interior::after {
	background: linear-gradient(180deg, rgba(18, 38, 42, 0.1) 0%, rgba(18, 38, 42, 0.5) 100%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.arenas-tecnologia-indice .arenas-hero-interior .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* Párrafo guía de entrada: centrado, sereno y con aire. */
.arenas-tecnologia-indice .wp-block-post-content > p.has-large-font-size:first-child {
	color: var(--wp--preset--color--texto);
	font-size: clamp(1.15rem, 2.1vw, 1.45rem);
	line-height: 1.62;
	margin: 3rem auto 0.5rem;
	max-width: 720px;
	text-align: center;
}

/* --- Vitrina de equipos (rejilla premium) --- */
.arenas-tecno-showcase {
	margin: 3.5rem auto 4.5rem;
	text-align: center;
}

.arenas-tecno-eyebrow {
	color: var(--color-brown);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	margin: 0 0 0.6rem;
	text-transform: uppercase;
}

.arenas-tecno-showcase__titulo {
	font-size: clamp(1.9rem, 4vw, 2.7rem);
	letter-spacing: -0.02em;
	margin: 0 0 2.6rem;
}

.arenas-tecno-showcase__pie {
	margin-top: 2.75rem;
	text-align: center;
}

/* La misma vitrina, reutilizada al final de las fichas de tratamiento. */
.arenas-tecno-showcase--ficha {
	margin: 1rem auto 0;
}

.arenas-tecno-cards {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.arenas-tecno-card > a,
.arenas-tecno-card > div {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 18px;
	color: var(--wp--preset--color--contraste);
	display: block;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}

.arenas-tecno-card__media {
	aspect-ratio: 4 / 3;
	background: linear-gradient(155deg, #f4f2ed 0%, #e7edec 100%);
	display: block;
	overflow: hidden;
	position: relative;
}

.arenas-tecno-card__media img {
	height: 100%;
	object-fit: contain;
	padding: 1.5rem;
	transition: transform 0.55s ease;
	width: 100%;
}

.arenas-tecno-card__ph {
	display: block;
	height: 100%;
	width: 100%;
}

.arenas-tecno-card__num {
	color: rgba(28, 107, 114, 0.32);
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.05rem;
	font-weight: 700;
	left: 1.1rem;
	letter-spacing: 0.02em;
	position: absolute;
	top: 0.85rem;
	z-index: 1;
}

.arenas-tecno-card__info {
	align-items: center;
	display: flex;
	gap: 0.8rem;
	justify-content: space-between;
	padding: 1.1rem 1.3rem 1.25rem;
}

.arenas-tecno-card__nombre {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.06rem;
	line-height: 1.25;
}

.arenas-tecno-card__cta {
	align-items: center;
	color: var(--color-brown);
	display: inline-flex;
	flex: none;
	font-size: 0.8rem;
	font-weight: 600;
	gap: 0.3rem;
}

.arenas-tecno-card__arrow {
	transition: transform 0.3s ease;
}

.arenas-tecno-card > a:focus-visible {
	border-color: var(--color-brown);
	box-shadow: 0 0 0 3px rgba(28, 107, 114, 0.35);
	outline: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.arenas-tecno-card > a:hover {
		border-color: transparent;
		box-shadow: 0 32px 60px -30px rgba(36, 36, 36, 0.3);
		transform: translateY(-6px);
	}

	.arenas-tecno-card > a:hover .arenas-tecno-card__media img {
		transform: scale(1.06);
	}

	.arenas-tecno-card > a:hover .arenas-tecno-card__arrow {
		transform: translateX(4px);
	}
}

/* --- Fichas detalladas: listado editorial numerado --- */
.arenas-tecnologia-indice .wp-block-post-content {
	counter-reset: arenas-maq;
}

.arenas-tecnologia-indice .arenas-maquina.wp-block-media-text {
	margin-block: clamp(3rem, 7vw, 5rem);
}

.arenas-tecnologia-indice .arenas-maquina .wp-block-media-text__media img {
	border-radius: 18px;
	box-shadow: 0 30px 60px -30px rgba(36, 36, 36, 0.26);
}

.arenas-tecnologia-indice .arenas-maquina .wp-block-media-text__content::before {
	color: rgba(28, 107, 114, 0.3);
	content: counter(arenas-maq, decimal-leading-zero);
	counter-increment: arenas-maq;
	display: block;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0.7rem;
}

.arenas-tecnologia-indice .arenas-maquina .wp-block-media-text__content h2 {
	margin-top: 0;
}

.arenas-tecnologia-indice .arenas-maquina .wp-block-media-text__content p:last-child a {
	color: var(--color-brown);
	font-weight: 600;
	text-decoration: none;
}

.arenas-tecnologia-indice .arenas-maquina .wp-block-media-text__content p:last-child a:hover {
	text-decoration: underline;
}

/* --- Cierre con llamada a la acción --- */
.arenas-tecno-cierre {
	background: linear-gradient(135deg, #14535a 0%, #1c6b72 100%);
	border-radius: 22px;
	color: #fff;
	margin: 4.5rem auto 2rem;
	max-width: 1100px;
	padding: clamp(2.6rem, 6vw, 4.5rem) 1.5rem;
}

.arenas-tecno-cierre h2 {
	color: #fff;
	font-size: clamp(1.6rem, 3.5vw, 2.3rem);
	letter-spacing: -0.01em;
}

.arenas-tecno-cierre p {
	color: rgba(255, 255, 255, 0.9);
	margin-inline: auto;
	max-width: 560px;
}

.arenas-tecno-cierre .wp-block-button__link {
	background: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--contraste);
}

.arenas-tecno-cierre .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.9);
}

/* ============================================================
   PÁGINA INDIVIDUAL DE MÁQUINA — premium
   ============================================================ */
.arenas-tecnologia-maquina .wp-block-post-content > .wp-block-image img {
	background: linear-gradient(155deg, #f4f2ed 0%, #e7edec 100%);
	border-radius: 20px;
	box-shadow: 0 32px 70px -34px rgba(36, 36, 36, 0.3);
	padding: 1.5rem;
}

.arenas-tecnologia-maquina .wp-block-post-content > .wp-block-image {
	margin-block: 0 2.5rem;
}

.arenas-tecnologia-maquina .wp-block-post-content h2 {
	font-size: clamp(1.4rem, 3vw, 1.95rem);
	letter-spacing: -0.01em;
	margin-top: 2.8rem;
	padding-top: 2rem;
	position: relative;
}

.arenas-tecnologia-maquina .wp-block-post-content h2::before {
	background: var(--color-brown);
	border-radius: 2px;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	top: 0;
	width: 42px;
}

.arenas-tecnologia-maquina .wp-block-post-content .wp-block-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.arenas-tecnologia-maquina .wp-block-post-content .wp-block-list li {
	padding-left: 1.7rem;
	position: relative;
}

.arenas-tecnologia-maquina .wp-block-post-content .wp-block-list li::before {
	color: var(--color-brown);
	content: "✓";
	font-weight: 700;
	left: 0;
	position: absolute;
	top: 0;
}

/* ------- Página de Tecnología: bandas imagen + texto por máquina ------- */
.arenas-maquina.wp-block-media-text {
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin-block: clamp(2.5rem, 6vw, 4.5rem);
}

.arenas-maquina .wp-block-media-text__media img {
	background-color: var(--wp--preset--color--crema);
	border-radius: 14px;
	box-shadow: 0 24px 50px -30px rgba(36, 36, 36, 0.28);
}

.arenas-maquina .wp-block-media-text__content h2 {
	margin-top: 0;
}

@media (max-width: 600px) {
	.arenas-maquina-card__nombre {
		font-size: 0.95rem;
	}
}

/* Grid compacto del equipo en la ficha (referencia). */
.arenas-equipo-mini {
	margin: 0 auto;
	max-width: var(--arenas-maxw);
	padding-top: var(--wp--preset--spacing--50);
}

.arenas-equipo-mini h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.arenas-equipo-mini__grid {
	display: grid;
	gap: 2rem 1.5rem;
	grid-template-columns: repeat(6, 1fr);
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
}

.arenas-equipo-mini a {
	color: var(--wp--preset--color--contraste);
	display: block;
	text-decoration: none;
}

.arenas-equipo-mini__foto {
	aspect-ratio: 4 / 5;
	background-color: var(--color-nude);
	border-radius: var(--arenas-radio-s);
	display: block;
	margin-bottom: 0.6rem;
	overflow: hidden;
}

.arenas-equipo-mini__foto img {
	border-radius: var(--arenas-radio-s);
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.arenas-equipo-mini__nombre {
	display: block;
	font-size: 0.92rem;
	font-weight: 600;
}

.arenas-equipo-mini__cargo {
	color: var(--wp--preset--color--texto);
	display: block;
	font-size: 0.8rem;
}

.arenas-equipo-mini a:hover .arenas-equipo-mini__nombre {
	color: var(--wp--preset--color--turquesa-profundo);
	text-decoration: underline;
}

@media (max-width: 1024px) {
	.arenas-equipo-mini__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.arenas-rel-tratamientos__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.arenas-equipo-mini__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.arenas-rel-tratamientos__grid {
		gap: 1.4rem 1rem;
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Franja utilitaria de contacto/horarios. */
.arenas-franja-contacto {
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.arenas-franja-contacto__interior {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2.5rem;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--arenas-maxw);
	padding: 0.9rem var(--wp--preset--spacing--50);
}

.arenas-franja-contacto p {
	align-items: center;
	color: var(--wp--preset--color--texto);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.92rem;
	gap: 0.5rem 1.5rem;
	margin: 0;
}

.arenas-franja-contacto a {
	align-items: center;
	color: var(--wp--preset--color--turquesa-profundo);
	display: inline-flex;
	font-weight: 600;
	gap: 0.4rem;
	text-decoration: none;
}

.arenas-franja-contacto a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   5. Secciones editoriales
   ========================================================================== */

/* Intro centrada estilo editorial (tras el hero). */
.arenas-intro-editorial {
	text-align: center;
}

.arenas-intro-editorial p {
	margin-left: auto;
	margin-right: auto;
	max-width: 62ch;
}

/* «Por qué Arenas»: 4 tarjetas fotográficas con pie numerado. */
.arenas-porque .wp-block-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}

.arenas-porque figcaption,
.arenas-porque p {
	color: var(--wp--preset--color--contraste);
	font-size: 0.98rem;
	text-align: center;
}

/* Grid de especialidades con iconos de línea. */
.arenas-especialidades-iconos {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

/* Cada especialidad es una tarjeta que, al pasar el cursor, adopta una
   caja turquesa (efecto de dr-arenas trasladado a la identidad nueva). */
.arenas-especialidades-iconos a {
	align-items: center;
	border: 1px solid transparent;
	border-radius: calc(var(--arenas-radio) + 4px);
	color: var(--wp--preset--color--contraste);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem 1rem 1.6rem;
	text-decoration: none;
	transition: background-color var(--arenas-transicion), transform var(--arenas-transicion), box-shadow var(--arenas-transicion);
}

.arenas-especialidades-iconos a:hover,
.arenas-especialidades-iconos a:focus-visible {
	background-color: var(--color-primary);
	box-shadow: 0 18px 40px -22px rgba(28, 107, 114, 0.55);
	transform: translateY(-4px);
}

.arenas-especialidades-iconos a:hover .arenas-especialidades-iconos__nombre,
.arenas-especialidades-iconos a:focus-visible .arenas-especialidades-iconos__nombre {
	color: var(--color-arenas-graphite);
}

/* Iconos propios del cliente (WebP monocromo) pintados con la marca mediante
   mask-image: turquesa profundo en reposo, grafito sobre la tarjeta turquesa. */
.arenas-especialidades-iconos .arenas-icono {
	background-color: var(--wp--preset--color--turquesa-profundo);
	display: block;
	height: 100px;
	margin: 0;
	width: 100px;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color var(--arenas-transicion), transform var(--arenas-transicion);
}

.arenas-especialidades-iconos a:hover .arenas-icono,
.arenas-especialidades-iconos a:focus-visible .arenas-icono {
	background-color: var(--color-arenas-graphite);
	transform: scale(1.06);
}

.arenas-especialidades-iconos__nombre {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.15rem;
	font-weight: 600;
	transition: color var(--arenas-transicion);
}

@media (max-width: 900px) {
	.arenas-especialidades-iconos {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 560px) {
	.arenas-especialidades-iconos {
		grid-template-columns: repeat(2, 1fr);
	}
	.arenas-especialidades-iconos .arenas-icono {
		height: 72px;
		width: 72px;
	}
}

/* Split editorial: imagen + texto (equipo, clínicas, dirección médica). */
.arenas-split .wp-block-image img,
.arenas-split .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* Tarjetas fotográficas grandes con título serif superpuesto. */
.arenas-unidades .wp-block-cover {
	border-radius: var(--arenas-radio);
	min-height: 440px;
	overflow: hidden;
}

.arenas-unidades h3 {
	color: #fff;
	font-size: var(--wp--preset--font-size--x-large);
}

.arenas-unidades a {
	color: #fff;
	text-decoration: none;
	text-underline-offset: 5px;
}

.arenas-unidades a:hover {
	text-decoration: underline;
}

/* Directorio de tratamientos: listas con subrayado corto (IMR). */
.arenas-directorio {
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
}

.arenas-directorio__interior {
	margin: 0 auto;
	max-width: var(--arenas-maxw);
}

.arenas-directorio__intro {
	color: var(--wp--preset--color--texto);
}

.arenas-directorio__columnas {
	display: grid;
	gap: 3rem 3rem;
	grid-template-columns: repeat(4, 1fr);
	margin-top: var(--wp--preset--spacing--60);
}

.arenas-directorio__grupo h3 {
	font-size: 0.8rem;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 600;
	letter-spacing: 0.16em;
	margin: 0 0 1.5rem;
	text-transform: uppercase;
}

.arenas-directorio__grupo h3 a {
	color: var(--wp--preset--color--texto);
	text-decoration: none;
}

.arenas-directorio__grupo h3 a:hover {
	color: var(--wp--preset--color--turquesa-profundo);
}

.arenas-directorio__grupo ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.arenas-directorio__grupo li {
	margin-bottom: 1.05rem;
}

.arenas-directorio__grupo li a {
	border-bottom: 1px solid rgba(23, 63, 69, 0.35);
	color: var(--wp--preset--color--contraste);
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.06rem;
	padding-bottom: 0.3rem;
	text-decoration: none;
	transition: border-color var(--arenas-transicion), color var(--arenas-transicion);
}

.arenas-directorio__grupo li a:hover,
.arenas-directorio__grupo li a:focus-visible {
	border-color: var(--wp--preset--color--turquesa-profundo);
	color: var(--wp--preset--color--turquesa-profundo);
}

.arenas-directorio__pendiente {
	color: var(--wp--preset--color--texto);
	font-size: 0.9rem;
}

/* Dirección médica. */
.arenas-direccion-medica__foto {
	background:
		linear-gradient(160deg, rgba(97, 201, 210, 0.22), rgba(23, 63, 69, 0.14)),
		var(--wp--preset--color--base);
	border-radius: var(--arenas-radio);
	min-height: 420px;
}

/* Placeholder fotográfico neutro reutilizable. */
.arenas-media-placeholder {
	align-items: center;
	background:
		linear-gradient(160deg, rgba(97, 201, 210, 0.2), rgba(23, 63, 69, 0.15)),
		var(--wp--preset--color--base-suave);
	border-radius: var(--arenas-radio);
	color: var(--wp--preset--color--texto);
	display: flex;
	justify-content: center;
	min-height: 340px;
}

/* Covers-placeholder editables: proporción fija y degradado de marca hasta
   que el cliente suba la fotografía (bloque Fondo → Sustituir). */
.arenas-cover-placeholder {
	border-radius: var(--arenas-radio);
	min-height: 0;
	overflow: hidden;
}

.arenas-cover-placeholder .wp-block-cover__background.has-borde-background-color {
	background: linear-gradient(160deg, rgba(207, 179, 163, 0.75), rgba(79, 62, 52, 0.35)), var(--wp--preset--color--base-suave) !important;
	opacity: 1;
}

.arenas-cover-4x5 {
	aspect-ratio: 4 / 5;
}

.arenas-cover-4x3 {
	aspect-ratio: 4 / 3;
}

.arenas-direccion-medica__foto.arenas-cover-placeholder {
	min-height: 420px;
}

/* Bloque de vídeo. */
.arenas-video {
	position: relative;
}

.arenas-video .wp-block-video,
.arenas-video video {
	border-radius: var(--arenas-radio);
	max-width: 100%;
	overflow: hidden;
	width: 100%;
}

.arenas-video video {
	aspect-ratio: 16 / 9;
	background-color: var(--color-charcoal);
	display: block;
	object-fit: cover;
}

/* Logo: sin deformaciones en cabecera y footer. */
.wp-block-site-logo img,
.arenas-logo-fallback img {
	height: auto;
	max-height: 54px;
	width: auto;
}

.arenas-footer__logo img {
	height: auto;
	max-width: 220px;
}

.arenas-video__play {
	align-items: center;
	background-color: rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	color: var(--wp--preset--color--contraste);
	display: flex;
	height: 76px;
	justify-content: center;
	margin: 0 auto;
	width: 76px;
}

.arenas-video__play::before {
	border-bottom: 12px solid transparent;
	border-left: 20px solid currentColor;
	border-top: 12px solid transparent;
	content: "";
	display: block;
	margin-left: 5px;
}

/* ==========================================================================
   6. Migas, meta de entrada, índice
   ========================================================================== */

.arenas-migas {
	font-size: 0.85rem;
	margin-bottom: 1.5rem;
}

.arenas-migas ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.arenas-migas li:not(:last-child)::after {
	color: var(--wp--preset--color--texto);
	content: "/";
	margin-left: 0.35rem;
}

.arenas-migas a {
	color: var(--wp--preset--color--texto);
	text-decoration: none;
}

.arenas-migas a:hover {
	color: var(--wp--preset--color--turquesa-profundo);
	text-decoration: underline;
}

.arenas-migas [aria-current="page"] {
	color: var(--wp--preset--color--contraste);
}

.arenas-meta-entrada {
	align-items: center;
	border-bottom: 1px solid rgba(23, 63, 69, 0.12);
	border-top: 1px solid rgba(23, 63, 69, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	margin: 1.5rem 0;
	padding: 1rem 0;
}

.arenas-meta-entrada__autor {
	align-items: center;
	display: flex;
	gap: 0.75rem;
}

.arenas-meta-entrada__autor img {
	border-radius: 50%;
}

.arenas-meta-entrada__nombre,
.arenas-meta-entrada__cargo {
	margin: 0;
}

.arenas-meta-entrada__nombre a {
	color: var(--wp--preset--color--contraste);
	font-weight: 600;
	text-decoration: none;
}

.arenas-meta-entrada__cargo,
.arenas-meta-entrada__datos {
	color: var(--wp--preset--color--texto);
	font-size: 0.88rem;
}

.arenas-meta-entrada__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
}

.arenas-meta-entrada__datos p {
	margin: 0;
}

.arenas-indice {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--arenas-radio);
	margin: 2rem 0;
	padding: 1.5rem 1.75rem;
}

.arenas-indice__titulo {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.arenas-indice ol {
	margin: 0;
	padding-left: 1.25rem;
}

.arenas-indice a {
	color: var(--wp--preset--color--turquesa-profundo);
}

/* ==========================================================================
   7. Cajas de autor, revisor, relacionados
   ========================================================================== */

.arenas-caja-autor,
.arenas-caja-revisor {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--arenas-radio);
	margin: 2rem 0;
	padding: 1.75rem;
}

.arenas-caja-autor__titulo,
.arenas-caja-revisor__etiqueta {
	color: var(--wp--preset--color--turquesa-profundo);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.arenas-caja-autor__cuerpo,
.arenas-caja-revisor__cuerpo {
	display: flex;
	gap: 1.25rem;
}

.arenas-caja-autor__avatar img,
.arenas-caja-revisor__foto img {
	border-radius: 50%;
	height: auto;
}

.arenas-caja-revisor__foto img {
	height: 64px;
	object-fit: cover;
	width: 64px;
}

.arenas-caja-autor__nombre,
.arenas-caja-revisor__nombre {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.35rem;
	margin: 0;
}

.arenas-caja-autor__nombre a,
.arenas-caja-revisor__nombre a {
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.arenas-caja-autor__cargo,
.arenas-caja-revisor__cargo,
.arenas-caja-autor__colegiado,
.arenas-caja-revisor__colegiado {
	color: var(--wp--preset--color--texto);
	font-size: 0.88rem;
	margin: 0.15rem 0 0;
}

.arenas-caja-autor__bio {
	margin: 0.75rem 0 0;
}

.arenas-enlaces-prof {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.arenas-relacionados {
	border-top: 1px solid rgba(23, 63, 69, 0.12);
	margin-top: 3rem;
	padding-top: 2rem;
}

.arenas-relacionados h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.arenas-relacionados__lista {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.arenas-relacionados__imagen img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}

.arenas-relacionados__item h3 {
	font-size: 1.15rem;
	margin: 0.75rem 0 0.25rem;
}

.arenas-relacionados__item h3 a {
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.arenas-relacionados__item h3 a:hover {
	color: var(--wp--preset--color--turquesa-profundo);
}

.arenas-relacionados__fecha {
	color: var(--wp--preset--color--texto);
	font-size: 0.85rem;
	margin: 0;
}

.arenas-enlaces-especialidades {
	margin: 2rem 0;
}

.arenas-enlaces-especialidades h2 {
	font-size: var(--wp--preset--font-size--large);
}

.arenas-enlaces-especialidades ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.arenas-enlaces-especialidades a {
	border: 1px solid rgba(23, 63, 69, 0.3);
	border-radius: 999px;
	color: var(--wp--preset--color--contraste);
	display: inline-block;
	font-size: 0.9rem;
	padding: 0.45rem 1.2rem;
	text-decoration: none;
	transition: border-color var(--arenas-transicion);
}

.arenas-enlaces-especialidades a:hover {
	border-color: var(--wp--preset--color--turquesa-profundo);
	color: var(--wp--preset--color--turquesa-profundo);
}

/* ==========================================================================
   8. Fichas: tratamiento, profesional, clínica
   ========================================================================== */

.arenas-tratamiento-intro {
	color: var(--wp--preset--color--texto);
	font-size: var(--wp--preset--font-size--large);
	margin-top: 0.5rem;
}

.arenas-tratamiento-seccion {
	margin-top: 4.5rem;
}

.arenas-tratamiento-seccion h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: 1.6rem;
	text-align: center;
}

/* ------- Composición premium de la ficha (estilo referencia) ------- */

/* Intro editorial en DOS COLUMNAS coherentes: todo el texto a un lado y
   la imagen al otro, alineados desde arriba (como la referencia). La
   rejilla coloca cada bloque de texto en la columna izquierda y la
   primera imagen ocupa la derecha a lo alto. */
/* La rejilla texto+imagen SOLO se aplica si la ficha tiene imagen en el
   cuerpo (:has). Con los textos del cliente (sin imagen) se usa la maqueta
   editorial premium de más abajo, a ancho completo. */
@media (min-width: 900px) {
	.arenas-single-tratamiento #descripcion .wp-block-post-content:has(> .wp-block-image) {
		column-gap: clamp(2.5rem, 5vw, 4.5rem);
		display: grid;
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	}

	.arenas-single-tratamiento #descripcion .wp-block-post-content:has(> .wp-block-image) > * {
		grid-column: 1;
	}

	.arenas-single-tratamiento #descripcion .wp-block-post-content:has(> .wp-block-image) > .wp-block-image:first-of-type {
		align-self: start;
		grid-column: 2;
		grid-row: 1 / span 12;
		margin: 0;
		width: 100%;
	}

	.arenas-single-tratamiento #descripcion .wp-block-post-content:has(> .wp-block-image) > .wp-block-image:first-of-type img {
		border-radius: var(--arenas-radio);
		height: auto;
		width: 100%;
	}
}

/* ==========================================================================
   Ficha de tratamiento — MAQUETA PREMIUM POR FRANJAS (full-width)
   Cada sección del texto del cliente es una FRANJA a ancho completo con fondo
   alterno (blanco / crema), interior ancho (1240px), sección numerada,
   listas como TARJETAS y una franja de cierre (CTA) en turquesa.
   ========================================================================== */

.arenas-single-tratamiento #descripcion .wp-block-post-content {
	counter-reset: arenas-sec;
	max-width: none;
}

/* Coherencia de ancho en toda la ficha: las secciones inferiores (tratamientos
   relacionados, equipo, formulario, FAQ) adoptan el ancho amplio del contenido.
   Solo dentro de <main>: no afecta a cabecera ni footer. */
.arenas-single-tratamiento main {
	--arenas-maxw: min(1860px, 98vw);
}

/* Franja: el bloque ya es .alignfull (ancho completo). Interior ancho. */
.arenas-single-tratamiento .arenas-ficha-seccion {
	overflow: hidden;
	padding-block: clamp(2.75rem, 5vw, 5.5rem);
	position: relative;
}

/* Brillo decorativo turquesa que alterna de esquina, para dar profundidad. */
.arenas-single-tratamiento .arenas-ficha-seccion::before {
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(95, 193, 203, 0.14), transparent 62%);
	border-radius: 50%;
	content: "";
	pointer-events: none;
	position: absolute;
	right: -8%;
	top: -24%;
	width: min(46vw, 560px);
	z-index: 0;
}

.arenas-single-tratamiento .arenas-ficha-seccion:nth-of-type(even)::before {
	bottom: -26%;
	left: -10%;
	right: auto;
	top: auto;
}

.arenas-single-tratamiento .arenas-ficha-inner {
	margin-inline: auto;
	max-width: min(1860px, 98vw);
	padding-inline: clamp(1.1rem, 2.5vw, 2rem);
	position: relative;
	z-index: 1;
}

/* ===== ANCHO COMPLETO de las fichas de tratamiento =====================
   Se activa SOLO en fichas con la maqueta premium por franjas
   (main:has(.arenas-ficha-seccion)); las fichas provisionales sin franjas se
   quedan EXACTAMENTE como están (texto a ancho de lectura, sin tocar).

   CLAVE: la plantilla envuelve el contenido en un <main> con contentSize
   1240px, así que nada pasa de 1240 aunque las franjas sean .alignfull. Hay
   que LIBERAR de ese tope el contenedor #descripcion y los de la parte inferior
   (relacionados, equipo, formulario, «más información»); entonces cada sección,
   que ya usa max-width:var(--arenas-maxw), se centra sola al ancho amplio.
   El ancho lo fijan --arenas-maxw y .arenas-ficha-inner arriba: min(1860px,98vw). */
.arenas-single-tratamiento main:has(.arenas-ficha-seccion) #descripcion,
.arenas-single-tratamiento main:has(.arenas-ficha-seccion) > .wp-block-group:has(.arenas-rel-tratamientos),
.arenas-single-tratamiento main:has(.arenas-ficha-seccion) > .wp-block-group:has(.arenas-equipo-mini),
.arenas-single-tratamiento main:has(.arenas-ficha-seccion) #mas-informacion,
.arenas-single-tratamiento main:has(.arenas-ficha-seccion) #contacto {
	max-width: none;
}

/* CTA final: el cover interior es .alignwide y WordPress le clava max-width
   1240 con una regla más específica; la ganamos con body + main:has(). */
body.arenas-single-tratamiento main:has(.arenas-ficha-seccion) .arenas-cta-final-cover {
	max-width: min(1860px, 98vw);
}

/* ===== Pulido premium de las fichas (todas las fichas premium) ============
   (1) Maqueta editorial: la CABECERA de sección va a un raíl izquierdo fijo y
   el contenido (entradilla + tarjetas) a la derecha. Así se llena el hueco a
   la derecha de los párrafos cortos y gana aire de revista. Se aplica a las
   secciones estándar (interior con h2 directo); no toca intro, split ni CTA. */
/* Maqueta con GRID de 2 columnas: cabecera en el raíl izquierdo, contenido a la
   derecha. El grid GARANTIZA que la cabecera y el texto de la derecha NUNCA se
   solapen: si el título ocupa muchas líneas, el contenedor crece y el contenido
   se acomoda, en lugar de que la cabecera invada el texto (bug grave anterior
   con posicionamiento absoluto). */
body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner:has(> h2) {
	align-items: start;
	column-gap: clamp(2rem, 4vw, 4.5rem);
	display: grid;
	grid-template-columns: minmax(0, clamp(13rem, 17vw, 17rem)) minmax(0, 1fr);
}

/* Cabecera: columna izquierda, ocupando todas las filas para que quede arriba
   sin inflar ninguna fila del contenido. Las palabras largas se parten para no
   salirse nunca de su columna. */
body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner:has(> h2) > h2 {
	align-self: start;
	grid-column: 1;
	grid-row: 1 / span 99;
	hyphens: auto;
	margin-bottom: 0;
	overflow-wrap: break-word;
	position: sticky;
	top: clamp(5.5rem, 9vh, 7.5rem);
	width: auto;
}

/* El texto del título es un ítem flex (junto al icono); sin esto no encogería
   por debajo de su palabra más larga y SE SALDRÍA de la columna del raíl,
   invadiendo el texto de la derecha en pantallas estrechas. Con min-width:0 se
   ajusta y parte dentro de su columna. */
body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner:has(> h2) > h2 .arenas-ficha-h2t {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Sin sticky en móvil/tablet (el raíl se apila). */
@media (max-width: 980px) {
	body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner:has(> h2) > h2 {
		position: static;
	}
}

/* Todo lo que no es la cabecera va a la columna derecha. */
body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner:has(> h2) > *:not(h2) {
	grid-column: 2;
}

body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner:has(> h2) > *:not(h2):first-of-type {
	margin-top: 0;
}

/* Más aire en el raíl: separa la entradilla de las tarjetas y airea la rejilla
   (evita el efecto «pegado y junto»). */
body.arenas-single-tratamiento .arenas-ficha-inner:has(> h2) > ul {
	gap: 1.6rem;
	margin-top: clamp(2.8rem, 4vw, 4rem);
}

body.arenas-single-tratamiento .arenas-ficha-inner:has(> h2) > p + ul {
	margin-top: clamp(2.8rem, 4vw, 4rem);
}

/* En pantallas medianas/pequeñas, el raíl se apila (cabecera arriba, contenido
   debajo, ambos a ancho completo). */
@media (max-width: 980px) {
	body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner:has(> h2) {
		display: block;
	}

	body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner:has(> h2) > h2 {
		margin-bottom: 1.5rem;
	}
}

/* TÍTULOS LARGOS: el raíl estrecho parte mal los títulos largos, así que esas
   secciones se APILAN — el titular va ARRIBA a lo ancho (leyéndose en 1-2 líneas
   sin cortes) y el contenido debajo, a ancho completo. Lo marca el PHP con
   `arenas-ficha-inner--titulo-top`. Mismo prefijo que el raíl + esta clase, y
   colocado después, para ganar por especificidad/orden. */
body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner--titulo-top:has(> h2) {
	display: block;
}

body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner--titulo-top:has(> h2) > h2 {
	grid-row: auto;
	margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
	max-width: 30ch;
	position: static;
	top: auto;
}

/* El contenido vuelve al flujo normal a ancho completo (deshace la 2ª columna). */
body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner--titulo-top:has(> h2) > *:not(h2) {
	grid-column: auto;
}

/* Sección apilada CON tarjetas: la cabecera (título + entradilla) se centra
   sobre la rejilla de tarjetas, para no dejar la mitad derecha vacía. Las
   tarjetas vuelven a alinearse a la izquierda dentro de sí mismas. */
body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner--titulo-top:has(> ul) {
	text-align: center;
}

body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner--titulo-top:has(> ul) > h2 {
	justify-content: center;
	margin-inline: auto;
	max-width: none;
}

body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner--titulo-top:has(> ul) > h2 .arenas-ficha-h2t::after {
	left: 50%;
	transform: translateX(-50%);
}

body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner--titulo-top:has(> ul) > p {
	margin-inline: auto;
	max-width: 74ch;
}

body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner--titulo-top:has(> ul) > ul {
	text-align: left;
}

/* Secciones apiladas de SOLO TEXTO con varios párrafos: el texto pasa a 2
   columnas (estilo revista) para llenar el ancho en vez de dejar la mitad
   derecha vacía. El titular abarca las dos columnas. Solo en escritorio. */
@media (min-width: 981px) {
	body.arenas-single-tratamiento .arenas-ficha-inner--doscol {
		column-gap: clamp(2.5rem, 4vw, 4rem);
		columns: 2;
	}

	body.arenas-single-tratamiento .arenas-ficha-inner--doscol > h2 {
		column-span: all;
	}

	body.arenas-single-tratamiento .arenas-ficha-inner--doscol > p {
		break-inside: avoid;
	}
}

/* Sección de CIERRE «Arenas Clínica Médica»: en vez de un título en el raíl con
   una frase suelta (soso), se muestra como una declaración final centrada y con
   más presencia. */
body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner--firma:has(> h2) {
	display: block;
	max-width: 62rem;
	margin-inline: auto;
	text-align: center;
	padding-block: clamp(1rem, 2vw, 2rem);
}

body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner--firma:has(> h2) > h2 {
	display: inline-flex;
	grid-row: auto;
	justify-content: center;
	margin: 0 auto 1.4rem;
	max-width: none;
	position: static;
	text-align: center;
}

body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner--firma:has(> h2) > h2 .arenas-ficha-h2t::after {
	left: 50%;
	transform: translateX(-50%);
}

body.arenas-single-tratamiento .arenas-ficha-seccion:not(.arenas-ficha-cta) > .arenas-ficha-inner--firma:has(> h2) > p {
	grid-column: auto;
	color: var(--wp--preset--color--turquesa-profundo);
	font-size: clamp(1.15rem, 1.8vw, 1.5rem);
	line-height: 1.6;
	margin: 0 auto;
	max-width: 46ch;
}

/* (2) Hueco de imagen SIN foto → panel decorativo de marca (degradado
   turquesa + icono grande), en vez de un recuadro vacío con borde punteado. */
body.arenas-single-tratamiento .arenas-ficha-slot:not(.arenas-ficha-slot--foto) {
	background: rgba(28, 107, 114, 0.05);
	border: 1px solid rgba(28, 107, 114, 0.12);
	overflow: hidden;
	position: relative;
}

body.arenas-single-tratamiento .arenas-ficha-slot:not(.arenas-ficha-slot--foto)::before {
	content: none;
}

body.arenas-single-tratamiento .arenas-ficha-slot:not(.arenas-ficha-slot--foto) .arenas-ficha-slot__ico {
	background-color: var(--wp--preset--color--turquesa-profundo);
	height: 38%;
	opacity: 0.5;
	position: relative;
	width: 38%;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203s6%206.6%206%2011a6%206%200%200%201-12%200c0-4.4%206-11%206-11z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203s6%206.6%206%2011a6%206%200%200%201-12%200c0-4.4%206-11%206-11z'/%3E%3C/svg%3E");
}

body.arenas-single-tratamiento .arenas-ficha-slot:not(.arenas-ficha-slot--foto) .arenas-ficha-slot__txt {
	display: none;
}

/* (3) Movimiento premium («sin marear»): al entrar en pantalla, cabeceras,
   entradillas, tarjetas y fotos aparecen subiendo con un fundido. Lo dispara el
   JS con IntersectionObserver (marca .arenas-rv y añade .arenas-visible al
   entrar cada elemento, así el movimiento se percibe según bajas). Respeta
   prefers-reduced-motion (el JS no marca nada) y si el JS no corre el contenido
   se ve normal. Usa translate (propiedad independiente): en las tarjetas se
   incluye transform en la transición para no romper el hover. */
@media (prefers-reduced-motion: no-preference) {
	body.arenas-single-tratamiento .arenas-rv {
		opacity: 0;
		translate: 0 32px;
		transition: opacity 640ms ease,
			translate 760ms cubic-bezier(0.2, 0.72, 0.2, 1);
	}

	body.arenas-single-tratamiento .arenas-ficha-seccion ul li.arenas-rv {
		transition: opacity 640ms ease,
			translate 760ms cubic-bezier(0.2, 0.72, 0.2, 1),
			transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
	}

	body.arenas-single-tratamiento .arenas-rv.arenas-visible {
		opacity: 1;
		translate: 0 0;
	}
}

/* Fondos alternos para dar ritmo. La 1ª sección real (nº par) en blanco,
   la siguiente en crema, y así. */
.arenas-single-tratamiento .arenas-ficha-seccion:nth-of-type(even) {
	background: #fff;
}

.arenas-single-tratamiento .arenas-ficha-seccion:nth-of-type(odd) {
	background: var(--wp--preset--color--base-suave, #f0ece4);
}

/* Intro: SIN cajón (se funde con el fondo de la página) y con padding
   ajustado, para que una entradilla corta no genere un bloque enorme vacío. */
.arenas-single-tratamiento .arenas-ficha-seccion.arenas-ficha-intro {
	background: transparent;
	padding-block: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* Intro: entradilla grande y aireada (mismo ancho que las secciones para que
   el borde izquierdo coincida; el párrafo se limita para lectura cómoda). */
.arenas-single-tratamiento .arenas-ficha-intro p {
	color: var(--color-arenas-graphite);
	font-size: clamp(1.15rem, 1.7vw, 1.4rem);
	line-height: 1.7;
	margin: 0 0 1.1rem;
	max-width: 64ch;
}

.arenas-single-tratamiento .arenas-ficha-seccion p {
	max-width: 76ch;
}

/* Titular de sección: ICONO en badge turquesa + kicker («Sección 0X») +
   título + regla de acento. */
.arenas-single-tratamiento .arenas-ficha-seccion h2 {
	align-items: flex-start;
	counter-increment: arenas-sec;
	display: flex;
	gap: clamp(0.85rem, 1.8vw, 1.35rem);
	letter-spacing: -0.015em;
	margin: 0 0 2rem;
	padding: 0;
	text-align: left;
}

.arenas-single-tratamiento .arenas-ficha-ico {
	align-items: center;
	background: var(--wp--preset--color--turquesa-profundo);
	border-radius: 12px;
	color: #fff;
	display: flex;
	flex: none;
	height: clamp(48px, 5.5vw, 60px);
	justify-content: center;
	margin-top: 0.9rem;
	width: clamp(48px, 5.5vw, 60px);
}

.arenas-single-tratamiento .arenas-ficha-ico::before {
	background-color: #fff;
	content: "";
	display: block;
	height: 56%;
	width: 56%;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

.arenas-single-tratamiento .arenas-ficha-h2t {
	display: block;
	font-size: clamp(1.5rem, 2.7vw, 2.25rem);
	line-height: 1.18;
	padding: 1.5rem 0 1.2rem;
	position: relative;
}

.arenas-single-tratamiento .arenas-ficha-h2t::before {
	color: var(--color-primary);
	content: "Sección " counter(arenas-sec, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 0.74rem;
	font-weight: 700;
	left: 0;
	letter-spacing: 0.2em;
	position: absolute;
	text-transform: uppercase;
	top: 0;
}

.arenas-single-tratamiento .arenas-ficha-h2t::after {
	background: var(--color-primary);
	border-radius: 2px;
	bottom: 0;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	width: 92px;
}

/* Layout IMAGEN + TEXTO (secciones de solo texto, lados alternos). */
.arenas-single-tratamiento .arenas-ficha-split {
	align-items: center;
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.arenas-single-tratamiento .arenas-ficha-split--izq {
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.arenas-single-tratamiento .arenas-ficha-split--izq .arenas-ficha-split__txt {
	order: 2;
}

/* Split de la ENTRADILLA: el texto ancla arriba (junto al primer párrafo) y
   ocupa toda su columna; la foto acompaña a la derecha. */
.arenas-single-tratamiento .arenas-ficha-split--intro {
	align-items: start;
}

.arenas-single-tratamiento .arenas-ficha-split--intro .arenas-ficha-split__txt p {
	max-width: none;
}

/* Hueco de imagen sin foto disponible (su foto se ha asignado a otra zona): se
   colapsa por completo y el texto de esa sección pasa a ancho completo, en vez
   de mostrar un panel vacío. */
.arenas-single-tratamiento .arenas-ficha-slot--vacio {
	display: none;
}

.arenas-single-tratamiento .arenas-ficha-split:has(.arenas-ficha-slot--vacio) {
	display: block;
}

.arenas-single-tratamiento .arenas-ficha-slot {
	align-items: center;
	aspect-ratio: 4 / 3.3;
	background: linear-gradient(150deg, rgba(95, 193, 203, 0.16), rgba(28, 107, 114, 0.1));
	border: 1px dashed rgba(28, 107, 114, 0.32);
	border-radius: 20px;
	color: var(--wp--preset--color--turquesa-profundo);
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	justify-content: center;
	text-align: center;
}

.arenas-single-tratamiento .arenas-ficha-slot__ico {
	background-color: var(--wp--preset--color--turquesa-profundo);
	height: 54px;
	opacity: 0.5;
	width: 54px;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

.arenas-single-tratamiento .arenas-ficha-slot__txt {
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

/* Hueco con FOTO real: quita el marcador y muestra la imagen a sangre. */
.arenas-single-tratamiento .arenas-ficha-slot--foto {
	background: none;
	border: 0;
	box-shadow: 0 24px 50px -28px rgba(28, 107, 114, 0.55);
	margin: 0;
	overflow: hidden;
	padding: 0;
}

.arenas-single-tratamiento .arenas-ficha-slot--foto img {
	border-radius: 20px;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Carrusel de fotos en el hueco imagen+texto: varias imágenes con fundido
   elegante. El JS rota (auto + clic + puntos); respeta prefers-reduced-motion. */
.arenas-single-tratamiento .arenas-ficha-carrusel {
	cursor: pointer;
	display: block;
	position: relative;
}

.arenas-single-tratamiento .arenas-carrusel__pista {
	inset: 0;
	position: absolute;
}

.arenas-single-tratamiento .arenas-carrusel__img {
	border-radius: 20px;
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	transition: opacity 900ms ease;
	width: 100%;
}

.arenas-single-tratamiento .arenas-carrusel__img.is-activa {
	opacity: 1;
}

.arenas-single-tratamiento .arenas-carrusel__puntos {
	bottom: 12px;
	display: flex;
	gap: 7px;
	justify-content: center;
	left: 0;
	position: absolute;
	right: 0;
	z-index: 2;
}

.arenas-single-tratamiento .arenas-carrusel__punto {
	background: rgba(255, 255, 255, 0.55);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	height: 8px;
	padding: 0;
	transition: width 0.3s ease, background 0.3s ease;
	width: 8px;
}

.arenas-single-tratamiento .arenas-carrusel__punto.is-activo {
	background: #fff;
	border-radius: 5px;
	width: 22px;
}

@media (max-width: 820px) {
	.arenas-single-tratamiento .arenas-ficha-split,
	.arenas-single-tratamiento .arenas-ficha-split--izq {
		grid-template-columns: 1fr;
	}

	.arenas-single-tratamiento .arenas-ficha-split--izq .arenas-ficha-split__txt {
		order: 0;
	}

	.arenas-single-tratamiento .arenas-ficha-slot {
		aspect-ratio: 16 / 9;
	}
}

/* Listas → REJILLA DE TARJETAS (ancho completo del interior). */
.arenas-single-tratamiento .arenas-ficha-seccion ul {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 1.15rem;
	list-style: none;
	margin: 1.9rem 0 0.5rem;
	max-width: none;
	padding: 0;
	width: 100%;
}

/* Las tarjetas fluyen y CRECEN para llenar el ancho: la última fila nunca deja
   una tarjeta huérfana con hueco a la derecha (una tarjeta larga que se queda
   sola pasa a ancho completo, y su texto largo se lee mejor). Máx. ~3 por
   fila. */
.arenas-single-tratamiento .arenas-ficha-seccion ul li {
	box-sizing: border-box;
	flex: 1 1 calc(33.333% - 1.75rem);
	min-width: min(100%, 15rem);
	background: #fff;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 16px;
	box-shadow: 0 12px 32px -22px rgba(28, 107, 114, 0.32);
	line-height: 1.62;
	overflow: hidden;
	padding: 1.6rem 1.65rem 1.7rem 1.9rem;
	position: relative;
	transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.arenas-single-tratamiento .arenas-ficha-seccion ul li::before {
	background: var(--color-primary);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	top: 0;
	transition: width 0.25s ease;
	width: 4px;
}

.arenas-single-tratamiento .arenas-ficha-seccion ul li:hover {
	border-color: var(--color-primary);
	box-shadow: 0 26px 54px -26px rgba(28, 107, 114, 0.5);
	transform: translateY(-6px);
}

.arenas-single-tratamiento .arenas-ficha-seccion ul li:hover::before {
	width: 8px;
}

.arenas-single-tratamiento .arenas-ficha-seccion ul li strong:first-child {
	color: var(--wp--preset--color--turquesa-profundo);
	display: block;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.09rem;
	margin-bottom: 0.45rem;
}

/* Sub-lista dentro de una tarjeta (sub-viñetas «o » del PDF): lista simple,
   NO hereda la rejilla ni el estilo de tarjeta. */
.arenas-single-tratamiento .arenas-ficha-seccion ul.arenas-subitems {
	display: block;
	gap: 0;
	grid-template-columns: none;
	list-style: disc;
	margin: 0.7rem 0 0;
	padding: 0 0 0 1.2rem;
	width: auto;
}

.arenas-single-tratamiento .arenas-ficha-seccion ul.arenas-subitems li {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	line-height: 1.55;
	margin: 0 0 0.4rem;
	padding: 0;
	transition: none;
}

.arenas-single-tratamiento .arenas-ficha-seccion ul.arenas-subitems li::before {
	content: none;
}

.arenas-single-tratamiento .arenas-ficha-seccion ul.arenas-subitems li:hover {
	transform: none;
}

/* ==========================================================================
   Pasos (timeline numerado) y Grados/Niveles (acordeón)
   Los genera el filtro arenas_fichas_pasos_niveles a partir de las listas.
   ========================================================================== */

/* --- Timeline numerado de PASOS --- */
.arenas-single-tratamiento .arenas-ficha-proceso {
	display: flex;
	flex-direction: column;
	gap: 0;
	grid-template-columns: none;
	list-style: none;
	margin: 2.4rem 0 0.5rem;
	max-width: none;
	padding: 0;
	width: 100%;
}

.arenas-single-tratamiento .arenas-ficha-proceso__paso {
	display: grid;
	gap: 0 1.2rem;
	grid-template-columns: auto 1fr;
	padding-bottom: clamp(1.4rem, 2.4vw, 2.2rem);
	position: relative;
}

.arenas-single-tratamiento .arenas-ficha-proceso__paso:last-child {
	padding-bottom: 0;
}

/* Línea vertical que conecta los pasos. */
.arenas-single-tratamiento .arenas-ficha-proceso__paso:not(:last-child)::before {
	background: rgba(28, 107, 114, 0.2);
	bottom: 0;
	content: "";
	left: 23px;
	position: absolute;
	top: 46px;
	width: 2px;
}

.arenas-single-tratamiento .arenas-ficha-proceso__num {
	align-items: center;
	background: var(--wp--preset--color--turquesa-profundo);
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex: none;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.25rem;
	font-weight: 700;
	height: 48px;
	justify-content: center;
	position: relative;
	width: 48px;
	z-index: 1;
}

.arenas-single-tratamiento .arenas-ficha-proceso__txt {
	line-height: 1.62;
	padding-top: 0.55rem;
}

.arenas-single-tratamiento .arenas-ficha-proceso__txt strong:first-child {
	color: var(--wp--preset--color--turquesa-profundo);
	display: block;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.09rem;
	margin-bottom: 0.3rem;
}

/* --- Acordeón de GRADOS / NIVELES --- */
.arenas-single-tratamiento .arenas-ficha-niveles {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin: 2.4rem 0 0.5rem;
}

.arenas-single-tratamiento .arenas-ficha-niveles__item {
	background: #fff;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color 0.24s ease, box-shadow 0.24s ease;
}

.arenas-single-tratamiento .arenas-ficha-niveles__item[open] {
	border-color: var(--color-primary);
	box-shadow: 0 20px 44px -26px rgba(28, 107, 114, 0.45);
}

.arenas-single-tratamiento .arenas-ficha-niveles__cab {
	align-items: center;
	color: var(--wp--preset--color--turquesa-profundo);
	cursor: pointer;
	display: flex;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.05rem;
	font-weight: 600;
	gap: 0.8rem;
	list-style: none;
	padding: 1.05rem 1.4rem;
}

.arenas-single-tratamiento .arenas-ficha-niveles__cab::-webkit-details-marker {
	display: none;
}

/* Chevron que gira al abrir. */
.arenas-single-tratamiento .arenas-ficha-niveles__cab::after {
	background-color: currentColor;
	content: "";
	flex: none;
	height: 20px;
	margin-left: auto;
	transition: transform 0.25s ease;
	width: 20px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.arenas-single-tratamiento .arenas-ficha-niveles__item[open] .arenas-acordeon__cab::after {
	transform: rotate(180deg);
}

.arenas-single-tratamiento .arenas-ficha-niveles__cab:hover {
	color: var(--color-primary);
}

.arenas-single-tratamiento .arenas-ficha-niveles__c {
	line-height: 1.62;
	padding: 0 1.4rem 1.2rem 1.4rem;
}

/* Franja de CIERRE (CTA) en degradado turquesa, centrada. */
.arenas-single-tratamiento .arenas-ficha-cta {
	background: var(--wp--preset--color--turquesa-profundo) !important;
	text-align: center;
}

.arenas-single-tratamiento .arenas-ficha-cta::before {
	background: none;
	opacity: 0;
}

.arenas-single-tratamiento .arenas-ficha-cta h2 {
	color: #fff;
	display: block;
	text-align: center;
}

/* Separador suave: las franjas blancas (pares) nacen con esquinas
   redondeadas sobre el fondo crema, como paneles apilados. */
.arenas-single-tratamiento .arenas-ficha-seccion:nth-of-type(even) {
	border-radius: clamp(22px, 3vw, 46px) clamp(22px, 3vw, 46px) 0 0;
}

.arenas-single-tratamiento .arenas-ficha-cta p {
	color: rgba(255, 255, 255, 0.92);
	margin-inline: auto;
	max-width: 58ch;
}

@media (max-width: 640px) {
	.arenas-single-tratamiento .arenas-ficha-seccion ul {
		grid-template-columns: 1fr;
	}

	.arenas-single-tratamiento .arenas-ficha-seccion > .arenas-ficha-inner > h2:first-child {
		padding-left: 3.4rem;
	}
}

.arenas-single-tratamiento #descripcion .wp-block-image img,
.arenas-seccion-pasos img {
	border-radius: var(--arenas-radio);
}

.arenas-seccion-texto p {
	margin-left: auto;
	margin-right: auto;
	max-width: 68ch;
}

/* Beneficios en rejilla de dos columnas. */
.arenas-check-grid {
	display: grid;
	gap: 0.35rem 2.5rem;
	grid-template-columns: 1fr 1fr;
	margin: 0 auto;
	max-width: 900px;
}

@media (max-width: 700px) {
	.arenas-check-grid {
		grid-template-columns: 1fr;
	}
}

/* «¿Cómo se realiza?» sobre banda crema a sangre completa: ritmo visual
   entre secciones, como la referencia. */
.arenas-seccion-pasos {
	background-color: #F3EDE6;
	border: 1px solid #E9E1D7;
	border-radius: calc(var(--arenas-radio) + 6px);
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 4rem);
}

.arenas-seccion-pasos h2 {
	margin-top: 0;
}

/* Pasos numerados 01/02/03 en COLUMNAS horizontales a lo ancho de la
   banda: número grande arriba, texto debajo. */
.arenas-pasos {
	display: grid;
	gap: 2.5rem clamp(1.5rem, 3vw, 3.5rem);
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	max-width: none;
	padding: 0;
}

@media (max-width: 860px) {
	.arenas-pasos {
		grid-template-columns: 1fr;
	}
}

.arenas-pasos li {
	border-top: 2px solid var(--color-nude);
	padding-top: 1.4rem;
}

.arenas-pasos__numero {
	color: var(--color-brown);
	display: block;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 2.6rem;
	line-height: 1;
	margin-bottom: 0.9rem;
}

.arenas-pasos__texto p {
	margin: 0 0 0.6rem;
}

.arenas-seccion-pasos h2 {
	margin-bottom: 2.5rem;
}

/* Beneficios con imagen lateral (estilo «Ventajas» de la referencia). */
.arenas-media-checks {
	align-items: center;
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.arenas-media-checks__foto {
	margin: 0;
}

.arenas-media-checks__foto img {
	aspect-ratio: 1 / 1;
	border-radius: var(--arenas-radio);
	height: auto;
	object-fit: cover;
	width: 100%;
}

.arenas-media-checks__lista h2 {
	margin-top: 0;
	text-align: left;
}

@media (max-width: 860px) {
	.arenas-media-checks {
		grid-template-columns: 1fr;
	}

	.arenas-media-checks__lista h2 {
		text-align: center;
	}
}

/* Galería del tratamiento: tira compacta de miniaturas cuadradas
   centradas (petición del cliente: imágenes mucho más pequeñas). */
.arenas-galeria-ficha__grid {
	display: grid;
	gap: 0.9rem;
	grid-template-columns: repeat(auto-fit, 170px);
	justify-content: center;
}

.arenas-galeria-ficha__grid figure {
	margin: 0;
}

.arenas-galeria-ficha__grid img {
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	height: auto;
	object-fit: cover;
	transition: transform 300ms ease;
	width: 100%;
}

.arenas-galeria-ficha__grid img:hover {
	transform: scale(1.04);
}

@media (max-width: 700px) {
	.arenas-galeria-ficha__grid {
		grid-template-columns: repeat(auto-fit, minmax(96px, 110px));
	}
}

/* Acordeón de beneficios estilo referencia: barra lateral que se marca
   en marrón en el elemento abierto; exclusivo vía details[name]. */
.arenas-acordeon {
	display: grid;
	gap: 1rem;
}

.arenas-acordeon__item {
	border-left: 2px solid #DCD5CB;
	padding: 0.4rem 0 0.4rem 1.5rem;
	transition: border-color var(--arenas-transicion);
}

.arenas-acordeon__item[open] {
	border-left-color: var(--color-brown);
}

.arenas-acordeon__item summary {
	align-items: center;
	color: var(--wp--preset--color--contraste);
	cursor: pointer;
	display: flex;
	font-size: 1.08rem;
	font-weight: 600;
	gap: 1rem;
	justify-content: space-between;
	list-style: none;
	transition: color var(--arenas-transicion);
}

.arenas-acordeon__item summary::-webkit-details-marker {
	display: none;
}

.arenas-acordeon__item summary:hover,
.arenas-acordeon__item[open] summary {
	color: var(--color-brown);
}

.arenas-acordeon__chevron {
	flex: none;
	transition: transform var(--arenas-transicion);
}

.arenas-acordeon__item[open] .arenas-acordeon__chevron {
	transform: rotate(180deg);
}

.arenas-acordeon__panel p {
	color: var(--wp--preset--color--texto);
	font-size: 0.96rem;
	margin: 0.7rem 0 0.2rem;
	max-width: 56ch;
}

/* Acordeón sin imagen lateral: columna centrada. */
.arenas-beneficios-solo {
	margin: 0 auto;
	max-width: 720px;
}

/* ------- Página Tarjeta Regalo (estilo referencia) ------- */
.arenas-acordeon--pagina {
	margin: 2rem auto 4.5rem;
	max-width: 720px;
}

.arenas-tarjeta-regalo-central img {
	border-radius: var(--arenas-radio);
}

/* Composición editorial premium, contenida y con aire (estilo referencia).
   El contenido vive en una columna estrecha; nada a sangre de 1240. */
.arenas-pagina-tarjeta-regalo .wp-block-post-content {
	margin-inline: auto;
	max-width: 940px;
}

.arenas-pagina-tarjeta-regalo .wp-block-post-content > p {
	color: var(--wp--preset--color--texto);
	font-size: 1.02rem;
	line-height: 1.75;
	margin-left: auto;
	margin-right: auto;
	max-width: 600px;
	text-align: center;
}

.arenas-pagina-tarjeta-regalo .wp-block-post-content > .wp-block-heading {
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	letter-spacing: -0.01em;
	margin: 4.5rem auto 1.6rem;
	max-width: 20ch;
}

/* Imágenes contenidas, sobrias y con sombra suave (no a todo lo ancho). */
.arenas-pagina-tarjeta-regalo .wp-block-post-content > .wp-block-image {
	margin: 3rem auto 4rem;
	max-width: 620px;
}

.arenas-pagina-tarjeta-regalo .wp-block-post-content > .wp-block-image img {
	border-radius: 14px;
	box-shadow: 0 30px 60px -30px rgba(36, 36, 36, 0.28);
	height: auto;
	width: 100%;
}

/* La tarjeta-diseño (última imagen) no lleva sombra: es un plano de arte. */
.arenas-pagina-tarjeta-regalo .wp-block-post-content > .wp-block-image:last-of-type img {
	box-shadow: none;
}

.arenas-pagina-tarjeta-regalo .arenas-tarjeta-solicitud {
	margin-left: auto;
	margin-right: auto;
	max-width: 940px;
}

/* Encuadre del hero: el sobre está en la mitad inferior de la foto. */
.arenas-pagina-tarjeta-regalo .arenas-hero-interior .wp-block-cover__image-background {
	object-position: 50% 82%;
}

/* Acordeón de la página: filetes finos, más aire, sin recuadro pesado. */
.arenas-acordeon--pagina .arenas-acordeon__item {
	border-bottom: 1px solid var(--color-border);
	border-left: 0;
	padding: 0.4rem 0 1.1rem;
}

.arenas-acordeon--pagina .arenas-acordeon__item summary {
	font-size: 1.12rem;
	padding: 0.6rem 0;
}

.arenas-acordeon--pagina .arenas-acordeon__panel p {
	max-width: none;
}

/* Acordeón con el bloque nativo «Detalles» (editable desde WordPress).
   Reutiliza el estilo del acordeón del tema: se le añade el chevron por CSS
   (el bloque nativo no trae SVG) y se cuida el espaciado del contenido. */
.arenas-acordeon__item.wp-block-details > summary {
	align-items: center;
	color: var(--wp--preset--color--contraste);
	cursor: pointer;
	display: flex;
	font-weight: 600;
	gap: 1rem;
	justify-content: space-between;
	list-style: none;
	transition: color var(--arenas-transicion);
}

.arenas-acordeon__item.wp-block-details > summary::-webkit-details-marker,
.arenas-acordeon__item.wp-block-details > summary::marker {
	display: none;
	content: "";
}

.arenas-acordeon__item.wp-block-details > summary:hover,
.arenas-acordeon__item.wp-block-details[open] > summary {
	color: var(--color-brown);
}

/* Chevron dibujado con CSS, alineado a la derecha. */
.arenas-acordeon__item.wp-block-details > summary::after {
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	content: "";
	flex: none;
	height: 0.5rem;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform var(--arenas-transicion);
	width: 0.5rem;
}

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

/* Contenido del panel nativo (párrafos hijos directos de <details>). */
.arenas-acordeon__item.wp-block-details > :not(summary) {
	color: var(--wp--preset--color--texto);
	font-size: 0.96rem;
	margin: 0.7rem 0 0.2rem;
}

.arenas-acordeon--pagina .arenas-acordeon__item.wp-block-details > :not(summary) {
	max-width: none;
}

/* Bloque de solicitud editorial: sin cajón beige, filete superior fino y
   composición imagen + texto con mucho aire. */
.arenas-tarjeta-solicitud {
	align-items: center;
	border-top: 1px solid var(--color-border);
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin: 5rem 0;
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.arenas-tarjeta-solicitud__foto {
	margin: 0;
}

.arenas-tarjeta-solicitud__foto img {
	border-radius: 14px;
	box-shadow: 0 30px 60px -30px rgba(36, 36, 36, 0.28);
	height: auto;
	width: 100%;
}

.arenas-tarjeta-solicitud__texto h2 {
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	margin: 0 0 1rem;
}

.arenas-tarjeta-solicitud__texto p {
	color: var(--wp--preset--color--texto);
	line-height: 1.7;
	max-width: 42ch;
}

.arenas-tarjeta-solicitud__botones {
	margin-top: 1.8rem;
}

@media (max-width: 820px) {
	.arenas-tarjeta-solicitud {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.arenas-tarjeta-solicitud__texto p {
		margin-inline: auto;
	}
}

/* Indicaciones en tarjeta suave. */
.arenas-tarjeta-indicaciones {
	background-color: var(--wp--preset--color--crema);
	border: 1px solid var(--color-border);
	border-radius: calc(var(--arenas-radio) + 6px);
	margin: 0 auto;
	max-width: 900px;
	padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.4rem, 5vw, 3rem);
}

.arenas-tarjeta-indicaciones h2 {
	margin-top: 0;
}

.arenas-tarjeta-indicaciones .arenas-lista-check {
	margin: 0 auto;
	max-width: 560px;
}

.arenas-lista-check {
	list-style: none;
	margin: 0;
	padding: 0;
}

.arenas-lista-check li {
	align-items: flex-start;
	display: flex;
	gap: 0.6rem;
	margin-bottom: 0.7rem;
}

.arenas-lista-check .arenas-icono {
	color: var(--wp--preset--color--turquesa-oscuro);
	flex-shrink: 0;
	margin-top: 0.25em;
}

.arenas-icono {
	display: inline-block;
	vertical-align: middle;
}

.arenas-faq {
	margin: 4.5rem auto 0;
	max-width: 880px;
}

.arenas-faq h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.arenas-faq__item {
	border-bottom: 1px solid rgba(23, 63, 69, 0.15);
}

.arenas-faq__item summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.2rem;
	list-style: none;
	padding: 1.35rem 2.5rem 1.35rem 0;
	position: relative;
}

.arenas-faq__item summary::-webkit-details-marker {
	display: none;
}

.arenas-faq__item summary::after {
	content: "+";
	font-size: 1.5rem;
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
}

.arenas-faq__item[open] summary::after {
	content: "–";
}

.arenas-faq__item summary:hover {
	color: var(--wp--preset--color--turquesa-profundo);
}

.arenas-faq__respuesta {
	color: var(--wp--preset--color--texto);
	padding: 0 0 1.5rem;
}

.arenas-aviso-medico,
.arenas-aviso-pendiente {
	background-color: var(--wp--preset--color--base);
	border-left: 3px solid var(--wp--preset--color--turquesa);
	border-radius: 0 var(--arenas-radio-s) var(--arenas-radio-s) 0;
	color: var(--wp--preset--color--texto);
	font-size: 0.9rem;
	margin: 2rem 0;
	padding: 1rem 1.25rem;
}

.arenas-aviso-pendiente {
	border-left-color: #c9a227;
}

.arenas-aviso-medico p,
.arenas-aviso-pendiente p {
	margin: 0;
}

.arenas-cta-tratamiento {
	background-color: var(--arenas-oscuro);
	border-radius: var(--arenas-radio);
	color: #fff;
	margin-top: 3rem;
	padding: 3.5rem 2rem;
	text-align: center;
}

.arenas-cta-tratamiento h2 {
	color: #fff;
	margin-top: 0;
}

.arenas-cta-tratamiento p {
	color: rgba(255, 255, 255, 0.85);
}

.arenas-cta-tratamiento .arenas-boton {
	background-color: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--contraste);
}

.arenas-prof-datos__cargo {
	color: var(--wp--preset--color--turquesa-profundo);
	font-size: var(--wp--preset--font-size--large);
	margin: 0.25rem 0 0;
}

.arenas-prof-datos__colegiado {
	color: var(--wp--preset--color--texto);
	font-size: 0.88rem;
}

.arenas-prof-seccion {
	margin-top: 2rem;
}

.arenas-prof-seccion h2 {
	font-size: var(--wp--preset--font-size--large);
}

.arenas-prof-foto img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.arenas-clinica-datos {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--arenas-radio);
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 2rem;
}

.arenas-clinica-datos dt {
	align-items: center;
	color: var(--wp--preset--color--contraste);
	display: flex;
	font-weight: 600;
	gap: 0.5rem;
}

.arenas-clinica-datos dt .arenas-icono {
	color: var(--wp--preset--color--turquesa-oscuro);
}

.arenas-clinica-datos dd {
	color: var(--wp--preset--color--texto);
	margin: 0.35rem 0 0 1.75rem;
}

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

.arenas-clinica-mapa {
	margin-top: 1.5rem;
}

.arenas-clinica-proximamente {
	color: var(--wp--preset--color--texto);
	font-size: 1.05rem;
}

/* Anchura de lectura cómoda para páginas de texto (legales, corporativas):
   los párrafos y listas del contenido normal se limitan a ~72 caracteres;
   los bloques anchos (alignwide/alignfull, grids) conservan su anchura. */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > h2,
.wp-block-post-content > h3,
.wp-block-post-content > h4 {
	max-width: 760px;
}

.arenas-etiqueta-proximamente {
	border: 1px solid rgba(23, 63, 69, 0.3);
	border-radius: 999px;
	color: var(--wp--preset--color--texto);
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 0.5rem;
	padding: 0.15rem 0.9rem;
	text-transform: uppercase;
	width: fit-content;
}

.arenas-filtro-especialidades {
	gap: 0.75rem;
}

.arenas-filtro-especialidades p {
	margin: 0;
}

.arenas-filtro-especialidades a {
	border: 1px solid rgba(23, 63, 69, 0.3);
	border-radius: 999px;
	color: var(--wp--preset--color--contraste);
	display: inline-block;
	font-size: 0.9rem;
	padding: 0.45rem 1.2rem;
	text-decoration: none;
}

.arenas-filtro-especialidades a:hover {
	border-color: var(--wp--preset--color--turquesa-profundo);
	color: var(--wp--preset--color--turquesa-profundo);
}

/* ==========================================================================
   9. Tarjetas genéricas (equipo, blog, listados)
   ========================================================================== */

.arenas-tarjeta {
	background-color: transparent;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	height: 100%;
	padding: 0;
}

.arenas-tarjeta .wp-block-post-featured-image {
	margin-bottom: 0.5rem;
}

.arenas-tarjeta .wp-block-post-featured-image img {
	transition: transform 400ms ease;
}

.arenas-tarjeta:hover .wp-block-post-featured-image img {
	transform: scale(1.02);
}

.arenas-tarjeta h2,
.arenas-tarjeta h3 {
	font-size: 1.35rem;
	line-height: 1.25;
	margin: 0;
}

.arenas-tarjeta h2 a,
.arenas-tarjeta h3 a {
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.arenas-tarjeta h2 a:hover,
.arenas-tarjeta h3 a:hover {
	color: var(--wp--preset--color--turquesa-profundo);
}

.arenas-tarjeta .wp-block-post-excerpt {
	color: var(--wp--preset--color--texto);
	font-size: 0.95rem;
}

.arenas-tarjeta .wp-block-post-terms {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

.arenas-tarjeta .wp-block-post-terms a {
	border: 1px solid rgba(23, 63, 69, 0.25);
	border-radius: 999px;
	color: var(--wp--preset--color--texto);
	display: inline-block;
	padding: 0.12rem 0.75rem;
	text-decoration: none;
}

.arenas-tarjeta .wp-block-post-date {
	color: var(--wp--preset--color--texto);
	font-size: 0.8rem;
}

/* Retratos del equipo: imagen 4/5 con fondo nude uniforme (referencia). */
.arenas-tarjeta--persona {
	transition: transform 320ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.arenas-tarjeta--persona .wp-block-post-featured-image {
	background-color: var(--color-nude);
	border-radius: var(--arenas-radio);
	overflow: hidden; /* recorta el zoom de la foto a las esquinas redondeadas. */
	box-shadow: 0 14px 34px -24px rgba(28, 107, 114, 0.4);
	transition: box-shadow 320ms ease;
}

.arenas-tarjeta--persona .wp-block-post-featured-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: top; /* prioriza el rostro (retratos y foto de cuerpo entero). */
	width: 100%;
	transition: transform 600ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

/* Microinteracción premium al pasar el ratón: la tarjeta sube, la foto hace un
   zoom suave y la sombra se agranda. Respeta la reducción de movimiento. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.arenas-tarjeta--persona:hover {
		transform: translateY(-5px);
	}

	.arenas-tarjeta--persona:hover .wp-block-post-featured-image {
		box-shadow: 0 28px 52px -24px rgba(28, 107, 114, 0.55);
	}

	.arenas-tarjeta--persona:hover .wp-block-post-featured-image img {
		transform: scale(1.05);
	}
}

.arenas-tarjeta--persona h2,
.arenas-tarjeta--persona h3 {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.02rem;
	font-weight: 600;
}

/* Tarjetas de clínica (dinámicas). */
.arenas-clinicas {
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
}

.arenas-clinicas__interior {
	margin: 0 auto;
	max-width: var(--arenas-maxw);
}

.arenas-clinicas__grid {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(3, 1fr);
	margin-top: var(--wp--preset--spacing--60);
}

.arenas-tarjeta--clinica {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--arenas-radio);
	padding: 2rem;
}

.arenas-tarjeta--clinica h3 {
	font-size: 1.4rem;
}

.arenas-tarjeta--clinica h3 a {
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.arenas-tarjeta--clinica h3 a:hover {
	color: var(--wp--preset--color--turquesa-profundo);
}

.arenas-tarjeta--clinica__direccion {
	color: var(--wp--preset--color--texto);
	margin: 0;
}

/* ==========================================================================
   10. Formularios (tarjeta oscura redondeada, estilo referencia)
   ========================================================================== */

.arenas-consulta {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.arenas-consulta__interior {
	background-color: var(--color-brown);
	border-radius: calc(var(--arenas-radio) + 6px);
	color: #fff;
	margin: 0 auto;
	max-width: var(--arenas-maxw);
	padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 8vw, 8rem);
}

.arenas-consulta h2 {
	color: #fff;
	margin-top: 0;
}

.arenas-consulta__intro {
	color: rgba(255, 255, 255, 0.85);
	text-align: center;
}

.arenas-consulta .arenas-form__campo label {
	color: rgba(255, 255, 255, 0.92);
}

.arenas-consulta .arenas-form__campo input[type="text"],
.arenas-consulta .arenas-form__campo input[type="email"],
.arenas-consulta .arenas-form__campo input[type="tel"],
.arenas-consulta .arenas-form__campo select,
.arenas-consulta .arenas-form__campo textarea {
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 10px;
	color: #fff;
}

.arenas-consulta .arenas-form__campo input:hover,
.arenas-consulta .arenas-form__campo select:hover,
.arenas-consulta .arenas-form__campo textarea:hover {
	border-color: rgba(255, 255, 255, 0.75);
}

/* Chevron blanco para los selects sobre marrón. */
.arenas-consulta .arenas-form__campo select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.arenas-consulta .arenas-form__campo--check input {
	accent-color: #fff;
}

/* Más respiración interior en el panel marrón. */
.arenas-consulta .arenas-form {
	margin-top: 2.5rem;
}

.arenas-consulta__intro {
	margin-bottom: 0;
}

.arenas-consulta .arenas-form__campo select option {
	color: var(--wp--preset--color--contraste);
}

.arenas-consulta .arenas-form__campo input::placeholder,
.arenas-consulta .arenas-form__campo textarea::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.arenas-consulta .arenas-form__campo input:focus,
.arenas-consulta .arenas-form__campo select:focus,
.arenas-consulta .arenas-form__campo textarea:focus {
	border-color: #fff;
	outline: 2px solid rgba(255, 255, 255, 0.75);
	outline-offset: 1px;
}

.arenas-consulta .arenas-form__ayuda,
.arenas-consulta .arenas-form__campo--check label {
	color: rgba(255, 255, 255, 0.8);
}

.arenas-consulta .arenas-form__campo--check a {
	color: #fff;
}

.arenas-consulta .arenas-form__envio {
	text-align: center;
}

.arenas-consulta .arenas-form__envio button {
	background-color: #fff;
	border-color: #fff;
	border-radius: 999px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
	color: var(--wp--preset--color--contraste);
	min-width: 260px;
	padding: 0.95rem 2.6rem;
	transition: transform var(--arenas-transicion), background-color var(--arenas-transicion);
}

.arenas-consulta .arenas-form__envio button:hover {
	transform: translateY(-1px);
}

.arenas-consulta .arenas-form__envio {
	margin-top: 1.25rem;
}

.arenas-consulta .arenas-form__envio button:hover {
	background-color: var(--wp--preset--color--crema);
}

.arenas-consulta .arenas-form__error {
	color: #ffd7d2;
}

.arenas-consulta .arenas-form__resumen-errores {
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 215, 210, 0.6);
}

.arenas-consulta .arenas-form__resumen-errores h3,
.arenas-consulta .arenas-form__resumen-errores a {
	color: #ffd7d2;
}

.arenas-consulta .arenas-form__exito {
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.4);
}

.arenas-consulta .arenas-form__exito h3,
.arenas-consulta .arenas-form__exito p {
	color: #fff;
}

/* Base del formulario (también sobre fondo claro, p. ej. página Contacto). */
.arenas-form {
	margin: 2rem 0;
}

.arenas-form__fila {
	display: grid;
	gap: 0 1.75rem;
	grid-template-columns: 1fr 1fr;
}

.arenas-form__campo {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 1.6rem;
}

.arenas-form__campo label {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.arenas-form__req {
	color: var(--wp--preset--color--turquesa);
}

.arenas-form__campo input[type="text"],
.arenas-form__campo input[type="email"],
.arenas-form__campo input[type="tel"],
.arenas-form__campo select,
.arenas-form__campo textarea {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 10px;
	/* border-box: sin él, el padding suma al width:100% y los campos
	   desbordaban su columna hasta pegarse con el vecino. */
	box-sizing: border-box;
	color: var(--wp--preset--color--contraste);
	font: inherit;
	padding: 0.9rem 1.15rem;
	transition: border-color var(--arenas-transicion), background-color var(--arenas-transicion);
	width: 100%;
}

.arenas-form__campo textarea {
	min-height: 9.5rem;
	resize: vertical;
}

/* Selects sin el aspecto nativo: chevron propio dibujado en SVG. */
.arenas-form__campo select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23714E3B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	background-position: right 1.1rem center;
	background-repeat: no-repeat;
	cursor: pointer;
	padding-right: 2.8rem;
}

.arenas-form__campo [aria-invalid="true"] {
	border-color: #e0685c;
}

.arenas-form__campo--check {
	align-items: flex-start;
	display: grid;
	gap: 0.35rem 0.6rem;
	grid-template-columns: auto 1fr;
}

.arenas-form__campo--check input {
	height: 1.15rem;
	margin-top: 0.25rem;
	width: 1.15rem;
}

.arenas-form__campo--check .arenas-form__error {
	grid-column: 1 / -1;
}

.arenas-form__ayuda {
	color: var(--wp--preset--color--texto);
	font-size: 0.85rem;
}

.arenas-form__error {
	color: #b3261e;
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0;
}

.arenas-form__resumen-errores {
	background-color: #fdf3f2;
	border: 1px solid #e5b3af;
	border-radius: var(--arenas-radio-s);
	margin-bottom: 1.5rem;
	padding: 1.25rem 1.5rem;
}

.arenas-form__resumen-errores h3 {
	color: #b3261e;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1rem;
	margin: 0 0 0.5rem;
}

.arenas-form__resumen-errores a {
	color: #b3261e;
}

.arenas-form__exito {
	background-color: #eef8f4;
	border: 1px solid #9fd8c2;
	border-radius: var(--arenas-radio-s);
	padding: 1.5rem 1.75rem;
}

.arenas-form__exito h3 {
	color: #14614a;
	font-family: var(--wp--preset--font-family--cuerpo);
	margin: 0 0 0.5rem;
}

.arenas-form__exito p {
	margin: 0;
}

.arenas-form__hp {
	left: -9999px;
	position: absolute;
}

/* ==========================================================================
   11. CTA final fotográfico y acreditaciones
   ========================================================================== */

.arenas-cta-final-cover {
	border-radius: var(--arenas-radio);
	margin: 0 auto;
	max-width: var(--arenas-maxw);
	min-height: 420px;
	overflow: hidden;
}

.arenas-cta-final-cover h2 {
	color: #fff;
}

.arenas-acreditaciones {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.arenas-acreditaciones__interior {
	margin: 0 auto;
	max-width: var(--arenas-maxw);
}

.arenas-acreditaciones__lista {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3rem;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.arenas-acreditaciones__item {
	align-items: center;
	border: 1px dashed rgba(23, 63, 69, 0.3);
	border-radius: var(--arenas-radio-s);
	color: var(--wp--preset--color--texto);
	display: flex;
	font-size: 0.82rem;
	height: 64px;
	justify-content: center;
	text-align: center;
	width: 150px;
}

.arenas-acreditaciones__nota {
	color: var(--wp--preset--color--texto);
	font-size: 0.82rem;
	font-style: italic;
	margin: 1.25rem 0 0;
	text-align: center;
}

/* ==========================================================================
   12. Footer oscuro
   ========================================================================== */

.arenas-footer {
	/* Gris oscuro (no negro), petición del cliente. */
	background-color: var(--color-footer);
	color: #f2f4f4;
	font-size: 0.95rem;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
}

.arenas-footer__interior {
	margin: 0 auto;
	max-width: var(--arenas-maxw);
}

.arenas-footer__columnas {
	display: grid;
	gap: 3rem;
	grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
}

.arenas-footer__nombre {
	color: #fff;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.6rem;
	margin: 0 0 0.75rem;
}

.arenas-footer__descripcion {
	font-size: 0.88rem;
	margin: 0;
	max-width: 30ch;
}

.arenas-footer__titulo {
	color: #fff;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	margin: 0 0 1.25rem;
	text-transform: uppercase;
}

/* theme.json fuerza el gris grafito en los párrafos; en las superficies
   oscuras deben heredar el color claro del contenedor. */
.arenas-footer p,
.arenas-barra-superior p,
.arenas-consulta p,
.arenas-cta-tratamiento p,
.wp-block-cover p {
	color: inherit;
}

.arenas-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.arenas-footer li {
	margin-bottom: 0.7rem;
}

.arenas-footer a {
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
}

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

.arenas-footer__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.25rem !important;
}

.arenas-footer__redes li {
	margin: 0;
}

.arenas-footer .arenas-etiqueta-proximamente {
	border-color: rgba(255, 255, 255, 0.3);
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.65rem;
	margin-left: 0.5rem;
	padding: 0.05rem 0.6rem;
}

.arenas-footer__legal {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	margin-top: 3.5rem;
	padding-top: 1.5rem;
}

.arenas-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
}

.arenas-footer__legal li {
	margin: 0;
}

.arenas-footer__copyright {
	font-size: 0.82rem;
	margin: 0;
}

/* ==========================================================================
   13. WhatsApp flotante, búsqueda, blog
   ========================================================================== */

.arenas-whatsapp-flotante {
	align-items: center;
	background-color: #1faf59;
	border-radius: 50%;
	bottom: 1.25rem;
	box-shadow: 0 4px 16px rgba(20, 21, 25, 0.25);
	color: #fff;
	display: flex;
	height: 56px;
	justify-content: center;
	position: fixed;
	right: 1.25rem;
	transition: transform var(--arenas-transicion);
	width: 56px;
	z-index: 900;
}

.arenas-whatsapp-flotante:hover,
.arenas-whatsapp-flotante:focus-visible {
	color: #fff;
	transform: scale(1.06);
}

.arenas-whatsapp-flotante .arenas-icono {
	height: 28px;
	width: 28px;
}

.wp-block-search__input {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 999px;
	padding: 0.7rem 1.25rem;
}

/* Cabecera oscura del blog. */
.arenas-blog-cabecera {
	background-color: var(--arenas-negro);
	color: #fff;
}

.arenas-blog-cabecera h1 {
	color: #fff;
}

.arenas-blog-cabecera p {
	color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.arenas-footer__columnas {
		grid-template-columns: 1fr 1fr;
	}

	.arenas-directorio__columnas {
		grid-template-columns: 1fr 1fr;
	}

	.arenas-clinicas__grid,
	.arenas-relacionados__lista {
		grid-template-columns: repeat(2, 1fr);
	}

	.arenas-especialidades-iconos {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	html {
		scroll-padding-top: 90px;
	}

	.arenas-form__fila {
		grid-template-columns: 1fr;
	}

	.arenas-meta-entrada {
		align-items: flex-start;
		flex-direction: column;
	}

	.arenas-caja-autor__cuerpo {
		flex-direction: column;
	}

	.arenas-hero-cover {
		min-height: 78vh;
	}

	.arenas-especialidades-iconos {
		grid-template-columns: repeat(2, 1fr);
	}

	.arenas-anclas ul {
		gap: 0 1.75rem;
		justify-content: flex-start;
		overflow-x: auto;
		white-space: nowrap;
	}

	.arenas-unidades .wp-block-cover {
		min-height: 320px;
	}
}

@media (max-width: 600px) {
	.arenas-clinicas__grid,
	.arenas-relacionados__lista,
	.arenas-directorio__columnas {
		grid-template-columns: 1fr;
	}

	.arenas-footer__columnas {
		gap: 2.25rem;
		grid-template-columns: 1fr;
	}

	.arenas-barra-superior__interior,
	.arenas-franja-contacto__interior {
		justify-content: center;
		text-align: center;
	}

	.arenas-consulta__interior {
		padding: 2.25rem 1.35rem;
	}

	.arenas-direccion-medica__foto {
		min-height: 260px;
	}
}

/* ------- Tres proyectos de marca (Home, punto 15 del cliente) ------- */
.arenas-proyectos__grid {
	gap: 1.5rem;
}

.arenas-proyecto {
	background-color: #fff;
	border: 1px solid var(--color-border);
	border-radius: calc(var(--arenas-radio) + 4px);
	box-shadow: var(--arenas-sombra-suave);
	padding: clamp(1.6rem, 3vw, 2.4rem);
	text-align: center;
	transition: transform var(--arenas-transicion), box-shadow var(--arenas-transicion);
}

.arenas-proyecto:hover {
	box-shadow: 0 18px 40px -20px rgba(28, 107, 114, 0.35);
	transform: translateY(-3px);
}

.arenas-proyecto__titulo {
	font-size: 1.35rem;
	margin: 0 0 0.6rem;
}

.arenas-proyecto__desc {
	color: var(--wp--preset--color--texto);
	margin: 0 0 1.4rem;
}

.arenas-etiqueta-proximamente {
	background-color: var(--color-primary);
	border-radius: 999px;
	color: var(--color-arenas-graphite);
	display: inline-block;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-left: 0.4rem;
	padding: 0.2rem 0.6rem;
	text-transform: uppercase;
	vertical-align: middle;
}

.arenas-boton--desactivado {
	background-color: var(--color-border);
	border-color: var(--color-border);
	color: var(--color-muted);
	cursor: not-allowed;
	pointer-events: none;
}

/* ------- Franjas de logos en movimiento (tecnología + formación, punto 2) ------- */
.arenas-logos-franjas {
	overflow: hidden;
}

.arenas-marquee-seccion {
	margin: 0 auto;
	max-width: var(--arenas-maxw);
	text-align: center;
}

.arenas-marquee-seccion + .arenas-marquee-seccion {
	margin-top: 3.5rem;
}

.arenas-marquee__kicker {
	color: var(--wp--preset--color--turquesa-profundo);
	margin-bottom: 0.35rem;
}

.arenas-marquee__titulo {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	margin: 0 0 2rem;
}

/* Pista continua: dos listas idénticas que se desplazan y encadenan. */
.arenas-marquee {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	display: flex;
	overflow: hidden;
	width: 100%;
}

.arenas-marquee__track {
	align-items: center;
	animation: arenas-marquee 38s linear infinite;
	display: flex;
	flex: 0 0 auto;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	list-style: none;
	margin: 0;
	padding: 0 clamp(1.25rem, 2.25vw, 2.25rem) 0 0;
}

.arenas-marquee:hover .arenas-marquee__track,
.arenas-marquee:focus-within .arenas-marquee__track {
	animation-play-state: paused;
}

.arenas-marquee__track li {
	flex: 0 0 auto;
}

.arenas-marquee__track img {
	filter: grayscale(1);
	height: 46px;
	max-width: 170px;
	object-fit: contain;
	opacity: 0.72;
	transition: filter var(--arenas-transicion), opacity var(--arenas-transicion);
	width: auto;
}

.arenas-marquee__track img:hover {
	filter: grayscale(0);
	opacity: 1;
}

@keyframes arenas-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* Accesibilidad: sin movimiento, logos en fila con scroll manual. */
@media (prefers-reduced-motion: reduce) {
	.arenas-marquee {
		mask-image: none;
		-webkit-mask-image: none;
		overflow-x: auto;
	}
	.arenas-marquee__track {
		animation: none;
	}
	.arenas-marquee__track[aria-hidden="true"] {
		display: none;
	}
}

@media (max-width: 600px) {
	.arenas-marquee__track img {
		height: 38px;
	}
}

/* ==========================================================================
   Experiencias verificadas (reseñas reales de Google)
   ========================================================================== */
.arenas-resenas {
	text-align: center;
}

/* Fuentes verificadas (Google + Doctoralia): dos badges enlazados al perfil. */
.arenas-resenas__fuentes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 1.6rem auto 0;
}

.arenas-resena-fuente {
	align-items: center;
	background: #fff;
	border: 1px solid var(--wp--preset--color--borde, #e7e2d9);
	border-radius: 999px;
	box-shadow: var(--arenas-sombra-suave);
	color: var(--color-arenas-graphite, #333);
	display: inline-flex;
	gap: 0.6rem;
	padding: 0.6rem 1.15rem;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.arenas-resena-fuente:hover,
.arenas-resena-fuente:focus-visible {
	border-color: var(--color-primary);
	box-shadow: 0 10px 24px -14px rgba(28, 107, 114, 0.5);
	transform: translateY(-2px);
}

.arenas-resena-fuente__nombre {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
}

.arenas-resena-fuente__estrellas {
	color: #f6a609;
	display: inline-flex;
	gap: 1px;
}

.arenas-resena-fuente__estrellas .arenas-resena__estrella {
	fill: currentColor;
	height: 15px;
	width: 15px;
}

.arenas-resena-fuente__nota {
	color: var(--muted, #5c6f6f);
	font-size: 0.9rem;
	font-weight: 600;
}

.arenas-resenas__grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: var(--wp--preset--spacing--70, 2.5rem) auto 0;
	max-width: 1240px;
	padding: 0;
}

.arenas-resena {
	background: #fff;
	border: 1px solid var(--wp--preset--color--borde, #e7e2d9);
	border-radius: calc(var(--arenas-radio) + 4px);
	box-shadow: var(--arenas-sombra-suave);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: 1.75rem;
	text-align: left;
}

.arenas-resena__cabecera {
	align-items: center;
	display: flex;
	gap: 0.85rem;
}

.arenas-resena__avatar {
	align-items: center;
	background: var(--wp--preset--color--turquesa-profundo);
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.15rem;
	font-weight: 600;
	height: 46px;
	justify-content: center;
	width: 46px;
}

.arenas-resena__meta {
	display: flex;
	flex-direction: column;
}

.arenas-resena__nombre {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
}

.arenas-resena__fecha {
	color: var(--color-arenas-graphite);
	font-size: 0.85rem;
	opacity: 0.7;
}

.arenas-resena__estrellas {
	display: inline-flex;
	gap: 2px;
}

.arenas-resena__estrella {
	fill: #f5a623;
	height: 20px;
	width: 20px;
}

.arenas-resena__texto {
	border: 0;
	color: var(--color-arenas-graphite);
	font-size: 1.02rem;
	line-height: 1.6;
	margin: 0;
	quotes: "\201C" "\201D";
}

.arenas-resena__texto::before { content: open-quote; }
.arenas-resena__texto::after { content: close-quote; }

.arenas-resenas__pie {
	color: var(--color-arenas-graphite);
	font-size: 0.9rem;
	margin-top: 1.75rem;
	opacity: 0.75;
}

@media (max-width: 860px) {
	.arenas-resenas__grid {
		grid-template-columns: 1fr;
		max-width: 520px;
	}
}


/* Iconos de sección y del hueco de imagen (mask-image, generados). */
.arenas-single-tratamiento .arenas-ico--diag::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.5'%20y2='16.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.5'%20y2='16.5'/%3E%3C/svg%3E"); }
.arenas-single-tratamiento .arenas-ico--trat::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203s6%206.6%206%2011a6%206%200%200%201-12%200c0-4.4%206-11%206-11z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203s6%206.6%206%2011a6%206%200%200%201-12%200c0-4.4%206-11%206-11z'/%3E%3C/svg%3E"); }
.arenas-single-tratamiento .arenas-ico--star::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l2.6%205.3%205.9.9-4.3%204.1%201%205.8L12%2016.9%206.8%2019.2l1-5.8L3.5%209.2l5.9-.9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l2.6%205.3%205.9.9-4.3%204.1%201%205.8L12%2016.9%206.8%2019.2l1-5.8L3.5%209.2l5.9-.9z'/%3E%3C/svg%3E"); }
.arenas-single-tratamiento .arenas-ico--tipos::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l9%205-9%205-9-5%209-5z'/%3E%3Cpath%20d='M3%2012l9%205%209-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l9%205-9%205-9-5%209-5z'/%3E%3Cpath%20d='M3%2012l9%205%209-5'/%3E%3C/svg%3E"); }
.arenas-single-tratamiento .arenas-ico--info::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cline%20x1='12'%20y1='11'%20x2='12'%20y2='16'/%3E%3Ccircle%20cx='12'%20cy='8'%20r='0.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cline%20x1='12'%20y1='11'%20x2='12'%20y2='16'/%3E%3Ccircle%20cx='12'%20cy='8'%20r='0.6'/%3E%3C/svg%3E"); }
.arenas-single-tratamiento .arenas-ico--clock::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207.5v5l3%202'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207.5v5l3%202'/%3E%3C/svg%3E"); }
.arenas-single-tratamiento .arenas-ico--shield::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l7%203v6c0%204-3%206.8-7%208-4-1.2-7-4-7-8V6z'/%3E%3Cpath%20d='M9%2012l2%202%204-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l7%203v6c0%204-3%206.8-7%208-4-1.2-7-4-7-8V6z'/%3E%3Cpath%20d='M9%2012l2%202%204-4'/%3E%3C/svg%3E"); }
.arenas-single-tratamiento .arenas-ico--doc::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203h8l4%204v14H6z'/%3E%3Cpath%20d='M14%203v4h4'/%3E%3Cline%20x1='9'%20y1='13'%20x2='15'%20y2='13'/%3E%3Cline%20x1='9'%20y1='16'%20x2='14'%20y2='16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203h8l4%204v14H6z'/%3E%3Cpath%20d='M14%203v4h4'/%3E%3Cline%20x1='9'%20y1='13'%20x2='15'%20y2='13'/%3E%3Cline%20x1='9'%20y1='16'%20x2='14'%20y2='16'/%3E%3C/svg%3E"); }
.arenas-single-tratamiento .arenas-ficha-slot__ico { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Ccircle%20cx='8.5'%20cy='10'%20r='1.6'/%3E%3Cpath%20d='M21%2015.5l-5-5-8.5%208'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Ccircle%20cx='8.5'%20cy='10'%20r='1.6'/%3E%3Cpath%20d='M21%2015.5l-5-5-8.5%208'/%3E%3C/svg%3E"); }


/* ==========================================================================
   Paginas de clinica: cabecera, galeria propia, tarjeta de datos y mapa
   bajo consentimiento.
   ========================================================================== */

.arenas-cl-cabecera h1 { margin-bottom: .35rem; }
/* Foto de cabecera de la clínica: opcional, se pone en «Imagen destacada». */
.arenas-cl-foto { margin-top: 1.4rem; }
.arenas-cl-foto img {
	border-radius: 14px;
	object-fit: cover;
	width: 100%;
}
@media (max-width: 782px) {
	.arenas-cl-foto img { height: 240px; }
}
.arenas-cl-cabecera .wp-block-post-excerpt { max-width: 62ch; color: var(--wp--preset--color--texto); }

.arenas-cl-cols { align-items: flex-start; }

/* Tarjeta lateral de datos: acompana al hacer scroll en pantallas grandes. */
.arenas-cl-lateral > .arenas-clinica-datos,
.arenas-cl-lateral .arenas-clinica-datos {
	background: #fff;
	border: 1px solid rgba(0,0,0,.06);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0,0,0,.05);
	padding: 1.6rem 1.7rem;
}
@media (min-width: 900px) {
	.arenas-cl-lateral { position: sticky; top: 6rem; }
}

/* ------- Galeria ------- */
.arenas-cl-galeria {
	display: grid;
	gap: .75rem;
	margin-top: 1.75rem;
	grid-template-columns: repeat(2, 1fr);
}
.arenas-cl-galeria--n1 { grid-template-columns: 1fr; }
.arenas-cl-galeria--n3 .arenas-cl-galeria__item:first-child,
.arenas-cl-galeria--n4 .arenas-cl-galeria__item:first-child { grid-column: 1 / -1; }

.arenas-cl-galeria__item { margin: 0; }
.arenas-cl-galeria__item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 14px;
	display: block;
	transition: transform var(--arenas-transicion, .3s ease);
}
.arenas-cl-galeria--n3 .arenas-cl-galeria__item:first-child img,
.arenas-cl-galeria--n4 .arenas-cl-galeria__item:first-child img { aspect-ratio: 16 / 9; }
.arenas-cl-galeria__item a:hover img,
.arenas-cl-galeria__item a:focus-visible img { transform: scale(1.02); }

/* Sin fotos todavia: panel sobrio, nunca una foto que no toca. */
.arenas-cl-galeria--vacia {
	grid-template-columns: 1fr;
	place-items: center;
	text-align: center;
	gap: .6rem;
	padding: 3.25rem 1.5rem;
	border: 1px dashed rgba(28,107,114,.28);
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(28,107,114,.05), rgba(28,107,114,.02));
	color: #5a6a6c;
}
.arenas-cl-galeria--vacia p { margin: 0; font-size: .95rem; }
.arenas-cl-galeria__ico {
	width: 42px; height: 42px; border-radius: 50%;
	background: rgba(28,107,114,.12);
	display: block;
}

/* ------- Mapa ------- */
.arenas-cl-mapa { margin-top: 3.5rem; }
.arenas-cl-mapa__titulo { margin-bottom: 1rem; }
.arenas-cl-mapa__caja {
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(0,0,0,.07);
	background: linear-gradient(180deg, rgba(28,107,114,.06), rgba(28,107,114,.02));
	min-height: 320px;
	display: grid;
	place-items: center;
}
.arenas-cl-mapa__aviso { text-align: center; padding: 2.5rem 1.5rem; max-width: 46ch; }
.arenas-cl-mapa__dir { font-weight: 600; margin: 0 0 .4rem; }
.arenas-cl-mapa__txt { font-size: .9rem; color: #5a6a6c; margin: 0 0 1.25rem; }
.arenas-cl-mapa__botones { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: 0; }
.arenas-cl-mapa__caja.is-cargado { min-height: 0; display: block; background: none; }
.arenas-cl-mapa__caja iframe { width: 100%; height: 420px; border: 0; display: block; }

@media (max-width: 781px) {
	.arenas-cl-mapa__caja iframe { height: 320px; }
}