*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

  @font-face {
    font-family: "Just Sans";
    src: url("./assets/fonts/just-sans-regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

  @font-face {
    font-family: "Just Sans";
    src: url("./assets/fonts/just-sans-bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

  @font-face {
    font-family: "Chunko";
    src: url("./assets/fonts/chunko-bold.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}

  :root{
    --color-primary: #EA750C;
    --color-secundary: #132A30;
    --color-text: #5a5a5a;
    --color-bg-light: #FFF7EC;
    font-size: 16px;
    font-family: Just Sans, sans-serif;
    font-weight: 400;
    color: var(--color-text);
    scroll-behavior: smooth;
  }

  .container{
    width: 100%;
    max-width: 1200px;
    display: flex;
    gap: 2rem;
    padding: 1rem;
    margin-inline: auto;
  }

  h2{
    color: var(--color-primary);
    font-family: Chunko;
    font-size: 2.5rem;
  }

  h3{
    font-weight: bold;
    font-size: 1.5rem;
  }

  p{
    font-size: 1.4rem;
  }

  .button{
    background-color: var(--color-primary);
    color: #fff;
    padding: 0.5rem 2.5rem;
    text-decoration: none;
    border-radius: 2em;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.4rem;
    transition: background-color .15s ease, box-shadow .15s ease;
    &:hover{
      background-color:#ff9c2b;
      box-shadow: 0 2px 10px rgba(0,0,0,.25);
    }
  }

  .button--dark{
    background-color: var(--color-secundary);
    &:hover{
      background-color:#416b75;
      box-shadow: 0 2px 10px rgba(0,0,0,.25);
    }
  }

  .title--dark{
    color: var(--color-secundary);
  }

  img{
    max-width: 100%;
  }

  section{
    padding-block: 2rem;
    position: relative;
  }

  ul{
    margin-left: 1rem;
  }

  li{
    font-size: 1.4rem;
    &::marker{
      color: var(--color-primary);
    }
  }

  .circle-separator{
    background-image: url("./assets/icons/material-symbols--circle.svg");
    position: absolute;
    width: calc(100% + 1rem);
    height: 1.5rem;
    top: -1.5rem;
    left: -1rem;
    background-size: 3rem;
  }

  .visually-hidden{
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
  }

  header{
    background-color: var(--color-primary);
    
    & a{
        color: #fff;
        text-decoration: none;
        font-size: 1rem;
        text-transform: uppercase;
        font-weight: bold;
        &:hover{
            text-decoration: underline;
        }

        &:nth-child(2){
            border-inline: 1px solid var(--color-secundary);
            padding-inline: 1rem;
        }
        
        &.button{
            font-size: 1rem;
        }
    }

    & .container{
        justify-content: flex-end;
        align-items: center;
        max-width: 100%;
    }
  }

.section__video{
  display: flex;
  padding: 0;
  & iframe{
      width: 100%;
      height: auto;
      /* height: calc(100vh - 3rem);*/
      aspect-ratio: 16/9;
      border: none;
  }
}

.section__2{
  background-color: var(--color-secundary);
  padding-bottom: 6rem;
  & .container{
      flex-direction: column;
      text-align: center;
      color: #fff;
      max-width: 900px;
      align-items: center;
  }

  & p{
    max-width: 700px;
    width: 100%;
  }
}

.section__3{
  padding-block: 3rem;
  & .container{
    align-items: center;
    justify-content: center;
  }

  & .section__3__image{
    width: 40%;
  }

  & .section__3__content{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

.section__beneficios{
  text-align: center;

  & .container{
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }

  & .cards{
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;

    & .card{
      background-color: var(--color-bg-light);
      flex: 1;
      padding: 1rem 2rem;
      border: 2px solid var(--color-text);
      border-radius: 1.5rem;

      & p{
        font-size: 1.3rem;
        margin-top: 1rem;
      }
    }
  }
}

.section__incentivos{
  background-color: var(--color-primary);
  & .container{
    flex-direction: column;
  }

  & .incentivos__title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6rem;
    color: #fff;
    & h2{
      color: inherit;
      max-width: 400px;
    }

    & p{
      font-size: 1.2rem;
      padding-right: 6rem;
    }
  }

  & .items{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;

    & .item{
      color: #fff;
      & h3{
        font-size: 1.3rem;
        margin-top: 0.5rem;
      }
    }
  }
}

.section__pasos{

  background-image: linear-gradient(#fff 60%, #CFCFCF);
  z-index: 2;

  & .container{
    align-items: center;
  }

  & .pasos__content{
    width: 45%;
    & .pasos__items{
      margin-top: 1rem;
      & .item{
        display: flex;
        gap: 2rem;
        margin-bottom: 4rem;
        & .item__num{
          background-color: var(--color-primary);
          color: #fff;
          font-size: 1.6rem;
          font-weight: bold;
          min-width: 3rem;
          width: 3rem;
          min-height: 3rem;
          height: 3rem;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          position: relative;
          
          &::after{
            content: "";
            height: 3rem;
            width: 1px;
            display: block;
            background-color: var(--color-primary);
            position: absolute;
            top: calc(100% + 0.5rem);
          }
        }
        & p{
          font-size: 1rem;
        }

        &:last-child .item__num::after{
          display: none;
        }
      }
    }
  }

  & .circle-separator{
    background-image: url("./assets/icons/material-symbols--circle-cfcfcf.svg");
    top: auto;
    bottom: -1.5rem;
    transform: rotate(180deg);
  }
}

.section__form{
  background-color: var(--color-bg-light);
  padding-block: 4rem 3rem;
  & .container{
    max-width: 600px;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  & .form__content__icon{
    margin-bottom: -2rem;
    font-size: 3rem;
    color: var(--color-primary);
  }
}

footer{
  background-color: var(--color-secundary);

  & .container{
    justify-content: center;
  }

  p{
    color: #fff;
    font-size: 1rem;
    text-align: center;
  }
}


@media screen and (max-width: 767px) {
  .container{
    flex-direction: column;
  }

  .section__3{
    & .section__3__image, & .section__3__content{
      width: 100%;
    }
  }

  .section__incentivos{
    & .incentivos__title{
      flex-direction: column;
      gap: 1rem;
      
      & h2{
        max-width: 100%;
      }

      & p{
        padding: 0;
      }
    }

    & .items{
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .section__pasos{
    & .pasos__content{
      width: 100%;
    }
  }

  .section__form{
    & .form__content{
      width: 100%;
      padding: 0;
    }
  }





}