body{

    background:#fff;

}

section{

    width:100%;

}

.container{

    width:min(92%,var(--max-width));

    margin:auto;

}

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

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    padding:13px 0;

background:linear-gradient(
    to bottom,
    rgba(190,158,122,.18) 0%,
    rgba(190,158,122,.12) 45%,
    rgba(190,158,122,.05) 75%,
    rgba(255,255,255,0) 100%
);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);



    transition:.35s ease;

}

.navbar{

    display:flex;

    justify-content:center;

    align-items:center;

    max-width:1400px;

    margin:auto;

}

.menu {
    display: flex;
    justify-content: center; /* 🔥 ESTO CENTRA */
    gap: 40px;
    list-style: none;
    padding: 0;
}

.menu li{

    list-style:none;

}

.menu a{

    font-family:"Manrope",sans-serif;

    font-size:.85rem;

    color:#8f7357;

    letter-spacing:1px;

    transition:.35s;

}

.menu a:hover{

    opacity:.7;

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

.hero{

    position:relative;

    height:100vh;

    background:#ffffff;

    overflow:hidden;

    padding:55px;

    box-sizing:border-box;

}

.hero-background{

    position:absolute;
    inset:0;

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

}

.hero-background img{

    position:absolute;

    width:90%;
    height:84%;

    object-fit:cover;

    border:1px solid #d7c7a3;
    padding:12px;
    background:#fff;

    box-sizing:border-box;

    opacity:1;

}

.hero-overlay{

    display:none;

}

.hero-content{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    z-index:20;

        transform: translateY(-40px); /* 🔥 SUBE TODO */

}

.hero-content h1{

    font-family:"Cormorant Garamond",serif;

    font-size:6rem;

    font-weight:500;

    color:white;

    text-shadow:
    0 2px 8px rgba(0,0,0,.55),
    0 0 1px rgba(255,255,255,.35);

}

.hero-content p{
    margin-top:15px;
    color:white;
    letter-spacing:5px;
    text-transform:uppercase;
    font-size:.95rem;

    -webkit-text-stroke: 0;

    text-shadow:
    0 3px 10px rgba(0,0,0,.6),
    0 0 1px rgba(255,255,255,.25);
}
/*==============================
    CONFIGURACIÓN GENERAL
==============================*/

section{

    padding:120px 0;

}

.container{

    width:min(92%,1200px);

    margin:auto;

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

@media (max-width:1024px){

    .menu{

        gap:28px;

    }

    .hero-content h1{

        font-size:4.5rem;

    }

    .hero-content p{

        font-size:.85rem;

        letter-spacing:4px;

    }

    .hero-background img{

        width:92%;

        height:72%;

    }

}

@media (max-width:768px){


    .menu{
        position:fixed;
        top:0;
        left:-100%;
        width:280px;
        height:100vh;
        background:#fff;
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:35px;
        padding-left:40px;
        transition:.45s;
        z-index:9999;
    }

    .menu.active{
        left:0;
    }
}
@media (max-width:480px){

    .hero{

        height:100svh;

    }

    .menu{

        gap:14px;

    }

    .menu a{

        font-size:.75rem;

    }

    .hero-background img{

        width:95%;

        height:62%;

    }

    .hero-content h1{

        font-size:2.3rem;

    }

    .hero-content p{

        width:90%;

        font-size:.72rem;

        letter-spacing:2px;

    }

}
/*=====================================
            MENÚ MOBILE
======================================*/

.menu-btn{
    display:none;
    background:none;
    border:none;
    font-size:2rem;
    color:#8f7357;
    cursor:pointer;
}

@media(max-width:768px){

    .navbar{

        justify-content:flex-start;

        padding-left:20px;

    }



    .menu{

        position:fixed;

        top:0;

        left:-100%;

        width:280px;

        height:100vh;

        background:#ffffff;

        display:flex;

        flex-direction:column;

        justify-content:center;

        gap:35px;

        padding-left:40px;

        transition:.45s ease;

        box-shadow:15px 0 35px rgba(0,0,0,.08);

    }

        .menu-btn{
        display:block;
    }

    .menu{
        display:none;
    }

    .menu.active{
        display:flex;
    }




}
/*=====================================
            HISTORIA
======================================*/

.historia{

    background:#ffffff;

    padding:120px 8%;

}

.historia-contenido{

    max-width:1400px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:80px;

}

.historia-texto{

    flex:1;

}

.historia-subtitulo{

    font-family:Manrope,sans-serif;

    font-size:.75rem;

    letter-spacing:4px;

    color:#9b8d7b;

    display:block;

    margin-bottom:20px;

}

.historia-texto h2{

    font-family:"Cormorant Garamond",serif;

    font-size:3.5rem;

    font-weight:500;

    color:#2d2d2d;

    margin-bottom:35px;

}

.historia-texto p{

    font-family:Manrope,sans-serif;

    color:#555;

    line-height:1.9;

    margin-bottom:22px;

    font-size:1rem;

}

.historia-lista{

    margin-top:35px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    list-style:none;

    padding:0;

}

.historia-lista li{

    font-family:Manrope,sans-serif;

    color:#2d2d2d;

}

.historia-lista li::before{

    content:"✓ ";

    color:#b49d7c;

    font-weight:bold;

}

.historia-slider{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.historia-slider img{

    width:100%;

    max-width:520px;

    aspect-ratio:4/5;

    object-fit:cover;

    border-radius:12px;

    transition:opacity .8s;

    cursor:pointer;

}

.slider-dots{

    display:flex;

    gap:10px;

    margin-top:25px;

}

.dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#d2c8bb;

}

.dot.active{

    background:#8f7862;

}

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

@media(max-width:900px){

    .historia-contenido{

        flex-direction:column;

    }

    .historia-texto{

        text-align:center;

    }

    .historia-lista{

        grid-template-columns:1fr;

    }

}
/*=====================================
            PORTFOLIO
======================================*/

.portfolio{

    background:#fff;

    padding:140px 0;

}

.portfolio-titulo{

    text-align:center;

    font-family:Manrope,sans-serif;

    font-size:2rem;

    font-weight:300;

    letter-spacing:12px;

    text-transform:uppercase;

    color:#b89467;

    margin-bottom:55px;

}

.portfolio h2{
    text-align:center;

    font-family:"Cormorant Garamond",serif;

    font-size:5.5rem;
    font-weight:400;

    color:#2d2d2d;

    line-height:1.8;

    margin-bottom:90px;
}

.portfolio-grid{

    width:88%;
    margin:auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

}

.portfolio-item{

    position:relative;

    overflow:hidden;

    display:block;

    aspect-ratio:16/10;
    text-decoration:none;

}

.portfolio-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:.4s ease;

}

.portfolio-overlay{

    position:absolute;
    inset:0;

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

    background:rgba(0,0,0,.20);

    opacity:0;

    transition:.35s ease;

    pointer-events:none;

}

.portfolio-overlay h3{

    font-family:"Cormorant Garamond",serif;
    font-size:2.7rem;
    font-weight:400;
    color:#fff;

    letter-spacing:.5px;

    transform:translateY(10px);
    transition:.45s ease;

}

.portfolio-item:hover img{

    filter:blur(3px) brightness(.7);

}

.portfolio-item:hover .portfolio-overlay{

    opacity:1;

}

.portfolio-item:hover h3{

    transform:none;

}

@media(max-width:900px){

    .portfolio-grid{

        grid-template-columns:1fr;

    }

}
/*=====================================
            PROYECTOS
======================================*/

.proyecto{

    padding:140px 0;

    background:#fff;

}
.proyecto-subtitulo{

    display:block;

    text-align:center;

    font-family:"Manrope",sans-serif;

    font-size:1.25rem;

    font-weight:300;

    letter-spacing:12px;

    text-transform:uppercase;

    color:#3a3a3a; /* 👈 gris oscuro */

    margin-bottom:40px;

}

.proyecto h2{

    text-align:center;
    font-family:"Cormorant Garamond",serif;
    font-size:5rem;
    font-weight:500;
    margin:20px 0 60px;
    color:#2d2d2d;

}

.proyecto-portada{

    width:100%;

    max-width:950px;

    display:block;

    margin:0 auto 70px;

}

.proyecto-texto{

    width:min(92%,1200px); /* 👈 MÁS ANCHO */

    margin:0 auto 70px;

}

.proyecto-texto p{

    font-family:"Manrope",sans-serif;

    color:#4a4a4a;

    font-size:1.05rem;

    line-height:2.1;

    text-align:left;

    margin-bottom:28px;

}
.galeria-boxeadoras {
    width: min(92%, 1400px);
    margin: 50px auto 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.galeria-boxeadoras img {
    width: 100%;
    height: auto;
    display: block;

    cursor: pointer;
    border-radius: 6px;

    object-fit: contain;
    transition: .35s ease;
}

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

@media (max-width: 900px) {
    .galeria-boxeadoras {
        grid-template-columns: repeat(2, 1fr);
        width: 92%;
    }
}

@media (max-width: 600px) {
    .galeria-boxeadoras {
        grid-template-columns: 1fr;
        width: 92%;
    }
}

@media(max-width:650px){

    .galeria-boxeadoras{

        column-count:1;

    }

}
/* LIGHTBOX */

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.85);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    pointer-events:none;

    transition:.4s;

    backdrop-filter:blur(8px); /* 👈 blur real */

    z-index:2000;

}

.lightbox.active{

    opacity:1;

    pointer-events:auto;

}

.lightbox img{

    max-width:90%;

    max-height:90%;

    object-fit:contain;

}

.cerrar{

    position:absolute;

    top:30px;

    right:40px;

    font-size:3rem;

    color:white;

    cursor:pointer;

}
.bio-titulo{

    text-align:center;

    font-family:"Cormorant Garamond", serif;

    font-size:4.2rem; /* 👈 igual estilo, más equilibrado */

    font-weight:500;

    color:#2d2d2d;

    letter-spacing:3px;

    margin:40px 0 10px;

}

.bio-titulo span{

    font-style:italic;

    letter-spacing:0.5px; /* 👈 más delicado */

}

.bio-texto{

    width:min(92%,1200px); /* 👈 más ancho */

    margin:0 auto;

    font-family:"Manrope", sans-serif;

    color:#444;

    line-height:1.9;

    font-size:1rem;

}

.bio-texto p{
    margin-bottom:18px;
}
.bio-container{
    padding-top:80px;
}
.bio-nombre{

    text-align:center;

    font-family:"Cormorant Garamond", serif;

    font-size:2rem;

    font-style:italic;

    font-weight:400; /* 👈 NO negrita */

    color:#2d2d2d;

    margin-top:-20px;
    margin-bottom:60px;

}
.contacto{

    padding:160px 0;

    width:min(92%,900px);

    margin:0 auto;

}

.contacto h2{

    font-family:"Cormorant Garamond", serif;

    font-size:3.5rem;

    font-weight:500;

    margin-bottom:60px;

    color:#2d2d2d;

}

.contacto form{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.contacto label{

    font-family:"Manrope", sans-serif;

    font-size:.9rem;

    color:#444;

}

.contacto input,
.contacto textarea{

    width:100%;

    padding:14px;

    border:1px solid #ddd;

    font-family:"Manrope", sans-serif;

    font-size:1rem;

    outline:none;

}

.contacto textarea{

    min-height:140px;

    resize:vertical;

}

.contacto button{

    width:120px;

    padding:12px;

    background:#333;

    color:#fff;

    border:none;

    cursor:pointer;

    font-family:"Manrope", sans-serif;

    font-size:.9rem;

    transition:.3s;

}

.contacto button:hover{
    opacity:.8;
}
.contacto {
    max-width: 800px;
    margin: 40 auto;
    padding: 60px 20px;
}
/* CONTENEDOR GENERAL DEL CONTACTO */
.contacto-container {
    max-width: 800px;
    margin: 40 auto; /* CENTRA TODO */
    padding: 40px 20px;
}

/* TÍTULO */
.contacto-titulo {
    text-align: center;
    margin-top: 150px; /* 🔥 AUMENTÁ ESTO */
    margin-bottom: 40px;
}

/* FORM */
.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* INPUTS Y TEXTAREA */
.contacto-form input,
.contacto-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
}

/* BOTÓN */
.contacto-form button {
    width: 150px;
}

/* =====================================
   FIX SOLO BOXEADORAS (SIN ROMPER TODO)
===================================== */

/* 🔹 devolver gradiente original */
header{
    background:linear-gradient(
        to bottom,
        rgba(190,158,122,.18) 0%,
        rgba(190,158,122,.12) 45%,
        rgba(190,158,122,.05) 75%,
        rgba(255,255,255,0) 100%
    );
}

/* 🔹 corregir color del menú */
.menu a{
    color:#8f7357;
}

/* 🔹 hover SIN desaparecer */
.menu a:hover{
    opacity:.7;
}

/* 🔹 alinear texto como en otras páginas */


/* 🔹 igualar ancho de galería a "mujeres músicas" */
.galeria-boxeadoras{
    max-width:1400px;
    margin:0 auto;
    padding:0 40px;
    column-count:3;
    column-gap:30px;
}
/* FIX MENU SOLO DESKTOP */
@media(min-width:769px){

    .menu{
        position:static;
        display:flex;
        flex-direction:row;
        justify-content:center;
        gap:40px;
        height:auto;
        background:none;
        box-shadow:none;
    }

}
.proyecto-texto {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  font-family: 'Inter', sans-serif; /* o la misma que uses en músicas */
  font-size: 16px;
  line-height: 2.1;
  color: #333;
}
.portfolio-titulo {
  text-align: center;
  letter-spacing: 8px;
  font-weight: 300;
  margin: 80px 0 40px;
}

.galeria-musicas {
    width: min(92%, 1400px);
    margin: 50px auto 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.galeria-musicas img {
    width: 100%;
    height: auto;
    display: block;

    cursor: pointer;
    border-radius: 6px;

    object-fit: contain;
    transition: .35s ease;
}

.galeria-musicas img:hover {
    transform: scale(1.02);
}
@media (max-width: 900px) {
    .galeria-musicas {
        grid-template-columns: repeat(2, 1fr);
        width: 92%;
    }
}

@media (max-width: 600px) {
    .galeria-musicas {
        grid-template-columns: 1fr;
        width: 92%;
    }
}

.galeria-musicas img{

    width:100%;

    max-width:none;

    display:block;

    margin-bottom:20px;

    break-inside:avoid;

    cursor:pointer;

    transition:.35s;


        
    border-radius:6px; /* opcional, queda más pro */
}

/* =====================================
   GALERÍA VÍNCULOS
   ORDEN: 1 - 2 - 3 / 4 - 5 - 6...
===================================== */

.galeria-vinculos {
    width: min(92%, 1400px);
    margin: 50px auto 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 28px;
}

.galeria-vinculos img {
    width: 100%;
    height: auto;
    display: block;

    cursor: pointer;

    object-fit: contain;

    border-radius: 6px;

    transition: .35s ease;
}

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


/* TABLET */

@media (max-width: 900px) {

    .galeria-vinculos {
        width: 92%;
        grid-template-columns: repeat(2, 1fr);
    }

}


/* CELULAR */

@media (max-width: 600px) {

    .galeria-vinculos {
        width: 92%;
        grid-template-columns: 1fr;
    }

}
/* =====================================
   GALERÍA MAPIÁ
   ORDEN: 1 - 2 - 3 / 4 - 5 - 6...
===================================== */

.galeria-mapia {
    width: min(92%, 1400px);
    margin: 50px auto 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.galeria-mapia img {
    width: 100%;
    height: auto;
    display: block;

    object-fit: contain;

    cursor: pointer;
    border-radius: 6px;

    transition: .35s ease;
}

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


/* TABLET */

@media (max-width: 900px) {

    .galeria-mapia {
        width: 92%;
        grid-template-columns: repeat(2, 1fr);
    }

}


/* CELULAR */

@media (max-width: 600px) {

    .galeria-mapia {
        width: 92%;
        grid-template-columns: 1fr;
    }

}
/* =====================================
   MENU HAMBURGUESA - FIX DEFINITIVO
===================================== */

.menu-btn {
    display: none;
    background: transparent;
    border: none;
    padding: 8px;
    margin: 0;
    font-size: 28px;
    line-height: 1;
    color: #8f7357;
    cursor: pointer;
    position: relative;
    z-index: 10001;
}

@media (max-width: 768px) {

    .navbar {
        justify-content: flex-start;
        padding-left: 20px;
    }

    .menu-btn {
        display: block;
        position: relative;
        z-index: 10001;
    }

    .menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;

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

        gap: 35px;
        padding: 40px;

        margin: 0;

        background: #ffffff;

        box-shadow: 15px 0 35px rgba(0,0,0,.12);

        z-index: 10000;

        transition: left .35s ease;

        box-sizing: border-box;
    }

    .menu.active {
        left: 0;
    }

    .menu li {
        display: block;
    }

    .menu a {
        display: block;
        font-size: 1rem;
        color: #8f7357;
        text-decoration: none;
    }
}
/* =========================================
   BIOGRAFÍA - AJUSTE PARA CELULAR
========================================= */

@media (max-width: 768px) {

    .bio-container {
        padding-top: 45px;
    }

    .bio-titulo {
        font-size: 2rem;
        letter-spacing: 2px;
        margin: 25px 0 8px;
    }

    .bio-nombre {
        font-size: 1.5rem;
        margin-top: -5px;
        margin-bottom: 35px;
    }

    .bio-texto {
        width: 78%;
        font-size: 0.82rem;
        line-height: 1.9;
    }

    .bio-texto p {
        margin-bottom: 14px;
    }
}

.portfolio img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}
/* REDES SOCIALES */
.social-footer{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    padding:55px 20px 70px;
    box-sizing:border-box;
}
.social-circle{
    width:62px;
    height:62px;
    border-radius:50%;
    background:#eeeeee;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#a9a9a9;
    text-decoration:none;
    transition:all .3s ease;
}
.social-circle svg{width:27px;height:27px;display:block;fill:currentColor;stroke:currentColor;stroke-width:0}
.social-circle svg rect,.social-circle svg circle{fill:none;stroke:currentColor;stroke-width:2}
.social-circle:hover{background:#e5e5e5;color:#8f7357;transform:translateY(-2px)}
.social-play{fill:#eeeeee!important;stroke:none!important}
@media(max-width:600px){
    .social-footer{gap:12px;padding:45px 15px 55px}
    .social-circle{width:54px;height:54px}
    .social-circle svg{width:24px;height:24px}
}