/* ============================================================
   WJR FIXER — pages/home.css
   Estilos exclusivos da página Home (index.html).
   ============================================================ */

/* ---------- Home: Hero ---------- */
.hero{ min-height:100svh; position:relative; display:flex; align-items:center; padding:120px 0 64px; background:#0c0c0c; overflow:hidden; }

/* Foto à direita — gradientes conectam texto e retrato */
.hero-photo{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:#0c0c0c;
}
.hero-photo img{
  position:absolute;
  right:0; top:50%; left:auto;
  transform:translateY(-50%);
  height:108%; width:auto; max-width:min(62vw,920px);
  object-fit:cover; object-position:28% center;
  filter:saturate(.86) brightness(.90) contrast(1.14);
  pointer-events:none; user-select:none;
  -webkit-mask-image:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.2) 14%,
      rgba(0,0,0,.72) 32%,
      #000 48%,
      #000 100%
    ),
    linear-gradient(180deg,
      transparent 0%,
      #000 6%,
      #000 94%,
      transparent 100%
    );
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.2) 14%,
      rgba(0,0,0,.72) 32%,
      #000 48%,
      #000 100%
    ),
    linear-gradient(180deg,
      transparent 0%,
      #000 6%,
      #000 94%,
      transparent 100%
    );
  mask-composite:intersect;
}
.hero-photo::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse 120% 90% at 0% 100%,
      #0c0c0c 0%,
      rgba(12,12,12,.92) 24%,
      rgba(12,12,12,.5) 46%,
      transparent 72%
    ),
    radial-gradient(ellipse 95% 70% at 0% 0%,
      rgba(12,12,12,.78) 0%,
      rgba(12,12,12,.32) 32%,
      transparent 58%
    ),
    linear-gradient(90deg,
      #0c0c0c 0%,
      rgba(12,12,12,.97) 18%,
      rgba(12,12,12,.78) 34%,
      rgba(12,12,12,.42) 50%,
      rgba(12,12,12,.1) 62%,
      transparent 78%
    );
}
.hero-photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(12,12,12,.28) 0%, transparent 22%),
    linear-gradient(180deg,
      rgba(12,12,12,.42) 0%,
      transparent 12%,
      transparent 82%,
      rgba(12,12,12,.55) 94%,
      #0c0c0c 100%
    );
}
.hero-ring{ position:absolute; bottom:2.2rem; right:var(--gut); width:82px; opacity:1; z-index:2; }
.hero .wrap{ position:relative; z-index:2; width:100%; }
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  align-items:center; gap:clamp(2rem,5vw,4rem);
}
.hero-left{ max-width:40ch; }
.hero-left .lead{ max-width:33ch; text-wrap:balance; margin-top:1.7rem; }
.hero-left .btn-row{ margin-top:2.2rem; }
.hero-right{
  justify-self:end; text-align:right;
  position:relative; z-index:2;
  padding-right:clamp(0rem,2vw,.5rem);
  transform:translate(clamp(-.85rem,-1.6vw,-1.35rem), clamp(.65rem,1.4vw,1.15rem));
}
.hero-title{ font-weight:300; font-size:clamp(1.95rem,3.7vw,3.25rem); line-height:1.2; letter-spacing:-.022em; text-shadow:0 2px 28px rgba(0,0,0,.35); }
.hero-title span{ display:block; }
.hero-title .a{ font-weight:300; color:var(--off-90); margin-right:1.6em; }
.hero-title .b{ font-weight:700; color:var(--sand); margin-right:0; }
.hero-title .c{ font-weight:300; color:var(--off-55); margin-right:.75em; }
@media(max-width:880px){
  .hero{ text-align:center; }
  .hero-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .hero-right{ justify-self:center; text-align:center; order:-1; padding-right:0; transform:none; }
  .hero-title .a, .hero-title .c{ margin-right:0; }
  .hero-left{ max-width:54ch; margin-inline:auto; }
  .hero-left .btn-row{ justify-content:center; }
  .hero-left .label{ justify-content:center; }
  .hero-photo img{
    right:50%; transform:translate(38%,-50%);
    height:100%; max-width:140vw;
    object-position:50% 22%;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.15) 12%, #000 35%, #000 65%, rgba(0,0,0,.15) 88%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 8%, #000 72%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.15) 12%, #000 35%, #000 65%, rgba(0,0,0,.15) 88%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 8%, #000 72%, transparent 100%);
  }
  .hero-photo::before{
    background:
      linear-gradient(180deg, #0c0c0c 0%, rgba(12,12,12,.88) 28%, rgba(12,12,12,.45) 52%, transparent 78%),
      linear-gradient(90deg, #0c0c0c 0%, rgba(12,12,12,.75) 20%, transparent 45%, transparent 55%, rgba(12,12,12,.75) 80%, #0c0c0c 100%);
  }
  .hero-photo::after{
    background:linear-gradient(180deg, rgba(12,12,12,.5) 0%, transparent 18%, transparent 62%, #0c0c0c 100%);
  }
}
.scroll-cue{ position:absolute; left:var(--gut); bottom:2.2rem; z-index:2; display:flex; align-items:center; gap:.8rem; color:var(--off-40); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; }
.scroll-cue .ln{ width:46px; height:1px; background:var(--off-22); position:relative; overflow:hidden; }
.scroll-cue .ln::after{ content:""; position:absolute; inset:0; background:var(--sand); transform:translateX(-100%); animation:cue 2.6s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }
@media(max-width:900px){
  .scroll-cue{ display:none; }
}

/* —— Fundos de marca: imagem fiel + vinheta leve (sem tingir cores) —— */

/* ---------- Pillars (D·F·T) — Fundo 03 ---------- */
.pillars{ text-align:center; position:relative; overflow:hidden; background:var(--ink); }
.pillars::before{
  content:""; position:absolute; inset:-1%; z-index:0; pointer-events:none;
  background:url("../../img/bg-gradient-3.jpg") center center / cover no-repeat;
}
.pillars::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--wjr-veil);
}
.pillars .wjr-grain{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.14;
  mix-blend-mode:soft-light; background-image:var(--wjr-grain); background-size:180px 180px;
}
.pillars-inner{ position:relative; z-index:2; }
.manifesto-stack{ margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:.6rem; line-height:1.05; letter-spacing:-.022em; text-wrap:balance; }
.manifesto-stack span{ display:block; }
.manifesto-stack .m1{ font-weight:700; font-size:clamp(2.2rem,4.8vw,3.7rem); color:var(--sand); }
.manifesto-stack .m2{ font-weight:400; font-size:clamp(1.4rem,2.7vw,2.05rem); color:var(--off-90); }
.manifesto-stack .m3{ font-weight:300; font-size:clamp(1.4rem,2.7vw,2.05rem); color:var(--off-55); }
.pillar-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem); margin-top:clamp(3rem,6vw,4.5rem); }
.pillar{ position:relative; }
.pillar .gl{ line-height:1; display:flex; justify-content:center; }
.pillar .gl img{ height:clamp(3.2rem,6.5vw,4.5rem); width:auto; display:block; }
.pillar h3{ margin:.7rem 0 .5rem; font-size:1.35rem; font-weight:600; }
.pillar p{ color:var(--off-55); font-weight:300; font-size:.96rem; max-width:24ch; margin-inline:auto; }
.pillar::after{ content:""; position:absolute; top:14%; right:-1.5rem; height:60%; width:1px; background:var(--line); }
.pillar:last-child::after{ display:none; }
.pillars-mark{ margin:clamp(2.5rem,5vw,3.5rem) auto 0; }
@media(max-width:760px){ .pillar-row{ grid-template-columns:1fr; gap:2.5rem; } .pillar::after{ display:none; } }

/* ---------- Nossas Soluções (story cards — referência editorial) ---------- */
.solucoes-band{ position:relative; overflow:hidden; background:var(--ink); }
/* Fundo 02 */
.solucoes-band::before{
  content:""; position:absolute; inset:-1%; z-index:0; pointer-events:none;
  background:url("../../img/bg-fundo-2.jpg") center center / cover no-repeat;
}
.solucoes-band::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--wjr-veil);
}
.solucoes-band .wjr-grain{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.12;
  mix-blend-mode:soft-light; background-image:var(--wjr-grain); background-size:180px 180px;
}
.solucoes-band .wrap{ position:relative; z-index:1; }

.sol-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2rem,4vw,2.8rem); }

.sol-rail{
  display:flex; gap:clamp(1rem,2vw,1.35rem);
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:.25rem .2rem 1.6rem; margin-inline:calc(var(--gut) * -1);
  padding-inline:var(--gut);
  scrollbar-width:none;
}
.sol-rail::-webkit-scrollbar{ display:none; }

.scard{
  --acc:var(--sand);
  position:relative; flex:0 0 clamp(272px,31vw,320px);
  aspect-ratio:9/16; max-height:min(72vh, 520px);
  scroll-snap-align:start; border-radius:24px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--acc) 28%, transparent);
  background:var(--ink-1);
  display:flex; flex-direction:column; justify-content:flex-end;
  text-decoration:none; color:inherit;
  transition:transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease);
  box-shadow:0 24px 48px rgba(0,0,0,.35);
}
.scard:hover{
  transform:translateY(-8px);
  border-color:color-mix(in srgb, var(--acc) 55%, transparent);
  box-shadow:0 32px 56px rgba(0,0,0,.45);
}

.scard-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:saturate(.55) brightness(.82) contrast(1.08);
  transition:transform 1s var(--ease);
}
.scard:hover .scard-img{ transform:scale(1.05); }

.scard-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(12,12,12,.45) 0%, rgba(12,12,12,.05) 28%, rgba(12,12,12,.35) 52%, rgba(12,12,12,.92) 100%),
    linear-gradient(90deg, rgba(12,12,12,.35) 0%, transparent 55%);
}

.scard-bracket{
  position:absolute; top:20px; right:20px; width:26px; height:26px; z-index:4;
  border-top:2px solid var(--acc); border-right:2px solid var(--acc); opacity:.9;
}
.scard-num{
  position:absolute; top:18px; left:20px; z-index:4;
  font-size:.7rem; letter-spacing:.24em; color:var(--off-55); font-weight:600;
}

.scard-arc{
  position:absolute; right:-8%; bottom:18%; width:55%; height:42%; z-index:2; pointer-events:none;
  border:1px solid color-mix(in srgb, var(--acc) 45%, transparent);
  border-radius:50%; border-color:transparent transparent color-mix(in srgb, var(--acc) 50%, transparent) transparent;
  transform:rotate(-28deg); opacity:.7;
}

.scard-content{
  position:relative; z-index:3; padding:clamp(1.35rem,2vw,1.65rem);
  display:flex; flex-direction:column; gap:.45rem; margin-top:auto;
}
.scard-name{
  font-size:clamp(1.38rem, 1.95vw, 1.62rem); font-weight:700; line-height:1.08;
  letter-spacing:-.025em; color:var(--off); text-wrap:balance;
  min-height:calc(1.08em * 2);
}
.scard-tagline{
  font-size:.78rem; font-weight:300; line-height:1.45; color:var(--off-40);
  max-width:32ch; margin-top:.3rem;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
  min-height:calc(1.45em * 3);
}

.scard-foot{
  display:flex; align-items:center; justify-content:flex-end; gap:.65rem;
  margin-top:auto; padding-top:1rem; border-top:1px solid var(--line);
}
.scard-subbrand{
  display:flex; align-items:center; gap:.5rem; min-width:0; margin-right:auto;
}
.scard-subbrand img{
  height:14px; width:auto; flex:none; display:block;
  opacity:.9;
}
.scard-subbrand span{
  font-size:.6rem; letter-spacing:.1em; font-weight:600;
  color:var(--brand, var(--acc)); opacity:.88;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.scard-go{
  width:38px; height:38px; border-radius:50%; flex:none;
  border:1px solid color-mix(in srgb, var(--acc) 42%, transparent);
  display:grid; place-items:center; color:var(--acc);
  transition:.45s var(--ease); background:rgba(23,23,23,.35);
}
.scard-go svg{ width:15px; height:15px; transition:transform .45s var(--ease); }
.scard:hover .scard-go{ background:var(--acc); color:var(--ink); border-color:var(--acc); }
.scard:hover .scard-go svg{ transform:translate(2px,-1px); }

/* Gênesis Club — identidade com gradiente da marca */
.scard--genesis{
  --acc:#cab196;
  --brand:#4d636b;
  border-color:color-mix(in srgb, #4d636b 35%, transparent);
  justify-content:flex-end;
}
.scard--genesis .scard-genesis-bg{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,
    #b4c5cc 0%,
    #9aabb2 28%,
    #6d848c 48%,
    #4d636b 65%,
    #243038 82%,
    #080c0e 100%
  );
}
.scard--genesis .scard-genesis-bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 40% at 50% 12%, rgba(180,197,204,.18), transparent 50%);
  pointer-events:none;
}
.scard-genesis-logo{
  position:absolute; top:clamp(1.2rem,3.5vw,2rem); left:50%; transform:translateX(-50%);
  z-index:1; width:min(78%, 220px); pointer-events:none;
}
.scard-genesis-logo img{
  width:100%; height:auto; display:block;
  opacity:.14;
  filter:blur(.6px);
}
.scard--genesis .scard-content{ z-index:4; }
.scard--genesis .scard-veil{
  background:linear-gradient(180deg, transparent 0%, transparent 45%, rgba(8,12,14,.55) 72%, rgba(8,12,14,.92) 100%);
}
.scard--genesis .scard-bracket{ border-color:#cab196; }
.scard--genesis .scard-num{ color:rgba(235,231,223,.45); }
.scard--genesis .scard-name{
  color:#f5f3f0;
  text-shadow:0 2px 20px rgba(8,12,14,.45);
  position:relative; z-index:1;
}
.scard--genesis .scard-tagline{ color:rgba(235,231,223,.55); }
.scard--genesis .scard-foot{ border-top-color:rgba(235,231,223,.12); }
.scard--genesis .scard-subbrand span{ color:#cab196; }
.scard--genesis .scard-go{
  border-color:color-mix(in srgb, #cab196 45%, transparent);
  color:#cab196;
}
.scard--genesis:hover .scard-go{ background:#cab196; color:#080c0e; }
.scard-pill{
  display:inline-flex; align-items:center; justify-content:center; width:fit-content;
  margin-top:.85rem; padding:.72em 1.25em; border-radius:100px;
  border:1px solid var(--off-40); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:var(--off);
  transition:.4s var(--ease); pointer-events:none;
}
.scard:hover .scard-pill{ border-color:var(--acc); color:var(--acc); }
@media(max-width:560px){ .scard{ flex-basis:78vw; max-height:68vh; } }
@media(min-width:1100px){
  .sol-rail{ justify-content:center; overflow-x:visible; flex-wrap:nowrap; }
  .scard{ flex:1 1 0; max-width:300px; }
}

/* ---------- Clientes — esteira de logos ---------- */
.clientes-band{
  position:relative; overflow:hidden; background:var(--ink-1);
  border-block:1px solid var(--line-2);
  padding-block:clamp(1.6rem,3vw,2.4rem);
}
.clientes-band .wjr-grain{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.10;
  mix-blend-mode:soft-light; background-image:var(--wjr-grain); background-size:180px 180px;
}
.clientes-band .wrap{ position:relative; z-index:1; }

.cli-head{ text-align:center; max-width:40ch; margin-inline:auto; margin-bottom:clamp(.9rem,1.8vw,1.25rem); }

.cli-marquee{
  position:relative; z-index:1;
  display:grid; gap:clamp(.35rem,.9vw,.7rem);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.cli-row{ overflow:hidden; }
.cli-track{
  display:flex; width:max-content; will-change:transform;
  animation:cli-slide linear infinite;
}
.cli-row--a .cli-track{ animation-duration:68s; }
.cli-row--b .cli-track{ animation-duration:58s; animation-direction:reverse; }
.cli-set{ display:flex; align-items:center; }

.cli-logo{
  flex:none; display:grid; place-items:center;
  width:clamp(100px,10.5vw,142px);
  margin-right:clamp(1.4rem,3.2vw,2.9rem);
}
.cli-logo img{
  display:block; width:100%; height:auto;
  filter:brightness(0) invert(1);
  opacity:.55;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.cli-row:hover .cli-track{ animation-play-state:paused; }
/* logos de traco fino pedem um pouco mais de presenca */
.cli-logo--boost img{ opacity:.8; }
.cli-logo:hover img{ opacity:1; transform:scale(1.07); }

@keyframes cli-slide{
  from{ transform:translate3d(0,0,0); }
  to{   transform:translate3d(-50%,0,0); }
}

@media (prefers-reduced-motion: reduce){
  .cli-track{ animation:none; }
  .cli-row{ overflow-x:auto; scrollbar-width:none; }
  .cli-row::-webkit-scrollbar{ display:none; }
  .cli-track .cli-set + .cli-set{ display:none; }
}

/* ---------- Autoridade por trás da WJR ---------- */
.wj-authority{
  position:relative; overflow:hidden;
  padding-block:0;
}
.wj-authority-inner{
  display:grid;
  grid-template-columns:minmax(0,5.2fr) minmax(0,6.8fr);
  min-height:clamp(460px,52vh,620px);
  align-items:stretch;
}
.wj-authority-copy{
  display:flex; align-items:center;
  padding:clamp(3rem,7vw,5rem) clamp(1.25rem,4vw,3.5rem);
  padding-left:max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
  background:
    radial-gradient(ellipse 110% 70% at 8% 28%, rgba(185,150,111,.07), transparent 52%),
    var(--ink-1);
  position:relative; z-index:2;
}
.wj-authority-copy-in{ max-width:40ch; width:100%; }
.wj-quote{
  font-size:clamp(1.75rem,3.2vw,2.65rem); line-height:1.2;
  letter-spacing:-.022em; margin-top:1.35rem;
}
.wj-quote span{ display:block; }
.wj-quote .a{ font-weight:300; color:var(--off-90); }
.wj-quote .b{ font-weight:700; color:var(--sand); }
.wj-quote .c{ font-weight:300; color:var(--off-55); }
.wj-lead{
  font-size:clamp(1rem,1.35vw,1.125rem); font-weight:300; line-height:1.58;
  color:var(--off-55); margin-top:1.25rem; max-width:38ch;
}
.wj-lead + .wj-lead{ margin-top:1.5rem; }
.wj-meta{
  display:flex; align-items:center; gap:.85rem; margin-top:1.75rem;
  font-size:.84rem; color:var(--off-40); letter-spacing:.03em;
}
.wj-meta .ln{ width:36px; height:1px; background:var(--sand); opacity:.55; flex:none; }
.wj-authority-copy .btn-row{ margin-top:2rem; }

.wj-authority-media{
  position:relative; min-height:100%;
  margin-right:calc(50% - 50vw);
}
.wj-authority-media .wj-ph{
  position:absolute; inset:0;
  border-radius:0; min-height:100%; height:100%;
}
.wj-authority-media .wj-ph img{
  width:100%; height:100%; object-fit:cover;
  object-position:72% 42%;
  filter:grayscale(100%) contrast(1.28) brightness(.88);
}
.wj-authority-media .wj-ph::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 58% 50% at 72% 28%,
      rgba(255,255,255,.30) 0%,
      rgba(245,239,232,.10) 38%,
      transparent 62%
    ),
    linear-gradient(90deg,
      var(--ink-1) 0%,
      rgba(28,28,27,.92) 6%,
      rgba(28,28,27,.38) 16%,
      transparent 34%
    ),
    linear-gradient(180deg,
      rgba(12,12,12,.18) 0%,
      transparent 12%,
      transparent 78%,
      rgba(12,12,12,.45) 100%
    );
}

@media(max-width:900px){
  .wj-authority-inner{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .wj-authority-copy{
    padding:clamp(2.5rem,8vw,3.5rem) var(--gut);
    order:1;
  }
  .wj-authority-copy-in{ max-width:54ch; }
  .wj-authority-media{
    order:2; min-height:clamp(280px,56vw,400px);
    margin-right:0; width:100%;
  }
  .wj-authority-media .wj-ph{ position:relative; min-height:clamp(280px,56vw,400px); }
  .wj-authority-media .wj-ph img{ object-position:68% 38%; }
  .wj-authority-media .wj-ph::after{
    background:
      radial-gradient(ellipse 70% 45% at 65% 30%,
        rgba(255,255,255,.28) 0%,
        rgba(245,239,232,.08) 40%,
        transparent 62%
      ),
      linear-gradient(180deg, var(--ink-1) 0%, transparent 22%);
  }
}

.wj-authority > .brand-mark-corner{ position:absolute; bottom:2rem; right:var(--gut); z-index:10; }

/* ---------- Depoimentos (prova social) — coverflow ---------- */
.section.depoimentos-band{
  padding-block:clamp(2.25rem,3.6vw,3rem);
}
.depoimentos-band{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 120% 85% at 50% -10%, rgba(245,239,232,.10), transparent 62%),
    linear-gradient(172deg, #7c756c 0%, #736c64 40%, #524c46 100%);
}
.depoimentos-band .wjr-grain{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.14;
  mix-blend-mode:soft-light; background-image:var(--wjr-grain); background-size:180px 180px;
}
.depoimentos-band .wrap{ position:relative; z-index:1; }

.dep-head{
  text-align:center; margin-inline:auto;
  margin-bottom:clamp(1.1rem,2.2vw,1.6rem);
}
/* uma linha so a partir de onde cabe; abaixo disso volta a quebrar */
@media(min-width:900px){
  .dep-head h2,
  .depoimentos-band .dep-head .lead{ white-space:nowrap; }
}
.depoimentos-band .dep-head .lead{ max-width:42ch; }
/* as utilitarias mt-3 deixavam ~90px de margem para 2 linhas de texto */
.depoimentos-band .dep-head h2{ margin-top:.5rem; }
.depoimentos-band .dep-head .lead{ margin-top:.55rem; }
.depoimentos-band .lead{ color:rgba(245,239,232,.86); }

/* ---- pista ---- */
.dep-coverflow{ position:relative; overflow:hidden; }
.dep-coverflow .swiper{
  /* o Swiper calcula a largura do slide pelo container (container/slidesPerView),
     entao e aqui que se controla o tamanho do card */
  max-width:min(700px, 100%);
  margin-inline:auto;
  padding-bottom:clamp(3rem,4.4vw,3.6rem); /* respiro p/ reflexo + bullets */
  overflow:visible;
}
/* slide == card: a rotacao do coverflow pivota no centro do proprio video,
   e a sombra do efeito cobre exatamente o card (nada sobrando por cima) */
.dep-slide{
  aspect-ratio:9/16;
  border-radius:20px;
  overflow:hidden;
  background:#161614;
  -webkit-box-reflect:below 10px linear-gradient(transparent 78%, rgba(0,0,0,.26));
}
.dep-slide-media{ position:absolute; inset:0; }
.dep-slide-media video{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* Dentro do preserve-3d o navegador pinta os cards mas nao os inclui no teste de
   ponteiro — e sem receber o ponteiro, a barra de controles nativa se esconde e
   nao volta no hover. Tiramos o 3D SO do card que toca: no centro ele ja e
   frontal (translateZ ~0,14px, rotateY ~0,07deg), entao nao muda de aparencia,
   e os laterais mantem profundidade e opacidade normais. */
.dep-slide.dep-tocando{ transform:none !important; z-index:6; }
.dep-slide.dep-tocando::after{ opacity:0; }
.dep-slide-media.is-playing .dep-play{ display:none; }

/* area de clique: o card inteiro toca o video */
.dep-play{
  position:absolute; inset:0; z-index:3;
  border:0; padding:0; background:transparent; cursor:pointer;
}
.dep-slide:not(.swiper-slide-active) .dep-play{ pointer-events:none; }

/* ---- texto sobre o video, na base ---- */
.dep-slide-copy{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  pointer-events:none; text-align:center;
  padding:clamp(2.4rem,6vw,3.4rem) clamp(.85rem,2vw,1.15rem) clamp(.9rem,2.2vw,1.3rem);
  background:linear-gradient(to top,
    rgba(8,8,7,.92) 0%, rgba(8,8,7,.86) 34%, rgba(8,8,7,.62) 62%, rgba(8,8,7,.22) 84%, transparent 100%);
  text-shadow:0 1px 4px rgba(0,0,0,.65);
  opacity:0; transition:opacity .4s var(--ease);
}
.swiper-slide-active .dep-slide-copy{ opacity:1; }
.dep-slide-media.is-playing .dep-slide-copy{ opacity:0; }

.dep-company{
  display:block; font-size:.6875rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--sand); font-weight:600;
}
.dep-person{
  display:block; margin-top:.3rem; font-size:.9375rem; font-weight:600; color:var(--off);
}
.dep-role{ display:block; font-size:.75rem; color:rgba(245,239,232,.82); }
.dep-quote{
  margin:.5rem 0 0; font-size:.8125rem; line-height:1.45;
  color:var(--off); font-style:italic;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.dep-quote::before{ content:"“"; }
.dep-quote::after{ content:"”"; }

.dep-play-pill{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.75rem;
  padding:.38rem .9rem; border-radius:999px;
  border:1px solid rgba(245,239,232,.5); background:rgba(245,239,232,.22);
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--off);
  transition:background .3s var(--ease);
  pointer-events:none;
}
.dep-play-pill svg{ width:13px; height:13px; }
.dep-slide:hover .dep-play-pill{ background:rgba(245,239,232,.26); }

/* laterais mais discretos */
.dep-slide::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:rgba(22,22,20,.34); border-radius:inherit;
  opacity:1; transition:opacity .45s var(--ease);
}
.dep-slide.swiper-slide-active::after{ opacity:0; }
.dep-coverflow .swiper-slide{ cursor:pointer; }
.swiper-slide-shadow-coverflow{ border-radius:20px; }

/* Com 4 videos e 3 visiveis sobra um slide que o coverflow gira quase de perfil
   e aparece como um risco na borda.
   A classe swiper-slide-visible do Swiper dessincroniza das posicoes reais, entao
   quem manda e o progress de cada slide (ver depCarousel em assets/js/pages/home.js). Visivel por
   padrao: se a marcacao falhar, aparece um card a mais em vez de sumir um. */
.dep-coverflow .swiper-slide{
  opacity:1;
  transition-property:transform, opacity;   /* nunca o atalho: ele descarta o transform */
}
.dep-coverflow .swiper-slide.dep-fora{ opacity:0; }


/* bolinhas proprias: 4 depoimentos, nao 8 slides */
.dep-coverflow .swiper-pagination{
  position:absolute; bottom:0; left:0; right:0; z-index:5;
  display:flex; justify-content:center; gap:.55rem;
}
.dep-bullet{
  width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:var(--off); opacity:.34; cursor:pointer;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.dep-bullet:hover{ opacity:.7; }
.dep-bullet.is-atual{ opacity:1; transform:scale(1.35); }

/* ---- setas ---- */
.dep-nav{
  position:absolute; top:calc(50% - clamp(1.6rem,3vw,2.1rem)); z-index:3;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  color:var(--off); background:rgba(22,22,20,.42);
  border:1px solid rgba(245,239,232,.22);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.dep-nav svg{ width:18px; height:18px; }
.dep-nav--prev{ left:clamp(.25rem,2vw,1.5rem); transform:translateY(-50%); }
.dep-nav--next{ right:clamp(.25rem,2vw,1.5rem); transform:translateY(-50%); }
.dep-nav:hover{ background:rgba(22,22,20,.66); border-color:rgba(245,239,232,.42); }

@media(max-width:560px){
  .dep-nav{ width:36px; height:36px; }
  .dep-slide-copy{ min-height:8.5rem; }
}

@media (prefers-reduced-motion: reduce){
  .dep-slide-copy{ transition:none; }
}