/* ==========================================================================
   /clientes/ — página de prova social
   Complementa journal.css (tokens, nav, footer, botões). Só o que é próprio
   desta página vive aqui: fundo escuro, lista de cidades, o player de vídeo
   e o layout dos casos.
   ========================================================================== */

body.clientes{background:var(--preto);color:var(--off-84)}
body.clientes h1,
body.clientes h2,
body.clientes h3{color:var(--off)}

.cl-main{padding-bottom:0}

.cl-wrap{
  width:100%;max-width:var(--maxw);
  margin-inline:auto;padding-inline:var(--pad-x);
}

/* ------------------------------------------------------------------- hero */
.cl-hero{padding-block:clamp(3rem,7vw,5rem) clamp(2.5rem,6vw,3.5rem)}
.cl-hero .label{
  display:block;font-size:var(--fs-label);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sage);
  margin-bottom:1rem;
}
.cl-hero h1{font-size:var(--fs-display);max-width:42rem;margin-bottom:1.25rem}
.cl-hero p{font-size:var(--fs-lead);line-height:1.6;max-width:46rem}
.cl-voltar{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.88rem;font-weight:500;color:var(--sage);
  text-decoration:none;margin-bottom:1.75rem;
  transition:opacity .2s var(--ease);
}
.cl-voltar:hover{opacity:.72}


.cl-cidades{border-top:1px solid var(--off-14);padding-top:1.5rem}
.cl-cidades-titulo{
  display:block;font-size:var(--fs-label);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sage);
  margin-bottom:.75rem;
}
.cl-cidades p{font-size:1rem;line-height:1.7;color:var(--off-84);max-width:58rem}
.cl-cidades-nota{
  display:block;font-size:.8rem;line-height:1.5;
  color:rgba(248,248,246,.55);margin-top:.85rem;max-width:52rem;
}

/* ------------------------------------------------------------- os casos */
.cl-casos{padding-block:clamp(3rem,7vw,4.5rem)}
.cl-casos-titulo{
  font-size:var(--fs-h2);margin-bottom:.75rem;
}
.cl-casos-intro{max-width:46rem;margin-bottom:clamp(2.5rem,6vw,3.5rem)}

.caso{
  display:grid;gap:1.5rem;grid-template-columns:1fr;
  padding-block:clamp(2.25rem,5vw,3.25rem);
  border-top:1px solid var(--off-14);
}
.caso:first-of-type{border-top:0;padding-top:0}
@media (min-width:56rem){
  .caso{grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:2.75rem;align-items:start}
  .caso.alt{grid-template-columns:minmax(0,1fr) minmax(0,17rem)}
  .caso.alt .caso-media{order:2}
}

.caso-media{max-width:22rem;width:100%}
/* o texto de cada caso é longo; grudar a mídia mantém o rosto de quem fala
   à vista durante a leitura, em vez de deixar meia coluna vazia */
@media (min-width:56rem){
  .caso-media{position:sticky;top:calc(var(--nav-h) + 1.5rem)}
}
@media (prefers-reduced-motion:reduce){
  .caso-media{position:static}
}
.caso-corpo h3{
  font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  line-height:1.22;margin-bottom:.6rem;
}
.caso-meta{
  display:block;font-size:.8rem;font-weight:500;letter-spacing:.04em;
  color:var(--sage);margin-bottom:1.1rem;
}
.caso-corpo p{margin-bottom:1rem;line-height:1.72}
.caso-corpo p:last-of-type{margin-bottom:0}
.caso-corpo em{font-style:italic;color:var(--off)}
.caso-dado{
  display:block;margin-top:1.25rem;padding-top:1rem;
  border-top:1px solid var(--off-14);
  font-size:.92rem;font-weight:500;color:var(--sage);
}

/* quando o caso não tem vídeo, a coluna da mídia carrega a fala do cliente */
.caso-fala{
  border:1px solid var(--off-14);border-radius:var(--r-card);
  background:rgba(248,248,246,.03);
  padding:1.5rem 1.4rem;
  display:flex;flex-direction:column;gap:1rem;
}
.caso-fala p{font-size:1.05rem;line-height:1.6;color:var(--off);font-style:italic}
.caso-fala cite{
  font-style:normal;font-size:.82rem;color:var(--off-70);
  padding-top:.9rem;border-top:1px solid var(--off-14);
}

/* ------------------------------------------------- player de vídeo nativo */
.reel-card{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  aspect-ratio:9/16;
  background:var(--preto);
  border:1px solid var(--off-14);
}
.reel-video{width:100%;height:100%;object-fit:cover;display:block}
.reel-play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, rgba(47,47,47,0) 45%, rgba(47,47,47,.55) 100%);
  color:var(--off);border:0;cursor:pointer;
  transition:opacity .3s var(--ease);
}
.reel-play::before{
  content:"";
  width:4rem;height:4rem;border-radius:50%;
  position:absolute;
  border:1px solid rgba(248,248,246,.5);
  background:rgba(47,47,47,.55);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:transform .3s var(--ease), background-color .3s var(--ease);
}
.reel-play svg{position:relative;margin-left:3px}
.reel-play:hover::before{transform:scale(1.08);background:rgba(47,47,47,.75)}
.reel-card.playing .reel-play{opacity:0;pointer-events:none}

/* ------------------------------------------------------------------- CTA */
.cl-cta{
  border-top:1px solid var(--off-14);
  padding-block:clamp(3rem,7vw,4.5rem);
}
.cl-cta h2{font-size:var(--fs-h2);margin-bottom:1rem;max-width:30rem}
.cl-cta p{max-width:42rem;margin-bottom:1.75rem}
.cl-cta-botoes{display:flex;flex-wrap:wrap;gap:.9rem}
.cl-cta .btn-ghost{border-color:rgba(248,248,246,.4);color:var(--off)}
.cl-cta .btn-ghost:hover{border-color:var(--sage);background:rgba(183,193,172,.14)}

/* o rodapé já é escuro no journal.css; aqui só garante a costura */
body.clientes .footer{border-top:1px solid var(--off-14)}