/* --- Estilos Generales --- */
body {
  margin: 0; /* Elimina márgenes por defecto */
  font-family: 'Roboto', sans-serif; /* Fuente principal */
  background-color: #f8f9fa; /* Color de fondo ligeramente gris */
  color: #343a40; /* Color de texto principal oscuro */
  line-height: 1.6; /* Altura de línea para mejor legibilidad */
}

/* --- Encabezado --- */
header {
  background-color: #005792; /* Azul corporativo */
  color: white; /* Texto blanco */
  padding: 3rem 1rem; /* Relleno superior/inferior y lateral */
  text-align: center; /* Texto centrado */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

header h1 {
  margin: 0 0 0.5rem 0; /* Margen inferior */
  font-size: 2.8rem; /* Tamaño de fuente grande */
  font-weight: 700; /* Negrita */
}

header p {
  margin: 0;
  font-size: 1.1rem; /* Tamaño de fuente para el subtítulo */
  opacity: 0.9; /* Ligera transparencia */
}

/* --- Contenedor Principal --- */
.container {
  max-width: 1100px; /* Ancho máximo del contenido */
  margin: 2.5rem auto; /* Margen superior/inferior y centrado horizontal */
  padding: 0 1.5rem; /* Relleno lateral */
}

/* --- Estilos de Sección --- */
.section {
  margin-bottom: 3rem; /* Espacio debajo de cada sección */
  padding: 2rem; /* Relleno interno */
  background-color: #ffffff; /* Fondo blanco para las secciones */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Sombra suave */
}

.section h2 {
  color: #005792; /* Color azul para los títulos de sección */
  margin-top: 0; /* Elimina margen superior por defecto */
  margin-bottom: 1.5rem; /* Espacio debajo del título */
  border-bottom: 2px solid #e9ecef; /* Línea divisoria sutil */
  padding-bottom: 0.5rem; /* Espacio debajo de la línea */
}

/* --- Sección de Servicios Específicos --- */
.services-section h2 {
    text-align: center; /* Centrar título de servicios */
}

.services-section > p { /* Párrafo introductorio de servicios */
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: #555;
}

.service-image-container {
    text-align: center; /* Centrar la imagen */
    margin-bottom: 2.5rem; /* Espacio debajo de la imagen */
}

.service-image {
    max-width: 80%; /* Hacer la imagen responsive */
    height: auto; /* Mantener proporción */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra para destacar */
}


/* Estilos para la lista de definición de servicios */
.service-list dt { /* Término (Nombre del servicio) */
  font-weight: 700; /* Negrita */
  color: #004a7c; /* Azul un poco más oscuro */
  margin-top: 1.5rem; /* Espacio antes de cada servicio */
  font-size: 1.2rem; /* Tamaño de fuente ligeramente mayor */
}

.service-list dt::before {
    content: "✓ "; /* Añadir un check antes del nombre */
    color: #28a745; /* Color verde para el check */
    margin-right: 8px;
}


.service-list dd { /* Definición (Descripción del servicio) */
  margin-left: 1.8rem; /* Indentación de la descripción */
  margin-bottom: 1rem; /* Espacio debajo de la descripción */
  color: #495057; /* Color de texto gris oscuro */
  padding-left: 10px; /* Espacio adicional a la izquierda */
  border-left: 3px solid #dee2e6; /* Línea vertical decorativa */
}

/* --- Sección de Testimonios --- */
.testimonios {
  background-color: #eef3f7; /* Fondo azul claro */
  border-left: 5px solid #005792; /* Borde izquierdo distintivo */
}

.testimonios p {
  font-style: italic; /* Texto en cursiva */
  margin-bottom: 1rem; /* Espacio entre testimonios */
  padding-left: 1rem; /* Espacio izquierdo */
  position: relative;
}

.testimonios p::before {
  content: '“'; /* Comilla de apertura */
  font-size: 2rem;
  color: #005792;
  position: absolute;
  left: -5px;
  top: -5px;
}

.testimonios p:last-child {
  margin-bottom: 0; /* Elimina margen inferior del último testimonio */
}

/* --- Sección de Contacto --- */
#contacto p {
  margin-bottom: 0.8rem; /* Espacio entre párrafos de contacto */
}
#contacto a {
    color: #005792; /* Color enlace */
    text-decoration: none; /* Sin subrayado */
}
#contacto a:hover {
    text-decoration: underline; /* Subrayado al pasar el mouse */
}

/* --- Botón Principal --- */
.btn {
  display: inline-block; /* Comportamiento en línea pero con propiedades de bloque */
  padding: 0.8rem 1.8rem; /* Relleno interno */
  background-color: #FFA500; /* Color naranja */
  color: white; /* Texto blanco */
  text-decoration: none; /* Sin subrayado */
  border-radius: 5px; /* Bordes redondeados */
  margin-top: 1rem; /* Espacio superior */
  font-weight: 700; /* Negrita */
  text-transform: uppercase; /* Mayúsculas */
  letter-spacing: 0.5px; /* Espaciado entre letras */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
}

.btn:hover {
  background-color: #e69500; /* Naranja más oscuro al pasar el mouse */
  transform: translateY(-2px); /* Efecto de elevación leve */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra al pasar el mouse */
}

/* --- Pie de Página --- */
footer {
  background-color: #003f63; /* Azul más oscuro */
  color: #e9ecef; /* Texto gris claro */
  text-align: center; /* Texto centrado */
  padding: 1.5rem 1rem; /* Relleno */
  margin-top: 3rem; /* Espacio superior */
  font-size: 0.9rem; /* Tamaño de fuente pequeño */
}

footer p {
  margin: 0.3rem 0; /* Margen pequeño entre párrafos del footer */
}

/* --- Mejoras Responsivas (Ejemplo Básico) --- */
@media (max-width: 768px) {
  header h1 {
    font-size: 2.2rem; /* Reducir tamaño de título en móviles */
  }

  .container {
    padding: 0 1rem; /* Menos padding lateral en móviles */
  }

  .section {
    padding: 1.5rem; /* Menos padding en secciones */
  }

  .service-image {
      max-width: 95%; /* Permitir que la imagen ocupe más ancho */
  }

  .btn {
    padding: 0.7rem 1.5rem; /* Botón ligeramente más pequeño */
    font-size: 0.9rem;
  }
}