/* DREX MOBILE POLISH SAFE START */
html, body {
  overflow-x: hidden;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

@media (max-width: 980px) {
  body {
    padding-bottom: 88px !important;
  }

  main,
  section,
  article,
  .container,
  .wrap,
  .content,
  .page,
  .page-wrap,
  .page-content {
    max-width: 100%;
  }

  .site-header,
  header,
  .topbar,
  .nav-wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .site-header nav,
  header nav {
    gap: 10px !important;
    flex-wrap: wrap;
  }

  h1 {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 0.98 !important;
  }

  h2 {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
    line-height: 1.05 !important;
  }

  p,
  li,
  .lead,
  .subtitle,
  .muted {
    line-height: 1.55 !important;
  }

  .hero,
  .hero-card,
  .hero-panel,
  .landing-hero,
  .album-hero,
  .music-hero {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .hero-actions,
  .actions,
  .cta-row,
  .button-row,
  .button-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .hero-actions a,
  .hero-actions button,
  .actions a,
  .actions button,
  .cta-row a,
  .cta-row button,
  .button-row a,
  .button-row button,
  .button-group a,
  .button-group button {
    min-height: 44px !important;
  }

  .drex-trust-bar,
  .drex-home-mini-nav,
  .chips,
  .pill-row,
  .tag-row {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .drex-trust-pill,
  .drex-home-mini-nav a,
  .chip,
  .pill,
  .tag {
    min-height: 38px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .drex-conv-wrap {
    margin-top: 12px !important;
  }

  .drex-conv-strip {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .drex-conv-card {
    min-height: auto !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .drex-home-premium-band {
    margin: 14px 0 12px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
  }

  .drex-home-premium-band p {
    font-size: 0.98rem !important;
  }

  .album-cover,
  .cover,
  .poster,
  .hero img,
  .music-hero img,
  .album-hero img {
    border-radius: 16px !important;
  }

  .grid,
  .cards,
  .card-grid,
  .video-grid,
  .gallery-grid,
  .lyrics-grid,
  .downloads-grid,
  .music-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .video-card,
  .gallery-card,
  .lyric-card,
  .download-card,
  .song-card,
  .track-card,
  .music-card,
  .card {
    border-radius: 18px !important;
  }

  .gallery-grid img,
  .video-card img,
  .music-card img,
  .song-card img {
    width: 100% !important;
    object-fit: cover;
  }

  form,
  .form,
  .contact-form {
    width: 100% !important;
  }

  input,
  textarea,
  select,
  button {
    font-size: 16px !important;
  }

  input,
  textarea,
  select {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 14px !important;
  }

  textarea {
    min-height: 130px !important;
  }

  .form-row,
  .field-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .footer,
  footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 640px) {
  .site-header,
  header,
  .topbar,
  .nav-wrap,
  main,
  .container,
  .wrap,
  .content,
  .page,
  .page-wrap,
  .page-content,
  footer {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .hero,
  .hero-card,
  .hero-panel,
  .landing-hero,
  .album-hero,
  .music-hero,
  .drex-conv-card,
  .video-card,
  .gallery-card,
  .lyric-card,
  .download-card,
  .song-card,
  .track-card,
  .music-card,
  .card {
    border-radius: 16px !important;
  }

  .hero-actions a,
  .hero-actions button,
  .actions a,
  .actions button,
  .cta-row a,
  .cta-row button,
  .button-row a,
  .button-row button,
  .button-group a,
  .button-group button {
    width: 100%;
    justify-content: center !important;
  }

  .drex-home-top {
    right: 12px !important;
    bottom: 94px !important;
  }
}
/* DREX MOBILE POLISH SAFE END */

/* DREX MOBILE FINAL TUNING START */
@media (max-width: 820px) {
  /* 1) Ocultar dock inferior del sitio en móvil */
  .drex-sticky-dock,
  .sticky-dock,
  .bottom-dock,
  .mobile-dock {
    display: none !important;
  }

  body {
    padding-bottom: 24px !important;
  }

  /* 2) Menú superior en una sola fila con scroll horizontal */
  header nav,
  .site-header nav,
  .topbar nav,
  .nav-wrap nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  header nav::-webkit-scrollbar,
  .site-header nav::-webkit-scrollbar,
  .topbar nav::-webkit-scrollbar,
  .nav-wrap nav::-webkit-scrollbar {
    display: none;
  }

  header nav a,
  .site-header nav a,
  .topbar nav a,
  .nav-wrap nav a {
    flex: 0 0 auto !important;
  }

  /* 3) Ocultar fila redundante de pills en Home móvil */
  .drex-trust-bar {
    display: none !important;
  }

  /* 4) Hero de Música apilado verticalmente */
  .album-hero,
  .music-hero,
  .hero-split,
  .hero-grid,
  .album-layout,
  .music-layout {
    display: block !important;
  }

  .album-hero > *,
  .music-hero > *,
  .hero-split > *,
  .hero-grid > *,
  .album-layout > *,
  .music-layout > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  .album-hero img,
  .music-hero img,
  .hero-split img,
  .hero-grid img,
  .album-layout img,
  .music-layout img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 14px !important;
  }

  /* 5) Compactar visualmente home y música */
  .drex-home-premium-band,
  .drex-conv-card,
  .album-hero,
  .music-hero {
    margin-bottom: 12px !important;
  }

  .drex-conv-card {
    padding: 14px !important;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: clamp(1.8rem, 9vw, 2.8rem) !important;
    line-height: 1.0 !important;
  }

  h2 {
    font-size: clamp(1.25rem, 6vw, 1.8rem) !important;
  }

  .drex-home-premium-band {
    padding: 14px !important;
  }

  .drex-conv-card p,
  .album-hero p,
  .music-hero p {
    font-size: 0.98rem !important;
    line-height: 1.5 !important;
  }

  .hero-actions a,
  .hero-actions button,
  .actions a,
  .actions button {
    width: 100% !important;
    justify-content: center !important;
  }
}
/* DREX MOBILE FINAL TUNING END */

/* DREX MOBILE LAST FIX START */
@media (max-width: 820px) {
  html, body {
    overflow-x: hidden !important;
  }

  /* forzar header más compacto */
  header,
  .site-header,
  .topbar,
  .nav-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* candidatos amplios de navegación superior */
  header nav,
  header .menu,
  header .nav,
  header .nav-links,
  header ul,
  .site-header nav,
  .site-header .menu,
  .site-header .nav-links,
  .topbar nav,
  .nav-wrap nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  header nav::-webkit-scrollbar,
  header .menu::-webkit-scrollbar,
  header .nav::-webkit-scrollbar,
  header .nav-links::-webkit-scrollbar,
  header ul::-webkit-scrollbar,
  .site-header nav::-webkit-scrollbar,
  .site-header .menu::-webkit-scrollbar,
  .site-header .nav-links::-webkit-scrollbar,
  .topbar nav::-webkit-scrollbar,
  .nav-wrap nav::-webkit-scrollbar {
    display: none !important;
  }

  header nav > *,
  header .menu > *,
  header .nav > *,
  header .nav-links > *,
  header ul > *,
  .site-header nav > *,
  .site-header .menu > *,
  .site-header .nav-links > *,
  .topbar nav > *,
  .nav-wrap nav > * {
    flex: 0 0 auto !important;
  }

  /* por si el dock inferior usa selectores distintos */
  .drex-sticky-dock,
  .sticky-dock,
  .bottom-dock,
  .mobile-dock,
  .mobile-bottom-nav,
  .bottom-nav,
  .bottom-nav-mobile {
    display: none !important;
  }

  body {
    padding-bottom: 20px !important;
  }
}
/* DREX MOBILE LAST FIX END */