/* ============================================================
   entreMultiversos — camada editorial
   Sobrepõe atelier.css. Tudo que é "revista pessoal" vive aqui.
   ============================================================ */

:root {
  --serif-display: "Italiana", "Fraunces", Georgia, serif;
  --serif-corpo: "Fraunces", "Newsreader", Georgia, serif;
  --mono-met: "IBM Plex Mono", monospace;

  /* paleta de papel (para fundos invertidos pontuais) */
  --papel-cremoso: #EFECE4;
  --tinta-impressa: #18191E;

  /* registros tipográficos de jornal/revista */
  --running-tamanho: 10px;
  --folio-tamanho: 11px;
  --capitular-altura: 5.2;
  --texto-terciario: #9D9A9E;
}

/* ============================================================
   Fundo da revista — papel mineral com hairlines de pauta
   + vinheta quente que respira muito devagar
   ============================================================ */

body.revista {
  background-color: var(--tinta-base);
}

/* ============================================================
   Hexa-glifo — substitui o asterism (⁂) tipográfico.
   Inline-svg via <use href="#hexa-glifo"/>; herda cor por currentColor.
   A bolinha central é fixa em âmbar (definida no symbol).
   ============================================================ */
.hexa-glifo {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.28em;
  color: inherit;
  flex: none;
}

/* ponto-glifo — círculo simples usado como separador entre hexa-glifos
   (substituiu o ⁕ tipográfico que ficava desalinhado por ter baseline própria) */
.ponto-glifo {
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* Grão orgânico — textura de areia sobre o fundo escuro */
.grao {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.18 0 0 0 0 0 1.18 0 0 0 0 0 1.18 0 0 0 0 0 .72 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}

.grao::before,
.grao::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.grao::before {
  opacity: 0.42;
  background:
    repeating-linear-gradient(
      93deg,
      transparent 0,
      transparent 2px,
      rgba(239, 236, 228, 0.16) 3px,
      transparent 5px
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.18' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .48 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 19px 19px, 96px 96px;
}

.grao::after {
  display: none;
}

/* Vinheta removida: o fundo fica material, sem entrada de luz ampla. */
.vinheta-quente {
  display: none;
}

@keyframes vinhetaRespiro {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(28px, -22px) scale(1.04); }
}

/* Lanterna removida: evita a sensação de bola de luz seguindo o cursor. */
.lanterna {
  display: none;
}
.lanterna.viva { opacity: 0; }

/* desliga em telas que pedem menos movimento */
@media (prefers-reduced-motion: reduce) {
  .lanterna, .vinheta-quente { display: none; }
}

/* ============================================================
   Rastros de construção — camada editorial na seção Digital Artisan
   Linhas finas horizontais que derivam lentamente, sugerindo
   ofício, anotações técnicas, rastros de filosofia em aplicação.
   ============================================================ */

.philosophy-interference {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.trace-line {
  position: absolute;
  height: 1px;
  width: 0;
  max-width: var(--max, 320px);
  top: var(--y, 50%);
  left: var(--x, 0);
  background: rgba(214, 162, 74, 0.16);
  animation: costuraMove var(--d, 10s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.trace-line.tracejada {
  background: repeating-linear-gradient(
    90deg,
    rgba(214, 162, 74, 0.18) 0,
    rgba(214, 162, 74, 0.18) 8px,
    transparent 8px,
    transparent 14px
  );
}

.trace-line.cheia {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(220, 220, 210, 0.12),
    transparent
  );
}

.trace-line::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(214, 162, 74, 0.3);
  box-shadow: 0 0 4px rgba(214, 162, 74, 0.18);
}

/* Linha invertida — costura vindo da direita pra esquerda */
.trace-line.invertida {
  left: auto;
  right: var(--x, 0);
}

.trace-line.invertida::after {
  right: auto;
  left: -3px;
}

@keyframes costuraMove {
  0%   { width: 0;   opacity: 0; }
  8%   { opacity: 1; }
  70%  { width: var(--max, 320px); opacity: 1; }
  88%  { width: var(--max, 320px); opacity: 0.85; }
  100% { width: var(--max, 320px); opacity: 0; }
}

.filosofia-da:hover .philosophy-interference { opacity: 1; }
.filosofia-da-folio,
.filosofia-da-inner { position: relative; z-index: 1; }

/* @media (prefers-reduced-motion: reduce) {
  .trace-line { animation: none; opacity: 0.3; }
} */

/* margens vivas — dedicatórias quietas, não press */
.margem-fixa-esq, .margem-fixa-dir {
  position: fixed;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--bruma);
  pointer-events: none;
  z-index: 4;
  white-space: nowrap;
  opacity: 0.90;
}
.margem-fixa-esq { left: -30px; }
.margem-fixa-dir { right: -10px; transform: translateY(-50%) rotate(90deg); }

@media (max-width: 1080px) {
  .margem-fixa-esq, .margem-fixa-dir { display: none; }
}

/* ============================================================
   Header — masthead de jornal
   ============================================================ */

.cabecalho-revista {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--tinta-base) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 400ms ease;
}

/* ao rolar — fica mais transparente */
.cabecalho-revista.rolando {
  background: color-mix(in oklab, var(--tinta-base) 55%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


.ponto-vivo {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--acento);
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 50%;
  animation: chama 4.2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(214, 162, 74, 0.5);
}

@keyframes chama {
  0%, 100% { opacity: 1; transform: scale(1); }
  35% { opacity: 0.5; transform: scale(0.85); }
  70% { opacity: 0.9; transform: scale(1.05); }
}

.cabecalho-revista .faixa-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  height: 72px;
  border-bottom: 1px solid var(--bruma);
}

.cabecalho-revista .faixa-nav .nav-revista {
  flex: 1;
}

/* Digital Artisan — identidade da barra esquerda */
.cabecalho-revista .marca-da {
  font-family: var(--mono-met);
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, opacity 200ms;
}

/* efeito inverso: traço de seleção na cor dos outros links */
.cabecalho-revista .marca-da:hover,
.cabecalho-revista .marca-da.ativo {
  border-bottom-color: var(--grafite);
  opacity: 1;
}

.cabecalho-revista .nav-revista {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.cabecalho-revista .nav-revista a {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grafite);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: color 200ms, border-color 200ms;
}

.cabecalho-revista .nav-revista a:hover { color: var(--papel-2); }
.cabecalho-revista .nav-revista a.ativo {
  color: var(--papel);
  border-bottom-color: var(--acento);
}

.cabecalho-revista .selo-dir {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grafite);
  margin-left: -22px;
}

/* ============================================================
   Capa — orquestra editorial em duas colunas.
   Esquerda: título "Crescendo" (Italiana italic, três escalas).
   Direita: planta baixa da casa (SVG estático, 8 cômodos clicáveis).
   ============================================================ */

.capa-orquestra {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding: 16px 0 24px;
  position: relative;
}

/* hairline vertical separando título e mapa — marca a deliberação editorial */
.capa-orquestra::before {
  display: none;
}

/* ===== segunda coluna: mapa como planta baixa ===== */
.capa-mapa {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.capa-mapa-cabec,
.capa-mapa-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono-met);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--papel-2);
}

.capa-mapa-cabec em {
  font-style: italic;
  color: var(--acento);
  font-family: var(--serif-display);
  font-size: 14px;
  letter-spacing: 0;
  padding: 0 6px;
}

.capa-mapa-cabec .meta {
  color: var(--grafite);
  font-size: 10px;
}

.capa-mapa-rodape {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grafite);
  padding-top: 8px;
  border-top: 1px solid var(--bruma);
}

.capa-mapa-rodape em {
  color: var(--papel-2);
  font-style: italic;
}

/* ===== planta baixa: SVG e seus elementos ===== */
.planta {
  position: relative;
  width: 100%;
  aspect-ratio: 1.35 / 1;
  background: linear-gradient(rgba(214, 162, 74, 0.018), rgba(214, 162, 74, 0.005));
}

.planta svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* paredes — linhas finas em bruma */
.planta .gp {
  fill: transparent;
  stroke: var(--bruma);
  stroke-width: 1;
}

/* portas — arcos âmbar quase imperceptíveis */
.planta .gp-portas path {
  fill: none;
  stroke: var(--acento);
  stroke-width: 1.2;
  opacity: 0.7;
}

/* cômodos — clicáveis, hover acende em âmbar */
.planta .room { cursor: pointer; }

.planta .room rect {
  fill: transparent;
  stroke: var(--bruma);
  stroke-width: 1;
  transition: stroke 200ms ease, fill 200ms ease;
}

.planta .room:hover rect {
  stroke: var(--acento);
  fill: rgba(214, 162, 74, 0.06);
}

.planta .room .rn {
  font-family: var(--mono-met);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  fill: var(--grafite);
  transition: fill 200ms ease;
}

.planta .room .rt {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 17px;
  fill: var(--papel);
  transition: fill 200ms ease;
}

.planta .room .rs {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  fill: var(--papel-2);
}

.planta .room:hover .rt,
.planta .room:hover .rn { fill: var(--acento); }

/* rosa-dos-ventos + escala — marginália cartográfica */
.planta .compass {
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--grafite);
}

/* ===== título Crescendo — três escalas em escada ===== */
.titulo-crescendo {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.015em;
  margin: 0;
}

.titulo-crescendo .linha {
  display: block;
  position: relative;
  /* desliga as animações herdadas — Crescendo é estático */
  animation: none !important;
  transform: none !important;
  will-change: auto;
  padding-left: 0;
}

.titulo-crescendo .linha-1 {
  font-size: clamp(48px, 5.4vw, 84px);
  color: var(--papel-2);
  margin-left: 6%;
  line-height: 1;
}

.titulo-crescendo .linha-2 {
  font-size: clamp(80px, 9.6vw, 148px);
  color: var(--papel);
  margin-left: 14%;
  line-height: 0.95;
  margin-top: 6px;
}

.titulo-crescendo .linha-3 {
  font-size: clamp(120px, 14.8vw, 228px);
  color: var(--papel);
  line-height: 0.82;
  margin-top: -4px;
  letter-spacing: -0.025em;
}

@media (max-width: 980px) {
  .capa-orquestra {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .capa-orquestra::before { display: none; }
}

/* ===== título v3 — grande · pequeno · grande ===== */
.capa-titulo.v3 {
  font-family: "Ogg", var(--serif-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
  overflow: visible;
}

.capa-titulo.v3 .ln {
  display: block;
}

.capa-titulo.v3 .ln-1 {
  font-size: 118px;
  margin-left: 25%;
  line-height: 0.9;
  color: var(--papel);
}

/* ln-2: a junta estrutural — não é mais palavra italica, virou
   uma marca tipográfica que rima com a gramática da estante. */
.capa-titulo.v3 .ln-2 {
  margin-left: 62%;
  transform: translateX(-50%);
  margin-top: 20px;
  margin-bottom: 8px;
  line-height: 1;
}

.capa-titulo.v3 .ln-2 .marca {
  font-family: var(--mono-met);
  font-style: normal;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: var(--acento);
  display: inline-block;
  /* compensa o letter-spacing extra à direita pra não pender */
  padding-left: 0.26em;
}

.capa-titulo.v3 .ln-3 {
  font-size: 212px;
  margin-left: 1%;
  margin-top: 12px;
  line-height: 1;
  color: var(--papel);
  letter-spacing: -0.02em;
  overflow: visible;
}

.giro-palavra {
  margin-left: 9%;
}

/* ===== Andaime tipográfico ao redor do título v3 ===== */

.capa-titulo-bloco {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
  overflow: visible;
}

/* folio: marca editorial acima do título */
.capa-folio {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
}

.folio-linha {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--bruma) 0%, var(--bruma) 60%, transparent 100%);
}

.folio-numero {
  color: var(--acento);
  font-weight: 500;
  letter-spacing: 0.2em;
}

/* leia: pequena frase italica abaixo do título com brasa pulsante */
.capa-leia {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: clamp(20px, 4%, 60px);
  margin-top: 8px;
}

.leia-glifo {
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--acento);
  font-size: 18px;
  line-height: 1;
}

.leia-frase {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  color: var(--grafite);
  letter-spacing: 0;
}

/* brasa lenta — ponto âmbar pulsando muito devagar */
.leia-pulso {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acento);
  margin-left: 4px;
  animation: brasaLenta 4.8s ease-in-out infinite;
}

@keyframes brasaLenta {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.35); }
}

/* ===== Tinta secando — fade-in escalonado das linhas do título ===== */
@media (prefers-reduced-motion: no-preference), (prefers-reduced-motion: reduce) {
  .capa-titulo.v3 .ln {
    animation: tintaSecando 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .capa-titulo.v3 .ln-1 { animation-delay: 0.18s; }
  .capa-titulo.v3 .ln-2 { animation-delay: 0.38s; }
  .capa-titulo.v3 .ln-3 { animation-delay: 0.58s; }

  .capa-folio { animation: tintaSecando 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .capa-leia  { animation: tintaSecando 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
                animation-delay: 0.85s; }
}

@keyframes tintaSecando {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ===== Estante de lombadas ===== */
.estante {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.estante-prateleira {
  position: relative;
  padding: 0 0 14px;
}

.estante-prateleira::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--bruma);
}

.estante-prateleira::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  background: linear-gradient(to bottom, var(--bruma-2), transparent);
}

.lombadas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-items: end;
  min-height: 200px;
}

.lombada {
  position: relative;
  border: 1px solid var(--bruma);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lombada:hover {
  border-color: var(--acento);
  background: rgba(214, 162, 74, 0.05);
}

.lombada .vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 22px;
  color: var(--papel);
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.lombada .vertical .vn {
  font-family: var(--mono-met);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--grafite);
  text-transform: uppercase;
}

.lombada .vertical .vs {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  color: var(--papel-2);
}

.lombada:hover .vertical { color: var(--acento); }

.lombada.h1 { height: 200px; }
.lombada.h2 { height: 230px; }
.lombada.h3 { height: 180px; }
.lombada.h4 { height: 215px; }
.lombada.h5 { height: 240px; }
.lombada.h6 { height: 190px; }
.lombada.h7 { height: 210px; }
.lombada.h8 { height: 225px; }

/* ===== Stagger de entrada das lombadas — segue a tinta secando ===== */
@media (prefers-reduced-motion: no-preference), (prefers-reduced-motion: reduce) {
  .lombadas .lombada {
    animation: lombadaEntrando 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .estante-prateleira:nth-of-type(1) .lombada:nth-child(1) { animation-delay: 1.0s; }
  .estante-prateleira:nth-of-type(1) .lombada:nth-child(2) { animation-delay: 1.08s; }
  .estante-prateleira:nth-of-type(1) .lombada:nth-child(3) { animation-delay: 1.16s; }
  .estante-prateleira:nth-of-type(1) .lombada:nth-child(4) { animation-delay: 1.24s; }
  .estante-prateleira:nth-of-type(2) .lombada:nth-child(1) { animation-delay: 1.32s; }
  .estante-prateleira:nth-of-type(2) .lombada:nth-child(2) { animation-delay: 1.40s; }
  .estante-prateleira:nth-of-type(2) .lombada:nth-child(3) { animation-delay: 1.48s; }
  .estante-prateleira:nth-of-type(2) .lombada:nth-child(4) { animation-delay: 1.56s; }
}

@keyframes lombadaEntrando {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ===== Reveal on scroll — implementação segura =====
   Default: tudo visível.
   JS adiciona .pre-revelado apenas em elementos fora da viewport inicial,
   e só se prefers-reduced-motion estiver OFF.
   IntersectionObserver remove a classe quando o elemento entra na viewport.
   Se JS falhar em qualquer ponto, conteúdo continua visível.
*/
.revelar.pre-revelado {
  opacity: 1;
  translate: 0 32px;
  transition: opacity 950ms cubic-bezier(0.2, 0.7, 0.2, 1),
              translate 950ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ============================================================
   Filosofia — seção Digital Artisan na homepage
   ============================================================ */

.filosofia-da {
  padding: var(--gap-l) 0;
  position: relative;
}

/* folio canto superior direito — referência editorial */
.filosofia-da-folio {
  position: absolute;
  top: var(--gap-l);
  right: 0;
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
}

.filosofia-da-folio em {
  font-style: italic;
  font-family: var(--serif-corpo);
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  color: var(--papel-2);
  padding-left: 4px;
  font-size: 13px;
  vertical-align: baseline;
}

/* layout: título full-width (linha 1) + 2 colunas abaixo (linha 2) */
.filosofia-da-inner {
  display: grid;
  grid-template-columns: minmax(220px, 36%) 1fr;
  column-gap: clamp(32px, 5%, 80px);
  row-gap: var(--gap);
}

.filosofia-da-esq {
  grid-column: 1 / -1;
  padding-bottom: var(--gap);
  border-bottom: 1px solid var(--bruma);
}

.filosofia-da-etiqueta {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento);
  display: block;
  margin-bottom: 14px;
}

.filosofia-da-titulo {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(52px, 5.5vw, 92px);
  color: var(--papel);
  line-height: 0.9;
  margin: 0;
  white-space: nowrap;
}

/* coluna esquerda — verbete tipo dicionário */
.filosofia-da-margem {
  grid-column: 1;
  padding-right: clamp(20px, 3%, 48px);
  border-right: 1px solid var(--bruma);
  align-self: start;
}

.filosofia-da-margem .verbete {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
  display: block;
  margin-bottom: 12px;
}

.filosofia-da-definicao {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--papel-2);
  line-height: 1.65;
  margin: 0;
  max-width: 320px;
}

.filosofia-da-definicao em {
  color: var(--papel);
  font-style: italic;
}

/* coluna direita — corpo de texto + capitular */
.filosofia-da-corpo {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.filosofia-da-texto {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.68;
  color: var(--papel-2);
  margin: 0;
}

.filosofia-da-texto + .filosofia-da-texto {
  color: var(--texto-terciario);
  font-style: normal;
  font-size: 15px;
}

/* capitular — letra capitular âmbar, momento visual da seção */
.capitular {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 5em;
  line-height: 0.82;
  float: left;
  margin: 8px 14px -4px 0;
  color: var(--acento);
  font-weight: 400;
}

.filosofia-da-link {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafite);
  text-decoration: none;
  border-bottom: 1px solid var(--bruma);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color 200ms, border-color 200ms;
  margin-top: 12px;
}

.filosofia-da-link:hover {
  color: var(--acento);
  border-bottom-color: var(--acento);
}

@media (max-width: 860px) {
  .filosofia-da-folio { position: static; display: block; margin-bottom: 16px; }
  .filosofia-da-inner { grid-template-columns: 1fr; }
  .filosofia-da-esq,
  .filosofia-da-margem,
  .filosofia-da-corpo { grid-column: 1; }
  .filosofia-da-margem {
    border-right: none;
    border-bottom: 1px solid var(--bruma);
    padding-right: 0;
    padding-bottom: var(--gap-s);
  }
  .filosofia-da-titulo { white-space: normal; }
}

/* ============================================================
   Capa do volume — homepage
   ============================================================ */

.capa {
  position: relative;
  padding: 64px 0 32px;
  border-bottom: 1px solid var(--bruma);
  overflow: visible;
}

.capa-tecnica {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap);
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grafite);
  padding-bottom: 56px;
}

.capa-tecnica .esq { text-align: left; }
.capa-tecnica .cen { text-align: center; color: var(--acento); font-size: 20px; }
.capa-tecnica .dir { text-align: right; }

.capa-tecnica .destaque {
  color: var(--acento);
  display: inline-block;
  margin-right: 6px;
  font-style: italic;
}

/* .capa-titulo é o seletor base — os estilos concretos vêm da
   variante .titulo-crescendo (definida no bloco da capa-orquestra).
   Mantemos aqui apenas as propriedades comuns. */
.capa-titulo {
  margin: 0;
  position: relative;
}

.capa-titulo .linha {
  display: block;
  position: relative;
}

.capa-rodape-titulo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: var(--gap-l);
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--bruma);
}

.capa-rodape-titulo .subt {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--papel-2);
  max-width: 480px;
  line-height: 1.4;
}

.capa-rodape-titulo .meta {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--grafite);
  text-transform: uppercase;
  line-height: 1.7;
  text-align: right;
}

.capa-rodape-titulo .fleuron {
  font-family: var(--serif-display);
  font-size: 32px;
  font-style: italic;
  color: var(--acento);
  align-self: center;
  line-height: 1;
  animation: flutuaFleuron 9s ease-in-out infinite;
}

@keyframes flutuaFleuron {
  0%, 100% { transform: translateY(0) rotate(0); opacity: 1; }
  50% { transform: translateY(-4px) rotate(2deg); opacity: 0.7; }
}

/* ============================================================
   Epígrafe do editor — carta de abertura
   ============================================================ */

.epigrafe {
  padding: var(--gap-xl) 0;
  border-bottom: 1px solid var(--bruma);
  max-width: 64ch;
  margin: 0 auto;
  text-align: center;
}

.epigrafe-cabec {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--texto-terciario);
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.epigrafe-cabec::before,
.epigrafe-cabec::after {
  content: "";
  height: 1px;
  background: var(--bruma);
  flex: 1;
  max-width: 80px;
}

.epigrafe-citacao {
  margin: 0 0 0.4em;
  padding: 0;
}

.epigrafe p {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.55;
  color: var(--papel-2);
  margin-bottom: 1.4em;
  text-wrap: balance;
}

.epigrafe-autoria {
  margin-top: 24px;
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--texto-terciario);
  letter-spacing: 0;
}

.epigrafe-autoria em {
  color: var(--papel-2);
  font-style: italic;
}

.epigrafe-fleuron {
  margin-top: 32px;
  color: var(--grafite);
  font-size: 18px;
  letter-spacing: 0.2em;
}

/* ============================================================
   Diário do dia — corpo principal
   ============================================================ */

.diario-hoje {
  padding: var(--gap-xl) 0;
  position: relative;
}

.diario-hoje .running {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grafite);
  padding-bottom: 32px;
  border-bottom: 1px solid var(--bruma);
  margin-bottom: var(--gap-l);
}

.diario-hoje .running .meio { justify-self: center; color: var(--papel-2); }
.diario-hoje .running .esq strong { color: var(--acento); }

.diario-hoje .epigrafe-poetica {
  max-width: 560px;
  margin: 0 0 var(--gap-l);
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  color: var(--papel-2);
  font-size: 17px;
  line-height: 1.55;
  border-left: 1px solid var(--acento);
  padding-left: 22px;
}

.diario-hoje .epigrafe-poetica cite {
  display: block;
  margin-top: 10px;
  font-family: var(--mono-met);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafite);
}

.diario-hoje h2.titulo-entrada {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(46px, 5.6vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.005em;
  margin: 0 0 56px;
  max-width: 16ch;
}

.diario-hoje .corpo-entrada {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 2fr);
  gap: var(--gap-l);
  align-items: start;
}

.diario-hoje .colunas {
  font-family: var(--serif-corpo);
  font-size: 18px;
  line-height: 1.7;
  color: var(--papel);
  column-count: 2;
  column-gap: 36px;
  column-fill: balance;
}

.diario-hoje .colunas p { margin: 0 0 1.1em; text-align: justify; hyphens: auto; }
.diario-hoje .colunas p:first-of-type { text-indent: 0; }
.diario-hoje .colunas p + p { text-indent: 1.8em; }

.diario-hoje .colunas p:first-of-type::first-letter {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 5.6em;
  line-height: 0.82;
  float: left;
  padding: 0.08em 0.14em 0 0;
  color: var(--acento);
  animation: tintaSecando 2.4s ease-out 0.4s both;
}

@keyframes tintaSecando {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.diario-hoje .colunas em { font-style: italic; color: var(--papel); }

.diario-hoje .colunas sup.nota {
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--acento);
  cursor: pointer;
  margin-left: 1px;
  vertical-align: super;
}

.diario-hoje .colunas blockquote {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--papel);
  margin: 1.6em 0;
  padding: 0;
  text-align: left;
  break-inside: avoid;
  text-indent: 0;
}

.diario-hoje .colunas blockquote::before {
  content: "«";
  font-size: 1.3em;
  color: var(--acento);
  display: inline-block;
  margin-right: 0.12em;
  vertical-align: -0.06em;
}
.diario-hoje .colunas blockquote::after {
  content: "»";
  font-size: 1.3em;
  color: var(--acento);
  margin-left: 0.06em;
  vertical-align: -0.06em;
}

.diario-hoje .colunas h3 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  margin: 1.4em 0 0.5em;
  break-after: avoid;
}

.diario-hoje .colunas hr {
  border: 0;
  margin: 2em auto;
  text-align: center;
  break-inside: avoid;
}
.diario-hoje .colunas hr::before {
  content: "";
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: -0.3em;
  background-color: var(--acento);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='443 53 502 572'><path d='M945 191C935.76 186.83 927.26 180.53 918.23 175.77 909.20 171.01 900.58 165.22 891.69 160.31 882.81 155.39 874.49 150.36 865.69 145.31 856.90 140.25 847.79 135.14 839.08 129.92 830.36 124.71 821.79 120.26 813.08 114.92 804.36 109.58 795 105.14 786.23 99.77 777.45 94.40 768.50 89.74 759.70 84.30 750.89 78.87 742.42 75.31 733.70 69.30 724.97 63.30 715.77 61.02 707.08 53.92 698.38 46.83 688.94 47.25 680.23 54.23 671.52 61.21 662.45 63.77 653.70 69.70 644.94 75.62 636.46 79.23 627.70 84.70 618.94 90.17 609.81 94.67 601.08 100.08 592.35 105.49 582.98 109.95 574.25 115.25 565.51 120.54 557.05 125.16 548.25 130.25 539.44 135.33 530.61 140.81 521.75 145.75 512.89 150.68 504.61 155.86 495.75 160.75 486.89 165.63 478.09 171.39 469.23 176.23 460.37 181.07 451.97 186.69 443 191 442.98 204.19 443.02 217.86 443 231 442.98 244.14 443.05 256.93 443 270 442.95 283.07 443.11 295.96 443 309 442.89 322.04 443.23 334.95 443 348 442.77 361.05 443.51 373.92 443 387 442.49 400.08 444.13 412.84 443 426 441.87 439.16 445.51 451.64 443 465 440.49 478.36 448.48 484.56 458.77 489.23 469.06 493.90 474.60 498.52 483.75 503.25 492.91 507.98 499.54 513.16 508.30 517.70 517.06 522.23 524.44 527.39 532.92 532.08 541.41 536.76 549.40 541.45 557.77 546.23 566.14 551.01 574.09 555.65 582.31 560.70 590.51 565.74 599.13 569.42 607.25 574.75 615.38 580.07 624.47 584.03 632.75 589.25 641.03 594.46 648.94 598.24 657.30 603.70 665.66 609.16 673.63 611.40 681.92 618.08 690.20 624.76 698.47 624.33 706.77 617.77 715.07 611.21 722.94 608.70 731.31 603.31 739.67 597.91 747.66 594.12 755.92 588.92 764.19 583.73 772.58 580 780.77 574.77 788.96 569.54 798.03 565.31 806.25 560.25 814.48 555.19 822.59 550.76 830.92 545.92 839.25 541.08 847.25 536.40 855.77 531.77 864.29 527.14 871.51 521.77 880.31 517.31 889.10 512.84 895.74 507.58 904.92 502.92 914.11 498.27 919.50 493.41 929.77 488.77 940.04 484.13 947.30 478.35 945 465 942.70 451.65 946.07 438.22 945 425 943.93 411.78 945.48 399.10 945 386 944.52 372.90 945.22 360.04 945 347 944.78 333.96 945.10 321.02 945 308 944.90 294.98 945.05 282.01 945 269 944.95 255.99 945.02 243 945 230 944.98 217 945.02 204 945 191M692 59C692 120 692 181 692 242 678.33 240.23 664.67 244.37 651 242 637.33 239.63 634.52 251.70 629.08 261.08 623.63 270.45 618.93 277.58 614 287 560.68 257.35 506.94 226.79 455 195 534.49 150.86 612.79 103.96 692 59M933 195C881.04 226.81 827.33 257.34 774 287 768.80 277.66 764.58 270.28 759.08 260.92 753.58 251.56 750.53 239.70 737 242 723.47 244.30 709.57 240.27 696 242 696 181 696 120 696 59 775.22 103.97 853.50 150.85 933 195M612 290C609.20 297.67 601.22 305.41 599.08 313.08 596.93 320.74 585.45 328.13 586.03 336.03 586.61 343.92 596.64 351.28 598.92 359.08 601.21 366.87 610.19 373.85 612 382 558.50 411.13 506.22 443.06 453 473 453 381.67 453 290.33 453 199 506.47 228.18 558.75 260.12 612 290M935 199C935 290.33 935 381.67 935 473 881.77 443.04 829.51 411.14 776 382 778.06 373.98 786.61 366.67 788.92 358.92 791.23 351.17 801.66 343.82 801.92 335.92 802.19 328.03 791.27 320.63 789.08 312.92 786.89 305.20 778.60 297.77 776 290 829.26 260.11 881.52 228.18 935 199M692 249C692 271.67 692 294.33 692 317 686.79 317.33 681.29 320.35 679 325 658.94 314.66 640.22 301.73 620 292 624.25 283.41 628.39 276.05 633.77 267.77 639.15 259.49 640.49 247.32 653 249 665.51 250.68 679.37 247.74 692 249M768 292C747.79 301.72 729.04 314.67 709 325 706.66 320.38 701.26 317.31 696 317 696 294.33 696 271.67 696 249 708.57 247.49 721.46 251.01 734 249 746.54 246.99 748.77 258.41 753.92 267.08 759.08 275.74 763.81 283.11 768 292M677 327C674.96 332.32 673.82 338.76 677 344 657.03 354.50 638.29 367.39 618 377 610.01 363.33 602.49 349.11 594 336 602.10 322 610.49 308.31 618 294 637.91 304.19 656.89 317.14 677 327M770 294C777.63 307.86 785.23 322.15 794 335 786.24 349.18 777.86 362.89 770 377 749.72 367.40 730.95 354.49 711 344 714.21 338.75 713.01 332.36 711 327 731.10 317.15 750.08 304.20 770 294M679 347C681.91 351.32 686.78 354.14 692 354 692 376.67 692 399.33 692 422 679.54 423.50 666.40 420 654 422 641.60 424 638.83 412.88 633.75 404.25 628.66 395.63 624.79 388.61 620 380 639.97 369.50 658.71 356.61 679 347M768 380C763.25 388.62 759.30 395.61 754.23 404.23 749.16 412.85 746.44 424 734 422 721.56 420 708.49 423.50 696 422 696 399.33 696 376.67 696 354 701.14 354.17 706.18 351.28 709 347 729.27 356.60 748.05 369.51 768 380M614 384C621.41 399.31 631.76 413.59 639 429 656.67 429 674.33 429 692 429 692 490 692 551 692 612 612.61 567.70 534.30 520.78 455 476 507.41 444.68 560.82 414.34 614 384M933 475C854.82 521.46 775.22 567.13 696 612 696 551 696 490 696 429 713.67 429 731.33 429 749 429 756.23 413.60 766.58 399.32 774 384 827.34 413.77 879.69 445.50 933 475Z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='443 53 502 572'><path d='M945 191C935.76 186.83 927.26 180.53 918.23 175.77 909.20 171.01 900.58 165.22 891.69 160.31 882.81 155.39 874.49 150.36 865.69 145.31 856.90 140.25 847.79 135.14 839.08 129.92 830.36 124.71 821.79 120.26 813.08 114.92 804.36 109.58 795 105.14 786.23 99.77 777.45 94.40 768.50 89.74 759.70 84.30 750.89 78.87 742.42 75.31 733.70 69.30 724.97 63.30 715.77 61.02 707.08 53.92 698.38 46.83 688.94 47.25 680.23 54.23 671.52 61.21 662.45 63.77 653.70 69.70 644.94 75.62 636.46 79.23 627.70 84.70 618.94 90.17 609.81 94.67 601.08 100.08 592.35 105.49 582.98 109.95 574.25 115.25 565.51 120.54 557.05 125.16 548.25 130.25 539.44 135.33 530.61 140.81 521.75 145.75 512.89 150.68 504.61 155.86 495.75 160.75 486.89 165.63 478.09 171.39 469.23 176.23 460.37 181.07 451.97 186.69 443 191 442.98 204.19 443.02 217.86 443 231 442.98 244.14 443.05 256.93 443 270 442.95 283.07 443.11 295.96 443 309 442.89 322.04 443.23 334.95 443 348 442.77 361.05 443.51 373.92 443 387 442.49 400.08 444.13 412.84 443 426 441.87 439.16 445.51 451.64 443 465 440.49 478.36 448.48 484.56 458.77 489.23 469.06 493.90 474.60 498.52 483.75 503.25 492.91 507.98 499.54 513.16 508.30 517.70 517.06 522.23 524.44 527.39 532.92 532.08 541.41 536.76 549.40 541.45 557.77 546.23 566.14 551.01 574.09 555.65 582.31 560.70 590.51 565.74 599.13 569.42 607.25 574.75 615.38 580.07 624.47 584.03 632.75 589.25 641.03 594.46 648.94 598.24 657.30 603.70 665.66 609.16 673.63 611.40 681.92 618.08 690.20 624.76 698.47 624.33 706.77 617.77 715.07 611.21 722.94 608.70 731.31 603.31 739.67 597.91 747.66 594.12 755.92 588.92 764.19 583.73 772.58 580 780.77 574.77 788.96 569.54 798.03 565.31 806.25 560.25 814.48 555.19 822.59 550.76 830.92 545.92 839.25 541.08 847.25 536.40 855.77 531.77 864.29 527.14 871.51 521.77 880.31 517.31 889.10 512.84 895.74 507.58 904.92 502.92 914.11 498.27 919.50 493.41 929.77 488.77 940.04 484.13 947.30 478.35 945 465 942.70 451.65 946.07 438.22 945 425 943.93 411.78 945.48 399.10 945 386 944.52 372.90 945.22 360.04 945 347 944.78 333.96 945.10 321.02 945 308 944.90 294.98 945.05 282.01 945 269 944.95 255.99 945.02 243 945 230 944.98 217 945.02 204 945 191M692 59C692 120 692 181 692 242 678.33 240.23 664.67 244.37 651 242 637.33 239.63 634.52 251.70 629.08 261.08 623.63 270.45 618.93 277.58 614 287 560.68 257.35 506.94 226.79 455 195 534.49 150.86 612.79 103.96 692 59M933 195C881.04 226.81 827.33 257.34 774 287 768.80 277.66 764.58 270.28 759.08 260.92 753.58 251.56 750.53 239.70 737 242 723.47 244.30 709.57 240.27 696 242 696 181 696 120 696 59 775.22 103.97 853.50 150.85 933 195M612 290C609.20 297.67 601.22 305.41 599.08 313.08 596.93 320.74 585.45 328.13 586.03 336.03 586.61 343.92 596.64 351.28 598.92 359.08 601.21 366.87 610.19 373.85 612 382 558.50 411.13 506.22 443.06 453 473 453 381.67 453 290.33 453 199 506.47 228.18 558.75 260.12 612 290M935 199C935 290.33 935 381.67 935 473 881.77 443.04 829.51 411.14 776 382 778.06 373.98 786.61 366.67 788.92 358.92 791.23 351.17 801.66 343.82 801.92 335.92 802.19 328.03 791.27 320.63 789.08 312.92 786.89 305.20 778.60 297.77 776 290 829.26 260.11 881.52 228.18 935 199M692 249C692 271.67 692 294.33 692 317 686.79 317.33 681.29 320.35 679 325 658.94 314.66 640.22 301.73 620 292 624.25 283.41 628.39 276.05 633.77 267.77 639.15 259.49 640.49 247.32 653 249 665.51 250.68 679.37 247.74 692 249M768 292C747.79 301.72 729.04 314.67 709 325 706.66 320.38 701.26 317.31 696 317 696 294.33 696 271.67 696 249 708.57 247.49 721.46 251.01 734 249 746.54 246.99 748.77 258.41 753.92 267.08 759.08 275.74 763.81 283.11 768 292M677 327C674.96 332.32 673.82 338.76 677 344 657.03 354.50 638.29 367.39 618 377 610.01 363.33 602.49 349.11 594 336 602.10 322 610.49 308.31 618 294 637.91 304.19 656.89 317.14 677 327M770 294C777.63 307.86 785.23 322.15 794 335 786.24 349.18 777.86 362.89 770 377 749.72 367.40 730.95 354.49 711 344 714.21 338.75 713.01 332.36 711 327 731.10 317.15 750.08 304.20 770 294M679 347C681.91 351.32 686.78 354.14 692 354 692 376.67 692 399.33 692 422 679.54 423.50 666.40 420 654 422 641.60 424 638.83 412.88 633.75 404.25 628.66 395.63 624.79 388.61 620 380 639.97 369.50 658.71 356.61 679 347M768 380C763.25 388.62 759.30 395.61 754.23 404.23 749.16 412.85 746.44 424 734 422 721.56 420 708.49 423.50 696 422 696 399.33 696 376.67 696 354 701.14 354.17 706.18 351.28 709 347 729.27 356.60 748.05 369.51 768 380M614 384C621.41 399.31 631.76 413.59 639 429 656.67 429 674.33 429 692 429 692 490 692 551 692 612 612.61 567.70 534.30 520.78 455 476 507.41 444.68 560.82 414.34 614 384M933 475C854.82 521.46 775.22 567.13 696 612 696 551 696 490 696 429 713.67 429 731.33 429 749 429 756.23 413.60 766.58 399.32 774 384 827.34 413.77 879.69 445.50 933 475Z'/></svg>") center / contain no-repeat;
}

.diario-hoje .assinatura {
  margin-top: 56px;
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--bruma);
}

.diario-hoje .assinatura .glifo-fim {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 32px;
  color: var(--acento);
}

.diario-hoje .assinatura .iniciais {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 24px;
  color: var(--papel);
  letter-spacing: 0.06em;
}

.diario-hoje .assinatura .info {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grafite);
}

/* marginalia — coluna lateral com notas */

.diario-hoje .marginalia {
  position: sticky;
  top: 140px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 8px;
  font-family: var(--mono-met);
  font-size: 11px;
  line-height: 1.55;
  color: var(--grafite);
  border-top: 1px solid var(--bruma);
}

.diario-hoje .marginalia .nota-margem {
  position: relative;
  padding: 18px 0 0;
  border-bottom: 1px dashed var(--bruma);
  padding-bottom: 18px;
}

.diario-hoje .marginalia .nota-margem .num {
  font-family: var(--mono-met);
  font-size: 10px;
  color: var(--acento);
  letter-spacing: 0.18em;
  display: inline-block;
  margin-right: 8px;
  vertical-align: super;
}

.diario-hoje .marginalia .nota-margem .texto {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-size: 14px;
  color: var(--papel-2);
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
}

.diario-hoje .marginalia .leiturazinha {
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafite);
  display: block;
  margin-bottom: 10px;
}

/* Magazine layout (2 colunas + marginalia) sustenta-se até ~880px,
   o que cobre todos os laptops correntes (1280 e acima sem perder ritmo). */
@media (max-width: 880px) {
  .diario-hoje .corpo-entrada { grid-template-columns: 1fr; }
  .diario-hoje .colunas { column-count: 1; }
  .diario-hoje .marginalia { position: static; }
}

/* Cabeçalho — ajustes em larguras intermediárias */
@media (max-width: 1180px) {
  .cabecalho-revista .nav-revista { gap: 20px; }
  .cabecalho-revista .nav-revista a { font-size: 11px; }
  .cabecalho-revista .marca-da { font-size: 11px; }
}

@media (max-width: 1040px) {
  .cabecalho-revista .selo-dir { display: none; }
  .cabecalho-revista .faixa-nav { grid-template-columns: auto 1fr; gap: 24px; }
}

@media (max-width: 880px) {
  .cabecalho-revista .faixa-nav { grid-template-columns: 1fr; height: auto; padding: 14px 0; gap: 12px; }
  .cabecalho-revista .nav-revista {
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cabecalho-revista .nav-revista::-webkit-scrollbar { display: none; }
}

/* ============================================================
   Divisores e ornamentos
   ============================================================ */

.divisor-ornamento {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: var(--gap-xl) 0;
}

.divisor-ornamento::before,
.divisor-ornamento::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--bruma), transparent);
  max-width: 220px;
}

.divisor-ornamento .glifo {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 24px;
  color: var(--acento);
  letter-spacing: 0.3em;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  animation: flutuaFleuron 8s ease-in-out infinite;
}

/* ============================================================
   À margem (currently — lendo, ouvindo, etc.)
   ============================================================ */

.a-margem {
  padding: var(--gap-l) 0;
}

.a-margem-titulo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 24px;
  margin-bottom: var(--gap-l);
}

.a-margem-titulo .secao {
  font-family: var(--mono-met);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acento);
}

.a-margem-titulo h2 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1;
  margin: 0;
}

.a-margem-titulo .meta {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafite);
  text-align: right;
}

.a-margem-grade {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--bruma);
  border: 1px solid var(--bruma);
}

.a-margem-card {
  background: var(--tinta-base);
  padding: 28px 22px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: background 240ms;
}

.a-margem-card:hover { background: var(--tinta-2); }

.a-margem-card .rotulo {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grafite);
  display: flex;
  align-items: center;
  gap: 8px;
}

.a-margem-card .rotulo .marcador {
  width: 6px; height: 6px;
  background: var(--acento);
  display: inline-block;
}

.a-margem-card .obra {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.15;
  color: var(--papel);
  margin: 4px 0 6px;
}

.a-margem-card .autor {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-size: 14px;
  font-weight: 300;
  color: var(--papel-2);
}

.a-margem-card .observacao {
  margin-top: auto;
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--grafite);
  line-height: 1.5;
  padding-top: 14px;
  border-top: 1px dashed var(--bruma);
  font-style: normal;
}

@media (max-width: 880px) {
  .a-margem-grade { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Sumário do volume — tabela de conteúdos
   ============================================================ */

.sumario {
  padding: var(--gap-l) 0;
}

.sumario-cabec {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 24px;
  margin-bottom: var(--gap-l);
}

.sumario-cabec h2 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1;
}

.sumario-cabec .secao {
  font-family: var(--mono-met);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acento);
}

.sumario-cabec .meta {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafite);
}

.sumario-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--bruma);
  border-bottom: 1px solid var(--bruma);
}

.sumario-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 22px 24px;
  border-bottom: 1px dotted var(--bruma);
  text-decoration: none;
  color: inherit;
  transition: background 200ms;
  cursor: pointer;
}

.sumario-grade > :nth-child(odd) { border-right: 1px dotted var(--bruma); }
.sumario-grade > :last-child,
.sumario-grade > :nth-last-child(2):nth-child(odd) { border-bottom: 0; }

.sumario-item:hover { background: rgba(255,255,255,0.02); }
.sumario-item:hover .sumario-titulo { color: var(--acento); }

.sumario-item .folio {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--grafite);
  font-variant-numeric: tabular-nums;
}

.sumario-titulo {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.15;
  color: var(--papel);
  transition: color 240ms;
}

.sumario-item .tipo {
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-top: 6px;
  display: block;
}

.sumario-item .pag {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--grafite);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .sumario-grade { grid-template-columns: 1fr; }
  .sumario-grade > :nth-child(odd) { border-right: 0; }
}

/* ============================================================
   Marginalia "à meia-luz" — fragmentos curtos
   ============================================================ */

.meia-luz {
  padding: var(--gap-l) 0;
}

.meia-luz-cabec {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 24px;
  margin-bottom: var(--gap-l);
}

.meia-luz-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bruma);
  border: 1px solid var(--bruma);
}

.meia-luz-card {
  background: var(--tinta-base);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
}

.meia-luz-card .data {
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafite);
}

.meia-luz-card .glifo {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 20px;
  color: var(--acento);
}

.meia-luz-card p {
  font-family: var(--serif-corpo);
  font-size: 17px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.55;
  color: var(--papel);
  margin: 0;
  text-transform: lowercase;
}

@media (max-width: 760px) { .meia-luz-grade { grid-template-columns: 1fr; } }

/* ============================================================
   Contato impresso — fotografias da semana
   ============================================================ */

.contato-impresso {
  padding: var(--gap-l) 0;
}

.contato-folha {
  background:
    linear-gradient(90deg, rgba(71, 72, 80, 0.18) 1px, transparent 1px) 0 0 / 25% 100%,
    linear-gradient(0deg, rgba(71, 72, 80, 0.18) 1px, transparent 1px) 0 0 / 100% 50%,
    var(--tinta-base);
  border: 1px solid var(--bruma);
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative;
}

.contato-folha::before {
  content: "FOLHA DE CONTATO · RL-026";
  position: absolute;
  top: -8px;
  left: 24px;
  padding: 0 12px;
  background: var(--tinta-base);
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--grafite);
}

.contato-folha::after {
  content: "P.T. · NOV.2025 → MAI.2026";
  position: absolute;
  bottom: -8px;
  right: 24px;
  padding: 0 12px;
  background: var(--tinta-base);
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--grafite);
}

.contato-quadro {
  aspect-ratio: 3/2;
  position: relative;
  display: flex;
  align-items: end;
  justify-content: flex-start;
  padding: 8px;
}

.contato-quadro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(239, 236, 228, 0.04) 0,
      rgba(239, 236, 228, 0.04) 6px,
      transparent 6px,
      transparent 12px
    ),
    var(--tinta-2);
  border: 1px solid var(--bruma);
  z-index: 0;
}

.contato-quadro .num {
  position: relative;
  z-index: 1;
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--papel-2);
}

.contato-quadro .marca-foco {
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  background: var(--acento);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.contato-quadro .legenda-foto {
  position: relative;
  z-index: 1;
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--papel-2);
  margin-left: auto;
}

/* Folha de contato — moldura com foto real (gerada por vestigios.js) */
.contato-quadro--com-foto::before {
  background: var(--foto) center / cover no-repeat;
}
.contato-quadro--com-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 55%);
  z-index: 0;
}
.contato-quadro--com-foto .num,
.contato-quadro--com-foto .legenda-foto {
  color: rgba(239, 236, 228, 0.85);
}

@media (max-width: 760px) { .contato-folha { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Colofão impresso (no fim da capa)
   ============================================================ */

.colofao-rapido {
  margin: var(--gap-xl) auto 0;
  max-width: 720px;
  text-align: center;
  padding: var(--gap-l) 56px;
  border-top: 1px solid var(--bruma);
  border-bottom: 1px solid var(--bruma);
  position: relative;
}

.colofao-rapido::before {
  content: "TEMPO";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tinta-base);
  padding: 0 14px;
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--acento);
}

.colofao-rapido p {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--papel-2);
  margin: 0;
  text-wrap: balance;
}

.colofao-rapido p em {
  font-style: normal;
  font-family: var(--mono-met);
  font-size: 12px;
  color: var(--papel);
  letter-spacing: 0.04em;
}

.colofao-rapido .marca-impresso {
  margin-top: 24px;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 28px;
  color: var(--papel);
  letter-spacing: 0.05em;
}

/* ============================================================
   Folio do fim da página
   ============================================================ */

.folio-fim {
  border-top: 1px solid var(--bruma);
  margin-top: var(--gap-xl);
  padding: 32px 0 56px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grafite);
}

.folio-fim .cen { text-align: center; color: var(--papel-2); }
.folio-fim .dir { text-align: right; }

/* Variante narrativa — bookends (capa, colofão).
   Troca o tom de "índice de biblioteca" pelo de "voz literária". */
.folio-fim.narrativa {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 300;
}

.folio-fim.narrativa .cen {
  font-family: var(--serif-display);
  font-size: 18px;
  color: var(--acento);
}

/* ============================================================
   Página interna — rev. retoques
   ============================================================ */

.pagina .running-cabec {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 32px 0 24px;
  border-bottom: 1px solid var(--bruma);
  margin-bottom: var(--gap-l);
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grafite);
}

.pagina .running-cabec .meio { justify-self: center; color: var(--papel-2); }

/* ============================================================
   Multiversos — portais para os mundos do site
   Cada portal carrega sua textura, sua cor, sua tonalidade.
   Não é "card de feature" — é uma vitrine de atmosfera.
   ============================================================ */

.multiversos {
  padding: var(--gap-l) 0;
}

.multiversos-cabec {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 24px;
  margin-bottom: var(--gap-l);
}

.multiversos-cabec .secao {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-size: 15px;
  color: var(--acento);
  font-weight: 300;
}

.multiversos-cabec h2 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1;
  color: var(--papel-2);
}

.multiversos-cabec .meta {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-size: 13px;
  color: var(--texto-terciario);
}

.multiversos-grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(280px, auto);
  gap: 1px;
  background: var(--bruma);
  border: 1px solid var(--bruma);
  grid-auto-flow: dense;
}

/* Variação de tamanho para criar irregularidade */
.portal:nth-child(1) { grid-column: span 2; grid-row: span 1; min-height: 360px; }
.portal:nth-child(2) { grid-column: span 2; grid-row: span 1; min-height: 360px; }
.portal:nth-child(3) { grid-column: span 2; grid-row: span 2; min-height: 520px; }
.portal:nth-child(4) { grid-column: span 2; grid-row: span 1; min-height: 360px; }
.portal:nth-child(5) { grid-column: span 1; grid-row: span 1; min-height: 280px; }
.portal:nth-child(6) { grid-column: span 1; grid-row: span 1; min-height: 280px; }

.portal {
  background: var(--tinta-base);
  position: relative;
  min-height: 360px;
  display: grid;
  grid-template-rows: 132px 1fr auto;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  cursor: pointer;
  transition: background 360ms;
}

.portal {
  transition: background 300ms, filter 300ms,
              transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 420ms ease;
  will-change: transform;
  z-index: 1;
}

/* hover mais agressivo: a dobra inteira cresce e tomba de leve (a distorção
   sutil que já existia, agora no quadro todo), subindo acima das vizinhas —
   sensação de página puxada da pilha com vontade */
.portal:hover {
  background: var(--tinta-2);
  filter: brightness(1.08);
  transform: scale(1.055) rotate(-0.6deg);
  z-index: 3;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}

.portal:hover .portal-textura {
  opacity: 0.95;
  filter: brightness(1.1) saturate(1.05);
}

.portal:hover .portal-textura .textura-svg,
.portal:hover .portal-textura .textura-css {
  transform: scale(1.24) translateY(-16px);
  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.portal:hover .portal-rotulo {
  color: var(--portal-cor);
}

/* Tipografia que invade — portal-nome cresce a partir da esquerda,
   ganha kerning e desliza, sugerindo a página folheada com vontade */
.portal:hover .portal-nome {
  color: var(--portal-cor);
  letter-spacing: 0.02em;
  transform: translateX(-8px) scale(1.2);
}

.portal:hover .portal-frase {
  color: var(--papel);
  transform: translateX(4px);
}

.portal:hover .portal-pe .seta {
  transform: translateX(8px);
  color: var(--portal-cor);
  transition: transform 200ms, color 200ms;
}

.portal:hover .portal-rotulo::before {
  box-shadow: 0 0 8px var(--portal-cor);
  animation: pontoPulso 1200ms ease-in-out infinite;
}

@keyframes texturaBreath {
  0%, 100% { opacity: 0.95; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

@keyframes pontoPulso {
  0%, 100% { box-shadow: 0 0 8px var(--portal-cor); }
  50% { box-shadow: 0 0 16px var(--portal-cor); }
}

/* Cabeçalho das dobras */
.dobras-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-l);
  padding: var(--gap) 0;
  border-bottom: 1px solid var(--bruma-2);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dobras-info {
  color: var(--acento);
  font-weight: 500;
}

.dobras-dica {
  color: var(--texto-terciario);
  font-style: italic;
}

.portal-textura {
  position: relative;
  overflow: hidden;
  opacity: 0.6;
  transition: opacity 600ms;
  border-bottom: 1px solid var(--bruma);
}

.portal-textura .textura-svg,
.portal-textura .textura-css {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 1200ms ease;
}

.portal-textura .marca-pequena {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--texto-terciario);
  text-transform: uppercase;
}

.portal-corpo {
  padding: 26px 30px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.portal-rotulo {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--texto-terciario);
  display: flex;
  align-items: center;
  transition: color 400ms;
  gap: 10px;
  margin-bottom: 4px;
}

.portal-rotulo::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--portal-cor);
  display: inline-block;
  flex-shrink: 0;
}

.portal-nome {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  color: var(--papel);
  margin: 2px 0 8px;
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
              letter-spacing 700ms cubic-bezier(0.16, 1, 0.3, 1),
              color 400ms;
  will-change: transform;
  transition: color 360ms;
}

.portal-frase {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--papel-2);
  max-width: 26ch;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), color 400ms;
  will-change: transform;
  margin: 0;
}

.portal-pe {
  margin-top: 14px;
  padding: 18px 30px 22px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  color: var(--texto-terciario);
  border-top: 1px dashed var(--bruma);
}

.portal-pe .num {
  color: var(--portal-cor);
  font-weight: 400;
  font-family: var(--mono-met);
  font-style: normal;
  letter-spacing: 0.06em;
  margin-right: 4px;
}

.portal-pe .pendente {
  color: var(--papel-2);
  font-style: italic;
}

.portal-pe .seta {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 20px;
  color: var(--papel-2);
  transition: transform 360ms, color 360ms;
}

@media (max-width: 1080px) {
  .multiversos-grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .multiversos-grade { grid-template-columns: 1fr; }
}

/* Texturas individuais — cada universo tem sua cor de fundo
   propria, animada lentamente. */

.textura-silencio {
  background:
    repeating-linear-gradient(
      to right,
      rgba(201, 199, 194, 0.20) 0,
      rgba(201, 199, 194, 0.20) 1px,
      transparent 1px,
      transparent 6px
    );
  animation: chuvaSuave 28s linear infinite;
}
@keyframes chuvaSuave {
  from { background-position: 0 0; }
  to { background-position: 0 200px; }
}

.textura-jogos {
  background:
    repeating-conic-gradient(
      rgba(192, 87, 62, 0.28) 0deg 90deg,
      transparent 90deg 180deg
    );
  background-size: 7px 7px;
  animation: ditherShift 16s steps(8) infinite;
}
@keyframes ditherShift {
  0%, 100% { background-position: 0 0; }
  25% { background-position: 7px 0; }
  50% { background-position: 7px 7px; }
  75% { background-position: 0 7px; }
}

.textura-tecnologia {
  background:
    radial-gradient(circle at 30% 40%, rgba(110, 140, 90, 0.06), transparent 40%),
    repeating-linear-gradient(0deg, rgba(110, 140, 90, 0.16) 0, rgba(110, 140, 90, 0.16) 1px, transparent 1px, transparent 14px),
    repeating-linear-gradient(90deg, rgba(110, 140, 90, 0.16) 0, rgba(110, 140, 90, 0.16) 1px, transparent 1px, transparent 14px);
}

.textura-desenho {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(239, 236, 228, 0.22) 0,
      rgba(239, 236, 228, 0.22) 1px,
      transparent 1px,
      transparent 7px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(239, 236, 228, 0.10) 0,
      rgba(239, 236, 228, 0.10) 1px,
      transparent 1px,
      transparent 9px
    );
}

/* SVG-based textures use direct fill so override-friendly */
.textura-filosofia text,
.textura-filosofia rect { fill: rgba(214, 162, 74, 0.38); }
.textura-treino path { stroke: rgba(147, 134, 76, 0.55); stroke-width: 0.7; fill: none; }

@media (prefers-reduced-motion: reduce) {
  .capa-titulo .linha,
  .capa-rodape-titulo .fleuron,
  .divisor-ornamento .glifo,
  .ponto-vivo { animation: none !important; }
}

/* ============================================================
   Sinal — campo de respiração (tech/games artifact)
   Bloco monospaçado com glifos que pulsam + linha de prompt
   ============================================================ */

.sinal-campo {
  position: relative;
  margin: 0 0 var(--gap-xl);
  border: 1px solid var(--bruma);
  background:
    linear-gradient(to bottom, rgba(214,162,74,0.018), transparent 40%),
    var(--tinta-base);
  padding: 14px 22px 18px;
  font-family: var(--mono-met);
  overflow: hidden;
}

.sinal-cabec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--grafite);
  letter-spacing: 0.08em;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--bruma);
}

.sinal-cabec .tab { color: var(--acento); }
.sinal-cabec .status { display: inline-flex; align-items: center; gap: 8px; }
.sinal-cabec .bolinha {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 6px rgba(214,162,74,0.6);
  animation: chama 4.2s ease-in-out infinite;
}

.sinal-grade {
  margin: 0;
  white-space: pre;
  font-family: var(--mono-met);
  font-size: 13px;
  line-height: 1.32;
  color: var(--bruma);
  letter-spacing: 0;
  overflow: hidden;
  user-select: none;
  cursor: crosshair;
}

.sinal-grade .g {
  display: inline-block;
  width: 0.62em;
  text-align: center;
  transition: color 240ms, opacity 240ms;
  color: var(--bruma);
}
.sinal-grade .g.viva { color: var(--papel-2); }
.sinal-grade .g.acesa { color: var(--acento); text-shadow: 0 0 8px rgba(214,162,74,0.35); }

.sinal-rodape {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--bruma);
  font-family: var(--mono-met);
  font-size: 13px;
}

.sinal-rodape .prompt { color: var(--acento); }
.sinal-rodape .escrita {
  color: var(--papel);
  font-style: normal;
}
.sinal-rodape .cursor-bloco {
  display: inline-block;
  width: 9px;
  height: 16px;
  background: var(--acento);
  vertical-align: -3px;
  animation: piscaBloco 1.1s steps(2) infinite;
}
@keyframes piscaBloco {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ============================================================
   Digital Artisan — cabeçalho e citação
   ============================================================ */

.da-cabec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono-met);
  font-size: 11px;
  color: var(--grafite);
  letter-spacing: 0.08em;
  padding: 18px 0 14px;
  margin-bottom: 56px;
  border-bottom: 1px dashed var(--bruma);
}
.da-cabec .da-marca { color: var(--acento); }
.da-cabec .da-status { display: inline-flex; align-items: center; gap: 8px; }
.da-cabec .bolinha {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 6px rgba(214,162,74,0.6);
  animation: chama 4.2s ease-in-out infinite;
}

.da-frase {
  margin: 56px 0 0;
  padding: 36px 0;
  border-top: 1px solid var(--bruma);
  border-bottom: 1px solid var(--bruma);
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.2;
  color: var(--papel);
  max-width: none;
  text-wrap: balance;
}
.da-frase .da-aspas {
  color: var(--acento);
  font-size: 1.2em;
  margin: 0 0.16em;
}

a.editorial::after {
  content: " ☞";
  color: var(--acento);
  margin-left: 6px;
  opacity: 0;
  transition: opacity 200ms;
  display: inline-block;
}
a.editorial:hover::after { opacity: 1; }

/* ============================================================
   Digital Artisan — abertura (página colofão).
   Layout editorial: capitular + corpo + verbete-aside.
   Substitui o bloco com CSS inline quebrado e duplicado.
   ============================================================ */

.da-titulo-pagina {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(72px, 9vw, 148px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  color: var(--papel);
  margin: 0 0 56px;
}

.da-abertura {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(220px, 3fr);
  gap: clamp(36px, 4.5vw, 80px);
  margin-bottom: clamp(48px, 6vh, 80px);
  align-items: start;
}

.da-abertura-corpo {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.6;
  color: var(--papel-2);
  max-width: 64ch;
}

.da-abertura-corpo p { margin: 0 0 1.1em; text-wrap: pretty; }
.da-abertura-corpo p:last-child { margin-bottom: 0; }

.da-abertura-corpo .capitular {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 5em;
  line-height: 0.82;
  float: left;
  padding: 0.08em 0.14em 0 0;
  margin: 4px 0 0;
  color: var(--acento);
  font-weight: 400;
}

.da-abertura-corpo strong {
  color: var(--papel);
  font-style: italic;
  font-weight: 500;
}

.da-abertura-corpo em {
  color: var(--acento);
  font-style: italic;
}

.da-abertura-aside {
  position: relative;
  align-self: start;
  padding: 28px 26px;
  border-top: 1px solid var(--acento);
  border-bottom: 1px solid var(--acento);
  background:
    linear-gradient(to bottom right, rgba(214,162,74,0.04), transparent 60%),
    var(--tinta-base);
  margin-top: 12px;
}

.da-abertura-aside-rotulo {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acento);
  display: block;
  margin-bottom: 18px;
}

.da-abertura-aside-def {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25;
  color: var(--papel);
  margin: 0 0 24px;
  text-wrap: balance;
}

.da-abertura-aside-def em {
  display: block;
  margin-top: 14px;
  font-family: var(--serif-corpo);
  font-weight: 300;
  font-size: 14px;
  font-style: italic;
  color: var(--papel-2);
  text-wrap: pretty;
}

.da-abertura-aside-marca {
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
  display: block;
  padding-top: 16px;
  border-top: 1px dashed var(--bruma);
}

@media (max-width: 880px) {
  .da-abertura { grid-template-columns: 1fr; }
  .da-titulo-pagina { font-size: clamp(56px, 13vw, 96px); }
}

/* ====================================================
   COLOFÃO EDITORIAL — rodapé autoral
   ==================================================== */
.colofao-editorial {
  margin-top: var(--gap-xl);
  padding: var(--gap-l);
  border-top: 1px solid var(--bruma);
  border-bottom: 1px solid var(--bruma);
  background: linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0.02));
}

.colofao-bloco {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);
}

.colofao-cabec {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grafite);
  padding-bottom: var(--gap);
  border-bottom: 1px solid var(--bruma-2);
}

.colofao-separador {
  color: var(--acento);
  opacity: 0.7;
}

.colofao-subtitulo {
  font-style: italic;
  color: var(--acento);
  font-weight: 400;
}

.colofao-titulo {
  font-family: var(--display);
  font-size: clamp(28px, 5vw, 40px);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  color: var(--papel);
  line-height: 1.1;
}

.colofao-descricao {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--grafite);
  margin: 0;
  font-style: italic;
  line-height: 1.6;
}

.colofao-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-l);
  padding: var(--gap-l) 0;
  border-top: 1px solid var(--bruma-2);
  border-bottom: 1px dashed var(--bruma-2);
}

.colofao-nav-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.colofao-nav a {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--papel);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 120ms, border-color 120ms;
}

.colofao-nav a:hover {
  color: var(--acento);
  border-bottom-color: var(--acento);
}

.colofao-metadados {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  padding: var(--gap-l);
  background: rgba(139, 137, 144, 0.06);
  border: 1px solid var(--bruma-2);
}

.colofao-metadados p {
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.7;
  color: var(--grafite);
  margin: 0;
}

.meta-label {
  color: var(--acento);
  font-weight: 500;
  display: block;
  margin-bottom: 3px;
}

.colofao-frase {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  text-align: center;
  color: var(--acento);
  margin: 0;
  padding: var(--gap-l) 0;
  border-top: 1px dashed var(--bruma-2);
  border-bottom: 1px dashed var(--bruma-2);
  line-height: 1.6;
}

.colofao-acoes {
  display: flex;
  justify-content: center;
  padding-top: var(--gap);
}

.marca-impresso-fin {
  font-family: var(--display);
  font-size: 22px;
  color: var(--acento);
  opacity: 0.9;
}

/* ====================================================
   REVEAL ON SCROLL — descoberta de camadas
   ==================================================== */

/* Base reveal: fade + slide up */
.reveal-fade {
  opacity: 0;
  animation: revealFade 640ms 200ms ease-out both;
}

@keyframes revealFade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reveal line: hairline width expands */
.reveal-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--bruma);
  opacity: 0;
  animation: revealLineExpand 520ms 160ms ease-out both;
}

@keyframes revealLineExpand {
  from { opacity: 0; transform: scaleX(0); transform-origin: left; }
  to   { opacity: 1; transform: scaleX(1); }
}

/* Reveal mask: text slides in from left under clip-path */
.reveal-mask {
  overflow: hidden;
  opacity: 0;
  animation: revealMaskText 580ms 240ms ease-out both;
}

@keyframes revealMaskText {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
  }
}

/* Reveal drift: elements enter off-axis then snap into place */
.reveal-drift {
  opacity: 0;
  animation: revealDrift 640ms 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes revealDrift {
  from {
    opacity: 0;
    transform: translate(-12px, 16px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* Reveal coords: small metadata/coordinates appear first */
.reveal-coords {
  opacity: 0;
  font-size: 0.9em;
  animation: revealCoords 420ms 120ms ease-out both;
}

@keyframes revealCoords {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Reveal stagger: for lists/grids — each item offset */
.reveal-stagger {
  opacity: 0;
  animation: revealFade 520ms ease-out both;
}

.reveal-stagger:nth-child(1) { animation-delay: 200ms; }
.reveal-stagger:nth-child(2) { animation-delay: 280ms; }
.reveal-stagger:nth-child(3) { animation-delay: 360ms; }
.reveal-stagger:nth-child(4) { animation-delay: 440ms; }
.reveal-stagger:nth-child(5) { animation-delay: 520ms; }
.reveal-stagger:nth-child(6) { animation-delay: 600ms; }

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  .reveal-fade,
  .reveal-line::before,
  .reveal-mask,
  .reveal-drift,
  .reveal-coords,
  .reveal-stagger {
    animation: none !important;
    opacity: 1;
    clip-path: none;
  }
}

/* ============================================================
   SiteFooter — rodapé editorial em duas faixas, full-width.
   Faixa principal (5 colunas) + faixa base (frase + assinatura).
   Quebra do container via 100vw/calc para ocupar toda a página.
   ============================================================ */

.site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
}

.site-footer-principal {
  background: color-mix(in oklab, var(--tinta-base) 88%, #ffffff 4%);
  border-top: 1px solid var(--bruma);
  padding: clamp(28px, 3.5vw, 40px) 0 clamp(20px, 2.5vw, 28px);
}

.site-footer-cabec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: clamp(20px, 2.5vw, 28px);
  border-bottom: 1px dashed var(--bruma-2);
  margin-bottom: clamp(22px, 3vw, 32px);
}

.sf-marca {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.sf-da {
  font-family: var(--serif-corpo);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papel);
}

.sf-marca-sep {
  color: var(--bruma);
  font-family: var(--mono-met);
  font-size: 11px;
}

.sf-em {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-size: 14px;
  color: var(--papel-2);
}

.sf-topo {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  text-transform: lowercase;
  color: var(--papel-2);
  text-decoration: none;
  transition: color 220ms ease;
}

.sf-topo:hover { color: var(--acento); }

.site-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.6fr;
  gap: clamp(20px, 2.5vw, 48px);
  align-items: start;
}

.sf-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sf-col-label {
  font-family: var(--serif-corpo);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papel);
  margin-bottom: 4px;
}

.sf-col-titulo {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1;
  color: var(--papel);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.sf-col-desc {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--papel-2);
  margin: 0;
  max-width: 28ch;
}

.sf-col-marca {
  font-family: var(--mono-met);
  font-size: 11px;
  color: var(--bruma);
  letter-spacing: 0.12em;
  margin-top: 6px;
}

.sf-col a {
  font-family: var(--serif-corpo);
  font-weight: 500;
  font-size: 15px;
  color: var(--papel-2);
  text-decoration: none;
  width: fit-content;
  line-height: 1.65;
  transition: color 220ms ease;
}

.sf-col a:hover { color: var(--acento); }

.sf-col p {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--grafite);
  margin: 0;
}

.sf-meta {
  color: var(--bruma);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 6px;
}

.sf-col-filo {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--papel-2);
  margin: 0;
  max-width: 26ch;
}

.sf-col-link {
  margin-top: 8px;
  color: var(--acento) !important;
}

/* ===== Faixa inferior (interna ao bloco principal) ===== */

.site-footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-top: 1px dashed var(--bruma);
  padding-top: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(22px, 2.8vw, 32px);
}

.sf-frase {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-size: 13px;
  color: var(--bruma);
  margin: 0;
}

.sf-assinatura {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono-met);
  font-size: 11px;
  color: var(--papel-2);
}

.sf-dot { color: var(--bruma); }

.sf-topo-mini {
  color: var(--papel-2);
  text-decoration: none;
  transition: color 220ms ease;
}

.sf-topo-mini:hover { color: var(--acento); }

/* assinatura clicável — 'patric teixeira' como mailto discreto */
.sf-assina-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  transition: color 220ms ease;
}

.sf-assina-link:hover { color: var(--acento); }

@media (max-width: 980px) {
  .site-footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }
  .sf-col-identidade { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .sf-col-identidade { grid-column: 1 / -1; }
  .sf-base-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .site-footer-cabec { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   MICRODIAGRAMAS — desenhos conceituais nos pilares
   ============================================================ */

.pilar-diagrama {
  display: block;
  width: 90px;
  height: 40px;
  margin-bottom: 22px;
  color: var(--papel-2);
  opacity: 0.92;
}
.pilar-diagrama line,
.pilar-diagrama path,
.pilar-diagrama rect {
  stroke: currentColor;
  fill: none;
}
.pilar-diagrama circle {
  fill: currentColor;
}
.pilar-diagrama .ponto-vivo {
  fill: var(--acento);
}

/* ============================================================
   ALINHAMENTO — scrollytelling do manifesto
   Cinco camadas começam dispersas e se alinham conforme
   o usuário rola. No fim, a citação emerge.
   Variáveis dirigidas por JS: --p (raw), --pe (eased), --pf (final).
   Fallback seguro: prefers-reduced-motion ou JS ausente → estado final.
   ============================================================ */

.alinhamento {
  position: relative;
  min-height: 320vh;
  margin: 88px 0 56px;
  --p: 0;
  --pe: 0;
  --pf: 0;
}

/* Palco preso via sticky — robusto: não depende de containing block
   transformado nem de toggles de classe, e funciona igual em desktop
   e mobile. O .alinhamento (alto) é a trilha de rolagem; o palco
   gruda no topo do viewport enquanto a trilha passa por baixo. */
.alinhamento-palco {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 16px;
  width: 100%;
  padding: 28px 0 32px;
  background: none;
}

/* em-vista vira no-op (mantido para não quebrar JS legado) */
.alinhamento.em-vista .alinhamento-palco {
  position: sticky;
}

.palco-cabec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--bruma);
  position: relative;
  z-index: 3;
}
.palco-cabec-marca { color: var(--acento); }
.palco-cabec-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--papel-2);
  transition: background 400ms ease, box-shadow 400ms ease;
}
.alinhamento.alinhado .status-dot {
  background: var(--acento);
  box-shadow: 0 0 6px rgba(214, 162, 74, 0.6);
}
.status-txt::before { content: "desalinhado"; }
.alinhamento.alinhado .status-txt::before { content: "alinhado"; }

.palco-medidor {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--grafite);
  position: relative;
  z-index: 3;
}
.medidor-label { white-space: nowrap; }
.medidor-meta { white-space: nowrap; }
.medidor-barra {
  flex: 1;
  max-width: 320px;
  height: 1px;
  background: var(--bruma);
  position: relative;
  overflow: hidden;
}
.medidor-fill {
  display: block;
  height: 100%;
  background: var(--papel);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

.palco-tensoes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--papel-2);
  opacity: calc((1 - var(--p, 0)) * 0.45);
  pointer-events: none;
  z-index: 0;
}

.palco-ruido {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.palco-ruido span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  font-family: var(--mono-met);
  font-size: 18px;
  color: var(--papel-2);
  opacity: calc(var(--d, 0.4) * (1 - var(--p, 0)));
}

.palco-eixo {
  position: absolute;
  left: 50%;
  top: 25%;
  bottom: 26%;
  width: 1px;
  background: var(--papel-2);
  opacity: calc(max(0, var(--p, 0) - 0.35) * 1.4);
  transform: translateX(-50%) scaleY(calc(max(0, var(--p, 0) - 0.35) * 1.6));
  transform-origin: top;
  pointer-events: none;
  z-index: 1;
}

.palco-pilha {
  align-self: center;
  justify-self: stretch;
  width: min(94%, 760px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 2;
}

.camada {
  display: grid;
  grid-template-columns: 8px 24px 32px 110px 1fr 180px;
  align-items: center;
  gap: 14px;
  position: relative;
  transform:
    translate(
      calc(var(--ix, 0px) * (1 - var(--pe, 0))),
      calc(var(--iy, 0px) * (1 - var(--pe, 0)))
    )
    rotate(calc(var(--ir, 0deg) * (1 - var(--pe, 0))));
  transform-origin: left center;
  opacity: calc(0.55 + 0.45 * var(--pe, 0));
  will-change: transform, opacity;
}

.camada-marca {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--papel-2);
  margin-left: 1px;
}

.camada-num {
  font-family: var(--mono-met);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--grafite);
}

.camada-glifo {
  width: 32px;
  height: 32px;
  color: var(--papel-2);
}
.camada-glifo line,
.camada-glifo path,
.camada-glifo rect {
  stroke: currentColor;
  fill: none;
}
.camada-glifo circle { fill: currentColor; }
.camada-glifo .ponto-vivo { fill: var(--acento); }

.camada-rotulo {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
}

.camada-linha {
  height: 1px;
  background: var(--bruma);
  transform: scaleX(var(--pe, 0));
  transform-origin: left;
}

.camada-nome {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 24px;
  color: var(--papel);
  line-height: 1;
  margin: 0;
  font-weight: 400;
}

.palco-frase {
  position: relative;
  text-align: center;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(18px, 2.1vw, 28px);
  line-height: 1.35;
  color: var(--papel);
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 24px;
  opacity: var(--pf, 0);
  transform: translateY(calc((1 - var(--pf, 0)) * 16px));
  z-index: 2;
}
.palco-frase p { margin: 0; }
.palco-frase em { font-style: italic; color: var(--papel); }
.palco-frase-aspas {
  color: var(--acento);
  font-size: 1.2em;
  margin: 0 0.2em;
}
.frase-borda {
  position: absolute;
  height: 1px;
  background: var(--bruma);
  left: 50%;
  width: 70%;
  transform: translateX(-50%) scaleX(var(--pf, 0));
  transform-origin: center;
}
.frase-borda-topo { top: 0; }
.frase-borda-base { bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .alinhamento {
    min-height: auto;
    --p: 1;
    --pe: 1;
    --pf: 1;
  }
  .alinhamento-palco {
    position: relative;
    height: auto;
    min-height: auto;
    padding: 32px 0;
  }
  .alinhamento.em-vista .alinhamento-palco {
    position: relative;
    background: none;
  }
  .palco-tensoes,
  .palco-ruido,
  .palco-eixo,
  .palco-medidor { display: none; }
  .camada {
    transform: none;
    opacity: 1;
    will-change: auto;
  }
  .camada-linha { transform: scaleX(1); }
  .palco-frase {
    opacity: 1;
    transform: none;
    margin: 32px auto 0;
  }
  .frase-borda { transform: translateX(-50%) scaleX(1); }
}

@media (max-width: 760px) {
  .camada {
    grid-template-columns: 8px 22px 28px 86px 1fr 130px;
    gap: 10px;
  }
  .camada-glifo { width: 28px; height: 28px; }
  .camada-nome { font-size: 20px; }
  .palco-pilha { width: 92%; }
  .palco-cabec, .palco-medidor { font-size: 9px; }
  .palco-ruido span { font-size: 14px; }
}

@media (max-width: 480px) {
  .alinhamento { min-height: 320vh; }
  .camada {
    grid-template-columns: 8px 22px 26px 70px 1fr;
  }
  .camada-nome { display: none; }
  .palco-frase { font-size: 16px; padding: 12px 16px; }
}

/* ============================================================
   FLUXO — coda do colofão. Campo técnico-editorial: trilhas
   segmentadas, nós e silêncio central. A referência é o fundo
   orbital/diagramático do rig.ai, traduzido para a gramática do
   Digital Artisan: menos painel SaaS, mais mapa de ofício.
   ============================================================ */

.fluxo {
  position: relative;
  margin: clamp(72px, 11vh, 150px) 0 clamp(40px, 7vh, 96px);
  height: clamp(210px, 30vh, 340px);
  overflow: hidden;
  border-top: 1px solid color-mix(in oklab, var(--bruma) 72%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--bruma) 72%, transparent);
  background:
    linear-gradient(to right, rgba(239, 236, 228, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(239, 236, 228, 0.018) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  --fluxo-linha: rgba(214, 162, 74, 0.82);
  --fluxo-linha-fria: rgba(201, 199, 194, 0.28);
  /* dissolve as bordas pra virar "campo", não um retângulo */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}

.fluxo::before {
  content: "forma · código · segurança · performance · domínio";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  font-family: var(--mono-met);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--papel-2) 68%, transparent);
  width: min(88%, 680px);
  text-align: center;
  line-height: 1.8;
  text-shadow: 0 0 18px rgba(214, 162, 74, 0.16);
}

.fluxo::after {
  content: "";
  position: absolute;
  inset: 11% 4%;
  z-index: 1;
  opacity: 0.82;
  background:
    linear-gradient(90deg, transparent 0 7%, var(--fluxo-linha) 7% 17%, transparent 17% 28%, var(--fluxo-linha-fria) 28% 35%, transparent 35% 62%, var(--fluxo-linha) 62% 75%, transparent 75%) 0 20% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 17%, var(--fluxo-linha) 17% 26%, transparent 26% 44%, var(--fluxo-linha-fria) 44% 50%, transparent 50% 76%, var(--fluxo-linha) 76% 86%, transparent 86%) 0 31% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 4%, var(--fluxo-linha-fria) 4% 14%, transparent 14% 39%, var(--fluxo-linha) 39% 47%, transparent 47% 58%, var(--fluxo-linha-fria) 58% 68%, transparent 68% 90%, var(--fluxo-linha) 90% 98%, transparent 98%) 0 69% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 12%, var(--fluxo-linha) 12% 23%, transparent 23% 51%, var(--fluxo-linha-fria) 51% 62%, transparent 62% 80%, var(--fluxo-linha) 80% 91%, transparent 91%) 0 80% / 100% 1px no-repeat,
    linear-gradient(180deg, transparent 0 31%, var(--fluxo-linha-fria) 31% 40%, transparent 40%) 24% 0 / 1px 100% no-repeat,
    linear-gradient(180deg, transparent 0 58%, var(--fluxo-linha-fria) 58% 72%, transparent 72%) 72% 0 / 1px 100% no-repeat,
    radial-gradient(circle, var(--fluxo-linha) 0 2px, transparent 2.6px) 18% 31% / 6px 6px no-repeat,
    radial-gradient(circle, var(--fluxo-linha) 0 2px, transparent 2.6px) 82% 69% / 6px 6px no-repeat,
    radial-gradient(circle, var(--fluxo-linha-fria) 0 1.5px, transparent 2.2px) 48% 20% / 5px 5px no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acento) 18%, transparent);
  filter: drop-shadow(0 0 8px rgba(214, 162, 74, 0.08));
}

.fluxo-canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  opacity: 1;
  mix-blend-mode: screen;
}