@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Cinzel:wght@900&display=swap');
*{margin:0;padding:0;box-sizing:border-box}

body{
    font-family:'Inter',sans-serif;
    min-height:100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0d1117 100%);
    color:#e0d6ff;
    overflow-y:auto;
    overflow-x:hidden;
    padding:20px 0;
}

/* FONDO ESTELAR SUAVE (sin neón) */
.stars,.shooting-star{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    pointer-events:none;
    z-index:1;
}
.stars{
    box-shadow:
    5vw 10vh 1.5px #b8a9ff,
    20vw 30vh 1px #a78bfa,
    40vw 60vh 1.5px #c4b5fd,
    70vw 20vh 1px #ddd6fe,
    90vw 80vh 1.5px #e0d6ff,
    15vw 75vh 1px #e0d6ff,
    55vw 45vh 1.5px #d8ccff;
    animation:brillar 12s infinite linear;
}
.stars::after{
    content:"";
    width:1px;height:1px;
    background:#e0d6ff;
    box-shadow:30vw 50vh 1.5px #c8b5ff, 60vw 80vh 1px #a78bfa;
    animation:brillar 9s infinite linear reverse;
}
.shooting-star{
    width:140px;height:1.5px;
    background:linear-gradient(90deg, #c4b5fd, transparent);
    opacity:0.7;
    animation:estrella 8s infinite linear;
}
.shooting-star:nth-child(2){top:12%;animation-delay:1s}
.shooting-star:nth-child(3){top:38%;animation-delay:3s}
.shooting-star:nth-child(4){top:65%;animation-delay:2s}
.shooting-star:nth-child(5){top:88%;animation-delay:5s}
@keyframes brillar{0%,100%{opacity:0.6}50%{opacity:0.2}}
@keyframes estrella{0%{transform:translateX(-200px) rotate(30deg);opacity:0}20%{opacity:0.8}100%{transform:translateX(130vw) translateY(70vh) rotate(30deg);opacity:0}}

/* MENÚ FLOTANTE CON HAMBURGUESA */
.menu-float{
    position:fixed;
    top:25px;
    left:25px;
    z-index:999;
}
.menu-btn{
    width:68px;
    height:68px;
    background: linear-gradient(135deg, #6b46c1, #8b5cf6);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(144, 97, 255, 0.63);
    transition:.3s;
}
.menu-btn:hover{
    transform:scale(1.08);
    box-shadow:0 12px 35px rgba(133, 88, 239, 0.5);
}
.menu-btn::before{
    content:"≡"; /* tres líneas clásicas */
    font-weight:900;
}

/* Panel menú */
.panel{
    position:absolute;
    top:82px;
    left:0;
    background: rgb(77, 43, 187);
    backdrop-filter:blur(18px);
    min-width:290px;
    border-radius:20px;
    padding:22px 0;
    box-shadow:0 15px 40px rgba(0,0,0,.5);
    border:1px solid rgba(139,92,246,.25);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:.4s ease;
}
.panel.active{
    opacity:1;
    visibility:visible;
    transform:none;
}
.panel a{
    display:block;
    padding:14px 32px;
    color:#e0d6ff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}
.panel a:hover{
    background:rgba(139,92,246,.2);
    padding-left:42px;
    color:#fff;
}

/* Botón home */
.home-btn{
    position:fixed;
    top:110px;
    right:30px;
    width:64px;
    height:64px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color:#fff;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:34px;
    box-shadow:0 10px 30px rgba(37,99,235,.4);
    transition:.3s;
}
.home-btn:hover{transform:scale(1.08)}

/* CONTENEDOR PRINCIPAL */
.container{
    max-width:1050px;
    margin:0 auto 80px;
    padding:55px;
    background: linear-gradient(145deg, rgba(35,20,80,0.75), rgba(71, 42, 201, 0.478));
    backdrop-filter:blur(20px);
    border-radius:40px;
    border:1px solid rgba(138, 92, 246, 0.889);
    box-shadow:0 25px 80px rgba(0,0,0,.6);
    position:relative;
    z-index:2;
}
.header h1{
    font-family:'Cinzel',serif;
    font-size:3.2rem;
    color:var(--accent);
    text-align:center;
    margin-bottom:12px;
    background: linear-gradient(90deg, #a78bfa, #c4b5fd);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.header p{
    text-align:center;
    font-size:1.3rem;
    color:#64748b;
    margin-bottom:40px;
}
/* TARJETAS */
.card{
    background: linear-gradient(145deg, rgba(55,35,100,0.65), rgba(45,25,90,0.85));
    padding:42px;
    border-radius:28px;
    margin-bottom:42px;
    border:1px solid rgba(139,92,246,.3);
    transition:.4s;
    backdrop-filter:blur(8px);
}
.card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 50px rgba(139, 93, 245, 0.743);
}
.pregunta{
    font-size:1.62rem;
    font-weight:600;
    line-height:1.65;
    margin-bottom:32px;
    color:#d451b7;
}
.pregunta span{
    color:#fdfcff;
    font-weight:900;
    margin-right:14px;
    font-size:1.75rem;
}

/* RADIOS SIN NEÓN (elegantes y suaves) */
.radio-group{
    display:flex;
    flex-direction:column;
    gap:1.35rem;
    margin:32px 0;
}
.liquid-radio{
    position:relative;
    display:inline-flex;
    align-items:center;
    cursor:pointer;
    font-size:1.24rem;
    user-select:none;
    transition:transform .3s;
}
.liquid-radio:hover{transform:scale(1.03)}
.liquid-radio input{position:absolute;opacity:0;cursor:pointer}
.liquid-radio .radio-visual{
    position:relative;
    width:1.9em;
    height:1.9em;
    margin-right:1em;
    border-radius:50%;
    background:var(--grad);
    border:0.14em solid rgba(139,92,246,.4);
    box-shadow:0 4px 12px rgba(107,70,193,.25), inset 0 2px 6px rgba(255,255,255,.15);
    transition:all .35s;
}
.liquid-radio .radio-visual::before{
    content:"";
    position:absolute;
    top:50%;left:50%;
    width:0.85em;
    height:0.85em;
    border-radius:50%;
    background:#fff;
    transform:translate(-50%,-50%) scale(0);
    transition:transform .3s ease;
}
.liquid-radio input:checked + .radio-visual::before{
    transform:translate(-50%,-50%) scale(1);
}

/* Degradados suaves (sin neón) */
.variant-lavender{--grad:linear-gradient(135deg, #8b5cf6, #a78bfa)}
.variant-coral{--grad:linear-gradient(135deg, #7c3aed, #9333ea)}
.variant-mint{--grad:linear-gradient(135deg, #6366f1, #818cf8)}
.variant-sky{--grad:linear-gradient(135deg, #4f46e5, #6d28d9)}

/* BOTONES FINALES */
.botones-final{
    text-align:center;
    margin:90px 0 30px;
}
#enviar{
    padding:30px 115px;
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    color:white;
    border:none;
    border-radius:50px;
    font-size:1.95rem;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 12px 40px rgba(124,58,237,.4);
    transition:.4s;
}
#enviar:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 50px rgba(124,58,237,.6);
}
#enviar:disabled{
    background:#4c1d95;
    cursor:not-allowed;
    transform:none;
}
#reiniciar{
    margin-left:32px;
    padding:26px 85px;
    background:transparent;
    color:#ef4444;
    border:2.5px solid #ef4444;
    border-radius:50px;
    font-size:1.65rem;
    cursor:pointer;
    transition:.4s;
}
#reiniciar:hover{
    background:#ef4444;
    color:white;
    transform:translateY(-4px);
}
#reiniciar.confirmar {
    background: linear-gradient(135deg, #ef4444, #b91c1c); /* Rojo intenso */
    color: white;
    border-color: #ef4444;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.5);
    transform: scale(1.05);
    font-weight: 800;
}

#reiniciar.confirmar:hover {
    box-shadow: 0 0 35px rgba(239, 68, 68, 0.7);
}
@keyframes palpito {
    0% { box-shadow: 0 0 0 0 rgba(219, 39, 119, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(219, 39, 119, 0); }
    100% { box-shadow: 0 0 0 0 rgba(219, 39, 119, 0); }
}

/* RETRO Y RESULTADO */
.retro{
    padding:28px;
    border-radius:20px;
    background:rgba(40,20,90,0.8);
    backdrop-filter:blur(10px);
    text-align:center;
    margin-top:32px;
    font-weight:600;
    line-height:1.75;
    opacity:0;
    border:1px solid rgba(139,92,246,.3);
    transition:.6s;
}
.retro.show{opacity:1}
.resultado{
    display:none;
    text-align:center;
    padding:110px 30px;
    background: linear-gradient(145deg, rgba(70,40,120,0.75), rgba(35,20,90,0.9));
    backdrop-filter:blur(18px);
    border-radius:40px;
    margin-top:65px;
    border:1px solid rgba(139,92,246,.4);
}
.resultado.show{display:block;animation:aparecer 1s}
@keyframes aparecer{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}