/* Barra de «instalar como app». Hoja aparte porque la usan la portada y todos
   los juguetes, cada uno con su CSS propio. Los colores van escritos a pelo
   (no con var()) justo por eso: no puede depender de las variables de nadie. */

.instalar-barra {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;

  display: flex;
  align-items: center;
  gap: .9rem;
  width: min(30rem, calc(100vw - 2rem));
  padding: .85rem 1rem;

  border: 1px solid rgba(255, 212, 121, .45);
  border-radius: 16px;
  background: rgba(9, 12, 28, .94);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .9), 0 0 24px -10px rgba(255, 212, 121, .4);

  color: #e9edfb;
  font-family: 'Inter', system-ui, sans-serif;

  /* Entra deslizándose desde abajo. Oculta del todo hasta que hay algo que
     ofrecer: `visibility` evita que se pueda tabular a un botón invisible. */
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, 130%);
  transition: transform .38s cubic-bezier(.2, .8, .3, 1), opacity .3s, visibility .3s;
}

.instalar-barra.visible {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}

.instalar-icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: radial-gradient(70% 70% at 50% 30%, rgba(90, 60, 190, .55), #05060f);
  color: #ffd479;
  font: 700 1.4rem/1 'Space Grotesk', system-ui, sans-serif;
  text-shadow: 0 0 12px rgba(255, 212, 121, .5);
}

.instalar-texto {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
  line-height: 1.35;
}

.instalar-titulo { font-size: .93rem; font-weight: 600; }
.instalar-cuerpo { font-size: .8rem; color: rgba(233, 237, 251, .68); }
.instalar-cuerpo b { color: #ffd479; font-weight: 600; }

.instalar-botones {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-left: auto;
}

.instalar-si,
.instalar-no {
  white-space: nowrap;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: filter .2s, color .2s, border-color .2s;
}

.instalar-si {
  padding: .5rem 1rem;
  border: 0;
  background: linear-gradient(100deg, #ffd479, #e8b955);
  color: #1a1405;
  font-size: .85rem;
  font-weight: 700;
}
.instalar-si:hover { filter: brightness(1.1); }

.instalar-no {
  padding: .3rem .6rem;
  border: 0;
  background: transparent;
  color: rgba(142, 151, 184, .9);
  font-size: .76rem;
}
.instalar-no:hover { color: #e9edfb; }

/* En pantallas estrechas los botones se ponen en fila debajo del texto: en
   columna a la derecha dejaban el título en dos líneas. */
@media (max-width: 26rem) {
  .instalar-barra { flex-wrap: wrap; }
  .instalar-botones {
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
    margin-left: 0;
  }
  .instalar-si { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .instalar-barra { transition: opacity .2s, visibility .2s; transform: translate(-50%, 0); }
}