@layer sections {
  /* ---------- 1. Seção do demo reel ----------
     Primeira coisa da página. O vídeo é o conteúdo, não um fundo: o véu
     escurece só o topo, para o logo do header passar, e a base, para a
     barra inferior. O miolo fica limpo. */
  .reel-section {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding-block: calc(var(--header-h) + var(--s-6)) var(--s-9);
  }

  @media (min-width: 1024px) {
    .reel-section {
      min-height: 100vh;
    }
  }

  .reel-section__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .reel-section__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .reel-section__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
  }

  .reel-section__inner .t-display {
    max-width: 100%;
  }

  /* Controle de pausa do reel. Exigência de acessibilidade para movimento
     automático acima de 5 segundos. */
  /* No canto superior direito, logo abaixo do header: embaixo colidiria
     com o botão "ver com som" da barra. */
  .reel-toggle {
    position: absolute;
    right: var(--gutter);
    top: calc(var(--header-h) + var(--s-4));
    z-index: 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-hi);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text);
    transition: border-color var(--dur-fast) var(--ease-out);
  }

  .reel-toggle:hover {
    border-color: var(--text);
  }

  .reel-toggle svg {
    width: 16px;
    height: 16px;
  }

  /* Véu mais leve no topo do que o padrão de imagem do projeto: aqui o vídeo
     é o produto, não cenário. Só a base escurece de verdade, o suficiente
     para o texto passar em contraste. */
  /* Escurece o topo para o logo do header passar e a base para o texto ler.
     O miolo do vídeo fica limpo — é o produto, não cenário. */
  .reel-section__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0) 20%
      ),
      linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.72) 28%,
        rgba(0, 0, 0, 0.2) 55%,
        rgba(0, 0, 0, 0) 72%
      );
  }

  /* Marcador do reel: só aparece enquanto não existe arquivo de vídeo.
     Serve para o bloco não parecer vazio nem esquecido. */
  .reel-slot {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--s-4);
    color: var(--text-3);
    text-align: center;
    padding: var(--s-6);
  }

  .reel-slot svg {
    width: 56px;
    height: 56px;
    opacity: 0.5;
  }

  .reel-slot p {
    font-size: var(--fs-sm);
    max-width: 34ch;
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-2);
  }

  @media (max-width: 479px) {
    .hero__cta .btn {
      width: 100%;
    }
  }

  .hero__scroll {
    position: absolute;
    left: 50%;
    bottom: var(--s-5);
    z-index: 2;
    transform: translateX(-50%);
    color: var(--text-3);
    display: none;
  }

  @media (min-width: 1024px) {
    .hero__scroll {
      display: block;
      animation: bob 2.4s var(--ease-in-out) infinite;
    }
  }

  @keyframes bob {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 6px); }
  }

  /* ---------- Faixa de indicadores ----------
     Gradiente vertical neutro, bem contido. Dá o efeito de faixa iluminada
     da referência sem clarear o site nem competir com a imagem. */
  .stats-band {
    position: relative;
    padding-block: var(--s-9);
    background: linear-gradient(
      180deg,
      var(--bg) 0%,
      #1c1c20 50%,
      var(--bg) 100%
    );
    border-top: 1px solid var(--line);
    /* Sem filete embaixo desde 2026-09-11: logo abaixo vem a curva da
       vereda atravessando a tela, e ela é a separação. Filete reto mais
       curva, um em cima do outro, liam como duas linhas sobrando. */
  }

  /* ---------- Para quem ----------
     Entrada por público, a partir da referência da Oz (2026-09-11): três
     cards, um para cada público do specs/site.md, cada um com o seu
     caminho até o WhatsApp — a mensagem já diz quem está chamando.

     Duas decisões que vêm de erro já cometido aqui:
     - O texto fica embaixo da imagem, nunca por cima. As capas são quadros
       de comercial com texto queimado; texto do site por cima vira sopa
       ilegível, e foi por isso que os cards de case perderam a legenda.
     - A imagem é preto e branco e ganha cor no hover. Duas capas se
       repetem com a faixa de cases logo abaixo; em P&B elas leem como
       outra coisa, e os cases continuam sendo a cor da página. */
  .publico__head {
    margin-bottom: var(--s-7);
  }

  .publico {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }

  @media (min-width: 900px) {
    .publico {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--s-6);
    }
  }

  .publico__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }

  .publico__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--s-3);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface);
  }

  .publico__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.15);
    transition:
      filter var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
  }

  /* A foto da equipe é 4:3 num quadro 16:9: o corte sai de cima e de baixo,
     e quem está em pé atrás perderia a cabeça com o corte centrado. */
  .publico__img--equipe {
    object-position: 50% 28%;
  }

  /* Marcas e eventos têm arquivo próprio em assets/img/publico/, já
     recortado em 16:9 — não precisam de ajuste de enquadramento aqui. */

  .publico__rotulo {
    color: var(--text-3);
  }

  .publico__titulo {
    color: var(--text);
    max-width: 30ch;
  }

  /* Empurrado para a base: os títulos quebram em alturas diferentes, e os
     três links precisam ficar alinhados na mesma linha. */
  .publico__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: auto;
    padding-top: var(--s-3);
    font-weight: 800;
    font-size: var(--fs-btn);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
  }

  .publico__link svg {
    width: 16px;
    height: 16px;
    flex: none;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  /* O card inteiro é clicável, mas o link continua sendo só o texto: o
     leitor de tela anuncia "Falar sobre minha marca", e não o card lido de
     ponta a ponta. */
  .publico__link::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* A cor volta com hover ou foco. É filtro, não movimento, então vale
     também com movimento reduzido. A leve aproximação da imagem e o
     empurrão da seta, esses não. */
  .publico__card:hover .publico__img,
  .publico__card:focus-within .publico__img {
    filter: grayscale(0) contrast(1);
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .publico__card:hover .publico__img {
      transform: scale(1.04);
    }

    .publico__card:hover .publico__link svg {
      transform: translateX(4px);
    }
  }

  /* ---------- Cases: vídeo em grade ----------
     Refeito duas vezes em 2026-09-11. Primeiro virou mosaico, a partir de
     referência trazida pelo cliente, no lugar da faixa de uma linha, dos
     filtros por categoria e do card só com a imagem. Na mesma tarde o
     cliente pediu "todos com o mesmo tamanho": ficou a grade de quadros
     iguais, colados, com o nome sobre o véu e o vídeo abrindo grande no
     modal.
     Em 16:9, o formato das próprias capas: nenhuma precisa ser recortada, a
     não ser a da Petrobras, que tem texto de campanha queimado.
     Duas colunas com quatro casos; a partir do quinto, três. */
  .cases__head {
    margin-bottom: var(--s-7);
  }

  /* Separados e com cantos redondos desde 2026-09-12, quando o site todo
     arredondou — eram colados, com costura de 3px e sem raio. O vão é o
     mesmo da grade de fotografia. O raio vai também no <article>, para o
     anel de foco do teclado seguir a curva do quadro. */
  .mosaico {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }

  @media (min-width: 900px) {
    .mosaico {
      gap: var(--s-6);
    }
  }

  .mosaico .case {
    border-radius: var(--r-md);
  }

  .mosaico .case__frame {
    aspect-ratio: 16 / 9;
  }

  @media (min-width: 768px) {
    .mosaico {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Os casos escondidos estão num comentário do HTML e não contam: com
     quatro no ar são duas colunas; quando o quinto sair do comentário, a
     grade passa sozinha a três. */
  @media (min-width: 1024px) {
    .mosaico:has(> .case:nth-child(5)) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Folga de 8% em cima e embaixo: a deriva das capas ao rolar, no
     reveal.js, desloca a imagem até 7% da própria altura. Com a imagem do
     tamanho exato do quadro, o fundo aparecia na borda a cada rolagem.
     O enquadramento vem de --foco e --zoom, postos no próprio <img>. */
  .mosaico .case__media {
    top: -8%;
    height: 116%;
    object-position: var(--foco, 50% 50%);
    transform-origin: var(--foco, 50% 50%);
    scale: var(--zoom, 1);
    transition: scale var(--dur-slow) var(--ease-out);
  }

  /* Véu na base, que deixa número e nome legíveis sobre qualquer capa.
     Sobe só até pouco mais da metade, para o alto da imagem ficar limpo.
     O meio é mais escuro do que na primeira versão: o rótulo do Redemix
     caía sobre a embalagem verde da capa e perdia contraste. Sombra em
     texto não é saída — o design.md proíbe —, então quem resolve é o véu. */
  .mosaico .case__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.6) 34%,
      rgba(0, 0, 0, 0) 62%
    );
  }

  .case__legenda {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-5);
  }

  .case__nicho {
    color: var(--text-2);
  }

  .case__titulo {
    font-family: var(--ff-text);
    font-weight: 800;
    font-size: var(--fs-h3);
    line-height: 1.2;
    color: var(--text);
  }

  @media (min-width: 1024px) {
    .case__legenda {
      padding: var(--s-6);
    }
  }

  /* O play só aparece em case com vídeo ligado. Um play que não toca nada
     era promessa quebrada no hover. Com data-vimeo, data-youtube ou
     data-video no <article>, ele aparece sozinho, no canto e sempre
     visível, como na referência. */
  .mosaico .case__play {
    display: none;
    inset: auto;
    top: var(--s-4);
    right: var(--s-4);
    opacity: 1;
  }

  .mosaico .case:is([data-vimeo], [data-youtube], [data-video]) {
    cursor: pointer;
  }

  .mosaico .case:is([data-vimeo], [data-youtube], [data-video]) .case__play {
    display: grid;
  }

  .mosaico .case__play svg {
    width: 36px;
    height: 36px;
  }

  /* Anel de foco por dentro do quadro: com 3px de costura, o anel por fora
     invadiria o vizinho. Só aparece em case com vídeo, o único focável. */
  .mosaico .case:focus-visible {
    outline-offset: -4px;
  }

  /* O card antigo crescia a imagem com `transform`, que o GSAP sobrescreve
     com a deriva — o hover nunca funcionou no desktop. Aqui a aproximação
     usa `scale`, propriedade separada, e convive com a deriva. Aproximar é
     movimento: com movimento reduzido, fica de fora. */
  @media (hover: hover) {
    .mosaico .case:hover .case__media {
      transform: none;
    }
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    /* Multiplica, e não substitui: a capa da Petrobras já está aproximada
       pelo --zoom, e trocar por 1.05 seco a faria recuar no hover. */
    .mosaico .case:hover .case__media {
      scale: calc(var(--zoom, 1) * 1.05);
    }
  }

  /* O botão encerra o mosaico, e logo depois vem a fotografia, a outra
     metade do portfólio: o respiro inferior cheio separaria demais as duas. */
  #cases {
    padding-bottom: var(--s-7);
  }

  /* ---------- Fotografia ----------
     Um caso por cliente, com o nome e o tipo embaixo da capa — nunca por
     cima: na fotografia a imagem é a peça inteira, sem véu. Retrato 4:5 e
     raio --r-md, 16px desde que o site arredondou em 2026-09-12. A capa
     abre a galeria do caso (js/galeria.js). */
  .fotos__head {
    margin-bottom: var(--s-7);
  }

  /* Flex e não grid: a última linha incompleta fica centrada. Com cinco
     casos em três colunas, os dois de baixo ficariam presos à esquerda. */
  .fotos {
    --colunas: 2;
    --vao: var(--s-4);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-6) var(--vao);
  }

  .fotos > .foto {
    flex: 0 0 calc((100% - (var(--colunas) - 1) * var(--vao)) / var(--colunas));
    min-width: 0;
  }

  @media (min-width: 900px) {
    .fotos {
      --colunas: 3;
      --vao: var(--s-6);
      gap: var(--s-8) var(--vao);
    }
  }

  /* A capa é um botão: abre a galeria do caso (js/galeria.js). */
  .foto__abrir {
    display: block;
    width: 100%;
    margin-bottom: var(--s-4);
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: none;
    color: inherit;
    cursor: pointer;
  }

  .foto__quadro {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface);
  }

  .foto__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale var(--dur-slow) var(--ease-out);
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .foto:hover .foto__img {
      scale: 1.04;
    }
  }

  .foto__legenda {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
  }

  .foto__titulo {
    font-weight: 800;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--text);
  }

  .foto__meta {
    font-size: var(--fs-sm);
    color: var(--text-3);
  }

  .fotos__mais {
    justify-content: center;
    margin-top: var(--s-8);
  }

  /* ---------- Processo ---------- */
  .steps {
    display: flex;
    flex-direction: column;
    gap: var(--s-7);
  }

  .step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-5);
    align-items: start;
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
  }

  .step__num {
    color: var(--text-3);
    line-height: 0.8;
  }

  /* ---------- Quem somos ----------
     Dois blocos: a foto da equipe ao lado do texto institucional, e abaixo
     o time no layout assimétrico do projeto. */
  .sobre__topo {
    display: grid;
    gap: var(--s-7);
    align-items: center;
  }

  /* 900px e não 1024: em janela de notebook a foto e o texto já cabem lado
     a lado, e empilhar cedo demais fazia a seção parecer quebrada. */
  @media (min-width: 900px) {
    .sobre__topo {
      grid-template-columns: 5fr 6fr;
      gap: var(--s-8);
    }
  }

  @media (min-width: 1280px) {
    .sobre__topo {
      gap: var(--s-10);
    }
  }

  .sobre__texto {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
  }

  .sobre__time {
    margin-top: var(--rhythm);
  }

  /* 4:3 e não 21:9: a foto da equipe é quadrada na origem, e um corte
     panorâmico decapitaria quem está em pé atrás. */
  .team-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
  }

  .team-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Mesmo tratamento dos retratos: o site é monocromático. */
    filter: grayscale(1);
  }

  .member__frame {
    position: relative;
    aspect-ratio: 4 / 5;
    width: 100%;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface);
  }

  /* Véu na base para o nome ler. Sem ele seria texto sobre foto sem
     proteção, que o design.md proíbe. */
  .member__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.35) 22%,
      rgba(0, 0, 0, 0) 48%
    );
  }

  .member__nome {
    position: absolute;
    left: var(--s-5);
    right: var(--s-5);
    bottom: var(--s-4);
    z-index: 2;
    font-family: var(--ff-display);
    font-size: clamp(2rem, 1.5rem + 1.6vw, 2.5rem);
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text);
  }

  /* ---------- CTA final ---------- */
  .cta {
    position: relative;
    text-align: center;
    overflow: hidden;
  }

  .cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-6);
  }

  .cta .t-h1 {
    max-width: 14ch;
  }

  .cta__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-5);
    margin-top: var(--s-3);
  }

  /* ---------- Instagram ----------
     Faixa colada de ponta a ponta, mesma lógica dos cases. Em preto e
     branco, porque a interface do site não tem cor: quem dá cor é o
     trabalho, e aqui o bloco é assinatura, não vitrine. */
  .ig {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  @media (min-width: 600px) {
    .ig {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .ig {
      grid-template-columns: repeat(8, 1fr);
    }
  }

  .ig__item {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--surface);
  }

  .ig__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.75;
    transition: opacity var(--dur-base) var(--ease-out),
      filter var(--dur-base) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
  }

  .ig__item:hover img,
  .ig__item:focus-visible img {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.05);
  }

  .ig__video {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    color: var(--text);
    pointer-events: none;
  }

  .ig__video svg {
    width: 14px;
    height: 14px;
  }

  /* ---------- Rodapé ---------- */
  .footer {
    border-top: 1px solid var(--line);
    padding-block: var(--s-8) var(--s-7);
    font-size: var(--fs-sm);
    color: var(--text-3);
  }

  .footer__top {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
    padding-bottom: var(--s-7);
  }

  @media (min-width: 768px) {
    .footer__top {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--s-8);
    }
  }

  /* Uma coluna no celular, duas a partir de 480px. Lado a lado numa tela de
     360 ou 390, a coluna do e-mail empurrava a grade 33px para fora e o
     overflow-x do body cortava o endereço no meio. */
  .footer__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6) var(--s-8);
  }

  @media (min-width: 480px) {
    .footer__cols {
      grid-template-columns: repeat(2, auto);
    }
  }

  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-3);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
  }

  .footer a:hover {
    color: var(--text);
  }

  .footer .logo img {
    height: 32px;
  }

  /* ---------- Animação de entrada ---------- */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
  }

  .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
  }

  /* Bloco que contém um título acendendo letra por letra: só esmaece, sem
     deslocamento. Os 24px do bloco somados às letras acendendo liam como
     tremida, não como entrada. A classe é posta pelo reveal.js. */
  .reveal--fade {
    transform: none;
  }

  /* ---------- Slogan acendendo ----------
     O slogan nasce apagado, e não inteiro: a classe `acende` é posta por
     um script de uma linha no <head>, antes da primeira pintura. Sem isso
     ele apareceria aceso, apagaria quando o JS partisse as letras e só
     então acenderia — um piscar logo na primeira tela, que é a mais cara
     de uma página que recebe tráfego pago.
     A animação de 2,5s é a rede de segurança: se o JS não rodar, o CSS
     acende o slogan sozinho. Quando o JS assume, `.letras` desliga a rede
     e as letras passam a carregar o apagado, uma a uma. */
  .acende .t-display {
    opacity: 0.12;
    animation: acende-sozinho 0s 2.5s forwards;
  }

  .acende .t-display.letras {
    opacity: 1;
    animation: none;
  }

  @keyframes acende-sozinho {
    to {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      transform: none;
    }

    .reveal.is-in {
      transition: opacity 150ms linear;
    }

    .marquee__track {
      animation: none;
    }

    .hero__scroll {
      animation: none;
    }
  }
}

/* ---------- Impressão / PDF ----------
   Fora de @layer de propósito: precisa vencer todas as camadas.
   Sem isto o PDF sai em branco — o navegador descarta fundos na impressão
   e o site inteiro é texto branco sobre preto. */
@media print {
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* As animações de entrada deixam tudo invisível até a rolagem, que não
     existe na impressão. */
  .reveal,
  .letra,
  .t-display {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Elementos fixos repetiriam em toda página. */
  .header,
  .float-wa,
  .menu,
  .modal,
  .hero__scroll,
  .reel-toggle,
  .skip-link,
  /* O grão é textura de tela. Impresso, vira sujeira cinza em toda
     página e ainda gasta tinta à toa. */
  .grao {
    display: none !important;
  }

  .reel-section {
    min-height: 70vh !important;
    padding-top: var(--s-9) !important;
  }

  .section,
  .stats-band {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .case,
  .member,
  .team-photo,
  .step,
  .service {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .marquee__track {
    animation: none !important;
    transform: none !important;
  }
}

/* Modo de impressão: nenhuma animação pode ficar rodando, senão o navegador
   nunca considera a página estável e a geração de PDF trava. */
.sem-animacao *,
.sem-animacao *::before,
.sem-animacao *::after {
  animation: none !important;
  transition: none !important;
}

.sem-animacao .reveal,
.sem-animacao .letra {
  opacity: 1 !important;
  transform: none !important;
}

/* Pré-visualização com ?anim=1: devolve as animações que o movimento
   reduzido do sistema desliga. Fora de @layer e com !important porque
   precisa vencer o bloco @media (prefers-reduced-motion: reduce). */
.forcar-animacao .marquee__track {
  animation: marquee 42s linear infinite !important;
}

/* No modo vivo o laço é do faixa.js; a animação de CSS forçada acima
   correria por cima dele. */
.forcar-animacao .marquee--viva .marquee__track {
  animation: none !important;
}

.forcar-animacao .hero__scroll {
  animation: bob 2.4s var(--ease-in-out) infinite !important;
}

.forcar-animacao .reveal {
  opacity: 0;
  transform: translateY(24px);
}

.forcar-animacao .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Precisa de dois seletores de classe para vencer `.forcar-animacao .reveal`
   acima, que tem especificidade maior que `.reveal--fade` sozinho. */
.forcar-animacao .reveal--fade {
  transform: none;
}

.forcar-animacao .header .logo img {
  animation: logo-abre 900ms var(--ease-out) 150ms both !important;
}