@charset "utf-8";
body {
    background-color: #FFF9F0;
    background-image: linear-gradient(135deg, #f5e6d3 25%, transparent 25%, transparent 50%, #f5e6d3 50%, #f5e6d3 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    font-family: 'Segoe UI', sans-serif;
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; margin: 0; padding: 20px;
}
.main-container {
    background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px);
    padding: 2.5rem; border-radius: 25px; box-shadow: 0 15px 35px rgba(139,69,19,0.15);
    width: 100%; max-width: 420px; position: relative; text-align: center; box-sizing: border-box;
}
.main-container::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px;
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff);
    border-radius: 25px 25px 0 0;
}
.logo { width: 120px; margin-bottom: 10px; animation: flotar 4s ease-in-out infinite; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
h1 { color: #8B4513; font-size: 1.5rem; margin-bottom: 5px; }
.form-group { text-align: left; margin-bottom: 12px; }
label { display: block; font-size: 0.75rem; font-weight: bold; color: #8B4513; margin-bottom: 4px; text-transform: uppercase; }
input, select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 10px; box-sizing: border-box; font-size: 0.9rem; }
.btn-arcoiris {
    background: linear-gradient(90deg, #ff7f00, #f39c12, #00ff00, #0000ff);
    background-size: 300% 100%; color: white; border: none; padding: 14px;
    width: 100%; border-radius: 12px; font-weight: bold; cursor: pointer; transition: 0.5s;
}
.btn-arcoiris:hover { background-position: right center; transform: scale(1.02); }
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); }
.modal-content { background: #FFF9F0; margin: 10% auto; padding: 30px; border-radius: 25px; width: 85%; max-width: 380px; position: relative; border-top: 10px solid #f39c12; animation: slideDown 0.4s; }
@keyframes slideDown { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.close { position: absolute; right: 20px; top: 10px; font-size: 28px; cursor: pointer; color: #8B4513; }
footer { margin-top: 30px; border-top: 1px solid #eee; padding-top: 15px; }
.footer-title { color: #8B4513; font-weight: bold; margin: 0; font-size: 0.9rem; }
.footer-subtitle { color: #bdc3c7; font-size: 0.7rem; margin-top: 5px; line-height: 1.3; }