/* ============================================================
   site-v2.css — capa retrofuturista (versión 2)
   SOLO añade layout/efectos/un componente. No cambia texto, orden,
   tipografía ni colores: todo sale de los tokens del sistema.
   Cargar DESPUÉS de site.css.
   ============================================================ */

/* ---- marco de instrumento (bezel de pantalla) ---- */
.frame {
  position: fixed; inset: 13px; z-index: 60; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--md-core-color-on-surface) 20%, transparent);
}
.frame__c { position: absolute; width: 13px; height: 13px; }
.frame__c::before, .frame__c::after { content: ""; position: absolute; background: var(--md-core-color-primary); }
.frame__c::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.frame__c::after  { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.frame__tl { top: -6px; left: -6px; }
.frame__tr { top: -6px; right: -6px; }
.frame__bl { bottom: -6px; left: -6px; }
.frame__br { bottom: -6px; right: -6px; }

/* ---- scanlines CRT ---- */
body.v2::before {
  content: ""; position: fixed; inset: 0; z-index: 55; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
     color-mix(in srgb, var(--md-core-color-on-surface) 7%, transparent) 0 1px,
     transparent 1px 4px);
  mix-blend-mode: multiply; opacity: 0.5;
}
/* ---- grano analógico animado ---- */
body.v2::after {
  content: ""; position: fixed; inset: 0; z-index: 56; pointer-events: none; opacity: 0.38;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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");
  animation: v2-grain 0.5s steps(3) infinite;
}
@keyframes v2-grain { 0% { transform: translate(0, 0); } 100% { transform: translate(-4px, 3px); } }

/* ---- HERO: campo .processing (componente del DS) + radar ---- */
.v2 .hero { position: relative; overflow: hidden; }
.v2 .hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -30vmax; right: -22vmax; width: 72vmax; height: 72vmax;
  background: repeating-radial-gradient(circle at center,
     transparent 0 40px,
     color-mix(in srgb, var(--md-core-color-primary) 13%, transparent) 40px 41px);
  -webkit-mask: radial-gradient(circle at center, #000, transparent 60%);
          mask: radial-gradient(circle at center, #000, transparent 60%);
}
.v2 .hero .wrap { position: relative; z-index: 1; }

/* ---- campo .processing del DS (limpio), con DERIVA orgánica ----
   Se conserva el componente tal cual (se veía mejor). Lo único que cambia
   es el MOVIMIENTO: en vez de blobs clavados a las esquinas que solo ciclan
   color, derivamos el campo completo con un ciclo largo, easing suave y
   dirección alternate → la atmósfera respira y se desplaza, sin ritmo
   mecánico. (La velocidad del ciclo de color se baja vía la API del
   randomizer en v2.html.) */
.hero__field {
  position: absolute; inset: -8%; z-index: 0; pointer-events: none;
  animation: hero-drift 32s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  will-change: transform;
}
.hero__field.processing { --proc-opacity: 0.32; --proc-grain: 0; --proc-blur: 90px; }
@keyframes hero-drift {
  0%   { transform: translate(0%, 0%)     scale(1.02) rotate(0deg); }
  50%  { transform: translate(-3.5%, 2.5%) scale(1.13) rotate(4.5deg); }
  100% { transform: translate(2.5%, -2%)   scale(1.06) rotate(-3.5deg); }
}

/* ---- glow del botón (sin blur en los textos) ---- */
.v2 .btn { box-shadow: 0 0 30px -6px color-mix(in srgb, var(--md-core-color-primary) 55%, transparent); }

/* ---- PRODUCTOS como módulo de panel (marco + esquinas) ---- */
.v2 .prod-grid { position: relative; border: 1px solid var(--md-core-color-outline-variant); }
.v2 .prod { padding-inline: clamp(1.3rem, 2.6vw, 2.2rem); }
@media (min-width: 820px) {
  .v2 .prod:nth-child(odd)  { padding-right: clamp(2rem, 4vw, 3.5rem); }
  .v2 .prod:nth-child(even) { padding-left: clamp(2rem, 4vw, 3.5rem); }
}
.v2 .prod-grid::before, .v2 .prod-grid::after {
  content: ""; position: absolute; width: 10px; height: 10px; z-index: 2;
}
.v2 .prod-grid::before { top: -5px; left: -5px; border-top: 1px solid var(--md-core-color-primary); border-left: 1px solid var(--md-core-color-primary); }
.v2 .prod-grid::after  { bottom: -5px; right: -5px; border-bottom: 1px solid var(--md-core-color-primary); border-right: 1px solid var(--md-core-color-primary); }

/* sello de la versión, sin texto nuevo: solo refuerza el carácter instrumento */
@media (prefers-reduced-motion: reduce) {
  body.v2::after,
  .hero__field, .hero__field::before, .hero__field::after { animation: none !important; }
}