/* =============================================
   RESPONSIVE — paleta Mist
   ============================================= */

/* iPhone SE y pantallas muy pequeñas */
@media (max-width: 375px) {
  .ob-headline-xl { font-size: 38px; }
  .ob-headline-md { font-size: 28px; }
  .home-headline  { font-size: 30px; }
  .create-headline { font-size: 30px; }
  .player-title   { font-size: 22px; }
  .loading-headline { font-size: 26px; }
}

/* Paywall cards — mobile */
@media (max-width: 430px) {
  .pw-card { padding: 16px 16px 18px; }
  .pw-card-name { font-size: 22px; }
  .pw-card-price-main { font-size: 25px; }
  .pw-card-price-sub { font-size: 11.5px; }
  .pw-card-features li { font-size: 12.5px; }
}

/* Pantallas medianas cortas en altura (landscape) */
@media (max-height: 700px) {
  .player-ring-wrap { margin-bottom: 14px; }
  .player-controls { margin-top: 0; }
  .loading-ring-wrap { margin-bottom: 20px; }
  .loading-headline { margin-bottom: 20px; }
}

/* Pantallas muy cortas */
@media (max-height: 600px) {
  .player-inner { gap: 0; }
  .player-play-btn { width: 60px; height: 60px; border-radius: 30px; }
}

/* (7-may) .btn-generate-wrap ya no es position:fixed por default — el media
   query que lo volvía static al abrir teclado quedó obsoleto. Eliminado. */

/* Desktop / tablet */
@media (min-width: 600px) {
  .bottom-nav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 460px;
    border-radius: 20px 20px 0 0;
  }
  .paywall-card { border-radius: 28px; margin: auto; }
  .paywall-overlay { align-items: center; }
}

/* Desktop > 768 — centrar app */
@media (min-width: 768px) {
  .screen-inner {
    padding-left: 32px;
    padding-right: 32px;
  }
  .ob-inner {
    padding-left: 40px;
    padding-right: 40px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Desktop ≥769 — fix superposiciones de elementos fixed (P0-D + P0-E del audit 29-abril):
   - bottom-nav: deja de ser pill estrecha, se vuelve full-width contenida
   - site-footer: deja de ser fixed, va al final del flujo natural para no
     solapar el .pre-generate-warning del home/create.
   - btn-generate-wrap: posición estática (no fixed) en desktop, evita pisar footer.
*/
@media (min-width: 769px) {
  .bottom-nav {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    transform: none;
    border-radius: 0;
    border-top: 0.5px solid var(--faint);
    padding: 12px 32px calc(env(safe-area-inset-bottom, 0px) + 12px);
    justify-content: center;
    gap: 56px;
  }
  .site-footer {
    margin: 32px auto 100px;
    max-width: 600px;
  }
  .btn-generate-wrap {
    margin: 24px auto 100px;
    padding: 0;
  }
}