*{
    margin: 0;
    padding: 0;
    font-family: "Ancizar Sans", sans-serif;
    text-decoration: none;
    list-style: none;
    color: black;
}
.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #25d366; /* Color oficial de WhatsApp */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
    text-decoration: none;
    z-index: +5;
}

.whatsapp-btn i {
    font-size: 30px; /* Ajusta el tamaño del icono */
    color: white; /* Hace que el icono sea visible */
}

.whatsapp-btn:hover {
    transform: scale(1.1);
}
.pr1{
    background-color: white;
    width: 100%;
    margin: auto;
}
.header{
    display: flex;
    width: 80%;
    height: 90px;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    background-color: white;
}
.logo{
    align-items: center;
    display: flex;
    font-size: 22pt;
}
.etc{
    font-size: 16pt;
    gap: 35px;
    display: flex;
    position: relative;
    right: 30px;
}
.separator {
    width: 1px;
    height: 20px; /* Ajusta según el tamaño de los enlaces */
    background-color: grey;
    margin: 0 10px; /* Espaciado entre los enlaces */
    display: inline-block;
}
.num{
    /* border: 2px solid red ; */
    background-color: rgb(241, 24, 24);
    border-radius: 10px;
    padding: 8px;
    width: 120px;
}
.num a{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21pt;
    color: white;
    font-weight: 600;
}
.pr2 {
    position: relative;
    background-image: url(/cerrajeria.avif);
    background-size: cover;
    background-position: center;
    height: 600px;
}

.pr2::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Capa oscura */
}

.urgencia-cont{
    margin: auto;
    width: 80%;
    height: 300px;
    display: flex;
    z-index: +1;
    position: relative;
    flex-direction: column;
    gap: 40px;
}
.urgencia{
    margin: auto;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 40px;
    display: flex;
    padding-top: 80px;
}
.urgencia h1{
    font-size: 46pt;
    color: white;
    
}
.urgencia ul{
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.urgencia ul li{
    color: white;
    font-size: 14pt;
  
}
.cont-llama{
    border-radius: 10px;
    padding: 12px;
    background-color: rgb(241, 24, 24);
    margin: auto;
    font-size: 25px;
}
.cont-llama h2{
    color: white;
}

/* ------servicios------ */
.main-servicio{
    margin: auto;
    display: flex;
}
.cont-servicio{
    width: 90%;
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
    height: 660px;
}

.servicio{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.servicio p{
    width: 70%;
}
.servicio h2{
    font-size: 35pt;
}
.servicio ul{
    padding: 20px;
    gap: 10px;
    display: flex;
    flex-direction: column;
}
.servicio ul li{
    font-size: 16pt;
    gap: 10px;
    display: flex;
}
.img-servicio img{
    width: 400px;
    border-radius: 15px;
}

.main-pagos{
    background-color: #F5F5F5;
    height: 450px;
    display: flex;
    margin: auto;
    justify-content: center;
}
.cont-pagos{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 55%;
}

.pagos{
    display: flex;
    gap: 30px;
    flex-direction: column;
}
.tit-pago{
    line-height: 1.3;
    color: #131d3b;
    font-size: 2.575rem;
    font-weight: 700;
    clear: both;
    box-sizing: border-box;
}
.pagos ul li{
    line-height: 1.8;
    font-size: 13pt;
}
.pagos i{
    font-size: 13pt;
}

.main-nos{
    margin: auto;
    height: 450px;
    display: flex;
    justify-content: center;
}
.cont-nos{
    display: flex;
    margin: auto;
    width: 80%;
}
.desk{
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.desk h3{
    font-size: 25pt;
}
.desk i{
    font-size: 13pt;
    line-height: 1.6;
}
.cont-cuadros{
    width: 40%;
    display: flex;
    margin: auto;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}
.pa , .pb{
    display: flex;
    flex-direction: row;
    display: flex;
    gap: 10px;
}

.c1 , .c2 , .c3 , .c4{
    padding: 20px 20px 20px 20px;
    background-color: rgb(241, 24, 24);
    border-radius: 10px;
    color: white;
    justify-content: center;
    display: flex;
    font-weight: 600;
    font-size: 25px;
    width: 50%;
}

/* --------------footer------------ */
footer{
    display: flex;
    width: 70%;
    margin: auto;
    gap: 50px;
}
.footer-gen{
    background-color: #2f2f2f;
    height: 250px;
    display: flex;
}
.about{
    width: 33%;
    gap: 20px;
    display: flex;
    flex-direction: column;
    margin-right: 100px;
    position: relative;
}
.about h4{
    color: white;
    font-size: 22px;
    text-transform: uppercase;
}
.cont-about{
    color: white;
    font-size: 13px;
    line-height: 2;
}
.information{
    width: 33%;
    gap: 20px;
    display: flex;
    flex-direction: column;
    color: white;
}
.information h4{
    color: white;
    font-size: 22px;
    text-transform: uppercase;
}
.cont-info li{
    color: white;
    font-size: 17px;
    line-height: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.cont-info li i{
    width: 20px;
    justify-content: center;
    color: white;
    display: flex;
}
.cont-info li a{
    color: white;
    font-size: 17px;
    line-height: 2;
}
.follow{
    width: 33%;
    gap: 20px;
    display: flex;
    flex-direction: column;
    color: white;

}
.follow h4{
    color: white;
    font-size: 22px;
    text-transform: uppercase;
}
.follow ul{
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.follow li i {
    font-size: 14px;
    color: #262725;
    border: solid 2px #ffffff;
    height: 31px;
    width: 31px;
    text-align: center;
    vertical-align: middle;
    border-radius: 100px;
    line-height: 27px;
    margin-right: 15px;
    transition: 1s;
    background: #fff;
    align-items: center;
    display: flex;
    justify-content: center;
}


/* -----------responsive------------ */
@media (max-width: 1660px){
    .cont-cuadros{
        width: 50%;
    }
}
@media (max-width: 1550px){
    .cont-cuadros{
        width: 40%;
    }
}
@media (max-width: 1500px){
    .cont-servicio{
        height: 550px;
    }
    .servicio h2{
        font-size: 26pt;
    }
    .servicio ul li{
        font-size: 14pt;
    }
    .servicio p{
        font-size: 11.5pt;
    }
    .img-servicio img{
        height: 480px;
        width: 100%;
    }
    .main-pagos{
        height: 400px;
    }
    .tit-pago{
        font-size: 2.1rem;
    }
    .cont-pagos{
        width: 65%;
    }
    .img-pago img{
        height: 80%;
    }
    .desk{
        width: 45%;
    }
    .cont-cuadros{
        width: 45%;
    }
    .cont-nos{
        width: 90%;
    }
    .c1 , .c2 , .c3 , .c4{
        font-size: 20px;
        padding: 15px 15px 15px 15px;
        width: 55%;
    }
    .footer-gen{
        height: 240px;
    }
    .about{
        width: 40%;
    }
    .information{
        width: 40%;
    }
}
@media (max-width: 1225px){
    .footer-gen{
        height: 210px;
    }
    footer{
        gap: 0;
    }
    .desk i {
        font-size: 12pt;
        line-height: 1.4;
    }
    .cont-servicio{
        height: 510px;
    }
    .img-servicio img{
        height: 450px;
    }
    .about{
        gap: 10px;
        margin-right: 50px;
    }
}
@media (max-width: 900px){
    .urgencia h1{
        font-size: 38pt;
    }
    .urgencia ul li{
        font-size: 12pt;
    }
    .cont-llama{
        font-size: 20px;
    }
    .pr2 {
        position: relative;
        background-image: url(/cerrajeria.avif);
        background-size: cover;
        background-position: center;
        height: 550px;
    }
    .img-servicio img {
        height: 420px;
    }
    .servicio{
        width: 50%;
        gap: 5px;
    }
    .servicio h2 {
        font-size: 24pt;
    }
    .servicio p{
        font-size: 10pt;
        width: 80%;
    }
    .servicio ul li {
        font-size: 13pt;
    }
    .main-pagos{
        height: 350px;
    }
    .cont-pagos{
        width: 80%;
    }
    .pagos{
        gap: 15px;
    }
    .tit-pago{
        font-size: 1.9rem;
    }
    .img-pago img{
        height: 270px;
    }
    .main-nos{
        height: 400px;
    }
    .desk i{
        font-size: 11pt;
        /* width: 55%; */
    }
    .c1 , .c2 , .c3 , .c4{
        font-size: 16px;
        padding: 15px 15px 15px 15px;
        width: 55%;
    }
    .cont-cuadros{
        width: 48%;
    }
    footer{
        width: 90%;
    }
    .about{
        gap: 7px;
        margin-right: 20px;
        width: 60%;
    }
    .about h4{
        font-size: 18px;
    }
    .follow h4{
        font-size: 18px;
    }
    .information h4{
        font-size: 18px;
    }
    .follow ul{
        gap: 10px;
    }
}
@media (max-width: 810px){
    .header{
        width: 90%;
    }
    .logo img{
        width: 135px;
    }
    .etc{
        gap: 10px;
        right: 0;
    }
    .num{
        width: 100px;
    }
    .num a{
        font-size: 18pt;
    }
    .cont-nos{
        flex-direction: column;
        gap: 20px;
    }
    .desk{
        margin: auto;
        width: 90%;
    }
    .cont-cuadros{
        width: 60%;
    }
}
@media (max-width: 600px){
    .img-servicio{
        display: none;
    }
    .urgencia h1{
        font-size: 34pt;
    }
    .cont-servicio{
        height: 430px;
    }
    .servicio{
        width: 75%;
    }
    .servicio h2{
        font-size: 32pt;
    }
    .servicio p{
        width: 100%;
        font-size: 11pt;
    }
    .cont-pagos{
        width: 85%;
    }
    .pagos{
        gap: 10px;
    }
    .tit-pago{
        font-size: 1.6rem;
    }
    .pagos ul li {
        line-height: 1.5;
        font-size: 12pt;
    }
    .img-pago img{
        height: 230px;
    }
    .cont-cuadros{
        width: 75%;
    }
    .cont-about{
        line-height: 1.4;
    }
    .follow{
        width: 17%;
    }
    .follow ul{
        gap: 0;
    }
    .follow li i{
        height: 24px;
        width: 24px;
        margin-right: 5px;
    }
    .information{
        gap: 10px;
    }
    .cont-info li{
        font-size: 15px;
    }
    .cont-info li a{
        font-size: 15px;
    }
}
@media (max-width: 600px){
    .header{
        width: 80%;
    }
    .etc{
        display: none;
    }
    .logo img{
        width: 150px;
    }
    .urgencia h1{
        font-size: 27pt;
    }
    .cont-llama{
        font-size: 16px;
    }
    .pr2 {
        position: relative;
        background-image: url(./cerrajeria.avif);
        background-image: url(https://static.wixstatic.com/media/bf639c_facd57196c074872ac51d7b906e3f18c~mv2.jpeg/v1/fill/w_980,h_632,al_l,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/bf639c_facd57196c074872ac51d7b906e3f18c~mv2.jpeg);
        background-size: cover;
        background-position: center;
        height: 490px;
    }
    .cont-servicio{
        height: 380px;
    }
    .servicio h2{
        font-size: 26pt;
    }
    .servicio p {
        width: 90%;
        font-size: 10pt;
    }
    .servicio ul {
        padding: 15px;
        gap: 7px;
    }
    .cont-cuadros{
        width: 90%;
    }
    .about{
        margin-right: 10px;
    }
    .information{
        width: 35%;
    }
}
@media (max-width: 450px){
    .c1 , .c2 , .c3 , .c4{
        font-size: 15px;
        padding: 10px 10px 10px 10px;
    }
    .cont-cuadros{
        width: 100%;
    }
    .cont-about{
        line-height: 1.1;
        font-size: 12px;
    }
    .cont-info li{
        font-size: 12px;
        gap: 3px;
    }
    .footer-gen{
        height: 195px;
    }
    .follow{
        gap: 10px;
    }
    .follow ul{
        flex-direction: column;
        gap: 3px;
    }
    .follow ul li{
        justify-content: center;
        display: flex;
    }
    .follow{
        display: none;
    }
}
@media (max-width: 400px){
    .cont-llama{
        font-size: 13px;
    }
    .img-pago{
        display: none;
    }
}
@media (max-width: 400px){
    .cont-servicio{
        height: 440px;
    }
}