@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Fira Sans", sans-serif;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
}

/*NAVBAR*/
.navbar {
  padding: 0;
}
.navbar-nav.align-bottom {
  margin-top: 3.6rem;
}
.navbar1 {
  background-color: #FFFFFF !important;
  padding-left: 8%;
  padding-right: 8%;
}
.navbar1__boton {
  border: 0;
}
.navbar1__boton i {
  height: 6rem;
  font-size: 2.4rem;
  padding: 1.2rem;
}
.navbar1-brand {
  height: 10.5rem !important;
}
.navbar1-brand .logo {
  height: 100%;
  padding: 1.6rem 0 1.6rem 0;
}
.navbar1 .nav-item a {
  padding: 1.6rem 2.4rem !important;
  color: #2F676A !important;
}
.navbar1 .nav-item a.nav-link {
  font-size: 2.2rem;
  border-bottom: 0.5rem solid #FFFFFF;
}
.navbar1 .nav-item a.nav-link:hover, .navbar1 .nav-item a.nav-link:active {
  color: #006EBB !important;
  font-weight: 500 !important;
  font-size: 2.2rem !important;
  border-bottom: 0.5rem solid #006EBB;
}
.navbar1 .dropdown-menu {
  padding: 0;
}
.navbar1 .dropdown-menu li {
  background-color: #EFF3F5 !important;
}
.navbar1 .dropdown-menu li a {
  color: #2F676A !important;
  font-size: 2.2rem;
}
.navbar1 .dropdown-menu li a:hover, .navbar1 .dropdown-menu li a:active {
  background-color: #006EBB !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
}

/*HEADER*/
.cabecera {
  height: 48rem;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-position: right center;
  display: flex;
  align-items: center;
  background-image: url(../images/Imag_Inicio_1b.jpg);
}
.cabecera__cta {
  width: 60%;
  height: 100%;
  padding-left: 8%;
  padding-right: 3.6rem;
  display: grid;
  align-content: center;
}
.cabecera__cta h1 {
  font-size: 3.6rem;
  font-weight: 600;
  color: #006EBB;
  margin-bottom: 3.2rem;
  line-height: 120%;
}
.cabecera__cta p {
  font-size: 2.2rem;
  margin-bottom: 3.2rem;
  line-height: 120%;
}
.cabecera__cta a {
  background-color: #006EBB;
  color: #FFFFFF;
  text-decoration: none;
  padding: 1rem 2.4rem;
  font-size: 2.2rem;
  border-radius: 24px;
  justify-self: start;
}
.cabecera__cta a:hover {
  background-image: linear-gradient(to top, #00B883, #006EBB);
}

/*Área de banner PAGINAS*/
.banner2, .banner3, .banner4, .banner5 {
  height: 36rem;
  background-size: cover;
  background-attachment: fixed;
  background-position: right center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.banner2.banner2, .banner3.banner2, .banner4.banner2, .banner5.banner2 {
  background-image: url(../images/Imag_Nosotros_1b.jpg);
}
.banner2.banner3, .banner3.banner3, .banner4.banner3, .banner5.banner3 {
  background-image: url(../images/Imag_Encuadernados_1b.jpg);
}
.banner2.banner4, .banner3.banner4, .banner4.banner4, .banner5.banner4 {
  background-image: url(../images/Imag_Empastados_1b.jpg);
}
.banner2.banner5, .banner3.banner5, .banner4.banner5, .banner5.banner5 {
  background-image: url(../images/Imag_Inicio_3b.jpg);
}

.banner_desc {
  width: 55%;
  height: 100%;
  background-color: #006EBB;
  padding-left: 8%;
  padding-right: 3.6rem;
  display: grid;
  align-content: center;
}

.banner2 h1, .banner3 h1, .banner4 h1, .banner5 h1 {
  font-size: 3.6rem;
  color: #FFFFFF;
  margin-bottom: 3.2rem;
  line-height: 120%;
}

.banner_desc p {
  font-size: 2.2rem;
  color: #FFFFFF;
  margin-bottom: 3.2rem;
  line-height: 120%;
}

/*Propiedades y valores para los títulos*/
h2 {
  color: #006EBB;
  font-weight: 600;
}

p span {
  font-weight: 500;
}

.mayusculas {
  text-transform: uppercase;
}

.normal {
  font-weight: normal;
}

.textos h2 {
  margin-bottom: 1.6rem;
}

/*4 secciones del main INICIO*/
.experiencia__grupo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  margin-top: 4.5rem;
  margin-bottom: 4.5rem;
  margin-left: 8%;
  margin-right: 8%;
  line-height: 120%;
  grid-gap: 2.4rem 1.6rem;
}
.experiencia__grupo .experiencia {
  width: 100%;
  display: flex;
  align-items: start;
  padding: 1.6rem;
  /* Estilos para la imagen circular */
}
.experiencia__grupo .experiencia .experiencia__desc {
  flex-direction: column;
  margin-left: 2.4rem;
}
.experiencia__grupo .experiencia .experiencia__desc h2,
.experiencia__grupo .experiencia .experiencia__desc p {
  line-height: 120%;
  margin-top: 1.6rem;
}
.experiencia__grupo .experiencia .experiencia__imag img {
  width: 12.7rem;
  height: 12.7rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

/*Main PAGINAS*/
main.informacion {
  margin-top: 0rem;
  margin-bottom: 0rem;
  grid-gap: 0rem 0rem;
}

.informacion {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: 8%;
  margin-right: 8%;
  line-height: 120%;
  justify-content: space-evenly;
}
.informacion__grupo {
  width: 100%;
  display: flex;
  align-items: normal;
  margin: 5.2rem 2.4rem;
  gap: 4.8rem;
}
.informacion__grupo__desc {
  flex-direction: column;
}
.informacion__grupo__desc h2, .informacion__grupo__desc p, .informacion__grupo__desc ul li {
  line-height: 140%;
  margin-top: 1.6rem;
}
.informacion__grupo__desc h2 ul li, .informacion__grupo__desc p ul li, .informacion__grupo__desc ul li ul li {
  margin-left: 3.2rem;
}
.informacion img {
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

/*Esta sección se repite para ENCUADERNADOS y EMPASTADOS*/
.linea__horizontal1 {
  width: 100%;
  border: none;
  border-top: 0.2rem solid #D9D9D9;
  margin-top: 3.5rem;
}

/*Contenido de la galería*/
.galeria__grupo {
  text-align: center;
  width: 100%;
  margin-bottom: 4rem;
}

.galeria__imag {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(28rem, 1fr));
  gap: 1.6rem;
  align-items: center;
}

.galeria__imag h2 {
  flex-basis: 30%;
  border-radius: 8px;
}

.galeria__imag img {
  width: 100%;
  height: 28rem;
  border-radius: 2.4rem;
  object-fit: cover;
  object-position: center;
}

.galeria__grupo h2 a {
  display: inline-block;
  white-space: nowrap;
  background-color: #FFFFFF;
  color: #006EBB;
  text-decoration: none;
  padding: 1rem 2.4rem;
  font-size: 2.2rem;
  border-radius: 24px;
  border: 0.25rem solid #006EBB;
  text-align: center;
  white-space: normal;
  line-height: 150%;
}

.galeria__grupo h2, .galeria__imag {
  padding-top: 4rem;
}

/*--------------------------------------------*/
/*Esta sección es para CONTACTO*/
.info__contacto {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: 8%;
  margin-right: 8%;
  line-height: 120%;
  justify-content: space-evenly;
}

.info__contacto .informacion__grupo {
  display: flex;
  justify-content: space-between;
}

.info__contacto .informacion__grupo .informacion__grupo__desc {
  width: 40rem;
  flex-direction: column;
}

/*FORMULARIO*/
.form {
  width: 95%;
  padding-top: 1.6rem;
  /* padding-bottom: 1.6rem; */
}

.form__grupo__datos {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  color: #2F676A;
}

.form__grupo__datos div {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 1.2rem;
}

.recuadro {
  padding: 1.2rem;
  border-radius: 1.2rem;
  outline: none;
  border: 0.16rem solid #7EA7AA;
}

.recuadro:focus {
  border: 0.2rem solid #006EBB;
}

.enviar input {
  background-color: #FFFFFF;
  color: #006EBB;
  text-decoration: none;
  padding: 1rem 2.4rem;
  font-size: 2.2rem;
  border-radius: 24px;
  border: 0.25rem solid #006EBB;
  text-align: center;
  margin-top: 1.6rem;
  font-weight: 600;
}

/*MAPA*/
.mapa {
  width: 100%;
}

.linea__horizontal2 {
  width: 100%;
  border: none;
  border-top: 0.2rem solid #D9D9D9;
  margin-top: 0rem;
}

/*FINAL de las páginas*/
.frase {
  background-color: #7EA7AA;
  text-align: center;
  padding: 5rem 8%;
}

.frase p {
  color: #FFFFFF;
  font-size: 2.2rem;
  line-height: 150%;
}

footer {
  background-color: #006EBB;
  padding-left: 8%;
  padding-right: 8%;
  padding-top: 4rem;
}
footer .whatsapp {
  width: 4rem;
  height: 4rem;
  bottom: 14rem;
  right: 8rem;
  position: fixed;
}
footer .subir {
  width: 5rem;
  height: 5rem;
  bottom: 3rem;
  right: 6rem;
  position: fixed;
  background-color: rgba(47, 103, 106, 0.65);
  color: #FFFFFF;
  border-radius: 50%;
  text-align: center;
  line-height: 150%;
  font-size: 3.5rem;
  box-shadow: 0 0 8px;
}
footer .columnas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  color: #FFFFFF;
  gap: 1.6rem;
}
footer .columnas .columnas__section {
  display: flex;
  flex-direction: column;
}
footer .columnas .columnas__section p {
  margin-bottom: 1.6rem;
}
footer .columnas .columnas__section__navbar a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #EFF3F5;
}
footer .columnas .columnas__section__contact h3 {
  margin-bottom: 1.6rem;
}
footer .columnas .columnas__section__navbar2 {
  width: 100%;
  margin-top: 1rem;
  margin-right: 3.2rem;
}
footer .columnas .columnas__section__navbar2 a {
  margin-right: 1.6rem;
}
footer hr {
  margin: 0.1rem;
}
footer .linea__horizontal {
  width: 100%;
  border: none;
  border-top: 0.1rem solid #EFF3F5;
  margin-top: 3.5rem;
}

.final {
  background-color: #006EBB;
  padding-top: 1.6rem;
  padding-bottom: 4.8rem;
  padding-left: 8%;
  padding-right: 8%;
}
.final .final__copyright {
  float: left;
  color: #FFFFFF;
}
.final .final__por {
  float: right;
  color: #FFFFFF;
}
.final .final__por a {
  text-decoration: none;
}
.final .columnas__section__navbar a,
.final .columnas__section__contact h3,
.final .columnas__section__contact p,
.final .final p,
.final .final__por a {
  font-size: 1.6rem;
  line-height: 150%;
  color: #FFFFFF;
}

/*INICIA media Queries*/
@media only screen and (min-width: 0) and (max-width: 576px) {
  .experiencia {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1.6rem;
    text-align: center;
  }
  .experiencia__desc h2 {
    margin-top: 1.6rem;
  }
  /* Estilos para la imagen circular */
  .experiencia__imag img {
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
  }
  /*Main PAGINAS - imagen circular */
  .informacion__grupo img {
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
  }
  /*--------------------------------------------*/
  /*Contenido de la galería*/
  .galeria__grupo {
    margin-bottom: 3.2rem;
  }
  .galeria__imag {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.6rem;
    align-items: center;
  }
  .galeria__imag img {
    height: 16rem;
  }
  .galeria__grupo h2, .galeria__imag {
    padding-top: 3.2rem;
    line-height: 150%;
  }
}
@media only screen and (max-width: 768px) {
  /*Trabajando el NAVBAR*/
  .navbar1.md {
    padding-left: 3%;
    padding-right: 3%;
    height: 8rem;
  }
  .logo.md {
    width: 18rem;
    height: auto;
    padding: 1.2rem 0 1.2rem 0;
  }
  .navbar1__boton i {
    height: 7rem;
    font-size: 2.4rem;
    padding: 1.2rem;
  }
  /*----------------------------------*/
  /*Sección experiencias de INICIO*/
  .experiencia__grupo.md {
    margin-left: 5%;
    margin-right: 5%;
    line-height: 120%;
    row-gap: 1.6rem;
  }
  .experiencia__desc.md h2 {
    margin-top: 0rem;
  }
  /* Estilos para la imagen circular */
  .experiencia__imag.md img {
    width: 9.2rem;
    height: 9.2rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
  }
  /*--------------------------------------------*/
  /*Esta es para el main PAGINAS*/
  .informacion.md {
    margin-top: 3.6rem;
    margin-bottom: 3.6rem;
  }
  .informacion__grupo {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.6rem;
    gap: 2.4rem;
  }
  .informacion__grupo.reverse {
    display: flex;
    flex-direction: column-reverse;
  }
  /* Estilos para la imagen circular */
  .informacion__grupo img {
    width: 28rem;
    height: 28rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
  }
  /*----------------------------------*/
  /*Esta sección se repite al FINAL de todas las páginas*/
  .columnas.md {
    display: flex !important;
    flex-direction: column !important;
    text-align: center;
  }
  .columnas__section__contact {
    display: grid;
    grid-template-columns: 1fr;
  }
  .logo2.md {
    display: block;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 992px) {
  /*Trabajando el NAVBAR*/
  .navbar1 {
    width: 100%;
    height: 8.6rem;
  }
  .nav-link {
    color: #2F676A;
  }
  .navbar-collapse {
    background-color: #FFFFFF;
    display: flex;
    justify-content: center !important;
    width: 114% !important;
    margin-left: -7% !important;
    margin-top: -3rem !important;
  }
  .navbar-nav li {
    height: auto;
  }
  .nav-item.dropdown {
    margin: 0;
  }
  .navbar-nav .nav-item {
    width: 100rem;
    text-align: center;
  }
  .nav-item a {
    padding: 0.8rem;
  }
  .navbar-toggler.lg:focus,
  .navbar-toggler.lg:focus-visible,
  .navbar-toggler.lg:hover,
  .navbar-toggler.lg:active {
    border: none !important;
    box-shadow: none !important;
  }
  .navbar-nav .dropdown-menu {
    width: 100%;
    left: 0;
  }
  .navbar-nav .dropdown-menu .dropdown-item {
    width: 100%;
    text-align: center;
  }
  .dropdown-menu li {
    background-color: #EFF3F5 !important;
  }
  .logo {
    width: 20rem;
    height: auto;
    padding: 1.2rem 0 1.2rem 0;
  }
  /*----------------------------------*/
  /*Sección experiencias de INICIO*/
  .experiencia__grupo.lg {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  /*--------------------------------------------*/
  /*Contenido de la galería*/
  .galeria__grupo {
    margin-bottom: 3.63rem;
  }
  .galeria__imag {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(24rem, 1fr));
    gap: 1.6rem;
    align-items: center;
  }
  .galeria__imag img {
    height: 24rem;
  }
  .galeria__grupo h2, .galeria__imag {
    padding-top: 4rem;
  }
  /*------------------------------------------*/
  /*Esta sección es para CONTACTO*/
  .info__contacto {
    margin-top: 2.4rem;
    margin-bottom: 1.6rem;
  }
  .info__contacto .informacion__grupo {
    display: flex;
    flex-direction: column;
  }
  .info__contacto .informacion__grupo .informacion__grupo__desc {
    width: 100%;
    flex-direction: column;
  }
  /*FORMULARIO*/
  .form {
    width: 100%;
    padding-top: 0;
  }
  /*MAPA*/
  .mapa {
    width: 100%;
  }
  .linea__horizontal2 {
    padding-top: 0;
    padding-bottom: 0;
  }
  /*----------------------------------*/
  /*Esta sección se repite al FINAL de todas las páginas*/
  .columnas.lg.md {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  }
  .columnas__section__navbar, .columnas__section p span {
    display: none;
  }
  .columnas__section__contact, .columnas__section__navbar2 {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .final {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .final__copyright, .final__por {
    padding-top: 1.2rem;
  }
}
@media only screen and (max-width: 1140px) {
  /*Trabajando el NAVBAR*/
  .navbar1 {
    padding-left: 5%;
    padding-right: 5%;
  }
  /*----------------------------------*/
  /*Cabecera o BANNER de INICIO*/
  .cabecera {
    height: 44rem;
    text-align: center;
  }
  .banner2, .banner3, .banner4, .banner5 {
    height: 36rem;
    text-align: center;
  }
  .cabecera__cta, .banner_desc {
    width: 100%;
    background: rgba(0, 110, 187, 0.77);
    padding-right: 8%;
    display: grid;
    align-content: center;
  }
  .cabecera__cta p, .cabecera__cta h1, .banner_desc p, .banner_desc h1 {
    color: #FFFFFF;
  }
  .cabecera__cta a, .banner_desc a {
    color: #FFFFFF;
    background-color: #006EBB;
    border: 0.25rem solid #FFFFFF;
    justify-self: center;
  }
  /*--------------------------------------------*/
  /*Esta es para el main PAGINAS*/
  /* Para la imagen circular */
  .informacion__grupo img {
    width: 20rem;
    height: 20rem;
  }
}

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