/*
 * Lifetime Media — site styles (child theme of GeneratePress).
 *
 * Loaded on the site after GeneratePress (handle lifetime-media-main) and in the block editor through
 * block_editor_settings_all (inc/setup.php), before editor.css.
 *
 * Colors are GeneratePress Global Colors (Customizer > Colors): GP prints them as --forest-800, --cream…
 * The aliases below keep the names of the approved design (assets/source/NN-page/base.css).
 * Fonts come from the GP Premium Font Library (--gp-font--{slug}); families, weights and base sizes are set
 * in Customizer > Typography. Only the fluid sizes (clamp) of the approved design live here.
 *
 * One commented block per component and per section, with its ref (01.02 hero…), is added by each build step.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	/* Colors → GP Global Colors */
	--color-forest-950: var(--forest-950, #0C1F17);
	--color-forest-900: var(--forest-900, #10291E);
	--color-forest-800: var(--forest-800, #173A2B);
	--color-forest-700: var(--forest-700, #245039);
	--color-olive-600: var(--olive-600, #5F7F2A);
	--color-olive-500: var(--olive-500, #7C9B3E);
	--color-sage-300: var(--sage-300, #C3D59C);
	--color-sage-200: var(--sage-200, #DCE6C6);
	--color-sage-100: var(--sage-100, #EEF2E3);
	--color-cream: var(--cream, #F4F4EA);
	--color-white: var(--white, #FFFFFF);
	--color-ink: var(--ink, #14231B);
	--color-muted: var(--muted, #46564C);
	--color-on-dark: var(--on-dark, #D6DFCC);
	--color-border: var(--border, #DDE2D6);
	--color-focus: var(--focus, #C3D59C);

	/* Fonts → GP Premium Font Library */
	--font-heading: var(--gp-font--space-grotesk, "Space Grotesk", system-ui, sans-serif);
	--font-body: var(--gp-font--inter, "Inter", system-ui, sans-serif);
	--font-mono: var(--gp-font--jetbrains-mono, "JetBrains Mono", ui-monospace, monospace);

	/* Type scale (fluid sizes of the approved design; GP's size control does not accept clamp()) */
	--fs-h1: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);
	--fs-h2: clamp(1.875rem, 1.5rem + 1.4vw, 2.75rem);
	--fs-hero-headline: 2.25rem; /* 03-laravel: 2.25rem / 1.625rem mobile */
	--fs-h3-service: 1.625rem;
	--fs-h3: 1.25rem;
	--fs-lead: 1.1875rem;
	--fs-body: 1rem;
	--fs-small: 0.9375rem;
	--fs-mono: 0.875rem;
	--fs-xs: 0.8125rem;

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	/* Radii and shadows */
	--radius-sm: 12px;
	--radius-md: 20px;
	--radius-lg: 28px;
	--radius-pill: 999px;
	--radius-organic: 120px;
	--shadow-window: 0 24px 48px -20px rgba(8, 24, 16, .55);
	--shadow-soft: 0 10px 30px -18px rgba(16, 41, 30, .35);

	/* Layout */
	--container: 1240px;
	--gutter: 40px;
	--header-h: 76px;
	--curve-h: 96px;
	--read-width: 680px;
	--measure: 68ch;
	--hero-compact-pad-top: 96px;
	--hero-compact-pad-bottom: 160px;

	/* Focus ring: forest-700 on light backgrounds, sage-300 on dark ones (see .is-dark-context below) */
	--focus-ring: var(--color-forest-700);
}

@media (max-width: 767px) {
	:root {
		--gutter: 20px;
		--header-h: 64px;
		--fs-h1: 2.5rem;
		--fs-h2: 1.875rem;
		--fs-hero-headline: 1.625rem;
		--fs-h3-service: 1.375rem;
		--fs-h3: 1.1875rem;
		--fs-lead: 1.0625rem;
		--fs-mono: 0.8125rem;
		--radius-organic: 72px;
		--curve-h: 56px;
		--hero-compact-pad-top: 48px;
		--hero-compact-pad-bottom: 104px;
	}
}

/* ==========================================================================
   Base
   ========================================================================== */
html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Fluid heading sizes (family, weight, line-height and tracking come from Customizer > Typography) */
h1 {
	font-size: var(--fs-h1);
}

h2 {
	font-size: var(--fs-h2);
}

img {
	max-width: 100%;
	height: auto;
}

/* Visible focus, 2 px. Dark contexts switch the color with --focus-ring. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
}

:where(a, button):focus-visible {
	border-radius: 6px;
}

.site-header,
#generate-slideout-menu,
footer.site-footer,
.is-dark-context {
	--focus-ring: var(--color-focus);
}

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

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

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

/* ==========================================================================
   GeneratePress resets for the design pages
   ========================================================================== */

/* Design pages (Layout Element «Páginas de diseño»: full-width content). GP gives every direct child of
   .site-main a 20 px bottom margin; full-width bands must reach the footer without a strip. */
.full-width-content .site-main > * {
	margin-bottom: 0;
}

/* «One container» paints .one-container .container (0,2,0) white: that also reaches the design's own
   .container (sections, footer). GP's containers always carry .grid-container. */
.container:not(.grid-container) {
	background-color: transparent;
}

/* Design sections: approved reset of block margins, scoped to the sections (weight 0,0,1, loaded after GP,
   so it beats GP's p / h2 / ul margins but not any class of a component). */
:where([data-section]) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote) {
	margin: 0;
}

:where([data-section]) :is(ul, ol) {
	padding: 0;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
/* The design's .container. GP also prints «container grid-container» on its own wrappers (.site, header,
   footer): they keep GP's settings. */
.container:not(.grid-container) {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section--cream {
	background-color: var(--color-cream);
}

.section--white {
	background-color: var(--color-white);
}

/* ==========================================================================
   Components and sections (added by each build step, with their ref)
   ========================================================================== */

/* --- components: brand (logo) — inc/brand.php, block lifetime-media/brand ------------------ */
.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	line-height: 1;
}

.brand__symbol {
	width: 36px;
	height: 36px;
	flex: none;
}

.brand__ring {
	fill: none;
	stroke-width: 3.2;
	stroke-linecap: round;
}

.brand__ring--outer {
	stroke-dasharray: 78 23;
	transform: rotate(-40deg);
	transform-origin: 20px 20px;
}

.brand__ring--mid {
	stroke-dasharray: 46 17;
	transform: rotate(130deg);
	transform-origin: 20px 20px;
}

.brand__word {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--font-heading);
	font-size: 1.5rem;
	letter-spacing: -0.035em;
}

.brand__lifetime {
	font-weight: 700;
}

.brand__media {
	font-weight: 500;
}

.brand__by {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-xs);
	letter-spacing: 0;
	padding-left: var(--space-3);
	border-left: 1px solid currentColor;
	align-self: center;
	line-height: 1.1;
	opacity: .85;
}

/* a.brand and its states beat GP's a / a:hover (0,1,1) */
a.brand--light,
a.brand--light:is(:hover, :focus, :active, :visited) {
	color: var(--color-white);
}

.brand--light .brand__media { color: var(--color-sage-300); }
.brand--light .brand__ring--outer { stroke: var(--color-sage-300); }
.brand--light .brand__ring--mid { stroke: var(--color-olive-500); }
.brand--light .brand__core { fill: var(--color-white); }

a.brand--dark,
a.brand--dark:is(:hover, :focus, :active, :visited) {
	color: var(--color-forest-900);
}

.brand--dark .brand__media { color: var(--color-olive-600); }
.brand--dark .brand__ring--outer { stroke: var(--color-olive-600); }
.brand--dark .brand__ring--mid { stroke: var(--color-olive-500); }
.brand--dark .brand__core { fill: var(--color-forest-800); }

@media (max-width: 767px) {
	.brand { gap: var(--space-2); }
	.brand__symbol { width: 30px; height: 30px; }
	.brand__word { font-size: 1.25rem; }
	.brand__by { font-size: 0.6875rem; padding-left: var(--space-2); }
}

/* --- components: buttons — core/button with the styles of inc/block-styles.php ------------
   Colors and sizes are variables, so each style (and each section) changes them with one class.
   The link rule weighs 0,3,1 and its states 0,4,1, above GP's a.wp-block-button__link:not(.has-background)
   (0,2,1 / 0,3,1 with its states). Approved: .btn, .btn--primary, --ghost, --dark, --outline, --lg. */
.wp-block-button {
	--btn-bg: var(--color-sage-300);
	--btn-fg: var(--color-forest-950);
	--btn-border: transparent;
	--btn-bg-hover: var(--color-sage-200);
	--btn-fg-hover: var(--btn-fg);
	--btn-border-hover: var(--btn-border);
	--btn-height: 52px;
	--btn-pad: var(--space-6);
}

.wp-block-button.is-style-ghost {
	--btn-bg: transparent;
	--btn-fg: var(--color-white);
	--btn-border: rgba(255, 255, 255, .45);
	--btn-bg-hover: rgba(255, 255, 255, .08);
}

.wp-block-button.is-style-dark {
	--btn-bg: var(--color-forest-800);
	--btn-fg: var(--color-white);
	--btn-bg-hover: var(--color-forest-700);
}

.wp-block-button.is-style-outline-dark {
	--btn-bg: transparent;
	--btn-fg: var(--color-forest-900);
	--btn-border: var(--color-forest-800);
	--btn-bg-hover: var(--color-sage-100);
}

.wp-block-button.btn--lg {
	--btn-height: 56px;
	--btn-pad: var(--space-7);
}

:root .wp-block-button > a.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	box-sizing: border-box;
	min-height: var(--btn-height);
	padding: 0 var(--btn-pad);
	border: 1.5px solid var(--btn-border);
	border-radius: var(--radius-pill);
	background-color: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: -0.005em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s, transform .2s;
}

:root .wp-block-button > a.wp-block-button__link:is(:hover, :focus, :active) {
	background-color: var(--btn-bg-hover);
	color: var(--btn-fg-hover);
	border-color: var(--btn-border-hover);
}

/* Arrow «→» (U+2192 is not in the latin subset of the self-hosted Inter: drawn with a mask) */
.wp-block-button.has-arrow > .wp-block-button__link::after,
.link-arrow::after {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url(../masks/arrow.svg) center / contain no-repeat;
	mask: url(../masks/arrow.svg) center / contain no-repeat;
	transition: transform .2s;
}

/* Buttons: the approved «→» came from a system font (not in Inter's subset): about 15 px of advance at 16 px,
   a taller and heavier head than the line arrow. arrow-glyph.svg is drawn on that glyph (16 px box, left),
   measured in the approved buttons (×10): shaft ≈1.8 px thick, head ≈12 px tall with arms from x≈7.
   The glyph rounded with the text baseline and the mask with the box centre: shaft at y=8 matches the
   Inicio hero and CTA and the mobile CTAs; the desktop CTA of WordPress keeps it 1 px higher. */
.wp-block-button.has-arrow > .wp-block-button__link::after {
	width: .9375em;
	-webkit-mask: url(../masks/arrow-glyph.svg?v=5) 0 50% / 1em 1em no-repeat;
	mask: url(../masks/arrow-glyph.svg?v=5) 0 50% / 1em 1em no-repeat;
}

/* «Visitar Proyecto →» of the project cards (600, 15 px): the system-font glyph measured ×16 in the
   05-portfolio approved, about 11 px of shaft 2 px thick and a head 10 px tall from x≈8. The service-card
   links keep arrow.svg: the 01-home approved drew their glyph thinner and 1 px lower (another renderer). */
.card--project .link-arrow::after {
	-webkit-mask: url(../masks/arrow-link.svg?v=2) 0 0 / 1em 1em no-repeat;
	mask: url(../masks/arrow-link.svg?v=2) 0 0 / 1em 1em no-repeat;
}

.wp-block-button.has-arrow > .wp-block-button__link:hover::after,
.link-arrow:hover::after {
	transform: translateX(3px);
}

/* External link icon (approved .btn__ext, 18 px) */
.wp-block-button.has-external-icon > .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url(../masks/arrow-external.svg) center / contain no-repeat;
	mask: url(../masks/arrow-external.svg) center / contain no-repeat;
}

/* --- components: eyebrow (Antetítulo) — core/paragraph style «eyebrow» -----------------------
   olive-600 gives 4,6:1 on white but 4,2:1 on cream: on cream sections it is forest-700. Light (sage-300)
   with its dot in the heroes. Font family from Customizer > Typography (.is-style-eyebrow → JetBrains Mono). */
.is-style-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--eyebrow-color, var(--color-olive-600));
}

:where([data-section]) .is-style-eyebrow,
.is-style-eyebrow {
	margin-bottom: var(--space-4);
}

.section--cream {
	--eyebrow-color: var(--color-forest-700);
}

.hero,
.is-dark-context {
	--eyebrow-color: var(--color-sage-300);
}

.hero .is-style-eyebrow::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	box-sizing: border-box;
	border: 2px solid var(--color-sage-300);
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(195, 213, 156, .18);
}

@media (max-width: 767px) {
	.is-style-eyebrow { font-size: 0.75rem; }
}

/* --- components: section-head — inc/pattern-parts/section-head.php -------------------------- */
.section-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-h2);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--color-forest-900);
}

.section-head {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: var(--space-8);
	align-items: end;
	margin-bottom: var(--space-8);
}

.section-head.section-head--single {
	display: block;
	margin-bottom: var(--space-7);
}

.section-head__text {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--color-muted);
	padding-bottom: var(--space-2);
}

@media (max-width: 767px) {
	.section-head {
		grid-template-columns: 1fr;
		gap: var(--space-4);
		margin-bottom: var(--space-6);
	}

	.section-head.section-head--single { margin-bottom: var(--space-6); }
	.section-head__text { font-size: var(--fs-body); }
}

/* --- components: card — inc/pattern-parts/service-card.php and project-card.php -------------- */
/* Grid of service cards (approved .service-grid): equal heights, the link of each card at the bottom */
.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	align-items: stretch;
}

@media (max-width: 1100px) {
	.service-grid { gap: var(--space-5); }
}

@media (max-width: 1023px) {
	.service-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.service-grid { gap: var(--space-4); }
}

.card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	overflow: hidden;
}

.card--service {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	padding: var(--space-7) var(--space-6) var(--space-6);
}

.card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 68px;
	height: 68px;
	border-radius: var(--radius-md);
	background-color: var(--color-sage-100);
	margin-bottom: var(--space-5);
}

.card__logo :is(.wp-block-image, .gb-shape) {
	display: flex;
	margin: 0;
}

.card__logo :is(img, svg) {
	display: block;
	width: 38px;
	height: 38px;
	object-fit: contain;
}

.card__logo-icon-main { fill: var(--color-forest-700); }
.card__logo-icon-sub { fill: var(--color-olive-500); }

.card__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-h3);
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--color-forest-900);
}

.card__title.card__title--service {
	font-size: var(--fs-h3-service);
	letter-spacing: -0.02em;
	margin-bottom: var(--space-3);
}

.card__text {
	color: var(--color-muted);
	font-size: var(--fs-body);
}

.card--service .card__text {
	margin-bottom: var(--space-5);
}

/* Link at the bottom of the card («Más información →»): the paragraph is the flex item */
.card__link {
	margin-top: auto;
	align-self: flex-start;
}

a.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--color-forest-700);
	text-decoration: none;
}

a.link-arrow:is(:hover, :focus, :active) {
	color: var(--color-olive-600);
}

/* Project card: Loop Item of the GenerateBlocks Query */
.card--project {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-md);
}

.card__media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
	border-bottom: 1px solid var(--color-border);
}

.card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-5) var(--space-5) var(--space-4);
}

.card--project .card__text {
	font-size: var(--fs-small);
	margin: var(--space-2) 0 var(--space-3);
}

.card--project .link-arrow {
	margin-top: auto;
	align-self: flex-start;
}

@media (max-width: 767px) {
	.card--service {
		padding: var(--space-6) var(--space-5);
		border-radius: 24px;
	}

	.card__logo {
		width: 56px;
		height: 56px;
		border-radius: 16px;
		margin-bottom: var(--space-4);
	}

	.card__logo :is(img, svg) { width: 32px; height: 32px; }
	.card__title { font-size: 1.1875rem; }
	.card__body { padding: var(--space-4) var(--space-5) var(--space-3); }
}

/* --- components: lists — core/list styles of inc/block-styles.php ---------------------------
   «Lista con marcas» (approved .checklist): the li is not flex/grid (bold or links in the text would become
   items); the mark is a 24 px circle (::before) plus the check as a mask (::after), aligned with line 1. */
:where([data-section]) .is-style-checklist,
.is-style-checklist {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-6);
}

.is-style-checklist > li {
	position: relative;
	margin: 0;
	padding: var(--space-3) 0 var(--space-3) 36px;
	box-sizing: border-box; /* GP's border-box does not reach the editor canvas */
	min-height: calc(22px + 2 * var(--space-3) + 1px); /* approved 24 px icon with margin-top:-2px = 22 px minimum line, 47 px row */
	border-top: 1px solid var(--color-border);
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--color-ink);
}

.is-style-checklist > li:last-child {
	min-height: calc(22px + 2 * var(--space-3) + 2px); /* border-box: the last row also carries the bottom rule (48 px) */
	border-bottom: 1px solid var(--color-border);
}

.is-style-checklist > li::before,
.is-style-checklist > li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 24px;
	height: 24px;
}

.is-style-checklist > li::before {
	border-radius: 50%;
	background-color: var(--color-sage-200);
}

.is-style-checklist > li::after {
	background-color: var(--color-forest-700);
	-webkit-mask: url(../masks/check.svg) center / 100% 100% no-repeat;
	mask: url(../masks/check.svg) center / 100% 100% no-repeat;
}

/* The static card anchors its list at the bottom (04.03) */
.card--static .is-style-checklist {
	margin: auto 0 0;
}

/* --- components: decorative layers — curves and rings as masks ------------------------------
   The curve of a section takes the color of the neighbouring section: each section carries
   .section--cream / .section--white and the neighbours set --prev-bg / --next-bg. The synced «Llamada final»
   is wrapped in .wp-block-block in the editor, hence the second selector of each pair.
   Utilities (sections set the mask and size variables):
   .has-curve-top    ::before  top curve, color --prev-bg (mask --curve-top-mask)
   .has-curve-bottom ::after   bottom curve, color --next-bg (mask --curve-bottom-mask)
   .has-rings        ::before  (::after when the section also has a top curve), --rings-* variables */
[data-section] {
	--prev-bg: var(--color-white);
	--next-bg: var(--color-white);
}

:is(.section--cream) + [data-section],
:is(.section--cream) + .wp-block-block > [data-section] {
	--prev-bg: var(--color-cream);
}

:is(.section--white) + [data-section],
:is(.section--white) + .wp-block-block > [data-section] {
	--prev-bg: var(--color-white);
}

[data-section]:has(+ .section--cream, + .wp-block-block > .section--cream:first-child) {
	--next-bg: var(--color-cream);
}

[data-section]:has(+ .section--white, + .wp-block-block > .section--white:first-child) {
	--next-bg: var(--color-white);
}

:is(.has-curve-top, .has-curve-bottom, .has-rings) {
	position: relative;
	overflow: hidden;
	--curve-top-mask: url(../masks/curve-section-top.svg);
	--curve-bottom-mask: url(../masks/curve-section-bottom.svg);
	--curve-top-h: var(--curve-h);
	--curve-bottom-h: var(--curve-h);
}

/* Content above the rings, curves above the content (as in the approved DOM order) */
:is(.has-curve-top, .has-curve-bottom, .has-rings) > * {
	position: relative;
	z-index: 1;
}

.has-curve-top::before,
.has-curve-bottom::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 2;
	pointer-events: none;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.has-curve-top::before {
	top: -1px;
	height: var(--curve-top-h);
	background-color: var(--curve-top-color, var(--prev-bg));
	-webkit-mask-image: var(--curve-top-mask);
	mask-image: var(--curve-top-mask);
}

.has-curve-bottom::after {
	bottom: -1px;
	height: var(--curve-bottom-h);
	background-color: var(--curve-bottom-color, var(--next-bg));
	-webkit-mask-image: var(--curve-bottom-mask);
	mask-image: var(--curve-bottom-mask);
}

.has-rings:not(.has-curve-top)::before,
.has-rings.has-curve-top::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: var(--rings-top, auto);
	right: var(--rings-right, auto);
	bottom: auto;
	left: var(--rings-left, auto);
	width: var(--rings-size, 640px);
	height: var(--rings-size, 640px);
	transform: var(--rings-transform, none);
	pointer-events: none;
	background-color: var(--rings-color, rgba(195, 213, 156, .09));
	-webkit-mask: var(--rings-mask, url(../masks/rings-hero.svg)) center / 100% 100% no-repeat;
	mask: var(--rings-mask, url(../masks/rings-hero.svg)) center / 100% 100% no-repeat;
}

/* ==========================================================================
   01.01 header — GP header + Menu Plus (Off Canvas Panel, Overlay, ≤1023 px)
   Native (Customizer, seeded by bin/apply-customizer.php): colors of header, navigation and Off Canvas
   panel, menu typography (Inter 500 15 px / panel 20 px), header padding 0/40 (0/20 mobile), menu items
   16 px each side × 44 px tall, panel items 48 px, mobile menu breakpoint 1023 px. Logo: inc/brand.php.
   Here: sticky, the 76/64 px row, the active underline, «Contacta» as a button and the bordered burger.
   ========================================================================== */
.site-header {
	--nav-item-pad: 16px; /* = Customizer > Layout > Primary Navigation > Menu Item Width */
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

@media (min-width: 601px) {
	.admin-bar .site-header {
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}

/* One row at every width (GP's main.css stacks .inside-header at ≤768 px). GP adds the side padding to
   the container width (max-width 1240 + 2 × 40): the approved .container is 1240 px including the gutter. */
.site-header .inside-header.grid-container {
	max-width: var(--container);
}

.site-header .inside-header {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-h);
	text-align: left;
}

.site-header .site-branding {
	flex: none;
}

/* flex: the inline-flex logo would sit on the baseline of the <p> and the descender space below it would lift
   the logo 1 px above the centre of the row (the approved .brand is a direct flex item of the row). */
.site-header .main-title {
	display: flex;
	margin: 0;
	font-size: inherit;
	line-height: 1;
}

/* Desktop menu (approved .main-nav__link): the text is centred in 42 px plus the transparent 2 px bottom border
   of the approved link, not in GP's 44 px line-height (which put it 1 px lower). */
#site-navigation .main-nav > ul > li > a {
	position: relative;
	transition: color .2s;
}

#site-navigation .main-nav > ul > li:not(.btn--nav) > a {
	line-height: 42px;
	border-bottom: 2px solid transparent;
}

#site-navigation .main-nav > ul > li:is(.current-menu-item, .current-menu-ancestor):not(.btn--nav) > a,
#generate-slideout-menu .slideout-menu > li:is(.current-menu-item, .current-menu-ancestor):not(.btn--nav) > a {
	font-weight: 600;
}

/* Active underline: 2 px sage-300 under the text only (the link keeps GP's side padding) */
#site-navigation .main-nav > ul > li:is(.current-menu-item, .current-menu-ancestor):not(.btn--nav) > a::after,
#generate-slideout-menu .slideout-menu > li:is(.current-menu-item, .current-menu-ancestor):not(.btn--nav) > a::after {
	content: "";
	position: absolute;
	left: var(--nav-item-pad, 16px);
	right: var(--nav-item-pad, 16px);
	bottom: 0;
	height: 2px;
	background-color: var(--color-sage-300);
}

/* Desktop: on the link's transparent 2 px border, like the approved border-bottom (::after starts at the padding box) */
#site-navigation .main-nav > ul > li:is(.current-menu-item, .current-menu-ancestor):not(.btn--nav) > a::after {
	bottom: -2px;
}

@media (max-width: 1100px) {
	.site-header {
		--nav-item-pad: 12px; /* approved gap 24 px between 1024 and 1100 px */
	}

	#site-navigation .main-nav > ul > li:not(.btn--nav) > a {
		padding-inline: var(--nav-item-pad);
	}
}

/* «Contacta»: last menu item with the classes «btn btn--nav» (approved .btn.btn--nav). The id beats GP's
   hover/current rules (0,4,3). Used in the header and in the Off Canvas panel. */
:is(#site-navigation, #generate-slideout-menu) .main-nav li.btn--nav {
	display: flex;
	align-items: center;
}

#site-navigation .main-nav li.btn--nav {
	margin-left: var(--nav-item-pad, 16px); /* + the padding of «Sobre mí» = 32 px (24 px at ≤1100 px) */
}

:is(#site-navigation, #generate-slideout-menu) .main-nav li.btn--nav > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 var(--space-5);
	border: 1.5px solid transparent;
	border-radius: var(--radius-pill);
	background-color: var(--color-sage-300);
	color: var(--color-forest-950);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: -0.005em;
	white-space: nowrap;
	transition: background-color .2s;
}

:is(#site-navigation, #generate-slideout-menu) .main-nav li.btn--nav > a:is(:hover, :focus, :active) {
	background-color: var(--color-sage-200);
	color: var(--color-forest-950);
}

/* ≤1023 px the Off Canvas panel replaces the menu: GP keeps the empty #site-navigation as a flex item next
   to the burger, which would push the burger away from the right edge. */
@media (max-width: 1023px) {
	.slideout-mobile #masthead #site-navigation {
		display: none;
	}
}

/* Burger (≤1023 px, GP shows .mobile-menu-control-wrapper): 44 × 44 with border, three 20 × 2 px lines */
#masthead .mobile-menu-control-wrapper .menu-toggle,
#masthead .mobile-menu-control-wrapper .menu-toggle:is(:hover, :focus) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	line-height: 1;
	background-color: transparent;
	color: var(--color-white);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--radius-sm);
}

#masthead .mobile-menu-control-wrapper .menu-toggle .gp-icon svg {
	display: none;
}

#masthead .mobile-menu-control-wrapper .menu-toggle .gp-icon {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background-color: currentColor;
	box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
}

/* Off Canvas panel (Overlay, full screen): forest-800 from the Customizer; the close button sits where the
   burger was; 48 px links (Customizer) and «Contacta» as the last button. */
#generate-slideout-menu.do-overlay .inside-navigation {
	max-width: none;
	padding: calc(var(--header-h) + var(--space-5)) var(--gutter) var(--space-7);
}

#generate-slideout-menu.do-overlay .slideout-exit {
	position: fixed;
	top: calc((var(--header-h) - 44px) / 2);
	right: var(--gutter);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--color-white);
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--radius-sm);
}

#generate-slideout-menu .slideout-menu > li:not(.btn--nav) > a {
	position: relative;
	display: inline-block;
}

#generate-slideout-menu .slideout-menu li.btn--nav {
	justify-content: center;
	margin-top: var(--space-5);
}

#generate-slideout-menu .slideout-menu li.btn--nav > a {
	min-height: 52px;
	padding: 0 var(--space-6);
	font-size: 1rem;
}

/* ==========================================================================
   01.02 hero — patterns/home-hero.php (section.hero.hero--home, data-section «Hero»)
   gb/element section > .container.hero__grid > [.hero__content | .hero__visual]; Antetítulo, core/heading
   H1 .hero__title (highlighted word: «Resaltado» in Salvia), core/paragraph .hero__lead, core/buttons
   .hero__actions and two core/image .browser. Rings (::before) and bottom curve (::after, color of the next
   section, cream before Servicios) are masks of the decorative layers. sizes/LCP: inc/render-filters.php.
   .hero is shared with the compact hero (02.02), which adds .hero--compact.
   ========================================================================== */
.hero {
	--rings-size: 640px;
	--rings-top: -120px;
	--rings-right: -140px;
	--curve-bottom-mask: url(../masks/curve-hero-home.svg);
	--next-bg: var(--color-cream); /* until a section follows: the neighbour rules (0,2,0) win */
	background: linear-gradient(160deg, var(--color-forest-800) 0%, var(--color-forest-800) 55%, var(--color-forest-700) 100%);
	color: var(--color-white);
	padding: var(--space-9) 0 168px;
	min-height: 72vh;
}

.hero .hero__title {
	max-width: 14ch;
	margin-bottom: var(--space-5);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-h1);
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--color-white);
}

.hero .hero__title mark {
	padding: 0;
	background-color: transparent;
	color: var(--color-sage-300);
}

.hero .hero__lead {
	max-width: 34rem;
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--color-on-dark);
}

.hero .wp-block-buttons.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-7);
}

.hero .hero__actions > .wp-block-button {
	margin: 0;
}

/* Home: text 7fr | screenshots 5fr */
.hero__grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--space-8);
	align-items: center;
}

.hero__visual {
	position: relative;
	height: 440px;
}

/* Browser window (approved .browser + .browser__bar with three dots): the bar is the 28 px top padding of
   the figure, the dots its ::before (::after is the editor's selection outline). */
.hero .wp-block-image.browser {
	position: absolute;
	box-sizing: border-box; /* the 4 px border of the secondary window is inside its 62 % (also in the editor) */
	margin: 0;
	padding-top: 28px;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: linear-gradient(var(--color-sage-100) 0 28px, var(--color-white) 28px);
	box-shadow: var(--shadow-window);
}

.hero .wp-block-image.browser::before {
	content: "";
	position: absolute;
	top: 10px;
	left: var(--space-3);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #c6cfbc;
	box-shadow: 14px 0 0 #c6cfbc, 28px 0 0 #c6cfbc;
}

.hero .wp-block-image.browser img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
}

.hero .wp-block-image.browser--main {
	top: 0;
	right: 0;
	width: 94%;
}

.hero .wp-block-image.browser--sub {
	left: -6%;
	bottom: 0;
	width: 62%;
	border: 4px solid var(--color-forest-800);
}

@media (max-width: 1100px) {
	.hero__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-7);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.hero__grid {
		grid-template-columns: 1fr;
	}

	.hero__visual {
		max-width: 560px;
	}
}

@media (max-width: 767px) {
	.hero {
		--rings-size: 420px;
		--rings-right: -200px;
		--rings-top: -120px;
		padding: var(--space-7) 0 120px;
		min-height: 0;
	}

	.hero .hero__title {
		margin-bottom: var(--space-4);
		letter-spacing: -0.03em;
	}

	.hero .wp-block-buttons.hero__actions {
		flex-direction: column;
		gap: var(--space-3);
		margin-top: var(--space-6);
	}

	.hero .hero__actions > .wp-block-button,
	.hero .hero__actions > .wp-block-button > .wp-block-button__link {
		width: 100%;
	}

	.hero__grid {
		grid-template-columns: 1fr;
		gap: var(--space-7);
	}

	.hero__visual {
		height: auto;
	}

	.hero .wp-block-image.browser--main {
		position: relative;
		width: 100%;
	}

	.hero .wp-block-image.browser--sub {
		display: none;
	}
}

/* ==========================================================================
   01.03 services — patterns/home-services.php (section.services.section--cream#servicios,
   data-section «Servicios»): .container > section-head + .service-grid with three service cards
   (logo of Medios or AI shape, H3, text, «Lista con marcas» and «Más información →»).
   Cards, list and grid are the shared components above.
   ========================================================================== */
.services {
	padding: var(--space-8) 0 var(--space-10); /* background: .section--cream */
}

/* Sections reached by an anchor (#servicios, #portfolio from the hero buttons) stop below the sticky header */
[data-section][id] {
	scroll-margin-top: var(--header-h);
}

@media (max-width: 767px) {
	.services {
		padding: var(--space-7) 0 var(--space-8);
	}
}

/* ==========================================================================
   02.03 solutions — patterns/wordpress-solutions.php (section.services.services--features.section--cream,
   data-section «Soluciones WordPress a medida»): section-head without Antetítulo + .service-grid--features
   with six service cards (line icon, H3, text; no list nor link).
   ========================================================================== */
.services.services--features {
	padding-bottom: var(--space-9);
}

/* Cards without list nor link: the last paragraph leaves no gap */
.card--service .card__text:last-child {
	margin-bottom: 0;
}

/* Line icon inside .card__logo (stroke 1.75 in a 24 viewBox) */
.card__logo .card__logo-icon--line {
	width: 32px;
	height: 32px;
	fill: none;
	stroke: var(--color-forest-700);
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.service-grid.service-grid--features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.service-grid.service-grid--features { gap: var(--space-3); }

	.service-grid--features .card--service {
		display: grid;
		grid-template-columns: 56px 1fr;
		column-gap: var(--space-4);
		align-items: start;
		padding: var(--space-5);
	}

	.service-grid--features .card__logo {
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}

	.service-grid--features .card__logo .card__logo-icon--line { width: 28px; height: 28px; }

	.service-grid--features .card__title.card__title--service {
		font-size: 1.25rem;
		margin-bottom: var(--space-1);
		padding-top: var(--space-1);
	}

	.service-grid--features .card__text {
		font-size: var(--fs-small);
		line-height: 1.5;
	}
}

/* ==========================================================================
   03.03 solutions — patterns/laravel-solutions.php (section.services.section--cream, data-section
   «Soluciones empresariales»): section-head with Antetítulo + ul.service-grid--list of six
   li.card--service-simple with a two-tone line icon (viewBox 32, 38 px; 32 px on mobile).
   Cards, grid (3 → 1 column at 1023 px) and padding are the shared components.
   ========================================================================== */
.service-grid.service-grid--list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.card__logo .icon-line {
	fill: none;
	stroke: var(--color-forest-700);
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.card__logo .icon-line .icon-line__accent {
	stroke: var(--color-olive-500);
}

/* ==========================================================================
   04.03 capabilities — patterns/ai-capabilities.php (section.services.section--cream.has-curve-bottom,
   data-section «Qué puedo hacer con IA»): six .card--static with a two-tone icon (viewBox 24, stroke 1.6),
   text and «Lista con marcas» anchored at the bottom (rule of the lists above); on mobile the list is not
   pushed down. The bottom curve is the shared .has-curve-bottom (color of the next section).
   ========================================================================== */
.card__logo .icon-line.icon-line--ai {
	stroke-width: 1.6;
}

.card--static .card__text:not(:last-child) {
	margin-bottom: var(--space-5);
}

@media (max-width: 767px) {
	.card--static .is-style-checklist {
		margin-top: 0;
	}
}

/* The section curves of the approved 04-ia are 64 px (36 px on mobile), not the 96/56 of the heroes and CTA */
.services.has-curve-bottom,
.platforms.has-curve-bottom {
	--curve-bottom-h: 64px;
}

@media (max-width: 767px) {
	.services.has-curve-bottom,
	.platforms.has-curve-bottom {
		--curve-bottom-h: 36px;
	}
}

/* ==========================================================================
   04.04 platforms — patterns/ai-platforms.php (section.platforms.section--white.has-curve-bottom,
   data-section «IA en WordPress y en Laravel»): section-head--single + .platform-grid with two
   .card--service.card--panel (header row .panel__head = logo + H3, text, «Lista con marcas» and
   «Ver servicio … →» at the bottom). Bottom curve with the approved path of this section, cream by default
   (Otros procesos follows); the neighbour rules win when another section follows.
   ========================================================================== */
.platforms {
	padding: var(--space-9) 0 var(--space-10); /* background: .section--white */
}

.platforms.has-curve-bottom {
	--curve-bottom-mask: url(../masks/curve-section-bottom-alt.svg);
	--next-bg: var(--color-cream);
}

.platform-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	align-items: stretch;
}

.card--service.card--panel {
	padding: var(--space-7) var(--space-7) var(--space-6);
}

.panel__head {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	margin-bottom: var(--space-5);
}

.panel__head .card__logo {
	margin-bottom: 0;
}

.panel__head .card__title.card__title--service {
	margin-bottom: 0;
}

.card--panel .card__text {
	max-width: 34rem;
}

@media (max-width: 1100px) {
	.platform-grid { gap: var(--space-5); }
	.card--service.card--panel { padding: var(--space-6); }
}

@media (max-width: 1023px) {
	.platform-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.platforms { padding: var(--space-8) 0; }
	.platform-grid { gap: var(--space-4); }

	.card--service.card--panel {
		padding: var(--space-6) var(--space-5);
		border-radius: 24px;
	}

	.panel__head {
		gap: var(--space-4);
		margin-bottom: var(--space-4);
	}
}

/* ==========================================================================
   03.04 tech-stack — patterns/tech-stack.php (section.tech.section--white, data-section «Tecnologías que
   utilizo»): section-head--single + ul.tech-grid of six li.card.card--tech. Vertical card on desktop
   (3 → 2 columns at 1023 px), horizontal row of 64 px on mobile.
   ========================================================================== */
.tech {
	padding: var(--space-10) 0;
}

.tech-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}

.card.card--tech {
	box-sizing: border-box; /* GP's border-box does not reach the editor canvas */
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: 0;
	border-radius: var(--radius-md);
	padding: var(--space-6);
}

.card--tech .gb-shape {
	display: flex;
	flex: none;
}

.card--tech .icon-line {
	display: block;
	width: 32px;
	height: 32px;
	flex: none;
	fill: none;
	stroke: var(--color-forest-700);
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.card--tech .icon-line .icon-line__accent {
	stroke: var(--color-olive-500);
}

.card--tech .card__title {
	margin-bottom: var(--space-1);
}

.card--tech .card__text {
	margin-bottom: 0;
	font-size: var(--fs-small);
}

.card__title--nowrap {
	white-space: nowrap;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.tech-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.tech { padding: var(--space-8) 0; }

	.tech-grid {
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}

	.card.card--tech {
		flex-direction: row;
		align-items: center;
		gap: var(--space-4);
		min-height: 64px;
		padding: var(--space-4) var(--space-5);
		border-radius: 16px;
	}

	.card--tech .icon-line {
		width: 28px;
		height: 28px;
	}

	.card--tech .card__title { margin-bottom: 0; }
}

/* ==========================================================================
   03.05 advantages — patterns/advantages.php (section.advantages.section--cream, data-section «Ventajas de
   Laravel»): .container.advantages__grid (4fr/8fr) > .advantages__head (Antetítulo + H2, 9ch) + core/list
   «Lista de ventajas» (.is-style-advantages). Each li is «<strong>Title</strong> Description»:
   - the « - » separator is strong::after on desktop (the client never types it; a typed one is removed in
     render-filters.php); on mobile the title is a block and the description drops to the second line;
   - the li keeps normal flow (bold or links would become flex items): left padding and the arrow as an
     absolute mask centered on the first line.
   Approved rows: 75 px on desktop (its → glyph fell back to a taller system font: 24 px padding instead of the
   20 px of its CSS keeps the text and the row where the approved draws them), 83 px on mobile (16 px padding,
   two 24 px lines + 2 px).
   ========================================================================== */
.advantages {
	padding: var(--space-10) 0;
}

.advantages__grid {
	display: grid;
	grid-template-columns: 4fr 8fr;
	gap: var(--space-8);
	align-items: start;
}

.advantages__head .section-title {
	max-width: 9ch;
}

:where([data-section]) .is-style-advantages,
.is-style-advantages {
	--row-fs: 1.0625rem;
	--row-lh: 1.5;
	--row-pad-top: 24px;
	--row-pad-bottom: 24px;
	--arrow: 18px;
	--arrow-gap: 32px; /* arrow box + gap of the approved (glyph advance 16 px + 16 px) */
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-border);
}

.is-style-advantages > li {
	position: relative;
	box-sizing: border-box; /* GP's border-box does not reach the editor canvas */
	margin: 0;
	padding: var(--row-pad-top) 0 var(--row-pad-bottom) var(--arrow-gap);
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-body);
	font-size: var(--row-fs);
	font-weight: 400;
	line-height: var(--row-lh);
	color: var(--color-muted);
}

.is-style-advantages > li::before {
	content: "";
	position: absolute;
	left: 0;
	/* centered on the first line, raised 0.06em to sit on the middle of Inter's capitals, as the approved glyph */
	top: calc(var(--row-pad-top) + (var(--row-lh) * var(--row-fs) - var(--arrow)) / 2 - 0.06em);
	width: var(--arrow);
	height: var(--arrow);
	background-color: var(--color-olive-600);
	-webkit-mask: url(../masks/arrow.svg) center / 100% 100% no-repeat;
	mask: url(../masks/arrow.svg) center / 100% 100% no-repeat;
}

.is-style-advantages > li > strong {
	font-weight: 600;
	color: var(--color-ink);
}

.is-style-advantages > li > strong:first-child::after {
	content: " - ";
	font-weight: 400;
	color: var(--color-muted);
}

@media (min-width: 768px) and (max-width: 1023px) {
	.advantages__grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.advantages__head .section-title { max-width: none; }
}

@media (max-width: 767px) {
	.advantages { padding: var(--space-8) 0; }

	.advantages__grid {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}

	.advantages__head .section-title { max-width: none; }

	:where([data-section]) .is-style-advantages,
	.is-style-advantages {
		--row-fs: 1rem;
		--row-pad-top: var(--space-4);
		--row-pad-bottom: var(--space-4);
		--arrow: 17px;
		--arrow-gap: 27px; /* glyph advance 15 px + 12 px */
	}

	.is-style-advantages > li > strong:first-child {
		display: block;
		margin-bottom: 2px;
	}

	.is-style-advantages > li > strong:first-child::after {
		content: none;
	}
}

/* ==========================================================================
   02.04 ideal-for —patterns/ideal-for.php (section.fit.section--white, data-section «Perfecto para»):
   section-head--single + core/list «Lista con flechas» (.is-style-arrows) as a 3 → 2 → 1 column grid.
   The li keeps normal flow (bold or links would become flex items): left padding, arrow as absolute mask.
   ========================================================================== */
.fit {
	padding: var(--space-9) 0;
}

.fit .is-style-arrows,
.is-style-arrows {
	--row-h: 80px;
	--row-fs: var(--fs-fit, 1.1875rem);
	--arrow: 24px;
	--arrow-gap: var(--space-4);
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--space-6);
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-border);
}

.is-style-arrows > li {
	position: relative;
	box-sizing: border-box; /* GP's border-box does not reach the editor canvas */
	min-height: var(--row-h);
	margin: 0;
	/* centers one line of text in the row (border-bottom 1 px included) */
	padding: calc((var(--row-h) - 1px - 1.35em) / 2) 0 calc((var(--row-h) - 1px - 1.35em) / 2) calc(var(--arrow) + var(--arrow-gap));
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-body);
	font-size: var(--row-fs);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	white-space: nowrap;
}

.is-style-arrows > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: var(--arrow);
	height: var(--arrow);
	transform: translateY(-50%);
	background-color: var(--color-olive-600);
	-webkit-mask: url(../masks/arrow.svg) center / 100% 100% no-repeat;
	mask: url(../masks/arrow.svg) center / 100% 100% no-repeat;
}

@media (max-width: 1023px) {
	.fit .is-style-arrows { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 600px) and (max-width: 767px) {
	.fit .is-style-arrows { column-gap: var(--space-5); }
}

@media (max-width: 767px) {
	.fit { padding: var(--space-8) 0; }

	/* WordPress mobile.css: .section-head--single{margin-bottom:var(--space-5)} (24 px; 32 px in the other pages) */
	.fit .section-head.section-head--single { margin-bottom: var(--space-5); }

	.fit .is-style-arrows,
	.is-style-arrows {
		--row-h: 56px;
		--row-fs: 1.0625rem;
		--arrow: 22px;
		--arrow-gap: var(--space-3);
	}
}

@media (max-width: 599px) {
	.fit .is-style-arrows { grid-template-columns: 1fr; }
}

/* ==========================================================================
   01.04 portfolio — patterns/home-portfolio.php (section.portfolio.section--white#portfolio,
   data-section «Portfolio · Proyectos realizados»): .container > section-head--single
   + generateblocks/query (9 projects by menu_order) > looper .project-grid > project cards
   + core/buttons .portfolio__more («Oscuro» with arrow → /portfolio-web/).
   The project grid is shared with 05.03 (Portfolio). Grid 3 → 2 (768–1023 px) → 1.
   ========================================================================== */
.portfolio {
	padding: var(--space-10) 0 var(--space-9); /* background: .section--white */
}

.project-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.wp-block-buttons.portfolio__more {
	display: flex;
	justify-content: center;
	margin-top: var(--space-8);
}

.portfolio__more > .wp-block-button {
	margin: 0;
}

@media (max-width: 1023px) and (min-width: 768px) {
	.project-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.portfolio {
		padding: var(--space-8) 0;
	}

	.project-grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.wp-block-buttons.portfolio__more { margin-top: var(--space-6); }

	.portfolio__more > .wp-block-button,
	.portfolio__more > .wp-block-button > .wp-block-button__link {
		width: 100%;
	}
}

/* ==========================================================================
   05.03 projects — patterns/portfolio-projects.php (section.portfolio.portfolio--page.section--white):
   same grid and card as 01.04; only the section padding differs (approved .portfolio--page).
   ========================================================================== */
.portfolio.portfolio--page {
	padding: var(--space-8) 0 var(--space-9);
}

@media (max-width: 767px) {
	.portfolio.portfolio--page {
		padding: var(--space-6) 0 var(--space-8);
	}

	/* 05-portfolio mobile.css: 12 px between title and text (16 px in the other pages) */
	.portfolio--page .section-head {
		gap: var(--space-3);
	}
}

/* ==========================================================================
   01.05 final-cta — synced pattern «Llamada final» (wp_block, source patterns/final-cta.php), inserted in
   each page as core/block with overrides: section.cta.has-curve-top.has-rings > .container.cta__inner >
   H2 .cta__title («Título»), p .cta__text («Texto»), .cta__actions > button «Principal» grande con flecha
   («Botón», #contact-email → obfuscated mailto) and p .cta__alt («Línea bajo el botón», optional; the plugin
   appends a.cta__mail). Empty overrides are not printed. Reference: Inicio (approved 01-home .cta).
   Top curve (::before) in the color of the previous section (.section--cream / .section--white, see the
   decorative layers); rings (::after) above the curve and below the content, as in the approved DOM order.
   ========================================================================== */
.cta {
	--curve-top-mask: url(../masks/curve-cta.svg);
	--rings-mask: url(../masks/rings-cta.svg);
	--rings-size: 720px;
	--rings-top: 60%;
	--rings-left: 50%;
	--rings-transform: translate(-50%, -50%);
	padding: 176px 0 var(--space-10);
	background-color: var(--color-forest-800);
	color: var(--color-white);
	text-align: center;
	--focus-ring: var(--color-focus);
}

.cta.has-curve-top::before {
	z-index: 0;
}

.cta .container.cta__inner {
	max-width: 720px;
}

.cta .cta__title {
	margin-bottom: var(--space-4);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-h2);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--color-white);
}

.cta .cta__title mark {
	padding: 0;
	background-color: transparent;
	color: var(--color-sage-300);
}

/* Without «Texto» (Laravel) the title keeps the approved .cta--no-text gap above the button */
.cta .cta__title:has(+ .cta__actions) {
	margin-bottom: var(--space-7);
}

.cta .cta__text {
	margin-bottom: var(--space-7);
	font-size: var(--fs-lead);
	color: var(--color-on-dark);
}

.cta .wp-block-buttons.cta__actions {
	display: flex;
	justify-content: center;
	margin: 0;
}

.cta .cta__actions > .wp-block-button {
	margin: 0;
}

/* «Línea bajo el botón» + linked email (approved 05-portfolio .cta__alt / .cta__mail) */
.cta .cta__alt {
	margin-top: var(--space-5);
	font-size: var(--fs-small);
	color: var(--color-on-dark);
}

.cta a.cta__mail,
.cta a.cta__mail:visited {
	display: inline-flex;
	align-items: center;
	padding: var(--space-3) 0 2px;
	border-bottom: 1px solid rgba(195, 213, 156, .5);
	color: var(--color-white);
	font-weight: 600;
	text-decoration: none;
}

.cta a.cta__mail:is(:hover, :focus, :active) {
	color: var(--color-sage-300);
}

@media (max-width: 767px) {
	.cta {
		--rings-size: 480px;
		padding: 120px 0 var(--space-8);
	}

	.cta .cta__title:has(+ .cta__actions) {
		margin-bottom: var(--space-6);
	}

	.cta .cta__text {
		margin-bottom: var(--space-6);
		font-size: var(--fs-body);
	}

	.cta .cta__actions > .wp-block-button,
	.cta .cta__actions > .wp-block-button > .wp-block-button__link {
		width: 100%;
	}

	.cta .cta__alt {
		margin-top: var(--space-4);
	}
}

/* ==========================================================================
   01.06 footer — Block Element «Pie» (Site Footer, generate_footer), seeded by bin/apply-elements.php
   from elements/site-footer.html: gb/element + gb/text, the logo block, three core/navigation
   («Enlaces», «Servicios», «Legal») and {{contact_email key:mailto}} / {{current_year}}.
   GP wraps the hook in its own <div class="site-footer">: every rule is scoped to footer.site-footer.
   core/navigation repeats its className on the inner ul: nav-level rules use the child combinator, and
   link colors need more than 0,3,0 (.wp-block-navigation .wp-block-navigation-item__content ×2).
   ========================================================================== */
footer.site-footer {
	padding: var(--space-9) 0 var(--space-6);
	background-color: var(--color-forest-950);
	color: var(--color-on-dark);
	font-size: var(--fs-small);
	line-height: 1.6;
}

footer.site-footer .site-footer__grid {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1fr;
	gap: var(--space-7);
}

footer.site-footer .site-footer__tagline {
	max-width: 22rem;
	margin: var(--space-4) 0 var(--space-6);
	color: var(--color-on-dark);
}

/* Column headings are h2 (landmark outline as in Inicio) but look like small caps labels */
footer.site-footer .site-footer__heading {
	margin: 0 0 var(--space-3);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-sage-300);
}

/* «Escríbeme un email» (href {{contact_email key:mailto}}); the → is a mask (not in the latin subset) */
footer.site-footer a.site-footer__mail {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	border-bottom: 1px solid rgba(195, 213, 156, .5);
	color: var(--color-white);
	font-weight: 600;
	text-decoration: none;
}

footer.site-footer a.site-footer__mail::after {
	content: "";
	flex: none;
	/* the approved system-font «→» in 600: 1 em of advance, shaft half a pixel below the centre of the line */
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url(../masks/arrow-glyph.svg?v=5) 0 0 / 1em 1em no-repeat;
	mask: url(../masks/arrow-glyph.svg?v=5) 0 0 / 1em 1em no-repeat;
}

/* Link lists (core/navigation, vertical): no gaps, 40 px rows (44 px on mobile) */
footer.site-footer .site-footer__col > .site-footer__nav,
footer.site-footer .site-footer__nav .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

footer.site-footer .site-footer__nav .wp-block-navigation-item {
	margin: 0;
}

footer.site-footer .site-footer__nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0;
	color: var(--color-on-dark);
	font-size: inherit;
	line-height: 1.6;
	text-decoration: none;
}

footer.site-footer .site-footer__nav .wp-block-navigation-item__content:is(:hover, :focus, :active),
footer.site-footer a.site-footer__mail:is(:hover, :focus, :active) {
	color: var(--color-sage-300);
}

/* Bottom bar: #A9B6A3 is the approved meta text color (not a palette color) */
footer.site-footer .site-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-8);
	padding-top: var(--space-5);
	border-top: 1px solid rgba(214, 223, 204, .14);
	font-size: var(--fs-xs);
	color: #a9b6a3;
}

@media (max-width: 767px) {
	footer.site-footer {
		padding: var(--space-8) 0 var(--space-5);
	}

	footer.site-footer .site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-6) var(--space-5);
	}

	footer.site-footer .site-footer__brand {
		grid-column: 1 / -1;
		padding-bottom: var(--space-5);
		border-bottom: 1px solid rgba(214, 223, 204, .14);
	}

	footer.site-footer .site-footer__nav .wp-block-navigation-item__content {
		min-height: 44px;
	}

	footer.site-footer .site-footer__bottom {
		flex-direction: column;
		gap: var(--space-1);
		margin-top: var(--space-6);
	}
}

/* ==========================================================================
   02.02 hero-compact — patterns/hero-compact.php, inc/pattern-parts/hero-compact.php
   (section.hero.hero--compact, data-section «Hero compacto» / «Hero»), in every secondary page.
   gb/element section > .container > .hero__inner > Antetítulo + H1 .hero__title (+ optional
   p.hero__headline) + p.hero__lead (+ optional core/buttons .hero__actions). Background, title, lead and
   buttons come from .hero (01.02). Height and decoration unified with 02-wordpress v2: paddings in
   --hero-compact-pad-* (96/160, 48/104 on mobile), no min-height, rings-compact (640 px, right -120 top -160)
   and curve-hero-compact in the color of the next section (cream by default, white before Portfolio).
   Variants (classes of the section):
   - is-style-logo-arcs  block style «Con arcos del logo» (03-laravel): two arcs of the logo concentric with
                         the rings. Two colors (sage-300 .30 and olive-500 .45) cannot come from one mask, so
                         they are a background layer of the section (arcs-symbol.svg carries its colors).
                         On mobile it keeps the 112 px bottom padding of the 03-laravel approved.
   - hero-compact--wide  (04-ia) 860 px of content, title without the ch limit, lead 42rem, and the 152 px
                         bottom padding of the 04-ia approved on desktop.
   - hero-compact--accent-block (05-portfolio) the highlighted words on their own line.
   - hero-compact--short (06-sobre-mi) short content without buttons, centered in a minimum height.
   ========================================================================== */
.hero.hero--compact {
	--rings-mask: url(../masks/rings-compact.svg);
	--rings-size: 640px;
	--rings-right: -120px;
	--rings-top: -160px;
	--curve-bottom-mask: url(../masks/curve-hero-compact.svg);
	min-height: 0;
	padding: var(--hero-compact-pad-top) 0 var(--hero-compact-pad-bottom);
}

.hero--compact .hero__inner {
	max-width: 720px;
}

/* Optional second headline (03-laravel .hero__headline, Space Grotesk 600 36/26 px) */
.hero--compact .hero__title:has(+ .hero__headline) {
	margin-bottom: var(--space-4);
}

.hero--compact .hero__headline {
	max-width: 22ch;
	margin-bottom: var(--space-3);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-hero-headline);
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--color-white);
}

.hero--compact .hero__headline mark {
	padding: 0;
	background-color: transparent;
	color: var(--color-sage-300);
}

/* «Con arcos del logo»: the arcs (720 box, r 240 and 155) share the center of the rings (box 640) */
.hero.hero--compact.is-style-logo-arcs {
	--arcs-size: calc(var(--rings-size) * 1.125);
	--arcs-right: calc(var(--rings-right) - var(--rings-size) * .0625);
	--arcs-top: calc(var(--rings-top) - var(--rings-size) * .0625);
	background-image:
		url(../masks/arcs-symbol.svg),
		linear-gradient(160deg, var(--color-forest-800) 0%, var(--color-forest-800) 55%, var(--color-forest-700) 100%);
	background-repeat: no-repeat;
	background-size: var(--arcs-size) var(--arcs-size), auto;
	background-position: right var(--arcs-right) top var(--arcs-top), 0 0;
}

/* Wide content (04-ia) */
.hero-compact--wide .hero__inner {
	max-width: 860px;
}

.hero-compact--wide .hero__title {
	max-width: none;
}

.hero-compact--wide .hero__lead {
	max-width: 42rem;
}

.hero.hero-compact--wide .wp-block-buttons.hero__actions {
	margin-top: var(--space-6);
}

/* Bottom padding of the 04-ia approved on desktop (152 px; 104 px on mobile, the unified value) */
@media (min-width: 768px) {
	.hero.hero-compact--wide {
		--hero-compact-pad-bottom: 152px;
	}
}

/* Highlighted words on their own line (05-portfolio) */
.hero-compact--accent-block .hero__title {
	max-width: none;
	margin-bottom: var(--space-4);
}

.hero-compact--accent-block .hero__title mark {
	display: block;
}

/* Height of the 05-portfolio approved: 64/136 px and min-height 440 px (48/96 px on mobile) */
.hero.hero--compact.hero-compact--accent-block {
	--hero-compact-pad-top: var(--space-8);
	--hero-compact-pad-bottom: 136px;
	min-height: 440px;
}

/* Short content centered in a minimum height (06-sobre-mi approved: flex, min-height 400 px, 64/128 px,
   title 16 px above the lead; on mobile min-height 280 px, 48/96 px and 12 px under the title) */
.hero.hero--compact.hero-compact--short {
	--hero-compact-pad-top: var(--space-8);
	--hero-compact-pad-bottom: var(--space-10);
	display: flex;
	align-items: center;
	min-height: 400px;
}

.hero.hero-compact--short > .container {
	width: 100%;
}

.hero.hero-compact--short .hero__title {
	margin-bottom: var(--space-4);
}

@media (max-width: 767px) {
	.hero.hero--compact.hero-compact--short {
		--hero-compact-pad-top: var(--space-7);
		--hero-compact-pad-bottom: var(--space-9);
		min-height: 280px;
	}

	.hero.hero-compact--short .hero__title {
		margin-bottom: var(--space-3);
	}
}

@media (max-width: 767px) {
	.hero.hero--compact {
		--rings-size: 420px;
		--rings-right: -220px;
		--rings-top: -170px;
		padding: var(--hero-compact-pad-top) 0 var(--hero-compact-pad-bottom);
	}

	/* 03-laravel approved (mobile.css): 112 px at the bottom instead of the unified 104 px */
	.hero.hero--compact.is-style-logo-arcs {
		--hero-compact-pad-bottom: 112px;
	}

	/* 05-portfolio approved (mobile.css): 48/96 px, no min-height needed (content is taller than 340 px) */
	.hero.hero--compact.hero-compact--accent-block {
		--hero-compact-pad-top: var(--space-7);
		--hero-compact-pad-bottom: 96px;
		min-height: 0;
	}

	.hero--compact .hero__title:has(+ .hero__headline) {
		margin-bottom: var(--space-3);
	}
}

/* ==========================================================================
   02.05 why-wordpress — patterns/why-wordpress.php (section.why.section--cream.has-curve-top,
   data-section «¿Por qué WordPress?»): title | text in 5fr/7fr; the top curve takes the color of the previous section.
   ========================================================================== */
.why {
	padding: 176px 0 var(--space-10);
}

.why .why__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--space-8);
	align-items: start;
}

.why .why__title {
	padding-top: var(--space-1);
}

.why .why__text {
	max-width: var(--read-width);
}

.why .why__text p {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--color-muted);
}

.why .why__text p + p {
	margin-top: var(--space-5);
}

.why .why__text p.why__lead {
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--color-ink);
}

@media (max-width: 1100px) {
	.why .why__grid {
		grid-template-columns: 4fr 7fr;
		gap: var(--space-7);
	}
}

@media (max-width: 1023px) and (min-width: 768px) {
	.why .why__grid {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}
}

@media (max-width: 767px) {
	.why {
		padding: 104px 0 var(--space-8);
	}

	.why .why__grid {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}

	.why .why__text p {
		font-size: 1rem;
	}

	.why .why__text p + p {
		margin-top: var(--space-4);
	}
}

/* ==========================================================================
   04.05 other-processes — patterns/other-processes.php (section.processes.section--cream, data-section
   «Otros procesos»): .container.processes__grid (5fr/7fr) > .processes__intro (Antetítulo + H2 + text)
   + ul.list--arrows (gb/element) with one li.list--arrows__item per row (gb/element with H3 + p).
   The li is a grid (40px / 1fr / 1.25fr, baseline) because its children are blocks; the arrow is its
   ::before with the arrow mask (U+2192 is not in the self-hosted subset). The approved glyph (system font,
   24 px) measures 17 × 13 px and is centered on the capitals of the title: a 24 px mask box (the arrow is
   drawn from x=3 to 20 of its 24 viewBox) moved 2 px left, at the top of the row and 1.5 px lower than the
   center of the title line.
   ≤1100 px: the text drops under the title (32px / 1fr); 768–1023 px: one column; mobile: 28 px arrow column.
   ========================================================================== */
.processes {
	padding: var(--space-9) 0;
}

.processes .processes__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--space-8);
	align-items: start;
}

.processes .processes__text {
	max-width: 28rem;
	margin-top: var(--space-5);
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--color-muted);
}

:where([data-section]) .list--arrows,
.list--arrows {
	--title-fs: var(--fs-h3);
	--arrow: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-border);
}

.list--arrows > .list--arrows__item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.25fr);
	gap: var(--space-5);
	align-items: baseline;
	box-sizing: border-box; /* GP's border-box does not reach the editor canvas */
	margin: 0;
	/* +1 px on top: the approved → (system font) rose 1 px above the title in the baseline group */
	padding: calc(var(--space-6) + 1px) 0 var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

.list--arrows > .list--arrows__item::before {
	content: "";
	align-self: start;
	width: var(--arrow);
	height: var(--arrow);
	margin: calc((var(--title-fs) * 1.25 - var(--arrow)) / 2 + 1.5px) 0 0 -2px;
	background-color: var(--color-olive-600);
	-webkit-mask: url(../masks/arrow.svg) center / 100% 100% no-repeat;
	mask: url(../masks/arrow.svg) center / 100% 100% no-repeat;
}

.list--arrows .list--arrows__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--title-fs);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--color-forest-900);
}

.list--arrows .list--arrows__text {
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--color-muted);
}

@media (max-width: 1100px) {
	.list--arrows > .list--arrows__item {
		grid-template-columns: 32px minmax(0, 1fr);
	}

	.list--arrows .list--arrows__text {
		grid-column: 2;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.processes .processes__grid {
		grid-template-columns: 1fr;
		gap: var(--space-7);
	}
}

@media (max-width: 767px) {
	.processes {
		padding: var(--space-8) 0 var(--space-7);
	}

	.processes .processes__grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.processes .processes__text {
		margin-top: var(--space-4);
		font-size: var(--fs-body);
	}

	:where([data-section]) .list--arrows,
	.list--arrows {
		--title-fs: 1.1875rem;
		--arrow: 20px;
	}

	.list--arrows > .list--arrows__item {
		grid-template-columns: 28px minmax(0, 1fr);
		gap: var(--space-2) var(--space-3);
		padding: var(--space-5) 0;
	}
}

/* ==========================================================================
   06.03 about-intro — patterns/about-intro.php (section.about-intro.section--cream, data-section
   «Presentación y trayectoria»): .about-intro__grid (text | 240 px photo in 4:5 with the organic radius) and
   .about-barrio (H2 + paragraph) under a rule. Mobile: the photo goes first, full width in 4:3.
   The photo is a core/image (figure.wp-block-image.about-intro__figure > img); its sizes is computed in
   render-filters.php from the real ratio of the attachment.
   ========================================================================== */
.about-intro {
	--about-photo-w: 240px;
	--fs-intro: 1.5rem;
	padding: var(--space-8) 0 var(--space-10);
}

.about-intro .about-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--about-photo-w);
	gap: var(--space-9);
	align-items: start;
}

.about-intro .about-intro__text {
	max-width: 50rem;
}

.about-intro .about-intro__lead {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: var(--fs-intro);
	line-height: 1.4;
	letter-spacing: -0.015em;
	color: var(--color-forest-900);
}

.about-intro .about-intro__body {
	margin: var(--space-5) 0 0;
	font-size: var(--fs-lead);
	line-height: 1.65;
	color: var(--color-muted);
}

/* core/image keeps .wp-block-image{margin:0 0 1em} (0,1,0): the figure margin is reset here */
.about-intro .about-intro__figure {
	justify-self: end;
	width: 100%;
	max-width: var(--about-photo-w);
	margin: 0;
}

.about-intro .about-intro__figure img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-organic);
	box-shadow: var(--shadow-soft);
}

.about-intro .about-barrio {
	margin-top: var(--space-9);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.about-intro .about-barrio__title {
	margin: 0 0 var(--space-5);
}

.about-intro .about-barrio__text {
	max-width: var(--measure);
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.7;
	color: var(--color-ink);
}

@media (max-width: 1100px) {
	.about-intro .about-intro__grid {
		gap: var(--space-7);
	}
}

@media (max-width: 767px) {
	.about-intro {
		--fs-intro: 1.25rem;
		padding: var(--space-5) 0 var(--space-8);
	}

	.about-intro .about-intro__grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.about-intro .about-intro__figure {
		order: -1;
		max-width: none;
		justify-self: stretch;
	}

	.about-intro .about-intro__figure img {
		aspect-ratio: 4 / 3;
		object-position: 50% 28%;
		border-radius: 24px 24px 24px var(--radius-organic);
	}

	.about-intro .about-intro__text {
		max-width: none;
	}

	.about-intro .about-intro__lead {
		line-height: 1.45;
	}

	.about-intro .about-intro__body {
		margin-top: var(--space-4);
	}

	.about-intro .about-barrio {
		margin-top: var(--space-8);
		padding-top: var(--space-7);
	}

	.about-intro .about-barrio__title {
		margin-bottom: var(--space-4);
	}

	.about-intro .about-barrio__text {
		line-height: 1.65;
	}
}

/* ==========================================================================
   06.04 passions — patterns/passions.php (section.passions.section--white, data-section «Mis pasiones»):
   section-head--single + .service-grid with three .card--passion (line icon, H3, text with external links).
   Cards, grid (3 → 1 column at 1023 px) and card padding are the shared components.
   ========================================================================== */
.passions {
	padding: var(--space-10) 0;
}

/* Line icon of the passion cards (approved .card__line-icon: 38 px, 32 px on mobile) */
.card--passion .card__logo .card__line-icon {
	width: 38px;
	height: 38px;
	fill: none;
	stroke: var(--color-forest-700);
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.card--passion .card__text {
	margin-bottom: 0;
}

/* Text links (approved .text-link). Weight 0,3,1 beats GeneratePress a:hover/a:focus (0,1,1). */
.card--passion .card__text a.text-link {
	color: var(--color-forest-700);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--color-olive-500);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.card--passion .card__text a.text-link:is(:hover, :focus, :active) {
	color: var(--color-olive-600);
}

@media (max-width: 767px) {
	.passions {
		padding: var(--space-8) 0;
	}

	.card--passion .card__logo .card__line-icon {
		width: 32px;
		height: 32px;
	}

	/* Touch area of the links (approved: padding 12px 0 on an inline link: it does not change the line height) */
	.card--passion .card__text a.text-link {
		padding: 12px 0;
	}
}

/* ==========================================================================
   06.05 languages-skills — patterns/languages-skills.php (section.facts.section--cream, data-section
   «Idiomas y tecnologías»): .facts__grid 4fr/8fr with two rows (titles, lists); each .facts__block spans both
   rows with subgrid, so the lists start on the same line. Languages: dl.rule-list > div.rule-list__row >
   dt + dd (GB Elements). Technologies: core/list «Lista en dos columnas» (.is-style-two-columns).
   The core/list li is not flex (bold or links would become flex items): one line is centred in the 60 px row
   with its padding, as the approved flex row does.
   ========================================================================== */
.facts {
	padding: var(--space-10) 0;
}

.facts .facts__grid {
	display: grid;
	grid-template-columns: 4fr 8fr;
	grid-template-rows: auto auto;
	column-gap: var(--space-9);
}

.facts .facts__block {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
}

.facts .facts__title {
	margin: 0 0 var(--space-6);
	align-self: end;
}

/* Shared row look (approved .rule-list / .rule-list__row) */
:where([data-section]) .rule-list,
.rule-list,
:where([data-section]) .is-style-two-columns,
.is-style-two-columns {
	--row-h: 60px;
	--row-fs: 1.0625rem;
	list-style: none;
	margin: 0;
	padding: 0;
	align-self: start;
}

.rule-list > .rule-list__row,
.is-style-two-columns > li {
	box-sizing: border-box; /* GP's border-box does not reach the editor canvas */
	min-height: var(--row-h);
	margin: 0;
	border-bottom: 1px solid var(--color-border);
}

.rule-list > .rule-list__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) 0;
}

.rule-list > .rule-list__row:first-child,
.is-style-two-columns > li:nth-child(-n+2) {
	border-top: 1px solid var(--color-border);
}

/* GP: dt{font-weight:bold}, dd{margin:0 0 1.5em 1.5em} */
.rule-list .rule-list__name,
.is-style-two-columns > li {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--row-fs);
	font-weight: 500;
	line-height: 1.6;
	color: var(--color-ink);
}

.rule-list .rule-list__value {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--color-muted);
	white-space: nowrap;
}

/* Technologies: two columns; one line centred in the row as the approved flex row (12 px minimum) */
.is-style-two-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-7);
}

.is-style-two-columns > li {
	--row-borders: 1px;
	--row-pad: max(var(--space-3), calc((var(--row-h) - var(--row-borders) - 1.6em) / 2));
	/* +0.5 px on top: the approved flex centring rounds the text down to the next pixel, the line box rounds it up */
	padding: calc(var(--row-pad) + .5px) 0 calc(var(--row-pad) - .5px);
}

/* The first row also carries the top rule inside its min-height (border-box), as in the approved flex row */
.is-style-two-columns > li:nth-child(-n+2) {
	--row-borders: 2px;
}

@media (max-width: 1100px) {
	.facts .facts__grid {
		column-gap: var(--space-7);
	}
}

@media (max-width: 1023px) {
	.facts .facts__grid {
		grid-template-columns: 1fr;
		row-gap: var(--space-8);
	}

	.facts .facts__block {
		display: block;
	}
}

@media (max-width: 767px) {
	.facts {
		padding: var(--space-8) 0;
	}

	.facts .facts__title {
		margin-bottom: var(--space-5);
	}

	:where([data-section]) .rule-list,
	.rule-list,
	:where([data-section]) .is-style-two-columns,
	.is-style-two-columns {
		--row-h: 52px;
		--row-fs: 1rem;
	}

	.is-style-two-columns {
		grid-template-columns: 1fr;
	}

	.is-style-two-columns > li:nth-child(2) {
		--row-borders: 1px;
		border-top: 0;
	}
}

/* ==========================================================================
   06.06 more-about — patterns/more-about.php (section.more.section--white, data-section «Más sobre mí»):
   .more__inner grid 1fr/auto (H2 + lead | two «Contorno oscuro» buttons with the external-link icon).
   ========================================================================== */
.more {
	padding: var(--space-9) 0 var(--space-8);
}

.more .more__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-8);
	align-items: end;
}

.more .more__lead {
	max-width: 34rem;
	margin: var(--space-4) 0 0;
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--color-muted);
}

.more .more__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin: 0;
}

@media (max-width: 1100px) {
	.more .more__inner {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

@media (max-width: 767px) {
	.more {
		padding: var(--space-8) 0 var(--space-7);
	}

	.more .more__inner {
		gap: var(--space-6);
	}

	.more .more__actions {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3);
	}

	.more .more__actions .wp-block-button,
	:root .more .more__actions .wp-block-button > a.wp-block-button__link {
		width: 100%;
		min-height: 48px;
	}
}

/* --- text pages (final-checks): legal pages and any page outside «Páginas de diseño» -----------
   The approved design has no legal page: these pages use the site typography in a reading column.
   Design pages have no title and their direct content children are sections ([data-section]), so the
   rules on «.entry-content > p / h2…» never reach them. The editor repeats them in editor.css. */
:root {
	--fs-text-title: clamp(2.25rem, 1.85rem + 1.6vw, 3.25rem);
	--fs-text-h2: 1.5rem;
	--fs-text-h3: 1.25rem;
	--fs-text-body: 1.0625rem;
	--text-column: 760px;
}

@media (max-width: 767px) {
	:root {
		--fs-text-h2: 1.375rem;
		--fs-text-h3: 1.1875rem;
		--fs-text-body: 1rem;
	}
}

body.page:not(.full-width-content) .inside-article {
	padding-top: var(--space-8);
	padding-bottom: var(--space-9);
}

body.page:not(.full-width-content) .entry-header,
body.page:not(.full-width-content) .entry-content {
	max-width: var(--text-column);
}

body.page:not(.full-width-content) .entry-title {
	font-size: var(--fs-text-title);
	line-height: 1.1;
	margin-bottom: var(--space-4);
}

body.page .entry-content > p:first-child {
	font-size: var(--fs-lead);
	color: var(--color-muted);
	padding-bottom: var(--space-6);
	margin-bottom: var(--space-7);
	border-bottom: 1px solid var(--color-border);
}

body.page .entry-content > :is(h2, h3) {
	line-height: 1.25;
	letter-spacing: -0.01em;
}

body.page .entry-content > h2 {
	font-size: var(--fs-text-h2);
	margin-top: var(--space-7);
	margin-bottom: var(--space-3);
}

body.page .entry-content > h3 {
	font-size: var(--fs-text-h3);
	margin-top: var(--space-6);
	margin-bottom: var(--space-2);
}

body.page .entry-content > :is(p, ul, ol) {
	font-size: var(--fs-text-body);
	line-height: 1.7;
	margin-bottom: var(--space-4);
}

body.page .entry-content > :is(p, ul, ol):not(:first-child) {
	color: var(--color-muted);
}

body.page .entry-content > :is(p, ul, ol) strong {
	color: var(--color-ink);
	font-weight: 600;
}

body.page .entry-content > :is(p, ul, ol) a:not(.wp-block-button__link) {
	color: var(--color-forest-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.page .entry-content > :is(p, ul, ol) a:not(.wp-block-button__link):is(:hover, :focus) {
	color: var(--color-forest-900);
}

body.page .entry-content > :last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	body.page:not(.full-width-content) .inside-article {
		padding-top: var(--space-6);
		padding-bottom: var(--space-8);
	}

	body.page .entry-content > p:first-child {
		padding-bottom: var(--space-5);
		margin-bottom: var(--space-6);
	}

	body.page .entry-content > h2 {
		margin-top: var(--space-6);
	}
}