@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,img,strong,b,u,i,center,ol,ul,li,fieldset,form,label,table,tbody,tfoot,thead,tr,th,td,header,menu,.menu,section,article,video{margin:0;padding:0;border:0;outline:0}
input,button,textarea,select{outline:0}
html{height:100%;overflow-x:hidden;}
body{float:left;width:100%;height:100%;font-family:"Poppins","sans-serif";margin:0;background-image:url("../images/bgBlackF.jpg");background-repeat:no-repeat;background-size:cover;background-attachment:fixed;background-position-x:50%; padding: 70px 0}
body.thanks {padding: 0}
img{max-width:100%;height:auto;vertical-align:middle}
ul,ol{list-style:none}
section,footer{float:left;width:100%;text-align:center}
.img{line-height:0}
.infoContent{float:left;width:calc(100% - 40px);max-width:1560px;padding:60px 20px 0 20px;margin-left:50%;transform:translateX(-50%)}
#barraFlotante {position:fixed;top:0;left:0;width:100%;background:#545456;color:white;z-index:1000;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);padding:8px 0}
#barraFlotante .infoContent{float:none;width:100%;max-width:1200px;padding:0 20px;margin:0 auto;transform:none;text-align:center;display:flex;align-items:center;justify-content:center;gap:20px}
#barraFlotante .infoContent >p{font-size:16px;font-weight:500;display:flex;align-items:center;gap:6px}
#barraFlotante .infoContent b{color:#dcf714;font-weight:700}
#barraFlotante ul {float:none;width:auto;display:flex;align-items:center}
#barraFlotante #timer {display:flex;list-style:none;margin:0;padding:0;gap:10px}
#barraFlotante #timer li {display:flex;flex-direction:column;align-items:center;justify-content:center;width:55px;height:55px;background:rgba(255, 255, 255, 0.15);border-radius:6px;backdrop-filter:blur(10px);border:1px solid rgba(255, 255, 255, 0.2);text-align:center}
#barraFlotante #timer li b{display:block;font-size:24px;font-weight:700;line-height:1;color:white;margin-bottom:2px}
#barraFlotante #timer li span{display:block;font-size:12px;font-weight:500;line-height:1;color:rgba(255, 255, 255, 0.9);text-transform:uppercase;letter-spacing:0.3px}
#logo .infoContent{padding:90px 20px 0 20px;text-align:center}
body.thanks #logo .infoContent {padding:30px 20px 0 20px;text-align:center !important;}
#titles .infoContent h1:first-child b {color: #dcf714; font-size:54px}
#titles h1{float:left;width:100%;font-size:44px;font-weight:100;line-height:32px;color:#FFF;text-align:center;text-shadow:0 0 2px rgba(255,255,255,1);margin-bottom:25px}
#titles h2{float:left;width:100%;font-size:26px;font-weight:200;line-height:32px;color:#FFF;text-align:center}
#planes .contPlanes{width:500px;display:grid;grid-template-columns:190px 250px;grid-template-rows:1fr;gap:60px;grid-auto-flow:row;align-items:center;margin-left:50%;transform:translateX(-50%)}
#planes .contPlanes input[type="radio"]{display:none}
#planes .contPlanes .box{height:42px;line-height:42px;border:1px solid #FFF;border-radius:42px;padding:0 30px;cursor:pointer;transition:all 0.3s ease}
#planes .contPlanes .box .dot{display:inline-block;vertical-align:middle;height:20px;width:20px;background:#FFF;border-radius:50%;position:relative;transition:all 0.3s ease}
#planes .contPlanes .box .dot::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(2);width:10px;height:10px;border-radius:50%;transition:all 0.3s ease}
#planes .contPlanes .box .text{display:inline-block;vertical-align:middle;color:#FFF;font-size:26px;font-weight:300;padding-left:15px;transition:color 0.3s ease}
#planes .contPlanes #option5-1:checked~.first,#planes .contPlanes #option5-2:checked~.second{border-color:#dcf714}
#planes .contPlanes #option5-1:checked~.first .dot,#planes .contPlanes #option5-2:checked~.second .dot{background:#dcf714}
#planes .contPlanes #option5-1:checked~.first .dot::before,#planes .contPlanes #option5-2:checked~.second .dot::before{background:#545456;transform:translate(-50%, -50%) scale(1)}
#planes .contPlanes #option5-1:checked~.first .text,#planes .contPlanes #option5-2:checked~.second .text{color:#dcf714}
#datos form{width:100%;max-width:760px;margin-left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:1fr;column-gap:40px;row-gap:20px;grid-auto-flow:row;align-items:center}
#datos form div:first-child,#datos form div:last-child{grid-column:1 / span 2}
#datos form input[type="text"],#datos form input[type="email"],#datos form select{float:left;width:calc(100% - 68px);height:40px;padding:0 20px 0 48px;border:0;border-radius:6px;background:#EFECFF;font-family:"Poppins","sans-serif";font-size:18px;color:#9F9FBF;font-weight:300;text-shadow:0 0 1px rgba(159,159,191,1)}
#datos form select{width:100% !important;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("../images/icoIdBF.png"),url("../images/arrowSelectBF.png");background-color:#EFECFF;background-repeat:no-repeat;background-position:left 20px center,right 19px center; padding:0 31px 0 48px;cursor:pointer}
#datos form input::placeholder{color:#9F9FBF;font-weight:300;text-shadow:0 0 1px rgba(159,159,191,1)}
#datos form input#txtNombreCotiza{background:#EFECFF url("../images/icoPersonaBF.png") no-repeat;background-position:left 20px center}
#datos form input#txtNumIdentificacion{background:#EFECFF url("../images/icoIdNoBF.png") no-repeat;background-position:left 20px center}
#datos form input#txtContacto{background:#EFECFF url("../images/icoContactoBF.png") no-repeat;background-position:left 20px center}
#datos form input#txtEmail{background:#EFECFF url("../images/icoCorreoBF.png") no-repeat;background-position:left 20px center}
#datos form input#txtMovil{background:#EFECFF url("../images/icoMovilBF.png") no-repeat;background-position:left 20px center}
#datos form input#txtTelefono{background:#EFECFF url("../images/icoTelBF.png") no-repeat;background-position:left 20px center}
#datos form input[type="button"]{display:inline-block;height:60px;line-height:60px;padding:0 30px;border:0;border-radius:60px;background:#dcf714;font-size:26px;color:#282627;font-weight:300;text-shadow:0 0 1px rgba(91,64,247,1);cursor:pointer}
#datos form input[type="button"]:hover{background:#b8e237;color:#545456;transition:all ease-in-out 0.5s}
.aceptacion_datos{grid-column: 1 / span 2;}
footer {float:left;width:100%}
footer p{font-weight:200;color:#FFF;margin-bottom:25px;line-height:20px}
footer ul{float:left;margin-left:50%;transform:translateX(-50%);margin-bottom:30px}
footer li{float:left;margin:0 10px}
footer li:hover img{filter: brightness(0) saturate(100%) invert(91%) sepia(90%) saturate(544%) hue-rotate(19deg) brightness(102%) contrast(101%)}
footer li a{float:left;width:100%;height:100%}
.thanks #logo .infoContent{padding:100px 20px 0 20px}
.thanks #gracias h2{float:left;width:100%;font-size:26px;font-weight:300;font-style:italic;line-height:32px;color:#dcf714;text-align:center}
.thanks #gracias h2:first-of-type{color:#FFF}
.ui-widget-content{background:#FFFFFF !important}
.ui-dialog .loader{height:150px}
.ui-dialog .loader p{float:left;width:100%;height:50px;margin-top:25px;text-align:center;font-size:16px}
.ui-dialog .loader .circles{float:left;width:100%;margin-top:40px;text-align:center}
.ui-dialog .loader .circles .dot{width:24px;height:24px;background:#3ac;border-radius:100%;display:inline-block;animation:dots 1s infinite}
.ui-dialog .loader .circles .dot:nth-child(1){animation-delay:.1s;background:#32aacc}
.ui-dialog .loader .circles .dot:nth-child(2){animation-delay:.2s;background:#64aacc}
.ui-dialog .loader .circles .dot:nth-child(3){animation-delay:.3s;background:#96aacc}
.ui-dialog .loader .circles .dot:nth-child(4){animation-delay:.4s;background:#c8aacc}
.ui-dialog .loader .circles .dot:nth-child(5){animation-delay:.5s;background:#faaacc}
@keyframes dots{
0%{transform:scale(1)}
50%{opacity:.3;transform:scale(2)}
100%{transform:scale(1)}}
@media (max-width:1680px){
#logo .infoContent{padding:20px 20px 0 20px}
#logo img{max-height:100px}
footer ul{width:200px;margin-bottom:20px}}
@media (max-width:1366px){
#logo img{max-height:85px}
.infoContent{padding:20px 20px 0 20px}
#titles h1{font-size:40px;line-height:30px;margin-bottom:15px;letter-spacing:-1px}
#titles h2,.thanks #gracias h2{font-size:24px;line-height:28px;letter-spacing:-1px}
#planes .contPlanes{width:435px;grid-template-columns:165px 220px;gap:50px}	
#planes .contPlanes .box{height:36px;line-height:36px;padding:0 20px}
#planes .contPlanes .box .text{font-size:24px}
#datos form{row-gap:15px}
#datos form input[type="text"],#datos form input[type="email"],#datos form select{height:36px}
#datos form input[type="button"] {height:54px;line-height:54px;font-size:24px}
footer p{margin-bottom:10px}}
@media (max-width:840px){
#titles h1{font-size:34px;line-height:30px;margin-bottom:15px;letter-spacing:-1px;font-weight:200}
#titles h2,.thanks #gracias h2{font-size:22px}
#datos form{max-width:100%;grid-template-columns:repeat(1,1fr);grid-auto-flow:row;row-gap:24px}
#datos form div:first-child,#datos form div:last-child{grid-column:1}
.aceptacion_datos{grid-column:1;}
#planes .contPlanes{width:425px;gap:40px}
.infoContent{padding: 40px 20px 0 20px}
#logo .infoContent {padding: 60px 20px 0 20px !important}
#barraFlotante .infoContent{flex-direction:column;gap:12px}
#barraFlotante .infoContent>p{font-size:14px;white-space:normal;text-align:center;justify-content:center;line-height:1.3;margin: 0 auto;display: block}
#barraFlotante #timer{gap:10px}
#barraFlotante #timer li{width:55px;height:55px}
#barraFlotante #timer li b{font-size:20px}}
@media (max-width:720px){
#logo .infoContent {padding: 50px 20px 0 20px !important}}
@media (max-width:600px){
#barraFlotante{padding:5px 0}
#barraFlotante .infoContent{gap:10px;padding:0 15px}
#barraFlotante .infoContent>p{font-size:12px}
#barraFlotante #timer{gap:6px}
#barraFlotante #timer li{width:45px;height:45px}
#barraFlotante #timer li b{font-size:16px}
#barraFlotante #timer li span{font-size:9px}}
@media (max-width:500px){
#planes .contPlanes{width:415px;gap:30px}}
@media (max-width:470px){
#planes .contPlanes{width:100%;grid-template-columns:repeat(1,1fr);grid-auto-flow:row;gap:20px}
#planes .contPlanes .box{width:180px;margin-left:50%;transform:translateX(-50%)}
#logo .infoContent {padding: 40px 20px 0 20px !important}}	
@media (max-width:420px){
#datos form input[type="text"],#datos form input[type="email"],#datos form select{width:calc(100% - 48px);padding:0 10px 0 38px;font-size:16px;letter-spacing:-1.5px}
#datos form input#txtNombreCotiza{background:#EFECFF url("../images/icoPersonaBF.png") no-repeat;background-position:left 10px center}
#datos form input#txtNumIdentificacion{background:#EFECFF url("../images/icoIdNoBF.png") no-repeat;background-position:left 10px center}
#datos form input#txtContacto{background:#EFECFF url("../images/icoContactoBF.png") no-repeat;background-position:left 10px center}
#datos form input#txtEmail{background:#EFECFF url("../images/icoCorreoBF.png") no-repeat;background-position:left 10px center}
#datos form input#txtMovil{background:#EFECFF url("../images/icoMovilBF.png") no-repeat;background-position:left 10px center}
#datos form input#txtTelefono{background:#EFECFF url("../images/icoTelBF.png") no-repeat;background-position:left 10px center}
#datos form select{background-image:url("../images/icoIdBF.png"),url("../images/arrowSelectBF.png");background-color:#EFECFF;background-repeat:no-repeat;background-position:left 10px center,right 9px center}
#datos form input[type="button"]{height:50px;line-height:50px;font-size:22px;letter-spacing:-1px;padding:0 20px}}	
@media (max-width:360px){
#barraFlotante{padding:6px 0}
#barraFlotante .infoContent{flex-direction:column;gap:4px;padding:0 10px}
#barraFlotante .infoContent>p{line-height:1.4;text-align:center;margin:0 auto;max-width:260px;padding:0}
#barraFlotante #timer{gap:3px;justify-content:center;flex-wrap:nowrap;max-width:100%}
#barraFlotante #timer li{width:42px;height:42px}
#barraFlotante #timer li b{margin-bottom:1px}
#barraFlotante #timer li span{letter-spacing:0}
#logo .infoContent {padding-top: 20px !important}}
@media (max-width:340px){
#datos form input[type="button"]{font-size:21px;padding:0 15px}
#logo .infoContent {padding-top: 45px !important}}