@charset "utf-8";

/* ----------------------------------
Name: global.css
Version: 1.0.0
Autor: Fragmenta Soluciones Digitales
Website: https://www.fragmenta.mx
----------------------------------- */

/* ===================================
    Reset
====================================== */
*,
*::before,
*::after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
html { font-size: 16px !important;}
body {
     font-family: 'Poppins', sans-serif !important;
     font-display: optional;
     -webkit-font-smoothing: antialiased;
     font-smooth: antialiased;
     /* font-size: 16px; */
     font-weight: 400;
     line-height: auto;
     color:#333333;
     background-color: #fff;
     margin: 0px;
}
body, html {height: 100%; -moz-osx-font-smoothing: grayscale;}


section{
  position: relative;
  overflow-x:clip;
}


a:focus {text-decoration: none!important;}
a, a:active, a:focus { color: #A51E26; text-decoration: none;}
a:hover, a:active{text-decoration: underline; cursor: pointer;transition: 0.5s ease all;}
/*a:focus, a:active, button:focus, button:active, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {outline: none; box-shadow: none; } */

footer a, footer a:active, footer a:focus { color: #ffffff; text-decoration: none; font-size: 12px!important; line-height: 20px;}
/*footer a:hover, footer a:active{color: #1158A0; text-decoration: none; cursor: pointer;}
footer a:focus, footer a:active, footer button:focus, footer button:active, footer .btn.active.focus, footer .btn.active:focus, footer .btn.focus, footer .btn:active.focus, footer .btn:active:focus,footer  .btn:focus {outline: none; box-shadow: none; }

/*img {max-width:100%; height:auto; }*/


/* ===================================
    Typography
====================================== */
/* heading */
h1, h2, h3, h4, h5, h6 {font-family: 'League Spartan', sans-serif; letter-spacing: 0;color: #333333;}
/* h1, .h1 {font-size:3rem; line-height:3.5rem; font-weight: 600;} */

h1, .h1 {font-size:2.875rem; line-height:2.5rem; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h2, .h2 {font-size:2.25rem; line-height:2.5rem; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h3, .h3 {font-size:1.875rem; line-height:1.9375rem; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h4, .h4 {font-size:1.375rem; line-height:1.625rem; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h5, .h5 {font-size:1.25rem; line-height:1.5rem; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h6, .h6 {font-size:1.125rem; line-height:1.25rem; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}

p {font-size: 0.875rem;font-weight: 400;  font-family: 'Poppins', sans-serif !important;line-height:1rem;}
.span{font-size: 0.75rem;font-weight: 400;  font-family: 'Poppins', sans-serif !important;line-height: 0.875rem!important;}


.font-main {font-family: 'Poppins', sans-serif!important;}
.font-alt {font-family: 'League Spartan', sans-serif!important;}


/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {}
/* md  */ @media (min-width: 768px) {

h1, .h1 {font-size:3.125rem; line-height:2.875rem; font-weight: 500;}
h2, .h2 {font-size:2.75rem; line-height:2.75rem; font-weight: 500;}
h3, .h3 {font-size:2.125rem; line-height:2.1875rem; font-weight: 500;}
h4, .h4 {font-size:1.625rem; line-height:1.875rem; font-weight: 500;}
h5, .h5 {font-size:1.5rem; line-height:1.75rem; font-weight: 500;}
h6, .h6 {font-size:1.375rem; line-height:1.5rem; font-weight: 500;}

p {font-size: 1rem;font-weight: 400;  font-family: 'Poppins', sans-serif !important;line-height:1.5rem;}
.span{font-size: 0.875rem;font-weight: 400;  font-family: 'Poppins', sans-serif !important;line-height: 1rem!important;}


} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

h1, .h1 {font-size:3.375rem; line-height:3.125rem; font-weight: 500;}
h2, .h2 {font-size:2.75rem; line-height:3rem; font-weight: 500;}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {}
/* xxl */ @media (min-width: 1400px) {}


/* text color */
.text-main {color: #333333;}
.text-alt {color: #BA242D;}
.text-alt-g{color: #959599;}


/* ===================================
    Background color
====================================== */

.bg-alt{background: #F7F7F7;}


/* ===================================
    Covers
====================================== */

.grid-item{
  cursor: auto!important;
  padding: 0px;
  height: 100%!important;
}

.gallery-box{
  height: 100%!important;
}

.gallery-image{
  height: 100%!important;
}


/* ===================================
    Button
====================================== */


.btn-main {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 10px;
  min-width: 150px;
  position: relative;
  color: #fff;
  background: #BA242D;
  border: 0px;
  text-decoration: none;
  transition: 0.3s ease all;
  z-index: 1;
  font-weight: 500;
}

.btn-main:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: #A51E26;
  z-index: -1;
}

.btn-main:hover, .btn-main:focus {
  color: #fff!important;
  text-decoration: none!important;
  transition: 0.5s all ease;
}

.btn-main:hover:before, .btn-main:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

.btn-main:active {
  transform: scale(0.9);
}

/*btn white*/

.btn-main-white {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 10px;
  min-width: 150px;
  position: relative;
  color: #BA242D;
  background: #fff;
  border: 0px;
  text-decoration: none;
  transition: 0.3s ease all;
  z-index: 1;
  font-weight: 500;
}

.btn-main-white:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: #A51E26;
  border: 1px solid #fff;
  z-index: -1;
}

.btn-main-white:hover, .btn-main-white:focus {
  color: #fff;
}

.btn-main-white:hover:before, .btn-main-white:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

.btn-main-white:active {
  transform: scale(0.9);
}

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

.btn-link{
  color: #333333!important;
}

.btn-link p{margin-bottom: 0px!important}

/*Btn back*/

.btn-back {
 display: flex;
 height: 3em;
 width: auto;
 align-items: center;
 justify-content: center;
 border-radius: 3px;
 transition: all 0.4s linear;
 cursor: pointer;
 border: none;
 background: transparent;
 color:#000!important;
}

.btn-back > i {
 margin-right: 5px;
 margin-left: 5px;
 font-size: 20px;
 font-weight: 500;
 transition: all 0.4s ease-in;
 color:#000!important;
}

.btn-back:hover > i {
 font-size: 1.2em;
 transform: translateX(-5px);
 color:#000!important;
}

.btn-back:hover {
 transform: translateX(-2px);
 color:#000!important;
}

/* ===================================
    Galerias
====================================== */

.content-pag{
  margin-top: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.content-btn-nav{
  display: flex;
    justify-content: center;
    margin-top: 50px;
}

/*Bullets*/

.swiper-pagination-bullet{
   background:#F1EEF0;
   opacity:1;
   margin-right: 5px;
}

.swiper-pagination-bullet-active{
 background: #BA242D;
}

#galery-clientes .swiper-slide{
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
}

#galery-clientes .swiper-slide img{
  width: 85%;
}

/*-----Nav galery industria-----*/
.swiper-button-next-industria::after {
  height: 100%;
 content: "\F135";
 font-family: bootstrap-icons !important;
 font-size: 30px;
    line-height: 0px;
 display: flex;
 justify-content: center;
 align-items: center;
}

.swiper-button-prev-industria::after {
  height: 100%;
content: "\F12C";
font-family: bootstrap-icons !important;
font-size: 30px;
    line-height: 0px;
display: flex;
justify-content: center;
align-items: center;
}

.swiper-button-next-industria {
  width: 35px;
  height: 35px;
   position: relative;
   margin-left: 15px;
   display: inline-table !important;
   top:0px;
   font-size: 20px;
   color: #000;
   border: 1px solid #BA242D;
     transition:all .7s ease;
}

.swiper-button-next-industria:hover{
  background: #BA242D;
  border: 1px solid #BA242D;
  color: #fff;
}

.swiper-button-prev-industria {
  width: 35px;
  height: 35px;
   position: relative;
   margin-right: 15px;
   display: inline-table !important;
   top:0px;
   font-size: 20px;
   color: #000;
   border: 1px solid #BA242D;
     transition:all .7s ease;
}

.swiper-button-prev-industria:hover {
  background: #BA242D;
  border: 1px solid #BA242D;
  color: #fff;
}

.swiper-button-next-industria.swiper-button-disabled, .swiper-button-prev-industria.swiper-button-disabled {
   opacity: .35;
   cursor: auto;
   pointer-events: none;
}


/*-----Nav galery Noticias-----*/
.swiper-button-next-notice::after {
  height: 100%;
 content: "\F135";
 font-family: bootstrap-icons !important;
 font-size: 30px;
    line-height: 0px;
 display: flex;
 justify-content: center;
 align-items: center;
}

.swiper-button-prev-notice::after {
  height: 100%;
content: "\F12C";
font-family: bootstrap-icons !important;
font-size: 30px;
    line-height: 0px;
display: flex;
justify-content: center;
align-items: center;
}

.swiper-button-next-notice {
  width: 35px;
  height: 35px;
   position: relative;
   margin-left: 5px;
   display: inline-table !important;
   top:0px;
   font-size: 20px;
   color: #000;
   border: 1px solid #BA242D;
     transition:all .7s ease;
}

.swiper-button-next-notice:hover{
  background: #BA242D;
  border: 1px solid #BA242D;
  color: #fff;
}

.swiper-button-prev-notice {
  width: 35px;
  height: 35px;
   position: relative;
   margin-right: 5px;
   display: inline-table !important;
   top:0px;
   font-size: 20px;
   color: #000;
   border: 1px solid #BA242D;
     transition:all .7s ease;
}

.swiper-button-prev-notice:hover {
  background: #BA242D;
  border: 1px solid #BA242D;
  color: #fff;
}

.swiper-button-next-notice.swiper-button-disabled, .swiper-button-prev-notice.swiper-button-disabled {
   opacity: .35;
   cursor: auto;
   pointer-events: none;
}

/* ===================================
       Call to action
====================================== */

.content-cta{

  background-image: linear-gradient(180deg, rgba(187,32,38,0.7989320728291316) 0%, rgba(187,32,38,0.95) 130%),
                  url("../../assets/img/inicio/banner-CTA/textura-banner-cta.png");
  padding: 20px;
  border-radius: 10px;

}






/* ===================================
    Lines
====================================== */

li::marker {color: #BA242D}
.ul-title{padding-left: 1rem!important;}

.ul-alt li::marker {color: #fff}

.line-deco{
  width: 60%;
  height: 1px;
  background: #BA242D;
  margin-top: 10px;
  margin-bottom: 10px;
}

.border-left{
  border-left: 2px solid #BA242D;
  padding-left: 10px;
}

.border-left-white{
  border-left: 2px solid #fff;
  padding-left: 10px;
}

.border-top-alt{
  border-top: 2px solid #BA242D;
  padding-top: 10px;
}

.border-bottom{
  border-bottom: 1px solid #D9D9D9;
  padding-bottom: 10px;
}


/* ===================================
    hover
====================================== */

.hover-zoom:hover .image,
.parent:hover .hover-zoom .image {
	transform: scale(1.1);
	transition-duration: 7s;
}

.hover-zoom-rotate:hover .image,
.parent:hover .hover-zoom-rotate .image {
	transform: scale(1.1) rotate(3deg);
	transition-duration: 7s;
}


/* ===================================
    Cards
====================================== */

.content-event{
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-event{
  width: 100%;
  min-height: 300px;
  padding: 20px;

  display: grid;
  grid-template-columns: 1fr;
  gap:10px;
  transition: 0.5s all ease;
}

.card-event:hover{
  background: #FAFAFA;
  transition: 0.5s all ease;
}

.card-event .img-event img{
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
  aspect-ratio: 1 / 1;
}

.card-event .inf-event{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.card-event .inf-event .descripcion p{

  font-size: 1rem!important;
  font-weight: 400!important;
  font-family: 'Poppins', sans-serif !important;
  line-height:1.5rem!important;
    background: transparent!important;
    margin-top: 0px;
    margin-bottom: 0px;
}

.card-event .inf-event .descripcion span{
  font-size: 1rem!important;
  font-weight: 400!important;
  font-family: 'Poppins', sans-serif !important;
    background: transparent!important;
    text-align: left!important;
    margin-bottom: 0;
}

.card-event .inf-event .descripcion div{
  margin-bottom: 0px!important;
}

.card-event .inf-event .descripcion h1{
  margin-bottom: 0px!important;
  font-size: 1rem!important;
  font-weight: 400!important;
  font-family: 'Poppins', sans-serif !important;
  line-height:1.5rem!important;
}
.card-event .inf-event .descripcion h2{
  margin-bottom: 0px!important;
  font-size: 1rem!important;
  font-weight: 400!important;
  font-family: 'Poppins', sans-serif !important;
  line-height:1.5rem!important;
}
.card-event .inf-event .descripcion h3{
  margin-bottom: 0px!important;
  font-size: 1rem!important;
  font-weight: 400!important;
  font-family: 'Poppins', sans-serif !important;
  line-height:1.5rem!important;
}
.card-event .inf-event .descripcion h4{
  margin-bottom: 0px!important;
  font-size: 1rem!important;
  font-weight: 400!important;
  font-family: 'Poppins', sans-serif !important;
  line-height:1.5rem!important;
}
.card-event .inf-event .descripcion h5{
  margin-bottom: 0px!important;
  font-size: 1rem!important;
  font-weight: 400!important;
  font-family: 'Poppins', sans-serif !important;
  line-height:1.5rem!important;
}
.card-event .inf-event .descripcion h6{
  margin-bottom: 0px!important;
  font-size: 1rem!important;
  font-weight: 400!important;
  font-family: 'Poppins', sans-serif !important;
  line-height:1.5rem!important;
}

/*-----Card noticias------*/

.card-notice .img{
  /*width: auto;*/
  height: 200px;
  overflow: hidden;
}

.card-notice .img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-duration: 7s;
}

.card-notice .info{
  margin-top: 20px;
}

.card-notice .info .title{
  font-weight: 600;
  margin-bottom: 0px;
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
      font-family: 'League Spartan'!important;
}

.card-notice .info .description{
  height: 50px;
  overflow: hidden;
}

.card-notice .info .description p{
  margin-bottom: 0px;
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
      font-family: 'Poppins'!important;
      margin: 0px;
      background: transparent!important
}

.card-notice .info .description span{
  margin-bottom: 0px;
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
      font-family: 'Poppins'!important;
      margin: 0px;
      background: transparent!important
}


.card-notice .info .description strong{
  margin-bottom: 0px;
      font-family: 'Poppins'!important;
      margin: 0px;
      background: transparent!important
}

/*Cerfiticacines*/
.grid-certificaciones{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:10px;
}

.grid-certificaciones .content-img{
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-certificaciones .content-img img{
  width: 100px;
  height: auto;
}

/* ===================================
    Grid
====================================== */

.grid-main{
  display: grid;
  grid-template-columns: 1fr;
}

.grid-1{
  display: grid;
  grid-template-columns: 1fr;
}

.grid-main-lg{
  display: grid;
  grid-template-columns: 1fr;
}

.grid-inputs{
  display: grid;
  grid-template-columns: 1fr;
  gap:10px;
}

/* ===================================
    Alertas
====================================== */

.noti-info{
  background: #e2ad4b;
  color:#fff;
  padding: 15px;
  width: 100%;
  transition: 0.7s ease all;
  border-radius: 5px;
}

/* ===================================
    Paginador
====================================== */

.pagination{
  align-items: center;
}

.page-link{
  background: transparent;
  border: 1px solid #BB2026;
  color: #000000;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  cursor: pointer;
}

.page-link:hover{
  background: #BB2026;
  color: white!important;
}

.pagination .active{
width: 35px;
height: 35px;
background: #BB2026;
border-color:#BB2026!important;
color: white;
text-decoration: underline;
}
.first .page-link{
  color:#000;
  border-radius: 0px ;
  border: 1px solid transparent !important;
  width: auto;
  height: auto;
  margin: 0px;
}

.pagination .disabled{
  opacity: .35;
cursor: auto;
pointer-events: none;
}



.pagination .disabled:focus{
  border: 0px;
}

.last .page-link{
  color:#000;
  border-radius: 0px;
  border: 1px solid transparent;
  width: auto;
  height: auto;
  margin: 0px;
}

.prev .page-link{
  color: #000000;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  padding: 0px;
  border: none!important;
}

.next .page-link{

  color: #000000;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  padding: 0px;
  border: none!important;
}

.prev .page-link:hover{
  background: #BB2026;
  color: #fff;
}


.next .page-link:hover{
  background: #BB2026
  color: #fff;
}

.last .page-link:hover{
  color: #BB2026!important;
  background: transparent !important;

}

.first .page-link:hover{
  color: #BB2026!important;
  background: transparent !important;

}


/*Focus*/


.pagination a:focus{
outline: none; box-shadow: none;
}

.next a:focus{
outline: none; box-shadow: none;
background: transparent;
color: #D42C1C;
}
.prev a:focus{
outline: none; box-shadow: none;
background: transparent;
color: #D42C1C;
}

.last a:focus{
outline: none; box-shadow: none;
background: transparent;
}

.first a:focus{
outline: none; box-shadow: none;
background: transparent;
}



/* ===================================
  Sticky
====================================== */

.sticky-efect {
  width: 100%;
  position: sticky;
  top:100px;
  display:inline-block;

}

/* ===================================
    Responsive
====================================== */

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {

/*Grid general*/
.grid-inputs{grid-template-columns: 50% auto;}
/*-----*/
/*Cerfiticacines*/
.grid-certificaciones{grid-template-columns: repeat(3,1fr);}
/*-----*/

/*Card Evento*/
.card-event .img-event img{height: 250px;}
/*-----*/


}
/* md  */ @media (min-width: 768px) {
/*Grid general*/
.grid-main{grid-template-columns: 1fr 1fr;}
.grid-inputs{grid-template-columns: 1fr;}
.grid-50-md{grid-template-columns: 1fr 1fr;}
/*-----*/

/*Card Evento*/
.card-event{grid-template-columns: 40% auto;gap:20px}
.card-event .img-event img{height: auto;}

/*-----*/

/*Call to action*/
.content-cta{padding: 50px;}


.card-notice .info .description{height: 75px;}

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {
/*Grid general*/
.grid-inputs{grid-template-columns: 50% auto;}
.grid-50-lg{grid-template-columns: 1fr 1fr;}
.grid-40-lg{grid-template-columns: 40% auto;;}
/*-----*/




} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {


/*Grid general*/
.grid-50-xl{grid-template-columns: 1fr 1fr;}



}
/* xxl */ @media (min-width: 1400px) {}