/* El toast de instalar (instalar.js). Cada landing lo viste con su marca
   definiendo estas variables en :root; la tipografía es la de la página. */
:root {
  --instalar-fondo: #ffffff;
  --instalar-texto: #111111;
  --instalar-tenue: #555555;
  --instalar-acento: #111111;
  --instalar-acento-texto: #ffffff;
  --instalar-radio: 18px;
  --instalar-sombra: 0 10px 40px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);
}

.instalar {
  position: fixed;
  z-index: 2147483000;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  background: var(--instalar-fondo);
  color: var(--instalar-texto);
  border-radius: var(--instalar-radio);
  box-shadow: var(--instalar-sombra);
  font: inherit;
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  transition: transform .45s cubic-bezier(.2, .9, .25, 1.15), opacity .3s ease;
}
.instalar.visible { transform: none; opacity: 1; }
/* Se corre mientras se ve una zona que no hay que tapar (data-evitar). */
.instalar.visible.corrido { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }

/* Con !important y selectores propios: las landings suelen tener resets
   globales (img, svg { display: block }) que partían el texto en renglones. */
.instalar img.instalar-icono { display: block !important; flex: none; width: 44px; height: 44px; border-radius: 11px; object-fit: cover; }
.instalar-cuerpo { flex: 1; min-width: 0; }
.instalar p.instalar-titulo { margin: 0; font-weight: 700; font-size: 15px; line-height: 1.25; }
.instalar p.instalar-texto { margin: 2px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--instalar-tenue); }
.instalar-texto b { color: var(--instalar-texto); font-weight: 600; }
.instalar svg.instalar-compartir { display: inline-block !important; width: 18px; height: 18px; vertical-align: -3px; }

.instalar-si {
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--instalar-acento);
  color: var(--instalar-acento-texto);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.instalar-no {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--instalar-tenue);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.instalar-si:focus-visible, .instalar-no:focus-visible { outline: 2px solid var(--instalar-acento); outline-offset: 2px; }

@media (min-width: 720px) {
  .instalar { left: auto; right: 20px; bottom: 20px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .instalar { transition: opacity .2s ease; transform: none; }
}