:root{--carrillo-azul-oscuro: #0A1E3A;--carrillo-azul-medio: #1a3a5c;--carrillo-azul-claro: #4a6fa5;--carrillo-blanco: #FFFFFF;--carrillo-gris: #6B7280;--carrillo-dorado: #D4AF37}.app{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;background:#000}.container{background:var(--carrillo-blanco);border-radius:12px;padding:50px 40px;box-shadow:0 20px 60px #0a1e3a4d;max-width:600px;width:100%;text-align:center;animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.header{margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #f0f0f0}.logo-container{display:flex;justify-content:center}.logo{filter:drop-shadow(0 2px 4px rgba(10,30,58,.2))}.titulo{font-size:3rem;color:var(--carrillo-azul-oscuro);margin-bottom:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.tagline{display:flex;flex-direction:column;gap:4px;color:var(--carrillo-azul-medio);font-size:.95rem;font-weight:400;letter-spacing:.5px;margin-top:10px}.tagline span{display:block}.content{margin-top:30px}.subtitulo{font-size:1.1rem;color:var(--carrillo-gris);margin-bottom:30px;font-weight:500;line-height:1.6}.subtitulo p{margin:8px 0}.subtitulo p:first-child{margin-top:0;font-weight:700;font-size:1.25rem}.subtitulo p:last-child{margin-bottom:0;font-style:italic;font-size:.95rem}.formulario{display:flex;flex-direction:column;gap:20px}.input-group{display:flex;flex-direction:column;gap:8px;text-align:center}.input-group label{font-weight:600;color:var(--carrillo-azul-oscuro);font-size:.95rem;text-align:center}.input-codigo{padding:18px 20px;border:2px solid #e0e0e0;border-radius:8px;font-size:2rem;font-weight:600;transition:all .3s ease;font-family:Courier New,Courier,monospace;letter-spacing:8px;color:var(--carrillo-azul-oscuro);text-align:center;text-transform:uppercase}.input-codigo:focus{outline:none;border-color:var(--carrillo-azul-oscuro);box-shadow:0 0 0 3px #0a1e3a1a}.boton-comprobar{padding:16px 32px;background:var(--carrillo-azul-oscuro);color:var(--carrillo-blanco);border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:10px;text-transform:uppercase;letter-spacing:1px}.boton-comprobar:hover{background:var(--carrillo-azul-medio);transform:translateY(-2px);box-shadow:0 8px 16px #0a1e3a4d}.boton-comprobar:active{transform:translateY(0)}.mensaje-error{color:#e74c3c;font-size:.9rem;margin-top:-10px;animation:shake .5s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.mensaje-ganador{animation:celebrate .6s ease;padding:20px 0}@keyframes celebrate{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.ganador-texto{font-size:3.5rem;color:var(--carrillo-dorado);font-weight:900;margin-bottom:24px;text-shadow:2px 2px 4px rgba(0,0,0,.1);animation:pulse 2s infinite;letter-spacing:3px}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.mensaje-seleccion{font-size:1.3rem;color:var(--carrillo-azul-oscuro);line-height:1.6;font-weight:500}.pantalla-analisis{margin-top:30px;animation:fadeIn .5s ease-in}.mensaje-bienvenida{font-size:1.1rem;color:var(--carrillo-azul-oscuro);line-height:1.6;margin-bottom:30px;font-weight:500}.mensaje-hackeando{margin:30px 0;padding:20px;background-color:#1a0000;border:3px solid #ff0000;border-radius:8px;position:relative;overflow:hidden;animation:hackeandoPulse .5s infinite,glitch .3s infinite;z-index:10}.mensaje-hackeando h2{font-size:2rem;color:red;font-weight:900;text-transform:uppercase;letter-spacing:4px;text-align:center;margin:0;text-shadow:0 0 10px #ff0000,0 0 20px #ff0000,0 0 30px #ff0000,2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000;animation:hackeandoText .1s infinite;font-family:Courier New,monospace}.mensaje-hackeando:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,0,0,.4),transparent);animation:hackeandoScan 1s infinite}@keyframes hackeandoPulse{0%,to{box-shadow:0 0 20px #ff000080,inset 0 0 20px #f003}50%{box-shadow:0 0 40px #f00c,inset 0 0 30px #f006}}@keyframes hackeandoText{0%,to{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}}@keyframes glitch{0%,to{transform:translate(0)}20%{transform:translate(-3px,3px)}40%{transform:translate(-3px,-3px)}60%{transform:translate(3px,3px)}80%{transform:translate(3px,-3px)}}@keyframes hackeandoScan{0%{left:-100%}to{left:100%}}.barra-progreso-container{margin:30px 0}.barra-progreso{width:100%;height:30px;background-color:#e0e0e0;border-radius:15px;overflow:hidden;position:relative;margin-bottom:10px;box-shadow:inset 0 2px 4px #0000001a}.barra-progreso-fill{height:100%;background:linear-gradient(90deg,var(--carrillo-azul-oscuro) 0%,var(--carrillo-azul-medio) 100%);border-radius:15px;transition:width .1s linear;position:relative;overflow:hidden}.barra-progreso-fill:after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progreso-porcentaje{font-size:.9rem;color:var(--carrillo-gris);font-weight:600;font-family:Courier New,monospace}.mensaje-final-analisis{margin-top:30px;padding:20px;background-color:#f8f9fa;border-radius:8px;border-left:4px solid var(--carrillo-azul-oscuro);animation:slideIn .5s ease-out}.mensaje-final-analisis p{font-size:1rem;color:var(--carrillo-azul-oscuro);line-height:1.6;margin:0 0 20px;font-weight:500}.boton-continuar{padding:14px 32px;background:var(--carrillo-azul-oscuro);color:var(--carrillo-blanco);border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;width:100%;margin-top:10px}.boton-continuar:hover{background:var(--carrillo-azul-medio);transform:translateY(-2px);box-shadow:0 8px 16px #0a1e3a4d}.boton-continuar:active{transform:translateY(0)}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 600px){.app{padding:20px 10px 10px;align-items:flex-start}.container{padding:25px 20px;border-radius:8px;max-width:100%}.header{margin-bottom:20px;padding-bottom:15px}.logo-container{margin-bottom:0}.logo-image{max-width:150px!important;max-height:90px!important}.content{margin-top:20px}.subtitulo{font-size:.95rem;margin-bottom:25px;line-height:1.5}.subtitulo p{margin:6px 0}.subtitulo p:first-child{font-size:1.1rem}.subtitulo p:last-child{font-size:.85rem}.formulario{gap:15px}.input-group{gap:6px}.input-group label{font-size:.9rem}.input-codigo{padding:16px 18px;font-size:1.5rem;letter-spacing:6px}.boton-comprobar{padding:14px 24px;font-size:1rem;width:100%}.mensaje-error{font-size:.85rem}.ganador-texto{font-size:2rem;margin-bottom:20px;letter-spacing:2px}.mensaje-seleccion{font-size:1rem;line-height:1.5;padding:0 10px}.mensaje-ganador{padding:15px 0}.mensaje-bienvenida{font-size:1rem;margin-bottom:25px}.mensaje-hackeando{margin:25px 0;padding:15px}.mensaje-hackeando h2{font-size:1.5rem;letter-spacing:3px}.barra-progreso{height:25px}.mensaje-final-analisis{padding:15px;margin-top:25px}.mensaje-final-analisis p{font-size:.9rem;margin-bottom:15px}.boton-continuar{padding:12px 24px;font-size:1rem}}@media (max-width: 400px){.app{padding:15px 5px 5px}.container{padding:20px 15px}.logo-image{max-width:120px!important;max-height:72px!important}.subtitulo{font-size:.85rem;line-height:1.4}.subtitulo p{margin:5px 0}.subtitulo p:first-child{font-size:.95rem}.subtitulo p:last-child{font-size:.75rem}.ganador-texto{font-size:1.75rem}.mensaje-seleccion{font-size:.9rem}.input-codigo{padding:14px 16px;font-size:1.25rem;letter-spacing:4px}.mensaje-bienvenida{font-size:.9rem;margin-bottom:20px}.mensaje-hackeando{margin:20px 0;padding:12px}.mensaje-hackeando h2{font-size:1.2rem;letter-spacing:2px}.barra-progreso{height:22px}.progreso-porcentaje{font-size:.85rem}.mensaje-final-analisis{padding:12px;margin-top:20px}.mensaje-final-analisis p{font-size:.85rem;margin-bottom:12px}.boton-continuar{padding:12px 20px;font-size:.95rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#000;min-height:100vh}#root{width:100%;min-height:100vh}