/**
 * Secao de Depoimentos -- "Mural de recortes".
 *
 * Layout portado do Claude Design ("Depoimentos Natural Bot.dc.html", 2a),
 * com paleta e tipografia alinhadas ao tema: Cairo em todo texto de leitura e
 * as cores de --home-page-* do style.css.
 *
 * A unica excecao tipografica e a manchete recortada, que precisa de familias
 * distintas por letra para simular letras recortadas de jornal, mais a
 * assinatura manuscrita em Caveat.
 */

.nb-dep {
  /* Paleta do tema (style.css:5906-5912) */
  --nb-dep-magenta: #ff007c;
  --nb-dep-purple: #702cfb;
  --nb-dep-ink: #231f20;
  --nb-dep-text: #475467;
  --nb-dep-gray: #68727d;
  --nb-dep-paper: #fbf9ff;
  --nb-dep-paper-2: #f8f4ff;
  --nb-dep-lilac: #ebe1ff;

  --nb-dep-gap: 20px;
  --nb-dep-per-view: 3;
  /* Largura fixa do card: em full-width, deixar o card esticar levaria a
     mais de 300px e a mídia 9:16 estouraria a altura da faixa */
  --nb-dep-card-w: 232px;

  /* Recorte irregular do papel, identico ao design original */
  --nb-dep-tear: polygon(
    0% 1.4%, 6% 0.4%, 13% 1.8%, 20% 0.5%, 28% 1.6%, 36% 0.4%, 44% 1.7%, 52% 0.6%,
    60% 1.6%, 68% 0.4%, 76% 1.7%, 84% 0.5%, 92% 1.6%, 100% 0.6%,
    99% 10%, 100% 20%, 98.9% 30%, 100% 40%, 99% 50%, 100% 60%, 98.9% 70%, 100% 80%, 99% 90%, 100% 95%,
    92% 99.5%, 84% 98.2%, 76% 99.6%, 68% 98.3%, 60% 99.6%, 52% 98.2%, 44% 99.5%,
    36% 98.3%, 28% 99.6%, 20% 98.2%, 13% 99.5%, 6% 98.4%, 0% 99.4%,
    1% 90%, 0% 80%, 1.1% 70%, 0% 60%, 1% 50%, 0% 40%, 1.1% 30%, 0% 20%, 1% 10%
  );

  position: relative;
  overflow: hidden;
  /* Respiro entre o botao "Inicie o teste" e a secao */
  margin-top: 72px;
  font-family: "Cairo", sans-serif;
  background:
    radial-gradient(circle at 1px 1px, rgba(112, 44, 251, 0.09) 1px, transparent 1.6px) 0 0 / 9px 9px,
    linear-gradient(var(--nb-dep-paper), var(--nb-dep-paper-2));
}

/*
  ESPECIFICIDADE -- por que as regras de botao repetem a classe raiz.

  style.css estiliza todo botao da home com nesting nativo:

      body.home.page-template-default { & button:not(.close) { ... } }

  Esse seletor resolve para 0,3,2 (fundo magenta, border-radius 80px, padding
  16px 24px). Uma classe simples como .nb-dep__watch (0,1,0) perde, e um reset
  generico em `button` tambem. Repetir .nb-dep tres vezes leva os seletores a
  0,4,0, que vence sem exigir !important em cascata em tudo que vem depois.
  O mesmo vale para <p>: onde o texto nao e paragrafo, o markup usa div/span.
*/

/*
  O fundo da secao e full-width; o conteudo fica dentro do .container do tema
  (75rem), alinhado com as demais secoes. Largura e padding lateral vem de la --
  aqui so o grid e o respiro vertical.
*/
.nb-dep__body {
  display: grid;
  /* O carrossel tem largura propria (N cards); o texto absorve a sobra */
  grid-template-columns: minmax(300px, 1fr) auto;
  gap: 48px;
  align-items: center;
  padding-top: 44px;
  padding-bottom: 40px;
}

/* =========================================================
   COLUNA ESQUERDA
   ========================================================= */

.nb-dep__kicker {
  display: inline-block;
  transform: rotate(-1.6deg);
  background: var(--nb-dep-ink);
  color: #fff;
  font-family: "Cairo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
  margin: 0;
}

/* Manchete em letras recortadas -- unica parte que mantem as fontes do design */
.nb-dep__headline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  margin: 16px 0 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.nb-dep__headline-row {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: nowrap;
}

/*
  Corpo da manchete em uma variavel: as letras tem tamanhos ligeiramente
  diferentes entre si (parte do efeito de recorte), entao escalam juntas por
  fator em vez de valores soltos.
*/
.nb-dep { --nb-dep-cut: 56px; }

.nb-dep__letter {
  display: inline-block;
  font-size: var(--nb-dep-cut);
  line-height: 0.94;
  padding: 3px 7px;
}
.nb-dep__letter--1 { font-family: "Archivo Black", sans-serif; background: var(--nb-dep-ink); color: #fff; transform: rotate(-2.5deg); }
.nb-dep__letter--2 { font-family: "Special Elite", monospace; font-size: calc(var(--nb-dep-cut) * 0.94); background: var(--nb-dep-magenta); color: #fff; padding: 4px 7px; transform: rotate(1.8deg); }
.nb-dep__letter--3 { font-family: "Baloo 2", sans-serif; font-weight: 800; background: #fff; color: var(--nb-dep-ink); box-shadow: 0 2px 0 rgba(35, 31, 32, 0.2); transform: rotate(-1deg); }
.nb-dep__letter--4 { font-family: "Archivo Black", sans-serif; font-size: calc(var(--nb-dep-cut) * 0.91); background: var(--nb-dep-purple); color: #fff; padding: 5px 7px; transform: rotate(3deg); }
.nb-dep__letter--5 { font-family: "Baloo 2", sans-serif; font-weight: 800; background: var(--nb-dep-lilac); color: var(--nb-dep-purple); transform: rotate(2deg); }
.nb-dep__letter--6 { font-family: "Special Elite", monospace; font-size: calc(var(--nb-dep-cut) * 0.91); background: var(--nb-dep-ink); color: #fff; padding: 5px 7px; transform: rotate(-3deg); }
.nb-dep__letter--7 { font-family: "Archivo Black", sans-serif; font-size: calc(var(--nb-dep-cut) * 0.94); background: var(--nb-dep-magenta); color: #fff; padding: 4px 7px; transform: rotate(1deg); }
.nb-dep__letter--8 { font-family: "Baloo 2", sans-serif; font-weight: 800; color: var(--nb-dep-ink); }
.nb-dep__letter--9 { font-family: "Archivo Black", sans-serif; font-size: calc(var(--nb-dep-cut) * 0.91); background: #fff; color: var(--nb-dep-magenta); padding: 4px 7px; box-shadow: 0 2px 0 rgba(35, 31, 32, 0.2); transform: rotate(2.4deg); }
.nb-dep__letter--10 { font-family: "Special Elite", monospace; font-size: calc(var(--nb-dep-cut) * 0.94); background: var(--nb-dep-purple); color: #fff; padding: 5px 7px; transform: rotate(-2deg); }
.nb-dep__letter--11 { font-family: "Baloo 2", sans-serif; font-weight: 800; background: var(--nb-dep-ink); color: #fff; transform: rotate(1.4deg); }
.nb-dep__letter--12 { font-family: "Archivo Black", sans-serif; font-size: calc(var(--nb-dep-cut) * 0.91); background: var(--nb-dep-lilac); color: var(--nb-dep-ink); padding: 5px 7px; transform: rotate(-2.6deg); }
.nb-dep__letter--13 { font-family: "Special Elite", monospace; font-size: calc(var(--nb-dep-cut) * 0.94); background: var(--nb-dep-magenta); color: #fff; padding: 5px 7px; transform: rotate(2.2deg); }

.nb-dep__space { width: 16px; }

.nb-dep.nb-dep.nb-dep .nb-dep__lead {
  font-family: "Cairo", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--nb-dep-text);
  max-width: 400px;
  margin: 20px 0 0;
  text-wrap: pretty;
}

/* Selos de metrica */
.nb-dep__stats {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.nb-dep__stat {
  background: #fff;
  border: 2px solid var(--nb-dep-ink);
  padding: 8px 14px;
}
.nb-dep__stat:nth-child(odd) { transform: rotate(-1.5deg); box-shadow: 4px 4px 0 var(--nb-dep-purple); }
.nb-dep__stat:nth-child(even) { transform: rotate(1.2deg); box-shadow: 4px 4px 0 var(--nb-dep-magenta); }

.nb-dep__stat-value {
  font-family: "Archivo Black", sans-serif;
  font-size: 20px;
  color: var(--nb-dep-magenta);
}
.nb-dep__stat:nth-child(even) .nb-dep__stat-value { color: var(--nb-dep-purple); }
.nb-dep__stat-label {
  font-family: "Cairo", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nb-dep-text);
  margin-left: 8px;
}

/* Navegacao -- mesmo padrao dos botoes da pagina */
.nb-dep__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.nb-dep.nb-dep.nb-dep .nb-dep__arrow {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--nb-dep-magenta);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  text-transform: none;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.nb-dep.nb-dep.nb-dep .nb-dep__arrow:hover:not(:disabled) { opacity: 0.8; }
.nb-dep.nb-dep.nb-dep .nb-dep__arrow:focus-visible { outline: 3px solid var(--nb-dep-purple); outline-offset: 3px; }
.nb-dep.nb-dep.nb-dep .nb-dep__arrow:disabled { opacity: 0.3; cursor: default; }
.nb-dep__arrow svg { width: 20px; height: 20px; display: block; }
.nb-dep__arrow--prev svg { transform: scaleX(-1); }

.nb-dep__counter {
  font-family: "Cairo", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--nb-dep-gray);
}

/* =========================================================
   CARROSSEL
   ========================================================= */

/* Largura exata de N cards -- o overflow corta antes de aparecer o proximo */
.nb-dep__viewport {
  overflow: hidden;
  padding: 26px 0 8px;
  width: calc(
    var(--nb-dep-per-view) * var(--nb-dep-card-w) +
    (var(--nb-dep-per-view) - 1) * var(--nb-dep-gap)
  );
  max-width: 100%;
}
.nb-dep__track {
  display: flex;
  gap: var(--nb-dep-gap);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
  A largura vem de --nb-dep-per-view: os cards se ajustam para caber exatamente
  N por vez dentro do container, em vez de largura fixa em px. flex-shrink 0
  deixa os demais transbordarem para fora do viewport (que tem overflow hidden).
*/
.nb-dep__item {
  flex: 0 0 var(--nb-dep-card-w);
  position: relative;
  filter: drop-shadow(0 10px 18px rgba(35, 31, 32, 0.18));
}
.nb-dep__item:nth-child(odd) { transform: rotate(-1.8deg); }
.nb-dep__item:nth-child(even) { transform: rotate(1.8deg); margin-top: 22px; }

/* Fita adesiva -- irma do papel, fora do clip-path para nao ser cortada */
.nb-dep__tape {
  position: absolute;
  top: -12px;
  left: 32px;
  width: 86px;
  height: 24px;
  background: rgba(255, 0, 124, 0.26);
  border-left: 1px dashed rgba(35, 31, 32, 0.25);
  border-right: 1px dashed rgba(35, 31, 32, 0.25);
  transform: rotate(-7deg);
  z-index: 2;
}
.nb-dep__item:nth-child(even) .nb-dep__tape { background: rgba(112, 44, 251, 0.22); }

.nb-dep__paper {
  background: #fff;
  padding: 9px 9px 11px;
  clip-path: var(--nb-dep-tear);
}

.nb-dep__media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--nb-dep-ink);
  overflow: hidden;
}
.nb-dep__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
  Botao de play: a capa inteira continua clicavel, mas o circulo fica no canto
  inferior direito -- centralizado, ele cobria o rosto das pessoas na capa.
*/
.nb-dep.nb-dep.nb-dep .nb-dep__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  padding: 12px;
  gap: 0;
  background: transparent;
  cursor: pointer;
}
.nb-dep__play-circle {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(35, 31, 32, 0.4);
  transition: background 0.2s ease, transform 0.2s ease;
}
/*
  O :hover precisa da mesma blindagem do estado normal. O tema tem
  `body.home… & button:not(.close):hover` (0,4,2), que sem isto repintava a capa
  inteira de magenta ao passar o mouse.
*/
.nb-dep.nb-dep.nb-dep .nb-dep__play:hover,
.nb-dep.nb-dep.nb-dep .nb-dep__play:focus { background: transparent; opacity: 1; }
.nb-dep__play:hover .nb-dep__play-circle { background: #fff; transform: scale(1.08); }
.nb-dep.nb-dep.nb-dep .nb-dep__play:focus-visible { outline: 3px solid var(--nb-dep-magenta); outline-offset: -6px; }

/* =========================================================
   HOVER DO CARD -- veu magenta com a ficha ao centro
   ========================================================= */

.nb-dep__hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* Recuo inferior reserva o canto do botao de play */
  padding: 24px 18px 76px;
  text-align: center;
  background: rgba(255, 0, 124, 0.9);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.nb-dep__item:hover .nb-dep__hover,
.nb-dep__item:focus-within .nb-dep__hover { opacity: 1; }

.nb-dep__hover-name {
  font-family: "Cairo", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-wrap: balance;
}
.nb-dep__hover-place {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "Cairo", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

/* A assinatura sai de cena no hover -- o nome ja aparece ao centro */
.nb-dep__item:hover .nb-dep__name,
.nb-dep__item:focus-within .nb-dep__name { opacity: 0; }

/* Triangulo do play desenhado com bordas */
.nb-dep__play-icon {
  width: 0;
  height: 0;
  border-left: 17px solid var(--nb-dep-magenta);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 5px;
}
.nb-dep__item:nth-child(even) .nb-dep__play-icon { border-left-color: var(--nb-dep-purple); }

/* Assinatura manuscrita sobre a capa */
.nb-dep__name {
  position: absolute;
  left: 10px;
  bottom: 10px;
  /* Reserva o canto direito para o botao de play */
  max-width: calc(100% - 84px);
  pointer-events: none;
  font-family: "Caveat", cursive;
  font-size: 26px;
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: opacity 0.28s ease;
}

.nb-dep__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 3px 0;
}
.nb-dep__place {
  font-family: "Cairo", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--nb-dep-purple);
}
.nb-dep.nb-dep.nb-dep .nb-dep__watch {
  font-family: "Cairo", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--nb-dep-magenta);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  width: auto;
  gap: 0;
  text-transform: none;
  display: inline;
}
.nb-dep.nb-dep.nb-dep .nb-dep__watch:hover { color: var(--nb-dep-purple); opacity: 1; }

/* Depoimento completo, guardado no card e clonado pelo modal */
.nb-dep__full { display: none; }

/* =========================================================
   TICKER
   ========================================================= */

.nb-dep__ticker {
  overflow: hidden;
  background: var(--nb-dep-ink);
  padding: 11px 0;
}
.nb-dep__ticker-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: nbDepTicker 38s linear infinite;
  font-family: "Cairo", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--nb-dep-lilac);
  white-space: nowrap;
}
@keyframes nbDepTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =========================================================
   MODAL
   ========================================================= */

.nb-dep-modal {
  /* Repetidas aqui porque o modal e irmao da secao, nao descendente */
  --nb-dep-magenta: #ff007c;
  --nb-dep-purple: #702cfb;
  --nb-dep-ink: #231f20;
  --nb-dep-text: #475467;
  --nb-dep-lilac: #ebe1ff;
  --nb-dep-paper: #fbf9ff;
  --nb-dep-paper-2: #f8f4ff;
  --nb-dep-tear: polygon(
    0% 1.4%, 6% 0.4%, 13% 1.8%, 20% 0.5%, 28% 1.6%, 36% 0.4%, 44% 1.7%, 52% 0.6%,
    60% 1.6%, 68% 0.4%, 76% 1.7%, 84% 0.5%, 92% 1.6%, 100% 0.6%,
    99% 10%, 100% 20%, 98.9% 30%, 100% 40%, 99% 50%, 100% 60%, 98.9% 70%, 100% 80%, 99% 90%, 100% 95%,
    92% 99.5%, 84% 98.2%, 76% 99.6%, 68% 98.3%, 60% 99.6%, 52% 98.2%, 44% 99.5%,
    36% 98.3%, 28% 99.6%, 20% 98.2%, 13% 99.5%, 6% 98.4%, 0% 99.4%,
    1% 90%, 0% 80%, 1.1% 70%, 0% 60%, 1% 50%, 0% 40%, 1.1% 30%, 0% 20%, 1% 10%
  );

  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 28px;
  background: rgba(35, 31, 32, 0.86);
  font-family: "Cairo", sans-serif;
}
.nb-dep-modal[hidden] { display: none; }

.nb-dep-modal__frame {
  height: 100%;
  max-height: 84vh;
  aspect-ratio: 9 / 16;
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  flex: none;
}
.nb-dep-modal__frame[hidden] { display: none; }
.nb-dep-modal__frame iframe,
.nb-dep-modal__frame video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/*
  O embed do Instagram tem altura propria (cabecalho + video + acoes + caixa de
  comentarios). Sem limite, sobra uma faixa branca morta embaixo do video.
*/
.nb-dep-modal__frame--instagram {
  aspect-ratio: auto;
  width: min(400px, 90vw);
  height: min(84vh, 745px);
  background: #fff;
}

.nb-dep-modal__info { max-width: 380px; max-height: 84vh; overflow-y: auto; }
.nb-dep-modal__name {
  font-family: "Caveat", cursive;
  font-size: 52px;
  line-height: 1;
  color: #fff;
}
.nb-dep-modal__place {
  font-family: "Cairo", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nb-dep-lilac, #ebe1ff);
  margin-top: 10px;
}
.nb-dep-modal__quote {
  font-family: "Cairo", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: #fff;
  margin-top: 18px;
  text-wrap: pretty;
}
.nb-dep-modal__quote p { margin: 0 0 12px; color: #fff; font-size: 17px; }
.nb-dep-modal__quote p:last-child { margin-bottom: 0; }

.nb-dep-modal.nb-dep-modal.nb-dep-modal .nb-dep-modal__close {
  display: inline-block;
  width: auto;
  margin-top: 26px;
  background: var(--nb-dep-magenta, #ff007c);
  color: #fff;
  font-family: "Cairo", sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 22px;
  border-radius: 80px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  text-transform: none;
  transition: opacity 0.2s ease;
}
.nb-dep-modal.nb-dep-modal.nb-dep-modal .nb-dep-modal__close:hover { opacity: 0.8; }
.nb-dep-modal.nb-dep-modal.nb-dep-modal .nb-dep-modal__close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/*
   Depoimento sem video: sem a moldura do player o texto ficaria solto sobre a
   pagina, entao a ficha vira um recorte de papel -- mesma linguagem dos cards.
*/
.nb-dep-modal--text .nb-dep-modal__info {
  max-width: 620px;
  /* Mesma textura pontilhada da secao -- branco chapado destoava do mural */
  background:
    radial-gradient(circle at 1px 1px, rgba(112, 44, 251, 0.09) 1px, transparent 1.6px) 0 0 / 9px 9px,
    linear-gradient(var(--nb-dep-paper), var(--nb-dep-paper-2));
  padding: 44px 48px 40px;
  clip-path: var(--nb-dep-tear);
  filter: none;
}
.nb-dep-modal--text .nb-dep-modal__name { color: var(--nb-dep-purple); }
.nb-dep-modal--text .nb-dep-modal__place { color: var(--nb-dep-magenta); }
.nb-dep-modal--text .nb-dep-modal__quote,
.nb-dep-modal--text .nb-dep-modal__quote p { color: var(--nb-dep-text); }

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 1281px) {
  .nb-dep { --nb-dep-cut: 40px; }
  .nb-dep__body { grid-template-columns: minmax(280px, 1fr) auto; gap: 32px; }
}

@media (max-width: 992px) {
  /* Empilha: texto em cima, carrossel embaixo em largura total */
  .nb-dep { --nb-dep-per-view: 2; }
  .nb-dep__body {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 36px;
    padding-bottom: 30px;
  }
  /* Empilhado, o texto ganha a largura toda -- centralizar evita o vazio a direita */
  .nb-dep__intro { text-align: center; }
  .nb-dep__headline { align-items: center; }
  .nb-dep__headline-row { justify-content: center; }
  .nb-dep__stats,
  .nb-dep__nav { justify-content: center; }
  .nb-dep.nb-dep.nb-dep .nb-dep__lead { max-width: 560px; margin-left: auto; margin-right: auto; }

  /* Empilhado, o carrossel ocupa a largura toda e os cards viram fracao dela */
  .nb-dep__viewport { width: 100%; padding-top: 18px; }
  .nb-dep__item { flex: 0 0 calc((100% - var(--nb-dep-gap)) / 2); }
}

@media (max-width: 768.98px) {
  .nb-dep {
    --nb-dep-per-view: 1;
    --nb-dep-gap: 16px;
    --nb-dep-cut: 32px;
    margin-top: 48px;
  }
  .nb-dep__body { padding-top: 30px; padding-bottom: 24px; }
  /*
    Um card por vez, com a borda do proximo aparecendo para indicar o swipe.
    O teto de 300px evita que a midia 9:16 estique a secao: sem ele, um card de
    465px geraria mais de 800px so de capa.
  */
  .nb-dep__item { flex: 0 0 min(calc(100% - 44px), 300px); }
  .nb-dep__letter { padding: 2px 5px; }
  .nb-dep__name { font-size: 22px; }

  /* Modal empilhado no mobile */
  .nb-dep-modal { flex-direction: column; gap: 18px; overflow-y: auto; }
  .nb-dep-modal__frame { max-height: 58vh; }
  .nb-dep-modal__frame--instagram { height: min(58vh, 640px); }
  .nb-dep-modal__name { font-size: 38px; }
  .nb-dep-modal__quote { font-size: 16px; margin-top: 12px; }
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .nb-dep__ticker-track { animation: none; }
  .nb-dep__track { transition: none; }
  .nb-dep__item,
  .nb-dep__item:nth-child(odd),
  .nb-dep__item:nth-child(even) { transform: none; }
  .nb-dep__tape { transform: rotate(-7deg); }
  .nb-dep__play:hover .nb-dep__play-circle { transform: none; }
}