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

p, a, h1, h2, h3, h4, h5, h6, label, input, button {
  font-family: Roboto, sans-serif;
}

@keyframes aparece1 {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    background-color: #34495E;
  }
}
@keyframes aparece {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media (max-width: 460px) {
  .container__nav ul {
    padding: 40px;
    flex-direction: column;
  }
  .container__nav li {
    list-style: none;
    flex-direction: column;
    padding: 5px;
    margin-top: 39px;
  }
  .container__nav a {
    font-size: 15px;
  }
}
header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 200px;
  background-color: #2C3E50;
}
header .container__logo {
  border-radius: 20px;
  background-color: rgb(40, 55, 71);
  padding: 20px;
  animation-name: aparece;
  animation-duration: 2s;
}
header .logo {
  text-align: center;
  font-weight: 700;
  color: #F4F6F6;
  text-shadow: 1px 1px 2px rgb(40, 55, 71);
  font-size: 30px;
}
header .logo span {
  color: rgb(230, 176, 39);
}
header .logo__descripcion {
  text-align: center;
  font-weight: 300;
  color: darkgoldenrod;
  text-shadow: 1px 1px 2px rgb(40, 55, 71);
  font-size: 18px;
}
header .container__nav {
  padding: 10px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .container__nav ul {
  padding: 20px;
}
header .container__nav li {
  list-style: none;
  display: inline;
  padding: 1px;
  margin-top: 39px;
}
header .container__nav a {
  text-decoration: none;
  font-size: 11px;
  color: #F4F6F6;
  background-color: #566573;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 1px 1px 2px black;
}
header .container__nav a:hover {
  animation-name: aparece1;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
@media (min-width: 460px) {
  header .container__nav a {
    font-size: 15px;
    padding: 10px;
  }
}

@media (min-width: 688px) {
  header {
    flex-direction: row;
  }
}
footer {
  width: 100%;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(40, 55, 71);
}
footer__container {
  display: grid;
  grid-template-areas: "telefono" "logo" "derechos";
}
footer .telefono__container {
  grid-area: telefono;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 20px;
}
footer .telefono__container .descripcion__telefono {
  text-align: center;
  font-size: 30px;
  color: #566573;
  font-weight: 300;
}
footer .telefono__container .numero__telefono {
  text-align: center;
  font-size: 34px;
  color: #F4F6F6;
  text-shadow: 1px 1px 2px black;
  font-weight: 800;
}
footer .telefono__container .button_wp {
  padding: 20px;
  font-weight: 800;
  color: #212F3C;
  background-color: #25d366;
  border-radius: 40px;
  box-shadow: 2px 2px 3px black;
  cursor: pointer;
}
footer .telefono__container .button_wp:hover {
  background-color: #128c7e;
  color: #F4F6F6;
  text-shadow: 1px 1px 2px black;
}
footer .telefono__container a {
  text-decoration: none;
}
@media (min-width: 1024px) {
  footer .telefono__container .descripcion__telefono {
    font-size: 40px;
  }
  footer .telefono__container .numero__telefono {
    font-size: 45px;
  }
}
footer .container__logo {
  border-radius: 20px;
  background-color: rgb(40, 55, 71);
  padding: 20px;
  animation-name: aparece;
  animation-duration: 2s;
}
footer .logo {
  text-align: center;
  font-weight: 700;
  color: #F4F6F6;
  text-shadow: 1px 1px 2px rgb(40, 55, 71);
  font-size: 30px;
}
footer .logo span {
  color: rgb(230, 176, 39);
}
footer .logo__descripcion {
  text-align: center;
  font-weight: 300;
  color: darkgoldenrod;
  text-shadow: 1px 1px 2px rgb(40, 55, 71);
  font-size: 20px;
}
footer .derechos__container {
  grid-area: derechos;
  width: auto;
  height: auto;
}
footer .derechos__container .derechos {
  text-align: center;
  font-size: 13px;
  color: #F4F6F6;
}

main .contenedor {
  width: 100%;
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
}
main .contenedor__h1 {
  background-image: url(../../assets/img/001tiny.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
main .contenedor__h1 h1 {
  max-width: 80%;
  color: #F1C40F;
  text-align: center;
  font-size: 20px;
  background-color: rgba(52, 73, 94, 0.7725490196);
  padding: 20px;
  border-radius: 30px;
  animation-name: aparece;
  animation-duration: 2s;
  margin: 20px 0;
  text-shadow: 1px 1px 2px black;
}
main .contenedor__h1 h2 {
  max-width: 80%;
  color: white;
  text-align: center;
  font-size: 20px;
  background-color: rgba(250, 226, 10, 0.7725490196);
  padding: 20px;
  border-radius: 30px;
  animation-name: aparece;
  animation-duration: 2s;
  margin: 20px 0;
  text-shadow: 1px 1px 2px black;
}
@media (min-width: 1024px) {
  main h1 {
    font-size: 40px;
  }
}
main .button_wp {
  padding: 20px;
  font-weight: 800;
  color: #212F3C;
  background-color: #25d366;
  border-radius: 40px;
  box-shadow: 2px 2px 3px black;
  cursor: pointer;
}
main .button_wp:hover {
  background-color: #128c7e;
  color: #F4F6F6;
  text-shadow: 1px 1px 2px black;
}
main a {
  text-decoration: none;
}
main .contenedor__frace {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #2C3E50;
  height: 400px;
  padding: 20px;
}
main .contenedor__frace .frace {
  padding: 20px;
  max-width: 80%;
  text-align: center;
  font-weight: 300;
  color: #F4F6F6;
}
main .contenedor__frace .frace span {
  color: darkgoldenrod;
  font-weight: 200;
}
main .contenedor__frace .contacto {
  padding: 20px;
  max-width: 80%;
  font: 20px;
  text-align: center;
  color: #F1C40F;
}
@media (min-width: 1024px) {
  main .contenedor__frace {
    font-size: 25px;
  }
}
main .contenedor__ubicacion {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 600px;
  background-color: #212F3C;
  padding: 20px;
}
main .info__mapa {
  text-align: center;
  max-width: 70%;
  font-size: 20px;
  color: #CCD1D1;
  font-weight: 400;
  padding: 10px;
}
main .mapa {
  width: 80%;
  height: 500px;
  border: 2px solid #212F3C;
  border-radius: 10px;
}
main .contenedor__local {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 600px;
  background-color: #212F3C;
  padding: 20px;
}
main .contenedor__local img {
  margin: 10px 0;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px 30px 10px 30px;
  box-shadow: 2px 2px 3px black;
}
@media (min-width: 1024px) {
  main .contenedor__local img {
    max-width: auto;
  }
}
@media (min-width: 1024px) {
  main .contenedor_img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 30%;
    height: auto;
  }
}
main .contenedor__ventas {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 650px;
  background-color: #2C3E50;
  padding: 20px;
}
main .contenedor__ventas img {
  margin: 10px 0;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px 30px 10px 30px;
  box-shadow: 2px 2px 3px black;
}
@media (min-width: 1024px) {
  main .contenedor__ventas img {
    max-width: auto;
  }
}
main .contenedor_imagenes {
  display: flex;
  justify-content: center;
  align-self: center;
  flex-direction: row;
}
main .contenedor_imagenes .tarjeta {
  margin: 10px 4px;
  width: 20%;
  height: auto;
  display: block;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 2px 2px 3px black;
}

.contenedor__nosotros {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 20px;
  background-color: #212F3C;
}
@media (min-width: 1024px) {
  .contenedor__nosotros {
    display: flex;
    justify-content: center;
    align-items: center;
    display: grid;
    grid-template-areas: "titulo titulo" "imagen parrafos";
  }
}
.contenedor__nosotros .contenedor_h1 {
  grid-area: titulo;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1024px) {
  .contenedor__nosotros .contenedor_h1 {
    width: 100%;
    height: 100px;
  }
}
.contenedor__nosotros h1 {
  text-align: center;
  font-size: 25px;
  color: #F4F6F6;
  text-shadow: 2px 2px 2px black;
  margin: 10px 0;
}
@media (min-width: 1024px) {
  .contenedor__nosotros h1 {
    font-size: 35px;
  }
}
.contenedor__nosotros h1 span {
  color: #F1C40F;
}
.contenedor__nosotros .contenedor_img {
  grid-area: imagen;
}
@media (min-width: 1024px) {
  .contenedor__nosotros .contenedor_img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
    height: auto;
  }
}
.contenedor__nosotros img {
  margin: 10px 0;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px 30px 10px 30px;
  box-shadow: 2px 2px 3px black;
}
@media (min-width: 1024px) {
  .contenedor__nosotros img {
    max-width: auto;
  }
}
.contenedor__nosotros .contenedor_parrafos {
  grid-area: parrafos;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .contenedor__nosotros .contenedor_parrafos {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
    height: auto;
  }
}
.contenedor__nosotros p {
  margin: 10px 0;
  max-width: 90%;
  text-align: center;
  font-size: 15px;
  color: #CCD1D1;
}
@media (min-width: 1024px) {
  .contenedor__nosotros p {
    text-align: center;
    max-width: 90%;
    font-size: 20px;
  }
}

.contenedor__servicios {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 20px;
  background-color: #212F3C;
}
.contenedor__servicios .contenedor_h1 {
  text-align: center;
  font-size: 20px;
  color: #F4F6F6;
  text-shadow: 1px 1px 2px black;
}
.contenedor__servicios .contenedor_h1 span {
  color: #F1C40F;
  text-shadow: 1px 1px 2px black;
}
.contenedor__servicios .contenedor__grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.contenedor__servicios .contenedor__grid .carta {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation-name: aparece;
  animation-duration: 2s;
  flex-direction: column;
  background-color: #2C3E50;
  border-radius: 20px;
  padding: 20px;
  margin-top: 30px;
  box-shadow: 3px 3px 2px black;
}
.contenedor__servicios .contenedor__grid .carta .cajatitulo {
  text-align: center;
}
.contenedor__servicios .contenedor__grid .carta .cajatitulo p {
  color: #F1C40F;
  font-size: 30px;
  text-shadow: 3px 3px 3px black;
}
.contenedor__servicios .contenedor__grid .carta .cajaimg {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}
.contenedor__servicios .contenedor__grid .carta .cajaimg img {
  width: 80%;
  height: auto;
  display: block;
  border-radius: 20px;
  border: 5px solid #566573;
}
.contenedor__servicios .contenedor__grid .carta .cajatext {
  text-align: center;
}
.contenedor__servicios .contenedor__grid .carta .cajatext p {
  text-align: center;
  font-weight: 300;
  color: #F4F6F6;
}
@media (min-width: 1024px) {
  .contenedor__servicios .contenedor__grid .contenedor__grid {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .contenedor__servicios .contenedor__grid .carta {
    max-width: 80%;
    display: grid;
    grid-template-areas: "titulo titulo" "img texto";
  }
  .contenedor__servicios .contenedor__grid .carta .cajatitulo {
    text-align: center;
    grid-area: titulo;
  }
  .contenedor__servicios .contenedor__grid .carta .cajatitulo p {
    color: #F1C40F;
    font-size: 30px;
    text-shadow: 3px 3px 3px black;
  }
  .contenedor__servicios .contenedor__grid .carta .cajaimg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    grid-area: img;
  }
  .contenedor__servicios .contenedor__grid .carta .cajaimg img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    border: 5px solid #566573;
  }
  .contenedor__servicios .contenedor__grid .carta .cajatext {
    grid-area: texto;
    width: 100%;
    text-align: center;
  }
}

.contenedor__nosotros {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 20px;
  background-color: #212F3C;
}
@media (min-width: 1024px) {
  .contenedor__nosotros {
    display: flex;
    justify-content: center;
    align-items: center;
    display: grid;
    grid-template-areas: "titulo titulo" "imagen parrafos";
  }
}
.contenedor__nosotros .contenedor_h1 {
  grid-area: titulo;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1024px) {
  .contenedor__nosotros .contenedor_h1 {
    width: 100%;
    height: 100px;
  }
}
.contenedor__nosotros h1 {
  text-align: center;
  font-size: 25px;
  color: #F4F6F6;
  text-shadow: 2px 2px 2px black;
  margin: 10px 0;
}
@media (min-width: 1024px) {
  .contenedor__nosotros h1 {
    font-size: 35px;
  }
}
.contenedor__nosotros h1 span {
  color: #F1C40F;
}
.contenedor__nosotros .contenedor_img {
  grid-area: imagen;
}
@media (min-width: 1024px) {
  .contenedor__nosotros .contenedor_img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
    height: auto;
  }
}
.contenedor__nosotros img {
  margin: 10px 0;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px 30px 10px 30px;
  box-shadow: 2px 2px 3px black;
}
@media (min-width: 1024px) {
  .contenedor__nosotros img {
    max-width: auto;
  }
}
.contenedor__nosotros .contenedor_parrafos {
  grid-area: parrafos;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .contenedor__nosotros .contenedor_parrafos {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
    height: auto;
  }
}
.contenedor__nosotros p {
  margin: 10px 0;
  max-width: 90%;
  text-align: center;
  font-size: 15px;
  color: #CCD1D1;
}
@media (min-width: 1024px) {
  .contenedor__nosotros p {
    text-align: center;
    max-width: 90%;
    font-size: 20px;
  }
}

/*# sourceMappingURL=style.css.map */