html,body{max-width:100%;overflow-x:hidden}body{font-family:Poppins,Arial,sans-serif;margin:0;padding:0;background-color:#f4f4f9;color:#333;line-height:1.6}header{background-color:#ffcb05;color:#2a75bb;padding:15px 20px;box-shadow:0 4px 6px #0000001a;position:sticky;top:0;z-index:1000;display:flex;justify-content:space-between;align-items:center}header .contenedor{display:flex;justify-content:space-between;align-items:center;width:100%}header .logotipo{font-size:24px;font-weight:700;cursor:pointer}header .menu-toggle{display:none;font-size:24px;background:none;border:none;cursor:pointer;color:#2a75bb}@media (max-width: 768px){header nav{position:absolute;top:100%;left:0;width:100vw;flex-direction:column;background-color:#ffcb05;gap:10px;padding:10px 0;align-items:left;display:none;align-items:center}header .menu-toggle{display:block}header nav.hidden{display:none}}header nav button{text-decoration:none;color:#2a75bb;font-size:16px;font-weight:500;transition:color .3s ease,transform .3s ease;background:none;border:none;padding:0;cursor:pointer}header nav button:hover{color:#1a4a8a;transform:scale(1.1)}header .user-icon{width:40px;height:40px;border-radius:50%;border:2px solid #2a75bb;transition:transform .3s ease,border-color .3s ease}header .user-icon:hover{transform:scale(1.1);border-color:#1a4a8a}main{padding:20px}.game-info{text-align:center}.game-info img{max-width:100%;height:auto;border:2px solid #2a75bb;border-radius:10px}footer{background-color:#2a75bb;color:#fff;text-align:center;padding:15px;font-size:14px;position:relative}.contenedor{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;background-color:#ffcb05;padding:0 20px;margin:0}.logotipo{font-size:24px;color:#2a75bb;cursor:pointer;margin:0}nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}nav a{text-decoration:none;color:#2a75bb;font-size:16px;font-weight:500;transition:color .3s ease,transform .3s ease}nav a:hover{color:#1a4a8a;transform:scale(1.1)}nav a.activo{font-weight:700;text-decoration:underline}.group{display:flex;align-items:center;position:relative}.input{padding:8px 10px;border:1px solid #2a75bb;border-radius:5px;font-size:14px;transition:border-color .3s ease}.input:focus{border-color:#1a4a8a;outline:none}.search-icon{width:20px;height:20px;position:absolute;right:10px;fill:#2a75bb;pointer-events:none}.user-icon{width:40px;height:40px;border-radius:50%;border:2px solid #2a75bb;transition:transform .3s ease,border-color .3s ease}.user-icon:hover{transform:scale(1.1);border-color:#1a4a8a}.download-button{display:inline-block;padding:10px 20px;background-color:#2a75bb;color:#fff;text-decoration:none;border-radius:5px;font-size:16px;transition:background-color .3s ease}.download-button:hover{background-color:#1a4a8a}.login-container{max-width:500px;margin:50px auto;padding:20px;background-color:#f1fcff;border-radius:10px;box-shadow:0 4px 6px #0000001a;text-align:center}.login-container h1{color:#2a75bb;margin-bottom:20px}.form-container{padding:20px}.form-group{margin-bottom:15px;text-align:left}.form-group label{display:block;margin-bottom:5px;color:#2a75bb;font-weight:700}.form-group input{width:100%;padding:10px;border:1px solid #2a75bb;border-radius:5px;font-size:16px;outline:none;transition:border-color .3s ease}.form-group input:focus{border-color:#1a4a8a}.form-buttons{display:flex;justify-content:space-between;gap:10px}.form-buttons button{flex:1;padding:10px;border:none;border-radius:5px;cursor:pointer;font-size:16px;transition:background-color .3s ease}.form-buttons button[type=submit]{background-color:#2a75bb;color:#fff}.form-buttons button[type=submit]:hover{background-color:#1a4a8a}.form-buttons button[type=reset]{background-color:#ffcb05;color:#2a75bb}.form-buttons button[type=reset]:hover{background-color:#e6b800}#spinner .sk-chase-dot{background-color:#2a75bb}section.waves{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden}section .air{position:absolute;bottom:0;left:0;width:200%;height:150px;background:url(https://1.bp.blogspot.com/-xQUc-TovqDk/XdxogmMqIRI/AAAAAAAACvI/AizpnE509UMGBcTiLJ58BC6iViPYGYQfQCLcBGAsYHQ/s1600/wave.png);background-size:1000px 150px;filter:invert(38%) sepia(98%) saturate(1882%) hue-rotate(181deg) brightness(96%) contrast(94%)}section .air.air1{animation:wave 30s linear infinite;z-index:1000;opacity:1;animation-delay:0s;bottom:0}section .air.air2{animation:wave2 15s linear infinite;z-index:999;opacity:.5;animation-delay:-5s;bottom:20px}section .air.air3{animation:wave 30s linear infinite;z-index:998;opacity:.2;animation-delay:-2s;bottom:40px}section .air.air4{animation:wave2 5s linear infinite;z-index:997;opacity:.7;animation-delay:-5s;bottom:60px}@keyframes wave{0%{background-position-x:0px}to{background-position-x:1000px}}@keyframes wave2{0%{background-position-x:0px}to{background-position-x:-1000px}}.profile-image{width:100px;height:100px;border-radius:50%;object-fit:cover;margin-bottom:20px;cursor:pointer;border:2px solid #2a75bb}.image-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:15px;background:#fff;padding:20px;border:2px solid #2a75bb;border-radius:10px;box-shadow:0 4px 8px #0000001a;z-index:1000;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:600px}.url-container{grid-column:1 / -1;display:flex;flex-direction:column;gap:10px;margin-top:20px;width:100%}.url-container input{width:90%;padding:10px;border:1px solid #ccc;border-radius:5px;font-size:14px}.url-container button{padding:10px 15px;background-color:#2a75bb;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:14px;transition:background-color .3s ease}.url-container button:hover{background-color:#1a4a8a}.image-selector img{width:100%;height:auto;cursor:pointer;border-radius:8px;transition:transform .2s ease,box-shadow .2s ease;border:2px solid transparent}.image-selector img:hover{transform:scale(1.05);box-shadow:0 4px 8px #0003;border-color:#2a75bb}.image-selector label{font-size:14px;color:#333;margin-top:10px;display:block;text-align:center}.image-selector input{width:100%;padding:10px;margin-top:10px;border:1px solid #ccc;border-radius:5px;font-size:14px}.image-selector button{margin-top:10px;padding:10px 15px;background-color:#2a75bb;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:14px;transition:background-color .3s ease;width:100%}.image-selector button:hover{background-color:#1a4a8a}.image-selector.show{display:flex;animation:fade-in .3s forwards}.image-selector.hide{animation:fade-out .3s forwards}@keyframes fade-in{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-out{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-55%)}}.hero{position:relative;background-color:#ffcb05;transition:background-color .3s ease}.hero.video-active{background-color:transparent}.hero{position:relative;height:40vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#2a75bb;background:linear-gradient(135deg,#ffcb05,#f4f4f9);border-bottom:5px solid #2a75bb;overflow:hidden;background-color:#ffcb05;transition:background-color .3s ease}.hero.transparent-bg{background-color:transparent}.hero-content{z-index:1;padding:20px}.hero h1{font-size:36px;font-weight:700;margin-bottom:20px;animation:fade-in 1s ease-in-out}.hero p{font-size:18px;margin-bottom:30px}.hero button{padding:10px 20px;background-color:#2a75bb;color:#fff;border:none;border-radius:5px;font-size:16px;cursor:pointer;transition:background-color .3s ease,transform .3s ease}.hero button:hover{background-color:#1a4a8a;transform:scale(1.1)}section{padding:40px 20px;margin:20px 0;background-color:#fff;border-radius:10px;box-shadow:0 4px 6px #0000001a}section h2{font-size:28px;color:#2a75bb;margin-bottom:20px;text-align:center;position:relative}section h2:after{content:"";display:block;width:50px;height:3px;background-color:#ffcb05;margin:10px auto 0;border-radius:5px}section ul{list-style:none;padding:0}section ul li{margin-bottom:10px;font-size:16px;color:#333}section ul li strong{color:#2a75bb}.creditos{text-align:center;background-color:#f4f4f9;padding:20px;border-top:5px solid #2a75bb}.creditos p{font-size:14px;color:#666}.gallery.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:20px}.gallery-item{text-align:center;transition:transform .3s ease,box-shadow .3s ease}.gallery-item img{width:100%;border-radius:10px;transition:transform .3s ease}.gallery-item:hover{transform:scale(1.05);box-shadow:0 4px 8px #0003}.gallery-item p{margin-top:10px;font-size:16px;color:#333}.rating{display:flex;flex-direction:column;align-items:center;margin-top:20px}.rating-buttons{display:flex;gap:10px;justify-content:center;align-items:center}.rating-buttons input{display:none}.rating-buttons label{font-size:2rem;color:#ccc;cursor:pointer;transition:color .3s ease,transform .2s ease}.rating-buttons label.selected{color:#ffcb05}.rating-buttons label:hover{transform:scale(1.2);color:#ffcb05}textarea{width:100%;padding:10px;border:2px solid #ccc;border-radius:5px;font-size:16px;font-family:Poppins,Arial,sans-serif;resize:none;transition:border-color .3s ease,box-shadow .3s ease}textarea:focus{border-color:#ffcb05;box-shadow:0 0 5px #ffcb0580;outline:none}textarea::placeholder{color:#aaa;font-style:italic}@media (max-width: 768px){.contenedor{flex-direction:column;align-items:flex-start}.logotipo{margin-bottom:15px}nav{flex-direction:column;align-items:flex-start;gap:10px}.input{width:100%}.login-container{padding:15px}.form-buttons button{font-size:14px}header h2{font-size:24px}.hero h1{font-size:28px}.hero p{font-size:16px}section h2{font-size:24px}header .menu-toggle{display:block}header nav{display:none;flex-direction:column;gap:10px;position:absolute;top:100%;left:0;width:100%;background-color:#ffcb05;padding:20px;box-shadow:0 4px 6px #0000001a}header nav.open{display:flex}header .user-icon{margin-top:10px}}@media (max-width: 480px){.logotipo{font-size:20px}nav a{font-size:14px}.download-button{font-size:14px;padding:8px 16px}.login-container h1{font-size:24px}.hero h1{font-size:22px}.hero p{font-size:14px}section h2{font-size:20px}}.text-green-600{background-color:#28a745;color:#fff;font-weight:700;padding:10px 15px;border-radius:10px;display:inline-block;margin-top:10px;text-align:center}.text-red-600{background-color:#df1204;color:#fff;font-weight:700;padding:10px 15px;border-radius:10px;display:inline-block;margin-top:10px;text-align:center}button:disabled{background-color:#ccc;color:#666;cursor:not-allowed;opacity:.6;transition:opacity .3s ease,background-color .3s ease}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;z-index:9999;display:flex;align-items:center;justify-content:center}.modal-content{background:#ffffffd9;padding:.5rem 2rem 2rem;border-radius:20px;max-width:700px;width:90vw;max-height:90vh;overflow:hidden;box-shadow:0 6px 24px #0000004d;display:flex;flex-direction:column;align-items:center;position:relative;text-align:center;box-sizing:border-box;min-height:350px;justify-content:center}.modal-bg-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;border-radius:20px;pointer-events:none;filter:blur(2px) brightness(.7)}.modal-content>*:not(.modal-bg-video){position:relative;z-index:1}.modal-content img,.modal-content .hero-video{display:block;max-width:95vw;max-height:70vh;width:100%;height:auto;border-radius:8px;margin-top:10px;object-fit:contain}.modal-close{position:absolute;top:.2rem;right:.7rem;background:none;border:none;font-size:2rem;cursor:pointer;color:#222;z-index:2}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.serpientez-img{max-width:260px;max-height:260px;width:100%;height:auto;margin:0 auto;display:block}
