/* ============================================================================
   HOME · Isabella Victória
   Hero, cases, jornada, serviços, como eu trabalho, sobre e contato.
   O contato vive em contato.css, dividido com a página Sobre.
   ========================================================================= */

/* ================================ HERO ==================================
   A mancha é o único elemento em movimento contínuo do sistema: duas camadas
   de gradiente que se deformam devagar, sob um grão mascarado em disco. */
[data-hero]{position:relative;padding:var(--space-3) 0 var(--space-4)}
[data-hero-mancha],[data-hero-grao]{position:absolute;top:19%;left:66%;width:34%;aspect-ratio:1 / 0.86;pointer-events:none}
[data-hero-mancha]{filter:blur(21px);opacity:.56;z-index:0}
[data-hero-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-nuvem]{position:absolute;will-change:border-radius,transform,opacity}
[data-nuvem="a"]{inset:0;background:radial-gradient(62% 62% at 40% 34%,rgba(163,66,4,.46) 0%,rgba(163,66,4,.38) 34%,rgba(245,160,60,.52) 70%,rgba(245,160,60,0) 100%);animation:morfa 11s ease-in-out infinite,intensa 7s ease-in-out infinite}
[data-nuvem="b"]{inset:8% 6% 10% 12%;background:radial-gradient(58% 58% at 62% 62%,#F5A03C 0%,rgba(245,160,60,.72) 46%,rgba(245,160,60,0) 92%);animation:morfb 14s ease-in-out infinite,intensb 9s ease-in-out infinite}
@keyframes morfa{0%{border-radius:56% 44% 47% 53% / 50% 46% 54% 50%;transform:rotate(0deg) scale(1,1) translate3d(0,0,0)}18%{border-radius:32% 68% 72% 28% / 68% 26% 74% 32%;transform:rotate(4deg) scale(1.22,.84) translate3d(-4%,2%,0)}38%{border-radius:76% 24% 26% 74% / 28% 74% 26% 72%;transform:rotate(-3.4deg) scale(.82,1.24) translate3d(3%,-3%,0)}58%{border-radius:42% 58% 66% 34% / 62% 32% 68% 38%;transform:rotate(3deg) scale(1.16,.92) translate3d(-2%,3%,0)}78%{border-radius:26% 74% 48% 52% / 74% 54% 46% 26%;transform:rotate(-2.4deg) scale(.9,1.18) translate3d(2.5%,-1.5%,0)}100%{border-radius:56% 44% 47% 53% / 50% 46% 54% 50%;transform:rotate(0deg) scale(1,1) translate3d(0,0,0)}}
@keyframes morfb{0%{border-radius:48% 52% 54% 46% / 52% 48% 52% 48%;transform:rotate(0deg) scale(1,1) translate3d(0,0,0)}22%{border-radius:70% 30% 28% 72% / 26% 72% 28% 74%;transform:rotate(-4.2deg) scale(.84,1.2) translate3d(5%,-2%,0)}44%{border-radius:28% 72% 74% 26% / 72% 28% 72% 28%;transform:rotate(3.6deg) scale(1.24,.86) translate3d(-3%,4%,0)}66%{border-radius:62% 38% 32% 68% / 34% 66% 34% 66%;transform:rotate(-2.6deg) scale(.88,1.16) translate3d(3%,-2.5%,0)}84%{border-radius:36% 64% 58% 42% / 64% 44% 56% 36%;transform:rotate(2.2deg) scale(1.14,.94) translate3d(-2%,2%,0)}100%{border-radius:48% 52% 54% 46% / 52% 48% 52% 48%;transform:rotate(0deg) scale(1,1) translate3d(0,0,0)}}
@keyframes intensa{0%{opacity:.38}50%{opacity:1}100%{opacity:.38}}
@keyframes intensb{0%{opacity:1}50%{opacity:.42}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){[data-nuvem]{animation:none!important}}
[data-mancha-parada] [data-nuvem]{animation:none!important}

/* PALAVRAS DO TÍTULO · o único texto da plataforma que se move. Cada palavra
   sobe e desce 0,05em (4px no tamanho maior) e deriva um fio para o lado, num
   ciclo longo de 7 a 11s, cada uma no seu tempo: a frase respira junto com a
   mancha sem nunca sair do lugar de leitura. O JS separa as palavras e dá a
   cada uma duração e fase; fora da tela, com movimento reduzido ou sem JS, o
   título fica parado. */
[data-h1-p]{display:inline-block;animation:flutua var(--flutua-dur,9s) ease-in-out var(--flutua-atraso,0s) infinite alternate}
@keyframes flutua{0%{transform:translate3d(0,.025em,0)}50%{transform:translate3d(.008em,-.025em,0)}100%{transform:translate3d(-.006em,.008em,0)}}
[data-hero][data-fora] [data-h1-p]{animation-play-state:paused}
[data-mancha-parada] [data-h1-p]{animation:none}
@media (prefers-reduced-motion:reduce){[data-h1-p]{animation:none}}

[data-hero-in]{position:relative;z-index:2}
[data-hero-papel]{font:500 var(--size-label)/var(--lh-label) var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-4)}
[data-h1]{margin:0;font:600 clamp(34px,6.1vw,76px)/1.32 var(--font-sans);letter-spacing:0;text-transform:uppercase}
/* RECUO DA SEGUNDA LINHA · a escada termina com a linha do meio quase
   encostando na direita. A frase em inglês é mais curta, então o recuo dela é
   maior para o degrau cair no mesmo lugar. */
[data-h1-recuo]{display:block;padding-left:14%}
:root[lang="en"] [data-h1-recuo]{padding-left:23%}

/* NO CELULAR · abaixo de 560px o corpo fixo de 34px não cabe mais, e cada uma
   das três frases quebrava no meio, desmanchando a escada. O corpo passa a
   acompanhar a largura da tela e o recuo encolhe junto, para a escada
   continuar de pé com uma frase por linha. */
@media (max-width:559px){
[data-h1]{--h1-mobile:1;font-size:min(34px,7.45vw)}
[data-h1-recuo]{padding-left:8%}
:root[lang="en"] [data-h1-recuo]{padding-left:13%}
}

[data-hero-linha]{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gutter);align-items:end;margin-top:var(--space-5)}
/* Entre 1000 e 1200px as seis colunas ficam mais estreitas que o rótulo em uma
   linha e o texto passava do fio. A caixa parte das seis colunas e cresce só o
   que o conteúdo pedir, para dentro da metade vazia da direita. */
[data-cta-hero]{grid-column:1 / span 6;justify-self:start;display:grid;grid-template-columns:88px auto;align-items:stretch;position:relative;padding:1px;color:var(--tinta);text-decoration:none;width:max-content;min-width:100%;transition:color var(--transition-state)}
[data-cta-hero]:hover,[data-cta-hero]:focus-visible{color:var(--ferrugem)}
[data-cta-hero] [data-cta-fio]{position:absolute;inset:0;border:1px solid currentColor;pointer-events:none}
[data-cta-seta]{position:relative;display:flex;align-items:center;justify-content:center;border-right:1px solid transparent;padding:14px 0}
[data-cta-seta] [data-cta-fio-v]{position:absolute;top:0;bottom:0;right:-1px;width:1px;background:currentColor;pointer-events:none}
[data-cta-txt]{display:flex;flex-direction:column;gap:var(--space-1);justify-content:center;padding:14px var(--space-3) 15px}
[data-cta-t]{font:500 var(--size-body)/1.2 var(--font-sans);white-space:nowrap}
[data-cta-m]{font:400 var(--size-caption)/1.3 var(--font-mono);letter-spacing:var(--track-caption);text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
/* No telefone o bloco toma a largura toda e o rótulo pode quebrar; a metade da
   seta continua fixa. */
@media (max-width:767px){
[data-cta-hero]{grid-column:1 / -1;justify-self:stretch;width:100%;grid-template-columns:64px minmax(0,1fr)}
[data-cta-t],[data-cta-m]{white-space:normal}
}

/* QUATRO FRENTES, RESUMO · o numeral conta de 0 até o valor, uma vez. */
[data-destaques]{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-4);margin-top:var(--space-4)}
[data-destaque]{min-width:0}
[data-destaque-n]{font:500 var(--size-label)/var(--lh-label) var(--font-mono);letter-spacing:var(--track-label);color:var(--tinta);margin-bottom:var(--space-1)}
[data-destaque] h3{margin:0 0 6px;font:500 var(--size-t4)/1.3 var(--font-sans);white-space:nowrap}
[data-destaque] p{margin:0;font:400 var(--size-body-sm)/var(--lh-body-sm) var(--font-sans);color:var(--text-body)}

/* ================= CARTÃO COM MARCAS DE CANTO ==========================
   As marcas são oito fatias de gradiente posicionadas nos cantos: no repouso
   medem 16px de braço, no hover crescem para 30 e mudam para ferrugem junto
   com o fio. Nenhuma sombra, nenhum preenchimento. */
[data-cartao]{position:relative;padding:var(--space-4);border:1px solid var(--rule);color:var(--tinta);outline:1px solid transparent;outline-offset:-1px;
  background-image:linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule));
  background-repeat:no-repeat;
  background-size:16px 1px,1px 16px,16px 1px,1px 16px,16px 1px,1px 16px,16px 1px,1px 16px;
  background-position:12px 12px,12px 12px,right 12px top 12px,right 12px top 12px,left 12px bottom 12px,left 12px bottom 12px,right 12px bottom 12px,right 12px bottom 12px;
  transition:color var(--transition-state),border-color var(--transition-state),background-size var(--transition-state),outline-color var(--transition-state)}
/* O realce de ferrugem só existe onde há página de case para abrir. Os dois
   modos de em breve e o confidencial não têm destino, então não têm seta, não
   mudam no hover e não recebem foco. */
[data-cartao]:not([data-inerte]):hover,[data-cartao]:not([data-inerte]):focus-within{color:var(--ferrugem);border-color:var(--ferrugem);outline-color:var(--ferrugem);
  background-image:linear-gradient(var(--ferrugem),var(--ferrugem)),linear-gradient(var(--ferrugem),var(--ferrugem)),linear-gradient(var(--ferrugem),var(--ferrugem)),linear-gradient(var(--ferrugem),var(--ferrugem)),linear-gradient(var(--ferrugem),var(--ferrugem)),linear-gradient(var(--ferrugem),var(--ferrugem)),linear-gradient(var(--ferrugem),var(--ferrugem)),linear-gradient(var(--ferrugem),var(--ferrugem));
  background-size:30px 1px,1px 30px,30px 1px,1px 30px,30px 1px,1px 30px,30px 1px,1px 30px}
[data-cartao][data-inerte]{outline:0;transition:none}
[data-cartao-link]{position:absolute;inset:0;z-index:2}

/* ============================== CASES ==================================
   Subgrade de duas trilhas por card: bloco superior ancorado no topo, bloco
   inferior ancorado à base. A diferença de altura entre os cards da fileira
   fica entre os dois blocos, nunca dentro deles. */
/* Duas colunas fixas, sempre: com um card só, ele fica com metade da fileira
   em vez de esticar para a largura toda. Abaixo de 700px não cabem dois cards
   de 300px com a goteira, e a grade vira coluna única. */
[data-cases]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-3);row-gap:var(--space-2);margin-top:var(--space-5)}
@media (max-width:699px){[data-cases]{grid-template-columns:minmax(0,1fr)}}
[data-caso]{display:grid;grid-template-rows:subgrid;grid-row:span 2}
[data-caso-topo]{grid-row:1;align-self:start;display:flex;flex-direction:column;gap:var(--space-2)}
[data-caso-base]{grid-row:2;align-self:end;display:flex;flex-direction:column;gap:var(--space-2)}
[data-caso-capa]{position:relative;border:1px solid var(--rule-strong);aspect-ratio:16 / 9;display:flex;align-items:flex-end;padding:var(--space-2);overflow:hidden}
[data-caso-capa] img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* CAPA SEM IMAGEM · em breve contido e confidencial não recebem figura: logo
   de cliente identificaria justamente o que o estado esconde. Fica a hachura,
   com o rótulo do estado centralizado no lugar da figura. */
[data-caso-capa][data-vazia]{align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,var(--tinta-08) 0 1px,transparent 1px 7px)}
[data-caso-capa][data-vazia] 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-caso-capa] span{font:400 var(--size-caption)/var(--lh-caption) var(--font-mono);letter-spacing:var(--track-caption);color:var(--text-muted)}
[data-caso-meta]{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
/* A seta do card avança 4px no hover e no foco, o mesmo gesto dos botões. */
[data-caso-meta] svg,[data-jor-topo] svg{flex:none;transition:transform 160ms var(--ease-state)}
[data-cartao]:not([data-inerte]):hover [data-caso-meta] svg,[data-cartao]:not([data-inerte]):focus-within [data-caso-meta] svg,
[data-cartao]:hover [data-jor-topo] svg,[data-cartao]:focus-within [data-jor-topo] svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){[data-caso-meta] svg,[data-jor-topo] svg{transition:none}}
[data-caso-kicker]{font:500 var(--size-label)/var(--lh-label) var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
[data-caso-logo]{width:96px;height:28px;border:1px solid var(--rule-strong);display:flex;align-items:center;justify-content:center}
[data-caso-logo] span{font:400 var(--size-caption)/1 var(--font-mono);letter-spacing:var(--track-caption);color:var(--text-muted)}
[data-caso] h3{margin:0;font:500 var(--size-t4)/1.3 var(--font-sans)}
[data-caso] [data-caso-desc]{margin:0;font:400 var(--size-body-sm)/var(--lh-body-sm) var(--font-sans);color:var(--text-body)}
/* Duas colunas quando cada uma comporta o valor numa linha só; abaixo disso
   empilham, porque valor quebrado no meio não se lê de relance. */
[data-metricas]{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-2);border-top:1px solid var(--rule);padding-top:var(--space-2)}
[data-metrica]{display:flex;flex-direction:column;gap:3px}
[data-metrica-v]{font:600 var(--size-t3)/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, como na banda de impacto
   do case. Valor sem unidade segue só com a regra acima. */
[data-metrica-v]:has([data-metrica-n]){font-size:15px;line-height:1.3}
[data-metrica-n]{display:inline-block;white-space:nowrap;font-size:var(--size-t3);line-height:1}
[data-metrica-r]{font:400 var(--size-caption)/var(--lh-caption) var(--font-mono);letter-spacing:var(--track-caption);color:var(--text-muted)}
[data-caso-tags]{padding-top:var(--space-2)}

/* ============================== JORNADA ================================
   Um cartão só, com a linha do tempo dentro da moldura e a ficha embaixo. */
[data-jor-card]{margin-top:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
[data-jor-fig]{border:1px solid var(--rule-strong);padding:var(--space-3) var(--space-4)}
/* LINHA DO TEMPO · uma grade só para a faixa horizontal e para a dobra. Cada
   marco é uma subgrade de três trilhas — caixa, traço e ano —, então as caixas
   de uma fileira têm a altura da maior e o ano fica no início da sua célula. */
[data-tl-grade]{display:none;position:relative}
[data-tl-m]{display:grid;grid-template-rows:subgrid;grid-row-end:span 3;min-width:0}
[data-tl-cx]{border:1px solid var(--tinta);padding:7px 12px;color:var(--tinta);margin-bottom:var(--space-3)}
[data-tl-cx="agora"]{border-color:var(--diagram-critical);background:var(--diagram-critical-wash)}
/* O rótulo quebra entre palavras ou a caixa cresce em altura; palavra nunca
   parte. Por isso as colunas nunca ficam mais estreitas que a palavra mais
   longa do seu rótulo (min-content) e dividem por igual o que sobra. */
[data-tl-cx] div{font:500 var(--size-label)/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;-webkit-hyphens:none;hyphens:none;overflow-wrap:normal;word-break:normal}
[data-tl-eixo]{align-self:start;height:1px;background:var(--tinta)}
[data-tl-tick]{display:block;justify-self:start;width:1px;height:7px;background:var(--tinta)}
[data-tl-tick="agora"]{background:var(--diagram-critical)}
[data-tl-data]{justify-self:start;margin-top:6px;font:400 var(--size-caption)/1 var(--font-mono);letter-spacing:var(--track-caption);color:var(--tinta-62)}
[data-tl-data="agora"]{color:var(--diagram-critical)}
[data-tl-cont]{display:none}
[data-jor-grid]{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--space-4);margin-top:var(--space-1)}
[data-jor-txt]{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
[data-jor-topo]{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
[data-jor-kicker]{font:500 var(--size-label)/var(--lh-label) var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
[data-jor-txt] h3{margin:0;font:500 var(--size-t3)/var(--lh-t3) var(--font-sans)}
[data-jor-txt] p{margin:0;font:400 var(--size-body-sm)/var(--lh-body-sm) var(--font-sans);color:var(--text-body)}
[data-jor-tags]{margin-top:var(--space-1)}
[data-jor-stats]{display:flex;flex-direction:column;gap:var(--space-2);border-left:1px solid var(--rule);padding-left:var(--space-4)}
[data-jor-stat]{display:flex;flex-direction:column;gap:3px}

/* QUAL MODELO · faixa horizontal numa fileira nas telas largas, dobra em duas
   fileiras nas médias e lista vertical no telefone. */
[data-tl-mob]{display:none}
@media (max-width:767px){[data-tl-mob]{display:block}}

/* FAIXA · sete colunas e um eixo, a partir de 1300px. Abaixo disso as sete
   colunas, cada uma com a largura mínima da palavra mais longa do seu rótulo,
   somam mais que o espaço do cartão (755px em português contra 593px a 1101px)
   e a linha do tempo atravessaria a moldura. */
@media (min-width:1300px){
[data-tl-grade]{display:grid;grid-template-columns:repeat(7,minmax(min-content,1fr));grid-template-rows:auto 7px auto}
[data-tl-m]{grid-row-start:1}
[data-tl-m="1"]{grid-column:1}
[data-tl-m="2"]{grid-column:2}
[data-tl-m="3"]{grid-column:3}
[data-tl-m="4"]{grid-column:4}
[data-tl-m="5"]{grid-column:5}
[data-tl-m="6"]{grid-column:6}
[data-tl-m="7"]{grid-column:7}
[data-tl-m]:not([data-tl-m="1"]) [data-tl-cx]{border-left:0}
[data-tl-eixo="1"]{grid-column:1 / -1;grid-row:2}
[data-tl-eixo="2"]{display:none}
}

/* DOBRA · quatro marcos na primeira fileira e três na segunda, as duas lendo
   da esquerda para a direita. As fileiras dividem as mesmas quatro colunas,
   então a segunda mantém a largura de célula da primeira e deixa o vão à
   direita. Cada fileira tem o seu eixo, de ponta a ponta do contêiner, e
   entre elas dois fios curtos a 0,3 dizem que a linha continua: um desce do
   fim do primeiro eixo, o outro sobe do início da segunda fileira. */
@media (min-width:768px) and (max-width:1299px){
[data-tl-grade]{display:grid;grid-template-columns:repeat(4,minmax(min-content,1fr));grid-template-rows:auto 7px auto 32px auto 7px auto}
[data-tl-m="1"]{grid-column:1;grid-row-start:1}
[data-tl-m="2"]{grid-column:2;grid-row-start:1}
[data-tl-m="3"]{grid-column:3;grid-row-start:1}
[data-tl-m="4"]{grid-column:4;grid-row-start:1}
[data-tl-m="5"]{grid-column:1;grid-row-start:5}
[data-tl-m="6"]{grid-column:2;grid-row-start:5}
[data-tl-m="7"]{grid-column:3;grid-row-start:5}
[data-tl-m="2"] [data-tl-cx],[data-tl-m="3"] [data-tl-cx],[data-tl-m="4"] [data-tl-cx],[data-tl-m="6"] [data-tl-cx],[data-tl-m="7"] [data-tl-cx]{border-left:0}
[data-tl-eixo="1"]{grid-column:1 / -1;grid-row:2}
[data-tl-eixo="2"]{grid-column:1 / -1;grid-row:6}
[data-tl-cont]{display:block;width:1px;height:16px;background:var(--tinta-30)}
[data-tl-cont="desce"]{grid-column:4;grid-row:2;justify-self:end;align-self:start}
[data-tl-cont="sobe"]{grid-column:1;grid-row:5;justify-self:start;align-self:start;margin-top:-16px}
}
@media (max-width:767px){
/* Os dois recuos de 32px do cartão comiam 128px da medida da linha do tempo. */
[data-jor-card]{padding:var(--space-2)}
[data-jor-fig]{padding:var(--space-2)}
[data-jor-grid]{grid-template-columns:minmax(0,1fr);row-gap:var(--space-4)}
[data-jor-stats]{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:var(--space-3);gap:0;padding-bottom:32px}
/* Lado a lado, o rótulo assenta na linha de base do número, e não no topo
   dele. */
[data-jor-stats] [data-jor-stat]{flex-direction:row;align-items:baseline;gap:12px}
[data-jor-stats] [data-jor-stat]+[data-jor-stat]{border-top:1px solid color-mix(in srgb,var(--tinta) 12%,transparent);margin-top:20px;padding-top:20px}
[data-jor-stats] [data-jor-stat] > span:first-child{white-space:nowrap}
[data-jor-stats] [data-jor-stat] > span:last-child{width:100%;text-align:left}
}
/* LISTA VERTICAL · o telefone lê a linha do tempo como a faixa do desktop:
   cada marco numa célula de contorno, ligada ao ponto do eixo por um fio.
   Coluna do ano com 56px e o eixo a 16px dela; a célula começa 16px depois
   do eixo, e é esse vão que o fio atravessa. O ano, o ponto e o fio ficam na
   altura da primeira linha do rótulo: 11px de fio e padding da célula mais
   metade da entrelinha de 15,4px. */
[data-tl-mob]{position:relative;list-style:none;margin:0;padding:0;--tl-linha:18.7px}
[data-tl-mob]::before{content:"";position:absolute;left:72px;top:var(--tl-linha);bottom:3px;width:1px;background:color-mix(in srgb,var(--tinta) 25%,transparent)}
[data-tl-marco]{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:32px;align-items:start;padding-bottom:24px}
[data-tl-marco]:last-child{padding-bottom:0}
[data-tl-marco]::after{content:"";position:absolute;left:72px;top:calc(var(--tl-linha) - 3px);width:6px;height:6px;margin-left:-3px;background:var(--tinta);z-index:1}
/* A coluna do ano tem 72px: quatro dígitos em Mono 11 mais o respiro de 16px
   até o eixo. O ano nunca quebra e nunca se repete entre marcos. */
[data-tl-ano]{display:block;text-align:right;white-space:nowrap;padding-top:11px;font:400 var(--size-caption)/1.4 var(--font-mono);color:var(--tinta-62)}
/* CÉLULA · contorno de 1px em tinta a 0,3, sem raio e sem preenchimento, com a
   largura toda à direita do eixo. Rótulo em Mono 11 caixa alta, como na faixa
   do desktop; palavra nunca parte, a célula cresce em altura. */
[data-tl-rot]{position:relative;display:block;border:1px solid var(--tinta-30);border-radius:0;padding:10px 12px;font:500 var(--size-caption)/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tinta);-webkit-hyphens:none;hyphens:none;overflow-wrap:normal}
/* O fio sai do ponto sobre o eixo e encosta na borda esquerda da célula. */
[data-tl-rot]::before{content:"";position:absolute;left:-17px;top:calc(var(--tl-linha) - 1.5px);width:16px;height:1px;background:var(--tinta-30)}
[data-tl-marco][data-tl-ativo] [data-tl-agora]{color:var(--diagram-critical)}
[data-tl-marco][data-tl-ativo]::after{background:var(--diagram-critical)}
/* O marco atual leva o mesmo contorno e preenchimento da faixa do desktop. */
[data-tl-marco][data-tl-ativo] [data-tl-rot]{border-color:var(--diagram-critical);background:var(--diagram-critical-wash)}
/* Abaixo de 360px a célula fica com 109px e DIVERSIFICAÇÃO, com 105px em Mono
   11, passaria da borda. Só nessas telas a moldura e a célula cedem respiro
   horizontal; o cartão mantém os 16px, para as marcas de canto não caírem
   sobre a moldura, e o rótulo continua em Mono 11. */
@media (max-width:359px){
[data-jor-fig]{padding-left:var(--space-1);padding-right:var(--space-1)}
[data-tl-rot]{padding-left:8px;padding-right:8px}
}

/* ============================= SERVIÇOS ================================
   Quatro frentes, uma linha cada: numeral na coluna de rótulo, título em
   20ch e a lista de termos ocupando o resto. */
[data-frentes]{margin-top:var(--space-5)}
[data-frente]{position:relative;display:grid;grid-template-columns:var(--label-col) minmax(0,1fr);gap:var(--label-gap);align-items:start;padding:var(--space-3) 0;background:transparent;transition:background-color var(--motion-instant) var(--ease-state)}
[data-frente]:hover{background:var(--surface-sunken)}
[data-frente] > [data-fio="h"]{position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule)}
[data-frente-num]{font:500 var(--size-label)/var(--lh-label) var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ferrugem);padding-left:var(--space-2)}
[data-frente-in]{display:grid;grid-template-columns:minmax(0,20ch) minmax(0,1fr);gap:var(--label-gap);align-items:baseline}
[data-frente-t]{margin:0;font:500 var(--size-t4)/1.3 var(--font-sans)}
[data-frente-l]{margin:0;font:400 var(--size-body-sm)/1.75 var(--font-sans);color:var(--text-body);transition:color var(--motion-instant) var(--ease-state)}
[data-frente]:hover [data-frente-l]{color:var(--tinta)}
[data-frentes-fim]{height:1px;background:var(--rule)}
[data-ia-bloco]{border:1px solid var(--rule);
  background-image:linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule)),linear-gradient(var(--rule),var(--rule));
  background-repeat:no-repeat;
  background-size:16px 1px,1px 16px,16px 1px,1px 16px,16px 1px,1px 16px,16px 1px,1px 16px;
  background-position:12px 12px,12px 12px,right 12px top 12px,right 12px top 12px,left 12px bottom 12px,left 12px bottom 12px,right 12px bottom 12px,right 12px bottom 12px;
  padding:var(--space-4);margin-top:var(--space-4);display:grid;grid-template-columns:var(--label-col) minmax(0,1fr);gap:var(--label-gap);align-items:center}
[data-ia-icone]{display:flex;align-items:center;justify-content:center;color:var(--ferrugem)}
[data-ia-txt]{display:flex;flex-direction:column;gap:8px}
[data-ia-t]{margin:0;font:500 var(--size-label)/var(--lh-label) var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tinta)}
[data-ia-p]{margin:0;font:400 var(--size-caption)/1.6 var(--font-mono);letter-spacing:var(--track-caption);text-transform:uppercase;color:var(--text-muted)}
/* A coluna da direita chegava a 40px e quebrava uma palavra por linha. Aqui
   cada frente é um bloco só, com o fio de cima marcando a divisão. */
@media (max-width:767px){
[data-frente]{grid-template-columns:minmax(0,1fr);gap:10px}
[data-frente-num]{padding-left:0;font-size:var(--size-caption)}
[data-frente-in]{grid-template-columns:minmax(0,1fr);gap:6px}
[data-frente-t]{font-size:18px}
[data-frente-l]{font-size:14px;line-height:1.6}
[data-ia-bloco]{grid-template-columns:minmax(0,1fr);gap:var(--space-2);align-items:start;padding:var(--space-3)}
[data-ia-icone]{justify-content:flex-start}
}

/* ======================= COMO EU TRABALHO ==============================
   Sequência de cima para baixo: cada cartão entra no seu tempo e os fios se
   desenham entre eles. O estado final é o padrão do HTML — a lógica só
   esconde depois de declarar que o JS está de pé (data-anim), então sem JS o
   diagrama aparece inteiro e parado. */
@keyframes passoEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
[data-processo][data-anim] [data-passo]{opacity:0}
[data-processo][data-anim="correndo"] [data-passo]{animation:passoEntra var(--motion-enter) var(--ease-out) var(--passo-delay,0ms) both}
@media (prefers-reduced-motion:reduce){[data-processo][data-anim] [data-passo]{opacity:1;animation:none}}
[data-processo-desk]{margin-top:var(--space-5);position:relative}
[data-regua]{height:24px;display:flex;align-items:flex-end;justify-content:space-between;font:400 var(--size-caption)/1 var(--font-mono);letter-spacing:var(--track-caption);text-transform:uppercase;color:var(--text-muted)}
[data-grade]{position:absolute;left:0;right:0;top:32px;pointer-events:none}
[data-grade-in]{border-right:1px solid color-mix(in srgb,var(--tinta) 5%,transparent);border-bottom:1px solid color-mix(in srgb,var(--tinta) 5%,transparent)}
[data-grade] svg{display:block;width:100%}
/* A borda direita de cada degrau é fixa; o deslocamento à esquerda é que cede,
   o quanto precisar, para nenhum card ficar abaixo de 260px de largura. */
[data-processo]{--o2:min(20.8333%,70.8333% - 260px);--o3:min(54.1667%,87.5% - 260px);--o4:min(75%,100% - 260px);position:relative;margin-top:8px;display:grid;grid-template-rows:repeat(4,1fr);row-gap:24px}
/* Os quatro degraus são trilhas 1fr de uma grade só: nenhuma altura em px, e a
   fileira inteira assume a altura do card de maior conteúdo na largura atual. */
[data-degrau]{position:relative;display:grid;margin:0 24px}
[data-card]{justify-self:start;padding:12px;display:flex;flex-direction:column;gap:8px}
[data-passo-rot]{font:500 var(--size-label)/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tinta)}
[data-passo-p]{margin:0;font:400 var(--size-body-sm)/var(--lh-body-sm) var(--font-sans);color:var(--tinta)}

/* O diagrama em escada precisa de largura: abaixo de 1100px ele sai e as
   quatro etapas viram pilha, com uma seta vertical no lugar da diagonal. */
[data-processo-mob]{display:none}
@media (max-width:1099px){
[data-processo-desk]{display:none}
[data-processo-mob]{display:flex;flex-direction:column;gap:0;margin-top:var(--space-4)}
}
[data-etapa]{padding:12px;display:flex;flex-direction:column;gap:8px}
[data-etapa-rot]{font:500 var(--size-caption)/1.4 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tinta)}
[data-etapa-p]{margin:0;font:400 15px/1.55 var(--font-sans);color:var(--tinta)}
[data-etapa-seta]{align-self:center;display:block;width:1px;height:16px;background:var(--tinta)}
/* O conector desce da base do card da etapa 02 e encosta na bandeira, como no
   diagrama do desktop: o segmento fica no eixo da bandeira, não depois do fio. */
[data-marco-mob]{position:relative;display:flex;align-items:center;gap:8px;margin:16px 0}
[data-marco-vert]{position:absolute;left:0;top:-16px;bottom:calc(50% - 6px);width:1px;background:var(--tinta)}
[data-marco-mob] [data-marco-fio]{flex:0 0 24px;height:1px;background:var(--tinta)}
[data-marco-mob] [data-marco-rot]{font:400 var(--size-caption)/1.4 var(--font-mono);letter-spacing:var(--track-caption);text-transform:uppercase;color:var(--tinta)}

/* =============================== SOBRE =================================
   Texto na coluna larga à esquerda, retrato na estreita à direita e
   espelhado, para o olhar do desenho voltar para o texto. */
#sobre{--motion-enter:240ms}
[data-sobre-grid]{display:grid;grid-template-columns:minmax(0,640px) auto;column-gap:var(--label-gap);align-items:start;margin-top:var(--space-5)}
/* A largura do retrato é uma função contínua da viewport — 26vw, travada em 180
   e 520px. As travas são pontas de segurança, não estados de layout: não existe
   breakpoint de retrato, e a trilha da grade é auto para não impor largura. */
[data-retrato-col]{position:relative;width:clamp(180px,26vw,520px);height:auto;max-width:none}
/* O quadro do arquivo tem faixa vazia acima da cabeça: o recuo negativo sobe o
   desenho até o topo encostar na primeira linha do texto. Óptico, não de caixa. */
[data-retrato-alfa]{display:block;width:100%;height:auto;aspect-ratio:3 / 4;object-fit:cover;transform:scaleX(-1);margin-top:-32%}
[data-retrato-fonte]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* O retrato é o primeiro filho no DOM para que no telefone ele venha antes dos
   parágrafos sem depender de order; no desktop a posição é declarada na grade,
   e o visual não muda. */
[data-sobre-txt]{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start}
[data-retrato-wrap]{grid-column:2;grid-row:1;width:fit-content;max-width:none;justify-self:start}
[data-sobre-p]{margin:0;font:400 var(--size-body)/1.6 var(--font-sans);color:var(--text-body);text-wrap:pretty}
[data-sobre-p]+[data-sobre-p]{margin-top:var(--space-2)}
[data-sobre-set]{width:100%;margin-top:var(--space-5)}
[data-sobre-set-lb]{font:400 var(--size-caption)/var(--lh-caption) var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-2)}
[data-sobre-btn]{margin-top:56px}
@media (max-width:1100px){[data-sobre-grid]{grid-template-columns:minmax(0,1fr) auto}}
@media (max-width:899px){
[data-sobre-grid]{grid-template-columns:minmax(0,640px);row-gap:var(--space-4)}
[data-sobre-txt],[data-retrato-wrap]{grid-column:1;grid-row:auto}
[data-retrato-alfa]{margin-top:0}
}

/* O grid de contato da home alinha ao topo; o da página Sobre estica. */
[data-contato-grid]{align-items:start}