/* ============================================================
   TRIADE Next — Design System (paleta futurista neón)
   Híbrido: secciones inmersivas oscuras + catálogo claro, acentos neón.
   Se conservan los nombres de clase (tr-*) — el "gold" legacy ahora es neón.
   ============================================================ */

:root {
  /* ---- Brand core (nueva paleta del cliente) ---- */
  --tr-deep:        #0A1A2F;   /* Azul Profundo */
  --tr-carbon:      #0B0F19;   /* Negro Carbón (fondo más oscuro) */
  --tr-elevated:    #102A4D;   /* superficie elevada sobre oscuro */
  --tr-line:        #16304F;   /* bordes sutiles sobre oscuro */

  --tr-blue:        #0D47FF;   /* Azul Eléctrico — acento primario */
  --tr-cyan:        #00B8FF;   /* Cian — acento secundario */
  --tr-teal:        #00D4B0;   /* Verde Tecno — acento terciario */
  --tr-ice:         #E6F1FF;   /* Gris Hielo — texto sobre oscuro */

  /* Alias legacy (markup viejo) -> neón */
  --tr-navy:        #0A1A2F;
  --tr-navy-soft:   #102A4D;
  --tr-gold:        #00B8FF;   /* el "gold" ahora es cian */
  --tr-gold-bright: #00D4B0;
  --tr-gold-deep:   #0D47FF;

  /* ---- Neutros ---- */
  --tr-white:       #FFFFFF;
  --tr-black:       #0B0F19;
  --tr-gray:        #F3F6FC;   /* fondo claro de secciones (tinte frío) */
  --tr-gray-200:    #DCE6F5;
  --tr-gray-400:    #93A3BC;
  --tr-gray-600:    #51607A;

  /* ---- Texto ---- */
  --tr-text:        #0A1A2F;   /* texto sobre claro */
  --tr-text-soft:   #33425C;
  --tr-text-muted:  #6B7A93;
  --tr-text-inv:    #E6F1FF;   /* texto sobre oscuro */
  --tr-text-inv-soft:#9FB6D6;

  /* ---- Disponibilidad ---- */
  --tr-disponible:   #00D4B0;  /* verde tecno */
  --tr-bajo-pedido:  #00B8FF;  /* cian */
  --tr-proximamente: #0D47FF;  /* azul eléctrico */
  --tr-agotado:      #FF3B5C;  /* rojo neón */

  /* ---- Status ---- */
  --tr-success: #00D4B0;
  --tr-warning: #FFB020;
  --tr-danger:  #FF3B5C;

  /* ---- Sombras + glows neón ---- */
  --tr-shadow-sm:  0 1px 2px rgba(10,26,47,.06), 0 1px 3px rgba(10,26,47,.10);
  --tr-shadow-md:  0 6px 18px rgba(10,26,47,.10), 0 2px 6px rgba(10,26,47,.06);
  --tr-shadow-lg:  0 18px 44px rgba(10,26,47,.14), 0 6px 14px rgba(10,26,47,.08);
  --tr-glow-blue:  0 0 0 1px rgba(13,71,255,.35), 0 8px 28px rgba(13,71,255,.35);
  --tr-glow-cyan:  0 0 0 1px rgba(0,184,255,.35), 0 8px 28px rgba(0,184,255,.35);

  /* ---- Radios ---- */
  --tr-radius:     14px;
  --tr-radius-lg:  20px;
  --tr-radius-sm:  10px;

  /* ---- Tipografía ---- */
  --tr-font-display: 'Montserrat', system-ui, sans-serif;
  --tr-font-body:    'Montserrat', system-ui, -apple-system, sans-serif;
}

/* ---------- Base ---------- */
.tr-font-display { font-family: var(--tr-font-display); }
.tr-font-body    { font-family: var(--tr-font-body); }

body.tr-body {
  font-family: var(--tr-font-body);
  color: var(--tr-text);
  background: var(--tr-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Headings ---------- */
.tr-heading {
  font-family: var(--tr-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.tr-eyebrow {
  font-family: var(--tr-font-body);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--tr-cyan);
}
.tr-text-gold { color: var(--tr-cyan); }     /* legacy alias */
.tr-text-cyan { color: var(--tr-cyan); }
.tr-text-blue { color: var(--tr-blue); }

/* Texto con gradiente neón en flujo (para palabras destacadas en hero) */
.tr-text-neon {
  background: linear-gradient(90deg, var(--tr-blue), var(--tr-cyan) 35%, var(--tr-teal) 55%, var(--tr-cyan) 75%, var(--tr-blue));
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: tr-neon-flow 7s linear infinite;
}
@keyframes tr-neon-flow { to { background-position: 250% 0; } }

.tr-gold-rule { /* línea neón bajo títulos */
  width: 56px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--tr-blue), var(--tr-cyan));
  box-shadow: 0 0 12px rgba(0,184,255,.6);
}

/* ---------- Botones ---------- */
.tr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--tr-font-body); font-weight: 600; font-size: .95rem;
  padding: .72rem 1.4rem; border-radius: var(--tr-radius-sm);
  cursor: pointer; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  text-decoration: none; line-height: 1; white-space: nowrap;
}
.tr-btn:active { transform: translateY(1px); }

.tr-btn-primary {
  background: linear-gradient(120deg, var(--tr-blue), var(--tr-cyan));
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(13,71,255,.30);
}
.tr-btn-primary:hover {
  background: linear-gradient(120deg, var(--tr-blue), var(--tr-teal));
  box-shadow: var(--tr-glow-cyan); transform: translateY(-2px);
}

.tr-btn-navy {
  background: var(--tr-deep); color: var(--tr-ice);
  box-shadow: var(--tr-shadow-sm); border-color: var(--tr-line);
}
.tr-btn-navy:hover { background: var(--tr-elevated); transform: translateY(-2px); box-shadow: var(--tr-glow-blue); }

.tr-btn-outline {
  background: transparent; color: var(--tr-blue);
  border-color: var(--tr-gray-200);
}
.tr-btn-outline:hover { border-color: var(--tr-cyan); color: var(--tr-cyan); box-shadow: var(--tr-glow-cyan); }

.tr-btn-ghost { background: transparent; color: var(--tr-text-soft); }
.tr-btn-ghost:hover { color: var(--tr-blue); background: var(--tr-gray); }

.tr-btn[disabled], .tr-btn.is-disabled {
  opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none;
}

/* ---------- Cards ---------- */
.tr-card {
  background: var(--tr-white);
  border: 1px solid var(--tr-gray-200);
  border-radius: var(--tr-radius);
  box-shadow: var(--tr-shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow: hidden;
}
.tr-card:hover { transform: translateY(-4px); box-shadow: var(--tr-glow-cyan); border-color: rgba(0,184,255,.45); }

/* ---------- Badges de disponibilidad ---------- */
.tr-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--tr-font-body); font-weight: 600; font-size: .72rem;
  letter-spacing: .02em; padding: .28rem .6rem; border-radius: 999px;
  line-height: 1; border: 1px solid transparent;
}
.tr-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }

.tr-badge-disponible   { color: #03B294; background: rgba(0,212,176,.12); border-color: rgba(0,212,176,.32); }
.tr-badge-bajo_pedido  { color: #0093D6; background: rgba(0,184,255,.12); border-color: rgba(0,184,255,.32); }
.tr-badge-proximamente { color: var(--tr-blue); background: rgba(13,71,255,.10); border-color: rgba(13,71,255,.30); }
.tr-badge-agotado      { color: var(--tr-agotado); background: rgba(255,59,92,.10); border-color: rgba(255,59,92,.30); }

/* ---------- Skeleton loaders ---------- */
.tr-skeleton {
  position: relative; overflow: hidden; background: var(--tr-gray-200); border-radius: var(--tr-radius-sm);
}
.tr-skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: tr-shimmer 1.4s infinite;
}
@keyframes tr-shimmer { 100% { transform: translateX(100%); } }

/* ---------- Microanimaciones ---------- */
@keyframes tr-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.tr-fade-up { animation: tr-fade-up .6s ease both; }
.tr-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.tr-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Superficies oscuras (hero/nav/footer) ---------- */
.tr-container { max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }
.tr-bg-navy { background: var(--tr-carbon); color: var(--tr-text-inv); }
.tr-bg-gray { background: var(--tr-gray); }
.tr-surface-dark {
  background:
    radial-gradient(1200px 500px at 75% -10%, rgba(13,71,255,.22), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(0,184,255,.16), transparent 60%),
    linear-gradient(160deg, #0B0F19 0%, #0A1A2F 60%, #0B1730 100%);
  color: var(--tr-text-inv);
}

/* ---------- Texto utilidades ---------- */
.tr-price { font-family: var(--tr-font-body); font-weight: 700; color: var(--tr-deep); }
.tr-price-old { color: var(--tr-text-muted); text-decoration: line-through; font-weight: 500; }
.tr-link-gold { color: var(--tr-cyan); text-decoration: none; font-weight: 600; }
.tr-link-gold:hover { color: var(--tr-blue); }

/* ============================================================
   ANIMACIONES AVANZADAS
   ============================================================ */

/* Scroll-reveal (mejor easing) + soporte stagger por índice */
.tr-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.tr-reveal.is-visible { opacity: 1; transform: none; }

/* Media de card: zoom suave + barrido de brillo (shine) en hover */
.tr-media { position: relative; overflow: hidden; }
.tr-media img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tr-media:hover img { transform: scale(1.07); }
.tr-media::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg); pointer-events: none; opacity: 0; z-index: 2;
}
.tr-media:hover::after { animation: tr-shine .9s ease; }
@keyframes tr-shine { 0% { left: -80%; opacity: 0; } 18% { opacity: 1; } 100% { left: 140%; opacity: 0; } }

/* Canvas de partículas (hero) */
.tr-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.tr-has-particles { position: relative; }
.tr-has-particles > .tr-container { position: relative; z-index: 1; }

/* Botón primario: glow respirando muy sutil */
@keyframes tr-pulse-glow { 0%,100% { box-shadow: 0 6px 20px rgba(13,71,255,.30); } 50% { box-shadow: 0 6px 26px rgba(0,184,255,.45); } }
.tr-btn-pulse { animation: tr-pulse-glow 2.6s ease-in-out infinite; }

/* Respeto a prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .tr-text-neon { animation: none; }
  .tr-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .tr-fade-up { animation: none; }
  .tr-media img, .tr-media::after { transition: none; animation: none !important; }
  .tr-btn-pulse { animation: none; }
  .tr-particles { display: none; }
}