.metodologia_consumidores{
  background-color: #9cc5a1e6;
  padding: 10px;
  border-radius: 10px;
}

.encabezado_consumidores {
  background-image: url(https://i.imgur.com/PcEWMbm.jpg);
  background-size: cover;
  background-position: center;
  padding: 20px;
  width: 100vw; /* Ajusta el ancho a 100% del viewport */
  height: 70px; /* Altura fija de 400px */
  position: relative; /* Asegúrate de que el elemento se coloca relativo a su posición normal */
  left: 50%; /* Mueve el elemento al 50% a la derecha de su posición normal */
  right: 50%; /* Mueve el elemento al 50% a la izquierda de su posición normal */
  transform: translateX(-50%); /* Desplaza el elemento un 50% hacia la izquierda, centrándolo efectivamente */
}

.TituloPrincipal{
  font-size: 1.5rem;
  margin-top: 20px;
  font-weight: bold;
  font-family: 'Roboto';
}

.emoji-bullets {
  list-style-type: none; /* Eliminar las viñetas predeterminadas */
  padding-left: 0; /* Eliminar el padding izquierdo predeterminado */
}

.emoji-bullets li {
  margin-left: 40px; /* Añadir espacio a la izquierda de los ítems */
  position: relative; /* Permitir posicionamiento absoluto del emoji */
  padding-bottom: 10px;
}

.special-bullet::before {
  content: "";
  position: absolute; /* Posicionamiento absoluto de la imagen */
  left: -0px; /* Posición de la imagen a la izquierda del texto */
  margin-top: 10px;
  width: 30px; /* Ancho de la imagen */
  height: 30px; /* Alto de la imagen */
  background-image: url('https://i.imgur.com/O7eGMYZ.png'); /* URL de la imagen */
  background-size: cover; /* Ajustar el tamaño de la imagen */
}

.emoji-bullets li::before {
  position: absolute; /* Posicionamiento absoluto del emoji */
  left: -40px; /* Posición del emoji a la izquierda del texto */
  top: -10px; /* Alinear verticalmente el emoji con el texto */
  font-size: 25px;
}

.emoji-2::before {
  content: "\1F9D0"; /* Emoji para la segunda viñeta */
  margin-top: 5px;
}

.emoji-3::before {
  content: "\1F449"; /* Emoji para la tercera viñeta */
}

.emoji-4::before {
  content: "\23F0"; /* Emoji para la tercera viñeta */
  margin-top: 5px;
}


/* Estilo del botón circular */
/* Estilo del botón circular */
.accordion {
  --bs-accordion-bg: #ffffff00;
}

.circular-button {
  border-radius: 100%;        /* Hacer el botón circular */
  width: 50px;               /* Definir el ancho del botón */
  height: 50px;              /* Definir la altura del botón */
  padding: 0;                /* Eliminar el padding interno */
  text-align: center;        /* Centrar el texto del botón */
  display: flex;             /* Alinear el contenido del botón */
  justify-content: center;
  align-items: center;
  background-color: #007bff; /* Color de fondo del botón */
  color: white;              /* Color del texto */
  border: none;              /* Sin borde */
  font-size: 20px;           /* Tamaño de la fuente */
  margin-left: 0;            /* Asegurar que el botón quede a la izquierda */
  position: absolute;        /* Usar posición absoluta */
  right: 10px;         /* Alinear a la izquierda de la pantalla */
}

/* Cambiar el color cuando está colapsado */
.circular-button.collapsed {
  background-color: #6eb6f5;
}

/* Eliminar el ícono de flecha predeterminado */
.accordion-button::after {
  display: none;
}

/* Eliminar el margen adicional para el acordeón */
.accordion-item {
  border: none; /* Elimina el borde alrededor del acordeón */
  position: relative; /* Establecer posición relativa en el item */
}

/* Asegurarse de que el contenido colapsado esté invisible */
.accordion-collapse.collapse {
  display: none;
}

/* Mostrar el contenido solo cuando esté expandido */
.accordion-collapse.show {
  display: block;
}

/* Alinear el contenido del header */
.accordion-header {
  display: flex;
  justify-content: flex-start; /* Alinea el contenido a la izquierda */
  padding-left: 60px; /* Dejar espacio para el botón circular */
}

/* Estilo del cuerpo del acordeón */
.accordion-body {
  background-color: #f0f8ffa8;
}