:root {
  --hex-color: #10b981; /* Color verde del fondo */
  --bg-dark: #ffffff; /* Color oscuro del fondo de página */
}

.hexagon-container {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  filter: drop-shadow(0px 15px 20px #10b981);
}


/* El fondo hexagonal */
.hexagon-bg {
  position: absolute;
  width: 70%;
  height: 69%; /* Ajusta esto para que la cabeza sobresalga más o menos */
  background-color: var(--hex-color);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 1;
  margin-bottom: 55px;
}

/* La imagen del personaje */
.person-img {
  object-fit: cover;
  display: block;
  position: relative;
  width: 70%; /* Ajusta el tamaño de la persona */
  z-index: 2;
  margin-bottom: 55px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 82%, 50% 100%, 0% 82%, 0% 25%);
}

@media (max-width: 768px) {
  .hexagon-container {
    width: 65%;
    filter: drop-shadow(0px 5px 8px #10b981);

  }

  .hexagon-bg {
  width: 70%;
  height: 75%;
  }
  .hexagon-bg{
    margin: 0;
  }
  .person-img{
    margin: 0;
  }
}