/*  Global Base */
body {
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 13px;
    font-weight:400;

}
main{
        background: rgb(235,235,235);
    background: linear-gradient(180deg, rgba(235,235,235,1) 0%, rgba(235,235,235,1) 3%, rgba(255,255,255,1) 10%);
}
H1,H2,H3,H4{
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}

p, h1, h2, h3, h4{padding: 0; margin: 0;}

H1{font-size: 38px; line-height: 1.1em;}
H2{font-size: 30px; line-height: 1.1em;}
H3{font-size: 20px; line-height: 1.1em;}
.h1-small{font-size: 14px; color: #881719;}
.subbullet{font-size: 18px;}
    
a{color:black;text-decoration: none; font-weight:500;}
a:hover{color: #881719;}
a:active{color: #881719;}
a:visited{color: black;}

header {
    padding: 10px 0;
     background: #fff;
}
main {
    width: 100%;
}
.red-dot{color: #BB1417;}
.login-icon{width: 20px; height: 20px; margin-right: 10px;}
.login-icon img{width: 20px; height: 20px;}

/* texto para fondo obscuro*/
.text-w{color: #fff;}

/* Colores de fondo */
.bg2{background-color: #F7F8FA;}
.bgDark{background-color: #363636;}
.bgRed{background-color: #881719;}
.bggray{background-color:#EBEBEB;}

.bgRed-img{background-image: url("../img/blocks-texture-2.png"); background-repeat: no-repeat; background-size: contain; background-position: right bottom;}
.bggray-img{background-image: url("../img/blocks-texture-3.png"); background-repeat: no-repeat; background-size: contain; background-position: right bottom;}
.bgcta-img{background-image: url("../img/banner-image-cta.jpg"); background-repeat: no-repeat; background-size:cover;}
.bgspotlight{  background-image: url("../img/spotlight.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;}

/* alinaciones */
.flex-center{align-items: center;}
.flex-col{ display: flex; flex-direction: column;}
.flex-row{display: flex; flex-direction: row;}
.text-center{text-align: center;}
.flex-cont-center{justify-content: center;}

/* Espacio Sec */

.separar{margin: 0 5px;}
.esp-3 {
    padding: 3vh 0;
}
.esp-5 {
    padding: 5vh 0;
}
.esp-9 {
    padding: 9vh 0;
}
.esp-10 {
    padding: 10vh 0;
}
.esp-15 {
    padding: 15vh 0;
}
.esp-18 {
    padding: 18vh 0;
}
.esp-left-5p{
   margin-left: 5%;
}
.esp-left-10{
   margin-left: 10%;
}
.esp-left-15{
   margin-left: 15%;
}
.esp-5-top{
    padding-top: 5vh;
}
.esp-10-top{
    padding-top: 10vh;
}
.esp-right-5p{ margin-right: 5%;}
.esp-right-2{ margin-right: 1%;}
.esp-inf-15{
    margin-bottom: 15px;
}
.esp-inf-20{
    margin-bottom: 20px;
}
/* Columnas */
.col-90 {
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
}
.col-80 {
    width: 80%;
    margin: 0 auto;
}
.col-50 {
    width: 50%;
    box-sizing: border-box;
}

.row, .row-invert-m{
    width: 100%;
    display: flex;
    align-items: center;
}

.dashed {
    border-bottom: rgba(208, 203, 203, 1.00) thin dashed ;
}
.dashed img {
    width: 20px;
    height: auto;
}
.border-left {
    border-left: rgba(208, 203, 203, 1.00) solid medium;
}
.border-bottom {
    border-bottom: rgba(208, 203, 203, 1.00) solid medium;
}

/* Mask */
.img-box{overflow: hidden; padding: 0; margin: 0;}
.Loging-box {overflow: hidden; padding: 0; margin: 0; height: 100vh}
.img-box img {width: 100%; height: 100%; object-fit: cover; object-position: center; padding: 0; margin: 0;}
.img-mask{
    mask-image: url("../img/Mask.svg"),linear-gradient(#000 0 0);
    mask-repeat: no-repeat;
    mask-size: contain;   
    mask-position: left bottom;
    mask-composite: exclude;
    -webkit-mask-image: url("../img/Mask.svg"),linear-gradient(#000 0 0);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left bottom;
    -webkit-mask-size:contain; 
    -webkit-mask-composite: exclude;
}
.img-mask2{
    mask-image: url("../img/Mask2.svg"),linear-gradient(#000 0 0);
    mask-repeat: no-repeat;
    mask-size: contain;   
    mask-position: left bottom;
    mask-composite: exclude;
    -webkit-mask-image: url("../img/Mask2.svg"),linear-gradient(#000 0 0);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: right bottom;
    -webkit-mask-size:contain; 
    -webkit-mask-composite: exclude;
}
/* form */
.form-container{
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 50px 0;
}

.form-container form {
    border-top: 5px solid #881719;
    padding: 20px;
    background-color: #fff;
    width: 33%;
    border-radius: 3px;
    filter: drop-shadow(0 2px 4px #00000040);    
}

.form-container img {
    position: absolute;
    top: 0;
    left: 0;
    height: 500px;
    z-index: 0;
}

input,textarea {
    width: 100%;    
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
}

/*  Botones global */
.red {
    background-color: #881719;
    color: white !important;
    border-radius: 3px;
    font-size: 16px;
}
.red-menu{
    background-color: #881719;
    border-radius: 3px;
    font-size: 0;
}
.black {
    background-color: #333;
    color: white !important;
    border-radius: 3px;
    font-size: 16px;
}
.black-menu {
    background-color: #333;
    border-radius: 3px;
    font-size: 0;
}

.blanco{ background-color: #ffffff;
    color: #881719;
    border-radius: 3px;
    font-size: 16px;
}

.blanco:hover, .red:hover{
    background-color: #000;
    color: white;
    border-radius: 3px;
    font-size: 16px;
    filter: drop-shadow(0 2px 4px #00000040); 
}
.login-btn{
 font-size: 16px;
 background-color: white;
}

.button, button {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    margin: 10px 0;
}

.button-CTA {
    padding: 18px 38px;
    cursor: pointer;
    border: none;
    font-weight: 600;
    margin: 10px 0;
}
.shop_pagination {
    width: 100%;
    margin-top: 30px;
    display: inline-block;
    text-align: center;
}
.shop_pagination ul {
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    display: inline-flex;
    list-style: none;
}
.shop_pagination li {
    list-style: none;
    display: inline;
    margin: 5px;
    float: left;
}
.shop_pagination a {
    font-weight: bolder;
    color: rgba(107, 107, 107, 0.6);
}
.current {
    font-weight: bolder;
    color: #900;
}
/*  Fin global */

/*oferta de valor */
.img-oferta img{
    height: 300px;
    width: auto;
    filter: drop-shadow(0 2px 4px #00000040); 
}
/*Carrera*/
#careers img{
    width: 300px;
}
#careers span{ 
    margin: -10px 0 0 250px;
}
#careers p{ 
    width: 50%;
    margin:10px 0;
}
#careers a{ 
    width: 25%;
    text-align: center;
}

/* Checklist Form */
.form-sect-cliente{
    background-color: white;
    display: flex;
    flex-direction: column;
    border-top: 8px #881719 solid;
    padding: 20px;
    align-items: center;
    margin-bottom: 30px;
    filter: drop-shadow(0 2px 4px #00000040); 
}
.form-sect-cliente h2{
    margin: 0;
    padding: 0;
}
.form-sect-cliente p{
    font-size: 25px;
    margin-bottom: 20px;
}
.checklist-form {
    display: flex;
    flex-direction: column;
}
.checklist-form label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.checklist-form input[type="checkbox"] {
    margin-right: 10px;
    width: 20px;
    height: 20px;
}
/* Fin Checklist Form */

/* Beneficios */
.beneficios {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.list-benefit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    margin: 10px;
    text-align: center;
}

.list-benefit img {
    max-width: 100px;
    margin-bottom: 10px;
}

.list-benefit-title {
    margin: 10px 0;
    color: #881719;
    font-weight: 500;
}
.list-contact {list-style: none; }
.list-contact li{display: flex; 
    align-items: center;
    align-content: center;
    padding-bottom: 10px;
}
.list-contact img{ width: 20px; padding-right: 15px;}
/*Fin Beneficios */

/* Nav principal */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 90%;
    margin: 0 auto;
    padding: 0px 0px;
   
}

.nav-logo img {
    max-width: 260px;
}

.nav-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
}

.nav-buttons {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0px;
}
.login-btn, .demo-btn {
    padding: 10px 20px;
    margin-left: 10px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}
#menu-principal ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    z-index: 50;
}
#menu-principal ul li {
    position: relative;
}
#menu-principal ul li a {
    color: black;
    font-size: 16px;
    font-weight:600;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}
#menu-principal ul li a:hover,#menu-principal ul li a:active{
    color: #881719;
}
#menu-principal ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #E5E5E5;
    border: 1px solid #B8B8B8;
    border-radius: 3px;
    filter: drop-shadow(0px 2px 4px #00000040);
}
#menu-principal ul li ul a {
    font-size: 15px;
    font-weight:400;
}
#menu-principal ul li ul a:hover{
    color: #881719;
    background-color: #ffffff4D;
    font-weight:500;
}
#menu-principal ul li:hover ul {
    display: block;
}
#menu-principal ul li ul li {
    width: 200px;
}
.menu-toggle{display: none;}

/*  fin Nav principal */

/* Footer */

footer {
    background-color: #fff;
    color:  #000;
    padding: 20px 0;
}

.footer-container {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.border-top{
    border-top: 1px solid #000;
    padding-top: 20px;
}
.footer-col {
    flex: 1;
    min-width: 200px;
    margin-bottom: 20px;
    display: flex;
    flex-direction:column;
}
.footer-col h4 {
    margin-bottom: 10px;
    font-size: 1.1em;
}
.footer-col button {
    display: block;
    background: none;
    color: white;
    border: none;
    margin: 5px 0;
    cursor: pointer;
    text-align: left;
}

.footer-col img {
    max-width: 250px;
}

.subtitulo-footer {
    font-size: 1.5em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.footer-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-menu button {
    background: none;
    color: #333;
    border: none;
    margin: 0 10px;
    cursor: pointer;
    padding: 10px;
}

.displaycol{
     display: flex;
    flex-direction:column;
}

.footer-row h2, .footer-row p{ margin: 5px 0; padding: 0;}

/* Fin Footer */
/* Entradas */
.contenedor-entradas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.destacado{
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    padding-right: 20px;
}
.entrada {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 30%;
    cursor: pointer;
}
.entrada img,  .destacado img{
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}
.entrada p, .destacado p {
    margin: 0px;
}
.meta {
    display: flex;
    flex-direction: row ;
    align-items: center;
    margin: 0px;
}
.meta p{
    margin: 0px 5px 0px 0px;
    font-size: 12px;
}
.red-meta{
    background-color: #881719;
    color: #fff;
    border-radius: 3px;
    padding: 3px 6px;
}
.entrada h3, .destacado h3 {
    margin: 10px 0;
}

/*testimonial*/
#box-testimonial{ padding: 20px; width: 60%; display: flex; }
#box-testimonial img {width: 90%; border-radius: 5%;}
#img-cliente{ padding: 20px;}
#testimonio{ padding: 20px; display: flex;  align-items: center}

/* Popup Styles */
.popup {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}
.popup-content {
    background-color: white;
    margin: 3% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    border-radius: 3px;
    filter: drop-shadow(0px 2px 4px #00000040);
}
.close-btn, .close-demo {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close-btn:hover,
.close-btn:focus, .close-demo:hover,.close-demo:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.submit-btn {
    background-color: black;
    color: white !important;
    border-radius: 3px;
    font-size: 16px;
}
#cita-form input, #demo-form input,
#cita-form select, #demo-form select{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid #E5E5E5;
    margin: 10px 0px;
}
.fild-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    margin: 20px 0px;
}
#cita-form a, #demo-form a{color:#881719; }
.fild{width: 48%; margin: 1%;}

#cita-form input[type="checkbox"], #demo-form input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
}

/*preguntas frecuentes*/
.pasos {border-left: 6px solid #881719;
    padding-left: 10px;
    margin: 15px 0px;
 width:  90%}

.faq-section {
    max-width: 90%;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
}

.faq-section h2 {
    text-align: center;
    margin-bottom: 20px;
}

.faq-item {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.faq-question {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.faq-arrow {
    margin-right: 10px;
    font-size: 20px;
}

.faq-answer {
    display: none;
    padding-left: 30px;
}

/* Responsive Design */
/* Responsive Design Tablets */
@media (max-width: 1027px) and (min-width: 800px) {
    
    H1{font-size: 32px;}
    H2{font-size: 22px;}
    .form-container form {
    width: 50%;
    }
    
    .form-container {
    padding-left: 20px;
    width: 90%;
    background-position: right;
    }
    .nav-container {
        flex-direction: column;
        align-items: center;
    }
    .nav-right {
        width: 100%;
    }

    .nav-buttons {
        justify-content: center;
    }

    #menu-principal ul {
        flex-direction: row;
        align-items: center;
    }
    .arrow-down::after { content: "▼";
            color: darkgray;
        font-size: smaller;
        padding-left: 10px;}
    .arrow-up::after { content: "▲";
        color: darkgray;
        font-size: smaller;
        padding-left: 10px; 
    }
    .footer-row {
    display: flex;
    flex-wrap: wrap;
    }
    /* se puede usar de forma global */
    .oculto-movil{display: none;}
    /* espesificio para el menu en movil*/
    .no-display { display: none !important; }
    .footer-col {
        width: 100%;
        text-align: center;
    }
    .footer-menu {
        align-items: center;
    }
    .footer-menu button {
        margin: 5px 0;
    }
    .esp-10 {
        padding: 5vh 0;
    }
    .esp-18 {
    padding: 10vh 0;
    }
    .col-50 {
        width: 50%;
    }
    .list-benefit, .entrada {
        width: 28%;
    }
    #careers p {
    width: 55%;
   }
    #careers a {
    width: 46%;
    }
    .img-oferta img{
    height: auto;
    width: 90%;
    }
}
/* Fin Responsive Design Tablets */
/* Responsive Design Movil */
@media (max-width: 799px) {
    .hbanner{margin-bottom: 20px}
    .esp-left-5p{margin-left: 0;}
    .esp-right-5p { margin-right: 0;}
    H1{font-size: 32px;}
    H2{font-size: 22px;}
    /* se puede usar de forma global */
    .oculto-movil, .separar {display: none;}
    /* espesificio para el menu en movil*/
    .no-display { display: none !important; }
    .bgcta-img {
    background-image: url(../img/banner-image-cta.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    }
    .img-oferta img{
    height: auto;
    width: 100%;
    padding-bottom: 30px;
    }
    .form-container {
    align-items: center;
    background-image: url("");
    }
    .form-container form {width: 80%;}
    .nav-logo, .nav-right {
        width: 100%;
        text-align: center;
    }
    .nav-right {
        display: none;
    }
    .nav-container {
        flex-direction: column;
        max-width: 100%;
        margin: 0;
    }
    #menu-principal {
        display: none;
    }
    #menu-principal ul{
        flex-direction:column;
        align-items: center;
    }
    #menu-principal ul li{
        width: 100%;
    }
    #menu-principal ul li ul {
    position: relative;
    top: unset; 
    left:unset; 
    background-color: #E5E5E5;
    border: 1px solid #B8B8B8;
    border-radius: 0;
    filter: none;
    width: 100%
    }
    #menu-principal ul li ul li {
    width: 100%
    }
    #menu-principal ul li ul a {
    font-size: 16px;
    font-weight:400;
    }
    .nav-logo img {
        display: block;
        margin: 0 auto;
    }
    .menu-toggle {
        display: block;
        padding: 10px;
        cursor: pointer;
    }
    .nav-right.active {
        display: flex;
        flex-direction: column;
    }
    .nav-right.active #menu-principal {
        display: block;
        width: 100%;
    }
    .nav-buttons {
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
        width: 100%;
        background-color: #E5E5E5;
        justify-content: space-between;
    }
    .arrow-down::after { content: "▼";
        color: darkgray;
        font-size: smaller;
        padding-left: 10px;}
    .arrow-up::after { content: "▲";
        color: darkgray;
        font-size: smaller;
        padding-left: 10px; 
    }
    .footer-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-col {
        width: 100%;
        text-align: center;
    }
    .footer-menu {
        flex-direction: column;
        align-items: center;
    }
    .footer-menu button {
        margin: 5px 0;
    }
    .row,.flex-row{ flex-direction: column; align-items: center;}
    .row2 {align-items: stretch;}
    .row-invert-m{flex-direction: column-reverse}
    .esp-10 { padding: 10vh 0;}
    .esp-right-2{ margin-right: 0;}
    .col-50 { width: 90%;}
    .col-esp-cel{ margin-bottom: 30px;}
    .list-benefit, .entrada {
        width: 100%;
    }
    #careers p {width: 90%; }
    #careers a {
    width: 55%;
    }
    #cta-box{margin-top: 30px;}
    .form-sect-cliente p {
    font-size: 20px;
    }
    .img-box img, .img-box2 img {border-radius: 5px;}
    .img-mask,.img-mask2{
    mask-image: none;
    -webkit-mask-image: none;
    }
    #box-testimonial {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
    #box-testimonial, #testimonio{ padding: 20px 0px 0px 0px;}
    .Loging-box {display: none;}
    .destacado{
    padding-right: 0;
    width: 100% !important;
    }
}
/* Fin Responsive Design Movil */
/* Fin Responsive Design */