/**
 * Base theme styles. Every value comes from tokens.css.
 * Breakpoints: mobile < 768px ≤ tablet < 1200px ≤ desktop.
 */

/* ==========================================================
   Base
   ========================================================== */

body {
	background: var(--surface-page);
	color: var(--text-primary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	font-weight: var(--font-weight-regular);
	line-height: var(--font-line-height-body-md);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: inherit;
	font-family: var(--font-family-heading);
}

h1 { font-size: var(--font-size-heading-h1); font-weight: var(--font-weight-bold); line-height: var(--font-line-height-heading-h1); }
h2 { font-size: var(--font-size-heading-h2); font-weight: var(--font-weight-bold); line-height: var(--font-line-height-heading-h2); }
h3 { font-size: var(--font-size-heading-h3); font-weight: var(--font-weight-bold); line-height: var(--font-line-height-heading-h3); }
h4 { font-size: var(--font-size-heading-h4); font-weight: var(--font-weight-bold); line-height: var(--font-line-height-heading-h4); }
h5 { font-size: var(--font-size-heading-h5); font-weight: var(--font-weight-semibold); line-height: var(--font-line-height-heading-h5); }
h6 { font-size: var(--font-size-heading-h6); font-weight: var(--font-weight-semibold); line-height: var(--font-line-height-heading-h6); }

a {
	color: var(--text-link);
}

a:hover,
a:focus {
	color: var(--text-link-hover);
}

:focus-visible {
	outline: 3px solid var(--border-focus);
	outline-offset: 2px;
}

::selection {
	background: var(--color-gold-200);
	color: var(--text-primary);
}

/* ==========================================================
   Typography classes (same names as in Figma)
   ========================================================== */

.display-xl,
.display-lg,
.display-md,
.display-sm {
	font-family: var(--font-family-display);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
}

.display-xl { font-size: var(--font-size-display-xl); line-height: var(--font-line-height-display-xl); }
.display-lg { font-size: var(--font-size-display-lg); line-height: var(--font-line-height-display-lg); }
.display-md { font-size: var(--font-size-display-md); line-height: var(--font-line-height-display-md); }
.display-sm { font-size: var(--font-size-display-sm); line-height: var(--font-line-height-display-sm); }

.serif-lg,
.serif-md {
	font-family: var(--font-family-serif);
	font-weight: var(--font-weight-medium);
}

.serif-lg { font-size: var(--font-size-serif-lg); line-height: var(--font-line-height-serif-lg); }
.serif-md { font-size: var(--font-size-serif-md); line-height: var(--font-line-height-serif-md); }

.heading-h1,
.heading-h2,
.heading-h3,
.heading-h4,
.heading-h5,
.heading-h6 {
	font-family: var(--font-family-heading);
}

.heading-h1 { font-size: var(--font-size-heading-h1); font-weight: var(--font-weight-bold); line-height: var(--font-line-height-heading-h1); }
.heading-h2 { font-size: var(--font-size-heading-h2); font-weight: var(--font-weight-bold); line-height: var(--font-line-height-heading-h2); }
.heading-h3 { font-size: var(--font-size-heading-h3); font-weight: var(--font-weight-bold); line-height: var(--font-line-height-heading-h3); }
.heading-h4 { font-size: var(--font-size-heading-h4); font-weight: var(--font-weight-bold); line-height: var(--font-line-height-heading-h4); }
.heading-h5 { font-size: var(--font-size-heading-h5); font-weight: var(--font-weight-semibold); line-height: var(--font-line-height-heading-h5); }
.heading-h6 { font-size: var(--font-size-heading-h6); font-weight: var(--font-weight-semibold); line-height: var(--font-line-height-heading-h6); }

.body-lg,
.body-md,
.body-sm {
	font-family: var(--font-family-body);
	font-weight: var(--font-weight-regular);
}

.body-lg { font-size: var(--font-size-body-lg); line-height: var(--font-line-height-body-lg); }
.body-md { font-size: var(--font-size-body-md); line-height: var(--font-line-height-body-md); }
.body-sm { font-size: var(--font-size-body-sm); line-height: var(--font-line-height-body-sm); }

.body-caption {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-caption);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-body-caption);
}

.label-lg,
.label-md,
.label-eyebrow {
	font-family: var(--font-family-label);
	font-weight: var(--font-weight-medium);
}

.label-lg { font-size: var(--font-size-label-lg); line-height: var(--font-line-height-label-lg); }
.label-md { font-size: var(--font-size-label-md); line-height: var(--font-line-height-label-md); }

.label-eyebrow {
	font-size: var(--font-size-label-eyebrow);
	line-height: var(--font-line-height-label-eyebrow);
	letter-spacing: var(--font-letter-spacing-label-eyebrow);
	text-transform: uppercase;
}

.label-nav,
.label-cta {
	font-family: var(--font-family-body);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--font-letter-spacing-label-nav);
	text-transform: uppercase;
}

.label-nav { font-size: var(--font-size-label-nav); line-height: var(--font-line-height-label-nav); }
.label-cta { font-size: var(--font-size-label-cta); line-height: var(--font-line-height-label-cta); }

/* Text with gold sheen (gradient/gold-metallic). */
.text-gold-metallic {
	background: var(--gradient-gold-metallic);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ==========================================================
   Layout
   ========================================================== */

/* Content container: grid max-width + page side margin. */
.ga-container {
	box-sizing: content-box;
	max-width: var(--layout-container);
	margin-inline: auto;
	padding-inline: var(--layout-margin);
}

.ga-section {
	padding-block: var(--layout-section-padding);
}

/* ==========================================================
   Buttons
   .btn + size (.btn--lg | .btn--md) + type.
   In the Button block: "ga-*" styles from the panel (LG size), same rules.
   ========================================================== */

.btn,
.wp-block-button[class*="is-style-ga-"] > .wp-block-button__link {
	--btn-bg: transparent;
	--btn-fg: var(--text-primary);
	--btn-border: transparent;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	box-sizing: border-box;
	border: var(--border-width-2) solid var(--btn-border);
	border-radius: var(--radius-full);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-family-body);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover,
.wp-block-button[class*="is-style-ga-"] > .wp-block-button__link:hover,
.btn:focus,
.wp-block-button[class*="is-style-ga-"] > .wp-block-button__link:focus,
.btn:visited,
.wp-block-button[class*="is-style-ga-"] > .wp-block-button__link:visited {
	color: var(--btn-fg);
	text-decoration: none;
}

.btn:focus-visible,
.wp-block-button[class*="is-style-ga-"] > .wp-block-button__link:focus-visible {
	outline: 3px solid var(--border-focus);
	outline-offset: 0;
}

.btn svg {
	flex-shrink: 0;
	width: var(--btn-icon);
	height: var(--btn-icon);
	fill: currentColor;
}

/* Sizes. The 2px border is included in the padding so they all measure the same. */
.btn--lg,
.wp-block-button[class*="is-style-ga-"] > .wp-block-button__link {
	--btn-icon: 20px;

	padding: calc(var(--space-16) - var(--border-width-2)) calc(var(--space-32) - var(--border-width-2));
	font-size: var(--font-size-button-lg);
	line-height: var(--font-line-height-button-lg);
	letter-spacing: var(--font-letter-spacing-button-lg);
}

.btn--md {
	--btn-icon: 16px;

	padding: calc(var(--space-12) - var(--border-width-2)) calc(var(--space-24) - var(--border-width-2));
	font-size: var(--font-size-button-md);
	line-height: var(--font-line-height-button-md);
	letter-spacing: var(--font-letter-spacing-button-md);
}

/* Primary: metallic gold. */
.btn--primary,
.wp-block-button.is-style-ga-primary > .wp-block-button__link {
	--btn-fg: var(--action-primary-fg);
	--btn-bg: var(--gradient-gold-metallic);
}

.btn--primary:hover,
.wp-block-button.is-style-ga-primary > .wp-block-button__link:hover { --btn-bg: var(--gradient-gold-metallic-hover); }
.btn--primary:active,
.wp-block-button.is-style-ga-primary > .wp-block-button__link:active { --btn-bg: var(--gradient-gold-metallic-pressed); }

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

.btn--primary,
.wp-block-button.is-style-ga-primary > .wp-block-button__link {
	position: relative;
	isolation: isolate;
	transition: background 0.15s ease, box-shadow 0.35s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--primary::before,
.wp-block-button.is-style-ga-primary > .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--border-width-2) - 1px);
	z-index: 1;
	padding: 3px;
	border-radius: inherit;
	background: conic-gradient(from var(--ga-trace), transparent 0deg 200deg, rgba(214, 173, 85, 0.5) 260deg, #f0d6a0 310deg, #fffaf0 345deg, #ffffff 354deg, transparent 360deg);
	-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);
	opacity: 0;
	pointer-events: none;
}

.btn--primary:hover,
.wp-block-button.is-style-ga-primary > .wp-block-button__link:hover {
	box-shadow: 0 0 0 1px rgba(240, 214, 160, 0.5), 0 0 22px 2px rgba(214, 173, 85, 0.6);
	animation: ga-glow 1.1s ease-out;
}

.btn--primary:hover::before,
.wp-block-button.is-style-ga-primary > .wp-block-button__link:hover::before {
	animation: ga-trace 1.1s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}

@keyframes ga-trace {
	0% { --ga-trace: 0deg; opacity: 0; }
	10% { opacity: 1; }
	82% { opacity: 1; }
	100% { --ga-trace: 360deg; opacity: 0; }
}

/* Gold pulse: strong while the beam travels, then it settles on the hover glow. */
@keyframes ga-glow {
	0% { box-shadow: 0 0 0 0 rgba(240, 214, 160, 0), 0 0 0 0 rgba(214, 173, 85, 0); }
	45% { box-shadow: 0 0 0 2px rgba(255, 246, 220, 0.75), 0 0 36px 6px rgba(214, 173, 85, 0.85); }
	100% { box-shadow: 0 0 0 1px rgba(240, 214, 160, 0.5), 0 0 22px 2px rgba(214, 173, 85, 0.6); }
}

@media (prefers-reduced-motion: reduce) {
	.btn--primary:hover,
	.wp-block-button.is-style-ga-primary > .wp-block-button__link:hover,
	.btn--primary:hover::before,
	.wp-block-button.is-style-ga-primary > .wp-block-button__link:hover::before {
		animation: none;
	}
}

/* Secondary: indigo outline. */
.btn--secondary,
.wp-block-button.is-style-ga-secondary > .wp-block-button__link {
	--btn-fg: var(--action-secondary-fg);
	--btn-border: var(--action-secondary-border);
}

.btn--secondary:hover,
.wp-block-button.is-style-ga-secondary > .wp-block-button__link:hover { --btn-bg: var(--action-secondary-bg-hover); }
.btn--secondary:active,
.wp-block-button.is-style-ga-secondary > .wp-block-button__link:active { --btn-bg: var(--action-secondary-bg-pressed); }

/* Tertiary: gold text only, with arrow. */
.btn--tertiary {
	--btn-fg: var(--action-tertiary-fg);

	border-width: 0;
	border-radius: var(--radius-xs);
	padding-inline: 0;
}

.btn--tertiary.btn--lg { padding-block: var(--space-8); }
.btn--tertiary.btn--md { padding-block: var(--space-4); }

.btn--tertiary::after {
	content: "→";
}

.btn--tertiary:hover,
.btn--tertiary:active { --btn-fg: var(--action-tertiary-fg-hover); }

/* Inverse: white outline on dark backgrounds. */
.btn--inverse,
.wp-block-button.is-style-ga-inverse > .wp-block-button__link {
	--btn-fg: var(--action-inverse-fg);
	--btn-border: var(--action-inverse-border);
}

.btn--inverse:hover,
.wp-block-button.is-style-ga-inverse > .wp-block-button__link:hover { --btn-bg: var(--action-inverse-bg-hover); }
.btn--inverse:active,
.wp-block-button.is-style-ga-inverse > .wp-block-button__link:active { --btn-bg: var(--action-inverse-bg-pressed); }

/* Inverse gold: metallic gold border on dark backgrounds.
   The border is a masked ::before, so it works on any background. */
.btn--inverse-gold,
.wp-block-button.is-style-ga-inverse-gold > .wp-block-button__link {
	--btn-fg: var(--action-inverse-gold-fg);

	position: relative;
}

.btn--inverse-gold::before,
.wp-block-button.is-style-ga-inverse-gold > .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--border-width-2));
	padding: var(--border-width-2);
	border-radius: inherit;
	background: var(--gradient-gold-metallic);
	-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);
	pointer-events: none;
}

.btn--inverse-gold:hover,
.wp-block-button.is-style-ga-inverse-gold > .wp-block-button__link:hover { --btn-bg: var(--action-inverse-gold-bg-hover); }
.btn--inverse-gold:active,
.wp-block-button.is-style-ga-inverse-gold > .wp-block-button__link:active { --btn-bg: var(--action-inverse-gold-bg-pressed); }

/* Brand gradients: Brand and Iris. Hover and Pressed darken with an inner layer. */
.btn--gradient-brand,
.btn--gradient-iris {
	--btn-fg: var(--text-inverse);
}

.btn--gradient-brand { --btn-bg: var(--gradient-brand); }
.btn--gradient-iris { --btn-bg: var(--gradient-iris); }

.btn--gradient-brand:hover,
.btn--gradient-iris:hover { box-shadow: inset 0 0 0 999px var(--color-alpha-black-10); }

.btn--gradient-brand:active,
.btn--gradient-iris:active { box-shadow: inset 0 0 0 999px var(--color-alpha-black-25); }

/* WhatsApp. */
.btn--whatsapp {
	--btn-bg: var(--action-whatsapp-bg);
	--btn-fg: var(--color-white);
}

.btn--whatsapp:hover { box-shadow: inset 0 0 0 999px var(--color-alpha-black-10); }

/* Disabled: flat across all types. */
.btn:disabled,
.btn[aria-disabled="true"] {
	--btn-bg: var(--action-disabled-bg);
	--btn-fg: var(--action-disabled-fg);
	--btn-border: transparent;

	box-shadow: none;
	cursor: not-allowed;
	pointer-events: none;
}

.btn--secondary:disabled,
.btn--secondary[aria-disabled="true"] {
	--btn-bg: transparent;
	--btn-border: var(--action-disabled-border);
}

.btn--tertiary:disabled,
.btn--tertiary[aria-disabled="true"] {
	--btn-bg: transparent;
}

.btn--inverse:disabled,
.btn--inverse[aria-disabled="true"],
.btn--inverse-gold:disabled,
.btn--inverse-gold[aria-disabled="true"] {
	--btn-bg: transparent;
	--btn-fg: var(--text-inverse-secondary);
	--btn-border: var(--border-inverse);
}

.btn--inverse-gold:disabled::before,
.btn--inverse-gold[aria-disabled="true"]::before {
	display: none;
}

/* ==========================================================
   Header and footer — base
   ========================================================== */

:where(.ga-header, .ga-footer) :is(ul, p) {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.ga-header, .ga-footer) a {
	text-decoration: none;
}

.ga-logo {
	display: block;
	flex-shrink: 0;
	color: inherit;
}

.ga-logo svg {
	display: block;
	width: auto;
	height: var(--ga-logo-h);
}

/* ==========================================================
   Header
   Themes: --light (inner pages), --dark, --transparent (over the hero;
   switches to dark with .is-scrolled or when the menu is open).
   ========================================================== */

.ga-header {
	--ga-logo-h: 94px;
	--ga-header-fg: var(--text-primary);
	--ga-header-logo: var(--text-brand);
	--ga-header-hover: var(--text-accent);

	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	border-bottom: 1px solid transparent;
	color: var(--ga-header-fg);
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.ga-header--light {
	background: var(--surface-default);
	border-bottom-color: var(--border-subtle);
}

.ga-header--dark,
.ga-header--transparent.is-scrolled,
.ga-menu-open .ga-header {
	--ga-header-fg: var(--text-inverse);
	--ga-header-logo: var(--text-inverse);
	--ga-header-hover: var(--text-accent-inverse);

	background: var(--surface-brand);
	border-bottom-color: transparent;
}

/* With the menu open, no blur: backdrop-filter would make the fixed panel
   size itself relative to the header instead of the screen. */
.ga-menu-open .ga-header {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Becoming solid on scroll happens instantly: with a fade, a fast scroll showed the content
   through the still-translucent header for a moment. Fading back only happens on the way
   up, when the hero is underneath again. */
.ga-header--transparent.is-scrolled {
	transition-duration: 0s;
}

/* Over the hero: fixed, taking no space on the page. */
.ga-header--transparent {
	--ga-header-fg: var(--text-inverse);
	--ga-header-logo: var(--text-inverse);
	--ga-header-hover: var(--text-accent-inverse);

	position: fixed;
	right: 0;
	left: 0;
	background: var(--surface-header-transparent);
	border-bottom-color: var(--border-inverse-subtle);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.ga-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-24);
	padding: 40px var(--layout-margin);
}

.ga-header .ga-logo {
	color: var(--ga-header-logo);
}

/* Two logo versions: the light one uses a darker gold to read on white. */
.ga-logo__light,
.ga-header--dark .ga-logo__dark,
.ga-header--transparent .ga-logo__dark,
.ga-menu-open .ga-logo__dark {
	display: block;
}

.ga-logo__dark,
.ga-header--dark .ga-logo__light,
.ga-header--transparent .ga-logo__light,
.ga-menu-open .ga-logo__light {
	display: none;
}

.ga-nav {
	display: flex;
	align-items: center;
	gap: var(--space-24);
}

.ga-nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
	padding-top: var(--space-16);
	color: var(--ga-header-fg);
	font-family: var(--font-family-body);
	font-size: var(--font-size-label-nav);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-label-nav);
	letter-spacing: var(--font-letter-spacing-label-nav);
	text-transform: uppercase;
	white-space: nowrap;
	transition: color 0.15s ease;
}

/* 2px indicator, visible only on the current page. */
.ga-nav a::after {
	content: "";
	width: 100%;
	height: 2px;
	border-radius: var(--radius-full);
	background: transparent;
}

.ga-nav a:hover,
.ga-nav a:focus {
	color: var(--ga-header-hover);
}

.ga-nav a[aria-current="page"]::after {
	background: var(--border-accent);
}

.ga-header__actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-20);
}

.ga-header__menu-cta {
	display: none;
}

.ga-header__toggle,
.ga-header__toggle:hover,
.ga-header__toggle:focus {
	display: none;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ga-header-fg);
	cursor: pointer;
}

.ga-header__toggle svg {
	display: block;
}

.ga-header__toggle-close,
.ga-menu-open .ga-header__toggle-open {
	display: none;
}

.ga-menu-open .ga-header__toggle-close {
	display: block;
}

/* Tablet: logo + CTA + menu. */
@media (max-width: 1199px) {
	.ga-header {
		--ga-logo-h: 79px;
	}

	.ga-header__inner {
		padding-block: 32px;
	}

	.ga-header__toggle,
	.ga-header__toggle:hover,
	.ga-header__toggle:focus {
		display: block;
	}

	/* Full-screen menu below the header. */
	.ga-header__nav {
		position: fixed;
		inset: var(--ga-header-bottom, 0px) 0 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-40);
		padding: var(--space-48) var(--layout-margin);
		overflow-y: auto;
		background: var(--surface-brand-strong);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-12px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.ga-menu-open .ga-header__nav {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	/* Links and CTA enter one after another (--ga-i is set by header.js). On close, they leave together. */
	.ga-nav > li,
	.ga-header__menu-cta {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.15s ease, transform 0.15s ease;
	}

	.ga-menu-open .ga-nav > li,
	.ga-menu-open .ga-header__menu-cta {
		opacity: 1;
		transform: none;
		transition:
			opacity 0.5s ease calc(200ms + var(--ga-i, 0) * 110ms),
			transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) calc(200ms + var(--ga-i, 0) * 110ms);
	}

	.ga-menu-open,
	.ga-menu-open body {
		overflow: hidden;
	}

	.ga-nav {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-24);
	}

	.ga-nav a {
		align-items: flex-start;
		gap: var(--space-8);
		padding-top: 0;
		font-family: var(--font-family-heading);
		font-size: var(--font-size-heading-h3);
		font-weight: var(--font-weight-bold);
		line-height: var(--font-line-height-heading-h3);
		letter-spacing: 0;
	}

	.ga-nav a::after {
		width: 40px;
	}
}

@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
	.ga-header__nav,
	.ga-menu-open .ga-header__nav,
	.ga-nav > li,
	.ga-menu-open .ga-nav > li,
	.ga-header__menu-cta,
	.ga-menu-open .ga-header__menu-cta {
		transform: none;
		transition-delay: 0s;
	}
}

/* Mobile: logo + menu. The CTA moves into the menu. */
@media (max-width: 767px) {
	.ga-header {
		--ga-logo-h: 66px;
	}

	.ga-header__inner {
		padding-block: var(--space-24);
	}

	.ga-header__cta {
		display: none;
	}

	.ga-header__menu-cta {
		display: inline-flex;
		align-self: stretch;
	}
}

/* ==========================================================
   Footer
   ========================================================== */

.ga-footer {
	--ga-logo-h: 65px;

	background: var(--surface-brand-strong);
	color: var(--text-inverse);
}

.ga-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-64);
	padding: var(--space-80) var(--layout-margin) var(--space-32);
}

.ga-footer__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-64);
}

.ga-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-20);
}

.ga-footer__logo {
	color: var(--text-inverse);
}

.ga-footer__tagline {
	max-width: 340px;
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-sm);
	line-height: var(--font-line-height-body-sm);
}

.ga-footer__cols {
	display: flex;
	align-items: flex-start;
	gap: var(--space-80);
}

.ga-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	font-family: var(--font-family-label);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}

.ga-footer__title {
	color: var(--text-accent-inverse);
	font-size: var(--font-size-label-eyebrow);
	line-height: var(--font-line-height-label-eyebrow);
	letter-spacing: var(--font-letter-spacing-label-eyebrow);
	text-transform: uppercase;
}

.ga-footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

/* Figma label/link: Montserrat Medium 15/22 (column titles stay in Oswald). */
.ga-footer__links a,
.ga-footer__links a:visited {
	display: block;
	color: var(--text-inverse);
	font-family: var(--font-family-body);
	font-size: 15px;
	line-height: 22px;
	transition: color 0.15s ease;
}

.ga-footer__links a:hover,
.ga-footer__links a:focus {
	color: var(--text-accent-inverse);
}

.ga-footer__bottom {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-12);
	padding-top: var(--space-24);
	border-top: 1px solid var(--border-inverse-subtle);
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-caption);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-body-caption);
}

.ga-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
}

.ga-footer__legal-list li + li::before {
	content: "\00a0·\00a0";
}

.ga-footer__legal-list a,
.ga-footer__legal-list a:visited {
	color: inherit;
}

.ga-footer__legal-list a:hover {
	color: var(--text-inverse);
}

@media (max-width: 1199px) {
	.ga-footer {
		--ga-logo-h: 56px;
	}

	.ga-footer__inner {
		gap: var(--space-48);
		padding-top: var(--space-64);
	}

	.ga-footer__top {
		flex-direction: column;
		gap: var(--space-48);
	}

	.ga-footer__tagline {
		max-width: none;
	}

	.ga-footer__cols {
		justify-content: space-between;
		gap: var(--space-32);
		width: 100%;
	}
}

@media (max-width: 767px) {
	.ga-footer {
		--ga-logo-h: 51px;
	}

	.ga-footer__inner {
		gap: var(--space-40);
		padding-top: var(--space-48);
	}

	.ga-footer__top {
		gap: var(--space-40);
	}

	.ga-footer__cols {
		flex-direction: column;
		gap: var(--space-32);
	}

	.ga-footer__bottom {
		flex-direction: column;
	}
}

/* Arrow to the right of the text (Button block with the ga-has-arrow class). */
.ga-has-arrow > .wp-block-button__link::after {
	content: "";
	flex-shrink: 0;
	width: var(--btn-icon, 20px);
	height: var(--btn-icon, 20px);
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
	mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}

/* ==========================================================
   Home — Hero
   Cover block: photo (z 0) → overlay (z 1) → gold lines (z 2) → content (z 3).
   Sits below the transparent header.
   ========================================================== */

.wp-block-cover.ga-hero {
	min-height: 860px;
	padding: 151px var(--layout-margin) 0;
	overflow: hidden;
	background: var(--surface-brand-strong);
}

.ga-hero::before {
	content: "";
	position: absolute;
	right: -220px;
	bottom: -50px;
	z-index: 2;
	width: 640px;
	height: 480px;
	background: url("../img/hero-deco-lines.svg") center / contain no-repeat;
	pointer-events: none;
}

.ga-hero .wp-block-cover__inner-container {
	z-index: 3;
}

.ga-hero .wp-block-group__inner-container {
	display: contents;
}

.ga-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-32);
	max-width: 738px;
	text-align: center;
}

.ga-hero :is(.ga-hero__title, .ga-hero__subtitle, .ga-hero__copy, .ga-hero__text, .ga-hero__actions) {
	margin: 0;
}

.ga-hero__copy {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	gap: var(--space-16);
}

.ga-hero__title {
	color: var(--text-inverse);
	font-family: var(--font-family-display);
	font-size: 96px;
	font-weight: var(--font-weight-bold);
	line-height: 90px;
	text-transform: uppercase;
	text-shadow: 0 4px 32px rgba(28, 23, 58, 0.85);
}

/* Tight to the title (4px in Figma). Shadow via filter: text-shadow doesn't work with clipped text. */
.ga-hero__subtitle {
	margin-top: calc(var(--space-4) - var(--space-32)) !important;
	background: var(--gradient-gold-metallic);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: var(--font-family-display);
	font-size: 44px;
	font-weight: var(--font-weight-bold);
	line-height: 48px;
	text-transform: uppercase;
	filter: drop-shadow(0 4px 32px rgba(28, 23, 58, 0.85));
}

.ga-hero__text {
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	line-height: var(--font-line-height-body-md);
}

/* Hero type a step below the display tokens (smaller hero): 96/44 on desktop, 72/38 on tablet, 52/30 on mobile. */
@media (max-width: 1199px) {
	.ga-hero__title {
		font-size: 72px;
		line-height: 68px;
	}

	.ga-hero__subtitle {
		font-size: 38px;
		line-height: 42px;
	}
}

@media (max-width: 767px) {
	.ga-hero__title {
		font-size: 52px;
		line-height: 50px;
	}

	.ga-hero__subtitle {
		font-size: 30px;
		line-height: 33px;
	}
}

/* Tablet: content centered over the photo; the overlay becomes even so the text is readable.
   !important because the block stores the gradient as an inline style. */
@media (max-width: 1199px) {
	.wp-block-cover.ga-hero {
		justify-content: center;
		min-height: 780px;
		padding-top: calc(144px + var(--space-48));
		padding-bottom: var(--layout-section-padding);
	}

	.ga-hero .wp-block-cover__background {
		background: linear-gradient(180deg, rgba(28, 23, 58, 0.55) 0%, rgba(28, 23, 58, 0.75) 55%, rgba(28, 23, 58, 0.92) 100%) !important;
	}

	.ga-hero::before {
		right: -160px;
		bottom: -80px;
		width: 420px;
		height: 315px;
	}
}

@media (max-width: 767px) {
	.wp-block-cover.ga-hero {
		min-height: 720px;
		padding-top: calc(115px + var(--space-40));
	}

	.ga-hero__content {
		gap: var(--space-24);
	}

	.ga-hero__subtitle {
		margin-top: calc(var(--space-4) - var(--space-24)) !important;
	}

	.ga-hero::before {
		right: -140px;
		bottom: -60px;
		width: 300px;
		height: 225px;
	}

	/* Buttons stacked full width; long text may wrap to two lines. */
	.ga-hero__actions {
		flex-direction: column;
		align-items: stretch !important;
		align-self: stretch;
	}

	.ga-hero__actions > .wp-block-button,
	.ga-hero__actions > .wp-block-button > .wp-block-button__link {
		width: 100%;
		white-space: normal;
	}

	/* The button text doesn't fit in 350px at LG size. */
	.ga-hero .wp-block-button > .wp-block-button__link {
		--btn-icon: 16px;

		padding: calc(var(--space-12) - var(--border-width-2)) calc(var(--space-24) - var(--border-width-2));
		font-size: var(--font-size-button-md);
		line-height: var(--font-line-height-button-md);
	}
}

/* ==========================================================
   Home — Services bar
   Each link is a Group: icon (Image) + title with the link + "Ver más".
   The title link covers the whole card (::after).
   ========================================================== */

.ga-service-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 32px + 1px divider + 32px */
	gap: calc(2 * var(--space-32) + 1px);
	padding: var(--space-32) var(--layout-margin);
	border-block: 1px solid var(--border-inverse-subtle);
	background: var(--surface-brand);
}

.ga-service-bar .wp-block-group__inner-container {
	display: contents;
}

.ga-service-bar :is(figure, .wp-block-heading, p) {
	margin: 0;
}

.ga-service-link {
	position: relative;
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: var(--space-20);
	min-width: 0;
	min-height: 114px;
	border-radius: var(--radius-md);
}

/* Vertical divider between links. */
.ga-service-link + .ga-service-link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(-1 * var(--space-32) - 1px);
	width: 1px;
	height: 48px;
	background: var(--border-inverse-subtle);
	transform: translateY(-50%);
}

.ga-service-link__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 72px;
	height: 72px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.06);
	transition: background-color 0.2s ease;
}

.ga-service-link__icon img {
	display: block;
	width: 36px;
	height: 36px;
}

.ga-service-link__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
}

.ga-service-link__title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h3);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-heading-h3);
	white-space: nowrap;
}

.ga-service-link__title a,
.ga-service-link__title a:hover,
.ga-service-link__title a:focus {
	background: var(--gradient-gold-metallic);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-decoration: none;
	outline: none;
}

.ga-service-link__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ga-service-link__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-label-cta);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-label-cta);
	letter-spacing: var(--font-letter-spacing-label-nav);
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.ga-service-link__cta::after {
	content: "";
	width: 20px;
	height: 20px;
	background-color: var(--icon-accent);
	-webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
	mask: url("../icons/arrow-right.svg") center / contain no-repeat;
	transition: transform 0.2s ease;
}

.ga-service-link:hover .ga-service-link__icon { background: rgba(255, 255, 255, 0.16); }
.ga-service-link:hover .ga-service-link__cta { color: var(--text-inverse); }
.ga-service-link:hover .ga-service-link__cta::after { transform: translateX(4px); }

.ga-service-link:focus-within {
	outline: 3px solid var(--border-focus);
	outline-offset: 4px;
}

/* Tablet: icon on top, centered text. */
@media (max-width: 1199px) {
	.ga-service-bar {
		align-items: stretch;
		padding-block: var(--space-40);
	}

	.ga-service-link {
		flex-direction: column;
		gap: var(--space-16);
	}

	.ga-service-link__text {
		align-items: center;
		text-align: center;
	}
}

/* Mobile: vertical list, icon on the left, horizontal dividers. */
@media (max-width: 767px) {
	.ga-service-bar {
		flex-direction: column;
		gap: 0;
		padding-block: var(--space-8);
	}

	.ga-service-link {
		flex: none;
		flex-direction: row;
		justify-content: flex-start;
		gap: var(--space-20);
		min-height: 0;
		padding-block: var(--space-24);
	}

	.ga-service-link + .ga-service-link {
		border-top: 1px solid var(--border-inverse-subtle);
		border-radius: 0;
	}

	.ga-service-link + .ga-service-link::before {
		display: none;
	}

	.ga-service-link__icon {
		width: 64px;
		height: 64px;
	}

	.ga-service-link__icon img {
		width: 32px;
		height: 32px;
	}

	.ga-service-link__text {
		align-items: flex-start;
		text-align: left;
	}
}

/* ==========================================================
   Home — Intro video
   Video block on gradient/brand-bg: starts muted and looping, with custom
   pause and sound buttons (inc/patterns.php + assets/js/video-intro.js).
   ========================================================== */

.ga-video-intro {
	padding: var(--layout-section-padding) var(--layout-margin);
	background: var(--gradient-brand-bg);
}

.ga-video-intro .wp-block-group__inner-container {
	display: contents;
}

.wp-block-video.ga-video-intro__media {
	position: relative;
	max-width: var(--layout-container);
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	border-radius: var(--radius-xl);
	box-shadow: var(--elevation-xl);
	aspect-ratio: 16 / 9;
	background: var(--surface-brand-strong);
}

.wp-block-video.ga-video-intro__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Pause and sound (added by inc/patterns.php; shown by video-intro.js). */
.ga-video-intro__controls {
	position: absolute;
	right: var(--space-24);
	bottom: var(--space-24);
	z-index: 2;
	display: flex;
	gap: var(--space-12);
}

.ga-video-intro__controls[hidden] {
	display: none;
}

.ga-video-intro__btn,
.ga-video-intro__btn:hover,
.ga-video-intro__btn:focus,
.ga-reel__btn,
.ga-reel__btn:hover,
.ga-reel__btn:focus {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid var(--border-inverse);
	border-radius: var(--radius-full);
	background: var(--color-alpha-indigo-950-60);
	color: var(--icon-inverse);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.ga-video-intro__btn:hover,
.ga-reel__btn:hover {
	border-color: var(--text-accent-inverse);
	color: var(--text-accent-inverse);
}

.ga-video-intro__btn:focus-visible,
.ga-reel__btn:focus-visible {
	outline: 3px solid var(--border-focus);
	outline-offset: 2px;
}

.ga-video-intro__icon {
	display: grid;
}

.ga-video-intro__icon svg {
	width: 24px;
	height: 24px;
}

:is(.ga-video-intro__media, .ga-reel__player).is-paused .ga-video-intro__icon--pause,
:is(.ga-video-intro__media, .ga-reel__player):not(.is-paused) .ga-video-intro__icon--play,
:is(.ga-video-intro__media, .ga-reel__player).is-muted .ga-video-intro__icon--sound,
:is(.ga-video-intro__media, .ga-reel__player):not(.is-muted) .ga-video-intro__icon--muted {
	display: none;
}

@media (max-width: 767px) {
	.wp-block-video.ga-video-intro__media {
		border-radius: var(--radius-lg);
	}

	.ga-video-intro__controls {
		right: var(--space-12);
		bottom: var(--space-12);
		gap: var(--space-8);
	}

	.ga-video-intro__btn,
	.ga-video-intro__btn:hover,
	.ga-video-intro__btn:focus,
	.ga-reel__btn,
	.ga-reel__btn:hover,
	.ga-reel__btn:focus {
		width: 44px;
		height: 44px;
	}

	.ga-video-intro__icon svg {
		width: 20px;
		height: 20px;
	}
}

/* ----- Home — About the project (home-presentacion pattern): white background, 800 × 450 video ----- */

.ga-presentation {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
	padding: var(--space-96) var(--layout-margin);
	background: var(--surface-default);
}

.ga-presentation > .wp-block-group__inner-container {
	display: contents;
}

.ga-presentation .ga-presentation__header {
	max-width: 918px;
}

.ga-presentation .wp-block-video.ga-video-intro__media {
	width: 100%;
	max-width: 800px;
}

/* Gold play button centered (--click variant): 96px glass halo + 68px gold circle. */
.ga-video-intro__start,
.ga-video-intro__start:hover,
.ga-video-intro__start:focus {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.22);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: transform 0.2s ease;
}

.ga-video-intro__start:hover {
	transform: translate(-50%, -50%) scale(1.06);
}

.ga-video-intro__start:focus-visible {
	outline: 3px solid var(--border-focus);
	outline-offset: 2px;
}

.ga-video-intro__start-icon {
	width: 68px;
	height: 68px;
	border-radius: var(--radius-full);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M26 22l20 12-20 12z' fill='%23261F4D' stroke='%23261F4D' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
		var(--gradient-gold-metallic);
	box-shadow: 0 6px 16px rgba(28, 23, 58, 0.3);
}

/* Poster as a responsive image over the video (--click variant); hidden once it starts. */
.ga-video-intro__poster {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.ga-video-intro__media.is-started :is(.ga-video-intro__start, .ga-video-intro__poster) {
	display: none;
}

@media (max-width: 1199px) {
	.ga-presentation {
		padding-block: var(--space-80);
	}
}

@media (max-width: 767px) {
	.ga-presentation {
		gap: var(--space-40);
		padding-block: var(--space-64);
	}

	.ga-video-intro__start,
	.ga-video-intro__start:hover,
	.ga-video-intro__start:focus {
		width: 72px;
		height: 72px;
	}

	.ga-video-intro__start-icon {
		width: 52px;
		height: 52px;
	}
}

/* ==========================================================
   Floating WhatsApp (parts/whatsapp-float.php)
   ========================================================== */

.ga-wa-float {
	position: fixed;
	right: 10px;
	bottom: var(--space-24);
	z-index: 200;
	display: flex;
	align-items: center;
	text-decoration: none;
}

.ga-wa-float__button {
	position: relative;
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	border-radius: var(--radius-full);
	background: var(--action-whatsapp-bg);
	box-shadow: var(--elevation-lg);
	color: var(--icon-inverse);
	transition: filter 0.15s ease;
}

.ga-wa-float__button svg {
	display: block;
}

.ga-wa-float:hover .ga-wa-float__button {
	filter: brightness(0.94);
}

.ga-wa-float:focus-visible {
	outline: none;
}

.ga-wa-float:focus-visible .ga-wa-float__button {
	outline: 3px solid var(--border-focus);
	outline-offset: 2px;
}

/* Don't cover the full-screen menu. */
.ga-menu-open .ga-wa-float {
	display: none;
}

/* Mobile: 60px circle. */
@media (max-width: 767px) {
	.ga-wa-float__button {
		width: 60px;
		height: 60px;
	}

	.ga-wa-float__button svg {
		width: 34px;
		height: 34px;
	}
}

/* ==========================================================
   Home — Impulsamos (title + logo + fan slider)
   ========================================================== */

.ga-about {
	overflow: hidden;
	padding: var(--layout-section-padding) var(--layout-margin);
	background: var(--surface-brand-strong);
}

.ga-about .wp-block-group__inner-container {
	display: contents;
}

.ga-about__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-48);
	max-width: var(--layout-container);
	margin: 0 auto var(--space-56);
}

.ga-about :is(.ga-about__title, figure) {
	margin: 0;
}

.ga-about__title {
	max-width: 720px;
	color: var(--text-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h1);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-heading-h1);
}

/* The bold part is shown in metallic gold. */
.ga-about__title strong {
	background: var(--gradient-gold-metallic);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: inherit;
}

.ga-about__brand {
	display: flex;
	flex: 0 0 494px;
	align-items: center;
	justify-content: center;
	height: 198px;
	border: var(--border-width-2) solid var(--color-gold-500);
	border-radius: var(--radius-xl);
}

.ga-about__logo img {
	display: block;
	width: auto;
	height: 110px;
}

/* ----- Fan ----------------------------------------------
   1312 × 504 stage from Figma. --u = 1 design px scaled to the actual width.
   Each photo is positioned according to data-pos (stage.js). */

figure.wp-block-gallery.ga-fan {
	--u: calc(100cqw / 1312);

	position: relative;
	display: block;
	max-width: var(--layout-container);
	margin: 0 auto;
	container-type: inline-size;
	aspect-ratio: 1312 / 504;
	touch-action: pan-y;
	user-select: none;
}

/* Selectors with "figure": the WordPress gallery sets position, width and margin with
   more specific selectors (even ID ones: :not(#individual-image)), hence also !important. */
figure.wp-block-gallery.ga-fan > figure.wp-block-image {
	--dx: 0px;
	--dy: 0px;
	--r: 0deg;
	--s: 1;

	position: absolute;
	top: calc(24 * var(--u));
	left: 50%;
	z-index: 10;
	width: calc(300 * var(--u)) !important;
	height: calc(420 * var(--u));
	margin: 0 0 0 calc(-150 * var(--u)) !important;
	overflow: hidden;
	border-radius: calc(20 * var(--u));
	box-shadow: var(--elevation-xl);
	transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(var(--s));
	transition: transform 0.5s ease, opacity 0.5s ease;
	cursor: pointer;
}

figure.wp-block-gallery.ga-fan > figure.wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	pointer-events: none;
}

/* 20% indigo veil on all photos. */
figure.wp-block-gallery.ga-fan > figure.wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-alpha-indigo-950-20);
	pointer-events: none;
}

figure.wp-block-gallery.ga-fan > figure[data-pos="0"] { cursor: default; }
figure.wp-block-gallery.ga-fan > figure[data-pos="1"] { --dx: calc(190 * var(--u)); --dy: calc(12 * var(--u)); --r: 5deg; --s: 0.9; z-index: 9; }
figure.wp-block-gallery.ga-fan > figure[data-pos="-1"] { --dx: calc(-190 * var(--u)); --dy: calc(12 * var(--u)); --r: -5deg; --s: 0.9; z-index: 9; }
figure.wp-block-gallery.ga-fan > figure[data-pos="2"] { --dx: calc(360 * var(--u)); --dy: calc(40 * var(--u)); --r: 10deg; --s: 0.8; z-index: 8; }
figure.wp-block-gallery.ga-fan > figure[data-pos="-2"] { --dx: calc(-360 * var(--u)); --dy: calc(40 * var(--u)); --r: -10deg; --s: 0.8; z-index: 8; }
figure.wp-block-gallery.ga-fan > figure[data-pos="3"] { --dx: calc(510 * var(--u)); --dy: calc(84 * var(--u)); --r: 15deg; --s: 0.7; z-index: 7; }
figure.wp-block-gallery.ga-fan > figure[data-pos="-3"] { --dx: calc(-510 * var(--u)); --dy: calc(84 * var(--u)); --r: -15deg; --s: 0.7; z-index: 7; }
figure.wp-block-gallery.ga-fan > figure[data-pos="4"] { --dx: calc(650 * var(--u)); --dy: calc(120 * var(--u)); --r: 20deg; --s: 0.6; z-index: 6; }
figure.wp-block-gallery.ga-fan > figure[data-pos="-4"] { --dx: calc(-650 * var(--u)); --dy: calc(120 * var(--u)); --r: -20deg; --s: 0.6; z-index: 6; }

/* The ones at the ends (±4 and beyond) wait hidden for their turn. */
figure.wp-block-gallery.ga-fan > figure.is-far {
	opacity: 0;
	pointer-events: none;
}

/* Without JS: only the first photo, centered. */
figure.ga-fan:not(.is-ready) > figure.wp-block-image:not(:first-child) {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	figure.wp-block-gallery.ga-fan > figure.wp-block-image {
		transition: none;
	}
}

/* ----- Controls (arrows + dots) ----- */

.ga-carousel-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-32);
	margin-top: var(--space-24);
}

/* Without enough pages (everything fits on screen) the scripts hide the controls. */
.ga-carousel-controls[hidden] {
	display: none;
}

.ga-carousel-arrow,
.ga-carousel-arrow:hover,
.ga-carousel-arrow:focus {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid var(--border-inverse);
	border-radius: var(--radius-full);
	background: var(--action-inverse-bg);
	color: var(--icon-inverse);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ga-carousel-arrow:hover {
	border-color: var(--border-accent);
	background: var(--action-inverse-bg-hover);
	color: var(--icon-accent);
}

.ga-carousel-arrow:focus-visible,
.ga-carousel-dot:focus-visible {
	outline: 3px solid var(--border-focus);
	outline-offset: 2px;
}

.ga-carousel-arrow svg {
	display: block;
}

/* Dots: all gray; the gold one is a bar (assets/js/dots.js) that at rest covers
   the active dot and, on change, stretches to the new one and shrinks into it. */
.ga-carousel-dots {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	/* The 24px touch areas stick out 7px around the 10px dots: this keeps the layout as before. */
	margin: -7px;
}

/* Touch area of 24 × 24 (accessibility minimum) with the 10px dot painted in the middle
   (padding + background-clip). Centers are 24px apart, so the areas don't overlap. */
.ga-carousel-dot,
.ga-carousel-dot:hover,
.ga-carousel-dot:focus {
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	padding: 7px;
	border: 0;
	border-radius: var(--radius-full);
	background-color: var(--color-alpha-white-30);
	background-clip: content-box;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ga-carousel-dots__bar {
	position: absolute;
	top: 50%;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: var(--radius-full);
	background: var(--action-primary-bg);
	transform: translateY(-50%);
	pointer-events: none;
	transition: left 0.2s ease, width 0.2s ease;
}

.ga-carousel-dots__bar.is-instant {
	transition: none;
}

/* Tablet: title and logo stacked; larger photos (the ones at the ends are cut off at the edge). */
@media (max-width: 1199px) {
	.ga-about__top {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-32);
		margin-bottom: var(--space-40);
	}

	.ga-about__brand {
		flex-basis: auto;
		width: 100%;
		height: 160px;
	}

	.ga-about__logo img {
		height: 88px;
	}

	figure.wp-block-gallery.ga-fan {
		--u: calc(100cqw / 1000);

		aspect-ratio: 1000 / 504;
	}
}

@media (max-width: 767px) {
	.ga-about__brand {
		height: 132px;
	}

	.ga-about__logo img {
		height: 72px;
	}

	figure.wp-block-gallery.ga-fan {
		--u: calc(100cqw / 620);

		aspect-ratio: 620 / 504;
	}

	.ga-carousel-controls {
		gap: var(--space-20);
	}
}

/* ==========================================================
   Banner — Contáctanos (Contact us)
   Cover block: black-and-white photo + indigo overlay that darkens toward the bottom.
   ========================================================== */

.wp-block-cover.ga-cta {
	min-height: 800px;
	padding: var(--layout-section-padding) var(--layout-margin);
	background: var(--surface-brand-strong);
}

.ga-cta .wp-block-group__inner-container {
	display: contents;
}

.ga-cta__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}

.ga-cta :is(.ga-cta__lead, .ga-cta__title, .ga-cta__actions) {
	margin: 0;
}

.ga-cta__lead {
	max-width: 680px;
	color: var(--text-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h3);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-heading-h3);
}

.ga-cta__title {
	background: var(--gradient-gold-metallic);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h1);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-heading-h1);
}

/* 40px between the titles block and the button (16px + 24px). */
.ga-cta .ga-cta__actions {
	margin-top: var(--space-24);
}

@media (max-width: 1199px) {
	.wp-block-cover.ga-cta {
		min-height: 640px;
	}
}

@media (max-width: 767px) {
	.wp-block-cover.ga-cta {
		min-height: 560px;
	}
}

/* ==========================================================
   Section header (eyebrow + title + text), centered.
   Reusable: Group with the ga-section-header class.
   ========================================================== */

.ga-section-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
	box-sizing: border-box;
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.ga-section-header > *,
.ga-section-header .wp-block-group__inner-container > * {
	margin: 0;
}

.ga-section-header .wp-block-group__inner-container {
	display: contents;
}

.ga-eyebrow {
	color: var(--text-accent-inverse);
	font-family: var(--font-family-label);
	font-size: var(--font-size-label-eyebrow);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-label-eyebrow);
	letter-spacing: var(--font-letter-spacing-label-eyebrow);
	text-transform: uppercase;
}

.ga-section-header__title {
	color: var(--text-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h2);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-heading-h2);
}

.ga-section-header__text {
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-lg);
	line-height: var(--font-line-height-body-lg);
}

/* Figma line breaks only on wide screens. */
@media (max-width: 1199px) {
	.ga-section-header__text br {
		display: none;
	}
}

/* ==========================================================
   Home — International experience
   ========================================================== */

.ga-experience {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--layout-section-gap);
	overflow: hidden;
	padding: var(--layout-section-padding) var(--layout-margin);
	background: var(--surface-brand-strong);
}

.ga-experience > .wp-block-group__inner-container {
	display: contents;
}

/* Gold lines at the bottom left and right. */
.ga-experience::before,
.ga-experience::after {
	content: "";
	position: absolute;
	bottom: -76px;
	width: 640px;
	height: 480px;
	background: center / contain no-repeat;
	pointer-events: none;
}

.ga-experience::before {
	left: -100px;
	background-image: url("../img/experience-deco-left.svg");
}

.ga-experience::after {
	right: -100px;
	background-image: url("../img/experience-deco-right.svg");
}

/* ----- Card carousel (Gallery block .ga-carousel) -----
   Selectors with "figure" and !important: the WordPress gallery sets layout, width and
   margin with more specific selectors (even ID ones). */

.ga-carousel-wrap {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--layout-container);
	margin-inline: auto;
}

figure.wp-block-gallery.ga-carousel,
.wp-block-group.ga-carousel {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--space-32) !important;
	margin: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

figure.wp-block-gallery.ga-carousel::-webkit-scrollbar,
.wp-block-group.ga-carousel::-webkit-scrollbar {
	display: none;
}

figure.wp-block-gallery.ga-carousel > figure.wp-block-image {
	position: relative;
	flex: 0 0 calc((100% - 2 * var(--space-32)) / 3) !important;
	width: calc((100% - 2 * var(--space-32)) / 3) !important;
	margin: 0 !important;
	overflow: hidden;
	border: 1px solid var(--border-inverse-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-brand);
	aspect-ratio: 416 / 600;
	scroll-snap-align: start;
	transition: border-color 0.2s ease;
}

/* With few photos (they all fit) they stay centered and static; if there are extra, the auto
   margins resolve to 0 and the carousel scrolls normally. */
figure.wp-block-gallery.ga-carousel > figure.wp-block-image:first-child {
	margin-left: auto !important;
}

figure.wp-block-gallery.ga-carousel > figure.wp-block-image:last-child {
	margin-right: auto !important;
}

figure.wp-block-gallery.ga-carousel > figure.wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	cursor: zoom-in;
}

/* gradient/card-overlay */
figure.wp-block-gallery.ga-carousel > figure.wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 23, 58, 0) 35%, rgba(28, 23, 58, 0.85) 75%, rgba(28, 23, 58, 0.98) 100%);
	pointer-events: none;
}

figure.wp-block-gallery.ga-carousel > figure.wp-block-image:hover {
	border-color: var(--border-accent);
}

/* "Ver imagen": the WordPress lightbox button styled per the design.
   !important on top/right: WordPress positions it top right with inline styles. */
.ga-carousel .lightbox-trigger,
.ga-carousel .lightbox-trigger:hover,
.ga-carousel .lightbox-trigger:focus {
	position: absolute;
	top: auto !important;
	right: auto !important;
	bottom: var(--space-32);
	left: var(--space-32);
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--space-16);
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	/* !important: WordPress sets the background with a selector of many :not() (0,4,1). */
	background: none !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	color: var(--text-inverse);
	opacity: 1;
	font-family: var(--font-family-body);
	font-size: var(--font-size-label-nav);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-label-nav);
	letter-spacing: var(--font-letter-spacing-label-nav);
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.ga-carousel .lightbox-trigger svg {
	display: none;
}

/* Circle with the "+" icon. */
.ga-carousel .lightbox-trigger::before {
	content: "";
	width: 48px;
	height: 48px;
	border: 1px solid var(--color-lavender-400);
	border-radius: var(--radius-full);
	background:
		url("../icons/plus-white.svg") center / 20px no-repeat,
		var(--action-inverse-bg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ga-carousel .lightbox-trigger::after {
	content: "Ver imagen";
}

figure.wp-block-gallery.ga-carousel > figure.wp-block-image:hover .lightbox-trigger::before {
	border-color: var(--border-accent);
	background-color: var(--action-inverse-bg-hover);
}

.ga-carousel .lightbox-trigger:focus-visible {
	outline: 3px solid var(--border-focus);
	outline-offset: 4px;
}

/* Arrows beside the cards (desktop) and dots below.
   The wrapper height is cards + 74px (64 margin + 10 dots). */
.ga-carousel-wrap .ga-carousel-controls {
	margin-top: var(--space-64);
}

.ga-carousel-wrap .ga-carousel-dots {
	gap: 0;
}

.ga-carousel-wrap .ga-carousel-arrow {
	position: absolute;
	top: calc(50% - 37px);
	transform: translateY(-50%);
}

.ga-carousel-wrap .ga-carousel-arrow[data-dir="-1"] { left: -96px; }
.ga-carousel-wrap .ga-carousel-arrow[data-dir="1"] { right: -96px; }

.ga-carousel-arrow:disabled,
.ga-carousel-arrow:disabled:hover {
	border-color: var(--border-inverse-subtle);
	background: var(--action-inverse-bg);
	color: var(--icon-disabled);
	cursor: default;
}

/* Lightbox window in brand colors.
   !important: WordPress sets the page background as an inline style. */
.wp-lightbox-overlay .scrim {
	background-color: var(--overlay-scrim) !important;
}

.wp-lightbox-overlay .close-button {
	color: var(--icon-inverse) !important;
	fill: var(--icon-inverse) !important;
}

@media (max-width: 1199px) {
	figure.wp-block-gallery.ga-carousel,
	.wp-block-group.ga-carousel {
		gap: var(--space-20) !important;
	}

	figure.wp-block-gallery.ga-carousel > figure.wp-block-image {
		flex-basis: calc((100% - var(--space-20)) / 2) !important;
		width: calc((100% - var(--space-20)) / 2) !important;
	}

	/* Arrows next to the dots. */
	.ga-carousel-wrap .ga-carousel-controls {
		margin-top: var(--space-40);
	}

	.ga-carousel-wrap .ga-carousel-arrow {
		position: static;
		transform: none;
	}

	.ga-experience::before,
	.ga-experience::after {
		width: 420px;
		height: 315px;
		bottom: -50px;
	}
}

@media (max-width: 767px) {
	figure.wp-block-gallery.ga-carousel,
	.wp-block-group.ga-carousel {
		gap: var(--space-16) !important;
	}

	/* One card, with the next one peeking in. */
	figure.wp-block-gallery.ga-carousel > figure.wp-block-image {
		flex-basis: 82% !important;
		width: 82% !important;
	}

	.ga-carousel .lightbox-trigger,
	.ga-carousel .lightbox-trigger:hover,
	.ga-carousel .lightbox-trigger:focus {
		bottom: var(--space-24);
		left: var(--space-24);
	}

	.ga-experience::before,
	.ga-experience::after {
		display: none;
	}
}

/* ==========================================================
   Home — Reels
   Section: Cover block (background photo + overlay). Slider: Gallery .ga-reels (stage.js).
   ========================================================== */

.wp-block-cover.ga-reels-section {
	min-height: 0;
	padding: var(--layout-section-padding) var(--layout-margin);
	overflow: hidden;
	background: var(--surface-brand-strong);
}

.ga-reels-section .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	gap: var(--layout-section-gap);
	width: 100%;
}

.ga-reels-section .wp-block-cover__inner-container > .wp-block-group__inner-container {
	display: contents;
}

/* 1312 × 710 stage from Figma; --u = 1 design px scaled to the actual width. */
figure.wp-block-gallery.ga-reels {
	--u: calc(100cqw / 1312);

	position: relative;
	display: block;
	width: 100%;
	max-width: var(--layout-container);
	margin: 0 auto;
	container-type: inline-size;
	aspect-ratio: 1312 / 710;
	touch-action: pan-y;
	user-select: none;
}

/* Glass frame behind the active reel. */
figure.wp-block-gallery.ga-reels::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--u));
	left: calc(449 * var(--u));
	z-index: 2;
	width: calc(414 * var(--u));
	height: calc(710 * var(--u));
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: calc(28 * var(--u));
	background: rgba(255, 255, 255, 0.06);
	box-shadow: var(--glass-elevated-shadow);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	pointer-events: none;
}

/* Selectors with "figure" and !important: the WordPress gallery sets position, width and margin
   with more specific selectors (even ID ones). */
figure.wp-block-gallery.ga-reels > figure.wp-block-image {
	--dim: 0;

	position: absolute;
	top: calc(16 * var(--u));
	left: calc(466 * var(--u));
	z-index: 3;
	width: calc(380 * var(--u)) !important;
	height: calc(676 * var(--u));
	margin: 0 !important;
	overflow: hidden;
	border: 1px solid var(--border-inverse-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-brand);
	transition: left 0.5s ease, top 0.5s ease, width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
	cursor: pointer;
}

figure.wp-block-gallery.ga-reels > figure.wp-block-image :is(a, img) {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

figure.wp-block-gallery.ga-reels > figure.wp-block-image img {
	object-fit: cover;
	transition: filter 0.5s ease;
	pointer-events: none;
}

/* Card overlay + side items veil (--dim). */
figure.wp-block-gallery.ga-reels > figure.wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(28, 23, 58, 0.6) 0%, rgba(28, 23, 58, 0) 20%, rgba(28, 23, 58, 0) 50%, rgba(28, 23, 58, 0.85) 80%, rgba(28, 23, 58, 0.98) 100%),
		rgba(28, 23, 58, var(--dim));
	transition: background-color 0.5s ease;
	pointer-events: none;
}

/* Side items: 480 × 520, behind the active one, blurred and dimmed. */
figure.wp-block-gallery.ga-reels > figure[data-pos="-1"],
figure.wp-block-gallery.ga-reels > figure[data-pos="1"] {
	--dim: 0.45;

	top: calc(94 * var(--u));
	z-index: 1;
	width: calc(480 * var(--u)) !important;
	height: calc(520 * var(--u));
}

figure.wp-block-gallery.ga-reels > figure[data-pos="-1"] { left: calc(110 * var(--u)); }
figure.wp-block-gallery.ga-reels > figure[data-pos="1"] { left: calc(722 * var(--u)); }

figure.wp-block-gallery.ga-reels > figure:is([data-pos="-1"], [data-pos="1"]) img {
	filter: blur(6px);
}

figure.wp-block-gallery.ga-reels > figure.is-far {
	opacity: 0;
	pointer-events: none;
}

figure.ga-reels:not(.is-ready) > figure.wp-block-image:not(:first-child) {
	opacity: 0;
}

/* Circular play button on the visible part of the side items. */
.ga-reel__play {
	position: absolute;
	top: 50%;
	left: calc(50% - 70 * var(--u));
	z-index: 1;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border: 1px solid var(--border-inverse);
	border-radius: var(--radius-full);
	background: var(--color-alpha-indigo-950-60);
	color: var(--icon-inverse);
	opacity: 0;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease;
	pointer-events: none;
}

figure[data-pos="1"] > .ga-reel__play { left: calc(50% + 70 * var(--u)); }
figure:is([data-pos="-1"], [data-pos="1"]):not(.is-far) > .ga-reel__play { opacity: 1; }

/* "Ver video" below the active reel. */
.ga-reel__watch,
.ga-reel__watch:hover,
.ga-reel__watch:focus {
	position: absolute;
	bottom: var(--space-24);
	left: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--space-12);
	padding: 14px 28px 14px var(--space-24);
	border: 0;
	border-radius: var(--radius-full);
	background: var(--color-alpha-indigo-950-60);
	color: var(--text-inverse);
	opacity: 0;
	font-family: var(--font-family-body);
	font-size: var(--font-size-button-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-button-lg);
	letter-spacing: var(--font-letter-spacing-button-lg);
	text-transform: uppercase;
	white-space: nowrap;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transform: translateX(-50%);
	transition: opacity 0.3s ease, color 0.15s ease;
	pointer-events: none;
	cursor: pointer;
}

figure[data-pos="0"] > .ga-reel__watch {
	opacity: 1;
	pointer-events: auto;
}

.ga-reel__watch:hover:not(:disabled) {
	color: var(--text-accent-inverse);
}

.ga-reel__watch:disabled {
	cursor: default;
}

.ga-reel__watch svg { width: 20px; height: 20px; }
.ga-reel__play svg { width: 28px; height: 28px; }

.ga-reel__watch:focus-visible {
	outline: 3px solid var(--border-focus);
	outline-offset: 2px;
}

/* Controls: arrows beside the stage, dots below.
   The wrapper measures stage + 72px (62 margin + 10 dots). */
.ga-stage-wrap:has(> .ga-reels) {
	position: relative;
	width: 100%;
	max-width: var(--layout-container);
	margin-inline: auto;
}

.ga-stage-wrap:has(> .ga-reels) .ga-carousel-controls {
	margin-top: 62px;
}

.ga-stage-wrap:has(> .ga-reels) .ga-carousel-dots {
	gap: 0;
}

.ga-stage-wrap:has(> .ga-reels) .ga-carousel-arrow {
	position: absolute;
	top: calc(50% - 36px);
	z-index: 4;
	transform: translateY(-50%);
}

.ga-stage-wrap:has(> .ga-reels) .ga-carousel-arrow[data-dir="-1"] { left: 0; }
.ga-stage-wrap:has(> .ga-reels) .ga-carousel-arrow[data-dir="1"] { right: 0; }

/* Video inside the active card ("Ver video"); when it ends or is closed, the photo returns. */
.ga-reel__player {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var(--surface-brand-strong);
	cursor: default;
}

.ga-reel__player :is(video, iframe) {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.ga-reel__controls {
	position: absolute;
	right: var(--space-16);
	bottom: var(--space-16);
	display: flex;
	gap: var(--space-8);
}

.ga-reel__close,
.ga-reel__close:hover,
.ga-reel__close:focus {
	position: absolute;
	top: var(--space-16);
	right: var(--space-16);
}

figure.wp-block-image.is-playing > .ga-reel__watch {
	opacity: 0 !important;
	pointer-events: none !important;
}

@media (max-width: 1199px) {
	/* Stage wider than the screen and centered: the active item looks large and the
	   side items are cut off at the edges. */
	figure.wp-block-gallery.ga-reels {
		width: 150%;
		max-width: none;
		margin-left: -25%;
	}

	.ga-stage-wrap:has(> .ga-reels) .ga-carousel-controls {
		margin-top: var(--space-40);
	}

	.ga-stage-wrap:has(> .ga-reels) .ga-carousel-arrow {
		position: static;
		transform: none;
	}
}

@media (max-width: 767px) {
	figure.wp-block-gallery.ga-reels {
		width: 240%;
		margin-left: -70%;
	}

	.ga-reel__play {
		display: none;
	}

	.ga-reel__watch,
	.ga-reel__watch:hover,
	.ga-reel__watch:focus {
		padding: var(--space-12) var(--space-20);
		font-size: var(--font-size-button-md);
	}
}

/* ==========================================================
   Home — Empresas que nos han confiado (Trusted by — logo marquee)
   Gallery block .ga-marquee; marquee.js duplicates the logos for the loop.
   ========================================================== */

.ga-clients {
	display: flex;
	flex-direction: column;
	gap: var(--space-56);
	padding-block: var(--layout-section-padding);
	background: var(--gradient-clients-bg);
}

.ga-clients > .wp-block-group__inner-container {
	display: contents;
}

/* The marquee goes full width; the header respects the page margin. */
.ga-clients .ga-section-header {
	width: min(720px, 100% - 2 * var(--layout-margin));
}

/* Faded edges: 120px on each side. */
.ga-marquee-viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
}

/* Selectors with "figure" and !important: the WordPress gallery sets layout, width and margin
   with more specific selectors (even ID ones). */
figure.wp-block-gallery.ga-marquee {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--space-24) !important;
	width: max-content;
	margin: 0;
}

figure.wp-block-gallery.ga-marquee.is-ready {
	animation: ga-marquee var(--ga-marquee-duration, 28s) linear infinite;
}

/* -50% minus half a gap: the second half (copies) ends up exactly where the first started. */
@keyframes ga-marquee {
	to {
		transform: translateX(calc(-50% - var(--space-24) / 2));
	}
}

.ga-marquee-viewport:hover figure.wp-block-gallery.ga-marquee {
	animation-play-state: paused;
}

figure.wp-block-gallery.ga-marquee > figure.wp-block-image {
	display: grid !important;
	flex: 0 0 240px !important;
	place-items: center;
	box-sizing: border-box;
	width: 240px !important;
	height: 120px;
	margin: 0 !important;
	padding: var(--space-24);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.06);
}

/* Same area for all: equivalent square side (--ga-logo-side) × √ratio.
   A square measures side × side; one 4 times wider, 2·side × side/2. The ratio
   (--ga-logo-r) is set by inc/patterns.php. Without it, natural size inside the box.
   Density (--ga-logo-ink): a thin-stroke logo grows and a solid one shrinks a bit
   (factor --ga-logo-k, between 0.85 and 1.3). Never exceeds the card's free space
   (--ga-logo-max-w × --ga-logo-max-h) and always keeps its aspect ratio. */
figure.wp-block-gallery.ga-marquee {
	--ga-logo-side: 62px;
	--ga-logo-max-w: 192px;
	--ga-logo-max-h: 72px;
}

figure.wp-block-gallery.ga-marquee > figure.wp-block-image img {
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: 72px;
	object-fit: contain;
}

figure.wp-block-gallery.ga-marquee > figure.wp-block-image img[style*="--ga-logo-r"] {
	--ga-logo-k: clamp(0.85, sqrt(0.45 / var(--ga-logo-ink, 0.45)), 1.3);

	width: min(calc(var(--ga-logo-side) * sqrt(var(--ga-logo-r)) * var(--ga-logo-k)), var(--ga-logo-max-w), calc(var(--ga-logo-max-h) * var(--ga-logo-r))) !important;
	max-width: none;
	height: min(calc(var(--ga-logo-side) / sqrt(var(--ga-logo-r)) * var(--ga-logo-k)), var(--ga-logo-max-h), calc(var(--ga-logo-max-w) / var(--ga-logo-r))) !important;
	max-height: none;
}

@media (prefers-reduced-motion: reduce) {
	figure.wp-block-gallery.ga-marquee.is-ready {
		animation: none;
	}

	.ga-marquee-viewport {
		overflow-x: auto;
	}
}

@media (max-width: 767px) {
	.ga-clients {
		gap: var(--space-40);
	}

	.ga-marquee-viewport {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
	}

	figure.wp-block-gallery.ga-marquee > figure.wp-block-image {
		flex-basis: 180px !important;
		width: 180px !important;
		height: 96px;
		padding: var(--space-20);
	}

	figure.wp-block-gallery.ga-marquee {
		--ga-logo-side: 47px;
		--ga-logo-max-w: 140px;
		--ga-logo-max-h: 56px;
	}

	figure.wp-block-gallery.ga-marquee > figure.wp-block-image img {
		max-height: 56px;
	}
}

/* ----- Carousel of cards built from blocks (Group .ga-carousel > .ga-carousel__item) ----- */

.wp-block-group.ga-carousel > .wp-block-group__inner-container {
	display: contents;
}

.ga-carousel .ga-carousel__item {
	flex: 0 0 calc((100% - 2 * var(--space-32)) / 3);
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

/* With few cards, centered (same as the experience gallery). */
.ga-carousel .ga-carousel__item:first-child {
	margin-left: auto;
}

.ga-carousel .ga-carousel__item:last-child {
	margin-right: auto;
}

@media (max-width: 1199px) {
	.ga-carousel .ga-carousel__item {
		flex-basis: calc((100% - var(--space-20)) / 2);
	}
}

@media (max-width: 767px) {
	.ga-carousel .ga-carousel__item {
		flex-basis: 86%;
	}
}

/* ==========================================================
   Home — Testimonials
   ========================================================== */

.ga-testimonials {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--layout-section-gap);
	overflow: hidden;
	padding: var(--layout-section-padding) var(--layout-margin);
	background: var(--surface-brand);
}

.ga-testimonials > .wp-block-group__inner-container {
	display: contents;
}

/* Gold lines at the top left and right. */
.ga-testimonials::before,
.ga-testimonials::after {
	content: "";
	position: absolute;
	top: -29px;
	width: 640px;
	height: 480px;
	background: center / contain no-repeat;
	pointer-events: none;
}

.ga-testimonials::before {
	left: -200px;
	background-image: url("../img/testimonials-deco-left.svg");
}

.ga-testimonials::after {
	right: -200px;
	background-image: url("../img/testimonials-deco-right.svg");
}

.ga-testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	box-sizing: border-box;
	min-height: 592px;
	padding: var(--space-40);
	border: 1px solid var(--border-inverse-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-brand-strong);
}

.ga-testimonial .wp-block-group__inner-container {
	display: contents;
}

.ga-testimonial :is(p, figure) {
	margin: 0;
}

/* 5 stars drawn with the icon; the text is kept for screen readers. */
.ga-testimonial__rating {
	align-self: center;
	width: calc(5 * 24px + 4 * var(--space-4));
	height: 24px;
	overflow: hidden;
	background: url("../icons/star-gold.svg") 0 0 / calc(24px + var(--space-4)) 24px repeat-x;
	color: transparent;
	font-size: 0;
}

.ga-testimonial__quote {
	flex: 1;
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	line-height: var(--font-line-height-body-md);
}

.ga-testimonial__author {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	padding-top: var(--space-24);
	border-top: 1px solid var(--border-inverse-subtle);
}

.ga-testimonial__avatar {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	box-sizing: border-box;
	width: 64px;
	height: 64px;
	padding: 3px;
	overflow: hidden;
	border: 2px solid var(--border-highlight);
	border-radius: var(--radius-full);
	background: var(--surface-brand);
}

/* Current avatars are logos (no built-in margins): contain with breathing room so the
   corners don't touch the circle. For photos of people, the image fills the circle anyway. */
.ga-testimonial__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 11px;
	box-sizing: border-box;
	border-radius: var(--radius-full);
	object-fit: contain;
}

.ga-testimonial__who {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.ga-testimonial__name {
	color: var(--text-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h5);
	font-weight: var(--font-weight-semibold);
	line-height: var(--font-line-height-heading-h5);
}

.ga-testimonial__role {
	color: var(--text-accent-inverse);
	font-family: var(--font-family-label);
	font-size: var(--font-size-label-md);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-label-md);
}

/* Arrows: centered on the card (cards + 64px margin + 10px dots). */
.ga-testimonials .ga-carousel-wrap .ga-carousel-controls {
	margin-top: var(--space-64);
}

@media (max-width: 1199px) {
	.ga-testimonials::before,
	.ga-testimonials::after {
		width: 420px;
		height: 315px;
	}
}

/* "Leer más" (testimonials.js): mobile only, and only if the text is truncated. */
.ga-testimonial__more,
.ga-testimonial__more:hover,
.ga-testimonial__more:focus {
	align-self: flex-start;
	margin: calc(-1 * var(--space-12)) 0 0;
	padding: var(--space-4) 0;
	border: 0;
	background: none;
	color: var(--text-accent-inverse);
	font-family: var(--font-family-body);
	font-size: var(--font-size-button-md);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-button-md);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
}

.ga-testimonial__more:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ga-testimonial__more:focus-visible {
	outline: 3px solid var(--border-focus);
	outline-offset: 2px;
}

.ga-testimonial__more[hidden] {
	display: none;
}

@media (max-width: 767px) {
	.ga-testimonial {
		min-height: 0;
		padding: var(--space-32) var(--space-24);
	}

	.ga-testimonial__quote.is-clamped {
		flex: 0 0 auto;
	}

	.ga-testimonial__quote.is-clamped:not(.is-expanded) {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 6;
		line-clamp: 6;
	}

	/* Author always at the bottom, with or without the button. */
	.ga-testimonial__author {
		margin-top: auto;
	}

	.ga-testimonials::before,
	.ga-testimonials::after {
		display: none;
	}
}

/* ==========================================================
   Home — Clients and testimonials on white background (home-prueba-social pattern)
   Reuses the marquee (.ga-marquee) and the testimonial cards (.ga-testimonial).
   ========================================================== */

.ga-social-proof {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
	padding: var(--space-96) var(--layout-margin);
	background: var(--surface-default);
}

.ga-social-proof > .wp-block-group__inner-container {
	display: contents;
}

.ga-social-proof__clients {
	max-width: 918px;
}

/* The marquee spans the screen edge to edge. */
.ga-social-proof > .ga-marquee-viewport,
.ga-social-proof > .wp-block-group__inner-container > .ga-marquee-viewport {
	margin-inline: calc(-1 * var(--layout-margin));
}

.ga-social-proof figure.wp-block-gallery.ga-marquee > figure.wp-block-image {
	border: 0;
	background: var(--surface-brand);
}

/* Testimonials: 2 cards of 640px in view, light colors. */
.ga-social-proof .ga-carousel .ga-carousel__item {
	flex-basis: calc((100% - var(--space-32)) / 2);
}

.ga-social-proof .ga-testimonial {
	min-height: 444px;
	border-color: var(--border-subtle);
	background: var(--surface-subtle);
}

.ga-social-proof .ga-testimonial__quote {
	color: var(--text-secondary);
}

.ga-social-proof .ga-testimonial__author {
	border-top-color: var(--border-subtle);
}

.ga-social-proof .ga-testimonial__name {
	color: var(--text-primary);
}

.ga-social-proof :is(.ga-testimonial__role, .ga-testimonial__more) {
	color: var(--text-accent);
}

.ga-social-proof .ga-carousel-arrow,
.ga-social-proof .ga-carousel-arrow:focus {
	border-color: var(--border-default);
	background: transparent;
	color: var(--text-primary);
}

.ga-social-proof .ga-carousel-arrow:hover {
	border-color: var(--border-accent);
	background: var(--action-secondary-bg-hover);
	color: var(--text-accent);
}

.ga-social-proof .ga-carousel-dot,
.ga-social-proof .ga-carousel-dot:hover,
.ga-social-proof .ga-carousel-dot:focus {
	background-color: var(--border-default);
}

@media (max-width: 1199px) {
	.ga-social-proof {
		padding-block: var(--space-80);
	}
}

@media (max-width: 767px) {
	.ga-social-proof {
		gap: var(--space-40);
		padding-block: var(--space-64);
	}

	.ga-social-proof .ga-carousel .ga-carousel__item {
		flex-basis: 86%;
	}

	.ga-social-proof .ga-testimonial {
		min-height: 0;
	}
}

/* ==========================================================
   Home — Próximos eventos (Upcoming events; home-eventos pattern: section + [ga_eventos] + "Próximamente")
   "Próximos eventos" block → parts/events.php + events.js
   ========================================================== */

.ga-events-block {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding: var(--space-96) var(--layout-margin);
	background: var(--surface-brand-strong);
}

.ga-events-block > .wp-block-group__inner-container {
	display: contents;
}

/* Also through the inner container WordPress adds in classic themes (display: contents). */
.ga-events-block > :is(.ga-events-section, .ga-upcoming),
.ga-events-block > .wp-block-group__inner-container > :is(.ga-events-section, .ga-upcoming) {
	width: 100%;
	max-width: var(--layout-container);
	margin-inline: auto;
}

.ga-events-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
}

.ga-events-section :is(p, h2, h3, dl, dd) {
	margin: 0;
}

/* Featured (902 of 1312) + list as tall as the featured card. */
.ga-events {
	display: grid;
	grid-template-columns: minmax(0, 902fr) minmax(0, 386fr);
	gap: var(--space-24);
}

/* Cards stacked in the same cell: the active one appears with a 250ms fade. */
.ga-events__stage {
	position: relative;
	display: grid;
}

.ga-event-featured {
	position: relative;
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: var(--space-20);
	min-height: 691px;
	box-sizing: border-box;
	padding: var(--space-40);
	overflow: hidden;
	border: 1px solid var(--border-inverse);
	border-radius: var(--radius-xl);
	background: var(--surface-brand-elevated);
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.ga-events.is-ready .ga-event-featured:not(.is-active) {
	opacity: 0;
	visibility: hidden;
}

.ga-events.is-ready .ga-event-featured.is-active {
	transition: opacity 0.25s ease;
}

.ga-event-featured > * {
	position: relative;
	z-index: 1;
}

.ga-event-featured > .ga-event-featured__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overlay: darkens bottom and left, where the text goes. */
.ga-event-featured::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(180deg, rgba(28, 23, 58, 0) 55%, rgba(28, 23, 58, 0.85) 100%),
		linear-gradient(90deg, rgba(28, 23, 58, 0.98) 0%, rgba(28, 23, 58, 0.92) 50%, rgba(28, 23, 58, 0.6) 75%, rgba(28, 23, 58, 0.2) 100%);
	pointer-events: none;
}

.ga-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-12);
	border-radius: var(--radius-full);
	background: var(--surface-accent);
	color: var(--text-on-accent);
	font-family: var(--font-family-label);
	font-size: var(--font-size-label-md);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-label-md);
}

.ga-event-featured__title {
	max-width: 560px;
	color: var(--text-inverse);
	font-family: var(--font-family-display);
	font-size: var(--font-size-display-sm);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-display-sm);
	text-transform: uppercase;
}

.ga-event-featured__text {
	max-width: 560px;
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-lg);
	line-height: var(--font-line-height-body-lg);
}

.ga-event-featured__details {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
	padding-top: var(--space-16);
}

/* Date and time in one row; the venue below. */
.ga-event-meta {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: var(--space-20) var(--space-40);
}

.ga-event-meta__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.ga-event-meta__item--lugar {
	grid-column: 1;
}

.ga-event-meta dt {
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-label);
	font-size: var(--font-size-label-eyebrow);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-label-eyebrow);
	letter-spacing: var(--font-letter-spacing-label-eyebrow);
	text-transform: uppercase;
}

.ga-event-meta dd {
	color: var(--text-inverse);
	font-family: var(--font-family-body);
	font-size: var(--font-size-heading-h6);
	font-weight: var(--font-weight-semibold);
	line-height: var(--font-line-height-heading-h6);
}

.ga-event-featured__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	width: 422px;
	max-width: 100%;
}

.ga-event-featured__actions .btn {
	width: 100%;
}

/* ----- List (tabs) ----- */

/* The list fills the featured card's height without stretching it: 3 events visible, the rest scroll.
   Without overscroll-behavior: contain, so once the list reaches its end the page keeps scrolling. */
.ga-events__aside {
	position: relative;
	min-height: 0;
}

.ga-events__list {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	overflow-y: auto;
	scrollbar-width: none;
}

.ga-events__list::-webkit-scrollbar {
	display: none;
}

.ga-event-card,
.ga-event-card:hover,
.ga-event-card:focus {
	display: flex;
	flex: 1 0 calc((100% - 2 * var(--space-24)) / 3);
	align-items: center;
	gap: var(--space-16);
	width: 100%;
	box-sizing: border-box;
	padding: 20px var(--space-24);
	border: 1px solid var(--border-inverse);
	border-radius: var(--radius-lg);
	background: var(--surface-brand-elevated);
	color: var(--text-inverse);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.ga-event-card:hover {
	border-color: rgba(255, 255, 255, 0.32);
}

.ga-event-card[aria-selected="true"] {
	border-color: var(--border-accent);
}

.ga-event-card:focus-visible {
	outline: 3px solid var(--border-focus);
	outline-offset: 2px;
}

.ga-event-card > span {
	display: flex;
}

.ga-event-card__date {
	flex-direction: column;
	flex-shrink: 0;
	align-items: center;
	white-space: nowrap;
}

.ga-event-card__day {
	background: var(--gradient-gold-metallic);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h2);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-heading-h2);
}

.ga-event-card__month {
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-label);
	font-size: var(--font-size-label-eyebrow);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-label-eyebrow);
	letter-spacing: var(--font-letter-spacing-label-eyebrow);
	text-transform: uppercase;
}

.ga-event-card__info {
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.ga-event-card__info > span {
	display: block;
}

.ga-event-card__type,
.ga-event-card__weekday {
	font-family: var(--font-family-label);
	font-size: var(--font-size-label-md);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-label-md);
}

.ga-event-card__type {
	margin-bottom: 6px;
	color: var(--text-accent-inverse);
}

.ga-event-card__weekday {
	margin: 6px 0 var(--space-4);
	color: rgba(255, 255, 255, 0.6);
}

.ga-event-card__place,
.ga-event-card__hours {
	color: var(--text-inverse);
	font-family: var(--font-family-body);
	font-size: var(--font-size-heading-h6);
	font-weight: var(--font-weight-semibold);
	line-height: var(--font-line-height-heading-h6);
}

.ga-event-card__arrow {
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.04);
	color: var(--icon-inverse);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ga-event-card[aria-selected="true"] .ga-event-card__arrow {
	border-color: var(--color-gold-500);
	background: var(--color-gold-500);
}

/* ----- "Próximamente": the virtual course ----- */

.ga-upcoming {
	display: flex;
	align-items: center;
	gap: var(--space-24);
	box-sizing: border-box;
	padding: var(--space-24) var(--space-32);
	border: 1px solid var(--border-inverse);
	border-radius: var(--radius-lg);
	background: var(--surface-brand-elevated);
}

.ga-upcoming > .wp-block-group__inner-container,
.ga-upcoming__text > .wp-block-group__inner-container {
	display: contents;
}

.ga-upcoming :is(p, .wp-block-buttons) {
	margin: 0;
}

/* Course icon in a glass circle (72px), like in the service cards. */
.ga-upcoming::before {
	content: "";
	flex-shrink: 0;
	box-sizing: border-box;
	width: 72px;
	height: 72px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-full);
	background: url("../icons/service-lineal-course.svg") center / 30px 23.52px no-repeat, rgba(255, 255, 255, 0.06);
	transform: rotate(180deg);
}

.ga-upcoming__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.ga-upcoming__title {
	color: var(--text-inverse);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-lg);
	font-weight: var(--font-weight-semibold);
	line-height: var(--font-line-height-body-lg);
}

.ga-upcoming .wp-block-button[class*="is-style-ga-"] > .wp-block-button__link {
	--btn-icon: 16px;

	min-height: 45px;
	padding: calc(var(--space-12) - var(--border-width-2)) calc(var(--space-24) - var(--border-width-2));
	font-size: var(--font-size-button-md);
	line-height: var(--font-line-height-button-md);
	letter-spacing: var(--font-letter-spacing-button-md);
}

/* Tablet: the list moves below, in 3 columns. */
@media (max-width: 1199px) {
	.ga-events-block {
		padding-block: var(--space-80);
	}

	.ga-events {
		grid-template-columns: minmax(0, 1fr);
	}

	.ga-event-featured {
		min-height: 600px;
	}

	.ga-events__list {
		position: static;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-16);
		overflow: visible;
	}

	.ga-event-card,
	.ga-event-card:hover,
	.ga-event-card:focus {
		padding: var(--space-16);
	}

	.ga-event-card__arrow {
		display: none !important;
	}
}

/* Mobile: text below the photo; stacked list (3 visible, the rest scroll). */
@media (max-width: 767px) {
	.ga-events-block {
		padding-block: var(--space-64);
	}

	.ga-events-section {
		gap: var(--space-40);
	}

	.ga-event-featured {
		justify-content: flex-start;
		min-height: 0;
		padding: 0 0 var(--space-32);
	}

	.ga-event-featured > .ga-event-featured__image {
		position: relative;
		inset: auto;
		height: 240px;
		margin-bottom: var(--space-4);
	}

	.ga-event-featured::after {
		inset: 0 0 auto;
		height: 240px;
		background: linear-gradient(180deg, rgba(28, 23, 58, 0) 50%, rgba(42, 37, 70, 0.9) 100%);
	}

	.ga-event-featured > :not(.ga-event-featured__image) {
		margin-inline: var(--space-24);
	}

	.ga-event-featured__title {
		font-size: var(--font-size-heading-h3);
		line-height: var(--font-line-height-heading-h3);
	}

	.ga-event-featured__text {
		font-size: var(--font-size-body-md);
		line-height: var(--font-line-height-body-md);
	}

	.ga-event-featured__details,
	.ga-event-featured__actions {
		align-self: stretch;
		width: auto;
	}

	.ga-event-meta {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-16);
	}

	.ga-event-featured__actions .btn {
		--btn-icon: 16px;

		white-space: normal;
		text-align: center;

		padding: calc(var(--space-12) - var(--border-width-2)) calc(var(--space-16) - var(--border-width-2));
		font-size: var(--font-size-button-md);
		line-height: var(--font-line-height-button-md);
	}

	.ga-events__list {
		display: flex;
		flex-direction: column;
		gap: var(--space-12);
		overflow-y: auto;
	}

	.ga-event-card,
	.ga-event-card:hover,
	.ga-event-card:focus {
		flex: 0 0 auto;
		padding: var(--space-16) var(--space-20);
	}

	.ga-event-card__arrow {
		display: flex !important;
		width: 40px;
		height: 40px;
	}

	.ga-upcoming {
		flex-wrap: wrap;
		gap: var(--space-16);
		padding: var(--space-24);
	}

	.ga-upcoming::before {
		width: 56px;
		height: 56px;
		background-size: 24px 18.8px, auto;
	}

	.ga-upcoming__title {
		font-size: var(--font-size-body-md);
		line-height: var(--font-line-height-body-md);
	}

	.ga-upcoming > .wp-block-group__inner-container > .wp-block-buttons,
	.ga-upcoming > .wp-block-buttons {
		flex: 1 1 100%;
	}
}

/* Mobile accordion (events.js, .is-accordion): each event's details open right below its
   card and join it as one block; the card's arrow turns down while it is open. */
@media (max-width: 767px) {
	.ga-events.is-accordion .ga-events__stage {
		display: none;
	}

	.ga-events.is-accordion .ga-events__list {
		max-height: none;
		overflow: visible;
	}

	.ga-events.is-accordion .ga-event-card[aria-expanded="true"] {
		border-color: var(--border-accent);
		border-bottom-color: transparent;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	}

	.ga-events.is-accordion .ga-event-card__arrow svg {
		transition: transform 0.2s ease;
	}

	.ga-events.is-accordion .ga-event-card[aria-expanded="true"] .ga-event-card__arrow {
		border-color: var(--color-gold-500);
		background: var(--color-gold-500);
	}

	.ga-events.is-accordion .ga-event-card[aria-expanded="true"] .ga-event-card__arrow svg {
		transform: rotate(90deg);
	}

	/* The details: photo, title, text and buttons (type, date, time and place are already
	   on the card). Glued to the card: no gap, no top border. */
	.ga-events.is-accordion .ga-event-featured {
		margin-top: calc(-1 * var(--space-12));
		border-color: var(--border-accent);
		border-top: 0;
		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
		opacity: 1;
		visibility: visible;
	}

	.ga-events.is-accordion .ga-event-featured[hidden] {
		display: none;
	}

	.ga-events.is-accordion .ga-event-featured > .ga-event-featured__image {
		height: 200px;
	}

	.ga-events.is-accordion .ga-event-featured::after {
		height: 200px;
	}

	.ga-events.is-accordion .ga-event-featured :is(.ga-badge, .ga-event-meta) {
		display: none;
	}

	.ga-events.is-accordion .ga-event-featured__title {
		font-size: var(--font-size-heading-h4);
		line-height: var(--font-line-height-heading-h4);
	}

	.ga-events.is-accordion .ga-event-featured__details {
		padding-top: 0;
	}

	@media (prefers-reduced-motion: reduce) {
		.ga-events.is-accordion .ga-event-card__arrow svg {
			transition: none;
		}
	}
}

/* ==========================================================
   Contacto — Conference request (Cover + [ga_contacto])
   ========================================================== */

.wp-block-cover.ga-contact {
	min-height: 0;
	padding: var(--layout-section-padding) var(--layout-margin);
	background: var(--surface-brand);
}

/* The background photo is at 30%. */
.ga-contact .wp-block-cover__image-background {
	opacity: 0.3;
}

.ga-contact .wp-block-cover__inner-container {
	display: flex;
	align-items: center;
	gap: var(--space-96);
	width: 100%;
	max-width: var(--layout-container);
	margin-inline: auto;
}

.ga-contact .wp-block-cover__inner-container > .wp-block-group__inner-container,
.ga-contact .ga-contact__intro .wp-block-group__inner-container {
	display: contents;
}

.ga-contact :is(p, h2) {
	margin: 0;
}

.ga-contact__intro {
	display: flex;
	flex: 0 0 520px;
	flex-direction: column;
	gap: var(--space-24);
}

.ga-contact__title {
	color: var(--text-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h2);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-heading-h2);
}

/* 96 × 3 gold divider below the title. */
.ga-contact__title::after {
	content: "";
	display: block;
	width: 96px;
	height: 3px;
	margin-top: var(--space-24);
	border-radius: 2px;
	background: var(--gradient-gold-metallic);
}

.ga-contact__text {
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-lg);
	line-height: var(--font-line-height-body-lg);
}

/* Glass card. */
.ga-contact-form {
	flex: 1;
	min-width: 0;
	padding: var(--space-48);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-xl);
	background: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	scroll-margin-top: 160px;
}

.ga-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.ga-form__row {
	display: flex;
	gap: var(--space-24);
}

.ga-form__row > .ga-form__field {
	flex: 1 1 0;
	min-width: 0;
}

.ga-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.ga-form__field > label:not(.ga-option) {
	color: var(--text-inverse);
	font-family: var(--font-family-body);
	font-size: 18px;
	font-weight: var(--font-weight-semibold);
	line-height: 25px;
}

/* Field (dark theme): indigo background, 16% white border, gold focus. */
.ga-contact .ga-input,
.ga-contact .ga-input:focus {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: var(--space-12) var(--space-16);
	border: var(--border-width-1) solid var(--border-inverse);
	border-radius: var(--radius-md);
	background: var(--surface-brand-strong);
	color: var(--text-inverse);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	line-height: var(--font-line-height-body-md);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ga-contact .ga-input::placeholder {
	color: var(--text-inverse-secondary);
	opacity: 1;
}

.ga-contact .ga-input:hover {
	border-color: rgba(255, 255, 255, 0.32);
}

/* 2px border without shifting content: 1px border + 1px shadow. */
.ga-contact .ga-input:focus-visible {
	border-color: var(--border-accent);
	box-shadow: 0 0 0 1px var(--border-accent);
	outline: none;
}

.ga-contact .ga-input[aria-invalid="true"] {
	border-color: var(--color-red-400);
	box-shadow: 0 0 0 1px var(--color-red-400);
}


.ga-form__error,
.ga-form__message {
	margin: 0;
	color: var(--color-red-300);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-sm);
	line-height: var(--font-line-height-body-sm);
}

.ga-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ga-form__actions {
	padding-top: var(--space-8);
}

.ga-form__submit {
	width: 100%;
}

.ga-form__submit:disabled {
	cursor: progress;
}

.ga-contact-form__done {
	margin: 0;
	color: var(--text-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h4);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-heading-h4);
	text-align: center;
}

@media (max-width: 1199px) {
	.ga-contact .wp-block-cover__inner-container {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-48);
	}

	.ga-contact__intro {
		flex-basis: auto;
		max-width: 520px;
	}
}

@media (max-width: 767px) {
	.ga-contact-form {
		padding: var(--space-24);
		border-radius: var(--radius-lg);
	}

	.ga-form__row {
		flex-direction: column;
	}
}

/* ==========================================================
   Inner pages — Hero ("Página — Hero" pattern, Cover block .ga-page-hero)
   The header stays transparent on top (ga_has_page_hero in inc/template-tags.php).
   ========================================================== */

.wp-block-cover.ga-page-hero {
	justify-content: flex-start;
	min-height: 730px;
	padding: 133px var(--layout-margin) 0; /* same margin as the header: text aligned with the logo */
	overflow: hidden;
	background: var(--surface-brand-strong);
}

/* Gold lines at the bottom left (Decor / Gold lines). */
.wp-block-cover.ga-page-hero::after {
	content: "";
	position: absolute;
	bottom: -115px;
	left: -220px;
	z-index: 2;
	width: 640px;
	height: 480px;
	background: url("../img/testimonials-deco-right.svg") center / contain no-repeat;
	pointer-events: none;
}

.ga-page-hero .wp-block-cover__inner-container {
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
	width: 840px;
	max-width: 100%;
	margin: 0;
	color: var(--text-inverse);
}

.ga-page-hero :is(.ga-page-hero__breadcrumb, .ga-page-hero__title, .ga-page-hero__text) {
	margin: 0;
}

.ga-page-hero__breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.ga-page-hero__breadcrumb a:hover,
.ga-page-hero__breadcrumb a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ga-page-hero__title {
	color: var(--text-inverse);
	font-family: var(--font-family-display);
	font-size: var(--font-size-display-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-display-lg);
	text-shadow: 0 4px 32px rgba(28, 23, 58, 0.85);
	text-transform: uppercase;
}

.ga-page-hero__text {
	max-width: 560px;
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-lg);
	line-height: var(--font-line-height-body-lg);
}

/* "Stretched photo" variant (ga-page-hero--stretch class on the Cover): as in the Figma for
   Quiénes somos, the full photo is stretched to fill the banner (distorted horizontally).
   On mobile it goes back to normal cropping, since there the distortion would be reversed and very noticeable. */
.ga-page-hero--stretch .wp-block-cover__image-background {
	object-fit: fill !important;
}

@media (max-width: 1199px) {
	.wp-block-cover.ga-page-hero {
		min-height: 600px;
		padding-top: calc(144px + var(--space-40));
		padding-bottom: var(--space-64);
	}

	.wp-block-cover.ga-page-hero::after {
		bottom: -80px;
		left: -160px;
		width: 420px;
		height: 315px;
	}
}

@media (max-width: 767px) {
	.wp-block-cover.ga-page-hero {
		min-height: 520px;
		padding-top: calc(115px + var(--space-40));
		padding-bottom: var(--space-48);
	}

	.ga-page-hero .wp-block-cover__inner-container {
		gap: var(--space-20);
	}

	.wp-block-cover.ga-page-hero::after {
		bottom: -60px;
		left: -140px;
		width: 300px;
		height: 225px;
	}

	.ga-page-hero--stretch .wp-block-cover__image-background {
		object-fit: cover !important;
		object-position: 62% 25% !important;
	}
}

/* ==========================================================
   Contáctanos (Contact us) — Info and form (contacto-principal pattern)
   Column: title, [ga_contacto_canales], [ga_redes]. Form: [ga_contacto formulario="completo"].
   ========================================================== */

.ga-contact-page {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--space-96);
	padding: var(--space-96) var(--layout-inline);
	overflow: hidden;
	background: var(--surface-default);
}

.ga-contact-page > .wp-block-group__inner-container {
	display: contents;
}

/* Gold lines on the left, behind the column. */
.ga-contact-page::before {
	content: "";
	position: absolute;
	top: 600px;
	left: -220px;
	width: 640px;
	height: 480px;
	background: url("../img/testimonials-deco-left.svg") center / contain no-repeat;
	pointer-events: none;
}

.ga-contact-page__info {
	position: relative;
	display: flex;
	flex: 0 0 520px;
	flex-direction: column;
	gap: var(--space-40);
	min-width: 0;
}

.ga-contact-page__info > .wp-block-group__inner-container,
.ga-contact-page__header > .wp-block-group__inner-container {
	display: contents;
}

.ga-contact-page__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.ga-contact-page :is(.ga-eyebrow, .ga-contact-page__title) {
	margin: 0;
}

.ga-contact-page .ga-eyebrow {
	color: var(--text-accent);
}

.ga-contact-page__title {
	color: var(--text-primary);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h2);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-heading-h2);
}

/* 96 × 3 gold divider below the title. */
.ga-contact-page__title::after {
	content: "";
	display: block;
	width: 96px;
	height: 3px;
	margin-top: var(--space-24);
	border-radius: 2px;
	background: var(--gradient-gold-metallic);
}

/* Contact Item: gold icon in a circle + label + value. */
.ga-channels {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ga-channel {
	display: inline-flex;
	align-items: center;
	gap: var(--space-20);
	color: inherit;
	text-decoration: none;
}

.ga-channel__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	border: 1px solid var(--border-accent);
	border-radius: var(--radius-full);
	background: var(--surface-accent-soft);
	color: var(--text-primary);
}

.ga-channel__icon svg {
	display: block;
}

.ga-channel__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.ga-channel__label {
	color: var(--text-accent);
	font-family: var(--font-family-label);
	font-size: var(--font-size-label-eyebrow);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-label-eyebrow);
	letter-spacing: var(--font-letter-spacing-label-eyebrow);
	text-transform: uppercase;
}

.ga-channel__value {
	overflow-wrap: break-word;
	color: var(--text-primary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-heading-h6);
	font-weight: var(--font-weight-semibold);
	line-height: 32px;
	transition: color 0.15s ease;
}

.ga-channel:hover .ga-channel__value,
.ga-channel:focus-visible .ga-channel__value {
	color: var(--text-accent);
}

.ga-channel:focus-visible {
	outline: 3px solid var(--border-focus);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

/* Social: divider on top (only if there are social links), logo on the left and icons on the right. */
.ga-socials {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding-top: var(--space-40);
	border-top: 1px solid var(--border-subtle);
}

.ga-socials__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	min-height: 60px;
}

.ga-socials__logo {
	display: block;
	flex-shrink: 0;
}

/* Elaine Miranda logo (Brand): the shape is a mask filled with the brand color. */
.ga-socials__logo--elaine {
	width: 129px;
	height: 44px;
	background: var(--text-brand);
	-webkit-mask: url("../img/logo-elaine-miranda-mask.png") center / contain no-repeat;
	mask: url("../img/logo-elaine-miranda-mask.png") center / contain no-repeat;
}

.ga-socials__logo--nadia {
	width: 82px;
	height: 60px;
	object-fit: contain;
}

/* Contáctanos: the logos are Image blocks (editable). Any logo fits in 130 × 60. */
.ga-socials > .wp-block-group__inner-container,
.ga-socials__row > .wp-block-group__inner-container {
	display: contents;
}

.ga-socials :is(p, figure.wp-block-image) {
	margin: 0;
}

figure.wp-block-image.ga-socials__logo img {
	display: block;
	width: auto;
	max-width: 130px;
	height: auto;
	max-height: 60px;
}

.ga-socials__links {
	display: flex;
	gap: 10px;
}

/* Social Button: 44px circle, gold hover. */
.ga-social {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-full);
	color: var(--text-primary);
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.ga-social:hover {
	border-color: var(--border-accent);
	background: var(--surface-accent-soft);
	color: var(--text-accent);
}

.ga-social:focus-visible {
	outline: 3px solid var(--border-focus);
	outline-offset: 2px;
}

/* 20px icon: the SVGs are drawn for 24px, so they are scaled (without changing their size). */
/* Flex (not grid): also centers SVGs larger than the box (Instagram is 24px). */
.ga-social__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.ga-social__icon svg {
	display: block;
	flex-shrink: 0;
	transform: scale(0.8333);
}

/* Facebook, LinkedIn and TikTok come vertically flipped from Figma (rotate 180° + mirror). */
.ga-social:is(.ga-social--facebook, .ga-social--linkedin, .ga-social--tiktok) .ga-social__icon svg {
	transform: scale(0.8333, -0.8333);
}

/* ----- Full form (light theme) ----- */

.ga-contact-form--full {
	flex: 1 1 696px;
	max-width: 696px;
	padding: var(--space-48);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	background: var(--surface-subtle);
}

.ga-contact-form--full .ga-form__field > label:not(.ga-option),
.ga-contact-form--full .ga-form__label {
	padding: 0;
	color: var(--text-primary);
	font-family: var(--font-family-body);
	font-size: 18px;
	font-weight: var(--font-weight-semibold);
	line-height: 25px;
}

.ga-contact-form--full .ga-input,
.ga-contact-form--full .ga-input:focus {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: var(--space-12) var(--space-16);
	border: var(--border-width-1) solid var(--border-strong);
	border-radius: var(--radius-md);
	background-color: var(--surface-default);
	color: var(--text-primary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	line-height: var(--font-line-height-body-md);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ga-contact-form--full .ga-input::placeholder {
	color: var(--text-secondary);
	opacity: 1;
}

.ga-contact-form--full .ga-input:hover {
	border-color: var(--border-brand);
}

/* 2px border without shifting content: 1px border + 1px shadow. */
.ga-contact-form--full .ga-input:focus-visible {
	border-color: var(--border-focus);
	box-shadow: 0 0 0 1px var(--border-focus);
	outline: none;
}

.ga-contact-form--full .ga-input[aria-invalid="true"] {
	border-color: var(--border-error);
	box-shadow: 0 0 0 1px var(--border-error);
}

.ga-contact-form--full .ga-select {
	padding-right: calc(var(--space-16) + 24px + var(--space-8));
	background: var(--surface-default) url("../icons/chevron-down.svg") right var(--space-16) center / 24px 24px no-repeat;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* Nothing selected: the "Selecciona una opción" text in gray, like a placeholder. */
.ga-contact-form--full .ga-select:has(option[value=""]:checked) {
	color: var(--text-secondary);
}

.ga-contact-form--full .ga-select option {
	color: var(--text-primary);
}

.ga-contact-form--full .ga-textarea {
	min-height: 120px;
	resize: vertical;
}

.ga-form__help {
	margin: 0;
	color: var(--text-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-caption);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-body-caption);
}

.ga-contact-form--full :is(.ga-form__error, .ga-form__message) {
	color: var(--border-error);
}

/* "¿Qué necesitas?": options as cards with a radio. */
.ga-form__options {
	gap: var(--space-12);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* The legend floats so the fieldset treats it as just another flex child (12px gap). */
.ga-form__options legend {
	float: left;
	width: 100%;
	margin: 0;
}

.ga-form__options legend + .ga-option {
	clear: both;
}

.ga-option {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	padding: var(--space-16) var(--space-20);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-default);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ga-option:hover {
	border-color: var(--border-strong);
}

/* Selected: 2px border (1px border + 1px shadow, without shifting content). */
.ga-option:has(input:checked) {
	border-color: var(--border-accent);
	background: var(--surface-accent-soft);
	box-shadow: inset 0 0 0 1px var(--border-accent);
}

.ga-option:has(input:focus-visible) {
	outline: 3px solid var(--border-focus);
	outline-offset: 2px;
}

.ga-option input {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin: 0;
	background: url("../icons/radio.svg") center / 22px 22px no-repeat;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.ga-option input:checked {
	background-image: url("../icons/radio-selected.svg");
}

.ga-option input:focus-visible {
	outline: none;
}

.ga-option__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ga-option__label {
	color: var(--text-primary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	font-weight: var(--font-weight-semibold);
	line-height: 28px;
}

.ga-option__description {
	color: var(--text-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-sm);
	line-height: var(--font-line-height-body-sm);
}

/* In this form the button is 56px tall (18px top and bottom, as in Figma). */
.ga-contact-form--full .ga-form__submit {
	padding-block: calc(18px - var(--border-width-2));
}

.ga-contact-form--full .ga-form__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
}

.ga-form__alt {
	margin: 0;
	color: var(--text-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-sm);
	line-height: var(--font-line-height-body-sm);
	text-align: center;
}

.ga-form__alt a {
	color: var(--text-accent);
	font-weight: var(--font-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ga-form__alt a:hover {
	color: var(--text-primary);
}

.ga-contact-form--full .ga-contact-form__done {
	color: var(--text-primary);
}

@media (max-width: 1199px) {
	.ga-contact-page {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-64);
		padding-block: var(--space-80);
	}

	.ga-contact-page__info {
		flex-basis: auto;
		max-width: 640px;
	}

	.ga-contact-form--full {
		flex-basis: auto;
		max-width: none;
	}

	.ga-contact-page::before {
		top: auto;
		bottom: -80px;
		left: -160px;
		width: 420px;
		height: 315px;
	}
}

@media (max-width: 767px) {
	.ga-contact-page {
		gap: var(--space-48);
		padding-block: var(--space-64);
	}

	/* Smaller icon so the email fits on one line at 350px. */
	.ga-channel {
		gap: var(--space-16);
	}

	.ga-channel__icon {
		width: 48px;
		height: 48px;
	}

	.ga-channel__value {
		font-size: var(--font-size-body-sm);
		line-height: var(--font-line-height-body-sm);
	}

	/* Logo and icons on the same row at 350px too. */
	.ga-socials__links {
		gap: var(--space-8);
	}

	.ga-contact-form--full {
		padding: var(--space-24);
		border-radius: var(--radius-lg);
	}

	.ga-option {
		padding: var(--space-12) var(--space-16);
	}
}

/* ----- Full form, wide layout (Home — Solicita una propuesta) ----- */

.ga-proposal {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
	padding: var(--space-96) var(--layout-margin);
	background: var(--surface-default);
}

.ga-proposal > .wp-block-group__inner-container {
	display: contents;
}

.ga-proposal__header {
	max-width: 918px;
}

.ga-contact-form--wide {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--layout-container);
	margin-inline: auto;
}

/* The three options in one row. */
.ga-contact-form--wide .ga-form__options {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-12) var(--space-16);
}

.ga-contact-form--wide .ga-form__options legend {
	grid-column: 1 / -1;
}

.ga-contact-form--wide .ga-form__actions {
	flex-direction: row;
	justify-content: space-between;
	padding-top: var(--space-8);
}

.ga-contact-form--wide .ga-form__alt {
	text-align: left;
}

.ga-contact-form--wide .ga-form__submit {
	width: auto;
}

@media (max-width: 1199px) {
	.ga-proposal {
		padding-block: var(--space-80);
	}

	.ga-contact-form--wide {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.ga-proposal {
		gap: var(--space-40);
		padding-block: var(--space-64);
	}

	.ga-contact-form--wide .ga-form__options {
		grid-template-columns: minmax(0, 1fr);
	}

	.ga-contact-form--wide .ga-form__actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.ga-contact-form--wide .ga-form__alt {
		text-align: center;
	}

	.ga-contact-form--wide .ga-form__submit {
		width: 100%;
	}
}

/* ==========================================================
   Section header — light variant (white backgrounds) with gold divider
   ========================================================== */

.ga-section-header--light .ga-eyebrow { color: var(--text-accent); }
.ga-section-header--light .ga-section-header__title { color: var(--text-primary); }
.ga-section-header--light .ga-section-header__text { color: var(--text-secondary); }

/* 96 × 3 gold divider centered below the title (16px above and below, like the gap). */
.ga-section-header__title--divider::after {
	content: "";
	display: block;
	width: 96px;
	height: 3px;
	margin: var(--space-16) auto 0;
	border-radius: 2px;
	background: var(--gradient-gold-metallic);
}

/* ==========================================================
   Nuestros servicios (Our services) — Comparison (servicios-comparacion pattern)
   ========================================================== */

.ga-services-compare {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
	padding: var(--space-96) var(--layout-margin);
	background: var(--surface-page);
}

.ga-services-compare > .wp-block-group__inner-container,
.ga-services-compare__grid > .wp-block-group__inner-container,
.ga-service-card > .wp-block-group__inner-container,
.ga-service-card__body > .wp-block-group__inner-container,
.ga-service-card__head > .wp-block-group__inner-container,
.ga-service-card__specs > .wp-block-group__inner-container,
.ga-spec > .wp-block-group__inner-container {
	display: contents;
}

.ga-services-compare__header {
	max-width: 918px;
}

.ga-services-compare__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-32);
	width: 100%;
	max-width: var(--layout-container);
	margin: 0 auto;
}

.ga-service-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--surface-brand);
}

/* Duotone photo: indigo 700 layer in "color" mode + indigo 950 at 35% in "multiply". */
figure.wp-block-image.ga-service-card__media {
	position: relative;
	isolation: isolate;
	flex-shrink: 0;
	height: 200px;
	margin: 0;
	overflow: hidden;
}

figure.wp-block-image.ga-service-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 100%;
}

.ga-service-card--taller figure.wp-block-image.ga-service-card__media img {
	object-position: 50% 50%;
}

/* Portrait photo: on mobile (normal cropping) the faces are framed. */
.ga-service-card--curso figure.wp-block-image.ga-service-card__media img {
	object-position: 50% 22%;
}

/* Stretched image (ga-media--stretch class on the Image block): as in Figma, the full
   photo is stretched to the box size. On mobile it goes back to normal cropping. */
figure.wp-block-image.ga-media--stretch img {
	object-fit: fill !important;
}

@media (max-width: 767px) {
	figure.wp-block-image.ga-media--stretch img {
		object-fit: cover !important;
	}
}

:is(figure.wp-block-image.ga-service-card__media, figure.wp-block-image.ga-duotone, .ga-cta--duotone)::before,
:is(figure.wp-block-image.ga-service-card__media, figure.wp-block-image.ga-duotone, .ga-cta--duotone)::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

:is(figure.wp-block-image.ga-service-card__media, figure.wp-block-image.ga-duotone, .ga-cta--duotone)::before {
	z-index: 1;
	background: var(--color-indigo-700);
	mix-blend-mode: color;
}

:is(figure.wp-block-image.ga-service-card__media, figure.wp-block-image.ga-duotone, .ga-cta--duotone)::after {
	z-index: 1;
	background: var(--color-indigo-950);
	mix-blend-mode: multiply;
	opacity: 0.35;
}

.ga-service-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-24);
	padding: var(--space-32);
}

.ga-service-card__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.ga-service-card :is(.ga-service-card__title, .ga-service-card__desc, .ga-spec__label, .ga-spec__value) {
	margin: 0;
}

/* Title with the service icon in a glass circle (72px; 30px icon). */
.ga-service-card__title {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	color: var(--text-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h3);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-heading-h3);
}

.ga-service-card__title::before {
	content: "";
	flex-shrink: 0;
	box-sizing: border-box;
	width: 72px;
	height: 72px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-full);
	background: var(--ga-service-icon) center / var(--ga-service-icon-size) no-repeat, rgba(255, 255, 255, 0.06);
	/* The glyphs come flipped from Figma (rotate 180° + mirror); the circle is symmetrical. */
	transform: scaleY(-1);
}

.ga-service-card--conferencia { --ga-service-icon: url("../icons/service-lineal-conference.svg"); --ga-service-icon-size: 30px 29.98px; }
.ga-service-card--taller { --ga-service-icon: url("../icons/service-lineal-workshop.svg"); --ga-service-icon-size: 30px 30px; }
.ga-service-card--curso { --ga-service-icon: url("../icons/service-lineal-course.svg"); --ga-service-icon-size: 30px 23.52px; }

.ga-service-card--curso .ga-service-card__title::before {
	transform: rotate(180deg);
}

/* 3 lines reserved so the data stays aligned across cards. */
.ga-service-card__desc {
	min-height: calc(3 * var(--font-line-height-body-md));
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	line-height: var(--font-line-height-body-md);
}

/* Data: 2 columns; the left one's top line spans the gap to join the row. */
.ga-service-card__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-24);
}

.ga-spec {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
	padding: var(--space-16) 0;
	border-top: 1px solid transparent;
}

.ga-spec::before {
	content: "";
	position: absolute;
	top: -1px;
	right: 0;
	left: 0;
	border-top: 1px solid var(--border-inverse-subtle);
}

.ga-spec:nth-child(odd):not(.ga-spec--wide)::before {
	right: calc(-1 * var(--space-24));
}

.ga-spec--wide {
	grid-column: 1 / -1;
	border-bottom: 1px solid var(--border-inverse-subtle);
}

.ga-spec__label {
	color: var(--text-accent-inverse);
	font-family: var(--font-family-label);
	font-size: var(--font-size-label-md);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-label-md);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.ga-spec__value {
	color: var(--text-inverse);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	font-weight: var(--font-weight-semibold);
	line-height: 28px;
}

/* Depth meter ([ga_profundidad]): 3 bars of 40 × 6. */
.ga-depth {
	display: flex;
	gap: 6px;
	padding: 6px 0 4px;
}

.ga-depth__bar {
	width: 40px;
	height: 6px;
	border-radius: 3px;
	background: var(--border-inverse-subtle);
}

.ga-depth__bar.is-on {
	background: var(--action-primary-bg);
}

/* 45px MD buttons spanning the card's full width. */
.ga-service-card__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin: 0;
}

.ga-service-card__actions > .wp-block-button {
	width: 100%;
	margin: 0;
}

/* Selector with [class*="is-style-ga-"] to beat the LG size of block buttons. */
.ga-service-card__actions > .wp-block-button[class*="is-style-ga-"] > .wp-block-button__link {
	--btn-icon: 16px;

	width: 100%;
	min-height: 45px;
	padding: calc(var(--space-12) - var(--border-width-2)) calc(var(--space-24) - var(--border-width-2));
	font-size: var(--font-size-button-md);
	line-height: var(--font-line-height-button-md);
	letter-spacing: var(--font-letter-spacing-button-md);
}

@media (max-width: 1199px) {
	.ga-services-compare {
		padding-block: var(--space-80);
	}

	/* One card per row: in 3 columns the data doesn't fit. */
	.ga-services-compare__grid {
		grid-template-columns: minmax(0, 560px);
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.ga-services-compare {
		gap: var(--space-40);
		padding-block: var(--space-64);
	}

	.ga-service-card__body {
		padding: var(--space-24);
	}

	.ga-service-card__desc {
		min-height: 0;
	}

	.ga-service-card__specs {
		column-gap: var(--space-16);
	}

	.ga-spec:nth-child(odd):not(.ga-spec--wide)::before {
		right: calc(-1 * var(--space-16));
	}

	.ga-spec__value {
		font-size: var(--font-size-body-sm);
		line-height: var(--font-line-height-body-sm);
	}

	.ga-service-card__title {
		font-size: var(--font-size-heading-h4);
		line-height: var(--font-line-height-heading-h4);
	}

	.ga-service-card__title::before {
		width: 60px;
		height: 60px;
	}
}

/* 3 columns: the cards share the grid rows (subgrid), so each block (head, each data row,
   depth, buttons) starts at the same height in all three, whatever the text wrapping.
   Rows: photo (empty without photos), head, 2 data rows, depth, buttons. */
@media (min-width: 1200px) {
	.ga-services-compare__grid {
		row-gap: 0;
	}

	.ga-service-card {
		display: grid;
		grid-row: span 6;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.ga-service-card__body {
		display: grid;
		grid-row: 2 / -1;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.ga-service-card__head {
		margin-bottom: var(--space-24);
	}

	.ga-service-card__desc {
		min-height: 0;
	}

	.ga-service-card__specs {
		grid-row: span 3;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.ga-service-card__actions {
		margin-top: var(--space-24);
	}
}

/* ----- Dark variant without photos (Home — Nuestros formatos) ----- */

.ga-services-compare--dark {
	position: relative;
	overflow: hidden;
	background: var(--surface-brand-strong);
}

/* Gold lines at the top right (behind the cards). */
.ga-services-compare--dark::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 640px;
	height: 480px;
	background: url("../img/formats-deco-lines.svg") center / contain no-repeat;
	pointer-events: none;
}

.ga-services-compare--dark > * {
	position: relative;
}

.ga-services-compare--dark .ga-service-card {
	box-sizing: border-box;
	border: 1px solid var(--border-inverse);
	background: var(--surface-brand-elevated);
}

@media (max-width: 767px) {
	.ga-services-compare--dark::before {
		width: 320px;
		height: 240px;
	}
}

/* ==========================================================
   Home — What participants will work on (home-participantes pattern)
   ========================================================== */

.ga-participants {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
	padding: var(--space-96) var(--layout-margin);
	background: var(--surface-default);
}

.ga-participants > .wp-block-group__inner-container,
.ga-participants__grid > .wp-block-group__inner-container,
.ga-participants__dynamic > .wp-block-group__inner-container,
.ga-participants__topics > .wp-block-group__inner-container,
.ga-topic > .wp-block-group__inner-container {
	display: contents;
}

/* Flexible dark card + 432px topics column. */
.ga-participants__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 432px;
	gap: var(--space-24);
	width: 100%;
	max-width: var(--layout-container);
	margin-inline: auto;
}

.ga-participants :is(h3, p, ul) {
	margin: 0;
}

.ga-participants__dynamic {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-24);
	box-sizing: border-box;
	padding: var(--space-48) var(--space-56);
	border-radius: var(--radius-xl);
	background: var(--surface-brand);
}

.ga-participants__dynamic > * {
	max-width: 640px;
}

.ga-participants__text {
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-lg);
	line-height: var(--font-line-height-body-lg);
}

/* 12px between paragraphs (block's 24px gap minus 12). */
.ga-participants__text + .ga-participants__text {
	margin-top: calc(var(--space-12) - var(--space-24));
}

.ga-participants__topics {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.ga-topic {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	box-sizing: border-box;
	padding: var(--space-40) var(--space-48);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl);
	background: var(--surface-subtle);
}

.ga-topic__title {
	color: var(--text-primary);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h3);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-heading-h3);
}

.ga-topic__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding: 0;
	list-style: none;
}

.ga-topic__list li {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	font-weight: var(--font-weight-semibold);
	line-height: 28px;
}

.ga-topic__list li::before {
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: var(--radius-full);
	background: var(--color-gold-300);
}

@media (max-width: 1199px) {
	.ga-participants {
		padding-block: var(--space-80);
	}

	.ga-participants__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ga-participants__topics {
		flex-direction: row;
	}

	.ga-topic {
		flex: 1;
	}
}

@media (max-width: 767px) {
	.ga-participants {
		gap: var(--space-40);
		padding-block: var(--space-64);
	}

	.ga-participants__dynamic {
		padding: var(--space-32) var(--space-24);
		border-radius: var(--radius-lg);
	}

	.ga-participants__text {
		font-size: var(--font-size-body-md);
		line-height: var(--font-line-height-body-md);
	}

	.ga-participants__topics {
		flex-direction: column;
		gap: var(--space-16);
	}

	.ga-topic {
		gap: var(--space-16);
		padding: var(--space-32) var(--space-24);
		border-radius: var(--radius-lg);
	}

	.ga-topic__title {
		font-size: var(--font-size-heading-h4);
		line-height: var(--font-line-height-heading-h4);
	}

	.ga-topic__list li {
		font-size: var(--font-size-body-sm);
		line-height: var(--font-line-height-body-sm);
	}
}

/* ==========================================================
   CTA — Request a proposal (cta-propuesta pattern): same structure as .ga-cta,
   with the duotone photo and the phrase in Montserrat.
   ========================================================== */

.wp-block-cover.ga-cta--duotone {
	isolation: isolate;
}

/* Layers: photo (0) → duotone (1) → block gradients (2) → content (3).
   !important: WordPress sets z-index 1 with a very specific :not(:has(...)) selector. */
.wp-block-cover.ga-cta--duotone > .wp-block-cover__background {
	z-index: 2 !important;
}

.wp-block-cover.ga-cta--duotone > .wp-block-cover__inner-container {
	z-index: 3 !important;
}

.ga-cta__lead--body {
	max-width: none;
	font-family: var(--font-family-body);
	font-size: 24px;
	font-weight: var(--font-weight-medium);
	line-height: 36px;
}

@media (max-width: 767px) {
	.ga-cta__lead--body {
		font-size: var(--font-size-body-lg);
		line-height: var(--font-line-height-body-lg);
	}
}

/* ==========================================================
   Section header — left-aligned variant (columns): gap 24 and aligned divider
   ========================================================== */

.ga-section-header--left {
	align-items: flex-start;
	gap: var(--space-24);
	max-width: none;
	margin-inline: 0;
	text-align: left;
}

.ga-section-header--left .ga-section-header__title--divider::after {
	margin: var(--space-24) 0 0;
}

/* ==========================================================
   Quiénes somos (About) — two-column sections (.ga-split): Esencia and Misión
   ========================================================== */

.ga-split {
	display: flex;
	align-items: center;
	gap: var(--space-96);
	padding: var(--space-96) var(--layout-inline);
	background: var(--surface-page);
}

.ga-split > .wp-block-group__inner-container,
.ga-split__content > .wp-block-group__inner-container,
.ga-mission__media > .wp-block-group__inner-container {
	display: contents;
}

.ga-split__content {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-24);
	min-width: 0;
}

/* Esencia: transparent cutout over the brand gradient, 5.8% below the edge. */
figure.wp-block-image.ga-essence__media {
	position: relative;
	flex: 0 0 560px;
	height: 640px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--gradient-brand-bg);
}

figure.wp-block-image.ga-essence__media img {
	position: absolute;
	top: 5.8%;
	left: 0;
	width: 100%;
	height: auto;
}

/* Highlight box: 2px metallic gold border (mask, like the inverse gold button). */
.ga-highlight {
	position: relative;
	margin: 0;
	padding: calc(var(--space-32) + var(--border-width-2)) calc(var(--space-40) + var(--border-width-2));
	border-radius: var(--radius-xl);
	color: var(--text-primary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-lg);
	font-weight: var(--font-weight-semibold);
	line-height: var(--font-line-height-body-lg);
}

.ga-highlight::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: var(--border-width-2);
	border-radius: inherit;
	background: var(--gradient-gold-metallic);
	-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);
	pointer-events: none;
}

/* Misión: large photo top left and a square one with a white frame bottom right. */
.ga-mission__media {
	position: relative;
	flex: 0 0 600px;
	height: 600px;
}

figure.wp-block-image.ga-mission__photo {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--surface-brand-soft);
}

figure.wp-block-image.ga-mission__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

figure.wp-block-image.ga-mission__photo--main {
	top: 0;
	left: 0;
	width: 440px;
	height: 520px;
}

figure.wp-block-image.ga-mission__photo--secondary {
	top: 320px;
	left: 320px;
	box-sizing: border-box;
	width: 280px;
	height: 280px;
	border: 8px solid var(--surface-page);
}

/* ==========================================================
   Quiénes somos (About) — Purpose (Cover block .ga-purpose)
   ========================================================== */

.wp-block-cover.ga-purpose {
	min-height: 0;
	padding: var(--space-96) var(--layout-margin);
	overflow: hidden;
	background: var(--surface-brand);
}

/* As in Figma, the (portrait) photo is stretched to the section's full width so the
   books are fully visible. On mobile it goes back to normal cropping. */
.wp-block-cover.ga-purpose .wp-block-cover__image-background {
	object-fit: fill !important;
}

@media (max-width: 767px) {
	.wp-block-cover.ga-purpose .wp-block-cover__image-background {
		object-fit: cover !important;
	}
}

/* Gold lines at the bottom on each side. */
.wp-block-cover.ga-purpose::before,
.wp-block-cover.ga-purpose::after {
	content: "";
	position: absolute;
	bottom: -120px;
	z-index: 2;
	width: 640px;
	height: 480px;
	background: center / contain no-repeat;
	pointer-events: none;
}

.wp-block-cover.ga-purpose::before {
	left: -220px;
	background-image: url("../img/experience-deco-left.svg");
}

.wp-block-cover.ga-purpose::after {
	right: -220px;
	background-image: url("../img/experience-deco-right.svg");
}

.ga-purpose .wp-block-cover__inner-container {
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-40);
	text-align: center;
}

.ga-purpose .wp-block-group__inner-container {
	display: contents;
}

.ga-purpose :is(.ga-purpose__eyebrow, .ga-purpose__quote, .ga-pillars, .ga-pillar) {
	margin: 0;
}

/* 48px gold quotation marks above the eyebrow (40px spacing, like the gap). */
.ga-purpose__eyebrow::before {
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto var(--space-40);
	background: url("../icons/quote.svg") center / 48px 48px no-repeat;
}

.ga-purpose__quote {
	max-width: 1040px;
	color: var(--text-inverse);
	font-family: var(--font-family-body);
	font-size: 30px;
	font-style: italic;
	font-weight: var(--font-weight-medium);
	line-height: 44px;
}

/* ALMA · MENTE · DINERO with gold diamonds between pillars. */
.ga-pillars {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-40);
	padding-top: var(--space-16);
}

.ga-pillar {
	display: flex;
	align-items: center;
	gap: var(--space-40);
	color: var(--text-inverse);
	font-family: var(--font-family-display);
	font-size: 48px;
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	letter-spacing: 0.4em;
	text-shadow: 0 4px 32px rgba(28, 23, 58, 0.85);
	text-transform: uppercase;
}

/* The 0.4em tracking also applies after the last letter: it's subtracted from the space to the diamond. */
.ga-pillar:not(:last-child) {
	gap: calc(var(--space-40) - 0.4em);
}

.ga-pillar:last-child {
	margin-right: -0.4em !important;
}

.ga-pillar:not(:last-child)::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background: url("../img/decor-diamond.svg") center / 16px 16px no-repeat;
}

/* ==========================================================
   Quiénes somos (About) — Benefits (numbered cards)
   ========================================================== */

.ga-benefits {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
	padding: var(--space-96) var(--layout-margin);
	background: linear-gradient(180deg, var(--color-indigo-900) 0%, var(--color-iris-700) 100%);
}

.ga-benefits > .wp-block-group__inner-container,
.ga-benefits__grid > .wp-block-group__inner-container,
.ga-benefit > .wp-block-group__inner-container {
	display: contents;
}

.ga-benefits__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--space-24);
	width: 100%;
	max-width: var(--layout-container);
	margin: 0 auto;
}

.ga-benefit {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	box-sizing: border-box;
	min-height: 345px;
	padding: var(--space-24);
	border: 1px solid var(--border-brand-elevated);
	border-radius: var(--radius-xl);
	background: var(--surface-brand-elevated);
}

.ga-benefit :is(.ga-benefit__number, .ga-benefit__title, .ga-benefit__text) {
	margin: 0;
}

.ga-benefit__number {
	align-self: flex-start;
	background: var(--gradient-gold-metallic);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: var(--font-family-display);
	font-size: var(--font-size-display-sm);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-display-sm);
	text-transform: uppercase;
}

/* 48 × 3 gold divider below the number. */
.ga-benefit__number::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: var(--space-16);
	border-radius: 2px;
	background: var(--gradient-gold-metallic);
}

.ga-benefit__title {
	color: var(--text-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h5);
	font-weight: var(--font-weight-semibold);
	line-height: var(--font-line-height-heading-h5);
}

.ga-benefit__text {
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	line-height: var(--font-line-height-body-md);
}

/* ==========================================================
   Quiénes somos (About) — The founders (profiles)
   ========================================================== */

.ga-founders {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
	padding: var(--space-96) var(--layout-margin);
	background: var(--surface-page);
}

.ga-founders > .wp-block-group__inner-container,
.ga-founders__grid > .wp-block-group__inner-container,
.ga-founder > .wp-block-group__inner-container,
.ga-founder__body > .wp-block-group__inner-container,
.ga-founder__footer > .wp-block-group__inner-container {
	display: contents;
}

.ga-founders__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-48);
	width: 100%;
	max-width: var(--layout-container);
	margin: 0 auto;
}

.ga-founder {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--border-brand-elevated);
	border-radius: var(--radius-xl);
	background: var(--surface-brand-elevated);
}

/* Cutout portrait (transparent PNG) over an 8% white veil. */
figure.wp-block-image.ga-founder__photo {
	position: relative;
	flex-shrink: 0;
	height: 560px;
	margin: 0;
	overflow: hidden;
	background: var(--color-alpha-white-8);
}

figure.wp-block-image.ga-founder__photo img {
	position: absolute;
	max-width: none;
	height: auto;
}

.ga-founder--elaine figure.wp-block-image.ga-founder__photo img { top: -9.52%; left: 9.26%; width: 81.47%; }
.ga-founder--nadia figure.wp-block-image.ga-founder__photo img { top: -6.64%; left: 13.55%; width: 72.9%; }

.ga-founder__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-16);
	padding: var(--space-40);
}

.ga-founder :is(.ga-founder__logo, .ga-founder__specialty, .ga-founder__name, .ga-founder__bio, .ga-founder__site) {
	margin: 0;
}

/* Logo in white (the text is kept for screen readers). 60px tall and 40px down to the
   specialty: in Figma there's an 8px spacer that adds its own 16px gap. */
.ga-founder__logo {
	flex-shrink: 0;
	height: 60px;
	margin-bottom: calc(var(--space-8) + var(--space-16)) !important;
	overflow: hidden;
	color: transparent;
	font-size: 0;
	background: center left / contain no-repeat;
}

.ga-founder--elaine .ga-founder__logo {
	width: 129px;
	background: none;
}

.ga-founder--elaine .ga-founder__logo::before {
	content: "";
	display: block;
	width: 129px;
	height: 44px;
	margin-top: 8px;
	background: var(--text-inverse);
	-webkit-mask: url("../img/logo-elaine-miranda-mask.png") center / contain no-repeat;
	mask: url("../img/logo-elaine-miranda-mask.png") center / contain no-repeat;
}

.ga-founder--nadia .ga-founder__logo {
	width: 82px;
	background-image: url("../img/logo-nadia-vado-white.webp");
}

.ga-founder__name {
	color: var(--text-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h3);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-heading-h3);
}

.ga-founder__bio {
	flex: 1;
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-lg);
	line-height: var(--font-line-height-body-lg);
}

.ga-founder__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	padding-top: calc(var(--space-16) + var(--space-8));
	border-top: 1px solid var(--border-inverse-subtle);
}

.ga-founder__site a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	color: var(--text-accent-inverse);
	font-family: var(--font-family-body);
	font-size: 15px;
	font-weight: var(--font-weight-medium);
	line-height: 22px;
	text-decoration: none;
}

.ga-founder__site a::after {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
	mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}

.ga-founder__site a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Social buttons on dark background. */
.ga-socials__links--dark .ga-social {
	border-color: var(--border-inverse);
	color: var(--text-inverse);
}

.ga-socials__links--dark .ga-social:hover {
	border-color: var(--border-accent);
	background: rgba(214, 173, 85, 0.1);
	color: var(--text-accent-inverse);
}

/* The CTA banner phrase is at most 680px wide (2 lines on Quiénes somos). */
.ga-cta__lead--body {
	max-width: 680px;
}

/* ----- Summary version (Home — Conoce a Elaine y Nadia): dark background, horizontal cards ----- */

.ga-founders--brief {
	position: relative;
	overflow: hidden;
	gap: var(--space-48);
	background: var(--surface-brand-strong);
}

/* Gold lines at the top left. */
.ga-founders--brief::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 640px;
	height: 480px;
	background: url("../img/founders-deco-lines.svg") center / contain no-repeat;
	pointer-events: none;
}

.ga-founders--brief > *,
.ga-founders--brief > .wp-block-group__inner-container > * {
	position: relative;
}

.ga-founders--brief .ga-founders__grid {
	gap: var(--space-32);
}

.ga-founders--brief .ga-founder {
	flex-direction: row;
}

/* 260px-wide photo spanning the card's full height. */
.ga-founders--brief figure.wp-block-image.ga-founder__photo {
	width: 260px;
	height: auto;
	min-height: 400px;
	background: none;
}

.ga-founders--brief .ga-founder figure.wp-block-image.ga-founder__photo img {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
}

.ga-founders--brief .ga-founder__body {
	justify-content: center;
	gap: var(--space-12);
	padding: 36px;
}

/* Logo + 4px spacer from Figma. */
.ga-founders--brief .ga-founder__logo {
	margin-bottom: var(--space-4) !important;
}

.ga-founders--brief .ga-founder--elaine .ga-founder__logo {
	height: 44px;
}

.ga-founders--brief .ga-founder--elaine .ga-founder__logo::before {
	margin-top: 0;
}

.ga-founders--brief .ga-founder__bio {
	flex: 0 1 auto;
	font-size: var(--font-size-body-sm);
	line-height: var(--font-line-height-body-sm);
}

.ga-founders__actions {
	margin: 0;
}

/* 2 columns: both cards share the rows (subgrid) so logo, specialty, name and bio start at
   the same height even if a name wraps; content aligned to the top, logos to the bottom
   of their row so the gap to the specialty is the same. */
@media (min-width: 1200px) {
	.ga-founders--brief .ga-founders__grid {
		row-gap: 0;
	}

	.ga-founders--brief .ga-founder {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		grid-row: span 4;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.ga-founders--brief figure.wp-block-image.ga-founder__photo {
		grid-row: 1 / -1;
	}

	.ga-founders--brief .ga-founder__body {
		display: grid;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
		align-content: start;
		row-gap: var(--space-12);
	}

	.ga-founders--brief .ga-founder__logo {
		align-self: end;
	}
}

/* Around 1280px the text column was 175px: the name wrapped and the bio ran to 12 lines.
   A slightly narrower photo and less side padding leave it at ~230px. */
@media (min-width: 1200px) and (max-width: 1439px) {
	.ga-founders--brief .ga-founder {
		grid-template-columns: 240px minmax(0, 1fr);
	}

	.ga-founders--brief figure.wp-block-image.ga-founder__photo {
		width: 240px;
	}

	/* Sides: 16px towards the photo (the cutout already leaves air around the person) and
	   24px towards the card edge; the bio goes from 10 to 8 lines at 1280px. */
	.ga-founders--brief .ga-founder__body {
		padding: var(--space-32) var(--space-24) var(--space-32) var(--space-16);
	}
}

@media (max-width: 1199px) {
	.ga-founders--brief .ga-founders__grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 720px;
	}
}

@media (max-width: 767px) {
	.ga-founders--brief::before {
		width: 320px;
		height: 240px;
	}

	.ga-founders--brief .ga-founders__grid {
		gap: var(--space-24);
	}

	.ga-founders--brief .ga-founder {
		flex-direction: column;
	}

	.ga-founders--brief figure.wp-block-image.ga-founder__photo {
		width: 100%;
		min-height: 0;
		height: 340px;
	}

	.ga-founders--brief .ga-founder__body {
		padding: var(--space-24);
	}
}

/* ----- Quiénes somos (About): tablet and mobile ----- */

@media (max-width: 1199px) {
	.ga-split {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-56);
		padding-block: var(--space-80);
	}

	/* Misión: text first, photos after. */
	.ga-mission .ga-split__content { order: 1; }
	.ga-mission .ga-mission__media { order: 2; }

	figure.wp-block-image.ga-essence__media {
		flex-basis: auto;
		width: 100%;
		max-width: 560px;
		margin-inline: auto;
	}

	.ga-mission__media {
		flex-basis: auto;
		width: 100%;
		max-width: 600px;
		height: auto;
		margin-inline: auto;
		aspect-ratio: 1;
	}

	figure.wp-block-image.ga-mission__photo--main {
		width: 73.33%;
		height: 86.67%;
	}

	figure.wp-block-image.ga-mission__photo--secondary {
		top: 53.33%;
		left: 53.33%;
		width: 46.67%;
		height: 46.67%;
	}

	.wp-block-cover.ga-purpose {
		padding-block: var(--space-80);
	}

	.ga-benefits,
	.ga-founders {
		padding-block: var(--space-80);
	}

	.ga-benefits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ga-benefit {
		min-height: 0;
	}

	.ga-founders__grid {
		grid-template-columns: minmax(0, 632px);
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.ga-split {
		gap: var(--space-40);
		padding-block: var(--space-64);
	}

	figure.wp-block-image.ga-essence__media {
		height: auto;
		aspect-ratio: 560 / 640;
	}

	figure.wp-block-image.ga-mission__photo--secondary {
		border-width: 6px;
	}

	.ga-highlight {
		padding: var(--space-24);
	}

	.wp-block-cover.ga-purpose {
		padding-block: var(--space-64);
	}

	.ga-purpose .wp-block-cover__inner-container {
		gap: var(--space-24);
	}

	.ga-purpose__eyebrow::before {
		margin-bottom: var(--space-24);
	}

	.ga-purpose__quote {
		font-size: var(--font-size-body-lg);
		line-height: var(--font-line-height-body-lg);
	}

	/* ALMA · MENTE · DINERO on a single line at 350px. */
	.ga-pillars {
		flex-wrap: nowrap;
		gap: var(--space-12);
	}

	.ga-pillar {
		font-size: 22px;
		letter-spacing: 0.2em;
	}

	.ga-pillar:not(:last-child) {
		gap: calc(var(--space-12) - 0.2em);
	}

	.ga-pillar:last-child {
		margin-right: -0.2em !important;
	}

	.ga-pillar:not(:last-child)::after {
		width: 12px;
		height: 12px;
		background-size: 12px 12px;
	}

	.ga-benefits,
	.ga-founders {
		gap: var(--space-40);
		padding-block: var(--space-64);
	}

	.ga-benefits__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	figure.wp-block-image.ga-founder__photo {
		height: auto;
		aspect-ratio: 632 / 560;
	}

	.ga-founder__body {
		padding: var(--space-24);
	}

	.ga-founder__bio {
		font-size: var(--font-size-body-md);
		line-height: var(--font-line-height-body-md);
	}
}

/* ==========================================================
   Forms — "Solicitud enviada" state (parts/contact-success.php)
   Light on Contáctanos; over the dark glass on the home page.
   ========================================================== */

.ga-contact-form:has(.ga-form-success) {
	padding: var(--space-64) var(--space-48);
}

.ga-form-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-20);
	text-align: center;
	outline: none;
}

.ga-form-success :is(p, dl, dd) {
	margin: 0;
}

.ga-form-success__icon {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 72px;
	height: 72px;
	border: 1px solid var(--border-accent);
	border-radius: var(--radius-full);
	background: var(--surface-accent-soft);
	color: var(--action-primary-bg);
}

.ga-form-success__icon svg {
	display: block;
}

.ga-form-success__title {
	color: var(--text-primary);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h3);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-heading-h3);
}

.ga-form-success__text {
	color: var(--text-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	line-height: var(--font-line-height-body-md);
}

.ga-form-success__summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	box-sizing: border-box;
	width: 100%;
	padding: var(--space-20) var(--space-24);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: var(--surface-default);
	text-align: left;
}

.ga-form-success__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-16);
}

.ga-form-success__row dt {
	flex-shrink: 0;
	font-weight: var(--font-weight-regular, 400);
	color: var(--text-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-sm);
	line-height: var(--font-line-height-body-sm);
}

.ga-form-success__row dd {
	color: var(--text-primary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	font-weight: var(--font-weight-semibold);
	line-height: 28px;
	text-align: right;
}

/* 24px of space above the button (20 gap + 4 from the Figma spacer). */
.ga-form-success__whatsapp {
	width: 100%;
	margin-top: var(--space-4);
	padding-block: calc(18px - var(--border-width-2));
}

.ga-form-success__home {
	color: var(--text-accent);
	font-family: var(--font-family-body);
	font-size: 15px;
	font-weight: var(--font-weight-medium);
	line-height: 22px;
	text-decoration: none;
}

.ga-form-success__home:hover,
.ga-form-success__home:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Home: glass card on indigo background. */
.ga-contact .ga-form-success__icon {
	border-color: var(--border-accent);
	background: rgba(214, 173, 85, 0.12);
}

.ga-contact .ga-form-success__title { color: var(--text-inverse); }
.ga-contact .ga-form-success__text { color: var(--text-inverse-secondary); }
.ga-contact .ga-form-success__home { color: var(--text-accent-inverse); }

.ga-contact .ga-form-success__summary {
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
}

.ga-contact .ga-form-success__row dt { color: var(--text-inverse-secondary); }
.ga-contact .ga-form-success__row dd { color: var(--text-inverse); }

@media (max-width: 767px) {
	.ga-contact-form:has(.ga-form-success) {
		padding: var(--space-40) var(--space-24);
	}

	.ga-form-success__row {
		flex-direction: column;
		gap: 0;
	}

	.ga-form-success__row dd {
		text-align: left;
	}

	.ga-form-success__whatsapp {
		white-space: normal;
	}
}

/* ==========================================================
   Heroes on screens wider than the design (1600px): height grows with width to
   keep the Figma proportions (home 1600 × 860, inner pages 1600 × 730).
   Up to 1600px nothing changes.
   ========================================================== */

/* The text and its container also grow proportionally: each Figma measurement (at 1600px)
   becomes vw (1px = 0.0625vw). The side margin stays the header's (aligned with the logo). */
@media (min-width: 1601px) {
	.wp-block-cover.ga-hero {
		min-height: calc(100vw * 860 / 1600);
		padding-top: 9.4375vw;
	}

	.wp-block-cover.ga-page-hero {
		min-height: calc(100vw * 730 / 1600);
		padding-top: 8.3125vw;
	}

	/* Inner pages */
	.ga-page-hero .wp-block-cover__inner-container {
		gap: 2vw;
		width: 52.5vw;
	}

	.ga-page-hero .ga-page-hero__breadcrumb {
		font-size: 1.5vw;
		line-height: 2vw;
		letter-spacing: 0.125vw;
	}

	.ga-page-hero__title {
		font-size: 4.5vw;
		line-height: 5vw;
	}

	.ga-page-hero__text {
		max-width: 35vw;
		font-size: 1.25vw;
		line-height: 2vw;
	}

	/* Home */
	.ga-hero__content {
		gap: 2vw;
		max-width: 46.125vw;
	}

	.ga-hero__copy {
		gap: 1vw;
	}

	.ga-hero__actions {
		gap: 1vw;
	}

	.ga-hero__title {
		font-size: 6vw;
		line-height: 5.625vw;
	}

	.ga-hero__subtitle {
		margin-top: calc(0.25vw - 2vw) !important;
		font-size: 2.75vw;
		line-height: 3vw;
	}

	.ga-hero__text {
		font-size: 1.125vw;
		line-height: 1.8125vw;
	}

	.ga-hero .wp-block-button > .wp-block-button__link {
		--btn-icon: 1.25vw;

		padding: calc(1vw - var(--border-width-2)) calc(2vw - var(--border-width-2));
		font-size: 1vw;
		line-height: 1.1875vw;
		letter-spacing: 0.03125vw;
	}
}

/* ==========================================================
   Service pages (La Conferencia, El Taller, El Curso)
   ========================================================== */

/* Photo with indigo duotone (ga-duotone class on the Image block). */
figure.wp-block-image.ga-duotone {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* Hero: tags and button. */
.ga-page-hero :is(.ga-badges, .ga-page-hero__actions) {
	margin: 0;
}

.ga-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
}

.ga-badges > .wp-block-group__inner-container {
	display: contents;
}

.ga-badge {
	display: inline-flex;
	margin: 0;
	padding: var(--space-4) var(--space-12);
	border-radius: var(--radius-full);
	background: var(--surface-accent-soft);
	color: var(--text-accent);
	font-family: var(--font-family-label);
	font-size: var(--font-size-label-md);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-label-md);
}

.ga-page-hero__actions > .wp-block-button[class*="is-style-ga-"] > .wp-block-button__link {
	padding-block: calc(18px - var(--border-width-2));
}

/* ----- Next date ([ga_proximo_evento]) ----- */

.ga-next-event-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding: var(--space-64) var(--layout-inline);
	background: var(--surface-subtle);
}

.ga-next-event-section :is(p) {
	margin: 0;
}

.ga-next-event-section .ga-eyebrow {
	color: var(--text-accent);
}

.ga-next-event {
	display: flex;
	align-items: center;
	gap: var(--space-32);
	padding: var(--space-24) var(--space-32);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-default);
}

.ga-next-event__date {
	display: flex;
	flex: 0 0 104px;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	padding-right: var(--space-32);
	border-right: 1px solid var(--border-subtle);
}

.ga-next-event__day {
	color: var(--text-primary);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h3);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-heading-h3);
}

.ga-next-event__month,
.ga-next-event__type {
	color: var(--text-accent);
	font-family: var(--font-family-label);
	font-size: var(--font-size-label-md);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-label-md);
	text-transform: uppercase;
}

.ga-next-event__info {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.ga-next-event__place {
	color: var(--text-primary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-lg);
	font-weight: var(--font-weight-semibold);
	line-height: var(--font-line-height-body-lg);
}

.ga-next-event__meta {
	color: var(--text-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	line-height: var(--font-line-height-body-md);
}

.ga-next-event__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-12);
}

/* ----- Introduction (.ga-split with photo) ----- */

figure.wp-block-image.ga-split__media {
	flex: 0 0 608px;
	height: 520px;
	margin: 0;
	border-radius: var(--radius-xl);
}

figure.wp-block-image.ga-split__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ----- Step-by-step program (assets/js/program.js) ----- */

.ga-program {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
	padding: var(--space-96) var(--layout-inline);
	background: linear-gradient(180deg, var(--color-indigo-900) 0%, var(--color-iris-700) 100%);
}

.ga-program > .wp-block-group__inner-container,
.ga-program__steps > .wp-block-group__inner-container,
.ga-program__step > .wp-block-group__inner-container {
	display: contents;
}

.ga-program .ga-section-header {
	max-width: none;
}

.ga-program__steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.ga-program :is(.ga-program__meta, .ga-program__tab, .ga-program__title, .ga-program__subtitle, .ga-program__text) {
	margin: 0;
}

/* Timeline */
.ga-program__timeline {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: var(--space-16);
	margin-bottom: calc(var(--space-24) - var(--space-48));
	padding: var(--space-24);
	border: 1px solid var(--border-brand-elevated);
	border-radius: var(--radius-lg);
	background: var(--surface-brand-strong);
}

.ga-program__tab-button,
.ga-program__tab-button:hover,
.ga-program__tab-button:focus {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-inverse-secondary);
	text-align: left;
	cursor: pointer;
}

.ga-program__marker {
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.ga-program__dot {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-radius: var(--radius-full);
	background: var(--color-indigo-300);
}

.ga-program__line {
	flex: 1;
	height: 1px;
	background: var(--border-brand-elevated);
}

.ga-program__tab-box {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	box-sizing: border-box;
	min-height: 118px;
	padding: var(--space-16);
	border: 1px solid var(--border-brand-elevated);
	border-radius: var(--radius-md);
	background: var(--surface-brand-strong);
	text-transform: uppercase;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ga-program__tab-meta {
	font-family: var(--font-family-label);
	font-size: 22px;
	font-weight: var(--font-weight-medium);
	line-height: 28px;
	letter-spacing: 2px;
}

.ga-program__tab-title {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	font-weight: var(--font-weight-bold);
	line-height: 24px;
	letter-spacing: 0.5px;
}

.ga-program__tab-button:hover .ga-program__tab-box {
	border-color: rgba(214, 173, 85, 0.5);
}

.ga-program__tab-button[aria-selected="true"] .ga-program__tab-box {
	border-color: var(--surface-accent);
	background: var(--surface-brand-elevated);
	color: var(--text-inverse);
}

.ga-program__tab-button[aria-selected="true"] .ga-program__tab-meta {
	color: var(--text-accent-inverse);
}

.ga-program__tab-button:is([aria-selected="true"], .is-done) :is(.ga-program__dot, .ga-program__line) {
	background: var(--surface-accent);
}

.ga-program__tab-button:focus-visible {
	outline: none;
}

.ga-program__tab-button:focus-visible .ga-program__tab-box {
	outline: 3px solid var(--border-focus);
	outline-offset: 2px;
}

/* Step detail */
.ga-program__steps.is-ready .ga-program__step {
	display: flex;
	align-items: center;
	gap: var(--space-40);
	padding: var(--space-40);
	border: 1px solid var(--border-brand-elevated);
	border-radius: var(--radius-xl);
	background: var(--surface-brand-strong);
}

.ga-program__step[hidden] {
	display: none !important;
}

figure.wp-block-image.ga-program__image {
	flex: 0 0 400px;
	height: 400px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-alpha-white-8);
}

figure.wp-block-image.ga-program__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ga-program__main {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-24);
	min-width: 0;
}

.ga-program__top,
.ga-program__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	min-height: 100px;
}

.ga-program__progress {
	display: flex;
	align-items: center;
	gap: var(--space-16);
}

.ga-program__number {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	border: 1px solid var(--surface-accent);
	border-radius: var(--radius-md);
	color: var(--text-accent-inverse);
	font-family: var(--font-family-label);
	font-size: var(--font-size-label-lg);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-label-lg);
}

.ga-program__bars {
	display: flex;
	gap: var(--space-8);
}

.ga-program__bar {
	width: 20px;
	height: 4px;
	border-radius: 2px;
	background: var(--border-brand-elevated);
}

.ga-program__bar.is-active {
	width: 32px;
	background: var(--surface-accent);
}

.ga-program__count,
.ga-program__next-label {
	font-family: var(--font-family-label);
	font-size: var(--font-size-label-eyebrow);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-label-eyebrow);
	letter-spacing: var(--font-letter-spacing-label-eyebrow);
	text-transform: uppercase;
}

.ga-program__count {
	color: var(--text-accent-inverse);
}

.ga-program__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding-bottom: var(--space-24);
	border-bottom: 1px solid var(--border-brand-elevated);
}

.ga-program__title {
	color: var(--text-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h4);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-line-height-heading-h4);
}

.ga-program__subtitle {
	color: var(--text-accent-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-h6);
	font-weight: var(--font-weight-semibold);
	line-height: var(--font-line-height-heading-h6);
}

.ga-program__text {
	max-width: 760px;
	color: var(--text-inverse-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	line-height: var(--font-line-height-body-md);
}

.ga-program__next {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
	text-transform: uppercase;
}

.ga-program__next-label {
	color: var(--text-inverse-secondary);
}

.ga-program__next-title {
	color: var(--text-inverse);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	font-weight: var(--font-weight-bold);
	line-height: 24px;
	letter-spacing: 0.5px;
}

.ga-program__arrows {
	display: flex;
	flex-shrink: 0;
	gap: var(--space-12);
}

/* Without JS: steps one below the other, as simple cards. */
.ga-program__steps:not(.is-ready) .ga-program__step {
	padding: var(--space-24);
	border-radius: var(--radius-lg);
	background: var(--surface-brand-strong);
	color: var(--text-inverse);
}

/* ----- Highlight box (glass card) ----- */

.ga-extra {
	padding: var(--space-96) var(--layout-inline);
	background: linear-gradient(180deg, var(--color-indigo-950) 0%, var(--color-indigo-900) 100%);
}

.ga-extra > .wp-block-group__inner-container,
.ga-extra__card > .wp-block-group__inner-container {
	display: contents;
}

.ga-extra__card {
	display: flex;
	align-items: center;
	gap: var(--space-64);
	padding: var(--space-64);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.ga-extra__card .ga-section-header {
	flex: 1 1 0;
	min-width: 0;
}

figure.wp-block-image.ga-extra__media {
	flex: 0 0 480px;
	height: 360px;
	margin: 0;
	border-radius: var(--radius-xl);
}

figure.wp-block-image.ga-extra__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ----- "Nuestros eventos" on white background ----- */

.ga-experience--light {
	padding-block: var(--space-96);
	background: var(--surface-default);
}

.ga-experience--light::before,
.ga-experience--light::after {
	display: none;
}

.ga-experience--light .ga-carousel-arrow,
.ga-experience--light .ga-carousel-arrow:focus {
	border-color: var(--action-secondary-border);
	background: transparent;
	color: var(--text-primary);
}

.ga-experience--light .ga-carousel-arrow:hover {
	border-color: var(--border-accent);
	background: var(--action-secondary-bg-hover);
	color: var(--text-accent);
}

.ga-experience--light .ga-carousel-dot,
.ga-experience--light .ga-carousel-dot:hover,
.ga-experience--light .ga-carousel-dot:focus {
	background-color: var(--color-indigo-300);
}

/* ----- "¿Qué incluye?" (servicio-incluye pattern): glass cards with a gold check ----- */

.ga-includes {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
	padding: var(--space-96) var(--layout-inline);
	background: linear-gradient(180deg, var(--color-indigo-900) 0%, var(--color-iris-700) 100%);
}

.ga-includes > .wp-block-group__inner-container,
.ga-includes__grid > .wp-block-group__inner-container {
	display: contents;
}

.ga-includes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-24) var(--space-32);
}

.ga-includes .ga-include {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	box-sizing: border-box;
	min-height: 117px;
	margin: 0;
	padding: 20px var(--space-24);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-inverse);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-md);
	font-weight: var(--font-weight-semibold);
	line-height: 28px;
}

/* 40px gold circle with a 20px check in the brand color (check.svg path, inline so it can be colored). */
.ga-includes .ga-include::before {
	content: "";
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29.3335 24.032'%3E%3Cpath d='M25.2989 0.795257C26.1282 -0.164674 27.578 -0.270359 28.5381 0.558833C29.498 1.38816 29.6037 2.8379 28.7745 3.79801L11.9867 23.2365C11.5696 23.7193 10.971 24.0069 10.3334 24.0304C9.69547 24.0537 9.0764 23.8105 8.62498 23.3591L0.672858 15.4069C-0.224286 14.5098 -0.224286 13.0563 0.672858 12.1591C1.57 11.262 3.02352 11.262 3.92066 12.1591L10.1246 18.3631L25.2989 0.795257Z' fill='%23261F4D'/%3E%3C/svg%3E") center / 20px 16.4px no-repeat,
		var(--gradient-gold-metallic);
}

/* Light variant (El Curso): white background, 2 columns, white cards with a border. */
.ga-includes--light {
	background: var(--surface-default);
}

.ga-includes--light .ga-includes__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ga-includes--light .ga-include {
	border-color: var(--border-default);
	background: var(--surface-default);
	color: var(--text-primary);
}

/* ----- "Próximamente" built with blocks (no event yet): same card as [ga_proximo_evento] ----- */

.ga-next-event-section > .wp-block-group__inner-container,
.ga-next-event > .wp-block-group__inner-container,
.ga-next-event__info > .wp-block-group__inner-container {
	display: contents;
}

.ga-next-event__actions.wp-block-buttons {
	margin: 0;
}

.ga-next-event__actions > .wp-block-button[class*="is-style-ga-"] > .wp-block-button__link {
	--btn-icon: 16px;

	padding: calc(var(--space-12) - var(--border-width-2)) calc(var(--space-24) - var(--border-width-2));
	font-size: var(--font-size-button-md);
	line-height: var(--font-line-height-button-md);
	letter-spacing: var(--font-letter-spacing-button-md);
}

/* ----- "100% virtual" (El Curso): glass card with text and a duotone photo ----- */

.ga-online {
	padding: var(--space-96) var(--layout-inline);
	background: linear-gradient(180deg, var(--color-indigo-950) 0%, var(--color-indigo-900) 100%);
}

.ga-online > .wp-block-group__inner-container,
.ga-online__card > .wp-block-group__inner-container {
	display: contents;
}

.ga-online__card {
	display: flex;
	align-items: center;
	gap: var(--space-64);
	padding: var(--space-64);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.ga-online__card > .ga-section-header,
.ga-online__card > .wp-block-group__inner-container > .ga-section-header {
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
	margin: 0;
}

figure.wp-block-image.ga-online__media {
	position: relative;
	isolation: isolate;
	flex: 0 0 480px;
	height: 360px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-xl);
}

figure.wp-block-image.ga-online__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

/* ----- "Dos dimensiones" (servicio-dimensiones pattern): photo + numbered card per column ----- */

.ga-dimensions {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
	overflow: hidden;
	padding: var(--space-96) var(--layout-inline);
	background: linear-gradient(180deg, var(--color-indigo-950) 0%, var(--color-indigo-900) 100%);
}

/* Gold lines at the top on each side (same as the testimonials). */
.ga-dimensions::before,
.ga-dimensions::after {
	content: "";
	position: absolute;
	top: -120px;
	width: 640px;
	height: 480px;
	background: center / contain no-repeat;
	pointer-events: none;
}

.ga-dimensions::before {
	left: -220px;
	background-image: url("../img/testimonials-deco-left.svg");
}

.ga-dimensions::after {
	right: -220px;
	background-image: url("../img/testimonials-deco-right.svg");
}

.ga-dimensions > * {
	position: relative;
	z-index: 1;
}

.ga-dimensions > .wp-block-group__inner-container,
.ga-dimensions__grid > .wp-block-group__inner-container,
.ga-dimension > .wp-block-group__inner-container {
	display: contents;
}

.ga-dimensions__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-32);
}

.ga-dimension {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	min-width: 0;
}

figure.wp-block-image.ga-dimension__media {
	height: 360px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--color-alpha-white-8);
}

figure.wp-block-image.ga-dimension__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

/* Same as the benefit card, on glass and with 40px padding. */
.ga-dimensions .ga-dimension__card {
	flex: 1;
	min-height: 0;
	padding: var(--space-40);
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
}

/* CTA with a stretched photo (class ga-cta--stretch on the Cover): like the Figma, the whole
   photo is stretched to the banner size. On mobile it goes back to the normal crop. */
.wp-block-cover.ga-cta--stretch .wp-block-cover__image-background {
	object-fit: fill !important;
}

@media (max-width: 767px) {
	.wp-block-cover.ga-cta--stretch .wp-block-cover__image-background {
		object-fit: cover !important;
	}
}

/* The CTA title's forced line breaks only on wide screens (the text keeps a space before each). */
@media (max-width: 767px) {
	.ga-cta__title br {
		display: none;
	}
}

/* ----- Service: tablet and mobile ----- */

@media (max-width: 1199px) {
	.ga-next-event {
		flex-wrap: wrap;
	}

	.ga-next-event__actions {
		flex: 1 1 100%;
	}

	figure.wp-block-image.ga-split__media {
		flex-basis: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 608 / 520;
	}

	.ga-includes,
	.ga-dimensions,
	.ga-online {
		padding-block: var(--space-80);
	}

	.ga-online__card {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-40);
		padding: var(--space-40);
	}

	figure.wp-block-image.ga-online__media {
		flex-basis: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 480 / 360;
	}

	.ga-includes__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-16);
	}

	.ga-dimensions::before,
	.ga-dimensions::after {
		width: 420px;
		height: 315px;
	}

	.ga-program {
		padding-block: var(--space-80);
	}

	.ga-program__timeline {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ga-program__steps.is-ready .ga-program__step {
		flex-direction: column;
		align-items: stretch;
	}

	figure.wp-block-image.ga-program__image {
		flex-basis: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.ga-program__top,
	.ga-program__footer {
		min-height: 0;
	}

	.ga-extra {
		padding-block: var(--space-80);
	}

	.ga-extra__card {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-40);
		padding: var(--space-48);
	}

	figure.wp-block-image.ga-extra__media {
		flex-basis: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.ga-experience--light {
		padding-block: var(--space-80);
	}
}

@media (max-width: 767px) {
	.ga-next-event-section {
		padding-block: var(--space-48);
	}

	.ga-includes,
	.ga-dimensions {
		gap: var(--space-40);
		padding-block: var(--space-64);
	}

	.ga-includes__grid,
	.ga-includes--light .ga-includes__grid,
	.ga-dimensions__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ga-online {
		padding-block: var(--space-64);
	}

	.ga-online__card {
		gap: var(--space-32);
		padding: var(--space-24);
		border-radius: var(--radius-xl);
	}

	.ga-includes .ga-include {
		min-height: 0;
		padding: var(--space-16) var(--space-20);
		font-size: var(--font-size-body-sm);
		line-height: var(--font-line-height-body-sm);
	}

	figure.wp-block-image.ga-dimension__media {
		height: 260px;
	}

	.ga-dimensions .ga-dimension__card {
		padding: var(--space-24);
	}

	.ga-dimensions::before,
	.ga-dimensions::after {
		display: none;
	}

	.ga-next-event {
		align-items: flex-start;
		gap: var(--space-20);
		padding: var(--space-20);
	}

	.ga-next-event__date {
		flex-basis: 64px;
		padding-right: var(--space-20);
	}

	.ga-next-event__actions .btn {
		flex: 1 1 100%;
		white-space: normal;
	}

	.ga-program {
		padding-block: var(--space-64);
	}

	.ga-program__timeline {
		padding: var(--space-16);
		gap: var(--space-12);
	}

	.ga-program__tab-box {
		min-height: 0;
		padding: var(--space-12);
	}

	.ga-program__tab-meta {
		font-size: 17px;
		line-height: 22px;
		letter-spacing: 1px;
	}

	.ga-program__tab-title {
		font-size: 13px;
		line-height: 18px;
	}

	.ga-program__steps.is-ready .ga-program__step {
		gap: var(--space-24);
		padding: var(--space-20);
	}

	.ga-program__count,
	.ga-program__next-label {
		font-size: 18px;
		line-height: 24px;
	}

	.ga-extra {
		padding-block: var(--space-64);
	}

	.ga-extra__card {
		padding: var(--space-24);
		border-radius: var(--radius-xl);
	}

	.ga-experience--light {
		padding-block: var(--space-64);
	}
}

/* Service hero on large screens: tags and button scale like the rest of the text. */
@media (min-width: 1601px) {
	.ga-badges {
		gap: 0.75vw;
	}

	.ga-badge {
		padding: 0.25vw 0.75vw;
		font-size: 0.9375vw;
		line-height: 1.25vw;
	}

	.ga-page-hero__actions > .wp-block-button[class*="is-style-ga-"] > .wp-block-button__link {
		--btn-icon: 1.25vw;

		padding: calc(1.125vw - var(--border-width-2)) calc(2vw - var(--border-width-2));
		font-size: 1vw;
		line-height: 1.1875vw;
		letter-spacing: 0.03125vw;
	}
}

/* ==========================================================
   LearnDash — USD reference price below the course price (inc/courses.php)
   ========================================================== */

.ga-price-usd {
	display: block;
	margin-top: var(--space-4);
	color: var(--text-secondary);
	font-family: var(--font-family-body);
	font-size: var(--font-size-body-sm);
	line-height: var(--font-line-height-body-sm);
}

/* ==========================================================
   Full-width sections without horizontal scroll on Windows
   GeneratePress stretches .alignfull to 100vw (margin: calc(50% - 50vw)). With classic
   scrollbars (Windows) 100vw includes the scrollbar, so every section stuck out ~8px on
   each side and the page scrolled sideways. On full-width pages the content area already
   spans the whole width, so the stretch isn't needed.
   ========================================================== */

.full-width-content.no-sidebar .entry-content .alignfull {
	margin-right: 0;
	margin-left: 0;
	max-width: none;
}

/* ==========================================================
   Large screens: header, footer and hero text inside the content container (1312px),
   like the sections, instead of the page margin. At 1600px it is the same 144px; wider,
   everything is centered and the hero text stays aligned with the logo.
   ========================================================== */

@media (min-width: 1200px) {
	.ga-header__inner,
	.ga-footer__inner {
		padding-inline: var(--layout-inline);
	}

	.wp-block-cover.ga-hero,
	.wp-block-cover.ga-page-hero {
		padding-inline: var(--layout-inline);
	}
}

/* ==========================================================
   Small desktops (1200–1439px, e.g. 1280px laptops): the 1312px layout squeezed into
   ~1050px. Adjustments so blocks don't wrap awkwardly or sit against the screen edge.
   ========================================================== */

/* Centered intro paragraphs and short bars: no single word left alone on a line. */
.ga-section-header__text {
	text-wrap: balance;
}

.ga-upcoming__title {
	text-wrap: balance;
}

@media (min-width: 1200px) and (max-width: 1439px) {
	/* Events: a wider list, so place and hours fit on one line. */
	.ga-events {
		grid-template-columns: minmax(0, 1fr) 400px;
	}

	/* Carousel arrows: beside the cards there is no room (they touched the screen edge);
	   next to the dots, as on tablet. */
	.ga-carousel-wrap .ga-carousel-arrow {
		position: static;
		transform: none;
	}

	/* Service cards: smaller icon and title so "La Conferencia" fits on one line. */
	.ga-service-card__title {
		gap: var(--space-12);
		font-size: var(--font-size-heading-h4);
		line-height: var(--font-line-height-heading-h4);
	}

	.ga-service-card__title::before {
		width: 60px;
		height: 60px;
	}

	/* Service cards: in ~330px cards most data values wrapped to 2 lines. Smaller gaps and
	   padding and a slightly smaller type (body-sm) give them room. */
	.ga-services-compare__grid {
		column-gap: var(--space-24);
	}

	.ga-service-card__body {
		padding: var(--space-24);
	}

	.ga-service-card__specs {
		column-gap: var(--space-16);
	}

	.ga-spec:nth-child(odd):not(.ga-spec--wide)::before {
		right: calc(-1 * var(--space-16));
	}

	.ga-service-card__desc,
	.ga-spec__value {
		font-size: var(--font-size-body-sm);
		line-height: var(--font-line-height-body-sm);
	}

	.ga-spec__label {
		letter-spacing: 0.5px;
	}

	/* Quiénes somos, Esencia and Misión: the fixed 560/600px photos left a ~350px text
	   column (6-line titles). Photos at 82% / 80% of their size and a smaller gap. */
	.ga-split {
		gap: var(--space-64);
	}

	figure.wp-block-image.ga-essence__media {
		flex-basis: 460px;
	}

	.ga-mission__media {
		zoom: 0.8;
	}

	/* Benefits: 5 columns of ~190px left 4-line titles and narrow text. In 3 + 2 (the second
	   row centered) each card is ~340px wide. */
	.ga-benefits__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--space-24);
	}

	.ga-benefit {
		grid-column: span 2;
		min-height: 0;
	}

	.ga-benefit:nth-child(4) {
		grid-column: 2 / span 2;
	}

	/* Service pages: intro photo and the photo inside the glass cards (Conferencia extra,
	   Curso online) smaller, so the text column gets ~500px instead of ~380px. */
	figure.wp-block-image.ga-split__media {
		flex-basis: 500px;
		min-height: 430px;
	}

	:is(.ga-extra__card, .ga-online__card) {
		gap: var(--space-48);
		padding: var(--space-48);
	}

	:is(figure.wp-block-image.ga-extra__media, figure.wp-block-image.ga-online__media) {
		flex-basis: 400px;
		height: 300px;
	}

	/* Next date bar: the two buttons side by side left ~200px for the info and the
	   hours wrapped; stacked, the info fits on one line. */
	.ga-next-event__actions {
		flex-direction: column;
		align-items: stretch;
	}

	/* El Curso, 6-session timeline: in ~150px tabs the long words were cut in half
	   ("PLANIFICA-CIÓN"). Less padding and a slightly smaller type. */
	.ga-program--sessions .ga-program__timeline {
		gap: var(--space-8);
		padding: var(--space-16);
	}

	.ga-program--sessions .ga-program__tab-box {
		padding: var(--space-12);
	}

	.ga-program--sessions .ga-program__tab-meta {
		font-size: 18px;
		line-height: 24px;
		letter-spacing: 1px;
	}

	.ga-program--sessions .ga-program__tab-title {
		font-size: var(--font-size-body-sm);
		line-height: var(--font-line-height-body-sm);
		letter-spacing: 0;
	}

	/* Contáctanos: the 520px info column left the form at ~330px (cut placeholders). */
	.ga-contact-page {
		gap: var(--space-64);
	}

	.ga-contact-page__info {
		flex-basis: 440px;
	}
}

/* Benefits (desktop): the cards share rows (subgrid), so every description starts at the
   same height even when a title takes 2, 3 or 4 lines. */
@media (min-width: 1440px) {
	.ga-benefits__grid {
		row-gap: 0;
	}
}

@media (min-width: 1200px) {

	.ga-benefit {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		row-gap: var(--space-16);
		align-content: start;
	}
}

/* ==========================================================
   Founder photos (transparent cutouts) on narrower desktops
   ========================================================== */

@media (min-width: 1200px) {
	/* Quiénes somos: the box was 560px tall at any width while the photo scales with the
	   width, so around 1280px the cutout ended above the bottom edge. With the box keeping
	   the 1600px proportion (630 × 560) the photo always sits on the bottom edge. */
	.ga-founders:not(.ga-founders--brief) figure.wp-block-image.ga-founder__photo {
		height: auto;
		aspect-ratio: 630 / 560;
	}

	/* Home (summary cards): the photo column is narrower than the card is tall, and "cover"
	   zoomed and cut the cutout at the sides. Whole photo, resting on the bottom edge. */
	.ga-founders--brief .ga-founder figure.wp-block-image.ga-founder__photo img {
		object-fit: contain;
		object-position: 50% 100%;
	}
}

/* Quiénes somos, Esencia: when the text is taller than the photo (narrower desktops), the
   photo grows to the text's height, so it starts at "Nuestra esencia" and ends at the
   highlight box. The cutout overflows downwards, so only more of it shows. When the text is
   shorter (1600px), the photo keeps its 640px and the text stays centered, as in Figma. */
@media (min-width: 1200px) {
	figure.wp-block-image.ga-essence__media {
		align-self: stretch;
		height: auto;
		min-height: 640px;
	}

	figure.wp-block-image.ga-essence__media + .ga-split__content,
	.ga-split__content:has(+ figure.wp-block-image.ga-essence__media) {
		align-self: center;
	}
}

@media (min-width: 1200px) and (max-width: 1439px) {
	figure.wp-block-image.ga-essence__media {
		min-height: 526px;
	}
}

/* Two-column sections with a photo (Misión, service intro): the text starts at the photo's
   top edge instead of being centered on it. In the service intro, when the text is taller
   (El Taller) the photo grows with it (cropped, not stretched). */
@media (min-width: 1200px) {
	.ga-mission .ga-split__content {
		align-self: flex-start;
	}

	.ga-service-intro {
		align-items: flex-start;
	}

	figure.wp-block-image.ga-split__media {
		position: relative;
		align-self: stretch;
		height: auto;
		min-height: 520px;
		overflow: hidden;
	}

	/* The photo fills the box without setting its height (the text or the min-height do). */
	figure.wp-block-image.ga-split__media img {
		position: absolute;
		inset: 0;
	}
}

@media (min-width: 1200px) and (max-width: 1439px) {
	figure.wp-block-image.ga-split__media {
		min-height: 430px;
	}
}

/* ==========================================================
   Service pages, final CTA (Cover with duotone photo) on desktop
   - Normal crop instead of stretching (ga-cta--stretch): at 1280 and at 2560 the photo was
     deformed to the banner size.
   - The banner grows a little with the screen (800px up to 1000px from 2000px wide) so on
     wide screens the crop doesn't leave only the middle strip of the photo.
   - Crop slightly above the center, where the faces are. The Cover's focal point (editor)
     still overrides it, because it is an inline style.
   ========================================================== */

@media (min-width: 768px) {
	.wp-block-cover.ga-cta--duotone .wp-block-cover__image-background {
		object-fit: cover !important;
		object-position: 50% 30%;
	}

	/* La Conferencia's photo has the faces near the top edge. */
	.wp-block-cover.ga-cta--duotone .wp-block-cover__image-background[src*="conferencia-cta"] {
		object-position: 50% 8%;
	}

	.wp-block-cover.ga-cta--duotone .wp-block-cover__image-background[src*="curso-cta"] {
		object-position: 50% 22%;
	}
}

@media (min-width: 1200px) {
	.wp-block-cover.ga-cta--duotone {
		min-height: clamp(800px, 50vw, 1000px);
	}
}

/* Home, "Conoce a Elaine y Nadia" on mobile: the cutout cropped at the waist (hard edge in
   the middle of the card, chair cut at the side). The whole photo, resting on the bottom
   of a slightly lighter box, like the cards on Quiénes somos. */
@media (max-width: 767px) {
	.ga-founders--brief figure.wp-block-image.ga-founder__photo {
		height: 360px;
		padding-top: var(--space-24);
		box-sizing: border-box;
		background: var(--color-alpha-white-8);
	}

	.ga-founders--brief .ga-founder figure.wp-block-image.ga-founder__photo img {
		position: static;
		object-fit: contain;
		object-position: 50% 100%;
	}
}