body {
    /* 🟢 SUGERENCIA 1: Definir variables CSS para los colores principales */
    --color-primario: #0d1b2a; 
    --color-acento: #A97C37;  /* Dorado */
    --color-hover: #8C1C2A; 

    font-family: Arial, sans-serif;
    margin: 0;
    background: #f9f9f9;
    color: var(--color-primario);
}

section.servicios {
    text-align: center;
    padding: 60px 20px;
}

section.servicios h2 {
    font-size: 2.2rem;
    margin-bottom: 10px;
    color: var(--color-primario);
}

section.servicios p {
    margin-bottom: 40px;
    color: #333; /* Mantener un gris oscuro legible */
}

.grid-servicios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.servicio {
    background: var(--color-primario); /* Usando variable */
    color: #fff;
    padding: 30px 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.servicio:hover {
    background: var(--color-hover); /* Usando variable */
    transform: translateY(-5px);
}

.servicio svg {
    /* 🟢 SUGERENCIA 2: Aumentar ligeramente el tamaño del icono para impacto visual */
    width: 60px;       
    height: 60px;
    margin-bottom: 15px;
    fill: var(--color-acento); /* Usando variable (Dorado) */
    transition: fill 0.3s ease;
}

.servicio:hover svg {
    fill: #fff;
}

.servicio h3 {
    font-size: 1rem;
    margin: 0;
    font-weight: 600;
}