/* ============================================================
   Invitación a instalar la app (install.js) — hoja inferior
   ============================================================ */
.inst__backdrop { position: fixed; inset: 0; z-index: 11990; background: rgba(19,18,17,.42);
  opacity: 0; transition: opacity .35s ease; }
.inst__backdrop.is-on { opacity: 1; }

.inst__card { box-sizing: border-box; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12000; max-width: 480px; margin: 0 auto;
  max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 26px 26px 0 0; color: #131211;
  font-family: Roboto, system-ui, -apple-system, sans-serif;
  padding: 6px 22px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -18px 50px rgba(19,18,17,.22);
  transform: translateY(105%); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.inst__card.is-on { transform: translateY(0); }
/* Rosado suave arriba, como el home */
.inst__card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 132px; z-index: 0; pointer-events: none;
  border-radius: 26px 26px 0 0; background: linear-gradient(180deg, #FBE6ED 0%, rgba(251,230,237,0) 100%); }
.inst__card > * { position: relative; z-index: 1; }

.inst__handle { width: 42px; height: 5px; border-radius: 99px; background: rgba(19,18,17,.16); margin: 6px auto 12px; }
.inst__x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.75); display: grid; place-items: center; cursor: pointer; color: #4a4a4a; }
.inst__x svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.inst__hero { display: flex; align-items: center; gap: 14px; margin: 2px 34px 16px 0; }
.inst__icon { width: 64px; height: 64px; border-radius: 16px; flex: 0 0 auto;
  box-shadow: 0 10px 24px rgba(19,18,17,.18), 0 0 0 1px rgba(19,18,17,.05); }
.inst__title { font-size: 1.28rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; margin: 0 0 4px; }
.inst__sub { font-size: .86rem; line-height: 1.4; color: #6b6b6b; margin: 0; }

.inst__perks { list-style: none; margin: 0 0 14px; padding: 4px 0; display: grid; gap: 9px; }
.inst__perks li { display: flex; align-items: center; gap: 11px; font-size: .9rem; color: #2b2b2b; }
.inst__perks svg { width: 30px; height: 30px; padding: 6px; flex: 0 0 auto; border-radius: 9px; background: #f6f2f6;
  fill: none; stroke: #131211; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.inst__how { background: #faf7fa; border: 1px solid #f0e6ef; border-radius: 16px; padding: 12px 14px; margin-bottom: 14px; }
.inst__lead { font-size: .86rem; line-height: 1.45; color: #4a4a4a; margin: 2px 0 8px; }
.inst__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.inst__step { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.5; color: #2b2b2b; }
.inst__step small { color: #8a8a8a; font-size: .78rem; }
.inst__n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #131211; color: #fff;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700; margin-top: 1px; }
.inst__chip { display: inline-flex; align-items: center; gap: 5px; vertical-align: -6px; padding: 3px 8px;
  border-radius: 8px; background: #fff; border: 1px solid #e7dde6; white-space: nowrap; }
.inst__chip svg { width: 16px; height: 16px; fill: none; stroke: #0a84ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inst__chip svg circle { fill: #131211; stroke: none; }
.inst__chip b { font-weight: 600; font-size: .84rem; }

.inst__actions { display: flex; flex-direction: column; gap: 6px; }
.inst__btn { height: 52px; border: 0; border-radius: 14px; background: #131211; color: #fff; font: inherit;
  font-size: 1rem; font-weight: 600; cursor: pointer; box-shadow: 0 10px 24px rgba(19,18,17,.22); }
.inst__btn:active { transform: scale(.99); }
.inst__later { height: 46px; border: 1px solid #ececec; border-radius: 14px; background: #fff; color: #131211;
  font: inherit; font-size: .95rem; font-weight: 500; cursor: pointer; }
.inst__have { height: 34px; border: 0; background: none; color: #8a8a8a; font: inherit; font-size: .84rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }

/* iPhone/Safari: flecha que apunta a la barra de abajo (donde está Compartir) */
.inst__arrow { display: flex; justify-content: center; margin-top: 4px; }
.inst__arrow svg { width: 26px; height: 26px; fill: none; stroke: #131211; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: .55; animation: instBob 1.4s ease-in-out infinite; }
@keyframes instBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .inst__card { transition: none; } .inst__arrow svg { animation: none; } }