@mixin lips($num) {
     @for $i from 1 through $num {
       &:nth-child(n+#{$i + 1}) {
       margin-left: #{$i*31px};
      }
     }
   }
   
   body {
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;               /* ✅ Necesario para centrar */
    flex-direction: column;      /* ✅ Coloca los elementos uno debajo del otro */
    justify-content: center;     /* ✅ Centra verticalmente */
    align-items: center;         /* ✅ Centra horizontalmente */
  
    background-image: radial-gradient(closest-side, #2EA3F2, #2874B8);
    text-align: center;
    color: #fff;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.5;
  }
   
   .logo {
     margin: 40px auto;
     display: block;
   }
   
   h1 {
     font-size: 24px;
     line-height: 40px;
     margin: 0 auto 16px;
     padding: 0 20px;
     text-shadow: 0 2px 4px rgba(0,0,0,0.2);
     letter-spacing: 0.5px;
     font-weight: 600;
     max-width: 600px;
   }
   
   p {
     color: #D6DCE0;
     font-weight: 300;
     max-width: 600px;
     margin: 0 auto 24px;
     text-shadow: 0 2px 3px rgba(0,0,0,0.1);
     letter-spacing: 0.5px;
     padding: 0 20px;
     a {
       color: inherit;
       &:hover {
         color: #fff;
       }
     }
   }
   
   .button {
     color: #2EA3F2;
     background: #fff;
     border-radius: 3px;
     display: inline-block;
     padding: 12px 48px;
     text-decoration: none;
     box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     transition: all 0.2s ease-out;
     &:hover {
       margin-top: -2px;
       box-shadow: 0 6px 24px rgba(0,0,0,0.4);
     }
   }
   
   .browser {
     /* width: 400px;
     min-width: 200px;
     min-height: 264px; */
     background: transparent !important;
     box-shadow: none !important;
     border-radius: 0 !important;
     animation: bobble 1.8s ease-in-out infinite;
     
   }
   
   .eye {
     position: absolute;
     left: 34%;
     top: 80px;
     width: 32px;
     height: 32px;
     opacity: 1;
     + .eye {
       right: 34%;
       left: auto;
     }
     &:before, &:after {
       position: absolute;
       left: 15px;
       content: ' ';
       height: 40px;
       width: 3px;
       border-radius: 2px;
       background-color: #FF5E5B;
     }
     &:before {
       transform: rotate(45deg);
     }
     &:after {
       transform: rotate(-45deg);
     }
   }
   
   .mouth {
     position: absolute;
     width: 250px;
     top: 178px;
     left: 50%;
     margin-left: -125px;
     height: 40px;
     .lips {
       position: absolute;
       left: 15px;
       content: ' ';
       height: 40px;
       width: 3px;
       border-radius: 2px;
       background-color: #FF5E5B;
       transform: rotate(-54deg);
       &:nth-child(odd) {
         transform: rotate(54deg);
       }
       @include lips(8);
     }
   }
   
   @keyframes bobble {
     0%, 100% { 
       margin-top: 40px; 
       margin-bottom: 48px;
       box-shadow: 0 40px 80px rgba(0,0,0,0.24);
     }
     50% { 
       margin-top: 54px; 
       margin-bottom: 34px;
       box-shadow: 0 24px 64px rgba(0,0,0,0.40); 
     }
   }
   
   @media only screen 
     and (min-device-width: 320px) 
     and (max-device-width: 480px) {
       .browser {
         width: 280px;
         margin-left: -140px;
         .eye {
           left: 30%;
           + .eye {
             left: auto;
             right: 30%;
           }
         }
       }
   }