/* =================================================================
   main.css — ACF Starter Theme

   Tokens que NO se pueden expresar en theme.json viven aquí.
   Colores, font-sizes, spacing, sombras y radius están definidos
   en theme.json y disponibles como --wp--preset--* o --wp--custom--*.

   Consulta docs/style-guide.md para la referencia completa de tokens.

   Tabla de contenidos:
   1. CSS-only tokens (:root)
   2. WordPress Core utilities
   3. Global styles & typography
   4. Links
   5. Buttons (BEM: .btn, .btn--*)
   6. Images & Media
   7. Header & Navbar
   8. Footer
   9. Header Section component
   10. Accessibility
   11. Media queries
   ================================================================= */

/* =================================================================
   1. CSS-only tokens

   Estos tokens NO se pueden definir en theme.json.
   Para colores, font-sizes, spacing, sombras y radius,
   usa directamente --wp--preset--* o --wp--custom--*.
   ================================================================= */
:root {
	/* Semantic font aliases */
	--font-body: var(--wp--preset--font-family--primary);
	--font-heading: var(--wp--preset--font-family--primary);
	--font-display: var(--wp--preset--font-family--secondary);
	--font-mono: var(--wp--preset--font-family--monospace);

	/* Layout (fluid values con clamp — no soportado en theme.json) */
	--flow-space: 1.5625rem;
	--column-gap: clamp(2.5rem, 2.5vw + 1.75rem, 3.75rem);
	--box-spacing: clamp(1rem, 2.5vw + 0.25rem, 2.25rem);
	--container-spacing: clamp(1rem, 2.5vw + 0.25rem, 2.25rem);
	--component-spacing: clamp(3rem, 6.5vw + 1.05rem, 6.25rem);

	/* Font weights */
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Line heights */
	--lh-tight: 1.2;
	--lh-base: 1.6;
	--lh-relaxed: 1.8;

	/* Letter spacing */
	--ls-base: 0;
	--ls-wide: 0.02em;
	--ls-wider: 0.03em;
	--ls-btn: 0.0225rem;

	/* Status / Semantic colors (no tienen cabida en el palette de theme.json) */
	--color-success-50: #f0fdf4;
	--color-success-100: #dcfce7;
	--color-success-200: #bbf7d0;
	--color-success-300: #86efac;
	--color-success-400: #4ade80;
	--color-success-500: #22c55e;
	--color-success-600: #16a34a;
	--color-success-700: #15803d;
	--color-success-800: #166534;
	--color-success-900: #14532d;
	--color-success-950: #052e16;
	--color-success: var(--color-success-500);
	--color-success-light: var(--color-success-100);
	--color-success-dark: var(--color-success-700);

	--color-warning-50: #fffbeb;
	--color-warning-100: #fef3c7;
	--color-warning-200: #fde68a;
	--color-warning-300: #fcd34d;
	--color-warning-400: #fbbf24;
	--color-warning-500: #f59e0b;
	--color-warning-600: #d97706;
	--color-warning-700: #b45309;
	--color-warning-800: #92400e;
	--color-warning-900: #78350f;
	--color-warning-950: #451a03;
	--color-warning: var(--color-warning-500);
	--color-warning-light: var(--color-warning-100);
	--color-warning-dark: var(--color-warning-700);

	--color-error-50: #fef2f2;
	--color-error-100: #fee2e2;
	--color-error-200: #fecaca;
	--color-error-300: #fca5a5;
	--color-error-400: #f87171;
	--color-error-500: #ef4444;
	--color-error-600: #dc2626;
	--color-error-700: #b91c1c;
	--color-error-800: #991b1b;
	--color-error-900: #7f1d1d;
	--color-error-950: #450a0a;
	--color-error: var(--color-error-500);
	--color-error-light: var(--color-error-100);
	--color-error-dark: var(--color-error-700);

	--color-info-50: #f0f9ff;
	--color-info-100: #e0f2fe;
	--color-info-200: #bae6fd;
	--color-info-300: #7dd3fc;
	--color-info-400: #38bdf8;
	--color-info-500: #0ea5e9;
	--color-info-600: #0284c7;
	--color-info-700: #0369a1;
	--color-info-800: #075985;
	--color-info-900: #0c4a6e;
	--color-info-950: #082f49;
	--color-info: var(--color-info-500);
	--color-info-light: var(--color-info-100);
	--color-info-dark: var(--color-info-700);

	/* Border extras */
	--color-border-hover: #cccccc;

	/* Transitions (no soportado en theme.json) */
	--transition-btn:
		background-color var(--wp--custom--motion--duration--base)
			var(--wp--custom--motion--easing--standard),
		color var(--wp--custom--motion--duration--base)
			var(--wp--custom--motion--easing--standard),
		border-color var(--wp--custom--motion--duration--base)
			var(--wp--custom--motion--easing--standard),
		transform var(--wp--custom--motion--duration--fast)
			var(--wp--custom--motion--easing--standard);

	/* Component radius aliases */
	--border-radius-input-form: var(--wp--custom--radius--4);
	--border-radius-button-sm: var(--wp--custom--radius--4);
	--border-radius-button-md: var(--wp--custom--radius--4);
	--border-radius-button-lg: var(--wp--custom--radius--4);

	/* Z-index scale */
	--z-below: -1;
	--z-base: 0;
	--z-dropdown: 1000;
	--z-sticky: 1100;
	--z-overlay: 1200;
	--z-modal: 1300;
	--z-popover: 1400;
	--z-tooltip: 1500;
}

/* =================================================================
   2. WordPress Core utilities
   ================================================================= */

/* max-width + overflow-x en html/body: sin esto, cualquier elemento que
   se pase del ancho de la pantalla (un margen/padding negativo, un ancho
   fijo que no se ajusta bien en móvil...) añade scroll horizontal a toda
   la página. Los scrolls horizontales propios de un componente (el
   carrusel de Timeline en móvil, alguna galería) siguen funcionando:
   gestionan su propio overflow-x en su contenedor, no dependen de esto.
   "clip" y no "hidden": con "hidden" (probado) el navegador convierte
   html/body en un contenedor de scroll también en el eje vertical, y eso
   rompe el position:sticky del scroll-pin de "Imagen Interactiva con
   Tabs" (deja de fijarse al hacer scroll). "clip" recorta igual el
   desbordamiento horizontal pero no crea ese contenedor de scroll, así
   que el sticky sigue funcionando. */
html {
	scroll-behavior: smooth;
	max-width: 100vw;
	overflow-x: clip;
}

/* La barra de admin de WP (#wpadminbar, solo visible con sesión
   iniciada) desborda en móvil por items que añaden algunos plugins y
   provoca scroll horizontal en el front. Es fixed/absolute → el
   overflow-x: clip de html/body no la alcanza. No afecta a visitantes.
   Solo se recorta el eje X: los desplegables de la barra van hacia
   abajo (eje Y), no se ven afectados. */
#wpadminbar {
	overflow-x: clip;
}

.alignnone {
	margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

a img.alignnone {
	margin: 5px 20px 20px 0;
}

a img.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	max-width: 96%;
	padding: 5px 3px 10px;
	text-align: center;
}

.wp-caption.alignnone {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}

.wp-caption img {
	border: 0 none;
	height: auto;
	margin: 0;
	max-width: 98.5%;
	padding: 0;
	width: auto;
}

.wp-caption p.wp-caption-text {
	font-size: var(--wp--preset--font-size--12);
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--bg-secondary);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--text);
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* =================================================================
   3. Global styles & typography
   ================================================================= */
body {
	max-width: 100vw;
	overflow-x: clip;
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--15);
	line-height: var(--lh-base);
	color: var(--wp--preset--color--text);
	background-color: var(--wp--preset--color--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	/* Segunda barrera contra el scroll horizontal, además del
	   overflow-x: clip de html/body: en algunos navegadores (Safari iOS)
	   el clip a nivel de root no siempre frena el paneo horizontal.
	   "clip" (no "hidden") no crea contenedor de scroll → no rompe los
	   position: sticky de dentro. */
	max-width: 100%;
	overflow-x: clip;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
	margin-block-start: var(--wp--preset--spacing--0);
}

.home .wp-site-blocks > main {
	margin-top: 0!important;
}

.container {
	margin-inline: auto;
	padding-left: var(--wp--preset--spacing--16);
	padding-right: var(--wp--preset--spacing--16);
}

strong {
	font-weight: var(--fw-semibold);
	color: inherit;
}

/* Headings — font-sizes definidos en theme.json (clamp) */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	color: var(--wp--preset--color--text-heading);
	line-height: var(--lh-tight);
	margin-top: var(--wp--preset--spacing--0);
	margin-bottom: var(--wp--preset--spacing--24);
}

p {
	margin-top: var(--wp--preset--spacing--0);
	margin-bottom: var(--wp--preset--spacing--16);
}

ul,
ol {
	margin-top: var(--wp--preset--spacing--0);
	margin-bottom: var(--wp--preset--spacing--8);
	padding-left: var(--wp--preset--spacing--12);
}

li {
	margin-bottom: var(--wp--preset--spacing--4);
}

li:last-child {
	margin-bottom: 0;
}

/* Content */
.wp-site-blocks > .entry-content {
	margin-block-start: 0;
}

/* =================================================================
   4. Links
   ================================================================= */
a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: color var(--wp--custom--motion--duration--base)
		var(--wp--custom--motion--easing--standard);
}

a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

a:focus {
	outline: none;
	outline-offset: 0;
}

a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* =================================================================
   5. Buttons — Design System
   ----------------------------------------------------------------
   Three solid families × three outline families + utilities.

   Solid:    .btn--primary  (gold, white text)
             .btn--dark     (dark, white text — alias: --default, --secondary)
             .btn--light    (white, dark text)

   Outline:  .btn--outline-primary  (gold ring)
             .btn--outline-dark     (dark ring — alias: --outline)
             .btn--outline-light    (white ring, for dark backgrounds — alias: --transparent)

   Utility:  .btn--ghost   (no border, link-like with hover color)
             .btn--link    (plain underlined link)

   Sizes:    .btn--sm | .btn--md | .btn--lg

   All variants share base motion, focus ring, and disabled handling
   from `.btn` itself — no per-variant duplication.
   ================================================================= */

.btn {
	--btn-bg: var(--wp--preset--color--bg-dark);
	--btn-bg-hover: var(--wp--preset--color--black);
	--btn-fg: var(--wp--preset--color--white);
	--btn-fg-hover: var(--wp--preset--color--white);
	--btn-border: var(--btn-bg);
	--btn-border-hover: var(--btn-bg-hover);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-family: var(--wp--preset--font-family--primary);
	font-weight: var(--fw-medium, 600);
	font-size: var(--wp--preset--font-size--18);
	line-height: 1.5;
	color: var(--btn-fg);
	background-color: var(--btn-bg);
	text-decoration: none;
	border: 2px solid var(--btn-border);
	border-radius: var(--wp--custom--radius--0);
	cursor: pointer;
	border-radius: 2rem;
	font-weight: 700;
	text-transform: uppercase;
	transition: var(
		--transition-btn,
		background-color 200ms ease,
		color 200ms ease,
		border-color 200ms ease,
		transform 200ms ease
	);
	white-space: nowrap;
	user-select: none;
}

.btn:hover {
	color: var(--btn-fg-hover);
	background-color: var(--btn-bg-hover);
	border-color: var(--btn-border-hover);
	text-decoration: none;
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn:focus {
	outline: 2px solid transparent;
}

.btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
}

/* --- Sizes --- */

.btn--sm {
	padding: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--14);
}

.btn--md {
	padding: 0.75rem 1.5rem;
	font-size: var(--wp--preset--font-size--16);
}

.btn--lg {
	padding: 1rem 2rem;
	font-size: var(--wp--preset--font-size--18);
}

/* --- Solid: Primary (gold) --- */
.btn--primary {
	--btn-bg: var(--wp--preset--color--brown-dark);
	--btn-bg-hover: var(--wp--preset--color--white);
	--btn-fg: var(--wp--preset--color--white);
	--btn-fg-hover: var(--wp--preset--color--brown-dark);
	--btn-border: var(--wp--preset--color--brown-dark);
	--btn-border-hover: var(--wp--preset--color--brown-dark);
}

/* --- Solid: Dark (--default and --secondary are aliases) --- */
.btn--dark,
.btn--default,
.btn--secondary {
	--btn-bg: var(--wp--preset--color--gold);
	--btn-bg-hover: var(--wp--preset--color--white);
	--btn-fg: var(--wp--preset--color--brown-dark);
	--btn-fg-hover: var(--wp--preset--color--brown-dark);
	--btn-border: var(--btn-bg);
	--btn-border-hover: var(--wp--preset--color--gold);
}

/* --- Solid: Light (white bg, dark text) --- */
.btn--light {
	--btn-bg: var(--wp--preset--color--white);
	--btn-bg-hover: var(--wp--preset--color--bg-secondary);
	--btn-fg: var(--wp--preset--color--text-heading);
	--btn-fg-hover: var(--wp--preset--color--text-heading);
	--btn-border: var(--wp--preset--color--white);
	--btn-border-hover: var(--wp--preset--color--text-heading);
}

/* --- Outline: Dark (--outline and --outline-secondary are aliases) ---
   Marrón oscuro (brown-dark), no negro. */
.btn--outline,
.btn--outline-dark,
.btn--outline-secondary {
	--btn-bg: transparent;
	--btn-bg-hover: var(--wp--preset--color--brown-dark);
	--btn-fg: var(--wp--preset--color--brown-dark);
	--btn-fg-hover: var(--wp--preset--color--white);
	--btn-border: var(--wp--preset--color--brown-dark);
	--btn-border-hover: var(--wp--preset--color--brown-dark);
}

/* --- Outline: Primary (gold ring) --- */
.btn--outline-primary {
	--btn-bg: transparent;
	--btn-bg-hover: var(--wp--preset--color--primary);
	--btn-fg: var(--wp--preset--color--primary);
	--btn-fg-hover: var(--wp--preset--color--white);
	--btn-border: var(--wp--preset--color--primary);
	--btn-border-hover: var(--wp--preset--color--primary);
}

/* --- Outline: Light (white ring on dark bg — alias: --transparent) --- */
.btn--outline-light,
.btn--transparent {
	--btn-bg: transparent;
	--btn-bg-hover: var(--wp--preset--color--white);
	--btn-fg: var(--wp--preset--color--white);
	--btn-fg-hover: var(--wp--preset--color--text-heading);
	--btn-border: var(--wp--preset--color--white);
	--btn-border-hover: var(--wp--preset--color--white);
}

/* --- Utility: Ghost (no border, no bg) --- */
.btn--ghost {
	--btn-bg: transparent;
	--btn-bg-hover: transparent;
	--btn-fg: var(--wp--preset--color--text);
	--btn-fg-hover: var(--wp--preset--color--primary);
	--btn-border: transparent;
	--btn-border-hover: transparent;
	padding-inline: 0;
}

.btn--ghost:hover {
	transform: none;
	text-decoration: underline;
}

.btn--ghost:has(svg):hover {
	text-decoration: none;
}

/* --- Utility: Link (plain underlined) --- */
.btn--link {
	--btn-bg: transparent;
	--btn-bg-hover: transparent;
	--btn-fg: var(--wp--preset--color--text);
	--btn-fg-hover: var(--wp--preset--color--primary);
	--btn-border: transparent;
	--btn-border-hover: transparent;
	padding-inline: 0;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.btn--link:hover {
	transform: none;
	text-decoration: underline;
}

/* =================================================================
   6. Images & Media
   ================================================================= */
img {
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

figcaption {
	font-size: var(--wp--preset--font-size--14);
	color: var(--wp--preset--color--text-muted);
	margin-top: var(--wp--preset--spacing--4);
	text-align: center;
}

video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

/* =================================================================
   7. Header & Navbar
   Layouts (via render_block): --layout-classic | --layout-centered | --layout-stacked
   Colors  (via render_block): --color-light | --color-dark | --color-transparent
   Classes are injected on .site-header itself → works in frontend + site editor.
   ================================================================= */

/* Site header wrapper */
.site-header {
	background-color: var(--wp--preset--color--bg);
	position: fixed;
	width: 100vw;
	/* El header es position:fixed → el "overflow-x: clip" de html/body NO
	   lo alcanza (su bloque contenedor es el viewport). Si su contenido
	   se pasa de ancho en móvil (el topbar social+menú, un CTA largo...)
	   aparece scroll horizontal en toda la página. max-width lo topa al
	   ancho real y overflow-x: clip recorta lo que se salga. */
	max-width: 100%;
	overflow-x: clip;
	z-index: var(--z-header, 100);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.site-header--hidden {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-100%);
}
/* Main navigation bar */
.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--wp--preset--spacing--16);
	margin-top: 0;
	gap: var(--wp--preset--spacing--24);
}

.site-header--color-transparent.site-header--scrolled,
.site-header--color-gradient-light.site-header--scrolled,
.site-header--color-gradient-dark.site-header--scrolled {
	background-color: var(--wp--preset--color--bg);
	background-image: none;
}

.site-header--color-transparent.site-header--scrolled .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.site-header--color-transparent.site-header--scrolled .site-header__nav .wp-block-navigation-item__content,
.site-header--color-gradient-dark.site-header--scrolled .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.site-header--color-gradient-dark.site-header--scrolled .site-header__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
}

.site-header--color-transparent.site-header--scrolled .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.site-header--color-gradient-dark.site-header--scrolled .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

.site-header--color-transparent.site-header--scrolled .topbar__value,
.site-header--color-transparent.site-header--scrolled .topbar__link,
.site-header--color-gradient-dark.site-header--scrolled .topbar__value,
.site-header--color-gradient-dark.site-header--scrolled .topbar__link {
	color: var(--wp--preset--color--text);
}
.home .site-header--color-transparent .topbar__contact svg,
.home .site-header--color-transparent .topbar__contact svg path,
.home .site-header--color-transparent .topbar__address svg,
.home .site-header--color-transparent .topbar__address svg path,
.home .site-header--color-transparent .topbar__link svg,
.home .site-header--color-transparent .topbar__link svg path,
.home .site-header--color-gradient-dark .topbar__contact svg,
.home .site-header--color-gradient-dark .topbar__contact svg path,
.home .site-header--color-gradient-dark .topbar__address svg,
.home .site-header--color-gradient-dark .topbar__address svg path,
.home .site-header--color-gradient-dark .topbar__link svg,
.home .site-header--color-gradient-dark .topbar__link svg path {
    fill: var(--wp--preset--color--white) !important;
	stroke: none;
}
.home .site-header--color-transparent.site-header--scrolled .topbar__contact svg,
.home .site-header--color-transparent.site-header--scrolled .topbar__contact svg path,
.home .site-header--color-transparent.site-header--scrolled .topbar__address svg,
.home .site-header--color-transparent.site-header--scrolled .topbar__address svg path,
.home .site-header--color-transparent.site-header--scrolled .topbar__link svg,
.home .site-header--color-transparent.site-header--scrolled .topbar__link svg path,
.home .site-header--color-gradient-dark.site-header--scrolled .topbar__contact svg,
.home .site-header--color-gradient-dark.site-header--scrolled .topbar__contact svg path,
.home .site-header--color-gradient-dark.site-header--scrolled .topbar__address svg,
.home .site-header--color-gradient-dark.site-header--scrolled .topbar__address svg path,
.home .site-header--color-gradient-dark.site-header--scrolled .topbar__link svg,
.home .site-header--color-gradient-dark.site-header--scrolled .topbar__link svg path {
    fill: var(--wp--preset--color--text) !important;
}

/* Excepción: el topbar con estilo oscuro o primario tiene fondo propio
   fijo y NO colapsa con el header — sus enlaces e iconos se quedan
   blancos aunque el header pase a fondo claro al hacer scroll (si no,
   quedaban oscuros sobre el fondo oscuro del topbar e invisibles). */
.site-header--scrolled .topbar.is-style-dark .topbar__value,
.site-header--scrolled .topbar.is-style-dark .topbar__link,
.site-header--scrolled .topbar.is-style-primary .topbar__value,
.site-header--scrolled .topbar.is-style-primary .topbar__link {
	color: rgba(255, 255, 255, 0.92);
}
.site-header--scrolled .topbar.is-style-dark .topbar__contact svg,
.site-header--scrolled .topbar.is-style-dark .topbar__contact svg path,
.site-header--scrolled .topbar.is-style-dark .topbar__address svg,
.site-header--scrolled .topbar.is-style-dark .topbar__address svg path,
.site-header--scrolled .topbar.is-style-dark .topbar__link svg,
.site-header--scrolled .topbar.is-style-dark .topbar__link svg path,
.site-header--scrolled .topbar.is-style-primary .topbar__contact svg,
.site-header--scrolled .topbar.is-style-primary .topbar__contact svg path,
.site-header--scrolled .topbar.is-style-primary .topbar__address svg,
.site-header--scrolled .topbar.is-style-primary .topbar__address svg path,
.site-header--scrolled .topbar.is-style-primary .topbar__link svg,
.site-header--scrolled .topbar.is-style-primary .topbar__link svg path {
	fill: var(--wp--preset--color--white) !important;
	stroke: none;
}


/* Brand / Logo */
.site-header__brand {
	flex-shrink: 0;
}

.site-header .wp-block-site-logo a,
.site-header .wp-block-site-logo img {
	height: 2rem;
	width: auto;
	display: block;
	transition: opacity 0.25s ease;
	max-width: 70vw;
}

/* Scroll logo swap: two <img> siblings, only one visible at a time.
   Injected por Starter_Theme::swap_logo_in().
   Los selectores repiten ".site-header .wp-block-site-logo img" (y añaden
   la clase del marcador) para ganar en especificidad a la regla de logo
   de arriba, que pone "display: block" y si no, se veían los dos. */
.site-header .wp-block-site-logo img.custom-logo--scrolled {
	display: none;
}
.site-header--scrolled .wp-block-site-logo img.custom-logo--resting {
	display: none;
}
.site-header--scrolled .wp-block-site-logo img.custom-logo--scrolled {
	display: block;
}

/* Navigation links */
.site-header__nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--24);
}

.site-header__nav .wp-block-navigation-item {
	margin-bottom: 0;
}

.site-header__nav .wp-block-navigation-item__content {
	font-size: 1rem;
	font-weight: var(--fw-medium);
	line-height: 1.5;
	letter-spacing: 0.04em;
	/* text-transform: uppercase; */
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* Un ítem del menú con enlace "#" es un marcador de posición — p. ej. el
   nombre de un grupo que solo despliega un submenú, sin página propia.
   Se queda sin poder pulsar (ratón/táctil) y sin el cursor de "enlace",
   en vez de recargar la página al pulsarlo. No toca el botón de abrir
   submenú (es un <button> aparte, no este <a>), así que el desplegable
   sigue funcionando igual. */
.site-header__nav a[href="#"].wp-block-navigation-item__content {
	pointer-events: none;
	cursor: default;
}

.wp-block-columns table {
	margin: 1rem;
    font-size: 0.75rem;
}

/* Active page link — desktop only (mobile menu keeps a flat style).
   El ítem activo se marca con la misma línea de :hover (el ::after de
   más abajo, en el bloque @media 64rem del nav) + texto en blanco. */
@media (min-width: 64rem) {
	.site-header__nav
		.wp-block-navigation-item.current-menu-item
		> .wp-block-navigation-item__content {
		color: var(--wp--preset--color--white);
	}
}

/* --- Header CTA buttons (centered layout) --- */
.header-cta {
	display: none;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.header-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1.25rem;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--4, 0.25rem);
	white-space: nowrap;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
	cursor: pointer;
}

.header-cta__btn:hover {
	text-decoration: none;
}

.header-cta__btn--primary {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--primary);
}
.header-cta__btn--primary:hover {
	background-color: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
}

.header-cta__btn--secondary {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}
.header-cta__btn--secondary:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.header-cta__btn--ghost {
	background-color: transparent;
	color: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--border);
}
.header-cta__btn--ghost:hover {
	background-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--text-heading);
}

/* --- Mobile menu (overlay) --- */

/*
 * WP core hides the hamburger at 600px. Override to keep it visible until 1024px.
 * Also re-hide the nav links below 1024px so only the overlay is used.
 */
@media (max-width: 63.9375rem) {
	.site-header__nav
		.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
	}
	.site-header__nav
		.wp-block-navigation__responsive-container:not(.hidden-by-default):not(
			.is-menu-open
		) {
		display: none;
	}
}

.site-header__nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--text);
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--bg-dark);
	padding: 0;
}

.site-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	font-size: 1.125rem;
	padding-block: var(--wp--preset--spacing--8);
	text-transform: none;
	letter-spacing: normal;
	color: rgba(255, 255, 255, 0.85);
}

/* Submenús plegables dentro del overlay móvil.
   El core/navigation, cuando sus submenús abren en hover (ajuste "abrir
   al hacer clic" desactivado), los muestra TODOS desplegados dentro del
   overlay y su chevron no pliega nada. Aquí se pliegan por defecto y el
   chevron los abre/cierra alternando ".st-submenu-open" en el <li>
   (ver assets/js/main.js). En escritorio no se toca nada. */
@media (max-width: 63.9375rem) {
	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-submenu:not(.st-submenu-open)
		> .wp-block-navigation__submenu-container {
		display: none;
	}

	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-submenu__toggle {
		transition: transform 0.2s ease;
	}

	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-submenu.st-submenu-open
		> .wp-block-navigation-submenu__toggle {
		transform: rotate(180deg);
	}
}

/* =================================================================
   7a. Layout: Centered
   Logo left — Nav center — CTA buttons right (3 columns)
   ================================================================= */

.wp-block-post-content {
	margin-block-start: 0;
}

.site-header--layout-centered .site-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.site-header--layout-centered .site-header__brand {
	justify-self: start;
}

.site-header--layout-centered .site-header__nav {
	justify-self: center;
}

.site-header--layout-centered .header-cta {
	display: flex;
	justify-self: end;
}

/* =================================================================
   7b. Layout: Stacked
   Logo centered top — Nav centered bottom
   ================================================================= */

.site-header--layout-stacked .site-header__bar {
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--12);
	padding-block: var(--wp--preset--spacing--16) var(--wp--preset--spacing--12);
	margin-top: var(--wp--preset--spacing--8);
}

.site-header--layout-stacked .wp-block-site-logo a,
.site-header--layout-stacked .wp-block-site-logo img {
	height: var(--wp--preset--spacing--56);
}

.site-header--layout-stacked .header-cta {
	display: none;
}

/* =================================================================
   7c. Color: Light (explicit)
   Default; declared for robustness so the class can be overridden
   without depending on implicit inheritance from the base rules.
   ================================================================= */

.site-header--color-light {
	background-color: var(--wp--preset--color--bg);
}

.site-header--color-light .site-header__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
}

.site-header--color-light
	.site-header__nav
	.wp-block-navigation-item__content:hover,
.site-header--color-light
	.site-header__nav
	.wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--primary);
}

@media (min-width: 64rem) {
	.site-header--color-light
		.wp-block-navigation-item.current-menu-item
		> .wp-block-navigation-item__content {
		color: var(--wp--preset--color--primary);
	}
}

/* =================================================================
   7d. Color: Dark
   ================================================================= */

.site-header--color-dark {
	background-color: var(--wp--preset--color--bg-dark, #111111);
}

.site-header--color-dark .site-header__nav .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.85);
}
.site-header--color-dark
	.site-header__nav
	.wp-block-navigation-item__content:hover,
.site-header--color-dark
	.site-header__nav
	.wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--white);
}
@media (min-width: 64rem) {
	.site-header--color-dark
		.wp-block-navigation-item.current-menu-item
		> .wp-block-navigation-item__content {
		color: var(--wp--preset--color--white);
	}
}
.site-header--color-dark .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--white);
}

/* Dark: CTA overrides */
.site-header--color-dark .header-cta__btn--ghost {
	color: rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.3);
}
.site-header--color-dark .header-cta__btn--ghost:hover {
	color: var(--wp--preset--color--white);
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.5);
}
.site-header--color-dark .header-cta__btn--secondary {
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}
.site-header--color-dark .header-cta__btn--secondary:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary-dark);
}

/* Dark: dropdown keeps light surface for legibility */
.site-header--color-dark
	.site-header__nav
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
}
.site-header--color-dark
	.site-header__nav
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:hover,
.site-header--color-dark
	.site-header__nav
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--bg-secondary);
}

/* =================================================================
   7e. Color: Transparent
   Overlays hero content, no background, white text.
   Uses --header-height CSS var so the next block (hero) can offset.
   ================================================================= */

/* The template-part wrapper needs absolute too, not just the inner div.
   Shared by all three "floats over the hero" schemes: transparent + both gradients. */
.wp-block-template-part:has(
	:is(
		.site-header--color-transparent,
		.site-header--color-gradient-light,
		.site-header--color-gradient-dark
	)
) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-header, 100);
}

.site-header--color-transparent {
	background-color: transparent;
}

.site-header--color-transparent
	.site-header__nav
	.wp-block-navigation-item__content,
.site-header--color-gradient-dark
	.site-header__nav
	.wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.85);
}
.site-header--color-transparent
	.site-header__nav
	.wp-block-navigation-item__content:hover,
.site-header--color-transparent
	.site-header__nav
	.wp-block-navigation-item__content:focus,
.site-header--color-gradient-dark
	.site-header__nav
	.wp-block-navigation-item__content:hover,
.site-header--color-gradient-dark
	.site-header__nav
	.wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--primary);
}
@media (min-width: 64rem) {
	.site-header--color-transparent
		.wp-block-navigation-item.current-menu-item
		> .wp-block-navigation-item__content,
	.site-header--color-gradient-dark
		.wp-block-navigation-item.current-menu-item
		> .wp-block-navigation-item__content {
		color: var(--wp--preset--color--white);
	}
}
.site-header--color-transparent
	.wp-block-navigation__responsive-container-open,
.site-header--color-gradient-dark
	.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--white);
}

/* Al colapsar el header a blanco con el scroll (.site-header--scrolled),
   el icono de la hamburguesa pasa a color de texto — si no, se queda
   blanco e invisible sobre el fondo claro. El SVG del botón usa
   fill: currentColor, así que basta con cambiar `color`. */
.site-header--color-transparent.site-header--scrolled
	.wp-block-navigation__responsive-container-open,
.site-header--color-gradient-dark.site-header--scrolled
	.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--text);
}

/* Transparent/gradient-dark: mobile menu uses dark background for contrast */
.site-header--color-transparent
	.wp-block-navigation__responsive-container.is-menu-open,
.site-header--color-gradient-dark
	.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--bg-dark);
}
.site-header--color-transparent
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content,
.site-header--color-gradient-dark
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.85);
}

/* Transparent/gradient-dark: CTA overrides */
.site-header--color-transparent .header-cta__btn--ghost,
.site-header--color-gradient-dark .header-cta__btn--ghost {
	color: rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.3);
}
.site-header--color-transparent .header-cta__btn--ghost:hover,
.site-header--color-gradient-dark .header-cta__btn--ghost:hover {
	color: var(--wp--preset--color--white);
	background-color: rgba(255, 255, 255, 0.1);
}
.site-header--color-transparent .header-cta__btn--secondary,
.site-header--color-gradient-dark .header-cta__btn--secondary {
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}
.site-header--color-transparent .header-cta__btn--secondary:hover,
.site-header--color-gradient-dark .header-cta__btn--secondary:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary-dark);
}

/* Transparent/gradient-dark: dropdown keeps light surface for legibility */
.site-header--color-transparent
	.site-header__nav
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content,
.site-header--color-gradient-dark
	.site-header__nav
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
}
.site-header--color-transparent
	.site-header__nav
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:hover,
.site-header--color-transparent
	.site-header__nav
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:focus,
.site-header--color-gradient-dark
	.site-header__nav
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:hover,
.site-header--color-gradient-dark
	.site-header__nav
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--bg-secondary);
}

/* =================================================================
   7e-2. Color: Gradient (light / dark)
   Same overlay behavior as Transparent, but with a top→bottom gradient
   background instead of full transparency. "gradient-light" keeps the
   default dark nav text (like "Claro"); "gradient-dark" reuses all the
   light-text rules above (grouped with .site-header--color-transparent).
   ================================================================= */

.site-header--color-gradient-light {
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.7) 0%,
		rgba(255, 255, 255, 0) 100%
	);
}

.site-header--color-gradient-dark {
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.7) 0%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* =================================================================
   7f. Hero offset for transparent/gradient headers
   When the header is absolute, the first content block (hero/pageheader)
   needs extra top padding so content isn't hidden behind the header.

   :has() targets the template-part wrapper that contains .site-header,
   then the next sibling (+) which holds the page content.
   ================================================================= */

.wp-block-template-part:has(
		:is(
			.site-header--color-transparent,
			.site-header--color-gradient-light,
			.site-header--color-gradient-dark
		)
	)
	+ *
	.hero,
.wp-block-template-part:has(
		:is(
			.site-header--color-transparent,
			.site-header--color-gradient-light,
			.site-header--color-gradient-dark
		)
	)
	+ *
	.pageheader {
	padding-top: 5rem;
}

/* Stacked layout is taller — more offset */
.wp-block-template-part:has(
		.site-header--layout-stacked:is(
				.site-header--color-transparent,
				.site-header--color-gradient-light,
				.site-header--color-gradient-dark
			)
	)
	+ *
	.hero,
.wp-block-template-part:has(
		.site-header--layout-stacked:is(
				.site-header--color-transparent,
				.site-header--color-gradient-light,
				.site-header--color-gradient-dark
			)
	)
	+ *
	.pageheader {
	padding-top: 7.5rem;
}

@media (min-width: 48rem) {
	.wp-block-template-part:has(
			:is(
				.site-header--color-transparent,
				.site-header--color-gradient-light,
				.site-header--color-gradient-dark
			)
		)
		+ *
		.hero,
	.wp-block-template-part:has(
			:is(
				.site-header--color-transparent,
				.site-header--color-gradient-light,
				.site-header--color-gradient-dark
			)
		)
		+ *
		.pageheader {
		padding-top: 11rem;
		padding-bottom: 5rem;
	}

	.wp-block-template-part:has(
			.site-header--layout-stacked:is(
					.site-header--color-transparent,
					.site-header--color-gradient-light,
					.site-header--color-gradient-dark
				)
		)
		+ *
		.hero,
	.wp-block-template-part:has(
			.site-header--layout-stacked:is(
					.site-header--color-transparent,
					.site-header--color-gradient-light,
					.site-header--color-gradient-dark
				)
		)
		+ *
		.pageheader {
		padding-top: 16rem;
		padding-bottom: 8rem;
	}
}

/* =================================================================
   8. Footer
   Layouts (via render_block): --layout-columns | --layout-centered | --layout-minimal
   Colors:  --color-light | --color-dark | --color-primary
   Logo:    --logo-sm | --logo-md | --logo-lg
   ================================================================= */

footer {
	margin-block-start: 0;
}

.site-footer {
	flex-shrink: 0;
	background-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--0)
		var(--wp--preset--spacing--32);
}

/* --- Links --- */
.site-footer a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

/* --- Top section --- */
.site-footer__top {
	margin-bottom: var(--wp--preset--spacing--64);
}

.site-footer__columns {
	gap: var(--wp--preset--spacing--32);
}

/* --- Logo sizes --- */
.site-footer--logo-sm .wp-block-site-logo img {
	max-height: var(--wp--preset--spacing--32);
}
.site-footer--logo-md .wp-block-site-logo img {
	max-height: var(--wp--preset--spacing--40);
}
.site-footer--logo-lg .wp-block-site-logo img {
	max-width: 130px;
}

.site-footer .wp-block-site-logo img {
	height: auto;
	width: auto;
	display: block;
}

/* --- Footer brand block --- */
.footer-brand {
	margin-top: 0.75rem;
}

.footer-brand__tagline {
	margin: 0;
	font-size: var(--wp--preset--font-size--14);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
}

.footer-brand__cta {
	margin-top: var(--wp--preset--spacing--12);
}

/* --- Column titles --- */
.site-footer__title {
	/* font-family: var(--wp--preset--font-family--secondary);
	color: var(--wp--preset--color--text); */
	font-size: var(--wp--preset--font-size--18);
	font-weight: 800;
	/* letter-spacing: -0.0625rem; */
	margin-bottom: var(--wp--preset--spacing--12);
}

/* --- Navigation lists --- */
.site-footer__nav {
	margin-block-start: var(--wp--preset--spacing--16);
}

.site-footer__nav .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--14);
	font-weight: var(--fw-regular);
	color: var(--wp--preset--color--text);
}

.site-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

/* --- Schedule/contact info --- */
.footer-contact {
	margin-block-start: var(--wp--preset--spacing--16);
}

/* --- Bottom (credits + legal) --- */
.site-footer__bottom {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: var(--wp--preset--spacing--32);
	padding-top: var(--wp--preset--spacing--16);
}

.site-footer__bottom .footer-credits {
	font-size: var(--wp--preset--font-size--12);
	color: var(--wp--preset--color--white);
	margin: 0;
}

.site-footer__bottom .footer-credits .footer-credits__dev {
	color: #B1A7A3;
}

.footer-credits__sep {
	margin-inline: 0.5em;
	opacity: 0.4;
}

.site-footer__legal .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--12);
	color: var(--wp--preset--color--text-muted);
}

.site-footer__legal .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

.site-footer__legal li {
	margin-bottom: 0;
}

/* =================================================================
   8a. Layout: Columns (default)
   4-col: brand | nav | nav | contact
   ================================================================= */

/* (Default structure handles this) */

/* =================================================================
   8b. Layout: Centered
   Everything stacked and centered: logo, tagline, social, credits
   ================================================================= */

.site-footer--layout-centered .site-footer__top {
	text-align: center;
}

.site-footer--layout-centered .site-footer__columns {
	flex-direction: column;
	align-items: center;
}

/* Hide nav + contact columns, show only brand */
.site-footer--layout-centered .site-footer__col--nav,
.site-footer--layout-centered .site-footer__col--contact {
	display: none;
}

.site-footer--layout-centered .site-footer__col--brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 28rem;
}

.site-footer--layout-centered .footer-brand {
	text-align: center;
}

.site-footer--layout-centered .site-footer__bottom {
	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

/* =================================================================
   8c. Layout: Minimal
   Just credits + legal in one line
   ================================================================= */

.site-footer--layout-minimal .site-footer__top {
	display: none;
}

.site-footer--layout-minimal {
	padding: 1rem 0;
}

.site-footer--layout-minimal .site-footer__bottom {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

/* =================================================================
   8d. Color: Light (default)
   ================================================================= */

/* (Default styles) */

/* =================================================================
   8e. Color: Dark
   ================================================================= */

.site-footer--color-dark {
	background-color: var(--wp--preset--color--bg-dark);
	color: rgba(255, 255, 255, 0.85);
}

.site-footer--color-dark a {
	color: rgba(255, 255, 255, 0.85);
}

.site-footer--color-dark a:hover,
.site-footer--color-dark a:focus {
	color: var(--wp--preset--color--white);
}

.site-footer--color-dark .site-footer__title {
	color: var(--wp--preset--color--white);
}

.site-footer--color-dark .site-footer__nav .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.75);
}

.site-footer--color-dark
	.site-footer__nav
	.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--white);
}

.site-footer--color-dark .footer-brand__tagline {
	color: rgba(255, 255, 255, 0.6);
}

.site-footer--color-dark .footer-contact__social-link {
	color: rgba(255, 255, 255, 0.6);
}

.site-footer--color-dark .footer-contact__social-link:hover {
	color: var(--wp--preset--color--white);
}

.site-footer--color-dark .footer-brand__cta {
	--btn-fg: var(--wp--preset--color--white);
	--btn-fg-hover: var(--wp--preset--color--bg-dark);
	--btn-bg-hover: var(--wp--preset--color--white);
	--btn-border: rgba(255, 255, 255, 0.35);
	--btn-border-hover: var(--wp--preset--color--white);
}

.site-footer--color-dark .footer-contact__center {
	color: rgba(255, 255, 255, 0.75);
}

.site-footer--color-dark .site-footer__bottom {
	border-color: rgba(255, 255, 255, 0.15);
}

.site-footer--color-dark .footer-credits,
.site-footer--color-dark
	.site-footer__legal
	.wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.5);
}

.site-footer--color-dark
	.site-footer__legal
	.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--white);
}

/* =================================================================
   8f. Color: Primary
   ================================================================= */

.site-footer--color-primary {
	background-color: var(--wp--preset--color--primary);
	color: rgba(255, 255, 255, 0.8);
}

.site-footer--color-primary a {
	color: rgba(255, 255, 255, 0.8);
}

.site-footer--color-primary a:hover {
	color: var(--wp--preset--color--white);
}

.site-footer--color-primary .site-footer__title {
	color: var(--wp--preset--color--white);
}

.site-footer--color-primary
	.site-footer__nav
	.wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.8);
}

.site-footer--color-primary
	.site-footer__nav
	.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--white);
}

.site-footer--color-primary .footer-brand__tagline {
	color: rgba(255, 255, 255, 0.7);
}

.site-footer--color-primary .footer-contact__social-link {
	color: rgba(255, 255, 255, 0.7);
}

.site-footer--color-primary .footer-contact__social-link:hover {
	color: var(--wp--preset--color--white);
}

.site-footer--color-primary .footer-brand__cta {
	--btn-fg: var(--wp--preset--color--white);
	--btn-fg-hover: var(--wp--preset--color--primary);
	--btn-bg-hover: var(--wp--preset--color--white);
	--btn-border: rgba(255, 255, 255, 0.4);
	--btn-border-hover: var(--wp--preset--color--white);
}

.site-footer--color-primary .footer-contact__center {
	color: rgba(255, 255, 255, 0.8);
}

.site-footer--color-primary .site-footer__bottom {
	border-color: rgba(255, 255, 255, 0.2);
}

.site-footer--color-primary .footer-credits,
.site-footer--color-primary
	.site-footer__legal
	.wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.5);
}

.site-footer--color-primary
	.site-footer__legal
	.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--white);
}

/* =================================================================
   8g. Footer responsive
   ================================================================= */

/* Mobile-first responsive footer */
.site-footer__columns {
	flex-direction: column;
}

.site-footer__bottom {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

@media (min-width: 48rem) {
	.site-footer {
		padding: var(--wp--preset--spacing--64) 0 var(--wp--preset--spacing--32);
	}

	.site-footer__columns {
		flex-direction: row;
	}

	.site-footer__bottom {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--16);
	}
}

/* =================================================================
   9. Header Section component
   ================================================================= */
.header-section {
	margin-bottom: var(--wp--preset--spacing--32);
}

/* Alignment */
.header-section--align-center {
	text-align: center;
}

.header-section--align-left {
	text-align: left;
}

.header-section--align-right {
	text-align: right;
}

/* Width */
.header-section--align-center.header-section--width-narrow {
	margin-inline: auto;
}

.header-section--align-right.header-section--width-narrow {
	margin-inline-start: auto;
}

.header-section--width-full {
	max-width: 100%;
}

/* Tagline */
.header-section__tagline {
	font-size: var(--wp--preset--font-size--22);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: normal;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 var(--wp--preset--spacing--8);
}

/* Tagline below title: subtitle style */
.header-section__title + .header-section__tagline {
	font-size: var(--wp--preset--font-size--22);
	font-weight: var(--fw-medium);
	text-transform: uppercase;
	letter-spacing: normal;
	color: var(--wp--preset--color--text-muted);
	margin: -0.5rem 0 var(--wp--preset--spacing--16);
}

/* Title */
.header-section__title {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--30);
	font-weight: 700;
	line-height: 1.4;
	text-wrap: balance;
	margin: 0 0 1rem;
	letter-spacing: 0.03rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* Description */
.header-section__description {
	font-size: var(--wp--preset--font-size--16);
	line-height: 1.6;
	color: var(--wp--preset--color--text);
	text-wrap: pretty;
	margin: 0;
}

.header-section--align-center .header-section__description {
	max-width: 90%;
	margin-inline: auto;
}

/* Button (optional) */
.header-section__cta {
	margin-top: var(--wp--preset--spacing--24);
}

/* Mobile */
@media (max-width: 48rem) {
	.header-section--width-narrow {
		max-width: 100%;
	}
}

/* =================================================================
   9b. TOC component
   ================================================================= */
nav.toc {
	padding-bottom: 1rem;
}

/* =================================================================
   10. Error 404 page
   ================================================================= */
.error-404__title {
	margin-bottom: var(--wp--preset--spacing--16);
}

.error-404__text {
	font-size: var(--wp--preset--font-size--16);
	line-height: 1.6;
	color: var(--wp--preset--color--text-body);
	text-wrap: balance;
	margin-bottom: var(--wp--preset--spacing--16);
}

.wp-block-search__inside-wrapper {
	margin-bottom: var(--wp--preset--spacing--32);
}

.error-404__search button {
	transition: opacity 0.2s ease;
}

.error-404__search button:hover {
	opacity: 0.8;
}

.error-404__btn a {
	background-color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	transition: transform 0.2s ease;
}

.error-404__btn a:hover {
	transform: scale(0.98);
	text-decoration: none;
}

@media (min-width: 48rem) {
	.error404 {
		margin-block-start: 8rem !important;
	}
}

/* =================================================================
   11. Accessibility
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* =================================================================
   12. Scroll-to-top
   ================================================================= */
.scroll-top {
	position: fixed;
	bottom: 1.75rem;
	left: 1.75rem;
	z-index: var(--z-sticky);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0s linear 0.25s,
		background-color 0.2s ease;
}

.scroll-top--visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0s linear 0s,
		background-color 0.2s ease;
}

.scroll-top:hover {
	background-color: var(
		--wp--preset--color--primary-dark,
		var(--wp--preset--color--primary)
	);
}

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

/* =================================================================
   13. Float CTA (call + WhatsApp)
   ================================================================= */
.float-cta {
	position: fixed;
	bottom: 1.75rem;
	right: 1.75rem;
	z-index: var(--z-overlay);
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 0.75rem;
}

.float-cta__btn {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--wp--preset--color--white);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.float-cta__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
	color: var(--wp--preset--color--white);
}

.float-cta__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.float-cta__btn--call {
	background-color: var(--wp--preset--color--primary);
}

.float-cta__btn--whatsapp {
	background-color: #25d366;
}

@media (prefers-reduced-motion: reduce) {
	.float-cta__btn {
		transition: none;
	}
}

/* =================================================================
   14. Float Booking — pill trigger + panel popup
   ================================================================= */

/* Pill trigger — se añade al final de la columna .float-cta */
.float-cta__btn--booking {
	width: auto;
	height: auto;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--10, 0.625rem)
		var(--wp--preset--spacing--20, 1.25rem);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--12, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	border: none;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--motion--duration--base, 200ms) ease,
		transform var(--wp--custom--motion--duration--base, 200ms) ease,
		box-shadow var(--wp--custom--motion--duration--base, 200ms) ease;
}

.float-cta__btn--booking:hover {
	background-color: var(--wp--preset--color--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
	color: var(--wp--preset--color--white);
}

.float-cta__btn--booking:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Panel — posicionado absolutamente sobre la columna de botones */
.float-booking {
	position: absolute;
	bottom: calc(100% + var(--wp--preset--spacing--12, 0.75rem));
	right: 0;
	width: 18rem;
	background-color: var(--wp--preset--color--bg);
	border-radius: var(--wp--custom--radius--8);
	box-shadow:
		0 4px 6px rgba(49, 41, 36, 0.06),
		0 12px 40px rgba(49, 41, 36, 0.14);
	padding: var(--wp--preset--spacing--24, 1.5rem);
	opacity: 0;
	visibility: hidden;
	transform: translateY(var(--wp--preset--spacing--8, 0.5rem));
	transition:
		opacity var(--wp--custom--motion--duration--slow, 320ms)
			cubic-bezier(0.22, 1, 0.36, 1),
		transform var(--wp--custom--motion--duration--slow, 320ms)
			cubic-bezier(0.22, 1, 0.36, 1),
		visibility var(--wp--custom--motion--duration--slow, 320ms);
}

.float-booking.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.float-booking__close {
	position: absolute;
	top: var(--wp--preset--spacing--10, 0.625rem);
	right: var(--wp--preset--spacing--10, 0.625rem);
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--text-muted);
	padding: var(--wp--preset--spacing--4, 0.25rem);
	border-radius: var(--wp--custom--radius--4);
	line-height: 1;
	transition: color var(--wp--custom--motion--duration--fast, 120ms) ease;
}

.float-booking__close:hover {
	color: var(--wp--preset--color--text);
}

.float-booking__title {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--11, 0.6875rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 var(--wp--preset--spacing--16, 1rem);
	padding-bottom: var(--wp--preset--spacing--12, 0.75rem);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.float-booking__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--12, 0.75rem);
	padding: var(--wp--preset--spacing--10, 0.625rem) 0;
	font-size: var(--wp--preset--font-size--14, 0.875rem);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: color var(--wp--custom--motion--duration--fast, 120ms) ease;
}

.float-booking__item:last-of-type {
	border-bottom: none;
}

.float-booking__item:hover {
	color: var(--wp--preset--color--primary);
}

.float-booking__item-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--accent);
}

.float-booking__cta {
	display: block;
	text-align: center;
	margin-top: var(--wp--preset--spacing--16, 1rem);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--12, 0.75rem)
		var(--wp--preset--spacing--20, 1.25rem);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--12, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		background-color var(--wp--custom--motion--duration--base, 200ms) ease,
		transform var(--wp--custom--motion--duration--base, 200ms) ease;
}

.float-booking__cta:hover {
	background-color: var(--wp--preset--color--primary-dark);
	transform: translateY(-1px);
	color: var(--wp--preset--color--white);
}

@media (prefers-reduced-motion: reduce) {
	.float-cta__btn--booking,
	.float-booking,
	.float-booking__close,
	.float-booking__item,
	.float-booking__cta {
		transition: none;
	}
}

/* =================================================================
   15. Tables
   ================================================================= */

.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table table,
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	border: none;
	font-size: var(--wp--preset--font-size--15);
	line-height: 1.6;
}

.wp-block-table th,
.wp-block-table td,
.entry-content th,
.entry-content td {
	padding: 0.75rem 1rem;
	text-align: left;
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	vertical-align: top;
}

.wp-block-table thead {
	border-color: var(--wp--preset--color--border);
}

.wp-block-table thead th,
.entry-content thead th {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.wp-block-table tbody tr:last-child td,
.entry-content tbody tr:last-child td {
	border-bottom: none;
}

.wp-block-table tbody tr:hover td,
.entry-content tbody tr:hover td {
	background-color: var(--wp--preset--color--bg-secondary);
}

.wp-block-table tfoot td,
.entry-content tfoot td {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-muted);
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* =================================================================
   15. Form Gravity Forms
   ================================================================= */
.gform_wrapper {
	background-color: transparent !important;
	margin: 0 auto;
	padding-top: var(--wp--preset--spacing--8);
	padding-bottom: var(--wp--preset--spacing--32);
}

.gform_wrapper form {
	margin: 0 auto;
	text-align: left;
}

.gform_fields {
	row-gap: var(--wp--preset--spacing--10) !important;
}

.gform_button {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--white) !important;
	border: none;
	padding: 0.75rem 1.5rem;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	border-radius: 0 !important;
	cursor: pointer;
	width: 100% !important;
	transition: transform 0.2s ease !important;
	border-radius: 50px !important;
    height: 53px !important;
}

.gform_button:hover {
	transform: scale(0.98) !important;
}

textarea,
.gfield input {
	border-radius: 0 !important;
	border: none !important;
}

textarea:focus,
.gfield input:focus-within {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.gform_confirmation_message {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--15);
	font-weight: 600;
	font-style: italic;
	color: var(--wp--preset--color--accent);
	text-wrap: balance;
	line-height: 1.6;
}

.wrap_svl_center_box {
	width: 100%!important;
}
.wrap_svl_center_box .wrap_svl {
	width: 100%!important;
}

/* =================================================================
   16. Media queries
   ================================================================= */

/* Container responsive — uses theme.json custom tokens */

/* Móvil: más aire lateral y box-sizing explícito para que el padding
   quede dentro del ancho y el contenido no sobresalga. */
@media (max-width: 47.9375rem) {
	.container {
		padding-left: var(--wp--preset--spacing--24);
		padding-right: var(--wp--preset--spacing--24);
		box-sizing: border-box;
	}
}

@media (min-width: 640px) {
	.container {
		max-width: var(--wp--custom--container--sm);
	}
}
@media (min-width: 768px) {
	.container {
		max-width: var(--wp--custom--container--md);
	}
}
@media (min-width: 1024px) {
	.container {
		max-width: var(--wp--custom--container--lg);
	}
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.site-header .wp-block-site-logo a,
	.site-header .wp-block-site-logo img {
		height: 1.55rem;
	}
}
@media (min-width: 1280px) {
	.container {
		max-width: var(--wp--custom--container--xl);
	}
}
@media (min-width: 1536px) {
	.container {
		max-width: var(--wp--custom--container--xl);
	}
}

/* Desktop (64rem / 1024px) — desktop nav */
@media (min-width: 64rem) {
	/* Navbar hover underline animation */
	.site-header__nav .wp-block-navigation-item__content {
		position: relative;
	}

	.site-header__nav .wp-block-navigation-item__content::after {
		content: "";
		display: block;
		position: absolute;
		bottom: -2px;
		left: 50%;
		width: 0;
		height: 2px;
		background: currentColor;
		transition:
			width 0.3s ease,
			left 0.3s ease,
			background-color 0.3s ease;
	}

	.site-header__nav .wp-block-navigation-item__content:hover::after,
	.site-header__nav
		.wp-block-navigation-item.current-menu-item
		> .wp-block-navigation-item__content::after {
		width: 100%;
		left: 0;
	}

	.site-header__nav .wp-block-navigation-item__content:hover::after {
		background: var(--wp--preset--color--white);
	}

	.site-header__nav
		.wp-block-navigation-item.current-menu-item
		> .wp-block-navigation-item__content::after {
		background: var(--wp--preset--color--gold);
	}

	/* ---------------------------------------------------------------
	   Dropdown submenu (desktop only)
	   HTML: .wp-block-navigation-submenu > button + ul.submenu-container
	   --------------------------------------------------------------- */
	.site-header__nav .wp-block-navigation-item.has-child {
		position: relative;
	}

	/* Parent link doesn't get the underline animation (chevron marks it) */
	.site-header__nav
		.wp-block-navigation-submenu
		> .wp-block-navigation-item__content::after {
		display: none;
	}

	/* Chevron toggle button */
	.site-header__nav .wp-block-navigation__submenu-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		height: auto;
		padding: 0;
		margin-left: 0.375rem;
		background: transparent;
		border: 0;
		color: inherit;
		cursor: pointer;
		transition: transform 0.2s ease;
	}

	.site-header__nav .wp-block-navigation__submenu-icon svg {
		width: 0.625rem;
		height: 0.625rem;
		stroke: var(--wp--preset--color--white);
		fill: none;
	}

	/* Chevron oscuro cuando el header tiene fondo claro: variante "Claro",
	   "Degradado claro", y las transparentes/oscuras al colapsar a blanco
	   con el scroll (.site-header--scrolled). */
	.site-header--color-light
		.site-header__nav
		.wp-block-navigation__submenu-icon svg,
	.site-header--color-gradient-light
		.site-header__nav
		.wp-block-navigation__submenu-icon svg,
	.site-header--color-transparent.site-header--scrolled
		.site-header__nav
		.wp-block-navigation__submenu-icon svg,
	.site-header--color-gradient-dark.site-header--scrolled
		.site-header__nav
		.wp-block-navigation__submenu-icon svg {
		stroke: var(--wp--preset--color--text);
	}

	.site-header__nav .wp-block-navigation__submenu-icon[aria-expanded="true"] {
		transform: rotate(180deg);
	}

	/* Dropdown container — width auto but never too narrow */
	.site-header__nav .wp-block-navigation__submenu-container {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 11rem;
		max-width: 20rem;
		width: max-content;
		margin: 0;
		padding: var(--wp--preset--spacing--8) 0;
		list-style: none;
		background-color: var(--wp--preset--color--white);
		border: 0;
		border-radius: var(--wp--custom--radius--4, 0.25rem);
		box-shadow:
			0 10px 30px -12px rgba(0, 0, 0, 0.12),
			0 4px 12px -4px rgba(0, 0, 0, 0.08);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition:
			opacity 0.15s ease,
			transform 0.15s ease,
			visibility 0s linear 0.15s;
		pointer-events: none;
		z-index: var(--z-dropdown);
	}

	/* Open states: hover, keyboard focus, explicit click (aria-expanded) */
	.site-header__nav
		.wp-block-navigation-submenu:hover
		> .wp-block-navigation__submenu-container,
	.site-header__nav
		.wp-block-navigation-submenu:focus-within
		> .wp-block-navigation__submenu-container,
	.site-header__nav
		.wp-block-navigation__submenu-icon[aria-expanded="true"]
		+ .wp-block-navigation__submenu-container {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
		transition:
			opacity 0.15s ease,
			transform 0.15s ease,
			visibility 0s linear 0s;
	}

	/* Dropdown items */
	.site-header__nav
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item {
		margin: 0;
	}

	.site-header__nav
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content {
		display: block;
		padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--20);
		font-size: var(--wp--preset--font-size--13);
		font-weight: var(--fw-regular);
		line-height: 1.5;
		letter-spacing: 0.01em;
		text-transform: none;
		color: var(--wp--preset--color--text);
		white-space: nowrap;
		transition:
			background-color 0.15s ease,
			color 0.15s ease;
	}

	.site-header__nav
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content:hover,
	.site-header__nav
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content:focus {
		background-color: var(--wp--preset--color--bg-secondary);
		color: var(--wp--preset--color--primary);
		text-decoration: none;
	}

	/* Submenu items never carry the animated underline */
	.site-header__nav
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content::after {
		display: none;
	}

	/*
	 * CTA nav link — last menu item styled as button.
	 * Active when .site-header--nav-cta is on the header.
	 */
	.site-header--nav-cta
		.site-header__nav
		.wp-block-navigation-link:last-child
		.wp-block-navigation-item__content::after {
		display: none;
	}

	.site-header--nav-cta
		.site-header__nav
		.wp-block-navigation-link:last-child
		a {
		display: flex;
		align-items: center;
		padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
		background-color: var(--wp--preset--color--bg-dark);
		color: var(--wp--preset--color--white);
		font-weight: var(--fw-medium);
		font-size: var(--wp--preset--font-size--13);
		line-height: 1.5;
		border-radius: var(--wp--custom--radius--0);
		transition: background-color 0.2s ease;
	}

	.site-header--nav-cta
		.site-header__nav
		.wp-block-navigation-link:last-child
		a:hover,
	.site-header--nav-cta
		.site-header__nav
		.wp-block-navigation-link:last-child
		a:focus {
		background-color: var(--wp--preset--color--text);
		color: var(--wp--preset--color--white);
		text-decoration: none;
	}

	.site-header--nav-cta
		.site-header__nav
		.wp-block-navigation-link:last-child
		a:focus-visible {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: 2px;
	}

	/* Dark/transparent: nav CTA uses white style */
	.site-header--color-dark.site-header--nav-cta
		.wp-block-navigation-link:last-child
		a,
	.site-header--color-transparent.site-header--nav-cta
		.wp-block-navigation-link:last-child
		a {
		background-color: var(--wp--preset--color--bg-dark);
		color: var(--wp--preset--color--white);
	}

	.site-header--color-dark.site-header--nav-cta
		.wp-block-navigation-link:last-child
		a:hover,
	.site-header--color-transparent.site-header--nav-cta
		.wp-block-navigation-link:last-child
		a:hover {
		background-color: var(--wp--preset--color--text);
	}

	/* Stacked: larger logo on desktop */
	.site-header--layout-stacked .wp-block-site-logo a,
	.site-header--layout-stacked .wp-block-site-logo img {
		height: var(--wp--preset--spacing--64);
	}

	/* Centered: CTA visible on desktop */
	.site-header--layout-centered .header-cta {
		display: flex;
	}
}

/* Mobile: stacked & centered revert to classic flex */
@media (max-width: 63.9375rem) {
	.site-header--layout-centered .site-header__bar,
	.site-header--layout-stacked .site-header__bar {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.site-header--layout-centered .header-cta,
	.site-header--layout-stacked .header-cta {
		display: none;
	}
}

/* =================================================================
   Mobile drawer — slide from right (below 1024px)
   ================================================================= */

@media (max-width: 63.9375rem) {
	/* 1 — Backdrop (ocupa toda la pantalla, oscurece el contenido detrás).
	   The panel's slide-in is driven by JS (assets/js/main.js, see notes
	   there) — a CSS `animation` tied to this class doesn't play reliably
	   because WordPress's Interactivity API toggles the class reactively
	   rather than via a plain classList.add(). The backdrop fade stays a
	   plain CSS transition (simple color change, doesn't need JS, and
	   writing its color from the same JS frame as the panel's transform
	   is what broke the panel's animation in the first place). */
	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
		justify-content: flex-end;
		align-items: stretch;
		padding: 0;
		background-color: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(3px);
		transition: background-color 0.6s ease;
	}

	/* 2 — Panel lateral (see note above — slide-in is JS-driven) */
	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-close {
		/* width: min(82vw, 22rem); */
		height: 100%;
		background-color: var(--wp--preset--color--bg-dark);
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
	}
	a {
		overflow-wrap: break-word;
	}

	/* 3 — Dialog: columna que rellena el panel */
	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: var(--wp--preset--spacing--24);
		gap: 0;
	}

	/* 4 — Botón cerrar */
	.site-header__nav .wp-block-navigation__responsive-container-close {
		align-self: flex-end;
		flex-shrink: 0;
		width: 2.25rem;
		height: 2.25rem;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: var(--wp--preset--spacing--32);
		padding: 0;
		color: rgba(255, 255, 255, 0.65);
		background-color: rgba(255, 255, 255, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.15);
		border-radius: 50%;
		cursor: pointer;
		transition:
			background-color 0.2s ease,
			color 0.2s ease;
			margin-right: 15px;
	}

	.site-header__nav .wp-block-navigation__responsive-container-close:hover,
	.site-header__nav
		.wp-block-navigation__responsive-container-close:focus-visible {
		background-color: rgba(255, 255, 255, 0.16);
		color: var(--wp--preset--color--white);
	}

	/* 5 — Lista de enlaces */
	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	/* 6 — Cada enlace */
	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		padding: var(--wp--preset--spacing--16) 0;
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.75);
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		transition:
			color 0.15s ease,
			padding-left 0.15s ease;
	}

	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content:hover,
	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content:focus-visible {
		color: var(--wp--preset--color--white);
		padding-left: var(--wp--preset--spacing--12);
	}

	/* 7 — Enlace activo */
	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.current-menu-item
		> .wp-block-navigation-item__content {
		color: var(--wp--preset--color--primary);
	}

	/* 8 — Submenús: fila con el link + botón chevron aparte.
	   El link navega, el chevron abre/cierra — nunca el mismo elemento.
	   NOTE: ".wp-block-navigation-submenu" is present on BOTH the <li>
	   wrapper AND its own <ul class="...submenu-container...submenu">,
	   so these rules are scoped with ".has-child" (only on the <li>) to
	   avoid also turning the submenu list itself into a flex row. */
	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.has-child {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		flex-direction: row;
        justify-content: end;
		position: relative;
        right: -15px;
	}

	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.has-child ul li a {
			padding-right: 15px !important;
		}

	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.has-child
		> .wp-block-navigation-item__content {
		flex: 1 1 auto;
		border-bottom: 0;
        justify-content: end;
	}

	/* Chevron toggle button */
	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 2.75rem;
		height: 2.75rem;
		margin: 0;
		padding: 0;
		background: transparent;
		border: 0;
		color: rgba(255, 255, 255, 0.75);
		cursor: pointer;
		transition:
			transform 0.2s ease,
			color 0.15s ease;
	}

	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-icon:hover,
	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-icon:focus-visible {
		color: var(--wp--preset--color--white);
	}

	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-icon svg {
		width: 0.75rem;
		height: 0.75rem;
		stroke: currentColor;
		fill: none;
	}

	/* Rotate the chevron when open (aria-expanded is toggled by core's JS) */
	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-icon[aria-expanded="true"] {
		transform: rotate(180deg);
	}

	/* Submenu list: closed by default, only shown when its toggle is
	   expanded. WordPress core ships its own rule for the overlay that
	   forces submenus permanently open (opacity/visibility/overflow all
	   set to "visible", with higher specificity than a plain 4-class
	   selector) — the !important overrides below are needed to actually
	   win against that and make it collapsible. */
	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-container {
		flex-basis: 100%;
		max-height: 0 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		overflow: hidden !important;
		margin: 0;
		padding: 0 !important;
		list-style: none;
		pointer-events: none;
		transition: max-height 0.2s ease, opacity 0.2s ease;
	}

	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-icon[aria-expanded="true"]
		+ .wp-block-navigation__submenu-container {
		max-height: 60rem !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto;
	}

	/* Nested items: smaller, indented, no uppercase — visually distinct
	   from the top-level rows. */
	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content {
		padding: var(--wp--preset--spacing--12) 0 var(--wp--preset--spacing--12)
			var(--wp--preset--spacing--16);
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: normal;
		text-transform: none;
		color: rgba(255, 255, 255, 0.6);
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	}

	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content:hover,
	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content:focus-visible {
		color: var(--wp--preset--color--white);
	}

	.site-header__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item:last-child
		> .wp-block-navigation-item__content {
		border-bottom: 0;
	}

}

/* =================================================================
   17. Reveal on scroll
   No es el bloque entero el que anima como una sola pieza — el fondo
   del bloque nunca se toca, siempre está ahí. Lo que anima, con un
   retraso creciente por cada uno (por eso el "transition-delay" no
   está aquí: lo calcula y lo escribe assets/js/main.js elemento a
   elemento), son sus hijos de texto y de imagen, por separado:

   - Texto (títulos, tagline, descripciones...): fundido + desenfoque
     + un pequeño desplazamiento hacia arriba.
   - Imágenes: solo fundido, sin desenfoque ni movimiento — un blur
     fuerte sobre una foto grande pesa de más y no aporta nada.

   Las clases ".js-reveal-text"/".js-reveal-image" las añade JS, nunca
   vienen en el HTML servido por PHP — si JS fallara por lo que sea,
   nada se queda invisible: el contenido se muestra normal, sin animar.
   ================================================================= */
.js-reveal-text {
	/* Aceleradas 2026-09 — valor anterior: 900ms (restaurar aquí y en
	   .js-reveal-image + REVEAL_STAGGER_STEP/BASE_DELAY de main.js). */
	--reveal-duration: 500ms;
	--reveal-distance: 1.5rem;
	--reveal-blur: 100px;

	opacity: 0;
	transform: translateY(var(--reveal-distance));
	filter: blur(var(--reveal-blur));
	transition:
		opacity var(--reveal-duration) var(--wp--custom--motion--easing--standard, ease),
		transform var(--reveal-duration) var(--wp--custom--motion--easing--standard, ease),
		filter var(--reveal-duration) var(--wp--custom--motion--easing--standard, ease);
	will-change: opacity, transform, filter;
}

.js-reveal-text.is-revealed {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
	will-change: auto;
}

.js-reveal-image {
	--reveal-duration: 500ms; /* antes 900ms */

	opacity: 0;
	transition: opacity var(--reveal-duration) var(--wp--custom--motion--easing--standard, ease);
	will-change: opacity;
}

.js-reveal-image.is-revealed {
	opacity: 1;
	will-change: auto;
}

/* Excepción de "Timeline": ahí los eventos alternan lado (impares con
   texto a la izquierda/foto a la derecha, pares al revés — ver
   blocks/core/timeline/style.css), así que en vez de subir entran desde
   su lado hacia el centro — texto e imagen por igual, incluida la foto
   (que en el resto del sitio solo lleva fundido). Las añade
   assets/js/main.js solo en el layout de escritorio del timeline. */
.js-reveal-text.js-reveal-from-left,
.js-reveal-image.js-reveal-from-left {
	transform: translateX(-3rem);
}

.js-reveal-text.js-reveal-from-right,
.js-reveal-image.js-reveal-from-right {
	transform: translateX(3rem);
}

.js-reveal-text.js-reveal-from-left.is-revealed,
.js-reveal-text.js-reveal-from-right.is-revealed,
.js-reveal-image.js-reveal-from-left.is-revealed,
.js-reveal-image.js-reveal-from-right.is-revealed {
	transform: translateX(0);
}

/* La imagen normal solo transiciona "opacity" (nunca se mueve) — con la
   dirección lateral sí hay transform de por medio, así que aquí se
   añade a la lista de propiedades a transicionar. */
.js-reveal-image.js-reveal-from-left,
.js-reveal-image.js-reveal-from-right {
	transition:
		opacity var(--reveal-duration) var(--wp--custom--motion--easing--standard, ease),
		transform var(--reveal-duration) var(--wp--custom--motion--easing--standard, ease);
}

/* Los botones de "Pedir cita" (booking-cta__btn) ya traen su propia
   transición de hover (background-color/color) — como ambas reglas
   declaran "transition" con la misma especificidad (una sola clase),
   la que cargue después ganaría entera y se perdería la otra. Esta
   combinación de las dos clases tiene más especificidad y las reúne a
   todas, así no se pierde ni el hover ni el reveal. */
.booking-cta__btn.js-reveal-text {
	transition:
		opacity var(--reveal-duration) var(--wp--custom--motion--easing--standard, ease),
		transform var(--reveal-duration) var(--wp--custom--motion--easing--standard, ease),
		filter var(--reveal-duration) var(--wp--custom--motion--easing--standard, ease),
		background-color 0.15s ease,
		color 0.15s ease;
}

/* "Marcas", "Ficha de Catálogo" y "Galería con miniaturas": aquí la foto
   ES el contenido (no algo que acompaña al texto), así que el fundido
   solo apenas se notaba — se les añade un pequeño desplazamiento hacia
   arriba, igual que al texto, pero sin blur (sigue sin compensar sobre
   una foto grande). */
.brands .js-reveal-image,
.catalogo-sheet .js-reveal-image,
.gallery-tumbs .js-reveal-image {
	--reveal-distance: 1.5rem;

	transform: translateY(var(--reveal-distance));
	transition:
		opacity var(--reveal-duration) var(--wp--custom--motion--easing--standard, ease),
		transform var(--reveal-duration) var(--wp--custom--motion--easing--standard, ease);
}

.brands .js-reveal-image.is-revealed,
.catalogo-sheet .js-reveal-image.is-revealed,
.gallery-tumbs .js-reveal-image.is-revealed {
	transform: translateY(0);
}

/* Bloques por ENCIMA del pliegue (el hero): se revelan una sola vez al
   cargar, no con el scroll — ver el comentario de prepareRevealElement()
   en assets/js/main.js. Usan "animation" en vez de "transition": el
   navegador conoce su propio estado "from" desde el momento en que se
   asigna la animación, sin importar cuándo ocurra eso respecto al primer
   pintado — con una transición normal (que necesita ver primero el
   estado inicial ya pintado y DESPUÉS el cambio a final) el resultado
   dependía de una carrera contra el propio pintado de la página y podía
   saltarse por completo. */
@keyframes reveal-onload-text {
	from {
		opacity: 0;
		transform: translateY(var(--reveal-distance));
		filter: blur(var(--reveal-blur));
	}
	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

@keyframes reveal-onload-image {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.js-reveal-text.js-reveal-onload {
	opacity: 0;
	transition: none;
	animation: reveal-onload-text var(--reveal-duration) var(--wp--custom--motion--easing--standard, ease) both;
	animation-delay: var(--reveal-onload-delay, 0ms);
}

.js-reveal-image.js-reveal-onload {
	opacity: 0;
	transition: none;
	animation: reveal-onload-image var(--reveal-duration) var(--wp--custom--motion--easing--standard, ease) both;
	animation-delay: var(--reveal-onload-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal-text,
	.js-reveal-image {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}

	.js-reveal-text.js-reveal-onload,
	.js-reveal-image.js-reveal-onload {
		animation: none;
	}
}