:root { --oro1:#f6dc9b; --oro2:#d4a843; --oro3:#8c6a21; --fondo:#050403; --panel:#100c07; --texto:#f3ead6; --suave:#b3a788; --borde:#3a2f19; --ok:#38c796; --error:#ef7b7b; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; background:var(--fondo); color:var(--texto); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
body { min-height:100vh; min-height:100dvh; }
.aura { position:fixed; inset:0; pointer-events:none; background:radial-gradient(60% 38% at 50% 26%, rgba(212,168,67,.24), transparent 70%); animation:aura 6s ease-in-out infinite; }
@keyframes aura { 50% { opacity:.5; } }
.logo { display:block; margin:0 auto; animation:respira 5s ease-in-out infinite; filter:drop-shadow(0 0 16px rgba(212,168,67,.4)); }
.logo.chico { width:84px; height:84px; }
@keyframes respira { 50% { transform:scale(1.03); filter:drop-shadow(0 0 28px rgba(246,220,155,.7)); } }
.pantalla { position:relative; padding:20px; max-width:480px; margin:0 auto; }
h1 { font-size:20px; font-weight:600; margin:8px 0 16px; text-align:center; color:var(--oro1); letter-spacing:.3px; }
label { display:block; font-size:14px; color:var(--suave); margin:12px 0 4px; }
input, select { width:100%; padding:12px; font-size:16px; color:var(--texto); background:var(--panel); border:1px solid var(--borde); border-radius:10px; }
input:focus, select:focus { outline:none; border-color:var(--oro2); box-shadow:0 0 0 3px rgba(212,168,67,.25); }
button, .btn-oro { position:relative; overflow:hidden; display:block; width:100%; border:0; border-radius:14px; padding:15px 18px; margin-top:16px; text-align:center; text-decoration:none; font-size:17px; font-weight:700; color:#1a1204; background:linear-gradient(135deg,var(--oro1),var(--oro2) 55%,var(--oro3)); box-shadow:0 0 0 1px rgba(246,220,155,.45), 0 8px 24px rgba(212,168,67,.28); transition:transform .12s, box-shadow .2s; cursor:pointer; }
button:active, .btn-oro:active { transform:scale(.97); box-shadow:0 0 0 1px rgba(246,220,155,.8), 0 2px 12px rgba(212,168,67,.5); }
button::after, .btn-oro::after { content:""; position:absolute; top:0; bottom:0; width:55%; left:-80%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-20deg); animation:brillo 4s ease-in-out infinite; pointer-events:none; }
@keyframes brillo { 0%, 55% { left:-80%; } 100% { left:130%; } }
button.sec { background:transparent; color:var(--oro1); box-shadow:inset 0 0 0 1px var(--oro3); }
button.sec::after { display:none; }
.btn-oro small { display:block; font-weight:500; font-size:13px; opacity:.75; margin-top:3px; }
@media (prefers-reduced-motion: reduce) { .aura, .logo, button::after, .btn-oro::after { animation:none; } }