/* ============================================================
   DJ TODAY — RESPONSIVE
   Desktop-first imersivo. Os efeitos GSAP (pins, reveals, scrub,
   ScrollSmoother) permanecem intactos — aqui só ajustamos
   layout/escala por viewport. Não altera style.css.

   Ordem: telas grandes (escalonamento desktop) → tablet (1024)
          → celular (768) → celular pequeno (480).
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   TELAS GRANDES — escalonamento do desktop (mantido)
   ════════════════════════════════════════════════════════════ */

@media screen and (max-width: 1900px) {
  .footer-links-box {
    gap: 55vw;
  }
}

@media screen and (max-width: 1840px) {
  .schedule-item p {
    font-size: 2.2rem;
  }

  .soundcloud-item p {
    font-size: 2.2rem;
  }

  .txt-box h2 {
    font-size: 7rem;
  }

  .manifest p {
    font-size: 7rem;
  }
}

@media screen and (max-width: 1680px) {
  .sponsors-header {
    grid-template-columns: 7fr 5fr;
  }

  .sponsors-signature-bg {
    position: absolute;
    top: 45%;
    right: 0%;
    transform: translate(-50%, -50%);
    width: 70%;
    pointer-events: none;
    opacity: 1;
    z-index: 0;
  }
}

@media screen and (max-width: 1580px) {
  .today-front-side {
    max-height: 90%;
  }

  .timer-txt .timer p {
    font-size: 5rem;
  }

  .footer-links-box {
    gap: 50vw;
  }

  /* VERSUS */
  .versus img {
    width: 380px;
  }

  .hero-today-content-txt-block {
    max-width: 100%;
    width: 100%;
    margin-right: 0;
  }

  .hero-today {
    padding-right: 1.5rem;
  }

  .txt-box h2 {
    font-size: 6rem;
  }

  .txt-box p {
    font-size: 1.8rem;
  }

  .txt-double-box {
    max-width: 390px;
  }
  /* HERO */
  .hero-btn {
    width: 16rem;
    height: 3.5rem;
    font-size: 1.4rem;
  }

  /* HERO - TODAY */
  .hero-today-content h1 {
    font-size: 15rem;
  }

  /* STYLES BOX */
  .styles-box p {
    font-size: 1.7rem;
    max-width: 70rem;
    text-align: center;
  }

  .styles-box h2 {
    font-size: 6rem;
    margin-bottom: 1.3rem;
  }

  .hero-today-content img {
    max-height: 70dvw;
    align-self: flex-end;
  }

  /* SUBMENU */
  .submenu-links {
    padding-right: 0;
  }

  .submenu-footer {
    padding-right: 0;
  }

  .submenu-link a,
  .submenu-link-text {
    font-size: 5rem;
  }

  .submenu-gallery {
    gap: 1.5rem;
    padding-left: 3rem;
  }

  /* CALENDÁRIO */
  .schedule-item p {
    font-size: 1.8rem;
  }

  /* Notebooks (1580px): texto e botões lado a lado, com o texto
     alinhado ao centro vertical do bloco de botões. */
  .schedule-cta .timer-txt {
    align-items: center;
    flex-direction: column;
    align-items: center;
  }

  .text-signature .signature {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 500px;
    z-index: 1;
    width: 100%;
    height: 400px;
  }

  .schedule-item .btn {
    font-size: 1.2rem;
  }

  a.btn-icons svg,
  .schedule-item .btn-ticket .ticket-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .schedule .cta-box .btn {
    font-size: 1.4rem;
    height: 3.5rem;
  }

  .cta-box p {
    font-size: 2.5rem;
  }

  .sponsors-h2 {
    font-size: 6rem;
  }

  .sponsors-desc p {
    font-size: 1.8rem;
  }

  /* SOUNDCLOUD */
  .soundcloud-item .btn {
    font-size: 1.2rem;
    height: 3rem;
  }
  .soundcloud-item p {
    font-size: 1.8rem;
  }

  .soundcloud-list-column p {
    font-size: 1.1rem;
  }

  .soundcloud-item {
    grid-template-columns: 0.5fr 6fr 2fr 2fr;
    padding-bottom: 2.5rem;
  }

  .soundcloud-list-column {
    grid-template-columns: 0.5fr 6fr 2fr 2fr;
    padding-bottom: 2.5rem;
  }

  .soundcloud-list {
    gap: 2.5rem;
  }

  .soundcloud .cta-box .btn {
    max-width: 29rem;
  }

  .featured-event-overlay {
    grid-template-columns: 1fr 3fr 4.5fr 1.5fr 2.5fr;
  }

  .cta-btns .btn {
    font-size: 1.4rem;
  }

  .featured-event-overlay .when h2 {
    font-size: 3.9rem;
  }

  .timer-txt p {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 1430px) {
  .manifest p {
    padding: 0 5rem 24rem 5rem;
  }
  /* SOUNDCLOUD */
  .soundcloud-header-txt h2 {
    font-size: 6rem;
  }

  .soundcloud-header-txt p {
    font-size: 1.8rem;
  }

  .versus img {
    width: 330px;
  }
  .timer-txt .timer p {
    font-size: 5rem;
  }
  .timer-txt p {
    font-size: 2.5rem;
  }
  .text-signature h1 {
    font-size: 6rem;
  }
  .next-event .text-signature h1 {
    font-size: 8rem;
  }

  /* COMMIT */
  .commit .txt-scroll-box .txt-to-sticky p {
    font-size: 4.5rem;
  }
  .commit .txt-to-scroll p {
    font-size: 4.5rem;
  }

  /* FEATURED-EVENT */
  .featured-event-overlay .house-name h2 {
    font-size: clamp(2.5rem, 8vw, 5rem);
  }
  .featured-event-overlay .when h2 {
    font-size: 3.5rem;
  }
  .featured-event-overlay .event-local h2 {
    font-size: 2rem;
  }
  .featured-event-overlay .event-local h2 {
    font-size: 2rem;
  }
  .featured-event-overlay .when p {
    font-size: 1.2rem;
  }
  .featured-event-overlay .event-local p {
    font-size: 1.2rem;
  }
  .featured-event-overlay .overlay-btn a {
    padding: 1rem;
    font-size: 1.2rem;
  }
  .featured-event-overlay .bi {
    width: 2.5rem;
  }
}

/* ════════════════════════════════════════════════════════════
   TABLET — ≤ 1024px
   Tipografia fluida (clamp) começa aqui e cobre também o celular.
   O teto de cada clamp = tamanho original de desktop, então acima
   de 1024px nada muda.
   ════════════════════════════════════════════════════════════ */

@media screen and (max-width: 1024px) {
  /* ── Tipografia de impacto: fluida por viewport ──
     nowrap + desliza na horizontal → pode transbordar à vontade,
     então puxamos bem maior no mobile. */
  .impact h1 {
    font-size: clamp(5rem, 24vw, 14rem);
  }

  .logo-manifest {
    height: clamp(4rem, 13vw, 8.125rem);
  }

  .txt-box h2 {
    font-size: clamp(3rem, 11vw, 8rem);
  }

  .txt-box p {
    font-size: clamp(1.1rem, 3.4vw, 2rem);
  }

  .text-signature h1,
  .footer .text-signature h1 {
    font-size: clamp(2rem, 12vw, 4rem);
    font-weight: 1000;
  }

  .next-event h2 {
    font-size: clamp(2rem, 13vw, 7rem);
  }

  .sponsors-h2 {
    font-size: clamp(2.8rem, 12vw, 8rem);
  }

  .sponsors-desc p {
    font-size: 2rem;
  }

  .soundcloud-header-txt h2 {
    font-size: 4.5rem;
  }

  .soundcloud-header-txt p {
    font-size: 2rem;
  }

  .styles-box h2 {
    font-size: clamp(2.8rem, 11vw, 8rem);
  }

  .styles-box p {
    font-size: clamp(1.1rem, 3.4vw, 2rem);
  }

  /* COMMIT em coluna no touch: label grande em cima (espírito do
     .styles-box h2) e palavras menores em crossfade embaixo */
  .commit .txt-scroll-box .txt-to-sticky p {
    font-size: clamp(2.6rem, 9vw, 5.5rem);
  }

  .commit .txt-to-scroll p {
    font-size: clamp(2rem, 9vw, 3.5rem);
  }

  .hero-today-content h1 {
    font-size: clamp(6rem, 26vw, 23.75rem);
  }

  .share .share-txt h1,
  .share .share-txt h2 {
    font-size: clamp(2.6rem, 9vw, 5rem);
  }

  /* STYLES — a esfera estava ancorada no topo da seção (sem top/left), enquanto
     o texto das .styles-box é centralizado: no tablet/celular a bola "fugia"
     para cima e o conteúdo não travava sobre ela. No tablet a ampliamos para
     "rasgar" a tela (igual ao mobile) e a centralizamos exatamente no centro,
     onde o pin (start center center) trava. NÃO usar transform aqui: a regra
     base .sphere tem `animation: orbit` (rotate infinito), que sobrescreve
     qualquer transform estático. Centralizamos via margens negativas (metade
     da largura/altura), igual ao padrão do .manifest .sphere. */
  .styles .sphere {
    width: 130dvw;
    height: 130dvw;
    left: 50%;
    top: 50%;
    margin-left: -65dvw;
    margin-top: -65dvw;
  }

  /* ── Reduz folgas verticais exageradas no tablet ── */
  .sponsors {
    padding: 10rem 1.5rem;
  }

  .schedule-visor + .sponsors {
    padding-top: 16rem;
  }
}

/* ════════════════════════════════════════════════════════════
   CELULAR + TABLET — ≤ 1024px
   Reestruturação real: grids viram 1 coluna, tabelas viram cards
   (vale também no iPad em pé, onde antes a tabela de colunas
   estourava), o menu/cabeçalho compacta e as seções imersivas se
   adaptam. Refinos específicos de tablet vêm no bloco logo abaixo.
   ════════════════════════════════════════════════════════════ */

@media screen and (max-width: 1024px) {
  /* ─────────────────────────────────────────────
     CABEÇALHO / MENU
     ───────────────────────────────────────────── */
  nav.menu {
    min-height: 6rem;
    padding-left: 1rem;
  }

  .menu-btns {
    gap: 1.1rem;
    padding: 1rem 0;
  }

  .soundbar {
    gap: 0.7rem;
  }

  .soundbar p {
    font-size: 1.1rem;
  }

  #sound-wave {
    width: 120px;
    height: 34px;
  }

  .logo-img {
    width: 5.5rem;
    height: auto;
  }

  header.is-scrolled .logo-img {
    width: 5.5rem;
  }

  .lottie-menu-btn {
    right: 1.5rem;
    height: 6rem;
  }

  #menu-lottie-canvas {
    width: 46px;
    height: 46px;
  }

  .menu-icon-placeholder {
    width: 46px;
    height: 28px;
  }

  #overlay-close-btn {
    right: 1rem;
    height: 6rem;
  }

  /* ─────────────────────────────────────────────
     SUBMENU (overlay de navegação)
     A galeria some no mobile — centraliza a navegação.
     ───────────────────────────────────────────── */
  .submenu-grid {
    justify-content: center;
  }

  .submenu-gallery {
    display: none;
  }

  .submenu-nav {
    width: 100%;
    padding: 2rem 1.5rem 3rem;
  }

  .submenu-links {
    padding-right: 0;
    align-items: center;
    gap: 0.75rem;
  }

  .submenu-link a,
  .submenu-link-text {
    font-size: clamp(2.8rem, 12vw, 4rem);
  }

  .submenu-footer {
    padding-right: 0;
    align-items: center;
  }

  .submenu-signature-lottie {
    width: 25rem;
  }

  .submenu-socials-list {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ─────────────────────────────────────────────
     HERO (home)
     ───────────────────────────────────────────── */
  .hero {
    height: calc(100dvh - 1.5rem);
    padding: 1rem 1rem 0 1rem;
  }

  .hero-btn {
    width: clamp(10rem, 60vw, 16.75rem);
    font-size: 1.3rem;
  }

  .scroll-text {
    font-size: 0.85rem;
  }

  /* ─────────────────────────────────────────────
     MANIFESTO
     A esfera decorativa é contida para não gerar scroll lateral.
     ───────────────────────────────────────────── */
  .manifest {
    padding: 5rem 1rem;
    gap: 20rem;
    height: auto;
    overflow: hidden;
  }

  .manifest p {
    /* padding-top dá folga p/ o acento (´ ` ~ ^) da 1ª linha: com line-height
       normal ele ultrapassa o topo da caixa e o overflow:hidden do .manifest
       (contém a .sphere) o decepa no Safari/iOS — ex.: HÁ vira HA. */
    padding: 0.25em 6rem 8rem 6rem;
    font-size: 3rem;
  }

  .manifest .sphere {
    width: 165vw;
    left: 50%;
    margin-left: -82.5vw;
    bottom: -25%;
  }

  /* ─────────────────────────────────────────────
     VERSUS (Sábio × Mago) — layout estilo "Lando Norris"
     A seção é PINADA (fica fixa enquanto a .schedule sobe por
     cima), então tudo precisa caber em ~1 viewport.
     Estrutura: ocupa a tela inteira (100svh). Em cima, os dois
     títulos + descrições em DUAS COLUNAS (Sábio | Mago) e um
     botão único central. Embaixo, as duas faces espelhadas
     GRANDES, encostadas no rodapé e cortadas pelas bordas
     (bleed), se encarando no centro.
     `align-content: space-between` empurra o texto p/ o topo e
     as imagens p/ o rodapé. O slide lateral do GSAP (xPercent)
     continua funcionando.
     ───────────────────────────────────────────── */
  .versus {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr; /* linha 1: textos (natural) · linha 2: faces (resto da tela) */
    grid-template-areas:
      "txt txt"
      "imgL imgR";
    align-items: stretch;
    min-height: 100svh;
    max-height: 100svh; /* trava em 1 tela (seção pinada) */
    padding: 5.5rem 0 0 0; /* respiro p/ o header fixo; sem padding lateral p/ o bleed */
  }

  /* Texto + botão: linha 1, ocupa as duas colunas */
  .double-txt-box-btn {
    grid-area: txt;
    position: static;
    transform: none;
    top: auto;
    left: auto;
    width: 100%;
    gap: 1.5rem;
    padding: 0 5rem; /* respiro lateral só no texto */
  }

  /* Dois títulos lado a lado, apontando p/ o centro (espelham as faces) */
  .txt-double-box {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    max-width: 100%;
    /* Preenche a largura da coluna de texto. Sem isto o container encolhe ao
       conteúdo (o pai é flex-column com align-items:center) e, como as
       reveal-lines encolhem mais que o texto normal, as colunas .txt-box ficavam
       com largura MENOR no render do que na medição → a linha mais longa
       re-quebrava (palavra órfã). Com largura fixa, medição e render coincidem. */
    width: 100%;
  }

  .versus .txt-box {
    flex: 1 1 0;
    max-width: 50%;
  }

  .versus .txt-box h2 {
    font-size: clamp(1.7rem, 7.5vw, 3rem);
    line-height: 1.05;
  }

  .versus .txt-box p {
    font-size: clamp(0.8rem, 3vw, 1rem);
    line-height: 1.3;
  }

  .right-align {
    text-align: right;
  }

  .left-align {
    text-align: left;
  }

  .versus .btn {
    width: fit-content;
    padding: 0.55rem 1.5rem;
    font-size: clamp(0.8rem, 2.6vw, 1rem);
    border-radius: 10px;
  }

  .soundcloud .cta-btns {
    justify-content: center;
  }

  .soundcloud-header {
    flex-direction: column;
  }

  /* Faces: linha 2, preenchem todo o espaço restante e se encaram.
     object-fit:cover + object-position:left jogam o nariz (que fica
     à esquerda na arte) para o centro — inclusive na face .inverted,
     onde o scaleX(-1) espelha a posição para a direita.
     object-position TOP: o corte do cover acontece embaixo (peito),
     nunca em cima — a cabeça do DJ fica sempre inteira. */
  .versus .inverted {
    grid-area: imgL;
  }

  .versus img:not(.inverted) {
    grid-area: imgR;
  }

  .versus img,
  .versus .inverted {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none;
    align-self: stretch;
    object-fit: cover;
    object-position: left top;
  }

  /* ─────────────────────────────────────────────
     AGENDA — assinatura + timer
     ───────────────────────────────────────────── */
  .schedule {
    padding: 5rem 1rem;
  }

  .text-signature {
    margin: 5rem 0 3rem 0;
  }

  .text-signature .signature {
    height: clamp(180px, 52vw, 500px);
  }

  .timer-txt,
  .schedule-cta .timer-txt {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 4rem;
    text-align: center;
  }

  .timer {
    justify-content: center;
    text-align: center;
  }

  /* Máximo reduzido (4rem → 3rem) para "EVENTO EM ANDAMENTO" não quebrar
     linha no tablet. Só afeta a faixa tablet (onde o clamp bate o teto);
     o mobile já escala pelo 8vw. Não altera os números (.timer p). */
  .timer h2 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  /* Contagem da agenda/home numa linha: 12vw estourava a tela em ~360-390px. */
  .timer-txt .timer p {
    font-size: clamp(1.7rem, 8.5vw, 4rem);
  }

  .timer-txt .timer p i {
    margin-right: 0.3em;
  }

  .timer-txt p {
    font-size: clamp(1.3rem, 5vw, 3rem);
  }

  /* ─────────────────────────────────────────────
     AGENDA — TABELA compacta (tablet + mobile)
     Data em "dd.mm", local sem cidade e os três links (ticket,
     share, instagram) agrupados numa única coluna "LINKS". A
     coluna de links tem LARGURA FIXA → cabeçalho e todas as
     linhas compartilham as mesmas colunas (fica tudo alinhado,
     inclusive a linha de evento privado).
     ───────────────────────────────────────────── */
  .schedule-item .cell-full {
    display: none;
  }
  .schedule-item .cell-short {
    display: inline;
  }
  /* Cabeçalho: mostra "LINKS", esconde "INGRESSOS" */
  .schedule-list-column .col-desktop {
    display: none;
  }
  .schedule-list-column .col-compact {
    display: inline-block;
  }

  .schedule-list-column,
  .schedule-item {
    grid-template-columns:
      minmax(0, 0.55fr) minmax(0, 1.4fr) minmax(0, 1fr)
      9.5rem;
    gap: 1rem;
    align-items: center;
  }

  /* Coluna LINKS: rótulo alinhado à esquerda */
  .schedule-list-column .txt-reveal-wrap-group {
    text-align: left;
  }
  .schedule-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
  }

  /* Botão "COMPRAR INGRESSO" → ícone */
  .schedule-item .btn-ticket {
    background: transparent;
    height: auto;
    padding: 0;
    border-radius: 0;
    overflow: visible;
    justify-content: center;
  }

  .schedule-item .btn-ticket .btn-ticket-txt {
    display: none;
  }

  .schedule-item .btn-ticket .ticket-icon {
    display: block;
  }

  .schedule-item .btn-ticket .ticket-icon path {
    fill: var(--light-gray);
    transition: fill 0.3s ease;
  }

  .schedule-item .btn-ticket:hover .ticket-icon path {
    fill: var(--purple);
  }

  /* Evento privado: canvas + "EVENTO PRIVADO" → cadeado (um pouco maior) */
  .schedule-item .evento-privado-label {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .schedule-item .evento-privado-label .line-lottie-privado,
  .schedule-item .evento-privado-label p {
    display: none;
  }

  .schedule-item .evento-privado-label .lock-icon {
    display: block;
    height: 2.5rem;
    width: auto;
  }

  .schedule-item .evento-privado-label .lock-icon path {
    fill: var(--light-gray);
  }

  /* ─────────────────────────────────────────────
     CTAs genéricas → 1 coluna, botões full-width
     ───────────────────────────────────────────── */
  .cta {
    margin-top: 6rem;
  }

  .cta-box,
  .schedule .cta-box,
  .soundcloud .cta-box {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    text-align: center;
  }

  .cta.hero-cta .cta-box {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 1rem;
    row-gap: 1.75rem;
    text-align: center;
  }

  /* texto ocupa a linha inteira; os dois botões ficam lado a lado */
  .cta.hero-cta .cta-box > .txt-reveal-wrap {
    flex: 0 0 100%;
  }

  .cta.hero-cta .cta-box p {
    max-width: 100%;
    text-align: center;
  }

  /* O <p> é inline-block dentro de .txt-reveal-wrap, então encolhe até a
     largura do texto — centralizá-lo depende do wrapper. Liberamos a largura
     (o desktop usa fit-content) e centralizamos o inline-block por ele. */
  .cta.hero-cta.different .txt-reveal-wrap {
    max-width: 100%;
    width: 100%;
    text-align: center;
  }

  .cta-box p {
    font-size: 2rem;
  }

  .cta-btns {
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    padding: 0.5rem 2rem;
  }

  .cta-box .btn,
  .cta-btns .btn,
  .soundcloud .cta-box .btn {
    width: 100%;
    max-width: fit-content;
  }

  /* Mobile: texto ocupa a linha inteira e os dois botões ficam
     lado a lado (row), no tamanho natural, empurrados para as
     pontas (space-between) */
  .cta-box,
  .schedule .cta-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 1rem;
    row-gap: 1.75rem;
  }

  .cta-box > .txt-reveal-wrap,
  .cta-box > p,
  .schedule .cta-box > p {
    flex: 0 0 100%;
  }

  .cta-box .btn,
  .schedule .cta-box .btn {
    width: auto;
    max-width: fit-content;
    flex: 0 1 auto;
    padding: 0.5rem 2rem;
  }

  /* soundcloud tem só um botão — mantém o layout empilhado */
  .soundcloud .cta-box {
    display: grid;
  }

  .soundcloud {
    margin-top: 0;
  }

  /* Mobile: "BAIXAR AGENDA SEMANAL" → "BAIXAR AGENDA" */
  .weekly-download-semanal {
    display: none;
  }

  .schedule-cta {
    padding: 5rem 1rem;
  }

  /* ─────────────────────────────────────────────
     PATROCINADORES
     ───────────────────────────────────────────── */
  .sponsors {
    padding: 6rem 1rem;
  }

  /* Domo do visor crescia demais no mobile (200px). Reduz a altura
     e a margem casada (margin-bottom precisa = -height, senão a
     .sponsors desencaixa verticalmente). */
  .schedule-visor {
    height: 110px;
    margin-bottom: -110px;
  }

  .schedule-visor + .sponsors {
    padding-top: 10rem;
  }

  .sponsors-header {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .sponsors-desc {
    justify-self: start;
    padding-top: 0;
  }

  .sponsors-marquee {
    margin-top: 3rem;
    padding: 1.5rem 0;
  }

  .sponsors-track {
    gap: 2.5rem;
  }

  .sponsors-track img {
    height: clamp(7rem, 13vw, 10rem);
  }
  /* BOTÕES */
  .cta.hero-cta .cta-box a.btn,
  .cta.hero-cta .cta-box span.btn {
    height: auto;
    padding: 0.5rem 1rem;
    width: auto;
    max-width: none;
    flex: 0 1 auto;
  }
  .hero-today-content a.btn {
    padding: 1rem 2rem;
  }
  .cta.hero-cta .cta-box a {
    font-size: 1.1rem;
    font-weight: 700;
  }
  .featured-event-overlay .overlay-btn a {
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
  }
  .featured-event-overlay .house-name {
    padding: 0.5rem 1rem;
  }
  .featured-event-overlay .house-name {
    background-color: transparent;
  }

  /* ─────────────────────────────────────────────
     REVEAL / SOUNDCLOUD
     ───────────────────────────────────────────── */

  /* No touch, escalar o vetor a ~42x re-rasterizando trava. Promovemos a uma
     camada de GPU (textura escalada pelo compositor): fica levemente pixelado —
     aceitável no celular — em troca de scroll fluido. No desktop fica sem isso e
     re-rasteriza nítido. Casa com force3D condicional em initRevealZoom. */
  .reveal svg.logo-reveal {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .soundcloud {
    padding: 5rem 1rem;
  }

  .soundcloud-header {
    gap: 1.5rem;
    align-items: start;
  }

  .soundcloud-header > img {
    width: 60%;
    height: auto;
  }

  .soundcloud-list {
    gap: 1.1rem;
    margin-top: 4rem;
  }

  .soundcloud-list-column {
    display: none;
  }

  /* SOUNDCLOUD — item vira linha estilo Spotify */
  .soundcloud-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.6rem 0;
    border: none;
    border-radius: 0;
    background: none;
  }

  /* Número da faixa → discreto e cinza à esquerda */
  .soundcloud-item > p:first-child {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--light-gray);
    flex-shrink: 0;
    min-width: 1.75rem;
    justify-content: center;
  }

  /* Estilo/gênero passa a viver como sufixo do subtítulo */
  .soundcloud-item > .soundcloud-style {
    display: none;
  }

  .soundcloud .soundcloud-track {
    flex: 1;
    min-width: 0;
    gap: 1rem;
    align-items: center;
  }

  .soundcloud .soundcloud-image,
  .soundcloud .soundcloud-image img {
    width: 6rem;
    height: 6rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
  }

  .soundcloud .soundcloud-track-text {
    min-width: 0;
  }

  .soundcloud .soundcloud-track-text p {
    /* display:block sobrescreve o display:flex herdado de `.soundcloud-item p`
       (style.css) — text-overflow:ellipsis não funciona em container flex. */
    display: block;
    font-size: 2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .soundcloud .soundcloud-track-text span {
    font-size: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Autor • Estilo (sufixo só quando há estilo) */
  .soundcloud .soundcloud-track-text span[data-style]::after {
    content: " • " attr(data-style);
  }

  /* CTA vira botão redondo de play (roxo, ícone branco) */
  .soundcloud-item .soundcloud-cta {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--purple);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .soundcloud-item .soundcloud-cta-text {
    display: none;
  }

  .soundcloud-cta .soundcloud-play-icon {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--white);
    margin-left: 0.15rem; /* centra opticamente o triângulo */
  }

  .soundcloud .cta {
    margin-top: 5rem;
  }

  /* ─────────────────────────────────────────────
     EVENTO EM DESTAQUE (overlay sobre o vídeo)
     5 colunas → coluna única tipo pôster.
     ───────────────────────────────────────────── */
  .featured-event-overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    column-gap: 0;
    gap: 1.25rem;
    padding: 0rem 2.5rem 1rem;
  }

  .featured-event-overlay .house-name {
    align-self: flex-start;
    padding: 0;
  }

  /* Texto da casa volta a ser horizontal no mobile */
  .featured-event-overlay .house-name h2 {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: clamp(2.2rem, 9vw, 5rem);
  }

  .featured-event-overlay .when,
  .featured-event-overlay .event-local {
    padding-top: 0;
    gap: 0.75rem;
  }

  .featured-event-overlay .when h2 {
    font-size: clamp(2rem, 7vw, 5rem);
  }

  .featured-event-overlay .event-local h2 {
    font-size: clamp(1.5rem, 5vw, 3rem);
  }

  .featured-event-overlay .when p,
  .featured-event-overlay .event-local p {
    font-size: 1rem;
    color: var(--light-gray);
  }

  /* margin-top:auto empurra os ícones + botão para a base do pôster */
  .featured-event-overlay .share-btns {
    position: absolute;
    top: 0;
    right: 1.5rem;
    align-items: flex-start;
    flex-direction: column;
    gap: 1.5rem;
    background-color: var(--black);
    border-radius: 0 0 0 var(--radius-16);
    padding: 0 0 1rem 1rem;
  }

  .house-name .curved-border {
    display: none;
  }

  /* ── FEATURED EVENT: curvas do .share-btns (mobile/tablet) ── */
  .featured-event .share-btns .curved-border {
    display: block;
  }

  .featured-event .share-btns .curved-border.superior-rigth {
    width: 2.5rem;
    height: 2.5rem;
    top: -4px;
    left: -36px;
    transform: rotate(270deg);
  }

  .featured-event .share-btns .curved-border.inferior-left {
    width: 2.5rem;
    height: 2.5rem;
    bottom: -36px;
    left: 28px;
    transform: rotate(270deg);
  }

  /* ── EVENT-PAGE: curvas do .share-btns (mobile/tablet) ── */
  .featured-event.event-page .share-btns .curved-border {
    display: block;
  }

  .featured-event.event-page .share-btns .curved-border.superior-rigth {
    top: -4px;
    left: 60px;
    transform: rotate(180deg);
  }

  .featured-event.event-page .share-btns .curved-border.inferior-left {
    bottom: -35px;
    left: 4px;
    transform: rotate(180deg);
  }

  /* ── Layout exclusivo das páginas únicas de evento (event-page.php) ──
     Componente compartilhado: só a variante .event-page recebe estas regras. */
  .featured-event.event-page {
    height: calc(100dvh - 2rem);
  }

  .featured-event.event-page .share-btns {
    top: 0;
    right: auto;
    left: 1rem;
    border-radius: 0 0 16px 0;
    padding: 0 1rem 1rem 0;
  }

  /* Toast do "copiar link" abre para a direita aqui: o grupo de ícones fica
     encostado na borda esquerda, então usar "right" (padrão) o jogaria para fora da tela. */
  .featured-event.event-page .share-copy-toast {
    right: auto;
    left: calc(100% + 0.75rem);
  }

  .featured-event-overlay .bi {
    width: 3rem;
  }

  .privacy-hero-sub {
    text-align: left;
  }

  /* Ingresso vira ícone dentro do .share-btns, acima do botão de share */
  .featured-event-overlay .featured-ticket-btn {
    display: block;
    color: var(--white);
    cursor: pointer;
  }

  .featured-event-overlay .featured-ticket-btn .ticket-icon {
    width: 3rem;
    height: 3rem;
  }

  .featured-event-overlay .featured-ticket-btn .ticket-icon path {
    fill: var(--white);
    transition: fill 0.25s ease;
  }

  .featured-event-overlay .featured-ticket-btn:hover .ticket-icon path {
    fill: var(--purple);
  }

  /* O botão "COMPRAR INGRESSO" foi substituído pelo ícone acima */
  .featured-event-overlay .overlay-btn.--buy {
    display: none;
  }

  /* Remove a quebra de linha do título "QUANDO" no mobile/tablet */
  .featured-event-overlay .when h2 br {
    display: none;
  }

  .featured-event-overlay .overlay-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    padding: 0;
    background-color: transparent;
  }

  .featured-event-overlay .overlay-btn a {
    display: block;
    width: calc(100% - 3rem);
    text-align: center;
  }

  .share.interative {
    width: calc(100dvw - 1.5rem);
    height: calc(100dvh - 1.5rem);
  }

  #overlay-close-btn svg {
    width: 30px;
    height: 30px;
  }

  .share.interative .share-txt-btn p {
    font-size: 1.1rem;
  }

  /* CURVAS DO RODAPÉ */
  .made-by .curved-border.inferior-left {
    max-height: 1.5rem;
    max-width: 1.5rem;
    bottom: 12px;
    left: -21px;
  }

  .made-by .curved-border.inferior-rigth {
    max-height: 1.5rem;
    max-width: 1.5rem;
    bottom: 12px;
    right: -21px;
  }

  /* CURVAS HERO */
  .fixed-logo .curved-border.superior-left {
    bottom: -58px;
    left: 10px;
  }
  .fixed-logo .curved-border.superior-rigth {
    top: 10px;
    right: -50px;
  }
  /* CURVAS BTN-HERO */
  .btn-hero-box .curved-border.inferior-left {
    bottom: -10px;
    left: -58px;
  }
  .btn-hero-box .curved-border.inferior-rigth {
    top: -58px;
    right: 10px;
  }

  /* ─────────────────────────────────────────────
     TIMER PRÓXIMO EVENTO
     ───────────────────────────────────────────── */
  .next-event {
    gap: 4rem;
    padding: 5rem 1rem 5rem;
  }

  .next-event p {
    font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  }

  /* Contagem regressiva em 2 linhas: 00D 00H / 00M 00S.
     Em linha única o separador (margin 2rem) + nowrap estouravam a tela. */
  .next-event .text-signature h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    white-space: normal;
    line-height: 1.02;
    font-size: clamp(8.4rem, 13vw, 20rem);
  }

  .next-event .text-signature .cd-group {
    display: inline-flex;
    align-items: baseline;
  }

  .next-event i {
    margin-right: 0.4em;
  }

  .next-event .cd-group i:last-child {
    margin-right: 0;
  }

  /* ─────────────────────────────────────────────
     PÁGINA DO DJ TODAY — HERO
     ───────────────────────────────────────────── */
  .hero-today-content {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 8rem 1rem 3rem;
    gap: 2rem;
  }

  .hero-today-content > img {
    width: min(68vw, 380px);
    height: auto;
    justify-self: center;
    display: none;
  }

  .hero-today-content h1 {
    line-height: 0.9;
  }

  .hero-today-content-txt {
    gap: 2rem;
  }

  .hero-today-content-txt-block {
    max-width: 100%;
    align-self: stretch;
    margin-right: 0;
    gap: 2rem;
  }

  .hero-today-content h2 {
    font-size: clamp(1.6rem, 5vw, 3rem);
  }

  .hero-today-content p {
    font-size: clamp(1.1rem, 4vw, 2rem);
  }

  .hero-today-content a.btn {
    max-width: fit-content;
  }

  /* ─────────────────────────────────────────────
     ESTILOS MUSICAIS (pin + scale/blur)
     ───────────────────────────────────────────── */
  /* Gap entre a hero-today e a .styles enxuto no touch. A altura (220dvh no
     desktop) era só espaço reservado/morto: o curso do scroll pinado vem do JS
     (boxes.length × innerHeight + invalidateOnRefresh), independente deste
     height. Reduzir para 100dvh corta a folga vazia acima/abaixo sem afetar a
     animação. */
  .styles {
    margin-top: 2rem;
    height: 100dvh;
  }

  .styles-box {
    padding: 0 1.5rem;
  }

  .styles-box p {
    max-width: 90vw;
  }

  /* ─────────────────────────────────────────────
     COMMIT (lista revelada no touch)
     Layout em coluna: label grande em cima e as palavras
     empilhadas embaixo — o GSAP (ramo DJ_TOUCH de
     initCommitScroll) revela uma a uma; todas permanecem
     visíveis. O padding de 50vh sai: o pin é center center
     e o curso vem do pinSpacer do JS.
     ───────────────────────────────────────────── */
  /* Altura = 100dvh visíveis + ~25dvh de curso por passo da fila
     (4 passos para 5 palavras). O excedente não aparece: a section fica
     pinada (pinSpacing:false) mostrando só o primeiro viewport — é puro
     curso de scroll, papel que o padding de 50vh cumpre no desktop.
     É essa altura que dá espaço para o .impact subir por cima no final. */
  .commit {
    height: 200dvh;
  }

  .commit .txt-scroll-box {
    height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2.5rem;
  }

  .commit .txt-scroll-box .txt-to-sticky,
  .commit .txt-to-scroll {
    padding-block: 0;
  }

  .commit .txt-to-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: center;
  }

  /* ─────────────────────────────────────────────
     PÁGINA DO EVENTO — compartilhar (fan cards)
     O leque inteiro é reduzido via scale no contêiner,
     preservando as posições calculadas pelo GSAP.
     ───────────────────────────────────────────── */
  .share {
    padding: 5rem 1rem;
    gap: 2rem;
  }

  .share .fan-cards {
    height: 30rem;
    transform: scale(0.66);
    transform-origin: center;
  }

  .share .share-txt-btn p {
    font-size: 1.4rem;
    text-align: center;
  }

  .share .share-txt-btn a {
    width: min(80vw, 18.75rem);
    max-width: min(80vw, 18.75rem);
    padding: 0.5rem 1rem;
  }

  /* Overlay interativo de compartilhamento */
  .share.interative {
    padding: 2rem 1.5rem;
    gap: 1.5rem;
  }

  .share.interative .share-txt h1,
  .share.interative .share-txt h2 {
    font-size: clamp(2.2rem, 9vw, 4rem);
  }

  .share.interative .fan-cards {
    height: 24rem;
    transform: scale(0.74);
    transform-origin: center;
  }

  /* /AGENDA */
  .schedule.hero-schedule {
    height: auto;
    padding: 10rem 0 3rem 0;
  }
  .timer-txt.hero-timer p {
    margin-top: 3rem;
    text-align: center;
  }

  /* ─────────────────────────────────────────────
     RODAPÉ
     Altura automática + fluxo vertical; figura e CTA
     reduzem e as notches saem (layout reflui).
     ───────────────────────────────────────────── */
  .footer {
    padding: 2rem 1rem 1rem;
  }

  .footer-container {
    height: auto;
    min-height: auto;
    padding: 6rem 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  /* Tudo entra no fluxo da coluna e é ordenado via `order` — nada mais fica
     absoluto vazando da tela nem coberto pela figura.
     Ordem: título → figura → botão → links → copyright. */
  .footer .text-signature {
    order: 2;
  }

  .made-by {
    width: auto;
    max-width: 94vw;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .footer .text-signature h1 {
    font-size: clamp(2rem, 12vw, 5.5rem);
  }

  /* Imagem volta ao fluxo como último bloco da coluna: encosta no fundo e
     empurra os links para cima dela (sem sobrepor), com folga mínima via gap. */
  .today-front-side {
    order: 5;
    position: static;
    transform: none;
    width: 100vw;
    margin-top: auto; /* ancora no fundo; absorve espaço livre quando a tela
                           é mais alta que o conteúdo (mobile), mantendo o gap
                           mínimo quando o conteúdo preenche (tablet). */
  }

  /* Botão de orçamento flutua ~100px do fim do site, sobre a imagem. */
  .footer-container .btn {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 22rem);
    max-width: max-content;
    padding: 1rem 1.2rem;
    font-size: 1.1rem;
    height: auto;
    z-index: 100;
  }

  /* No touch o char-hover é desativado (ver animations.js → initButtonHover),
     então o <h2> interno volta a ser o ÚNICO rótulo do botão e precisa aparecer,
     dimensionado como o texto do botão. */
  .footer-container .btn h2 {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
  }

  /* PÁGINAS e SIGA-ME lado a lado, com bom respiro entre as colunas. */
  .footer-links-box {
    order: 1;
    gap: clamp(1.5rem, 7vw, 5rem);
    margin-top: 0;
    flex-flow: row nowrap;
    justify-content: center;
  }

  /* Copyright + política: barra preta CONTÍNUA no fim (full-width). O container
     ganha o fundo preto para preencher o vão central — sem o fundo, só `p` e `a`
     eram pretos e a imagem aparecia pelo buraco do meio. */
  .footer-copy-policy {
    order: 5;
    width: 100%;
    z-index: 11;
    background: var(--black);
    border-radius: var(--radius-16) var(--radius-16) 0 0;
  }

  .footer-links a {
    font-size: clamp(1.4rem, 5.2vw, 3rem);
  }

  .footer-links p {
    font-size: 1.1rem;
  }

  .footer-copy-policy p,
  .footer-copy-policy a {
    width: auto;
    max-width: 50%;
    font-size: 0.76rem;
    padding: 0.4rem 0.7rem;
  }

  .footer-copy-policy .curved-border {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .submenu-link a,
  .submenu-link-text {
    font-size: clamp(3.5rem, 12vw, 6rem);
  }
  .submenu-signature-lottie {
    width: 25rem;
  }

  /* Rodapé do submenu: botões viram ícones (economiza espaço/ilegibilidade
     dos nomes das redes em telas estreitas). */
  .submenu-socials-list {
    gap: 1.5rem;
  }
  .submenu-socials-list .social-label {
    display: none;
  }
  .submenu-socials-list .social-icon {
    display: block;
    width: 1.8rem;
    height: 1.8rem;
  }
  .submenu-socials-list a.social-btn {
    background-color: transparent;
    padding: 0;
  }
  .submenu-socials p {
    font-size: 0.8rem;
  }
  .submenu-socials p {
    margin-bottom: 1rem;
  }
  .soundcloud-header-txt p {
    font-size: 0.8rem;
  }
  .soundcloud-header-txt h2 {
    font-size: 2.5rem;
  }
  .soundcloud-header-txt p {
    font-size: 1rem;
  }
  .soundcloud-header-txt .tracks-count p {
    font-size: 0.8rem;
  }

  .hero-btn {
    width: fit-content;
    padding: 0.7rem 2rem;
    font-size: 0.8rem;
    height: auto;
  }
  .btn-hero-box {
    padding: 0.5rem 1.5rem 0 0.5rem;
  }
  .scroll-indicator {
    display: none;
  }
  .scroll-line-wrap {
    display: none;
  }
  /* VERSUS */
  .double-txt-box-btn {
    padding: 0 1.1rem;
  }

  /* CURVED-BORDER */
  .featured-event .share-btns .curved-border.superior-rigth {
    width: 2.5rem;
    height: 2.5rem;
    top: -4px;
    left: -36px;
    transform: rotate(270deg);
  }

  .featured-event .share-btns .curved-border.inferior-left {
    width: 2rem;
    height: 2rem;
    bottom: -28px;
    left: 11px;
    transform: rotate(270deg);
  }

  /* EVENT-PAGE */
  .featured-event.event-page .share-btns .curved-border.superior-rigth {
    width: 2rem;
    height: 2rem;
    top: -4px;
    left: 36px;
  }

  .featured-event.event-page .share-btns .curved-border.inferior-left {
    width: 2rem;
    height: 2rem;
    bottom: -26px;
    left: 4px;
  }

  /* MANIFEST */
  .manifest {
    padding: 5rem 1rem;
    gap: 4rem;
    overflow: hidden;
    height: 120dvh;
  }
  .manifest p {
    font-size: clamp(1.7rem, 9.5vw, 5.5rem);
    padding: 0 3rem 0 3rem;
    line-height: 1.25;
  }
  .logo-manifest {
    height: clamp(3.2rem, 13vw, 8.125rem);
  }
  /* /AGENDA
     Mobile: hero + cta viram um único wrapper de 100dvh.
     Os dois ficam centralizados juntos no centro, com 5rem de
     espaçamento entre eles — sem scroll interno. */
  .hero-agenda-wrap {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
  }
  .hero-agenda-wrap .schedule.hero-schedule {
    height: auto;
    padding: 0;
  }
  .hero-agenda-wrap .cta.hero-cta {
    margin-top: 0;
    padding: 0 1rem;
  }
  .schedule-list {
    margin-top: 5rem;
  }
  .cta {
    margin-top: 5rem;
  }
  .text-signature {
    margin: 5rem 0;
  }
  /* Mobile: "CALENDÁRIO PRÓXIMO AGORA" (sem o "O") */
  .text-signature h1 span .hide-mobile {
    display: none;
  }
  .hero-schedule .text-signature {
    margin: 2rem 0;
  }
  .timer-txt .timer {
    display: none;
  }
  .timer-txt .timer p span {
    text-align: center;
    font-size: 5rem;
    display: inline-block;
  }
  .timer-txt .timer p i {
    text-align: center;
    font-size: 5rem;
    display: inline-block;
  }
  .timer-txt .timer p i:last-child {
    margin-right: 0;
  }
  .timer-txt .timer p i:nth-child(4) {
    margin-right: 0;
  }

  .timer-txt.hero-timer p {
    margin-top: 0rem;
    justify-content: center;
    text-align: center;
  }

  .schedule.hero-schedule .timer {
    display: none;
  }

  /* SHARE OVERLAY */
  .share.interative .share-txt h1,
  .share.interative .share-txt h2 {
    font-size: clamp(1.5rem, 9vw, 2.25rem);
  }

  /* SPONSORS */
  .sponsors {
    padding-bottom: 0;
  }
  .sponsors-marquee {
    margin-top: 0rem;
  }

  .fixed-logo img {
    width: 3.5rem;
    height: auto;
  }
  .logo {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
  }
  .schedule-item > .btn:not(.btn-ticket) {
    height: 2rem;
    font-size: 1rem;
  }
  /* Mobile: tabela mais estreita — mesma estrutura de 4 colunas do
     tablet, com fontes/ícones/gaps reduzidos e coluna LINKS menor. */
  .schedule {
    padding: 2rem 0.8rem 5rem 0.8rem;
  }
  .schedule-list {
    gap: 1.5rem;
  }
  /* No celular removemos a coluna LOCAL (a designer pediu p/ tudo caber
     com folga) → tabela de 3 colunas: QUANDO | EVENTO | LINKS. */
  .schedule-list-column .txt-reveal-wrap:nth-child(3),
  .schedule-item > p:nth-child(3) {
    display: none;
  }
  .schedule-list-column,
  .schedule-item {
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.15fr) 6rem;
    gap: 0.5rem;
  }
  /* Rótulos do cabeçalho menores p/ caber nas colunas estreitas */
  .schedule-list-column p {
    font-size: 0.72rem;
    letter-spacing: 0;
  }
  .sponsors-desc p {
    font-size: clamp(1.2rem, 3.2vw, 2rem);
  }
  .schedule-item {
    padding-bottom: 1.5rem;
  }
  .schedule-item p {
    font-size: 1.05rem;
  }
  .cta-btns {
    flex-direction: row;
  }
  /* soundcloud tem só um botão — centraliza horizontalmente (sobrescreve o
     justify-content: end usado no desktop) */
  .soundcloud {
    margin-top: 20dvh;
  }
  .soundcloud .cta-btns {
    justify-content: center;
  }
  /* Links agrupados mais próximos e ícones menores */
  .schedule-links {
    gap: 0.5rem;
  }
  .schedule-item .btn-icons svg,
  .schedule-item .btn-ticket .ticket-icon {
    width: 1.4rem;
    height: 1.4rem;
  }
  .schedule-item .evento-privado-label .lock-icon {
    height: 1.4rem;
  }
  .schedule .cta-box .btn {
    font-size: 1.1rem;
    height: 2.5rem;
  }
  .sponsors-signature-bg {
    top: 45%;
    left: 49%;
    width: 120%;
  }
  /* SOUNDCLOUD — linha compacta no mobile */
  .soundcloud-item .soundcloud-cta {
    width: 2.5rem;
    height: 2.5rem;
  }
  .soundcloud .soundcloud-image,
  .soundcloud .soundcloud-image img {
    width: 2.75rem;
    height: 2.75rem;
  }
  .soundcloud-item > p:first-child {
    font-size: 1.2rem;
    min-width: 1.5rem;
  }
  .cta-btns .btn {
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
  }
  .footer-container {
    height: auto;
    min-height: auto;
    padding: 1.5rem 1rem 0;
  }
  .footer-links p {
    font-size: 0.6rem;
  }
  /* Copyright enxuto só no mobile */
  .footer-copy-policy .copy-full {
    display: none;
  }
  .footer-copy-policy .copy-short {
    display: inline;
  }
  /* Botão logo acima da div de copy/política */
  .footer-container .btn {
    bottom: 5rem;
    padding: 0.5rem 1rem;
  }
  .footer-container .btn h2 {
    font-size: 0.8rem;
  }

  /* SOUNDCLOUD */
  .soundcloud-header {
    flex-direction: column;
  }
  .soundcloud-header > img {
    width: 80%;
  }
  .soundcloud-header-txt img {
    max-width: 150px;
  }
  .cta-box .btn,
  .cta-btns .btn,
  .cta.hero-cta .cta-box a.btn,
  .soundcloud .cta-box .btn {
    font-size: 0.8rem;
    max-width: fit-content;
    padding: 0.5rem 1rem;
  }
  .hero-today-content a.btn {
    max-width: fit-content;
    font-size: 0.8rem;
    padding: 0.5rem 2rem;
  }
  .styles-box h2 {
    padding: 0.5rem 1rem;
  }

  .featured-event-overlay .featured-ticket-btn .ticket-icon,
  .featured-event-overlay .bi {
    width: 1.5rem;
  }

  .featured-event-overlay .when h2 {
    font-size: 1.5rem;
  }

  .featured-event-overlay .when p,
  .featured-event-overlay .event-local p {
    font-size: 0.8rem;
  }

  .featured-event {
    height: calc(80dvh - 2rem);
    width: 100%;
  }

  /* SIGNATURE H1 */
  .text-signature h1,
  .footer .text-signature h1 {
    font-size: 37px;
  }
  .next-event h2 {
    font-size: (3rem, 12vw, 4rem);
  }

  .featured-event-overlay .when h2 {
    font-size: (2rem, 7vw, 5rem);
  }

  .cta.hero-cta {
    padding: 0 1rem 8rem 1rem;
  }

  /* CURVAS HERO */
  .fixed-logo .curved-border.superior-left {
    bottom: -50px;
    left: 3px;
  }
  .fixed-logo .curved-border.superior-rigth {
    top: 12px;
    right: -34px;
    width: 2.5rem;
    height: 2.5rem;
  }
  .fixed-logo .curved-border.superior-rigth img {
    width: 2.5rem;
    height: 2.5rem;
  }
  /* CURVAS BTN-HERO */
  .btn-hero-box .curved-border.inferior-left {
    bottom: -4px;
    left: -34px;
    width: 2.5rem;
    height: 2.5rem;
  }
  .btn-hero-box .curved-border.inferior-left img {
    width: 2.5rem;
    height: 2.5rem;
  }
  .btn-hero-box .curved-border.inferior-rigth {
    top: -58px;
    right: 10px;
  }
  .share .share-txt-btn a {
    font-size: 1.1rem;
    max-width: max-content;
    width: max-content;
  }
  .share .share-txt-btn a {
    padding: 0.5rem 2rem;
  }
  .hero-today-content a {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
  }
  /* LOGO IMG */
  .logo-img {
    width: 4rem;
  }
  /* LEQUE — com a rotação de ±15° a largura visual passa de ~50rem,
     então em telas estreitas o scale herdado de ≤1024 (0.66) estoura.
     Reduz o scale e a altura do contêiner para o leque caber inteiro. */
  .share .fan-cards {
    height: 22rem;
    transform: scale(0.55);
  }
  .share.interative .fan-cards {
    height: 20rem;
    transform: scale(0.68);
  }
  /* ESPAÇAMENTO MENU */
  .menu-icon-placeholder {
    display: none;
  }

  /* CARROSSEL DE SPONSORS */
  .sponsors-track img {
    height: clamp(5rem, 13vw, 10rem);
  }
  .sponsors-track {
    gap: 2rem;
  }
  /* RODAPÉ */
  .footer .text-signature h1 {
    font-size: clamp(2rem, 12vw, 2.3rem);
  }
  .footer .text-signature {
    margin: 1.5rem 0;
  }
  /* ESFERA — centralização exata via margens negativas (metade da largura/
     altura). Não usar transform: a base .sphere tem `animation: orbit` que
     sobrescreve transforms estáticos. Mantém a bola centrada "rasgando" a
     tela (150dvw). */
  .styles .sphere {
    width: 150dvw;
    height: 150dvw;
    left: 50%;
    top: 50%;
    margin-left: -75dvw;
    margin-top: -75dvw;
  }
  /* COMMIT — label encurtado no mobile ("O que entrego") para liberar espaço
     sem reduzir a fonte. */
  .commit-label-full {
    display: none;
  }
  .commit-label-short {
    display: inline;
  }
  /* HOUSE NAME */
  .featured-event-overlay .house-name {
    padding: 0 0.5rem 0.5rem 0;
  }
  .hero-today-content h2 {
    font-size: clamp(1.2rem, 5vw, 3rem);
  }
  .next-event p {
    font-size: clamp(0.3rem, 4vw, 2rem);
  }
  .next-event {
    gap: 0;
  }
  .styles-box h2 {
    font-size: clamp(2.2rem, 5vw, 5rem);
  }
  .footer-links-box {
    margin-top: 2rem;
  }
  .commit .txt-to-scroll p {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }
  .versus .txt-box h2 {
    font-size: 37px;
  }
}

/* ════════════════════════════════════════════════════════════
   CELULAR PEQUENO — ≤ 480px
   Ajustes finos de densidade.
   ════════════════════════════════════════════════════════════ */

@media screen and (max-width: 480px) {
  #sound-wave {
    width: 88px;
  }

  .soundcloud .soundcloud-track-text p {
    font-size: 1.2rem;
  }

  .soundcloud .soundcloud-track-text span {
    font-size: 0.8rem;
  }

  .timer-txt p {
    font-size: 1.2rem;
  }

  .cta-box p {
    font-size: 1rem;
  }

  .cta-btns {
    padding: 1rem 0;
  }

  .featured-event .video-container {
    margin: 1rem;
  }

  .featured-event-overlay {
    padding: 0rem 1.5rem 1rem;
  }

  .cta {
    margin-top: 2rem;
  }

  .featured-event-overlay .share-btns {
    position: absolute;
    top: 0;
    right: 1rem;
    align-items: flex-start;
    flex-direction: column;
    gap: 1.5rem;
    background-color: var(--black);
    border-radius: 0 0 0 var(--radius-16);
    padding: 0 0 1rem 1rem;
  }

  .next-event {
    height: 100dvh;
  }

  /* Em /today o .next-event não ocupa a tela inteira — mantém altura natural. */
  .next-event.today {
    height: auto;
  }

  .next-event p {
    font-size: 0.8rem;
  }

  .schedule .cta-box .btn {
    font-size: 0.7rem;
    height: auto;
    padding: 0.5rem 1.5rem;
    max-width: fit-content;
  }

  .soundbar p {
    font-size: 1rem;
  }

  .submenu-socials-list a {
    font-size: 1.05rem;
  }

  /* CURVED-BORDER */
  .featured-event .share-btns .curved-border.superior-rigth {
    width: 2.5rem;
    height: 2.5rem;
    top: -4px;
    left: -36px;
    transform: rotate(270deg);
  }

  .featured-event .share-btns .curved-border.inferior-left {
    width: 2rem;
    height: 2rem;
    bottom: -27px;
    left: 11px;
    transform: rotate(270deg);
  }

  /* EVENT-PAGE */
  .featured-event.event-page .share-btns .curved-border.superior-rigth {
    width: 2rem;
    height: 2rem;
    top: -4px;
    left: 36px;
  }

  .featured-event.event-page .share-btns .curved-border.inferior-left {
    width: 2rem;
    height: 2rem;
    bottom: -27px;
    left: -4px;
  }

  /* Leque um pouco menor para caber em telas estreitas */
  .share .fan-cards {
    height: 19rem;
    transform: scale(0.46);
  }

  .share.interative .fan-cards {
    height: 18rem;
    transform: scale(0.58);
  }

  /* Legais do rodapé empilham para não espremer */
  .footer-copy-policy {
    align-items: center;
    gap: 0.4rem;
  }

  .footer-copy-policy p,
  .footer-copy-policy a {
    max-width: 90%;
    text-align: center;
    width: auto;
  }

  /* Copy/política empilha (mais alto) → sobe um pouco o botão */
  .footer-container .btn {
    bottom: 2rem;
  }

  /* MADEBY */

  .made-by .curved-border.inferior-left {
    max-height: 1.5rem;
    max-width: 1.5rem;
    bottom: 10px;
    left: -20px;
  }

  .made-by .curved-border.inferior-rigth {
    max-height: 1.5rem;
    max-width: 1.5rem;
    bottom: 10px;
    right: -20px;
  }

  .made-by {
    font-size: 0.68rem;
  }

  /* Mobile: "Site desenvolvido por Thalia Rauane" (sem "com AMOR") */
  .made-by .made-by-amor {
    display: none;
  }

  .next-event .text-signature h1 {
    font-size: 4.5rem;
  }
}

/* ════════════════════════════════════════════════════════════
   CELULAR ESTREITO — ≤ 380px
   O leque precisa encolher mais para não ser cortado.
   ════════════════════════════════════════════════════════════ */

@media screen and (max-width: 380px) {
  .share .fan-cards {
    height: 16rem;
    transform: scale(0.4);
  }

  .share.interative .fan-cards {
    height: 16rem;
    transform: scale(0.5);
  }
}