@charset "UTF-8";
/* ============================================================================
   EVA — BRAND WORLD v0.9
   Folha de estilo única. Dois chãos, três famílias, um vermelho raro.

   Fonte canônica: FRAMEWORK_EVA_CANONICO_v2.0-RC2.md
   Masters:        EVA_IDENTIDADE_VISUAL_CANDIDATA_PORTAL_v0.8
   Iconografia:    EVA_ICON_SYSTEM_ALPHA_v1.4 / _INVERTED_v1.0

   ORGANIZAÇÃO
   [S0] fontes            [S6]  documento e dado
   [S1] tokens            [S7]  social
   [S2] base e chão       [S8]  vídeo
   [S3] tipografia        [S9]  web
   [S4] estrutura         [S10] físico
   [S5] marca             [S11] motion
                          [S12] navegação · [S13] responsivo · [S14] impressão

   REGRA DA CASA: o modo é propriedade de container, não de página. Qualquer
   elemento com .chao-cru ou .chao-preto pinta o próprio chão e reescreve as
   tintas. É o que deixa um bloco escuro viver dentro de um capítulo claro sem
   nada ser reescrito.
   ========================================================================= */

/* ==== [S0] FONTES ======================================================== */
/* Sistema tipográfico editorial VIGENTE / INTERINO.
   A família proprietária da EVA está EM DESENVOLVIMENTO e fora desta entrega.
   Estas três são SIL OFL 1.1 e estão embutidas com licença em assets/fontes/. */

@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:100 900;
  font-stretch:62% 125%; font-display:block;
  src:url('../assets/fontes/Archivo-VF.ttf') format('truetype-variations');
}
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:200 800;
  font-display:swap;
  src:url('../assets/fontes/Newsreader-VF.ttf') format('truetype-variations');
}
@font-face{
  font-family:'Newsreader'; font-style:italic; font-weight:200 800;
  font-display:swap;
  src:url('../assets/fontes/Newsreader-Italic-VF.ttf') format('truetype-variations');
}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fontes/IBMPlexMono-Regular.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fontes/IBMPlexMono-Medium.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fontes/IBMPlexMono-SemiBold.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fontes/IBMPlexMono-Bold.ttf') format('truetype')}

/* ==== [S1] TOKENS ======================================================== */
:root{
  /* --- papéis cromáticos. valores = ASSET vigente, não palette lock ------ */
  --preto:      #121312;   /* PORTAL v0.8 · mediana do raster de referência  */
  --cru:        #F2EBE2;   /* PORTAL v0.8                                    */
  --vermelho:   #A6212A;   /* PORTAL v0.8 · massa. 2,55:1 sobre preto        */
  --vermelho-alto:#BE2630; /* variante de sistema · informação sobre escuro  */
  --branco:     #FFFFFF;

  /* tintas derivadas — opacidade sobre o chão, nunca cor nova */
  --preto-2:    #1C1D1B;
  --preto-3:    #262724;
  --cru-2:      #E7DFD3;
  --cru-3:      #DAD1C2;

  /* --- tipografia: três famílias, papéis fixos -------------------------- */
  --grot:'Archivo','Helvetica Neue',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
  --voz:'Newsreader',Georgia,'Times New Roman',serif;

  /* --- medidas ---------------------------------------------------------- */
  --margem: clamp(20px, 4.6vw, 96px);
  --coluna: 1560px;
  --fio: 1px;
  --fio-estrutural: 1.5px;
  --modulo: 86;             /* haste do E — módulo de proteção do master     */
  --rail: 62px;

  /* --- ritmo ------------------------------------------------------------ */
  --t-rapido: 180ms;
  --t-medio:  420ms;
  --t-lento:  900ms;
  --curva: cubic-bezier(.16,.84,.32,1);
  --curva-seca: cubic-bezier(.7,0,.2,1);

  color-scheme: dark;
}

/* chãos — cada um reescreve as tintas do próprio escopo */
.chao-cru{
  --chao: var(--cru);
  --chao-2: var(--cru-2);
  --chao-3: var(--cru-3);
  --tinta: var(--preto);
  --tinta-fraca: #6B665A;
  --tinta-fraquissima: #A39C8D;
  --regua: #C9C1B2;
  --regua-forte: #A79E8C;
  --acento: var(--vermelho);
  --acento-info: #9E1B1E;
  background: var(--chao); color: var(--tinta);
}
.chao-preto{
  --chao: var(--preto);
  --chao-2: var(--preto-2);
  --chao-3: var(--preto-3);
  --tinta: var(--cru);
  --tinta-fraca: #8B867A;
  --tinta-fraquissima: #5C5850;
  --regua: #333430;
  --regua-forte: #4A4B46;
  --acento: var(--vermelho);
  --acento-info: var(--vermelho-alto);
  background: var(--chao); color: var(--tinta);
}

/* chão automático — segue a troca claro/escuro do leitor.
   Capítulos que declaram o próprio chão NÃO seguem: ali o chão é decisão de
   composição, não preferência de leitura. */
.chao-auto{
  --chao:var(--preto); --chao-2:var(--preto-2); --chao-3:var(--preto-3);
  --tinta:var(--cru); --tinta-fraca:#8B867A; --tinta-fraquissima:#5C5850;
  --regua:#333430; --regua-forte:#4A4B46;
  --acento:var(--vermelho); --acento-info:var(--vermelho-alto);
  background:var(--chao); color:var(--tinta);
}
body.claro .chao-auto{
  --chao:var(--cru); --chao-2:var(--cru-2); --chao-3:var(--cru-3);
  --tinta:var(--preto); --tinta-fraca:#6B665A; --tinta-fraquissima:#A39C8D;
  --regua:#C9C1B2; --regua-forte:#A79E8C;
  --acento:var(--vermelho); --acento-info:#9E1B1E;
}
body.claro{background:var(--cru)}

/* ==== [S2] BASE E CHÃO =================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--grot);
  font-variation-settings:'wdth' 100,'wght' 400;
  background:var(--preto); color:var(--cru);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--vermelho);color:#F2EBE2}

/* --- materialidade RAW ---------------------------------------------------
   RAW é camada, não filtro. Fica desligada por padrão e nunca toca geometria.
   Ver PORTAL v0.8 / TEXTURA.md: abaixo de ~460px de altura ela é sub-pixel. */
.materia{position:relative;isolation:isolate}
.materia::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  opacity:0;transition:opacity var(--t-medio) var(--curva);
  background-image:var(--materia-img,none);
  background-size:cover;background-position:center;
  mix-blend-mode:var(--materia-blend,multiply);
}
body.raw .materia::after{opacity:var(--materia-op,.42)}
.chao-preto.materia::after{--materia-blend:screen;--materia-op:.16}

/* ==== [S3] TIPOGRAFIA ==================================================== */
/* Escala provada em linguagem editorial, não em espécime de fonte. */

.t-impacto{
  font-family:var(--grot);text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 800;
  font-size:clamp(46px,8.6vw,142px);line-height:.875;letter-spacing:-.036em;
  text-wrap:balance;
}
.t-headline{
  font-family:var(--grot);text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 800;
  font-size:clamp(30px,4.4vw,68px);line-height:.925;letter-spacing:-.030em;
  text-wrap:balance;
}
.t-titulo{
  font-family:var(--grot);text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 700;
  font-size:clamp(21px,2.3vw,34px);line-height:1.02;letter-spacing:-.022em;
}
.t-sub{
  font-family:var(--grot);font-variation-settings:'wdth' 100,'wght' 420;
  font-size:clamp(17px,1.62vw,26px);line-height:1.30;letter-spacing:-.010em;
  color:var(--tinta);max-width:34ch;text-wrap:pretty;
}
.t-corpo{
  font-family:var(--grot);font-variation-settings:'wdth' 100,'wght' 400;
  font-size:clamp(14.5px,1.02vw,16.5px);line-height:1.62;letter-spacing:-.002em;
  max-width:62ch;text-wrap:pretty;
}
.t-corpo + .t-corpo{margin-top:.85em}
.t-corpo strong{font-variation-settings:'wdth' 100,'wght' 650}
.t-corpo em{font-style:normal;color:var(--acento-info)}

/* dado — números são massa */
.t-dado{
  font-family:var(--grot);font-variation-settings:'wdth' 100,'wght' 800;
  font-size:clamp(52px,7.4vw,124px);line-height:.90;letter-spacing:-.042em;
  font-variant-numeric:tabular-nums;
}
.t-dado .unidade{
  font-size:.30em;font-variation-settings:'wght' 500;letter-spacing:-.005em;
  margin-left:.16em;vertical-align:.42em;
}

/* mono — o que é verificável */
.t-label{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-fraca);
  line-height:1.25;
}
.t-meta{
  font-family:var(--mono);font-size:11.5px;font-weight:400;line-height:1.55;
  letter-spacing:.012em;color:var(--tinta-fraca);
}
.t-fonte{
  font-family:var(--mono);font-size:12px;font-weight:400;line-height:1.5;
  letter-spacing:.01em;color:var(--tinta);
}
.t-credito{
  font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta-fraquissima);
}

/* voz — juízo editorial. nunca o que é medido. */
.t-voz{
  font-family:var(--voz);font-style:italic;font-weight:380;
  font-size:clamp(19px,2.05vw,31px);line-height:1.31;letter-spacing:-.008em;
  max-width:26ch;text-wrap:pretty;
}
.t-citacao{
  font-family:var(--voz);font-style:normal;font-weight:400;
  font-size:clamp(20px,2.4vw,36px);line-height:1.26;letter-spacing:-.012em;
  max-width:24ch;
}

.vermelho{color:var(--acento-info)}
.fraca{color:var(--tinta-fraca)}
.grifo{
  background-image:linear-gradient(var(--acento),var(--acento));
  background-size:100% .10em;background-position:0 92%;background-repeat:no-repeat;
}

/* ==== [S4] ESTRUTURA ===================================================== */
.cap{position:relative;padding:clamp(72px,10vh,132px) 0;scroll-margin-top:0}
.cap--tela{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,7vh,96px) 0;
}
.cap--aperto{padding:clamp(46px,6vh,80px) 0}
.env{
  width:100%;max-width:var(--coluna);
  margin-inline:auto;padding-inline:var(--margem);
  position:relative;z-index:2;
}
.env--largo{max-width:1860px}
.env--estreito{max-width:1020px}

/* cabeçalho de capítulo — pequeno, mono, e sempre no mesmo lugar */
.cap-cab{
  display:flex;gap:clamp(14px,2.2vw,34px);align-items:baseline;
  padding-bottom:14px;margin-bottom:clamp(30px,4.4vh,60px);
  border-bottom:var(--fio) solid var(--regua);flex-wrap:wrap;
}
.cap-cab .num{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  color:var(--acento-info);
}
.cap-cab .nome{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta);
}
.cap-cab .ato{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-fraquissima);margin-left:auto;
}

/* grelhas */
.g{display:grid;gap:clamp(18px,2.2vw,36px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)}
.g-6{grid-template-columns:repeat(6,1fr)}
.g-12{grid-template-columns:repeat(12,1fr)}
.g-editorial{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.g-lateral{grid-template-columns:minmax(0,240px) minmax(0,1fr)}
.g-densa{gap:clamp(10px,1.1vw,16px)}
.g-solta{gap:clamp(28px,4vw,72px)}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}
.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}
.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}

.fio{height:var(--fio);background:var(--regua);border:0;margin:clamp(26px,3.4vh,50px) 0}
.fio--forte{height:var(--fio-estrutural);background:var(--tinta)}
.fio--vermelho{height:3px;background:var(--acento);width:56px;margin:0 0 20px}

.pilha{display:flex;flex-direction:column}
.pilha>*+*{margin-top:var(--gap,16px)}
.linha{display:flex;align-items:center;gap:var(--gap,14px);flex-wrap:wrap}
.entre{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.vazio{flex:1}

/* legenda de peça — o rodapé que toda demonstração carrega */
.legenda{
  margin-top:11px;display:flex;gap:12px;align-items:baseline;
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta-fraquissima);
}
.legenda .cod{color:var(--tinta-fraca);font-weight:500;flex-shrink:0}
.legenda .desc{text-transform:none;letter-spacing:.02em}

/* nota lateral / estatuto */
.nota{
  border-left:var(--fio-estrutural) solid var(--acento);
  padding-left:14px;
}
.nota .t-label{color:var(--acento-info);margin-bottom:6px}

/* selo de estado — nunca decorativo. diz o que o RC2 diz. */
.selo{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;padding:4px 8px;
  border:var(--fio) solid var(--regua-forte);color:var(--tinta-fraca);
  white-space:nowrap;
}
.selo::before{content:'';width:5px;height:5px;background:currentColor;flex-shrink:0}
.selo--canonico{color:var(--tinta);border-color:var(--tinta)}
.selo--operacional{color:var(--tinta);border-color:var(--regua-forte)}
.selo--engenharia{color:var(--acento-info);border-color:var(--acento-info)}
.selo--desenvolvimento{
  color:var(--tinta-fraca);border-style:dashed;border-color:var(--tinta-fraca);
}
.selo--arquivo{color:var(--tinta-fraquissima);border-color:var(--regua);text-decoration:line-through}

/* ==== [S5] MARCA ========================================================= */
.marca{display:block}
.marca svg{width:100%;height:auto;display:block}
.marca--cru svg .placa,.marca--cru svg path[fill="#121312"]{fill:var(--cru)}

/* palco da marca — fundo declarado, marca centrada, respiro medido */
.palco{
  position:relative;display:grid;place-items:center;
  padding:clamp(24px,4vw,64px);overflow:hidden;
}
.palco--cru{background:var(--cru)}
.palco--preto{background:var(--preto)}
.palco--vermelho{background:var(--vermelho)}
.palco .rotulo{
  position:absolute;left:12px;bottom:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:currentColor;opacity:.5;
}

/* área de proteção — o módulo é a haste do E: 86u */
.protecao{position:relative}
.protecao::before{
  content:'';position:absolute;inset:calc(-1 * var(--mod,10%));
  border:var(--fio) dashed var(--acento);opacity:.55;pointer-events:none;
}

/* ==== [S6] DOCUMENTO E DADO ============================================== */
/* Estética + prova. A fonte não é lixo que o design esconde. */

.painel{
  border:var(--fio) solid var(--regua-forte);background:var(--chao-2);
  padding:clamp(14px,1.6vw,22px);
}
.painel-cab{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding-bottom:9px;margin-bottom:12px;border-bottom:var(--fio) solid var(--regua);
}

/* tabela de claims */
.claims{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px}
.claims th{
  text-align:left;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  font-size:9.5px;color:var(--tinta-fraca);padding:0 12px 8px 0;
  border-bottom:var(--fio) solid var(--regua);vertical-align:bottom;
}
.claims td{
  padding:10px 12px 10px 0;vertical-align:top;line-height:1.45;
  border-bottom:var(--fio) solid var(--regua);color:var(--tinta);
}
.claims tr:last-child td{border-bottom:0}
.claims .id{font-weight:600;white-space:nowrap;color:var(--tinta)}
.claims .sec{color:var(--tinta-fraca);font-size:10px}
.claims .ok{color:var(--tinta)}
.claims .pend{color:var(--acento-info)}

/* barra de dado — sólido = medido · hachura = estimativa modelada.
   Este é um VETO do sistema, não uma preferência gráfica. */
.barra{position:relative;height:26px;background:transparent;border:var(--fio) solid var(--regua-forte)}
.barra i{position:absolute;inset:0 auto 0 0;display:block}
.barra--medida i{background:var(--tinta)}
.barra--estimada i{
  background-image:repeating-linear-gradient(
    -45deg,var(--tinta) 0 1.5px,transparent 1.5px 6px);
  border-right:var(--fio-estrutural) solid var(--tinta);
}
.barra .ic{ /* intervalo de incerteza */
  position:absolute;top:50%;height:var(--fio-estrutural);background:var(--acento);
  transform:translateY(-50%);
}
.barra .ic::before,.barra .ic::after{
  content:'';position:absolute;top:-5px;width:var(--fio-estrutural);height:11px;
  background:var(--acento);
}
.barra .ic::before{left:0}.barra .ic::after{right:0}

.eixo{
  display:flex;justify-content:space-between;margin-top:7px;
  font-family:var(--mono);font-size:9.5px;color:var(--tinta-fraquissima);
  border-top:var(--fio) solid var(--regua);padding-top:5px;
}

/* régua de campos — a barra de procedência */
.regua-campos{
  display:grid;gap:0;border-top:var(--fio) solid var(--regua-forte);
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
}
.regua-campos > div{
  padding:11px 14px 11px 0;border-right:var(--fio) solid var(--regua);
}
.regua-campos > div:last-child{border-right:0}
.regua-campos dt{
  font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-fraquissima);margin-bottom:5px;
}
.regua-campos dd{font-family:var(--mono);font-size:11px;color:var(--tinta);line-height:1.4}

/* documento reproduzido */
.doc{
  background:var(--cru);color:var(--preto);container-type:inline-size;
  padding:clamp(18px,2.2vw,34px);position:relative;
  box-shadow:0 1px 0 rgba(0,0,0,.14),0 18px 44px -22px rgba(0,0,0,.55);
}
.doc--escuro{background:var(--preto-2);color:var(--cru)}
.doc .doc-cab{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#6B665A;padding-bottom:9px;margin-bottom:14px;border-bottom:var(--fio) solid #C9C1B2;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.doc h4{
  font-family:var(--voz);font-weight:520;font-size:clamp(15px,1.35vw,21px);
  line-height:1.28;letter-spacing:-.006em;margin-bottom:9px;
}
.doc p{font-family:var(--voz);font-size:12.5px;line-height:1.62;color:#3C382E}
.doc p+p{margin-top:.7em}
.doc .marcado{background:rgba(166,33,42,.16);box-shadow:0 0 0 2px rgba(166,33,42,.16)}
.doc .rodape-doc{
  margin-top:16px;padding-top:9px;border-top:var(--fio) solid #C9C1B2;
  font-family:var(--mono);font-size:9.5px;color:#6B665A;line-height:1.5;
}

/* campo de imagem declarado — E-4: ausência permanece ausência */
.lacuna{
  border:var(--fio-estrutural) dashed var(--tinta-fraca);
  display:grid;place-content:center;gap:8px;text-align:center;
  padding:clamp(18px,3vw,42px);color:var(--tinta-fraca);min-height:150px;
}
.lacuna .t-label{color:var(--tinta-fraca)}
.lacuna .esp{
  font-family:var(--mono);font-size:10.5px;line-height:1.55;max-width:30ch;
  color:var(--tinta-fraquissima);
}

/* campo material — imagem gerada, creditada como gerada */
.mat{
  position:relative;overflow:hidden;background:var(--chao-2);
  background-size:cover;background-position:center;
}
.mat--papel{background-image:url('../assets/material/EVA_MAT_01_papel.jpg')}
.mat--impresso{background-image:url('../assets/material/EVA_MAT_02_impresso.jpg')}
.mat--scan{background-image:url('../assets/material/EVA_MAT_03_scan.jpg')}
.mat--xerox{background-image:url('../assets/material/EVA_MAT_04_xerox.jpg')}
.mat--luz{background-image:url('../assets/material/EVA_MAT_05_luz.jpg')}
.mat--parede{background-image:url('../assets/material/EVA_MAT_06_parede.jpg')}
.mat--tecido{background-image:url('../assets/material/EVA_MAT_07_tecido.jpg')}
.mat--tela{background-image:url('../assets/material/EVA_MAT_08_tela.jpg')}
.mat--arquivo{background-image:url('../assets/material/EVA_MAT_09_arquivo.jpg')}
.mat--meiotom{background-image:url('../assets/material/EVA_MAT_10_meiotom.jpg')}

/* razão de aspecto */
.r-11{aspect-ratio:1/1}.r-45{aspect-ratio:4/5}.r-916{aspect-ratio:9/16}
.r-169{aspect-ratio:16/9}.r-32{aspect-ratio:3/2}.r-23{aspect-ratio:2/3}
.r-a4{aspect-ratio:1/1.414}.r-34{aspect-ratio:3/4}

/* ==== [S6b] FOTOGRAFIA =================================================== */
/* v0.9.1. Corpus autoral real — `assets/foto/`, procedência em FOTOGRAFIA.json.
   REGRA DA CASA: a fotografia entra limpa. Não existe preset "foto EVA".
   Vermelho, RAW, Portal e halftone são operações OPCIONAIS, cada uma com uma
   classe própria, e nenhuma delas é padrão. Se todas as fotos recebessem o
   mesmo efeito, o teste teria falhado — ver 10_QA/QA_CONCEITUAL.md §4. */

.foto{
  position:relative;overflow:hidden;background:var(--preto-2);
  container-type:inline-size;display:block;
}
.foto > img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* nenhum filtro. nenhum. */
}
.foto--conter{background:var(--chao)}
.foto--conter > img{object-fit:contain}
.foto--fio{border:var(--fio) solid var(--regua)}

/* posição de corte — decisão editorial, declarada no manifest */
.op-topo   > img{object-position:50% 12%}
.op-alto   > img{object-position:50% 26%}
.op-baixo  > img{object-position:50% 76%}
.op-esq    > img{object-position:16% 50%}
.op-dir    > img{object-position:84% 50%}

/* conteúdo sobre a fotografia. só entra quando há o que dizer. */
.foto .sobre{position:absolute;inset:0;z-index:3;display:flex;pointer-events:none}
.foto .sobre > *{pointer-events:auto}
.foto .veu{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 38%,rgba(12,13,12,.82));
}
.foto .veu--lado{background:linear-gradient(90deg,rgba(12,13,12,.86) 30%,transparent 68%)}
.foto .veu--topo{background:linear-gradient(180deg,rgba(12,13,12,.74),transparent 52%)}

/* legenda e crédito. o crédito é do arquivo, não do design. */
.foto-legenda{
  display:flex;gap:10px;align-items:baseline;justify-content:space-between;
  margin-top:7px;font-family:var(--mono);font-size:9.5px;line-height:1.45;
  letter-spacing:.02em;color:var(--tinta-fraca);
}
.foto-legenda .cred{
  color:var(--tinta-fraquissima);text-transform:uppercase;letter-spacing:.1em;
  font-size:8.5px;flex-shrink:0;text-align:right;
}
.foto-legenda b{color:var(--tinta);font-weight:500}

/* ---- as três operações opcionais, cada uma com nome ---------------------- */

/* 1 · plano vermelho. estrutural: chão e passagem, nunca cortina sobre o rosto */
.foto .plano-v{
  position:absolute;left:0;right:0;bottom:0;z-index:2;background:var(--vermelho);
  clip-path:polygon(0 100%,0 var(--corte,44%),100% 0,100% 100%);
  height:var(--alt,30%);
}
/* 2 · RAW sobre fotografia. só onde estiver declarado, e desligável. */
.foto.materia::after{--materia-blend:multiply;--materia-op:.30}
.chao-preto .foto.materia::after{--materia-blend:screen;--materia-op:.14}
/* 3 · Portal como máscara. raro, e com motivo. */
.foto-portal{position:relative;overflow:hidden;background:var(--preto)}
.foto-portal svg{position:absolute;inset:0;width:100%;height:100%}

/* ---- comparadores didáticos (correto / desnecessário / excessivo) -------- */
.fot-par{display:grid;gap:12px}
.fot-par figcaption{
  font-family:var(--mono);font-size:9.5px;line-height:1.45;color:var(--tinta-fraca);
  margin-top:7px;
}
.fot-par figcaption b{
  display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:3px;color:var(--tinta);
}
.fot-par .bom b{color:var(--acento-info)}
.fot-par .ruim b{color:var(--acento-info)}
.fot-par .ruim figcaption{color:var(--tinta-fraquissima)}
.selo-don{
  position:absolute;top:0;left:0;z-index:4;background:var(--vermelho);color:#F2EBE2;
  font-family:var(--mono);font-size:8px;letter-spacing:.16em;padding:3px 7px;
}
.selo-don--neutro{background:var(--tinta);color:var(--chao)}

/* ---- ensaio visual: ritmo, não grade regular ---------------------------- */
.ensaio{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,22px);align-items:start}
.ensaio > *{grid-column:span 4}
.ensaio .e-larga{grid-column:span 8}
.ensaio .e-cheia{grid-column:1/-1}
.ensaio .e-tres{grid-column:span 3}
.ensaio .e-cinco{grid-column:span 5}
.ensaio .e-sete{grid-column:span 7}
.ensaio .e-respiro{min-height:clamp(40px,7vh,120px)}

/* ---- fotografia dentro das peças sociais -------------------------------- */
.peca .foto,.quadro .foto,.thumb .foto{position:absolute;inset:0}
.peca > .foto ~ *{position:relative;z-index:3}

/* ==== [S7] SOCIAL ======================================================== */
.peca{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:var(--chao);color:var(--tinta);
  --pad: clamp(13px,2.1cqw,26px);
  container-type:inline-size;
}
.peca > *{position:relative;z-index:2}
.peca-pad{padding:var(--pad)}
.peca-rodape{
  margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;
  gap:10px;padding:var(--pad);
}
.peca .assinatura{width:clamp(30px,7cqw,54px);opacity:.92;flex-shrink:0}
.peca .assinatura svg{width:100%;height:auto}
.peca .fonte-peca{
  font-family:var(--mono);font-size:clamp(7px,1.55cqw,10px);line-height:1.45;
  letter-spacing:.02em;color:var(--tinta-fraca);max-width:26ch;
}
.peca .kicker{
  font-family:var(--mono);font-size:clamp(7px,1.5cqw,9.5px);font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--acento-info);
}
.peca .titulo{
  font-family:var(--grot);text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 800;
  font-size:clamp(17px,6.4cqw,58px);line-height:.93;letter-spacing:-.030em;
  text-wrap:balance;
}
.peca .titulo--menor{font-size:clamp(14px,4.8cqw,42px);line-height:.97}
.peca .linhafina{
  font-family:var(--grot);font-variation-settings:'wdth' 100,'wght' 420;
  font-size:clamp(9px,2.5cqw,19px);line-height:1.34;letter-spacing:-.008em;
  color:var(--tinta);
}
.peca .numero{
  font-variation-settings:'wdth' 100,'wght' 800;font-variant-numeric:tabular-nums;
  font-size:clamp(38px,20cqw,300px);line-height:.86;letter-spacing:-.045em;
}
.peca .numero .un{font-size:.26em;font-variation-settings:'wght' 500;vertical-align:.5em;margin-left:.1em}
.peca .voz-peca{
  font-family:var(--voz);font-style:italic;font-weight:390;
  font-size:clamp(11px,3.1cqw,25px);line-height:1.3;letter-spacing:-.006em;
}
.peca .plano-vermelho{
  position:absolute;left:0;right:0;bottom:0;height:var(--h,34%);
  background:var(--vermelho);z-index:1;
  clip-path:polygon(0 100%,0 42%,100% 0,100% 100%);
}
.peca .barra-topo{height:4px;background:var(--vermelho);flex-shrink:0}

/* grade de feed */
.feed{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  background:var(--regua);border:var(--fio) solid var(--regua);
}
.feed .peca{aspect-ratio:1/1}
.feed-marca{
  position:absolute;top:6px;right:6px;z-index:5;
  font-family:var(--mono);font-size:8px;letter-spacing:.1em;
  color:#fff;background:rgba(0,0,0,.55);padding:2px 5px;text-transform:uppercase;
}

/* perfil */
.perfil{border:var(--fio) solid var(--regua);background:var(--chao)}
.perfil-topo{display:flex;gap:clamp(14px,2vw,30px);padding:clamp(14px,2vw,26px);align-items:flex-start}
.perfil-av{width:clamp(58px,7vw,94px);flex-shrink:0;border-radius:50%;overflow:hidden}
.perfil-num{display:flex;gap:clamp(16px,2.4vw,34px);margin:10px 0 12px}
.perfil-num b{font-variation-settings:'wght' 700;display:block;font-size:15px}
.perfil-num span{font-family:var(--mono);font-size:10px;color:var(--tinta-fraca);letter-spacing:.06em}

/* carrossel */
.carrossel{position:relative}
.carrossel-trilho{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:12px;scrollbar-width:thin;
  scrollbar-color:var(--regua-forte) transparent;
}
.carrossel-trilho::-webkit-scrollbar{height:5px}
.carrossel-trilho::-webkit-scrollbar-thumb{background:var(--regua-forte)}
.carrossel-trilho::-webkit-scrollbar-track{background:var(--regua)}
.carrossel-trilho > .slide{
  flex:0 0 clamp(230px,25vw,330px);scroll-snap-align:start;
}
.carrossel-ctrl{display:flex;gap:8px;align-items:center;margin-top:12px}
.carrossel-ctrl button{
  width:32px;height:32px;border:var(--fio) solid var(--regua-forte);
  display:grid;place-items:center;transition:all var(--t-rapido) var(--curva);
  color:var(--tinta);
}
.carrossel-ctrl button:hover:not(:disabled){background:var(--tinta);color:var(--chao);border-color:var(--tinta)}
.carrossel-ctrl button:disabled{opacity:.3;cursor:default}
.carrossel-ctrl button:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.carrossel-pontos{display:flex;gap:5px;margin-left:8px}
.carrossel-pontos i{width:5px;height:5px;background:var(--regua-forte);transition:background var(--t-rapido)}
.carrossel-pontos i.on{background:var(--acento)}
.carrossel-cont{
  font-family:var(--mono);font-size:10px;color:var(--tinta-fraca);
  letter-spacing:.09em;margin-left:auto;
}

/* ==== [S8] VÍDEO ========================================================= */
.quadro{position:relative;overflow:hidden;background:var(--preto);color:var(--cru);
  container-type:inline-size}
.quadro .safe{
  position:absolute;inset:6% 5%;border:var(--fio) dashed rgba(242,235,226,.22);
  pointer-events:none;z-index:9;opacity:0;transition:opacity var(--t-medio);
}
body.mostrar-safe .quadro .safe{opacity:1}
.quadro .safe::after{
  content:'SAFE AREA';position:absolute;top:3px;left:4px;
  font-family:var(--mono);font-size:7px;letter-spacing:.12em;color:rgba(242,235,226,.5);
}

/* legenda de vídeo — legibilidade antes de estilo */
.subtitulo{
  position:absolute;left:6%;right:6%;bottom:9%;z-index:8;text-align:center;
}
.subtitulo span{
  display:inline;
  font-family:var(--grot);font-variation-settings:'wdth' 100,'wght' 650;
  font-size:clamp(9px,3.6cqw,22px);line-height:1.30;letter-spacing:-.008em;
  color:#fff;background:rgba(9,9,9,.80);
  padding:.14em .34em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.subtitulo .enf{background:var(--vermelho);color:#F2EBE2}
.subtitulo--id span{
  font-family:var(--mono);font-size:clamp(7px,2.3cqw,13px);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;background:rgba(9,9,9,.86);
}
.subtitulo--trad span{font-style:italic;font-family:var(--voz);font-weight:400;background:rgba(9,9,9,.8)}

/* lower third */
.lower{
  position:absolute;left:5%;bottom:14%;z-index:8;
  border-left:3px solid var(--vermelho);padding:5px 10px;background:rgba(9,9,9,.72);
}
.lower b{
  display:block;font-family:var(--grot);text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 700;
  font-size:clamp(9px,2.9cqw,17px);letter-spacing:-.012em;line-height:1.05;color:#F2EBE2;
}
.lower span{
  display:block;font-family:var(--mono);font-size:clamp(6.5px,1.8cqw,10px);
  letter-spacing:.09em;text-transform:uppercase;color:rgba(242,235,226,.66);margin-top:3px;
}

/* lettering como massa */
.lettering{
  position:absolute;inset:0;display:grid;z-index:7;padding:7%;
  place-content:var(--pos,center);
}
.lettering b{
  font-family:var(--grot);text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 800;
  font-size:clamp(22px,15cqw,120px);line-height:.86;letter-spacing:-.038em;
  color:#F2EBE2;text-wrap:balance;
}

/* thumbnail */
.thumb{position:relative;overflow:hidden;aspect-ratio:16/9;container-type:inline-size;
  background:var(--preto);color:var(--cru);display:flex}
.thumb > div:not(.mat):not([style*='position:absolute']){min-height:100%}
.thumb .tit{
  font-family:var(--grot);text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 800;
  font-size:clamp(12px,7.2cqw,86px);line-height:.90;letter-spacing:-.032em;
}
.thumb .dur{
  position:absolute;right:6px;bottom:6px;z-index:6;
  font-family:var(--mono);font-size:9px;font-weight:500;background:rgba(9,9,9,.86);
  color:#F2EBE2;padding:1px 4px;letter-spacing:.02em;
}
.video-item{display:flex;flex-direction:column;gap:9px}
.video-item .vt{
  font-family:var(--grot);font-variation-settings:'wdth' 100,'wght' 600;
  font-size:14px;line-height:1.22;letter-spacing:-.012em;
}
.video-item .vm{font-family:var(--mono);font-size:10.5px;color:var(--tinta-fraca)}

/* ==== [S9] WEB =========================================================== */
.tela-site{
  border:var(--fio) solid var(--regua-forte);overflow:hidden;
  background:var(--cru);color:var(--preto);container-type:inline-size;
}
.tela-site.escura{background:var(--preto);color:var(--cru)}
.barra-navegador{
  display:flex;align-items:center;gap:8px;padding:7px 10px;
  background:var(--preto-2);border-bottom:var(--fio) solid #000;
}
.barra-navegador .pontos{display:flex;gap:5px}
.barra-navegador .pontos i{width:8px;height:8px;border-radius:50%;background:#3A3B38}
.barra-navegador .url{
  flex:1;font-family:var(--mono);font-size:10px;color:#8B867A;
  background:#0C0D0C;padding:3px 9px;display:flex;align-items:center;gap:6px;
}
.barra-navegador .url img{width:11px;height:11px}

.site-topo{
  display:flex;align-items:center;gap:clamp(12px,2.5cqw,28px);
  padding:clamp(10px,1.6cqw,20px) clamp(12px,2.2cqw,30px);
  border-bottom:var(--fio-estrutural) solid currentColor;
}
.site-topo .marca-h{width:clamp(58px,9cqw,104px);flex-shrink:0}
.site-topo nav{
  display:flex;gap:clamp(9px,1.6cqw,20px);
  font-family:var(--mono);font-size:clamp(8px,1.15cqw,11px);
  letter-spacing:.1em;text-transform:uppercase;flex-wrap:wrap;
}
.site-topo nav a{opacity:.72}
.site-topo nav a.on{opacity:1;box-shadow:0 3px 0 var(--vermelho)}
.site-topo .busca{
  margin-left:auto;font-family:var(--mono);font-size:clamp(8px,1.1cqw,11px);
  border:var(--fio) solid currentColor;padding:3px 9px;opacity:.62;white-space:nowrap;
}

.mobile{
  border:8px solid #0A0B0A;border-radius:26px;overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8);container-type:inline-size;
  background:var(--cru);
}
.mobile-status{
  display:flex;justify-content:space-between;padding:6px 14px 4px;
  font-family:var(--mono);font-size:8.5px;font-weight:600;
  background:var(--preto);color:var(--cru);
}

/* newsletter */
.email{background:var(--cru);color:var(--preto);border:var(--fio) solid var(--regua-forte)}
.email-cab{
  padding:11px 14px;border-bottom:var(--fio) solid #C9C1B2;
  font-family:var(--mono);font-size:10px;color:#6B665A;display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap;
}

/* open graph */
.og{border:var(--fio) solid var(--regua-forte);overflow:hidden;background:var(--chao-2)}
.og-txt{padding:9px 11px}
.og-txt b{
  display:block;font-family:var(--grot);font-variation-settings:'wght' 600;
  font-size:12.5px;line-height:1.22;margin-bottom:3px;
}
.og-txt span{font-family:var(--mono);font-size:9.5px;color:var(--tinta-fraca);line-height:1.4;display:block}
.bolha{
  background:#1F2C33;padding:7px;max-width:290px;border-radius:8px 8px 8px 2px;
}

/* ==== [S10] FÍSICO ======================================================= */
/* container-type é obrigatório: as composições físicas dimensionam por cqw.
   Sem ele, todo clamp() cai no piso e a peça sai com tipo minúsculo. */
.objeto{position:relative;overflow:hidden;background:var(--preto-2);
  container-type:inline-size}
.objeto .cena{position:absolute;inset:0;background-size:cover;background-position:center}
.objeto .conteudo{position:relative;z-index:2;height:100%}
.objeto .sombra{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 8%,rgba(255,255,255,.10),transparent 55%),
             linear-gradient(180deg,transparent 45%,rgba(0,0,0,.34));
}

/* pôster na parede */
.lambe{
  position:absolute;background:var(--cru);container-type:inline-size;
  box-shadow:0 2px 10px rgba(0,0,0,.42);
}
.lambe.rasgo{clip-path:polygon(0 0,100% 0,100% 97%,72% 100%,38% 96.5%,0 99%)}

/* camiseta e tote — a marca carrega a aplicação, não o mockup */
.veste{position:relative;display:grid;place-items:center;overflow:hidden;
  container-type:inline-size}
.veste .estampa{position:relative;z-index:2}
.veste::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 22%,rgba(255,255,255,.14),transparent 62%),
             linear-gradient(160deg,transparent 55%,rgba(0,0,0,.24));
}

/* adesivo */
.sticker{
  position:relative;display:grid;place-items:center;overflow:hidden;
  container-type:inline-size;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.30));
}
.sticker--circ{border-radius:50%}

/* ==== [S11] MOTION ======================================================= */
/* Cortes secos. Movimento proporcional à ideia. Silêncio permitido. */

.motion{position:relative;overflow:hidden;background:var(--preto);container-type:inline-size}
.motion-palco{position:absolute;inset:0}
.motion .fase{
  position:absolute;inset:0;display:grid;place-items:center;
}

@keyframes portal-abre{
  0%,12%   {clip-path:inset(50% 0 50% 0);opacity:1}
  38%,72%  {clip-path:inset(0 0 0 0);opacity:1}
  100%     {clip-path:inset(0 0 0 0);opacity:1}
}
@keyframes plano-entra{
  0%,20%  {transform:translateX(-104%)}
  46%,86% {transform:translateX(0)}
  100%    {transform:translateX(0)}
}
@keyframes massa-sobe{
  0%,14%  {transform:translateY(112%)}
  42%,88% {transform:translateY(0)}
  100%    {transform:translateY(0)}
}
@keyframes doc-revela{
  0%,16%  {clip-path:inset(0 100% 0 0)}
  52%,90% {clip-path:inset(0 0 0 0)}
  100%    {clip-path:inset(0 0 0 0)}
}
@keyframes icone-corta{
  0%,18%  {clip-path:polygon(0 0,0 0,0 100%,0 100%)}
  44%,88% {clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
  100%    {clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
}
@keyframes raw-liga{
  0%,34%  {opacity:0}
  62%,92% {opacity:.5}
  100%    {opacity:.5}
}
@keyframes piscar{50%{opacity:.25}}

.motion[data-motion] .anima{animation-duration:var(--dur,3.2s);
  animation-iteration-count:infinite;animation-timing-function:var(--curva-seca)}
.motion.parado .anima{animation-play-state:paused}
body.motion-parado .anima{animation-play-state:paused}
.m-portal .anima{animation-name:portal-abre}
.m-plano .anima{animation-name:plano-entra}
.m-massa .anima{animation-name:massa-sobe}
.m-doc .anima{animation-name:doc-revela}
.m-icone .anima{animation-name:icone-corta}
.m-raw .anima{animation-name:raw-liga}

/* v0.9.1 · fotografia por corte. steps(1) = corte seco, sem interpolação:
   é o que separa isto de um Ken Burns. Nenhuma fase deriva continuamente. */
@keyframes foto-corte-a{0%,25.9%{opacity:1}26%,100%{opacity:0}}
@keyframes foto-corte-b{0%,25.9%{opacity:0}26%,49.9%{opacity:1}50%,100%{opacity:0}}
@keyframes foto-corte-c{0%,49.9%{opacity:0}50%,100%{opacity:1}}
@keyframes foto-empurra{0%,25.9%{transform:scale(1)}26%{transform:scale(1)}50%,100%{transform:scale(1.07)}}
@keyframes foto-lettering{0%,59.9%{opacity:0}60%,100%{opacity:1}}
.m-foto .f-a{animation-name:foto-corte-a;animation-timing-function:steps(1,end)}
.m-foto .f-b{animation-name:foto-corte-b;animation-timing-function:steps(1,end)}
.m-foto .f-c{animation-name:foto-corte-c;animation-timing-function:steps(1,end)}
.m-foto .f-b img{animation:foto-empurra var(--dur,5.2s) linear infinite}
.m-foto .f-lettering{animation:foto-lettering var(--dur,5.2s) steps(1,end) infinite}

.motion-ficha{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:0;
  border-top:var(--fio) solid var(--regua);margin-top:10px;
}
.motion-ficha > div{padding:8px 10px 8px 0;border-right:var(--fio) solid var(--regua)}
.motion-ficha > div:last-child{border-right:0}
.motion-ficha dt{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-fraquissima);margin-bottom:4px;
}
.motion-ficha dd{font-family:var(--mono);font-size:10.5px;color:var(--tinta);line-height:1.35}
.motion-ficha .veto dd{color:var(--acento-info)}

/* storyboard: três quadros, para o PDF */
.storyboard{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.storyboard figcaption{
  font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-fraquissima);margin-top:6px;
}

/* ==== [S12] NAVEGAÇÃO ==================================================== */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;
  display:flex;flex-direction:column;align-items:center;
  padding:14px 0;background:rgba(18,19,18,.90);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-right:var(--fio) solid #2A2B28;
  transform:translateX(-100%);transition:transform var(--t-medio) var(--curva);
}
body.navegando .rail{transform:translateX(0)}
@media screen and (min-width:861px){
  body.navegando{padding-left:var(--rail)}
  body.navegando .rail{left:0}
}
.rail-marca{width:24px;margin-bottom:16px;opacity:.9}
.rail-marca svg{width:100%;height:auto}
.rail-lista{
  flex:1;display:flex;flex-direction:column;gap:1px;width:100%;
  overflow-y:auto;scrollbar-width:none;
}
.rail-lista::-webkit-scrollbar{display:none}
.rail-lista a{
  display:grid;place-items:center;padding:7px 0;position:relative;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.04em;
  color:#6E6A61;transition:color var(--t-rapido) var(--curva);
}
.rail-lista a:hover,.rail-lista a:focus-visible{color:#F2EBE2;outline:none}
.rail-lista a.on{color:#F2EBE2}
.rail-lista a.on::before{
  content:'';position:absolute;left:0;top:2px;bottom:2px;width:2px;background:var(--vermelho);
}
.rail-lista a .rot{
  position:absolute;left:calc(100% + 8px);white-space:nowrap;
  background:#F2EBE2;color:#121312;padding:3px 8px;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity var(--t-rapido);
}
.rail-lista a:hover .rot,.rail-lista a:focus-visible .rot{opacity:1}
.rail-fim{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:12px}

/* controles globais */
.controles{
  position:fixed;right:14px;top:14px;z-index:60;display:flex;gap:6px;
  opacity:0;pointer-events:none;transition:opacity var(--t-medio) var(--curva);
}
body.navegando .controles{opacity:1;pointer-events:auto}
.ctrl{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;padding:6px 10px;
  border:var(--fio) solid #3A3B38;color:#8B867A;
  background:rgba(18,19,18,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:all var(--t-rapido) var(--curva);
}
.ctrl:hover{color:#F2EBE2;border-color:#F2EBE2}
.ctrl:focus-visible{outline:2px solid var(--vermelho);outline-offset:2px}
.ctrl.on{background:#F2EBE2;color:#121312;border-color:#F2EBE2}

/* progresso */
.progresso{
  position:fixed;left:0;top:0;height:2px;background:var(--vermelho);z-index:70;
  width:0;transition:width 90ms linear;
}

/* comparador do/don't */
.comparador{position:relative;overflow:hidden;user-select:none;touch-action:pan-y}
.comparador .lado{position:absolute;inset:0}
.comparador .lado--b{clip-path:inset(0 0 0 var(--x,50%))}
.comparador .divisor{
  position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--cru);
  z-index:8;pointer-events:none;
}
.comparador .divisor::after{
  content:'';position:absolute;top:50%;left:50%;width:34px;height:34px;
  transform:translate(-50%,-50%);border:2px solid var(--cru);border-radius:50%;
  background:rgba(18,19,18,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.comparador input[type=range]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:9;margin:0;
}
.comparador input[type=range]:focus-visible + .divisor{box-shadow:0 0 0 3px var(--vermelho)}
.comparador .tag{
  position:absolute;top:9px;z-index:10;
  font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;padding:3px 7px;
}
.comparador .tag--a{left:9px;background:var(--cru);color:var(--preto)}
.comparador .tag--b{right:9px;background:var(--vermelho);color:var(--cru)}

/* filtro de ícones */
.filtro{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:18px}
.filtro button{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 9px;border:var(--fio) solid var(--regua-forte);
  color:var(--tinta-fraca);transition:all var(--t-rapido) var(--curva);
}
.filtro button:hover{color:var(--tinta);border-color:var(--tinta)}
.filtro button.on{background:var(--tinta);color:var(--chao);border-color:var(--tinta)}
.filtro button:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

.grade-icones{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
  gap:1px;background:var(--regua);border:var(--fio) solid var(--regua);
}
.icone-cel{
  background:var(--chao);padding:11px 7px 8px;display:flex;flex-direction:column;
  align-items:center;gap:7px;transition:background var(--t-rapido);
}
.icone-cel:hover{background:var(--chao-2)}
.icone-cel img{width:38px;height:38px;object-fit:contain}
.icone-cel .cod{
  font-family:var(--mono);font-size:7.5px;letter-spacing:.04em;color:var(--tinta-fraquissima);
  text-align:center;line-height:1.3;
}
.icone-cel[hidden]{display:none}

/* entrada por scroll — progressive enhancement.
   O conteúdo NASCE VISÍVEL. Só depois que o JS se confirma ativo (classe .js no <html>,
   escrita no <head> antes do primeiro paint) é que .rev é armado para revelar.
   Sem JS, nada some: não existe regra que esconda .rev fora de .js. */
.js .rev{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-lento) var(--curva),transform var(--t-lento) var(--curva)}
.js .rev.vis{opacity:1;transform:none}
.rev-d1{transition-delay:70ms}.rev-d2{transition-delay:140ms}
.rev-d3{transition-delay:210ms}.rev-d4{transition-delay:280ms}

/* ==== [S13] RESPONSIVO =================================================== */
/* No mobile o ritmo muda; algumas composições trocam de arquitetura. */

@media screen and (max-width:1180px){
  .g-6{grid-template-columns:repeat(3,1fr)}
  .g-5{grid-template-columns:repeat(3,1fr)}
  .g-editorial{grid-template-columns:1fr}
  .g-lateral{grid-template-columns:1fr}
  .c7,.c8,.c9{grid-column:span 12}
  .c5,.c6{grid-column:span 12}
}
@media screen and (max-width:1180px){
  /* v0.9.1 · o ensaio visual perde a coluna do meio, mas mantém o ritmo:
     larga continua larga, respiro continua respiro. */
  .ensaio > *{grid-column:span 6}
  .ensaio .e-larga,.ensaio .e-sete{grid-column:span 8}
  .ensaio .e-tres{grid-column:span 4}
  .ensaio .e-cinco{grid-column:span 6}
}
@media screen and (max-width:860px){
  .ensaio > *,.ensaio .e-larga,.ensaio .e-sete,.ensaio .e-tres,.ensaio .e-cinco{grid-column:1/-1}
  .ensaio .e-respiro{min-height:24px}
  :root{--rail:0px}
  .rail{
    left:0;right:0;top:auto;bottom:0;width:auto;height:46px;
    flex-direction:row;padding:0 8px;border-right:0;
    border-top:var(--fio) solid #2A2B28;transform:translateY(100%);
  }
  body.navegando .rail{transform:translateY(0)}
  .rail-marca,.rail-fim{display:none}
  .rail-lista{flex-direction:row;overflow-x:auto;gap:0;align-items:center}
  .rail-lista a{padding:0 11px;height:46px}
  .rail-lista a.on::before{left:8px;right:8px;top:auto;bottom:0;width:auto;height:2px}
  .rail-lista a .rot{display:none}
  .controles{top:auto;bottom:56px;right:10px}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .g-6{grid-template-columns:repeat(2,1fr)}
  .g-5{grid-template-columns:repeat(2,1fr)}
  .c3,.c4{grid-column:span 6}
  .regua-campos{grid-template-columns:repeat(2,1fr)}
  .regua-campos > div{border-bottom:var(--fio) solid var(--regua)}
  .storyboard{grid-template-columns:1fr}
  .cap{padding:64px 0}
}
@media screen and (max-width:560px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .g-6,.g-5{grid-template-columns:repeat(2,1fr)}
  .c2,.c3,.c4,.c5,.c6{grid-column:span 12}
  .feed{gap:2px}
  .grade-icones{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}
  .icone-cel img{width:30px;height:30px}
  .cap-cab{gap:10px}
  .cap-cab .ato{margin-left:0;width:100%}
}

/* movimento reduzido — o sistema continua legível parado */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .rev,.js .rev{opacity:1;transform:none}
  .motion .anima{animation:none!important}
  .motion[data-fallback]::after{
    content:attr(data-fallback);position:absolute;left:8px;bottom:8px;z-index:20;
    font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
    color:rgba(242,235,226,.6);background:rgba(9,9,9,.7);padding:3px 6px;
  }
}

/* ==== [S14] IMPRESSÃO / PDF ============================================== */
/* Nada importante desaparece por não estar animado.
   Animação vira frame. Hover vira estado explícito. Navegação vira índice. */

@media print{
  @page{size:1600px 900px;margin:0}

  /* O Chrome avalia media query de impressão contra a largura do papel padrão
     (~816 px), não contra o @page. Sem isto, toda a página cairia no layout
     mobile e depois seria ampliada. Forçar a largura de layout resolve as duas
     coisas: a composição volta a ser a de tela larga, e o Chrome reduz para
     caber na página — 1600 de layout ÷ 816 de papel = a escala exata do 16:9.
     Os colapsos responsivos estão todos sob `@media screen`, e por isso não
     disparam aqui. */
  html,body{width:1600px}

  html,body{background:#121312!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.navegando{padding-left:0}
  .rail,.controles,.progresso,.so-tela{display:none!important}

  /* Cada capítulo começa numa página. Capítulos longos correm para a
     seguinte — o que não pode é um bloco ser partido no meio. */
  .cap{
    break-after:page;page-break-after:always;break-before:auto;
    min-height:898px;padding:46px 0;
    display:flex;flex-direction:column;justify-content:center;
  }
  .cap:last-child{break-after:auto;page-break-after:auto}
  .cap--continua{break-after:auto;page-break-after:auto}
  .cap--tela{justify-content:center}

  /* blocos que nunca podem ser cortados ao meio */
  .painel,.mf,.peca,.quadro,.thumb,.doc,.tela-site,.mobile,.email,.og,.foto,.foto-portal,
  figure,.motion,.comparador,.anat,.perfil,.fluxo li,.icone-cel,
  .escada figure,.claims tr,.lockups figure,.slide,.objeto,.veste{
    break-inside:avoid;page-break-inside:avoid;
  }
  .g,.feed,.grade-icones,.manifesto{break-inside:auto}

  .env{max-width:none;padding-inline:58px}
  .env--estreito{max-width:1180px}

  /* `vw` continua resolvendo contra o papel (~816 px), então todo clamp que
     depende de vw cairia no piso. Aqui a escala é declarada em px absolutos,
     calibrada para a tela larga. */
  .t-impacto{font-size:126px}
  .t-headline{font-size:60px}
  .t-titulo{font-size:31px}
  .t-sub{font-size:24px}
  .t-corpo{font-size:15.5px}
  .t-dado{font-size:110px}
  .t-voz{font-size:29px}
  .t-citacao{font-size:34px}
  .mf b{font-size:38px}
  .mf span{font-size:15px}
  .papeis b{font-size:32px}
  .familias .grot{font-size:36px}
  .familias .mono{font-size:16px}
  .familias .voz{font-size:26px}
  .fluxo b{font-size:15px}
  .arquiteturas figcaption span,.trat figcaption span{font-size:12.5px}
  .hierarquia .t-impacto{font-size:86px}
  .papel-v .tira img{width:56px}
  .escada img{max-width:none}
  .env{--margem:58px}

  /* A abertura dimensiona por `vh`. Na página, 1vh = 9px, e o conjunto
     símbolo + wordmark passava de 820px dentro de uma caixa útil de 806 —
     estourava, e o Chrome empurrava tudo para a página seguinte deixando a
     primeira inteiramente vazia. Aqui a assinatura de abertura é dimensionada
     em px absolutos, para a página. */
  .abertura-marca{width:300px!important;max-width:none!important}
  .abertura-marca + div{width:392px!important;max-width:none!important;margin-top:34px!important}
  .rev{opacity:1!important;transform:none!important}
  .motion .anima{animation:none!important}
  .so-impresso{display:revert!important}
  .carrossel-trilho{overflow:visible;display:grid;
    grid-template-columns:repeat(var(--n,5),1fr);gap:9px}
  .carrossel-trilho > .slide{flex:none}
  .carrossel-ctrl{display:none}
  .quadro .safe{opacity:0}
  .comparador .lado--b{clip-path:inset(0 0 0 50%)}
  .comparador input{display:none}
  a[href^="http"]::after{content:''}
}
.so-impresso{display:none}
@media screen{.so-impresso{display:none}}

/* utilidades finais */
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{
  position:absolute;left:8px;top:-46px;z-index:99;background:var(--cru);color:var(--preto);
  padding:8px 14px;font-family:var(--mono);font-size:11px;transition:top var(--t-rapido);
}
.pular:focus{top:8px}