/*
 * PBplan — CSS a mano (último recurso, ver CLAUDE.md §2.4).
 * Todo valor sale de theme.json (--wp--preset--* / --wp--custom--*).
 * theme.json no alcanza: :hover en bloques, rejillas con cortes propios
 * (860/900/960 px del diseño), enlaces que cubren toda la tarjeta,
 * pseudo-elementos (flechas, íconos con máscara) ni posiciones absolutas.
 * Las animaciones viven aparte, en animaciones.css.
 */

:root {
	--pbplan-t: var(--wp--custom--motion--fast) ease;
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
	border-radius: 4px;
}

h1, h2, h3 {
	text-wrap: balance;
}

/* Las secciones del inicio van pegadas: se separan solo por color de fondo. */
.wp-site-blocks > *,
.wp-block-post-content > .alignfull {
	margin-block-start: 0;
}

/* Las anclas del menú no quedan tapadas por el encabezado fijo. */
[id] {
	scroll-margin-top: var(--wp--custom--header-height);
}

/* Utilidad para lectores de pantalla (contadores, botón copiar). */
.pbplan-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Íconos (Material Symbols como máscara SVG): el color sigue a currentColor,
 * así cambia en los hover sin duplicar archivos. Un bloque no puede pintar
 * un SVG con el color del texto. Para cambiar un ícono: Avanzado → Clase CSS
 * adicional, por ejemplo «pbplan-icono pbplan-icono--groups».
 * ------------------------------------------------------------------------ */
.pbplan-icono {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--wp--custom--size--icon-box);
	height: var(--wp--custom--size--icon-box);
	margin: 0;
	border-radius: var(--wp--custom--radius--icon);
	color: var(--wp--preset--color--ink);
	font-size: 0;
	transition: background-color var(--pbplan-t), color var(--pbplan-t);
}

.pbplan-icono::before,
.pbplan-flecha a::before {
	content: "";
	width: var(--wp--custom--size--icon);
	height: var(--wp--custom--size--icon);
	background-color: currentColor;
	-webkit-mask: var(--pbplan-icono) center / contain no-repeat;
	mask: var(--pbplan-icono) center / contain no-repeat;
}

.pbplan-icono--pallet { --pbplan-icono: url(../images/iconos/pallet.svg); }
.pbplan-icono--query_stats { --pbplan-icono: url(../images/iconos/query_stats.svg); }
.pbplan-icono--report { --pbplan-icono: url(../images/iconos/report.svg); }
.pbplan-icono--troubleshoot { --pbplan-icono: url(../images/iconos/troubleshoot.svg); }
.pbplan-icono--memory { --pbplan-icono: url(../images/iconos/memory.svg); }
.pbplan-icono--groups { --pbplan-icono: url(../images/iconos/groups.svg); }
.pbplan-icono--check { --pbplan-icono: url(../images/iconos/check.svg); }

/* Párrafo con un enlace seguido de flecha («All articles», «Book a call»
 * de Streamline). La variante --atras pone la flecha a la izquierda. */
.pbplan-flecha a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	--pbplan-icono: url(../images/iconos/arrow_forward.svg);
}

.pbplan-flecha a::before {
	order: 2;
	width: var(--wp--custom--size--icon-sm);
	height: var(--wp--custom--size--icon-sm);
	transition: transform var(--pbplan-t);
}

.pbplan-flecha--atras a {
	--pbplan-icono: url(../images/iconos/arrow_back.svg);
}

.pbplan-flecha--atras a::before {
	order: 0;
}

/* --------------------------------------------------------------------------
 * Botones: suben 2 px, aparece una flecha y el amarillo pasa a negro
 * (colores en theme.json). La flecha y el desplazamiento no se pueden
 * declarar en theme.json.
 * ------------------------------------------------------------------------ */
.wp-block-button__link,
.pbplan-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--wp--custom--size--button);
	transition: background-color var(--pbplan-t), border-color var(--pbplan-t), color var(--pbplan-t), transform var(--pbplan-t);
}

.wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	width: 0;
	opacity: 0;
	overflow: hidden;
	transition: width var(--pbplan-t), opacity var(--pbplan-t);
}

.wp-block-button__link:hover,
.pbplan-form .wpcf7-submit:hover {
	transform: translateY(-2px);
}

.wp-block-button__link:hover::after {
	width: 1em;
	opacity: 1;
}

.wp-block-button__link:active {
	transform: none;
}

.wp-block-button.is-style-fantasma .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-pequeno .wp-block-button__link {
	min-height: var(--wp--custom--size--button-sm);
}

.wp-block-buttons {
	gap: 12px;
}

/* --------------------------------------------------------------------------
 * Encabezado fijo: logo · menú · idioma · «Book a call».
 * ------------------------------------------------------------------------ */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 10;
	background: var(--wp--preset--color--base);
}

.pbplan-cabecera__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--wp--custom--header-height);
}

.pbplan-cabecera__fila > *,
.pbplan-cabecera__derecha > * {
	margin: 0;
}

.pbplan-logo {
	flex: none;
}

.pbplan-logo img {
	display: block;
	width: auto;
	height: var(--wp--custom--size--logo);
	border-radius: 0;
}

.pbplan-cabecera__derecha {
	display: flex;
	align-items: center;
	gap: 28px;
}

.pbplan-cabecera__cta .wp-block-button__link {
	white-space: nowrap;
}

.pbplan-nav .wp-block-navigation__container {
	gap: 28px;
}

.pbplan-nav {
	margin-right: 8px;
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 500;
}

.pbplan-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.pbplan-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--ink);
}

/* Selector de idioma: bloque Detalles con el selector de Polylang adentro
 * (funciona sin JS); interfaz.js lo cierra al hacer clic fuera o con
 * Escape. Globo y flecha son máscaras para usar el color de tinta. */
.pbplan-idioma {
	position: relative;
	margin: 0;
}

.pbplan-idioma summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	height: var(--wp--custom--size--control);
	padding: 0 12px 0 10px;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	list-style: none;
	cursor: pointer;
	transition: border-color var(--pbplan-t);
}

.pbplan-idioma summary::-webkit-details-marker {
	display: none;
}

.pbplan-idioma summary::before,
.pbplan-idioma summary::after {
	content: "";
	flex: none;
	background: currentColor;
}

.pbplan-idioma summary::before {
	order: -1;
	width: 15px;
	height: 15px;
	-webkit-mask: url(../images/globo.svg) center / contain no-repeat;
	mask: url(../images/globo.svg) center / contain no-repeat;
}

.pbplan-idioma summary::after {
	width: 10px;
	height: 10px;
	-webkit-mask: url(../images/chevron.svg) center / contain no-repeat;
	mask: url(../images/chevron.svg) center / contain no-repeat;
	transition: transform var(--pbplan-t);
}

.pbplan-idioma[open] summary::after {
	transform: rotate(180deg);
}

.pbplan-idioma summary:hover,
.pbplan-idioma[open] summary {
	border-color: var(--wp--preset--color--ink);
}

.pbplan-idioma ul {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 30;
	min-width: 168px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--wp--preset--color--base);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--icon);
}

.pbplan-idioma li {
	margin: 0;
}

.pbplan-idioma li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}

.pbplan-idioma li a:hover {
	background: var(--wp--preset--color--soft);
	color: var(--wp--preset--color--ink);
}

/* Código del idioma a la derecha y punto amarillo en el actual. */
.pbplan-idioma li a::before {
	order: 2;
	margin-left: auto;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.08em;
}

.pbplan-idioma .lang-item-en a::before { content: "EN"; }
.pbplan-idioma .lang-item-es a::before { content: "ES"; }
.pbplan-idioma .lang-item-de a::before { content: "DE"; }

.pbplan-idioma .current-lang a {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.pbplan-idioma .current-lang a::after {
	content: "";
	order: 3;
	width: var(--wp--custom--size--dot);
	height: var(--wp--custom--size--dot);
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
}

@media (max-width: 900px) {
	.pbplan-nav {
		display: none;
	}
}

/* El grupo de botones trae display:flex del diseño flex de WordPress. */
@media (max-width: 560px) {
	.wp-block-buttons.pbplan-cabecera__cta {
		display: none;
	}

	.pbplan-logo img {
		height: var(--wp--custom--size--logo-sm);
	}

	.pbplan-cabecera__derecha {
		gap: 8px;
	}
}

/* --------------------------------------------------------------------------
 * Secciones: bandas de color sin líneas. Una sección blanca solo tiene
 * relleno arriba; una banda de color, arriba y abajo, y se separa de la
 * sección blanca anterior con un margen igual.
 * ------------------------------------------------------------------------ */
.pbplan-seccion {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: 0;
}

.pbplan-banda {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}

.pbplan-seccion + .pbplan-banda {
	margin-top: var(--wp--preset--spacing--80) !important;
}

/* Cabeza de sección: rótulo, h2 y bajada a 16 px entre sí. */
.pbplan-cabeza {
	display: grid;
	gap: 16px;
	max-width: 44rem;
	margin-bottom: var(--wp--custom--head-gap) !important;
}

.pbplan-cabeza > *,
.pbplan-seccion h2,
.pbplan-banda h2 {
	margin: 0;
}

.pbplan-cabeza p:not(.is-style-rotulo) {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
}

/* Rejillas del diseño (3 o 4 columnas con cortes propios). */
.pbplan-rejilla {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--grid-gap);
}

.pbplan-rejilla > * {
	margin: 0 !important;
	min-width: 0;
}

/* --------------------------------------------------------------------------
 * Portada (hero)
 * ------------------------------------------------------------------------ */
.pbplan-portada {
	position: relative;
	overflow: hidden;
	padding-top: var(--wp--custom--hero-top);
	padding-bottom: var(--wp--preset--spacing--80);
}

.pbplan-portada__texto {
	position: relative;
	z-index: 1;
	max-width: calc((100% - var(--wp--custom--hero-gap)) * 7 / 12);
}

.pbplan-portada__texto > * {
	margin: 0;
}

.pbplan-portada h1 {
	font-size: var(--wp--preset--font-size--portada);
}

/* «Sell more.»: el amarillo es un ::before para poder pintarlo de
 * izquierda a derecha (animaciones.css). */
.pbplan-portada h1 mark {
	position: relative;
	z-index: 0;
	display: inline-block;
	padding: 0 0.1em 0.02em;
	margin-top: 0.06em;
	background: none !important;
	color: inherit;
}

.pbplan-portada h1 mark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--color--brand);
	transform-origin: left center;
}

.pbplan-portada__bajada {
	margin-top: 32px !important;
	max-width: 33em;
	font-size: var(--wp--preset--font-size--bajada);
	line-height: 1.55;
}

.pbplan-portada .wp-block-buttons {
	margin-top: 40px !important;
}

/* El árbol se apoya en el borde inferior de la portada, detrás del texto. */
.pbplan-arbol {
	position: absolute;
	right: clamp(0px, 4vw, 64px);
	bottom: -1px;
	z-index: 0;
	width: var(--wp--custom--size--tree);
	max-width: none !important;
	margin: 0 !important;
	pointer-events: none;
}

.pbplan-arbol svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.pbplan-arbol path {
	fill: var(--wp--preset--color--warm);
}

@media (max-width: 860px) {
	.pbplan-portada__texto {
		max-width: none;
	}

	.pbplan-arbol {
		right: -8%;
		bottom: 0;
		width: 70%;
	}
}

/* --------------------------------------------------------------------------
 * What I solve: tarjetas blancas que toman borde amarillo.
 * ------------------------------------------------------------------------ */
.pbplan-problema {
	display: grid;
	align-content: start;
	gap: 14px;
	padding: var(--wp--custom--card-padding-lg);
	border: var(--wp--custom--border--strong) solid transparent;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	transition: border-color var(--pbplan-t), transform var(--pbplan-t);
}

.pbplan-problema > * {
	margin: 0;
}

.pbplan-problema:hover {
	border-color: var(--wp--preset--color--brand);
	transform: translateY(-4px);
}

.pbplan-problema .pbplan-icono {
	margin-bottom: 12px;
	background: var(--wp--preset--color--brand-tint);
}

.pbplan-problema:hover .pbplan-icono {
	background: var(--wp--preset--color--brand);
}

.pbplan-problema h3 {
	font-size: 21px;
}

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

/* --------------------------------------------------------------------------
 * How I help: toda la tarjeta es un enlace (el «Book a call» se estira
 * sobre ella); la flecha del círculo gira y el fondo pasa a amarillo claro.
 * La destacada es negra y se vuelve amarilla.
 * ------------------------------------------------------------------------ */
.pbplan-servicio {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: var(--wp--custom--card-padding);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--soft);
	color: var(--wp--preset--color--ink);
	transition: background-color var(--pbplan-t);
}

.pbplan-servicio > * {
	margin: 0;
}

.pbplan-servicio:hover {
	background: var(--wp--preset--color--brand-tint);
}

.pbplan-servicio .pbplan-icono {
	margin-bottom: 18px;
	background: var(--wp--preset--color--base);
}

/* Círculo con flecha arriba a la derecha (decorativo): ::before es el
 * círculo, ::after la flecha. Al pasar el mouse se rellena y gira. */
.pbplan-servicio::before,
.pbplan-servicio::after {
	content: "";
	position: absolute;
	top: calc(var(--wp--custom--card-padding) + (var(--wp--custom--size--icon-box) - var(--wp--custom--size--arrow)) / 2);
	right: var(--wp--custom--card-padding);
	width: var(--wp--custom--size--arrow);
	height: var(--wp--custom--size--arrow);
	opacity: 0.35;
	transition: opacity var(--pbplan-t), background-color var(--pbplan-t), border-color var(--pbplan-t), transform var(--pbplan-t);
}

.pbplan-servicio::before {
	box-sizing: border-box;
	border: var(--wp--custom--border--strong) solid currentColor;
	border-radius: 50%;
}

.pbplan-servicio::after {
	background-color: currentColor;
	-webkit-mask: url(../images/iconos/arrow_forward.svg) center / 24px no-repeat;
	mask: url(../images/iconos/arrow_forward.svg) center / 24px no-repeat;
}

.pbplan-servicio:hover::before {
	opacity: 1;
	border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--brand);
	transform: rotate(-45deg);
}

.pbplan-servicio:hover::after {
	opacity: 1;
	background-color: var(--wp--preset--color--ink);
	transform: rotate(-45deg);
}

.pbplan-servicio h3 {
	font-size: 23px;
}

.pbplan-servicio p {
	font-size: var(--wp--preset--font-size--regular);
	line-height: 1.7;
}

.pbplan-servicio__mas {
	margin-top: auto !important;
	padding-top: 18px;
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 600;
}

.pbplan-servicio__mas a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--brand), var(--wp--preset--color--brand));
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding-bottom: 2px;
	transition: background-size 0.25s ease;
}

.pbplan-servicio:hover .pbplan-servicio__mas a {
	background-size: 100% 2px;
}

/* Enlace estirado: el área de clic es toda la tarjeta. */
.pbplan-estirado a::after,
.pbplan-tarjeta-entrada .wp-block-post-title a::after,
.pbplan-destacado .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.pbplan-servicio--destacado {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.pbplan-servicio--destacado h3 {
	color: var(--wp--preset--color--base);
}

.pbplan-servicio--destacado p {
	color: var(--wp--preset--color--on-ink-soft);
}

.pbplan-servicio--destacado .pbplan-icono {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
}

.pbplan-servicio--destacado:hover {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
}

.pbplan-servicio--destacado:hover h3,
.pbplan-servicio--destacado:hover p {
	color: var(--wp--preset--color--ink);
}

.pbplan-servicio--destacado:hover .pbplan-icono {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--brand);
}

.pbplan-servicio--destacado:hover::before {
	border-color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--ink);
}

.pbplan-servicio--destacado:hover::after {
	background-color: var(--wp--preset--color--brand);
}

.pbplan-servicio--destacado .pbplan-servicio__mas a {
	background-image: linear-gradient(var(--wp--preset--color--ink), var(--wp--preset--color--ink));
}

@media (max-width: 900px) {
	.pbplan-servicios {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * Streamline: cifras en una tira blanca, hover azul claro.
 * ------------------------------------------------------------------------ */
.pbplan-sl-cabeza {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 24px clamp(40px, 6vw, 88px);
	align-items: end;
}

.pbplan-sl-cabeza > * {
	margin: 0 !important;
	min-width: 0;
}

.pbplan-sl-cabeza > div {
	display: grid;
	gap: 18px;
}

.pbplan-sl-cabeza > div > * {
	margin: 0;
}

.pbplan-sl-cabeza > p {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
}

/* El rótulo «The solution I implement» va arriba del logo (pedido del
 * cliente, oct. 2026). Se reordena con CSS para que cambie también en las
 * páginas ya creadas, sin editarlas una por una. */
.pbplan-sl-cabeza .is-style-rotulo {
	order: -1;
}

.pbplan-sl-logo {
	margin-bottom: 12px !important;
}

.pbplan-sl-logo img {
	display: block;
	width: auto;
	height: var(--wp--custom--size--logo);
	border-radius: 0;
}

.pbplan-banda-sl .is-style-rotulo {
	color: var(--wp--preset--color--sl-blue);
}

.pbplan-sl-cifras {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin-top: var(--wp--custom--head-gap) !important;
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--base);
	overflow: hidden;
}

.pbplan-sl-cifra {
	display: grid;
	align-content: start;
	gap: 12px;
	padding: var(--wp--custom--card-padding-lg);
	transition: background-color var(--pbplan-t);
}

.pbplan-sl-cifra > * {
	margin: 0;
}

.pbplan-sl-cifra + .pbplan-sl-cifra {
	box-shadow: inset 1px 0 0 var(--wp--preset--color--sl-hover);
}

.pbplan-sl-cifra:hover {
	background: var(--wp--preset--color--sl-hover);
}

.pbplan-sl-cifra .is-style-rotulo {
	color: var(--wp--preset--color--sl-blue);
}

.pbplan-sl-cifra__n {
	color: var(--wp--preset--color--sl-blue);
	font-size: var(--wp--preset--font-size--dato);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 0.95;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pbplan-sl-cifra__n mark {
	margin-left: 4px;
	background: none !important;
	color: inherit;
	font-size: 0.38em;
	letter-spacing: -0.01em;
}

.pbplan-sl-cifra p:last-child {
	max-width: 22ch;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--compact);
	line-height: 1.5;
}

/* Llamado en píldora azul: toda la píldora es el enlace. */
.pbplan-sl-cta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	max-width: 760px;
	margin: clamp(32px, 4vw, 48px) auto 0 !important;
	padding: 14px 14px 14px 32px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--sl-blue);
	color: var(--wp--preset--color--base);
	transition: background-color var(--pbplan-t);
}

.pbplan-sl-cta:hover {
	background: var(--wp--preset--color--sl-blue-deep);
}

.pbplan-sl-cta > * {
	margin: 0 !important;
}

.pbplan-sl-cta__texto {
	display: grid;
	gap: 2px;
	flex: 1 1 20rem;
	min-width: 0;
}

.pbplan-sl-cta__texto > * {
	margin: 0;
}

.pbplan-sl-cta__texto p:first-child {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: -0.015em;
}

.pbplan-sl-cta__texto p + p {
	color: var(--wp--preset--color--on-blue-soft);
	font-size: 13.5px;
	line-height: 1.45;
}

.pbplan-sl-cta__boton {
	white-space: nowrap;
}

.pbplan-sl-cta__boton a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: var(--wp--custom--size--arrow);
	padding: 0 20px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--sl-blue);
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--pbplan-t), color var(--pbplan-t);
}

.pbplan-sl-cta__boton a::before {
	width: 20px;
	height: 20px;
}

.pbplan-sl-cta .pbplan-estirado a::after {
	border-radius: var(--wp--custom--radius--pill);
}

.pbplan-sl-cta:hover .pbplan-sl-cta__boton a {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
}

.pbplan-sl-cta:hover .pbplan-flecha a::before {
	transform: translateX(3px);
}

.pbplan-sl-cta:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--sl-blue);
	outline-offset: 4px;
}

.pbplan-sl-cta a:focus-visible {
	outline: none;
}

@media (max-width: 900px) {
	.pbplan-sl-cabeza {
		grid-template-columns: 1fr;
	}

	.pbplan-sl-cifras {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pbplan-sl-cifra:nth-child(3) {
		box-shadow: inset 0 1px 0 var(--wp--preset--color--sl-hover);
	}

	.pbplan-sl-cifra:nth-child(4) {
		box-shadow: inset 1px 1px 0 var(--wp--preset--color--sl-hover);
	}

	.pbplan-sl-cta {
		padding: 20px;
		border-radius: var(--wp--custom--radius--large);
	}
}

/* --------------------------------------------------------------------------
 * Experience: cifras grandes (peso 600) con «+» y «×» en dorado. El signo es
 * un resaltado (mark) para que se edite como texto.
 * ------------------------------------------------------------------------ */
.pbplan-experiencia {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.pbplan-cifra {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: var(--wp--custom--card-padding);
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--base);
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.pbplan-cifra > * {
	margin: 0;
}

.pbplan-cifra:hover {
	background: var(--wp--preset--color--brand);
	transform: translateY(-6px);
}

.pbplan-cifra__n {
	display: flex;
	align-items: flex-start;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--cifra);
	font-weight: 600;
	letter-spacing: -0.06em;
	line-height: 0.8;
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}

.pbplan-cifra__n mark {
	margin: 0.08em 0 0 0.12em;
	background: none !important;
	font-size: 0.34em;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	transition: color 0.25s ease;
}

.pbplan-cifra:hover .pbplan-cifra__n mark {
	color: var(--wp--preset--color--ink) !important;
}

/* Línea fina entre la cifra y el texto (borde del párrafo). */
.pbplan-cifra p:last-child {
	max-width: 24ch;
	margin-top: 8px;
	padding-top: 22px;
	border-top: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--regular);
	line-height: 1.55;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.pbplan-cifra:hover p:last-child {
	border-top-color: var(--wp--preset--color--ink-translucent);
	color: var(--wp--preset--color--ink);
}

@media (max-width: 960px) {
	.pbplan-experiencia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.pbplan-experiencia {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * Pablo Ochoa: foto 4:5 con un bloque amarillo detrás, abajo a la izquierda.
 * ------------------------------------------------------------------------ */
.pbplan-sobre-mi {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

.pbplan-sobre-mi > * {
	margin: 0 !important;
	min-width: 0;
}

.pbplan-retrato {
	position: relative;
	isolation: isolate;
}

.pbplan-retrato img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.pbplan-retrato::after {
	content: "";
	position: absolute;
	left: -16px;
	bottom: -16px;
	z-index: -1;
	width: 45%;
	height: 45%;
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--brand);
}

.pbplan-sobre-mi__texto {
	display: grid;
	gap: 24px;
}

.pbplan-sobre-mi__texto > * {
	margin: 0;
}

.pbplan-sobre-mi__texto h2 {
	margin-bottom: 8px;
}

.pbplan-sobre-mi__texto p {
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--loose);
}

.pbplan-sobre-mi__texto h2 + p {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--entrada);
	line-height: 1.6;
}

@media (max-width: 860px) {
	.pbplan-sobre-mi {
		grid-template-columns: 1fr;
	}

	.pbplan-retrato {
		max-width: 420px;
		margin-left: 16px !important;
	}
}

/* --------------------------------------------------------------------------
 * Blog: tarjetas de entrada (inicio, índice y relacionados).
 * ------------------------------------------------------------------------ */
.pbplan-blog-cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 20px 40px;
	margin-bottom: var(--wp--custom--head-gap) !important;
}

.pbplan-blog-cabeza > * {
	margin: 0 !important;
}

.pbplan-blog-cabeza .pbplan-cabeza {
	margin-bottom: 0 !important;
	max-width: 40rem;
}

.pbplan-enlace-flecha a {
	padding-bottom: 4px;
	border-bottom: 2px solid var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--pbplan-t);
}

.pbplan-enlace-flecha a:hover {
	border-bottom-color: var(--wp--preset--color--ink);
}

.pbplan-enlace-flecha a:hover::before,
.pbplan-tarjeta-entrada:hover .wp-block-read-more::before {
	transform: translateX(4px);
}

.pbplan-entradas .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--custom--grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pbplan-entradas .wp-block-post-template > li {
	display: flex;
	margin: 0;
	min-width: 0;
}

.pbplan-tarjeta-entrada {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	padding: var(--wp--custom--card-padding);
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--soft);
	color: var(--wp--preset--color--ink);
	transition: background-color var(--pbplan-t), transform var(--pbplan-t);
}

.pbplan-tarjeta-entrada > * {
	margin: 0;
}

.pbplan-tarjeta-entrada:hover {
	background: var(--wp--preset--color--brand-tint);
	transform: translateY(-4px);
}

.pbplan-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.pbplan-meta > * {
	margin: 0;
}

/* La categoría queda por encima del enlace estirado para poder abrirla. */
.pbplan-meta .wp-block-post-terms {
	position: relative;
	z-index: 2;
}

.pbplan-tarjeta-entrada .wp-block-post-title a {
	text-decoration: none;
}

/* En la cuadrícula de categoría el título es h2 (va bajo el h1): el peso
   se fija aquí para que se vea igual que el h3 de las otras listas. */
.pbplan-tarjeta-entrada .wp-block-post-title {
	margin-top: 28px;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--tarjeta);
	letter-spacing: var(--wp--custom--tracking--card);
	line-height: var(--wp--custom--line-height--snug);
}

.pbplan-tarjeta-entrada .wp-block-post-excerpt__excerpt {
	margin: 0;
	line-height: var(--wp--custom--line-height--body);
}

.pbplan-tarjeta-entrada .wp-block-read-more,
.pbplan-tarjeta-entrada .wp-block-post-date {
	margin-top: auto;
	padding-top: 18px;
}

.pbplan-tarjeta-entrada .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 600;
	text-decoration: none;
	--pbplan-icono: url(../images/iconos/arrow_forward.svg);
}

.pbplan-tarjeta-entrada .wp-block-read-more::before {
	content: "";
	order: 2;
	width: var(--wp--custom--size--icon-sm);
	height: var(--wp--custom--size--icon-sm);
	background-color: currentColor;
	-webkit-mask: var(--pbplan-icono) center / contain no-repeat;
	mask: var(--pbplan-icono) center / contain no-repeat;
	transition: transform var(--pbplan-t);
}

.pbplan-relacionados .pbplan-tarjeta-entrada {
	background: var(--wp--preset--color--base);
}

.pbplan-relacionados .pbplan-tarjeta-entrada:hover {
	background: var(--wp--preset--color--brand-tint);
}

@media (max-width: 900px) {
	.pbplan-entradas .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.pbplan-tarjeta-entrada .wp-block-post-title {
		margin-top: 12px;
	}
}

/* Índice del blog: título, filtros por categoría (enlaces a cada archivo). */
.pbplan-blog-portada {
	padding-top: var(--wp--custom--blog-top);
	padding-bottom: clamp(32px, 4vw, 48px);
}

.pbplan-blog-portada__texto {
	display: grid;
	gap: 18px;
}

.pbplan-blog-portada__texto > * {
	margin: 0;
}

.pbplan-blog-portada h1 {
	font-size: var(--wp--preset--font-size--portada-blog);
}

.pbplan-blog-portada__bajada {
	max-width: 36em;
	font-size: clamp(17px, 1.8vw, 20px);
	line-height: 1.6;
}

/* Filtros: «All» (párrafo) + bloque Categorías, todo en una fila de píldoras. */
.pbplan-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px !important;
}

.pbplan-filtros > p,
.pbplan-filtros ul,
.pbplan-filtros li {
	display: contents;
}

.pbplan-filtros a {
	display: inline-flex;
	align-items: center;
	height: var(--wp--custom--size--control);
	padding: 0 16px;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: all var(--pbplan-t);
}

.pbplan-filtros a:hover {
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

body.blog .pbplan-filtros__todos a,
.pbplan-filtros .current-cat > a {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.pbplan-blog-cuerpo {
	padding-bottom: var(--wp--preset--spacing--80);
}

/* Entrada destacada: arte amarillo (o la portada del artículo) + texto. */
.pbplan-destacado {
	margin-bottom: var(--wp--custom--grid-gap) !important;
}

.pbplan-destacado .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pbplan-destacado__tarjeta {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	padding: 16px;
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--brand-tint);
	transition: background-color var(--pbplan-t);
}

.pbplan-destacado__tarjeta > * {
	margin: 0 !important;
}

.pbplan-destacado__tarjeta:hover {
	background: var(--wp--preset--color--brand-tint-hover);
}

/* Si la entrada no tiene imagen destacada, se ve el árbol sobre amarillo. */
.pbplan-arte {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--pollo);
}

/* El árbol es una máscara: así toma el color de los tokens. */
.pbplan-arte::before,
.pbplan-portada-articulo::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2%;
	width: 62%;
	aspect-ratio: 600 / 570;
	background-color: var(--wp--preset--color--base);
	opacity: 0.55;
	transform: translateX(-50%);
	-webkit-mask: url(../images/arbol.svg) center bottom / contain no-repeat;
	mask: url(../images/arbol.svg) center bottom / contain no-repeat;
}

.pbplan-arte .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.pbplan-arte .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.pbplan-destacado__texto {
	display: grid;
	gap: 16px;
	padding: 8px 24px 8px 0;
	min-width: 0;
}

.pbplan-destacado__texto > * {
	margin: 0;
}

.pbplan-destacado .wp-block-post-title {
	font-size: var(--wp--preset--font-size--destacado);
	letter-spacing: -0.03em;
	line-height: var(--wp--custom--line-height--heading);
}

.pbplan-destacado .wp-block-post-title a {
	text-decoration: none;
}

.pbplan-destacado .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

/* Firma: avatar redondo · nombre · fecha. */
.pbplan-firma {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
}

.pbplan-firma > * {
	margin: 0;
}

.pbplan-firma .wp-block-avatar img {
	display: block;
	width: var(--wp--custom--size--avatar-sm);
	height: var(--wp--custom--size--avatar-sm);
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
}

.pbplan-firma .wp-block-post-date {
	color: inherit;
	font-size: inherit;
}

.pbplan-firma .wp-block-post-author-name + .wp-block-post-date::before {
	content: "· ";
}

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

	.pbplan-destacado__texto {
		padding: 0 8px 16px;
	}
}

/* Franja «¿Tienes una pregunta…?» */
.pbplan-llamado {
	padding-top: var(--wp--custom--band);
	padding-bottom: var(--wp--custom--band);
}

.pbplan-llamado__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
}

.pbplan-llamado__fila > * {
	margin: 0 !important;
}

.pbplan-llamado h2 {
	max-width: 24ch;
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.03em;
}

.wp-block-query-pagination {
	margin-top: var(--wp--custom--head-gap);
	gap: 16px;
}

.wp-block-query-pagination a {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Artículo: cuerpo a 720 px.
 * ------------------------------------------------------------------------ */
.pbplan-articulo {
	padding-top: var(--wp--custom--article-top);
}

.pbplan-articulo__cabeza > * {
	margin: 0;
}

.pbplan-volver {
	margin-bottom: 40px !important;
}

.pbplan-volver a {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.pbplan-volver a:hover {
	color: var(--wp--preset--color--ink);
}

.pbplan-volver a:hover::before {
	transform: translateX(-3px);
}

.pbplan-articulo .pbplan-meta {
	justify-content: flex-start;
	gap: 16px;
	margin-bottom: 18px;
}

.pbplan-articulo h1 {
	margin-bottom: 24px;
	font-size: var(--wp--preset--font-size--titular);
	letter-spacing: -0.04em;
	line-height: 1.05;
}

.pbplan-firma--grande {
	margin-top: 8px;
	line-height: 1.4;
}

.pbplan-firma--grande .wp-block-avatar img {
	width: var(--wp--custom--size--avatar-md);
	height: var(--wp--custom--size--avatar-md);
}

.pbplan-firma--grande .pbplan-firma__texto > * {
	margin: 0;
}

.pbplan-firma--grande .wp-block-post-author-name {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

.pbplan-firma--grande .wp-block-post-author-name + .wp-block-post-date::before {
	content: none;
}

.pbplan-portada-articulo {
	margin-block: clamp(40px, 5vw, 64px) !important;
	aspect-ratio: 21 / 9;
	border-radius: var(--wp--custom--radius--xl);
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--brand-tint);
}

.pbplan-portada-articulo::before {
	bottom: -1%;
	width: 34%;
	background-color: var(--wp--preset--color--pollo);
	opacity: 0.5;
}

.pbplan-portada-articulo .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
}

.pbplan-portada-articulo .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Cuerpo del artículo. */
.pbplan-cuerpo {
	padding-bottom: 48px;
}

.pbplan-cuerpo > * {
	margin-block: 0;
}

.pbplan-cuerpo > * + * {
	margin-block-start: 22px;
}

.pbplan-cuerpo p,
.pbplan-cuerpo li {
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--loose);
}

/* El primer párrafo es la entrada: más grande y en tinta. */
.pbplan-cuerpo > p:first-child {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--entrada);
	line-height: 1.6;
}

.pbplan-cuerpo h2 {
	margin-block-start: 42px;
	font-size: var(--wp--preset--font-size--subtitulo);
}

.pbplan-cuerpo ul,
.pbplan-cuerpo ol {
	display: grid;
	gap: 10px;
	padding-left: 20px;
}

.pbplan-cuerpo li::marker {
	color: var(--wp--preset--color--gold);
}

.pbplan-cuerpo strong,
.pbplan-cuerpo b {
	color: var(--wp--preset--color--ink);
}

.pbplan-cuerpo .wp-block-quote {
	margin-block: 38px 16px;
}

.pbplan-cuerpo .wp-block-quote p {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.pbplan-cuerpo a {
	text-decoration-color: var(--wp--preset--color--brand);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* «Key takeaway» (pattern Entrada – Idea clave). */
.pbplan-clave {
	display: grid;
	gap: 8px;
	margin-top: 34px !important;
	padding: 28px 32px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--soft);
}

.pbplan-clave > * {
	margin: 0 !important;
}

.pbplan-cuerpo .pbplan-clave .is-style-rotulo {
	font-size: 12px;
	letter-spacing: 0.2em;
	line-height: 1.6;
}

.pbplan-cuerpo .pbplan-clave p:not(.is-style-rotulo) {
	font-size: var(--wp--preset--font-size--regular);
}

/* Ficha del autor. */
.pbplan-autor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 24px;
	padding-block: 40px;
	margin-bottom: var(--wp--preset--spacing--80) !important;
}

.pbplan-autor > * {
	margin: 0 !important;
}

.pbplan-autor .wp-block-avatar img {
	display: block;
	width: var(--wp--custom--size--avatar-lg);
	height: var(--wp--custom--size--avatar-lg);
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
}

.pbplan-autor__texto {
	display: grid;
	flex: 1 1 18rem;
	gap: 4px;
	min-width: 0;
}

.pbplan-autor__texto > * {
	margin: 0;
}

.pbplan-autor .wp-block-post-author-name {
	font-weight: 700;
}

.pbplan-autor .wp-block-post-author-biography {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--compact);
	line-height: 1.6;
}

.pbplan-relacionados h2 {
	margin-bottom: 40px !important;
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
 * Contacto: texto + formulario (Contact Form 7) + datos.
 * ------------------------------------------------------------------------ */
.pbplan-contacto {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(40px, 6vw, 72px) clamp(48px, 8vw, 128px);
	align-items: start;
}

.pbplan-contacto > * {
	margin: 0 !important;
	min-width: 0;
}

.pbplan-contacto__texto {
	display: grid;
	gap: 22px;
	align-content: start;
}

.pbplan-contacto__texto > * {
	margin: 0;
}

.pbplan-contacto h2 {
	font-size: var(--wp--preset--font-size--contacto);
	letter-spacing: -0.035em;
}

.pbplan-contacto__texto p:last-child {
	max-width: 28em;
	line-height: 1.7;
}

.pbplan-datos {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px clamp(24px, 4vw, 64px);
	margin-top: clamp(24px, 4vw, 48px) !important;
}

.pbplan-datos > * {
	margin: 0 !important;
}

.pbplan-dato {
	display: grid;
	align-content: start;
	gap: 6px;
	min-width: 0;
}

.pbplan-dato > * {
	margin: 0 !important;
}

.pbplan-dato .is-style-rotulo {
	font-size: 12px;
	letter-spacing: 0.2em;
}

.pbplan-dato__valor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	overflow-wrap: anywhere;
}

.pbplan-dato__valor > * {
	margin: 0 !important;
}

.pbplan-dato__valor p,
.pbplan-dato > p:not(.is-style-rotulo) {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.pbplan-dato a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--brand);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.pbplan-dato a:hover {
	text-decoration-color: var(--wp--preset--color--ink);
}

/* Botón «Copy»: en interfaz.js copia el correo en lugar de abrir mailto. */
.pbplan-copiar .wp-block-button__link {
	min-height: 0;
	padding: 6px 12px;
	border: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 16px;
	text-decoration: none;
}

.pbplan-copiar .wp-block-button__link:hover {
	transform: none;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
}

.pbplan-copiar .wp-block-button__link::after {
	content: none;
}

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

@media (max-width: 760px) {
	.pbplan-datos {
		grid-template-columns: 1fr;
	}
}

/* Formulario: los campos de Contact Form 7 no son bloques y theme.json no
 * los alcanza. CF7 envuelve cada línea en <p> y agrega <br>. */
.pbplan-form {
	padding-top: 8px;
}

.pbplan-form p {
	margin: 0;
}

.pbplan-form br {
	display: none;
}

.pbplan-form__rejilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 32px;
}

.pbplan-form__rejilla > p {
	display: contents;
}

.pbplan-form label {
	display: grid;
	gap: 4px;
	min-width: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
}

.pbplan-form__completo {
	grid-column: 1 / -1;
}

.pbplan-form .wpcf7-form-control-wrap {
	display: block;
}

.pbplan-form input:not([type="submit"]),
.pbplan-form select {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--wp--custom--size--field);
	padding: 0 2px;
	border: 0;
	border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--field-line);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: 500 var(--wp--preset--font-size--medium) / 1.4 var(--wp--preset--font-family--body);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--pbplan-t);
}

.pbplan-form select {
	padding-right: 28px;
	cursor: pointer;
}

/* Flecha del select (máscara, para usar el color de tinta). */
.pbplan-form .wpcf7-form-control-wrap:has(select) {
	position: relative;
}

.pbplan-form .wpcf7-form-control-wrap:has(select)::after {
	content: "";
	position: absolute;
	top: calc(var(--wp--custom--size--field) / 2 - 4px);
	right: 4px;
	width: 12px;
	height: 8px;
	background: var(--wp--preset--color--ink);
	pointer-events: none;
	-webkit-mask: url(../images/chevron.svg) center / contain no-repeat;
	mask: url(../images/chevron.svg) center / contain no-repeat;
}

.pbplan-form ::placeholder {
	color: var(--wp--preset--color--placeholder);
	opacity: 1;
}

.pbplan-form input:hover,
.pbplan-form select:hover {
	border-bottom-color: var(--wp--preset--color--ink);
}

.pbplan-form input:focus,
.pbplan-form select:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--ink);
	box-shadow: 0 1px 0 var(--wp--preset--color--ink);
}

.pbplan-form .wpcf7-not-valid {
	border-bottom-color: var(--wp--preset--color--error) !important;
}

.pbplan-form .wpcf7-not-valid-tip {
	margin-top: 4px;
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--caption);
}

.pbplan-form__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 48px;
}

.pbplan-form__pie > p {
	display: contents;
}

.pbplan-form .wpcf7-submit {
	padding: 0 26px;
	border: var(--wp--custom--border--strong) solid var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
	font: 600 var(--wp--preset--font-size--regular) / 20px var(--wp--preset--font-family--body);
	cursor: pointer;
}

.pbplan-form .wpcf7-submit:hover {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--brand);
}

.pbplan-form .wpcf7-spinner {
	margin: 0;
}

.pbplan-form__nota {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--caption);
}

/* Mensaje de gracias en la misma página: Contact Form 7 marca el formulario
 * con .sent al enviarse. El aviso propio de CF7 queda solo para lectores de
 * pantalla, para no repetir el mensaje en pantalla. */
.pbplan-form__gracias {
	display: none;
	justify-items: start;
	gap: 10px;
	padding: 8px 0;
}

.pbplan-form__gracias > p {
	display: contents;
}

.pbplan-form .sent .pbplan-form__rejilla,
.pbplan-form .sent .pbplan-form__pie {
	display: none;
}

.pbplan-form .sent .pbplan-form__gracias {
	display: grid;
}

.pbplan-form__check {
	display: grid;
	place-items: center;
	width: var(--wp--custom--size--check);
	height: var(--wp--custom--size--check);
	margin-bottom: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
	--pbplan-icono: url(../images/iconos/check.svg);
}

.pbplan-form__check::before {
	content: "";
	width: 24px;
	height: 24px;
	background: var(--wp--preset--color--ink);
	-webkit-mask: var(--pbplan-icono) center / contain no-repeat;
	mask: var(--pbplan-icono) center / contain no-repeat;
}

.pbplan-form__gracias b {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--tarjeta);
	letter-spacing: var(--wp--custom--tracking--card);
}

.pbplan-form__gracias span:last-child {
	color: var(--wp--preset--color--body);
}

.pbplan-form .wpcf7-response-output {
	margin: 24px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--caption);
}

.pbplan-form .sent .wpcf7-response-output {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

@media (max-width: 560px) {
	.pbplan-form__rejilla {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* --------------------------------------------------------------------------
 * Pie
 * ------------------------------------------------------------------------ */
.pbplan-pie {
	padding-top: 40px;
	padding-bottom: 40px;
}

.pbplan-pie__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
}

.pbplan-pie__fila > * {
	margin: 0 !important;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.pbplan-pie__logo img {
	display: block;
	width: auto;
	height: var(--wp--custom--size--logo-footer);
	border-radius: 0;
}

.pbplan-pie__credito a {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--brand);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.pbplan-pie__credito a:hover {
	text-decoration-color: var(--wp--preset--color--ink);
}

/* 404 */
.pbplan-404 {
	padding-top: var(--wp--custom--blog-top);
	padding-bottom: var(--wp--preset--spacing--80);
}

.pbplan-404 > * {
	margin-block: 0 24px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
	}
}