@font-face {
  font-family: "Satoshi-light";
  src:
    url("../fonts/Satoshi-Light.otf") format("opentype");
    }
    
    @font-face {
  font-family: "Satoshi";
  src:
    url("../fonts/Satoshi-Regular.otf") format("opentype");
    }
    
    @font-face {
  font-family: "Satoshi-italic";
  src:
    url("../fonts/Satoshi-Italic.otf") format("opentype");
    }
    
    @font-face {
  font-family: "Satoshi-blackitalic";
  src:
    url("../fonts/Satoshi-BlackItalic.otf") format("opentype");
    }
    
     @font-face {
  font-family: "Satoshi-black";
  src:
    url("../fonts/Satoshi-Black.otf") format("opentype");
    }
    
    @font-face {
     font-family: "Satoshi-medium";
     src:
             url("../fonts/Satoshi-Medium.otf") format("opentype");
    }
    
    @font-face {
     font-family: "Satoshi-bold";
     src:
             url("../fonts/Satoshi-Bold.otf") format("opentype");
    }

.cuadro{
    background-color: #2E3231;
    width: 100%;
    text-align: center;
    padding: 45px 0;
    font-family: 'Bebas Neue', sans-serif;
 }
.cuadro h1{
    color: #ffffff;
    font-size: 40px !important;
}

.cuadro span{
    color: #F18A00;
}

 .cuadro img{
     width: 100%;
     object-fit: cover;
 }

.cuadro-2 img{
    width: 100%;
}

.cuadro-3 h1{
    font-size: 40px;
    font-family: 'Bebas Neue', sans-serif;
    color: #F18A00;
}
.txt-55{
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px !important;
    letter-spacing: 2px;
    color: #F18A00;
}
 .slide-titulo h1{
     font-size: 55px;
     font-family: 'Bebas Neue', sans-serif;
     color: #F18A00;
     letter-spacing: 2px;
 }

 .slide-titulo img{
     width: 5%;
 }

.cuadro-3 a{
    color: #2E3231 ;
    font-size: 16px;
    font-family: 'Satoshi-black', sans-serif;
}

.cuadro-3 a:hover{
    color: #2E3231 !important;
}
 input[type="text"],
 input[type="tel"],
 input[type="email"],
 textarea,
 select{
    -webkit-appearance: none;  /* quita el estilo por defecto en Safari/WebKit */
    -moz-appearance: none;     /* por compatibilidad */
    appearance: none
     font-family: 'Satoshi-light', sans-serif !important;
     border-radius: 40px !important;
     padding: 15px;
     border: 1px solid #F2F2F0;

 }
#mensaje{
    border: 1px solid #F2F2F0;
}

 .btn-block{
     font-family: 'Satoshi-bold', sans-serif !important;
     border-radius: 40px !important;
 }
 ::placeholder {
     font-family: 'Satoshi-light', sans-serif !important;
     margin-left: 20px ;
 }
 .btn-block{
     padding: 10px 20px !important;
     background-color: #F18A00 !important;
     border: 0 !important;
     color: white !important;
     border-radius: 40px !important;
     transition: background-color 0.3s ease !important; /* Transición suave de 0.3 segundos */
 }
 .btn-block:hover{
     background-color: white !important;
     color: #F18A00 !important;
     border: 1px solid white !important;
 }


.cuadro-3 p{
    font-size: 16px;
    font-family: 'Satoshi-light', sans-serif;
    margin: 0 !important;
}

.cuadro-3 i{
    padding-left: 8px;
    color: #F18A00;
    font-size: 18px;
}

.cuadro-3 h2, h4{
    font-family: 'Satoshi-black', sans-serif;
    font-size: 18px !important;
}

.cuadro-4 p{
    font-size: 16px;
   font-family: 'Satoshi-light', sans-serif;
}

.cuadro-4 h4{
    font-size: 18px;
   font-family: 'Satoshi', sans-serif;
   font-weight: 700;
}

.txt-medio{
    padding-top: 5rem;
}


.txt-borde{
    border-bottom: 1px solid black;
    font-family: 'Satoshi-light', sans-serif;
    font-size: 18px;
}

.icon{
    width: 40px;
}
.contador{
    font-size: 40px;
    font-family: 'Satoshi-blackitalic', sans-serif;
}
.img-home-2{
    width: 100%;
}

.parrafo-a{
    font-size: 16px !important;
    font-family: 'Satoshi-light', sans-serif !important;
    color:black;
}

.list-infra{
    /*list-style-type: "-" !important;*/
    /*list-style-position:inside;*/
    list-style: none;
}

.list-infra li::before{
    content: "- ";
    color: #F18A00;
}
.navbar-expand-lg{
    justify-content: flex-end !important;
}

.btn-conocer{
    padding: 2% 15%;
    border: 1px solid #F18A00;
    border-radius: 20px;
    font-size: 12px !important;
    font-family: 'Satoshi-black', sans-serif !important;
}

.btn-conocer:hover{
    width: 100%;
    background-color: #F18A00;
    color: #ffffff;
    text-decoration: none;
}

.btn-conocer img{
    padding-left: 1%;
    padding-bottom: 2px;
    width: 4%;
}

 .btn-conocer:hover img {
     content: url('../recursos/flecha-diagonal-BN.svg');
 }

.conoce-proyecto{
    font-size: 12px;
    font-family: 'Satoshi-black', sans-serif !important;
    color: #000000;
    text-decoration: none !important;
}

.conoce-proyecto:hover{
    color: #000000;
}


.slide-home{
    text-align: left;
}

.slide-home p{
    font-size: 18px;
    font-family: 'Satoshi-light', sans-serif !important;
}

.slide-home h1{
    font-size: 35px;
    font-family: 'Satoshi-black', sans-serif;
    color: #000000;
    padding-bottom: 30%;
}

.slide-home h2{
    font-size: 15px;
    font-family: 'Satoshi-light', sans-serif !important;
}

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

 .py-menu a{
     font-family: 'Satoshi-light', sans-serif !important;
     font-size: 16px;
     color: #000000;
     text-decoration: none;
     padding-right: 3em;
 }

 .slide-proyectos{
     text-align: left;
 }

 .slide-proyectos p{
     font-size: 10px;
     font-family: 'Satoshi-light', sans-serif !important;
 }

 .slide-proyectos h1{
     font-size: 40px;
     font-family: 'Satoshi-black', sans-serif;
     color: #000000;
     padding-bottom: 33%;
     letter-spacing: 2px;
 }

.lista-guion li{
    list-style: none inside;
}

.lista-guion li::before{
    content: "-";
    color: #F18A00;
    display: inline-block;
    width: 1em;
    margin-left: -1em
}

 .slide-proyectos h2{
     font-size: 15px;
     font-family: 'Satoshi-light', sans-serif !important;
 }

 .proyectos-menu a{
     font-family: 'Satoshi-black', sans-serif;
     font-size: 10px;
     color: #000000;
     text-decoration: none;
 }

 .proyectos-menu:hover a{
     color: #F18A00;
 }

.sec-proyecto{
    font-size: 55px;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px;
    color: white;
}

.footer h2{
    font-size: 30px;
    font-family: 'Bebas Neue', sans-serif;
}

.footer p{
    font-size: 12px;
    font-family: 'Satoshi-light', sans-serif !important;
    color: #000000;
    line-height: 4rem;
    text-transform: uppercase;
    letter-spacing: 0.02rem;
}

.footer span{
    color: #F18A00;
}

.pro-p{
    font-family: 'Satoshi-light', sans-serif !important;
    font-size: 16px !important;
    color: #ffffff;
}

 .sec-vertical{
     padding-left: 3rem !important;
 }

 .sec-horizontal{
    padding-right: 3rem !important;
 }
 .txt-slide{
     padding-top: 3rem !important;
 }

 .font-weight-bold {
     font-family: 'Satoshi-bold', sans-serif;
 }
 
 .tiktok-img{
     padding-left: 0;
     padding-right: 0.8rem;
 }
 
 .icon-normal{
     background-color: #F2F2F0; 
     margin: 0 3px; 
     padding: 11px 12px 15px 15px; 
     border-radius: 50%;
 }
 
 .icon-grande{
     background-color: #F2F2F0; 
     margin: 0 3px; 
     padding: 10px 14px 15px 20px; 
     border-radius: 50%;
 }
 
@media (max-width: 768px) {
    
    html, body {
        overflow-x: hidden;
    }
    .cuadro h1{
        font-size: 30px !important;
    }
    
    .cuadro-3 h1{
        font-size: 30px;
    }
    .cuadro-3 a{
        font-size: 15px;
        padding-bottom: 15px;
    }
    .cuadro-3 p{
        font-size: 15px;
    }
    
    .cuadro-4 p{
        font-size: 16px;
    }
    .cuadro-3 i{
        font-size: 15px;
    }
    .cuadro-3 h2, h4{
        font-size: 15px !important;
    }

    .cuadro-4 h4{
        padding-top: 15px;
    }
    
    .ultimo-servi{
        border-bottom: 1px solid black
    }

    .slide-titulo{
        font-size: 45px !important;
        padding-top: 3rem;
    }

    .slide-titulo img{
        width: 10%;
    }
    
    .slide-home h1{
        font-size: 30px;
        padding-bottom: 0;
    }
    
    .slide-home h2{
        font-size: 15px;
    }
    
    .slide-home p{
        font-size: 15px;
    }

    .btn-conocer{
        padding: 2% 15%;
    }

    .txt-55{
        font-size: 45px !important;
    }

    .txt-none{
        display: none;
    }

    .sec-vertical, .sec-horizontal{
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .txt-slide{
        padding-top: 0 !important;
    }

    .conoce-proyecto{
        text-align: justify !important;
    }
    
    .footer p{
        line-height: 2rem;
    }
    
    .icon-normal{
        padding: 11px 12px 13px 15px;
    }
    
    .icon-grande{
        padding: 10px 15px 15px 20px;
    }
    
    .w-sm-100{
        width: 100% !important;
        padding-left: 15px;
    }
    
    .txt-borde{
        font-size: 14px;
    }

    /*.flecha-slide{*/
    /*    position: absolute !important;*/
    /*    top: 95% !important;*/
    /*    transform: translateY(-50%);*/
    /*    right: 0.5em !important;*/
    /*}*/
}