/* ============================================================
   Mundo Táctico — estilos compartidos (animaciones, glow,
   scrollbars, capas tonales). Se carga en todas las páginas.
   ============================================================ */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Iconos Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Ocultar scrollbar (sliders horizontales) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Scrollbar táctica global */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0c0f0f; }
::-webkit-scrollbar-thumb { background: #444748; }
::-webkit-scrollbar-thumb:hover { background: #FF6600; }

/* Capas tonales (profundidad sin sombras) */
.layer-0 { background-color: #121414; }
.layer-1 { background-color: #1e2020; }
.layer-2 { background-color: #282a2b; border: 1px solid #444748; }

/* Botón primario táctico + glow naranja */
.btn-hazard {
  background-color: #FF6600;
  color: #121414;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-hazard:hover { background-color: #e05a00; box-shadow: 0 0 15px rgba(255, 102, 0, 0.4); }
.hazard-glow:hover { box-shadow: 0 0 15px rgba(255, 102, 0, 0.35); }

/* Marquee de aliados */
@keyframes mt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.animate-marquee { animation: mt-marquee 30s linear infinite; }

/* Máscara de desvanecido lateral (reseñas / sliders) */
.mask-fade {
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

/* Aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Anillo de selección activo (color/talla) */
.active-ring { outline: 2px solid #FF6600; outline-offset: 2px; }

/* Toast / notificación */
#mt-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120%);
  background: #FF6600; color: #121414; font-family: 'Archivo Narrow', sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 14px 24px; z-index: 200; display: flex; align-items: center; gap: 10px;
  transition: transform .35s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 0 24px rgba(255,102,0,.4);
}
#mt-toast.show { transform: translateX(-50%) translateY(0); }

/* Drawer del carrito */
.mt-drawer-panel { transition: transform .35s cubic-bezier(0.4,0,0.2,1); }

/* ============================================================
   HERO — slider + efecto "señal interferida"
   ============================================================ */
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1s ease;
  will-change: opacity, transform, filter;
}
.hero-slide.active { opacity: 1; }

/* Corte de señal / glitch al cambiar de imagen */
@keyframes mt-glitch {
  0%   { clip-path: inset(0 0 0 0);      transform: translateX(0);    filter: grayscale(1) brightness(.5); }
  12%  { clip-path: inset(18% 0 62% 0);  transform: translateX(-10px); filter: grayscale(.2) brightness(.7) saturate(1.6) hue-rotate(-12deg); }
  24%  { clip-path: inset(66% 0 10% 0);  transform: translateX(8px);   filter: grayscale(1) brightness(.55) contrast(1.4); }
  36%  { clip-path: inset(40% 0 38% 0);  transform: translateX(-5px);  filter: grayscale(.4) brightness(.8) hue-rotate(14deg); }
  48%  { clip-path: inset(8% 0 80% 0);   transform: translateX(4px);   filter: grayscale(1) brightness(.5); }
  60%  { clip-path: inset(0 0 0 0);      transform: translateX(0);     filter: grayscale(1) brightness(.5); }
  100% { clip-path: inset(0 0 0 0);      transform: translateX(0);     filter: grayscale(1) brightness(.5); }
}
.hero-slide.glitch.active { animation: mt-glitch .55s steps(2, end) both; }

/* Líneas de barrido (scanlines) */
.hero-scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,.28) 0, rgba(0,0,0,.28) 1px, transparent 2px, transparent 3px);
  opacity: .35; animation: mt-scan 6s linear infinite;
}
@keyframes mt-scan { from { background-position: 0 0; } to { background-position: 0 6px; } }

/* Ruido / grano animado */
.hero-noise, .hero-static {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}
.hero-noise { opacity: .05; animation: mt-noise .5s steps(3) infinite; }
@keyframes mt-noise {
  0% { transform: translate(0,0); } 33% { transform: translate(-4%,3%); }
  66% { transform: translate(3%,-3%); } 100% { transform: translate(0,0); }
}
/* Ráfaga de estática (al cambiar de señal) */
.hero-static { z-index: 4; opacity: 0; }
.hero-static.burst { animation: mt-static .55s steps(2, end); }
@keyframes mt-static { 0% { opacity:0; } 15% { opacity:.4; } 30% { opacity:.06; } 50% { opacity:.32; } 70% { opacity:.04; } 100% { opacity:0; } }

/* HUD de señal */
.hero-hud-dot { animation: mt-blink 1.1s steps(1) infinite; }
@keyframes mt-blink { 50% { opacity: .15; } }

@media (prefers-reduced-motion: reduce) {
  .hero-scanlines, .hero-noise, .hero-slide.glitch.active, .hero-hud-dot { animation: none; }
}