/* ============================================
   MXZONE STORE - Premium Motocross Equipment
   Agencia-Level CSS Design System
   ============================================ */

/* ================================
   CSS VARIABLES & DESIGN TOKENS
   ================================ */
:root {
  /* Colores Principales */
  --orange-primary: #FF6600;
  --orange-hover: #FF8533;
  --orange-dark: #CC5200;
  --orange-glow: rgba(255, 102, 0, 0.4);

  --red-accent: #E63946;
  --red-hover: #FF4D5A;
  --red-glow: rgba(230, 57, 70, 0.4);

  --gray-dark: #1A1A1A;
  --gray-medium: #2D2D2D;
  --gray-light: #4A4A4A;
  --gray-lighter: #6B6B6B;
  --gray-text: #9A9A9A;
  --gray-light-text: #CCCCCC;

  --white: #FFFFFF;
  --white-off: #F5F5F5;
  --black: #000000;
  --hero-bg: #0a0a0a;

  /* Gradientes */
  --gradient-orange: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-dark) 100%);
  --gradient-dark: linear-gradient(180deg, var(--gray-dark) 0%, var(--gray-medium) 100%);
  --gradient-hero: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(26,26,26,0.6) 100%);
  --gradient-card: linear-gradient(145deg, var(--gray-medium) 0%, var(--gray-dark) 100%);

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-orange: 0 4px 20px var(--orange-glow);
  --shadow-red: 0 4px 20px var(--red-glow);

  /* Glow Effects */
  --glow-orange: 0 0 20px var(--orange-glow);
  --glow-orange-sm: 0 0 10px var(--orange-glow);
  --glow-red: 0 0 20px var(--red-glow);

  /* Brands marquee semantic tokens */
  --brands-bg: rgba(0, 0, 0, 0.55);
  --brands-border: rgba(255, 102, 0, 0.3);
  --brands-fade-from: rgba(0, 0, 0, 0.75);
  --brands-fade-to: transparent;
  --brands-text-color: var(--orange-primary);
  --brands-text-shadow: 0 0 8px rgba(255, 102, 0, 0.35);
  --brands-logo-shadow: 0 0 3px rgba(255, 102, 0, 0.45);

  /* Transiciones */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease-in-out;
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-3d: 0.4s cubic-bezier(0.2, 0, 0, 1);
  --transition-3d-smooth: 0.3s cubic-bezier(0.2, 0, 0, 1);

  /* Espaciado */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 5rem;

  /* ---- Border Radius — sistema reescrito el 2026-09-10 ----
     El radio no es un numero, es una proporcion: escala con el tamano
     del elemento. Por eso van DOS territorios y no un valor repetido.

       --radius-control  lo que se TOCA      botones, casillas, campos,
                                             insignias, pestanas, miniaturas
       --radius-surface  lo que CONTIENE     tarjetas, paneles, modales,
                                             bloques de imagen, el menu
       --radius-round    solo lo genuinamente circular: contador del
                         carrito, avatares, barras de scroll, sliders,
                         el boton flotante de WhatsApp

     REGLA DE ANIDADO: la esquina de adentro nunca es mayor que la de
     afuera. Un boton de 6 dentro de una tarjeta de 10 se ve bien; al
     reves se ve inflado y barato, y no se puede senalar por que.

     Antes habia dos lenguajes conviviendo —botones a 10px y casillas
     en capsula— y eso solo ya hacia que la tienda se leyera armada por
     partes.

     2026-09-20 — Seven pidio volver a redondear "un poco" sin llegar a
     como estaba antes (eso se sentia "SUPER IA"). No pude confirmar el
     numero exacto de "antes" por git log: este clon es shallow (solo
     trae el commit del 2026-09-10 en adelante) y el repo remoto no
     respondio al intentar destapar el historial completo, asi que no
     hay forma de leerlo desde aca. Lo que SI queda escrito arriba es
     la descripcion cualitativa: botones sueltos a 10px y casillas en
     capsula (999px) antes de esta reescritura.

     Para que probar un numero sea eso, un numero, el ajuste vive en
     UNA sola variable: --radius-boost. Se suma a control y a surface
     por igual, asi la relacion "adentro nunca mas grande que afuera"
     no se rompe. En 0 es el estado actual (6 / 10, cuadrado). */
  --radius-boost: 6px;
  --radius-control: calc(6px + var(--radius-boost));
  --radius-surface: calc(10px + var(--radius-boost));
  --radius-round: 9999px;

  /* Primitivos viejos. Se conservan para no romper reglas que todavia
     los nombran, pero ya no tienen valor propio: apuntan al sistema.
     lg (16px) y xl (24px) inflaban las tarjetas y bajan a 10. */
  --radius-xs: 4px;
  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-surface);
  --radius-lg: var(--radius-surface);
  --radius-xl: var(--radius-surface);
  --radius-full: var(--radius-round);

  /* Alto real del header flotante (nav + aire de arriba + bordes) —
     2026-09-20. Antes el header pegaba de punta a punta y median 80px;
     ahora flota con 12px de margen y su propio padding, y queda en 91px.
     Todo lo que reserva aire para el header fijo lee este numero, asi
     que si el header cambia de alto, se corrige en UN solo lugar. */
  --header-clearance: 96px;

  /* Breakpoints */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;

  /* Typography */
  /* Tipografia — cambiada el 2026-09-10.
     Antes: Bebas Neue + Montserrat. Funcionaban, pero son las dos
     fuentes mas usadas de la web: no delataban IA, delataban plantilla.
     Ahora: Barlow Condensed arriba (el aire de dorsal de competencia) y
     Archivo abajo (ancha y clara, aguanta descripciones y precios).
     Los sustitutos son de metrica parecida a proposito: si Google Fonts
     tarda, el salto al cargar no corre el layout. */
  --font-primary: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Impact', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* ================================
   LIGHT MODE VARIABLES
   ================================ */
[data-theme="light"] {
  --gray-dark: #E8E8E8;
  --gray-medium: #F5F5F5;
  --gray-light: #D4D4D4;
  --gray-lighter: #B0B0B0;
  --gray-text: #555555;
  --gray-light-text: #333333;

  --white: #1A1A1A;
  --white-off: #FFFFFF;
  --black: #FFFFFF;

  --gradient-dark: linear-gradient(180deg, #E0E0E0 0%, #F5F5F5 100%);
  --gradient-hero: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(230,230,230,0.88) 100%);
  --gradient-card: linear-gradient(145deg, #FFFFFF 0%, #F0F0F0 100%);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);

  --glow-orange: 0 0 20px rgba(255, 102, 0, 0.2);
  --glow-orange-sm: 0 0 10px rgba(255, 102, 0, 0.12);
  --glow-red: 0 0 20px rgba(230, 57, 70, 0.2);

  /* Brands marquee semantic tokens — light mode */
  --brands-bg: rgba(255, 255, 255, 0.72);
  --brands-border: rgba(0, 0, 0, 0.08);
  --brands-fade-from: rgba(255, 255, 255, 0.9);
  --brands-fade-to: transparent;
  --brands-text-color: #2D2D2D;
  --brands-text-shadow: none;
  --brands-logo-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);

  --hero-bg: #f0f0f0;
}

/* Light mode specific overrides */
/* El header flota: .header SOLO posiciona, no pinta. Esta regla le ponia
   fondo #E0E0E0 y un borde inferior de punta a punta — resto de cuando el
   header era una barra pegada al borde. En modo claro eso se veia como una
   franja blanca DETRAS de la capsula flotante. Transparente y sin borde. */
[data-theme="light"] .header {
  background: transparent !important;
  border-bottom: none;
}

/* La capsula es la unica que pinta, y en claro usa el mismo vidrio que en
   oscuro (antes era un #E8E8E8 opaco que mataba el blur). */
[data-theme="light"] .nav {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
}

/* Al hacer scroll, modo claro no tenia regla propia y heredaba la oscura
   (rgba(10,10,10,0.9)): la capsula se volvia negra en una pagina clara. */
[data-theme="light"] .header.scrolled .nav {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 102, 0, 0.18);
}

[data-theme="light"] .shop-sidebar {
  background: #F5F5F5 !important;
  border-right: 1px solid rgba(0,0,0,0.08);
}

[data-theme="light"] .mobile-quick-filters {
  background: rgba(232, 232, 232, 0.98) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

[data-theme="light"] .product-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06);
}

[data-theme="light"] .cart-modal-content {
  background: #F5F5F5 !important;
  border-left: 1px solid rgba(0,0,0,0.1);
}

[data-theme="light"] .cart-header {
  background: #E8E8E8 !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

[data-theme="light"] .cart-footer {
  background: #E8E8E8 !important;
  border-top: 1px solid rgba(0,0,0,0.08);
}

[data-theme="light"] .cart-item {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.05);
}

[data-theme="light"] .cart-form-group input {
  background: #FFFFFF !important;
  border-color: #CCCCCC !important;
  color: #1A1A1A !important;
}

[data-theme="light"] .payment-method-btn {
  background: #FFFFFF !important;
  border-color: #CCCCCC !important;
  color: #1A1A1A !important;
}

[data-theme="light"] .payment-method-btn.active {
  background: var(--orange-primary) !important;
  color: #0A0A0A !important;
}

[data-theme="light"] .size-chip {
  background: #FFFFFF !important;
  border-color: #CCCCCC !important;
  color: #1A1A1A !important;
}

[data-theme="light"] .size-chip.active {
  background: var(--orange-primary) !important;
  color: #0A0A0A !important;
  border-color: var(--orange-primary) !important;
}

/* 🔴 EN MODO CLARO LAS CATEGORIAS NO SE VEIAN COMO BOTONES — 2026-09-09.
   Los chips de TALLA tenian su version clara (justo arriba) y los de CATEGORIA
   nunca la tuvieron. Como el estilo base los pinta con blanco translucido
   —borde `rgba(255,255,255,0.15)` y fondo `rgba(255,255,255,0.04)`—, sobre
   fondo blanco quedaban INVISIBLES: se veia el texto flotando sin caja.
   Y ese es el motivo por el que la grilla se leia "desordenada" aunque las
   casillas estuvieran perfectamente alineadas: sin borde no se ven las
   columnas, solo palabras sueltas a distintas alturas. */
[data-theme="light"] .category-chip {
  background: #FFFFFF !important;
  border-color: #CCCCCC !important;
  color: #1A1A1A !important;
}

[data-theme="light"] .category-chip:hover {
  border-color: #999999 !important;
  background: #F2F2F2 !important;
  color: var(--orange-primary) !important;
}

[data-theme="light"] .category-chip.active {
  background: var(--gradient-orange) !important;
  color: #FFFFFF !important;
  border-color: var(--orange-primary) !important;
}

[data-theme="light"] .search-input {
  background: #FFFFFF !important;
  border-color: #CCCCCC !important;
  color: #1A1A1A !important;
}

[data-theme="light"] .mobile-search-bar .search-input {
  background: #FFFFFF !important;
  border-color: #CCCCCC !important;
  color: #1A1A1A !important;
}

[data-theme="light"] .shop-top-bar {
  background: #F0F0F0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

[data-theme="light"] .footer {
  background: #1A1A1A !important;
  color: #CCCCCC !important;
}

[data-theme="light"] .mobile-menu-panel {
  background: #F5F5F5 !important;
}

[data-theme="light"] .mobile-menu-overlay {
  background: rgba(0,0,0,0.4) !important;
}

[data-theme="light"] .quick-filter-chip {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #333333 !important;
}

[data-theme="light"] .product-modal-content {
  background: #F5F5F5 !important;
}

/* Theme transition for smooth switching */
.cart-modal, .cart-modal *, .header, .nav, .shop-sidebar, .shop-top-bar, .product-card, .quick-filter-chip, .mobile-quick-filters, .mobile-search-bar, .footer, .mobile-menu-panel, body {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ================================
   THEME TOGGLE BUTTON
   ================================ */
.theme-toggle {
  position: relative;
  width: 56px;
  height: 30px;
  background: linear-gradient(135deg, #2D2D2D 0%, #1A1A1A 100%);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-round);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
  display: flex;
  align-items: center;
  padding: 0 4px;
  margin-right: 8px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
}

/* Antes era el emoji de luna/sol del teclado: se veia distinto en cada
   sistema operativo y desentonaba con el resto de la interfaz, que dibuja
   sus iconos con el mismo trazo (ver .ico mas abajo). Ahora es el mismo
   lenguaje: un SVG en linea, a un color. 2026-09-20. */
.theme-toggle::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-color: rgba(255,255,255,0.85);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5Z'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: all 0.3s ease;
}

.theme-toggle::after {
  content: '';
  position: absolute;
  right: 4px;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #FF6600 0%, #FF8533 100%);
  border-radius: var(--radius-control);
  transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 0 2px 8px rgba(255,102,0,0.4), inset 0 -2px 4px rgba(0,0,0,0.1);
}

.theme-toggle:hover {
  border-color: rgba(255,102,0,0.4);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 0 20px rgba(255,102,0,0.2);
}

.theme-toggle:hover::after {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255,102,0,0.6);
}

/* LIGHT MODE — Toggle se invierte */
[data-theme="light"] .theme-toggle {
  background: linear-gradient(135deg, #E8E8E8 0%, #F5F5F5 100%);
  border-color: rgba(0,0,0,0.15);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.1);
}

[data-theme="light"] .theme-toggle::before {
  left: auto;
  right: 6px;
  background-color: var(--orange-primary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}

[data-theme="light"] .theme-toggle::after {
  right: auto;
  left: 4px;
  background: linear-gradient(135deg, #FF6600 0%, #FF8533 100%);
  box-shadow: 0 2px 8px rgba(255,102,0,0.3);
}

[data-theme="light"] .theme-toggle:hover {
  border-color: rgba(255,102,0,0.4);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 0 20px rgba(255,102,0,0.15);
}

[data-theme="light"] .theme-toggle:hover {
  border-color: var(--orange-primary);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  max-width: 100%;
}

body {
  font-family: var(--font-primary);
  background-color: var(--gray-dark);
  color: var(--gray-light-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 100%;
  position: relative;
}

/* Visualmente oculto pero legible por lectores de pantalla — para
   botones que pasan de texto a icono y necesitan seguir diciendo
   que hacen. 2026-09-20. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================
   TIPOGRAFÍA
   ================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--white);
}

h1 { font-size: clamp(2.5rem, 8vw, 6rem); }
h2 { font-size: clamp(2rem, 5vw, 4rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gray-text);
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-base);
}

/* ================================
   UTILIDADES
   ================================ */
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.container-narrow {
  max-width: 900px;
}

/* ================================
   SOCIAL HERO SECTION (About Page)
   ================================ */
.social-hero-section {
  padding: var(--spacing-2xl) 0 var(--spacing-xl) 0;
  margin-top: var(--spacing-xl);
  background: linear-gradient(180deg, rgba(255, 102, 0, 0.08) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255, 102, 0, 0.1);
  position: relative;
  overflow: hidden;
}

/* GALAXY THEME - La Galaxia MXZONE - OPTIMIZADO SIN LAG */
.galaxy-theme {
  background: linear-gradient(180deg, #0a0a1a 0%, #1a0a2e 50%, #0d1b2a 100%);
  border-bottom: 1px solid rgba(255, 102, 0, 0.2);
}

.galaxy-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Estrellas - Solo 1 capa, sin animacion para rendimiento */
.stars {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars-1 {
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 90px 70px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 150px 40px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 200px 100px, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 280px 60px, rgba(255,255,255,0.5), transparent);
  background-repeat: repeat;
  background-size: 300px 150px;
  opacity: 0.4;
}

/* Nebula effect - Simplificado, sin animacion */
.nebula {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255,102,0,0.1) 0%, transparent 70%);
  filter: blur(30px);
  opacity: 0.3;
}

/* Galaxy Title 3D - Sin animacion automatica */
.galaxy-title .title-3d {
  display: inline-block;
  font-size: clamp(2.5rem, 6vw, 4rem);
  text-shadow:
    0 0 10px rgba(255, 102, 0, 0.8),
    0 0 20px rgba(255, 102, 0, 0.6),
    0 0 30px rgba(255, 102, 0, 0.4),
    0 4px 8px rgba(0,0,0,0.5),
    0 8px 16px rgba(0,0,0,0.3);
}

.galaxy-subtitle {
  color: rgba(255,255,255,0.8);
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Galaxy Badges 3D - Simple hover */
.galaxy-badges .badge-3d {
  background: linear-gradient(135deg, rgba(255,102,0,0.3) 0%, rgba(255,102,0,0.1) 100%);
  border: 1px solid rgba(255, 102, 0, 0.5);
  box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);
  transition: transform 0.2s ease;
}

.galaxy-badges .badge-3d:hover {
  transform: translateY(-2px);
}

/* Galaxy Cards - Sin 3D, solo hover simple */
.galaxy-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255, 102, 0, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.galaxy-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.galaxy-header {
  background: linear-gradient(135deg, rgba(255,102,0,0.2) 0%, rgba(0,0,0,0.3) 100%);
  border-bottom: 1px solid rgba(255, 102, 0, 0.3);
  backdrop-filter: blur(10px);
}

.galaxy-icon {
  filter: drop-shadow(0 0 10px rgba(255, 102, 0, 0.6));
}

.galaxy-btn {
  background: linear-gradient(135deg, #ff6600 0%, #ff8800 100%);
  box-shadow: 0 4px 15px rgba(255, 102, 0, 0.4);
  transition: transform 0.2s ease;
}

.galaxy-btn:hover {
  transform: translateY(-2px);
}

/* Galaxy Stats - Simple */
.galaxy-stats {
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
  border-top: 1px solid rgba(255, 102, 0, 0.2);
}

.galaxy-stats .stat-3d {
  transition: transform 0.2s ease;
}

.galaxy-stats .stat-3d:hover {
  transform: translateY(-3px);
}

/* Galaxy Placeholder */
.galaxy-placeholder {
  background: linear-gradient(135deg, rgba(255,102,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
  border: 1px solid rgba(255, 102, 0, 0.2);
}

/* Galaxy Card Section */
.galaxy-card-section {
  perspective: 1000px;
}

/* Embed Containers - Optimizadas */
.instagram-embed-container,
.tiktok-embed-container,
.facebook-embed-container {
  padding: var(--spacing-lg);
  background: rgba(255,255,255,0.98);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 250px;
  border-radius: var(--radius-surface);
  margin: var(--spacing-md);
}

/* Instagram Profile Link */
.instagram-profile-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.instagram-profile-content {
  text-align: center;
  padding: var(--spacing-lg);
}

.instagram-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--spacing-md);
}

.instagram-profile-content h4 {
  color: #000;
  font-size: 1.5rem;
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
}

.instagram-profile-content p {
  color: #666;
  font-size: 0.95rem;
  margin-bottom: var(--spacing-md);
}

.btn-instagram {
  display: inline-block;
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
  padding: 10px 24px;
  border-radius: var(--radius-control);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-instagram:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 39, 67, 0.4);
}

.tiktok-embed-container blockquote {
  margin: 0 !important;
  max-width: 100% !important;
}

/* Facebook Placeholder */
.facebook-placeholder-full {
  text-align: center;
  padding: var(--spacing-xl);
}

.facebook-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--spacing-md);
}

.facebook-placeholder-full h4 {
  color: var(--white);
  margin-bottom: var(--spacing-sm);
}

.facebook-placeholder-full p {
  color: var(--gray-text);
  margin-bottom: var(--spacing-md);
}

.social-hero-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--spacing-xl) auto;
  padding: 0 var(--spacing-md);
}

.social-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--white);
  margin-bottom: var(--spacing-sm);
  letter-spacing: 1px;
}

.social-hero-subtitle {
  font-size: 1.05rem;
  color: var(--gray-text);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.social-cta-badges {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.social-cta-badges .badge {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 14px;
  background: rgba(255, 102, 0, 0.15);
  border: 1px solid rgba(255, 102, 0, 0.3);
  border-radius: var(--radius-control);
  color: var(--orange-primary);
}

/* Instagram Full Width Section */
.instagram-full-section {
  margin-bottom: var(--spacing-lg);
}

.instagram-full-content {
  min-height: 500px;
  background: #fafafa;
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.instagram-embed-wrapper {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  background: transparent;
}

.instagram-embed-wrapper blockquote {
  margin: 0 auto !important;
  max-width: 100% !important;
}

/* Dual Grid for TikTok + Facebook */
.social-grid-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

.social-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  align-items: stretch;
}

.social-card {
  background: var(--gradient-card);
  border-radius: var(--radius-surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition-base);
}

.social-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 102, 0, 0.3);
  box-shadow: 0 8px 32px rgba(255, 102, 0, 0.15);
}

.social-card.featured {
  border-color: rgba(255, 102, 0, 0.4);
  box-shadow: 0 4px 24px rgba(255, 102, 0, 0.2);
}

.social-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.2);
}

.social-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.social-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.social-brand h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  color: var(--white);
}

.social-brand p {
  font-size: 0.75rem;
  color: var(--gray-text);
  margin: 0;
}

.social-follow-btn {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--orange-primary);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid rgba(255, 102, 0, 0.3);
  border-radius: var(--radius-control);
  transition: var(--transition-fast);
  white-space: nowrap;
}

.social-follow-btn:hover {
  background: rgba(255, 102, 0, 0.15);
  border-color: var(--orange-primary);
}

.social-content {
  flex: 1;
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

.social-stats {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.15);
}

.stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-number {
  font-size: 1.2rem;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--gray-text);
}

/* Instagram Embed */
.instagram-media {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* TikTok Embed */
.tiktok-embed-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  padding: var(--spacing-md);
  border-radius: var(--radius-surface);
}

.tiktok-embed-wrapper blockquote {
  margin: 0 auto !important;
}

.tiktok-placeholder {
  text-align: center;
  padding: var(--spacing-lg);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-surface);
  border: 1px solid rgba(255, 0, 80, 0.2);
}

.tiktok-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--spacing-sm);
}

.tiktok-placeholder p {
  color: var(--gray-text);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-md);
}

.tiktok-link {
  color: #ff0050;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
}

.tiktok-link:hover {
  text-decoration: underline;
}

/* Facebook Placeholder */
.facebook-embed {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.facebook-placeholder {
  text-align: center;
  padding: var(--spacing-lg);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-surface);
  border: 1px solid rgba(24, 119, 242, 0.2);
}

.facebook-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--spacing-sm);
}

.facebook-placeholder p {
  color: var(--gray-text);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-md);
}

.facebook-link {
  color: #1877f2;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
}

.facebook-link:hover {
  text-decoration: underline;
}

/* Responsive Social Hero */
@media (max-width: 1024px) {
  .social-grid-dual {
    grid-template-columns: 1fr;
  }

  .social-content {
    min-height: 200px;
  }
}

@media (max-width: 768px) {
  .social-hero-section {
    padding: var(--spacing-md) 0;
    margin-top: var(--spacing-md);
  }

  .social-hero-title {
    font-size: 1.8rem;
  }

  .social-hero-subtitle {
    font-size: 0.95rem;
  }

  .social-cta-badges {
    gap: 6px;
  }

  .social-cta-badges .badge {
    font-size: 0.75rem;
    padding: 4px 10px;
  }

  .social-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .social-content {
    min-height: 180px;
  }

  .instagram-full-content {
    min-height: 400px;
    padding: var(--spacing-sm);
  }

  .social-grid-dual {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }


  .post-image-placeholder p {
    font-size: 0.75rem;
  }
}

@media (max-width: 768px) {
  .social-hero-section {
    padding: var(--spacing-md) 0;
  }

  .social-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .social-content {
    min-height: 180px;
  }
}

.text-center { text-align: center; }
.text-orange { color: var(--orange-primary); }
.text-red { color: var(--red-accent); }
.text-white { color: var(--white); }

.section {
  padding: var(--spacing-2xl) 0;
}

.section-title {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: var(--gradient-orange);
  margin: var(--spacing-sm) auto 0;
  border-radius: var(--radius-full);
}

/* PAS Section - Problema-Agitación-Solución */
.pas-section {
  background: var(--gray-medium);
  padding: var(--spacing-xl) 0;
}

.pas-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.pas-problem,
.pas-agitation,
.pas-solution {
  text-align: center;
}

.pas-title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--white);
  margin-bottom: var(--spacing-md);
}

.pas-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--gray-light-text);
  max-width: 700px;
  margin: 0 auto;
}

.pas-agitation .pas-text {
  font-style: italic;
  color: var(--gray-text);
}

.pas-solution {
  background: rgba(255, 102, 0, 0.05);
  border: 1px solid rgba(255, 102, 0, 0.2);
  border-radius: var(--radius-surface);
  padding: var(--spacing-xl);
  margin-top: var(--spacing-md);
}

.pas-solution-title {
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--orange-primary);
  margin-bottom: var(--spacing-md);
}

.pas-cta {
  margin-top: var(--spacing-lg);
}

.pas-cta .btn-whatsapp {
  min-width: 280px;
}

/* ================================
   HEADER & NAV - Apple Style Glassmorphism
   ================================ */
/* Header flotante — 2026-09-20. Antes era una barra pegada de punta a
   punta. El fondo/blur/sombra ahora viven en .nav, no en .header: .header
   solo posiciona; .nav es la "isla" que flota con aire arriba y a los
   costados. */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 12px var(--spacing-md) 0;
  transition: var(--transition-base);
}

.header.scrolled .nav {
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 102, 0, 0.15);
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  max-width: 1400px;
  margin: 0 auto;
  gap: var(--spacing-md);
  background: rgba(26, 26, 26, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-surface);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  transition: var(--transition-base);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--white);
  flex-shrink: 0;
}

.logo-image {
  height: 45px;
  width: auto;
  object-fit: contain;
}

.logo-icon {
  width: 45px;
  height: 45px;
  background: var(--gradient-orange);
  border-radius: var(--radius-control);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.4rem;
  box-shadow: var(--shadow-orange);
}

.nav-links {
  display: flex;
  gap: var(--spacing-md);
  list-style: none;
  justify-content: center;
  flex: 1;
}

.nav-links a {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray-light-text);
  position: relative;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-control);
  transition: var(--transition-base);
  white-space: nowrap;
}

.nav-links a {
  position: relative;
}

.nav-links a:hover {
  color: var(--orange-primary);
}

/* Antes: fondo naranja + borde naranja del mismo tono, se leia como un
   boton relleno generico. Ahora la pagina activa se marca con el texto en
   naranja y una linea fina abajo (mismo color, sin caja) — mas sobrio,
   sigue siendo inequivoco en claro y oscuro porque usa la misma variable. */
.nav-links a.active {
  color: var(--orange-primary);
  background: transparent;
  border: none;
  box-shadow: inset 0 -2px 0 0 var(--orange-primary);
}

.nav-cta {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex-shrink: 0;
}

/* Cart button container */
.cart-btn-container {
  position: relative;
  display: flex;
  align-items: center;
}

.cart-btn {
  background: var(--gray-dark);
  border: none;
  border-radius: var(--radius-control);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition-base);
  color: var(--white);
}

.cart-btn:hover {
  border-color: var(--orange-primary);
  background: rgba(255, 102, 0, 0.1);
}

.cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--orange-primary);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 102, 0, 0.4);
}

/* Mobile WhatsApp Button (Center) */
.mobile-wa-btn {
  display: none;
  font-size: 1.5rem;
  color: var(--white);
  padding: var(--spacing-xs);
  transition: var(--transition-fast);
}

.mobile-wa-btn:hover {
  transform: scale(1.1);
}

/* Desktop Only Utility */
.desktop-only {
  display: flex;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
  }
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs);
}

.menu-toggle span {
  width: 25px;
  height: 3px;
  background: var(--white);
  border-radius: var(--radius-full);
  transition: var(--transition-base);
}

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Menu Panel with Search */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}

.mobile-menu-panel {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 400px;
  height: 100vh; /* fallback */
  height: 100dvh; /* altura dinámica real en móviles */
  background: var(--gray-dark);
  z-index: 10000;
  transition: right var(--transition-base);
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);

  /* Este es el UNICO scroll del menu. Antes habia tres encimados y el
     de aqui adentro se comia 10px del ancho con una barra gris del
     sistema: esa era la franja negra a la derecha que se veia como si
     el panel no llegara al borde. */
  overflow-y: auto;

  /* Al llegar al final del menu, la rueda seguia moviendo la pagina de
     atras. El cliente cerraba el menu y aparecia en otro punto de la
     tienda sin haber tocado nada. */
  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.mobile-menu-panel::-webkit-scrollbar { width: 6px; }
.mobile-menu-panel::-webkit-scrollbar-track { background: transparent; }
.mobile-menu-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-full);
}
.mobile-menu-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.mobile-menu-panel.active {
  right: 0;
}

/* Mobile menu - show on mobile */
@media (max-width: 768px) {
  .mobile-menu-panel {
    display: block;
  }
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--gray-lighter);
  background: var(--gray-medium);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile-menu-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--white);
  margin: 0;
}

.mobile-menu-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 2rem;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}

.mobile-menu-close:hover {
  background: rgba(255, 102, 0, 0.2);
  color: var(--orange-primary);
}

/* Mobile Search Panel - "En el Bolsillo" */
.mobile-search-panel {
  padding: var(--spacing-lg);
  background: var(--gray-medium);
  border-bottom: 1px solid var(--gray-lighter);
}

.mobile-search-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--spacing-sm);
}

.mobile-search-box {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.mobile-search-input {
  flex: 1;
  padding: 12px var(--spacing-md);
  background: var(--gray-dark);
  border: 2px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--white);
  font-size: 0.95rem;
  font-family: var(--font-primary);
  transition: var(--transition-fast);
}

.mobile-search-input:focus {
  outline: none;
  border-color: var(--orange-primary);
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
}

.mobile-search-btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-control);
  background: var(--orange-primary);
  border: none;
  color: var(--white);
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* El contenido paso de emoji a SVG: sin esto el svg se apoya en la linea base
   del span y queda unos pixeles bajo del centro del boton. */
.mobile-search-btn span {
  display: flex;
  align-items: center;
}

.mobile-search-btn:hover {
  background: var(--orange-hover);
}

.mobile-search-btn:active {
  background: var(--orange-dark);
}

.mobile-search-hint {
  font-size: 0.75rem;
  color: var(--gray-text);
  margin-top: var(--spacing-xs);
  text-align: center;
}

/* Mobile Menu Categories - Scrollable Section */
.mobile-menu-categories {
  padding: var(--spacing-lg);
  background: var(--gray-medium);
  border-bottom: 1px solid var(--gray-lighter);
}

/* "CATEGORIAS" pesaba casi lo mismo que "MENU" —los dos en la
   condensada, los dos en blanco, uno a 20px y el otro a 16—, y dos
   titulos que compiten se leen como dos pedazos pegados en vez de un
   panel. Baja a etiqueta: mas chica, mas espaciada y en gris. Sigue
   ordenando la seccion sin disputarle el mando al titulo del menu. */
.mobile-menu-section-title {
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gray-text);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Las categorias del menu — reescritas el 2026-09-10.

   Antes esta caja estaba clavada en 200px de alto con 353px de
   contenido adentro, asi que tenia SU PROPIO scroll con una barrita
   naranja a la vista, dentro de un panel que ya scrolleaba (1384px de
   contenido en 812 de pantalla), dentro de una pagina que tambien.
   Tres scrolls encimados.

   El cliente no cuenta scrolls: intenta bajar, se le mueve la caja de
   adentro en vez del menu, y la tienda se siente rota aunque funcione.
   Ahora la caja fluye y el UNICO que scrollea es el panel.

   Y las casillas pasan de amontonarse a una grilla de dos columnas
   parejas: con flex-wrap cada una tomaba el ancho de su palabra y las
   filas quedaban desparejas, que es leer un texto en vez de recorrer
   una lista. Es el mismo arreglo que ya se hizo en la barra lateral de
   la tienda, por la misma razon. */
.mobile-menu-category-scroll {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm);
}

/* Alineadas a la izquierda, y es lo que hace que la lista se recorra
   de un vistazo. Centradas, el icono de cada casilla cae en un punto
   distinto —el de "Cascos" en un lado, el de "Protecciones" en otro— y
   el ojo tiene que ir a buscarlo casilla por casilla. Alineados forman
   una columna: se barren de arriba a abajo sin leer.

   Va con selector propio porque la regla generica de .category-chip
   que las centra vive mas abajo en el archivo (es la de la barra
   lateral de la tienda, donde centrar SI corresponde porque ahi el
   nombre se parte en dos renglones y no hay icono). */
.mobile-menu-category-scroll .category-chip {
  justify-content: flex-start;
  padding-left: var(--spacing-sm);
}

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(45, 45, 45, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-control);
  color: var(--gray-light-text);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.category-chip:hover {
  background: rgba(255, 102, 0, 0.15);
  border-color: var(--orange-primary);
  color: var(--orange-primary);
  transform: translateY(-2px);
}

.category-chip.ninos-chip {
  background: rgba(255, 102, 0, 0.2);
  border-color: var(--orange-primary);
  color: var(--orange-primary);
  font-weight: 700;
}

/* El separador que anuncia la seccion Ninos. Al pasar las casillas
   a grilla se convirtio en UNA celda de la grilla: ocupaba media fila,
   dejaba un hueco al lado y empujaba "Ninos" a su propio renglon. Un
   separador tiene que cruzar de lado a lado o no separa nada. */
.category-chip-divider {
  grid-column: 1 / -1;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 102, 0, 0.4), transparent);
  margin: var(--spacing-xs) 0;
}

/* Mobile Menu Navigation Links */
.mobile-menu-links {
  list-style: none;
  padding: var(--spacing-md) 0;
  padding-bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom));
}

.mobile-menu-links li {
  margin: 0;
}

/* El ritmo estaba invertido, y se podia medir: cada link de aqui
   ocupaba 75px de alto mientras cada categoria ocupaba 39. Los links
   respiraban como carteles de autopista y las categorias iban
   apretadas — al reves de lo que importa, porque el que abre el menu
   viene a buscar un producto, no la pagina de Nosotros.

   52px: sigue arriba de los 44 que necesita un dedo para no fallar, y
   deja de comerse la pantalla. Con esto entran dos secciones mas sin
   tener que bajar. */
.mobile-menu-links a {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 52px;
  padding: 0 var(--spacing-lg);
  color: var(--white);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
  border-left: 2px solid transparent;
}

.mobile-menu-links a:hover {
  background: rgba(255, 102, 0, 0.1);
  border-left-color: var(--orange-primary);
  color: var(--orange-primary);
}

/* Esta regla existia para agrandar el emoji que iba delante de cada
   link. Ya no hay emoji; si se deja, cualquier <span> que entre a un
   link del menu sale 30% mas grande sin motivo. */

/* ================================
   HERO SECTION - 3D ENHANCED
   ================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--header-clearance);
  /* El carrusel de marcas va pegado al piso del hero con position:absolute,
     asi que no empuja contenido: si el bloque centrado (insignia + titulo +
     subtitulo + botones + prueba social) crece mas que el alto disponible
     -algo que pasa en laptops de 768px de alto, no solo en celular- el
     carrusel le queda ENCIMA a la prueba social. Este padding-bottom le
     reserva su propio alto (ver .hero-brands-marquee) para que nunca se
     pisen. 2026-09-20. */
  padding-bottom: 100px;
  background: var(--hero-bg, #0a0a0a);
  perspective: 1000px;
}

.hero-3d-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out;
}

/* Video Background */
.hero-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  transition: opacity 0.3s ease;
}

.hero-video-container.hidden {
  opacity: 0;
  pointer-events: none;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(10,10,10,0.85) 100%);
  z-index: 1;
}

/* Vignette Effect */
.hero-video-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.4) 70%,
    rgba(0, 0, 0, 0.7) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Subtle Gradient Pulse Effect - Premium */
.hero-video-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(255, 102, 0, 0.03) 0%,
    transparent 60%
  );
  z-index: 1;
  pointer-events: none;
  animation: gradientPulse 8s ease-in-out infinite;
}

@keyframes gradientPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Particle Glow Effect */
.particle {
  position: absolute;
  background: radial-gradient(circle, rgba(255, 102, 0, 0.4) 0%, transparent 70%);
  border-radius: var(--radius-surface);
  pointer-events: none;
  animation: particleFloat 20s infinite ease-in-out;
  will-change: transform, opacity;
}

@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  50% {
    transform: translateY(-100vh) translateX(20px) scale(1.5);
  }
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 900px;
  padding: var(--spacing-xl);
}

.hero-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.03) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.03) 75%);
  background-size: 60px 60px;
  background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
  opacity: 0.15;
  z-index: 2;
  pointer-events: none;
}

/* Particles - Optimized */
.hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.particle {
  position: absolute;
  background: radial-gradient(circle, rgba(255,102,0,0.8) 0%, transparent 70%);
  border-radius: var(--radius-surface);
  animation: floatParticle linear infinite;
}

@keyframes floatParticle {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) scale(1);
    opacity: 0;
  }
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 900px;
  padding: var(--spacing-xl);
}

/* La insignia del hero. Con la capsula el texto tambien se partia en
   dos renglones en celular, pero la forma redonda lo disimulaba; con la
   esquina firme quedo un recuadro con un renglon casi vacio y una
   estrella suelta. No es culpa del radio: la insignia SIEMPRE fue mas
   ancha que la pantalla y nadie lo habia visto. Se ajusta el tamano de
   letra y el espaciado para que entre en un renglon en 375px, que es el
   ancho del telefono mas angosto que compra en la tienda. */
.hero-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  background: rgba(255, 102, 0, 0.1);
  border: 1px solid var(--orange-primary);
  border-radius: var(--radius-control);
  color: var(--orange-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  white-space: nowrap;
  max-width: 100%;
  margin-bottom: var(--spacing-lg);
  animation: fadeInUp 0.8s ease forwards;
}

.hero-title {
  margin-bottom: var(--spacing-md);
  animation: fadeInUp 0.8s ease 0.2s forwards;
  opacity: 0;
}

.hero-title span {
  background: var(--gradient-orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--gray-text);
  margin-bottom: var(--spacing-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  animation: fadeInUp 0.8s ease 0.4s forwards;
  opacity: 0;
}

/* El hero SIEMPRE tiene video/foto oscuro de fondo (ver .hero-video-overlay),
   en los dos temas. h1/h2 heredan color: var(--white), que en modo claro pasa
   a #1A1A1A (case oscuro-sobre-oscuro): el titulo y el subtitulo quedaban
   practicamente invisibles sobre el video. En modo oscuro var(--white) ya es
   blanco puro, asi que esto no cambia nada ahi. 2026-09-21. */
[data-theme="light"] .hero-title {
  color: #FFFFFF;
}

[data-theme="light"] .hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
}

.hero-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s ease 0.6s forwards;
  opacity: 0;
}

.hero-buttons--single {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.hero-buttons--single .btn-full {
  flex: 1 1 100%;
  width: 100%;
  text-align: center;
}

/* Trust Badge - Prueba Social Hero */
.hero-trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-lg);
  animation: fadeInUp 0.8s ease 0.7s forwards;
  opacity: 0;
}

.trust-stars {
  font-size: 1.2rem;
  letter-spacing: 2px;
}

.trust-text {
  font-size: 0.9rem;
  color: var(--gray-light-text);
  text-align: center;
  max-width: 500px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  animation: fadeInUp 0.8s ease 0.8s forwards;
  opacity: 0;
  perspective: 1000px;
}

.stat-item {
  text-align: center;
  padding: var(--spacing-lg);
  border-radius: var(--radius-surface);
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.4s ease;
  transform-style: preserve-3d;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--orange-primary);
  display: block;
  text-shadow: 0 0 20px rgba(255, 102, 0, 0.5);
  transition: transform 0.4s ease;
}

.stat-item:hover .stat-number {
  transform: scale(1.1) translateZ(20px);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--gray-text);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ================================
   BOTONES
   ================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

/* ---- Botones — reescritos el 2026-09-10 ----
   El primario tenia SEIS efectos encima al mismo tiempo: degradado,
   resplandor, un destello blanco que lo cruzaba, salto de 5px,
   agrandado del 5% y sombra triple, todo con rebote elastico.
   Ese destello (el ::before que se deslizaba) es la firma mas
   reconocible de "esto lo genero una IA". Un boton profesional
   RESPONDE; no actua.

   Lo que queda: el color se aclara, sube 1px, y listo. 120ms.

   El texto pasa de blanco a negro y eso NO es estetica: blanco sobre
   #FF6600 da 2,9:1 de contraste y el minimo accesible es 4,5:1. Negro
   da 7,2:1. Con el sol pegandole a la pantalla, hoy el cliente no
   alcanza a leer el boton de comprar. */
.btn-primary {
  background: var(--orange-primary);
  color: #0A0A0A;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.btn-primary:hover {
  background: var(--orange-hover);
  transform: translateY(-1px);
}

.btn-primary:active {
  background: var(--orange-dark);
  transform: translateY(0);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.24);
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.btn-secondary:hover {
  border-color: var(--orange-primary);
  color: var(--orange-primary);
  transform: translateY(-1px);
}

.btn-secondary:active {
  border-color: var(--orange-dark);
  color: var(--orange-dark);
  transform: translateY(0);
}

/* El verde se queda: no es marca, es el puente a otra app y el cliente
   lo reconoce por el color. Lo que baja es el volumen — mismo alto,
   mismo borde y mismo movimiento que el resto. */
.btn-whatsapp {
  background: #25D366;
  color: #06301A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.btn-whatsapp:hover {
  background: #33E074;
  transform: translateY(-1px);
}

.btn-whatsapp:active {
  background: #1EAF55;
  transform: translateY(0);
}

/* Foco visible para teclado: no existia. Sin esto, quien navega con
   Tab no sabe donde esta parado. */
.btn:focus-visible {
  outline: 2px solid var(--orange-hover);
  outline-offset: 2px;
}

.btn-whatsapp img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.btn-small {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.85rem;
}

/* El WhatsApp del header — 2026-09-20. Antes decia "WHATSAPP" en texto
   grande adentro de un boton chico. Ahora es un icono, del mismo lenguaje
   que el resto (.ico), del mismo tamano que el boton del carrito de al
   lado para que la fila de acciones se lea pareja. El texto sigue
   existiendo para lectores de pantalla (.sr-only), solo no se dibuja. */
.header .btn-whatsapp.btn-small {
  width: 40px;
  height: 40px;
  padding: 0;
}

.header .btn-whatsapp.btn-small .ico {
  width: 18px;
  height: 18px;
}

.btn-large {
  padding: var(--spacing-lg) var(--spacing-xl);
  font-size: 1.1rem;
}

/* ================================
   PRODUCT CARDS
   ================================ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--spacing-md);
}

/* Category Dividers — rediseño 2026-09-20: la version anterior era una
   linea a cada lado + una capsula rellena de naranja al medio, y se leia
   como un badge de plantilla generica en vez de un separador de catalogo.
   Ahora el titulo hace el trabajo de jerarquia (mayuscula, tracking,
   una rayita naranja corta debajo, sin fondo ni borde) y las lineas a los
   costados se acortan para no competir con el texto. Sigue orientando en
   un catalogo grande: el ojo lee "BOTAS" igual de rapido que antes. */
.category-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) 0;
  margin: var(--spacing-lg) 0;
  /* Hacer que el separador ocupe todo el ancho del grid */
  grid-column: 1 / -1;
  width: 100%;
}

.category-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  max-width: 140px;
}

.category-divider-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 var(--spacing-sm);
  white-space: nowrap;
}

.category-divider-icon {
  display: none;
}

.category-divider-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-light-text);
  margin: 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

.category-divider-title::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin: 6px auto 0;
  background: var(--orange-primary);
}

/* State: hidden when the category has no visible products */
.category-divider--hidden {
  display: none !important;
}

.product-card {
  background: var(--gradient-card);
  border-radius: var(--radius-surface);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform var(--transition-3d), box-shadow 0.4s ease, border-color 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 102, 0, 0.5);
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-orange);
  opacity: 0;
  transition: var(--transition-base);
}

.product-card:hover::before {
  opacity: 1;
}

/* Mouse follow glow effect */
.product-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 102, 0, 0.15) 0%, transparent 50%);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.product-card:hover::after {
  opacity: 1;
}

.product-card .product-image {
  transform: translateZ(0);
  transition: transform 0.4s ease;
}

.product-card:hover .product-image {
  transform: translateZ(20px);
}

.product-card:hover .product-image img {
  filter: drop-shadow(0 8px 16px rgba(255, 102, 0, 0.3));
}

.product-image {
  width: 100%;
  height: 200px;
  background: linear-gradient(145deg, var(--gray-medium), var(--gray-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: var(--spacing-md);
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* La foto de la tarjeta ahora es un <a> real a la ficha (2026-09-21, ver
   products.js createProductCard() y el comentario en main.js sobre por que
   se dejo de abrir el quickview desde la card). display:contents saca al
   link de la caja del flex container: la imagen sigue siendo hija directa
   de .product-image y el layout no cambia un pixel. */
.product-card-media-link {
  display: contents;
}

.product-card-name-link {
  color: inherit;
}

.product-image-placeholder {
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--gray-lighter);
  opacity: 0.3;
}

.product-badge {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--red-accent);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: var(--radius-control);
  letter-spacing: 1px;
}

.product-info {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
}

.product-category {
  font-size: 0.65rem;
  color: var(--orange-primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-bottom: 0;
}

.product-name {
  font-size: 0.95rem;
  margin-bottom: 0;
  color: var(--white);
  font-family: var(--font-primary);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price-wrapper {
  margin-bottom: 0;
}

.product-price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--red-accent);
  text-shadow: var(--glow-red);
  display: block;
}

.product-price-old {
  font-size: 0.9rem;
  color: var(--gray-text);
  text-decoration: line-through;
  margin-left: var(--spacing-xs);
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--spacing-xs);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.product-size {
  font-size: 0.7rem;
  color: var(--gray-text);
}

.product-size span {
  color: var(--white);
  font-weight: 600;
}

.product-actions {
  display: flex;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.product-actions .btn {
  flex: 1;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.8rem;
}

/* Size Selector in Product Card */
.product-sizes-selector {
  margin-top: var(--spacing-xs);
}

.card-size-select {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--gray-dark);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--white);
  font-size: 0.85rem;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;
}

.card-size-select:focus {
  outline: none;
  border-color: var(--orange-primary);
}

/* Add to Cart Button */
.btn-cart-add {
  background: var(--orange-primary);
  color: #0A0A0A;
  border: none;
  border-radius: var(--radius-control);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.btn-cart-add:hover {
  background: var(--orange-hover);
  transform: translateY(-1px);
}

.btn-cart-add:active {
  background: var(--orange-dark);
  transform: translateY(0);
}

.btn-cart-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-cart-add:disabled:hover {
  background: var(--orange-primary);
  transform: none;
}

/* ================================
   CATEGORIES SECTION
   ================================ */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.category-card {
  position: relative;
  height: 350px;
  border-radius: var(--radius-surface);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-3d), box-shadow 0.4s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 100%);
  z-index: 1;
  transition: opacity 0.4s ease;
}

.category-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(255, 102, 0, 0.15) 0%, transparent 70%);
  opacity: 0;
  z-index: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.category-card:hover::after {
  opacity: 1;
}

.category-card:hover .category-icon {
  transform: scale(1.2) translateZ(30px);
  opacity: 0.4;
}

/* Perimeter glow effect for categories */
.category-card .category-bg {
  position: relative;
  overflow: hidden;
}

.category-card .category-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    transparent 90deg,
    rgba(255, 102, 0, 0.3) 180deg,
    transparent 270deg,
    transparent 360deg
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: rotateBorder 4s linear infinite;
}

.category-card:hover .category-bg::before {
  opacity: 1;
}

@keyframes rotateBorder {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.category-bg {
  width: 100%;
  height: 100%;
  background: var(--gradient-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-icon {
  font-size: 5rem;
  opacity: 0.2;
}

.category-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-lg);
  z-index: 2;
}

.category-name {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-xs);
}

.category-count {
  font-size: 0.85rem;
  color: var(--orange-primary);
}

/* ================================
   BENEFITS SECTION
   ================================ */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.benefit-card {
  text-align: center;
  padding: var(--spacing-xl);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-surface);
  transition: transform var(--transition-3d), box-shadow 0.4s ease, border-color 0.3s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.benefit-card:hover {
  border-color: var(--orange-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

.benefit-card:hover .benefit-icon {
  transform: scale(1.15) translateZ(20px);
}

.benefit-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-md);
  background: rgba(255, 102, 0, 0.1);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--orange-primary);
  transition: transform 0.4s ease;
  box-shadow: inset 0 0 20px rgba(255, 102, 0, 0.1);
}

.benefit-title {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-sm);
  font-family: var(--font-primary);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* ================================
   TESTIMONIALS
   ================================ */
.testimonials-slider {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-lg);
}

.testimonial-card {
  background: var(--gradient-card);
  padding: var(--spacing-xl);
  border-radius: var(--radius-surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  transition: transform var(--transition-3d), box-shadow 0.4s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 102, 0, 0.3);
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  font-size: 5rem;
  color: var(--orange-primary);
  opacity: 0.3;
  font-family: Georgia, serif;
  line-height: 1;
  transform: translateZ(-10px);
}

.testimonial-content {
  position: relative;
  z-index: 1;
  padding-top: var(--spacing-lg);
}

.testimonial-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--gray-light-text);
  margin-bottom: var(--spacing-lg);
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.testimonial-avatar {
  width: 50px;
  height: 50px;
  background: var(--gradient-orange);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--white);
}

.testimonial-name {
  font-weight: 600;
  color: var(--white);
}

.testimonial-stars {
  color: var(--orange-primary);
  margin-top: var(--spacing-xs);
}

/* ================================
   CTA SECTION
   ================================ */
.cta-section {
  background: var(--gradient-orange);
  padding: var(--spacing-2xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: pulse 4s ease-in-out infinite;
}

.cta-content {
  position: relative;
  z-index: 1;
}

.cta-title {
  color: var(--white);
  margin-bottom: var(--spacing-md);
}

.cta-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto var(--spacing-xl);
}

.cta-section .btn {
  background: var(--white);
  color: var(--orange-dark);
}

.cta-section .btn:hover {
  background: var(--gray-dark);
  color: var(--white);
}

/* ================================
   FOOTER
   ================================ */
.footer {
  background: var(--gray-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: var(--spacing-2xl) 0 var(--spacing-xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--spacing-2xl);
  margin-bottom: var(--spacing-xl);
}

.footer-brand {
  max-width: 350px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--white);
  margin-bottom: var(--spacing-md);
}

.footer-description {
  color: var(--gray-text);
  margin-bottom: var(--spacing-md);
}

.footer-social {
  display: flex;
  gap: var(--spacing-sm);
}

.social-link {
  width: 45px;
  height: 45px;
  background: var(--gray-medium);
  border-radius: var(--radius-control);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-light-text);
  transition: var(--transition-base);
}

.social-link:hover {
  background: var(--orange-primary);
  color: var(--white);
  transform: translateY(-3px);
}

.footer-title {
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
  font-family: var(--font-primary);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: var(--spacing-sm);
}

.footer-links a {
  color: var(--gray-text);
  font-size: 0.95rem;
}

.footer-links a:hover {
  color: var(--orange-primary);
  padding-left: var(--spacing-xs);
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  color: var(--gray-text);
}

.footer-contact li span:first-child {
  color: var(--orange-primary);
}

/* El icono paso de emoji a SVG (mismo motivo que el engranaje del buscador: el
   refactor e8ae6b8 del 2026-05-21 vacio los <span>). El li es flex con
   align-items: flex-start, asi que sin esto el svg se apoya en la linea base y
   queda desalineado del texto cuando la direccion ocupa dos renglones. */
.footer-contact-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 1.5em;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.footer-copyright {
  color: var(--gray-text);
  font-size: 0.9rem;
}

.footer-payment {
  display: flex;
  gap: var(--spacing-sm);
}

.payment-icon {
  width: 50px;
  height: 35px;
  background: var(--gray-medium);
  border-radius: var(--radius-control);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--gray-text);
}

/* ================================
   PAGE HEADER
   ================================ */
.page-header {
  background: var(--gradient-dark);
  padding: calc(var(--header-clearance) + var(--spacing-2xl)) 0 var(--spacing-2xl);
  text-align: center;
  position: relative;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 30% 50%, rgba(255, 102, 0, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(230, 57, 70, 0.08) 0%, transparent 50%);
}

.page-title {
  position: relative;
  z-index: 1;
  margin-bottom: var(--spacing-sm);
}

.page-subtitle {
  position: relative;
  z-index: 1;
  color: var(--gray-text);
  max-width: 600px;
  margin: 0 auto;
}

/* ================================
   SHOP PAGE
   ================================ */

/* Shop Layout with Sidebar */
.shop-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--spacing-xl);
}

/* Sidebar Filters - Glassmorphism Style */
.shop-sidebar {
  position: sticky;
  top: 100px;
  z-index: 10;
  align-self: start;
  background: rgba(45, 45, 45, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--radius-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.sidebar-scrollable {
  padding: var(--spacing-lg);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-scrollable::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scrollable::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-full);
}

.sidebar-scrollable::-webkit-scrollbar-thumb {
  background: rgba(255, 102, 0, 0.5);
  border-radius: var(--radius-full);
}

.sidebar-scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--orange-primary);
}

/* Sidebar Header (para mobile drawer) */
.sidebar-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--white);
  margin: 0;
}

.sidebar-close {
  background: transparent;
  border: none;
  color: var(--gray-light-text);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  transition: var(--transition-base);
}

.sidebar-close:hover {
  color: var(--orange-primary);
  background: rgba(255, 102, 0, 0.1);
}

/* Mobile Filters Trigger Button */
/* Legacy mobile-filters-trigger - ahora reemplazado por .search-filter-btn */
.mobile-filters-trigger {
  display: none !important;
}

.filter-group {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-group:last-of-type {
  border-bottom: none;
}

/* Filter Section Title (legacy label, kept for compatibility) */
.filter-section-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--orange-primary);
}

/* Filter Section Toggle (replaces redundant title + toggle — acts as interactive header) */
.filter-section-toggle {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 0 var(--spacing-xs) 0 !important;
  margin-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--orange-primary);
  width: 100%;
}

.filter-section-toggle:hover {
  color: var(--orange-primary) !important;
}

.filter-section-toggle .toggle-icon {
  font-size: 0.7rem;
  color: var(--orange-primary);
}

.filter-section-toggle .toggle-label {
  font-size: 0.95rem;
  font-weight: 800;
}

/* Remove wrapper borders when toggle acts as section header */
.category-parent-wrapper:has(.filter-section-toggle) {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.filter-label {
  display: block;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--white);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Search Box */
.search-box {
  position: relative;
}

.search-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  padding-right: 40px;
  background: var(--gray-dark);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--white);
  font-size: 0.9rem;
  transition: var(--transition-base);
}

.search-input:focus {
  outline: none;
  border-color: var(--orange-primary);
  box-shadow: var(--glow-orange-sm);
}

.search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  opacity: 0.5;
  /* Idem: el contenido ahora es un SVG, no un emoji. */
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* Checkbox Group */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* Category Parent-Child Collapsible */
.category-parent-wrapper {
  margin-top: var(--spacing-sm);
  border-top: 1px solid var(--gray-lighter);
  padding-top: var(--spacing-sm);
}

/* Category Parent Top (Todo) - different styling */
.category-parent-top {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
  margin-bottom: var(--spacing-sm);
}

/* Category Divider Line */
.category-divider-line {
  width: 100%;
  height: 1px;
  background: var(--gray-lighter);
  margin: var(--spacing-sm) 0;
}

/* Niños subcategory */
.category-ninos {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--gray-lighter);
}

.category-parent-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-xs) 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 600;
  transition: var(--transition-fast);
}

.category-parent-toggle:hover {
  color: var(--orange-primary);
}

.category-parent-toggle .toggle-icon {
  font-size: 0.7rem;
  transition: transform var(--transition-base);
  color: var(--orange-primary);
}

.category-parent-toggle.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.category-children {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  padding-left: var(--spacing-md);
  overflow: hidden;
  max-height: 2000px;
  transition: max-height var(--transition-base), opacity var(--transition-base);
  padding-bottom: var(--spacing-md);
}

.category-children.collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* "Todo" and "Todas" checkbox styling */
.checkbox-label-todo {
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(255, 102, 0, 0.1);
  border: 1px solid rgba(255, 102, 0, 0.3);
  border-radius: var(--radius-control);
  font-weight: 700;
}

.checkbox-label-todo .todo-label {
  color: var(--orange-primary);
  font-weight: 800;
}

.checkbox-label-todo input:checked + .checkmark + .todo-label {
  color: var(--orange-primary);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  padding: var(--spacing-xs) 0;
  transition: var(--transition-fast);
  color: var(--gray-light-text);
  font-size: 0.9rem;
}

.checkbox-label:hover {
  color: var(--orange-primary);
}

.checkbox-label input[type="checkbox"] {
  position: relative;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--gray-lighter);
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition-base);
  flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:checked {
  background: var(--orange-primary);
  border-color: var(--orange-primary);
}

.checkbox-label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: bold;
}

/* Price Range */
.price-slider {
  margin-bottom: var(--spacing-md);
}

.price-inputs {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.price-input {
  flex: 1;
}

.price-label {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-text);
  margin-bottom: 4px;
}

.price-field {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--gray-dark);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--white);
  font-size: 0.85rem;
  font-family: var(--font-mono);
}

.price-field:focus {
  outline: none;
  border-color: var(--orange-primary);
}

.slider-track {
  position: relative;
  height: 6px;
  background: var(--gray-dark);
  border-radius: var(--radius-full);
  margin: var(--spacing-sm) 0;
}

.slider-fill {
  position: absolute;
  height: 100%;
  background: var(--orange-primary);
  border-radius: var(--radius-full);
  left: 0%;
  right: 100%;
  transition: left 0.1s ease, right 0.1s ease;
}

.slider-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--white);
  border: 3px solid var(--orange-primary);
  border-radius: var(--radius-control);
  top: 50%;
  transform: translateY(-50%);
  cursor: grab;
  left: 0%;
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
  z-index: 2;
  touch-action: none;
}

.slider-thumb#maxThumb {
  left: 100%;
}

.slider-thumb:hover {
  transform: translateY(-50%) scale(1.2);
  box-shadow: 0 0 15px var(--orange-glow);
}

.slider-thumb:active {
  cursor: grabbing;
  transform: translateY(-50%) scale(1.3);
}

.slider-thumb:hover {
  transform: translateY(-50%) scale(1.2);
}

.btn-filter {
  width: 100%;
  padding: var(--spacing-sm);
  background: var(--orange-primary);
  border: none;
  border-radius: var(--radius-control);
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-base);
}

.btn-filter:hover {
  background: var(--orange-hover);
  box-shadow: var(--glow-orange-sm);
}

/* Clear Filters Button */
.btn-clear-filters {
  width: 100%;
  padding: var(--spacing-sm);
  background: transparent;
  border: 1px dashed var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--gray-text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

.btn-clear-filters:hover {
  border-color: var(--red-accent);
  color: var(--red-accent);
}

/* Mobile Filter Toggle */
.mobile-filter-toggle {
  display: none;
  position: fixed;
  bottom: 100px;
  left: 20px;
  z-index: 999;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--orange-primary);
  border: none;
  border-radius: var(--radius-control);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--shadow-xl);
  transition: var(--transition-base);
  gap: var(--spacing-xs);
  align-items: center;
}

.mobile-filter-toggle:hover {
  background: var(--orange-hover);
}

/* Mobile Search Bar - FIXED position (sticks to header) */
.mobile-search-bar {
  display: none;
  padding: 8px var(--spacing-md);
  background: rgba(26, 26, 26, 0.98);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-bottom: 1px solid rgba(255, 102, 0, 0.2);
  position: fixed;
  top: 52px; /* Just below header (header is ~52px on mobile) */
  left: 0;
  right: 0;
  z-index: 998;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  height: 48px;
}

.mobile-search-bar .search-box {
  position: relative;
  display: flex;
  align-items: center;
  height: 32px;
}

.mobile-search-bar .search-input {
  width: 100% !important;
  padding: 6px 36px 6px 40px !important; /* Left padding for filter button, right for search icon */
  background: rgba(45, 45, 45, 0.9);
  border: 1px solid rgba(255, 102, 0, 0.3);
  border-radius: var(--radius-control);
  color: var(--white);
  font-size: 0.9rem;
  transition: var(--transition-base);
  height: 32px;
}

.mobile-search-bar .search-input:focus {
  outline: none;
  border-color: var(--orange-primary);
  box-shadow: 0 0 15px rgba(255, 102, 0, 0.4);
  background: rgba(45, 45, 45, 1);
}

/* Filter Gear Icon - Embedded in Search (LEFT side) */
.search-filter-btn {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
  min-width: 28px;
  height: 28px;
}

.search-filter-btn span {
  font-size: 1.1rem;
  filter: grayscale(0.3);
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange-primary);
}

/* Contador de filtros activos, encima del engranaje. Contesta "por que veo 8
   productos y no 274" sin tener que abrir el cajon. */
.search-filter-count {
  position: absolute;
  top: -3px;
  right: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: var(--radius-control);
  background: var(--orange-primary);
  color: #0d0d0d;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.search-filter-btn:hover span,
.search-filter-btn:active span {
  filter: grayscale(0);
  transform: rotate(90deg);
}

.mobile-search-bar .search-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--orange-primary);
  pointer-events: none;
}

/* Mobile Quick Filters - Horizontal Scrollable Category Bar with Arrow Navigation */
.mobile-quick-filters {
  display: none; /* Solo en móvil */
  align-items: center;
  /* Era `space-between`, que tenia sentido con las dos flechas de deslizar a los
     costados. Sacadas esas, dejaba ~20px muertos contra el borde derecho: el
     ultimo chip visible cortaba antes de llegar y se leia como un error de
     maquetado. Ahora el contenedor de chips ocupa la barra entera. */
  justify-content: flex-start;
  padding: 8px 0;
  background: rgba(26, 26, 26, 0.98);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-bottom: 1px solid rgba(255, 102, 0, 0.15);
  position: fixed;
  top: 100px; /* Below search bar (52px header + 48px search) */
  left: 0;
  right: 0;
  z-index: 997;
}

/* Navigation Arrows - MUST be on sides */
.quick-filter-nav {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-surface);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--orange-primary);
  font-size: 0.9rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  opacity: 0.9;
  margin: 0 8px;
  position: sticky;
  z-index: 10;
}

.quick-filter-nav-left {
  left: 8px;
}

.quick-filter-nav-right {
  right: 8px;
}

.quick-filter-nav:hover {
  background: rgba(255, 102, 0, 0.15);
  border-color: var(--orange-primary);
  opacity: 1;
}

.quick-filter-nav:active {
  background: rgba(255, 102, 0, 0.25);
}

.quick-filter-nav span {
  line-height: 1;
}

/* Quick Filter Scroll Container */
.mobile-quick-filters-scroll {
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 4px;
  scroll-snap-type: x mandatory;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  flex-direction: row;
  white-space: nowrap;
  margin: 0 4px;
  align-items: center;
}

.mobile-quick-filters-scroll::-webkit-scrollbar {
  display: none;
}

/* Mostrar quick filters solo en móvil */
@media (max-width: 768px) {
  .mobile-quick-filters {
    display: flex;
  }
}

/* Quick Filter Separator - Vertical divider between categories and brands */
.quick-filter-separator {
  flex-shrink: 0;
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, transparent, rgba(255, 102, 0, 0.4), transparent);
  margin: 0 4px;
  align-self: center;
}

/* Quick Filter Chips - Bigger, "gorditos" buttons */
.quick-filter-chip {
  scroll-snap-align: start;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(45, 45, 45, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-control);
  color: var(--gray-light-text);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  height: 44px;
  /* Era `min-width: 100px`. Con 10px 18px de padding, una palabra corta como
     TODO (4 letras, ~36px de texto) quedaba nadando en una pildora de 100px:
     el hueco a los costados se leia como un error de maquetado, no como diseno.
     Y en una barra que se desliza, el ancho es el recurso escaso. El area tactil
     ya la garantiza `height: 44px`, no el ancho. Queda un piso chico para
     etiquetas de una o dos letras. */
  min-width: 64px;
}

/* Parent Category Chip - with arrow */
.quick-filter-parent {
  background: rgba(255, 102, 0, 0.1);
  border-color: rgba(255, 102, 0, 0.3);
}

.parent-arrow {
  font-size: 0.7rem;
  margin-left: 4px;
  transition: transform var(--transition-base);
  color: var(--orange-primary);
}

.quick-filter-parent.collapsed .parent-arrow {
  transform: rotate(-90deg);
}

.quick-filter-chip span:not(.parent-arrow) {
  font-size: 1.1rem;
  filter: grayscale(0.3);
  transition: var(--transition-fast);
  display: inline-block;
}

.quick-filter-chip:hover span:not(.parent-arrow),
.quick-filter-chip.active span:not(.parent-arrow) {
  filter: grayscale(0);
  transform: scale(1.1);
}

.quick-filter-chip:hover {
  background: rgba(45, 45, 45, 0.95);
  border-color: rgba(255, 102, 0, 0.3);
}

.quick-filter-chip.active {
  background: rgba(255, 102, 0, 0.25);
  border-color: var(--orange-primary);
  color: var(--orange-primary);
  box-shadow: 0 2px 12px rgba(255, 102, 0, 0.3);
}

.quick-filter-parent.active {
  background: rgba(255, 102, 0, 0.3);
  border-color: var(--orange-primary);
}

/* Divider between categories and brands in mobile filters */
.mobile-filter-divider {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, transparent, rgba(255, 102, 0, 0.5), transparent);
  margin: 0 var(--spacing-xs);
  flex-shrink: 0;
  align-self: center;
}

.mobile-quick-filters-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
  scroll-snap-type: x mandatory;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  white-space: nowrap;
}

.mobile-quick-filters-scroll::-webkit-scrollbar {
  display: none;
}

.mobile-filter-chip {
  scroll-snap-align: start;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  background: rgba(45, 45, 45, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-control);
  color: var(--gray-light-text);
  font-size: 0.65rem;
  cursor: pointer;
  transition: var(--transition-fast);
  min-width: fit-content;
  height: 28px;
}

.mobile-filter-chip .chip-icon {
  font-size: 1rem;
  line-height: 1;
}

.mobile-filter-chip .chip-label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.mobile-filter-chip {
  scroll-snap-align: start;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(45, 45, 45, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-control);
  color: var(--gray-light-text);
  font-size: 0.7rem;
  cursor: pointer;
  transition: var(--transition-fast);
  min-width: 70px;
}

.mobile-quick-filters-scroll::-webkit-scrollbar {
  display: none;
}

.mobile-filter-chip:hover,
.mobile-filter-chip.active {
  background: rgba(255, 102, 0, 0.2);
  border-color: var(--orange-primary);
  color: var(--orange-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 102, 0, 0.3);
}

.mobile-filter-chip:active {
  transform: translateY(0) scale(0.98);
}

/* Shop Content Area */
.shop-content {
  min-width: 0;
}

/* ========================================
   SECCIÓN TOP SELECCIONES / RECOMENDADOS
   ======================================== */
.recomendados-section {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.08) 0%, rgba(230, 57, 70, 0.05) 100%);
  border-radius: var(--radius-surface);
  border: 1px solid rgba(255, 102, 0, 0.15);
}

.recomendados-header {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.recomendados-title {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--white);
  margin-bottom: 4px;
}

.recomendados-subtitle {
  font-size: 0.85rem;
  color: var(--gray-text);
  margin: 0;
}

/* Recomendados Carousel - Same styling as product cards */
.recomendados-carousel-wrapper {
  position: relative;
  margin: var(--spacing-lg) 0;
}

.recomendados-carousel {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox - hide scrollbar */
  padding: var(--spacing-sm);
  cursor: grab;
}

.recomendados-carousel:active {
  cursor: grabbing;
}

.recomendados-carousel::-webkit-scrollbar {
  display: none; /* Chrome/Safari - hide scrollbar */
}

/* Navigation arrows */
.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--gray-dark);
  border: 2px solid var(--orange-primary);
  color: var(--orange-primary);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.carousel-nav-btn:hover {
  background: var(--orange-primary);
  color: var(--white);
  box-shadow: 0 0 20px var(--orange-glow);
}

.carousel-nav-btn.prev {
  left: -22px;
}

.carousel-nav-btn.next {
  right: -22px;
}

/* Desktop only - show nav arrows */
@media (min-width: 769px) {
  .recomendados-carousel-wrapper:hover .carousel-nav-btn {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Mobile - hide arrows, use swipe */
@media (max-width: 768px) {
  .carousel-nav-btn {
    display: none;
  }

  .recomendados-carousel {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .recomendado-card {
    scroll-snap-align: center;
  }
}

/* Card styling - identical to product-card */
.recomendado-card {
  flex: 0 0 auto;
  width: 280px;
  scroll-snap-align: start;
  background: var(--gradient-card);
  border-radius: var(--radius-surface);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform var(--transition-3d), box-shadow 0.4s ease, border-color 0.3s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
  display: flex;
  flex-direction: column;
}

.recomendado-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 102, 0, 0.5);
}

.recomendado-badge {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  background: var(--gradient-orange);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-control);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(255, 102, 0, 0.4);
}

.recomendado-image {
  width: 100%;
  height: 200px;
  background: linear-gradient(145deg, var(--gray-medium), var(--gray-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: var(--spacing-md);
  transition: transform 0.4s ease;
}

.recomendado-card:hover .recomendado-image {
  transform: translateZ(20px);
}

.recomendado-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  transition: filter 0.4s ease;
}

.recomendado-card:hover .recomendado-image img {
  filter: drop-shadow(0 8px 16px rgba(255, 102, 0, 0.3));
}

.recomendado-icon {
  font-size: 4rem;
  opacity: 0.3;
  color: var(--gray-lighter);
}

.recomendado-info {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
}

.recomendado-category {
  font-size: 0.65rem;
  color: var(--orange-primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin: 0;
}

.recomendado-name {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recomendado-price-wrapper {
  margin: 0;
}

.recomendado-price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--red-accent);
  text-shadow: var(--glow-red);
  display: block;
}

.recomendado-price-old {
  font-size: 0.9rem;
  color: var(--gray-text);
  text-decoration: line-through;
  margin-left: var(--spacing-xs);
}

.recomendado-actions {
  display: flex;
  gap: var(--spacing-xs);
  margin-top: auto;
  padding-top: var(--spacing-xs);
}

.recomendado-btn {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.8rem;
  justify-content: center;
}

.recomendados-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

.recomendado-card {
  position: relative;
  background: var(--gradient-card);
  border-radius: var(--radius-surface);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: var(--transition-base);
}

.recomendado-card:hover {
  transform: translateY(-4px);
  border-color: var(--orange-primary);
  box-shadow: 0 8px 24px rgba(255, 102, 0, 0.2);
}

.recomendado-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--gradient-orange);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--radius-control);
  z-index: 10;
}

.recomendado-card:nth-child(2) .recomendado-badge {
  background: var(--red-accent);
}

.recomendado-card:nth-child(3) .recomendado-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.recomendado-image {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}

.recomendado-icon {
  font-size: 4rem;
  opacity: 0.8;
}

.recomendado-info {
  padding: var(--spacing-md);
  text-align: center;
}

.recomendado-name {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--spacing-xs);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recomendado-price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--orange-primary);
  margin-bottom: var(--spacing-sm);
}

.recomendado-btn {
  width: 100%;
  font-size: 0.75rem !important;
  padding: var(--spacing-xs) var(--spacing-sm) !important;
}

/* ========================================
   BANNER DE PROMOCIONES
   ======================================== */
.promo-banner {
  display: block;
  margin: var(--spacing-xl) 0;
  text-decoration: none;
}

.promo-banner-content {
  background: linear-gradient(135deg, var(--orange-primary) 0%, var(--red-accent) 100%);
  border-radius: var(--radius-surface);
  padding: var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 32px rgba(255, 102, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.promo-banner-content::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  border-radius: var(--radius-surface);
}

.promo-banner-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.promo-banner-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 900;
}

.promo-banner-subtitle {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.promo-banner-btn {
  background: var(--white);
  color: var(--orange-primary);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-control);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: var(--transition-base);
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.promo-banner-btn:hover {
  transform: translateY(-1px);
}

/* Top Bar */
.shop-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.results-count {
  font-size: 0.9rem;
  color: var(--gray-text);
}

.results-count span {
  color: var(--orange-primary);
  font-weight: 600;
}

.sort-options {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.sort-options label {
  font-size: 0.9rem;
  color: var(--gray-text);
}

.sort-select {
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--gray-dark);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--white);
  font-size: 0.9rem;
  cursor: pointer;
  font-family: var(--font-primary);
}

.sort-select:focus {
  outline: none;
  border-color: var(--orange-primary);
}

/* Old filter buttons - keep for compatibility */
.shop-filters {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
  justify-content: center;
}

.filter-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: 1px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--gray-light-text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition-base);
}

.filter-btn:hover,
.filter-btn.active {
  border-color: var(--orange-primary);
  color: var(--orange-primary);
  box-shadow: var(--glow-orange-sm);
}

/* ================================
   PRODUCT DETAIL PAGE
   ================================ */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
  align-items: start;
}

.product-gallery {
  background: var(--gradient-card);
  border-radius: var(--radius-surface);
  padding: var(--spacing-xl);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.product-main-image {
  width: 100%;
  height: 450px;
  background: linear-gradient(145deg, var(--gray-medium), var(--gray-dark));
  border-radius: var(--radius-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

.product-thumbnails {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
}

.thumbnail {
  width: 80px;
  height: 80px;
  background: var(--gray-medium);
  border-radius: var(--radius-control);
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition-base);
}

.thumbnail:hover,
.thumbnail.active {
  border-color: var(--orange-primary);
}

.product-detail-info {
  padding: var(--spacing-lg);
}

.product-detail-name {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-sm);
}

.product-detail-price {
  font-size: 2.5rem;
  color: var(--red-accent);
  text-shadow: var(--glow-red);
  margin-bottom: var(--spacing-lg);
  font-family: var(--font-display);
}

.product-detail-description {
  color: var(--gray-text);
  margin-bottom: var(--spacing-lg);
  line-height: 1.8;
}

.product-detail-features {
  list-style: none;
  margin-bottom: var(--spacing-lg);
}

.product-detail-features li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  color: var(--gray-light-text);
}

.product-detail-features li::before {
  content: '';
  color: var(--orange-primary);
  font-weight: 700;
}

.product-detail-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.size-selector {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.size-btn {
  width: 50px;
  height: 50px;
  background: var(--gray-medium);
  border: 2px solid transparent;
  border-radius: var(--radius-control);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-base);
}

.size-btn:hover,
.size-btn.active {
  border-color: var(--orange-primary);
  box-shadow: var(--glow-orange-sm);
}

/* ================================
   FAQ PAGE
   ================================ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: var(--gradient-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-surface);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}

.faq-question {
  padding: var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: var(--transition-base);
}

.faq-question:hover {
  background: rgba(255, 102, 0, 0.05);
}

.faq-question h4 {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.faq-toggle {
  width: 30px;
  height: 30px;
  background: var(--orange-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
  transition: var(--transition-base);
}

.faq-item.active .faq-toggle {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  color: var(--gray-text);
  line-height: 1.8;
  display: none;
}

.faq-item.active .faq-answer {
  display: block;
}

/* ================================
   CONTACT PAGE
   ================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
}

.contact-form {
  background: var(--gradient-card);
  padding: var(--spacing-xl);
  border-radius: var(--radius-surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: var(--spacing-md);
  background: var(--gray-dark);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--white);
  font-family: var(--font-primary);
  font-size: 1rem;
  transition: var(--transition-base);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--orange-primary);
  box-shadow: var(--glow-orange-sm);
}

.form-textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-info-card {
  background: var(--gradient-card);
  padding: var(--spacing-xl);
  border-radius: var(--radius-surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: var(--spacing-md);
}

.contact-info-card h4 {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--spacing-md);
  color: var(--orange-primary);
}

/* Map Container */
.map-container {
  width: 100%;
  height: 450px;
  background: var(--gray-dark);
  position: relative;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  filter: grayscale(0.2) contrast(1.1);
  transition: filter 0.3s ease;
}

.map-container iframe:hover {
  filter: grayscale(0) contrast(1);
}

/* ================================
   FLOATING WHATSAPP BUTTON / STICKY MOBILE CTA
   ================================ */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: transparent;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #25D366;
  font-size: 2.5rem;
  z-index: 999;
  transition: var(--transition-base);
  text-decoration: none;
}

.whatsapp-float:hover {
  color: #25D366;
  text-shadow: 0 0 20px rgba(37, 211, 101, 0.8);
  transform: scale(1.05);
}

.whatsapp-float .whatsapp-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(37, 211, 101, 0.5));
}

/* Sticky Mobile CTA Bar - Desktop oculto */
/* WhatsApp Sticky Bar - Compact & Subtle */
.whatsapp-sticky-bar {
  display: none;
}

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

  .whatsapp-sticky-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(37, 211, 101, 0.95);
    backdrop-filter: blur(10px);
    padding: 8px 12px;
    z-index: 999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .whatsapp-sticky-bar .sticky-icon {
    font-size: 1.2rem;
  }

  .whatsapp-sticky-bar .sticky-text {
    color: var(--white);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: none;
    flex: 1;
    white-space: nowrap;
  }

  .whatsapp-sticky-bar .sticky-cta {
    background: var(--white);
    color: #25D366;
    padding: 6px 12px;
    border-radius: var(--radius-control);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: none;
    white-space: nowrap;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideUpDrawer {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Table Responsive */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--spacing-md);
}

.table-responsive table {
  min-width: 100%;
  border-collapse: collapse;
}

.size-guide-table {
  width: 100%;
  font-size: 0.9rem;
}

.size-guide-table th,
.size-guide-table td {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

.size-guide-table th {
  background: rgba(255, 102, 0, 0.2);
  color: var(--orange-primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.size-guide-table td {
  color: var(--gray-light-text);
}

.size-guide-table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

/* Sticky WhatsApp Bar for Shop Page (Mobile) */

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

@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px var(--orange-glow);
  }
  50% {
    box-shadow: 0 0 40px var(--orange-glow);
  }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: var(--transition-slow);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Size Guide Modal - above product modal and cart */
.size-guide-modal {
  z-index: 4000 !important;
}

/* ================================
   PRODUCT MODAL / LIGHTBOX
   ================================ */
.product-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-base);
  padding: var(--spacing-md);
  overflow-y: auto;
}

.product-modal.active {
  opacity: 1;
  visibility: visible;
}

.product-modal-content {
  background: var(--gradient-card);
  border-radius: var(--radius-surface);
  border: 1px solid rgba(255, 102, 0, 0.3);
  max-width: 1100px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  box-shadow: var(--shadow-xl), 0 0 60px rgba(255, 102, 0, 0.2);
  position: relative;
  transform: scale(0.9);
  transition: var(--transition-base);
}

.product-modal.active .product-modal-content {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 45px;
  height: 45px;
  background: var(--gray-dark);
  border: 2px solid var(--gray-lighter);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10;
  transition: var(--transition-base);
}

.modal-close:hover {
  background: var(--red-accent);
  border-color: var(--red-accent);
  transform: rotate(90deg);
}

.modal-image-container {
  background: var(--gray-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  position: relative;
  gap: var(--spacing-md);
  min-height: 400px;
}

.modal-image {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: var(--radius-surface);
  transition: opacity var(--transition-fast);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
}

.modal-image-placeholder {
  font-family: var(--font-display);
  font-size: 8rem;
  color: var(--gray-lighter);
  opacity: 0.3;
}

/* Modal Image Thumbnails */
.modal-thumbnails {
  display: flex;
  gap: var(--spacing-xs);
  overflow-x: auto;
  max-width: 100%;
  padding: var(--spacing-xs);
}

.modal-thumbnail {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-control);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition-fast);
  flex-shrink: 0;
  background: var(--gray-medium);
}

.modal-thumbnail:hover,
.modal-thumbnail.active {
  border-color: var(--orange-primary);
  transform: scale(1.05);
}

.modal-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-lighter);
  background: var(--gray-dark);
}

/* Image Preview Modal */
.image-preview-modal .image-preview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 90vh;
  padding: var(--spacing-lg);
}

.image-preview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.image-preview-main {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-surface);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.image-preview-thumbnails {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  justify-content: center;
}

.image-preview-thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-control);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition-fast);
  opacity: 0.6;
}

.image-preview-thumb:hover,
.image-preview-thumb.active {
  border-color: var(--orange-primary);
  opacity: 1;
}

.image-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-product-info {
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal-product-category {
  font-size: 0.85rem;
  color: var(--orange-primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 0;
}

.modal-product-name {
  font-size: 1.8rem;
  color: var(--white);
  margin-bottom: var(--spacing-xs);
  font-family: var(--font-primary);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}

.modal-product-price {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--red-accent);
  text-shadow: var(--glow-red);
  margin-bottom: var(--spacing-md);
  display: block;
}

.modal-product-description {
  color: var(--gray-text);
  line-height: 1.8;
  margin-bottom: var(--spacing-lg);
}

.modal-product-sizes {
  margin-bottom: var(--spacing-lg);
}

.modal-product-sizes h4 {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: var(--white);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.modal-sizes-list {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.modal-size-tag {
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--gray-dark);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.modal-size-tag:hover,
.modal-size-tag.active {
  border-color: var(--orange-primary);
  background: rgba(255, 102, 0, 0.1);
  color: var(--orange-primary);
}

/* Modal Size Select (dropdown) */
.modal-size-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--gray-dark);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--white);
  font-size: 1rem;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.modal-size-select:focus {
  outline: none;
  border-color: var(--orange-primary);
}

.modal-product-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.modal-product-features {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-product-features h4 {
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--white);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}

.modal-product-features ul {
  list-style: none;
  padding: 0;
}

.modal-product-features li {
  padding: var(--spacing-xs) 0;
  color: var(--gray-text);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.9rem;
}

.modal-product-features li::before {
  content: '';
  color: var(--orange-primary);
  font-weight: 700;
}

.modal-badges {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--gray-text);
  font-size: 0.85rem;
}

/* Size Guide Button */
.size-guide-btn {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.size-guide-btn:hover {
  background: rgba(255, 102, 0, 0.1);
  border-color: var(--orange-hover);
}

/* Size Guide Modal */
.size-guide-modal .modal-product-info {
  padding: var(--spacing-lg);
}

.size-guide-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--gray-dark);
  border-radius: var(--radius-surface);
  overflow: hidden;
}

.size-guide-table th,
.size-guide-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.size-guide-table th {
  background: rgba(255, 102, 0, 0.15);
  color: var(--orange-primary);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.size-guide-table td {
  color: var(--gray-light-text);
  font-size: 0.9rem;
}

.size-guide-table tr:last-child td {
  border-bottom: none;
}

.size-guide-table tr:hover td {
  background: rgba(255, 102, 0, 0.05);
}

/* Modal Responsive */
@media (max-width: 900px) {
  .product-modal-content {
    grid-template-columns: 1fr;
    max-height: 95vh;
  }

  .modal-image-container {
    padding: var(--spacing-lg);
  }

  .modal-image {
    max-height: 300px;
  }

  .modal-thumbnail {
    width: 50px;
    height: 50px;
  }

  .modal-product-name {
    font-size: 1.5rem;
  }

  .modal-product-price {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .modal-close {
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 40px;
    height: 40px;
  }

  .modal-product-info {
    padding: var(--spacing-md);
  }

  .modal-image-container {
    padding: var(--spacing-md);
  }
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-detail {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* Mobile Header - Compact: Logo | WhatsApp | Menu */
  .nav {
    padding: var(--spacing-xs) var(--spacing-sm);
    gap: var(--spacing-xs);
  }

  .logo {
    font-size: 1.2rem;
  }

  .logo-image {
    height: 35px;
  }

  /* Hide nav links by default, show in drawer */
  .nav-links {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--gray-dark);
    flex-direction: column;
    padding: var(--spacing-lg);
    gap: var(--spacing-md);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
    border-bottom: 1px solid rgba(255, 102, 0, 0.1);
    z-index: 999;
  }

  .nav-links.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .menu-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    padding: var(--spacing-xs);
  }

  .menu-toggle span {
    width: 20px;
    height: 2px;
  }

  /* Hide WhatsApp button in nav-cta on mobile (use separate one) */
  .nav-cta .btn-whatsapp {
    display: none;
  }

  .nav-cta {
    gap: var(--spacing-xs);
  }

  .hero-stats {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .products-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding: 0 var(--spacing-sm);
    max-width: 100%;
    overflow: hidden;
    width: 100%;
  }

  /* Category Dividers - Mobile */
  .category-divider {
    padding: var(--spacing-md) 0;
    margin: var(--spacing-md) 0;
  }

  .category-divider-line {
    max-width: 80px;
  }

  .category-divider-content {
    padding: 0 var(--spacing-xs);
    gap: 4px;
  }

  .category-divider-icon {
    font-size: 1rem;
  }

  .category-divider-title {
    font-size: 0.95rem;
  }

  .product-card {
    border-radius: var(--radius-surface);
    max-width: 100%;
    overflow: hidden;
  }

  .product-image {
    max-width: 100%;
    overflow: hidden;
  }

  .product-image img {
    max-width: 100%;
    object-fit: contain;
  }

  .product-image {
    height: 200px;
  }

  .product-name {
    font-size: 1rem;
  }

  .product-price {
    font-size: 1.3rem;
  }

  .categories-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .testimonials-slider {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .shop-layout {
    grid-template-columns: 1fr;
    gap: 0;
    min-width: 0;
    max-width: 100%;
  }

  .shop-content {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    width: 100%;
  }

  /* Add padding to shop section to account for FIXED search bar + quick filters bar */
  /* Header (52px) + Search bar (48px) + Quick filters (~40px) = ~140px total */
  body.shop-page .section {
    padding-top: 145px;
  }

  /* Only show mobile search/filters on shop page */
  body.shop-page .mobile-search-bar {
    display: block;
  }

  body.shop-page .mobile-quick-filters {
    display: flex;
  }

  /* Sidebar Header - Visible only on mobile */
  .sidebar-header {
    display: flex;
  }

  /* Search filter button visible on mobile */
  .search-filter-btn {
    display: flex;
  }

  .shop-sidebar {
    display: none;
  }

  .shop-sidebar.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    max-height: 70vh;
    max-width: 100%;
    z-index: 1001;
    border-radius: var(--radius-surface);
    top: auto;
    animation: slideUpDrawer 0.3s ease-out forwards;
  }

  .shop-sidebar.active .sidebar-scrollable {
    max-height: calc(85vh - 60px);
    overflow-y: auto;
    padding: var(--spacing-md);
  }

  .mobile-filter-toggle {
    display: flex;
  }

  .shop-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .shop-overlay.active {
    display: block;
  }

  /* Padding for sticky WhatsApp bar on mobile shop page */
  body.shop-page {
    padding-bottom: 70px;
  }

  /* Recomendados Section - Mobile */
  .recomendados-section {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
  }

  .recomendados-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .recomendado-card {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .recomendado-badge {
    position: static;
    margin-bottom: var(--spacing-xs);
  }

  .recomendado-image {
    height: 80px;
    width: 80px;
    flex-shrink: 0;
    margin-right: var(--spacing-md);
  }

  .recomendado-icon {
    font-size: 2.5rem;
  }

  .recomendado-info {
    flex: 1;
    text-align: left;
    padding: 0;
  }

  .recomendado-name {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-xs);
  }

  .recomendado-price {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-xs);
  }

  .recomendado-btn {
    width: auto;
    display: inline-block;
  }

  /* Promo Banner - Mobile */
  .promo-banner-content {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
  }

  .promo-banner-text {
    align-items: center;
  }

  .promo-banner-title {
    font-size: 1.2rem;
  }

  .promo-banner-subtitle {
    font-size: 0.85rem;
  }

  .promo-banner-btn {
    width: 100%;
  }

  .shop-filters {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: var(--spacing-sm);
  }

  .filter-btn {
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 16px;
    /* Prevenir zoom indeseado */
    touch-action: manipulation;
  }

  body {
    /* Prevenir overflow horizontal */
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Prevenir que elementos grandes causen overflow */
  img, video, canvas {
    max-width: 100%;
    height: auto;
  }

  .container {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Shop layout specific - prevent any overflow */
  .shop-layout .container {
    padding: 0 var(--spacing-sm);
  }


  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  /* El carrusel de marcas mide menos en celular (ver media query de
     .hero-brands-marquee); la reserva de aire baja con el. */
  .hero {
    padding-bottom: 64px;
  }

  .btn {
    width: 100%;
  }

  .product-actions {
    flex-direction: column;
  }

  .size-selector {
    justify-content: center;
  }

  /* Product Cards - Larger and More Readable */
  .product-card {
    border-radius: var(--radius-surface);
    overflow: hidden;
  }

  .product-image {
    height: 220px;
    padding: var(--spacing-lg);
  }

  .product-name {
    font-size: 1.1rem;
    line-height: 1.4;
    font-weight: 600;
  }

  .product-price {
    font-size: 1.5rem;
    font-weight: 700;
  }

  .product-category {
    font-size: 0.75rem;
    font-weight: 600;
  }

  .card-size-select {
    font-size: 1rem;
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .product-actions .btn {
    padding: var(--spacing-md);
    font-size: 1rem;
    font-weight: 600;
  }

  /* Mobile search and filters */
  .mobile-search-bar {
    padding: var(--spacing-sm);
  }

  .mobile-search-bar .search-input {
    font-size: 16px; /* Prevenir zoom en iOS */
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Safe area insets for notched devices */
  .mobile-search-bar {
    padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
    padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
  }

  .mobile-quick-filters {
    padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
    padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
  }

  .mobile-filter-chip {
    min-width: 70px;
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .mobile-filter-chip .chip-icon {
    font-size: 1.5rem;
  }

  .mobile-filter-chip .chip-label {
    font-size: 0.75rem;
    font-weight: 600;
  }

  /* Slider de precio en móvil */
  .slider-thumb {
    width: 20px;
    height: 20px;
    border-width: 3px;
  }

  .price-field {
    font-size: 14px;
  }
}

/* ================================
   SCROLLBAR CUSTOM
   ================================ */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--gray-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--gray-lighter);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--orange-primary);
}

/* ================================
   SELECTION
   ================================ */
::selection {
  background: var(--orange-primary);
  color: var(--white);
}

/* ================================
   SIZE GUIDE (sizes.html)
   ================================ */

.intro-text {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.intro-text .lead-text {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--gray-light-text);
  margin-bottom: var(--spacing-md);
}

.intro-text .hint-text {
  font-size: 1rem;
  color: var(--orange-primary);
  background: rgba(255, 102, 0, 0.1);
  padding: var(--spacing-md);
  border-radius: var(--radius-surface);
  border-left: 3px solid var(--orange-primary);
}

.size-guide-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--orange-primary);
}

.size-guide-icon {
  font-size: 3rem;
}

.size-guide-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  letter-spacing: 3px;
  color: var(--white);
  text-transform: uppercase;
}

.size-guide-content {
  max-width: 1000px;
  margin: 0 auto;
}

.size-intro {
  background: var(--gray-medium);
  padding: var(--spacing-lg);
  border-radius: var(--radius-surface);
  margin-bottom: var(--spacing-xl);
}

.size-intro h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 2px;
  color: var(--orange-primary);
  margin-bottom: var(--spacing-md);
}

.measurement-steps {
  list-style: none;
  counter-reset: step-counter;
}

.measurement-steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) 0;
}

.measurement-steps li:last-child {
  margin-bottom: 0;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--gradient-orange);
  color: var(--white);
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.step-text {
  color: var(--gray-light-text);
  line-height: 1.7;
  padding-top: 0.3rem;
}

.size-chart {
  margin-bottom: var(--spacing-xl);
}

.size-chart h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
}

.size-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-surface);
  border: 1px solid var(--gray-light);
}

.size-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--gray-dark);
}

.size-table thead {
  background: var(--gradient-orange);
}

.size-table thead th {
  padding: var(--spacing-md);
  text-align: center;
  font-weight: 600;
  color: var(--white);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  white-space: nowrap;
}

.size-table tbody tr {
  border-bottom: 1px solid var(--gray-light);
  transition: background var(--transition-fast);
}

.size-table tbody tr:hover {
  background: rgba(255, 102, 0, 0.1);
}

.size-table tbody tr:last-child {
  border-bottom: none;
}

.size-table tbody td {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--gray-light-text);
}

.size-table tbody td strong {
  color: var(--orange-primary);
  font-size: 1.1rem;
}

.fit-tips {
  background: rgba(255, 102, 0, 0.05);
  border: 1px solid rgba(255, 102, 0, 0.3);
  border-radius: var(--radius-surface);
  padding: var(--spacing-lg);
}

.fit-tips h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: var(--orange-primary);
  margin-bottom: var(--spacing-md);
}

.fit-tips ul {
  list-style: none;
  padding-left: 0;
}

.fit-tips li {
  position: relative;
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  line-height: 1.7;
  color: var(--gray-light-text);
}

.fit-tips li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--orange-primary);
  font-weight: 700;
}

.fit-tips li:last-child {
  margin-bottom: 0;
}

/* Protecciones Grid */
.protecciones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.proteccion-card {
  background: var(--gray-medium);
  padding: var(--spacing-lg);
  border-radius: var(--radius-surface);
  border: 1px solid var(--gray-light);
  transition: all var(--transition-base);
}

.proteccion-card:hover {
  border-color: var(--orange-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-orange);
}

.proteccion-card h4 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 1px;
  color: var(--white);
  margin-bottom: var(--spacing-md);
}

.proteccion-card p {
  color: var(--gray-light-text);
  font-size: 0.95rem;
  margin-bottom: var(--spacing-sm);
}

.proteccion-card ul {
  list-style: none;
  padding-left: 0;
}

.proteccion-card ul li {
  padding: var(--spacing-xs) 0;
  color: var(--gray-light-text);
  font-size: 0.9rem;
}

.proteccion-card ul li strong {
  color: var(--orange-primary);
}

/* Responsive Size Guide */
@media (max-width: 768px) {
  .size-guide-header {
    flex-direction: column;
    text-align: center;
  }

  .size-guide-icon {
    font-size: 2.5rem;
  }

  .size-guide-title {
    font-size: 2rem;
  }

  .size-intro {
    padding: var(--spacing-md);
  }

  .measurement-steps li {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .step-number {
    margin-bottom: var(--spacing-sm);
  }

  .size-table-wrapper {
    font-size: 0.85rem;
  }

  .size-table thead th,
  .size-table tbody td {
    padding: var(--spacing-sm);
  }

  .protecciones-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================
   PRODUCT DETAIL PAGE (product.html)
   ================================ */

/* Breadcrumb */
.breadcrumb {
  padding: var(--spacing-md) 0;
  background: var(--gray-medium);
  border-bottom: 1px solid var(--gray-light);
}

.breadcrumb .container {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--gray-light-text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--orange-primary);
}

.breadcrumb-separator {
  color: var(--gray-lighter);
}

.breadcrumb-current {
  color: var(--white);
  font-weight: 500;
  font-size: 0.9rem;
}

/* Product Detail Layout */
.product-detail-layout {
  max-width: 1400px;
  margin: 0 auto;
}

/* Loading & Error States */
.product-loading,
.product-error {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-md);
}

.product-loading p,
.product-error p {
  color: var(--gray-light-text);
  margin: var(--spacing-md) 0 var(--spacing-lg);
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid var(--gray-light);
  border-top-color: var(--orange-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--spacing-md);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.product-error h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--white);
  margin-bottom: var(--spacing-sm);
}

/* Product Detail Grid */
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
  align-items: start;
}

/* Product Gallery */
.product-detail-gallery {
  position: sticky;
  top: 100px;
}

.main-image-container {
  position: relative;
  background: var(--gray-medium);
  border-radius: var(--radius-surface);
  overflow: hidden;
  margin-bottom: var(--spacing-md);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--transition-slow);
}

.product-main-img:hover {
  transform: scale(1.05);
}

.product-image-placeholder-large {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gray-lighter);
  background: var(--gray-dark);
  width: 100%;
  height: 100%;
  position: absolute;
}

.product-detail-badge {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  background: var(--gradient-orange);
  color: var(--white);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-control);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 10;
}

.thumbnail-container {
  display: flex;
  gap: var(--spacing-sm);
  overflow-x: auto;
}

.thumbnail {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-control);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition-fast);
  flex-shrink: 0;
}

.thumbnail:hover,
.thumbnail.active {
  border-color: var(--orange-primary);
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product Content */
.product-detail-content {
  padding: var(--spacing-md);
}

/* Brand Badge */
.product-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: var(--gray-medium);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-control);
  margin-bottom: var(--spacing-md);
  font-size: 0.9rem;
  color: var(--gray-light-text);
}

.brand-icon {
  font-size: 1.2rem;
}

.brand-name {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Category */
.product-detail-category {
  display: inline-block;
  color: var(--orange-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--spacing-sm);
}

/* Title */
.product-detail-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  letter-spacing: 2px;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

/* Price */
.product-detail-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--orange-primary);
  margin-bottom: var(--spacing-xl);
  text-shadow: 0 0 30px rgba(255, 102, 0, 0.3);
}

/* Sizes Section */
.product-sizes-section {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--gray-medium);
  border-radius: var(--radius-surface);
}

.sizes-title {
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--white);
  margin-bottom: var(--spacing-md);
}

.product-size-selector {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.size-btn-product {
  background: var(--gray-dark);
  border: 2px solid var(--gray-light);
  color: var(--white);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-control);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.size-btn-product:hover {
  border-color: var(--orange-primary);
}

.size-btn-product.active {
  background: var(--orange-primary);
  border-color: var(--orange-primary);
  color: #0A0A0A;
}

.size-guide-link {
  font-size: 0.9rem;
  color: var(--gray-text);
}

.size-guide-link a {
  color: var(--orange-primary);
  text-decoration: none;
}

.size-guide-link a:hover {
  text-decoration: underline;
}

/* Description Section */
.product-description-section {
  margin-bottom: var(--spacing-xl);
}

.description-title,
.features-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 1px;
  color: var(--white);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
}

.description-text {
  color: var(--gray-light-text);
  line-height: 1.8;
  font-size: 1rem;
}

/* Features Section */
.product-features-section {
  margin-bottom: var(--spacing-xl);
}

.features-list {
  list-style: none;
  padding-left: 0;
}

.features-list li {
  position: relative;
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  color: var(--gray-light-text);
  line-height: 1.7;
}

.features-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--orange-primary);
  font-weight: 700;
}

/* Actions Section */
.product-actions-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

/* Trust Badges */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--gray-light);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--gray-light-text);
  font-size: 0.9rem;
}

.trust-icon {
  font-size: 1.2rem;
}

/* Related Products */
#relatedProducts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

/* Escritorio: la foto ocupaba una columna 1fr (50% del contenedor, hasta
   ~650px de alto por ser aspect-ratio:1) y se comia media pantalla. En
   movil no se toca nada (esta regla es min-width:1025px, arriba del
   breakpoint que ya apila el grid en 1 columna). object-fit:contain
   (ya estaba en .product-main-img) hace que la foto no se recorte al
   quedar mas baja que ancha. 2026-09-21. */
@media (min-width: 1025px) {
  .product-detail-grid {
    grid-template-columns: minmax(0, 560px) 1fr;
  }

  .product-detail-gallery {
    max-width: 560px;
  }

  .main-image-container {
    max-height: 520px;
  }
}

/* Responsive Product Detail */
@media (max-width: 1024px) {
  .product-detail-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .product-detail-gallery {
    position: static;
  }

  .product-detail-title {
    font-size: 2rem;
  }

  .product-detail-price {
    font-size: 1.7rem;
  }
}

@media (max-width: 768px) {
  .product-detail-title {
    font-size: 1.7rem;
  }

  .product-detail-price {
    font-size: 1.5rem;
  }

  .main-image-container {
    aspect-ratio: 4/3;
  }

  .product-image-placeholder-large {
    font-size: 5rem;
  }

  .thumbnail {
    width: 60px;
    height: 60px;
  }

  .trust-badges {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .product-detail-title {
    font-size: 1.4rem;
  }

  .product-detail-price {
    font-size: 1.3rem;
  }

  .product-sizes-section,
  .product-description-section,
  .product-features-section {
    padding: var(--spacing-md);
  }
}

/* ================================
   LEGAL PAGES (terms.html, privacy.html)
   ================================ */

/* Last Update Banner */
.last-update {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: rgba(255, 102, 0, 0.1);
  border: 1px solid var(--orange-primary);
  border-radius: var(--radius-surface);
  color: var(--gray-light-text);
}

.update-icon {
  font-size: 1.3rem;
}

.update-text strong {
  color: var(--orange-primary);
}

/* Legal Introduction */
.legal-intro {
  text-align: center;
}

.legal-intro .lead-paragraph {
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--gray-light-text);
  margin-bottom: var(--spacing-md);
}

.legal-intro p {
  color: var(--gray-text);
  line-height: 1.8;
}

/* Table of Contents */
.table-of-contents {
  background: var(--gray-dark);
  padding: var(--spacing-lg);
  border-radius: var(--radius-surface);
  border: 1px solid var(--gray-light);
}

.table-of-contents ol {
  list-style: none;
  counter-reset: toc-counter;
}

.table-of-contents li {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--gray-light);
}

.table-of-contents li:last-child {
  border-bottom: none;
}

.table-of-contents a {
  color: var(--gray-light-text);
  text-decoration: none;
  transition: all var(--transition-fast);
  display: block;
}

.table-of-contents a::before {
  counter-increment: toc-counter;
  content: counter(toc-counter) ". ";
  color: var(--orange-primary);
  font-weight: 600;
}

.table-of-contents a:hover {
  color: var(--orange-primary);
  padding-left: var(--spacing-sm);
}

/* Legal Sections */
.legal-section {
  margin-bottom: var(--spacing-2xl);
}

.legal-section-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--orange-primary);
}

.legal-content h3 {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--orange-primary);
  margin: var(--spacing-lg) 0 var(--spacing-md);
}

.legal-content p {
  color: var(--gray-light-text);
  line-height: 1.8;
  margin-bottom: var(--spacing-md);
}

/* Legal Lists */
.legal-list {
  list-style: none;
  padding-left: 0;
}

.legal-list li {
  position: relative;
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  color: var(--gray-light-text);
  line-height: 1.7;
}

.legal-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--orange-primary);
  font-weight: 700;
  font-size: 1.2rem;
}

/* Info Box */
.info-box {
  background: var(--gray-medium);
  padding: var(--spacing-lg);
  border-radius: var(--radius-surface);
  border-left: 4px solid var(--orange-primary);
  margin: var(--spacing-md) 0;
}

.info-box p {
  margin-bottom: var(--spacing-sm);
}

.info-box p:last-child {
  margin-bottom: 0;
}

/* Payment Methods */
.payment-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-md) 0;
}

.method-card {
  background: var(--gray-dark);
  padding: var(--spacing-md);
  border-radius: var(--radius-surface);
  border: 1px solid var(--gray-light);
  text-align: center;
  transition: all var(--transition-base);
}

.method-card:hover {
  border-color: var(--orange-primary);
  transform: translateY(-2px);
}

.method-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--spacing-sm);
}

.method-card h4 {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--spacing-xs);
}

.method-card p {
  font-size: 0.85rem;
  color: var(--gray-text);
  margin: 0;
}

/* Delivery Info */
.delivery-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-md) 0;
}

.delivery-card {
  background: var(--gray-dark);
  padding: var(--spacing-md);
  border-radius: var(--radius-surface);
  border: 1px solid var(--gray-light);
  text-align: center;
}

.delivery-card h4 {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--spacing-xs);
}

.delivery-card p {
  font-size: 0.9rem;
  color: var(--orange-primary);
  font-weight: 600;
  margin: 0;
}

/* Contact Info Box */
.contact-info-box {
  background: var(--gray-medium);
  padding: var(--spacing-lg);
  border-radius: var(--radius-surface);
  margin: var(--spacing-lg) 0;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--gray-light);
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-icon {
  font-size: 1.5rem;
}

.contact-item strong {
  display: block;
  color: var(--white);
  margin-bottom: var(--spacing-xs);
}

.contact-item p {
  margin: 0;
  color: var(--gray-light-text);
}

/* CTA Box */
.cta-box {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.1) 0%, rgba(204, 82, 0, 0.1) 100%);
  border: 2px solid var(--orange-primary);
  border-radius: var(--radius-surface);
  padding: var(--spacing-xl);
  text-align: center;
  margin-top: var(--spacing-xl);
}

.cta-box h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: var(--white);
  margin-bottom: var(--spacing-md);
}

.cta-box p {
  color: var(--gray-light-text);
  margin-bottom: var(--spacing-lg);
}

/* Text Orange Link */
.text-orange {
  color: var(--orange-primary);
  text-decoration: none;
}

.text-orange:hover {
  text-decoration: underline;
}

/* Responsive Legal Pages */
@media (max-width: 768px) {
  .legal-section-title {
    font-size: 1.4rem;
  }

  .table-of-contents {
    padding: var(--spacing-md);
  }

  .payment-methods,
  .delivery-info {
    grid-template-columns: 1fr;
  }

  .contact-info-box {
    padding: var(--spacing-md);
  }

  .contact-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .cta-box {
    padding: var(--spacing-lg);
  }
}

/* ================================
   SHOPPING CART
   ================================ */

/* Cart Button in Header */
.cart-btn-container {
  position: relative;
  display: flex;
  align-items: center;
}

.cart-btn {
  /* Sin borde — 2026-09-20. Esta regla es un duplicado de la de mas
     arriba (linea ~1267) y por orden de cascada era la que ganaba en
     TODAS las paginas; quitale el borde a esta y no a la otra no
     alcanzaba. Las dos quedan sin borde. */
  background: transparent;
  border: none;
  border-radius: var(--radius-control);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
  color: var(--white);
  font-size: 1.3rem;
}

.cart-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

[data-theme="light"] .cart-btn {
  color: var(--black);
  border-color: var(--gray-lighter);
}

.cart-btn:hover {
  border-color: var(--orange-primary);
  color: var(--orange-primary);
}

[data-theme="light"] .cart-btn:hover {
  border-color: var(--orange-primary);
  color: var(--orange-primary);
}

.cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--gradient-orange);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  box-shadow: var(--shadow-orange);
}

/* Carrito con productos: titileo rojo para captar la atencion del cliente. */
@keyframes cartAlertPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.65); }
  50%      { transform: scale(1.18); box-shadow: 0 0 0 9px rgba(229, 57, 53, 0); }
}
@keyframes cartBtnAlertGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
  50%      { box-shadow: 0 0 14px 2px rgba(229, 57, 53, 0.55); }
}
.cart-badge.cart-badge--alert {
  background: #e53935;
  animation: cartAlertPulse 1.3s ease-in-out infinite;
}
.cart-btn.cart-btn--alert {
  border-color: #e53935 !important;
  color: #ff5a52;
  animation: cartBtnAlertGlow 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cart-badge.cart-badge--alert,
  .cart-btn.cart-btn--alert { animation: none; }
}

/* Cart Modal */
.cart-modal {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-base);
}

.cart-modal.active {
  opacity: 1;
  visibility: visible;
}

.cart-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cart-modal-content {
  position: relative;
  background: var(--gray-dark);
  width: 100%;
  max-width: 450px;
  height: 100%;
  border-radius: var(--radius-surface);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: var(--transition-base);
  border-left: 1px solid rgba(255, 102, 0, 0.3);
}

.cart-modal.active .cart-modal-content {
  transform: translateX(0);
}

/* Cart Header */
.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--gray-medium);
  flex-shrink: 0;
}

.cart-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--white);
  margin: 0;
}

.cart-close {
  background: transparent;
  border: 1px solid rgba(255, 102, 0, 0.3);
  color: var(--orange-primary);
  font-size: 1.8rem;
  cursor: pointer;
  transition: var(--transition-base);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
}

.cart-close:hover {
  background: var(--orange-primary);
  border-color: var(--orange-primary);
  color: var(--white);
  transform: rotate(90deg);
}

/* Botón volver en mobile (visible solo en pantallas pequeñas) */
.cart-back {
  display: none;
  align-items: center;
  gap: var(--spacing-xs);
  background: transparent;
  border: none;
  color: var(--orange-primary);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-right: auto;
}

.cart-back-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.cart-empty-actions {
  margin-top: var(--spacing-lg);
}

.cart-empty-actions .btn {
  min-width: 220px;
}

/* Cart Items */
.cart-items {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-md);
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-lighter) var(--gray-dark);
}

/* Webkit scrollbar */
.cart-items::-webkit-scrollbar {
  width: 4px;
}
.cart-items::-webkit-scrollbar-track {
  background: var(--gray-dark);
}
.cart-items::-webkit-scrollbar-thumb {
  background: var(--gray-lighter);
  border-radius: 2px;
}

.cart-empty {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-md);
  color: var(--gray-text);
}

.cart-empty-icon {
  font-size: 4rem;
  opacity: 0.3;
  margin-bottom: var(--spacing-md);
}

.cart-empty p {
  font-size: 1.1rem;
  margin-bottom: var(--spacing-lg);
}

.cart-item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--gray-medium);
  border-radius: var(--radius-surface);
  margin-bottom: var(--spacing-md);
  border: 1px solid rgba(255, 255, 255, 0.05);
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  align-items: flex-start;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}

.cart-item-image {
  width: 80px;
  height: 80px;
  background: var(--gray-dark);
  border-radius: var(--radius-surface);
  overflow: hidden;
  flex-shrink: 0;
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-name {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 var(--spacing-xs);
  line-height: 1.3;
}

.cart-item-category {
  font-size: 0.7rem;
  color: var(--orange-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 var(--spacing-xs);
}

.cart-item-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  align-items: center;
}

.cart-item-size {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.cart-item-size span {
  font-size: 0.75rem;
  color: var(--gray-text);
}

.size-select {
  background: var(--gray-dark);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--white);
  padding: 2px var(--spacing-xs);
  font-size: 0.8rem;
  cursor: pointer;
}

.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.qty-btn {
  width: 28px;
  height: 28px;
  background: var(--gray-dark);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.qty-btn:hover {
  background: var(--orange-primary);
  border-color: var(--orange-primary);
}

.qty-btn:active {
  transform: scale(0.95);
}

.qty-value {
  font-size: 0.9rem;
  color: var(--white);
  min-width: 24px;
  text-align: center;
  font-weight: 600;
}

.cart-item-price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--red-accent);
  margin: 0;
}

.cart-item-remove {
  background: transparent;
  border: none;
  color: var(--gray-lighter);
  font-size: 1.5rem;
  cursor: pointer;
  transition: var(--transition-base);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  flex-shrink: 0;
  margin-left: auto;
}

.cart-item-remove:hover {
  color: var(--red-accent);
  background: rgba(230, 57, 70, 0.1);
}

/* Cart Footer */
.cart-footer {
  padding: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--gray-medium);
  flex-shrink: 0;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.cart-total-label {
  font-size: 1rem;
  color: var(--gray-text);
}

.cart-total-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--red-accent);
  text-shadow: var(--glow-red);
}

  .cart-actions-simple {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255,102,0,0.2);
    position: relative;
  }

  .cart-actions-simple::before {
    content: 'PASO FINAL';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-dark);
    padding: 0 var(--spacing-sm);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--orange-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .cart-checkout-btn {
    background: linear-gradient(135deg, #FF6600 0%, #FF8533 50%, #FF6600 100%);
    background-size: 200% 200%;
    color: var(--white);
    border: none;
    border-radius: var(--radius-control);
    padding: var(--spacing-md) var(--spacing-lg);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: 0 4px 20px rgba(255,102,0,0.4), 0 0 0 1px rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    letter-spacing: 0.5px;
    animation: gradientShift 3s ease infinite;
  }

  @keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  .cart-checkout-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(255,102,0,0.6), 0 0 0 1px rgba(255,255,255,0.2);
  }

  .cart-checkout-btn:active {
    transform: translateY(-1px) scale(0.98);
  }

  .cart-clear-btn {
    background: transparent;
    color: var(--gray-text);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-control);
    padding: var(--spacing-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .cart-clear-btn:hover {
    border-color: var(--gray-lighter);
    color: var(--white);
    background: rgba(255,255,255,0.03);
  }

  .cart-form {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
    background: linear-gradient(180deg, rgba(45,45,45,0.95) 0%, rgba(26,26,26,0.98) 100%);
    border-radius: var(--radius-surface);
    border: 1px solid rgba(255,102,0,0.1);
    box-shadow: inset 0 1px 20px rgba(0,0,0,0.3);
  }

  .cart-form-group {
    margin-bottom: var(--spacing-md);
  }

  .cart-form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--orange-primary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .cart-form-group input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0,0,0,0.2);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-control);
    color: var(--white);
    font-size: 0.95rem;
    font-family: var(--font-primary);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
  }

  .cart-form-group input:focus {
    outline: none;
    border-color: var(--orange-primary);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15), 0 0 20px rgba(255,102,0,0.1);
    background: rgba(0,0,0,0.3);
  }

  .cart-form-group input::placeholder {
    color: var(--gray-lighter);
    opacity: 0.5;
  }

  .cart-form-row {
    display: flex;
    gap: var(--spacing-sm);
  }

  @media (max-width: 768px) {
    .cart-form-row {
      flex-direction: column;
      gap: 0;
    }
    .cart-form-row .cart-form-group {
      margin-bottom: var(--spacing-md);
    }
  }

  .cart-step {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .cart-step > .cart-items,
  .cart-step > .cart-form {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

.cart-checkout-btn {
  background: var(--orange-primary);
  color: #0A0A0A;
  border: none;
  border-radius: var(--radius-control);
  padding: var(--spacing-md) var(--spacing-lg);
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.cart-checkout-btn:hover {
  transform: translateY(-1px);
  background: var(--orange-hover);
}

.cart-clear-btn {
  background: transparent;
  color: var(--gray-text);
  border: 1px dashed var(--gray-lighter);
  border-radius: var(--radius-control);
  padding: var(--spacing-sm);
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition-base);
}

.cart-clear-btn:hover {
  border-color: var(--red-accent);
  color: var(--red-accent);
}

/* Payment Methods — Premium Redesign */
.cart-payment-methods {
  margin-bottom: var(--spacing-lg);
}

.payment-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-light-text);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: 6px;
}

.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.payment-method-btn {
  background: linear-gradient(145deg, var(--gray-dark) 0%, var(--gray-medium) 100%);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-control);
  padding: var(--spacing-sm);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  position: relative;
  overflow: hidden;
}

.payment-method-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--brand);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.payment-method-btn:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.payment-method-btn:hover::before {
  opacity: 1;
}

.payment-method-btn.active {
  background: linear-gradient(145deg, rgba(255,102,0,0.15) 0%, rgba(255,102,0,0.05) 100%);
  border-color: var(--orange-primary);
  box-shadow: inset 0 0 0 1px rgba(255,102,0,0.35);
}

.payment-method-btn.active::before {
  opacity: 1;
  background: var(--orange-primary);
}

.payment-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--brand);
}

.payment-name {
  line-height: 1.2;
}

.payment-name small {
  font-size: 0.65rem;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.payment-soon {
  grid-column: span 2;
  opacity: 0.7;
  cursor: not-allowed;
}

.payment-soon:hover {
  transform: none;
  border-color: rgba(255,255,255,0.08);
}

.desktop-search {
  display: flex;
  align-items: center;
  position: relative;
  width: 220px;
}

.desktop-search .search-input {
  width: 100%;
  padding: 8px 32px 8px 14px;
  background: var(--gray-medium);
  border: 1.5px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--white);
  font-size: 0.9rem;
  font-family: var(--font-primary);
  transition: var(--transition-fast);
}

.desktop-search .search-input:focus {
  outline: none;
  border-color: var(--orange-primary);
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
}

.desktop-search .search-icon {
  position: absolute;
  right: 10px;
  font-size: 0.85rem;
  pointer-events: none;
  opacity: 0.7;
}

/* Hide desktop search on mobile */
@media (max-width: 768px) {
  .desktop-search {
    display: none;
  }
}

.top-bar-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* Size filter chips (mobile drawer) */
.size-filter-group {
  margin-top: var(--spacing-sm);
}

.size-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.size-chip {
  padding: 6px 12px;
  text-align: center;
  background: var(--gray-dark);
  border: 1.5px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

/* La pista secundaria del chip (el EU debajo del US, en calzado). */
.size-chip small {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1.15;
  opacity: 0.6;
  letter-spacing: 0.02em;
}

.size-chip.active small {
  opacity: 0.92;
}

.size-chip:hover {
  border-color: var(--orange-primary);
  background: rgba(255, 102, 0, 0.05);
}

.size-chip.active {
  background: var(--gradient-orange);
  border-color: var(--orange-primary);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

/* Payment grid 2 columns */
.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xs);
}

.payment-method-btn {
  background: var(--gray-dark);
  border: 2px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.payment-method-btn:hover {
  border-color: var(--orange-primary);
  background: rgba(255, 102, 0, 0.05);
}

.payment-method-btn.active {
  background: var(--orange-primary);
  border-color: var(--orange-primary);
  color: #0A0A0A;
}

.payment-method-btn[data-method="tarjeta"] {
  opacity: 0.7;
}

.payment-method-btn[data-method="tarjeta"]:hover {
  opacity: 1;
}

/* Cart Modal Responsive */
@media (max-width: 768px) {
  .cart-modal-content {
    max-width: 100%;
    height: 95vh;
    height: 95dvh; /* iOS Safari: dvh cuenta la barra de direcciones, evita que el header (boton cerrar) quede oculto */
    border-radius: var(--radius-surface);
  }

  /* Sticky WhatsApp button inside scrollable form */
  .cart-form .cart-actions-simple {
    position: sticky;
    bottom: 0;
    background: var(--gray-dark);
    padding: var(--spacing-sm) 0;
    z-index: 2;
  }
}

@media (max-width: 480px) {
  .cart-header {
    padding: var(--spacing-md);
  }

  .cart-items {
    padding: var(--spacing-sm);
  }

  .cart-footer {
    padding: var(--spacing-md);
  }

  .cart-item {
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
  }

  .cart-item-image {
    width: 60px;
    height: 60px;
  }

  .cart-item-details {
    gap: var(--spacing-xs) var(--spacing-sm);
  }

  .qty-btn {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }

  .qty-value {
    min-width: 28px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .legal-intro .lead-paragraph {
    font-size: 1rem;
  }

  .last-update {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================
   PROMOCIONES PAGE - 3D Animations & Styles
   ============================================ */

/* Promo Hero Section */
.promo-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.promo-hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/images/promociones/bg-hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.5);
  transform: scale(1.1);
  will-change: transform;
}

.promo-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(26,26,26,0.85) 0%, rgba(45,45,45,0.75) 50%, rgba(26,26,26,0.85) 100%);
  z-index: 1;
}

.promo-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255, 102, 0, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(230, 57, 70, 0.1) 0%, transparent 50%);
  animation: bgPulse 8s ease-in-out infinite;
  z-index: 2;
}

@keyframes bgPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.promo-hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Partículas de tierra/polvo interactivas */
.dust-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #C4A574 0%, #8B7355 100%);
  border-radius: var(--radius-surface);
  opacity: 0.6;
  box-shadow: 0 0 8px rgba(196, 165, 116, 0.5);
  animation: dustFloat linear infinite;
  transform: translate(var(--mouse-x, 0), var(--mouse-y, 0));
  transition: transform 0.3s ease-out;
}

@keyframes dustFloat {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  50% {
    transform: translateY(-30px) translateX(20px) rotate(180deg);
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-60px) translateX(-20px) rotate(360deg);
    opacity: 0;
  }
}

/* Split layout: texto izquierda, biker derecha */
.promo-hero-split {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
  justify-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-xl);
}

.promo-hero-text {
  text-align: left;
  max-width: 600px;
}

.promo-hero-biker {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo-hero-content {
  text-align: center;
  max-width: 800px;
}

.promo-hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--white);
  margin-bottom: var(--spacing-md);
  text-shadow: 0 0 40px rgba(255, 102, 0, 0.5);
  animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 40px rgba(255, 102, 0, 0.5); }
  50% { text-shadow: 0 0 60px rgba(255, 102, 0, 0.8), 0 0 80px rgba(255, 102, 0, 0.4); }
}

.promo-hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--gray-light-text);
  margin-bottom: var(--spacing-xl);
  line-height: 1.8;
}

.promo-hero-subtitle .highlight {
  color: var(--orange-primary);
  font-weight: 700;
  text-shadow: 0 0 20px rgba(255, 102, 0, 0.5);
}

.hero-cta-group {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* Biker 3D Container */
.biker-3d-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 70vh;
  perspective: 1000px;
  z-index: 5;
  pointer-events: none;
}

.biker-3d-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  pointer-events: auto;
}

.biker-3d {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-out;
  transform-style: preserve-3d;
}

.biker-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.biker-main-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease-out;
}

.biker-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  background: var(--gradient-orange);
  border-radius: var(--radius-surface);
  padding: var(--spacing-2xl);
  min-width: 300px;
  min-height: 400px;
}

.biker-placeholder .placeholder-icon {
  font-size: 5rem;
}

.biker-placeholder .placeholder-text {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--white);
  letter-spacing: 4px;
}

.biker-glow-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(255, 102, 0, 0.3) 0%, transparent 70%);
  filter: blur(40px);
  animation: glowPulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

.biker-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.biker-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--orange-primary);
  border-radius: var(--radius-surface);
  box-shadow: 0 0 15px var(--orange-glow);
  animation: bikerFloat 6s ease-in-out infinite;
}

@keyframes bikerFloat {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-20px) translateX(10px);
    opacity: 1;
  }
}

.biker-3d-shadow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 60px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5) 0%, transparent 70%);
  filter: blur(20px);
}

/* Floating Elements */
/* Los cuatro emojis que daban vueltas de fondo en Promociones se fueron,
   y con ellos estas 50 lineas: .floating-elements, .float-item, las cuatro
   posiciones y la animacion floatAround. CSS que ya no pinta nada igual se
   descarga y se procesa en cada visita. — 2026-09-10 */

/* Promo Stats Section */
.promo-stats {
  background: var(--gray-medium);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.stat-card {
  background: var(--gradient-card);
  border-radius: var(--radius-surface);
  padding: var(--spacing-lg);
  text-align: center;
  border: 1px solid var(--gray-light);
  transition: var(--transition-base);
}

.stat-card:hover {
  transform: translateY(-5px);
  border-color: var(--orange-primary);
  box-shadow: var(--shadow-orange);
}

.stat-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--spacing-sm);
}

.stat-number {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--orange-primary);
  display: block;
}

.stat-suffix {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--orange-primary);
}

.stat-label {
  display: block;
  color: var(--gray-light-text);
  margin-top: var(--spacing-xs);
  font-size: 0.9rem;
}

.stat-sublabel {
  display: block;
  color: var(--gray-text);
  font-size: 0.8rem;
  margin-top: var(--spacing-xs);
}

/* Promo Section */
.promo-section {
  background: var(--gray-dark);
}

.section-header-center {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.section-badge {
  display: inline-block;
  background: rgba(255, 102, 0, 0.1);
  color: var(--orange-primary);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-control);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  border: 1px solid rgba(255, 102, 0, 0.3);
}

/* Promo Filter Tabs */
.promo-filter-tabs {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-xl);
}

.promo-tab {
  background: var(--gray-medium);
  border: 2px solid var(--gray-light);
  border-radius: var(--radius-control);
  padding: var(--spacing-sm) var(--spacing-lg);
  color: var(--gray-light-text);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.promo-tab:hover {
  border-color: var(--orange-primary);
  color: var(--orange-primary);
}

.promo-tab.active {
  background: var(--gradient-orange);
  border-color: var(--orange-primary);
  color: var(--white);
  box-shadow: var(--shadow-orange);
}

/* Promos Grid */
.promos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-lg);
}

.promo-card {
  background: var(--gradient-card);
  border-radius: var(--radius-surface);
  overflow: hidden;
  border: 1px solid var(--gray-light);
  transition: var(--transition-base);
}

.promo-card:hover {
  transform: translateY(-8px);
  border-color: var(--orange-primary);
  box-shadow: var(--shadow-orange);
}

.promo-card-image {
  position: relative;
  height: 250px;
  overflow: hidden;
  background: var(--gray-medium);
}

.promo-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-base);
}

.promo-card:hover .promo-card-image img {
  transform: scale(1.1);
}

.promo-image-placeholder {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: var(--gradient-orange);
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--white);
}

.promo-discount-badge {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  background: var(--red-accent);
  color: var(--white);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-control);
  font-weight: 700;
  font-size: 1.2rem;
  box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
}

.promo-card-badge {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  background: rgba(0, 0, 0, 0.8);
  color: var(--orange-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-control);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.promo-card-content {
  padding: var(--spacing-lg);
}

.promo-card-category {
  font-size: 0.75rem;
  color: var(--orange-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.promo-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  margin: var(--spacing-xs) 0;
}

.promo-card-products-count {
  font-size: 0.85rem;
  color: var(--gray-text);
  margin-bottom: var(--spacing-md);
}

.promo-card-pricing {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.promo-regular-price {
  font-size: 0.9rem;
  color: var(--gray-text);
  text-decoration: line-through;
}

.promo-sale-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--orange-primary);
}

.promo-card-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.promo-card-actions .btn {
  flex: 1;
  justify-content: center;
  font-size: 0.85rem;
  padding: var(--spacing-sm) var(--spacing-md);
}

.promos-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--spacing-2xl);
}

.empty-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: var(--spacing-md);
}

/* How It Works Section */
.how-it-works {
  background: var(--gray-medium);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  max-width: 1000px;
  margin: 0 auto;
}

.step-card {
  text-align: center;
  padding: var(--spacing-xl);
  background: var(--gray-dark);
  border-radius: var(--radius-surface);
  border: 1px solid var(--gray-light);
  transition: var(--transition-base);
  position: relative;
}

.step-card:hover {
  border-color: var(--orange-primary);
  transform: translateY(-5px);
  box-shadow: var(--shadow-orange);
}

.step-number {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: var(--gradient-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--white);
  box-shadow: var(--shadow-orange);
}

.step-icon {
  font-size: 3rem;
  display: block;
  margin: var(--spacing-lg) 0 var(--spacing-md);
}

.step-card h3 {
  font-size: 1.25rem;
  color: var(--white);
  margin-bottom: var(--spacing-sm);
}

.step-card p {
  font-size: 0.9rem;
  color: var(--gray-text);
  line-height: 1.6;
}

/* Promo CTA */
.promo-cta {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.1) 0%, rgba(230, 57, 70, 0.1) 100%);
  border-top: 1px solid var(--gray-light);
  border-bottom: 1px solid var(--gray-light);
}

/* Promo Modal */
.promo-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}

.promo-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
}

.promo-modal-content {
  position: relative;
  background: var(--gray-dark);
  border-radius: var(--radius-surface);
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  margin: var(--spacing-lg);
  border: 1px solid var(--gray-light);
  box-shadow: var(--shadow-xl);
}

.modal-close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gray-medium);
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10;
  transition: var(--transition-fast);
}

.modal-close:hover {
  background: var(--orange-primary);
  transform: rotate(90deg);
}

.promo-modal-header {
  padding: var(--spacing-xl);
  background: var(--gradient-dark);
  border-bottom: 1px solid var(--gray-light);
  text-align: center;
}

.promo-modal-badge {
  display: inline-block;
  background: rgba(255, 102, 0, 0.2);
  color: var(--orange-primary);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-control);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--spacing-md);
}

.promo-modal-title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--white);
  margin-bottom: var(--spacing-sm);
}

.promo-modal-description {
  color: var(--gray-light-text);
  font-size: 1rem;
  line-height: 1.6;
}

.promo-modal-body {
  padding: var(--spacing-xl);
}

.promo-modal-gallery {
  margin-bottom: var(--spacing-xl);
}

.gallery-main {
  width: 100%;
  height: 400px;
  background: var(--gray-medium);
  border-radius: var(--radius-surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-main-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.gallery-placeholder {
  display: none;
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--orange-primary);
}

.gallery-thumbnails {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  overflow-x: auto;
  padding-bottom: var(--spacing-sm);
}

.gallery-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-control);
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.gallery-thumb:hover {
  border-color: var(--orange-primary);
}

.gallery-thumb.active {
  border-color: var(--orange-primary);
  box-shadow: var(--shadow-orange);
}

/* Promo Products List */
.promo-products-section {
  margin-bottom: var(--spacing-xl);
}

.promo-products-title {
  font-size: 1.25rem;
  color: var(--white);
  margin-bottom: var(--spacing-md);
  font-weight: 700;
}

.promo-products-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.promo-product-item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--gray-medium);
  border-radius: var(--radius-surface);
  border: 1px solid var(--gray-light);
}

.product-item-image {
  width: 80px;
  height: 80px;
  background: var(--gray-dark);
  border-radius: var(--radius-surface);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-item-placeholder {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--orange-primary);
}

.product-item-info {
  flex: 1;
}

.product-item-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--spacing-xs);
}

.product-item-category {
  font-size: 0.75rem;
  color: var(--gray-text);
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}

.product-item-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--orange-primary);
}

.product-item-size-selector {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: var(--spacing-xs) 0;
}

.product-item-size-selector label {
  font-size: 0.75rem;
  color: var(--gray-text);
  font-weight: 600;
}

.promo-product-size-select {
  background: var(--gray-dark);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-control);
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.promo-product-size-select:hover,
.promo-product-size-select:focus {
  border-color: var(--orange-primary);
  outline: none;
}

.product-item-badge {
  background: var(--gradient-orange);
  color: var(--white);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-control);
  font-size: 0.75rem;
  font-weight: 600;
  height: fit-content;
}

/* Promo Pricing Section */
.promo-pricing-section {
  background: var(--gray-medium);
  padding: var(--spacing-lg);
  border-radius: var(--radius-surface);
  margin-bottom: var(--spacing-xl);
  border: 1px solid var(--gray-light);
}

.price-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  color: var(--gray-light-text);
}

.price-row .regular-price {
  text-decoration: line-through;
  color: var(--gray-text);
}

.price-row.discount-row .discount-price {
  color: #25D366;
  font-weight: 600;
}

.price-row.total-row {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  padding-top: var(--spacing-sm);
  border-top: 2px solid var(--gray-light);
  margin-top: var(--spacing-sm);
}

.price-row.total-row .total-price {
  color: var(--orange-primary);
}

.promo-modal-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.promo-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.promo-badge-item {
  background: rgba(255, 102, 0, 0.1);
  color: var(--orange-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-control);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Promo Modal Responsive */
@media (max-width: 768px) {
  .promo-hero-split {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
  }

  .promo-hero-text {
    text-align: center;
    max-width: 100%;
  }

  .promo-hero-biker {
    order: -1; /* Biker arriba en móvil */
  }

  .biker-3d-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 40vh;
  }

  .promo-hero-title {
    font-size: 2.5rem;
  }

  .promo-modal-content {
    max-height: 95vh;
    margin: var(--spacing-sm);
  }

  .promo-modal-header {
    padding: var(--spacing-lg);
  }

  .promo-modal-body {
    padding: var(--spacing-md);
  }

  .gallery-main {
    height: 250px;
  }

  .promo-product-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .promo-modal-actions {
    flex-direction: column;
  }

  .promos-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .promo-hero-title {
    font-size: 2.5rem;
  }

  .stat-number {
    font-size: 2rem;
  }

  .step-card {
    padding: var(--spacing-lg);
  }
}

/* Checkout step centered */
.checkout-step {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Nav Dropdown */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--nav-bg, #1a1a1a);
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-surface);
  padding: 1.5rem 2rem;
  min-width: 700px;
  max-width: 900px;
  max-height: none;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu li {
  list-style: none;
  break-inside: avoid;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nav-dropdown-menu li:last-child {
  border-bottom: none;
}
.nav-dropdown-menu .dropdown-header {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--orange-primary);
  padding: 0 0 0.8rem;
  margin-bottom: 0.5rem;
  border-bottom: 2px solid var(--orange-primary);
  text-align: center;
}
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  padding: 0.85rem 1.2rem;
  color: var(--text-primary, #fff);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-surface);
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}
.nav-dropdown-menu a:hover {
  background: rgba(255, 102, 0, 0.08);
  color: var(--orange-primary, #ff6600);
  text-shadow: 0 0 12px rgba(255, 102, 0, 0.5);
  border-left: 3px solid var(--orange-primary);
  padding-left: 1.5rem;
}
.nav-dropdown > a::after {
  content: '\25BC';
  font-size: 0.6rem;
  margin-left: 6px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.nav-dropdown:hover > a::after {
  transform: rotate(180deg);
}
@media (max-width: 768px) {
  .nav-links.active .nav-dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none;
    background: transparent;
    border: none;
    padding: 0;
    min-width: auto;
    max-width: none;
    grid-template-columns: 1fr;
    box-shadow: none;
  }
  .nav-links.active .nav-dropdown-menu.open {
    display: grid;
  }
  .nav-links.active .nav-dropdown-menu a {
    padding: 0.5rem 1.5rem;
    font-size: 0.85rem;
    border-left: none;
  }
}

/* Mobile performance: content-visibility for product cards */
.product-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 320px;
}

/* ============================================
   CHECKOUT OVERLAY — Centrado, Premium, Validado
   ============================================ */
.checkout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* NO intercepta clicks cuando está cerrado */
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.checkout-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 0;
}

.checkout-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* SÍ intercepta clicks cuando está abierto */
}

.checkout-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  max-height: 90dvh;
  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
  border-radius: var(--radius-surface);
  border: 1px solid rgba(255,102,0,0.2);
  box-shadow: 0 25px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,102,0,0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
}

.checkout-overlay.active .checkout-panel {
  transform: scale(1) translateY(0);
}

/* Header */
.checkout-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,102,0,0.1);
}

.checkout-header-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-dark) 100%);
  border-radius: var(--radius-control);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(255,102,0,0.3);
}

.checkout-header-text {
  flex: 1;
  min-width: 0;
}

.checkout-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--white);
  margin: 0 0 2px 0;
  line-height: 1.2;
}

.checkout-subtitle {
  font-size: 0.8rem;
  color: var(--gray-text);
  margin: 0;
  line-height: 1.4;
}

.checkout-close {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-control);
  color: var(--gray-light-text);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checkout-close:hover {
  background: var(--red-accent);
  border-color: var(--red-accent);
  color: #fff;
  transform: rotate(90deg);
}

/* Body — scrollable */
.checkout-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--spacing-lg);
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-lighter) transparent;
}

.checkout-body::-webkit-scrollbar {
  width: 4px;
}
.checkout-body::-webkit-scrollbar-thumb {
  background: var(--gray-lighter);
  border-radius: 2px;
}

/* Fields */
.checkout-field {
  margin-bottom: var(--spacing-md);
  position: relative;
}

.checkout-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--orange-primary);
  margin-bottom: 8px;
}

.checkout-field label .required {
  color: var(--red-accent);
  margin-left: 2px;
}

.checkout-field label .optional {
  color: var(--gray-text);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.7rem;
}

.checkout-field input {
  width: 100%;
  padding: 14px 18px;
  background: rgba(0,0,0,0.25);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-control);
  color: var(--white);
  font-size: 1rem;
  font-family: var(--font-primary);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.checkout-field input:focus {
  outline: none;
  border-color: var(--orange-primary);
  background: rgba(0,0,0,0.35);
  box-shadow: 0 0 0 3px rgba(255,102,0,0.1), 0 0 30px rgba(255,102,0,0.08);
}

.checkout-field input::placeholder {
  color: var(--gray-lighter);
  opacity: 0.4;
}

/* Field Error States */
.checkout-field.has-error input {
  border-color: var(--red-accent);
  box-shadow: 0 0 0 3px rgba(230,57,70,0.1);
  animation: shake 0.5s ease-in-out;
}

.checkout-field.has-error label {
  color: var(--red-accent);
}

.field-error {
  display: none;
  font-size: 0.75rem;
  color: var(--red-accent);
  margin-top: 6px;
  font-weight: 600;
  align-items: center;
  gap: 4px;
}

.checkout-field.has-error .field-error {
  display: flex;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
  90% { transform: translateX(3px); }
}

/* Payment in checkout */
.checkout-payment {
  margin: var(--spacing-sm) 0 var(--spacing-md);
}

.checkout-payment-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--orange-primary);
  margin-bottom: var(--spacing-sm);
}

.checkout-payment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.checkout-payment-btn {
  background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-control);
  padding: var(--spacing-sm);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-align: left;
}

.checkout-payment-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--c);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.checkout-payment-btn:hover {
  border-color: var(--c);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.checkout-payment-btn:hover::before {
  opacity: 1;
}

.checkout-payment-btn.active {
  background: linear-gradient(145deg, rgba(255,102,0,0.15) 0%, rgba(255,102,0,0.05) 100%);
  border-color: var(--orange-primary);
  box-shadow: inset 0 0 0 1px rgba(255,102,0,0.35);
}

.checkout-payment-btn.active::before {
  opacity: 1;
  background: var(--orange-primary);
}

.cp-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-control);
  background: linear-gradient(135deg, var(--c) 0%, var(--c) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--c);
}

.cp-name {
  line-height: 1.2;
}

/* Footer */
.checkout-footer {
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
  border-top: 1px solid rgba(255,102,0,0.1);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.checkout-submit {
  background: linear-gradient(135deg, #FF6600 0%, #FF8533 50%, #FF6600 100%);
  background-size: 200% 200%;
  color: #fff;
  border: none;
  border-radius: var(--radius-surface);
  padding: var(--spacing-md) var(--spacing-lg);
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 0 4px 20px rgba(255,102,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  letter-spacing: 0.5px;
  animation: gradientShift 3s ease infinite;
}

.checkout-submit:hover {
  transform: translateY(-1px);
  background: var(--orange-hover);
}

.checkout-submit:active {
  transform: translateY(0);
  background: var(--orange-dark);
}

.checkout-back {
  background: transparent;
  color: var(--gray-text);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-control);
  padding: var(--spacing-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.checkout-back:hover {
  border-color: var(--gray-lighter);
  color: var(--white);
  background: rgba(255,255,255,0.03);
}

/* Payment field error */
#fieldPayment.has-error .checkout-payment-grid {
  animation: shake 0.5s ease-in-out;
}

#fieldPayment.has-error .checkout-payment-title {
  color: var(--red-accent);
}

/* LIGHT MODE */
[data-theme="light"] .checkout-panel {
  background: linear-gradient(180deg, #F5F5F5 0%, #FFFFFF 100%);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 25px 80px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
}

[data-theme="light"] .checkout-header {
  border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .checkout-title {
  color: #1A1A1A;
}

[data-theme="light"] .checkout-subtitle {
  color: #666;
}

[data-theme="light"] .checkout-close {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.1);
  color: #666;
}

[data-theme="light"] .checkout-close:hover {
  background: var(--red-accent);
  border-color: var(--red-accent);
  color: #fff;
}

[data-theme="light"] .checkout-body {
  scrollbar-color: #ccc transparent;
}

[data-theme="light"] .checkout-field label {
  color: #FF6600;
}

[data-theme="light"] .checkout-field input {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.15);
  color: #1A1A1A;
}

[data-theme="light"] .checkout-field input:focus {
  border-color: #FF6600;
  box-shadow: 0 0 0 3px rgba(255,102,0,0.15);
}

[data-theme="light"] .checkout-field input::placeholder {
  color: #999;
  opacity: 0.6;
}

[data-theme="light"] .checkout-payment-btn {
  background: linear-gradient(145deg, #FFFFFF 0%, #F5F5F5 100%);
  border-color: rgba(0,0,0,0.1);
  color: #1A1A1A;
}

[data-theme="light"] .checkout-payment-btn:hover {
  background: #FFFFFF;
}

[data-theme="light"] .checkout-payment-btn.active {
  background: linear-gradient(145deg, rgba(255,102,0,0.1) 0%, rgba(255,102,0,0.05) 100%);
  border-color: #FF6600;
}

[data-theme="light"] .checkout-footer {
  border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .checkout-back {
  border-color: rgba(0,0,0,0.15);
  color: #666;
}

[data-theme="light"] .checkout-back:hover {
  border-color: #333;
  color: #1A1A1A;
  background: rgba(0,0,0,0.03);
}

[data-theme="light"] .field-error {
  color: #E63946;
}

/* Mobile */
@media (max-width: 768px) {
  .checkout-overlay {
    padding: var(--spacing-sm);
  }
  .checkout-panel {
    max-height: 95vh;
    max-height: 95dvh;
    max-width: 100%;
  }
  .checkout-header {
    padding: var(--spacing-md);
  }
  .checkout-header-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  .checkout-title {
    font-size: 1.1rem;
  }
  .checkout-body {
    padding: var(--spacing-md);
  }
  .checkout-footer {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .checkout-payment-grid {
    grid-template-columns: 1fr;
  }
  .checkout-submit {
    font-size: 0.9rem;
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

.payment-method-btn.disabled,
.payment-method-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.pm-badge {
  margin-left: auto;
  background: var(--gray-medium);
  color: var(--gray-text);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-control);
  letter-spacing: 0.5px;
}

/* Size select improvements */
.size-select {
  background: var(--gray-dark);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--white);
  padding: 4px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  min-width: 60px;
}

/* Qty buttons: min 40x40 for mobile */
.qty-btn {
  width: 40px;
  height: 40px;
  background: var(--gray-dark);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--radius-control);
  color: var(--white);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.qty-btn:hover {
  background: var(--orange-primary);
  border-color: var(--orange-primary);
}

.qty-value {
  font-size: 0.95rem;
  color: var(--white);
  min-width: 28px;
  text-align: center;
  font-weight: 600;
}

/* Cart item remove button */
.cart-item-remove {
  background: transparent;
  border: none;
  color: var(--gray-lighter);
  font-size: 1.5rem;
  cursor: pointer;
  transition: var(--transition-base);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  flex-shrink: 0;
}

.cart-item-remove:hover {
  color: var(--red-accent);
  background: rgba(230, 57, 70, 0.1);
}

/* Cart empty icon svg */
.cart-empty-icon svg {
  color: var(--gray-lighter);
  opacity: 0.4;
}

/* Cart items scroll wrapper */
#cartItemsContainer {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Make sure cart step fills space */
#cartStep1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Checkout responsive */
@media (max-width: 640px) {
  .checkout-container {
    max-height: 95vh;
    max-height: 95dvh;
    border-radius: var(--radius-surface);
  }

  .checkout-form-wrapper {
    padding: var(--spacing-md);
  }

  .checkout-header {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .checkout-title {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .checkout-overlay {
    padding: var(--spacing-sm);
    align-items: flex-end;
  }

  .checkout-container {
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: var(--radius-surface);
  }

  .checkout-form-wrapper {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .payment-methods-grid {
    grid-template-columns: 1fr;
  }

  .payment-method-btn[data-method="tarjeta"] {
    grid-column: auto !important;
  }
}

/* Cart modal mobile tweaks */
@media (max-width: 768px) {
  .cart-modal-content {
    max-width: 100%;
    height: 95vh;
    height: 95dvh; /* iOS Safari: dvh cuenta la barra de direcciones, evita que el header (boton cerrar) quede oculto */
    border-radius: var(--radius-surface);
  }

  .cart-item-image {
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 480px) {
  .cart-header {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .cart-back {
    display: flex;
  }

  .cart-item {
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
  }

  .cart-item-image {
    width: 60px;
    height: 60px;
  }

  .cart-item-name {
    font-size: 0.9rem;
  }

  .cart-footer {
    padding: var(--spacing-md);
  }
}

/* ===== SKU / COLOR / AGOTADO ===== */
.product-sku { font-family: var(--font-mono); font-size: 0.8rem; color: var(--gray-text); margin-bottom: var(--spacing-xs); }
.product-color { font-size: 0.9rem; color: var(--gray-light-text); margin-bottom: var(--spacing-sm); }
.product-badge-agotado { background: var(--red-accent); color: white; padding: 4px 12px; border-radius: var(--radius-surface); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }

/* ===== Dynamic Size Filter ===== */
.size-age-toggle {
  display: none;
  gap: 4px;
  margin-bottom: 12px;
  background: rgba(255,102,0,0.1);
  border-radius: var(--radius-control);
  padding: 4px;
}

.size-age-toggle.visible {
  display: flex;
}

.size-age-btn {
  flex: 1;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: var(--font-primary);
}

.size-age-btn.active {
  background: var(--orange-primary);
  color: var(--black);
}

.size-filter-chips--loading::before {
  content: "Selecciona una categoría";
  color: var(--gray-text);
  font-size: 0.85rem;
  width: 100%;
  text-align: center;
  padding: 12px 0;
  display: block;
}

/* =========================================================
   CATEGORY CHIPS — PC sidebar redesign (v18)
   Botones pill para categorías, con estado activo iluminado.
   ========================================================= */

/* UNA GRILLA DE VERDAD — 2026-09-08.
   El HTML decia "Grid de chips de categorias" desde el dia uno y esto era un
   flex-wrap: los chips se acomodaban como caian, no como correspondia. En un
   sidebar de 280px daba ONCE filas irregulares —dos chips, uno, dos, uno, dos,
   dos, uno, uno, uno, uno, uno— con anchos de 64px a 165px. Nada se alineaba
   con nada y encontrar una categoria era leer un texto desparejo, no recorrer
   una lista. Ahora cada categoria tiene su casilla, todas del mismo ancho. */
.category-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: var(--spacing-sm);
}

/* "Todo" y "Todas" no son una categoria mas: son el borron y cuenta nueva. Van
   solas arriba, cruzando las dos columnas. De paso las que quedan abajo son un
   numero par y no sobra ninguna suelta al final. */
.category-chips > .category-chip[data-category="all"],
.brand-chips > .brand-chip[data-brand="all"] {
  grid-column: 1 / -1;
}

.category-chips--ninos {
  /* Una sola columna: aca TODOS los nombres son largos ("Protecciones Ninos") y
     en media casilla se cortaban. Es una sublista de detalle, no la grilla
     principal — a lo ancho entran enteros y se leen de un vistazo. */
  grid-template-columns: 1fr;
  padding-left: 0;
  margin-top: var(--spacing-xs);
}

.category-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* La casilla es angosta: menos aire a los costados y el nombre largo
     ("Protecciones Ninos") entra en dos renglones en vez de desbordar. El
     min-height iguala el alto del que ocupa un renglon con el de dos. */
  /* 8px a los costados y no 14: con 14 la palabra mas larga del sidebar
     ("Protecciones") se pasaba 3px de la casilla y se cortaba la "s". */
  padding: 8px 8px;
  min-height: 40px;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.2;
  border-radius: var(--radius-control);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: var(--gray-light-text);
  /* 0.8 y no 0.85: la palabra mas larga del sidebar ("Protecciones") se pasaba
     3px de su casilla y perdia la ultima letra. Se baja para TODOS los chips
     —no solo para ese— porque una grilla con un boton de otro tamanio deja de
     leerse como una grilla. */
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
}

/* Antes el hover repetia el mismo tratamiento que .active (borde +
   relleno naranja), asi que pasar el mouse se veia igual que "ya elegido".
   Ahora el hover solo levanta el chip (fondo neutro + texto naranja) y
   deja el relleno solido para cuando el filtro esta realmente activo. */
.category-chip:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--orange-primary);
  background: rgba(255, 255, 255, 0.06);
}

.category-chip.active {
  background: var(--orange-primary);
  border-color: var(--orange-primary);
  color: #0A0A0A;
}

.category-chip.active:hover {
  background: var(--orange-primary);
  color: var(--black);
}

/* Ocultar legacy checkboxes de categoría en PC si coexisten */
@media (min-width: 769px) {
  .category-children .checkbox-label[data-category],
  .category-children .checkbox-label:has(.category-filter) {
    display: none !important;
  }
}

/* En mobile, los category-chips se ocultan fuera del cajon: ahi manda la barra
   de quick-filters horizontal. */
@media (max-width: 768px) {
  .category-chips {
    display: none;
  }

  /* FIX #021: ...pero DENTRO del cajon de filtros tienen que verse. El "legacy"
     que menciona el comentario original eran los .checkbox-label[data-category],
     y ya no existen en el DOM (verificado en produccion el 2026-09-03: 0 nodos).
     Sin esta regla, abrir "Filtros" en el celular mostraba CATEGORIAS como una
     caja vacia, y sin categoria elegida el filtro de tallas tampoco se llenaba. */
  .shop-sidebar .category-chips {
    display: grid;
  }

  /* ---- TALLAS PRIMERO EN MOBILE ----
     El cajon es un bottom sheet de 70vh. Con el orden del markup (Buscar,
     Categorias, Marcas, Tallas), TALLAS caia a ~1500px de scroll porque MARCAS
     sola mide ~700px. Nadie llegaba, y por eso "no se podia filtrar por talla en
     el celular". Se reordena por CSS, sin tocar el orden del HTML —que es el
     correcto para PC, donde entra todo a la vez. */
  .shop-sidebar .sidebar-scrollable {
    display: flex;
    flex-direction: column;
  }

  .shop-sidebar #searchFilterGroup {
    order: -2;
  }

  .shop-sidebar #sizeFilterGroup {
    order: -1;
  }
}


/* =========================================================
   BRAND CHIPS — PC sidebar redesign (v19)
   Botones pill para marcas, con estado activo iluminado.
   ========================================================= */
/* Misma grilla que las categorias: si el sidebar tiene dos listas, las dos se
   leen igual. Ver el comentario largo en .category-chips. */
.brand-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: var(--spacing-sm);
}

.brand-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 8px a los costados y no 14: con 14 la palabra mas larga del sidebar
     ("Protecciones") se pasaba 3px de la casilla y se cortaba la "s". */
  padding: 8px 8px;
  min-height: 40px;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.2;
  border-radius: var(--radius-control);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: var(--gray-light-text);
  /* 0.8 y no 0.85: la palabra mas larga del sidebar ("Protecciones") se pasaba
     3px de su casilla y perdia la ultima letra. Se baja para TODOS los chips
     —no solo para ese— porque una grilla con un boton de otro tamanio deja de
     leerse como una grilla. */
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
}

/* Mismo criterio que .category-chip:hover: el hover ya no copia el
   relleno solido de .active, para que "el mouse esta encima" y "el filtro
   esta elegido" se vean distinto. */
.brand-chip:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--orange-primary);
  background: rgba(255, 255, 255, 0.06);
}

.brand-chip.active {
  background: var(--orange-primary);
  border-color: var(--orange-primary);
  color: #0A0A0A;
}

.brand-chip.active:hover {
  background: var(--orange-primary);
  color: var(--black);
}

/* Ocultar legacy checkboxes de marcas en PC si coexisten */
@media (min-width: 769px) {
  .category-children .checkbox-label:has(.brand-filter) {
    display: none !important;
  }
}

/* En mobile, los brand-chips se ocultan y sigue el legacy */
@media (max-width: 768px) {
  .brand-chips {
    display: none;
  }
}


/* =========================================================
   HERO BRANDS MARQUEE — Home page allied brands strip
   ========================================================= */
.hero-brands-marquee {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--brands-bg);
  border-top: 1px solid var(--brands-border);
  padding: 0.9rem 0;
  overflow: hidden;
  z-index: 20;
  backdrop-filter: blur(3px);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.hero-brands-marquee::before,
.hero-brands-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  width: 70px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  transition: background 0.3s ease;
}

.hero-brands-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--brands-fade-from), var(--brands-fade-to));
}

.hero-brands-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--brands-fade-from), var(--brands-fade-to));
}

.hero-brands-track {
  display: flex;
  width: max-content;
  animation: hero-marquee-scroll 35s linear infinite;
}

.hero-brands-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 3.5rem;
  padding: 0 1.75rem;
  flex-shrink: 0;
  min-width: 100vw;
}

.hero-brands-marquee:hover .hero-brands-track {
  animation-play-state: paused;
}

.brand-logo {
  height: 38px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  opacity: 0.95;
  flex-shrink: 0;
  filter: drop-shadow(var(--brands-logo-shadow));
  transition: filter 0.3s ease;
}

.brand-name-text {
  font-family: var(--font-display);
  font-size: 2.35rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--brands-text-color);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.95;
  flex-shrink: 0;
  text-shadow: var(--brands-text-shadow);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

@keyframes hero-marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .hero-brands-marquee {
    padding: 0.65rem 0;
  }
  .hero-brands-row {
    gap: 2rem;
    min-width: 100vw;
  }
  .brand-logo {
    height: 28px;
    max-width: 120px;
  }
  .brand-name-text {
    font-size: 1.05rem;
    letter-spacing: 1.5px;
  }
}

.brand-separator {
  color: var(--orange-primary);
  opacity: 0.5;
  font-size: 0.9rem;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .brands-marquee {
  padding: 1rem 0;
  }
  .brand-name,
  .brand-name-text {
  font-size: 1.25rem;
  }
  .brand-logo {
  height: 28px;
  }
}

/* =====================================================================
   CART REDESIGN — sofisticado, responsive (override cohesivo, fin de archivo)
   Gana la cascada por orden de fuente. Objetivos:
   - PC: panel ajustado + footer SIEMPRE pinneado abajo (fix .cart-step flex)
   - Mobile: pantalla completa, cierre siempre visible, nada se sale
   ===================================================================== */

/* --- Estructura: el wrapper del paso debe llenar la altura para pinnear footer --- */
.cart-modal-content .cart-step {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cart-modal-content .cart-step .cart-items#cartItemsContainer {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* UNA sola zona de scroll. #cartItems tambien lleva la clase .cart-items, asi
   que heredaba overflow-y:auto y padding: quedaban dos contenedores scrolleables
   anidados y padding doble. Los de adentro son wrappers, nada mas. */
.cart-modal-content #cartContent,
.cart-modal-content #cartItems {
  overflow: visible;
  flex: none;
  padding: 0;
  min-height: 0;
}

/* El footer se empuja al fondo y no encoge */
.cart-modal-content .cart-footer {
  margin-top: auto;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   FOOTER COMPACTO — el footer medía 292px en un viewport de 720px: con el
   header (109px) le dejaba 319px a la lista, o sea UN producto. Cada píxel
   que se le saca es un píxel de catálogo visible. Objetivo: ~170px.
   --------------------------------------------------------------------- */
.cart-modal-content .cart-footer {
  padding: var(--spacing-md) var(--spacing-lg);
}

.cart-modal-content .cart-total {
  margin-bottom: var(--spacing-sm);
  align-items: baseline;
}

.cart-total-label-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-total-count {
  font-size: 0.75rem;
  color: var(--gray-text);
  letter-spacing: 0.5px;
}

/* Sin margen gigante ni cinta "PASO FINAL": ese separador comía 40px y no
   aportaba nada que el botón naranja no dijera ya. */
.cart-modal-content .cart-actions-simple {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  gap: var(--spacing-xs);
}

.cart-modal-content .cart-actions-simple::before {
  content: none;
}

.cart-modal-content .cart-checkout-btn {
  padding: 0.9rem var(--spacing-md);
  font-size: 1.05rem;
}

/* "Vaciar carrito" es una acción destructiva y secundaria: que parezca un
   link, no un segundo botón compitiendo con COMPRAR. */
.cart-modal-content .cart-clear-btn {
  border: none;
  background: transparent;
  padding: 2px;
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.7;
}

.cart-modal-content .cart-clear-btn:hover {
  opacity: 1;
  background: transparent;
}

/* Microcopy de confianza: el cliente que nunca compró acá necesita saber qué
   pasa DESPUÉS de tocar COMPRAR. Es la duda que frena el clic. */
.cart-footer-note {
  margin: var(--spacing-xs) 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--gray-text);
  text-align: center;
}

/* --- Item: subtotal de línea + precio unitario cuando hay más de uno --- */
.cart-item-pricing {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.cart-item-unit {
  font-size: 0.72rem;
  color: var(--gray-text);
}

/* --- PC: proporciones más elegantes + acabado glass --- */
@media (min-width: 769px) {
  .cart-modal-content {
    width: 100%;
    max-width: 430px;
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
    border-left: 1px solid rgba(255, 102, 0, 0.25);
  }

  .cart-header,
  .cart-footer {
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .cart-header {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  /* Card de item más refinada */
  .cart-item {
    padding: var(--spacing-md);
    border-radius: var(--radius-surface);
    transition: border-color 0.25s ease, transform 0.25s ease;
  }
  .cart-item:hover {
    border-color: rgba(255, 102, 0, 0.35);
    transform: translateY(-1px);
  }
}

/* --- MOBILE: carrito a pantalla completa, cierre visible, sin overflow --- */
@media (max-width: 768px) {
  .cart-modal-content {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: var(--radius-surface);
    border-left: none;
  }

  /* Header fijo arriba: el botón de cerrar siempre queda a la vista */
  .cart-header {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: var(--spacing-md) var(--spacing-lg);
    padding-top: max(var(--spacing-md), env(safe-area-inset-top));
  }

  .cart-close {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
  }

  /* Zona scrollable: ocupa el resto, nunca desborda */
  .cart-modal-content .cart-step .cart-items#cartItemsContainer {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer pinneado con respeto al notch/gesture bar */
  .cart-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
  }

  /* Evitar que cualquier hijo empuje el ancho */
  .cart-item,
  .cart-item-info,
  .cart-item-name {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}


/* ============================================================
   CHECKOUT PAGE (checkout.html) — pagina dedicada 2026-07-02
   Reusa .checkout-panel/.checkout-field/.checkout-payment del
   overlay, pero el panel se renderiza ESTATICO (no modal).
   ============================================================ */

.checkout-page {
  background: var(--black, #0a0a0a);
  min-height: 100vh;
  min-height: 100dvh;
}

.checkout-page-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkout-page-backlink {
  color: var(--gray-light-text, #ccc);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-control);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.checkout-page-backlink:hover {
  border-color: var(--orange-primary, #FF6600);
  color: var(--orange-primary, #FF6600);
}

.checkout-page-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: calc(var(--spacing-xl, 2rem) + 70px) var(--spacing-md, 1rem) var(--spacing-xl, 2rem);
}

.checkout-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--spacing-lg, 1.5rem);
  align-items: start;
}

/* Panel del formulario: de modal a estatico */
.checkout-panel--page {
  max-width: none;
  max-height: none;
  transform: none;
  overflow: visible;
}

.checkout-panel--page .checkout-body {
  max-height: none;
  overflow: visible;
}

/* Resumen del pedido */
.checkout-summary-card {
  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
  border: 1px solid rgba(255,102,0,0.2);
  border-radius: var(--radius-surface);
  padding: var(--spacing-lg, 1.5rem);
  position: sticky;
  top: 90px;
}

.checkout-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md, 1rem);
  padding-bottom: var(--spacing-sm, 0.5rem);
  border-bottom: 1px solid rgba(255,102,0,0.1);
}

.checkout-summary-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--white, #fff);
  margin: 0;
  letter-spacing: 1px;
}

.checkout-summary-edit {
  color: var(--orange-primary, #FF6600);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.checkout-summary-edit:hover {
  text-decoration: underline;
}

.checkout-summary-items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 0.5rem);
  max-height: 44vh;
  overflow-y: auto;
  padding-right: 4px;
}

.checkout-summary-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-sm, 0.5rem);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-surface);
}

.checkout-summary-item-img {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-surface);
  overflow: hidden;
  background: rgba(255,255,255,0.05);
}

.checkout-summary-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.checkout-summary-item-name {
  color: var(--white, #fff);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 2px 0;
  overflow-wrap: anywhere;
}

.checkout-summary-item-meta {
  color: var(--gray-text, #888);
  font-size: 0.75rem;
  margin: 0;
}

.checkout-summary-item-price {
  color: var(--orange-primary, #FF6600);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}

.checkout-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-md, 1rem);
  padding-top: var(--spacing-md, 1rem);
  border-top: 1px solid rgba(255,102,0,0.15);
  color: var(--white, #fff);
  font-weight: 700;
}

.checkout-summary-total-value {
  font-size: 1.35rem;
  color: var(--orange-primary, #FF6600);
  font-family: var(--font-mono, monospace);
}

.checkout-summary-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs, 0.35rem);
  margin-top: var(--spacing-md, 1rem);
}

.checkout-summary-badges span {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--gray-light-text, #ccc);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-control);
  padding: 4px 10px;
}

/* "Volver al carrito" como link en el footer del panel */
.checkout-back--link {
  display: block;
  text-align: center;
  text-decoration: none;
}

/* Light mode */
[data-theme="light"] .checkout-page {
  background: var(--white, #f7f7f7);
}

[data-theme="light"] .checkout-summary-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

[data-theme="light"] .checkout-summary-title,
[data-theme="light"] .checkout-summary-total,
[data-theme="light"] .checkout-summary-item-name {
  color: #111;
}

[data-theme="light"] .checkout-summary-item {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .checkout-summary-badges span {
  color: #555;
  border-color: rgba(0,0,0,0.15);
}

[data-theme="light"] .checkout-page-backlink {
  color: #444;
  border-color: rgba(0,0,0,0.2);
}

/* Mobile: una sola columna, resumen arriba */
@media (max-width: 900px) {
  .checkout-page-grid {
    grid-template-columns: 1fr;
  }

  .checkout-summary-card {
    position: static;
  }

  .checkout-summary-items {
    max-height: 32vh;
  }

  .checkout-page-main {
    padding-top: calc(var(--spacing-lg, 1.5rem) + 64px);
    padding-bottom: calc(var(--spacing-xl, 2rem) + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   MEGA-MENU TIENDA v2 (2026-07-02) — columnas con headers,
   theming claro/oscuro. El contenido lo construye main.js
   (rebuildCategoryDropdown) desde la lista unica de categorias.
   ============================================================ */

.nav-dropdown-menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 0.5rem 2rem;
  min-width: 720px;
  max-width: 860px;
  padding: 1.5rem 2rem 1.75rem;
}

.nav-dropdown-menu .dropdown-col {
  list-style: none;
  border-bottom: none;
}

.nav-dropdown-menu .dropdown-col-header {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--orange-primary);
  padding: 0 0 0.6rem;
  margin-bottom: 0.4rem;
  border-bottom: 2px solid rgba(255, 102, 0, 0.35);
}

.nav-dropdown-menu .dropdown-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-dropdown-menu .dropdown-col li {
  border-bottom: none;
}

.nav-dropdown-menu .dropdown-col a {
  padding: 0.5rem 0.4rem;
  border-left: 3px solid transparent;
}

.nav-dropdown-menu .dropdown-col a:hover {
  padding-left: 0.8rem;
}

/* Tema claro: antes el menu quedaba SIEMPRE oscuro porque --nav-bg no existe
   y caia al fallback #1a1a1a. Overrides siguiendo el patron del sitio. */
[data-theme="light"] .nav-dropdown-menu {
  background: #f7f7f7 !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
}
[data-theme="light"] .nav-dropdown-menu a {
  color: #1a1a1a;
}
[data-theme="light"] .nav-dropdown-menu a:hover {
  background: rgba(255, 102, 0, 0.1);
  color: var(--orange-primary, #ff6600);
  text-shadow: none;
}
[data-theme="light"] .nav-dropdown-menu li {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* Mobile: columnas apiladas dentro del panel */
@media (max-width: 768px) {
  .nav-dropdown-menu {
    grid-template-columns: 1fr;
    min-width: auto;
    max-width: none;
    gap: 0.25rem;
    padding: 0;
  }
  .nav-dropdown-menu .dropdown-col-header {
    padding: 0.5rem 1.5rem 0.3rem;
    border-bottom: none;
    margin-bottom: 0;
  }
  .nav-dropdown-menu .dropdown-col a {
    padding: 0.5rem 1.5rem;
    border-left: none;
  }
}

/* ============================================================
   CARDS DE PRODUCTO SIMETRICAS (2026-07-02) — feedback del jefe:
   nombres de 1 linea acortaban la card y desalineaban precio/
   talla/botones. Nombre SIEMPRE reserva 2 lineas y las acciones
   se anclan abajo; el grid ya estira las cards a igual altura.
   ============================================================ */

.product-name {
  min-height: calc(0.95rem * 1.3 * 2); /* 2 lineas reservadas */
}

.product-info .product-actions {
  margin-top: auto; /* botones SIEMPRE al fondo de la card */
}

/* ============================================================
   CATEGORY CARDS CON FOTO (2026-07-02) — home: todas las
   categorias con imagen real de producto (fondo blanco) en vez
   de clip-art. Renderizadas por products.js (renderCategoryCards).
   ============================================================ */

.category-card--photo .category-photo {
  height: 170px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-surface);
}

.category-card--photo .category-photo img {
  max-width: 82%;
  max-height: 86%;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.category-card--photo:hover .category-photo img {
  transform: scale(1.08);
}

.category-card--photo .category-content {
  padding: var(--spacing-md);
}

@media (max-width: 768px) {
  .category-card--photo .category-photo {
    height: 130px;
  }
}

/* ============================================================
   HOME: grids de seccion SIEMPRE simetricos (2026-07-02)
   auto-fill dejaba tracks vacios con solo 4 cards en pantallas
   anchas -> cards corridas a la izquierda. Solo aplica al home
   ([data-products] no existe en shop).
   ============================================================ */
.products-grid[data-products] {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .products-grid[data-products] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .products-grid[data-products] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
  .products-grid[data-products] { grid-template-columns: 1fr; }
}

/* ============================================
   GRID DE PRODUCTOS EN MOVIL — 2026-07-30
   Antes entraba UNA sola card por fila en telefono: el grid de la
   tienda usa minmax(240px, 1fr) (con ~343px utiles entra una), y el
   del home baja explicitamente a 1fr por debajo de 440px.
   Ahora ambos van a 2 columnas. El interior de la card estaba
   dimensionado para ~280px de ancho, asi que tambien se ajusta.
   Todo scopeado a .products-grid: no toca el quickview ni el carrito.
   ============================================ */
@media (max-width: 640px) {
  .products-grid,
  .products-grid[data-products] {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs);
  }

  .products-grid .product-image {
    height: 130px;
    padding: var(--spacing-xs);
  }

  .products-grid .product-info {
    padding: var(--spacing-sm);
    gap: 0.35rem;
  }

  .products-grid .product-category { font-size: 0.58rem; }
  .products-grid .product-name { font-size: 0.8rem; }
  .products-grid .product-price { font-size: 1.05rem; }

  .products-grid .card-size-select {
    font-size: 0.75rem;
    padding: 0.3rem 0.4rem;
  }

  .products-grid .product-badge {
    font-size: 0.55rem;
    padding: 2px 6px;
  }

  /* Dos botones lado a lado no entran en ~160px de ancho: se apilan. */
  .products-grid .product-actions {
    flex-direction: column;
    gap: 0.35rem;
  }

  .products-grid .product-actions .btn {
    padding: 0.5rem 0.4rem;
    font-size: 0.72rem;
  }
}

/* ================================================================
   QUICKVIEW DE PRODUCTO v2 — 2026-08-02
   A1 cerrar siempre accesible en movil | A2 imagen protagonista |
   A3 zoom (lupa en PC, tap-to-zoom en movil)

   Va al FINAL a proposito (misma convencion que el rediseno del
   carrito): asi le gana por orden de fuente a `.modal-close` de la
   linea ~8284, que es del modal de promociones pero NO esta scopeado
   y venia pisando al del producto.

   ⚠️ TODO SCOPEADO A #productModal A PROPOSITO. Las clases
   `.product-modal`, `.product-modal-content` y `.modal-close` NO son
   exclusivas del quickview: tambien las usan #sizeGuideModal,
   #imagePreviewModal y el modal de promociones. Sin el id, estas
   reglas les cambiarian el layout a los cuatro. Es la misma fuga que
   `.products-grid` tuvo hacia el editor didactico (TEMP.md, sesion
   2026-07-30 parte 3). Los dos storefronts (index.html y shop.html)
   usan el mismo id="productModal", asi que el scope cubre a ambos.

   El `.modal-image-viewport` lo crea `initProductModalInternal()` en
   js/main.js envolviendo a #modalImage. Es quien recorta la imagen
   escalada para que el zoom no invada el panel de info.
   ================================================================ */

/* ── A2: la foto manda ──────────────────────────────────────────
   El contenedor deja de tener min-height fijo y reparte el alto:
   el viewport de la imagen crece, los thumbnails no. Antes la foto
   estaba clavada a max-height:400px (300px en movil) dentro de un
   grid de 1100px, o sea usaba una fraccion del espacio disponible. */
#productModal .modal-image-container {
  min-height: 0;
  justify-content: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

#productModal .modal-image-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-surface);
  touch-action: pan-y;
}

/* object-fit:contain centra la foto dentro de su caja por si solo,
   asi el centrado ya no depende de si hay thumbnails o no. */
#productModal .modal-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
}

#productModal .modal-thumbnails {
  flex: 0 0 auto;
}

/* ── A3: zoom ───────────────────────────────────────────────────
   Sin transicion en transform mientras se sigue al cursor (una lupa
   con lag se siente rota). La transicion se activa solo cuando el
   movil hace toggle, via .is-zoom-animated. */
#productModal .modal-image-viewport.is-zoomable {
  cursor: zoom-in;
}

#productModal .modal-image-viewport.is-zoomed {
  cursor: zoom-out;
}

#productModal .modal-image-viewport.is-zoomed .modal-image {
  transform: scale(var(--mx-zoom, 2.2));
}

#productModal .modal-image-viewport.is-zoom-animated .modal-image {
  transition: transform 0.2s ease-out, opacity var(--transition-fast);
}

/* Pista de que la foto se puede agrandar. Ahora es SOLO una lupa.

   Antes decía "Pasa el cursor para ampliar" y tapaba la foto del producto, que
   es lo que la persona vino a mirar. Y estaba hardcodeado en oscuro —fondo
   rgba(10,10,10) con texto blanco— así que en modo claro quedaba una pastilla
   negra sobre la foto de fondo blanco del producto.

   `--white` YA era sensible al tema —en claro vale #1A1A1A, o sea que el nombre
   miente pero el comportamiento era correcto—. Lo que estaba mal era el fondo y
   el borde, escritos a mano en oscuro. Ahora los tres salen de tokens que el
   tema da vuelta. */
#productModal .modal-zoom-hint {
  position: absolute;
  right: var(--spacing-sm);
  bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-control);
  background: var(--gray-medium);
  backdrop-filter: blur(8px);
  border: 1px solid var(--gray-light);
  color: var(--white);
  pointer-events: none;
  opacity: 0.92;
  transition: opacity 0.2s ease;
}

/* El texto del hint lo decide la media query, NO el JS: asi un equipo
   que gana o pierde el mouse (iPad, 2-en-1) siempre lee lo correcto. */
#productModal .mx-hint-hover, #productModal .mx-hint-touch { display: none; }
#productModal .mx-hint-touch { display: inline; }

@media (hover: hover) and (pointer: fine) {
  #productModal .mx-hint-hover { display: inline; }
  #productModal .mx-hint-touch { display: none; }
}

#productModal .modal-image-viewport.is-zoomed .modal-zoom-hint {
  opacity: 0;
}

/* Sin foto no hay nada que ampliar. */
#productModal .modal-image-viewport:not(.is-zoomable) .modal-zoom-hint {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  #productModal .modal-image-viewport.is-zoom-animated .modal-image {
    transition: none;
  }
}

/* ── PC: la ficha también ocupa la pantalla ──────────────────────
   En móvil el quickview ya abría a pantalla completa y en PC quedaba una caja
   flotando en el medio. Pedido de Seven (2026-09-04): que se comporte igual.

   Y no es solo consistencia. La foto del producto es la razón por la que alguien
   abre esto, y en la caja chica competía con el catálogo difuminado de atrás.
   A pantalla completa no hay nada más que mirar, que es el punto de un quickview. */
@media (min-width: 901px) {
  #productModal.product-modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  #productModal .product-modal-content {
    grid-template-columns: 1.35fr 1fr;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: none;
    border-radius: var(--radius-surface);
    box-shadow: none;
    overflow: hidden; /* el scroll pasa al panel de info, no al modal entero */
    /* Sin scale, por lo mismo que en móvil: un ancestro transformado convierte
       el position:fixed del botón cerrar en absolute contra ESTE elemento. */
    transform: none;
  }

  #productModal.active .product-modal-content {
    transform: none;
  }

  #productModal .modal-image-container {
    height: 100%;
    padding: var(--spacing-lg);
  }

  #productModal .modal-product-info {
    overflow-y: auto;
  }
}

/* ── A1: movil = ficha a pantalla completa ───────────────────────
   Mismo patron que ya funciona en el carrito (sesion 2026-07-02):
   dvh + header con env(safe-area-inset-top). En iOS Safari `100%` es
   el layout viewport, que se extiende POR DEBAJO de la barra de URL,
   y por eso el boton cerrar quedaba tapado e inalcanzable. */
@media (max-width: 768px) {
  #productModal.product-modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  #productModal .product-modal-content {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: none;
    border-radius: var(--radius-surface);
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr; /* foto fija arriba, info scrollea debajo */
    overflow: hidden;
    /* Sin scale: un ancestro transformado convierte el position:fixed
       del boton cerrar en position:absolute contra ESTE elemento. */
    transform: none;
  }

  #productModal.product-modal.active .product-modal-content {
    transform: none;
  }

  /* El boton cerrar FLOTA sobre la foto en vez de reservarle una franja
     arriba: con 58px de padding la imagen perdia ~1/4 del alto util, que
     es justo lo que veniamos a recuperar. Se lee igual porque el boton
     tiene fondo oscuro translucido + blur. */
  #productModal .modal-image-container {
    height: 56dvh;
    padding: calc(env(safe-area-inset-top) + 8px) var(--spacing-sm) var(--spacing-sm);
  }

  #productModal .modal-product-info {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding: var(--spacing-lg) var(--spacing-md)
             calc(env(safe-area-inset-bottom) + var(--spacing-xl));
  }

  #productModal .modal-close {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 10px);
    right: 12px;
    width: 44px;
    height: 44px;
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--white);
    font-size: 1.6rem;
    line-height: 1;
    z-index: 30;
  }

  /* rotate(90deg) en un boton fixed lo saca de lugar en algunos
     navegadores moviles al hacer tap. */
  #productModal .modal-close:hover,
  #productModal .modal-close:active {
    transform: none;
    background: var(--red-accent);
  }
}

/* ================================================================
   SHOP: ATERRIZAR EN EL CATALOGO — 2026-08-02
   Al entrar a /shop el usuario tiene que ver PRODUCTOS, no un hero.
   En movil habia ~425px de nada antes de la primera card:
   .page-header (padding calc(80px + 5rem) arriba + 5rem abajo + titulo
   + subtitulo ≈ 280px) MAS los 145px de padding-top que el .section
   necesita para no quedar tapado por la barra de busqueda y los chips,
   que son `position: fixed`.
   ================================================================ */

/* ── El hero de /shop ────────────────────────────────────────────
   En movil se oculta VISUALMENTE pero el <h1> sigue en el DOM: es el
   encabezado principal de la pagina y lo necesitamos para SEO, que es
   justo lo que estamos tratando de levantar. `display:none` lo sacaria
   del arbol de accesibilidad; el patron de clip lo deja legible para
   lectores de pantalla y crawlers. */
@media (max-width: 768px) {
  body.shop-page .page-header {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* En PC el hero se queda (orienta y aporta el h1 visible) pero deja de
   comerse 160px arriba y 80px abajo. Scopeado a .shop-page: el resto de
   las paginas (about, faq, blogs) conservan su hero completo. */
@media (min-width: 769px) {
  body.shop-page .page-header {
    padding: calc(80px + var(--spacing-md)) 0 var(--spacing-md);
  }
}

/* ── Aire entre el divisor de categoria y las cards ──────────────
   Antes en movil: 48px arriba y 48px abajo (padding 24 + margin 24 de
   cada lado). El hueco de abajo era el que sobraba. Ahora respira
   arriba (separa de la categoria anterior) y se pega mas a SUS
   productos, que es a lo que el titulo se refiere. */
@media (max-width: 768px) {
  .category-divider {
    padding: var(--spacing-md) 0 var(--spacing-sm);
    margin: var(--spacing-sm) 0 0;
  }
}

/* ── Modo claro: la barra de busqueda movil se quedaba negra ─────
   Existia [data-theme="light"] .mobile-quick-filters (linea ~150) y
   .mobile-search-bar .search-input (~215), pero NUNCA la barra en si,
   que tiene rgba(26,26,26,.98) hardcodeado. Resultado: la banda de
   chips se aclaraba y la de busqueda quedaba negra justo arriba.
   Los iconos son naranja (--orange-primary), que contrasta en ambos. */
[data-theme="light"] .mobile-search-bar {
  background: rgba(232, 232, 232, 0.98) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ── /shop movil: fuera la barra fija de WhatsApp ────────────────
   Tapaba ~48px de catalogo en la pagina donde el usuario esta
   navegando producto. El canal NO se pierde: cada card y el quickview
   tienen su propio boton de WhatsApp. En el resto de las paginas la
   barra sigue igual. */
@media (max-width: 768px) {
  body.shop-page .whatsapp-sticky-bar {
    display: none;
  }
}

/* =============================================================================
   CHECKOUT — REDISEÑO DE CONFIANZA (2026-08-03)
   =============================================================================
   Por que existe este bloque: 6 personas llegaron a /checkout en 30 dias y
   compraron CERO. Para soltar $1.530.000 por internet hace falta confianza, y
   el checkout la estaba rompiendo: glows, un boton que late, emojis, y ni una
   sola garantia a la vista.

   Va al final del archivo y pisa lo anterior a proposito. Editar las ~120
   lineas originales repartidas en tres zonas del stylesheet era mas riesgoso
   que sobreescribirlas juntas y explicadas en un solo lugar.

   REGLA DE ORO DE ESTE BLOQUE: nada se mueve solo. Ningun glow. Ningun degrade
   decorativo. En la pantalla de pago, "aburrido" ES la caracteristica.
============================================================================= */

/* --- BUG DE MODO CLARO ------------------------------------------------------
   Los tokens estan INVERTIDOS: en :root --white es #FFFFFF, pero en
   [data-theme="light"] --white pasa a #1A1A1A (casi negro) porque significa
   "color de texto", no "el color blanco".

   La regla original hacia:
     [data-theme="light"] .checkout-page { background: var(--white, #f7f7f7); }
   ...que en modo claro pintaba el fondo de CASI NEGRO. De ahi las tarjetas
   blancas flotando sobre fondo oscuro. Aca se usan colores literales: en esta
   pantalla la ambiguedad de los tokens no se paga.
--------------------------------------------------------------------------- */
.checkout-page {
  background: #0B0B0C;
}

[data-theme="light"] .checkout-page {
  background: #F4F5F7;
}

/* --- Header ---------------------------------------------------------------- */
.checkout-page-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.checkout-page-backlink {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none;
}

/* --- Panel de garantias ----------------------------------------------------
   Debajo del resumen del pedido: es el punto exacto donde la persona ve el
   total y calcula el riesgo. Antes ahi no habia absolutamente nada.
--------------------------------------------------------------------------- */
.trust-panel {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-surface);
  background: rgba(255,255,255,0.03);
}

.trust-panel-title {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.55);
}

.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trust-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 14px;
  border-left: 2px solid var(--orange-primary, #FF6600);
}

.trust-item-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.trust-item-text {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.62);
}

.trust-item-text a {
  color: var(--orange-primary, #FF6600);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.trust-item-text a:hover {
  text-decoration: underline;
}

[data-theme="light"] .trust-panel {
  background: #ffffff;
  border-color: rgba(0,0,0,0.09);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

[data-theme="light"] .trust-panel-title { color: #6B7280; }
[data-theme="light"] .trust-item-title  { color: #111827; }
[data-theme="light"] .trust-item-text   { color: #4B5563; }

/* --- Encabezado del formulario --------------------------------------------- */
.checkout-title {
  font-size: 1.25rem;
  letter-spacing: 0.3px;
}

.checkout-subtitle {
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
}

.checkout-subtitle strong {
  display: block;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 2px;
}

[data-theme="light"] .checkout-subtitle        { color: #4B5563; }
[data-theme="light"] .checkout-subtitle strong { color: #111827; }

/* --- Aviso de cobertura por ciudad ------------------------------------------
   Aparece recien cuando la persona escribio algo. Verde = llegamos con contra
   entrega; neutro = no llegamos, pero te decimos que SI tenes.
   Neutro y no rojo a proposito: "no hay contra entrega en tu ciudad" no es un
   error del usuario, y pintarlo de rojo lo trata como si lo fuera.
--------------------------------------------------------------------------- */
.coverage-note {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-surface);
  font-size: 0.8rem;
  line-height: 1.5;
  border: 1px solid transparent;
}

.coverage-note strong { font-weight: 700; }

.coverage-note--ok {
  background: rgba(37, 211, 102, 0.10);
  border-color: rgba(37, 211, 102, 0.35);
  color: #7FE3A6;
}

.coverage-note--ok strong { color: #25D366; }

.coverage-note--info {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.68);
}

.coverage-note--info strong { color: #ffffff; }

[data-theme="light"] .coverage-note--ok {
  background: #E7F8EE;
  border-color: #A7E0BF;
  color: #1B6B3A;
}

[data-theme="light"] .coverage-note--ok strong { color: #12703A; }

[data-theme="light"] .coverage-note--info {
  background: #F3F4F6;
  border-color: #D8DBE0;
  color: #4B5563;
}

[data-theme="light"] .coverage-note--info strong { color: #111827; }

/* --- Metodos de pago --------------------------------------------------------
   El contra entrega ocupa las DOS columnas y va primero. No es jerarquia
   caprichosa: es el unico metodo donde el comprador no arriesga plata, y por
   eso es el que destraba la venta. Antes se llamaba "Efectivo" y era un
   cuadradito identico a los otros tres.
--------------------------------------------------------------------------- */
.checkout-payment-title {
  color: rgba(255,255,255,0.55);
  font-size: 0.78rem;
  letter-spacing: 1.2px;
}

[data-theme="light"] .checkout-payment-title { color: #6B7280; }

.checkout-payment-grid { gap: 10px; }

.checkout-payment-btn {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-control);
  padding: 14px;
  /* Sin cubic-bezier con rebote: en el checkout nada tiene que "saltar". */
  transition: border-color 0.15s ease, background-color 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  box-shadow: none;
}

/* La barrita de color lateral y el hover que levantaba el boton: fuera. */
.checkout-payment-btn::before { display: none; }

.checkout-payment-btn:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.05);
}

.checkout-payment-btn.active {
  background: rgba(255,102,0,0.08);
  border-color: var(--orange-primary, #FF6600);
  box-shadow: none;
}

.checkout-payment-btn .cp-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
}

/* Los iconos con glow propio ya no estan en el markup. Si algun cache viejo
   los trae, que al menos no brillen. */
.cp-icon { box-shadow: none; }

.checkout-payment-btn--featured {
  grid-column: 1 / -1;
  padding: 16px;
  background: rgba(37, 211, 102, 0.07);
  border-color: rgba(37, 211, 102, 0.30);
}

.checkout-payment-btn--featured:hover {
  background: rgba(37, 211, 102, 0.10);
  border-color: rgba(37, 211, 102, 0.50);
}

.checkout-payment-btn--featured.active {
  background: rgba(37, 211, 102, 0.14);
  border-color: #25D366;
}

.cp-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cp-tag {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: var(--radius-control);
  background: rgba(37, 211, 102, 0.16);
  color: #7FE3A6;
  border: 1px solid rgba(37, 211, 102, 0.30);
}

.cp-desc {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255,255,255,0.66);
  text-align: left;
}

.checkout-payment-foot {
  margin: 10px 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.45);
}

[data-theme="light"] .checkout-payment-btn {
  background: #ffffff;
  border-color: #D8DBE0;
}

[data-theme="light"] .checkout-payment-btn:hover {
  background: #ffffff;
  border-color: #9CA3AF;
}

[data-theme="light"] .checkout-payment-btn.active {
  background: #FFF4EC;
  border-color: var(--orange-primary, #FF6600);
}

[data-theme="light"] .checkout-payment-btn .cp-name { color: #111827; }

[data-theme="light"] .checkout-payment-btn--featured {
  background: #F1FBF5;
  border-color: #A7E0BF;
}

[data-theme="light"] .checkout-payment-btn--featured:hover { border-color: #6FCB96; }

[data-theme="light"] .checkout-payment-btn--featured.active {
  background: #E7F8EE;
  border-color: #25A75A;
}

[data-theme="light"] .cp-tag {
  background: #DFF5E8;
  color: #12703A;
  border-color: #A7E0BF;
}

[data-theme="light"] .cp-desc               { color: #4B5563; }
[data-theme="light"] .checkout-payment-foot { color: #6B7280; }

/* --- Boton principal --------------------------------------------------------
   Se le saca la animacion `gradientShift` infinita, el glow naranja y el scale
   del hover. Un boton que late solo en la pantalla de pago se lee como
   publicidad agresiva, justo cuando la persona esta decidiendo si confiar.
   Naranja plano, sin degrade. El texto ya no dice "Enviar pedido" sino
   "Continuar", y debajo se aclara que todavia no se paga nada.
--------------------------------------------------------------------------- */
.checkout-submit {
  background: var(--orange-primary, #FF6600);
  background-size: auto;
  animation: none;
  box-shadow: none;
  border-radius: var(--radius-surface);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: none;
  transition: background-color 0.15s ease;
}

.checkout-submit:hover {
  transform: none;
  box-shadow: none;
  background: #E65C00;
}

.checkout-submit:active { transform: none; }

.checkout-submit-note {
  margin: 0;
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.45);
}

[data-theme="light"] .checkout-submit-note { color: #6B7280; }

.checkout-footer { border-top-color: rgba(255,255,255,0.08); }
[data-theme="light"] .checkout-footer { border-top-color: rgba(0,0,0,0.08); }

.checkout-back--link { font-size: 0.82rem; }

/* Sin el emoji de advertencia: el texto ya dice que falta. */
.field-error { font-size: 0.76rem; }

/* --- Movil ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .checkout-payment-grid { grid-template-columns: repeat(2, 1fr); }
  .checkout-payment-btn--featured { grid-column: 1 / -1; }
  .trust-panel { margin-top: 14px; padding: 16px; }
  /* 16px o iOS hace zoom al enfocar un input. Regla ya aprendida en la card. */
  .checkout-field input { font-size: 16px; }
}

/* ─── AVISO DEL FILTRO DE TALLAS ─────────────────────────────────────────
   Sin categoría elegida no se muestran tallas, porque la talla solo significa
   algo dentro de una categoría: no existe un casco talla 42 ni una bota talla S.
   Antes esto estaba vacío (parecía roto) y después mezclaba las tallas de todas
   las categorías (peor: una lista sin sentido). Ahora lo dice. */
.size-filter-aviso {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-surface);
  background: var(--gray-medium);
  border: 1px dashed var(--gray-light);
  color: var(--gray-light-text);
  font-size: 0.82rem;
  line-height: 1.4;
}

.size-filter-aviso span {
  display: block;
  margin-top: 4px;
  color: var(--gray-text);
  font-size: 0.72rem;
}

/* El panel de bienvenida viejo vivia aca. Se reemplazo entero el
   2026-09-10 por la version por pasos, que esta al final del archivo.
   No se dejaron las dos: dos disenios del mismo cartel en la misma hoja
   es como la tienda termino con botones de 10px y casillas en capsula. */


/* ── BOTON COMPARTIR DE LA TIENDA — 2026-09-09 ─────────────────────────────
   Discreto a proposito: no compite con "Agregar al carrito", que es la accion
   que da plata. Lo usan Seven y Mauro para mandarle a un cliente el link de la
   categoria que pidio por WhatsApp; no es una accion de compra. */
.btn-compartir-vista {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-control);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: var(--gray-light-text);
  font-family: var(--font-primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.btn-compartir-vista:hover {
  border-color: var(--orange-primary);
  background: rgba(255, 102, 0, 0.12);
  color: var(--white);
}

.btn-compartir-vista svg { flex-shrink: 0; }

/* Mismo motivo que los chips de categoria: sobre fondo blanco, un borde blanco
   translucido no se ve y el boton parece texto suelto. */
[data-theme="light"] .btn-compartir-vista {
  /* !important como TODAS las reglas de modo claro de este archivo: hay estilos
     genericos de boton en la barra superior que si no ganan por especificidad. */
  background: #FFFFFF !important;
  border-color: #CCCCCC !important;
  color: #1A1A1A !important;
}

[data-theme="light"] .btn-compartir-vista:hover {
  border-color: var(--orange-primary) !important;
  background: rgba(255, 102, 0, 0.08) !important;
  color: #1A1A1A !important;
}

/* En el celular la barra ya va apretada: queda el icono solo. */
@media (max-width: 480px) {
  .btn-compartir-vista span { display: none; }
  .btn-compartir-vista { padding: 6px 10px; margin-left: 8px; }
}


/* Insignia del hero en pantallas angostas: entra en un renglon.
   Va al final del archivo a proposito, para ganarle a cualquier regla
   movil anterior sin tener que cazarlas una por una. */
@media (max-width: 480px) {
  .hero-badge {
    font-size: 0.68rem;
    letter-spacing: 1px;
    padding: 0.4rem 0.9rem;
  }
}


/* ================================================================
   EL DESPLEGABLE DE ESCRITORIO NO ENTRA AL MENU DEL CELULAR
   ================================================================
   Encontrado el 2026-09-10 midiendo por que el menu dejaba bajar
   hasta un vacio de medio metro.

   El mismo HTML de la barra de navegacion se reusa dentro del panel
   del celular, y con el viene .nav-dropdown-menu: el mega-menu de
   escritorio, cuatro columnas, 720px de ancho MINIMO y 813px de alto.
   Metido en un panel de 375px.

   Estaba "oculto" con transparencia y visibility, que esconde pero NO
   saca del espacio: le sumaba ~550px de scroll muerto al panel. El
   cliente bajaba el menu y despues de Contacto seguia habiendo media
   pantalla de nada, que se lee como que la tienda esta rota.

   Peor: se abre con :focus-within, asi que en un telefono bastaba que
   un link de adentro tomara el foco para desplegar 720px de ancho
   dentro de 375.

   No se pierde nada escondiendolo: para eso esta la grilla de
   categorias del propio menu, que hace lo mismo y entra en pantalla.
   ================================================================ */
.mobile-menu-panel .nav-dropdown-menu {
  display: none;
}

/* Y con el se va la flechita. Es un ::after del CSS de escritorio que
   anuncia "aca se despliega algo": en el celular ya no despliega nada,
   asi que prometia una cosa que no pasa. "Tienda" en el menu movil es
   un link comun que lleva a la tienda, y ahora se ve como lo que es. */
.mobile-menu-panel .nav-dropdown > a::after {
  content: none;
}



/* ================================================================
   PANEL DE BIENVENIDA — 2026-09-10
   ================================================================
   La version anterior se apago porque rompia el modo claro. Esta NO
   PUEDE romperlo, y no es cuidado: es que no tiene un solo color
   propio. Todo sale de los tokens —--gray-dark, --white, --orange-
   primary, --radius-surface, --radius-control—, que ya cambian solos
   con el tema. Un color escrito a mano aca seria el unico modo de
   volver a romperlo.

   Radios: el panel es una SUPERFICIE (10px) y todo lo que se toca
   adentro es un CONTROL (6px). La esquina de adentro nunca es mayor
   que la de afuera.
   ================================================================ */

.bv-capa {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
  background: rgba(0, 0, 0, 0.72);
  /* El catalogo se ve detras, apenas desenfocado: el cliente no pierde
     de vista que abajo hay una tienda esperandolo. */
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  /* NACE VISIBLE, y esto NO es un detalle de estilo.

     La primera version nacia en opacity:0 y una animacion la mostraba.
     Pero esa animacion no corre si la pestania esta en SEGUNDO PLANO
     —el navegador la congela—, y entonces el panel quedaba invisible
     con pointer-events:auto tapando la pantalla entera: la tienda se
     veia y no respondia a ningun clic. Pasa siempre que alguien abre
     un link en una pestania nueva y recien despues la mira, que es
     como llega la mitad del trafico de WhatsApp e Instagram.

     La regla es: si la animacion no corre, tiene que quedar BIEN, no
     roto. Por eso el estado final es el que esta escrito, y la
     animacion solo agrega la entrada. */
  opacity: 1;
  /* SIN `both`: ese fill-mode deja pegado el fotograma inicial (opacity 0)
     mientras la animacion no corre, que es justo lo que pasa en una pestania
     en segundo plano. Sin fill-mode, hasta que la animacion arranca de verdad
     manda el estilo escrito arriba, que es visible. */
  /* La animacion NO va aca: va en .bv-anima, que la agrega el JS solo si la
     pestania esta a la vista. Una animacion pausada en el cuadro cero deja
     pegado ese cuadro —opacity 0— aunque no se use fill-mode, y en una
     pestania de segundo plano el navegador la pausa justo ahi. El resultado
     era un panel invisible tapando la tienda entera. La entrada es un lujo;
     quedar tapado es una tienda muerta. */
}

.bv-capa.bv-anima { animation: bvEntrar 0.26s ease-out; }
.bv-capa.bv-anima .bv-panel { animation: bvSubir 0.26s cubic-bezier(0.2, 0, 0, 1); }

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

/* Al cerrar si se anima, pero el elemento se saca por JS con un
   temporizador, asi que tampoco depende de que la animacion corra. */
.bv-capa.bv-cerrando { opacity: 0; transition: opacity 0.22s ease-out; }

[data-theme="light"] .bv-capa {
  background: rgba(20, 20, 20, 0.45);
}



/* Mientras esta abierto, la pagina de atras no scrollea. */
body.bv-abierto { overflow: hidden; }

.bv-panel {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 2 * var(--spacing-sm));
  overflow: hidden;
  flex-direction: column;
  background: var(--gray-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-surface);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  /* Mismo criterio que la capa: la posicion final es la escrita. */
  transform: translateY(0);

}

@keyframes bvSubir {
  from { transform: translateY(10px); }
  to   { transform: translateY(0); }
}

[data-theme="light"] .bv-panel {
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}



/* En pantallas grandes el paso 2 y el 3 necesitan mas aire: las tallas
   son cuatro filas de casillas. */
.bv-panel:has(.bv-ancho) { max-width: 640px; }

.bv-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray-text);
  background: rgba(0, 0, 0, 0.35);
  border: none;
  border-radius: var(--radius-round);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.bv-cerrar:hover { color: var(--white); background: rgba(0, 0, 0, 0.55); }

/* La barra de progreso reemplaza al "01/03" como senial principal: se
   entiende sin leer. El numero queda igual, para quien lo quiera. */
.bv-progreso {
  height: 3px;
  background: rgba(255, 255, 255, 0.10);
  flex: 0 0 auto;
}

.bv-progreso-barra {
  display: block;
  height: 100%;
  background: var(--orange-primary);
  transition: width 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.bv-cuerpo {
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bv-columna-foto {
  flex: 0 0 190px;
  background-image: image-set(
    url("../assets/images/bienvenida/bienvenida.webp") 1x,
    url("../assets/images/bienvenida/bienvenida.webp") 2x
  );
  background-image: url("../assets/images/bienvenida/bienvenida.webp");
  background-size: cover;
  background-position: center 30%;
}

.bv-columna-texto {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.bv-centrado { align-items: center; text-align: center; }

.bv-paso {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-text);
}

.bv-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--white);
}

.bv-titulo em {
  font-style: normal;
  color: var(--orange-primary);
}

.bv-bajada {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--gray-light-text);
}

.bv-bajada strong { color: var(--white); font-weight: 700; }

.bv-nota {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-size: 0.78rem;
  color: var(--gray-text);
}

.bv-label {
  margin: var(--spacing-xs) 0 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-text);
}

.bv-filas {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.bv-fila { display: flex; flex-direction: column; gap: 6px; }

.bv-fila-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-light-text);
}

.bv-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.bv-chips-anchos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bv-chip {
  /* 40px de alto: es un control chico dentro de un panel, pero sigue
     siendo tocable con el dedo. */
  min-height: 40px;
  padding: 0 14px;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-light-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast);
}

[data-theme="light"] .bv-chip {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.14);
}

.bv-chip:hover {
  border-color: rgba(255, 102, 0, 0.6);
  color: var(--white);
}

/* Doble clase a proposito: `[data-theme="light"] .bv-chip` pesa mas que
   `.bv-chip-on` y le pisaba el naranja, asi que en modo claro la casilla
   elegida se veia igual que las demas — no habia forma de saber que habias
   contestado. Es la misma familia de error que apago el panel anterior por
   "romper el modo claro": una regla de tema ganandole a una de estado.
   `.bv-chip.bv-chip-on` empata en peso y gana por venir despues. */
.bv-chip.bv-chip-on {
  background: var(--orange-primary);
  border-color: var(--orange-primary);
  /* Negro sobre naranja: 7,2:1 de contraste. Blanco daria 2,9:1 y no
     pasa el minimo accesible. Misma regla que los botones de la tienda. */
  color: #0A0A0A;
}

.bv-chip:focus-visible,
.bv-btn:focus-visible,
.bv-cerrar:focus-visible {
  outline: 2px solid var(--orange-hover);
  outline-offset: 2px;
}

.bv-acciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--spacing-sm);
}

.bv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 48px: es la accion principal de la pantalla y se toca con el pulgar. */
  min-height: 48px;
  padding: 0 var(--spacing-md);
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.bv-btn-primario { background: var(--orange-primary); color: #0A0A0A; }
.bv-btn-primario:hover { background: var(--orange-hover); transform: translateY(-1px); }
.bv-btn-primario:active { background: var(--orange-dark); transform: translateY(0); }

.bv-btn-fantasma {
  background: transparent;
  color: var(--gray-text);
  min-height: 40px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.bv-btn-fantasma:hover { color: var(--white); }

.bv-tilde {
  font-size: 3rem;
  line-height: 1;
  color: var(--orange-primary);
}

/* ---- Celular ---- */
@media (max-width: 560px) {
  .bv-panel { max-width: 100%; }

  /* La foto pasa de columna lateral a franja de arriba: en 375px de
     ancho, 190px de foto al costado dejarian el texto en un hilo. */
  .bv-cuerpo { flex-direction: column; }
  /* 12% y no 25%: en escritorio la foto es una columna alta y entra el
     piloto entero, pero en celular es una franja ancha y baja, o sea un
     recorte mucho mas cerrado. Con 25% el encuadre arrancaba en el pecho y
     le cortaba la cabeza — el casco, que es justo lo que vende la tienda. */
  .bv-columna-foto { flex: 0 0 132px; background-position: center 12%; }

  .bv-columna-texto { padding: var(--spacing-md); }
  .bv-titulo { font-size: 1.7rem; }
  .bv-chips-anchos { grid-template-columns: 1fr; }
}

/* Quien pidio que no se le muevan las cosas, no se le mueven. */
@media (prefers-reduced-motion: reduce) {
  .bv-capa,
  .bv-panel,
  .bv-progreso-barra,
  .bv-btn { transition: none; }
}



/* >>> ICONOS-INICIO (generado por generate-icons.mjs) */

/* ================================================================
   ICONOS DE CATEGORIA — 2026-09-10
   ================================================================
   Antes cada categoria llevaba un emoji del sistema delante del
   nombre. Tres problemas, no uno:

     1. Cada telefono los dibuja distinto (el casco de Android no es
        el de iPhone), asi que la tienda se veia diferente en cada
        pantalla y no habia forma de controlarlo.
     2. Sus colores —verde, azul, morado— peleaban contra el naranja
        y el negro de la marca.
     3. La lista esta escrita en TRES lugares (la home, el menu
        desplegable y la tienda) y los emojis no coincidian entre si:
        "Uniformes" y "Jerseys" usaban exactamente el mismo.

   La solucion no es cambiar un emoji por otro: es que el icono deje
   de ser TEXTO. Estos son dibujos, definidos UNA sola vez aca, y se
   pintan con mascara para que tomen el color del chip solos —claro
   en reposo, negro cuando esta elegido— sin que nadie tenga que
   mantener una segunda lista de colores en paralelo.

   PARA AGREGAR UNA CATEGORIA: se suma su dibujo al mapa ICONOS del
   generador y se le pone data-category="su-slug" al chip. Nada mas.
   ================================================================ */

.category-chip::before {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Un chip cuyo slug no esta en la lista no muestra un cuadrado vacio:
   no muestra nada. Es preferible que falte el icono a que aparezca un
   hueco que el cliente lee como imagen rota. */
.category-chip:not([data-category])::before,
.category-chip[data-category=""]::before { display: none; }

/* La barra lateral de la tienda NO lleva icono, y es a proposito.
   Ahi las casillas van en una grilla de dos columnas donde el nombre
   mas largo ("Protecciones") ya se parte en dos renglones: meterle un
   dibujo de 18px al lado desarma la grilla y vuelve a pasar lo que ese
   bloque arreglo en su momento. El icono es para donde hay aire —el
   menu desplegable y la home—, no para donde no lo hay. */
.category-chips .category-chip::before { display: none; }

/* El icono grande de la tarjeta de categoria. Antes era un emoji de
   5rem al 20% de opacidad detras del titulo; ahora es el mismo dibujo
   de la casilla, en grande, y en naranja apagado. */
.category-icon[data-category] {
  display: block;
  width: 84px;
  height: 84px;
  background-color: var(--orange-primary);
  opacity: 0.22;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.category-chip[data-category="cascos"]::before,
.category-icon[data-category="cascos"],
.ico[data-ico="cascos"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14a9 9 0 0 1 18 0v2H8.5A5.5 5.5 0 0 1 3 10.5Z'/%3E%3Cpath d='M3 16h18'/%3E%3Cpath d='M12 5v9'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14a9 9 0 0 1 18 0v2H8.5A5.5 5.5 0 0 1 3 10.5Z'/%3E%3Cpath d='M3 16h18'/%3E%3Cpath d='M12 5v9'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.category-chip[data-category="uniformes"]::before,
.category-icon[data-category="uniformes"],
.ico[data-ico="uniformes"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.5a2 2 0 1 1 2 2c-1.1 0-2 .9-2 2v.5'/%3E%3Cpath d='M12 10 3.6 16.4A1 1 0 0 0 4.2 18h15.6a1 1 0 0 0 .6-1.6L12 10Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.5a2 2 0 1 1 2 2c-1.1 0-2 .9-2 2v.5'/%3E%3Cpath d='M12 10 3.6 16.4A1 1 0 0 0 4.2 18h15.6a1 1 0 0 0 .6-1.6L12 10Z'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.category-chip[data-category="botas"]::before,
.category-icon[data-category="botas"],
.ico[data-ico="botas"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h4v9l7 4v5H8Z'/%3E%3Cpath d='M8 8h4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h4v9l7 4v5H8Z'/%3E%3Cpath d='M8 8h4'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.category-chip[data-category="jersey"]::before,
.category-icon[data-category="jersey"],
.ico[data-ico="jersey"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 4 6.5 6 11l2-1v10h8V10l2 1 2-4.5L15 4a3 3 0 0 1-6 0Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 4 6.5 6 11l2-1v10h8V10l2 1 2-4.5L15 4a3 3 0 0 1-6 0Z'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.category-chip[data-category="guantes"]::before,
.category-icon[data-category="guantes"],
.ico[data-ico="guantes"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12V6.5a1.5 1.5 0 0 1 3 0V12m0 0V4.8a1.5 1.5 0 0 1 3 0V12m0 0V6.5a1.5 1.5 0 0 1 3 0V13a8 8 0 0 1-8 8 5 5 0 0 1-4-8l1-1.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12V6.5a1.5 1.5 0 0 1 3 0V12m0 0V4.8a1.5 1.5 0 0 1 3 0V12m0 0V6.5a1.5 1.5 0 0 1 3 0V13a8 8 0 0 1-8 8 5 5 0 0 1-4-8l1-1.5'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.category-chip[data-category="gafas"]::before,
.category-icon[data-category="gafas"],
.ico[data-ico="gafas"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18v4a4 4 0 0 1-4 4h-1l-2-3h-4l-2 3H7a4 4 0 0 1-4-4Z'/%3E%3Cpath d='M6 9V7h12v2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18v4a4 4 0 0 1-4 4h-1l-2-3h-4l-2 3H7a4 4 0 0 1-4-4Z'/%3E%3Cpath d='M6 9V7h12v2'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.category-chip[data-category="protecciones"]::before,
.category-icon[data-category="protecciones"],
.ico[data-ico="protecciones"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.3-2.9 7.8-7 9.5-4.1-1.7-7-5.2-7-9.5V6Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.3-2.9 7.8-7 9.5-4.1-1.7-7-5.2-7-9.5V6Z'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.category-chip[data-category="gorras"]::before,
.category-icon[data-category="gorras"],
.ico[data-ico="gorras"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15a8 8 0 0 1 16 0Z'/%3E%3Cpath d='M20 15h1.5a1.75 1.75 0 0 1 0 3.5H13'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15a8 8 0 0 1 16 0Z'/%3E%3Cpath d='M20 15h1.5a1.75 1.75 0 0 1 0 3.5H13'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.category-chip[data-category="maletas"]::before,
.category-icon[data-category="maletas"],
.ico[data-ico="maletas"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5a6 6 0 0 1 12 0V20H6Z'/%3E%3Cpath d='M9 20v-5.5h6V20'/%3E%3Cpath d='M9 9.5V7.5a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5a6 6 0 0 1 12 0V20H6Z'/%3E%3Cpath d='M9 20v-5.5h6V20'/%3E%3Cpath d='M9 9.5V7.5a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.category-chip[data-category="accesorios"]::before,
.category-icon[data-category="accesorios"],
.ico[data-ico="accesorios"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='12' rx='2'/%3E%3Cpath d='M9 8V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='12' rx='2'/%3E%3Cpath d='M9 8V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.category-chip[data-category="ninos"]::before,
.category-icon[data-category="ninos"],
.ico[data-ico="ninos"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2.5'/%3E%3Cpath d='M8.5 21v-5H7l1.9-5.2A2 2 0 0 1 10.8 9.5h2.4a2 2 0 0 1 1.9 1.3L17 16h-1.5v5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2.5'/%3E%3Cpath d='M8.5 21v-5H7l1.9-5.2A2 2 0 0 1 10.8 9.5h2.4a2 2 0 0 1 1.9 1.3L17 16h-1.5v5'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.category-chip[data-category="all"]::before,
.category-icon[data-category="all"],
.ico[data-ico="all"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1'/%3E%3C/svg%3E");
  background-color: currentColor;
}


/* ----------------------------------------------------------------
   ICONOS DE INTERFAZ
   ----------------------------------------------------------------
   Se usan asi:  <i class="ico" data-ico="alerta" aria-hidden="true"></i>

   Miden 1em y toman el color del texto, o sea que se adaptan solos al
   tamano y al color de donde caigan: en un aviso de error salen rojos y
   chicos, en el encabezado del checkout salen grandes y naranjas, sin
   una sola regla extra. Un emoji no puede hacer eso — tiene sus propios
   colores y su propio tamano, y por eso nunca terminaba de encajar.

   aria-hidden porque son decoracion: al lado siempre hay texto que dice
   lo mismo. Un lector de pantalla que los anuncie repite todo dos veces.
   ---------------------------------------------------------------- */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.125em;
  /* SIN color de fondo aca. El color lo enciende cada dibujo.
     Si estuviera en la base, un data-ico que no existe —un nombre mal
     escrito, un icono que se borro— pintaria un CUADRADO SOLIDO, porque
     una mascara vacia no recorta nada. Y un cuadrado blanco al lado de
     un texto se lee como que la pagina esta rota. Asi, lo peor que puede
     pasar es que no se vea el icono. */
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.ico[data-ico="alerta"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5'/%3E%3Cpath d='M12 16.2h.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5'/%3E%3Cpath d='M12 16.2h.01'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.ico[data-ico="pago"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M2.5 10h19'/%3E%3Cpath d='M6 14.5h4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M2.5 10h19'/%3E%3Cpath d='M6 14.5h4'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.ico[data-ico="caja"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5Z'/%3E%3Cpath d='m3 7.5 9 4.5 9-4.5'/%3E%3Cpath d='M12 12v9'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5Z'/%3E%3Cpath d='m3 7.5 9 4.5 9-4.5'/%3E%3Cpath d='M12 12v9'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.ico[data-ico="whatsapp"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5 5 16.2a8.5 8.5 0 1 1 3.3 3.2Z'/%3E%3Cpath d='M9 9.2c0 3 2.4 5.4 5.3 5.4.6 0 1-.4 1-.9v-.7l-1.6-.7-.8 1a5.4 5.4 0 0 1-2.3-2.3l1-.8-.7-1.6h-.8c-.5 0-.9.4-.9 1Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5 5 16.2a8.5 8.5 0 1 1 3.3 3.2Z'/%3E%3Cpath d='M9 9.2c0 3 2.4 5.4 5.3 5.4.6 0 1-.4 1-.9v-.7l-1.6-.7-.8 1a5.4 5.4 0 0 1-2.3-2.3l1-.8-.7-1.6h-.8c-.5 0-.9.4-.9 1Z'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.ico[data-ico="moto"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='16.5' r='3.5'/%3E%3Ccircle cx='18.5' cy='16.5' r='3.5'/%3E%3Cpath d='M5.5 16.5 9 10h5l2.5 6.5'/%3E%3Cpath d='M9 10 8 7H6'/%3E%3Cpath d='M14 10h4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='16.5' r='3.5'/%3E%3Ccircle cx='18.5' cy='16.5' r='3.5'/%3E%3Cpath d='M5.5 16.5 9 10h5l2.5 6.5'/%3E%3Cpath d='M9 10 8 7H6'/%3E%3Cpath d='M14 10h4'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.ico[data-ico="descuento"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.8V4.5a1 1 0 0 1 1-1h8.3a1 1 0 0 1 .7.3l6.7 6.7a1 1 0 0 1 0 1.4l-8.3 8.3a1 1 0 0 1-1.4 0L3.8 13.5a1 1 0 0 1-.3-.7Z'/%3E%3Cpath d='M8 8h.01'/%3E%3Cpath d='m11.5 15 4-4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.8V4.5a1 1 0 0 1 1-1h8.3a1 1 0 0 1 .7.3l6.7 6.7a1 1 0 0 1 0 1.4l-8.3 8.3a1 1 0 0 1-1.4 0L3.8 13.5a1 1 0 0 1-.3-.7Z'/%3E%3Cpath d='M8 8h.01'/%3E%3Cpath d='m11.5 15 4-4'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.ico[data-ico="clientes"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 5.4a3.2 3.2 0 0 1 0 5.2'/%3E%3Cpath d='M18 14.4a6.5 6.5 0 0 1 3.5 5.6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 5.4a3.2 3.2 0 0 1 0 5.2'/%3E%3Cpath d='M18 14.4a6.5 6.5 0 0 1 3.5 5.6'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.ico[data-ico="envio"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h11v10h-11Z'/%3E%3Cpath d='M13.5 10h4l4 3.2v3.3h-8Z'/%3E%3Ccircle cx='7' cy='18.5' r='2'/%3E%3Ccircle cx='17.5' cy='18.5' r='2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h11v10h-11Z'/%3E%3Cpath d='M13.5 10h4l4 3.2v3.3h-8Z'/%3E%3Ccircle cx='7' cy='18.5' r='2'/%3E%3Ccircle cx='17.5' cy='18.5' r='2'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.ico[data-ico="explorar"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.ico[data-ico="detalles"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3Cpath d='M7.8 10.5h5.4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3Cpath d='M7.8 10.5h5.4'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.ico[data-ico="carrito"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.6l2.3 11h10.2'/%3E%3Cpath d='M6.4 6.5h14.3l-1.6 6.4H7.7'/%3E%3Ccircle cx='9' cy='19' r='1.6'/%3E%3Ccircle cx='17.5' cy='19' r='1.6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.6l2.3 11h10.2'/%3E%3Cpath d='M6.4 6.5h14.3l-1.6 6.4H7.7'/%3E%3Ccircle cx='9' cy='19' r='1.6'/%3E%3Ccircle cx='17.5' cy='19' r='1.6'/%3E%3C/svg%3E");
  background-color: currentColor;
}

.ico[data-ico="regla"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='8' width='19' height='8' rx='1.5'/%3E%3Cpath d='M7 8v3'/%3E%3Cpath d='M11 8v4.5'/%3E%3Cpath d='M15 8v3'/%3E%3Cpath d='M19 8v4.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='8' width='19' height='8' rx='1.5'/%3E%3Cpath d='M7 8v3'/%3E%3Cpath d='M11 8v4.5'/%3E%3Cpath d='M15 8v3'/%3E%3Cpath d='M19 8v4.5'/%3E%3C/svg%3E");
  background-color: currentColor;
}

/* Los avisos de error de cada campo del checkout llevaban un emoji de
   advertencia escrito DENTRO del texto, repetido en cinco campos y en
   dos archivos: diez copias del mismo caracter. Ahora el dibujo lo pone
   el CSS una sola vez y el texto vuelve a ser solo texto — que ademas
   es lo que necesita un lector de pantalla para leerlo bien. */
.field-error {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.field-error::before {
  content: '';
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5'/%3E%3Cpath d='M12 16.2h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5'/%3E%3Cpath d='M12 16.2h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* <<< ICONOS-CATEGORIA-FIN */

/* ================================================================
   FICHA DE PRODUCTO v3 — 2026-09-21
   Va al FINAL a proposito: pisa las reglas viejas de la ficha sin
   tener que buscarlas una por una en 12.000 lineas.

   1. UN solo header. La miga (.breadcrumb) era una franja gris con
      borde pegada arriba de todo: el header flotante se apoyaba encima
      y se leia como una barra cortandolo por la mitad. Ahora la miga
      no pinta nada y arranca DEBAJO del header, como en la portada.
   2. Galeria: miniaturas que funcionan, lupa discreta, visor.
   3. Tallas en chips.
   4. Info de compra con iconos de linea, sin emojis.
   5. Relacionados en dos bandas.
   ================================================================ */

/* 1. Header unico */
.breadcrumb {
  background: transparent;
  border-bottom: 0;
  padding: calc(var(--header-clearance) + var(--spacing-sm)) 0 0;
}

.breadcrumb .container { gap: 0.5rem; }
.breadcrumb a,
.breadcrumb-current { font-size: 0.85rem; }
.breadcrumb-current {
  color: var(--gray-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 48ch;
}

.breadcrumb + .section { padding-top: var(--spacing-md); }

/* 2. Galeria */
.product-detail-gallery { top: calc(var(--header-clearance) + var(--spacing-sm)); }

.main-image-container { background: #fff; }

.product-main-img {
  cursor: zoom-in;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.product-main-img:hover { transform: none; }

.pd-zoom-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 11;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-control);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.9);
  color: #1a1a1a;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: transform 160ms ease-out, background-color 160ms ease;
}

.pd-zoom-btn:active { transform: scale(0.95); }

@media (hover: hover) and (pointer: fine) {
  .pd-zoom-btn:hover { background: #fff; color: var(--orange-dark); }
}

.pd-counter {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 11;
  padding: 3px 8px;
  border-radius: var(--radius-control);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.thumbnail-container {
  gap: 0.5rem;
  padding: 2px;
  scrollbar-width: thin;
}

.thumbnail {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  padding: 0;
  width: 76px;
  height: 76px;
  background: #fff;
  border: 1px solid var(--gray-light);
  opacity: 0.72;
  transition: border-color 160ms ease, opacity 160ms ease;
}

.thumbnail img { object-fit: contain; }

.thumbnail:hover { opacity: 1; border-color: var(--gray-lighter); }

.thumbnail.active {
  opacity: 1;
  border-color: var(--orange-primary);
  box-shadow: 0 0 0 1px var(--orange-primary);
}

.thumbnail:focus-visible,
.pd-zoom-btn:focus-visible,
.pd-back:focus-visible {
  outline: 2px solid var(--orange-primary);
  outline-offset: 2px;
}

/* Visor a pantalla completa. Fondo oscuro en los dos temas: las fotos
   son de fondo blanco y en un visor claro se pierden los bordes. */
.pd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.94);
  padding: 56px 72px;
}

.pd-lightbox.is-open {
  display: flex;
  animation: pd-lb-in 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes pd-lb-in { from { opacity: 0; } to { opacity: 1; } }

html.pd-lb-lock,
html.pd-lb-lock body { overflow: hidden; }

.pd-lb-stage {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pd-lb-img {
  /* Alto completo del visor: las fotos del CMS rondan 500-800px y con
     solo max-* quedaban chicas en una pantalla de 1080. */
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  background: transparent;
  border-radius: var(--radius-surface);
  -webkit-user-select: none;
  user-select: none;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .pd-lb-img { cursor: zoom-in; }
  .pd-lb-stage.is-zoomed .pd-lb-img { cursor: zoom-out; transform: scale(2); }
}

.pd-lb-close,
.pd-lb-nav {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease-out;
}

.pd-lb-close { top: 12px; right: 12px; width: 44px; height: 44px; }
.pd-lb-nav { top: 50%; width: 48px; height: 48px; margin-top: -24px; }
.pd-lb-prev { left: 12px; }
.pd-lb-next { right: 12px; }
.pd-lb-close:active,
.pd-lb-nav:active { transform: scale(0.95); }
.pd-lb-close:focus-visible,
.pd-lb-nav:focus-visible { outline: 2px solid var(--orange-primary); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .pd-lb-close:hover,
  .pd-lb-nav:hover { background: rgba(255, 255, 255, 0.18); }
}

.pd-lb-counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .pd-lightbox { padding: 64px 0 56px; }
  .pd-lb-img { border-radius: 0; }
  .pd-lb-nav { top: auto; bottom: 8px; margin-top: 0; width: 44px; height: 44px; }
  .pd-lb-prev { left: 16px; }
  .pd-lb-next { right: 16px; }
  .pd-lb-counter { bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-lightbox.is-open { animation: none; }
  .pd-lb-img { transition: none; }
}

/* Encabezado: marca · categoria, sin emoji de marca. */
.pd-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pd-brand { color: var(--white); }
.pd-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gray-lighter); }
.pd-category { color: var(--orange-primary); text-decoration: none; }
.pd-category:hover { text-decoration: underline; }
[data-theme="light"] .pd-category { color: var(--orange-dark); }

.product-detail-price {
  text-shadow: none;
  margin-bottom: var(--spacing-lg);
  font-variant-numeric: tabular-nums;
}

/* 3. Tallas en chips */
.pd-sizes {
  border: 0;
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  min-width: 0;
}

.pd-sizes-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.pd-sizes-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}

.pd-sizes-selected { color: var(--gray-text); font-size: 0.9rem; }

.pd-sizes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pd-size { position: relative; cursor: pointer; }

.pd-size input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.pd-size-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .pd-size:not(.is-out):hover .pd-size-label { border-color: var(--white); }
}

.pd-size:not(.is-out):active .pd-size-label { transform: scale(0.97); }

.pd-size input:checked + .pd-size-label {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

.pd-size input:focus-visible + .pd-size-label {
  outline: 2px solid var(--orange-primary);
  outline-offset: 2px;
}

.pd-size.is-out { cursor: not-allowed; }
.pd-size.is-out .pd-size-label {
  color: var(--gray-lighter);
  border-style: dashed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.pd-sizes.is-missing .pd-size:not(.is-out) .pd-size-label {
  border-color: var(--red-accent);
  animation: pd-shake 260ms ease-out;
}

@keyframes pd-shake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .pd-sizes.is-missing .pd-size .pd-size-label { animation: none; }
}

.pd-size-guide {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  color: var(--gray-light-text);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gray-lighter);
}

.pd-size-guide:hover { color: var(--orange-primary); }

.pd-sizes--single .pd-sizes-head { margin-bottom: 0; }

/* Acciones */
.product-actions-section { gap: 0.75rem; margin-bottom: var(--spacing-lg); }
.product-actions-section .btn {
  width: 100%;
  min-height: 52px;
  padding: 0 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.2;
}
.product-actions-section .btn .ico { width: 1.15em; height: 1.15em; }
.product-actions-section .btn-cart-add { font-size: 0.95rem; }
.product-actions-section .btn-cart-add[aria-disabled="true"] { opacity: 0.55; }
.product-actions-section .btn-cart-add.is-added { background: #1f9d55; color: #fff; }

.pd-size-hint {
  margin: -0.25rem 0 0;
  color: var(--red-accent);
  font-size: 0.85rem;
  font-weight: 600;
}

/* 4. Informacion de compra */
.pd-info {
  list-style: none;
  margin: 0 0 var(--spacing-xl);
  padding: var(--spacing-md) 0 0;
  border-top: 1px solid var(--gray-light);
  display: grid;
  gap: 0.9rem;
}

.pd-info li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.75rem;
  align-items: start;
  color: var(--gray-light-text);
  font-size: 0.9rem;
  line-height: 1.5;
}

.pd-info .pd-ico { color: var(--gray-text); margin-top: 1px; }
.pd-info strong { color: var(--white); font-weight: 600; }
.pd-info li.is-ok .pd-ico { color: #22a559; }
.pd-info li.is-out .pd-ico,
.pd-info li.is-out strong { color: #dc2626; }
.pd-info a { color: var(--gray-light-text); text-underline-offset: 3px; text-decoration-color: var(--gray-lighter); white-space: nowrap; }
.pd-info a:hover { color: var(--orange-primary); }

.description-title,
.features-title { font-size: 1.1rem; }

.features-list li::before {
  content: '';
  top: 0.55em;
  width: 12px;
  height: 12px;
  background-color: var(--orange-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pd-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--spacing-md);
  color: var(--gray-light-text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.pd-back:hover { color: var(--orange-primary); }

/* 5. Relacionados en dos bandas */
.related-section { background: var(--gray-medium); }
.related-section[hidden],
.related-band[hidden] { display: none; }

.related-band + .related-band { margin-top: var(--spacing-xl); }

.related-band-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 var(--spacing-md);
}

.related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.related-more { text-align: center; margin-top: var(--spacing-xl); }

@media (max-width: 1024px) {
  .product-detail-content { padding: 0; }
}

@media (max-width: 640px) {
  .breadcrumb-current { max-width: 22ch; }
  .thumbnail { width: 60px; height: 60px; }
  .related-band-title { font-size: 1.1rem; }
  .products-grid.related-grid { padding: 0; }
}

/* ================================================================
   BOTON "VER" EN MODO CLARO — 2026-09-21
   .btn-secondary tenia el borde escrito a mano en blanco translucido
   (rgba 255,255,255,.24): en oscuro se ve, en claro desaparece y el
   boton queda como texto suelto. Aplica a TODAS las tarjetas (tienda,
   portada, relacionados) y a cualquier otro boton secundario.
   ================================================================ */
[data-theme="light"] .btn-secondary {
  border-color: rgba(0, 0, 0, 0.28);
  color: #1a1a1a;
}

[data-theme="light"] .btn-secondary:hover {
  border-color: var(--orange-dark);
  color: var(--orange-dark);
}

/* ================================================================
   NOSOTROS + CONTACTO — 2026-09-21
   Una sola pagina, sobria: tipografia de marca, naranja solo como
   acento, iconos de linea, nada de brillos ni fondos "galaxia".
   ================================================================ */
.about-page { --about-max: 1120px; }
.about-page .container { max-width: var(--about-max); }

.about-hero {
  padding: calc(var(--header-clearance) + var(--spacing-2xl)) 0 var(--spacing-xl);
  border-bottom: 1px solid var(--gray-light);
}

.about-eyebrow {
  margin: 0 0 0.75rem;
  color: var(--orange-primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

[data-theme="light"] .about-eyebrow { color: var(--orange-dark); }

.about-title {
  max-width: 22ch;
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}

.about-lead {
  max-width: 60ch;
  margin: 0 0 var(--spacing-lg);
  color: var(--gray-light-text);
  font-size: 1.1rem;
  line-height: 1.7;
}

.about-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.about-block { padding: var(--spacing-2xl) 0; }
.about-block--alt { background: var(--gray-medium); }

.about-h2 {
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  text-align: left;
}

.about-text {
  max-width: 58ch;
  color: var(--gray-light-text);
  font-size: 1.02rem;
  line-height: 1.75;
  margin: 0 0 var(--spacing-sm);
}

.about-text strong { color: var(--white); }
.about-text--intro { margin-bottom: var(--spacing-lg); }

.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
  align-items: start;
}

.about-points,
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-md);
}

.about-points li,
.contact-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 1rem;
  align-items: start;
}

.about-points li + li,
.contact-list li + li {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-light);
}

.about-ico { color: var(--orange-primary); margin-top: 2px; }

.about-points h3,
.contact-list h3,
.about-values h3 {
  margin: 0 0 0.3rem;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
}

.about-points p,
.contact-list p,
.about-values p {
  margin: 0;
  color: var(--gray-light-text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.about-points a,
.contact-list a,
.about-faq a {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--orange-primary);
}

.contact-list a { display: inline-block; margin-top: 0.35rem; font-size: 0.95rem; }
.about-points a:hover,
.contact-list a:hover,
.about-faq a:hover { color: var(--orange-primary); }

.about-values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-lg) var(--spacing-2xl);
}

.about-values li {
  padding-top: var(--spacing-sm);
  border-top: 2px solid var(--white);
}

.about-num {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--orange-primary);
  font-variant-numeric: tabular-nums;
}

[data-theme="light"] .about-num { color: var(--orange-dark); }

.about-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-2xl);
  align-items: start;
}

.about-social { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.about-social .social-link { margin: 0; }

.about-form {
  background: var(--gray-medium);
  border: 1px solid var(--gray-light);
  padding: var(--spacing-lg);
}

.about-form-title {
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}

.about-form .form-input,
.about-form .form-textarea {
  padding: 0.85rem 1rem;
  font-size: 16px; /* 16px: iOS no hace zoom al enfocar */
  background: var(--black);
  border-color: var(--gray-light);
}

[data-theme="light"] .about-form .form-input,
[data-theme="light"] .about-form .form-textarea { background: #fff; }

.about-form .form-textarea { min-height: 120px; }

.about-form-note {
  margin: var(--spacing-sm) 0 0;
  color: var(--gray-text);
  font-size: 0.85rem;
  text-align: center;
}

.about-map {
  margin-top: var(--spacing-xl);
  border-radius: var(--radius-surface);
  overflow: hidden;
  border: 1px solid var(--gray-light);
  height: 360px;
  background: var(--gray-medium);
}

.about-map iframe { display: block; width: 100%; height: 100%; border: 0; }

.about-faq { margin: var(--spacing-lg) 0 0; color: var(--gray-light-text); }

#contacto { scroll-margin-top: calc(var(--header-clearance) + 8px); }

@media (max-width: 900px) {
  .about-split,
  .about-contact { grid-template-columns: 1fr; gap: var(--spacing-xl); }
}

@media (max-width: 640px) {
  .about-hero { padding: calc(var(--header-clearance) + var(--spacing-lg)) 0 var(--spacing-lg); }
  .about-block { padding: var(--spacing-xl) 0; }
  .about-values { grid-template-columns: 1fr; }
  .about-form { padding: var(--spacing-md); }
  .about-map { height: 280px; }
  .about-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* El hero de /promociones es una foto oscura en los DOS temas: en claro
   el titulo, el subtitulo y el boton secundario heredaban texto oscuro
   y quedaban negro sobre negro. 2026-09-21. */
[data-theme="light"] .promo-hero .promo-hero-title,
[data-theme="light"] .promo-hero .promo-hero-subtitle { color: #fff; }

[data-theme="light"] .promo-hero .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

[data-theme="light"] .promo-hero .btn-secondary:hover {
  color: var(--orange-primary);
  border-color: var(--orange-primary);
}