.container-general {
    margin: 0 auto;
    padding: 0;
  }

  .grid {
    display: grid;
    grid-row-gap: 2px;
    padding-bottom: 2px;
    padding-left: 4%;
    padding-right: 4%;
    padding-top: 0px;
  }

  .card-group {
    border-radius: 6px;
    background: #0000;
    position: relative;
    transition: transform 250ms ease-in-out, border 250ms ease-in-out,
      box-shadow 250ms ease-in-out;
  }

  .item-border {
    width: 100%;
    position: relative;
    cursor: pointer;
    border-radius: 12px;
    background-color: rgb(253, 255, 255);
    transition: transform 250ms ease-in-out, border 250ms ease-in-out,
      box-shadow 250ms ease-in-out;
  }

  .item-image {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .item-image i {
    font-size: 2rem;
    color: #3d1515;
    transition: all 0.3s ease;
    opacity: 0.85;
  }
   
  .item-image:hover i {
    transform: scale(1.1);
    color: var(--primary-red);
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(235, 1, 1, 0.5));
  }
  
  .item-image.hover-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition-duration: 300ms;
    visibility: hidden;
  }

  /* Efecto Hover Manual y Auto-Highlight Unificados */
  .card-group:hover .item-border,
  .card-group.auto-highlighted .item-border {
    box-shadow: 
      0 0 35px rgba(235, 1, 1, 0.45),
      0 0 65px rgba(235, 1, 1, 0.25),
      0 0 95px rgba(235, 1, 1, 0.1),
      0 12px 24px rgba(0, 0, 0, 0.35);
    transform: scale(1.05);
    border: 2px solid rgba(249, 249, 249, 0.9);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .card-group.auto-highlighted .item-border {
    animation: pulseHighlight 2.5s ease-in-out infinite;
  }
  
  .card-group:hover .item-image.hover-image,
  .card-group.auto-highlighted .item-image.hover-image {
    position: absolute;
    top: 0;
    z-index: -1;
    opacity: 1;
    visibility: visible;
  }

  .card-group:hover .item-image i,
  .card-group.auto-highlighted .item-image i {
    transform: scale(1.15);
    color: var(--primary-red); /* Rojo brillante en hover/focus */
    filter: brightness(1.3) drop-shadow(0 0 15px rgba(235, 1, 1, 0.7));
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Label del nombre del grupo */
  .group-name-label {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(235,1,1,0.96) 0%, rgba(190,0,0,0.96) 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    pointer-events: none;
    box-shadow:
      0 3px 10px rgba(0,0,0,0.45),
      0 0 16px rgba(235,1,1,0.28);
  }

  .card-group:hover .group-name-label,
  .card-group.auto-highlighted .group-name-label {
    opacity: 1;
    visibility: visible;
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  @keyframes pulseHighlight {
    0%, 100% {
      box-shadow: 
        0 0 35px rgba(235, 1, 1, 0.45),
        0 0 65px rgba(235, 1, 1, 0.25),
        0 0 95px rgba(235, 1, 1, 0.1),
        0 12px 24px rgba(0, 0, 0, 0.35);
      transform: scale(1.05);
    }
    50% {
      box-shadow: 
        0 0 45px rgba(235, 1, 1, 0.55),
        0 0 85px rgba(235, 1, 1, 0.35),
        0 0 115px rgba(235, 1, 1, 0.15),
        0 15px 30px rgba(0, 0, 0, 0.45);
      transform: scale(1.07);
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }

  #idRetroceso {
    cursor: pointer;
    padding: 6px;
    display: inline-block;
    font-size: 1rem;
    position: relative;
    z-index: 10;
  }

  @media (min-width: 1300px) {
    .groups-rows {
      max-width: 1600px;
      margin: 0 auto;
    }
  }

  @media screen and (min-width: 300px) {
    .grid {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-column-gap: 15px;
    }
    .films {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-column-gap: 15px;
    }
    .item-border {
      border: 2px solid rgba(249, 249, 249, 0.1);
    }
  }

  @media screen and (min-width: 768px) {
    .grid {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-column-gap: 15px;
    }
    .item-border {
      border: 4px solid rgba(204, 218, 16, 0.1);
    }
  }

  @media screen and (min-width: 1024px) {
    .grid {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-column-gap: 15px;
    }
  }

  /* Los cinco selectores de grupo reparten SIEMPRE el ancho completo entre
     cinco columnas iguales. En móvil es lo correcto —hay que aprovechar cada
     píxel—, pero en escritorio cada pastilla acababa midiendo 265px a 1440
     para contener un icono de 24px centrado, con una franja enorme de vacío a
     los lados de cada uno.

     Se acotan a un ancho legible y se centran. El reparto en cinco columnas no
     cambia: lo que deja de crecer es el bloque entero. */
  @media screen and (min-width: 900px) {
    .grid {
      max-width: 820px;
      margin-inline: auto;
    }
  }