html, body {
    background-color: #121212;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  
  .actores {
      background-color: #121212;
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%;
    }
    
    .actores .div {
      background-color: #121212;
      width: 100%;
      height: auto;
      position: relative;
      margin: 0 auto;
    }
    
    .actores .members {
      width: 100%;
      max-width: 1224px;
      top: 50px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      position: relative;
    }
    
    
    .actores .frame {
      position: relative;
      top: 140px;
    }
    
    .actores .heading {
      background: linear-gradient(
        180deg,
        rgb(233, 149, 73) 0%,
        rgb(244, 91, 83) 100%
      );
      -webkit-background-clip: text !important;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: "Poppins-Bold", Helvetica;
      font-weight: 700;
      font-size: 64px;
      text-align: center;
      letter-spacing: 0;
      line-height: 70.4px;
    }
    
    .actores .paragraph {
      font-family: "Open Sans-Regular", Helvetica;
      font-weight: 400;
      color: #ffffff;
      font-size: 18px;
      text-align: center;
      justify-content: center;
      letter-spacing: 0;
      line-height: 27px;
    }
  
    .image-placeholder {
      position: relative;
      width: 388px;
      height: 387px;
      background-color: var(--neutral-colorscolor-300);
      border-radius: 20px;
      overflow: hidden; 
    }
  
    .image-placeholder img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Asegura que la imagen cubra todo el contenedor */
    }
    
    .image-placeholder .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7); /* Fondo semi-transparente */
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .image-placeholder:hover .overlay {
      opacity: 1;
    }
    
    .author-name {
      font-size: 20px;
      font-weight: bold;
      margin: 0;
    }
    
    .description {
      font-size: 16px;
      margin: 5px 0 0 0;
    }
  
    .like{
      padding-right: 50px;
    }
    .btn-like {
      background: transparent;
      border: none;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .heart-icon {
      font-size: 20px; /* ajustable */
      color: white;
      transition: transform 0.3s ease;
    }
    
    .btn-like.liked .heart-icon {
      color: red;
      transform: scale(1.1);
    }
    
    #like-count {
      font-size: 16px;
      color: white;
    }

    span	{
      color: white;
      font-size: 16px;
      margin-bottom: 2px;
    }

    .heart {
      width: 22px;
      height: 22px;
      font-size: 22px;
      color: white;
      transition: all 0.3s ease-in-out;
      cursor: pointer;
    }
    
    .heart.is-active {
      color: #f44336; /* Rojo Twitter */
      transform: scale(1.2);
    }
    
    .heart-button {
      background: transparent;
      border: none;
      padding: 0;
    }