@font-face {
        font-family: 'Nexa-Heavy';
        src: url('/css/fonts/Nexa-Heavy.woff') format('woff');
}
@font-face {
        font-family: 'Nexa-ExtraLight';
        src: url('/css/fonts/Nexa-Light.woff') format('woff');
}
body{
    overflow-x: hidden;
}
footer{
    background-color: #f8e969;
    font-family:Nexa-ExtraLight ;
    color: black;
    font-size: 20px;
}
.contcarruselDesktop{
    display: block;
}
.contcarruselMobil{
    display: none;
}
.logo{
    width: 150px;
}
nav{
    background-color: white!important;
}
.nav-link{
    font-weight: bold;
    font-family: 'Nexa-Heavy';
    color: black;
}
.slick{
    height: 98vh;
}
.hero{
    height: 98vh !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.logohero{
    width: 600px;
}
#b1 h1{
    color: white;
    font-family:'Nexa-Heavy';
     font-weight: bold;
    font-size: 190px;  
}
#b1 p{
    color: white;
    font-size: 45px;
    font-family: 'Nexa-ExtraLight';
    font-weight: bold;
}
.cbtn{
    background-color: #f8e969;
    color: black;
    font-family: 'Nexa-Heavy';
    font-weight: bold;
    font-size: 30px;
    border: none;
    border-radius: 7%/50%;
}
.enviar{
   background-color: #f8e969;
    color: black;
    font-family: 'Nexa-Heavy';
    font-weight: bold;
    font-size: 30px;
    border: none;
    border-radius: 13% / 46%;
}
#b2 h1, #b2 p{
    color: black;
}
#b2 h1{
    font-family:'Nexa-Heavy';
     font-weight: bold;
    font-size: 60px;
}
.decb1{
    font-family:'Nexa-ExtraLight';
     font-weight: 100;
    font-size: 30px;
}
.customcard p {
        font-family: 'Nexa-ExtraLight';
    font-weight: bold;
    font-size: 25px;
    text-align: center;
    padding: 0px 37px;
    margin-top: 15px;
    line-height: 27px;
}
.customcard{
    border:none;
    background-color: white;
    border: none;
    background-color: white;
    border-radius: 50% / 30%;
    height: 400px;
    width: 240px;
}
.customcard img{
    width: 80%;
    margin-top: 15px;
}
.contCrds .card{
    background-color: black!important;

}
.contCrds .card img{
    width: 242px;
}
.cardcustot{
    border: none;
  
}
.cardcustot p{
     text-align: center;
     padding-top: 15px;
}
.cardcustot img{
    width: 80%;
}
#b3 h1{
    font-family:'Nexa-Heavy';
    font-weight: bold;
    font-size: 60px;
}
.bbc{
    border-bottom:solid black 4px;
}
.btc{
    border-top:solid black 4px;
}
.pcb{
    padding: 0px 124px;
}
#b3 h2{
    font-family:'Nexa-Heavy';
     font-weight: bold;
    font-size: 40px;
    padding-right: 79px;
}
#b3 p{
    font-family:'Nexa-ExtraLight';
     font-weight: 100;
    font-size: 26px;
}
#b3 h3{
    font-family:'Nexa-Heavy';
     font-weight: bold;
    font-size: 35px;
}
#b4 h1 , #gracias h1{
   font-family:'Nexa-Heavy';
     font-weight: bold;
    font-size: 60px; 
    color: white;
}
#b4 .card h6{
        font-family:'Nexa-ExtraLight';
     font-weight: bold;
    font-size: 25px; 
    color: white;
}
#b4 .card p{
        font-family:'Nexa-ExtraLight';
     font-weight: 100;
    font-size: 20px; 
    color: white;
    line-height: normal;
}
#b5 h1, #gracias h1{
    color:black;
    font-family:'Nexa-Heavy';
     font-weight: bold;
    font-size: 60px;
}
#b5 p,  #gracias p{
    color:black;
    font-family:'Nexa-ExtraLight';
     font-weight: bold;
    font-size: 24px;
}
#b5 .cardcustot p{
    color:black;
    font-family:'Nexa-Heavy';
     font-weight: bold;
    font-size: 18px;
    padding: 20px 0px;
}
#b6 h1{
    color:black;
    font-family:'Nexa-Heavy';
     font-weight: bold;
    font-size: 60px;
}
.circle{
   position: absolute;
    top: 34%;
    left: -48px;
    width: 160px;
    height: 160px;
    border: solid 20px #efefef;
    border-radius: 100%;
    z-index: 9999999;
    background-color: black;
    cursor: pointer;
}
.circle svg {
    width: 80%;
}
#b7 h1{
     color:white;
    font-family:'Nexa-Heavy';
     font-weight: bold;
    font-size: 60px;
}
input[type=text],input[type=email], textarea{
    width: 100%;
    color: darkslategray;
    font-family: 'Nexa-Heavy';
    font-weight: bold;
    padding: 15px 20px;
    font-size: 20px;
    margin-top: 18px;
}
.enviar{
    padding: 0px 80px;
}

   .checkbox-container {
      display: inline-block;
      position: relative;
      padding-left: 28px;
      cursor: pointer;
      font-size: 16px;
      user-select: none;
    }

    /* Ocultar el checkbox original */
    .checkbox-container input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }

    /* Estilo del cuadro */
    .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 20px;
      width: 20px;
      background-color: black;
      border: 2px solid white;
    }

    /* Mostrar la palomita cuando esté seleccionado */
    .checkbox-container input:checked ~ .checkmark::after {
      content: "";
      position: absolute;
      left: 5px;
      top: 1px;
      width: 6px;
      height: 12px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    /* Opcional: animación al enfocar */
    .checkbox-container input:focus ~ .checkmark {
      
      outline-offset: 2px;
    }
    .checkbox-container a{
        color: white;
        font-family:'Nexa-ExtraLight';
        font-weight: bold;
        font-size: 24px;
    }
    #b7 a , .ubi{
        color: white;
        font-family:'Nexa-ExtraLight';
        font-weight: bold;
        font-size: 30px;
        text-decoration: none;
    }
    .icon{
        width: 50px;
    }
    hr{
        color: white;
        background-color: white;
        height: 4px;
    }
    .line{
         position: relative;
    }
    .line::after{
        content: ""; /* obligatorio para que se muestre */
        position: absolute;
        left: 0;   /* pegada al lado izquierdo */
        top: 10px;
        bottom: 0;
        width: 3px;     
        height: 20px;      /* grosor de la línea */
        background-color: black; /* color de la línea */
    }