/* CUOTAPAGA - Sistema visual compartido: glass, degradés, luces dinámicas. */
:root {
  --bg: #06080d;
  --bg2: #0a0e17;
  --glass: rgba(255,255,255,.06);
  --glass-borde: rgba(255,255,255,.14);
  --glass-hover: rgba(255,255,255,.10);
  --texto: #f2f5f7;
  --muted: #99a3b0;
  --verde: #2af0a0;
  --verde2: #17d492;
  --violeta: #7c6dfa;
  --rosa: #ff6bd6;
  --err: #ff6b6b;
  --radio: 18px;
}

* { box-sizing: border-box; }

/* Tema oscuro nativo: los desplegables (persianas) de los <select> se
   renderizan oscuros en vez de blanco sobre blanco ilegible. */
:root { color-scheme: dark; }
select option, select optgroup {
  background-color: #101823 !important;
  color: #f2f5f7 !important;
}

.cp-fondo {
  position: relative;
  min-height: 100vh;
  background: var(--bg);
  color: var(--texto);
  overflow-x: hidden;
  font-family: 'Poppins', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Luces dinámicas: blobs radiales que se mueven lento en loop, puro CSS. */
.cp-luces { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cp-luces::before, .cp-luces::after, .cp-luces .luz3 {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55;
}
.cp-luces::before {
  width: 620px; height: 620px; left: -160px; top: -120px;
  background: radial-gradient(circle at 30% 30%, var(--verde), transparent 70%);
  animation: flotar1 16s ease-in-out infinite alternate;
}
.cp-luces::after {
  width: 560px; height: 560px; right: -140px; top: 10%;
  background: radial-gradient(circle at 60% 40%, var(--violeta), transparent 70%);
  animation: flotar2 20s ease-in-out infinite alternate;
}
.cp-luces .luz3 {
  width: 500px; height: 500px; left: 30%; bottom: -220px;
  background: radial-gradient(circle at 50% 50%, var(--rosa), transparent 70%);
  animation: flotar3 24s ease-in-out infinite alternate;
  opacity: .35;
}
@keyframes flotar1 { from { transform: translate(0,0) scale(1); } to { transform: translate(80px,60px) scale(1.15); } }
@keyframes flotar2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-70px,40px) scale(1.1); } }
@keyframes flotar3 { from { transform: translate(0,0) scale(1); } to { transform: translate(40px,-50px) scale(1.2); } }

.cp-contenido { position: relative; z-index: 1; }

/* Vidrio */
.cp-glass {
  background: var(--glass);
  border: 1px solid var(--glass-borde);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: var(--radio);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

.cp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer; border: 1px solid var(--glass-borde);
  background: var(--glass); color: var(--texto);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cp-btn:hover { transform: translateY(-2px); background: var(--glass-hover); border-color: rgba(255,255,255,.28); }
.cp-btn:active { transform: translateY(0); }

.cp-btn-primario {
  background: linear-gradient(135deg, var(--verde), var(--verde2));
  color: #04150e; border: none;
  box-shadow: 0 8px 28px rgba(42,240,160,.35);
}
.cp-btn-primario:hover { box-shadow: 0 12px 36px rgba(42,240,160,.5); transform: translateY(-3px); }

.cp-btn-fantasma { background: transparent; border: 1px solid var(--glass-borde); }
.cp-btn-fantasma:hover { background: var(--glass); }

.cp-titulo-mega {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  background: linear-gradient(120deg, #ffffff 20%, var(--verde) 55%, var(--violeta) 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.cp-degrade-texto {
  background: linear-gradient(120deg, var(--verde), var(--violeta));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.cp-input {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--glass-borde); background: rgba(255,255,255,.04);
  color: var(--texto); font-size: 1rem; transition: border-color .2s, background .2s;
}
.cp-input:focus { outline: none; border-color: var(--verde); background: rgba(255,255,255,.07); }
.cp-input::placeholder { color: var(--muted); }

.cp-label { display: block; margin: 16px 0 8px; font-size: .88rem; color: var(--muted); font-weight: 600; }

.cp-err { background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.4); color: #ffb3b3; padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; font-size: .9rem; }
.cp-ok { background: rgba(42,240,160,.12); border: 1px solid rgba(42,240,160,.4); color: #b6ffe1; padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; font-size: .9rem; }

.cp-muted { color: var(--muted); }