/* ==========================================================================
   base.css — Reset, tipografía base, utilidades, accesibilidad
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
/* Lenis (scroll suave premium) — cuando está activo, desactiva el smooth nativo. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
	font-family: var(--esp-font-body);
	font-size: var(--esp-fs-400);
	line-height: var(--esp-lh-body);
	color: var(--esp-text);
	background: var(--esp-bg-grad) fixed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	position: relative;
}

/* Grano de película sutil sobre todo el sitio (profundidad, anti-flat).
   SVG fractal inline = sin asset, mix-blend para integrarse. Respeta perf. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* El contenido va por encima del grano. */
.esp-page, .esp-header, .esp-topbar, .esp-footer, .esp-bottomnav, .esp-drawer { position: relative; z-index: 2; }

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; transition: color var(--esp-dur-fast) var(--esp-ease); }
a:hover { color: var(--esp-dorado); }

h1, h2, h3, h4 {
	font-family: var(--esp-font-display);
	font-weight: 400;
	line-height: var(--esp-lh-snug);
	letter-spacing: var(--esp-tracking-display);
	text-transform: uppercase;
}
p { line-height: var(--esp-lh-body); }
ul, ol { list-style: none; padding: 0; }

:focus-visible { outline: 3px solid var(--esp-dorado); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--esp-rojo); color: #fff; }
::placeholder { color: var(--esp-text-dim); }

/* ---- Contenedores / shell ---- */
.esp-shell { width: 100%; max-width: var(--esp-maxw); margin-inline: auto; padding-inline: var(--esp-gutter); }
.esp-shell--wide { max-width: var(--esp-maxw-wide); }
.esp-page { min-height: 50vh; }
.esp-main { padding-block: var(--esp-space-7); }

/* ---- Secciones ---- */
.esp-section { padding-block: var(--esp-space-8); }
.esp-section__head { text-align: center; max-width: 640px; margin: 0 auto var(--esp-space-6); }
.esp-section__title { font-size: var(--esp-fs-800); color: var(--esp-crema); }
.esp-section__title em { font-style: normal; color: var(--esp-dorado); }
.esp-section__sub { color: var(--esp-text-muted); margin-top: var(--esp-space-2); font-family: var(--esp-font-body); text-transform: none; }

/* ---- Inputs base ---- */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], input[type="number"], textarea, select {
	width: 100%;
	background: var(--esp-surface-2);
	border: 1px solid var(--esp-border-strong);
	border-radius: var(--esp-radius-sm);
	color: var(--esp-crema);
	padding: 0.8rem 1rem;
	transition: border-color var(--esp-dur-fast) var(--esp-ease);
}
input:focus, textarea:focus, select:focus { border-color: var(--esp-dorado); outline: none; }

/* ---- Accesibilidad ---- */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
	position: fixed !important; top: 8px; left: 8px; width: auto; height: auto;
	padding: 0.75rem 1rem; clip: auto; background: var(--esp-dorado); color: var(--esp-text-on-dorado);
	z-index: var(--esp-z-overlay); border-radius: var(--esp-radius-sm);
}
.esp-skip-link { position: absolute; left: -9999px; }

/* ---- Scrollbar ---- */
* { scrollbar-color: var(--esp-rojo) var(--esp-surface); scrollbar-width: thin; }

/* ==========================================================================
   COMPONENTES GLOBALES (botones, badges, picante, pills, qty, accordion)
   ========================================================================== */

.esp-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.esp-icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: var(--esp-radius-pill);
	background: transparent; border: 1px solid transparent; color: var(--esp-crema);
	cursor: pointer; position: relative; will-change: transform;
	transition: background 160ms var(--esp-ease-emph), color 160ms var(--esp-ease-emph), transform var(--esp-press) var(--esp-press-ease);
}
.esp-icon-btn:hover { background: var(--esp-surface-3); color: var(--esp-dorado); }
.esp-icon-btn:active { transform: scale(0.88); transition-duration: var(--esp-press); }

/* ---- Botones (sistema táctil "impeccable") ----
   Hover = se levanta firme; press = se hunde rápido y la sombra se comprime
   (físico, como pulsar algo real). Easing confiado, sin bounce/elastic. */
.esp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-space-2);
	font-family: var(--esp-font-body); font-weight: 700; font-size: var(--esp-fs-400);
	text-transform: uppercase; letter-spacing: var(--esp-tracking-caps); line-height: 1;
	padding: 0.95rem 1.7rem; border-radius: var(--esp-radius-pill); border: 2px solid transparent;
	cursor: pointer; white-space: nowrap; position: relative; will-change: transform;
	/* Hover super suave (320ms ease-out sedoso); el press se vuelve veloz vía :active. */
	transition:
		transform 320ms var(--esp-ease),
		box-shadow 320ms var(--esp-ease),
		background 260ms var(--esp-ease),
		border-color 260ms var(--esp-ease),
		color 260ms var(--esp-ease);
}
.esp-btn__label, .esp-btn .esp-icon { position: relative; z-index: 1; }
/* Movimiento sobrio: leve levantarse (−2px) + color/sombra en hover; press mínimo.
   Sin crecer (scale) ni barrido de luz. */
.esp-btn:hover { transform: translateY(-2px); }
.esp-btn:active { transform: translateY(0) scale(0.98); transition-duration: var(--esp-press); }

.esp-btn--primary {
	background: var(--esp-rojo); color: var(--esp-text-on-rojo);
	box-shadow: 0 8px 22px rgba(226,42,35,.34), inset 0 1px 0 rgba(255,255,255,.18);
}
.esp-btn--primary:hover { background: #ef332c; box-shadow: 0 14px 34px rgba(226,42,35,.5), inset 0 1px 0 rgba(255,255,255,.22); }
.esp-btn--primary:active { box-shadow: 0 4px 12px rgba(226,42,35,.4), inset 0 2px 6px rgba(0,0,0,.25); }

.esp-btn--secondary { background: transparent; color: var(--esp-crema); border-color: var(--esp-border-strong); }
.esp-btn--secondary:hover { border-color: var(--esp-dorado); color: var(--esp-dorado); background: rgba(255,198,46,.06); }
.esp-btn--secondary:active { background: rgba(255,198,46,.12); }

.esp-btn--gold {
	background: var(--esp-dorado); color: var(--esp-text-on-dorado);
	box-shadow: 0 8px 22px rgba(255,198,46,.30), inset 0 1px 0 rgba(255,255,255,.4);
}
.esp-btn--gold:hover { background: #ffce4d; box-shadow: 0 14px 34px rgba(255,198,46,.42), inset 0 1px 0 rgba(255,255,255,.5); }
.esp-btn--gold:active { box-shadow: 0 4px 12px rgba(255,198,46,.36), inset 0 2px 6px rgba(120,80,0,.25); }

.esp-btn--ghost { background: transparent; color: var(--esp-crema); }
.esp-btn--ghost:hover { color: var(--esp-dorado); }
.esp-btn--block { width: 100%; }
.esp-btn--sm { padding: 0.62rem 1.05rem; font-size: var(--esp-fs-300); }


/* ---- Trust badges ---- */
.esp-badge {
	display: inline-flex; align-items: center; gap: var(--esp-space-2);
	padding: 0.5rem 0.85rem; border-radius: var(--esp-radius-pill);
	background: var(--esp-surface-3); border: 1px solid var(--esp-border);
}
.esp-badge__icon { color: var(--esp-dorado); display: inline-flex; }
.esp-badge__label { font-size: var(--esp-fs-300); font-weight: 600; white-space: nowrap; }

/* ---- Picante meter ---- */
.esp-picante { display: inline-flex; gap: 2px; align-items: center; }
.esp-picante__pepper { display: inline-flex; line-height: 0; }
.esp-picante__pepper.is-on { color: var(--esp-rojo); }
.esp-picante__pepper.is-off { color: var(--esp-text-dim); }

/* ---- Pills ---- */
.esp-pill {
	display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--esp-tracking-caps); padding: 0.3rem 0.7rem;
	border-radius: var(--esp-radius-pill);
}
.esp-pill--popular { background: var(--esp-dorado); color: var(--esp-text-on-dorado); }
.esp-pill--new { background: var(--esp-verde); color: #06210f; }
.esp-pill--sale { background: var(--esp-rojo); color: #fff; }

/* ---- Quantity stepper ---- */
.esp-qty, .quantity {
	display: inline-flex; align-items: center; border: 1px solid var(--esp-border-strong);
	border-radius: var(--esp-radius-pill); background: var(--esp-surface-2); overflow: hidden;
}
.esp-qty__btn {
	width: 42px; height: 44px; background: transparent; border: 0; color: var(--esp-crema);
	font-size: 1.25rem; cursor: pointer; will-change: transform;
	transition: color 140ms var(--esp-ease-emph), background 140ms var(--esp-ease-emph), transform var(--esp-press) var(--esp-press-ease);
}
.esp-qty__btn:hover { color: var(--esp-dorado); background: var(--esp-surface-3); }
.esp-qty__btn:active { transform: scale(0.82); transition-duration: var(--esp-press); }
.esp-qty input.qty, .esp-qty__input, .quantity input.qty {
	width: 46px; height: 44px; text-align: center; background: transparent; border: 0;
	color: var(--esp-crema); font-weight: 600; -moz-appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button, .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Acordeón ---- */
.esp-accordion { border-top: 1px solid var(--esp-border); }
.esp-accordion__item { border-bottom: 1px solid var(--esp-border); }
.esp-accordion__trigger {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--esp-space-3);
	padding: var(--esp-space-4) 0; background: transparent; border: 0; cursor: pointer;
	font-family: var(--esp-font-body); font-weight: 600; font-size: var(--esp-fs-500); color: var(--esp-crema); text-align: left;
}
.esp-accordion__trigger .esp-icon { transition: transform var(--esp-dur) var(--esp-ease); color: var(--esp-dorado); }
.esp-accordion__trigger[aria-expanded="true"] .esp-icon { transform: rotate(180deg); }
/* Altura fluida con grid-template-rows (0fr→1fr): sin layout thrash de max-height. */
.esp-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--esp-dur) var(--esp-ease-emph); color: var(--esp-text-muted); }
.esp-accordion__panel.is-open { grid-template-rows: 1fr; }
.esp-accordion__panel-inner { overflow: hidden; min-height: 0; }
.esp-accordion__panel.is-open .esp-accordion__panel-inner { padding-bottom: var(--esp-space-4); }

/* ---- Skeleton placeholder ---- */
.esp-skeleton {
	display: block; border-radius: var(--esp-radius);
	background: linear-gradient(100deg, var(--esp-surface-2) 30%, var(--esp-surface-3) 50%, var(--esp-surface-2) 70%);
	background-size: 200% 100%; animation: esp-shimmer 1.4s infinite;
}

/* ---- Paginación ---- */
.page-numbers { display: inline-flex; gap: var(--esp-space-2); justify-content: center; flex-wrap: wrap; }
.page-numbers li { list-style: none; }
.page-numbers a, .page-numbers span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px;
	padding: 0 0.5rem; border-radius: var(--esp-radius-sm); background: var(--esp-surface-2); border: 1px solid var(--esp-border);
}
.page-numbers .current { background: var(--esp-rojo); color: #fff; border-color: var(--esp-rojo); }

/* ==========================================================================
   DESIGN SYSTEM — utilidades reutilizables (.container, .section, .btn, …)
   API pública del theme. Conviven con las clases internas .esp-*.
   ========================================================================== */

/* ---- Layout ---- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--esp-gutter);
}
.section { padding-block: var(--esp-space-8); }
.section + .section { padding-block-start: 0; }

/* ---- Encabezados de sección ---- */
.eyebrow {
	display: inline-flex; align-items: center; gap: 0.6rem;
	font-family: var(--font-body); font-weight: 700; font-size: var(--esp-fs-300);
	text-transform: uppercase; letter-spacing: var(--esp-tracking-caps);
	color: var(--color-gold); margin-bottom: var(--esp-space-3);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--color-red); display: inline-block; }
.section-title {
	font-family: var(--font-heading); font-weight: 400; line-height: var(--esp-lh-snug);
	text-transform: uppercase; letter-spacing: var(--esp-tracking-display);
	font-size: var(--esp-fs-800); color: var(--color-cream); margin: 0;
}
.section-title em { font-style: normal; color: var(--color-gold); }
.section-subtitle {
	font-family: var(--font-body); color: var(--color-muted);
	font-size: var(--esp-fs-500); margin-top: var(--esp-space-2);
}

/* ---- Botones base ---- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-space-2);
	font-family: var(--font-body); font-weight: 700; font-size: var(--esp-fs-400);
	text-transform: uppercase; letter-spacing: var(--esp-tracking-caps); line-height: 1;
	padding: 0.95rem 1.7rem; border-radius: var(--esp-radius-pill); border: 2px solid transparent;
	cursor: pointer; white-space: nowrap; color: var(--color-cream); background: transparent;
	transition: transform 320ms var(--esp-ease), box-shadow 320ms var(--esp-ease),
		background 220ms var(--esp-ease), border-color 220ms var(--esp-ease), color 220ms var(--esp-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary { background: var(--color-red); color: #fff; box-shadow: var(--shadow-red); }
.btn-primary:hover { background: #ef332c; }
.btn-secondary { background: transparent; color: var(--color-cream); border-color: var(--esp-border-strong); }
.btn-secondary:hover { border-color: var(--color-gold); color: var(--color-gold); background: rgba(255, 198, 46, 0.06); }

/* ---- Glow suave reutilizable ---- */
.soft-glow { box-shadow: var(--shadow-red); }
.soft-glow--gold { box-shadow: var(--shadow-gold); }

/* ---- Utilidades de animación (ver animations.css para los keyframes) ---- */
.fade-up { animation: fade-up 0.6s var(--esp-ease-emph) both; }
.scale-in { animation: scale-in 0.5s var(--esp-ease-emph) both; }
.soft-float { animation: subtle-float 4.5s ease-in-out infinite; }
.stagger-item { opacity: 0; animation: fade-up 0.6s var(--esp-ease-emph) both; }
.stagger-item:nth-child(2) { animation-delay: 0.06s; }
.stagger-item:nth-child(3) { animation-delay: 0.12s; }
.stagger-item:nth-child(4) { animation-delay: 0.18s; }
.stagger-item:nth-child(5) { animation-delay: 0.24s; }
.stagger-item:nth-child(6) { animation-delay: 0.30s; }
.stagger-item:nth-child(7) { animation-delay: 0.36s; }
.stagger-item:nth-child(8) { animation-delay: 0.42s; }