/* EFX Custom Effects — loja premium.
   Escala fluida: o rem cresce com a tela (15px no notebook, ~24px num monitor 4K a 100%),
   então tudo é medido em rem e o layout escala inteiro em vez de virar uma coluna pequena no meio. */

:root {
  --papel: #ffffff;
  --tinta: #121416;
  --aco: #646b72;
  --fio: #e3e6e8;
  --painel: #f2f3f4;
  --efx: #0b7a6f;
  --efx-claro: #e9f5f3;
  --led: #ff3b1f;
  --palco: #050505;
  --raio: 0.9rem;
  --gut: clamp(16px, 4vw, 6rem);
  --larg: 120rem;
  --f-texto: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --suave: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

html { font-size: clamp(15px, 0.36vw + 10px, 26px); -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1rem/1.55 var(--f-texto);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 800; font-stretch: 125%; letter-spacing: -0.025em; line-height: 1; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--efx); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--tinta); color: #fff; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--tinta); color: #fff; padding: 0.7rem 1rem; border-radius: 99px; }
.pular:focus { top: 1rem; }

.rotulo {
  font: 500 0.66rem/1.4 var(--f-mono);
  font-stretch: 87.5%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aco);
}
.pipe { color: #c3c8cc; font-weight: 300; }

/* contêiner padrão */
.topo__in, .rodape__in, .rodape__copy, .secao, .hero__txt, .hero__cadeia > .rotulo, .palco__cab, .bancada__in {
  width: min(100% - 2 * var(--gut), var(--larg));
  margin-inline: auto;
}
.secao { padding-block: clamp(3rem, 6vw, 7rem); }
.estreita { max-width: 72rem; }

/* LED — o mesmo do pedal ligado */
.led {
  display: inline-block;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: #3b4045;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: background 0.2s, box-shadow 0.2s;
  flex: none;
}
.led--on, .on > .led, .on .led, .pisca .led {
  background: var(--led);
  box-shadow: 0 0 0 1px rgba(255, 59, 31, 0.5), 0 0 0.6rem 0.15rem rgba(255, 59, 31, 0.55);
}

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border-radius: 99px;
  background: var(--tinta); color: #fff;
  font-weight: 600; font-size: 0.95rem; font-stretch: 105%;
  border: 1px solid var(--tinta);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.btn:hover { background: var(--efx); border-color: var(--efx); }
.btn:active { transform: translateY(1px); }
.btn--g { padding: 1.1rem 2rem; font-size: 1rem; }
.btn--linha { background: transparent; color: var(--tinta); }
.btn--linha:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.link-seta {
  display: inline-flex; gap: 0.5rem; align-items: center;
  font-weight: 600; font-size: 0.95rem;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em;
}
.link-seta::after { content: '→'; text-decoration: none; transition: transform 0.25s var(--suave); }
.link-seta:hover::after { transform: translateX(0.3rem); }

/* ---------- aviso + topo ---------- */
.aviso {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  padding: 0.55rem var(--gut);
  background: var(--tinta); color: #fff;
  font-size: 0.8rem;
}
.aviso[hidden] { display: none; }
.aviso button { font: 500 0.62rem var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.3em; opacity: 0.75; margin-left: 0.5rem; }
.aviso button:hover { opacity: 1; }

.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--fio);
}
.topo__in {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 2.5rem;
  min-height: 4.6rem;
}
.marca { display: inline-flex; align-items: center; gap: 0.7rem; }
.marca__efx { font-weight: 900; font-stretch: 125%; font-size: 2rem; letter-spacing: -0.03em; line-height: 1; }
.marca__sub { font: 500 0.52rem/1.35 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--aco); padding-left: 0.7rem; border-left: 1px solid var(--fio); }

.nav { display: flex; gap: 2.2rem; }
.nav a { font-weight: 500; font-size: 0.95rem; padding-block: 0.4rem; background: linear-gradient(var(--tinta), var(--tinta)) 0 100% / 0 2px no-repeat; transition: background-size 0.3s var(--suave); }
.nav a:hover, .nav a[aria-current] { background-size: 100% 2px; }

.busca { display: flex; align-items: center; background: var(--painel); border-radius: 99px; padding-left: 1.1rem; width: 17rem; border: 1px solid transparent; transition: border-color 0.2s, background 0.2s; }
.busca:focus-within { border-color: var(--tinta); background: #fff; }
.busca input { flex: 1; min-width: 0; border: 0; background: none; padding: 0.7rem 0; font-size: 0.88rem; outline: none; }
.busca input::-webkit-search-cancel-button { display: none; }
.busca { position: relative; }
.busca > button { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; }
.sugestoes {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.5rem); z-index: 60;
  min-width: 22rem; padding: 0.5rem;
  background: #fff; border: 1px solid var(--fio); border-radius: var(--raio);
  box-shadow: 0 1.4rem 3rem -1rem rgba(18, 20, 22, 0.28);
  display: grid; animation: sobe 0.25s var(--suave);
}
.sugestoes[hidden] { display: none; }
.sugestoes a { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 0.8rem; padding: 0.45rem; border-radius: 0.6rem; font-size: 0.88rem; }
.sugestoes a:hover, .sugestoes a:focus-visible { background: var(--painel); outline: none; }
.sug__foto { display: block; aspect-ratio: 1; background: var(--bg, #fff); border-radius: 0.4rem; overflow: hidden; }
.sug__foto img { width: 100%; height: 100%; object-fit: contain; }
.sugestoes strong { font-weight: 600; }
.sugestoes em { font: 500 0.66rem var(--f-mono); font-style: normal; color: var(--aco); }
.sugestoes p { padding: 0.8rem; font-size: 0.85rem; color: var(--aco); }
.sugestoes button { text-align: left; padding: 0.75rem 0.6rem 0.5rem; margin-top: 0.3rem; border-top: 1px solid var(--fio); font-size: 0.82rem; font-weight: 600; color: var(--efx); }
svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.acoes { display: flex; align-items: center; gap: 0.4rem; }
.conta { position: relative; }
.conta summary { list-style: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem; border-radius: 99px; font-size: 0.9rem; font-weight: 500; cursor: pointer; }
.conta summary::-webkit-details-marker { display: none; }
.conta summary:hover, .conta[open] summary { background: var(--painel); }
.conta__menu {
  position: absolute; right: 0; top: calc(100% + 0.6rem);
  min-width: 14rem; padding: 0.5rem;
  background: #fff; border: 1px solid var(--fio); border-radius: var(--raio);
  box-shadow: 0 1.2rem 3rem -1rem rgba(18, 20, 22, 0.25);
  display: grid;
}
.conta__menu a { padding: 0.6rem 0.8rem; border-radius: 0.5rem; font-size: 0.9rem; }
.conta__menu a:hover { background: var(--painel); }
.conta__menu a:last-child { border-top: 1px solid var(--fio); margin-top: 0.3rem; border-radius: 0 0 0.5rem 0.5rem; color: var(--aco); }

.carrinho-btn { position: relative; display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.9rem; border-radius: 99px; border: 1px solid var(--fio); transition: border-color 0.2s; }
.carrinho-btn:hover { border-color: var(--tinta); }
.carrinho-btn__n { font: 600 0.75rem var(--f-mono); min-width: 1ch; }

.menu-btn { display: none; width: 2.8rem; height: 2.8rem; place-items: center; align-content: center; gap: 6px; }
.menu-btn span { display: block; width: 20px; height: 2px; background: var(--tinta); transition: transform 0.25s; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu-movel { display: grid; padding: 0.5rem var(--gut) 1.5rem; border-top: 1px solid var(--fio); background: #fff; }
.menu-movel[hidden] { display: none; }
.menu-movel a { font-weight: 750; font-stretch: 125%; font-size: 1.5rem; letter-spacing: -0.02em; padding: 0.7rem 0; border-bottom: 1px solid var(--fio); }

#app { outline: none; }
.entra { animation: entra 0.45s var(--suave) both; }
@keyframes entra { from { opacity: 0; transform: translateY(0.6rem); } }

/* ---------- hero + cadeia de sinal ---------- */
.hero { padding-top: clamp(2.5rem, 5vw, 6rem); overflow: hidden; }
.hero__txt { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; }
.hero__txt > .rotulo { grid-column: 1 / -1; }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 8.4rem); line-height: 0.94; letter-spacing: -0.035em; }
.hero__lado { display: grid; gap: 1.5rem; padding-bottom: 0.4rem; }
.hero__lado p { font-size: 1.08rem; color: #3a4046; max-width: 30ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero { padding-bottom: clamp(2.5rem, 5vw, 5.5rem); }
.secao-cadeia { overflow: hidden; padding-top: clamp(3rem, 6vw, 7rem); }
.cadeia__legenda { display: flex; justify-content: space-between; gap: 1rem; }
.cadeia__seta::after { content: ' ←'; }
.cadeia__seta { animation: corre 2.4s ease-in-out infinite; }

@keyframes corre { 50% { transform: translateX(-0.4rem); } }

/* abertura da home: título sobe palavra por palavra */
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero h1 .w > span { display: inline-block; }
.hero--intro h1 .w > span { animation: palavra 1s var(--suave) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
.hero--intro .hero__txt > .rotulo { animation: sobe 0.9s var(--suave) both; }
.hero--intro .hero__lado { animation: sobe 0.9s var(--suave) 0.55s both; }
.hero--intro .hero__cadeia > .rotulo { animation: sobe 0.9s var(--suave) 0.8s both; }
@keyframes palavra { from { transform: translateY(112%) rotate(5deg); } }
@keyframes sobe { from { opacity: 0; transform: translateY(1rem); } }

/* faixa de specs: corre como display de rack */
.fita { background: var(--palco); color: #d9dde0; overflow: hidden; padding-block: 1rem; border-bottom: 1px solid #1b1e21; }
.fita__in { display: flex; width: max-content; animation: fita 48s linear infinite; }
.fita:hover .fita__in { animation-play-state: paused; }
.fita span { display: inline-flex; align-items: center; gap: 1rem; padding-right: 2.6rem; font: 500 0.72rem var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
@keyframes fita { to { transform: translateX(-50%); } }

/* o navegador só desenha as seções de baixo quando elas chegam perto da tela */
.indice, .bancada, .historia, .produto__videos, .produto__audios, .produto__rel { content-visibility: auto; contain-intrinsic-size: auto 60rem; }

/* entrada no scroll */
.revela { opacity: 0; transform: translateY(1.8rem); transition: opacity 0.7s var(--suave), transform 0.7s var(--suave); transition-delay: calc(var(--d, 0) * 65ms); }
.revela.visto { opacity: 1; transform: none; }
.indice__linha.revela { transform: translateX(-1.5rem); }
.indice__linha.revela.visto { transform: none; }

/* troca de página (View Transitions) */
.topo { view-transition-name: topo; }
::view-transition-old(root) { animation: 0.22s ease both vt-sai; }
::view-transition-new(root) { animation: 0.5s var(--suave) both vt-entra; }
::view-transition-group(foto) { animation-duration: 0.6s; animation-timing-function: var(--suave); }
@keyframes vt-sai { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(0.9rem); } }

/* foto voando até o carrinho */
.voo { position: fixed; z-index: 95; pointer-events: none; object-fit: contain; background: var(--bg, #fff); border-radius: 1rem; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.25); }

.cadeia { overflow-x: auto; direction: rtl; scrollbar-width: none; padding-bottom: clamp(2rem, 4vw, 4rem); }
.cadeia::-webkit-scrollbar { display: none; }
.cadeia__pista {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(2.6rem, 3.8vw, 9rem);
  width: max-content; min-width: 100%;
  padding: 2rem var(--gut) 0;
}
.cadeia__cabo { position: absolute; inset: 0; width: auto; height: auto; overflow: visible; pointer-events: none; z-index: 0; }
.seg { fill: none; stroke: var(--tinta); stroke-width: max(4px, 0.26rem); stroke-linecap: round; transition: stroke 0.25s, filter 0.25s; }
.seg.on { stroke: var(--led); filter: drop-shadow(0 0 0.35rem rgba(255, 59, 31, 0.65)); }
.plug { fill: #c7ccd1; stroke: #50565c; stroke-width: 1.2; }
/* o pulso é movido pelo JS (animarPulso) para sincronizar com os LEDs */
.pulso { fill: none; stroke: var(--led); stroke-width: max(5px, 0.32rem); stroke-linecap: round; filter: drop-shadow(0 0 0.45rem rgba(255, 59, 31, 0.9)); opacity: 0; }

/* entrada da cadeia: pedais caem no lugar e os cabos se desenham na ordem do sinal */
.intro .no, .intro .ponta { animation: cai 0.9s var(--suave) both; animation-delay: calc(var(--n) * 110ms + 650ms); }
.intro .seg { stroke-dasharray: calc(var(--l) * 1px); stroke-dashoffset: calc(var(--l) * 1px); animation: desenha 0.45s ease-out forwards; animation-delay: calc(var(--n) * 120ms + 1300ms); }
.intro .plug { opacity: 0; animation: aparece 0.3s ease-out forwards; animation-delay: calc(var(--n) * 120ms + 1250ms); }
@keyframes cai { from { opacity: 0; transform: translateY(-2rem) rotate(-4deg); } }
@keyframes desenha { to { stroke-dashoffset: 0; } }
@keyframes aparece { to { opacity: 1; } }
.no.pisca .no__foto img { animation: chute 0.5s var(--suave); }
@keyframes chute { 40% { transform: translateY(-0.45rem); } }

.no, .ponta { direction: ltr; position: relative; z-index: 1; }
.no { display: grid; gap: 1rem; width: clamp(10.5rem, 11.5vw, 30rem); }
.no__foto { display: block; aspect-ratio: 4 / 3; }
.no__foto img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.45s var(--suave); }
.no.on .no__foto img { transform: translateY(-0.5rem) rotate(-1.5deg); }
.no__txt { display: grid; gap: 0.35rem; padding-top: 0.2rem; }
.no__topo { display: flex; align-items: center; gap: 0.5rem; }
.no__txt strong { font-weight: 700; font-stretch: 112%; font-size: 1.05rem; line-height: 1.15; letter-spacing: -0.01em; }
.no__n { font: 500 0.66rem var(--f-mono); color: var(--aco); }
.no.on .no__txt strong { color: var(--efx); }

.ponta { display: grid; justify-items: center; align-content: start; gap: 0.35rem; width: 5rem; text-align: center; padding-top: calc(clamp(10.5rem, 11.5vw, 30rem) * 0.75 * 0.62 - 1.3rem); }
.ponta strong { font-weight: 700; font-stretch: 112%; font-size: 0.85rem; line-height: 1.15; }
.ponta__jack {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: radial-gradient(circle, #0c0d0e 0 28%, #6c737a 30% 44%, #d9dde0 47% 70%, #8b9298 72%);
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.15);
}
.ponta--out .ponta__jack { background: radial-gradient(circle, #0c0d0e 0 28%, #6c737a 30% 44%, #2a2e32 47% 70%, #121416 72%); }

/* celular: a cadeia vira vertical, o sinal desce da guitarra até o amp */
@media (max-width: 700px) {
  .cadeia__seta::after { content: ' ↓'; }
  .cadeia__seta { animation-name: desce; }
  .cadeia { direction: ltr; overflow: visible; padding-bottom: 0.5rem; }
  .cadeia__pista { flex-direction: column; align-items: stretch; gap: 2.6rem; width: auto; min-width: 0; padding: 1.6rem var(--gut) 0 calc(var(--gut) + 1.6rem); }
  .no, .ponta { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; column-gap: 1.2rem; width: auto; padding-top: 0; text-align: left; }
  .ponta { justify-items: start; row-gap: 0.1rem; }
  .ponta__jack { grid-column: 1; grid-row: 1 / span 2; justify-self: center; }
  .ponta > :not(.ponta__jack) { grid-column: 2; }
  .no__txt strong { font-size: 1.1rem; }
}
@keyframes desce { 50% { transform: translateY(0.25rem); } }

/* ---------- 2023 Series: palco escuro (as fotos da série são em fundo preto) ---------- */
.palco { background: var(--palco); color: #fff; padding-block: clamp(3.5rem, 7vw, 8rem); }
.palco__cab { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.6rem 2rem; margin-bottom: 2.5rem; }
.palco__cab .rotulo { color: #8e959b; grid-column: 1 / -1; }
.palco h2 { font-size: clamp(2.4rem, 5.5vw, 7rem); }
.palco .link-seta { color: #fff; margin-right: 1rem; }
.palco__nav { display: flex; align-items: center; gap: 0.5rem; }
.seta { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid #3b4045; color: #fff; font-size: 1.1rem; transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.seta:hover { background: #fff; color: var(--tinta); border-color: #fff; }
.seta:active { transform: scale(0.92); }
.trilho.arrastando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.trilho { cursor: grab; }
.trilho img { -webkit-user-drag: none; user-select: none; }
.palco .card { transition: transform 0.5s var(--suave); }
.palco .card:hover { transform: translateY(-0.5rem); }
.trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(14rem, 21vw, 34rem);
  gap: 1.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 0 var(--gut) 1.5rem;
  scroll-padding-inline: var(--gut);
  scrollbar-width: thin; scrollbar-color: #3b4045 transparent;
}
.trilho > * { scroll-snap-align: start; }
.palco .card__nome a, .palco .preco__v { color: #fff; }
.palco .preco__pix { color: #7fd6cc; }
.palco .card__comprar { border-color: #4a5056; color: #fff; }
.palco .card__comprar:hover { background: #fff; color: var(--tinta); border-color: #fff; }

/* ---------- cards ---------- */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 3rem 1.75rem; }
.card { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.card__foto { display: block; aspect-ratio: 1; background: var(--bg, #fff); border-radius: var(--raio); overflow: hidden; }
.card__foto img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s var(--suave); }
.card:hover .card__foto img { transform: scale(1.045); }
.card__nome { font-weight: 650; font-stretch: 112%; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: anywhere; }
.card__nome a:hover { color: var(--efx); }
.card__rodape { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; margin-top: auto; }
.card__comprar {
  flex: none;
  font: 500 0.62rem var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.6rem 0.95rem; border: 1px solid var(--tinta); border-radius: 99px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.card__comprar:hover { background: var(--tinta); color: #fff; }

.preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; }
.preco__v { font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; }
.preco__pix { font: 500 0.62rem var(--f-mono); color: var(--efx); white-space: nowrap; }
.preco__de { color: var(--aco); font-size: 0.85rem; }
.preco--g { gap: 0.3rem 1rem; }
.preco--g .preco__v { font-size: 2rem; font-weight: 700; font-stretch: 112%; letter-spacing: -0.02em; }
.preco--g .preco__pix { font-size: 0.75rem; flex-basis: 100%; }

/* ---------- índice de categorias ---------- */
.indice { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 5rem; align-items: start; }
.indice__lista > .rotulo { margin-bottom: 1rem; }
.indice__linha { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1.05rem 0; border-bottom: 1px solid var(--fio); }
.indice__linha:first-of-type { border-top: 1px solid var(--fio); }
.indice__nome { font-weight: 750; font-stretch: 125%; font-size: clamp(1.35rem, 2.5vw, 3.3rem); line-height: 1.05; letter-spacing: -0.025em; transition: transform 0.35s var(--suave), color 0.2s; }
.indice__n { font: 500 0.75rem var(--f-mono); color: var(--aco); }
.indice__linha:hover .indice__nome, .indice__linha:focus-visible .indice__nome { transform: translateX(0.7rem); color: var(--efx); }
.indice__prev { position: sticky; top: 7rem; margin: 0; aspect-ratio: 1; border-radius: var(--raio); overflow: hidden; background: var(--bg, #fff); }
.indice__prev img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- bancada ---------- */
.bancada { background: var(--painel); padding-block: clamp(3.5rem, 7vw, 8rem); }
.bancada__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; }
.bancada h2 { font-size: clamp(2.2rem, 4.4vw, 5.6rem); margin: 0.8rem 0 1.4rem; }
.bancada__txt > p:not(.rotulo) { font-size: 1.08rem; color: #3a4046; max-width: 38ch; }
.bancada__servicos { margin: 2rem 0; columns: 2 15rem; column-gap: 2.5rem; font-size: 0.88rem; color: #3a4046; line-height: 1.5; }
.bancada__servicos p { break-inside: avoid; margin-bottom: 1.1rem; }
.bancada__servicos b { color: var(--tinta); font-weight: 650; }
.bancada__tabela .rotulo { margin-bottom: 0.8rem; }
.tabela { list-style: none; margin: 0; padding: 0; border-top: 1px solid #d6dadd; }
.tabela a { display: flex; align-items: baseline; gap: 0.8rem; padding: 0.72rem 0; border-bottom: 1px solid #d6dadd; font-size: 0.95rem; transition: padding 0.25s var(--suave); }
.tabela i { flex: 1; border-bottom: 1px dotted #a5acb2; transform: translateY(-0.25em); }
.tabela b { font: 500 0.75rem var(--f-mono); font-variant-numeric: tabular-nums; }
.tabela a:hover { padding-left: 0.5rem; color: var(--efx); }

/* ---------- história + clipping ---------- */
.historia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: start; }
.historia h2, .sobre h1 { font-size: clamp(1.9rem, 3.2vw, 4rem); font-stretch: 112%; line-height: 1.05; margin: 0.8rem 0 1.4rem; }
.historia__txt > p:not(.rotulo) { color: #3a4046; font-size: 1.05rem; max-width: 52ch; margin-bottom: 1.5rem; }
.historia__clip > .rotulo { margin-bottom: 1rem; }
.clip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.clip--g { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); margin-top: 1.5rem; }
.clip__item { display: block; aspect-ratio: 3 / 4; border-radius: 0.5rem; overflow: hidden; background: var(--painel); box-shadow: 0 0 0 1px var(--fio); transition: transform 0.35s var(--suave), box-shadow 0.35s; cursor: zoom-in; }
a.clip__item { cursor: alias; }
.clip__item img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.clip__item:hover { transform: translateY(-0.35rem) rotate(-1deg); box-shadow: 0 1rem 2rem -0.8rem rgba(18, 20, 22, 0.35); }

/* ---------- catálogo ---------- */
.migalhas { display: flex; flex-wrap: wrap; gap: 0.5rem; font: 500 0.62rem var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--aco); margin-bottom: 1.6rem; }
.migalhas a::after { content: '/'; margin-left: 0.5rem; color: #c3c8cc; }
.migalhas a:hover { color: var(--tinta); }
.catalogo__cab { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem 2rem; padding-bottom: 2.2rem; }
.catalogo__cab h1 { font-size: clamp(2.2rem, 4.6vw, 6rem); }
.catalogo__n { font: 500 0.7rem var(--f-mono); color: var(--aco); grid-row: 2; }
.faixa-pix { grid-row: 1 / 3; grid-column: 2; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1rem; border: 1px solid var(--fio); border-radius: 99px; font-size: 0.8rem; font-weight: 500; }
.catalogo__corpo { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.filtros { position: sticky; top: 7rem; }
.filtros .rotulo { margin-bottom: 0.8rem; }
.filtros ul { list-style: none; margin: 0; padding: 0; }
.filtros ul ul { padding: 0.2rem 0 0.4rem 0.9rem; border-left: 1px solid var(--fio); margin-left: 0.2rem; }
.filtros a { display: block; padding: 0.38rem 0; font-size: 0.9rem; line-height: 1.3; }
.filtros a span:not(.pipe) { font: 500 0.62rem var(--f-mono); color: var(--aco); }
.filtros a:hover { color: var(--efx); }
.filtros a[aria-current] { font-weight: 650; color: var(--efx); }
.ferramentas { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.1rem; margin-bottom: 2.2rem; border-bottom: 1px solid var(--fio); }
.ordem { display: flex; align-items: center; gap: 0.75rem; }
.ordem select { appearance: none; border: 1px solid var(--fio); border-radius: 99px; padding: 0.5rem 2.2rem 0.5rem 1rem; font-size: 0.85rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23121416' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 0.7rem; }
.ver { display: flex; align-items: center; gap: 0.3rem; }
.ver .rotulo { margin-right: 0.4rem; }
.ver a { font: 500 0.66rem var(--f-mono); padding: 0.45rem 0.75rem; border-radius: 99px; text-transform: uppercase; }
.ver a:hover { background: var(--painel); }
.ver a[aria-current] { background: var(--tinta); color: #fff; }
.paginas { display: flex; gap: 0.4rem; justify-content: center; margin-top: 4rem; }
.paginas a { min-width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid var(--fio); border-radius: 99px; font: 500 0.75rem var(--f-mono); }
.paginas a:hover { border-color: var(--tinta); }
.paginas a[aria-current] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.vazio { display: grid; justify-items: start; gap: 1.2rem; padding: 3rem 0; color: #3a4046; font-size: 1.05rem; }

/* ---------- produto ---------- */
.produto__topo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 7rem); align-items: start; }
.galeria__main { display: block; width: 100%; aspect-ratio: 1; background: var(--bg, #fff); border-radius: calc(var(--raio) * 1.4); overflow: hidden; cursor: zoom-in; }
.galeria__main img { width: 100%; height: 100%; object-fit: contain; }
.galeria__mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 0.7rem; margin-top: 0.9rem; }
.galeria__mini button { aspect-ratio: 1; background: var(--bg, #fff); border-radius: 0.6rem; overflow: hidden; box-shadow: 0 0 0 1px var(--fio); transition: box-shadow 0.2s; }
.galeria__mini img { width: 100%; height: 100%; object-fit: contain; }
.galeria__mini button[aria-current] { box-shadow: 0 0 0 2px var(--tinta); }
.produto__info { position: sticky; top: 7rem; display: grid; gap: 1.5rem; padding-top: 1rem; }
.produto__info .rotulo a:hover { color: var(--efx); }
.produto__info h1 { font-size: clamp(2.4rem, 4.6vw, 6.4rem); line-height: 0.95; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.comprar { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.comprar .btn { flex: 1; }
.qtd { display: inline-flex; align-items: center; border: 1px solid var(--fio); border-radius: 99px; }
.qtd button { width: 2.9rem; height: 2.9rem; font-size: 1.1rem; border-radius: 50%; }
.qtd button:hover { background: var(--painel); }
.qtd input, .qtd output { width: 2.4rem; text-align: center; border: 0; background: none; font: 600 0.9rem var(--f-mono); -moz-appearance: textfield; }
.qtd input::-webkit-inner-spin-button, .qtd input::-webkit-outer-spin-button { -webkit-appearance: none; }
.qtd--p button { width: 2.3rem; height: 2.3rem; }
.nota { font-size: 0.8rem; color: var(--aco); }

.produto__corpo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 5rem; margin-top: clamp(4rem, 7vw, 8rem); padding-top: 2.5rem; border-top: 1px solid var(--fio); }
.produto__corpo .rotulo, .produto__videos > .rotulo, .produto__rel > .rotulo { margin-bottom: 1.4rem; }
.texto { font-size: 1.02rem; line-height: 1.68; max-width: 46rem; color: #2b3035; }
.texto p { margin-bottom: 1em; }
.texto ul { padding-left: 1.1rem; margin: 0 0 1.2em; }
.texto li { margin-bottom: 0.35em; }
.texto li::marker { color: var(--efx); }
.texto strong, .texto b { font-weight: 650; color: var(--tinta); }
.texto--g { font-size: 1.18rem; max-width: 52rem; }
.produto__lado { display: grid; gap: 3rem; align-content: start; }
.produto__lado .nota a { color: var(--tinta); text-decoration: underline; text-underline-offset: 0.3em; margin-left: 0.3rem; }
.ficha { margin: 0; display: grid; }
.ficha div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--fio); }
.ficha div:first-child { border-top: 1px solid var(--fio); }
.ficha dt { font: 500 0.66rem var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--aco); }
.ficha dd { margin: 0; font-size: 0.92rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.produto__videos, .produto__audios, .produto__rel { margin-top: clamp(4rem, 7vw, 8rem); }
.produto__audios > .rotulo { margin-bottom: 1.4rem; }
.audios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.75rem; }
.audio { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--fio); border-radius: var(--raio); text-align: left; transition: border-color 0.2s; }
.audio:hover { border-color: var(--tinta); }
.audio__play { flex: none; position: relative; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--tinta); transition: transform 0.3s var(--suave), background 0.2s; }
.audio__play::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0.8rem; height: 0.95rem; background: #fff; clip-path: polygon(15% 0, 100% 50%, 15% 100%); }
.audio:hover .audio__play { background: var(--efx); transform: scale(1.06); }
.audio__txt { display: grid; gap: 0.2rem; min-width: 0; }
.audio__txt strong { font-weight: 600; overflow-wrap: anywhere; }
.audio--on { padding: 0; border: 0; }
.audio--on iframe { display: block; width: 100%; height: 166px; border: 0; border-radius: var(--raio); }
.texto img { height: auto; margin: 1.2rem 0; border-radius: 0.6rem; background: var(--painel); }
.texto a { color: var(--efx); text-decoration: underline; text-underline-offset: 0.25em; }
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 1.25rem; }
.video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; background: #000; }
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--suave), opacity 0.3s; opacity: 0.88; }
.video:hover img { transform: scale(1.03); opacity: 1; }
.video__play { position: absolute; inset: 0; margin: auto; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: rgba(255, 255, 255, 0.94); box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.3); transition: transform 0.3s var(--suave); }
.video__play::after { content: ''; position: absolute; inset: 0; margin: auto; width: 1.2rem; height: 1.4rem; background: var(--tinta); clip-path: polygon(15% 0, 100% 50%, 15% 100%); }
.video:hover .video__play { transform: scale(1.08); }
.video iframe { width: 100%; height: 100%; border: 0; }

/* ---------- carrinho + checkout ---------- */
.estreita h1 { font-size: clamp(2.2rem, 4.4vw, 5.4rem); margin-bottom: 2.4rem; }
.carrinho__corpo { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: 3.5rem; align-items: start; }
.linhas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fio); }
.linha { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto auto; gap: 1.4rem; align-items: center; padding: 1.3rem 0; border-bottom: 1px solid var(--fio); }
.linha__foto { aspect-ratio: 1; background: var(--bg, #fff); border-radius: 0.7rem; overflow: hidden; }
.linha__foto img { width: 100%; height: 100%; object-fit: contain; }
.linha__info { display: grid; gap: 0.25rem; justify-items: start; }
.linha__info strong { font-weight: 650; font-stretch: 112%; font-size: 1.05rem; }
.linha__info span { font-size: 0.85rem; color: var(--aco); }
.linha__rem { font: 500 0.6rem var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--aco); text-decoration: underline; text-underline-offset: 0.3em; margin-top: 0.3rem; }
.linha__rem:hover { color: var(--led); }
.linha__total { font-variant-numeric: tabular-nums; min-width: 6.5rem; text-align: right; }
.resumo { position: sticky; top: 7rem; background: var(--painel); border-radius: var(--raio); padding: 1.8rem; display: grid; gap: 1.2rem; }
.resumo dl { margin: 0; }
.resumo dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid #dcdfe2; font-size: 0.92rem; }
.resumo dt { display: flex; align-items: center; gap: 0.55rem; }
.resumo dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.resumo .resumo__pix { border-bottom: 0; color: var(--efx); font-weight: 600; font-size: 1rem; }
.resumo .resumo__pix dd { font-size: 1.25rem; font-weight: 750; font-stretch: 112%; }
.resumo__itens { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.resumo__itens li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-top: 1px solid #dcdfe2; }

.form { display: grid; gap: 1.3rem; align-content: start; }
.form label { display: grid; gap: 0.45rem; font-size: 0.85rem; font-weight: 600; }
.form input:not([type="radio"]) { padding: 0.9rem 1rem; border: 1px solid #cfd4d8; border-radius: 0.65rem; font-size: 1rem; font-weight: 400; background: #fff; }
.form input:not([type="radio"]):focus { outline: 2px solid var(--efx); outline-offset: 0; border-color: transparent; }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.form legend { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.45rem; }
.form .opcao { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.1rem; border: 1px solid var(--fio); border-radius: 0.75rem; font-weight: 400; cursor: pointer; }
.form .opcao:has(:checked) { border-color: var(--efx); background: var(--efx-claro); }
.form .opcao input { accent-color: var(--efx); width: 1.1rem; height: 1.1rem; }
.form .opcao span { display: grid; gap: 0.1rem; font-size: 0.88rem; }
.pedido-ok { display: grid; gap: 1rem; justify-items: start; padding: 1.3rem; border: 1px solid var(--efx); border-radius: var(--raio); background: var(--efx-claro); }
.pedido-ok[hidden] { display: none; }
.pedido-ok textarea { width: 100%; font: 400 0.75rem/1.6 var(--f-mono); border: 1px solid #cfe3e0; border-radius: 0.5rem; padding: 0.8rem; background: #fff; resize: vertical; }

/* ---------- conta, sobre, contato ---------- */
.lead { font-size: 1.15rem; color: #3a4046; max-width: 48ch; margin-bottom: 2.4rem; }
.conta-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.conta-grade a { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 1.5rem; border: 1px solid var(--fio); border-radius: var(--raio); font-weight: 650; font-stretch: 112%; font-size: 1.05rem; transition: border-color 0.2s, background 0.2s; }
.conta-grade a::after { content: '↗'; color: var(--aco); }
.conta-grade a:hover { border-color: var(--tinta); }
.sobre > .rotulo { margin-bottom: 0.2rem; }
.sobre__foto { width: 100%; max-width: 42rem; border-radius: var(--raio); margin: 1rem 0 4rem; }
.sobre h2.rotulo { margin-bottom: 0.6rem; }
.canais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.canal { display: grid; gap: 1rem; align-content: space-between; min-height: 14rem; padding: 1.8rem; border: 1px solid var(--fio); border-radius: var(--raio); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.canal strong { font-weight: 750; font-stretch: 125%; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; }
.canal:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.canal:hover .rotulo { color: #a3aab0; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--fio); padding-top: clamp(3rem, 5vw, 6rem); margin-top: clamp(2rem, 4vw, 4rem); }
.rodape__in { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.rodape__marca .marca__efx { font-size: 3.4rem; display: block; margin-bottom: 1rem; }
.rodape__marca p { color: var(--aco); max-width: 30ch; font-size: 0.92rem; }
.rodape .rotulo { margin-bottom: 0.8rem; font-weight: 500; }
.rodape nav a, .rodape__in > div a { display: block; padding: 0.28rem 0; font-size: 0.92rem; }
.rodape a:hover { color: var(--efx); }
.rodape__copy { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font: 400 0.6rem var(--f-mono); color: var(--aco); padding-block: 3rem 2rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------- lupa e toast ---------- */
.lupa { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; overflow: hidden; }
.lupa[open] { display: grid; place-items: center; }
.lupa::backdrop { background: rgba(8, 9, 10, 0.9); backdrop-filter: blur(6px); }
.lupa img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 0.6rem; }
.lupa__x, .lupa__seta { position: fixed; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.8rem; line-height: 1; }
.lupa__x:hover, .lupa__seta:hover { background: rgba(255, 255, 255, 0.25); }
.lupa__x { top: 1.2rem; right: 1.2rem; }
.lupa__seta { top: 50%; transform: translateY(-50%); }
.lupa__seta--ant { left: 1.2rem; }
.lupa__seta--prox { right: 1.2rem; }
.lupa--uma .lupa__seta { display: none; }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 90;
  transform: translate(-50%, 1.5rem);
  opacity: 0; visibility: hidden;
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 32px);
  padding: 0.9rem 1.4rem; border-radius: 99px;
  background: var(--tinta); color: #fff; font-size: 0.88rem;
  box-shadow: 0 1rem 3rem -0.5rem rgba(0, 0, 0, 0.35);
  transition: transform 0.4s var(--suave), opacity 0.3s, visibility 0.4s;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* barra de compra fixa — só no celular, depois que o botão principal sai da tela */
.barra-compra { display: none; }
@media (max-width: 900px) {
  .barra-compra {
    position: fixed; left: 0.6rem; right: 0.6rem; bottom: 0.6rem; z-index: 80;
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    padding: 0.6rem 0.6rem 0.6rem 1.1rem; border-radius: 1.2rem;
    background: rgba(18, 20, 22, 0.94); color: #fff; backdrop-filter: blur(10px);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.3);
    transform: translateY(160%); transition: transform 0.45s var(--suave);
  }
  .barra-compra.on { transform: none; }
  .barra-compra div { display: grid; min-width: 0; }
  .barra-compra strong { font-weight: 650; font-stretch: 112%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra-compra span { font: 500 0.62rem var(--f-mono); color: #9fdcd4; }
  .barra-compra .btn { background: #fff; color: var(--tinta); border-color: #fff; padding: 0.8rem 1.2rem; flex: none; }
  .toast { bottom: 5.5rem; }
}
.toast a { color: #7fd6cc; text-decoration: underline; text-underline-offset: 0.3em; margin-left: 0.5rem; font-weight: 600; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .busca { width: 13rem; }
  .nav { gap: 1.4rem; }
  .indice, .bancada__in, .historia { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .indice__prev { display: none; }
  .carrinho__corpo { grid-template-columns: minmax(0, 1fr); }
  .resumo { position: static; }
}
@media (max-width: 900px) {
  .topo__in { grid-template-columns: 1fr auto; gap: 0.6rem 1rem; padding-block: 0.6rem; }
  .nav { display: none; }
  .busca { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .menu-btn { display: grid; }
  .conta summary span { display: none; }
  .hero__txt { grid-template-columns: minmax(0, 1fr); }
  .catalogo__corpo { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .filtros { position: static; }
  .filtros > ul { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.6rem; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .filtros > ul > li > a { white-space: nowrap; padding: 0.5rem 0.9rem; border: 1px solid var(--fio); border-radius: 99px; font-size: 0.82rem; }
  .filtros > ul > li > a[aria-current] { border-color: var(--efx); }
  .filtros ul ul { display: none; }
  .catalogo__cab { grid-template-columns: minmax(0, 1fr); }
  .faixa-pix { grid-row: auto; grid-column: auto; justify-self: start; }
  .produto__topo, .produto__corpo { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .produto__info { position: static; }
  .canais { grid-template-columns: minmax(0, 1fr); }
  .canal { min-height: 0; }
  .rodape__in { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0.9rem; }
  .card__rodape { flex-direction: column; align-items: flex-start; }
  .marca__sub { display: none; }
  .carrinho-btn { padding: 0.5rem 0.75rem; }
  .linha { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
  .linha__total { grid-column: 2 / -1; text-align: left; }
  .clip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .palco__cab { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .pulso { display: none; }
  .fita__in { flex-wrap: wrap; width: auto; justify-content: center; }
  .fita__in > span:nth-child(n + 7) { display: none; }
}