/* ============================================================================
   CASE · Isabella Victória
   O documento de um case: abertura, capa, ficha, seções numeradas e chamada
   final. Cabeçalho, voltar, botão, tags, rodapé e a entrada de bloco vivem em
   base.css. Abertura e números seguem a página Jornada.
   ========================================================================= */

/* PÁGINA · hierarquia por fio, tipografia e espaço. A prosa fica numa medida
   de leitura, e as seções levam o número e o título numa coluna à esquerda. */
[data-cs-page]{--motion-enter:700ms;--medida:800px;--lateral:200px;--lat-vao:var(--space-6)}
/* Em tela média a coluna lateral e o vão encolhem junto com a página, para o
   texto não ficar estreito ao lado dos títulos e das notas. */
@media (min-width:1000px) and (max-width:1299px){[data-cs-page]{--lateral:176px;--lat-vao:40px}}
@media (min-width:1300px) and (max-width:1439px){[data-cs-page]{--lateral:176px;--lat-vao:48px}}

/* ABERTURA · o texto segue o desenho da Jornada: voltar, título, metadado em
   Mono e o resumo do case. Em tela larga ele divide a
   fileira com o mockup, e o mockup sangra pela borda direita da janela: a
   margem negativa soma o respiro lateral de [data-medida] e a sobra da tela
   além da largura máxima. O papel corta o que passa (overflow-x:clip). */
[data-cs-abertura]{margin-top:var(--space-5)}
[data-cs-t1]{margin:0;font:600 clamp(30px,2.9vw,42px)/1.12 var(--font-sans);letter-spacing:var(--track-t1);text-wrap:balance}
[data-cs-kicker]{margin:12px 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-cs-intro]{margin:var(--space-4) 0 0;max-width:var(--medida);font:400 var(--size-body)/1.65 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-cs-heroi-img]{margin-top:var(--space-5)}
/* O mockup entra deslizando 24px da direita, mais devagar que o texto e logo
   depois dele. */
.iv-motion [data-cs-heroi-img][data-reveal]{transform:translateX(24px);transition:opacity 1000ms var(--ease-out) 400ms,transform 1000ms var(--ease-out) 400ms}
.iv-motion [data-cs-heroi-img][data-reveal].dentro{transform:none}
[data-cs-heroi-img] img{display:block;width:100%;height:auto}
@media (min-width:1100px){
[data-cs-abertura]{--sangria:calc((100vw - min(100vw, 1240px + 2 * var(--num-gutter))) / 2 + clamp(20px,5.5vw,72px) + var(--num-gutter));display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);column-gap:var(--space-6);align-items:start}
/* A janela do mockup começa na altura do título, abaixo do voltar. */
[data-cs-heroi-img]{margin-top:68px}
}
/* O mockup não passa de 600px: é o tamanho que equilibra com o bloco de texto.
   Até 1599px o recortado encosta na borda direita da janela; se sobra espaço,
   o vão cresce do lado do texto, não a imagem. */
@media (min-width:1100px) and (max-width:1599px){
[data-cs-heroi-img]{margin-right:calc(-1 * var(--sangria))}
[data-cs-heroi-img] img{max-width:600px;margin-left:auto}
}
/* Acima disso a sangria seria grande demais: entra o mockup inteiro, com os
   mesmos 600px no máximo, e ele para antes da borda da janela. */
@media (min-width:1600px){
[data-cs-heroi-img]{width:min(600px, calc(100% + var(--sangria) - 64px))}
}

/* FICHA · uma faixa só, no desenho da banda de números: fio em cima e embaixo,
   cinco células separadas por fio vertical, rótulo em Mono sobre o valor. As
   larguras seguem o tamanho de cada resposta. Abaixo, as tags e a nota de
   confidencialidade dividem a mesma linha, em corpo pequeno. */
[data-cs-ficha]{margin-top:var(--space-6)}
[data-cs-meta]{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1.35fr) minmax(0,1.35fr);margin:0;border-top:1px solid var(--tinta-14);border-bottom:1px solid var(--tinta-14)}
[data-cs-meta-i]{padding:16px 20px}
[data-cs-meta-i="1"]{padding-left:0}
[data-cs-meta-i="5"]{padding-right:0}
[data-cs-meta-i] + [data-cs-meta-i]{border-left:1px solid var(--tinta-14)}
[data-cs-meta] dt{font:400 var(--size-caption)/var(--lh-caption) var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
[data-cs-meta] dd{margin:6px 0 0;font:400 var(--size-body-sm)/1.5 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-cs-ficha-pe]{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-5);align-items:start;margin-top:var(--space-3)}
[data-cs-conf]{margin:0;max-width:680px;justify-self:end;font:400 13px/1.55 var(--font-sans);color:var(--text-muted)}
[data-cs-conf-lb]{display:flex;align-items:center;gap:6px;margin:0 0 6px;font:400 10px/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tinta)}

/* SEÇÃO · fio no topo, número em Mono e título na coluna da esquerda, texto
   na da direita. */
[data-cs-sec]{display:grid;grid-template-columns:var(--lateral) minmax(0,1fr);column-gap:var(--lat-vao);margin-top:var(--space-7);padding-top:var(--space-5);position:relative}
/* O fio do topo da seção se desenha da esquerda para a direita quando ela
   entra na tela. É um pseudo-elemento, não borda, para poder ser recortado;
   sem JS ele já está inteiro. */
[data-cs-sec]::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--tinta-14);transform-origin:left center}
[data-cs-sec][data-anim="pronto"]::before{transform:scaleX(0)}
[data-cs-sec][data-anim="correndo"]::before{transform:scaleX(1);transition:transform 1200ms var(--ease-out)}
/* O título fica na linha do primeiro parágrafo; abaixo de 1000px o número
   sobe para o respiro acima dele, sem empurrar o título para baixo. */
[data-cs-sec-h]{position:relative;align-self:start}
[data-cs-sec-n]{position:absolute;left:0;bottom:100%;margin-bottom:8px;font:400 var(--size-caption)/var(--lh-caption) var(--font-mono);letter-spacing:var(--track-label);color:var(--ferrugem)}
/* Acima de 1000px o numeral da seção vai para a calha da página, em Mono
   grande, como o das seções da home: o número pequeno em ferrugem fica só
   para as subseções (etapas e cartões). O corpo segue a conta da home: em
   28,9px o algarismo do Mono tem a altura da maiúscula do Sans em 28, então
   numeral e título começam e terminam na mesma linha. Ele fica na margem,
   a uns 30px do título: a calha inteira abriria um vão grande demais para
   esse corpo. Os 2px a menos no topo são compensação óptica: alinhados pela
   maiúscula, os algarismos pareciam baixos ao lado do título. */
@media (min-width:1001px){
[data-cs-sec-n]{left:auto;right:calc(100% + 33px);bottom:auto;top:0.9px;margin:0;font:400 28.9px/30.8px var(--font-mono);letter-spacing:0;color:var(--text-muted)}
}
[data-cs-h2]{margin:0;font:500 28px/1.2 var(--font-sans);color:var(--tinta);text-wrap:balance}
[data-cs-corpo]{min-width:0;max-width:var(--medida)}
[data-cs-p]{margin:16px 0 0;font:400 var(--size-body)/1.65 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-cs-corpo] > [data-reveal]:first-child > [data-cs-p]:first-child,[data-cs-bloco]:first-child [data-cs-h3]{margin-top:0}
[data-cs-h3]{margin:0;font:500 18px/1.4 var(--font-sans);color:var(--tinta);text-wrap:balance}
[data-cs-bloco] + [data-cs-bloco]{margin-top:var(--space-5)}
[data-cs-h3] + [data-cs-p]{margin-top:12px}
[data-cs-diag] + [data-cs-p],[data-cs-img] + [data-cs-p]{margin-top:var(--space-4)}

/* DECLARAÇÃO DO PROBLEMA · sem caixa: a frase em corpo de título, com o rótulo
   em Mono ferrugem no tamanho do número da seção, alinhado à coluna do texto. O destaque cai no trecho que
   nomeia o problema, grifado em âmbar como marca-texto na metade de baixo da
   linha. Com JS, o grifo se desenha da esquerda para a direita quando a frase
   entra na tela; sem JS, ou com movimento reduzido, ele já está inteiro. */
[data-cs-dest]{margin-top:var(--space-5)}
[data-cs-dest-lb]{font:400 var(--size-caption)/var(--lh-caption) var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ferrugem)}
[data-cs-dest-p]{margin:16px 0 0;font:500 28px/1.35 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-cs-dest-p] [data-forte]{background-image:linear-gradient(transparent 52%,rgba(245,160,60,.5) 52%,rgba(245,160,60,.5) 90%,transparent 90%);background-repeat:no-repeat;background-size:100% 100%}
[data-cs-dest][data-anim="pronto"] [data-forte]{background-size:0% 100%}
[data-cs-dest][data-anim="correndo"] [data-forte]{background-size:100% 100%;transition:background-size 1600ms var(--ease-out) 800ms}
@media (max-width:767px){[data-cs-dest-p]{font-size:22px}}
[data-cs-corpo] > [data-reveal] + [data-reveal] > [data-cs-p]:first-child,[data-cs-corpo] > [data-reveal] + [data-reveal] > [data-cs-ancora]:first-child{margin-top:var(--space-5)}
/* Do fim de um parágrafo ao subtítulo seguinte, metade disso. */
[data-cs-corpo] > [data-reveal] + [data-reveal] > [data-cs-h3]:first-child{margin-top:var(--space-3)}
[data-cs-corpo] > [data-reveal] + [data-reveal] > [data-cs-dest]:first-child{margin-top:var(--space-4)}

/* NOTA DE PENSAMENTO · comentário à margem do texto, em Mono miúdo com fio à
   esquerda, preso a um parágrafo ou a um subtítulo. Em tela estreita fica logo
   abaixo dele. Com as duas colunas
   da seção, sai para a coluna lateral, na altura do parágrafo que acompanha, e
   fica fora do fluxo: se for mais alta que o parágrafo, desce pela coluna
   lateral vazia em vez de afastar o bloco seguinte. */
[data-cs-ancora]{position:relative;margin-top:16px}
[data-cs-ancora] > [data-cs-p]{margin-top:0}
[data-cs-corpo] > [data-reveal]:first-child > [data-cs-ancora]:first-child{margin-top:0}
[data-cs-ancora]:has(> [data-cs-h3]) + [data-cs-p]{margin-top:12px}
[data-cs-pensa]{position:relative;margin:16px 0 0;padding-left:16px;font:400 12px/20px var(--font-mono);color:var(--text-muted);text-wrap:pretty}
/* O fio da nota desce de cima para baixo e o texto aparece depois dele. */
[data-cs-pensa]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--tinta-30);transform-origin:center top}
[data-cs-pensa][data-anim="pronto"]::before{transform:scaleY(0)}
[data-cs-pensa][data-anim="pronto"],[data-cs-pensa][data-anim="pronto"] [data-forte]{color:transparent}
[data-cs-pensa][data-anim="correndo"]::before{transform:scaleY(1);transition:transform 900ms var(--ease-out) 400ms}
[data-cs-pensa][data-anim="correndo"],[data-cs-pensa][data-anim="correndo"] [data-forte]{transition:color 800ms var(--ease-out) 1100ms}
@media (min-width:1000px){
[data-cs-pensa]{position:absolute;top:4px;right:calc(100% + var(--lat-vao));width:var(--lateral);margin:0}
/* Nota no primeiro parágrafo da seção: a coluna lateral ali já tem o título,
   então ela desce para baixo dele. */
[data-cs-corpo] > [data-reveal]:first-child > [data-cs-ancora]:first-child [data-cs-pensa]{top:88px}
}

/* CARTÕES · uma ideia por cartão, lado a lado, cada um numa cor da paleta de
   categorias (a mesma das tags): fundo lavado, contorno na cor cheia e o índice
   em Mono. Dois por fileira. Substituem a lista quando os itens são papéis ou partes paralelas. */
[data-cs-cartoes]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin:var(--space-3) 0 0;padding:0;list-style:none}
[data-cs-cartao]{--cat:var(--diagram-cat-ameixa);--cat-wash:var(--diagram-cat-ameixa-wash);display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--cat);background:var(--cat-wash)}
[data-cs-cartao="musgo"]{--cat:var(--diagram-cat-musgo);--cat-wash:var(--diagram-cat-musgo-wash)}
[data-cs-cartao="rosaterra"]{--cat:var(--diagram-cat-rosaterra);--cat-wash:var(--diagram-cat-rosaterra-wash)}
/* Em duas colunas; com número ímpar de cartões, o último toma a fileira inteira. */
[data-cs-cartao]:last-child:nth-child(odd){grid-column:1 / -1}
/* Em pilha: um por linha, na largura da coluna do texto, cada um com a altura
   do próprio texto. */
[data-cs-cartoes="pilha"]{grid-template-columns:minmax(0,1fr)}
[data-cs-cartao-n]{font:400 var(--size-caption)/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--cat)}
[data-cs-cartao] p{margin:0;font:400 15px/1.55 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-cs-cartoes] + [data-cs-ancora],[data-cs-cartoes] + [data-cs-p],[data-cs-cartoes] + [data-cs-mudou]{margin-top:var(--space-4)}

/* PAR EM TENSÃO · dois lados de um mesmo argumento, separados só por um fio.
   Sem caixa e sem preenchimento: a comparação acontece no espaço. */
[data-cs-par]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-4);margin:var(--space-3) 0 0}
[data-cs-par] > div + div{border-left:1px solid rgba(23,19,15,.2);padding-left:var(--space-4)}
[data-cs-par-r]{display:block;font:400 10px/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ferrugem)}
[data-cs-par] p{margin:10px 0 0;font:400 15px/1.6 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-cs-par] + [data-cs-mudou],[data-cs-par] + [data-cs-p]{margin-top:var(--space-4)}

/* CAMADAS · faixas de largura cheia empilhadas sem vão, separadas por um fio,
   da mais estável no topo à mais volátil na base. O rótulo de cada camada fica
   na calha da esquerda, em Mono. */
[data-cs-camadas]{margin:var(--space-3) 0 0;padding:0;list-style:none}
[data-cs-camadas] li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:0 var(--space-3);padding:16px 0}
[data-cs-camadas] li + li{border-top:1px solid var(--tinta-14)}
[data-cs-camadas] p{margin:0;font:400 15px/1.6 var(--font-sans);color:var(--tinta);text-wrap:pretty}
/* A dica dentro de uma camada abre na largura da faixa, para não sair da tela. */
[data-cs-camadas] li{position:relative}
[data-cs-camadas] [data-cs-dica]{position:static}
[data-cs-camadas] [data-cs-dica-txt]{left:0;right:0;width:auto;top:calc(100% + 10px)}
[data-cs-camada-r]{display:block;padding-top:3px;font:400 10px/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ferrugem)}
[data-cs-camadas] + [data-cs-mudou],[data-cs-camadas] + [data-cs-p]{margin-top:var(--space-4)}
/* O bloco de imagem abre mais que um parágrafo, porque as marcas de canto
   comem quase 10px do vão e ele é outro assunto dentro da subseção. */
[data-cs-camadas] + [data-cs-lado]{margin-top:var(--space-6)}

/* CORRESPONDÊNCIA · o que havia de um lado e o que virou do outro, com a seta
   em Mono ferrugem na calha do meio. Fio só entre as linhas: sem zebra, sem
   fio vertical e sem contorno em volta. No telefone cada linha empilha, com o
   rótulo da coluna em cima de cada lado. */
[data-cs-corr]{width:100%;margin:var(--space-3) 0 0;border-collapse:collapse;table-layout:fixed}
[data-cs-corr] th{padding:0 0 12px;text-align:left;font:400 10px/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ferrugem)}
[data-cs-corr] td{padding:14px 0;vertical-align:top;font:400 15px/1.6 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-cs-corr] tr + tr td{border-top:1px solid var(--tinta-14)}
[data-cs-corr] thead th:nth-child(2){width:32px}
[data-cs-corr] [data-cs-corr-s]{width:32px;padding-inline:0;text-align:center;color:var(--ferrugem);font:400 13px/1.6 var(--font-mono)}
[data-cs-corr] [data-cs-corr-a]{color:var(--text-body)}
[data-cs-corr-v]{display:none}
[data-cs-corr] + [data-cs-mudou],[data-cs-corr] + [data-cs-p],[data-cs-corr] + [data-cs-lado]{margin-top:var(--space-4)}

/* CORREÇÃO DE ESTRUTURA · o que estava desenhado de um lado, o que a validação
   fez dele do outro, na largura de diagrama médio. O fio do meio tem 40px de
   respiro de cada lado. À esquerda a etapa que agrupava demais aparece inteira,
   com o que ela continha listado dentro; à direita ela aparece dividida, e o
   contorno em ferrugem marca o que nasceu ali. */
[data-cs-ce]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:840px;max-width:calc(100% + 40px);margin:var(--space-6) -20px}
[data-cs-ce] > div:first-child{padding-right:40px}
[data-cs-ce] > div + div{border-left:1px solid rgba(23,19,15,.2);padding-left:40px}
[data-cs-ce-r]{display:block;margin-bottom:var(--space-3);font:400 10px/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:rgba(23,19,15,.45)}
[data-cs-ce-r="depois"]{color:var(--ferrugem)}
/* As duas colunas fecham na mesma altura: os blocos da esquerda crescem para
   acompanhar a pilha da direita, que é quem define a altura. */
[data-cs-ce] > div{display:flex;flex-direction:column}
[data-cs-ce-l]{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;flex:1 1 auto;gap:16px}
[data-cs-ce] > div:first-child [data-cs-ce-b]{flex:1 1 0}
[data-cs-ce-b]{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:56px;border:1px solid rgba(23,19,15,.35);padding:12px 14px}
[data-cs-ce-t]{font:400 15px/1.35 var(--font-sans);color:var(--tinta)}
/* Entrelinha em pixel inteiro: 11 por 1,6 dava 17,6px, e cada linha caía num
   sub-pixel diferente, o que fazia o vão parecer irregular. */
[data-cs-ce-i]{margin:0;padding:0;list-style:none;font:400 11px/18px var(--font-mono);letter-spacing:var(--track-caption);color:rgba(23,19,15,.55)}
[data-cs-ce-b="mantem"]{border-color:rgba(23,19,15,.7)}
[data-cs-ce-b="nova"]{border-color:var(--ferrugem);background:color-mix(in srgb,var(--ferrugem) 15%,var(--papel))}
[data-cs-ce-conta]{grid-column:1 / -1;margin:var(--space-3) 0 0;font:400 10px/1.5 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
[data-cs-ce] + [data-cs-p],[data-cs-ce] + [data-cs-mudou]{margin-top:0}

/* CAMADAS DE DEPENDÊNCIA · três faixas de largura cheia, empilhadas sem vão,
   da mais estável no topo à mais volátil na base. A ordem é que diz que cada
   camada se apoia na anterior. */
[data-cs-dep]{width:840px;max-width:100%;margin:var(--space-6) 0}
[data-cs-dep-l]{margin:0;padding:0;list-style:none;border:1px solid rgba(23,19,15,.55)}
[data-cs-dep-l] li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:0 24px;align-items:start;min-height:72px;padding:24px}
[data-cs-dep-l] li + li{border-top:1px solid rgba(23,19,15,.3)}
[data-cs-dep-rot]{padding-top:2px;font:400 10px/1.5 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ferrugem)}
[data-cs-dep-l] p{margin:0;font:400 14px/1.6 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-cs-dep] + [data-cs-p],[data-cs-dep] + [data-cs-mudou],[data-cs-dep] + [data-cs-fig]{margin-top:0}

@media (max-width:760px){
[data-cs-dep-l] li{grid-template-columns:minmax(0,1fr);gap:8px 0;padding:20px}
}

@media (max-width:760px){
[data-cs-ce]{grid-template-columns:minmax(0,1fr);width:auto;margin-inline:0;row-gap:var(--space-4)}
/* Empilhado não há o que acompanhar: cada bloco volta à altura do seu texto. */
[data-cs-ce] > div:first-child [data-cs-ce-b]{flex:0 0 auto}
[data-cs-ce] > div:first-child{padding-right:0}
[data-cs-ce] > div + div{border-left:0;padding-left:0;border-top:1px solid rgba(23,19,15,.2);padding-top:var(--space-4)}
}

@media (max-width:600px){
[data-cs-corr],[data-cs-corr] tbody,[data-cs-corr] tr,[data-cs-corr] td{display:block;width:auto}
[data-cs-corr] thead{display:none}
/* Empilhada, a tabela vira uma pilha de blocos com fio em volta, como o
   diagrama de camadas: sem a moldura os oito pedaços liam como oito itens
   soltos, e não como quatro pares. */
[data-cs-corr]{border:1px solid rgba(23,19,15,.55)}
[data-cs-corr] tr{padding:20px}
[data-cs-corr] tr + tr{border-top:1px solid rgba(23,19,15,.3)}
[data-cs-corr] tr td,[data-cs-corr] tr + tr td{padding:0;border:0}
[data-cs-corr] [data-cs-corr-s]{display:none}
/* Empilhado, a seta da calha vira marca do lado virado. */
[data-cs-corr] tr > td:last-child > span:last-child::before{content:"→";margin-right:8px;color:var(--ferrugem);font-family:var(--font-mono)}
/* O cabeçalho da tabela não existe aqui, então a metade de baixo se anuncia:
   um "virou" curto em ferrugem antes da seta. */
[data-cs-corr-v]{display:inline;margin-right:4px;font:400 10px/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ferrugem)}
[data-cs-corr] td + td{margin-top:10px}
}

@media (max-width:600px){
[data-cs-camadas] li{grid-template-columns:minmax(0,1fr);gap:6px 0}
}

@media (max-width:600px){
[data-cs-par]{grid-template-columns:minmax(0,1fr);gap:var(--space-3) 0}
[data-cs-par] > div + div{border-left:0;padding-left:0;border-top:1px solid rgba(23,19,15,.2);padding-top:var(--space-3)}
}
/* Os cartões entram um depois do outro, 80ms de intervalo, no gesto da
   entrada de bloco. O índice vem no atributo style de cada um. */
@keyframes cartaoEntra{from{opacity:0;transform:translateY(var(--motion-shift-sm))}to{opacity:1;transform:none}}
[data-cs-cartoes][data-anim="pronto"] [data-cs-cartao]{opacity:0}
[data-cs-cartoes][data-anim="correndo"] [data-cs-cartao]{animation:cartaoEntra var(--motion-enter) var(--ease-out) calc(200ms + var(--i, 0) * 160ms) both}
@media (max-width:767px){
[data-cs-cartoes]{grid-template-columns:minmax(0,1fr)}
}

/* NÚMEROS · quatro células separadas por fio vertical, como na Jornada, no alto
   do impacto. A seção usa a largura toda, porque os números não cabem na
   medida da prosa; a tabela abaixo volta para a medida. */
[data-cs-sec-larga] [data-cs-corpo]{max-width:none}
[data-cs-nums]{display:grid;grid-template-columns:repeat(3,minmax(min-content,1fr))}
[data-cs-num]{display:flex;flex-direction:column;gap:8px;padding-right:20px}
[data-cs-num="2"],[data-cs-num="3"]{border-left:1px solid var(--tinta-14);padding-left:20px}
/* Três degraus dentro da célula: o algarismo no corpo maior, a unidade um
   degrau abaixo mas ainda em peso cheio e em tinta, e o rótulo em Mono lá
   embaixo. A unidade quebra à vontade; só o algarismo não quebra, porque é ele
   que rola na entrada. */
[data-cs-num-v]{font:600 clamp(18px,1.4vw,22px)/1.3 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-cs-num-n]{display:inline-block;white-space:nowrap;font-size:clamp(28px,2.5vw,40px);line-height:1}
/* O ferrugem marca uma métrica só, a do design system, no algarismo e na
   unidade. Marcar as três seria não marcar nenhuma. */
[data-cs-num="3"] [data-cs-num-v]{color:var(--ferrugem)}
[data-cs-num-r]{font:400 var(--size-caption)/1.45 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tinta-62)}

@media (max-width:900px){
/* Em coluna única o fio que separava as células vira a linha entre elas. */
[data-cs-nums]{grid-template-columns:minmax(0,1fr)}
[data-cs-num]{padding-right:0}
[data-cs-num="1"],[data-cs-num="2"]{padding-bottom:32px}
[data-cs-num="2"],[data-cs-num="3"]{border-left:0;padding-left:0;border-top:1px solid var(--tinta-14);padding-top:32px}
}

/* DICA · o ponto de interrogação abre a definição de ROPA no hover, no foco
   e no toque. Caixa de papel com fio, sem sombra. */
[data-cs-dica]{position:relative;display:inline-block;margin-left:6px;vertical-align:middle}
[data-cs-dica-btn]{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:1px solid var(--tinta-30);border-radius:0;background:transparent;font:500 10px/1 var(--font-mono);color:var(--tinta);cursor:help;transition:color 160ms var(--ease-state),border-color 160ms var(--ease-state)}
[data-cs-dica-btn]::before{content:"";position:absolute;inset:-13px}
[data-cs-dica-btn]:hover,[data-cs-dica-btn]:focus-visible,[data-cs-dica][data-aberto] [data-cs-dica-btn]{color:var(--ferrugem);border-color:var(--ferrugem)}
[data-cs-dica-btn]:focus-visible{outline:2px solid var(--ferrugem);outline-offset:2px}
[data-cs-dica-txt]{position:absolute;z-index:5;left:-8px;top:calc(100% + 10px);width:240px;padding:12px;border:1px solid var(--tinta);background:var(--papel);font:400 13px/1.5 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--tinta);opacity:0;visibility:hidden;transition:opacity 160ms var(--ease-state),visibility 0s linear 160ms}
/* IMAGEM DE SUBSEÇÃO · a escala vem do assunto, nunca da vontade de preencher
   a linha: tela inteira ocupa a coluna toda e vem dentro de mockup de
   navegador; detalhe de interface sozinho fica em 55%; duas imagens do mesmo
   assunto ficam em 48% cada, com 4% de vão. Em nenhum caso o texto de dentro
   do print pode parecer maior que o texto do case. Toda imagem que não vem em
   mockup entra na moldura das fotos do Sobre: fio de 1px, respiro de 12px e
   marcas de canto por fora. A legenda em Mono acompanha a largura da imagem,
   12px abaixo, e as duas formam um bloco só. O vão de 16px embaixo, somado aos
   48px da divisa entre subseções, deixa 64px até o fio da subseção seguinte. */
[data-cs-fig]{margin:32px 0 16px;max-width:100%}
[data-cs-fig="detalhe"]{width:55%}
[data-cs-fig="par"]{display:grid;grid-template-columns:repeat(2,minmax(0,48%));justify-content:space-between;column-gap:4%}
[data-cs-fig="par"] figcaption{grid-column:1 / -1}
[data-cs-fig] img{display:block;width:100%;height:auto;border:1px solid rgba(23,19,15,.12);border-radius:6px;overflow:hidden;background:transparent}
/* Imagem que já vem em mockup de navegador assenta direto no papel: o contorno
   e o canto seriam uma moldura em cima de outra. */
[data-cs-fig] img[data-cs-mockup]{border:0;border-radius:0}
[data-cs-fig] figcaption{margin:12px 0 0;font:400 var(--size-caption)/var(--lh-caption) var(--font-mono);letter-spacing:var(--track-label);text-align:left;color:var(--text-muted);text-wrap:pretty}

@media (max-width:900px){
[data-cs-fig="detalhe"],[data-cs-fig="par"]{width:100%;display:block}
[data-cs-fig="par"] [data-cs-moldura] + [data-cs-moldura]{margin-top:var(--space-3)}
}


/* AJUSTES DA VALIDAÇÃO · pontos numerados dentro de uma etapa, no mesmo desenho
   dos valores do Sobre: número em Mono ferrugem na calha de 32px, título em
   Sans ao lado e um fio curto separando um ponto do outro. */
[data-cs-ajustes]{margin:24px 0 0;padding:0;list-style:none}
[data-cs-ajuste]{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:start}
[data-cs-ajuste] + [data-cs-ajuste]{position:relative;margin-top:28px;padding-top:28px}
[data-cs-ajuste] + [data-cs-ajuste]::before{content:"";position:absolute;top:0;left:0;width:82%;height:1px;background:rgba(23,19,15,.12)}
[data-cs-ajuste-n]{font:400 11px/23px var(--font-mono);letter-spacing:var(--track-caption);color:var(--ferrugem)}
[data-cs-ajuste-t]{margin:0;font:500 17px/1.35 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-cs-ajuste] [data-cs-p]{margin-top:12px}
[data-cs-ajustes] + [data-cs-mudou]{margin-top:var(--space-4)}
/* O diagrama também obedece à escala por assunto. */
[data-cs-diag="detalhe"]{width:55%}

/* FALA DE OUTRA PESSOA · a correção veio de quem entende do assunto, então ela
   sai do corpo do texto: fio de 1px do lado, corpo um degrau maior e nada de
   aspas desenhadas. */
/* FALA · a frase que vira o jogo: corpo maior, fio de 2px em ferrugem e recuo
   de 24px. Sem contorno, sem preenchimento e sem aspas desenhadas. */
[data-cs-fala]{margin:var(--space-4) 0 0;padding-left:24px;border-left:2px solid var(--ferrugem);font:400 20px/1.5 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-cs-fala] + [data-cs-p]{margin-top:24px}

@media (max-width:600px){
[data-cs-ajuste]{grid-template-columns:24px minmax(0,1fr)}
/* A fala precisa continuar maior que o texto corrido, senão o fio ferrugem
   vira o único sinal de que alguém está falando. */
[data-cs-fala]{margin-top:var(--space-5);font-size:18px;line-height:1.45}
[data-cs-fala] + [data-cs-p]{margin-top:var(--space-4)}
}

/* TEXTO AO LADO DA IMAGEM · numa etapa que pede isso, o "o que isso mudou"
   ocupa o espaço que sobra à direita de uma imagem de detalhe, alinhado pelo
   topo da moldura. Abaixo de 900px volta a ser um sob o outro, na mesma ordem
   de leitura de sempre: primeiro o texto, depois a imagem. */
[data-cs-cartoes] + [data-cs-lado]{margin-top:var(--space-4)}
/* Empilhado, a imagem vem antes: a conclusão é sempre a última parte da
   subseção. */
[data-cs-lado]{display:flex;flex-direction:column}
[data-cs-lado] > [data-cs-fig]{order:-1}
[data-cs-lado] > [data-cs-mudou]{margin-top:var(--space-4)}
[data-cs-lado] > [data-cs-fig]{margin-top:0}
@media (min-width:901px){
/* Moldura e nota dividem a fileira de cima e se esticam juntas, para o fio
   ferrugem da nota bater com as marcas de canto da imagem: ele sobra os mesmos
   9px em cima e embaixo que elas. Quando a nota é mais alta que a imagem, a moldura
   cresce e a imagem se centra dentro dela, em vez de a imagem crescer. A
   legenda fica na fileira de baixo, na largura da imagem. */
[data-cs-lado]{display:grid;grid-template-columns:repeat(2,minmax(0,48%));justify-content:space-between;column-gap:4%}
[data-cs-lado] > [data-cs-fig]{display:contents}
[data-cs-lado] [data-cs-moldura]{grid-column:1;grid-row:1;display:flex;align-items:center}
[data-cs-lado] figcaption{grid-column:1;grid-row:2;margin-bottom:16px}
[data-cs-lado] [data-cs-moldura] img{width:100%}
[data-cs-lado] > [data-cs-mudou]{grid-column:2;grid-row:1;margin-top:0;position:relative;border-left:0}
[data-cs-lado] > [data-cs-mudou]::before{content:"";position:absolute;left:0;top:-9px;bottom:-9px;width:1px;background:var(--ferrugem)}
}

@media (max-width:900px){
[data-cs-diag="detalhe"]{width:100%}
}

/* MOLDURA DE FOTO · a mesma do Sobre, com as marcas de canto por fora do fio. */
[data-cs-moldura]{position:relative;border:1px solid var(--tinta-30);padding:12px}
[data-cs-c]{position:absolute;width:10px;height:10px;pointer-events:none}
[data-cs-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-cs-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-cs-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-cs-c="br"]{right:-10px;bottom:-10px;border-right:1px solid rgba(23,19,15,.45);border-bottom:1px solid rgba(23,19,15,.45)}

/* TERMO COM DEFINIÇÃO · no meio de uma frase o gatilho é a própria palavra,
   com um fio pontilhado embaixo. Nada de símbolo novo no texto. */
[data-cs-dica="termo"]{margin-left:0;vertical-align:baseline}
[data-cs-dica="termo"] [data-cs-dica-btn]{display:inline;width:auto;height:auto;border:0;background:transparent;font:inherit;letter-spacing:inherit;color:inherit;text-decoration:underline dotted var(--tinta-30);text-decoration-thickness:1px;text-underline-offset:4px}
[data-cs-dica="termo"] [data-cs-dica-btn]::before{content:none}
[data-cs-dica="termo"] [data-cs-dica-btn]:hover,[data-cs-dica="termo"] [data-cs-dica-btn]:focus-visible,[data-cs-dica="termo"][data-aberto] [data-cs-dica-btn]{color:var(--ferrugem);border-color:transparent;text-decoration-color:var(--ferrugem)}
[data-cs-cartao]{position:relative}
[data-cs-cartao] [data-cs-dica]{position:static}
[data-cs-cartao]:hover,[data-cs-cartao]:focus-within{z-index:6}
[data-cs-cartao]:has([data-cs-dica][data-aberto]){z-index:6}
[data-cs-cartao] [data-cs-dica-txt]{left:0;right:0;width:auto;top:calc(100% + 10px)}
[data-cs-dica]:hover [data-cs-dica-txt],[data-cs-dica-btn]:focus-visible + [data-cs-dica-txt],[data-cs-dica][data-aberto] [data-cs-dica-txt]{opacity:1;visibility:visible;transition:opacity 160ms var(--ease-state)}

/* MECANISMO · três colunas: quem cadastra, os cinco cadastros e onde eles são
   usados. A linguagem é a do diagrama de convergência da Jornada: caixas de
   papel com fio de 1px, rótulos em Mono e fios em tinta; o destino leva o
   contorno ferrugem e o âmbar lavado. Um fio entra nos cadastros e outro sai
   deles, na altura do meio, com a seta parando 12px antes do formulário. */
[data-cs-mec]{--g:8px;display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1.3fr) 56px minmax(0,1fr);row-gap:12px;margin:var(--space-5) 0 0}
[data-cs-mec-lb]{grid-row:1;font:400 var(--size-caption)/var(--lh-caption) var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
[data-cs-mec-lb="1"]{grid-column:1}
[data-cs-mec-lb="2"]{grid-column:3}
[data-cs-mec-lb="3"]{grid-column:5}
[data-cs-mec-orig],[data-cs-mec-dest]{grid-row:2;align-self:center;padding:16px}
[data-cs-mec-orig]{grid-column:1;border:1px solid var(--tinta-30);background:var(--papel)}
[data-cs-mec-dest]{grid-column:5;border:1px solid var(--ferrugem);background:rgba(245,160,60,.12)}
[data-cs-mec-t]{margin:0;font:500 16px/1.35 var(--font-sans);color:var(--tinta);text-wrap:balance}
[data-cs-mec-d]{margin:6px 0 0;font:400 13px/1.5 var(--font-sans);color:var(--text-body);text-wrap:pretty}
[data-cs-mec-lista]{grid-column:3;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:var(--g);margin:0;padding:0;list-style:none}
[data-cs-mec-lista] li{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--tinta-30);background:var(--papel);font:400 14px/1.4 var(--font-sans);color:var(--tinta)}
/* Os cadastros não cabem todos: abaixo do quinto, uma caixa tracejada diz
   quantos faltam e quais são. */
[data-cs-mec-mais],[data-cs-mec-lista] [data-cs-mec-mais4],[data-cs-mec-lista] [data-cs-mec-mais2]{padding:10px 14px;border:1px dashed var(--tinta-30);background:transparent;font:400 13px/1.5 var(--font-sans);color:var(--text-muted);text-wrap:pretty}
[data-cs-mec-mais]{grid-column:3;grid-row:3;margin:calc(var(--g) - 12px) 0 0}
[data-cs-mec-lista] [data-cs-mec-mais4],[data-cs-mec-lista] [data-cs-mec-mais2]{display:none}
[data-cs-mec-n]{flex:none;font:400 var(--size-caption)/1 var(--font-mono);letter-spacing:var(--track-label);color:var(--ferrugem)}
[data-cs-mec-fio]{grid-row:2;position:relative}
[data-cs-mec-fio="1"]{grid-column:2}
[data-cs-mec-fio="2"]{grid-column:4}
[data-cs-mec-fio] span{position:absolute;background:var(--tinta)}
[data-cs-mec-fio] [data-l="e"]{height:1px;top:50%}
[data-cs-mec-fio="1"] [data-l="e"]{left:0;right:0;transform-origin:left center}
[data-cs-mec-fio="2"] [data-l="e"]{left:0;right:12px;transform-origin:left center}
/* A seta fecha no formulário. */
[data-cs-mec-fio="2"] [data-l="e"]::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid var(--tinta);border-right:1px solid var(--tinta);transform:rotate(45deg);background:transparent}
/* Entrada: quem cadastra, o fio de entrada, os cadastros um a um, o fio de
   saída e o formulário. O estado final é o do HTML. */
@keyframes mecEntra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mecFioH{from{transform:scaleX(0)}to{transform:scaleX(1)}}
[data-cs-mec][data-anim="pronto"] [data-cs-mec-mais],[data-cs-mec][data-anim="pronto"] [data-cs-mec-orig],[data-cs-mec][data-anim="pronto"] [data-cs-mec-dest],[data-cs-mec][data-anim="pronto"] [data-cs-mec-lista] li{opacity:0}
[data-cs-mec][data-anim="pronto"] [data-l="e"]{transform:scaleX(0)}
[data-cs-mec][data-anim="correndo"] [data-cs-mec-orig]{animation:mecEntra 500ms var(--ease-out) both}
[data-cs-mec][data-anim="correndo"] [data-cs-mec-fio="1"] [data-l="e"]{animation:mecFioH 300ms linear 400ms both}
[data-cs-mec][data-anim="correndo"] [data-cs-mec-lista] li{animation:mecEntra 500ms var(--ease-out) calc(800ms + var(--i) * 90ms) both}
[data-cs-mec][data-anim="correndo"] [data-cs-mec-mais]{animation:mecEntra 500ms var(--ease-out) 1300ms both}
[data-cs-mec][data-anim="correndo"] [data-cs-mec-fio="2"] [data-l="e"]{animation:mecFioH 300ms linear 1600ms both}
[data-cs-mec][data-anim="correndo"] [data-cs-mec-dest]{animation:mecEntra 500ms var(--ease-out) 1850ms both}
[data-cs-mec-caixa] + [data-cs-diag],[data-cs-mec-caixa] + [data-cs-img]{margin-top:var(--space-5)}
/* O diagrama mantém sempre as três colunas; o que muda com a largura dele é
   só quantos cadastros aparecem no meio. A coluna segue com um número ímpar
   de linhas iguais, então os fios continuam chegando no cadastro do meio:
   - 760px ou mais: cinco cadastros e a caixa dos que faltam por baixo.
   - de 600 a 759px: quatro cadastros, e a caixa dos que faltam vira a quinta
     linha.
   - abaixo de 600px: dois cadastros, e a caixa dos que faltam vira a
     terceira linha.
   No telefone, por largura da tela, o diagrama empilha com os cinco. */
[data-cs-mec-caixa]{container-type:inline-size}
/* Quando a coluna do texto fica estreita (telas médias, com a coluna lateral
   ao lado), o diagrama avança sobre a coluna lateral e usa a largura da
   seção inteira, em vez de espremer as três colunas. */
[data-cs-corpo]{container:corpo / inline-size}
@media (min-width:1000px){
@container corpo (max-width:759px){
[data-cs-mec-caixa]{margin-left:calc(-1 * (var(--lateral) + var(--lat-vao)));max-width:var(--medida)}
}
}
@container (min-width:600px) and (max-width:759px){
[data-cs-mec-lista] li:nth-child(5){display:none}
[data-cs-mec-lista] [data-cs-mec-mais4]{display:flex;align-items:center}
[data-cs-mec-mais]{display:none}
}
@container (max-width:599px){
[data-cs-mec-lista] li:nth-child(n+3):nth-child(-n+5){display:none}
[data-cs-mec-lista] [data-cs-mec-mais2]{display:flex;align-items:center}
[data-cs-mec-mais]{display:none}
}
/* Telefone: uma coluna, na ordem da leitura, com os cinco cadastros e um fio
   vertical curto com seta entre os três blocos, no lugar dos horizontais. */
@media (max-width:767px){
[data-cs-mec]{display:flex;flex-direction:column;row-gap:0}
[data-cs-mec-lb="1"]{order:1}
[data-cs-mec-orig]{order:2;margin-top:8px;align-self:stretch}
[data-cs-mec-fio="1"]{order:3}
[data-cs-mec-lb="2"]{order:4}
[data-cs-mec-lista]{order:5;margin-top:8px}
[data-cs-mec-mais]{order:6;margin-top:8px}
[data-cs-mec-fio="2"]{order:7}
[data-cs-mec-lb="3"]{order:8}
[data-cs-mec-dest]{order:9;margin-top:8px;align-self:stretch}
[data-cs-mec-fio]{height:40px}
[data-cs-mec-fio] span{display:none}
[data-cs-mec-fio]::before{content:"";position:absolute;left:24px;top:8px;bottom:12px;width:1px;background:var(--tinta)}
/* A seta aponta para o bloco seguinte e para 12px antes dele. */
[data-cs-mec-fio]::after{content:"";position:absolute;left:21px;bottom:13px;width:6px;height:6px;border-right:1px solid var(--tinta);border-bottom:1px solid var(--tinta);transform:rotate(45deg)}
[data-cs-mec-caixa] [data-cs-mec-lista] li:nth-child(-n+5){display:flex}
[data-cs-mec-caixa] [data-cs-mec-lista] [data-cs-mec-mais4],[data-cs-mec-caixa] [data-cs-mec-lista] [data-cs-mec-mais2]{display:none}
[data-cs-mec-caixa] [data-cs-mec-mais]{display:block}
}
@media (prefers-reduced-motion:reduce){
[data-cs-mec] *{animation:none!important;opacity:1!important;transform:none!important}
[data-cs-mec-fio="2"] [data-l="e"]::after{transform:rotate(45deg)!important}
}

/* COMO FOI FEITO · uma etapa por bloco, separadas por fio. A lista usa um
   traço curto no lugar do marcador; "o que isso mudou" fecha a etapa com fio
   em ferrugem. */
[data-cs-etapa] + [data-cs-etapa]{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--tinta-14)}
[data-cs-etapa-h]{display:flex;align-items:baseline;gap:12px}
[data-cs-etapa-n]{font:400 var(--size-label)/1 var(--font-mono);letter-spacing:var(--track-label);color:var(--ferrugem)}
/* O título da etapa é um degrau acima do subtítulo dentro do texto: 22px
   contra 18px. O peso cai para 400: o tamanho já marca a hierarquia, e em 500
   o bloco ficava pesado ao lado do título da seção. */
[data-cs-etapa-h] [data-cs-h3]{font-size:22px;line-height:1.3;font-weight:400}
[data-cs-etapa-h] + [data-cs-p]{margin-top:12px}
/* SUBTÍTULO DE SUBSEÇÃO · um degrau abaixo do título da etapa, para separar
   um assunto de outro dentro dela. */
[data-cs-h4]{margin:var(--space-4) 0 0;font:500 17px/1.35 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-cs-h4] + [data-cs-p]{margin-top:12px}

/* CONSTATAÇÕES · marcador quadrado em ferrugem na altura da primeira linha.
   Sem numeração: são achados, não etapas. */
[data-cs-consta]{margin:var(--space-3) 0 0;padding:0;list-style:none}
[data-cs-consta] li{position:relative;padding-left:22px;font:400 16px/1.7 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-cs-consta] li + li{margin-top:16px}
[data-cs-consta] li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--ferrugem)}

/* CAIXA DE NOTA · um assunto que corre por fora do texto principal, com fio de
   1px, marcas de canto e rótulo em Mono ferrugem no lugar do título. */
[data-cs-caixa]{position:relative;margin:48px 0 0;border:1px solid rgba(23,19,15,.3);padding:28px}
[data-cs-caixa-lb]{display:block;margin-bottom:14px;font:400 10px/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ferrugem)}
[data-cs-caixa] p{margin:0;font:400 16px/1.7 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-cs-caixa] p + p{margin-top:16px}

[data-cs-lista]{margin:16px 0 0;padding:0;list-style:none}
[data-cs-lista] li{position:relative;padding-left:24px;font:400 var(--size-body)/1.65 var(--font-sans);color:var(--tinta);text-wrap:pretty}
[data-cs-lista] li + li{margin-top:10px}
[data-cs-lista] li::before{content:"";position:absolute;left:0;top:.82em;width:12px;height:1px;background:var(--tinta-30)}
[data-cs-etapa-h] + [data-cs-lista]{margin-top:12px}
/* Com as duas colunas da seção, o número e o título da etapa vão para a
   coluna lateral, na altura do primeiro bloco de texto, como o título da
   seção. O bloco avança sobre a lateral e vira uma fileira de duas colunas. */
@media (min-width:1000px){
[data-cs-etapa]{position:relative;display:grid;grid-template-columns:var(--lateral) minmax(0,1fr);column-gap:var(--lat-vao);margin-left:calc(-1 * (var(--lateral) + var(--lat-vao)))}
[data-cs-etapa] > *{grid-column:2}
/* O rótulo sai do fluxo: assim a altura das fileiras é a do texto, e um
   título comprido na lateral não afasta os parágrafos. */
[data-cs-etapa-h]{position:absolute;grid-column:1;grid-row:1;left:0;top:0;width:var(--lateral);display:block}
/* Nota de pensamento dentro de uma etapa: ela fica na coluna lateral, logo
   abaixo do título da etapa. A altura do título varia, então a medida vem do
   case.js e entra como --pensa-topo; sem JS a nota fica na altura do
   parágrafo, como nas outras seções. */
[data-cs-etapa][data-pensa] [data-cs-pensa]{top:var(--pensa-topo,4px)}
/* O número da etapa fica na mesma calha do número da seção, e o título da
   etapa embaixo do título da seção. Os dois são alinhados pela direita, a
   33px do título: com corpos diferentes, é a borda que o olho lê como coluna. */
[data-cs-etapa-n]{position:absolute;left:auto;right:calc(100% + 33px);top:6.3px;margin:0}
[data-cs-etapa-h] + [data-cs-p],[data-cs-etapa-h] + [data-cs-lista]{margin-top:0}
/* Na primeira etapa a coluna lateral já tem o título da seção: o rótulo dela
   desce para baixo dele. */
[data-cs-corpo] > [data-cs-etapa]:first-child > [data-cs-etapa-h]{top:56px}
}
[data-cs-mudou]{margin:var(--space-3) 0 0;padding-left:16px;border-left:1px solid var(--ferrugem);font:400 15px/1.6 var(--font-sans);color:var(--text-body);text-wrap:pretty}
[data-cs-diag]{position:relative;margin:var(--space-4) 0 0}
/* Imagem de tela com fundo transparente: sem moldura nem respiro interno,
   direto no papel, na largura da coluna do texto. */
[data-cs-img]{margin:var(--space-4) 0 0}
[data-cs-img] img{display:block;width:100%;height:auto}
/* Lugar marcado de imagem ou diagrama que ainda não chegou: hachura com o
   rótulo em Mono no centro. */
[data-cs-diag-a]{display:flex;align-items:center;justify-content:center;aspect-ratio:16 / 9;border:1px solid var(--tinta-30);background:repeating-linear-gradient(45deg,var(--tinta-08) 0 1px,transparent 1px 7px)}
[data-cs-diag-a] > span{font:400 var(--size-caption)/var(--lh-caption) var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;text-align:center;color:rgba(23,19,15,.45)}
[data-cs-diag] figcaption{margin-top:10px;font:400 13px/1.5 var(--font-sans);color:var(--text-muted)}

/* CICLO DO DADO · diagrama só de linha, sem preenchimento, sombra ou ícone.
   Em cima o percurso do dado em cinco etapas ligadas por setas; no meio a
   linha que o dado não atravessa, com o rótulo em Mono ferrugem sobre o
   papel; embaixo o que o inventário registra de cada etapa, ligado à sua
   etapa pela posição na coluna. O diagrama responde à própria largura: a partir de
   780px as cinco etapas ficam lado a lado; abaixo disso ele vira vertical,
   com etapa e registro lado a lado e a linha no meio. */
[data-cs-ciclo-caixa]{container-type:inline-size;margin:var(--space-4) 0 0}
[data-cs-ciclo]{margin:0;display:grid;gap:0 12px}
[data-cs-ciclo-fila],[data-cs-ciclo-reg]{display:contents;margin:0;padding:0;list-style:none}
[data-cs-ciclo-et]{position:relative;border:1px solid var(--tinta);padding:10px 12px}
[data-cs-ciclo-n]{display:block;margin-bottom:4px;font:400 10px/1.2 var(--font-mono);letter-spacing:var(--track-label);color:var(--text-muted)}
[data-cs-ciclo-et] > span:last-child{font:400 14px/1.35 var(--font-sans);color:var(--tinta)}
[data-cs-ciclo-card]{position:relative;border:1px solid rgba(23,19,15,.22);padding:10px 12px;font:400 12px/1.5 var(--font-sans);color:var(--text-body);text-wrap:pretty}
/* A linha do limite são dois segmentos, um de cada lado do rótulo, e o rótulo
   fica sobre o papel sem fundo próprio. */
[data-cs-ciclo-limite]{display:flex;align-items:center;gap:10px}
[data-cs-ciclo-limite]::before,[data-cs-ciclo-limite]::after{content:"";flex:1 1 auto;height:1px;background:var(--tinta)}
[data-cs-ciclo-lb]{flex:none;font:400 10px/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ferrugem)}

@container (min-width:780px){
/* Nesta largura as cinco colunas são estreitas: corpo e respiro menores. */
[data-cs-ciclo-et]{padding:8px 10px}
[data-cs-ciclo-et] > span:last-child{font-size:13px}
[data-cs-ciclo-card]{padding:8px 10px;font-size:11px}
[data-cs-ciclo]{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto 64px auto;column-gap:32px}
[data-cs-ciclo-et]{grid-row:1}
[data-cs-ciclo-limite]{grid-row:2;grid-column:1 / -1}
[data-cs-ciclo-card]{grid-row:3}
/* Seta entre uma etapa e a seguinte, no vão. */
/* Regra das setas em diagrama: a ponta fica colada ao fio, e o respiro é o
   mesmo dos dois lados — 10px entre a caixa e o começo do fio, 10px entre a
   ponta e a caixa seguinte. */
[data-cs-ciclo-et]:not(:last-child)::after{content:"";position:absolute;left:calc(100% + 10px);top:50%;width:12px;height:1px;background:var(--tinta)}
[data-cs-ciclo-et]:not(:last-child)::before{content:"";position:absolute;left:calc(100% + 14.8px);top:calc(50% - 3px);width:6px;height:6px;border-top:1px solid var(--tinta);border-right:1px solid var(--tinta);transform:rotate(45deg)}
}

@container (max-width:779px){
[data-cs-ciclo]{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);grid-template-rows:repeat(5,auto);gap:40px 0}
[data-cs-ciclo-limite]{grid-column:2;grid-row:1 / -1;flex-direction:column}
[data-cs-ciclo-limite]::before,[data-cs-ciclo-limite]::after{width:1px;height:auto}
[data-cs-ciclo-lb]{writing-mode:vertical-rl;white-space:nowrap}
[data-cs-ciclo-et]{grid-column:1}
[data-cs-ciclo-card]{grid-column:3}
[data-cs-ciclo-et]:nth-child(1),[data-cs-ciclo-card]:nth-child(1){grid-row:1}
[data-cs-ciclo-et]:nth-child(2),[data-cs-ciclo-card]:nth-child(2){grid-row:2}
[data-cs-ciclo-et]:nth-child(3),[data-cs-ciclo-card]:nth-child(3){grid-row:3}
[data-cs-ciclo-et]:nth-child(4),[data-cs-ciclo-card]:nth-child(4){grid-row:4}
[data-cs-ciclo-et]:nth-child(5),[data-cs-ciclo-card]:nth-child(5){grid-row:5}
/* Seta para baixo entre as etapas; o registro fica ao lado, sem conector. */
[data-cs-ciclo-et]:not(:last-child)::after{content:"";position:absolute;left:50%;top:calc(100% + 10px);width:1px;height:20px;background:var(--tinta)}
[data-cs-ciclo-et]:not(:last-child)::before{content:"";position:absolute;left:calc(50% - 3px);top:calc(100% + 22.8px);width:6px;height:6px;border-right:1px solid var(--tinta);border-bottom:1px solid var(--tinta);transform:rotate(45deg)}
}

/* IMPACTO · tabela de duas colunas com fio entre as linhas. No telefone cada
   linha empilha dimensão sobre resultado. */
[data-cs-tab]{width:100%;max-width:880px;margin-top:var(--space-6);border-collapse:collapse}
[data-cs-tab] thead th{padding:0 0 10px;text-align:left;font:400 var(--size-caption)/var(--lh-caption) var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
[data-cs-tab] tbody th,[data-cs-tab] td{padding:16px 0;border-top:1px solid var(--tinta-14);vertical-align:top;text-align:left}
[data-cs-tab] tbody tr:last-child th,[data-cs-tab] tbody tr:last-child td{border-bottom:1px solid var(--tinta-14)}
[data-cs-tab] tbody th{width:180px;padding-right:var(--space-3);font:500 15px/1.5 var(--font-sans);color:var(--tinta)}
[data-cs-tab] td{font:400 15px/1.6 var(--font-sans);color:var(--tinta)}

/* O QUE APRENDI · abre com a frase do erro em corpo de título. */
[data-cs-abre]{margin:0;font:500 var(--size-t3)/var(--lh-t3) var(--font-sans);color:var(--tinta);text-wrap:balance}
[data-cs-abre] + [data-cs-p]{margin-top:var(--space-3)}

/* VOLTAR AO TOPO · a voz do link Voltar (Sans 15px em tinta, seta que se move
   no hover, ferrugem no foco), fixo no canto de baixo, sobre um retângulo de
   papel com fio para não se perder no texto. Com JS ele só aparece depois de
   uma tela de rolagem, subindo 8px em 300ms. */
[data-topo]{position:fixed;right:clamp(20px,5.5vw,72px);bottom:24px;z-index:12;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--tinta-14);background:var(--papel);font:500 15px/1.4 var(--font-sans);color:var(--tinta);text-decoration:none;transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out),visibility 0s linear 0s,color 160ms var(--ease-state),border-color 160ms var(--ease-state)}
[data-topo] [data-seta]{display:flex;transition:transform 160ms var(--ease-state)}
[data-topo]:hover,[data-topo]:focus-visible{color:var(--ferrugem);border-color:var(--ferrugem)}
[data-topo]:hover [data-seta],[data-topo]:focus-visible [data-seta]{transform:translateY(-3px)}
[data-topo]:focus-visible{outline:2px solid var(--ferrugem);outline-offset:2px}
.iv-motion [data-topo]:not([data-visivel]){opacity:0;transform:translateY(8px);visibility:hidden;pointer-events:none;transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out),visibility 0s linear 300ms}
@media (max-width:767px){[data-topo]{right:16px;bottom:16px}}
@media (prefers-reduced-motion:reduce){[data-topo],[data-topo] [data-seta]{transition:none}}

/* CHAMADA FINAL */
[data-cs-cta]{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-7)}
[data-cs-cta] [data-btn]{flex:0 0 auto}
[data-cs-cta] [data-btn] span{white-space:nowrap}

@media (max-width:1099px){
/* Três em cima, duas embaixo. */
[data-cs-meta]{grid-template-columns:repeat(6,minmax(0,1fr))}
[data-cs-meta-i="1"],[data-cs-meta-i="2"],[data-cs-meta-i="3"]{grid-column:span 2}
[data-cs-meta-i="4"],[data-cs-meta-i="5"]{grid-column:span 3;border-top:1px solid var(--tinta-14)}
[data-cs-meta-i="3"]{padding-right:0}
[data-cs-meta] > [data-cs-meta-i="4"]{border-left:0;padding-left:0}
[data-cs-ficha-pe]{grid-template-columns:minmax(0,1fr);row-gap:var(--space-2)}
[data-cs-conf]{justify-self:start}
}
@media (max-width:999px){
[data-cs-sec]{grid-template-columns:minmax(0,1fr);row-gap:var(--space-4);margin-top:var(--space-6)}
}
@media (max-width:767px){
/* Uma por linha: rótulo à esquerda, valor à direita, fio entre elas. */
[data-cs-meta]{grid-template-columns:minmax(0,1fr)}
[data-cs-meta-i]{grid-column:auto!important;display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:16px;padding:12px 0!important;border-left:0!important}
[data-cs-meta-i] + [data-cs-meta-i]{border-top:1px solid var(--tinta-14)}
[data-cs-meta] dd{margin:0}
[data-cs-tab] thead{display:none}
[data-cs-tab],[data-cs-tab] tbody,[data-cs-tab] tr,[data-cs-tab] th,[data-cs-tab] td{display:block;width:auto}
[data-cs-tab] tbody tr{padding:16px 0;border-top:1px solid var(--tinta-14)}
[data-cs-tab] tbody tr:last-child{border-bottom:1px solid var(--tinta-14)}
[data-cs-tab] tbody th,[data-cs-tab] td,[data-cs-tab] tbody tr:last-child th,[data-cs-tab] tbody tr:last-child td{padding:0;border:0}
[data-cs-tab] td{margin-top:4px}
[data-cs-dica-txt]{width:200px}
}
@media (max-width:599px){
[data-cs-cta] [data-btn]{flex:1 1 100%;width:100%;min-width:0}
}
@media (prefers-reduced-motion:reduce){
[data-cs-dica-txt],[data-cs-dica-btn]{transition:none}
[data-cs-cartoes] [data-cs-cartao]{opacity:1!important;animation:none!important}
[data-cs-dest] [data-forte]{background-size:100% 100%!important;transition:none!important}
[data-cs-sec]::before,[data-cs-pensa]::before{transform:none!important;transition:none!important}
[data-cs-pensa]{color:var(--text-muted)!important;transition:none!important}
.iv-motion [data-cs-heroi-img][data-reveal]{transform:none;transition:none}
}