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

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

main {

  &>section:nth-of-type(1n+3) {
    margin-inline: auto;
    width: 90vw;
    margin-top: 10rem;
  }

  &>section:nth-of-type(1) {
    position: relative;
    box-shadow: inset 0px -20px 25px -17px var(--color-blanco);
    ;

    &>button {
      font-size: 4vw;
      height: 15%;
      width: 3%;
      position: absolute;
      margin-block: auto;
      top: 50%;
      transform: translate(0, -50%);
      color: light-dark(rgb(255, 255, 255), var(--color-azul-claro));
      border: none;
      background: light-dark(rgba(255, 255, 255, 0.4), var(--color-azul-opaco));
      box-shadow: 0px 0px 5px 3px light-dark(rgb(255 255 255 / 40%), var(--color-azul-opaco));

      &:hover {
        background-color: light-dark(white, var(--color-azul-opaco));
        color: #09f;
      }

      &:nth-of-type(1) {
        left: 0.5%;

      }

      &:nth-of-type(2) {
        right: 0.5%;
      }
    }

    &>div {
      overflow-x: scroll;
      scrollbar-width: none;
      margin-block-start: 2rem;
      margin-inline: auto;
      scroll-snap-type: x mandatory;
      border-radius: 1rem;
      width: 98.5vw;

      &>div {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        &>a {
          &>picture {
            margin-inline: auto;

            &>img,
            source {
              box-shadow: none;
              width: 98.5vw;
              aspect-ratio: 8/3;
              scroll-snap-align: center;
            }
          }
        }
      }
    }
  }

  &>div {
    width: 100%;
    padding-block: 6rem 2rem;
    box-shadow: inset 0px 15px 25px -15px var(--color-blanco);


    &>img {
      display: block;
      max-width: 60vw;
      margin-inline: auto;
      box-shadow: none;
      max-height: 14rem;
    }

    &>div {
      box-shadow: 0px 30px 10px 3px var(--color-blanco);
    }
  }

  &>section:nth-of-type(2) {
    width: 100%;
    margin-inline: auto;
    padding: 2rem 1rem;
    gap: 1rem;
    display: flex;
    overflow-x: scroll;
    scrollbar-width: auto;

    &>a {
      &>img {
        height: 70vh;
        object-fit: cover;
        scroll-snap-align: center;
        transition: .1s ease;

        &:hover {
          transform: scale(105%);
        }
      }
    }
  }

  &>section:nth-of-type(3) {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 3rem;
    align-items: center;

    &>div {
      width: 48%;

      &>a {
        &>img {
          width: 100%;
        }
      }
    }

    &>article {
      width: 48%;

      & strong {
        color: yellow;
      }

      & i {
        color: rgb(153, 214, 255);
      }

      & e {
        color: rgb(94 255 26);
      }

      &>h2,
      h4 {
        font-style: italic;
        letter-spacing: 1px;
        color: light-dark(white, white);
      }

      &>p,
      h4 {
        padding-inline: 1.5rem;
        margin-block-start: 1rem;
      }

      &>p{
        margin-block-start: 2rem;
      }

      &>h2 {
        border-bottom: solid 2px light-dark(var(--color-azul), var(--color-blanco));
      }

      &>p {
        font-weight: 550;
        padding-inline-start: 2.5rem;
      }
    }
  }

  &>section:nth-of-type(4) {
    display: flex;
    flex-direction: column;

    &>h2 {
      border-block-end: solid 2px light-dark(var(--color-azul), var(--color-blanco));
      letter-spacing: 2px;
    }

    &>article {
      padding: 3rem 5rem 2rem;

      &>p {
        font-weight: 550;
      }
    }

    &>a {
      align-self: flex-end;
      margin-right: 10%;

      &>button {
        inline-size: 10rem;
        block-size: 4rem;
        background-color: light-dark(var(--color-azul), azure);
        box-shadow: 0 0 1rem .4rem var(--color-azul-claro);
        border: none;
        border-radius: 5%;
        font-size: 2rem;
        font-weight: 600;
        color: light-dark(azure, var(--color-azul));
        cursor: pointer;

      }
    }
  }
}

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

    &>div>a>picture>img,
    source {
      width: 98vw;
    }
  }
}

@media (max-width:800px) {
  main>div>img {
    max-width: 80vw;
  }
}

@media(max-width:750px) {
  main {
    &>section:nth-of-type(3) {
      min-height: 70vh;
      /* borrar → si no se encuentra utilidad */
      width: 85vw;

      &>div {
        min-width: 300px;
        width: 55%;
      }

      &>article {
        width: 40%;

        & b {
          display: none;
        }

        &>h4 {
          padding-inline: unset;
        }

        &>p {
          padding-inline: 1rem 0;
        }
      }
    }
  }
}

@media (max-width:600px) {
  main {
    &>section:nth-of-type(1n+3) {
      margin-block: 5rem;
    }

    &>section:nth-of-type(1)>div>div>a>picture>img,
    source {
      aspect-ratio: 9/7;
    }

    &>div {
      padding-block: 5rem 1.5rem;

      &>img {
        max-width: 98vw;
      }
    }

    &>section:nth-of-type(2) {
      &>a {
        &>img {
          height: auto;
          width: 95vw;

          &:hover {
            transform: scale(100%);
          }
        }
      }
    }

    &>section:nth-of-type(3) {
      display: grid;
      grid-template-areas:
        "nacional"
        "link_nacional"
        "internacional"
        "link_internacional";

      &>div {
        width: 90%;
        margin-inline: auto;

        &:nth-of-type(1) {
          grid-area: link_nacional;
        }

        &:nth-of-type(2) {
          grid-area: link_internacional;
        }
      }

      &>article {
        width: 100%;

        &:nth-of-type(1) {
          grid-area: nacional;
        }

        &:nth-of-type(2) {
          grid-area: internacional;
          margin-block-start: 2rem;
        }

      }
    }

    &>section:nth-of-type(4) {

      &>article {
        padding: 3rem 1.5rem;

        &>p:nth-of-type(2) {
          display: none;
        }
      }
    }
  }
}

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

    &>main>section {
      &:nth-of-type(3)>article>h2 {
        border-bottom: solid 2px var(--color-azul)
      }
      &:nth-of-type(4)>h2 {
        border-block-end: solid 2px var(--color-azul)
      }
    }
  }
}