/* Pacote SFX IMT — o que é só desta página (a base está em /assets/loja/lp.css).
 * Acento: ciano onda #2EF2E2, texto preto sobre ele (14,9:1 medido).
 *
 *   .hero-onda ....... tira de forma de onda no pé do hero (dados reais, decorativa)
 *   .ouvir-link ...... "Ouvir antes de comprar" no apoio do hero
 *   .free ............ banner IMTUNE FREE (#free, logo abaixo da esteira): aba da pasta, 15 clipes com a onda real, <a download> branco
 *   .linha-tempo ..... diagrama da dor: vídeo / sem efeito / com o pacote (pico no corte)
 *   .canais .......... as 9 categorias com a contagem
 *   .mesa, .canal .... a mesa de som (assinatura): 9 faixas, um <audio> só com JS
 *   .motion .......... o vídeo do produto (só aparece quando o arquivo existe)
 *   .corte__foto ..... busto com corte seco preso no pé da seção (o moletom encontra o preto da oferta)
 *   .fichas--grade ... números em 2 colunas;  .conta ... R$ por efeito;  .selo ... 7 dias
 *   .sem-quebra ...... valor que não pode partir no meio ("12× de R$ 4,99")
 */
.sem-quebra { white-space: nowrap; }
:root { --acento: #2EF2E2; --acento-tx: #000; }

/* ── hero ─────────────────────────────────────────────────────────────── */
/* camadas: onda (0) < foto (1) < texto (2). A onda fica ATRÁS da foto: nada aparece através da camiseta. */
.hero-onda { position: absolute; left: 0; bottom: 0; width: 100%; height: 64px; fill: rgba(0,0,0,.13); pointer-events: none; z-index: 0; }
.hero .hero__figura { position: relative; z-index: 1; }
.hero .hero__figura img { -webkit-mask-image: linear-gradient(#000 80%, transparent 99%); mask-image: linear-gradient(#000 80%, transparent 99%); }
.ouvir-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; color: var(--tx); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hero .apoio { line-height: 1.35; }
@media (min-width: 900px) { .hero .cta { white-space: nowrap; } }   /* o preço do botão não parte em 900–1100 */

/* 560–899: a foto encosta na borda direita (sangra) e os chips + a linha fina ficam ao lado dela;
   o título desce inteiro por baixo. Sem seta: com texto ao lado, a haste passaria atrás das letras. */
@media (min-width: 560px) and (max-width: 899px) {
  .hero__grade { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "chips figura" "fino figura" "h1 h1" "lead lead" "acao acao"; column-gap: 12px; }
  .hero__texto { display: contents; }
  .hero__texto > * { position: relative; z-index: 2; }
  .hero__texto > .chips { grid-area: chips; align-self: end; margin-bottom: 14px; }
  .hero__texto > .fino { grid-area: fino; align-self: start; margin-bottom: 0; padding-bottom: 18px; }
  .hero__texto > h1 { grid-area: h1; margin-top: -8px; }
  .hero__texto > .lead { grid-area: lead; }
  .hero__texto > .hero__acao { grid-area: acao; padding-bottom: 70px; }
  .hero .hero__figura { justify-self: end; align-self: end; margin: 8px -20px 0 0; height: clamp(260px, 44vw, 380px); }
}
/* abaixo de 900 a seta sai do hero: a haste descia atrás dos chips e da linha fina */
@media (max-width: 899px) { .hero .palco-foto::before { display: none; } }

/* computador: o busto vai do topo da grade até a esteira, com corte seco (a imagem já vem cortada;
   a camiseta preta encontra a esteira preta). A altura é a da grade, limitada pela largura da coluna
   (cqw) para a cabeça nunca sair da tela nem entrar no texto em 900–1260. */
@media (min-width: 900px) {
  .hero-onda { height: 92px; }
  .hero .hero__figura { align-self: stretch; justify-self: stretch; width: auto; max-width: none; height: auto; margin: 0; container-type: size; }
  .hero .hero__figura picture { position: absolute; left: -48px; bottom: 0; height: min(100%, calc(100cqw + 60px)); }
  .hero .hero__figura img { height: 100%; width: auto; max-width: none; -webkit-mask-image: none; mask-image: none; filter: none; }
  .hero .palco-foto::before { display: none; }
}

/* ── a dor: linha do tempo ───────────────────────────────────────────── */
.linha-tempo { --cortes: 20fr 22fr 18fr 22fr 18fr; background: #0d0d0d; color: var(--branco); border-radius: 28px; padding: 22px 18px 20px;
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 80px -44px rgba(0,0,0,.55); }
.lt__regua { display: flex; justify-content: space-between; font: 600 .66rem/1 var(--f); color: #8E9588; letter-spacing: .06em; padding-bottom: 10px; border-bottom: 1px dashed #262626; }
.lt__trilha { display: grid; gap: 8px; margin-top: 14px; }
.lt__rotulo { font: 800 .66rem/1 var(--f); letter-spacing: .16em; text-transform: uppercase; color: #A3A8A0; }
.lt__trilha--som .lt__rotulo { color: var(--acento-escuro); }
.lt__clipes { display: grid; grid-template-columns: var(--cortes); gap: 3px; height: 46px; }
.lt__clipes i { border-radius: 7px; background: linear-gradient(160deg, #3a3d3a, #202220 60%); border: 1px solid #333; }
.lt__clipes i:nth-child(2) { background: linear-gradient(160deg, #2f3533, #1b1f1e 60%); }
.lt__clipes i:nth-child(3) { background: linear-gradient(160deg, #403c38, #221f1d 60%); }
.lt__clipes i:nth-child(4) { background: linear-gradient(160deg, #343838, #1c1d1d 60%); }
.lt__clipes--audio { position: relative; background: linear-gradient(#2a2a2a, #2a2a2a) 0 50% / 100% 2px no-repeat; border-radius: 7px; }
.lt__trilha--mudo .lt__clipes--audio { display: grid; place-items: center; grid-template-columns: 1fr; }
.lt__trilha--mudo b { font: 700 .7rem/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: #8E9588; background: #0d0d0d; padding: 0 10px; }
.lt__trilha--som { margin-bottom: 20px; }
.lt__trilha--som .lt__clipes--audio { background-image: linear-gradient(var(--acento-halo), var(--acento-halo)); }
/* cada efeito começa numa coluna e se centra no corte (a borda esquerda da coluna) */
.lt__efeito { position: relative; grid-row: 1; }
.lt__efeito:nth-child(1) { grid-column: 2; } .lt__efeito:nth-child(2) { grid-column: 3; }
.lt__efeito:nth-child(3) { grid-column: 4; } .lt__efeito:nth-child(4) { grid-column: 5; }
/* centrado por margem negativa, não por transform (o medidor desliga transform e acusaria estouro) */
.lt__efeito svg { position: absolute; top: 0; left: -20.5px; width: 38px; height: 46px; fill: var(--acento-escuro); }
.lt__efeito::before { content: ""; position: absolute; left: -2px; bottom: 50%; height: 150px; border-left: 1px dashed var(--acento-halo-forte); }
.lt__efeito small { position: absolute; top: calc(100% + 6px); left: -31.5px; width: 60px; text-align: center; font: 700 .62rem/1 var(--f); letter-spacing: .04em; color: var(--acento-escuro); white-space: nowrap; }
.linha-tempo figcaption { padding-top: 14px; border-top: 1px dashed #262626; font: 500 .9rem/1.4 var(--f); color: #A3A8A0; }
.linha-tempo figcaption b { color: var(--acento-escuro); }
@media (min-width: 560px) {
  .linha-tempo { padding: 28px 26px 24px; }
  .lt__trilha { grid-template-columns: 96px 1fr; align-items: center; gap: 14px; }
  .lt__regua { margin-left: 110px; }
  .lt__efeito svg { width: 46px; left: -24.5px; }
  .lt__efeito::before { height: 132px; }
}

/* ── o que tem dentro: 9 categorias ──────────────────────────────────── */
.canais { display: grid; gap: 10px; margin-top: 40px; }
.canal-cat { display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "n t" "n p"; column-gap: 16px; row-gap: 4px; align-items: center;
  padding: 18px; border-radius: 22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.canal-cat__n { grid-area: n; justify-self: start; position: relative; isolation: isolate; padding: 0 .2em; font: 900 clamp(2rem, 8vw, 2.6rem)/1 var(--f); letter-spacing: -.04em;
  color: var(--acento-tx); font-variant-numeric: tabular-nums; }
.canal-cat__n::before { content: ""; position: absolute; z-index: -1; inset: .02em 0 -.02em; background: var(--acento); border-radius: .11em; }
.canal-cat h3 { grid-area: t; align-self: end; font-size: clamp(1.02rem, 3.4vw, 1.2rem); }
.canal-cat p { grid-area: p; align-self: start; color: var(--tx-fraco); font-size: .92rem; line-height: 1.4; }
@media (min-width: 640px) { .canais { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) and (max-width: 979px) { .canal-cat:last-child:nth-child(odd) { grid-column: 1 / -1; } }   /* número ímpar em 2 colunas: a última ocupa a linha */
@media (min-width: 980px) {
  .canais { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .canal-cat { grid-template-columns: 1fr; grid-template-areas: "n" "t" "p"; row-gap: 10px; padding: 26px; align-content: start; }
  .canal-cat h3 { margin-top: 8px; }
  /* 10 categorias (02/10/2026) em 3 colunas: a que sobra sozinha ocupa a linha, deitada como no celular */
  .canal-cat:last-child:nth-child(3n+1) { grid-column: 1 / -1; grid-template-columns: 92px 1fr; grid-template-areas: "n t" "n p"; column-gap: 16px; row-gap: 4px; align-items: center; }
  .canal-cat:last-child:nth-child(3n+1) h3 { margin-top: 0; }
}

/* ── ouça antes: a mesa de som ───────────────────────────────────────── */
.ouvir__topo { display: grid; gap: 4px; }
.ouvir__topo h2 { max-width: 16ch; }
@media (min-width: 900px) { .ouvir__topo { grid-template-columns: 7fr 5fr; gap: 56px; align-items: end; } .ouvir__topo .medida { margin-top: 0; } }

.mesa { margin-top: 40px; background: #0d0d0d; color: var(--branco); border-radius: 32px; padding: 20px 16px 18px; border: 1px solid rgba(0,0,0,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 44px 90px -40px rgba(0,0,0,.65); --foco: var(--acento-escuro); }
.mesa__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 16px; border-bottom: 1px solid rgba(255,255,255,.14); }
.mesa__titulo { font: 800 clamp(1.02rem, 3vw, 1.3rem)/1.1 var(--f); text-transform: uppercase; letter-spacing: .01em; }
.mesa__titulo b { color: var(--acento-escuro); font-weight: 800; }
.mesa__visor { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; min-width: 210px; padding: 9px 14px; border-radius: 12px; background: #050505; border: 1px solid #232323;
  box-shadow: inset 0 0 24px var(--acento-vidro); }
.mesa__faixa { font: 800 .68rem/1 var(--f); letter-spacing: .16em; text-transform: uppercase; color: #8E9588; }
.mesa__tempo { font: 800 1rem/1 var(--f); font-variant-numeric: tabular-nums; color: var(--acento-escuro); }
.mesa.tocando .mesa__faixa { color: var(--branco); }

.canal { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "btn nome info" "onda onda onda" "audio audio audio";
  column-gap: 14px; row-gap: 10px; align-items: center; padding: 16px 2px; border-bottom: 1px solid rgba(255,255,255,.08); }
.canal:last-child { border-bottom: 0; }
.canal__tocar { grid-area: btn; position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; cursor: pointer; background: var(--acento); color: var(--acento-tx);
  box-shadow: 0 0 0 0 var(--acento-halo); transition: transform .2s var(--ease-out), box-shadow .3s var(--ease-out); }
.canal__tocar:active { transform: scale(.92); }
.canal__icone { position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; transform: translateX(2px); }
.canal.toca .canal__tocar { box-shadow: 0 0 0 6px var(--acento-halo); }
.canal.toca .canal__icone { width: 13px; height: 15px; border: 0; transform: none; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 9px, currentColor 9px 13px); }
.canal__nome { grid-area: nome; min-width: 0; font: 500 .9rem/1.3 var(--f); color: #A3A8A0; }
.canal__nome b { font: 800 1.02rem/1.2 var(--f); color: var(--branco); margin-right: 4px; }
.canal__num { display: none; }
.canal__uso { display: block; margin-top: 2px; }   /* linha própria em toda largura: as faixas têm a mesma altura */
.canal__nome small { display: block; margin-top: 3px; font: 700 .68rem/1.2 var(--f); letter-spacing: .08em; text-transform: uppercase; color: #8E9588; }
.canal.toca .canal__nome b { color: var(--acento-escuro); }
.onda { grid-area: onda; position: relative; height: 46px; }
.onda svg { display: block; width: 100%; height: 100%; }
.onda__base { fill: rgba(252,252,252,.24); }
.onda__pico { stroke: var(--acento-escuro); stroke-width: 1.5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.onda__cheia { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.onda__cheia svg { fill: var(--acento-escuro); }
.js-mesa .onda { cursor: pointer; }
.js-mesa.pula .onda { cursor: col-resize; }   /* só quando o servidor deixa pular */
.canal__info { grid-area: info; display: grid; justify-items: end; gap: 3px; font: 600 .76rem/1.1 var(--f); color: #8E9588; font-variant-numeric: tabular-nums; white-space: nowrap; }
.canal__info b { color: var(--acento-escuro); font-weight: 800; }
.canal__audio { grid-area: audio; width: 100%; height: 44px; }
.mesa__pe { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); font: 500 .86rem/1.45 var(--f); color: #8E9588; }
.mesa__pe b { color: var(--branco); }
@media (hover: hover) { .canal:hover { background: rgba(255,255,255,.025); } .canal__tocar:hover { box-shadow: 0 0 0 6px var(--acento-halo); } }
@media (min-width: 900px) {
  .mesa { padding: 30px 34px 26px; border-radius: 36px; }
  .canal { grid-template-columns: 44px 250px minmax(0, 1fr) 96px; grid-template-areas: "btn nome onda info" ". . audio audio"; column-gap: 22px; padding: 14px 4px; }
  .canal__num { display: inline; margin-right: 10px; font: 800 .7rem/1 var(--f); color: #8E9588; letter-spacing: .08em; }
}

/* ── motion do produto ───────────────────────────────────────────────── */
.motion { display: grid; gap: 40px; align-items: center; }
.motion__quadro { justify-self: center; width: min(100%, 330px); }   /* é o .som da base (video-som.css) */
.motion__quadro .som__video { background: #111; box-shadow: 0 0 0 1px var(--acento-vidro), 0 40px 90px -36px var(--acento-sombra); }
@media (min-width: 900px) { .motion { grid-template-columns: 5fr 7fr; gap: 64px; } }

/* ── feito para o corte ──────────────────────────────────────────────── */
/* o busto desce até o pé da seção (margem negativa = o padding da .faixa) e é cortado seco ali */
.corte__foto { align-self: end; width: min(100%, 460px); margin-bottom: -88px; }
.corte__foto img { width: 100%; filter: none; }
.corte__foto::before { top: 4%; width: 110%; left: -5%; }
@media (min-width: 900px) { .corte { align-items: end; } .corte__texto { align-self: center; } .corte__foto { margin-bottom: -120px; } }
.fichas--grade { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 18px; }
.fichas--grade li { flex-direction: column; align-items: flex-start; gap: 10px; }
.fichas--grade b { white-space: nowrap; }
.programas__rotulo { margin-top: 36px; font: 800 .74rem/1 var(--f); letter-spacing: .24em; text-transform: uppercase; color: var(--tx-fraco); }
.programas { margin: 14px 0 0; }

/* ── oferta ──────────────────────────────────────────────────────────── */
/* a coluna da esquerda desce até o pé do formulário: o card da lista cresce e o selo fecha a coluna, sem vazio embaixo */
@media (min-width: 900px) {
  .oferta__lado { align-self: stretch; display: flex; flex-direction: column; }
  .oferta__lado .cartao--vidro { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }   /* o card cresce, a lista fica no meio dele */
}
.selo { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 20px 24px; border-radius: 22px; border: 1px dashed var(--acento-escuro); color: var(--tx-fraco); font: 500 .95rem/1.4 var(--f); }
.selo b { flex: none; font: 900 clamp(1.6rem, 5vw, 2rem)/1 var(--f); letter-spacing: -.03em; color: var(--acento-escuro); white-space: nowrap; }
.forma span i { font-style: normal; }
.forma span small { font: 600 .78rem/1.2 var(--f); color: #A3A8A0; }
.conta { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 20px; padding: 22px 26px; }
.conta p { color: var(--tx); font: 600 1rem/1.35 var(--f); }
.conta .conta__valor { font: 900 clamp(2.2rem, 8vw, 3rem)/1 var(--f); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cartao.conta p + p { margin-top: 0; }
@media (max-width: 400px) { .conta { grid-template-columns: 1fr; } }

/* ── IMTUNE FREE (#free, 02/10/2026): a isca do Reel, logo abaixo da esteira ──
 * Painel preto no branco, da família da linha do tempo e da mesa: o banner é um
 * objeto inserido, não uma seção. A aba da pasta ("IMTUNE FREE", corte a 45° da
 * seta do logo) é o cartão do fim do Reel. Os 15 clipes desenham a onda real de
 * cada arquivo do zip (número em chapa, como nas fichas). Empilhado: texto → botão
 * → os 15 → ponte (quem chega pelo direct no celular tem o botão acima da barra
 * fixa); a partir de 1000 px, texto e botão à esquerda, a pista à direita.
 * O botão é branco: ciano cheio é o verbo comprar. Sem JS é o estado final; o
 * botão é um <a download>. */
/* z-index: a .faixa seguinte é position: relative e pintaria por cima da sombra do painel */
.free { position: relative; z-index: 1; padding: 30px 0 0; }
.free__painel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "acao" "pista" "mais"; gap: 22px;
  margin-top: 36px; background: #0d0d0d; color: var(--branco); border-radius: 0 28px 28px 28px; padding: 22px 16px 18px;
  box-shadow: 0 40px 80px -44px rgba(0,0,0,.55);
  /* dentro do painel vale o tema preto (o .fundo-branco da seção fica do lado de fora) */
  --tx: var(--branco); --tx-fraco: #A3A8A0; --chapa: var(--acento); --chapa-tx: var(--acento-tx); --foco: var(--acento-escuro); }
/* a aba: continua o painel para cima (canto de cima à esquerda do painel é reto por isso) */
.free__aba { position: absolute; left: 0; bottom: calc(100% - 1px); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 9px; min-height: 37px; max-width: 100%; padding: 0 46px 2px 16px;
  background: #0d0d0d; border-radius: 14px 0 0 0; clip-path: polygon(0 0, calc(100% - 37px) 0, 100% 100%, 0 100%);
  font: 800 .78rem/1 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--branco); }
.free__aba b { font-weight: 900; color: var(--acento-escuro); }
.free__pasta { flex: none; width: 19px; height: 19px; }
.free__pasta-corpo { fill: var(--acento); }
.free__pasta-seta { fill: none; stroke: #0d0d0d; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.free__texto { grid-area: texto; }
.free .kicker { margin-bottom: 14px; }
@media (max-width: 379px) { .free .kicker { letter-spacing: .24em; } }   /* 320: "// Grátis, sem cadastro" numa linha só */
.free h2 { font-size: clamp(2.1rem, 8.6vw, 3.5rem); max-width: none; }
.free h2 .chapa { white-space: nowrap; }
.free .medida { margin-top: 14px; max-width: 38ch; text-wrap: pretty; }

/* a pista: 15 clipes de áudio; a onda é a do arquivo, o número vive em chapa */
.free__pista { grid-area: pista; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.free__clipe { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "onda"; gap: 6px;
  padding: 6px; border-radius: 10px; background: #171717; border: 1px solid #272727; }
.free__num { grid-area: num; justify-self: start; padding: 3px 4px; border-radius: 4px; background: var(--acento); color: var(--acento-tx);
  font: 800 .64rem/1 var(--f); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
/* no celular estreito o nome não cabe no clipe: fica para o leitor de tela (a lista continua com os 15
   nomes, e três deles estão no texto de cima) */
.free__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.free__onda { grid-area: onda; display: block; width: 100%; height: 24px; fill: var(--acento-escuro);
  /* a linha do meio da trilha, como na linha do tempo */
  background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)) 0 50% / 100% 1px no-repeat; }

.free__acao { grid-area: acao; }
/* quebra só com o texto ampliado (zoom de fonte): na fonte padrão cabe numa linha em 320 px */
.free__baixar { width: 100%; gap: 10px; padding-inline: 16px; padding-block: 10px; font-size: clamp(.9rem, 4.3vw, 1rem); white-space: normal; text-wrap: balance; }
.free__icone { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* a ficha do arquivo, separada pelos losangos da esteira. O losango mora no recuo de cada item e a
   lista anda 18 px para a esquerda dentro de um overflow: o losango do começo de linha some no corte,
   e nenhuma linha termina nem começa com losango solto quando quebra. */
.free__arquivo { margin-top: 14px; }
.free__ficha { overflow: hidden; font: 800 .74rem/1.3 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-fraco); }
.free__ficha-itens { display: flex; flex-wrap: wrap; row-gap: 4px; margin-left: -18px; }
.free__ficha-itens > span { position: relative; padding-left: 18px; white-space: nowrap; }
.free__ficha-itens > span::before { content: ""; position: absolute; left: 6px; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 1px;
  background: var(--acento-escuro); transform: rotate(45deg); }
.free__uso { margin-top: 6px; font: 500 .88rem/1.4 var(--f); color: var(--tx-fraco); text-wrap: pretty; }
.free__uso b { font-weight: 600; color: var(--branco); }

/* a ponte para o pago: o fim da pista (tracejado = continua), sem preço. Bloco de texto centrado com a
   seta em linha: quando quebra (320–370 px), a seta desce junto com a última palavra */
.free__mais { grid-area: mais; display: block; min-height: 48px; padding: 12px 16px; border-radius: 12px;
  border: 1px dashed var(--acento-escuro); font: 600 .92rem/1.4 var(--f); color: var(--branco); text-decoration: none; text-align: center; text-wrap: balance; }
.free__mais b { position: relative; isolation: isolate; padding: 0 .2em; font-weight: 900; color: var(--acento-tx); font-variant-numeric: tabular-nums; }
.free__mais b::before { content: ""; position: absolute; z-index: -1; inset: -.06em 0; background: var(--acento); border-radius: .14em; }
/* a seta do logo a 45°, virada para baixo: o link desce para a compra */
.free__mais-seta { display: inline-block; width: 13px; height: 13px; margin-left: 10px; vertical-align: -1px; background: var(--acento-escuro); transform: rotate(90deg);
  -webkit-mask: url(/assets/loja/img/seta.png) 0 0 / 100% 100% no-repeat; mask: url(/assets/loja/img/seta.png) 0 0 / 100% 100% no-repeat;
  transition: transform .3s var(--mola); }
@media (hover: hover) {
  .free__mais:hover { background: var(--acento-vidro); }
  .free__mais:hover .free__mais-seta { transform: translate(2px, 2px) rotate(90deg); }
  .free__baixar:hover { box-shadow: 0 0 0 4px rgba(252,252,252,.16); }
}

/* 560+: o clipe tem largura para o nome, em cima da onda como no Reel ("Glitch Burst" sobre o clipe).
   Duas linhas reservadas e o nome encostado embaixo, na onda: quebra só o que não cabe (ex.: "Slow-Mo
   Whoosh" a 1440) e os 15 clipes ficam da mesma altura. A ficha do arquivo vai para o lado do botão. */
@media (min-width: 560px) {
  .free { padding-top: 40px; }
  .free__painel { padding: 28px 26px 24px; border-radius: 0 32px 32px 32px; }
  .free__aba { font-size: .82rem; }
  .free__pista { gap: 8px; }
  .free__clipe { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "nome nome" "num onda"; align-items: center; gap: 8px; padding: 9px 8px 8px; }
  .free__nome { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    grid-area: nome; display: flex; flex-wrap: wrap; align-content: flex-end; column-gap: .3em; min-height: 2.3em;
    font: 600 .76rem/1.15 var(--f); color: #D4D8D0; }
  .free__nome { overflow-wrap: anywhere; }
  .free__nome > .free__hifen { white-space: nowrap; }   /* "Slow-Mo" não parte no hífen */
  .free__onda { height: 30px; }
  .free__acao { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
  .free__baixar { width: auto; padding-inline: 28px; }
  .free__arquivo { margin-top: 0; }
}
/* 1000+: banner deitado — texto e botão à esquerda, a pista à direita, a ponte fecha a pista */
@media (min-width: 1000px) {
  .free__painel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr auto; grid-template-areas: "texto pista" "acao pista" "acao mais";
    column-gap: 48px; row-gap: 10px; padding: 32px 40px 34px; border-radius: 0 36px 36px 36px; }
  .free h2 { font-size: min(3.9rem, 4.4vw); }   /* o tamanho dos h2 da página, numa linha só na coluna de 5/12 */
  .free__pista { gap: 7px; align-self: start; }
  .free__onda { height: 26px; }
  .free__acao { align-self: end; display: block; margin-top: 12px; }   /* 10 do row-gap + 12 = os 22 px do resto do banner */
  .free__arquivo { margin-top: 14px; }
}