/* ==========================================================================
   間 MA · base do sistema
   Tokens, primitivos e componentes compartilhados pelas duas versões do site.
   O layout de cada versão vive no <style> da própria página.

   Regra que rege tudo: um único gesto vermelho por tela.
   ========================================================================== */

/* fontes: carregadas por <link> no HTML — @import serializa a rede. */

:root{
  /* --- 地 · papéis. Frios, não creme: washi de kōzo sem branqueamento ----- */
  --papel:        #E1E8E7;
  --papel-alto:   #EFF4F3;
  --papel-recuo:  #D0D9D8;
  --concha:       #FAFDFC;   /* 胡粉 gofun — só sobre tinta */

  /* --- 墨 · diluições de tinta. Hierarquia é diluição, nunca opacity ------
     As razões abaixo são medidas contra --papel-recuo, o mais escuro dos
     fundos (o do rodapé), e não contra --papel. Calibrar pelo --papel deixava
     --tinta-agua em 4,2:1 nas rubricas do rodapé: passava no resto do site e
     falhava justamente lá. Piso vale pelo pior fundo, não pelo mais comum. */
  --tinta:        #1B1A17;   /* 濃墨   12,1:1 */
  --tinta-media:  #4A4842;   /* 中墨    6,4:1 */
  --tinta-agua:   #5E5B53;   /* 淡墨    4,7:1 */
  --tinta-nevoa:  #847F76;   /* 極淡墨  3,2:1 — nunca abaixo de 24px */
  --fio-forte:    #6C6B6B;   /* 鈍色    4,3:1 — borda de campo */
  --cinza-fio:    #B4BAB8;   /* 白鼠 — fio. Nunca texto */
  --fio:          rgba(27,26,23,.13);

  /* --- O gesto único ----------------------------------------------------- */
  --selo:         #C9171E;   /* 紅赤 beniaka · 4,7:1 */

  /* --- 尺 · módulo derivado do 半間 (910 mm) e do pilar (105 mm) ---------- */
  --modulo:  164px;
  --pilar:    19px;
  --medida:  530px;          /* coluna de texto ≈ 62ch */
  --esteira: 347px;         /* 畳 tatami · 2 módulos + 1 pilar */
  --trilha: 1079px;          /* 6 módulos + 5 pilares */

  /* --- 角目 · espaço em √2, como o verso do esquadro de carpinteiro ------- */
  --vao-1:6px;   --vao-2:8px;   --vao-3:12px;  --vao-4:17px;
  --vao-5:24px;  --vao-6:34px;  --vao-7:48px;  --vao-8:68px;
  --vao-9:96px;  --vao-10:136px; --vao-11:192px; --vao-12:272px;

  /* --- 字 · escala tipográfica em 2^(1/4) a partir de 17 ------------------ */
  --esc-1:12px;  --esc-2:14px;  --esc-3:17px;  --esc-4:20px;  --esc-5:24px;
  --esc-6:29px;  --esc-7:34px;  --esc-8:41px;  --esc-9:48px;  --esc-10:58px;
  --esc-11:68px; --esc-12:81px; --esc-13:96px;

  --serif:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --sans: 'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  --mono: ui-monospace,'SF Mono',Menlo,monospace;

  --permanencia:cubic-bezier(.16,1,.3,1);   /* 残心 — assenta, não quica */
  --dur:.45s;
  --espera:90ms;            /* 序破急 — o intervalo entre irmaos que entram */
}

*{margin:0;padding:0;box-sizing:border-box;border-radius:0;box-shadow:none;text-shadow:none}
/* O atributo hidden precisa ganhar de qualquer display de autor. Sem isto,
   .cc-m{display:grid} e .legal__indice ul{display:flex} vencem o display:none
   do navegador — e um modal 'escondido' vira uma camada invisivel de tela
   cheia que engole todo clique e hover da pagina. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:var(--esc-3);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* A selecao do navegador era a unica cor fora da paleta na pagina inteira.
   胡粉 sobre 紅赤 da 5,66:1 — acima do minimo AA, entao o gesto e legivel
   e nao so bonito. */
::selection{background:var(--selo);color:var(--concha)}
::-moz-selection{background:var(--selo);color:var(--concha)}

:focus-visible{outline:2px solid var(--selo);outline-offset:3px}
.btn--selo:focus-visible{outline-color:var(--tinta)}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* --- Tipografia ---------------------------------------------------------- */
.display{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.012em;text-wrap:balance}
.titulo{font-family:var(--serif);font-weight:400;line-height:1.3}
.rotulo{
  font-family:var(--sans);font-size:var(--esc-1);font-weight:500;
  letter-spacing:.22em;word-spacing:-.1em;text-transform:uppercase;color:var(--tinta-agua);
}
.jp{font-family:var(--serif);font-feature-settings:'palt' 1}
.num{font-variant-numeric:tabular-nums slashed-zero}
.medida{max-width:var(--medida)}
p{color:var(--tinta-media)}
strong{color:var(--tinta);font-weight:500}
em{font-style:normal;color:var(--tinta)}

/* --- Selo 千 · 白文, traço branco em campo vermelho ---------------------- */
/* 朱肉 em todos os selos, a pedido. O documento manda desligar abaixo de 48px
   — a 26 e 30px o ruido tem frequencia menor que o pixel e tende a cintilar
   em vez de texturizar. Se embolar na tela, o ajuste e baixar o baseFrequency
   do filtro, nao remover daqui. */
.selo{display:block;flex:0 0 auto;filter:url(#niku)}
.selo rect{fill:var(--selo)}
.selo g{stroke:var(--papel);fill:none;stroke-linecap:butt}

/* --- Botões · o hover esvazia o campo e deixa o traço -------------------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--vao-3);
  font-family:var(--sans);font-size:var(--esc-2);font-weight:500;letter-spacing:.02em;
  padding:15px 32px;border:1px solid var(--tinta);background:var(--tinta);color:var(--papel);
  border-radius:0;cursor:pointer;
  transition:background var(--dur) var(--permanencia),
             color var(--dur) var(--permanencia),
             border-color var(--dur) var(--permanencia);
}
.btn:hover{background:transparent;color:var(--tinta)}
.btn--linha{background:transparent;color:var(--tinta);border-color:var(--fio-forte)}
.btn--linha:hover{border-color:var(--tinta);background:var(--tinta);color:var(--papel)}
/* .btn.btn--selo e nao .btn--selo: com duas classes a especificidade vira
   (0,2,0) e ganha de qualquer ".algo a" (0,1,1) que exista na pagina. Sem
   isto, o estilo de link do texto legal sequestrava a cor e o botao vermelho
   ficava com tinta escura em cima — 3:1 de contraste. */
.btn.btn--selo{background:var(--selo);border-color:var(--selo);color:var(--concha)}
.btn.btn--selo:hover{background:transparent;color:var(--selo)}
.btn.btn--linha{background:transparent;color:var(--tinta);border-color:var(--fio-forte)}
.btn.btn--linha:hover{border-color:var(--tinta);background:var(--tinta);color:var(--papel)}
.btn--selo:hover{background:transparent;color:var(--selo)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}

/* --- Marcadores: fio embaixo, sem pílula, sem fundo ---------------------- */
.marca-tag{
  font-family:var(--sans);font-size:var(--esc-1);letter-spacing:.14em;word-spacing:-.08em;
  text-transform:uppercase;color:var(--tinta-media);
  padding-bottom:var(--vao-1);border-bottom:1px solid var(--fio-forte);
}

/* --- Campos de formulário ------------------------------------------------ */
.campo{display:flex;flex-direction:column;gap:var(--vao-1)}
.campo label{font-family:var(--sans);font-size:var(--esc-1);letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-agua)}
.campo input,.campo textarea,.campo select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--fio-forte);
  /* 10px embaixo cortavam a perna do p e a cedilha do ç no 17px do sistema */
  padding:11px 0 16px;line-height:1.45;
  font-family:var(--sans);font-size:var(--esc-3);color:var(--tinta);
  border-radius:0;
  transition:border-color var(--dur) var(--permanencia),
             border-bottom-width var(--dur) var(--permanencia);
}
/* 墨池 · o poco. Um retangulo de 370px com so um fio embaixo nao le como
   campo; recuado no papel, le. Mantem raio zero e sombra zero. */
.campo textarea{
  /* sem alca de resize e sem fundo proprio: a borda ja diz que e uma caixa,
     e um segundo tom aqui brigava com o papel elevado da secao. */
  resize:none;min-height:104px;line-height:1.7;
  background:transparent;border:1px solid var(--fio-forte);
  padding:14px 16px;
}
.campo textarea:focus{border-color:var(--fio-forte);border-bottom-color:var(--selo);padding-bottom:12px}
/* Sem anel de contorno: so a linha embaixo marca o foco. Ela passa de 1px
   cinza para 3px vermelha — cor e espessura mudam juntas para o estado ser
   perceptivel sem o anel. */
.campo input:focus,.campo textarea:focus,.campo select:focus{
  border-bottom-color:var(--selo);border-bottom-width:3px;padding-bottom:14px;
}
.campo input:focus-visible,.campo textarea:focus-visible,.campo select:focus-visible{outline:none}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tinta-agua)}
.campo input,.campo textarea,.campo select{appearance:none;-webkit-appearance:none}
.campo select{cursor:pointer;background-image:none}
.campo-select{position:relative}
.campo-select::after{
  content:'';position:absolute;right:2px;bottom:20px;width:7px;height:7px;
  border-right:1px solid var(--tinta-agua);border-bottom:1px solid var(--tinta-agua);
  transform:rotate(45deg);pointer-events:none;
}

/* --- Utilitários de fluxo ------------------------------------------------ */
/* 1079px de CONTEUDO — a trilha declarada — mais a calha externa. */
.env{max-width:calc(var(--trilha) + var(--vao-7)*2);margin:0 auto;padding:0 var(--vao-7)}
.pilha{display:flex;flex-direction:column}
.linha{display:flex;flex-wrap:wrap;align-items:center;gap:var(--vao-4)}
.fio{border:0;border-top:1px solid var(--fio)}
.rolagem{overflow-x:auto;max-width:100%}

@media (max-width:820px){
  .env{padding:0 var(--vao-5)}
  /* nada de 16px: nao e degrau da escala e fica abaixo do piso do mincho */
}

/* ==========================================================================
   Componentes compartilhados pelo site e pelas paginas legais.
   ========================================================================== */

/* --- Salto de teclado: primeiro foco da pagina ---------------------------- */
.pular{
  position:absolute;left:var(--vao-5);top:-64px;z-index:100;
  padding:12px 20px;background:var(--tinta);color:var(--papel);
  font-size:var(--esc-2);transition:top var(--dur) var(--permanencia);
}
.pular:focus{top:var(--vao-3)}

/* Ancoras nunca ficam sob o cabecalho fixo: altura dele + folga de respiro.
   A altura mora numa variavel porque o cabecalho tem TRES alturas. Sem a nav
   no celular ele vira uma faixa so e encolhe para 70px; abaixo de 358px a
   marca e as acoes deixam de caber lado a lado, ele volta a duas faixas e vai
   a 114px. Medido, nao estimado — com um valor so, a ancora pousava atras do
   cabecalho e a primeira linha da secao nascia coberta.
   A virada depende do ROTULO DO BOTAO, que muda por pagina: "Talk to me"
   vira em 342, "Message me" em 354, "Falar comigo" em 358 e "Start a project"
   (privacy-policy e terms-of-use em ingles) so em 378. Vale o pior caso dos
   quatro. Onde o cabecalho ja cabe numa faixa antes disso, declarar 114 tendo
   70 so gasta folga branca acima da secao; o min-height do heroi nem sente,
   porque no celular quem manda na altura e o conteudo. Subestimar e que faz
   a secao nascer atras do cabecalho.
   Se um desses rotulos mudar, remedir: o numero abaixo depende deles. */
:root{--topo-h:84px}
@media (max-width:820px){:root{--topo-h:70px}}
@media (max-width:377px){:root{--topo-h:114px}}
:target{scroll-margin-top:calc(var(--topo-h) + var(--vao-5))}

/* --- Cabecalho ----------------------------------------------------------- */
.topo{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--papel) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color var(--dur) var(--permanencia);
}
.topo.rolou{border-bottom-color:var(--fio)}
/* padding-block, NUNCA o atalho `padding`: o atalho zerava o recuo lateral
   herdado de .env e o cabecalho descolava do corpo em toda largura. */
.topo__i{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--vao-5);padding-block:var(--vao-4);
}
/* A marca e uma peca so, nao um simbolo ao lado de um texto. Selecionavel,
   ela se revela como duas coisas coladas — e arrastar o cursor por cima
   quebra a ilusao de objeto. Por isso o par inteiro sai da selecao.
   Nao afeta leitor de tela: o conteudo continua no DOM e o aria-label
   descreve o conjunto. */
.marca{display:flex;align-items:center;gap:var(--vao-3);flex:0 0 auto;
  user-select:none;-webkit-user-select:none}
.marca__n{font-family:var(--serif);font-size:var(--esc-4);letter-spacing:-.01em;white-space:nowrap}
.btn--compacto{padding:11px 22px}

/* Navegacao do cabecalho (migrou junto com .topo; some abaixo de 820px) */
.nav{display:flex;gap:var(--vao-7);font-size:var(--esc-2);color:var(--tinta-media)}
.nav a{padding-bottom:2px;border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--permanencia),color var(--dur) var(--permanencia)}
.nav a:hover{color:var(--tinta);border-bottom-color:var(--selo)}
/* --- Cabecalho no celular ------------------------------------------------
   A nav sai do cabecalho abaixo de 820px, por decisao do Yuri. Os quatro
   destinos continuam no rodape, que passa a ser a unica navegacao por link
   no celular — a pagina tem ~14.000px, entao so se chega la rolando tudo.
   display:none e nao remocao do DOM: o link segue rastreavel e o rodape
   repete os mesmos quatro destinos. */
@media (max-width:820px){
  /* gap DEPOIS de row-gap zerava o row-gap: o atalho reseta os dois eixos.
     Por isso column-gap explicito, e nunca o atalho, deste lado.
     O wrap fica: sem a nav sobram duas pecas, mas ate 358px a marca e as
     acoes ainda nao cabem lado a lado e precisam poder descer. */
  .topo__i{flex-wrap:wrap;column-gap:var(--vao-4);row-gap:var(--vao-2);padding-block:var(--vao-3)}
  .nav{display:none}
  /* Sem o nowrap "Falar comigo" quebra em duas linhas e sozinho puxa a
     faixa para 74px de altura. */
  .btn--compacto{white-space:nowrap;padding:9px 16px}
}

/* --- Rodape · o 落款印 fecha o documento --------------------------------- */
/* ==========================================================================
   Transicao entre paginas · sem piscada
   O navegador troca o documento inteiro e por isso pisca. Com view-transition
   ele mantem os dois quadros e faz a troca por cima: o cabecalho e o rodape
   sao nomeados, entao ficam parados enquanto so o miolo muda.
   Onde nao houver suporte, a navegacao acontece do jeito de sempre.
   ========================================================================== */
@view-transition{navigation:auto}

.topo{view-transition-name:topo}
.rodape{view-transition-name:rodape}
main{view-transition-name:miolo}

@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(miolo),
  ::view-transition-new(miolo){animation-duration:.28s;animation-timing-function:var(--permanencia)}
  /* o que fica parado nao anima: sem isto o cabecalho tambem faria cross-fade */
  ::view-transition-group(topo),
  ::view-transition-group(rodape){animation:none}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* 白練 no rodape: ele fecha a pagina e por isso se separa do chao, do mesmo
   jeito que as secoes de acao. Vale em todas as paginas. */
/* 灰白 haihaku · o recuo. Mais escuro que o papel, nao mais claro: o rodape
   fecha a pagina afundando, e nao flutuando como as secoes de acao. */
.rodape{background:var(--papel-recuo);padding-block:var(--vao-8) var(--vao-5)}
.rodape__g{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--vao-7);
  padding-bottom:var(--vao-6);border-bottom:1px solid var(--fio);
}
.rodape h2{
  font-size:var(--esc-1);letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-agua);font-weight:500;margin-bottom:var(--vao-4);
}
.rodape__t{margin-top:var(--vao-4);font-size:var(--esc-2);max-width:26ch}
.rodape__c{display:flex;flex-direction:column;gap:var(--vao-3);font-size:var(--esc-2);color:var(--tinta-media);overflow-wrap:anywhere}
.rodape__c a{padding-bottom:1px;border-bottom:1px solid transparent;transition:border-color var(--dur) var(--permanencia)}
.rodape__c a:hover{color:var(--tinta);border-bottom-color:var(--fio-forte)}
.rodape__f{
  /* centro, nao base: a assinatura fica na meia-altura do carimbo, como quem
     assina ao lado do selo e nao embaixo dele. */
  display:flex;justify-content:space-between;align-items:center;gap:var(--vao-7);
  padding-top:var(--vao-6);font-size:var(--esc-1);color:var(--tinta-agua);
}
/* 落款印 · a variante de carimbo: gira -1,4 grau (carimbo nunca sai alinhado)
   e ganha a textura de 朱肉. So vale a partir de 48px — abaixo disso a doutrina
   manda desligar, porque o ruido vira sujeira em vez de vestigio de tinta. */
.rakkan{transform:rotate(-1.4deg);filter:url(#niku)}
@media (prefers-reduced-motion:reduce){.rakkan{filter:url(#niku)}}

/* ==========================================================================
   Paginas legais
   ========================================================================== */
.legal__abertura{padding-block:var(--vao-10) var(--vao-8)}
.legal__titulo{
  font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.018em;
  font-size:clamp(38px,6vw,var(--esc-12));margin-top:var(--vao-4);max-width:16ch;
}
.legal__lead{margin-top:var(--vao-5);max-width:var(--medida);font-size:var(--esc-4);line-height:1.65}
.legal__meta{margin-top:var(--vao-5);font-size:var(--esc-2);color:var(--tinta-agua)}
.legal__corpo{padding-bottom:var(--vao-11)}
.legal__g{display:grid;grid-template-columns:var(--esteira, 260px) 1fr;gap:var(--vao-9);align-items:start}

.legal__indice{position:sticky;top:calc(84px + var(--vao-5))}
.legal__indice ul{list-style:none;margin-top:var(--vao-4);display:flex;flex-direction:column;gap:var(--vao-3)}
.legal__indice a{
  font-size:var(--esc-2);color:var(--tinta-media);line-height:1.45;
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--permanencia),color var(--dur) var(--permanencia);
}
.legal__indice a:hover{color:var(--tinta);border-bottom-color:var(--selo)}
/* 栞 shiori · o marcador. A secao em que a leitura esta ganha tinta cheia e um
   fio vermelho a esquerda — o mesmo gesto que marca a recusa nos servicos.
   So existe com JS: sem ele todos os itens ficam legiveis do mesmo jeito. */
.legal__indice a{position:relative}
.js-indice .legal__indice a.e-aqui{color:var(--tinta)}
.js-indice .legal__indice a.e-aqui::before{
  content:'';position:absolute;left:calc(var(--vao-4) * -1);top:50%;
  width:2px;height:1.1em;margin-top:-.55em;background:var(--selo);
}

.legal__texto{max-width:var(--medida)}
.legal__texto h2{
  font-family:var(--serif);font-weight:400;font-size:var(--esc-6);line-height:1.25;
  margin-top:var(--vao-9);margin-bottom:var(--vao-5);
}
.legal__texto h2:first-child{margin-top:0}
.legal__texto h3{
  font-family:var(--serif);font-weight:500;font-size:var(--esc-4);
  margin-top:var(--vao-6);margin-bottom:var(--vao-3);
}
.legal__texto p{margin-bottom:var(--vao-5);line-height:1.8}
.legal__texto .legal__abre{font-size:var(--esc-4);color:var(--tinta);line-height:1.65;margin-bottom:var(--vao-7)}
.legal__texto ul{list-style:none;margin:0 0 var(--vao-5)}
.legal__texto li{position:relative;padding-left:var(--vao-5);margin-bottom:var(--vao-3);line-height:1.75;color:var(--tinta-media)}
.legal__texto li::before{content:'';position:absolute;left:0;top:14px;width:11px;height:1px;background:var(--fio-forte)}
/* :not(.btn) porque "a" no seletor levava a especificidade para 0,1,1 e
   sequestrava a cor de qualquer botao dentro do texto legal — o botao
   vermelho ficava com tinta escura em cima, 3:1 de contraste. */
.legal__texto a:not(.btn){
  color:var(--tinta);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.22em;
}
.legal__texto a:not(.btn):hover{text-decoration-color:var(--selo)}

/* Campo que ainda depende de dado do cliente — visivel de proposito. */
.pendente{
  background:color-mix(in srgb,var(--selo) 12%,transparent);
  border-bottom:1px solid var(--selo);padding:1px 4px;color:var(--tinta);
  font-family:var(--mono);font-size:.9em;
}

@media (max-width:900px){
  .legal__g{grid-template-columns:1fr;gap:var(--vao-7)}
  .legal__indice{position:static}
  .legal__indice ul{gap:var(--vao-2)}
  .rodape__g{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .rodape__g{grid-template-columns:1fr;gap:var(--vao-6)}
  /* segue em linha no celular: a assinatura a esquerda e o carimbo a direita,
     como num 掛物. Empilhado, o selo caia para baixo e a esquerda, perdendo o
     par com a assinatura. O texto quebra em duas linhas e tudo bem. */
  .rodape__f{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--vao-5)}
  .rodape__f span{flex:1 1 auto;min-width:0}
  .rodape__f .selo{flex:0 0 auto}
  .legal__abertura{padding-block:var(--vao-8) var(--vao-7)}
  .rodape{padding-block:var(--vao-7) var(--vao-5)}
}

/* --- Containers vindos da conversao das paginas legais ------------------- */
.legal__bloco{display:block}
.legal__bloco + .legal__bloco{margin-top:var(--vao-8)}
.legal__defs{margin:var(--vao-5) 0}
.legal__def{padding-top:var(--vao-4);border-top:1px solid var(--fio)}
.legal__def + .legal__def{margin-top:var(--vao-5)}
.legal__def-t{
  font-family:var(--serif);font-size:var(--esc-4);color:var(--tinta);
  margin-bottom:var(--vao-2);
}
.legal__def-d{margin:0;color:var(--tinta-media);line-height:1.75}
.legal__contato{
  margin-top:var(--vao-8);padding-top:var(--vao-5);
  border-top:2px solid var(--tinta);
}
.legal__acoes{display:flex;flex-wrap:wrap;gap:var(--vao-4);margin-top:var(--vao-5)}

/* ==========================================================================
   Revelacao no scroll · so existe com JS (a classe vem de la)
   ========================================================================== */
/* 残心 · assenta, nao quica: sobe um pouco e para seco, sem escala, sem
   giro, sem sombra. O deslocamento e de um 角目 (--vao-4, 17px), nao um
   numero solto, e irmaos entram em 序破急 — um atras do outro, nunca juntos.
   O heroi nunca entra nisto: ele e o LCP da pagina.                        */
.js-revela .revela{
  opacity:0;transform:translateY(var(--vao-4));
  transition:opacity .9s var(--permanencia),transform .9s var(--permanencia);
  transition-delay:calc(var(--i,0) * var(--espera));
}
.js-revela .revela.e-vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-revela .revela{opacity:1;transform:none;transition:none}
}

/* --- Duvidas: altura animada (o height vem do JS) ----------------------- */
.duvida .resposta{overflow:hidden;transition:height .42s var(--permanencia)}
@media (prefers-reduced-motion:reduce){ .duvida .resposta{transition:none} }

/* --- Indice legal dobravel no celular ----------------------------------- */
.legal__indice-b{
  display:flex;align-items:center;justify-content:space-between;gap:var(--vao-4);
  width:100%;background:none;border:0;border-bottom:1px solid var(--fio);
  padding:0 0 var(--vao-3);cursor:pointer;text-align:left;font:inherit;
  font-size:var(--esc-1);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tinta-agua);
}
.legal__indice-s{position:relative;width:11px;height:1px;background:var(--tinta-agua);flex:0 0 auto}
.legal__indice-s::before{content:'';position:absolute;inset:0;margin:auto;width:1px;height:11px;
  background:var(--tinta-agua);transition:opacity var(--dur) var(--permanencia)}
.legal__indice-b[aria-expanded="true"] .legal__indice-s::before{opacity:0}

/* ==========================================================================
   Consentimento de cookies
   O primario aqui e TINTA, nao o selo: o banner cobre uma tela que ja tem
   o seu unico gesto vermelho.
   ========================================================================== */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--papel-alto);border-top:1px solid var(--tinta);
  transform:translateY(101%);transition:transform .5s var(--permanencia);
}
.cc.e-vis{transform:none}
.cc__i{display:grid;grid-template-columns:5fr 4fr;gap:var(--vao-7);
  align-items:end;padding-block:var(--vao-6)}
.cc__t{font-family:var(--serif);font-size:var(--esc-5);color:var(--tinta)}
.cc__d{margin-top:var(--vao-2);font-size:var(--esc-2);line-height:1.7;max-width:64ch}
.cc__d a{text-decoration:underline;text-underline-offset:.2em;color:var(--tinta)}
/* As tres acoes numa linha so. O "personalizar" fica no fim como texto, nao
   como botao: ele nao decide nada, so abre a escolha detalhada. */
.cc__acoes{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--vao-4);justify-content:flex-end}
.cc__acoes .btn{white-space:nowrap}
.cc__link{
  background:none;border:0;padding:4px 0;cursor:pointer;font:inherit;
  font-size:var(--esc-2);color:var(--tinta-media);
  border-bottom:1px solid var(--fio-forte);
}
.cc__link:hover{color:var(--tinta);border-bottom-color:var(--tinta)}

.cc-m{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:var(--vao-5)}
.cc-m__fundo{position:absolute;inset:0;background:color-mix(in srgb,var(--tinta) 55%,transparent)}
/* Mesma pele da ficha do projeto: papel elevado e o fio vermelho no topo.
   Sem rolagem interna — o conteudo foi encurtado para caber inteiro. E a
   entrada anima so o deslocamento: se a transicao nao rodar, o pior caso e
   nascer 10px abaixo, nunca invisivel. */
.cc-m__p{
  position:relative;width:min(640px,100%);
  background:var(--papel-alto);border-top:2px solid var(--selo);
  padding:var(--vao-7);
  transform:translateY(10px);
  transition:transform .35s var(--permanencia);
}
.cc-m.e-abre .cc-m__p{transform:none}
.cc-m__cab{display:grid;grid-template-columns:1fr auto;gap:var(--vao-5);align-items:start}
.cc-m__t{font-family:var(--serif);font-weight:400;font-size:var(--esc-6);line-height:1.2}
.cc-m__s{margin-top:var(--vao-3);font-size:var(--esc-2);line-height:1.7;max-width:52ch}
.cc-m__x{
  background:none;border:0;cursor:pointer;
  width:40px;height:40px;display:grid;place-items:center;
  line-height:1;font-size:20px;color:var(--tinta-agua);
  transition:color var(--dur) var(--permanencia);
}
.cc-m__x:hover{color:var(--tinta)}
.cc-m__corpo{margin-top:var(--vao-7)}
.cc-m__pe{display:flex;flex-wrap:wrap;gap:var(--vao-3);
  margin-top:var(--vao-7);padding-top:var(--vao-5);border-top:1px solid var(--fio)}

/* Marca quadrada, nunca pilula: 具 fecha o orcamento em 0 raio. */
.cc-cat{display:grid;grid-template-columns:auto 1fr;gap:var(--vao-4);
  padding-block:var(--vao-5);border-top:1px solid var(--fio)}
.cc-cat:first-child{border-top:0;padding-top:0}
.cc-cat__m{position:relative;display:block;width:20px;height:20px;margin-top:3px;cursor:pointer}
.cc-cat__m input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cc-cat__q{display:block;width:20px;height:20px;border:1px solid var(--fio-forte);
  transition:background var(--dur) var(--permanencia),border-color var(--dur) var(--permanencia)}
.cc-cat__m input:checked + .cc-cat__q{background:var(--tinta);border-color:var(--tinta)}
.cc-cat__m input:disabled + .cc-cat__q{background:var(--tinta-nevoa);border-color:var(--tinta-nevoa);cursor:not-allowed}
.cc-cat__m input:disabled{cursor:not-allowed}
.cc-cat__m input:focus-visible + .cc-cat__q{outline:2px solid var(--selo);outline-offset:3px}
.cc-cat__n{font-family:var(--serif);font-size:var(--esc-4);color:var(--tinta)}
.cc-cat__s{font-family:var(--sans);font-size:var(--esc-1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-agua)}
.cc-cat__d{margin-top:var(--vao-2);font-size:var(--esc-2);line-height:1.7}

@media (max-width:820px){
  /* Banner: o texto sobe, as acoes descem, o "personalizar" fica embaixo.
     Base no conteudo e nao em zero: com flex:1 1 0 + min-width:0 os dois
     botoes saiam do mesmo tamanho, e "Recusar nao essenciais" (148px de
     rotulo, nowrap) estourava a caixa em ate 54px abaixo de 425px. Com base
     auto cada um mede o proprio rotulo e, quando os dois nao cabem lado a
     lado, o wrap empilha. Recusar tem de continuar tao legivel quanto aceitar. */
  .cc__i{grid-template-columns:1fr;gap:var(--vao-5);align-items:stretch;padding-block:var(--vao-5)}
  .cc__acoes{flex-wrap:wrap;justify-content:stretch;gap:var(--vao-3)}
  .cc__acoes .btn{flex:1 1 auto;justify-content:center;padding-inline:var(--vao-4)}
  .cc__link{flex:1 1 100%;text-align:center;margin-top:var(--vao-1)}
  .cc__d{max-width:none}

  /* Modal: vira folha de baixo, encostada na borda inferior. Rola a folha
     inteira quando o texto nao couber — nunca so o miolo, que esconderia os
     botoes de decisao acima da dobra. */
  .cc-m{padding:0;place-items:end stretch;overflow-y:auto}
  .cc-m__p{width:100%;max-height:none;padding:var(--vao-6) var(--vao-5) var(--vao-7)}
  .cc-m__cab{grid-template-columns:1fr auto;gap:var(--vao-4)}
  .cc-m__t{font-size:var(--esc-5)}
  .cc-m__corpo{margin-top:var(--vao-6)}
  .cc-cat{gap:var(--vao-3);padding-block:var(--vao-4)}
  .cc-m__pe{flex-wrap:wrap;gap:var(--vao-3);margin-top:var(--vao-6);padding-top:var(--vao-4)}
  .cc-m__pe .btn{flex:1 1 100%;justify-content:center}
}
/* O alvo de toque do fechar nao encolhe junto com o resto */
@media (max-width:820px) and (pointer:coarse){
  .cc-m__x{width:44px;height:44px}
}

/* --- 言語 · o par de idiomas -------------------------------------------------
   Texto, nunca bandeira: bandeira e pais, nao lingua, e o sistema nao usa esse
   tipo de ornamento. A tipografia vem do .rotulo, que ja existe — aqui mora
   so o que e comportamento, para nao duplicar a regra. ---------------------- */
.topo__acoes{display:flex;align-items:center;gap:var(--vao-4)}
.idioma{
  position:relative;
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color var(--dur) var(--permanencia),border-color var(--dur) var(--permanencia);
}
/* "EN" tem 21x25px de caixa: passa na altura e falha na largura do minimo de
   24x24 do WCAG 2.5.8. A area cresce num pseudo, e nao em padding, porque
   padding empurraria o sublinhado para longe do texto — e o sublinhado colado
   e o desenho. 32px cabem nos 17px de vao ate o botao com folga de 11px. */
.idioma::after{
  content:'';position:absolute;left:50%;top:50%;
  translate:-50% -50%;
  width:max(100%,32px);height:max(100%,32px);
}
.idioma:hover{color:var(--tinta);border-bottom-color:var(--selo)}