.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* =========================
   MODA PELUQUERÍA
   ESTILOS V2
========================= */

:root{
    --negro:#090909;
    --gris:#171717;
    --blanco:#ffffff;
    --dorado:#C8A14A;
    --texto:#cfcfcf;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:var(--negro);
    color:var(--blanco);
    font-family:'Montserrat',sans-serif;
    overflow-x:hidden;
}

/*================ HEADER ================*/

.navbar{
    padding:8px 0;
    background:transparent;
    transition:.45s ease;
}

.logo{
    width:210px;
    height:auto;
    max-height:110px;
    object-fit:contain;
    transition:.35s;
}

.logo:hover{
    transform:scale(1.03);
}

.nav-link{
    color:white!important;
    margin-left:36px;
    font-size:14px;
    font-weight:500;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:.35s;
}

.nav-link:hover{
    color:var(--dorado)!important;
}

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

.hero{
    min-height:90vh;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    position:relative;
    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.45) 0%,
        rgba(0,0,0,.35) 25%,
        rgba(0,0,0,.15) 50%,
        rgba(0,0,0,0) 70%
    ),
    url("../img/hero.jpg");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

.hero::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    border-radius:50%;
    background:rgba(200,161,74,.06);
    filter:blur(40px);
    right:-250px;
    top:-200px;
}

.hero h5{
    color:var(--dorado);
    letter-spacing:8px;
    font-size:15px;
    margin-bottom:25px;
}

.hero p{
    color:white;
    animation:subir 1.6s ease;
    text-shadow:0 2px 10px rgba(0,0,0,.45);
}

/*================ SECCIONES ================*/

section{
    padding:130px 0;
}

.titulo-seccion{
    color:var(--dorado);
    letter-spacing:6px;
    font-size:15px;
    margin-bottom:20px;
    text-align:center;
}

h2{
    font-size:54px;
    font-weight:700;
    margin-bottom:35px;
}

.nosotros{
    text-align:center;
    padding:35px 0;
}

.nosotros h2{
    max-width:700px;
    margin:0 auto 20px;
    font-size:46px;
    line-height:1.1;
}

.nosotros p{
    max-width:700px;
    margin:0 auto;
    font-size:19px;
    line-height:30px;
    color:var(--texto);
}
/*================ SERVICIOS ================*/

.servicios{
    background:#111;
}

.cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin-top:30px;
}

.servicios h2{
    text-align:center;
}

.card{
    background:#181818;
    border:1px solid rgba(200,161,74,.15);
    padding:25px;
    border-radius:18px;
    transition:.35s;
    overflow:hidden;
    position:relative;
}

.card:hover{
    transform:translateY(-10px);
    border-color:var(--dorado);
    box-shadow:0 20px 45px rgba(0,0,0,.45);
}

.card h3{
    color:var(--dorado);
    font-size:28px;
    margin-bottom:20px;
}

.card p{
    color:var(--texto);
    font-size:18px;
    line-height:32px;
}

.card::before{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    background:rgba(200,161,74,.08);
    border-radius:50%;
    top:-140px;
    right:-140px;
    transition:.5s;
}

.card:hover::before{
    transform:scale(1.4);
}

/*================ GALERIA ================*/

.galeria{
    background:var(--negro);
    padding:30px 0 90px;
}

.galeria h2{
    text-align:center;
    margin-bottom:30px;
}

.filtros-galeria{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:10px !important;
}

.filtro{
    background:transparent;
    border:1px solid rgba(200,161,74,.35);
    color:white;
    padding:12px 24px;
    border-radius:50px;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    transition:.35s;
}

.filtro:hover{
    background:#C8A14A;
    color:#111;
    border-color:#C8A14A;
}

.filtro.activo{
    background:#C8A14A;
    color:#111;
    border-color:#C8A14A;
}

.galeria-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.galeria-item{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    cursor:pointer;
    transition:.35s;
}

.galeria-item:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.45);
}

.galeria-item img{
    width:100%;
    height:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    transition:.5s ease;
}

.galeria-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.45),
        transparent
    );
    opacity:0;
    transition:.35s;
    pointer-events:none;
}

.galeria-item::before{
    content:"🔍";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(.6);
    font-size:34px;
    color:white;
    opacity:0;
    z-index:5;
    transition:.35s;
    pointer-events:none;
}

.galeria-item:hover::before{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}

.galeria-item:hover img{
    transform:scale(1.08) rotate(.5deg);
    filter:brightness(.75);
}

.galeria-item:hover::after{
    opacity:1;
}

/*================ TESTIMONIOS ================*/

.testimonios{
    background:#0f0f0f;
    padding-top:70px;
}

.testimonios-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:0;
}

.testimonio{
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.02)
    );
    border:1px solid rgba(200,161,74,.18);
    border-radius:22px;
    padding:15px;
    transition:.4s;
    backdrop-filter:blur(10px);
    overflow:hidden;
    position:relative;
}

.testimonio:hover{
    transform:translateY(-10px);
    border-color:#C8A14A;
    box-shadow:0 20px 45px rgba(0,0,0,.35);
}

.testimonio::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(200,161,74,.06);
    top:-90px;
    right:-90px;
    transition:.4s;
}

.testimonio:hover::before{
    transform:scale(1.4);
}

.estrellas{
    color:#C8A14A;
    font-size:24px;
    letter-spacing:4px;
    margin-bottom:18px;
}

.testimonio p{
    color:#d5d5d5;
    line-height:28px;
    margin-bottom:18px;
}

.testimonio h4{
    color:white;
    font-size:18px;
    font-weight:600;
    margin-top:20px;
}

.testimonios h2{
    text-align:center;
    margin-bottom:50px;
}

/*================ CONTACTO ================*/

.contacto{
    background:#111;
    padding-top:30px;
}

.contacto p{
    font-size:20px;
    line-height:38px;
    color:var(--texto);
}

/*================ FOOTER ================*/

footer{
    padding:20px 40px 15px;
    text-align:center;
    background:black;
    color:#888;
    font-size:14px;
    letter-spacing:2px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    text-align:center;
    align-items:start;
    margin-top:0;
}

.footer-logo{
    width:180px;
    margin:0 auto 20px;
}

footer h4{
    color:#C8A14A;
    margin-bottom:20px;
}

footer a{
    display:block;
    color:#d5d5d5;
    text-decoration:none;
    margin-bottom:12px;
    transition:.3s;
}

footer a:hover{
    color:#C8A14A;
}

footer p{
    color:#bdbdbd;
    line-height:30px;
}

.copyright{
    margin-top:25px;
    padding-top:15px;
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
    color:#777;
}

/*================ ANIMACIONES ================*/

.btn-dorado{
    display:inline-block;
    padding:18px 55px;
    border-radius:50px;
    background:#C8A14A;
    position:relative;
    overflow:hidden;
    color:black;
    font-weight:700;
    text-decoration:none;
    transition:.35s;
    box-shadow:0 15px 40px rgba(200,161,74,.30);
}

.btn-dorado::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:100%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );
    transition:.7s;
}

.btn-dorado:hover::before{
    left:120%;
}

.btn-dorado:hover{
    transform:translateY(-6px);
    background:#d8b45a;
    color:black;
}

@keyframes subir{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/*================ WHATSAPP ================*/

.whatsapp{
    position:fixed;
    right:30px;
    bottom:30px;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#25D366;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:32px;
    text-decoration:none;
    color:white;
    box-shadow:0 10px 25px rgba(0,0,0,.35);
    transition:.3s;
    z-index:999;
}

.whatsapp:hover{
    transform:scale(1.1);
}

img{
    max-width:100%;
    display:block;
}

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

.hero-contenido{
    max-width:560px;
    margin-left:80px;
    text-align:left;
    transform:translateY(-80px);
}

.hero-subtitulo{
    color:#d6d6d6;
    letter-spacing:5px;
    font-size:13px;
    font-weight:500;
    animation:subir .8s ease;
}

.hero-titulo{
    font-size:56px;
    line-height:60px;
    font-weight:700;
    color:#fff;
    margin-bottom:25px;
    animation:subir 1s ease;
}

.hero-titulo span{
    color:#C8A14A;
}

.hero-texto{
    font-size:22px;
    line-height:38px;
    color:#ececec;
    max-width:470px;
    margin-bottom:45px;
}

.navbar.scroll{
    background:rgba(8,8,8,.88);
    backdrop-filter:blur(18px);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:80px;
}

/*================ PILARES - NOSOTROS ================*/

.nosotros-pilares{
    max-width:950px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    transform: translateY(-20px);
}

.pilar{
    text-align:center;
    padding:10px;
}

.pilar strong{
    display:block;
    color:#C8A14A;
    font-size:20px;
    letter-spacing:2px;
    margin-bottom:10px;
}

.pilar:first-child strong{
    font-size:24px;
    line-height:28px;
}

.pilar span{
    display:block;
    color:#cfcfcf;
    font-size:15px;
    line-height:24px;
}

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

@media (max-width:768px){

    .hero-contenido{
        width:calc(100% - 50px);
        max-width:560px;
        margin:0;
        text-align:center;
        position:absolute;
        left:50%;
        transform:translate(-50%, -60px);
    }

    .hero-titulo{
        font-size:42px;
        line-height:46px;
    }

    .hero-texto{
        font-size:18px;
        line-height:30px;
    }

    .nosotros{
        padding:80px 20px;
    }

    .nosotros-pilares{
        grid-template-columns:1fr;
        gap:10px;
        margin-top:40px;
    }

    .cards{
        grid-template-columns:1fr;
        gap:20px;
        margin-top:30px;
    }

    .card{
        padding:25px;
    }

    .card h3{
        font-size:24px;
    }

    .card p{
        font-size:17px;
        line-height:28px;
    }

    .galeria{
        padding:60px 20px 70px;
    }

    .galeria h2{
        font-size:40px;
        margin-bottom:35px;
    }

    .filtros-galeria{
        gap:10px;
        margin-bottom:35px;
    }

    .filtro{
        padding:10px 18px;
    }

    .galeria-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:40px;
        text-align:center;
        margin-top:0;
    }

    .footer-logo{
        margin:0 auto 20px;
    }

    .footer-grid p{
        text-align:center;
    }

    .testimonios{
        padding:60px 20px;
    }

    .testimonios h2{
        font-size:40px;
        line-height:46px;
        margin-bottom:40px;
    }

    .testimonios-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .testimonio{
        padding:25px;
    }
}

/*================ LIGHTBOX ================*/

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.92);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:99999;
}

.lightbox.activo{
    opacity:1;
    visibility:visible;
}

.lightbox img{
    max-width:90%;
    max-height:85vh;
    border-radius:15px;
    box-shadow:0 25px 60px rgba(0,0,0,.6);
    transform:scale(.85);
    transition:.35s;
    opacity:1;
}

.lightbox.activo img{
    transform:scale(1);
}

.cerrar{
    position:absolute;
    top:25px;
    right:40px;
    color:white;
    font-size:50px;
    cursor:pointer;
    transition:.3s;
}

.cerrar:hover{
    color:#C8A14A;
}

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

.flecha{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    color:white;
    font-size:60px;
    cursor:pointer;
    user-select:none;
    transition:.3s;
    padding:15px;
}

.flecha:hover{
    color:#C8A14A;
    transform:translateY(-50%) scale(1.15);
}

.izquierda{
    left:30px;
}

.derecha{
    right:30px;
}

.contador{
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    color:white;
    font-size:18px;
    letter-spacing:2px;
}
.navbar .container{
    height:58px;
    display:flex;
    align-items:center;
}
.navbar{
    padding:0;
}
@media (max-width: 991.98px){

    .navbar-collapse{
        background:rgba(8,8,8,.94);
        backdrop-filter:blur(12px);
        padding:15px 20px;
        border-radius:0 0 12px 12px;
    }

}
.nosotros{
    padding:80px 0 !important;
}

.nosotros h2{
    font-size:48px !important;
    margin-bottom:35px !important;
}

.nosotros p{
    line-height:34px !important;
}

.nosotros-pilares{
    margin-top:40px !important;
}
.btn-servicio{
    display:inline-block;
    margin-top:20px;
    padding:10px 24px;
    border:1px solid #C8A14A;
    border-radius:30px;
    color:#C8A14A;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

.btn-servicio:hover{
    background:#C8A14A;
    color:#111;
}
.card{
    display:flex;
    flex-direction:column;
}

.btn-servicio{
    margin-top:auto;
}
.info-lightbox{
    position:absolute;
    bottom:70px;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    z-index:5;
}

#nombreServicioLightbox{
    color:#C8A14A;
    font-size:18px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:12px;
    text-transform:uppercase;
}

.info-lightbox .btn-servicio{
    margin-top:0;
}
/* ===== CORRECCIÓN DEFINITIVA MOBILE ===== */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

@media (max-width:768px){

    .navbar,
    .navbar .container{
        width:100%;
        max-width:100%;
    }

    .navbar .container{
        padding-left:20px;
        padding-right:20px;
    }

    .hero,
    section,
    .lightbox{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .lightbox{
        left:0;
        right:0;
    }

    .lightbox img{
        max-width:calc(100vw - 80px);
        max-height:75vh;
    }

    .izquierda{
        left:5px;
    }

    .derecha{
        right:5px;
    }

    .info-lightbox{
        width:calc(100vw - 40px);
        max-width:100%;
    }

    .whatsapp{
        right:20px;
        bottom:20px;
    }
}