@import url('bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

 #smooth-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
          #smooth-content {
            will-change: transform;
        }
        
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
   font-family: "Poppins", sans-serif;
}


body{
   font-family: "Open Sans", sans-serif;
}
.ttf_heading{
  font-family: "Poppins", sans-serif;
}
.ttf_primary{
  font-family: "Open Sans", sans-serif;
}
.primary_color{
  color: #575757;
}
ul.navbar-nav.menu a {
  color: #383838;
}

p{
  color: #575757;
}

footer p{
  color: #fff;
}
footer{
  position: relative;
  padding: 3rem 0 2rem 0;
  background-color: #122652;
  color: #fff;
}



.page-header {
background-color: #F2F7FD;
overflow: hidden;
  }

.sidebar {
    margin-top: 10rem;
}
.com-content-article__body {
  padding: 2rem 0;
}

li.field-entry.link-youtube {
  list-style: none;
}


.mod-list-mesas li {
  background-color: #12957f;
  border-radius: 6px;
}
section#logos ul {
  display: flex;
  list-style: none;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 0;
  padding: 1rem 0;
}

.promover_img {
    position: relative;
}


.mb-5rem {
    margin-bottom: 5rem;
}
.principios{
  background: #F2F7FD;
}


.accordion-item {
    background-color: transparent;
}

button.accordion-button {
    background-color: transparent;
}
.py-1505rem{
  padding: 15rem 0 5rem 0;
}
.promover_img:before {
    content: '';
    position: absolute;
    width: 900px;
    height: 900px;
    background-color: aliceblue;
    top: -153px;
    border-radius: 50%;
    left: -540px;
    z-index: -1;
}
header {
    border-top: #0191FF solid 38px;
}


.accordion-item {
    border: none;
    box-sizing: unset;
}

h2.accordion-header {
    border-bottom: solid 1px #1655a7;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
 
}

.etapas .mod-articles-title a {
    text-decoration: none;
    color: #1B1B1B;
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}
.etapas .mod-articles-item-content {
    min-height: 180px;
}
.conteo_etapa {
    position: absolute;
    background-color: #32C5FF;
    right: -3px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    top: -25px;
    font-size: clamp(1.5rem, 3vw, 2.7rem);
    font-weight: bold;
    color: #fff;
    padding: 0px 20px 0 17px;
}

.img_etapa {
    position: relative;
}
.accordion-button {
    color: #000000 !important;
}
.modelo_imagen
{
  position: relative;
}

.modelo_imagen:before{
  content: '';
  position: absolute;
  top: -208px;
  right: -447px;
  width: 982px;
  background-color: #F2F7FD;
  height: 936px;
  border-radius: 50%;
}

.modelo_imagen:after{
  content: '';
  position: absolute;
  top: 0;
  right: -94px;
  width: 756px;
  height: 720px;
  background:url('../images/nmodel_h.webp');
}

.py-5rem{
  padding: 5rem 0;
}

div#banner {
    height: 900px;
    overflow: hidden;
}
.page-title {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
h2.subtitle_item {
    font-size: clamp(1.5rem, 8vw, 9rem);
    margin-bottom: -64px;
    color: #0091FF;
    opacity: 0.2;
 
}

.page-title:before{
  position: absolute;
  content: '';
  width: 100px;
  height: 100px;
  top: 60px;
  background-image: url('../images/bg_etapas.jpg');
  background-repeat: no-repeat;
  left: -116px;
}
.page-title h1{
  position: relative;
  z-index: 1;
}
.page-title:after{
  position: absolute;
  content: '';
  width: 300px;
  height: 206px;
  top: 3px;
  background-image: url('../images/bg_etapas_2.jpg');
  background-repeat: no-repeat;
  right: -230px;
  z-index: 0;
}
#banner h1{
  
    font-size: clamp(2.5rem, 4.5vw, 3.7rem);
font-weight: 600;
}

ul.mas_informacion {
    padding-left: 0;
    list-style: none;
}

footer a {
    color: #fff;
    text-decoration: none;
}

ul.mas_informacion li {
    margin: 1rem 0;
}

ul.nav-footer {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: space-between;
    border-top: solid 1px #6e6e6e;
    padding: 1.2rem 0;
}

footer h6 {
    margin-bottom: 1.5rem !important;
}

.unach_footer {
    background-color: #044380;
    padding: 1.5rem 0;
}

footer img,.my-slider img {
    max-width: 100%;
    height: auto;
}

.detalle_slider {
    background-color: #fff;
    padding: 8px;
    border-radius: 0px 0px 10px 10px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.detalle_slider h6 {
    color: #575757;
    font-size: 14px;
    font-weight: 400;
}
.detalle_slider p {
    margin-bottom: 0;
    font-size: 15px;
    color: #2B2B2B;
}

.detalle_slider p:first-child {
    font-weight: bold;
}

#etapa9_video{
float: right;
}
.texto{
  position: absolute;
  left: -790px;
  top: 700px;
}

.texto h2 {
    font-size: 180px;
   font-weight: bold;
  color: rgb(0 145 255 / 27%);
}
.etapas{
  background-color: #F2F7FD;
}
.navbar>.container {
    justify-content: space-evenly !important;
}
.com-content-article__body{
  max-width: 1000px;
  margin: 0 auto;
}
.com-content-article.item-page img {
    max-width: 100%;
    height: auto;
}

ul.fields-container {
    list-style: none;
    display: flex;
    gap: 10px;
    justify-content: center;
    padding-left: 0;
}
ul.fields-container a {
    cursor: pointer;
}

.etapas-nueve h2 {
    font-size: clamp(1.5rem, 8vw, 7rem);
    color: #C1ED0B;
    margin-bottom: 0;
}

.etapas-nueve {
    background-color: #0069D1;
     color:#fff;
     
}

video {
    border-radius: 18px;
}

.etapa-nueve hr {
    color: #C1ED0B;
    opacity: 1;
}
.etapa-nueve a.mod-articles-link {
    color: #2B2B2B;
    text-decoration: none;
}
a.link_slider {
    position: absolute;
    width: 100%;
    height: 100%;
    
}
.bg_bottom {
    background-color: #F2F7FD;
}
.etapa-nueve .table>:not(caption)>*>*{
  background-color: transparent !important;
  color: #fff !important;
}

.calendario .table>:not(caption)>*>*{
  background-color: transparent !important;
  
}
@media screen and (max-width: 1200px) {
.page-title:after{
  top: -24px;
  right: 20px;

}
.page-title:before{

  left: 0;
}
}

#etapa-dos .conteo_etapa{
 padding: 0px 20px 0 5px;
}


@media screen and (max-width: 1023px) {
  footer{
    text-align: center;
  }
}

@media screen and (max-width: 991px) {
  video {
    width: 100%;
    height: 230px;
 
}
  #etapa9_video{
float: none;
}
  .com-content-article__body {
  padding: 2rem 1.5rem;
}
  h2.subtitle_item {
  
    margin-bottom: -38px;
   z-index: 1;
  position: relative;
   
}
  
.modelo_imagen:after{
 
  top: -436px;
  right: -334px;
  width: 556px;
  height: 520px;
 
  background-size: cover;
}

.modelo_imagen:before{

  top: -527px;
  right: -426px;
  width: 500px;

  height: 500px;

}

}
@media screen and (max-width: 768px) {

  span.field-entry img {
    width: 150px;
}

ul.fields-container {

    flex-wrap: wrap;
}
  
  .py-1505rem{
  padding: 4rem 0 5rem 0;
}
  #promocion_img
  {
  content: url("../images/promocion_movil.webp");
    width: 100%;
    height: auto; 
}
  
#puntos_modelo{
    content: url("../images/puntos_modelo_movil.webp");
    width: 45%;
    height: auto; 
}
    video {
    
    height: 300px;
 
}
.conteo_etapa {

    width: 40px;
    height: 40px;
    top: -25px;
   
    padding: 0px 22px 0 14px;

}

    
    
.modelo_imagen:after{
  top: -520px;
  right: -95px;
  width: 264px;
  height: 312px;
  background:url('../images/nmodel_h_m.webp');
}
.modelo_imagen:before{
  top: -700px;
  right: -334px;
  width: 500px;
  height: 500px;
}

}

@media screen and (max-width: 650px) {
   #etapa9_video{width: 100%;}
    h2.subtitle_item {
  
    margin-bottom: 0px;
   
   
}
  ul.nav-footer {

    flex-direction: column;
}

}

@media screen and (max-width: 450px) {
   #escudo_header{
      content: url("../images/escudo_header_mov.webp");
      width: 120px;
      height: auto;
      object-fit: scale-down;
  }
  .mt-5rem-mov {
    margin-top: 5rem;
}
.modelo_imagen:before{
  top: -832px;
  right: -302px;
 
}
.modelo_imagen:after{
  top: -630px;
  right: -95px;
  
}
}

@media screen and (max-width: 380px) {
.my-slider img {
    width: 100%;
}

}