/* ==========================================================================
   Prancha — tema Ghost
   As cores e as fontes chegam do painel (Design → Personalizar) como
   variáveis; aqui só o que depende delas.
========================================================================== */

:root{
  /* se o Ghost tiver fonte escolhida no painel, ela manda;
     senão vale o par do tema; senão, a de sistema */
  --display:var(--gh-font-heading, var(--display-tema, Georgia, serif));
  --body:var(--gh-font-body, var(--body-tema, Georgia, serif));
  --ink-soft:color-mix(in srgb, var(--ink) 62%, var(--paper));
  --rule:color-mix(in srgb, var(--ink) 22%, var(--cream));
  --dot:color-mix(in srgb, var(--ink) 22%, transparent);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Pesos da fonte de títulos. Famílias de peso único (como Baskervville)
     redefinem tudo para 400: pedir negrito a quem não tem faz o navegador
     engrossar as letras artificialmente, o que estraga um serifado fino. */
  --peso-forte:var(--peso-forte-tema, 800);
  --peso-titulo:var(--peso-titulo-tema, 700);
  --peso-meio:var(--peso-meio-tema, 600);

  /* Os cartões do universo (fotos e anotações) usam a mesma família de
     creme do resto do tema, derivada das cores do painel — e não brancos
     e cinzas próprios. Antes eram um branco frio, quase cinza, e lado a
     lado com o papel creme do currículo pareciam de outro site. */
  --cartao:var(--cream);
  --quadro:color-mix(in srgb, var(--ink) 5%, var(--cream));
  --quadro-borda:color-mix(in srgb, var(--ink) 12%, var(--cream));
  --texto-cartao:color-mix(in srgb, var(--ink) 72%, var(--cream));
  --sombra-cartao:color-mix(in srgb, var(--ink) 30%, transparent);

  /* tinta do que fica solto sobre o fundo, sem papel atrás */
  --tinta-solta:var(--ink);
  --tinta-solta-suave:var(--ink-soft);
}
html.fundo-escuro{
  --tinta-solta:var(--cream);
  --tinta-solta-suave:color-mix(in srgb, var(--cream) 68%, var(--paper));
  --dot:color-mix(in srgb, var(--cream) 28%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)){
  :root{--ink-soft:#4C6A6C;--rule:#CBD8D4;--dot:rgba(20,38,43,.2)}
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--paper);color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
body.home-template,body.paged{overflow:hidden;user-select:none;-webkit-user-select:none}
a,img,svg{-webkit-user-drag:none}

/* ---------- palco ---------- */
#stage{position:fixed;inset:0;cursor:grab;touch-action:none}

#stage *{cursor:inherit}
#stage a,#stage button{cursor:pointer}   /* só o que é mesmo clicável */
#stage.is-panning{cursor:grabbing}
#stage.is-editing{cursor:crosshair}

/* ---------- alças de redimensionamento (só no modo editar) ----------
   O tamanho da alça é dado em unidades do mundo, recalculado conforme o
   zoom, para ela parecer sempre do mesmo tamanho na tela. */
.alca{
  position:absolute;display:none;z-index:6;
  width:var(--alca,12px);height:var(--alca,12px);
  background:var(--cream);
  border:calc(var(--alca,12px)*0.18) solid var(--coral);
}
/* as alças aparecem só na peça escolhida, como num editor */
#stage.is-editing .peca.escolhida > .alca,
#stage.is-editing .bloco.escolhida > .alca,
#stage.is-editing .cartaz.escolhida > .alca,
#stage.is-editing .hero.escolhida > .alca{display:block}

/* A moldura contorna a IMAGEM, não o conjunto com a legenda. As duas
   distâncias abaixo são medidas pelo tema e escritas em cada peça:
   quanto sobra acima e abaixo da imagem dentro da caixa. */
#stage.is-editing .escolhida::after{
  content:'';position:absolute;pointer-events:none;z-index:2;
  left:0;right:0;
  top:var(--img-cima,0px);bottom:var(--img-baixo,0px);
  outline:calc(var(--alca,12px)*0.12) solid var(--coral);
  outline-offset:calc(var(--alca,12px)*0.4);
}
/* o isolamento de repinte cortaria as alças nas bordas: desligado ao editar */

/* As alças acompanham as bordas da imagem, pelas mesmas medidas. */
#stage .alca{z-index:3}     /* acima do filme e da camada nítida */
#stage .alca{--cima:calc(var(--img-cima,0px) - var(--alca,12px)/2)}
#stage .alca{--baixo:calc(var(--img-baixo,0px) - var(--alca,12px)/2)}
/* meio vertical da imagem, para as alças laterais */
#stage .alca{--meio:calc((var(--img-cima,0px) + 100% - var(--img-baixo,0px))/2 - var(--alca,12px)/2)}

/* cantos */
#stage .alca[data-canto="nw"]{left:calc(var(--alca,12px)/-2);top:var(--cima);cursor:nwse-resize}
#stage .alca[data-canto="ne"]{right:calc(var(--alca,12px)/-2);top:var(--cima);cursor:nesw-resize}
#stage .alca[data-canto="sw"]{left:calc(var(--alca,12px)/-2);bottom:var(--baixo);cursor:nesw-resize}
#stage .alca[data-canto="se"]{right:calc(var(--alca,12px)/-2);bottom:var(--baixo);cursor:nwse-resize}

/* arestas: só nos cartões de texto, para esticar um eixo de cada vez */
#stage .alca[data-canto="n"]{left:50%;top:var(--cima);margin-left:calc(var(--alca,12px)/-2);cursor:ns-resize}
#stage .alca[data-canto="s"]{left:50%;bottom:var(--baixo);margin-left:calc(var(--alca,12px)/-2);cursor:ns-resize}
#stage .alca[data-canto="w"]{left:calc(var(--alca,12px)/-2);top:var(--meio);cursor:ew-resize}
#stage .alca[data-canto="e"]{right:calc(var(--alca,12px)/-2);top:var(--meio);cursor:ew-resize}

/* leitura do tamanho enquanto você redimensiona */
/* ---------- guias de alinhamento ----------
   Desenhadas em coordenadas de tela, não do mundo: assim a linha tem sempre
   um pixel, em qualquer nível de zoom. */
#guias{
  inset:0;width:100%;height:100%;
  pointer-events:none;display:none;
}
#guias.on{display:block}

/* o laço de seleção, desenhado em coordenadas de tela */
#laco{
  display:none;pointer-events:none;
  border:1px solid var(--coral);
  background:color-mix(in srgb, var(--coral) 12%, transparent);
}
#laco.on{display:block}
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  #laco{background:rgba(228,105,93,.12)}
}
#guias line{stroke:var(--coral);stroke-width:1;shape-rendering:crispEdges}
#guias line.centro{stroke-dasharray:4 4}

#medida{
  top:58px;right:16px;font-size:12px;letter-spacing:.08em;
  color:var(--cream);background:var(--coral);padding:9px 12px;
  display:none;pointer-events:none;
}
#medida.on{display:block}
/* Duas camadas de propósito:
   #camera só translada — o navegador resolve isso na placa de vídeo, sem
   repintar nada. #world só amplia, e só muda quando o zoom muda.
   Antes as duas coisas iam na mesma matriz, e cada arrasto obrigava a
   repintar a imagem inteira em zoom alto. É essa a causa do engasgo. */
#camera{
  position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;
  backface-visibility:hidden;
  transition:opacity .17s linear;
}
/* Durante a fusão a prancha some por um instante. É de propósito: o trabalho
   pesado de redesenhar o destino acontece enquanto nada está à vista, onde
   nenhum engasgo pode aparecer. Opacidade é resolvida na placa de vídeo. */
#camera.fundindo{opacity:0}
#camera.movendo{will-change:transform}
#camera.movendo .detail,#camera.movendo .cluster-label,#camera.movendo .section-mark{transition:none}
#world{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;visibility:hidden}
#world.pronto{visibility:visible}

/* peça fora da vista: o navegador para de pintar e de decodificar,
   mas o espaço dela continua ocupado, então nada se desloca */
.fora-de-vista{visibility:hidden;pointer-events:none}

/* ---------- peças ---------- */
/* contain:layout isola o cálculo desta peça do resto da prancha, que é o
   ganho de desempenho. Não use "paint" aqui: ele recorta tudo que passa da
   caixa, e a legenda fica abaixo da imagem, as alças nos cantos. */
.peca{position:absolute;margin:0;contain:layout}
/* a peça não é um botão nem um link: sobre ela continua valendo a mão
   de arrastar do palco, sem dedinho e sem reação ao passar o mouse */
.peca,.peca *{cursor:inherit}
.peca img{
  display:block;width:100%;height:auto;
}
/* A camada de nitidez fica SEMPRE sobreposta, fora do fluxo — assim a
   legenda continua embaixo da imagem, e a imagem base nunca sai de vista.
   Ela só se torna visível depois de decodificada. */
.peca img.camada-nitida{
  position:absolute;left:0;top:0;width:100%;height:auto;
  opacity:0;pointer-events:none;
}
.peca img.camada-nitida.pronta{opacity:1}
/* A legenda é escrita em 9px, mas quem a lê está sempre com a prancha
   ampliada — na tela ela aparece do tamanho de um texto normal.

   As fontes do tema têm eixo de TAMANHO ÓPTICO: por desenho, os corpos
   pequenos são traçados mais grossos para aguentarem a impressão miúda.
   Como o navegador só enxerga "9px", ele pedia o desenho mais encorpado, e
   a legenda saía visivelmente mais pesada que o texto dos cartões. Aqui o
   tamanho óptico é fixado no do texto corrido, para as duas terem o mesmo
   traço. Fontes sem esse eixo ignoram a instrução sem prejuízo. */
.peca figcaption{
  font-family:var(--body);font-style:italic;font-size:9px;line-height:1.4;
  margin-top:10px;color:var(--tinta-solta);
  text-align:right;                     /* padrão: embaixo, à direita */
  font-optical-sizing:none;
  /* o peso vai junto: font-variation-settings desliga os eixos que não
     lista, e o padrão de peso varia de fonte para fonte */
  font-variation-settings:'opsz' 20, 'wght' 400;
}
.peca figcaption b{font-style:normal;font-weight:400}

/* ---------- posição da legenda, por publicação ----------
   No Code injection:
     window.LEGENDAS = {
       "slug": "esquerda",          // embaixo à esquerda
       "outro": "cima direita",     // em cima à direita
       "mais":  "cima esquerda"
     };
   Sem nada definido, fica embaixo à direita. */
.peca.legenda-esquerda figcaption{text-align:left}
.peca.legenda-direita  figcaption{text-align:right}

/* Em cima: a ordem visual é invertida sem mexer no HTML, então a imagem
   continua sendo o primeiro elemento do documento e a legenda segue ligada
   a ela para quem usa leitor de tela. */
.peca.legenda-cima{display:flex;flex-direction:column-reverse}
.peca.legenda-cima figcaption{margin-top:0;margin-bottom:10px}

/* A imagem passa a ficar embaixo na caixa; a camada de nitidez precisa
   acompanhá-la, senão ficaria sobre a legenda. */
.peca.legenda-cima img.camada-nitida{top:auto;bottom:0}

/* ---------- o filme ----------
   Fica exatamente sobre a imagem, que continua servindo de quadro parado.
   Enquanto não toca, é a imagem que se vê; a fusão evita o corte seco entre
   o parado e o movimento. */
/* ---------- a moldura do filme ----------
   O vídeo vive dentro de um div, e não solto na peça. A razão é uma regra
   do CSS que vale para elementos SUBSTITUÍDOS — vídeo, imagem: quando eles
   são posicionados de forma absoluta com largura automática, a largura usada
   é a INTRÍNSECA do arquivo, não a do espaço entre as bordas. Com as quatro
   bordas presas, a conta fica sobredeterminada e a borda direita é ignorada.

   Resultado: 2560px de largura assim que os metadados chegavam — e eles
   chegam justamente ao começar a tocar. Daí o filme sair do cartão.

   Num div a regra não se aplica: ali a largura automática preenche o espaço
   entre as bordas, e o vídeo dentro dele se mede em porcentagem. */
.peca .moldura-filme{
  position:absolute;
  left:0;right:0;
  top:var(--img-cima,0px);
  bottom:var(--img-baixo,0px);
  overflow:hidden;
  pointer-events:none;
  z-index:1;                   /* acima da camada nítida, que vem depois */
}
/* O navegador desenha por cima do vídeo um botão de janela flutuante. O
   atributo já o desliga; estas regras cobrem os navegadores que o desenham
   assim mesmo. A peça é a moldura da obra, não uma janela de reprodutor. */
.peca video.filme::-webkit-media-controls{display:none !important}
.peca video.filme::-webkit-media-controls-enclosure{display:none !important}
.peca video.filme::-internal-media-controls-overlay-cast-button{display:none}

/* Invisível até o quadro do início estar pronto — por baixo, o cartaz da
   peça cobre esse instante. Aparece ainda parado, antes do play. Depois de
   à vista, nunca mais some: pausar deixa o quadro parado. O preto do começo do arquivo é pulado pelo canvas.js ("o preto do
   começo"). */
.peca video.filme{
  position:absolute;inset:0;
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  /* a troca do cartaz (imagem) pelo filme (vídeo): devagar, para que a
     pequena diferença de cor entre os dois não apareça como um salto */
  transition:opacity .7s ease;
}
.peca video.filme.a-vista{opacity:1}

/* Em tela cheia o ajuste muda de "preencher" para "caber".

   Na prancha o filme preenche a moldura da peça, e o que sobra é cortado —
   é o que faz a peça ter a forma que você lhe deu. Em tela cheia não há
   moldura para respeitar: a proporção da janela raramente é a do filme, e
   preencher significaria cortar as bordas da apresentação. */
/* Fora do plano, esperando a tela cheia. Sem esta regra ele apareceria
   solto no canto da página por um instante. */
video.filme.em-tela-cheia{
  position:fixed;inset:0;
  width:100vw;height:100vh;
  object-fit:contain;
  background:#000;
  opacity:1;
  z-index:9999;
}

/* Uma regra para cada prefixo, de propósito. Numa lista só, o navegador que
   não conhece UM dos seletores descarta a regra inteira — o Chrome não
   conhece ":-moz-full-screen", e por isso a regra nunca valia nele. */
video.filme:fullscreen{width:100%;height:100%;object-fit:contain;background:#000;opacity:1}
video.filme:-webkit-full-screen{width:100%;height:100%;object-fit:contain;background:#000;opacity:1}
/* Uma vez à vista, o filme não volta a ser imagem: pausar deixa o quadro
   parado do próprio filme, e não troca de volta pelo cartaz. Trocar seria
   um salto — o quadro do cartaz raramente é o quadro em que se parou. */

/* ---------- a régua do filme ----------
   Flutua sobre a prancha, em medida de tela, logo abaixo do vídeo. Não
   acompanha o zoom: um comando que encolhe deixa de ser comando. */
#controles-filme{
  /* Presa AO VÍDEO, logo abaixo dele. Ela se desenha em medida de tela, mas
     o lugar vem da peça: quando você navega para longe, ela sai de cena
     junto com o filme, em vez de acompanhá-lo pela janela. */
  position:fixed;z-index:55;
  /* A origem no canto, e não no centro: assim a borda visível coincide com
     a posição escrita, e a régua não escorrega para o lado ao encolher. */
  transform-origin:0 0;
  display:flex;align-items:center;gap:12px;
  padding:8px 12px;
  background:var(--cream);
  border:1px solid var(--rule);
  border-radius:999px;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
#controles-filme.on{opacity:1;visibility:visible;transition-delay:0s}

#controles-filme button{
  width:32px;height:32px;padding:0;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);background:none;border:none;border-radius:50%;
  cursor:pointer;transition:color .15s, transform .15s;
}
#controles-filme button:hover{color:var(--coral)}
#controles-filme button:active{transform:scale(.92)}
#controles-filme svg{
  width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
#filme-tocar .icone-tocar{fill:currentColor;stroke:none}
#filme-tocar .icone-pausar{display:none}
#controles-filme.tocando #filme-tocar .icone-tocar{display:none}
#controles-filme.tocando #filme-tocar .icone-pausar{display:block}

/* o percurso: um traço fino, sem os enfeites que cada navegador põe */
#filme-percurso{
  -webkit-appearance:none;appearance:none;
  width:min(38vw,320px);height:3px;flex:none;
  background:var(--rule);border-radius:2px;cursor:pointer;
}
#filme-percurso::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:13px;height:13px;border-radius:50%;
  background:var(--ink);border:none;cursor:pointer;
}
#filme-percurso::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;
  background:var(--ink);border:none;cursor:pointer;
}
#filme-percurso:hover::-webkit-slider-thumb{background:var(--coral)}
#filme-percurso:hover::-moz-range-thumb{background:var(--coral)}
/* as distâncias já vêm medidas; a legenda em cima está contemplada nelas */

/* mesma família do texto dos cartões: antes esta linha vinha em
   monoespaçada, e destoava de tudo o mais que se lê na prancha */
.peca figcaption span{
  color:var(--tinta-solta-suave);font-style:normal;font-family:var(--body);
  font-size:8px;letter-spacing:.01em;
}
.peca:focus-visible{outline:2px solid var(--coral);outline-offset:6px}

/* ---------- blocos de papel ---------- */
.bloco{
  position:absolute;background:var(--cream);padding:34px 36px;cursor:inherit;contain:layout;
}
.bloco h3{font-family:var(--display);font-weight:var(--peso-titulo);font-size:30px;line-height:1.05;margin:0 0 18px}
.bloco p{font-size:19px;line-height:1.5;margin:0 0 14px}
.bloco p:last-child{margin-bottom:0}
.bloco .mais{margin-top:22px}
.bloco .mais a{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--coral);text-decoration:none}
.bloco .mais a:hover{border-bottom:1px solid var(--coral)}

/* ---------- o currículo ----------
   A folha é o seu documento, inteiro, dentro da prancha. Ela é reduzida ou
   ampliada por uma transformação própria, calculada para que o nome dela
   caia exatamente sobre o nome que já está escrito na prancha. */
.curriculo{
  position:absolute;
  transform-origin:0 0;
  transition:opacity .45s ease, visibility 0s;
  opacity:1;
}
/* Fechada, a folha sai de vista por completo: enquanto estiver apenas
   transparente, o navegador continua a desenhá-la a cada quadro. A medição
   acontece depois de reabri-la, nunca aqui.

   A visibilidade só muda DEPOIS que a opacidade terminou de cair — daí o
   atraso de 0,45s na segunda transição. Sem ele, a folha era retirada no
   mesmo instante e a fusão nunca chegava a ser vista: o desaparecimento
   saía seco. Ao abrir não há atraso nenhum, porque a folha precisa estar
   presente antes de começar a aparecer. */
.curriculo.fechado{
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .45s ease, visibility 0s linear .45s;
}

/* =========================================================
   FUTURA PT — fontes locais
   ========================================================= */

@font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-Book.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-Demi.woff2") format("woff2");font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-Heavy.woff2") format("woff2");font-weight:900;font-style:normal;font-display:block}

@font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-BookObl.woff2") format("woff2");font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-DemiObl.woff2") format("woff2");font-weight:600;font-style:italic;font-display:block}
@font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-BoldObl.woff2") format("woff2");font-weight:700;font-style:italic;font-display:block}
@font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-ExtraBoldObl.woff2") format("woff2");font-weight:800;font-style:italic;font-display:block}
@font-face{font-family:"Futura PT";src:url("../fonts/FuturaPT-HeavyObl.woff2") format("woff2");font-weight:900;font-style:italic;font-display:block}

/* FUTURA PT CONDENSED */
@font-face{font-family:"Futura PT Cond";src:url("../fonts/FuturaPTCond-Book.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Futura PT Cond";src:url("../fonts/FuturaPTCond-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:"Futura PT Cond";src:url("../fonts/FuturaPTCond-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:"Futura PT Cond";src:url("../fonts/FuturaPTCond-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:block}

@font-face{font-family:"Futura PT Cond";src:url("../fonts/FuturaPTCond-BookObl.woff2") format("woff2");font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:"Futura PT Cond";src:url("../fonts/FuturaPTCond-MediumObl.woff2") format("woff2");font-weight:500;font-style:italic;font-display:block}
@font-face{font-family:"Futura PT Cond";src:url("../fonts/FuturaPTCond-BoldObl.woff2") format("woff2");font-weight:700;font-style:italic;font-display:block}
@font-face{font-family:"Futura PT Cond";src:url("../fonts/FuturaPTCond-ExtraBoldObl.woff2") format("woff2");font-weight:800;font-style:italic;font-display:block}

.curriculo .cv{transform-origin:0 0}

/* Os dois nomes, e a troca entre eles.

   O nome grande da prancha (na fonte de títulos) voa até a folha e cobre o
   nome do currículo, que está ali no mesmo lugar, mas transparente. A troca
   começa no clique: durante o voo, o da prancha sai e o do currículo (em
   Futura, como todo o papel) entra. Ao fechar, o caminho inverso, antes de
   a folha sumir.

   Os tempos são desencontrados de propósito: quem sai sai um pouco antes,
   quem entra entra com um pequeno atraso. Com os dois a 50% ao mesmo
   tempo, as letras de desenhos diferentes formariam uma mancha. */
/* Além da opacidade, o tamanho: o nome da prancha encolhe até a largura do
   da Futura, e o do currículo parte da largura do da prancha — os dois com
   a mesma curva e o mesmo tempo, para terem sempre a mesma largura (ver o
   passo 4 de encaixarNoNome). */
:root{--troca-tempo:.8s; --troca-curva:cubic-bezier(.65,0,.35,1)}
.curriculo .cv .name{
  opacity:0; transform-origin:var(--troca-origem, 0 0); transform:scale(var(--troca-k-inv, 1));
  transition:opacity .35s ease, transform var(--troca-tempo) var(--troca-curva);
}
body.nome-no-papel .curriculo .cv .name{
  opacity:1; transform:none;
  transition:opacity .7s ease .15s, transform var(--troca-tempo) var(--troca-curva);
}
.hero h1{
  transform-origin:var(--troca-origem, 0 0);
  transition:opacity .5s ease .1s, transform var(--troca-tempo) var(--troca-curva);
}
body.nome-no-papel .hero h1{
  opacity:0; transform:scale(var(--troca-k, 1));
  transition:opacity .55s ease, transform var(--troca-tempo) var(--troca-curva);
}
/* marcadores de linha de base (ver encaixarNoNome): não ocupam lugar */
.linha-base{display:inline-block;width:0;height:0;margin:0;padding:0;vertical-align:baseline;overflow:hidden}

/* o rodapé com o arquivo e o fechar, na medida da folha */
.curriculo-rodape{
  position:absolute;left:0;right:0;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;justify-content:flex-end;
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;
}
.curriculo-rodape a,.curriculo-rodape button{
  font:inherit;letter-spacing:inherit;
  color:var(--coral);background:none;border:none;padding:0;cursor:pointer;
  text-decoration:none;border-bottom:1px solid currentColor;
}
.curriculo-rodape a:hover,.curriculo-rodape button:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- o currículo, tal como você o desenhou ----------
   Reaproveitado do seu documento em HTML, medida por medida: as dimensões
   continuam em pontos, iguais às da folha A4 impressa. Todos os seletores
   foram restritos a .curriculo .cv, para nada aqui alcançar o resto da
   prancha. */
.curriculo .cv{
  --bg:        #fefdf8;
    --ink:       #000000;
    --page-w:    595.28pt;
    --page-h:    841.89pt;
    --pad-left:  28.6pt;
    --pad-right: 31.5pt;
    --col-left:  168pt;   
    --col-gap:   40.6pt;
    --col-right: 326.6pt; 
    --sub-date:  165pt;   
    --lh:        13.2pt;
  font-family:"Futura PT",sans-serif;
  color:var(--ink);
  font-size:11pt;
  line-height:var(--lh);
  letter-spacing:-0.012em;
  font-variant-ligatures:none;
}
.curriculo .cv .page{position:relative;
    width:var(--page-w);
    height:var(--page-h);
    margin:0 auto 22px;
    padding:54.6pt var(--pad-right) 36pt var(--pad-left);
    background:var(--bg);
    overflow:hidden;
    }
.curriculo .cv .masthead{height:260.3pt;}
.curriculo .cv .masthead::after{content:""; display:block; clear:both;}
.curriculo .cv .masthead .identity{float:left; width:182.1pt;}
.curriculo .cv .name{margin:0;
    font-size:34.6pt;
    font-weight:600;
    line-height:38.8pt;
    letter-spacing:0.012em;}
.curriculo .cv .profile{width:167pt;
    margin:20.4pt 0 0;
    font-size:10.8pt;
    line-height:12.93pt;}
.curriculo .cv .portrait{float:left;
    width:173.8pt;
    height:211pt;
    margin-top:14pt;
    object-fit:cover;
    display:block;}
.curriculo .cv .facts{float:left;
    width:168pt;
    margin:84.3pt 0 0;
    padding-left:11pt;
    font-size:10.9pt;}
.curriculo .cv .facts div + div{margin-top:12.9pt;}
.curriculo .cv .facts dt{font-weight:600;}
.curriculo .cv .facts dd{margin:0;}
.curriculo .cv .columns::after{content:""; display:block; clear:both;}
.curriculo .cv .column-left{float:left;  width:195pt;}
.curriculo .cv .column-right{float:right; width:var(--col-right);}
.curriculo .cv .section + .section{margin-top:30.5pt;}
.curriculo .cv .column-right .section + .section{margin-top:28pt;}
.curriculo .cv .section h2{margin:0;
    font-size:16pt;
    font-weight:600;
    line-height:18pt;
    letter-spacing:0.15pt;}
/* A régua de pontos é o seu próprio desenho (images/pontos.svg), na versão
   longa: três fileiras de 329 pontos. Ela nunca é esticada nem repetida —
   cada régua mostra o desenho na mesma escala do PDF e o corta na largura
   da coluna, sempre logo depois de um ponto inteiro (95 pontos na coluna
   da esquerda, 202 na da direita, todos os 329 na largura da página). */
.curriculo .cv .rule{height:5.24pt;
    margin:9.6pt 0 21.7pt;
    background:url("../images/pontos.svg") left top / 532.1pt 5.24pt no-repeat;}
.curriculo .cv .column-left .rule{width:153.4pt; margin-left:1.7pt;}
.curriculo .cv .column-right .rule{width:326.7pt; margin-left:.8pt; margin-bottom:23.7pt;}
/* ---------- ajustes da versão de setembro de 2026 (o PDF novo) ----------
   Medidas tiradas do próprio PDF, ponto por ponto. */

/* Os títulos das seções saem do PDF com um contorno fino por cima da letra
   (o "negrito" do Impress sobre a Futura Demi). O mesmo traço aqui, para o
   peso ser igual ao do papel. */
.curriculo .cv .section h2{-webkit-text-stroke:.53pt currentColor;}

/* O PDF novo não aperta as letras: espaçamento natural da Futura em todo o
   texto das duas páginas. O nome fica como estava, porque é ele que serve
   de régua para o nome da prancha cair por cima. */
.curriculo .cv .page{letter-spacing:0;}
.curriculo .cv .page .section h2{letter-spacing:0;}
.curriculo .cv .page .name{letter-spacing:0.012em;}

/* A página 1 começa mais alto; os dados pessoais descem até o pé da foto. */
.curriculo .cv .page-1{padding-top:40.8pt;}
.curriculo .cv .page-1 .masthead{height:259.7pt;}
.curriculo .cv .facts{margin-top:122.2pt;}
.curriculo .cv .facts div + div{margin-top:12.45pt;}

/* A coluna da esquerda e o texto de apresentação ficam um pouco mais
   para dentro, como no PDF. */
.curriculo .cv .column-left{padding-left:2.8pt;}
.curriculo .cv .profile{margin-left:2.8pt; white-space:nowrap;}

/* Os idiomas em Futura Demi, como os outros destaques (o <b> sozinho
   pedia a Bold, mais pesada que a do PDF), e no lugar exato do papel. */
.curriculo .cv .lang b{font-weight:600;}
.curriculo .cv .lang{position:relative; left:-.7pt; top:.7pt;}

/* As quebras de linha são as do PDF, escritas à mão: nada quebra sozinho. */
.curriculo .cv .entry .what{white-space:nowrap;}

/* Os espaços entre as seções, um a um, como no PDF. */
.curriculo .cv .page-1 .column-right .section + .section{margin-top:31.3pt;}

/* As quebras escritas à mão valem para o alemão, que segue o PDF linha por
   linha. Nas traduções o texto corre e quebra sozinho, na largura que as
   linhas do alemão ocupam. */
.curriculo:not([lang="de"]) .cv .profile{white-space:normal; width:158pt;}
.curriculo:not([lang="de"]) .cv .entry .what{white-space:normal;}

/* Na experiência profissional há uma linha em branco entre os empregos. */
.curriculo .cv .berufe .entry + .entry{margin-top:21.1pt;}

/* Uma página só: as duas do PDF emendadas, sem o Portfolio. Hobbys e
   Referenz continuam a coluna da esquerda, a Berufserfahrung continua a da
   direita, e a folha cresce o que precisar além da A4 — termina onde o
   texto termina, com a mesma margem de baixo, sem página em branco. */
.curriculo .cv .page.pagina-unica{height:auto;}

.curriculo .cv .stack > * + 
  .stack p{margin:0;}
.curriculo .cv .stack b{font-weight:600;}
.curriculo .cv .lang p + p,
.curriculo .cv .skills p + p{margin-top:13.2pt;}
.curriculo .cv .contact .block + .block{margin-top:13.2pt;}
.curriculo .cv .contact dt{font-weight:600;}
.curriculo .cv .contact dd{margin:0;}
.curriculo .cv .entry::after{content:""; display:block; clear:both;}
.curriculo .cv .entry + .entry{margin-top:7.9pt;}
.curriculo .cv .entry .when{float:left; width:var(--sub-date); margin:0;}
.curriculo .cv .entry .what{margin:0 0 0 var(--sub-date);}
.curriculo .cv .entry .what h3{margin:0;
    font-size:11pt;
    font-weight:600;
    line-height:var(--lh);}
.curriculo .cv .entry .what p{margin:13.2pt 0 0;}
.curriculo .cv .entry .what h3 span{font-weight:400;}
.curriculo .cv .hobbys p{margin:0;}
.curriculo .cv .hobbys p + p{margin-top:10.8pt;}
.curriculo .cv .hobbys{font-size:10pt; line-height:13.2pt;}
.curriculo .cv .hobbys b{font-weight:600;}
.curriculo .cv .reference p{margin:0;}
.curriculo .cv .reference .gap{margin-top:13.2pt;}
.curriculo .cv .reference b{font-weight:600;}

/* A folha tem a largura do próprio papel, e a página não se centra dentro
   dela. Isto não é detalhe: a página vinha com "margin:0 auto", de modo que
   a posição dela dependia da largura do contêiner — largura que o tema
   calcula a partir da posição da página. Cada medição movia o alvo, e o
   encaixe nunca fechava. */
.curriculo{width:max-content}
.curriculo .cv{width:max-content;padding:0}
.curriculo .cv .page{margin:0 0 22px}

/* Com o currículo aberto, do bloco do nome sobra só o nome. O ano, a
   descrição e a linha de contato pertencem à prancha, não ao documento —
   deixá-los ali seria escrever por cima do papel. Somem por fusão, para a
   passagem não ser um corte seco. */
.hero .eyebrow,.hero .role,.hero .meta{transition:opacity .3s ease}
body.curriculo-aberto .hero .eyebrow,
body.curriculo-aberto .hero .role,
body.curriculo-aberto .hero .meta{opacity:0;pointer-events:none}

/* Com o currículo aberto, a prancha se cala. As obras, os nomes das
   etiquetas e os reclamos ficariam por cima do papel — não por erro de
   empilhamento, mas porque estão espalhados por todo o plano, e o papel
   agora ocupa boa parte dele. Some tudo, menos o nome, que é justamente o
   que os dois compartilham. */
.peca,.bloco,.cartaz{transition:opacity .3s ease}
body.curriculo-aberto #world > *:not(.curriculo):not(.hero){
  opacity:0;pointer-events:none;
}

/* A navegação e o mapa também se calam: os dois falam da prancha, e a
   prancha não está mais em cena. Fica só a pílula de voltar. */
#atalhos,#mapa{transition:opacity .3s ease}
body.curriculo-aberto #atalhos,
body.curriculo-aberto #mapa{opacity:0;pointer-events:none}

/* ---------- o cartão de processo ----------
   As fotos de um universo, montadas pelo tema (ver montarCartaoProcesso):
   cartão branco, a foto num quadro no tom da prancha, a pílula com o título
   flutuando acima e a nota com o texto da publicação.

   Todas as medidas são frações da largura da peça (unidades cqw): o cartão
   guarda as mesmas proporções seja a peça pequena ou grande na prancha. */
.peca.cartao-processo,
.bloco.cartao-processo{
  container-type:inline-size;
  padding-top:15cqw;                 /* o lugar da pílula, dentro da peça */
  --cp-sans:"Inter","SF Pro Text",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
.cartao-processo .cp-cartao{
  position:relative;
  padding:3.4cqw;
  background:var(--cartao);
  border-radius:7.2cqw;
  box-shadow:0 4.8cqw 8.7cqw -3.9cqw var(--sombra-cartao), 0 .9cqw 2.2cqw color-mix(in srgb, var(--ink) 7%, transparent);
}
.cartao-processo .cp-pilula{
  position:absolute;left:6cqw;bottom:calc(100% + 3.2cqw);
  margin:0;padding:2.9cqw 6.4cqw;
  font-family:var(--cp-sans);font-style:normal;
  font-size:4.5cqw;font-weight:600;letter-spacing:-.01em;line-height:1.2;
  color:var(--ink);background:var(--cartao);
  border-radius:999px;white-space:nowrap;
  box-shadow:0 2.2cqw 4.8cqw -2.2cqw var(--sombra-cartao), 0 .4cqw 1.1cqw color-mix(in srgb, var(--ink) 7%, transparent);
}
.cartao-processo .cp-moldura{
  position:relative;
  border-radius:4.7cqw;overflow:hidden;
  border:max(1px, .32cqw) solid var(--quadro-borda);background:var(--quadro);
}
.cartao-processo .cp-moldura img{
  /* sem a cor própria: a foto recua e não briga com a obra final */
  filter:grayscale(1) contrast(1.06) brightness(1.06);
}
/* o verde-água do fundo, por cima, em multiplicação */
.cartao-processo .cp-moldura::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:var(--paper, #84BDBB);mix-blend-mode:multiply;opacity:.62;
}
body.processo-sem-tom .cartao-processo .cp-moldura img{filter:none}
body.processo-sem-tom .cartao-processo .cp-moldura::after{display:none}

.cartao-processo .cp-nota{
  margin:3.8cqw 2.6cqw 1.2cqw;
  font-family:var(--cp-sans);font-style:normal;
  font-size:4.1cqw;line-height:1.55;color:var(--texto-cartao);
}
.cartao-processo .cp-nota > *{margin:0 0 .7em}
.cartao-processo .cp-nota > :last-child{margin-bottom:0}
.cartao-processo .cp-nota strong,
.cartao-processo .cp-nota b{color:var(--ink);font-weight:600}
.cartao-processo .cp-nota a{color:inherit;text-decoration:underline;text-underline-offset:.2em}

/* ---------- o cartão de texto do processo ----------
   Uma anotação dentro de um universo: o mesmo cartão branco, com o texto
   num quadro cinza-claro. O fundo creme e o recheio do cartão de texto
   comum saem; o cartão desenha a si mesmo. */
.bloco.flutuante.cartao-processo{
  background:none;color:var(--ink);
  padding:15cqw 0 0;
  display:block;overflow:visible;
}
.bloco.flutuante.cartao-processo .cp-pilula{
  font-family:var(--cp-sans);font-size:4.5cqw;font-weight:600;
  letter-spacing:-.01em;line-height:1.2;margin:0;color:var(--ink);
}
.cartao-processo .cp-quadro{
  padding:5.6cqw 5.6cqw 5.2cqw;
  background:var(--quadro);
  border:max(1px, .32cqw) solid var(--quadro-borda);
  border-radius:4.7cqw;
}
.bloco.flutuante.cartao-processo .corpo-texto{
  font-family:var(--cp-sans);font-style:normal;
  font-size:4.1cqw;line-height:1.65;color:var(--texto-cartao);
}
.bloco.flutuante.cartao-processo .corpo-texto p{margin:0 0 .9em;font-size:inherit;line-height:inherit}  /* vence o .bloco p do cartão comum */
.bloco.flutuante.cartao-processo .corpo-texto > :last-child{margin-bottom:0}
.bloco.flutuante.cartao-processo .corpo-texto strong,
.bloco.flutuante.cartao-processo .corpo-texto b{color:var(--ink);font-weight:600}
.bloco.flutuante.cartao-processo .corpo-texto h2,
.bloco.flutuante.cartao-processo .corpo-texto h3,
.bloco.flutuante.cartao-processo .corpo-texto h4{
  font-family:var(--cp-sans);font-size:1.12em;font-weight:600;
  line-height:1.3;margin:1.2em 0 .45em;color:var(--ink);
}
/* a citação do Ghost vira o destaque dentro do quadro */
.bloco.flutuante.cartao-processo .corpo-texto blockquote{
  margin:1.1em 0 .2em;padding:.85em 1em;
  background:var(--cartao);
  border-left:.2em solid var(--ink);
  border-radius:.25em .75em .75em .25em;
  font-style:normal;opacity:1;color:var(--ink);
}
.bloco.flutuante.cartao-processo .corpo-texto blockquote p:last-child{margin-bottom:0}

/* ---------- os universos de processo ----------
   O material do processo fica escondido até o universo da obra ser aberto.
   Como a folha do currículo: some por fusão, e a visibilidade só muda
   depois que a opacidade caiu. */
.doc-fechado{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease, visibility 0s linear .45s;
}

/* Universo aberto: a prancha se cala — tudo some, menos a obra e o seu
   material. O nome do site também sai: aqui o assunto é a obra. */
body.universo-aberto #world > *:not(.em-universo):not(.doc):not(.abre-universo){
  opacity:0;pointer-events:none;
}
body.universo-aberto #atalhos,
body.universo-aberto #mapa{opacity:0;pointer-events:none}

/* O ícone ao lado da obra. Mora na camada da interface (position:fixed) e
   é posicionado a cada quadro pelo canvas.js (posicionarIcone): a posição e
   a escala chegam pelo transform, a partir do canto de cima à esquerda. */
.abre-universo{
  position:fixed;left:0;top:0;z-index:5;
  width:32px;height:32px;padding:0;margin:0;
  transform-origin:0 0;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);background:var(--cream);
  border:1px solid var(--rule);border-radius:50%;
  cursor:pointer;
  transition:opacity .3s ease, visibility 0s linear 0s, color .15s, border-color .15s, background .15s;
}
.abre-universo:hover{color:var(--coral);border-color:var(--coral)}
.abre-universo svg{
  width:62%;height:62%;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;
}
.abre-universo svg .ponto{fill:currentColor;stroke:none}
/* aberto, o ícone fica marcado: tocá-lo de novo fecha */
.abre-universo.aberto{color:var(--cream);background:var(--ink);border-color:var(--ink)}
.abre-universo.aberto:hover{background:var(--coral);border-color:var(--coral);color:var(--cream)}
/* longe demais, fora da tela, de outro universo ou com o currículo aberto */
.abre-universo.escondido{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease, visibility 0s linear .3s;
}

/* voltar, no canto onde ficava a navegação */
#acoes-universo{
  left:16px;bottom:16px;z-index:60;
  display:flex;align-items:center;gap:12px;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
body.universo-aberto #acoes-universo{opacity:1;visibility:visible;transition-delay:0s}
#voltar-universo{
  width:46px;height:46px;padding:0;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);background:var(--cream);
  border:1px solid var(--rule);border-radius:50%;
  cursor:pointer;
  transition:color .15s, border-color .15s, transform .15s;
}
#voltar-universo:hover{color:var(--coral);border-color:var(--coral)}
#voltar-universo:active{transform:scale(.94)}
#voltar-universo svg{
  width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.rotulo-universo{
  display:flex;flex-direction:column;gap:3px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.3;
  color:var(--ink);background:var(--cream);border:1px solid var(--rule);
  padding:7px 12px;max-width:min(52vw, 420px);
}
.rotulo-universo .palavra{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
#nome-universo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#nome-universo:empty{display:none}

/* ---------- os comandos do currículo ----------
   Voltar e idioma, redondos, no fundo ao lado do papel. Ficam num grupo só
   para se deslocarem juntos e nunca pousarem sobre o documento. */
#acoes-curriculo{
  position:fixed;z-index:60;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
#acoes-curriculo.on{opacity:1;visibility:visible;transition-delay:0s}

/* Deitado: quando os botões vão para a margem de cima ou de baixo, ficam
   lado a lado. Uma coluna ali seria alta e estreita justamente onde o
   espaço disponível é baixo e largo. */
#acoes-curriculo.deitado{flex-direction:row}
#acoes-curriculo.deitado .lista-idiomas{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:0;
}
#acoes-curriculo.deitado #idiomas.aberto .lista-idiomas{margin-top:12px}

#acoes-curriculo button{
  width:46px;height:46px;padding:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);background:var(--cream);
  border:1px solid var(--rule);border-radius:50%;
  cursor:pointer;
  transition:color .15s, border-color .15s, transform .15s;
}
#acoes-curriculo button:hover{color:var(--coral);border-color:var(--coral)}
#acoes-curriculo button:active{transform:scale(.94)}

#acoes-curriculo svg{
  width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* o desenho do botão de leitura é cheio, não traçado */
#acoes-curriculo svg.cheio{fill:currentColor;stroke:none}
/* ligado: invertido, como o idioma escolhido */
#leitura-curriculo.ativo{color:var(--cream);background:var(--ink);border-color:var(--ink)}
#leitura-curriculo.ativo:hover{background:var(--coral);border-color:var(--coral);color:var(--cream)}

/* a lista de idiomas cresce a partir do botão, sem empurrar nada */
#idiomas{position:relative;display:flex;flex-direction:column;align-items:center}
.lista-idiomas{
  display:flex;flex-direction:column;gap:8px;
  margin-top:0;max-height:0;overflow:hidden;
  opacity:0;pointer-events:none;
  transition:max-height .28s ease, opacity .22s ease, margin-top .28s ease;
}
#idiomas.aberto .lista-idiomas{
  max-height:300px;opacity:1;pointer-events:auto;margin-top:12px;
}
.lista-idiomas button{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
}
/* O idioma escolhido fica invertido, como o botão de leitura ligado. O
   seletor leva o #acoes-curriculo: sem ele, a regra geral dos botões
   redondos (fundo creme) vencia, e a escolha não aparecia. */
#acoes-curriculo .lista-idiomas button.atual{
  color:var(--cream);background:var(--ink);border-color:var(--ink);
}
#acoes-curriculo .lista-idiomas button.atual:hover{background:var(--coral);border-color:var(--coral);color:var(--cream)}
#idiomas.aberto #abre-idiomas{color:var(--coral);border-color:var(--coral)}

/* ---------- o certificado telc B2 ----------
   A página seguinte do currículo, reaproveitada do seu documento em HTML.

   TODAS as classes dele levam o prefixo "c-", e os identificadores o
   prefixo "cert-". Escopar o CSS do certificado não bastava: o certificado
   usa .hero e .meta, que são os nomes do bloco do nome e da linha de
   contato aqui — e as regras DO TEMA alcançavam o documento, deixando o
   título absoluto e transbordando a página. Com nomes próprios, nenhum dos
   dois lados enxerga o outro.

   O documento foi desenhado com 919px de largura; a página do currículo tem
   793,7px. O invólucro reduz o certificado nessa proporção, e as alturas
   coincidem porque ambos são A4. */
.curriculo .cv .cert-folha{
  --escala-cert:0.86366;          /* 793,7 ÷ 919 */
  position:relative;
  width:var(--page-w);
  height:var(--page-h);
  margin:0 0 22px;
  overflow:hidden;
  background:#FEFDF9;
}
.curriculo .cert{
  --paper:#FEFDF9;
  --ink:#14140F;
  --muted:#6B6C66;
  --hair:#D6D4CB;
  --track:#EAE8DE;
  --bar:#B9CC84;        
  --bar-strong:#8FAE52;
  width:919px;height:1300px;
  padding:70px 74px 36px;
  display:flex;flex-direction:column;
  box-sizing:border-box;
  transform:scale(var(--escala-cert));
  transform-origin:0 0;
  font-family:"Futura PT",sans-serif;
  color:var(--ink);

  /* O certificado está DENTRO da folha do currículo e herdava a tipografia
     dela: corpo de 11pt, entrelinha de 13,2pt e espaçamento negativo entre
     letras. Numa página composta em 34px, essa entrelinha esmagava as
     linhas umas contra as outras — era o que deixava a faixa do resultado
     apertada. Aqui a herança é interrompida e valem os valores do próprio
     documento. */
  font-size:16px;
  line-height:normal;
  letter-spacing:normal;
  font-variant-ligatures:normal;
}
/* Só os elementos DE DENTRO. Antes esta regra também alcançava a página do
   certificado e, por vir depois, zerava o recuo dela: o conteúdo encostava
   nas bordas e o código QR saía cortado. */
.curriculo .cert *{margin:0;padding:0;box-sizing:border-box}
.curriculo .cert .c-rule{border-top:1px solid var(--hair)}
.curriculo .cert .c-head{display:flex; justify-content:space-between; align-items:flex-start}
.curriculo .cert .c-brand{font-size:56px; font-weight:700; letter-spacing:-3px; color:#8A8D90; line-height:.86}
.curriculo .cert .c-verify{text-align:right}
.curriculo .cert #cert-qr{width:92px; height:92px; display:block; margin-left:auto; position:relative; left:4px}
.curriculo .cert .c-qrnote{width:92px; margin:8px 0 0 auto;
  font-size:10px; line-height:1.45; color:var(--muted);}
.curriculo .cert .c-qrlink{white-space:nowrap; color:inherit;
  text-decoration:underline; text-decoration-color:currentColor; text-underline-offset:2px;
  transition:color .15s;}
.curriculo .cert .c-qrlink:hover,
.curriculo .cert .c-qrlink:focus-visible{color:var(--ink); text-decoration-color:currentColor}
.curriculo .cert .c-qrlink:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.curriculo .cert .c-titleblock{margin-top:50px}
.curriculo .cert .c-kicker{font-size:17px; font-weight:400; color:var(--muted); letter-spacing:.4px}
.curriculo .cert .c-hero{font-size:82px; font-weight:700; letter-spacing:-3px; line-height:1; margin-top:2px}
.curriculo .cert .c-hero small{font-size:82px; font-weight:300; letter-spacing:-3px}
.curriculo .cert .c-cefr{margin-top:12px; font-size:15px; color:#2E2F2A}
.curriculo .cert .c-cefr em{font-style:italic; color:var(--muted)}
.curriculo .cert .c-person{margin-top:44px}
.curriculo .cert .c-person .c-name{font-size:33px; font-weight:600; letter-spacing:-.8px}
.curriculo .cert .c-person .c-meta{margin-top:6px; font-size:14.5px; color:var(--muted)}
.curriculo .cert .c-info-wrap{position:relative; display:inline-block; vertical-align:middle;
  line-height:0; top:-2px; margin-left:12px;}
.curriculo .cert .c-info{width:18px; height:18px; padding:0; border-radius:50%;
  border:1px solid var(--hair); background:none;
  font-family:inherit; font-size:11px; line-height:16px; color:var(--muted);
  cursor:help; transition:border-color .15s, color .15s;}
.curriculo .cert .c-info:hover,
.curriculo .cert .c-info:focus-visible{border-color:var(--ink); color:var(--ink)}
.curriculo .cert .c-info:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.curriculo .cert .c-tip{position:absolute; line-height:1.45; left:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(-4px);
  width:250px; padding:10px 13px;
  background:var(--paper); border:1px solid var(--hair);
  
  font-size:12.5px; color:#2E2F2A;
  opacity:0; visibility:hidden;
  transition:opacity .15s, transform .15s, visibility .15s;}
.curriculo .cert .c-tip b{font-weight:500; color:var(--ink)}
.curriculo .cert .c-info:hover + .c-tip,
.curriculo .cert .c-info:focus-visible + .c-tip{opacity:1; visibility:visible; transform:translateY(-50%) translateX(0);}
.curriculo .cert .c-only-print{display:none}
.curriculo .cert .c-verdict{margin-top:24px; padding:18px 22px;
  background:var(--track);
  display:flex; align-items:baseline; justify-content:space-between;}
.curriculo .cert .c-verdict .c-lab{font-size:13px; color:var(--muted); letter-spacing:.3px}
.curriculo .cert .c-verdict .c-grade{font-size:34px; font-weight:600; letter-spacing:-.8px; margin-top:2px}
.curriculo .cert .c-verdict .c-score{text-align:right}
.curriculo .cert .c-verdict .c-score .c-big{font-size:34px; font-weight:600; letter-spacing:-.8px; font-variant-numeric:tabular-nums}
.curriculo .cert .c-verdict .c-score .c-of{font-size:17px; font-weight:400; color:var(--muted)}
.curriculo .cert .c-scores{margin-top:32px}
.curriculo .cert .c-srow{display:grid;
  grid-template-columns:238px 1fr 100px 54px;
  column-gap:14px; align-items:center;
  height:27px; font-size:14.5px;}
.curriculo .cert .c-srow.c-sec{height:36px; font-size:16.5px; font-weight:600}
.curriculo .cert .c-srow.c-sub .c-lab{padding-left:16px; color:#2E2F2A}
.curriculo .cert .c-srow.c-total{height:40px; font-size:17px; font-weight:600; margin-top:16px; padding-top:10px}
.curriculo .cert .c-gap{height:20px}
.curriculo .cert .c-track{position:relative; height:9px; background:var(--track)}
.curriculo .cert .c-srow.c-sec .c-track{height:13px}
.curriculo .cert .c-srow.c-total .c-track{height:15px}
.curriculo .cert .c-fill{position:absolute; left:0; top:0; bottom:0; background:var(--bar)}
.curriculo .cert .c-srow.c-sec .c-fill,
.curriculo .cert .c-srow.c-total .c-fill{background:var(--bar-strong)}
.curriculo .cert .c-tick{position:absolute; top:-8px; bottom:-8px; width:1.5px; margin-left:-.75px; background:var(--ink)}
.curriculo .cert .c-val{display:grid; grid-template-columns:42px 12px 42px; column-gap:2px; align-items:baseline}
.curriculo .cert .c-num{text-align:right; font-variant-numeric:tabular-nums}
.curriculo .cert .c-slash{text-align:center; color:var(--muted); font-weight:400; font-size:13.5px}
.curriculo .cert .c-max{text-align:left; font-variant-numeric:tabular-nums; color:var(--muted); font-weight:400; font-size:13.5px}
.curriculo .cert .c-pct{text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); font-weight:400; font-size:13.5px}
.curriculo .cert .c-srow.c-sec .c-num,
.curriculo .cert .c-srow.c-total .c-num{font-weight:600}
.curriculo .cert .c-legend{margin-top:22px;
  font-size:11.5px; line-height:1.55; color:var(--muted);}
.curriculo .cert .c-legend .c-tickmark{display:inline-block; width:1.5px; height:14px; background:var(--ink); vertical-align:-3px; margin:0 4px}
.curriculo .cert .c-foot{}
.curriculo .cert .c-docmeta{display:grid; grid-template-columns:repeat(4,1fr);
  column-gap:16px; margin-top:auto; margin-bottom:auto;}
.curriculo .cert .c-docmeta .c-k{font-size:11px; color:var(--muted); letter-spacing:.2px}
.curriculo .cert .c-docmeta .c-v{font-size:14.5px; font-weight:500; margin-top:3px; font-variant-numeric:tabular-nums}
.curriculo .cert .c-colophon{display:flex; justify-content:space-between;
  font-size:11.5px; color:var(--muted);}
.curriculo .cert @page{size:A4; margin:0}

/* ---------- o diploma da Gewerbeschule ----------
   A terceira página do currículo, depois do certificado telc.

   Como as outras duas folhas de fora, ela vem com desenho próprio: as
   classes levam o prefixo "a-" e os identificadores o prefixo "ags-", e o
   CSS é restrito a .curriculo .ags. A tipografia também é interrompida —
   dentro da folha do currículo, ela herdaria corpo e entrelinha de lá.

   Esta chega em 595,28 × 841,89pt, a mesma medida das páginas do currículo,
   então não precisa de redução: entra na pilha como está. */
.curriculo .ags{
  --narrow: 0.72;

    
    --futura:      "Futura PT",sans-serif;
    --futura-cond: "Futura PT Cond",sans-serif;
  position:relative;
  width:595.28pt;height:841.89pt;
  margin:0 0 22px;
  padding:25.5pt 25.7pt;
  background:#fdfcf7;
  overflow:hidden;
  box-sizing:border-box;
  font-size:16px;
  line-height:normal;
  letter-spacing:normal;
  font-variant-ligatures:normal;
}
.curriculo .ags @page{size: A4; margin: 0;}
.curriculo .ags *{box-sizing: border-box;}
.curriculo .ags html{background:#e6e3da;}
.curriculo .ags .a-doctitle{margin:0;
    font-size:30pt;
    font-weight:600;
    line-height:36.3pt;
    letter-spacing:0.012em;
    text-transform:uppercase;}
.curriculo .ags .a-head{min-height:258.3pt; overflow:hidden;}
.curriculo .ags .a-head .a-col-a{float:left; width:222.2pt;}
.curriculo .ags .a-head .a-col-b{float:left; width:321.6pt;}
.curriculo .ags .a-verdict{margin:23.3pt 0 0;
    font-size:12pt;
    font-weight:600;
    line-height:16.2pt;}
.curriculo .ags .a-verdict mark{display:inline-block;
    color:inherit;
    padding:0 1pt;
    margin:0 -1pt;
    background:linear-gradient(#e2ecb7,#e2ecb7) no-repeat;
    background-size:100% 3.6pt;
    background-position:0 8.3pt;}
.curriculo .ags .a-origin{width:94.4pt;    
    margin:25.8pt 0 0;
    font-family:var(--futura-cond);
    font-size:7.2pt;
    line-height:10.36pt;
    transform:scaleX(var(--narrow));
    transform-origin:left top;}
.curriculo .ags.a-has-cond .a-origin{width:68pt; transform:none;}
.curriculo .ags .a-origin .a-nb{white-space:nowrap;}
.curriculo .ags .a-origin a{color:inherit;
    text-decoration:underline;
    text-decoration-thickness:0.35pt;
    text-underline-offset:1.2pt;}
.curriculo .ags .a-qr{display:block; width:56.7pt; height:56.7pt; margin:23.5pt 0 0 -3px;}
.curriculo .ags .a-qr svg{display:block; width:100%; height:100%;}
.curriculo .ags .a-statement{margin:15pt 0 0; font-size:9.6pt; line-height:12.5pt;}
.curriculo .ags .a-statement p{margin:0;}
.curriculo .ags .a-statement p + p{margin-top:12.5pt;}
.curriculo .ags .a-statement b{font-weight:600;}
.curriculo .ags .a-grades{border-collapse:separate;
    border-spacing:1.5pt;
    table-layout:fixed;
    width:546.8pt;
    margin:-1.5pt;
    font-size:8.2pt;
    line-height:9pt;
    font-weight:400;
    --narrow: 0.64;}
.curriculo .ags .a-grades td,
.curriculo .ags .a-grades th{height:16.3pt;
    padding:0;
    border:0;
    font-weight:400;
    text-align:center;
    vertical-align:middle;
    background:#dcdedd;
    -webkit-background-clip:padding-box;
    background-clip:padding-box;}
.curriculo .ags .a-grades .a-empty{background:transparent;}
.curriculo .ags .a-grades .a-green{background:#e2ecb7; -webkit-background-clip:padding-box; background-clip:padding-box;}
.curriculo .ags .a-grades .a-blue{background:#badaf3; -webkit-background-clip:padding-box; background-clip:padding-box;}
.curriculo .ags .a-grades .a-tan{background:#f0dcaa; -webkit-background-clip:padding-box; background-clip:padding-box;}
.curriculo .ags .a-grades .a-salmon{background:#e5b9a0; -webkit-background-clip:padding-box; background-clip:padding-box;}
.curriculo .ags .a-grades .a-gray{background:#dcdedd; -webkit-background-clip:padding-box; background-clip:padding-box;}
.curriculo .ags .a-grades .a-gs{border-left:1.7pt solid transparent;}
.curriculo .ags .a-grades .a-lbl{text-align:left; padding-left:6pt;}
.curriculo .ags .a-grades .a-note{text-align:left; padding-left:7.7pt;}
.curriculo .ags .a-grades .a-x{font-weight:600;}
.curriculo .ags.a-has-cond .a-grades .a-x{font-weight:500;}
.curriculo .ags .a-grades .a-ring{display:inline-block;
    font-family:var(--futura);
    font-weight:500;}
.curriculo .ags.a-has-cond .a-grades .a-ring{font-weight:400;}
.curriculo .ags .a-grades tr.a-spacer td{height:0; padding:0; line-height:0; font-size:0;
                        background:transparent;}
.curriculo .ags .a-grades .a-status span{color:#4ca82c;}
.curriculo .ags .a-x{font-family:var(--futura-cond);
    font-weight:400;
    display:inline-block;
    white-space:nowrap;
    transform:scaleX(var(--narrow));
    transform-origin:center;}
.curriculo .ags .a-x.a-l{transform-origin:left;}
.curriculo .ags .a-v{display:flex; justify-content:center;}
.curriculo .ags .a-v > .a-x{writing-mode:vertical-rl;
    -webkit-writing-mode:vertical-rl;
    text-align:center;
    transform:rotate(180deg) scaleY(var(--narrow));}
.curriculo .ags .a-v-sub > .a-x,
.curriculo .ags .a-v-sub13 > .a-x{transform-origin:50% 0;
    transform:translateY(100%) rotate(180deg) scaleY(var(--narrow));}
.curriculo .ags.a-has-cond .a-x{transform:none;}
.curriculo .ags.a-has-cond .a-v > .a-x,
.curriculo .ags.a-has-cond .a-v-sub > .a-x,
.curriculo .ags.a-has-cond .a-v-sub13 > .a-x{transform-origin:50% 50%;
    transform:rotate(180deg);}
.curriculo .ags .a-v-grp{height:109.2pt; align-items:center;}
.curriculo .ags .a-v-sub{height:138pt;   align-items:flex-end; padding-bottom:6.7pt;}
.curriculo .ags .a-v-sub13{height:155.8pt; align-items:flex-end; padding-bottom:17.2pt;}
.curriculo .ags .a-v-year{height:51.9pt;  align-items:center;}
.curriculo .ags .a-v-year4{height:69.7pt;  align-items:center;}
.curriculo .ags .a-legend{margin:11pt 0 0;
    font-size:9.6pt;
    line-height:11.3pt;}
.curriculo .ags .a-legend p{margin:0;}
.curriculo .ags .a-legend i{font-style:normal; color:#15678a;}

/* ---------- a terceira página do certificado ----------
   Vem entre a última página do currículo e o certificado telc, na mesma
   folha. Como as outras páginas de fora: prefixo "p3-" nas classes, CSS
   restrito a .curriculo .pag3, tipografia interrompida.

   Ela chega em 210×297mm — A4 —, a mesma medida das páginas do currículo,
   então não precisa de redução. */
.curriculo .pag3{
  position: relative;
    width: 210mm;
    height: 297mm;
    margin: 0 auto;
    overflow: hidden;
    background: #FEFDF8;            
    font-family: Arial, "Liberation Sans", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400;
    color: #000;
    -webkit-font-smoothing: antialiased;
  margin:0 0 22px;
  box-sizing:border-box;
  font-size:16px;
  line-height:normal;
  letter-spacing:normal;
  font-variant-ligatures:normal;
}
.curriculo .pag3.p3-page > div{position: absolute;
    line-height: 1.1172;
    white-space: pre;
    letter-spacing: 0;}
.curriculo .pag3.p3-page > div.p3-b{font-weight: 700;}
.curriculo .pag3 .p3-logo{position: absolute;
    left: 16.70mm; top: 20.90mm;
    width: 8.10mm; height: 12.60mm;}
.curriculo .pag3 .p3-rule{position: absolute;
    left: 28.385mm; top: 7.94mm;
    width: 0.35mm; height: 29.50mm;
    background: #030200;}
.curriculo .pag3 .p3-box{position: absolute;
    left: 32.89mm;
    width: 75.70mm; height: 4.82mm;
    background: #C9C4B6;}
.curriculo .pag3 .p3-hr{position: absolute;
    left: 32.89mm; top: 126.41mm;
    width: 75.64mm; height: 0.2pt;
    background: #000;}
.curriculo .pag3 .p3-sig{position: absolute;
    left: 152.90mm; top: 276.30mm;
    width: 37.30mm; height: 12.30mm;}

/* o nome da prancha aparece SOBRE o papel */
.hero{z-index:2}

/* ---------- cartão de texto ----------
   A cor do fundo e da tinta vêm do Code injection, por publicação.
   Sem nada definido, valem o papel e a tinta do tema. */
.bloco.flutuante{
  display:flex;flex-direction:column;
  overflow:auto;                       /* texto mais alto que a caixa rola */
  scrollbar-width:thin;
}
.bloco.flutuante h3{font-size:34px;margin-bottom:22px;letter-spacing:-.02em}
.bloco.flutuante .corpo-texto{font-size:20px;line-height:1.5}
.bloco.flutuante .corpo-texto > :first-child{margin-top:0}
.bloco.flutuante .corpo-texto > :last-child{margin-bottom:0}
.bloco.flutuante .corpo-texto p{margin:0 0 1em}
.bloco.flutuante .corpo-texto h2,
.bloco.flutuante .corpo-texto h3{font-family:var(--display);line-height:1.15;margin:1.4em 0 .5em}
.bloco.flutuante .corpo-texto blockquote{margin:1.2em 0;padding-left:18px;border-left:2px solid currentColor;font-style:italic;opacity:.85}
.bloco.flutuante .corpo-texto img{max-width:100%;height:auto}
.bloco.flutuante .corpo-texto a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* fundo transparente: a peça flutua sobre o ciano, e a tinta passa a ser a
   mesma que o tema usa para o texto solto — já calculada para contrastar */
.bloco.flutuante.sem-fundo{
  background:transparent;
  color:var(--tinta-solta);
}

/* ---------- cartaz ---------- */
.cartaz{
  position:absolute;padding:38px 34px 30px;display:flex;flex-direction:column;
  background:var(--coral);color:var(--cream);
}
.cartaz q{
  font-family:var(--display);font-weight:var(--peso-titulo);font-size:37px;line-height:1.06;
  text-transform:uppercase;quotes:none;
}
.cartaz .assina{font-family:var(--display);font-size:17px;font-weight:var(--peso-meio);margin:auto 0 0;padding-top:26px;text-align:right}

/* ---------- hero ---------- */
.hero{position:absolute}
.hero{color:var(--tinta-solta)}
.hero .eyebrow{font-family:var(--mono);font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--tinta-solta-suave);margin:0 0 22px}
.hero h1{font-family:var(--display);font-weight:var(--peso-forte);font-size:min(190px,13vw);line-height:.82;margin:0;letter-spacing:-.03em;text-transform:uppercase}
.hero .role{font-size:34px;line-height:1.35;margin:36px 0 0;max-width:22ch;font-weight:300}
/* O espaço entre os itens vem do "gap" do contêiner, e não de uma margem
   nos links: assim ele vale para todos, com link ou sem. Era por isso que
   um item de texto simples aparecia colado no vizinho. */
.hero .meta{
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;
  color:var(--tinta-solta-suave);margin:30px 0 0;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;
}
.hero .meta a{color:var(--tinta-solta);text-decoration:none;border-bottom:1px solid currentColor}
.hero .meta a:hover{color:var(--coral);border-bottom-color:var(--coral)}

/* ---------- rótulos ---------- */
.cluster-label{
  position:absolute;font-family:var(--display);font-weight:var(--peso-forte);font-size:150px;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--tinta-solta);opacity:0;
  pointer-events:none;white-space:nowrap;
  /* A opacidade acompanha o zoom de forma contínua, e não por um
     interruptor com tempo próprio. Assim o nome cresce e some no ritmo do
     seu gesto: pare no meio do caminho e ele fica meio visível. Uma
     transição temporizada, além de brusca ao cruzar o limiar, disputava com
     a mudança de escala e dava aquele salto. */
  opacity:var(--op-rotulo, 0);
}

/* No modo editar o rótulo fica sempre à vista, esmaecido, para você poder
   colocá-lo em relação às obras mesmo com a prancha ampliada — de outro
   modo só seria possível movê-lo bem afastado, onde ele aparece sozinho. */
#stage.is-editing .cluster-label{opacity:max(var(--op-rotulo, 0), .35);pointer-events:auto}
#stage.is-editing .cluster-label.escolhida{opacity:1}
.section-mark{
  position:absolute;font-family:var(--mono);font-size:13px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--tinta-solta-suave);white-space:nowrap;
  /* o oposto do nome grande: os dois se cruzam sem que a soma pisque */
  opacity:var(--op-marca, 1);
}
.detail{transition:opacity .18s ease}

/* ---------- texto vira barra ao afastar ----------
   Em vez de sumir, cada linha de texto se transforma numa barra da própria
   cor da tinta: continua sinalizando que ali há algo escrito.

   O truque está em -webkit-text-fill-color: ele apaga só o desenho das
   letras e deixa a propriedade "color" intacta, de modo que currentColor
   ainda devolve a tinta certa para pintar a barra. Isso faz a barra herdar
   sozinha qualquer cor que você tenha definido para o cartão, sem o tema
   precisar saber qual é.

   Como o fundo de um elemento em linha acompanha o texto, a barra tem
   exatamente o comprimento de cada linha — inclusive a última, mais curta. */
.barra{
  /* Cada linha ganha seu próprio fundo, em vez de um só esticado por todas.
     É o que faz a barra ter o comprimento exato de cada linha. */
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;

  /* A barra é um traço desenhado no meio da linha, e não o bloco inteiro da
     altura da letra: fica fina e discreta. A altura anima de zero até a
     medida final, o que dá a transição suave nos dois sentidos — a cor de
     um fundo não pode ser animada, mas a altura dele pode. */
  background-image:linear-gradient(var(--tom-barra), var(--tom-barra));
  background-repeat:no-repeat;
  background-position:0 center;
  background-size:100% 0;
  border-radius:1px;      /* fixo também: em "em" variaria com a letra */

  /* Os dois números que governam a aparência da barra.

     A espessura NÃO é declarada aqui: o tema a escreve no plano a cada
     mudança de zoom, calculada para dar sempre o mesmo número inteiro de
     pixels na tela. Declará-la nesta regra faria a peça sobrepor o valor
     do plano, e a espessura voltaria a variar. O 5px abaixo é só a reserva
     para o caso de o script não rodar. */
  --tom-barra:color-mix(in srgb, currentColor 78%, transparent);

  -webkit-text-fill-color:currentColor;
  transition:background-size .3s ease, -webkit-text-fill-color .28s ease,
             text-decoration-color .28s ease;
}
/* o sublinhado dos links também some: uma barra sublinhada não é uma barra */
.barra *{transition:text-decoration-color .28s ease}

#world.lod-barras .barra{
  background-size:100% var(--altura-barra, 5px);
  -webkit-text-fill-color:transparent;
}
#world.lod-barras .barra,
#world.lod-barras .barra *{text-decoration-color:transparent}

/* ---------- todas as barras iguais ----------
   Estas regras existem para o texto e fazem sentido nele: a citação é um
   pouco mais clara, a segunda linha da legenda é mais suave. Como barra,
   porém, virariam manchas de tons diferentes espalhadas pela prancha. No
   modo barra, tudo volta à tinta cheia. */
#world.lod-barras .corpo-texto blockquote{opacity:1}
#world.lod-barras .corpo-texto blockquote{border-left-color:transparent}
#world.lod-barras .peca figcaption span{color:inherit}

/* navegadores sem color-mix: barra na tinta cheia, um pouco mais fina */
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .barra{--tom-barra:currentColor}
}
/* sem -webkit-text-fill-color: o texto some, como antes */
@supports not (-webkit-text-fill-color: currentColor){
  #world.lod-barras .barra{color:transparent}
}

/* reclamo: a marca de borda que anuncia a próxima seção */
.reclamo{
  position:absolute;font-family:var(--mono);font-size:14px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta-solta-suave);background:none;border:none;
  border-top:1px solid currentColor;padding:9px 0 0;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:11px;transition:color .15s,border-color .15s,opacity .18s;
}
.reclamo:hover{color:var(--coral);border-top-color:var(--coral)}
.reclamo:focus-visible{outline:2px solid var(--coral);outline-offset:4px}
.reclamo .seta{font-size:17px;line-height:1;display:inline-block}
/* o reclamo pertence à vista de perto, como a marca pequena: some pela
   mesma fusão, para a prancha inteira mudar de estado de uma vez só */
.reclamo{opacity:var(--op-marca, 1)}
#world.lod-far .reclamo{pointer-events:none}

/* ---------- interface ---------- */
.hud{position:fixed;z-index:10;font-family:var(--mono)}

/* ---------- recolher a interface ----------
   Ao abrir o site tudo está à vista. Depois do primeiro gesto, os controles
   e o cursor se recolhem após alguns segundos parados, e voltam ao menor
   sinal de navegação. O aviso e o leitor de medida ficam de fora: são
   mensagens de momento, e sumir com elas seria esconder resposta. */
#barra,#atalhos,#mapa{
  transition:opacity .45s ease, visibility .45s;
}
body.recolhido #barra,
body.recolhido #atalhos,
body.recolhido #mapa{
  opacity:0;visibility:hidden;
}
body.recolhido #stage,
body.recolhido #stage *{cursor:none}
/* No modo leitura o currículo é um documento: cursor de seta, como num
   leitor de PDF, e não a mão de arrastar. Os links e botões continuam com
   a mãozinha; parado ou rolando, o cursor se recolhe como o resto. */
body.modo-leitura #stage,
body.modo-leitura #stage.is-panning{cursor:default}
body.modo-leitura #stage a,
body.modo-leitura #stage button{cursor:pointer}
body.modo-leitura.recolhido #stage,
body.modo-leitura.recolhido #stage *{cursor:none}
#barra{top:16px;right:16px;display:flex;gap:4px;align-items:center;background:var(--cream);border:1px solid var(--rule);padding:5px}
#barra button{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink);background:none;border:none;padding:8px 10px;cursor:pointer;line-height:1}
#barra button:hover{background:var(--rule)}
#barra button:focus-visible{outline:2px solid var(--coral);outline-offset:1px}
#barra button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
#zoomval{min-width:52px;text-align:center;font-size:12px;color:var(--ink-soft)}
#barra .sep{width:1px;height:20px;background:var(--rule);margin:0 3px}
#ordenar{display:none}
body.editando #ordenar{display:contents}
.ferramentas-do-dono{display:contents}
.ferramentas-do-dono[hidden]{display:none}

/* A largura reserva o canto do mapa: com muitas categorias a barra rola na
   horizontal em vez de passar por cima dele. */
#atalhos{bottom:16px;left:16px;display:flex;gap:5px;max-width:calc(100vw - 250px);overflow-x:auto;scrollbar-width:none;padding:2px}
body:not(.com-mapa) #atalhos{max-width:calc(100vw - 40px)}
#atalhos::-webkit-scrollbar{display:none}
#atalhos button{white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.06em;background:var(--cream);color:var(--ink);border:1px solid var(--rule);padding:9px 14px;cursor:pointer}
#atalhos button:hover{border-color:var(--ink)}
#atalhos button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}

#mapa{bottom:16px;right:16px;width:186px;height:132px;background:var(--cream);border:1px solid var(--rule);cursor:pointer;overflow:hidden}
#mapa.oculto{display:none}
#mapa .m-node{position:absolute;background:var(--rule)}
#mapa .m-view{position:absolute;border:1.5px solid var(--coral)}

#aviso{top:58px;right:16px;font-size:12px;color:var(--cream);background:var(--ink);padding:9px 12px;opacity:0;transition:opacity .25s ease;pointer-events:none;max-width:280px;line-height:1.5}
#aviso.on{opacity:1}

@media (max-width:700px){
  #mapa{display:none}
  #atalhos{max-width:calc(100vw - 32px)}
  .hero h1{font-size:15vw}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}

/* ==========================================================================
   A obra aberta
========================================================================== */
.folha-fundo{min-height:100%;padding:5vh 20px 12vh;background:var(--paper)}
.folha{
  max-width:720px;margin:0 auto;background:var(--cream);padding:clamp(32px,6vw,82px);
}
.folha-volta a{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-solta-suave);text-decoration:none}
.folha-volta a:hover{color:var(--coral)}
.folha-cabeca{margin:44px 0 40px;text-align:center}
.folha-etiqueta{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--coral);margin:0 0 18px}
.folha-cabeca h1{font-family:var(--display);font-weight:var(--peso-titulo);font-size:clamp(38px,6vw,60px);line-height:1.02;margin:0;letter-spacing:-.02em}
.folha-linha{font-style:italic;font-size:21px;line-height:1.45;color:var(--ink-soft);margin:20px 0 0}
.folha-data{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink-soft);margin:22px 0 0}
.folha-imagem{margin:0 0 40px}
.folha-imagem img{width:100%;height:auto;display:block}
.folha-imagem figcaption{font-style:italic;font-size:15px;color:var(--ink-soft);margin-top:10px;text-align:center}

.folha-corpo{font-size:20px;line-height:1.65}
.folha-corpo p{margin:0 0 1.3em}
.folha-corpo h2,.folha-corpo h3{font-family:var(--display);line-height:1.15;margin:1.8em 0 .6em}
.folha-corpo h2{font-size:32px}
.folha-corpo h3{font-size:25px}
.folha-corpo a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:3px}
.folha-corpo blockquote{margin:1.6em 0;padding-left:22px;border-left:2px solid var(--coral);font-style:italic}
.folha-corpo img,.folha-corpo iframe{max-width:100%;height:auto;display:block;margin:1.6em auto}
.folha-corpo figcaption{font-style:italic;font-size:15px;color:var(--ink-soft);text-align:center;margin-top:8px}
.folha-corpo hr{border:none;border-top:1px solid var(--rule);margin:2.4em 0}
.folha-etiquetas{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:56px 0 0;padding-top:24px;border-top:1px solid var(--rule)}
.folha-etiquetas a{color:var(--ink-soft);text-decoration:none}

.folha-outras{max-width:720px;margin:60px auto 0}
.folha-outras h2{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin:0 0 20px;font-weight:400}
.folha-outras ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
.folha-outras a{display:block;text-decoration:none;color:var(--ink);background:var(--cream);padding:14px}
.folha-outras img{width:100%;height:130px;object-fit:cover;display:block;margin-bottom:12px}
.folha-outras b{font-family:var(--display);font-size:19px;font-weight:var(--peso-meio);display:block;line-height:1.15}
.folha-outras span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-soft)}
.folha-erro{text-align:center}
.folha-erro h1{font-family:var(--display);font-size:90px;margin:0}


/* ==========================================================================
   Cartões do editor do Ghost dentro da obra aberta
========================================================================== */
.folha-corpo .kg-card{margin:2em 0}
.folha-corpo .kg-width-wide{width:min(120%,calc(100vw - 60px));margin-left:50%;transform:translateX(-50%)}
.folha-corpo .kg-width-full{width:calc(100vw - 40px);margin-left:50%;transform:translateX(-50%)}
.folha-corpo .kg-width-wide img,
.folha-corpo .kg-width-full img{width:100%;height:auto}
.folha-corpo .kg-image-card figcaption,
.folha-corpo .kg-embed-card figcaption{font-style:italic;font-size:15px;color:var(--ink-soft);text-align:center;margin-top:10px}
.folha-corpo .kg-gallery-container{display:flex;flex-direction:column}
.folha-corpo .kg-gallery-row{display:flex;gap:10px;margin-bottom:10px}
.folha-corpo .kg-gallery-image img{width:100%;height:100%;object-fit:cover;display:block}
.folha-corpo .kg-bookmark-card a{display:flex;gap:20px;text-decoration:none;border:1px solid var(--rule);padding:20px}
.folha-corpo .kg-bookmark-title{font-family:var(--display);font-size:20px}
.folha-corpo .kg-bookmark-description{font-size:16px;color:var(--ink-soft)}
.folha-corpo .kg-bookmark-thumbnail img{width:150px;height:100%;object-fit:cover}
.folha-corpo .kg-callout-card{display:flex;gap:14px;padding:20px 24px;background:color-mix(in srgb, var(--coral) 12%, var(--cream))}
.folha-corpo .kg-toggle-card{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0}
.folha-corpo .kg-button-card a{display:inline-block;background:var(--ink);color:var(--cream);padding:14px 26px;text-decoration:none;font-family:var(--mono);font-size:13px;letter-spacing:.1em}

/* ---------- tarjas: dados pessoais fora do site ----------
   No lugar de cada dado que não deve ficar público (data de nascimento,
   rua, telefones, CPF, passaporte, nomes dos pais, a assinatura, os QR de
   verificação) há uma tarja. Nenhum dado real fica por trás: o texto foi
   tirado do HTML, não escondido. A tarja só diz "auf Anfrage" — a versão
   completa vai por e-mail, a quem pedir.

   A largura vem de --w, em em, para a tarja ocupar mais ou menos o lugar
   que o dado ocupava e a linha não mudar de desenho. As regras são fortes
   (.curriculo .tarja.tarja) porque vivem dentro de documentos que têm a
   sua própria tipografia. */
.curriculo .tarja.tarja{
  /* inline-block com overflow escondido: a linha de base da caixa passa a
     ser a borda de baixo dela (e não a do texto miúdo de dentro). Assim o
     vertical-align conta a partir da borda, e a caixa fica centrada na
     altura das maiúsculas do texto em volta: 1,08em de altura, borda de
     baixo 0,19em abaixo da linha de base → meio a 0,35em, o meio da
     maiúscula da Futura. */
  display:inline-block; overflow:hidden;
  box-sizing:border-box; min-width:var(--w, 6em); height:1.08em;
  margin:0; padding:0 .6em; vertical-align:-.19em;
  background:#16181a; color:#efeadf; border-radius:.08em;
  white-space:nowrap; font-style:normal; text-decoration:none; text-align:left;
  -webkit-text-stroke:0; letter-spacing:0; text-indent:0;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.curriculo .tarja.tarja > span{
  display:block; font-family:"Futura PT","Jost",system-ui,sans-serif;
  font-weight:500; font-size:.5em; letter-spacing:.16em;
  text-transform:uppercase; color:inherit; text-align:left;
  /* 2,16 × 0,5em = 1,08em: a linha ocupa a caixa toda e o texto fica no
     meio dela (medido: a mesma folga em cima e embaixo) */
  line-height:2.16; padding-top:.04em;
}
/* em bloco: no lugar da assinatura e dos QR, ocupando a caixa inteira */
.curriculo .tarja.tarja-bloco{
  display:flex; align-items:center; justify-content:center; overflow:visible;
  height:auto; min-width:0; padding:0; vertical-align:top; text-align:center;
  font-size:12px;
}
.curriculo .tarja.tarja-bloco > span{font-size:.62em; line-height:1.5; letter-spacing:.18em; padding-top:0; text-align:center}
/* No telc e no diploma brasileiro o "auf Anfrage" fica no centro da
   tarja; no currículo (e no campo cinza do Zertifikatszeugnis), à
   esquerda, como o texto em volta. */
.curriculo .cert .tarja.tarja:not(.tarja-bloco),
.curriculo .ags .tarja.tarja:not(.tarja-bloco){text-align:center; padding:0 .45em}
.curriculo .cert .tarja.tarja:not(.tarja-bloco) > span,
.curriculo .ags .tarja.tarja:not(.tarja-bloco) > span{text-align:center; margin-right:-.16em}

/* Na página do Zertifikatszeugnis a tarja mora dentro da faixa cinza do
   campo: em bloco, com a mesma folga em cima, embaixo e à esquerda
   (faixa de 4,82mm, tarja de 3,62mm → 0,6mm de cada lado). */
.curriculo .pag3.p3-page > div.p3-tarja{line-height:0}
.curriculo .pag3 .p3-tarja .tarja.tarja{display:block; vertical-align:0}

/* Onde havia um QR, a tarja diz que havia: "QR-Code" numa linha à parte,
   um pouco afastada do "auf Anfrage". O conjunto continua centrado na
   caixa, na horizontal e na vertical. */
.curriculo .tarja.tarja-bloco .tarja-rotulo{display:block; margin-top:1.1em; font-size:1em; letter-spacing:inherit}

/* cada bloco guarda a caixa exata do que substitui */
.curriculo .cert #cert-qr.tarja.tarja-bloco{display:flex; width:92px; height:92px; margin:0 0 0 auto}
.curriculo .ags .a-qr.tarja.tarja-bloco{display:flex; width:56.7pt; height:56.7pt; margin:23.5pt 0 0 -3px; font-size:10px}
.curriculo .pag3 .p3-sig.tarja.tarja-bloco{display:flex; height:9mm; top:277.9mm}