/* ============================================
   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;

  /* ZAP Buscador (pieza comun, ZAP-DESIGN/buscador): mapeo de colores del
     sitio, UNA sola vez aca para que lo use cualquier pagina que cargue
     zap-buscador.css, en vez de repetir el bloque en cada <head>. */
  --zb-fondo: var(--gray-dark);
  --zb-texto: var(--white);
  --zb-suave: var(--gray-text);
  --zb-acento: var(--orange-primary);
  --zb-borde: var(--gray-lighter);
  --zb-hover: var(--gray-medium);
  --zb-foto: #ffffff;
  --zb-radio: var(--radius-control);
  --zb-fuente: inherit;
  --zb-sombra: var(--shadow-lg);
}

/* ================================
   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;

  /* ZAP Buscador en modo claro */
  --zb-fondo: #ffffff;
  --zb-texto: #1A1A1A;
  --zb-suave: #6B6B6B;
  --zb-borde: #CCCCCC;
  --zb-hover: #F0F0F0;

  --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;
  border-color: rgba(0,0,0,0.12);
  color: #333333;
}

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

/* Theme transition for smooth switching — QUITADA el 2026-10-28: era de antes
   de ZAP Movimiento y quedó compitiendo con la nube en cada cambio de tema.
   Medido en /shop.html: afectaba 351 elementos (298 son .product-card), cada
   uno con su propia transición CSS corriendo a la vez que la nube (que ya
   anima el crossfade entero por compositor). Dos animaciones por el mismo
   cambio = el "a pocos FPS" que notó Seven. ZAP Movimiento ya cubre el caso
   sin View Transitions con su propio fallback (.zm-funde en zap-movimiento.css),
   así que esta regla ya no hacía falta en ningún navegador. */

/* ================================
   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);
}

/* En PC la isla mide lo que mide su contenido — 2026-09-25. Con 4 links
   estirada a 1400px quedaban dos huecos enormes entre logo, menu y
   acciones. En celular el menu es un cajon aparte y no aplica. */
@media (min-width: 769px) {
  .nav {
    width: fit-content;
    max-width: 100%;
    gap: var(--spacing-xl);
  }

  .nav-links {
    flex: 0 1 auto;
  }
}

.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;
}

/* Entrada del titulo — 2026-09-25. Antes el h1 entero hacia un fadeInUp
   que casi no se notaba, y encima un "tilt 3D" siguiendo al mouse lo
   inclinaba (se veia torcido en cualquier captura). Ahora cada palabra
   sube desde atras de una mascara, rapida y con frenada seca: velocidad,
   no flotacion. Es la vibra de motocross. */
.hero-title {
  margin-bottom: var(--spacing-md);
}

.hero-title .hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.hero-title .hw > span {
  display: inline-block;
  transform: translateY(110%);
  animation: heroWordIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(0.15s + var(--i) * 0.08s) forwards;
}

.hero-title .hero-title-accent {
  background: var(--gradient-orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation-duration: 0.85s;
}

@keyframes heroWordIn {
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .hw > span {
    animation: none;
    transform: none;
  }
}

.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. */
/* 2026-09-25: titulo mas grande y que crece con la pantalla, menos aire
   (antes ~88px arriba y abajo contando el gap de la grilla) y mas pegado
   a SUS productos que a la categoria anterior. */
.category-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 32px);
  padding: clamp(8px, 1.5vw, 20px) 0 0;
  margin: clamp(8px, 1.2vw, 16px) 0 0;
  /* Hacer que el separador ocupe todo el ancho del grid */
  grid-column: 1 / -1;
  width: 100%;
}

/* Scoped con ">" a proposito: .category-divider-line tambien existe en el
   sidebar (mas abajo, ~linea 3350) y se pisaban. Las lineas ahora cruzan
   todo el ancho y se desvanecen hacia los bordes, naranja junto al titulo. */
.category-divider > .category-divider-line {
  flex: 1;
  width: auto;
  max-width: none;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 102, 0, 0.5));
  transform-origin: right center;
}

.category-divider > .category-divider-content ~ .category-divider-line {
  background: linear-gradient(90deg, rgba(255, 102, 0, 0.5), transparent);
  transform-origin: left center;
}

/* Las lineas se "abren" desde el titulo al entrar en pantalla. Solo en
   navegadores con scroll-driven animations; en el resto quedan quietas. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .category-divider > .category-divider-line {
      animation: dividerLineOpen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
  }
}

@keyframes dividerLineOpen {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Divisor clickeable — 2026-09-25. En PC el titulo es un boton que
   despliega una linea que explica la categoria. En celular y tablet es
   solo un titulo: abrir informacion sin pedirla estorba mientras se
   navega (regla R7 de ZAP-DESIGN). */
.category-divider { flex-wrap: wrap; }

.category-divider-toggle {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

.category-divider-chevron,
.category-divider-desc {
  display: none;
}

@media (hover: hover) and (min-width: 1025px) {
  .category-divider-toggle {
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .category-divider-toggle:focus-visible {
    outline: 2px solid var(--orange-primary);
    outline-offset: 6px;
    border-radius: 2px;
  }

  /* La flechita va FUERA del flujo: si ocupa ancho, la rayita del
     ::after se centra bajo "titulo + flecha" y queda corrida a la derecha. */
  .category-divider-toggle {
    position: relative;
  }

  .category-divider-chevron {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 0.45em;
    margin-top: -0.2em;
    display: inline-block;
    width: 0.32em;
    height: 0.32em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.12em) rotate(45deg);
    opacity: 0.55;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  }

  .category-divider-title::after {
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .category-divider:has(.category-divider-toggle:hover) .category-divider-title,
  .category-divider.is-open .category-divider-title {
    color: var(--orange-primary);
  }

  .category-divider:has(.category-divider-toggle:hover) .category-divider-title::after,
  .category-divider.is-open .category-divider-title::after {
    width: clamp(48px, 4vw, 72px);
  }

  .category-divider-toggle:hover .category-divider-chevron { opacity: 1; }

  .category-divider.is-open .category-divider-chevron {
    transform: translateY(0.08em) rotate(-135deg);
    opacity: 1;
  }

  .category-divider-desc {
    display: grid;
    grid-template-rows: 0fr;
    flex-basis: 100%;
    opacity: 0;
    transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  }

  .category-divider-desc > p {
    overflow: hidden;
    max-width: 56ch;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem);
    line-height: 1.6;
    color: var(--gray-text);
  }

  .category-divider.is-open .category-divider-desc {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .category-divider.is-open .category-divider-desc > p {
    padding-top: var(--spacing-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-divider-desc,
  .category-divider-chevron,
  .category-divider-title::after {
    transition: none;
  }
}

.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: clamp(1.25rem, 0.9rem + 1vw, 2rem);
  font-weight: 700;
  color: var(--gray-light-text);
  margin: 0;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
}

.category-divider-title::after {
  content: "";
  display: block;
  width: clamp(28px, 2.5vw, 44px);
  height: 3px;
  margin: 8px 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);
}

/* La regla .payment-icon del checkout (32 px, mas abajo) le ganaba a esta:
   «EFECTY» no entraba en 32 px y empujaba la pagina 1 px de costado. */
.footer-payment .payment-icon {
  width: auto;
  min-width: 50px;
  height: 35px;
  padding: 0 0.6rem;
  background: var(--gray-medium);
  box-shadow: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-text);
}

.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;
}

/* En PC el panel ya no tiene scroll propio (Seven, 2026-11-03: con el mouse
   encima, la rueda movia el panel y no la pagina). Baja con la pagina y, si
   es mas alto que la pantalla, se queda pegado por su borde de abajo: el
   `top` negativo lo calcula js/main.js (--sidebar-top). El cajon del celular
   (max-width: 768px) conserva su scroll. */
@media (min-width: 769px) {
  .shop-sidebar {
    top: var(--sidebar-top, 100px);
  }
  .sidebar-scrollable {
    max-height: none;
    overflow: visible;
  }
}

.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-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: BANDERA A CUADROS (Seven, 2026-11-03)
   La barra de la pagina es la bandera de llegada, blanco y negro;
   al pasar el mouse, los cuadros claros se vuelven naranja. Arriba,
   una cinta a cuadros se llena a medida que se baja (animacion ligada
   al scroll, sin JS: donde el navegador no la soporta, no aparece).
   Las barras propias de menus y carrito siguen con sus reglas.
   ================================ */
html {
  --bandera-a: #F4F3F0;
  --bandera-b: #0E0E0F;
}

::-webkit-scrollbar {
  width: 12px;
}

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

::-webkit-scrollbar-thumb {
  background-color: var(--bandera-a);
  background-image: repeating-conic-gradient(var(--bandera-b) 0 25%, transparent 0 50%);
  background-size: 8px 8px;
  border: 2px solid var(--gray-dark);
  border-radius: var(--radius-full);
}

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

/* Firefox no pinta dibujos en la barra: blanco sobre gris. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--bandera-a) var(--gray-dark); }
}

@supports (animation-timeline: scroll()) {
  body::after {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10001;
    height: 8px;
    background-color: var(--bandera-a);
    background-image: repeating-conic-gradient(var(--bandera-b) 0 25%, transparent 0 50%);
    background-size: 8px 8px;
    /* Se recorta, no se estira: los cuadros quedan siempre cuadrados. */
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
    animation: bandera-avance linear both;
    animation-timeline: scroll(root block);
  }

  @keyframes bandera-avance {
    to { clip-path: inset(0 0 0 0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

/* ================================
   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;
}

/* La descripcion llega de ZAPHUB con parrafos y la lista de «Características»
   (descriptionHtml() en js/product-detail.js). */
.description-text p {
  margin: 0 0 0.75rem;
}

.description-text p:last-child {
  margin-bottom: 0;
}

/* «Características:» y cualquier linea que presenta una lista. */
.description-text .description-label {
  margin-bottom: 0.35rem;
  color: var(--white);
  font-weight: 600;
}

.description-text ul {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.description-text li {
  margin-bottom: 0.25rem;
}

.description-text li::marker {
  color: var(--gray-lighter);
}

/* 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);
}

/* El encabezado de columna ahora puede ser un <a> clickeable (categoria
   madre con hijos, p.ej. "Niños" — ver mxRenderNavDropdown en main.js, PR
   #21). Sin esto, `.dropdown-col a` (mas especifica) le pisaba el padding y
   el border-left/hover de un link suelto encima del look de encabezado. */
.nav-dropdown-menu .dropdown-col a.dropdown-col-header {
  padding: 0 0 0.6rem;
  border-left: none;
}
.nav-dropdown-menu .dropdown-col a.dropdown-col-header:hover {
  padding-left: 0;
  background: none;
}

.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;
  /* los nombres largos del CMS (p.ej. «Artículos de segunda») bajan a una segunda
     línea en vez de meterse en la columna de al lado */
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.nav-dropdown-menu .dropdown-col { min-width: 0; }

.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; }

/* Botón "Volver" — la ficha no tenía forma de volver sin el atrás del
   celular. Va primero en la miga, con flecha + texto, mismo tono que los
   enlaces de la miga pero con más peso para que se note que es un botón. */
.product-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  padding: 0.3rem 0.5rem 0.3rem 0;
  margin-right: 0.25rem;
  color: var(--gray-text);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.product-back:hover,
.product-back:focus-visible {
  color: var(--orange-primary);
}

.product-back svg { flex-shrink: 0; }
.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);
}


/* ================================================================
   MOVIL — tanda ZAP-DESIGN 2026-09-26
   Va al final a proposito: le gana a las reglas moviles anteriores
   sin cazarlas una por una.
   ================================================================ */
@media (max-width: 768px) {
  /* Header SOLIDO en movil (decision de Seven). La isla flotante es el
     sello de PC; en el celular tres islas apiladas eran ruido y el header
     tapaba 22px del buscador. Ahora: header 56 + buscador 56 + filtros,
     pegados, sin huecos ni solapes. */
  .header {
    padding: 0;
  }

  .nav,
  .header.scrolled .nav {
    max-width: none;
    height: 56px;
    padding: 0 var(--spacing-md);
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    background: rgba(20, 20, 20, 0.97);
    box-shadow: none;
  }

  [data-theme="light"] .nav,
  [data-theme="light"] .header.scrolled .nav {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
  }

  .mobile-search-bar {
    top: 56px;
    height: 56px;
    padding: 8px var(--spacing-md);
    border-bottom: 0;
    box-shadow: none;
    background: rgba(20, 20, 20, 0.97);
  }

  .mobile-quick-filters {
    top: 112px;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(20, 20, 20, 0.97);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  }

  [data-theme="light"] .mobile-search-bar,
  [data-theme="light"] .mobile-quick-filters {
    background: rgba(255, 255, 255, 0.97) !important;
  }

  [data-theme="light"] .mobile-quick-filters {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  }

  /* Filtros rapidos = los mismos botones de PC. Antes: Arial (un <button>
     no hereda la fuente), mayusculas, borde de 2px y un resplandor
     naranja en el activo. Ahora: Archivo, esquina de 12px, borde fino y
     el activo naranja solido, igual que el sidebar de PC. */
  .quick-filter-chip,
  .quick-filter-parent {
    height: 38px;
    min-width: 0;
    padding: 0 16px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--gray-light-text);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: none;
  }

  .quick-filter-chip:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .quick-filter-chip.active,
  .quick-filter-parent.active {
    background: var(--orange-primary);
    border-color: var(--orange-primary);
    color: #0A0A0A;
    box-shadow: none;
  }

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

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

  /* Fila de resultados: "285 PRODUCTOS" y compartir en una linea;
     "Ordenar por" encima de su desplegable, a todo el ancho. Todo
     alineado al mismo borde izquierdo. */
  .shop-top-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "count share"
      "sort  sort";
    align-items: center;
    row-gap: 14px;
    column-gap: var(--spacing-sm);
  }

  .results-count {
    grid-area: count;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  .results-count-extra {
    display: none;
  }

  .btn-compartir-vista {
    grid-area: share;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    justify-content: center;
  }

  .top-bar-controls {
    grid-area: sort;
    width: 100%;
  }

  .sort-options {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .sort-options label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  .sort-select {
    width: 100%;
    height: 44px;
  }

  /* Menu a pantalla completa: a medias dejaba ver la tienda detras sin
     que eso sirviera para nada. */
  .mobile-menu-panel {
    max-width: none;
    box-shadow: none;
  }

  /* Carrito: se va "Volver" (hacia lo mismo que la X), el titulo queda
     centrado de verdad y la X es solo una X, con aire. */
  .cart-back {
    display: none;
  }

  .cart-header {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .cart-title {
    grid-column: 2;
    text-align: center;
    letter-spacing: 2px;
  }

  .cart-close {
    grid-column: 3;
    justify-self: end;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--gray-light-text);
    font-size: 2rem;
    line-height: 1;
  }

  .cart-close:hover,
  .cart-close:active {
    background: transparent;
    color: var(--orange-primary);
  }
}

/* Cards en celular — 2026-09-26. En ~150px de ancho iban apilados VER
   (33px), AGREGAR (31px) y la talla (28px): tres alturas distintas y las
   tres chicas para un dedo. VER se va: la foto y el nombre ya llevan al
   producto (regla R11, una accion un boton). Quedan talla y AGREGAR, del
   mismo alto y a todo el ancho. */
@media (max-width: 640px) {
  .products-grid .product-actions .btn.btn-ver {
    display: none;
  }

  .products-grid .card-size-select,
  .products-grid .product-actions .btn {
    width: 100%;
    height: 40px;
    border-radius: 10px;
  }

  .products-grid .card-size-select {
    padding: 0 0.6rem;
    font-size: 0.8rem;
  }

  .products-grid .product-actions .btn {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  .products-grid .product-sizes-selector {
    margin-bottom: 0;
  }

  .products-grid .product-actions {
    gap: 8px;
    margin-top: 2px;
  }
}

/* Ficha de producto — galeria 2026-09-26 */
.product-main-img {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}

.product-main-img.is-fading {
  opacity: 0;
}

/* Modo zoom: la foto se acerca en el lugar. Con el zoom activo el dedo
   recorre la foto en vez de mover la pagina. */
.main-image-container.is-zoom {
  touch-action: none;
}

.main-image-container.is-zoom .product-main-img {
  cursor: crosshair;
}

.pd-zoom-btn[aria-pressed="true"] {
  background: var(--orange-primary);
  border-color: var(--orange-primary);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .pd-zoom-btn[aria-pressed="true"]:hover {
    background: var(--orange-dark);
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-main-img { transition: none; }
}

/* Bloque "¿Tienes dudas?" (se usa en 9 paginas). En celular el texto
   tocaba los bordes de la pantalla y el boton iba de punta a punta con
   una esquina exagerada. Ahora respira y todo escala con la pantalla. */
.cta-section {
  padding: clamp(56px, 10vw, 96px) 0;
}

.cta-content {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.cta-title {
  font-size: clamp(1.75rem, 1.2rem + 3vw, 3rem);
  line-height: 1.05;
  text-wrap: balance;
}

.cta-text {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  line-height: 1.55;
  margin-bottom: clamp(24px, 5vw, 40px);
  text-wrap: pretty;
}

.cta-section .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: min(100%, 280px);
  height: 52px;
  padding: 0 28px;
  border-radius: 12px;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

/* ============================================================
   BLOG (2026-10-15) — paginas generadas por scripts/generar-blog.mjs.
   Solo tokens del sitio: los articulos viejos usaban --accent-color y
   --card-bg, que no existen, y caian al color por defecto.
   ============================================================ */
.blog-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 120px 20px 60px;
}

.blog-eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--orange-primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-page h1 {
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.1;
}

.blog-meta {
  margin-bottom: 2.5rem;
  color: var(--gray-text);
  font-size: 0.9rem;
}

.blog-body {
  color: var(--gray-light-text);
  font-size: 1.05rem;
  line-height: 1.8;
}

.blog-body h2 {
  margin: 2.5rem 0 1rem;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.2;
}

.blog-body h3 {
  margin: 1.75rem 0 0.75rem;
  color: var(--white);
  font-size: 1.15rem;
}

.blog-body p,
.blog-body ul,
.blog-body ol {
  margin-bottom: 1.25rem;
}

.blog-body ul,
.blog-body ol {
  padding-left: 1.25rem;
}

.blog-body li {
  margin-bottom: 0.5rem;
}

.blog-body a,
.blog-fuentes a {
  color: var(--orange-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-body table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.blog-body th,
.blog-body td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--gray-light);
  text-align: left;
  vertical-align: top;
}

.blog-body th {
  color: var(--white);
  font-weight: 700;
}

.blog-aviso {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--orange-primary);
  border-radius: var(--radius-md);
  background: var(--gray-medium);
  font-size: 0.95rem;
}

.blog-fuentes {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-light);
  color: var(--gray-text);
  font-size: 0.85rem;
  line-height: 1.6;
}

.blog-fuentes h2 {
  margin-bottom: 0.75rem;
  color: var(--white);
  font-size: 1rem;
}

.blog-fuentes ol {
  padding-left: 1.25rem;
}

.blog-cta {
  margin-top: 3rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--gray-medium);
  text-align: center;
}

.blog-cta p {
  margin-bottom: 1rem;
  color: var(--gray-light-text);
}

/* Portada del blog */
.blog-lista {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.blog-tarjeta {
  display: block;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  background: var(--gray-medium);
  color: inherit;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.blog-tarjeta:hover,
.blog-tarjeta:focus-visible {
  background: var(--gray-light);
}

.blog-tarjeta h2 {
  margin: 0.35rem 0 0.5rem;
  color: var(--white);
  font-size: 1.2rem;
  line-height: 1.3;
}

.blog-tarjeta p {
  margin: 0;
  color: var(--gray-text);
  font-size: 0.95rem;
}

/* ==========================================================================
   TIENDA EN CELULAR — productos en la primera pantalla (2026-10-15)
   --------------------------------------------------------------------------
   Medido en produccion (375x812): el primer producto empezaba a 688 px, con
   una pantalla de 812. Antes iban el banner de ofertas con sus margenes
   (272 px), el contador + compartir + "Ordenar por" en dos filas (179 px) y
   el titulo de la categoria (84 px). El 81 % de las visitas es de celular y
   el 64 % se iba sin abrir un producto. Ahora el banner es una franja, el
   contador y el orden van en una fila, y la primera fila de productos entra
   completa. Solo /shop (la clase existe solo ahi).
   ========================================================================== */
@media (max-width: 768px) {
  /* Arriba 28 px: la barra fija de categorias termina 20 px mas abajo que
     donde arranca la seccion; con menos, la franja queda debajo de ella. */
  .shop-section-padding-fix .promo-banner {
    margin: 28px 0 12px;
  }

  .shop-section-padding-fix .promo-banner-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 12px;
    padding: 10px 12px 10px 16px;
    background: var(--orange-primary);
    box-shadow: none;
  }

  .shop-section-padding-fix .promo-banner-content::before,
  .shop-section-padding-fix .promo-banner-subtitle {
    display: none;
  }

  .shop-section-padding-fix .promo-banner-text {
    align-items: flex-start;
  }

  .shop-section-padding-fix .promo-banner-title {
    font-size: 1rem;
    letter-spacing: 0.5px;
  }

  .shop-section-padding-fix .promo-banner-btn {
    width: auto;
    padding: 8px 12px;
    font-size: 0.75rem;
  }

  .shop-section-padding-fix .shop-top-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "count sort share";
    row-gap: 0;
    margin-bottom: 4px;
    padding-bottom: 12px;
  }

  /* El rotulo se sigue leyendo con lector de pantalla; a la vista lo dice
     el propio desplegable ("Relevancia", "Precio: Menor a Mayor"). */
  .shop-section-padding-fix .sort-options label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .shop-section-padding-fix .sort-select {
    height: 40px;
  }

  .shop-section-padding-fix .category-divider {
    margin-top: 0;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* =============================================================================
   FILTROS Y CATEGORIAS EN EL CELULAR, ESTILO INSANITY — 2026-10-22 (Manu)
   Copia el patron Y la estetica del catalogo de INSANITY (TRIDENTE), con los
   mismos valores medidos en su web en vivo: panel #17171A, botones oscuros sin
   borde (#232326), lo ACTIVO invertido en claro (#F1F0EC con texto oscuro),
   filas con linea punteada, flecha en las categorias madre y pie claro
   "Ver N productos". El naranja de MXZONE queda solo en las etiquetas chicas
   (CATEGORIAS, TALLAS, ORDENAR POR), donde INSANITY usa su dorado.
   Va al final del archivo a proposito: le gana a las capas viejas de arriba.
   En PC no cambia nada: todo vive dentro del @media, salvo ocultar las dos
   piezas nuevas (.sheet-orden y .sidebar-pie).
   ============================================================================= */
.sheet-orden,
.sidebar-pie {
  display: none;
}

@media (max-width: 768px) {
  .shop-section-padding-fix,
  .shop-sidebar {
    --ins-panel: #17171A;
    --ins-boton: #232326;
    --ins-filete: #2A2A2E;
    --ins-texto: #F1F0EC;
    --ins-suave: #9A9AA0;
    --ins-activo: #F1F0EC;
    --ins-activo-texto: #0D0D0E;
    --ins-cerrar: #141012;
    --ins-acento: var(--orange-primary);
  }
  [data-theme="light"] .shop-section-padding-fix,
  [data-theme="light"] .shop-sidebar {
    --ins-panel: #F4F3EF;
    --ins-boton: #E6E4DE;
    --ins-filete: #D3D0C8;
    --ins-texto: #141416;
    --ins-suave: #5E5E64;
    --ins-activo: #141416;
    --ins-activo-texto: #F4F3EF;
    --ins-cerrar: #141416;
    --ins-acento: #C24E00;
  }

  /* ---- 1. Barra: buscador + "Filtros (N)" ----
     body.shop-page para ganarle al display:block de la linea ~5778. */
  body.shop-page .mobile-search-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .mobile-search-bar .search-box {
    height: 44px;
  }
  .mobile-search-bar .search-input,
  [data-theme="light"] .mobile-search-bar .search-input {
    height: 44px;
    padding: 8px 12px 8px 40px !important;
    background: var(--ins-panel) !important;
    border: 1px solid var(--ins-filete) !important;
    border-radius: 8px;
    color: var(--ins-texto) !important;
    font-family: var(--font-primary);
    font-size: 16px; /* 16px o mas: iOS no hace zoom al tocar el campo */
    font-weight: 600;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
  }
  .mobile-search-bar .search-input:focus {
    border-color: var(--ins-texto) !important;
  }
  .mobile-search-bar .search-icon {
    left: 13px;
    right: auto;
    color: var(--ins-suave);
  }
  .search-filter-btn,
  [data-theme="light"] .search-filter-btn {
    position: static;
    transform: none;
    display: inline-flex;
    align-items: center;
    height: 44px;
    min-width: 0;
    padding: 0 16px;
    background: var(--ins-boton);
    border: 0;
    border-radius: 8px;
    color: var(--ins-texto);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .search-filter-btn.con-filtros,
  [data-theme="light"] .search-filter-btn.con-filtros {
    background: var(--ins-activo);
    color: var(--ins-activo-texto);
  }
  .search-filter-btn .search-filter-count,
  .search-filter-btn:hover .search-filter-count,
  .search-filter-btn:active .search-filter-count {
    position: static;
    display: inline;
    min-width: 0;
    height: auto;
    padding: 0;
    background: none;
    color: inherit;
    font: inherit;
    filter: none;
    transform: none;
  }

  /* ---- 2. Fila de categorias: botones oscuros sin borde, activo claro ---- */
  .mobile-quick-filters-scroll {
    gap: 10px;
    mask-image: none;
    -webkit-mask-image: none;
    margin: 0;
    padding: 2px 16px;
    scroll-padding-left: 16px;
  }
  .quick-filter-separator {
    display: none;
  }
  /* Contrato del grupo "filtro" (editor WEB de ZAPHUB): cada chip lleva data-zap-grupo="filtro"
     y sus medidas son variables --zg-* con el valor de siempre de respaldo. Sin grupos publicados
     no hay variables y se ve igual que antes. La especificidad sube con el atributo en vez de
     !important, para que el portero de ZAPHUB pueda cambiar las variables. Ver zaphub-web B2/E3. */
  .quick-filter-chip,
  .quick-filter-parent,
  [data-theme="light"] .quick-filter-chip {
    gap: 8px;
    padding: 0 16px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }
  .quick-filter-chip[data-zap-grupo="filtro"],
  .quick-filter-parent[data-zap-grupo="filtro"] {
    height: var(--zg-alto, 44px);
    background: var(--zg-fondo, var(--ins-boton));
    border: var(--zg-borde, 0);
    border-radius: var(--zg-radio, 8px);
    box-shadow: none;
    color: var(--zg-texto, var(--ins-texto));
    text-transform: var(--zg-mayus, uppercase);
  }
  .quick-filter-chip[data-zap-grupo="filtro"].active,
  .quick-filter-parent[data-zap-grupo="filtro"].active,
  .quick-filter-chip[data-zap-grupo="filtro"][data-zap-forzar="tocado"],
  .quick-filter-parent[data-zap-grupo="filtro"][data-zap-forzar="tocado"] {
    background: var(--zg-fondo-t, var(--ins-activo));
    border: var(--zg-borde-t, var(--zg-borde, 0));
    color: var(--zg-texto-t, var(--ins-activo-texto));
  }
  .quick-filter-chip[data-n]::after {
    content: attr(data-n);
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.7;
  }
  .quick-filter-parent .parent-arrow {
    color: inherit;
  }

  /* ---- 3. Arriba de los productos: solo el conteo (y compartir) ---- */
  .shop-top-bar {
    grid-template-areas: "count share";
  }
  .shop-top-bar .top-bar-controls {
    display: none;
  }

  /* ---- 4. El cajon ---- */
  .shop-sidebar.active,
  [data-theme="light"] .shop-sidebar.active {
    height: auto;
    max-height: 78vh;
    max-height: 78dvh;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--ins-panel) !important;
    color: var(--ins-texto);
    border: 1px solid var(--ins-filete);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden;
  }
  .shop-sidebar .sidebar-header {
    flex: none;
    margin: 0;
    padding: 18px 18px 6px;
    border-bottom: 0;
  }
  .shop-sidebar .sidebar-title {
    color: var(--ins-texto);
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
  }
  .shop-sidebar .sidebar-close,
  .shop-sidebar .sidebar-close:hover {
    width: 44px;
    height: 44px;
    background: var(--ins-cerrar);
    border: 0;
    border-radius: 8px;
    color: #F3ECE0;
  }
  .shop-sidebar.active .sidebar-scrollable {
    flex: 1;
    min-height: 0;
    max-height: none;
    padding: 8px 18px 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ins-acento) transparent;
  }
  /* El buscador ya esta en la barra de arriba: en el cajon sobraba. */
  .shop-sidebar #searchFilterGroup {
    display: none;
  }
  /* Orden: categorias, tallas (piden categoria primero), ordenar, limpiar. */
  .shop-sidebar #categoryFilterGroup { order: -3; }
  .shop-sidebar #sizeFilterGroup { order: -2; }
  .shop-sidebar .sheet-orden { order: -1; }
  .shop-sidebar .filter-group {
    margin: 0;
    padding: 0;
    border: 0;
  }
  .shop-sidebar .checkbox-group,
  .shop-sidebar .category-parent-wrapper {
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* Etiquetas de seccion: chicas, condensadas, en el color de acento. */
  .shop-sidebar #catalogosToggle,
  .shop-sidebar #tallasToggle,
  .shop-sidebar .sheet-orden-label {
    display: block;
    width: 100%;
    margin: 18px 0 8px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--ins-acento);
    font-family: var(--font-display);
    /* !important: una regla vieja de #tallasToggle la subia a 15.2px. */
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    text-align: left;
    pointer-events: none;
  }
  .shop-sidebar #catalogosToggle {
    margin-top: 6px;
  }
  .shop-sidebar #catalogosToggle .toggle-icon,
  .shop-sidebar #tallasToggle .toggle-icon {
    display: none;
  }
  .shop-sidebar #catalogosToggle .toggle-label,
  .shop-sidebar #tallasToggle .toggle-label {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
  }
  .shop-sidebar #catalogosChildren,
  .shop-sidebar #catalogosChildren.collapsed,
  .shop-sidebar #tallasChildren,
  .shop-sidebar #tallasChildren.collapsed {
    display: block;
    max-height: none;
    opacity: 1;
    margin: 0;
    padding: 0;
  }

  /* Categorias como lista: nombre a la izquierda, cantidad a la derecha.
     !important en colores y bordes porque las reglas viejas de .category-chip
     (y las de modo claro) los fuerzan. */
  .shop-sidebar .category-chips {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--ins-texto);
  }
  .shop-sidebar .category-chip,
  .shop-sidebar .category-chip:hover,
  .shop-sidebar #ninosCategoryToggle,
  [data-theme="light"] .shop-sidebar .category-chip,
  [data-theme="light"] .shop-sidebar .category-chip:hover {
    width: 100%;
    min-height: 44px;
    height: auto;
    margin: 0;
    padding: 8px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px dashed var(--ins-filete) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    color: var(--ins-texto) !important;
    font-family: var(--font-primary);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
  }
  .shop-sidebar .category-chip[data-n]::after,
  .shop-sidebar #ninosCategoryToggle[data-n]::after {
    content: attr(data-n);
    flex: none;
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--ins-suave);
  }
  .shop-sidebar .category-chip.active,
  [data-theme="light"] .shop-sidebar .category-chip.active {
    background: var(--ins-activo) !important;
    border-bottom: 1px dashed var(--ins-acento) !important;
    color: var(--ins-activo-texto) !important;
  }
  .shop-sidebar .category-chip.active::after {
    color: var(--ins-activo-texto);
  }

  /* Niños: fila madre con su cantidad y una flecha en una columna de 44px
     (como las madres de INSANITY). Cerrada apunta abajo, abierta arriba. */
  .shop-sidebar .category-ninos {
    margin: 0;
    padding: 0;
  }
  .shop-sidebar #ninosCategoryToggle {
    display: flex;
    gap: 0;
    padding: 0 0 0 8px;
    cursor: pointer;
  }
  .shop-sidebar #ninosCategoryToggle .toggle-label {
    order: 0;
    flex: 1;
    color: inherit;
    font: inherit;
  }
  .shop-sidebar #ninosCategoryToggle::after {
    order: 1;
    margin-right: 6px;
  }
  .shop-sidebar #ninosCategoryToggle .toggle-icon,
  .shop-sidebar #ninosCategoryToggle.collapsed .toggle-icon {
    order: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 0;
    color: var(--ins-texto);
    transform: none;
  }
  .shop-sidebar #ninosCategoryToggle .toggle-icon::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2.4px solid currentColor;
    border-bottom: 2.4px solid currentColor;
    transform: translateY(2px) rotate(225deg);
    transition: transform 0.3s ease;
  }
  .shop-sidebar #ninosCategoryToggle.collapsed .toggle-icon::before {
    transform: translateY(1px) rotate(45deg);
  }
  .shop-sidebar #ninosCategoryChildren {
    margin: 0 0 8px 12px;
    padding: 0;
    border-left: 3px solid var(--ins-texto);
    background: rgba(241, 240, 236, 0.04);
  }
  .shop-sidebar #ninosCategoryChildren.collapsed {
    margin: 0;
    border-left-width: 0;
  }
  .shop-sidebar .category-chips--ninos {
    border-top: 0;
  }
  .shop-sidebar .category-chips--ninos .category-chip {
    font-size: 15px;
    font-weight: 600;
  }

  /* Tallas: los mismos botones oscuros de la fila de arriba. */
  .shop-sidebar .size-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .shop-sidebar .size-chip,
  [data-theme="light"] .shop-sidebar .size-chip {
    min-width: 48px;
    min-height: 44px;
    height: auto;
    padding: 8px 14px;
    background: var(--ins-boton) !important;
    border: 0 !important;
    border-radius: 8px;
    box-shadow: none !important;
    color: var(--ins-texto) !important;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }
  .shop-sidebar .size-chip.active,
  [data-theme="light"] .shop-sidebar .size-chip.active {
    background: var(--ins-activo) !important;
    color: var(--ins-activo-texto) !important;
  }
  .shop-sidebar .size-age-btn {
    min-height: 40px;
    border-radius: 8px;
  }

  /* Ordenar por */
  .shop-sidebar .sheet-orden {
    display: grid;
    gap: 0;
  }
  .shop-sidebar .sheet-orden select,
  [data-theme="light"] .shop-sidebar .sheet-orden select {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    background-color: var(--ins-panel) !important;
    border: 1px solid var(--ins-filete) !important;
    border-radius: 8px;
    color: var(--ins-texto) !important;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
  }

  /* Limpiar filtros: boton oscuro chico, no una caja punteada. */
  .shop-sidebar .btn-clear-filters,
  [data-theme="light"] .shop-sidebar .btn-clear-filters {
    width: auto;
    align-self: flex-start;
    min-height: 44px;
    margin-top: 18px;
    padding: 0 18px;
    background: var(--ins-boton) !important;
    border: 0 !important;
    border-radius: 8px;
    color: var(--ins-texto) !important;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .shop-sidebar .btn-clear-filters svg {
    display: none;
  }

  /* Pie fijo: "Ver N productos", boton claro a todo el ancho. */
  .shop-sidebar .sidebar-pie {
    display: block;
    flex: none;
    padding: 12px 18px;
    border-top: 2px solid var(--ins-texto);
    background: rgba(241, 240, 236, 0.06);
  }
  [data-theme="light"] .shop-sidebar .sidebar-pie {
    background: rgba(20, 20, 22, 0.05);
  }
  .btn-ver-resultados {
    width: 100%;
    min-height: 46px;
    background: var(--ins-activo);
    border: 0;
    border-radius: 8px;
    color: var(--ins-activo-texto);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .btn-ver-resultados:active {
    opacity: 0.85;
  }
}

/* ==========================================================================
   PEDIDO CONFIRMADO EN LA WEB (checkout.html)
   Tarjeta de un solo color, sin degrade ni brillo: el momento de la confirmacion
   tiene que leerse tranquilo. Mobile first; en PC la tarjeta se centra.
   ========================================================================== */
.checkout-page-grid[hidden],
.pedido-ok[hidden],
.pedido-aviso[hidden] { display: none !important; }

.pedido-ok {
  max-width: 560px;
  margin: 0 auto;
}

.pedido-ok-card {
  background: #141414;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-surface);
  padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
}

.pedido-ok-eyebrow {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-primary, #FF6600);
}

.pedido-ok-titulo {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.15;
  color: #fff;
  outline: none;
}

.pedido-ok-lead {
  margin: 0 0 var(--spacing-md, 1rem);
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
}

.pedido-ok-items {
  list-style: none;
  margin: 0 0 var(--spacing-md, 1rem);
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.pedido-ok-items li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pedido-ok-item-nombre {
  grid-column: 1;
  font-weight: 600;
  font-size: 0.92rem;
  color: #fff;
  overflow-wrap: anywhere;
}

.pedido-ok-item-meta {
  grid-column: 1;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
}

.pedido-ok-item-precio {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  white-space: nowrap;
}

.pedido-ok-datos {
  margin: 0 0 var(--spacing-md, 1rem);
  display: grid;
  gap: 10px;
}

.pedido-ok-datos > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.88rem;
}

.pedido-ok-datos dt { color: rgba(255,255,255,0.55); flex-shrink: 0; }
.pedido-ok-datos dd { margin: 0; text-align: right; color: #fff; font-weight: 600; overflow-wrap: anywhere; }

.pedido-ok-siguiente {
  margin: 0 0 var(--spacing-lg, 1.5rem);
  padding: 12px;
  border-radius: var(--radius-surface);
  background: rgba(255,255,255,0.05);
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.8);
}

.pedido-ok-sinverificar { margin: calc(-1 * var(--spacing-md, 1rem) + 4px) 0 var(--spacing-lg, 1.5rem); font-size: 0.82rem; color: rgba(255,255,255,0.6); }
[data-theme="light"] .pedido-ok-sinverificar { color: #6B7280; }
.pedido-ok-sinverificar[hidden] { display: none !important; }

.pedido-ok-acciones { display: flex; flex-direction: column; gap: 10px; }

.pedido-ok-wa,
.pedido-ok-volver {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--spacing-lg, 1.5rem);
  border-radius: var(--radius-control);
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}

/* Secundario: WhatsApp es una opcion, no el paso obligatorio. */
.pedido-ok-wa {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
}
.pedido-ok-wa:hover { border-color: rgba(255,255,255,0.6); }

.pedido-ok-volver { color: rgba(255,255,255,0.65); min-height: 44px; font-weight: 600; }
.pedido-ok-volver:hover { color: #fff; }

/* Aviso de pedido no registrado */
.pedido-aviso {
  padding: 12px;
  border-radius: var(--radius-surface);
  border: 1px solid rgba(255,102,0,0.45);
  background: rgba(255,102,0,0.08);
}

.pedido-aviso-texto {
  margin: 0 0 10px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
}

.pedido-aviso-wa {
  width: 100%;
  min-height: 44px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-control);
  color: #fff;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.checkout-submit:disabled { opacity: 0.6; cursor: progress; }
/* Arreglo: la regla de los iconos de error (display:inline-flex) pisaba el display:none
   y los avisos "Ingresa tu nombre"... se veian siempre, con el formulario vacio o lleno. */
.checkout-field:not(.has-error) .field-error,
.checkout-payment:not(.has-error) .field-error { display: none; }


[data-theme="light"] .pedido-ok-card { background: #fff; border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
[data-theme="light"] .pedido-ok-titulo,
[data-theme="light"] .pedido-ok-item-nombre,
[data-theme="light"] .pedido-ok-item-precio,
[data-theme="light"] .pedido-ok-datos dd { color: #111; }
[data-theme="light"] .pedido-ok-lead,
[data-theme="light"] .pedido-ok-siguiente { color: #374151; }
[data-theme="light"] .pedido-ok-item-meta,
[data-theme="light"] .pedido-ok-datos dt { color: #6B7280; }
[data-theme="light"] .pedido-ok-items,
[data-theme="light"] .pedido-ok-items li { border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .pedido-ok-siguiente { background: rgba(0,0,0,0.04); }
[data-theme="light"] .pedido-ok-wa { color: #111; border-color: rgba(0,0,0,0.3); }
[data-theme="light"] .pedido-ok-wa:hover { border-color: #111; }
[data-theme="light"] .pedido-ok-volver { color: #4B5563; }
[data-theme="light"] .pedido-ok-volver:hover { color: #111; }
[data-theme="light"] .pedido-aviso-texto { color: #1F2937; }
[data-theme="light"] .pedido-aviso-wa { color: #111; border-color: rgba(0,0,0,0.3); }

@media (min-width: 768px) {
  .pedido-ok-card { padding: var(--spacing-xl, 2rem); }
  .pedido-ok-titulo { font-size: 2rem; }
  .pedido-ok-acciones { flex-direction: row-reverse; }
  .pedido-ok-wa { flex: 1; }
  .pedido-ok-volver { flex: 1; }
}

/* ZAP Movimiento: los esqueletos de carga ocupan la misma caja que una tarjeta
   de producto (foto de 200 px), asi la grilla no salta cuando llegan los datos. */
.products-grid .zm-esqueleto {
  min-height: 320px;
  padding: var(--spacing-md);
  border-radius: var(--radius-surface);
  background: var(--gradient-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.products-grid .zm-esqueleto__foto {
  aspect-ratio: auto;
  height: 200px;
}

/* ════════════════════════════════════════════════════════════════════════
   CARD "PLACA DE CARRERA" v2 — 2026-11-02 (branch feat/card-placa-carrera)

   Reemplaza el diseño viejo de .product-card SOLO para las cards que
   createProductCard() marca con la clase extra `.product-card--placa`
   (ver js/products.js). Asi las reglas de arriba (.product-card,
   .product-image, .product-info, etc — lineas ~2551 y en adelante, ~5732,
   ~6018, ~9347, ~11027, ~11100, ~13674) quedan intactas para quien las siga
   usando, y esta queda como la version nueva, mas especifica, que gana.

   Estructura (mismos nombres de clase que siempre usaron JS/CSS viejos,
   mas unos pocos nuevos para la fila de precio y la lista de talla):
     .product-card.product-card--placa
       .product-card-cabeza        > .product-name (arriba, 2 lineas fijas)
       .product-image              > la "ventana" blanca con la foto
       .product-info
         .product-card-fila        > .product-category + .product-price-wrapper
         .product-sizes-selector   > .size-picker (compu) + .size-picker-nativo (celular, envuelve el select)
         .size-picker-aviso
         .product-actions          > .btn-ver + .btn-cart-add

   COMPU = mouse/trackpad de verdad: @media (hover:hover) and (pointer:fine).
   Se elige esto y no un ancho fijo porque detecta el INSUMO real sin
   importar el viewport: una ventana de compu angosta sigue siendo compu (el
   select nativo no tendria sentido ahi) y una tablet/celular con mouse
   bluetooth pasa a verse como compu, que es lo correcto. Todo lo que NO
   matchea esa condicion (celular, tablet con el dedo) cae al select nativo
   de siempre.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --placa-card: var(--gray-dark);
  --placa-borde: rgba(255, 255, 255, 0.08);
  --placa-borde-hover: rgba(255, 255, 255, 0.22);
  --placa-tinta: var(--white);
  --placa-suave: var(--gray-text);
  --placa-campo: var(--gray-medium);
  --placa-campo-borde: var(--gray-lighter);
  --placa-lista: #1c1c1f;
  --placa-lista-borde: rgba(255, 255, 255, 0.14);
  --placa-lista-hover: rgba(255, 255, 255, 0.07);
  --placa-ventana: #ffffff;
  --placa-ventana-borde: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] {
  --placa-card: #ffffff;
  --placa-borde: rgba(0, 0, 0, 0.08);
  --placa-borde-hover: rgba(0, 0, 0, 0.28);
  --placa-tinta: #141414;
  --placa-suave: #6b6662;
  --placa-campo: #f4f2f0;
  --placa-campo-borde: #dcd7d2;
  --placa-lista: #ffffff;
  --placa-lista-borde: #e6e2de;
  --placa-lista-hover: #f4f2f0;
  --placa-ventana: #ffffff;
  --placa-ventana-borde: rgba(0, 0, 0, 0.08);
}

/* ---- la card: sobria, de un color, sin humo ni 3D ---- */
.product-card.product-card--placa {
  background: var(--placa-card);
  color: var(--placa-tinta);
  border: 1px solid var(--placa-borde);
  border-radius: var(--radius-surface);
  transform-style: flat;
  perspective: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.product-card.product-card--placa:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.45);
  border-color: var(--placa-borde-hover);
}

/* Anula el glow/gradiente/tilt 3D del diseño viejo SOLO en esta variante. */
.product-card--placa::before,
.product-card--placa::after {
  content: none;
  display: none;
}

.product-card--placa .product-image {
  transform: none;
}

.product-card--placa:hover .product-image {
  transform: none;
}

.product-card--placa:hover .product-image img {
  filter: none;
}

/* ---- nombre arriba: lugar fijo para 2 lineas, poco aire con la foto ---- */
.product-card-cabeza {
  padding: 0.8rem 0.8rem 0.4rem;
}

.product-card--placa .product-name {
  margin: 0;
  min-height: calc(1.15rem * 1.05 * 2);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(0.95rem, 0.86rem + 0.3vw, 1.1rem);
  line-height: 1.05;
  color: var(--placa-tinta);
}

.product-card--placa .product-name a {
  color: inherit;
  text-decoration: none;
}

/* ---- la "ventana": caja blanca redondeada; la foto siempre con fondo
   blanco de verdad (mix-blend-mode multiply le come el blanco de la foto
   contra el fondo blanco de la ventana, asi que se ve igual en oscuro) ---- */
.product-card--placa .product-image {
  /* ancho automatico: el 100% heredado mas el margen la sacaba por el borde derecho */
  width: auto;
  height: auto;
  aspect-ratio: 1;
  margin: 0 0.6rem;
  padding: 10%;
  background: var(--placa-ventana);
  border: 1px solid var(--placa-ventana-borde);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.product-card--placa .product-image img,
.product-card--placa:hover .product-image img {
  /* sin la sombra vieja: con la foto de fondo blanco dibujaba un recuadro dentro de la ventana */
  filter: none;
}

.product-card--placa .product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card--placa:hover .product-image img {
  transform: scale(1.05);
}

.product-card--placa .product-image-placeholder {
  color: var(--gray-lighter);
}

/* ---- info: categoria + precio en una fila, talla, acciones ---- */
.product-card--placa .product-info {
  padding: 0.7rem 0.8rem 0.9rem;
  gap: 0.5rem;
}

.product-card-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

/* flex-shrink:0 es a proposito: asi fila.scrollWidth refleja el ancho REAL
   que piden categoria+precio, sin que el navegador los achique solo. La
   medicion (ajustarPrecioDeFila en products.js) depende de esto. */
.product-card--placa .product-category {
  flex-shrink: 0;
  white-space: nowrap;
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.product-card--placa .product-price-wrapper {
  flex-shrink: 0;
  margin: 0;
}

.product-card--placa .product-price {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-variant-numeric: tabular-nums;
  color: var(--placa-tinta);
  text-shadow: none;
}

/* ---- talla: lista propia (compu) + select nativo (celular) ----
   Los dos EXISTEN SIEMPRE en el DOM; cual se ve lo decide esta media query,
   nunca JS. El select sigue siendo la fuente de verdad en los dos casos. */
.product-card--placa .product-sizes-selector {
  margin-top: 0;
  position: relative;
}

.size-picker {
  position: relative;
  display: none;
}

.size-picker-nativo {
  position: relative;
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .size-picker { display: block; }
  .size-picker-nativo { display: none; }
}

.size-picker-boton {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0 0.7rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--placa-campo-borde);
  background: var(--placa-campo);
  color: var(--placa-tinta);
  font-family: var(--font-primary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.size-picker-boton span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.size-picker-boton:hover {
  border-color: var(--placa-tinta);
}

.size-picker-boton:disabled {
  cursor: default;
  opacity: 0.75;
}

.size-picker-flecha {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform 0.2s ease;
}

.size-picker--abierto .size-picker-flecha {
  transform: rotate(180deg);
}

.size-picker-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 8;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border-radius: var(--radius-control);
  background: var(--placa-lista);
  border: 1px solid var(--placa-lista-borde);
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.5);
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.16s;
}

.size-picker-menu::-webkit-scrollbar {
  display: none;
}

.size-picker--abierto .size-picker-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.size-picker-op {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.6rem;
  border: 0;
  border-radius: calc(var(--radius-control) - 2px);
  background: transparent;
  color: var(--placa-tinta);
  font-family: var(--font-primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.size-picker-op:hover {
  background: var(--placa-lista-hover);
}

.size-picker-op:disabled {
  color: var(--placa-suave);
  cursor: not-allowed;
  opacity: 0.65;
}

.size-picker-op[aria-selected="true"] {
  color: var(--orange-primary);
}

.size-picker-op[aria-selected="true"]::after {
  content: "\2713";
  font-weight: 700;
}

/* Talla elegida a medias: resalta la lista, no un campo invisible. */
.size-picker--falta .size-picker-boton {
  border-color: var(--orange-primary);
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.22);
}

.size-picker-aviso {
  margin: -0.1rem 0 0;
  min-height: 0;
  font-size: 0.72rem;
  color: var(--orange-dark);
}

[data-theme="light"] .size-picker-aviso {
  color: var(--orange-hover);
}

.size-picker-aviso:empty {
  display: none;
}

/* select nativo (celular): mismo look de campo que el boton de la lista. */
.product-card--placa .size-picker-nativo .card-size-select {
  width: 100%;
  height: 42px;
  padding: 0 0.7rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--placa-campo-borde);
  background: var(--placa-campo);
  color: var(--placa-tinta);
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- acciones: Ver (borde) + Agregar (naranja, con icono) ---- */
.product-card--placa .product-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

.product-card--placa .product-actions .btn-ver {
  flex: 0 0 auto;
  min-width: 4.4rem;
  background: transparent;
  border: 1px solid var(--placa-campo-borde);
  color: var(--placa-tinta);
}

.product-card--placa .product-actions .btn-ver:hover {
  border-color: var(--placa-tinta);
  background: transparent;
}

.product-card--placa .product-actions .btn-cart-add {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.product-card--placa .ico-carrito {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ---- celular (≤640px): la grilla ya existente aprieta paddings/fuentes;
   aca solo lo que cambia por la estructura nueva (nombre arriba, fila de
   precio). btn-ver ya se esconde con la regla vieja de la linea ~13674. ---- */
@media (max-width: 640px) {
  .product-card-cabeza {
    padding: 0.6rem 0.6rem 0.3rem;
  }

  .product-card--placa .product-name {
    font-size: 0.82rem;
    min-height: calc(0.82rem * 1.1 * 2);
  }

  .product-card--placa .product-image {
    margin: 0 0.45rem;
  }

  .product-card--placa .product-info {
    padding: 0.5rem 0.6rem 0.65rem;
    gap: 0.35rem;
  }

  .product-card--placa .product-category {
    font-size: 0.56rem;
  }

  .product-card--placa .product-price {
    font-size: 1.02rem;
  }

  .product-card--placa .size-picker-nativo .card-size-select {
    height: 38px;
    font-size: 0.72rem;
  }

  /* en el celular «Ver» no se muestra: «Agregar» va solo y en fila. En columna,
     con flex 1 1 0%, la regla vieja lo aplastaba a 16 px de alto. */
  .products-grid .product-card--placa .product-actions,
  .product-card--placa .product-actions {
    flex-direction: row;
  }

  .product-card--placa .product-actions .btn-cart-add {
    height: 40px;
    flex: 1 1 auto;
    font-size: 0.74rem;
  }
}


/* ================================================================
   PORTADA «TIENDA DE VERDAD» — 2026-11-02
   ================================================================
   Reemplaza al .hero viejo SOLO en index.html (las landings de SEO
   siguen usando .hero). Clases propias (.portada-*) para no heredar
   nada de las ~15 reglas viejas del hero: particulas, patron,
   vineta, pulso naranja.

   - La escena (video + velo + texto) es SIEMPRE oscura, en los dos
     temas: el texto va blanco sobre el video.
   - La base (hechos + marcas) sigue el tema: carbon en oscuro,
     blanco en claro.
   - El titulo entra UNA vez con un barrido por palabra y queda
     quieto. Es CSS puro: si no hay JS el titulo se ve igual, y con
     «reducir movimiento» aparece directo.
   ================================================================ */
.portada {
  --portada-tinta: #0E0E0F;
  --portada-base: #0E0E0F;
  --portada-linea: rgba(255, 255, 255, 0.09);
  --portada-suave: #A4A4A8;
  /* Borde izquierdo del texto: el mismo que el contenido de .container
     (1400 px de ancho, 1.5rem de aire) apenas la pantalla es mas ancha
     que eso; en pantallas chicas, el aire de siempre. El % es del ancho
     de la portada (padding en % se mide contra el ancho del padre). */
  --portada-borde: max(clamp(1rem, 5vw, 4rem), calc((100% - 1400px) / 2 + 1.5rem));
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  /* En pantallas muy altas no crece sin fin: la franja de abajo siempre
     entra en el primer pantallazo y asoma lo que sigue. */
  min-height: min(100svh, 1200px);
  background: var(--portada-tinta);
}

[data-theme="light"] .portada {
  --portada-base: #FFFFFF;
  --portada-linea: rgba(0, 0, 0, 0.09);
  --portada-suave: #5E5A57;
}

.portada-escena {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  min-height: 520px;
  padding: calc(var(--header-clearance) + 2.5rem) var(--portada-borde) 3.5rem;
  overflow: hidden;
  isolation: isolate;
  background: #0E0E0F url("../assets/images/hero-poster.webp") center 40% / cover no-repeat;
}

.portada-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Velo: negro a transparente, de izquierda a derecha. Sin color. */
.portada-velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(10, 10, 11, 0.92) 0%,
    rgba(10, 10, 11, 0.8) 36%,
    rgba(10, 10, 11, 0.3) 70%,
    rgba(10, 10, 11, 0.12) 100%);
  pointer-events: none;
}

.portada-contenido {
  width: 100%;
  max-width: 640px;
  color: #FFFFFF;
}

.portada-titulo {
  margin: 0;
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.portada-kicker {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--font-primary);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-primary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.portada-grande {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.6rem);
  line-height: 0.96;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.portada-grande .pt-p {
  display: inline-block;
}

.portada-grande .pt-junto {
  white-space: nowrap;
}

.portada-grande .pt-acento {
  color: var(--orange-primary);
}

.portada-sub {
  margin: 1.1rem 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  text-wrap: pretty;
}

.portada .portada-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 13rem;
  min-height: 54px;
  padding: 0 2.25rem;
  font-size: 0.95rem;
  margin-top: 1.9rem;
  border: 0;
  border-radius: var(--radius-control);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- base: los dos hechos y las marcas ---- */
.portada-base {
  position: relative;
  background: var(--portada-base);
  color: var(--white);
  border-top: 1px solid var(--portada-linea);
}

.portada-hechos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-inline: var(--portada-borde);
  border-bottom: 1px solid var(--portada-linea);
}

/* «Placa de carrera»: la misma letra del precio de la card nueva
   (Barlow Condensed 700, mayusculas), icono de linea en naranja. */
.portada-placa {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.25rem 0;
}

.portada-placa + .portada-placa {
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--portada-linea);
}

.portada-placa-ico {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--orange-primary);
}

.portada-placa b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.portada-placa small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--portada-suave);
}

.portada-marcas {
  --marca-alto: 30px;
  --marca-aire: clamp(2.25rem, 3.5vw, 3.5rem);
  max-width: calc(1400px - 3rem);
  margin: 0 auto;
  padding: 1rem 0;
  overflow: hidden;
  /* Desvanecido de los bordes con mascara de opacidad, no con color:
     funciona igual en claro y en oscuro. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* La pista lleva las dos filas iguales; correrla -50 % deja la copia
   exactamente donde estaba la original, y el reinicio no se nota. El
   aire va como padding de cada logo (no gap) para que el -50 % sea exacto. */
.marcas-pista {
  display: flex;
  width: max-content;
}

.marcas-fila {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marcas-fila li {
  display: flex;
  align-items: center;
  height: var(--marca-alto);
  padding-right: var(--marca-aire);
}

.portada-marcas img {
  display: block;
  height: var(--marca-alto);
  width: auto;
  max-width: none;
}

/* Marcas sin logo todavia: misma altura y mismo naranja que los logos */
.portada-marcas .marca-texto {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--marca-alto) * 1.05);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--orange-primary);
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .marcas-pista {
    animation: marcas-corren 55s linear infinite;
  }
  .portada-marcas:hover .marcas-pista {
    animation-play-state: paused;
  }
}

@keyframes marcas-corren {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Quieta: una sola fila, centrada y repartida en renglones si no entra */
@media (prefers-reduced-motion: reduce) {
  .portada-marcas {
    -webkit-mask-image: none;
            mask-image: none;
    padding-inline: var(--portada-borde);
  }
  .marcas-pista { width: auto; }
  .marcas-fila {
    flex-wrap: wrap;
    justify-content: center;
    flex-shrink: 1;
    row-gap: 0.75rem;
  }
  .marcas-fila li { padding-inline: calc(var(--marca-aire) / 2); }
  .marcas-fila[aria-hidden="true"] { display: none; }
}

/* ---- entrada: una sola vez al cargar ---- */
@media (prefers-reduced-motion: no-preference) {
  .portada-grande .pt-p {
    animation: pt-barrido 0.46s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.08s + var(--i) * 0.085s) backwards;
  }
  .portada-kicker,
  .portada-sub,
  .portada .portada-cta,
  .portada-hechos,
  .portada-marcas {
    animation: pt-aparece 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  }
  .portada-kicker { animation-delay: 0.02s; }
  .portada-sub { animation-delay: 0.42s; }
  .portada .portada-cta { animation-delay: 0.52s; }
  .portada-hechos { animation-delay: 0.6s; }
  .portada-marcas { animation-delay: 0.7s; }
}

@keyframes pt-barrido {
  from {
    clip-path: inset(-25% 100% -25% -10%);
    transform: translateX(-0.18em) skewX(-14deg);
    filter: blur(6px);
  }
  to {
    clip-path: inset(-25% -10% -25% -10%);
    transform: none;
    filter: blur(0);
  }
}

@keyframes pt-aparece {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---- pantallas grandes (1440 en adelante) ----
   En 1366 todo queda como estaba. De ahi para arriba el bloque de texto
   crece hasta ocupar ~45 % del contenedor de 1400 px. */
@media (min-width: 1440px) {
  .portada-contenido {
    max-width: 44rem;
  }
  .portada-kicker {
    margin-bottom: 1.1rem;
    font-size: clamp(0.78rem, 0.3rem + 0.33vw, 0.9rem);
  }
  .portada-grande {
    font-size: clamp(4.6rem, 2rem + 3vw, 5.5rem);
  }
  .portada-sub {
    max-width: 38rem;
    margin-top: 1.35rem;
    font-size: clamp(1.12rem, 0.7rem + 0.3vw, 1.3rem);
  }
  .portada .portada-cta {
    min-height: 58px;
    margin-top: 2.2rem;
    font-size: 1rem;
  }
  .portada-velo {
    background: linear-gradient(90deg,
      rgba(10, 10, 11, 0.92) 0%,
      rgba(10, 10, 11, 0.82) 44%,
      rgba(10, 10, 11, 0.3) 74%,
      rgba(10, 10, 11, 0.12) 100%);
  }
  .portada-placa b { font-size: 1.4rem; }
  .portada-placa small { font-size: 0.92rem; }
  .portada-marcas { --marca-alto: 32px; }
}

/* ---- tablet ---- */
@media (max-width: 900px) {
  .portada-velo {
    background: linear-gradient(180deg,
      rgba(10, 10, 11, 0.55) 0%,
      rgba(10, 10, 11, 0.7) 45%,
      rgba(10, 10, 11, 0.9) 100%);
  }
}

/* ---- celular ---- */
@media (max-width: 600px) {
  .portada-escena {
    background-position: 68% 40%;
    align-items: flex-end;
    min-height: 480px;
    padding: calc(var(--header-clearance) + 1.5rem) 1rem 1.75rem;
  }
  .portada-video {
    object-position: 68% 40%;
  }
  .portada-kicker {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }
  .portada-grande {
    font-size: clamp(2.25rem, 1.2rem + 6.2vw, 2.9rem);
    overflow-wrap: anywhere;
  }
  .portada-sub {
    font-size: 0.98rem;
  }
  .portada .portada-cta {
    display: flex;
    width: 100%;
    min-height: 52px;
  }
  .portada-hechos {
    grid-template-columns: 1fr;
  }
  .portada-placa {
    padding: 0.85rem 0;
  }
  .portada-placa + .portada-placa {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--portada-linea);
  }
  .portada-placa b { font-size: 1.15rem; }
  .portada-marcas {
    --marca-alto: 22px;
    --marca-aire: 2rem;
    padding: 0.85rem 0;
  }
}


/* ================================================================
   ¿POR QUE MXZONE? — 2026-11-02
   Estaban rotos: cuatro circulos naranjas vacios (los emojis que se
   sacaron dejaron el hueco) y uno decia «WA» en texto. Y las cards se
   inclinaban en 3D siguiendo el mouse. Ahora: icono de linea del mismo
   trazo en un cuadrado redondeado, texto alineado a la izquierda, y al
   pasar el mouse solo sube un poco y se marca el borde.
   ================================================================ */
.porque .benefits-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.porque .benefit-card {
  text-align: left;
  padding: 1.6rem 1.4rem 1.5rem;
  background: var(--gray-dark);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-surface);
  transform-style: flat;
  perspective: none;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.porque .benefit-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 102, 0, 0.45);
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.5);
}

.porque .benefit-icon {
  width: 48px;
  height: 48px;
  margin: 0 0 1.1rem;
  border-radius: var(--radius-control);
  background: rgba(255, 102, 0, 0.1);
  border: 1px solid rgba(255, 102, 0, 0.22);
  box-shadow: none;
  color: var(--orange-primary);
  font-size: 0;
  transform: none;
  transition: none;
}

.porque .benefit-card:hover .benefit-icon {
  transform: none;
}

.porque .benefit-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.porque .benefit-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gray-text);
}

[data-theme="light"] .porque .benefit-card {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .porque .benefit-card:hover {
  border-color: rgba(255, 102, 0, 0.5);
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.25);
}

@media (max-width: 1100px) {
  .porque .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .porque .benefits-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .porque .benefit-card { padding: 1.25rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .porque .benefit-card,
  .porque .benefit-card:hover { transition: none; transform: none; }
}


/* ================================================================
   DESPLEGABLE «TIENDA» v3 — 2026-11-02
   Antes: 4 columnas de textos en mayuscula sin jerarquia y «Niños»
   con un subrayado naranja. Ahora: cada categoria con su icono de
   linea (main.js, MX_ICONOS_CATEGORIA, por slug), texto en
   mayuscula/minuscula, hover con fondo suave e icono naranja, el
   grupo de cada categoria madre (Niños) como bloque propio, y un pie
   «Ver toda la tienda». Se abre y se cierra con un fundido corto.
   Solo escritorio: en el celular este menu esta oculto (ver «EL
   DESPLEGABLE DE ESCRITORIO NO ENTRA AL MENU DEL CELULAR»).
   ================================================================ */
.nav-links .nav-dropdown-menu {
  --dd-fondo: #161618;
  --dd-borde: rgba(255, 255, 255, 0.09);
  --dd-tinta: #F2F2F2;
  --dd-suave: #9A9AA0;
  --dd-hover: rgba(255, 255, 255, 0.06);
  --dd-bloque: rgba(255, 255, 255, 0.035);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  width: max-content;
  max-width: min(760px, calc(100vw - 2rem));
  padding: 0.6rem;
  background: var(--dd-fondo);
  border: 1px solid var(--dd-borde);
  border-radius: var(--radius-surface);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6);
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.22s;
}

.nav-links .nav-dropdown:hover .nav-dropdown-menu,
.nav-links .nav-dropdown:focus-within .nav-dropdown-menu {
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}

/* Escape lo cierra aunque el mouse siga encima (main.js) */
.nav-links .nav-dropdown.cerrado .nav-dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
}

/* Puente invisible entre «Tienda» y el panel: el mouse no lo pierde al bajar */
.nav-links .nav-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.nav-links .nav-dropdown-menu.dd-armado {
  grid-template-columns: minmax(0, 1fr) minmax(200px, 230px);
}

.nav-links .nav-dropdown-menu.dd-armado.dd-sin-madres {
  grid-template-columns: minmax(0, 1fr);
}

.nav-links .nav-dropdown-menu li {
  list-style: none;
  border-bottom: 0;
}

.nav-links .nav-dropdown-menu .dd-grupo {
  min-width: 0;
  padding: 0.25rem;
}

.nav-links .nav-dropdown-menu .dd-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.nav-links .nav-dropdown-menu .dd-grupo--principal .dd-lista {
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  column-gap: 0.25rem;
}

.nav-links .nav-dropdown-menu .dd-grupo--madre {
  align-self: start;
  margin: 0.25rem;
  padding: 0.6rem 0.4rem 0.4rem;
  background: var(--dd-bloque);
  border-radius: var(--radius-control);
}

.nav-links .nav-dropdown-menu a.dd-titulo {
  display: block;
  margin: 0 0 0.35rem;
  padding: 0.15rem 0.6rem 0.4rem;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dd-suave);
  text-shadow: none;
}

.nav-links .nav-dropdown-menu a.dd-titulo:hover,
.nav-links .nav-dropdown-menu a.dd-titulo:focus-visible {
  padding-left: 0.6rem;
  background: none;
  border: 0;
  color: var(--orange-primary);
}

.nav-links .nav-dropdown-menu a.dd-item,
.nav-links .nav-dropdown-menu:not(.dd-armado) a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: var(--radius-control);
  font-family: var(--font-primary);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--dd-tinta);
  text-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-links .nav-dropdown-menu a.dd-item:hover,
.nav-links .nav-dropdown-menu a.dd-item:focus-visible,
.nav-links .nav-dropdown-menu:not(.dd-armado) a:hover {
  padding-left: 0.65rem;
  border: 0;
  background: var(--dd-hover);
  color: var(--dd-tinta);
  text-shadow: none;
}

.nav-links .nav-dropdown-menu a:focus-visible {
  outline: 2px solid var(--orange-primary);
  outline-offset: -2px;
}

.nav-links .nav-dropdown-menu .dd-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-control);
  background: var(--dd-hover);
  color: var(--dd-suave);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-links .nav-dropdown-menu .dd-ico svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-links .nav-dropdown-menu a.dd-item:hover .dd-ico,
.nav-links .nav-dropdown-menu a.dd-item:focus-visible .dd-ico {
  color: var(--orange-primary);
  background: rgba(255, 102, 0, 0.1);
}

.nav-links .nav-dropdown-menu .dd-pie {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  padding: 0.45rem 0.25rem 0.1rem;
  border-top: 1px solid var(--dd-borde);
}

.nav-links .nav-dropdown-menu .dd-pie a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: var(--radius-control);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--orange-primary);
  text-shadow: none;
}

.nav-links .nav-dropdown-menu .dd-pie a:hover {
  padding-left: 0.65rem;
  border: 0;
  background: rgba(255, 102, 0, 0.08);
  color: var(--orange-primary);
}

.nav-links .nav-dropdown-menu .dd-pie svg {
  transition: transform 0.18s ease;
}

.nav-links .nav-dropdown-menu .dd-pie a:hover svg {
  transform: translateX(3px);
}

[data-theme="light"] .nav-links .nav-dropdown-menu {
  --dd-fondo: #FFFFFF;
  --dd-borde: rgba(0, 0, 0, 0.09);
  --dd-tinta: #1A1A1A;
  --dd-suave: #66625E;
  --dd-hover: rgba(0, 0, 0, 0.045);
  --dd-bloque: #F6F5F3;
  background: var(--dd-fondo) !important;
  border-color: var(--dd-borde) !important;
  box-shadow: 0 24px 48px -22px rgba(0, 0, 0, 0.22) !important;
}

[data-theme="light"] .nav-links .nav-dropdown-menu a.dd-item,
[data-theme="light"] .nav-links .nav-dropdown-menu a.dd-item:hover {
  color: var(--dd-tinta);
  text-shadow: none;
}

/* La flechita de «Tienda»: un chevron de linea que gira, no un triangulo */
.nav-links .nav-dropdown > a::after {
  content: "";
  display: inline-block;
  width: 0.38em;
  height: 0.38em;
  margin-left: 0.5em;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-0.18em) rotate(45deg);
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.nav-links .nav-dropdown:hover > a::after,
.nav-links .nav-dropdown:focus-within > a::after {
  transform: translateY(0.02em) rotate(-135deg);
}

.nav-links .nav-dropdown.cerrado > a::after {
  transform: translateY(-0.18em) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-links .nav-dropdown-menu,
  .nav-links .nav-dropdown:hover .nav-dropdown-menu,
  .nav-links .nav-dropdown:focus-within .nav-dropdown-menu {
    transition: none;
    transform: translateX(-50%);
  }
  .nav-links .nav-dropdown > a::after,
  .nav-links .nav-dropdown-menu .dd-pie svg { transition: none; }
}


/* ================================================================
   ASESORIA 1-A-1 (inicio) — 2026-11-02, tanda 2
   Antes: caja marron transparente con borde naranja y boton
   contorneado, pegada al parrafo de arriba. Ahora: card de un solo
   color con grano fino (ruido SVG monocromo, casi invisible), una
   cinta de bandera a cuadros arriba y el boton solido del sitio.
   ================================================================ */
.pas-section {
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem);
}

.asesoria {
  --asesoria-fondo: #161617;
  --asesoria-borde: rgba(255, 255, 255, 0.07);
  --asesoria-tinta: #F4F4F5;
  --asesoria-suave: #B9B9BD;
  --asesoria-cuadro: 9px;
  --asesoria-grano-opacidad: 0.09;
  position: relative;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  padding: 0;
  text-align: left;
  background: var(--asesoria-fondo);
  border: 1px solid var(--asesoria-borde);
  border-radius: var(--radius-surface);
  overflow: hidden;
  isolation: isolate;
}

[data-theme="light"] .asesoria {
  --asesoria-fondo: #FFFFFF;
  --asesoria-borde: rgba(0, 0, 0, 0.08);
  --asesoria-tinta: #141414;
  --asesoria-suave: #55514E;
  --asesoria-grano-opacidad: 0.06;
}

/* Grano: ruido fractal en gris, sin color. Va debajo del texto. */
.asesoria::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--asesoria-grano-opacidad);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Cinta de bandera a cuadros: dos filas de cuadros blancos y negros.
   Blanco y negro en los dos temas (es la bandera, no un color del sitio). */
.asesoria-bandera {
  height: calc(var(--asesoria-cuadro) * 2);
  background-color: #FFFFFF;
  background-image: repeating-conic-gradient(#0E0E0F 0 25%, #FFFFFF 0 50%);
  background-size: calc(var(--asesoria-cuadro) * 2) calc(var(--asesoria-cuadro) * 2);
  border-bottom: 1px solid var(--asesoria-borde);
}

.asesoria-cuerpo {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.25rem;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 4vw, 2.75rem);
}

.asesoria-ico {
  grid-row: 1 / span 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-control);
  background: rgba(255, 102, 0, 0.1);
  border: 1px solid rgba(255, 102, 0, 0.22);
  color: var(--orange-primary);
}

.pas-solution-title.asesoria-titulo {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--asesoria-tinta);
}

.pas-text.asesoria-texto {
  max-width: 62ch;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--asesoria-suave);
}

.asesoria-texto strong {
  color: var(--asesoria-tinta);
  font-weight: 700;
}

.asesoria .pas-cta {
  margin-top: 1.6rem;
}

.asesoria .asesoria-boton {
  min-height: 52px;
  padding: 0 1.6rem;
  gap: 0.6rem;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  border-radius: var(--radius-control);
}

@media (max-width: 600px) {
  .asesoria { --asesoria-cuadro: 7px; }
  .asesoria-cuerpo { grid-template-columns: 1fr; }
  .asesoria-ico { grid-row: auto; margin-bottom: 1rem; width: 44px; height: 44px; }
  .asesoria .asesoria-boton { width: 100%; padding: 0.9rem 1rem; line-height: 1.25; justify-content: center; text-align: center; }
}


/* ================================================================
   CATEGORIAS DEL INICIO — 2026-11-02, tanda 2
   Antes: foto sobre gris degradado y media card negra vacia con el
   nombre abajo. Ahora: el mismo lenguaje de la card «placa de
   carrera» de producto: card de un color, foto en ventana blanca
   redondeada, nombre en Barlow y una linea con la cantidad y las
   marcas que mas hay (sale del catalogo, products.js). Clases nuevas
   (.cat-placa) para no heredar el 3D y los brillos de .category-card.
   ================================================================ */
.categories-grid.categorias-placa {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.cat-placa {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.6rem;
  background: var(--placa-card);
  color: var(--placa-tinta);
  border: 1px solid var(--placa-borde);
  border-radius: var(--radius-surface);
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.cat-placa:hover,
.cat-placa:focus-visible {
  transform: translateY(-3px);
  border-color: var(--placa-borde-hover);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.45);
}

.cat-placa:focus-visible {
  outline: 2px solid var(--orange-primary);
  outline-offset: 2px;
}

.cat-placa-ventana {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 11;
  padding: 6%;
  background: var(--placa-ventana);
  border: 1px solid var(--placa-ventana-borde);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.cat-placa-ventana img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.cat-placa:hover .cat-placa-ventana img {
  transform: scale(1.05);
}

.cat-placa-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.35rem;
  padding: 0.85rem 0.3rem 0.2rem;
}

.cat-placa-nombre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cat-placa-desc {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--placa-suave);
}

.cat-placa-ir {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-primary);
}

.cat-placa-ir svg {
  transition: transform 0.22s ease;
}

.cat-placa:hover .cat-placa-ir svg {
  transform: translateX(3px);
}

@media (max-width: 1100px) {
  .categories-grid.categorias-placa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .categories-grid.categorias-placa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .cat-placa { padding: 0.45rem; }
  .cat-placa-info { padding: 0.65rem 0.2rem 0.15rem; gap: 0.25rem; }
  .cat-placa-nombre { font-size: 1.15rem; }
  .cat-placa-desc { font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-placa,
  .cat-placa:hover,
  .cat-placa-ventana img,
  .cat-placa:hover .cat-placa-ventana img,
  .cat-placa-ir svg { transition: none; transform: none; }
}


/* ================================================================
   /PROMOCIONES — 2026-11-02, tanda 2
   Portada sobria (moto recortada quieta sobre un color), cards de
   combo con lo que trae y el ahorro real, y 3 pasos en la pagina.
   ================================================================ */
.promos-portada {
  --promos-fondo: #111112;
  --promos-tinta: #F4F4F5;
  --promos-suave: #A9A9AE;
  background: var(--promos-fondo);
  color: var(--promos-tinta);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .promos-portada {
  --promos-fondo: #F3F2F0;
  --promos-tinta: #141414;
  --promos-suave: #55514E;
  border-bottom-color: rgba(0, 0, 0, 0.07);
}

.promos-portada-in {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: calc(var(--header-clearance) + clamp(1.5rem, 4vw, 3rem)) 1.5rem clamp(2rem, 4vw, 3rem);
}

.promos-kicker {
  margin: 0 0 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-primary);
}

.promos-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--promos-tinta);
  text-shadow: none;
}

.promos-sub {
  max-width: 46ch;
  margin: 1.2rem 0 0;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--promos-suave);
}

.promos-cta {
  margin-top: 1.8rem;
  min-height: 54px;
  padding: 0 2rem;
  letter-spacing: 0.1em;
}

.promos-portada-moto {
  display: flex;
  justify-content: center;
}

.promos-portada-moto img {
  width: 100%;
  max-width: 560px;
  height: auto;
}

/* Encabezados de seccion: a la izquierda, sin insignias ni degradados */
.promos-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}

.promos-encabezado { margin-bottom: 1.4rem; }

.promos-bajada {
  margin: 0.6rem 0 0;
  max-width: 60ch;
  color: var(--gray-text);
  font-size: 1rem;
  line-height: 1.6;
}

/* Filtros: pildoras planas; la activa se marca por contraste */
.promos-combos .promo-filter-tabs {
  justify-content: flex-start;
  margin-bottom: 1.6rem;
}

.promos-combos .promo-tab {
  padding: 0.55rem 1.1rem;
  background: transparent;
  border: 1px solid var(--placa-campo-borde);
  border-radius: var(--radius-round);
  color: var(--placa-tinta);
  font-size: 0.85rem;
  box-shadow: none;
}

.promos-combos .promo-tab:hover {
  border-color: var(--placa-tinta);
  color: var(--placa-tinta);
}

.promos-combos .promo-tab.active {
  background: var(--placa-tinta);
  border-color: var(--placa-tinta);
  color: var(--placa-card);
  box-shadow: none;
}

/* ---- card de combo ---- */
.promos-grid.combos-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
}

.combo-card {
  display: flex;
  flex-direction: column;
  padding: 0.6rem;
  background: var(--placa-card);
  color: var(--placa-tinta);
  border: 1px solid var(--placa-borde);
  border-radius: var(--radius-surface);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.combo-card:hover {
  transform: translateY(-3px);
  border-color: var(--placa-borde-hover);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.45);
}

.combo-cabeza { padding: 0.4rem 0.3rem 0.7rem; }

.combo-nivel {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-primary);
}

.combo-nombre {
  margin: 0.3rem 0 0;
  min-height: 2.1em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.05;
  text-transform: uppercase;
}

/* Ventana blanca con las fotos de lo que trae, en mosaico */
.combo-fotos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 1px;
  aspect-ratio: 16 / 11;
  background: var(--placa-ventana-borde);
  border: 1px solid var(--placa-ventana-borde);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.combo-fotos[data-n="1"] { grid-template-columns: 1fr; }
.combo-fotos[data-n="3"] .combo-foto:first-child { grid-row: span 2; }

.combo-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 8%;
  background: var(--placa-ventana);
}

.combo-foto img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.combo-trae { padding: 0.9rem 0.3rem 0; }

.combo-trae-titulo {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--placa-suave);
}

.combo-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.combo-lista li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.38rem 0;
  font-size: 0.86rem;
  line-height: 1.35;
  border-top: 1px solid var(--placa-borde);
}

.combo-item-nombre { min-width: 0; }

.combo-item-precio {
  flex: none;
  color: var(--placa-suave);
  font-variant-numeric: tabular-nums;
}

.combo-precio {
  margin-top: auto;
  padding: 0.9rem 0.3rem 0;
}

.combo-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: var(--placa-suave);
}

.combo-fila s { font-variant-numeric: tabular-nums; }

.combo-fila--total {
  margin-top: 0.25rem;
  color: var(--placa-tinta);
}

.combo-fila--total b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--orange-primary);
  font-variant-numeric: tabular-nums;
}

.combo-ahorro {
  margin: 0.45rem 0 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--placa-tinta);
}

.combo-acciones { padding: 0.9rem 0.3rem 0.3rem; }

.combo-acciones .btn {
  width: 100%;
  min-height: 48px;
  border-radius: var(--radius-control);
}

/* ---- Combo en el carrito, el checkout y el modal (2026-11-03) ----
   Un combo es UNA linea con sus piezas adentro (js/combos.js). */
.cart-combo-piezas,
.checkout-combo-piezas {
  list-style: none;
  margin: 0.35rem 0 0.6rem;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.cart-combo-pieza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.6rem;
  font-size: 0.78rem;
  color: var(--gray-light-text);
}

/* El nombre ocupa su renglon entero; talla y «Quitar» van debajo. */
.cart-combo-pieza-nombre {
  flex: 1 0 100%;
  min-width: 0;
  overflow-wrap: break-word;
}

.cart-combo-unica {
  font-size: 0.72rem;
  color: var(--gray-text);
}

.cart-combo-quitar {
  background: transparent;
  border: 0;
  padding: 0.35rem 0.2rem;
  min-height: 32px;
  font: inherit;
  font-size: 0.72rem;
  color: var(--gray-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  touch-action: manipulation;
}

.cart-combo-quitar:hover,
.cart-combo-quitar:focus-visible { color: var(--red-accent); }

.cart-combo-suelto,
.cart-combo-ahorro {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-text);
}

.cart-combo-ahorro,
.checkout-combo-ahorro {
  font-weight: 700;
  color: var(--white);
}

.cart-combo-nota {
  margin: 0.4rem 0 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--gray-text);
}

/* El combo lleva lista de piezas: el precio baja a su propio renglon para
   que el nombre y las piezas usen todo el ancho (en el celular quedaban en
   una columna de 100 px). */
.checkout-summary-item--combo {
  flex-wrap: wrap;
  align-items: flex-start;
}

.checkout-summary-item--combo .checkout-summary-item-name { overflow-wrap: break-word; }

.checkout-summary-item--combo .checkout-summary-item-price {
  flex-basis: 100%;
  text-align: right;
}

.checkout-combo-piezas li {
  font-size: 0.75rem;
  color: var(--gray-light-text);
}

.checkout-combo-piezas li span { color: var(--gray-text); }

.checkout-combo-ahorro {
  margin: 0;
  font-size: 0.75rem;
}

.promo-product-size-select.is-missing {
  border-color: var(--red-accent);
  outline: 2px solid var(--red-accent);
  outline-offset: 1px;
}

.promo-talla-unica,
.promo-talla-agotado {
  font-size: 0.8rem;
  color: var(--gray-text);
}

.promo-talla-agotado {
  font-weight: 700;
  color: var(--red-accent);
}

.promo-agotado-aviso {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--gray-light-text);
}

#addToCartComboBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- 3 pasos ---- */
.promos-pasos { background: var(--gray-medium); }

.pasos-lista {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.paso {
  padding: 1.5rem 1.4rem;
  background: var(--placa-card);
  border: 1px solid var(--placa-borde);
  border-radius: var(--radius-surface);
}

.paso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-control);
  background: rgba(255, 102, 0, 0.1);
  border: 1px solid rgba(255, 102, 0, 0.22);
  color: var(--orange-primary);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
}

.paso-titulo {
  margin: 1rem 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--placa-tinta);
}

.paso p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--placa-suave);
}

/* CTA final de promociones: un color, sin degradado */
.cta-section.promo-cta {
  background: var(--gray-dark);
  border-top: 1px solid var(--placa-borde);
  border-bottom: 0;
}

.cta-section.promo-cta::before { content: none; }
.promo-cta .cta-title { color: var(--placa-tinta); }
.promo-cta .cta-text { color: var(--placa-suave); }

.cta-section.promo-cta .btn {
  background: var(--orange-primary);
  color: #0A0A0A;
  border: 0;
  border-radius: var(--radius-control);
}

.cta-section.promo-cta .btn:hover { background: var(--orange-hover); }

@media (max-width: 860px) {
  .promos-portada-in { grid-template-columns: 1fr; }
  .promos-portada-moto { order: -1; }
  .promos-portada-moto img { max-width: 380px; }
  .pasos-lista { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .promos-portada-in { padding-inline: 1rem; }
  .promos-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .combo-card, .combo-card:hover { transition: none; transform: none; }
}


/* ================================================================
   NOSOTROS — 2026-11-02, tanda 2
   Foto grande junto al texto, franja de datos comprobables, banda de
   marcas y una foto ancha (cuadro del video de la portada).
   ================================================================ */
.about-hero--foto { padding-bottom: clamp(2rem, 4vw, 3rem); }

.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.about-hero-foto {
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  border-radius: var(--radius-surface);
  overflow: hidden;
  background: var(--gray-medium);
}

.about-hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.about-datos {
  border-bottom: 1px solid var(--placa-borde);
}

.about-datos-lista {
  list-style: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-dato {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.25rem 0;
}

.about-dato + .about-dato {
  padding-left: clamp(1rem, 3vw, 2.5rem);
  border-left: 1px solid var(--placa-borde);
}

.about-dato-ico {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--orange-primary);
}

.about-dato b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--placa-tinta);
}

.about-dato small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--placa-suave);
}

/* Marcas: los mismos logos naranja de la portada, quietos, en grilla */
.about-marcas {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--placa-borde);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem clamp(1.5rem, 3.5vw, 3rem);
}

.about-marcas img {
  display: block;
  height: 26px;
  width: auto;
}

/* Foto ancha */
.about-banda {
  position: relative;
  margin: 0;
  aspect-ratio: 21 / 8;
  min-height: 240px;
  max-height: 520px;
  width: 100%;
  overflow: hidden;
  background: #0E0E0F;
}

.about-banda img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  display: block;
}

.about-banda figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3rem max(1.5rem, calc((100% - 1400px) / 2 + 1.5rem)) 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: #FFFFFF;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent);
}

.about-local:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 2rem 0 0;
}

.about-local img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-surface);
}

@media (max-width: 860px) {
  .about-hero-grid { grid-template-columns: 1fr; }
  .about-hero-foto { aspect-ratio: 16 / 11; max-height: none; }
  .about-datos-lista { grid-template-columns: 1fr; }
  .about-dato + .about-dato { padding-left: 0; border-left: 0; border-top: 1px solid var(--placa-borde); }
  .about-marcas img { height: 22px; }
}


/* ================================================================
   PORTADA DEL BLOG — 2026-11-02, tanda 2
   Tarjetas de articulo con imagen (foto propia recortada, o foto de
   producto entera en ventana blanca), en grilla. La pagina de la
   portada se ensancha; los articulos siguen a 760 px de lectura.
   ================================================================ */
.blog-page:has(.blog-lista) {
  max-width: 1240px;
}

.blog-page:has(.blog-lista) h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
  line-height: 1;
  text-transform: uppercase;
}

.blog-page:has(.blog-lista) .blog-meta {
  max-width: 62ch;
}

.blog-lista {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.blog-tarjeta.blog-tarjeta--img {
  display: flex;
  flex-direction: column;
  padding: 0.6rem;
  background: var(--placa-card);
  border: 1px solid var(--placa-borde);
  border-radius: var(--radius-surface);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.blog-tarjeta.blog-tarjeta--img:hover,
.blog-tarjeta.blog-tarjeta--img:focus-visible {
  background: var(--placa-card);
  transform: translateY(-3px);
  border-color: var(--placa-borde-hover);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.45);
}

.blog-tarjeta-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: #0E0E0F;
}

.blog-tarjeta-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-tarjeta-img--producto {
  padding: 8%;
  background: var(--placa-ventana);
  border: 1px solid var(--placa-ventana-borde);
}

.blog-tarjeta-img--producto img {
  object-fit: contain;
  mix-blend-mode: multiply;
}

.blog-tarjeta--img:hover .blog-tarjeta-img img {
  transform: scale(1.04);
}

.blog-tarjeta-texto {
  display: block;
  padding: 0.9rem 0.4rem 0.5rem;
}

.blog-tarjeta--img h2 {
  letter-spacing: 0.01em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--placa-tinta);
}

.blog-tarjeta--img p {
  color: var(--placa-suave);
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .blog-tarjeta.blog-tarjeta--img,
  .blog-tarjeta.blog-tarjeta--img:hover,
  .blog-tarjeta-img img,
  .blog-tarjeta--img:hover .blog-tarjeta-img img { transition: none; transform: none; }
}


/* ================================================================
   PAGINAS LEGALES Y DE AYUDA — 2026-11-02, tanda 2
   privacy, terms, returns, retracto, shipping, sizes, faq llevan
   <body class="pagina-legal">. Solo presentacion: el texto legal no
   se toco. Lectura de ~70 caracteres por linea, titulos en Barlow,
   cards de un color, sin brillos, degradados ni emojis.
   Muchas de estas paginas traen estilos escritos en la etiqueta
   (style="..."): por eso algunas reglas llevan !important.
   ================================================================ */
.pagina-legal {
  --legal-ancho: 42rem; /* ~70 caracteres por linea; en rem para que los titulos grandes no lo estiren */
}

.pagina-legal .page-header {
  background: var(--gray-dark);
  text-align: left;
  padding: calc(var(--header-clearance) + clamp(2rem, 5vw, 3.5rem)) 0 clamp(2rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--placa-borde);
}

.pagina-legal .page-header::before { content: none; }

.pagina-legal .page-header .container,
.pagina-legal .container-narrow {
  max-width: calc(var(--legal-ancho) + 3rem);
}

.pagina-legal .page-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-shadow: none;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--white);
}

.pagina-legal .page-subtitle {
  margin: 0;
  max-width: var(--legal-ancho);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Las secciones de lectura, con el mismo ancho que el titulo */
.pagina-legal .section { padding: clamp(2rem, 5vw, 3.5rem) 0; }

.pagina-legal .section > .container > div[style*="max-width"] {
  max-width: var(--legal-ancho) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.pagina-legal .section h2,
.pagina-legal .legal-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: left;
}

.pagina-legal .section-title::after { display: none; }

.pagina-legal .section > .container > h2 {
  max-width: var(--legal-ancho);
  margin-left: auto;
  margin-right: auto;
}

.pagina-legal .legal-section-title {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--placa-borde);
}

.pagina-legal [id] { scroll-margin-top: calc(var(--header-clearance) + 1rem); }

.pagina-legal p,
.pagina-legal li {
  line-height: 1.75;
}

.pagina-legal h3,
.pagina-legal h4 {
  letter-spacing: 0.01em;
}

/* Ultima actualizacion: una linea neutra */
.pagina-legal .last-update {
  justify-content: flex-start;
  padding: 0.8rem 1rem;
  background: var(--placa-card);
  border: 1px solid var(--placa-borde);
  border-radius: var(--radius-control);
  font-size: 0.92rem;
}

.pagina-legal .update-text strong { color: var(--placa-tinta); }

.pagina-legal .legal-intro { text-align: left; }

/* Indice: sobrio, en dos columnas cuando hay ancho */
.pagina-legal .table-of-contents {
  background: var(--placa-card);
  border: 1px solid var(--placa-borde);
  padding: 1rem 1.25rem;
}

.pagina-legal .table-of-contents ol {
  margin: 0;
  padding: 0;
  columns: 2 16rem;
  column-gap: 2rem;
}

.pagina-legal .table-of-contents li {
  break-inside: avoid;
  border-bottom: 1px solid var(--placa-borde);
}

.pagina-legal .table-of-contents a:hover { padding-left: 0; text-decoration: underline; text-underline-offset: 3px; }

/* Cards y cajas: un color, borde fino, sin brillo ni movimiento */
.pagina-legal :is(.contact-info-card, .principle-card, .purpose-card, .right-card, .security-item, .third-party-card, .method-card, .info-box, .faq-item, .cta-box) {
  background: var(--placa-card) !important;
  border: 1px solid var(--placa-borde) !important;
  border-radius: var(--radius-surface);
  box-shadow: none !important;
  transform: none !important;
}

.pagina-legal :is(.principle-card, .purpose-card, .right-card, .method-card):hover {
  border-color: var(--placa-borde-hover) !important;
}

.pagina-legal :is(.contact-info-card, .info-box)::before,
.pagina-legal :is(.contact-info-card, .info-box)::after { content: none; }

/* Grillas de cards de privacidad/terminos (no tenian estilo propio) */
.pagina-legal :is(.principles-grid, .purposes-grid, .third-parties-grid, .rights-grid, .security-list) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}

.pagina-legal :is(.principle-card, .purpose-card, .right-card, .security-item, .third-party-card) {
  padding: 1rem 1.1rem;
}

.pagina-legal :is(.principle-card, .purpose-card, .right-card, .security-item, .third-party-card) h4 {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--placa-tinta);
}

.pagina-legal :is(.principle-card, .purpose-card, .right-card, .security-item, .third-party-card) p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--placa-suave);
}

.pagina-legal .cta-box { border-width: 1px !important; }

.pagina-legal .right-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 0.6rem;
  border-radius: var(--radius-control);
  background: rgba(255, 102, 0, 0.1);
  border: 1px solid rgba(255, 102, 0, 0.22);
  color: var(--orange-primary);
  font-family: var(--font-display);
  font-weight: 800;
}

/* Los numeros de los pasos: cuadro naranja suave, no circulo con degradado */
.pagina-legal [style*="gradient-orange"],
.pagina-legal .step-number {
  background: rgba(255, 102, 0, 0.1) !important;
  border: 1px solid rgba(255, 102, 0, 0.22) !important;
  border-radius: var(--radius-control) !important;
  color: var(--orange-primary) !important;
  font-family: var(--font-display);
  font-weight: 800 !important;
  box-shadow: none !important;
}

/* Bloque «¿Necesitas ayuda?» del final: un color, boton del sitio */
.pagina-legal .cta-section {
  background: var(--gray-dark);
  border-top: 1px solid var(--placa-borde);
}

.pagina-legal .cta-section::before { content: none; }
.pagina-legal .cta-title { color: var(--placa-tinta); }
.pagina-legal .cta-text { color: var(--placa-suave); }

.pagina-legal .cta-section .btn {
  background: var(--orange-primary);
  color: #0A0A0A;
  border: 0;
  border-radius: var(--radius-control);
}

.pagina-legal .cta-section .btn:hover { background: var(--orange-hover); color: #0A0A0A; }

@media (max-width: 600px) {
  .pagina-legal .table-of-contents ol { columns: 1; }
}

/* Guia de tallas, envios y preguntas: mismo ancho de lectura y sin acabado naranja */
.pagina-legal .size-guide-header,
.pagina-legal .size-guide-content,
.pagina-legal .faq-list {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.pagina-legal .size-guide-header {
  border-bottom: 1px solid var(--placa-borde);
}

.pagina-legal .size-guide-title {
  font-weight: 800;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  letter-spacing: 0.01em;
}

.pagina-legal .intro-text { text-align: left; max-width: var(--legal-ancho); }

.pagina-legal .intro-text .hint-text,
.pagina-legal .fit-tips {
  background: var(--placa-card);
  border: 1px solid var(--placa-borde);
  border-left: 3px solid var(--orange-primary);
  color: var(--placa-tinta);
}

.pagina-legal .size-intro { background: var(--placa-card); border: 1px solid var(--placa-borde); }

.pagina-legal :is(.size-intro h3, .fit-tips h4) { letter-spacing: 0.01em; text-transform: uppercase; }

.pagina-legal .size-table thead { background: var(--placa-tinta); }
.pagina-legal .size-table thead th { color: var(--placa-card); letter-spacing: 0.06em; }

.pagina-legal .proteccion-card {
  background: var(--placa-card);
  border: 1px solid var(--placa-borde);
  box-shadow: none;
  transform: none;
}

.pagina-legal .faq-toggle {
  background: transparent;
  border: 1px solid var(--placa-campo-borde);
  border-radius: var(--radius-round);
  color: var(--placa-tinta);
}

.pagina-legal .shipping-benefits .benefit-card,
.pagina-legal .benefit-card {
  background: var(--placa-card);
  border: 1px solid var(--placa-borde);
  box-shadow: none;
  transform: none;
}


/* ================================================================
   ARTICULO LARGO — 2026-11-03
   /motocross-cali (historia) y /equipamiento-motocross (guia) dejaron
   de ser landings con titulo gigante, emojis y botones verdes: son
   articulos. Lectura a ~70 caracteres, titulos en Barlow alineados a la
   izquierda, una foto real de cabecera, naranja solo de acento y en el
   boton principal. Las entradas las pone ZapMov.aparecer desde un
   estado visible; la barra de lectura usa scroll-driven animations
   (sin JS en el scroll) y solo existe donde el navegador las soporta.
   ================================================================ */
.articulo {
  --art-ancho: 42rem;
  padding: calc(var(--header-clearance) + clamp(1.5rem, 4vw, 3rem)) 0 clamp(3rem, 6vw, 5rem);
}

.articulo-envoltura {
  width: 100%;
  max-width: calc(var(--art-ancho) + 3rem);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.articulo-cabecera {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  width: 100%;
  max-width: 72rem;
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  padding: 0 1.5rem;
}

.articulo-cabecera--lado { align-items: end; }
.articulo-cabecera--retrato { align-items: center; }

@media (min-width: 900px) {
  .articulo-cabecera--lado { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.articulo-miga {
  margin: 0 0 1rem;
  color: var(--gray-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.articulo-miga a { color: var(--orange-primary); }
.articulo-miga a:hover { text-decoration: underline; text-underline-offset: 3px; }

.articulo h1 {
  max-width: 34rem;
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--white);
}

.articulo-bajada {
  max-width: 38rem;
  margin: 0 0 1.25rem;
  color: var(--gray-light-text);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.6;
}

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

.articulo-foto { margin: 0; }

.articulo-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-surface);
  background: var(--gray-medium);
}

.articulo-cabecera--lado .articulo-foto img {
  aspect-ratio: 4 / 3;
  object-position: 50% 22%;
}

@media (min-width: 900px) {
  .articulo-cabecera--retrato .articulo-foto img { aspect-ratio: 4 / 5; }
}

.articulo-foto figcaption {
  margin-top: 0.6rem;
  color: var(--gray-text);
  font-size: 0.8rem;
}

/* Cuerpo de lectura */
.articulo-cuerpo {
  color: var(--gray-light-text);
  font-size: 1.05rem;
  line-height: 1.75;
}

.articulo-cuerpo p,
.articulo-cuerpo ul,
.articulo-cuerpo ol { margin: 0 0 1.25rem; }

.articulo-cuerpo ul,
.articulo-cuerpo ol { padding-left: 1.25rem; }

.articulo-cuerpo li { margin-bottom: 0.45rem; }

.articulo-cuerpo h2 {
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--placa-borde);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}

.articulo-cuerpo h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
}

.articulo-cuerpo a:not(.btn):not(.articulo-ir),
.articulo-fuentes a {
  color: var(--orange-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.articulo-cuerpo strong { color: var(--white); }

.articulo-aviso {
  margin: 0 0 2rem;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--orange-primary);
  background: var(--placa-card);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  color: var(--gray-text);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Recomendacion propia: se distingue del dato con fuente */
.articulo-reco {
  margin: 1.25rem 0;
  padding: 1rem 1.15rem;
  background: var(--placa-card);
  border: 1px solid var(--placa-borde);
  border-radius: var(--radius-control);
  font-size: 0.98rem;
  line-height: 1.65;
}

.articulo-reco b {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--white);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.articulo-reco p { margin: 0; }
.articulo-reco p + p { margin-top: 0.6rem; }

/* Linea de tiempo (historia): anio en Barlow, texto al lado */
.linea-tiempo {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0 !important;
}

.linea-tiempo li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--placa-borde);
}

.linea-tiempo li:first-child { border-top: 1px solid var(--placa-borde); }

.linea-tiempo time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--orange-primary);
}

.linea-tiempo p { margin: 0; font-size: 0.98rem; line-height: 1.6; }

/* Numero de fuente al lado de una afirmacion */
.articulo sup a {
  margin-left: 1px;
  font-size: 0.72em;
  font-weight: 600;
  text-decoration: none !important;
}

/* Pieza de equipo (guia): icono de linea + titulo + enlace a la categoria */
.articulo-pieza {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--placa-borde);
}

.articulo-pieza-cabeza {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.articulo-cuerpo .articulo-pieza-cabeza h2 {
  margin: 0;
  padding: 0;
  border: 0;
}

.articulo-icono {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
  background: rgba(255, 102, 0, 0.1);
  border: 1px solid rgba(255, 102, 0, 0.22);
  color: var(--orange-primary);
}

.articulo-icono svg { width: 24px; height: 24px; }

.articulo-ir {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--orange-primary);
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}

.articulo-ir svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.articulo-ir:hover svg { transform: translateX(3px); }

/* Indice de la guia */
.articulo-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0 !important;
  list-style: none;
}

.articulo-indice li { margin: 0; }

.articulo-cuerpo .articulo-indice a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--placa-campo-borde);
  border-radius: var(--radius-round);
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.articulo-cuerpo .articulo-indice a:hover { border-color: var(--orange-primary); }

.articulo [id] { scroll-margin-top: calc(var(--header-clearance) + 1rem); }

/* Cierre: lleva a la tienda */
.articulo-cierre {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--placa-card);
  border: 1px solid var(--placa-borde);
  border-radius: var(--radius-surface);
}

.articulo-cuerpo .articulo-cierre h2 {
  margin: 0 0 0.6rem;
  padding: 0;
  border: 0;
}

.articulo-cierre > p {
  margin: 0 0 1.25rem;
  color: var(--gray-light-text);
  line-height: 1.65;
}

.articulo-cierre .btn { border-radius: var(--radius-round); }

.articulo-cierre .articulo-cierre-pie {
  display: flex;
  gap: 0.75rem;
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--placa-borde);
  color: var(--gray-text);
  font-size: 0.92rem;
  line-height: 1.6;
}

.articulo-cierre-pie svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--orange-primary); }

/* Fuentes */
.articulo-fuentes {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--placa-borde);
  color: var(--gray-text);
  font-size: 0.85rem;
  line-height: 1.6;
}

.articulo-fuentes h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--white);
}

.articulo-fuentes ol { margin: 0; padding-left: 1.4rem; }
.articulo-fuentes li { margin-bottom: 0.5rem; overflow-wrap: anywhere; }

/* Barra de lectura: fina, arriba de todo, solo con scroll-timeline */
.articulo-progreso { display: none; }

@supports (animation-timeline: scroll()) {
  .articulo-progreso {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    height: 2px;
    background: var(--orange-primary);
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: articulo-leer linear both;
    animation-timeline: scroll(root);
    pointer-events: none;
  }
  @keyframes articulo-leer { to { transform: scaleX(1); } }
}

@media (prefers-reduced-motion: reduce) {
  .articulo-progreso { display: none !important; }
  .articulo-ir svg,
  .articulo-cuerpo .articulo-indice a { transition: none; }
  .articulo-ir:hover svg { transform: none; }
}

@media (max-width: 560px) {
  .articulo-envoltura,
  .articulo-cabecera { padding: 0 1rem; }
  .linea-tiempo li { grid-template-columns: 1fr; gap: 0.2rem; }
}


/* ================================================================
   AJUSTES 2026-11-03 — header en pantallas chicas, alto de la
   portada y card de asesoria
   ================================================================ */

/* ---- Header proporcional en laptops (1366 x ~650) y anchos < 1280 ----
   En una laptop con la barra de favoritos el header de 79 px se comia
   1/8 de la pantalla. Todo baja en la misma proporcion: aire, logo,
   letra y botones. El celular (<= 768) tiene su propio header y no se
   toca. --header-clearance acompaña: todo lo que reserva aire debajo
   del header lee esa variable. */
@media (min-width: 769px) and (max-width: 1279px), (min-width: 769px) and (max-height: 760px) {
  :root { --header-clearance: 72px; }
  .header { padding-top: 8px; }
  .nav { padding: 6px 12px; gap: clamp(0.75rem, 2.2vw, 1.75rem); }
  .logo { gap: 0.45rem; font-size: 1.2rem; }
  .logo-image { height: 34px; }
  .nav-links { gap: 0.15rem; }
  .nav-links a { font-size: 0.76rem; letter-spacing: 0.6px; padding: 0.3rem 0.55rem; }
  .theme-toggle { width: 50px; height: 27px; margin-right: 4px; }
  .cart-btn,
  .header .btn-whatsapp.btn-small { width: 36px; height: 36px; }
}

/* Al bajar, el header se achica un poco mas (solo PC). */
@media (min-width: 769px) {
  .header.scrolled { padding-top: 6px; }
  .header.scrolled .nav { padding-top: 4px; padding-bottom: 4px; }
}

/* ---- Portada: ocupa exactamente la pantalla ----
   Antes: alto minimo de la escena (520 px) + franja + marcas = 673 px,
   mas que una laptop de 657 (las marcas quedaban afuera), y tope de
   1200 px que en 2560 x 1440 dejaba 240 px de la seccion siguiente.
   Ahora la portada mide el alto visible (con piso de 540 y techo de
   1600), y el aire y el titulo se achican con el alto de la pantalla. */
.portada {
  min-height: clamp(540px, 100vh, 1600px);
  min-height: clamp(540px, 100svh, 1600px);
}

.portada-escena {
  min-height: 0;
}

@media (min-width: 601px) {
  .portada-escena {
    padding-top: calc(var(--header-clearance) + clamp(0.75rem, 4.5vh, 3.5rem));
    padding-bottom: clamp(1.25rem, 5vh, 4rem);
  }
  .portada-grande {
    font-size: min(clamp(2.6rem, 1.4rem + 4.6vw, 4.6rem), 10.5vh);
  }
}

@media (min-width: 1440px) {
  .portada-grande {
    font-size: min(clamp(4.6rem, 2rem + 3vw, 5.5rem), 9vh);
  }
}

@media (min-width: 601px) and (max-height: 760px) {
  .portada-kicker { margin-bottom: 0.6rem; }
  .portada-sub { margin-top: 0.8rem; }
  .portada .portada-cta { margin-top: 1.3rem; min-height: 50px; }
  .portada-placa { padding: 0.85rem 0; }
  .portada-marcas { padding: 0.8rem 0; }
}

/* ---- Card de asesoria ----
   Sin grano (se veia sucio) y el auricular sin caja. Profundidad con
   luz: un halo naranja muy tenue detras de la card y una luz suave que
   baja desde la bandera. Un solo color, sin degradados de colores. */
.asesoria::before {
  content: none;
}

.asesoria {
  background:
    radial-gradient(ellipse 75% 70% at 50% 0%, rgba(255, 102, 0, 0.075), rgba(255, 102, 0, 0) 70%),
    var(--asesoria-fondo);
  box-shadow:
    0 36px 90px -40px rgba(255, 102, 0, 0.32),
    0 18px 40px -24px rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .asesoria {
  background:
    radial-gradient(ellipse 75% 70% at 50% 0%, rgba(255, 102, 0, 0.06), rgba(255, 102, 0, 0) 70%),
    var(--asesoria-fondo);
  box-shadow:
    0 36px 90px -40px rgba(255, 102, 0, 0.26),
    0 14px 34px -22px rgba(0, 0, 0, 0.16);
}

.asesoria-ico {
  width: auto;
  height: auto;
  padding-top: 0.15rem;
  align-items: flex-start;
  background: none;
  border: 0;
  border-radius: 0;
}

.asesoria-ico svg {
  width: 44px;
  height: 44px;
}

@media (max-width: 600px) {
  .asesoria-ico { width: auto; height: auto; margin-bottom: 0.85rem; }
  .asesoria-ico svg { width: 38px; height: 38px; }
}