/* estilos básicos */
body{
    margin:0;
    font-family: Arial, sans-serif;
    line-height:1.6;
    background:#fff;
    color:#333;
}
header.hero{
    background:url('hero.jpg') center/cover no-repeat;
    height:60vh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 2rem;
    color:#fff;
    animation:fadeIn 2s;
}
header .logo{
    font-size:2rem;
    font-weight:bold;
}
nav ul{
    list-style:none;
    display:flex;
}
nav li{
    margin-left:1rem;
}
nav a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:color .3s;
}
nav a:hover{color:#ff0;}
.section{
    padding:4rem 2rem;
    text-align:center;
}
.service-list{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
.service-item{
    background:#f4f4f4;
    margin:1rem;
    padding:2rem;
    flex:1 1 200px;
    border-radius:8px;
    transition:transform .3s;
}
.service-item:hover{transform:scale(1.05);}
footer{
    background:#333;
    color:#fff;
    padding:1rem;
    text-align:center;
}
.success{color:green;}
.error{color:red;}
.gallery{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1rem;
    margin-top:1rem;
}
.gallery img{
    max-width:150px;
    border-radius:4px;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
}
@keyframes fadeIn{
    from{opacity:0;}
    to{opacity:1;}
}