/* ============================================================================
   JORNADA · Isabella Victória
   O documento da jornada: abertura, números, linha do tempo e o diagrama de
   convergência. Cabeçalho, botão, rodapé e a entrada de bloco vivem em
   base.css, divididos com a home e a página Sobre.
   ========================================================================= */

/* ============================ PÁGINA JORNADA ============================
   Documento em uma coluna: abertura, números, linha do tempo. Hierarquia por
   fio, tipografia e espaço — nenhum bloco escuro, nenhum fundo sólido. */
[data-jn-page]{--motion-enter:240ms}
[data-jn-fio]{height:1px;background:var(--tinta-14)}

/* MANCHA · a única da página, na abertura. As regras são as da mancha da hero —
   até 30% da largura, desfoque alto, opacidade baixa, atrás de todo o texto —,
   mas em âmbar só, sem o miolo de ferrugem, e parada: a página não ganha
   movimento. Sai pela direita da coluna; o papel corta o que passa da janela. */
[data-jn-abertura]{position:relative}
[data-jn-abertura] > [data-jn-abre]{position:relative;z-index:2}
[data-jn-mancha],[data-jn-mancha-grao]{position:absolute;top:-24px;left:78%;width:30%;aspect-ratio:1 / 0.86;pointer-events:none}
[data-jn-mancha]{z-index:0;filter:blur(24px);opacity:.5}
[data-jn-mancha-grao]{z-index:1;background-image:var(--grain-papel);background-size:var(--grain-size);opacity:.32;-webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 46%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(closest-side at 50% 50%,#000 46%,rgba(0,0,0,0) 100%)}
[data-jn-nuvem]{position:absolute}
[data-jn-nuvem="a"]{inset:0;border-radius:56% 44% 47% 53% / 50% 46% 54% 50%;background:radial-gradient(62% 62% at 40% 34%,rgba(245,160,60,.62) 0%,rgba(245,160,60,.44) 50%,rgba(245,160,60,0) 100%)}
[data-jn-nuvem="b"]{inset:8% 6% 10% 12%;border-radius:48% 52% 54% 46% / 52% 48% 52% 48%;background:radial-gradient(58% 58% at 62% 62%,#F5A03C 0%,rgba(245,160,60,.72) 46%,rgba(245,160,60,0) 92%)}
[data-jn-t1]{margin:0;font:600 var(--size-t1)/var(--lh-t1) var(--font-sans);letter-spacing:var(--track-t1)}
[data-jn-kicker]{margin:10px 0 0;font:400 var(--size-caption)/var(--lh-caption) var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
[data-jn-lead]{margin:var(--space-4) 0 0;max-width:none;font:400 20px/1.6 var(--font-sans);color:var(--tinta);text-wrap:pretty}

/* NÚMEROS · quatro colunas separadas por fio vertical, sem card e sem fundo.
   O índice vai no atributo, não em nth-child: no protótipo o invólucro do
   Reveal ficava entre a grade e a célula e nth-child media o invólucro. */
[data-jn-nums]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--space-4)}
[data-jn-num]{display:flex;flex-direction:column;gap:8px;padding-right:24px}
[data-jn-num="2"],[data-jn-num="3"]{border-left:1px solid var(--tinta-14);padding-left:24px}
[data-jn-num-v]{font:600 48px/1 var(--font-sans);color:var(--tinta)}
/* Quando o valor traz algarismo e unidade, o algarismo fica no corpo cheio e a
   unidade cai um degrau, ainda em peso e tinta cheios, alinhados pela base. */
[data-jn-num-v]:has([data-jn-num-n]){font-size:26px;line-height:1.25}
[data-jn-num-n]{display:inline-block;white-space:nowrap;font-size:48px;line-height:1}
/* O ano da primeira célula fica em ferrugem: é onde a contagem começa. */
[data-jn-num="1"] [data-jn-num-v]{color:var(--ferrugem)}
[data-jn-num-r]{font:400 var(--size-caption)/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tinta-62)}

/* ANO · um recuo curto à esquerda de cada bloco guarda a linha do tempo
   implícita da página: um fio vertical corre por todos os blocos e cada título
   tem o seu ponto. O recuo é só o bastante para o fio respirar, sem roubar
   medida do texto. --pt é o respiro acima do título em cada bloco, --cab é o
   espaço que o numeral ocupa acima do título, e --meio é o centro da primeira
   linha do título. */
[data-jn-ano]{position:relative;padding-left:48px;--pt:0px;--cab:72px;--meio:calc(var(--cab) + 15.6px);--eixo:12px}
[data-jn-ano="2"],[data-jn-ano="3"],[data-jn-ano="4"],[data-jn-ano="5"],[data-jn-ano="6"]{margin-top:80px;padding-top:80px;border-top:1px solid var(--tinta-14);--pt:80px}
/* O fio de cada bloco sobe 80px, cobrindo o vão entre ele e o anterior, e desce
   até o fim; o primeiro começa no seu ponto e o último termina no seu. */
[data-jn-ano]::before{content:"";position:absolute;left:var(--eixo);width:1px;top:-80px;bottom:0;background:rgba(23,19,15,.12)}
[data-jn-ano="1"]::before{top:var(--meio)}
[data-jn-ano="6"]::before{bottom:auto;height:calc(80px + var(--pt) + var(--meio))}
[data-jn-ano]::after{content:"";position:absolute;left:calc(var(--eixo) - 2.5px);top:calc(var(--pt) + var(--meio) - 3px);width:6px;height:6px;background:var(--tinta)}
[data-jn-ano="6"]::after{background:var(--ferrugem)}
/* NUMERAL · Sans 96px em tinta a 0,05, atrás do título e não ao lado dele: o
   título passa por cima, legível, e o ano deixa de aparecer duas vezes na mesma
   linha. O ano segue no h2 para leitor de tela. */
/* O numeral sobe acima do título e só o pé dos algarismos passa por trás dele;
   o parágrafo fica livre. */
[data-jn-cab]{position:relative;padding-top:var(--cab)}
[data-jn-num-ano]{position:absolute;left:-6px;top:0;z-index:0;font:600 96px/1 var(--font-sans);letter-spacing:-.02em;color:rgba(23,19,15,.05);white-space:nowrap;pointer-events:none}
/* O ano corrente é o único numeral em ferrugem, na mesma presença dos outros. */
[data-jn-agora]{color:rgba(163,66,4,.06)}
[data-jn-ano-t]{position:relative;z-index:1;margin:0;font:500 24px/1.3 var(--font-sans);color:var(--tinta)}
[data-jn-p]{margin:16px 0 0;max-width:640px;font:400 var(--size-body)/1.65 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-jn-nota]{margin:16px 0 0;font:400 var(--size-caption)/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}

/* Ano com imagem: texto em 58%, figura em 42%, alinhados ao topo. A figura não
   estica para acompanhar a altura do texto: o recorte tem proporção fixa em
   qualquer largura, e as imagens nunca mudam de corte. */
[data-jn-dupla]{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);column-gap:var(--space-5);align-items:start}
[data-jn-dupla] [data-jn-p]{max-width:none}
/* Em 2022 o título é longo: com texto e figura lado a lado, ele fica na medida
   da coluna do texto e quebra em duas linhas. */
@media (min-width:1001px){
[data-jn-ano="3"] [data-jn-ano-t]{max-width:calc((100% - var(--space-5)) * 58 / 100)}
}
/* Ano sem figura: nada divide a fileira, então texto e destaque tomam tudo. */
[data-jn-ano="1"] [data-jn-p],[data-jn-ano="1"] [data-jn-dest],[data-jn-ano="4"] [data-jn-p],[data-jn-ano="4"] [data-jn-dest]{max-width:none}
[data-jn-fig-col]{position:relative;padding-top:22px}

/* FIGURA · contorno de 1px sem preenchimento, 12px de papel entre o fio e a
   imagem, marcas de canto por fora e rótulo em Mono abaixo. */
[data-jn-fig]{position:relative;border:1px solid var(--tinta-30);padding:12px}
[data-jn-fig-a]{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4 / 3;overflow:hidden}
[data-jn-fig="34"] [data-jn-fig-a]{aspect-ratio:3 / 4}
[data-jn-fig-a] img{display:block;width:100%;height:100%;object-fit:cover}
[data-jn-colagem]{position:absolute;inset:0}
[data-jn-chapa]{position:absolute;display:flex;align-items:center;justify-content:center;border:1px solid var(--tinta-30);background:var(--papel);overflow:hidden}
[data-jn-chapa="1"]{left:0;top:0;width:62%;height:56%;z-index:1}
[data-jn-chapa="2"]{right:0;top:20%;width:52%;height:46%;z-index:2}
[data-jn-chapa="3"]{left:10%;bottom:0;width:58%;height:42%;z-index:3}
[data-jn-colagem="b"] [data-jn-chapa="1"]{left:auto;right:0;top:0;width:66%;height:50%}
[data-jn-colagem="b"] [data-jn-chapa="2"]{right:auto;left:0;top:32%;width:48%;height:44%}
[data-jn-colagem="b"] [data-jn-chapa="3"]{left:auto;right:6%;bottom:0;width:62%;height:40%}
[data-jn-chapa] img{width:100%;height:100%;object-fit:cover}
[data-jn-chapa] [data-jn-fig-nota]{max-width:88%;font-size:9px}
[data-jn-fig-nota]{max-width:80%;font:400 10px/1.5 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:rgba(23,19,15,.45);text-align:center}
[data-jn-fc]{position:absolute;width:10px;height:10px;pointer-events:none}
[data-jn-fc="tl"]{left:-10px;top:-10px;border-left:1px solid rgba(23,19,15,.45);border-top:1px solid rgba(23,19,15,.45)}
[data-jn-fc="tr"]{right:-10px;top:-10px;border-right:1px solid rgba(23,19,15,.45);border-top:1px solid rgba(23,19,15,.45)}
[data-jn-fc="bl"]{left:-10px;bottom:-10px;border-left:1px solid rgba(23,19,15,.45);border-bottom:1px solid rgba(23,19,15,.45)}
[data-jn-fc="br"]{right:-10px;bottom:-10px;border-right:1px solid rgba(23,19,15,.45);border-bottom:1px solid rgba(23,19,15,.45)}
[data-jn-fig-rot]{margin:12px 0 0;font:400 10px/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:rgba(23,19,15,.45)}

/* DESTAQUE · mesma construção da figura: contorno de 1px, marcas de canto e
   nenhum preenchimento. */
/* A única superfície da página: âmbar a 0,10 com contorno em âmbar a 0,35, o
   que o separa do texto corrido. Marcas de canto e rótulo seguem como estavam. */
[data-jn-dest]{position:relative;max-width:560px;margin-top:32px;border:1px solid rgba(245,160,60,.35);background:rgba(245,160,60,.10);padding:24px}
[data-jn-dupla] [data-jn-dest]{max-width:none}
[data-jn-c]{position:absolute;width:10px;height:10px;pointer-events:none}
[data-jn-c="tl"]{left:-10px;top:-10px;border-left:1px solid rgba(23,19,15,.45);border-top:1px solid rgba(23,19,15,.45)}
[data-jn-c="tr"]{right:-10px;top:-10px;border-right:1px solid rgba(23,19,15,.45);border-top:1px solid rgba(23,19,15,.45)}
[data-jn-c="bl"]{left:-10px;bottom:-10px;border-left:1px solid rgba(23,19,15,.45);border-bottom:1px solid rgba(23,19,15,.45)}
[data-jn-c="br"]{right:-10px;bottom:-10px;border-right:1px solid rgba(23,19,15,.45);border-bottom:1px solid rgba(23,19,15,.45)}
[data-jn-dest-lb]{font:400 10px/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ferrugem)}
[data-jn-dest-t]{margin:10px 0 0;font:500 16px/1.4 var(--font-sans);color:var(--tinta)}
[data-jn-dest-p]{margin:8px 0 0;font:400 15px/1.6 var(--font-sans);color:rgba(23,19,15,.85)}

/* CONVERGÊNCIA · três origens à esquerda, um tronco no meio e um destino à
   direita. As três caixas dividem a altura em trilhas iguais, então o centro de
   cada uma é calculável: com r = (100% - 64px)/3, o centro da primeira fica em
   r/2 e o da última em 100% - r/2. É desse cálculo que saem os fios. */
[data-jn-lb]{margin:0;font:400 var(--size-caption)/var(--lh-caption) var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tinta-72)}
[data-conv]{position:relative;display:grid;grid-template-columns:42% minmax(0,1fr) 42%;min-height:clamp(320px,34vw,400px);margin-top:24px;background-image:repeating-linear-gradient(to right,rgba(23,19,15,.06) 0 1px,transparent 1px 24px),repeating-linear-gradient(to bottom,rgba(23,19,15,.06) 0 1px,transparent 1px 24px);background-position:0 0}
[data-conv-orig]{display:grid;grid-template-rows:repeat(3,1fr);gap:32px}
[data-conv-cx]{position:relative;border:1px solid var(--tinta-30);background:var(--papel);padding:20px}
[data-conv-ano]{font:400 10px/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ferrugem)}
[data-conv-t]{margin:8px 0 0;font:500 16px/1.35 var(--font-sans);color:var(--tinta)}
[data-conv-d]{margin:6px 0 0;font:400 14px/1.55 var(--font-sans);color:rgba(23,19,15,.85)}
[data-conv-meio]{position:relative}
[data-conv-fio]{position:absolute;background:var(--tinta)}
[data-conv-fio="1"]{left:0;width:55%;height:1px;top:calc((100% - 64px) / 6);transform-origin:left center}
[data-conv-fio="3"]{left:0;width:55%;height:1px;bottom:calc((100% - 64px) / 6);transform-origin:left center}
[data-conv-fio="2"]{left:0;width:100%;height:1px;top:50%;transform-origin:left center}
[data-conv-fio="t"]{left:55%;width:1px;top:calc((100% - 64px) / 6);bottom:calc((100% - 64px) / 6);transform-origin:center}
[data-conv-dest]{align-self:center;border:1px solid var(--ferrugem);background:rgba(245,160,60,.12);padding:24px}
[data-conv-dest-lb]{font:400 10px/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ferrugem)}
[data-conv-dest-t]{margin:8px 0 0;font:500 20px/1.3 var(--font-sans);color:var(--tinta)}
[data-conv-dest-d]{margin:8px 0 0;font:400 15px/1.6 var(--font-sans);color:var(--tinta)}
/* O estado final é o padrão do HTML: a lógica só esconde depois de declarar que
   o JS está de pé, então sem JS o diagrama aparece inteiro e parado. */
@keyframes convEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes convFioH{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes convFioV{from{transform:scaleY(0)}to{transform:scaleY(1)}}
[data-conv][data-anim] [data-conv-cx],[data-conv][data-anim] [data-conv-dest]{opacity:0}
[data-conv][data-anim] [data-conv-fio="1"],[data-conv][data-anim] [data-conv-fio="2"],[data-conv][data-anim] [data-conv-fio="3"]{transform:scaleX(0)}
[data-conv][data-anim] [data-conv-fio="t"]{transform:scaleY(0)}
[data-conv][data-anim="correndo"] [data-conv-cx]{animation:convEntra 240ms var(--ease-out) var(--conv-delay,0ms) both}
[data-conv][data-anim="correndo"] [data-conv-dest]{animation:convEntra 240ms var(--ease-out) 1000ms both}
[data-conv][data-anim="correndo"] [data-conv-fio="1"]{animation:convFioH 400ms var(--ease-draw) 300ms both}
[data-conv][data-anim="correndo"] [data-conv-fio="3"]{animation:convFioH 400ms var(--ease-draw) 420ms both}
[data-conv][data-anim="correndo"] [data-conv-fio="t"]{animation:convFioV 400ms var(--ease-draw) 540ms both}
[data-conv][data-anim="correndo"] [data-conv-fio="2"]{animation:convFioH 400ms var(--ease-draw) 660ms both}
@media (prefers-reduced-motion:reduce){
[data-conv][data-anim] [data-conv-cx],[data-conv][data-anim] [data-conv-dest]{opacity:1;animation:none}
[data-conv][data-anim] [data-conv-fio]{transform:none;animation:none}
}

[data-jn-cta]{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:48px}
[data-jn-cta] [data-btn]{flex:0 0 auto}
[data-jn-cta] [data-btn] span{white-space:nowrap}

@media (max-width:1000px){
[data-jn-dupla]{grid-template-columns:minmax(0,1fr);row-gap:var(--space-4)}
[data-jn-fig-col]{padding-top:0;max-width:520px}
}
@media (max-width:767px){
/* Duas por fileira, sem vão entre as fileiras: o respiro fica dentro das
   células, e o fio vertical encontra o horizontal numa cruz contínua. */
/* Em coluna única: com algarismo e unidade na mesma linha, meia tela não
   comporta o valor sem quebrar no meio. O fio vertical vira horizontal. */
[data-jn-nums]{grid-template-columns:minmax(0,1fr)}
[data-jn-num]{padding-right:0}
[data-jn-num="1"],[data-jn-num="2"]{padding-bottom:32px}
[data-jn-num="2"],[data-jn-num="3"]{border-left:0;padding-left:0;border-top:1px solid var(--tinta-14);padding-top:32px}
/* Os dois recuos de 32px do cartão comiam a medida do texto. */
[data-jn-fig]{padding:var(--space-2)}
}
@media (max-width:899px){
[data-conv]{grid-template-columns:minmax(0,1fr);min-height:0;background-image:none}
[data-conv-orig]{grid-template-rows:auto;gap:32px}
[data-conv-cx]:not(:last-child)::after,[data-conv-dest]::before{content:"";position:absolute;left:calc(50% - .5px);width:1px;height:32px;background:var(--tinta)}
[data-conv-cx]:not(:last-child)::after{top:100%}
[data-conv-meio]{display:none}
[data-conv-dest]{position:relative;margin-top:32px}
[data-conv-dest]::before{bottom:100%}
/* Em coluna estreita não há calha: some o fio com os pontos, o numeral continua
   atrás do título, e o destaque ocupa a largura inteira. */
[data-jn-ano]{padding-left:0}
[data-jn-ano]::before,[data-jn-ano]::after{display:none}
[data-jn-num-ano]{left:-4px}
[data-jn-dest]{max-width:none}
}
@media (max-width:599px){
[data-jn-cta] [data-btn]{flex:1 1 100%;width:100%;min-width:0}
}