/* ==========================================================================
   ACCEVIX — Hoja de estilos principal
   "Todo para tu Smartphone"
   Estructura:
   1. Fuentes y Variables (Design Tokens)
   2. Reset y Base
   3. Utilidades
   4. Header y Navegación
   5. Botones
   6. Tarjetas de Producto
   7. Hero / Slider
   8. Secciones de Home (beneficios, marcas, categorías, testimonios, FAQ, mapa)
   9. Tienda / Filtros
   10. Carrito y Checkout
   11. Formularios (login, registro, contacto)
   12. Footer
   13. Botón flotante WhatsApp / Volver arriba
   14. Modo oscuro
   15. Animaciones
   16. Responsive
   ========================================================================== */


/* ==========================================================================
   1. FUENTES Y VARIABLES (DESIGN TOKENS)
   Tipografía display: 'Space Grotesk' -> personalidad técnica/geométrica
   Tipografía texto:   'Inter'          -> lectura limpia
   Tipografía spec:    'JetBrains Mono' -> precios y datos, efecto "ficha técnica"
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  /* Paleta de marca */
  --azul-electrico: #0055FF;
  --azul-electrico-2: #2D6BFF;
  --celeste: #3ED6FF;
  --celeste-suave: #B9EEFF;
  --negro: #05070D;
  --negro-superficie: #0B1020;
  --negro-superficie-2: #10182C;
  --blanco: #F7F9FC;
  --blanco-puro: #FFFFFF;

  /* Semánticos */
  --exito: #2ED573;
  --alerta: #FFB020;
  --error: #FF4757;
  --oferta: #FF3D71;

  /* Superficies (modo claro por defecto) */
  --bg: var(--blanco);
  --bg-superficie: #FFFFFF;
  --bg-superficie-alt: #EFF3FA;
  --texto: #0B1020;
  --texto-suave: #4B5568;
  --borde: rgba(11, 16, 32, 0.08);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-oscuro: rgba(11, 16, 32, 0.55);
  --glass-borde: rgba(255, 255, 255, 0.35);
  --glass-blur: 16px;

  /* Sombras */
  --sombra-sm: 0 2px 8px rgba(5, 7, 13, 0.06);
  --sombra-md: 0 8px 24px rgba(5, 7, 13, 0.10);
  --sombra-lg: 0 20px 48px rgba(5, 7, 13, 0.16);
  --sombra-glow: 0 0 32px rgba(62, 214, 255, 0.35);

  /* Tipografía */
  --font-display: 'Space Grotesk', sans-serif;
  --font-texto: 'Inter', sans-serif;
  --font-spec: 'JetBrains Mono', monospace;

  /* Radios y espaciado */
  --radio-sm: 10px;
  --radio-md: 18px;
  --radio-lg: 28px;
  --radio-full: 999px;

  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 16px;
  --espacio-4: 24px;
  --espacio-5: 32px;
  --espacio-6: 48px;
  --espacio-7: 64px;
  --espacio-8: 96px;

  /* Layout */
  --ancho-max: 1280px;
  --header-h: 78px;

  /* Transiciones */
  --ease: cubic-bezier(.22,.9,.32,1);
  --t-rapido: 180ms var(--ease);
  --t-medio: 320ms var(--ease);
  --t-lento: 520ms var(--ease);
}

/* ---- Modo oscuro ---- */
[data-tema="oscuro"]{
  --bg: var(--negro);
  --bg-superficie: var(--negro-superficie);
  --bg-superficie-alt: var(--negro-superficie-2);
  --texto: #F2F5FC;
  --texto-suave: #A6B0C3;
  --borde: rgba(247, 249, 252, 0.10);

  --glass-bg: rgba(16, 24, 44, 0.55);
  --glass-borde: rgba(255, 255, 255, 0.08);

  --sombra-sm: 0 2px 8px rgba(0,0,0,0.35);
  --sombra-md: 0 8px 24px rgba(0,0,0,0.45);
  --sombra-lg: 0 20px 48px rgba(0,0,0,0.55);
}


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

html{ scroll-behavior: smooth; }

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

body{
  font-family: var(--font-texto);
  background: var(--bg);
  color: var(--texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--t-medio), color var(--t-medio);
}

img{ max-width: 100%; display: block; }
a{ text-decoration: none; color: inherit; }
ul{ list-style: none; }
button{ font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea{ font: inherit; color: inherit; }

h1, h2, h3, h4{
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--texto);
}

:focus-visible{
  outline: 2px solid var(--celeste);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Barra de progreso de carga (lazy load) */
.cargando{ position: relative; overflow: hidden; background: var(--bg-superficie-alt); }
.cargando::after{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: barrido 1.2s infinite;
}
@keyframes barrido{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(100%);} }


/* ==========================================================================
   3. UTILIDADES
   ========================================================================== */
.contenedor{ max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--espacio-4); }
.solo-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-spec);
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--azul-electrico-2);
  background: var(--celeste-suave);
  padding: 6px 14px; border-radius: var(--radio-full);
  margin-bottom: var(--espacio-3);
}
[data-tema="oscuro"] .eyebrow{ background: rgba(62,214,255,0.12); color: var(--celeste); }

.titulo-seccion{ font-size: clamp(1.6rem, 2.6vw, 2.4rem); margin-bottom: var(--espacio-2); }
.subtitulo-seccion{ color: var(--texto-suave); max-width: 620px; margin-bottom: var(--espacio-5); }
.encabezado-seccion{ display:flex; align-items:flex-end; justify-content:space-between; gap: var(--espacio-4); flex-wrap: wrap; margin-bottom: var(--espacio-5); }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 0.78rem; font-weight: 600;
  padding: 5px 12px; border-radius: var(--radio-full);
  background: var(--bg-superficie-alt); color: var(--texto-suave);
  border: 1px solid var(--borde);
}

.precio-anterior{ font-family: var(--font-spec); text-decoration: line-through; color: var(--texto-suave); font-size: 0.85rem; }
.precio-actual{ font-family: var(--font-spec); font-weight: 600; font-size: 1.15rem; color: var(--azul-electrico); }
[data-tema="oscuro"] .precio-actual{ color: var(--celeste); }
.badge-descuento{ font-family: var(--font-spec); font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--oferta); padding: 3px 8px; border-radius: 6px; }

.reveal{ opacity: 0; transform: translateY(24px); transition: opacity var(--t-lento), transform var(--t-lento); }
.reveal.visible{ opacity: 1; transform: translateY(0); }

.svg-icono{ width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink:0; }


/* ==========================================================================
   4. HEADER Y NAVEGACIÓN
   ========================================================================== */
.header{
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  height: var(--header-h);
  display:flex; align-items:center;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border-bottom: 1px solid var(--glass-borde);
  transition: background var(--t-medio), box-shadow var(--t-medio);
}
.header.header--scroll{ box-shadow: var(--sombra-md); }

.header__barra{
  height: 34px;
  font-family: var(--font-spec);
  font-size: 0.72rem;
  background: var(--negro);
  color: var(--celeste-suave);
  display:flex; align-items:center; justify-content:center; gap: 24px;
  letter-spacing: 0.03em;
}

.header__inner{ display:flex; align-items:center; gap: var(--espacio-5); width:100%; }

.logo{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:1.4rem; }
.logo__marca{
  width:38px; height:38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--azul-electrico), var(--celeste));
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--sombra-glow);
  color:#fff; font-weight:700;
}
.logo__texto span{ color: var(--azul-electrico); }
[data-tema="oscuro"] .logo__texto span{ color: var(--celeste); }

.nav{ display:flex; align-items:center; gap: var(--espacio-4); margin-left: var(--espacio-4); flex:1; }
.nav__lista{ display:flex; align-items:center; gap: var(--espacio-4); }
.nav__link{
  display:flex; align-items:center; gap:4px;
  font-weight:600; font-size:0.95rem; padding: 8px 4px;
  color: var(--texto); position:relative;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0%;
  background: linear-gradient(90deg, var(--azul-electrico), var(--celeste));
  transition: width var(--t-rapido);
}
.nav__link:hover::after, .nav__item.activo .nav__link::after{ width:100%; }
.nav__item{ position:relative; }

.submenu{
  position:absolute; top: calc(100% + 14px); left:0; min-width: 220px;
  background: var(--bg-superficie);
  border:1px solid var(--borde); border-radius: var(--radio-md);
  box-shadow: var(--sombra-lg); padding: 10px;
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: all var(--t-rapido);
  z-index: 200;
}
.nav__item:hover .submenu, .nav__item:focus-within .submenu{ opacity:1; visibility:visible; transform: translateY(0); }
.submenu__link{ display:block; padding: 9px 12px; border-radius: 8px; font-size:0.9rem; font-weight:500; }
.submenu__link:hover{ background: var(--bg-superficie-alt); color: var(--azul-electrico); }

.submenu--marcas{ display:flex; gap: 4px; padding: 14px; min-width: 560px; }
.submenu__col{ flex:1; min-width: 120px; }
.submenu__col-titulo{ font-family: var(--font-spec); font-size: 0.7rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--texto-suave); padding: 8px 12px 4px; }

.header__acciones{ display:flex; align-items:center; gap: var(--espacio-2); }

.buscador{
  display:flex; align-items:center; gap:8px;
  background: var(--bg-superficie-alt); border:1px solid var(--borde);
  border-radius: var(--radio-full); padding: 9px 16px; width: 260px;
  transition: width var(--t-medio), box-shadow var(--t-medio);
}
.buscador:focus-within{ width: 340px; box-shadow: 0 0 0 3px rgba(62,214,255,0.25); }
.buscador input{ background:none; border:none; outline:none; width:100%; font-size:0.9rem; color: var(--texto); }
.buscador__resultados{
  position:absolute; top: calc(100% + 10px); left:0; right:0;
  background: var(--bg-superficie); border:1px solid var(--borde); border-radius: var(--radio-md);
  box-shadow: var(--sombra-lg); max-height: 360px; overflow:auto; display:none; z-index: 300;
}
.buscador__resultados.activo{ display:block; }
.buscador__item{ display:flex; gap:10px; align-items:center; padding: 10px 14px; border-bottom:1px solid var(--borde); }
.buscador__item:hover{ background: var(--bg-superficie-alt); }
.buscador__item-img{ width:38px; height:38px; border-radius:8px; background: var(--bg-superficie-alt); display:flex; align-items:center; justify-content:center; }

.icono-btn{
  position:relative; width:42px; height:42px; border-radius: var(--radio-full);
  display:flex; align-items:center; justify-content:center;
  background: var(--bg-superficie-alt); border:1px solid var(--borde);
  transition: transform var(--t-rapido), background var(--t-rapido);
}
.icono-btn:hover{ transform: translateY(-2px); background: var(--celeste-suave); }
.icono-btn__contador{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding: 0 4px;
  border-radius: 999px; background: var(--oferta); color:#fff;
  font-family: var(--font-spec); font-size: 0.65rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

.nav__toggle{ display:none; width:42px; height:42px; border-radius: 10px; background: var(--bg-superficie-alt); align-items:center; justify-content:center; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after{
  content:""; display:block; width:20px; height:2px; background: var(--texto); position:relative; transition: all var(--t-rapido);
}
.nav__toggle span::before{ position:absolute; top:-6px; }
.nav__toggle span::after{ position:absolute; top:6px; }


/* ==========================================================================
   5. BOTONES
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px; border-radius: var(--radio-full);
  font-weight: 700; font-size: 0.92rem; white-space:nowrap;
  transition: transform var(--t-rapido), box-shadow var(--t-rapido), background var(--t-rapido);
}
.btn:active{ transform: scale(0.97); }

.btn--primario{
  background: linear-gradient(135deg, var(--azul-electrico), var(--azul-electrico-2));
  color:#fff; box-shadow: var(--sombra-md);
}
.btn--primario:hover{ box-shadow: var(--sombra-glow); transform: translateY(-2px); }

.btn--secundario{
  background: var(--bg-superficie); color: var(--texto); border: 1.5px solid var(--borde);
}
.btn--secundario:hover{ border-color: var(--azul-electrico); color: var(--azul-electrico); }

.btn--celeste{ background: var(--celeste); color: var(--negro); box-shadow: 0 8px 24px rgba(62,214,255,0.35); }
.btn--celeste:hover{ transform: translateY(-2px); }

.btn--ghost{ background: transparent; color: var(--texto); padding: 10px 18px; }
.btn--ghost:hover{ color: var(--azul-electrico); }

.btn--sm{ padding: 9px 18px; font-size: 0.82rem; }
.btn--bloque{ width:100%; }
.btn--icono{ width:46px; height:46px; padding:0; border-radius: var(--radio-full); }


/* ==========================================================================
   6. TARJETAS DE PRODUCTO
   ========================================================================== */
.tarjeta-producto{
  position:relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-borde);
  border-radius: var(--radio-lg);
  overflow:hidden;
  transition: transform var(--t-medio), box-shadow var(--t-medio), border-color var(--t-medio);
  display:flex; flex-direction:column;
}
.tarjeta-producto:hover{ transform: translateY(-8px); box-shadow: var(--sombra-lg); border-color: var(--celeste); }

.tarjeta-producto__media{
  position:relative; aspect-ratio: 1/1;
  background: radial-gradient(circle at 30% 20%, var(--celeste-suave), var(--bg-superficie-alt) 70%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
[data-tema="oscuro"] .tarjeta-producto__media{ background: radial-gradient(circle at 30% 20%, rgba(62,214,255,0.18), var(--negro-superficie-2) 70%); }
.tarjeta-producto__media svg{ width: 46%; height:46%; color: var(--azul-electrico); opacity:0.85; transition: transform var(--t-medio); }
[data-tema="oscuro"] .tarjeta-producto__media svg{ color: var(--celeste); }
.tarjeta-producto:hover .tarjeta-producto__media svg{ transform: scale(1.12) rotate(-4deg); }

.tarjeta-producto__badges{ position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px; }
.tarjeta-producto__fav{
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,0.85); display:flex; align-items:center; justify-content:center;
  transition: transform var(--t-rapido), background var(--t-rapido);
}
.tarjeta-producto__fav:hover{ transform: scale(1.1); }
.tarjeta-producto__fav.activo{ background: var(--oferta); color:#fff; }
.tarjeta-producto__fav.activo svg{ fill: currentColor; }

.tarjeta-producto__vista-rapida{
  position:absolute; left:0; right:0; bottom:0; padding:10px;
  display:flex; justify-content:center;
  transform: translateY(120%); transition: transform var(--t-rapido);
}
.tarjeta-producto:hover .tarjeta-producto__vista-rapida{ transform: translateY(0); }
.tarjeta-producto__vista-rapida button{
  background: var(--negro); color:#fff; font-size:0.78rem; font-weight:700;
  padding: 9px 16px; border-radius: var(--radio-full); display:flex; align-items:center; gap:6px;
}

.tarjeta-producto__cuerpo{ padding: var(--espacio-3) var(--espacio-3) var(--espacio-4); display:flex; flex-direction:column; gap:8px; flex:1; }
.tarjeta-producto__marca{ font-family: var(--font-spec); font-size: 0.7rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--texto-suave); }
.tarjeta-producto__nombre{ font-weight:600; font-size:0.98rem; line-height:1.3; min-height: 2.5em; }
.tarjeta-producto__rating{ display:flex; align-items:center; gap:4px; font-size:0.78rem; color: var(--texto-suave); }
.tarjeta-producto__rating svg{ width:14px; height:14px; color: var(--alerta); fill: var(--alerta); }
.tarjeta-producto__precios{ display:flex; align-items:baseline; gap:8px; margin-top:2px; }
.tarjeta-producto__stock{ font-size:0.75rem; color: var(--exito); font-weight:600; }
.tarjeta-producto__stock.agotado{ color: var(--error); }
.tarjeta-producto__acciones{ display:flex; gap:8px; margin-top:6px; }
.tarjeta-producto__acciones .btn{ flex:1; padding: 10px 12px; font-size:0.82rem; }


/* ==========================================================================
   7. HERO / SLIDER — Elemento firma: panel de "circuito" con trazos animados
   conectando los accesorios alrededor del teléfono
   ========================================================================== */
.hero{
  position:relative; padding: calc(var(--header-h) + 64px) 0 var(--espacio-8);
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(62,214,255,0.16), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(0,85,255,0.12), transparent 40%);
}
.hero__inner{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--espacio-7); align-items:center; }

.hero__eslogan{ font-size: clamp(2.2rem, 4.2vw, 3.6rem); margin-bottom: var(--espacio-3); }
.hero__eslogan em{ font-style:normal; background: linear-gradient(120deg, var(--azul-electrico), var(--celeste)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__texto{ color: var(--texto-suave); font-size:1.05rem; max-width: 480px; margin-bottom: var(--espacio-5); }
.hero__acciones{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: var(--espacio-6); }
.hero__stats{ display:flex; gap: var(--espacio-6); }
.hero__stat b{ display:block; font-family: var(--font-display); font-size:1.5rem; }
.hero__stat span{ font-size:0.8rem; color: var(--texto-suave); }

/* Panel visual "circuito" */
.circuito{
  position:relative; aspect-ratio: 1/1; max-width: 480px; margin:0 auto;
  border-radius: 32px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-borde);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--sombra-lg);
}
.circuito__telefono{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: 34%; height: 62%; border-radius: 26px;
  background: linear-gradient(160deg, var(--negro), #1a2340);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.06), var(--sombra-glow);
  display:flex; align-items:center; justify-content:center;
}
.circuito__telefono::before{ content:""; width:70%; height:82%; border-radius:16px; background: linear-gradient(150deg, var(--azul-electrico), var(--celeste)); opacity:0.9; }

.circuito__nodo{
  position:absolute; width:58px; height:58px; border-radius:16px;
  background: var(--bg-superficie); border:1px solid var(--borde); box-shadow: var(--sombra-md);
  display:flex; align-items:center; justify-content:center; color: var(--azul-electrico);
  animation: flotar 4.5s ease-in-out infinite;
}
[data-tema="oscuro"] .circuito__nodo{ color: var(--celeste); }
.circuito__nodo svg{ width:26px; height:26px; }
.circuito__nodo:nth-child(2){ top:6%; left:10%; animation-delay: 0s; }
.circuito__nodo:nth-child(3){ top:8%; right:8%; animation-delay: .6s; }
.circuito__nodo:nth-child(4){ bottom:10%; left:6%; animation-delay: 1.1s; }
.circuito__nodo:nth-child(5){ bottom:6%; right:10%; animation-delay: 1.7s; }
.circuito__nodo:nth-child(6){ top:44%; left:2%; animation-delay: 2.2s; }

.circuito__trazos{ position:absolute; inset:0; width:100%; height:100%; }
.circuito__trazos path{
  fill:none; stroke: url(#gradienteTrazo); stroke-width:1.6; stroke-dasharray: 6 8;
  animation: fluir 3s linear infinite;
}


/* ==========================================================================
   8. SECCIONES DE HOME
   ========================================================================== */
.seccion{ padding: var(--espacio-8) 0; }
.seccion--alt{ background: var(--bg-superficie-alt); }

.grid-productos{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--espacio-4); }

.tabs-productos{ display:flex; gap:10px; margin-bottom: var(--espacio-5); flex-wrap:wrap; }
.tabs-productos button{
  padding: 9px 18px; border-radius: var(--radio-full); font-weight:600; font-size:0.85rem;
  background: var(--bg-superficie-alt); border:1px solid var(--borde);
}
.tabs-productos button.activo{ background: var(--negro); color:#fff; border-color: var(--negro); }

.banner-promo{
  position:relative; border-radius: var(--radio-lg); overflow:hidden; padding: var(--espacio-6);
  background: linear-gradient(120deg, var(--negro) 0%, #101a3d 60%, var(--azul-electrico) 130%);
  color:#fff; display:flex; align-items:center; justify-content:space-between; gap: var(--espacio-5); flex-wrap:wrap;
}
.banner-promo::after{
  content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle, rgba(62,214,255,0.45), transparent 70%);
}
.banner-promo h3{ font-size: clamp(1.4rem, 3vw, 2rem); }
.banner-promo p{ color: var(--celeste-suave); margin-top:6px; }

.grid-marcas{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--espacio-3); }
.tarjeta-marca{
  display:flex; flex-direction:column; align-items:center; gap:10px; padding: var(--espacio-5);
  background: var(--bg-superficie); border:1px solid var(--borde); border-radius: var(--radio-md);
  text-align:center; transition: transform var(--t-rapido), border-color var(--t-rapido);
}
.tarjeta-marca:hover{ transform: translateY(-6px); border-color: var(--azul-electrico); }
.tarjeta-marca__icono{ width:56px; height:56px; border-radius:16px; background: var(--bg-superficie-alt); display:flex; align-items:center; justify-content:center; color: var(--azul-electrico); }

.grid-categorias{ display:grid; grid-template-columns: repeat(5,1fr); gap: var(--espacio-3); }
.tarjeta-categoria{
  padding: var(--espacio-4); border-radius: var(--radio-md); text-align:center;
  background: var(--glass-bg); border:1px solid var(--glass-borde); backdrop-filter: blur(10px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition: transform var(--t-rapido), box-shadow var(--t-rapido);
}
.tarjeta-categoria:hover{ transform: translateY(-6px) scale(1.02); box-shadow: var(--sombra-md); }
.tarjeta-categoria__icono{ color: var(--azul-electrico); }
[data-tema="oscuro"] .tarjeta-categoria__icono{ color: var(--celeste); }
.tarjeta-categoria__nombre{ font-weight:600; font-size:0.88rem; }

.grid-beneficios{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--espacio-4); }
.tarjeta-beneficio{ text-align:center; padding: var(--espacio-4); }
.tarjeta-beneficio__icono{
  width:64px; height:64px; margin: 0 auto var(--espacio-3); border-radius: 20px;
  background: linear-gradient(135deg, var(--azul-electrico), var(--celeste));
  display:flex; align-items:center; justify-content:center; color:#fff; box-shadow: var(--sombra-glow);
}
.tarjeta-beneficio h4{ font-size:1rem; margin-bottom:6px; }
.tarjeta-beneficio p{ color: var(--texto-suave); font-size:0.88rem; }

.carrusel-testimonios{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--espacio-4); }
.tarjeta-testimonio{ padding: var(--espacio-4); border-radius: var(--radio-md); background: var(--bg-superficie); border:1px solid var(--borde); }
.tarjeta-testimonio__estrellas{ display:flex; gap:2px; color: var(--alerta); margin-bottom:10px; }
.tarjeta-testimonio__estrellas svg{ width:16px; height:16px; fill: currentColor; }
.tarjeta-testimonio__autor{ display:flex; align-items:center; gap:10px; margin-top: var(--espacio-3); }
.tarjeta-testimonio__avatar{ width:38px; height:38px; border-radius:50%; background: linear-gradient(135deg, var(--azul-electrico), var(--celeste)); display:flex;align-items:center;justify-content:center; color:#fff; font-weight:700; font-size:0.85rem; }

.acordeon{ max-width: 780px; margin:0 auto; }
.acordeon__item{ border-bottom: 1px solid var(--borde); }
.acordeon__pregunta{ width:100%; display:flex; justify-content:space-between; align-items:center; padding: var(--espacio-4) 4px; text-align:left; font-weight:600; }
.acordeon__pregunta svg{ transition: transform var(--t-rapido); flex-shrink:0; }
.acordeon__item.abierto .acordeon__pregunta svg{ transform: rotate(45deg); }
.acordeon__respuesta{ max-height:0; overflow:hidden; transition: max-height var(--t-medio); color: var(--texto-suave); font-size:0.92rem; }
.acordeon__respuesta p{ padding: 0 4px var(--espacio-4); }

.mapa-ubicacion{ border-radius: var(--radio-lg); overflow:hidden; border:1px solid var(--borde); height: 360px; }
.mapa-ubicacion iframe{ width:100%; height:100%; border:0; filter: grayscale(0.15); }


/* ==========================================================================
   9. TIENDA / FILTROS
   ========================================================================== */
.tienda-layout{ display:grid; grid-template-columns: 260px 1fr; gap: var(--espacio-5); align-items:flex-start; }

.filtros{
  position:sticky; top: calc(var(--header-h) + 20px);
  background: var(--bg-superficie); border:1px solid var(--borde); border-radius: var(--radio-md);
  padding: var(--espacio-4);
}
.filtros__grupo{ padding: var(--espacio-3) 0; border-bottom: 1px solid var(--borde); }
.filtros__grupo:last-child{ border-bottom:none; }
.filtros__titulo{ font-weight:700; font-size:0.9rem; margin-bottom:10px; display:flex; justify-content:space-between; }
.filtros__opcion{ display:flex; align-items:center; gap:8px; font-size:0.86rem; padding:5px 0; color: var(--texto-suave); }
.filtros__opcion input{ accent-color: var(--azul-electrico); }
.filtros__precio{ display:flex; gap:8px; align-items:center; }
.filtros__precio input{ width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--borde); background: var(--bg-superficie-alt); }
.filtros__colores{ display:flex; gap:8px; flex-wrap:wrap; }
.filtros__color{ width:24px; height:24px; border-radius:50%; border:2px solid var(--bg-superficie); box-shadow: 0 0 0 1px var(--borde); cursor:pointer; }
.filtros__color.activo{ box-shadow: 0 0 0 2px var(--azul-electrico); }

.tienda-toolbar{ display:flex; justify-content:space-between; align-items:center; gap: var(--espacio-3); margin-bottom: var(--espacio-4); flex-wrap:wrap; }
.tienda-toolbar__vista{ display:flex; gap:6px; }
.tienda-toolbar select{ padding:9px 14px; border-radius: var(--radio-full); border:1px solid var(--borde); background: var(--bg-superficie); }

.migas{ font-size:0.82rem; color: var(--texto-suave); display:flex; gap:6px; margin: calc(var(--header-h) + 24px) 0 var(--espacio-4); }
.migas a:hover{ color: var(--azul-electrico); }

.paginacion{ display:flex; justify-content:center; gap:8px; margin-top: var(--espacio-6); }
.paginacion button{ width:40px; height:40px; border-radius:10px; border:1px solid var(--borde); font-weight:600; }
.paginacion button.activo{ background: var(--negro); color:#fff; border-color: var(--negro); }


/* ==========================================================================
   10. CARRITO Y CHECKOUT
   ========================================================================== */
.carrito-layout, .checkout-layout{ display:grid; grid-template-columns: 1fr 380px; gap: var(--espacio-5); align-items:flex-start; }

.fila-carrito{
  display:grid; grid-template-columns: 90px 1fr auto auto auto; gap: var(--espacio-3); align-items:center;
  padding: var(--espacio-3); border-radius: var(--radio-md); background: var(--bg-superficie); border:1px solid var(--borde); margin-bottom: 12px;
}
.fila-carrito__img{ width:90px; height:90px; border-radius:12px; background: var(--bg-superficie-alt); display:flex; align-items:center; justify-content:center; color: var(--azul-electrico); }
.fila-carrito__cantidad{ display:flex; align-items:center; border:1px solid var(--borde); border-radius: var(--radio-full); overflow:hidden; }
.fila-carrito__cantidad button{ width:32px; height:32px; }
.fila-carrito__cantidad input{ width:36px; text-align:center; border:none; background:none; }
.fila-carrito__quitar{ color: var(--error); }

.resumen-pedido{
  background: var(--bg-superficie); border:1px solid var(--borde); border-radius: var(--radio-md); padding: var(--espacio-4);
  position:sticky; top: calc(var(--header-h) + 20px);
}
.resumen-pedido__linea{ display:flex; justify-content:space-between; padding: 8px 0; font-size:0.92rem; color: var(--texto-suave); }
.resumen-pedido__linea.total{ color: var(--texto); font-weight:700; font-size:1.1rem; border-top: 1px solid var(--borde); margin-top:8px; padding-top: 14px; }
.cupon{ display:flex; gap:8px; margin: var(--espacio-3) 0; }
.cupon input{ flex:1; padding:10px 14px; border-radius: var(--radio-full); border:1px solid var(--borde); background: var(--bg-superficie-alt); }

.grupo-metodos{ display:grid; gap:10px; }
.metodo{
  display:flex; align-items:center; gap:12px; padding: 12px 14px; border-radius: var(--radio-md);
  border: 1.5px solid var(--borde); cursor:pointer; transition: border-color var(--t-rapido), background var(--t-rapido);
}
.metodo:hover{ border-color: var(--azul-electrico); }
.metodo.seleccionado{ border-color: var(--azul-electrico); background: var(--celeste-suave); }
[data-tema="oscuro"] .metodo.seleccionado{ background: rgba(62,214,255,0.12); }


/* ==========================================================================
   11. FORMULARIOS
   ========================================================================== */
.form-tarjeta{
  max-width: 520px; margin: 0 auto; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur));
  border:1px solid var(--glass-borde); border-radius: var(--radio-lg); padding: var(--espacio-6); box-shadow: var(--sombra-lg);
}
.campo{ margin-bottom: var(--espacio-3); }
.campo label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px; }
.campo input, .campo select, .campo textarea{
  width:100%; padding: 12px 16px; border-radius: var(--radio-sm); border: 1.5px solid var(--borde);
  background: var(--bg-superficie-alt); transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{ outline:none; border-color: var(--azul-electrico); box-shadow: 0 0 0 4px rgba(0,85,255,0.12); }
.campo__error{ color: var(--error); font-size:0.78rem; margin-top:5px; display:none; }
.campo.invalido input{ border-color: var(--error); }
.campo.invalido .campo__error{ display:block; }
.fila-campos{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-3); }


/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.footer{ background: var(--negro); color: var(--celeste-suave); padding: var(--espacio-7) 0 var(--espacio-4); margin-top: var(--espacio-8); }
.footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: var(--espacio-5); padding-bottom: var(--espacio-6); border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer__marca p{ color: rgba(247,249,252,0.6); font-size:0.88rem; margin: var(--espacio-3) 0; max-width: 260px; }
.footer h5{ font-family: var(--font-display); color:#fff; margin-bottom: var(--espacio-3); font-size:0.95rem; }
.footer li{ margin-bottom:9px; }
.footer a{ color: rgba(247,249,252,0.65); font-size:0.88rem; transition: color var(--t-rapido); }
.footer a:hover{ color: var(--celeste); }
.footer__redes{ display:flex; gap:10px; margin-top: var(--espacio-3); }
.footer__redes a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center; transition: transform var(--t-rapido), background var(--t-rapido);
}
.footer__redes a:hover{ transform: translateY(-3px); background: var(--azul-electrico); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: var(--espacio-4); font-size:0.8rem; color: rgba(247,249,252,0.5); flex-wrap:wrap; gap:10px; }
.footer__pagos{ display:flex; gap:8px; }
.footer__pagos span{ padding:5px 10px; border-radius:6px; background: rgba(255,255,255,0.08); font-family: var(--font-spec); font-size:0.7rem; }


/* ==========================================================================
   13. BOTÓN FLOTANTE WHATSAPP / VOLVER ARRIBA
   ========================================================================== */
.flotante-whatsapp{
  position:fixed; bottom: 26px; left: 26px; z-index: 900;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow: var(--sombra-lg);
  animation: pulso 2.4s infinite;
}
.flotante-whatsapp:hover{ transform: scale(1.08); }

.volver-arriba{
  position:fixed; bottom: 26px; right: 26px; z-index: 900;
  width:48px; height:48px; border-radius:50%; background: var(--negro); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow: var(--sombra-md);
  opacity:0; visibility:hidden; transform: translateY(10px); transition: all var(--t-rapido);
}
.volver-arriba.visible{ opacity:1; visibility:visible; transform: translateY(0); }

/* Notificaciones (toasts) */
.notificaciones{ position:fixed; top: 100px; right: 26px; z-index: 2000; display:flex; flex-direction:column; gap:10px; }
.toast{
  display:flex; align-items:center; gap:10px; padding: 14px 18px; border-radius: var(--radio-md);
  background: var(--bg-superficie); border:1px solid var(--borde); box-shadow: var(--sombra-lg);
  min-width: 260px; animation: entrarToast var(--t-medio);
}
.toast--exito{ border-left: 4px solid var(--exito); }
.toast--error{ border-left: 4px solid var(--error); }
.toast--info{ border-left: 4px solid var(--azul-electrico); }


/* ==========================================================================
   15. ANIMACIONES
   ========================================================================== */
@keyframes flotar{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
@keyframes fluir{ to{ stroke-dashoffset: -28; } }
@keyframes pulso{ 0%{ box-shadow: 0 0 0 0 rgba(37,211,102,0.55);} 70%{ box-shadow: 0 0 0 16px rgba(37,211,102,0);} 100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0);} }
@keyframes entrarToast{ from{ opacity:0; transform: translateX(30px);} to{ opacity:1; transform: translateX(0);} }
@keyframes girar{ to{ transform: rotate(360deg); } }
.girando{ animation: girar 0.9s linear infinite; }


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px){
  .grid-productos{ grid-template-columns: repeat(3,1fr); }
  .grid-categorias{ grid-template-columns: repeat(3,1fr); }
  .footer__grid{ grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; }
  .circuito{ max-width: 340px; }
  .tienda-layout, .carrito-layout, .checkout-layout{ grid-template-columns: 1fr; }
  .filtros{ position:relative; top:0; }
  .grid-beneficios{ grid-template-columns: repeat(2,1fr); }
  .carrusel-testimonios{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .buscador{ display:none; }
  .header__barra{ display:none; }
  .nav__toggle{ display:flex; }
  .nav{
    position:fixed; top: var(--header-h); left:0; right:0; bottom:0;
    background: var(--bg); flex-direction:column; align-items:flex-start; padding: var(--espacio-4);
    transform: translateX(-100%); transition: transform var(--t-medio); overflow:auto;
  }
  .nav.abierto{ transform: translateX(0); }
  .nav__lista{ flex-direction:column; align-items:flex-start; width:100%; gap:0; }
  .nav__item{ width:100%; }
  .submenu, .submenu--marcas{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; display:none; min-width:0; padding-left: var(--espacio-3); }
  .nav__item.abierto .submenu{ display:flex; flex-direction:column; }
  .grid-marcas{ grid-template-columns: repeat(2,1fr); }
  .grid-categorias{ grid-template-columns: repeat(2,1fr); }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px){
  .grid-productos{ grid-template-columns: repeat(2,1fr); }
  .grid-beneficios{ grid-template-columns: 1fr; }
  .hero{ padding-top: calc(var(--header-h) + 40px); }
  .banner-promo{ flex-direction:column; text-align:center; }
  .fila-carrito{ grid-template-columns: 70px 1fr; grid-template-areas: "img nombre" "img acciones"; }
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__bottom{ flex-direction:column; text-align:center; }
}

@media (max-width: 420px){
  .grid-productos, .grid-categorias, .grid-marcas{ grid-template-columns: repeat(2,1fr); }
  .contenedor{ padding: 0 var(--espacio-3); }
}