/* ═══════════════════════════════════════════════════════════════
   Evolving Store — estilos base (design system "galaxia")
   Tokens portados 1:1 del tema Shopify probado en producción
   (docs/03-producto-ux-marketing.md §1).
   ═══════════════════════════════════════════════════════════════ */

/* ── Fuentes self-hosted (sin CDN de Google) ─────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
}

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  --color-bg:           #0a0a14;
  --color-bg-secondary: #151030;
  --color-bg-card:      #1c1645;
  --color-accent:       #7c5cfc;
  --color-accent-gold:  #ffb347;
  --color-text:         #eaeaea;
  --color-text-muted:   #a0a0b0;
  --color-border:       #2d2650;
  --color-success:      #2ecc71;
  --color-error:        #e74c3c;
  /* Oferta: rosado del badge de promo (blanco encima = 5.6:1, pasa AA). */
  --color-sale:         #c81e54;
  /* Morado para TEXTO (el --color-accent puro queda bajo AA sobre tarjetas). */
  --color-accent-text:  #9e86ff;

  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Inter', sans-serif;

  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem;
  --space-lg: 1.5rem;  --space-xl: 2rem;   --space-2xl: 3rem; --space-3xl: 4rem;

  --container-max: 1280px;
  --header-height: 70px;
  --border-radius: 8px;
  --border-radius-lg: 12px;

  --transition: 300ms ease;
  --transition-fast: 150ms ease;

  /* ── Luz y profundidad ────────────────────────────────────────
     El catálogo es el color: las cartas ya son brillantes y saturadas. La interfaz
     tiene que comportarse como la vitrina, no competir. Todo lo de acá abajo existe
     para simular UNA fuente de luz arriba, de modo que las superficies se lean como
     objetos y no como rectángulos pintados del mismo tono.

     La regla que ordena el conjunto: cuanto más "cerca" está algo del cliente, más
     claro es su borde superior y más profunda su sombra. */

  /* Superficie de tarjeta: apenas más clara arriba que abajo. La diferencia es de
     dos puntos de luminancia — se siente antes de verse. */
  --surface-card: linear-gradient(180deg, #221a52 0%, #1a1440 100%);
  --surface-card-hover: linear-gradient(180deg, #2a2064 0%, #1e1749 100%);

  /* Hairline superior: el reflejo del borde bajo la luz. Es lo que separa "plano"
     de "objeto", y cuesta un box-shadow inset. */
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --edge-light-strong: inset 0 1px 0 rgba(255, 255, 255, 0.13);

  /* Escala de elevación. Reposo casi imperceptible; al levantar, la sombra se tiñe
     del morado de marca en vez de ser negro puro — sobre un fondo azulado el negro
     puro se ve como suciedad. */
  --shadow-rest:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lift:  0 12px 28px -8px rgba(0, 0, 0, 0.55), 0 4px 12px -4px rgba(124, 92, 252, 0.25);
  --shadow-modal: 0 24px 64px -12px rgba(0, 0, 0, 0.7);

  /* Curva de salida para el hover: arranca rápido y frena. Un `ease` a secas se
     siente mecánico en un movimiento tan corto. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Nadie debería perder el foco del teclado por culpa de la estética. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
  border-radius: 4px;
}

/* La nebulosa: un halo morado muy tenue arriba del todo, para que el fondo no sea
   un plano muerto. `fixed` y no `scroll` así no viaja con el contenido.

   `position: relative` es lo que hace que .sky-deep mida el ALTO DEL DOCUMENTO. Sin
   esto, un absoluto con inset:0 se ancla al bloque contenedor inicial —del tamaño de
   la ventana— y los planetas quedarían encerrados en la primera pantalla, que es
   exactamente lo contrario de lo que se busca. */
body {
  position: relative;
  background-image: radial-gradient(
    120% 60% at 50% -10%,
    rgba(124, 92, 252, 0.13) 0%,
    rgba(124, 92, 252, 0) 60%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
}

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

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

a { color: var(--color-accent-text); text-decoration: none; transition: color var(--transition-fast); }

/* Foco por teclado visible y tematizado en todo el sitio (WCAG 2.4.7). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 2px;
}

/* Utilidad usada en las páginas de cuenta/ficha (antes no estaba definida). */
.text-muted { color: var(--color-text-muted); }

/* ── Landing /ofertas (E16-H02) ──────────────────────────────── */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-lg); }
.offer-card {
  display: flex; flex-direction: column; gap: 0.4rem; padding: var(--space-lg);
  border: 1px solid var(--color-border); border-radius: 14px; text-decoration: none; color: inherit;
  background: var(--color-bg-secondary); transition: transform 0.15s ease, border-color 0.15s ease;
}
.offer-card:hover, .offer-card:focus-visible { transform: translateY(-4px); border-color: var(--color-accent); }
.offer-card__badge {
  align-self: flex-start; padding: 2px 10px; font-size: 1.05rem; font-weight: 800;
  color: #fff; background: var(--color-sale); border-radius: 999px;
}
.offer-card__name { font-size: 1.1rem; margin: 0.3rem 0 0; }
.offer-card__scope { color: var(--color-text-muted); font-size: 0.9rem; margin: 0; }
.offer-card__ends { font-size: 0.82rem; color: var(--color-text-muted); margin: 0; }
.offer-card__ends.is-soon { color: var(--color-accent-gold); font-weight: 700; }
.offer-card__cta { margin-top: auto; padding-top: 0.5rem; color: var(--color-accent-text); font-weight: 600; font-size: 0.9rem; }
/* Enlace "Ofertas" del menú, destacado. */
.site-header__nav-offers { color: var(--color-accent-gold) !important; font-weight: 700; }
a:hover { color: var(--color-accent-gold); }

button { cursor: pointer; font-family: inherit; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* ── Botones ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--border-radius);
  transition: all var(--transition);
  white-space: nowrap;
}
.btn--primary {
  background: linear-gradient(135deg, var(--color-accent), #5a3fd6);
  color: #fff;
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(124, 92, 252, 0.45);
  color: #fff;
}
.btn--secondary {
  background: transparent;
  color: var(--color-accent-gold);
  border: 2px solid var(--color-accent-gold);
}
.btn--secondary:hover { background: var(--color-accent-gold); color: var(--color-bg); }

/* ── Header ──────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--space-lg);
}
.site-header__logo-link { display: flex; align-items: center; }
.site-header__logo-img {
  height: 48px;
  width: auto;
  filter: drop-shadow(0 0 6px rgba(124, 92, 252, 0.35));
}
.site-header__nav { display: flex; align-items: center; }
.site-header__nav a {
  padding: 0.5rem var(--space-md);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}
.site-header__nav a:hover, .site-header__nav a.is-active { color: var(--color-text); }

@media (max-width: 768px) {
  .site-header__nav { display: none; }
}

/* ── Barra inferior móvil (doc 03: cliente compra en móvil) ──── */
.mobile-tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 60;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding: 0.4rem 0 calc(0.4rem + env(safe-area-inset-bottom));
}
.mobile-tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--color-text-muted);
  font-size: 0.65rem;
}
.mobile-tabbar a.is-active, .mobile-tabbar a:hover { color: var(--color-accent-gold); }
.mobile-tabbar svg { width: 22px; height: 22px; }

@media (max-width: 768px) {
  .mobile-tabbar { display: flex; }
  /* Deja aire para la tabbar + el safe-area del iPhone (env() = 0 en el resto). */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ── Hero galaxia (placeholder, CSS puro sin JS) ─────────────── */
.hero-galaxy {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  /* SIN color de fondo sólido debajo. Los degradados son translúcidos, pero el
     var(--color-bg) que iba al final de la pila era opaco y tapaba el campo de estrellas
     que vive en el layout: la galaxia se movía detrás y no se veía justo en la sección
     más visible del sitio. Las secciones de más abajo no lo tenían, y por eso ahí sí
     aparecía — el borde entre "con estrellas" y "sin estrellas" caía a media portada. */
  background:
    radial-gradient(60% 45% at 20% 20%, rgba(124, 92, 252, 0.28), transparent 70%),
    radial-gradient(50% 40% at 85% 30%, rgba(77, 127, 255, 0.22), transparent 70%),
    radial-gradient(45% 35% at 60% 90%, rgba(255, 106, 213, 0.14), transparent 70%);
}
.hero-galaxy .star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
}
.hero-galaxy__logo {
  width: min(480px, 78vw);
  height: auto;
  margin: 0 auto var(--space-xl);
  filter: drop-shadow(0 0 32px rgba(124, 92, 252, 0.45));
}
.hero-galaxy__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  background: rgba(28, 22, 69, 0.45);
  margin-bottom: var(--space-lg);
}
.hero-galaxy h1 { margin-bottom: var(--space-md); }
.hero-galaxy h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-galaxy p {
  color: var(--color-text-muted);
  max-width: 520px;
  margin: 0 auto var(--space-xl);
}

/* ── Carrusel de destacados de la home (slides de 4 productos) ── */
/* Con carrusel, el hero necesita menos aire vertical que el hero de marca. */
.hero-galaxy:has(.hero-carousel) { padding: var(--space-xl) var(--space-lg) var(--space-2xl); }
.hero-carousel { position: relative; max-width: 1120px; margin: 0 auto; }

/* ═══ EL CIELO ═══════════════════════════════════════════════════
   Fondo del sitio entero. Antes vivía dentro del carrusel y por eso había un borde
   duro donde el paisaje terminaba y empezaba el color plano.

   Duraciones como variables para calibrar desde la consola sin desplegar:
     document.documentElement.style.setProperty('--star-near-duration', '25s')
   Menos segundos = más rápido. La lejana SIEMPRE bastante más lenta que la cercana:
   si se acercan, el paralaje se pierde y las dos capas se leen como una sola. */
:root {
  --star-far-duration: 90s;
  --star-near-duration: 45s;
}

/* Fijo y del porte de la ventana: las estrellas quedan quietas mientras el contenido
   pasa por delante. Y la capa mide lo que la pantalla, no lo que el documento — en un
   listado largo, un plano animado de varios miles de píxeles se come la memoria del
   compositor en un teléfono sin verse mejor. */
.sky {
  position: fixed; inset: 0;
  z-index: -2; pointer-events: none; overflow: hidden;
}

/* Absoluto y del alto del documento: los planetas van quedando atrás al bajar. Eso es
   lo que hace que el paisaje cambie a medida que se recorre la página. */
.sky-deep {
  position: absolute; inset: 0;
  z-index: -1; pointer-events: none; overflow: hidden;
}

/* Las dos capas de estrellas. Se anima `transform` y no `background-position` porque
   lo primero lo resuelve el compositor y lo segundo repinta cada cuadro. El `inset`
   negativo da margen para que el borde del plano desplazado nunca entre en cuadro. */
.sky__stars {
  position: absolute; inset: -30%;
  background-repeat: repeat;
}

/* Capa lejana: muchas, chicas y lentas. Las posiciones son irregulares a propósito —
   repartirlas parejo delata la cuadrícula en cuanto el mosaico se repite. */
.sky__stars--far {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px   at 68% 11%, rgba(190,210,255,0.75), transparent),
    radial-gradient(1.2px 1.2px at 34% 62%, rgba(255,255,255,0.70), transparent),
    radial-gradient(1px 1px   at 84% 74%, rgba(210,190,255,0.80), transparent),
    radial-gradient(1.2px 1.2px at 52% 88%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px   at 7%  53%, rgba(255,255,255,0.60), transparent),
    radial-gradient(1.2px 1.2px at 91% 33%, rgba(200,220,255,0.70), transparent),
    radial-gradient(1px 1px   at 44% 27%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.2px 1.2px at 23% 79%, rgba(230,215,255,0.65), transparent),
    radial-gradient(1px 1px   at 73% 57%, rgba(255,255,255,0.60), transparent);
  background-size: 300px 300px;
  animation: star-drift-far var(--star-far-duration) linear infinite;
}

/* Capa cercana: pocas, grandes y brillantes, con el morado y el dorado de la marca.
   El contraste de tamaño con la capa de atrás es la otra mitad del paralaje. */
.sky__stars--near {
  background-image:
    radial-gradient(2.4px 2.4px at 26% 42%, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px     at 78% 24%, rgba(255,179,71,0.85), transparent),
    radial-gradient(2.4px 2.4px at 58% 80%, rgba(158,134,255,0.90), transparent),
    radial-gradient(2px 2px     at 15% 68%, rgba(255,255,255,0.80), transparent),
    radial-gradient(2.2px 2.2px at 88% 61%, rgba(190,160,255,0.85), transparent);
  background-size: 460px 460px;
  animation: star-drift-near var(--star-near-duration) linear infinite;
}

/* ── Planetas ──────────────────────────────────────────────────
   Discos enormes y muy tenues, colocados cada varias pantallas. Van en el flujo del
   documento, así que aparecen y se pierden al bajar y el paisaje deja de repetirse.

   Posicionados en `vh` y no en `%`: así la separación entre uno y otro es la misma en
   una ficha corta que en un listado de veinticuatro productos. En páginas cortas los
   de más abajo simplemente no llegan a verse.

   El truco para que se lean como planeta y no como mancha es el borde: un anillo de
   luz apenas insinuado en un costado, como si les diera el sol desde ahí. Sin eso son
   círculos difusos. */
.sky__planet {
  position: absolute; border-radius: 50%;
  filter: blur(0.5px);
  opacity: 0.5;
}
.sky__planet--1 {
  top: 78vh; right: -8vw; width: 26vw; height: 26vw; max-width: 380px; max-height: 380px;
  background:
    radial-gradient(circle at 32% 30%, rgba(124, 92, 252, 0.30) 0%, rgba(60, 40, 130, 0.16) 45%, rgba(20, 14, 48, 0) 70%);
  box-shadow: inset 8px -6px 30px rgba(158, 134, 255, 0.18);
}
.sky__planet--2 {
  top: 215vh; left: -10vw; width: 34vw; height: 34vw; max-width: 460px; max-height: 460px;
  background:
    radial-gradient(circle at 68% 34%, rgba(255, 179, 71, 0.16) 0%, rgba(120, 70, 40, 0.10) 45%, rgba(20, 14, 48, 0) 70%);
  box-shadow: inset -10px -6px 34px rgba(255, 179, 71, 0.10);
  opacity: 0.42;
}
.sky__planet--3 {
  top: 360vh; right: 4vw; width: 18vw; height: 18vw; max-width: 240px; max-height: 240px;
  background:
    radial-gradient(circle at 40% 28%, rgba(90, 220, 255, 0.18) 0%, rgba(30, 80, 120, 0.10) 48%, rgba(20, 14, 48, 0) 72%);
  box-shadow: inset 6px -5px 24px rgba(90, 220, 255, 0.12);
  opacity: 0.38;
}

/* ── Estrella fugaz ────────────────────────────────────────────
   Una sola, reutilizada. La cola es un degradado que se desvanece hacia atrás, y el
   elemento se inclina para que el rastro apunte en la dirección del movimiento — una
   raya horizontal moviéndose en diagonal se ve como un error, no como un meteoro.
   Arranca invisible: la posición, el ángulo y el momento los pone space.js. */
.sky__shooting {
  position: absolute; top: 0; left: 0;
  width: 140px; height: 1.5px; opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 70%, #fff 100%);
  border-radius: 999px;
  filter: drop-shadow(0 0 6px rgba(190, 210, 255, 0.9));
}

/* El desplazamiento es múltiplo EXACTO del mosaico en los dos ejes (2×300 y 1×300;
   2×460 y 1×460). Sólo así, al cerrar el ciclo, el patrón coincide consigo mismo y el
   salto de vuelta al inicio es invisible. Con un valor a medio camino —por ejemplo la
   mitad en Y— la costura se ve como un tirón cada tantos segundos. */
@keyframes star-drift-far  { to { transform: translate3d(-600px, 300px, 0); } }
@keyframes star-drift-near { to { transform: translate3d(-920px, 460px, 0); } }

/* Sin movimiento: las estrellas se quedan quietas pero siguen ahí. La atmósfera no
   depende de que algo se mueva, y quitarlas dejaría la sección más pobre sin motivo. */
@media (prefers-reduced-motion: reduce) {
  /* Las estrellas se quedan quietas pero siguen ahí: la atmósfera no depende de que
     algo se mueva, y borrarlas dejaría el sitio más pobre sin ninguna razón. Los
     planetas tampoco se van — nunca se movieron. La estrella fugaz sí queda fuera:
     ese sí es un destello que cruza la pantalla, y es justo lo que esta preferencia
     pide evitar (lo apaga space.js, que no la programa siquiera). */
  .sky__stars { animation: none; }
}

/* Con las fichas flotando manda GSAP sobre `transform`: dejarlo también en la
   transición de CSS hace que las dos animen lo mismo y el movimiento salga a tirones.
   El hover conserva su borde y su fondo; el relieve pasa a ser una escala que GSAP
   compone con la deriva. */
.hero-tile.is-floating { transition: border-color 0.15s ease, background 0.15s ease; }
.hero-tile.is-floating:hover,
.hero-tile.is-floating:focus-visible { transform: none; }
.hero-carousel__head { text-align: center; margin-bottom: var(--space-lg); }
.hero-carousel__head .hero-galaxy__chip { margin-bottom: 0; }   /* el h1 ya trae su margin-top */
.hero-carousel__h1 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin: var(--space-sm) 0 0; }
.hero-carousel__h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-carousel__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.hero-carousel__track::-webkit-scrollbar { display: none; }
.hero-slide {
  flex: 0 0 100%; scroll-snap-align: center; box-sizing: border-box;
  padding: var(--space-sm) clamp(2.75rem, 6vw, 4rem);
}
/* Flex centrado: un último slide con menos de 4 productos queda al centro, no pegado a la
   izquierda (los tiles no crecen más allá de su max-width). En móvil vuelve a grilla 2×2. */
.hero-slide__grid {
  display: flex; justify-content: center;
  gap: clamp(0.6rem, 2vw, 1.4rem);
}
.hero-slide__grid .hero-tile { flex: 1 1 0; }

.hero-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.3rem; width: 100%; max-width: 220px; padding: 0.75rem 0.6rem;
  text-decoration: none; color: inherit; border-radius: 14px;
  border: 1px solid transparent;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.hero-tile:hover, .hero-tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-border);
  background: rgba(255, 255, 255, 0.04);
}
.hero-tile__media { position: relative; width: 100%; max-width: 170px; }
.hero-tile__img {
  width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 10px 26px rgba(124, 92, 252, 0.4));
}
.hero-tile__img--placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--color-border);
}
.hero-tile__badge {
  position: absolute; top: 6px; right: 6px; padding: 1px 7px;
  font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--color-sale); border-radius: 999px;
}
.hero-tile__set {
  font-size: 0.68rem; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.35rem;
}
.hero-tile__title {
  font-size: 0.86rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-tile__price { font-weight: 700; font-size: 0.95rem; }
.hero-tile__was { color: var(--color-text-muted); text-decoration: line-through; font-weight: 500; margin-right: 5px; font-size: 0.82em; }
.hero-tile__now { color: var(--color-accent-gold); }

.hero-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1;
  color: #fff; background: rgba(20, 16, 45, 0.7); border: 1px solid var(--color-border);
  transition: background 0.15s;
}
.hero-carousel__nav:hover, .hero-carousel__nav:focus-visible { background: rgba(124, 92, 252, 0.55); }
.hero-carousel__nav--prev { left: 0; }
.hero-carousel__nav--next { right: 0; }
/* min-height reserva el alto desde el SSR (los puntos los inyecta JS → sin salto CLS);
   visibility en vez de display para que la reserva se mantenga sin JS. */
.hero-carousel__dots { display: flex; justify-content: center; gap: 4px; margin-top: var(--space-sm); min-height: 25px; }
.hero-carousel__dots[aria-hidden="true"] { visibility: hidden; }
/* Área táctil de 25px (WCAG 2.5.8) con el punto visual de 9px al centro. */
.hero-carousel__dot {
  width: 25px; height: 25px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 8px solid transparent; background-clip: padding-box;
  background-color: rgba(255, 255, 255, 0.35);
  transition: background-color 0.15s, transform 0.15s;
}
.hero-carousel__dot.is-active { background-color: var(--color-accent); transform: scale(1.2); }

@media (max-width: 720px) {
  .hero-slide { padding: var(--space-sm) var(--space-sm); }
  .hero-slide__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; }
  .hero-tile { max-width: 190px; padding: 0.5rem 0.4rem; }
  .hero-carousel__nav { display: none; }   /* en móvil se desliza con el dedo */
}

/* ── Sección features del placeholder ────────────────────────── */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  padding: var(--space-2xl) 0 var(--space-3xl);
}
.feature-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
}
.feature-card h3 {
  font-size: 1rem;
  margin-bottom: var(--space-sm);
  color: var(--color-accent-gold);
}
.feature-card p { font-size: 0.9rem; color: var(--color-text-muted); }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
  margin-top: auto;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding: var(--space-xl) 0;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
}
.site-footer__brand {
  font-family: var(--font-heading);
  font-weight: 800;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.site-footer small { color: var(--color-text-muted); font-size: 0.8rem; }

/* ── Utilidades ──────────────────────────────────────────────── */
.error-page { text-align: center; padding: var(--space-3xl) var(--space-lg); }
.error-page h1 { margin-bottom: var(--space-md); }
.error-page p { color: var(--color-text-muted); margin-bottom: var(--space-xl); }

/* ── Secciones del storefront (E05) ──────────────────────────── */
.section { margin-top: var(--space-3xl); }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-md); margin-bottom: var(--space-lg);
}
.section__title { font-size: 1.5rem; margin: 0; }
.section__more {
  color: var(--color-accent-text); font-size: 0.85rem; font-weight: 600;
  white-space: nowrap;
}
.section__more:hover { color: var(--color-accent-gold); }

/* ── Grilla de productos ─────────────────────────────────────── */
.product-grid {
  display: grid;
  /* mínimo 140px: en pantallas de 360px caben 2 columnas (150px caía a 1). */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-md);
}

/* El mínimo crece con la pantalla. Con 140px fijos, en un monitor de 1280 salían ocho
   columnas: cartas diminutas y títulos de dos líneas cortadas. En una tienda de cartas
   la foto ES el producto, así que en pantallas grandes conviene menos columnas y más
   grandes antes que meter la mayor cantidad posible. */
@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
}
@media (min-width: 1200px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-lg); }
}

.product-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--edge-light), var(--shadow-rest);
  transition: transform 220ms var(--ease-out),
              border-color 220ms var(--ease-out),
              box-shadow 220ms var(--ease-out),
              background 220ms var(--ease-out);
}
.product-card__link {
  display: flex; flex-direction: column; flex: 1;
  text-decoration: none; color: inherit;
}
.product-card:hover,
.product-card:focus-within {
  transform: translateY(-4px);
  background: var(--surface-card-hover);
  border-color: var(--color-accent);
  box-shadow: var(--edge-light-strong), var(--shadow-lift);
}
.product-card__media {
  position: relative;
  aspect-ratio: 5 / 7;
  /* Viñeta radial: la carta queda sobre un pozo de luz en vez de sobre un rectángulo
     liso. Es lo que hace que la foto se lea como objeto expuesto. */
  background:
    radial-gradient(75% 60% at 50% 38%, rgba(124, 92, 252, 0.10) 0%, rgba(124, 92, 252, 0) 70%),
    var(--color-bg-secondary);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ── Reflejo holográfico (holo.js) ─────────────────────────────
   El brillo que sigue al puntero. Las tres variables las escribe GSAP; los valores
   por defecto dejan el reflejo apagado, así que sin JS esto no se ve nunca.

   Va sólo sobre la imagen y no sobre la tarjeta entera: un `screen` por encima del
   título y el precio les bajaría el contraste, y eso ya está medido para pasar AA. */
.product-card__media::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;          /* jamás debe robarle el clic al producto */
  opacity: var(--holo-alpha, 0);

  /* Cuatro capas, y el orden importa: primero el núcleo especular blanco, después
     las franjas de color DESPLAZADAS respecto de él.

     Ese desplazamiento es todo el truco. Una holo no devuelve luz blanca: la lámina
     difracta y separa el espectro, así que el cian queda de un lado del reflejo y el
     magenta del otro. Con un solo degradado blanco esto se veía como un foco sobre
     un plástico cualquiera; con las franjas corridas se lee como la lámina. */
  background:
    /* núcleo especular — el punto donde pega la luz */
    radial-gradient(30% 24% at var(--holo-x, 50%) var(--holo-y, 50%),
      rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 70%),
    /* cian, arriba y a la izquierda del núcleo */
    radial-gradient(66% 52% at calc(var(--holo-x, 50%) - 13%) calc(var(--holo-y, 50%) + 9%),
      rgba(90, 220, 255, 0.20) 0%, rgba(90, 220, 255, 0) 62%),
    /* magenta, al lado opuesto: es el par que hace legible la difracción */
    radial-gradient(66% 52% at calc(var(--holo-x, 50%) + 15%) calc(var(--holo-y, 50%) - 11%),
      rgba(255, 120, 215, 0.17) 0%, rgba(255, 120, 215, 0) 62%),
    /* dorado de fondo, amplio y tenue: le da temperatura al conjunto y evita que el
       reflejo se vea frío sobre las cartas de fondo cálido */
    radial-gradient(85% 65% at var(--holo-x, 50%) var(--holo-y, 50%),
      rgba(255, 200, 120, 0.11) 0%, rgba(255, 200, 120, 0) 75%);

  mix-blend-mode: screen;
}

/* Con JS activo manda GSAP sobre `transform`. Dejarlo también en la transición de
   CSS hace que las dos animen la misma propiedad y el giro salga a tirones. */
.product-card.is-holo {
  transition: border-color 220ms var(--ease-out),
              box-shadow 220ms var(--ease-out),
              background 220ms var(--ease-out);
}
.product-card.is-holo:hover,
.product-card.is-holo:focus-within { transform: none; }
.product-card__img {
  width: 100%; height: 100%; object-fit: contain;
  /* Acercar la carta al pasar el mouse se lee como "tomarla en la mano". Se anima
     `scale` y no el tamaño: no recalcula layout y no arrastra a la grilla entera.

     SIN `will-change`. Lo tenía y fue un error: promueve la imagen a su propia capa
     del compositor, que se rasteriza una vez y después se compone escalada — y el
     texto de la carta, que es diminuto, sale visiblemente más blando. Con 24 tarjetas
     por pantalla son 24 capas extra de memoria a cambio de degradar justo lo que el
     cliente necesita leer: el nombre del ataque y el número de la carta.

     La propia documentación de la propiedad advierte que es un último recurso y que
     no se deje puesta de forma permanente. Una transición de 320ms sobre `transform`
     no la necesita: el navegador ya promueve la capa al empezar la animación. */
  transition: transform 320ms var(--ease-out);
}
.product-card:hover .product-card__img,
.product-card:focus-within .product-card__img { transform: scale(1.045); }
.product-card__img--placeholder { color: var(--color-border); font-size: 2.5rem; }
.product-card__body { padding: var(--space-sm) var(--space-md) var(--space-md); }
.product-card__set {
  display: block; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-muted);
  margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-card__title {
  font-size: 0.85rem; font-weight: 600; margin: 0 0 var(--space-xs);
  line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Flex con wrap: en tarjetas angostas el badge baja de línea alineado, sin quebrar el precio. */
.product-card__price {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; row-gap: 2px;
  font-weight: 700; color: var(--color-accent-gold);
}
/* E16-H01c: precio con promo en la tarjeta */
.product-card__was { color: var(--color-text-muted); text-decoration: line-through; font-weight: 500; font-size: 0.85em; }
.product-card__now { color: var(--color-accent-gold); }
.product-card__badge { display: inline-block; padding: 0 5px; font-size: 0.72em; font-weight: 700;
    color: #fff; background: var(--color-sale); border-radius: 999px; }

/* ── Franja de banners administrables ────────────────────────── */
.banner-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-3xl);   /* mismo ritmo vertical que .section */
}
.banner-strip__item {
  display: flex; align-items: center; justify-content: center;
  min-height: 96px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  color: var(--color-text);
  font-weight: 600; text-decoration: none;
}
.banner-strip__item img { width: 100%; height: 100%; object-fit: cover; }

/* ── Enlaces del footer ──────────────────────────────────────── */
.site-footer__links {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  justify-content: center; margin: var(--space-sm) 0;
}
.site-footer__links a { color: var(--color-text-muted); font-size: 0.82rem; }
.site-footer__links a:hover { color: var(--color-accent); }

/* ── Páginas de contenido (CMS: store.pages) ─────────────────── */
.cms-page { max-width: 780px; }
.cms-page h1 { margin-bottom: var(--space-lg); }
.cms-page__body { line-height: 1.7; color: var(--color-text); }
.cms-page__body h2 {
  font-size: 1.25rem; margin-top: var(--space-xl); margin-bottom: var(--space-sm);
}
.cms-page__body p { margin-bottom: var(--space-md); }
.cms-page__body a { color: var(--color-accent); text-decoration: underline; }
.cms-page__body ul, .cms-page__body ol { margin: 0 0 var(--space-md) var(--space-xl); }

/* ── Menú desplegable de series (SSR, hover CSS) ─────────────── */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown__menu {
  position: absolute; top: 100%; left: 0; z-index: 30;
  /* 300px y no 220: los nombres de serie más largos («HeartGold & SoulSilver») entraban justos y
     la flecha del submenú les quedaba encima. Con aire a los lados el menú se lee como un panel
     y no como una lista apretada. */
  min-width: 300px; padding: var(--space-sm) 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* Filas altas a propósito. Con 0.5rem quedaban a 30px y apuntarle a una serie exigía puntería:
   para llegar al submenú hay que cruzar en diagonal, y al pasar por encima de la fila vecina el
   submenú cambiaba solo. Con 0.7rem el blanco crece y el recorrido diagonal cabe dentro de la
   misma fila. */
.nav-dropdown__menu a {
  display: block; padding: 0.7rem var(--space-lg);
  color: var(--color-text); font-size: 0.85rem; white-space: nowrap;
}
.nav-dropdown__menu a:hover { background: var(--color-bg-secondary); color: var(--color-accent); }

/* Singles y Sellados: las dos formas de recorrer el catálogo. Un poco más marcadas que las
   series, porque no son una serie más de la lista sino otra manera de entrar. */
.nav-dropdown__seccion { font-weight: 600; }
.nav-dropdown__sep {
  height: 1px; background: var(--color-border);
  margin: var(--space-xs) var(--space-md);
}

/* ── Índice de sets (/sets) ──────────────────────────────────── */
.set-series { margin-top: var(--space-2xl); }
.set-series__title {
  font-size: 1.15rem; margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-border);
}
.set-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
}
.set-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-xs); padding: var(--space-lg) var(--space-md) var(--space-md);
  background: var(--surface-card); border: 1px solid var(--color-border);
  border-radius: 12px; text-decoration: none; color: inherit;
  box-shadow: var(--edge-light), var(--shadow-rest);
  transition: transform 220ms var(--ease-out),
              border-color 220ms var(--ease-out),
              box-shadow 220ms var(--ease-out),
              background 220ms var(--ease-out);
}
.set-card:hover,
.set-card:focus-visible {
  transform: translateY(-4px);
  background: var(--surface-card-hover);
  border-color: var(--color-accent);
  box-shadow: var(--edge-light-strong), var(--shadow-lift);
}
.set-card__logo {
  height: 72px; display: flex; align-items: center; justify-content: center; width: 100%;
}
.set-card__logo img {
  max-height: 72px; max-width: 100%; object-fit: contain;
  /* Los logos de set son PNG con transparencia sobre fondo oscuro: sin una sombra
     propia flotan sin peso. Y muchos son casi negros, así que un halo claro apenas
     perceptible los despega del fondo. */
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  transition: transform 320ms var(--ease-out);
}
.set-card:hover .set-card__logo img { transform: scale(1.06); }
.set-card__logo-ph { color: var(--color-text-muted); font-weight: 700; font-size: 0.9rem; }
.set-card__name { font-weight: 600; font-size: 0.9rem; }
.set-card__count { color: var(--color-text-muted); font-size: 0.78rem; }

/* ── Listado con filtros (E06-H01) ───────────────────────────── */
.listing__count { color: var(--color-text-muted); font-size: 0.85rem; }
.listing__sort { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
.listing__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  color: var(--color-text-muted); font-size: 0.78rem; text-decoration: none;
  white-space: nowrap;
}
.chip:hover { border-color: var(--color-accent); color: var(--color-text); }
.chip--active { background: var(--color-accent); border-color: var(--color-accent); color: #0b0b1a; font-weight: 600; }
.chip--remove { color: var(--color-text); }
.chip--clear { color: var(--color-accent); border-style: dashed; }

/* ── Listado y facetas ────────────────────────────────────────
   Escrito mobile-first: una columna por defecto, la barra lateral aparece recién en
   escritorio. Antes era al revés y el móvil quedaba como el caso excepcional que se
   arregla al final — que es justo como se llega a un panel de filtros que tapa los
   productos.

   Breakpoints del sitio: 560 (teléfono ancho) · 768 (tablet, y el corte principal de
   layout) · 1200 (escritorio holgado). Los que quedan sueltos en otros anchos son
   deuda de antes; al tocar un componente, alinearlo a esta escala. */
.listing { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: start; }
.listing__filters { display: block; }

/* ── El panel plegable ─────────────────────────────────────────
   En móvil es una tarjeta cerrada; en escritorio, la barra lateral de siempre. */
.filters {
  background: var(--surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--edge-light), var(--shadow-rest);
  overflow: hidden;
}
.filters__summary {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 0.85rem var(--space-md);
  cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  list-style: none;              /* Firefox */
  user-select: none;
}
.filters__summary::-webkit-details-marker { display: none; }   /* Safari */

/* Flecha propia: la del navegador cambia de forma entre navegadores y no se puede
   animar. `currentColor` la mantiene ligada al estado de foco y hover. */
.filters__summary::after {
  content: ""; margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 200ms var(--ease-out);
}
.filters[open] .filters__summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* El contador es lo que evita el peor caso del panel plegado: alguien llega desde un
   enlace compartido con un filtro puesto, ve menos productos de los que espera y nada
   se lo explica. */
.filters__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem;
  border-radius: 999px; background: var(--color-accent); color: #fff;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0;
}
.filters__body {
  display: flex; flex-direction: column; gap: var(--space-lg);
  padding: 0 var(--space-md) var(--space-md);
}

@media (min-width: 768px) {
  .listing { grid-template-columns: 230px 1fr; gap: var(--space-xl); }
  .listing__filters { position: sticky; top: calc(var(--header-height) + var(--space-md)); }

  /* En escritorio la barra pierde el aspecto de tarjeta y vuelve a ser una columna.
     Quien la abre es filters.js; acá NO se fuerza nada visible a la fuerza — el truco
     de sobrescribir el `display` de los hijos de un <details> cerrado dejó de
     funcionar en Chrome, que ahora usa ::details-content con content-visibility.

     El resumen se queda VISIBLE, como encabezado de la columna. Sirve de dos cosas:
     es el plan B si el JS no carga (un clic y aparecen los filtros, nunca una barra
     vacía) y de paso deja plegarlos a quien quiera más espacio para la grilla. */
  .filters {
    background: none; border: none; box-shadow: none; border-radius: 0; overflow: visible;
  }
  .filters__summary { padding: 0 0 var(--space-sm); color: var(--color-text-muted); }
  .filters__body { padding: 0; }
}

.facet { display: flex; flex-direction: column; gap: 2px; }
.facet__title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-muted); margin-bottom: var(--space-xs);
}
.facet__item {
  display: block; padding: 0.3rem 0.5rem; border-radius: 8px;
  color: var(--color-text); font-size: 0.85rem; text-decoration: none;
}
.facet__item:hover { background: var(--color-bg-secondary); }
.facet__item.is-active { background: var(--color-bg-secondary); color: var(--color-accent); font-weight: 600; }

.pager {
  display: flex; align-items: center; justify-content: center; gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
.pager__btn {
  padding: 0.5rem 1rem; border-radius: 10px;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  color: var(--color-text); text-decoration: none; font-size: 0.85rem;
}
.pager__btn:hover { border-color: var(--color-accent); }
.pager__info { color: var(--color-text-muted); font-size: 0.82rem; }

/* La lista de una faceta puede ser enorme —tienes más de 200 sets— y eso no era
   navegable ni en escritorio: empujaba la barra lateral varias pantallas hacia abajo
   y dejaba Rareza, Idioma y Precio fuera de vista. Con tope de alto y scroll propio,
   todas las facetas quedan alcanzables. */
.facet__list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 15rem; overflow-y: auto;
  /* Espacio para que el foco del teclado no quede pegado al borde del recorte. */
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.facet__list::-webkit-scrollbar { width: 6px; }
.facet__list::-webkit-scrollbar-thumb {
  background: var(--color-border); border-radius: 999px;
}

/* ── Ficha de producto (PDP, E06-H02) ────────────────────────── */
.breadcrumb { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb span { margin: 0 4px; }

/* Enlace "atrás" (BackLink). Se usa dentro de .breadcrumb y también suelto, así que
   trae su propio tamaño y margen en vez de heredarlos del contenedor. El área de
   toque cómoda en móvil sale del padding vertical, no de un alto fijo. */
.backlink {
    display: inline-block;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    padding: 4px 0;
    margin-bottom: var(--space-md);
    text-decoration: none;
}
.backlink:hover { color: var(--color-accent); }
.breadcrumb .backlink { margin-bottom: 0; padding: 0; }

.pdp { display: grid; grid-template-columns: 420px 1fr; gap: var(--space-2xl); align-items: start; }
/* min-width:0 permite que las columnas se ENCOJAN bajo su min-content: sin esto, la
   tabla de variantes infla la columna y toda la ficha desborda el viewport en móvil. */
.pdp > * { min-width: 0; }
.pdp__media {
  position: sticky; top: 88px;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: 14px; padding: var(--space-lg);
  /* Columna para que las miniaturas caigan bajo la foto. align-items centra igual que el
     justify-content de antes: sin miniaturas se ve idéntico a como estaba. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-md);
}
.pdp__img { max-width: 100%; height: auto; border-radius: 8px; }

/* ── Galería ────────────────────────────────────────────────────────────────
   Sólo renderiza cuando el producto tiene fotos adicionales. Scroll horizontal
   propio: con muchas fotos la fila se desplaza sola en vez de empujar la ficha. */
.pdp__thumbs {
  display: flex; gap: var(--space-sm); max-width: 100%;
  overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: thin;
}
.pdp__thumb {
  flex: 0 0 auto; display: block; line-height: 0;
  border: 2px solid transparent; border-radius: 6px; padding: 2px;
  transition: border-color .15s ease;
}
.pdp__thumb img { width: 64px; height: auto; border-radius: 4px; display: block; }
.pdp__thumb:hover { border-color: var(--color-border); }
.pdp__thumb.is-active { border-color: var(--color-accent, #7c5cff); }
/* El foco tiene que verse: las miniaturas se recorren con las flechas del teclado. */
.pdp__thumb:focus-visible { outline: 2px solid var(--color-accent, #7c5cff); outline-offset: 2px; }
.pdp__img--ph {
  width: 100%; aspect-ratio: 5/7; display: flex; align-items: center; justify-content: center;
  color: var(--color-border); font-size: 3rem;
}
/* ── Preventa ───────────────────────────────────────────────────────────────
   Ámbar y no rojo: no es una advertencia de error, es una condición de compra
   que el cliente tiene que leer antes de decidir. */
.pdp__presale {
  background: rgba(255, 176, 32, .10);
  border: 1px solid rgba(255, 176, 32, .45);
  border-left-width: 4px;
  border-radius: 10px;
  padding: var(--space-md);
  margin: var(--space-lg) 0;
  font-size: .95rem;
}
.pdp__presale strong { color: #ffb020; }
.pdp__presale p { margin: var(--space-sm) 0 0; opacity: .9; }
.pdp__presale-mixto { font-size: .88rem; opacity: .75 !important; }

.product-card__presale {
  display: inline-block; margin-top: var(--space-xs);
  background: rgba(255, 176, 32, .15); color: #ffb020;
  border: 1px solid rgba(255, 176, 32, .4); border-radius: 999px;
  padding: 2px 10px; font-size: .75rem; font-weight: 600;
}

.pdp__title { font-size: 1.6rem; margin-bottom: var(--space-sm); }
.pdp__subtitle { font-size: 1.1rem; margin: var(--space-xl) 0 var(--space-sm); }
.pdp__meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
.pdp__tag {
  padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.75rem;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border); color: var(--color-text-muted);
}
.pdp__cart-note { font-size: 0.8rem; margin-top: var(--space-sm); }
.pdp__desc { margin-top: var(--space-xl); }

/* La tabla de variantes se desliza dentro de su contenedor en pantallas angostas
   (5 columnas no caben en 360px): nunca scroll horizontal de la página completa. */
.variants-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.variants { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.variants th, .variants td {
  text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--color-border);
}
.variants th { color: var(--color-text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }
.variants__was { color: var(--color-text-muted); text-decoration: line-through; margin-right: 6px; font-size: 0.8rem; }
/* E16-H01b: badge de descuento por promo en la ficha */
.variants__badge { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 0.72rem;
    font-weight: 700; color: #fff; background: var(--color-sale); border-radius: 999px; vertical-align: middle; }
.variants tr.is-out td { color: var(--color-text-muted); }
.badge-ok { color: var(--color-success); font-weight: 600; font-size: 0.8rem; }
.badge-out { color: var(--color-text-muted); font-weight: 600; font-size: 0.8rem; }

@media (max-width: 720px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__media { position: static; }
}

/* ── Búsqueda (E06-H03) ──────────────────────────────────────── */
.search-box { position: relative; flex: 1 1 220px; max-width: 320px; }
.search-box input[type="search"] {
  width: 100%; padding: 0.5rem 0.9rem; border-radius: 999px;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  color: var(--color-text); font-size: 0.85rem; font-family: var(--font-body);
}
.search-box input[type="search"]:focus { outline: none; border-color: var(--color-accent); }
.search-box__results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: 10px; overflow: hidden; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.search-box__results a {
  display: block; padding: 0.5rem 0.9rem; color: var(--color-text);
  font-size: 0.85rem; text-decoration: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.search-box__results a:hover { background: var(--color-bg-secondary); color: var(--color-accent); }

.search-form--page { display: flex; gap: var(--space-sm); margin-bottom: var(--space-xl); max-width: 520px; }
.search-form--page input[type="search"] {
  flex: 1; padding: 0.6rem 1rem; border-radius: 10px;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  color: var(--color-text); font-size: 0.95rem; font-family: var(--font-body);
}
.search-form--page button {
  padding: 0.6rem 1.2rem; border-radius: 10px; border: none;
  background: var(--color-accent); color: #0b0b1a; font-weight: 600; cursor: pointer;
}

/* La lupa del header sólo existe cuando la caja de búsqueda no cabe. Se intercambian:
   nunca están las dos, nunca falta ninguna. El área táctil llega a 44px, que es el
   mínimo cómodo con el pulgar. */
.site-header__search-link {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: auto;
  color: var(--color-text-muted); border-radius: 50%;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.site-header__search-link:hover { color: var(--color-text); background: var(--color-bg-secondary); }

@media (max-width: 860px) {
  .search-box { display: none; }
  .site-header__search-link { display: inline-flex; }
}

/* ── Carro (E07-H01) ─────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.btn--sm { padding: 0.4rem 0.85rem; font-size: 0.72rem; }
.btn--ghost {
  background: transparent; color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-accent); color: #fff; }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Cuenta en el header (Ingresar / Mi cuenta / Salir) */
.site-header__account { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
/* "Mi cuenta" es la acción principal: va en el color de texto normal, no apagado. */
.site-header__account-link { color: var(--color-text); font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.site-header__account-link:hover { color: var(--color-text); }
.site-header__logout { margin: 0; }
.site-header__logout-btn {
  /* "Mi cuenta" y "Salir" tenían el mismo color y tamaño: se leían como un solo texto de
     tres palabras. Salir queda como acción secundaria — más chico, apagado y separado por
     una línea — para que no se toque por error al buscar la cuenta. */
  background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 0 0 0 var(--space-sm);
  margin-left: 2px;
  border-left: 1px solid var(--color-border);
  color: var(--color-text-muted); font-size: 0.78rem;
}
.site-header__logout-btn:hover { color: var(--color-text); }

/* Carro en el header */
.site-header__cart {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px; color: var(--color-text);
  border: 1px solid var(--color-border); flex-shrink: 0;
}
.site-header__cart:hover { border-color: var(--color-accent); color: #fff; }
.site-header__cart svg { width: 22px; height: 22px; }
.site-header__cart-badge {
  position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 10px; background: var(--color-accent-gold);
  color: var(--color-bg); font-size: 0.7rem; font-weight: 700; line-height: 19px;
  text-align: center;
}

/* Botón agregar en la tabla de variantes de la PDP */
.variants__buy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }

/* Página /carro */
.cart-page { max-width: 1080px; }
.cart { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-xl); align-items: start; }
.cart__lines { display: flex; flex-direction: column; gap: var(--space-md); }

.cart-line {
  display: grid; grid-template-columns: 60px 1fr auto; gap: var(--space-md);
  padding: var(--space-md); background: var(--color-bg-card);
  border: 1px solid var(--color-border); border-radius: var(--border-radius-lg);
}
.cart-line.is-out { opacity: 0.7; }
.cart-line__media {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 84px; border-radius: 6px; overflow: hidden;
  background: var(--color-bg-secondary);
}
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__ph { font-size: 1.5rem; color: var(--color-accent); }
.cart-line__info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cart-line__title { font-weight: 600; color: var(--color-text); }
.cart-line__title:hover { color: var(--color-accent); }
.cart-line__variant { font-size: 0.82rem; color: var(--color-text-muted); }
.cart-line__price { font-size: 0.9rem; }
.cart-line__was { color: var(--color-text-muted); text-decoration: line-through; margin-right: 0.4rem; }
.cart-line__unit { color: var(--color-text-muted); font-size: 0.8rem; }
.cart-line__note { font-size: 0.8rem; color: var(--color-accent-gold); }
.cart-line__note--out { color: var(--color-error); }
.cart-line__actions {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; justify-content: space-between;
}
.cart-qty { display: flex; gap: 0.4rem; align-items: center; }
.cart-qty input[type="number"] {
  width: 62px; padding: 0.35rem 0.5rem; border-radius: 6px;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  color: var(--color-text); font-size: 0.9rem;
}
.cart-line__total { font-weight: 700; white-space: nowrap; }
.cart-line__remove {
  background: none; border: none; color: var(--color-text-muted);
  font-size: 0.8rem; cursor: pointer; text-decoration: underline; padding: 0;
}
.cart-line__remove:hover { color: var(--color-error); }

.cart-summary {
  position: sticky; top: 90px; padding: var(--space-lg);
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg); display: flex; flex-direction: column; gap: 0.65rem;
}
.cart-summary__title { font-size: 1.05rem; margin-bottom: 0.25rem; }
.cart-summary__row { display: flex; justify-content: space-between; font-size: 0.9rem; }
.cart-summary__row--muted { color: var(--color-text-muted); font-size: 0.82rem; }
.cart-summary__row--total {
  font-size: 1.15rem; font-weight: 700; padding-top: 0.6rem;
  border-top: 1px solid var(--color-border); margin-top: 0.35rem;
}
/* Lo que el cliente se ahorra, en el color de oferta del sistema. */
.cart-summary__row--save { color: var(--color-sale); font-weight: 600; }
.cart-summary__cta { width: 100%; margin-top: 0.5rem; }

/* ── Aviso de oferta por terminar (< 72 h) ───────────────────── */
.ending-soon {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  max-width: var(--container-max, 1200px); margin: var(--space-md) auto 0;
  padding: 0.6rem 1rem; border-radius: var(--border-radius);
  background: rgba(200, 30, 84, 0.1); border: 1px solid var(--color-sale);
  color: var(--color-text); text-decoration: none; font-size: 0.9rem;
}
.ending-soon:hover { background: rgba(200, 30, 84, 0.16); }
.ending-soon__clock { font-size: 1.1rem; }
.ending-soon__text { flex: 1; min-width: 0; }
.ending-soon__text strong { color: var(--color-sale); }
.ending-soon__cta { font-size: 0.82rem; font-weight: 600; color: var(--color-sale); white-space: nowrap; }

@media (max-width: 560px) {
  /* En móvil el CTA se va abajo antes que apretar el texto contra el borde. */
  .ending-soon { margin-left: var(--space-md); margin-right: var(--space-md); }
  .ending-soon__cta { width: 100%; }
}

/* ── Cupón (E16-H03) ─────────────────────────────────────────── */
.coupon { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--color-border); }
.coupon__label { display: block; font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 0.35rem; }
.coupon__row { display: flex; gap: 0.5rem; }
.coupon__input {
  flex: 1; min-width: 0; padding: 0.5rem 0.7rem; font-size: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text); background: var(--color-bg); border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}
.coupon__input::placeholder { text-transform: none; letter-spacing: normal; color: var(--color-text-muted); }
.coupon__ok { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.coupon__tag {
  padding: 0.2rem 0.55rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
  color: #fff; background: var(--color-sale); border-radius: 999px;
}
.coupon__saved { font-size: 0.82rem; color: var(--color-text-muted); flex: 1; min-width: 0; }
.coupon__remove {
  background: none; border: none; padding: 0.25rem; cursor: pointer;
  font-size: 0.8rem; color: var(--color-text-muted); text-decoration: underline;
}
.coupon__remove:hover { color: var(--color-text); }
.cart-summary__note { font-size: 0.75rem; text-align: center; }
.cart-summary__continue { display: block; text-align: center; color: var(--color-accent); font-size: 0.85rem; }

.cart-alert { padding: 0.7rem 1rem; border-radius: var(--border-radius); margin-bottom: var(--space-md); font-size: 0.88rem; }
.cart-alert--warn { background: rgba(255, 179, 71, 0.12); border: 1px solid var(--color-accent-gold); color: var(--color-accent-gold); }
.cart-alert--error { background: rgba(231, 76, 60, 0.12); border: 1px solid var(--color-error); color: var(--color-error); }
.cart-alert--success { background: rgba(46, 204, 113, 0.12); border: 1px solid var(--color-success); color: var(--color-success); }
.cart-empty { text-align: center; padding: var(--space-xl) 0; display: flex; flex-direction: column; gap: var(--space-md); align-items: center; }

@media (max-width: 760px) {
  .cart { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}
@media (max-width: 560px) {
  .cart-line { grid-template-columns: 60px 1fr; }
  .cart-line__actions {
    grid-column: 1 / -1; flex-direction: row; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;
    padding-top: 0.6rem; border-top: 1px solid var(--color-border);
  }
}

/* ── Quick-add "+ Carro" en la tarjeta (E07-H02) ─────────────── */
/* El de una variante es un <button> dentro de un form; el de varias variantes
   (E07-H03) es un <a> a la ficha que el JS convierte en selector. Se ven igual. */
.product-card__quickadd { position: absolute; top: 8px; right: 8px; z-index: 2; }

/* Ocupa el mismo lugar que el "+ Carro" — la tarjeta no cambia de forma según haya stock o no.
   En gris y sin sombra a propósito: informa, no invita a hacer clic. */
.product-card__soldout {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  padding: 0.4rem 0.6rem; border-radius: 999px;
  background: rgba(10, 10, 20, 0.82);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.03em; text-transform: uppercase;
}

/* La foto de algo agotado se atenúa: se distingue de un vistazo al recorrer la grilla, sin
   tener que leer cada etiqueta. */
.product-card:has(.product-card__soldout) .product-card__img { opacity: 0.45; }
.product-card__quickadd button,
a.product-card__quickadd--picker {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.4rem 0.6rem; border: none; border-radius: 999px; cursor: pointer;
  background: var(--color-accent); color: #fff; text-decoration: none;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.68rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); transition: all var(--transition);
}
.product-card__quickadd button:hover,
a.product-card__quickadd--picker:hover { background: #5a3fd6; transform: scale(1.05); color: #fff; }
.product-card__quickadd svg { width: 15px; height: 15px; }
@media (max-width: 600px) {
  .product-card__quickadd button span,
  a.product-card__quickadd--picker span { display: none; }
  .product-card__quickadd button,
  a.product-card__quickadd--picker { padding: 0.5rem; }
}

/* ── Selector de variante sobre la grilla (E07-H03) ──────────── */
.vpicker { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.vpicker__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.vpicker__panel {
  position: relative; width: min(30rem, 100%); max-height: 80vh; overflow-y: auto;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg); padding: 1rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.vpicker__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.vpicker__title { font-size: 1rem; margin: 0; }
.vpicker__x {
  background: none; border: none; color: var(--color-text-muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 0.25rem;
}
.vpicker__x:hover { color: var(--color-text); }
.vpicker__loading { color: var(--color-text-muted); margin: 0; padding: 0.5rem 0; }
.vpicker__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.vpicker__row {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.6rem; border: 1px solid var(--color-border); border-radius: var(--border-radius);
}
/* Agotada: se atenúa el PRECIO y el borde, nunca el texto "Agotado" — con opacity sobre
   la fila entera ese aviso caía a ~2.8:1 de contraste, justo el dato que hay que leer. */
.vpicker__row.is-out { border-style: dashed; }
.vpicker__row.is-out .vpicker__label,
.vpicker__row.is-out .vpicker__price { opacity: 0.6; }
.vpicker__info { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 8rem; min-width: 0; }
.vpicker__label { font-weight: 600; font-size: 0.85rem; }
.vpicker__ok { color: var(--color-success); font-size: 0.75rem; font-weight: 600; }
.vpicker__low { color: var(--color-accent-gold); font-size: 0.75rem; font-weight: 700; }
.vpicker__out { color: var(--color-text); font-size: 0.75rem; font-weight: 600; }
.vpicker__price { font-size: 0.9rem; white-space: nowrap; }
.vpicker__was { color: var(--color-text-muted); text-decoration: line-through; font-size: 0.78rem; }
.vpicker__badge { color: var(--color-accent-text); font-weight: 700; font-size: 0.72rem; }
.vpicker__actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.vpicker__qty, .variants__qty {
  width: 3.6rem; padding: 0.35rem 0.4rem; text-align: center;
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--border-radius);
  /* 16px exactos: bajo eso, iOS Safari hace zoom al enfocar y descuadra el diálogo fixed. */
  font-size: 16px; font-family: var(--font-body);
}
.vpicker__more { display: inline-block; margin-top: 0.75rem; font-size: 0.82rem; }
body.picker-open { overflow: hidden; }

/* Stock bajo: mismo tono de urgencia en la ficha y en el selector. */
.badge-low { color: var(--color-accent-gold); font-weight: 700; font-size: 0.8rem; }
.variants__buy form { display: flex; align-items: center; gap: 0.4rem; }

/* ── Badge del carro en la barra móvil ───────────────────────── */
.mobile-tabbar a { position: relative; }
.mobile-tabbar__badge {
  position: absolute; top: 2px; right: 50%; transform: translateX(18px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--color-accent-gold); color: var(--color-bg);
  font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center;
}

/* ── Drawer del carro (E07-H02) ──────────────────────────────── */
body.cart-open { overflow: hidden; }
.cart-drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.cart-drawer.is-open { visibility: visible; }
.cart-drawer__backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55);
  opacity: 0; transition: opacity var(--transition);
}
.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }
.cart-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 100%);
  display: flex; flex-direction: column;
  background: var(--color-bg-secondary); border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.45);
  transform: translateX(100%); transition: transform var(--transition);
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }
.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border);
}
.cart-drawer__title { font-size: 1.1rem; margin: 0; }
.cart-drawer__close {
  background: none; border: none; color: var(--color-text-muted);
  font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.cart-drawer__close:hover { color: #fff; }
.cart-drawer__alert { margin: var(--space-md) var(--space-lg) 0; padding: 0.6rem 0.85rem; border-radius: var(--border-radius); font-size: 0.85rem; }
.cart-drawer__alert--warn { background: rgba(255, 179, 71, 0.14); border: 1px solid var(--color-accent-gold); color: var(--color-accent-gold); }
.cart-drawer__alert--error { background: rgba(231, 76, 60, 0.14); border: 1px solid var(--color-error); color: var(--color-error); }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.cart-drawer__empty { text-align: center; color: var(--color-text-muted); padding: var(--space-xl) 0; }

.cart-drawer__line { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--space-md); }
.cart-drawer__line.is-out { opacity: 0.65; }
.cart-drawer__linemedia { width: 48px; height: 67px; border-radius: 5px; overflow: hidden; background: var(--color-bg-card); display: flex; align-items: center; justify-content: center; }
.cart-drawer__linemedia img { width: 100%; height: 100%; object-fit: cover; }
.cart-drawer__ph { color: var(--color-accent); }
.cart-drawer__lineinfo { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.cart-drawer__linetitle { font-size: 0.85rem; font-weight: 600; color: var(--color-text); line-height: 1.2; }
.cart-drawer__linetitle:hover { color: var(--color-accent); }
.cart-drawer__linevariant { font-size: 0.75rem; color: var(--color-text-muted); }
.cart-drawer__lineprice { font-size: 0.8rem; }
.cart-drawer__was { color: var(--color-text-muted); text-decoration: line-through; margin-right: 0.3rem; }
.cart-drawer__linenote { font-size: 0.72rem; color: var(--color-accent-gold); }
.cart-drawer__linenote--out { color: var(--color-error); }
.cart-drawer__lineside { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.cart-drawer__qty { display: flex; align-items: center; gap: 0.4rem; }
.cart-drawer__qty button {
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  background: var(--color-bg-card); border: 1px solid var(--color-border); color: var(--color-text);
  font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.cart-drawer__qty button:disabled { opacity: 0.4; cursor: not-allowed; }
.cart-drawer__linetotal { font-weight: 700; font-size: 0.85rem; }
.cart-drawer__lineremove { background: none; border: none; color: var(--color-text-muted); font-size: 0.72rem; cursor: pointer; text-decoration: underline; padding: 0; }
.cart-drawer__lineremove:hover { color: var(--color-error); }

.cart-drawer__foot { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 0.5rem; }
.cart-drawer__row { display: flex; justify-content: space-between; font-size: 0.9rem; }
.cart-drawer__row--total { font-size: 1.1rem; font-weight: 700; }
.cart-drawer__cta { width: 100%; }
.cart-drawer__note { font-size: 0.72rem; text-align: center; }

/* ── Checkout (E08-H01) ──────────────────────────────────────── */
.checkout { max-width: 1000px; }
.checkout__grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-xl); align-items: start; }
.checkout__form { display: flex; flex-direction: column; gap: var(--space-lg); }
.checkout__block {
  padding: var(--space-lg); background: var(--color-bg-card);
  border: 1px solid var(--color-border); border-radius: var(--border-radius-lg);
  display: flex; flex-direction: column; gap: var(--space-md);
}
.checkout__legend { font-size: 1rem; margin: 0; color: var(--color-accent-gold); }
.checkout__hint { font-size: 0.78rem; margin: 0; }

.field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; }
.field > span { color: var(--color-text-muted); }
.field input, .field select {
  padding: 0.55rem 0.7rem; border-radius: 8px; font-size: 0.9rem;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  color: var(--color-text); font-family: var(--font-body);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--color-accent); }
.field input.invalid, .field select.invalid { border-color: var(--color-error); }
.field-row { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.field--grow { flex: 1 1 45%; }
.field--sm { flex: 0 1 110px; }

.checkout__radios { display: flex; flex-direction: column; gap: 0.5rem; }
.radio-card {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer; font-size: 0.9rem;
}
.radio-card:has(input:checked) { border-color: var(--color-accent); background: rgba(124, 92, 252, 0.08); }

/* Opción con descripción debajo (formas de entrega, E11-H02). Sin esto el nombre y la
   explicación salen pegados en una sola línea: "Envío a domicilioDespacho a tu dirección…". */
.radio-card--stacked { align-items: flex-start; }
.radio-card--stacked input { margin-top: 0.2rem; flex: none; }
.radio-card__text { display: flex; flex-direction: column; gap: 0.15rem; }
.radio-card__desc { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.35; }

/* Razón social, giro, dirección comercial y correo del DTE sólo tienen sentido con factura.
   Mostrarlos siempre —como estaba— hace parecer que hay que llenarlos para comprar con boleta,
   que es lo que hace la mayoría. Se resuelve con :has() y no con JS: sin JS igual funciona, y
   :has() ya se usa acá arriba para las tarjetas de opción. */
.checkout__doc .checkout__factura { display: none; }
.checkout__doc:has(input[value="factura"]:checked) .checkout__factura { display: block; }

.validation-message { color: var(--color-error); font-size: 0.78rem; }

.checkout__summary {
  position: sticky; top: 90px; padding: var(--space-lg);
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg); display: flex; flex-direction: column; gap: 0.65rem;
}
.checkout__summary p { font-size: 0.88rem; line-height: 1.5; }
.checkout__submit { width: 100%; margin-top: var(--space-sm); }

@media (max-width: 760px) {
  .checkout__grid { grid-template-columns: 1fr; }
  .checkout__summary { position: static; }
}

/* ── Reserva / pedido (E08-H02) ──────────────────────────────── */
.reservation-box {
  padding: 0.85rem 1.1rem; margin-bottom: var(--space-lg); border-radius: var(--border-radius);
  background: rgba(124, 92, 252, 0.1); border: 1px solid var(--color-accent); font-size: 0.92rem;
}
.reservation-box strong { color: var(--color-accent-gold); font-variant-numeric: tabular-nums; }
.reservation-box__expired { display: none; }
.reservation-box.is-expired { background: rgba(231, 76, 60, 0.1); border-color: var(--color-error); }
.reservation-box.is-expired .reservation-box__live { display: none; }
.reservation-box.is-expired .reservation-box__expired { display: block; }

.order-line {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-sm) var(--space-md);
  align-items: baseline; padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem;
}
.order-line:last-child { border-bottom: none; }
.order-line__variant { color: var(--color-text-muted); font-size: 0.8rem; margin-left: 0.4rem; }
.order-line__qty { color: var(--color-text-muted); }
.order-line__total { font-weight: 700; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===== Mi Cuenta (E10-H03) ===== */
/* Chips de ESTADO (pedido/ticket). Base propia .chip-status: antes redefinía .chip y
   pisaba los chips de filtro del listado (línea ~540). */
.chip-status{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.8rem;font-weight:600;line-height:1.4;}
.chip-status--success,.chip-status--ok{background:#123d2a;color:#5ee9a4;}
.chip-status--info{background:#12314d;color:#7ab8ff;}
.chip-status--warn{background:#4d3d12;color:#ffd874;}
.chip-status--error{background:#4d1a1a;color:#ff9a9a;}
.order-history{width:100%;border-collapse:collapse;}
.order-history td{padding:.75rem .5rem;border-bottom:1px solid #26304d;vertical-align:middle;}
.order-history tr:hover{background:rgba(255,255,255,.03);}
.order-timeline{list-style:none;display:flex;gap:.5rem;padding:0;margin:1rem 0;flex-wrap:wrap;}
.order-timeline li{flex:1;min-width:90px;text-align:center;padding:.5rem;border-radius:8px;background:#141a2e;color:#9aa4c0;font-size:.85rem;}
.order-timeline li.is-done{background:#123d2a;color:#5ee9a4;}
.address-card{display:flex;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid #26304d;border-radius:12px;margin-bottom:1rem;flex-wrap:wrap;}
.address-card.is-default{border-color:#5ee9a4;}
.address-card__actions{display:flex;gap:.5rem;align-items:flex-start;flex-wrap:wrap;}
/* (.btn--sm y .btn--ghost ya están definidos en el bloque de botones — acá redefinían
   con otras métricas y pisaban a todo el sitio; eliminados.) */

.account-cta{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:1rem;border:1px solid #26304d;border-radius:12px;margin:1rem 0;background:#141a2e;}

/* Tickets de soporte (E13-H01) — hilo tipo chat */
.ticket-thread { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; }
.ticket-msg { border: 1px solid var(--border, #2a2a3a); border-radius: 10px; padding: .7rem .9rem; max-width: 85%; }
.ticket-msg--customer { align-self: flex-end; background: rgba(120,120,255,.08); }
.ticket-msg--staff { align-self: flex-start; background: rgba(255,255,255,.04); }
.ticket-msg__who { font-size: 12px; font-weight: 600; margin-bottom: .25rem; }
.ticket-msg__body { white-space: pre-wrap; word-break: break-word; }
/* E13-H01c: adjuntos del hilo + badge de no-leídos */
.ticket-msg__files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.ticket-file { display: inline-flex; align-items: center; gap: .25rem; font-size: 13px;
    padding: .2rem .5rem; border: 1px solid var(--border, #2a2a3a); border-radius: 8px;
    text-decoration: none; word-break: break-all; }
.ticket-file:hover { background: rgba(255,255,255,.06); }
.account-badge { display: inline-block; min-width: 1.2em; margin-left: .4rem; padding: 0 .4em;
    font-size: 12px; font-weight: 700; line-height: 1.5; text-align: center; color: #fff;
    background: #e0245e; border-radius: 999px; }

/* ── Navegación de Mi Cuenta ──────────────────────────────────────
   Tarjetas y no botones: es un menú, no cuatro llamadas a la acción peleándose la atención.
   Grilla que se adapta sola — cuatro en escritorio, dos en tablet, una en móvil. */
.account-nav {
  display: grid; gap: 0.75rem; margin: 1.25rem 0 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.account-nav__item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1rem; text-decoration: none;
  background: var(--color-bg-card); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--border-radius);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.account-nav__item:hover {
  border-color: var(--color-accent); color: var(--color-text); transform: translateY(-1px);
}
/* Que el teclado vea dónde está parado, no sólo el mouse. */
.account-nav__item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.account-nav__icon { font-size: 1.15rem; line-height: 1; flex: none; }
.account-nav__label { font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; }

/* ── Panel de navegación móvil ─────────────────────────────────────────────
   El menú de escritorio se esconde bajo 768px y la tabbar no lo reemplazaba:
   en el teléfono el catálogo sólo se podía alcanzar buscando por nombre. Mismo
   esqueleto que .cart-drawer, pero entrando por la izquierda para que el gesto
   no se confunda con el carro. */
body.nav-open { overflow: hidden; }

.nav-drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.nav-drawer.is-open { visibility: visible; }
.nav-drawer__backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55);
  opacity: 0; transition: opacity var(--transition);
}
.nav-drawer.is-open .nav-drawer__backdrop { opacity: 1; }
.nav-drawer__panel {
  position: absolute; top: 0; left: 0; height: 100%; width: min(330px, 86%);
  display: flex; flex-direction: column;
  background: var(--color-bg-secondary); border-right: 1px solid var(--color-border);
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.45);
  transform: translateX(-100%); transition: transform var(--transition);
}
.nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); }
.nav-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border);
}
.nav-drawer__title { font-size: 1.1rem; margin: 0; }
.nav-drawer__close {
  background: none; border: 0; color: var(--color-text-muted);
  font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.4rem;
}
.nav-drawer__close:hover { color: #fff; }
.nav-drawer__body {
  flex: 1; overflow-y: auto;
  /* El safe-area del iPhone: sin esto el último enlace queda bajo la barra del sistema. */
  padding: var(--space-sm) 0 calc(var(--space-lg) + env(safe-area-inset-bottom));
}
.nav-drawer__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  /* 46px de alto: los enlaces de un menú se tocan con el pulgar, no con un mouse. */
  min-height: 46px; padding: 0 var(--space-lg);
  color: var(--color-text); font-family: var(--font-heading); font-weight: 600;
  font-size: 0.95rem; text-decoration: none;
}
.nav-drawer__link:hover, .nav-drawer__link:focus-visible { background: var(--color-bg-card); color: var(--color-accent-gold); }
.nav-drawer__link--offers { color: var(--color-accent-gold); }
.nav-drawer__tag {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.15rem 0.45rem; border-radius: 999px;
  background: rgba(255, 179, 71, 0.16); border: 1px solid var(--color-accent-gold);
}
.nav-drawer__link--section { margin-top: var(--space-sm); }
.nav-drawer__link--quiet { font-weight: 500; font-size: 0.85rem; color: var(--color-text-muted); }
.nav-drawer__series { display: flex; flex-direction: column; }
.nav-drawer__series a {
  min-height: 38px; display: flex; align-items: center;
  padding: 0 var(--space-lg) 0 calc(var(--space-lg) + 0.85rem);
  color: var(--color-text-muted); font-size: 0.85rem; text-decoration: none;
}
.nav-drawer__series a:hover { color: var(--color-accent-gold); background: var(--color-bg-card); }

/* En el teléfono el submenú es un acordeón con <details>, no un menú al pasar el mouse: en el
   teléfono no hay mouse. Y como <details> es nativo, funciona aunque el circuito de Blazor
   todavía no haya conectado. */
.nav-drawer__serie > summary {
  min-height: 38px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-lg) 0 calc(var(--space-lg) + 0.85rem);
  color: var(--color-text); font-size: 0.85rem; cursor: pointer;
  list-style: none;                 /* saca el triángulo de fábrica… */
}
.nav-drawer__serie > summary::-webkit-details-marker { display: none; }   /* …también en Safari */
.nav-drawer__serie > summary::after {
  content: "›"; font-size: 1.1rem; opacity: 0.5;
  transition: transform 0.15s ease;
}
.nav-drawer__serie[open] > summary::after { transform: rotate(90deg); }

.nav-drawer__serie a {
  gap: 0.6rem;
  padding-left: calc(var(--space-lg) + 1.9rem);   /* sangrado: se ve que cuelgan de la serie */
}
.nav-drawer__serie a img { flex: 0 0 42px; width: 42px; height: 22px; object-fit: contain; }
.nav-drawer__serie-todo { color: var(--color-accent-gold) !important; }
.nav-drawer__sep { height: 1px; background: var(--color-border); margin: var(--space-md) var(--space-lg); }

/* Con cinco pestañas el texto ya no cabe en pantallas chicas (iPhone SE = 320px). */
@media (max-width: 360px) {
  .mobile-tabbar a { font-size: 0.6rem; }
  .mobile-tabbar svg { width: 20px; height: 20px; }
}

/* El título tiene margin:0 y la alerta no traía margen superior, así que "Pedido EV-000002"
   quedaba pegado al recuadro de «¡Pago exitoso!». Selector adyacente para arreglar sólo ese
   caso y no mover las alertas que van solas (carro, checkout). */
.section__title + .cart-alert { margin-top: var(--space-md); }

/* Historial de pedidos: el número es el enlace al detalle, más un "Ver detalle" explícito.
   La fila entera tenía un onclick de JS sin ninguna señal visual de ser tocable, así que el
   detalle del pedido existía pero no se encontraba. */
.order-history__link { color: var(--color-accent-gold); font-weight: 700; text-decoration: none; }
.order-history__link:hover { text-decoration: underline; }
.order-history__ver {
  display: block; margin-top: 2px;
  font-size: 0.75rem; color: var(--color-text-muted); text-decoration: none; white-space: nowrap;
}
.order-history__ver:hover { color: var(--color-accent-gold); }

/* ── Submenú de sets dentro de cada serie ────────────────────────────────────
   El desplegable lista SERIES; los sets de verdad están adentro. Mega Evolution
   tiene 8 y Scarlet & Violet 19, así que aplanarlos daría una lista de sesenta
   y tantos que ya no es un menú.

   Se abre al costado y al pasar el mouse. No hay zona muerta entre el nombre de
   la serie y el submenú porque éste arranca en left:100% del mismo bloque: el
   puntero cruza de uno a otro sin pasar por fuera. */
.nav-sub { position: relative; }
.nav-sub__padre {
  display: flex !important; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.nav-sub__flecha { opacity: 0.45; font-size: 1.05rem; line-height: 1; }
.nav-sub:hover > .nav-sub__padre .nav-sub__flecha { opacity: 1; }

.nav-sub__menu {
  position: absolute; top: -6px; left: 100%; z-index: 31;
  min-width: 250px;
  /* Scarlet & Violet tiene 19 sets: sin tope, el submenú se sale de la pantalla. */
  max-height: 70vh; overflow-y: auto;
  padding: var(--space-xs) 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;

  /* La barra de scroll de fábrica es clara y cuadrada: sobre un menú oscuro con esquinas
     redondeadas se ve como un parche pegado encima. Con la pista transparente queda sólo el
     pulgar, que además respeta el borde redondeado del menú. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.nav-sub__menu::-webkit-scrollbar { width: 10px; }
.nav-sub__menu::-webkit-scrollbar-track { background: transparent; }
.nav-sub__menu::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 999px;
  /* Borde transparente + background-clip: deja aire a los lados del pulgar sin dibujar pista. */
  border: 3px solid transparent;
  background-clip: content-box;
}
.nav-sub__menu::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
  background-clip: content-box;
}

.nav-sub:hover > .nav-sub__menu,
.nav-sub:focus-within > .nav-sub__menu {
  opacity: 1; visibility: visible; transform: translateX(0);
}
/* Las filas del submenú van más apretadas que las del menú padre a propósito: Scarlet & Violet
   tiene 19 sets y con la misma altura habría que hacer scroll siempre. Acá el logo ya hace de
   blanco grande, así que no cuesta apuntarles. */
.nav-sub__menu a {
  display: flex !important; align-items: center; gap: 0.7rem;
  padding: 0.4rem var(--space-md);
}
/* El logo con ancho fijo y object-fit: los logos de set vienen en proporciones muy distintas y
   sin caja fija los nombres quedan desalineados en zigzag.

   El hueco vale lo mismo que el logo: hay sets sin logo —«SVP Black Star Promos», «Temporal
   Forces»— y sin reservarle el espacio, esos nombres se corren a la izquierda y rompen la
   columna justo en medio de la lista. */
.nav-sub__menu img,
.nav-sub__menu .nav-sub__sinlogo {
  flex: 0 0 46px; width: 46px; height: 24px; object-fit: contain;
}

/* "Ver todos los sets" al pie del desplegable: separado y en dorado para que se lea como
   salida y no como una serie más de la lista. */
.nav-dropdown__all {
  border-top: 1px solid var(--color-border);
  margin-top: 4px; padding-top: 8px;
  color: var(--color-accent-gold) !important; font-weight: 600;
}