/* ============================================================
   ONEXCENTO — Complete Brand Design System
   Performance. Wellness. Life.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500;1,600&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Brand Base */
  --black: #080808;
  --white: #F8F7F5;

  /* Wellness Palette */
  --w-bg: #F8F7F5;
  --w-surface: #FFFFFF;
  --w-lavender: #C8B4D8;
  --w-mint: #A8CCBF;
  --w-peach: #E8C4B8;
  --w-rose: #DDBFCF;
  --w-text: #1A1A1A;
  --w-muted: #6B7280;
  --w-border: #E5E7EB;

  /* Performance Base */
  --p-bg: #080808;
  --p-surface: #101010;
  --p-card: #141414;
  --p-border: rgba(255,255,255,0.07);
  --p-text: #FFFFFF;
  --p-muted: #888888;

  /* Endurance */
  --endurance: #0EA5E9;
  --endurance-dim: #0099DD;
  --endurance-glow: rgba(14, 165, 233, 0.28);
  --endurance-glow-strong: rgba(14, 165, 233, 0.55);

  /* Strength */
  --strength: #39FF14;
  --strength-dim: #2EE00E;
  --strength-glow: rgba(57, 255, 20, 0.2);
  --strength-glow-strong: rgba(57, 255, 20, 0.45);

  /* Z-index */
  --z-base: 10;
  --z-dropdown: 20;
  --z-nav: 30;
  --z-modal: 50;
  --z-toast: 70;

  /* Timing */
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 400ms;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--white);
  color: var(--w-text);
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
input, textarea { font-family: inherit; outline: none; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2A2A2A; border-radius: 3px; }

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 1024px) {
  .container { padding: 0 3rem; }
}

.section-py {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 1024px) {
  .section-py {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}

/* ============================================================
   SCROLL-SNAP SUAVE POR BLOQUES (solo home)
   ============================================================ */
html {
  scroll-padding-top: 124px;
  /* SIN scroll-snap vertical: el paso entre secciones lo maneja SOLO el
     tween de initSectionScroll (app.js). Con ambos activos, el navegador
     re-snapeaba mientras el tween animaba y el scroll se sentía trabado. */
}

/* Bloque tipo pantalla completa (home + wellness/performance) */
.home-block, .snap-screen {
  scroll-snap-align: start;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-block > .container, .snap-screen > .container { width: 100%; }

/* Bloque que solo se ancla pero conserva su alto natural (ej. Identidad
   compacta, o secciones largas como un catálogo con muchos productos) */
.snap-block, .snap-anchor { scroll-snap-align: start; }

@media (max-width: 760px) {
  /* En móvil dejamos fluir el contenido para no cortar cards */
  .home-block, .snap-screen {
    min-height: auto;
    justify-content: flex-start;
  }
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav-wrapper {
  position: fixed;
  top: 1rem;
  left: 1.5rem;
  right: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
  z-index: var(--z-nav);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
/* deslizar hacia abajo → header se esconde arriba; hacia arriba → vuelve */
.nav-wrapper.nav-hidden {
  transform: translateY(-200%);
}
@media (prefers-reduced-motion: reduce) {
  .nav-wrapper { transition: none; }
}

/* ── BARRA PRINCIPAL: rectángulo LIMPIO (sin clip-path, sin alas) ────────
   Cuerpo recto arriba y a los lados, esquinas redondeadas suaves,
   glass oscuro translúcido con blur, borde fino y sombra controlada. */
.nav-inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* auto | 1fr | auto — y NO "1fr auto 1fr": centrar los enlaces respecto
     a la barra obliga a reservar en el lado del logo (166px) el mismo
     ancho que el bloque de acciones (272px), o sea ~106px muertos que
     nadie usa. Con esa cuenta los 7 enlaces jamás cupieron. Ahora el
     centro toma el hueco real entre logo y acciones y se centra DENTRO
     de él: mismos márgenes a izquierda y derecha del menú. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  /* Escalado FLUIDO (1140 → 1560px): gaps, padding, tipo y controles
     interpolan de forma continua en vez de saltar entre dos juegos de
     valores. Con los valores fijos anteriores el contenido sumaba
     ~1206px + 128 de gaps/padding contra una barra de 1280 y el carrito
     se salía ~15px en TODA pantalla ≥1460. Ahora sobran ~65px de holgura
     en los dos extremos del rango. */
  gap: clamp(0.8rem, -6.74px + 1.71vw, 1.25rem);
  padding: 0 clamp(1.25rem, -12.57px + 2.86vw, 2rem);
  height: 80px;
  background: linear-gradient(180deg, rgba(18,18,21,0.88) 0%, rgba(10,10,13,0.84) 100%);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background var(--t-slow) ease;
}
/* línea inferior luminosa azul → cian → verde con glow (firma de marca) */
.nav-inner::after {
  content: '';
  position: absolute;
  left: 26px; right: 26px; bottom: 2px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(14,165,233,0) 0%, #0EA5E9 16%, #22D3EE 50%, #39FF14 84%, rgba(57,255,20,0) 100%);
  opacity: 0.9;
  filter: drop-shadow(0 0 5px rgba(14,165,233,0.55)) drop-shadow(0 0 7px rgba(57,255,20,0.4));
  pointer-events: none;
}

/* al hacer scroll se vuelve un poco más sólido para legibilidad */
.nav-inner.scrolled {
  background: linear-gradient(180deg, rgba(14,14,16,0.94) 0%, rgba(8,8,10,0.9) 100%);
}

.nav-inner.light {
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(248,247,250,0.86) 100%);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 20px 44px rgba(20,16,40,0.16), inset 0 1px 0 rgba(255,255,255,0.85);
}
.nav-inner.light.scrolled {
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,247,250,0.92) 100%);
}
/* La línea inferior por defecto es azul→cian→verde: los colores de
   Performance. En el header claro (solo Wellness) se veía ajena. Aquí va
   MORADO → verde, saturado para que lea sobre el fondo claro con la misma
   prominencia que la línea del header oscuro (los pasteles quedaban muy
   tenues). Misma geometría que la línea base. */
.nav-inner.light::after {
  opacity: 1;
  background: linear-gradient(90deg,
    rgba(139,92,246,0) 0%,
    #8B5CF6 16%,
    #B98FD8 50%,
    #39FF14 84%,
    rgba(57,255,20,0) 100%);
  filter: drop-shadow(0 0 5px rgba(139,92,246,0.6)) drop-shadow(0 0 7px rgba(57,255,20,0.4));
}

.nav-logo { justify-self: start; }
.nav-actions { justify-self: end; }

.nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.85rem;
  letter-spacing: 0.12em;
  color: #fff;
  text-decoration: none;
  transition: color var(--t-base) ease;
}
.nav-inner.light .nav-logo { color: #1A1A1A; }

.nav-links {
  display: none;
  /* 1.3rem fijo seguía desbordando la barra (max-width 1280) a partir de
     1460px: los 7 ítems medían 745px y solo caben ~660. Fluido. */
  gap: clamp(0.65rem, -6.97px + 1.52vw, 1.05rem);
  list-style: none;
  min-width: 0;
}
@media (min-width: 1140px) {
  .nav-links { display: flex; align-items: center; justify-content: center; }
}
/* Debajo de 1140px .nav-links está en display:none, así que deja de ser
   ítem del grid y .nav-actions caía en la columna CENTRAL (auto) en vez
   de la tercera. La columna del logo se quedaba en 46px, la imagen se
   desbordaba y se encimaba 50px con la lupa. Sin menú, el header son
   dos columnas: logo flexible + acciones a su ancho natural. */
@media (max-width: 1139px) {
  .nav-inner { grid-template-columns: minmax(0, 1fr) auto; }
}

/* La rampa laptop (1140–1459px) del header vive al FINAL de la hoja,
   junto a la regla canónica de .brand-logo-header: puesta aquí perdía la
   cascada contra .nav-links a y .btn-nav-cta, que se definen más abajo. */

.nav-links a {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.68rem, 7.41px + 0.3vw, 0.76rem);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,0.65);
  transition: color var(--t-fast) ease;
  padding: 0.5rem 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--endurance);
  transition: width var(--t-base) ease;
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { width: 100%; }
.nav-inner.light .nav-links a { color: rgba(26,26,26,0.6); }
.nav-inner.light .nav-links a:hover { color: #1A1A1A; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* Lupa y carrito: cuadro redondeado suave, misma familia que el cristal
   de la barra (14px) — el bisel angular no gustaba en estos controles */
.btn-cart {
  position: relative;
  /* 50px × 3 botones + CTA no cabían junto a los 7 enlaces */
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  transition: all var(--t-fast) ease;
  cursor: pointer;
}
.btn-cart:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.25); }
.btn-cart svg { width: 20px; height: 20px; }
.nav-inner.light .btn-cart { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #1A1A1A; }
.nav-inner.light .btn-cart:hover { background: rgba(0,0,0,0.09); }

.cart-count {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--endurance);
  /* Blanco sobre #0EA5E9 da 2.77:1. Tinta oscura sobre el mismo azul
     sube a 5.8:1 sin tocar --endurance, que se usa en glows por todo
     el sitio y cambiarlo global sería arriesgado. */
  color: #04283A;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 100px;
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  /* anillo que lo separa del icono sin romper la silueta del botón */
  box-shadow: 0 0 0 2px rgba(10,10,12,0.65), 0 0 8px rgba(14,165,233,0.55);
}
.cart-count.visible { display: flex; }
.nav-inner.light .cart-count { box-shadow: 0 0 0 2px rgba(255,255,255,0.75), 0 0 8px rgba(14,165,233,0.4); }

/* COMPRAR: CTA principal blanco — MISMO redondeado que lupa/carrito
   para que el bloque derecho lea como una unidad */
.btn-nav-cta {
  display: none;
  align-items: center;
  flex: 0 0 auto;
  height: 46px;
  padding: 0 clamp(0.9rem, -0.8px + 1.33vw, 1.25rem);
  background: linear-gradient(135deg, #FFFFFF 0%, #ECECEC 100%);
  color: #080808;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.7rem, 7.73px + 0.3vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 12px;
  transition: filter var(--t-fast) ease, box-shadow var(--t-fast) ease, transform var(--t-fast) ease;
  cursor: pointer;
}
.btn-nav-cta:hover { filter: brightness(1.04); box-shadow: 0 0 24px rgba(255,255,255,0.3); transform: translateY(-1px); }
.nav-inner.light .btn-nav-cta { background: linear-gradient(135deg, #1A1A1A, #2A2A2A); color: #fff; }
.nav-inner.light .btn-nav-cta:hover { box-shadow: 0 0 24px rgba(0,0,0,0.18); }
@media (min-width: 1140px) { .btn-nav-cta { display: flex; } }

/* Header compacto en pantallas chicas (evita desborde con la barra más grande) */
@media (max-width: 600px) {
  .nav-wrapper { left: 0.75rem; right: 0.75rem; top: 0.75rem; }
  .nav-inner { height: 66px; padding: 0 1.1rem; gap: 0.75rem; border-radius: 14px; }
  .nav-logo { font-size: 1.5rem; }
  .btn-cart { width: 44px; height: 44px; }
  .btn-cart svg { width: 18px; height: 18px; }
  .nav-actions { gap: 0.45rem; }

  /* A 320px el logo empujaba la hamburguesa fuera de la pantalla: solo
     quedaban 9 de sus 40px y el menú era inalcanzable. Dos causas:
     el <img> mide 167px fijos (el font-size de arriba solo afecta al
     texto de respaldo), y las columnas 1fr del grid traen min-width:auto,
     que deja desbordar en vez de encoger. El tope de ancho del logo
     está en la regla .brand-logo-header, que va más abajo y ganaba. */
  .nav-logo { min-width: 0; }
}

/* Teléfono chico (≤389px). Con las reglas móviles ya vivas, los cuatro
   controles miden 194px y a 320–360px no queda hueco para el logo: se
   recortan márgenes de la barra, padding y separación entre botones.
   Los botones NO se tocan: siguen en 44px de área táctil. */
@media (max-width: 389px) {
  .nav-wrapper { left: 0.5rem; right: 0.5rem; }
  .nav-inner { padding: 0 0.7rem; gap: 0.5rem; }
  .nav-actions { gap: 0.3rem; }
}

/* Mobile hamburger */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  /* Sin este reset, el navegador pinta el fondo nativo del <button>
     (#F0F0F0) y las barras blancas quedan invisibles. Solo se veía en
     móvil porque arriba de 1140px la hamburguesa está oculta. */
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
}
@media (min-width: 1140px) { .nav-hamburger { display: none; } }
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,0.8);
  border-radius: 1px;
  transition: all var(--t-base) ease;
}
.nav-inner.light .nav-hamburger span { background: rgba(26,26,26,0.8); }

/* ── Estado "menú abierto" ──────────────────────────────────
   El header sube POR ENCIMA del overlay para que la hamburguesa siga
   siendo tocable convertida en ✕, y se queda sin fondo: sobre la crema
   de Wellness solo se ven el logo y la ✕ en tinta oscura. */
.nav-wrapper.menu-open { z-index: calc(var(--z-nav) + 2); }
/* el auto-ocultado al bajar no debe dispararse con el menú abierto:
   dejaría la ✕ fuera de la pantalla y el menú sin forma de cerrarse */
.nav-wrapper.menu-open.nav-hidden { transform: none; }
.nav-inner.menu-open {
  background: none;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-inner.menu-open::after { opacity: 0; }
.nav-inner.menu-open .nav-logo { color: var(--w-text); }
.nav-inner.menu-open .brand-logo-header { filter: brightness(0) opacity(0.85); }
.nav-inner.menu-open .nav-hamburger span { background: rgba(26,26,26,0.85); }
/* lupa y carrito se retiran: con el menú abierto la barra es logo + ✕ */
.nav-inner.menu-open .btn-cart { opacity: 0; pointer-events: none; }

/* Hamburguesa → ✕. Las barras están a 0 / 7 / 14px, así que 7px
   de desplazamiento las junta en el centro antes de rotar. */
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MENÚ MÓVIL — B · DOS LÍNEAS
   La estructura del menú repite la de la marca: Wellness en claro,
   Performance en oscuro, separadas por el mismo corte diagonal que
   divide las dos líneas en el home (.split-wellness / .split-performance).
   ============================================================ */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  /* dvh = alto VISIBLE real. 100vh incluye la franja que tapa la barra
     del navegador, y por eso el menú se cortaba arriba y abajo. */
  height: 100dvh;
  background: var(--p-bg);
  /* Encima del contenido, pero el header sube a +2 para que la
     hamburguesa siga siendo tocable convertida en ✕. */
  z-index: calc(var(--z-nav) + 1);
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { display: flex; }

/* ── Las dos líneas ── */
.mm-line {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  /* el ritmo vertical escala con el alto: en rem fijos el menú no
     cabía en pantallas cortas (595px de contenido en 568 visibles) */
  padding: clamp(0.6rem, 1.8dvh, 1.25rem) 1.5rem;
}
.mm-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.mm-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.9rem, 7dvh, 3.4rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
}
.mm-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Línea 01 · Wellness — zona clara con el corte diagonal.
   El padding-top deja libre la altura del header (66px + 0.75rem),
   que se queda flotando encima en tinta oscura. */
.mm-wellness {
  background: var(--w-bg);
  /* Corte recto. Antes iba en diagonal (clip-path) y el borde se comía
     el subtítulo por la derecha en pantallas chicas; al enderezarlo
     desaparece esa clase de bug entera, sin variable ni calc(). */
  /* el max() garantiza que el header (66px + 0.75rem) nunca tape el texto */
  padding-top: max(5rem, 12dvh);
  padding-bottom: clamp(1.1rem, 3dvh, 1.9rem);
}
/* Lavanda de marca oscurecida: #C8B4D8 sobre #F8F7F5 da 1.9:1,
   ilegible. Este tono conserva el matiz y pasa AA. */
.mm-wellness .mm-eyebrow { color: #6E5091; }
.mm-wellness .mm-name    { color: var(--w-text); }
.mm-wellness .mm-desc    { color: var(--w-muted); }

/* Línea 02 · Performance — sobre el negro del contenedor */
.mm-performance { padding-top: 0.5rem; }
.mm-performance .mm-eyebrow { color: var(--strength); }
.mm-performance .mm-name    { color: var(--p-text); }
.mm-performance .mm-desc    { color: var(--p-muted); }

/* ── Las 5 secundarias, en dos columnas ── */
.mm-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem 1rem;
  margin: clamp(0.6rem, 2dvh, 1.1rem) 1.5rem 0;
  padding-top: clamp(0.6rem, 2dvh, 1.1rem);
  border-top: 1px solid var(--p-border);
}
.mm-secondary a {
  display: flex;
  align-items: center;
  /* 44px de alto táctil aunque el texto sea chico */
  min-height: 44px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  transition: color var(--t-fast) ease;
}
.mm-secondary a:hover { color: #fff; }

/* ── El CTA: mismo chaflán y mismo degradado que .btn-nav-cta de
   escritorio, para que sea EL MISMO botón en los dos tamaños. ── */
.mobile-menu .mm-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  /* empuja el botón al fondo y absorbe el alto sobrante */
  margin: auto 1.5rem max(1.5rem, 3.5dvh);
  min-height: 52px;
  padding: 0 2rem;
  background: linear-gradient(135deg, #FFFFFF 0%, #ECECEC 100%);
  color: #080808;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* mismo redondeado que el COMPRAR de escritorio: son el mismo botón */
  border-radius: 12px;
}
/* wellness.html usa btn-dark en vez de btn-white */
.mobile-menu .mm-cta.btn-dark {
  background: linear-gradient(135deg, #1A1A1A, #2A2A2A);
  color: #fff;
}
/* tienda.html no lleva CTA: sin él, la rejilla necesita el empuje */
.mobile-menu .mm-secondary:last-child { margin-bottom: max(1.5rem, 3.5dvh); }

/* La ✕ suelta desaparece: la hamburguesa hace de abrir y cerrar. */
.mobile-close { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 650px;
  background: var(--black);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* llena toda la pantalla sin deformar */
  opacity: 0.9;
  z-index: 0;
  /* respaldo por si el poster tarda: nunca fondo en blanco/negro duro */
  background: var(--black);
}

/* Cinematic animated background (fallback / supplement to video) */

@keyframes hero-breathe {
  0%   { opacity: 0.8; }
  50%  { opacity: 1; }
  100% { opacity: 0.85; }
}

/* Estas dos capas estuvieron muertas mucho tiempo: el comentario de arriba
   cerraba con un asterisco suelto y el navegador se las tragaba enteras.
   Los dos <div> siempre estuvieron en index.html midiendo 0px. */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
}

/* scrim para que el texto siga legible sobre el video */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.2) 60%, transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 35%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.9) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem;
  animation: hero-content-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes hero-content-in {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1.5rem;
}

.hero-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4.5rem, 14vw, 11rem);
  line-height: 0.88;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 120px rgba(0,0,0,0.8);
}

.hero-logo span {
  display: block;
  font-size: clamp(1rem, 3vw, 2rem);
  letter-spacing: 0.35em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  margin-top: 0.75rem;
}

/* Hero refined text hierarchy (sin cursiva, fuerte y premium) */
.hero-phrase {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.35rem, 3.2vw, 2.05rem);
  line-height: 1.25;
  color: #FFFFFF;
  margin-bottom: 0.9rem;
  letter-spacing: 0.005em;
}
.hero-phrase strong { color: var(--strength); font-weight: 800; }
.hero-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: clamp(0.85rem, 2vw, 1.2rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1.1rem;
}
/* Cada palabra con su color de marca + glow sutil */
.hero-subtitle .hs-perf,
.hero-subtitle .hs-well,
.hero-subtitle .hs-life { font-weight: 700; }
.hero-subtitle .hs-perf { color: #29B6F6; text-shadow: 0 0 18px rgba(14,165,233,0.55); }
.hero-subtitle .hs-well { color: #CBA6E6; text-shadow: 0 0 18px rgba(185,143,216,0.5); }
.hero-subtitle .hs-life { color: #39FF14; text-shadow: 0 0 18px rgba(57,255,20,0.45); }
.hero-subtitle .hs-dot { color: rgba(255,255,255,0.55); }   /* 0.35 daba 3.11:1 */

/* Rotador del subtítulo: una palabra a la vez (fundido + desenfoque) */
.hs-rotator { position: relative; display: inline-block; }
.hs-sizer { display: none; }                       /* solo reserva el ancho cuando hay JS */
.hs-word + .hs-word::before { content: "\00a0\00a0"; } /* separación legible en fallback sin JS */

.hs-rotator.js-ready .hs-sizer { display: inline-block; visibility: hidden; }
.hs-rotator.js-ready .hs-word {
  position: absolute;
  left: 0; right: 0; top: 0;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0.28em) scale(0.98);
  transition: opacity 0.6s ease, filter 0.6s ease,
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, filter, transform;
  animation: none;                                 /* anula el glowPulse heredado (evita choque con filter) */
}
.hs-rotator.js-ready .hs-word + .hs-word::before { content: none; }
.hs-rotator.js-ready .hs-word.active {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .hs-rotator.js-ready .hs-word { transition: none; }
}
/* Línea reservada para frase final de marca (por definir) */
.hero-brand-line {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
  min-height: 1.3em;
  margin-bottom: 2.25rem;
}
.hero-brand-line:empty { margin-bottom: 1.75rem; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 4rem;
}

.hero-badge-row {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.hero-badge svg {
  width: 14px;
  height: 14px;
  color: rgba(255,255,255,0.3);
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.hero-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%);
  animation: scroll-line 1.8s ease-in-out infinite;
}

@keyframes scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Chevron bajo la línea: la invitación a bajar ahora ES una flecha */
.hero-scroll-chevron {
  color: rgba(255,255,255,0.75);
  animation: hero-chevron 1.8s ease-in-out infinite;
}
.hero-scroll:hover .hero-scroll-chevron { color: #fff; }
.hero-scroll:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 6px; border-radius: 8px; }
@keyframes hero-chevron {
  0%, 100% { transform: translateY(0);   opacity: 0.6; }
  50%      { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-line, .hero-scroll-chevron { animation: none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all var(--t-base) ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-white {
  background: #FFFFFF;
  color: #080808;
}
.btn-white:hover {
  background: #F0F0F0;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.25);
}
.btn-ghost:hover {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.04);
  color: #fff;
}

.btn-dark {
  background: #1A1A1A;
  color: #FFFFFF;
}
.btn-dark:hover {
  background: #2A2A2A;
  transform: translateY(-2px);
}

.btn-endurance {
  background: var(--endurance);
  color: #080808;
}
.btn-endurance:hover {
  background: var(--endurance-dim);
  box-shadow: 0 0 30px var(--endurance-glow-strong);
  transform: translateY(-2px);
}

.btn-strength {
  background: var(--strength);
  color: #080808;
}
.btn-strength:hover {
  background: var(--strength-dim);
  box-shadow: 0 0 30px var(--strength-glow-strong);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 1.125rem 2.5rem;
  font-size: 0.875rem;
  border-radius: 12px;
}

/* Add to cart button loading */
.btn-cart-add.loading {
  pointer-events: none;
  opacity: 0.7;
}

/* ============================================================
   LINE SELECTOR CARDS
   ============================================================ */
.lines-section {
  background:
    radial-gradient(ellipse 60% 45% at 18% 20%, rgba(123,94,167,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 55% 50% at 85% 80%, rgba(14,165,233,0.12) 0%, transparent 55%),
    linear-gradient(180deg, #060606 0%, #0A0A0C 50%, #060606 100%);
  padding: 7rem 1.5rem;
  scroll-margin-top: 120px;
}
@media (min-width: 1024px) {
  .lines-section { padding: 7rem 1.5rem; }
}

/* ============================================================
   ELIGE TU LÍNEA — selector premium de dos caminos (.choose-*)
   ============================================================ */
.choose-head { max-width: 1280px; margin: 0 auto 2.5rem; text-align: center; padding: 0 1.5rem; }
.choose-rule { display: inline-block; width: 26px; height: 1px; background: rgba(255,255,255,0.22); vertical-align: middle; }
.choose-topx { display: block; margin: 0 auto 0.85rem; line-height: 0; filter: drop-shadow(0 0 8px rgba(255,255,255,0.45)); }
.choose-topx svg { display: inline-block; }

/* Divisor con diamante (entre subtítulo y frase) */
.choose-div { position: relative; width: clamp(180px, 88%, 300px); height: 1px; margin: 0.55rem 0 0.35rem; }
.choose-dia { position: absolute; left: 12%; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg); }
.split-wellness .choose-div { background: linear-gradient(90deg, #F0728A, #A878E0 45%, rgba(91,190,132,0.18) 78%, transparent); }
.split-wellness .choose-dia { background: #F0728A; box-shadow: 0 0 8px rgba(240,114,138,0.7); }
.split-performance .choose-div { background: linear-gradient(90deg, rgba(57,255,20,0.5), rgba(57,255,20,0.05) 70%, transparent); }
.split-performance .choose-dia { background: var(--strength); box-shadow: 0 0 8px rgba(57,255,20,0.8); }

/* Contenedor del split (esquinas redondeadas; los paneles llevan la diagonal) */
.choose-split {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  height: clamp(460px, 64vh, 640px);
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
  background: #06070A;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.03);
  perspective: 1500px;            /* profundidad para el efecto 3D al hover */
}

.split-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
  overflow: hidden;
  transform-origin: 50% 50%;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.5s ease;
  will-change: transform;
}
.split-wellness    { z-index: 1; clip-path: polygon(0 0, 52% 0, 48% 100%, 0 100%); }
.split-performance { z-index: 1; clip-path: polygon(52% 0, 100% 0, 100% 100%, 48% 100%); }

/* Fondo (imagen) + degradado de legibilidad */
.split-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.split-scrim { position: absolute; inset: 0; z-index: 1; }
.split-wellness .split-bg { background-color: #ECE3F4; background-image: url('../assets/split-wellness.webp'); background-position: left center; }
.split-performance .split-bg { background-color: #08090C; background-image: url('../assets/split-performance.webp'); background-position: right center; }
/* el frasco (borde exterior) queda nítido; la zona de texto (centro) se atenúa para legibilidad */
.split-wellness .split-scrim { background: linear-gradient(90deg, transparent 13%, rgba(250,248,252,0.55) 32%, rgba(250,248,252,0.34) 58%, transparent 82%); }
.split-performance .split-scrim { background: linear-gradient(90deg, transparent 30%, rgba(8,9,12,0.6) 50%, rgba(8,9,12,0.42) 74%, transparent 90%); }

.split-content {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  width: clamp(240px, 26%, 360px);
  min-height: 340px;               /* misma altura en ambos lados → botones alineados */
}
.split-wellness .split-content { margin-left: clamp(1.5rem, 22%, 18rem); }
.split-performance { justify-content: flex-end; }
.split-performance .split-content { margin-right: clamp(1.5rem, 22%, 17rem); }

/* Elementos internos (tamaño) */
.choose-pill {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.4rem 0.9rem; border-radius: 100px; margin-bottom: 0.3rem;
}
.choose-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.7rem, 5.4vw, 4.4rem); line-height: 0.92; letter-spacing: 0.02em; white-space: nowrap; }
.choose-sub { font-family: 'Montserrat', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; }
.choose-phrase { font-size: 1rem; margin: 0.1rem 0 0.3rem; line-height: 1.4; }

.choose-badges { display: flex; gap: 0.55rem; margin: 0.25rem 0 0.4rem; }
.choose-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem; border-radius: 100px;
  font-family: 'Montserrat', sans-serif; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.cb-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cb-endurance { background: rgba(14,165,233,0.12); color: #7FD3F5; border: 1px solid rgba(14,165,233,0.3); }
.cb-endurance .cb-dot { background: var(--endurance); box-shadow: 0 0 8px var(--endurance); }
.cb-strength { background: rgba(57,255,20,0.10); color: #A8FF9E; border: 1px solid rgba(57,255,20,0.28); }
.cb-strength .cb-dot { background: var(--strength); box-shadow: 0 0 8px var(--strength); }

.choose-cta {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: auto;
  padding: 0.85rem 1.5rem; border-radius: 100px;
  font-family: 'Montserrat', sans-serif; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  transition: transform 0.35s ease, box-shadow 0.35s ease, gap 0.35s ease;
}
.choose-cta svg { transition: transform 0.35s ease; }
.split-panel:hover .choose-cta { gap: 0.85rem; }
.split-panel:hover .choose-cta svg { transform: translateX(3px); }

/* ---- Colores por línea ---- */
.split-wellness .choose-pill { background: rgba(240,114,138,0.14); color: #C0466A; border: 1px solid rgba(240,114,138,0.32); }
.split-wellness .choose-title {
  background: linear-gradient(100deg, #F0728A 0%, #E07AC8 20%, #A878E0 38%, #E8B24E 58%, #5BBE84 78%, #5AA6E8 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: choose-float 5s ease-in-out infinite, choose-sheen 5.5s linear infinite;
}
.split-wellness .choose-sub { color: rgba(28,22,34,0.62); }
.split-wellness .choose-phrase { color: #A8487E; font-weight: 600; }
.split-wellness .choose-cta { background: rgba(255,255,255,0.55); color: #2A2235; border: 1px solid rgba(123,94,167,0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 8px 22px rgba(123,94,167,0.18); }

.split-performance .choose-pill { background: rgba(14,165,233,0.16); color: #7FD3F5; border: 1px solid rgba(14,165,233,0.36); }
.split-performance .choose-title {
  background: linear-gradient(100deg, #0EA5E9 0%, #56C7F5 28%, #D8FBF0 50%, #5BFF8A 72%, #39FF14 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: choose-float 5s ease-in-out infinite, choose-glow 4s ease-in-out infinite;
  animation-delay: -2.2s, 0s;
}

/* Movimiento de los títulos W / P */
@keyframes choose-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes choose-sheen { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
/* glow azul (endurance) + verde (strength) — filter para que brille sobre el texto con degradado */
@keyframes choose-glow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(14,165,233,0.40)) drop-shadow(0 0 16px rgba(57,255,20,0.25)); }
  50%      { filter: drop-shadow(0 0 20px rgba(14,165,233,0.65)) drop-shadow(0 0 34px rgba(57,255,20,0.50)); }
}
.split-performance .choose-sub { color: rgba(255,255,255,0.62); }
.split-performance .choose-phrase { color: rgba(255,255,255,0.85); font-weight: 600; }
.split-performance .choose-cta { background: rgba(10,14,22,0.55); color: #fff; border: 1px solid rgba(14,165,233,0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 0 22px rgba(14,165,233,0.3); }

/* ---- HOVER 3D "se adelanta hacia ti": el lado bajo el cursor se eleva en 3D; el otro retrocede ---- */
/* Wellness al frente */
.choose-split:has(.split-wellness:hover) .split-wellness {
  z-index: 3;
  transform: translateZ(75px) scale(1.045) rotateY(-3deg);
  transform-origin: 22% 50%;
  filter: brightness(1.04) drop-shadow(18px 0 34px rgba(0,0,0,0.55));
}
.choose-split:has(.split-wellness:hover) .split-performance {
  z-index: 1;
  transform: translateZ(-45px) scale(0.95);
  filter: brightness(0.6) saturate(0.8);
}
/* Performance al frente (espejo) */
.choose-split:has(.split-performance:hover) .split-performance {
  z-index: 3;
  transform: translateZ(75px) scale(1.045) rotateY(3deg);
  transform-origin: 78% 50%;
  filter: brightness(1.06) drop-shadow(-18px 0 34px rgba(0,0,0,0.55));
}
.choose-split:has(.split-performance:hover) .split-wellness {
  z-index: 1;
  transform: translateZ(-45px) scale(0.95);
  filter: brightness(0.82) saturate(0.85);
}

.split-wellness:hover .choose-cta { box-shadow: 0 14px 30px rgba(123,94,167,0.32); }
.split-performance:hover .choose-cta { box-shadow: 0 0 30px rgba(14,165,233,0.55); }

/* ---- Responsive: stack vertical (sin diagonal) ---- */
@media (max-width: 820px) {
  /* Apiladas, el marco del contenedor sobra y encima estorba: su fondo
     (#06070A) es casi idéntico al del panel Performance (#08090C), así
     que el hueco de 20px era invisible y las dos tarjetas se leían
     pegadas. Sin marco, cada panel es una tarjeta con silueta propia
     y el hueco se ve de verdad. */
  .choose-split {
    height: auto; display: flex; flex-direction: column;
    gap: 1.5rem;
    border-radius: 0;
    overflow: visible;
    background: none;
    border: none;
    box-shadow: none;
    perspective: none;
  }
  .split-panel {
    position: relative; inset: auto;
    clip-path: none !important;
    border-radius: 22px;
    min-height: 340px;
    transform: none !important; filter: none !important;
  }
  /* borde acorde a cada fondo: oscuro sobre la clara, claro sobre la oscura */
  .split-wellness    { border: 1px solid rgba(0,0,0,0.10); }
  .split-performance { border: 1px solid rgba(255,255,255,0.12); }
  .split-content { min-height: 0; }
  .choose-div { width: 70%; }
  .choose-title { white-space: normal; }
  .split-wellness .split-content { margin-left: clamp(1.5rem, 8vw, 4rem); }
  .split-performance { justify-content: flex-start; }
  .split-performance .split-content { margin-right: 0; margin-left: clamp(1.5rem, 8vw, 4rem); }
  .split-wellness .split-scrim { background: linear-gradient(100deg, rgba(251,250,248,0.9), rgba(251,250,248,0.35) 72%, transparent); }
  .split-performance .split-scrim { background: linear-gradient(100deg, rgba(8,9,12,0.9), rgba(8,9,12,0.4) 72%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .split-panel { transition: none; }
  .choose-title { animation: none !important; }
}
/* Offset para anclas con el nav flotante */
#catalogo, #rutinas, #filosofia, #ambassadors, #faq, #categorias, #wellness-rutinas, #performance-rutinas { scroll-margin-top: 120px; }
@media (min-width: 768px) {
  /* Split interactivo: la card activa se expande, la otra cede y se atenúa */
}

/* Performance card: floating neon lines decoration */

/* Card decorative big letter (capa de profundidad opuesta) */

/* Glare que sigue al cursor */

/* Capas de profundidad internas (se mueven con el cursor a distinta velocidad) */
/* el CTA siempre abajo → botones alineados entre las dos tarjetas */

/* Títulos metalizados (sheen tipo metal con degradado claro→oscuro→claro) */

/* Performance sub-lines indicators */

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
}

.section-desc {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 540px;
}

/* Dark section headers */
.label-on-dark { color: rgba(255,255,255,0.6); }   /* 0.4 daba 3.75:1 */
.title-on-dark { color: #FFFFFF; }
.desc-on-dark  { color: rgba(255,255,255,0.55); }

/* Light section headers */
.label-on-light { color: rgba(26,26,26,0.64); }   /* 0.4 daba 2.48:1 */
.title-on-light { color: #1A1A1A; }
.desc-on-light  { color: rgba(26,26,26,0.6); }

/* Dividers */
.divider { height: 1px; }
.divider-endurance { background: linear-gradient(90deg, transparent, var(--endurance), transparent); }
.divider-strength  { background: linear-gradient(90deg, transparent, var(--strength), transparent); }

/* ============================================================
   FILTER TABS
   ============================================================ */
.filter-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 0.5rem 1.25rem;
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast) ease;
  border: 1px solid;
}

/* Light filter tabs */
.tab-light-inactive {
  background: transparent;
  color: rgba(26,26,26,0.45);
  border-color: rgba(26,26,26,0.12);
}
.tab-light-inactive:hover {
  color: rgba(26,26,26,0.8);
  border-color: rgba(26,26,26,0.25);
}

/* Dark filter tabs */
.tab-dark-inactive {
  background: transparent;
  color: rgba(255,255,255,0.35);
  border-color: rgba(255,255,255,0.1);
}
.tab-dark-inactive:hover {
  color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.2);
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.products-grid {
  display: grid;
  /* Antes: auto-fill minmax(280px,1fr) → forzaba 1 COLUMNA bajo 640px,
     y con fichas de 596px de alto eso daba 62 fichas = 39.000px de
     scroll (61 pantallas). En móvil van 2 columnas. */
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

/* Ajustes de la ficha a 2-up en móvil: imagen más baja y cuerpo más
   compacto para que quepan dos por fila sin apretujarse. Scopeado a
   .products-grid → NO toca el carrusel de destacados del home. */
@media (max-width: 639px) {
  .products-grid .product-img { height: clamp(150px, 44vw, 200px); padding: 6px; }
  .products-grid .product-body { padding: 0.85rem 0.85rem 1rem; }
  .products-grid .product-name { font-size: 0.82rem; }
  .products-grid .product-tagline { font-size: 0.72rem; margin-bottom: 0.6rem; }
  .products-grid .product-price { font-size: 0.95rem; }
  .products-grid .product-badge { font-size: 0.6rem; padding: 0.2rem 0.5rem; }
}
@media (min-width: 1024px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .products-grid { grid-template-columns: repeat(4, 1fr); }
}

.product-card {
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--t-base) ease;
  display: flex;
  flex-direction: column;
}

/* Wellness card */
.card-wellness {
  background: #FFFFFF;
  border: 1px solid var(--w-border);
}
.card-wellness:hover {
  box-shadow: 0 26px 60px rgba(123,94,167,0.18), 0 10px 24px rgba(0,0,0,0.08);
  transform: translateY(-7px);
  border-color: rgba(200,180,216,0.55);
}

/* Endurance card */
.card-endurance {
  background: var(--p-card);
  border: 1px solid var(--p-border);
}
.card-endurance:hover {
  border-color: rgba(14, 165, 233, 0.5);
  box-shadow: 0 22px 50px rgba(0,0,0,0.5), 0 0 48px var(--endurance-glow);
  transform: translateY(-7px);
}

/* Strength card */
.card-strength {
  background: var(--p-card);
  border: 1px solid var(--p-border);
}
.card-strength:hover {
  border-color: rgba(57, 255, 20, 0.45);
  box-shadow: 0 22px 50px rgba(0,0,0,0.5), 0 0 48px var(--strength-glow);
  transform: translateY(-7px);
}

/* Product image area */
/* SLOT de imagen de producto: fijo y uniforme en TODAS las cards
   (el contenedor manda; la imagen se adapta dentro, sin recorte ni deformación) */
.product-img {
  height: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 10px; /* el frasco respira y no toca bordes */
}

.img-wellness {
  background: linear-gradient(135deg, #F4EFF8 0%, #ECF5F1 100%);
}
.img-endurance {
  background: linear-gradient(135deg, #080C14 0%, #0A1020 100%);
}
.img-strength {
  background: linear-gradient(135deg, #080A08 0%, #091409 100%);
}

/* Foto de producto: el contenedor manda → ~295×387, vertical, contain, centrada */
.product-photo {
  width: auto;
  height: 100%;
  max-width: 295px;
  max-height: 387px;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Product image SVG icons */

/* Product badge */
.product-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.badge-default   { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }

/* Product card body */
.product-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-line-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.product-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.35;
  margin-bottom: 0.25rem;
}
.name-dark  { color: #1A1A1A; }
.name-light { color: #FFFFFF; }

.product-tagline {
  font-size: 0.8rem;
  margin-bottom: 1rem;
  flex: 1;
}
/* Toda esta familia de metadatos caía por debajo de 4.5:1. Las alfas
   suben lo justo para pasar AA sin romper la jerarquía frente al
   nombre y el precio, que son los que deben mandar en la ficha. */
.tagline-dark  { color: rgba(26,26,26,0.65); }
.tagline-light { color: rgba(255,255,255,0.62); }

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.product-price {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
}
.price-dark  { color: #1A1A1A; }
.price-light { color: #FFFFFF; }

.price-original {
  font-size: 0.75rem;
  text-decoration: line-through;
  margin-left: 0.4rem;
  font-weight: 400;
}
.orig-dark  { color: rgba(26,26,26,0.6); }
.orig-light { color: rgba(255,255,255,0.6); }

.product-weight {
  font-size: 0.7rem;
  font-weight: 500;
}
.weight-dark  { color: rgba(26,26,26,0.62); }
.weight-light { color: rgba(255,255,255,0.62); }

.btn-add-to-cart {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast) ease;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
}

/* Stars rating */
.product-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}
/* Las estrellas salen en fichas claras Y oscuras con una sola regla, y
   ningún ámbar único pasa AA en ambos fondos: sobre blanco hace falta
   uno oscuro (#F59E0B daba 2.15:1) y sobre #141414 uno claro. Van por
   variante, igual que .rating-dark / .rating-light de al lado. */
/* El color base NO se deja sin definir: si por lo que sea faltara la
   clase de variante, sin color heredaría el del contenedor y daría
   1.06:1 sobre ficha oscura, o sea invisible. Así degrada al ámbar
   original en vez de desaparecer. */
.stars { color: #F59E0B; font-size: 0.75rem; }
.stars-dark  { color: #B45309; }   /* ficha clara  → 5.3:1 */
.stars-light { color: #F59E0B; }   /* ficha oscura → 8.9:1 */
.rating-num {
  font-size: 0.7rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}
.rating-dark  { color: rgba(26,26,26,0.65); }
.rating-light { color: rgba(255,255,255,0.62); }

/* ============================================================
   FEATURED CAROUSEL (Netflix-style horizontal)
   ============================================================ */
.carousel {
  position: relative;
}

.carousel-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.5rem 0.25rem 1.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
/* Modo auto-deslizado: sin snap ni smooth para que el marquee fluya parejo */
.carousel-track.is-auto { scroll-snap-type: none; scroll-behavior: auto; }
.carousel-track.is-auto > .product-card { scroll-snap-align: none; }

/* Card widths -> ~1.1 mobile, 2 small tablet, 3 tablet, 4 desktop */
.carousel-track > .product-card {
  flex: 0 0 84%;
  scroll-snap-align: start;
}
@media (min-width: 560px)  { .carousel-track > .product-card { flex: 0 0 46%; } }
@media (min-width: 900px)  { .carousel-track > .product-card { flex: 0 0 calc((100% - 2.5rem) / 3); } }
@media (min-width: 1200px) { .carousel-track > .product-card { flex: 0 0 calc((100% - 3.75rem) / 4); } }

/* Envase protagonista en destacados: mismo slot uniforme */
.carousel-track > .product-card .product-img { height: 390px; padding: 10px; }
.carousel-track > .product-card .product-body { padding: 1.5rem 1.5rem 1.6rem; }
.carousel-track > .product-card { border-radius: 18px; }

.carousel-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #1A1A1A;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  transition: background var(--t-fast) ease, transform var(--t-fast) ease, opacity var(--t-fast) ease;
}
.carousel-arrow:hover { background: #000; transform: translateY(-50%) scale(1.07); }
.carousel-prev { left: -14px; }
.carousel-next { right: -14px; }
@media (min-width: 768px) { .carousel-arrow { display: flex; } }

/* ============================================================
   FILOSOFÍA (brand manifesto) — premium
   ============================================================ */
.filo-section {
  background:
    radial-gradient(ellipse 70% 50% at 12% 8%, rgba(14,165,233,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 65% 55% at 88% 92%, rgba(57,255,20,0.08) 0%, transparent 55%),
    linear-gradient(180deg, #070707 0%, #0A0C0A 50%, #070707 100%);
  position: relative;
  overflow: hidden;
}
.filo-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(16rem, 42vw, 40rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.04);
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
/* ══ IDENTIDAD · una sola pantalla ═════════════════════════
   Todo dimensionado con vh para que SIEMPRE quepa sin scroll,
   desde un portátil bajito hasta un monitor grande. */
.filo-section {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 0;
}
.filo-pulse {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 52% 46% at 32% 46%, rgba(14,165,233,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 52% 46% at 68% 54%, rgba(57,255,20,0.10) 0%, transparent 60%);
  animation: mfLatido 4s ease-out infinite;
}
@keyframes mfLatido {
  0%   { opacity: 0.32; transform: scale(1); }
  8%   { opacity: 0.70; transform: scale(1.03); }
  16%  { opacity: 0.38; transform: scale(1.004); }
  24%  { opacity: 0.58; transform: scale(1.02); }
  38%  { opacity: 0.32; transform: scale(1); }
  100% { opacity: 0.32; transform: scale(1); }
}

.ident {
  position: relative; z-index: 2;
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(1.8rem, 4.2vh, 3.2rem) clamp(1.4rem, 3.5vw, 3rem);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(165deg, rgba(22,28,22,0.9) 0%, rgba(11,15,21,0.93) 100%);
  box-shadow: 0 40px 100px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  text-align: center;
}
.ident::before {
  content: ''; position: absolute; top: -1px; left: 16%; right: 16%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--endurance) 30%, var(--strength) 70%, transparent);
  opacity: 0.7;
}

.id-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--endurance);
  margin: 0 0 clamp(0.8rem, 2vh, 1.4rem);
}

/* la frase: escala con el alto de la pantalla para no desbordar */
.id-punch {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.9rem, min(5.4vw, 6.4vh), 3.9rem);
  line-height: 0.97;
  color: #fff;
  margin: 0 0 clamp(1.4rem, 3.4vh, 2.4rem);
  padding-bottom: clamp(1.2rem, 3vh, 2rem);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-shadow: 0 0 70px rgba(14,165,233,0.22), 0 0 110px rgba(57,255,20,0.16);
}
.id-punch em {
  font-style: normal;
  /* de azul a verde: las dos líneas de la marca en una sola frase */
  background: linear-gradient(100deg, var(--endurance) 12%, #7CE85C 52%, var(--strength) 88%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* respaldo si el navegador no recorta el degradado al texto */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .id-punch em { background: none; color: var(--strength); }
}

/* los dos párrafos, lado a lado */
.id-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3.5vw, 2.8rem);
  text-align: left;
}
.id-p {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.84rem, min(1.15vw, 1.75vh), 1rem);
  font-weight: 400;
  line-height: 1.8;
  color: rgba(255,255,255,0.72);
  margin: 0;
  text-wrap: pretty;
}
.id-p b { font-weight: 700; color: #fff; }

/* cierre: la última línea del texto, no un botón */
.id-cta {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.3rem, min(2.6vw, 3.4vh), 2rem);
  letter-spacing: 0.04em;
  color: var(--strength);
  margin: clamp(1.4rem, 3.4vh, 2.4rem) 0 0;
  padding-top: clamp(1.1rem, 2.6vh, 1.8rem);
  border-top: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 780px) {
  /* apilados, el texto necesita ir más apretado para caber en una pantalla */
  .id-cols { grid-template-columns: 1fr; gap: 0.85rem; }
  .id-p { font-size: clamp(0.8rem, 1.45vh, 0.92rem); line-height: 1.6; }
  .ident { max-width: 560px; }
  .id-punch {
    font-size: clamp(1.6rem, min(6.6vw, 5vh), 2.4rem);
    margin-bottom: clamp(0.9rem, 2.2vh, 1.4rem);
    padding-bottom: clamp(0.8rem, 2vh, 1.2rem);
  }
  .id-eyebrow { margin-bottom: clamp(0.5rem, 1.4vh, 0.9rem); }
  .id-cta { margin-top: clamp(1rem, 2.4vh, 1.6rem); }
}
@media (max-width: 560px) {
  .ident { border-radius: 18px; padding: clamp(1.1rem, 2.6vh, 1.6rem) 1.2rem; }
  .id-punch br { display: initial; }
}
/* Pantallas muy bajas y angostas (iPhone SE y similares): aquí el texto
   no cabe sin volverse ilegible. Preferimos que la sección crezca y se
   pueda desplazar antes que reducir la letra por debajo de lo legible. */
@media (max-height: 680px) and (max-width: 780px) {
  .filo-section { min-height: 0; padding: 3rem 0; }
}
@media (prefers-reduced-motion: reduce) { .filo-pulse { animation: none; opacity: 0.4; } }

.filo-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

/* Card que envuelve el manifiesto para dar profundidad */
.filo-card {
  position: relative;
  background: linear-gradient(165deg, rgba(20,26,20,0.85) 0%, rgba(10,14,20,0.9) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  padding: clamp(2rem, 5vw, 4rem);
  box-shadow:
    0 40px 100px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
}
.filo-card::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--endurance), var(--strength), transparent);
  opacity: 0.7;
}

.filo-lead {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 3.2vw, 1.9rem);
  line-height: 1.35;
  color: #FFFFFF;
  margin: 0 auto 1rem;
  max-width: 660px;
}
.filo-text {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.58);
  max-width: 620px;
  margin: 0 auto;
}
.filo-pillars, .filo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}
.filo-pillar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: linear-gradient(135deg, rgba(14,165,233,0.16), rgba(57,255,20,0.1));
  border: 1px solid rgba(14,165,233,0.3);
}
.filo-pillar::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--endurance);
  box-shadow: 0 0 8px var(--endurance);
}

/* Panel del bloque 1% con borde de acento */
.filo-onepct {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
  padding: 1.5rem 1.75rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid var(--strength);
  border-radius: 14px;
}
.filo-onepct span {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.55;
}
.filo-onepct span strong { color: var(--strength); font-weight: 800; }

/* Frase de marca fuerte (NO cursiva, condensada, impacto) */
.filo-quote-block {
  position: relative;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(14,165,233,0.1) 0%, rgba(8,8,8,0.4) 50%, rgba(57,255,20,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.1);
}
.filo-quote {
  font-family: 'Bebas Neue', sans-serif;
  font-style: normal;
  font-size: clamp(2.1rem, 6vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-transform: none;
  margin: 0 auto;
  max-width: 760px;
}
.filo-quote-accent {
  color: var(--strength);
  text-shadow: 0 0 32px rgba(57,255,20,0.4);
}
.filo-subtext {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.55);
  margin-top: 1.1rem;
}
.filo-tag {
  padding: 0.5rem 1.1rem;
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--strength);
  background: rgba(57,255,20,0.08);
  border: 1px solid rgba(57,255,20,0.25);
}

/* Layout compacto a 2 columnas */
.filo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  text-align: left;
}
@media (min-width: 860px) {
  .filo-grid { grid-template-columns: 1fr 1fr; gap: 2.25rem; align-items: stretch; }
}
.filo-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.filo-grid .filo-lead { font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin: 0; max-width: none; }
.filo-grid .filo-text { margin: 0; max-width: none; font-size: 0.95rem; line-height: 1.7; }
.filo-grid .filo-onepct { margin: 0; gap: 0.4rem; padding: 1.25rem 1.4rem; }
.filo-grid .filo-onepct span { font-size: 0.9rem; line-height: 1.45; }
.filo-grid .filo-pillars { justify-content: flex-start; }

/* ============================================================
   CATEGORY LOBBY (Wellness store entrance)
   ============================================================ */
.cat-lobby {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F7F5 100%);
}

/* ── Botón "Ver categorías" (vuelve al lobby desde la lista) ── */
.coll-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.btn-up-cats {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
  font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  padding: 0.65rem 1.1rem; border-radius: 999px;
  color: #1A1A1A; background: #FFFFFF; border: 1px solid var(--w-border, rgba(0,0,0,0.12));
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.btn-up-cats:hover, .btn-up-cats:focus-visible { background: #1A1A1A; color: #fff; transform: translateY(-2px); }
.btn-up-cats.on-dark { color: #fff; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.btn-up-cats.on-dark:hover, .btn-up-cats.on-dark:focus-visible { background: #fff; color: #0A0A0A; }
/* en móvil: solo una flecha en círculo, esquina inferior izquierda */
@media (max-width: 767px) {
  .btn-up-cats {
    position: fixed; left: 1.1rem; bottom: 1.1rem; transform: none;
    width: 48px; height: 48px; padding: 0; gap: 0; border-radius: 50%;
    justify-content: center;
    z-index: 45; opacity: 0; pointer-events: none;
    background: rgba(20,20,20,0.92); color: #fff; border-color: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 22px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.25s ease;
  }
  .btn-up-cats .up-cats-txt { display: none; }   /* solo la flecha */
  .btn-up-cats svg { width: 20px; height: 20px; }
  .btn-up-cats.visible { opacity: 1; pointer-events: auto; }
  .btn-up-cats:hover, .btn-up-cats:focus-visible,
  .btn-up-cats.on-dark:hover, .btn-up-cats.on-dark:focus-visible {
    background: #fff; color: #0A0A0A; transform: translateY(-2px);
  }
}

.cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
/* ── Móvil: categorías como carrusel tipo Netflix ─────────── */
@media (max-width: 599px) {
  .cat-grid {
    display: flex; gap: 0.9rem;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* sangrado a los bordes de la pantalla, como Netflix */
    margin-left: -1.5rem; margin-right: -1.5rem;
    padding: 0.25rem 1.5rem 1.1rem;
  }
  .cat-grid::-webkit-scrollbar { display: none; }
  .cat-grid > * {
    flex: 0 0 78%; max-width: 300px;
    scroll-snap-align: start;
  }
  body[data-page="wellness"] .cat-grid { gap: 0.9rem; }
  body[data-page="wellness"] .cat-card { padding: 1.4rem; }
  body[data-page="wellness"] .cat-icon { width: 56px; height: 56px; border-radius: 16px; }
  /* pista de scroll sutil bajo el carrusel */
  .cat-rail { position: relative; }
  .cat-rail::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 1.1rem; width: 44px;
    background: linear-gradient(90deg, transparent, var(--rail-fade, #F8F7F5));
    pointer-events: none; opacity: 0.9;
  }
  body[data-page="performance"] .cat-rail::after { --rail-fade: #0A0A0A; }
}
@media (min-width: 600px)  { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }

/* Wellness: categorías en 4 columnas — ícono arriba, título e info abajo (sin "Explorar") */
body[data-page="wellness"] .cat-lobby .container { max-width: 1500px; padding-left: 1.5rem; padding-right: 1.5rem; }
body[data-page="wellness"] .cat-grid { gap: 1.5rem; }
@media (min-width: 600px)  { body[data-page="wellness"] .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px)  { body[data-page="wellness"] .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { body[data-page="wellness"] .cat-grid { grid-template-columns: repeat(4, 1fr); } }
body[data-page="wellness"] .cat-card { padding: 1.9rem; border-radius: 20px; }
body[data-page="wellness"] .cat-card-top { flex-direction: column; align-items: flex-start; gap: 1.05rem; margin-bottom: 0; flex: none; }
body[data-page="wellness"] .cat-icon { width: 72px; height: 72px; border-radius: 20px; }
body[data-page="wellness"] .cat-title { font-size: 1.18rem; margin-bottom: 0.4rem; }
body[data-page="wellness"] .cat-desc { font-size: 0.88rem; line-height: 1.55; }

.cat-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: #FFFFFF;
  border: 1px solid var(--w-border);
  border-radius: 20px;
  padding: 1.75rem;
  cursor: pointer;
  font-family: inherit;
  transition: transform var(--t-base) cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow var(--t-base) ease,
              border-color var(--t-base) ease;
}
.cat-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--cat-accent, #7B5EA7) 55%, transparent);
  box-shadow: 0 24px 56px -22px color-mix(in srgb, var(--cat-accent, #7B5EA7) 45%, transparent);
}

.cat-card-top {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
  flex: 1;
}

.cat-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--t-base) ease;
}
.cat-card:hover .cat-icon { transform: scale(1.06); }

.cat-info { padding-top: 0.15rem; }

.cat-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #1A1A1A;
  margin-bottom: 0.4rem;
}

.cat-desc {
  font-size: 0.82rem;
  color: rgba(26,26,26,0.55);
  line-height: 1.5;
}

.cat-explore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.55rem 1.15rem;
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: gap var(--t-fast) ease;
}
.cat-card:hover .cat-explore { gap: 0.85rem; }

/* Dark variant (Performance lobby) */
.cat-card-dark {
  background: var(--p-card);
  border: 1px solid var(--p-border);
}
.cat-card-dark .cat-title { color: #FFFFFF; }
.cat-card-dark .cat-desc  { color: rgba(255,255,255,0.45); }
.cat-card-dark:hover {
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 18px 50px rgba(0,0,0,0.4);
}

/* ============================================================
   RUTINAS / BUNDLES
   ============================================================ */
/* Negro (antes crema): la sección se sentía plana y las cards no
   resaltaban. Sobre negro las tarjetas claras saltan y las oscuras se
   definen con su borde — igual que en la página rutinas.html standalone,
   que ya usa fondo oscuro. Gradiente sutil para dar profundidad. */
.rutinas-section {
  background: linear-gradient(180deg, #0D0D10 0%, #080808 60%);
}

/* ============================================================
   RUTINAS — sistema unificado de cards premium  (.rutina-card3)
   Área visual grande (rotación de productos) + info jerarquizada.
   Colorimetría por línea via --rt-acc / --rt-deep / clases rt-dark|rt-light
   ============================================================ */
.rutinas-grid-home,
.rutinas-grid-full {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: stretch;
}
@media (min-width: 720px)  { .rutinas-grid-home, .rutinas-grid-full { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .rutinas-grid-home, .rutinas-grid-full { grid-template-columns: repeat(3, 1fr); } }

.rutina-card3 {
  --rt-acc: #B98FD8;
  --rt-deep: #7C5CC0;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  background: #0d0d10;
  border: 1px solid rgba(255,255,255,0.08);
  scroll-margin-top: 120px;
  transition: transform var(--t-base) cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow var(--t-base) ease, border-color var(--t-base) ease;
}
.rutina-card3:hover { transform: translateY(-8px); }
.rutina-card3:focus-visible { outline: 2px solid var(--rt-deep); outline-offset: 3px; }

/* halo de color por línea (controlado, no gamer) */
.rutina-card3.rt-dark:hover {
  box-shadow: 0 26px 60px rgba(0,0,0,0.5),
              0 18px 50px -14px color-mix(in srgb, var(--rt-acc) 50%, transparent);
  border-color: color-mix(in srgb, var(--rt-acc) 35%, transparent);
}
.rutina-card3.rt-light { background: #ffffff; border-color: rgba(20,18,30,0.08); }
.rutina-card3.rt-light:hover {
  box-shadow: 0 26px 60px rgba(20,18,30,0.13),
              0 18px 50px -16px color-mix(in srgb, var(--rt-acc) 60%, transparent);
  border-color: color-mix(in srgb, var(--rt-acc) 42%, transparent);
}

/* ---- Área visual grande (rotación 1×1) ---- */
.rt-visual {
  position: relative;
  height: 390px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (min-width: 720px) { .rt-visual { height: 390px; } }
.rt-halo { position: absolute; inset: 0; pointer-events: none; }
.rt-stack { position: relative; width: 100%; height: 100%; }
.rt-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0.7rem; /* casi sin margen: el frasco protagoniza, centrado y grande */
  opacity: 0; transform: scale(0.955) translateY(8px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
}
.rt-slide.is-active { opacity: 1; transform: none; }

/* imagen de la rutina: mismo sistema que producto → ~295×387, vertical, contain */
.rt-img {
  width: auto;
  height: 100%;
  max-width: 295px;
  max-height: 387px;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* indicadores */
.rt-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; z-index: 3; }
.rt-dot { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--rt-deep) 30%, transparent); transition: all var(--t-base) ease; cursor: pointer; }
.rt-dot.is-active { background: var(--rt-deep); width: 20px; border-radius: 100px; }
.rt-dark .rt-dot { background: rgba(255,255,255,0.22); }
.rt-dark .rt-dot.is-active { background: var(--rt-acc); }

/* badge "Más popular" */
.rt-badge {
  position: absolute; top: 16px; left: 16px; z-index: 4;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.42rem 0.8rem; border-radius: 100px;
  font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  background: color-mix(in srgb, var(--rt-acc) 20%, #ffffff); color: var(--rt-deep);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.rt-dark .rt-badge { background: color-mix(in srgb, var(--rt-acc) 24%, #0a0a0a); color: var(--rt-acc); box-shadow: 0 0 18px color-mix(in srgb, var(--rt-acc) 35%, transparent); }
.rt-badge svg { width: 12px; height: 12px; }

/* ---- Cuerpo / jerarquía ---- */
.rt-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.rt-cat {
  font-family: 'Montserrat', sans-serif; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rt-deep); margin-bottom: 0.55rem;
}
.rt-dark .rt-cat { color: var(--rt-acc); }
.rt-title { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; line-height: 0.98; letter-spacing: 0.02em; color: #141019; margin-bottom: 0.4rem; }
.rt-dark .rt-title { color: #fff; }
.rt-phrase { font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--rt-deep); margin-bottom: 0.7rem; }
.rt-dark .rt-phrase { color: var(--rt-acc); }
.rt-desc { font-family: 'Inter', sans-serif; font-size: 0.82rem; line-height: 1.6; color: #52505c; margin-bottom: 1.1rem; }
.rt-dark .rt-desc { color: rgba(255,255,255,0.58); }

.rt-list { list-style: none; display: flex; flex-direction: column; margin-bottom: 1.1rem; }
.rt-li { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0; border-top: 1px solid rgba(20,18,30,0.07); }
.rt-li:first-child { border-top: none; }
.rt-dark .rt-li { border-top-color: rgba(255,255,255,0.07); }
.rt-num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 800;
  color: var(--rt-deep); background: color-mix(in srgb, var(--rt-acc) 16%, transparent);
}
.rt-dark .rt-num { color: var(--rt-acc); }
.rt-li-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rt-li-name { font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 700; color: #1d1b26; }
.rt-dark .rt-li-name { color: #fff; }
.rt-li-sub { font-family: 'Inter', sans-serif; font-size: 0.75rem; color: #64626E; line-height: 1.35; }  /* #7a7886 daba 4.08:1 */
.rt-dark .rt-li-sub { color: rgba(255,255,255,0.62); }   /* 0.42 daba 4.08:1 en card oscura */
.rt-li-price { flex-shrink: 0; font-family: 'Montserrat', sans-serif; font-size: 0.8rem; font-weight: 700; color: #3a3844; }
.rt-dark .rt-li-price { color: rgba(255,255,255,0.6); }

/* ---- Footer: precio + ahorro + CTA full-width ---- */
.rt-foot {
  margin: 0 -1.5rem -1.5rem; margin-top: auto;
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 1rem;
  background: color-mix(in srgb, var(--rt-acc) 9%, transparent);
}
.rt-dark .rt-foot { background: rgba(255,255,255,0.035); }
.rt-pricing { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.7rem; }
.rt-final { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.7rem; line-height: 1; color: #141019; }
.rt-dark .rt-final { color: #fff; }
.rt-price-row { display: inline-flex; align-items: baseline; gap: 0.6rem; }
.rt-orig { font-family: 'Montserrat', sans-serif; font-size: 0.8rem; text-decoration: line-through; color: #6A6874; }  /* #9a98a4 daba 2.84:1 */
.rt-dark .rt-orig { color: rgba(255,255,255,0.55); }   /* 0.35 daba 3.17:1 */
.rt-save { font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 800; color: var(--rt-deep); }
.rt-dark .rt-save { color: var(--rt-acc); }

.rt-cta {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  width: 100%; padding: 0.95rem 1.5rem;
  font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--rt-cta-bg); color: var(--rt-cta-tx);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: filter var(--t-fast) ease;
}
.rutina-card3:hover .rt-cta { filter: brightness(1.06); }
.rt-cta svg { transition: transform var(--t-fast) ease; }
.rutina-card3:hover .rt-cta svg { transform: translateX(3px); }

@media (max-width: 520px) {
  .rt-visual { height: 360px; }
  .rt-title { font-size: 1.75rem; }
  .rt-body { padding: 1.25rem; }
  .rt-foot { margin: 0 -1.25rem -1.25rem; margin-top: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-slide { transition: opacity 0.25s ease; transform: none; }
}

/* (CSS antiguo de .rutina-card-full reemplazado por el sistema .rutina-card3 de arriba,
   que ahora se usa en TODOS los renders de rutina: home, rutinas, wellness y performance.) */

/* Scrollable filter row (categories) */
.filter-scroll {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  /* Había 2.269px de categorías escondidas a la derecha SIN ninguna
     señal: barra invisible en móvil, sin snap. El degradado de máscara
     desvanece el borde derecho para avisar "hay más", y el snap hace
     que las pestañas se alineen al deslizar. */
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
/* al llegar al final quitamos el desvanecido para que la última pestaña
   no quede semitransparente cuando ya no hay nada más que revelar */
.filter-scroll.at-end {
  -webkit-mask-image: none;
          mask-image: none;
}
.filter-scroll::-webkit-scrollbar { height: 4px; }
.filter-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
.filter-scroll .filter-tab { flex-shrink: 0; white-space: nowrap; scroll-snap-align: start; }

/* ── Flechas para deslizar las categorías en PC ──────────── */
.fs-wrap { position: relative; }
.fs-arrow {
  position: absolute; top: calc(50% - 0.25rem); transform: translateY(-50%);
  z-index: 6; display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: #FFFFFF; color: #1A1A1A;
  border: 1px solid var(--w-border, rgba(0,0,0,0.12));
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  transition: opacity 0.25s ease, background 0.25s ease, transform 0.2s ease;
}
.fs-arrow svg { width: 17px; height: 17px; }
.fs-arrow.prev { left: -6px; }
.fs-arrow.next { right: -6px; }
.fs-arrow:hover { background: #1A1A1A; color: #fff; }
.fs-arrow[disabled] { opacity: 0; pointer-events: none; }
/* variante para las secciones de fondo oscuro (Performance) */
body[data-page="performance"] .fs-arrow,
.fs-arrow.on-dark {
  background: rgba(28,28,28,0.94); color: #fff; border-color: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body[data-page="performance"] .fs-arrow:hover, .fs-arrow.on-dark:hover { background: #fff; color: #0A0A0A; }
/* solo en PC: en móvil se desliza con el dedo */
@media (min-width: 768px) {
  .fs-arrow { display: flex; }
  /* deja aire a los lados para que las flechas no tapen las pestañas */
  .fs-wrap .filter-scroll { padding-left: 2.4rem; padding-right: 2.4rem; scroll-padding-left: 2.4rem; }
  .fs-wrap .filter-scroll::-webkit-scrollbar { height: 0; }
  .fs-wrap .filter-scroll { scrollbar-width: none; }
}

/* ============================================================
   AMBASSADORS
   ============================================================ */
.ambassadors-section {
  background: var(--p-bg);
  overflow: hidden;
}

.ambassadors-grid {
  display: grid;
  /* 1 columna en móvil: la ProfileCard no baja de ~260px (handle sin wrap),
     así que a 2 columnas la 2ª se salía de pantalla. minmax(0,1fr) evita
     que el contenido empuje la columna más allá del ancho disponible. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 620px) {
  .ambassadors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 940px) {
  .ambassadors-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ambassador-img-placeholder {
  width: 100%;
  height: 200px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* ============================================================
   PROFILE CARD (embajadores) — tilt 3D + brillo holográfico + glow
   El acento por embajador (--pc-acc) da el color; el JS (initProfileCards)
   fija --pc-rx/--pc-ry (inclinación) y --pc-px/--pc-py (posición del brillo).
   ============================================================ */
.pc { position: relative; perspective: 1000px; }
.pc-behind {
  position: absolute; inset: -12% -8%;
  border-radius: 28px;
  background: radial-gradient(58% 55% at 50% 32%, var(--pc-glow), transparent 70%);
  filter: blur(30px);
  opacity: 0.45;
  transition: opacity var(--t-base) ease;
  pointer-events: none; z-index: 0;
}
.pc:hover .pc-behind, .pc:focus-within .pc-behind { opacity: 0.9; }
.pc-tilt {
  position: relative; z-index: 1;
  border-radius: 22px;
  transform: rotateX(var(--pc-rx, 0deg)) rotateY(var(--pc-ry, 0deg));
  transition: transform 0.28s cubic-bezier(0.22,0.61,0.36,1);
  will-change: transform;
}
.pc-inner {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  padding: 1.6rem 1.4rem 1.3rem;
  min-height: 350px;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pc-acc) 14%, #0d0d12) 0%, #0a0a0e 62%);
  border: 1px solid color-mix(in srgb, var(--pc-acc) 30%, rgba(255,255,255,0.08));
  box-shadow: 0 22px 55px -22px rgba(0,0,0,0.75);
}
/* brillo holográfico que sigue el puntero */
.pc-shine {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--pc-px,50%) var(--pc-py,50%),
      color-mix(in srgb, var(--pc-acc) 42%, transparent), transparent 46%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 5px, transparent 5px 13px);
  mix-blend-mode: screen;
  opacity: 0.5; transition: opacity var(--t-base) ease;
}
.pc:hover .pc-shine { opacity: 0.9; }
/* destello (glare) que sigue el puntero */
.pc-glare {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--pc-px,50%) var(--pc-py,50%), rgba(255,255,255,0.22), transparent 34%);
  opacity: 0; transition: opacity var(--t-base) ease;
}
.pc:hover .pc-glare { opacity: 1; }

.pc-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; }
.pc-avatar {
  width: 94px; height: 94px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; letter-spacing: 0.05em;
  color: var(--pc-acc);
  background: color-mix(in srgb, var(--pc-acc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc-acc) 48%, transparent);
  box-shadow: 0 0 32px color-mix(in srgb, var(--pc-acc) 32%, transparent),
              inset 0 0 22px color-mix(in srgb, var(--pc-acc) 12%, transparent);
  margin: 0.5rem 0 1.05rem;
}
.pc-name { font-family: 'Montserrat', sans-serif; font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 0.2rem; }
.pc-title { font-family: 'Montserrat', sans-serif; font-size: 0.76rem; font-weight: 600; color: rgba(255,255,255,0.6); }
/* barra de usuario (glassy) al pie */
.pc-user {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  margin-top: 1.1rem; padding: 0.45rem 0.45rem 0.45rem 0.85rem;
  border-radius: 100px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc-acc); box-shadow: 0 0 8px var(--pc-acc); flex-shrink: 0; }
.pc-user-txt { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.pc-handle { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pc-status { font-family: 'Montserrat', sans-serif; font-size: 0.66rem; color: rgba(255,255,255,0.55); }
.pc-contact {
  flex-shrink: 0; min-height: 36px; padding: 0 0.95rem; border-radius: 100px;
  border: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: #060606; background: var(--pc-acc);
  transition: filter var(--t-fast) ease, transform var(--t-fast) ease;
}
.pc-contact:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .pc-tilt { transition: none; }
}

/* ============================================================
   QUALITY / TRUST SECTION
   ============================================================ */
@media (min-width: 768px) {
}

/* ============================================================
   MANIFESTO / BRAND STATEMENT
   ============================================================ */

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  background: linear-gradient(135deg, #0E0E0E 0%, #141414 50%, #0E0E0E 100%);
  padding: 5rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(14, 165, 233, 0.06), transparent 70%);
  pointer-events: none;
}

.cta-banner-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: 0.06em;
  color: #fff;
  margin-bottom: 1rem;
}

.cta-banner-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 2.5rem;
}

/* ============================================================
   NEWSLETTER
   ============================================================ */

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: #060606;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 4rem 1.5rem 2rem;
}

.footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 2.5fr 1fr 1fr 1fr; }
}

.footer-brand-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.12em;
  color: #fff;
  margin-bottom: 1rem;
}

.footer-brand-desc {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);    /* 0.3 daba 2.54:1 */
  line-height: 1.7;
  max-width: 260px;
  margin-bottom: 1.5rem;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
}

.social-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  transition: all var(--t-fast) ease;
  cursor: pointer;
}
.social-btn:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
}

.footer-col-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1.25rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-links a {
  font-size: 0.825rem;
  color: rgba(255,255,255,0.62);   /* 0.35 daba 3.08:1 */
  transition: color var(--t-fast) ease;
}
.footer-links a:hover { color: rgba(255,255,255,0.75); }

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: gap;
  gap: 1rem;
}

/* 0.2 sobre #060606 daba 1.72:1 — prácticamente ilegible.
   0.55 llega a 6.2:1 sin cambiar la jerarquía visual del pie. */
.footer-legal {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
}

.footer-mexico {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
}

/* ============================================================
   CART SIDEBAR
   ============================================================ */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow) ease;
  backdrop-filter: blur(4px);
}
.cart-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.cart-sidebar {
  position: fixed;
  top: 0;
  right: -440px;
  width: 440px;
  max-width: 100vw;
  height: 100%;
  background: #0D0D0D;
  border-left: 1px solid rgba(255,255,255,0.07);
  z-index: var(--z-modal);
  transition: right var(--t-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cart-sidebar.open { right: 0; }

.cart-header {
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.cart-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}

.cart-close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all var(--t-fast) ease;
}
.cart-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1rem;
  color: rgba(255,255,255,0.3);
}

.cart-empty svg { width: 48px; height: 48px; opacity: 0.3; }

.cart-empty-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cart-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  position: relative;
}

.cart-item-img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-variant {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.62);   /* 0.35 daba 3.17:1 sobre el panel del carrito */
  margin-bottom: 0.6rem;
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast) ease;
  font-weight: 600;
}
.qty-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

.qty-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
  min-width: 20px;
  text-align: center;
}

.cart-item-price {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.85);
  margin-left: auto;
  align-self: center;
}

.cart-item-remove {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  color: rgba(255,255,255,0.55);   /* 0.2 daba 1.72:1 y era casi invisible */
  cursor: pointer;
  font-size: 0.75rem;
  transition: color var(--t-fast) ease;
  background: none;
  border: none;
  padding: 2px;
}
.cart-item-remove:hover { color: rgba(255, 100, 100, 0.7); }

.cart-footer {
  padding: 1.5rem 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.cart-subtotal-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
}

.cart-subtotal-amount {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
}

.cart-subtotal-note {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.25);
  margin-bottom: 1.25rem;
}

.btn-checkout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--endurance), #0070CC);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all var(--t-base) ease;
}
.btn-checkout:hover {
  box-shadow: 0 0 30px var(--endurance-glow-strong);
  transform: translateY(-1px);
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #1A1A1A;
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  z-index: var(--z-toast);
  transition: transform var(--t-base) cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Sin tope de ancho, "Skin Hydration Complex agregado al carrito"
     medía 354px con nowrap y, centrado en 320px, se cortaba 17px por
     cada lado. Con el tope, los nombres largos envuelven. */
  max-width: calc(100vw - 2rem);
  white-space: normal;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--strength);
  box-shadow: 0 0 8px var(--strength-glow);
}

/* ============================================================
   WELLNESS PAGE SPECIFIC
   ============================================================ */
.wellness-hero {
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  background: linear-gradient(150deg, #FAF8F2 0%, #F2EADA 32%, #EDE9E2 66%, #F7F1E4 100%);
  display: flex;
  align-items: center;
  padding-top: 7rem;
  padding-bottom: 5rem;
  position: relative;
  overflow: hidden;
}
/* Fondo iridescente (WebGL) en lugar de la foto */
.hero-iridescence {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
  overflow: hidden;
}
.hero-iridescence canvas { display: block; width: 100%; height: 100%; }
/* Scrim claro a la izquierda para que el texto respire y se lea */
/* Velo de lectura sobre el metal animado. En crema cálido (no gris) para
   pertenecer a la misma familia oro/plata/crema del efecto. Protege la
   zona del texto y deja el metal limpio a la derecha. */
.wellness-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg,
    rgba(250,247,238,0.94) 0%,
    rgba(250,247,238,0.88) 30%,
    rgba(250,247,238,0.55) 50%,
    rgba(250,247,238,0.14) 68%,
    rgba(250,247,238,0) 80%);
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 900px) {
  /* en móvil el texto ocupa todo el ancho: el velo baja en vertical */
  .wellness-hero::after {
    background: linear-gradient(178deg,
      rgba(250,247,238,0.92) 0%,
      rgba(250,247,238,0.85) 58%,
      rgba(250,247,238,0.42) 100%);
  }
}
.wellness-hero .container { position: relative; z-index: 2; }

.wellness-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1.05;
  color: #1A1A1A;
}

.wellness-hero-desc {
  font-size: 1rem;
  color: rgba(26,26,26,0.6);
  max-width: 480px;
  line-height: 1.7;
  margin: 1.5rem 0 2.5rem;
}

/* Wellness pillars */

/* ============================================================
   PERFORMANCE PAGE SPECIFIC
   ============================================================ */
.performance-hero {
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  background: var(--p-bg);
  display: flex;
  align-items: center;
  padding-top: 8rem;
  padding-bottom: 5rem;
  position: relative;
  overflow: hidden;
}

/* Fondo Hyperspeed (WebGL/Three.js) detrás del contenido */
.performance-hero #hyperspeed {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.performance-hero #hyperspeed canvas { display: block; width: 100%; height: 100%; }
/* Scrim para legibilidad del texto (sin foto, sobre el Hyperspeed) */
.performance-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,7,9,0.8) 0%, rgba(6,7,9,0.42) 48%, rgba(6,7,9,0.05) 100%),
    linear-gradient(to top, rgba(6,7,9,0.78) 0%, transparent 36%);
}

.performance-hero-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1rem;
}

.performance-hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: #fff;
}

/* "1%": el anclaje de color del hero → degradado azul (Endurance) → verde (Strength) + glow */
.performance-hero-title .ph-grad {
  background: linear-gradient(100deg, #0EA5E9 0%, #22D3EE 45%, #39FF14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 32px rgba(20,190,160,0.5));
}

/* ── Efecto del título del hero: entrada LETRA POR LETRA ("ignición") +
   glow neón continuo que respira entre azul (Endurance) y verde (Strength). */
.performance-hero-title { animation: ph-neon 4s ease-in-out infinite; }
.ph-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) scale(0.96);
  will-change: transform, opacity;
}
.ph-fx .ph-letter {
  animation: ph-letter-in 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.045s);
}
@keyframes ph-letter-in {
  0%   { opacity: 0; transform: translateY(0.5em) scale(0.96); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ph-neon {
  0%, 100% { text-shadow: 0 0 14px rgba(14,165,233,0.40), 0 0 34px rgba(14,165,233,0.18); }
  50%      { text-shadow: 0 0 18px rgba(57,255,20,0.48), 0 0 44px rgba(57,255,20,0.22); }
}
@media (prefers-reduced-motion: reduce) {
  .performance-hero-title { animation: none; }
  .ph-letter { opacity: 1; transform: none; animation: none; }
}

/* Línea de apoyo: acompaña a "SÉ PARTE DEL 1%" sin competir */
.ph-support {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 2.1vw, 1.45rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0EA5E9;
  margin: 1.3rem 0 2.6rem;
  animation: hue-swap 2.2s step-end infinite;
}

/* ── Palabra rotativa (port vanilla de React Bits "RotatingText") ──
   "CADA" fijo + segunda palabra que rota con stagger por carácter. */
.rt { display: inline-flex; vertical-align: baseline; }
.rt-word { display: inline-flex; }
.rt-char {
  display: inline-block;
  transform: translateY(0.55em);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
  will-change: transform, opacity;
}
.rt-char.in  { transform: translateY(0);      opacity: 1; }
.rt-char.out { transform: translateY(-0.6em); opacity: 0; }
.rt-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* impacto: "Cada" y la palabra rotativa se intercambian azul/verde EN BLOQUE
   y sincronizadas — fase opuesta: cuando una es azul, la otra es verde */
/* La animación va en .rt (elemento ESTABLE, no se reconstruye al rotar) y los
   chars heredan el color → siempre sincronizado y opuesto a "Cada". */
.ph-support .rt {
  font-weight: 800;
  animation: hue-swap 2.2s step-end infinite;
  animation-delay: -1.1s;   /* media fase → color contrario al de "Cada" */
}
/* step-end = corte seco: mantiene el color y salta instantáneo (sin cruce/teal) */
@keyframes hue-swap {
  0%  { color: #0EA5E9; text-shadow: 0 0 14px rgba(14,165,233,0.5); }   /* AZUL  (0–50%) */
  50% { color: #39FF14; text-shadow: 0 0 14px rgba(57,255,20,0.5); }    /* VERDE (50–100%) */
}
@media (prefers-reduced-motion: reduce) {
  .ph-support { animation: none; color: #0EA5E9; }
  .ph-support .rt { animation: none; color: #39FF14; }
}

/* Sub-line toggle tabs */
.subline-tabs {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
  margin-bottom: 3rem;
}

.subline-tab {
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-base) ease;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.4);
}

.subline-tab.active-endurance {
  background: var(--endurance);
  color: #000;
  box-shadow: 0 0 20px var(--endurance-glow);
}

.subline-tab.active-strength {
  background: var(--strength);
  color: #000;
  box-shadow: 0 0 20px var(--strength-glow);
}

/* Neon stat numbers */
.neon-stat {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: 0.04em;
}
.neon-endurance { color: var(--endurance); text-shadow: 0 0 20px var(--endurance-glow-strong); }
.neon-strength  { color: var(--strength);  text-shadow: 0 0 20px var(--strength-glow-strong); }

.neon-divider-endurance {
  width: 3px;
  height: 40px;
  background: var(--endurance);
  box-shadow: 0 0 12px var(--endurance-glow);
  border-radius: 2px;
}
.neon-divider-strength {
  width: 3px;
  height: 40px;
  background: var(--strength);
  box-shadow: 0 0 12px var(--strength-glow);
  border-radius: 2px;
}

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */

/* Estas cinco reglas estuvieron muertas mucho tiempo (comentario de la
   cabecera mal cerrado), así que producto.html se renderizaba solo con los
   estilos en línea del HTML: el precio salía a 16px, tamaño de párrafo. */
.product-detail-img {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-detail-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.product-detail-tagline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}

.product-detail-price {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 2.25rem;
  margin-bottom: 0.25rem;
}

.product-detail-desc {
  font-size: 0.9rem;
  line-height: 1.75;
  max-width: 480px;
}

/* Ingredient list */

.ingredient-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: 1px solid;
  font-size: 0.85rem;
}

/* Benefits pills */
.benefits-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.benefit-pill {
  padding: 0.4rem 0.875rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

/* ============================================================
   STORE PAGE
   ============================================================ */
.store-hero {
  background: var(--p-bg);
  padding-top: 8rem;
  padding-bottom: 4rem;
}

/* ============================================================
   ANIMATIONS & TRANSITIONS
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }

/* Intersection observer reveal (animación, no transición → no choca con hover) */
.reveal { opacity: 0; }
.reveal.visible {
  opacity: 1;
  animation: revUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes revUp {
  from { opacity: 0; transform: translateY(34px); filter: blur(7px); }
  55%  { filter: blur(0); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ── Micro-interacciones premium ──────────────────────────── */
/* Brillo que recorre los botones al hover */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.38) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}
.btn:hover::after { left: 150%; }
.btn > * { position: relative; z-index: 2; }

/* Zoom sutil de la foto dentro de la card al pasar el cursor */
.product-photo, .rt-img { transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.product-card:hover .product-photo { transform: scale(1.06); }
.rutina-card3:hover .rt-img { transform: scale(1.05); }

/* Barra de progreso de scroll (arriba del todo) */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 0;
  z-index: 9999;
  background: linear-gradient(90deg, #0EA5E9, #22D3EE, #39FF14);
  box-shadow: 0 0 10px rgba(14,165,233,0.5);
  pointer-events: none;
  transition: width 0.12s linear;
}

/* ── Transición de página: barras horizontales (scaleX) ──── */
.page-wipe {
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;            /* solo visual, nunca atrapa clics */
  background: #0a0a0a;             /* cubre desde el primer pixel (sin flash) */
}
.page-wipe.ready { background: transparent; } /* las barras toman el control */
.wipe-bar {
  position: absolute;
  left: 0;
  width: 100%;
  background: #0a0a0a;
  transform: scaleX(1);            /* cubriendo */
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.page-wipe.revealed .wipe-bar { transform: scaleX(0); } /* se encogen → revelan */
@media (prefers-reduced-motion: reduce) {
  .page-wipe { display: none !important; }
}

/* ============================================================
   HERO PREMIUM FX (home)
   ============================================================ */
/* Letras del hero: entran una a una con giro y desenfoque */
.hl {
  display: inline-block;
  opacity: 0;
  animation: heroLetter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}
@keyframes heroLetter {
  from { opacity: 0; transform: translateY(0.55em) rotate(5deg) scale(0.92); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Pulso de glow continuo en Performance/Wellness/Life (sutil) */
@keyframes glowPulse {
  from { filter: drop-shadow(0 0 4px rgba(255,255,255,0)); }
  to   { filter: drop-shadow(0 0 10px currentColor); }
}
.hero-subtitle .hs-perf,
.hero-subtitle .hs-well,
.hero-subtitle .hs-life { animation: glowPulse 3.2s ease-in-out infinite alternate; }

/* ── Depth layers (parallax con cursor) + tilt + magnéticos ── */
.hero { perspective: 1200px; }
.hero [data-depth] {
  transition: translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: translate;
}
/* el video se escala un pelín más para que el parallax no deje bordes */
.hero-video[data-depth] { scale: 1.05; }
.tilt { transition: rotate 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: rotate; }
.hero-badge-row { perspective: 600px; }
.hero-ctas .btn, .magnetic { transition: translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: translate; }

/* Ken Burns: zoom lentísimo del video del hero (más impacto) */
.hero-video { animation: heroKenBurns 26s ease-in-out infinite alternate; transform-origin: center; }
@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* ── Line cards (Elige tu línea): flotan en reposo + tilt 3D al hover ── */
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* ============================================================
   IDENTIDAD (Filosofía) — animaciones premium
   ============================================================ */
/* Watermark "1%": respiración lenta */
.filo-watermark { animation: wmBreathe 11s ease-in-out infinite alternate; }
@keyframes wmBreathe {
  from { transform: translate(-50%, -50%) scale(1);    -webkit-text-stroke-color: rgba(255,255,255,0.035); }
  to   { transform: translate(-50%, -52%) scale(1.04); -webkit-text-stroke-color: rgba(255,255,255,0.07); }
}

/* Las líneas "El 1% que..." entran en cascada al revelarse la card */
.filo-card .filo-onepct span {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.filo-card.visible .filo-onepct span { opacity: 1; transform: none; }
.filo-card.visible .filo-onepct span:nth-child(1) { transition-delay: 0.25s; }
.filo-card.visible .filo-onepct span:nth-child(2) { transition-delay: 0.40s; }
.filo-card.visible .filo-onepct span:nth-child(3) { transition-delay: 0.55s; }
.filo-card.visible .filo-onepct span:nth-child(4) { transition-delay: 0.70s; }
.filo-card.visible .filo-onepct span:nth-child(5) { transition-delay: 0.85s; }
.filo-card.visible .filo-onepct span:nth-child(6) { transition-delay: 1.00s; }

/* Pills y tags: pop en cascada */
.filo-card .filo-pillar, .filo-card .filo-tag {
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.filo-card.visible .filo-pillar, .filo-card.visible .filo-tag { opacity: 1; transform: none; }
.filo-card.visible .filo-pillar:nth-child(1), .filo-card.visible .filo-tag:nth-child(1) { transition-delay: 0.30s; }
.filo-card.visible .filo-pillar:nth-child(2), .filo-card.visible .filo-tag:nth-child(2) { transition-delay: 0.42s; }
.filo-card.visible .filo-pillar:nth-child(3), .filo-card.visible .filo-tag:nth-child(3) { transition-delay: 0.54s; }

/* Línea superior de la card: barrido de color continuo */
.filo-card::before {
  background: linear-gradient(90deg, transparent, var(--endurance), var(--strength), transparent);
  background-size: 220% 100%;
  animation: filoSweep 5.5s linear infinite;
}
@keyframes filoSweep {
  from { background-position: 200% 0; }
  to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hl { animation: none; opacity: 1; }
  .hero-subtitle .hs-perf, .hero-subtitle .hs-well, .hero-subtitle .hs-life { animation: none; }
  .hero-video { animation: none; }
  .wellness-hero::before, .performance-hero::before { animation: none; }
  .filo-watermark { animation: none; }
  .filo-card .filo-onepct span, .filo-card .filo-pillar, .filo-card .filo-tag { opacity: 1; transform: none; transition: none; }
  .filo-card::before { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
  .scroll-progress { display: none; }
  .product-card:hover .product-photo,
  .rutina-card3:hover .rt-img { transform: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE UTILITIES
   ============================================================ */
@media (max-width: 640px) {
  .section-py { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

@media (min-width: 641px) {
}

/* ============================================================
   ===== REFINAMIENTO v3: halos, cards, buscador, modales =====
   ============================================================ */

/* ---- Product card: imagen protagonista + halo de color ---- */
.product-img { height: 390px; }
.product-card { transition: transform var(--t-base) ease, box-shadow var(--t-base) ease, border-color var(--t-base) ease; }

/* Halo de color en reposo (sutil) y en hover (notorio) */
.card-wellness  { box-shadow: 0 10px 30px rgba(123,94,167,0.10); }
.card-endurance { box-shadow: 0 10px 30px rgba(14,165,233,0.10); }
.card-strength  { box-shadow: 0 10px 30px rgba(57,255,20,0.08); }
.card-wellness:hover  { box-shadow: 0 26px 60px rgba(123,94,167,0.30); transform: translateY(-7px); border-color: rgba(200,180,216,0.55); }
.card-endurance:hover { box-shadow: 0 26px 60px rgba(14,165,233,0.34); transform: translateY(-7px); border-color: rgba(14,165,233,0.55); }
.card-strength:hover  { box-shadow: 0 26px 60px rgba(57,255,20,0.26); transform: translateY(-7px); border-color: rgba(57,255,20,0.5); }

/* ---- Línea card halo ---- */

/* ---- Búsqueda en header ---- */
.search-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity var(--t-slow) ease; z-index: calc(var(--z-nav) + 5);
}
.search-overlay.open { opacity: 1; pointer-events: all; }
.search-panel {
  position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-nav) + 6);
  background: linear-gradient(180deg, rgba(10,10,12,0.98), rgba(8,8,10,0.98));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transform: translateY(-110%); transition: transform var(--t-slow) cubic-bezier(0.25,0.46,0.45,0.94);
}
.search-panel.open { transform: translateY(0); }
.search-inner { max-width: 760px; margin: 0 auto; padding: 1.5rem; }
.search-bar {
  display: flex; align-items: center; gap: 0.75rem;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 0.9rem 1.1rem;
}
/* La barra mide 63px pero el input solo 20: tocar fuera de esa franja
   no enfocaba. El padding vertical le da toda la altura de la barra. */
.search-bar input {
  flex: 1; background: transparent; border: none; color: #fff;
  padding: 0.7rem 0;
  font-family: 'Montserrat', sans-serif; font-size: 1.05rem;
}
.search-bar input::placeholder { color: rgba(255,255,255,0.5); }
#search-clear { background: rgba(255,255,255,0.06); border: none; color: rgba(255,255,255,0.6); width: 44px; height: 44px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#search-clear:hover { background: rgba(255,255,255,0.12); color: #fff; }
.search-results { margin-top: 1rem; max-height: 60vh; max-height: 60dvh; overflow-y: auto; }
.search-hint { font-family: 'Montserrat', sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0.5rem 0.25rem 0.75rem; }
.search-empty { color: rgba(255,255,255,0.4); padding: 1.5rem 0.5rem; text-align: center; font-size: 0.9rem; }
.search-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.75rem; border-radius: 12px; transition: background var(--t-fast) ease; }
.search-row:hover { background: rgba(255,255,255,0.05); }
.search-row-ico { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.search-row-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.search-row-name { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.875rem; color: #fff; }
.search-row-cat { font-size: 0.7rem; font-weight: 600; }
.search-row-price { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.85rem; color: rgba(255,255,255,0.7); }

/* ---- Overlays / modales genéricos ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,0.72); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  opacity: 0; pointer-events: none; transition: opacity var(--t-slow) ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-card {
  position: relative; width: 100%; background: #0D0E10;
  border: 1px solid rgba(255,255,255,0.09); border-radius: 22px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6); overflow: hidden;
  /* dvh: con 92vh iOS usa el viewport GRANDE (812) aunque solo se vean
     ~690, así que el modal terminaba ~89px por debajo de lo visible.
     El resto de la hoja ya usaba svh/dvh; este selector se quedó fuera. */
  max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  transform: translateY(16px) scale(0.98); transition: transform var(--t-slow) cubic-bezier(0.16,1,0.3,1);
}
.modal-overlay.open .modal-card { transform: translateY(0) scale(1); }
.modal-close {
  /* sticky + float, no absolute: .modal-card es el contenedor de scroll,
     así que con absolute la ✕ se iba con el contenido. Medido en el modal
     de producto (1103px de contenido en 633 visibles), al bajar 470px
     quedaba en top:-425. El margin-bottom negativo evita que empuje. */
  position: sticky; top: 1rem; float: right; z-index: 3;
  margin: 1rem 1rem -54px 0;
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast) ease;
}
.modal-close:hover { background: rgba(255,255,255,0.18); }

/* ---- Modal de producto ---- */
.product-modal { max-width: 920px; }
.pm-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 800px) { .pm-grid { grid-template-columns: 1fr 1fr; } }
.pm-visual { position: relative; min-height: 280px; display: flex; align-items: center; justify-content: center; padding: 2.5rem; }
.pm-badge { position: absolute; top: 1.25rem; left: 1.25rem; padding: 0.3rem 0.8rem; border-radius: 100px; font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.pm-icon { width: 180px; height: 180px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.pm-img { max-width: 100%; max-height: 240px; object-fit: contain; object-position: center; display: block; }
.pm-info { padding: 2.5rem; }
.pm-cat { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.5rem; }
.pm-name { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.6rem; color: #fff; line-height: 1.15; margin-bottom: 0.5rem; }
.pm-rating { display: flex; gap: 0.4rem; align-items: center; font-size: 0.8rem; color: rgba(255,255,255,0.45); font-family: 'Montserrat', sans-serif; margin-bottom: 1rem; }
.pm-desc { font-size: 0.9rem; line-height: 1.7; color: rgba(255,255,255,0.6); margin-bottom: 1.25rem; }
.pm-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.pm-tag { padding: 0.4rem 0.85rem; border-radius: 100px; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 600; }
.pm-block { margin-bottom: 1rem; }
.pm-block-t { font-family: 'Montserrat', sans-serif; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); display: block; margin-bottom: 0.3rem; }
.pm-block p { font-size: 0.82rem; color: rgba(255,255,255,0.55); line-height: 1.6; }
.pm-buy { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.08); }
.pm-price { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.6rem; color: #fff; margin-bottom: 1rem; }
.pm-weight { font-size: 0.8rem; font-weight: 500; color: rgba(255,255,255,0.4); }
.pm-actions { display: flex; gap: 0.75rem; align-items: stretch; flex-wrap: wrap; }
.pm-add { flex: 1; min-width: 180px; border: none; cursor: pointer; }
.pm-full-link { display: inline-block; margin-top: 1rem; font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.5); }
.pm-full-link:hover { color: #fff; }

/* ---- Modal de rutina (2 columnas, estilo modal de producto) ---- */
.rutina-modal { max-width: 940px; }
.rm-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 800px) { .rm-grid { grid-template-columns: 1fr 1fr; } }

.rm-visual { position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; padding: 2.5rem; overflow: hidden; }
.rm-visual .rm-glow { top: -30%; right: -20%; width: 300px; height: 300px; }
.rm-visual-badge { position: absolute; top: 1.25rem; left: 1.25rem; z-index: 2; padding: 0.3rem 0.8rem; border-radius: 100px; font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.rm-visual-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; transition: opacity 0.25s ease; }
.rm-prod-icon { width: 190px; height: 190px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.rm-prod-img { max-width: 70%; max-height: 230px; object-fit: contain; }
.rm-dots { position: absolute; bottom: 1.1rem; left: 0; right: 0; display: flex; gap: 0.45rem; justify-content: center; z-index: 2; }
.rm-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); cursor: pointer; transition: all var(--t-fast) ease; }
.rm-dot.on { background: var(--rm-acc, #fff); width: 22px; border-radius: 5px; }

.rm-info { padding: 2.25rem; display: flex; flex-direction: column; }
.rm-cat { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.5rem; }
.rm-name { font-family: 'Bebas Neue', sans-serif; font-size: 2.4rem; letter-spacing: 0.04em; line-height: 1; color: #fff; }
.rm-objective { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.9rem; color: rgba(255,255,255,0.7); margin: 0.4rem 0 0.75rem; }
.rm-selector-label { font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 0.6rem; }
.rm-selector { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.rm-chip { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.7rem; border-radius: 100px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all var(--t-fast) ease; }
.rm-chip:hover { background: rgba(255,255,255,0.1); color: #fff; }
.rm-chip-n { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 800; background: rgba(255,255,255,0.1); }
.rm-chip.active { color: var(--rm-acc); border-color: var(--rm-acc); background: color-mix(in srgb, var(--rm-acc) 14%, transparent); }
.rm-chip.active .rm-chip-n { background: var(--rm-acc); color: #000; }
.rm-active { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-left: 3px solid var(--rm-acc, #0EA5E9); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.25rem; transition: opacity 0.25s ease; min-height: 92px; }
.rm-active-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.95rem; color: #fff; }
.rm-active-fn { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin: 0.15rem 0 0.6rem; }
.rm-active-price { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.95rem; color: #fff; margin-top: 0.6rem; }
.rm-active-price span { font-weight: 500; font-size: 0.7rem; color: rgba(255,255,255,0.4); }
.rm-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rm-buy { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rm-buy .rm-pricing { margin-bottom: 0; }
.rm-buy .rm-add { width: auto; flex: 1; min-width: 200px; }
@media (max-width: 560px) { .rm-info, .rm-visual { padding: 1.5rem; } .rm-visual { min-height: 240px; } .rm-prod-icon { width: 150px; height: 150px; } }
.rm-glow { position: absolute; top: -40%; right: -10%; width: 280px; height: 280px; pointer-events: none; }
.rm-desc { font-size: 0.85rem; color: rgba(255,255,255,0.55); line-height: 1.6; margin-bottom: 1.25rem; }
.rm-pricing { margin-bottom: 1.25rem; }
.rm-final { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.6rem; color: #fff; }
.rm-orig { font-family: 'Montserrat', sans-serif; font-size: 0.75rem; margin-top: 0.15rem; }
.rm-add { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 0.95rem; border: none; border-radius: 12px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: filter var(--t-fast) ease, transform var(--t-fast) ease; }
.rm-add:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* ---- Checkout ---- */
.checkout-modal { max-width: 1040px; }
.co-head { padding: 2rem 2.25rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.co-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--endurance); margin-bottom: 0.4rem; }
.co-title { font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; letter-spacing: 0.04em; color: #fff; }
.co-step { font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.35); padding: 0.3rem 0.7rem; border-radius: 100px; background: rgba(255,255,255,0.05); }
.co-step.active { color: #000; background: var(--endurance); }
.co-step.done { color: var(--strength); background: rgba(57,255,20,0.1); }
.co-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem 2.25rem 2.25rem; }
@media (min-width: 820px) { .co-grid { grid-template-columns: 1.4fr 1fr; } }
.co-section-t { font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 0.9rem; }
.co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.co-fields label { display: flex; flex-direction: column; font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.4); gap: 0.3rem; }
.co-fields label.co-full { grid-column: 1 / -1; }
/* 1rem = 16px es OBLIGATORIO: Safari iOS hace zoom automático en
   cualquier input por debajo de 16px y no vuelve al nivel original.
   Con 0.875rem (14px) los 11 campos del checkout disparaban ese zoom.
   El padding sube para llegar a los 44px de alto táctil. */
.co-fields input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 9px; padding: 0.8rem 0.9rem; color: #fff; font-size: 1rem; font-family: 'Inter', sans-serif; text-transform: none; letter-spacing: 0; transition: border-color var(--t-fast) ease; }
.co-fields input:focus { border-color: var(--endurance); outline: none; }
.co-summary { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 1.5rem; align-self: start; }
.co-items { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.co-item { display: flex; gap: 0.6rem; align-items: center; font-size: 0.82rem; }
.co-item-q { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--endurance); }
.co-item-name { flex: 1; color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-item-price { font-family: 'Montserrat', sans-serif; font-weight: 600; color: rgba(255,255,255,0.6); }
.co-sum-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-bottom: 0.5rem; font-family: 'Montserrat', sans-serif; }
.co-sum-row.total { font-weight: 900; font-size: 1.25rem; color: #fff; padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 0.4rem; }
.co-pay { width: 100%; margin-top: 1.25rem; padding: 1rem; border: none; border-radius: 12px; background: linear-gradient(135deg, #0369A1, #04558F); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: box-shadow var(--t-base) ease, transform var(--t-base) ease; }
.co-pay:hover { box-shadow: 0 0 30px var(--endurance-glow-strong); transform: translateY(-1px); }
.co-secure { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.9rem; font-size: 0.72rem; color: rgba(255,255,255,0.35); }

/* ---- Carrito: barra de envío + resumen + item ---- */
.ship-bar { margin-bottom: 1.25rem; }
.ship-bar-label { display: flex; align-items: center; gap: 0.5rem; font-family: 'Montserrat', sans-serif; font-size: 0.75rem; color: rgba(255,255,255,0.6); margin-bottom: 0.5rem; }
.ship-bar-track { height: 6px; border-radius: 100px; background: rgba(255,255,255,0.08); overflow: hidden; }
.ship-bar-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--endurance), #0070CC); transition: width var(--t-slow) ease; }
.ship-bar-fill.full { background: linear-gradient(90deg, var(--strength), #2EE00E); }
.cart-summary { display: flex; flex-direction: column; margin-bottom: 1rem; }
.cart-sum-row { display: flex; justify-content: space-between; font-family: 'Montserrat', sans-serif; font-size: 0.85rem; color: rgba(255,255,255,0.55); margin-bottom: 0.45rem; }
.cart-sum-row.total { font-weight: 900; font-size: 1.3rem; color: #fff; padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 0.3rem; }
.cart-item-cat { font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.2rem; }
.qty-control-mini { display: flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 2px; }
.qty-control-mini .qty-btn { width: 24px; height: 24px; background: transparent; border: none; }
.cart-item-controls { justify-content: space-between; }
.btn-checkout { border-radius: 12px; }

/* ---- Embajadores halo hover ---- */

/* ---- FAQ + descuento ---- */
.faq-section { background: linear-gradient(180deg, #F8F7F5 0%, #FFFFFF 100%); }
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: start; } }
.faq-item { border-bottom: 1px solid var(--w-border); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 1.25rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; color: #1A1A1A; }
.faq-q svg { flex-shrink: 0; transition: transform var(--t-base) ease; color: rgba(26,26,26,0.5); }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t-slow) ease; }
.faq-item.open .faq-a { max-height: 240px; }
.faq-a p { padding: 0 0 1.25rem; font-size: 0.9rem; line-height: 1.7; color: rgba(26,26,26,0.6); }
.discount-card { background: linear-gradient(160deg, #0E0E10 0%, #14110A 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 2.75rem 2.25rem; position: relative; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.15); }
.discount-card::before { content: ''; position: absolute; top: -30%; right: -20%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(57,255,20,0.14), transparent 70%); pointer-events: none; }
.discount-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--strength); margin-bottom: 0.75rem; position: relative; }
.discount-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; letter-spacing: 0.02em; color: #fff; margin-bottom: 0.9rem; position: relative; }
.discount-desc { font-size: 0.9rem; color: rgba(255,255,255,0.55); line-height: 1.6; margin-bottom: 1.5rem; position: relative; }
/* aviso bajo el formulario del 10% (p. ej. "ya tienes cuenta") */
.discount-note {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.72);
  min-height: 1em;
}
.discount-form { display: flex; gap: 0.6rem; flex-wrap: wrap; position: relative; }
/* 1rem por lo mismo que el checkout: 0.9rem = 14.4px disparaba el zoom de iOS */
.discount-form input { flex: 1; min-width: 180px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 0.85rem 1.1rem; color: #fff; font-size: 1rem; }
.discount-form input::placeholder { color: rgba(255,255,255,0.35); }
.discount-form button { padding: 0.85rem 1.5rem; min-height: 44px; border: none; border-radius: 10px; background: var(--strength); color: #000; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: filter var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.discount-form button:hover { filter: brightness(1.05); box-shadow: 0 0 24px var(--strength-glow-strong); }

/* ---- Identidad: un poco más compacta ---- */
.filo-section { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.filo-card { padding: clamp(1.75rem, 4vw, 3rem) !important; }

@media (max-width: 560px) {
  .pm-info, .co-grid, .co-head { padding-left: 1.25rem; padding-right: 1.25rem; }
  .co-fields { grid-template-columns: 1fr; }
}

/* ---- Logo de marca (imagen con fallback texto) ---- */
/* Logo PLATEADO/cromo (PNG transparente, recortado): se ve tal cual sobre
   fondos oscuros; en el nav claro (Wellness) se oscurece para contrastar. */
.brand-logo-img { display: block; width: auto; object-fit: contain; filter: none; }
/* El tope responsive vive AQUÍ y no en la media query del header:
   esta regla va más abajo en la hoja y, a igual especificidad, ganaba
   ella. Con 200px fijos el logo medía 166px a 320px de ancho y se
   encimaba con la lupa, empujando la hamburguesa fuera de pantalla. */
/* 34vw era el valor que tenía esta regla mientras estuvo muerta (comentario
   roto más arriba en la hoja), así que nunca se probó de verdad: al revivir
   daba 122px de logo a 360px de ancho, y con los 4 controles (194px) el
   logo se montaba 22px encima de la lupa. 26vw deja el hueco justo.
   Por encima de 600px manda la regla de abajo (200px), así que esto solo
   afecta al móvil. */
.brand-logo-header { max-height: 30px; max-width: min(200px, 26vw); }
@media (min-width: 601px) { .brand-logo-header { max-width: 200px; } }
/* ── Header de escritorio: sin rampa de saltos ──
   Antes había dos juegos de valores (compacto 1140–1459, holgado ≥1460)
   y el segundo NO cabía: contenido ~1206px + 128 de gaps/padding contra
   una barra de 1280 → el carrito salía del cristal en todo ≥1460. Ahora
   gap/padding/tipo/controles escalan con clamp() de forma continua en las
   reglas base del NAVBAR, y el logo se queda fijo en sus 166px (30px de
   alto) porque ya hay holgura para él. Aquí solo queda el tope de ancho
   móvil del logo. */
/* nav claro (Wellness): el plateado se oscurece para leerse sobre blanco */
.nav-inner.light .brand-logo-header { filter: brightness(0) opacity(0.85); }
.brand-logo-footer { max-height: 28px; max-width: 190px; }
/* Footer claro de wellness: el logo plateado se oscurece para leerse
   sobre el fondo claro (igual que el logo del header en wellness). */
body[data-page="wellness"] .brand-logo-footer { filter: brightness(0) opacity(0.85); }
.brand-logo-hero { max-height: clamp(72px, 15vw, 132px); max-width: min(90vw, 600px); margin: 0 auto; }

/* ---- Checkout: stepper de líneas (sin óvalos) ---- */
.co-stepper { display: flex; gap: 0.6rem; margin-top: 1rem; }
.co-stepper .co-step {
  flex: 1; background: transparent; padding: 0; border-radius: 0;
  display: flex; flex-direction: column; align-items: stretch;
}
.co-step-bar { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.12); transition: background var(--t-base) ease; }
.co-stepper .co-step.done .co-step-bar { background: var(--endurance); }
.co-stepper .co-step.active .co-step-bar { background: linear-gradient(90deg, var(--endurance), #0070CC); box-shadow: 0 0 12px rgba(14,165,233,0.5); }
.co-step-label { font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-top: 0.45rem; }  /* era 9.6px y 3.18:1 */
.co-stepper .co-step.done .co-step-label, .co-stepper .co-step.active .co-step-label { color: rgba(255,255,255,0.85); }

/* ---- Halo más intenso en card Wellness del home ("Elige tu línea") ---- */

/* ---- Bundle en carrito y checkout ---- */
.cart-bundle { background: rgba(255,255,255,0.04); }
.cart-bundle-includes { font-size: 0.68rem; color: rgba(255,255,255,0.4); line-height: 1.4; margin-bottom: 0.25rem; }
.cart-bundle-save { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 700; color: var(--strength); margin-bottom: 0.6rem; }
.co-item-bundle .co-item-name { display: flex; flex-direction: column; }
.co-item-inc { font-size: 0.66rem; color: rgba(255,255,255,0.4); font-weight: 400; margin-top: 0.15rem; line-height: 1.3; white-space: normal; }
.co-item-bundle .co-item-q { align-self: flex-start; }

/* ============================================================
   PULIDO MÓVIL — teléfonos (≤760px y ≤400px)
   Objetivo: heroes de alto natural (nada se recorta ni se
   encima), sin desbordes horizontales, áreas táctiles ≥44px.
   Solo reglas max-width → NO afecta escritorio.
   ============================================================ */
@media (max-width: 760px) {

  /* ── HOME hero: crece con el contenido, nunca recorta bajo el nav ── */
  .hero {
    height: auto;
    min-height: 100svh;
    padding-top: 6rem;
    padding-bottom: 3rem;
    align-items: center;
  }
  .hero-eyebrow  { margin-bottom: 0.9rem; }
  .hero-logo     { margin-bottom: 1rem; }
  .hero-brand-line { margin-bottom: 1.4rem; }
  .hero-brand-line:empty { margin-bottom: 1rem; }
  .hero-ctas     { margin-bottom: 2.25rem; gap: 0.75rem; }
  .hero-scroll   { display: none; }           /* el indicador se encimaba con los badges */
  .hero-badge-row { gap: 1rem 1.5rem; }

  /* ── WELLNESS / PERFORMANCE hero: menos padding-top (respiran) ──
     !important vence al style inline padding-top:9.5rem de wellness. */
  .wellness-hero    { padding-top: 5.5rem !important; padding-bottom: 3.25rem !important; }
  .performance-hero { padding-top: 5.5rem; padding-bottom: 3.25rem; }

  /* Stats neón (Performance): 3.5rem se desbordaban en 3 columnas.
     Reducimos el número y quitamos los divisores para que "100%" quepa. */
  .performance-hero .neon-stat { font-size: 2rem; }
  .performance-hero .neon-divider-endurance,
  .performance-hero .neon-divider-strength { display: none; }

  /* Botones: permitir que el texto largo envuelva (evita botones de
     436px que se salían de la pantalla y creaban scroll horizontal). */
  .btn { white-space: normal; text-align: center; }
  .btn-lg { padding: 1rem 1.4rem; font-size: 0.75rem; }

  /* ── Áreas táctiles mínimas (accesibilidad) ── */
  .nav-hamburger { padding: 9px; }
  .btn { min-height: 44px; }
  .cart-close, .btn-cart { min-height: 44px; min-width: 44px; }

  /* La clase real de los −/+ del carrito es .qty-control-mini .qty-btn:
     el selector de abajo NUNCA coincidía con ella y se quedaban en
     24×24px, el 45% del mínimo. En producto.html sí eran 44 porque
     están definidos inline en esa página. */
  .qty-control button,
  .qty-control-mini .qty-btn { min-width: 44px; min-height: 44px; }

  /* .subline-tab (performance) no estaba cubierto y medía 34px de alto.
     .filter-tab estaba en 40, todavía por debajo del mínimo. */
  .filter-tab, .subline-tab { min-height: 44px; display: inline-flex; align-items: center; }

  /* Es la acción de conversión y se repite 41 veces en wellness */
  .btn-add-to-cart { width: 44px; height: 44px; }

  /* Única forma de quitar un producto del carrito: medía 18×21px */
  .cart-item-remove { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  .social-btn { width: 44px; height: 44px; }
  .footer-links a { display: inline-block; padding: 0.4rem 0; }

  /* ── Suelo tipográfico de 12px ──
     26 selectores caían por debajo (los peores en 9.6px) y casi todos
     van en mayúsculas con letter-spacing 0.15em, que en pantalla chica
     agrava la lectura en vez de aliviarla. */
  .section-label, .discount-eyebrow, .co-fields label, .co-step-label,
  .choose-pill, .choose-badge, .rt-badge, .rt-cat,
  .product-badge, .product-line-tag, .pm-cat, .pm-badge,
  .product-weight, .rating-num, .price-original,
  .mm-eyebrow, .mm-desc, .rt-li-sub, .filo-pillar, .filo-tag,
  .footer-col-title, .cart-count { font-size: 0.75rem; }

  /* El glow decorativo de las tarjetas (border-glow .edge-light) se
     extiende 30px más allá del borde; en móvil no hay hover, así que
     lo recortamos para que no genere scroll lateral. */
  /* .cat-grid queda fuera: en móvil es un carrusel con scroll lateral propio. */
  .products-grid { overflow-x: clip; }

  /* Evita cualquier desborde horizontal residual sin romper el
     scroll-snap vertical (clip no crea contenedor de scroll). */
  html { overflow-x: clip; }
  body { overflow-x: hidden; max-width: 100%; }
}

/* ── Teléfonos angostos (≤400px) ── */
@media (max-width: 400px) {
  .hero-logo { font-size: clamp(3.4rem, 16vw, 4.6rem); }
  .performance-hero-title { font-size: clamp(3.2rem, 14vw, 5rem); }
  /* CTAs del home a ancho completo (más fáciles de tocar) */
  .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
  .hero-ctas .btn { width: 100%; }
  /* Filtros y chips no se apelmazan */
  .filter-scroll { gap: 0.5rem; }
}

/* ── HOME: rutinas como RECTÁNGULOS horizontales ──────────────
   Foto a la izquierda, info a la derecha, una card por fila (antes eran
   3 columnas verticales foto-arriba). Scoped a data-page="home": las
   demás páginas (rutinas.html, wellness, performance) conservan la card
   vertical. Vive al FINAL de la hoja para ganar la cascada a
   .rutina-card3 { flex-direction: column } y .rt-visual { height:390px }. */
@media (min-width: 860px) {
  body[data-page="home"] .rutinas-grid-home {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1120px;
    margin-inline: auto;
  }
  body[data-page="home"] .rutinas-grid-home .rutina-card3 {
    display: grid;
    /* La foto define su PROPIO ancho (auto): el panel toma la proporción de
       la imagen, así queda "solo la foto" sin márgenes de gradiente. La info
       ocupa el resto (1fr) y se centra en vertical. */
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  body[data-page="home"] .rutinas-grid-home .rt-visual {
    /* El panel ES la foto: misma proporción que fem-balance.png (1024×1536).
       Con esto, la imagen llena el panel borde a borde sin recorte ni márgenes. */
    width: clamp(260px, 28vw, 360px);
    aspect-ratio: 1024 / 1536;
    height: auto;
    min-height: 0;
    border-radius: 18px;
    overflow: hidden;
  }
  body[data-page="home"] .rutinas-grid-home .rt-slide { padding: 0; }
  body[data-page="home"] .rutinas-grid-home .rt-img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;   /* panel = proporción de la imagen → cover no recorta */
    object-position: center;
  }
  body[data-page="home"] .rutinas-grid-home .rt-body { padding: 1.75rem 2rem; align-self: center; }
  body[data-page="home"] .rutinas-grid-home .rt-body { padding: 1.75rem 2rem; }
}

/* ── Auth modal ─────────────────────────────────────────── */
#auth-overlay { z-index: 60; } /* por encima del cart-sidebar (50) */
.auth-modal { max-width: 400px; padding: 34px 30px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; color: var(--p-muted, #999); }
.auth-form input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 11px 13px; color: #fff; font-size: 0.95rem; }
.auth-form input:focus { outline: none; border-color: var(--strength, #39FF14); }
.auth-perk { margin-top: 8px; font-size: 0.82rem; color: var(--strength, #39FF14); }
/* en gracias.html el fondo es claro: el verde neón daba 1.27:1 (invisible) */
body[data-page="gracias"] .auth-perk { color: #0A6B0A; font-weight: 600; }
.auth-sub { margin-top: 6px; font-size: 0.85rem; opacity: 0.7; }
.auth-error { color: #E05A5A; font-size: 0.8rem; }
.auth-link { background: none; border: none; color: var(--strength, #39FF14); cursor: pointer; font-size: 0.8rem; padding: 0; margin-top: 12px; }
.auth-alt { margin-top: 14px; font-size: 0.8rem; opacity: 0.85; }
.auth-code { letter-spacing: 0.5em; text-align: center; font-size: 1.3rem !important; }
[data-open-auth].logged svg { stroke: var(--strength, #39FF14); }

/* ── Mi Cuenta · modo ARCADE ────────────────────────────── */
.account-page { max-width: 920px; margin: 0 auto; padding: 140px 24px 90px; }
.arc-crt {
  position: relative; overflow: hidden;
  font-family: 'Press Start 2P', monospace;
  background: #050805; border: 2px solid #123312; border-radius: 14px;
  padding: 40px 34px;
}
/* scanlines + viñeta CRT */
.arc-crt::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 2px, transparent 2px 4px);
}
.arc-crt::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(110% 100% at 50% 50%, transparent 60%, rgba(0,0,0,0.55) 100%);
}
.arc-crt > * { position: relative; z-index: 3; }
.arc-row1 { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 10px; color: var(--strength, #39FF14); margin-bottom: 28px; }
.arc-hi { color: #F5D90A; }
.arc-player { font-size: 20px; font-weight: 400; color: #fff; text-shadow: 3px 3px 0 #0A4D0A; margin-bottom: 8px; text-transform: uppercase; overflow-wrap: anywhere; }
.arc-sub { font-size: 8px; color: #8A8F8A; line-height: 1.9; margin-bottom: 26px; }
.arc-xpbar { border: 3px solid #1E5C1E; padding: 4px; background: #041004; margin-bottom: 8px; }
.arc-xpfill {
  height: 22px; background: linear-gradient(180deg, #7CFF6B 0%, #39FF14 45%, #1DB954 100%);
  box-shadow: 0 0 14px rgba(57,255,20,0.8); position: relative; transition: width 0.8s steps(10);
}
.arc-xpfill::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(0,0,0,0.18) 10px 12px); }
.arc-xplabel { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 8px; color: #8A8F8A; margin-bottom: 30px; }
.arc-blink { animation: arcblink 1.1s steps(1) infinite; color: var(--strength, #39FF14); }
@keyframes arcblink { 50% { opacity: 0; } }
.arc-bonus { border: 2px dashed #F5D90A; color: #F5D90A; font-size: 9px; line-height: 2.1; padding: 14px 16px; margin-bottom: 30px; text-align: center; text-transform: uppercase; }
.arc-score-t { font-size: 11px; color: var(--strength, #39FF14); margin-bottom: 14px; font-weight: 400; }
.arc-table caption { text-align: left; padding-bottom: 8px; }
.arc-table { width: 100%; border-collapse: collapse; font-size: 8px; }
.arc-table td, .arc-table th { text-align: left; padding: 10px 6px; border-bottom: 1px dotted #1E5C1E; color: #EDEDED; }
.arc-table th { color: #8A8F8A; font-weight: 400; }
.arc-table td.ok { color: var(--strength, #39FF14); }
.arc-table td.pend { color: #F5D90A; }
.arc-table td.cancel { color: #E05A5A; }
.arc-empty { font-size: 9px; color: #8A8F8A; line-height: 2.1; text-align: center; padding: 18px 0; }
/* ── Formulario "MIS DATOS" (arcade) ─────────────────────── */
.arc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 6px; }
.arc-form label { display: flex; flex-direction: column; gap: 7px; font-size: 8px; color: #8A8F8A; letter-spacing: 0.08em; }
.arc-form input {
  background: rgba(255,255,255,0.05); border: 2px solid #1E5C1E; border-radius: 0;
  padding: 11px 12px; color: #fff; font-family: 'Inter', sans-serif; font-size: 1rem;
}
.arc-form input:focus { outline: none; border-color: var(--strength, #39FF14); box-shadow: 0 0 10px rgba(57,255,20,0.25); }
.arc-form-full { grid-column: 1 / -1; }
.arc-form-hint { font-size: 8px; color: #9AA39A; letter-spacing: 0.08em; }
.arc-form .arc-btn { margin-top: 4px; animation: none; }
.arc-form .arc-btn.saved { border-color: #F5D90A; color: #F5D90A; }
@media (max-width: 540px) { .arc-form { grid-template-columns: 1fr; } }

.arc-coin { display: block; margin-top: 26px; text-align: center; font-size: 9px; color: var(--strength, #39FF14); text-decoration: none; padding: 8px 0; }
.arc-exit { display: block; margin: 14px auto 0; background: none; border: none; font-family: inherit; font-size: 8px; color: #8A8F8A; cursor: pointer; letter-spacing: 0.1em; padding: 10px 16px; min-height: 32px; }
.arc-exit:hover, .arc-exit:focus-visible { color: #E05A5A; }
.arc-guest { text-align: center; padding: 60px 30px; }
.arc-guest .arc-player { margin-bottom: 18px; }
.arc-btn {
  display: inline-block; margin-top: 24px; background: none; cursor: pointer;
  border: 3px solid var(--strength, #39FF14); color: var(--strength, #39FF14);
  font-family: inherit; font-size: 10px; padding: 16px 22px;
}
.arc-btn:hover, .arc-btn:focus-visible { background: rgba(57,255,20,0.1); animation: none; }
@media (max-width: 540px) {
  .arc-crt { padding: 26px 16px; }
  .arc-player { font-size: 15px; }
  .arc-table th:first-child, .arc-table td:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { .arc-blink { animation: none; } }

/* ── EL NIVEL: mundo 2D pixelado (grande y jugable) ──────── */
.arc-world {
  position: relative; height: 320px; margin: 6px 0 30px; overflow: hidden;
  border: 3px solid #1E5C1E; background: linear-gradient(180deg, #020604 0%, #041207 62%, #06180A 100%);
  image-rendering: pixelated; cursor: pointer; user-select: none; touch-action: manipulation;
}
/* estrellas (box-shadow dots) */
.arc-stars { position: absolute; top: 14px; left: 18px; width: 3px; height: 3px; background: #CFEFC6; opacity: 0.8;
  box-shadow: 60px 8px #CFEFC6, 130px 22px #7C9E76, 210px 4px #CFEFC6, 290px 18px #7C9E76,
              370px 10px #CFEFC6, 450px 26px #7C9E76, 520px 6px #CFEFC6, 600px 16px #7C9E76, 660px 30px #CFEFC6; }
/* nubes pixeladas */
.arc-cloud { position: absolute; width: 46px; height: 12px; background: #10301A; }
.arc-cloud::before { content: ''; position: absolute; left: 10px; top: -8px; width: 24px; height: 8px; background: #10301A; }
.arc-cloud.c1 { top: 34px; left: 12%; animation: arcdrift 26s linear infinite; }
.arc-cloud.c2 { top: 58px; left: 62%; animation: arcdrift 34s linear infinite reverse; }
@keyframes arcdrift { 50% { transform: translateX(30px); } }
/* colinas del fondo */
.arc-hills { position: absolute; bottom: 48px; left: 0; right: 0; height: 64px;
  background:
    linear-gradient(45deg, transparent 49%, #0A2410 50%) 0 100% / 90px 46px no-repeat,
    linear-gradient(-45deg, transparent 49%, #0A2410 50%) 45px 100% / 90px 46px no-repeat,
    linear-gradient(45deg, transparent 49%, #081C0C 50%) 55% 100% / 120px 40px no-repeat,
    linear-gradient(-45deg, transparent 49%, #081C0C 50%) calc(55% + 60px) 100% / 120px 40px no-repeat; }
/* suelo: pasto neón + tierra en tiles */
.arc-ground { position: absolute; bottom: 0; left: 0; right: 0; height: 48px;
  background:
    repeating-linear-gradient(90deg, #39FF14 0 20px, #2ACC0F 20px 23px) top / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, #123312 0 20px, #0D260D 20px 23px);
  box-shadow: 0 -4px 14px rgba(57,255,20,0.25); }
/* letrero de salida */
.arc-sign { position: absolute; bottom: 48px; left: 3%; width: 46px; text-align: center; }
.arc-sign span { display: block; background: #123312; color: #C9CFC9; font-size: 9px; padding: 5px 3px; border: 1px solid #1E5C1E; }
.arc-sign::after { content: ''; display: block; width: 6px; height: 14px; background: #1E5C1E; margin: 0 auto; }
/* monedas */
.arc-coin-px { position: absolute; bottom: 104px; width: 16px; height: 16px; background: #F5D90A;
  border: 3px solid #B89A00; box-sizing: border-box; animation: arccoin 1.6s steps(2) infinite; }
.arc-coin-px::after { content: ''; position: absolute; inset: 3px 4px; background: #FFF3A0; width: 3px; }
@keyframes arccoin { 50% { transform: scaleX(0.4); } }
.arc-coin-px.got { animation: none; opacity: 0; transition: opacity 0.3s; }
/* bandera de meta + cofre */
.arc-flagpole { position: absolute; bottom: 48px; right: 5%; width: 54px; height: 170px; }
.arc-pole { position: absolute; right: 22px; bottom: 0; width: 6px; height: 170px; background: #CFEFC6; }
.arc-pennant { position: absolute; right: 28px; top: 2px; width: 0; height: 0;
  border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 36px solid #39FF14;
  filter: drop-shadow(0 0 6px rgba(57,255,20,0.7)); animation: arcflag 1.2s steps(2) infinite; }
@keyframes arcflag { 50% { transform: scaleY(0.85); } }
.arc-flag-label { position: absolute; right: -8px; top: 62px; font-size: 9px; color: #F5D90A; white-space: nowrap; }
.arc-chest { position: absolute; right: 34px; bottom: 0; width: 30px; height: 22px; background: #B8860B;
  border: 3px solid #7A5A00; box-sizing: border-box; }
.arc-chest::after { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 4px; background: #7A5A00; }
.arc-chest span { position: absolute; top: -22px; left: 7px; color: #F5D90A; font-size: 13px; animation: arcblink 0.9s steps(1) infinite; }
/* el héroe */
.arc-hero { position: absolute; bottom: 46px; left: 4%; width: 56px; height: 80px; will-change: left, transform; transform-origin: 50% 100%; }
.arc-hero svg { width: 100%; height: 100%; display: none; }
/* sprite según el mundo: yoga / gym rat / runner */
.arc-world.w-garden .hero-yoga { display: block; }
.arc-world.w-gym .hero-gym { display: block; }
.arc-world.w-track .hero-run { display: block; }
/* respaldo si aún no hay tema asignado */
.arc-world:not(.w-garden):not(.w-gym):not(.w-track) .hero-yoga { display: block; }
.arc-hero .fB { visibility: hidden; }
.arc-hero.step .fA { visibility: hidden; }
.arc-hero.step .fB { visibility: visible; }
/* polvo al caminar */
.arc-hero.walking::after, .arc-hero.running::after { content: ''; position: absolute; left: -9px; bottom: 3px; width: 7px; height: 7px;
  background: #7C9E76; opacity: 0.7; animation: arcdust 0.3s steps(2) infinite; }
@keyframes arcdust { 50% { transform: translate(-5px, -4px); opacity: 0.2; } }
/* festejo al llegar con regalo: saltito */
.arc-hero.victory { animation: archop 0.6s steps(3) infinite; }
@keyframes archop { 33% { transform: translateY(-14px); } 66% { transform: translateY(-6px); } }

/* ── MODO JUEGO (runner estilo dino) ─────────────────────── */
/* placa oscura fija: el amarillo sobre el jardín claro era ilegible (1.07:1) */
.arc-play-hint { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 92%; text-align: center;
  font-size: 9px; color: #F5D90A; z-index: 5; pointer-events: none;
  background: rgba(0,0,0,0.72); padding: 8px 12px; text-shadow: none; }
.arc-world.playing .arc-play-hint { display: none; }
.arc-game-score { position: absolute; top: 12px; right: 14px; font-size: 11px; color: #F5D90A;
  z-index: 5; display: none; background: rgba(0,0,0,0.72); padding: 5px 8px; text-shadow: none; }
.arc-world.playing .arc-game-score { display: block; }
/* en juego se despeja el nivel: solo héroe, obstáculos y marcas */
.arc-world.playing .arc-coins, .arc-world.playing .arc-flagpole,
.arc-world.playing .arc-sign, .arc-world.playing .arc-deco { display: none; }
/* obstáculos por mundo */
.arc-obs { position: absolute; bottom: 48px; }
.w-garden .arc-obs { width: 34px; height: 30px; background: #8F8778;
  box-shadow: inset -5px -5px 0 #7E766A, inset 5px 5px 0 #A39B8A; }
.w-garden .arc-obs.tall { width: 28px; height: 50px; }
.w-gym .arc-obs { width: 30px; height: 44px; background: #2A2A33; border: 3px solid #3A3A44; box-sizing: border-box; }
.w-gym .arc-obs::after { content: ''; position: absolute; left: 0; right: 0; top: 45%; height: 7px; background: #5A5A66; }
.w-gym .arc-obs.tall { height: 58px; }
.w-track .arc-obs { width: 44px; height: 38px;
  background:
    linear-gradient(#F5F9FF, #F5F9FF) top / 100% 6px no-repeat,
    linear-gradient(#C9CFDB, #C9CFDB) 5px 0 / 5px 100% no-repeat,
    linear-gradient(#C9CFDB, #C9CFDB) calc(100% - 5px) 0 / 5px 100% no-repeat; }
.w-track .arc-obs.tall { height: 50px; }
/* obstáculos VOLADORES: se pasan agachándose (↓) o con salto muy preciso */
.arc-obs.fly { bottom: 60px !important; width: 34px; height: 24px; animation: arcfly 0.4s steps(2) infinite; }
@keyframes arcfly { 50% { transform: translateY(-5px); } }
.w-garden .arc-obs.fly { background: #F2A5BE; box-shadow: inset -5px 0 0 #E58BA8, inset 5px 0 0 #F8C4D2; border: 0; }
.w-gym .arc-obs.fly { background: #2A2A33; border: 3px solid #3A3A44; box-sizing: border-box; }
.w-gym .arc-obs.fly::after { content: ''; position: absolute; left: 8px; right: 8px; top: -8px; height: 6px;
  background: none; border: 3px solid #5A5A66; border-bottom: 0; }
.w-track .arc-obs.fly { background: #26314F; box-shadow: -8px -5px 0 0 #26314F, 8px -5px 0 0 #26314F; border: 0; }
/* marcas del piso que corren (sensación de velocidad) */
.arc-mark { position: absolute; bottom: 28px; width: 9px; height: 4px; background: rgba(255,255,255,0.28); }
.w-garden .arc-mark { background: rgba(138,107,74,0.45); }
/* monedas del juego: altas (saltando) o bajas (al paso) */
.arc-gcoin { position: absolute; bottom: 150px; width: 18px; height: 18px; background: #F5D90A;
  border: 3px solid #B89A00; box-sizing: border-box; z-index: 2; animation: arccoin 0.5s steps(2) infinite; }
.arc-gcoin::after { content: ''; position: absolute; inset: 3px 4px; background: #FFF3A0; width: 3px; }
.arc-gcoin.low { bottom: 66px; }
/* botón de sonido */
.arc-mute { position: absolute; top: 10px; left: 12px; z-index: 7; cursor: pointer;
  background: rgba(0,0,0,0.35); border: 2px solid #1E5C1E; color: #39FF14;
  font-family: inherit; font-size: 8px; padding: 6px 9px; line-height: 1; }
/* Foco visible en toda la cabina: el reset global quita el outline del
   navegador, así que aquí se restituye con contraste real (14.2:1). */
.arc-crt a:focus-visible,
.arc-crt button:focus-visible,
.arc-crt input:focus-visible,
.arc-world:focus-visible {
  outline: 3px solid #F5D90A;
  outline-offset: 3px;
}
/* dentro del mundo claro el amarillo se pierde */
.arc-world.w-garden button:focus-visible { outline-color: #1A1A1A; }
.arc-mute:hover, .arc-mute:focus-visible { border-color: #39FF14; }
.w-garden .arc-mute { background: rgba(255,255,255,0.4); border-color: #5C4630; color: #5C4630; }
.w-garden .arc-mute:hover, .w-garden .arc-mute:focus-visible { border-color: #5C4630; }
/* pantalla de GAME OVER */
.arc-gameover { position: absolute; inset: 0; z-index: 6; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(0,0,0,0.80); text-align: center; }
.arc-gameover.show { display: flex; }
.arc-gameover p { font-size: 15px; color: #fff; text-shadow: 2px 2px 0 #B00; }
.arc-gameover .go-score { font-size: 10px; color: #F5D90A; line-height: 2; text-shadow: 1px 1px 0 rgba(0,0,0,0.6); }
.arc-gameover .go-top { font-size: 8px; color: #C9EFC0; line-height: 2.1; text-shadow: 1px 1px 0 rgba(0,0,0,0.6); min-height: 10px; }
.arc-play-hint .hint-keys { font-size: 8px; color: #C9CFC9; display: inline-block; margin-top: 6px; }
.arc-gameover .go-retry { font-size: 9px; color: #39FF14; }
.arc-gameover .go-exit { background: none; border: 2px solid #8A8F8A; color: #C9C9C9;
  font-family: inherit; font-size: 8px; padding: 9px 14px; cursor: pointer; }
.arc-gameover .go-exit:hover, .arc-gameover .go-exit:focus-visible { border-color: #E05A5A; color: #E05A5A; }

/* ── Ajustes del juego en móvil ──────────────────────────── */
@media (max-width: 540px) {
  /* voladores más arriba: agachado (33px de alto) pasa por debajo */
  .arc-obs.fly { bottom: 74px !important; width: 28px; height: 20px; }
  /* monedas del juego a alturas alcanzables con el salto móvil */
  .arc-gcoin { bottom: 112px; width: 14px; height: 14px; }
  .arc-gcoin.low { bottom: 52px; }
  /* obstáculos de piso proporcionales al héroe chico */
  .w-garden .arc-obs:not(.fly) { width: 28px; height: 26px; }
  .w-garden .arc-obs.tall { width: 24px; height: 40px; }
  .w-gym .arc-obs:not(.fly) { width: 26px; height: 36px; }
  .w-gym .arc-obs.tall { height: 46px; }
  .w-track .arc-obs:not(.fly) { width: 36px; height: 30px; }
  .w-track .arc-obs.tall { height: 40px; }
  /* mute con área táctil digna */
  .arc-mute { padding: 10px 12px; font-size: 8px; min-height: 36px; }
  /* game over compacto */
  .arc-gameover p { font-size: 12px; }
  .arc-gameover .go-score { font-size: 8px; }
}
/* decoración por mundo (posiciones base) */
.arc-deco { position: absolute; bottom: 48px; }
.arc-deco.d1 { left: 34%; }
.arc-deco.d2 { left: 63%; }

/* ── MUNDO 1 · JARDIN ZEN ── */
.arc-world.w-garden { background: linear-gradient(180deg, #F2EBD8 0%, #EADFC2 55%, #E0D2AE 100%); }
/* sol de amanecer */
.w-garden::before { content: ''; position: absolute; top: 16px; right: 16%; width: 32px; height: 32px;
  border-radius: 50%; background: #F2B8C6; box-shadow: 0 0 26px 6px rgba(242,184,198,0.7); }
/* pétalos de cerezo cayendo (en vez de estrellas) */
.w-garden .arc-stars { background: #F2A5BE; opacity: 0.9; width: 4px; height: 4px;
  box-shadow: 60px 8px #F2A5BE, 130px 22px #E58BA8, 210px 4px #F2A5BE, 290px 18px #E58BA8,
              370px 10px #F2A5BE, 450px 26px #E58BA8, 520px 6px #F2A5BE, 600px 16px #E58BA8, 660px 30px #F2A5BE;
  animation: zenpetal 6s steps(8) infinite; }
@keyframes zenpetal { 50% { transform: translate(-8px, 22px); opacity: 0.5; } }
/* neblina suave (en vez de nubes) */
.w-garden .arc-cloud { width: 74px; height: 7px; background: rgba(255,255,255,0.65); }
.w-garden .arc-cloud::before { left: 16px; top: -5px; width: 38px; height: 5px; background: rgba(255,255,255,0.65); }
/* monte pálido + bambú */
.w-garden .arc-hills {
  background:
    linear-gradient(45deg, transparent 49%, #D4C6A2 50%) 12% 100% / 180px 64px no-repeat,
    linear-gradient(-45deg, transparent 49%, #D4C6A2 50%) calc(12% + 90px) 100% / 180px 64px no-repeat,
    repeating-linear-gradient(90deg, #5F8A6A 0 7px, transparent 7px 36px) 78% 100% / 150px 58px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 16px, #4A7156 16px 19px) 78% 100% / 150px 58px no-repeat; }
/* arena rastrillada */
.w-garden .arc-ground {
  background:
    linear-gradient(#C9BC98, #C9BC98) top / 100% 4px no-repeat,
    repeating-linear-gradient(0deg, #EAE0C4 0 7px, #DCCFA9 7px 10px);
  box-shadow: 0 -4px 14px rgba(201,188,152,0.5); }
/* farol de piedra */
.w-garden .arc-deco.d1 { width: 28px; height: 38px; background: none; }
.w-garden .arc-deco.d1::before { content: ''; position: absolute; bottom: 0; left: 10px; width: 8px; height: 17px; background: #9A9284;
  box-shadow: -10px 17px 0 0 #9A9284, 0 17px 0 0 #B0A896, 10px 17px 0 0 #9A9284; }
.w-garden .arc-deco.d1::after { content: ''; position: absolute; top: 0; left: 3px; width: 22px; height: 8px; background: #7E766A;
  box-shadow: 3px 8px 0 0 #F5D90A, 3px 8px 14px 3px rgba(245,217,10,0.5); }
/* piedras zen apiladas */
.w-garden .arc-deco.d2 { width: 36px; height: 28px; background: none; }
.w-garden .arc-deco.d2::before { content: ''; position: absolute; bottom: 0; left: 0; width: 36px; height: 11px; background: #8F8778;
  box-shadow: 4px -10px 0 0 #A39B8A, 10px -18px 0 -2px #B5AD9C; }
/* letrero, bandera y textos en tonos del jardín */
.w-garden .arc-sign span { background: #6B4E33; border-color: #5C4630; color: #F2EBD8; }
.w-garden .arc-sign::after { background: #5C4630; }
.w-garden .arc-pennant { border-right-color: #F2A5BE; filter: drop-shadow(0 0 6px rgba(242,165,190,0.8)); }
.w-garden .arc-pole { background: #8A6B4A; }
.w-garden .arc-flag-label { color: #5C4630; }
.w-garden .arc-coin-px { border-color: #A38800; }

/* ── MUNDO 2 · GYM ── */
.arc-world.w-gym { background: linear-gradient(180deg, #08080C 0%, #0E0E14 65%, #12121A 100%); }
.w-gym .arc-stars { opacity: 0; }
/* lámparas colgantes en vez de nubes */
.w-gym .arc-cloud { width: 26px; height: 8px; background: #F5D90A; animation: none;
  box-shadow: 0 16px 30px 6px rgba(245,217,10,0.28); }
.w-gym .arc-cloud::before { left: 11px; top: -22px; width: 4px; height: 22px; background: #26262E; }
.w-gym .arc-cloud.c1 { top: 26px; } .w-gym .arc-cloud.c2 { top: 26px; }
/* rack de pesas al fondo */
.w-gym .arc-hills {
  background:
    linear-gradient(#1B1B24, #1B1B24) 8% calc(100% - 30px) / 64% 7px no-repeat,
    repeating-linear-gradient(90deg, #1B1B24 0 9px, transparent 9px 120px) 8% 100% / 64% 100% no-repeat,
    linear-gradient(#15151C, #15151C) 82% 100% / 84px 36px no-repeat; }
.w-gym .arc-ground {
  background:
    repeating-linear-gradient(90deg, #39FF14 0 20px, #2ACC0F 20px 23px) top / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, #1C1C24 0 20px, #16161C 20px 23px);
  box-shadow: 0 -4px 14px rgba(57,255,20,0.15); }
/* mancuerna en el piso */
.w-gym .arc-deco { width: 58px; height: 9px; background: #9AA0A6; bottom: 50px; }
.w-gym .arc-deco::before, .w-gym .arc-deco::after { content: ''; position: absolute; top: -9px; width: 13px; height: 26px; background: #2A2A33; border: 2px solid #3A3A44; }
.w-gym .arc-deco::before { left: -6px; } .w-gym .arc-deco::after { right: -6px; }

/* ── MUNDO 3 · MARATÓN (pista de atletismo) ── */
.arc-world.w-track { background: linear-gradient(180deg, #03060E 0%, #0A1226 55%, #101A33 100%); }
/* gradas del estadio */
.w-track .arc-hills {
  background:
    repeating-linear-gradient(0deg, #141E38 0 9px, #0E1730 9px 18px) 0 100% / 100% 58px no-repeat; }
/* reflectores del estadio */
.w-track .arc-cloud { width: 7px; height: 36px; background: #26314F; animation: none; }
.w-track .arc-cloud::before { left: -11px; top: -10px; width: 29px; height: 10px; background: #F5F9FF;
  box-shadow: 0 0 22px 5px rgba(245,249,255,0.5); }
.w-track .arc-cloud.c1 { top: 20px; } .w-track .arc-cloud.c2 { top: 20px; }
/* pista de tartán con carriles */
.w-track .arc-ground {
  background:
    repeating-linear-gradient(90deg, #F5F9FF 0 22px, transparent 22px 46px) top 13px left 0 / 100% 4px no-repeat,
    linear-gradient(#C24E2A, #C24E2A) top / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, #B0451F 0 20px, #9C3C1C 20px 23px);
  box-shadow: 0 -4px 14px rgba(194,78,42,0.35); }
/* vallas */
.w-track .arc-deco { width: 42px; height: 30px;
  background:
    linear-gradient(#F5F9FF, #F5F9FF) top / 100% 6px no-repeat,
    linear-gradient(#C9CFDB, #C9CFDB) 4px 0 / 4px 100% no-repeat,
    linear-gradient(#C9CFDB, #C9CFDB) calc(100% - 4px) 0 / 4px 100% no-repeat; }
/* META estilo maratón: bandera a cuadros + cinta */
.w-track .arc-pennant { border: none; width: 36px; height: 24px; right: 28px;
  background: repeating-conic-gradient(#F5F9FF 0% 25%, #111 25% 50%) 0 0 / 12px 12px; animation: none; }
.w-track .arc-flag-label { color: #F5F9FF; }
.w-track .arc-flagpole::after { content: ''; position: absolute; right: 26px; bottom: 36px; width: 92px; height: 4px;
  background: repeating-linear-gradient(90deg, #F5F9FF 0 8px, #E05A5A 8px 16px); } /* cinta de meta */

@media (max-width: 540px) {
  .arc-world { height: 230px; }
  .arc-ground { height: 38px; }
  .arc-hills, .arc-sign, .arc-flagpole, .arc-deco { bottom: 38px; }
  .arc-hero { width: 42px; height: 60px; bottom: 36px; }
  .arc-coin-px { width: 12px; height: 12px; border-width: 2px; bottom: 82px; }
  .arc-flagpole { height: 130px; } .arc-pole { height: 130px; }
  .arc-obs { bottom: 38px; }
  .w-gym .arc-deco { bottom: 40px; }
  .arc-stars { box-shadow: 60px 8px #CFEFC6, 130px 22px #7C9E76, 210px 4px #CFEFC6, 290px 18px #7C9E76; }
  .arc-deco.d2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-cloud, .arc-coin-px, .arc-pennant, .arc-hero.victory,
  .arc-hero.walking::after, .arc-hero.running::after,
  .arc-chest span,        /* estrella del regalo */
  .w-garden .arc-stars,   /* pétalos de cerezo */
  .arc-gcoin,             /* monedas del juego */
  .arc-obs.fly            /* obstáculos voladores */
  { animation: none; }
}

/* ── Barra lealtad en carrito ───────────────────────────── */
.cart-loyalty { margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; background: rgba(57,255,20,0.05); border: 1px solid rgba(57,255,20,0.25); font-size: 0.78rem; }
.cart-loyalty.guest { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.cart-loyalty .auth-link { margin-top: 0; font-size: inherit; }
/* barra estilo arcade: segmentos pixelados, sin redondeo */
.cart-loyalty-bar { margin-top: 7px; height: 9px; border: 1px solid rgba(57,255,20,0.4); padding: 1px; background: #041004; overflow: hidden; }
.cart-loyalty-bar div {
  height: 100%; background: linear-gradient(180deg, #7CFF6B, #39FF14 55%, #1DB954);
  box-shadow: 0 0 8px rgba(57,255,20,0.6); transition: width 0.5s steps(8);
  background-size: auto, 8px 100%;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
          mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
}

/* ── Checkout: lealtad y regalos ─────────────────────────── */
.co-guest-note { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); font-size: 0.78rem; margin-bottom: 12px; }
.co-guest-note .auth-link { margin-top: 0; font-size: inherit; }
.co-gift { padding: 10px 12px; border-radius: 10px; background: rgba(57,255,20,0.06); border: 1px solid rgba(57,255,20,0.3); font-size: 0.82rem; margin-bottom: 12px; }
.co-gift select { margin-left: 8px; background: #111; color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; padding: 4px 8px; }