/* ---------- Base común ---------- */

/*
  Los nombres de clase son deliberadamente neutros. Los filtros genéricos de
  las listas de bloqueo actúan sobre subcadenas como "publicidad", "anuncio" o
  "banner", así que nombrarlas así delataría el bloque y su fondo de una vez.
*/

/*
  En pantallas estrechas el bloque no se encoge: se desplaza en horizontal
  dentro de esta caja. Los creativos son GIF de tamaño fijo, así que encogerlos
  solo conseguiría que background-size: contain los escalase a lo ancho sin
  tocar la altura de la celda, dejando franjas negras arriba y abajo.
*/

.h4gcaja {
  overflow-x: auto;
}

/*
  Aquí no debe haber max-width: 100%. La celda queda vacía (el enlace va en
  position: absolute, fuera del flujo), así que su ancho mínimo es cero y la
  tabla obedecería al max-width encogiéndose hasta el ancho de la pantalla.
  El overflow-x de la caja no llegaría a activarse nunca y el creativo se
  vería escalado y enmarcado en negro en lugar de con desplazamiento lateral.
*/

.h4gbloque {
  border-collapse: collapse;
  border-spacing: 0;
  margin-left: auto;
  margin-right: auto;
}

.h4gbloque,
.h4gbloque td {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.h4gbloque td {
  padding: 0;
  margin: 0;
  line-height: 0;
  font-size: 0;
}


/* ---------- Celda común ---------- */

/*
  El creativo se pinta como fondo de la celda, no como etiqueta img. Los
  creativos viajan incrustados en base64 dentro de base64/fondos.css, así que
  una etiqueta img obligaría a repetir esos megabytes dentro del HTML de cada
  página en lugar de servirlos una sola vez desde un CSS cacheable.

  La propiedad background-image no se declara aquí: la inyecta el PHP con
  wp_add_inline_style() para que la ruta de la campaña esté definida en un
  único sitio y no pueda desincronizarse del HTML.
*/

.h4gcelda {
  position: relative;
  background-color: #000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/* ---------- Enlace ---------- */

/*
  El enlace cubre toda la celda gracias a inset: 0, así que el bloque entero es
  clicable sin necesidad de ninguna etiqueta img dentro.
*/

.h4genlace {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 2;
  text-decoration: none;
}


/* ---------- 940x120 ---------- */

.h4gbloque940x120 {
  width: 940px;
  height: 120px;
}

.h4gcelda940x120 {
  width: 940px;
  height: 120px;
}


/* ---------- 300x600 ---------- */

.h4gbloque300x600 {
  width: 300px;
  height: 600px;
}

.h4gcelda300x600 {
  width: 300px;
  height: 600px;
}


/* ---------- 468x60 ---------- */

.h4gbloque468x060 {
  width: 468px;
  height: 60px;
}

.h4gcelda468x060 {
  width: 468px;
  height: 60px;
}