body.dark>main>section:nth-of-type(1)>article>section>article {
  background: linear-gradient(90deg, var(--color-azul), var(--color-morado-secundario));
}

/* ===========MAIN=========== */

/* MAIN
→ section → ...
→ section → ...
→ section → ...
*/

main {
  margin-top: 5rem;
  margin-inline: auto;
  width: 90vw;

  & h1,
  h3 {
    border-block-end: 4px solid light-dark(var(--color-azul), azure);
  }

  &>section:nth-of-type(1) {
    display: flex;
    justify-content: space-around;

    &>div {
      max-width: 40vw;
      position: relative;
      &>img {
        top: -44%;
        width: 100%;
        height: fit-content;
        position: sticky;
      }
    }

    &>article {
      padding: 5rem 2rem 0 4rem;
      width: 50vw;

      & h3 {
        border-block-end: none;
      }

      &>p {
        margin-top: 3rem;
      }

      &>h3 {
        margin-top: 3rem;
      }

      &>section {
        transition: .1s ease;
        width: 100%;
        overflow-x: scroll;
        scrollbar-width: auto;
        display: flex;

        &>article {
          scroll-snap-align: center;
          min-width: 48%;
          padding: 2rem;
          margin-block: 2rem;
          margin-inline: 1%;
          border-radius: 5%;
          box-shadow: 1px 1px 5px 0px var(--color-blanco);
          background: linear-gradient(180deg, var(--color-azul-opaco) 0%,
              var(--color-azul) 10% 85%, var(--color-azul-claro) 100%);

          & h4,
          h5,
          li {
            color: light-dark(azure, var(--color-blanco))
          }

          &>h4 {
            border-bottom: .2rem solid var(--color-blanco);
          }

          &>h5 {
            margin-block: 1rem;
          }

          &>ul {
            list-style-type: none;

            &>li {
              text-shadow: none;
            }
          }
        }
      }
    }
  }

  &>section:nth-of-type(2) {
    margin-top: 8rem;

    &>h1 {
      border-bottom: .5rem solid light-dark(var(--color-azul-oscuro), var(--color-blanco));
      padding-block-end: .5rem;

      & strong {
        color: light-dark(#0fe, white)
      }
    }

    &>section {
      margin: 5rem auto 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 1rem;

      &>div {
        margin-bottom: 5rem;
        width: 26vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;

        &>h3 {
          text-align: center;
          padding-block-end: .5rem;
          margin-bottom: 3rem;
          width: inherit;
        }

        &>img {
          max-height: 400px;
          aspect-ratio: 3/4;
          object-fit: cover;
        }
      }
    }

  }

  &>section:nth-of-type(3) {
    margin-top: 5rem;

    &>h2 {
      border-block-end: solid 4px light-dark(var(--color-azul-oscuro), var(--color-blanco));
      padding-block-end: .5rem;
    }

    &>div:nth-of-type(1),
    p {
      margin-top: 3rem;
    }

    &>div>ul>li {
      margin-bottom: .5rem;
    }
  }
}

@media (max-width:1150px) {
  main>section:nth-of-type(1) {
    flex-direction: column;
    align-items: center;

    &>div {
      max-width: 60vw;
    }

    &>article {
      width: 85vw;
    }
  }
}

@media (max-width:1000px) {
  main>section:nth-of-type(2)>section>div {
    width: 35vw;
  }
}

@media (max-width:770px) {
  main>section:nth-of-type(2) {
    &>h1 {
      font-size: 3rem;
    }

    &>section {
      align-content: center;
      flex-direction: column;
    }
  }
}

@media (max-width:600px) {
  main {
    &>section:nth-of-type(1) {

      &>div {
        max-width: 90vw;
      }

      &>article {
        margin: 5rem 0;
        padding: 0;

        &>p {
          margin-top: 2rem;
        }

        &>section>article {
          min-width: 99%;
        }
      }
    }

    &>section:nth-of-type(2) {
      margin-top: 0rem;

      &>h1 {
        border-bottom: none;
      }

      &>section>div {
        width: 100%;
      }
    }

    &>section:nth-of-type(3)>div>ul>li {
      margin-left: 1rem;
    }
  }
}

@media(prefers-color-scheme:dark) {
  body.light.device {
    color-scheme: dark;

    &>main {

      & h1,
      h2,
      h3 {
        border-block-end: 4px solid var(--color-azul);
      }

      &>section:nth-of-type(1)>article>section>article {

        & h4,
        h5,
        li {
          color: white;
        }
      }
    }
  }
}