@font-face{font-family:'Inter';font-weight:400;src:url('fuentes/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:700;src:url('fuentes/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:800;src:url('fuentes/inter-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:900;src:url('fuentes/inter-latin-900-normal.woff2') format('woff2')}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img,video{max-width:100%}
body{margin:0;min-height:100vh;font-family:'Inter',system-ui,sans-serif;color:#F2F4FF;background:#0B0A26 radial-gradient(1400px 900px at 50% -10%,#3A2A8A 0%,#1A1450 45%,#0B0A26 100%) fixed}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(2px 2px at 20% 30%,#fff8,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#fff9,transparent),radial-gradient(2px 2px at 40% 80%,#fff6,transparent),radial-gradient(1.5px 1.5px at 85% 60%,#fff8,transparent),radial-gradient(1.5px 1.5px at 10% 70%,#fff7,transparent);background-size:600px 500px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:28px 24px 80px;position:relative}
.top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;max-width:100%;line-height:1.25;border-radius:999px;background:rgba(20,16,70,.85);border:2px solid #5FE8FF;font-weight:800;box-shadow:0 0 18px rgba(95,232,255,.3)}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;flex-wrap:wrap;gap:10px;padding:14px 26px;border-radius:999px;border:0;cursor:pointer;font:900 20px 'Inter';color:#13203F;background:linear-gradient(180deg,#FFE27A,#FFC93C);box-shadow:0 6px 0 #B8860B,0 0 24px rgba(255,201,60,.4);transition:transform .1s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #B8860B}
.btn.sec{background:linear-gradient(180deg,#9FF3FF,#5FE8FF);box-shadow:0 6px 0 #1E8FA8}
h1,h2,h3{margin:0;font-weight:900}
.glass{background:linear-gradient(160deg,rgba(40,30,110,.85),rgba(14,12,48,.92));border:2px solid rgba(95,232,255,.6);border-radius:28px;box-shadow:0 0 30px rgba(95,232,255,.18)}
.estrellas{color:#FFC93C;letter-spacing:2px;font-size:20px;text-shadow:0 0 8px rgba(255,201,60,.6)}
.estrellas .off{color:rgba(255,255,255,.22);text-shadow:none}
.confe{position:fixed;top:-20px;width:14px;height:9px;border-radius:2px;z-index:99;animation:caer linear forwards;pointer-events:none}
@keyframes caer{to{transform:translateY(110vh) rotate(720deg)}}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.ico{display:block}
@media(max-width:640px){.wrap{padding:18px 14px 60px}.btn{padding:12px 20px;font-size:17px}.chip{font-size:14px;padding:7px 14px}.estrellas{font-size:17px}}

.fig2 .ojos-f,.fig2 .ojos-s,.fig2 .parpado-t{display:none}
.fig2 .boca>g{display:none}
.fig2 .boca[data-v=X]>.v-X,.fig2 .boca[data-v=M]>.v-M,.fig2 .boca[data-v=A]>.v-A,.fig2 .boca[data-v=E]>.v-E,.fig2 .boca[data-v=O]>.v-O{display:inline}
.fig2 .ceja-i,.fig2 .ceja-d{transform-box:fill-box;transform-origin:50% 50%}
.fig2[data-emo=feliz] .ojos-n,.fig2[data-emo=risa] .ojos-n{display:none}
.fig2[data-emo=feliz] .ojos-f,.fig2[data-emo=risa] .ojos-f{display:inline}
.fig2[data-emo=feliz] .cejas,.fig2[data-emo=risa] .cejas{transform:translateY(-8px)}
.fig2[data-emo=sorpresa] .ojos-n{display:none}
.fig2[data-emo=sorpresa] .ojos-s{display:inline}
.fig2[data-emo=sorpresa] .cejas{transform:translateY(-20px)}
.fig2[data-emo=preocupado] .ceja-i{transform:translateY(-6px) rotate(-22deg)}
.fig2[data-emo=preocupado] .ceja-d{transform:translateY(-6px) rotate(22deg)}
.fig2[data-emo=decidido] .ceja-i{transform:translateY(8px) rotate(22deg)}
.fig2[data-emo=decidido] .ceja-d{transform:translateY(8px) rotate(-22deg)}
.fig2[data-emo=picaro] .ceja-i{transform:translateY(-16px) rotate(-12deg)}
.fig2[data-emo=picaro] .ceja-d{transform:rotate(10deg) translateY(5px)}
.fig2[data-emo=triste] .parpado-t{display:inline}
.fig2[data-emo=triste] .ceja-i{transform:rotate(-20deg) translateY(4px)}
.fig2[data-emo=triste] .ceja-d{transform:rotate(20deg) translateY(4px)}
.fig2[data-emo=triste] .rubor{opacity:.2}
.fig2[data-emo=risa] .rubor,.fig2[data-emo=feliz] .rubor{opacity:.9}