/* ═══════════════════════════════════════════════════════════════════════════
   VIURAX Adaptive Engine v1 — Reglas por tier
   Este archivo consume las marcas puestas por viurax-adaptive.js:
     <html data-viurax-tier="low|mid|high|ultra">
     <html class="viurax-tier-low ...">
     <html data-viurax-net="fast|slow">
     <html data-viurax-input="touch|mouse">
     <html class="viurax-has-webgl2">

   Capas:
     1. Reglas universales (accesibilidad + reduced-motion)
     2. Reglas por tier (qué se muestra/oculta)
     3. Reglas por red (ahorro de datos)
     4. Reglas por input (touch vs mouse)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. UNIVERSALES ─────────────────────────────────────────────────────── */

/* Respetar a usuarios con preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Elementos marcados con data-adaptive-only: por defecto visibles */
[data-adaptive-only] { display: block; }

/* Elementos marcados con data-adaptive-hide: por defecto visibles */
[data-adaptive-hide] { display: block; }

/* ─── 2. TIER: LOW (gama baja — sin efectos) ────────────────────────────── */

html.viurax-tier-low [data-adaptive-heavy],
html.viurax-tier-low video[data-adaptive-video],
html.viurax-tier-low canvas[data-adaptive-3d],
html.viurax-tier-low [data-adaptive-3d],
html.viurax-tier-low .viurax-3d-canvas,
html.viurax-tier-low .viurax-particles,
html.viurax-tier-low .viurax-glow,
html.viurax-tier-low .viurax-blur {
  display: none !important;
}

/* Desactivar animaciones y transiciones pesadas */
html.viurax-tier-low *,
html.viurax-tier-low *::before,
html.viurax-tier-low *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 100ms !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Imágenes normales en lugar de retina/2x */
html.viurax-tier-low img[data-src-2x] {
  content: attr(src);
}

/* Fondo simple */
html.viurax-tier-low body {
  background-image: none !important;
  background-attachment: scroll !important;
}

/* ─── 3. TIER: MID (gama media — efectos sutiles) ──────────────────────── */

html.viurax-tier-mid [data-adaptive-heavy],
html.viurax-tier-mid video[data-adaptive-video],
html.viurax-tier-mid canvas[data-adaptive-3d],
html.viurax-tier-mid [data-adaptive-3d],
html.viurax-tier-mid .viurax-particles,
html.viurax-tier-mid .viurax-glow {
  display: none !important;
}

/* Animaciones reducidas (pero no eliminadas) */
html.viurax-tier-mid *,
html.viurax-tier-mid *::before,
html.viurax-tier-mid *::after {
  animation-duration: 800ms !important;
  transition-duration: 250ms !important;
}

html.viurax-tier-mid .viurax-blur {
  /* Reducir blur para performance */
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ─── 4. TIER: HIGH (gama alta — todo razonable) ───────────────────────── */

html.viurax-tier-high [data-adaptive-heavy] {
  display: none !important; /* video sí, pero heavy extras no */
}

/* Animaciones completas */
html.viurax-tier-high *,
html.viurax-tier-high *::before,
html.viurax-tier-high *::after {
  animation-duration: inherit;
  transition-duration: inherit;
}

/* ─── 5. TIER: ULTRA (desktop potente — todo activo) ───────────────────── */

html.viurax-tier-ultra [data-adaptive-heavy] {
  display: block !important;
}

html.viurax-tier-ultra.viurax-has-webgl2 canvas[data-adaptive-3d],
html.viurax-tier-ultra.viurax-has-webgl2 [data-adaptive-3d] {
  display: block !important;
}

html.viurax-tier-ultra video[data-adaptive-video] {
  display: block !important;
}

/* ─── 6. DATA-ATTRIBUTE CONTRACTS ──────────────────────────────────────── */

/* Solo mostrar en tiers específicos */
[data-adaptive-only="low"]   { display: none; }
[data-adaptive-only="mid"]   { display: none; }
[data-adaptive-only="high"]  { display: none; }
[data-adaptive-only="ultra"] { display: none; }
[data-adaptive-only="low-mid"]      { display: none; }
[data-adaptive-only="mid-high"]     { display: none; }
[data-adaptive-only="high-ultra"]   { display: none; }
[data-adaptive-only="mid-high-ultra"] { display: none; }

html.viurax-tier-low   [data-adaptive-only="low"],
html.viurax-tier-low   [data-adaptive-only="low-mid"] {
  display: block;
}
html.viurax-tier-mid   [data-adaptive-only="mid"],
html.viurax-tier-mid   [data-adaptive-only="low-mid"],
html.viurax-tier-mid   [data-adaptive-only="mid-high"],
html.viurax-tier-mid   [data-adaptive-only="mid-high-ultra"] {
  display: block;
}
html.viurax-tier-high  [data-adaptive-only="high"],
html.viurax-tier-high  [data-adaptive-only="mid-high"],
html.viurax-tier-high  [data-adaptive-only="high-ultra"],
html.viurax-tier-high  [data-adaptive-only="mid-high-ultra"] {
  display: block;
}
html.viurax-tier-ultra [data-adaptive-only="ultra"],
html.viurax-tier-ultra [data-adaptive-only="high-ultra"],
html.viurax-tier-ultra [data-adaptive-only="mid-high-ultra"] {
  display: block;
}

/* Ocultar en tiers específicos */
html.viurax-tier-low   [data-adaptive-hide~="low"]   { display: none !important; }
html.viurax-tier-mid   [data-adaptive-hide~="mid"]   { display: none !important; }
html.viurax-tier-high  [data-adaptive-hide~="high"]  { display: none !important; }
html.viurax-tier-ultra [data-adaptive-hide~="ultra"] { display: none !important; }

/* ─── 7. RED ───────────────────────────────────────────────────────────── */

html[data-viurax-net="slow"] [data-adaptive-heavy],
html[data-viurax-net="slow"] video[data-adaptive-video] {
  display: none !important;
}

/* Si ahorro de datos activo, eliminar imágenes background grandes */
html[data-viurax-net="slow"] [data-adaptive-bg-large] {
  background-image: none !important;
}

/* ─── 8. INPUT ─────────────────────────────────────────────────────────── */

/* Touch: mejorar targets (mínimo 44x44) */
html[data-viurax-input="touch"] button,
html[data-viurax-input="touch"] a[role="button"],
html[data-viurax-input="touch"] .btn {
  min-height: 44px;
  min-width: 44px;
}

/* Touch: sin hover-only */
html[data-viurax-input="touch"] [data-adaptive-hover-only] {
  opacity: 1 !important;
}

/* Mouse: efectos hover completos */
html[data-viurax-input="mouse"] [data-adaptive-hover-only] {
  opacity: 0;
  transition: opacity .2s;
}
html[data-viurax-input="mouse"] *:hover > [data-adaptive-hover-only],
html[data-viurax-input="mouse"] [data-adaptive-hover-only]:hover {
  opacity: 1;
}

/* ─── 9. UTILIDADES PARA JS ────────────────────────────────────────────── */

/* Tiers expuestos como utilidades para JS */
:root {
  --viurax-tier: attr(data-viurax-tier);
  --viurax-net:  attr(data-viurax-net);
}

/* Ocultar hasta que JS ponga el tier (evita FOUC) */
html:not([data-viurax-tier]) [data-adaptive-requires-tier] {
  visibility: hidden;
}
html[data-viurax-tier] [data-adaptive-requires-tier] {
  visibility: visible;
}

/* ─── 10. FIN ──────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   VIURAX ADAPTIVE V2 — Reglas adicionales (2026-10-25)
   Consume señales nuevas de viurax-adaptive-v2.js:
     data-viurax-color-scheme="dark|light"
     data-viurax-contrast="more|less|normal"
     data-viurax-orientation="portrait|landscape"
     data-viurax-save-data="true"
     data-viurax-reduced-motion="true"
     data-viurax-net="fast|slow"
     data-viurax-input="touch|mouse"
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. COLOR SCHEME ────────────────────────────────────────────────────── */

/* Dark mode nativo: si el SO pide dark, aplicar (solo si la página no lo definió) */
@media (prefers-color-scheme: dark) {
  html[data-viurax-color-scheme="dark"]:not([data-viurax-force-light]) {
    color-scheme: dark;
  }
  html[data-viurax-color-scheme="dark"]:not([data-viurax-force-light]) body {
    background-color: #05070d;
    color: #e8edf5;
  }
}

/* Light mode nativo */
@media (prefers-color-scheme: light) {
  html[data-viurax-color-scheme="light"]:not([data-viurax-force-dark]) {
    color-scheme: light;
  }
}

/* Force dark / force light (para overrides manuales) */
html[data-viurax-force-dark] body {
  background-color: #05070d !important;
  color: #e8edf5 !important;
}
html[data-viurax-force-light] body {
  background-color: #ffffff !important;
  color: #1a1f2e !important;
}

/* ─── 2. CONTRASTE ALTO (WCAG AAA) ──────────────────────────────────────── */

html[data-viurax-contrast="more"] {
  --viurax-text-secondary: #e8edf5;
  --viurax-border-color: #a855f7;
  --viurax-bg-card: #0a0e1a;
}
html[data-viurax-contrast="more"] body {
  filter: contrast(1.15);
}
html[data-viurax-contrast="more"] a:not(.btn):not(.nav-item) {
  text-decoration: underline !important;
}
html[data-viurax-contrast="more"] button:focus-visible,
html[data-viurax-contrast="more"] a:focus-visible,
html[data-viurax-contrast="more"] input:focus-visible {
  outline: 3px solid #a855f7 !important;
  outline-offset: 3px !important;
}

/* Contraste bajo: el usuario lo pidió */
html[data-viurax-contrast="less"] body {
  filter: contrast(0.92);
}

/* ─── 3. ORIENTACIÓN (portrait / landscape) ─────────────────────────────── */

/* Portrait (mobile vertical): reducir padding vertical, fuentes más chicas */
html[data-viurax-orientation="portrait"] .hero-title,
html[data-viurax-orientation="portrait"] h1 {
  font-size: clamp(1.6rem, 6vw, 2.6rem);
}
html[data-viurax-orientation="portrait"] .hero {
  min-height: 70vh;
  padding: 40px 16px;
}
html[data-viurax-orientation="portrait"] .landing-grid {
  grid-template-columns: 1fr;
}

/* Landscape (mobile horizontal): aprovechar ancho, reducir altura */
html[data-viurax-orientation="landscape"] .hero {
  min-height: 60vh;
}
html[data-viurax-orientation="landscape"] .landing-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ─── 4. SAVE DATA (usuario activó ahorro de datos) ─────────────────────── */

html[data-viurax-save-data="true"] video,
html[data-viurax-save-data="true"] iframe,
html[data-viurax-save-data="true"] [data-adaptive-heavy],
html[data-viurax-save-data="true"] [data-adaptive-3d],
html[data-viurax-save-data="true"] .viurax-3d-canvas,
html[data-viurax-save-data="true"] .viurax-particles,
html[data-viurax-save-data="true"] .viurax-glow {
  display: none !important;
}
html[data-viurax-save-data="true"] img {
  image-rendering: auto;
}
html[data-viurax-save-data="true"] .hero {
  background-image: none !important;
  background: linear-gradient(135deg, #05070d, #0a0e1a) !important;
}

/* ─── 5. RED LENTA (net=slow) ───────────────────────────────────────────── */

html[data-viurax-net="slow"] video,
html[data-viurax-net="slow"] [data-adaptive-video] {
  display: none !important;
}
html[data-viurax-net="slow"] img[loading="lazy"] {
  filter: blur(2px);
  transition: filter 400ms ease;
}
html[data-viurax-net="slow"] img[loading="lazy"].viurax-loaded {
  filter: blur(0);
}

/* ─── 6. REDUCED MOTION (usuario lo pidió) ──────────────────────────────── */

html[data-viurax-reduced-motion="true"] *,
html[data-viurax-reduced-motion="true"] *::before,
html[data-viurax-reduced-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ─── 7. TOUCH vs MOUSE ─────────────────────────────────────────────────── */

/* Touch: targets más grandes */
html[data-viurax-input="touch"] button,
html[data-viurax-input="touch"] a.btn,
html[data-viurax-input="touch"] .nav-item {
  min-height: 44px;
  min-width: 44px;
}
html[data-viurax-input="touch"] body {
  -webkit-tap-highlight-color: rgba(168, 85, 247, 0.2);
}

/* Mouse: hovers más expresivos */
html[data-viurax-input="mouse"] button:hover,
html[data-viurax-input="mouse"] a.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(108, 43, 217, 0.4);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* ─── 8. TIER ULTRA (mejoras adicionales) ───────────────────────────────── */

html.viurax-tier-ultra .viurax-blur,
html.viurax-tier-ultra [data-adaptive-heavy] {
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
html.viurax-tier-ultra .hero-title,
html.viurax-tier-ultra h1 {
  text-shadow: 0 4px 32px rgba(168, 85, 247, 0.35);
}
html.viurax-tier-ultra video,
html.viurax-tier-ultra [data-adaptive-video] {
  display: block !important;
}

/* ─── 9. TIER HIGH (equilibrio) ─────────────────────────────────────────── */

html.viurax-tier-high .viurax-blur,
html.viurax-tier-high [data-adaptive-heavy] {
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

/* ─── FIN VIURAX ADAPTIVE V2 ────────────────────────────────────────────── */