/* ============================================================
   Tadeu BM — VERSÃO 2, estrutura de poster
   Mesmas cores da v1. Muda a estrutura: grade com fios visíveis,
   display gigante cortado pela borda, blocos geométricos chapados,
   marcas de registro e rótulos verticais.
   Mobile-first: escrever o mobile primeiro, depois min-width.
   ============================================================ */

:root{
  /* --- paleta original, inalterada --- */
  --gold:#F3C734;
  --teal:#0E7B95;
  --ink:#0C0C12;
  --paper:#F7F3E9;
  --paper-2:#FBF9F2;
  --teal-tint:#E4EEF0;
  /* verde: 6,14:1 sobre o --ink (serve para texto), mas so 2,86:1 sobre o
     --paper. Comporta-se como o --gold: cor de preenchimento e de texto
     sobre fundo escuro, NUNCA texto sobre papel. */
  --green:#4AA345;
  /* REGRA: o verde significa UMA coisa — site / presenca digital. Ele aparece
     em tres lugares, e sao os tres que ensinam ou repetem essa categoria:
     a pastilha "Site" do hero, a fita "Presenca digital" e o fio da coluna 03.
     Qualquer outro uso rouba o significado que essas tres instancias ensinam,
     e o site vende coerencia como servico. Destaque generico e --gold; acao
     e --ink. Nao estender esta lista. */

  /* --- derivados --- */
  /* o --teal puro sobre --paper dá 4,46:1, um fio abaixo do mínimo AA de
     4,5:1 para texto normal. Mesma matiz, escurecida, para texto pequeno. */
  --teal-ink:#0A6A80;
  --teal-on-dark:#7FC7DA;
  --ink-soft:#33333c;
  --muted:#6a6a72;

  --container:1240px;
  --pad-x:clamp(1.25rem, 5vw, 3.5rem);
  --section-y:clamp(3.5rem, 9vw, 7.5rem);
  --raio:clamp(16px, 2.5vw, 32px);
  --hair:1px solid var(--ink);
  --hair-soft:1px solid rgba(12,12,18,.18);
  --ease:cubic-bezier(.22,.75,.3,1);
  --head-h:60px;

  /* ESCALA TIPOGRAFICA — 6 degraus de texto + 2 de display.
     Antes eram 22 tamanhos distintos, com pares quase iguais (15,2/16/16,8/
     17,6 e 9,6/9,92/10,24/10,56/10,88) que faziam a pagina parecer acumulada
     em vez de deliberada. Nada de font-size solto: tudo passa por aqui. */
  /* Fraunces no display, Hanken Grotesk no resto. A serifada e a mesma do
     leaflet impresso e da v1 — traz continuidade de marca e cria o contraste
     serifada/sem-serifa que a pagina nao tinha. */
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;

  --t-micro:.66rem;                          /* rotulos, chips, legendas */
  --t-sm:.82rem;                             /* apoio, termos, sublegendas */
  --t-base:clamp(.95rem, 1.4vw, 1.05rem);    /* corpo */
  --t-md:clamp(1.05rem, 1.8vw, 1.2rem);      /* lead, perguntas do FAQ */
  --t-lg:clamp(1.15rem, 2.4vw, 1.45rem);     /* h3, valores medios */
  --t-xl:clamp(1.6rem, 4vw, 2.6rem);         /* numerais, fitas, precos */
  --t-2xl:clamp(1.85rem, 5.5vw, 3.25rem);    /* h2 */
  --t-3xl:clamp(2.75rem, 11vw, 6.5rem);      /* h1 */

  /* MEDIDA DE LEITURA — dois valores, nao seis.
     Antes: 44 / 52 / 54 / 58 / 60 ch convivendo na mesma pagina. */
  --medida:62ch;
  --medida-curta:46ch;
  --frame-h:clamp(420px, 70vh, 640px);
}

@media (max-height:560px){ :root{--frame-h:300px;} }

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{
  background:var(--paper);
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  color:var(--ink-soft);
  font-size:var(--t-base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{max-width:100%;display:block;}

/* Tudo em caixa alta, apertado e sem curva: é a voz dos dois posters. */
/* Caixa alta agora SO em rotulos curtos (menu, botoes, chips, tags, fitas).
   Nos titulos ela sumiu: em serifada de tamanho grande a caixa alta fica
   pesada, e e o formato mais lento de ler para quem tem dislexia. */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.02;
  color:var(--ink);
}
h1{font-size:var(--t-3xl);}
h2{font-size:var(--t-2xl);}
h3{font-size:var(--t-lg);line-height:1.15;}

a{color:var(--teal-ink);}

/* o travessão é o separador dos posters — sempre em teal, nunca clicável */
/* --teal-ink, nao --teal: o teal puro sobre papel da 4,42:1, abaixo do
   minimo AA de 4,5. Sobre fundo escuro o papel se inverte, entao as secoes
   escuras reabrem a excecao logo abaixo. */
i{font-style:normal;color:var(--teal-ink);}
.argument i,.contact i,.site-foot i,.pack-dark i{color:var(--teal-on-dark);}

/* ---------- utilitários ---------- */
.wrap{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--pad-x);
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);
  padding:.75rem 1.25rem;text-decoration:none;font-weight:700;
}
.skip-link:focus{left:0;}

:where(a,button,summary):focus-visible{
  outline:2px solid var(--teal-ink);outline-offset:3px;
}
/* No escuro o teal cai para 3,98:1 e o contorno some. Dourado sobre ink
   da 12,1:1. */
:is(.argument,.page-head,.contact,.site-foot,.pack-dark) :where(a,button,summary):focus-visible,
.browser-frame:focus-visible{
  outline-color:var(--gold);
}
/* O FAB e verde e flutua sobre qualquer fundo: contorno em ink, com um
   halo claro por fora, garante visibilidade nos dois casos. */
.fab:focus-visible{
  outline-color:var(--gold);
  box-shadow:0 0 0 2px var(--paper);
}

#sentinela-topo{position:absolute;top:0;height:1px;width:1px;}

/* ---------- botões: retangulares, sem raio ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.75rem 1.5rem;
  font-size:var(--t-micro);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;border:1px solid transparent;
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease);
}
.btn i{color:inherit;}
.btn-ink{background:var(--ink);color:var(--paper);}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-gold{background:var(--gold);color:var(--ink);}
.btn-line-light{background:transparent;color:var(--paper);border-color:rgba(247,243,233,.4);}

@media (hover:hover){
  .btn-ink:hover{background:var(--teal);}
  .btn-line:hover{background:var(--ink);color:var(--paper);}
  .btn-gold:hover{background:var(--paper);}
  .btn-line-light:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);}
}

/* ============================================================
   HEADER — fio inferior contínuo, como a régua de um poster
   ============================================================ */
.site-head{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:var(--hair);
}
.head-inner{
  min-height:var(--head-h);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.mark{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-display);
  font-weight:700;font-size:var(--t-lg);letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;
}
.mark span{color:var(--teal-ink);}

/* Home: sem menu. O cabecalho carrega so a marca, o atalho para a pagina de
   especialidade e o botao de acao — os tres do mesmo lado direito. */
.head-acoes{display:flex;align-items:center;gap:clamp(.75rem, 2vw, 1.5rem);}
.head-link{
  display:none;align-items:center;min-height:44px;
  color:var(--ink);text-decoration:none;
  font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
/* Some abaixo de 520px: ao lado do botao de WhatsApp ele empurrava a marca
   para fora da linha. Quem esta no celular chega pelo bloco de chamada, que
   e maior e vem logo abaixo do hero. */
@media (min-width:520px){ .head-link{display:inline-flex;} }
@media (hover:hover){ .head-link:hover{color:var(--teal-ink);} }

.nav{display:none;}
/* O "voltar" nao e uma secao da pagina: ganha o fio a direita para ler como
   um grupo separado dos cinco itens numerados. */
.nav-voltar{
  padding-right:1.5rem;margin-right:-.5rem;
  border-right:var(--hair-soft);
}
.nav-voltar i{font-size:1em;}
.nav a{
  display:flex;align-items:center;min-height:44px;gap:.4rem;
  color:var(--ink);text-decoration:none;
  font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.nav a i{font-size:var(--t-micro);color:var(--teal-ink);}
/* O item ativo marca-se por um fio dourado, nao pela cor do numero:
   dourado como texto sobre papel da 1,45:1 e o numero sumia. */
.nav a.is-current{color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold);}
@media (hover:hover){ .nav a:hover{color:var(--teal-ink);} }

.site-head .btn{min-height:44px;padding:.4rem 1rem;}

/* ============================================================
   HERO — cabeçalho em duas colunas + palco geométrico
   ============================================================ */
.hero{padding-top:clamp(2.5rem, 7vw, 5rem);}

/* O hero e a unica area centrada do site. O resto segue alinhado a esquerda
   na mesma linha vertical — o contraste faz o topo ler como capa e o corpo
   como miolo editorial. */
.hero-head{
  display:grid;justify-items:center;gap:clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom:clamp(2rem, 5vw, 3.5rem);
  text-align:center;
}
/* sem max-width: as quebras sao explicitas (.h1-line), entao limitar a
   medida so criaria uma segunda quebra por cima da primeira */
.hero-head h1{max-width:100%;}
.hero-head h1 b{font-weight:700;}
/* O "BM" em azul, como na marca do cabecalho.
   --teal puro, e nao --teal-ink: sobre o papel o teal da 4,42:1, o que reprova
   para texto normal (4,5:1) e foi exatamente o motivo de o --teal-ink existir.
   Aqui a regra que vale e outra — o h1 e texto grande em qualquer largura
   (44px no celular, 104px no desktop, sempre em negrito), e o limiar do WCAG
   para texto grande e 3:1. A 4,42:1 passa com folga, e o azul da marca aparece
   sem ser escurecido por uma restricao que nao se aplica a este tamanho. */
.h1-bm{color:var(--teal);}

/* pastilhas: a unica forma arredondada do site, herdada da referencia */
.hero-pills{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem;
}
.hero-pills li{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;padding:.35rem 1.1rem;
  border:1px solid var(--rule, rgba(12,12,18,.16));
  border-radius:999px;background:var(--paper-2);
  font-size:var(--t-sm);font-weight:600;color:var(--ink);
}
.hero-pills .ponto{width:10px;height:10px;border-radius:50%;flex:none;}
.pill-identidade .ponto{background:var(--teal);}
.pill-papelaria  .ponto{background:var(--gold);}
.pill-site       .ponto{background:var(--green);}
.hero h1 i{font-size:.8em;}

/* ---------- retrato no H1 ----------
   A objecao "quem e essa pessoa" era respondida em lugar nenhum do site.
   Resolver isso com uma secao "sobre" custa uma tela inteira; aqui o rosto
   entra no ponto mais alto da pagina, dentro do proprio titulo.

   Dimensionado em `em`: o circulo tem a altura de caixa alta da Fraunces
   (medida por canvas: actualBoundingBoxAscent de "T" = 0,712em), entao ele
   acompanha o clamp do h1 sozinho, de 44px no celular a 104px no desktop,
   sem um so breakpoint.

   vertical-align:baseline num inline-block alinha a BORDA INFERIOR da caixa
   a linha de base — que e exatamente o que faz o circulo comecar e terminar
   onde as maiusculas comecam e terminam. */
.h1-foto{
  /* Metricas medidas da Fraunces, em em: caixa alta .712, ascendente .750,
     descendente .250. O diametro cobre a ascendente ATE a descendente — 1em
     redondo —, que e todo o campo vertical que a fonte ocupa de fato.

     Na caixa alta (.712) o circulo ficava pequeno ao lado do titulo: circulo
     e letra da mesma altura nao tem a mesma massa optica, porque a letra
     preenche a caixa e o circulo perde os quatro cantos. Igualar a MEDIDA
     deixava o retrato menor aos olhos; igualar o CAMPO resolve. */
  --d:1em;

  /* EIXO OPTICO — .25em acima da linha de base, o meio do campo que a fonte
     ocupa (ascendente .75, descendente .25). O alinhamento e derivado do
     diametro em vez de fixo em -.25em: assim o circulo cresce para CIMA e
     para BAIXO em volta do mesmo eixo, e mudar --d sozinho ja mantem tudo
     centrado. Com o valor fixo, aumentar o diametro empurrava o circulo para
     cima e ele voltava a ler como sobrescrito. */
  /* espessura e folga do anel, tambem em em: acompanham o circulo sozinhas,
     de ~2,4px no celular a ~5,7px no desktop */
  --anel:.075em;
  --anel-folga:.035em;
  /* girado pelo ponteiro; sem JS fica em 0 e o anel e um gradiente parado */
  --ang:0deg;

  display:inline-block;
  position:relative;
  width:var(--d);height:var(--d);
  vertical-align:calc(.25em - var(--d) / 2);
  margin-inline:.14em .04em;
  border-radius:50%;
  background:var(--teal-tint);
}
/* O recorte circular saiu do pai e veio para a imagem: com `overflow:hidden`
   la em cima, o anel do ::before — que vive FORA do circulo — era cortado
   junto. Aqui a imagem se recorta sozinha e o pai fica livre para o anel. */
.h1-foto img{
  width:100%;height:100%;
  position:relative;z-index:1;
  border-radius:50%;
  /* a peca ja e servida recortada em 1:1 e centrada no rosto, entao aqui
     `center` basta — nao ha eixo sobrando para reposicionar */
  object-fit:cover;object-position:center;
}
/* ---------- anel reativo em volta do retrato ----------
   Um gradiente conico com as tres cores de categoria (teal, verde, dourado)
   mais um arco claro, tudo mascarado num anel fino. O JS gira o conjunto
   escrevendo `--ang` com o angulo do ponteiro em relacao ao centro do
   circulo: as cores e o arco andam juntos, seguindo o mouse.

   NAO ha rotacao automatica. Uma versao com deriva propria foi tentada e
   descartada — nao e omissao, e decisao.

   NOTA sobre a regra do verde (ver o topo do arquivo): aqui as tres cores
   entram SEMPRE juntas e girando, nunca uma isolada — o anel le como o
   conjunto das tres frentes, do mesmo jeito que as pastilhas e as fitas, e
   nao como um marcador da categoria "site".

   Sem JS, sem mouse ou com movimento reduzido, `--ang` fica em 0 e o anel
   continua la, parado — nao e um enfeite que some, e um estado inicial. */

/* `inherits:true` NAO e detalhe: e o que faz o efeito existir.
   O JS grava --ang em .h1-foto, mas quem desenha o gradiente e o ::before.
   Um pseudo-elemento herda do elemento que o origina — com inherits:false o
   valor nao atravessa, o ::before fica preso no initial-value (0deg) e o anel
   nunca gira, embora o --ang mude direitinho no elemento pai.

   O @property aqui e so tipagem: `inherits:true` e justamente o que uma
   custom property NAO registrada ja faz por padrao, entao onde a regra for
   ignorada o comportamento e o mesmo. E o uso e `var(--ang, 0deg)`, com
   fallback — sem ele, antes do primeiro movimento do mouse o var ficaria sem
   valor e o navegador descartaria o `background` inteiro, fazendo o anel
   sumir em vez de so ficar parado. */
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:true; }

.h1-foto::before{
  content:"";
  position:absolute;
  inset:calc((var(--anel-folga) + var(--anel)) * -1);
  border-radius:50%;
  /* O arco claro fica em 0deg — e `from var(--ang)` faz o 0deg do gradiente
     ser exatamente a direcao do cursor, entao ele aponta para o ponteiro
     sozinho, sem nenhuma conta a mais no JS.

     O nucleo claro tem um patamar curto (350deg a 10deg, dando 20deg de
     largura) para ler como um marcador definido, e nao como uma lavagem;
     as duas quedas ao redor sao simetricas (45deg de cada lado). O valor em
     360deg repete o de 0deg, senao a emenda do circulo apareceria como um
     corte. */
  background:conic-gradient(from var(--ang, 0deg),
    var(--teal-tint)   0deg,
    var(--teal-tint)  10deg,
    var(--teal)       55deg,
    var(--green)     165deg,
    var(--gold)      275deg,
    var(--gold)      305deg,
    var(--teal-tint) 350deg,
    var(--teal-tint) 360deg);
  /* so a casca externa sobrevive: do raio menos a espessura ate a borda.
     `closest-side` faz 100% valer exatamente o raio da caixa. */
  -webkit-mask:radial-gradient(closest-side,
    transparent calc(100% - var(--anel)), #000 calc(100% - var(--anel)));
  mask:radial-gradient(closest-side,
    transparent calc(100% - var(--anel)), #000 calc(100% - var(--anel)));
}

/* CRESCIMENTO CONTINUO ATE +20% NO DESKTOP.
   Uma variavel so: o vertical-align e derivado dela, entao o circulo engorda
   em volta do mesmo eixo optico em qualquer ponto da rampa.

   A rampa comeca em 960px de proposito, e nao antes: abaixo de 945px o h1
   ainda cresce a 11vw, ou seja o proprio `1em` sobe mais rapido (11vw) do que
   qualquer rampa que termine em +20% (4,33vw). Ali o limite inferior do clamp
   ultrapassaria o termo do meio e o resultado seria o contrario do pedido —
   o circulo ficaria proporcionalmente MAIOR nas telas pequenas. De 960px em
   diante o h1 esta travado em 104px, entao 1em e constante e uma rampa linear
   em vw vira um multiplicador linear de verdade.

     960px  -> 4,333·9,6  + 62,4 = 104,0px = 1,00em   (encosta no minimo)
    1200px  -> 4,333·12   + 62,4 = 114,4px = 1,10em
    1440px  -> 4,333·14,4 + 62,4 = 124,8px = 1,20em   (encosta no maximo)

   Nas duas pontas o valor bate exatamente com o limite, entao nao ha degrau
   nem na entrada da media query nem na saida da rampa.

   A media query continua necessaria: o limite inferior de 1em NAO segura o
   termo do meio abaixo de 960 (a 800px ele daria 97px contra 88px de 1em),
   e o aumento vazaria para tablet e celular. */
@media (min-width:960px){
  .h1-foto{--d:clamp(1em, calc(4.333vw + 62.4px), 1.2em);}
}
/* o circulo nunca se separa do wordmark ao quebrar a linha */
.h1-eu{white-space:nowrap;}

/* Entrelinha de 1,02 e o ajuste de poster do desktop, onde o h1 tem duas
   linhas e o circulo nao tem vizinho embaixo. Quando o titulo quebra em
   quatro linhas, o mesmo 1,02 deixa 2,5px entre a descendente do circulo e
   a caixa alta da linha seguinte — que le como encostado. Aqui a entrelinha
   abre o suficiente para separar os dois, e de quebra o titulo de quatro
   linhas fica menos compactado no celular. */
@media (max-width:700px){
  .hero h1{line-height:1.14;}
}


/* ============================================================
   FITAS DIAGONAIS — CAMADA DE FUNDO DA SECAO DE SERVICOS
   Do poster coreano. Ficavam sobre os trabalhos no topo, mas fita diagonal
   atravessando conteudo le como fita de isolamento. Aqui correm ATRAS, e o
   bloco de colunas tem fundo proprio para o texto nunca cair sobre elas.
   ============================================================ */
.ribbons-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
}
/* ALTURA DA BANDA — o que trava a proporcao do recorte.
   A banda e full-bleed e a imagem entra com object-fit:cover, entao a
   PROPORCAO da banda e a especificacao de exportacao das pecas. Enquanto o
   valor `vw` do meio manda, a proporcao e constante (largura / k*largura =
   1/k); quem a quebra sao o piso e o teto do clamp.

   Medido antes deste ajuste, com clamp(320px, 40vw, 560px): o piso de 320px
   mandava abaixo de 800px de janela e a proporcao ia de 1,17:1 a 2,19:1, o
   que deixava so 52% da altura da peca visivel a 699px; o teto de 560px
   mandava acima de 1400px e a 1920 sobravam 71%.

   Os numeros abaixo escolhem piso e teto para que o `vw` mande ao longo de
   toda a faixa util de cada breakpoint:
     ate 699px  -> 80vw entre 375 e 699  =>  1,25:1 travado  (5:4)
     de 700px   -> 40vw entre 700 e 1600 =>  2,50:1 travado  (5:2)
   Fora dessas faixas o corte volta a crescer, e por isso as pecas guardam
   zona morta: 80px em cima e embaixo, 85px de cada lado. */
.ribbons{
  position:relative;overflow:hidden;
  display:grid;place-items:center;
  height:clamp(300px, 80vw, 560px);
  /* encosta nas duas bordas da tela, mas com os cantos DE CIMA arredondados.
     Sem fio no topo: o arredondamento ja separa a banda do hero. */
  border-radius:var(--raio) var(--raio) 0 0;
  border-bottom:var(--hair);
}
/* O corte muda de 5:4 para 5:2 no mesmo ponto em que o <picture> troca de
   arquivo (min-width:700px). Se um dos dois mudar, o outro tem de mudar
   junto — senao a peca larga cai numa banda alta, ou o contrario. */
@media (min-width:700px){
  .ribbons{ height:clamp(280px, 40vw, 640px); }
}
/* --- trabalhos girando atras das fitas ---
   object-fit:contain, nao cover: as pecas tem proporcoes muito diferentes
   (de 1200x750 a 581x940) e cover cortaria o trabalho de alguem pela metade.
   Contidas e centradas, viram "chapas" pousadas na folha. */
.works{
  position:relative;
  width:100%;height:100%;
  display:grid;place-items:center;
}
.work{
  /* display:block, NAO grid com place-items:center: nesse caso o item nao
     estica e o height:100% da imagem resolve contra uma area automatica,
     entao ela renderizava com 1158px de altura numa banda de 560 e
     transbordava — parecia cover apesar do contain. */
  position:absolute;inset:0;display:block;
  opacity:0;transition:opacity 1s var(--ease);
}
.work.is-active{opacity:1;}
.work picture{display:block;width:100%;height:100%;}
/* object-fit:cover agora que cada montagem e gerada NA proporcao da banda:
   a peca fica dentro do proprio campo de cor, que se estende ate as bordas.
   Sao duas variantes (2,4:1 e 1,14:1) servidas por <picture>, porque a banda
   passa de 2,69:1 no desktop para 1,17:1 no celular e uma imagem so nao
   preenche as duas sem cortar a peca. */
.work img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.work figcaption{
  position:absolute;left:var(--pad-x);bottom:.9rem;
  font-size:var(--t-sm);font-weight:600;letter-spacing:.01em;
  color:var(--ink);
  background:var(--paper);
  padding:.35rem .6rem;
}
.work figcaption b{font-weight:800;}
.work figcaption i{margin-inline:.4em;}

.works-toggle{
  position:absolute;z-index:4;
  right:var(--pad-x);bottom:.9rem;
  min-height:44px;padding:.35rem 1rem;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--ink);cursor:pointer;
  font:inherit;font-size:var(--t-micro);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}
@media (hover:hover){ .works-toggle:hover{background:var(--ink);color:var(--paper);} }

/* Tela estreita: a legenda para antes do botao e quebra em duas linhas, em
   vez de correr por baixo dele. */
@media (max-width:620px){
  .work figcaption{max-width:calc(100% - var(--pad-x) - 7.5rem);line-height:1.35;}
}
.ribbon{
  position:absolute;left:-15%;width:130%;
  display:flex;align-items:center;
  overflow:hidden;
  height:clamp(3.6rem, 7.5vw, 5.5rem);
  /* Minimo 1.5rem (24px) NAO e escolha estetica: em peso light o limite de
     "texto grande" deixa de ser 18.66px e passa a 24px, e o rotulo da fita
     teal so alcanca AA como texto grande (4,42:1 contra o papel). */
  font-size:var(--t-xl);
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;
}
/* comecam abaixo do cabecalho: a 12% a primeira cruzava o titulo e o rotulo
   dela corria por dentro das palavras */
.ribbon-teal { background:var(--teal);  color:var(--paper); top:27%; transform:rotate(-11deg); z-index:1; }
.ribbon-gold { background:var(--gold);  color:var(--ink);   top:53%; transform:rotate(7deg);   z-index:2; }
.ribbon-green{ background:var(--green); color:var(--ink);   top:79%; transform:rotate(-4deg);  z-index:3; }

/* A faixa corre em laco. Sem transform no CSS aqui de proposito: o rotate
   fica na .ribbon e o deslocamento na .ribbon-track, cada um no seu
   elemento, para o GSAP nunca ter de somar os dois. */
.ribbon-track{display:flex;flex:none;will-change:transform;}
.ribbon-track > span{flex:none;padding-inline:.7em;}
.ribbon-track i{color:inherit;opacity:.45;margin-left:.6em;}

.hero-foot{
  display:grid;justify-items:center;gap:1.75rem;
  padding-block:clamp(2rem, 5vw, 3rem);
  text-align:center;
}
.hero-intro{max-width:var(--medida);font-size:var(--t-md);color:var(--ink-soft);}
.hero-cta{justify-content:center;}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;}

/* ============================================================
   ARGUMENTO — bloco escuro com numeral gigante cortado
   ============================================================ */
/* Bloco isolado: papel em cima (fim do hero) e papel embaixo (servicos),
   entao ele se comporta como a faixa do pacote 03 — raio nos quatro cantos. */
.argument{
  background:var(--ink);color:#d5d5da;
  padding-block:clamp(2.75rem, 7vw, 4.5rem);
  border-radius:var(--raio);
}
.argument-grid{display:grid;gap:1.5rem;align-items:start;}
.argument-body{min-width:0;}
.argument h2{color:var(--paper);margin-bottom:1.25rem;}
.niche-lead{
  max-width:var(--medida);margin-bottom:1.5rem;
  font-size:var(--t-md);
  color:var(--teal-on-dark);
}
.argument-text{
  max-width:var(--medida);
  font-size:var(--t-md);
  line-height:1.45;
}
.argument-text b{color:var(--gold);font-weight:700;}

/* ---------- o argumento como chamada (home) ----------
   O bloco deixou de abrir uma sequencia de secoes e passou a ser uma porta
   para outra pagina: ganha rotulo em cima, botao e tres atalhos que entram
   direto nas ancoras de la. */
.argument-kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-bottom:1rem;
  font-size:var(--t-micro);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-on-dark);
}
/* mesma pastilha das do hero, na cor da categoria "identidade" */
.argument-kicker .ponto{width:10px;height:10px;border-radius:50%;background:var(--gold);flex:none;}

.argument-acoes{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem;}

.argument-atalhos{
  list-style:none;margin-top:1.5rem;
  display:flex;flex-wrap:wrap;
  gap:.25rem clamp(1rem, 3vw, 2rem);
}
.argument-atalhos a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--t-sm);color:var(--teal-on-dark);
  text-decoration:underline;text-decoration-color:rgba(127,199,218,.45);
  text-underline-offset:5px;text-decoration-thickness:1px;
}
@media (hover:hover){
  .argument-atalhos a:hover{color:var(--gold);text-decoration-color:var(--gold);}
}

/* ============================================================
   ABERTURA DE PÁGINA INTERNA — mesmo bloco escuro do argumento
   ============================================================ */
/* Raio so embaixo: em cima ele encosta no fio do cabecalho fixo, e curvar ali
   abriria uma fatia de papel entre a regua e o bloco. Embaixo ele encontra o
   papel da secao de servicos, e a curva faz o mesmo trabalho do fio. */
.page-head{
  background:var(--ink);color:#d5d5da;
  padding-block:clamp(3rem, 8vw, 5.5rem);
  border-radius:0 0 var(--raio) var(--raio);
}
.page-kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-bottom:1.25rem;
  font-size:var(--t-micro);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-on-dark);
}
.page-kicker .ponto{width:10px;height:10px;border-radius:50%;background:var(--gold);flex:none;}
/* Nao usa --t-3xl: aquele degrau foi desenhado para as duas linhas curtas do
   hero. Aqui o titulo tem duas linhas longas e a 6,5rem ele estourava a
   largura util em telas medias. */
.page-head h1{
  font-size:clamp(2.25rem, 6.5vw, 4rem);
  color:var(--paper);margin-bottom:1.25rem;
}
.page-lead{
  max-width:var(--medida);margin-bottom:1.5rem;
  font-size:var(--t-md);
  color:var(--teal-on-dark);
}
.page-head-cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem;}

/* ============================================================
   SEÇÕES
   ============================================================ */
.section{padding-block:var(--section-y);border-top:var(--hair);}
/* sem fio no topo: o raio da .argument logo acima ja separa as duas secoes, e
   um fio de ponta a ponta atravessaria os cantos vazados dela. Mesma regra que
   ja valia para a banda de trabalhos. */
#servicos{position:relative;overflow:hidden;border-top:0;}
#servicos .wrap{position:relative;z-index:1;}
/* Caixa levemente translucida: as fitas continuam legiveis por tras sem
   comprometer o texto. Medido a 0,88 de opacidade, o corpo (#33333c) mantem
   9,70:1 no pior caso — sobre a fita teal. Nao descer de ~0,70, onde ainda
   sao 7,56:1, mas a leitura ja fica ruidosa. */
#servicos .cols{background:rgba(247,243,233,.88);}
.section-alt{background:var(--paper-2);}

.sec-head{margin-bottom:clamp(2rem, 5vw, 3.5rem);}
.sec-head-split{display:grid;gap:1.5rem;}
.sec-sub{max-width:var(--medida-curta);font-size:var(--t-base);color:var(--muted);}

/* Cabecalho do case: titulo e descricao de um lado, a foto do site do outro.
   Nao usa .sec-head-split porque ali a sublinha e a SEGUNDA coluna; aqui ela
   desce para baixo do titulo e a coluna da direita e a imagem. */
.sec-head-caso{display:grid;gap:1.5rem;align-items:center;}
.sec-head-caso .sec-sub{margin-top:1rem;}
/* Quatro cantos: a foto fica isolada sobre o papel da secao, mesma regra da
   moldura do navegador logo abaixo — e o mesmo --raio. */
.caso-foto{
  width:100%;height:auto;
  border-radius:var(--raio);
}
/* Ao lado do titulo so a partir de 900px. Numa coluna estreita o notebook
   ficaria pequeno demais para se ler a tela, que e o ponto da foto. */
@media (min-width:900px){
  .sec-head-caso{grid-template-columns:1fr minmax(0, 420px);gap:2.5rem;}
}

:where(#servicos,#trabalho,#pacotes,#faq,#contato,#topo,#odonto){scroll-margin-top:calc(var(--head-h) + 1rem);}

/* ============================================================
   SERVIÇOS — colunas separadas por fio, numeral e rótulo vertical
   ============================================================ */
.cols{display:grid;}
.col{
  position:relative;
  display:grid;grid-template-columns:auto 1fr;gap:1.25rem;
  padding:2rem 1.25rem;
  /* o fio de topo e que carrega a cor da frente */
  border-top:3px solid var(--cor-frente, var(--ink));
}
.col:last-child{border-bottom:var(--hair-soft);}
.col-num{
  grid-row:1;
  font-family:var(--font-display);font-size:var(--t-xl);font-weight:600;line-height:.9;
  color:var(--ink);letter-spacing:-.04em;
}

/* Cada frente carrega a cor da sua fita la no topo: teal = identidade,
   dourado = papelaria, verde = site.

   A cor vai no FIO, nao no numeral. Como texto sobre papel o dourado da
   1,45:1 e o verde 2,86:1 — o "02" sumia da pagina. Preenchimento nao tem
   requisito de contraste de texto, entao o fio mantem o codigo de cor e o
   numero volta a ser legivel em ink (18:1). */
.col-identidade{--cor-frente:var(--teal);}
.col-papelaria {--cor-frente:var(--gold);}
.col-site      {--cor-frente:var(--green);}
.col h3{grid-column:2;margin-bottom:.75rem;}
.col p{grid-column:2;max-width:var(--medida);}
.link-arrow{
  grid-column:2;justify-self:start;margin-top:.5rem;
  display:inline-flex;align-items:center;min-height:44px;
  /* --t-sm, nao --t-micro: no degrau menor este link sumia — ele e sempre o
     ultimo elemento do bloco, sem nada depois que o ancore. Vale para as duas
     instancias do site (a coluna 03 de servicos e a faixa de prova da home),
     que sao o mesmo componente e devem ter o mesmo tamanho. */
  font-size:var(--t-sm);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;
}
/* o fio fica no texto, nao na caixa: a caixa cresceu ate 44px para o dedo,
   e uma borda inferior nessa altura pareceria solta */
.link-arrow span:first-child,.link-arrow{text-underline-offset:5px;}
.link-arrow{text-decoration:underline;text-decoration-color:var(--teal-ink);text-decoration-thickness:1px;}

/* ============================================================
   TRABALHO — moldura de canto vivo, sem sombra
   ============================================================ */
.case{position:relative;}

/* mesmo --raio da faixa do pacote 03 e da banda de trabalhos. O overflow e
   obrigatorio, nao cosmetico: a barra e o iframe sao retangulos e vazariam
   por cima do raio nos quatro cantos. */
.browser{
  border:var(--hair);background:var(--ink);
  border-radius:var(--raio);overflow:hidden;
}
.browser-bar{
  display:flex;align-items:center;gap:.4rem;
  padding:.6rem .75rem;background:var(--ink);
}
.browser-bar .dot{width:7px;height:7px;background:rgba(247,243,233,.28);flex:none;}
/* o primeiro ponto e o sinal de "no ar". Era verde, e verde aqui competia com
   a categoria "site" ensinada no topo. Dourado ja e o marcador de atencao do
   sistema (fio do menu ativo, contorno de foco no escuro, bolinhas do
   contato), entao o sinal muda de cor sem inventar uma sexta. */
.browser-bar .dot:first-child{background:var(--gold);}
.browser-bar .url{
  flex:1;margin-left:.5rem;
  color:rgba(247,243,233,.7);
  font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.browser-view{
  height:var(--frame-h);overflow:hidden;
  background:var(--paper-2) center top/100% auto no-repeat;
  /* Localizacao, nao o hero: a foto do notebook logo acima ja mostra o hero,
     e o cartaz repetindo a mesma tela lia como imagem duplicada. Esta secao
     tem fundo claro e um mapa, entao contrasta com a foto em vez de ecoa-la. */
  background-image:url("assets/rispettare-localizacao.webp?v=847b2144");
  border-top:1px solid rgba(247,243,233,.16);
}
.browser-frame{display:block;width:100%;height:100%;border:0;}

/* Convite para carregar o site de terceiros. Ocupa a moldura inteira: o alvo
   e a area toda, nao um botao pequeno no meio de uma captura. O veu escuro
   existe para o rotulo ter fundo proprio — sem ele o texto cairia sobre um
   print de contraste imprevisivel. */
.frame-cta{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  width:100%;height:100%;
  padding:1.5rem;
  border:0;cursor:pointer;
  background:rgba(12,12,18,.62);
  color:var(--paper);
  font:inherit;text-align:center;
  transition:background-color .25s var(--ease);
}
.frame-cta-acao{
  font-size:var(--t-micro);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.75rem 1.5rem;min-height:48px;
  display:inline-flex;align-items:center;
  background:var(--paper);color:var(--ink);
}
@media (hover:hover){
  .frame-cta:hover{background:rgba(12,12,18,.5);}
  .frame-cta:hover .frame-cta-acao{background:var(--gold);}
}

/* Saida do iframe. Um teclado que entrou no site de terceiros precisa de um
   caminho de volta que nao seja atravessar o DOM inteiro dele — este botao
   descarrega a moldura e devolve o foco para ca. */
.frame-sair{
  margin-top:.85rem;
  min-height:44px;padding:.4rem .9rem;
  background:transparent;color:var(--ink);
  border:1px solid var(--ink);cursor:pointer;
  font:inherit;font-size:var(--t-micro);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}
@media (hover:hover){ .frame-sair:hover{background:var(--ink);color:var(--paper);} }

/* No desktop o conteúdo entra a 85%: cabe mais site na moldura e a viewport
   interna vai a ~1200px, largura em que o menu do cliente para de colidir.
   Como o zoom do documento é inacessível (cross-origin), o iframe é
   renderizado maior e reduzido por escala. */
@media (min-width:900px){
  .browser-frame{
    --zoom:.85;
    width:calc(100% / var(--zoom));height:calc(100% / var(--zoom));
    transform:scale(var(--zoom));transform-origin:0 0;
  }
}

.browser-hint{
  /* frase de instrucao, nao rotulo: caixa normal */
  margin-top:.85rem;font-size:var(--t-sm);color:var(--muted);
}

/* ============================================================
   DEPOIMENTO — a prova que faltava
   ============================================================ */
.depoimento{
  margin-top:clamp(2rem, 5vw, 3rem);
  padding-top:clamp(1.5rem, 3vw, 2.25rem);
  border-top:var(--hair);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 clamp(.6rem, 1.6vw, 1.1rem);
  max-width:52rem;
}
/* As aspas em --teal, nao em --gold: dourado sobre papel da 1,45:1 e a glifo
   sumiria da pagina — o mesmo motivo que ja tirou o dourado dos numerais das
   colunas. Aqui elas nao sao texto (aria-hidden), mas precisam ser VISTAS.

   O corpo aqui NAO e o tamanho aparente: medida por canvas, a tinta da glifo
   ocupa so 0,338 do corpo. A 5rem ela pintava 27px ao lado de um texto de 23 —
   tecnicamente "grande", opticamente do mesmo tamanho. O corpo abaixo pinta
   cerca de 49px, ~2x a altura do texto, que e onde ela finalmente le como
   aspas de citacao e nao como pontuacao. */
.aspas{
  grid-row:1;align-self:start;
  font-family:var(--font-display);
  font-size:clamp(5rem, 13vw, 9rem);
  font-weight:700;line-height:1;
  color:var(--teal);
  /* a tinta nasce no alto da caixa e a caixa e muito maior que ela; sem o
     recuo a glifo flutuaria bem acima da primeira linha do texto */
  margin-top:-.2em;
}
.depoimento blockquote{grid-column:2;}
.depoimento blockquote p{
  font-family:var(--font-display);
  font-size:var(--t-lg);font-weight:500;
  line-height:1.35;letter-spacing:-.01em;
  color:var(--ink);
  max-width:var(--medida);
}
.depoimento figcaption{
  grid-column:2;margin-top:1.1rem;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem 1rem;
}
.dep-nome{font-size:var(--t-base);font-weight:700;color:var(--ink);}
.dep-org{font-size:var(--t-sm);color:var(--muted);}

/* ---------- faixa de prova (home) ----------
   Vive entre os dois blocos escuros do fim da home. Sem fio no topo nem na
   base, e por regra: os dois vizinhos tem raio, e onde ha raio o fio sai —
   um fio de ponta a ponta atravessaria os cantos vazados deles.

   Por isso tambem some o border-top do .depoimento aqui: la no case ele
   separa a citacao do que vem acima dentro da MESMA secao; aqui a citacao e
   a secao inteira, e nao ha nada de que se separar. */
.prova{padding-block:clamp(3rem, 7vw, 5.5rem);}
.prova .depoimento{margin-top:0;padding-top:0;border-top:0;}

/* O link mora embaixo da foto, na coluna da direita, e nao no fim da secao:
   ali ele pertence a imagem que ilustra o projeto, em vez de flutuar solto
   sob as duas colunas.

   FLEX, nao grid, de proposito: o .link-arrow carrega `grid-column:2` do
   contexto das colunas de servicos, onde ele divide a grade com o numeral.
   Num container grid essa regra o jogaria para uma segunda coluna implicita;
   em flex ela simplesmente nao se aplica. */
.prova-lado{display:flex;flex-direction:column;align-items:flex-start;}
.prova-lado .link-arrow{margin-top:1.1rem;}

.prova-grid{display:grid;gap:clamp(1.75rem, 4vw, 2.5rem);align-items:center;}
/* Quatro cantos: a foto fica isolada sobre o papel da faixa, mesma regra dos
   dois blocos escuros que ela separa — e o mesmo --raio. */
.prova-foto{width:100%;height:auto;border-radius:var(--raio);}
/* Lado a lado so a partir de 900px, o mesmo ponto em que o resto do site
   vira desktop. A coluna da foto e limitada em 380px para a citacao seguir
   sendo o elemento principal — ela e que carrega o argumento. */
@media (min-width:900px){
  .prova-grid{grid-template-columns:1fr minmax(0, 380px);gap:clamp(2.5rem, 5vw, 4rem);}
}

.chips{
  list-style:none;margin-top:2rem;
  display:flex;flex-wrap:wrap;gap:0;
  border-top:var(--hair-soft);
}
.chips li{
  padding:.7rem 1rem .7rem 0;margin-right:1rem;
  font-size:var(--t-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal-ink);
}
.chips li + li{border-left:var(--hair-soft);padding-left:1rem;}

.case-cta{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem;}


/* ============================================================
   PACOTES — faixas horizontais separadas por fio
   ============================================================ */
.packs{display:grid;}
.pack{
  position:relative;
  display:grid;gap:1.5rem;
  padding-block:clamp(1.75rem, 4vw, 2.5rem);
  border-top:var(--hair);
}
.packs .pack:last-child{border-bottom:var(--hair);}
.pack-idx{
  font-family:var(--font-display);font-size:var(--t-xl);font-weight:600;line-height:.9;
  letter-spacing:-.04em;color:var(--teal);
}
.pack-name h3{margin-bottom:.5rem;}
.pack-for{font-size:var(--t-sm);color:var(--muted);}
.pack-tag{
  display:inline-block;margin-top:.85rem;
  padding:.25rem .6rem;background:var(--gold);color:var(--ink);
  font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
/* As duas tags marcam DESTAQUE, nao categoria — entao nenhuma delas usa as
   cores do codigo. "Mais rapido" e um chip ink sobre o cartao claro, "Mais
   completo" fica dourado sobre o cartao escuro: fundos opostos, leitura
   inequivoca, e o verde volta a significar so "site". */
.pack-tag-ink{background:var(--ink);color:var(--paper);}
.pack-list{list-style:none;display:grid;gap:.6rem;}
.pack-list li{
  position:relative;padding-left:1.4rem;font-size:var(--t-base);line-height:1.4;
}
.pack-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border:1px solid var(--teal);
}
.pack-list li.plus{font-weight:700;color:var(--ink);}
.pack-list li.plus::before{background:var(--gold);border-color:var(--gold);}

.pack-price .from{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.pack-price .amt{
  font-family:var(--font-display);font-size:var(--t-xl);font-weight:600;line-height:1;
  letter-spacing:-.03em;color:var(--ink);margin-top:.25rem;
}
.pack-price .terms{font-size:var(--t-sm);color:var(--muted);margin-top:.6rem;line-height:1.4;}

.maint{border-top:var(--hair-soft);padding-top:1.25rem;}
.pack-note{font-size:var(--t-sm);color:var(--gold);margin-bottom:1rem;}
/* Area de toque estendida por pseudo-elemento: aumentar padding aqui
   empurraria a linha do paragrafo. O ::after e invisivel e so amplia o
   alvo ate 44px de altura. */
.pack-note a,.foot-inner a{position:relative;display:inline-block;}
.pack-note a::after,.foot-inner a::after{
  content:"";position:absolute;left:-4px;right:-4px;
  top:50%;height:44px;transform:translateY(-50%);
}
.pack-note a{color:inherit;}
.maint-grid{display:grid;gap:1.25rem;}
/* teal-on-dark = recorrente. O dourado fica so no valor unico de setup, entao
   a diferenca entre pagar uma vez e pagar todo mes se le pela cor. */
.m-label{font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-on-dark);}
.m-amt{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;color:var(--paper);margin-top:.2rem;}
.m-sub b{color:var(--teal-on-dark);}
.m-sub{font-size:var(--t-sm);color:#a9a9b2;margin-top:.15rem;line-height:1.4;}

/* faixa invertida */
.pack-dark{
  background:var(--ink);color:#d5d5da;
  /* faixa sangrada: sai do .wrap e encosta nas duas bordas da tela, como a
     banda de trabalhos do topo. O margin negativo abre a caixa ate 100vw e o
     padding devolve exatamente a mesma calha do .wrap, entao o conteudo
     continua alinhado com os pacotes 01 e 02 nos dois lados. */
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
  border-radius:var(--raio);
  border-color:transparent;
  margin-top:1.5rem;
}
.pack-dark h3{color:var(--paper);}
.pack-dark .pack-idx{color:var(--gold);}
.pack-dark .pack-for{color:var(--teal-on-dark);}
.pack-dark .pack-list li::before{border-color:var(--gold);}
.pack-dark .pack-list li.plus{color:var(--paper);}
.pack-dark .pack-price .amt{color:var(--paper);}
.pack-dark .pack-price .from{color:var(--gold);}
.pack-dark .pack-price .terms{color:#a9a9b2;}
.pack-dark .maint{border-top-color:rgba(247,243,233,.18);}

/* ============================================================
   FAQ — lista numerada com fios
   ============================================================ */
.faq{display:grid;max-width:900px;}
.faq details{border-top:var(--hair-soft);}
.faq details:last-child{border-bottom:var(--hair-soft);}
.faq summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:2.5rem 1fr auto;gap:.75rem;align-items:baseline;
  padding-block:1.15rem;min-height:56px;
  font-weight:700;font-size:var(--t-md);
  letter-spacing:-.01em;line-height:1.25;
  color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary i{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;color:var(--teal);
}
/* O "+" e as duas barras num elemento so: ancorar a barra vertical no <span>
   da pergunta a prendia ao fim do texto, que muda de largura a cada linha,
   e o sinal saia desalinhado. Aqui as duas barras sao gradientes centrados
   na mesma caixa, entao coincidem sempre. Ao abrir, a vertical encolhe a
   zero e sobra o "−". */
.faq summary::after{
  content:"";align-self:center;
  width:12px;height:12px;
  background:
    linear-gradient(var(--ink),var(--ink)) center center / 12px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center center / 1px 12px no-repeat;
  transition:background-size .3s var(--ease);
}
.faq details[open] summary::after{
  background-size:12px 1px, 1px 0;
}

.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease);}
.faq details[open] .faq-body{grid-template-rows:1fr;}
.faq-body > div{overflow:hidden;}
.faq-body p{
  padding:0 0 1.35rem 3.25rem;max-width:var(--medida);
  font-size:var(--t-base);color:var(--ink-soft);
}
@media (hover:hover){ .faq summary:hover{color:var(--teal-ink);} }

/* ============================================================
   CONTATO — bloco escuro, numeral gigante
   ============================================================ */
.contact{
  background:var(--ink);color:#d5d5da;
  padding-block:var(--section-y);
  /* So os cantos DE CIMA. O rodape logo abaixo tem o mesmo --ink: os dois sao
     uma massa escura unica, e curvar a base abriria duas fatias de papel no
     meio dela. Embaixo o bloco termina na borda do documento, onde canto reto
     e o certo — mesma logica da banda de trabalhos, invertida. */
  border-radius:var(--raio) var(--raio) 0 0;
  /* recuo compartilhado: o titulo e os valores nascem na MESMA borda, com os
     marcadores na margem esquerda e os rotulos na direita */
  --recuo:clamp(0px, 20vw, 300px);
  --marcador:10px;
  --gap-linha:1rem;
}
.contact-head{margin-bottom:clamp(2.5rem, 6vw, 4rem);}
.contact h2{color:var(--paper);margin-left:var(--recuo);}
.contact h2 i{color:var(--gold);}

.contact-rows{list-style:none;border-top:1px solid rgba(247,243,233,.28);}
.contact-rows a{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;gap:var(--gap-linha);
  padding-block:clamp(.7rem, 1.8vw, 1.15rem);
  border-bottom:1px solid rgba(247,243,233,.28);
  text-decoration:none;
  transition:background-color .25s var(--ease);
}
.contact-rows .ponto{
  width:var(--marcador);height:var(--marcador);
  border-radius:50%;background:var(--gold);flex:none;
}
.contact-rows .valor{
  /* a caixa do valor ja comeca depois do marcador e do gap, entao o recuo
     precisa descontar os dois para o TEXTO nascer na mesma borda do titulo */
  padding-left:max(0px, calc(var(--recuo) - var(--marcador) - var(--gap-linha)));
  font-family:var(--font-display);
  font-size:var(--t-xl);
  font-weight:600;letter-spacing:-.02em;line-height:1.1;
  color:var(--paper);
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.contact-rows .rotulo{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.12em;
  color:var(--teal-on-dark);white-space:nowrap;
}
@media (hover:hover){
  .contact-rows a:hover{background:rgba(243,199,52,.07);}
  .contact-rows a:hover .valor{color:var(--gold);transform:translateX(6px);}
}

/* Tela estreita: a glifo sobe para a propria linha. Lado a lado ela comeria
   um quinto de uma coluna que ja tem so 258px, e a citacao viraria uma
   goteira de tres palavras por linha. */
@media (max-width:620px){
  .depoimento{grid-template-columns:1fr;}
  .aspas{grid-row:1;margin-bottom:-.35em;}
  .depoimento blockquote,.depoimento figcaption{grid-column:1;}
}

/* Tela estreita: o rotulo sai da margem direita e vira uma linha acima do
   valor. Mantido lado a lado ele espremeria "behance.net/tadeumorari". */
@media (max-width:620px){
  /* Com o rotulo refluindo para cima do valor, a estrutura de tres colunas
     que justificava o recuo deixa de existir — e o recuo virava so 20vw de
     indentacao comendo a largura util, a unica quebra do alinhamento a
     esquerda que o resto do site mantem. */
  .contact{--recuo:0px;}
  .contact-rows a{grid-template-columns:auto 1fr;gap:.6rem .75rem;}
  .contact-rows .rotulo{grid-column:2;order:-1;}
  /* --t-lg, nao --t-xl: em 320px o "behance.net/tadeumorari" em Fraunces 26px
     media 304px numa coluna de 258 e as ultimas letras eram cortadas pelo
     overflow-x:clip do body — sumiam da tela sem deixar rastro. Um degrau
     abaixo cabe com folga, e o degrau ja existe na escala. */
  .contact-rows .valor{grid-column:2;font-size:var(--t-lg);}
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.site-foot{background:var(--ink);border-top:1px solid rgba(247,243,233,.14);padding-block:1.5rem;}
.foot-inner{
  display:flex;flex-direction:column;gap:.5rem;
  font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7a7a85;
}
.foot-inner a{color:var(--teal-on-dark);text-decoration:none;}
@media (hover:hover){ .foot-inner a:hover{color:var(--gold);} }

/* ============================================================
   FAB — quadrado, coerente com o resto
   ============================================================ */
.fab{
  position:fixed;z-index:60;
  right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));
  width:52px;height:52px;display:grid;place-items:center;
  /* Era verde, pelo verde do WhatsApp — mas dentro deste site o verde e
     "site/digital", e o botao flutuante nao e categoria nenhuma: e a mesma
     acao dos outros tres CTAs, que ja sao .btn-ink. Agora ele e ink tambem,
     e os quatro caminhos para o WhatsApp finalmente se parecem.
     O anel de papel resolve o unico problema disso: sobre as secoes escuras
     um botao ink perderia a borda. */
  background:var(--ink);color:var(--paper);
  box-shadow:0 0 0 2px var(--paper);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), background-color .25s var(--ease);
}
.fab svg{width:26px;height:26px;}
.fab.is-visible{opacity:1;transform:none;pointer-events:auto;}
html:not(.js) .fab{opacity:1;transform:none;pointer-events:auto;}
/* mesmo hover do .btn-ink: ink vira teal */
@media (hover:hover){ .fab:hover{background:var(--teal);color:var(--paper);} }

/* ============================================================
   ESTADOS INICIAIS DA ANIMAÇÃO

   Tudo aqui é gated por `html.gsap`, classe adicionada no <head> só depois
   de confirmar que gsap.min.js e ScrollTrigger.min.js carregaram — e nunca
   sob movimento reduzido. Consequência: se o GSAP falhar (rede, bloqueio,
   arquivo corrompido) nada fica escondido e a página aparece inteira, sem
   animação, em vez de ficar em branco.

   Por isso NÃO existe `.reveal{opacity:0}` solto: um estado escondido que
   dependa de JS para ser desfeito é uma página em branco esperando para
   acontecer.

   O ScrollTrigger dispara por posição de scroll, não por interseção
   pintada, então a cortina de clip-path (que o IntersectionObserver
   inviabilizava) volta a ser possível em .reveal-wipe.
   ============================================================ */
html.gsap .reveal,
html.gsap .reveal-wipe,
html.gsap .hero-pills li,
html.gsap .hero-foot > *,
html.gsap .works{opacity:0;}

html.gsap .hero-pills li,
html.gsap .hero-foot > *{transform:translateY(18px);}
/* a fita e "desenhada" por clip-path, no seu proprio eixo: mexer em
   transform brigaria com o rotate que ja esta no CSS */
html.gsap .ribbon{clip-path:inset(0% 100% 0% 0%);}

/* as linhas do h1 sobem por trás de uma máscara */
.h1-line{
  display:block;overflow:hidden;
  /* folga maior: a serifada tem descidas mais longas e o "p" de papelaria
     era decepado pela mascara. A folga de cima e pelo circulo do retrato,
     que sobe ate a caixa alta e era decepado pelo mesmo overflow. */
  padding-bottom:.26em;margin-bottom:-.26em;
  padding-top:.14em;margin-top:-.14em;
}
.h1-line > span{display:block;}
html.gsap .h1-line > span{transform:translateY(110%);}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:700px){
  .maint-grid{grid-template-columns:1fr 1fr;}
  .sec-head-split{grid-template-columns:1fr auto;align-items:end;}
  .foot-inner{flex-direction:row;justify-content:space-between;align-items:center;}

  .pack{grid-template-columns:auto 1.1fr 1.4fr auto;gap:2rem;align-items:start;}
  .pack-idx{grid-row:1;}
  .pack-price{text-align:right;}
  .pack .maint{grid-column:1 / -1;}
}

@media (min-width:900px){
  .nav{display:flex;gap:1.5rem;}

  /* colunas verticais com fio entre elas, como o poster 2 */
  .cols{grid-template-columns:repeat(3,1fr);}
  .col{
    display:block;padding:2.5rem 1.75rem 2.5rem 0;
    border-bottom:var(--hair);
  }
  .col:last-child{border-bottom:var(--hair);}
  .col + .col{border-left:var(--hair-soft);padding-left:1.75rem;}
  /* a caixa agora e visivel: sem isso o texto da 01 encosta na borda dela */
  .col-identidade{padding-left:1.75rem;}
  .col-num{display:block;margin-bottom:1.5rem;}
  .col h3, .col p{grid-column:auto;}
  .col h3{margin-bottom:1rem;}

  .argument-grid{gap:2.5rem;}
  .fab{right:1.75rem;bottom:calc(1.75rem + env(safe-area-inset-bottom));}
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.reveal-wipe{opacity:1 !important;transform:none !important;clip-path:none !important;}
  .fab{opacity:1;transform:none;pointer-events:auto;}
}