/*!
 * AVELUNEXA — bundle generado. NO EDITAR A MANO.
 * Fuente: fonts.css tokens.css base.css header-footer.css motion.css
 * Regenerar con: bash tools/build-css.sh
 */

/* ===== fonts.css ===== */
/**
 * AVELUNEXA — tipografías autohospedadas.
 *
 * Cero peticiones a fonts.googleapis.com y fonts.gstatic.com desde el frontend.
 *
 * Licencia: ambas familias son SIL Open Font License 1.1, que permite
 * expresamente la redistribución y el alojamiento propio.
 *   - Cormorant Garamond — Catharsis Fonts — OFL 1.1
 *   - Inter — Rasmus Andersson — OFL 1.1
 *
 * Ambas se sirven como FUENTE VARIABLE: un solo archivo por subset cubre todo
 * el rango de pesos. Declarar un @font-face por peso descargaría exactamente
 * los mismos bytes tres veces — se comprobó por checksum durante el despliegue.
 *
 * Subsets: solo latin y latin-ext. Cubren en-GB, it-IT, es-ES y fr-FR. Se
 * descartaron cyrillic, cyrillic-ext, greek, greek-ext y vietnamese porque
 * ningún mercado del roadmap los necesita. El unicode-range hace que el
 * navegador descargue únicamente el subset que realmente usa: un visitante
 * británico baja 85.9 KB, no los 199.9 KB almacenados.
 *
 * font-display: swap — el texto pinta de inmediato con la fuente de respaldo,
 * así una fuente lenta nunca bloquea el First Contentful Paint.
 *
 * NO EDITAR A MANO. Regenerar siguiendo docs/OPERATIONS.md.
 */

/* Inter - latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-variable-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-variable-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant Garamond - latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-variable-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond - latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-variable-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== tokens.css ===== */
/**
 * AVELUNEXA — design tokens.
 *
 * Custom properties only. Ningún componente debe usar un color, un espacio o
 * una duración que no salga de aquí.
 *
 * Naming: --av-<grupo>-<rol>.
 */

:root {
	/* =====================================================================
	 * MARCA
	 * ================================================================== */
	--av-color-navy: #0d1b2a;
	--av-color-gold: #d4af37;
	--av-color-ivory: #faf7f2;
	--av-color-blush: #ebc5c2;
	--av-color-gray: #a7a9ac;

	/* Escalas derivadas. Explícitas, no color-mix(), para que rendericen
	   idénticas en todos los navegadores. */
	--av-navy-900: #050c14;
	--av-navy-800: #0d1b2a;
	--av-navy-700: #16293c;
	--av-navy-600: #22384e;
	--av-navy-500: #35506b;
	--av-navy-050: rgba(13, 27, 42, 0.06);

	--av-gold-700: #7a5810;
	--av-gold-600: #a8862a;
	--av-gold-500: #d4af37;
	--av-gold-400: #e0c467;
	--av-gold-100: #f7eed6;

	--av-ivory-100: #ffffff;
	--av-ivory-200: #faf7f2;
	--av-ivory-300: #f4efe7;
	--av-ivory-400: #e8e0d4;

	--av-blush-400: #ebc5c2;
	--av-blush-200: #f6e4e2;

	--av-gray-800: #3d3f42;
	--av-gray-700: #5c5e61;
	--av-gray-500: #a7a9ac;
	--av-gray-600: #686b70;
	--av-gray-300: #d5d6d8;
	--av-gray-200: #e6e7e9;

	/* =====================================================================
	 * ROLES SEMÁNTICOS
	 * Los componentes referencian estos, nunca la paleta cruda.
	 * ================================================================== */
	--av-text-primary: var(--av-navy-800);
	--av-text-secondary: var(--av-gray-700);
	/* Terciario. El Cool Gray de marca (#A7A9AC) da 2.20:1 sobre ivory: es un
	   color de superficie y de borde, no de texto. #686B70 da 5.01:1 sobre
	   ivory y 4.67:1 sobre la superficie hundida. */
	--av-text-tertiary: var(--av-gray-600);
	--av-text-inverse: var(--av-ivory-200);
	--av-text-on-gold: var(--av-navy-900);

	/* Oro para TEXTO sobre claro. #D4AF37 da 1.9:1 y #A8862A 2.9:1; ninguno
	   pasa AA. #7A5810 da 6.08:1 sobre ivory. El oro de marca es superficie
	   o filete, nunca texto sobre fondo claro. */
	--av-text-accent: var(--av-gold-700);

	--av-surface-primary: var(--av-ivory-200);
	--av-surface-secondary: var(--av-ivory-300);
	--av-surface-raised: var(--av-ivory-100);
	--av-surface-inverse: var(--av-navy-800);
	--av-surface-accent: var(--av-blush-200);

	--av-border: var(--av-ivory-400);
	--av-border-strong: var(--av-gray-300);
	--av-border-inverse: rgba(250, 247, 242, 0.14);

	--av-accent: var(--av-gold-500);
	--av-accent-hover: var(--av-gold-600);

	/* Feedback — todos ≥ 4.5:1 sobre --av-surface-primary. */
	--av-success: #2f6d4f;
	--av-warning: #8a6410;
	--av-danger: #a12d2d;

	/* Foco: navy con halo dorado, visible sobre ivory, navy y oro. */
	--av-focus: var(--av-navy-800);
	--av-focus-halo: var(--av-gold-400);

	/* Alias retro-compatibles: había componentes escritos contra estos
	   nombres antes de unificar la nomenclatura. Se mantienen para no
	   romperlos y se resuelven al mismo valor. */
	--av-color-bg: var(--av-surface-primary);
	--av-color-bg-raised: var(--av-surface-raised);
	--av-color-bg-sunken: var(--av-surface-secondary);
	--av-color-bg-inverse: var(--av-surface-inverse);
	--av-color-text: var(--av-text-primary);
	--av-color-text-muted: var(--av-text-secondary);
	--av-color-text-inverse: var(--av-text-inverse);
	--av-color-text-on-gold: var(--av-text-on-gold);
	--av-color-accent: var(--av-accent);
	--av-color-accent-hover: var(--av-accent-hover);
	--av-color-accent-text: var(--av-text-accent);
	--av-color-border: var(--av-border);
	--av-color-border-strong: var(--av-border-strong);
	--av-color-soft: var(--av-color-blush);
	--av-color-success: var(--av-success);
	--av-color-warning: var(--av-warning);
	--av-color-danger: var(--av-danger);
	--av-color-info: var(--av-navy-600);
	--av-color-focus: var(--av-focus);
	--av-color-focus-contrast: var(--av-focus-halo);

	/* =====================================================================
	 * TIPOGRAFÍA
	 * ================================================================== */
	--av-font-display: 'Cormorant Garamond', 'Times New Roman', Times, Georgia, serif;
	--av-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;

	--av-weight-regular: 400;
	--av-weight-medium: 500;
	--av-weight-semibold: 600;

	/* Escala completa. clamp() para que funcione a 360 px sin media query y
	   no se desboque más allá de 1440. */
	--av-text-display: clamp(2.75rem, 1.7rem + 4.4vw, 5rem);
	--av-text-h1: clamp(2.125rem, 1.55rem + 2.4vw, 3.5rem);
	--av-text-h2: clamp(1.75rem, 1.4rem + 1.45vw, 2.625rem);
	--av-text-h3: clamp(1.375rem, 1.2rem + 0.72vw, 1.875rem);
	--av-text-h4: clamp(1.125rem, 1.06rem + 0.29vw, 1.3125rem);
	--av-text-body-lg: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
	--av-text-body: 1rem;
	--av-text-small: 0.875rem;
	--av-text-caption: 0.75rem;
	--av-text-button: 0.8125rem;

	/* Alias antiguos de la escala. */
	--av-text-xs: var(--av-text-caption);
	--av-text-sm: var(--av-text-small);
	--av-text-base: var(--av-text-body);
	--av-text-lg: var(--av-text-body-lg);
	--av-text-xl: var(--av-text-h4);
	--av-text-2xl: var(--av-text-h3);
	--av-text-3xl: var(--av-text-h2);
	--av-text-4xl: var(--av-text-h1);

	--av-leading-tight: 1.08;
	--av-leading-snug: 1.25;
	--av-leading-normal: 1.6;
	--av-leading-relaxed: 1.75;

	--av-tracking-tight: -0.02em;
	--av-tracking-normal: 0;
	--av-tracking-wide: 0.06em;
	--av-tracking-widest: 0.18em;

	/* Medida de lectura. Más de 75 caracteres cansa la vista. */
	--av-measure: 62ch;
	--av-measure-narrow: 46ch;

	/* =====================================================================
	 * ESPACIADO — base 4 px
	 * ================================================================== */
	--av-space-3xs: 0.25rem;
	--av-space-2xs: 0.5rem;
	--av-space-xs: 0.75rem;
	--av-space-sm: 1rem;
	--av-space-md: 1.5rem;
	--av-space-lg: 2rem;
	--av-space-xl: 3rem;
	--av-space-2xl: 4rem;
	--av-space-3xl: 6rem;
	--av-space-4xl: 8rem;

	/* Ritmo entre secciones. Antes era 3–6 rem y dejaba huecos muertos;
	   ahora arranca más apretado en móvil y crece con la pantalla. */
	--av-section-y: clamp(3rem, 1.9rem + 4.6vw, 5.5rem);
	--av-section-y-lg: clamp(4rem, 2.4rem + 6.6vw, 7.5rem);

	/* =====================================================================
	 * CONTENEDORES
	 * ================================================================== */
	--av-container-wide: 1440px;
	--av-container-lg: 1280px;
	--av-container-md: 1120px;
	--av-container-narrow: 720px;
	--av-container: var(--av-container-lg);
	--av-gutter: clamp(1.125rem, 0.7rem + 1.9vw, 2.5rem);

	/* =====================================================================
	 * RADIOS, SOMBRAS, MOVIMIENTO
	 * ================================================================== */
	--av-radius-sm: 2px;
	--av-radius-md: 6px;
	--av-radius-lg: 12px;
	--av-radius-pill: 999px;

	/* Sombras muy abiertas y de baja opacidad: una superficie premium se lee
	   como elevada, no como delineada. */
	--av-shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.05);
	--av-shadow-md: 0 6px 24px rgba(13, 27, 42, 0.07);
	--av-shadow-lg: 0 18px 48px rgba(13, 27, 42, 0.1);

	--av-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--av-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* Duraciones calibradas contra la competencia que rankea en UK, medidas
	   sobre sus hojas de estilo en producción:
	     healf.com   0.15 / 0.2 / 0.25 / 0.3 s
	     jejoue.co.uk 0.1 / 0.15 / 0.2 / 0.25 / 0.3 s
	     unfabled.co  0.3 / 0.4 s
	   Las nuestras estaban en 160/280/400 ms: por encima de todas ellas. Un
	   hover de 280 ms se percibe como retardo, no como elegancia. Se bajan al
	   rango dominante del sector conservando la curva de marca. */
	--av-transition-fast: 120ms;
	--av-transition-normal: 200ms;
	--av-transition-slow: 320ms;

	/* Alias antiguos. */
	--av-duration-fast: var(--av-transition-fast);
	--av-duration-base: var(--av-transition-normal);
	--av-radius-full: var(--av-radius-pill);

	/* Objetivo táctil mínimo cómodo. */
	--av-tap-target: 44px;

	/* Altura del header, usada por el hero y por el scroll-margin. */
	--av-header-h: 84px;
}

@media (max-width: 47.9375em) {
	:root {
		--av-header-h: 64px;
	}
}

/* Respetar la preferencia del sistema en un solo sitio. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--av-transition-fast: 0ms;
		--av-transition-normal: 0ms;
		--av-transition-slow: 0ms;
		--av-duration-fast: 0ms;
		--av-duration-base: 0ms;
	}
}

/* ===== base.css ===== */
/**
 * AVELUNEXA — base layer.
 *
 * Typography, layout primitives, buttons, forms and utilities that apply to
 * every page. Shop-specific rules live in woocommerce.css.
 *
 * Rules here are deliberately low-specificity (single class or element) so
 * Blocksy's Customizer output can still win where the client wants it to.
 * There is exactly one !important in this file and it is annotated.
 */

/* -------------------------------------------------------------------------
 * Typography
 * ---------------------------------------------------------------------- */

body {
	font-family: var(--av-font-body);
	font-size: var(--av-text-base);
	line-height: var(--av-leading-normal);
	color: var(--av-color-text);
	background-color: var(--av-color-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.av-display {
	font-family: var(--av-font-display);
	font-weight: var(--av-weight-regular);
	line-height: var(--av-leading-tight);
	letter-spacing: var(--av-tracking-tight);
	color: var(--av-color-text);
	text-wrap: balance;
}

h1 { font-size: var(--av-text-4xl); }
h2 { font-size: var(--av-text-3xl); }
h3 { font-size: var(--av-text-2xl); }
h4 { font-size: var(--av-text-xl); }

h5, h6 {
	font-family: var(--av-font-body);
	font-size: var(--av-text-sm);
	font-weight: var(--av-weight-semibold);
	letter-spacing: var(--av-tracking-wide);
	text-transform: uppercase;
	color: var(--av-color-text-muted);
}

p { text-wrap: pretty; }

/* Eyebrow label above section headings.
 *
 * ÚNICA definición. Estaba duplicada aquí y en home.css con las mismas siete
 * propiedades, una con los alias antiguos de token y otra con los canónicos.
 * Se queda la canónica. */
.av-eyebrow {
	display: block;
	/* 0.5rem: era el valor que ganaba, vía `margin-block-end` en home.css. */
	margin-block-end: var(--av-space-2xs);
	font-family: var(--av-font-body);
	font-size: var(--av-text-caption);
	font-weight: var(--av-weight-medium);
	letter-spacing: var(--av-tracking-widest);
	text-transform: uppercase;
	color: var(--av-text-accent);
}

/* Medida de 62ch (--av-measure), que es la que ganaba desde home.css. */
.av-lede {
	max-width: var(--av-measure);
	font-size: var(--av-text-body-lg);
	line-height: var(--av-leading-relaxed);
	color: var(--av-text-secondary);
}

a {
	color: inherit;
	text-decoration-color: var(--av-color-accent);
	text-underline-offset: 0.2em;
	transition: color var(--av-duration-fast) var(--av-ease);
}

a:hover { color: var(--av-color-accent-text); }

/* -------------------------------------------------------------------------
 * Focus — visible on ivory, navy and gold alike
 * ---------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--av-color-focus);
	outline-offset: 2px;
	border-radius: var(--av-radius-sm);
	box-shadow: 0 0 0 4px var(--av-color-focus-contrast);
}

.av-section--inverse :where(a, button, input, select, textarea):focus-visible {
	outline-color: var(--av-color-focus-contrast);
	box-shadow: 0 0 0 4px rgba(13, 27, 42, 0.9);
}

/* Skip link — keyboard users land here first. */
.av-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: var(--av-space-2xs) var(--av-space-sm);
	background: var(--av-color-bg-inverse);
	color: var(--av-color-text-inverse);
}

.av-skip-link:focus {
	left: var(--av-space-sm);
	top: var(--av-space-sm);
}

/* -------------------------------------------------------------------------
 * Layout primitives
 * ---------------------------------------------------------------------- */

/* Contenedores y secciones: ÚNICA definición del sistema.
 *
 * Estaban repetidas aquí y en home.css. Se unifican con los nombres canónicos
 * de token y con las variantes completas, que solo existían en home.css. */
.av-container {
	width: 100%;
	max-width: var(--av-container-lg);
	margin-inline: auto;
	padding-inline: var(--av-gutter);
}

.av-container--wide { max-width: var(--av-container-wide); }
.av-container--md { max-width: var(--av-container-md); }
.av-container--narrow { max-width: var(--av-container-narrow); }

.av-section { padding-block: var(--av-section-y); }

.av-section--lg { padding-block: var(--av-section-y-lg); }
.av-section--sunken { background-color: var(--av-surface-secondary); }
.av-section--raised { background-color: var(--av-surface-raised); }

.av-section--inverse {
	background-color: var(--av-surface-inverse);
	color: var(--av-text-inverse);
}

.av-section--inverse :is(h1, h2, h3, h4) { color: var(--av-text-inverse); }
.av-section--inverse .av-lede,
.av-section--inverse p { color: var(--av-gray-300); }
.av-section--inverse .av-eyebrow { color: var(--av-gold-400); }

.av-stack > * + * { margin-block-start: var(--av-space-sm); }
.av-stack--lg > * + * { margin-block-start: var(--av-space-lg); }

/* Auto-fitting grid. minmax() with a floor of 15rem keeps cards from
 * collapsing into unreadable slivers at 360px. */
.av-grid {
	display: grid;
	gap: var(--av-space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.av-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }

/* Cabecera de sección: ÚNICA definición. El margen inferior es 3rem
 * (--av-space-xl), que era el que ganaba desde home.css. */
.av-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--av-space-md);
	margin-block-end: var(--av-space-xl);
}

.av-section-head__title {
	font-family: var(--av-font-display);
	font-size: var(--av-text-h2);
	font-weight: var(--av-weight-regular);
	line-height: var(--av-leading-snug);
	letter-spacing: var(--av-tracking-tight);
	margin: 0;
	max-width: 20ch;
}

/* El ajuste móvil vive con el componente, no en la hoja de portada: en móvil
 * el titular y su enlace se apilan y 3rem abren demasiado hueco. */
@media (max-width: 47.9375em) {
	.av-section-head { margin-block-end: var(--av-space-lg); }
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.av-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--av-space-2xs);
	min-height: var(--av-tap-target);
	padding: var(--av-space-xs) var(--av-space-lg);
	border: 1px solid transparent;
	border-radius: var(--av-radius-sm);
	font-family: var(--av-font-body);
	font-size: var(--av-text-sm);
	font-weight: var(--av-weight-medium);
	letter-spacing: var(--av-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	/* `position: relative` y la transición de `transform` estaban repetidas en
	 * motion.css. El botón es un componente: su movimiento vive con él. */
	position: relative;
	transition:
		background-color var(--av-transition-fast) var(--av-ease),
		border-color var(--av-transition-fast) var(--av-ease),
		color var(--av-transition-fast) var(--av-ease),
		transform var(--av-transition-fast) var(--av-ease);
}

/* Hundido de 1 px al pulsar: confirma el clic sin mover el layout. */
.av-btn:active { transform: translateY(1px); }

.av-btn--primary {
	background-color: var(--av-color-bg-inverse);
	color: var(--av-color-text-inverse);
}

.av-btn--primary:hover {
	background-color: var(--av-navy-600);
	color: var(--av-color-text-inverse);
}

/* Gold is an accent, not a primary action colour: #D4AF37 on white is only
 * ~1.9:1, so gold buttons always carry navy text. */
.av-btn--gold {
	background-color: var(--av-color-accent);
	color: var(--av-color-text-on-gold);
}

.av-btn--gold:hover {
	background-color: var(--av-color-accent-hover);
	color: var(--av-ivory-100);
}

.av-btn--ghost {
	background-color: transparent;
	border-color: var(--av-color-border-strong);
	color: var(--av-color-text);
}

.av-btn--ghost:hover {
	border-color: var(--av-color-text);
	background-color: var(--av-color-bg-raised);
}

.av-btn[aria-disabled='true'],
.av-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * Forms
 * ---------------------------------------------------------------------- */

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
input[type='search'],
input[type='number'],
select,
textarea {
	width: 100%;
	min-height: var(--av-tap-target);
	padding: var(--av-space-2xs) var(--av-space-xs);
	border: 1px solid var(--av-color-border-strong);
	border-radius: var(--av-radius-sm);
	background-color: var(--av-color-bg-raised);
	color: var(--av-color-text);
	/* 16px minimum stops iOS Safari zooming the viewport on focus. */
	font-family: var(--av-font-body);
	font-size: max(16px, var(--av-text-base));
	line-height: var(--av-leading-normal);
	transition: border-color var(--av-duration-fast) var(--av-ease);
}

input:hover, select:hover, textarea:hover { border-color: var(--av-gray-700); }

label {
	display: inline-block;
	margin-block-end: var(--av-space-3xs);
	font-size: var(--av-text-sm);
	font-weight: var(--av-weight-medium);
}

/* -------------------------------------------------------------------------
 * Media
 * ---------------------------------------------------------------------- */

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

/* Reserve the box before the image arrives. Together with width/height
 * attributes on the <img>, this is what keeps CLS under 0.1. */
.av-media {
	position: relative;
	overflow: hidden;
	background-color: var(--av-color-bg-sunken);
	aspect-ratio: 3 / 4;
}

.av-media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--av-duration-base) var(--av-ease);
}

.av-media--square { aspect-ratio: 1 / 1; }
.av-media--wide { aspect-ratio: 16 / 9; }

/* -------------------------------------------------------------------------
 * Utilities
 * ---------------------------------------------------------------------- */

.av-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.av-text-center { text-align: center; }
.av-muted { color: var(--av-color-text-muted); }

/* Rule with a gold tick — used under section headings. */
.av-rule {
	width: 3rem;
	height: 1px;
	margin-block: var(--av-space-sm);
	border: 0;
	background-color: var(--av-color-accent);
}

.av-text-center .av-rule { margin-inline: auto; }

/* -------------------------------------------------------------------------
 * Global guards
 * ---------------------------------------------------------------------- */

/* Nothing may push the document sideways. This is the single !important in
 * the file: third-party embeds (payment iframes, review widgets) routinely
 * set inline widths that overflow at 360px, and we cannot outrank them
 * otherwise. */
html, body {
	overflow-x: clip !important;
}

/* Long unbroken strings — order references, SKUs, emails — must wrap rather
 * than widen their container. */
.av-break { overflow-wrap: anywhere; }

/* ===== header-footer.css ===== */
/**
 * AVELUNEXA — cabecera y pie.
 *
 * Se estilan los componentes de Blocksy en lugar de reconstruirlos: rehacer a
 * mano un menú móvil accesible sería trabajo que Blocksy ya hace bien.
 *
 * Blocksy pinta cabecera y pie desde un <style> inline con selectores de
 * atributo (0,2,0). Por eso aquí se usa su mismo gancho `[data-header]` /
 * `[data-footer]` más el elemento, para llegar a (0,2,1) y ganar sin
 * !important.
 */

/* =========================================================================
 * BARRA DE ANUNCIO
 * ====================================================================== */

.av-topbar {
	background-color: var(--av-surface-inverse);
	color: var(--av-text-inverse);
	position: relative;
	z-index: 30;
}

.av-topbar__inner {
	max-width: var(--av-container-wide);
	margin-inline: auto;
	padding: 0.6rem var(--av-gutter);
	text-align: center;
	font-family: var(--av-font-body);
	font-size: var(--av-text-caption);
	font-weight: var(--av-weight-medium);
	letter-spacing: var(--av-tracking-wide);
	text-transform: uppercase;
	line-height: 1.5;
}

.av-topbar a {
	color: var(--av-gold-400);
	text-underline-offset: 0.25em;
}

/* =========================================================================
 * CABECERA
 * ====================================================================== */

[data-header] header.ct-header,
[data-header] header.ct-header > div,
[data-header] .ct-header [data-row],
[data-header] .ct-header [data-column] {
	background-color: var(--av-surface-primary);
}

header.ct-header {
	border-block-end: 1px solid var(--av-border);
	transition: box-shadow var(--av-transition-normal) var(--av-ease);
}

/* Más aire vertical: la cabecera anterior iba demasiado apretada para una
   marca que quiere leerse como premium. */
[data-header] .ct-header [data-row] > div {
	min-height: var(--av-header-h);
}

/* --- Marca ------------------------------------------------------------ */

[data-header] .site-title,
[data-header] .site-title a {
	font-family: var(--av-font-display);
	font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.75rem);
	font-weight: var(--av-weight-regular);
	letter-spacing: var(--av-tracking-widest);
	text-transform: uppercase;
	color: var(--av-text-primary);
	text-decoration: none;
	line-height: 1;
}

[data-header] .site-title a {
	display: inline-flex;
	align-items: center;
	min-height: var(--av-tap-target);
	transition: color var(--av-transition-fast) var(--av-ease);
}

[data-header] .site-title a:hover {
	color: var(--av-text-accent);
}

/* Hueco reservado para el logotipo definitivo: cuando se suba una imagen,
   Blocksy la coloca aquí y estas reglas dejan de aplicar solas. */
[data-header] .site-logo-container img {
	max-height: 40px;
	width: auto;
}

.site-description {
	font-family: var(--av-font-body);
	font-size: var(--av-text-caption);
	letter-spacing: var(--av-tracking-wide);
	color: var(--av-text-secondary);
}

/* --- Navegación ------------------------------------------------------- */

header.ct-header nav a.ct-menu-link,
header.ct-header .header-menu-1 a {
	position: relative;
	font-family: var(--av-font-body);
	font-size: var(--av-text-button);
	font-weight: var(--av-weight-medium);
	letter-spacing: var(--av-tracking-wide);
	text-transform: uppercase;
	color: var(--av-text-primary);
	text-decoration: none;
	transition: color var(--av-transition-fast) var(--av-ease);
}

header.ct-header nav a.ct-menu-link:hover,
header.ct-header .header-menu-1 a:hover {
	color: var(--av-text-accent);
}

/* Filete dorado. Se dibuja siempre y se escala desde 0, para que la
   transición no provoque reflow. */
header.ct-header nav .menu-item > a::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: -0.4em;
	height: 1px;
	background-color: var(--av-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--av-transition-normal) var(--av-ease-out);
}

header.ct-header nav .menu-item:hover > a::after,
header.ct-header nav .current-menu-item > a::after,
header.ct-header nav .current_page_item > a::after,
header.ct-header nav .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* Submenú desplegable */
header.ct-header .sub-menu {
	background-color: var(--av-surface-raised);
	border: 1px solid var(--av-border);
	border-radius: var(--av-radius-md);
	box-shadow: var(--av-shadow-md);
	padding-block: var(--av-space-2xs);
}

header.ct-header .sub-menu a {
	text-transform: none;
	letter-spacing: var(--av-tracking-normal);
	font-size: var(--av-text-small);
	padding-block: var(--av-space-2xs);
}

/* --- Acciones: búsqueda, cuenta, bolsa -------------------------------- */

.ct-header [data-id='cart'] a,
.ct-header [data-id='account'] a,
.ct-header [data-id='search'] button,
.ct-header .ct-header-cart,
.ct-header .ct-header-account,
.ct-header-search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--av-tap-target);
	min-height: var(--av-tap-target);
	color: var(--av-text-primary);
	border-radius: var(--av-radius-pill);
	transition: background-color var(--av-transition-fast) var(--av-ease),
		color var(--av-transition-fast) var(--av-ease);
}

.ct-header [data-id='cart'] a:hover,
.ct-header [data-id='account'] a:hover,
.ct-header [data-id='search'] button:hover {
	background-color: var(--av-navy-050);
	color: var(--av-text-accent);
}

/* Contador de la bolsa */
.ct-cart-item-count,
.ct-header-cart .ct-cart-count {
	background-color: var(--av-accent);
	color: var(--av-text-on-gold);
	font-family: var(--av-font-body);
	font-size: 0.625rem;
	font-weight: var(--av-weight-semibold);
	min-width: 1.15rem;
	height: 1.15rem;
	border-radius: var(--av-radius-pill);
	display: inline-grid;
	place-items: center;
	letter-spacing: 0;
}

/* Sticky: fondo sólido y sombra solo al despegarse. Translúcido sobre
   contenido haría ilegible la navegación en cuanto pase una imagen. */
.ct-header[data-sticky] {
	background-color: var(--av-surface-primary);
	box-shadow: var(--av-shadow-sm);
}

/* =========================================================================
 * MENÚ MÓVIL
 * ====================================================================== */

.ct-panel {
	background-color: var(--av-surface-primary);
}

#offcanvas .mobile-menu a,
.ct-panel .mobile-menu a {
	display: block;
	font-family: var(--av-font-display);
	font-size: 1.375rem;
	font-weight: var(--av-weight-regular);
	letter-spacing: var(--av-tracking-normal);
	text-transform: none;
	color: var(--av-text-primary);
	padding-block: var(--av-space-xs);
	min-height: var(--av-tap-target);
	border-block-end: 1px solid var(--av-border);
}

.ct-panel .mobile-menu .sub-menu a {
	font-family: var(--av-font-body);
	font-size: var(--av-text-small);
	padding-inline-start: var(--av-space-sm);
	border-block-end: 0;
}

/* Hamburguesa y cierre: medido, Blocksy los renderiza a 18×18. */
.ct-header-trigger,
.ct-toggle,
.ct-toggle-close,
.ct-panel-actions .ct-toggle-close,
[data-id='trigger'] .ct-toggle {
	display: inline-flex !important; /* Blocksy fuerza display:block en línea */
	align-items: center;
	justify-content: center;
	min-width: var(--av-tap-target);
	min-height: var(--av-tap-target);
}

.ct-header-trigger svg,
.ct-toggle svg {
	width: 20px;
	height: 20px;
}

/* =========================================================================
 * PIE
 * ====================================================================== */

[data-footer] footer.ct-footer,
[data-footer] footer.ct-footer > div,
[data-footer] footer.ct-footer [data-row] {
	background-color: var(--av-surface-inverse);
}

[data-footer] footer.ct-footer,
[data-footer] footer.ct-footer p,
[data-footer] footer.ct-footer li,
[data-footer] footer.ct-footer .ct-footer-copyright {
	color: var(--av-gray-300);
	font-size: var(--av-text-small);
}

[data-footer] footer.ct-footer a,
[data-footer] footer.ct-footer .ct-footer-copyright a {
	color: var(--av-ivory-300);
	text-decoration: none;
	transition: color var(--av-transition-fast) var(--av-ease);
}

[data-footer] footer.ct-footer a:hover {
	color: var(--av-text-inverse);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

[data-footer] footer.ct-footer :is(h1, h2, h3, h4, .widget-title) {
	font-family: var(--av-font-body);
	font-size: var(--av-text-caption);
	font-weight: var(--av-weight-semibold);
	letter-spacing: var(--av-tracking-widest);
	text-transform: uppercase;
	color: var(--av-gold-400);
	margin-block-end: var(--av-space-sm);
}

[data-footer] footer.ct-footer .site-title,
[data-footer] footer.ct-footer .site-title a {
	font-family: var(--av-font-display);
	font-size: 1.5rem;
	letter-spacing: var(--av-tracking-widest);
	color: var(--av-text-inverse);
	display: inline-flex;
	align-items: center;
	min-height: var(--av-tap-target);
}

[data-footer] footer.ct-footer [data-row='bottom'] {
	border-block-start: 1px solid var(--av-border-inverse);
	font-size: var(--av-text-caption);
	color: var(--av-gray-500);
}

/* El pie es oscuro: el foco necesita el par invertido para verse. */
[data-footer] footer.ct-footer :where(a, button):focus-visible {
	outline-color: var(--av-focus-halo);
	box-shadow: 0 0 0 4px rgba(13, 27, 42, 0.9);
}

/* --- Bloque de marca del pie ------------------------------------------ */

.av-footer-brand {
	max-width: 34ch;
}

.av-footer-brand__mark {
	font-family: var(--av-font-display);
	font-size: 1.75rem;
	letter-spacing: var(--av-tracking-widest);
	text-transform: uppercase;
	color: var(--av-text-inverse);
	display: block;
	margin-block-end: var(--av-space-xs);
}

.av-footer-brand__copy {
	color: var(--av-gray-300);
	line-height: var(--av-leading-relaxed);
}

/* =========================================================================
 * DISTINTIVOS DE STAGING
 * ====================================================================== */

.av-staging-badge {
	position: absolute;
	inset-block-start: var(--av-space-2xs);
	inset-inline-end: var(--av-space-2xs);
	z-index: 3;
	padding: 0.2rem 0.5rem;
	border-radius: var(--av-radius-sm);
	background-color: var(--av-warning);
	color: #fff;
	font-family: var(--av-font-body);
	font-size: 0.625rem;
	font-weight: var(--av-weight-semibold);
	letter-spacing: var(--av-tracking-wide);
	text-transform: uppercase;
	line-height: 1.4;
}

.av-staging-notice {
	margin-block: var(--av-space-2xs) var(--av-space-sm);
	padding: var(--av-space-2xs) var(--av-space-xs);
	border-inline-start: 3px solid var(--av-warning);
	background-color: #fff8e6;
	color: #6b4e0c;
	font-size: var(--av-text-small);
	line-height: var(--av-leading-normal);
}

/* =========================================================================
 * MÓVIL
 * ====================================================================== */

@media (max-width: 47.9375em) {
	.av-topbar__inner {
		font-size: 0.6875rem;
		letter-spacing: var(--av-tracking-normal);
		padding-inline: var(--av-space-2xs);
	}

	[data-footer] footer.ct-footer :is(h1, h2, h3, h4, .widget-title) {
		margin-block-end: var(--av-space-2xs);
	}
}

/* ===== motion.css ===== */
/**
 * AVELUNEXA — movimiento.
 *
 * Solo `transform` y `opacity`: son las dos propiedades que el navegador puede
 * animar en el compositor sin recalcular layout. Animar `height`, `top` o
 * `margin` provoca reflow en cada fotograma y es lo que hace que una interfaz
 * "salte".
 *
 * Duraciones: 160 ms para respuesta directa (hover de un botón), 280 ms para
 * cambios de estado, 400 ms para entradas de sección. Por encima de ~450 ms se
 * percibe como lentitud, no como elegancia.
 *
 * Sin librerías. El reveal usa IntersectionObserver, ~30 líneas de JS.
 */

/* =========================================================================
 * REVEAL AL ENTRAR EN PANTALLA
 * ====================================================================== */

/* Estado inicial SOLO si el JS está vivo: si falla, el contenido se ve.
   La clase `av-js` la pone el propio script en <html>. */
.av-js [data-av-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--av-transition-slow) var(--av-ease-out),
		transform var(--av-transition-slow) var(--av-ease-out);
	will-change: opacity, transform;
}

.av-js [data-av-reveal].is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Escalonado dentro de una rejilla: cada hijo entra 60 ms después. */
.av-js [data-av-reveal-group] > * {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--av-transition-slow) var(--av-ease-out),
		transform var(--av-transition-slow) var(--av-ease-out);
}

.av-js [data-av-reveal-group].is-visible > * {
	opacity: 1;
	transform: none;
}

.av-js [data-av-reveal-group].is-visible > :nth-child(1) { transition-delay: 0ms; }
.av-js [data-av-reveal-group].is-visible > :nth-child(2) { transition-delay: 60ms; }
.av-js [data-av-reveal-group].is-visible > :nth-child(3) { transition-delay: 120ms; }
.av-js [data-av-reveal-group].is-visible > :nth-child(4) { transition-delay: 180ms; }
.av-js [data-av-reveal-group].is-visible > :nth-child(5) { transition-delay: 240ms; }
.av-js [data-av-reveal-group].is-visible > :nth-child(n + 6) { transition-delay: 300ms; }

/* Los botones ya no viven aquí.
 *
 * Este archivo repetía la transición y el `:active` de `.av-btn` y de los
 * botones de WooCommerce, que ya estaban definidos en base.css y en
 * woocommerce.css: tres capas para el mismo efecto. Cada botón lleva ahora su
 * movimiento en su propio componente, y motion.css se queda solo con lo que no
 * pertenece a ningún componente concreto: el sistema de reveal y el acordeón.
 */

/* =========================================================================
 * ACORDEÓN
 * ====================================================================== */

.av-accordion__item { border-block-end: 1px solid var(--av-border); }

.av-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--av-space-sm);
	padding: var(--av-space-md) 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-family: var(--av-font-body);
	font-size: var(--av-text-body);
	font-weight: var(--av-weight-medium);
	color: var(--av-text-primary);
	min-height: var(--av-tap-target);
}

.av-accordion__icon {
	flex: none;
	width: 1rem;
	height: 1rem;
	position: relative;
}

.av-accordion__icon::before,
.av-accordion__icon::after {
	content: '';
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transition: transform var(--av-transition-normal) var(--av-ease-out);
}

.av-accordion__icon::after { transform: rotate(90deg); }

.av-accordion__trigger[aria-expanded='true'] .av-accordion__icon::after {
	transform: rotate(0deg);
}

/* grid-template-rows 0fr→1fr anima la apertura sin conocer la altura y sin
   provocar el salto de max-height. */
.av-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--av-transition-normal) var(--av-ease-out);
}

.av-accordion__panel > div { overflow: hidden; }

.av-accordion__trigger[aria-expanded='true'] + .av-accordion__panel {
	grid-template-rows: 1fr;
}

/* =========================================================================
 * SUPERPOSICIÓN DE BÚSQUEDA
 * ====================================================================== */

.av-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background-color: rgba(13, 27, 42, 0.96);
	display: grid;
	place-items: start center;
	padding-block-start: 22vh;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--av-transition-normal) var(--av-ease),
		visibility 0s linear var(--av-transition-normal);
}

.av-search-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.av-search-overlay__inner {
	width: min(42rem, 90vw);
	transform: translateY(-10px);
	transition: transform var(--av-transition-normal) var(--av-ease-out);
}

.av-search-overlay.is-open .av-search-overlay__inner { transform: none; }

.av-search-overlay input[type='search'] {
	width: 100%;
	background: transparent;
	border: 0;
	border-block-end: 1px solid var(--av-border-inverse);
	border-radius: 0;
	color: var(--av-text-inverse);
	font-family: var(--av-font-display);
	font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	padding-block: var(--av-space-sm);
}

.av-search-overlay input[type='search']::placeholder { color: var(--av-gray-500); }
.av-search-overlay input[type='search']:focus { outline: none; border-block-end-color: var(--av-accent); }

/* =========================================================================
 * SIN MOVIMIENTO
 *
 * Se anulan también las transiciones, no solo las duraciones: `will-change`
 * y `transition-delay` seguirían activos si solo se pusieran las duraciones a 0.
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.av-js [data-av-reveal],
	.av-js [data-av-reveal-group] > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto !important;
	}

	.av-accordion__panel { transition: none; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}