/**
 * Landing 2026 layer — sits on top of modern-redesign.css (site-wide;
 * hero/marquee rules only match front-page classes). Adds the current wave of high-end landing techniques without
 * touching saved block content:
 *  - CSS scroll-driven animations (animation-timeline) for reveals and
 *    the reading-progress bar — zero JS, compositor-only.
 *  - @property-animated gradients (kinetic hero headline, rotating
 *    conic borders on service cards, mesh hero background).
 *  - "Liquid glass" header.
 *  - Film-grain texture, kinetic marquee ticker, cursor follower.
 * Everything is gated behind @supports / prefers-reduced-motion so
 * older browsers simply get the previous design.
 */

@property --jd-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@property --jd-shift {
	syntax: "<percentage>";
	initial-value: 0%;
	inherits: false;
}

:root {
	--jd-ink: #2a1f1d;
	--jd-blush: #f4d9d2;
	--jd-gradient: linear-gradient(110deg, var(--jd-accent) 0%, #e6a57e 35%, var(--jd-accent-2) 65%, var(--jd-accent) 100%);
	--jd-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------
 * Film grain — subtle analog texture over the whole page.
 * --------------------------------------------------------------- */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The tilted full-bleed marquee pokes past the viewport edges; clip
 * (not hidden) so it can't cause horizontal scroll or break fixed/
 * sticky positioning. */
html,
body {
	overflow-x: clip;
}

body ::selection {
	background: var(--jd-accent);
	color: #fff;
}

/* ---------------------------------------------------------------
 * Reading progress bar (pure CSS, scroll-driven).
 * --------------------------------------------------------------- */
.jd-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 9999;
	background: var(--jd-gradient);
	transform-origin: 0 50%;
	transform: scaleX(0);
	pointer-events: none;
}

@supports (animation-timeline: scroll()) {
	.jd-progress {
		animation: jd-progress linear both;
		animation-timeline: scroll(root);
	}
}

@keyframes jd-progress {
	to {
		transform: scaleX(1);
	}
}

/* ---------------------------------------------------------------
 * Liquid-glass header: refraction highlight.
 * --------------------------------------------------------------- */
body .site-header {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5)) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -1px 0 rgba(20, 20, 20, 0.04),
		0 10px 40px rgba(42, 31, 29, 0.1),
		0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}


/* ---------------------------------------------------------------
 * Hero — animated mesh gradient + oversized kinetic headline.
 * --------------------------------------------------------------- */
body .jd-hero-glow {
	background:
		radial-gradient(60% 50% at 15% 20%, rgba(244, 217, 210, 0.9), transparent 70%),
		radial-gradient(50% 60% at 85% 30%, rgba(206, 130, 130, 0.22), transparent 70%),
		radial-gradient(70% 60% at 50% 100%, rgba(230, 165, 126, 0.25), transparent 70%),
		#fbf7f4 !important;
}

body .jd-hero-glow .jd-aurora-blob {
	opacity: 0.45;
	mix-blend-mode: multiply;
}

body .jd-hero-glow :is(h1, h2).lemmonyFadeInUp {
	font-size: clamp(2.5rem, 1rem + min(5vw, 9vh), 6.25rem) !important;
	line-height: 0.98 !important;
	letter-spacing: -0.035em;
	text-transform: none;
	font-weight: 700;
	color: var(--jd-ink);
	margin-block: 0.75rem 1rem;
	text-wrap: balance;
}

/* Last word of the headline ("marca") gets the moving brand gradient. */
body .jd-hero-glow .jd-word-accent {
	font-style: italic;
	background: var(--jd-gradient);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: jd-sheen 6s ease-in-out infinite alternate;
	padding-right: 0.08em;
}

@keyframes jd-sheen {
	from {
		background-position: 0% 50%;
	}
	to {
		background-position: 100% 50%;
	}
}

/* Word-by-word blur reveal (words wrapped by JS). */
body .jd-hero-glow .jd-word {
	display: inline-block;
	opacity: 0;
	filter: blur(12px);
	transform: translateY(0.4em);
	animation: jd-word-in 0.9s var(--jd-ease-out) forwards;
	animation-delay: calc(var(--i, 0) * 110ms + 150ms);
}

body .jd-hero-glow .jd-word.jd-word-accent {
	animation:
		jd-word-in 0.9s var(--jd-ease-out) forwards calc(var(--i, 0) * 110ms + 150ms),
		jd-sheen 6s ease-in-out infinite alternate;
}

@keyframes jd-word-in {
	to {
		opacity: 1;
		filter: blur(0);
		transform: none;
	}
}

/* Hero slider frame: soft rounded "device" card with depth. */
body .jd-hero-glow .splide {
	border-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 40px 80px -30px rgba(42, 31, 29, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.6);
}

body .jd-hero-glow .wp-block-button__link {
	background: var(--jd-ink) !important;
	color: #fff !important;
	border-radius: 9999px !important;
	position: relative;
	overflow: hidden;
}

body .jd-hero-glow .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.7s var(--jd-ease-out);
}

body .jd-hero-glow .wp-block-button__link:hover::after {
	transform: translateX(120%);
}

/* ---------------------------------------------------------------
 * Kinetic marquee ticker (injected by JS after the Aprovecha banner).
 * --------------------------------------------------------------- */
.jd-marquee {
	position: relative;
	overflow: hidden;
	padding: 1.1rem 0;
	background: var(--jd-ink);
	color: #fff;
	transform: rotate(-1.2deg) scale(1.02);
	/* Full-bleed: the banner's parent is a constrained container. */
	width: 100vw;
	max-width: none !important;
	margin: 2.5rem 0 1rem calc(50% - 50vw) !important;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.jd-marquee__track {
	display: flex;
	width: max-content;
	animation: jd-marquee 32s linear infinite;
}

.jd-marquee:hover .jd-marquee__track {
	animation-play-state: paused;
}

.jd-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 2rem;
	padding-right: 2rem;
	font-family: "Playfair Display", serif;
	font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
	font-weight: 600;
	white-space: nowrap;
}

.jd-marquee__item:nth-child(even) {
	font-style: italic;
	color: var(--jd-blush);
}

.jd-marquee__item::after {
	content: "\2726";
	color: var(--jd-accent);
	font-size: 0.8em;
}

@keyframes jd-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* ---------------------------------------------------------------
 * Service cards — numbered + rotating conic border on hover.
 * --------------------------------------------------------------- */
body main {
	counter-reset: jd-service;
}

body .jd-services-row > .wp-block-column > .wp-block-group {
	counter-increment: jd-service;
	background: rgba(255, 255, 255, 0.75) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	overflow: visible;
}

body .jd-services-row > .wp-block-column > .wp-block-group::after {
	content: counter(jd-service, decimal-leading-zero);
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	font-family: "Playfair Display", serif;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--jd-accent);
	opacity: 0.6;
}

body .jd-services-row > .wp-block-column > .wp-block-group::before {
	inset: -2px;
	border-radius: calc(var(--jd-radius) + 2px);
	z-index: 1;
	padding: 2px;
	pointer-events: none;
	background: conic-gradient(from var(--jd-angle), var(--jd-accent), #e6a57e, var(--jd-accent-2), transparent 60%, var(--jd-accent));
	/* Paint only the 2px ring, not the card face. */
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	animation: jd-spin 4s linear infinite;
}

@keyframes jd-spin {
	to {
		--jd-angle: 360deg;
	}
}

body .jd-services-row .wp-block-lemmony-companion-icon .lemmony-icon-wrapper {
	transition: transform 0.5s var(--jd-ease-out), background 0.3s ease;
}

body .jd-services-row > .wp-block-column > .wp-block-group:hover .lemmony-icon-wrapper {
	transform: rotate(-8deg) scale(1.12);
	background: var(--jd-gradient);
}

body .jd-services-row > .wp-block-column > .wp-block-group:hover .lemmony-icon-wrapper svg {
	color: #fff;
}

/* Services are split across two rows (3 + 2). A fixed 3-track grid
 * left the second row's two cards hugging the left, so lay rows out
 * as centered wrapping flex instead — any short row centers itself. */
@media (min-width: 600px) {
	body .jd-services-row {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center;
	}

	body .jd-services-row > .wp-block-column {
		flex: 0 1 calc(50% - 0.75rem) !important;
		max-width: 340px;
		box-sizing: border-box;
	}
}

/* Tablet (theme desktop mode starts at 782px): testimonials 2 + 1,
 * with the odd one centered instead of left-aligned. */
@media (min-width: 782px) and (max-width: 1024px) {
	body .jd-testimonials-row {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center;
	}

	body .jd-testimonials-row > .wp-block-column {
		flex: 0 1 calc(50% - 0.75rem) !important;
		box-sizing: border-box;
	}
}

/* Tablet: 3+ column rows on inner pages (pricing tables) were too
 * narrow — words broke mid-syllable. Wrap them 2-up, centered. */
@media (min-width: 782px) and (max-width: 1024px) {
	body:not(.home) main .wp-block-columns:has(> .wp-block-column:nth-child(3)) {
		flex-wrap: wrap !important;
		justify-content: center;
		gap: 2rem 1.5rem !important;
	}

	body:not(.home) main .wp-block-columns:has(> .wp-block-column:nth-child(3)) > .wp-block-column {
		flex: 0 1 calc(50% - 0.75rem) !important;
		box-sizing: border-box;
	}
}

/* Buttons never break mid-word. */
body .wp-block-button__link {
	white-space: nowrap;
}

@media (min-width: 1025px) {
	body .jd-services-row > .wp-block-column {
		flex-basis: 340px !important;
	}
}

/* Quick-nav cards: equal width and height ("Preguntas Frecuentes"
 * wraps to two lines and made its card stand out). */
@media (min-width: 600px) {
	body .jd-quicknav-row {
		align-items: stretch !important;
	}

	body .jd-quicknav-row > .wp-block-column {
		flex: 0 1 13rem !important;
		max-width: 13rem;
	}

	body .jd-quicknav-row > .wp-block-column > .wp-block-group {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------
 * Section headings — editorial scale.
 * --------------------------------------------------------------- */
body main h2.wp-block-heading:not(.lemmony-accordion-title) {
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* ---------------------------------------------------------------
 * Gallery — bento rhythm (alternating tall tiles) on desktop.
 * --------------------------------------------------------------- */
body .wp-block-gallery .wp-block-image {
	border-radius: 1.25rem;
	box-shadow: 0 20px 40px -24px rgba(42, 31, 29, 0.4);
}

body .wp-block-gallery .wp-block-image img {
	filter: saturate(0.85);
	transition: transform 0.7s var(--jd-ease-out), filter 0.5s ease;
}

body .wp-block-gallery .wp-block-image:hover img {
	filter: saturate(1.1);
}

/* Full-width banner photo above the stats: at 3:2 it ran taller than
 * a whole laptop screen. Cap it to the viewport and crop. */
body .jd-stats-wrap .wp-block-image img {
	width: 100%;
	max-height: min(70vh, 640px);
	object-fit: cover;
	object-position: center 30%;
}

/* Client-logo strip scrolls sideways on narrow screens; hide the
 * native grey scrollbar (swipe still works). */
body .jd-logos-row,
body .jd-logos-row * {
	scrollbar-width: none;
}

body .jd-logos-row ::-webkit-scrollbar,
body .jd-logos-row::-webkit-scrollbar {
	display: none;
}

/* ---------------------------------------------------------------
 * Counters — gradient numerals.
 * --------------------------------------------------------------- */
body .wp-block-lemmony-companion-counter {
	background: var(--jd-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------------------------------------------------------------
 * Testimonials — glass cards.
 * --------------------------------------------------------------- */
body .jd-testimonials-row > .wp-block-column > .wp-block-group {
	background: rgba(255, 255, 255, 0.7) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.8);
}

body .jd-testimonials-row img {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--jd-accent-tint);
}

/* ---------------------------------------------------------------
 * FAQ accordion — card list.
 * --------------------------------------------------------------- */
body .lemmony-accordion-title {
	transition: color 0.25s ease;
}

body .lemmony-accordion-title:hover {
	color: var(--jd-accent);
}

/* ---------------------------------------------------------------
 * Cursor follower (fine pointers only; injected by JS).
 * --------------------------------------------------------------- */
.jd-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	background: var(--jd-accent);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 9999;
	opacity: 0;
	transition: width 0.3s var(--jd-ease-out), height 0.3s var(--jd-ease-out), margin 0.3s var(--jd-ease-out), opacity 0.3s ease, background 0.3s ease;
}

.jd-cursor.is-visible {
	opacity: 0.85;
}

.jd-cursor.is-hover {
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	background: rgba(206, 130, 130, 0.35);
}

/* ---------------------------------------------------------------
 * Scroll-driven reveals (no JS). Only on elements the theme doesn't
 * already animate, so its own lemmony-animation keeps working.
 * --------------------------------------------------------------- */
@supports (animation-timeline: view()) {
	body .jd-services-row > .wp-block-column,
	body .jd-testimonials-row > .wp-block-column,
	body .jd-quicknav-row > .wp-block-column,
	body .wp-block-gallery .wp-block-image,
	body main h2.wp-block-heading:not(.lemmony-animation):not(.lemmony-accordion-title) {
		animation: jd-reveal linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 20%;
	}

	body .jd-services-row > .wp-block-column:nth-child(2),
	body .jd-testimonials-row > .wp-block-column:nth-child(2),
	body .wp-block-gallery .wp-block-image:nth-child(3n + 2) {
		animation-range: entry 5% cover 24%;
	}

	body .jd-services-row > .wp-block-column:nth-child(3),
	body .jd-testimonials-row > .wp-block-column:nth-child(3),
	body .wp-block-gallery .wp-block-image:nth-child(3n) {
		animation-range: entry 10% cover 28%;
	}

	/* Parallax CTA image drifts slower than the page. */
	body .lemmony-parallax .wp-block-cover__image-background {
		animation: jd-parallax linear both;
		animation-timeline: view();
	}
}

@keyframes jd-reveal {
	from {
		opacity: 0;
		transform: translateY(40px) scale(0.97);
		filter: blur(4px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

@keyframes jd-parallax {
	from {
		transform: translateY(-8%) scale(1.15);
	}
	to {
		transform: translateY(8%) scale(1.15);
	}
}

/* ---------------------------------------------------------------
 * Fluid page scale. The theme's type and spacing are rem-based, so
 * one continuous root font-size scales the whole page with the
 * viewport — no breakpoint jumps. It follows whichever axis is
 * tighter (width or height), so a short laptop viewport isn't
 * dwarfed by headings sized for a tall monitor:
 *   width:  14.5px @ 1280w -> 16px @ 1920w   (11.5px + 0.234vw)
 *   height: 14px   @ 730h  -> 16px @ 1000h   (8.6px + 0.741vh)
 * e.g. 1536x730 (1080p laptop at 125%) -> 14px; 1920x1000 -> 16px.
 * Phones stay at the browser default (16px) for legibility.
 * --------------------------------------------------------------- */
@media (min-width: 600px) {
	html {
		font-size: clamp(14px, min(11.5px + 0.234vw, 8.6px + 0.741vh), 16px);
	}
}

/* No offset band under the floating header: the hero runs to the top
 * of the viewport (its mesh gradient shows behind the glass pill) and
 * carries the header clearance as its own top padding instead. */
body main {
	margin-top: 0 !important;
}

/* Inner pages have no hero: clear the fixed header on the page wrapper
 * (some templates, e.g. Branding, have no <main>). Pages with their
 * own non-fixed header (WooCommerce cart/checkout) don't need it. */
body:has(.site-header):not(:has(.jd-hero-glow)) .wp-site-blocks {
	padding-top: 10.5rem;
}

body .jd-hero-glow {
	padding-top: 7.5rem !important;
}

/* Brand logo (assets/media/brand/*.svg, text converted to paths). */
body .site-header figure.wp-block-image {
	margin: 0 !important;
	line-height: 0;
}

body .site-header .jd-brand-logo {
	height: 3.6rem !important;
	width: auto !important;
	max-height: none !important;
}

body .site-footer .jd-brand-logo {
	width: min(15rem, 70vw) !important;
	height: auto !important;
}

body .jd-hero-glow .wp-block-button__link {
	padding: 0.95em 1.8em !important;
}

/* ---------------------------------------------------------------
 * Inner pages — brand palette, soft mesh header, editorial title.
 * --------------------------------------------------------------- */

/* The theme palette ships a green "primary" and a mint
 * "midground-alt-2" that aren't part of this brand; remap them on body
 * (beats the :root global-styles block regardless of load order). */
body {
	--wp--preset--color--primary: var(--jd-accent);
	--wp--preset--color--midground-alt-2: #f8ece8;
	--wp--preset--color--midground: #f6efea;
}

/* Soft brand mesh behind the top of every inner page (the homepage
 * hero paints its own). */
body:not(.home) {
	background:
		radial-gradient(50% 28rem at 12% 0%, rgba(244, 217, 210, 0.9), transparent 70%),
		radial-gradient(45% 26rem at 88% 0%, rgba(206, 130, 130, 0.18), transparent 70%),
		#fbf7f4 no-repeat !important;
}

/* Page titles: the custom templates open with a centered bold
 * paragraph; archive/page templates use real h1 title blocks. */
body:not(.home) main > p.has-text-align-center:first-child,
body:not(.home) main > h1:first-child,
body:not(.home) .wp-block-query-title,
body:not(.home) .wp-block-post-title:not(:is(li, .wp-block-post-template, .wc-block-product-template, .wc-block-product) *) {
	font-family: "Playfair Display", serif;
	font-size: clamp(2.25rem, 1.2rem + 3vw, 4rem) !important;
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: var(--jd-ink) !important;
	text-wrap: balance;
	margin-block: 1rem 2rem;
}

/* Loose top-level paragraphs (intros) ran edge to edge; keep them at a
 * readable measure. */
body:not(.home) main > p {
	max-width: 62ch;
	margin-inline: auto !important;
	padding-inline: 1.5rem;
	font-size: 1.1rem;
	line-height: 1.7;
}

body:not(.home) main > :is(p.has-text-align-center, h1):first-child {
	max-width: 22ch;
	margin-inline: auto !important;
	text-align: center;
}

/* Shop / product grids (WooCommerce blocks + classic templates). */
body select,
body .orderby {
	appearance: none;
	-webkit-appearance: none;
	padding: 0.6rem 2.5rem 0.6rem 1rem;
	border: 1px solid rgba(42, 31, 29, 0.12);
	border-radius: 9999px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23a86842' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1rem center;
	font: inherit;
	color: var(--jd-ink);
	cursor: pointer;
}

body .wc-block-grid__product-image img,
body .wc-block-components-product-image img,
body .woocommerce ul.products li.product img,
body .wp-block-woocommerce-product-image img {
	border-radius: 1.25rem;
	transition: transform 0.6s var(--jd-ease-out);
}

body .wc-block-components-product-image,
body .wp-block-woocommerce-product-image,
body .woocommerce ul.products li.product a:first-child {
	display: block;
	overflow: hidden;
	border-radius: 1.25rem;
}

body li.product:hover img,
body .wc-block-product:hover img,
body .wc-block-grid__product:hover img {
	transform: scale(1.05);
}

body .wp-block-button.wc-block-components-product-button .wp-block-button__link,
body .wc-block-components-product-button__button,
body .woocommerce a.button,
body .woocommerce button.button {
	border-radius: 9999px !important;
	white-space: nowrap;
	padding: 0.7em 1.3em !important;
	font-size: 0.9rem !important;
}

body .woocommerce span.onsale,
body .wc-block-components-product-sale-badge,
body .wc-block-grid__product-onsale {
	background: var(--jd-gradient) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 9999px !important;
	padding: 0.35em 0.9em !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* Templates without a title block (e.g. Branding) open with a plain
 * paragraph: promote it to the page headline. */
body:not(.home) .wp-block-post-content > :is(p, h1):first-child {
	font-family: "Playfair Display", serif;
	font-size: clamp(2rem, 1.1rem + 2.6vw, 3.5rem) !important;
	line-height: 1.1;
	letter-spacing: -0.025em;
	font-weight: 700;
	color: var(--jd-ink);
	max-width: 20ch;
	margin: 0 auto 1.5rem !important;
	text-wrap: balance;
}

/* Tiny intro copy (14px) was hard to read at the top of pages. */
body:not(.home) :is(main, .wp-block-post-content) > p.has-tiny-font-size:not(:first-child) {
	font-size: 1.05rem !important;
	line-height: 1.7;
	max-width: 62ch;
	margin-inline: auto !important;
}

/* Paragraphs used as section headings (large preset sizes) get the
 * editorial face like real headings. */
body:not(.home) :is(main, .wp-block-post-content) p:is(.has-large-font-size, .has-x-large-font-size, .has-medium-plus-font-size, .has-large-plus-font-size, .has-huge-font-size) {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-wrap: balance;
}

body:not(.home) .wp-block-heading {
	font-family: "Playfair Display", serif !important;
	letter-spacing: -0.02em;
}

/* Lists: brand markers and breathing room instead of a dense wall. */
body:not(.home) main ul.wp-block-list,
body:not(.home) .wp-block-post-content ul.wp-block-list {
	padding-left: 1.4em;
	line-height: 1.65;
}

body:not(.home) main ul.wp-block-list li,
body:not(.home) .wp-block-post-content ul.wp-block-list li {
	margin-block: 0.45em;
}

body:not(.home) main ul.wp-block-list li::marker,
body:not(.home) .wp-block-post-content ul.wp-block-list li::marker {
	content: "\2726  ";
	color: var(--jd-accent);
	font-size: 0.8em;
}

/* A lone full-width text column (Asesoría's terms, etc.) reads as a
 * floating card instead of loose text on the page. */
body:not(.home) main .wp-block-columns > .wp-block-column:only-child:not(:has(> figure:only-child)):not(:has(.wp-block-columns)) {
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: var(--jd-radius);
	box-shadow: 0 20px 50px -30px rgba(42, 31, 29, 0.3);
	padding: clamp(1.5rem, 4vw, 3rem) !important;
}

/* Image-only columns (package flyers, samples) become lifted cards. */
body:not(.home) .wp-block-column > figure.wp-block-image:only-child img {
	border-radius: 1.25rem;
	box-shadow: 0 24px 50px -28px rgba(42, 31, 29, 0.45);
	transition: transform 0.5s var(--jd-ease-out), box-shadow 0.5s ease;
}

body:not(.home) .wp-block-column > figure.wp-block-image:only-child:hover img {
	transform: translateY(-6px);
	box-shadow: 0 34px 60px -28px rgba(42, 31, 29, 0.5);
}

body:not(.home) .wp-block-columns:has(> .wp-block-column > figure.wp-block-image:only-child) {
	gap: clamp(1rem, 3vw, 2.5rem) !important;
}

body:not(.home) main > :is(p.has-text-align-center, h1):first-child strong {
	font-weight: inherit;
	color: inherit !important;
}

/* ---------------------------------------------------------------
 * Mobile swipe carousels (theme's mobile mode: <= 781px). Each
 * services row and the testimonials become a native scroll-snap strip
 * instead of a very long stack of full-width cards.
 * --------------------------------------------------------------- */
@media (max-width: 781px) {
	body .jd-services-row,
	body .jd-testimonials-row {
		display: flex !important;
		flex-wrap: nowrap !important;
		/* centered content would overflow to the unreachable left side */
		justify-content: flex-start !important;
		gap: 1rem !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 1.25rem;
		padding: 0.5rem 1.25rem 1.5rem !important;
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1.25rem)) !important;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
		mask-image: linear-gradient(90deg, #000 85%, transparent);
	}

	body .jd-services-row::-webkit-scrollbar,
	body .jd-testimonials-row::-webkit-scrollbar {
		display: none;
	}

	/* Client logos/avatars rendered at 200px in the stacked card. */
	body .jd-testimonials-row img {
		width: 84px !important;
		height: 84px !important;
		object-fit: contain;
		background: #fff;
	}

	/* Quick-nav: 2x2 grid instead of four full-width bars. */
	body .jd-quicknav-row {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem !important;
	}

	body .jd-quicknav-row > .wp-block-column {
		max-width: none !important;
		margin: 0 !important;
	}

	body .jd-quicknav-row > .wp-block-column > .wp-block-group {
		height: 100%;
		padding: 1.25rem 0.75rem !important;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* About-me portrait cover carries an inline 851px min-height —
	 * nearly two phone screens. Use a portrait ratio instead. */
	body .wp-block-cover.lemmony-aspect-square {
		min-height: 0 !important;
		aspect-ratio: 4 / 5 !important;
	}

	/* Leading spacers inside cards only exist to line cards up side by
	 * side on desktop (e.g. pricing vs. the "Popular" card); stacked
	 * on a phone they're just empty gaps. */
	body:not(.home) main .wp-block-group > .wp-block-spacer:first-child {
		display: none;
	}

	/* Rounded content cards (pricing etc.) keep desktop-sized side
	 * padding inline; on a phone it squeezes the text column. */
	body:not(.home) main .wp-block-group[style*="border-radius"] {
		padding-inline: 1.25rem !important;
	}

	/* The two service rows read as one continuous strip pair. */
	body .jd-services-row + .jd-services-row {
		margin-top: 0 !important;
	}

	body .jd-services-row > .wp-block-column,
	body .jd-testimonials-row > .wp-block-column {
		flex: 0 0 76vw !important;
		max-width: 76vw !important;
		width: 76vw !important;
		box-sizing: border-box;
		margin: 0 !important;
		scroll-snap-align: start;
		/* view() would track the horizontal scroller here and hide
		 * off-screen cards; no scroll reveal inside carousels. */
		animation: none !important;
	}
}

/* ---------------------------------------------------------------
 * Mobile tuning.
 * --------------------------------------------------------------- */
@media (max-width: 599px) {
	body::after {
		opacity: 0.035;
	}

	.jd-marquee {
		transform: rotate(-1.5deg) scale(1.04);
	}
}

/* ---------------------------------------------------------------
 * Reduced motion: keep the look, drop the movement.
 * --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body .jd-hero-glow .jd-word,
	body .jd-hero-glow .jd-word.jd-word-accent {
		animation: none;
		opacity: 1;
		filter: none;
		transform: none;
	}

	.jd-marquee__track,
	.jd-progress,
	body .jd-services-row > .wp-block-column > .wp-block-group::before,
	body .jd-services-row > .wp-block-column,
	body .jd-testimonials-row > .wp-block-column,
	body .jd-quicknav-row > .wp-block-column,
	body .wp-block-gallery .wp-block-image,
	body main h2.wp-block-heading,
	body .lemmony-parallax .wp-block-cover__image-background {
		animation: none !important;
	}
}