body {
    font-family: Arial, sans-serif; /* Fuente principal */
    margin: 0; /* Elimina márgenes por defecto */
    padding: 0; /* Elimina relleno por defecto */
}

/* Estilos para el encabezado fijo */
header {
    background: #333; /* Fondo oscuro igual al pie de página */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Sombra sutil */
    position: fixed; /* Fijo en la parte superior */
    top: 0;
    width: 100%;
    z-index: 100; /* Por encima del contenido */
}

/* Barra de navegación con flexbox */
.navbar {
    display: flex; /* Usa flexbox para alinear elementos */
    align-items: center; /* Centra verticalmente */
    justify-content: flex-start; /* Elementos alineados a la izquierda */
    height: 70px; /* Altura de la barra */
    padding: 0 0 0 24px; /* Espacio solo a la izquierda */
    max-width: 100vw; /* No sobrepasa el ancho de la ventana */
}

/* Logo alineado a la izquierda */
.logo {
    margin-right: 40px; /* Espacio a la derecha del logo */
    display: flex;
    align-items: center;
}

/* Aumenta el tamaño del logo */
.logo img {
    height: 64px; /* Aumenta el tamaño del logo */
    width: auto;  /* Mantiene la proporción */
}

/* Menú de navegación centrado */
nav {
    flex: 1; /* Ocupa el espacio restante */
    display: flex;
    justify-content: center; /* Centra el menú */
}

/* Lista de opciones del menú */
nav ul {
    display: flex; /* Opciones en línea */
    gap: 2rem; /* Espacio entre opciones */
    list-style: none; /* Sin viñetas */
    margin: 0;
    padding: 0;
    align-items: center;
}

/* Enlaces del menú */
nav ul li a {
    text-decoration: none; /* Sin subrayado */
    color: #fff; /* Texto blanco */
    font-weight: 500; /* Negrita media */
    font-size: 1.1rem; /* Tamaño de fuente */
    transition: color 0.2s; /* Transición suave al pasar el mouse */
}

/* Efecto hover en los enlaces del menú */
nav ul li a:hover {

    color: #00b4d8; /* Azul moderno al pasar el mouse */
}

/* Espacio superior para que el contenido no quede oculto tras el header fijo */
main {
    margin-top: 90px;
}

/* Pie de página */
footer {
    background-color: #333; /* Fondo oscuro */
    color: white; /* Texto blanco */
    text-align: center; /* Centrado */
    padding: 10px 0; /* Espaciado vertical */
    position: relative;
    bottom: 0;
    width: 100%;
}

/* Estilos para cada servicio */
.service {
    margin: 20px 0; /* Espacio vertical entre servicios */
    text-align: center; /* Centra el contenido */
}

/* Imagen de cada servicio */
.service img {
    max-width: 100%; /* Imagen responsiva */
    height: auto;
    margin: 10px 0;
}