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




a, a:active, a:focus { color: #2F254D;; text-decoration: none;transition:all .5s ease;}
a:hover, a:active{color: #2F254D; text-decoration: none; cursor: pointer;transition:all .5s ease;}
/*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; 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: 'Plus Jakarta Sans', sans-serif; letter-spacing: 0;color: #2F254D;}

h1, .h1 {font-size:2.21rem; line-height:2.21rem; font-weight: 400;}
h2, .h2 {font-size:1.78rem; line-height:2.21rem; font-weight: 400;}
h3, .h3 {font-size:1.35rem; line-height:1.8rem; font-weight: 400;}
h4, .h4 {font-size:1.07rem; line-height:1.6rem; font-weight: 400;}
h5, .h5 {font-size:0.92rem; line-height:1.3rem; font-weight: 400;}
h6, .h6 {font-size:0.92rem; line-height:1.3rem; font-weight: 400;}

p {font-size:0.92rem;font-weight: 400;line-height:1.2rem;}
.small {font-size:0.92rem;font-weight: 400;line-height:1.2rem;}



/* 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:2.42rem; line-height:2.78rem; font-weight: 400;}
h2, .h2 {font-size:2rem; line-height:2.78rem; font-weight: 400;}
h3, .h3 {font-size:1.57rem; line-height:2rem; font-weight: 400;}
h4, .h4 {font-size:1.28rem; line-height:1.8rem; font-weight: 400;}
h5, .h5 {font-size:1.07rem; line-height:1.6rem; font-weight: 400;}
p {font-size: 1rem;font-weight: 400;line-height:1.5rem;}


} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {
h1, .h1 {font-size:2.64rem; line-height:3rem; font-weight: 400;}
h2, .h2 {font-size:2.21rem; line-height:3rem; font-weight: 400;}
h3, .h3 {font-size:1.78rem; line-height:2.3rem; font-weight: 400;}

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



/* text color */
.text-main{ color:#1D1D1B;}
.text-alt{color:#625DA6;}
.text-yellow{color: #FFD800;}

.color-main{ color:#1D1D1B!important;}

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

.bg-alt{
  background: #625DA61A;
}
.bg-question{background: #EFEFF6;}
.bg-HRG{background: #2F254D;}
.bg-hacemos{background: linear-gradient(180deg, #FFFFFF 0%, #EFEFF6 100%);}

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

.cover{
  height: 600px;
  position: relative;
  background: #2B50AA;
}


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


.animated-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 30px;
  border: 0px solid;
  border-color: transparent;
  background-color: #625DA6;
  border-radius: 100px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 0 0 0px #ffffff;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none;
}

.animated-button svg {
  position: absolute;
  width: 20px;
  fill: #fff;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
  right: 16px;
}

.animated-button .arr-2 {
  left: -25%;
}

.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #2F254D;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  z-index: 10;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #FFF;
  border-radius: 100px;
}

.animated-button:hover .arr-1 {
  right: -25%;
}

.animated-button:hover .arr-2 {
  left: 16px;
}

.animated-button:hover .text {
  transform: translateX(12px);
}

.animated-button:hover svg {
  fill: #FFF;
}

.animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px greenyellow;
}

.animated-button:hover .circle {
  width: 120%;
  height: 220px;
  opacity: 1;
}

/*Boton Alt Amarillo*/

.animated-button-yellow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 30px!important;
  border: 0px solid;
  border-color: transparent;
  background-color: #FFD800;
  border-radius: 100px;
  color: #2F254D;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 0 0px #ffffff;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none;
}

.animated-button-yellow svg {
  position: absolute;
  width: 20px;
  fill: #2F254D;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button-yellow .arr-1 {
  right: 16px;
}

.animated-button-yellow .arr-2 {
  left: -25%;
}

.animated-button-yellow .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #625DA6;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button-yellow .text {
  position: relative;
  z-index: 10;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button-yellow:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #FFF;
  border-radius: 100px;
}

.animated-button-yellow:hover .arr-1 {
  right: -25%;
}

.animated-button-yellow:hover .arr-2 {
  left: 16px;
}

.animated-button-yellow:hover .text {
  transform: translateX(12px);
}

.animated-button-yellow:hover svg {
  fill: #FFF;
}

.animated-button-yellow:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px greenyellow;
}

.animated-button-yellow:hover .circle {
  width: 120%;
  height: 220px;
  opacity: 1;
}


/*Boton whatsapp*/

.animated-button-whats {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 30px;
  border: 0px solid;
  border-color: transparent;
  background-color: #2EB843;
  border-radius: 100px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 0 0px #ffffff;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none;
}

.animated-button-whats i {
  position: absolute;
  width: 20px;
  fill: #fff;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button-whats .arr-1 {
  right: 16px;
}

.animated-button-whats .arr-2 {
  left: -25%;
}

.animated-button-whats .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #22ab32;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button-whats .text {
  position: relative;
  z-index: 10;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button-whats:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #FFF;
  border-radius: 100px;
}

.animated-button-whats:hover .arr-1 {
  right: -25%;
}

.animated-button-whats:hover .arr-2 {
  left: 16px;
}

.animated-button-whats:hover .text {
  transform: translateX(12px);
}

.animated-button-whats:hover i {
  color: #FFF;
}

.animated-button-whats:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px greenyellow;
}

.animated-button-whats:hover .circle {
  width: 120%;
  height: 220px;
  opacity: 1;
}

/*Boton tarjetas*/
.btn-next{
  width: 40px;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color:#fff;
  transition:all .5s ease;
}

.btn-next::after{
  content: "\F138";
  font-family: bootstrap-icons !important;
}

.btn-next:hover{
  background: #625DA6;
  border: 1px solid #625DA6;
  color: #fff;
  transition:all .5s ease;
}


/*Boton negro*/
.btn-next-alt{
  width: 40px;
  height: 40px;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color:#000;
  transition:all .5s ease;
}

.btn-next-alt::after{
  content: "\F138";
  font-family: bootstrap-icons !important;
}

.btn-next-alt:hover{
  background: #625DA6;
  border: 1px solid #625DA6;
  color: #fff;
  transition:all .5s ease;
}



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

/* ===================================
    Numeralia
====================================== */
.counter {
  font-size: 4.07rem;
  font-weight: 800;
  color: #fff;
  line-height: 4.5rem;
  opacity: 0.7;
}


.counter-alt-color{
  color: #625DA6!important;
}

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

.content-cta{
  background: linear-gradient(180deg, rgba(98, 93, 166, 0.2) 0%, rgba(73, 66, 122, 0.6) 50%, #2F254D 100%),url("../../assets/img/footer/imagen-footer.jpg");
  min-height: 350px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-radius: 30px;
  padding: 30px;
}

.content-cta .icon{
  position: relative;
  top: 0px;
  right: 0;
  margin-bottom: 15px;
}

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


/* ===================================
    Iconos
====================================== */

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


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

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

.content-question{
  padding: 30px;
  background: #EFEFF6;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}


/* ===================================
    icons
====================================== */

.icon-lg{width: 100px;}
.icon-md{width: 80px;}
.icon-xs{width: 60px;}

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

.grid-1fr{grid-template-columns: 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;}

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

.noti-info{
  color:#fff;
  padding-bottom: 20px;
}

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


.form-control {
    font-size: 1rem;
    color: #fff;
    background: #FFFFFF1A;
    border: 0px solid #fff;
    border-radius: 10px;
    padding: 12px 10px;
}

.form-control:focus{
  background-color: #fff;
  box-shadow: 0 0 0;
}


.form-select {
    font-size: 1rem;
    color: #fff;
    background-color: #FFFFFF1A;
    border: 0px solid #fff;
    border-radius: 10px;
    padding: 12px 10px;
     background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 140 140' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70 90L40 50h60z'/%3E%3C/svg%3E");
}

.form-select:focus{
  background-color: #fff;
  color: #000;
  box-shadow: 0 0 0;
}

/* ===================================
    borders
====================================== */

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


.direction-metlife{flex-direction: column;}

/* ===================================
    calculadora
====================================== */

#content-calculdora input{border: 0px;width: 100%!important;}
#content-calculdora select{border: 0px;width: 100%;}

.calculadora{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

#resultadosWrapper{
  display: none;
  margin-top: 40px;
}

.resultados{
  display:grid;
  grid-template-columns: 1fr;
  gap:30px;
}

.resultados h1{
  color: #625DA6;
  font-size: 27px;
  line-height: 140%;
  font-weight: 800;
}

.explicacion{
  background: #625CA6;
  padding: 20px;
  color: #fff!important;
  margin-top: 40px;
}

.content-input-calculadora{
  display: flex;
  justify-content: center;
  gap:20px;
  flex-direction: column;
}



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

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {
/*Calculadora*/
.resultados{grid-template-columns: repeat(3,1fr);}
.direction-metlife{flex-direction: row;}

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

/*Calculadora*/
.content-input-calculadora{flex-direction: row;}
#content-calculdora select{border: 0px;width: auto;;}

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




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

/*Calculadora*/
.resultados h1{font-size: 37px;}

/*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-35{grid-template-columns: 35% 1fr;}
.md-grid-30{grid-template-columns: 30% 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;}

/*Iconos*/
.md-icon-lg{width: 100px;}
.md-icon-md{width: 80px;}
.md-icon-xs{width: 60px;}

.content-cta .icon{position: absolute;
  top: 35px;
  right: 35px;
}


} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {
/*Calculadora*/
.resultados h1{font-size: 47px;}

/*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-35{grid-template-columns: 35% 1fr;}
.lg-grid-30{grid-template-columns: 30% 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;}

/*Iconos*/
.lg-icon-lg{width: 100px;}
.lg-icon-md{width: 80px;}
.lg-icon-xs{width: 60px;}

/*--------*/
.content-question{flex-direction: row;justify-content: space-between;align-items: center;}


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