/*
 * CSS a mano (último recurso, ver CLAUDE.md §2.4).
 * Cada regla dice qué no se pudo resolver con theme.json y por qué.
 * El corte de 600px es el mismo en el que el bloque de navegación cambia
 * al menú hamburguesa (overlayMenu: "mobile"), para que todo cambie a la vez.
 */

/*
 * Botón hamburguesa del menú móvil: el bloque de navegación no expone
 * fondo, color, radio ni relleno para el botón que abre el menú.
 */
.wp-block-navigation__responsive-container-open {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--small);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus {
	background-color: var(--wp--preset--color--secondary);
}

/*
 * Preguntas frecuentes: el bloque details solo trae el triángulo nativo del
 * navegador a la izquierda del resumen; theme.json no permite cambiar ni mover
 * el marcador. El diseño usa un chevron a la derecha que gira al abrir.
 */
.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	cursor: pointer;
}

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

.wp-block-details summary::after {
	content: "";
	flex: none;
	width: var(--wp--preset--spacing--30);
	height: var(--wp--preset--spacing--30);
	border-right: var(--wp--custom--border--width) solid currentColor;
	border-bottom: var(--wp--custom--border--width) solid currentColor;
	margin-inline-end: var(--wp--preset--spacing--20);
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.2s ease;
}

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

/*
 * Botón hamburguesa más grande en móvil (pedido de revisión: 3–4 puntos más
 * que el ícono de 24 del bloque). El bloque no expone el tamaño del ícono.
 */
.wp-block-navigation__responsive-container-open svg {
	width: 1.75rem;
	height: 1.75rem;
}

/*
 * Separación entre las partes de plantilla: el blockGap raíz deja una franja
 * blanca entre Contacto y el pie, que son oscuros. Las partes no tienen
 * control de margen propio.
 */
.wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0;
}

/*
 * Portada en móvil: el cover solo acepta una altura mínima para todas las
 * pantallas (en escritorio 70vw, para que el motivo de la foto empiece debajo
 * de los botones). En móvil la portada es más baja y los botones van apilados
 * al pie de la portada.
 */
@media (max-width: 599px) {
	.conik-portada {
		min-height: 80svh !important;
	}

	.conik-portada > .wp-block-cover__inner-container {
		align-self: stretch;
		display: flex;
		flex-direction: column;
	}

	.conik-portada__contenido {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.conik-portada__acciones {
		flex-direction: column;
		margin-top: auto !important;
	}
}

/* Pilares: el hover azul mantiene legible el texto blanco al 100 %.
 * theme.json no admite :hover en bloques de grupo. */
.conik-pilares .is-style-card-dark {
	box-shadow: var(--wp--preset--shadow--suave);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.conik-pilares .is-style-card-dark:hover {
		transform: translateY(-0.25rem);
		box-shadow: var(--wp--preset--shadow--elevada);
	}
}

.conik-pilares .is-style-card-dark:hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

.conik-pilares .is-style-card-dark:hover .wp-block-heading {
	color: var(--wp--preset--color--base);
}

/* El ícono conserva el blanco sobre ambos fondos azules. */
.conik-pilares .is-style-card-dark:hover img {
	filter: none;
}

/*
 * Tarjetas en carrusel: todas las tarjetas con la misma altura y el botón
 * alineado abajo. Los grupos no ofrecen «estirar al alto del padre» en un
 * diseño de flujo, y en diseño flex core anula el margen negativo de la
 * variación overlap-up.
 */
.conik-tarjetas-carrusel > .wp-block-group,
.conik-tarjetas-carrusel > .wp-block-group > .is-style-overlap-up {
	display: flex;
	flex-direction: column;
}

.conik-tarjetas-carrusel > .wp-block-group > .is-style-overlap-up,
.conik-tarjetas-carrusel > .wp-block-group > .is-style-overlap-up > .wp-block-group {
	flex: 1;
}

/*
 * Tarjetas en carrusel: el cuadro gris sube hasta cerca de la mitad de la imagen, más
 * que el token global de superposición (que usan otras secciones). Un margen
 * en % se mide sobre el ancho de la tarjeta, así que sigue a la imagen
 * (proporción 546/516) en cualquier pantalla. theme.json no permite un margen
 * negativo relativo al alto de otro bloque.
 */
.conik-tarjetas-carrusel > .wp-block-group > .is-style-overlap-up {
	margin-top: calc(-0.42 * 516 / 546 * 100%);
}

/*
 * Contacto: en móvil la franja de imagen es más alta y se recorta a los
 * lados (4/1 quedaría demasiado delgada). El bloque imagen solo admite una
 * proporción para todas las pantallas.
 */
@media (max-width: 599px) {
	.conik-contacto__banda img {
		aspect-ratio: 5 / 4;
		object-fit: cover;
		object-position: center;
	}
}

/*
 * Formulario de Contact Form 7: sus campos no son bloques, así que
 * theme.json no los alcanza.
 */
.conik-form p {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.conik-form label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--primary);
	margin-bottom: var(--wp--preset--spacing--20);
}

.conik-form br {
	display: none;
}

/* Contact Form 7 envuelve cada línea en <p>: el par de campos usa los label. */
.conik-form__par > p {
	display: contents;
}

/* Dos campos por fila también en móvil (pedido de Andrea, 2026-10-16). */
.conik-form__par {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--40);
}

.conik-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
}

/* Campos sin borde: mismo blanco translúcido y sombra que las tarjetas de
 * áreas terapéuticas (pedido de Andrea, 2026-10-16). */

.conik-form input:not([type="submit"]),
.conik-form select,
.conik-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--30);
	border: 0;
	border-radius: var(--wp--custom--radius--tarjeta);
	background: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
	box-shadow: var(--wp--preset--shadow--suave);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0;
}

/* En Figma el texto de ejemplo es on-dark-soft sobre on-dark: no cumple AA. */
.conik-form ::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.conik-form select {
	accent-color: var(--wp--preset--color--secondary);
}

.conik-form select option {
	color: var(--wp--preset--color--contrast);
}

.conik-form input:focus,
.conik-form select:focus,
.conik-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* Mismo tamaño que los botones de theme.json (styles.elements.button). */
.conik-form input[type="submit"] {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border: 0;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.conik-form input[type="submit"]:hover {
	background: var(--wp--preset--color--secondary);
}

.conik-form__ayuda {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.conik-form .wpcf7-not-valid-tip,
.conik-form .wpcf7-response-output {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary-deep);
}

/*
 * Pie: las listas son desplegables (details) en móvil y se ven abiertas en
 * escritorio. Un details no se puede abrir según el ancho de pantalla sin
 * CSS. ::details-content lo soportan los navegadores actuales; en uno viejo
 * el pie de escritorio queda como desplegable, que sigue funcionando.
 */
/*
 * Pie en móvil: sin las listas (Servicios, Agencia, Contacto), que hacían el
 * pie muy largo; el menú y la parte Contacto ya dan esos enlaces. Las
 * columnas no tienen opción de ocultarse por pantalla.
 */
@media (max-width: 781px) {
	.conik-pie .conik-pie__lista {
		display: none;
	}
}

@media (min-width: 782px) {
	.conik-pie .wp-block-details {
		border-bottom: 0 !important;
		padding-top: 0;
	}

	.conik-pie .wp-block-details::details-content {
		content-visibility: visible;
		display: contents;
	}

	.conik-pie .wp-block-details summary {
		pointer-events: none;
		margin-bottom: var(--wp--preset--spacing--30);
	}

	.conik-pie .wp-block-details summary::after {
		display: none;
	}
}

/*
 * Pie, crédito de Conik Studio: los enlaces del pie van sin subrayado y del
 * mismo color que el texto; dentro de una frase el enlace tiene que
 * distinguirse sin depender del color (WCAG 1.4.1). El bloque párrafo no
 * admite decoración de enlace propia.
 */
.conik-pie__credito a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.conik-pie__credito a:hover {
	color: var(--wp--preset--color--on-dark);
}

/*
 * Botón con ícono (destacado-ficha, ficha-contacto): es un grupo con imagen y enlace, porque el
 * bloque botón no admite íconos. Un grupo flex ocupa todo el ancho; el
 * bloque no ofrece «ancho según contenido».
 */
.conik-boton-icono {
	width: fit-content;
}

/*
 * Ícono junto a texto (botones «Contáctanos», «Servicio al cliente»): la
 * imagen del bloque es inline y se apoya en la línea base, así queda más
 * baja que el texto. El bloque imagen no expone display ni vertical-align.
 */
.conik-boton-icono > .wp-block-image,
.conik-icono-texto > .wp-block-image {
	display: flex;
}

.conik-boton-icono > .wp-block-image img,
.conik-icono-texto > .wp-block-image img {
	display: block;
}

/*
 * Variación «Superpuesto arriba»: lo que sube encima del bloque anterior
 * tiene que pintarse por delante. theme.json no admite position ni z-index.
 */
.is-style-overlap-up {
	position: relative;
	z-index: 1;
}

/*
 * Portadas interiores: en móvil es más baja que en
 * escritorio. El cover solo acepta una altura mínima para todas las pantallas.
 */
@media (max-width: 599px) {
	.conik-portada-interior {
		min-height: 60svh !important;
	}
}

/*
 * Tarjetas de valores: hover de las tarjetas, igual de sobrio que el de pilares.
 * theme.json no admite :hover en bloques, solo en elementos. La oscura baja a
 * primary-deep y no a muted como en pilares: el remate en acento suave
 * no cumple AA sobre muted. La clara se invierte a
 * primary con texto on-dark (muted no se lee sobre primary). Solo cambia el
 * color, pero sin transición si el usuario pide menos movimiento.
 */
.conik-valores .is-style-card-dark,
.conik-valores .is-style-card-surface,
.conik-valores .is-style-card-surface .wp-block-heading {
	transition: background-color 0.25s ease, color 0.25s ease;
}

.conik-valores .is-style-card-dark:hover {
	background-color: var(--wp--preset--color--primary-deep);
}

.conik-valores .is-style-card-surface:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-dark);
}

.conik-valores .is-style-card-surface:hover .wp-block-heading {
	color: var(--wp--preset--color--on-dark);
}

@media (prefers-reduced-motion: reduce) {
	.conik-valores .is-style-card-dark,
	.conik-valores .is-style-card-surface,
	.conik-valores .is-style-card-surface .wp-block-heading {
		transition: none;
	}
}

/*
 * Portada con llamado: el botón no se encoge junto al texto (el bloque grupo
 * en fila no permite fijar el ancho de un hijo sin px). En móvil la línea
 * de texto + botón va centrada y apilada (Figma); el bloque párrafo no tiene
 * alineación por pantalla.
 */
.conik-portada-llamado__linea > .wp-block-buttons {
	flex-shrink: 0;
}

@media (max-width: 599px) {
	.conik-portada-llamado__linea {
		flex-direction: column;
	}

	.conik-portada-llamado__linea > p {
		text-align: center;
	}
}

/*
 * Filas alternas: el texto va primero en el HTML (así queda arriba en
 * móvil) y la variante oscura pone la imagen a la izquierda en escritorio.
 * Las columnas no tienen opción de orden invertido. La imagen (cover) llena
 * el alto de la fila aunque el texto sea más largo. El relleno de la columna
 * de texto no debe sumarse a su 50 %, o le quita ancho a la imagen.
 */
.conik-fila__texto {
	box-sizing: border-box;
}

.conik-fila__imagen > .wp-block-cover {
	height: 100%;
}

@media (min-width: 782px) {
	.conik-fila--imagen-izquierda > .wp-block-columns {
		flex-direction: row-reverse;
	}
}

@media (max-width: 781px) {
	.conik-fila .conik-fila__texto {
		padding-right: var(--wp--custom--gutter) !important;
		padding-left: var(--wp--custom--gutter) !important;
	}

	.conik-fila__imagen > .wp-block-cover {
		min-height: 88vw !important;
	}
}

/*
 * Ficha de contacto: los íconos ocupan el mismo ancho para que los textos
 * queden alineados aunque cada ícono mida distinto; el bloque imagen dentro
 * de un grupo en fila no ofrece un ancho fijo sin px.
 */
.conik-ficha .conik-ficha__icono {
	flex: 0 0 var(--wp--preset--spacing--50);
}

/* Centrado con la primera línea del texto (tamaño large, interlineado body). */
.conik-ficha__dato .conik-ficha__icono {
	display: flex;
	align-items: center;
	height: calc(var(--wp--preset--font-size--large) * var(--wp--custom--line-height--body));
}

/*
 * Blog, metadatos (autor · fecha · tiempo de lectura): un punto medio entre
 * cada dato. Son bloques dinámicos separados y el grupo no tiene separador.
 */
.conik-meta > * + *::before {
	content: "·";
	margin-inline-end: var(--wp--preset--spacing--20);
}

/*
 * Blog, etiquetas: cada una como #etiqueta en una píldora. El bloque
 * Términos de la entrada no admite prefijo por término ni estilo por enlace.
 */
.conik-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.conik-etiquetas .wp-block-post-terms__separator {
	display: none;
}

.conik-etiquetas a {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.conik-etiquetas a::before {
	content: "#";
}

.conik-etiquetas a:hover {
	color: var(--wp--preset--color--primary);
}

/* ------------------------------------------------------------------ */
/* Pharmar                                                             */
/* ------------------------------------------------------------------ */

/*
 * Encabezado flotante: la barra va encima de la portada y se queda fija al
 * hacer scroll, como en el sitio actual. theme.json no admite position ni
 * z-index, y una parte de plantilla no puede superponerse al contenido. El
 * margen negativo deja que la portada (cover) empiece detrás de la barra.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	margin-bottom: calc(-1 * var(--wp--custom--header--altura));
	pointer-events: none;
}

.conik-encabezado__barra {
	position: relative;
	z-index: 0;
	pointer-events: auto;
	background-color: transparent !important;
}

/*
 * El fondo translúcido y el desenfoque van en una capa aparte: un
 * backdrop-filter en la barra misma la vuelve el marco de los elementos
 * «fixed» de adentro, y el menú móvil quedaba encerrado en la barra (con la
 * X montada sobre «Inicio») en vez de cubrir la pantalla.
 */
.conik-encabezado__barra::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-color: var(--wp--preset--color--header-glass);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/*
 * Páginas que no empiezan con una portada: el contenido baja lo que mide la
 * barra para no quedar debajo de ella. No hay forma de saber en theme.json
 * cuál es el primer bloque de la página.
 */
.wp-site-blocks > main {
	padding-top: var(--wp--custom--header--altura);
}

.wp-site-blocks > main:has(> .entry-content > .wp-block-cover:first-child),
.wp-site-blocks > main:has(> .wp-block-cover:first-child) {
	padding-top: 0;
}

/*
 * Enlace activo del menú en cian, como el sitio actual. El bloque de
 * navegación no tiene color propio para el elemento de la página actual.
 */
.conik-encabezado .current-menu-item > a,
.conik-encabezado .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--accent);
}

/*
 * Selector de idioma de TranslatePress dentro de la barra, en vez del
 * flotante que tapaba el encabezado en móvil (desactivar «Floating language
 * selection» en Ajustes → TranslatePress → Selector de idioma). El plugin
 * trae su propio marcado y estilos; aquí solo se alinea con la barra.
 */
.conik-encabezado .trp-language-switcher {
	width: auto;
	height: auto;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
}

.conik-encabezado .trp-language-switcher > .trp-ls-shortcode-current-language,
.conik-encabezado .trp-language-switcher > .trp-ls-shortcode-language {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 0;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
}

@media (max-width: 599px) {
	.conik-encabezado__barra {
		padding-left: var(--wp--preset--spacing--40) !important;
	}

	.conik-encabezado .trp-language-switcher .trp-ls-language-name {
		display: none;
	}
}

/*
 * Banda de contacto: los datos llevan un ícono a la izquierda. Los SVG de
 * assets/images tienen color fijo; como máscara toman el primario. El
 * párrafo no admite ícono.
 */
.conik-contacto__dato {
	position: relative;
	padding-left: calc(var(--wp--preset--spacing--40) + var(--wp--preset--spacing--30));
}

.conik-contacto__dato::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: var(--wp--preset--spacing--40);
	height: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--conik-icono) center / contain no-repeat;
	mask: var(--conik-icono) center / contain no-repeat;
}

.conik-contacto__dato--ubicacion { --conik-icono: url(../images/ico-ubicacion.svg); }
.conik-contacto__dato--telefono { --conik-icono: url(../images/ico-telefono.svg); }
.conik-contacto__dato--correo { --conik-icono: url(../images/ico-correo.svg); }

.conik-contacto__dato strong {
	font-weight: 500;
	color: var(--wp--preset--color--primary);
}

.conik-contacto a {
	color: inherit;
	text-decoration: none;
}

.conik-form input[type="submit"] {
	display: block;
	width: 100%;
}

/* Pie: listas sin viñetas. El bloque lista no tiene esa opción. */
.conik-pie__enlaces {
	list-style: none;
	margin: 0;
}

.conik-pie__enlaces li + li {
	margin-top: var(--wp--preset--spacing--20);
}

/*
 * Inicio, áreas terapéuticas: tarjetas blancas translúcidas sobre la foto de
 * cápsulas. El bloque columna no admite fondo translúcido ni sombra propia
 * sin crear un token de color por cada opacidad.
 */
.conik-areas__tarjeta {
	background: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
	box-shadow: var(--wp--preset--shadow--suave);
	backdrop-filter: blur(6px);
}

@media (max-width: 781px) {
	.wp-block-columns.conik-areas {
		flex-wrap: wrap !important;
	}

	.conik-areas > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--40)) !important;
	}
}

/* Botones de la portada con el mismo ancho (138 px aprox. en el sitio actual). */
.conik-boton-ancho .wp-block-button__link {
	min-width: 8.5rem;
}

/* Logos de casas: una vuelta completa de la cinta cada 45 s, sin prisa. */
.conik-casas .is-style-cinta {
	--conik-cinta-ancho: 14rem;
	--conik-cinta-duracion: 45s;
}

@media (max-width: 599px) {
	.conik-casas .is-style-cinta {
		--conik-cinta-ancho: 9rem;
		--conik-cinta-espacio: var(--wp--preset--spacing--40);
	}
}

/*
 * Portadas con el contenido arriba o al centro a la izquierda: el cover
 * encoge el contenedor interno al ancho del texto (width: auto) cuando la
 * posición no es la central, y las secciones anchas quedan angostas. El
 * bloque no tiene opción de ancho completo para el contenido.
 */
.conik-portada > .wp-block-cover__inner-container,
.conik-introduccion > .wp-block-cover__inner-container {
	width: 100%;
}

/*
 * Menú hamburguesa hasta tableta: con siete enlaces, el botón y el selector
 * de idioma, el menú no cabe en una línea por debajo de ~1100px. El bloque de
 * navegación solo cambia al menú móvil en su corte fijo de 600px.
 */
@media (max-width: 1099px) {
	.conik-encabezado .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.conik-encabezado .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Portada de inicio en móvil: el texto empieza debajo de la barra flotante. */
@media (max-width: 599px) {
	.conik-portada {
		padding-top: calc(var(--wp--custom--header--altura) + var(--wp--preset--spacing--60)) !important;
	}
}

/*
 * Introducción de inicio: el texto ocupa la columna izquierda y la derecha
 * queda libre para la foto de cápsulas del fondo. En móvil las columnas se
 * apilan y la vacía sobra; el bloque columna no se puede ocultar por pantalla.
 */
@media (max-width: 781px) {
	.conik-introduccion__hueco {
		display: none;
	}
}

/* Áreas: el nombre no se corta a media palabra («Cardiometabóli-ca»). */
.conik-areas__tarjeta p {
	overflow-wrap: normal;
	hyphens: manual;
}

/*
 * Portadas interiores (Nosotros) en móvil: más bajas que la de inicio, y la
 * foto se corre a la izquierda para que el degradado azul quede detrás del
 * texto. El punto focal del cover es el mismo en todas las pantallas.
 */
@media (max-width: 599px) {
	.conik-portada--interior {
		min-height: 60svh !important;
	}

	.conik-portada--interior > .wp-block-cover__image-background {
		object-position: 15% 50% !important;
	}
}

/*
 * Nosotros, línea de tiempo: el año lleva una raya que llega hasta la
 * tarjeta, centrada con ella (alto de la tarjeta = relleno + una línea del
 * título). El párrafo no admite una raya propia. En móvil los hitos se apilan
 * y la raya sobra.
 */
.conik-hito__anio {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-height: calc(2 * var(--wp--preset--spacing--40) + var(--wp--custom--line-height--heading) * var(--wp--preset--font-size--tarjeta));
	margin: 0;
}

.conik-hito__anio::after {
	content: "";
	flex: 1;
	border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--primary-soft);
}

.conik-hito__texto {
	padding-inline: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.conik-hito__anio {
		min-height: 0;
	}

	.conik-hito__anio::after {
		display: none;
	}
}

/*
 * Nosotros, visión y misión: al pasar el mouse la tarjeta se pone azul con
 * letras blancas y crece un poco. theme.json no admite :hover en bloques. El
 * ícono es azul: sobre el fondo azul se pinta de blanco. Sin transición ni
 * movimiento si el usuario pide menos movimiento.
 */
.conik-mision-vision__tarjeta,
.conik-mision-vision__tarjeta .wp-block-heading,
.conik-mision-vision__tarjeta p,
.conik-mision-vision__tarjeta img {
	transition: background-color 0.25s ease, color 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

.conik-mision-vision__tarjeta:hover {
	background-color: var(--wp--preset--color--primary) !important;
}

.conik-mision-vision__tarjeta:hover .wp-block-heading,
.conik-mision-vision__tarjeta:hover p {
	color: var(--wp--preset--color--on-dark) !important;
}

.conik-mision-vision__tarjeta:hover img {
	filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: no-preference) {
	.conik-mision-vision__tarjeta:hover {
		transform: scale(1.03);
	}
}

@media (prefers-reduced-motion: reduce) {
	.conik-mision-vision__tarjeta,
	.conik-mision-vision__tarjeta .wp-block-heading,
	.conik-mision-vision__tarjeta p,
	.conik-mision-vision__tarjeta img {
		transition: none;
	}
}

/*
 * Nosotros, valores: la tarjeta velada toma el azul de la primera al pasar el
 * mouse. theme.json no admite :hover en bloques.
 */
.conik-valores-grid .is-style-card-tint,
.conik-valores-grid .is-style-card-tint .wp-block-heading {
	transition: background-color 0.25s ease, color 0.25s ease;
}

.conik-valores-grid .is-style-card-tint:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-dark);
}

.conik-valores-grid .is-style-card-tint:hover .wp-block-heading {
	color: var(--wp--preset--color--on-dark);
}

@media (prefers-reduced-motion: reduce) {
	.conik-valores-grid .is-style-card-tint,
	.conik-valores-grid .is-style-card-tint .wp-block-heading {
		transition: none;
	}
}

/*
 * Casas médicas: tres tarjetas por fila y la segunda fila centrada, como en
 * el sitio anterior. El grupo flex no tiene opción de columnas fijas y la
 * cuadrícula no centra la fila incompleta. Dos por fila en tableta, una en
 * móvil.
 */
.conik-casas-tarjetas > .conik-casa-tarjeta {
	flex: 0 1 calc((100% - 2 * var(--wp--preset--spacing--70)) / 3);
	min-width: 0;
}

.conik-casa-tarjeta__logo {
	width: 73%;
}

@media (max-width: 1023px) {
	.conik-casas-tarjetas > .conik-casa-tarjeta {
		flex-basis: calc((100% - var(--wp--preset--spacing--70)) / 2);
	}
}

@media (max-width: 599px) {
	.conik-casas-tarjetas > .conik-casa-tarjeta {
		flex-basis: 100%;
	}

	.conik-casas-portada {
		min-height: 0 !important;
	}
}

/*
 * Casas médicas, ventajas: al pasar el mouse la tarjeta se pone azul con
 * letras blancas, como visión y misión. theme.json no admite :hover en
 * bloques. El ícono es azul: sobre el fondo azul se pinta de blanco.
 */
.conik-ventaja,
.conik-ventaja .wp-block-heading,
.conik-ventaja p,
.conik-ventaja img {
	transition: background-color 0.25s ease, color 0.25s ease, filter 0.25s ease;
}

.conik-ventaja:hover {
	background-color: var(--wp--preset--color--secondary) !important;
}

.conik-ventaja:hover .wp-block-heading,
.conik-ventaja:hover p {
	color: var(--wp--preset--color--on-dark) !important;
}

.conik-ventaja:hover img {
	filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
	.conik-ventaja,
	.conik-ventaja .wp-block-heading,
	.conik-ventaja p,
	.conik-ventaja img {
		transition: none;
	}
}

/*
 * Submenú «Casas médicas» como en el sitio actual (WordPress/BeTheme):
 * caja azul con letras blancas, sin borde. El bloque de navegación solo
 * permite colores de submenú en el bloque, y esos mismos colores pintarían
 * el menú móvil desplegado; aquí se aplican solo al menú de escritorio.
 */
.conik-encabezado .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	min-width: 13.75rem !important;
	padding: var(--wp--preset--spacing--20) 0;
	border: 0 !important;
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 0.25rem 1rem color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
}

.conik-encabezado .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--base);
}

.conik-encabezado .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.conik-encabezado .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

/*
 * Anclas (#contacto): el destino no queda debajo de la barra fija.
 * theme.json no tiene ajustes de desplazamiento.
 */
[id] {
	scroll-margin-top: var(--wp--custom--header--altura);
}

/*
 * Inicio, áreas terapéuticas: al pasar el mouse la tarjeta sube un poco y el
 * ícono se acerca. theme.json no admite :hover ni transform en bloques.
 * Solo con mouse y si el usuario no pide menos movimiento.
 */
.conik-areas__tarjeta,
.conik-areas__tarjeta img {
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.conik-areas__tarjeta:hover {
		transform: translateY(-0.25rem);
		box-shadow: var(--wp--preset--shadow--elevada);
	}

	.conik-areas__tarjeta:hover img {
		transform: scale(1.06);
	}
}

/*
 * Tarjetas de entrada (blog e inicio): el título ocupa siempre dos líneas
 * (se corta con «…» si es más largo), así las tarjetas quedan parejas. La
 * imagen se acerca al pasar el mouse. El bloque título no admite límite de
 * líneas ni la imagen destacada un efecto al pasar el mouse.
 */
.conik-titulo-entrada {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: calc(2em * var(--wp--custom--line-height--heading));
	margin: 0;
}

.conik-titulo-entrada a {
	text-decoration: none;
}

.conik-titulo-entrada a:hover {
	color: var(--wp--preset--color--secondary) !important;
}

.conik-tarjeta-entrada .wp-block-post-featured-image {
	overflow: hidden;
}

.conik-tarjeta-entrada .wp-block-post-featured-image img {
	transition: transform 0.5s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.conik-tarjeta-entrada:hover .wp-block-post-featured-image img {
		transform: scale(1.05);
	}
}

.conik-tarjeta-entrada .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Categoría y fecha: la categoría toma el color del texto de los datos. */
.conik-meta a {
	color: inherit;
	text-decoration: none;
}

/*
 * Enlaces «Leer más» y «Ver todo el blog» con flecha que se mueve al pasar
 * el mouse. Ni el párrafo ni el bloque «Leer más» admiten un ícono.
 */
.conik-enlace-flecha a,
a.conik-enlace-flecha {
	font-weight: 500;
	text-decoration: none;
}

.conik-enlace-flecha a::after,
a.conik-enlace-flecha::after {
	content: "→";
	display: inline-block;
	margin-inline-start: var(--wp--preset--spacing--20);
	transition: transform 0.25s ease;
}

.conik-enlace-flecha a:hover::after,
a.conik-enlace-flecha:hover::after {
	transform: translateX(0.25rem);
}

/*
 * Casas médicas: logo centrado en la tarjeta y título siempre en dos líneas
 * para que los textos de las cinco tarjetas arranquen a la misma altura. El
 * grupo vertical estira a sus hijos y el título no admite un alto por líneas.
 */
.conik-casa-tarjeta > .conik-casa-tarjeta__logo {
	align-self: center;
	margin-inline: auto;
}

.conik-casa-tarjeta__logo img {
	display: block;
	margin-inline: auto;
	object-position: center;
}

.conik-casa-tarjeta__titulo {
	min-height: calc(2em * var(--wp--custom--line-height--heading));
	text-wrap: balance;
}

/*
 * Menú móvil abierto: la X con el mismo cuadro azul que el botón que abre el
 * menú, y las casas médicas alineadas con el resto, más chicas y en el azul
 * secundario. El bloque de navegación no expone estilos para el botón de
 * cerrar ni para el submenú dentro del menú móvil.
 */
.conik-encabezado .wp-block-navigation__responsive-container-close {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.conik-encabezado .wp-block-navigation__responsive-container-close svg {
	width: 1.75rem;
	height: 1.75rem;
}

.conik-encabezado .is-menu-open .wp-block-navigation__submenu-container {
	padding: var(--wp--preset--spacing--20) 0 0 !important;
}

.conik-encabezado .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--secondary);
}

.conik-encabezado .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	margin-top: var(--wp--preset--spacing--50);
}

/* Casa médica: contener el logo sin deformarlo; el bloque Imagen no limita su alto. */
.conik-casa-medica__logo img {
 display: block;
 width: 50%;
 margin-inline: auto;
 aspect-ratio: 4 / 3;
 object-fit: contain;
}

/* Descripción existente de Woo: las imágenes con texto heredadas no deben desbordar. */
.conik-producto__contenido img { max-width: 100%; height: auto; }

/* Casa médica: la portada celeste empieza detrás de la barra, como los covers.
 * Su inventario conserva las cuatro columnas simples del sitio original;
 * filtros y presentación siguen visibles en las plantillas del catálogo. */
.wp-site-blocks > main:has(> .entry-content > .conik-casa-medica:first-child) { padding-top: 0; }
.conik-casa-medica__tarjeta ol { padding-left: 0; list-style-position: inside; }
.wp-block-conik-productos.conik-casa-medica__inventario .conik-catalogo__filtros,
.wp-block-conik-productos.conik-casa-medica__inventario .conik-catalogo__total,
.wp-block-conik-productos.conik-casa-medica__inventario .conik-catalogo__producto p { display: none; }
.wp-block-conik-productos.conik-casa-medica__inventario .conik-catalogo__productos {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: var(--wp--preset--spacing--50);
}
.wp-block-conik-productos.conik-casa-medica__inventario .conik-catalogo__imagen { border-radius: 0; background: var(--wp--preset--color--base); }
.wp-block-conik-productos.conik-casa-medica__inventario :is(h2, h3) { font-size: var(--wp--preset--font-size--small) !important; font-weight: 400; }
@media (max-width: 781px) {
 .wp-block-conik-productos.conik-casa-medica__inventario .conik-catalogo__productos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
 .wp-block-conik-productos.conik-casa-medica__inventario .conik-catalogo__productos { grid-template-columns: minmax(0, 1fr); }
}

/* El texto de la portada ocupa la misma medida que en el sitio actual;
 * el ancho de las columnas por sí solo deja el titular en una sola línea. */
.conik-casa-medica > .wp-block-columns:first-child > .wp-block-column:last-child {
 padding-top: var(--wp--preset--spacing--50);
}
.conik-casa-medica :is(h1, .has-entrada-font-size) {
 max-width: calc(var(--wp--style--global--wide-size) * 0.57);
}
@media (max-width: 781px) {
 .conik-casa-medica > .wp-block-columns:first-child > .wp-block-column:last-child { padding-top: 0; }
}

/* Inicio en móvil: el fondo contiene cápsulas a la derecha; mostramos su zona
 * izquierda clara para que el titular y el cuerpo tengan un fondo legible. */
@media (max-width: 781px) {
 .conik-introduccion > .wp-block-cover__image-background { object-position: left center !important; }
}

/* Menú móvil: azul Pharmar y enlaces blancos sin negrita. El submenú tiene
 * una caja más oscura e indentación para distinguir las casas de las páginas;
 * el bloque Navegación no expone estos ajustes del diálogo responsive. */
.conik-encabezado .is-menu-open {
 background-color: var(--wp--preset--color--primary) !important;
 color: var(--wp--preset--color--base) !important;
}
.conik-encabezado .is-menu-open :is(.wp-block-navigation-item__content, .wp-block-button__link) {
 color: var(--wp--preset--color--base) !important;
 font-weight: 400 !important;
}
.conik-encabezado .is-menu-open .wp-block-button__link {
 background-color: transparent !important;
 padding: 0;
}
.conik-encabezado .is-menu-open .wp-block-navigation__responsive-container-content,
.conik-encabezado .is-menu-open .wp-block-navigation__container {
 align-items: stretch !important;
}
.conik-encabezado .is-menu-open .wp-block-navigation-item {
 align-items: flex-start !important;
}
.conik-encabezado .wp-block-navigation .is-menu-open ul.wp-block-navigation__submenu-container {
 align-items: flex-start !important;
 padding: var(--wp--preset--spacing--40) !important;
 margin-top: var(--wp--preset--spacing--20);
 border-radius: var(--wp--custom--radius--medium);
 background-color: var(--wp--preset--color--primary-deep) !important;
 gap: var(--wp--preset--spacing--30);
}
.conik-encabezado .is-menu-open .wp-block-navigation__responsive-container-close {
 background-color: var(--wp--preset--color--base);
 color: var(--wp--preset--color--primary);
}

/* Excelencia mantiene el cuerpo blanco al 100 % sobre su tarjeta azul. */
.conik-valores-grid .is-style-card-dark p { color: var(--wp--preset--color--base); }

/* Solo móvil: separar la primera frase de la bajada antes de «excelencia». */
@media (max-width: 599px) {
 .conik-nosotros-bajada strong::before { content: ""; display: block; }
}
@media (max-width: 781px) {
 /* El padding de las tarjetas no debe sumarse al ancho de media fila. */
 .conik-areas > .wp-block-column { box-sizing: border-box; }
}

/* Menú móvil como panel separado de los bordes. El diálogo nativo conserva
 * el cierre y el control de foco; CSS solo ajusta su tamaño y presentación. */
.conik-encabezado .wp-block-navigation__responsive-container.is-menu-open {
 inset: var(--wp--preset--spacing--40);
 top: calc(var(--wp--preset--spacing--40) + var(--wp-admin--admin-bar--height, 0px));
 width: auto;
 height: fit-content;
 max-height: calc(100dvh - var(--wp--preset--spacing--40) * 2 - var(--wp-admin--admin-bar--height, 0px));
 padding: var(--wp--preset--spacing--50);
 border-radius: var(--wp--custom--radius--large);
 overflow-y: auto;
 box-shadow: 0 0 var(--wp--preset--spacing--60) color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
}

/* WordPress fuerza el submenú abierto en móvil. menu-movil.js agrega una
 * flecha accesible independiente; la flecha nativa se conserva en escritorio. */
.conik-encabezado .is-menu-open .wp-block-navigation-item.has-child {
 display: grid !important;
 grid-template-columns: minmax(0, 1fr) auto;
 width: 100%;
}
.conik-submenu-toggle { display: none; }
.conik-encabezado .is-menu-open .has-child > .wp-block-navigation-submenu__toggle { display: none !important; }
.conik-encabezado .is-menu-open .has-child > .conik-submenu-toggle {
 display: flex;
 border: 0;
 padding: 0;
 background: transparent;
 cursor: pointer;
 align-items: center;
 justify-content: center;
 width: var(--wp--preset--spacing--50);
 height: var(--wp--preset--spacing--50);
 margin: 0;
 color: var(--wp--preset--color--base);
}
.conik-encabezado .is-menu-open .has-child > .wp-block-navigation__submenu-container {
 grid-column: 1 / -1;
}
.conik-encabezado .is-menu-open .has-child:not(.conik-submenu-abierto) > .wp-block-navigation__submenu-container {
 display: none !important;
}

.conik-submenu-toggle svg { width: var(--wp--preset--spacing--30); height: var(--wp--preset--spacing--30); stroke: currentColor; }
.conik-submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Panel móvil más compacto: un cuarto menos de ancho útil y menos espacio
 * entre enlaces, manteniendo el tamaño de letra y los controles de toque. */
.conik-encabezado .wp-block-navigation__responsive-container.is-menu-open {
 left: auto;
 width: calc((100vw - var(--wp--preset--spacing--40) * 2) * 0.75);
 box-sizing: border-box;
 padding: var(--wp--preset--spacing--40);
}
.conik-encabezado .is-menu-open .wp-block-navigation__responsive-container-content {
 padding-top: var(--wp--preset--spacing--60) !important;
 gap: var(--wp--preset--spacing--30) !important;
}
.conik-encabezado .is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
 margin-top: var(--wp--preset--spacing--20);
 gap: var(--wp--preset--spacing--20);
}

/* TranslatePress actual usa un wrapper y markup distintos del selector viejo.
 * Los párrafos agregados al renderizar el shortcode inflaban la barra; se
 * neutralizan solo dentro del selector, conservando su desplegable nativo. */
.conik-encabezado .trp-shortcode-switcher__wrapper { flex-shrink: 0; }
.conik-encabezado .trp-shortcode-switcher__wrapper p { margin: 0; }
.conik-encabezado .trp-shortcode-switcher__wrapper p:empty { display: none; }
.conik-encabezado .trp-shortcode-switcher__wrapper p:has(> svg) { display: contents; }
.conik-encabezado .trp-shortcode-switcher.trp-shortcode-anchor {
 padding: 0;
 border: 0;
 box-shadow: none;
 background: transparent;
}
.conik-encabezado .trp-shortcode-switcher .trp-current-language-item__wrapper {
 padding: 0;
}
@media (max-width: 599px) {
 .conik-encabezado .trp-language-item-name { display: none; }
 .conik-encabezado .trp-language-item { padding-inline: var(--wp--preset--spacing--20); }
}

/*
 * Botones: transición suave del hover. theme.json no admite transition.
 * La barra flotante conserva un botón compacto para no crecer su alto.
 */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.conik-encabezado .wp-block-button__link {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--nav);
}

/* Portada: el contorno blanco se rellena al pasar el mouse. El :not() iguala
 * la especificidad de la regla de núcleo que deja el contorno transparente. */
.conik-portada .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.conik-portada .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ice);
	color: var(--wp--preset--color--primary);
}

/* Contorno: mismo alto que el botón relleno (el borde de 2 px sale del relleno). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(var(--wp--preset--spacing--30) - 2px) calc(var(--wp--preset--spacing--50) - 2px);
}

/*
 * Tarjetas de entrada: fondo celeste (secundario al 7 %) desde la mitad de
 * la foto hasta «Leer más», con esquinas de 15 px (radius «tarjeta»). La foto es 3/2, así que su
 * mitad está a un tercio del ancho de la tarjeta (33.333cqw). El grupo no
 * admite un fondo que empiece a media altura.
 */
.conik-tarjeta-entrada {
	position: relative;
	isolation: isolate;
	container-type: inline-size;
	padding-bottom: var(--wp--preset--spacing--50);
}

.conik-tarjeta-entrada::before {
	content: "";
	position: absolute;
	inset: 33.333cqw 0 0;
	z-index: -1;
	border-radius: var(--wp--custom--radius--tarjeta);
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 7%, transparent);
}

.conik-tarjeta-entrada > :not(.wp-block-post-featured-image) {
	padding-inline: var(--wp--preset--spacing--40);
}

/*
 * Casa médica: misión, visión y certificaciones con el mismo hover que las
 * áreas terapéuticas de Inicio (sube un poco y toma la sombra elevada).
 */
.conik-casa-medica__tarjeta {
	box-shadow: var(--wp--preset--shadow--suave);
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.conik-casa-medica__tarjeta:hover {
		transform: translateY(-0.25rem);
		box-shadow: var(--wp--preset--shadow--elevada);
	}
}

/*
 * Menú: el enlace se marca en negrita al pasar el mouse. Con font-weight el
 * texto se ensancha y empuja a los demás enlaces; la sombra del mismo color
 * engrosa el trazo sin mover nada. theme.json no admite :hover en navegación.
 */
.conik-encabezado .wp-block-navigation-item__content {
	transition: text-shadow 0.2s ease;
}

.conik-encabezado .wp-block-navigation-item__content:hover {
	text-shadow: 0.03em 0 0 currentColor, -0.03em 0 0 currentColor;
}

/*
 * Catálogo: aire alrededor del ícono de cada categoría para que no se vea
 * enorme. El bloque del plugin recorta la imagen a sangre (cover).
 */
.conik-categorias__imagen {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--40);
}

.conik-categorias__imagen img {
	object-fit: contain;
}

/*
 * Ficha de producto: pestañas (Descripción, Presentaciones…) y su texto más
 * pequeños (pedido de Andrea, 2026-10-16). El bloque del plugin hereda el
 * tamaño Mediano y no tiene ajuste de tipografía propio.
 */
.conik-pestanas__lista [role="tab"] {
	font-size: var(--wp--preset--font-size--menor);
}

.conik-pestanas__panel,
.conik-pestanas__titulo {
	font-size: var(--wp--preset--font-size--texto-tarjeta);
}

.conik-pestanas__panel :is(h2, h3, h4) {
	font-size: var(--wp--preset--font-size--menor);
}