/* Benroig — ajustes finos que theme.json no puede expresar.
   Referencia: desing/extraido/design.md (medidas reales del .ai, artboard 1920px). */

/* Filete vertical del header (idiomas y badge de Sciton). En el PDF de agosto
   mide 1x40px y su color medido es #f1eeed, que sobre blanco queda casi
   invisible en pantalla; se usa un gris cálido algo más presente. */
:root {
	--benroig-filete: #e7e1da;
}

/* Bandas a sangre pegadas entre sí.
   El layout "flow" de core mete 24px de margen entre hermanos
   (:where(.is-layout-flow) > :where(*+*) { margin-block-start: 24px }). Cuando
   dos bandas con fondo propio se tocan —Sciton/Diagnóstico, Experiencia/Marbella,
   Marbella/franja de imagen— por ese hueco asoma el blanco de la página. En el
   diseño las bandas van a hueso, así que se anula entre bloques a sangre. */
.entry-content.is-layout-flow > .alignfull + .alignfull,
main.wp-block-group.is-layout-flow > .alignfull + .alignfull {
	margin-block-start: 0;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
.site-header a {
	text-decoration: none;
	color: var(--wp--preset--color--texto-oscuro);
}

/* Caja del header: no ocupa todo el ancho de pantalla, se centra en una
   anchura de "caja" mayor que el contentSize normal (el header lleva más
   elementos a los lados que una columna de texto). */
.benroig-header-barra,
.benroig-nav-desktop {
	transition: padding 0.2s ease;
}
.benroig-header-top,
.benroig-header-mobile-bar,
.benroig-header-mobile-row,
.benroig-nav-desktop .benroig-nav {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* Fila superior: idiomas | logo | acciones. Grid en vez de flex space-between
   para que el logo quede centrado en la caja real, no desplazado por que
   idiomas y acciones tengan anchos distintos. */
.benroig-header-top {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 24px;
}
.benroig-header-idiomas {
	justify-self: start;
}
.benroig-header-logo {
	justify-self: center;
	text-align: center;
}
.benroig-header-acciones {
	justify-self: end;
}

/* Logo vectorial (extraído tal cual del .ai, no es texto) */
.benroig-logo-svg svg {
	display: block;
	height: 26px;
	width: auto;
	color: var(--wp--preset--color--acento);
	margin: 0 auto;
	transition: height 0.2s ease;
}
.benroig-logo-link {
	display: inline-block;
	text-decoration: none;
}
/* Bajada del logotipo oficial: "Laser & Regenerative Medicine" entre dos
   filetes. Medidas tomadas del PDF de agosto (página de 1920): wordmark de
   233x21, hueco de 12px y bajada de 208px de ancho con filetes de 22px. */
.benroig-logo-tagline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* La bajada ocupa el 89,5% del ancho del wordmark, la proporción medida
	   en el PDF (208,3 sobre 232,8). Los filetes rellenan lo que sobra a cada
	   lado del texto, así que la marca se mantiene proporcionada aunque el
	   logo cambie de tamaño al hacerse sticky. */
	width: 89.5%;
	margin-inline: auto;
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	color: #333d42;
	transition: opacity 0.2s ease;
}
.benroig-logo-tagline::before,
.benroig-logo-tagline::after {
	content: "";
	display: block;
	height: 1px;
	background: currentColor;
	flex: 1 1 auto;
}
.benroig-header-tagline {
	margin-top: 6px !important;
}

/* Selector de idioma: sin underline, separados por una línea vertical fina,
   no por un punto. */
.benroig-header-idiomas p,
.benroig-header-mobile-bar p {
	margin: 0;
	white-space: nowrap;
}
/* Los idiomas se separan sólo con aire: el filete que llevaba el diseño se
   retira por decisión del cliente. */
.benroig-header-idiomas p,
.benroig-header-mobile-bar p:first-child {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Bloque derecho del header: Pedir cita / Agendar llamada (icono + texto
   apilados) y las redes, sin separador entre ellos. */
.benroig-header-acciones {
	gap: 22px;
	align-items: center;
}
.benroig-header-accion {
	text-align: center;
}
.benroig-header-accion .benroig-icono {
	margin: 0 auto 4px;
	color: var(--wp--preset--color--acento);
}
.benroig-header-accion .benroig-icono svg {
	width: 20px;
	height: 20px;
}
.benroig-header-accion p {
	margin: 0;
	white-space: nowrap;
}
.benroig-header-social {
	gap: 10px;
}

/* Iconos sociales del header: color marrón corporativo (acento), no gris */
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link {
	background-color: transparent;
}
.wp-block-social-links .wp-social-link a {
	color: var(--wp--preset--color--texto-oscuro);
	fill: currentColor;
}
.benroig-header-social .wp-social-link a {
	color: var(--wp--preset--color--acento);
}
/* En el diseño los iconos sociales del pie son del marrón medio (#a18e80),
   no blancos. */
.site-footer .wp-block-social-links .wp-social-link a {
	color: var(--wp--preset--color--acento);
}

/* Menú de escritorio: pegado justo debajo del logo, sin línea separadora */
.benroig-nav-desktop {
	border-top: none;
	position: relative;
}

/* Badge "Sciton Pro Partner": pegado al margen derecho de la caja del menú,
   independiente del centrado del propio menú. */
.benroig-sciton-partner {
	position: absolute;
	right: max(40px, calc(50% - 660px));
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 16px !important;
	text-decoration: none;
}
/* El filete del diseño no va a la izquierda del badge: separa el logotipo de
   Sciton del rótulo "Sciton Pro Partner". */
.benroig-sciton-partner-texto {
	padding-left: 16px;
	border-left: 1px solid var(--benroig-filete);
}
.benroig-sciton-partner-logo {
	display: block;
	height: 18px;
	width: auto;
}
.benroig-sciton-partner-texto {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-cuerpo);
	white-space: nowrap;
}
/* Flecha del badge: la pidió el cliente por nota, aunque no está en el .ai
   ni en menu.pdf. Se desplaza al pasar por encima, como el resto de enlaces
   con flecha del sitio. */
.benroig-sciton-partner-flecha {
	font-size: 0.8rem;
	line-height: 1;
	color: var(--wp--preset--color--acento);
	transition: transform 0.18s ease;
}
.benroig-sciton-partner:hover .benroig-sciton-partner-flecha {
	transform: translateX(3px);
}
.benroig-sciton-partner:hover .benroig-sciton-partner-texto {
	color: var(--wp--preset--color--texto-oscuro);
}

@media (max-width: 1400px) {
	.benroig-sciton-partner { display: none !important; }
}
/* Menú principal (menú clásico de WordPress, ver inc/megamenu.php) */
.benroig-nav-lista {
	display: flex;
	justify-content: center;
	align-items: center;
	/* Medido en el .ai: 7 elementos de 10px con ~20px de hueco, 526px en total
	   sobre el artboard de 1920. */
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--nav);
	font-size: 10px;
}
.benroig-nav-item {
	position: static; /* el panel se posiciona contra .benroig-nav-desktop, no contra el <li> */
}
/* En el diseño el menú va en versales, con tracking y en peso normal; sólo
   el elemento activo es negrita y de color más oscuro. Salía todo en negrita
   porque de Barlow sólo se cargaban los pesos 600-900 y el navegador tiraba
   del más ligero disponible, el semibold. */
.benroig-nav-item > a {
	display: block;
	padding: 6px 0;
	text-decoration: none;
	white-space: nowrap;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--texto-cuerpo);
}
.benroig-nav-item.current-menu-item > a {
	font-weight: 700;
	color: var(--wp--preset--color--texto-oscuro);
}

/* Sticky: cuando el header se pega arriba, reducir el espacio que ocupa
   (menos padding vertical, logo más pequeño) para dejar más pantalla al
   contenido; se deja un resto de ~20px para que no quede pegado al borde. */
.site-header.is-stuck .benroig-header-barra {
	padding-top: 14px !important;
	padding-bottom: 10px !important;
}
.site-header.is-stuck .benroig-logo-svg svg {
	height: 18px;
}
/* La bajada encoge con el wordmark; si no, al pegarse el header queda un
   logotipo pequeño con una bajada del mismo tamaño que antes. */
.site-header.is-stuck .benroig-logo-tagline {
	font-size: 10px;
	margin-top: 5px;
}
.site-header.is-stuck .benroig-nav-desktop {
	padding-bottom: 10px !important;
}

/* ---------- Responsive header (sin diseño de referencia: criterio de
   usabilidad) ----------
   < 880px: se oculta la fila de escritorio y aparecen la franja móvil de
   idiomas/acciones, la fila logo+hamburguesa, y el menú de escritorio se
   sustituye por el botón + panel a pantalla completa. */
.benroig-header-mobile-bar,
.benroig-header-mobile-row,
.benroig-mobile-toggle,
.benroig-mobile-menu {
	display: none !important;
}

@media (max-width: 880px) {
	.benroig-header-top,
	.benroig-nav-desktop {
		display: none !important;
	}
	.benroig-header-barra {
		padding-top: 10px !important;
		padding-bottom: 0 !important;
	}
	.benroig-header-mobile-bar {
		display: flex !important;
		font-size: 0.7rem;
		padding-bottom: 6px;
		margin-block-start: 0 !important;
		border-bottom: 1px solid #e9e5dc;
		opacity: 0.85;
	}
	/* En la franja móvil los idiomas se aprietan un poco más. */
	.benroig-header-mobile-bar p:first-child {
		gap: 10px;
	}
	.benroig-header-mobile-row {
		display: flex !important;
		padding: 8px 0;
		margin-block-start: 0 !important;
	}
	.benroig-logo-link-movil .benroig-logo-svg svg {
		height: 20px;
	}
	.benroig-mobile-toggle {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		gap: 5px;
		width: 32px;
		height: 24px;
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
	}
	.benroig-mobile-toggle span {
		display: block;
		width: 100%;
		height: 2px;
		background: var(--wp--preset--color--texto-oscuro);
		transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease;
	}
	.benroig-mobile-toggle[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.benroig-mobile-toggle[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}
	.benroig-mobile-toggle[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.benroig-mobile-menu {
		position: fixed;
		inset: 0;
		z-index: 200;
		background: var(--wp--preset--color--blanco, #fff);
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
		overflow-y: auto;
		padding: 40px 24px calc(56px + env(safe-area-inset-bottom));
	}
	.benroig-mobile-menu.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.benroig-mobile-close {
		position: absolute;
		top: 20px;
		right: 20px;
		background: none;
		border: none;
		padding: 8px;
		cursor: pointer;
		color: var(--wp--preset--color--texto-oscuro);
	}
	.benroig-mobile-menu-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
		width: 100%;
		margin: auto;
	}
	.benroig-mobile-menu .benroig-logo-svg svg {
		height: 24px;
		color: var(--wp--preset--color--acento);
	}
	.benroig-mobile-nav {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		width: 100%;
	}
	.benroig-mobile-nav a {
		display: block;
		padding: 14px 0;
		font-family: var(--wp--preset--font-family--heading);
		font-size: 1.4rem;
		color: var(--wp--preset--color--texto-oscuro);
		text-decoration: none;
	}
	.benroig-mobile-social {
		display: flex;
		gap: 20px;
		margin-top: 10px;
	}
	.benroig-mobile-social a {
		color: var(--wp--preset--color--acento);
		display: inline-flex;
	}
	body.benroig-menu-abierto {
		overflow: hidden;
	}
}

/* Eyebrow: etiqueta pequeña versalada sobre casi todos los títulos de sección.
   Diseño: Early Sans Light 9–10pt, letter-spacing ~0.3–0.4em, color acento. */
.benroig-eyebrow {
	text-transform: uppercase;
	/* Tracking calibrado contra el .ai: "BIENVENIDOS A BENROIG" mide 162,31 px
	   en el diseño (Barlow-SemiBold 15) y aquí se compone a 10 px. Con 0.35em
	   salían 193 px (+18%). Descontando el tracking, los glifos suman 123 px,
	   así que hacen falta 2 px por hueco → 0.2em a 10 px de cuerpo. */
	letter-spacing: 0.2em;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
	color: var(--wp--preset--color--acento);
}
/* El antetítulo y su titular son una unidad. En el .ai van a 22 px de tinta a
   tinta (medido en "BIENVENIDOS A BENROIG", "TRATAMIENTOS DESTACADOS" y
   "ENFOQUE MÉDICO"); con el blockGap por defecto salían 34. */
.benroig-eyebrow + h2,
.benroig-eyebrow + h3 {
	margin-block-start: 12px;
}

/* Kicker del hero de Home: distinto del eyebrow normal — en el .ai va en
   negrita, color oscuro y partido en 2 líneas, no es el mismo tratamiento
   que "BIENVENIDOS A BENROIG" y demás eyebrows en acento. */
.benroig-hero-kicker {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.35;
	color: var(--wp--preset--color--texto-oscuro);
	margin-bottom: 14px !important;
}

/* ---------- Footer oscuro ----------
   Los enlaces heredaban el color de texto global (oscuro) sobre fondo oscuro:
   quedaban ilegibles. En el diseño son blancos. */
.site-footer a {
	color: var(--wp--preset--color--texto-blanco);
	text-decoration: none;
}
.site-footer a:hover {
	color: var(--wp--preset--color--acento);
	text-decoration: underline;
}
.site-footer {
	color: var(--wp--preset--color--texto-blanco);
}

/* Las tres columnas del pie caben en la caja de contenido (512→1408 en el .ai):
   240px cada una con 88px de separación. */
.site-footer .benroig-footer-columnas.alignwide {
	max-width: 900px;
}
/* Menú del pie: 6 entradas con paso vertical de 18px (10px de cuerpo,
   interlineado 1.8 y sin margen). */
.benroig-footer-menu > * {
	margin-block-start: 0 !important;
	line-height: 1.8;
}
/* Logo + claim centrados entre sí, como en el diseño. */
.benroig-footer-marca {
	display: inline-block;
	text-align: center;
}
/* Misma bajada del logotipo que en la cabecera (Athelas 14px entre dos
   filetes, 89,5% del ancho del wordmark), pero en blanco sobre la banda
   oscura y dejando los 11,5px de hueco que mide el .ai. */
.site-footer .benroig-logo-tagline {
	color: #ffffff;
	margin-top: 4px;
}
.site-footer .benroig-logo-svg svg {
	display: block;
	height: 21px;
	width: 233px;
	color: var(--wp--preset--color--texto-blanco);
}

/* Columna de dirección: pin + "Marbella" + dirección centrados, como en el diseño */
.benroig-footer-direccion {
	text-align: center;
}
.benroig-footer-direccion .benroig-footer-pin {
	margin-left: auto;
	margin-right: auto;
}
/* Dirección: 14px Athelas con paso de 18px, en crema (#eeeae4). En el .ai la
   columna arranca 9px por encima de las otras dos y los huecos son cortos:
   pin → MARBELLA 16px y MARBELLA → dirección 22px. */
.benroig-footer-direccion {
	margin-top: -4px !important;
}
.benroig-footer-direccion p {
	line-height: 1.3;
}
.benroig-footer-direccion > .benroig-footer-pin {
	margin-bottom: 0;
}
.benroig-footer-direccion > p {
	margin-top: 10px !important;
}
.benroig-footer-direccion > p + p {
	margin-top: 12px !important;
}

/* Pin de dirección en círculo oscuro, y avisos "Atención al paciente" /
   "Agendar llamada" con icono + filete inferior, como en el diseño. */
.benroig-footer-pin {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}
.benroig-footer-pin .benroig-icono {
	margin-bottom: 0;
}
.benroig-footer-pin .benroig-icono svg {
	width: 15px;
	height: 18px;
}
.benroig-footer-pin .benroig-icono {
	color: #ffffff;
	margin-top: 6px;
}
.benroig-footer-pin .benroig-icono svg path {
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.1 !important;
}
.benroig-footer-social-col {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* el último filete queda 43px por encima del borde de la banda en el .ai */
	padding-bottom: 5px;
}
/* Los cinco iconos ocupan 150px en el diseño: 21px cada uno con 11 de aire. */
.site-footer .benroig-footer-social {
	gap: 11px;
}
.site-footer .benroig-footer-social .wp-social-link svg {
	width: 21px;
	height: 21px;
}
/* Los filetes de la tercera columna son blancos finos en el diseño (medido
   #ffffff, ~0,5px); se compensa el grosor mínimo de 1px con la opacidad. */
.benroig-footer-social {
	padding-bottom: 14px;
	margin-bottom: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
/* Los dos avisos van muy pegados a sus filetes en el .ai: ~7px arriba y abajo,
   con el icono de 22px marcando la altura de la fila. */
.benroig-footer-aviso {
	align-items: center;
	gap: 10px;
	padding-bottom: 6px;
	margin-top: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
.benroig-footer-aviso .benroig-icono {
	color: var(--wp--preset--color--acento);
	flex-shrink: 0;
}
.benroig-footer-aviso .benroig-icono svg {
	width: 22px;
	height: 22px;
	display: block;
}
.benroig-footer-aviso p {
	margin: 0;
}

/* Franja legal inferior: fondo crema (#eeeae4 medido en el .ai), no oscuro —
   separada del footer por el cambio de color, no por una línea. Texto y
   enlaces en negro (#000000), Athelas 14px, línea de 46px de alto. */
.benroig-footer-legal,
.benroig-footer-legal p {
	color: #000000 !important;
	text-align: center;
	line-height: 1.3;
}
.benroig-footer-legal a {
	color: #000000 !important;
}
.benroig-footer-legal a:hover {
	color: var(--wp--preset--color--acento) !important;
}

/* Footer en móvil: todo centrado (las columnas se apilan, no tiene sentido
   mantener las alineaciones de escritorio). */
@media (max-width: 880px) {
	.benroig-footer-columnas .wp-block-column {
		text-align: center;
	}
	.benroig-footer-columnas .benroig-logo-link,
	.benroig-footer-pin {
		margin-left: auto;
		margin-right: auto;
	}
	.benroig-footer-menu {
		align-items: center;
	}
	.benroig-footer-social-col {
		align-items: center;
	}
	.benroig-footer-social {
		justify-content: center !important;
	}
	.benroig-footer-aviso {
		justify-content: center;
	}
}

/* ---------- CTA "Solicita una valoración médica personalizada" ----------
   Geometría medida en el .ai (pág. 1, y≈7867; idéntico en las 11 páginas):
   card blanca ~55% sobre fondo crema-alt, con 3 fichas de icono
   (Llamar / Whatsapp / Mail) y el botón "Reservar consulta" a todo el ancho.
   Las etiquetas y los iconos anteriores (Pedir cita / Llámenme /
   Marbella-Dubai) eran del diseño de julio. */
.benroig-cta-iconos {
	/* Fichas de 117px separadas 18px, medido en el .ai (x 537-654, 672-789,
	   807-924 dentro de una tarjeta de 507 a 964). */
	gap: 18px;
	margin: 28px 0 24px;
}
.benroig-cta-icono-item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	background-color: var(--wp--preset--color--crema-alt);
	border-radius: 10px;
	padding: 16px 14px;
}
/* Cada ficha es un enlace (tel / WhatsApp / mailto): el ancla de la etiqueta
   se estira sobre toda la ficha para que sea clicable entera. */
.benroig-cta-icono-item p a {
	color: inherit;
	text-decoration: none;
}
.benroig-cta-icono-item p a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.benroig-cta-icono-item .benroig-icono {
	color: var(--wp--preset--color--acento);
	margin-bottom: 10px;
}
.benroig-cta-icono-item .benroig-icono svg {
	width: 22px;
	height: 22px;
}
.benroig-cta-icono-item p {
	margin: 0;
	color: var(--wp--preset--color--texto-oscuro);
}
/* Columna derecha de la marca. Medida en el .ai (pág. 1, y 7676→8316):
   la tarjeta blanca acaba en x=964 y el H3 arranca en x=1048 → 84px de aire
   entre columnas (36px de gap + el centrado del texto en su columna).
   H3 "Science Precision Excellence": 28px Athelas #4d5051, centrado; su eje
   (x=1203,5) coincide con el de la bajada, que también va centrada. */
/* El layout flex de la columna deja crecer a los hijos y la tarjeta se comía
   el hueco entre columnas: se fija a su flex-basis (51% = 459px de los 900 de
   la caja, el 457 del .ai) y el resto se lo queda la columna de marca. */
.benroig-cta-card {
	/* box-sizing explícito: sin él el flex-basis se aplica a la caja de
	   contenido y los 96px de padding lateral se suman por fuera, así que la
	   tarjeta salía ~100px más ancha que el 51% pedido. */
	box-sizing: border-box;
	flex: 0 0 51%;
	max-width: 51%;
}
.benroig-cta-marca {
	flex: 1 1 auto;
	text-align: center;
}
.benroig-cta-marca h3 {
	margin-bottom: 14px;
}
/* La bajada es el mismo componente que la del logotipo (.benroig-logo-tagline):
   Athelas con un filete a cada lado, caja baja, no versales. En la cabecera va
   en #333d42; aquí el .ai la pinta en #4d5051 (texto-oscuro), igual que el H3,
   y a 17px (texto medido: 223px de ancho, filetes incluidos 302px). */
.benroig-cta-tagline {
	width: 100%;
	max-width: 320px;
	margin-top: 0;
	font-size: 17px;
	color: var(--wp--preset--color--texto-oscuro);
}
@media (max-width: 782px) {
	.benroig-cta-tagline {
		font-size: 15px;
	}
}

.benroig-cta-boton .wp-block-button {
	width: 100%;
}
.benroig-cta-boton .wp-block-button__link {
	display: block;
	text-align: center;
}
/* Por debajo de 782px WordPress apila las columnas: hay que soltar el tope
   del 51% o la tarjeta se quedaría a media anchura. */
@media (max-width: 781px) {
	.benroig-cta-card {
		flex: 1 1 100%;
		max-width: none;
	}
}
@media (max-width: 600px) {
	.benroig-cta-card {
		padding: 28px !important;
	}
	.benroig-cta-card h2 {
		font-size: 1.6rem !important;
	}
	.benroig-cta-iconos {
		flex-wrap: wrap;
	}
	.benroig-cta-icono-item {
		flex: 1 1 calc(50% - 12px);
		min-width: calc(50% - 12px);
	}
}

/* Contenedor de imagen hero con badge flotante superpuesto */
.benroig-hero-media {
	position: relative;
}
.benroig-badge-float {
	position: absolute !important;
	max-width: 260px;
	background-color: rgba(255, 255, 255, 0.88) !important;
	backdrop-filter: blur(6px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	z-index: 2;
}
.benroig-badge-float.is-bottom-left {
	left: 0;
	bottom: 40px;
	border-radius: 10px;
}
.benroig-badge-float p {
	margin: 0;
}

/* Badge de la portada arqueada de Home: desplazada más a la izquierda,
   sobresaliendo del borde de la imagen (que ahora va centrada en su
   columna, no pegada a la derecha). */
.benroig-badge-arco {
	left: -18px !important;
}

/* =====================================================================
   Patrón "dos columnas con la foto a la DERECHA".
   Antes se llamaba `benroig-diagnostico`, por el primer bloque que lo usó;
   el nombre describía el contenido y no la composición, así que en cuanto
   apareció el segundo consumidor dejó de ser cierto. Ahora lo comparten:
     · "Innovación en el diagnóstico" (Home y Tratamientos)
     · "Dr. Javier Broekhuizen Benítez" (Equipo Médico, .ai pág. 5)
   Es el espejo de `benroig-cols-foto`: mismos papeles (una columna lleva
   antetítulo + H2 + foto, la otra intro + cuerpo + botón, casadas por abajo),
   cambiando de lado la columna de la foto.
   Comprobado en el .ai que los dos bloques son la misma composición: mismo
   fondo #4d5051, mismos anchos (izq. 406/896 = 45,3% vs 44,75%; hueco 46,5 vs
   52; dcha. 443,5 vs 49,45%), misma proporción de foto (360×443 = 0,813 en la
   pág. 5 frente a 353×436 = 0,810 en la pág. 1) y mismo ancho de foto dentro
   de su columna (81,2% vs 80%). Por eso NO lleva modificador.
   Medido en el .ai pág. 1 (y 2421→3433 del artboard de 1920) y pág. 2.
   Caja de contenido 512→1408 (896). Columna izq. x=512 w=401 (44,75%),
   hueco 52, columna dcha. x=965 w=443 (49,45%). Columnas alineadas por
   ABAJO (el pie del botón, y=3234, coincide con el pie de la foto, 3229).
   Fondo #4d5051. Tipos (pdftohtml -zoom 1):
     antetítulo  10px EarlySans  #eeeae4  x=965  y=2567
     H2          42px Athelas    #ffffff  x=965  y=2594, interlineado 42
     intro izq.  21px EarlySans bold #eeeae4 x=512 y=2693, interlineado 24
     cuerpo      14px EarlySans  #ffffff  x=514  y=2801, interlineado 18
     foto        x 1043→1397, y 2792→3229 (353×436, radio 60)
   ===================================================================== */
.benroig-cols-foto-dcha .benroig-eyebrow {
	/* Sobre la banda oscura el antetítulo va en crema, no en acento.
	   Separación al H2 medida en el .ai: 34px de tinta a tinta. */
	color: var(--wp--preset--color--crema);
	margin-bottom: 23px;
}
.benroig-cols-foto-dcha h2 {
	/* 42/42 en el .ai: interlineado igual al cuerpo. */
	line-height: 1;
	margin: 0;
}
.benroig-cols-foto-dcha .benroig-intro-bloque {
	/* El título de introducción ocupa ~56% del ancho de su columna (226 de
	   401) y rompe en tres líneas, como en el diseño. */
	max-width: 58%;
	line-height: 1.143;
	margin: 0 0 36px;
}
.benroig-cols-foto-dcha .wp-block-column > p:not(.benroig-eyebrow):not(.benroig-intro-bloque) {
	line-height: 1.286;
	margin: 0 0 18px;
}
.benroig-cols-foto-dcha .benroig-foto-lateral {
	/* 353 de 443 = 80% de la columna, pegada al borde derecho de la caja. */
	width: 80%;
	margin: 107px 0 0 auto;
}
.benroig-cols-foto-dcha .benroig-foto-lateral img {
	display: block;
	width: 100%;
	aspect-ratio: 353 / 436;
	object-fit: cover;
	/* El .ai recorta el original (1055×1490) por arriba y por abajo, pero no
	   centrado: deja 22px más de aire arriba que un `center`. */
	object-position: center 15%;
	border-radius: 60px;
}
@media (max-width: 781px) {
	.benroig-cols-foto-dcha.wp-block-group {
		/* Los 144/200 del diseño son para la maqueta a 1920. */
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}
	.benroig-cols-foto-dcha .benroig-intro-bloque {
		max-width: none;
	}
	.benroig-cols-foto-dcha .benroig-foto-lateral {
		width: 100%;
		margin-top: 40px;
	}
}

/* Foto de hero recortada en arco. Proporciones tomadas de la máscara real del .ai
   (extraido/imagenes/page1_img8_8789.png, 357x555): el arco superior es un
   semicírculo de radio = 50% del ancho = 32% del alto; abajo, esquina suave. */
.benroig-arco {
	max-width: 430px;
	margin-left: auto;
	margin-right: auto;
}
.benroig-arco img,
.benroig-arco.wp-block-image img {
	border-radius: 50% 50% 3% 3% / 32% 32% 2% 2%;
	object-fit: cover;
	width: 100%;
	aspect-ratio: 357 / 555;
	display: block;
	filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.28));
}

/* Bandas de foto a ancho completo. Alturas medidas sobre el .ai a 1920px:
   la primera ocupa 878px (ratio 2.19) y la segunda 679px (ratio 2.83). */
.wp-block-image.alignfull img {
	width: 100%;
	aspect-ratio: 1920 / 878;
	object-fit: cover;
	object-position: center;
	display: block;
}
.wp-block-image.alignfull.is-franja-corta img {
	aspect-ratio: 1920 / 679;
}
@media (max-width: 782px) {
	.wp-block-image.alignfull img,
	.wp-block-image.alignfull.is-franja-corta img {
		aspect-ratio: 3 / 2;
	}
}

/* Esquinas redondeadas grandes para fotografías, según el diseño original.
   El radio es una variable para no duplicar la regla: las fotos de las áreas de
   Tratamientos lo suben con `is-radio-xl` (ver más abajo). */
.benroig-rounded-xl img,
.benroig-rounded-xl.wp-block-image img,
.benroig-rounded-xl {
	border-radius: var(--benroig-radio, 28px);
}
/* Radio de las fotos de bloque del .ai. Las máscaras de recorte del Illustrator
   dan 60 sobre 359 (facial), 84 sobre 448 (corporal grande) y 50 sobre 245
   (corporal pequeña): ~18% del ancho. 56px es el punto medio para los huecos
   que tienen esas fotos en la web, que son más estrechos que en el artboard. */
.is-radio-xl {
	--benroig-radio: 56px;
}
/* Escalón intermedio. Las máscaras de recorte de la pág. 6 dan 42 sobre 453
   («El espacio») y 37 sobre 385 («Experiencia internacional»): ~9,5% del ancho,
   la mitad de redondeo que las fotos de Tratamientos. */
.is-radio-l {
	--benroig-radio: 40px;
}
/* El mapa de Contacto (.ai pág. 8) es la pieza más ancha con esquina redonda:
   903 px de caja y radio 72 (8% del ancho), medido ajustando la curva del borde
   superior en dos puntos (t=16 → inset 26,5; t=32 → inset 12). */
.is-radio-xxl {
	--benroig-radio: 72px;
}

/* ---------- Sombra de fotografía, medida y reutilizable ----------------------
   Perfilada en el .ai (pág. 6, foto «Recepción», borde inferior en y3014 sobre
   fondo blanco): 180 → 202 → 231 → 248 → 255, o sea se apaga a los ~8,5px por
   abajo y a los ~5px por los lados. Es una sombra CORTA, nada que ver con el
   `drop-shadow(0 25px 35px)` que arrastraba `.benroig-arco`.
   Va como clase de nombre genérico porque el cliente pide el mismo tratamiento
   en las fotos del equipo (pág. 5). El color es el gris verdoso del diseño. */
.benroig-sombra-foto {
	--benroig-sombra: 0 3px 10px rgba(63, 73, 75, 0.28);
}
.benroig-sombra-foto img,
.benroig-sombra-foto.wp-block-image img,
iframe.benroig-sombra-foto {
	box-shadow: var(--benroig-sombra);
}
/* Sobre banda oscura la sombra gris del diseño sería invisible: el .ai la pinta
   más negra. Medido bajo el mapa, sobre el fondo #3f494b, el píxel más oscuro es
   40,47,48 → un negro al 36% de opacidad. */
.benroig-sombra-foto.is-sobre-oscuro {
	--benroig-sombra: 0 4px 12px rgba(0, 0, 0, 0.36);
}

/* ---------- Patrón reutilizable "columna con foto + columna con texto" ----------
   Medido en la Home, bloque "Destino, Marbella" (y 5320→6045 del .ai): sobre la
   caja de contenido de 896px el reparto es foto 356 + hueco 94 + texto 446, o
   sea 39,7% / 49,8% con un gap de 94px. El antetítulo y el título van DENTRO de
   la columna de la foto, encima de ella, y la columna de texto se alinea al pie
   de la foto (verticalAlignment "bottom"). Esta fórmula se repite en varios
   bloques de la web, por eso va como clase reutilizable y no como excepción. */
.benroig-cols-foto.wp-block-columns {
	gap: 94px;
	align-items: flex-end;
	margin-top: 0;
	margin-bottom: 0;
}
.benroig-cols-foto > .wp-block-column > :first-child {
	margin-top: 0;
}
.benroig-cols-foto > .wp-block-column > :last-child {
	margin-bottom: 0;
}
/* Hueco entre el título y la foto que queda debajo (56px en el .ai, menos el
   margen inferior que el H2 ya trae). */
.benroig-cols-foto .benroig-foto-vertical {
	margin-top: 40px;
}
/* Foto vertical del diseño: 355 × 506 px de artboard (medido sobre el render
   del .ai). El recorte lo hace el CSS, así que sirve cualquier original con
   proporción parecida.
   La proporción es una variable: cada variante del patrón puede fijar la suya
   con `--benroig-foto-ratio` sin duplicar la regla (p. ej. el bloque Sciton de
   la Home, que en el .ai mide 397 × 431). */
.benroig-foto-vertical img {
	width: 100%;
	aspect-ratio: var(--benroig-foto-ratio, 355 / 506);
	object-fit: cover;
	object-position: center;
	display: block;
}
/* Párrafo destacado (entradilla) del diseño: 21px de cuerpo con 24 de
   interlineado (1,143) en EarlySans-Light → Inter Light. Medido con
   `pdftohtml -zoom 1`, que es el único que da el cuerpo real. */
.benroig-destacado {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.143;
	/* NEGRITA POR DECISIÓN DEL CLIENTE — el .ai NO la lleva.
	   Medido en el diseño, este destacado y la lista de abajo usan la misma
	   fontspec que el texto corrido (EarlySansVariable-Light, o sea peso 300).
	   El cliente pidió expresamente en revisión que fueran en negrita, así que
	   aquí se fuerza el peso 600 de Inter (cargado en theme.json). No es un
	   error de medición: si algún día se quiere volver al diseño original,
	   basta con devolver el peso a 300 aquí y en .benroig-lista-suelta li. */
	font-weight: 600;
	margin-bottom: 34px;
}
/* Texto corrido de 14px con interlineado 18 (1,286). */
.benroig-cols-foto p.has-base-font-size,
.benroig-lista-suelta {
	line-height: 1.286;
}
/* Lista de puntos: 14px de cuerpo y 36px de línea a línea entre puntos. */
.benroig-lista-suelta {
	padding-left: 1.15em;
	margin-top: 34px;
}
.benroig-lista-suelta li + li {
	margin-top: 18px;
}
/* Variante compacta: los idiomas de Clínica van renglón a renglón, al mismo
   ritmo de 18px que el texto corrido de al lado (.ai pág. 6, y2035→2107). */
.benroig-lista-suelta.is-compacta {
	line-height: 1.29;
	margin-top: 18px;
}
.benroig-lista-suelta.is-compacta li + li {
	margin-top: 0;
}
/* Misma negrita de cliente que .benroig-destacado (ver comentario de arriba):
   en el .ai estos puntos van en peso Light, la negrita es petición expresa. */
.benroig-lista-suelta li {
	font-weight: 600;
}

/* ---------- Variante "foto ancha" del mismo patrón ---------------------------
   La usa el bloque "Tecnología láser: Sciton" de la Home (.ai pág. 1, y 1579→
   2200). La ESTRUCTURA es idéntica a la de Marbella —antetítulo + H2 + foto en
   la columna izquierda, solo texto en la derecha y las dos columnas casadas por
   abajo—, así que comparte `benroig-cols-foto` y aquí solo cambian el reparto y
   la proporción de la foto.
   Medidas del .ai (caja de contenido 512→1408 = 896):
     columna izquierda 512→912  (400: antetítulo, H2 de 3 líneas y foto)
     hueco             48        (94 en Marbella)
     columna derecha   960→1408 (448)
     foto              512→908 × 1770→2200 → 397 × 431 (356 × 520 en Marbella)
     antetítulo y1579 · H2 y1594→1742 · foto y1770 (28px bajo el H2)
     el pie del botón (y2188) casa con el de la foto (y2200): alineación por
     abajo, que es la que ya trae `.benroig-cols-foto`.
   Cualquier otro bloque con esta fórmula hereda el arreglo con solo añadir
   `benroig-cols-foto is-foto-ancha` y los anchos 44,6% / 50%. */
.benroig-cols-foto.is-foto-ancha.wp-block-columns {
	--benroig-foto-ratio: 397 / 431;
	gap: 48px;
}
/* Modificador de recorte, no de bloque: la foto va en proporción de retrato
   353×436 (0,810), la misma que usa el patrón de foto a la derecha. La lleva
   el bloque "Dra. Virginia Benítez Roig" (.ai pág. 5, foto 353×436 medida
   sobre el render). El original equipo-dra-virginia.jpg es 710×875 = 0,811,
   así que el recorte no deforma nada. */
.is-foto-retrato {
	--benroig-foto-ratio: 353 / 436;
}
/* Hueco H2 → foto: 28px en el .ai, menos el margen inferior que ya trae el H2. */
.benroig-cols-foto.is-foto-ancha .benroig-foto-vertical {
	margin-top: 12px;
}
.benroig-cols-foto .wp-block-buttons {
	margin-top: 32px;
}
/* Botón grande del diseño: 400,6 × 35,9. NO llena la columna (400,6 de 448 =
   89,4%); solo lo parece en la franja de Diagnóstico, donde la columna es más
   estrecha. Se deja el `width:100` de WordPress —que es lo que estira el <a>—
   y se le pone el tope real del diseño.
   Va en la clase base, no en `is-foto-ancha`: el bloque "Dra. Virginia Benítez
   Roig" (.ai pág. 5) usa la variante de foto estrecha y su botón mide 401 sobre
   una columna de 448, exactamente lo mismo. Es la misma confusión de siempre:
   parece al 100% y en realidad va al 89,5%. */
.benroig-cols-foto .wp-block-button {
	max-width: 400px;
}

/* Título que encabeza la columna de texto en este patrón (el "Sciton y Benroig:
   tecnología de referencia…" del .ai). En el diseño es EarlySans de 21px con 16
   de interlineado (0,76) en marrón #8c8078, no un título serif: por eso lleva la
   familia del cuerpo y no la de titulares.
   Ancho: en el .ai parte en 4 líneas dentro de la columna de 448. La línea más
   larga mide 242,2 y la más corta que aún cabría con la palabra siguiente son
   271,5, así que la caja del diseño está entre 242 y 271 → ~57% de la columna
   (255px). Es intencionado, no un defecto de maquetación.
   Si se reutiliza en un bloque cuyo título deba ir a todo el ancho (franja de
   Diagnóstico, plataformas de Láser I+D), basta con `max-width:none` en la
   regla del bloque. */
.benroig-subtitulo-bloque {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	/* El .ai lleva 16px de interlineado sobre 21 (0,76). Con Inter, que tiene
	   más altura de x y descendentes más largas que EarlySans, a 0,76 las líneas
	   se tocan: 1,0 es lo más ceñido que queda legible. */
	line-height: 1;
	letter-spacing: 0;
	color: var(--wp--preset--color--texto-cuerpo);
	/* El ancho de caja cambia por bloque: 57% en el Sciton de la Home (242-271
	   sobre 448) y 75% en «La combinación de BBL HEROic…» de Láser I+D (370
	   sobre ~500, pág. 4 del .ai). Por eso va como variable y no fijo. */
	max-width: var(--benroig-subtitulo-ancho, 57%);
	margin: 0 0 26px;
}
/* El estrechado del titular es INDEPENDIENTE del estilo tipográfico, así que el
   modificador vale por sí solo: lo lleva el subtítulo de palo seco de Sciton y
   también los H2 serif de Equipo Médico («Experiencia, liderazgo y visión
   estética» y «Un equipo que te acompaña en cada fase»), que en el .ai pág. 5
   rompen en 3 líneas dentro de una caja más estrecha que su columna. */
.is-ancho-75 {
	--benroig-subtitulo-ancho: 75%;
	max-width: var(--benroig-subtitulo-ancho);
}
/* Mismo mecanismo, otro escalón: el H2 «Atención internacional en el corazón de
   Marbella» del .ai pág. 6 parte en 4 líneas dentro de una caja de 229–261 sobre
   una columna de 441 → 56%. El cliente lo pidió «al 75%», pero medido es esto. */
.is-ancho-56 {
	--benroig-subtitulo-ancho: 56%;
	max-width: var(--benroig-subtitulo-ancho);
}
/* Sobre fondo oscuro (franja Diagnóstico) el marrón no contrasta: quien reutilice
   la clase ahí solo tiene que añadir la clase de color de WordPress
   (`has-texto-blanco-color has-text-color`), que gana por `!important`. */

@media (max-width: 880px) {
	.benroig-cols-foto.is-foto-ancha.wp-block-columns {
		gap: 32px;
	}
	.benroig-cols-foto.is-foto-ancha .benroig-foto-vertical {
		margin-top: 24px;
	}
	.benroig-cols-foto.is-foto-ancha .wp-block-button {
		max-width: none;
	}
	/* En una sola columna el 57% deja el título en una tira estrechísima. */
	.benroig-subtitulo-bloque {
		line-height: 1.2;
		max-width: none;
	}
}

@media (max-width: 880px) {
	.benroig-cols-foto.wp-block-columns {
		gap: 32px;
	}
	.benroig-foto-vertical img {
		aspect-ratio: 4 / 3;
	}
	.benroig-cols-foto p.has-base-font-size,
	.benroig-lista-suelta {
		line-height: 1.45;
	}
}

/* "Enfoque médico" (Tratamientos) es el mismo bloque que "Bienvenidos a
   Benroig" de la Home, con una columna más: comparte `benroig-col-icono` y
   `benroig-icono-filete` y ya no necesita gap propio (el reparto 30/70 del
   marcado deja las columnas a los 135 px del .ai con el blockGap común).
   Lo único suyo es que el cuarto hueco lleva el logotipo de Sciton en vez de
   un pictograma: en el .ai mide 100,6 × 28,1 px. */
.benroig-sciton-mini img {
	display: block;
	width: 100px;
	height: auto;
}

/* Tarjetas (tratamientos, testimonios, cards de blog) */
.benroig-card {
	border-radius: 14px;
	transition: transform 0.2s ease;
}
/* Fórmula general de tarjeta: pila vertical con el CTA anclado al pie.
   Las tarjetas hermanas de una fila ya se estiran a la misma altura (las
   columnas de Gutenberg son flex con align-items: stretch); al convertir la
   tarjeta en contenedor flex en columna, el `margin-top: auto` del CTA empuja
   el enlace al fondo y todos los "Ver tratamientos →" quedan a la misma altura
   aunque el texto de cada tarjeta mida distinto.
   Se limita a las tarjetas que son wp:column para no convertir en flex las
   tarjetas que son wp:group con layout constrained (card del blog). */
.wp-block-column.benroig-card {
	display: flex;
	flex-direction: column;
}
/* Selector de descendencia (no `>`) a propósito: en las tarjetas de wp:column
   el CTA es hijo directo, pero en las que son wp:group (tratamiento, noticia)
   cuelga del grupo interior con padding. Así la misma fórmula sirve a todas. */
.benroig-card .benroig-card-cta {
	/* `margin-top:auto` ancla el CTA al pie de la tarjeta: NO tocar, es lo que
	   iguala su altura en toda la fila. Lo que sube es el aire por encima: en el
	   .ai (pág. 4, tarjeta «PicoWay», que es la de texto más largo) hay 60px de
	   tinta a tinta entre la última línea y el CTA; con 20 se quedaba corto. */
	margin-top: auto;
	padding-top: 34px;
	margin-bottom: 0;
}
/* Ritmo interior de la tarjeta. Medido en el .ai p1, tarjeta "Medicina
   estética / Facial": icono→título 41,3 px y título→texto 25,0 px de tinta a
   tinta; con el blockGap por defecto de Gutenberg (24 px) salían 45 y 34.
   El `:not(:first-child)` es obligatorio: el reset de primer hijo que trae
   Gutenberg va en `:where()` (especificidad 0) y cualquier regla lo pisaría,
   metiendo un margen fantasma arriba en las tarjetas que empiezan por título
   (las de Láser I+D y Sciton, que no llevan icono).
   El CTA queda fuera a propósito: su `margin-top: auto` es lo que lo ancla al
   pie de la tarjeta y no se debe tocar. */
.benroig-card > h3:not(:first-child),
.benroig-card > h4:not(:first-child) {
	margin-block-start: 20px;
}
.benroig-card > p:not(.benroig-card-cta):not(:first-child) {
	margin-block-start: 15px;
}
/* El .ai compone el texto de tarjeta a 15/12 (interlineado 0,8). Aquí el
   cuerpo es `sm` (12 px) y con el interlineado global salía a 20 px de paso:
   1.3 lo deja en ~15,6 y acerca el bloque de 4 líneas a la mancha del diseño
   sin llegar a la ilegibilidad de un 0,8 literal. */
.benroig-card p {
	line-height: 1.3;
}
.benroig-card:hover {
	transform: translateY(-4px);
}
/* Logotipo de plataforma en las tarjetas de Láser I+D (pág. 4 del .ai): va
   arriba del todo, a la izquierda, con una altura contenida para que las ocho
   marcas se vean del mismo tamaño óptico pese a sus proporciones distintas. */
.benroig-card-logo {
	margin: 0 0 18px;
}
.benroig-card-logo img {
	width: auto;
	max-width: 100%;
	max-height: 34px;
	height: auto;
	display: block;
}
.benroig-card h3 strong {
	font-weight: 700;
}

/* El cuerpo del tema va a `font-weight: 300`, y el `bolder` que el navegador
   aplica por defecto a <strong> sobre 300 se queda en 400: la negrita no se
   veía. El .ai sí la marca (los nombres de plataforma de Láser I+D pág. 4, los
   destacados de las fichas), así que se fija un peso explícito. En los títulos
   no hace falta: parten de 400 y su `bolder` ya da 700. */
p strong,
li strong,
p b,
li b {
	font-weight: 600;
}
/* Página Tratamientos: listado de enlaces por categoría (no son cards en
   el .ai, es una lista con filete inferior, icono/eyebrow/título/desc a la
   izquierda + imagen en arco, lista a la derecha). */
.benroig-lista-tratamientos-col {
	padding-top: 4px;
}
.benroig-lista-tratamiento {
	align-items: baseline;
	padding-bottom: 14px;
	margin-bottom: 14px !important;
	border-bottom: 1px solid rgba(120, 113, 100, 0.25);
}
.benroig-lista-tratamiento p:first-child {
	margin: 0;
	overflow-wrap: normal;
	word-break: normal;
	flex: 1 1 0;
	min-width: 0;
}
.benroig-lista-tratamiento p:last-child {
	flex: 0 0 auto;
}
/* Solo el enlace de la derecha ("Ver tratamiento →") va en versalitas; el
   nombre del tratamiento, a la izquierda, se lee en caja normal. */
.benroig-lista-tratamiento p:last-child a {
	white-space: nowrap;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--acento);
}
.benroig-lista-tratamiento p:first-child a {
	text-decoration: none;
	color: var(--wp--preset--color--texto-oscuro);
}
.benroig-lista-tratamiento p:first-child a:hover {
	color: var(--wp--preset--color--acento);
}
.benroig-lista-tratamiento a:hover {
	text-decoration: underline;
}
.has-oscuro-background-color .benroig-lista-tratamiento {
	border-bottom-color: rgba(255, 255, 255, 0.2);
}

.benroig-card a {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	/* En el .ai el "VER TRATAMIENTOS →" de la tarjeta va en marrón (#8c8078),
	   no en gris; se usa el marrón de la paleta, igual que el mismo enlace en
	   la lista de tratamientos. */
	color: var(--wp--preset--color--acento);
}
.benroig-card a:hover {
	color: var(--wp--preset--color--texto-oscuro);
}
/* El título de una tarjeta de archivo (`post-title` con `isLink`) también es un
   <a> y heredaba el tratamiento de "enlace CTA": versalitas, tracking y color
   acento. Es un titular, no un enlace de acción: se le devuelve su composición.
   Afecta a las tarjetas de noticia (Blog / Prensa) y a las de tratamiento
   (archivos de área e indicación). */
.benroig-card .wp-block-post-title a {
	text-transform: none;
	letter-spacing: normal;
	font-weight: inherit;
	color: inherit;
}

/* Cabecera de tarjeta de reseña: estrellas a la izquierda, icono Google a la derecha */
/* Titular del bloque de reseñas (2º "Experiencia Benroig", .ai pág. 1
   y≈7075): "Resultados que se reconocen." / "Experiencias que generan
   confianza." en 2 líneas forzadas, a la izquierda y a toda la caja de
   contenido (antes llevaba un max-width:520px en línea que lo centraba y lo
   metía ~190px hacia dentro). Sin max-width propio hereda el de la caja
   constrained (900px), que es justo lo que pide el diseño. */
@media (max-width: 600px) {
	.benroig-resenas-titulo br {
		display: none;
	}
}

.benroig-resena-top {
	align-items: center;
	margin-bottom: 14px;
}
.benroig-resena-top .benroig-icono {
	margin-bottom: 0;
	color: var(--wp--preset--color--texto-oscuro);
}
.benroig-resena-top .benroig-icono svg {
	width: 22px;
	height: 22px;
}

/* Insignia de Google en las reseñas: es un logo de color (4 colores de
   marca), no un icono de trazo — hay que sacarlo del tratamiento genérico
   fill:none/stroke:currentColor que aplana todos los .benroig-icono. */
.benroig-google-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #d8d2c5;
	border-radius: 6px;
	padding: 5px;
}
.benroig-google-badge .benroig-icono {
	margin-bottom: 0;
}
.benroig-google-badge .benroig-icono svg {
	width: 26px;
	height: 26px;
}
.benroig-google-badge .benroig-icono svg path {
	stroke: none !important;
}
.benroig-google-badge .benroig-icono svg path:nth-child(1) {
	fill: #4285f4 !important;
}
.benroig-google-badge .benroig-icono svg path:nth-child(2) {
	fill: #34a853 !important;
}
.benroig-google-badge .benroig-icono svg path:nth-child(3) {
	fill: #fbbc05 !important;
}
.benroig-google-badge .benroig-icono svg path:nth-child(4) {
	fill: #ea4335 !important;
}

/* Estrellas testimonios */
.benroig-stars::before {
	content: "★★★★★";
	color: var(--wp--preset--color--acento);
	letter-spacing: 2px;
	font-size: 0.85rem;
}

/* ---------- Línea de tiempo de la banda oscura "Un proceso claro..." ----------
   Línea vertical fina en color acento con un punto por paso. Por decisión del
   cliente se conserva esta maqueta (no la del .ai) pero sin el rótulo "PASO 0N":
   cada ítem es «0N. Título» en acento (#a18e80) y la descripción debajo. */
.benroig-timeline {
	position: relative;
	padding-left: 42px;
}
.benroig-timeline::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 12px;
	bottom: 12px;
	width: 1px;
	background-color: var(--wp--preset--color--acento);
	opacity: 0.55;
}
.benroig-timeline-item {
	position: relative;
	margin-bottom: 38px;
}
.benroig-timeline-item:last-child {
	margin-bottom: 0;
}
.benroig-timeline-item::before {
	content: "";
	position: absolute;
	left: -42px;
	top: 4px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--acento);
}
.benroig-timeline-item > * {
	margin-top: 0;
	margin-bottom: 6px;
}
.benroig-timeline-item > *:last-child {
	margin-bottom: 0;
}
/* La página Sciton lleva su propio timeline escrito a mano que todavía usa
   .benroig-timeline-paso (sólo el número, sin la palabra "Paso"); se conserva
   la regla para no dejarla sin estilo. */
.benroig-timeline-paso {
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--wp--preset--color--acento);
}
.benroig-timeline-titulo {
	color: var(--wp--preset--color--acento);
	line-height: 1.2;
}
/* El número comparte color y cuerpo con el título: en el .ai van seguidos
   ("01. Escuchamos"), sin ningún cambio de estilo entre ambos. */
.benroig-timeline-num {
	color: inherit;
	font-family: inherit;
}
.benroig-timeline-texto {
	color: rgba(255, 255, 255, 0.68);
}

/* ---------- Iconos de línea extraídos del .ai ----------
   Los SVG de origen son trazado abierto sin atributos de pintura: hay que
   dibujarlos como línea, no como relleno, o salen como astillas negras. */
.benroig-icono {
	display: block;
	margin-bottom: 16px;
	/* En el .ai los iconos DE CONTENIDO (tarjetas, columnas con icono, datos de
	   ficha) van en el gris oscuro del texto, no en marrón: medido #4d5051 en la
	   franja "Bienvenidos" y en los datos de la ficha (p1 y p3 del .ai).
	   Los iconos de MARCA/interfaz (cabecera, pie, banda CTA) sí son marrones y
	   ya lo declaran ellos, así que este cambio no les afecta. */
	color: var(--wp--preset--color--texto-oscuro);
	/* El SVG es un elemento en línea: sin esto la caja del icono arrastra el
	   medio interlineado de la línea y mete ~5 px muertos entre el icono y lo
	   que va debajo (filete, número, título). */
	line-height: 0;
}
/* …salvo sobre las bandas oscuras (áreas de la página Tratamientos), donde el
   gris del texto sería ilegible: allí el icono va en blanco, como en el .ai.
   Se excluye a propósito `oscuro-alt` (el pie), que pinta sus iconos aparte. */
.has-oscuro-background-color .benroig-icono {
	color: var(--wp--preset--color--texto-blanco);
}

/* Marca (wordmark + bajada) usada como remate de un bloque, no como logotipo de
   navegación: la lleva "Enfoque médico" de Equipo Médico, centrada sobre el
   grupo de columnas. Medido en el .ai pág. 5: wordmark de 214,6 × 19,7 con el
   centro en x=1179,6 (el grupo de tres columnas va de 958,9 a 1414,5, centro
   1186,7), bajada 32,2 px por encima de los iconos. */
.benroig-marca-bloque {
	display: block;
	margin: 0 auto 32px;
	width: 215px;
	max-width: 100%;
	color: var(--wp--preset--color--acento);
}
.benroig-marca-bloque svg {
	display: block;
	width: 100%;
	height: auto;
}
.benroig-marca-bloque .benroig-logo-tagline {
	font-size: 11px;
}

/* ---------- Ficha de miembro del equipo (Equipo Médico, .ai pág. 5) ----------
   Foto casi cuadrada con sombra marcada, y debajo nombre, cargo e idiomas,
   todo centrado. Medido sobre el render de la pág. 5:
     foto            361,4 × 384 (0,941) — el cliente la describe como
                     "cuadrada"; el diseño no lo es del todo, se respeta lo
                     medido. Radio de esquina ~55-60.
     foto → nombre   19,7 · nombre → cargo 9,6 · cargo → idiomas 27,8
                     (el "doble espacio" que pide el cliente es un margen
                     mayor, ~2,9×, no una línea en blanco).
     nombre          Athelas 32 #4d5051 · cargo e idiomas EarlySans 17 #8c8078
   La sombra se ha medido perfilando el borde: por debajo se extiende 20px
   arrancando en un gris del 58%, por la derecha 13px y por arriba y por la
   izquierda 7px. Eso es un desplazamiento de ~3/7px con ~13px de desenfoque.
   SÍ existe en el diseño (a diferencia del caso de Tratamientos, donde la
   sombra que se veía era nuestra y hubo que quitarla). */
.benroig-miembro {
	text-align: center;
}
/* La sombra y el radio van en la figura, no en la imagen: la imagen se recorta
   dentro (`overflow: hidden`) y si la sombra fuera suya se recortaría también. */
.benroig-miembro .wp-block-image {
	width: 84%;
	margin: 0 auto;
	aspect-ratio: 361 / 384;
	overflow: hidden;
	border-radius: var(--benroig-radio, 56px);
	box-shadow: 3px 7px 13px rgba(0, 0, 0, 0.55);
}
.benroig-miembro .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* El .ai no encaja la foto entera: mete el original a 585×780 en una ventana
	   de 361×384, o sea un 1,62 sobre lo que daría un `cover`. Se reproduce con
	   escala en vez de con márgenes negativos porque los cuatro originales no
	   comparten proporción (dos son 0,750 y dos 0,730) y así el encuadre sale
	   igual en los cuatro. El origen alto sube el zoom hacia la cara. */
	transform: scale(1.62);
	transform-origin: center 26%;
}
.benroig-miembro h4 {
	margin: 25px 0 0;
}
.benroig-miembro .benroig-miembro-cargo {
	margin: 0;
}
.benroig-miembro .benroig-miembro-idiomas {
	margin: 18px 0 0;
}

/* Variante reutilizable: icono con filete inferior (franja "Bienvenidos a
   Benroig" y cualquier otra columna que siga la misma fórmula).
   Medido en el .ai p1: línea de 0.5 pt en #a67c52 a 7 px por debajo del icono,
   del ancho completo de la columna (135 px sobre columnas de 135 px). */
/* Filete marrón del diseño: 0,5 pt en #a67c52 al ancho completo de la columna.
   Un único mecanismo para los dos sitios donde aparece:
   · `benroig-icono-filete` — bajo el hueco del icono (columnas tipo
     "Bienvenidos a Benroig" y "Enfoque médico"), 135 px en el .ai;
   · `benroig-filete` — como separador entre textos (los 4 datos de la ficha,
     pág. 3: icono → filete → etiqueta → filete → valor, 76,67 px).
   En los dos casos el filete SEPARA, nunca cierra: el último elemento del
   bloque no lleva filete debajo. */
.benroig-icono-filete,
.benroig-filete {
	padding-bottom: 5px;
	margin-bottom: 4px;
	border-bottom: 1px solid #a67c52;
}
/* Bajo un texto el filete necesita menos padding que bajo un icono: la caja de
   línea ya baja del ojo de la letra. Con esto los dos casos dan los ~6,5–7 px
   de tinta a filete que mide el .ai. */
.benroig-filete {
	padding-bottom: 1px;
}
/* Detrás de un filete no hace falta el blockGap de Gutenberg: el filete ya es
   la separación. Las columnas con `benroig-col-icono` declaran su propio ritmo
   y ganan por especificidad, así que esto solo actúa donde no hay ninguno. */
.benroig-icono-filete + *,
.benroig-filete + * {
	margin-block-start: 0;
}
.benroig-icono-filete {
	/* Hueco de icono de alto fijo. En el .ai los filetes de las cuatro columnas
	   de "Enfoque médico" (pág. 2) caen todos en la misma y aunque los
	   pictogramas midan entre 28,1 y 37,6 px de alto, y lo mismo pasa en
	   "Bienvenidos" (pág. 1): el hueco manda, no el dibujo. Así el filete, el
	   número y el título quedan alineados entre columnas aunque una lleve un
	   logotipo en vez de un pictograma.
	   `content-box` para que los 38 px sean los del hueco y no se los coman el
	   padding y el propio filete. */
	box-sizing: content-box;
	min-height: var(--benroig-icono-alto, 38px);
}

/* Fórmula reutilizable "columna con icono": icono + filete + número + título +
   texto. El blockGap por defecto de Gutenberg (24 px) es casi el doble de lo
   que pide el .ai y es lo que el cliente ve como "demasiada separación".
   Ritmo medido en el .ai p1, columna 01 (huecos entre tintas):
   icono→filete 7,3 · filete→"01" 21,7 · "01"→título 16,6 · título→texto 10,4. */
.benroig-col-icono > * {
	margin-block-start: 0;
}
.benroig-col-icono > .benroig-step-number {
	margin-block-start: 14px;
}
.benroig-col-icono > h3:not(:first-child),
.benroig-col-icono > h4:not(:first-child) {
	margin-block-start: 8px;
}
/* Los títulos de una sola palabra no se parten a media palabra: en el .ai
   pág. 5 «Especialización.» y «Personalización.» ocupan 129,6 y 131,5 de una
   columna de 135, y «Acompañamiento.» mide 149,8 y DESBORDA la suya. O sea que
   el diseño admite que se salgan antes que partirlas. Con Georgia (sustituta
   de Athelas) nos pasamos por 1-2 px y WordPress las estaba cortando en
   «Especializació / n.». */
.benroig-col-icono h3,
.benroig-col-icono h4 {
	overflow-wrap: normal;
	word-break: normal;
}
.benroig-col-icono > p:not(.benroig-step-number):not(:first-child) {
	margin-block-start: 4px;
}
.benroig-icono svg {
	/* Una sola variable para el tamaño del icono: así el hueco que reserva
	   `benroig-icono-filete` sigue siempre al dibujo y el filete cae a la
	   misma altura en todas las columnas. */
	width: var(--benroig-icono-alto, 38px);
	height: var(--benroig-icono-alto, 38px);
	overflow: visible;
}
.benroig-icono svg path,
.benroig-icono svg polyline,
.benroig-icono svg line,
.benroig-icono svg circle,
.benroig-icono svg rect {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Franja numerada 01/02/03 */
.benroig-step-number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1rem;
	color: var(--wp--preset--color--acento);
	letter-spacing: 0.2em;
}

/* Tira de sellos y logos acreditadores ("Garantía Benroig").
   Titular del .ai (pág. 1, y≈8393): "Experiencia médica. Tecnología
   avanzada. / Atención internacional." Ocupa toda la caja de contenido
   (la línea 1 mide 701 px de los 896 disponibles), así que NO lleva
   max-width propio: hereda el de la caja constrained (900px). Antes tenía
   360px, que lo centraba y lo sangraba respecto al resto del bloque. */
/* Los 16 sellos de "Garantía Benroig". Antes eran tres tiras PNG
   (`sellos-awards.png` y `sellos-logos-1/2.png`): en responsive sólo podían
   encogerse en bloque y no se podían recolocar. Ahora cada logotipo es una
   imagen independiente con su propio alt, y las dos filas se reparten por TIPO
   de logotipo, no por la tira de la que salían.

   Medido en el .ai (pág. 1, zona Garantía, artboard 1920):
   · Fila 1 — los 7 Service Award, todos de 74x69px y separados 63px, de
     x=513 a x=1407: exactamente la caja de contenido (896px).
   · Fila 2 — las 9 sociedades y universidades, en UNA sola línea a sangre,
     de x=57 a x=1831 (1775px), con separaciones de 18 a 48px.
     OJO: en el .ai estos NO comparten alto — están equilibrados ópticamente
     (altos de 47 a 139px, anchos de 141 a 208). Por eso cada uno lleva su
     `height` del diseño en `--sello-alto` con `width:auto`, en vez de un alto
     común, que dejaría a SEMAL y World Society diminutos y a TECH enorme. */
.benroig-sellos-logos-grupo {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}
.benroig-sellos-logos-grupo figure {
	flex: 0 0 auto;
	margin: 0;
}
.benroig-sellos-logos-grupo img {
	display: block;
	width: auto;
	max-width: none;
}
/* Fila 1: los Service Award, al ancho de la caja de contenido. */
.benroig-sellos-fila-1 {
	max-width: 900px;
	margin: 48px auto 40px;
}
.benroig-sellos-fila-1 img {
	height: 69px;
}
/* Fila 2: el resto de entidades, a sangre y en una sola línea. El grupo padre
   lleva 40px de padding lateral y WordPress ya se los descuenta al hijo
   .alignfull, así que aquí sólo queda el inset del diseño (57px). */
.benroig-sellos-fila-2 {
	margin-top: 40px;
	padding-inline: 57px;
}
.benroig-sellos-fila-2 img {
	height: var(--sello-alto);
}
.benroig-sello-selmq {
	--sello-alto: 59px;
}
.benroig-sello-aslms {
	--sello-alto: 83px;
}
.benroig-sello-seme {
	--sello-alto: 48px;
}
.benroig-sello-ela {
	--sello-alto: 48px;
}
.benroig-sello-semal {
	--sello-alto: 139px;
}
.benroig-sello-wscg {
	--sello-alto: 93px;
}
.benroig-sello-nebrija {
	--sello-alto: 48px;
}
.benroig-sello-tech {
	--sello-alto: 47px;
}
.benroig-sello-uab {
	--sello-alto: 77px;
}
/* Por debajo de 1240px los 9 logotipos en una línea quedan ilegibles: ahí sí
   se les deja saltar de línea y se reducen al 80%. Es una decisión de
   usabilidad, el .ai sólo define el estado de 1920. */
@media (max-width: 1240px) {
	.benroig-sellos-fila-2 {
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 34px;
		row-gap: 28px;
		padding-inline: 0;
	}
	.benroig-sellos-fila-2 img {
		height: calc(var(--sello-alto) * 0.8);
	}
}
@media (max-width: 782px) {
	.benroig-sellos-fila-1 {
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 28px;
		row-gap: 20px;
	}
	.benroig-sellos-fila-1 img {
		height: 54px;
	}
	.benroig-sellos-fila-2 img {
		height: calc(var(--sello-alto) * 0.62);
	}
}

/* ---------- Ficha de tratamiento ----------
   Geometría medida en el .ai (página 3, artboard 1920): un único bloque beige
   a dos columnas — texto a la izquierda, los 4 datos y las fotos a la derecha. */
.benroig-ficha-subtitulo {
	line-height: 1.05;
	color: var(--wp--preset--color--texto-oscuro);
}
/* Título/subtítulo/intro dejan hueco a la derecha (no ocupan la columna
   entera); el cuerpo largo del tratamiento sí la ocupa por completo. */
.benroig-ficha-cabecera {
	max-width: 88%;
}
/* El antetítulo de la cabecera de ficha va en el gris oscuro del diseño, no en
   el marrón de acento que usa .benroig-eyebrow en el resto del sitio. Medido en
   el .ai, págs. 3 (ficha tipo) y 10 (BBL HEROic): #3f484b. Se acota a la
   cabecera a propósito: en las bandas de contenido el diseño sí quiere marrón. */
.benroig-ficha-cabecera .benroig-eyebrow {
	color: #3f484b;
}
/* Los 4 datos arrancan a la altura del botón "Solicitar cita" de la columna
   izquierda, no pegados arriba del todo. */
.benroig-ficha-columna-datos {
	padding-top: 210px;
}
@media (max-width: 782px) {
	.benroig-ficha-columna-datos {
		padding-top: 0;
	}
	.benroig-datos-tratamiento {
		flex-wrap: wrap !important;
		row-gap: 20px;
	}
	.benroig-dato-item {
		flex: 1 1 calc(50% - 10px) !important;
		min-width: calc(50% - 10px);
	}
}

/* Sección de vídeo: embed real o placeholder oscuro con botón de play,
   mismo ancho que la columna de contenido. */
.benroig-video-tratamiento {
	max-width: 900px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
}
.benroig-video-tratamiento iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.benroig-video-placeholder {
	background-color: var(--wp--preset--color--oscuro);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.benroig-video-placeholder p {
	color: var(--wp--preset--color--texto-blanco);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
}
.benroig-video-play {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: #ff0000;
	position: relative;
}
.benroig-video-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #ffffff;
}
.benroig-ficha .wp-block-post-title {
	line-height: 1;
}
.benroig-ficha-foto img,
.wp-block-post-featured-image.benroig-ficha-foto img {
	border-radius: 18px;
	width: 100%;
	height: auto;
	display: block;
}
.benroig-ficha-foto-2 {
	margin-top: 20px;
}

/* Los 4 datos de la ficha: icono → filete → etiqueta → filete → valor.
   En el .ai (pág. 3) hay 8 filetes, dos por dato, y NINGUNO cierra el bloque:
   el dato termina en el valor. Los dos filetes los pone la clase compartida
   `benroig-filete` desde el marcado, así que aquí no hay borde de contenedor. */
.benroig-datos-tratamiento {
	gap: 18px;
	align-items: flex-start;
	margin-bottom: 40px;
}
.benroig-dato-item {
	flex: 1 1 0;
	min-width: 0;
}
.benroig-dato-item .benroig-icono {
	--benroig-icono-alto: 26px;
}
/* Etiqueta y valor comparten color y cuerpo en el .ai (EarlySans 18 en
   #8c8078 los dos); solo cambian la caja y el peso: la etiqueta va en
   versalitas espaciadas y peso normal, el valor en redonda y negrita. */
.benroig-dato-item .benroig-label,
.benroig-dato-item p:not(.benroig-label) {
	color: var(--wp--preset--color--texto-cuerpo);
}
.benroig-dato-item .benroig-label {
	font-weight: 400;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.benroig-dato-item p:not(.benroig-label) {
	margin: 0;
	line-height: 1.3;
	font-weight: 700;
}

/* Los 4 datos vienen de post meta y en las fichas importadas están vacíos.
   La fila se muestra SIEMPRE, con un aviso visible en los campos sin valor,
   para que quede claro que falta completarlos y no pasen desapercibidos. */
.benroig-datos-tratamiento p:not(.benroig-label):empty::before {
	content: "Pendiente de completar";
	color: var(--wp--preset--color--acento);
	font-style: italic;
	opacity: 0.75;
}

/* Datos de contacto grandes (teléfono, email, dirección): Georgia en el diseño */
.benroig-dato {
	font-family: var(--wp--preset--font-family--georgia);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.35;
	color: var(--wp--preset--color--texto-oscuro);
}

/* Label de bloque de datos: Inter Bold 12pt versalada y espaciada */
.benroig-label {
	font-family: var(--wp--preset--font-family--datos);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acento);
}

/* ---------- Ficha de noticia (single.html) ----------------------------------
   El .ai no tiene página de noticia: la composición se deriva del lenguaje ya
   medido. Caja de 896px, cabecera sobria dentro de la caja (no héroe a sangre:
   las imágenes de las entradas son recortes de prensa y portadas de revista de
   proporciones dispares), y cuerpo a dos columnas 60/32 con la lateral a la
   derecha, igual que la columna secundaria de la ficha de tratamiento.
   Todo lo visual se apoya en componentes que ya existen: `benroig-eyebrow`,
   `benroig-filete`, `benroig-rounded-xl`/`is-radio-l` y `benroig-card` +
   `benroig-card-cta`. Aquí sólo van la geometría propia y el módulo de lista
   compacta de la lateral, que no tenía equivalente. */
.benroig-noticia-cabecera .wp-block-post-title {
	/* El H1 del diseño va a 69/62 (0,90). Un titular de noticia es mucho más
	   largo que "Science. Precision. Excellence." y a 0,90 las líneas se tocan:
	   0,98 mantiene el aire cerrado del diseño sin solapar. */
	line-height: 0.98;
	margin-bottom: 0;
}
/* Las categorías salen del bloque post-terms, que es un <div> con enlaces:
   el tratamiento tipográfico lo pone `benroig-eyebrow` y aquí sólo se limpia
   el subrayado del enlace. */
.benroig-noticia-cabecera .benroig-eyebrow a {
	text-decoration: none;
	color: inherit;
}
.benroig-noticia-cabecera .benroig-eyebrow a:hover {
	color: var(--wp--preset--color--texto-oscuro);
}
/* Fila de datos bajo el titular: fecha y vuelta al listado, cerrada por el
   filete común del sitio. */
.benroig-noticia-meta {
	margin-top: 28px;
	column-gap: 20px;
	row-gap: 6px;
}
.benroig-noticia-meta p,
.benroig-noticia-meta .wp-block-post-date {
	margin: 0;
	color: var(--wp--preset--color--texto-cuerpo);
}
.benroig-noticia-volver a {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--wp--preset--color--acento);
}
.benroig-noticia-volver a:hover {
	color: var(--wp--preset--color--texto-oscuro);
}
/* `benroig-filete + *` anula el blockGap porque el filete ya separa; la foto
   destacada sí necesita aire, así que se lo devuelve. */
.benroig-noticia-cabecera .benroig-noticia-foto {
	margin-block-start: 36px;
	margin-bottom: 0;
}
.benroig-noticia-foto img {
	display: block;
	width: 100%;
	height: auto;
}

/* Cuerpo del artículo. La escala del diseño (H2 42 / H3 21) está medida sobre
   la caja completa de 896px; en la columna de 540px de la noticia un 42 rompe
   la mancha, así que los subtítulos bajan un escalón de la MISMA escala
   (xl y lg), sin inventar cuerpos nuevos. */
.benroig-noticia-texto h2 {
	font-size: var(--wp--preset--font-size--xl);
	margin-block-start: 36px;
}
.benroig-noticia-texto h3 {
	font-size: var(--wp--preset--font-size--lg);
	margin-block-start: 28px;
}
.benroig-noticia-texto img {
	max-width: 100%;
	height: auto;
	border-radius: var(--benroig-radio, 28px);
}
/* Mismo criterio que el "Pendiente de completar" de los datos de tratamiento:
   el hueco se ve, no se disimula. */
.benroig-noticia-pendiente {
	color: var(--wp--preset--color--acento);
	font-style: italic;
	opacity: 0.75;
}

/* Barra lateral: cuerpo un escalón por debajo del texto corrido (12px, el
   `sm` del diseño) para que no compita con el artículo. */
.benroig-sidebar {
	font-size: var(--wp--preset--font-size--sm);
}
.benroig-side-modulo {
	margin-bottom: 42px;
}
.benroig-side-modulo .benroig-eyebrow {
	margin-bottom: 14px;
}
/* Lista compacta de otras noticias: miniatura cuadrada + título + fecha.
   Es la única pieza sin equivalente previo — la tarjeta del listado
   (`benroig-card`) es de 3 columnas y a 260px de ancho no cabe. */
.benroig-side-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}
.benroig-side-item + .benroig-side-item {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--benroig-filete);
}
.benroig-side-item a {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
}
.benroig-side-foto {
	flex: 0 0 62px;
}
.benroig-side-foto img {
	display: block;
	width: 62px;
	height: 62px;
	object-fit: cover;
	border-radius: 8px;
}
.benroig-side-texto {
	min-width: 0;
}
.benroig-side-titulo {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.25;
	color: var(--wp--preset--color--texto-oscuro);
}
.benroig-side-fecha {
	display: block;
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--texto-cuerpo);
}
.benroig-side-item a:hover .benroig-side-titulo {
	color: var(--wp--preset--color--acento);
}
/* Categorías: el bloque core/categories, con el mismo filete de separación
   que la lista de noticias. */
.benroig-side-categorias {
	list-style: none;
	margin: 0;
	padding: 0;
}
.benroig-side-categorias li + li {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--benroig-filete);
}
.benroig-side-categorias a {
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--texto-oscuro);
}
.benroig-side-categorias a:hover {
	color: var(--wp--preset--color--acento);
}
/* La tarjeta común, en versión lateral: hay que declarar el flex a mano
   porque `.wp-block-column.benroig-card` no aplica (aquí es un wp:group), y
   el hover que levanta la tarjeta se desactiva: no es un enlace de rejilla,
   es un bloque fijo de la columna. */
.benroig-side-cta {
	display: flex;
	flex-direction: column;
	border-radius: 14px;
}
.benroig-side-cta > .benroig-card-cta {
	padding-top: 18px;
}
.benroig-side-cta:hover {
	transform: none;
}

/* Anterior / siguiente, alineado a la caja y cerrado por arriba con filete. */
.benroig-noticia-nav {
	border-top: 1px solid var(--benroig-filete);
	padding-top: 22px;
	column-gap: 24px;
	row-gap: 10px;
}
.benroig-noticia-nav a {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--wp--preset--color--texto-cuerpo);
}
.benroig-noticia-nav a:hover {
	color: var(--wp--preset--color--acento);
}
.benroig-noticia-nav .post-navigation-link-next {
	margin-left: auto;
	text-align: right;
}

/* Por debajo de 782px Gutenberg apila las columnas: la lateral pasa a ser un
   pie de artículo y necesita separarse del cuerpo. */
@media (max-width: 782px) {
	.benroig-sidebar {
		margin-top: 46px;
		padding-top: 34px;
		border-top: 1px solid var(--benroig-filete);
	}
	.benroig-noticia-cabecera .wp-block-post-title {
		line-height: 1.05;
	}
}

/* ---------- Formulario de contacto (Contact Form 7 y formulario nativo) ----------
   Diseño: campos blancos, borde fino, radio ~6px, placeholder dentro del campo,
   botón sólido oscuro a todo el ancho con texto versalado espaciado. */
.benroig-form .wpcf7-form-control-wrap {
	display: block;
}

.benroig-form input[type="text"],
.benroig-form input[type="email"],
.benroig-form input[type="tel"],
.benroig-form textarea,
.benroig-formulario-contacto input[type="text"],
.benroig-formulario-contacto input[type="email"],
.benroig-formulario-contacto input[type="tel"],
.benroig-formulario-contacto textarea {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--blanco);
	border: 1px solid #ded8cd;
	border-radius: 6px;
	padding: 14px 16px;
	margin-bottom: 12px;
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--texto-oscuro);
	transition: border-color 0.15s ease;
}

.benroig-form textarea,
.benroig-formulario-contacto textarea {
	min-height: 110px;
	resize: vertical;
}

.benroig-form input::placeholder,
.benroig-form textarea::placeholder,
.benroig-formulario-contacto input::placeholder,
.benroig-formulario-contacto textarea::placeholder {
	color: #a7a099;
	opacity: 1;
}

.benroig-form input:focus,
.benroig-form textarea:focus,
.benroig-formulario-contacto input:focus,
.benroig-formulario-contacto textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--acento);
}

.benroig-form input[type="submit"],
.benroig-form .wpcf7-submit,
.benroig-formulario-contacto button[type="submit"],
.benroig-formulario-contacto input[type="submit"] {
	width: 100%;
	display: block;
	margin-top: 6px;
	background-color: var(--wp--preset--color--oscuro);
	color: var(--wp--preset--color--texto-blanco);
	border: 0;
	border-radius: 6px;
	padding: 16px 24px;
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.benroig-form input[type="submit"]:hover,
.benroig-form .wpcf7-submit:hover,
.benroig-formulario-contacto button[type="submit"]:hover,
.benroig-formulario-contacto input[type="submit"]:hover {
	background-color: var(--wp--preset--color--acento);
}

/* Spinner y mensajes de CF7, adaptados a la paleta */
.benroig-form .wpcf7-spinner {
	display: block;
	margin: 10px auto 0;
}
.benroig-form .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: 6px;
	border-width: 1px;
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}
.benroig-form .wpcf7-not-valid-tip {
	margin: -8px 0 10px;
	font-family: var(--wp--preset--font-family--datos);
	font-size: var(--wp--preset--font-size--sm);
	color: #b3261e;
}
.benroig-form .wpcf7-not-valid {
	border-color: #b3261e;
}

/* Grid responsive de cards de tratamientos */
@media (max-width: 782px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap;
	}
	.benroig-arco img,
	.benroig-arco.wp-block-image img {
		border-radius: 50% 50% 3% 3% / 24% 24% 2% 2%;
	}
	.benroig-badge-float.is-bottom-left {
		left: 0;
		bottom: -20px;
	}
}

/* ============================================================
   Megamenú de Tratamientos
   Referencia: desing/menu.pdf (5 artboards, uno por área).
   El panel es una franja a todo el ancho bajo la barra del menú: raíl de
   áreas a la izquierda, columnas de indicaciones a la derecha.
   ============================================================ */

.benroig-megamenu-wrap {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 90;
	background: var(--wp--preset--color--blanco);
	border-top: 1px solid rgba(120, 113, 100, 0.3);
	box-shadow: 0 18px 40px -24px rgba(38, 48, 51, 0.35);
	/* Oculto por defecto sin sacarlo del flujo: así el panel ya tiene su
	   altura calculada y no hay salto al abrirlo. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.benroig-nav-item.is-abierto > .benroig-megamenu-wrap {
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition-delay: 0s;
}

.benroig-megamenu-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 40px 40px 48px;
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	column-gap: 60px;
	align-items: start;
}

/* Raíl de áreas */
.benroig-megamenu-areas {
	margin: 0 0 48px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.benroig-megamenu-areas button {
	appearance: none;
	background: none;
	border: 0;
	padding: 8px 0;
	width: 100%;
	text-align: left;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--nav);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-cuerpo);
	transition: color 0.15s ease;
}
.benroig-megamenu-areas button:hover,
.benroig-megamenu-area.is-activa button {
	color: var(--wp--preset--color--texto-oscuro);
	font-weight: 700;
}

/* Texto y botones bajo el raíl */
.benroig-megamenu-pie-texto {
	margin: 0 0 22px;
	font-size: 0.78rem;
	line-height: 1.7;
	color: var(--wp--preset--color--texto-cuerpo);
}
.benroig-megamenu-pie-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.benroig-megamenu-pie .benroig-boton {
	display: inline-block;
	padding: 11px 20px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--nav);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.benroig-boton-oscuro {
	background: var(--wp--preset--color--texto-oscuro);
	color: var(--wp--preset--color--texto-blanco) !important;
}
.benroig-boton-linea {
	border: 1px solid rgba(120, 113, 100, 0.5);
	color: var(--wp--preset--color--texto-oscuro) !important;
}

/* Paneles y columnas */
.benroig-megamenu-panel[hidden] {
	display: none;
}
.benroig-megamenu-cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 42px 32px;
}
.benroig-megamenu-col {
	padding-left: 26px;
	border-left: 1px solid rgba(120, 113, 100, 0.28);
	min-width: 0;
}
.benroig-megamenu-col-titulo {
	display: block;
	margin-bottom: 16px;
	font-family: var(--wp--preset--font-family--nav);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--texto-oscuro);
	text-decoration: none;
	text-wrap: balance;
}
.benroig-megamenu-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.benroig-megamenu-col li + li {
	margin-top: 2px;
}
.benroig-megamenu-col li a {
	display: block;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--wp--preset--color--texto-cuerpo);
	text-decoration: none;
	transition: color 0.15s ease;
}
.benroig-megamenu-col li a:hover,
.benroig-megamenu-col-titulo:hover {
	color: var(--wp--preset--color--acento);
}

/* Con pocas columnas el grid de 4 dejaría huecos enormes a la derecha. */
@media (max-width: 1180px) {
	.benroig-megamenu-inner {
		grid-template-columns: 200px minmax(0, 1fr);
		column-gap: 36px;
	}
	.benroig-megamenu-cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Aviso al administrador cuando no hay menú asignado */
.benroig-aviso-menu {
	margin: 0;
	font-size: 0.8rem;
	color: #b3261e;
}

/* ---------- Megamenú en móvil: acordeón dentro del panel lateral ---------- */
.benroig-mobile-nivel {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}
.benroig-mobile-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.benroig-mobile-fila > a {
	flex: 1;
}
.benroig-mobile-abrir {
	appearance: none;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
	color: var(--wp--preset--color--acento);
	line-height: 0;
}
/* Chevron dibujado con bordes: evita cargar otro SVG solo para esto. */
.benroig-mobile-abrir > span {
	display: block;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
}
.benroig-mobile-abrir[aria-expanded="true"] > span {
	transform: rotate(-135deg) translate(-2px, -2px);
}
.benroig-mobile-sub[hidden] {
	display: none;
}

/* El panel móvil original era una lista plana centrada; con el megamenú pasa
   a ser un acordeón de cuatro niveles, así que se alinea a la izquierda y la
   tipografía baja de tamaño según se profundiza. */
.benroig-mobile-nav {
	align-items: stretch !important;
	text-align: left;
}
.benroig-mobile-nav a {
	padding: 12px 0 !important;
}
.benroig-mobile-nivel-1 {
	padding-left: 14px;
	border-left: 1px solid rgba(120, 113, 100, 0.25);
}
.benroig-mobile-nivel-1 a {
	font-family: var(--wp--preset--font-family--nav) !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 9px 0 !important;
}
.benroig-mobile-nivel-2 {
	padding-left: 14px;
}
.benroig-mobile-nivel-2 > li > .benroig-mobile-fila > a {
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}
.benroig-mobile-nivel-3 {
	padding-left: 14px;
}
.benroig-mobile-nivel-3 a {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 0.86rem !important;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--texto-cuerpo) !important;
	padding: 6px 0 !important;
}

/* ---------- Página Capilar ---------- */
.benroig-capilar-lema {
	margin-top: 4px;
	color: var(--wp--preset--color--texto-oscuro);
	font-weight: 700;
}
/* Caja "Protocolos médicos": los nombres son enlaces a cada ficha, en el
   mismo tamaño tipográfico que en el diseño (grandes, centrados). */
.benroig-protocolos {
	text-align: center;
}
.benroig-protocolos .benroig-eyebrow {
	margin-bottom: 18px;
}
.benroig-protocolo-enlace {
	margin: 0 0 6px;
	line-height: 1.5;
}
.benroig-protocolo-enlace a {
	text-decoration: none;
	color: var(--wp--preset--color--texto-cuerpo);
	transition: color 0.15s ease;
}
.benroig-protocolo-enlace a:hover {
	color: var(--wp--preset--color--acento);
}

/* ---------- Patrón de lista numerada por indicación ---------------------------
   Medido en el .ai, pág. 2, bloque "Medicina estética facial" (y 2866→3300) y
   confirmado igual en "Tratamientos corporales", "Medicina regenerativa" y
   "Salud y rejuvenecimiento íntimo": es UNA sola fórmula con variante de color.

     número      x1015 · 19px · Inter18pt-Bold · #8c8078 (marrón, SIEMPRE)
     hueco       52px hasta el cuerpo (x1067)
     título      14px · semibold · interlineado 18 (1,29)
     términos    14px · light · mismo interlineado
     filete      arranca en el cuerpo (x1068), NO bajo el número, y mide 361
                 sobre una columna de 516 → 70% del ancho del cuerpo
     ritmo       14px del texto al filete, 6px del filete a la entrada siguiente
     la última entrada NO lleva filete

   Variante sobre fondo oscuro (la aplica el propio fondo del grupo, sin clase
   nueva): texto #f2f2f2 y el número se queda en marrón. */
.benroig-indicacion {
	align-items: flex-start;
	gap: 26px !important;
	padding: 0;
	margin-bottom: 6px;
}
.benroig-indicacion-num {
	margin: 0;
	min-width: 26px;
	font-size: 19px !important;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.02em;
	/* El marrón se mantiene también sobre el fondo oscuro: así lo pide el .ai. */
	color: var(--wp--preset--color--texto-cuerpo) !important;
}
.benroig-indicacion-cuerpo {
	flex: 1;
	min-width: 0;
}
.benroig-indicacion-titulo,
.benroig-indicacion-lista {
	margin: 0;
	line-height: 1.29;
}
.benroig-indicacion-titulo {
	font-weight: 600;
}
.benroig-indicacion-lista {
	font-weight: 300;
}
/* Filete al 70% del cuerpo. Va como pseudoelemento y no como `border-bottom`
   de la fila para que arranque en el texto y no debajo del número. */
.benroig-indicacion-cuerpo::after {
	content: "";
	display: block;
	width: 70%;
	height: 1px;
	margin-top: 14px;
	background: rgba(120, 113, 100, 0.35);
}
.has-oscuro-background-color .benroig-indicacion-cuerpo::after {
	background: rgba(255, 255, 255, 0.22);
}
.benroig-indicacion:last-child .benroig-indicacion-cuerpo::after {
	display: none;
}
/* Variante con el título en tipografía de titulares: la usa el «Método Benroig»
   de Láser I+D, donde el .ai compone el título de cada paso en Athelas 21 y no
   en el palo seco de 14 del listado de Tratamientos. */
.benroig-indicacion-titulo.is-serif {
	font-weight: 400;
	line-height: 1.15;
	margin-bottom: 4px;
}

/* Gris VERDOSO del bloque «Método Benroig» (pág. 4 del .ai). Medido #3f494b:
   NO es `oscuro` (#3f4447) ni `oscuro-alt` (#4d5051), es un tercer tono. Se
   aplica aquí, sobre el fondo `oscuro` que ya trae el grupo, para no meter un
   color suelto en la paleta de theme.json sin decidirlo antes. */
.benroig-banda-verdosa.has-oscuro-background-color {
	background-color: #3f494b !important;
}
.benroig-indicacion a {
	text-decoration: none;
	color: inherit;
}
.benroig-indicacion a:hover {
	color: var(--wp--preset--color--acento);
}

/* ---------- Bloques de área de Tratamientos: una fórmula, tres variantes -----
   El .ai (pág. 2) repite la misma composición en los cuatro bloques de área y
   solo cambia de qué lado cae la lista y cuántas fotos hay:

     Medicina estética facial   claro   izq: cabecera + foto   der: lista
     Tratamientos corporales    oscuro  izq: cabecera + LISTA  der: DOS fotos
     Medicina regenerativa      claro   izq: cabecera + foto   der: lista
     Salud y rejuvenecim. íntimo oscuro izq: cabecera          der: lista
                                        (sin foto y con filete vertical)

   Por eso van como modificadores de `.benroig-area` y no como reglas por
   página. La variante de color de la lista la aplica el fondo del grupo. */
.benroig-area .wp-block-columns {
	margin-bottom: 0;
}
/* Variante "cabecera a la izquierda, contenido a la derecha". La usan los dos
   bloques de Láser I+D («Innovación médica» e «Tecnología y procedimientos»):
   en el .ai, pág. 4, la columna izquierda va de x508 a x874 (366) y la derecha
   de x956 a x1410 (455), con 82 de hueco → 41% / 50% sobre la caja de 900. */
.benroig-area.is-cabecera-texto.wp-block-columns {
	align-items: center;
	margin-top: 0;
}
.benroig-area.is-cabecera-texto > .wp-block-column > :first-child {
	margin-top: 0;
}
.benroig-lista-tratamientos-col {
	padding-top: 4px;
}
/* Variante "íntimo": sin foto y con el filete vertical que separa las columnas
   en el .ai (x≈960 sobre un bloque que arranca en 622). */
.benroig-area.is-sin-foto .benroig-lista-tratamientos-col {
	border-left: 1px solid rgba(255, 255, 255, 0.22);
	padding-left: 48px;
}
.benroig-area.is-sin-foto:not(.has-oscuro-background-color) .benroig-lista-tratamientos-col {
	border-left-color: rgba(120, 113, 100, 0.3);
}

/* Dúo de fotos solapadas (bloque corporal del .ai): la grande ocupa la columna
   (442 × 424) y la pequeña (245 × 237) cae por debajo, desplazada 39px a la
   derecha del borde y solapando 66px = 15% del alto de la grande. */
.benroig-foto-duo {
	display: block;
}
.benroig-foto-duo > .wp-block-image {
	margin: 0;
}
.benroig-foto-duo > .wp-block-image + .wp-block-image {
	width: 55%;
	margin-top: -15%;
	margin-left: 9%;
	position: relative;
	z-index: 2;
}

@media (max-width: 880px) {
	.benroig-area.is-sin-foto .benroig-lista-tratamientos-col {
		border-left: 0;
		padding-left: 0;
	}
	.benroig-foto-duo > .wp-block-image + .wp-block-image {
		width: 62%;
		margin-top: -12%;
	}
}

/* Tarjetas de los archivos de área e indicación: todas a la misma altura y
   con el enlace abajo, aunque la ficha no tenga foto o subtítulo todavía. */
.wp-block-post-template.is-layout-grid > li {
	display: flex;
}
.benroig-card-tratamiento,
.benroig-card-noticia {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
}
.benroig-card-tratamiento > .wp-block-group,
.benroig-card-noticia > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
}
/* El layout "constrained" de WordPress centra sus hijos con margin-inline:auto;
   dentro de una columna flex eso deja el título centrado. */
.benroig-card-tratamiento > .wp-block-group > *,
.benroig-card-noticia > .wp-block-group > * {
	/* Ancho completo para que el margin-inline:auto del layout "constrained"
	   de WordPress no sobre espacio y deje el título centrado. */
	width: 100%;
	max-width: none;
	text-align: left;
	flex: 0 0 auto;
}
.benroig-card-tratamiento .wp-block-read-more {
	margin-top: auto;
	padding-top: 12px;
	text-decoration: none;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
/* La proporción va en la imagen, no en el contenedor: si la ficha todavía no
   tiene foto destacada el bloque queda vacío y no debe reservar hueco. */
.benroig-card-tratamiento .wp-block-post-featured-image {
	margin: 0 0 4px;
}
.benroig-card-tratamiento .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ------------------------------------------------------------------
   Tarjeta de noticia (Blog / Prensa, .ai pág. 7)
   Reutiliza la fórmula común de tarjeta: `.benroig-card` (radio, hover) +
   la pila flex de `.benroig-card-tratamiento` (arriba) + el
   `margin-top:auto` de `.benroig-card-cta`. Aquí solo van los valores
   propios medidos en el diseño.

   Caja medida en el .ai (artboard 1920): tarjeta 292 x 408 px
   (x 508,3-800,2 · y 1306-1714), foto a sangre de 292 x 157 arriba,
   texto sangrado 30 px. La fecha y el "LEER MÁS +" están a una `y` fija
   (1656) en las seis tarjetas, tengan el título dos líneas o cuatro:
   por eso van anclados al pie y no detrás del título.
   ------------------------------------------------------------------ */
.benroig-card-noticia {
	/* Gris amarronado del diseño. NO está en la paleta de theme.json
	   (lo más cercano es `crema-alt` #e9e5dc, bastante más claro). */
	background-color: #dbd7cf;
}
/* Foto a sangre: 292 x 157 en el .ai. El `overflow:hidden` de la tarjeta ya
   le redondea las esquinas de arriba, así que no lleva radio propio. */
.benroig-card-noticia .wp-block-post-featured-image {
	margin: 0;
}
.benroig-card-noticia .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 292 / 157;
	object-fit: cover;
	border-radius: 0;
}
/* Foto → antetítulo: 39 px de la base de la imagen a la tinta del antetítulo en
   el .ai (y 1463 → 1502); con el interlineado del antetítulo, 14 px de padding
   los deja clavados. */
.benroig-card-noticia > .wp-block-group {
	padding-top: 14px;
	gap: 12px;
}
/* Antetítulo de categoría: 12 px Inter Bold #a99879 en el .ai; se usa el
   marrón `acento` (#a18e80) de la paleta, que es el mismo color a ojo. */
.benroig-card-noticia .wp-block-post-terms {
	color: var(--wp--preset--color--acento);
	line-height: 1.2;
}
.benroig-card-noticia .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}
/* Título: 23 px Athelas-Bold, interlineado 22 (0,96) y color #2e3435 —
   prácticamente negro, más oscuro que cualquier gris de la paleta. El cliente
   lo pide "en negro". El cuerpo se sube de `md` (16) a `lg` (21), el preset
   que más se acerca a los 23 del diseño. */
.benroig-card-noticia .wp-block-post-title {
	/* Antetítulo → título: 33,7 px de tinta a tinta en el .ai (y 1510 → 1543,7);
	   con el `gap: 12px` de la pila hacen falta 14 más. */
	margin: 14px 0 0;
	color: #2e3435;
	font-weight: 700;
	line-height: 1.05;
}
/* Pie de la tarjeta: fecha a la izquierda y "LEER MÁS +" a la derecha, anclados
   abajo por el `margin-top: auto` común de `.benroig-card-cta`. Lo único propio
   es el aire mínimo sobre el título: en el .ai, en la tarjeta de título más
   largo (4 líneas, "Sofwave Intense…"), hay 29,4 px de tinta a tinta entre la
   última línea y la fecha, no los 34+12 que trae la fórmula general. */
.benroig-card-noticia .benroig-card-cta {
	padding-top: 14px;
	align-items: baseline;
	gap: 12px;
}
.benroig-card-noticia .benroig-card-cta > * {
	margin: 0;
}
/* Fecha en gris (#73716c en el .ai; tampoco está en la paleta: el gris de
   textos del tema, #8c8078, tira a marrón). */
.benroig-card-noticia .wp-block-post-date {
	color: #73716c;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
/* "LEER MÁS +" en negro, igual que el título (12 px Inter Bold #2e3435).
   Es un `core/read-more`, no un párrafo con un enlace a "#": así apunta al
   permalink de la entrada, igual que en la tarjeta de tratamiento. */
.benroig-card-noticia .benroig-card-leermas {
	color: #2e3435;
	letter-spacing: 0.04em;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	text-transform: uppercase;
}
.benroig-card-noticia .benroig-card-leermas:hover {
	color: var(--wp--preset--color--acento);
}

/* ------------------------------------------------------------------
   Paginación de listados (core/query-pagination)
   Común a Blog / Prensa (templates/home.html), a los archivos de área e
   indicación (templates/taxonomy.html) y a templates/archive.html: las tres
   usan el mismo marcado de bloque, así que estas reglas van sin clase de
   página y sin tocar el marcado de ninguna plantilla.

   El .ai NO dibuja la paginación en la página 7 (entre las tarjetas, y=2199,
   y el CTA de contacto, y=2679, no hay ningún elemento): los valores de abajo
   son criterio propio con la paleta medida del diseño.
     · reposo  : texto #8c8078 (el marrón claro de pies y datos) sobre el fondo
                 de la página, con un filete tenue del mismo color;
     · hover   : fondo crema #eeeae4 (el lavado neutro del sitio) y texto
                 #4d5051 — cambia sin gritar, porque es un estado transitorio;
     · activo  : círculo relleno en `acento` #a18e80 con número crema. El acento
                 es el color de marca que el tema reserva a lo que "manda"
                 (CTA, enlaces de acción), y aquí lo que manda es en qué página
                 estás. Además va en negrita y con un halo, para que el estado
                 no dependa solo del color (y core ya emite aria-current).
   ------------------------------------------------------------------ */
.wp-block-query-pagination {
	margin-top: 48px;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.wp-block-query-pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
/* Alto y ancho fijos e iguales (no padding): así el círculo sigue siendo
   redondo con "1" y con "10". */
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(140, 128, 120, 0.4);
	background: transparent;
	color: var(--wp--preset--color--texto-cuerpo);
	font-family: var(--wp--preset--font-family--nav);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover {
	background-color: var(--wp--preset--color--crema);
	border-color: var(--wp--preset--color--acento);
	color: var(--wp--preset--color--texto-oscuro);
}
.wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--acento);
	border-color: var(--wp--preset--color--acento);
	color: var(--wp--preset--color--crema);
	/* Doble marca del estado activo, para no depender solo del color. */
	font-weight: 700;
	box-shadow: 0 0 0 3px rgba(161, 142, 128, 0.25);
}
/* Los puntos suspensivos de core no son un botón: sin círculo. */
.wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}
/* Anterior / siguiente: se ven como flecha, pero conservan su texto ("Previous
   Page" / "Next Page") en el árbol de accesibilidad. `font-size: 0` lo oculta a
   la vista sin sacarlo del DOM ni del lector de pantalla, que es lo que da el
   nombre accesible del enlace. La flecha es un SVG en `mask`, así que se pinta
   con `currentColor` y hereda los tres estados de arriba sin repetir colores. */
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
	font-size: 0;
}
.wp-block-query-pagination .wp-block-query-pagination-previous::before,
.wp-block-query-pagination .wp-block-query-pagination-next::before {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: var(--benroig-flecha) no-repeat center / contain;
	mask: var(--benroig-flecha) no-repeat center / contain;
}
.wp-block-query-pagination .wp-block-query-pagination-next::before {
	--benroig-flecha: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13.5 5.5 20 12l-6.5 6.5'/%3E%3C/svg%3E");
}
.wp-block-query-pagination .wp-block-query-pagination-previous::before {
	--benroig-flecha: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4M10.5 5.5 4 12l6.5 6.5'/%3E%3C/svg%3E");
}
/* Core mete un margen lateral a la flecha propia del bloque; aquí la flecha la
   pone el pseudoelemento, así que si alguien activa `paginationArrow` en el
   editor el margen no debe descentrar el círculo. */
.wp-block-query-pagination .wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination .wp-block-query-pagination-next-arrow {
	display: none;
}
@media (max-width: 600px) {
	.wp-block-query-pagination .page-numbers,
	.wp-block-query-pagination .wp-block-query-pagination-previous,
	.wp-block-query-pagination .wp-block-query-pagination-next {
		width: 34px;
		height: 34px;
	}
	.wp-block-query-pagination,
	.wp-block-query-pagination .wp-block-query-pagination-numbers {
		gap: 8px;
	}
}

/* ============================================================
   Cabecera a ancho completo (diseño de agosto)
   La foto sangra de borde a borde y se funde hacia el crema por la
   izquierda; el texto va encima, dentro de la caja de contenido.
   ============================================================ */
.benroig-hero-full {
	--benroig-hero-fondo: var(--wp--preset--color--crema-alt);
	align-items: center;
	padding: 0 !important;
	/* core/cover pone color:#fff a todo su contenido; aquí el texto va sobre
	   el velo claro, así que se recupera la paleta normal del sitio. */
	color: var(--wp--preset--color--texto-oscuro) !important;
}
.benroig-hero-full .benroig-hero-kicker,
.benroig-hero-full h1 {
	color: var(--wp--preset--color--texto-oscuro) !important;
}
.benroig-hero-full .wp-block-cover__image-background {
	/* Las fotos del diseño son verticales y se recortan al marco apaisado:
	   el centro es lo que deja ver el motivo, igual que en el .ai. */
	object-position: center;
}
/* Páginas cuyo motivo vive en la mitad derecha de la foto. */
.benroig-hero-full.is-foto-derecha .wp-block-cover__image-background {
	object-position: right center;
}
/* El velo que funde la foto con el fondo va en el overlay nativo de
   core/cover: es el único elemento que el bloque coloca entre la imagen y el
   contenido. Con un ::after propio el degradado tapaba también el texto. */
.benroig-hero-full .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(
		to right,
		var(--benroig-hero-fondo) 0%,
		var(--benroig-hero-fondo) 30%,
		rgba(233, 229, 220, 0.95) 46%,
		rgba(233, 229, 220, 0.6) 58%,
		rgba(233, 229, 220, 0) 76%
	) !important;
}
/* Blog / Prensa corta en recto en vez de fundir (pág. 7 del diseño). */
.benroig-hero-full.is-corte-recto .wp-block-cover__background {
	background: linear-gradient(
		to right,
		var(--benroig-hero-fondo) 0%,
		var(--benroig-hero-fondo) 52%,
		rgba(233, 229, 220, 0) 52%
	) !important;
}
/* La caja del héroe es LA MISMA que la del resto de la página: contentSize
   (900px) + los 40px de padding lateral que llevan todas las bandas. Así el
   borde izquierdo del texto cae en x=510 a 1920 de viewport, exactamente
   donde caen los eyebrows y los H2 de sección (diseño: x=512..515). */
.benroig-hero-full .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	/* border-box: el contenedor no hereda box-sizing y sin esto los 40px de
	   padding se sumaban al max-width y el texto caía en x=470, no en 510. */
	box-sizing: border-box;
	max-width: calc(var(--wp--style--global--content-size, 900px) + 80px);
	width: 100%;
	margin-inline: auto;
	padding: 60px 40px;
}
/* El layout "constrained" de core centra sus hijos con margin-left:auto
   !important, así que aquí hace falta !important para pegar el texto al borde
   izquierdo de la caja, como en el diseño.
   Antes esto usaba margin-left:22% / max-width:29% sobre una caja de 1320px:
   porcentajes del viewport, no de la caja de contenido, y por eso el texto de
   los héroes quedaba ~80px más adentro que los títulos de sección.
   Ancho de columna del diseño (pág. 1): x 522 → 935 ≈ 420px. */
.benroig-hero-full .wp-block-cover__inner-container > .benroig-hero-full-texto {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: 420px;
}
/* Con textos largos (Sciton) la columna necesita algo más de aire. */
.benroig-hero-full.is-texto-ancho .wp-block-cover__inner-container > .benroig-hero-full-texto {
	max-width: 520px;
}
.benroig-hero-full-texto > * {
	margin-inline: 0 !important;
	max-width: none !important;
}
.benroig-hero-full-texto .wp-block-buttons {
	margin-top: 30px;
}

@media (max-width: 1200px) {
	.benroig-hero-full .wp-block-cover__inner-container > .benroig-hero-full-texto {
		max-width: 58%;
	}
}
@media (max-width: 880px) {
	.benroig-hero-full {
		/* Sin mínimo, las cabeceras de texto corto (Capilar) quedaban en una
		   franja de apenas 170px. */
		min-height: 380px !important;
	}
	/* En móvil la foto no cabe detrás del texto: se funde casi entera. */
	.benroig-hero-full .wp-block-cover__background,
	.benroig-hero-full.is-corte-recto .wp-block-cover__background {
		background: linear-gradient(
			to bottom,
			rgba(233, 229, 220, 0.96) 0%,
			rgba(233, 229, 220, 0.96) 62%,
			rgba(233, 229, 220, 0.4) 100%
		) !important;
	}
	.benroig-hero-full .wp-block-cover__inner-container {
		padding: 44px 24px 56px;
	}
	.benroig-hero-full .wp-block-cover__inner-container > .benroig-hero-full-texto {
		margin-left: 0 !important;
		max-width: none;
	}
}

/* ---------- Clínica: sede y dirección dentro de la cabecera (pág. 6) ---------
   El .ai coloca bajo la entradilla del héroe el nombre del hospital en Athelas
   26/23 (#4d5051) y, 14px por debajo, la dirección en EarlySans 10 (#8c8078)
   con la primera línea en negrita. Va como añadido del CONTENIDO del héroe, no
   como cambio del patrón `benroig_hero_full()`, que ya está calibrado. */
.benroig-hero-sede {
	line-height: 1.05;
}
.benroig-hero-direccion {
	line-height: 1.4;
	margin-bottom: 0;
}

/* ---------- Clínica: pies de las fotos de «El espacio» (pág. 6) --------------
   Título en palo seco y negrita a 21px y, justo debajo y sin doble espacio, el
   subtítulo en la tipografía de titulares a 18px. Los dos en el gris verdoso
   #3f494b del diseño, que es el mismo tono de la banda del Método Benroig. */
.benroig-pie-foto {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	line-height: 1.2;
	color: #3f494b;
	margin: 22px 0 0;
}
.benroig-pie-foto-sub {
	font-size: 1.125rem;
	line-height: 1.3;
	color: #3f494b;
	margin: 6px 0 0;
}

/* ---------- Mapa de Contacto (pág. 8 del .ai) --------------------------------
   Caja medida: x508,5→1411 y y2607→3222, o sea 903 × 615,5 (proporción 1,467).
   Ese ancho ES la caja de contenido (896), así que el mapa NO va a sangre: va
   dentro de la caja y centrado.
   Detalle técnico: un <iframe> es `inline` por defecto, y así el `margin:auto`
   que le da el layout "constrained" de WordPress no lo centra —se quedaba
   pegado a la izquierda—. Con `display:block` ya centra. La altura se deja en
   `auto` para que mande el `aspect-ratio` y el mapa nunca desborde en móvil. */
.benroig-mapa {
	display: block;
	width: 100%;
	max-width: 900px;
	height: auto;
	aspect-ratio: 903 / 616;
	margin-inline: auto;
	border: 0;
	border-radius: var(--benroig-radio, 28px);
}
@media (max-width: 600px) {
	/* A 380px de ancho, 1,467 dejaría el mapa en 259px de alto: poco usable. */
	.benroig-mapa {
		aspect-ratio: 4 / 3;
		border-radius: 28px;
	}
}

/* Tarjeta de contacto dentro de la cabecera (pág. 8 del diseño). */
.benroig-hero-tarjeta {
	display: inline-block;
	box-shadow: 0 14px 34px -22px rgba(38, 48, 51, 0.4);
}
.benroig-hero-tarjeta a {
	text-decoration: none;
	color: var(--wp--preset--color--texto-oscuro);
}
.benroig-hero-tarjeta a:hover {
	color: var(--wp--preset--color--acento);
}

/* ============================================================
   ARREGLO GLOBAL — caja de contenido y tipografía de cabecera
   Medidas reales del .ai (artboard 1920). OJO: pdftohtml devuelve la página a
   2880px (x1,5), así que los cuerpos que salen en <fontspec> hay que
   dividirlos entre 1,5 para tener el px CSS a 1920. Los valores de abajo ya
   están convertidos.
   ============================================================ */

/* --- Títulos de sección: a la izquierda de la caja, no centrados ---
   Los H2 con {"style":{"layout":{"selfStretch":"fixed","flexSize":"620px"}}}
   se imprimen con un style="max-width:620px" en línea. Dentro de un layout
   "constrained" core les aplica margin-left/right:auto !important, así que ese
   ancho menor los CENTRA en la caja de 900px y el título aparece ~140px más
   adentro que su eyebrow. En el diseño todos arrancan en x=512-515, igual que
   el resto. El ancho corto sí es del diseño (los H2 de la pág. 1 rompen entre
   400 y 505px de medida), lo que hay que corregir es el centrado.
   No vale con margin-left:0: el centrado de core es lo que dibuja la caja de
   900px dentro de la banda (que va a ancho completo), así que un 0 mandaría el
   título al borde de la banda. Hay que dejarlo donde empezaría la caja: la
   mitad de lo que sobra del ancho del contenedor. */
.is-layout-constrained > :is(h1, h2, h3, h4, h5, h6, p)[style*="max-width"] {
	margin-left: max(
		0px,
		calc((100% - var(--wp--style--global--content-size, 900px)) / 2)
	) !important;
	margin-right: auto !important;
}

/* --- Tipografía de la cabecera a sangre (pág. 1 del .ai) ---
   Antetítulo  18,4px  (fontspec 32/1,5=21,3 EarlySans-Light; se iguala por
               altura de mayúscula medida, 13,4px, que en Inter son 18,4px),
               tracking ~0,07em, dos líneas a 25px
   H1          68,6px Athelas, interlineado 62px  ->  line-height 0,90
               (el preset xxxl ya vale 68,6px a 1920)
   Párrafo     14px EarlySans-Light, interlineado 18px
   El diseño es a 1920 y la web es fluida: clamp() para que a 1920 dé el valor
   del diseño y no baje de un mínimo legible. */
.benroig-hero-full .benroig-hero-kicker {
	/* Gana al !important que WP pone en .has-xs-font-size. */
	font-size: clamp(0.8125rem, 0.515rem + 0.53vw, 1.15rem) !important;
	letter-spacing: 0.07em;
	line-height: 1.36;
	margin-bottom: 18px !important;
	/* Gris azulado del .ai, no el marrón de acento: el antetítulo del héroe da
	   #3f484b en las 11 páginas (pdftohtml sobre el .ai). */
	color: #3f484b !important;
	/* El antetítulo tiene su propia caja, más estrecha que la columna de texto:
	   en la Home rompe en dos líneas (LASER & MEDICINA / REGENERATIVA, la
	   primera de 223px a 1920) y en el resto de páginas cabe en una sola
	   (TRATAMIENTOS 181, LASER I+D 120, BLOG / PRENSA 182, CONTACTO 128…).
	   13,5em ≈ 248px a 1920: rompe la Home donde el diseño y deja el resto de
	   una pieza. En em para que la ruptura no cambie al escalar el cuerpo.
	   !important porque `.benroig-hero-full-texto > *` fuerza max-width:none. */
	max-width: 13.5em !important;
}
.benroig-hero-full-texto h1 {
	/* Menos interlineado que el cuerpo, como en el .ai (62 sobre 68,6). */
	line-height: 0.9;
	margin: 12px 0 24px;
}
/* El párrafo del héroe iba a 12px (preset sm) en Home y Sciton y a 14px en el
   resto. El diseño lo pone a 14px; el cliente lo quiere algo mayor y con más
   peso, así que se unifica a 15px a 1920 y sube de Light (300) a Regular
   (400), que es el escalón siguiente cargado en theme.json. */
.benroig-hero-full-texto > p {
	font-size: clamp(0.875rem, 0.8rem + 0.2vw, 0.9375rem) !important;
	line-height: 1.5;
	font-weight: 400;
}
/* Sciton mete cuatro párrafos largos en la cabecera: ahí se deja el cuerpo del
   diseño (14px) para que la franja no se desborde. */
.benroig-hero-full.is-texto-ancho .benroig-hero-full-texto > p {
	font-size: 0.875rem !important;
}

/* --- Botones: misma caja para el relleno y el contorno ---
   En el .ai los dos botones del héroe miden lo mismo: 36px de alto (caja
   medida sobre el render, y 803,7→840,2) con el texto a 10px centrado (12px de
   aire arriba y abajo).
   En la web no coincidían: el relleno cogía el padding de theme.json (42px de
   alto) y el de contorno el de core —`.wp-block-button.is-style-outline >
   .wp-block-button__link {padding:.667em 1.33em; border:2px solid}`, que gana
   por especificidad al `.wp-element-button` de theme.json— y se quedaba en 34.
   Además el texto caía 2px por encima del centro (16 arriba / 18 abajo).
   Se resuelve con caja flexible: min-height fija el alto del diseño, el
   centrado vertical lo hace flex (no el interlineado) y border-box mete el
   borde del contorno dentro del alto, así los dos miden exactamente igual. */
.wp-block-button__link.wp-element-button,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 3.6em = 36px con el cuerpo xs (10px), el alto del .ai. */
	min-height: 3.6em;
	line-height: 1.2;
	padding-top: 1em;
	padding-bottom: 1em;
}
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	/* En el diseño el filete es fino, no los 2px de core. */
	border-width: 1px;
	padding-left: 1.75em;
	padding-right: 1.75em;
}
/* El botón de la tarjeta CTA va a todo el ancho: se le devuelve el bloque
   (flex a ancho completo) que le quitaría el inline-flex de arriba. */
.benroig-cta-boton .wp-block-button__link.wp-element-button {
	display: flex;
	width: 100%;
}

/* ============================================================
   ENCUADRE DE LAS CABECERAS (medido en el .ai, no a ojo)
   ------------------------------------------------------------
   El .ai coloca cada foto de héroe con una matriz `cm` propia. Sacando esa
   matriz del flujo de contenido del PDF se sabe qué trozo exacto de cada foto
   queda a la vista dentro de la banda, y ese recorte se reproduce aquí con
   `object-position` en vez de recortar el fichero: así la foto conserva
   resolución y el héroe sigue respirando a otros anchos de ventana.

   El porcentaje es la posición del trozo visible dentro del sobrante vertical
   que deja `object-fit: cover`, así que se mantiene aunque cambie el
   `min-height` del cover.

   Caso aparte: hero-home.jpg venía SIN girar. En el .ai está colocada con
   `cm = [0 -1080.7  1920.2 0 ...]`, es decir, girada 90° en sentido horario.
   El giro se ha aplicado al propio fichero (no se puede hacer con
   object-position sin romper el `cover`); aquí solo queda el encuadre.
   ============================================================ */
.benroig-hero-full .wp-block-cover__image-background[src*="hero-home.jpg"] {
	/* .ai: se ve la franja y=128..840 de la foto ya girada (1672×941). */
	object-position: center 56%;
}
.benroig-hero-full .wp-block-cover__image-background[src*="hero-equipo-medico.jpg"] {
	/* .ai: y=41..722 de 900 → el sobrante se reparte 19/81. */
	object-position: center 19%;
}
.benroig-hero-full .wp-block-cover__image-background[src*="hero-blog-prensa.jpg"] {
	object-position: center 20%;
}
.benroig-hero-full .wp-block-cover__image-background[src*="hero-sciton.jpg"] {
	/* Foto muy vertical (4000×6000): el .ai entra por debajo del centro. */
	object-position: center 59%;
}
.benroig-hero-full .wp-block-cover__image-background[src*="hero-contacto.jpg"] {
	/* La foto y la banda miden casi lo mismo de alto: el .ai la cuadra abajo. */
	object-position: center bottom;
}

/* ------------------------------------------------------------
   ANCHO DE LA FOTO DEL HÉROE
   La Home es la única cabecera que en el .ai va de verdad a sangre completa
   (la foto ocupa los 1920). En las otras ocho la foto es un panel pegado a la
   derecha que ocupa solo el 51–80 % de la banda, y el crema de la izquierda no
   es un degradado sobre la foto: es que la foto no llega hasta ahí.

   Al estirarla a los 1920 del `cover`, `object-fit: cover` la ampliaba entre
   1,25× y 1,97×; por eso se veían recortes más cerrados que en el diseño
   (Blog/Prensa era el peor: 1,89×, se perdían las cuatro doctoras).

   Los porcentajes salen de la matriz `cm` de cada foto:
   ancho = ancho_colocado / 1920, y el `right` negativo es lo que sangra por
   fuera del borde derecho del artboard.

   Solo a partir de 1200px: por debajo la cabecera apila y la foto tiene que
   seguir ocupando todo el ancho.
   ------------------------------------------------------------ */
@media (min-width: 1200px) {
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-tratamientos.jpg"],
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-laser-id.jpg"],
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-equipo-medico.jpg"],
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-clinica.jpg"],
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-blog-prensa.jpg"],
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-contacto.jpg"],
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-sciton.jpg"],
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-capilar.jpg"] {
		left: auto;
	}
	/* .ai: x[779.8, 2116.2] → 1336 de ancho, sangra 196 por la derecha. */
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-tratamientos.jpg"] {
		width: 69.6%;
		right: -10.2%;
	}
	/* .ai: x[435.8, 1927.9] */
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-laser-id.jpg"] {
		width: 77.7%;
		right: -0.4%;
	}
	/* .ai: x[537.7, 1923.3] */
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-equipo-medico.jpg"] {
		width: 72.2%;
		right: -0.2%;
	}
	/* .ai: x[749.8, 1934.8] */
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-clinica.jpg"] {
		width: 61.7%;
		right: -0.8%;
	}
	/* .ai: x[1004.5, 2020.1]. El borde cae en el 52 %, justo donde corta en
	   recto el velo de .is-corte-recto: por eso esta página no lleva fundido. */
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-blog-prensa.jpg"] {
		width: 52.9%;
		right: -5.2%;
	}
	/* .ai: x[775.5, 2155.4] */
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-contacto.jpg"] {
		width: 71.9%;
		right: -12.3%;
	}
	/* .ai: x[947.6, 1921.0] */
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-sciton.jpg"] {
		width: 50.7%;
		right: 0;
	}
	/* .ai: x[401.9, 1940.5] */
	.benroig-hero-full .wp-block-cover__image-background[src*="hero-capilar.jpg"] {
		width: 80.1%;
		right: -1.1%;
	}
}