/* =====================================
        MOQUEGUA CULTURAL
        DISEÑO PROFESIONAL
===================================== */

/* RESET */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{
font-size:16px;
scroll-behavior:smooth;

}

body{

font-family:Arial, Helvetica, sans-serif;

background:#fffaf3;

color:#333;

line-height:1.7;

}

/* CONTENEDOR */

.contenedor{

width:90%;

max-width:75rem;

margin:auto;

}

/* SECCIONES */
.seccion{

padding:4rem 0;

}

.seccion-gris{

padding:4rem 0;

background:#f3eadb;

}


.centrado{

text-align:center;

}

/* ==========================
        NAVEGACIÓN
========================== */
.barra-navegacion{

background:#4a260e;

padding:1rem 0;

box-shadow:0 0.3rem 1rem rgba(0,0,0,.2);

}

.barra-navegacion .contenedor{


display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

}

.logo img{

width:8rem;

transition:.3s;

}
.logo img:hover{

transform:scale(1.05);

}

.menu{

display:flex;

gap:0.7rem;

flex-wrap:wrap;

}

.enlace-menu{

color:white;

text-decoration:none;

padding:.7rem 1.2rem;

border-radius:2rem;

transition:.3s;

font-weight:bold;


}

.enlace-menu:hover,
.enlace-menu.activo{


background:#d89b2b;

color:white;

}


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

.hero{


min-height:35rem;

display:flex;

align-items:center;


background:

linear-gradient(

rgba(0,0,0,.60),

rgba(0,0,0,.60)

),

url("imagenes/banner.jpg");

background-size:cover;

background-position:center;

}

.titulo-principal{


font-size:3.5rem;

color:white;

font-weight:900;

text-transform:uppercase;


}

.texto-destacado{

color:#f5e8d0;

font-size:1.3rem;

max-width:45rem;

margin:1.5rem auto;


}

/* ==========================
        BOTONES
========================== */
.boton{
display:inline-block;
background:#c48622;
color:white;
text-decoration:none;
padding:.9rem 2rem;
border-radius:2rem;
margin:.5rem;
font-weight:bold;
transition:.3s;

}

.boton:hover{
background:#8f5c12;
transform:translateY(-0.2rem);

}

.boton-secundario{


background:transparent;

border:.1rem solid white;


}

/* ==========================
        TEXTOS
========================== */
.titulo-seccion{


font-size:2.4rem;


color:#5b3215;


margin-bottom:1.5rem;


font-weight:bold;


}

.titulo-tarjeta{


font-size:1.4rem;


color:#5b3215;


margin-bottom:1rem;


}



.texto-normal{


font-size:1rem;


color:#555;


margin-bottom:1rem;


}

/* ==========================
        TARJETAS
========================== */


.fila{


display:flex;


justify-content:center;


align-items:flex-start;


flex-wrap:wrap;


gap:2rem;

}


.columna-tercio{


width:30%;


background:white;


padding:2rem;


border-radius:1rem;


box-shadow:0 .5rem 1.5rem rgba(0,0,0,.12);


transition:.3s;


}


.columna-tercio:hover{


transform:translateY(-.5rem);


box-shadow:0 1rem 2rem rgba(0,0,0,.18);


}


/* ==========================
        IMAGENES
========================== */


.imagen-fluida{


width:100%;


height:15rem;


object-fit:cover;


border-radius:1rem;


margin-bottom:1rem;


}




.imagen-fluida:hover{


transform:scale(1.03);


transition:.3s;


}

/* ==========================
        VIDEOS
========================== */

.video{


width:100%;


height:20rem;


object-fit:cover;


border-radius:1rem;


}


/* ==========================
        FORMULARIO
========================== */


.campo{


width:90%;

padding:1rem;


margin-bottom:1rem;


border:.1rem solid #ddd;


border-radius:.8rem;


font-size:1rem;


background:white;


}



.campo:focus{


border-color:#c48622;


outline:none;


}



.mensaje{


height:8rem;


resize:none;


}







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


.pie-pagina{


background:#21140c;


padding:3rem 0;


border-top:.3rem solid #c48622;


}



.pie-pagina .columna-tercio{


background:transparent;

box-shadow:none;


}



.pie-pagina .titulo-tarjeta{


color:#f5d28a;


}



.pie-pagina .texto-normal{


color:#ddd;


}



.pie-pagina a{


color:#ddd;


text-decoration:none;


}



.pie-pagina a:hover{


color:#d89b2b;


}





.pie-pagina .centrado{


margin-top:2rem;


border-top:.1rem solid #555;


padding-top:1.5rem;


}








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


@media(max-width:56rem){



.barra-navegacion .contenedor{


flex-direction:column;


}



.menu{


justify-content:center;


margin-top:1rem;


}



.columna-tercio{


width:90%;


}



.titulo-principal{


font-size:2.3rem;


}



}