body{

     display: flex;
     flex-direction: column;
     height: 100%;
     min-height: 100vh;
}

main{
     flex-grow: 1;
}


body {
     font-family: Metropolis, sans-serif; 
     font-weight: normal;
     font-size: 18px;
     line-height: 24px;
     color: #4E5357;
     letter-spacing: 0.18px;
}


p{margin-bottom: 10px; width: 100%}
section{padding: 20px 0 }

@media(min-width: 1025px){
     section{padding: 40px 0 }
}

.wrapper{
	width: 1170px;
	max-width: 100%;
	margin:0 auto;
     padding: 0 20px;
}

@media(min-width: 1170px){
     .wrapper{padding: 0}
}

.overflow{overflow-x: auto;}

.text-center{text-align: center;}

.u-bold{font-weight: 600;}

.u-blanco{color: #fff!important;}
.u-azul{color: #0079c8!important;}
.u-azul-2{color: #0652AE;}
.u-navy{color:  #0d1846!important;}
.u-fucsia{color: #c6007e;}

.bg-blanco{background: #fff!important;}
.bg-azul{background: #0079c8!important;}
.bg-azul-2{background: #0652AE!important;}
.bg-navy{background: #0d1846!important;}
.bg-fucsia{background: #c6007e!important;}
.bg-grey{background: #FAFAFA}
.bg-light-grey{background:#F7F5F2}
.bg-morado{background: #6a2ca1}
.bg-violeta{background: #a4219b}
.bg-granate{background: #942151}
.bg-naranja{background: #DB3907}
.bg-turquesa{background: #008385}
.bg-verde{background: #007a3d}
.bg-musgo{background: #678004 }

.bg-blanco-a{background: rgba(255,255,255,0.6)!important;}
.bg-azul-a{background: rgba(0,121,200,0.6)!important;}
.bg-azul-2-a{background: rgba(6,82,174,0.6)!important;}
.bg-navy-a{background: rgba(13,24,70,0.6)!important;}
.bg-fucsia-a{background: rgba(198,0,126,0.6)!important;}
.bg-morado-a{background: rgba(106,44,161,0.6);}
.bg-violeta-a{background: rgba(164,33,155,0.6);}
.bg-granate-a{background: rgba(148,33,81,0.6);}
.bg-naranja-a{background: rgba(219,51,7,0.6);}
.bg-turquesa-a{background: rgba(0,131,133,0.6);}
.bg-verde-a{background: rgba(0,122,61,0.6);}
.bg-musgo-a{background: rgba(103,128,4,0.6);}



/*btns*/
.btn-def {
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 22px; /* 137.5% */
letter-spacing: 0.32px;
border-radius:  4px;
color: #fff;
background: #DB3907;text-decoration: none;}

.btn-def:hover{
  background: #0652AE;

}


/*top bar*/
.c_top-bar{position: fixed;top: 0; left:0 ;padding: 15px; z-index: 99; background: #fff; width: 100%}
.c_top-bar .wrapper{display: flex; justify-content: flex-start; align-items: center;}

.c_top-bar .btn-def{ padding: 12px 23px; max-width: 189px; width: 100%; }



.img-logo{max-width: 168px}


/*menu*/
.c_top-bar-menu{display: flex;
    flex-direction: column;
    position: absolute;
    top: 90%;
    left: 0;
    width: 100%;
    background: white;
    padding: 5px 35px; display: none; }


.c_top-bar-menu a{
     color: #0D1846;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.12px;
    display: flex;
    padding: 5px 0;}


.icon-menu{margin: 5px 15px 5px 0;
    width: 22px;
    display: flex;
    justify-content: center;}

@media(min-width: 1024px){
  .icon-menu{display: none;}
  .c_top-bar-menu{display: flex;
        position: relative;
        top: unset;
        left: unset;
        flex-direction: row;
        grid-gap: 15px;}
}
@media(max-width: 1024px){
  .c_top-bar .btn-def{display: none;}
  
}

/*banner hero*/
.c_banner-hero{
    padding: 380px 0 20px;
    background-size: cover;
}
.c_banner-hero .wrapper{display: flex; justify-content: flex-end;}

.c_banner-hero-box{
     border-radius: 8px;
     background: rgba(0, 121, 200, 0.80);
     max-width: 346px;
     color: #fff;
     padding: 20px 20px 15px;
     color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 125% */
letter-spacing: 0.16px;
display: flex;
flex-direction: column;
     }
.c_banner-hero-box>div{display: flex; flex-direction: column;}     
.c_banner-hero-title{color: #FFF;
text-align: center;
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: 27px;
 }

.c_banner-hero-precio{
     display: flex;
     flex-direction: column;}

.c_banner-hero-precio span{
    color: #FFF;
    text-align: center;
  
    font-size: 18px;
    font-style: normal;
    font-weight: 200;
    line-height: 1.1;}

.c_banner-hero-precio strong{
     color: #FFF;
font-size: 30px;
font-style: normal;
font-weight: 600;
line-height: 30px;
}

.c_banner-hero-prom{
border-radius: 8px;
background: #0D1846;
box-shadow: 0 0 12px 0px rgba(0, 0, 0, 0.50);
color: #FFF;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: 15px; /* 107.143% */
letter-spacing: 0.14px;
padding: 10px 20px;
text-align: left;
display: flex; align-items: center; justify-content: center;
}
.c_banner-hero-prom span{
  font-size: 12px;
}
.c_banner-hero-prom img{margin:0 10px; max-width: 30px}

.c_banner-hero .btn-def{ padding: 10px;
    max-width: 170px;
    margin: 10px auto 0;
    min-width: 48px;}

/*title section*/

.title-section{color: #0D1846;
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 24px; 
margin:10px 0 23px;}


@media(max-width: 425px){
  .c_banner-hero .wrapper{
    display: block;
  }
    .c_banner-hero-box{
        margin: 0 auto;
  }
}
@media(min-width: 425px){
    .c_banner-hero{
        background-size: cover;
}
}

@media(min-width: 1024px){
    .c_banner-hero{
       background-position-x: 38%;
       min-height: 790px;

     }
     .c_banner-hero-box{
        margin:0;
        max-width: 575px; 
        padding: 20px 20px 15px 26px;
       /* max-width: 403px;*/
     }
     .c_banner-hero-box>div{display: flex; flex-direction: row;} 
    .c_banner-hero .wrapper{
        display:flex;
        justify-content:flex-end;
    }
   
    .c_banner-hero-title,  .c_banner-hero-precio span{
        text-align: left;
        line-height: 49px;
         
    }
    .c_banner-hero-title{
      font-size: 45px;
      max-width: 579px;
    }
     .c_banner-hero-txt{
      font-size: 18px;
       text-align: left;
      line-height: 24px;
    }
    .c_banner-hero-precio span{
      line-height: 2.1;
    }
    .c_banner-hero-precio{
        max-width: 95px;
    }
    .c_banner-hero .btn-def{
        margin: 36px 0 6px;
    }
    .c_banner-hero-precio strong{
      font-size: 45px;

    }
    .c_banner-hero-prom{
        margin-left: 57px;
        max-width: 332px;
        line-height: 22px;
        margin-top: 10px;
    } 
    .c_banner-hero-prom span{
      font-size: 18px;
    }  
}


/*section boxes*/
.c_boxes-seguro{display: flex; flex-direction: column; grid-gap: 20px}

.c_box-seguro{
min-height: 301px;
border-radius: 8px 8px 0 0;
background: #0D1846;

box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.25);

}


.c_box-seguro-header{padding: 20px;color: #FFF;

font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 20px; /* 111.111% */; position: relative;display: flex
;
    align-items: flex-start;
    justify-content: space-between;}

.c_box-seguro-header::after{
     content: "";
     width: calc(100% - 40px);
     height: 0;
     border-bottom:1px solid #fff;
     position: absolute;
     bottom: 0; 
     transform: translateX(-50%);
     left: 50%; 
}
.c_box-seguro-header img.active{transform: rotate(180deg);}

.c_box-seguro-body{display: flex; flex-direction: column;padding: 20px 20px 30px; color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 112.5% */
letter-spacing: 0.16px;    min-height: 175px;}
.c_box-seguros-desde{display: flex; flex-direction: column; align-items: flex-start;
     color: #FFF;
font-size: 26px;
font-style: normal;
font-weight: 400;
line-height: 26px; 
}
.c_box-seguros-desde .sup{
    font-weight: 200;
     font-size: 16px;
}
.c_box-seguro-banda{background: #007D79; padding: 10px 22px;color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 150% */
letter-spacing: 0.16px; 
display: flex;justify-content: flex-start; align-items: center;min-height: 55px;}
.c_box-seguro-banda img{margin-right: 15px;max-width: 30px}
.c_box-seguro-servicios{
     display: flex;
     flex-direction: column;
     padding: 0 20px;
     background:#fff;
     
}

.c_box-seguro-servicios li{padding: 20px 0; border-bottom: 1px solid #4E5357; color: #4E5357;
font-size: 12px;
font-style: normal;
font-weight: 300;
line-height: 18px; /* 150% */
letter-spacing: 0.12px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
grid-gap: 10px

}
.c_box-seguro-servicios li:last-of-type{
     border-bottom: none;
     align-items: flex-end;
     flex-grow: 1;
}
.c_box-seguro-servicios .title{color: #4E5357;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 18px; /* 112.5% */
letter-spacing: 0.16px;margin: 0}
.c_box-seguro-servicios li img{margin-right: 15px; flex-shrink: 0}
.c_box-seguro-servicios li>div{
     display: flex;
     flex-direction: column;
     align-items: flex-start;
}

.c_box-seguro-servicios .btn-def{min-height: 46px; 
     width: 100%; 
     max-width: 170px;
      margin:40px auto 20px; display: flex;justify-content: center;align-items: center;padding: 10px}


@media(max-width:767px){
    .c_box-seguro-servicios{
        display: none;
    }
}

@media(min-width: 1024px) {
  .c_boxes-seguro {
    flex-direction: row;
    justify-content: center;
    
  }
  .c_box-seguro{flex-basis: 32%;display: flex;flex-direction: column;}
  .c_box-seguro-header img{display: none;}
  .c_box-seguro-servicios{flex-grow: 1;}
      
}
@media(min-width: 1440px){
    .title-section{
        font-size: 34px;
    }
    .c_box-seguro-header{
      font-size: 24px;
      line-height: 30px;
    }
    .c_box-seguros-desde{
      line-height: 41px;
    }
    .c_box-seguros-desde .sup{
      font-size: 18px;
    }
    .c_box-seguros-desde span{
      font-size: 45px;
    }
    .c_box-seguro-body{
      padding: 5px 20px;
    }

 

}

/*seccion packs*/
    .c_packs-descuento {
        display: flex;
        flex-direction: column;
        grid-gap: 20px;
    }

.c_pack {
  color: #fff;
 position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  position: relative;
  transition: 1.5s ease all;
  overflow:hidden;
  }
.c_pack img{width: 100%;transition: 1.5s ease all;}
.c_pack:hover img{transform: scale(1.2);}

.pack-header{
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.pack-text{
    font-size: 16px;
    color: #fff;
}

.c_pack-text{
  background: linear-gradient(
    0deg, rgba(0, 0, 0, 0.9) 0%, 
    rgba(0, 0, 0, 0.5) 25%, 
    rgba(0,0,0,0));
  position: absolute; 
  bottom: 0; left: 0; width: 100%; height: 100%;
      display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
}
.c_packs-descuento .btn-contactar{
  font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0.32px;
    border-radius: 4px;
    color: #fff;
    background: transparent;    
    border: 2px solid #fff;     
    text-decoration: none;
    text-align: center;
    cursor: pointer;
   display: block;             
    margin: 5px auto 0;      
    max-width: 200px;           
    padding: 10px 24px; 
    display: block;
    margin: 5px auto 0;
    max-width: 200px;
    padding: 10px 24px;
    width: 100%;
}


@media(min-width: 768px){
    .c_packs-descuento {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 20px;
        margin: 0 0 20px;
        justify-content: center;
    }


}
@media(min-width: 1024px){
    .c_packs-descuento{
        display: flex;
        flex-direction: row;
    }

}


/*seccion iconos*/
.iconos{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px; 
  margin-bottom: 30px;
}

.icono {
  display: flex;
  flex-direction: row;
  gap: 20px; 
  align-items: center; 
}
.icono img {
  width: 60px;
  height: auto;
}

.icono p.titulo {
  margin: 0;
  text-align: left;
  line-height: 1.4;
  max-width: 236px;
  font-size: 18px;
  font-weight: 700;
  color: #0D1846;
}   
.texto-ventajas{
    text-align: center;
    margin: 28px auto;
    max-width: 283px;
}
.btn-container{ padding: 10px;
    width: 100%;
    margin: 10px auto 0;
    display: flex;
    justify-content: center;
  }

.btn-container .btn-def{  

padding: 11px 20px;
}

.lista-iconos{
    display: none;
}
@media(min-width: 768px){
    .iconos {
    grid-template-columns: repeat(2, 1fr);
  }
    .texto-ventajas{
    max-width: none;
}
}
@media (min-width: 1024px) {
  .iconos {
    grid-template-columns: repeat(3, 1fr);
    gap:30px;
    padding: 0 40px;
  }
  .icono {
    flex-direction: column;         
    align-items: center;           
    text-align: center;             
    gap: 15px;                      
  }

  .icono img {
    width: 90px;
    height: auto;
  }
  .icono img.small-img{
    width: 67px;
  }

  .icono p.titulo {
    max-width: none;               
    font-size: 22px;
    text-align: center;
  }
  .lista-iconos{
    display:block;
  }
  .lista-iconos p{
    color: #0D1846;
    margin-bottom: 5px;
  }
  .iconos .btn-ico{
    margin: 0 auto;
  }
  .btn-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  }
}

/*condiciones*/
.condiciones p{
    font-size: 12px;
}
@media (min-width: 1024px){
    .condiciones p{
        font-size: 12px;
    }
}
footer {background: #0D1846; padding: 30px 0; width: 100% }
footer p, footer a {color: #fff; font-size: 16px}
footer p {margin:0;}

footer .wrapper {display: flex; justify-content: space-between; align-items: center;color: #fff}

footer .legales {display: flex;}
footer .legales span {margin: 0 5px;}

@media (max-width: 767px){
   
    footer .legales {display: flex;flex-direction: column;}
    footer .wrapper {flex-direction: column;}
    footer .wrapper .legales span {display: none;}
    .legales a {display: inline-block; width: 100%; text-align: center; margin: 0 0 10px}
    footer .legales {width: 100%;}
    footer p {margin: 0 0 10px; text-align: center;}
    footer {padding: 15px 0 32px}
}
@media(min-width: 1024px){
   footer p, footer a { max-width: 158px;}
}

.btn-fixed-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    padding: 2px 7px;
    z-index: 999;}

    .btn-fixed-bottom button {
    flex: 1;
    margin: 0 5px;
    padding:  7px;
    font-size: 18px;
    border: none;
    font-weight: 700;
    border-radius: 5px;
    color: white;
    cursor:pointer;
  }

@media(min-width: 768px){
   .btn-fixed-bottom{display: none;}
}