.wc-grid-container {
    display: grid;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    /* 4 columnas ajustadas: col 3 (1.2fr) más ancha, col 4 (0.8fr) más angosta */
    grid-template-columns: 1fr 1fr 1.2fr 0.8fr;
    /* 4 filas */
    grid-template-rows: 1.2fr 0.8fr 1fr 1fr;
    gap: 6px;
    background: #111;
    padding: 6px;
    border-radius: 8px;
    margin: 0 auto;
  }

  .wc-cell {
    position: relative;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: default;
    text-decoration: none;
    color: inherit;
  }

  /* Capa de fondo ampliada y desenfocada, solo aparece cuando el widget
    imprime .wc-cell-blur-bg (modo "ver imagen completa" en desktop y/o mobile) */
  .wc-cell-blur-bg {
    position: absolute;
    inset: -1px; /* se pasa 1px del borde antes de que .wc-cell la recorte con
                    overflow:hidden, así se evita el halo del color de fondo
                    que el antialiasing del border-radius deja asomar */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(20px) brightness(0.6);
    transform: scale(1.15); /* evita que el blur deje bordes transparentes */
    z-index: 0;
  }

  /* Capa de la imagen nítida. Con "cover" llena la celda, con "contain"
    se ve completa y flota sobre el blur en vez de sobre un color sólido */
  .wc-cell-image {
    position: absolute;
    inset: -1px; /* mismo motivo que en .wc-cell-blur-bg */
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
  }

  .wc-cell-image.fit-cover {
    background-size: cover;
  }

  .wc-cell-image.fit-contain {
    background-size: contain;
  }

  /* Velo oscuro para que la etiqueta se lea bien sobre cualquier imagen */
  .wc-cell.has-media::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: #00000054;*/
    z-index: 2;
    pointer-events: none;
  }

  /* Reglas para la reproducción inline */
  .wc-cell iframe,
  .wc-cell video {
    display: block; /* sin esto, el elemento se comporta como inline y deja
                        un hilo del color de la celda visible debajo (gap de
                        baseline) */
    inset: -1px; /* mismo margen de seguridad que .wc-cell-image, evita el
                    halo del color de fondo en las esquinas redondeadas */
    border: none;
    border-radius: inherit; /* los iframes no siempre respetan el overflow:hidden
                                + border-radius del padre (inconsistencia entre
                                navegadores); esto lo fuerza directamente en el
                                propio iframe/video, y "inherit" lo mantiene
                                sincronizado con el control "Radio de bordes" */
    position: absolute;
    object-fit: cover;
    z-index: 4;
  }

  .wc-cell[data-video-src]:not([data-video-src=""]),
  .wc-cell.video-trigger {
    cursor: pointer;
  }

  /* Verde */
  .wc-cell.green {
    background-color: #00d559;
  }

  /* Café */
  .wc-cell.brown {
    background-color: #634e42;
    color: #ffffff;
    font-family: "CanteenBN-Bold";
    font-weight: 700;
    font-size: 16px;
  }

  /* El verde/café solo tiene sentido como color de fondo en celdas SIN imagen
    ni video (color + etiqueta puros). En celdas con imagen/video, ese color
    nunca debería verse — es justo lo que se cuela en la costura del borde
    redondeado (antialiasing, iframes que no respetan el recorte, redondeos
    de subpíxel en la rejilla). En vez de perseguir el pixel exacto, se
    camufla contra el mismo oscuro del fondo de la rejilla. */
  .wc-cell.has-media {
    background-color: #111111 !important;
  }

  /* === POSICIONES === */

  /* cell-1: SPOT - Verde grande, ocupa col 1-2, filas 1-2 */
  .wc-cell-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  /* cell-2: BRANDED - Brown, col 3, fila 1 */
  .wc-cell-2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  /* cell-3: CAROUSEL - Verde, col 4, fila 1 */
  .wc-cell-3 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
  }

  /* cell-4: OOH - Brown, col 3-4, fila 2 */
  .wc-cell-4 {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
  }

  /* cell-5: DIGITAL - Verde, col 1, filas 3-4 */
  .wc-cell-5 {
    grid-column: 1 / 2;
    grid-row: 3 / 5;
  }

  /* cell-6: BRANDED - Brown, col 2-3, fila 3 */
  .wc-cell-6 {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
  }

  /* cell-7: OOH - Brown, col 2-3, fila 4 */
  .wc-cell-7 {
    grid-column: 2 / 4;
    grid-row: 4 / 5;
  }

  /* cell-8: DIGITAL - Verde, col 4, filas 3-4 */
  .wc-cell-8 {
    grid-column: 4 / 5;
    grid-row: 3 / 5;
  }

  /* Clase que define el comportamiento de unión */
  .wc-cell.wc-cell-merged {
    /* La celda unida toma el tamaño de 2 celdas */
    grid-column: span 2 !important;
    grid-row: span 2 !important;
  }

  /* Ajustes específicos para que la imagen se vea bien al unirse */
  .wc-cell.wc-cell-merged .wc-cell-image,
  .wc-cell.wc-cell-merged .wc-cell-blur-bg {
    background-size: cover; /* Recomendado para bloques grandes */
  }

  /* --- Casos específicos de unión --- */

  /* Si la celda 6 se une, ocupa el lugar de la 6 y 7 */
  .wc-cell-6.wc-cell-merged {
    grid-column: 2 / 4;
    grid-row: 3 / 5 !important;
  }

  /* Si la celda 2 se une, ocupa 2 y 3 */
  .wc-cell-2.wc-cell-merged {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
  }

  /* Icono de play */
  .wc-play-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      transform 0.2s,
      background 0.2s;
    z-index: 3;
    position: relative;
  }

  .wc-cell:hover .wc-play-icon {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.5);
  }

  .wc-play-icon::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 16px solid white;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    margin-left: 4px;
  }

  /* Etiqueta de texto en esquina */
  .wc-label {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 3;
  }

  .wc-cell.green .wc-label {
    color: #ffffff;
    font-family: "CanteenBN-Bold";
    font-weight: 700;
    font-size: 16px;
  }

  /* ========== RESPONSIVE MOBILE ========== */
  @media (max-width: 767px) {
    .wc-grid-container {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(7, 120px);
      aspect-ratio: auto;
    }

    /* Fila 1-2: SPOT ocupa todo el ancho, más alto */
    .wc-cell-1 {
      grid-column: 1 / 3;
      grid-row: 1 / 3;
    }

    /* Fila 3: Branded | Carousel */
    .wc-cell-2 {
      grid-column: 1 / 2;
      grid-row: 3 / 4;
    }
    .wc-cell-3 {
      grid-column: 2 / 3;
      grid-row: 3 / 4;
    }

    /* Fila 4: OOH ocupa todo el ancho */
    .wc-cell-4 {
      grid-column: 1 / 3;
      grid-row: 4 / 5;
    }

    /* Fila 5: Branded | OOH (los brown arriba) */
    .wc-cell-6 {
      grid-column: 1 / 2;
      grid-row: 5 / 6;
    }
    .wc-cell-7 {
      grid-column: 2 / 3;
      grid-row: 5 / 6;
    }

    /* Fila 6-7: Digital | Digital (los green debajo, más verticales) */
    .wc-cell-5 {
      grid-column: 1 / 2;
      grid-row: 6 / 18;
    }
    .wc-cell-8 {
      grid-column: 2 / 3;
      grid-row: 6 / 18;
    }

    /* --- Posición cuando EXISTE una unión (se mueven hacia abajo) --- */
    /* Si la celda 6 está combinada, el contenedor tiene un elemento .wc-cell-merged */
    .wc-grid-container:has(.wc-cell-merged) .wc-cell-5,
    .wc-grid-container:has(.wc-cell-merged) .wc-cell-8 {
      grid-row: 7 / 25 !important; /* Solo se mueven si hay una unión presente */
    }

    /* --- Definición de la Unión --- */
    .wc-cell-6.wc-cell-merged {
      grid-column: 1 / 3 !important;
      grid-row: 5 / 7 !important;
    }

    /* Reglas responsivas de ajuste de imagen */
    .wc-cell-image.fit-mobile-cover {
      background-size: cover;
    }

    .wc-cell-image.fit-mobile-contain {
      background-size: contain;
    }
  }