/* ============================================================
   BILHART'S — Página de produto (/produtos/:slug)
   Só o que é específico desta página. Fundo, tipografia, botões,
   .wrap, .sec, .eyebrow, .label, .arrows, .media e o sistema de
   animação vêm de tokens.css + style.css.
   ============================================================ */

.pd {
  /* altura da nav fixa, usada nas âncoras e nos sticky */
  --nav-h: 78px;
  /* respiro vertical das seções, mais curto que o padrão do site */
  --sec-y: clamp(52px, 6vw, 88px)
}

/* âncoras param abaixo da nav */
.pd [id] {
  scroll-margin-top: calc(var(--nav-h) + 14px)
}

/* o verde do WhatsApp é o mesmo já usado no botão flutuante (style.css) */
.btn-wa {
  --wa-green: #25D366;
  background: var(--wa-green);
  border-color: var(--wa-green);
  color: #FFF
}

.btn-wa:hover {
  background: #1FBF5B;
  border-color: #1FBF5B
}

.btn-wa svg {
  flex: none;
  margin-right: 2px;
  vertical-align: -3px
}

/* Filho de grid tem `min-width:auto` por padrão e não encolhe abaixo do
   min-content — foi isso que estourou a largura em 320px. */
.pdclaro-grid > *,
.pdcalc > *,
.pdficha-grid > *,
.pdfaq-grid > *,
.pdlead-box > *,
.pdmodos-grid > *,
.pddep-grid > * {
  min-width: 0
}

/* ================= 1. CAPA ================= */
.pdcapa {
  position: relative;
  min-height: clamp(520px, 90dvh, 760px);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 60px) 0 clamp(40px, 5vw, 72px);
  overflow: hidden
}

.pdcapa-bg {
  position: absolute;
  inset: 0;
  background-image: var(--capa);
  background-size: cover;
  background-position: center;
  filter: saturate(.92) brightness(.72) contrast(1.04);
  transform: scale(1.04)
}

/* O VÉU NÃO MORA MAIS AQUI: a capa usa o `.scrim` do style.css, o mesmo do
   hero da home.

   Havia uma cópia dele neste arquivo, `.pdcapa-scrim`, com os mesmos dois
   gradientes e as paradas a poucos centésimos de distância — .93/.70/.22
   contra .92/.66/.18 no horizontal, .10/.30 contra .09/.26 no vertical.
   Ninguém pediu essa diferença: ela nasceu de um copiar-colar que envelheceu
   separado, e a prova é que as regras de CELULAR das duas eram idênticas byte
   a byte. Duas cópias do mesmo véu divergem de novo no primeiro ajuste.

   O comentário do `.scrim` sempre disse "hero e página de produto". Agora é
   verdade. O que continua sendo desta página é a FOTO (`.pdcapa-bg`), que
   tem enquadramento e filtro próprios, e o `--faixa` do celular logo abaixo —
   é dele que o véu compartilhado tira a altura da faixa. */

.pdcapa-in {
  position: relative;
  z-index: 2
}

.pdcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 12.5px;
  color: var(--dim);
  margin-bottom: 18px
}

.pdcrumb a {
  color: var(--mut);
  transition: color .4s var(--ease)
}

.pdcrumb a:hover {
  color: var(--cream)
}

.pdcapa .eyebrow {
  margin-bottom: 14px
}

.pdcapa h1 {
  max-width: 16ch
}

.pdresumo {
  margin-top: 18px;
  max-width: 54ch;
  font-size: clamp(15px, 1.2vw, 17.5px);
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: #CFC7BE
}

.pdacoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px
}

/* ================= 2. FOTOS ================= */
.pdfotos {
  padding: var(--sec-y) 0 clamp(40px, 4vw, 64px)
}

.pdfotos .head-row {
  margin-bottom: clamp(24px, 2.6vw, 36px)
}

/* Trilho de largura total (não usa .wrap). Rola só no eixo X — o
   overflow-y:hidden mata o scroll vertical que reprovou a versão anterior.
   Sem scroll-snap: o laço infinito (§1 do produto.js) reposiciona o
   scrollLeft na virada e o snap do navegador brigaria com esse ajuste. */
.pdf4 {
  display: flex;
  gap: 20px;
  padding: 0;                    /* sem recuo lateral: a espia é a borda */
  overflow-x: auto;
  overflow-y: hidden;
  overflow-anchor: none;         /* senão o trilho abre deslocado */
  overscroll-behavior-x: contain;
  cursor: grab;
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none       /* Edge legado */
}

/* rola por arraste, pelas setas e sozinho: a barra não tem função aqui */
.pdf4::-webkit-scrollbar {
  display: none
}

.pdf4.drag {
  cursor: grabbing
}

/* 3 inteiras no meio e meia foto em cada ponta.
   A conta: a faixa visível cabe 3 fotos, 4 vãos e 2 metades, ou seja
   4 larguras + 4 vãos = 100%. Daí largura = 25% - 20px, e o produto.js
   descansa o trilho meia foto adiantado para as pontas ficarem iguais. */
.pdf4 figure {
  flex: 0 0 calc(25% - 20px);
  aspect-ratio: 4/5;             /* as fotos são 1080×1350 */
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg3)
}

.pdf4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out)
}

.pdf4 figure:hover img {
  transform: scale(1.05)
}

.pdf4 figure:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 3px
}

/* As setas ficam abaixo da grade e à direita: no alto, elas estavam a uma
   tela de distância das fotos que comandam. */
.pdf4-nav {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(16px, 2vw, 24px)
}

/* ---------- a capa no celular ----------
   A capa 21:9 numa tela alta vira uma tira no meio do nada: aqui entra a 1ª
   foto da galeria, que é retrato e preenche. E o bloco de texto desce para
   perto da borda de baixo — numa tela cheia, texto no meio fica solto.

   SÓ EM RETRATO. Deitado, a tela é larga como a de um computador, e é o
   tratamento de computador que serve: uma faixa 4:5 em 740px de largura tem
   925px de altura, cobre inteira uma tela de 360px e o nome do produto cai
   sobre a foto crua — o véu dela só escurece perto do fim, que fica fora da
   tela. */
@media (max-width:760px) and (orientation:portrait) {
  .pdcapa {
    min-height: 100dvh;
    /* 125vw é a altura de uma faixa 4:5 na largura da tela. O teto é o que
       sobra depois de reservar o texto: numa tela baixa a faixa cede espaço em
       vez de empurrar o nome do produto para dentro da foto. O piso de 160px é
       só para a conta nunca virar negativa.

       O padding-top é o piso de onde o texto pode começar: sem ele o
       `align-items: flex-end` cola o bloco na base e, com pouca altura, ele
       sobe para dentro da foto. .93 e não a faixa inteira porque os últimos 7%
       do véu já estão entre .92 e opaco — entrar ali é invisível.

       `lvh` e não `dvh`: o `dvh` acompanha a barra de endereço do celular, que
       some e volta durante a rolagem, e com ele a faixa mudava de altura no
       meio do gesto — a foto crescia sob o dedo e o véu repintava atrás dela.
       O `lvh` é a altura com a barra recolhida, e não muda com a rolagem. */
    --faixa: min(125vw, max(160px, 100lvh - 300px));
    padding-top: calc(var(--faixa) * .93);
    padding-bottom: clamp(28px, 7vw, 48px)
  }

  /* A trilha some: numa tela estreita ela quebra em duas linhas e empurra o
     nome do produto para baixo, e o caminho que ela mostra já está na barra
     de navegação. `display: none` e não `visibility`: escondida pela metade
     ela continuaria sendo lida por quem usa leitor de tela.
     (Os .btn-g não estão mais aqui: foram removidos da página.) */
  .pdcrumb {
    display: none
  }

  /* A foto ocupa uma faixa 4:5 colada no topo, e não a tela inteira: ela é
     retrato, e esticada em 100dvh perderia as laterais no `cover`. Abaixo
     dela não há imagem — é o preto da própria página, e é ali que o texto
     senta. */
  .pdcapa-bg {
    inset: 0 0 auto;
    height: var(--faixa);
    background-image: var(--capa-alta, var(--capa));
    /* o scale de 1.04 do desktop cortaria as bordas da faixa */
    transform: none
  }

  /* O véu de celular também é o do style.css, e não uma regra daqui.

     Houve um override `.pdcapa .scrim` neste lugar, com a curva que deixa a
     foto quase limpa até 70% da faixa. Ela era melhor que a que o hero tinha,
     então subiu para o `.scrim` compartilhado em vez de continuar valendo só
     aqui — e este bloco sumiu junto. Uma capa, um véu, nos dois tamanhos.

     O que continua sendo desta página é a FOTO (`.pdcapa-bg`, com
     enquadramento e filtro próprios) e o `--faixa` logo acima: o véu
     compartilhado lê esse `--faixa` da seção que o contém, e por isso serve
     ao hero, que desconta 340px de texto, e a esta capa, que desconta 300. */
}

/* ---------- no celular, uma foto por tela ----------
   A do meio ocupa quase toda a largura; a anterior e a seguinte ficam ATRÁS
   dela, menores e desfocadas, aparecendo só por uma fresta em cada borda.

   O `--x`, `--e` e `--b` são escritos pelo JS a partir da distância de cada
   foto até o centro do trilho: puxar para dentro é o que leva a vizinha para
   trás da do meio, já que o trilho continua sendo uma fila. */
@media (max-width:760px) {
  .pdf4 {
    gap: 20px;                   /* o passo do JS conta com este vão */
    /* as fotos se empilham: quem está no meio passa por cima */
    position: relative;
    /* Sem rolagem nativa no eixo X: a inércia do toque atravessava várias
       fotos de uma vez. Quem move o trilho aqui é o gesto, tratado no
       produto.js, que anda uma foto por arraste. O scrollLeft continua
       funcionando por código mesmo com overflow escondido.
       `pan-y` preserva a rolagem vertical da página. */
    overflow-x: hidden;
    touch-action: pan-y;
    cursor: default
  }

  .pdf4 figure {
    flex: 0 0 86%;
    transform: translateX(var(--x, 0px)) scale(var(--e, 1));
    filter: blur(var(--b, 0px));
    z-index: var(--z, 0);
    /* Curta de propósito: o JS reescreve estas variáveis a CADA quadro, a
       partir da posição. Uma transição longa faria a escala andar atrás da
       foto; aqui ela só tira a aspereza entre um quadro e outro. */
    transition: transform .2s linear, filter .2s linear
  }

  /* a do meio já é grande; o zoom de hover só somaria ao da escala */
  .pdf4 figure:hover img {
    transform: none
  }
}

@media (max-width:760px) and (prefers-reduced-motion:reduce) {
  .pdf4 figure {
    transition: none
  }
}

/* ================= 3. PNG SOBRE FUNDO CLARO ================= */
.pdclaro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 3.6vw, 60px)
}

/* único bloco claro da página: a inversão é proposital */
.pdclaro-foto {
  padding: clamp(26px, 3vw, 48px);
  border-radius: var(--r);
  background: var(--cream)
}

.pdclaro-foto img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .28))
}

/* modelo e produto acima do titulo: o mesmo tan em caixa alta do hero */
.pdclaro-kind {
  margin-bottom: 12px;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--tan)
}

.pdclaro-txt h3 {
  margin-bottom: 20px;
  /* um degrau abaixo do --fs-md, na razao da escala do site */
  font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--cream)
}

.pdclaro-txt p {
  margin-bottom: 16px;
  max-width: 52ch
}

.pdclaro-txt p:last-child {
  margin-bottom: 0
}

/* ================= 4. VÍDEO ================= */
.pdvideo h2 {
  margin: 14px 0 clamp(24px, 2.6vw, 34px)
}

.pdvthumb {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg3);
  cursor: pointer
}

.pdvthumb>img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pdvthumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0
}

.pdvthumb .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  padding-left: 4px;
  border-radius: 50%;
  background: rgba(var(--bg-rgb), .62);
  backdrop-filter: blur(8px);
  color: var(--cream);
  transition: background .4s var(--ease), color .4s var(--ease)
}

.pdvthumb:hover .play {
  background: var(--tan);
  color: var(--bg)
}

.pdvtit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px clamp(18px, 2vw, 30px) 22px;
  background: linear-gradient(0deg, rgba(var(--bg-rgb), .92), transparent);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: var(--fw-light);
  color: var(--txt)
}

.pdvthumb:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 3px
}

/* ================= 5. UMA MESA, TRÊS USOS ================= */
.pdmodos .head-row {
  margin-bottom: clamp(24px, 2.6vw, 36px)
}

.pdmodos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px)
}

.pdmodo-foto {
  display: block;
  aspect-ratio: 4/5;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg3)
}

.pdmodo-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pdmodo-n {
  display: block;
  margin: 16px 0 8px;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--tan)
}

.pdmodo h3 {
  font-size: clamp(19px, 1.5vw, 22px);
  color: var(--cream);
  margin-bottom: 8px
}

.pdmodo p {
  font-size: 14.5px;
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--mut)
}

/* ================= 6. CABE NO MEU ESPAÇO ================= */
.pdmedidas h2 {
  margin: 14px 0 clamp(24px, 2.6vw, 34px)
}

.pdcalc {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(24px, 2.8vw, 40px);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r)
}

.pdcalc-ajuda {
  font-size: 14px;
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--mut);
  margin-bottom: 20px
}

.pdcalc-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px
}

/* ---- campos (usados também no formulário) ---- */
.pdcampo {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.pdcampo label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim)
}

.pdcampo input,
.pdcampo textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  background: transparent;
  color: var(--txt);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: var(--fw-light);
  transition: border-color .4s var(--ease)
}

.pdcampo textarea {
  resize: vertical;
  min-height: 76px
}

.pdcampo input:focus,
.pdcampo textarea:focus {
  outline: none;
  border-color: var(--tan)
}

.pdcampo input:focus-visible,
.pdcampo textarea:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 2px
}

.pdcalc-guia {
  font-size: 14.5px;
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--mut)
}

.pdcalc-topo {
  padding: 16px 18px;
  margin-bottom: 18px;
  border: 1px solid rgba(var(--tan-rgb), .45);
  border-radius: var(--r);
  background: rgba(var(--tan-rgb), .07)
}

.pdcalc-topo b {
  display: block;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: var(--fw-medium);
  color: var(--cream);
  margin-bottom: 4px
}

.pdcalc-topo span {
  font-size: 13.5px;
  font-weight: var(--fw-light);
  color: var(--mut)
}

.pdcalc-lista {
  list-style: none
}

.pdcalc-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: var(--fw-light);
  color: var(--mut)
}

.pdcalc-lista li b {
  font-weight: var(--fw-medium);
  color: var(--txt)
}

.pdcalc-lista li em {
  font-style: normal;
  margin-left: auto;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim)
}

.pdcalc-lista li.ok b {
  color: var(--cream)
}

.pdcalc-lista li.ok .mk {
  color: var(--tan)
}

.pdcalc-lista li.nao {
  opacity: .5
}

.pdcalc-lista .mk {
  flex: none;
  width: 14px;
  text-align: center;
  color: var(--dim)
}

/* ================= 7. FICHA TÉCNICA ================= */
.pdficha h2 {
  margin: 14px 0 clamp(24px, 2.6vw, 34px)
}

.pdficha-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start
}

.pdbloco+.pdbloco {
  margin-top: clamp(26px, 2.8vw, 40px)
}

.pdbloco h3 {
  color: var(--tan);
  font-size: 15px;
  font-weight: 700;
  /* tracking menor: no corpo maior a .label padrão fica espaçada demais */
  letter-spacing: .16em;
  margin-bottom: 14px
}

.pdlista {
  list-style: none
}

.pdlista li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: var(--fw-light);
  line-height: 1.65;
  color: var(--txt)
}

.pdcheck {
  flex: none;
  margin-top: 5px;
  color: var(--tan)
}

.pdmais {
  flex: none;
  width: 13px;
  margin-top: 1px;
  text-align: center;
  color: var(--dim)
}

.pdlista-pv li b {
  color: var(--cream);
  font-weight: var(--fw-medium)
}

.pdlista-pv li span {
  color: var(--mut)
}

.pdnota {
  margin-top: 12px;
  max-width: 52ch;
  font-size: 14.5px;
  font-weight: var(--fw-light);
  line-height: 1.75;
  color: var(--mut)
}

.pdobs {
  margin-top: 14px;
  max-width: 52ch;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--dim)
}

/* o recorte aqui não tem moldura: é só a peça sobre o fundo */
.pdficha-foto {
  position: sticky;
  top: calc(var(--nav-h) + 20px)
}

.pdficha-foto img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .5))
}

/* ================= 8. A MARCA DOS CAMPEÕES ================= */
.pddep h2 {
  margin: 14px 0 clamp(24px, 2.6vw, 34px)
}

.pddep-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 24px)
}

.pddep-card {
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  /* opacity, filter e o atraso escalonado são do [data-rv] (style.css) e o
     shorthand os apagaria: voltam aqui, como no .prod da /produtos */
  transition: border-color .5s var(--ease), transform .5s var(--ease-out),
              opacity .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: calc(var(--i, 0)*80ms)
}

/* mesma resposta do card de produto: borda, elevação e zoom na foto */
.pddep-card:hover {
  border-color: var(--line2);
  transform: translateY(-4px);
  /* o escalonamento é da entrada; no hover a resposta é imediata */
  transition-delay: 0s
}

.pddep-foto {
  display: block;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--bg3);
  /* o .media arredonda os quatro cantos; na base isso deixava o fundo do card
     aparecer pela curva e virava um filete. Igual ao .pfoto da /produtos. */
  border-radius: var(--r) var(--r) 0 0
}

.pddep-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transition: transform 1.1s var(--ease-out)
}

.pddep-card:hover .pddep-foto img {
  transform: scale(1.05)
}

.pddep-card q {
  display: block;
  padding: 18px 18px 0;
  font-size: 14.5px;
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--txt)
}

.pddep-card b {
  padding: 16px 18px 0;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--cream)
}

.pddep-card small {
  padding: 3px 18px 18px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim)
}

/* ================= 9. ANTES DE DECIDIR ================= */
.pdfaq-grid {
  display: grid;
  grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start
}

.pdfaq-lado {
  position: sticky;
  top: calc(var(--nav-h) + 24px)
}

.pdfaq-lado h2 {
  margin: 14px 0 16px
}

.pdfaq-lista details {
  border-bottom: 1px solid var(--line);
  /* a altura é animada por JS (§7 do produto.js): sem o clip o texto
     escaparia para fora do item enquanto a sanfona abre */
  overflow: hidden
}

.pdfaq-lista summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: var(--fw-medium);
  letter-spacing: -.015em;
  color: var(--cream)
}

.pdfaq-lista summary::-webkit-details-marker {
  display: none
}

.pdfaq-lista summary i {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line2);
  border-radius: 50%;
  font-style: normal;
  font-size: 15px;
  color: var(--tan);
  transition: transform .4s var(--ease), border-color .4s var(--ease)
}

.pdfaq-lista details[open] summary i {
  transform: rotate(45deg);
  border-color: var(--tan)
}

.pdfaq-lista summary:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 3px
}

.pdfaq-resp {
  padding: 0 0 20px
}

.pdfaq-resp p {
  max-width: 62ch;
  font-size: 14.5px;
  font-weight: var(--fw-light);
  line-height: 1.8;
  color: var(--mut)
}

.pdfaq-resp a {
  color: var(--tan);
  border-bottom: 1px solid rgba(var(--tan-rgb), .4)
}

/* ================= 10. SEM COMPROMISSO ================= */
.pdlead-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  padding: clamp(26px, 3vw, 48px);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r)
}

.pdlead-txt h2 {
  margin: 14px 0 16px;
  color: var(--cream)
}

.pdlead-confia {
  list-style: none;
  margin-top: 22px
}

.pdlead-confia li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  font-size: 13.5px;
  font-weight: var(--fw-light);
  color: var(--mut)
}

.pdlead-confia li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1px;
  background: var(--tan)
}

.pdlead-form form {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.pdlead-btn {
  width: 100%;
  justify-content: center;
  margin-top: 4px
}

.pdlead-ok {
  padding: 24px 0
}

.pdlead-ok b {
  display: block;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: var(--fw-medium);
  color: var(--cream);
  margin-bottom: 10px
}

.pdlead-ok p {
  font-size: 14.5px;
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--mut);
  margin-bottom: 16px
}

.pdlead-ok a {
  color: var(--tan);
  border-bottom: 1px solid rgba(var(--tan-rgb), .4)
}

/* ================= 11. MODELOS DA MESMA LINHA ================= */
.pdrel .head-row {
  margin-bottom: clamp(24px, 2.6vw, 36px)
}

.pdrel .pgrid {
  grid-template-columns: repeat(4, 1fr)
}

/* ================= BARRA FIXA DO MOBILE ================= */
.pdbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: none;              /* só existe no mobile, ver media query */
  align-items: center;
  gap: 14px;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: rgba(var(--bg-rgb), .94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .5s var(--ease-out)
}

.pdbar.on {
  transform: none
}

/* o texto cede espaço; o botão não encolhe nem quebra linha */
.pdbar .nm {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.pdbar .nm b {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--cream);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pdbar .nm span {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pdbar .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 11px 16px;
  font-size: 12.5px
}

/* ================= LIGHTBOX ================= */
.pdlb {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* flex em coluna, e não grid: com place-items:center a linha do grid era
     dimensionada pelo conteúdo, então o max-height:100% da foto não tinha
     contra o que resolver e a imagem abria em 1080×1350, estourando a tela */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(56px, 6vw, 76px) clamp(12px, 3vw, 40px) clamp(18px, 2.4vw, 30px);
  background: rgba(6, 5, 5, .95);
  backdrop-filter: blur(10px);
  /* o gesto horizontal é do deslize entre fotos; o resto fica com o navegador */
  touch-action: pan-y pinch-zoom
}

.pdlb[hidden] {
  display: none
}

/* o palco recebe a altura que sobra da barra e é contra ele que o
   max-height da foto resolve. min-height:0 deixa o flex encolhê-lo */
.pdlb-palco {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

.pdlb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r);
  /* o arraste nativo da imagem competiria com o deslize */
  user-select: none;
  -webkit-user-drag: none
}

.pdlb-barra {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px)
}

.pdlb-nav {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  background: transparent;
  color: var(--cream);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease)
}

.pdlb-nav:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--bg)
}

.pdlb-nav:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 2px
}

.pdlb-conta {
  min-width: 62px;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .14em;
  /* sem isto o contador muda de largura a cada foto e as setas dançam */
  font-variant-numeric: tabular-nums;
  color: var(--mut)
}

.pdlb-x {
  position: absolute;
  top: clamp(12px, 2vw, 22px);
  right: clamp(12px, 3vw, 40px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  background: transparent;
  color: var(--cream);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease)
}

.pdlb-x:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--bg)
}

.pdlb-x:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 2px
}

body.pdlb-on {
  overflow: hidden
}

/* ================= RESPONSIVO ================= */
@media(max-width:1100px) {


  .pdficha-grid,
  .pdfaq-grid {
    grid-template-columns: 1fr
  }

  .pdficha-foto,
  .pdfaq-lado {
    position: static
  }

  .pdficha-foto {
    order: -1;
    max-width: 520px;
    margin-inline: auto
  }

  .pddep-grid,
  .pdrel .pgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:900px) {

  .pdclaro-grid,
  .pdcalc,
  .pdlead-box {
    grid-template-columns: 1fr
  }
}

@media(max-width:860px) {


  .pdmodos-grid {
    grid-template-columns: 1fr
  }

  .pdbar {
    display: flex
  }

  /* o rodapé não pode ficar coberto pela barra */
  footer {
    padding-bottom: 86px
  }

  /* o botão flutuante do WhatsApp colidiria com a barra fixa: nesta página
     ele sai de cena no mobile, já que a barra oferece a mesma ação */
  .wa {
    display: none
  }
}

@media(max-width:560px) {


  .pdcalc-campos {
    grid-template-columns: 1fr
  }

  .pddep-grid,
  .pdrel .pgrid {
    grid-template-columns: 1fr
  }

  .pdacoes .btn {
    flex: 1 1 auto;
    justify-content: center
  }
}

/* ================= MOVIMENTO REDUZIDO ================= */
@media(prefers-reduced-motion:reduce) {

  .pdf4 figure:hover img,
  .pdfaq-lista details[open] summary i,
  .pddep-card:hover,
  .pddep-card:hover .pddep-foto img,
  .pdaval-card:hover {
    transform: none
  }

  .pdbar {
    transition: none
  }
}

/* ================= AVALIAÇÕES =================
   Avaliações escritas dos clientes. Convive com a seção de atletas
   ("A marca dos campeões"): lá a foto é do ambiente, aqui é avatar redondo. */
.pdaval-grid .slider-track{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,24px);
  align-items:start;
}

.pdaval-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(20px,2.4vw,30px);
  min-height:100%;
  padding:clamp(24px,2.6vw,36px);
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:var(--r);
  /* o shorthand apaga a transição de entrada de [data-rv] (style.css): opacity,
     filter e o atraso escalonado precisam ser redeclarados aqui */
  transition:border-color .5s var(--ease), transform .5s var(--ease-out),
             opacity .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay:calc(var(--i, 0)*80ms);
}
/* o escalonamento é da entrada; no hover a resposta tem que ser imediata */
.pdaval-card:hover{ border-color:var(--line2); transform:translateY(-4px); transition-delay:0s }

/* aspa decorativa: fica atrás do texto, não é lida por leitor de tela */
.pdaval-card blockquote{
  position:relative;
  margin:0;
  color:var(--txt);
  font-size:clamp(14.5px,1.05vw,15.5px);
  line-height:1.8;
  font-weight:var(--fw-light);
}
.pdaval-card blockquote::before{
  content:"\201C";
  position:absolute;
  top:-.42em; left:-.06em;
  font-size:2.6em;
  line-height:1;
  color:var(--tan);
  opacity:.22;
  pointer-events:none;
}

.pdaval-card figcaption{
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--line);
}

.pdaval-foto{
  flex:none;
  width:92px; height:92px;          /* os arquivos menores têm 128px: não passe disso */
  border-radius:50%;
  overflow:hidden;
  background:var(--bg3);
  display:block;
}
.pdaval-foto img{ width:100%; height:100%; object-fit:cover; display:block }

.pdaval-quem{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.pdaval-quem b{
  font-size:15.5px;
  font-weight:var(--fw-medium);
  letter-spacing:-.02em;
  color:var(--cream);
  line-height:1.25;
}
.pdaval-quem small{
  font-size:12px;
  line-height:1.45;
  color:var(--mut);
  font-weight:var(--fw-light);
}

@media (max-width:900px){
  .pdaval-grid .slider-track{ grid-template-columns:1fr 1fr }
  /* o 3º card sozinho na última linha ficaria estranho: ocupa a linha inteira */
  .pdaval-card:last-child:nth-child(odd){ grid-column:1 / -1 }
}

/* Na faixa em que a grade tem DUAS colunas e os clones estão escondidos
   (761–900px), o `:last-child` acima aponta para um clone, não para o último
   card de verdade — e o card ímpar não recebia a linha inteira.

   O último card REAL é o que vem logo antes do primeiro clone. Assim a regra
   não depende de quantos clones o main.js resolveu acrescentar. */
@media (min-width:761px) and (max-width:900px){
  .pdaval-card:last-child:nth-child(odd){ grid-column:auto }

  .pdaval-card:not([aria-hidden]):nth-child(odd):has(+ [aria-hidden]){
    grid-column:1 / -1
  }
}
@media (max-width:640px){
  .pdaval-grid .slider-track{ grid-template-columns:1fr }
  .pdaval-card:last-child:nth-child(odd){ grid-column:auto }
  .pdaval-foto{ width:76px; height:76px }
}

/* O invólucro deixa de ser a grade — quem recebe as colunas é o
   `.slider-track` de dentro. No desktop o transform que o main.js escreve
   inline é anulado: sem isso, voltar do celular para o desktop deixaria a
   grade deslocada para o lado. */
.pdaval-grid {
  display: block;
  overflow: visible
}

@media (min-width:761px) {
  .pdaval-grid .slider-track {
    transform: none !important;
    transition: none
  }

  /* O main.js acrescenta 4 clones no fim de todo `.slider-track` para o laço
     do carrossel não ter emenda. Num carrossel eles ficam fora da janela e
     ninguém os vê — mas AQUI, acima de 761px, isto é uma GRADE: o transform
     está anulado logo acima e a grade mostra tudo que existir. Com três
     avaliações reais viravam sete cartões, e as avaliações apareciam
     repetidas na tela.

     Escondidos, e não removidos: abaixo de 761px o carrossel volta a valer e
     precisa deles. Quem decide o modo é o CSS, então é o CSS que decide o
     que aparece. O `aria-hidden` é a marca que o próprio main.js põe. */
  .pdaval-grid .slider-track > [aria-hidden="true"] {
    display: none
  }

  .pdaval-nav {
    display: none
  }
}

/* No celular, um card por tela — a mesma engrenagem do slider de blog da
   home, movida pelo main.js. */
@media (max-width:760px) {
  .pdaval-grid {
    --gap: clamp(14px, 1.6vw, 24px);
    overflow: hidden;
    /* o card sobe no hover; a folga evita que o topo dele seja decepado */
    padding: 6px 0;
    margin: -6px 0
  }

  .pdaval-grid .slider-track {
    display: flex;
    gap: var(--gap);
    transition: transform .9s var(--ease-out);
    will-change: transform
  }

  .pdaval-grid .slider-track > * {
    flex: 0 0 100%
  }
}