/*
Theme Name: Juan Pascual
Theme URI: https://juanpascualgonzalez.com
Author: Tema a medida para Juan Pascual
Description: Tema de bloques (Full Site Editing) para la marca personal Juan Pascual · SEO Local y Diseño Web. Solo bloques nativos de WordPress, sin constructores visuales, sin JavaScript propio y con fuentes autoalojadas.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: juan-pascual
Tags: full-site-editing, block-patterns, custom-colors, editor-style, one-column, accessibility-ready, translation-ready
*/

/* ==========================================================================
   ÍNDICE
   1. Base y accesibilidad
   2. Cabecera y navegación
   3. Secciones y ritmo vertical
   4. Textos: eyebrow, entradilla, enlaces con flecha
   5. Botones
   6. Hero e imágenes
   7. Tarjetas y rejillas
   8. Listas: método, proceso, síntomas
   9. Bloque CTA final
  10. Contacto
  11. Pie
  12. Responsive
   ========================================================================== */

/* 1. BASE Y ACCESIBILIDAD
   ========================================================================== */
:root {
	--jp-line-strong: #d0cfc7;
	--jp-photo-line: #dad9d1;
	--jp-dark-line: #3a4458;
	--jp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--jp-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
	--jp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E");
}

html {
	scroll-behavior: smooth;
	/* Los enlaces a anclas (#servicios…) no quedan tapados por la cabecera fija. */
	scroll-padding-top: 6rem;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.has-contrast-background-color :focus-visible {
	outline-color: var(--wp--preset--color--accent-light);
}

.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-site-blocks :where(h1, h2, h3) {
	margin-block: 0;
}

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

	* {
		transition: none !important;
		animation: none !important;
	}
}

/* 2. CABECERA Y NAVEGACIÓN
   ========================================================================== */
/* Cabecera fija: se queda arriba al bajar por la página. */
.jp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding-block: 0.875rem;
	background-color: var(--wp--preset--color--base);
}

/* Con la barra de administración visible, la cabecera se coloca debajo de ella. */
.admin-bar .jp-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* En móvil la barra de administración no es fija: la cabecera vuelve al borde superior. */
@media (max-width: 600px) {
	.admin-bar .jp-header {
		top: 0;
	}
}

/* Línea y sombra suaves en cuanto la página empieza a bajar (sin JavaScript). */
@supports (animation-timeline: scroll()) {
	.jp-header {
		animation: jp-header-stuck linear both;
		animation-timeline: scroll(root);
		animation-range: 0 6rem;
	}
}

@keyframes jp-header-stuck {
	to {
		box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 12px 28px -20px rgba(16, 24, 40, 0.35);
	}
}

/* Cabecera y pie no son bloques «constrained»: les damos el mismo margen lateral global. */
.jp-header,
.jp-footer {
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.jp-header__inner,
.jp-footer__inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.jp-header__inner {
	gap: 1.25rem;
}

/* Logo (símbolo J + pin) a la izquierda del nombre. */
.jp-brand-wrap {
	gap: 0.75rem;
}

.wp-site-blocks .jp-brand__mark {
	flex: none;
	margin: 0;
}

.jp-brand__mark img {
	display: block;
	width: auto;
	height: 2.75rem;
	object-fit: contain;
}

.jp-brand {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.wp-site-blocks .jp-brand > *,
.wp-site-blocks .jp-brand__name {
	margin: 0;
}

.jp-brand__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.1;
}

.jp-brand__tag {
	letter-spacing: 0.04em;
	line-height: 1.1;
}

.jp-nav {
	gap: 0.375rem 1.875rem;
}

.jp-nav .wp-block-navigation-item__content {
	padding-block: 0.25rem;
}

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

.jp-nav.wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 300px;
	padding: 10px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	box-shadow: var(--wp--preset--shadow--menu);
}

.jp-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.75rem 1rem;
	border-radius: 12px;
}

.jp-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--base);
}

.jp-nav .jp-nav-cta > .wp-block-navigation-item__content {
	padding: 0.75rem 1.375rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 600;
}

.jp-nav .jp-nav-cta > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--white);
	filter: brightness(1.15);
}

/* Menú móvil abierto: el núcleo quita el relleno de los enlaces; el botón lo recupera. */
.jp-nav .wp-block-navigation__responsive-container.is-menu-open .jp-nav-cta > .wp-block-navigation-item__content {
	margin-top: 0.5rem;
	padding: 0.75rem 1.375rem;
}

/* 3. SECCIONES Y RITMO VERTICAL
   ========================================================================== */
.jp-main {
	margin-block-start: 0;
}

.wp-block-group.jp-section {
	padding-block: clamp(4rem, 8vw, 7rem);
}

.wp-block-group.jp-section--hero {
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.wp-block-group.jp-section--band {
	border-block: 1px solid var(--wp--preset--color--line);
}

.jp-section .wp-block-columns {
	gap: clamp(1.5rem, 4vw, 5rem);
}

.wp-site-blocks .jp-section__title {
	margin-block-end: clamp(2.5rem, 5vw, 4rem);
}

.wp-site-blocks .jp-section__intro {
	max-width: 40rem;
	margin-block: 1.25rem 3.5rem;
}

/* Entradilla centrada: algo más ancha que la normal. */
.wp-site-blocks .jp-section__intro.has-text-align-center {
	max-width: 52rem;
	margin-inline: auto;
}

.jp-section--dark .wp-block-columns {
	align-items: flex-start;
}

/* 4. TEXTOS
   ========================================================================== */
.wp-site-blocks .jp-eyebrow {
	margin-block-end: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.3;
}

.wp-site-blocks .jp-lead {
	max-width: 36rem;
	margin-block-start: 2rem;
}

.wp-site-blocks .jp-aside {
	margin-block-start: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--jp-line-strong);
	color: var(--wp--preset--color--ink-soft);
}

/* Contacto: foto pequeña y redonda de Juan, con un aro fino de acento, sobre la nota
   «Te responderé personalmente». */
.wp-site-blocks .jp-aside > * {
	margin: 0;
}

.wp-site-blocks .jp-aside:has(.jp-aside__avatar) {
	text-align: center;
}

.wp-site-blocks .jp-aside .jp-aside__avatar {
	margin-bottom: 0.875rem;
}

.jp-aside__avatar img {
	display: block;
	margin-inline: auto;
	width: 56px;
	height: 56px;
	border: 2px solid var(--wp--preset--color--white);
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--wp--preset--color--accent);
	object-fit: cover;
}

.jp-h1--wide {
	max-width: 62rem;
}

.jp-link-arrow a {
	display: inline-block;
	padding-bottom: 3px;
	border-bottom: 2px solid currentColor;
	font-weight: 600;
}

.jp-link-arrow a::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: 0.6em;
	vertical-align: -0.15em;
	background: currentColor;
	-webkit-mask: var(--jp-arrow) center / contain no-repeat;
	mask: var(--jp-arrow) center / contain no-repeat;
}

.jp-link-arrow a:hover {
	color: var(--wp--preset--color--accent);
}

.has-contrast-background-color .jp-link-arrow a:hover {
	color: var(--wp--preset--color--accent-light);
}

.jp-inline-link a {
	font-weight: 600;
	border-bottom: 2px solid currentColor;
}

/* 5. BOTONES
   ========================================================================== */
.wp-block-button__link {
	transition: filter 0.2s ease;
}

.wp-block-button__link:hover {
	filter: brightness(1.15);
}

.jp-btn-arrow .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 1.125rem;
	height: 1.125rem;
	margin-left: 0.75rem;
	vertical-align: -0.2rem;
	background: currentColor;
	-webkit-mask: var(--jp-arrow) center / contain no-repeat;
	mask: var(--jp-arrow) center / contain no-repeat;
}

/* Barrido de acento al pasar el ratón: el rojo entra de derecha a izquierda, el botón se
   eleva un poco y gana sombra. Lo usan «Volver al inicio» (páginas legales), «Contacto»
   del menú, el botón principal del hero y el del bloque final. Es un degradado de fondo, así ::before y ::after
   quedan libres para las flechas. */
.jp-btn-back .wp-block-button__link,
.jp-nav .jp-nav-cta > .wp-block-navigation-item__content,
.jp-hero__actions .jp-btn-arrow .wp-block-button__link,
.jp-cta__actions .jp-btn-arrow .wp-block-button__link {
	background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 0% 100%;
	transition: background-size 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}

.jp-btn-back .wp-block-button__link:hover,
.jp-btn-back .wp-block-button__link:focus-visible,
.jp-nav .jp-nav-cta > .wp-block-navigation-item__content:hover,
.jp-nav .jp-nav-cta > .wp-block-navigation-item__content:focus-visible,
.jp-hero__actions .jp-btn-arrow .wp-block-button__link:hover,
.jp-hero__actions .jp-btn-arrow .wp-block-button__link:focus-visible,
.jp-cta__actions .jp-btn-arrow .wp-block-button__link:hover,
.jp-cta__actions .jp-btn-arrow .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--white);
	filter: none;
	background-size: 100% 100%;
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -14px rgba(199, 58, 27, 0.6);
}

.jp-btn-back .wp-block-button__link:active,
.jp-nav .jp-nav-cta > .wp-block-navigation-item__content:active,
.jp-hero__actions .jp-btn-arrow .wp-block-button__link:active,
.jp-cta__actions .jp-btn-arrow .wp-block-button__link:active {
	transform: translateY(-1px) scale(0.98);
}

/* «Volver al inicio»: flecha fija a la izquierda. */
.jp-legal__back {
	margin-block-start: 3.5rem;
}

.jp-btn-back .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.jp-btn-back .wp-block-button__link::before {
	content: "";
	width: 1.125rem;
	height: 1.125rem;
	background: currentColor;
	-webkit-mask: var(--jp-arrow) center / contain no-repeat;
	mask: var(--jp-arrow) center / contain no-repeat;
	transform: rotate(180deg);
}


.jp-btn-lg .wp-block-button__link {
	padding: 1.25rem 2.125rem;
	font-size: 1.125rem;
}

.is-style-link .wp-block-button__link {
	padding: 0 0 3px;
	background: transparent;
	color: inherit;
	border-radius: 0;
	border-bottom: 2px solid currentColor;
}

.is-style-link .wp-block-button__link:hover {
	color: var(--wp--preset--color--accent);
	filter: none;
}

.jp-hero__actions {
	margin-block-start: 2.5rem;
	align-items: center;
	gap: 1.25rem 2rem;
}

/* 6. HERO E IMÁGENES
   ========================================================================== */
.jp-photo img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border: 1px solid var(--jp-photo-line);
	border-radius: var(--wp--custom--radius--card);
}

.jp-photo--portrait img {
	aspect-ratio: 4 / 5;
}

.jp-photo--landscape img {
	aspect-ratio: 5 / 4;
}

.jp-hero__media {
	position: relative;
	container-type: inline-size;
}

.wp-block-group.jp-badge {
	margin-block-start: 1.25rem;
	margin-inline: auto;
	width: max-content;
	max-width: 100%;
	box-sizing: border-box;
	gap: 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	box-shadow: var(--wp--preset--shadow--soft);
	align-items: center;
}

.wp-site-blocks .jp-badge__a,
.wp-site-blocks .jp-badge__b {
	display: inline-flex;
	align-items: center;
	margin: 0;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.jp-badge__a::before,
.jp-badge__b::after {
	content: "";
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	margin-right: 0.5rem;
	-webkit-mask: var(--jp-pin) center / contain no-repeat;
	mask: var(--jp-pin) center / contain no-repeat;
	background: var(--wp--preset--color--accent);
}

/* El check va al final, a la derecha de «Te eligen», en verde vivo (contraste 3.3:1 sobre
   blanco, suficiente para un icono). */
.jp-badge__b::after {
	margin-right: 0;
	margin-left: 0.5rem;
	-webkit-mask-image: var(--jp-check);
	mask-image: var(--jp-check);
	background: #16a34a;
}

.jp-badge__a::after {
	content: "";
	display: inline-block;
	width: clamp(1.25rem, 3vw, 2.5rem);
	margin-inline: clamp(0.5rem, 1.2vw, 0.875rem);
	border-top: 2px dashed #9ca3af;
}

/* Insignia del hero, animada al cargar: «Te encuentran» está desde el principio, los guiones
   se pintan uno a uno, aparece «Te eligen» y por último entra el check (a su derecha) con un
   pequeño rebote.
   Con «reducir movimiento» (animation: none) se ve completa desde el principio. */
.jp-badge__a::after {
	animation: jp-badge-dash 0.9s steps(5, end) 0.5s both;
}

.jp-badge__b {
	animation: jp-badge-text 0.5s ease 1.45s both;
}

.jp-badge__b::after {
	animation: jp-badge-check 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.15s both;
}

@keyframes jp-badge-dash {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes jp-badge-text {
	from {
		color: transparent;
	}
}

@keyframes jp-badge-check {
	from {
		opacity: 0;
		transform: scale(0.3) rotate(-25deg);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Columna estrecha: la insignia se apila en vertical para no desbordarse. */
@container (max-width: 340px) {
	.wp-block-group.jp-badge {
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}

	.jp-badge__a::after {
		display: none;
	}
}

/* Titular de portada: efecto máquina de escribir (assets/js/typewriter.js). */
.jp-type-pending .jp-section--hero h1 mark {
	visibility: hidden;
	/* Red de seguridad: si el script no llega a ejecutarse, el texto aparece igualmente. */
	animation: jp-reveal 0s 2.5s forwards;
}

.jp-char {
	position: relative;
	visibility: hidden;
}

.jp-char.is-on {
	visibility: visible;
}

.jp-char.is-caret::after {
	content: "";
	position: absolute;
	top: 0.08em;
	bottom: 0.02em;
	right: -0.08em;
	width: 0.07em;
	background: currentColor;
}

.jp-char.is-finished::after {
	animation: jp-blink 0.9s steps(1) infinite;
}

@keyframes jp-blink {
	50% {
		opacity: 0;
	}
}

@keyframes jp-reveal {
	to {
		visibility: visible;
	}
}

/* Párrafos cuyos caracteres aparecen con un fundido al entrar en pantalla
   (.jp-type-scroll, assets/js/typewriter.js). El texto completo queda disponible
   para lectores de pantalla en .jp-sr. */
.jp-fade-char {
	opacity: 0;
	transition: opacity 0.45s ease-out;
}

.jp-fade-char.is-on {
	opacity: 1;
}

.jp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Cajas que aparecen al hacer scroll (assets/js/reveal.js). */
.jp-reveal {
	opacity: 0;
	transform: translateY(2.5rem);
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.jp-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Páginas legales: todo el texto (título y cuerpo) aparece a la vez, con un fundido
   y un ligero desplazamiento hacia arriba. Con «reducir movimiento» se ve sin animar. */
.jp-legal-hero,
.jp-legal {
	animation: jp-fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes jp-fade-up {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* 7. TARJETAS Y REJILLAS
   ========================================================================== */
.wp-block-group.jp-card {
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
}

.wp-block-group.jp-card.has-contrast-background-color {
	border-color: transparent;
}

.wp-block-group.jp-card--sm {
	padding: 2rem;
	border-radius: var(--wp--custom--radius--card-sm);
}

.wp-site-blocks .jp-card--stack {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	height: 100%;
	box-sizing: border-box;
}

.wp-site-blocks .jp-card--stack > * {
	margin: 0;
}

.wp-site-blocks .jp-card--stack .jp-eyebrow {
	margin: 0;
}

/* Tarjetas de «Cómo puedo ayudarte»: al aparecer con el scroll (reveal.js) las laterales
   llegan inclinadas hacia fuera, como un abanico, y se colocan rectas en fila mientras
   hacen el fundido. Una vez colocadas quedan quietas. Se usan rotate/translate (no
   transform) para sumarse a la subida de reveal.js sin pisarla. Solo en escritorio. */
#servicios .jp-card {
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), rotate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 782px) {
	#servicios .jp-cols-cards > .wp-block-column:first-child > .jp-card.jp-reveal,
	#servicios .jp-cols-cards > .wp-block-column:last-child > .jp-card.jp-reveal {
		transform-origin: 50% 100%;
		translate: 0 1rem;
	}

	#servicios .jp-cols-cards > .wp-block-column:first-child > .jp-card.jp-reveal {
		rotate: -6deg;
	}

	#servicios .jp-cols-cards > .wp-block-column:last-child > .jp-card.jp-reveal {
		rotate: 6deg;
	}

	#servicios .jp-cols-cards > .wp-block-column > .jp-card.jp-reveal.is-visible {
		rotate: 0deg;
		translate: 0 0;
	}
}

/* El enlace de cada tarjeta queda abajo, alineado entre tarjetas de la misma fila. */
.wp-site-blocks .jp-card--stack > .jp-link-arrow:last-child {
	margin-top: auto;
}

.jp-cols-cards {
	align-items: stretch;
	gap: 1.5rem;
}

.jp-cols-cards > .wp-block-column {
	display: flex;
}

.jp-cols-cards > .wp-block-column > .jp-card {
	flex: 1 1 auto;
}

.jp-num {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 2.4rem + 2vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
}

.wp-site-blocks .jp-num--sm {
	margin: 0 0 0.625rem;
	font-size: 1.25rem;
}

.wp-site-blocks .jp-card__title {
	margin-block: 0 0.625rem;
	font-size: 1.625rem;
	line-height: 1.15;
}

.jp-grid-cards {
	gap: 1.25rem;
}

.jp-cols-intro {
	margin-block-end: clamp(2.5rem, 5vw, 4rem);
}

/* Método (Home): 6 tarjetas en 2 columnas con icono de línea y número de paso.
   Iconos basados en Feather Icons (MIT), dibujados como máscara para tomar el color del texto. */
.jp-steps-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.wp-site-blocks .jp-steps-grid > * {
	margin: 0;
}

.jp-step-card__head {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.jp-step-card__head::before {
	content: "";
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	background: currentColor;
	-webkit-mask: var(--jp-icon) center / contain no-repeat;
	mask: var(--jp-icon) center / contain no-repeat;
}

.jp-icon-chat {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
}

.jp-icon-search {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
}

.jp-icon-plan {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M8 11h8M8 15h8M8 19h4'/%3E%3C/svg%3E");
}

.jp-icon-tool {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

.jp-icon-chart {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E");
}

.jp-icon-repeat {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 4v6h-6M1 20v-6h6'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
}

/* Pie: datos de contacto (email y LinkedIn). El email no se parte en dos líneas. */
.jp-footer__contact a {
	white-space: nowrap;
}

@media (max-width: 781px) {
	.jp-steps-grid {
		grid-template-columns: 1fr;
	}
}

/* Enfoque (Home): todo centrado, con tres píldoras unidas por una línea de acento.
   Al aparecer con el scroll (reveal.js) la línea se dibuja de izquierda a derecha y las
   píldoras entran una tras otra. Sin JavaScript o con «reducir movimiento» se ven quietas. */
.wp-site-blocks .jp-enfoque__title {
	max-width: 50rem;
	margin-block: 0;
	text-wrap: balance;
}

.jp-trio {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(1rem, 7vw, 5.5rem);
	max-width: 46rem;
	margin-block: clamp(2.5rem, 5vw, 3.5rem);
}

.jp-trio::before {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	top: 50%;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transform-origin: left center;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s;
}

.wp-site-blocks .jp-trio > .jp-trio__item {
	position: relative;
	margin: 0;
	padding: 0.625rem 1.375rem;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
	font-weight: 700;
	white-space: nowrap;
	transition: opacity 0.5s ease, scale 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.jp-trio > .jp-trio__item:nth-child(2) {
	transition-delay: 0.35s;
}

.jp-trio > .jp-trio__item:nth-child(3) {
	transition-delay: 0.7s;
}

.jp-trio.jp-reveal:not(.is-visible)::before {
	transform: scaleX(0);
}

.jp-trio.jp-reveal:not(.is-visible) > .jp-trio__item {
	opacity: 0;
	scale: 0.85;
}

.wp-site-blocks .jp-enfoque__text {
	max-width: 44rem;
}

@media (max-width: 600px) {
	.wp-site-blocks .jp-trio > .jp-trio__item {
		padding: 0.5rem 0.875rem;
	}
}

/* Diagnóstico gratuito (Home): cabecera centrada con una rayita de acento sobre la etiqueta
   y dos columnas de listas con guion rojo (.jp-dash-list). */
/* Rayita de acento sobre las etiquetas de sección: alineada a la izquierda o centrada
   según la etiqueta, y en rojo claro sobre fondo oscuro. */
.jp-eyebrow--rule::before {
	content: "";
	display: block;
	width: 3rem;
	height: 2px;
	margin: 0 0 1.25rem;
	background: var(--wp--preset--color--accent);
}

.jp-eyebrow--rule.has-text-align-center::before {
	margin-inline: auto;
}

.has-contrast-background-color .jp-eyebrow--rule::before {
	background: var(--wp--preset--color--accent-light);
}

.jp-diagnostico__cols {
	gap: clamp(2rem, 5vw, 4.5rem);
}

/* Títulos de sección centrados: líneas equilibradas (sin una palabra sola al final). */
.wp-site-blocks .jp-section__title.has-text-align-center {
	text-wrap: balance;
}

.wp-site-blocks .jp-diagnostico__cols h3 {
	margin-block-end: 1.5rem;
}

.jp-diagnostico__cols .jp-dash-list > li {
	color: var(--wp--preset--color--ink-soft);
}

/* 8. LISTAS
   ========================================================================== */
.jp-steps,
.jp-process,
.jp-dash-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jp-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
	gap: 1.5rem;
	counter-reset: jp-step;
}

.jp-steps > li {
	counter-increment: jp-step;
	padding-top: 1.25rem;
	border-top: 2px solid var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.jp-steps > li::before {
	content: counter(jp-step, decimal-leading-zero);
	display: block;
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--accent);
	font-size: 1.25rem;
}

.jp-process {
	counter-reset: jp-proc;
}

.jp-process > li {
	counter-increment: jp-proc;
	display: flex;
	gap: 1.75rem;
	align-items: baseline;
	padding-block: 1.625rem;
	border-top: 1px solid var(--jp-line-strong);
	font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem);
	font-weight: 500;
}

.jp-process > li:first-child {
	border-top: 2px solid var(--wp--preset--color--contrast);
}

.jp-process > li:last-child {
	border-bottom: 1px solid var(--jp-line-strong);
}

.jp-process > li::before {
	content: counter(jp-proc, decimal-leading-zero);
	min-width: 2.25rem;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}

.jp-dash-list > li {
	display: flex;
	gap: 1.125rem;
	align-items: baseline;
	padding-block: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.jp-dash-list > li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.jp-dash-list > li::before {
	content: "—";
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* Páginas legales: columna de lectura estrecha y títulos con aire. */
.wp-block-group.jp-legal {
	padding-top: 0;
}

.wp-site-blocks .jp-legal h2 {
	margin-block: 2.75rem 1rem;
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
}

.wp-site-blocks .jp-legal h3 {
	margin-block: 2rem 0.5rem;
	font-size: 1.25rem;
}

.wp-site-blocks .jp-legal > h2:first-child {
	margin-top: 0;
}

.jp-legal p,
.jp-legal li {
	color: var(--wp--preset--color--ink-soft);
}

.jp-legal a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* 9. BLOQUE CTA FINAL
   ========================================================================== */
.wp-block-group.jp-cta {
	padding-bottom: clamp(4rem, 8vw, 7rem);
}

.wp-block-group.jp-cta--flush {
	padding-bottom: 0;
}

.wp-block-group.jp-cta-card {
	padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3.5rem);
	border-radius: 36px;
	text-align: center;
}

.wp-block-group.jp-cta-card--left {
	text-align: left;
}

.wp-block-group.jp-cta-card.has-white-background-color {
	border: 1px solid var(--wp--preset--color--line);
}

.jp-cta-card > * + * {
	margin-block-start: 1.75rem;
}

.jp-cta-card .wp-block-buttons {
	margin-block-start: 2.5rem;
}

.jp-cta-card--left .wp-block-columns {
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4.5rem);
}

/* 10. CONTACTO
   ========================================================================== */
.jp-form-card > * + * {
	margin-block-start: 1.25rem;
}

/* 11. PIE
   ========================================================================== */
.jp-footer {
	margin-block-start: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.jp-footer__inner {
	padding-block: 4rem 2.5rem;
}

.jp-footer__cols {
	gap: 2.5rem 4rem;
	margin-block-end: 2.5rem;
}

.wp-site-blocks .jp-footer__title {
	margin-block: 0 0.875rem;
	font-weight: 600;
}

.wp-site-blocks .jp-footer__link {
	margin-block: 0 0.5rem;
}

.jp-footer__link a:hover {
	color: var(--wp--preset--color--accent);
}

.jp-footer__legal {
	gap: 0.75rem;
}

.jp-footer__legal p {
	margin: 0;
}

/* 12. RESPONSIVE
   ========================================================================== */
@media (max-width: 781px) {
	.jp-process > li {
		gap: 1rem;
	}

	.wp-block-group.jp-cta-card {
		border-radius: 28px;
	}

	.jp-btn-lg .wp-block-button__link {
		min-height: 3.5rem;
	}
}

@media (max-width: 600px) {
	/* Título del bloque CTA final algo más pequeño en móvil (los titulares largos ocupaban 5 líneas). */
	.jp-cta-card {
		--wp--preset--font-size--display: 1.75rem;
	}

	.jp-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.jp-hero__actions .wp-block-button {
		width: 100%;
	}

	.jp-hero__actions .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.jp-hero__actions .is-style-link .wp-block-button__link {
		width: auto;
	}
}

/* Reserva (Home): tres pasos y el calendario de Cal.com (assets/js/cal-embed.js). */
.wp-site-blocks .jp-reserva__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem);
	max-width: 64rem;
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	padding: 0;
	list-style: none;
	counter-reset: jp-paso;
}

.jp-reserva__steps > li {
	counter-increment: jp-paso;
	margin: 0;
	padding-top: 1.25rem;
	border-top: 2px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.55;
}

.jp-reserva__steps > li::before {
	content: counter(jp-paso, decimal-leading-zero);
	display: block;
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 700;
}

.jp-reserva__steps > li strong {
	display: block;
	margin-bottom: 0.375rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.wp-site-blocks .jp-cal {
	max-width: 64rem;
	min-height: 34rem;
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
	padding: clamp(0.5rem, 2vw, 1.25rem);
	box-sizing: border-box;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
}

.jp-cal__frame {
	width: 100%;
}

.jp-cal__loading {
	margin: 0;
	padding: 3rem 1rem;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

.jp-cal.is-ready .jp-cal__loading {
	display: none;
}
/* Silueta del calendario mientras carga Cal.com (assets/js/cal-embed.js). El calendario real
   carga debajo, invisible, y aparece con un fundido cuando está listo (.is-ready). El texto
   «Cargando…» queda solo para lectores de pantalla, salvo que tarde más de 10 s (.is-slow). */
.wp-site-blocks .jp-cal {
	position: relative;
	--jp-cal-pad: clamp(0.5rem, 2vw, 1.25rem);
}

.jp-cal__frame {
	transition: opacity 0.5s ease;
}

.jp-cal.is-loading .jp-cal__frame {
	position: absolute;
	inset: var(--jp-cal-pad);
	opacity: 0;
	pointer-events: none;
}

.jp-cal__skeleton {
	display: grid;
	grid-template-columns: 24% minmax(0, 1fr) 24%;
	min-height: 31rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	overflow: hidden;
	transition: opacity 0.5s ease;
}

.jp-cal.is-ready .jp-cal__skeleton {
	position: absolute;
	inset: var(--jp-cal-pad);
	opacity: 0;
	pointer-events: none;
}

.jp-cal__sk-info,
.jp-cal__sk-month,
.jp-cal__sk-slots {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem;
}

.jp-cal__sk-info {
	border-right: 1px solid var(--wp--preset--color--line);
}

.jp-cal__sk-slots {
	gap: 0.625rem;
	border-left: 1px solid var(--wp--preset--color--line);
}

.jp-cal__sk-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	margin-top: 0.75rem;
}

.jp-sk {
	display: block;
	border-radius: 6px;
	background: linear-gradient(90deg, #ecece8 0%, #f6f6f3 45%, #ecece8 90%);
	background-size: 300% 100%;
	animation: jp-sk 1.4s ease-in-out infinite;
}

.jp-sk--avatar {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
}

.jp-sk--line {
	height: 0.75rem;
}

.jp-sk--title {
	width: 80%;
	height: 1.25rem;
}

.jp-sk--wd {
	height: 0.6rem;
	margin: 0 22% 0.5rem;
}

.jp-sk--day {
	aspect-ratio: 1;
	border-radius: 8px;
}

.jp-sk--day.is-off {
	opacity: 0.35;
}

.jp-sk--slot {
	height: 2.4rem;
	border-radius: 8px;
}

@keyframes jp-sk {
	from {
		background-position: 100% 0;
	}

	to {
		background-position: 0% 0;
	}
}

.jp-cal.is-loading .jp-cal__loading {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.jp-cal.is-loading.is-slow .jp-cal__loading {
	position: static;
	width: auto;
	height: auto;
	padding: 1rem 1rem 0.25rem;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

@media (max-width: 767px) {
	.jp-cal__skeleton {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.jp-cal__sk-info {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.jp-cal__sk-slots {
		display: none;
	}
}

@media (max-width: 600px) {
	.wp-site-blocks .jp-cal {
		--jp-cal-pad: 0px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jp-sk {
		animation: none;
	}
}

.wp-site-blocks .jp-reserva__alt {
	margin-top: 1.5rem;
}

@media (max-width: 600px) {
	.wp-site-blocks .jp-cal {
		min-height: 40rem;
		padding: 0;
		border: 0;
		background: transparent;
	}
}

/* Bloque final «Hablemos» (Home): enlace al formulario de Contacto y a la reserva. */
.jp-cta__actions {
	align-items: center;
	gap: 1.25rem 2rem;
}

.jp-cta-card .jp-cta__actions,
.jp-hablemos .jp-cta__actions {
	margin-block-start: 2.5rem;
}

.has-contrast-background-color .is-style-link .wp-block-button__link:hover {
	color: var(--wp--preset--color--accent-light);
}

@media (max-width: 600px) {
	.jp-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.jp-cta__actions .jp-btn-arrow,
	.jp-cta__actions .jp-btn-arrow .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.jp-cta__actions .is-style-link {
		align-self: center;
	}
}

/* «Hablemos» (Home) a todo el ancho, con el fondo oscuro de «El problema». */
.wp-site-blocks .jp-hablemos .jp-hablemos__title {
	max-width: 52rem;
	margin-block-start: 0;
	text-wrap: balance;
}

.wp-site-blocks .jp-hablemos .jp-hablemos__text {
	max-width: 46rem;
}

.jp-hablemos .jp-hablemos__title + .jp-hablemos__text {
	margin-block-start: 1.75rem;
}

@media (max-width: 600px) {
	.jp-hablemos {
		--wp--preset--font-size--display: 1.75rem;
	}
}

/* Formulario de contacto (Fluent Forms, shortcode en Contacto). */
.jp-form-card .fluentform fieldset {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.25rem;
}

.jp-form-card .fluentform fieldset > * {
	grid-column: 1 / -1;
}

.jp-form-card .fluentform fieldset > .jp-half {
	grid-column: auto;
}

.jp-form-card .fluentform .ff-el-group {
	margin-bottom: 1.25rem;
}

.jp-form-card .fluentform .ff-el-input--label label {
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
	font-weight: 600;
}

.jp-form-card .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	color: var(--wp--preset--color--accent);
}

.jp-form-card .fluentform .ff-el-form-control {
	width: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.jp-form-card .fluentform .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 0.75;
}

.jp-form-card .fluentform .ff-el-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 3px rgba(199, 58, 27, 0.15);
}

.jp-form-card .fluentform select.ff-el-form-control {
	min-height: 3.25rem;
}

.jp-form-card .fluentform textarea.ff-el-form-control {
	min-height: 7.5rem;
	resize: vertical;
}

.jp-form-card .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--wp--preset--color--accent);
}

.jp-form-card .fluentform .error.text-danger {
	margin-top: 0.375rem;
	color: var(--wp--preset--color--accent);
	font-size: 0.875rem;
}

.jp-form-card .fluentform .ff_t_c,
.jp-form-card .fluentform .ff-el-form-check-label {
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.jp-form-card .fluentform .ff-el-form-check-input {
	accent-color: var(--wp--preset--color--accent);
}

.jp-form-card .fluentform a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.jp-form-card .fluentform a:hover {
	color: var(--wp--preset--color--accent);
}

.jp-form-card .fluentform .jp-form-legal {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* «¿Qué te gustaría mejorar?»: casillas como píldoras (varias a la vez). La casilla real queda
   oculta pero accesible con teclado; la píldora es su <span>. */
.jp-form-card .fluentform .jp-ff-chips .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.jp-form-card .fluentform .jp-ff-chips .ff-el-form-check {
	margin: 0;
}

.jp-form-card .fluentform .jp-ff-chips .ff-el-form-check-label {
	position: relative;
	display: inline-flex;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.jp-form-card .fluentform .jp-ff-chips .ff-el-form-check-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.jp-form-card .fluentform .jp-ff-chips .ff-el-form-check-label span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.625rem 1.05rem;
	border: 1px 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-soft);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.jp-form-card .fluentform .jp-ff-chips .ff-el-form-check-label span::before {
	content: "";
	width: 0;
	height: 0.875rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: width 0.2s ease;
}

.jp-form-card .fluentform .jp-ff-chips .ff-el-form-check-label:hover span {
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.jp-form-card .fluentform .jp-ff-chips .ff-el-form-check-input:checked + span {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

.jp-form-card .fluentform .jp-ff-chips .ff-el-form-check-input:checked + span::before {
	width: 0.875rem;
}

.jp-form-card .fluentform .jp-ff-chips .ff-el-form-check-input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.jp-form-card .fluentform .jp-ff-chips .ff-el-form-check-label:active span {
	transform: scale(0.97);
}

/* Botón de envío: el del tema (oscuro, píldora, flecha) con el barrido de acento de «Contacto». */
.jp-form-card .fluentform .ff_submit_btn_wrapper {
	margin: 0.5rem 0 0;
}

.jp-form-card .fluentform .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.0625rem 1.875rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--contrast) !important;
	background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 0% 100%;
	color: var(--wp--preset--color--white) !important;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	cursor: pointer;
	opacity: 1;
	transition: background-size 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}

.jp-form-card .fluentform .ff-btn-submit::after {
	content: "";
	width: 1.125rem;
	height: 1.125rem;
	background: currentColor;
	-webkit-mask: var(--jp-arrow) center / contain no-repeat;
	mask: var(--jp-arrow) center / contain no-repeat;
}

.jp-form-card .fluentform .ff-btn-submit:hover,
.jp-form-card .fluentform .ff-btn-submit:focus-visible {
	background-size: 100% 100%;
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -14px rgba(199, 58, 27, 0.6);
	opacity: 1;
}

.jp-form-card .fluentform .ff-btn-submit:active {
	transform: translateY(-1px) scale(0.98);
}

.jp-form-card .fluentform .ff-btn-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* Mensaje de enviado: discreto, debajo del formulario (que se vacía pero sigue visible). */
.jp-form-card .ff-message-success {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 1.25rem 0 0;
	padding: 0.875rem 0 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.9375rem;
	line-height: 1.5;
	animation: jp-msg-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.jp-form-card .ff-message-success::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.05rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask-size: 70%;
	mask-size: 70%;
	background-color: var(--wp--preset--color--accent);
}

.jp-form-card .ff-message-success p {
	margin: 0;
}

@keyframes jp-msg-in {
	from {
		opacity: 0;
		transform: translateY(0.375rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jp-form-card .ff-message-success {
		animation: none;
	}
}

@media (max-width: 600px) {
	.jp-form-card .fluentform fieldset {
		grid-template-columns: 1fr;
	}

	.jp-form-card .fluentform .ff-btn-submit {
		width: 100%;
		justify-content: center;
	}
}

/* Transición entre páginas (View Transitions entre documentos, solo CSS). La cabecera se
   queda quieta; el contenido anterior se desvanece subiendo un poco y el nuevo entra desde
   abajo. Navegadores sin soporte (p. ej. Firefox) cargan la página como siempre. Con
   «reducir movimiento» no hay transición. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

.jp-header {
	view-transition-name: jp-header;
}

::view-transition {
	background-color: var(--wp--preset--color--base);
}

::view-transition-old(root) {
	animation: jp-page-out 0.28s cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
	animation: jp-page-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.14s both;
}

::view-transition-group(jp-header) {
	animation-duration: 0.4s;
	z-index: 1;
}

@keyframes jp-page-out {
	to {
		opacity: 0;
		transform: translateY(-1rem);
	}
}

@keyframes jp-page-in {
	from {
		opacity: 0;
		transform: translateY(1.75rem);
	}
}

/* ==========================================================================
   SOBRE MÍ
   ========================================================================== */

/* Abanico reutilizable (.jp-fan en un bloque de columnas de tarjetas): igual que «Cómo puedo
   ayudarte» en la Home. Las tarjetas de los extremos llegan inclinadas hacia fuera y se
   enderezan al aparecer con el scroll (reveal.js). Solo en escritorio. */
.jp-fan .jp-card {
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), rotate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 782px) {
	.jp-fan > .wp-block-column > .jp-card.jp-reveal {
		transform-origin: 50% 100%;
		translate: 0 1rem;
	}

	.jp-fan > .wp-block-column:first-child > .jp-card.jp-reveal {
		rotate: -6deg;
	}

	.jp-fan > .wp-block-column:last-child > .jp-card.jp-reveal {
		rotate: 6deg;
	}

	.jp-fan > .wp-block-column > .jp-card.jp-reveal.is-visible {
		rotate: 0deg;
		translate: 0 0;
	}
}

.wp-site-blocks .jp-cols-cards--4 .jp-card {
	padding: clamp(1.5rem, 2.5vw, 2rem);
}

/* Títulos más contenidos en las 4 tarjetas (la clase de tamaño de WordPress usa !important,
   así que se ajusta su variable solo dentro de este bloque). */
.jp-cols-cards--4 {
	--wp--preset--font-size--h-3: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
}

.wp-site-blocks .jp-cols-cards--4 .jp-card h4 {
	line-height: 1.25;
}

/* Cifras de la trayectoria: tres tarjetas unidas por una línea de acento, como «Enfoque» en
   la Home. Al aparecer, la línea se dibuja y las tarjetas entran una tras otra. En móvil la
   línea es vertical. Sin JavaScript o con «reducir movimiento» se ven quietas. */
.wp-site-blocks .jp-stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 3vw, 2.5rem);
	margin-block: clamp(2.5rem, 5vw, 4rem);
}

.jp-stats::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 50%;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transform-origin: left center;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s;
}

.wp-site-blocks .jp-stats > .jp-stats__item {
	position: relative;
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2.25rem) 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	text-align: center;
	transition: opacity 0.5s ease, scale 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.jp-stats > .jp-stats__item:nth-child(2) {
	transition-delay: 0.35s;
}

.jp-stats > .jp-stats__item:nth-child(3) {
	transition-delay: 0.7s;
}

.jp-stats.jp-reveal:not(.is-visible)::before {
	transform: scaleX(0);
}

.jp-stats.jp-reveal:not(.is-visible) > .jp-stats__item {
	opacity: 0;
	scale: 0.85;
}

.wp-site-blocks .jp-stats__num {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.wp-site-blocks .jp-stats__label {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.45;
}

@media (max-width: 781px) {
	.wp-site-blocks .jp-stats {
		grid-template-columns: 1fr;
	}

	.jp-stats::before {
		left: 50%;
		right: auto;
		top: 6%;
		bottom: 6%;
		width: 2px;
		height: auto;
		transform-origin: center top;
	}

	.jp-stats.jp-reveal:not(.is-visible)::before {
		transform: scaleY(0);
	}
}

/* Lista con guion que entra punto a punto al aparecer su bloque. */
.jp-dash-list--stagger > li {
	transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.jp-dash-list--stagger > li:nth-child(2) {
	transition-delay: 0.12s;
}

.jp-dash-list--stagger > li:nth-child(3) {
	transition-delay: 0.24s;
}

.jp-dash-list--stagger > li:nth-child(4) {
	transition-delay: 0.36s;
}

.jp-reveal:not(.is-visible) .jp-dash-list--stagger > li {
	opacity: 0;
	translate: 1.25rem 0;
}

.jp-dash-list > li strong {
	color: var(--wp--preset--color--contrast);
}

.wp-site-blocks .jp-subtitle {
	margin-block: clamp(2.5rem, 5vw, 3.5rem) 0;
}

/* Nota bajo los botones del bloque final (email directo). */
.wp-site-blocks .jp-hablemos .jp-hablemos__note {
	margin-block-start: 1.5rem;
	font-size: 0.9375rem;
}

.jp-hablemos__note a {
	color: var(--wp--preset--color--white);
	text-underline-offset: 3px;
}

.jp-hablemos__note a:hover {
	color: var(--wp--preset--color--accent-light);
}

/* Línea de vida («Lo que aprendí por el camino», Sobre mí; assets/js/lifeline.js). Una línea
   gris con un punto por tarjeta se rellena de acento al ritmo del scroll; cada tarjeta se
   enciende y sube un poco cuando la línea llega a su punto. Horizontal en pantallas anchas y
   vertical (tarjetas apiladas) hasta 1100px. Sin el script todo se ve encendido. */
.jp-section .wp-block-columns.jp-lifeline {
	position: relative;
	gap: 1.5rem;
}

.jp-lifeline::before,
.jp-lifeline::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.jp-lifeline::before {
	background: var(--wp--preset--color--line);
}

.jp-lifeline::after {
	background: var(--wp--preset--color--accent);
	transition: transform 0.15s linear;
}

.wp-site-blocks .jp-lifeline > .wp-block-column {
	position: relative;
}

.jp-lifeline > .wp-block-column::before {
	content: "";
	position: absolute;
	z-index: 1;
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 5px rgba(199, 58, 27, 0.15);
	transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, scale 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.jp-lifeline .jp-card {
	transition: opacity 0.6s ease, filter 0.6s ease, translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.jp-lifeline.is-live > .wp-block-column:not(.is-on)::before {
	border-color: var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
	box-shadow: none;
	scale: 0.85;
}

.jp-lifeline.is-live > .wp-block-column:not(.is-on) .jp-card {
	opacity: 0.4;
	filter: grayscale(1);
	translate: 0 1.25rem;
}

@media (min-width: 1101px) {
	.wp-site-blocks .jp-lifeline > .wp-block-column {
		padding-top: 2.5rem;
	}

	.jp-lifeline::before,
	.jp-lifeline::after {
		top: calc(1rem - 1px);
		left: calc((100% - 4.5rem) / 8);
		right: calc((100% - 4.5rem) / 8);
		height: 2px;
	}

	.jp-lifeline::after {
		transform-origin: left center;
		transform: scaleX(var(--jp-life, 1));
	}

	.jp-lifeline > .wp-block-column::before {
		top: calc(1rem - 7px);
		left: calc(50% - 7px);
	}
}

@media (max-width: 1100px) {
	.jp-section .wp-block-columns.jp-lifeline {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 1.25rem;
	}

	.wp-site-blocks .jp-lifeline > .wp-block-column {
		flex-basis: auto !important;
		width: 100%;
		padding-left: 2.25rem;
		box-sizing: border-box;
	}

	.jp-lifeline::before,
	.jp-lifeline::after {
		top: 1.5rem;
		bottom: 1.5rem;
		left: calc(0.5rem - 1px);
		width: 2px;
	}

	.jp-lifeline::after {
		transform-origin: center top;
		transform: scaleY(var(--jp-life, 1));
	}

	.jp-lifeline > .wp-block-column::before {
		top: calc(1.5rem - 7px);
		left: calc(0.5rem - 7px);
	}
}

/* ==========================================================================
   PÁGINAS DE SERVICIO (SEO Local, Auditoría SEO, Diseño Web)
   ========================================================================== */

/* Iconos de línea para las tarjetas (Feather Icons, MIT), como los del Método de la Home. */
.jp-icon-home {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
}

.jp-icon-pin {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.jp-icon-star {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
}

.jp-icon-layout {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E");
}

.jp-icon-layers {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
}

.jp-icon-target {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}

.jp-icon-phone {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}

.jp-icon-edit {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
}

.jp-icon-compass {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16.24 7.76l-2.12 6.36-6.36 2.12 2.12-6.36z'/%3E%3C/svg%3E");
}

.jp-icon-pen {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/%3E%3Cpath d='M2 2l7.59 7.59'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E");
}

.jp-icon-zap {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
}

.jp-icon-pointer {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z'/%3E%3Cpath d='M13 13l6 6'/%3E%3C/svg%3E");
}

.jp-icon-file {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E");
}

.jp-icon-video {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 7l-7 5 7 5V7z'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2'/%3E%3C/svg%3E");
}

.jp-icon-unlock {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E");
}

.jp-icon-eye {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.jp-icon-check {
	--jp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='M22 4L12 14.01l-3-3'/%3E%3C/svg%3E");
}

/* Rejilla de tarjetas con icono a 3 columnas (2 en tablet, 1 en móvil). */
.jp-steps-grid.jp-steps-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
	.jp-steps-grid.jp-steps-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.jp-steps-grid.jp-steps-grid--3 {
		grid-template-columns: 1fr;
	}
}

/* Línea de confianza bajo los botones de la cabecera. */
.wp-site-blocks .jp-trust {
	margin-block-start: 1.5rem;
	letter-spacing: 0.01em;
}

/* Tarjetas sobre fondo oscuro, solo con borde. */
.wp-block-group.jp-card.jp-card--ghost {
	border-color: var(--jp-dark-line);
	background: transparent;
}

/* Etiquetas (sectores, municipios): píldoras que aparecen una tras otra al entrar en
   pantalla (reveal.js). Con .jp-tags--pins llevan una chincheta. Al pasar el ratón (o cuando
   tags-cycle.js las ilumina de una en una, .is-lit) se rellenan de acento y suben un poco.
   El retraso de entrada (--jp-d) solo afecta a la aparición, no al hover. */
.wp-site-blocks .jp-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.625rem;
	max-width: 56rem;
	margin-inline: auto;
}

.wp-site-blocks .jp-tags > .jp-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.625rem 1.125rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	line-height: 1.2;
	transition-property: opacity, scale, border-color, background-color, color, translate, box-shadow;
	transition-duration: 0.45s, 0.45s, 0.3s, 0.3s, 0.3s, 0.3s, 0.3s;
	transition-timing-function: ease, cubic-bezier(0.34, 1.56, 0.64, 1), ease, ease, ease, cubic-bezier(0.2, 0.7, 0.2, 1), ease;
	transition-delay: var(--jp-d, 0s), var(--jp-d, 0s), 0s, 0s, 0s, 0s, 0s;
}

.jp-tags--pins > .jp-tag::before {
	content: "";
	width: 1rem;
	height: 1rem;
	background: var(--wp--preset--color--accent);
	-webkit-mask: var(--jp-pin) center / contain no-repeat;
	mask: var(--jp-pin) center / contain no-repeat;
	transition: background-color 0.3s ease;
}

.wp-site-blocks .jp-tags > .jp-tag:hover,
.wp-site-blocks .jp-tags > .jp-tag.is-lit {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	translate: 0 -3px;
	box-shadow: 0 12px 22px -14px rgba(199, 58, 27, 0.7);
}

.jp-tags--pins > .jp-tag:hover::before,
.jp-tags--pins > .jp-tag.is-lit::before {
	background: var(--wp--preset--color--white);
}

.jp-tags.jp-reveal:not(.is-visible) > .jp-tag {
	opacity: 0;
	scale: 0.8;
}

.jp-tags > .jp-tag:nth-child(2) { --jp-d: 0.06s; }
.jp-tags > .jp-tag:nth-child(3) { --jp-d: 0.12s; }
.jp-tags > .jp-tag:nth-child(4) { --jp-d: 0.18s; }
.jp-tags > .jp-tag:nth-child(5) { --jp-d: 0.24s; }
.jp-tags > .jp-tag:nth-child(6) { --jp-d: 0.3s; }
.jp-tags > .jp-tag:nth-child(7) { --jp-d: 0.36s; }
.jp-tags > .jp-tag:nth-child(8) { --jp-d: 0.42s; }
.jp-tags > .jp-tag:nth-child(9) { --jp-d: 0.48s; }
.jp-tags > .jp-tag:nth-child(10) { --jp-d: 0.54s; }
/* Preguntas frecuentes: bloques Detalles nativos con un + que gira a ×. La respuesta se
   despliega con suavidad en los navegadores que lo permiten; en el resto, al instante. */
:root {
	interpolate-size: allow-keywords;
}

.wp-site-blocks .jp-faq {
	max-width: 52rem;
	margin-inline: auto;
	border-top: 1px solid var(--wp--preset--color--line);
}

.wp-site-blocks .jp-faq > .jp-faq__item {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.jp-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.375rem 0;
	cursor: pointer;
	list-style: none;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	font-weight: 700;
	line-height: 1.3;
	transition: color 0.2s ease;
}

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

.jp-faq__item > summary::after {
	content: "";
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background:
		linear-gradient(currentColor, currentColor) center / 0.75rem 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 0.75rem no-repeat;
	transition: rotate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.2s ease;
}

.jp-faq__item > summary:hover {
	color: var(--wp--preset--color--accent);
}

.jp-faq__item[open] > summary {
	color: var(--wp--preset--color--accent);
}

.jp-faq__item[open] > summary::after {
	rotate: 45deg;
}

.jp-faq__item > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

.jp-faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 0.4s allow-discrete;
}

.jp-faq__item[open]::details-content {
	block-size: auto;
}

.wp-site-blocks .jp-faq__item > p {
	max-width: 44rem;
	margin: 0 0 1.5rem;
	color: var(--wp--preset--color--ink-soft);
}

.jp-faq.jp-reveal:not(.is-visible) > .jp-faq__item {
	opacity: 0;
	translate: 0 1rem;
}

.jp-faq > .jp-faq__item:nth-child(2) { transition-delay: 0.08s; }
.jp-faq > .jp-faq__item:nth-child(3) { transition-delay: 0.16s; }
.jp-faq > .jp-faq__item:nth-child(4) { transition-delay: 0.24s; }
.jp-faq > .jp-faq__item:nth-child(5) { transition-delay: 0.32s; }
.jp-faq > .jp-faq__item:nth-child(6) { transition-delay: 0.4s; }

/* Ilustración «búsqueda local con mapa» (SEO Local): las chinchetas caen una tras otra y los
   resultados aparecen al entrar en pantalla. */
.jp-localpack {
	max-width: 30rem;
	margin-inline: auto;
}

.jp-localpack svg {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	box-shadow: 0 30px 60px -40px rgba(16, 24, 40, 0.35);
}

.jp-localpack .lp-pin,
.jp-localpack .lp-row {
	transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.jp-localpack .lp-2 { transition-delay: 0.18s; }
.jp-localpack .lp-3 { transition-delay: 0.36s; }
.jp-localpack .lp-row { transition-delay: 0.5s; }
.jp-localpack .lp-row.lp-2 { transition-delay: 0.62s; }
.jp-localpack .lp-row.lp-3 { transition-delay: 0.74s; }

.jp-reveal:not(.is-visible) .jp-localpack .lp-pin {
	opacity: 0;
	transform: translateY(-14px);
}

.jp-reveal:not(.is-visible) .jp-localpack .lp-row {
	opacity: 0;
	transform: translateX(12px);
}

/* Bloques de texto centrados (fondo oscuro, precio…): líneas más cortas. */
.wp-site-blocks .jp-narrow > :not(.wp-block-buttons) {
	max-width: 46rem;
}

.wp-site-blocks .jp-narrow > .jp-section__title {
	margin-block-end: 1.5rem;
}

.wp-site-blocks .jp-link-arrow.has-text-align-center {
	margin-block-start: 2.5rem;
}

/* Cabecera de las páginas de servicio (sin columnas): el titular, la entradilla y la línea de
   confianza son más estrechos que el contenido y WordPress los centraría; se alinean a la
   izquierda, con la etiqueta y los botones. */
.wp-site-blocks .jp-section--hero > :is(.jp-h1--wide, .jp-lead, .jp-trust) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

/* Mapa de la zona de trabajo (SEO Local): mapa ilustrado de Madrid (trama de calles, M-30,
   M-40, M-50, autovías, Manzanares y Jarama, sierra al noroeste y aeropuerto). Al entrar en
   pantalla (reveal.js, en .jp-zone): aparece el fondo, el río se dibuja y cada zona se pinta
   (primero el contorno y luego el relleno), una tras otra en el sentido de las agujas del reloj,
   con su punto y su etiqueta; la etiqueta de debajo se ilumina a la vez. Cada zona lleva su
   retraso en --d. Posiciones a partir de las coordenadas reales. Sin JavaScript o con
   «reducir movimiento» el mapa se ve completo. En móvil se ocultan los rótulos del mapa. */
.wp-site-blocks .jp-madmap {
	max-width: 40rem;
	margin: clamp(2rem, 4vw, 3rem) auto clamp(1.75rem, 3vw, 2.5rem);
}

.jp-madmap svg {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	box-shadow: 0 30px 60px -40px rgba(16, 24, 40, 0.35);
}

.jp-madmap .mm-base,
.jp-madmap .mm-sierra {
	transition: opacity 1s ease;
}

.jp-madmap .mm-sierra {
	transition-duration: 1.6s;
}

.jp-madmap .mm-river {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.jp-madmap .mz {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0s), fill-opacity 0.9s ease calc(var(--d, 0s) + 0.55s);
}

.jp-madmap .mm-dot,
.jp-madmap .mm-pin {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	transition: opacity 0.4s ease calc(var(--d, 0s) + 0.6s), transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d, 0s) + 0.6s);
}

.jp-madmap .mm-pin {
	transform-origin: 50% 100%;
}

.jp-madmap .mm-lbl {
	transition: opacity 0.5s ease calc(var(--d, 0s) + 0.85s), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--d, 0s) + 0.85s);
}

.jp-zone.jp-reveal:not(.is-visible) .jp-madmap .mm-base,
.jp-zone.jp-reveal:not(.is-visible) .jp-madmap .mm-sierra {
	opacity: 0;
}

.jp-zone.jp-reveal:not(.is-visible) .jp-madmap .mm-river {
	stroke-dashoffset: 1;
}

.jp-zone.jp-reveal:not(.is-visible) .jp-madmap .mz {
	stroke-dashoffset: 1;
	fill-opacity: 0;
}

.jp-zone.jp-reveal:not(.is-visible) .jp-madmap .mm-dot {
	opacity: 0;
	transform: scale(0.2);
}

.jp-zone.jp-reveal:not(.is-visible) .jp-madmap .mm-pin {
	opacity: 0;
	transform: translateY(-18px);
}

.jp-zone.jp-reveal:not(.is-visible) .jp-madmap .mm-lbl {
	opacity: 0;
	transform: translateY(6px);
}

.jp-zone.is-visible .jp-tags > .jp-tag {
	animation: jp-tag-flash 1.2s ease var(--jp-fd, 0s) 1;
}

@keyframes jp-tag-flash {
	25%,
	65% {
		border-color: var(--wp--preset--color--accent);
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--white);
		translate: 0 -3px;
	}
}

.wp-site-blocks .jp-zone + .jp-section__intro {
	margin-block-start: 2.5rem;
}

@media (max-width: 600px) {
	.jp-madmap .mm-lbl {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jp-zone.is-visible .jp-tags > .jp-tag {
		animation: none;
	}
}
.jp-zone .jp-tags > .jp-tag:nth-child(1) { --jp-fd: 1.2s; }
.jp-zone .jp-tags > .jp-tag:nth-child(2) { --jp-fd: 1.65s; }
.jp-zone .jp-tags > .jp-tag:nth-child(3) { --jp-fd: 2.1s; }
.jp-zone .jp-tags > .jp-tag:nth-child(4) { --jp-fd: 2.55s; }
.jp-zone .jp-tags > .jp-tag:nth-child(5) { --jp-fd: 3s; }
.jp-zone .jp-tags > .jp-tag:nth-child(6) { --jp-fd: 3.45s; }
.jp-zone .jp-tags > .jp-tag:nth-child(7) { --jp-fd: 3.9s; }
.jp-zone .jp-tags > .jp-tag:nth-child(8) { --jp-fd: 4.35s; }