/* Contenedor principal de todo el bloque de transparencia */
.transparencia-container {
  max-width: 900px;          /* El ancho máximo será de 900px */
  margin: 20px auto;         /* Se centra horizontalmente con auto y agrega margen arriba/abajo */
  padding: 15px;             /* Espaciado interno para que no quede pegado a los bordes */
  font-family: Arial, sans-serif; /* Fuente base del texto */
}

/* Estilo del título principal (h2) */
.transparencia-container h2 {
  text-align: center;        /* Centra el texto */
  margin-bottom: 20px;       /* Espacio debajo del título */
  color: #004080;            /* Azul oscuro institucional */
}

/* Cada ítem del acordeón */
.acordeon .item {
  border: 1px solid #ccc;    /* Borde gris claro alrededor */
  margin-bottom: 8px;        /* Espacio entre los ítems */
  border-radius: 6px;        /* Bordes redondeados */
  overflow: hidden;          /* Oculta contenido que sobresalga del borde redondeado */
}

/* Botón que actúa como título del acordeón */
.acordeon .titulo {
  all: unset;                /* 🔑 resetea todos los estilos por defecto del <button> */
  display: block;            /* lo hacemos bloque para ocupar todo el ancho */
  width: 100%;               /* Ocupa todo el ancho disponible */
  text-align: left;          /* Alinea el texto a la izquierda */
  padding: 12px;             /* Espaciado interno */
  font-size: 16px;           /* Tamaño de fuente del título */
  font-weight: bold;         /* Texto en negrita */
  background: #f5f5f5;       /* Fondo gris claro */
  border: 1px solid #ccc;    /* Borde ligero */
  border-radius: 4px;        /* Bordes suavizados */
  cursor: pointer;           /* Aparece el puntero de mano al pasar */
  transition: background 0.3s; /* Animación suave al cambiar el fondo */
  color: #222;               /* 👈 Texto en gris muy oscuro (casi negro) */
}

/* Hover de títulos acordeón */
.acordeon .titulo:hover {
  background: #d9e6f2;  /* Azul claro */
  color: #003366;       /* Azul oscuro */
}
/* Contenido del acordeón (oculto por defecto) */
.acordeon .contenido {
  display: none;             /* Se oculta hasta que se active con JS */
  padding: 12px;             /* Espaciado interno */
  background: #fff;          /* Fondo blanco */
}

/* Estilo de la lista dentro del contenido */
.acordeon .contenido ul {
  margin: 10px 0;            /* Márgenes arriba y abajo */
  padding-left: 20px;        /* Sangría para las viñetas */
}

/* Cada elemento de la lista */
.acordeon .contenido li {
  margin-bottom: 6px;        /* Espacio entre los ítems de la lista */
}

/* Estilo de los enlaces dentro del acordeón */
.acordeon .contenido a {
  color: #6daff1;            /* Azul institucional */
  text-decoration: none;     /* Sin subrayado */
}

/* Efecto hover de los enlaces */
.acordeon .contenido a:hover {
  text-decoration: underline; /* Subrayado al pasar el mouse */
}

/* Pie de página institucional */
.transparencia-footer {
  text-align: center;        /* Centrado del texto */
  margin-top: 20px;          /* Espacio por encima del footer */
  font-size: 14px;           /* Texto más pequeño */
  color: #666;               /* Gris medio */
}