/* ── between the two boards: the primary nav no longer fits next to the
      action buttons, so it collapses into the burger the header already has ── */

@media (max-width: 1199px) {
  .header__nav { display: none; }
  .hero__content { right: 20px; width: 420px; }
  .hero__heading { font-size: 34px; line-height: 38px; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE  —  Figma frame 390
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── header ── */
  .header__strip-inner { padding: 4px 10px; }
  .venues { justify-content: center; }

  .header__bar { height: 47.5px; gap: 8px; }
  .header__logo img { width: 120px; }
  .header__nav, .header__menu { display: none; }
  .btn { width: 112px; gap: 6px; padding: 10px; font-size: 11.2px; }
  .btn img { width: 16px; height: 16px; }

  /* ── hero: portrait artwork, copy stacked over its lower third ── */
  .hero { padding-top: 12px; }
  .hero .container { padding-inline: 15px; }

  .hero__link { aspect-ratio: 330 / 472.9; }

  .hero__content {
    top: auto;
    right: auto;
    left: 0;
    bottom: 27.5px;
    width: 100%;
    height: auto;
    padding-top: 9px;
  }

  .hero__eyebrow { display: none; }

  .hero__heading {
    width: 241px;
    margin: 0 0 9px;
    padding-inline: 15px;
    font-size: 24px;
    line-height: 28.5px;
  }

  .hero__sub {
    position: static;
    translate: none;
    order: 1;
    margin-bottom: 11px;
    font-size: 13.6px;
  }

  .hero__cta { order: 2; width: 200px; padding: 15px; }

  .hero__nav { display: none; }

  /* ── rows ── */
  .rows { padding-top: 10px; }
  .row  { margin-bottom: var(--row-gap); }

  .row .container { padding-inline: 10px; }
  .row__title { font-size: 19.2px; }
  .row__nav   { display: none; }

  /* ── "Top novedades": compact list rows ── */
  .ranked {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 0;
  }

  .ranked__item {
    display: grid;
    grid-template-columns: 73px 37px 37px 1fr;
    align-items: center;
    height: 51px;
    border-bottom: 1px solid var(--surface);
    padding-bottom: 10px;
  }

  .ranked__num { display: none; }

  .ranked__media {
    width: 69px;
    height: 51px;
    border-radius: 4px;
  }

  .ranked__media img { height: 100%; aspect-ratio: auto; }

  .ranked__num-inline {
    display: block;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    color: var(--ink);
  }

  .ranked__play { display: block; height: 30px; background: url("../assets/icons/play-oval.svg") center / 30px 30px no-repeat; }

  .ranked__caption {
    min-height: 0;
    padding: 0 0 0 6px;
    background: none;
    border-radius: 0;
  }

  /* ── main / contact / footer ── */
  .main { padding: 16px 10px; }
  .main__strip { flex-wrap: wrap; padding-right: 0; }
  .main__strip img { flex: 1 0 45%; height: 90px; }

  .contact__title { margin-bottom: 45px; font-size: 22px; line-height: 26px; }
  .contact__list { flex-direction: column; align-items: center; gap: 34px; }
  .contact__item { width: 100%; max-width: 355px; }

  .prefooter__list { grid-template-columns: 1fr; }

  .footer__awards { grid-template-columns: 1fr; }
  .footer__award-box { flex-direction: column; padding: 20px; }
  .footer__award-list { flex-wrap: wrap; justify-content: center; gap: 15px 5px; }
  .footer__links { row-gap: 6px; }

  /* ── sticky bottom navigation ── */
  .bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: block;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(5px);
    border-radius: 8px 8px 0 0;
  }

  .bottomnav ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 600px;
    margin-inline: auto;
    gap: 4px;
    padding-inline: 6px;
  }

  .bottomnav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 10px 6px 12px;
    font-size: 9.6px;
    text-align: center;
    color: var(--ink);
  }

  .bottomnav img { width: 22px; height: 22px; }

  body { padding-bottom: 57px; }
}

/* ── narrow phones ── */
@media (max-width: 400px) {
  .bottomnav a { padding-inline: 2px; }
  .bottomnav li:nth-child(4) span { max-width: 94px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}