:root { --azul: #14213d; --naranja: #fca311; --blanco: #ffffff; }

* { -webkit-tap-highlight-color: transparent; }

body { font-family: 'Inter', sans-serif; overflow-x: hidden; }

.screen { display: none; }
.screen.active { display: block; animation: fadeIn 0.4s ease-out; }

.card { background: var(--blanco); border-radius: 28px; padding: 1.5rem; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 10px 40px rgba(0,0,0,0.04); }

.badge { background: var(--naranja); color: white; padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: 800; display: inline-block; }

.nav-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; background: #fff; }
.nav-dot.active { border-color: var(--naranja); color: var(--naranja); box-shadow: 0 0 10px rgba(252,163,17,0.2); }
.nav-dot.done { background: var(--azul); border-color: var(--azul); color: #fff; }

.progress-bg { background: #f1f5f9; height: 8px; border-radius: 4px; overflow: hidden; }
#bar { background: var(--naranja); height: 100%; width: 0%; transition: width 0.6s ease; }

.opt-btn { width: 100%; text-align: left; padding: 1rem; border-radius: 14px; border: 2px solid #f1f5f9; background: #fff; display: flex; align-items: center; margin-bottom: 8px; transition: 0.2s; }
.opt-btn i { font-size: 1.2rem; min-width: 35px; color: var(--azul); }
.opt-btn span { font-size: 0.95rem; font-weight: 600; line-height: 1.25; }
.opt-btn:active { background: #fffcf5; border-color: var(--naranja); transform: scale(0.98); }

.input-field { width: 100%; padding: 1.25rem; border-radius: 16px; border: 2px solid #e5e7eb; text-align: center; font-size: 1.1rem; }
.btn-primary { background: var(--azul); color: white; font-weight: 800; border-radius: 18px; transition: 0.3s; }
.btn-primary:active { transform: translateY(2px); }

.spinner { width: 45px; height: 45px; border: 5px solid #f1f5f9; border-top: 5px solid var(--naranja); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.footer { text-align: center; padding: 20px; font-size: 10px; color: #999; text-transform: uppercase; letter-spacing: 1px; }