/* ═══════════════════════════════════════════════════════════════════
   TIENDA VIRTUAL — SINCRONIA SOLUCIONES  v2
   Archivo: css/styles.css
   Descripción: Diseño deportivo premium (ref. Nike / Adidas)
   Paleta: Crema #F7F6F3 | Oscuro #1A1A1A | Rojo profesional #C8102E
   Breakpoints: 480 / 768 / 1024 / 1280px
   ═══════════════════════════════════════════════════════════════════ */

/* ─── VARIABLES CSS (nueva paleta v2) ────────────────────────────── */
:root {
  /* Fondos */
  --bg-primary:    #F7F6F3;
  --bg-secondary:  #FFFFFF;
  --bg-card:       #FFFFFF;
  --bg-dark:       #1A1A1A;
  --bg-alt:        #EEECE7;

  /* Acento */
  --accent:        #C8102E;
  --accent-hover:  #A50D26;
  --accent-light:  #FFF0F2;

  /* Tipografía */
  --text-primary:  #111111;
  --text-secondary:#555555;
  --text-muted:    #888888;
  --text-white:    #FFFFFF;

  /* Bordes */
  --border:        #E5E3DE;
  --border-strong: #C8C5BE;

  /* Sombras */
  --shadow-card:   0 2px 8px rgba(0,0,0,0.08);
  --shadow-hover:  0 8px 24px rgba(0,0,0,0.10);
  --shadow-modal:  0 8px 32px rgba(0,0,0,0.15);

  /* Radios */
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     16px;
  --radius-xl:     20px;
  --radius-full:   9999px;

  /* Alias para compatibilidad con código existente */
  --rojo:           #C8102E;
  --rojo-oscuro:    #A50D26;
  --rojo-claro:     #E8324A;
  --negro:          #111111;
  --blanco:         #FFFFFF;
  --fondo:          #F7F6F3;
  --fondo-alt:      #EEECE7;
  --fondo-card:     #FFFFFF;
  --texto:          #111111;
  --texto-secundario:#555555;
  --texto-terciario: #888888;
  --borde:          #E5E3DE;
  --borde-oscuro:   #C8C5BE;
  --verde:          #2E7D32;
  --amarillo:       #F9A825;
  --naranja:        #E65100;

  /* Alias sombras */
  --sombra-xs:  0 1px 2px rgba(0,0,0,0.06);
  --sombra-sm:  var(--shadow-card);
  --sombra-md:  0 4px 16px rgba(0,0,0,0.10);
  --sombra-lg:  var(--shadow-modal);
  --sombra-xl:  0 16px 48px rgba(0,0,0,0.15);

  /* Alias radios */
  --radio-sm:   var(--radius-sm);
  --radio-md:   var(--radius-md);
  --radio-lg:   var(--radius-lg);
  --radio-xl:   var(--radius-xl);
  --radio-full: var(--radius-full);

  /* Tipografía */
  --fuente-principal: 'Inter', system-ui, -apple-system, sans-serif;
  --fuente-tam-xs:    0.75rem;
  --fuente-tam-sm:    0.875rem;
  --fuente-tam-base:  1rem;
  --fuente-tam-lg:    1.125rem;
  --fuente-tam-xl:    1.25rem;
  --fuente-tam-2xl:   1.5rem;
  --fuente-tam-3xl:   1.875rem;
  --fuente-tam-4xl:   2.25rem;
  --fuente-tam-5xl:   3rem;

  /* Espacio */
  --espacio-xs:  0.25rem;
  --espacio-sm:  0.5rem;
  --espacio-md:  1rem;
  --espacio-lg:  1.5rem;
  --espacio-xl:  2rem;
  --espacio-2xl: 3rem;
  --espacio-3xl: 4rem;

  /* Transiciones (más rápidas = más profesionales) */
  --trans-rapida: 150ms ease;
  --trans-normal: 200ms ease;
  --trans-lenta:  350ms ease;

  /* Layout */
  --banner-alto:  36px;
  --header-alto:  72px;
  --total-top:    108px;

  /* Z-index — overlay SIEMPRE por debajo del panel/modal que lo acompaña */
  --z-base:           1;
  --z-elevado:        10;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-sidebar:        300;
  --z-panel-overlay:  390;   /* backdrop de paneles laterales */
  --z-panel:          400;   /* paneles laterales (carrito, favoritos) */
  --z-overlay:        450;   /* backdrop de modales */
  --z-modal:          500;   /* modales centrados */
  --z-toast:          600;
}

/* Tema oscuro */
[data-tema="oscuro"] {
  --bg-primary:    #1E1E1E;
  --bg-secondary:  #2A2A2A;
  --bg-card:       #2A2A2A;
  --bg-alt:        #333333;
  --bg-dark:       #111111;
  --text-primary:  #F0EFEB;
  --text-secondary:#BBBBBB;
  --text-muted:    #888888;
  --border:        #3A3A3A;
  --border-strong: #4A4A4A;
  --shadow-card:   0 2px 8px rgba(0,0,0,0.35);
  --shadow-modal:  0 8px 32px rgba(0,0,0,0.55);
  --accent-light:  #FFF0F2;
  --accent:        #E8314A;

  /* Alias */
  --fondo:               #1E1E1E;
  --fondo-alt:           #2A2A2A;
  --fondo-card:          #2A2A2A;
  --texto:               #F0EFEB;
  --texto-secundario:    #BBBBBB;
  --texto-terciario:     #888888;
  --borde:               #3A3A3A;
  --borde-oscuro:        #4A4A4A;
  --gris-100:            #3A3A3A;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fuente-principal);
  font-size: var(--fuente-tam-base);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--fuente-principal); }
input, select, textarea { font-family: var(--fuente-principal); font-size: var(--fuente-tam-base); }

/* ─── CONTENEDOR ─────────────────────────────────────────────────── */
.contenedor {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--espacio-md);
}
.contenedor-angosto { max-width: 800px; }

/* ─── BANNER SUPERIOR (rojo, texto blanco) ───────────────────────── */
.banner-superior {
  background-color: var(--accent);
  color: #FFFFFF;
  height: var(--banner-alto);
  overflow: hidden;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.banner-track {
  display: flex;
  gap: 3rem;
  animation: bannerScroll 32s linear infinite;
  white-space: nowrap;
  padding-left: 100%;
}
.banner-track span { flex-shrink: 0; }

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

/* ─── HEADER (fondo oscuro #1A1A1A) ─────────────────────────────── */
.header {
  position: fixed;
  top: var(--banner-alto);
  left: 0; right: 0;
  z-index: var(--z-sticky);
  background-color: var(--bg-dark);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  height: var(--header-alto);
  transition: box-shadow var(--trans-normal);
}

.header.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

.header-contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--espacio-md);
  gap: var(--espacio-md);
}

/* ─── LOGO ────────────────────────────────────────────────────────── */
.logo {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-icono {
  width: 38px; height: 38px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF;
  font-size: var(--fuente-tam-xl);
  flex-shrink: 0;
}

.logo-texto { display: flex; flex-direction: column; line-height: 1.1; }

.logo-nombre {
  font-size: var(--fuente-tam-lg);
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.3px;
}

.logo-sub {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

/* ─── NAVEGACIÓN ─────────────────────────────────────────────────── */
.nav-principal { flex: 1; display: none; }

.nav-lista {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-enlace {
  display: block;
  padding: var(--espacio-sm) var(--espacio-md);
  font-size: var(--fuente-tam-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  border-radius: var(--radius-sm);
  transition: color var(--trans-rapida), background-color var(--trans-rapida);
  white-space: nowrap;
}

.nav-enlace:hover,
.nav-enlace.activo {
  color: #FFFFFF;
  background-color: rgba(255,255,255,0.08);
}

.nav-rebajas { color: var(--accent) !important; }
.nav-rebajas:hover { background-color: rgba(200,16,46,0.15) !important; }

/* ─── CONTROLES HEADER ────────────────────────────────────────────── */
.header-controles {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.btn-ctrl {
  position: relative;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.75);
  border-radius: var(--radius-sm);
  font-size: var(--fuente-tam-lg);
  transition: color var(--trans-rapida), background-color var(--trans-rapida);
}

.btn-ctrl:hover {
  color: #FFFFFF;
  background-color: rgba(255,255,255,0.10);
}

.btn-carrito {
  background-color: var(--accent);
  color: #FFFFFF !important;
  border-radius: var(--radius-sm);
}
.btn-carrito:hover { background-color: var(--accent-hover) !important; }

/* Badge contador */
.contador-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 17px; height: 17px;
  padding: 0 3px;
  background-color: #FFFFFF;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  border: 1.5px solid var(--bg-dark);
}

.btn-ctrl:not(.btn-carrito) .contador-badge {
  background-color: var(--accent);
  color: #FFFFFF;
  border-color: var(--bg-dark);
}

/* Hamburguesa */
.btn-hamburguesa {
  display: flex; flex-direction: column;
  gap: 5px; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}
.btn-hamburguesa:hover { background-color: rgba(255,255,255,0.10); }

.btn-hamburguesa span {
  display: block;
  width: 22px; height: 2px;
  background-color: rgba(255,255,255,0.9);
  border-radius: var(--radius-full);
  transition: transform var(--trans-normal), opacity var(--trans-normal);
}

.btn-hamburguesa.abierto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.btn-hamburguesa.abierto span:nth-child(2) { opacity: 0; }
.btn-hamburguesa.abierto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── MENÚ MÓVIL ──────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .nav-principal {
    display: block;
    position: fixed;
    top: var(--total-top); left: 0; right: 0; bottom: 0;
    background-color: var(--bg-dark);
    z-index: var(--z-sidebar);
    transform: translateX(-100%);
    transition: transform var(--trans-normal);
    overflow-y: auto;
    padding: var(--espacio-lg);
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .nav-principal.abierto { transform: translateX(0); }

  .nav-lista { flex-direction: column; align-items: stretch; gap: 0; }

  .nav-enlace {
    padding: var(--espacio-md);
    font-size: var(--fuente-tam-lg);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    border-radius: 0;
    color: rgba(255,255,255,0.8);
  }
}

@media (min-width: 1024px) {
  .nav-principal { display: block; }
  .btn-hamburguesa { display: none; }
}

/* ─── OVERLAY BÚSQUEDA ────────────────────────────────────────────── */
.overlay-busqueda {
  position: fixed; inset: 0;
  background-color: rgba(0,0,0,0.82);
  /* SIN backdrop-filter — evita pixelado */
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  padding-top: calc(var(--total-top) + var(--espacio-xl));
  justify-content: center;
}
.overlay-busqueda[hidden] { display: none; }

.busqueda-contenedor {
  width: 100%; max-width: 680px;
  padding: 0 var(--espacio-md);
}

.busqueda-input-wrap {
  display: flex; align-items: center;
  background-color: #FFFFFF;
  border: 2px solid var(--accent);
  border-radius: var(--radius-full);
  padding: 10px var(--espacio-lg);
  gap: var(--espacio-md);
}

.busqueda-input-wrap > i { color: var(--accent); font-size: var(--fuente-tam-xl); flex-shrink: 0; }

.busqueda-input {
  flex: 1; border: none; outline: none;
  background: transparent;
  font-size: var(--fuente-tam-xl);
  color: var(--text-primary);
  min-width: 0;
}
.busqueda-input::placeholder { color: var(--text-muted); font-size: var(--fuente-tam-base); }

.btn-voz, .btn-cerrar-busqueda {
  color: var(--text-muted);
  font-size: var(--fuente-tam-xl);
  padding: var(--espacio-xs);
  border-radius: var(--radius-sm);
  transition: color var(--trans-rapida);
  flex-shrink: 0;
}
.btn-voz:hover, .btn-cerrar-busqueda:hover { color: var(--accent); }

.btn-voz.escuchando { color: var(--accent); animation: pulsoVoz 1s ease infinite; }
@keyframes pulsoVoz { 0%,100%{opacity:1} 50%{opacity:0.4} }

.busqueda-sugerencias {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  margin-top: var(--espacio-sm);
  overflow: hidden;
  box-shadow: var(--shadow-modal);
}

.sugerencia-item {
  display: flex; align-items: center; gap: var(--espacio-md);
  padding: var(--espacio-md) var(--espacio-lg);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background-color var(--trans-rapida);
}
.sugerencia-item:last-child { border-bottom: none; }
.sugerencia-item:hover { background-color: var(--bg-primary); }

.sugerencia-img {
  width: 48px; height: 48px;
  object-fit: cover; border-radius: var(--radius-sm);
  flex-shrink: 0; background: var(--bg-alt);
}
.sugerencia-info p { font-weight: 600; color: var(--text-primary); }
.sugerencia-info small { color: var(--text-muted); }

.busqueda-resultados { margin-top: var(--espacio-md); }

/* ─── TÍTULOS DE SECCIÓN ─────────────────────────────────────────── */
.seccion-titulo {
  font-size: var(--fuente-tam-2xl);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--espacio-xl);
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.seccion-titulo.centrado { text-align: center; }

.seccion-cabecera {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espacio-xl);
  flex-wrap: wrap; gap: var(--espacio-sm);
}

.ver-todos {
  font-size: var(--fuente-tam-sm);
  font-weight: 700;
  color: var(--accent);
  display: flex; align-items: center;
  gap: var(--espacio-xs);
  transition: gap var(--trans-rapida);
}
.ver-todos:hover { gap: var(--espacio-sm); }

/* Scroll offset para header fijo */
section[id] { scroll-margin-top: var(--total-top); }

/* ─── HERO SLIDER ────────────────────────────────────────────────── */
.hero {
  position: relative;
  margin-top: var(--total-top);
  min-height: 85vh;
  overflow: hidden;
}

.slider-contenedor {
  display: flex;
  width: 300%;
  height: 100%;
  min-height: 85vh;
  transition: transform 0.65s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.slide {
  position: relative;
  width: calc(100% / 3);
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Fondos con imágenes Unsplash reales */
.slide-fondo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}

.slide-fondo-1 {
  background-image: url('https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=1400&q=80');
}
.slide-fondo-2 {
  background-image: url('https://images.unsplash.com/photo-1556906781-9a412961a28c?w=1400&q=80');
}
.slide-fondo-3 {
  background-image: url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=1400&q=80');
}

/* Overlay oscuro direccional sobre la imagen */
.slide-fondo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.68) 38%, rgba(0,0,0,0.08) 100%);
}

.slide-contenido {
  position: relative;
  z-index: 2;
  max-width: 580px;
  padding: var(--espacio-xl) var(--espacio-2xl);
  color: #FFFFFF;
}

.slide-etiqueta {
  display: inline-block;
  background-color: var(--accent);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: var(--espacio-md);
}

.slide-titulo {
  font-size: clamp(2rem, 5.5vw, var(--fuente-tam-5xl));
  font-weight: 900;
  line-height: 1.07;
  margin-bottom: var(--espacio-md);
  color: #FFFFFF;
  letter-spacing: -1px;
}
.slide-titulo em { font-style: normal; color: #FF6B6B; }

.slide-desc {
  font-size: var(--fuente-tam-base);
  color: rgba(255,255,255,0.82);
  margin-bottom: var(--espacio-xl);
  max-width: 420px;
  line-height: 1.7;
}

.btn-slide {
  display: inline-flex; align-items: center; gap: var(--espacio-sm);
  background-color: var(--accent);
  color: #FFFFFF;
  font-size: var(--fuente-tam-sm);
  font-weight: 700;
  padding: 13px var(--espacio-xl);
  border-radius: var(--radius-sm);
  transition: all var(--trans-normal);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.btn-slide:hover {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200,16,46,0.4);
}

.btn-slide-rojo { background-color: #FFFFFF; color: var(--accent); }
.btn-slide-rojo:hover {
  background-color: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(200,16,46,0.4);
}

/* Botones prev/next */
.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 46px; height: 46px;
  background-color: rgba(255,255,255,0.18);
  color: #FFFFFF;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fuente-tam-base);
  transition: background-color var(--trans-normal);
  border: 1px solid rgba(255,255,255,0.2);
}
.slider-btn:hover { background-color: rgba(255,255,255,0.30); }
.slider-prev { left: var(--espacio-lg); }
.slider-next { right: var(--espacio-lg); }

/* Puntos de navegación */
.slider-puntos {
  position: absolute; bottom: var(--espacio-xl);
  left: 50%; transform: translateX(-50%);
  display: flex; gap: var(--espacio-sm); z-index: 10;
}

.slider-punto {
  width: 7px; height: 7px;
  border-radius: var(--radius-full);
  background-color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all var(--trans-normal);
  border: none;
}
.slider-punto.activo { background-color: #FFFFFF; width: 22px; }

/* ─── CATEGORÍAS RÁPIDAS ─────────────────────────────────────────── */
.categorias {
  padding: var(--espacio-3xl) 0;
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--border);
}

.categorias-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--espacio-md);
}

.categoria-card {
  display: flex; flex-direction: column;
  align-items: center; gap: var(--espacio-md);
  padding: var(--espacio-xl) var(--espacio-md);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  border-bottom: 3px solid transparent;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
  font-size: var(--fuente-tam-sm);
  text-align: center;
  transition: all var(--trans-normal);
  box-shadow: var(--shadow-card);
}

.categoria-card:hover {
  border-color: var(--accent);
  border-bottom-color: var(--accent);
  box-shadow: 0 4px 16px rgba(200,16,46,0.12);
  transform: translateY(-3px);
  color: var(--accent);
}

.categoria-icono {
  width: 68px; height: 68px;
  border-radius: var(--radius-full);
  background: #FFF0F2;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 26px;
  transition: transform var(--trans-normal), background-color var(--trans-normal);
}

.categoria-card:hover .categoria-icono {
  background-color: var(--accent);
  color: #FFFFFF;
  transform: scale(1.08) rotate(-5deg);
}

/* Modo oscuro */
[data-tema="oscuro"] .categoria-card {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-tema="oscuro"] .categoria-card:hover {
  border-color: var(--accent);
}
[data-tema="oscuro"] .categoria-icono {
  background: #3D1520;
  color: var(--accent);
}
[data-tema="oscuro"] .categoria-card p,
[data-tema="oscuro"] .categoria-card span {
  color: #CCCCCC;
}

/* ─── PRODUCTOS DESTACADOS ───────────────────────────────────────── */
.productos-destacados { padding: var(--espacio-3xl) 0; }

/* ─── REBAJAS + COUNTDOWN ────────────────────────────────────────── */
.rebajas {
  padding: var(--espacio-3xl) 0;
  background: #1A1A1A;
  color: #FFFFFF;
}

.rebajas-cabecera {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espacio-2xl);
  flex-wrap: wrap; gap: var(--espacio-lg);
}

.rebajas-etiqueta {
  display: inline-flex; align-items: center; gap: var(--espacio-xs);
  background-color: var(--accent);
  color: #FFFFFF;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 4px 12px; border-radius: var(--radius-full);
  margin-bottom: var(--espacio-sm);
}

.rebajas-titulo {
  font-size: clamp(1.5rem, 4vw, var(--fuente-tam-3xl));
  font-weight: 900; color: #FFFFFF; line-height: 1.15;
  letter-spacing: -0.5px;
}

/* Cuenta regresiva */
.countdown { display: flex; align-items: center; gap: var(--espacio-sm); }

.countdown-item {
  display: flex; flex-direction: column; align-items: center;
  background-color: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  min-width: 70px;
}

.countdown-num {
  font-size: var(--fuente-tam-3xl);
  font-weight: 900; color: #FFFFFF;
  line-height: 1; font-variant-numeric: tabular-nums;
}

.countdown-label {
  font-size: 10px; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 1px;
  margin-top: var(--espacio-xs);
}

.countdown-sep {
  font-size: var(--fuente-tam-3xl);
  font-weight: 900; color: var(--accent); line-height: 1;
}

/* Cards en sección rebajas */
.rebajas .producto-card {
  background-color: #222222;
  border-color: #333333;
}
.rebajas .producto-nombre { color: #F2F2F2; }
.rebajas .precio-actual { color: #F2F2F2; }
.rebajas .producto-categoria { color: var(--accent); }

/* ─── GRID DE PRODUCTOS ──────────────────────────────────────────── */
.productos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-md);
}

/* ─── TARJETA DE PRODUCTO (limpia, blanca) ───────────────────────── */
.producto-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
}

.producto-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  border-color: var(--accent);
}

/* Imagen — fondo neutro crema (no colores aleatorios) */
.producto-imagen-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background-color: #F0EEE9;
  cursor: pointer;
}

.producto-imagen {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.producto-card:hover .producto-imagen { transform: scale(1.05); }

/* Badges */
.producto-badges {
  position: absolute; top: var(--espacio-sm); left: var(--espacio-sm);
  display: flex; flex-direction: column; gap: var(--espacio-xs);
  z-index: 2;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.badge-nuevo   { background: #111111; color: #FFFFFF; }
.badge-rebaja  { background: var(--accent); color: #FFFFFF; }
.badge-stock   { background: #F9A825; color: #111111; }

/* Botones acción sobre imagen */
.producto-acciones {
  position: absolute; top: var(--espacio-sm); right: var(--espacio-sm);
  display: flex; flex-direction: column; gap: var(--espacio-xs);
  z-index: 2;
  opacity: 0; transform: translateX(6px);
  transition: opacity var(--trans-normal), transform var(--trans-normal);
}
.producto-card:hover .producto-acciones,
.producto-card:focus-within .producto-acciones {
  opacity: 1; transform: translateX(0);
}

.btn-accion {
  width: 34px; height: 34px;
  border-radius: var(--radius-full);
  background: #FFFFFF;
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: all var(--trans-rapida);
  border: none;
}
.btn-accion:hover {
  background: var(--accent); color: #FFFFFF;
  transform: scale(1.1);
}
.btn-accion.favorito-activo { background: var(--accent); color: #FFFFFF; }
.btn-accion.comparar-activo { background: #111111; color: #FFFFFF; }

/* Cuerpo tarjeta */
.producto-cuerpo {
  padding: 12px 14px 14px;
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  background: #FFFFFF;
}

.producto-categoria {
  font-size: 11px; font-weight: 700;
  color: var(--accent);
  text-transform: uppercase; letter-spacing: 1px;
}

.producto-nombre {
  font-size: var(--fuente-tam-base);
  font-weight: 700; color: var(--text-primary);
  cursor: pointer; transition: color var(--trans-rapida);
  line-height: 1.3;
}
.producto-nombre:hover { color: var(--accent); }

.producto-colores { display: flex; gap: 4px; flex-wrap: wrap; }

.color-dot {
  width: 14px; height: 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: transform var(--trans-rapida);
  flex-shrink: 0;
}
.color-dot:hover { transform: scale(1.3); }

.producto-tallas { display: flex; gap: 4px; flex-wrap: wrap; }
.talla-chip {
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
}

.producto-stock { font-size: 11px; color: #E65100; font-weight: 600; }

.producto-precios {
  display: flex; align-items: center;
  gap: var(--espacio-sm); flex-wrap: wrap;
  margin-top: auto;
}
.precio-actual { font-size: var(--fuente-tam-xl); font-weight: 900; color: var(--text-primary); }
.precio-antes { font-size: var(--fuente-tam-sm); color: var(--text-muted); text-decoration: line-through; }
.precio-descuento {
  font-size: 11px; font-weight: 700;
  color: #FFFFFF; background: var(--accent);
  padding: 2px 6px; border-radius: var(--radius-full);
}

.btn-agregar {
  width: 100%;
  padding: 10px var(--espacio-md);
  background-color: #111111;
  color: #FFFFFF;
  font-size: var(--fuente-tam-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center;
  justify-content: center; gap: var(--espacio-xs);
  transition: background-color var(--trans-normal);
  margin-top: var(--espacio-sm);
}
.btn-agregar:hover { background-color: var(--accent); }

/* ─── TIENDA (layout con sidebar) ────────────────────────────────── */
.tienda {
  padding: var(--espacio-3xl) 0;
  background-color: var(--bg-primary);
}

.tienda-layout {
  display: flex; gap: var(--espacio-xl);
  align-items: flex-start;
}

/* ─── SIDEBAR FILTROS ─────────────────────────────────────────────── */
.filtros-sidebar {
  width: 255px; flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--espacio-lg);
  position: sticky;
  top: calc(var(--total-top) + var(--espacio-md));
  max-height: calc(100vh - var(--total-top) - var(--espacio-xl));
  overflow-y: auto;
  box-shadow: var(--shadow-card);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.filtros-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espacio-md);
  padding-bottom: var(--espacio-md);
  border-bottom: 2px solid var(--accent);
}

.filtros-titulo {
  font-size: var(--fuente-tam-base); font-weight: 700;
  color: var(--text-primary);
  display: flex; align-items: center; gap: var(--espacio-xs);
}

.btn-limpiar {
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 4px;
  padding: 4px var(--espacio-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition: all var(--trans-rapida);
}
.btn-limpiar:hover { color: var(--accent); border-color: var(--accent); }

/* Tags filtros activos */
.filtros-activos { display: flex; flex-wrap: wrap; gap: var(--espacio-xs); margin-bottom: var(--espacio-md); }

.filtro-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 11px; font-weight: 700;
  padding: 3px var(--espacio-sm);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--trans-rapida);
}
.filtro-tag:hover { background: var(--accent-hover); }
.filtro-tag button { color: #FFFFFF; font-size: 10px; padding: 0; display: flex; align-items: center; }

/* Grupos de filtros */
.filtro-grupo {
  margin-bottom: var(--espacio-lg);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--espacio-md);
}
.filtro-grupo:last-child { border-bottom: none; }

.filtro-titulo {
  font-size: 11px; font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: var(--espacio-sm);
}

.filtro-opciones { display: flex; flex-direction: column; gap: 6px; }

.filtro-check {
  display: flex; align-items: center; gap: var(--espacio-sm);
  font-size: var(--fuente-tam-sm); color: var(--text-secondary);
  cursor: pointer; padding: 3px 0;
  transition: color var(--trans-rapida);
}
.filtro-check:hover { color: var(--text-primary); }
.filtro-check input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }

/* Paleta colores */
.filtro-colores { display: flex; flex-wrap: wrap; gap: var(--espacio-sm); padding-top: var(--espacio-xs); }

.color-circulo {
  width: 26px; height: 26px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--trans-rapida), box-shadow var(--trans-rapida);
}
.color-circulo:hover { transform: scale(1.2); }
.color-circulo.seleccionado {
  box-shadow: 0 0 0 3px var(--accent);
  transform: scale(1.08);
}

/* Tallas */
.filtro-tallas { display: flex; flex-wrap: wrap; gap: 4px; }

.talla-btn {
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--trans-rapida);
}
.talla-btn:hover { border-color: var(--accent); color: var(--accent); }
.talla-btn.seleccionada { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }

/* Slider precio doble */
.precio-rango { padding-top: var(--espacio-sm); }
.precio-labels {
  display: flex; justify-content: space-between;
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: var(--espacio-sm);
}

.slider-doble {
  position: relative; height: 40px;
  display: flex; align-items: center;
}

.slider-precio {
  position: absolute; width: 100%; height: 4px;
  background: transparent;
  -webkit-appearance: none; appearance: none;
  pointer-events: none; outline: none;
}
.slider-precio::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  border-radius: var(--radius-full);
  background: var(--accent);
  cursor: pointer; pointer-events: all;
  box-shadow: 0 2px 6px rgba(200,16,46,0.3);
  border: 2px solid #FFFFFF;
  transition: transform var(--trans-rapida);
}
.slider-precio::-webkit-slider-thumb:hover { transform: scale(1.2); }
.slider-precio::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: var(--radius-full);
  background: var(--accent);
  cursor: pointer; pointer-events: all;
  border: 2px solid #FFFFFF;
}

/* Botón cerrar filtros (solo móvil) */
.btn-cerrar-filtros {
  display: none; width: 100%;
  padding: var(--espacio-md);
  background: #111111; color: #FFFFFF;
  font-weight: 700; border-radius: var(--radius-sm);
  align-items: center; justify-content: center;
  gap: var(--espacio-xs); margin-top: var(--espacio-md);
}

/* ─── ÁREA PRODUCTOS ──────────────────────────────────────────────── */
.productos-area { flex: 1; min-width: 0; }

.productos-toolbar {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--espacio-md);
  margin-bottom: var(--espacio-lg);
  flex-wrap: wrap;
}

.btn-filtros-movil {
  display: none;
  align-items: center; gap: var(--espacio-xs);
  padding: var(--espacio-sm) var(--espacio-md);
  background: #111111; color: #FFFFFF;
  border-radius: var(--radius-sm);
  font-size: var(--fuente-tam-sm); font-weight: 700;
}

.productos-count { font-size: var(--fuente-tam-sm); color: var(--text-muted); flex: 1; }

.select-orden {
  padding: var(--espacio-sm) var(--espacio-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #FFFFFF; color: var(--text-primary);
  font-size: var(--fuente-tam-sm); font-weight: 600;
  cursor: pointer; outline: none;
  transition: border-color var(--trans-rapida);
}
.select-orden:focus { border-color: var(--accent); }

/* Barra comparador */
.comparador-bar {
  display: flex; align-items: center; gap: var(--espacio-md);
  background: #111111; color: #FFFFFF;
  padding: var(--espacio-md) var(--espacio-lg);
  border-radius: var(--radius-sm); margin-bottom: var(--espacio-md);
  flex-wrap: wrap;
}
.comparador-bar[hidden] { display: none; }

.btn-comparar {
  display: flex; align-items: center; gap: var(--espacio-xs);
  padding: var(--espacio-sm) var(--espacio-md);
  background: var(--accent); color: #FFFFFF;
  border-radius: var(--radius-sm);
  font-size: var(--fuente-tam-sm); font-weight: 700;
  transition: background-color var(--trans-rapida);
}
.btn-comparar:hover { background: var(--accent-hover); }

.btn-limpiar-comparar {
  color: rgba(255,255,255,0.5);
  font-size: var(--fuente-tam-lg);
  transition: color var(--trans-rapida);
  margin-left: auto;
}
.btn-limpiar-comparar:hover { color: #FFFFFF; }

/* Estado vacío */
.estado-vacio { text-align: center; padding: var(--espacio-3xl) 0; color: var(--text-muted); }
.estado-vacio[hidden] { display: none; }
.estado-vacio i { font-size: 3rem; margin-bottom: var(--espacio-md); opacity: 0.3; }
.estado-vacio p { font-size: var(--fuente-tam-lg); margin-bottom: var(--espacio-lg); }

/* Recientes */
.recientes-seccion { margin-top: var(--espacio-3xl); padding-top: var(--espacio-2xl); border-top: 1px solid var(--border); }
.recientes-seccion[hidden] { display: none; }
.productos-grid-sm { grid-template-columns: repeat(4, 1fr); }

/* ─── BOTONES PRIMARIOS / SECUNDARIOS ────────────────────────────── */
.btn-primario {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--espacio-sm);
  padding: 12px var(--espacio-xl);
  background: var(--accent); color: #FFFFFF;
  font-size: var(--fuente-tam-base); font-weight: 700;
  border-radius: var(--radius-sm);
  transition: all var(--trans-normal);
  border: none; cursor: pointer;
  letter-spacing: 0.2px;
}
.btn-primario:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(200,16,46,0.3);
}

.btn-secundario {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--espacio-sm);
  padding: 12px var(--espacio-xl);
  background: transparent; color: var(--text-primary);
  font-size: var(--fuente-tam-base); font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  transition: all var(--trans-normal); cursor: pointer;
}
.btn-secundario:hover { border-color: var(--accent); color: var(--accent); }

/* ─── NOSOTROS / DIFERENCIADORES ─────────────────────────────────── */
.nosotros { padding: var(--espacio-3xl) 0; }

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

.diferenciador-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--espacio-xl); text-align: center;
  transition: all var(--trans-normal);
  box-shadow: var(--shadow-card);
}
.diferenciador-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--accent); }

.dif-icono {
  width: 60px; height: 60px;
  border-radius: var(--radius-full);
  background: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: var(--fuente-tam-2xl);
  margin: 0 auto var(--espacio-md);
}
.diferenciador-card h3 { font-size: var(--fuente-tam-lg); font-weight: 800; margin-bottom: var(--espacio-sm); color: var(--text-primary); }
.diferenciador-card p  { color: var(--text-secondary); font-size: var(--fuente-tam-sm); line-height: 1.7; }

/* ─── ASESOR DE TALLA ────────────────────────────────────────────── */
.asesor-talla {
  background: #1A1A1A;
  border-radius: var(--radius-xl);
  padding: var(--espacio-2xl);
  margin-bottom: var(--espacio-3xl);
  color: #FFFFFF;
}

.asesor-contenido h3 {
  font-size: var(--fuente-tam-2xl); font-weight: 900;
  margin-bottom: var(--espacio-sm);
  color: #FFFFFF;
  display: flex; align-items: center; gap: var(--espacio-sm);
}
.asesor-contenido > p { color: rgba(255,255,255,0.65); margin-bottom: var(--espacio-xl); }

.asesor-form .form-fila {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--espacio-md); margin-bottom: var(--espacio-lg);
}

.form-campo { display: flex; flex-direction: column; gap: var(--espacio-xs); }
.form-campo label { font-size: var(--fuente-tam-sm); font-weight: 600; color: rgba(255,255,255,0.75); }

.form-campo input,
.form-campo select {
  padding: var(--espacio-sm) var(--espacio-md);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.08);
  color: #FFFFFF;
  font-size: var(--fuente-tam-base);
  transition: border-color var(--trans-rapida);
}
.form-campo input:focus, .form-campo select:focus { outline: none; border-color: var(--accent); }
.form-campo input::placeholder { color: rgba(255,255,255,0.35); }
.form-campo select option { background: #222; color: #FFFFFF; }

.asesor-resultado {
  margin-top: var(--espacio-lg);
  padding: var(--espacio-lg);
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--accent);
}
.asesor-resultado[hidden] { display: none; }
.asesor-resultado h4 { font-size: var(--fuente-tam-xl); font-weight: 800; color: #FFFFFF; margin-bottom: var(--espacio-sm); }
.asesor-resultado p  { color: rgba(255,255,255,0.75); font-size: var(--fuente-tam-sm); }

/* ─── OUTFIT BUILDER ─────────────────────────────────────────────── */
.outfit-builder {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--espacio-2xl);
  margin-bottom: var(--espacio-3xl);
}
.outfit-builder h3 { font-size: var(--fuente-tam-2xl); font-weight: 900; margin-bottom: var(--espacio-sm); display: flex; align-items: center; gap: var(--espacio-sm); color: var(--text-primary); }
.outfit-builder > p { color: var(--text-secondary); margin-bottom: var(--espacio-xl); }

.outfit-controles { display: flex; gap: var(--espacio-md); flex-wrap: wrap; align-items: flex-end; }

.outfit-categoria { display: flex; flex-direction: column; gap: var(--espacio-xs); flex: 1; min-width: 150px; }
.outfit-categoria label { font-size: var(--fuente-tam-sm); font-weight: 600; color: var(--text-secondary); }
.outfit-categoria select {
  padding: var(--espacio-sm) var(--espacio-md);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-primary); color: var(--text-primary);
  font-size: var(--fuente-tam-base);
}
.outfit-categoria select:focus { outline: none; border-color: var(--accent); }

.outfit-resultado {
  margin-top: var(--espacio-lg); padding: var(--espacio-lg);
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(200,16,46,0.15);
}
.outfit-resultado[hidden] { display: none; }

/* ─── REVIEWS ─────────────────────────────────────────────────────── */
.reviews-seccion { margin-bottom: var(--espacio-3xl); }

.reviews-carrusel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espacio-lg);
}

.review-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--espacio-lg);
  box-shadow: var(--shadow-card);
}
.review-estrellas { color: var(--amarillo); font-size: var(--fuente-tam-lg); margin-bottom: var(--espacio-sm); }
.review-texto { color: var(--text-secondary); font-size: var(--fuente-tam-sm); line-height: 1.7; margin-bottom: var(--espacio-md); font-style: italic; }

.review-autor { display: flex; align-items: center; gap: var(--espacio-sm); }
.review-avatar {
  width: 38px; height: 38px;
  border-radius: var(--radius-full);
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-weight: 800; font-size: var(--fuente-tam-base);
  flex-shrink: 0;
}
.review-info strong { display: block; font-size: var(--fuente-tam-sm); font-weight: 700; color: var(--text-primary); }
.review-info small  { color: var(--text-muted); font-size: 11px; }

/* ─── COBERTURA ───────────────────────────────────────────────────── */
.cobertura-seccion { text-align: center; }
.cobertura-ciudades {
  display: flex; flex-wrap: wrap; gap: var(--espacio-sm);
  justify-content: center; margin-top: var(--espacio-lg);
}
.ciudad-tag {
  padding: 5px var(--espacio-md);
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--fuente-tam-sm); font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--trans-rapida);
}
.ciudad-tag:hover { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }

/* ─── PÁGINAS LEGALES ────────────────────────────────────────────── */
.pagina-legal { padding: var(--espacio-3xl) 0; margin-top: var(--total-top); }
.pagina-legal[hidden] { display: none; }

.pagina-legal h1 { font-size: var(--fuente-tam-4xl); font-weight: 900; color: var(--text-primary); margin-bottom: var(--espacio-sm); letter-spacing: -0.5px; }
.pagina-legal h2 { font-size: var(--fuente-tam-xl); font-weight: 700; color: var(--text-primary); margin: var(--espacio-xl) 0 var(--espacio-sm); padding-left: var(--espacio-sm); border-left: 4px solid var(--accent); }
.pagina-legal p, .pagina-legal li { color: var(--text-secondary); line-height: 1.8; margin-bottom: var(--espacio-sm); }
.pagina-legal ul, .pagina-legal ol { padding-left: var(--espacio-xl); margin-bottom: var(--espacio-md); }
.pagina-legal ul li { list-style: disc; }
.pagina-legal ol li { list-style: decimal; }
.legal-actualizado { font-size: var(--fuente-tam-sm); color: var(--text-muted); margin-bottom: var(--espacio-2xl); }

.faq-lista { display: flex; flex-direction: column; gap: var(--espacio-sm); }

.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; transition: border-color var(--trans-rapida); }
.faq-item[open] { border-color: var(--accent); }
.faq-item summary { padding: var(--espacio-md) var(--espacio-lg); font-weight: 700; color: var(--text-primary); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: var(--fuente-tam-xl); color: var(--accent); transition: transform var(--trans-normal); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--accent); }
.faq-item p { padding: 0 var(--espacio-lg) var(--espacio-md); color: var(--text-secondary); line-height: 1.7; }

/* ─── FOOTER ─────────────────────────────────────────────────────── */
.footer { background: #111111; color: rgba(255,255,255,0.6); padding: var(--espacio-3xl) 0 0; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--espacio-2xl);
  margin-bottom: var(--espacio-2xl);
}

.footer-col h4 { font-size: var(--fuente-tam-sm); font-weight: 800; color: #FFFFFF; margin-bottom: var(--espacio-lg); text-transform: uppercase; letter-spacing: 1.5px; }

.footer-marca .logo-nombre { color: #FFFFFF; }
.footer-marca .logo-sub { color: rgba(255,255,255,0.35); }
.footer-marca p { margin-top: var(--espacio-md); font-size: var(--fuente-tam-sm); line-height: 1.7; color: rgba(255,255,255,0.5); }

.footer-links { display: flex; flex-direction: column; gap: var(--espacio-sm); }
.footer-links a { font-size: var(--fuente-tam-sm); color: rgba(255,255,255,0.5); transition: color var(--trans-rapida); }
.footer-links a:hover { color: #FFFFFF; }

.footer-contacto p { display: flex; align-items: flex-start; gap: var(--espacio-sm); font-size: var(--fuente-tam-sm); color: rgba(255,255,255,0.5); margin-bottom: var(--espacio-sm); }
.footer-contacto i { color: var(--accent); flex-shrink: 0; margin-top: 3px; }

.redes-sociales { display: flex; gap: var(--espacio-sm); margin-top: var(--espacio-lg); }
.red-social {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  transition: all var(--trans-normal);
}
.red-social:hover { background: var(--accent); color: #FFFFFF; transform: translateY(-2px); }

.metodos-pago { display: flex; flex-wrap: wrap; gap: var(--espacio-xs); margin-top: var(--espacio-md); }
.pago-badge {
  padding: 3px 9px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.04);
}

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: var(--espacio-lg) 0; text-align: center; }
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.35); line-height: 1.7; }
.footer-legal { margin-top: 4px; font-style: italic; }

/* ─── PANEL CARRITO (sin blur, fondo blanco) ─────────────────────── */

/* Overlay sin blur — evita el pixelado en todos los navegadores */
.carrito-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  /* SIN backdrop-filter ni filter: blur */
  z-index: var(--z-panel-overlay);   /* DEBAJO del panel para que los clics no atraviesen */
}
.carrito-overlay[hidden],
.carrito-panel[hidden] { display: none; }

.carrito-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  background: #FFFFFF;
  z-index: var(--z-panel);
  display: flex; flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  overflow: hidden;
  animation: slideDesdeRight var(--trans-normal) ease;
}

@keyframes slideDesdeRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.carrito-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: var(--espacio-lg) var(--espacio-xl);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: #FFFFFF;
}
.carrito-header h2 {
  font-size: var(--fuente-tam-xl); font-weight: 800;
  color: var(--text-primary);
  display: flex; align-items: center; gap: var(--espacio-sm);
}

.btn-cerrar-panel {
  width: 34px; height: 34px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fuente-tam-lg); color: var(--text-muted);
  transition: all var(--trans-rapida);
}
.btn-cerrar-panel:hover { background: var(--bg-primary); color: var(--accent); }

.carrito-cuerpo {
  flex: 1; overflow-y: auto;
  padding: var(--espacio-lg) var(--espacio-xl);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  background: #FFFFFF;
}

.carrito-vacio {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%;
  color: var(--text-muted); text-align: center; gap: var(--espacio-md);
}
.carrito-vacio i { font-size: 3.5rem; opacity: 0.25; }
.carrito-vacio p { font-size: var(--fuente-tam-lg); color: var(--text-secondary); }

/* Items del carrito */
.carrito-item {
  display: flex; gap: var(--espacio-md);
  padding: var(--espacio-md) 0;
  border-bottom: 1px solid var(--border);
}
.carrito-item:last-child { border-bottom: none; }

/* Imagen 72×72 con object-fit: cover */
.carrito-item-img {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: var(--bg-alt);
}

.carrito-item-info { flex: 1; min-width: 0; }
.carrito-item-nombre { font-size: var(--fuente-tam-sm); font-weight: 700; color: var(--text-primary); margin-bottom: 2px; line-height: 1.3; }
.carrito-item-detalle { font-size: 12px; color: var(--text-muted); margin-bottom: var(--espacio-sm); }

.carrito-item-controles { display: flex; align-items: center; justify-content: space-between; }

.cantidad-controles {
  display: flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}
.btn-cantidad {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fuente-tam-base); font-weight: 700;
  color: var(--text-primary);
  transition: background-color var(--trans-rapida);
}
.btn-cantidad:hover { background: var(--bg-primary); }

.cantidad-num { min-width: 26px; text-align: center; font-size: var(--fuente-tam-sm); font-weight: 700; color: var(--text-primary); }

.carrito-item-precio { font-size: var(--fuente-tam-base); font-weight: 800; color: var(--text-primary); }
.btn-quitar-item { color: var(--text-muted); font-size: var(--fuente-tam-sm); transition: color var(--trans-rapida); padding: var(--espacio-xs); }
.btn-quitar-item:hover { color: var(--accent); }

/* Footer carrito */
.carrito-footer {
  padding: var(--espacio-lg) var(--espacio-xl);
  border-top: 1px solid var(--border);
  background: var(--bg-primary); flex-shrink: 0;
}

.carrito-subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--espacio-md); font-size: var(--fuente-tam-base); font-weight: 600; color: var(--text-primary); }
.carrito-subtotal-precio { font-size: var(--fuente-tam-2xl); font-weight: 900; color: var(--text-primary); }

.carrito-acciones { display: flex; flex-direction: column; gap: var(--espacio-sm); }

.btn-vaciar {
  width: 100%; padding: var(--espacio-sm) var(--espacio-md);
  background: transparent; color: var(--text-secondary);
  font-size: var(--fuente-tam-sm); font-weight: 600;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: all var(--trans-rapida); text-align: center;
}
.btn-vaciar:hover { color: var(--accent); border-color: var(--accent); }

.btn-checkout {
  width: 100%; padding: 14px var(--espacio-xl);
  background: var(--accent); color: #FFFFFF;
  font-size: var(--fuente-tam-base); font-weight: 800;
  border-radius: var(--radius-sm);
  letter-spacing: 0.3px; text-transform: uppercase;
  transition: all var(--trans-normal); text-align: center;
}
.btn-checkout:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(200,16,46,0.35); }

/* ─── PANEL FAVORITOS ────────────────────────────────────────────── */
.favoritos-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: var(--z-panel-overlay);   /* DEBAJO del panel */
}
.favoritos-overlay[hidden],
.favoritos-panel[hidden] { display: none; }

.favoritos-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  background: #FFFFFF;
  z-index: var(--z-panel);
  display: flex; flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  overflow: hidden;
  animation: slideDesdeRight var(--trans-normal) ease;
}

.favoritos-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: var(--espacio-lg) var(--espacio-xl);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.favoritos-header h2 { font-size: var(--fuente-tam-xl); font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: var(--espacio-sm); }

.favoritos-cuerpo {
  flex: 1; overflow-y: auto;
  padding: var(--espacio-lg) var(--espacio-xl);
  scrollbar-width: thin;
}

/* Item favorito */
.favorito-item {
  display: flex; gap: var(--espacio-md);
  padding: var(--espacio-md) 0;
  border-bottom: 1px solid var(--border);
}
.favorito-item:last-child { border-bottom: none; }
.favorito-item-img {
  width: 72px; height: 72px;
  object-fit: cover; border-radius: var(--radius-sm);
  flex-shrink: 0; background: var(--bg-alt); cursor: pointer;
}
.favorito-item-info { flex: 1; min-width: 0; }
.favorito-item-nombre { font-size: var(--fuente-tam-sm); font-weight: 700; color: var(--text-primary); cursor: pointer; margin-bottom: 4px; }
.favorito-item-nombre:hover { color: var(--accent); }
.favorito-item-precio { font-size: var(--fuente-tam-base); font-weight: 900; color: var(--text-primary); margin-bottom: var(--espacio-sm); }
.favorito-item-acciones { display: flex; gap: var(--espacio-xs); }

/* ─── MODAL OVERLAY — sin blur ────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  /* SIN backdrop-filter */
  z-index: var(--z-overlay);
}
.modal-overlay[hidden] { display: none; }

.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  z-index: var(--z-modal);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
  animation: fadeEntrada var(--trans-normal) ease;
  width: calc(100% - 2rem);
}
@keyframes fadeEntrada {
  from { opacity: 0; transform: translate(-50%,-48%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
.modal[hidden] { display: none; }

.checkout-modal  { max-width: 640px; }
.comparador-modal{ max-width: 880px; }
.detalle-modal   { max-width: 800px; }

.modal-header {
  padding: var(--espacio-lg) var(--espacio-xl);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  justify-content: space-between;
  position: sticky; top: 0;
  background: #FFFFFF; z-index: 1; flex-shrink: 0;
}
.modal-header h2 { font-size: var(--fuente-tam-xl); font-weight: 800; display: flex; align-items: center; gap: var(--espacio-sm); color: var(--text-primary); }

.btn-cerrar-modal {
  width: 34px; height: 34px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fuente-tam-lg); color: var(--text-muted);
  transition: all var(--trans-rapida);
}
.btn-cerrar-modal:hover { background: var(--bg-primary); color: var(--accent); }

.modal-cuerpo { padding: var(--espacio-xl); }

/* Pasos checkout */
.checkout-pasos {
  display: flex; align-items: center;
  gap: var(--espacio-sm); flex: 1;
}
.paso { display: flex; align-items: center; gap: var(--espacio-xs); }
.paso-num {
  width: 26px; height: 26px;
  border-radius: var(--radius-full);
  background: var(--border);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  transition: all var(--trans-normal); flex-shrink: 0;
}
.paso.activo .paso-num { background: var(--accent); color: #FFFFFF; }
.paso.completado .paso-num { background: var(--verde); color: #FFFFFF; }
.paso-label { font-size: var(--fuente-tam-sm); font-weight: 600; color: var(--text-muted); }
.paso.activo .paso-label, .paso.completado .paso-label { color: var(--text-primary); }
.paso-linea { flex: 1; height: 2px; background: var(--border); min-width: 16px; transition: background-color var(--trans-normal); }
.paso-linea.completada { background: var(--verde); }

/* Formularios checkout */
.checkout-form { display: flex; flex-direction: column; gap: var(--espacio-md); }
.checkout-titulo { font-size: var(--fuente-tam-2xl); font-weight: 900; margin-bottom: var(--espacio-lg); color: var(--text-primary); letter-spacing: -0.3px; }

.input-grupo { display: flex; flex-direction: column; gap: var(--espacio-xs); }
.input-grupo label { font-size: var(--fuente-tam-sm); font-weight: 700; color: var(--text-primary); }
.input-grupo .requerido { color: var(--accent); }

.input-campo {
  padding: 11px var(--espacio-md);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #FFFFFF; color: var(--text-primary);
  font-size: var(--fuente-tam-base);
  transition: border-color var(--trans-rapida); width: 100%;
}
.input-campo:focus { outline: none; border-color: var(--accent); }
.input-campo.error { border-color: var(--accent); }

.input-error-msg { font-size: 12px; color: var(--accent); display: none; }
.input-campo.error ~ .input-error-msg { display: block; }

.input-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-md); }

/* Opciones de envío */
.envio-opciones { display: flex; flex-direction: column; gap: var(--espacio-sm); }
.envio-opcion {
  display: flex; align-items: center; gap: var(--espacio-md);
  padding: var(--espacio-md); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all var(--trans-rapida);
}
.envio-opcion:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.envio-opcion input[type="radio"] { accent-color: var(--accent); flex-shrink: 0; }
.envio-opcion-info { flex: 1; }
.envio-opcion-titulo { font-size: var(--fuente-tam-sm); font-weight: 700; color: var(--text-primary); }
.envio-opcion-desc   { font-size: 12px; color: var(--text-muted); }
.envio-opcion-precio { font-size: var(--fuente-tam-base); font-weight: 800; color: var(--text-primary); }

/* Resumen pedido */
.resumen-lista { background: var(--bg-primary); border-radius: var(--radius-sm); padding: var(--espacio-md); margin-bottom: var(--espacio-lg); border: 1px solid var(--border); }
.resumen-item { display: flex; justify-content: space-between; align-items: center; padding: var(--espacio-sm) 0; border-bottom: 1px solid var(--border); font-size: var(--fuente-tam-sm); color: var(--text-secondary); }
.resumen-item:last-child { border-bottom: none; font-weight: 800; font-size: var(--fuente-tam-base); color: var(--text-primary); }

.cupon-wrap { display: flex; gap: var(--espacio-sm); margin-bottom: var(--espacio-lg); }
.cupon-wrap input { flex: 1; padding: var(--espacio-sm) var(--espacio-md); border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: #FFFFFF; color: var(--text-primary); font-size: var(--fuente-tam-sm); }
.cupon-wrap input:focus { outline: none; border-color: var(--accent); }

/* Métodos pago */
.pago-metodos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espacio-sm); margin-bottom: var(--espacio-lg); }
.pago-metodo {
  display: flex; align-items: center; gap: var(--espacio-sm);
  padding: var(--espacio-md); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all var(--trans-rapida); font-size: var(--fuente-tam-sm); font-weight: 600; color: var(--text-primary);
}
.pago-metodo:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.pago-metodo input[type="radio"] { accent-color: var(--accent); flex-shrink: 0; }
.pago-metodo-deshabilitado { opacity: 0.4; cursor: not-allowed; }

/* Confirmación pedido */
.pedido-confirmado { text-align: center; padding: var(--espacio-2xl) 0; }
.pedido-icono {
  width: 72px; height: 72px; border-radius: var(--radius-full);
  background: var(--verde); display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-size: 1.75rem; margin: 0 auto var(--espacio-lg);
}
.pedido-numero {
  display: inline-block; font-size: var(--fuente-tam-3xl); font-weight: 900;
  color: var(--accent); background: var(--accent-light);
  padding: var(--espacio-sm) var(--espacio-xl); border-radius: var(--radius-full);
  margin: var(--espacio-md) 0;
}
.pedido-instrucciones {
  background: var(--bg-primary); border-radius: var(--radius-sm);
  padding: var(--espacio-lg); margin: var(--espacio-lg) 0;
  text-align: left; font-size: var(--fuente-tam-sm); color: var(--text-secondary); line-height: 1.7;
  border: 1px solid var(--border);
}

/* ─── MODAL LOGIN / REGISTRO ─────────────────────────────────────── */
.login-modal { max-width: 420px; }

.login-tabs {
  display: flex; gap: 0; flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}

.tab-btn {
  flex: 1; padding: 8px var(--espacio-md);
  font-size: var(--fuente-tam-sm); font-weight: 700;
  color: var(--text-secondary);
  background: #FFFFFF;
  transition: all var(--trans-rapida);
  border: none; cursor: pointer;
}
.tab-btn.activo { background: var(--accent); color: #FFFFFF; }
.tab-btn:hover:not(.activo) { background: var(--bg-primary); color: var(--text-primary); }

.login-avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-size: 13px; font-weight: 800;
  flex-shrink: 0; cursor: pointer;
}

/* Dropdown cuenta */
.cuenta-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  min-width: 180px; z-index: var(--z-dropdown);
  overflow: hidden;
}
.cuenta-dropdown[hidden] { display: none; }
.cuenta-dropdown-item {
  display: flex; align-items: center; gap: var(--espacio-sm);
  padding: var(--espacio-md);
  font-size: var(--fuente-tam-sm); font-weight: 600;
  color: var(--text-primary); cursor: pointer;
  transition: background-color var(--trans-rapida);
  border-bottom: 1px solid var(--border);
}
.cuenta-dropdown-item:last-child { border-bottom: none; color: var(--accent); }
.cuenta-dropdown-item:hover { background: var(--bg-primary); }
.header-controles { position: relative; }

/* Campo contraseña con toggle */
.password-wrap { position: relative; }
.password-wrap .input-campo { padding-right: 44px; }
.btn-toggle-pass {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 42px; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: var(--fuente-tam-lg);
  transition: color var(--trans-rapida);
}
.btn-toggle-pass:hover { color: var(--accent); }

.checkbox-label {
  display: flex; align-items: center; gap: var(--espacio-sm);
  font-size: var(--fuente-tam-sm); color: var(--text-secondary); cursor: pointer;
}
.checkbox-label input { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }

/* ─── MODAL COMPARADOR ────────────────────────────────────────────── */
.comparador-tabla { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espacio-lg); }
.comparador-col { display: flex; flex-direction: column; gap: var(--espacio-sm); }
.comparador-col img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-alt); }
.comparador-fila { display: flex; justify-content: space-between; padding: var(--espacio-sm) 0; border-bottom: 1px solid var(--border); font-size: var(--fuente-tam-sm); }
.comparador-fila strong { color: var(--text-muted); font-weight: 600; min-width: 100px; }

/* ─── MODAL DETALLE PRODUCTO ─────────────────────────────────────── */
.detalle-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-xl); }
.detalle-imagen { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); background: var(--bg-alt); }
.detalle-info { display: flex; flex-direction: column; gap: var(--espacio-md); }
.detalle-precio { font-size: var(--fuente-tam-3xl); font-weight: 900; color: var(--text-primary); }

.detalle-talla-selector { display: flex; gap: var(--espacio-xs); flex-wrap: wrap; }
.detalle-talla-btn {
  padding: 6px var(--espacio-md);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--fuente-tam-sm); font-weight: 700;
  color: var(--text-secondary);
  transition: all var(--trans-rapida);
}
.detalle-talla-btn:hover, .detalle-talla-btn.seleccionada { border-color: var(--accent); color: var(--accent); }

/* ─── TOAST ────────────────────────────────────────────────────────── */
.toast-contenedor {
  position: fixed; bottom: var(--espacio-xl); left: 50%;
  transform: translateX(-50%); z-index: var(--z-toast);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--espacio-sm); pointer-events: none;
  width: calc(100% - 2rem); max-width: 380px;
}

.toast {
  width: 100%; padding: 12px var(--espacio-lg);
  background: #111111; color: #FFFFFF;
  border-radius: var(--radius-md);
  font-size: var(--fuente-tam-sm); font-weight: 600;
  box-shadow: var(--shadow-modal);
  display: flex; align-items: center; gap: var(--espacio-sm);
  animation: toastEntrada 0.3s ease, toastSalida 0.3s ease 2.7s forwards;
  pointer-events: auto;
}
.toast-exito  { background: #1B5E20; }
.toast-error  { background: var(--accent); }
.toast-alerta { background: #BF360C; }

@keyframes toastEntrada { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes toastSalida  { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(16px)} }

/* ─── WHATSAPP FLOTANTE (pulso suave, no agresivo) ───────────────── */
.whatsapp-flotante {
  position: fixed; bottom: var(--espacio-xl); right: var(--espacio-xl);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--espacio-sm);
  transition: opacity var(--trans-normal), transform var(--trans-normal);
}

.whatsapp-btn {
  position: relative;
  width: 54px; height: 54px;
  border-radius: var(--radius-full);
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(37,211,102,0.40);
  transition: transform var(--trans-normal), box-shadow var(--trans-normal);
  z-index: 2;
}
.whatsapp-btn:hover {
  transform: scale(1.07);
  box-shadow: 0 6px 20px rgba(37,211,102,0.50);
}
.whatsapp-icono { width: 28px; height: 28px; }

/* Tooltip */
.whatsapp-tooltip {
  background: #111111; color: #FFFFFF;
  font-size: 12px; font-weight: 600;
  padding: 5px var(--espacio-sm);
  border-radius: var(--radius-sm);
  white-space: nowrap; pointer-events: none;
  opacity: 0;
  position: absolute; right: calc(100% + var(--espacio-sm)); top: 50%;
  transform: translateY(-50%) translateX(-6px);
  transition: all var(--trans-normal);
}
.whatsapp-tooltip::after {
  content: '';
  position: absolute; left: 100%; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: #111111;
}
.whatsapp-flotante:hover .whatsapp-tooltip {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

/* Pulso suave — menor escala, más elegante */
.whatsapp-pulso {
  position: absolute; width: 54px; height: 54px;
  border-radius: var(--radius-full);
  background: #25D366; z-index: 1;
  animation: pulsarWA 2.5s ease infinite;
}
@keyframes pulsarWA {
  0%   { transform: scale(1); opacity: 0.5; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.whatsapp-flotante.oculto { opacity: 0; transform: translateY(16px); pointer-events: none; }

/* ─── BREAKPOINTS ────────────────────────────────────────────────── */
@media (min-width: 480px) {
  .productos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  :root { --header-alto: 76px; --total-top: 112px; }
  .contenedor { padding: 0 var(--espacio-xl); }
  .categorias-grid { grid-template-columns: repeat(5, 1fr); }
  .productos-grid { grid-template-columns: repeat(3, 1fr); }
  .diferenciadores-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .asesor-form .form-fila { grid-template-columns: repeat(3, 1fr); }
  .detalle-layout { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .productos-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
}

@media (min-width: 1280px) {
  .productos-grid { grid-template-columns: repeat(4, 1fr); }
  .productos-grid-sm { grid-template-columns: repeat(4, 1fr); }
}

/* ─── RESPONSIVE MÓVIL ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero { min-height: 60vh; }
  .slider-contenedor { min-height: 60vh; }
  .slide { min-height: 60vh; }

  .categorias-grid { grid-template-columns: repeat(3, 1fr); }
  .rebajas-cabecera { flex-direction: column; align-items: flex-start; }
  .countdown-num { font-size: var(--fuente-tam-2xl); }
  .countdown-item { min-width: 58px; padding: 10px 12px; }
  .diferenciadores-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-carrusel { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--espacio-xl); }
  .asesor-form .form-fila { grid-template-columns: 1fr; }
  .outfit-controles { flex-direction: column; }
  .outfit-categoria { min-width: 100%; }
  .pago-metodos { grid-template-columns: 1fr; }
  .detalle-layout { grid-template-columns: 1fr; }
  .comparador-tabla { grid-template-columns: 1fr; }
  .input-fila { grid-template-columns: 1fr; }
  .slide-contenido { padding: var(--espacio-lg) var(--espacio-md); }

  /* Sidebar filtros drawer desde izquierda en móvil */
  .tienda-layout { flex-direction: column; }
  .filtros-sidebar {
    width: 100%;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 0; max-height: none;
    transform: translateX(-100%);
    transition: transform var(--trans-normal);
    z-index: var(--z-sidebar);
    padding-top: calc(var(--total-top) + var(--espacio-md));
  }
  .filtros-sidebar.visible { transform: translateX(0); }
  .btn-filtros-movil { display: flex; }
  .btn-cerrar-filtros { display: flex; }
  .productos-grid-sm { grid-template-columns: repeat(2, 1fr); }

  .whatsapp-flotante { bottom: var(--espacio-md); right: var(--espacio-md); }
}

@media (max-width: 479px) {
  .categorias-grid { grid-template-columns: repeat(2, 1fr); }
  .carrito-panel, .favoritos-panel { width: 100%; }
  .checkout-pasos { flex-wrap: wrap; }
}

/* ─── SKELETON LOADING ────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-alt) 25%, var(--border) 50%, var(--bg-alt) 75%);
  background-size: 200% 100%;
  animation: skeletonLoad 1.4s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeletonLoad { from{background-position:200% 0} to{background-position:-200% 0} }

/* Tema oscuro skeleton */
[data-tema="oscuro"] .skeleton {
  background: linear-gradient(90deg, #222 25%, #2E2E2E 50%, #222 75%);
  background-size: 200% 100%;
}

/* ─── PANEL VACÍO (favoritos / carrito) ──────────────────────────── */
.panel-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-sm);
  padding: 3rem var(--espacio-lg);
  text-align: center;
  color: var(--text-muted);
}
.panel-vacio i { font-size: 2.5rem; opacity: 0.3; margin-bottom: var(--espacio-sm); }
.panel-vacio p { font-weight: 600; font-size: var(--fuente-tam-base); }
.panel-vacio small { font-size: var(--fuente-tam-xs); line-height: 1.5; }

/* ─── BOTONES AUXILIARES ─────────────────────────────────────────── */
.btn-sm {
  padding: 6px 12px;
  font-size: var(--fuente-tam-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.btn-icono-quitar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.btn-icono-quitar:hover { color: var(--accent); border-color: var(--accent); }

/* ─── CAMPO GRUPO (formularios login/registro) ───────────────────── */
.campo-grupo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: var(--espacio-md);
}
.campo-grupo label {
  font-size: var(--fuente-tam-sm);
  font-weight: 700;
  color: var(--text-primary);
}
.campo-grupo input {
  padding: 11px var(--espacio-md);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fuente-tam-base);
  transition: border-color var(--trans-rapida);
  width: 100%;
}
.campo-grupo input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ─── LOGIN — ELEMENTOS COMPLEMENTARIOS ─────────────────────────── */
.login-pie {
  text-align: center;
  margin-top: var(--espacio-md);
  font-size: var(--fuente-tam-sm);
  color: var(--text-secondary);
}
.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: var(--accent-hover); }

/* Inicial de usuario en botón cuenta */
.cuenta-inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}

/* Info del usuario en dropdown */
.cuenta-dropdown-info {
  padding: var(--espacio-md);
  border-bottom: 1px solid var(--border);
}
.cuenta-dropdown-info strong {
  display: block;
  font-size: var(--fuente-tam-sm);
  color: var(--text-primary);
}
.cuenta-dropdown-info small {
  font-size: var(--fuente-tam-xs);
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════
   SECCIÓN MODELOS VISTIENDO
   ══════════════════════════════════════════════════════════════════ */
.modelos-seccion {
  padding: var(--espacio-3xl) 0;
  background: var(--bg-primary);
}
.modelos-seccion .seccion-titulo { margin-bottom: var(--espacio-sm); }
.modelos-seccion .seccion-subtitulo {
  font-size: var(--fuente-tam-sm);
  color: var(--text-secondary);
  margin-bottom: var(--espacio-xl);
}
.modelos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-lg);
}
.modelo-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--trans-normal);
}
.modelo-card:hover { box-shadow: var(--shadow-hover); }
.modelo-imagen-wrapper {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-alt);
}
.modelo-imagen-wrapper img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--trans-lenta);
  display: block;
}
.modelo-card:hover .modelo-imagen-wrapper img { transform: scale(1.04); }

.modelo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 35%, transparent 70%);
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: var(--espacio-lg);
  opacity: 0;
  transition: opacity var(--trans-normal);
}
.modelo-card:hover .modelo-overlay { opacity: 1; }

.modelo-tag {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--espacio-sm);
}
.modelo-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent);
  color: #FFFFFF;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--fuente-tam-sm);
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  transition: background var(--trans-rapida);
}
.modelo-btn:hover { background: var(--accent-hover); }

.modelo-info {
  padding: var(--espacio-md) var(--espacio-lg);
  border-top: 1px solid var(--border);
}
.modelo-nombre {
  font-size: var(--fuente-tam-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px;
}
.modelo-desc {
  font-size: var(--fuente-tam-xs);
  color: var(--text-secondary);
  margin: 0;
}

/* Placeholder cuando no hay foto */
.modelo-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--espacio-sm);
  color: var(--text-muted);
  font-size: var(--fuente-tam-sm);
  text-align: center;
  padding: var(--espacio-lg);
}
.modelo-placeholder i { font-size: 3rem; opacity: 0.3; }
.modelo-placeholder p { font-size: var(--fuente-tam-xs); }

@media (max-width: 640px) {
  .modelos-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — INPUTS Y FORMULARIOS
   ══════════════════════════════════════════════════════════════════ */
[data-tema="oscuro"] input,
[data-tema="oscuro"] select,
[data-tema="oscuro"] textarea {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border);
}
[data-tema="oscuro"] input::placeholder,
[data-tema="oscuro"] textarea::placeholder {
  color: var(--text-muted);
}
.cuenta-dropdown-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* Ajustes input dentro de password-wrap */
.password-wrap input,
.password-wrap .input-campo { padding-right: 44px; }