@charset "UTF-8";

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

a {
  background-color: transparent;
  color: unset;
}

b,
strong {
  font-weight: bolder;
}

img {
  border-style: none;
  width: fit-content;
  /* height: fit-content; */
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

@font-face {
  font-family: 'Roboto-Light';
  src: url('/core/css/Roboto-Light.ttf');
}

body {
  font-family: "Roboto", "Arial", sans-serif;
  margin: 10px;
  background: #f1f1f1;
}

/* coloca variables para los efectos de retraso */

.js {
  color: brown;
  text-align: center;
}

.tlfn {
  display: flex;
  justify-content: center;
  font-size: 34px;
}

.articulo {
  text-align: left;
  font-size: 14px;
  margin: 40px;
}

.divArticle {
  padding: 20px;
  /* width: max-content; */
  border: 5px solid #d8d8d8;
}

.titulo {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5rem;
  text-align: center;
  color: #88d3bd;
  margin: 3px;
}

.titulo_principal {
  position: absolute;
  margin-top: 56px;
  margin-left: 3px;
  color: #3e6e9d;
  /* box-shadow: 0px 0px 0px 0px rgb(136, 136, 136), 0px 10px 0px 0px rgb(223, 223, 223);
  border-bottom-right-radius: 10%; */
}

.titulo__h5 {
  font-size: 1.1rem;
  margin-top: 4px;
  color: #596774;
}

a:link,
a:visited,
a:active {
  display: flex;
  margin-left: 2px;
  text-decoration: none;
  align-items: center;
}

.cabecera {
  display: flex;
  /* align-self: center; */
  background: #e8e8e8;
  grid-area: cabecera;
  /* gap: 1em; */
  box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
  justify-content: space-around;
  align-items: center;
}

.contenedor {
  display: grid;
  /* overflow: hidden; */
  grid-template-columns: 220px 1fr 1fr 1fr 1fr;
  grid-template-rows: 56px;
  row-gap: 1em;
  column-gap: 2em;
  grid-template-areas:
    "cabecera cabecera cabecera cabecera cabecera"
    "menu preventa preventa preventa preventa"
    "menu producto producto producto producto"
    "menu producto producto producto producto"
    "menu producto producto producto producto"
    "menu producto producto producto producto"
    "menu producto producto producto producto"
    "menu producto producto producto producto"
    "menu producto producto producto producto"
    "menu producto producto producto producto"
    "menu producto producto producto producto"
    "menu producto producto producto producto"
    "menu producto producto producto producto"
    "menu producto producto producto producto"
    "menu producto producto producto producto"
    "menu producto producto producto producto"
    "menu paginacion paginacion paginacion paginacion"
    "menu pie pie pie pie";
}

.contenedor__buscador {
  display: flex;
  width: 100%;
  justify-content: center;
}

.msg__buscador {
  position: absolute;
  display: none;
  max-width: 150px;
  background: #e3ffc8;
  border-radius: 1%;
  padding: 5px;
  border: 2px solid #cae5ff;
}

.titulo_cat {
  text-align: center;
}

.menu {
  grid-area: menu;
  display: flex;
  flex-direction: column;
  margin-top: 75px;
  height: 250px;
  width: max-content;
}

.menu>a {
  font-size: 16px;
  padding: 7px;
  /* box-shadow: 0px 0px 5px 1px rgb(136, 136, 136), 0px 10px 0px 0px rgb(223, 223, 223); */
  border-bottom-right-radius: 10%;
}

.menu>a:hover {
  box-shadow: 10px 1px 0px 0px rgb(194, 217, 198), 0px 0px 10px 0px rgb(223, 223, 223);
  /* border: 1px solid #e6e6e6; */
  border-bottom-right-radius: 10%;
}

header>a,
header>img {
  box-shadow: 0px 0px 5px 1px rgb(136, 136, 136), 0px 10px 0px 0px rgb(223, 223, 223);
}

.pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 10px;
  background: #b9deff;
  border: 2px solid white;
}

table,
th {
  border: 6px solid silver;
  max-width: 300px;
  padding: 10px;
  color: #182e39;
}

thead {
  background: white;
}

.pago__btn {
  grid-area: preventa;
  margin-top: 100px;
}

.h1__mensaje {
  margin: 10px;
  color: #193510;
}

.preventa {
  display: flex;
  grid-area: preventa;
  margin-top: 71px;
  padding-bottom: 31px;
  box-shadow: 0px 0px 0px 0px rgb(136, 136, 136), 0px 10px 0px 0px rgb(223, 223, 223);
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-around;
}

.preventa :hover {
  border-radius: 10%;
}

.slider_top {
  display: block;
  text-align: center;
  margin-bottom: 60px;
  border-radius: 30%;
  box-shadow: 0px 0px 0px 0px rgb(136, 136, 136), 0px 10px 0px 0px rgb(223, 223, 223);
  background-color: azure;
  width: 130px;
  height: 123px;
}

.slider_top :hover {
  background: #8bc254;
}

.ver_resultado {
  display: contents;
}

.display__producto {
  display: flex;
  flex-direction: column-reverse;
  margin-bottom: 10px;
  min-height: 303px;
  border-radius: 7px;
  border: 2px solid hwb(149deg 32% 55%);
  background-color: #202124;
}

.caja__busqueda {
  width: 572px;
  height: 30px;
  font-size: 20px;
}

.img__slider {
  width: 120px;
  height: 120px;
}

.img__placas {
  width: 100%;
  height: fit-content;
  max-width: 288px;
  margin-top: 7px;
  margin-bottom: 6px;
  cursor: pointer;
  min-width: 197px;
}

.img__placas:hover {
  width: 100%;
}

.img_nav {
  margin-right: 12px;
  width: 25px;
  height: 25px;
}

.a_nav {
  width: max-content;
  height: max-content;
}

.disponibilidad {
  margin-bottom: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.agotado {
  font-weight: bold;
  padding-top: 10px;
  text-align: center;
}

.svg__img {
  margin-right: 15px;
}

.recommended {
  grid-area: paginacion;
}

.ver_telefono {
  width: 130px;
  padding: 10px;
  font-size: 17px;
  font-weight: 600;
  background-color: #202124;
  border: 2px solid #c4e8d6;
  /* border-color: #11a753; */
  color: #fff;
  border-radius: 5%;
  cursor: pointer;
}

button {
  padding: 13px;
  font-weight: bold;
}

button:active {
  /* height: 50px; */
  background: red;
}

.numeros_paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  height: 50px;
  width: 50px;
  background: #8bc254;
}

.popuptelefono {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 550px;
  min-width: 553px;
  max-width: 701px;
  background: #e8ffd1;
  border: 2px solid #c4e8d6;
  border-radius: 1%;
  box-shadow: 0px 0px 0px 0px rgb(136 136 136), 0px 10px 0px 0px rgb(223 223 223);
  animation: apareceConRetraso .2s ease-out;
}

.div_injectado {
  /* height: 100%; */
  box-shadow: 0px 0px 0px 0px rgb(136, 136, 136), 0px 10px 0px 0px rgb(223, 223, 223);
  animation: fadeInFromNone 1s cubic-bezier(0.86, 0, 0.07, 1);
}

.article-creado {
  position: fixed;
  text-align: justify;
  margin: 20px;
  margin-left: 38px;
  font-size: 20px;
  color: black;
}

.titulo__bold {
  margin-top: -122px;
  font-size: 23px;
  font-weight: bold;
}

.leer__mas {
  margin-left: 70%;
  text-decoration: underline;
  color: #3e6e9d;
  margin-top: -35px;
}

.leer__mas:hover {
  color: #cd284c;
}

.mailito {
  margin: 20px;
  border: 1px solid #9affbd;
  padding: 4px;
  border-radius: 10px;
}

.mailito:hover {
  background: #a1c097;
}

.btn-cerrar-popup {
  display: flex;
  justify-content: right;
  margin-top: -57px;
  margin-right: 10px;
  font-size: 27px;
  font-weight: bold;
  color: firebrick;
}

.bold {
  margin-left: 110px;
  margin-top: 20px;
}

.imagen__popUp {
  width: 45%;
  margin-top: -24px;
  margin-left: 45%;
  border: 5px solid #d5fff3;
  border-radius: 9px;
}

.img__telefono {
  width: 60px;
  height: 54px;
  margin-left: 7px;
  margin-top: -24px;
  background: #c3ffaf;
  border-radius: 10%;
  animation: apareceConRetraso 2.1s ease-out;
}

.telefono__popUp {
  margin-left: 90px;
  margin-top: -43px;
  border: 5px solid #ffffff;
  padding: 4px;
  border-radius: 10px;
  width: max-content;
  background: #c3ffaf;
}

.precio {
  width: initial;
  font-size: 24px;
  font-weight: bold;
  margin-top: -7px;
  margin-left: 63%;
  border-radius: 10px;
  color: #2f3b4c;
  border: 5px solid #ffffff;
  background: #c3ffaf;
}

.popText {
  margin-top: 5%;
}

.img_grande {
  position: absolute;
  display: block;
  max-width: 100%;
  /* max-height: 75%; */
  /* height: 90%; */
  border-radius: 1%;
  border: 10px solid #d5fff3;
  transition: all .2s;
  -moz-transition: all .2s;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  animation: fadeInFromNone .4s ease-out;
}

.luz {
  display: none;
}

.mvl {
  display: none;
}

.espacio_footer {
  margin-bottom: 110px;
  margin-top: 20px;
  margin-left: 20px;
}

.controls {
  margin-top: 10px;
  margin-bottom: 10px;
}

@keyframes apareceConRetraso {
  0% {
    width: 0%;
    font-size: 1px;
  }

  100% {
    opacity: 1;
    font-size: 71px;
  }
}

@keyframes fadeInFromNone {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes desplazamientoLR {
  0% {
    margin-left: -70%;
    opacity: 0;
  }

  10% {
    margin-left: 10%;
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    margin-left: 100%;
    opacity: 0;
  }
}


.colorear__pie {
  background: crimson;
  animation: fadeInFromNone 1s cubic-bezier(0.86, 0, 0.07, 1);
}

footer {
  grid-area: pie;
  margin-bottom: 20px;
  border: 33px solid silver;
}

.cookies {
  display: none;
  justify-content: space-around;
  align-items: center;
  height: 100px;
  width: 40%;
  bottom: 10px;
  position: fixed;
  background-color: #202124;
  color: #f8f9fa;
  border: 2px solid #c4e8d6;
  border-radius: 1%;
}

.mas__info {
  color: #cdd8fe;
}

@media screen and (max-width: 1324px) {
  .contenedor {
    grid-template-columns: 220px 1fr 1fr 1fr;
    grid-template-areas:
      "cabecera cabecera cabecera cabecera"
      "menu preventa preventa preventa"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu producto producto producto"
      "menu paginacion paginacion paginacion"
      "menu pie pie pie";
  }

  .menu {
    margin-top: 120px;
  }

  .tex_fot {
    margin-left: 3px;
  }

  .mas__info {
    justify-content: flex-start;
  }

  button {
    padding: 13px;
  }

  #entendido {
    margin: 35px;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 1024px) {
  .contenedor {
    grid-template-columns: 220px 1fr 1fr;
    grid-template-areas:
      "cabecera cabecera cabecera"
      "menu preventa preventa"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu producto producto"
      "menu paginacion paginacion"
      "menu pie pie";
  }

  .caja__busqueda {
    width: 400px;
  }

  .menu {
    margin-top: 120px;
  }

  .popuptelefono {
    width: 90%;
    overflow: scroll;
  }

  .tex_fot {
    margin-left: 3px;
  }

  .mas__info {
    justify-content: flex-start;
  }

  button {
    padding: 13px;
  }

  #entendido {
    margin: 35px;
  }
}

@media screen and (max-width: 700px) {
  .contenedor {
    grid-template-columns: 1fr;
    overflow: visible;
    justify-content: center;
    grid-template-areas:
      "cabecera"
      "menu"
      "preventa"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "producto"
      "paginacion"
      "pie";
  }

  .contenedor {
    row-gap: 0em;
  }

  .caja__busqueda {
    width: 170px;
  }

  .menu {
    display: none;
    margin-top: 40px;
    animation: fadeInFromNone .5s cubic-bezier(0.86, 0, 0.07, 1);
  }

  .popuptelefono {
    min-width: 90%;
    height: 70%;
    margin-top: -41px;
  }

  .article-creado {
    font-size: 16px;
    margin-left: 12px;
  }

  .btn-cerrar-popup {
    margin-right: -5px;
  }

  .precio {
    text-align: center;
    margin-left: initial;
  }

  .titulo__bold {
    margin-top: -3px;
    text-align: center;
    margin-left: inherit;
  }

  .imagen__popUp {
    width: 65%;
    margin-left: 18%;
    margin-top: -22px;
  }

  .bold {
    margin-left: 134px;
  }

  .img__telefono {
    margin-left: 47px;
  }

  .popText {
    text-align: left;
  }

  .telefono__popUp {
    margin-left: 118px;
    margin-top: -39px;
  }

  .block {
    display: block;
  }

  .luz {
    display: flex;
    justify-self: flex-end;
  }

  .preventa {
    margin-top: 58px;
    margin-bottom: 36px;
    padding: 14px;
  }

  .titulo_cat {
    display: none;
  }

  .contenedor__buscador {
    display: flex;
    justify-content: center;
    width: auto;
  }

  .h1__mensaje {
    font-size: 15px;
    text-align: justify;
    margin-top: -300px;
  }

  .tex_fot {
    margin-left: 3px;
  }

  .mas__info {
    justify-content: flex-start;
  }

  button {
    padding: 13px;
  }

  #entendido {
    margin: 35px;
  }

  .cookies {
    width: 100%;
  }

  h1 {
    font-size: 1em;
    text-align: center;
  }

  .pago__btn {
    margin-top: 50px;
  }

  .div_injectado {
    margin-top: 14px;
    padding-left: 159px;
  }

  .a_nav {
    width: 100%;
  }

  .mvl {
    display: block;
  }

}