.hero-servicios{
    min-height: auto;
    height: auto;
    background:#ffffff;
    padding:40px 8%;
    padding-top:clamp(80px, 8vw, 120px);

}



.hero-title {
    text-align: center;
    color: #000;
    margin: 70px;
    line-height: 1.2;
    font-size: 3.8rem;   
    font-family: 'Montserrat', sans-serif;   /* más grande */
    font-weight: 900;
}

.hero-title span {
    position: relative;
    display: inline-block;
    margin-top: 5px;     /* baja toda la franja */
    padding: 15px 40px;

    font-size: inherit;   /* mismo tamaño que NUESTROS SERVICIOS */
    font-weight: inherit; /* mismo grosor */

    color: #111;
    z-index: 1;
}

/* Franja amarilla de borde a borde */
.hero-title span::before {
    content: "";
    position: absolute;

    top: 0;
    left: -100vw;

    width: calc(100% + 200vw);
    height: 100%;

    background: #F2EE00;
    z-index: -1;
}












.servicios-generls{
    margin-top: -65px;          /* 👈 lo sube al máximo */
    padding-top: 10px;     /* 👈 casi pegado arriba */

    width: 100%;
    max-width: 1500px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 10px;
    padding-right: 10px;

    box-sizing: border-box;
}



.servicios-slider{
    position: relative;
    margin-top: 40px;

    width: 100%;
    max-width: 1500px;   /* 👈 más ancho */
    margin-left: auto;
    margin-right: auto;

    padding: 0 100px;    /* 👈 más aire lateral */
    box-sizing: border-box;
}

/* =========================
   CARDS ROW (MÁS ANCHO VISUAL)
========================= */
.servicios-cards{
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;

    overflow-x: hidden;
    scroll-behavior: smooth;

    width: 100%;   /* asegura que use todo el espacio */
}

/* =========================
   CARD
========================= */
.card-servicio{
    width: 350px;
    flex: 0 0 auto;

    min-height: 350px; /* 👈 MÁS ALTA */

    background: #fff;
    border-radius: 18px;
    overflow: hidden;

    box-shadow: 0 8px 22px rgba(0,0,0,.08);
    text-decoration: none;

    transition: .3s;

    display: flex;
    flex-direction: column;
}

.card-servicio:hover{
    transform: translateY(-5px);
}

/* =========================
   IMAGEN BOX
========================= */
.img-box{
    position: relative;
    overflow: hidden;
    height: 340px; /* 👈 MÁS ALTA */
}

/* IMAGEN */
.img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s;
}

.card-servicio:hover img{
    transform: scale(1.05);
}

/* SIN IMAGEN */
.card-sin-imagen{
    width: 100%;
    height: 100%;

    background: #f7f7f7;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* =========================
   BODY
========================= */
.card-body{
    background: #F2EE00;
    padding: 16px;
    text-align: center;

    flex: 1;
}

.card-body h3{
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #111;
}

.card-body p{
    margin: 6px 0 0;
    font-size: 14px;
    color: #111;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================
   FLECHA HOVER (MÁS CERCA)
========================= */
.arrow-hover{
    position: absolute;
    right: -60px; /* 👈 MÁS CERCA */
    top: 50%;
    transform: translateY(-50%);

    font-size: 28px;
    font-weight: bold;
    color: #F2EE00;

    opacity: 0;
    transition: all .35s ease;
}

.card-servicio:hover .arrow-hover{
    right: 8px; /* 👈 MÁS CERCA */
    opacity: 1;
}

/* =========================
   DESCRIPCIÓN HOVER
========================= */
.desc-hover{
    position: absolute;
    right: -100%;
    top: 0;

    width: 70%;
    height: 100%;

    background: rgba(0,0,0,.75);
    color: #fff;

    padding: 15px;
    font-size: 13px;

    display: flex;
    align-items: center;

    transition: all .4s ease;
    opacity: 0;
}

.card-servicio:hover .desc-hover{
    right: 0;
    opacity: 1;
}

/* =========================
   BOTONES SLIDER (MÁS CERCA)
========================= */
.slider-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 40px;
    height: 40px;

    border-radius: 50%;
    border: none;

    background: #F2EE00;
    color: #111;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 10;
}

.slider-btn.prev{ left: 55px; }  /* 👈 MÁS CERCA */
.slider-btn.next{ right: 55px; } /* 👈 MÁS CERCA */

/* =========================
   DOTS
========================= */
.slider-dots{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}




/* =========================
   RESPONSIVE SERVICIOS
========================= */

@media(max-width:768px){


    body{
        overflow-x:hidden;
    }



    /* =========================
       HERO
    ========================= */

    .hero-servicios{

        padding:30px 20px;
        
        padding-top:clamp(120px, 12vw, 180px);

    }



    .hero-title{

        margin:40px 0;

        font-size:2.2rem;

        line-height:1.2;

    }



    .hero-title span{

        padding:10px 25px;

    }



    .hero-title span::before{

        left:-50vw;

        width:150vw;

    }





    /* =========================
       CONTENIDO
    ========================= */

    .servicios-generls{

        margin-top:0;

        padding:20px;

    }





    /* =========================
       SLIDER
    ========================= */

    .servicios-slider{

        margin-top: 0px;

        padding:0 55px;

    }



    .servicios-cards{

        width:100%;

        gap:20px;

        overflow:hidden;

    }




    /* =========================
    CARD
    ========================= */

    .card-servicio{

        width:100%;

        max-width:400px;

        margin:0 auto;

        min-height:auto;

        height:auto;

    }



    /* IMAGEN */

    .img-box{

        height:200px;

    }



    /* TEXTO */

    .card-body{

        padding:10px;

        flex:none;

    }



    .card-body h3{

        margin:0;

        font-size:15px;

        line-height:1.2;


        }



    .card-body{

        padding:10px;

        height:auto;

        min-height:auto;

    }



    .card-body h3{

        margin:0;

        font-size:15px;

        line-height:1.2;

    }





    /* =========================
       FLECHAS
    ========================= */

    .slider-btn{

        width:34px;

        height:34px;

        font-size:15px;

    }



    .slider-btn.prev{

        left:15px;

    }



    .slider-btn.next{

        right:15px;

    }





    /* =========================
       DOTS
    ========================= */

    .slider-dots{

        margin-top:20px;

        gap:8px;

    }

}





/* =========================
   CELULARES PEQUEÑOS
========================= */

@media(max-width:420px){


    .hero-title{

        font-size:1.8rem;

    }



    .hero-title span{

        padding:8px 18px;

    }





    /* SLIDER */

    .servicios-slider{

        margin-top:35px;

        padding:0 45px;

    }



    .servicios-cards{

        gap:20px;

    }








    .card-body{

        padding:8px;

    }



    .card-body h3{

        font-size:14px;

        line-height:1.2;

    }





    /* FLECHAS */

    .slider-btn{

        width:32px;

        height:32px;

    }



    .slider-btn.prev{

        left:10px;

    }



    .slider-btn.next{

        right:10px;

    }



}












/* =========================
   SECCIÓN (FONDO GLOBAL)
========================= */
.detalle-servicio{
    background: #E8EFEE;
    padding: 380px 10%;   /* 👈 MÁS ALTA */
}

.detalle-contenido{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;

    max-width: 1200px;
    margin: 0 auto; /* 👈 separado, NO mezclado */
}

/* =========================
   IZQUIERDA
========================= */
.detalle-texto{
    flex: 1;
}

.detalle-texto h2{
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 15px;
}

.detalle-texto p{
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}



/* botón */
.btn-detalle{
    display: inline-block;
    padding: 12px 28px;
    background: #F2EE00;
    color: #111;
    font-weight: 700;
    text-decoration: none;
    border-radius: 30px;
    transition: .3s;
}

.btn-detalle:hover{
    transform: translateY(-3px);
}

.detalle-servicio{
    background: #E8EFEE;
    padding: 80px 10%;
    position: relative;
    overflow: visible; 
    
    margin-top: 80px;/* 👈 clave */
}

.detalle-contenido{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;

    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* =========================
   DERECHA (IMAGEN FLOTANTE)
========================= */
.detalle-img{
    position: absolute;  /* 👈 SALE DEL FLUJO */
    right: -3%;
    top: 38%;
    transform: translateY(-50%);

    z-index: 5;
}

/* IMAGEN */
.detalle-img img{
    width: 300px;
    height: 580px;

    object-fit: cover;
}

.detalle-texto{
    flex: 1;
    max-width: 620px;
     margin-left: -2.5%;
}

/* PÁRRAFO CONTROLADO */
.detalle-texto p{
    height: 225px;        /* 👈 SIEMPRE mide lo mismo */
    overflow-y: auto;     /* scroll si hay mucho texto */

    padding-right: 10px;
    text-align: justify;
    line-height: 1.6;
    font-size: 16px;
    color: #333;
}

/* SCROLL BONITO (opcional pro) */
.detalle-texto p::-webkit-scrollbar{
    width: 6px;
}

.detalle-texto p::-webkit-scrollbar-thumb{
    background: #F2EE00;
    border-radius: 10px;
}

.detalle-texto p::-webkit-scrollbar-track{
    background: transparent;
}








.detalle-footer{
    display: flex;
    align-items: center;
    margin-top: 50px;
    gap: 15px; /* espacio entre franja y botón */
}

.franja{
    position: relative;

    width: 100vw;          /* 👈 ocupa todo el ancho de la pantalla */
    height: 4px;
    height: 60px;   

    background: #F2EE00;

    margin-left: calc(-50vw + 50%); /* 👈 la saca del contenedor */
}
/* BOTÓN */
.btn-detalle{
    white-space: nowrap;  /* evita que se parta el texto */
    background: #F2EE00;
    color: #111;
    padding: 20px 20px;
    border-radius: 0px;
    text-decoration: none;
    font-weight: 600;

    
}










body{
    overflow-x: hidden;
}

.franjaimg{
    position: absolute;
    right: 0;
    bottom: -23.9%;

    width: 20vw;
    height: 60px;
    

    background: #F2EE00;

    margin-right: calc(-50vw + 50%);
    max-width: 100vw;   /* 👈 evita que se pase */
}







/* =========================
   RESPONSIVE DETALLE SERVICIO
========================= */

@media(max-width:768px){


    /* SECCIÓN */

    .detalle-servicio{

        padding:50px 20px;

        margin-top:40px;

        overflow:hidden;

    }



    /* CONTENIDO */

    .detalle-contenido{

        display:flex;

        flex-direction:column;

        gap:25px;

        max-width:100%;

    }



    /* TEXTO */

    .detalle-texto{

        width:100%;

        max-width:100%;

        margin-left:0;

    }



    .detalle-texto h2{

        font-size:2rem;

        text-align:center;

    }



    .detalle-texto p{

        height:auto;

        max-height:none;

        overflow:visible;

        padding-right:0;

        font-size:15px;

        line-height:1.6;

    }





    /* OCULTAR IMAGEN FLOTANTE */

    .detalle-img{

        display:none;

    }





    /* FOOTER */

    .detalle-footer{

        margin-top:30px;

        flex-direction:column;

        gap:0;

    }





    /* OCULTAR FRANJA */

    .franja{

        display:none;

    }



    .franjaimg{

        display:none;

    }





    /* BOTÓN */

    .btn-detalle{

        width:100%;

        text-align:center;

        padding:15px;

    }


}




/* CELULARES PEQUEÑOS */

@media(max-width:420px){


    .detalle-servicio{

        padding:40px 15px;

    }



    .detalle-texto h2{

        font-size:1.7rem;

    }



    .detalle-texto p{

        font-size:14px;

    }

}






/* =========================
   SERVICIO DETALLE
========================= */
.servicio-detalle{
    max-width: 1170px;
    margin: 0 auto;
    padding: 20px;
}

.servicio-detalle h2{
    font-size: 2rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 10px;
}

.servicio-detalle p{
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 25px;
}

/* =========================
   GALERÍA PRO MASONRY
========================= */
.galeria{
    column-count: 3;
    column-gap: 18px;
}

/* IMÁGENES */
.galeria img{
    width: 100%;
    display: block;

    margin-bottom: 18px;

    border-radius: 14px;

    break-inside: avoid;
    cursor: pointer;
    object-fit: cover; /* solo visual, no recorta raro en masonry */
    box-shadow: 0 6px 18px rgba(0,0,0,.08);

    transition: transform .25s ease;
}

.galeria img:hover{
    transform: scale(1.02);
}

/* =========================
   MODAL GALERÍA (PRO)
========================= */
.modal-galeria{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;
    z-index: 9999;
}

.modal-galeria.active{
    display: flex;
}

/* CONTENIDO */
.modal-content{
    display: flex;
    gap: 0;

    background: #fff;
    border-radius: 16px;
    overflow: hidden;

    max-width: 750px;   /* 👈 más compacto */
    width: 100%;

    max-height: 80vh;   /* 👈 no ocupa toda la pantalla */
}

/* IMAGEN */
.modal-content img{
    width: 55%;
    height: 100%;

    object-fit: cover;
}

/* TEXTO */
.modal-texto{
    width: 45%;
    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-texto h3{
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 800;
    color: #111;
}

.modal-texto p{
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* BOTÓN CERRAR */
.modal-close{
    position: absolute;
    top: 15px;
    right: 20px;

    font-size: 28px;
    color: #fff;
    cursor: pointer;
    transition: .2s;
}

.modal-close:hover{
    transform: scale(1.2);
}


/* =========================
   RESPONSIVE SERVICIO DETALLE
========================= */

@media(max-width:768px){


    /* CONTENEDOR */
    .servicio-detalle{

        padding:20px;

    }


    /* TITULO */
    .servicio-detalle h2{

        font-size:1.7rem;

        text-align:center;

        line-height:1.2;

    }


    /* TEXTO */
    .servicio-detalle p{

        font-size:15px;

        line-height:1.6;

        text-align:justify;

    }



    /* =========================
       GALERÍA MASONRY
    ========================= */


    .galeria{

        column-count:1;

        column-gap:0;

        width:100%;

    }



    .galeria img{

        width:100%;

        height:auto;

        max-height:none;

        object-fit:contain;

        display:block;

        margin-bottom:15px;

        border-radius:12px;

    }



    /* =========================
       MODAL
    ========================= */


    .modal-content{

        flex-direction:column !important;

        width:95% !important;

        max-width:95% !important;

        max-height:90vh !important;

        overflow-y:auto !important;

    }



    /* IMAGEN MODAL */

    .modal-content img{

        width:100% !important;

        height:auto !important;

        max-height:450px !important;

        object-fit:contain !important;

        display:block;

        border-radius:10px;

    }



    /* TEXTO MODAL */

    .modal-texto{

        width:100% !important;

        padding:20px !important;

        text-align:center;

    }



    .modal-texto h3{

        font-size:22px;

    }


    .modal-texto p{

        font-size:15px;

        line-height:1.6;

        text-align:justify;

    }



}



/* =========================
   CELULARES PEQUEÑOS
========================= */

@media(max-width:420px){


    .servicio-detalle{

        padding:15px;

    }



    .servicio-detalle h2{

        font-size:1.5rem;

    }



    .servicio-detalle p{

        font-size:14px;

        line-height:1.5;

    }



    /* GALERÍA */

    .galeria img{

        width:100%;

        height:auto;

        object-fit:contain;

        border-radius:10px;

    }



    /* MODAL */

    .modal-content{

        width:96% !important;

    }



    .modal-content img{

        width:100% !important;

        height:auto !important;

        max-height:300px !important;

        object-fit:contain !important;

    }



    .modal-texto{

        padding:15px !important;

    }



    .modal-texto h3{

        font-size:20px;

    }



    .modal-texto p{

        font-size:14px;

    }


}