/* base: a hero mobile subtrai as mesmas env() do 100dvh */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
/* sem !important, .btn{display:inline-flex} ganha do [hidden] do navegador */
[hidden]:not([hidden=until-found i]){display:none!important}

:root{
  color-scheme: light;

  /* as tintas da impressão */
  --paper:#FFF7F0;         /* fundo */
  --paper-2:#F7E9DE;       /* um passo abaixo do fundo: campo, tile, miniatura */
  --ink:#1F1E1E;           /* texto e todo preto da página */
  --night:var(--ink);      /* a faixa escura é a própria tinta do texto */
  --mark:#2330CC;          /* primária: único acento da interface */
  --mark-solid:#2330CC;    /* a primária chapada, inclusive sobre o escuro */
  --mark-2:#FF4826;        /* secundária: doodle e sobreposição */
  --mark-3:#FFCA00;

  /* superfície corrente — as faixas escuras redefinem só estes */
  --surface:var(--paper);
  --on:var(--ink);
  --on-dim:#757068;
  --line:color-mix(in srgb, var(--ink) 20%, transparent);
  --line-soft:color-mix(in srgb, var(--ink) 10%, transparent);

  --display:'Archivo','Arial Narrow',Helvetica,Arial,sans-serif;
  --body:'Montserrat',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gut:clamp(16px,4.5vw,72px);
  --maxw:1680px;

  --nav-pad:clamp(10px,2.2vw,16px);
  --nav-isl:56px;
  --nav-h:calc(var(--nav-isl) + 2 * var(--nav-pad));
  --r:3px;                 /* canto da miudeza: rótulo, chip, o +/- do acordeão */

  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --rc:16px;               /* canto de cartão: tile, foto, campo, overlay */
  --bar:#b7aca0;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='.2'/></svg>");
  scroll-behavior:smooth;
}

.band-night{
  --surface:var(--night);
  --on:#FFF7F0;
  --on-dim:#9A948C;
  --line:color-mix(in srgb,#FFF7F0 20%,transparent);
  --line-soft:color-mix(in srgb,#FFF7F0 9%,transparent);
  --mark:#7E8AFF;          /* a primária clareia para seguir legível no escuro */
  background:var(--night);
  color:var(--on);
}
@media (prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}
section[id],main[id]{scroll-margin-top:calc(var(--nav-h) + 14px)}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper) var(--grain);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.03em;text-wrap:balance}
p{margin:0}
a{color:inherit}
img,video{display:block;max-width:100%}
/* o <picture> das fotos em AVIF (pics.ts) não tem caixa: a <img> de dentro se arranja
   como se fosse filha direta, e o CSS dela segue valendo. O <source> não é display:none
   por padrão: sem esta regra ele vira uma célula vazia no grid do depoimento */
picture{display:contents}
picture > source{display:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--mark);outline-offset:3px}

.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
/* texto só para leitor de tela: o nome de um botão que é só ícone */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.btn{
  --cd:44px;                /* diâmetro do círculo = altura da pílula */
  --cgap:0px;               /* zero: os dois se encostam pelas próprias margens */
  --sw:.35s cubic-bezier(.16,1,.3,1);
  --btn-bg:transparent;
  --btn-fg:var(--on);
  --btn-line:var(--line);
  position:relative;display:inline-flex;align-items:center;max-width:100%;
  padding:0;border:0;background:none;text-decoration:none;color:var(--btn-fg);
  border-radius:999px;   /* o wrapper não tem fundo; isso é só para o anel de foco */
}
.btn-t{
  display:block;min-width:0;white-space:nowrap;
  border:1px solid var(--btn-line);border-radius:999px;background:var(--btn-bg);
  padding:13px 22px;font-size:13.5px;font-weight:700;line-height:1.2;
  margin-left:calc(var(--cd) + var(--cgap));
  transition:transform var(--sw);
}
.btn-c{
  position:absolute;top:50%;width:var(--cd);height:var(--cd);font-size:15px;
  border:1px solid var(--btn-line);border-radius:999px;background:var(--btn-bg);
  display:grid;place-items:center;overflow:hidden;
  transition:transform var(--sw);
}
/* repouso: o círculo é o da esquerda, a pílula ocupa a direita */
.btn-c-l{left:0;transform:translateY(-50%) scale(1)}
.btn-c-r{right:0;transform:translateY(-50%) scale(0)}

.btn:hover .btn-t,.btn:focus-visible .btn-t{transform:translateX(calc(-1 * (var(--cd) + var(--cgap))))}
.btn:hover .btn-c-l,.btn:focus-visible .btn-c-l{transform:translateY(-50%) scale(0)}
.btn:hover .btn-c-r,.btn:focus-visible .btn-c-r{transform:translateY(-50%) scale(1)}
/* o acento chapado */
.btn-fill{--btn-bg:var(--mark-solid);--btn-fg:#FFF7F0;--btn-line:transparent}

.nav-cta{--cd:40px}
.nav-cta .btn-t{padding:11px 19px}
.scroll-cue{--cd:47px;--btn-line:var(--ink)}
.scroll-cue .btn-t{padding:14px 24px;font-size:14.5px}
.more .btn-t{padding:13px 28px;font-variant-numeric:tabular-nums}
.dlg-out{--btn-line:var(--ink)}

.btn-c .ar::before,.btn-c .ar::after,
.ico-track span,
.ar-s{
  background:currentColor;
  -webkit-mask:var(--arrow) center/var(--arrow-size,64%) no-repeat;
  mask:var(--arrow) center/var(--arrow-size,64%) no-repeat;
}
.btn-c .ar{position:relative;display:block;width:100%;height:100%}
.btn-c .ar::before,.btn-c .ar::after{
  content:"";position:absolute;inset:0;
  transition:transform var(--sw);
}
.btn-c .ar::after{transform:translateX(-120%)}
.btn:hover .btn-c .ar::before,.btn:focus-visible .btn-c .ar::before{transform:translateX(120%)}
.btn:hover .btn-c .ar::after,.btn:focus-visible .btn-c .ar::after{transform:translateX(0)}

.btn-c .ar.down::before{transform:rotate(90deg)}
.btn-c .ar.down::after{transform:translateY(-240%) rotate(90deg)}
.btn:hover .btn-c .ar.down::before,.btn:focus-visible .btn-c .ar.down::before{transform:translateY(240%) rotate(90deg)}
.btn:hover .btn-c .ar.down::after,.btn:focus-visible .btn-c .ar.down::after{transform:translateY(0) rotate(90deg)}
/* a mesma seta no corpo do texto, no "Ver case" dos tiles */
.ar-s{--arrow-size:contain;display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em}

.ico{
  --cd:40px;
  position:relative;flex:none;
  width:var(--cd);height:var(--cd);
  border:1px solid var(--line);border-radius:50%;background:transparent;

  color:var(--on-dim);overflow:hidden;
  transition:border-color .25s ease,color .25s ease;
}
.ico:hover,.ico:focus-visible{border-color:var(--on);color:var(--on)}
.ico-track{position:absolute;inset:0}

.ico-track span{position:absolute;top:0;left:0;width:100%;height:100%}
.ico-track span:nth-child(2){transform:translateX(calc(var(--cd) * -2))}
.ico-track span:nth-child(3){transform:translateX(calc(var(--cd) * -4))}

/* a trilha toca no botão que a contém (quotes.ts); o empurrão do círculo é só do .ico */
.is-playing .ico-track{animation:ico-run 1080ms cubic-bezier(.3,.38,.35,1) both}
.ico.is-playing{animation:ico-nudge 1000ms both}
@keyframes ico-run{
  from{transform:translateX(0)}
  to{transform:translateX(calc(var(--cd) * 4))}
}

@keyframes ico-nudge{
  0%{transform:translateX(0);animation-timing-function:cubic-bezier(.3,.6,.4,1)}
  23%{transform:translateX(calc(var(--cd) * var(--dir,1) * .37));animation-timing-function:ease-in-out}
  33%{transform:translateX(calc(var(--cd) * var(--dir,1) * .32));animation-timing-function:cubic-bezier(.5,0,.6,.8)}
  45%{transform:translateX(calc(var(--cd) * var(--dir,1) * .05));animation-timing-function:ease-in-out}
  60%{transform:translateX(calc(var(--cd) * var(--dir,1) * .11));animation-timing-function:ease-in-out}
  83%,100%{transform:translateX(0)}
}

.btn-sm{
  display:inline-flex;align-items:center;white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;background:transparent;
  padding:9px 15px;font-size:12.5px;font-weight:700;line-height:1.2;
  color:var(--on);text-decoration:none;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.btn-sm:hover,.btn-sm:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.band-night .btn-sm:hover,.band-night .btn-sm:focus-visible{background:var(--on);border-color:var(--on);color:var(--night)}

/* menos movimento: o botão não anda. A pílula, o círculo da esquerda e a seta ficam onde
   estão, e o hover (e o foco) vira cor: a borda acende e o fundo escurece um pouco */
@media (prefers-reduced-motion:reduce){

  .btn-t,.btn-c,.btn-c .ar::before,.btn-c .ar::after,.btn-sm,.ico{transition:none}
  .btn:hover .btn-t,.btn:focus-visible .btn-t{transform:none}
  .btn:hover .btn-c-l,.btn:focus-visible .btn-c-l{transform:translateY(-50%) scale(1)}
  .btn:hover .btn-c-r,.btn:focus-visible .btn-c-r{transform:translateY(-50%) scale(0)}
  .btn:hover .btn-c .ar::before,.btn:focus-visible .btn-c .ar::before{transform:none}
  .btn:hover .btn-c .ar.down::before,.btn:focus-visible .btn-c .ar.down::before{transform:rotate(90deg)}
  .btn:hover,.btn:focus-visible{--btn-line:var(--on);--btn-bg:color-mix(in srgb,var(--on) 9%,transparent)}
  .btn-fill:hover,.btn-fill:focus-visible{--btn-line:transparent;--btn-bg:color-mix(in srgb,var(--mark-solid) 78%,#000)}
}

@media (max-width:480px){
  .btn{--cd:38px}
  .btn-t{white-space:normal;padding:11px 18px}
  .scroll-cue .btn-t{padding:13px 20px}
}

.doo{
  position:absolute;overflow:visible;pointer-events:none;z-index:2;
  fill:none;stroke:var(--mark);stroke-width:var(--dsw,2.2);
  stroke-linecap:round;stroke-linejoin:round;
}
.doo.is-fill{fill:var(--mark-2);stroke:none}
.doo.on-2{stroke:var(--mark-2)}

.doo.on-3{stroke:var(--mark-3)}
.mk{position:relative;display:inline-block}
.mk>.doo-loop{left:-6%;top:-22%;width:112%;height:146%}
.mk>.doo-under{left:-1%;top:92%;width:102%;height:42%}
.mk>.doo-ring{left:-18%;top:-18%;width:136%;height:136%}

.doo-under{stroke-width:3.9}
.doo-loop{stroke-width:1.3}
.doo-ring{stroke-width:1.9}
.doo-arrow{stroke-width:3.6}
.free{position:absolute;display:block;pointer-events:none;z-index:2}
.free>.doo{inset:0;width:100%;height:100%}

.nav{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:60;
  display:flex;justify-content:center;
  max-width:var(--maxw);margin-inline:auto;
  padding:var(--nav-pad) var(--gut);
  pointer-events:none;
}

.nav-isl{
  pointer-events:auto;
  position:relative;
  display:flex;flex-direction:column;
  width:min(100%,340px);
  height:var(--nav-isl);
  overflow:hidden;
  border:1px solid var(--line);border-radius:var(--rc);
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  box-shadow:0 12px 30px -16px rgba(31,30,30,.42);

  max-height:calc(100vh - 2 * var(--nav-pad) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  max-height:calc(100dvh - 2 * var(--nav-pad) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
}
.nav-bar{
  flex:none;display:flex;align-items:center;
  height:var(--nav-isl);
  padding-inline:clamp(13px,1.6vw,26px);
  gap:clamp(10px,1.8vw,26px);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;color:var(--on)}
.brand svg{width:24px;height:24px;fill:currentColor}
.brand-name{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.02em;line-height:1.1}
.brand-name small{display:block;font-weight:500;font-size:11.5px;letter-spacing:0;color:var(--on-dim)}

.nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px)}

.nav-links a{
  text-decoration:none;font-size:14px;font-weight:600;color:var(--on);
  padding:6px 0;position:relative;
  transform-origin:left bottom;
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover,.nav-links a:focus-visible{transform:var(--lift)}
.nav-links a:nth-child(1){--lift:translate(2px,-3px) rotate(-5deg);--doo-rot:-9deg}
.nav-links a:nth-child(2){--lift:translate(2px,-3px) rotate(4.5deg);--doo-rot:11deg}
.nav-links a:nth-child(3){--lift:translate(3px,-4px) rotate(-8deg);--doo-rot:-14deg}
.nav-links a > .doo{

  stroke-linecap:butt;stroke-linejoin:miter;
  opacity:0;transform:scale(.5);transform-origin:left bottom;
  transition:opacity .2s ease,transform .44s cubic-bezier(.24,1.2,.5,1);
}
.nav-links a:hover > .doo,.nav-links a:focus-visible > .doo{opacity:1;transform:scale(1) rotate(var(--doo-rot))}

.nav-links a:nth-child(1) > .doo{
  width:29px;height:33px;stroke-width:56;
  right:-10px;bottom:calc(100% - 18px);
  stroke:var(--mark-2);
}
.nav-links a:nth-child(2) > .doo{
  width:38px;height:38px;stroke-width:17;
  right:-13px;top:calc(100% - 14px);
  stroke:var(--mark-3);
  transform-origin:left top;
}
.nav-links a:nth-child(3) > .doo{
  width:34px;height:38px;stroke-width:30;
  right:-26px;bottom:-5px;
  stroke:var(--mark);
}
.nav-cta{flex:none}

.nav-burger{
  display:none;place-items:center;flex:none;
  width:44px;height:44px;margin-right:-6px;
  border:0;background:transparent;color:inherit;
}

.nav-burger i{
  position:relative;display:block;width:19px;height:2px;background:currentColor;
  transition:background .2s ease;
}
.nav-burger i::before,.nav-burger i::after{
  content:"";position:absolute;left:0;width:100%;height:2px;background:currentColor;
  transition:transform .3s cubic-bezier(.76,0,.24,1);
}
.nav-burger i::before{top:-6px}
.nav-burger i::after{top:6px}
.nav.is-open .nav-burger i{background:transparent}
.nav.is-open .nav-burger i::before{transform:translateY(6px) rotate(45deg)}
.nav.is-open .nav-burger i::after{transform:translateY(-6px) rotate(-45deg)}

.nav-menu{
  display:none;

  --menu-air:clamp(28px,8vw,40px);
  padding:var(--menu-air) clamp(13px,4vw,18px) clamp(24px,6vw,30px);
  visibility:hidden;
  transition:visibility 0s linear .5s;

  min-height:0;overflow-y:auto;overscroll-behavior:contain;
}
.nav.is-open .nav-menu{visibility:visible;transition:visibility 0s}
.nav-menu-links{display:flex;flex-direction:column}

.nav-menu-links a{
  display:block;overflow:hidden;
  text-decoration:none;color:var(--on);
  padding-block:clamp(13px,3.8vw,17px);
  border-bottom:1px solid var(--line-soft);
}
.nav-menu-links a:last-child{border-bottom:0}
.nav-menu-links a > span{
  display:block;
  font-family:var(--display);font-weight:800;
  font-size:clamp(20px,6.2vw,26px);line-height:1.1;letter-spacing:-.035em;
  font-variation-settings:'wdth' 106;text-transform:uppercase;
  transform:translateY(118%);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}

.nav.is-open .nav-menu-links a > span{transform:none}
.nav.is-open .nav-menu-links a:nth-child(1) > span{transition-delay:.16s}
.nav.is-open .nav-menu-links a:nth-child(2) > span{transition-delay:.22s}
.nav.is-open .nav-menu-links a:nth-child(3) > span{transition-delay:.28s}
.nav-menu-foot{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;

  margin-top:var(--menu-air);
  opacity:0;transform:translateY(12px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1);
}
.nav.is-open .nav-menu-foot{opacity:1;transform:none;transition-delay:.36s}
.nav-menu-foot .nav-cta{--cd:44px}
.nav-menu-foot .nav-cta .btn-t{padding:13px 22px;font-size:14px}
/* menos movimento: os links não inclinam nem ganham a marca desenhada; no hover, no foco e
   no clique aparece um sublinhado, só de cor */
@media (prefers-reduced-motion:reduce){

  .nav.is-open .nav-menu-links a > span,
  .nav.is-open .nav-menu-foot{transition-delay:0s}
  .nav-links a{
    text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:7px;
    text-decoration-color:transparent;
  }
  .nav-links a:hover,.nav-links a:focus-visible,.nav-links a:active{transform:none;text-decoration-color:var(--mark)}
  .nav-links a > .doo{display:none}
}
@media (max-width:1080px){
  .nav-links{display:none}
  /* o CTA não desaparece: ele muda de endereço */
  .nav-bar > .nav-cta{display:none}
  .nav-burger{display:grid;margin-left:auto}
  .nav-menu{display:block}
}
@media (max-width:1200px){

  .brand-name small{display:none}
}
@media (min-width:1081px){
  :root{--nav-isl:60px}

  .nav-isl{width:70%;min-width:fit-content;max-width:100%;overflow:visible}

  .nav-bar{display:grid;grid-template-columns:1fr auto 1fr;column-gap:clamp(16px,2vw,40px)}
  .nav-bar > .brand{justify-self:start}
  .nav-bar > .nav-links{justify-self:center}
  .nav-bar > .nav-cta{justify-self:end}
}

/* ---------- hero ---------- */
/* o título abre a página: nada acima dele a não ser respiro */
.hero{position:relative;overflow:clip;padding-block:clamp(34px,5.5vw,86px) clamp(38px,6vw,78px)}
.hero-type{text-transform:uppercase;font-variation-settings:'wdth' 112;position:relative;z-index:1}

/* a máscara é a caixa da letra e não muda: as letras sobem por trás dela e param dentro.
   Embaixo ela desce --drop, o quanto o rabo do Q e a cedilha passam da caixa (medido em fitAll).
   Fica na .fit, não na .fitline: a .fitline cresce com o strut do pai e a borda deixaria de ser a da letra */
.fitline{display:block}
.fit{
  display:inline-block;white-space:nowrap;
  line-height:.80;letter-spacing:-.045em;
  font-size:11vw;
  clip-path:inset(0 -6% calc(var(--drop,0em) * -1) -6%);
}
.ch{display:inline-block}

.ch.w-alt{color:var(--mark)}

.hero-stage{position:relative;z-index:1;cursor:crosshair}
.trail{position:absolute;inset:0;z-index:3;pointer-events:none}

.tr{
  position:absolute;left:0;top:0;width:120px;aspect-ratio:var(--ar,16/9);
  border:1px solid var(--line);border-radius:var(--rc);
  background:var(--paper-2);overflow:hidden;
  box-shadow:0 10px 30px -14px rgba(31,30,30,.42);
}
.tr.is-seed{transform:translate(-50%,-50%) rotate(var(--rot,0deg))}
.tr video,.tr img{width:100%;height:100%;object-fit:cover}
.tr.is-big{box-shadow:0 18px 46px -16px rgba(31,30,30,.52)}
/* no rastro também entram grafismos, não só miniaturas */
.tr.is-doo{border:0;background:none;box-shadow:none;overflow:visible}

.tr.is-doo>.doo{
  inset:0;width:100%;height:100%;
  stroke-width:var(--dsw,1.7);stroke-linecap:butt;stroke-linejoin:miter;
}
.hero-lede{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.1rem,2.6vw,2.2rem);
  line-height:1.16;letter-spacing:-.025em;
  font-variation-settings:'wdth' 100;
  color:var(--on-dim);max-width:24ch;
}
.hero-lede em{font-style:normal;color:var(--ink)}

.hero-lede .mk>.doo-under{top:82%;height:26%}
.hero-foot{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:clamp(18px,2.4vw,34px);margin-top:clamp(22px,3vw,42px);
}
.hero-foot-l{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,2vw,26px)}
.hero-disc{font-size:13.5px;color:var(--on-dim);font-weight:600;padding-bottom:4px}
@media (max-width:560px){.tr.s4{display:none}}

@media (max-width:900px){
  .hero{
    display:flex;
    min-height:calc(100vh - var(--nav-h) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    min-height:calc(100dvh - var(--nav-h) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    padding-block:clamp(26px,7vw,52px) clamp(20px,4vw,34px);
  }
  .hero > .shell{display:flex;flex-direction:column;width:100%}

  .hero-stage{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}

  .hero-foot{
    flex-direction:column;align-items:flex-start;
    gap:clamp(14px,3.4vw,22px);margin-top:clamp(18px,3.6vw,30px);
  }

  .hero-lede{
    font-size:clamp(1.3rem,5.4vw,2rem);max-width:26ch;
    margin-top:clamp(14px,3vw,24px);
  }
  .hero-disc{padding-bottom:0}
}

/* ---------- seções ---------- */
.sec{padding-block:clamp(54px,7.5vw,104px)}
.sec-head{margin-bottom:clamp(24px,3.4vw,44px);position:relative}
.sec-title{display:block;text-transform:uppercase;font-variation-settings:'wdth' 110}

/* ---------- marquee de clientes ---------- */

.strip{padding-block:clamp(16px,2vw,26px);position:relative;overflow:hidden}
.marquee{
  position:relative;z-index:1;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{display:flex;width:max-content}

.marquee-track span{
  font-family:var(--display);font-weight:600;font-variation-settings:'wdth' 100;
  font-size:clamp(16px,1.6vw,23px);letter-spacing:-.015em;color:var(--on);
  padding-inline:clamp(32px,4.6vw,66px);white-space:nowrap;
  display:flex;align-items:center;
}

.marquee-doo{
  position:absolute;inset:0;width:200%;z-index:0;
  pointer-events:none;opacity:.22;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-doo span{position:absolute;display:block}

.marquee-doo .doo{inset:0;width:100%;height:100%;stroke:var(--on)}
/* menos movimento: a faixa não passa (reveals.ts a para no começo). Os nomes ficam em
   linhas, centrados e todos à vista; a segunda volta, a da emenda, some, e as bordas não
   apagam mais nada. As marcas do fundo ficam paradas onde estão */
@media (prefers-reduced-motion:reduce){
  .marquee{mask-image:none;-webkit-mask-image:none}
  .marquee-track{width:auto;flex-wrap:wrap;justify-content:center;row-gap:4px}
  .marquee-track .mq-dup{display:none}
}

/* ---------- filtros ---------- */
.chips{
  display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;
  padding-block:4px 14px;margin-bottom:20px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;border:1px solid var(--line);border-radius:999px;
  padding:9px 15px;font-size:13px;font-weight:600;color:var(--on-dim);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  transition:color .22s ease,border-color .22s ease,background .22s ease;
}
.chip em{font-style:normal;font-size:11.5px;opacity:.7;font-variant-numeric:tabular-nums}
.chip:hover{color:var(--on);border-color:var(--on-dim)}

.chip[aria-pressed="true"]{background:var(--mark-3);border-color:var(--mark-3);color:var(--ink)}
.chip[aria-pressed="true"] em{opacity:.85}

/* ---------- grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
  grid-auto-rows:var(--row,110px);
  grid-auto-flow:row dense;
  gap:12px;
}
@media (max-width:1280px){.grid{--cols:3}}
@media (max-width:860px){.grid{--cols:2}}
@media (max-width:540px){.grid{--cols:1}}

/* de duas colunas pra cima o grid.ts posiciona cada tile (pack.ts) e estes spans
   são espelhados lá, no SPAN; numa coluna só vale o fluxo daqui */
.tile{grid-row:span 2;min-width:0}
.tile.is-sq{grid-row:span 3}
.tile.is-tall{grid-row:span 4}
.tile.is-wide{grid-column:span 2;grid-row:span 1}
.tile.is-case{grid-column:span 2;grid-row:span 3}

.tile.is-hero{grid-column:span 2;grid-row:span 4}

/* a lâmpada: 1×1 com três ou quatro colunas, 1×2 com duas (o render é 1160×800, o
   1,45:1 do 1×2). No 1×1 o cover corta a partir do canto inferior esquerdo: o chão e a
   entrada da personagem ficam presos à borda, o corte cai no topo e na saída */
.tile-fill{
  position:relative;min-width:0;overflow:hidden;border-radius:var(--rc);
  background:#F9F5F0;border:1px solid var(--line-soft);
  pointer-events:none;
}
.tile-fill video,.tile-fill img{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:left bottom;
}
@media (max-width:540px){
  .tile.is-wide,.tile.is-case,.tile.is-hero{grid-column:span 1}
  .tile.is-case{grid-row:span 3}
  .tile.is-hero{grid-row:span 3}
}

.tile-link{
  display:block;width:100%;height:100%;padding:0;border:0;background:none;
  font:inherit;color:inherit;text-align:left;text-decoration:none;cursor:pointer;
}
.tile-media{
  position:relative;overflow:hidden;border-radius:var(--rc);height:100%;
  background:color-mix(in srgb,var(--on) 7%,var(--surface));
  border:1px solid var(--line-soft);
}
.tile-media img,.tile-media video{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,.8,.24,1),opacity .35s ease;
}
.tile-media video{position:absolute;inset:0;opacity:0}
/* o tile com thumb quadrada (o Invariant): a da coluna única só nela, a de sempre no resto */
.tile-media .tile-pic-sq{display:none}
@media (max-width:540px){
  .tile-media .tile-pic-wide{display:none}
  .tile-media .tile-pic-sq{display:block}
}
.tile-media video.on{opacity:1}
.tile-link:hover .tile-media img{transform:scale(1.045)}
/* a thumb que é um loop ocupa o lugar da imagem, então ganha o mesmo zoom */
.tile-link:hover .tile-media video.tile-thumb{transform:scale(1.045)}
.tile-badge{
  position:absolute;left:9px;top:9px;z-index:3;
  font-size:11px;font-weight:600;letter-spacing:.01em;
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  border:1px solid var(--line);border-radius:var(--r);padding:4px 9px;color:var(--on);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.tile-play{
  position:absolute;right:9px;top:9px;z-index:3;
  width:30px;height:30px;border-radius:999px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--surface) 68%,transparent);
  border:1px solid var(--line);
  opacity:0;transform:translateY(-6px);
  transition:opacity .3s ease,transform .3s ease;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.tile-play svg{width:11px;height:11px;fill:var(--on)}
.tile-link:hover .tile-play{opacity:1;transform:translateY(0)}

/* título e cliente vivem dentro da thumb e entram no hover */
.tile-over{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:clamp(11px,1.1vw,17px);
  background:linear-gradient(to top,
    color-mix(in srgb,var(--night) 94%,transparent),
    color-mix(in srgb,var(--night) 52%,transparent) 46%,
    transparent);
  color:#FFF7F0;
  opacity:0;transform:translateY(10px);
  transition:opacity .34s ease,transform .34s cubic-bezier(.16,.8,.24,1);
  pointer-events:none;
}
.tile-link:hover .tile-over,.tile-link:focus-visible .tile-over{opacity:1;transform:translateY(0)}
@media (hover:none){.tile-over{opacity:1;transform:none}}
/* menos movimento: a foto não dá zoom e o título e o play não sobem: só aparecem */
@media (prefers-reduced-motion:reduce){
  .tile-link:hover .tile-media img,.tile-link:hover .tile-media video.tile-thumb{transform:none}
  .tile-play,.tile-over,.tile-link:hover .tile-play,.tile-link:hover .tile-over,.tile-link:focus-visible .tile-over{transform:none}
}
.tile-title{font-size:14.5px;font-weight:700;letter-spacing:-.015em;line-height:1.2;font-variation-settings:'wdth' 100}
.tile-tag{font-size:11.5px;color:#ADA69E;margin-top:4px}

/* tiles tipográficos dos cases: tinta chapada, sem gradiente */
.tile.is-case .tile-media{border-color:var(--line)}
.tile.is-case .tile-title{font-size:clamp(16px,1.5vw,22px)}

.tile.is-hero .tile-media{border-color:var(--line)}
.tile.is-hero .tile-title{font-size:clamp(19px,2vw,30px)}
.tile.is-hero .tile-tag{font-size:13px;margin-top:6px}
.tile.is-wide .tile-over{padding:9px 13px}
.tile.is-wide .tile-title{font-size:13px}
.tile-type{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(17px,1.9vw,30px);gap:9px;
  background:var(--mark-solid);color:#FFF7F0;
}
.tile-type.alt{background:var(--paper);color:var(--ink)}

.tile-type h4{
  font-size:clamp(1.3rem,2.7vw,2.5rem);line-height:.98;letter-spacing:-.04em;
  font-variation-settings:'wdth' 104;max-width:14ch;
}
.tile-type p{font-size:13px;max-width:40ch;opacity:.78}
/* o desenho ao lado do texto (o cubo do AniHands): preso por cima e por baixo, sem
   transform, para o zoom do hover de .tile-media img valer sem deslocar nada */
.tile-type .tile-art{
  position:absolute;right:-6%;top:5%;height:130%;width:auto;max-width:none;object-fit:contain;
}
.tile-type > :not(.tile-art){position:relative}
/* o texto fica na metade esquerda: em três colunas o teaser numa linha só encostava no cubo */
.tile-art ~ p{max-width:min(40ch,50%)}
/* numa coluna só o tile fica quase quadrado: o cubo sobe e centraliza acima do texto */
@media (max-width:540px){
  .tile-type .tile-art{left:0;right:0;top:9%;height:46%;margin-inline:auto}
  .tile-art ~ p{max-width:40ch}
}
.case-go{display:inline-flex;align-items:center;gap:8px;margin-top:3px;font-size:12.5px;font-weight:700}

/* os links das páginas que o index.php põe no grid antes do JS (e para quem não roda JS) */
.grid-link{align-self:center;color:var(--on);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.more-wrap{display:flex;justify-content:center;margin-top:34px}

.svc{margin-top:clamp(12px,1.8vw,30px)}
.svc-row{
  --svc-gap:clamp(20px,4vw,72px);
  position:relative;
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:var(--svc-gap);
  padding-block:clamp(26px,3.4vw,46px);
  border-bottom:1px solid var(--line-soft);
  align-items:start;
}
.svc-row:last-child{border-bottom:0}
@media (max-width:820px){.svc-row{grid-template-columns:1fr;gap:16px}}
.svc-row summary{list-style:none;cursor:pointer;position:relative;grid-column:1}
.svc-row summary::-webkit-details-marker{display:none}
.svc-row h3{
  font-size:clamp(1.5rem,3.4vw,2.9rem);line-height:1;letter-spacing:-.04em;
  font-variation-settings:'wdth' 104;color:var(--on-dim);
  transition:color .3s ease;
}
.svc-row[open] h3,.svc-row summary:hover h3{color:var(--ink)}

.svc-row .sx{
  position:absolute;right:calc(-1 * (var(--svc-gap) + 138.1%));top:50%;transform:translateY(-50%);
  width:26px;height:26px;border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .3s ease;
}
@media (max-width:820px){.svc-row .sx{right:0}}
.svc-row .sx::before,.svc-row .sx::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--on-dim);
  transform:translate(-50%,-50%);transition:opacity .3s ease,background .3s ease;
}
.svc-row .sx::before{width:11px;height:2px}
.svc-row .sx::after{width:2px;height:11px}
.svc-row[open] .sx{border-color:var(--mark)}
.svc-row[open] .sx::before{background:var(--mark)}
.svc-row[open] .sx::after{opacity:0}

.svc-row.is-closing h3{color:var(--on-dim)}
.svc-row.is-closing .sx{border-color:var(--line)}
.svc-row.is-closing .sx::before,.svc-row.is-closing .sx::after{background:var(--on-dim)}
.svc-row.is-closing .sx::after{opacity:1}
.svc-b{grid-column:2;min-width:0;overflow:hidden;padding-right:44px}
@media (max-width:820px){.svc-b{grid-column:1;padding-right:0}}
.svc-row p{color:var(--ink);font-size:clamp(14px,1.05vw,15.5px);max-width:62ch}
.svc-row p + p{margin-top:12px;color:var(--on-dim)}

/* ---------- sobre ---------- */
.about{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:900px){.about{grid-template-columns:1fr}}
/* o canto sai da pintura, junto com a página. Um mix-blend-mode aqui dentro mistura com
   o <main> inteiro (a foto não é contexto de empilhamento), o Chrome tira a foto para uma
   camada própria e o canto passa a depender do compositor, que às vezes o perde */
.about-photo{
  background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--rc);overflow:clip;
}
.about-photo img{
  width:100%;height:auto;aspect-ratio:1;object-fit:contain;
  filter:grayscale(1) contrast(1.06);
}

.about h2{
  font-size:clamp(2rem,5vw,4.2rem);line-height:.95;letter-spacing:-.045em;
  font-variation-settings:'wdth' 104; margin-bottom: 25px;
}
@media (max-width:900px){.about h2{margin-top:0}}
.about h2 .q{color:var(--on-dim);font-weight:600; font-size: clamp(1rem, 3vw, 2.2rem);}
.about-role{font-size:14px;font-weight:700;color:var(--mark);margin-top:12px}
.about p{color:var(--ink);font-size:clamp(14px,1.05vw,15.5px);max-width:60ch;margin-top:15px}
.about p.dim{color:var(--on-dim)}
.about-text{display:flex;justify-content:space-between;flex-direction: column}
.link-out{margin-top:26px;align-self:flex-start}

/* ---------- depoimentos ---------- */
.quotes{border-top:1px solid var(--line)}
/* é um <figure>: zera o margin 1em 40px do navegador, que recuava o depoimento dos dois lados */
.quote{
  margin:0;
  display:grid;grid-template-columns:68px minmax(0,1fr);gap:clamp(18px,3vw,40px);
  padding-block:clamp(28px,4vw,54px);border-bottom:1px solid var(--line-soft);align-items:start;
}
@media (max-width:640px){.quote{grid-template-columns:50px minmax(0,1fr)}}
.quote img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;background:var(--paper-2);filter:grayscale(1)}
.quote blockquote{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,2.3vw,1.9rem);line-height:1.26;letter-spacing:-.025em;
  font-variation-settings:'wdth' 100;max-width:34ch;
}
.quote figcaption{font-size:13px;color:var(--on-dim);margin-top:14px;font-weight:600}

.quote.is-clamped blockquote{overflow:hidden}
.quote.is-clamped:not(.is-open) .q-rest{display:none}

.quote.is-clamped:not(.is-open) .q-lede::after{content:" …"}

.q-more{display:none;--cd:clamp(30px,2.6vw,36px);font-size:14px;vertical-align:middle;margin-left:.3em}
.quote.is-clamped .q-more{display:inline-block}

.quote.is-open .q-more .ico-track{scale:-1 1}
.quote.is-open .q-more{--dir:-1}

/* ---------- fim da página: a folha e o footer embaixo dela ---------- */
/* O <main> é uma folha opaca por cima do footer. O footer começa uma tela antes do fim
   dela (margin-top:-100vh) e o .ft-in fica sticky no topo: enquanto a folha sobe, ele
   fica parado embaixo e vai sendo descoberto. O ::after do .ft é o curso do sticky
   (a mesma tela devolvida), então a página termina onde terminava. O .ft-in tem no
   mínimo uma tela: com o topo preso, o que passar dela rola normalmente depois que a
   folha sai. Fora da última tela o footer não está atrás de nada.
   Sem z-index acima de 1 aqui: o .nav (60) segue por cima de tudo. */
main{position:relative;z-index:1;background:var(--paper) var(--grain)}
/* a sombra da borda da folha sobre o footer: a profundidade entre as duas camadas */
main::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:clamp(56px,10vh,120px);
  background:linear-gradient(rgba(0,0,0,.42),transparent);pointer-events:none;
}
.ft{
  position:relative;z-index:0;margin-top:-100vh;
  /* a âncora #contato cai onde a folha acabou de sair: uma tela abaixo do topo do footer */
  scroll-margin-top:-100vh;
}
.ft::after{content:"";display:block;height:100vh}
.ft-in{
  /* a margem dos créditos, mais estreita que a da coluna; o nome não tem margem nenhuma */
  --ft-edge:clamp(16px,2.6vw,48px);
  position:sticky;top:0;min-height:100vh;overflow:clip;
  display:flex;flex-direction:column;
  padding-top:calc(var(--nav-h) + clamp(12px,3vh,40px));   /* a ilha do nav segue por cima */
}
.ft-in > .shell{width:100%}

/* A. o contato: chamada, os dois canais e as redes, centrados no espaço acima da assinatura */
.ft-top{
  flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding-block:clamp(16px,4vh,48px);
}
.ft-cta{
  font-size:clamp(5.2rem, 8vw, 7.6rem);line-height:.92;
  font-variation-settings:'wdth' 106;
}
.ft-cta-sub{
  font-size:clamp(2.2rem,5vw,4.6rem);line-height:.92;
  font-variation-settings:'wdth' 106; font-weight: 400;
}
@media (max-width:900px){.ft-cta{font-size:clamp(2.2rem,7vw,4.6rem)}}
/* os dois canais têm a largura de "Vamos conversar.": o .ft-talk encolhe na frase, e o
   .ft-reach fica fora dessa conta (width:0) mas ocupa a largura toda (min-width:100%).
   O ponto final tem .054em de respiro depois da tinta (4px na de 72px): a margem negativa
   tira esse respiro da conta, e a borda dos cards cai na tinta do ponto */
.ft-talk .ft-cta-sub{margin-right:-.054em}
.ft-reach{
  display:flex;flex-wrap:wrap;gap:10px;
  width:0;min-width:100%;margin-top:clamp(24px,4.4vh,48px);text-align:left;
}
/* lado a lado enquanto os dois cabem inteiros, em partes iguais quando dá; senão um embaixo
   do outro. Com a frase de 72px (1440) ficam iguais; o e-mail pede ~263px, e abaixo de
   ~1140px de tela os dois empilham. O rótulo vai embaixo do valor */
.reach-row{
  flex:1 1 0;min-width:max-content;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"v c" "k c";
  align-items:center;column-gap:10px;
  border:1px solid var(--line);border-radius:var(--rc);padding:11px 12px 11px 15px;
  background:color-mix(in srgb,var(--on) 5%,var(--surface));
}
.reach-row .k{grid-area:k;font-size:11.5px;line-height:1.3;color:var(--on-dim);white-space:nowrap;font-weight:600; margin-top:5px}
.reach-row .v{
  grid-area:v;font-size:14.5px;font-weight:700;line-height:1.3;min-width:0;overflow-wrap:anywhere;
  color:var(--on);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;
  transition:text-decoration-color .25s ease;
}
.reach-row .v:hover,.reach-row .v:focus-visible{text-decoration-color:var(--mark-3)}
/* copiar: só o ícone, num círculo com o traço das pílulas; copiado, ele vira um visto */
.copy{grid-area:c;width:34px;height:34px;padding:0;justify-content:center; border: none}
.copy svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.copy .i-copy,.copy .i-done{transition:opacity .2s ease}
.copy .i-done,.copy.is-done .i-copy{opacity:0}
.copy.is-done .i-done{opacity:1}

/* as redes: pílulas menores e mais apagadas que os dois canais, numa linha só */
.ft-soc{
  list-style:none;margin:clamp(14px,2.2vh,22px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
}
.ft-soc .btn-sm{padding:6px 10px 6px 13px;font-size:11.5px;color:var(--on-dim);border-color:var(--line-soft);overflow:hidden}
/* a seta é a trilha de três dos depoimentos (.ico-track, ico-run) deitada a -45°: anda na
   diagonal até sumir na borda da pílula, que é quem corta (overflow acima). O passo de duas
   setas (24px na diagonal) já deixa a de espera inteira abaixo da borda de baixo.
   Só a trilha se mexe: a pílula não leva o empurrão do .ico */
.ft-ar{
  --cd:1.05em;--arrow-size:contain;
  position:relative;flex:none;width:var(--cd);height:var(--cd);margin-left:.3em;
}
.ft-ar .ico-track{rotate:-45deg}

/* B. os créditos: uma linha só, centrada e discreta, logo acima do nome. Cada trecho é
   inteiro; onde a linha não cabe (o celular), ela quebra depois do nome e o ponto dessa
   emenda sai junto, para nenhuma linha começar ou terminar num separador */
.ft-base{
  padding-inline:var(--ft-edge);margin-bottom:clamp(10px,1.6vw,22px);
  text-align:center;font-size:12px;line-height:1.5;color:var(--on-dim);
}
.ft-base span{white-space:nowrap}
@media (max-width:480px){.ft-cut{display:block;height:0;overflow:hidden}}

/* C. a assinatura: DIEGO e SILVA se afastam com o scroll e abrem o vão da roda
   (footer.ts). Sem padding: a tinta encosta nas bordas da tela e no chão do footer.
   O tamanho sai do footer.ts, que mede as duas palavras e a palavra mais larga da roda,
   e ele também puxa a caixa para baixo (margin-bottom negativo) até a tinta mais baixa
   tocar o chão; a sobra da caixa abaixo dela fica no overflow:clip do .ft-in. O 8.2vw
   só vale sem JS. O estado daqui é o final, o de quem pede menos movimento. */
.ft-sign{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
}
/* a largura vem por font-stretch, e não por font-variation-settings: é a mesma instância
   (semi-expanded, 112,5%) que o canvas do footer.ts mede para a tinta tocar as bordas */
.ft-w{
  display:block;white-space:nowrap;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-stretch:112.5%;line-height:.8;letter-spacing:-.045em;
  font-size:8.2vw;
}
/* a roda: as palavras empilhadas no eixo (--cy, do footer.ts), e o footer.ts põe cada
   uma no cilindro. Mais estreita que o nome (wdth 100): o vão fica menor e o nome cresce.
   Sem JS, só a primeira aparece, no meio do vão. */
.ft-wheel{position:relative;align-self:stretch;min-width:0;font-size:1.6vw}
.ft-wi{
  position:absolute;left:50%;top:var(--cy,50%);
  color:var(--mark-3);
  font-weight:100 !important;
  white-space:nowrap;line-height:1;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-variation-settings:'wdth' 100;letter-spacing:-.02em;
  transform:translate(-50%,-50%);opacity:0;
}
.ft-wi:first-child{opacity:1}

/* em coluna (o celular em pé), as palavras empilham, cada uma com o corpo que a leva de
   borda a borda (footer.ts): DIEGO sobe, SILVA desce, e a roda gira na faixa entre as duas */
@media (max-width:900px) and (orientation:portrait){
  .ft-sign{grid-template-columns:minmax(0,1fr)}
  .ft-w{justify-self:start;font-size:19vw}
  .ft-w-r{justify-self:end}
  .ft-wheel{align-self:auto;height:10vw;font-size:3.2vw}
}

/* menos movimento: nada fica preso; o footer vem depois da página, como um bloco comum */
@media (prefers-reduced-motion:reduce){
  main::after,.ft::after{display:none}
  .ft{margin-top:0;scroll-margin-top:0}
  .ft-in{position:relative;min-height:0}
}

.notes{margin-top:28px;border:1px solid var(--line-soft);border-radius:var(--rc);padding:16px 18px;background:color-mix(in srgb,var(--on) 5%,var(--surface))}
.notes summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--mark)}
.notes ul{margin:14px 0 0;padding-left:18px;color:var(--on-dim);font-size:13px;line-height:1.7}
.notes li + li{margin-top:7px}
.notes b{color:var(--on);font-weight:700}

/* ---------- overlay de case ---------- */

.dlg{
  border:0;padding:0;background:transparent;max-width:min(1040px,94vw);width:100%;
  max-height:92vh;color:var(--ink);inset:0;margin:auto;
}
.dlg::backdrop{background:rgba(31,30,30,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* a página do trabalho (inc/card-page.php): o mesmo card do overlay, sozinho na tela. Sem
   o <dialog>, quem centraliza é o position fixo com inset 0, margem automática e a altura
   do próprio card; o fundo é a tinta, como a cortina do overlay sobre a home */
html:has(> body.card-page),body.card-page{background:var(--ink)}
.dlg.is-page{position:fixed;height:fit-content}
/* o card é um <main>: sem a sombra que o main da home projeta sobre o footer */
.dlg.is-page::after{content:none}
a.dlg-close{color:inherit}
.dlg-back{display:flex;width:fit-content}

.dlg-card{
  position:relative;
  background:var(--paper);border:1px solid var(--ink);border-radius:var(--rc);
  max-height:92vh;overflow:hidden;
  display:flex;flex-direction:column;
}
.dlg-scroll{
  min-height:0;overflow-y:auto;overscroll-behavior:contain;
}

.dlg-close{
  position:absolute;z-index:3;
  right:clamp(14px,1.6vw,20px);top:clamp(14px,1.6vw,20px);
  width:36px;height:36px;border-radius:999px;
  border:1px solid var(--line);display:grid;place-items:center;
  background:var(--paper);
  transition:border-color .2s ease,color .2s ease;
}
.dlg-close:hover{border-color:var(--mark);color:var(--mark)}
.dlg-close svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.dlg-badge{font-size:12.5px;font-weight:700;color:var(--mark);display:block;margin-bottom:8px}
/* a margem de baixo separa o título do texto em todo overlay; com a assinatura do
   AniHands (margem de cima própria) as duas colapsam e vale a maior */
.dlg-col-txt :is(h1,h3){font-size:clamp(1.25rem,2.8vw,2.1rem);line-height:1.04;letter-spacing:-.035em;font-variation-settings:'wdth' 102;max-width:26ch;margin-bottom:30px}

.dlg-col-txt .btn-t{white-space:normal}

.dlg-badge,.dlg-col-txt :is(h1,h3){padding-right:48px}
.dlg-body{padding:clamp(20px,3vw,30px)}
.dlg-col{min-width:0}
.dlg-lede{color:var(--ink);font-size:clamp(14px,1.05vw,15.5px);max-width:68ch}
.dlg-lede + .dlg-lede{margin-top:12px;color:var(--on-dim)}

.dlg-media{
  margin:20px 0;border-radius:var(--rc);overflow:hidden;
  border:1px solid var(--line);background:var(--paper-2);
  display:flex;justify-content:center;
}
.dlg-media video,.dlg-media img{
  display:block;width:auto;height:auto;
  max-width:100%;max-height:var(--media-max);
}
.dlg-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:20px 0}
@media (max-width:640px){.dlg-bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dlg-bento video{width:100%;border-radius:var(--rc);border:1px solid var(--line);background:var(--paper-2);display:block}
.dlg-bento .wide{grid-column:span 2}

.lot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:18px}
@media (max-width:540px){.lot{grid-template-columns:1fr}}

.lot > div{
  aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--rc);background:var(--paper-2);
  display:grid;place-items:center;overflow:hidden;
}
.lot > div > svg{width:100%;height:100%;display:block}
/* a vertical desce por duas linhas; contain:size tira o SVG 9:16 da conta das linhas,
   que seguem a altura 4:3 das vizinhas, e a célula estica até elas */
.lot > .is-tall{grid-row:span 2;aspect-ratio:auto;contain:size}
@media (max-width:540px){.lot > .is-tall{grid-row:auto;aspect-ratio:2/3}}
/* peça que ocupa quase toda a largura da prancheta: sem a folga, o texto encosta na borda da célula */
.lot > .is-tight{padding:0 7%}

.lot-cell{min-height:0}
.dlg-out{margin-top:22px}
.dlg-stub{border:1px dashed var(--line);border-radius:var(--rc);padding:17px;color:var(--on-dim);font-size:13px;line-height:1.6}
.dlg-stub b{color:var(--ink);font-weight:700}

/* o texto do AniHands: a assinatura, a frase de fecho e a nota */
.dlg-tag{
  margin:12px 0 16px;max-width:30ch;
  font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.25vw,1.15rem);
  line-height:1.25;letter-spacing:-.02em;font-variation-settings:'wdth' 100;
}
.dlg-punch{margin-top:16px;font-weight:700;color:var(--ink);font-size:clamp(14px,1.05vw,15.5px)}
.dlg-refs-h + .dlg-lede{margin-top:9px}
.dlg-note{
  margin-top:24px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:12.5px;line-height:1.55;color:var(--on-dim);
}

/* o Cube Scroll: a trilha (.cube-exp) passa os 2.000 px do gabarito (.cube-run) enquanto o
   palco fica preso no meio da tela de quem rola. O cube.ts mede a folga até o meio
   (--cube-top), o resto da tela abaixo do palco (--cube-tail), que fica depois da trilha
   para o fim da rolagem cair no fim da timeline, e o recuo (--cube-lead) que faz o
   quadro 0 começar já no lugar onde prende. A rolagem aqui é a timeline: a ancoragem do
   navegador nunca pode empurrá-la. */
.cube-exp{
  margin-top:22px;padding-top:var(--cube-lead,0px);padding-bottom:var(--cube-tail,0px);
  overflow-anchor:none;
}
.cube-run{height:var(--scroll-distance,2000px)}
.cube-exp.is-off{padding:0}
.cube-exp.is-off .cube-run{display:none}
/* o palco é quadrado como o canvas da comp e no fundo das outras peças do overlay; a
   largura também é a altura, então desconta a legenda abaixo (8 de margem + até duas
   linhas de 18) para o palco preso caber inteiro na coluna */
.cube-fig{
  position:sticky;top:var(--cube-top,0px);
  margin:0 auto;width:min(100%, calc(var(--media-max) - 44px));
}
.cube-fig figcaption{margin-top:8px;font-size:12px;line-height:1.5;color:var(--on-dim)}
.cube-fig figcaption b{color:var(--ink);font-weight:700}
.cube-stage{
  position:relative;aspect-ratio:1;width:100%;
  border-radius:var(--rc);overflow:hidden;border:1px solid var(--line);background:var(--paper-2);
}
.cube-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
/* sem WebGL, a pose autoral na escala da comp: o cubo ocupa 83,5% da altura do canvas */
.cube-poster{position:absolute;left:0;right:0;top:8.4%;height:83.5%;width:auto;margin-inline:auto}
.cube-status{
  position:absolute;inset:0;display:grid;place-items:center;padding:24px;pointer-events:none;
  color:var(--on-dim);font-size:12.5px;text-align:center;
}
.cube-stage.is-error .cube-status{inset:auto 0 0;padding:14px 16px}
.cube-hint{
  position:absolute;left:50%;bottom:16px;z-index:2;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;white-space:nowrap;pointer-events:none;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 86%,transparent);color:var(--ink);
  font-size:12px;font-weight:600;transition:opacity .4s ease;
}
.cube-hint::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--mark)}
.cube-exp.is-moved .cube-hint,.cube-stage.is-error .cube-hint{opacity:0}

/* a barra de rolagem: fina e sem setas. O Chrome 121+ ignora todas as regras
   ::-webkit-scrollbar de um elemento que tenha scrollbar-color ou scrollbar-width e
   desenha a barra do sistema (no Windows, larga e com setas); por isso as duas
   propriedades padrão ficam só para quem não tem ::-webkit-scrollbar (o Firefox). */
@supports not selector(::-webkit-scrollbar){
  html,.dlg-scroll,.dlg-col{scrollbar-width:thin;scrollbar-color:var(--bar) transparent}
}

html{background:var(--paper)}
html::-webkit-scrollbar,.dlg-scroll::-webkit-scrollbar,.dlg-col::-webkit-scrollbar{width:4px;height:4px}
/* sob a barra da página o canvas pinta só a cor do html, sem o grão do body: liso, o
   papel virava uma faixa mais clara ao lado da página. O grão vai na própria barra; a
   do overlay fica sem fundo, sobre o papel liso do cartão. */
html::-webkit-scrollbar{background:var(--paper) var(--grain)}
html::-webkit-scrollbar-thumb,.dlg-scroll::-webkit-scrollbar-thumb,.dlg-col::-webkit-scrollbar-thumb{
  background:var(--bar);border-radius:999px;
}
html::-webkit-scrollbar-thumb:hover,.dlg-scroll::-webkit-scrollbar-thumb:hover,.dlg-col::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,var(--bar) 72%,var(--ink));
}

.dlg-card{--media-max:max(220px, calc(92vh - 140px))}
.dlg-embed{
  position:relative;aspect-ratio:var(--ar,16/9);margin:22px auto;
  max-height:var(--media-max);
  width:min(100%, calc(var(--media-max) * var(--ar,1.78)));
  border-radius:var(--rc);overflow:hidden;border:1px solid var(--line);
  background:var(--paper-2);
}

.dlg-body > *:first-child{margin-top:0}
.dlg-embed>img,.dlg-embed>picture>img,.dlg-embed>video,.dlg-embed>iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;display:block;
}

.dlg-embed.is-strip{aspect-ratio:auto;height:clamp(110px,16vw,180px);width:100%;max-height:none;background:var(--ink)}
.dlg-embed.is-strip>img,.dlg-embed.is-strip>picture>img,.dlg-embed.is-strip>video,.dlg-embed.is-strip>iframe{object-fit:contain}
.dlg-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(54px,7vw,72px);aspect-ratio:1;border-radius:50%;z-index:2;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  border:1px solid var(--ink);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .3s cubic-bezier(.16,.8,.24,1),background .25s ease;
}
.dlg-play:hover,.dlg-play:focus-visible{transform:translate(-50%,-50%) scale(1.07);background:var(--paper)}
@media (prefers-reduced-motion:reduce){.dlg-play:hover,.dlg-play:focus-visible{transform:translate(-50%,-50%)}}
.dlg-play svg{width:34%;fill:var(--ink);margin-left:8%}
.dlg-embed.is-loading>iframe{opacity:0;pointer-events:none}
.dlg-embed.is-loading .dlg-play{cursor:wait}
.dlg-embed.is-loading .dlg-play svg{display:none}
.dlg-embed.is-loading .dlg-play::after{
  content:'';width:32%;aspect-ratio:1;border:2px solid transparent;
  border-top-color:var(--ink);border-right-color:var(--ink);border-radius:50%;
  animation:player-wait .8s linear infinite;
}
@keyframes player-wait{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dlg-embed.is-loading .dlg-play::after{animation:none}}

.dlg-meta{
  display:flex;flex-wrap:wrap;gap:5px 20px;margin-bottom:17px;
  font-size:12.5px;font-weight:600;color:var(--on-dim);
}
.dlg-meta b{color:var(--ink);font-weight:700}

.dlg-refs-h{margin-top:26px;font-size:12.5px;font-weight:700;color:var(--ink)}
.dlg-refs{margin-top:11px;display:grid;gap:11px}
.dlg-refs.is-side{grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);align-items:start}
@media (max-width:640px){.dlg-refs.is-side{grid-template-columns:1fr}}
.dlg-ref{margin:0;min-width:0}
.dlg-ref video,.dlg-ref img{
  display:block;border-radius:var(--rc);
  border:1px solid var(--line);background:var(--paper-2);
}

.dlg-ref video{
  aspect-ratio:var(--ar,16/9);object-fit:cover;
  max-height:calc(var(--media-max) * .9);
  width:min(100%, calc(var(--media-max) * .9 * var(--ar,1.78)));
  margin-inline:auto;
}
.dlg-ref img{
  width:100%;height:auto;object-fit:cover;
  max-height:calc(var(--media-max) * .9);
}
.dlg-ref figcaption{margin-top:8px;font-size:12px;line-height:1.5;color:var(--on-dim)}

.dlg-pieces{margin:22px 0;display:grid;gap:14px}
.dlg-piece{margin:0;min-width:0}
.dlg-piece .dlg-embed{margin:0 auto}
.dlg-piece figcaption{margin-top:8px;font-size:12px;line-height:1.5;color:var(--on-dim)}
/* o mosaico: cada peça cresce a partir de base 0 na proporção dela (--g = largura/altura),
   então a linha se divide de um jeito que todas saem na mesma altura */
.dlg-prow{display:flex;gap:14px;align-items:flex-start}
.dlg-prow .dlg-piece{flex:var(--g) 1 0}
.dlg-prow .dlg-embed{width:100%;max-height:none}
/* no celular, duas por linha; a que sobra fica no meio, com a mesma largura */
@media (max-width:640px){
  .dlg-prow{flex-wrap:wrap;justify-content:center}
  .dlg-prow .dlg-piece{flex:0 0 calc(50% - 7px)}
}

@media (min-width:901px){

  .dlg{

    --dlg-info:300px;
    max-width:min(calc(var(--dlg-media,860px) + var(--dlg-info) + 2px
      + 2 * clamp(20px,3vw,30px) + clamp(20px,2.4vw,34px)), 94vw);
  }
  .dlg-scroll{overflow:hidden;display:flex;flex-direction:column}
  .dlg-body{
    flex:1;min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--dlg-info);
    grid-template-rows:minmax(0,1fr);
    column-gap:clamp(20px,2.4vw,34px);
  }

  .dlg-card{--media-max:max(220px, calc(92vh - 2px - 2 * clamp(20px,3vw,30px) - 22px))}
  .dlg-col{min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .dlg-col-media{grid-area:1/1}
  .dlg-col-txt{
    grid-area:1/2;
    border-left:1px solid var(--line);
    padding-left:clamp(20px,2.4vw,34px);

    padding-right:14px;
  }

  @media (min-width:1200px){
    .dlg{--dlg-info:440px}
  }

  .dlg-col > *:first-child{margin-top:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .marquee-track{animation:none}
}

/* ---------- 404 (404.php) ---------- */
/* o número enche a largura da coluna como o título do hero, sem passar da altura da tela:
   "404" mede --nf-w de largura por em (medido na Archivo 800, wdth 112, com este
   letter-spacing e o zero da carinha). O zero é a face-a do catálogo, a carinha triste */
.nf{
  --nf-w:2.05;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(28px,6vh,64px);
  padding:var(--gut);
}
/* a página é uma folha só: sem a sombra que o main da home projeta sobre o footer */
.nf::after{content:none}
.nf-code{
  position:relative;
  font-size:min(calc((100vw - 2 * var(--gut)) / var(--nf-w)), 64vh);
  line-height:.8;letter-spacing:-.045em;
  font-variation-settings:'wdth' 112;
}
.nf-num{display:block;white-space:nowrap}
/* a caixa do zero é mais larga que o "0" (.657em) para a carinha não encostar no travessão
   do 4; o margin-right devolve o letter-spacing que a caixa, atômica, não leva depois dela */
.nf-o{position:relative;display:inline-block;width:.78em;margin-right:-.045em;text-align:center;color:transparent}
/* a carinha tem a altura do 4 (.703em de tinta) e o centro no meio dele: .383em abaixo do
   topo da linha, e não .4em (o meio da linha), porque a tinta do número não fica no meio dela */
.nf-face{left:50%;top:.383em;width:.71em;height:auto;transform:translate(-50%,-50%)}
/* a caneta passa como nos doodles da home: olhos, boca e o contorno, nessa ordem */
.nf-face path{stroke-dasharray:1 2;stroke-dashoffset:1;animation:nf-draw 1.5s cubic-bezier(.65,0,.35,1) .35s forwards}
@keyframes nf-draw{to{stroke-dashoffset:0}}
.nf-back{--btn-line:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .nf-face path{animation:none;stroke-dashoffset:0}
}