@layer components {
  /* ---------- Botões ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    padding-inline: var(--s-5);
    font-family: var(--ff-text);
    font-weight: 800;
    font-size: var(--fs-btn);
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    /* Em pílula desde 2026-09-12, quando o site arredondou. */
    border-radius: var(--r-pill);
    transition: transform var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
  }

  @media (min-width: 1024px) {
    .btn {
      min-height: 52px;
      padding-inline: var(--s-6);
    }
  }

  .btn svg {
    width: 16px;
    height: 16px;
    flex: none;
  }

  /* Único elemento branco sólido da tela. Escasso por definição. */
  /* Verde-buriti com texto preto: 8,5:1. Era branco até 2026-09-11, quando
     o verde entrou como o único acento do site — e o botão principal é o
     primeiro lugar onde ele aparece. */
  .btn--primary {
    background: var(--acento);
    color: var(--bg);
  }

  .btn--primary:hover {
    transform: translateY(-2px);
  }

  .btn--secondary {
    border: 1px solid var(--line-hi);
    color: var(--text);
  }

  .btn--secondary:hover {
    border-color: var(--text);
    transform: translateY(-2px);
  }

  .btn--text {
    position: relative;
    min-height: auto;
    padding: 0;
    color: var(--text);
    letter-spacing: 0.08em;
  }

  .btn--text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .btn--text:hover::after {
    transform: scaleX(1);
  }

  /* ---------- Rótulo de seção com a curva da marca ---------- */
  .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }

  .eyebrow::before {
    content: "";
    width: 24px;
    height: 8px;
    flex: none;
    background: var(--text-3);
    mask: url("../assets/svg/curva.svg") center / contain no-repeat;
    -webkit-mask: url("../assets/svg/curva.svg") center / contain no-repeat;
  }

  /* Rótulo que pode quebrar em duas linhas. O do topo, "Produtora
     audiovisual em Salvador", passa dos 320px úteis de uma tela de 360 —
     sem nada no mesmo lugar, quebrar é melhor que estourar a tela. */
  .eyebrow--quebra .t-label {
    white-space: normal;
  }

  /* ---------- Header ---------- */
  .header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
    height: var(--header-h);
    display: flex;
    align-items: center;
    transition: background-color var(--dur-fast) var(--ease-out),
      backdrop-filter var(--dur-fast) var(--ease-out);
  }

  .header.is-stuck {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }

  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    width: 100%;
  }

  .logo {
    display: block;
    flex: none;
  }

  .logo img {
    height: 24px;
    width: auto;
  }

  @media (min-width: 1024px) {
    .logo img {
      height: 28px;
    }
  }

  /* Entrada da logo: um recorte que abre da esquerda para a direita, uma
     vez, no carregamento. É a mesma gramática do slogan, que já entra sob
     máscara — a marca aparece sendo revelada, não piscando.
     Feita em CSS puro e não em JS de propósito: assim não existe o quadro
     em que a logo já está visível e só depois é escondida para animar.
     clip-path não toca layout nem obriga o header a repintar. */
  .header .logo img {
    animation: logo-abre 900ms var(--ease-out) 150ms both;
  }

  @keyframes logo-abre {
    from {
      clip-path: inset(0 100% 0 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .header .logo img {
      animation: none;
    }
  }

  .nav {
    display: none;
  }

  @media (min-width: 1024px) {
    .nav {
      display: flex;
      align-items: center;
      gap: var(--s-6);
    }
  }

  .nav__link {
    position: relative;
    font-size: var(--fs-btn);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-2);
    transition: color var(--dur-fast) var(--ease-out);
  }

  .nav__link:hover,
  .nav__link[aria-current="true"] {
    color: var(--text);
  }

  /* A seção em que a pessoa está ganha um sublinhado em verde-buriti.
     O `right` desconta o espaçamento de 0.12em que sobra depois da última
     letra — sem ele o traço passaria do fim da palavra. */
  .nav__link[aria-current="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0.12em;
    bottom: -8px;
    height: 2px;
    background: var(--acento);
  }

  .header__actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }

  .burger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    color: var(--text);
  }

  @media (min-width: 1024px) {
    .burger {
      display: none;
    }
  }

  .burger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--dur-fast) var(--ease-out),
      opacity var(--dur-fast) var(--ease-out);
  }

  .burger span + span {
    margin-top: 6px;
  }

  .burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }

  .burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }

  /* ---------- Menu mobile ---------- */
  .menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    background: var(--bg);
    padding: var(--header-h) var(--gutter) var(--s-9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out),
      visibility var(--dur-base);
  }

  .menu.is-open {
    opacity: 1;
    visibility: visible;
  }

  .menu__link {
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    line-height: 1;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--text);
  }

  .menu__foot {
    margin-top: var(--s-7);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }

  /* ---------- Card de case ---------- */
  /* Só a imagem. Sem gradiente, sem etiqueta, sem legenda.
     Motivo: as capas são quadros de comerciais e muitas já trazem texto
     queimado — sobrepor mais texto virava sopa ilegível. O nome do projeto
     passa a viver dentro da própria arte de capa, e a categoria é
     comunicada pela aba ativa acima da grade.
     O nome do cliente fica no `alt` da imagem, para leitor de tela. */
  .case {
    display: block;
    width: 100%;
    text-align: left;
  }

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

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

  .case__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    pointer-events: none;
  }

  .case__play svg {
    width: 56px;
    height: 56px;
    color: var(--text);
  }

  @media (hover: hover) {
    .case:hover .case__media {
      transform: scale(1.04);
    }

    .case:hover .case__play,
    .case:focus-visible .case__play {
      opacity: 1;
    }
  }

  .case[hidden] {
    display: none;
  }

  /* Placeholder enquanto não há capa real */
  .case__ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: repeating-linear-gradient(
      -45deg,
      var(--surface),
      var(--surface) 12px,
      var(--surface-hi) 12px,
      var(--surface-hi) 24px
    );
  }

  /* ---------- Filtros ---------- */
  .filters {
    display: flex;
    flex-wrap: wrap;
    /* 16px, e não 24px: com 24px as cinco categorias somam 526px contra os
       523px disponíveis ao lado do título, e Fotografia cai sozinha na
       segunda linha. Com 16px sobram 29px de folga. */
    gap: var(--s-4);
    flex: none;
  }

  .filter {
    position: relative;
    font-family: var(--ff-text);
    font-weight: 800;
    font-size: var(--fs-btn);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    padding-block: var(--s-2);
    transition: color var(--dur-fast) var(--ease-out);
  }

  .filter::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-fast) var(--ease-out);
  }

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

  .filter[aria-pressed="true"] {
    color: var(--text);
  }

  .filter[aria-pressed="true"]::after {
    transform: scaleX(1);
  }

  /* ---------- Card de serviço ---------- */
  .service {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
    transition: border-color var(--dur-base) var(--ease-out);
  }

  .service:hover {
    border-top-color: var(--text);
  }

  .service__icon {
    width: 24px;
    height: 24px;
    color: var(--text);
  }

  /* ---------- Indicadores ---------- */
  .stats {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-7) var(--s-5);
    padding-inline: var(--s-7);
  }

  @media (min-width: 600px) {
    .stats {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-5);
    }
  }

  /* As duas barras verticais nas pontas. Fecham o bloco como um suporte,
     sem precisar de divisória entre os indicadores. */
  .stats::before,
  .stats::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 72px;
    background: var(--text);
    border-radius: var(--r-pill);
  }

  .stats::before {
    left: 0;
  }

  .stats::after {
    right: 0;
  }

  @media (max-width: 599px) {
    .stats::before,
    .stats::after {
      height: 100%;
    }
  }

  /* As barras se desenham quando a contagem começa: crescem do centro para
     as pontas, como um suporte sendo montado. `stats--espera` é posta pelo
     counter.js — sem JavaScript as barras aparecem inteiras. */
  .stats--espera::before,
  .stats--espera::after {
    transform: translateY(-50%) scaleY(0);
    transition:
      transform 900ms var(--ease-out),
      opacity 900ms var(--ease-out);
  }

  .stats--espera.stats--contando::before,
  .stats--espera.stats--contando::after {
    transform: translateY(-50%) scaleY(1);
  }

  /* Crescer é movimento; aparecer não. Com movimento reduzido, só aparecem. */
  @media (prefers-reduced-motion: reduce) {
    .stats--espera::before,
    .stats--espera::after {
      transform: translateY(-50%);
      opacity: 0;
    }

    .stats--espera.stats--contando::before,
    .stats--espera.stats--contando::after {
      opacity: 1;
    }
  }

  .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    text-align: center;
  }

  /* Fifties Movies não tem variante tabular: largura reservada
     para a contagem não deslocar o layout. */
  .stat__num {
    display: inline-block;
    min-width: 3.5ch;
  }

  /* ---------- Faixa de clientes ---------- */
  .marquee {
    position: relative;
    overflow: hidden;
    /* Nome correndo não é texto para selecionar. Sem isto, arrastar o mouse
       pela página pintava caixas cinza nos nomes — a cor de seleção do site
       sob a opacidade da faixa —, e as cópias do laço saíam junto. */
    user-select: none;
    -webkit-user-select: none;
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 12%,
      #000 88%,
      transparent
    );
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 12%,
      #000 88%,
      transparent
    );
  }

  /* O padding à direita é o espaço que faltava depois do último nome. Com
     ele a faixa mede exatamente duas cópias com o mesmo espaço entre si, e o
     recuo de 50% cai no começo da segunda — sem o salto de meio espaço que
     havia a cada volta. */
  .marquee__track {
    display: flex;
    align-items: center;
    gap: var(--s-8);
    width: max-content;
    padding-right: var(--s-8);
    animation: marquee 42s linear infinite;
  }

  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track {
    animation-play-state: paused;
  }

  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .marquee__item {
    flex: none;
    height: 36px;
    display: grid;
    place-items: center;
    font-family: var(--ff-display);
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-2);
    opacity: 0.6;
    transition: opacity var(--dur-fast) var(--ease-out);
  }

  .marquee__item:hover {
    opacity: 1;
  }

  @media (min-width: 1024px) {
    .marquee__item {
      height: 48px;
      font-size: 2rem;
    }
  }

  /* Viva: o faixa.js assume o laço. A animação de CSS sai, e a opacidade de
     cada nome passa a ser calculada a cada quadro pela distância até o
     centro da tela. Branco, e não cinza, para o holofote ter um pico de
     verdade; a transição de CSS só atrasaria o cálculo. */
  .marquee--viva .marquee__track {
    animation: none;
    will-change: transform;
  }

  .marquee--viva .marquee__item {
    color: var(--text);
    opacity: 0.2;
    transition: none;
  }

  /* Parada: movimento reduzido e impressão. Uma lista só, centrada e
     quebrando linha se precisar, sem as cópias do laço e sem o esmaecimento
     das bordas, que só servia para a faixa entrar e sair de cena. */
  .marquee--parada {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .marquee--parada .marquee__track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--s-4);
    column-gap: var(--s-7);
    padding-inline: var(--gutter);
    animation: none;
    transform: none;
  }

  /* Em flex-wrap, "Villa Camarão" caía sozinha na segunda linha em 1440px:
     cinco nomes em cima e um órfão embaixo. Em grade as linhas saem sempre
     parelhas — três e três, ou os seis numa linha só quando cabem. No
     celular fica o flex, que é o que cabe em 320px. */
  @media (min-width: 768px) {
    .marquee--parada .marquee__track {
      display: grid;
      grid-template-columns: repeat(3, auto);
      justify-items: center;
    }
  }

  @media (min-width: 1440px) {
    .marquee--parada .marquee__track {
      grid-template-columns: repeat(6, auto);
      column-gap: var(--s-6);
    }
  }

  .marquee--parada .marquee__item[aria-hidden="true"] {
    display: none;
  }

  /* ---------- Logos na faixa ----------
     Brancas e sem fundo, convertidas das logos que o cliente entregou
     (assets/img/clientes/logo-*.png). A altura de cada uma vem do --h no
     próprio <img>, calculada pela área e não pela altura: com a mesma
     altura, a logo quadrada sumiria ao lado da comprida. */
  .marquee--logos .marquee__item {
    height: 56px;
  }

  .marquee__item img {
    display: block;
    width: auto;
    height: var(--h, 32px);
    -webkit-user-drag: none;
  }

  @media (max-width: 767px) {
    .marquee--logos .marquee__item {
      height: 44px;
    }

    .marquee__item img {
      height: calc(var(--h, 32px) * 0.78);
    }
  }

  /* Parada, com logos: flex centrado em vez da grade dos nomes. As nove
     cabem numa linha em tela larga e, no celular, quebram em linhas
     centradas, sem logo presa num canto. */
  .marquee--logos.marquee--parada .marquee__track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: var(--s-6);
    column-gap: var(--s-8);
  }

  /* ---------- Card de equipe ---------- */
  .member__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1);
    transition: filter var(--dur-base) var(--ease-out);
  }

  .member:hover .member__photo {
    filter: grayscale(1) contrast(1.15);
  }

  /* Sem corte em 3 linhas: as bios ficaram curtas o bastante para caberem
     inteiras, e cortar com reticências pareceria descuido. */
  .member {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
  }

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

  .member__bio {
    margin-top: calc(var(--s-2) * -1);
  }

  /* ---------- Depoimento ---------- */
  .quote {
    position: relative;
    background: var(--surface);
    border-radius: var(--r-md);
    padding: var(--s-7) var(--s-6);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
  }

  .quote::before {
    content: "\201C";
    position: absolute;
    top: -0.1em;
    right: 0.2em;
    font-family: var(--ff-display);
    font-size: 8rem;
    line-height: 1;
    color: var(--line);
    pointer-events: none;
  }

  .quote blockquote {
    position: relative;
    z-index: 1;
  }

  .quote__autor {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
  }

  .quote__nome {
    font-family: var(--ff-text);
    font-weight: 800;
    font-size: var(--fs-body);
    color: var(--text);
  }

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

  /* ---------- Modal de vídeo ---------- */
  .modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: var(--s-5);
    background: rgba(0, 0, 0, 0.92);
    opacity: 0;
    visibility: hidden;
    /* Ao fechar, fica visível até o esmaecimento acabar. Ao abrir, fica
       visível na hora: com a visibilidade em transição, o botão de fechar
       ainda estava invisível quando o foco era pedido, e o foco não entrava. */
    transition: opacity var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-base);
  }

  .modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s;
  }

  .modal__frame {
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8);
    transform: translateY(16px);
    transition: transform var(--dur-base) var(--ease-out);
  }

  .modal.is-open .modal__frame {
    transform: translateY(0);
  }

  .modal__frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* Vídeo vertical. Boa parte da cobertura de evento é filmada para o
     celular, em 9:16; num quadro 16:9 ele ocuparia um terço da largura,
     entre duas faixas pretas. Aqui o quadro assume a forma do vídeo,
     limitado pela altura da tela. */
  .modal__frame--vertical {
    width: min(100%, calc((100vh - 2 * var(--s-10)) * 9 / 16));
    width: min(100%, calc((100dvh - 2 * var(--s-10)) * 9 / 16));
    aspect-ratio: 9 / 16;
  }

  .modal__close {
    position: absolute;
    top: var(--s-5);
    right: var(--s-5);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--text);
    border: 1px solid var(--line-hi);
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, 0.5);
  }

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

  /* ---------- Galeria de fotos ----------
     A mesma sala escura do modal de vídeo: fundo quase preto, a foto
     inteira, sem corte, e nada disputando com ela. A troca de foto é um
     esmaecimento curto — sem deslizar. No celular as setas ficam na base,
     ao alcance do polegar; no desktop, nas laterais, fora da foto. */
  .galeria {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: rgba(0, 0, 0, 0.94);
    opacity: 0;
    visibility: hidden;
    /* Mesma regra do modal: visível na hora ao abrir, para o foco entrar. */
    transition: opacity var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-base);
  }

  .galeria.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s;
  }

  .galeria__topo {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-height: calc(44px + 2 * var(--s-5));
    padding: var(--s-5) calc(44px + 2 * var(--s-5)) var(--s-5) var(--s-5);
  }

  .galeria__titulo {
    font-family: var(--ff-text);
    font-weight: 800;
    font-size: var(--fs-body);
    color: var(--text);
  }

  .galeria__contador {
    font-size: var(--fs-sm);
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }

  .galeria__palco {
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 0 var(--s-5) calc(44px + 2 * var(--s-5));
  }

  .galeria__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 184px);
    max-height: calc(100dvh - 184px);
    border-radius: var(--r-md);
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity var(--dur-fast) var(--ease-out);
  }

  .galeria__img.is-trocando {
    opacity: 0;
  }

  .galeria__botao {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--text);
    border: 1px solid var(--line-hi);
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, 0.5);
    transition: border-color var(--dur-fast) var(--ease-out);
  }

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

  .galeria__botao svg {
    width: 20px;
    height: 20px;
  }

  .galeria__fechar {
    top: var(--s-5);
    right: var(--s-5);
  }

  .galeria__seta {
    bottom: var(--s-5);
  }

  .galeria__seta--ant {
    left: var(--s-5);
  }

  .galeria__seta--prox {
    right: var(--s-5);
  }

  @media (min-width: 768px) {
    .galeria__palco {
      padding: 0 calc(44px + 2 * var(--s-5)) var(--s-5);
    }

    .galeria__img {
      max-height: calc(100vh - 116px);
      max-height: calc(100dvh - 116px);
    }

    .galeria__seta {
      bottom: auto;
      top: 50%;
      margin-top: -22px;
    }
  }

  /* ---------- WhatsApp flutuante ---------- */
  .float-wa {
    position: fixed;
    right: var(--s-5);
    bottom: var(--s-5);
    z-index: var(--z-float);
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--line-hi);
    color: var(--text);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--dur-base) var(--ease-out),
      visibility var(--dur-base), transform var(--dur-base) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out);
  }

  .float-wa.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .float-wa:hover {
    border-color: var(--text);
  }

  .float-wa svg {
    width: 24px;
    height: 24px;
  }

  @media (max-width: 767px) {
    .float-wa {
      bottom: var(--s-9);
    }
  }

  /* ---------- Divisória com a curva da marca ---------- */
  /* Traço em verde-buriti desde 2026-09-11: a curva é a vereda, e o verde é
     o da vereda. Um dos quatro lugares onde o acento entra. */
  .divider {
    width: 100%;
    height: 40px;
    color: var(--acento);
  }

  .divider svg {
    width: 100%;
    height: 100%;
  }

  .divider path {
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
  }

  /* A curva mora dentro da seção que ela anuncia, e não num bloco próprio
     entre duas seções. O bloco próprio tinha fundo preto puro e ficava
     espremido entre a faixa de números e a luz de Cases: três faixas de
     cinza diferente empilhadas, que liam como linhas retas.
     Aqui ela atravessa a seção de borda a borda — a vereda cruzando a tela
     inteira, não um traço que começa e para dentro da coluna — e fica
     centrada no respiro de abertura, acima do rótulo. */
  .section > .divider {
    position: absolute;
    left: 0;
    right: 0;
    top: calc((var(--rhythm) - 40px) / 2);
    z-index: 1;
    pointer-events: none;
  }

  .section--xl > .divider {
    top: calc((var(--rhythm-xl) - 40px) / 2);
  }
}