/* ============================================================================
   fd-nobru.css · base Fred Design no mediakit do Nobru (21/09/2026)
   Entra POR ÚLTIMO. A peça do Codex não é reescrita: o encaixe na escala roda nas
   folhas originais (build/encaixe.cjs) e aqui fica só o que é estrutural.
   Blocos escopados por faixa: override sem media query vence a da peça e vaza pro celular.
   ============================================================================ */

:root{
  --accent:var(--blue);--accent-deep:#155ae5;--accent-soft:#d7f2ff;
  --gas-a:color-mix(in srgb,var(--accent) 30%,transparent);
  --gas-b:color-mix(in srgb,var(--accent-deep) 55%,transparent);
  --gas-c:color-mix(in srgb,var(--accent-soft) 16%,transparent);
  --gas-rest:.618;--gas-live:.854;--gas-blur:55px;
  --gas-d1:13s;--gas-d2:21s;--gas-d3:8s;--lg-ring:2px;
  --fd-section:89px;--fd-head:34px;--fd-block:55px;
}
:root[data-theme=light]{--accent-deep:#0a4f86;--accent-soft:#57bdff}
@media(max-width:986px){:root{--fd-section:55px;--fd-head:21px;--fd-block:34px}}

/* ---------------------------------------------------------------------------
   1 · RITMO: um vão só entre seções (89 desktop, 55 celular).
   A peça somava o padding de baixo de uma seção com o de cima da próxima: 165 a 193 px.
   --------------------------------------------------------------------------- */
#app>.section{padding-top:0!important;padding-bottom:0!important;margin-top:var(--fd-section);border-top:0;
  scroll-margin-top:calc(var(--header) + 34px)}
#app>.section.contact{padding-bottom:34px!important}
#app>.section>.wrap>:first-child{margin-top:0}
#app>.section>.wrap>:last-child{margin-bottom:0}
.section-head{margin-bottom:var(--fd-head)}
.originals .section-head{margin-bottom:var(--fd-head)}
.source{margin-top:21px}

/* ---------------------------------------------------------------------------
   2 · TRACKING por tamanho (Apple): display grande aperta, caixa alta miúda abre
   --------------------------------------------------------------------------- */
h1,h2,h3,.hero-watermark,.contact-mark,.reach-statement>strong,.live-number>strong,.live-caption strong,
.live-pair strong,.show-metric strong,.country>strong,.format-proof strong,.project-feature h3,.brand-stats strong,
.case-proof strong,.milestones span,.hero-rail strong{letter-spacing:-.013em}

/* ---------------------------------------------------------------------------
   3 · COLUNAS nas razões de φ (só onde a peça usa duas colunas de verdade)
   --------------------------------------------------------------------------- */
@media(min-width:1151px){
  .universe-grid{grid-template-columns:1fr 1.272fr 1fr;gap:21px}
  .reach-layout{grid-template-columns:1.618fr 1fr;gap:55px}
  .live-layout{grid-template-columns:1.618fr 1fr;gap:55px}
  .audience-panel{grid-template-columns:1fr 1.618fr;gap:55px;padding:34px}
  .project-grid{grid-template-columns:1fr 1.272fr;gap:21px}
}
/* painel de audiência: a coluna do texto ficava com a metade de baixo vazia.
   O dado do país desce até a base e alinha com a barra de gênero da coluna do gráfico. */
@media(min-width:801px){
  .audience-intro{display:flex;flex-direction:column;justify-content:space-between;gap:34px}
  .audience-intro .country{margin-top:0}
}

/* ---------------------------------------------------------------------------
   4 · ROSTO: card de formato. O vídeo ocupava o card inteiro e o parágrafo caía
   em cima do rosto do Nobru. Agora o vídeo fica na coluna áurea da direita
   (rosto perto do olho da espiral) e o texto na coluna oposta.
   --------------------------------------------------------------------------- */
@media(min-width:801px){
  .format-stack-card>video{left:38.2%;width:61.8%;object-position:50% 34%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 38.2%);mask-image:linear-gradient(90deg,transparent,#000 38.2%)}
  .format-stack-card .format-shade{background:linear-gradient(90deg,#071326 0,#071326 38.2%,#07132699 61.8%,#07132633)}
  .format-stack-card .format-copy{max-width:58%}
  :root[data-theme=light] .format-stack-card .format-shade{background:linear-gradient(90deg,#071326 0,#071326 38.2%,#07132699 61.8%,#07132633)}
}
@media(max-width:800px){
  .format-stack-card>video{height:144px;bottom:auto;object-position:50% 21%;
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
  .format-stack-card .format-shade{background:linear-gradient(180deg,#07132633 0,#071326 144px)}
  .format-stack-card .format-copy{padding-top:144px}
}
/* cena de grupo (balão, copa): faixa das cabeças sempre à vista */
.universe-card>video,.reach-film>video,.show-card>video{object-position:50% 21%}

/* ---------------------------------------------------------------------------
   5 · MARCAS: logo cru onde o filtro branco do motor apaga o desenho
   --------------------------------------------------------------------------- */
.marquee-group img.logo-cru,.cloud-brand img.logo-cru{filter:none!important;opacity:.92}
.marquee-group img{width:auto;height:27px;max-width:113px;flex:none}
.marquee-group>*{flex:none}
.brand-cloud>small{font-size:13px;letter-spacing:.08em}

/* ---------------------------------------------------------------------------
   6 · LIQUID GAS em todo card e botão (camada atrás do conteúdo; o motor mantém raio, fundo e padding)
   --------------------------------------------------------------------------- */
.lg-card,.lg-btn{isolation:isolate}
.lg-pos{position:relative}
.lg-gas{position:absolute!important;inset:0;z-index:-2;border-radius:inherit;overflow:hidden;pointer-events:none;
  display:block!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;transform:none!important;
  opacity:var(--gas-rest);transition:opacity 610ms ease}
/* a camada é um <span>: regras do motor como ".format-tabs button span{border-radius:50%}" engolem o span,
   e filho absolute de grid com align-items:center encolhe pro conteúdo mesmo com inset:0 */
:is(.lg-card,.lg-btn)>span.lg-gas{border-radius:inherit!important;align-self:stretch;justify-self:stretch;min-width:0;min-height:0;font-size:0;letter-spacing:0}
.lg-gas i{position:absolute;display:block;border-radius:50%;filter:blur(var(--gas-blur));will-change:transform;
  animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-play-state:paused}
.lg-gas i:nth-child(1){width:61.8%;height:76.4%;left:-14.6%;top:-23.6%;background:var(--gas-a);animation-name:lg-gas-a;animation-duration:var(--gas-d1)}
.lg-gas i:nth-child(2){width:50%;height:85.4%;right:-14.6%;top:9%;background:var(--gas-b);animation-name:lg-gas-b;animation-duration:var(--gas-d2)}
.lg-gas i:nth-child(3){width:38.2%;height:61.8%;left:23.6%;bottom:-23.6%;background:var(--gas-c);animation-name:lg-gas-c;animation-duration:var(--gas-d3)}
@keyframes lg-gas-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(38.2%,23.6%,0) scale(1.236)}}
@keyframes lg-gas-b{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-38.2%,-23.6%,0) scale(1.146)}}
@keyframes lg-gas-c{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(23.6%,-38.2%,0) scale(1.382)}}

@media(hover:hover) and (pointer:fine){
  .lg-card:hover>.lg-gas,.lg-btn:hover>.lg-gas{opacity:1}
  .lg-card:hover>.lg-gas i,.lg-btn:hover>.lg-gas i{animation-play-state:running}
}
.lg-card:focus-within>.lg-gas,.lg-btn:focus-visible>.lg-gas{opacity:1}
.lg-card:focus-within>.lg-gas i,.lg-btn:focus-visible>.lg-gas i{animation-play-state:running}
@media(hover:none){.lg-card.is-on>.lg-gas i,.lg-btn.is-on>.lg-gas i{animation-play-state:running}}
.lg-live.is-on>.lg-gas{opacity:var(--gas-live)}
.lg-live.is-on>.lg-gas i{animation-play-state:running}
.lg-paused .lg-gas i,.reduce-motion .lg-gas i{animation-play-state:paused!important}

/* botão: o vidro e o brilho são os do motor (.lq-glass z-2, .lq-shine z-1); o gás entra entre os dois */
.lg-btn{--gas-blur:13px;--gas-d1:5s;--gas-d2:8s;--gas-d3:3s;-webkit-tap-highlight-color:transparent}
.lg-btn>.lg-gas{opacity:.8}
.lg-btn:not(:has(>.lq-glass)){position:relative}
/* aba selecionada tem fundo claro sólido: gás fora, senão suja o texto escuro */
.tabs button[aria-selected=true]>.lg-gas{opacity:0}

/* card com vídeo cobrindo o fundo: gás só no contorno, nunca véu sobre a imagem */
.lg-card.lg-ring>.lg-gas{inset:0;z-index:0;opacity:1;
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);padding:var(--lg-ring)!important;
  --gas-a:color-mix(in srgb,var(--accent) 90%,transparent);
  --gas-b:color-mix(in srgb,var(--accent-deep) 70%,transparent);
  --gas-c:color-mix(in srgb,var(--accent-soft) 100%,transparent);--gas-blur:34px}
.lg-card.lg-ring.is-on>.lg-gas i{animation-play-state:running}

/* tema claro: card claro vira anel (miolo limpo), regra do Fred */
:root[data-theme=light] .lg-card:not(.lg-ring)>.lg-gas{opacity:1;padding:var(--lg-ring)!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  --gas-a:color-mix(in srgb,var(--accent) 90%,transparent);
  --gas-b:color-mix(in srgb,var(--accent-deep) 70%,transparent);
  --gas-c:color-mix(in srgb,var(--accent-soft) 100%,transparent);--gas-blur:34px}
:root[data-theme=light] .lg-card.is-on>.lg-gas i{animation-play-state:running}

@media(prefers-reduced-motion:reduce){.lg-gas i{animation:none!important}}

/* ---------------------------------------------------------------------------
   7 · TOQUE: alvo de 44 px no celular sem crescer a tinta (halo invisível)
   --------------------------------------------------------------------------- */
@media(max-width:986px){
  .tool,.round,.nav-contact,.tabs button,.text-link,.text-button,footer a,footer button,.contact-person a{position:relative}
  .tool::after,.round::after,.nav-contact::after,.text-link::after,.text-button::after,.film-link::after,footer a::after,footer button::after,.contact-person a::after,
  .tabs button::before{content:"";position:absolute;inset:-14px 0 -14px -13px;border-radius:inherit}
  .city-list button{min-height:44px}
  .method summary{min-height:44px;align-items:center}
}

/* ---------------------------------------------------------------------------
   8 · LINHAS SEM SOBRA
   --------------------------------------------------------------------------- */
html .section :is(p,li,small,h2,h3,figcaption){text-wrap:balance}
html .section :is(p.lead,p.source){text-wrap:pretty}

/* ---------------------------------------------------------------------------
   9 · TINTA dos títulos: o degradê em background-clip:text só pinta dentro da caixa da linha.
   Com entrelinha 1 o circunflexo de AUDIÊNCIA e o agudo de PRÓXIMO saíam da caixa e eram cortados.
   O padding devolve a área ao degradê e a margem negativa mantém o título no lugar.
   --------------------------------------------------------------------------- */
.section-head h2,.contact h2{padding-top:13px;margin-top:-13px}
@media(max-width:800px){.section-head h2,.contact h2{padding-top:8px;margin-top:-8px}}

/* títulos em degrau (o clamp fluido parava entre 55 e 70) */
@media(min-width:1400px){.section-head h2{font-size:70px}}
@media(min-width:1151px) and (max-width:1399px){.section-head h2{font-size:55px}}
@media(max-width:560px){.section-head h2{font-size:34px;line-height:1.128}}
.skip{font-size:17px}
.round{padding:0}
@media(min-width:1600px){#header{padding-inline:89px}}
@media(min-width:1151px) and (max-width:1599px){#header{padding-inline:55px}}
.format-tabs button{letter-spacing:.034em}
.format-tabs button span{letter-spacing:.08em}

/* hero: os rótulos subiram para 13 px e passaram da caixa. A caixa cresce, o desenho fica onde estava. */
.scroll-hint{white-space:nowrap}
@media(min-width:801px){.hero-rail{grid-template-columns:repeat(3,1fr) 89px}}
/* a anotação girada saía 21 px da caixa-mãe: a mãe anda 34 px para a direita e devolve o espaço em padding,
   a filha entra (right:13px). Posição na tela igual, caixa sem transbordo. */
.hero-floating{white-space:nowrap;margin-right:-34px;padding-right:34px}
.hero-floating>div{right:13px}
/* bug do motor: a entrada usa a propriedade translate, e o modo "Pausar animações" só zerava transform.
   Com animação pausada os títulos ficavam 24 px deslocados até entrar na tela. */
.reduce-motion .reveal{translate:0 0!important}
/* só QA (?assentado): mede a página com todas as entradas já assentadas */
.fd-assentado .reveal{translate:0 0!important;opacity:1!important;transition:none!important}

/* logo empilhado (símbolo em cima do nome) precisa de mais altura para o nome ler */
.marquee-group img[alt="Natura"]{height:43px;max-height:43px}
.marquee-group img[alt="Trident"]{height:38px;max-height:38px}
.cloud-brand img[alt="Natura"]{height:48px}
.cloud-brand img[alt="Trident"]{height:43px}

/* ---------------------------------------------------------------------------
   10 · NUVEM DE MARCAS: mesma esfera do Olkabone e do Bistecone (a matemática está no remendo do motion.js).
   O motor tinha pointer-events:none na nuvem, então o mouse nunca chegava nela.
   --------------------------------------------------------------------------- */
.brand-cloud{pointer-events:auto;height:560px;touch-action:pan-y;cursor:grab}
.cloud-brand{pointer-events:none}
.cloud-brand img{width:auto;height:34px;max-height:none;max-width:144px}
.cloud-brand>span{font-size:27px}
@media(max-width:1150px){.brand-cloud{height:440px}}
/* celular: o raio é 44% do menor lado, então a altura menor encolhe a esfera e as marcas da borda param de ser cortadas */
@media(max-width:800px){.brand-cloud{height:300px;max-width:none}.cloud-brand img{height:21px;max-width:89px}.cloud-brand>span{font-size:17px}.cloud-brand img[alt="Natura"]{height:34px}.cloud-brand img[alt="Trident"]{height:27px}}

/* ---------------------------------------------------------------------------
   11 · CAMPO DE BOLAS na base do rodapé (build/fd-bolas.js). A faixa não captura clique: o mouse é lido na janela.
   --------------------------------------------------------------------------- */
.fd-bolas{position:relative;width:100%;height:377px;margin-top:34px;pointer-events:none;overflow:visible}
/* folga de 377 px acima da faixa: bola arremessada voa por cima do rodapé (o canvas não captura clique) */
.fd-bolas canvas{position:absolute;left:0;right:0;bottom:0;top:-377px;width:100%;height:calc(100% + 377px);display:block;pointer-events:none}
@media(max-width:986px){.fd-bolas{height:233px;margin-top:0}.fd-bolas canvas{top:-233px;height:calc(100% + 233px)}}
@media print{.fd-bolas{display:none}}

/* ---------------------------------------------------------------------------
   12 · ROSTO NO CELULAR: case realme, card âncora e cards de formato.
   No ar, o texto ficava EM CIMA do rosto do Nobru (medido: 54% do rosto visível, 27% sob texto).
   Regra da skill quando reprova: muda o layout. Mídia em cima, texto embaixo, em fundo sólido.
   Os cards de formato cresceram: com a letra legível o conteúdo passava dos 424 px fixos e era cortado.
   --------------------------------------------------------------------------- */
@media(max-width:800px){
  .case-layout{height:auto!important;display:flex;flex-direction:column;background:#061022;padding:0!important;gap:0}
  .case-film{position:relative;inset:auto;flex:none;height:233px;z-index:0}
  .case-film:after{background:linear-gradient(180deg,#061022d9 0,#06102200 38.2%),linear-gradient(0deg,#061022 0,#06102200 45%)}
  .case-copy{position:relative!important;inset:auto!important;margin:0!important;width:100%;max-width:none;padding:21px 21px 34px;background:#061022}

  .format-anchor{display:flex;flex-direction:column}
  .format-anchor>video{position:relative;inset:auto;flex:none;height:233px;z-index:0;opacity:1}
  .format-anchor .anchor-veil{inset:0 0 auto;height:233px;z-index:1;background:linear-gradient(0deg,#0b1930 0,#0b193000 45%)}
  .format-anchor .anchor-mark{z-index:2}
  .anchor-copy{max-width:none;padding:21px 21px 34px}

  .format-stack{height:665px}
  .format-stack-card{height:644px}
  .format-stack-card>video{height:233px}
  .format-stack-card .format-shade{background:linear-gradient(180deg,#07132600 0,#07132600 89px,#071326 233px)}
  .format-stack-card .format-copy{padding-top:233px}
}

/* ---------------------------------------------------------------------------
   13 · ROSTO NO DESKTOP: case e card âncora.
   A caixa de cabeça do clipe realme é a união de 13 quadros (ele se mexe muito): ocupa 65% da altura do vídeo.
   Case: caixa mais alta (610) para a cabeça caber inteira com folga. Em telas médias a coluna do texto encolhe
   para não encostar no rosto. Âncora: a caixa era 3,4:1 e cortava o cabelo em qualquer posição. O vídeo vai
   para a coluna áurea da direita (61,8%), onde cabe inteiro, e o texto fica na coluna oposta.
   --------------------------------------------------------------------------- */
@media(min-width:1151px){.case-layout{height:610px}.case-film>video{object-position:100% 0%!important}}
@media(min-width:801px) and (max-width:1150px){.case-layout{height:530px}.case-copy{max-width:46%}.case-film>video{object-position:100% 0%!important}.case-film-top{top:13px}.case-film-top img{width:89px}}
@media(min-width:801px){
  .format-anchor{min-height:377px}
  .format-anchor>video{left:38.2%;width:61.8%;object-position:50% 34%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);mask-image:linear-gradient(90deg,transparent,#000 34%)}
  .format-anchor .anchor-veil{background:linear-gradient(90deg,#0b1930 0,#0b1930 38.2%,#0b193066 61.8%,#0b193000 89%)}
  .anchor-copy{max-width:50%}
}

/* toque de 44 px nos links soltos do fechamento: área real (padding) com margem negativa, sem mexer no layout */
@media(max-width:986px){
  .contact-person a,.closing-bar a,.closing-bar button,footer a{display:inline-block;padding-block:21px;margin-block:-21px}
  #app>#universo{margin-top:34px}          /* a régua do hero já deixa 22 px embaixo: 34 + 22 fecha em 55 */
}
@media(max-width:1100px){.hero-floating{margin-right:-55px;padding-right:55px}.hero-floating>div{right:34px!important}}

/* tablet em pé (561 a 800): a faixa de 233 px em caixa larga cortava a cabeça (83%). Faixa de 377 e vídeo alinhado pelo topo. */
@media(min-width:561px) and (max-width:800px){
  .case-film{height:377px}
  .case-film>video{object-position:100% 0%!important}
  .format-anchor>video{height:377px;object-position:50% 0%!important}
  .format-anchor .anchor-veil{height:377px}
}
/* tablet: primeiro conteúdo a 34 px do menu (padrão de celular da skill; estava a 55) */
@media(max-width:986px){.hero-content{padding-top:34px}}

/* ---------------------------------------------------------------------------
   14 · LOGOS OFICIAIS: altura pelo peso óptico. Wordmark muito largo (Casas Bahia 7:1, Flexform 7:1) com a mesma
   altura dos outros ficaria gigante, e espremido em max-width ficaria ilegível. Cada um tem a sua.
   --------------------------------------------------------------------------- */
.marquee-group img{max-width:170px}
.marquee-group img[alt="Casas Bahia"]{height:19px}
.marquee-group img[alt="Flexform"]{height:21px}
.marquee-group img[alt="AXE"]{height:21px}
.marquee-group img[alt="CLEAR"]{height:25px}
.marquee-group img[alt="LG"]{height:30px;max-height:30px}
.marquee-group img[alt="iFood"]{height:38px;max-height:38px}
.cloud-brand img{max-width:170px}
.cloud-brand img[alt="Casas Bahia"]{height:21px}
.cloud-brand img[alt="Flexform"]{height:24px}
.cloud-brand img[alt="AXE"]{height:24px}
.cloud-brand img[alt="CLEAR"]{height:30px}
.cloud-brand img[alt="LG"]{height:34px}
.cloud-brand img[alt="iFood"]{height:43px}
@media(max-width:800px){
  .cloud-brand img{max-width:113px}
  .cloud-brand img[alt="Casas Bahia"]{height:15px}
  .cloud-brand img[alt="Flexform"]{height:16px}
  .cloud-brand img[alt="AXE"]{height:16px}
  .cloud-brand img[alt="CLEAR"]{height:20px}
  .cloud-brand img[alt="LG"]{height:23px}
  .cloud-brand img[alt="iFood"]{height:29px}
  .marquee-group img{max-width:144px}
}

/* ---------------------------------------------------------------------------
   15 · PROJETOS: filmagem real de cada propriedade (pedido do Fred, 21/09/2026).
   Mesmo desenho dos cards de formato: vídeo na coluna da direita (61,8% no card grande, 50% nas faixas), com a borda
   esquerda dissolvida, e texto na coluna oposta em fundo sólido. Com o vídeo no card inteiro, o time da Fluxo caía
   debaixo do título e as faixas de 4,4:1 só mostravam uma tira do quadro.
   O motor exibia o vídeo a 55% com hue-rotate: certo pro gás genérico, errado pra registro real.
   --------------------------------------------------------------------------- */
.project-feature video,.project-list article>video{opacity:1;filter:brightness(1.12) saturate(1.08)}
.project-feature video[data-src*="liquid"],.project-feature video[data-src*="smoke"],
.project-list article>video[data-src*="liquid"],.project-list article>video[data-src*="smoke"]{opacity:.58;filter:none}
.project-feature video:not([data-src*="liquid"]):not([data-src*="smoke"]){left:38.2%;width:61.8%;object-position:40% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 38.2%);mask-image:linear-gradient(90deg,transparent,#000 38.2%)}
.project-feature:after{background:linear-gradient(90deg,#0b1830 0,#0b1830 34%,#0b183080 55%,#0b18301a 100%),linear-gradient(0deg,#070e1bb3 0,#070e1b00 34%)}
.project-feature p{max-width:340px}
.project-list article>video:not([data-src*="liquid"]):not([data-src*="smoke"]){left:50%;width:50%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);mask-image:linear-gradient(90deg,transparent,#000 34%)}
.project-list article:before{background:linear-gradient(90deg,#071225 0,#071225 46%,#07122566 72%,#0712251a 100%)}
.project-list article>video[data-src*="apeludos"]{object-position:60% 22%}
.project-list article>video[data-src*="burger"]{object-position:50% 46%}
.project-list article>video[data-src*="copanobru"]{object-position:38% 40%}
.project-list p,.project-list small{max-width:46%}
/* crédito do registro: em cima, à direita, dentro da área do vídeo (embaixo colidia com a linha de rodapé do card) */
.fd-credito{position:absolute;right:13px;top:8px;z-index:1;font:13px/1.272 Mono,monospace;letter-spacing:.03em;color:#e3eeffcc;
  text-align:right;pointer-events:none;max-width:44%;text-shadow:0 1px 8px #000c}
.project-feature .fd-credito{right:21px;top:21px;max-width:50%}
@media(max-width:800px){
  /* celular: imagem em faixa no topo, texto embaixo (mesma regra dos outros cards) */
  .project-feature{padding-top:233px}
  .project-feature video:not([data-src*="liquid"]):not([data-src*="smoke"]){left:0;width:100%;height:233px;bottom:auto;object-position:55% 40%;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
  .project-feature:after{background:linear-gradient(180deg,#0f234100 0,#0f234100 144px,#0f2341 233px)}
  .project-feature .fd-credito{top:13px;right:13px;max-width:61.8%}
  .project-list article>video:not([data-src*="liquid"]):not([data-src*="smoke"]){left:55%;width:45%}
  .project-list article:before{background:linear-gradient(90deg,#071225 0,#071225 55%,#07122566 100%)}
  .project-list p,.project-list small{max-width:55%}
  .project-list .fd-credito{display:none}
}