p {
  color: #000;
}
article {
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
picture {
  width: 100%;
}
.modelos {
  flex-direction: column;
  font-size: 1rem;
  display: flex;
  align-items: center;
}
.modelos ul {
  gap: 0;
  overflow: visible;
  overflow-y: visible;
}

.modelos-descripcion {
  align-content: center;
  align-items: center;
  border-bottom: 1.5px solid var(--colorPrimario);
  display: flex;
  justify-content: center;
  padding: 1em;
  width: 90%;
  border-bottom: 0.9px solid #575555;

  .modelo-info {
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 1em;
    text-align: start;
    width: 55%;

    p {
      line-height: 1.5rem;
      width: 100%;
    }
  }
  .multimedia-container {
    width: 50%;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #eee;
    .multimedia {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 0.5rem;
      overflow: hidden;

      .img-container,
      .video-container {
        position: absolute;
        background-color: #fff;
        width: 100%;
        height: 90%;
        inset: 0;
        top: 0;
      }

      > .img-container {
        height: 100%;
        display: flex;

        img {
          display: flex;
          width: 100%;
          object-fit: scale-down;
          filter: drop-shadow(1px 1px 1rem #484444);
        }
      }

      > .video-container {
        background-color: #eee;
        height: 100%;
        z-index: -1;
        transition: 0.45s ease-in-out;
        iframe {
          width: 100%;
          height: 100%;
          object-fit: scale-down;
        }
      }
      > .video-container-active {
        z-index: 1;
      }
    }
    .controls {
      display: flex;
      justify-content: start;
      width: 100%;
      padding: 0.3rem;
      border-top: 1px solid #eee;

      button {
        width: 35px;
        height: 35px;
        user-select: none;
        img {
          width: 100%;
          object-fit: scale-down;
        }
      }
      button:active {
        filter: invert(9);
      }
    }
  }
}

.cta-btn {
  align-items: center;
  background-color: #fffffffd;
  display: flex;
  flex-direction: column;
  height: auto;
  text-align: center;
  width: 100%;
}
.cta-btn ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 90%;
  gap: 1rem;
  padding: 2rem;
}
.iconos {
  li {
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.5rem;
    border: 1px solid #eee;
    flex: 1;
    padding: 1rem;
    transition: 0.3s all ease;
    border-radius: 5px;
    box-shadow: 1px 1px 1rem #eee;

    a,
    button {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      transition: 0.3s all ease-in-out;
      height: auto;
      gap: 1rem;

      .img-container {
        width: 60px;
        height: 60px;
        border: 1px solid #222;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        transition: 0.3s all ease-in-out;

        img {
          object-fit: scale-down;
          width: 35px;
          height: 35px;
        }
      }
    }
  }

  li:hover {
    border: 1px solid #222;

    .img-container {
      background-color: #eee;
      filter: invert(1);
    }
  }
}
.modelo-info {
  h1 {
    color: var(--colorPrimario);
    font-size: 3rem;
  }
  h2 {
    font-size: 1.9rem;
    margin: 0;
    color: var(--colorPrimario);
  }
  p {
    font-size: 1rem;
    text-align: start;
  }

  .contactar-wp {
    margin-top: 2rem;
    width: 100%;
    display: flex;
    justify-content: start;

    a {
      background-color: var(--WhatsAap);
      padding: 1em;
      color: #eee;
      border-radius: 0;
      width: min-content;
      text-wrap: nowrap;
      gap: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 1px 1px 1rem #eee;
      border-radius: 5px;
      img {
        margin: 0;
        object-fit: scale-down;
      }
    }
  }
}

.contactar-wp a:hover {
  background-color: #0d6d11;
}
.equipamiento {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;

  h2 {
    border-bottom: 2px solid var(--colorPrimario);
    font-size: 2rem;
    padding-bottom: 10px;
  }
  ul {
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;

    padding: 1em;
    width: 90%;
    li {
      align-items: center;
      border: 1px solid rgb(179, 176, 176);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 200px;
      padding: 10px;
      width: 300px;
      img {
        width: 90%;
        object-fit: contain;
      }
    }
  }
}

.galeria {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 80%;
  h2 {
    border-bottom: 2px solid var(--colorPrimario);
    font-size: 2rem;
    padding-bottom: 10px;
    width: auto;
  }
  ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(1, 1fr);
    width: 90%;
    padding: 1rem;
    li {
      border: 0.5px solid #c4c4c4;
      display: grid;
      width: 100%;
      align-items: stretch;
    }

    .pic-1,
    .pic-10 {
      grid-column: 1 / 3;
      grid-row: 3/ 1;
      width: 100%;
    }
  }
}

.galeria img {
  object-fit: cover;
  width: 100%;
}
.galeria ul li img:hover {
  cursor: pointer;
}
.modal-gallery {
  flex-direction: column;
  justify-content: center;
  transition: 0.45s all ease;

  .modal-modelo-img {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 1rem;
    gap: 1rem;
    max-width: 1100px;
    height: 700px;
    border-radius: 10px;
    background-color: #202020;
    border: 1px solid #eee;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    > a {
      align-content: center;
      align-items: center;
      background-color: #fff;
      color: #000;
      display: flex;
      height: 1rem;
      justify-content: center;
      margin-bottom: 1em;
      padding: 1em;
      text-align: center;
      text-decoration: none;
      width: 1rem;
    }
  }
}

.colores-disponible {
  align-content: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.colores-disponible h2 {
  border-bottom: 2px solid var(--colorPrimario);
  font-size: 2rem;
  padding-bottom: 10px;
  width: auto;
}
.colores-contenedor {
  align-content: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  width: 100%;

  span {
    display: flex;
    flex-direction: column;
  }

  img {
    width: 60%;
    max-width: 700px;
    object-fit: scale-down;
  }
  p {
    border-left: 2px solid red;
    font-size: 1rem;
    padding: 0.5rem;
  }
  small {
    text-transform: uppercase;
    border: 1px solid red;
    padding: 0.7rem 0.9rem;
  }

  small:empty {
    border: none;
  }
  ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
    width: auto;
    padding: 1em;
    li {
      background-color: #000;
      border: 0.5px solid #6c6d71;
      cursor: pointer;
      height: 35px;
      width: 35px;
      transition: 0.35s all;
    }
    li:active {
      border: 1px solid #518bdc;
      transform: scale(0.9);
    }
  }
}

.accesorios {
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  text-align: center;
  width: 80%;
  margin-bottom: 3rem;
}
.accesorios h2 {
  border-bottom: 2px solid var(--colorPrimario);
  font-size: 2rem;
  padding-bottom: 10px;
  width: auto;
}
.accesorios ul {
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: center;
  margin: auto;
  width: 100%;
}
.accesorios ul li {
  display: flex;
}
.accesorios figure {
  margin: 0;
  text-align: center;
}
.accesorios figcaption {
  padding: 5px;
}
.accesorios figure img {
  border-radius: 5px;
  display: flex;
  object-fit: scale-down;
  width: 100%;
}

#modeloOption {
  display: none;
}

.button.button-submit {
  border: 2px solid #eee;
  border-top: 2px solid transparent;
  content: " ";
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: transparent;
  background-color: transparent;

  animation: button-submit 0.57s linear infinite;
}

form .button-submit:hover {
  color: transparent;
  background-color: transparent;
}

@keyframes button-submit {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 750px) {
  .modelos-descripcion {
    flex-direction: column-reverse;
    padding: 0;

    .modelo-info {
      align-items: center;
      width: 100%;

      h1 {
        font-size: 2rem;
        text-align: center;
      }
      h2 {
        font-size: 1rem;
      }
      p {
        font-size: 1rem;
        padding: 0;
      }
      .button {
        width: 50%;
      }

      .contactar-wp {
        a {
          width: 100%;
          img {
            width: 1rem;
          }
        }
      }
    }

    .multimedia-container {
      width: 100%;
      height: 300px;

      .multimedia {
        .img-container {
          align-items: center;
          img {
            border-radius: 0;
            width: 100%;
          }
        }
      }
    }
  }

  .cta-btn ul {
    flex-direction: column;
    gap: 1em;
  }
  .cta-btn li {
    border: 1px solid #eee;
    padding: 1em;
    width: 100%;
  }
  .equipamiento {
    width: 100%;
  }
  .equipamiento ul {
    width: 100%;
    li {
      width: 100%;
      gap: 1rem;
      text-align: center;
    }
  }
  .equipamiento img:hover {
    transform: none;
  }
  .galeria {
    padding: 10px;
    width: 100%;
  }
  .galeria ul {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
  .modal-galery-js {
    height: 90%;
    padding: 10px;
    width: 100%;
  }
  .modal-galery-js img {
    width: 100%;
  }
  .colores-contenedor {
    flex-direction: column;
  }
  .colores-contenedor img {
    width: 100%;
  }
  .colores-contenedor ul {
    flex-direction: row;
  }
  .colores-contenedor p {
    border: none;
    border-top: 2px solid red;
    padding: 1em;
    width: 50%;
  }
  .contactar {
    overflow-y: scroll;
    width: 100%;
  }
}