/* Llamado de fuentes personalizadas */

@font-face {
  font-family: 'lemonmilkbold';
  src: url(assets/fonts/LEMONMILK-Bold.woff);
}

@font-face {
  font-family: 'lemonmilkmedium';
  src: url(assets/fonts/LEMONMILK-Medium.woff);
}

@font-face {
  font-family: 'lemonmilkregular';
  src: url(assets/fonts/LEMONMILK-Regular.woff);
}

@font-face {
  font-family: 'lemonmilklight';
  src: url(assets/fonts/LEMONMILK-Light.woff);
}

@font-face {
  font-family: 'futura';
  src: url(assets/fonts/Futura.woff);
}

@font-face {
  font-family: 'goboldbold';
  src: url(assets/fonts/Gobold-Bold.woff);
}

/* Reseteo de CSS para HTML5 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* termina reseteo  */

body{
  line-height: 1;
  background-color: #f4a11e;
  margin-top: 58px;
  /* overflow-y: hidden; */
  overflow-x: hidden;
}

/* Nuestros Reinos */
.title {
  width: 100%;
  height: 17.6vw;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

#titleImg {
  width: 35.4%;
  height: 100%;
  background-image: url(./assets/svgs/nuestrosReinos.svg);
  background-repeat: no-repeat;
  background-position: top center;
}

.nav-container {
  width: 100%;
  height: 3.4vw;
  margin-bottom: 6.5%;
}

.nav-reinos {
  display: flex;
  justify-content: space-between;
  width: 85%;
  height: 100%;
  margin: 0 7.5%;
}

/* .reino {
  width: 11.5%;
  height: 100%;
  background-color: #1d1d1b;
  border-radius: 2vw;
  align-content: center;
  text-align: center;
  color: white;
  font-family: 'goboldbold';
  font-size: calc(1.2em + ((1vw - 20px) * 1));
  cursor: pointer;
} */
.reinos-container{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}
.reinos-container .reino-chip{
  background-color: #1d1d1b;
  border-radius: 20px;
  text-align: center;
  color: white;
  font-family: 'goboldbold';
  letter-spacing: 1px;
  padding: 8px 20px;
  margin: 4px 4px;
  cursor: pointer;
}

.reino-container {
  width: 100%;
  /* height: 23.4vw; */
  /* height: 21.8vw; */
}

.reino-card {
  display: flex;
  height: 23.4vw;
  margin: 0 7.5%;
  margin-bottom: 5.1%;
  max-width: 1020px;
  max-height: 262px;
  margin: 0 auto;
  margin-bottom: 5%;
}

#reinoImg {
  width: 34.4%;
  border-radius: 2vw;
  background-image: url(./assets/imgs/placeholderSucursal.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#infoReino {
  display: flex;
  width: 64.6%;
  margin-left: 1.17%;
  background-color: white;
  border-radius: 2vw;
  overflow: hidden;
}

.map {
  width: 69.7%;
  height: 100%;
  position: relative;
  /* background-color: #f6f5f5; */
  background-image: url(./assets/imgs/map.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-size: cover;
  background-position: center;
  border-radius: 2vw;
}

/* MAPAS */
.ecatepec-map {
  background-image: url(./assets/imgs/reinos/mapa_ecatepec_sucursal_san_petter.jpg);
}
.claveria-map {
  background-image: url(./assets/imgs/reinos/mapa_claveria_sucursal_san_petter.jpg);
}
.laRoma-map {
  background-image: url(./assets/imgs/reinos/mapa_roma_sucursal_san_petter.jpg);
}
.mixcoac-map {
  background-image: url(./assets/imgs/reinos/mapa_mixcoac_sucursal_san_petter.jpg);
}
.tultitlan-map {
  background-image: url(./assets/imgs/reinos/mapa_tultitlan_sucursal_san_petter.jpg);
}
.centenario-map {
  background-image: url(./assets/imgs/reinos/mapa_centanario_sucursal_san_petter.jpg);
}
.lindavista-map {
  background-image: url(./assets/imgs/reinos/mapa_lindavista_sucursal_san_petter.jpg);
}
.texcoco-map {
  background-image: url(./assets/imgs/reinos/mapa_texcoco_sucursal_san_petter.jpg);
}
.americas-map {
  background-image: url(./assets/imgs/reinos/mapa_americas_sucursal_san_petter.jpg);
}
.cuspide-map {
    background-image: url(./assets/imgs/reinos/mapa-cuspide.webp);
}
.coyoacan-map {
    background-image: url(./assets/imgs/reinos/mapa-coyoacan.webp);
}
.ojoDeAgua-map {
    background-image: url(./assets/imgs/reinos/mapa-ojo-de-agua.webp);
}
.valleDorado-map {
    background-image: url(./assets/imgs/reinos/mapa-sucursal-valle-dorado.webp);
}

.text-container {
  width: 30.3%;
  /* padding: 4.8% 1.9% 0% 3.1%; */
  /* background-color: burlywood; */
  padding-left: 1.9%;
  font-family: 'lemonmilklight';
  /* font-size: calc(1.15em + ((1vw - 20px) * 1)); */
}
.text-details {
  width: 100%;
  height: 66.3%;
  margin-top: 10%;
}

.text-container .text-details{
  font-family: 'lemonmilkregular';
}

.text-container button {
  margin-top: 1.5%;
  width: 50.2%;
  height: 11%;
  background-color: #1d1d1b;
  border-radius: 2vw;
  align-content: center;
  text-align: center;
  color: white;
  font-family: 'goboldbold';
  font-size: 0.7em;
  cursor: pointer;
}

.nombresSucursales{
  font-family: 'lemonmilkbold';
  font-size: 1em;
  margin: 18% 0% 7% 0%;
}

.infoSucursal{
  font-family: 'lemonmilkregular';
  font-size: 0.5em;
  margin-bottom: 7%;
}

.infoSucursal span{
  font-family: 'lemonmilkbold';
}

.nav-container-mb {
  display: none;
}

@media (max-width: 900px) {
  .nav-container {
    display: none;
  }

  .nav-container-mb {
    display: block;
  }

  .nav-container-mb {
    width: 100%;
    height: 13.8vw;
    margin-bottom: 6.5%;
  }

  .nav-reinos-mb {
    width: 74%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 13%;
  }

  /* .reino {
    width: 20%;
    height: 35%;
    margin-right: 5%;
    font-size: calc(1.5em + ((1vw - 20px) * 1));
    border-radius: 4vw;
  } */
  .reino {
    width: auto;
    height: auto;
    margin: 0 4px 12px 4px;
    font-size: 0.90rem;
    border-radius: 4vw;
    padding: 6px 16px;
  }

  .reino-card {
    height: 60vw;
  }

  .reino-card {
    max-height: none;
    flex-direction: column;
    padding-right: 5%;
    padding-left: 5%;
    margin-bottom: 8%;
  }

  #reinoImg {
    width: 100%;
    height: 48%;
    margin-bottom: 2%;
    background-position: center;
  }

  #infoReino {
    width: 100%;
    height: 50%;
    margin-left: 0;
  }

  .text-container {
    width: 40%;
  }

  .text-container button {
    margin-top: 5%;
    width: 50%;
    height: 16%;
    font-size: calc(1.8em + ((1vw - 20px) * 1));
  }

  .text-details {
    margin-top: 0;
    height: auto;
  }

  .nombresSucursales {
    font-size: calc(2em + ((1vw - 20px) * 1));
    margin: 6% 0 3% 0;
  }

  /* #direccionSucursal > br {
    display: none;
  } */

  .infoSucursal {
    margin-bottom: 2%;
    font-size: calc(1.5em + ((1vw - 20px) * 1));
    line-height: 1.1em;
  }

  .map {
    width: 60%;
  }
}

@media (max-width: 780px) {
  .reino-card {
      height: 68vw;
  }
}

@media (max-width: 665px) {
  .nombresSucursales {
    font-size: calc(1.7em + ((1vw - 20px) * 1));
  }

  .infoSucursal {
    font-size: calc(1.4em + ((1vw - 20px) * 1));
  }

  .text-container button {
    font-size: calc(1.5em + ((1vw - 20px) * 1));
  }
}

@media (max-width: 400px) {
  .reino-card {
    height: 82vw;
  }
}