/* ==========================================================================
   LAVYTIER — creative.css

   Página do Lavytier Creative (criativos e identidade visual).
   Herda a gramática do Vanguard e do Titan: faixas alternando preto e branco,
   texto à esquerda e instrumento à direita no hero, número grande e sozinho.

   ESTADO: só o hero está construído. As outras oito faixas entram uma por vez,
   publicadas isoladas para o cliente ver antes — é a regra desta casa, e
   ignorá-la já custou duas reversões.

   O INSTRUMENTO é "as guias": campo ortogonal. O circular é assinatura do
   Vanguard, o linear vertical é do Titan, a espiral é do Orys — nenhum se
   repete. Aqui são linhas de construção que deslizam até posições exatas de
   uma retícula, PARAM, e ficam. Onde uma vertical encontra uma horizontal já
   paradas, acende uma marca no azul da marca.
   Numa frase: a composição é feita de encontros exatos, e cada encontro exato
   acende um ponto.

   A GEOMETRIA DO CONTÊINER é a mesma do Vanguard e do Titan, e essa parte se
   copia sempre: quadrado, 46% da largura, centrado na altura do hero, máscara
   em linear-gradient(100deg…). É a máscara que deixa a peça sobrepor a coluna
   de texto sem colidir com a leitura.

   Regras da casa: tokens do core; reset em :where() para não competir com
   regra de componente; anima-se transform e opacity e nada mais; conteúdo
   nasce visível; o canvas para na rolagem e fora da tela (creative.js).
   ========================================================================== */

.crt-root {
  --c-tx:   #FFFFFF;
  --c-soft: #A0A0A0;
  --c-mute: #646464;
  --c-ln:   rgba(255, 255, 255, .12);

  font-family: var(--font);
  color: var(--graphite);
  background: var(--paper);
  line-height: 1.55;
}

.crt-root > section {
  position: relative;
  contain: layout paint style;
  padding-block: 132px;
}
@media (max-width: 1024px) { .crt-root > section { padding-block: 88px; } }
@media (max-width: 768px)  { .crt-root > section { padding-block: 64px; } }

/* A FAIXA ESCURA SE DECLARA UMA VEZ, PELO ATRIBUTO — e não seção por seção.

   Em 03/09/2026 eu marquei três faixas com data-lvx-dark="1" e esqueci de dar
   fundo preto a elas: os formatos, a identidade e os passos ficaram com texto
   branco sobre papel branco, com os títulos invisíveis. A verificação que eu
   tinha feito não pegou porque mediu opacidade, visibilidade e tamanho — e
   nenhum desses três enxerga cor. Só apareceu quando medi CONTRASTE.

   Amarrar o fundo ao mesmo atributo que a barra do topo já lê elimina a classe
   inteira de erro: marcar a faixa como escura passa a ser suficiente. */
.crt-root [data-lvx-dark="1"] { background: var(--ink); color: var(--c-tx); }

/* Reset em :where() — especificidade zero, para nunca vencer a regra de
   componente. É a armadilha nº 1 deste projeto. */
.crt-root :where(h1, h2, h3) { margin: 0; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.crt-root :where(p)          { margin: 0; max-width: 62ch; }
.crt-root :where(ul, ol)     { margin: 0; padding: 0; list-style: none; }
.crt-root :where(a)          { text-decoration: none; color: inherit; }

.crt-wrap {
  width: 100%; max-width: var(--shell);
  margin-inline: auto; padding-inline: var(--gutter);
}

/* ---------- rótulo de seção ----------
   O ponto de 5px é o acento da marca — a mesma peça das outras onze páginas,
   copiada do .jrn-eyebrow-dot do Journal. O letter-spacing: 0 no ponto existe
   para o vão medir 11px igual em todo o site: sem ele o espaço herda o
   tracking do rótulo, que varia de página para página. */
.crt-eyebrow {
  display: block; margin-bottom: 20px;
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--slate);
}
.crt-eyebrow::before {
  content: ""; display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--az); margin-right: 11px;
  vertical-align: .18em; letter-spacing: 0;
}
[data-lvx-dark="1"] .crt-eyebrow::before { background: var(--az-claro); }

/* ---------- botões ----------
   Formas do Vanguard e do Titan. O botão NÃO é azul: 21:1 de contraste, e
   botão azul é assinatura de software, não de marca selecionada. */
.crt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 26px; border-radius: var(--r-2);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.crt-btn-claro {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.crt-btn-claro:hover { transform: translateY(-2px); }
.crt-btn-linha {
  background: transparent; color: var(--c-tx); border-color: var(--c-ln);
}
.crt-btn-linha:hover { border-color: var(--c-soft); transform: translateY(-2px); }

.crt-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.crt-micro {
  margin-top: 20px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: rgba(255, 255, 255, .48);
}

/* ==========================================================================
   HERO
   Texto à esquerda, instrumento à direita — a mesma arquitetura do Vanguard,
   do Titan, do Orys e do Studio.
   ========================================================================== */

.crt-root .crt-hero {
  display: flex; align-items: center;
  min-height: 92svh;
  padding: calc(var(--nav-h) + 104px) 0 104px;
  overflow: hidden;
  background: var(--ink); color: var(--c-tx);
}

/* Mesma caixa do .crt-wrap — largura do shell, centrada, com o recuo lateral
   da casa. O espaço do instrumento sai de um padding à direita, e não de uma
   margem calculada com 100vw: 100vw inclui a barra de rolagem e o wrap não,
   então centrar de dois jeitos nunca coincide (armadilha nº 11). */
.crt-hero-texto {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: max(var(--gutter), 42%);
}

.crt-hero .crt-eyebrow { color: var(--c-mute); }
.crt-hero h1 {
  font-size: clamp(34px, 4.9vw, 60px); line-height: 1.04;
  letter-spacing: -.042em; color: var(--c-tx); text-wrap: balance;
}
/* A segunda frase recua em tom, não em corpo nem em família. */
.crt-hero h1 em { display: block; margin-top: .14em; font-style: normal; color: var(--c-mute); }

.crt-lead {
  margin-top: 32px; max-width: 52ch;
  font-size: 16.5px; line-height: 1.78; font-weight: 300; color: var(--c-soft);
  text-wrap: pretty;
}

/* O instrumento. Máscara em gradiente para ele nascer do fundo em vez de
   terminar numa borda — é ela que permite a peça sobrepor a coluna de texto
   sem disputar com a leitura. Medido no Vanguard: a arte invade 105px do
   texto e ninguém percebe, porque ali ela já é transparente.

   Aqui a máscara faz um segundo trabalho, que não existia no Vanguard nem no
   Titan: as guias NASCEM do vazio à esquerda, que é exatamente o gesto de
   puxar uma guia sobre a prancheta. */
.crt-hero-art {
  position: absolute; z-index: 0;
  right: max(calc((100% - var(--shell)) / 2 + var(--gutter)), var(--gutter));
  top: 50%; transform: translateY(-50%);
  width: min(76svh, 46%); max-width: 720px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  /* A RAMPA DESTA PÁGINA É MAIS LONGA QUE A DO VANGUARD E DO TITAN, e a razão
     é medida. Lá a máscara vai de transparente a opaca em 30%, e a arte invade
     105px da coluna de texto sem ninguém perceber — porque a tinta ali é 7% de
     branco. Aqui a tinta subiu para 18%, a pedido do cliente ("mal dava pra
     ver"), e no mesmo instante as guias passaram a aparecer POR CIMA do
     parágrafo: 12,6% de branco sobre o texto, medido.

     A correção certa é a máscara e não a tinta — mexer na tinta faz a peça
     sumir de novo, que é o oposto do pedido.

     PRIMEIRA TENTATIVA, REPROVADA: rampa 22%→58%. Protegia o texto por
     completo, mas custou caro — deixou só 42% da peça em tinta cheia, contra
     70% do padrão da casa, e o cliente leu o resultado como "incompleto".
     Estava certo: eu tirei 28% da arte de circulação para proteger 16%.

     A rampa atual é o meio-termo medido. No desktop de 1440 a arte tem 656px e
     o texto termina a 16% dela; no tablet, a 20,7%. Com transparência plena
     até 14% e opacidade a 38%:
       · a 16% (desktop) a máscara está em 8%  → 1,4% de branco sobre o texto;
       · a 20,7% (tablet) está em 28%          → 5% de branco;
       · e 62% da peça fica em tinta cheia, contra 42% da tentativa anterior. */
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 14%, #000 38%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 0%, transparent 14%, #000 38%, #000 100%);
}
.crt-hero-art canvas { width: 100%; height: 100%; display: block; }

/* ---------- instrumento B: o pivô dos formatos ----------
   Vem da referência do Fromzero, e o que se trouxe de lá é UMA ideia: um pivô
   que inclina com o cursor carregando satélites em profundidades diferentes,
   que se deslocam uns contra os outros. É o deslocamento entre profundidades
   que dá a sensação de espaço — não o WebGL, nem o vídeo, nem o grão. Por isso
   aqui são três transformações em CSS e nada mais.

   O que ele desenha é o produto, não uma metáfora: as três proporções que a
   Lavytier entrega — 1:1, 4:5 e 9:16 — com a MESMA ÁREA (~90.000px²) e o MESMO
   CENTRO. Formatos diferentes, mesmo trabalho, mesmo centro. O centro é a única
   coisa em azul, e é o mesmo gesto da marca do encontro exato das guias.

   A caixa de perspectiva é separada do .crt-hero-art de propósito: a máscara
   daquele elemento cria contexto próprio, e empilhar máscara e preserve-3d no
   mesmo nó é pedir para o 3D achatar em algum navegador. */
.crt-pivo-caixa {
  position: absolute; inset: 0;
  perspective: 1100px;
  perspective-origin: 50% 50%;
}
.crt-pivo {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.crt-fmt {
  position: absolute; left: 50%; top: 50%;
  border: 1px solid var(--c-tx);
  transform-style: preserve-3d;
}
/* Cada rótulo num CANTO DIFERENTE. As três molduras são concêntricas, então
   as bordas de cima ficam a 17 e 33px umas das outras — perto demais para três
   rótulos empilhados, e na primeira versão dois se sobrepuseram. Cantos
   distintos tornam a colisão impossível em qualquer proporção de tela. */
.crt-fmt span {
  position: absolute;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--c-tx);
}
.crt-fmt-carrossel span { left: 0;  bottom: calc(100% + 9px); }
.crt-fmt-arte span      { left: 0;  top: calc(100% + 9px); }
.crt-fmt-reel span      { right: 0; top: calc(100% + 9px); }

/* Área igual em layout — 45,7% ao quadrado, 40,9%×51,1% e 34,3%×61% dão o
   mesmo número de pixels. O que difere na tela é a PROJEÇÃO: o que está atrás
   projeta menor, o que está à frente projeta maior. É a perspectiva fazendo o
   trabalho, e é por isso que "mesma área" e "tamanhos diferentes" convivem
   aqui sem contradição.

   A opacidade cai com a distância — única pista de profundidade que uma linha
   de 1px consegue dar. Subiu de .14/.22/.34 para .26/.42/.62 depois de ver a
   peça no preto real: no escuro, 1px a 14% não é discrição, é ausência. */
.crt-fmt-reel {
  width: 34.3%; aspect-ratio: 9 / 16;
  opacity: .62;
  transform: translate(-50%, -50%) translateZ(62px);
}
.crt-fmt-arte {
  width: 45.7%; aspect-ratio: 1 / 1;
  opacity: .42;
  transform: translate(-50%, -50%) translateZ(0);
}
.crt-fmt-carrossel {
  width: 40.9%; aspect-ratio: 4 / 5;
  opacity: .26;
  transform: translate(-50%, -50%) translateZ(-72px);
}

/* O centro compartilhado. Único azul da peça, 3px — a mesma medida da marca
   que acende no encontro das guias. */
.crt-centro {
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px;
  background: var(--az-claro);
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .crt-pivo { transition: none; }
}

/* ---------- respostas de tela ----------
   Os mesmos degraus do Titan. O instrumento encolhe antes do texto, e abaixo
   de 768px ele sobe para cima do texto e vira quadrado pequeno: numa coluna
   estreita, arte ao lado de texto não é composição, é aperto. */
@media (max-width: 1180px) {
  .crt-root .crt-hero { min-height: 88svh; }
  .crt-hero-texto { max-width: 100%; padding-right: max(var(--gutter), 46%); }
  .crt-hero-art { width: min(70svh, 48%); }
}
@media (max-width: 1024px) {
  .crt-root .crt-hero { padding: calc(var(--nav-h) + 80px) 0 80px; min-height: 0; }
  .crt-hero-texto { max-width: 100%; padding-right: max(var(--gutter), 40%); }
  .crt-hero h1 { font-size: clamp(30px, 3.9vw, 48px); }
  .crt-hero .crt-acoes { margin-top: 28px; }
  .crt-hero-art { width: min(64svh, 44%); }
}
@media (max-width: 768px) {
  .crt-root .crt-hero {
    display: block;
    padding: calc(var(--nav-h) + 48px) 0 64px;
  }
  .crt-hero-texto { padding-right: var(--gutter); }
  .crt-hero-art {
    position: relative; right: auto; top: auto; transform: none;
    width: min(78vw, 320px); max-width: none;
    margin: 0 0 18px var(--gutter);
  }
  .crt-hero h1 { font-size: clamp(28px, 8vw, 36px); letter-spacing: -.036em; }
  .crt-hero h1 em { margin-top: .2em; }
  .crt-lead { margin-top: 24px; font-size: 15.5px; }
  .crt-hero .crt-acoes { margin-top: 26px; }
  .crt-hero .crt-micro { margin-top: 16px; }
  .crt-btn { width: 100%; }
}

/* ==========================================================================
   CABEÇA DE SEÇÃO — a mesma do Vanguard e do Titan
   ========================================================================== */

.crt-cabeca { max-width: 48ch; margin-bottom: 64px; }
.crt-cabeca h2 {
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1;
  letter-spacing: -.038em; text-wrap: balance;
}
.crt-cabeca p { margin-top: 22px; font-size: 16px; line-height: 1.78; font-weight: 300; color: var(--slate); }
.crt-cabeca--claro h2 { color: var(--c-tx); }
.crt-cabeca--claro p  { color: var(--c-soft); }
.crt-cabeca--claro .crt-eyebrow { color: var(--c-mute); }
.crt-cabeca--centro { margin-inline: auto; text-align: center; }
@media (max-width: 768px) { .crt-cabeca { margin-bottom: 44px; } }

/* ==========================================================================
   09 · ECOSSISTEMA E FECHO
   ========================================================================== */

.crt-portas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.crt-porta {
  display: flex; flex-direction: column;
  border: 1px solid var(--cloud); border-radius: var(--r-3); padding: 28px 26px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.crt-porta:hover { border-color: var(--slate); transform: translateY(-2px); }
/* Variante escura. O ecossistema virou faixa preta para a página alternar
   preto · branco · preto · branco a partir do hero; sem estas regras os
   cartões ficariam com fio e tinta de papel claro em cima do preto. */
[data-lvx-dark="1"] .crt-porta       { border-color: var(--c-ln); }
[data-lvx-dark="1"] .crt-porta:hover { border-color: var(--c-soft); }
[data-lvx-dark="1"] .crt-porta-nome  { color: var(--c-tx); }
[data-lvx-dark="1"] .crt-porta-desc  { color: var(--c-soft); }
[data-lvx-dark="1"] .crt-porta-ir    { color: var(--c-tx); }
.crt-porta-nome { font-size: 17px; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }
.crt-porta-desc { margin-top: 12px; font-size: 13.5px; line-height: 1.65; color: var(--slate); }
/* margin-top:auto no link porque as descrições têm contagens de linha
   diferentes e sem isso um dos três sobe uma linha — o mesmo defeito que o
   cartão do menu teve quando virou três colunas. */
.crt-porta-ir { margin-top: auto; padding-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 900px) { .crt-portas { grid-template-columns: 1fr; } }

/* O FECHO É BRANCO nesta página. O Vanguard e o Titan fecham no escuro, mas
   ali a alternância termina assim; aqui ela começa no hero preto, e é o fecho
   branco que a mantém — preto · branco · preto · branco. Ele também encosta no
   rodapé do site, que já é escuro: contraste no fim, em vez de dois blocos
   pretos colados. */
.crt-fecho-inner { max-width: 62ch; margin-inline: auto; text-align: center; }
.crt-fecho h2 { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -.038em; color: var(--ink); text-wrap: balance; }
.crt-fecho p { margin: 26px auto 0; font-size: 16px; line-height: 1.78; font-weight: 300; color: var(--slate); }
.crt-fecho .crt-acoes { justify-content: center; }
/* Num fecho branco o botão claro seria branco sobre branco. Aqui o principal
   é tinta — e continua não sendo azul: 21:1, e botão azul é assinatura de
   software, não de marca selecionada. */
.crt-fecho .crt-btn-claro { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.crt-fecho .crt-btn-claro:hover { transform: translateY(-2px); }



/* ==========================================================================
   AS QUATRO PEÇAS

   Quarta versão da região de pedido, e a crítica que a gerou foi a mais dura:
   *"você está falando de tudo junto, sem atenção a cada item"*, *"uma lista de
   preços? é o cardápio de um restaurante?"*, *"'16 peças' nem vai fazer questão
   de falar pro cliente do que se trata?"*, *"identidade visual sem nenhum
   copy"*.

   O erro de leitura foi meu: "sem instrução, sem repetição, sem comparação" não
   quer dizer SEM CONTEÚDO. Dizer o que a pessoa recebe é especificação, não
   persuasão — e sem isso quatro produtos diferentes viraram quatro linhas
   iguais.

   O precedente já existia no próprio projeto e eu o ignorei: a faixa de
   recursos do Titan foi reprovada com as mesmas palavras ("simples e não
   memorável") e corrigida com QUATRO PEÇAS GRANDES, cada uma com desenho que
   mostra o mecanismo. É a mesma solução aqui.

   Cada peça agora tem: arte própria, título que afirma alguma coisa, o que a
   pessoa recebe, o preço e o pedido.
   ========================================================================== */

.crt-pecas { border-top: 1px solid var(--cloud); }

.crt-peca {
  display: grid; grid-template-columns: 160px 1fr; gap: 44px;
  padding: 56px 0; border-bottom: 1px solid var(--cloud);
  align-items: start;
}

.crt-peca-topo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 28px; flex-wrap: wrap;
}
.crt-peca-topo h3 {
  font-size: clamp(20px, 2.5vw, 27px); line-height: 1.16;
  letter-spacing: -.028em; color: var(--ink); max-width: 26ch;
}
.crt-peca-preco {
  font-size: clamp(20px, 2.5vw, 27px); font-weight: 700;
  letter-spacing: -.034em; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.crt-peca-corpo {
  margin-top: 18px; max-width: 54ch;
  font-size: 15.5px; line-height: 1.75; color: var(--slate);
}
.crt-peca-corpo b { color: var(--graphite); font-weight: 600; }

/* A ESCADA DE QUANTIDADE, COMO BOTÕES.

   Antes era uma linha de texto em mono — "4 por 178 · 9 por 368 · 16 por 618" —
   e o cliente apontou o defeito: aquilo lê como nota de rodapé, não como opção
   clicável. Estava certo. Um alvo de clique que não parece alvo de clique não
   existe.

   Agora são botões, e a elegância vem de não serem pílula: canto de 6px (o
   menor degrau da escala da casa), só fio de 1px sem preenchimento, e duas
   linhas dentro — quantidade em Sora, preço em mono. Duas linhas é o que os
   separa de um chip de software: eles INFORMAM, não só selecionam.

   O hover escurece o fio e o preço. Nada de salto nem de preenchimento: o
   botão não pula, ele acende. */
.crt-qtds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.crt-qtd {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 17px; border: 1px solid var(--cloud); border-radius: var(--r-1);
  transition: border-color .3s var(--ease);
}
.crt-qtd b {
  font-size: 14.5px; font-weight: 600; letter-spacing: -.012em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.crt-qtd span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--slate); font-variant-numeric: tabular-nums;
  transition: color .3s var(--ease);
}
.crt-qtd:hover { border-color: var(--ink); }
.crt-qtd:hover span { color: var(--graphite); }
.crt-qtd:focus-visible { outline: 2px solid var(--az); outline-offset: 3px; }

/* A linha de apoio continua existindo, mas só onde NÃO há opção: no mensal e na
   identidade, que têm uma condição só. É a diferença entre "escolha" e
   "informação", e ela precisa ser visível sem legenda. */
.crt-peca-escada { margin-top: 20px; font-family: var(--mono); font-size: 12px; letter-spacing: .05em; color: var(--slate); }

.crt-peca-pedir {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
}
.crt-peca-pedir svg { width: 15px; height: 15px; overflow: visible; }
.crt-peca-pedir svg path { transition: transform .4s var(--ease); }
.crt-peca-pedir:hover svg path { transform: translateX(6px); }

@media (max-width: 860px) {
  .crt-peca { grid-template-columns: 1fr; gap: 26px; padding: 44px 0; }
  .crt-peca-arte { width: 132px; }
}

/* ==========================================================================
   AS ARTES DAS PEÇAS

   SVG no CSS da página, animado em CSS — o mesmo caminho das quatro peças do
   Titan: traço de 1,5, tinta preta em opacidades, só transform e opacity.

   As quatro regras da casa valem aqui como valem no hero:
   · desenham um COMPORTAMENTO, não uma quantidade — nenhuma delas conta 16 nem
     conta 6, porque contar é o que o texto já faz e desenhar de novo é
     redundância (a grade de 50 células do Titan foi reprovada por isso);
   · a vida vem de SOBREPOSIÇÃO: os períodos são primos entre si (11s, 13s,
     17s, 19s) e nunca coincidem, então não há batida comum;
   · ESTADO PERMANENTE: todos os ciclos são contínuos e sem pausa, e a única
     que translada o faz por um passo exato do próprio padrão — não há emenda
     visível em lugar nenhum;
   · não são maquete de interface: são desenho geométrico.
   ========================================================================== */

.crt-peca-arte { width: 160px; }
.crt-peca-arte svg { width: 100%; height: auto; display: block; overflow: visible; }
.crt-peca-arte .q { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.crt-peca-arte .fina { stroke-width: 1; opacity: .28; }
.crt-peca-arte .cheia { fill: var(--ink); stroke: none; }
.crt-peca-arte .marca { fill: var(--az); stroke: none; }

/* 01 · ARTE ESTÁTICA — a composição dentro de um quadro só.
   Três barras deslizam em períodos que não coincidem; de tempos em tempos elas
   se alinham por um instante, e é esse instante que a peça desenha. */
@keyframes crtDesliza1 { 0%,100% { transform: translateX(-9px) } 50% { transform: translateX(9px) } }
@keyframes crtDesliza2 { 0%,100% { transform: translateX(7px) }  50% { transform: translateX(-11px) } }
@keyframes crtDesliza3 { 0%,100% { transform: translateX(-5px) } 50% { transform: translateX(12px) } }
.crt-a1 .b1 { animation: crtDesliza1 11s ease-in-out infinite; }
.crt-a1 .b2 { animation: crtDesliza2 13s ease-in-out infinite; }
.crt-a1 .b3 { animation: crtDesliza3 17s ease-in-out infinite; }

/* 02 · CARROSSEL — a sequência.
   A fileira anda exatamente um quadro por ciclo. Como os quadros são iguais e
   o passo é o do padrão, o fim do ciclo é idêntico ao começo: o laço não tem
   costura para o olho encontrar. */
@keyframes crtAnda { from { transform: translateX(0) } to { transform: translateX(-40px) } }
.crt-a2 .fileira { animation: crtAnda 9s linear infinite; }

/* 03 · PACOTE MENSAL — a cadência.
   Uma onda atravessa o campo da esquerda para a direita, sempre no mesmo
   compasso. Não há o que contar: o que se lê é o ritmo, que é o que o produto
   de fato vende. */
@keyframes crtPulso { 0%,100% { opacity: .18 } 12% { opacity: 1 } 40% { opacity: .18 } }
.crt-a3 .t { animation: crtPulso 4.4s ease-in-out infinite; }
.crt-a3 .t:nth-child(1) { animation-delay: 0s }
.crt-a3 .t:nth-child(2) { animation-delay: .26s }
.crt-a3 .t:nth-child(3) { animation-delay: .52s }
.crt-a3 .t:nth-child(4) { animation-delay: .78s }
.crt-a3 .t:nth-child(5) { animation-delay: 1.04s }
.crt-a3 .t:nth-child(6) { animation-delay: 1.3s }
.crt-a3 .t:nth-child(7) { animation-delay: 1.56s }

/* 04 · IDENTIDADE VISUAL — a regra que o resto obedece.

   A PRIMEIRA VERSÃO FOI REPROVADA e o motivo é justo: eram quatro quadrados
   concêntricos com um ponto azul no meio, e aquilo lê como ALVO DE TIRO, não
   como sistema de marca. Pior, o "respirar junto" era imperceptível — os
   atrasos de 1,4s num ciclo de 19s não se distinguiam de um zoom.

   Um manual de marca não é um centro: é uma REGRA que tudo o mais obedece.
   Então agora há uma fonte à esquerda, marcada em azul, e três derivadas à
   direita. Quando a fonte muda de proporção, as três mudam atrás dela, em
   cascata curta e visível.

   Duas escolhas que fazem a leitura funcionar:
   · a origem do transform é a BORDA ESQUERDA de cada peça, não o centro —
     todas encolhem para o mesmo eixo, e é o eixo comum que diz "mesma lei";
   · o atraso é de 0,45s num ciclo de 15s. Curto o bastante para o olho ligar
     causa e efeito, longo o bastante para não parecer que se moveram juntas. */
@keyframes crtRegra { 0%,100% { transform: scaleX(1) } 50% { transform: scaleX(.68) } }
.crt-a4 .f {
  transform-box: fill-box; transform-origin: left center;
  animation: crtRegra 15s ease-in-out infinite;
}
.crt-a4 .f2 { animation-delay: .45s }
.crt-a4 .f3 { animation-delay: .9s }
.crt-a4 .f4 { animation-delay: 1.35s }
/* A marca azul acompanha a fonte: ela é a origem da regra, não um alvo. */
.crt-a4 .origem { transform-box: fill-box; transform-origin: left center; animation: crtRegra 15s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .crt-peca-arte * { animation: none !important; }
}