@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');
     body{font-family: 'Nunito', sans-serif; font-weight: 400;line-height: 1.10909;text-align: left; margin: 0; padding: 0;


     background: #b5b1ad url(img/fondo.jpg) no-repeat; background-size:  auto 100%; background-position:-50px bottom ;
     color:#fff; background-attachment: fixed;
}
     *, ::after, ::before { box-sizing: border-box;}
     h1,h2,h3,h4,h5,b,strong{ font-weight: 700}
     .font-normal{ font-weight: 400;}
     .font-bold{ font-weight: bold;}
     .mb-0{ margin-bottom: 0!important}
     .backPicture{ min-height: 100vh; display: grid; grid-template-columns: 100%; grid-template-rows: auto auto auto auto 1fr;
        background:#b5b1ad url(img/fondoM.jpg) no-repeat center bottom; background-size: 100% auto; position: relative; padding-bottom: 2rem; }
     .backPicture > *{ width: 100%; position: relative; z-index: 2;}
     .backPicture .info img{ position: absolute; width: 33%; bottom: 0; right: 5px;}
		#step5{ color:#666}
     header, main, nav{ position: relative; z-index:2}
     header img{ max-width: 150px; width: 20%; min-width: 80px; margin: 1em auto; display: block; height: auto;}
     .backPicture > h1{ display: block;font-size: 1.5em; margin: 0; padding: 1em; color:#003979; text-align: center;}
     .backPicture > h1 strong{ display: block; margin: 0 auto; color:#fff;}
     body > .backPicture nav{ display: flex; justify-content: center; margin: 0 auto; max-width: 650px; width: 95%; padding-bottom: .5rem;position: relative;}
     body > .backPicture nav div{margin:0 5px;font-size: 0.8em;width: 15px; height: 15px; border-radius:  50%; display: flex; justify-content: center; align-items: center; position: relative; cursor: pointer;background:rgba(255,255,255,.15); position: relative;color:#fff;         }
     body > .backPicture nav div > *{ display: none;}
     body > .backPicture nav div.select{background:rgba(255,255,255,1);}
     body > .backPicture nav div.normal{background:rgba(255,255,255,.75);}
     body > .backPicture nav div.normal:hover{background:rgba(255,255,255,1);}
     input.invalid{
       border: 1px solid rgba(255,90,90,1) !important;
     }
     .aniOpacity{
       -moz-transition-property:opacity; -webkit-transition-property:opacity; -ms-transition-property:opacity;
   -o-transition-property:opacity;     -moz-transition-duration:0.5s; -webkit-transition-duration:0.5s; -ms-transition-duration:0.5s; -o-transition-duration:0.5s;
     }
    
     body > .backPicture nav h1 span, body > .backPicture nav h2 span{ padding-left: 5px;}
     body > .backPicture nav h1 span, body > .backPicture nav h2 span{ padding-left: 5px;}
      body > .backPicture nav .normal h1, body > .backPicture nav .normal h2, body > .backPicture nav .select > span{ display: none}
     body > .backPicture main{box-shadow: 0 5px 15px rgba(0,0,0,.5); display: flex; margin: 1rem auto 0; max-width: 550px; width: 95%;position: relative; z-index: 4; padding: 1rem; border-radius: .66rem; background:#fff;}
     body > .backPicture main form{ width: 100%}
     body > .backPicture main article{ display: none; width: 100%; position: relative; z-index: 1;}
     body > .backPicture main article.view{ display: block}
     body > .backPicture main article h1{ display: flex; color:#333; margin: 0.5em 0 1em; font-size: 1em; align-items: center; }
     body > .backPicture main article h1 b{ order: 2; font-weight: 400; margin-left: 10px; font-size: 1.5em; width: calc(100% - 40px);}
     body > .backPicture main article h1 span{ order: 1; border: 3px solid #333; border-radius: 50%;   color:#333; width:30px; height: 30px;  display: flex; justify-content: center; align-items: center;}
     body > .backPicture main article h2{color:#ffae32; background: #000; width: 100%; padding: 0.5em; text-align: center; border-radius: 0.2em; font-size: 0.9em;}
     .radioBtn{position: relative;margin: 1em 0 0; width: 100%; padding: 0.5rem 0.5rem 0.5rem calc(30px + 1rem) ; display: flex; 
       justify-content: flex-start; align-items: center;border-radius: .5em;
       font-size: 1.4rem;
       border: 2px solid #fff;       
       -webkit-box-shadow: 0px 2px 3px rgba(0,0,0,0.1), 0px 2px 10px rgba(0,0,0,0.1);
       box-shadow: 0px 2px 3px rgba(0,0,0,0.1), 0px 2px 10px rgba(0,0,0,0.1);
       background:rgba(255,255,255,.75);
       }
       .radioBtn img{ height: 50px; width: auto; margin-right: 1rem; opacity: .5;}        
     .radioBtn:focus, .radioBtn:hover{
       box-shadow: 0 0 0 3px #003979;
     }
     .radioBtn:focus img, .radioBtn:hover img{opacity: 1;}
     .radioBtn input{ opacity: 0; position: absolute; top:0; left: 0; width: 100%; height: 100%;border-radius: 0.2em;border: 1px solid rgba(0,0,0,0);}
     .radioBtn label{ font-size: 1.1em; color:#666;}
     .radioBtn label:before{ width: 30px; height: 30px; border-radius: 50%;content: ""; position: absolute; top: calc(50% - 15px); left:5px;
     background: rgba(0,0,0,0.1);
       border-bottom: 2px solid #fff;
       -webkit-box-shadow: 0px -1px 10px #fff;
       box-shadow: 0px -1px 10px #fff;

   }
     .radioBtn:hover label:after,.radioBtn input:checked ~ label:after{  content: ""; position: absolute; top: calc(50% - 15px); left: 5px;
     width: 30px; height: 30px; background: url(img/check1.svg) no-repeat center center; background-size: 50% auto;
   }
     .radioBtn:focus label:before,.radioBtn:hover label:before{background: rgba(0,0,0,0.2); }
     .radioBtn input:checked ~ label{color:#003979;}
     .radioBtn input:checked ~ label:after{ background: url(img/check2.svg) no-repeat center center; background-size: 50% auto;}
	 #step1 .radioBtn{padding: 0.5rem 0.5rem 0.5rem .5rem;}
	#step1 .radioBtn label::before,#step1 .radioBtn label::after{display:none}
     .checkBtn{position: relative;margin: 1em 0 1em; }
     .checkBtn input{ z-index: 1;opacity: 0; position: absolute; top:0; left: 0; width: 100%; height: 100%;border-radius: 0.2em;border: 1px solid rgba(0,0,0,0);}
     .checkBtn label span.c1{ font-size: 0.8em; padding-left: 40px; position: relative; color:#000;}
     .checkBtn label span.c1:before{ width: 30px; height: 30px; background: rgba(0,0,0,0.15); content: ""; position: absolute; top: calc(50% - 15px); left: 0;}
     .checkBtn label span.c1:after{ width: 16px; height: 16px; background: #9d9f9e; content: ""; position: absolute; top: calc(50% - 8px); left: 7px;}
     .checkBtn:focus label span.c1:before,.checkBtn:hover label span.c1:before{background: rgba(0,0,0,0.30); }
     .checkBtn  label input:checked ~  span.c1{color:#003979;}
     .checkBtn  label input:checked ~ span.c1:after { background:#003979; }
     .checkBtn label span span{ text-decoration: underline; z-index: 2; position: relative;}
     .checkBtn label a{ color:#000;}

     .inputNormal{ position: relative; padding-bottom: 1em; padding-top: 0.5em;}
     /* .inputNormal:nth-of-type(3){ padding-bottom: 0;} */
     .inputNormal label{position: absolute; left: 20px; color:#666}
     .inputNormal label, .inputNormal input{
       -moz-transition-property:all; -webkit-transition-property:all; -ms-transition-property:all;
   -o-transition-property:all;     -moz-transition-duration:0.5s; -webkit-transition-duration:0.5s; -ms-transition-duration:0.5s; -o-transition-duration:0.5s;
     }
     .inputNormal input, .inputNormal input:focus, .inputNormal input:placeholder-shown:focus{background: rgba(255,255,255,0); z-index: 2;position: relative;font-size: 1.1em;  color:#666;  margin:1em 0 0em; width: 100%; padding: 0.5em; display: flex; justify-content: flex-start; align-items: center;border-radius: 0.2em;border: 1px solid rgba(0,0,0,0.2);-webkit-box-shadow:0 0 2px rgba(0,0,0,0.2); box-shadow: 0 0 2px rgb<a(0,0,0,0.2)}
    
     
     
     .inputNormal input, .inputNormal input:focus, .inputNormal input:placeholder-shown:focus{
       position: relative;margin: 1em 0; width: 100%; padding: 0.5em; display: flex; justify-content: flex-start; align-items: center;border-radius: .5em;
       font-size: 1.4rem;
       z-index: 2;position: relative;margin:1em 0 0em;
       border-radius: .5em;
       padding-left: 20px;
       font-size: 1.4rem;
       border: 2px solid #fff;       
       -webkit-box-shadow: 0px 2px 3px rgba(0,0,0,0.1), 0px 2px 10px rgba(0,0,0,0.1);
       box-shadow: 0px 2px 3px rgba(0,0,0,0.1), 0px 2px 10px rgba(0,0,0,0.1);
       background:rgba(255,255,255,.75);

       }
       .inputNormal input:focus, .inputNormal input:placeholder-shown:focus{
         border-radius: .5em;
       font-size: 1.4rem;
       border: 2px solid #5377a3;       
       -webkit-box-shadow: 0px 2px 3px rgba(0,0,0,0.1), 0px 2px 10px rgba(0,0,0,0.1);
       box-shadow: 0px 2px 3px rgba(0,0,0,0.1), 0px 2px 10px rgba(0,0,0,0.1);
       background:rgba(255,255,255,1);
       outline:none;
     }
     
     
     .inputNormal input:placeholder-shown{margin:0em 0 0em;}
     .inputNormal input:placeholder-shown ~ label{  top:25px; z-index: 3; }
     .inputNormal input:focus ~ label, .inputNormal input ~ label{top:0px;color:#000}
     ::placeholder {  opacity:0;}
     :-ms-input-placeholder {  opacity:0;}
     :-ms-input-placeholder {   opacity:0;}

     #btnPanel{ display: none; justify-content: space-between; align-items: center; margin-top: 2em; position: relative; z-index: 1;}
     #btnPanel.view2{ display: flex;}
     #btnPanel a,#btnPanel button{height: auto;margin: 0 auto; font-size: 1.4em; min-width: 100px;text-align: center;width: 47%;padding: 0.45em 0.5em; 
       border: none; cursor: pointer;
       text-decoration: none; color:#666;
       opacity: .8;
       border: 2px solid #fff;       
       -webkit-box-shadow: 0px 2px 3px rgba(0,0,0,0.1), 0px 2px 10px rgba(0,0,0,0.1);
       box-shadow: 0px 2px 3px rgba(0,0,0,0.1), 0px 2px 10px rgba(0,0,0,0.1);
       background:rgba(255,255,255,.75);
      }
     #btnPanel a:hover,#btnPanel button:hover{ opacity: 1; background:rgba(255,255,255,1); color:#003979}
     #btnPanel a#back:hover{opacity: 1; color:#003979 }
     #btnPanel a#next{background: #003979; opacity: 1; border: 2px solid #003979;color:#fff;}
     #btnPanel a#next:hover{ background:#0a56ac ;border: 2px solid #0a56ac;}
     #btnPanel button#finish{background: #06a402;border: 2px solid #06a402;color:#fff;}
     a#kmore{height: 36px;margin: 0 auto;max-width: 145px; min-width: 100px;text-align: center;width: 40%;padding: 0.45em 0.5em; border: 2px solid rgba(0,0,0,0.2);color:#666; opacity: .8; text-decoration: none; display: block; background: #06a402;border: 2px solid #06a402;color:#fff;font-size: 0.9em;}
     .d-none{ display: none!important}
      .clickPrivacy{ position: relative; z-index: 2;}
      .checkBtn label input:checked ~ span.c1 .clickPrivacy{color: #003979;}
     #loading{  z-index: 0; opacity: 0;position: absolute; top:0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center;align-items: center;
     }
     #loading.load{ display: flex; opacity: 1; z-index: 10;
     }
     #loading.load img{
       -webkit-animation: rotate 1s linear infinite;
       animation: rotate 1s linear infinite;
     }
     @-webkit-keyframes rotate{
       from{
         -webkit-transform: rotate(0deg);
       }
       to{
         -webkit-transform: rotate(359deg);
       }
     }
     @keyframes rotate{
       from{
         transform: rotate(0deg);
       }
       to{
         transform: rotate(359deg);
       }
     }
     footer ~ img{ display: none;}
     .fn{ background:#000 ; padding: 1rem; color: #fff;}
     .pb-0{padding-bottom: 0 !important; padding-top: 0 !important;}
     article.block{ 
       background: #fff; top:-1px;

       color:#666; position: relative; width: 100%; padding: 0;z-index: 4; margin:  0 0 ;}
       article.block  .back{ display: none;}
     article.block.noBack{ background: rgba(0,0,0,.5); color:#666; padding: 2rem 0;}
     article.block.noBack:after{ display: none}
     article.block.noBack div{max-width: 650px; margin: 0 auto 0em; color:#666; text-align: center;}
     article.block h1, article.block h2{ color:#333; position: relative; z-index: 2; font-size: 1.25em; margin:0 auto;width: 100%; max-width: 650px;
       text-align: center; font-weight: 400; padding:2rem 2rem 1rem; }
     article.block h1 b{ font-weight: 700;color:#003979;}
     article.block.noBack h1{ color:#fff;font-weight: 400; line-height: 1.5; margin: 2em auto 2em;    }
     article.block.noBack h2{ margin: 1em auto; color:#fff     }
     article.block.noBack h1 span{color:#003979;}
     article.block.noBack h1 b{
       display: table;
       color:#003979;
       font-size: 1.3em;
       margin: 1em auto;
       padding: 0.25em 1em;
       background:#e4e4e4;
       width: 100%;
       }
       article.block.pb-0{ position: relative;}
       article.block.pb-0 > h1{position: sticky; top:0; padding-top: 1rem;}
       article.block .fn h1, article.block .fn h2{ margin-top: 2rem; color:#fff}
     article.block.noBack .btn{
       margin: 1rem auto;
       text-align: center;
       width: auto;
       padding: 0.45em 0.5em;
       background: #06a402;
       border: 2px solid #06a402;
       color: #fff;
       opacity: 1;
       font-size: 1.2em;
       text-decoration: none;
       display: block;
       max-width: 300px;
       cursor: pointer;
     }
	 .btn a,.btn a:hover{color:#fff; text-decoration: none;}
     article.block.noBack .btn:hover{background: #20d01b;border: 2px solid #20d01b;}
       iframe{ display: none;}
     article.block section{ position: relative; z-index: 3;display: flex; flex-wrap: wrap; justify-content: space-around;
       max-width: 750px; margin: 0 auto; width: 100%;}
     article.block section .icon{width: 100%; margin:0;
       display: flex;  justify-content: flex-start; align-items: center; flex-direction: column;}
     
     article.block section .icon img{ width: 90%; height: auto; display: block;}
     article.block section .icon picture{ width: 33%; height: auto; display: flex; justify-content: center;}
     article.block section .icon h1, article.block section .icon h2,article.block section .icon.wtext h1, article.block section .icon.wtext h2{ 
       font-size: 1.5em; font-weight: 400;color:#333; padding:1rem; text-align: center; width:100%; display: block; margin: 0 auto 2rem; }
       article.block section .icon h1::first-line, article.block section .icon h2::first-line{color:#003979;}
       article.block section .icon.wtext{ background:#fff ; position: sticky; top:105px; min-height:calc(50vh - 105px); align-items:center;overflow: hidden;}
       article.block section .icon.wtext img{ width: 90%; height: auto; margin: 0 auto;}
     
       article.block section .icon.wtext:nth-child(3){border:none;}
     footer{background:#003979;color:#fff; width: 100%; margin-top: -1px; padding: 1em; position: relative; z-index: 4}
     footer > div{ max-width: 900px; width: 100%; margin: 0 auto; display: flex; justify-content: space-around; align-items: center;flex-wrap: wrap; }
     footer > div div{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
     footer h1{ font-size: 1em;  }
     footer a{ color:#fff; padding: 0.5em; font-size: 0.8em; }
     .popUp{ position: fixed; top: 0; left: 0;width: 100%; height: 100%; z-index: 13; background:rgba(255,255,255,0.8); display: none; justify-content: center; align-items: center;}
     .popUp.view{display: flex;}
     .popUp .pop{-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.3);box-shadow: 0 2px 4px rgba(0,0,0,.3);border: 1px solid rgba(0,0,0,.3); background: #fff; padding: 1em; max-width: 520px; height: 400px;width: 85%; position: relative;}
     #close{ border: 2px solid #2e2e2e;cursor: pointer;-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.3);box-shadow: 0 2px 4px rgba(0,0,0,.3);width: 30px; height: 30px; background: #fff;display: flex;  justify-content: center; align-items: center; font-size: 1.5em; border-radius: 50%; position: absolute; top:-15px; right: -15px;}
     .cont{ overflow: auto; width: 100%; height: 100%; display: block; font-style: 0.8em; line-height: 1.8em; color:#666;}
     #invalidPhone,#invalidNameForm ,#invalidsurNameForm,#invalidCheckForm { color:red; font-size: 0.8em;}
     #logoBrand{ width: 100%; max-width: 250px; display: block; margin: 0 auto 0em;}
     #nameBrand{ text-align: center; font-size: 0.7em; font-style: italic;width: 100%; display: block;}
     #offerName{ margin: 1em auto; font-size: 1.25em; text-align: center; width: 100%; display: block;}
hr{color:#fff}
article.block.noBack h1 b.salto{display: none;}
     @media (min-width:650px){
       body > .backPicture nav{ max-width: 100%; left: 0; padding-bottom: 0; margin-bottom: 1rem;       }
       body > .backPicture nav div{ margin-right: .2rem;}
       body > .backPicture main article h1 span {          width: 30px;    padding-left:0;    height: 30px;}
       body > .backPicture main article h1{ margin-left: 0;}
       .backPicture > .info{ max-width:100% ; justify-content: center; font-size: clamp(1rem, 2vw, 2rem); }
       .backPicture > .info img{width: auto; height: 50vh;}
       .backPicture .info h1{ margin-left: -15vw;}
     }
     @media (min-width:750px){
       article.block section{ max-width:100% ;background: url(img/back.jpg);
   background-size: auto;
background-size: 100% 100%;}
article.block section.fn{ background:#000}
article.block section.fn > *{ width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto;}
       article.block section .icon{ width: 33%; background:none;justify-content: flex-end;}
       article.block section .icon h1, article.block section .icon h2{ width: 100%;min-height: 90px;}
       article.block{ padding-bottom: 0;}
         .h100{ min-height: 100vh;display: flex; flex-direction: column;
justify-content: center;
align-content: center;}
article.block.noBack.h100 h1{display: flex; flex-direction: column;
justify-content: center;
align-content: center;}
article.block.noBack .btn{max-width: 450px;margin-top: 2rem;}
#step1 .radioBtn{padding: 0.5rem 0.5rem 0.5rem calc(30px + 1rem) ;}
	#step1 .radioBtn label::before,#step1 .radioBtn label::after{display:block}
     }
     @media (min-width:992px){
       article.block section .icon.wtext{min-height: 480px;    position: relative;    top: 0;}
       body{background: #b5b1ad url(img/fondo.jpg) no-repeat; background-size: 100% auto; background-position:0 bottom ;background-attachment: fixed;}
article.block.pb-0 > h1{ position: relative; max-width: 1200px; padding:4rem 1rem;}
       .backPicture > .slider img{height: 90%; max-height: 1080px;}
       article.block section .icon picture{ width: 100%;}
       article.block section .icon h1, article.block section .icon h2{ max-width: 450px;}
       .backPicture{ background:#b5b1ad url(img/fondo.jpg) no-repeat center bottom; background-size: 100% auto; }
       article.block.noBack h1 b.salto{display: block; margin: 0;padding: 0;}
	
     }
     @media (min-width:1200px){
       article.block section{ padding: 1rem 0 2rem;}
       article.block h1, article.block h2{ max-width: 1100px; font-size: 2em; margin: 0 auto 2rem;}
     }