/* Depoimentos: fotos em primeiro plano, reprodução sob demanda. */
.stories{overflow:hidden;isolation:isolate}
.stories .head-block{max-width:720px;margin-inline:auto}
.stories .lead{max-width:600px;margin-inline:auto;color:var(--grafito)}
.stories-stage{--story-width:clamp(260px,28vw,340px);position:relative;margin-top:32px}
.stories-track{display:flex;align-items:center;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:25px max(var(--gutter),calc((100% - var(--story-width))/2)) 32px;cursor:grab;-webkit-overflow-scrolling:touch}
.stories-track::-webkit-scrollbar{display:none}
.stories-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.story{flex:0 0 var(--story-width);min-width:0;scroll-snap-align:center;scroll-snap-stop:always;position:relative;perspective:1000px}
.story-open{display:block;position:relative;width:100%;aspect-ratio:3/4;border:0;border-radius:28px;overflow:hidden;padding:0;text-align:left;cursor:pointer;background:var(--azul);color:var(--blanco);box-shadow:0 16px 32px -20px rgba(47,95,138,.6);transform:scale(var(--story-scale,.9)) rotateY(var(--story-angle,0deg));transition:box-shadow .35s var(--ease);will-change:transform;-webkit-tap-highlight-color:transparent}
.story-open::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,37,55,.08) 35%,rgba(15,37,55,.2) 55%,rgba(15,37,55,.92) 100%);pointer-events:none}
.story-photo{width:100%;height:100%;display:block;object-fit:cover;object-position:center 30%;transition:transform .7s var(--ease);pointer-events:none}
.story.is-active .story-open{box-shadow:0 22px 48px -20px rgba(47,95,138,.5)}
.story-open:hover .story-photo{transform:scale(1.045)}
.story-play{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}
.story-play i{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:rgba(250,252,254,.94);color:var(--azul);box-shadow:0 4px 25px rgba(15,37,55,.18);transition:transform .35s var(--ease)}
.story-play svg{width:23px;height:23px;margin-left:4px;fill:currentColor}
.story-open:hover .story-play i{transform:scale(1.1)}
.story-info{position:absolute;left:25px;right:25px;bottom:25px;z-index:2;display:flex;flex-direction:column;gap:5px}
.story-info strong{font-family:var(--display);font-size:clamp(1.7rem,2.1vw,2rem);font-weight:600;line-height:1.1;color:var(--blanco)}
.story-info small{font-size:.83rem;color:#EAF3FC}
.story-watch{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.77rem;font-weight:700;letter-spacing:.02em;color:var(--blanco)}
.story-watch::before{content:"";height:1px;width:22px;background:var(--oro)}
.stories-controls{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:0}
.stories-arrow{width:48px;height:48px;border:1px solid var(--linea);border-radius:50%;background:var(--blanco);color:var(--azul);display:grid;place-items:center;cursor:pointer;transition:background .25s,transform .25s}
.stories-arrow:hover:not(:disabled){background:var(--azul);color:var(--blanco);transform:translateY(-2px)}
.stories-arrow:disabled{opacity:.3;cursor:default}
.stories-arrow svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7}
.stories-dots{display:flex;align-items:center;gap:3px}
.stories-dot{display:grid;place-items:center;width:30px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.stories-dot::before{content:"";width:7px;height:7px;border-radius:8px;background:var(--azul);opacity:.25;transition:width .35s,opacity .35s}
.stories-dot[aria-current="true"]::before{width:23px;opacity:1}
.stories-hint{display:flex;align-items:center;justify-content:center;gap:9px;margin:14px var(--gutter) 0;font-size:.8rem;color:var(--grafito)}
.stories-hint svg{width:23px;height:20px;fill:none;stroke:var(--azul);stroke-width:1.5;animation:stories-nudge 1.8s ease-in-out 2}
.stories-cta{margin-top:30px}
.story-open:focus-visible,.stories-arrow:focus-visible,.stories-dot:focus-visible,.story-close:focus-visible{outline:3px solid var(--oro);outline-offset:5px}
.stories-track:focus-visible{outline:2px solid var(--azul);outline-offset:-3px}
.stories-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes stories-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media(max-width:600px){
 .stories-stage{--story-width:min(72vw,310px);margin-top:16px}
 .stories-track{gap:8px;padding-top:14px;padding-bottom:24px}
 .story-open{border-radius:22px;aspect-ratio:3/4.25}
 .story-info{left:20px;right:18px;bottom:22px}
 .story-info strong{font-size:1.75rem}
 .story-info small{font-size:.76rem}
 .story-play i{width:58px;height:58px}
 .stories .lead{font-size:1rem}
 .stories-controls{gap:14px}
 .stories-hint{font-size:.76rem}
}

/* ═══ Visor de historias (v2): abre no lugar do card e troca de depoimento sem fechar ═══ */
.sv{
  position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;
  padding:0;margin:0;border:0;background:transparent;overflow:hidden;color:var(--blanco);
  opacity:1
}
.sv[open]{display:flex}
.sv[open] .sv-bars,.sv[open] .sv-head,.sv[open] .sv-foot,.sv[open] .sv-nav,.sv[open] .sv-hint{animation:sv-in .3s var(--ease) .08s backwards}
.sv[open]::backdrop{background:rgba(7,19,29,.9);backdrop-filter:blur(10px) saturate(.9);animation:sv-bd .32s var(--ease)}
.sv.is-closing{animation:sv-out .26s var(--ease) forwards}
.sv.is-closing::backdrop{animation:sv-bd .26s var(--ease) reverse forwards}
@keyframes sv-in{from{opacity:0}to{opacity:1}}
@keyframes sv-out{from{opacity:1}to{opacity:0}}
@keyframes sv-bd{from{background:rgba(7,19,29,0);backdrop-filter:blur(0) saturate(1)}}

.sv-stage{position:relative;flex:1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(8px,2vw,28px);padding:16px}
.sv-frame{
  --sv-ar:9/16;
  grid-column:2;position:relative;justify-self:center;
  height:min(86dvh,760px);aspect-ratio:var(--sv-ar);max-width:calc(100vw - 32px);
  border-radius:26px;overflow:hidden;background:#08151F;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
  transform-origin:center center;will-change:transform;
  touch-action:none
}
.sv-frame.is-morphing{transition:transform .42s var(--ease)}
.sv-frame.is-sliding{transition:transform .3s var(--ease),opacity .3s var(--ease)}

/* fundo desfocado com o próprio poster, para vídeo de proporção diferente não deixar barra preta seca */
.sv-blur{position:absolute;inset:-8%;background:center/cover no-repeat;filter:blur(28px) saturate(1.1) brightness(.55);transform:scale(1.08)}
.sv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent;display:block}
/* video que nao e vertical entra inteiro, com o fundo desfocado preenchendo o resto */
.sv-frame.is-wide .sv-video{object-fit:contain}
.sv-poster{position:absolute;inset:0;background:center/cover no-repeat;transition:opacity .35s var(--ease)}
.sv-frame.is-playing .sv-poster{opacity:0}

.sv-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,16,25,.78) 0,rgba(5,16,25,.16) 22%,transparent 42%,transparent 72%,rgba(5,16,25,.72) 100%)}

/* barras de progresso, uma por depoimento */
.sv-bars{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;gap:4px;padding:12px 14px 0}
.sv-bar{flex:1;height:3px;border-radius:3px;background:rgba(250,252,254,.3);overflow:hidden}
.sv-bar i{display:block;height:100%;width:100%;border-radius:3px;background:var(--blanco);transform:scaleX(var(--p,0));transform-origin:left center}
.sv-bar.is-done i{transform:scaleX(1)}

.sv-head{position:absolute;top:26px;left:0;right:0;z-index:3;display:flex;align-items:center;gap:11px;padding:0 14px}
.sv-avatar{width:42px;height:42px;flex:none;border-radius:50%;object-fit:cover;object-position:center 28%;border:1.5px solid rgba(250,252,254,.55)}
.sv-who{flex:1;min-width:0}
.sv-who strong{display:block;font-family:var(--sans);font-size:.95rem;font-weight:700;color:var(--blanco);line-height:1.25;text-shadow:0 1px 12px rgba(5,16,25,.6)}
.sv-who small{display:block;font-size:.75rem;color:#CFE6F8;text-shadow:0 1px 12px rgba(5,16,25,.6)}
.sv-btn{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(10,26,39,.42);color:var(--blanco);cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,transform .2s}
.sv-btn:hover{background:rgba(10,26,39,.72);transform:scale(1.06)}
.sv-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sv-btn.sv-close svg{stroke-width:2.1}

/* área de toque: um toque pausa e volta */
.sv-tap{position:absolute;inset:0;z-index:2;border:0;padding:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sv-center{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none}
.sv-center i{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:rgba(250,252,254,.94);color:var(--azul);box-shadow:0 6px 30px rgba(5,16,25,.35);opacity:0;transform:scale(.82);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.sv-center svg{width:26px;height:26px;fill:currentColor}
.sv-frame.is-paused .sv-center i{opacity:1;transform:scale(1)}

.sv-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:10px;padding:0 14px 16px}
.sv-time{font-variant-numeric:tabular-nums;font-size:.75rem;color:#DCEDFA;text-shadow:0 1px 10px rgba(5,16,25,.7)}
.sv-sound{margin-left:auto}
.sv-unmute{
  position:absolute;left:50%;bottom:74px;z-index:4;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:999px;
  background:rgba(250,252,254,.95);color:var(--azul);font:700 .8rem/1 var(--sans);cursor:pointer;
  box-shadow:0 8px 26px rgba(5,16,25,.35);animation:sv-pop .3s var(--ease)
}
.sv-unmute svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* setas fora do quadro, no desktop */
.sv-nav{align-self:center;width:52px;height:52px;display:grid;place-items:center;padding:0;border:1px solid rgba(250,252,254,.28);border-radius:50%;background:rgba(250,252,254,.08);color:var(--blanco);cursor:pointer;transition:background .22s,transform .22s,opacity .22s;backdrop-filter:blur(6px)}
.sv-nav:hover:not(:disabled){background:rgba(250,252,254,.2);transform:scale(1.07)}
.sv-nav:disabled{opacity:.22;cursor:default}
.sv-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sv-prev{grid-column:1;justify-self:end}
.sv-next{grid-column:3;justify-self:start}

.sv-hint{position:absolute;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));z-index:2;text-align:center;font-size:.76rem;color:rgba(232,243,251,.62)}
.sv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sv-btn:focus-visible,.sv-nav:focus-visible,.sv-unmute:focus-visible{outline:3px solid var(--oro);outline-offset:3px}

@keyframes sv-pop{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

@media(max-width:720px){
  .sv-stage{grid-template-columns:1fr;padding:0}
  .sv-nav{display:grid;position:absolute;top:50%;z-index:5;width:48px;height:48px;transform:translateY(-50%)}
  .sv-prev{left:max(10px,env(safe-area-inset-left));grid-column:auto;justify-self:auto}
  .sv-next{right:max(10px,env(safe-area-inset-right));grid-column:auto;justify-self:auto}
  .sv-nav:hover:not(:disabled){transform:translateY(-50%) scale(1.07)}
  .sv-frame{grid-column:1;height:100%;width:100%;max-width:100%;aspect-ratio:auto;border-radius:0}
  .sv-bars{padding:max(10px,env(safe-area-inset-top)) 10px 0}
  .sv-head{top:calc(max(10px,env(safe-area-inset-top)) + 14px);padding:0 10px}
  .sv-foot{padding:0 12px calc(16px + env(safe-area-inset-bottom))}
  .sv-hint{display:none}
}
@media(prefers-reduced-motion:reduce){
  .sv-frame.is-morphing,.sv-frame.is-sliding,.sv-poster,.sv-center i{transition-duration:.01ms}
  .sv[open] .sv-bars,.sv[open] .sv-head,.sv[open] .sv-foot,.sv[open] .sv-nav,.sv[open] .sv-hint,.sv[open]::backdrop,.sv.is-closing,.sv.is-closing::backdrop{animation-duration:.01ms}
  .sv-unmute{animation:none}
}
