/* Página /trabalhos — portada de /root/quilha-trabalhos.html.
   `@scope` prende tudo ao wrapper: fora dele o site segue com o tema normal.
   Fontes e cores apontam para os tokens do tema (nada de paleta paralela). Ficaram de fora:
   reset, `body`, a regra de h1–h4 (a tipografia é a do site) e o nav/rodapé do protótipo. */
@scope (.pagina-trabalhos) {

:scope {
  --abissal: var(--color-abissal); --quase-preto: var(--color-quase-preto); --profundo: var(--color-profundo); --mare: var(--color-mare);
  --turquesa:var(--color-turquesa); --raso:var(--color-raso); --dourado:var(--color-dourado); --dourado-claro:var(--color-dourado-claro);
  --dourado-escuro: var(--color-dourado-escuro); --coral:var(--color-coral); --verde-mar:var(--color-verde-mar); --ambar:var(--color-ambar);
  --areia: var(--color-areia); --neve: var(--color-neve); --cinza-frio: var(--color-cinza-frio); --ardosia: var(--color-ardosia);
  /* cor-literal: início — cromo das telas fictícias (navegador, CRM, WhatsApp, aplicações de marca).
     Não é cor do tema: só existe dentro dos mockups e não vai para página nova (docs/design/tokens.md). */
  --tela-fundo:#0F1B24; --tela-barra:#16232E; --tela-ponto:#33485A;
  --crm-barra:#0D2130; --crm-ponto:#2C4354; --aplic-fundo:#0F2231; --zap-texto-bot:#CFEFE2;
  /* cor-literal: fim */
  --grao: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='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --disp: var(--font-heading);
  --corpo: var(--font-body);
  --mono: var(--font-small);
}
/* Cor de texto da página: o protótipo herdava do `body` (navy), que ficou de fora do port.
   Sem isto, os títulos das áreas claras herdam o `h1..h4 { color: #fff }` do tema dark-first
   e somem no branco. `inherit` faz o título seguir a cor da seção: navy nas claras, branco
   nas escuras (`.area.escura` e `.topo`, que já definem `color:#fff`). */
:scope { color: var(--profundo); }
:scope h1,
:scope h2,
:scope h3,
:scope h4 { color: inherit; }

.wrap{max-width:var(--largura-max);margin:0 auto;padding:0 var(--respiro)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.todo{position:relative;border:1px dashed color-mix(in srgb, var(--color-dourado-escuro) 65%, transparent);background:color-mix(in srgb, var(--color-dourado) 7%, transparent)}
.todo::after{content:"a preencher";position:absolute;top:8px;right:10px;z-index:6;font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-dourado-fundo);background:rgba(255,255,255,.9);padding:2px 7px;border-radius:5px}
.todo.escuro::after{background:color-mix(in srgb, var(--color-abissal) 70%, transparent);color:var(--dourado)}

  border-bottom:1px solid rgba(255,255,255,.08)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:19px;color:#fff}
.logo svg{width:25px;height:25px;color:var(--dourado)}

/* hero da página — parede de trabalhos passando atrás */
.topo{background:var(--abissal);color:#fff;padding:150px 0 96px;position:relative;overflow:hidden;isolation:isolate;
  min-height:560px;display:flex;align-items:center}
.topo .mural{position:absolute;inset:-26% -14%;z-index:1;display:flex;flex-direction:column;gap:16px;
  transform:rotate(-8deg) scale(1.08);opacity:.85}
.topo .fila{display:flex;gap:16px;width:max-content;animation:desliza 70s linear infinite}
.topo .fila.rev{animation-direction:reverse;animation-duration:88s}
.topo .fila.lenta{animation-duration:104s}
.topo .fila i{flex:0 0 auto;border-radius:10px;display:block}
.topo .fila.f1 i{width:230px;height:140px}
.topo .fila.f2 i{width:130px;height:130px}
.topo .fila.f3 i{width:110px;height:170px}
.topo .fila.f4 i{width:200px;height:126px}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.topo .veu{position:absolute;inset:0;z-index:2;
  background:radial-gradient(74% 64% at 50% 48%,color-mix(in srgb, var(--color-abissal) 62%, transparent),color-mix(in srgb, var(--color-abissal) 88%, transparent) 80%),
             linear-gradient(180deg,color-mix(in srgb, var(--color-abissal) 34%, transparent),color-mix(in srgb, var(--color-abissal) 58%, transparent))}
.topo .grain{position:absolute;inset:0;z-index:3;background-image:var(--grao);opacity:.06;mix-blend-mode:overlay}
.topo .wrap{position:relative;z-index:4;text-align:center}
.topo .eyebrow{color:var(--dourado)}
.topo h1{font-size:clamp(34px,4.8vw,56px);margin:18px auto 0;max-width:18ch}
.topo p{margin:20px auto 0;max-width:60ch;color:var(--color-bruma);font-size:17px}
.filtros{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;justify-content:center}
/* cor-literal: início — peça "prata metálica" dos filtros (modelo neomórfico prata de
   /root/quilha-botoes-neo-prata.html, último modelo, escolha do Dani). É um material/acabamento do
   botão: vários cinzas de brilho e sombra que só fazem sentido juntos, não cor de interface do tema.
   O ícone fica sempre no accent do tema e o hover ganha um contorno no accent. */
.filtros a{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:600;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.4px;color:#3f4f63;border:none;border-radius:40px;
  padding:10px 18px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,color .2s ease;
  background:linear-gradient(145deg,#e9eef4,#c2ccd8);
  box-shadow:-4px -4px 11px rgba(255,255,255,.12),6px 7px 16px rgba(0,0,0,.5),
             inset 1px 1px 1px rgba(255,255,255,.9),inset -1px -1px 2px rgba(120,140,165,.5)}
.filtros a svg{width:15px;height:15px;flex:none;color:var(--color-accent)}
.filtros a:hover{transform:translateY(-1px);color:var(--color-profundo);
  background:linear-gradient(145deg,var(--color-dourado-brilho),var(--color-dourado-escuro));
  box-shadow:-4px -4px 11px rgba(255,255,255,.10),8px 9px 20px rgba(0,0,0,.5),
             inset 1px 1px 1px rgba(255,255,255,.35),inset -1px -1px 2px rgba(0,0,0,.15)}
.filtros a:hover svg{color:var(--color-profundo)}
.filtros a:active{transform:none;color:var(--color-profundo);
  background:linear-gradient(145deg,var(--color-dourado-escuro),var(--color-dourado-brilho));
  box-shadow:inset 2px 2px 5px rgba(0,0,0,.28),inset -2px -2px 5px rgba(255,255,255,.30)}
.filtros a:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
/* cor-literal: fim */
@media (prefers-reduced-motion:reduce){.filtros a{transition:none}}

/* cabeçalho de área */
/* A página é longa e cheia de mídia: cada faixa abaixo da primeira só é desenhada quando chega perto
   da tela. O tamanho reservado evita que a barra de rolagem pule (docs/performance.md, 2026-09-24). */
.area{padding:92px 0 96px;content-visibility:auto;contain-intrinsic-size:auto 900px}
.area:first-of-type{content-visibility:visible}
.area.clara{background:var(--neve)}
.area.quente{background:var(--areia)}
.area.escura{background:var(--abissal);color:#fff}
.area-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px}
.area-head .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--color-dourado-texto)}
.area.escura .area-head .n{color:var(--dourado)}
.area.escura .nums span,.area.escura .periodo,.area.escura .ad-card .rot{color:var(--color-maresia)}
.area-head h2{font-size:clamp(26px,3.2vw,38px);margin-top:12px}
.area-head p{margin-top:12px;color:var(--ardosia);max-width:54ch}
.area.escura .area-head p{color:var(--color-maresia)}
.area-head .ir{font-size:14.5px;color:var(--mare);border-bottom:1px solid color-mix(in srgb, var(--color-mare) 30%, transparent);padding-bottom:2px;white-space:nowrap}
.area.escura .area-head .ir{color:var(--dourado-claro);border-color:color-mix(in srgb, var(--color-dourado) 40%, transparent)}

/* ---------- 01 SITES: o carrossel foi para a home (public/carrossel-sites.css); aqui ficam a vitrine e o palco ---------- */
.reel > video{opacity:0;transition:opacity .25s}
.reel[data-player]:focus-visible{outline:3px solid var(--dourado);outline-offset:-3px}
.dica{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-cinza-texto)}

/* ---------- 01B SITES: vitrine que toca sozinha ---------- */
/* `.vitrine` já é do bloco de marca; esta é `.vitrine-sites`. */
/* Larguras em `cqw` (da vitrine), não em `vw`: 86vw conta a tela inteira e, com a margem da página,
   o slide ficava mais largo que a área visível do trilho e cortava dos dois lados no celular. */
.vitrine-sites{position:relative;container-type:inline-size}
.v-trilho{position:relative;display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding:6px calc((100cqw - min(760px,86cqw)) / 2) 12px}
.v-trilho::-webkit-scrollbar{display:none}
.v-slide{flex:0 0 min(760px,86cqw);scroll-snap-align:center;opacity:.35;transform:scale(.92);
  transition:opacity .5s ease,transform .5s ease}
.v-slide.ativo{opacity:1;transform:none}
.v-slide .janela{border-radius:18px;background:var(--color-profundo);
  box-shadow:0 44px 80px -44px rgba(0,0,0,.95),0 0 0 1px color-mix(in srgb, var(--color-dourado) 16%, transparent)}
.v-slide.ativo .janela{box-shadow:0 44px 80px -44px rgba(0,0,0,.95),0 0 0 1px color-mix(in srgb, var(--color-dourado) 55%, transparent)}
.v-legenda{margin-top:18px;display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.v-legenda > div{min-width:0}
.v-nome{font-family:var(--disp);font-size:20px;color:#fff}
.v-legenda p:not(.v-nome){margin-top:4px;font-size:14px;color:var(--color-maresia)}
.v-dominio{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dourado);white-space:nowrap}
/* Fila: uma barra por site, a do ativo enchendo com o progresso; clicar leva direto ao site. */
.v-fila{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;max-width:min(760px,86cqw);margin:30px auto 0}
.v-fila button{padding:10px 0 0;border:0;background:none;cursor:pointer;text-align:left;color:var(--color-cinza-mar);font-size:12px}
.v-fila button i{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.v-fila button i::after{content:"";display:block;height:100%;background:var(--dourado);transform-origin:left center;
  transform:scaleX(var(--p,0))}
.v-fila button span{display:block;margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-fila button.ativo,.v-fila button:hover{color:#fff}
.v-fila button:focus-visible{outline:2px solid var(--dourado);outline-offset:4px;border-radius:4px}
@media (max-width:680px){
  .v-fila button span{display:none}
  /* Em coluna, `baseline` deixava o texto na largura do conteúdo e o trilho cortava a sobra. */
  .v-legenda{flex-direction:column;align-items:stretch;gap:6px}
}

/* ---------- 01C SITES: palco 3D — o palco em si é o componente PalcoSites (public/palco-sites.css) ---------- */
#sites-c{overflow:hidden;background:linear-gradient(180deg,var(--color-profundo),var(--abissal))}

/* ---------- 03 SOCIAL: a vitrine é o componente VitrineRedes (public/vitrine-redes.css) ---------- */

/* ---------- 04 MARCA ---------- */
.marca{display:grid;grid-template-columns:1.1fr 1fr;gap:24px}
.vitrine{border-radius:22px;overflow:hidden;background:var(--color-profundo);border:1px solid rgba(255,255,255,.09)}
.vitrine .palco{aspect-ratio:16/10;display:grid;place-items:center;background:radial-gradient(70% 70% at 50% 40%,var(--color-mare),var(--color-abissal))}
.vitrine .palco span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-cinza-frio)}
.paleta{display:flex;height:56px}
.paleta i{flex:1}
.vitrine .pe{padding:16px 20px;font-size:14px;color:var(--color-maresia)}
.aplicacoes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.aplic{border-radius:18px;aspect-ratio:4/3;display:grid;place-items:center;background:var(--aplic-fundo);border:1px solid rgba(255,255,255,.08);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-cinza-frio);text-align:center;padding:12px}

/* ---------- 05 IMPRESSOS ---------- */
.impressos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.peca{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 20px 40px -32px color-mix(in srgb, var(--color-profundo) 50%, transparent)}
.peca .img{aspect-ratio:4/3;display:grid;place-items:center;background:linear-gradient(150deg,var(--color-nevoa),var(--color-bruma));
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-cinza-mar);text-align:center;padding:10px}
.peca p{padding:13px 15px;font-size:14px;color:var(--ardosia)}
.peca.alta .img{aspect-ratio:3/4}

/* ---------- 06 TRÁFEGO ---------- */
.ads{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ad{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 18px 38px -32px color-mix(in srgb, var(--color-profundo) 50%, transparent)}
.ad .criativo{aspect-ratio:16/10;display:grid;place-items:center;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8);text-align:center;padding:14px}
.ad .ctx{margin-top:7px;font-size:13.5px;color:var(--ardosia)}
.nums{list-style:none;margin:14px 0 0;padding:13px 0 0;border-top:1px solid var(--color-nevoa);
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.nums span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-cinza-texto)}
.nums b{font-family:var(--disp);font-size:17px;color:var(--profundo);font-variant-numeric:tabular-nums}
.periodo{margin-top:13px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-cinza-texto)}
.ad:nth-child(1) .criativo{background:linear-gradient(155deg,var(--color-mare),var(--color-abissal))}
.ad:nth-child(2) .criativo{background:linear-gradient(155deg,var(--color-ambar),var(--color-ambar-fundo))}
.ad:nth-child(3) .criativo{background:linear-gradient(155deg,var(--color-verde-mar),var(--color-verde-mar-fundo))}
.ad:nth-child(4) .criativo{background:linear-gradient(155deg,var(--color-raso),var(--color-raso-fundo))}
.ad .meta{padding:13px 15px;font-size:13.5px;color:var(--ardosia)}
.ad .meta b{display:block;font-family:var(--disp);font-size:14.5px;color:var(--profundo);margin-bottom:3px}

/* ---------- 07 POSICIONAMENTO ---------- */
.antes-depois{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ad-card{border-radius:20px;padding:30px 28px;background:#fff;box-shadow:0 20px 42px -34px color-mix(in srgb, var(--color-profundo) 50%, transparent)}
.ad-card .rot{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-cinza-texto)}
.ad-card blockquote{margin:16px 0 0;font-family:var(--disp);font-size:21px;font-weight:500;line-height:1.35;color:var(--color-cinza-texto)}
.ad-card.depois{background:var(--profundo)}
.ad-card.depois .rot{color:var(--dourado)}
.ad-card.depois blockquote{color:#fff}
.ad-card .obs{margin-top:16px;font-size:14px;color:var(--ardosia)}
.ad-card.depois .obs{color:var(--color-maresia)}

/* ---------- 08 SUBMERSOS ---------- */
.linha-agua{display:flex;align-items:center;gap:16px;margin-bottom:44px}
.linha-agua .l{flex:1;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--color-dourado) 50%, transparent),transparent)}
.linha-agua span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dourado-claro)}
.submersos{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sub-card{border-radius:22px;padding:30px 28px;background:linear-gradient(158deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid color-mix(in srgb, var(--color-dourado) 22%, transparent);border-top-color:color-mix(in srgb, var(--color-dourado) 40%, transparent)}
.sub-card h3{font-size:22px;color:var(--dourado-claro)}
.sub-card > p{margin-top:9px;color:var(--color-bruma);font-size:15px}
.crm-tela{margin-top:22px;border-radius:14px;overflow:hidden;background:var(--color-abissal);border:1px solid rgba(255,255,255,.08)}
.crm-tela .top{display:flex;gap:7px;padding:10px 12px;background:var(--crm-barra)}
.crm-tela .top i{width:8px;height:8px;border-radius:50%;background:var(--crm-ponto)}
.funil{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px}
.funil .col{background:rgba(255,255,255,.04);border-radius:9px;padding:9px 8px;min-height:132px}
.funil .col b{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-cinza-mar);margin-bottom:8px}
.funil .col u{display:block;height:26px;border-radius:6px;background:rgba(255,255,255,.08);margin-bottom:7px;text-decoration:none}
.funil .col:nth-child(1) u{background:color-mix(in srgb, var(--color-turquesa) 28%, transparent)}
.funil .col:nth-child(2) u{background:color-mix(in srgb, var(--color-raso) 22%, transparent)}
.funil .col:nth-child(3) u{background:color-mix(in srgb, var(--color-ambar) 26%, transparent)}
.funil .col:nth-child(4) u{background:color-mix(in srgb, var(--color-verde-mar) 30%, transparent)}
.zap{margin-top:22px;border-radius:14px;padding:18px 16px;background:var(--color-abissal);border:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:10px;min-height:210px}
.zap div{max-width:82%;padding:9px 13px;font-size:13.5px;border-radius:14px;opacity:0;animation:surgir .5s ease forwards}
.zap .cli{align-self:flex-start;background:rgba(255,255,255,.08);color:var(--color-bruma);border-bottom-left-radius:4px}
.zap .bot{align-self:flex-end;background:color-mix(in srgb, var(--color-verde-mar) 22%, transparent);color:var(--zap-texto-bot);border-bottom-right-radius:4px}
.zap div:nth-child(1){animation-delay:.2s}.zap div:nth-child(2){animation-delay:1.2s}
.zap div:nth-child(3){animation-delay:2.2s}.zap div:nth-child(4){animation-delay:3.2s}
.zap div:nth-child(5){animation-delay:4.2s}
@keyframes surgir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nota-dado{margin-top:16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-cinza-frio)}

/* CTA + rodapé */
.cta-fim{background:var(--abissal);padding:10px 0 110px;text-align:center;color:#fff}
.cta-fim h2{font-size:clamp(26px,3.4vw,40px);max-width:22ch;margin:0 auto}
.cta-fim p{margin:16px auto 0;max-width:52ch;color:var(--color-maresia)}
/* CTA final: mesma peça neomórfica dos filtros, mas já em dourado (accent) e com ícone. */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:40px;margin-top:30px;cursor:pointer;
  font-family:var(--disp);font-weight:600;font-size:.92rem;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;
  color:var(--color-profundo);border:none;
  background:linear-gradient(145deg,var(--color-dourado-brilho),var(--color-dourado-escuro));
  box-shadow:-4px -4px 11px rgba(255,255,255,.10),6px 7px 16px rgba(0,0,0,.5),
             inset 1px 1px 1px rgba(255,255,255,.4),inset -1px -1px 2px rgba(0,0,0,.18);
  transition:transform .2s ease,box-shadow .2s ease}
.btn svg{width:17px;height:17px;flex:none;color:var(--color-profundo)}
.btn:hover{transform:translateY(-2px);
  box-shadow:-4px -4px 11px rgba(255,255,255,.12),9px 11px 24px rgba(0,0,0,.55),
             inset 1px 1px 1px rgba(255,255,255,.4),inset -1px -1px 2px rgba(0,0,0,.18)}
.btn:active{transform:none;
  box-shadow:inset 2px 2px 5px rgba(0,0,0,.3),inset -2px -2px 5px rgba(255,255,255,.35)}
.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}

@media (max-width:1020px){
  .nav ul{display:none}
  .marca,.antes-depois,.submersos{grid-template-columns:1fr}
  .impressos,.ads{grid-template-columns:repeat(2,1fr)}
  .area-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:680px){
  .wrap{padding:0 20px}
  .impressos,.ads,.aplicacoes{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .zap div{opacity:1}
}


/* Ajuste nosso, não do protótipo: a 360px as quatro colunas do funil não encolhiam abaixo da
   palavra do rótulo (`1fr` é `minmax(auto,1fr)`) e empurravam a página 19px para o lado. */
@media (max-width: 560px) {
  .sub-card { padding: 24px 18px; }
  .funil { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 10px; }
  .funil .col { padding: 8px 6px; }
  .funil .col b { letter-spacing: .04em; overflow-wrap: anywhere; }
}

}