/* VARIABLES ROOT/FUENTES */

:root {
  --color-blanco: #f1f1f1;
  --color-azul: #0a48e4;
  --color-azul-claro: #25cfe9;
  --color-azul-opaco: rgba(79, 123, 233, 0.6);
  --color-azul-oscuro: #1744b7;
  --color-shadow-text: rgb(13, 49, 116);
  --color-morado: rgb(101, 28, 220);
  --color-morado-secundario: #4e0bc2c9;
  --color-morado-claro: rgb(169, 103, 211);

  color-scheme: light dark;
}

/* GENERAL */

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

html {
  font-size: 62.5%;
}

body {
  font-family: 'Roboto', sans-serif;

  &.light {
    background: linear-gradient(270deg,
        var(--color-azul) 0%,
        #86a9ff 1%,
        rgb(212, 255, 239) 11% 88%,
        #86a9ff 99%,
        var(--color-azul) 100%);
    overflow-y: scroll;
    scrollbar-color: var(--color-azul-opaco) transparent;
  }

  &.dark {
    color-scheme: dark;

    scrollbar-color: white transparent;
    background: linear-gradient(250deg,
        var(--color-morado-claro) 2%,
        var(--color-morado) 17% 39%,
        var(--color-morado-claro) 50%,
        var(--color-morado) 61% 75%,
        var(--color-morado-claro) 90%);

    &>main {

      & p,
      li,
      a {
        text-shadow: 0.3px 0.3px var(--color-azul), 0.3px -0.3px var(--color-azul), -0.3px 0.3px var(--color-azul), -0.3px -0.3px var(--color-azul);
      }
    }
  }

  &.light {
    color-scheme: light;
  }

  & a {
    text-decoration: none;
  }

  &>main {

    & h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      text-shadow: 0.8px 0.8px var(--color-azul),
        0.8px -0.8px var(--color-azul),
        -0.8px 0.8px var(--color-azul),
        -0.8px -0.8px var(--color-azul);

      color: light-dark(white, white);
    }

    & p,
    li,
    a {
      text-shadow: 0.5px 0.5px azure, 0.5px -0.5px azure, -0.5px 0.5px azure, -0.5px -0.5px azure;
    }
  }

  & p,
  a,
  li,
  ul {
    font-size: 2rem;
    font-weight: 550;
  }

  &>main a,
  li,
  p {
    color: light-dark(#074a91, var(--color-blanco));
  }

  & h1 {
    font-size: 5rem;
  }

  & h2 {
    font-size: 4.5rem;
  }

  & h3 {
    font-size: 4rem;
  }

  & h4 {
    font-size: 3.5rem;
  }

  & h5 {
    font-size: 2rem;
  }

  & h6 {
    font-size: 1.5rem;
  }

  & img {
    border-radius: 0.5rem;
    box-shadow: 0 0 1rem 0.2rem var(--color-azul-claro);
  }
}

/* ===========HEADER=========== */

header {
  height: 15rem;
  display: grid;
  grid-template: 1fr 1fr / 1fr;

  & h2,
  a {
    color: light-dark(white, white);
  }

  &>section {
    background-color: light-dark(white, white);
    /* modo oscuro */
    height: 6rem;
    display: flex;
    flex-direction: row;
    width: 100%;

    &>div {
      height: inherit;
    }

    &>div:nth-of-type(1) {
      width: inherit;
      display: flex;
      place-content: center;

      &>h2 {
        min-width: fit-content;
        font-size: 6rem;
        font-family: unset;
        font-style: italic;

        &:nth-of-type(1) {
          color: azure;
          text-shadow: 4px 4px var(--color-shadow-text),
            1px -1px 1px var(--color-shadow-text),
            -1px 1px 1px var(--color-shadow-text),
            -1px -1px 1px var(--color-shadow-text);
        }

        &:nth-of-type(2) {
          position: absolute;
          color: #09f;
          /* configurar */
          animation: wave 3s ease-in-out infinite;
        }
      }
    }

    &>div:nth-of-type(2) {
      min-width: fit-content;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 2rem;
      margin-right: 4rem;

      &>a {
        font-size: 2.8rem;
        height: 4rem;
        width: 4rem;
        text-align: center;
        line-height: 4rem;
        color: light-dark(var(--color-azul), azure);
        /* modo oscuro */
        background-color: light-dark(azure, var(--color-azul));
        border-radius: 50%;
        box-shadow: 0 0 1rem 0.2rem var(--color-azul-claro);
      }
    }

  }

  >nav {
    background-color: light-dark(var(--color-azul), var(--color-azul));
    height: 9rem;
    display: flex;
    align-items: center;

    &>section:nth-of-type(1) {
      margin-left: 5vw;
      width: 20%;

      &>a {
        &>img {
          height: 10rem;
          border-radius: 2rem;
        }
      }
    }

    &>section:nth-of-type(2) {
      width: 80%;
      display: flex;
      justify-content: flex-end;
      gap: 4rem;
      margin-block: auto;
      margin-inline-end: 5vw;

      &>a {
        border-bottom: solid 0.4rem var(--color-blanco);
        font-size: 2rem;
        align-self: center;
      }

      &>div {
        border: 0.2rem solid white;
        border-radius: 10%;
        z-index: 2;
        /* borrar→ cuando se corrija el modo oscuro */

        &>button {
          display: flex;
          flex-direction: column;
          inline-size: 3.6rem;
          block-size: 3rem;
          padding-inline: .5rem;
          border: none;
          background-color: transparent;
          justify-content: space-evenly;
          cursor: pointer;

          &>div {
            background-color: white;
            block-size: .3rem;
            inline-size: 2.6rem;
            border-radius: .5rem;
            transition: all .5s;
            transform-origin: left;
          }
        }
      }

      &>aside {
        z-index: 1;
        margin-top: 3rem;
        position: absolute;
        border: solid 2px light-dark(azure, beige);
        background-color: light-dark(white, white);
        padding: 1rem 0 0;
        border-radius: 1%;

        &>a {
          color: light-dark(var(--color-azul), var(--color-azul));
          display: block;
          margin: 1rem 0;
          font-weight: bold;
          text-indent: 1.5rem;
          padding-inline-end: 1.5rem;
        }

        &>ol {
          background-color: light-dark(cornflowerblue, dodgerblue);
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;

          &>li {
            list-style-type: none;
            width: 80px;
            height: 30px;
            padding: 0 5px;
            background-color: var(--color-azul);
            display: inherit;
            justify-content: space-between;
            align-items: center;
            position: relative;
            cursor: pointer;
            border-radius: 50px;
            border: solid 2px azure;

            &::before {
              content: "";
              position: absolute;
              height: 24px;
              width: 25px;
              border-radius: 50%;
              background-color: light-dark(lightcyan, steelblue);
              border: solid thin transparent;
              left: 0;
              right: unset;
              transition: left 0.5s ease;
            }

            &.active::before {
              right: 0;
              left: unset;
              left: calc(100% - 26px);
            }

            &>i {
              color: azure;
            }
          }
        }
      }
    }
  }
}

/* ===========FOOTER=========== */

footer {
  background-color: var(--color-azul);
  margin-top: 5rem;
  padding-top: 1rem;
  border-block-start: 5px solid var(--color-azul-opaco);

  & p {
    font-size: 1.6rem;
  }

  & h1,
  h5,
  h6,
  a,
  button,
  ul,
  li,
  p,
  em {
    color: light-dark(white, white);
    ;
  }

  &>section {
    width: 90vw;
    margin: auto;
    display: grid;
    justify-items: center;
    justify-content: center;
    grid-template-areas:
      "titulo titulo titulo"
      "opc info asesor"
      "term term term";

    &>h1 {
      grid-area: titulo;
      margin-block: 2rem 4rem;
    }

    &>div {
      width: 30vw;
      border-inline-start: 4px solid var(--color-azul-opaco);
    }

    &>div:nth-of-type(1) {
      grid-area: opc;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;

      &>a {
        width: 45%
      }

      & button {
        padding: 10px 0 10px 5px;
        border-radius: 1rem;
        cursor: pointer;
        width: 150px;
        background-color: transparent;
        border: none;
        text-align: left;
        font-size: 2.5rem;
        font-weight: 500;
      }
    }

    &>div:nth-of-type(2) {
      grid-area: info;
      display: flex;
      flex-direction: column;
      align-items: center;

      &>div {
        width: 80%;
        display: flex;
        justify-content: space-evenly;

        &>a {
          font-size: 5rem;
          margin-block-end: 1.5rem;

          &:nth-of-type(4) {
            display: none;
          }
        }
      }

      &>ul {
        list-style-type: none;
        margin-block-start: 2rem;
        width: 70%;

        &>li {
          margin-bottom: 1rem;

          &>p {
            text-indent: 2rem;

            &:nth-of-type(1) {
              text-indent: 0rem;
            }

            &:nth-of-type(2) {
              display: inline;
              margin-inline-start: 1rem;
              letter-spacing: .05rem;
            }

            &:nth-of-type(3) {
              margin-block: .5rem;
            }
          }
        }
      }
    }

    &>div:nth-of-type(3) {
      grid-area: asesor;
      border-inline-end: 4px solid var(--color-azul-opaco);
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      &>article {
        display: flex;
        flex-direction: column;
        justify-content: center;

        &>h5 {
          margin-block-end: .5rem;
        }
      }

      &>img {
        height: 13rem;
        border-radius: 50%;
      }
    }

    &>h6 {
      width: 90vw;
      grid-area: term;
      text-align: center;
      margin-block: 2rem;

      &>a {
        border-bottom: 1px solid white;
      }

      &>p {
        margin-block-start: 0.5rem;
        font-weight: lighter;
      }
    }

  }
}

/* ===========CLASES=========== */

.inactive {
  display: none;
}

header>nav>section:nth-of-type(2)>div {

  &:has(.cambio) {
    border-color: light-dark(azure, beige);
    border-block-end: none;
  }

  &>.cambio {

    background-color: white;
    /* modo oscuro */

    &>div {
      margin-inline: .5rem;
      background-color: var(--color-azul);
      /* modo oscuro */
      inline-size: 2.35rem;
    }

    &>div:nth-of-type(1) {
      transform: rotate(45deg);
    }

    &>div:nth-of-type(2) {
      opacity: 0;
    }

    &>div:nth-of-type(3) {
      transform: rotate(-45deg);
    }
  }
}

/* ===========QUERIES=========== */

@media (max-width:1340px) {
  footer>section>div:nth-of-type(2)>ul>li>p {
    text-indent: 0;
  }
}

@media (max-width:1100px) {
  footer>section>div:nth-of-type(3) {
    flex-direction: column-reverse;

    &>article {
      align-items: center;
    }
  }
}

@media (max-width:780px) {
  header {
    &>section {
      &>div:nth-of-type(1) {
        align-items: flex-end;

        &>h2 {
          font-size: 5rem;
        }
      }

      &>div:nth-of-type(2) {
        margin-right: 1rem;

        &>a:nth-of-type(4) {
          display: none;
        }
      }
    }

    &>nav {
      &>section:nth-of-type(1) {
        margin-left: 1rem;
      }

      &>section:nth-of-type(2) {
        margin-inline-end: 3vw;
        gap: 1.5rem;

        &>a {
          display: none;
        }

        &>a:nth-of-type(1) {
          display: inline;
          border-bottom: solid 0.2rem var(--color-blanco);
          font-size: 1.8rem;
        }
      }
    }
  }

  footer>section>section:nth-of-type(1)>div>a {
    margin-inline-end: 3.5rem;
  }
}

@media (max-width:600px) {
  footer {
    margin-top: 7rem;

    &>section {
      grid-template-areas:
        "titulo"
        "opc"
        "asesor"
        "info"
        "term";

      &>div {
        width: 90vw;
        border-inline: 0;
      }

      &>div:nth-of-type(1) {
        width: 96vw;
        flex-direction: row;
        border-block-end: 3px solid var(--color-blanco);
        align-items: flex-start;

        & button {
          width: 25vw;
          text-align: center;
          padding: 10px 0;
          border: 2px solid white;
          border-bottom: none;
          background-color: #0181e573;
          border-radius: 30% 30% 0 0;
        }

        &>a {
          width: 25vw;

          &>button {
            border: none;
            background-color: transparent;
            border-bottom: 3px solid var(--color-blanco);
          }
        }
      }

      &>div:nth-of-type(2) {

        &>div {
          display: flex;
          justify-content: space-around;
          width: 90vw;

          &>a {
            &:nth-of-type(4) {
              display: inline-block;
            }
          }
        }

        &>ul {
          width: inherit;

          &>li {

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

      &>div:nth-of-type(3) {
        margin: 3rem 0;
        justify-content: space-between;
        height: 80%;
        border-inline: 0;

        &>article {
          margin-left: 0%;
        }
      }
    }
  }
}

@media (max-width:500px) {
  header {
    &>section>div:nth-of-type(1)>h2 {
      font-size: 4rem;
    }

    &>nav>section:nth-of-type(1)>a>img {
      height: 7rem;
    }
  }
}

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

    &>header>section>div:nth-of-type(2)>a {
      color: var(--color-azul);
      background-color: azure;
    }

    &>main {

      & a,
      li,
      p {
        color: #074a91;
      }
    }
  }
}


/* ===========ANIMACIONES=========== */

@keyframes wave {

  0%,
  100% {
    clip-path: polygon(0% 47%,
        10% 48%,
        33% 54%,
        54% 60%,
        70% 61%,
        84% 59%,
        100% 52%,
        100% 100%,
        0% 100%);
  }

  50% {
    clip-path: polygon(0% 60%,
        15% 65%,
        34% 66%,
        51% 62%,
        67% 50%,
        84% 45%,
        100% 45%,
        100% 100%,
        0% 100%);
  }
}


/* @media(prefers-color-scheme:dark) {body.light.device {color-scheme: dark;&>main>article {&>h1 {border-bottom-color: var(--color-azul);}}}} */