/* ====== Estilos Generales ====== */
body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif; /* Cambia a la fuente que prefieras */
  background-color: #f8f9fa;         /* Fondo claro y limpio */
  color: #333;                       /* Color de texto base */
}

/* Contenedor principal */
.contenedor-inicial {
  max-width: 1200px; /* Ajusta según tu diseño */
  margin: 0 auto;     /* Centra horizontalmente */
  padding: 2rem 1rem;
}

/* Encabezado: título y descripción */
.contenedor-inicial h1 {
  font-size: 2rem;
  text-align: center;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #212529;      /* Tonalidad oscura limpia y profesional */
}

.contenedor-inicial p {
  font-size: 1rem;
  text-align: center;
  line-height: 1.5;
  max-width: 700px;
  margin: 0.75rem auto 2rem auto;
  color: #555;         /* Gris medio para el texto */
}

/* ====== Sección Equipo ====== */
.container-equipo {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;     /* Centra las secciones en columna */
}

/* ----- Directivos ----- */
.directivos {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.directivos h2 {
  text-align: center;
  font-size: 1.5rem;
  color: #212529;
}

/* Nivel 1: Director General */
.nivel1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Nivel 2: Gerente y Contralor */
.nivel2 {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

/* ----- Técnicos ----- */
.tecnicos {
  display: flex;
  flex-direction: column; /* Para colocar el título y luego las tarjetas */
  gap: 2rem;
  width: 100%;
}

.tecnicos h2 {
  text-align: center;
  font-size: 1.5rem;
  color: #212529;
}

/* Contenedor de las tarjetas de técnicos en una fila */
.tecnicos .fila-tecnicos {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap; /* Permite que se ajusten si no hay espacio */
}

/* ====== Tarjetas de Persona (directivos/técnicos) ====== */
.persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #fff;           /* Fondo blanco */
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 1rem;
  height: 290px;
  width: 250px;                     /* Ajusta el ancho */
  font-size: 0.95rem;
  font-weight: 500;
  color: #444;
  transition: transform 0.3s, box-shadow 0.3s;
}

.persona:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Imagen circular de cada persona */
.persona img {
  width: 120px;             /* Ajusta tamaño de la foto */
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #eee;  /* Borde sutil */
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease;
}

.persona img:hover {
  transform: scale(1.05);
}

.persona h3 {
  margin: 0.5rem 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
}

.persona h4 {
  margin: 0.5rem 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
}

.persona p {
  font-size: 0.9rem;
  color: #666;
}

/* ====== Responsividad ====== */
/* Ajustes para pantallas medianas y grandes */
@media (min-width: 768px) {
  /* Ejemplo de ajuste: las tarjetas pueden reducir altura si lo deseas */
  .persona {
    height: 280px;
  }
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 480px) {
  .persona {
    width: 100%;  /* Ocupa todo el ancho en pantallas muy pequeñas */
    height: auto;
  }
}