/**
 * Publicidad Propeka.
 *
 * Las cajas reservan el tamaño antes de que llegue el proveedor. Cuando una
 * unidad informa "unfilled", el JavaScript retira el espacio completo.
 *
 * REGLA DE ORO DE ESTA HOJA: la caja exterior mide EXACTAMENTE lo que mide el
 * creativo reservado. Nada —ni etiqueta, ni margen interno, ni borde— puede
 * añadir alto al bloque, porque ese alto se traslada intacto al ritmo de la
 * lista y desplaza todo lo que viene despues.
 */
.pk-ad-slot {
  display: block;
  width: min(100%, var(--pk-ad-w));
  margin: var(--pk-e8) auto;
  color: var(--pk-txt-ter);
}

/*
 * El marco reserva el espacio para evitar desplazamiento de contenido, pero no
 * debe LEERSE como un bloque de contenido roto.
 *
 * Antes se pintaba como una caja gris sólida con borde: junto a los resultados
 * parecía una tarjeta vacía o un fallo de carga, exactamente lo que hay que
 * evitar en una página comercial. Ahora es una reserva discreta —trazo
 * punteado, sin relleno— que se distingue del contenido real de un vistazo.
 */
.pk-ad-slot__frame {
  position: relative;
  display: block;
  width: min(100%, var(--pk-ad-w));
  height: var(--pk-ad-h);
  min-height: var(--pk-ad-h);
  overflow: hidden;
  background: transparent;
  border: 1px dashed var(--pk-n200);
  border-radius: var(--pk-r);
}

/*
 * La palabra «Publicidad» es contenido obligatorio, no decoracion: debe poder
 * leerse. Vive centrada dentro de la reserva y por debajo de la unidad, de
 * modo que un creativo servido la cubre sin empujar nada.
 */
.pk-ad-slot__label {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  place-content: center;
  margin: 0;
  color: var(--pk-txt-ter);
  font-size: var(--pk-fs-sm);
  font-weight: var(--pk-fw-semi);
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: center;
}

.pk-ad-slot__unit {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-height: inherit;
}

/*
 * `unfilled` lo pone el JavaScript cuando el proveedor no devuelve creativo.
 * `vacio` lo pone PHP cuando no hay proveedor configurado y el marcador no está
 * autorizado (A-2). En ambos casos la ranura sigue en el DOM —con su id y sus
 * `data-`, que es lo que necesita el código de entrega para encontrarla— pero
 * no ocupa ni un píxel. El margen de `.pk-ad-slot` se anula también: si no, dos
 * ranuras colapsadas seguirían separando los resultados que hay a cada lado.
 */
.pk-ad-slot[data-pk-ad-state="unfilled"],
.pk-ad-slot[data-pk-ad-state="vacio"] {
  display: none;
  margin: 0;
}

.pk-ad-slot--results-rail {
  position: sticky;
  top: 88px;
  align-self: start;
  margin: 0 auto;
}

/* El anuncio del rail de ficha NO se fija.
   Compartía `position: sticky; top: 88px` con la tarjeta de contacto, que es
   su hermana anterior en el mismo rail. Dos hermanos fijados al mismo desfase
   no se apilan: el segundo sube por encima del primero. Medido en el
   navegador, el anuncio tapaba la tarjeta de contacto 93 px al desplazar 600,
   493 px a 1000 y los 621 px completos a partir de 1400 — es decir, en toda
   ficha el formulario de contacto quedaba cubierto por el anuncio en cuanto
   el usuario bajaba. Solo se fija la tarjeta de contacto, que es el elemento
   de conversión; el anuncio fluye debajo. */
.pk-ad-slot--detail-rail {
  position: static;
  align-self: start;
  margin: 0 auto;
}

.pk-rejilla > .pk-ad-slot { grid-column: 1 / -1; }
.pk-home-ad { padding: 0 var(--pk-pad) var(--pk-e10); }

@media (max-width: 1200px) {
  .pk-ad-slot--results-rail { display: none; }
}

@media (max-width: 1024px) {
  .pk-ad-slot--detail-rail { display: none; }
}

@media (max-width: 767.98px) {
  .pk-ad-slot:not(.pk-ad-slot--results-rail):not(.pk-ad-slot--detail-rail) {
    width: min(100%, var(--pk-ad-mw, var(--pk-ad-w)));
    margin-block: var(--pk-e6);
  }

  .pk-ad-slot:not(.pk-ad-slot--results-rail):not(.pk-ad-slot--detail-rail) .pk-ad-slot__frame {
    width: min(100%, var(--pk-ad-mw, var(--pk-ad-w)));
    height: var(--pk-ad-mh, var(--pk-ad-h));
    min-height: var(--pk-ad-mh, var(--pk-ad-h));
  }

  .pk-ad-slot--results-rail,
  .pk-ad-slot--detail-rail { display: none; }
}

/* =========================================================================
   Inventario medido de la pagina de resultados
   =========================================================================
   Escritorio y tableta reservan 728x90 exactos; el movil ocupa la columna
   completa con 280 px de alto. La etiqueta ya no vive fuera del marco, asi
   que la region exterior y la reserva coinciden al pixel.
   ========================================================================= */
.pk-resultados .pk-ad-slot {
  width: 100%;
  max-width: var(--pk-results-column);
  margin: 0 auto 12px;
}

.pk-resultados .pk-ad-slot__frame {
  width: 100%;
  height: var(--pk-ad-h);
  min-height: var(--pk-ad-h);
  border: 0;
  border-radius: 8px;
  background: var(--pk-n50);
}

.pk-resultados .pk-ad-slot__label {
  color: var(--pk-txt-ter);
  font-size: var(--pk-fs-sm);
  line-height: 18px;
}

.pk-resultados .pk-ad-slot--results-rail {
  width: 160px;
  margin: 0;
}

.pk-resultados .pk-ad-slot--results-rail .pk-ad-slot__frame {
  width: 160px;
}

@media (max-width: 767.98px) {
  .pk-resultados .pk-ad-slot:not(.pk-ad-slot--results-rail):not(.pk-ad-slot--detail-rail) {
    width: 100%;
    max-width: none;
    margin-block: 0 12px;
  }

  .pk-resultados .pk-ad-slot:not(.pk-ad-slot--results-rail):not(.pk-ad-slot--detail-rail) .pk-ad-slot__frame {
    width: 100%;
    height: 280px;
    min-height: 280px;
  }
}

@media print {
  .pk-ad-slot,
  .pk-home-ad { display: none !important; }
}