@layer components {
  /* Install nudge — BANNER superior (estilo Smart App Banner iOS). En flujo
     arriba del documento → se va al scrollear de forma natural. Ship `hidden`;
     el controller quita `hidden` y añade `.is-open` (expand) → sin FOUC, con un
     reveal suave que empuja el contenido. */
  .app-install-banner {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
      max-height 280ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 220ms ease-out;
    background: rgb(17 22 29 / 98%);
    border-bottom: 1px solid var(--color-surface-border);
    color: var(--color-text, #fff);
    font-family: var(--font-body, Manrope, sans-serif);
  }

  /* `hidden` SIEMPRE gana al display por defecto del bloque (anti-flash). */
  .app-install-banner[hidden] {
    display: none;
  }

  .app-install-banner.is-open {
    max-height: 160px;
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .app-install-banner {
      transition: none;
    }
  }

  .app-install-banner :focus-visible {
    outline: none;
  }

  .app-install-banner__inner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 12px 12px 12px 8px;
  }

  /* ✕ compacta a la izquierda (icono, sin círculo gordo → gana espacio). */
  .app-install-banner__close {
    flex: 0 0 auto;
    appearance: none;
    background: #ffffff16;
    border: 0;
    padding: 2px 7px;
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    line-height: 1;
    color: var(--color-text-muted, #a1a1aa);
    cursor: pointer;
    border-radius: 5px;
  }

  .app-install-banner__close:hover {
    color: #fff;
  }

  .app-install-banner__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }

  .app-install-banner__text {
    flex: 1;
    min-width: 0;
  }

  .app-install-banner__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-install-banner__subtitle {
    margin: 1px 0 0;
    font-size: 13px;
    line-height: 1.25;
    color: var(--color-text-muted, #a1a1aa);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-install-banner__rating {
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
  }

  .app-install-banner__stars {
    color: #fbbf24;
    letter-spacing: 0.5px;
  }

  .app-install-banner__rating-value {
    font-weight: 700;
    color: var(--color-text-secondary, #e4e4e7);
  }

  .app-install-banner__rating-sep {
    color: rgb(255 255 255 / 30%);
  }

  .app-install-banner__store {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--color-text-secondary, #e4e4e7);
  }

  .app-install-banner__store[hidden] {
    display: none;
  }

  .app-install-banner__cta {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    background: var(--color-accent, #00ff87);
    color: var(--color-on-accent, #000);
    transition: filter 160ms ease;
  }

  .app-install-banner__cta:hover {
    filter: brightness(1.06);
  }

  /* Móvil muy estrecho: el subtítulo cede antes que el CTA. */
  @media (width <= 360px) {
    .app-install-banner__subtitle {
      display: none;
    }
  }
}