/* =========================================================
   Trabalhos: galeria horizontal fixada (vídeos reais)
   ========================================================= */
.work{ position:relative; z-index:2; }
.work__head.section{ padding-bottom:40px; }
.gal{ position:relative; height:100vh; height:100svh; min-height:620px; overflow:hidden; }
.gal__bg{ position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center; font-size:clamp(90px,24vw,420px); font-weight:500; letter-spacing:-.06em; line-height:1; color:rgba(255,255,255,.065); white-space:nowrap; pointer-events:none; user-select:none; }
.gal__bg .ch{ display:inline-block; will-change:transform; }
.gal__track{ position:absolute; left:0; top:46%; display:flex; align-items:center; gap:clamp(40px,7vw,120px); margin:0; padding:0 calc(50vw - 12vh) 0 calc(50vw - 12vh); list-style:none; will-change:transform; transform:translateY(-50%); }
.gcard{ position:relative; flex:none; will-change:transform,opacity; transform-origin:50% 50%; }
.gcard__screen{ position:relative; height:min(54vh,520px); overflow:hidden; background:#0c0c0c; border:1px solid rgba(255,255,255,.14); }
.gcard--phone .gcard__screen{ aspect-ratio:390/844; height:min(64vh,600px); border-radius:34px; border:7px solid #151515; box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 40px 80px rgba(0,0,0,.5); }
.gcard--wide .gcard__screen{ aspect-ratio:1200/760; border-radius:10px; box-shadow:0 40px 80px rgba(0,0,0,.5); }
.gcard video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gcard__tag{ position:absolute; left:2px; bottom:calc(100% + 14px); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.55); white-space:nowrap; transition:color .6s var(--ease); }
.gcard.is-active .gcard__tag{ color:var(--signal); }
.gal__cap{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:44px; display:grid; grid-template-columns:120px 1fr; gap:16px 40px; align-items:end; pointer-events:none; }
.gal__count{ margin:0; font-family:var(--mono); font-size:12px; color:var(--muted); }
.gal__text{ max-width:34em; transition:opacity .45s ease, transform .8s var(--ease); }
.gal__text.is-swap{ opacity:0; transform:translateY(10px); }
.gal__text h3{ font-size:clamp(26px,2.9vw,39px); font-weight:300; letter-spacing:-.02em; line-height:1.1; margin:0 0 6px; }
.gal__kind{ margin:0 0 10px; font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--muted); }
.gal__desc{ margin:0; font-size:15px; line-height:1.5; color:rgba(255,255,255,.8); max-width:30em; }
.gal__bar{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:24px; height:1px; background:rgba(255,255,255,.18); }
.gal__bar i{ position:absolute; inset:0; background:var(--signal); transform-origin:left; transform:scaleX(0); }
/* Sem movimento: faixa rolável com encaixe */
html:not(.motion) .gal{ height:auto; overflow-x:auto; scroll-snap-type:x mandatory; padding:60px 0 200px; }
html:not(.motion) .gal__track{ position:relative; top:auto; transform:none; padding:0 var(--gutter); }
html:not(.motion) .gcard{ scroll-snap-align:center; }
html:not(.motion) .gal__bg, html:not(.motion) .gal__bar{ display:none; }
html:not(.motion) .gal__cap{ position:absolute; bottom:60px; }
@media (max-width:899px){
  .gal__cap{ grid-template-columns:1fr; bottom:40px; }
  .gal__count{ display:none; }
  .gal__track{ top:42%; padding:0 calc(50vw - 20vh) 0 calc(50vw - 20vh); }
  .gcard--phone .gcard__screen{ height:min(56vh,480px); }
  .gcard--wide .gcard__screen{ height:min(34vh,300px); }
}

/* =========================================================
   Prévia interativa da Ava
   ========================================================= */
.demo{ position:relative; z-index:2; overflow:hidden; }
.demo::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 1.25s var(--ease);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body.is-dark .demo::before{ opacity:.07; }
.demo .container{ max-width:var(--wide); position:relative; }
.demo__segs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.demo__segs button{ border:1px solid var(--line); border-radius:var(--pill); padding:10px 22px; font-size:14px; color:var(--muted); transition:border-color .8s var(--ease), color .4s ease; }
.demo__segs button[aria-pressed="true"]{ border-color:var(--fg); color:var(--fg); }
.demo__grid{ display:grid; grid-template-columns:7fr 5fr; gap:24px; }
.wa{ background:var(--inkstone); color:#fff; border:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; height:640px; }
.wa__head{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.12); font-size:14px; line-height:1.25; }
.wa__avatar{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.5); display:grid; place-items:center; }
.wa__head small{ display:block; color:var(--ash); font-size:12px; }
.wa__head .wa__live{ margin-left:auto; font-size:12px; color:var(--ash); display:flex; align-items:center; gap:8px; }
.wa__live i{ width:7px; height:7px; border-radius:50%; background:#fff; animation:live 1.6s ease-in-out infinite; }
@keyframes live{ 50%{ opacity:.25; } }
.wa__body{ flex:1; list-style:none; margin:0; padding:20px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#444 transparent; }
.wa__body > li:first-child{ margin-top:auto; }
.msg{ max-width:78%; padding:11px 14px; font-size:15px; line-height:1.42; animation:msgIn .7s var(--ease) both; }
.msg time{ display:block; margin-top:6px; font-size:11px; opacity:.55; }
.msg--c{ align-self:flex-end; background:#fff; color:#000; }
.msg--a{ align-self:flex-start; border:1px solid rgba(255,255,255,.3); }
.msg--s{ align-self:stretch; max-width:none; display:flex; align-items:center; gap:12px; font-size:12px; color:var(--ash); padding:4px 0; }
.msg--s::before,.msg--s::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.14); }
.msg--typing{ align-self:flex-start; border:1px solid rgba(255,255,255,.3); display:flex; gap:5px; padding:14px 16px; }
.msg--typing i{ width:6px; height:6px; border-radius:50%; background:#fff; animation:dot 1s ease-in-out infinite; }
.msg--typing i:nth-child(2){ animation-delay:.15s; } .msg--typing i:nth-child(3){ animation-delay:.3s; }
@keyframes dot{ 0%,100%{ opacity:.25; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }
@keyframes msgIn{ from{ opacity:0; transform:translateY(14px); } }
.wa__quick{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; padding:0 20px 14px; min-height:14px; }
.wa__opt{ border:1px solid rgba(255,255,255,.4); border-radius:var(--pill); padding:9px 18px; font-size:14px; color:#fff; animation:msgIn .6s var(--ease) both; transition:background-color .4s, color .4s; }
.wa__opt:hover{ background:#fff; color:#000; }
.wa__opt--solid{ background:#fff; color:#000; }
.wa__form{ display:flex; gap:10px; padding:14px 20px; border-top:1px solid rgba(255,255,255,.12); }
.wa__input{ flex:1; min-width:0; background:transparent; border:1px solid rgba(255,255,255,.2); border-radius:0; padding:12px 14px; font-size:15px; color:#fff; }
.wa__input::placeholder{ color:#8a8a8a; }
.wa__input:focus{ outline:none; border-color:#fff; }
.wa__send{ border:1px solid rgba(255,255,255,.4); border-radius:var(--pill); padding:0 22px; font-size:14px; color:#fff; }
.lead{ border:1px solid var(--line); padding:28px; display:flex; flex-direction:column; gap:24px; transition:border-color 1.25s var(--ease); }
.lead__top small{ display:block; font-size:13px; color:var(--muted); }
.lead__name{ font-size:29px; font-weight:300; letter-spacing:-.02em; line-height:1.15; margin:6px 0 0; }
.lead__fields{ margin:0; font-size:14px; }
.lead__fields div{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid var(--line); }
.lead__fields dt{ color:var(--muted); }
.lead__fields dd{ margin:0; text-align:right; }
.lead__fields dd.is-empty{ color:var(--muted); opacity:.6; }
.lead__fields dd.is-new{ animation:msgIn .7s var(--ease) both; }
.lead__temp p{ display:flex; justify-content:space-between; font-size:14px; margin:0 0 10px; }
.lead__temp p span{ color:var(--muted); }
.lead__meter{ height:2px; background:var(--line); position:relative; }
.lead__meter i{ position:absolute; inset:0; background:var(--fg); transform-origin:left; transform:scaleX(.2); transition:transform 1.25s var(--ease); }
.lead__steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:14px; }
.lead__steps li{ display:flex; align-items:center; gap:12px; color:var(--muted); transition:color .6s; }
.lead__steps li i{ width:12px; height:12px; border-radius:50%; border:1px solid currentColor; transition:background-color .6s; flex-shrink:0; }
.lead__steps li.is-done{ color:var(--fg); }
.lead__steps li.is-done i{ background:currentColor; }
.lead__next{ font-size:14px; margin:0; }
