*{box-sizing:border-box;margin:0;padding:0}:root{--primary:#e8b4b8;--secondary:#f5e6e8;--accent:#d4a5a5;--text-dark:#4a4a4a;--text-light:#6b6b6b;--bg-warm:linear-gradient(135deg, #fdf6f6 0%, #f5e6e8 50%, #fef9f3 100%);--shadow-soft:0 4px 20px #e8b4b833}html{scroll-behavior:smooth}body{background:var(--bg-warm);color:var(--text-dark);min-height:100vh;font-family:Quicksand,sans-serif;line-height:1.7;overflow-x:hidden}#root{width:100%;min-height:100vh}.floating-hearts{pointer-events:none;z-index:0;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.heart{opacity:.12;font-size:1.5rem;animation:15s ease-in infinite float-up;position:absolute}@keyframes float-up{0%{opacity:0;transform:translateY(100vh)rotate(0)}10%{opacity:.12}90%{opacity:.12}to{opacity:0;transform:translateY(-100px)rotate(360deg)}}@keyframes cardSlideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes badgePop{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.global-controls{z-index:100;gap:.8rem;display:flex;position:fixed;top:1.5rem;right:1.5rem}.control-btn{cursor:pointer;border-radius:20px;padding:.5rem 1rem;font-family:Quicksand,sans-serif;font-size:.85rem;font-weight:500;transition:all .2s}.control-btn.skip{border:1px solid var(--primary);color:var(--text-dark);background:#fffc}.control-btn.skip:hover{background:var(--primary);color:#fff}.control-btn.end{border:1px solid var(--text-light);color:var(--text-light);background:0 0}.control-btn.end:hover{background:#0000000d}.badges-display{z-index:100;flex-wrap:wrap;gap:.5rem;max-width:200px;display:flex;position:fixed;top:1.5rem;left:1.5rem}.mini-badge{color:var(--text-dark);background:#ffffffe6;border-radius:15px;padding:.3rem .8rem;font-size:.75rem;animation:.3s ease-out badgePop;box-shadow:0 2px 8px #e8b4b833}.page{z-index:1;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex;position:relative}.landing{text-align:center}.envelope-container{cursor:pointer;transition:transform .3s}.envelope-container:hover{transform:scale(1.05)}.envelope{filter:drop-shadow(0 10px 30px #e8b4b866);font-size:5rem;animation:2s ease-in-out infinite gentle-bounce}@keyframes gentle-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.landing h1{color:var(--text-dark);letter-spacing:.02em;margin:1.5rem 0;font-family:Cormorant Garamond,serif;font-size:2.8rem;font-weight:500}.landing h1 .name{color:var(--accent);font-style:italic;font-weight:600}.tap-hint{color:var(--text-light);opacity:.8;margin-top:1rem;font-size:.95rem;animation:2s ease-in-out infinite fade-pulse}@keyframes fade-pulse{0%,to{opacity:.5}50%{opacity:1}}.card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;background:#ffffffd9;border:1px solid #e8b4b833;border-radius:24px;width:100%;max-width:500px;padding:2.5rem;animation:.5s ease-out cardSlideUp;box-shadow:0 8px 32px #e8b4b826}.card-icon{filter:drop-shadow(0 4px 12px #e8b4b84d);margin-bottom:1rem;font-size:3rem}.card h2{color:var(--text-dark);margin-bottom:1rem;font-family:Cormorant Garamond,serif;font-size:1.8rem;font-weight:500}.card p{color:var(--text-light);margin-bottom:.8rem;font-size:1rem;line-height:1.7}.soft-text{opacity:.9;font-style:italic}.choice-btn.primary-choice{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;border:none}.choice-btn.primary-choice:hover{transform:translateY(-2px);box-shadow:0 4px 15px #e8b4b866}.this-or-that .card-icon{font-size:2.5rem}.versus-container{justify-content:center;align-items:center;gap:1rem;margin:1.5rem 0;display:flex}.versus-btn{border:2px solid var(--secondary);cursor:pointer;color:var(--text-dark);background:#fff;border-radius:20px;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem 2rem;font-family:Quicksand,sans-serif;font-weight:500;transition:all .2s;display:flex}.versus-btn:hover{border-color:var(--primary);transform:scale(1.05)}.versus-btn.selected{border-color:var(--accent);background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff}.versus-emoji{font-size:2.5rem}.versus-or{color:var(--text-light);font-size:1rem;font-style:italic}.comfort-meter{justify-content:center;gap:.5rem;margin:1.5rem 0;display:flex}.comfort-btn{border:2px solid var(--secondary);cursor:pointer;background:#fff;border-radius:16px;flex-direction:column;align-items:center;gap:.3rem;min-width:60px;padding:1rem;font-size:1.8rem;transition:all .2s;display:flex}.quest-result{background:#e8b4b826;border-radius:16px;margin-top:1.5rem;padding:1.5rem;animation:.4s ease-out fadeIn}.quest-result p{color:var(--text-dark);margin:0;font-size:1.05rem}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.about-note{margin-top:1rem;font-style:italic}.primary-btn{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;cursor:pointer;border:none;border-radius:30px;margin-top:1.5rem;padding:1rem 2.5rem;font-family:Quicksand,sans-serif;font-size:1rem;font-weight:600;transition:all .3s;box-shadow:0 4px 15px #e8b4b84d}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #e8b4b866}.primary-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.final-card{max-width:550px}.final-response{animation:.5s ease-out fadeIn}.end-screen{background:var(--bg-warm);justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.end-content{text-align:center;max-width:450px;animation:.5s ease-out fadeIn}.end-icon{margin-bottom:1rem;font-size:4rem}.end-content h2{color:var(--text-dark);margin-bottom:1rem;font-family:Cormorant Garamond,serif;font-size:2rem}.end-content p{color:var(--text-light);font-size:1.1rem;line-height:1.7}.final-badges{margin-top:2rem}.final-badges p{margin-bottom:.8rem;font-style:italic}@media (max-width:768px){.global-controls{top:1rem;right:1rem}.badges-display{max-width:300px;top:auto;bottom:1rem;left:1rem}.landing h1{font-size:2.2rem}.envelope{font-size:4rem}.card{margin:0 .5rem;padding:1.8rem}.card h2{font-size:1.5rem}.choice-grid{grid-template-columns:1fr}.versus-container{flex-direction:column;gap:.8rem}.versus-btn{flex-direction:row;justify-content:center;width:100%}.versus-or{display:none}.comfort-meter{flex-wrap:wrap}.comfort-btn{min-width:50px;padding:.8rem}}@media (max-width:480px){.landing h1{font-size:1.8rem}.card p{font-size:.95rem}.control-btn{padding:.4rem .8rem;font-size:.8rem}}.question-card{animation:.5s ease-out cardSlideUp}.choice-grid{grid-template-columns:repeat(2,1fr);gap:.8rem;margin:1.5rem 0;display:grid}.choice-grid.vertical{grid-template-columns:1fr}.choice-btn{border:2px solid var(--secondary);cursor:pointer;color:var(--text-dark);background:#fff;border-radius:16px;padding:1rem 1.2rem;font-family:Quicksand,sans-serif;font-size:.95rem;font-weight:500;transition:all .2s}.choice-btn:hover{border-color:var(--primary);background:#e8b4b81a;transform:translateY(-2px)}.choice-btn.selected{border-color:var(--accent);background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff}.response-text{color:var(--accent);background:#e8b4b81a;border-radius:12px;margin-top:1.5rem;padding:1rem;font-style:italic}@media (max-width:768px){.choice-grid{grid-template-columns:1fr}}.comfort-meter{flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1.5rem 0;display:flex}.comfort-btn{border:2px solid var(--secondary);cursor:pointer;background:#fff;border-radius:16px;flex-direction:column;align-items:center;gap:.3rem;min-width:65px;padding:1rem;transition:all .2s;display:flex}.comfort-btn:hover{border-color:var(--primary);transform:translateY(-3px)}.comfort-btn.selected{border-color:var(--accent);background:linear-gradient(135deg, var(--primary), var(--accent))}.comfort-emoji{font-size:1.8rem}.comfort-label{color:var(--text-light);font-family:Quicksand,sans-serif;font-size:.65rem}.comfort-btn.selected .comfort-label{color:#fff}@media (max-width:480px){.comfort-btn{min-width:55px;padding:.8rem .5rem}}.name-input-container{flex-direction:column;align-items:center;gap:1rem;margin:1.5rem 0;display:flex}.name-input{border:2px solid var(--secondary);width:100%;max-width:280px;color:var(--text-dark);text-align:center;background:#fff;border-radius:16px;outline:none;padding:1rem 1.5rem;font-family:Quicksand,sans-serif;font-size:1.1rem;transition:all .2s}.name-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #e8b4b833}.name-input::placeholder{color:var(--text-light);opacity:.7}.privacy-note{color:var(--text-light);opacity:.8;margin-top:.5rem;font-size:.85rem}.final-response{text-align:center;animation:.5s ease-out fadeIn}.final-emoji{margin-bottom:1rem;font-size:3rem}.final-response h2{color:var(--accent)}.contact-section{background:#e8b4b81a;border-radius:16px;margin:1.5rem 0;padding:1.5rem}.contact-section p{margin-bottom:1rem}.contact-buttons{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.contact-btn{border-radius:25px;align-items:center;gap:.5rem;padding:.8rem 1.5rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.contact-btn.whatsapp{color:#fff;background:#25d366}.contact-btn.instagram{color:#fff;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}.contact-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.closing{color:var(--accent);margin-top:1.5rem;font-style:italic}.learned-section{background:#e8b4b81a;border-radius:12px;margin:1.5rem 0;padding:1rem}.badges-grid{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.8rem;display:flex}.badge{background:#fff;border-radius:20px;padding:.4rem 1rem;font-size:.85rem;box-shadow:0 2px 8px #e8b4b833}.about-me-card .about-details{text-align:left;background:#e8b4b81a;border-radius:16px;margin:1rem 0;padding:1.5rem}.about-details h3{color:var(--accent);text-align:center;margin-bottom:1rem;font-family:Cormorant Garamond,serif;font-size:1.6rem}.detail-row{color:var(--text-dark);align-items:center;gap:.8rem;margin-bottom:.6rem;font-size:1rem;display:flex}.detail-icon{font-size:1.2rem}.traits{flex-wrap:wrap;gap:.5rem;margin-top:.8rem;display:flex}.trait-tag{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;border-radius:20px;padding:.4rem 1rem;font-size:.85rem;font-weight:500}.value-props{text-align:left;background:#e8b4b81a;border-radius:12px;margin-top:1.5rem;padding:1rem}.value-title{color:var(--accent);margin-bottom:.5rem;font-weight:600}.value-item{color:var(--text-dark);margin:.4rem 0;font-size:.95rem}.card-image-placeholder{justify-content:center;margin-bottom:1rem;display:flex}.profile-pic{object-fit:cover;border:3px solid var(--accent);border-radius:50%;width:120px;height:120px}