@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: 'Figtree', sans-serif !important;
     -webkit-font-smoothing: antialiased;
     font-smooth: antialiased;
     /* font-size: 16px; */
     font-weight: 400;
     line-height: auto;
     color:#1E1E1E;
     background-color: #fff;
     margin: 0px;
}
body, html {min-height: 100%; -moz-osx-font-smoothing: grayscale;}

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


a, a:active, a:focus { color: #1E1E1E; text-decoration: none;transition:all .5s ease;}
a:hover, a:active{color: #2385C6; text-decoration: none; cursor: pointer;transition:all .5s ease;}
/*a:focus, a:active, button:focus, button:active, .btn-main.active.focus, .btn-main.active:focus, .btn-main.focus, .btn-main:active.focus, .btn-main:active:focus, .btn-main:focus {outline: none; box-shadow: none; } */

/*footer a, footer a:active, footer a:focus { color: #ffffff; text-decoration: none; font-size: 12px; 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-main.active.focus, footer .btn-main.active:focus, footer .btn-main.focus, footer .btn-main:active.focus, footer .btn-main:active:focus,footer  .btn-main:focus {outline: none; box-shadow: none; }

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


/* ===================================
    Typography
====================================== */
b, strong{font-weight: 600;}

/* heading */
h1, h2, h3, h4, h5, h6 {font-family: 'Figtree', sans-serif; letter-spacing: 0;color: #949699;}

h1, .h1 {font-size:2.25rem; line-height:130%; font-weight: 400;}
h2, .h2 {font-size:1.875rem; line-height:130%; font-weight: 400;}
h3, .h3 {font-size:1.25rem; line-height:130%; font-weight: 400;}
h4, .h4 {font-size:1.125rem; line-height:130%; font-weight: 400;}
h5, .h5 {font-size:1rem; line-height:130%; font-weight: 400;}
h6, .h6 {font-size:0.875rem; line-height:150%; font-weight: 400;}

p {font-size:0.875rem;font-weight: 400;line-height:150%;}
.small {font-size:0.75rem;font-weight: 400;line-height:150%;}


/* md  */ @media (min-width: 768px) {

  h1, .h1 {font-size:2.5rem; line-height:130%; font-weight: 400;}
  h2, .h2 {font-size:2.25rem; line-height:130%; font-weight: 400;}
  h3, .h3 {font-size:1.5rem; line-height:130%; font-weight: 400;}
  h4, .h4 {font-size:1.25rem; line-height:130%; font-weight: 400;}
  h5, .h5 {font-size:1.125rem; line-height:130%; font-weight: 400;}
  h6, .h6 {font-size:1rem; line-height:150%; font-weight: 400;}

  p {font-size:1rem;font-weight: 400;line-height:150%;}
  .small {font-size:0.875rem;font-weight: 400;line-height:150%;}

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

  h1, .h1 {font-size:3.125rem; line-height:130%; font-weight: 400;}

} /* ipad Landscape */


.text-alt{color:#104570;}
.text-oblig{color:#E92E15}

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

.bg-main{background: #F5F5F5;}
.bg-alt{background: #DBEBF4;}



.bg-back{
  background: #DBEBF4;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 30%;
}


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


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

.btn-main {
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
  will-change: transform;
}

.btn-cta-text,
.btn-main-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: transform 0.28s ease, background 0.28s ease;
}

.btn-cta-text {
  padding: 5px 20px;
  font-weight: 700;
  margin-bottom: 0px;
  background: #EDB500;
  border-radius: 4px;
  color: #fff;
}

.btn-main-icon {
  min-width: 42px;
  padding: 5px;
  background: #EDB500;
  border-radius: 4px;
  margin-left: 5px;
  color: #fff;
  font-size: 20px;
}

/* Hover */
.btn-main:hover {
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.18);
}

.btn-main:hover .btn-main-icon {
  transform: translateX(4px);
  background: #2385C6;
}

.btn-main:hover .btn-cta-text {
  transform: translateX(1px);
  background: #2385C6;
}

/* Active */
.btn-main:active {
  transform: translateY(-1px) scale(0.985);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.14);
}

/* Focus accesible */
.btn-main:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}


/*Link Flecha*/

.main-link a{color:#ECB500; text-decoration: none; font-size: 14px;font-weight: 700;}
.main-link div{color:#ECB500; text-decoration: none; font-size: 12px;font-weight: 700;cursor: pointer;}

.main-link a {
  -webkit-transition: ease-in-out 0.7s !important;
  -moz-transition: ease-in-out 0.7s !important;
  -ms-transition: ease-in-out 0.7s !important;
  -o-transition: ease-in-out 0.7s !important;
  transition: ease-in-out 0.7s !important;

}


.main-link div {
  -webkit-transition: ease-in-out 0.7s !important;
  -moz-transition: ease-in-out 0.7s !important;
  -ms-transition: ease-in-out 0.7s !important;
  -o-transition: ease-in-out 0.7s !important;
  transition: ease-in-out 0.7s !important;

}

.main-link i{color: #ECB500;font-size: 14px;transition: ease-in-out 0.7s !important; text-decoration: none;}


.main-link a:hover {
  margin-left: 20px;
  color: #2385C6;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
  text-decoration: none;
}

.main-link div:hover {
  margin-left: 20px;
  color: #2385C6;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
  text-decoration: none;
}

.main-link a:hover i{color: #2385C6;transition: ease-in-out 0.7s !important;}
.main-link div:hover i{color: #2385C6;transition: ease-in-out 0.7s !important;}


.back a:hover {
  margin-left: -20px!important;
  color: #4A87C6;
  -webkit-transition: ease-in-out 0.5s !important;
  -moz-transition: ease-in-out 0.5s !important;
  -ms-transition: ease-in-out 0.5s !important;
  -o-transition: ease-in-out 0.5s !important;
  transition: ease-in-out 0.5s !important;
}

/*Btn download*/

.btn-down{
  background: #EDB500;
  border-radius: 5px;
  border: none;
  color: white;
  padding: 9px 5px;
  min-width: 150px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: 25px;
  padding-right: 25px;
  transition: all 0.7s ease;
}

.btn-down img{
  width: 20px;
}

.btn-down:hover{
  background: #2385C6;
  transition: all 0.7s ease;
  color: #fff;
}


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

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

.swiper-pagination-bullet{
   background:#EDB500;
   opacity:1;
   margin-right: 5px!important;
   margin-left: 8px!important;
}


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

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

.card-main{
  background: #FFFFFF;
  width: 100%;
  min-height: 200px;
  padding: 20px;
  border-radius: 12px;
  border-top: 10px solid #2385C6;
}


.card-main:hover .icon-img{
  transform: translate3d(0, -3px, 0);
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}



.card-main .icon-left{
  width: 100%;
  margin-bottom: 15px;
  display: flex;
  justify-content:flex-start;
  align-items: center;
}

.card-main .icon-left .icon-img{
  width: 45px;
  height: 45px;
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}




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

.image{
  transition-duration: 5s;
}

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

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


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

.cont-cta{
  width: 100%;
  min-height: 300px;
  padding: 30px 20px 30px 20px;
  background:#114470;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 16px;
  position: relative;
}

.img-cta{
  width: 50%;
  position: relative;
  bottom: -30px;
}

.textura-cta{
  position: absolute;
    bottom: -0px;
    left: 0px;
    width: 100%;
}


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


.pagination{
  align-items: center;
}

.page-link{
  background: transparent;
  border-bottom: 2px solid #CADEF0;
  color: #114470;
  opacity: 1;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  border-top: none!important;
  border-left: none!important;
  border-right: none!important;
}

.page-link:hover{
  background: transparent;
  color: #ECB500!important;
  opacity: 1;
}

.page-link:focus{
  box-shadow: 0 0 0 0rem rgba(13, 110, 253, .25);
}


.pagination .active{
  width: 30px;
height: 30px;
color: #114470;
border-bottom: 2px solid #114470;
text-decoration: none;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
}
.first .page-link{
  color:#A8A8A8;
  border-radius: 0px ;
  border: 1px solid transparent !important;
  width: auto;
  height: auto;
  margin: 0px;
  opacity: 1;
}

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



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

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

.prev .page-link{
  color: #fff;
  background: #114470;
  border-radius: 4px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  padding: 0px;
  border: none!important;
  opacity: 1;
  margin-right: 20px;
}

.next .page-link{

  color: #fff;
  background: #114470;
  border-radius: 4px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  padding: 0px;
  border: none!important;
  opacity: 1;
  margin-left: 20px;
}

.prev .page-link:hover{
  color: #ECB500!important;
}


.next .page-link:hover{
  color: #ECB500!important;
}

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

}

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

}

.pagination li {
  list-style: none;
}

.pagination li.dots span {
  padding: 6px 10px;
  color: #999;
  font-weight: 600;
  user-select: none;
}

/*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;
}

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

.grid-1fr{grid-template-columns: 1fr;}
.grid-50{grid-template-columns: 1fr 1fr}
.grid-3fr{grid-template-columns: repeat(3,1fr);}
.no-gap{gap:0px;}
.gap-10{gap:10px;}
.gap-20{gap:20px;}
.gap-30{gap:30px;}
.gap-40{gap:40px;}
.gap-50{gap:50px;}
.gap-100{gap:100px;}
.order-1{order:1!important;}
.order-2{order:2!important;}

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

.noti-info{
  color:#fff;
  background: #114470;
  border: 2px solid #EDB500;
  padding: 15px;
}

/* ===================================
    Borders
====================================== */

.border-bottom-dots{
  border-bottom: 1px dashed #B8B8B8;
}

/* ===================================
    Forms
====================================== */

.form-control{
  background-color: #fff;
  color: #7C7C7C;
  border-radius: 5px;
}

.form-control:hover {
  border-color: #114470;
}

.form-control:focus{
      box-shadow: 0 0 0 0rem rgba(13, 110, 253, .25);
      border-color: #EBF1F6;
      background-color: #fff;
      color: #7C7C7C;
}

.content-img-form{
  width: 100%;
  height: 100%;
  border-radius: 16px;
    display: none;
}

.content-img-form img{
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;

}

#formulario-contacto .form-control{
  background-color: #F5F5F5;
  color: #7C7C7C;
  border-radius: 5px;
}

/* ===================================
    Collapse
====================================== */


.accordion-button h3{
  font-weight: 600;
  margin-bottom: 0px;
  margin-right: 40px;
  color: #114470;
}

.accordion-button img{
  width: 30px;
  margin-right: 5px;
}

.accordion-button:not(.collapsed) {
  color: initial;
  background-color: transparent;
  box-shadow: none;
  border: 0px;
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 0px;
  padding-right: 15px;
  font-size:initial;
  color: initial;
  text-align: start;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;
}

.accordion-button::after{
position: absolute;
right: 0;
top: 15px;
content: "\F282";
font-size: 20px;
font-family: bootstrap-icons !important;
color: #114470;
background-image: none !important;
font-weight: 600;
}


.accordion-button:focus {
  z-index: 3;
  border-color: #D9D9D9 !important;
  box-shadow: 0 0 0 0 white;
}

.accordion-body{
  padding: 0px;
}

.accordion-body p{
  margin: 0px;
}

.accordion-button:not(.collapsed)::after{
  background-image: none;
  content: "\F286";
  font-size: 20px;
  font-family: bootstrap-icons !important;
  color: #114470;
  transform: none;

}


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

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


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



/*Grid*/
.sm-grid-80{grid-template-columns: 80% 1fr;}
.sm-grid-75{grid-template-columns: 75% 1fr;}
.sm-grid-70{grid-template-columns: 70% 1fr;}
.sm-grid-65{grid-template-columns: 65% 1fr;}
.sm-grid-60{grid-template-columns: 60% 1fr;}
.sm-grid-55{grid-template-columns: 55% 1fr;}
.sm-grid-50{grid-template-columns: 1fr 1fr;}
.sm-grid-45{grid-template-columns: 45% 1fr;}
.sm-grid-35{grid-template-columns: 35% 1fr;}
.sm-grid-30{grid-template-columns: 30% 1fr;}
.sm-grid-3fr{grid-template-columns: repeat(3,1fr);}
.sm-grid-1fr{grid-template-columns: 1fr;}
.sm-no-gap{gap:0px;}
.sm-gap-10{gap:10px;}
.sm-gap-20{gap:20px;}
.sm-gap-30{gap:30px;}
.sm-gap-40{gap:40px;}
.sm-gap-50{gap:50px;}
.sm-gap-100{gap:100px;}
.sm-order-1{order:1!important;}
.sm-order-2{order:2!important;}

/*cta*/
.cont-cta{padding: 30px 30px 30px 30px;}

}
/* md  */ @media (min-width: 768px) {

/*link*/

.main-link a{font-size: 16px;}
.main-link i{font-size: 16px;}
.main-link div{font-size: 14px;}

/*Grid*/
.md-grid-80{grid-template-columns: 80% 1fr;}
.md-grid-75{grid-template-columns: 75% 1fr;}
.md-grid-70{grid-template-columns: 70% 1fr;}
.md-grid-65{grid-template-columns: 65% 1fr;}
.md-grid-60{grid-template-columns: 60% 1fr;}
.md-grid-55{grid-template-columns: 55% 1fr;}
.md-grid-50{grid-template-columns: 1fr 1fr;}
.md-grid-45{grid-template-columns: 45% 1fr;}
.md-grid-40{grid-template-columns: 40% 1fr;}
.md-grid-35{grid-template-columns: 35% 1fr;}
.md-grid-30{grid-template-columns: 30% 1fr;}
.md-grid-3fr{grid-template-columns: repeat(3,1fr);}
.md-grid-1fr{grid-template-columns: 1fr;}
.md-no-gap{gap:0px;}
.md-gap-10{gap:10px;}
.md-gap-20{gap:20px;}
.md-gap-30{gap:30px;}
.md-gap-40{gap:40px;}
.md-gap-50{gap:50px;}
.md-gap-100{gap:100px;}
.md-order-1{order:1!important;}
.md-order-2{order:2!important;}

/*cta global*/
.cont-cta{
  grid-template-columns: auto 70%;
  padding: 30px 60px 30px 60px;
}

.img-cta {
  height: auto;
  width: 100%;
    position: absolute;
    bottom: -30px;
}

/*Forms*/
.content-img-form{display: inherit;}


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

/*Grid*/
.lg-grid-80{grid-template-columns: 80% 1fr;}
.lg-grid-75{grid-template-columns: 75% 1fr;}
.lg-grid-70{grid-template-columns: 70% 1fr;}
.lg-grid-65{grid-template-columns: 65% 1fr;}
.lg-grid-60{grid-template-columns: 60% 1fr;}
.lg-grid-55{grid-template-columns: 55% 1fr;}
.lg-grid-50{grid-template-columns: 1fr 1fr;}
.lg-grid-45{grid-template-columns: 45% 1fr;}
.lg-grid-40{grid-template-columns: 40% 1fr;}
.lg-grid-35{grid-template-columns: 35% 1fr;}
.lg-grid-30{grid-template-columns: 30% 1fr;}
.lg-grid-3fr{grid-template-columns: repeat(3,1fr);}
.lg-grid-1fr{grid-template-columns: 1fr;}
.lg-no-gap{gap:0px;}
.lg-gap-10{gap:10px;}
.lg-gap-20{gap:20px;}
.lg-gap-30{gap:30px;}
.lg-gap-40{gap:40px;}
.lg-gap-50{gap:50px;}
.lg-gap-80{gap:80px;}
.lg-gap-100{gap:100px;}
.lg-order-1{order:1!important;}
.lg-order-2{order:2!important;}

/*cta-global*/
.cont-cta{
  grid-template-columns: auto 70%;
    padding: 30px 100px 30px 100px;
}
.img-cta{
  height: 140%;
  width: auto;
  bottom: -30px;
}

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


/*Grid*/
.xl-grid-80{grid-template-columns: 80% 1fr;}
.xl-grid-75{grid-template-columns: 75% 1fr;}
.xl-grid-70{grid-template-columns: 70% 1fr;}
.xl-grid-65{grid-template-columns: 65% 1fr;}
.xl-grid-60{grid-template-columns: 60% 1fr;}
.xl-grid-55{grid-template-columns: 55% 1fr;}
.xl-grid-50{grid-template-columns: 1fr 1fr;}
.xl-grid-45{grid-template-columns: 45% 1fr;}
.xl-grid-40{grid-template-columns: 40% 1fr;}
.xl-grid-35{grid-template-columns: 35% 1fr;}
.xl-grid-30{grid-template-columns: 30% 1fr;}
.xl-grid-3fr{grid-template-columns: repeat(3,1fr);}
.xl-grid-1fr{grid-template-columns: 1fr;}
.xl-no-gap{gap:0px;}
.xl-gap-10{gap:10px;}
.xl-gap-20{gap:20px;}
.xl-gap-30{gap:30px;}
.xl-gap-40{gap:40px;}
.xl-gap-50{gap:50px;}
.xl-gap-100{gap:100px;}
.xl-order-1{order:1!important;}
.xl-order-2{order:2!important;}

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