/* ================================================================
   Franja «Baixa l'app» (final de la portada y /app)
================================================================ */

.app-band { background: var(--bg-2); border-top: 1px solid var(--border); padding: 56px 24px 0; overflow: hidden; }
.app-band.is-page { border-top: 0; min-height: calc(100vh - var(--navbar-h) - 120px); display: flex; align-items: flex-end; }
.app-band-inner {
  max-width: 1080px; margin: 0 auto; width: 100%;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 56px;
}
.app-band-text { flex: 1 1 380px; min-width: 0; max-width: 520px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 16px; }
.app-band-text h1, .app-band-text h2 { margin: 0; font-size: 38px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; }
.app-band-text > p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--mid); }
.app-band-points { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.app-band-points li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; }
.app-band-points li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F766E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
:root[data-theme="dark"] .app-band-points li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232DD4BF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E");
}

.app-band-get { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.app-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.app-qr img { width: 132px; height: 132px; padding: 10px; background: #fff; border-radius: 18px; border: 1px solid var(--border-light); box-sizing: content-box; }
.app-qr figcaption { font-size: 13px; color: var(--mid); max-width: 160px; text-align: center; }
.app-band-stores { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.app-band-stores.is-stack { flex-direction: column; align-items: flex-start; }
.app-badge { display: inline-flex; border-radius: 10px; }
.app-badge img { height: 50px; width: auto; display: block; }
.app-badge.is-play img { height: 74px; margin: -12px; }   /* el PNG oficial de Google lleva margen */
.app-badge:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

/* El móvil: marco y pantalla en CSS, la pantalla es una captura de la app */
.app-phone {
  flex: 0 0 auto; width: 280px; aspect-ratio: 280 / 520; margin-bottom: -96px;
  padding: 12px; border-radius: 46px; background: #0B1220; box-sizing: border-box;
  box-shadow: 0 0 0 2px #1E293B inset, 0 30px 60px rgba(15,23,42,.28);
  position: relative; transform: rotate(-4deg); transform-origin: bottom center;
}
:root[data-theme="dark"] .app-phone { box-shadow: 0 0 0 2px rgba(255,255,255,.22) inset, 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px rgba(0,0,0,.5); }
.app-phone::before {   /* isla de la cámara */
  content: ''; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 26%; height: 4%; border-radius: 999px; background: #0B1220; z-index: 1;
}
.app-phone-screen { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #020617; }
.app-phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

@media (max-width: 768px) {
  .app-band { padding: 40px 16px 0; }
  .app-band-inner { flex-direction: column; align-items: center; gap: 28px; }
  .app-band-text { padding-bottom: 0; max-width: none; flex-basis: auto; }
  .app-band-text h1, .app-band-text h2 { font-size: 30px; }
  .app-band-text > p { font-size: 16px; }
  .app-qr { display: none; }   /* no se puede escanear la propia pantalla */
  .app-band-stores.is-stack { flex-direction: row; }
  .app-phone { width: 230px; margin-bottom: -70px; transform: none; }
  .app-band.is-page { min-height: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .app-phone { transition: transform .4s ease; }
  .app-band:hover .app-phone { transform: rotate(-2deg) translateY(-6px); }
}