/* Colores basados en la imagen: Verde #84a444 y Gris oscuro */
body {
    font-family: Arial, sans-serif;
    margin: 0; padding: 0;
    line-height: 1.6;
    background-color: #f4f4f4;
}

.container { width: 80%; margin: auto; overflow: hidden; }

/* Header */
header {
    background: #333;
    color: #fff;
    padding-top: 30px;
    min-height: 70px;
    border-bottom: #84a444 3px solid;
}

header a { color: #fff; text-decoration: none; font-size: 16px; }
header li { float: left; display: inline; padding: 0 20px 0 20px; }
header #branding { float: left; }
header #branding h1 { margin: 0; color: #84a444; }
header nav { float: right; margin-top: 10px; }

/* Hero Section */
#hero {
    min-height: 400px;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1454165833767-027ffea9e778?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
    background-size: cover;
    background-position: center;
    text-align: center;
    color: #fff;
}

#hero h2 { margin-top: 100px; font-size: 45px; }
.button { height:38px; background:#84a444; border:0; padding-left: 20px; padding-right:20px; color:#fff; cursor:pointer; text-decoration: none; border-radius: 5px; }

/* Servicios */
#servicios { padding: 40px 0; background: #fff; text-align: center; }
.box-container { display: flex; flex-wrap: wrap; justify-content: space-around; }
.box { flex: 1; padding: 20px; min-width: 250px; }

/* Formulario */
#contacto { padding: 40px 0; background: #e8e8e8; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
input, textarea { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; }
textarea { height: 100px; }

/* Responsive */
@media(max-width: 768px) {
    header #branding, header nav, header li, .contact-grid {
        float: none; text-align: center; width: 100%; grid-template-columns: 1fr;
    }
}