/* ============================================================
   TEMA CYBERPUNK UNISSEX — Mari Finanças
   Fundo animado (ciano / magenta / violeta) + variáveis escuras.
   Carregado por último em cada página; para desativar, remova o <link>.
   ============================================================ */
:root {
  --rose-gold: #00E5FF;
  --rose-gold-light: #FF3DDB;
  --rose-gold-dark: #00B8CC;
  --soft-pink: #1B1038;
  --blush: #0D0720;
  --nude: #150C2E;
  --cream: #07040F;
  --warm-white: #0B0618;
  --warm-brown: #F2F0FF;
  --warm-brown-light: #B4AEE0;
  --text-dark: #EDEBFF;
  --text-muted: #B4AEE0;
  --white: rgba(18, 11, 42, 0.78);
  --gradient-rose: linear-gradient(135deg, #00E5FF 0%, #FF3DDB 100%);
  --shadow-soft: 0 15px 40px -10px rgba(0, 229, 255, 0.22);
  --shadow-rose: 0 10px 30px -5px rgba(255, 61, 219, 0.35);
  --border-light: 1px solid rgba(0, 229, 255, 0.28);
  --neon-cyan: #00E5FF;
  --neon-magenta: #FF3DDB;
  --neon-violet: #8B5CFF;
}

html { background: #07040F; }

body {
  background: transparent !important;
  color: var(--text-dark);
  position: relative;
  min-height: 100vh;
}

/* camada animada: gradiente que se move + manchas de neon */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60vmax 60vmax at 15% 20%, rgba(0, 229, 255, 0.30), transparent 60%),
    radial-gradient(55vmax 55vmax at 85% 15%, rgba(255, 61, 219, 0.28), transparent 60%),
    radial-gradient(60vmax 60vmax at 70% 90%, rgba(139, 92, 255, 0.32), transparent 60%),
    linear-gradient(-45deg, #05020D, #160536, #071A4A, #2A0A44, #05020D);
  background-size: 100% 100%, 100% 100%, 100% 100%, 400% 400%;
  animation: cyberGradient 22s ease-in-out infinite, cyberBlobs 28s ease-in-out infinite alternate;
}

/* grade neon + linhas de varredura */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(0, 229, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 61, 219, 0.06) 1px, transparent 1px);
  background-size: 100% 3px, 60px 60px, 60px 60px;
  animation: cyberGrid 14s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 85%);
}

@keyframes cyberGradient {
  0%   { background-position: 0 0, 0 0, 0 0, 0% 50%; }
  50%  { background-position: 0 0, 0 0, 0 0, 100% 50%; }
  100% { background-position: 0 0, 0 0, 0 0, 0% 50%; }
}
@keyframes cyberBlobs {
  0%   { filter: hue-rotate(0deg) saturate(1); transform: scale(1); }
  50%  { filter: hue-rotate(25deg) saturate(1.25); transform: scale(1.06); }
  100% { filter: hue-rotate(-20deg) saturate(1.1); transform: scale(1.02); }
}
@keyframes cyberGrid {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 0 60px, 60px 0; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
}

/* títulos e destaques */
h1, h2, h3 { color: var(--warm-brown); }
.text-rose, h1 em, h2 em {
  background: linear-gradient(90deg, #00E5FF, #FF3DDB);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}

/* marca em texto no cabeçalho */
.nav-brand {
  font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: 0.18em;
  font-size: 1.35rem; color: #F2F0FF; text-shadow: 0 0 14px rgba(0, 229, 255, 0.55);
}
.nav-brand span {
  background: linear-gradient(90deg, #00E5FF, #FF3DDB);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; text-shadow: none;
}
.nav { background: rgba(7, 4, 15, 0.72) !important; border-bottom: 1px solid rgba(0, 229, 255, 0.3) !important; }

/* cartões em vidro escuro com borda neon */
.card, .escada-item, .login-container, .box, .pacote, .plano {
  background: rgba(14, 9, 34, 0.72) !important;
  border: 1px solid rgba(0, 229, 255, 0.25) !important;
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.10), inset 0 0 30px rgba(139, 92, 255, 0.06) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--text-dark);
}

/* campos de formulário */
input, select, textarea {
  background: rgba(7, 4, 15, 0.7) !important; color: #EDEBFF !important;
  border: 1px solid rgba(0, 229, 255, 0.35) !important;
}
input::placeholder, textarea::placeholder { color: #8f89c0 !important; }
input:focus, select:focus, textarea:focus {
  outline: none !important; border-color: #FF3DDB !important;
  box-shadow: 0 0 0 3px rgba(255, 61, 219, 0.25), 0 0 16px rgba(0, 229, 255, 0.3) !important;
}

/* botões principais: gradiente neon com texto escuro legível */
.btn-primary, .btn-login, .btn-submit, button[type=submit] {
  background: linear-gradient(135deg, #00E5FF, #FF3DDB) !important; color: #0A0614 !important;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.45) !important; border: 0 !important;
}
a { text-decoration-color: rgba(0, 229, 255, 0.5); }

/* rodapé e banner de chamada */
footer { background: rgba(5, 2, 13, 0.85) !important; border-top: 2px solid #00E5FF !important; color: #B4AEE0 !important;
  box-shadow: 0 -8px 30px rgba(0, 229, 255, 0.18); }
footer a { color: #FF3DDB !important; }
.cta { background: linear-gradient(135deg, rgba(0, 229, 255, 0.16), rgba(139, 92, 255, 0.28), rgba(255, 61, 219, 0.22)) !important;
  border: 1px solid rgba(0, 229, 255, 0.45) !important; box-shadow: 0 0 40px rgba(139, 92, 255, 0.35) !important; color: #EDEBFF !important; }
.cta h2, .cta p { color: #F2F0FF !important; }
.cta .btn-primary, .cta a { color: #0A0614 !important; background: linear-gradient(135deg, #00E5FF, #FF3DDB) !important; border: 0 !important; }

/* botão "Instalar app" (PWA) */
.pwa-fab, .pwa-btn, .pwa-sheet .fechar {
  background: linear-gradient(135deg, #00E5FF, #FF3DDB) !important; color: #0A0614 !important;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.5) !important;
}
.pwa-modal { background: rgba(5, 2, 13, 0.75) !important; }
.pwa-sheet { background: #120B2A !important; color: #EDEBFF !important; border: 1px solid rgba(0, 229, 255, 0.35); }
.pwa-sheet h3 { color: #F2F0FF !important; } .pwa-sheet ol { color: #B4AEE0 !important; }