:root {
  --primary: #0a5ad4;
  --primary-dark: #063a8a;
  --text-dark: #ffffff;
  --text-soft: #dddddd;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Segoe UI", sans-serif; }

body { width: 100%; height: 100%; overflow: hidden; background: #000; }

/* SLIDESHOW */
.bg-slideshow { position: fixed; inset: 0; z-index: -3; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease-in-out; }
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); }

.tip-container { position: absolute; bottom: 30px; left: 30px; z-index: 1; max-width: 80%; }
.tip-text { color: #fff; font-size: 1rem; background: rgba(0, 0, 0, 0.5); padding: 10px 15px; border-radius: 8px; backdrop-filter: blur(4px); }

/* LOGOS */
.header-logos { position: fixed; top: 30px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 40px; align-items: center; }
.header-logos img { height: 60px; width: auto; transition: 0.3s; }

/* CARD GLASSMORPHISM */
.welcome-overlay { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 5; padding: 20px; }
.welcome-card { width: 100%; max-width: 480px; padding: 30px; background: rgba(18, 24, 38, 0.7); backdrop-filter: blur(15px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; text-align: center; }

.progress { width: 100%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 3px; margin-bottom: 25px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0%; background: var(--primary); transition: 0.4s; }

.step { display: none; animation: fadeIn 0.5s ease; }
.step.active { display: block; }

/* BOTÕES E INPUTS */
input { width: 100%; padding: 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.3); color: #fff; margin-bottom: 20px; }
button { width: 100%; padding: 14px; border-radius: 12px; border: none; background: var(--primary); color: #fff; font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 1rem; margin-top: 10px; }
button:hover { background: var(--primary-dark); }

.btn-reset { background: transparent; border: 1px solid rgba(255,255,255,0.3); margin-top: 15px; }
.btn-reset:hover { background: rgba(255,255,255,0.1); }

.choices { display: flex; flex-direction: column; gap: 10px; }
.choices button { background: rgba(255,255,255,0.05); text-align: left; padding-left: 20px; border: 1px solid rgba(255,255,255,0.1); }

.choice-alert { position: absolute; inset: 0; background: rgba(18, 24, 38, 0.95); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: 0.3s; z-index: 10; }
.choice-alert.show { opacity: 1; pointer-events: auto; }

.hidden { display: none !important; }

/* RESPONSIVIDADE */
@media (max-width: 600px) {
  .header-logos { flex-direction: column; gap: 10px; top: 20px; }
  .header-logos img { height: 40px; }
  .welcome-card { margin-top: 60px; }
  .tip-container { left: 15px; bottom: 15px; }
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }