.background-container{background-color:#000;display:flex;height:100vh;justify-content:center;left:0;overflow:hidden;position:fixed;top:0;width:100vw;z-index:1}.background-video{left:0;z-index:0}.background-video,.background-video-2{height:100vh;margin-left:0;object-fit:cover;object-position:center;position:absolute;top:0;width:60%}.background-video-2{-webkit-clip-path:polygon(0 0,90% 0,90% 100%,0 100%);clip-path:polygon(0 0,90% 0,90% 100%,0 100%);left:49vw;transform:scaleX(-1);z-index:1}.elementos-escenario{height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:10}.elemento-interactivo{cursor:pointer;filter:drop-shadow(0 0 5px rgba(0,0,0,.5));position:absolute;transition:transform .3s ease}.elemento-interactivo:hover{transform:scale(1.1)}#quien-soy{animation:fadeIn 1s ease-out;left:35vw;top:20vh;width:7vw}#proyectos{left:15.63vw;top:75vh;width:5.21vw}#contacto{left:50.5vw;top:15vh;width:8vw}#como-usarlo{left:1.04vw;top:.93vh;width:5.21vw}#me-gusta{left:29vw;top:65vh;width:6vw}#amigos,#erick{animation:fadeIn 1s ease-out;left:29vw;top:65vh;width:6vw}#beto,#diaz{transform:scaleX(-1)}#beto,#diaz,#vorwin{animation:fadeIn 1s ease-out;left:29vw;top:65vh;width:6vw}.elemento-interactivo img{height:auto;width:100%}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.popup{align-items:center;background-color:#000c;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.popup-contenido{animation:popupFadeIn .4s ease-out;background-color:#f5f2e8;background:radial-gradient(circle at 25% 25%,#8b451314 0,#0000 50%),radial-gradient(circle at 75% 75%,#a0522d0f 0,#0000 50%),linear-gradient(135deg,#f5f2e8,#ede6d3 50%,#e8dcc0);background-size:100% 100%;border:8px solid #8b4513;border-radius:10px;box-shadow:inset 0 0 0 3px tan,inset 0 0 0 6px #f5f2e8,0 15px 35px #0006;max-height:85vh;max-width:700px;overflow-y:auto;padding:40px 50px 30px;position:relative;width:90%}.popup-contenido:before{top:15px}.popup-contenido:after,.popup-contenido:before{background:linear-gradient(90deg,#8b4513,tan,#8b4513);border-radius:1px;content:"";height:2px;left:15px;position:absolute;right:15px}.popup-contenido:after{bottom:15px}.popup-contenido h2{color:#5d4037;font-family:Times New Roman,serif;font-size:24px;font-weight:700;margin:0 0 25px;padding:10px 0;position:relative;text-align:center;text-shadow:1px 1px 2px #8b45134d}.popup-contenido h2:after,.popup-contenido h2:before{color:#8b4513;content:"◆ ◇ ◆";font-size:12px;left:50%;letter-spacing:8px;position:absolute;transform:translateX(-50%)}.popup-contenido h2:before{top:-5px}.popup-contenido h2:after{bottom:-5px}.popup-content{color:#3e2723;font-family:Times New Roman,serif;font-size:16px;line-height:1.6;position:relative;text-align:justify}.popup-content p{animation:typeWriter .8s ease-out forwards;animation:typeWriter 2s steps(40) forwards,blink .8s 1.5s infinite;border-right:2px solid #5d4037;margin:0 0 15px;opacity:0;overflow:hidden;white-space:nowrap}.popup-content p:first-child{animation-delay:.5s}.popup-content p:nth-child(2){animation-delay:1.8s}.popup-content p:nth-child(3){animation-delay:3.1s}.popup-content p:nth-child(4){animation-delay:4.4s}.popup-content p:nth-child(5){animation-delay:5.7s}.popup-content p strong{color:#5d4037;font-weight:700}@keyframes popupFadeIn{0%{opacity:0;transform:scale(.9) rotateY(-5deg)}to{opacity:1;transform:scale(1) rotateY(0deg)}}@keyframes typeWriter{0%{opacity:1;white-space:nowrap;width:0}99%{border-right:2px solid #5d4037;white-space:nowrap}to{border-right:none;opacity:1;white-space:normal;width:100%}}@keyframes blink{0%,50%{border-right-color:#5d4037}51%,to{border-right-color:#0000}}.cerrar-popup{align-items:center;background:linear-gradient(135deg,tan,#c19a6b);border:2px solid #8b4513;border-radius:50%;box-shadow:0 3px 8px #8b45134d;color:#5d4037;cursor:pointer;display:flex;font-size:18px;font-weight:700;height:35px;justify-content:center;position:absolute;right:15px;top:15px;transition:all .3s ease;width:35px}.cerrar-popup:hover{background:linear-gradient(135deg,#c19a6b,#b8860b);box-shadow:0 5px 12px #8b451366;transform:scale(1.1)}.popup-contenido::-webkit-scrollbar{width:8px}.popup-contenido::-webkit-scrollbar-track{background:#8b45131a;border-radius:4px}.popup-contenido::-webkit-scrollbar-thumb{background:#8b4513;border-radius:4px}.popup-contenido::-webkit-scrollbar-thumb:hover{background:#5d4037}.music-controls-container{position:fixed;right:20px;top:20px;z-index:999}.music-controls{align-items:center;background:linear-gradient(135deg,#f5f2e8,#ede6d3 50%,#e8dcc0);background-image:radial-gradient(circle at 25% 25%,#8b451314 0,#0000 50%),radial-gradient(circle at 75% 75%,#a0522d0f 0,#0000 50%);border:3px solid #8b4513;border-radius:15px;box-shadow:inset 0 0 0 2px tan,0 8px 20px #8b451366;display:flex;gap:8px;padding:12px 16px;transition:all .3s ease}.music-controls:hover{box-shadow:inset 0 0 0 2px tan,0 12px 25px #8b451380;transform:translateY(-2px)}.music-controls:before{top:5px}.music-controls:after,.music-controls:before{background:linear-gradient(90deg,#8b4513,tan,#8b4513);content:"";height:1px;left:8px;position:absolute;right:8px}.music-controls:after{bottom:5px}.music-toggle,.volume-button{align-items:center;background:linear-gradient(135deg,tan,#c19a6b);border:2px solid #8b4513;border-radius:50%;box-shadow:0 3px 8px #8b45134d;color:#5d4037;cursor:pointer;display:flex;font-family:Times New Roman,serif;font-size:16px;font-weight:700;height:35px;justify-content:center;transition:all .3s ease;width:35px}.music-toggle:hover,.volume-button:hover{background:linear-gradient(135deg,#c19a6b,#b8860b);box-shadow:0 5px 12px #8b451366;transform:scale(1.1)}.music-toggle.playing{animation:musicalNote 2s ease-in-out infinite}@keyframes musicalNote{0%,to{transform:scale(1) rotate(0deg)}25%{transform:scale(1.05) rotate(-2deg)}75%{transform:scale(1.05) rotate(2deg)}}.volume-popup{position:absolute;right:0;top:60px;z-index:1001}.volume-content{animation:volumePopupFadeIn .3s ease-out;background-color:#f5f2e8;background:radial-gradient(circle at 25% 25%,#8b451314 0,#0000 50%),radial-gradient(circle at 75% 75%,#a0522d0f 0,#0000 50%),linear-gradient(135deg,#f5f2e8,#ede6d3 50%,#e8dcc0);border:4px solid #8b4513;border-radius:10px;box-shadow:inset 0 0 0 2px tan,0 10px 25px #8b451366;min-width:200px;padding:25px;position:relative}.volume-content:before{top:8px}.volume-content:after,.volume-content:before{background:linear-gradient(90deg,#8b4513,tan,#8b4513);content:"";height:1px;left:8px;position:absolute;right:8px}.volume-content:after{bottom:8px}.volume-content h3{color:#5d4037;font-family:Times New Roman,serif;font-size:16px;font-weight:700;margin:0 0 15px;text-align:center;text-shadow:1px 1px 2px #8b45134d}.volume-slider-container{align-items:center;display:flex;gap:10px;margin:15px 0}.volume-label{color:#5d4037;font-size:14px}.volume-slider-pergamino{-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,tan,#c19a6b);border:1px solid #8b4513;border-radius:3px;cursor:pointer;flex:1 1;height:6px;outline:none}.volume-slider-pergamino::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:linear-gradient(135deg,#f5f2e8,tan);border:2px solid #8b4513;border-radius:50%;box-shadow:0 2px 6px #8b451366;cursor:pointer;height:18px;-webkit-transition:all .3s ease;transition:all .3s ease;width:18px}.volume-slider-pergamino::-webkit-slider-thumb:hover{box-shadow:0 4px 10px #8b451399;transform:scale(1.2)}.volume-slider-pergamino::-moz-range-thumb{background:linear-gradient(135deg,#f5f2e8,tan);border:2px solid #8b4513;border-radius:50%;box-shadow:0 2px 6px #8b451366;cursor:pointer;height:18px;width:18px}.volume-percentage{color:#5d4037;font-family:Times New Roman,serif;font-size:18px;font-weight:700;margin:10px 0;text-align:center;text-shadow:1px 1px 2px #8b45134d}.close-volume{align-items:center;background:linear-gradient(135deg,tan,#c19a6b);border:2px solid #8b4513;border-radius:50%;box-shadow:0 2px 6px #8b45134d;color:#5d4037;cursor:pointer;display:flex;font-size:16px;font-weight:700;height:25px;justify-content:center;position:absolute;right:8px;top:8px;transition:all .3s ease;width:25px}.close-volume:hover{background:linear-gradient(135deg,#c19a6b,#b8860b);box-shadow:0 4px 8px #8b451366;transform:scale(1.1)}@keyframes volumePopupFadeIn{0%{opacity:0;transform:scale(.8) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}body,html{font-family:Arial,sans-serif;height:100%;margin:0;overflow:hidden;padding:0}@media (max-width:768px){.background-video{min-height:100vh;min-width:100vw}}
/*# sourceMappingURL=main.b3797533.css.map*/