/* ─────────────────────────────────────────────────────────────
   ARCHIVO — auto-hospedada. Omnibus-Type, SIL Open Font License 1.1.
   Origem: github.com/Omnibus-Type/Archivo · licença em /fontes/v1/OFL.txt
   Só os quatro pesos que esta página realmente usa, dos 108 do repositório.
   Estáticas, não a variável (643 KB): o eixo de largura do display vem da
   família SemiExpanded, que já é o desenho alargado pronto.
   ───────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fontes/v1/Archivo-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/fontes/v1/Archivo-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/fontes/v1/Archivo-SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo SemiExpanded'; font-style:normal; font-weight:300; font-display:swap;
  src:url('/fontes/v1/ArchivoSemiExpanded-Light.woff2') format('woff2');
}

:root{
    --olive:#4B5136; --olive-deep:#3B4029; --sage:#8A8F73; --walnut:#6B4426;
    --cream:#E8DCC5; --taupe:#CBB9A3; --paper:#F5F1E8; --ink:#2C2E22;
    /* Cream Dim. Existe porque Cream a 72% de opacidade mede 3.9:1 e reprova;
       este mede 4.8:1 sobre Olive. Escurecer com opacidade não é opção — a cor
       fixa é a correção. Estava só no aplicativo até 30/07/2026, quando a
       página inicial passou a ter texto sobre fundo escuro e precisou dele. */
    --cream-fraco:#D8CCB2;

    /* Walnut clareado, para LINK INLINE SOBRE FUNDO ESCURO. Existe porque o
       Walnut de verdade mede 1.63:1 sobre Ink — não é "pouco contraste", é
       invisível. Este mede 5.51:1 e mantém a família da cor de ação.
       Só vale para texto sobre escuro; botão cheio continua Walnut puro, que
       ali é FUNDO e leva Paper por cima a 7.51:1. */
    --walnut-claro:#C89B72;

    /* Tokens espelhados do aplicativo real (ocium/publico/index.html).
       Mudar aqui sem mudar lá quebra a promessa do mockup.

       Atualizados em 29/07/2026, quando o aplicativo migrou do petróleo para o
       Cozy Earthy. Antes desta data a janela mostrava uma interface que já não
       existia — que é exatamente a única coisa que ela não pode fazer.
       A FONTE também deixou de divergir: o aplicativo passou a usar Archivo,
       então a janela usa Archivo. O que continua estrangeiro nela é a ESCALA
       (corpo de 10–11px, rótulos de 8.5px, raio de 3–4px), não a letra. */
    --p-cabecalho:#3B4029; --p-papel:#F5F1E8; --p-branco:#fff;
    --p-tinta:#2C2E22; --p-linha:#CBB9A3; --p-linha-fraca:#E4DACA;
    --p-mudo:#4B5136; --p-sage-claro:#E2DFD3;
    --p-cream:#E8DCC5; --p-cream-fraco:#D8CCB2;
    --p-acao:#6B4426;
    --p-selo:#2F6B45; --p-selo-fundo:#E6EDE9;
    --p-fonte:Archivo,system-ui,-apple-system,sans-serif;

    --r-controle:999px; --r-painel:22px; --r-janela:10px;
    --saida:cubic-bezier(.16,1,.3,1);
  }

  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:1.0625rem; line-height:1.6; letter-spacing:-.005em;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  :focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:4px}

  /* ── O quadro ─────────────────────────────────────────────── */
  .quadro{
    min-height:100dvh;
    display:grid; grid-template-rows:auto minmax(0,1fr) auto;
    max-width:1440px; margin-inline:auto;
  }

  /* ── Navegação ────────────────────────────────────────────── */
  .topo{
    display:flex; align-items:center; justify-content:space-between;
    gap:24px; padding:clamp(15px,2.6vh,26px) clamp(20px,4vw,56px);
  }
  .marca{
    font-size:1.15rem; font-weight:600; letter-spacing:-.02em; text-decoration:none;
  }
  .entrar{
    font-size:.94rem; color:var(--olive); text-decoration:none;
    padding:8px 2px; border-bottom:1px solid transparent; transition:border-color .18s;
  }
  .entrar:hover{border-bottom-color:var(--olive)}

  /* ── Palco ────────────────────────────────────────────────── */
  .palco{
    position:relative; display:grid; align-items:center;
    padding:8px clamp(20px,4vw,56px) clamp(16px,2.6vh,40px);
  }

  .campo{
    position:absolute; inset-block:0; inset-inline-end:0;
    width:calc(46% - clamp(20px,4vw,56px));
    background:var(--olive);
    border-start-start-radius:var(--r-painel);
    border-end-start-radius:var(--r-painel);
    z-index:0;
    animation:campoEntra 1s var(--saida) both;
  }
  /* Sangra até a borda física da janela em telas largas. */
  @media (min-width:1441px){ .campo{ inset-inline-end:calc((100vw - 1440px) / -2) } }

  /* A fala ocupa a coluna esquerda; a janela é posicionada por cima da divisa. */
  .fala{ position:relative; z-index:2; max-width:min(32rem,42%); padding-block:clamp(8px,2vh,32px) }

  .kicker{
    display:block; font-size:.7rem; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--olive); margin:0 0 clamp(12px,2.2vh,22px);
  }
  h1{
    margin:0 0 clamp(14px,2.4vh,24px);
    /* A largura alargada vem da família, não de um eixo variável. */
    font-family:'Archivo SemiExpanded',Archivo,system-ui,sans-serif;
    /* Numa página de uma tela só, o display responde à ALTURA tanto quanto à largura. */
    font-size:clamp(2rem,min(5vw,7.4vh),4.2rem); font-weight:300; line-height:1.02;
    letter-spacing:-.03em;
    text-wrap:balance;
  }
  .apoio{ margin:0 0 clamp(20px,3.4vh,36px); max-width:32rem; color:var(--olive) }

  .acao{
    display:inline-block; background:var(--walnut); color:var(--paper);
    font:inherit; font-weight:500; text-decoration:none;
    padding:17px 34px; border:0; border-radius:var(--r-controle);
    transition:transform .18s var(--saida), background-color .18s;
  }
  .acao:hover{ transform:translateY(-1px); background:#5B381F }
  .acao:active{ transform:translateY(0) }

  /* ── A JANELA DO PRODUTO SAIU ──────────────────────────────
     Ela vivia aqui: moldura, corpo, cenas, cartoes, campos, selos e os quatro
     documentos que saiam de tras dela. Tudo removido em 30/07/2026, quando o
     fundador mandou tirar a preview -- ela mostrava um formulario de "Nova
     proposta", jornada que deixou de ser funcionalidade.

     Eram ~95 linhas de estilo para marcacao que nao existe mais, e com elas
     iam quinze tamanhos de fonte proprios: 4px, 5.2px, 5.4px, 5.6px, 6.2px,
     8.5px, 9px, 9.5px, 10.5px. Era esse legado que fazia o site ter 33
     tamanhos distintos sem escala nenhuma.

     Folha de estilo de componente que nao existe e o que engana a proxima
     leitura: quem abrir isto daqui a seis meses procura a janela na pagina. */

  /* ── Rodapé de fatos ──────────────────────────────────────── */
  .rodape{
    display:flex; flex-wrap:wrap; align-items:baseline;
    justify-content:space-between; gap:10px 32px;
    padding:clamp(13px,2.2vh,20px) clamp(20px,4vw,56px) clamp(16px,2.8vh,28px);
    border-top:1px solid var(--taupe);
    font-size:.83rem; color:var(--olive);
  }
  .fluxos{ margin:0; font-weight:500 }
  /* Separador em Olive, não em Sage: Sage reprova contraste sobre o Paper (2.9:1),
     e "·" é texto. A separação vem do espaço, não da cor. */
  .fluxos i{ font-style:normal; padding:0 7px }
  .quem{ margin:0 }
  /* inline-block com respiro: como texto puro o alvo ficava com 15px de altura,
     abaixo do mínimo de 24px do WCAG 2.5.8. */
  .quem a{ display:inline-block; padding:5px 0; text-decoration:none;
           border-bottom:1px solid var(--olive) }
  .quem a:hover{ border-bottom-width:2px }
  .marca{ padding:4px 0 }

  /* ── Movimento: um momento só ─────────────────────────────── */
  /* Um momento orquestrado, não efeitos espalhados: o campo abre, a janela
     sobe, os campos se preenchem, o botão é acionado, o documento sai.
     Todo keyframe termina no estado PADRÃO do CSS — com animação desligada,
     tudo aparece normalmente. */
  @keyframes campoEntra{ from{ clip-path:inset(0 0 0 100%) } to{ clip-path:inset(0) } }
  @keyframes janelaEntra{ from{ transform:translateY(18px); opacity:0 } to{ transform:none; opacity:1 } }
  @keyframes preenche{ from{ opacity:0; transform:translateY(-3px) } to{ opacity:1; transform:none } }
  @keyframes aciona{
    0%,58%{ transform:none; filter:none }
    72%   { transform:scale(.955); filter:brightness(.82) }
    100%  { transform:none; filter:none }
  }
  @keyframes docSai{
    from{ transform:translate(-58px,-66px) rotate(3deg); opacity:0 }
    to  { transform:translate(0,0) rotate(-4deg); opacity:1 }
  }

  /* Escalonamento por classe, não por atributo style: a CSP do projeto usa
     style-src 'self', então não há style inline em lugar nenhum desta página. */
  .at1,.at2,.at3,.at4,.at5,.at6,.at7,.at8{ animation:preenche .5s var(--saida) both }
  .at1{ animation-delay:.80s } .at2{ animation-delay:.92s }
  .at3{ animation-delay:1.04s } .at4{ animation-delay:1.16s }
  .at5{ animation-delay:1.28s } .at6{ animation-delay:1.36s }
  .at7{ animation-delay:1.44s } .at8{ animation-delay:1.52s }

  /* O tratamento de movimento reduzido está no fim do arquivo: ele precisa
     sobrescrever a demonstração em laço, que é declarada depois daqui. */

  /* ── Empilhamento ─────────────────────────────────────────── */
  /* Empilhado: campo e vitrine dividem a MESMA célula do grid, então a janela
     pousa sobre o oliva sem depender de posicionamento absoluto. */
  @media (max-width:1023px){
    .palco{
      grid-template-columns:1fr; grid-template-rows:auto auto;
      gap:clamp(22px,4vh,40px); padding-bottom:0;
    }
    .fala{ grid-area:1/1; max-width:none; padding-block:0 }
    .campo{
      grid-area:2/1; position:relative; inset:auto; width:auto;
      /* align-items:center do palco impediria o campo de esticar e ele
         colapsaria para altura zero, deixando a janela pousada no Paper. */
      align-self:stretch;
      margin-inline:calc(clamp(20px,4vw,56px) * -1);
      border-radius:0; animation:none;
    }
      grid-area:2/1; position:relative; inset:auto; transform:none;
      width:auto; align-self:center;
      padding:clamp(22px,4vw,36px) clamp(20px,4vw,56px) clamp(18px,3vw,28px);
    }
    .rodape{ font-size:.8rem }
  }
  @media (max-width:1023px){
    /* O documento encolhe junto com a janela para não estourar a borda. */
                padding:10px 11px 12px }
    .legenda{ padding-bottom:12px }
  }
  @media (max-width:560px){
    /* Abaixo disto não há largura que faça o documento ser legível em vez de
       mancha. Melhor ausente do que ilegível. */
  }

/* ═══════════════════════════════════════════════════════════════
   DEMONSTRAÇÃO EM LAÇO — as quatro jornadas

   Substitui a sequência anterior, que rodava 2,9s uma vez só e nunca
   mais: quem chegasse três segundos depois via um cartaz parado. Aqui
   o ciclo é de 24s, quatro cenas de 6s, contínuo.

   Padrão sem animação: cena 1 visível, as outras ocultas. Assim, com
   `prefers-reduced-motion`, sobra uma tela legível em vez de quatro
   empilhadas uma sobre a outra.
   ═══════════════════════════════════════════════════════════════ */

/* Grade empilhada em vez de posicionamento absoluto: o container passa a ter
   a altura da cena MAIS ALTA sozinho. A versao anterior usava min-height
   chutado (196px) contra conteudo de 307px, e a janela — que tem
   overflow:hidden — cortava o rodape de todas as cenas. */
  grid-area:1/1; opacity:0;
  animation:cena 24s var(--saida) infinite both;
}
.cena:first-child{ opacity:1 }
.cena:nth-child(1){ animation-delay:0s }
.cena:nth-child(2){ animation-delay:6s }
.cena:nth-child(3){ animation-delay:12s }
.cena:nth-child(4){ animation-delay:18s }

/* ┌─ A JANELA FICAVA EM BRANCO A CADA SEIS SEGUNDOS ────────────────────────┐
   │ Defeito real, corrigido em 30/07/2026, e a conta é simples de refazer:  │
   │ ciclo de 24s, quatro cenas, atrasos de 0/6/12/18s.                      │
   │                                                                          │
   │ Com os quadros antigos (visível de 5% a 22%), a cena 1 apagava aos      │
   │ 5,28s e a cena 2 só acendia aos 7,2s. Entre 6,0s e 6,48s NENHUMA das    │
   │ quatro tinha opacidade — a janela do produto ficava literalmente vazia  │
   │ meio segundo a cada seis, e apagada ou fraca por quase dois.            │
   │                                                                          │
   │ Foi isso que apareceu em várias capturas como "a janela está vazia", e  │
   │ eu procurei defeito de layout por três rodadas antes de refazer a conta │
   │ do relógio.                                                             │
   │                                                                          │
   │ Agora as cenas se CRUZAM: a que sai só termina de sair quando a que     │
   │ entra já está entrando. Fim visível em 25% é exatamente o começo da     │
   │ seguinte, e a sobreposição de 4% é a dissolução entre as duas.          │
   └──────────────────────────────────────────────────────────────────────────┘ */

/* A aba ativa acompanha a cena. Sem animar font-weight: mudaria a
   métrica do texto e a barra inteira tremeria a cada troca.

   ┌─ AS QUATRO ABAS NASCIAM TODAS ACESAS ───────────────────────────────────┐
   │ Defeito real, corrigido em 30/07/2026, e da mesma família do relógio de │
   │ cenas logo acima — mas por outro motivo, e por isso está escrito.       │
   │                                                                         │
   │ `animation-fill-mode:both` com atraso POSITIVO manda o navegador pintar │
   │ o quadro de 0% durante toda a espera. Nas cenas e nos documentos isso   │
   │ é inofensivo por acidente feliz: o quadro de 0% deles é `opacity:0`,    │
   │ invisível. Aqui o quadro de 0% é A ABA ACESA.                           │
   │                                                                         │
   │ Resultado medido: com atrasos de 0/6/12/18s, em t=0 as QUATRO abas      │
   │ apareciam ativas ao mesmo tempo, e a última só se acertava aos 18s —    │
   │ quase o ciclo inteiro, e justamente os segundos em que alguém decide se │
   │ fica na página. A janela mostrava um aplicativo impossível.             │
   │                                                                         │
   │ A correção é o atraso NEGATIVO: a animação já nasce em andamento, e não │
   │ existe espera para preencher. D positivo vira D-24s, o que preserva     │
   │ exatamente a fase de cada aba.                                          │
   │                                                                         │
   │ De quebra, a janela acesa passou de 26% para 25%. Com 26% havia 0,24s   │
   │ de DUAS abas acesas a cada troca, para sempre — 25% é exatamente onde a │
   │ cena seguinte começa, então a passagem é limpa.                         │
   └─────────────────────────────────────────────────────────────────────────┘ */

/* Com `step-end` bastam dois quadros: o primeiro vale até o segundo chegar. */

/* As saídas seguem o mesmo relógio das cenas. */
.documento:first-of-type{ opacity:1 }
.documento:nth-of-type(1){ animation-delay:0s }
.documento:nth-of-type(2){ animation-delay:6s }
.documento:nth-of-type(3){ animation-delay:12s }
.documento:nth-of-type(4){ animation-delay:18s }


/* ═══════════════════════════════════════════════════════════════
   PÁGINAS INTERNAS — Sobre, Ajuda, Contato

   Não são "uma tela só": aqui o trabalho do visitante é LER, e texto
   longo pede rolagem, medida de leitura e ar. A identidade viaja pela
   cor, pela tipografia e pela navegação; a estrutura serve à leitura.
   ═══════════════════════════════════════════════════════════════ */

.pagina{ min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto;
         max-width:1440px; margin-inline:auto }

.leitura{
  width:min(64ch,100%);
  margin-inline:auto;
  padding:clamp(28px,5vh,64px) clamp(20px,4vw,56px) clamp(48px,8vh,96px);
}
.leitura h1{
  font-family:'Archivo SemiExpanded',Archivo,system-ui,sans-serif;
  font-size:clamp(1.9rem,4.4vw,3rem); font-weight:300; line-height:1.06;
  letter-spacing:-.03em; margin:0 0 clamp(16px,3vh,28px); text-wrap:balance;
}
.leitura h2{
  font-size:1.18rem; font-weight:600; letter-spacing:-.015em;
  margin:clamp(34px,5vh,52px) 0 10px;
}
/* Equilibra as linhas dos títulos curtos. Medido a 375px: o h3 "Simplicidade é
   a promessa, não o enfeite." deixava 54px de última linha contra 240px da
   anterior — viúva. Ajuste de composição, não de texto. */
.leitura h2, .bloco h3, .leitura dt{ text-wrap:balance }
.leitura h2:first-of-type{ margin-top:clamp(24px,4vh,36px) }
.leitura p{ margin:0 0 16px }
.leitura .abre{ font-size:1.18rem; color:var(--olive); margin-bottom:clamp(20px,3vh,32px) }
.leitura ul{ margin:0 0 16px; padding-left:0; list-style:none }
.leitura li{ position:relative; padding-left:22px; margin-bottom:9px }
.leitura li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:9px; height:1px; background:var(--sage);
}
.leitura a{ color:var(--walnut); text-decoration:underline; text-underline-offset:3px }
/* Link que é o único conteúdo do parágrafo não é "inline em frase", então não
   cai na exceção do WCAG 2.5.8: media 19px e precisa de 24. Link no meio de
   texto continua isento — a altura dele é imposta pela entrelinha em volta. */
.leitura p > a:only-child{ display:inline-block; padding:4px 0 }
.leitura dl{ margin:0 0 16px }
.leitura dt{ font-weight:600; margin-top:18px }
.leitura dd{ margin:4px 0 0; color:var(--olive) }

/* Aviso de rascunho: precisa ser impossível de confundir com texto final. */
.rascunho{
  background:var(--olive); color:var(--cream);
  border-radius:var(--r-painel); padding:20px 24px;
  margin:0 0 clamp(28px,4vh,44px); font-size:.94rem;
}
.rascunho b{ display:block; margin-bottom:6px; color:#fff }

.blocos{ display:grid; gap:14px; margin:0 0 16px }
.bloco{
  border:1px solid var(--taupe); border-radius:var(--r-painel);
  padding:20px 22px;
}
.bloco h3{ margin:0 0 6px; font-size:1rem; font-weight:600; letter-spacing:-.01em }
.bloco p{ margin:0; color:var(--olive) }

/* Navegação das páginas internas */
.topo .paginas{ display:flex; align-items:center; gap:clamp(14px,2.4vw,26px) }
.topo .paginas a{
  font-size:.94rem; color:var(--olive); text-decoration:none;
  padding:8px 0; border-bottom:1px solid transparent; transition:border-color .18s;
}
.topo .paginas a:hover{ border-bottom-color:var(--olive) }
.topo .paginas a[aria-current=page]{ border-bottom-color:var(--olive); font-weight:500 }

/* Rodapé com endereço */
.rodape{ align-items:flex-start }
.endereco{ margin:0; font-style:normal; color:var(--olive); line-height:1.7 }
/* Mesmo motivo do .quem a: como texto puro o alvo fica com 14px de altura,
   abaixo do minimo de 24px do WCAG 2.5.8. */
.endereco a{ display:inline-block; padding:5px 0; text-decoration:none;
             border-bottom:1px solid var(--olive) }
.endereco a:hover{ border-bottom-width:2px }
.rodape .elos{ display:flex; flex-wrap:wrap; gap:4px 18px; margin:0 0 8px }
.rodape .elos a{ text-decoration:none; border-bottom:1px solid var(--taupe);
                 padding:3px 0 }
.rodape .elos a:hover{ border-bottom-color:var(--olive) }

/* ══════════════════ AS INTERNAS NO ESCURO ══════════════════  (30/07/2026)

   Decisão do fundador: *"sempre modo escuro e modo claro, e o padrão principal
   é o da app.ocium.com.br"*. Até aqui o tema existia só na inicial, e quem
   escolhesse escuro e clicasse em "Sobre" caía numa página clara sem botão
   para voltar — que lê como defeito, não como escolha.

   ┌─ POR QUE O ESCOPO É `body.interna` E NÃO `body` ───────────────────────┐
   │ Porque `body` é Paper para o site inteiro, e quem pinta a inicial de    │
   │ escuro é `.cena-viva`. Uma regra em `body` alcançaria as duas e as duas │
   │ brigariam pela mesma propriedade, com o resultado decidido pela ordem   │
   │ no arquivo — que é o pior lugar para guardar uma decisão de design.     │
   │ A classe torna o alvo explícito e deixa a inicial intocada.             │
   └─────────────────────────────────────────────────────────────────────────┘

   O QUE ESTA PÁGINA NÃO GANHA, e é decisão: a arte do cérebro. No aplicativo
   ela vive atrás de tudo, mas a regra do `direcao-visual.md` que proíbe campo
   de cor grande atrás de TEXTO LONGO nunca foi revogada — foi revogada só para
   o portão, que é palco. Sobre e Ajuda são texto longo; é exatamente o caso
   que a regra descreve. Fundo chapado aqui é obediência, não economia.

   CONTRASTE, medido e não estimado (sobre Ink #2C2E22):
     Cream 10.17:1 · Cream Dim 8.68:1 · Taupe 7.24:1 · Walnut claro 5.51:1
   O Walnut puro mede 1.63:1 aqui e por isso NÃO aparece neste bloco.
   ═══════════════════════════════════════════════════════════════════════ */

html[data-tema=escuro] body.interna{ background:var(--ink); color:var(--cream) }
html[data-tema=escuro] body.interna :focus-visible{ outline-color:var(--cream) }

/* Navegação e marca */
html[data-tema=escuro] .interna .marca{ color:var(--cream) }
html[data-tema=escuro] .interna .topo .paginas a{ color:var(--cream-fraco) }
html[data-tema=escuro] .interna .topo .paginas a:hover{ border-bottom-color:var(--cream) }
html[data-tema=escuro] .interna .topo .paginas a[aria-current=page]{ border-bottom-color:var(--cream) }

/* Corpo de leitura */
html[data-tema=escuro] .interna .leitura .abre{ color:var(--cream-fraco) }
html[data-tema=escuro] .interna .leitura dd{ color:var(--cream-fraco) }
html[data-tema=escuro] .interna .leitura a{ color:var(--walnut-claro) }
/* O traço da lista era Sage, que mede 4.11:1 aqui. Ele é decoração e não
   texto, então não reprova — mas some, que dá no mesmo. */
html[data-tema=escuro] .interna .leitura li::before{ background:var(--taupe) }

/* Blocos de valor: a borda vira o mesmo fio de vidro do aplicativo, o
   `--vidro-linha` de lá. Taupe cheio sobre Ink desenharia uma moldura mais
   forte que o título que ela cerca. */
html[data-tema=escuro] .interna .bloco{ border-color:rgba(232,220,197,.22) }
html[data-tema=escuro] .interna .bloco p{ color:var(--cream-fraco) }

/* Rodapé */
html[data-tema=escuro] .interna .rodape{ color:var(--cream-fraco); border-top-color:rgba(232,220,197,.22) }
html[data-tema=escuro] .interna .rodape .elos a{ border-bottom-color:rgba(232,220,197,.34) }
html[data-tema=escuro] .interna .rodape .elos a:hover{ border-bottom-color:var(--cream) }
html[data-tema=escuro] .interna .endereco{ color:var(--cream-fraco) }
html[data-tema=escuro] .interna .endereco a{ border-bottom-color:var(--cream-fraco) }


/* Variante da saída para o que NÃO é peça formal: comunicado e post não têm
   régua de timbre nem título centralizado — fingir que têm seria mentir sobre
   o que o produto entrega. */
.documento.post{ padding:14px 15px 15px }
.documento.post .d-texto{ text-align:left; margin-bottom:7px }
.p-de{
  margin:0 0 8px; padding-bottom:6px; font-size:5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--p-mudo);
  border-bottom:1px solid var(--p-linha);
}

/* ═══════════════════════════════════════════════════════════════
   MOVIMENTO REDUZIDO

   A versão anterior fazia `animation:none !important` em tudo. Era
   grosseira e teve consequência real: em navegador com a preferência
   ligada — que é o padrão em vários aparelhos — a página inteira ficava
   estática, e nenhuma quantidade de animação escrita aparecia.

   `prefers-reduced-motion` pede ausência de DESLOCAMENTO, não ausência
   de informação. Então aqui: somem as entradas decorativas e todo
   translate/rotate; a demonstração continua rodando, em fusão de
   opacidade pura. Quem pediu menos movimento continua vendo o produto
   trabalhar.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){

  /* Entradas decorativas: não informam nada, saem inteiras. */
  .campo,.janela{ animation:none !important }
  .acao{ transition:none !important }
  .acao:hover{ transform:none !important }

  /* A demonstração permanece — sem deslocar nada. */

  @keyframes cenaFusao{
    0%       { opacity:0 }
    4%,25%    { opacity:1 }
    29%,100% { opacity:0 }
  }
  @keyframes docFusao{
    0%,6%    { opacity:0 }
    11%,25%  { opacity:1 }
    29%,100% { opacity:0 }
  }
}

/* ═══════════════════════════════════════════════════════════════
   A CENA ESCURA — a página inicial, 30/07/2026

   A página inicial passou a ser o MESMO mundo do portão do aplicativo: a
   arte do cérebro em tela cheia, com a fala e a janela do produto flutuando
   dentro dela.

   A razão é de produto e não de gosto. Com o portão virando cena escura e
   luminosa, uma página inicial em Paper calmo faz de "Criar conta" um salto
   entre duas empresas — que é exatamente o problema que a migração de
   tipografia de 29/07 existiu para resolver. Resolvê-lo só na letra o
   resolvia pela metade.

   TUDO AQUI É ESCOPADO POR `.cena-viva`, e isso não é zelo: `.topo`,
   `.rodape` e `.paginas` são compartilhados com Sobre, Ajuda e Contato, que
   continuam em Paper claro porque ali o trabalho é LER. Sem o escopo, escurecer
   a inicial apagaria o texto das três.
   ═══════════════════════════════════════════════════════════════ */

.cena-viva{ background:#141810; color:var(--cream) }
.cena-viva .quadro{ position:relative; max-width:none; isolation:isolate }

/* A arte fica FORA do que rola e cobre a viewport inteira. */
.cena-viva .fundo{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none }
.cena-viva #arte{ position:absolute; inset:0; width:100%; height:100%; display:block;
                    opacity:0; transition:opacity 1.1s ease }
.cena-viva #arte.viva{ opacity:1 }

/* A reserva, para quem não tem WebGL — placa antiga, driver na lista negra,
   contexto recusado. Mesma lógica da reserva do portão, inclusive o realce
   Sage a 14%: a 30% a mistura sobre Olive dá #5E6448 e o Cream Dim em cima
   cai para 3.6:1. */
.cena-viva .fundo-reserva{ position:absolute; inset:0; overflow:hidden }
.cena-viva .fundo-reserva::before{
  content:''; position:absolute; inset:-22%;
  background:
    radial-gradient(30% 24% at 33% 31%, rgba(138,143,115,.14), transparent 70%),
    radial-gradient(46% 38% at 50% 46%, rgba(75,81,54,.55), transparent 74%),
    radial-gradient(40% 32% at 71% 68%, rgba(59,64,41,.62), transparent 72%),
    radial-gradient(62% 54% at 50% 50%, transparent 34%, rgba(20,24,16,.78) 100%);
  animation:mare 38s ease-in-out infinite alternate; will-change:transform;
}
@keyframes mare{
  from{ transform:translate3d(-2%,-1.4%,0) scale(1.05) }
  to  { transform:translate3d(2.6%,2%,0)   scale(1.13) }
}

.cena-viva .topo,
.cena-viva .palco,
.cena-viva .rodape{ position:relative; z-index:1 }

/* ── AS DUAS FAIXAS, e por que elas são SÓLIDAS ──────────────────
   O teto de luz do sombreador protege duas regiões: o bloco de fala e a
   janela do produto. No RESTO da tela o teto é 0,190, e ali nenhum texto
   passa. E isto é MEDIDO por suíte, não estimado à mão: `testar-portao-
   contraste.js` varre o cubo RGB sob o teto de 0,190 e acha, no pior caso,
   Cream em 3,18:1 e Cream Dim em 2,71:1. Os dois reprovam.

   Há um teste que prova justamente a REPROVAÇÃO, e ele existe para impedir
   que alguém "simplifique" removendo estas faixas: se um dia os dois passarem
   no teto livre, a suíte avisa que as faixas viraram peso morto.

   Cabeçalho e rodapé têm texto e ficam fora daquelas duas máscaras. Poderiam
   entrar nelas, e não entram por escolha: a máscara escurece a arte, e três
   máscaras deixariam quase nada aceso. Faixa sólida resolve sem gastar cena —
   e o contraste deixa de depender do quadro, porque a arte não atravessa.
   Cream sobre #141810 mede 13,25:1; Cream Dim, 11,30:1.

   De quebra, as duas faixas emolduram a arte como um filme, que é a moldura
   que a referência do fundador tinha. */
.cena-viva .topo,
.cena-viva .rodape{ background:#141810 }
.cena-viva .topo::after,
.cena-viva .rodape::before{
  content:''; position:absolute; left:0; right:0; height:72px; pointer-events:none;
}
.cena-viva .topo::after{ top:100%; background:linear-gradient(#141810,transparent) }
.cena-viva .rodape::before{ bottom:100%; background:linear-gradient(transparent,#141810) }

.cena-viva .marca{ color:var(--cream); display:inline-flex; align-items:center; gap:9px }
.cena-viva .topo .paginas a{ color:var(--cream-fraco, #D8CCB2) }
.cena-viva .topo .paginas a:hover{ border-bottom-color:var(--cream) }

/* ── A fala ──────────────────────────────────────────────────────
   Os três textos nascem em Olive, que é cor de texto sobre Paper e some
   sobre a arte (1,06:1). Sage também não serve aqui: mede 2,27:1 sob o teto
   de 0,088. Sobram os dois Cream, e é o que se usa. */
.cena-viva .fala{ max-width:min(34rem,46%) }
.cena-viva .kicker{ color:var(--cream-fraco, #D8CCB2) }
.cena-viva h1{ color:var(--cream) }
.cena-viva .apoio{ color:var(--cream-fraco, #D8CCB2) }

/* Walnut continua sendo o Walnut, e agora tem um segundo nível ao lado: a
   liberdade de 30/07 dispensou a Regra do Ponto Único fora do aplicativo, mas
   dois botões de peso igual continuariam sendo desenho ruim, não ousadia. */
.cena-viva .acao{ box-shadow:0 18px 40px -16px rgba(12,16,9,.9) }
.cena-viva .acao-quieta{
  display:inline-block; margin-left:18px; color:var(--cream);
  font-size:.94rem; text-decoration:none;
  padding:8px 2px; border-bottom:1px solid rgba(232,220,197,.32);
  transition:border-color .18s;
}
.cena-viva .acao-quieta:hover{ border-bottom-color:var(--cream) }

/* O campo Olive some: a arte tomou o lugar dele. Fica o seletor para o caso
   de a marcação antiga voltar por engano — some sem quebrar layout. */
.cena-viva .campo{ display:none }

.cena-viva .legenda{ position:static; padding:0; color:var(--cream-fraco, #D8CCB2);
                       font-size:.72rem; order:3; width:100%; margin:6px 0 0 }

.cena-viva .rodape{ border-top:0; color:var(--cream-fraco, #D8CCB2); flex-wrap:wrap }
.cena-viva .rodape .elos a{ border-bottom-color:rgba(232,220,197,.30) }
.cena-viva .rodape .elos a:hover{ border-bottom-color:var(--cream) }
.cena-viva .endereco{ color:var(--cream-fraco, #D8CCB2) }
.cena-viva .endereco a{ border-bottom-color:rgba(232,220,197,.30) }
.cena-viva .endereco a:hover{ border-bottom-color:var(--cream) }
.cena-viva :focus-visible{ outline-color:var(--cream) }

/* ── A marca ganha o nó ──────────────────────────────────────────
   A mesma triquetra que indica espera dentro do aplicativo. É a assinatura
   que liga site, portão e carregamento numa coisa só. Decorativa: o nome
   "Ocium" ao lado é que é lido. */
.cena-viva .marca-no{ width:22px; height:22px; flex:none; overflow:visible }
.cena-viva .marca-no path{ fill:none; stroke:var(--cream); stroke-width:5; opacity:.85 }

/* ── Movimento reduzido ──────────────────────────────────────────
   A arte congela num quadro (quem congela é o próprio sombreador). Aqui só
   se desliga a maré da reserva, que é deslocamento puro. */
@media (prefers-reduced-motion:reduce){
  .cena-viva .fundo-reserva::before{ animation:none; will-change:auto }
  .cena-viva #arte{ transition:none }
}

/* ═══════════════════════════════════════════════════════════════
   A MESMA CENA, DE DIA — 30/07/2026

   Pedido do fundador, junto com o botão sol/lua do aplicativo: os dois lados
   passam a ter dia e noite, e pela mesma razão que passaram a partilhar a
   letra e a arte. Preferência que valesse só num dos domínios faria de
   "Criar conta" de novo um salto entre duas empresas — resolvido pela metade
   é o defeito que este projeto já corrigiu duas vezes.

   ┌─ A CLASSE MUDOU DE NOME, e não é cosmética ────────────────────────────┐
   │ Era `.cena-escura`. Com o modo claro ela passaria metade do tempo a     │
   │ dizer o contrário do que a página é — e legenda que mente é exatamente  │
   │ o defeito que a rodada 1 deste LOOP caçou, dois commits atrás.          │
   │ `.cena-viva` diz o que ela sempre significou de verdade: a página que   │
   │ mora DENTRO da arte, seja qual for a cor da arte.                       │
   └──────────────────────────────────────────────────────────────────────────┘

   O QUE NÃO MUDA: as duas faixas sólidas. Elas existem porque o cabeçalho e o
   rodapé ficam fora das duas máscaras do sombreador, e no quadro livre — teto
   0,190 de noite, piso 0,190 de dia — nenhum texto passa em regime nenhum.
   Há teste provando a reprovação nos DOIS lados, justamente para que ninguém
   "simplifique" removendo as faixas ao ver a cena clara e achar que agora dá.
   ═══════════════════════════════════════════════════════════════ */

html[data-tema=claro] .cena-viva{ background:var(--paper); color:var(--ink) }

/* A reserva sem WebGL, no regime do dia. Reescrita e não clareada por
   opacidade: clarear a versão escura daria cinza-esverdeado sujo, que é o
   oposto do que a cena do dia é. O centro é o mais CLARO aqui — de noite era o
   mais escuro — e pelo mesmo motivo dos dois lados: é onde a fala assenta. */
html[data-tema=claro] .cena-viva .fundo-reserva::before{
  background:
    radial-gradient(30% 24% at 33% 31%, rgba(159,186,131,.34), transparent 70%),
    radial-gradient(46% 38% at 50% 46%, rgba(251,248,241,.85), transparent 74%),
    radial-gradient(40% 32% at 71% 68%, rgba(92,138,78,.28), transparent 72%),
    radial-gradient(62% 54% at 50% 50%, transparent 34%, rgba(231,223,203,.90) 100%),
    linear-gradient(var(--paper),var(--paper));
}

html[data-tema=claro] .cena-viva .topo,
html[data-tema=claro] .cena-viva .rodape{ background:var(--paper) }
html[data-tema=claro] .cena-viva .topo::after{ background:linear-gradient(var(--paper),transparent) }
html[data-tema=claro] .cena-viva .rodape::before{ background:linear-gradient(transparent,var(--paper)) }

html[data-tema=claro] .cena-viva .marca{ color:var(--ink) }
html[data-tema=claro] .cena-viva .marca-no path{ stroke:var(--olive) }
html[data-tema=claro] .cena-viva .topo .paginas a{ color:var(--olive) }
html[data-tema=claro] .cena-viva .topo .paginas a:hover{ border-bottom-color:var(--olive) }

/* A FALA INTEIRA É INK NO DIA — kicker, título e apoio —, e isto é uma
   exceção deliberada ao sistema, que manda apoio em Olive sobre papel.

   A troca foi por CENA, e a conta é direta. O piso de luz atrás deste bloco é
   o que sustenta o texto; Olive só passa de 4,5:1 sobre luminância >= 0,52, e
   um piso nesse patamar clareia tanto a arte em volta que o cérebro vira
   marca-d'água — conferido no render em 30/07/2026, onde a inicial saiu com a
   massa quase invisível. Com a fala em Ink, o piso desce para 0,420 e a
   figura volta a aparecer entre a fala e o outdoor.

   A hierarquia não se perde porque nunca dependeu da cor: o display tem
   4,2rem em peso 300 e o apoio 1,06rem em 400. É escala e peso, que é a tese
   tipográfica do projeto desde o começo.

   Fora desta cena, sobre papel liso, o apoio continua Olive — ver /sobre e
   /ajuda. A exceção é só onde há arte por trás. */
html[data-tema=claro] .cena-viva .kicker{ color:var(--ink) }
html[data-tema=claro] .cena-viva h1{ color:var(--ink) }
html[data-tema=claro] .cena-viva .apoio{ color:var(--ink) }

html[data-tema=claro] .cena-viva .acao{ box-shadow:0 18px 40px -18px rgba(75,81,54,.42) }
html[data-tema=claro] .cena-viva .acao-quieta{ color:var(--olive); border-bottom-color:var(--taupe) }
html[data-tema=claro] .cena-viva .acao-quieta:hover{ border-bottom-color:var(--olive) }

html[data-tema=claro] .cena-viva .rodape{ color:var(--olive) }
html[data-tema=claro] .cena-viva .rodape .elos a{ border-bottom-color:var(--taupe) }
html[data-tema=claro] .cena-viva .rodape .elos a:hover{ border-bottom-color:var(--olive) }
html[data-tema=claro] .cena-viva .endereco{ color:var(--olive) }
html[data-tema=claro] .cena-viva .endereco a{ border-bottom-color:var(--taupe) }
html[data-tema=claro] .cena-viva .endereco a:hover{ border-bottom-color:var(--olive) }
html[data-tema=claro] .cena-viva :focus-visible{ outline-color:var(--ink) }

/* O OUTDOOR de dia é INK, e não Olive, e a diferença aqui não é de gosto.
   Ele assenta direto na arte sob a máscara da caixa, cujo piso é 0,330 — e
   0,330 sustenta Ink com folga, mas não sustenta Olive, que precisa de 0,52.
   Quem escolhe a cor do texto é o piso que existe atrás dele. */
html[data-tema=claro] .cena-viva .outdoor p{ color:var(--ink) }

/* ═══════════════════════════════════════════════════════════════
   TRANSBORDO HORIZONTAL EM TELA ESTREITA — corrigido em 30/07/2026

   Defeito real, encontrado no render a 420px e não a 560px, e com dois
   culpados somados. Vale escrever os dois porque o sintoma não parecia com
   nenhum deles: a janela do produto aparecia VAZIA, um bloco claro sem
   conteúdo nenhum.

   1. A NAVEGAÇÃO NÃO QUEBRAVA LINHA. Cinco itens numa fila sem `flex-wrap`
      empurram a largura do documento além da viewport. "Entrar" — o link que
      leva ao produto — ficava fora da tela, e a página inteira nascia mais
      larga que o aparelho.

   2. ITEM DE GRADE NÃO ENCOLHE SOZINHO. O padrão de `min-width` num item de
      grid é `auto`, e `auto` significa "não menor que o meu conteúdo". Dentro
      da janela há texto longo e sem espaço conveniente ("Ação de cobrança —
      contrato de empreitada", o número CNJ). Sem `min-width:0`, esse texto
      vira um piso de largura que atravessa a janela, a vitrine e o palco.

   O sintoma foi enganoso porque o conteúdo ESTAVA lá — só que deslocado para
   fora do recorte da viewport. Procurei defeito de animação por um bom tempo
   antes de medir a largura do documento.
   ═══════════════════════════════════════════════════════════════ */

/* Vale para a inicial E para Sobre, Ajuda e Contato: a navegação é a mesma
   nas quatro, e o transbordo era o mesmo nas quatro. */
@media (max-width:720px){
  .topo{ flex-wrap:wrap; row-gap:4px }
  /* `flex-wrap` sozinho não bastava, e a razão é a mesma do item de grade: um
     item FLEX também tem `min-width:auto` e se recusa a ficar menor que o
     próprio conteúdo. Sem `min-width:0` a lista nunca chegava a ser estreita
     o bastante para precisar quebrar — ela simplesmente empurrava a página. */
  .topo .paginas{ flex-wrap:wrap; gap:6px 16px; min-width:0 }
}

/* A trava de largura da fala é do desktop, onde a janela do produto divide a
   tela com ela. Empilhado, não há com quem dividir: manter 46% deixaria o
   texto numa coluna estreita no meio de uma tela vazia. A regra genérica já
   fazia isso, mas perdia para `.cena-viva .fala` na especificidade. */
@media (max-width:1023px){
  .cena-viva .fala{ max-width:none }
}

/* A CORRENTE INTEIRA precisa poder encolher, e "inteira" é literal: basta UM
   elo com o padrão `auto` para o piso de largura voltar e a página inteira
   ficar mais larga que o aparelho.

   Custou três rodadas descobrir isso. Consertei a janela do produto e o
   transbordo continuou; consertei a navegação e continuou. O elo que faltava
   era o RODAPÉ — o endereço tem uma linha longa, e `.rodape` é item de grade
   do `.quadro`, então o piso dele virava o piso da página, e a navegação lá
   em cima nem precisava quebrar porque havia espaço de sobra numa página que
   já era larga demais.

   A lição que fica: transbordo horizontal se procura de FORA para dentro, no
   elemento mais externo, não no que parece quebrado. O que parece quebrado é
   quase sempre a vítima. */
.quadro > *, .pagina > *,
.topo > *, .rodape > *,
.palco, .fala, .outdoor{ min-width:0 }

/* E o texto longo precisa ter onde quebrar. `anywhere` e não `break-word`
   porque o número CNJ não tem espaço nenhum em 25 caracteres.

   O RÓTULO FICOU DE FORA, e isso foi medido em 30/07/2026: com `anywhere`
   ele também valia para o `<i>`, e "Citação" saía partido em "Citaçã" numa
   linha e "o" na outra, dentro do cartão CANAIS. O rótulo é curto por
   construção — quem precisa de quebra desesperada é o VALOR, não ele. */

/* E a culpa não era só da quebra. Numa flexbox, os dois lados encolhem em
   proporção ao tamanho natural, então o rótulo era espremido mesmo havendo
   folga do lado do valor. O rótulo não encolhe; o valor absorve e, quando
   passa de uma linha, fica alinhado à direita como o resto da coluna. */

/* O SELO "Em aprimoramento" SAIU em 30/07/2026, junto com a calculadora de
   atualização, que era o único lugar que o usava. Estilo sem marcação é o
   mesmo peso morto que a rodada 2 deste LOOP tirou daqui — 116 linhas —, e
   deixá-lo "por precaução" é como aquelas 116 linhas nasceram. */

/* ══ O BOTÃO SOL/LUA ══  (30/07/2026, ampliado no mesmo dia)
   O mesmo controle do aplicativo, na mesma linguagem, no fim da navegação.

   ┌─ ESTA LEGENDA JÁ MENTIU, E FICA REGISTRADO ────────────────────────────┐
   │ Até a ampliação ela dizia que o botão existia "SÓ NESTA página, e isso │
   │ é decisão e não esquecimento", porque Sobre, Ajuda e Contato seriam    │
   │ "Paper claro nos dois regimes". O fundador decidiu o contrário: as     │
   │ quatro páginas têm os dois modos. A frase virou falsa no instante em   │
   │ que as internas ganharam tema, e comentário que descreve o que o       │
   │ código deixou de fazer é pior que comentário nenhum — é a mesma classe │
   │ de defeito que a rodada 1 do LOOP passou o dia caçando.                │
   └─────────────────────────────────────────────────────────────────────────┘

   O desenho não vem de `<defs>` compartilhado como no aplicativo: são quatro
   instâncias idênticas de nove linhas, e um bloco de defs por página não
   economizaria nada — cada página carrega o seu de qualquer jeito. */
.tema{
  width:34px; height:34px; flex:none; display:grid; place-items:center; padding:0;
  background:none; border:1px solid rgba(232,220,197,.30); border-radius:999px;
  color:var(--cream); cursor:pointer;
  transition:background-color .18s, border-color .18s;
}
.tema:hover{ background:rgba(232,220,197,.10); border-color:var(--cream) }
html[data-tema=claro] .tema{ border-color:var(--taupe); color:var(--olive) }
html[data-tema=claro] .tema:hover{ background:rgba(75,81,54,.07); border-color:var(--olive) }
.tema svg{
  width:17px; height:17px; display:block; overflow:visible;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
/* As duas figuras ocupam o mesmo lugar e se revezam girando. Corte seco num
   ícone de 17px lê como falha de renderização: o olho não sabe se trocou ou
   se travou. */
.tema-sol,.tema-lua{
  transform-box:fill-box; transform-origin:center;
  transition:opacity .26s ease, transform .42s var(--saida);
}
.tema-lua{ opacity:0; transform:rotate(-72deg) scale(.45) }
html[data-tema=claro] .tema-sol{ opacity:0; transform:rotate(72deg) scale(.45) }
html[data-tema=claro] .tema-lua{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .tema-sol,.tema-lua{ transition:none }
}

/* ══ O OUTDOOR ══  (30/07/2026)
   No lugar da vitrine: frases do projeto trocando devagar dentro da arte, como
   letreiro visto da estrada. Quieto de propósito — quem carrega a tela é a fala
   da esquerda; isto é o eco dela, não um segundo argumento.

   NENHUMA FRASE É NOVA: as quatro já são a voz publicada da empresa, em /sobre.
   O fundador determinou que texto novo respeite o Manifesto, e o Manifesto não
   está neste repositório — reusar o aprovado é a única forma de escrever aqui
   sem inventar voz.

   ATRASO NEGATIVO, e não positivo. Com `both` e atraso positivo o navegador
   pinta o quadro de 0% durante toda a espera, e as quatro frases nasceriam
   empilhadas até o último atraso vencer. Foi exatamente o defeito das abas da
   janela do produto, no mesmo dia: negativo nasce em andamento e não tem espera
   nenhuma para preencher. */
.cena-viva .outdoor{
  position:absolute; z-index:1; pointer-events:none;
  inset-inline-end:clamp(20px,4vw,56px); top:50%; transform:translateY(-50%);
  width:min(30rem,42%); display:grid;
}
.cena-viva .outdoor p{
  grid-area:1/1; margin:0; opacity:0; text-align:right;
  font-family:'Archivo SemiExpanded',Archivo,system-ui,sans-serif;
  font-weight:300; font-size:clamp(1.25rem,2.3vw,2rem); line-height:1.18;
  letter-spacing:-.02em; color:var(--cream); text-wrap:balance;
  animation:outdoor 32s var(--saida) infinite both;
}
.cena-viva .outdoor p:nth-child(1){ animation-delay:0s }
.cena-viva .outdoor p:nth-child(2){ animation-delay:-24s }
.cena-viva .outdoor p:nth-child(3){ animation-delay:-16s }
.cena-viva .outdoor p:nth-child(4){ animation-delay:-8s }
@keyframes outdoor{
  0%       { opacity:0; transform:translateY(10px) }
  5%,22%   { opacity:1; transform:none }
  27%,100% { opacity:0; transform:translateY(-10px) }
}
/* Abaixo disto a fala já ocupa a largura toda, e o outdoor viraria sobreposição
   em cima do próprio texto. */
@media(max-width:900px){ .cena-viva .outdoor{ display:none } }
@media(prefers-reduced-motion:reduce){
  .cena-viva .outdoor p{ transform:none }
}


/* ══════════════════ A ABERTURA ══════════════════
   31/07/2026. Pedido do fundador: uma tela de carregamento ao abrir o site.

   ┌─ A TENSÃO, e ela precisa estar escrita ────────────────────────────────┐
   │ Esta inicial foi reconstruída em 30/07/2026 COM META DE LCP, e a arte  │
   │ do cérebro saiu dela por esse motivo — está no cabeçalho do            │
   │ index.html, razão 5. Uma cortina opaca sobre a página trabalha contra  │
   │ exatamente essa meta: ela adia o que o visitante vê.                   │
   │                                                                         │
   │ Por isso o tempo aqui é CURTO — 0,95 s parada e 0,45 s de saída, não   │
   │ os 1,35 s do aplicativo. No aplicativo a espera é real (portão,        │
   │ sessão, WebGL) e a cortina cobre trabalho que existe; aqui ela é       │
   │ assinatura de marca sobre uma página estática que já estaria pronta.   │
   │ Se a medição de LCP reprovar, o que sai é esta peça, não o conteúdo.   │
   └─────────────────────────────────────────────────────────────────────────┘

   NÃO TEM UMA LINHA DE JAVASCRIPT, e isso é requisito. A CSP do site é
   `script-src 'self'` e não traz 'unsafe-inline'; um bloco inline seria
   BLOQUEADO pelo navegador, e a abertura nasceria travada na tela sem erro
   visível. A saída é uma animação de CSS que termina sozinha — não depende de
   evento, de rede nem de código. Cortina que precisa de JavaScript para sair é
   cortina que pode ficar.

   O chão é o mesmo do corpo em cada tema, então ela não "abre": DISSOLVE, e o
   que aparece por baixo já estava lá. */
.abertura{
  position:fixed; inset:0; z-index:400;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  background:var(--paper);
  animation:abertura-sai .45s ease .95s forwards;
}
html[data-tema=escuro] .abertura{ background:var(--ink) }

@keyframes abertura-sai{ to{ opacity:0; visibility:hidden; transform:scale(1.02) } }

/* O NÓ SE DESENHA. `stroke-dasharray` maior que o traçado inteiro da triquetra;
   o `offset` andando até zero é a linha nascendo. É a mesma peça que indica
   espera dentro do aplicativo — a assinatura que liga site, portão e
   carregamento numa coisa só. */
.abertura-sinal{ width:72px; height:72px; overflow:visible }
.abertura-sinal use{
  fill:none; stroke:var(--olive); stroke-width:3.2; stroke-linecap:round;
  stroke-dasharray:1200; stroke-dashoffset:1200;
  animation:abertura-traco .9s cubic-bezier(.4,0,.2,1) forwards;
}
html[data-tema=escuro] .abertura-sinal use{ stroke:var(--cream-fraco) }

@keyframes abertura-traco{ to{ stroke-dashoffset:0 } }

.abertura-nome{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--olive); opacity:0; animation:abertura-nome .5s ease .3s forwards;
}
html[data-tema=escuro] .abertura-nome{ color:var(--taupe) }

@keyframes abertura-nome{ to{ opacity:1 } }

/* Quem pediu menos movimento não recebe espetáculo nenhum: o nó aparece
   inteiro e a cortina sai quase de imediato. */
@media(prefers-reduced-motion:reduce){
  .abertura{ animation-duration:.01s; animation-delay:.2s }
  .abertura-sinal use{ animation:none; stroke-dashoffset:0 }
  .abertura-nome{ animation:none; opacity:1 }
}