:root {
  --tmx-blue: #1450e6;
  --tmx-blue-dark: #0c2c9e;
  --tmx-blue-darker: #081f78;
  --tmx-yellow: #ffc82c;
  --tmx-yellow-dark: #f5a800;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

[x-cloak] { display: none !important; }

.animate-marquee { animation: marquee 30s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }

/* ===== SECTION BACKGROUNDS ===== */
.section-blue { background: linear-gradient(135deg, #eef2ff 0%, #dbeafe 50%, #e0e7ff 100%); }
.section-yellow { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fff7d6 100%); }
.section-dark { background: linear-gradient(135deg, #081f78 0%, #0c2c9e 50%, #1450e6 100%); color: #fff; }
.section-mixed { background: linear-gradient(160deg, #081f78 0%, #0c2c9e 40%, #1450e6 70%, #ffc82c 100%); color: #fff; }

/* ===== HERO GRADIENT ===== */
.hero-gradient {
  background: linear-gradient(160deg, #081f78 0%, #0c2c9e 30%, #1450e6 60%, #1a5ef0 100%);
  position: relative;
  overflow: hidden;
}
.hero-gradient::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,200,44,0.15) 0%, transparent 70%);
  border-radius: 50%;
}
.hero-gradient::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  border-radius: 50%;
}

/* ===== CARD HOVER EFFECTS ===== */
.card-glow:hover {
  box-shadow: 0 0 30px rgba(20, 80, 230, 0.12), 0 4px 20px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}
.card-yellow-glow:hover {
  box-shadow: 0 0 30px rgba(255, 200, 44, 0.15), 0 4px 20px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

/* ===== GRADIENT BORDERS ===== */
.border-gradient-blue {
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.border-gradient-blue::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #1450e6, #ffc82c);
  z-index: -1;
}

/* ===== COLORED SECTION HEADERS ===== */
.section-header-blue {
  background: linear-gradient(135deg, #1450e6, #0c2c9e);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.section-header-yellow {
  background: linear-gradient(135deg, #ffc82c, #f5a800);
  color: #081f78;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ===== RETENCION CARDS ===== */
.retencion-card {
  border-left: 4px solid #1450e6;
  background: linear-gradient(90deg, #f0f4ff 0%, #fff 15%);
}
.retencion-card:nth-child(even) {
  border-left-color: #ffc82c;
  background: linear-gradient(90deg, #fffbeb 0%, #fff 15%);
}

/* ===== STICKY TABS ===== */
#complemento-tabs .tab-active {
  background: linear-gradient(135deg, #1450e6, #0c2c9e);
  color: #fff;
  box-shadow: 0 2px 12px rgba(20, 80, 230, 0.3);
}

/* ===== BADGE PILL SHINE ===== */
.badge-shine {
  background: linear-gradient(135deg, #1450e6, #1a5ef0);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.badge-shine::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  animation: badge-shine 3s ease-in-out infinite;
}
@keyframes badge-shine { 0% { left: -100%; } 100% { left: 100%; } }

/* ===== CTA SECTION ===== */
.cta-gradient {
  background: linear-gradient(135deg, #081f78, #0c2c9e 40%, #1450e6 70%, #1a5ef0);
  position: relative;
  overflow: hidden;
}
.cta-gradient::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,200,44,0.2) 0%, transparent 70%);
  border-radius: 50%;
}

/* ===== SCROLLBAR ===== */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== ANIMATIONS ===== */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }