/**
 * Reskin editorial (dirección "Valencia" con la paleta propia).
 *
 * El contenido migrado lleva algunos estilos inline (radios de 18px,
 * bordes de tarjeta) que pertenecían a la dirección anterior. Esta hoja
 * los neutraliza globalmente — sin editar ninguna página — y añade las
 * señas editoriales: cantos vivos, tarjetas planas, navegación y
 * etiquetas en mayúsculas espaciadas, citas en serif itálica.
 */

/* ---- Esquinas redondeadas (Enfoque): imágenes, vídeos, mapas, placeholders ---- */

main img,
main figure,
main iframe,
main .wp-block-embed__wrapper {
	border-radius: 12px !important;
}

/* ---- Tarjetas (Enfoque): filete fino + esquina redondeada ---- */

main .is-layout-grid > .wp-block-group,
main .wp-block-column > .wp-block-group.has-background {
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 12px !important;
}

/* Tarjetas blancas sobre secciones blancas: pasan a gris muy claro… */
main .is-layout-grid > .wp-block-group.has-base-background-color {
	background-color: var(--wp--preset--color--surface) !important;
}

/* …salvo dentro de secciones ya grises, donde vuelven a blanco. */
main section.has-surface-background-color .is-layout-grid > .wp-block-group.has-base-background-color {
	background-color: var(--wp--preset--color--base) !important;
}

/* Grupos con radio inline suelto (avisos, cajas destacadas) */
main .wp-block-group[style*="border-radius"] {
	border-radius: 12px !important;
}

/* ---- Rejillas de 3 elementos: tres columnas exactas ----
   El auto-fill de WP reserva una 4ª columna vacía cuando solo hay 3
   tarjetas y el grupo queda descentrado. Solo en escritorio; en móvil
   se mantiene el comportamiento normal de WP (una columna). */

@media (min-width: 782px) {
	main .is-layout-grid:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* ---- Citas: serif itálica grande (Times como acento editorial) ---- */

main blockquote p {
	font-family: "Times New Roman", Georgia, serif;
	font-style: italic;
	font-size: 1.35rem;
	line-height: 1.55;
}

main blockquote cite {
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ---- Botones outline: filete fino ---- */

.is-style-outline .wp-block-button__link {
	border-width: 1px;
}

/* ---- Cabecera: menú en mayúsculas espaciadas, wordmark serif ---- */

.site-header .wp-block-navigation a {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.site-header .site-logo p:first-child {
	font-weight: 800 !important;
	font-size: 1.6rem !important;
	letter-spacing: -0.01em !important;
}

.site-header .site-logo p:last-child {
	font-size: 0.6rem !important;
	letter-spacing: 0.34em !important;
	font-weight: 600 !important;
}

/* ---- Pie: wordmark grande, columnas etiquetadas en mayúsculas ---- */

.site-footer p.has-heading-font-family {
	font-weight: 400 !important;
	font-size: clamp(1.9rem, 4vw, 2.75rem) !important;
	letter-spacing: 0.01em !important;
	line-height: 1.1 !important;
}

.site-footer h3 {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.28em !important;
	color: #AFC6E6;
}

/* ---- Hero tipo referencia: foto a pantalla completa + cabecera transparente ---- */

/* Sin huecos blancos entre las piezas de plantilla (cabecera/main/footer):
   el gap raíz de WP no aplica; cada sección ya trae su propio aire. */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0 !important;
}

/* La cabecera flota transparente SOLO en la portada, sobre el cover.
   `top` respeta la barra de administración de WP si está presente. */
.home .site-header {
	position: absolute;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 30;
	background: transparent !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.home .site-header .site-logo p,
.home .site-header .site-logo p.has-primary-color,
.home .site-header .site-logo p.has-muted-color,
.home .site-header .site-logo a,
.home .site-header .wp-block-navigation a {
	color: #ffffff !important;
}

.home .site-header .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--ink) !important;
	border: 0 !important;
}

.home .site-header .wp-block-navigation__submenu-container a {
	color: #ffffff !important;
}

/* Botón de la cabecera en portada: fantasma blanco */
.home .site-header .wp-block-button__link {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.75);
	color: #ffffff !important;
}

/* Hover del botón "Pide tu cita" de la cabecera: naranja de marca
   (aplica al botón azul de páginas interiores y al fantasma de la portada) */
.site-header .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent) !important;
	border-color: var(--wp--preset--color--accent) !important;
	color: #ffffff !important;
}

/* Titular mixto del hero: línea sans gruesa + línea serif display */
.vc-hero h1 {
	line-height: 1.04;
}

.vc-hero .vc-hero-sans {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.72em;
}

.vc-hero .vc-hero-serif {
	display: block;
}

/* Enlace secundario del hero, blanco subrayado */
.vc-hero .vc-hero-link {
	color: #ffffff !important;
	text-decoration: underline;
	text-underline-offset: 5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.78rem;
	font-weight: 600;
}

/* El cover ocupa desde el borde superior (la cabecera flota encima) */
.vc-hero .wp-block-cover__inner-container {
	padding-top: 4rem;
}

/* ---- Detalles ---- */

/* El H1 del hero respira mejor algo más compacto de interlineado extra-wide */
.home main h1 {
	letter-spacing: -0.005em;
}

/* Enlaces "Saber más →" como enlaces editoriales subrayados */
main p a[href^="/"]:where(:not(.wp-block-button__link)) {
	text-underline-offset: 4px;
}

/* ---- Selector de idioma (ES · EN · DE) ---- */

/* Lista horizontal, discreta, en mayúsculas a partir del slug del idioma */
.vc-langs {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-langs li {
	margin: 0;
	line-height: 1;
}

/* Separador sutil entre idiomas */
.vc-langs li + li {
	border-left: 1px solid var(--wp--preset--color--border);
	padding-left: 0.6rem;
}

.vc-langs a {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.vc-langs a:hover {
	color: var(--wp--preset--color--primary);
}

/* El idioma activo se resalta en el color de marca */
.vc-langs .current-lang a,
.vc-langs .current-lang > a {
	color: var(--wp--preset--color--primary);
}

/* En la portada la cabecera flota sobre el hero oscuro: selector en blanco
   (inactivos translúcidos, idioma activo en blanco sólido) para que se lea. */
.home .site-header .vc-langs a {
	color: rgba(255, 255, 255, 0.7) !important;
}

.home .site-header .vc-langs a:hover,
.home .site-header .vc-langs .current-lang a {
	color: #ffffff !important;
}

.home .site-header .vc-langs li + li {
	border-left-color: rgba(255, 255, 255, 0.35);
}

/* ---- Reseñas / testimonios (estilo Google) ---- */

/* Tarjeta en columna: cabecera (G + estrellas), texto y pie anclado abajo */
.vc-review {
	display: flex !important;
	flex-direction: column;
	gap: 0.7rem;
	height: 100%;
	/* El relleno venía del bloque (spacing|50). Se recorta aquí para no tener
	   que tocar el marcado de las reseñas de las 33 páginas. */
	padding: 1.4rem 1.5rem !important;
}

.vc-review__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.vc-review__g,
.vc-review__stars {
	display: inline-flex;
	align-items: center;
}

.vc-review__stars {
	gap: 2px;
}

.vc-review__g svg,
.vc-review__stars svg {
	display: block;
}

.vc-review__text {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: 0.92rem;
	line-height: 1.6;
}

/* Pie de la tarjeta anclado abajo para que todas las tarjetas cuadren */
.vc-review__foot {
	margin-top: auto;
	padding-top: 0.4rem;
}

.vc-review__name {
	margin: 0;
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.3;
}

.vc-review__date {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
}

/* Enlace discreto "Ver reseña en Google" */
.vc-review__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.vc-review__link:hover {
	color: var(--wp--preset--color--accent);
}

.vc-review__link svg {
	transition: transform 0.15s ease;
}

.vc-review__link:hover svg {
	transform: translate(1px, -1px);
}

/* Botón general al perfil de Google Business: limpio, con filete */
.vc-reviews__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.9rem 1.6rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.vc-reviews__cta:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.vc-reviews__rating {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	padding-left: 0.75rem;
	border-left: 1px solid var(--wp--preset--color--border);
}

.vc-reviews__rating strong {
	font-weight: 700;
}

.vc-reviews__rating svg {
	display: block;
}

/* ---- Rejilla de vídeos verticales ----

   Antes aquí vivían los embeds de TikTok. Ahora los vídeos están alojados en
   nuestro servidor, así que la rejilla solo tiene que colocar las piezas: el
   reproductor en sí lo viste `.vc-video`, que ya trae la proporción 9/16. */

.vc-videos__grid {
	gap: 1.25rem !important;
	align-items: flex-start;
}

/* El elemento de la rejilla es la figura, no el reproductor: sin `min-width: 0`
   dos vídeos se ponen en fila en móvil y desbordan la página. */
.vc-videos__grid > * {
	flex: 0 1 325px;
	min-width: 0;
	max-width: 325px;
}

.vc-videos__item {
	margin: 0;
	width: 100%;
}

/* ---- Acordeón (details nativo, sin JS): p. ej. el Estudio de Baja Visión ---- */

.vc-acc {
	border-top: 1px solid var(--wp--preset--color--border);
}

.vc-acc details {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Cuando el acordeón va en dos columnas, un título que se parte en dos
   líneas hace que esa fila mida 87 px en vez de 57 y descuadra todas las
   siguientes respecto a la otra columna. El `min-height` vale exactamente una
   línea, así que no engorda nada y mantiene todas las filas a la misma altura.
   Lo importante es que los títulos quepan en una línea: a este ancho son unos
   34 caracteres. */
.vc-acc summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 1.86rem;
	padding: 0.85rem 0;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.vc-acc summary::-webkit-details-marker {
	display: none;
}

/* Chevron de marca (naranja) que rota al abrir */
.vc-acc summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.55rem;
	height: 0.55rem;
	margin-right: 0.15rem;
	border-right: 2px solid var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.vc-acc details[open] summary::after {
	transform: rotate(-135deg);
}

.vc-acc summary:hover {
	color: var(--wp--preset--color--primary);
}

.vc-acc .vc-acc__body {
	margin: 0 0 0.9rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Respeta el motion reducido (coherente con el sistema de animación) */
@media (prefers-reduced-motion: reduce) {
	.vc-acc summary::after {
		transition: none;
	}
}

/* ---- Tarjetas de especialidad clicables (portada) ---- */

.vc-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.25rem;
}

/* Son cinco especialidades: con cuatro columnas la quinta se quedaba sola
   y dejaba media fila vacía, que es el hueco que más se notaba. */
@media (min-width: 1000px) {
	.vc-specs {
		grid-template-columns: repeat(5, 1fr);
		gap: 1rem;
	}
}

.vc-spec-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vc-spec-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--wp--preset--shadow--medium);
}

.vc-spec-card__img {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--blue-050);
	display: block;
}

.vc-spec-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.vc-spec-card:hover .vc-spec-card__img img {
	transform: scale(1.05);
}

.vc-spec-card__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--wp--preset--color--muted);
	font-size: 0.8rem;
}

.vc-spec-card__title {
	padding: 1.1rem 1.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	color: var(--wp--preset--color--contrast);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.vc-spec-card__title::after {
	content: "→";
	color: var(--wp--preset--color--accent);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.vc-spec-card:hover .vc-spec-card__title {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.vc-spec-card:hover .vc-spec-card__title::after {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.vc-spec-card,
	.vc-spec-card__img img {
		transition: none;
	}
	.vc-spec-card:hover {
		transform: none;
	}
	.vc-spec-card:hover .vc-spec-card__img img {
		transform: none;
	}
}

/* ============================================================
   ENFOQUE — detalles calcados de la vista previa aprobada
   ============================================================ */

/* Cabecera fija con desenfoque en páginas interiores
   (en la portada sigue flotando transparente sobre el hero) */
body:not(.home) .site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 30;
	background: rgba(255, 255, 255, 0.92) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Con el menú móvil abierto hay que quitar el desenfoque de la cabecera.
   `backdrop-filter` convierte a la cabecera en bloque contenedor de sus
   descendientes `position: fixed`, así que el panel del menú, que debería
   ocupar toda la pantalla, quedaba encerrado en los 225 px de alto de la
   cabecera: se veían «Inicio… Control de miopía» y el resto del menú
   quedaba cortado, sin forma de llegar a Contacto desde el móvil.
   WordPress marca el <html> con `has-modal-open` mientras el panel está
   abierto, así que basta con anular ahí el desenfoque (que además no se
   ve, porque el panel tapa la pantalla entera). */
html.has-modal-open .site-header {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Botón fantasma: filete de marca que se rellena al pasar */
.is-style-outline .wp-block-button__link {
	border-width: 1.5px;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

main .is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	/* `!important` obligatorio: WordPress emite sus clases de color de preset
	   (`has-primary-color`, `has-base-color`) con `!important`, así que sin
	   esto el texto se quedaba del color de reposo. En el botón fantasma eso
	   significaba texto azul sobre fondo azul: un rectángulo macizo sin
	   letras. Contraste medido 1,00:1. */
	color: #ffffff !important;
	box-shadow: 0 12px 26px rgba(20, 102, 214, 0.3);
}

/* Sobre la franja azul, el fantasma se rellena en blanco */
main .has-primary-diagonal-gradient-background .is-style-outline .wp-block-button__link:hover {
	background-color: #ffffff;
	border-color: #ffffff;
	/* Mismo caso que arriba, al revés: aquí el texto se quedaba blanco sobre
	   fondo blanco. */
	color: var(--wp--preset--color--primary) !important;
}

/* Botón sólido: sombra coral al elevarse */
main .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	box-shadow: 0 12px 26px rgba(255, 122, 61, 0.36);
}

/* Chips de icono redondeados (tarjetas de síntoma) */
.vc-symico {
	border-radius: 8px;
	width: 2.9rem !important;
	height: 2.9rem !important;
}

/* Iconos en naranja. Los estilos van en línea dentro del contenido de las 18
   páginas que los usan, así que se sobreescriben aquí con `!important`: un
   único sitio, y alcanza también a las versiones en inglés y alemán. */
.vc-symico {
	background: #FFF1E8 !important;
	color: var(--wp--preset--color--accent) !important;
}

/* Imagen del hero: sombra amplia como en la maqueta */
main .wp-block-columns .wp-block-image img {
	box-shadow: 0 24px 60px rgba(15, 27, 45, 0.16);
}

/* ---- HERO-ESPECIALIDAD: que las dos columnas midan lo mismo ----

   Las fotos vienen en dos proporciones: unas verticales (1066×1600) y otras
   apaisadas (1439×959). Con las columnas centradas verticalmente, la más
   corta flotaba en medio y dejaba un hueco enorme: 212 px por encima del
   texto en baja visión, 195 px por encima de la foto en contactología.

   La solución no es retocar cada foto, sino estirar la columna de la imagen
   y recortarla para que llene el alto que marca el texto. Así las dos
   empiezan y acaban a la vez, venga la foto como venga.

   Solo de 782 px para arriba: por debajo WordPress apila las columnas y una
   altura del 100 % no tendría contra qué medirse. */

@media (min-width: 782px) {

	/* La foto se saca del flujo. Si no, su alto natural sigue marcando el de
	   la fila y las verticales (1600 px de alto) volvían a abrir el hueco:
	   estirar la columna no sirve de nada si lo que la estira es la propia
	   imagen. Fuera del flujo, quien manda es la columna del texto. */
	main section.has-surface-fade-gradient-background
	.wp-block-columns.are-vertically-aligned-center > .wp-block-column:last-child {
		align-self: stretch;
		position: relative;
		min-height: 320px;
	}

	main section.has-surface-fade-gradient-background
	.wp-block-columns.are-vertically-aligned-center > .wp-block-column:last-child .wp-block-image {
		position: absolute;
		inset: 0;
		margin: 0;
	}

	main section.has-surface-fade-gradient-background
	.wp-block-columns.are-vertically-aligned-center > .wp-block-column:last-child .wp-block-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

}

/* Títulos de tarjeta al tamaño de la maqueta */
main .is-layout-grid > .wp-block-group h3.wp-block-heading {
	font-size: 1.15rem;
	font-weight: 700;
}

/* Tarjetas de especialidad (portada) redondeadas */
.vc-spec-card {
	border-radius: 12px;
}

.vc-spec-card:hover {
	box-shadow: 0 18px 38px rgba(15, 27, 45, 0.12);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 40%, var(--wp--preset--color--border));
}

/* ============================================================
   PORTADA — hero a dos columnas con vídeo (maqueta Enfoque)
   ============================================================ */

/* La portada ya NO lleva cover oscuro a pantalla completa, así que la
   cabecera deja de flotar transparente y se comporta como en el resto. */
.home .site-header {
	position: sticky;
	background: rgba(255, 255, 255, 0.92) !important;
	border-bottom: 1px solid var(--wp--preset--color--border) !important;
}

.home .site-header .site-logo p:first-child,
.home .site-header .site-logo a {
	color: var(--wp--preset--color--primary) !important;
}

.home .site-header .site-logo p:last-child {
	color: var(--wp--preset--color--muted) !important;
}

.home .site-header .wp-block-navigation a {
	color: var(--wp--preset--color--contrast) !important;
}

.home .site-header .wp-block-button__link {
	background: var(--wp--preset--color--primary) !important;
	border: 0 !important;
	color: #ffffff !important;
}

.home .site-header .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent) !important;
}

.home .site-header .vc-langs a {
	color: var(--wp--preset--color--muted) !important;
}

.home .site-header .vc-langs a:hover,
.home .site-header .vc-langs .current-lang a {
	color: var(--wp--preset--color--primary) !important;
}

.home .site-header .vc-langs li + li {
	border-left-color: var(--wp--preset--color--border) !important;
}

/* Contenedor del vídeo del hero: mismo tratamiento que la maqueta
   (4/3, esquina 12px y sombra amplia). Acepta <video> o <img>. */
.vc-heromedia {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--ink));
	box-shadow: 0 24px 60px rgba(15, 27, 45, 0.16);
}

.vc-heromedia video,
.vc-heromedia img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Mientras no haya vídeo: mismo "lente" concéntrico de la maqueta */
.vc-heromedia.is-placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 48%, transparent 25%, rgba(255, 255, 255, 0.16) 26%, transparent 28%),
		radial-gradient(circle at 50% 48%, transparent 39%, rgba(255, 255, 255, 0.12) 40%, transparent 43%),
		radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.22) 0 15%, transparent 16%),
		radial-gradient(60% 60% at 30% 22%, rgba(255, 255, 255, 0.24), transparent 70%);
}

.vc-heromedia__ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
}

.vc-heromedia__tag {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	z-index: 2;
	background: #ffffff;
	color: var(--wp--preset--color--primary);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0.45rem 0.7rem;
	border-radius: 6px;
}

/* ---- Desplegable del menú ----
   La normalización de la cabecera de portada aclaraba TODOS los enlaces del
   menú, incluidos los del submenú, que va sobre fondo azul: quedaban ilegibles.
   Aquí se restituye el blanco y se le da la esquina/sombra del sistema. */
.home .site-header .wp-block-navigation__submenu-container a {
	color: #ffffff !important;
}

.site-header .wp-block-navigation__submenu-container {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 18px 38px rgba(15, 27, 45, 0.18);
}

/* ---- Recortes de prensa ----
   Son páginas verticales con texto: se muestran ENTERAS (contain) en una caja
   uniforme, no recortadas, y amplían al hacer clic para poder leerlas. */
.vc-clip {
	margin: 0;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--border);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.vc-clip img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: #ffffff;
}

@media (hover: hover) {
	.vc-clip:hover {
		transform: translateY(-6px);
		box-shadow: 0 18px 38px rgba(15, 27, 45, 0.12);
	}
}

/* ============================================================
   PÁGINA DE CONTACTO
   Formulario + datos a dos columnas y mapa a ancho completo.
   ============================================================ */

/* Mapa: el <iframe> es inline por defecto, así que el margin:auto del
   layout de WordPress no lo centraba. Se pasa a bloque y se sirve a
   ancho completo, como una banda. */
/* El mapa ya no es un iframe de Google, sino una imagen nuestra dentro de un
   enlace: así se ve siempre, sin pedir permiso de cookies, y quien quiera el
   mapa interactivo lo abre pulsando. */
.vc-map {
	display: block;
	width: 100%;
	height: clamp(280px, 38vw, 440px);
	border: 0;
	filter: saturate(0.92);
	position: relative;
	overflow: hidden;
}

.vc-map img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0 !important;
}

.vc-map:hover img {
	filter: saturate(1.05);
}

/* La licencia ODbL de OpenStreetMap obliga a dejar el crédito visible. Va
   colgado de una esquina del mapa, no debajo, para no abrir un hueco en una
   banda que va pegada al pie. */
.vc-map-zona {
	position: relative;
	display: block;
}

.vc-map__credito {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0.25rem 0.6rem;
	font-size: 0.72rem;
	line-height: 1.3;
	color: #3f4a52;
	background: rgba(255, 255, 255, 0.82);
	border-top-left-radius: 8px;
	pointer-events: auto;
}

.vc-map__credito a {
	color: inherit;
	text-decoration: underline;
}

/* Tarjeta de datos de contacto */
.vc-datos {
	display: grid;
	gap: 1.5rem;
}

.vc-dato {
	display: grid;
	grid-template-columns: 2.6rem 1fr;
	gap: 0 0.9rem;
	align-items: start;
}

.vc-dato__ico {
	grid-row: span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 8px;
	background: var(--wp--preset--color--blue-050);
	color: var(--wp--preset--color--primary);
}

.vc-dato__tit {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.vc-dato__val {
	margin: 0.2rem 0 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
	/* El correo es largo y la tarjeta estrecha: que parta por donde toca. */
	overflow-wrap: anywhere;
}

.vc-dato__val a {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.vc-dato__val a:hover {
	color: var(--wp--preset--color--accent);
}

.vc-dato__val span {
	color: var(--wp--preset--color--muted);
}

/* Los hijos de un grid llevan `min-width:auto`: sin esto, un campo o un
   correo largo empujan la caja y desbordan en pantallas estrechas. */
.vc-form,
.vc-form__fila,
.vc-campo,
.vc-dato,
.vc-dato > *,
.vc-campo > * {
	min-width: 0;
}

/* Formulario */
.vc-form {
	display: grid;
	gap: 1.05rem;
}

.vc-form__fila {
	display: grid;
	gap: 1.05rem;
}

@media (min-width: 600px) {
	.vc-form__fila {
		grid-template-columns: 1fr 1fr;
	}
}

.vc-campo {
	display: grid;
	gap: 0.4rem;
}

.vc-campo label {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.vc-campo .req {
	color: var(--wp--preset--color--accent);
}

.vc-campo input,
.vc-campo select,
.vc-campo textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.78rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vc-campo textarea {
	min-height: 7rem;
	resize: vertical;
}

.vc-campo input:focus,
.vc-campo select:focus,
.vc-campo textarea:focus {
	outline: 0;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(20, 102, 214, 0.16);
}

.vc-form__legal {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
}

.vc-form__legal input {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.15rem;
	accent-color: var(--wp--preset--color--primary);
}

.vc-form__legal a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.vc-form button[type="submit"] {
	justify-self: start;
	padding: 0.9rem 2.2rem;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--accent);
	color: #ffffff;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.vc-form button[type="submit"]:hover {
	background: var(--wp--preset--color--primary);
	transform: translateY(-2px);
}

/* ============================================================
   AVISOS DEL FORMULARIO, COOKIES Y CONTENIDO BLOQUEADO
   ============================================================ */

.vc-aviso {
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
	border-radius: 10px;
	border-left: 4px solid;
	font-size: 0.97rem;
	line-height: 1.6;
}

.vc-aviso p {
	margin: 0;
}

.vc-aviso--ok {
	background: var(--wp--preset--color--blue-050);
	border-left-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

.vc-aviso--error {
	background: #FFF3EC;
	border-left-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* Campo trampa para robots: fuera de la vista pero no con display:none,
   que algunos robots detectan. */
.vc-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vc-form__nota {
	margin: -0.3rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.82rem;
	line-height: 1.5;
}

/* ---------- Contenido de terceros a la espera de permiso ---------- */

/* Con miniatura: se ve el vídeo detrás, así el visitante sabe qué va a abrir
   antes de dar permiso. La imagen se sirve desde nuestro dominio, así que no
   hay ninguna petición a TikTok hasta que acepta. */

/* El botón de play, centrado sobre la miniatura */

/* Sin miniatura (el mapa) el botón sigue siendo el de antes. */

/* Reproductor de TikTok ya desbloqueado. El incrustado lleva su propia
   cabecera y pie además del vídeo, así que necesita más alto que el 9/16. */
.vc-tiktok {
	width: 100%;
	max-width: 325px;
	margin: 0 auto;
	/* Altura ajustada al incrustado real: con menos se corta la última línea
	   de etiquetas de los vídeos que llevan muchas. */
	aspect-ratio: 325 / 745;
	border-radius: 12px;
	overflow: hidden;
	background: #000000;
}

.vc-tiktok iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Las dos opciones pesan lo mismo: rechazar no puede costar más que aceptar. */

@media (max-width: 700px) {

}

/* ============================================================
   VÍDEO DE PRESENTACIÓN
   Es vertical (9/16, formato móvil), así que se limita el ancho:
   a pantalla completa quedaría descomunal.
   ============================================================ */

.vc-video {
	max-width: 340px;
	margin: 0 auto;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 18px 38px rgba(15, 27, 45, 0.16);
	background: #0A1B3A;
}

.vc-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
	object-fit: cover;
}

/* Variante apaisada, para los trozos del vídeo del centro (16/9). */
.vc-video.is-ancho {
	max-width: 100%;
}

.vc-video.is-ancho video {
	aspect-ratio: 16 / 9;
}

/* ============================================================
   INSTALACIONES — tarjetas de equipamiento
   Horizontales, a dos columnas: con 10 aparatos, tres columnas
   dejaban el último solo en su fila.
   ============================================================ */

.vc-equipo {
	/* El grupo se escribe a mano y no lleva las clases de disposición que
	   genera WordPress, así que la fila se declara aquí. */
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	height: 100%;
}

.vc-equipo__media {
	flex: 0 0 38%;
	min-width: 0;
}

.vc-equipo__media figure,
.vc-equipo__media .vc-imgph {
	margin: 0;
}

.vc-equipo__media img {
	display: block;
	width: 100%;
	border-radius: 8px;
}

/* El hueco de foto pendiente, al mismo encuadre que las fotos reales. */
.vc-equipo__media .vc-imgph {
	min-height: 0;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	padding: 0.75rem;
}

.vc-equipo__media .vc-imgph p {
	font-size: 0.72rem;
	line-height: 1.4;
}

.vc-equipo__txt {
	flex: 1 1 auto;
	min-width: 0;
}

/* En móvil la tarjeta se apila: a 38 % la foto sería un sello. */
@media (max-width: 600px) {
	.vc-equipo {
		flex-wrap: wrap !important;
	}

	.vc-equipo__media {
		flex: 1 1 100%;
	}
}

/* ============================================================
   MÓVIL — zonas pulsables y tamaños mínimos
   Medido en pantalla de 390px: el botón del menú era de 24x24 px
   y el selector de idioma de 14x16. Las guías de Apple y Google
   piden 44x44; WCAG 2.5.8 exige 24x24 como mínimo absoluto.
   ============================================================ */

/* Botón del menú: es el acceso principal a la navegación en móvil.
   Va dentro de la media query de WordPress (600 px) y SIN `display`,
   porque en escritorio el núcleo los oculta y forzarlos aquí sacaba
   los iconos ☰ y ✕ encima del menú de escritorio. */
@media (max-width: 600px) {
	.site-header .wp-block-navigation__responsive-container-open,
	.site-header .wp-block-navigation__responsive-container-close {
		min-width: 44px;
		min-height: 44px;
		align-items: center;
		justify-content: center;
	}
}

/* Selector de idioma: el enlace ocupaba 14x16 px, imposible de acertar. */
.vc-langs a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.35rem;
}

@media (max-width: 781px) {
	.vc-langs a {
		font-size: 0.82rem;
	}
}

/* Botones: 32 px de alto se queda corto para un dedo. */
.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Iconos sociales del pie: eran de 24x24. */
.wp-block-social-link .wp-block-social-link-anchor {
	min-width: 40px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 781px) {
	/* Enlaces sueltos del pie y teléfonos: se les da alto de dedo sin
	   romper la línea, porque van uno por renglón. */
	.site-footer a[href^="tel:"],
	.site-footer p a {
		display: inline-block;
		padding: 0.35rem 0;
	}

	/* El subtítulo del logo estaba a 9,6 px: ilegible. */
	.site-header .site-logo p:last-child {
		font-size: 0.78rem !important;
		letter-spacing: 0.16em !important;
	}

	/* Rótulos de las columnas del pie: estaban a 11,5 px. */
	.site-footer h3 {
		font-size: 0.8rem !important;
		letter-spacing: 0.2em !important;
	}

	/* Rótulos en mayúsculas: 11,2 px con mucho espaciado cuesta leerlos. */
	.has-x-small-font-size {
		font-size: 0.78rem !important;
	}

	/* Etiquetas de la tarjeta de contacto (Teléfono, Correo, Dirección). */
	.vc-dato__tit {
		font-size: 0.8rem;
	}

	/* Etiqueta sobre el vídeo de portada: estaba a 9,9 px. */
	.vc-heromedia__tag {
		font-size: 0.78rem;
	}

	/* Enlace «Ver reseña en Google»: 22 px de alto. */
	.vc-review__link {
		min-height: 44px;
	}

	/* Los enlaces del pie se quedaban entre 31 y 36 px de alto. Con
	   inline-flex ocupan alto de dedo sin romper el renglón, que es
	   como están escritos (separados por · o por salto de línea). */
	.site-footer a[href^="tel:"],
	.site-footer p a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0;
	}

	/* El nombre del centro en la cabecera es un enlace de 31 px. */
	.site-header .site-logo p:first-child a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* El selector de idioma medía 29 px de ancho; en móvil la cabecera
	   se apila, así que hay sitio de sobra para ensancharlo. */
	.vc-langs a {
		padding: 0 0.7rem;
	}

	/* Correo del centro: se partía a mitad de palabra (…madhu. / com).
	   Con el relleno de tarjeta fluido ya cabe entero. */
	.vc-dato__val {
		overflow-wrap: break-word;
	}

	/* La casilla de la política de privacidad medía 18x18 px y su etiqueta
	   (que es el blanco real, porque va con `for`) solo 25 px de alto. */
	.vc-form__legal input {
		width: 1.5rem;
		height: 1.5rem;
		margin-top: 0.55rem;
	}

	.vc-form__legal label {
		display: inline-block;
		padding: 0.6rem 0;
	}

	/* El botón de enviar y los pares de botones quedaban de anchos
	   distintos, uno debajo de otro. A ancho completo la columna queda
	   alineada y el blanco es mayor. */
	.vc-form button[type="submit"] {
		width: 100%;
	}
}

/* Parejas de botones en móvil: a ancho completo.
   Apilados quedaban de anchos distintos («PEDIR CITA» 210 px y
   «ESCRÍBENOS POR WHATSAPP» 275 px), con el borde derecho en zigzag.
   Solo cuando hay dos o más: un botón suelto se deja como está. */
@media (max-width: 600px) {
	.wp-block-buttons:has(> .wp-block-button + .wp-block-button) > .wp-block-button {
		flex-basis: 100%;
	}

	.wp-block-buttons:has(> .wp-block-button + .wp-block-button) .wp-block-button__link {
		width: 100%;
	}
}

/* ---- Móvil: enlaces que hacen de botón dentro de las tarjetas ----
   Medido a 390 px: los títulos de tarjeta enlazados («Queratocono»,
   «Ortoqueratología», «Lentes pediátricas») y los «Ver terapia →»
   ofrecían 17-20 px de alto. Los datos de la tarjeta de contacto
   (teléfono, WhatsApp, correo) se quedaban en 19-20 px, y son
   justamente lo que más se pulsa desde el móvil.
   Los enlaces dentro de un párrafo corrido se dejan como están: la
   norma (WCAG 2.5.8) los exceptúa y estirarlos pisaría el renglón. */

@media (max-width: 781px) {
	main h2 > a,
	main h3 > a,
	main h4 > a,
	main p > a:only-child,
	.vc-dato__val a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ---- Menú móvil desplegado: alto de dedo y letra legible ----
   Medido a 390 px: cada enlace del panel ofrecía entre 21 y 33 px de
   alto, y es la navegación principal del móvil. El panel ocupa toda la
   pantalla, así que hay sitio de sobra para darles 44 px. */

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: 0.9rem;
}

/* Los apartados con submenú llevan su propio botón de despliegue. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	min-height: 44px;
}

/* ---- Rejilla de equipamiento (Instalaciones) en móvil ----
   Ese grupo lleva `columnCount: 2`, que WordPress traduce a dos columnas
   fijas a cualquier ancho. A 320 px cada tarjeta se quedaba en 124 px y
   el hueco de foto se salía 13 px de la pantalla. Una sola columna. */

@media (max-width: 781px) {
	main .is-layout-grid:has(> .vc-equipo) {
		grid-template-columns: 1fr !important;
	}
}

/* Los textos de «falta foto» son palabras largas (retinógrafo,
   topógrafo…) que no rompen y estiraban su caja. */
.vc-imgph {
	min-width: 0;
}

.vc-imgph p {
	overflow-wrap: anywhere;
}

/* ---- Menú de escritorio en pantallas táctiles (tabletas) ----
   A 768 px ya no hay menú hamburguesa: sale la barra de escritorio, con
   enlaces de 21 px de alto y, sobre todo, flechas de submenú de 9x9 px,
   imposibles de acertar con el dedo. Se aplica por ancho (601-1024 px),
   que es el rango de tableta, y no con `pointer: coarse`, porque esa
   consulta no llega a todos los navegadores de tableta. No engorda la
   cabecera: ya mide más de 44 px por el logotipo. */

.wp-block-navigation .wp-block-navigation-submenu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
}

@media (min-width: 601px) and (max-width: 1024px) {
	.site-header .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.wp-block-navigation .wp-block-navigation-submenu__toggle {
		min-width: 44px;
		min-height: 44px;
	}
}

/* ---- Tarjeta de «Nuestras novedades» (portada) ----
   Va al lado del banner vertical de Ray-Ban Meta, que es una pieza de
   marca ya montada. De Nuance solo tenemos foto de producto apaisada,
   así que aquí la foto ocupa la parte de arriba sobre su propio fondo
   (sin recortar: `contain`) y el titular va debajo como texto de verdad,
   que se traduce y se lee con lector de pantalla. Las dos celdas acaban
   con la misma altura porque la tarjeta estira. */

.vc-novedad {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
}

.vc-novedad figure {
	flex: 1 1 auto;
	min-height: 180px;
	margin: 0 !important;
	background: #E5E6E6;
	border-radius: 0 !important;
}

.vc-novedad figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0 !important;
}

.vc-novedad__txt {
	flex: 0 0 auto;
	background: var(--wp--preset--color--ink);
	color: #ffffff;
	padding: var(--wp--preset--spacing--40);
}

.vc-novedad__txt :is(h3, p) {
	color: #ffffff;
	margin: 0;
}

.vc-novedad__txt p {
	margin-top: 0.5rem;
	color: #D6E6FA;
}

/* El enlace heredaba el azul de marca y sobre el panel oscuro no se leía. */
.vc-novedad__txt a {
	color: #ffffff !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* ---- Tablas: que las palabras largas partan ----
   En alemán las palabras compuestas («Datenschutzerklärung»,
   «Sicherheitsmaßnahmen») no caben en una celda estrecha y empujaban la
   tabla hasta 455 px dentro de una pantalla de 390. La página no se movía,
   porque el `figure` lleva scroll propio, pero había que arrastrar para
   leer. Con esto la tabla cabe y no hay que arrastrar nada. */

.wp-block-table td,
.wp-block-table th {
	overflow-wrap: break-word;
	hyphens: manual;
}

/* ---- Los dos vídeos del equipo, uno al lado del otro ----
   Con columnas de Gutenberg cada vídeo se centraba dentro de su mitad y
   quedaban separados por media pantalla. Aquí van en una fila propia, pegados,
   y en móvil se apilan solos. Solo llevan un rótulo corto encima: el vídeo se
   explica mejor viéndolo. */

.vc-dosvideos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
}

.vc-dosvideos__item {
	flex: 0 1 340px;
	margin: 0;
	min-width: 0;
}

.vc-dosvideos__rotulo {
	margin: 0 0 0.8rem;
	color: var(--wp--preset--color--accent);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

@media (max-width: 781px) {
	.vc-dosvideos__rotulo {
		font-size: 0.76rem;
		letter-spacing: 0.14em;
	}
}

/* ---- Titulares de pregunta, con algo más de ancho ----
   «¿Identificas alguna de estas situaciones en tu día a día o en tu familia?»
   no cabía en dos líneas dentro de los 720 px del bloque y dejaba «familia?»
   sola en una tercera, que queda huérfana. Con 900 px entra en dos, y ese es
   también el ancho que pide la versión alemana, que es la más larga. El párrafo
   de debajo se queda en 720, que es su medida cómoda de lectura.
   Se usa `h2.` en lugar de `!important` para ganarle a la regla de ancho que
   WordPress pone en el contenedor. */
/* A 900 px este titular se partía dejando «personalizadas» sola en el segundo
   renglón: le faltaban 98 px para caber de una línea. La sección mide 1200,
   así que hay sitio de sobra. */
h2.vc-titulo-ancho {
	max-width: 1020px;
	margin-inline: auto;
}

/* Los nombres de las tarjetas de equipo son de cuatro palabras en una columna
   estrecha: `balance` los reparte en dos líneas parejas en vez de dejar el
   último apellido solo. */
main .wp-block-columns .wp-block-column > h2.wp-block-heading {
	text-wrap: balance;
}

/* ---- Vídeo de sección, ancho pero sin recortar ----
   Se probó como faldón de borde a borde, pero para llenar una banda tan baja
   había que recortar el vídeo por arriba y por abajo y se perdía la escena.
   Ahora va al ancho del contenido y con su proporción original: se ve el
   encuadre entero, tal como se grabó. */

.vc-video-seccion {
	width: 100%;
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
	box-shadow: 0 18px 38px rgba(15, 27, 45, 0.16);
}

.vc-video-seccion video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

@keyframes vc-toque {
	0%, 100% { transform: translateY(0); }
	15%      { transform: translateY(-6px); }
	30%      { transform: translateY(0); }
	45%      { transform: translateY(-3px); }
	60%      { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
}

/* ---- Titular del hero: cuerpo según el sitio que tiene ----
   En la franja de tableta (782-1024 px) el titular comparte fila con la foto
   y su columna baja hasta 370 px, mientras la letra sigue en 56-58 px: no
   entran ni dos palabras por renglón, y cuando un grupo de palabras unidas no
   cabe el navegador parte una por la mitad («aprove / char»). Lo mismo pasa en
   las pantallas más estrechas. Bajando el cuerpo en esos dos tramos el texto
   vuelve a repartirse solo. */

@media (min-width: 782px) and (max-width: 1024px) {
	/* WordPress pone `!important` en las clases de tamaño, así que hay que
	   igualarlo para poder ajustarlo. */
	main h1.has-huge-font-size {
		font-size: clamp(2.5rem, 4.4vw, 3.1rem) !important;
	}
}

@media (max-width: 360px) {
	main h1.has-huge-font-size {
		font-size: 2.2rem !important;
	}
}

/* ---- Página 404 ----

   Lista de atajos a las especialidades. Se centra y se envuelve sola, para
   que en móvil no salga una columna larguísima de enlaces sueltos. */

.vc-404__lista {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem 0.75rem;
}

.vc-404__lista a {
	display: block;
	padding: 0.7rem 1.2rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 600;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.vc-404__lista a:hover,
.vc-404__lista a:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* ============================================================
   AJUSTES DE DENSIDAD (octubre 2026)
   La clienta pedía menos aire y fotos algo más pequeñas, sin
   rediseñar nada: todo lo de aquí abajo recorta, no reordena.
   ============================================================ */

/* ---- Portada: el salto del héroe a la sección siguiente ----

   Eran 168 px de blanco: 72 de relleno abajo, 72 arriba y 24 de
   separación entre bloques. Se recorta el relleno a los dos lados del
   El relleno va en el atributo `style` del propio bloque, así que desde aquí
   no hay forma de bajarlo: un estilo en línea gana a cualquier selector. Se
   cambió en el marcado de las tres portadas, de `spacing|70` a `spacing|60`.
   Este comentario queda como recordatorio de dónde mirar. */

/* ---- Portada: el vídeo del héroe, a la altura del texto ----

   `.vc-heromedia` tenía `aspect-ratio: 4/3`, que a 541 px de ancho da
   406 de alto: 57 menos que la columna del texto. Con las columnas
   centradas, el vídeo quedaba flotando en medio y no cuadraba con
   nada. Es el mismo arreglo que ya llevan los héroes de especialidad:
   la columna se estira y el medio llena lo que marque el texto. */

@media (min-width: 782px) {

	.wp-block-columns.are-vertically-aligned-center
	> .wp-block-column:has(> .vc-heromedia) {
		align-self: stretch;
		display: flex;
	}

	.wp-block-column:has(> .vc-heromedia) > .vc-heromedia {
		aspect-ratio: auto;
		flex: 1 1 auto;
		min-height: 320px;
	}
}

/* ---- Portada: las tarjetas de novedades ----

   La de la derecha es una imagen suelta de 1279×1400: su proporción
   estiraba la fila a 589 px y obligaba a la otra a seguirla. En vez de
   recortarla —lleva texto dentro y se perdería—, se estrecha la
   rejilla y las dos bajan a la vez, proporcionalmente. */

@media (min-width: 782px) {

	/* `.entry-content` delante para ganarle a la regla de `alignwide` que
	   pone WordPress, que tiene el mismo peso que `.vc-novedades` a secas. */
	.entry-content .vc-novedades.alignwide {
		max-width: 880px;
		margin-inline: auto;
	}
}

/* ---- Equipo: los retratos y los recortes de prensa ----

   Los dos retratos iban a 694 px de alto cada uno y los recortes a
   456: entre los cinco se comían media página. Se les pone techo y se
   encuadra desde arriba, que es donde están las caras y los titulares. */

.vc-retrato img {
	max-height: 560px;
	width: 100%;
	object-fit: cover;
	object-position: center 18%;
}

.vc-clip img {
	max-height: 390px;
	width: 100%;
	object-fit: cover;
	object-position: center top;
}

/* ---- Cortes de línea decididos a mano ----

   Hay titulares en los que el reparto automático queda mal y además cambia
   según el ancho de cada pantalla: lo que la clienta ve bien en su ordenador,
   en otro se parte por otro sitio. Donde el corte importa se pone un <br> y
   se acabó la lotería. En pantallas estrechas se desactiva: ahí no cabe el
   reparto pensado para escritorio y vale más dejar fluir el texto. */

@media (max-width: 600px) {
	br.vc-corte {
		display: none;
	}
}

/* ---- Equipo: el retrato, del nombre al final de la ficha ----

   Iba centrado y con un tope de alto, así que no empezaba ni acababa a la
   altura de nada. Se saca del flujo para que mande la columna del texto:
   arranca con el nombre y termina donde acaba el recuadro de estudios. */

@media (min-width: 782px) {

	.wp-block-columns.are-vertically-aligned-center
	> .wp-block-column:has(> .vc-retrato) {
		align-self: stretch;
		position: relative;
		min-height: 360px;
	}

	.wp-block-column:has(> .vc-retrato) > .vc-retrato {
		position: absolute;
		inset: 0;
		margin: 0;
	}

	.wp-block-column:has(> .vc-retrato) > .vc-retrato img {
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: cover;
		object-position: center 18%;
	}
}

/* ---- El vídeo de sección, algo más contenido ---- */

/* `main` y la clase de alineación delante: la regla de `alignwide` que pone
   WordPress pesa más que una clase suelta y se quedaba con sus 1080 px. */
main .vc-video-seccion.alignwide {
	max-width: 700px;
	margin-inline: auto;
}

/* ---- Párrafos de cuerpo: justificados ----

   Solo los normales: los de entradilla (`has-large-font-size`) y los que
   llevan alineación propia se quedan como están. Con la justificación va la
   partición automática, que es lo que evita los ríos de blanco. */

main p.wp-block-paragraph:not([class*="has-text-align"]):not(.has-large-font-size):not(.has-small-font-size) {
	text-align: justify;
	/* Sin partición de palabras: la clienta no quiere ver guiones al final de
	   línea («esfuer-zo», «solu-ciones»). El precio es que el justificado
	   reparte espacios algo más anchos, que es el mal menor de los dos. */
	hyphens: manual;
}

/* Pero no dentro de una tarjeta ni de una columna: ahí la medida es corta
   (300–450 px) y justificar abre huecos entre palabras en vez de cerrarlos.
   La tarjeta es un `div` con fondo; la sección también lleva fondo, pero es
   un `section`, y por eso no entra aquí.

   Los tres `:not()` se repiten aquí sin filtrar nada: están para igualar la
   especificidad de la regla de arriba, que suma (0,4,2). Sin ellos esto se
   queda en (0,3,2) y pierde, que es justo lo que pasó la primera vez. Si
   algún día se «limpian», la justificación vuelve a colarse en las tarjetas. */

main div.wp-block-group.has-background p.wp-block-paragraph:not([class*="has-text-align"]):not(.has-large-font-size):not(.has-small-font-size),
main .wp-block-column p.wp-block-paragraph:not([class*="has-text-align"]):not(.has-large-font-size):not(.has-small-font-size),
main .vc-novedad p.wp-block-paragraph:not([class*="has-text-align"]):not(.has-large-font-size):not(.has-small-font-size),
main li p.wp-block-paragraph:not([class*="has-text-align"]):not(.has-large-font-size):not(.has-small-font-size) {
	text-align: start;
	hyphens: manual;
}

/* ---- La entradilla sigue al titular ----

   Si el titular de la sección va centrado, la entradilla que va justo debajo
   también. Tenerla a la izquierda (o justificada) bajo un titular centrado
   descuadra el bloque: el ojo ve dos ejes distintos en el mismo grupo.
   Se detectaron 36 sitios así en las 33 páginas.

   Los `:not()` vuelven a estar para ganar en especificidad a la regla de
   justificar de más arriba; ver la nota de ahí. */

main h2[class*="has-text-align-center"] + p.wp-block-paragraph:not([class*="has-text-align"]):not(.has-small-font-size),
main h3[class*="has-text-align-center"] + p.wp-block-paragraph:not([class*="has-text-align"]):not(.has-small-font-size) {
	text-align: center;
	hyphens: manual;
	/* `balance` reparte las palabras para que las líneas queden parecidas de
	   largo, en vez de dejar una última línea corta y descentrada. En texto
	   centrado se nota mucho; `pretty`, que es lo que lleva el resto del
	   sitio, solo cuida la huérfana. */
	text-wrap: balance;
}

/* ---- Pero si la entradilla pasa de tres líneas, se justifica ----

   Norma de la clienta: hasta tres líneas, centrada bajo su titular; a partir
   de ahí centrar cansa de leer, así que va justificada. Y entonces tiene que
   arrancar donde arranca el titular, no sangrada.

   El titular de sección lleva `max-width: 1020px` y el párrafo `720px`, los
   dos centrados dentro de un contenedor de 1080: el párrafo quedaba 150 px
   más adentro. Aquí se le quita el centrado y se le da el mismo margen
   izquierdo que tiene el titular —(contenedor − 1020) / 2—, conservando su
   medida de 720 px, que es la que se lee bien. El `max()` cubre las pantallas
   estrechas, donde ese cálculo sale negativo y el margen debe ser cero.

   Cuántas líneas ocupa un texto no se puede saber desde CSS, así que la clase
   va en el marcado, medida a 1440 px. Si se reescribe uno de estos textos,
   hay que volver a mirarlo. */

main h2[class*="has-text-align-center"] + p.wp-block-paragraph.vc-entradilla-larga:not(.has-small-font-size),
main h3[class*="has-text-align-center"] + p.wp-block-paragraph.vc-entradilla-larga:not(.has-small-font-size) {
	/* Alineada a la izquierda, no justificada, y es una decisión medida.
	   Tres condiciones no caben juntas: justificar, una columna estrecha
	   (640-700 px, que es lo que mide el texto del titular) y no partir
	   palabras. Con las tres a la vez, 20 de las 30 entradillas quedaban con
	   huecos de más del doble de lo normal entre palabras, y la peor a 7
	   veces: ríos de blanco imposibles de leer.
	   A la izquierda se consigue lo que se buscaba —que arranque justo donde
	   arranca el titular, sin sangrado— y se pierde solo el borde derecho
	   recto. Para volver a justificar basta cambiar esta línea. */
	text-align: start;
	hyphens: manual;
	text-wrap: pretty;
}

/* Casi siempre el titular y la entradilla miden lo mismo, así que estando los
   dos centrados ya arrancan a la vez y no hay nada que corregir. La excepción
   es el titular ancho, que se sale a 1020 px mientras la entradilla se queda
   en los 720 del contenedor.

   Se le da al párrafo la medida del titular en vez de moverlo: así arranca y
   termina donde él, y de paso desaparece el hueco en blanco que quedaba a la
   derecha. Justificar en 720 px con cuerpo de 24 px dejaba además unos
   espacios entre palabras enormes; en 1020 px entran unos 74 caracteres por
   línea, que es medida de lectura normal y el reparto queda fino.

   El `!important` no es por gusto: WordPress fija el ancho y centra lo que va
   dentro de un contenedor «constrained» con `!important`. */

/* ---- La entradilla justificada toma la medida de su titular ----

   El titular va centrado, así que su texto ocupa menos que su caja: en baja
   visión, 686 px de 1020. Si la entradilla se justifica a los 1020 de la caja,
   arranca 167 px a la izquierda de donde arranca el titular y se ve despegada.

   La solución es darle a la entradilla el ancho del TEXTO del titular, no el
   de su caja. CSS no sabe medir a un hermano, así que la medida se mide en el
   navegador y se escribe como clase en el marcado. Se redondea a múltiplos de
   20 px para no acabar con una clase por párrafo, y se acota entre 640 y 1020:
   por debajo de 640 la columna se queda demasiado estrecha para justificar sin
   abrir huecos.

   Va en clase y no en un `style` en línea a propósito: un atributo suelto en
   un párrafo hace que el editor marque el bloque como contenido inesperado.

   Si se reescribe un titular o una entradilla, hay que volver a medir. */

/* `.vc-sigue` es el párrafo que va detrás de una entradilla medida: tiene que
   llevar su misma medida y su mismo empuje, o se queda con el ancho entero del
   contenedor y arranca 60-120 px más a la izquierda que el de arriba. */

main p.wp-block-paragraph.vc-sigue:not([class*="has-text-align"]):not(.has-small-font-size) {
	/* Los `:not()` están para ganar en especificidad a la regla de justificar
	   el cuerpo, que suma (0,4,2); sin ellos este párrafo se quedaba
	   justificado mientras el de arriba iba a la izquierda. */
	text-align: start;
	hyphens: manual;
}

main p.wp-block-paragraph.vc-entradilla-larga:not(.has-small-font-size),
main p.wp-block-paragraph.vc-sigue {
	max-width: var(--vc-ancho, 760px) !important;
	/* Centrada respecto al contenedor y luego empujada a la derecha lo que
	   diga `--vc-desplazo`. Hace falta porque el titular va centrado: su
	   segunda línea entra más adentro que la primera, así que una entradilla
	   pegada al borde de la primera línea se lee como si colgara por fuera
	   del titular. El empujón la mete dentro de su forma.
	   El `max()` protege las pantallas estrechas, donde el cálculo sale
	   negativo y el margen debe ser cero. */
	margin-inline-start: max(0px, calc((100% - var(--vc-ancho, 760px)) / 2 + var(--vc-desplazo, 0px))) !important;
	margin-inline-end: auto !important;
}

main p.vc-entradilla-larga.vc-d10,
main p.vc-sigue.vc-d10 { --vc-desplazo: 10px; }
main p.vc-entradilla-larga.vc-d20,
main p.vc-sigue.vc-d20 { --vc-desplazo: 20px; }
main p.vc-entradilla-larga.vc-d30,
main p.vc-sigue.vc-d30 { --vc-desplazo: 30px; }
main p.vc-entradilla-larga.vc-d40,
main p.vc-sigue.vc-d40 { --vc-desplazo: 40px; }
main p.vc-entradilla-larga.vc-d50,
main p.vc-sigue.vc-d50 { --vc-desplazo: 50px; }
main p.vc-entradilla-larga.vc-d60,
main p.vc-sigue.vc-d60 { --vc-desplazo: 60px; }

/* En móvil no hay nada que compensar: el titular ocupa todo el ancho. */
@media (max-width: 781px) {
	main p.wp-block-paragraph.vc-entradilla-larga,
	main p.wp-block-paragraph.vc-sigue {
		--vc-desplazo: 0px;
	}
}

main p.vc-entradilla-larga.vc-m640,
main p.vc-sigue.vc-m640 {
	--vc-ancho: 640px;
}
main p.vc-entradilla-larga.vc-m660,
main p.vc-sigue.vc-m660 {
	--vc-ancho: 660px;
}
main p.vc-entradilla-larga.vc-m700,
main p.vc-sigue.vc-m700 {
	--vc-ancho: 700px;
}
main p.vc-entradilla-larga.vc-m820,
main p.vc-sigue.vc-m820 {
	--vc-ancho: 820px;
}
main p.vc-entradilla-larga.vc-m840,
main p.vc-sigue.vc-m840 {
	--vc-ancho: 840px;
}
main p.vc-entradilla-larga.vc-m900,
main p.vc-sigue.vc-m900 {
	--vc-ancho: 900px;
}
main p.vc-entradilla-larga.vc-m940,
main p.vc-sigue.vc-m940 {
	--vc-ancho: 940px;
}

/* Pareja de fotos a lo ancho (contactología): el ancho completo las hacía
   dominar la sección. Se estrechan para que acompañen al texto en vez de
   competir con él. */
main .wp-block-columns.vc-duo.alignwide {
	max-width: 1000px;
	margin-inline: auto;
}