/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/*  DEFAULT & BASIC STYLES
  ========================================================================== */

html {
  /* font-size: calc(15px + 0.390625vw); */
  /* padding: calc(8px + 1.5625vw); */
}


body {
  font-family: 'Rubik', sans-serif;
  /* background: white; */
  /* font-weight: 400; */
  /* line-height: 1.75; */
  /* color: #000000; */
}


h1, h2, h3, h4, h5 {
  font-family: 'Rubik', sans-serif;
  /* margin: 3rem 0 1.38rem; */
  /* font-weight: 400; */
  /* line-height: 1.3; */
}

h1 {

  /* OBS: en 1280px de ancho h1 es 48px (establecido por la diseñadora) que serían 2.4rem (el 2.4 rem lo saco probando en 1280px de ancho hasta que al pasar el mouse por encima me diga que son 48px) . SIEMPRE EL FONT-SIZE TIENE QUE SER EN REM! */

  /* font-size: 2.4rem; */
}

h2 {
  /* font-size: 3.75rem; */


}

/* @media (max-width: 991.98px) { */
@media (min-width: 991.98px) {
  h2 {
    font-size: 3.75rem;
  }

  h3 {
    font-size: 2.5rem;
  }


}

h3 {
  /* font-size: 1.953rem; */
}

h4 {
  /* font-size: 1.563rem; */
}

h5 {
  /* font-size: 1.25rem; */
}

p {
  /* font-size: 1.2rem; */
  /* 24px para un ancho de pantalla establecido por la diseñadora en 1280px */
}

/* small, .text_small {
  font-size: 0.8rem;
} */


.section {
  margin: 5rem auto;
}

/* .row>* {
  padding-right: 0;
  padding-left: 0;
} */


/* Colores */

.cl-rojo {
  color: #A6040F !important;
}

.cl-azul {
  color: #0A4F9C !important;
}

.cl-naranja {
  color: #BE7D19 !important;
}

.cl-gris {
  color: #585858 !important;
}

.cl-blanco {
  color: #fff !important;
}


/* Fondos */

.bg-blanco {
  background-color: #fff !important;
}

.bg-gris {
  background-color: #F3F3F3 !important;
}

.bg-gris-2 {
  background-color: #D8D8D8 !important;
}

.bg-azul {
  background-color: #0A4F9C !important;
}

.bg-celeste {
  background-color: #9DBBDA !important;
}

.bg-amarillo {
  background-color: #FFECCE !important;
}

.bg-rojo {
  background-color: #A6040F !important;
}

.bg-rosa {
  background: rgba(217, 217, 217, 0.20) !important;
}

.bg-rojo-gradient {
  background: linear-gradient(233deg, #A6040F -5.82%, #0A4F9C 138.49%) !important;
}

.bg-amarillo-gradient {
  background: linear-gradient(180deg, #C68F3B 0%, rgba(214, 175, 114, 0.72) 100%) !important;
}

.bg-amarillo-patern {
  background-image: url(../images/tbbps/bg-beneficios.png);
  background-size: cover;
}


/* Botones */

.btn {
  border-width: 2px;
}

.separador {
  width: 100%;
  border: 0.15rem solid #9DBBDA;
}


/* Posicion Portada */

.banner-principal-mobile {
  width: 100%;
  /* height: 130px; */
  /* height: 145px; */
  height: 155px;
}

@media only screen and (max-width: 1920px) {
  .position-content {
    position: absolute;
    /* top: 50px; */
    top: 50%;
    /* left: 98px; */
    left: 106px;

    transform: translate(-50px, -40%) !important;
    /* margin-top: -90px; */
  }
}

@media only screen and (max-width: 767px) {
  .position-content {
    position: absolute;
    left: 65px;
  }
}


/* Navbar */

/* Links Navbar */

.link:link,
.link:visited {
  display: inline-block;
  color: #e67e22;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: all 0.3s;
}

.link:hover,
.link:active {
  color: #cf711f;
  border-bottom: 1px solid transparent;
}


/* HEADER 
/**************************/

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FCFCFC;

  /* height: 9.6rem; */
  height: 5rem !important;

  /* padding: 0 4.8rem; */
  /* padding: 0 3.4rem; */
  padding: 0 4.4rem;
  position: relative;
}

.header ul {
  margin: 0;
}

.logo {
  /* height: 5.2rem; */
  height: 52px;
}


/* BARRA DE NAVEGACION
/**************************/

.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  /* gap: 4.8rem; */
  gap: 2.8rem;
}

.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  /* font-size: 1.8rem; */
  font-size: 18px;
  transition: all 0.3s;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #cf711f;
}

.main-nav-link.nav-cta:link,
.main-nav-link.nav-cta:visited {
  padding: 1.2rem 2.4rem;
  border-radius: 9px;
  color: #fff;
  background-color: #e67e22;
}

.main-nav-link.nav-cta:hover,
.main-nav-link.nav-cta:active {
  background-color: #cf711f;
}

/* MOBILE */
.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;

  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #333;
}

.icon-mobile-nav[name="close-outline"] {
  display: none;
}

/* STICKY NAVIGATION */
/* .sticky .header { */
.header {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  /* height: 8rem; */
  padding-top: 0;
  padding-bottom: 0;
  background-color: rgba(255, 255, 255, 0.97);
  z-index: 999;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
}

/* .sticky .section-hero {
  margin-top: 9.6rem;
} */



/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em) {

  .header {
    padding: 0 3.2rem;
  }

  .main-nav-list {
    gap: 2rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 16.2px;
  }

}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/

@media (max-width: 59em) {

  main {
    margin-top: 4rem !important;
  }

  .header {
    padding: 0 2rem;
    height: 64px !important;
  }

  /* MOBILE NAVIGATION */
  .btn-mobile-nav {
    display: block;
    z-index: 9999;
  }

  .main-nav {
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;

    /* Hide navigation */
    /* Allows NO transitions at all */
    /* display: none; */

    /* 1) Hide it visually */
    opacity: 0;

    /* 2) Make it unaccessible to mouse and keyboard */
    pointer-events: none;

    /* 3) Hide it from screen readers */
    visibility: hidden;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;

  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  .main-nav-list {
    flex-direction: column;
    /* gap: 4.8rem; */
    gap: 2.8rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    /* font-size: 3rem; */
    /* font-size: 1.8rem; */
    font-size: 1.6rem;
  }

  .icon-mobile-nav {
    width: 45px;
    margin-right: -15px;
    margin-top: 8px;
  }

  .logo {
    /* height: 5.2rem; */
    height: 41.02px;
  }
}


/* --------- */




main {
  margin-top: 5rem;
}

/*  HOME
	  ========================================================================== */


#carousel-home .carousel-indicators button {
  height: 10px !important;
  width: 10px !important;
  margin: 0 10px !important;
  border-radius: 100%;
  background-color: #fff !important;
}

#carousel-home .logo-mtq {
  position: relative;
  top: -11px;

  width: 230px;
  height: 85px;
}

.carousel-control-next-icon {
  background-image: url(../images/next-arrow.svg);
}

.carousel-control-prev-icon {
  background-image: url(../images/prev-arrow.svg);
}

.carousel-control-next, .carousel-control-prev {
  opacity: .8;
  width: 10%;
}

.carousel-caption {
  left: 12%;
}

.carousel-content-mobile {
  position: relative;
  z-index: 2;
  text-align: center;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

  /* height: 253px !important; */
  height: 230px !important;
}

.carousel-content-mobile a, .carousel-content-mobile a:hover {
  color: #A6040F;
  border: 2px solid #A6040F;
}


/* Tiendas y Servicios */

.section--categorias .card {
  overflow: hidden;
  cursor: pointer;

  box-shadow: 1px 1px 9px 0px rgba(0, 0, 0, 0.25);
}

.section--categorias .card-img-overlay {
  position: relative;
  padding: 0;
}

.section--categorias .card-img-overlay .btn {
  position: absolute;
  left: 0px;
  bottom: 50px;
}

.section--categorias .card img {
  width: 100%;
  filter: grayscale(100%);
  transform: scale(1.2);

  transition: filter 0.7s, transform 0.7s;
}

.section--categorias .card:hover img {
  filter: grayscale(0%);
  transform: scale(1);
}

.section--categorias .card:hover .btn {
  color: #0A4F9C;
  transition: color 0.7s;
}

.btn-tienda {
  font-size: 1.25rem;
  text-transform: uppercase;
  text-align: start;
  font-style: normal;
  font-weight: 500;
  border-radius: 0 25px 25px 0;
  padding-left: 20px;
  padding-right: 35px;
  background-color: #fff;
}

.btn-tienda:hover {
  background-color: #fff;
}

.titulo-modal {
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  padding: 8px 25px;
  border-radius: 3.125rem;
  color: #FFF;
  background: #A6040F;
}

.modal-header {
  margin: 0 auto;
  align-items: start;
}

.modal-header .btn-close {
  position: relative;
  left: 459px;
  font-size: 21px;
}

.titulo-categoria {
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  line-height: normal;
  letter-spacing: 0.46875rem;
  margin-bottom: 1.2rem;
}


/* Locales Modal */

.locales-container {
  display: grid;

  width: 100%;
  grid-template-rows: repeat(2, minmax(150px, min-content));
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  /* Para que las filas que se vayan generando a medida que se disminuya la pantalla tengan un ALTO de 150px. */
  grid-auto-rows: 150px;

  gap: 2rem;
}

.local-box {
  display: flex;
  align-items: center;
  column-gap: 1.5rem;
}

.local-logo {
  border-radius: 50%;
  border: 1px solid #000;
}

.local-logo img {
  width: 7.4rem;
}

.local-content p {
  margin-bottom: 0;
}

.local-content a {
  display: inline-block;
  margin-top: .3rem;
  padding-right: .4rem;
  color: #000
}



/*  TBBPS
	  ========================================================================== */

.custom-card {
  background-color: transparent;
  position: relative;
  overflow: hidden;
  transition: transform 0.7s ease-in-out;

  border-radius: 0.625rem;
  border: 2px solid #C58D39;
  box-shadow: 1px 1px 9px 0px rgba(0, 0, 0, 0.25);

  height: 251px;
}

.custom-card:hover {
  background: rgba(197, 141, 57, 0.18);
  transition: background 0.7s ease-in-out;
}

.initial-content,
.hover-content {
  transition: opacity .7s ease-in-out;
}

.initial-content {
  opacity: 1;
}

.initial-content i {
  font-size: 4rem;
  color: #BE7D19;
  background-color: #FFECCE;
  border-radius: 15px;
  padding: .5rem 1.5rem;
}

.hover-content {
  opacity: 0;
  pointer-events: none;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1rem;
}

.custom-card:hover .initial-content {
  opacity: 0;
  pointer-events: none;
}

.custom-card:hover .hover-content {
  opacity: 1;
  pointer-events: auto;
}

.hover-content h4 {
  width: 184px;
  color: #C58D39;
}

.hover-content i {
  font-size: 10rem;
  color: rgba(197, 141, 57, 0.18);
}

.encabezado-margen {
  margin-left: -2px;
}


/*  CULTURA
	  ========================================================================== */

.card-cultura {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 20px;

  box-shadow: 1px 1px 9px 0px rgba(0, 0, 0, 0.25);
}

.card-cultura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease-in-out;
}

.overlay-content-cultura {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(220deg, rgba(10, 79, 156, 0.00) 29.56%, #0A4F9C 74.89%);
  color: white;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;

  /* height: 45%; */
}




/*  EVENTOS
	  ========================================================================== */

.btn-eventos {
  font-weight: bold;
  border: 2px solid #05509C;
  border-radius: 0.625rem;
  color: #05509C;

  /* float: right; */


  position: absolute;
  bottom: 0;
  right: 0;
}

.btn-eventos:hover {
  color: #fff;
  background-color: #05509C;
  border-color: #05509C;
}


/* Estilos tarjetas de eventos */

.mep_event_grid_item {
  background-color: whitesmoke;
}


/*  CINE
	  ========================================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 8vw);
  /* grid-template-rows: repeat(10, 1fr); */

  row-gap: 1rem;
  column-gap: 2rem;

  /* padding: 1.5rem; */
}

.gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__imagen--1 {
  grid-row: 1 / span 7;
  grid-column: 1 / span 4;
}

.gallery__imagen--2 {
  grid-row: 1 / span 5;
  grid-column: 5 / span 6;
}

.gallery__imagen--3 {
  grid-row: 6 / span 2;
  grid-column: 5 / span 3;
}

.gallery__imagen--4 {
  grid-row: 6 / span 2;
  grid-column: 8 / span 3;
}

.gallery__imagen--5 {
  grid-row: 8 / span 3;
  grid-column: 1 / span 10;
}


.custom-card-cine {
  position: relative;
  overflow: hidden;
}

.custom-card-cine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  /* width: 100%; */
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.3s;
}

.card-overlay--imagen-2 {
  width: 100%;
}

.card-overlay--imagen-5 {
  width: 40%;
  height: 100%;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* text-align: center; */
}

.custom-card-cine:hover .imagen-2 {
  transform: scale(1.3);
}

.custom-card-cine:hover .imagen-5 {
  transform: scale(1.3);
  transform-origin: left;
}

.custom-card-cine:hover .card-overlay {
  opacity: 1;
}


/*  QUIENES SOMOS
	  ========================================================================== */

.gallery-quienes-somos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(7, 5vw);

  row-gap: 1rem;
  column-gap: 2rem;

  /* padding: 1.5rem; */
}


.gallery__quienes-somos--1 {
  grid-row: 1 / span 4;
  grid-column: 1 / span 4;
}

.gallery__quienes-somos--2 {
  grid-row: 5 / span 3;
  grid-column: 1 / span 4;
}

.gallery__quienes-somos--3 {
  grid-row: 1 / span 7;
  grid-column: 5 / span 2;
}




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

footer {
  background: #ADADAD;
}

.footer {
  display: flex;
  justify-content: center;
  /* align-items: start; */
  padding: 5rem 0;
  column-gap: 5rem;


  /* flex-wrap: wrap; */


  /* border-radius: 20px;
  background: #FFF;
  box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.25); */
}

.footer h3 {
  /* font-size: 20px; */
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
  color: #585858;

  padding: 1.5rem 0;
}

.footer p {
  /* font-family: Inter; */
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0em;
  text-align: left;

  padding-bottom: 1rem;
}

.footer .item {
  display: flex;
  align-items: flex-start;
  column-gap: .4rem;
}

.footer_horarios-item {
  display: flex;
  column-gap: .4rem;
  font-size: 15px;
}

.footer_horarios small {
  font-size: 13px;
  margin-left: 19px;
}

/* Mapa */
.mapouter {
  position: relative;
  /* text-align: right; */
  /* width: 338px; */
  /* height: 240px; */
}

.gmap_canvas {
  overflow: hidden;
  background: none !important;
  width: 338px;
  height: 240px;

  border-radius: 5px;
}

.gmap_canvas iframe {
  border-radius: 5px;
}


/* Ninja Forms Custom */

#nf-form-title-7 h3 {
  display: none;
}

.nf-form-fields-required {
  display: none;
}

.nf-form-content {
  padding: 0;
}

.row-contact-form {
  justify-content: center;
}

.nf-form-content .list-select-wrap .nf-field-element>div, .nf-form-content input:not([type=button]), .nf-form-content textarea {
  border-radius: 10px;
}



/* .ninja-forms-field .nf-element {
  background: #05509C !important;
} */

/* .nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit] {
  border-radius: 6.25rem;
  border: 2px solid #000;

  width: 7.75rem;
  height: 3.4375rem;
  flex-shrink: 0;

  color: #000;

  font-family: Rubik;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;

  background-color: #fff;
} */


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

/* xxl desktops grandes, menos de 1400px */
@media (max-width: 1399.98px) {
  .hover-content i {
    font-size: 7rem;
  }
}

/* xl -> desktops, menos de 1200px */
@media (max-width: 1199.98px) {

  .section--categorias .card-img-overlay .btn {
    bottom: 30px;
  }

  .modal-header .btn-close {
    left: 289px;
  }

  .overlay-content-cultura {
    background-color: #0A4F9C;
    height: 50%;
    opacity: 1;
  }

  .overlay-content-cultura h5 {
    font-size: 1.25rem;
  }

  .overlay-content-cultura p {
    font-size: 0.875rem;
  }

  .hover-content {
    column-gap: 0rem;
  }

  .hover-content h4 {
    font-size: 1.4rem;
  }

  .hover-content i {
    font-size: 5rem;
  }

  .footer {
    padding: 2rem 0;
    column-gap: 4rem;

    flex-wrap: wrap;
  }
}

/* lg -> tablets, menos de 992px */
@media (max-width: 991.98px) {
  .modal-header .btn-close {
    left: 141px;
  }

  .hover-content h4 {
    font-size: 1.6rem;
  }

  .hover-content i {
    font-size: 7rem;
  }
}

/* md -> teléfonos horizontales, menos de 768px */
@media (max-width: 767.98px) {

  .section {
    margin: 3.5rem auto;
  }

  /* #carousel-home .carousel-inner img {
    height: 260px;
  } */

  .carousel-indicators {
    top: 124px;
    z-index: 1;
  }

  #carousel-home .logo-mtq {
    position: relative;
    top: -11px;
    width: 127px;
    height: auto;
  }

  .titulo-categoria {
    text-align: center;
  }

  .btn-tienda {
    font-size: 0.925rem;
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
  }

  .overlay-content-cultura {
    background-color: #0A4F9C;
    height: 40%;
  }
}



/* sm -> teléfonos verticales, menos de 576px */
@media (max-width: 575.98px) {
  .modal-header .btn-close {
    left: 88px;
  }

  .carousel-control-next, .carousel-control-prev {
    top: 287px;
  }

  .carousel-control-next-icon, .carousel-control-prev-icon {
    width: 1rem;
  }

  .item-servicio-mobile {
    height: 250px !important;
  }

  .item-servicio-mobile i {
    padding-top: 1.5rem;
  }

  .custom-card:hover {
    background: transparent;
  }

  .initial-content {
    opacity: 0;
  }

  .hover-content {
    opacity: 1;
  }

  .hover-content h4 {
    /* width: 184px; */
    font-size: 1.5625rem;
    color: rgba(88, 88, 88, 1);
  }

  .hover-content i {
    font-size: 8.5rem;
    color: rgba(190, 125, 25, 0.5);
  }

  .footer p {
    padding-bottom: 0;
  }

  .footer h3 {
    font-size: 1.4rem;
    padding-bottom: .5rem;
    margin-top: 1rem;
  }

  .contacto_email-telefono,
  .contacto_redes {
    border-bottom: 1px solid black;
    margin-bottom: 20px;
  }

  .footer_horarios {
    margin-top: -1.5rem;
  }

  .contacto_redes {
    margin-top: -.5rem;

  }

  .contacto_redes p {
    margin-bottom: 2rem;
  }
}