:root { --primary: #004b8d; --accent: #00a651; --claro: #ef3829; }
body { margin:0; padding:0; font-family: 'Inter', sans-serif; background: linear-gradient(-45deg, #004b8d, #00a651, #ef3829, #ff5f00); background-size: 400% 400%; animation: gradient 15s ease infinite; color: #333; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.container { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(15px); padding: 30px; border-radius: 24px; width: 95%; max-width: 420px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.3); }
.logos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 25px; background: white; padding: 10px; border-radius: 15px; }
.logos-grid img { width: 100%; height: auto; object-fit: contain; }
h1 { text-align: center; font-size: 22px; font-weight: 800; margin: 0; }
.step { display: none; animation: fadeIn 0.4s ease; }
.step.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }
input, select { width: 100%; padding: 14px; border: 2px solid #eee; border-radius: 12px; margin-bottom: 10px; box-sizing: border-box; font-size: 16px; }
button { width: 100%; padding: 16px; background: #111; color: white; border: none; border-radius: 12px; cursor: pointer; font-weight: 700; margin-top: 10px; }
.progress-bar { height: 6px; background: #eee; border-radius: 3px; margin: 20px 0; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); width: 25%; transition: 0.4s; }