body {
  background-color: #f8f9fa; /* Color de fondo claro */
  font-family: 'Segoe UI', sans-serif; /* Fuente legible y moderna */
  line-height: 1.6; /* Altura de línea para mejor lectura */
}

/* Contenedor del banner principal */
.banner-servicios {
  width: 100%;     /* Ocupa todo el ancho */
  height: 400px;   /* Altura fija */
  overflow: hidden; /* Oculta cualquier contenido que sobresalga */
}

/* Imagen dentro del banner */
.banner-servicios .banner-img {
  width: 100%;      /* Ajusta ancho al contenedor */
  height: 100%;     /* Ajusta alto al contenedor */
  object-fit: cover; /* La imagen se recorta para cubrir el área sin deformarse */
}

/* Contenedor principal de los servicios */
.services-section {
  margin: auto;      /* Centra horizontalmente */
  text-align: center; /* Texto centrado */
}

/* Título principal */
.services-section h1 {
  color: #003566;  /* Color azul oscuro */
  margin-bottom: 40px; /* Espacio debajo del título */
}

/* Grid para tarjetas de servicios */
.services-grid {
  display: flex;         /* Usamos flexbox para distribución */
  flex-wrap: wrap;       /* Permite que las tarjetas bajen a la siguiente línea */
  gap: 20px;             /* Espacio entre tarjetas */
  justify-content: center; /* Centra las tarjetas dentro del contenedor */
}

/* Tarjeta individual de servicio */
.service-box {
  background: white;               /* Fondo blanco */
  border: 1px solid #ccc;          /* Borde gris claro */
  border-radius: 10px;             /* Bordes redondeados */
  padding: 30px 20px;              /* Espaciado interno */
  width: 300px;                    /* Ancho fijo */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Sombra suave */
  transition: transform 0.3s ease; /* Transición para animación */
  justify-content: center;
}

/* Imagen dentro de cada tarjeta */
.service-box img {
  width: 100px;  /* Ancho fijo */
  height: 100px; /* Alto fijo */
}

/* Efecto hover para la tarjeta */
.service-box:hover {
  transform: translateY(-5px); /* Eleva la tarjeta 5px */
  border-color: #0077B6;       /* Cambia el borde a azul más vivo */
}

/* Título de cada tarjeta */
.service-box h2 {
  color: #03045E;       /* Azul oscuro */
  margin-bottom: 10px;  /* Separación debajo */
}

/* Enlaces dentro de las tarjetas */
.service-box a {
  display: inline-block;
  margin-top: 15px;            /* Espacio arriba */
  background-color: #0077B6;   /* Fondo azul */
  color: white;                /* Texto blanco */
  padding: 8px 16px;           /* Relleno interno */
  border-radius: 5px;          /* Bordes redondeados */
  transition: background-color 0.3s ease; /* Transición suave */
}

/* Hover sobre enlaces */
.service-box a:hover {
  background-color: #03045E; /* Fondo cambia a azul más oscuro */
}

/* SECCIÓN DE PREGUNTAS FRECUENTES */

.faq-section {
  padding: 60px 20px;        /* Relleno arriba, abajo y horizontal */
  background-color: #ffffff; /* Fondo blanco */
  border-top: 2px solid #0077B6; /* Línea azul arriba */
}

.faq-section h2 {
  text-align: center;
  color: #03045E;     /* Azul oscuro */
  margin-bottom: 30px; /* Espacio debajo */
}

/* Grid para preguntas */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Columnas responsivas */
  gap: 20px;                  /* Espacio entre preguntas */
  max-width: 1000px;          /* Máximo ancho */
  margin: auto;               /* Centrar */
}

/* Contenedor individual para cada pregunta */
.faq-item {
  background: white;
  border: 1px solid #dce1e6; /* Borde gris muy claro */
  border-radius: 10px;
  overflow: hidden;           /* Oculta contenido fuera del borde */
  transition: all 0.3s ease;  /* Transición suave para cambios */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Sombra suave */
}

/* Botón que contiene la pregunta */
.faq-question {
  display: flex;
  justify-content: space-between; /* Pregunta a la izquierda, icono a la derecha */
  align-items: center;
  padding: 18px 20px;
  width: 100%;
  background: transparent;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  color: #03045E; /* Texto azul oscuro */
  cursor: pointer; /* Cambia cursor para indicar clic */
}

/* Respuesta oculta por defecto */
.faq-answer {
  padding: 0 20px;       /* Solo padding horizontal */
  max-height: 0;         /* Altura cero para ocultar */
  overflow: hidden;      /* Oculta contenido extra */
  background: #f9f9f9;   /* Fondo gris claro */
  transition: max-height 0.3s ease, padding 0.3s ease; /* Animación */
  color: #03045E;
}

/* Cuando la pregunta está activa (respondida) */
.faq-item.active .faq-answer {
  padding: 15px 20px;  /* Relleno visible */
  max-height: 200px;   /* Altura suficiente para mostrar contenido */
}

/* Icono gira al estar activo */
.faq-item.active .icon-toggle {
  transform: rotate(180deg);
}

/* Estilo para enlaces dentro de respuestas */
.faq-answer a {
  color: #0077B6;
  text-decoration: underline;
}

/* BANNER DE ATENCIÓN*/

.banner-atencion {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

/* Imagen dentro del banner de atención */
.banner-atencion .bannerA-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Capa de texto superpuesta al banner */
.banner-overlay {
  position: absolute;
  top: 50%;  /* Centra verticalmente */
  left: 50%; /* Centra horizontalmente */
  transform: translate(-50%, -50%); /* Ajuste fino para centrar */
  text-align: center;
  color: white; /* Texto blanco para contraste */
}

.banner-overlay h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}

.banner-overlay p {
  font-size: 1.2rem;
}

/* Botón dentro del banner */
.btn-banner {
  background: #0077B6;
  color: white;
  padding: 12px 24px;
  font-size: 1rem;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.btn-banner:hover {
  background-color: #03045E;
  color: #ffffff;
}

/*SECCIÓN DE TARJETAS HORIZONTALES*/

.foto-tarjetas {
  padding: 40px 20px;
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

.foto-tarjetas h1 {
  color: #003566;
  margin-bottom: 40px;
}

/* Botón en tarjetas horizontales */
.btn-card {
  margin-top: 10px;
  padding: 8px 16px;
  background: #0077B6;
  font-size: 1rem;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.3s;
}

.btn-card:hover {
  background: #03045E;
  color: white;
}

/* Contenedor de tarjeta horizontal */
.foto-card-horizontal {
  grid-column: span 2;
  display: flex;           /* Usa flexbox para disposición horizontal */
  gap: 20px;               /* Espacio entre imagen y contenido */
  align-items: center;     /* Centra verticalmente */
  background: white;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  height: 380px;           /* Altura fija */
  box-shadow: 0 0 5px rgba(0,0,0,0.1); /* Sombra muy ligera */
}

/* Contenido textual de la tarjeta horizontal */
.contenido-horizontal {
  flex: 1; /* Ocupa el espacio restante */
}

.contenido-horizontal h3 {
  color: #003566;
  margin-bottom: 10px;
}

.contenido-horizontal p {
  margin-bottom: 15px;

}