/* =========================================================
   🎨 VARIABLES GLOBALES
========================================================= */
:root {
  --brand: #1F2D54;
  --brand-2: #0e1a3a;
  --accent: #06B6D4;
  --text: #222;
  --muted: #6b7280;
  --bg: #f5f7fb;
  --gold: rgb(252,152,3);
  --gold-700: rgb(210,127,3);

  /* Extras visuales */
  --glass-bg: rgba(255,255,255,0.08);
  --glass-stroke: rgba(255,255,255,0.18);
  --text-subtle: rgba(255,255,255,0.85);
  --shadow-1: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-2: 0 20px 50px rgba(0,0,0,0.35);
  --ring: 0 0 0 3px rgba(252,165,3,0.25);
}

/* =========================================================
   ⚙️ RESET Y BASE
========================================================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, Segoe UI, Roboto, Arial;
  color: var(--text);
  background: var(--bg);
  scroll-behavior: smooth;
}

body { padding-top: 90px; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 800;
}

button, input, select, textarea {
  font-family: inherit;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Utilidad / Accesibilidad */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.titulo-seccion-line {
  display: block;
  width: 56px; height: 4px;
  background: linear-gradient(90deg, var(--gold), rgba(252,152,3,0));
  border-radius: 4px;
  margin: 10px auto 30px;
}

/* =========================================================
   ✨ BOTONES PREMIUM (Efecto Glow & Shimmer)
========================================================= */
.btn-premium {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  isolation: isolate;
}

.btn-premium::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-25deg);
  animation: shimmer-effect 3s infinite;
  pointer-events: none;
}

@keyframes shimmer-effect {
  0%   { left: -100%; }
  100% { left: 150%; }
}

.btn-premium:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
  box-shadow: 0 12px 30px rgba(252, 165, 3, 0.45);
}

.btn-premium:active {
  transform: translateY(-1px);
}