body{
    background:red;
}
body{
    font-family: Arial, Helvetica, sans-serif;
    background:#fcfbfb;

}

/* ==========================
Titulo / logo
========================== */


h1{
    font-family: "Libre Baskerville", serif;
    font-size: 50px;
    color: rgb(240, 238, 238);
    -webkit-text-stroke: 1.5px black;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    margin-top: 70px;
}

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

header{

    background-image:url("../img/header/HeaderBG3.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    height:250px;


    display: flex;
    flex-direction: column;


    
}

/* ==========================
Barrita nav re picada
========================== */

nav{
    background: #ece9e9;

    height:50px;

    display:flex;
    align-items:center;

    padding-right: 15px;

    margin-top: auto;

}
nav ul{
    list-style: none;

    display: flex;
    gap: 30px;

    margin: 0;
    padding: 0;

    width: 100%;

    justify-content: flex-end;
}
nav a{
    text-decoration:none;

    display:block;

    padding:12px 20px;

    background:#808080;

    color:white;

    border-radius:6px;

}

/* ==========================
Color de los botones al clickear
========================== */

nav a:hover{
    background:#f8f5f5;
}

nav a.activo{

    background:#a19f9f;

}

nav a{
    text-decoration:none;
    display:block;
    padding:12px 20px;
    background:#c5c3c3;
    color:black;
    border-radius:6px;

    transition: background 0.2s ease;
}
/* ==========================
Ocultamiento ocultativo bien ocultoso del submenu de materiales (granitos, cuarzos y marmoles)
========================== */

.submenu{

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    list-style: none;

    margin: 0;

    padding: 10px;

    background: #ece9e9;

    border-radius: 6px;

}
.dropdown{
    position: relative;
}
.submenu li{
    margin: 8px 0;
}

/* ==========================
Pagina de proyectos
========================== */

#proyectos{

padding-right:20px;
padding-left:20px;

}
.tarjeta-proyecto{

    width:80%;

    max-width:1600px;

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

    background:#ece9e9;

    border-radius:10px;

    padding:25px;

}

/* ==========================
Tarjeta de descripciones de foto
========================== */


.contenedor-proyecto{

    display:flex;

    gap:30px;

    align-items:flex-start;

    margin-bottom:40px;

}

.tarjeta-texto{

    width:320px;

    background:#ece9e9;

    border-radius:10px;

    padding:25px;

    display:flex;

    flex-direction:column;
}

.descripcion{

    flex:1;

    color:black;

    padding:20px 0;

}

.descripcion:first-child{

    border-bottom:2px solid #777;

}

/* ==========================
Fotos de la tarjeta proyect
========================== */

.fotos-proyecto{

    display:flex;

    justify-content:space-between;

    gap:20px;

}
.foto{

    flex:1;

    height:320px;

    overflow:hidden;

    border-radius:8px;

}
.foto img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition: opacity 0.3s ease;


}
.controles{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

}
.contador-box{
    background: #b9b8b8;
    color: black;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: bold;
}

/* ==========================
Sistema de ocultamiento de paginas
========================== */

.pagina{

    display:none;

}

#inicio{

    display:block;

}

/* ==========================
Catálogo de materiales
========================== */

.contenedor-materiales{

    display:grid;

    grid-template-columns: repeat(auto-fit, 220px);

    gap:30px;

    padding:30px;

    justify-content: center;

}

.tarjeta-material{

    background:#ece9e9;

    border:1px solid #dbd9d9;

    border-radius:8px;

    padding:15px;

    text-align:center;

}

.tarjeta-material img{

    width:180px;

    height:180px;

    object-fit:cover;

    border-radius:6px;

}

.tarjeta-material h3{

    margin-top:15px;

    color:black;

    font-size:18px;

    font-weight:normal;

}

/* ==========================
Seccion contactanos
========================== */

#contacto{

    width:90%;
    max-width:1000px;

    margin:80px 0 80px 5px;

}

.texto-contacto{

    text-align:left;

    font-size:20px;

    margin-bottom:15px;

}

.bloque-contacto{

    background:#ece9e9;

    border-radius:10px;

    padding:10px;

    margin:10px 0;

    width:400px;

}

.bloque-contacto h3{

    margin-top:0;

}

.bloque-contacto p{

    margin:5px 0;

}

.bloque-contacto input,
.bloque-contacto textarea{

    display:block;

    width:100%;

    margin-bottom:15px;

    box-sizing:border-box;

    font-size:18px;

    padding:5px;
}

.bloque-contacto textarea{

    height:150px;

    resize:vertical;

}

.btn-enviar{

    display:block;

    margin:20px 0  0 5px; 

    font-size:18px;

    padding:5px 15px;

}

/* ==========================
Google Maps
========================== */

.mapa-container{

    display:none;

    margin-top:15px;

}

/* ==========================
Redes sociales
========================== */

.redes-sociales{

    display:flex;

    align-items:center;

    gap:0   px;

    margin-top:10px;

    margin-left:-20px;


}


.redes-sociales img{

    width:100px;

    height:100px;

    object-fit:contain;

    transition:transform 0.2s ease;

}

.redes-sociales img:hover{

    transform:scale(1.1);

    cursor:pointer;

}

.redes-sociales img.linkedin{

    width:58px;
    height:58px;
    margin-right:20px;
    margin-left:20px;

}

/* ==========================
Inicio
========================== */

#inicio{

    width:90%;

    max-width:1000px;

    margin:40px 0 80px 5px;

}

.tarjeta-inicio{

    background:#ece9e9;

    border-radius:10px;

    padding:20px;

    margin:20px 0;

    width:90%;

    max-width:900px;

    box-sizing:border-box;

}

.tarjeta-inicio h3{

    margin-top:0;

    font-size:25px;

}

.tarjeta-inicio p{

    margin:10px 0;

    line-height:1.6;

}

#inicio h2{

    margin-bottom:40px;

    font-size:30px;

}

.nosotros-contenido .tarjeta-inicio{

    margin-left:5px;

}

/* ==========================
Visor de imágenes
========================== */

.visor-imagen{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.9);

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

    z-index:9999;

    opacity:0;

    transition:opacity 0.25s ease;

}

.visor-imagen.activo{

    opacity:1;

}

.visor-imagen img{

    max-width:90vw;
    max-height:82vh;

    border-radius:10px;

    transform:scale(0.92);

    transition:transform 0.25s ease;
}

.visor-imagen.activo img{

    transform:scale(1);

}

.visor-imagen h2{

    color:white;

    font-size:22px;

    margin-bottom:15px;

}



#cerrarVisor{

    position:absolute;

    top:20px;
    right:35px;

    color:white;

    font-size:45px;

    font-weight:bold;

    cursor:pointer;

    transition:0.2s;

}

#cerrarVisor:hover{

    transform:scale(1.15);

}


.aviso-materiales{

    margin-top:40px;

    font-size:16px;

    font-style:italic;

    color:black;

    text-align:center;

}