:root{
--fondo:#FAF7F2;
--gris-claro:#E6DFD6;
--madera:#8B5E3C;
--gris-oscuro:#4A4A4A;
--negro:#1F1F1F;
--blanco:#ffffff;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Segoe UI", Arial, sans-serif;
}

body{
background:var(--fondo);
color:var(--negro);
}



header{
background:var(--blanco);
padding:20px 40px;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid var(--gris-claro);
}

header h1{
color:var(--madera);
font-size:28px;
}



.menu{
position:relative;
}

.menu-btn{
font-size:26px;
background:none;
border:none;
cursor:pointer;
}

.menu-list{
display:none;
position:absolute;
top:45px;
left:0;
background:var(--blanco);
list-style:none;
border:1px solid var(--gris-claro);
width:170px;
}

.menu-list.active{
display:block;
}

.menu-list li{
border-bottom:1px solid var(--gris-claro);
}

.menu-list li:last-child{
border:none;
}

.menu-list a{
display:block;
padding:12px;
text-decoration:none;
color:var(--gris-oscuro);
}

.menu-list a:hover{
background:var(--gris-claro);
}



.hero{
text-align:center;
padding:100px 20px;
}

.hero h2{
font-size:42px;
margin-bottom:10px;
}

.hero p{
color:var(--gris-oscuro);
margin-bottom:40px;
}


.imagenes{
width:100%;
display:flex;
margin:40px 0;
}

.imagenes img{
width:33.333%;
height:260px;
object-fit:cover;
display:block;
}



.btn-presupuesto{
padding:14px 32px;
border:none;
background:var(--madera);
color:var(--blanco);
font-size:16px;
cursor:pointer;
}

.btn-presupuesto:hover{
background:#6f472c;
}


.servicios{
padding:100px 20px;
text-align:center;
}

.servicios h2{
font-size:38px;
margin-bottom:10px;
}

.subtitulo{
color:var(--gris-oscuro);
margin-bottom:60px;
}

.servicios-grid{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
gap:30px;
}

.servicio-card{
background:var(--blanco);
padding:30px;
border:1px solid var(--gris-claro);
transition:0.3s;
cursor: pointer;
}

.servicio-card:hover{
border-color:var(--madera);
transform:translateY(-5px);
}

.servicio-card h3{
margin-bottom:10px;
color:var(--madera);
}

.servicio-link{
text-decoration:none;
color:inherit;
display:block;
}


.cotizacion{
padding:100px 20px;
text-align:center;
}

.form-cotizacion{
max-width:500px;
margin:50px auto;
display:flex;
flex-direction:column;
gap:15px;
}

.form-cotizacion input,
.form-cotizacion textarea,
.form-cotizacion select{
padding:12px;
border:1px solid var(--gris-claro);
font-size:15px;
}

.form-cotizacion textarea{
min-height:120px;
resize:vertical;
}

.form-cotizacion button{
padding:14px;
border:none;
background:var(--madera);
color:var(--blanco);
font-size:16px;
cursor:pointer;
transition:0.3s;
}

.form-cotizacion button:hover{
background:#6f472c;
}

@media (max-width: 768px){

header{
padding:15px 20px;
}

header h1{
font-size:22px;
}

.hero h2{
font-size:28px;
}

.hero{
padding:60px 20px;
}


.imagenes{
flex-direction:column;
}

.imagenes img{
width:100%;
height:200px;
}


.servicios-grid{
grid-template-columns:1fr;
}

}

.btn-servicios{
display:inline-block;
margin-top:25px;
padding:14px 32px;
background:var(--madera);
color:var(--blanco);
text-decoration:none;
font-size:16px;
transition:0.3s;
}

.btn-servicios:hover{
background:#6f472c;
}

.mapa {
    text-align: center;
    padding: 60px 20px;
}

.mapa-container {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
}

.pagina{
    text-align:center;
    padding:60px 20px;
}

.proceso{
    display:flex;
    gap:30px;
    justify-content:center;
    flex-wrap:wrap;
    padding:40px 20px;
}

.paso{
    background:#f5f5f5;
    padding:25px;
    border-radius:8px;
    width:250px;
}

.incluye{
    text-align:center;
    padding:40px;
}

.incluye ul{
    list-style:none;
    padding:0;
}

.incluye li{
    margin:10px 0;
}

.contacto{
    text-align:center;
    padding:50px;
}

.boton{
    background:#2c2c2c;
    color:white;
    padding:15px 30px;
    text-decoration:none;
    border-radius:6px;
}

.btn-volver{
display:inline-block;
margin-bottom:20px;
padding:8px 16px;
background:var(--gris-claro);
color:var(--negro);
text-decoration:none;
font-size:14px;
border-radius:4px;
transition:0.2s;
}

.btn-volver:hover{
background:var(--madera);
color:var(--blanco);
}

.footer{
background:var(--negro);
color:var(--blanco);
padding:40px 20px;
text-align:center;
margin-top:80px;
}

.footer-contenido{
margin-bottom:20px;
}

.footer h3{
color:var(--madera);
margin-bottom:10px;
}

.footer p{
margin:5px 0;
color:#ccc;
}

.copyright{
font-size:14px;
color:#888;
}

.whatsapp-btn{
position:fixed;
bottom:25px;
right:25px;
background:#25D366;
color:white;
font-size:26px;
width:55px;
height:55px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
text-decoration:none;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
transition:0.3s;
}

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

html{
scroll-behavior:smooth;
}


.galeria{
max-width:1200px;
margin:auto;
padding:40px 20px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.galeria img{
width:100%;
height:220px;
object-fit:cover;
border-radius:6px;
transition:0.3s;
cursor:pointer;
}

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

.btn-trabajos{
display:inline-block;
margin-top:15px;
margin-left:10px;
padding:14px 32px;
background:var(--gris-claro);
color:var(--negro);
text-decoration:none;
font-size:16px;
transition:0.3s;
}

.btn-trabajos:hover{
background:var(--madera);
color:var(--blanco);
}


.media-grid{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
margin-top:20px;
}

.media-grid img,
.media-grid video{
width:300px;
cursor:pointer;
border-radius:6px;
transition:0.3s;
}

.media-grid img:hover,
.media-grid video:hover{
transform:scale(1.05);
}

#lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
display:none;
justify-content:center;
align-items:center;
z-index:999;
}

#lightbox img,
#lightbox video{
max-width:90%;
max-height:90%;
}

#cerrar{
position:absolute;
top:30px;
right:40px;
color:white;
font-size:40px;
cursor:pointer;
}

.galeria h2{
grid-column:1 / -1;
text-align:center;
margin-bottom:20px;
}

.media-grid{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
margin-top:20px;
}

.media-grid video{
width:320px;
border-radius:6px;
cursor:pointer;
}

.portfolio{
max-width:1200px;
margin:auto;
padding:40px 20px;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
}

.portfolio img,
.portfolio video{
width:100%;
height:240px;
object-fit:cover;
border-radius:10px;
cursor:pointer;
transition:0.3s;
}

.portfolio img:hover,
.portfolio video:hover{
transform:scale(1.03);
box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

.destacados img{
height:300px;
}

.logo{
text-decoration:none;
color:var(--madera);
font-size:28px;
font-weight:bold;
.logo,
.logo:visited,
.logo:active{
text-decoration:none;
color:var(--madera);
font-size:28px;
font-weight:bold;
}
}