body {
    font-family: 'Georgia', serif; /* Una letra con remates, más clásica y seria */
    margin: 0;
    color: #2c3e50;
    line-height: 1.8;
}

header {
    background: #0a192f;
    color: #e6f1ff;
    padding: 15px 5%; /* El primer número (10px) es el espacio arriba y abajo */
    border-bottom: 2px solid #c5a059;
    display: flex;
    align-items: center; /* Esto centra los enlaces del menú con el logo grande */
<style>
    html { scroll-behavior: smooth; }
@media (max-width: 768px) {
	section, div {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        padding-left: 5% !important;  /* Margen uniforme a la izquierda */
        padding-right: 5% !important; /* Margen uniforme a la derecha */
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden;
	}
        header {
            flex-direction: column; /* Pone el logo arriba y el menú abajo */
            padding: 10px 2% !important;
            width: 96% !important;
            position: static !important; /* Evita que tape contenido en pantallas pequeñas */
        }

        nav ul {
            flex-wrap: wrap; /* Permite que los botones salten de línea si no caben */
            justify-content: center;
            gap: 10px !important;
            margin-top: 15px;
        }

        nav ul li a {
            font-size: 0.8rem !important; /* Letra un poco más pequeña */
            padding: 5px 10px !important;
        }
    </div>
</style>
}

.logo img {
    height: 100px; /* Sube este número hasta que te guste el tamaño */
    width: auto;   /* Esto evita que el logo se estire o se vea raro */
    display: block;
    margin: 10px 0; /* Esto le da un poco de "aire" arriba y abajo */
}

nav {
    display: flex;             /* Activa el modo "fila" */
    justify-content: space-between; /* Empuja el logo a la izquierda y el menú a la derecha */
    align-items: center;       /* Centra verticalmente el texto con el logo */
    width: 100%;
}

nav ul {
    display: flex;             /* Pone "Servicios" y "Contacto" uno al lado del otro */
    list-style: none;          /* Quita los puntos negros de la lista */
    margin: 0;
    padding: 0;
}

nav ul li {
    margin-left: 30px;         /* Da espacio horizontal entre Servicios y Contacto */
}

nav a {
    text-decoration: none;
    color: #e6f1ff;            /* Color crema/blanco para el texto */
    font-weight: bold;
    font-family: 'Helvetica', sans-serif; /* Fuente limpia para el menú */
    transition: 0.3s;
}

nav a:hover {
    color: #c5a059;            /* Cambia a dorado cuando pasas el ratón */
.hero {
    background: #f4f4f4; /* Un gris muy suave y limpio */
    color: #0a192f;     /* Texto azul noche */
    padding: 100px 10%;
    text-align: center;
}

.hero h1 { font-size: 3rem; margin-bottom: 20px; }

.btn {
    background: #c5a059;
    color: #0a192f;
    padding: 15px 35px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: 0.3s;
}

.btn:hover { background: #dfbc7a; }

.grid {
    display: flex;
    justify-content: space-around;
    padding: 60px 5%;
    background: #f9f9f9;
    gap: 30px;
}

.card {
    background: white;
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-top: 5px solid #c5a059;
}

footer {
    background: #0a192f;
    color: #8892b0;
    text-align: center;
    padding: 30px;
}
/* Asegura que las tarjetas de servicios se vean bien en su nuevo contenedor vertical */
#servicios .card-premium {
    text-align: left; /* Alineación a la izquierda dentro de la tarjeta */
    flex-direction: row; /* Icono y texto uno al lado del otro */
    gap: 20px;
    padding: 30px;
}

#servicios .icon-circle {
    margin-bottom: 0; /* Elimina el margen inferior anterior */
}