/* Integración de fuentes Gotham y Nimbus Sans */
@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham.ttf') format('truetype'),
       url('fonts/GothamLight.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nimbus Sans';
  src: url('fonts/NimbusSans.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Variables de color */
:root {
  --primary: #022340;
  --secondary: #022859;
  --accent: #f2b90a;
  --light: #e2e2e2;
  --white: #ffffff;
  --black: #000000;
}

/* Estilos globales con las fuentes de marca */
body {
  font-family: 'Gotham', 'Nimbus Sans', Arial, sans-serif;
  background-color: var(--white);
  color: var(--black);
  line-height: 1.6;
  margin: 0;
  
}
a {
  text-decoration: none;
  color: inherit;
}

/* Estilos para el Header */
header {
  background-color: var(--white);
  color: var(--primary);
  position: fixed; /* Fijo en la parte superior */
  top: 0;
  left: 0;
  width: 100%; /* Ocupa todo el ancho */
  z-index: 1000; /* Asegura que esté siempre encima */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 5px 5px; /* Espaciado interno reducido para hacerlo compacto */
}

.nav-container {
  display: flex;
  align-items: center; /* Centra verticalmente logo y menú */
  justify-content: space-between; /* Ubica logo a la izquierda y menú a la derecha */
  margin-right: 10px;
  padding-bottom: 5px;
  box-shadow: 0 5px 5px -2px var(--accent);

}

/* Logotipo */
.logo {
  width: 150px; /* Reduce tamaño del logotipo */
  height: auto;
  top: 0px;
  border-radius: 5px; /* Bordes redondeados */
  margin-left: 10px; /* Espacio entre logo y menú */
}

/* Menú */
nav ul {
  list-style: none; /* Quita los puntos de las listas */
  padding: 0;
  margin: 0;
  display: flex; /* Menú horizontal */
  gap: 10px; /* Espaciado entre los enlaces */
}

nav ul li a {
  font-family: 'Nimbus Sans', sans-serif;
  color: var(--black);
  text-decoration: none; /* Quita el subrayado */
  padding: 5px 10px; /* Espaciado interno reducido */
  font-weight: bold;
  border-radius: 4px; /* Bordes redondeados */
  transition: background-color 0.3s; /* Suave transición al hover */
}

nav ul li a:hover {
  background-color: var(--accent);
  color: var(--white);
}

/* Sección de Servicios */
/* Estilos para el Content */
.content {
  margin-top: calc(60px + 5px); /* Espaciado: altura del header + 5px */
  padding: 10px; /* Espaciado interno opcional */
}

.services {
  padding: 10px;
}
.service {
  margin-bottom: 30px;
  text-align: center;
}
.service img {
  width: 100%; /* Se adapta al ancho de la pantalla */
  max-height: 400px; /* Opcional: define una altura máxima */
  object-fit: cover; /* Asegura que las imágenes mantengan proporción */
  border-radius: 10px;
  margin-bottom: 5px;
}
.service h2 {
  color: var(--primary);
  margin: 0px 0;
}
.service p {
  color: var(--black);
}

/* Footer */
footer {
  background-color: var(--primary);
  color: var(--light);
  text-align: center;
  padding: 15px;
}