/* =============================================================================
   Tenet Tecnologia · tenet.ia.br
   Direção "infraestrutura": grade técnica de 1 px, rótulos em mono, uma luz de
   ametista no eixo. Título em Newsreader (serifa editorial) contra a Mona Sans
   e a Martian Mono (técnicas).

   Sem script. A política de privacidade do site diz que ele "não usa scripts",
   e a CSP (_headers) é script-src 'none'. Por isso:
   - o tema segue o sistema (prefers-color-scheme), sem interruptor: um botão
     só de CSS esqueceria a escolha a cada página, e guardá-la pediria script;
   - o menu do celular abre por :target e fecha sozinho ao seguir um link.
   Nada de style="" no HTML: a CSP é style-src 'self'.

   Contraste conferido por script nos dois temas: texto >= 4,5:1, contorno de
   alvo e foco >= 3:1.
   ========================================================================== */

@layer fontes, tokens, base, componentes, casca, secoes, legal, movimento;

/* ------------------------------------------------------------------ fontes */
/* Arquivos em /fontes/ (SIL OFL 1.1). O caminho é relativo a este arquivo. */
@layer fontes {
  @font-face {
    font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%;
    font-display: swap; src: url("fontes/mona-sans-normal-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%;
    font-display: swap; src: url("fontes/mona-sans-normal-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Martian Mono"; font-style: normal; font-weight: 100 800; font-stretch: 75% 112.5%;
    font-display: swap; src: url("fontes/martian-mono-normal-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Martian Mono"; font-style: normal; font-weight: 100 800; font-stretch: 75% 112.5%;
    font-display: swap; src: url("fontes/martian-mono-normal-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Newsreader"; font-style: normal; font-weight: 200 800;
    font-display: swap; src: url("fontes/newsreader-normal-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Newsreader"; font-style: normal; font-weight: 200 800;
    font-display: swap; src: url("fontes/newsreader-normal-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Newsreader"; font-style: italic; font-weight: 200 800;
    font-display: swap; src: url("fontes/newsreader-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Newsreader"; font-style: italic; font-weight: 200 800;
    font-display: swap; src: url("fontes/newsreader-italic-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
}

/* ------------------------------------------------------------------ tokens */
/* Cada cor é light-dark(claro, escuro). O tema vem do sistema. Quem pinta com
   var() resolve a cor pelo color-scheme do próprio elemento: o rodapé fica
   escuro nos dois temas só com color-scheme. */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* superfícies: névoa no claro, grafite de matiz 286 no escuro */
    --fundo:        light-dark(#fafafb, #0a0a0d);
    --sup-1:        light-dark(#ffffff, #111114);
    --sup-2:        light-dark(#f4f4f7, #16161b);
    --sup-3:        light-dark(#ebebf0, #1e1e25);
    --linho:        light-dark(#f4ece0, #16161b);   /* linho só no claro; no escuro, grafite */
    --vidro:        light-dark(rgb(250 250 251 / .82), rgb(10 10 13 / .78));

    /* tinta: quatro degraus, todos >= 5,9:1 sobre --fundo */
    --tinta:        light-dark(#1b1b21, #f1f1f4);   /* 16,6 / 17,6 */
    --tinta-2:      light-dark(#3a3a44, #cdcdd4);   /* 11,0 / 12,6 */
    --tinta-3:      light-dark(#4e4e58, #adadb6);   /*  8,0 /  9,0 */
    --tinta-4:      light-dark(#62626d, #8e8e99);   /*  5,9 /  6,1 */

    /* fios: só divisória, nunca contorno de alvo */
    --linha:        light-dark(rgb(27 27 33 / .09), rgb(241 241 244 / .085));
    --linha-forte:  light-dark(rgb(27 27 33 / .16), rgb(241 241 244 / .15));
    --grade:        light-dark(rgb(27 27 33 / .045), rgb(241 241 244 / .04));
    --veu:          light-dark(rgb(27 27 33 / .045), rgb(241 241 244 / .05));
    --borda-campo:  light-dark(#80808a, #797982);   /* contorno de alvo, >= 3:1 */

    /* ação */
    --acao:         light-dark(#1b1b21, #e6e6ec);
    --acao-hover:   light-dark(#3a3a44, #ffffff);
    --acao-texto:   light-dark(#f7f7f9, #16161b);

    /* o roxo do Otto: foco, seleção, o ponto do eixo. Nunca estado. */
    --otto:         light-dark(#6d3bcd, #b298f9);   /* 6,3 / 7,9 */
    --otto-veu:     light-dark(rgb(109 59 205 / .12), rgb(178 152 249 / .16));
    --otto-fio:     light-dark(rgb(109 59 205 / .55), rgb(178 152 249 / .6));

    /* sinais da fila (os mesmos do painel do Otto) */
    --atencao:        light-dark(#b36d0c, #e89c2c);
    --atencao-tinta:  light-dark(#7c4305, #f0b055);
    --atencao-fundo:  light-dark(#ffebc8, #38270a);
    --urgente:        light-dark(#bf281e, #f0564b);
    --urgente-tinta:  light-dark(#9b1a11, #ff8a80);
    --urgente-fundo:  light-dark(#fdeceb, #3a1613);
    --urgente-borda:  light-dark(#f2bfbb, #63241f);

    /* a janela do Otto (Fig. 03): a paleta do próprio painel */
    --o-fundo:      light-dark(#f1f1f4, #111114);
    --o-papel:      light-dark(#ffffff, #1b1b21);
    --o-papel-2:    light-dark(#f4ece0, #1f1d1b);
    --o-elevado:    light-dark(#ffffff, #2c2c33);
    --o-borda:      light-dark(#e2e2e7, #2b2b30);

    --sombra-cor:   light-dark(rgb(27 27 33 / .07), rgb(0 0 0 / .5));
    --brilho:       light-dark(rgb(255 255 255 / 0), rgb(255 255 255 / .045));

    /* tipo */
    --serif: "Newsreader", "Iowan Old Style", Charter, "Sitka Text", Cambria, Georgia, serif;
    --sans:  "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:  "Martian Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --mono-l: 78%;

    --t-display: clamp(2.75rem, 1.2rem + 4.8vw, 6rem);
    --t-h2:      clamp(2.125rem, 1.45rem + 2.35vw, 3.625rem);
    --t-h3:      clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
    --t-lede:    clamp(1.0625rem, .98rem + .45vw, 1.3125rem);
    --t-corpo:   clamp(1rem, .97rem + .15vw, 1.0625rem);
    --t-pequeno: .9375rem;
    --t-rotulo:  .75rem;

    /* espaço: 16 px de margem a 375, 64 px a partir de 1440 */
    --max:      1280px;
    --margem:   clamp(16px, calc(16px + (100vw - 375px) * .04507), 64px);
    --celula-x: clamp(0px, -12px + 3.4vw, 48px);
    --secao:    clamp(4.5rem, 2.5rem + 5.4vw, 8.5rem);
    --topo:     64px;

    --raio-p: 6px;
    --raio:   12px;
    --raio-g: 16px;

    --ease-saida: cubic-bezier(.16, 1, .3, 1);
    --ease-ui:    cubic-bezier(.165, .84, .44, 1);
  }

  /* Navegador sem light-dark() (Safari antes do 17.5): as mesmas cores, por
     prefers-color-scheme. O rodapé repete o escuro porque aqui color-scheme não
     troca cor. */
  @supports not (color: light-dark(#000, #fff)) {
    :root {
      --fundo: #fafafb; --sup-1: #ffffff; --sup-2: #f4f4f7; --sup-3: #ebebf0; --linho: #f4ece0;
      --vidro: rgb(250 250 251 / .82);
      --tinta: #1b1b21; --tinta-2: #3a3a44; --tinta-3: #4e4e58; --tinta-4: #62626d;
      --linha: rgb(27 27 33 / .09); --linha-forte: rgb(27 27 33 / .16); --grade: rgb(27 27 33 / .045);
      --veu: rgb(27 27 33 / .045); --borda-campo: #80808a;
      --acao: #1b1b21; --acao-hover: #3a3a44; --acao-texto: #f7f7f9;
      --otto: #6d3bcd; --otto-veu: rgb(109 59 205 / .12); --otto-fio: rgb(109 59 205 / .55);
      --atencao: #b36d0c; --atencao-tinta: #7c4305; --atencao-fundo: #ffebc8;
      --urgente: #bf281e; --urgente-tinta: #9b1a11; --urgente-fundo: #fdeceb; --urgente-borda: #f2bfbb;
      --o-fundo: #f1f1f4; --o-papel: #ffffff; --o-papel-2: #f4ece0; --o-elevado: #ffffff; --o-borda: #e2e2e7;
      --sombra-cor: rgb(27 27 33 / .07); --brilho: rgb(255 255 255 / 0);
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --fundo: #0a0a0d; --sup-1: #111114; --sup-2: #16161b; --sup-3: #1e1e25; --linho: #16161b;
        --vidro: rgb(10 10 13 / .78);
        --tinta: #f1f1f4; --tinta-2: #cdcdd4; --tinta-3: #adadb6; --tinta-4: #8e8e99;
        --linha: rgb(241 241 244 / .085); --linha-forte: rgb(241 241 244 / .15); --grade: rgb(241 241 244 / .04);
        --veu: rgb(241 241 244 / .05); --borda-campo: #797982;
        --acao: #e6e6ec; --acao-hover: #ffffff; --acao-texto: #16161b;
        --otto: #b298f9; --otto-veu: rgb(178 152 249 / .16); --otto-fio: rgb(178 152 249 / .6);
        --atencao: #e89c2c; --atencao-tinta: #f0b055; --atencao-fundo: #38270a;
        --urgente: #f0564b; --urgente-tinta: #ff8a80; --urgente-fundo: #3a1613; --urgente-borda: #63241f;
        --o-fundo: #111114; --o-papel: #1b1b21; --o-papel-2: #1f1d1b; --o-elevado: #2c2c33; --o-borda: #2b2b30;
        --sombra-cor: rgb(0 0 0 / .5); --brilho: rgb(255 255 255 / .045);
      }
    }
    .rodape {
      --fundo: #0a0a0d; --sup-1: #111114; --sup-2: #16161b;
      --tinta: #f1f1f4; --tinta-2: #cdcdd4; --tinta-3: #adadb6; --tinta-4: #8e8e99;
      --linha: rgb(241 241 244 / .085); --linha-forte: rgb(241 241 244 / .15);
      --veu: rgb(241 241 244 / .05); --borda-campo: #797982; --otto: #b298f9; --otto-fio: rgb(178 152 249 / .6);
    }
  }
}

/* -------------------------------------------------------------------- base */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--topo) + 20px);
    background: var(--fundo);
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  body {
    margin: 0;
    min-width: 320px;
    background: var(--fundo);
    color: var(--tinta-2);
    font-family: var(--sans);
    font-size: var(--t-corpo);
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
    overflow-x: clip;
  }
  h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  h1, h2, h3 { color: var(--tinta); font-weight: 520; text-wrap: balance; }
  p, li, dd { text-wrap: pretty; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
  svg { display: block; }
  strong, b { font-weight: 600; color: var(--tinta); }
  abbr[title] { text-decoration: none; }
  code { font-family: var(--mono); font-size: .84em; font-stretch: var(--mono-l); overflow-wrap: anywhere; }
  ::selection { background: var(--otto-veu); color: var(--tinta); }
  :focus-visible { outline: 2px solid var(--otto); outline-offset: 3px; border-radius: 4px; }
  time, .num { font-variant-numeric: tabular-nums; }
  a, button, summary, label { touch-action: manipulation; }

  .so-leitor {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .pular {
    position: absolute; left: 16px; top: -100px; z-index: 100;
    padding: 10px 16px; border-radius: var(--raio-p);
    background: var(--acao); color: var(--acao-texto); font-weight: 560; text-decoration: none;
  }
  .pular:focus-visible { top: 12px; }

  /* A voz editorial: Newsreader, só em título de exibição. */
.abertura h1, .titulo-secao, .contato h2, .legal-cabeca h1, .rodape-missao, .quiasmo {
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-weight: 370;
  }
  .abertura h1 em, .titulo-secao em, .rodape-missao em {
    font-style: italic; font-weight: 360; letter-spacing: -.01em;
  }
  /* tecnologIA: o "ia" fica em caixa alta e em ametista; o texto continua "tecnologia" */
  .ia { text-transform: uppercase; color: var(--otto); letter-spacing: .01em; }
}

/* ------------------------------------------------------------------- casca */
@layer casca {
  .largura { width: min(100% - 2 * var(--margem), var(--max)); margin-inline: auto; }

  /* --- cabeçalho: o único vidro do site --- */
  .topo {
    position: sticky; top: 0; z-index: 50;
    height: var(--topo);
    background: var(--vidro);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    backdrop-filter: saturate(1.4) blur(18px);
    border-bottom: 1px solid var(--linha);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .topo { background: var(--fundo); }
  }
  .topo-dentro {
    height: 100%;
    display: flex; align-items: center; gap: 24px;
    padding-inline: var(--celula-x);
  }
  .marca {
    display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
    color: var(--tinta); text-decoration: none;
  }
  .marca-svg { height: 19px; width: auto; fill: currentColor; }
  .nav-principal ul { display: flex; gap: 2px; }
  .nav-principal a, .nav-idioma {
    display: inline-flex; align-items: center; min-height: 40px; padding-inline: 12px;
    border-radius: var(--raio-p);
    color: var(--tinta-3); text-decoration: none; font-size: .875rem; font-weight: 500;
    transition: color .18s var(--ease-ui), background-color .18s var(--ease-ui);
  }
  .nav-principal a:hover, .nav-idioma:hover { color: var(--tinta); background: var(--veu); }
  .nav-principal a[aria-current="page"] { color: var(--tinta); }
  .nav-idioma {
    font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
    letter-spacing: .06em; text-transform: uppercase;
  }
  .topo-acoes { display: flex; align-items: center; gap: 6px; }

  /* menu do celular: abre por :target (#menu) e fecha ao seguir qualquer link */
  .menu-abrir {
    display: none; align-items: center; gap: 8px; min-height: 44px; padding-inline: 12px 10px;
    border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
    font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
    letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); text-decoration: none;
  }
  .menu-abrir svg { width: 14px; height: 14px; }
  .menu-painel { display: none; }
  .menu-painel:focus { outline: none; }

  @media (max-width: 900px) {
    .nav-principal, .topo-acoes > .botao, .topo-acoes > .nav-idioma { display: none; }
    .menu-abrir { display: inline-flex; }
    .topo-dentro { gap: 8px; }
    .menu-painel:target {
      display: flex; flex-direction: column;
      position: fixed; inset: 0; z-index: 60; overflow-y: auto;
      padding: 0 var(--margem) 32px;
      background: var(--fundo);
    }
    .menu-cabeca {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      height: var(--topo); flex: none; border-bottom: 1px solid var(--linha);
    }
    .menu-cabeca .marca-svg { height: 19px; }
    .menu-fechar {
      display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 12px 10px;
      border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
      font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
      letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); text-decoration: none;
    }
    .menu-fechar svg { width: 14px; height: 14px; }
    .menu-lista { margin-top: 8px; counter-reset: menu; }
    .menu-lista a {
      counter-increment: menu;
      display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
      min-height: 60px; padding-block: 16px; border-bottom: 1px solid var(--linha);
      font-family: var(--serif); font-weight: 370; font-size: 1.75rem; line-height: 1.1;
      color: var(--tinta); text-decoration: none;
    }
    .menu-lista a::after {
      content: counter(menu, decimal-leading-zero);
      font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l); color: var(--tinta-4);
    }
    .menu-pe { margin-top: auto; padding-top: 32px; display: grid; gap: 12px; }
    .menu-pe .botao { justify-content: center; }
    .menu-pe .nav-idioma { justify-content: center; min-height: 48px; border: 1px solid var(--linha-forte); }
    :root:has(.menu-painel:target) { overflow: hidden; }
    /* o painel cobre a página; o que está atrás sai do Tab e do leitor de tela */
    :root:has(.menu-painel:target) :is(.topo, main, .rodape) { visibility: hidden; }
  }

  /* --- seção: faixa de ponta a ponta, fio no topo, célula entre trilhos --- */
  .secao { position: relative; border-top: 1px solid var(--linha); }
  .celula {
    position: relative;
    padding: var(--secao) var(--celula-x);
    border-inline: 1px solid var(--linha);
  }
  /* o eixo: um nó no centro de cada divisa */
  .secao::before {
    content: ""; position: absolute; z-index: 2; left: 50%; top: -5px;
    width: 9px; height: 9px; translate: -50% 0; rotate: 45deg;
    background: var(--fundo); border: 1px solid var(--tinta-4);
  }
  .secao::after {
    content: ""; position: absolute; left: calc(50% - .5px); top: 4px; width: 1px; height: 40px;
    background: linear-gradient(to bottom, var(--linha-forte), transparent);
  }
  @media (max-width: 640px) {
    .celula { border-inline: 0; }
    .secao::before { width: 7px; height: 7px; top: -4px; }
    .secao::after { height: 24px; }
  }

  /* --- cabeça de seção --- */
  .rotulo {
    font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
    font-weight: 400; line-height: 1.5;
    letter-spacing: .045em; text-transform: uppercase; color: var(--tinta-3);
  }
  .rotulo-sobre { display: inline-flex; align-items: center; gap: 10px; }
  .rotulo-sobre::before {
    content: ""; flex: none; width: 7px; height: 7px; border: 1px solid currentColor; rotate: 45deg;
  }
  .titulo-secao {
    font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.02em;
    max-width: 20ch;
  }
  .lede { font-size: var(--t-lede); line-height: 1.5; color: var(--tinta-3); max-width: 56ch; }
  .cabeca-secao { display: grid; gap: 22px; margin-bottom: clamp(40px, 5vw, 72px); }

  /* --- rodapé: escuro nos dois temas --- */
  .rodape { color-scheme: dark; background: var(--fundo); color: var(--tinta-2); border-top: 1px solid var(--linha); overflow: hidden; }
  .rodape .celula { padding-block: clamp(56px, 7vw, 104px) 0; }
  .rodape-grade {
    display: grid; gap: 48px 32px;
    grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  }
  .rodape-marca-bloco { display: grid; gap: 20px; align-content: start; color: var(--tinta); }
  .rodape-marca-bloco .marca-svg { height: 20px; }
  .rodape-missao { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem); line-height: 1.08; letter-spacing: -.018em; color: var(--tinta); max-width: 13em; text-wrap: balance; }
  .rodape-marca-bloco .miuda { color: var(--tinta-3); font-size: var(--t-pequeno); max-width: 34ch; }
  .rodape h2 { font-size: var(--t-rotulo); }
  .rodape-col ul { display: grid; gap: 2px; margin-top: 14px; }
  .rodape-col a {
    display: inline-flex; min-height: 36px; align-items: center;
    color: var(--tinta-2); text-decoration: none; font-size: var(--t-pequeno);
  }
  .rodape-col a:hover { color: var(--tinta); text-decoration: underline; }
  .rodape-legal {
    margin-top: clamp(48px, 6vw, 80px); padding-block: 24px;
    border-top: 1px solid var(--linha);
    display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; align-items: baseline;
    font-size: .875rem; color: var(--tinta-3);
  }
  .rodape-legal p { max-width: 80ch; }
  .sem-rastreador { display: inline-flex; gap: 10px; align-items: flex-start; }
  .sem-rastreador::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .6em; border-radius: 50%; border: 1px solid var(--tinta-3); }
  .rodape-gigante { position: relative; margin-top: 8px; height: clamp(64px, 12.4vw, 178px); overflow: hidden; }
  .rodape-letras { width: 100%; height: auto; }
  .rm-letra { fill: none; stroke: var(--linha-forte); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .rm-eixo { stroke: var(--otto-fio); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .rm-ponto { fill: var(--otto); }
  /* A marca sobe para uma linha própria e as três colunas seguem lado a lado
     enquanto os e-mails cabem; mais estreito que isso, as três empilham, e
     nenhuma fica sozinha numa linha. */
  @media (max-width: 1100px) {
    .rodape-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rodape-marca-bloco { grid-column: 1 / -1; }
  }
  @media (max-width: 720px) {
    .rodape-grade { grid-template-columns: 1fr; row-gap: 36px; }
  }
}

/* ------------------------------------------------------------- componentes */
@layer componentes {
  .botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 44px; padding: 0 20px;
    border-radius: var(--raio-p); border: 1px solid transparent;
    font: inherit; font-size: .9375rem; font-weight: 560; line-height: 1.2;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .18s var(--ease-ui), border-color .18s var(--ease-ui),
                color .18s var(--ease-ui), transform .1s var(--ease-ui);
  }
  .botao:active { transform: translateY(1px); }
  .botao .seta { transition: transform .18s var(--ease-ui); }
  .botao:hover .seta { transform: translateX(3px); }
  .botao-primario { background: var(--acao); color: var(--acao-texto); }
  .botao-primario:hover { background: var(--acao-hover); }
  .botao-fantasma { color: var(--tinta); border-color: var(--borda-campo); background: transparent; }
  .botao-fantasma:hover { background: var(--veu); border-color: var(--tinta-3); }
  .botao-pequeno { min-height: 36px; padding: 0 14px; font-size: .875rem; }
  @media (pointer: coarse) { .botao-pequeno { min-height: 44px; } }

  /* marcador de dado que falta: parece parte do desenho, não erro */
  .marcador {
    font-family: var(--mono); font-size: .8125em; font-stretch: var(--mono-l); letter-spacing: .02em;
    color: var(--tinta-2);
    padding: .1em .45em; border-radius: 4px;
    border: 1px dashed var(--borda-campo);
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
  }

  /* selo de estado: anel vazio em âmbar. Nunca verde: ainda não está no ar. */
  .estado {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 12px 6px 10px; border-radius: var(--raio-p);
    border: 1px solid var(--linha-forte); background: var(--veu);
    font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
    letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2);
    text-decoration: none; line-height: 1.4;
  }
  a.estado { min-height: 36px; }
  a.estado:hover { border-color: var(--borda-campo); color: var(--tinta); }
  .estado-anel { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--atencao); }

  /* ficha técnica: rótulo mono à esquerda, valor à direita, fios */
  .ficha { display: grid; }
  .ficha > div {
    display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 16px;
    padding-block: 13px; border-top: 1px solid var(--linha);
  }
  .ficha > div:last-child { border-bottom: 1px solid var(--linha); }
  .ficha dt {
    font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
    letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); padding-top: .2em;
  }
  .ficha dd { color: var(--tinta); font-size: var(--t-pequeno); line-height: 1.5; }
  /* o complemento quebra inteiro para a linha de baixo, não no meio da frase */
  .ficha .fraco { color: var(--tinta-3); display: inline-block; }
  @media (max-width: 520px) { .ficha > div { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); gap: 12px; } }
  @media (max-width: 359px) { .ficha > div { grid-template-columns: 1fr; gap: 4px; } }

  .chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 4px;
    border: 1px solid var(--linha-forte);
    font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); color: var(--tinta-2); line-height: 1.6;
  }
  .chip i { font-style: normal; color: var(--tinta-4); }

  /* cabeça de figura: número e título à esquerda, aviso à direita */
  .fig-cabeca {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px;
    padding-bottom: 14px; margin-bottom: 20px;
    border-bottom: 1px dashed var(--linha-forte);
  }
  .fig-cabeca .fig-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
}

/* ------------------------------------------------------------------ seções */
@layer secoes {
  /* ------------------------------------------------------------ abertura */
  .abertura { border-top: 0; isolation: isolate; }
  .abertura::before, .abertura::after { display: none; }
  .abertura .celula { padding-top: clamp(36px, 1.5rem + 4vw, 88px); padding-bottom: clamp(48px, 5vw, 88px); }
  .abertura-fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
  .abertura-fundo::before {
    /* grade técnica que se apaga nas bordas */
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(to right, var(--grade) 1px, transparent 1px),
      linear-gradient(to bottom, var(--grade) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: calc(50% + .5px) 0;
    -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 64%, #000 18%, transparent 78%);
    mask-image: radial-gradient(ellipse 72% 62% at 50% 64%, #000 18%, transparent 78%);
  }
  /* o eixo nasce num ponto de ametista no alto do título e desce sem parar até
     o nó do Otto: atravessa o vão e o cabeçalho da Fig. 01. Só o tracejado
     (::after) leva máscara; o ponto (::before) fica fora dela. */
  .abertura-eixo {
    --vao: clamp(48px, 5vw, 80px);   /* o margin-top da .sistema */
    position: absolute; left: calc(50% - .5px); top: 0; bottom: calc(-1 * var(--vao)); width: 1px; pointer-events: none;
  }
  .abertura-eixo::after {
    content: ""; position: absolute; inset: 14px 0 0;
    background: repeating-linear-gradient(to bottom, var(--otto-fio) 0 4px, transparent 4px 9px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 64px);
    mask-image: linear-gradient(to bottom, transparent, #000 64px);
  }
  .abertura-eixo::before {
    content: ""; position: absolute; z-index: 1; left: -3px; top: 0; width: 7px; height: 7px; border-radius: 50%;
    background: var(--otto); box-shadow: 0 0 0 4px var(--otto-veu);
  }
  .abertura-linha {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  }
  .abertura-grade {
    position: relative;
    margin-top: clamp(28px, 3.4vw, 56px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 7vw, 120px); align-items: end;
  }
  .abertura h1 {
    font-size: var(--t-display);
    line-height: 1.02;
    letter-spacing: -.022em;
    font-weight: 370;
    margin-left: -.04em;   /* recuo ótico do T */
    color: var(--tinta);
  }
  .abertura h1 .linha { display: block; }
  /* Em inglês a última linha ("the conversation.") é a mais longa do título:
     um degrau menor a mantém inteira na coluna, sem cruzar o eixo. */
  @media (min-width: 1001px) {
    html:lang(en) .abertura h1 { font-size: clamp(2.5rem, .8rem + 4.1vw, 4.6rem); }
  }
  .abertura-texto { padding-bottom: .4rem; }
  .abertura .lede { max-width: 34em; color: var(--tinta-3); }
  .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  @media (max-width: 1000px) {
    .abertura-grade { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
    .abertura h1 .linha { display: inline; }
    .abertura h1 { max-width: 12em; }
    .abertura-eixo { display: none; }
  }

  /* ----------------------------------------------- Fig. 01: o sistema --- */
  .sistema { margin-top: clamp(48px, 5vw, 80px); }
  .pausa {
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer;
    font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
    letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3);
  }
  .pausa input {
    appearance: none; margin: 0; width: 16px; height: 16px; border-radius: 4px; flex: none;
    border: 1px solid var(--borda-campo); display: grid; place-items: center; cursor: pointer;
  }
  .pausa input::before { content: ""; width: 6px; height: 8px; border-inline: 2px solid var(--tinta-3); }
  .pausa input:checked::before { width: 0; height: 0; border: 0; border-left: 7px solid var(--tinta); border-block: 4.5px solid transparent; margin-left: 2px; }
  .pausa:hover { color: var(--tinta); }
  @media (prefers-reduced-motion: reduce) { .pausa { display: none; } }

  .sistema-corpo {
    --pe: 42px;   /* altura do centro do relógio, contada da base de cada nó */
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(40px, 5vw, 72px) minmax(0, 1.2fr) clamp(40px, 5vw, 72px) minmax(0, 1fr);
    align-items: stretch;
  }
  .sistema-corpo::before {
    /* o eixo atravessa a figura no centro exato */
    content: ""; position: absolute; left: calc(50% - .5px); top: -20px; bottom: -28px; width: 1px;
    background: repeating-linear-gradient(to bottom, var(--otto-fio) 0 4px, transparent 4px 9px);
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
  }
  /* com o eixo do título à vista, o da figura começa no alto dela e continua a
     linha que vem de cima, atravessando o cabeçalho (os rótulos ficam nas
     pontas, longe do centro) */
  @media (min-width: 1001px) {
    .sistema { position: relative; }
    .sistema::before {
      content: ""; position: absolute; left: calc(50% - .5px); top: 0; bottom: -28px; width: 1px;
      background: repeating-linear-gradient(to bottom, var(--otto-fio) 0 4px, transparent 4px 9px);
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), transparent);
      mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), transparent);
    }
    .sistema-corpo::before { display: none; }
  }
  .no {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    border-radius: var(--raio);
    background: var(--sup-1);
    border: 1px solid var(--linha-forte);
    box-shadow: inset 0 1px 0 var(--brilho), 0 18px 36px -24px var(--sombra-cor);
    min-width: 0;
  }
  .no-cabeca {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 11px 16px; border-bottom: 1px solid var(--linha);
  }
  .no-cabeca .rotulo { color: var(--tinta-2); }
  .no-cabeca .rotulo + .rotulo { color: var(--tinta-4); }
  .no-corpo { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
  .no-otto { border-color: var(--otto-fio); }
  .no-otto .marca-mini { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta); }
  .no-otto .simbolo { width: 13px; height: 13px; fill: currentColor; }

  /* o relógio no pé de cada nó: os três na mesma altura, ligados pelo fio */
  .no-pe {
    height: 52px; margin: auto 16px 16px; padding-inline: 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border-radius: 10px; border: 1px dashed var(--linha-forte); background: var(--fundo);
  }
  .no-otto .no-pe { border: 1px solid var(--otto-fio); background: var(--otto-veu); position: relative; }
  .no-otto .no-pe::before {
    /* o ponto de ametista: onde o fio cruza o eixo */
    content: ""; position: absolute; left: calc(50% - 3.5px); top: -4px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--otto); box-shadow: 0 0 0 4px var(--otto-veu);
  }
  .no-pe .relogio { font-size: 1.125rem; color: var(--tinta); }

  .bolha {
    max-width: 92%; padding: 9px 12px 7px; border-radius: 12px 12px 12px 4px;
    background: var(--sup-3); color: var(--tinta); font-size: .9375rem; line-height: 1.4;
  }
  .bolha .hora { display: block; margin-top: 2px; font-family: var(--mono); font-size: .75rem; color: var(--tinta-3); text-align: right; font-stretch: var(--mono-l); }
  .peca-mini {
    display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center;
    padding: 8px; border-radius: 10px; border: 1px solid var(--linha); background: var(--fundo);
    max-width: 92%;
  }
  .peca-mini-foto { width: 40px; height: 52px; border-radius: 6px; background: var(--sup-3); display: grid; place-items: center; color: var(--tinta-4); }
  .peca-mini-foto svg { width: 24px; height: 36px; }
  .peca-mini strong { display: block; font-size: .8125rem; font-weight: 560; line-height: 1.3; }
  .peca-mini span span { font-size: .75rem; color: var(--tinta-3); }
  .relogio {
    font-family: var(--mono); font-variant-numeric: tabular-nums; font-stretch: var(--mono-l);
    font-size: .8125rem; letter-spacing: .02em; color: var(--tinta-2);
  }

  /* o registro do Otto */
  .registro-vivo { font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); line-height: 1.5; color: var(--tinta-3); display: grid; gap: 5px; }
  .registro-vivo li { display: grid; grid-template-columns: 5.4em 1fr; gap: 10px; }
  .registro-vivo .t { color: var(--tinta-4); }
  .registro-vivo .ev { color: var(--tinta); }
  .registro-vivo .sub { grid-column: 2; display: block; padding-left: 1.4em; text-indent: -1.4em; }
  .registro-vivo .sub::before { content: "└"; color: var(--tinta-4); display: inline-block; width: 1.4em; text-indent: 0; }
  .registro-vivo .sub b { font-weight: 400; color: var(--tinta-2); }
  .registro-vivo .ponto-ev { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tinta); margin-right: 8px; vertical-align: 1px; }
  .ia-apoio { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--linha); }
  .ia-apoio ul { display: flex; flex-wrap: wrap; gap: 6px; }

  /* a fila da loja, desenhada como no painel */
  .abas { display: flex; gap: 6px; }
  .aba {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    font-size: .75rem; font-weight: 500; color: var(--tinta-3); border: 1px solid var(--linha-forte);
    white-space: nowrap;
  }
  .aba-ativa { background: var(--acao); color: var(--acao-texto); border-color: transparent; }
  .conta { font-family: var(--mono); font-size: .75rem; padding: 0 5px; border-radius: 999px; font-variant-numeric: tabular-nums; background: var(--veu); }
  .aba-ativa .conta { background: var(--acao-texto); color: var(--acao); }
  .fila { display: grid; gap: 8px; margin-top: auto; }
  .cartao-fila {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center;
    height: 52px; padding: 0 12px 0 14px; border-radius: 10px;
    background: var(--fundo); border: 1px solid var(--linha);
    overflow: hidden;
  }
  .cartao-fila::before { content: ""; position: absolute; inset: 8px auto 8px 0; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
  .cartao-fila[data-sinal="urgente"]::before { background: var(--urgente); }
  .cartao-fila[data-sinal="atencao"]::before { background: var(--atencao); }
  .cartao-fila .nome { font-size: .8125rem; font-weight: 600; color: var(--tinta); line-height: 1.3; }
  .cartao-fila .previa { grid-column: 1; font-size: .75rem; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
  .cartao-fila .relogio { grid-row: 1 / span 2; grid-column: 2; }
  .cartao-fila[data-sinal="atencao"] .relogio { color: var(--atencao-tinta); }
  .cartao-fila[data-sinal="urgente"] .relogio {
    color: var(--urgente-tinta); background: var(--urgente-fundo); border: 1px solid var(--urgente-borda);
    padding: 1px 7px; border-radius: 999px;
  }
  .cartao-fila.nova { border-color: var(--otto-fio); background: var(--otto-veu); margin-bottom: 16px; }
  .cartao-fila.nova .relogio { font-size: 1.125rem; color: var(--tinta); }
  .no-loja .no-corpo { padding-bottom: 0; }

  /* os fios entre os nós, na altura dos relógios */
  .fio { position: relative; container-type: inline-size; }
  .fio::before {
    content: ""; position: absolute; left: 0; right: 6px; bottom: var(--pe); height: 1px;
    background: linear-gradient(90deg, var(--linha-forte), var(--tinta-4));
  }
  .fio::after {
    content: ""; position: absolute; right: 1px; bottom: calc(var(--pe) - 3.5px); width: 7px; height: 7px;
    border-top: 1px solid var(--tinta-3); border-right: 1px solid var(--tinta-3); rotate: 45deg;
  }
  .pacote {
    position: absolute; left: 0; bottom: calc(var(--pe) - 3px); width: 6px; height: 6px; border-radius: 50%;
    background: var(--otto); box-shadow: 0 0 10px 1px var(--otto-fio);
    opacity: 0;
  }
  .fila-resumo { margin-top: -2px; }

  @media (min-width: 901px) and (max-width: 1180px) {
    .sistema-corpo { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1.1fr) 32px minmax(0, 1fr); }
    .aba:not(.aba-ativa) { display: none; }
    .peca-mini .tam, .fila-resumo .ordem { display: none; }
    .registro-vivo li { grid-template-columns: 1fr; gap: 0; }
    .registro-vivo .sub { grid-column: 1; }
  }
  @media (max-width: 900px) {
    .sistema-corpo { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
    .sistema-corpo::before { top: 0; bottom: 0; }
    .fio { height: 56px; container-type: normal; }
    .fio::before { left: 50%; right: auto; top: 0; bottom: 6px; width: 1px; height: auto;
      background: linear-gradient(180deg, var(--linha-forte), var(--tinta-4)); }
    .fio::after { right: auto; left: calc(50% - 3.5px); top: auto; bottom: 2px; rotate: 135deg; }
    .pacote { left: calc(50% - 3px); top: 0; bottom: auto; }
    .registro-vivo li { grid-template-columns: 1fr; gap: 0; }
    .registro-vivo .sub { grid-column: 1; }
  }

  /* ---------------------------------------------- por que começamos --- */
  .por-que { text-align: center; }
  .por-que .cabeca-secao { justify-items: center; margin-bottom: clamp(28px, 3vw, 44px); }
  .manifesto-abre {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem); line-height: 1.22; letter-spacing: -.022em;
    font-weight: 470; color: var(--tinta); max-width: 30ch; margin-inline: auto; text-wrap: balance;
  }
  .manifesto-abre .voz-2 { color: var(--tinta-4); }
  .eixo-trecho {
    display: block; width: 1px; height: clamp(40px, 5vw, 72px); margin: clamp(20px, 2.4vw, 32px) auto;
    background: linear-gradient(to bottom, transparent, var(--otto-fio), transparent);
  }
  .numero-intro { font-size: var(--t-lede); color: var(--tinta-3); max-width: 40ch; margin-inline: auto; }
  .numero-heroi {
    position: relative; display: inline-flex; justify-content: center; align-items: baseline; gap: .06em;
    margin-top: clamp(12px, 1.5vw, 24px);
    font-family: var(--mono); font-weight: 300; font-stretch: 87.5%;
    font-size: clamp(4.25rem, 1.4rem + 12vw, 11.5rem); line-height: .9;
    letter-spacing: -.045em; color: var(--tinta);
    font-variant-numeric: tabular-nums;
  }
  .numero-heroi .unidade { font-size: .2em; letter-spacing: .02em; color: var(--tinta-3); font-weight: 400; margin-right: .5em; margin-left: .08em; }
  .numero-heroi .unidade:last-of-type { margin-right: 0; }
  .nota-ref {
    position: absolute; top: .1em; right: -2.2rem;
    display: inline-grid; place-items: center; min-width: 28px; min-height: 28px;
    font-family: var(--mono); font-size: .75rem; font-weight: 400; letter-spacing: 0; font-stretch: var(--mono-l);
    color: var(--tinta-3); text-decoration: none;
    border: 1px solid var(--borda-campo); border-radius: 50%;
  }
  .nota-ref:hover { color: var(--tinta); border-color: var(--tinta-3); }

  /* Fig. 02: a régua da espera, com a cota da medida em cima */
  .regua { position: relative; margin-top: clamp(40px, 5vw, 72px); text-align: left; }
  .regua-corpo { position: relative; padding-top: 88px; }
  .cota {
    position: absolute; left: 0; top: 0; width: calc(4678 / 4800 * 100%); height: 70px;
  }
  .cota-linha {
    position: absolute; left: 0; right: 0; top: 50px; height: 1px; background: var(--tinta-3);
  }
  .cota-linha::before, .cota-linha::after {
    content: ""; position: absolute; top: -4px; width: 0; height: 0;
    border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
  }
  .cota-linha::before { left: 0; border-right: 9px solid var(--tinta-3); }
  .cota-linha::after { right: 0; border-left: 9px solid var(--tinta-3); }
  .cota-ponta { position: absolute; top: 0; display: grid; gap: 6px; white-space: nowrap; }
  .cota-ponta::after { content: ""; display: block; width: 1px; height: 52px; background: var(--tinta-3); }
  .cota-a { left: 0; justify-items: start; }
  .cota-b { right: 0; justify-items: end; text-align: right; }
  .cota-meio {
    position: absolute; left: 50%; top: 58px; translate: -50% 0; white-space: nowrap;
    padding: 0 10px; color: var(--tinta-2);
  }
  .regua-trilho {
    position: relative; height: 48px;
    border-right: 1px solid var(--tinta-4);
    background:
      linear-gradient(90deg, var(--tinta-4) 0 1px, transparent 1px) 0 0 / calc(100% / 8) 100% repeat-x,
      linear-gradient(90deg, var(--linha-forte) 0 1px, transparent 1px) 0 0 / calc(100% / 16) 22px repeat-x,
      linear-gradient(90deg, var(--linha-forte) 0 1px, transparent 1px) 0 0 / calc(100% / 80) 10px repeat-x,
      linear-gradient(90deg, var(--veu), var(--veu)) 0 0 / calc(4678 / 4800 * 100%) 100% no-repeat;
    box-shadow: inset 0 1px 0 var(--linha-forte), inset 0 -1px 0 var(--linha-forte);
  }
  .meta-zona {
    position: absolute; left: 0; top: 0; bottom: 0; width: max(calc(60 / 4800 * 100%), 6px);
    background: repeating-linear-gradient(135deg, var(--otto) 0 1.5px, transparent 1.5px 4px);
    border-right: 1px solid var(--otto);
  }
  .marco-medido {
    position: absolute; left: calc(4678 / 4800 * 100%); top: -2px; bottom: -2px; width: 2px; margin-left: -1px;
    background: var(--tinta);
  }
  .regua-escala {
    position: relative; margin-top: 10px; height: 20px;
    display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
    font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); color: var(--tinta-4); font-variant-numeric: tabular-nums;
  }
  .regua-escala span { justify-self: start; translate: -50% 0; }
  .regua-escala span:first-child { translate: 0 0; }
  .regua-escala b { position: absolute; right: 0; top: 0; font-weight: 400; }
  .regua-marcos {
    display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-top: 16px;
    font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); letter-spacing: .04em; text-transform: uppercase;
  }
  .m-meta { color: var(--otto); display: inline-flex; align-items: center; gap: 8px; }
  .m-meta::before { content: ""; width: 10px; height: 10px; flex: none; background: repeating-linear-gradient(135deg, var(--otto) 0 1.5px, transparent 1.5px 4px); border: 1px solid var(--otto); }
  .m-medido { color: var(--tinta); display: inline-flex; align-items: center; gap: 8px; margin-right: calc(100% - 4678 / 4800 * 100% - 1px); }
  .m-medido::after { content: ""; width: 2px; height: 12px; background: var(--tinta); }
  @media (max-width: 760px) {
    .regua-corpo { padding-top: 104px; }
    .cota { height: 92px; }
    .cota-linha { top: 72px; }
    .cota-ponta { gap: 4px; white-space: normal; max-width: 45%; }
    .cota-ponta::after { height: 74px; }
    .cota-ponta.cota-a::after { margin-top: auto; }
    .cota-a { top: 0; }
    .cota-b { top: 0; }
    .cota-ponta { grid-template-rows: auto 1fr; height: 92px; }
    .cota-ponta::after { height: auto; }
    .cota-meio { top: 78px; font-size: .6875rem; padding: 0 6px; background: var(--fundo); }
    .regua-escala span:nth-child(even) { visibility: hidden; }
    .regua-marcos { display: grid; }
    .m-medido { margin-right: 0; flex-direction: row-reverse; justify-content: flex-end; }
  }

  .nota {
    margin: clamp(32px, 4vw, 48px) auto 0; max-width: 68ch; text-align: left;
    padding-top: 14px; border-top: 1px solid var(--linha);
    font-size: .875rem; line-height: 1.6; color: var(--tinta-3);
  }
  .nota .rotulo { display: block; margin-bottom: 6px; color: var(--tinta-2); }
  .nota:target { outline: 1px dashed var(--borda-campo); outline-offset: 12px; }
  .manifesto-fecha { font-size: var(--t-lede); line-height: 1.55; color: var(--tinta-3); max-width: 46ch; margin-inline: auto; text-wrap: balance; }
  .manifesto-fecha + .manifesto-fecha { margin-top: 1em; }
  .quiasmo {
    display: grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(14px, 2.4vw, 36px); align-items: center;
    font-style: italic; font-weight: 360;
    font-size: clamp(1.625rem, 1.1rem + 2vw, 3rem); line-height: 1.12; letter-spacing: -.012em; color: var(--tinta);
  }
  .quiasmo span { text-wrap: balance; }
  /* em inglês a segunda metade é mais longa: um passo menor mantém as duas numa linha */
  html:lang(en) .quiasmo { font-size: clamp(1.5rem, 1rem + 1.75vw, 2.625rem); }
  .quiasmo span:first-child { text-align: right; }
  .quiasmo span:last-child { text-align: left; }
  .quiasmo i { align-self: stretch; background: linear-gradient(to bottom, transparent, var(--otto-fio), transparent); min-height: 2.4em; }
  /* lado a lado só quando as duas metades cabem numa linha cada; abaixo disso, empilha */
  @media (max-width: 1080px) {
    .quiasmo { grid-template-columns: 1fr; text-align: center; }
    .quiasmo span:first-child, .quiasmo span:last-child { text-align: center; }
    .quiasmo i { min-height: 28px; width: 1px; justify-self: center; }
  }
  @media (max-width: 640px) {
    .nota-ref { right: -1.9rem; }
  }

  /* ------------------------------------------------------------- Otto --- */
  .otto-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
  .otto-intro {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 24px clamp(40px, 7vw, 120px);
  }
  .otto-intro .titulo-secao { max-width: 14ch; }
  .otto-intro .lede { color: var(--tinta-2); }
  .otto-intro .lede + p { margin-top: 14px; color: var(--tinta-3); max-width: 56ch; }
  @media (max-width: 900px) { .otto-intro { grid-template-columns: 1fr; } }

  /* Fig. 03: a janela do Otto */
  .janela-fig { margin-top: 0; }
  .janela {
    background: var(--o-fundo);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-g);
    overflow: hidden;
    color: var(--tinta);
    box-shadow: inset 0 1px 0 var(--brilho), 0 40px 80px -48px var(--sombra-cor);
  }
  .janela-topo {
    display: flex; align-items: center; gap: 14px;
    height: 44px; padding: 0 16px;
    border-bottom: 1px solid var(--o-borda);
    background: var(--o-papel);
    font-size: .8125rem; color: var(--tinta-3);
  }
  .janela-topo .loja { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--tinta); }
  .loja-selo { width: 20px; height: 20px; border-radius: 5px; background: var(--tinta); color: var(--o-papel); display: grid; place-items: center; font-size: .75rem; font-weight: 600; }
  .janela-topo .otto-assina { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); color: var(--tinta-3); letter-spacing: .04em; }
  .otto-assina svg { width: 11px; height: 11px; fill: currentColor; }
  .janela-corpo { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); min-height: 380px; }
  .col-fila { padding: 18px 16px; border-right: 1px solid var(--o-borda); display: flex; flex-direction: column; gap: 12px; }
  .fila-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .fila-cab strong { font-size: 1rem; }
  .fila-cab .sub { font-size: .75rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
  .cartoes { display: grid; gap: 8px; }
  .cartoes .cartao-fila { background: var(--o-papel); border-color: var(--o-borda); }
  .cartoes .cartao-fila.aberta { border-color: var(--borda-campo); box-shadow: 0 0 0 1px var(--borda-campo); }
  .col-conversa { display: flex; flex-direction: column; min-width: 0; background: var(--o-papel-2); }
  .conv-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 20px; background: var(--o-papel); border-bottom: 1px solid var(--o-borda); }
  .conv-cab strong { display: block; font-size: .9375rem; }
  .conv-cab .sub { font-size: .75rem; color: var(--tinta-3); }
  .janela24 { font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); color: var(--tinta-2); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--o-borda); background: var(--o-papel-2); white-space: nowrap; }
  .thread { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
  .msg { max-width: 22rem; padding: 9px 12px 6px; border-radius: 12px 12px 12px 4px; background: var(--o-papel); border: 1px solid var(--o-borda); font-size: .875rem; line-height: 1.4; color: var(--tinta); }
  .msg .h { display: block; text-align: right; font-size: .75rem; color: var(--tinta-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
  .peca { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; max-width: 26rem; padding: 12px; border-radius: 12px; background: var(--o-elevado); border: 1px solid var(--o-borda); }
  .peca-foto { aspect-ratio: 3 / 4; border-radius: 8px; background: var(--sup-3); display: grid; place-items: center; color: var(--tinta-3); }
  .peca-foto svg { width: 64%; height: auto; }
  .peca-foto path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .peca-info { display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; min-width: 0; color: var(--tinta-2); }
  .peca-info strong { font-size: .9375rem; color: var(--tinta); }
  .peca-info .preco { font-variant-numeric: tabular-nums; }
  .marcado { font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); color: var(--tinta-2); }
  .tams { display: flex; gap: 4px; flex-wrap: wrap; }
  .tams span { min-width: 30px; padding: 3px 0; text-align: center; border-radius: 5px; border: 1px solid var(--borda-campo); font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); color: var(--tinta); }
  .tams .sem { border-style: dashed; border-color: var(--linha-forte); color: var(--tinta-3); text-decoration: line-through; }
  .tams .marcado-t { background: var(--acao); border-color: var(--acao); color: var(--acao-texto); }
  .botao-mini { align-self: flex-start; margin-top: 4px; padding: 6px 10px; border-radius: 7px; background: var(--acao); color: var(--acao-texto); font-size: .75rem; font-weight: 600; }
  .composer { margin: 0 16px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--o-papel); border: 1px solid var(--borda-campo); font-size: .8125rem; color: var(--tinta-3); }
  .composer .enviar { padding: 6px 12px; border-radius: 8px; background: var(--acao); color: var(--acao-texto); font-weight: 600; }
  @media (max-width: 760px) {
    .janela-corpo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .col-fila { border-right: 0; border-bottom: 1px solid var(--o-borda); }
    .cartoes .cartao-fila:not(.aberta) { display: none; }
    .conv-cab { flex-wrap: wrap; padding-inline: 16px; }
    .thread { padding: 16px; }
    .peca { grid-template-columns: 84px minmax(0, 1fr); }
    .janela-topo .otto-assina { display: none; }
  }

  /* pilares: quatro regras, cada uma com o desenho da regra de verdade */
  .pilares {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0;
    margin-top: clamp(56px, 6vw, 96px);
    border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
    margin-inline: calc(-1 * var(--celula-x));
  }
  .pilar { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 24px; padding: 24px clamp(16px, 2vw, 28px) 32px; }
  @supports not (grid-template-rows: subgrid) { .pilar { grid-template-rows: auto 170px auto; } }
  .pilar + .pilar { border-left: 1px solid var(--linha); }
  .pilar h3 { font-size: 1.0625rem; font-weight: 560; letter-spacing: -.01em; line-height: 1.35; }
  .pilar p:not(.rotulo) { font-size: var(--t-pequeno); color: var(--tinta-3); line-height: 1.55; margin-top: 6px; }
  .diagrama { align-self: center; min-height: 112px; display: grid; align-content: center; }
  .diagrama.tamanhos, .diagrama.rodizio { display: flex; }

  .regra-fila { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 3px; }
  .regra-fila div { display: grid; gap: 10px; }
  .regra-fila i { display: block; height: 6px; border-radius: 1px; background: var(--linha-forte); }
  .regra-fila .atencao i { background: var(--atencao); }
  .regra-fila .urgente i { background: var(--urgente); }
  .regra-fila span { font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); line-height: 1.4; color: var(--tinta-3); }
  .regra-fila b { display: block; font-weight: 400; color: var(--tinta); font-size: .75rem; white-space: nowrap; }

  .tamanhos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .tamanhos span { min-width: 40px; padding: 8px 0; text-align: center; border: 1px solid var(--borda-campo); border-radius: 4px; font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); color: var(--tinta); }
  .tamanhos .sem { border-style: dashed; border-color: var(--linha-forte); color: var(--tinta-4); text-decoration: line-through; }
  .tamanhos .legenda { flex-basis: 100%; min-width: 0; border: 0; padding: 4px 0 0; text-align: left; color: var(--tinta-3); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }

  .rodizio { display: flex; align-items: center; gap: 18px; }
  .rodizio svg { width: 96px; height: 96px; flex: none; overflow: visible; }
  .rodizio .anel { fill: none; stroke: var(--tinta-4); stroke-width: 1; stroke-dasharray: 2 3; }
  .rodizio .seta { fill: var(--tinta-3); }
  .rodizio .no-r { fill: var(--fundo); stroke: var(--tinta-2); stroke-width: 1; }
  .rodizio .no-r.vez { fill: var(--tinta); stroke: var(--tinta); }
  .rodizio .no-r.desl { stroke-dasharray: 2 2; stroke: var(--tinta-4); }
  .rodizio text { font-family: var(--mono); font-size: 10px; fill: var(--tinta); text-anchor: middle; dominant-baseline: central; }
  .rodizio .vez + text { fill: var(--fundo); }
  .rodizio .ponto { fill: var(--otto); }
  .rodizio ul { display: grid; gap: 7px; }
  .rodizio li { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); color: var(--tinta-3); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
  .rodizio li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--tinta-2); flex: none; }
  .rodizio li:first-child::before { background: var(--tinta); border-color: var(--tinta); }
  .rodizio li.desligado::before { border-style: dashed; border-color: var(--tinta-4); border-radius: 2px; }

  .indicadores { display: grid; border-top: 1px solid var(--linha); }
  .indicadores div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--linha); }
  .indicadores dt { font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); line-height: 1.4; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .indicadores dd { font-family: var(--mono); font-size: .875rem; color: var(--tinta-4); line-height: 1.2; }
  .indicadores-nota { margin-top: 10px; font-size: .75rem; color: var(--tinta-3); line-height: 1.45; }

  /* quatro colunas estreitas: o desenho do rodízio encolhe para a legenda caber */
  @media (min-width: 1101px) and (max-width: 1320px) {
    .rodizio { gap: 12px; }
    .rodizio svg { width: 80px; height: 80px; }
  }
  @media (max-width: 1100px) {
    .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pilar:nth-child(3) { border-left: 0; }
    .pilar:nth-child(n+3) { border-top: 1px solid var(--linha); }
  }
  @media (max-width: 640px) {
    .pilares { grid-template-columns: 1fr; margin-inline: 0; }
    .pilar { padding-inline: 0; row-gap: 16px; border-left: 0 !important; }
    .diagrama { min-height: 0; }
    .pilar + .pilar { border-top: 1px solid var(--linha); }
  }

  /* A ficha fica com a coluna larga (7fr, à direita, alinhada com a lista da IA
     e a Fig. 04 logo abaixo): a 1440 cada valor cabe numa linha. No HTML ela
     vem primeiro; até 1180 as duas empilham nessa ordem, a ficha na largura toda. */
  .otto-detalhe {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(32px, 5vw, 80px);
    margin-top: clamp(56px, 6vw, 96px);
  }
  @media (min-width: 1181px) {
    .otto-detalhe .ficha-otto { grid-column: 2; grid-row: 1; }
    .otto-detalhe .tambem { grid-column: 1; grid-row: 1; }
  }
  @media (min-width: 521px) {
    .ficha-otto .ficha > div { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
  }
  .ficha-otto { padding: clamp(20px, 2.4vw, 32px); border-radius: var(--raio-g); background: var(--linho); border: 1px solid var(--linha); align-self: start; }
  .ficha-otto > .rotulo { display: block; margin-bottom: 16px; color: var(--tinta-2); }
  .tambem h3 { font-size: var(--t-rotulo); }
  .tambem ol { margin-top: 16px; counter-reset: tambem; }
  .tambem li {
    counter-increment: tambem;
    display: grid; grid-template-columns: 2.4rem 1fr; gap: 12px;
    padding-block: 13px; border-top: 1px solid var(--linha); font-size: var(--t-pequeno); color: var(--tinta-3); line-height: 1.55;
  }
  .tambem li:last-child { border-bottom: 1px solid var(--linha); }
  .tambem li::before { content: counter(tambem, decimal-leading-zero); font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); color: var(--tinta-4); padding-top: .2em; }
  .tambem li b { color: var(--tinta); font-weight: 560; }
  @media (max-width: 1180px) { .otto-detalhe { grid-template-columns: 1fr; } }

  .ia-bloco {
    margin-top: clamp(48px, 6vw, 88px);
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 5vw, 80px);
    padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--linha-forte);
  }
  .ia-bloco h3 { font-size: var(--t-h3); letter-spacing: -.012em; }
  .ia-bloco .regra { margin-top: 10px; color: var(--tinta-3); font-size: var(--t-pequeno); max-width: 44ch; }
  .ia-estados { display: grid; }
  .ia-estados > div { display: grid; grid-template-columns: calc(7rem + clamp(20px, 2.4vw, 32px)) 1fr; gap: 16px; padding-block: 14px; border-top: 1px solid var(--linha); align-items: baseline; }
  /* o valor começa na mesma vertical que os da ficha técnica, logo acima */
  .ia-estados > div:last-child { border-bottom: 1px solid var(--linha); }
  .ia-estados dt { display: inline-flex; align-items: center; gap: 10px; }
  .ia-estados dt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-2); }
  .ia-estados .em-construcao dt::before { background: transparent; border: 1.5px solid var(--tinta-3); }
  .ia-estados dd { color: var(--tinta); font-size: var(--t-pequeno); }
  @media (max-width: 900px) {
    .ia-bloco { grid-template-columns: 1fr; }
    .ia-estados > div { grid-template-columns: 1fr; gap: 4px; }
  }

  /* Fig. 04: a marca dos dois T */
  .marca-bloco {
    margin-top: clamp(48px, 6vw, 88px);
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center;
    padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--linha-forte);
  }
  .marca-bloco h3 { font-size: var(--t-h3); letter-spacing: -.012em; }
  .marca-bloco p { margin-top: 10px; color: var(--tinta-3); font-size: var(--t-pequeno); max-width: 46ch; }
  .marca-quadro { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--sup-1); overflow: hidden; }
  .marca-quadro figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--linha); }
  .dois-t { width: 100%; height: auto; }
  .dt-grade { stroke: var(--grade); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .dt-letra { fill: var(--tinta); }
  .dt-apagada { fill: var(--tinta-4); }
  .dt-anel { fill: none; stroke: var(--tinta-4); stroke-width: 2.4; }
  .dt-eixo { stroke: var(--otto); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
  .dt-ponto { fill: var(--otto); }
  .dt-rotulo { font-family: var(--mono); font-size: 4px; letter-spacing: .06em; fill: var(--tinta-3); }
  @media (max-width: 900px) { .marca-bloco { grid-template-columns: 1fr; } }
  @media (max-width: 520px) { .marca-quadro figcaption .rotulo + .rotulo { display: none; } }

  .meta-linha {
    margin-top: clamp(40px, 5vw, 64px);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
    padding: 20px 24px; border-radius: var(--raio); border: 1px dashed var(--borda-campo);
  }
  .meta-linha p { color: var(--tinta-2); max-width: 70ch; font-size: var(--t-pequeno); }
  .meta-linha p b { color: var(--tinta); }

  /* ------------------------------------------------------- princípios --- */
  .principios-lista {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
    margin-inline: calc(-1 * var(--celula-x));
  }
  .principio { position: relative; padding: 28px clamp(16px, 1.6vw, 24px) 36px; display: grid; align-content: start; gap: 14px; }
  .principio + .principio { border-left: 1px solid var(--linha); }
  .principio .par {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l); letter-spacing: .06em; color: var(--tinta-3);
    text-transform: uppercase;
  }
  .principio .par b { font-weight: 400; color: var(--tinta); font-size: 1.5rem; letter-spacing: 0; font-stretch: 100%; }
  .principio h3 { font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.2; letter-spacing: -.018em; font-weight: 520; margin-top: 28px; min-height: 2.4em; }
  .principio p:not(.par) { font-size: var(--t-pequeno); color: var(--tinta-3); line-height: 1.55; }
  .principio-eixo { background: linear-gradient(180deg, var(--otto-veu), transparent 70%); }
  .principio-eixo::before {
    content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; translate: -50% 0; border-radius: 50%;
    background: var(--otto); box-shadow: 0 0 0 4px var(--otto-veu);
  }
  .principio-eixo .par b { color: var(--otto); }
  .palindromo-nota { margin-top: 24px; max-width: 62ch; color: var(--tinta-3); font-size: var(--t-pequeno); }
  @media (max-width: 1100px) {
    .principios-lista { grid-template-columns: 1fr; margin-inline: 0; border-bottom: 0; }
    .principio { grid-template-columns: 4.5rem 1fr; column-gap: 20px; padding: 22px 0; border-left: 0 !important; border-bottom: 1px solid var(--linha); }
    .principio .par { grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; }
    .principio h3 { margin-top: 0; min-height: 0; }
    .principio-eixo::before { left: 0; translate: 0 0; }
    .principio-eixo { background: linear-gradient(90deg, var(--otto-veu), transparent 60%); }
  }

  /* ----------------------------------------------------------- ofício --- */
  .oficio-grade {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--linha);
    margin-inline: calc(-1 * var(--celula-x));
  }
  .oficio-item { padding: 28px clamp(16px, 2vw, 32px) 36px; border-bottom: 1px solid var(--linha); display: grid; gap: 12px; align-content: start; }
  .oficio-item:not(:nth-child(3n + 1)) { border-left: 1px solid var(--linha); }
  .oficio-item h3 { font-size: 1.125rem; font-weight: 560; letter-spacing: -.012em; margin-top: 20px; }
  .oficio-item p:not(.rotulo) { font-size: var(--t-pequeno); color: var(--tinta-3); line-height: 1.55; }
  .oficio-item .rotulo { display: flex; justify-content: space-between; gap: 12px; }
  .oficio-item .rotulo span:last-child { color: var(--tinta-4); }
  @media (max-width: 1000px) {
    .oficio-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .oficio-item:not(:nth-child(3n + 1)) { border-left: 0; }
    .oficio-item:nth-child(even) { border-left: 1px solid var(--linha); }
  }
  @media (max-width: 640px) {
    .oficio-grade { grid-template-columns: 1fr; margin-inline: 0; }
    .oficio-item { padding-inline: 0; border-left: 0 !important; }
  }

  /* --------------------------------------------------------- registro --- */
  .registro-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
  .registro-grade .cabeca-secao { margin-bottom: 0; }
  .registro-mes { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; }
  .registro-mes time { color: var(--tinta); }
  .changelog li {
    display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 16px; align-items: baseline;
    padding-block: 16px; border-top: 1px solid var(--linha);
  }
  .changelog li:last-child { border-bottom: 1px solid var(--linha); }
  .changelog .n { font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); color: var(--tinta-4); }
  .changelog p { color: var(--tinta); }
  .changelog .area { font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l); color: var(--tinta-4); letter-spacing: .04em; text-transform: uppercase; }
  .registro-nota { margin-top: 14px; font-size: .875rem; color: var(--tinta-3); }
  @media (max-width: 900px) { .registro-grade { grid-template-columns: 1fr; } }
  @media (max-width: 520px) {
    .changelog li { grid-template-columns: 2rem 1fr; row-gap: 2px; }
    .changelog .area { grid-column: 2; }
  }

  /* ------------------------------------------------------------ sobre --- */
  .sobre-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 96px); align-items: start; }
  .sobre-texto { display: grid; gap: 1.1em; color: var(--tinta-3); font-size: var(--t-lede); line-height: 1.55; }
  .sobre-texto p:first-of-type { color: var(--tinta-2); }
  .sobre-texto h3 { margin-top: 1.2em; font-size: var(--t-h3); }
  /* a Mona Sans itálica não é carregada: nada de oblíquo sintetizado */
  .sobre-texto i { font-style: normal; }
  .sobre-lado { display: grid; gap: 28px; }
  .planta-quadro { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--sup-1); }
  .planta-quadro figcaption { padding: 11px 16px; border-bottom: 1px solid var(--linha); display: flex; justify-content: space-between; gap: 12px; }
  .planta { width: 100%; height: auto; }
  .pl-grade { stroke: var(--grade); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .pl-guia { stroke: var(--linha-forte); stroke-dasharray: 4 5; stroke-width: 1; vector-effect: non-scaling-stroke; }
  .pl-letra { fill: var(--tinta); }
  .pl-eixo { stroke: var(--otto); stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
  .pl-ponto { fill: var(--otto); }
  .pl-seta { stroke: var(--tinta-3); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
  .pl-rotulo { font-family: var(--mono); font-size: 13px; font-stretch: var(--mono-l); letter-spacing: .06em; fill: var(--tinta-3); }
  @media (max-width: 900px) { .sobre-grade { grid-template-columns: 1fr; } }
  @media (max-width: 520px) { .so-largo { display: none; } }

  /* ---------------------------------------------------------- contato --- */
  .contato .celula { padding-bottom: calc(var(--secao) * 1.05); }
  .contato-grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(40px, 6vw, 96px); align-items: end; margin-top: 22px; }
  .contato h2 { font-size: clamp(2.5rem, 1.05rem + 4.2vw, 5.25rem); line-height: .98; letter-spacing: -.028em; margin-left: -.04em; }
  .contato-texto { display: grid; gap: 22px; }
  .contato-texto p { color: var(--tinta-3); }
  .contato-texto .miuda { font-size: .875rem; color: var(--tinta-4); }
  .contato .botao { white-space: normal; text-align: left; justify-content: flex-start; line-height: 1.3; padding-block: 10px; }
  .contato-outro { font-size: .875rem; }
  .contato-outro a { color: var(--tinta-2); }
  @media (max-width: 900px) { .contato-grade { grid-template-columns: 1fr; } }

  /* ------------------------------------------------------------- 404 --- */
  .perdido .celula { min-height: 60vh; display: grid; align-content: center; gap: 24px; }
  .perdido h1 { font-family: var(--serif); font-weight: 370; font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem); line-height: 1.02; letter-spacing: -.022em; max-width: 14ch; }
  .perdido .atalhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
  .perdido .atalhos a {
    display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--linha-forte); border-radius: var(--raio);
    text-decoration: none; color: var(--tinta-3); font-size: var(--t-pequeno);
    transition: background-color .18s var(--ease-ui), border-color .18s var(--ease-ui);
  }
  .perdido .atalhos a:hover, .perdido .atalhos a:focus-visible { background: var(--veu); border-color: var(--borda-campo); }
  .perdido .atalhos strong { color: var(--tinta); }
  @media (max-width: 760px) { .perdido .atalhos { grid-template-columns: 1fr; } }
}

/* ------------------------------------------------------------------- legal */
/* As páginas de privacidade e termos: o texto é o da versão revisada e não
   muda. Só a apresentação é daqui. Coluna de leitura de 68ch à esquerda e o
   índice ao lado, colado ao rolar. */
@layer legal {
  .legal-cabeca { border-top: 0; }
  .legal-cabeca::before, .legal-cabeca::after { display: none; }
  .legal-cabeca .celula { padding-block: clamp(36px, 5vw, 72px) clamp(16px, 2vw, 24px); }
  .trilha { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
  .trilha a { display: inline-flex; align-items: center; min-height: 32px; color: var(--tinta-3); text-decoration: none; }
  .trilha a:hover { color: var(--tinta); text-decoration: underline; }
  .aviso-idioma { margin-top: 18px; max-width: 68ch; padding: 14px 16px; border-radius: var(--raio); border: 1px dashed var(--borda-campo); font-size: var(--t-pequeno); color: var(--tinta-2); }
  .aviso-idioma a { color: var(--tinta); }

  .legal-corpo { border-top: 0; }
  .legal-corpo::before, .legal-corpo::after { display: none; }
  .legal-corpo .celula { padding-top: clamp(8px, 1vw, 16px); }

  .documento {
    --medida: 68ch;
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, var(--medida));
    column-gap: clamp(32px, 6vw, 96px);
    align-items: start;
    font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem); line-height: 1.68; color: var(--tinta-2);
  }
  .documento > * { grid-column: 2; min-width: 0; }
  .documento > h1 {
    grid-column: 1 / -1;
    font-family: var(--serif); font-weight: 370; font-optical-sizing: auto;
    font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.75rem); line-height: 1.02; letter-spacing: -.022em;
    margin: 0 0 0 -.03em; max-width: 16ch;
  }
  .documento > .vigencia {
    grid-column: 1 / -1; margin: 18px 0 clamp(36px, 4vw, 56px);
    font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3);
    padding-bottom: 20px; border-bottom: 1px solid var(--linha);
  }
  .documento > .indice {
    grid-column: 1; grid-row: 3 / span 40;
    position: sticky; top: calc(var(--topo) + 28px);
    max-height: calc(100vh - var(--topo) - 56px); overflow-y: auto;
    padding: 0; background: transparent; border-radius: 0; margin: 0;
  }
  .documento > .indice h2 {
    margin: 0 0 12px; font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
    font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3);
  }
  .documento > .indice ol { margin: 0; padding: 0; list-style: none; counter-reset: ind; }
  .documento > .indice li { counter-increment: ind; margin: 0; }
  .documento > .indice a {
    display: grid; grid-template-columns: 2rem 1fr; gap: 4px; padding: 7px 0; border-top: 1px solid var(--linha);
    font-size: .875rem; line-height: 1.4; color: var(--tinta-3); text-decoration: none;
  }
  .documento > .indice a::before { content: counter(ind, decimal-leading-zero); font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); color: var(--tinta-4); padding-top: .2em; }
  .documento > .indice li:last-child a { border-bottom: 1px solid var(--linha); }
  .documento > .indice a:hover { color: var(--tinta); }

  .documento .linho:not(.indice) {
    padding: clamp(20px, 2.4vw, 30px); border-radius: var(--raio-g); background: var(--linho); border: 1px solid var(--linha);
    margin-bottom: 8px;
  }
  .documento .linho:not(.indice) h2 {
    margin: 0 0 12px; font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
    font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3);
  }
  .documento .linho ul { display: grid; gap: .55em; }

  .documento section { scroll-margin-top: calc(var(--topo) + 24px); }
  .documento section > * + * { margin-top: 1em; }
  .documento section h2 {
    margin-top: 2.4em; padding-top: 1em; border-top: 1px solid var(--linha);
    font-family: var(--sans); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 520;
    scroll-margin-top: calc(var(--topo) + 24px);
  }
  .documento section h3 { margin-top: 1.8em; font-size: 1.125rem; font-weight: 580; letter-spacing: -.01em; color: var(--tinta); }
  .documento section h3 + * { margin-top: .6em; }
  .documento ul, .documento ol:not(.indice ol) { display: grid; gap: .6em; }
  .documento section ul li, .documento .linho ul li { position: relative; padding-left: 1.4em; }
  .documento section ul li::before, .documento .linho ul li::before {
    content: ""; position: absolute; left: .15em; top: .8em; width: .5em; height: 1px; background: var(--tinta-3);
  }
  .documento section ol { counter-reset: passo; }
  .documento section ol li { counter-increment: passo; position: relative; padding-left: 2.2em; }
  .documento section ol li::before {
    content: counter(passo); position: absolute; left: 0; top: .15em;
    display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%;
    border: 1px solid var(--borda-campo); font-family: var(--mono); font-size: .75em; font-stretch: var(--mono-l); color: var(--tinta-2);
  }
  .documento a { color: var(--tinta); text-decoration-color: var(--otto-fio); }
  .documento a:hover { text-decoration-color: var(--otto); text-decoration-thickness: 2px; }
  .documento strong { font-weight: 600; }

  .documento .fichas { display: grid; margin: 1.2em 0 0; font-size: var(--t-pequeno); line-height: 1.55; }
  .documento .fichas > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 4px 20px; padding-block: 14px; border-top: 1px solid var(--linha); }
  .documento .fichas > div:last-child { border-bottom: 1px solid var(--linha); }
  .documento .fichas dt { grid-row: span 4; font-weight: 600; color: var(--tinta); }
  .documento .fichas dd { grid-column: 2; margin: 0; }
  .documento .fichas dd.rotulo {
    font-family: var(--mono); font-size: .75rem; font-stretch: var(--mono-l); letter-spacing: .03em; text-transform: none; color: var(--tinta-3); line-height: 1.55;
  }
  .documento .marcador { white-space: normal; }
  .documento .marcador.pendente { color: var(--atencao-tinta); border-color: var(--atencao); background: var(--atencao-fundo); }

  @media (max-width: 1000px) {
    .documento { grid-template-columns: minmax(0, 1fr); }
    .documento > * { grid-column: 1; }
    .documento > .indice {
      grid-row: auto; position: static; max-height: none; overflow: visible;
      padding: clamp(18px, 3vw, 24px); border-radius: var(--raio-g); background: var(--sup-2); border: 1px solid var(--linha);
      margin-top: 12px;
    }
    .documento > .indice ol { columns: 2 14rem; column-gap: 28px; }
    .documento > .indice li { break-inside: avoid; }
  }
  @media (max-width: 560px) {
    .documento .fichas > div { grid-template-columns: 1fr; }
    .documento .fichas dt { grid-row: auto; }
    .documento .fichas dd { grid-column: 1; }
  }
}

/* --------------------------------------------------------------- movimento */
/* Tudo o que se move mora aqui e só existe com no-preference. Com reduce, a
   página nasce no estado final e nada anda. Nada roda para sempre: os
   relógios param em 45 s e os pacotes em 12 idas. */
@property --t  { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --mm { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --ss { syntax: "<integer>"; inherits: false; initial-value: 0; }

@layer movimento {
  @media (prefers-reduced-motion: no-preference) {
    .abertura h1 .linha { animation: sobe 900ms var(--ease-saida) both; }
    .abertura h1 .linha:nth-child(2) { animation-delay: 80ms; }
    .abertura h1 .linha:nth-child(3) { animation-delay: 160ms; }
    .abertura-texto { animation: surge 900ms var(--ease-saida) 240ms both; }
    .sistema { animation: surge 1100ms var(--ease-saida) 360ms both; }

    /* relógios que contam: a espera não para enquanto ninguém responde */
    .relogio.vivo {
      --mm: calc((var(--t) - 30) / 60);
      --ss: calc(var(--t) - var(--mm) * 60);
      counter-reset: mm var(--mm) ss var(--ss);
      animation: conta 45s steps(45, end) forwards;
    }
    .relogio.vivo > .fixo { display: none; }
    .relogio.vivo::after { content: counter(mm, decimal-leading-zero) ":" counter(ss, decimal-leading-zero); }
    .t-12  { --t0: 12; }
    .t-252 { --t0: 252; }
    .t-760 { --t0: 760; }

    .registro-vivo li { animation: escreve 500ms var(--ease-ui) both; }
    .registro-vivo li:nth-child(1) { animation-delay: 1.0s; }
    .registro-vivo li:nth-child(2) { animation-delay: 1.4s; }
    .registro-vivo li:nth-child(3) { animation-delay: 1.8s; }
    .registro-vivo li:nth-child(4) { animation-delay: 2.2s; }
    .registro-vivo li:nth-child(5) { animation-delay: 2.6s; }
    .cartao-fila.nova { animation: chega 700ms var(--ease-saida) 3s both; }

    /* pacotes pelos fios: só transform, sem layout; 12 idas e param */
    .pacote { animation: viaja 3.2s var(--ease-ui) 12; }
    .fio-2 .pacote { animation-delay: 1.6s; }
    @media (max-width: 900px) { .pacote { animation-name: viaja-v; } }

    /* pausa: um controle de verdade, sem script (WCAG 2.2.2) */
    .sistema:has(.pausa input:checked) :is(.relogio.vivo, .pacote) { animation-play-state: paused; }
  }

  @keyframes sobe   { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: none; } }
  @keyframes surge  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes escreve { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
  @keyframes chega  { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @keyframes conta  { from { --t: var(--t0); } to { --t: calc(var(--t0) + 45); } }
  @keyframes viaja {
    0%   { transform: translateX(0); opacity: 0; }
    12%  { opacity: 1; }
    70%  { opacity: 1; }
    82%, 100% { transform: translateX(calc(100cqi - 14px)); opacity: 0; }
  }
  @keyframes viaja-v {
    0%   { transform: translateY(0); opacity: 0; }
    12%  { opacity: 1; }
    70%  { opacity: 1; }
    82%, 100% { transform: translateY(42px); opacity: 0; }
  }
}

@media print {
  .topo, .menu-painel, .pausa, .abertura-fundo, .rodape-gigante, .pular { display: none !important; }
  :root { color-scheme: light; }
  .rodape { color-scheme: light; }
  .celula { border: 0; }
  .documento { display: block; }
  .documento > .indice { position: static; }
}