/* Publicidad como tarjeta flotante (sitios/partials/publicidad.blade.php). Cada sitio define --pub-acento en su CSS. */
.pub-tarjeta { --pub-acento-def: #2f3a45; position: fixed; left: 20px; bottom: 20px; z-index: 1040; width: 320px; background: #fff; color: #333;
    border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px -12px rgba(20, 25, 30, .45); font-family: inherit; text-align: left;
    transform: translateY(calc(100% + 40px)); opacity: 0; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.pub-tarjeta.is-visible { transform: none; opacity: 1; animation: pub-llamado 1.4s ease-out .5s 2; }
/* borde y halo del color de cada sitio: llama la atención sin desentonar; al aparecer, el halo late dos veces */
.pub-tarjeta { border: 2px solid var(--pub-acento, var(--pub-acento-def));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pub-acento, var(--pub-acento-def)) 22%, transparent), 0 18px 40px -12px rgba(20, 25, 30, .45); }
@keyframes pub-llamado {
    50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--pub-acento, var(--pub-acento-def)) 30%, transparent), 0 18px 40px -12px rgba(20, 25, 30, .45); }
}
.pub-tarjeta[hidden] { display: none; }
.pub-tarjeta__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.pub--afiche .pub-tarjeta__img { object-position: top; }        /* de un afiche se ve el encabezado */
.pub-tarjeta__cuerpo { padding: 14px 16px 16px; }
/* textos largos: dos renglones de título y tres de mensaje; el botón lleva al detalle */
.pub-tarjeta__titulo { font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--pub-acento, var(--pub-acento-def)); margin: 0 30px 4px 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pub-tarjeta__msj { font-size: 14px; line-height: 1.45; color: #555; margin: 0 0 12px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pub-tarjeta__btn { display: inline-block; background: var(--pub-acento, var(--pub-acento-def)); color: #fff; border-radius: 999px; padding: 8px 18px;
    font-weight: 700; font-size: 14px; line-height: 1.3; text-decoration: none; }
.pub-tarjeta__btn:hover { color: #fff; filter: brightness(1.12); }
.pub-tarjeta__btn--wa { background: #1f9d57; }
.pub-cerrar { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; font-size: 22px; line-height: 1; color: #333; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.pub-cerrar:hover { background: #fff; }
.pub-cerrar:focus-visible, .pub-tarjeta__btn:focus-visible { outline: 3px solid var(--pub-acento, var(--pub-acento-def)); outline-offset: 2px; }
@media (max-width: 575.98px) {
    /* en el celular, una franja chica abajo: foto chica a la izquierda, sin el mensaje */
    /* a la derecha quedan los botones flotantes (WhatsApp, volver arriba) */
    .pub-tarjeta { left: 10px; right: 78px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; display: grid; grid-template-columns: 76px 1fr; }
    .pub-tarjeta:not(:has(.pub-tarjeta__img)) { grid-template-columns: 1fr; }
    .pub-tarjeta__img { height: 100%; aspect-ratio: auto; }
    .pub-tarjeta__cuerpo { padding: 10px 12px; }
    .pub-tarjeta__titulo { font-size: 14px; }
    .pub-tarjeta__msj { display: none; }
    .pub-tarjeta__btn { padding: 6px 14px; font-size: 13px; }
    .pub-cerrar { top: 4px; right: 4px; width: 28px; height: 28px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .pub-tarjeta { transition: none; } .pub-tarjeta.is-visible { animation: none; } }