*{

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

}

body{

font-family:Poppins;
background:#f7f7f7;
color:#333;

}

header{

background:#595959;
color:white;
padding:40px;
text-align:center;

}

.logo{

width:120px;
margin-bottom:20px;

}

header h1{

font-family:'Great Vibes', cursive;
font-size:55px;
margin:15px 0;

}

header p{

font-size:22px;
color:#FFD24D;
font-weight:bold;

}

.texto{

padding:40px;
max-width:900px;
margin:auto;
text-align:center;

}

.texto h2{

margin-bottom:20px;

}

.galeria{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

gap:30px;

padding:40px;

}

.card{

background:white;

border-radius:10px;

overflow:hidden;

box-shadow:0 5px 20px rgba(0,0,0,.15);

transition:.3s;

cursor:pointer;

}

.card:hover{

transform:translateY(-8px);

}

.card img{

width:100%;

display:block;

}


footer{

background:#595959;

color:white;

padding:20px;

text-align:center;

margin-top:50px;

}


/* Modal */

#modal{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

justify-content:center;

align-items:center;

z-index:999;

}

#modal img{

max-width:90%;

max-height:90%;

border-radius:10px;

}

#modal span{

position:absolute;

top:20px;

right:40px;

font-size:60px;

color:white;

cursor:pointer;

}