/* TLOP Media — publicidad (modules/publicidad/). El espacio de cada pieza
   queda reservado por el ancho y alto de la imagen: la página no salta. */
.pub { position: relative; display: block; max-width: 100%; margin: 24px auto; text-align: center; }
.pub a { display: block; line-height: 0; }
.pub img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; border-radius: 4px; }
.pub__etiqueta {
    display: block; margin: 0 0 4px; text-align: left;
    font: 600 10px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: .12em; text-transform: uppercase; color: #8a8f98;
}

.pub--cabecera { max-width: 1200px; margin: 12px auto 4px; padding: 0 16px; }
.pub__movil { display: none; }
@media (max-width: 700px) {
    .pub--cabecera { margin: 8px 0 0; padding: 0; }
    .pub--cabecera img { border-radius: 0; }
    .pub--cabecera .pub__etiqueta { padding: 0 16px; }
    .pub__escritorio,
    .pub--solo-escritorio { display: none; }
    .pub__movil { display: block; }
}

.pub--nota-fuente { max-width: 720px; margin: 20px 0 24px; }
.pub--nota-final { max-width: 600px; margin: 8px auto 28px; }
.pub--portada { margin: 0; }
.pub--lateral { max-width: 300px; margin: 0 auto 24px; }
@media (max-width: 1023px) {
    .pub--lateral { display: none; }
}

.pub-texto {
    margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #e5e5e5;
    text-align: center; font-size: 13px; line-height: 1.4;
}
.pub-texto a { color: #555; text-decoration: none; }
.pub-texto a:hover { text-decoration: underline; }
.pub-texto strong { color: #b86e1f; }

/* Video sobre la imagen: aparece recién cuando corre; si no carga, o con
   movimiento reducido, queda la imagen. */
.pub__escritorio, .pub__movil { position: relative; }
.pub__medio { position: relative; display: block; }
.pub__video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 4px; opacity: 0; transition: opacity .2s;
}
.pub__video.is-corriendo { opacity: 1; }
@media (max-width: 700px) { .pub--cabecera .pub__video { border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .pub__video { display: none; } }
.pub__pausa {
    position: absolute; right: 8px; bottom: 8px; z-index: 2;
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; line-height: 28px;
    cursor: pointer;
}
.pub__pausa:hover, .pub__pausa:focus-visible { background: rgba(0, 0, 0, .8); }
.pub__pausa:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }