/* Página de vídeos comerciais, fase 1 (29/10/2026): entradas na montagem, fita de filme no hero e sala de exibição.
   Tudo nasce visível; só com JS e sem movimento reduzido (.sd-js) os alvos esperam a entrada. */
:root{--sd-curva:cubic-bezier(.2,.75,.2,1);--sd-dur:650ms}

/* ---------- A. Entradas (mesmo sistema da página de sites) ---------- */
.sd-js :is(.s-hero-copy>.s-label,.s-hero-copy>.s-eyebrow,.s-hero-copy>p:not(.s-label):not(.s-eyebrow),.s-hero-copy .s-actions,.sv-fita,.s-intro>.s-label,.s-intro>p,.s-split>div>.s-label,.s-split>div>p,.s-reasons li,.s-feature-heading,.s-compare article,.s-delivery,.s-scope-note,.s-process li,.s-process-note,.s-faq details,.s-contact-grid>div>.s-label,.s-contact-grid>div>p,.s-contact-grid .s-actions,.s-brief,.s-related-links a,.sv-tela-col,.sv-trabalhos li,.sv-marcadores){
  transition:opacity var(--sd-dur) var(--sd-curva) var(--sd-d,0ms),transform calc(var(--sd-dur) + 100ms) var(--sd-curva) var(--sd-d,0ms)}
.sd-js :is(.s-hero-copy>.s-label,.s-hero-copy>.s-eyebrow,.s-hero-copy>p:not(.s-label):not(.s-eyebrow),.s-hero-copy .s-actions,.s-intro>.s-label,.s-intro>p,.s-split>div>.s-label,.s-split>div>p,.s-reasons li,.s-feature-heading,.s-compare article,.s-delivery,.s-scope-note,.s-process li,.s-process-note,.s-faq details,.s-contact-grid>div>.s-label,.s-contact-grid>div>p,.s-contact-grid .s-actions,.s-brief,.s-related-links a,.sv-tela-col,.sv-trabalhos li,.sv-marcadores):not(.sd-in){opacity:0;transform:translateY(16px)}
.sd-js .sv-fita:not(.sd-in){opacity:0;transform:scale(.985)}
.sd-js :is(.s-hero-copy h1,.s-intro h2,.s-split h2,.s-contact-grid h2):not(.sd-pronto){opacity:0}
.sd-p{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.sd-p>span{display:inline-block;transition:transform .85s var(--sd-curva) calc(var(--sd-l,0) * 85ms + var(--sd-d,0ms))}
.sd-js .sd-pronto:not(.sd-in) .sd-p>span{transform:translateY(108%)}
.s-label::before{transform-origin:left center;transition:transform .7s var(--sd-curva) calc(var(--sd-d,0ms) + 120ms)}
.sd-js .s-label:not(.sd-in)::before{transform:scaleX(0)}

/* ---------- B. Hero: texto em uma coluna e fita de filme em faixa larga ---------- */
.sv-hero .s-hero-grid{grid-template-columns:1fr}
.sv-hero .s-hero-copy{max-width:820px}
.sv-fita{position:relative;margin-top:44px}
.sv-fita-canvas{display:none;width:100%;height:clamp(280px,30vw,440px);cursor:grab;touch-action:pan-y;background:#0b0d10}
.sv-fita-canvas:active{cursor:grabbing}
.sv-fita.sv-fita-viva .sv-fita-canvas{display:block}
.sv-fita.sv-fita-viva .sv-fita-estatica{display:none}
/* tira estática (sem JS, sem WebGL ou com movimento reduzido): os mesmos quadros, como película */
.sv-fita-estatica{list-style:none;margin:0;padding:22px var(--sangria,24px);display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;
  background:
    repeating-linear-gradient(90deg,transparent 0 10px,#0b0d10 10px 20px) top 6px left 0/100% 8px no-repeat,
    repeating-linear-gradient(90deg,transparent 0 10px,#0b0d10 10px 20px) bottom 6px left 0/100% 8px no-repeat,
    #252b2e}
.sv-fita-estatica li{flex:none;scroll-snap-align:start}
.sv-fita-estatica a{display:flex;flex-direction:column;gap:6px;width:220px;color:var(--cor-texto-2);text-decoration:none;font:400 11px/1.4 var(--fonte-mono);letter-spacing:.04em}
.sv-q-img{display:block;width:100%;aspect-ratio:1.61;border-radius:3px;background:url('../img/fita-atlas.webp') no-repeat;background-size:400% 400%;background-position:calc(var(--cx) * 33.333%) calc(var(--cy) * 33.333%);filter:grayscale(.85);transition:filter .3s ease}
.sv-fita-estatica a:hover .sv-q-img,.sv-fita-estatica a:focus-visible .sv-q-img{filter:none}
.sv-fita-estatica a:focus-visible{outline:2px solid var(--cor-foco);outline-offset:3px;border-radius:4px}
.sv-fita-legenda{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding-top:14px;font-size:13px;color:var(--cor-texto-2)}
.sv-fita-legenda a{color:var(--cor-marca-2);font-weight:600;text-decoration:none}
.sv-fita-legenda a:hover,.sv-fita-legenda a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.sv-fita-dica{display:none;font:400 11px/1.5 var(--fonte-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cor-marca-2)}
.sv-fita-viva .sv-fita-dica{display:inline}
.sv-fita-pausa{display:none;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--cor-borda);background:rgba(255,255,255,.03);color:var(--cor-texto);font:500 13px/1 var(--fonte-texto);cursor:pointer}
.sv-fita-viva .sv-fita-pausa{display:inline-flex}
.sv-fita-pausa:focus-visible{outline:2px solid var(--cor-foco);outline-offset:3px}
.sv-pausa-icone{width:10px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.sv-fita-pausa[aria-pressed="true"] .sv-pausa-icone{width:0;height:0;border:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
@media (max-width:700px){.sv-fita-canvas{height:280px}.sv-fita-estatica a{width:180px}}

/* ---------- C. Sala de exibição ---------- */
.sv-sala-grade{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:28px;align-items:start}
.sv-palco{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--cor-borda);box-shadow:0 34px 70px -34px rgba(0,0,0,.85)}
.sv-tela{position:absolute;top:0;bottom:0;left:50%;width:100%;transform:translateX(-50%);overflow:hidden;background:#000;transition:width .6s var(--sd-curva)}
.sv-tela[data-formato="1x1"]{width:56.25%}
.sv-tela[data-formato="9x16"]{width:31.64%}
.sv-tela video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.sv-palco:has(.sv-tela:not([data-formato="16x9"])){background:repeating-linear-gradient(135deg,#07090b 0 12px,#0b0f12 12px 24px)}
.sv-formatos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:14px}
.sv-formatos-rotulo{font:400 11px/1.6 var(--fonte-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cor-marca-2)}
.sv-formatos [role="group"]{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--cor-borda);background:rgba(255,255,255,.04)}
.sv-formatos button{border:0;background:none;padding:8px 16px;border-radius:999px;color:var(--cor-texto-2);font:500 13px/1 var(--fonte-mono);cursor:pointer;transition:background-color .25s ease,color .25s ease}
.sv-formatos button[aria-pressed="true"]{background:var(--cor-marca-1);color:#03201f;font-weight:600}
.sv-formatos button:focus-visible{outline:2px solid var(--cor-foco);outline-offset:3px}
.sv-formato-nota{margin:10px 0 0;font-size:12.5px;color:var(--cor-texto-2)}
.sv-trabalhos{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:10px}
.sv-trabalhos button{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:8px;border-radius:14px;border:1px solid var(--cor-borda);background:rgba(255,255,255,.03);color:var(--cor-texto);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,transform .25s var(--sd-curva)}
.sv-trabalhos button:hover{border-color:rgba(113,231,219,.5);transform:translateY(-2px)}
.sv-trabalhos button[aria-pressed="true"]{border-color:var(--cor-marca-2);background:rgba(0,207,196,.1)}
.sv-trabalhos button:focus-visible{outline:2px solid var(--cor-foco);outline-offset:3px}
.sv-t-capa{position:relative;display:block;aspect-ratio:16/9;border-radius:9px;background-size:cover;background-position:center}
.sv-t-capa i{position:absolute;right:6px;bottom:6px;padding:2px 7px;border-radius:999px;background:rgba(11,13,16,.85);font:500 10.5px/1.4 var(--fonte-mono);font-style:normal;color:var(--cor-texto)}
.sv-t-texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.sv-t-texto small{font:400 10.5px/1.5 var(--fonte-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cor-marca-2)}
.sv-t-texto strong{font:500 18px/1.25 var(--fonte-display)}
.sv-t-texto em{font-style:normal;font-size:13px;color:var(--cor-texto-2)}
.sv-marcadores-rotulo{margin:0 0 10px;font:400 11px/1.6 var(--fonte-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cor-marca-2)}
.sv-chips{display:flex;flex-wrap:wrap;gap:8px}
.sv-chips button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:5px 13px 5px 6px;border-radius:999px;border:1px solid var(--cor-borda);background:rgba(255,255,255,.03);color:var(--cor-texto);font:500 13.5px/1 var(--fonte-texto);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.sv-chips button:hover{border-color:var(--cor-marca-2);transform:translateY(-1px)}
.sv-chips button:focus-visible{outline:2px solid var(--cor-foco);outline-offset:3px}
.sv-tempo{padding:4px 8px;border-radius:999px;background:rgba(0,207,196,.14);font:500 11px/1 var(--fonte-mono);color:var(--cor-marca-2)}
.sv-chips button[data-atual]{background:var(--cor-marca-1);border-color:var(--cor-marca-1);color:#03201f;font-weight:600}
.sv-chips button[data-atual] .sv-tempo{background:rgba(3,32,31,.15);color:#03201f}
@media (max-width:960px){.sv-sala-grade{grid-template-columns:1fr}}
@media (max-width:560px){.sv-trabalhos button{grid-template-columns:104px minmax(0,1fr)}.sv-formatos{justify-content:flex-start}}

@media (prefers-reduced-motion:reduce){
  .sv-tela,.sv-trabalhos button,.sv-chips button,.sv-q-img{transition:none}
}
.sv-fita-acoes{display:inline-flex;align-items:center;gap:16px}

/* =================== Fase 2 =================== */

/* ---------- E. Como trabalhamos: quadro fixo enquanto as etapas passam ---------- */
.sv-processo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start}
.sv-proc-midia{position:sticky;top:calc(var(--altura-header,82px) + 28px);display:flex;flex-direction:column;gap:12px}
.sv-proc-quadro{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--cor-borda);box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.sv-proc-quadro img,.sv-proc-quadro canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sv-proc-quadro canvas{opacity:0;transition:opacity .3s ease}
.sv-processo.sv-proc-vivo .sv-proc-quadro canvas{opacity:1}
.sv-proc-tempo{position:absolute;left:12px;top:12px;padding:4px 10px;border-radius:999px;background:rgba(11,13,16,.8);font:500 11px/1.4 var(--fonte-mono);letter-spacing:.06em;color:var(--cor-marca-2);opacity:0;transition:opacity .3s ease}
.sv-processo.sv-proc-vivo .sv-proc-tempo{opacity:1}
.sv-proc-barra{height:3px;border-radius:2px;background:rgba(113,231,219,.15);overflow:hidden}
.sv-proc-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--cor-marca-1),var(--cor-marca-2));transform-origin:left;transform:scaleX(var(--sv-p,0))}
.sv-proc-legenda{margin:0;font-size:13px;color:var(--cor-texto-2)}
.sv-proc-legenda a{color:var(--cor-marca-2);font-weight:600;text-decoration:none;white-space:nowrap}
.sv-proc-legenda a:hover,.sv-proc-legenda a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.sv-processo .s-process{grid-template-columns:1fr!important;gap:0!important;margin:0}
.sv-processo .s-process li{min-height:46vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0 24px 24px;border-left:2px solid rgba(113,231,219,.14);transition:border-color .35s ease}
.sv-processo .s-process li>*{transition:opacity .35s ease}
/* esmaecido sem perder o contraste mínimo de leitura (medido em testar-fase2) */
.sv-processo.sv-proc-vivo .s-process li:not([data-ativa]) h3{opacity:.5}
.sv-processo.sv-proc-vivo .s-process li:not([data-ativa]) p{opacity:.78}
.sv-processo .s-process li[data-ativa]{border-left-color:var(--cor-marca-1)}
@media (max-width:900px){
  .sv-processo{grid-template-columns:1fr;gap:20px}
  .sv-proc-midia{top:calc(var(--altura-header,72px) + 8px);z-index:2;background:var(--cor-superficie-1,#0b0d10);padding-bottom:10px}
  .sv-processo .s-process li{min-height:40vh}
  .sv-proc-legenda{font-size:12px}
}

/* ---------- D. Micro-demonstrações das entregas ---------- */
.s-delivery .sv-demo{grid-column:2;margin-top:16px}
/* o card estica na linha da grade: sem isto as linhas internas crescem e abrem um vão acima da demonstração */
.s-delivery:has(.sv-demo){align-content:start}
.sv-demo{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;border:1px solid var(--cor-borda);background:radial-gradient(70% 90% at 50% 100%,rgba(0,207,196,.1),transparent 70%),#0c1417;overflow:hidden}
.sv-demo-fonte{font:400 10.5px/1.4 var(--fonte-mono);letter-spacing:.06em;color:var(--cor-texto-2)}
/* 01 roteiro → storyboard */
.sv-roteiro{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:10px;background:#f2f4f1;color:#1d2622;font:400 11.5px/1.45 'Courier New',var(--fonte-mono)}
.s-delivery .sv-roteiro p{margin:0;color:#1d2622;font-size:inherit}
.sv-roteiro b{display:inline-block;min-width:54px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px;color:#0b5e57}
.sv-story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sv-story img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,.12)}
.sd-tocar .sv-roteiro p{animation:sv-escreve .6s steps(24,end) both}
.sd-tocar .sv-roteiro p:nth-child(2){animation-delay:.55s}.sd-tocar .sv-roteiro p:nth-child(3){animation-delay:1.1s}
.sd-tocar .sv-story img{animation:sv-sobe .5s var(--sd-curva) both}
.sd-tocar .sv-story img:nth-child(1){animation-delay:1.7s}.sd-tocar .sv-story img:nth-child(2){animation-delay:1.85s}.sd-tocar .sv-story img:nth-child(3){animation-delay:2s}
@keyframes sv-escreve{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes sv-sobe{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
/* 02 antes e depois de cor */
.sv-cor{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.sv-cor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-cor-antes{filter:saturate(.35) contrast(.72) brightness(1.12) sepia(.12);clip-path:inset(0 calc(100% - var(--corte)) 0 0)}
.sv-cor-linha{position:absolute;top:0;bottom:0;left:var(--corte);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.6);pointer-events:none}
.sv-cor-linha::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#09242b;font-size:13px;font-weight:700}
.sv-cor-rotulos{position:absolute;left:8px;right:8px;bottom:8px;display:flex;justify-content:space-between;pointer-events:none}
.sv-cor-rotulos b{padding:3px 8px;border-radius:999px;background:rgba(11,13,16,.78);font:500 10px/1.4 var(--fonte-mono);color:var(--cor-texto)}
.sv-cor input[type="range"]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.sv-cor:has(input:focus-visible){outline:2px solid var(--cor-foco);outline-offset:3px}
.sd-tocar .sv-cor:not(.sv-cor-mexido){animation:sv-varre 2.6s var(--sd-curva) .4s both}
@property --corte{syntax:'<percentage>';inherits:true;initial-value:50%}
@keyframes sv-varre{0%{--corte:92%}55%{--corte:12%}100%{--corte:50%}}
/* 03 continuidade */
.sv-cont-cenas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sv-cont-cenas img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.12)}
.sv-cont-marcas{display:flex;flex-wrap:wrap;gap:6px}
.sv-cont-marcas i{font:500 10.5px/1 var(--fonte-mono);font-style:normal;padding:5px 9px;border-radius:999px;background:rgba(0,207,196,.14);color:var(--cor-marca-2)}
.sv-cont-marcas i::before{content:"✓ "}
.sd-tocar .sv-cont-cenas img:nth-child(2){animation:sv-sobe .5s var(--sd-curva) .3s both}
.sd-tocar .sv-cont-marcas i{animation:sv-sobe .4s var(--sd-curva) both}
.sd-tocar .sv-cont-marcas i:nth-child(1){animation-delay:.9s}.sd-tocar .sv-cont-marcas i:nth-child(2){animation-delay:1.1s}.sd-tocar .sv-cont-marcas i:nth-child(3){animation-delay:1.3s}.sd-tocar .sv-cont-marcas i:nth-child(4){animation-delay:1.5s}
/* 04 linha do tempo de edição */
.sv-linha-tempo{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px 10px 10px 64px;border-radius:10px;background:#10181b}
.sv-faixa{position:relative;height:18px}
.sv-faixa b{position:absolute;left:-56px;top:0;font:400 10px/18px var(--fonte-mono);color:var(--cor-texto-2);font-weight:400}
.sv-faixa i{position:absolute;top:0;bottom:0;left:calc(var(--a) * 1%);width:calc(var(--l) * 1% - 2px);border-radius:3px;background:linear-gradient(180deg,#3fb7c9,#1f7f8f)}
.sv-faixa i:nth-of-type(even){background:linear-gradient(180deg,#5aa0e6,#2f6fb3)}
.sv-faixa--voz i{background:linear-gradient(180deg,#b3a5f7,#7d68e0)!important}
.sv-faixa--trilha i{background:repeating-linear-gradient(90deg,rgba(242,194,122,.85) 0 3px,rgba(214,158,74,.55) 3px 6px)!important}
.sv-cabeca{position:absolute;top:4px;bottom:4px;left:64px;width:2px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.7)}
.sv-saidas{display:flex;flex-wrap:wrap;gap:6px}
.sv-saidas i{font:500 10.5px/1 var(--fonte-mono);font-style:normal;padding:5px 9px;border-radius:999px;border:1px solid rgba(113,231,219,.45);color:var(--cor-texto)}
.sd-tocar .sv-faixa i{transform-origin:left;animation:sv-clipe .45s var(--sd-curva) both;animation-delay:calc(var(--a) * 12ms + .2s)}
.sd-tocar .sv-cabeca{animation:sv-cabeca 2.2s linear 1.2s both}
.sd-tocar .sv-saidas i{animation:sv-sobe .4s var(--sd-curva) both}
.sd-tocar .sv-saidas i:nth-child(1){animation-delay:3.2s}.sd-tocar .sv-saidas i:nth-child(2){animation-delay:3.35s}.sd-tocar .sv-saidas i:nth-child(3){animation-delay:3.5s}.sd-tocar .sv-saidas i:nth-child(4){animation-delay:3.65s}
@keyframes sv-clipe{from{transform:scaleX(0);opacity:.3}to{transform:none;opacity:1}}
@keyframes sv-cabeca{from{left:64px}to{left:calc(100% - 12px)}}
@media (max-width:700px){.s-delivery .sv-demo{grid-column:1 / -1}.sv-roteiro{font-size:10.5px}}

@media (prefers-reduced-motion:reduce){
  .sv-proc-quadro canvas,.sv-proc-tempo,.sv-processo .s-process li,.sv-processo .s-process li>*{transition:none}
}