:root {
      --orange: #ff9f40;
      --orange-dark: #ea580c;
      --teal: #5ce1e6;
      --gray-light: #f3f4f6;
      --gray-dark: #1f2937;
      --white: #ffffff;
      --text-shadow-color: #333; 
      --yellow: #ffde59;
    }
    h1, h2, p {
      font-family: 'Fira Code', sans-serif;
    }
    h1 a{
      color: #000;
      text-decoration: none;
    }
    body {
      margin: 0;
      background-color: var(--white);
      font-family: 'Fira Code', sans-serif;      
      color: #333;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      overflow-x: hidden;
    }

    header {
      background-color: var(--yellow);
      color: var(--white);
      padding: 2rem 10px;
      text-align: center;
      width: 100%;
    }

    header h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        margin-top: 20px;
        font-weight: 100;
        color: #000;
    }
    header p {
        font-style: italic;
        font-size: 1.2rem;
        line-height: 1;
        font-weight: 100;
        color: #000;
        text-align: center;
    }
    main{
        flex-grow: 1;        
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        flex-direction: column;
        position: relative;
        background-color: var(--teal);
    }

    section{
        width: 100%;
        height: 100%;
        padding: 4rem 1rem 7rem;
        display: flex;
        flex-direction: column;
    }
    section p, section a{
      font-size: 25px;
      font-weight: 100;
      max-width: 75%;
      margin: 0 auto;
      line-height: 2;
      text-align: center;
    }
    section h2{
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        margin-top: 20px;
        font-weight: 100;
        color: #000;
        text-align: center;
    }

    section.hero-section{
      background-color: var(--teal);
    }
    section.hero-section .hero {
        z-index: 1;
        position: relative;        
        text-align: center;
    }
    section.hero-section .hero h2{
        font-size: 2.5rem;
        font-weight: 100;
        color: #fff;
        text-shadow:   -3px -3px 0 var(--text-shadow-color),
   0px -3px 0 var(--text-shadow-color),
   3px -3px 0 var(--text-shadow-color),
  -3px  0px 0 var(--text-shadow-color),
   3px  0px 0 var(--text-shadow-color),
  -3px  3px 0 var(--text-shadow-color),
   0px  3px 0 var(--text-shadow-color),
   3px  3px 0 var(--text-shadow-color);
    }
    section.benefits{
      background-color: var(--orange);
        z-index: 1;
      position: relative;
      padding: 4rem 1rem 7rem;
      text-align: center;
    }
    section.cupbot{
      background-color: var(--yellow);
    }
    section.cupbot a{
          background: var(--orange);
    color: #000;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 20px;
    }
    section.cupbot a:hover{
      background: #000;
    color: var(--orange);
    }


    footer {
      background: var(--gray-dark);
      color: var(--white);
      text-align: center;
      padding: 1rem 10px;
      font-size: 0.9rem;
          width: 100%;
    }
    /*En construcción*/
    .makersito-wrapper{
        position: absolute;
        width: 300px;
        height: 300px;
        overflow: hidden;
    }
    .makersito-wrapper img{
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        object-fit: contain;
    }
    section.instructivo{
      background-color: var(--teal);      
    }

.glider img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.glider-dot{
  background-color: #000 !important;
}
.glider-dot.active{
  background-color: #fff !important;
}
.glider-next, .glider-prev{
  color: #000 !important
}
.glider-next.disabled, .glider-prev.disabled{
  color: #ccc !important
}

    @media screen and (min-width:768px){
        header{
          padding: 2rem;
        }
        header h1 {
            font-size: 5.5rem;            
        }  
        header p {
            font-size: 2rem;
        } 
        .hero h2{
            font-size: 4rem;
        }
        section h2{
            font-size: 4.5rem;
        }
        footer{
          padding: 1rem;
        }
    }
@keyframes balance {
  0%   { transform: rotate(-2deg); }
  100% { transform: rotate(2deg); }
}
@keyframes peek {
  0%, 33%, 100%   { transform: translateX(100%); } /* Escondido */
  34%, 66%        { transform: translateX(0); }    /* Visible */
}
@keyframes peek-right {
  0%, 66%, 100% {
    transform: scaleX(-1) translateX(100%);
  }
  67%, 99% {
    transform: scaleX(-1) translateX(0);
  }
}