/* ═══════════════════════════════════════════════════════════════════════
   VEXOO — folha compartilhada (recriação de estudo)
   Medidas tiradas do original em vexoo.framer.website @1440px
   ═══════════════════════════════════════════════════════════════════════ */

/* ── FONTES ────────────────────────────────────────────────────────────── */
@font-face{font-family:"Open Sauce Two";src:url("https://framerusercontent.com/assets/MuNMZGWeNhX5Gys174fgd0zrnbE.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sauce Sans";src:url("https://framerusercontent.com/assets/O2R7AhA6wjBk0GHLJl0N8fqxN0.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sauce Sans";src:url("https://framerusercontent.com/assets/VvQsG6v03iEur3JMvHc8uDrkGo.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root{
  --bg:#fff; --fg:#000;
  --ring:#00000005;
  --fg-48:#0000007a;
  --fg-24:#0000003d;

  /* ── identidade KRIO (valores tirados do styles.css do site da KRIO) ── */
  --lime:#d2ff00;
  --lime-deep:#a8d400;
  --lime-soft:#c5e84a;
  --accent:#91b100;          /* no claro o lime puro não tem contraste */
  --glow:.045;               /* intensidade da luz de fundo — deve ser um sussurro */
  --glow-2:.022;
  --chrome:.07;

  --radius:32px;
  --radius-sm:12px;
  --pad:32px;
  --gap:16px;
  --edge:16px;          /* home */
  --edge-page:32px;     /* páginas internas */
  --edge-wide:80px;     /* blocos de texto do case study */
  --nav-h:76px;
  --display:160px;
  /* o título precisa caber INTEIRO na faixa limpa acima dos cards */
  --grid-offset:calc(var(--display) + 16px);
  --hero-travel:320px;  /* de quão abaixo a palavra sobe, atravessando o vidro */
  --glass-tint:.08;
  --glass-tint-hover:.02;
  --skew:12deg;

  --sec-gap:150px;      /* respiro entre seções (medido no /about) */
  --grain:.08;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000; --fg:#fff;
    --ring:#ffffff0f; --fg-48:#ffffff7a; --fg-24:#ffffff3d;
    --accent:var(--lime); --glow:.062; --glow-2:.03; --chrome:.045;
  }
}
:root[data-theme="dark"]{
  --bg:#000; --fg:#fff;
  --ring:#ffffff0f; --fg-48:#ffffff7a; --fg-24:#ffffff3d;
  --accent:var(--lime); --glow:.062; --glow-2:.03; --chrome:.045;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  background:var(--bg); color:var(--fg);
  font-family:"Open Sauce Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:500; font-size:16px; line-height:1.4em; letter-spacing:-.02em;
}
body.is-home{overflow:hidden}
h1,h2,h3,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}

/* ── 2. GRÃO ───────────────────────────────────────────────────────────────
   O original: PNG 256×256 (16 tons de cinza) repetido em background-size:64px,
   opacity .08, position:absolute; inset:0; z-index:10; pointer-events:none.
   Cobre o DOCUMENTO inteiro (não é fixed) — ou seja, rola junto.
   Aqui a textura é gerada em canvas com a mesma distribuição de tons.          */
.grain{
  position:absolute; inset:0; z-index:10;
  pointer-events:none; user-select:none;
  background-image:var(--grain-url);
  background-size:64px; background-repeat:repeat;
  opacity:var(--grain);
}
.page{position:relative; min-height:100%; isolation:isolate}

/* ── 2b. LUZ DE FUNDO (lime KRIO) — SEGUE O PONTEIRO ───────────────────────
   Camada FIXA atrás de tudo (z-index 0). Os cards de vidro ficam em
   z-index 2, então o backdrop-filter deles amostra esta luz e devolve um
   reflexo lime sutil. Nenhum card precisa saber que ela existe.

   O JS escreve --mx/--my (ponteiro, com lerp rápido) e --mx2/--my2 (lerp
   lento). Cada camada anda por transform:translate() em px: o compositor
   move o borrão já rasterizado em vez de repintar a cada quadro.        */
.glow{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
  contain:strict;
}
.glow i{
  position:absolute; left:0; top:0; display:block;
  will-change:transform;
}
/* LUZ PRINCIPAL — o halo lime, centrado no ponteiro.
   A margem negativa é metade da caixa: põe o centro do gradiente
   exatamente onde o cursor está, sem precisar de translate(-50%,-50%)
   (que brigaria com o translate em px).                                 */
.glow .g1{
  width:78vmax; height:58vmax; margin:-29vmax 0 0 -39vmax;
  transform:translate(var(--mx,50vw), var(--my,18vh));
  background:radial-gradient(closest-side at 50% 50%,
    color-mix(in srgb,var(--lime) calc(var(--glow) * 100%),transparent) 0%,
    color-mix(in srgb,var(--lime-deep) calc(var(--glow) * 52%),transparent) 26%,
    color-mix(in srgb,var(--lime-deep) calc(var(--glow) * 18%),transparent) 46%,
    transparent 72%);
  filter:blur(28px);
}
/* SEGUNDA CAMADA — mesma origem, lerp lento. É o atraso entre ela e a g1
   que dá profundidade; se as duas andassem juntas seria um círculo só,
   colado no cursor.                                                     */
.glow .g2{
  width:56vmax; height:44vmax; margin:-22vmax 0 0 -28vmax;
  transform:translate(var(--mx2,50vw), var(--my2,18vh));
  background:radial-gradient(closest-side at 50% 50%,
    color-mix(in srgb,var(--lime-soft) calc(var(--glow-2) * 100%),transparent) 0%,
    transparent 70%);
  filter:blur(44px);
}
/* MANCHA CROMADA Y2K — prata líquido, sem cor. Esta NÃO segue o ponteiro:
   ela é o fundo que estava lá antes, girando devagar fora da tela.      */
.glow .g3{
  left:auto; top:-24vh; right:-16vw;
  width:min(78vw,980px); height:66vh;
  border-radius:48% 52% 61% 39%/42% 58% 42% 58%;
  background:conic-gradient(from 210deg at 50% 50%,
    color-mix(in srgb,var(--fg) calc(var(--chrome) * 100%),transparent), transparent 18%,
    color-mix(in srgb,var(--fg) calc(var(--chrome) * 130%),transparent) 34%, transparent 52%,
    color-mix(in srgb,var(--lime) calc(var(--chrome) * 55%),transparent) 68%,
    color-mix(in srgb,var(--fg) calc(var(--chrome) * 110%),transparent) 84%, transparent);
  filter:blur(64px);
  animation:drift3 56s linear infinite;
}
@keyframes drift3{from{transform:rotate(0deg)} to{transform:rotate(360deg)}}

/* toque / reduced-motion: o JS nem instala o rastreamento, então as
   camadas ficam no repouso que as variáveis-padrão definem             */
@media (prefers-reduced-motion:reduce){
  .glow .g3{animation:none}
}

/* ── 3. TIPOGRAFIA ─────────────────────────────────────────────────────── */
.display{
  font-family:"Open Sauce Two",system-ui,sans-serif;
  font-weight:500; font-size:var(--display); line-height:1em; letter-spacing:-.04em;
}
.lead{font-size:40px; line-height:1.3em; letter-spacing:-.02em}
/* O Sobre é texto longo: a abertura fica no tamanho de chamada e o corpo
   desce para um tamanho de leitura. Sem isso vira uma parede de 40px. */
.lead-sm{font-size:24px; line-height:1.5em; letter-spacing:-.005em}
.about-text{display:flex; flex-direction:column; gap:40px; min-width:0}
.sub{font-size:36px; line-height:1.2em; letter-spacing:-.02em}
.t-20{font-size:20px; line-height:1.2em}
.t-18{font-size:18px; line-height:1.2em}
.muted{color:var(--fg-48)}
.faint{color:var(--fg-24)}
.clock{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 4. NAV ────────────────────────────────────────────────────────────── */
.nav{
  height:var(--nav-h); padding:0 var(--edge);
  display:flex; align-items:center; justify-content:space-between;
  position:relative; z-index:3;
}
.nav.nav--page{padding:0 var(--edge-page)}
.nav-left{display:flex;align-items:center;gap:100px}
.nav-right{display:flex;align-items:center;gap:32px}
.meta{display:flex;align-items:center;gap:6px}
.back{display:inline-flex;align-items:center;gap:8px}
.back svg{width:14px;height:14px;flex:none}

/* ── 5. PRIMITIVO "ROLL" ───────────────────────────────────────────────── */
.roll{
  display:flex; flex-direction:column; gap:8px;
  overflow:hidden; position:relative; user-select:none;
  /* A caixa tem que medir EXATAMENTE uma linha. Antes vinha 22px fixo no
     HTML enquanto a linha media 21,59px (18px x 1.2): os 0,4px de sobra
     deixavam aparecer um fio da copia de baixo e o texto parecia cortado
     no meio do giro. Em `em` a caixa acompanha a fonte de cada contexto
     e nunca desencontra. As setas seguem com a altura do proprio SVG,
     declarada inline.                                                   */
  line-height:1.2em;
  height:1.2em;
}
.roll > span{
  display:block; flex:none;
  transition:transform var(--spring-dur,.45s) var(--spring-ease,ease);
}
/* A inclinação precisa pivotar no canto SUPERIOR ESQUERDO. Com o padrão
   (centro), metade da cópia sobe: num rótulo de 136px, skewY(12deg) ergue
   a quina esquerda uns 14px — e ela aparecia como um risco por baixo do
   título. Pivotando no topo, a inclinação só empurra para baixo, para
   fora da janela. Em rótulo curto não dava para ver; "Entre em contato"
   é largo o bastante para denunciar.                                   */
.roll .r-b{transform:skewY(var(--skew)); transform-origin:left top}
.roll-host:hover .r-t,.roll-host:focus-visible .r-t{transform:translateY(calc(-100% - 8px))}
.roll-host:hover .r-b,.roll-host:focus-visible .r-b{transform:translateY(calc(-100% - 8px)) skewY(0deg)}

/* ── 6. HERO (home) ────────────────────────────────────────────────────── */
.header{
  height:calc(100vh - var(--nav-h));
  padding:0 var(--edge) var(--edge);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
/* A janela é MUITO mais alta que a linha de texto: ela desce por trás dos
   cards. Assim a palavra começa bem embaixo (dentro da zona de vidro), sobe
   atravessando o blur e PARA em cima, 100% visível e legível.               */
.hero-window{
  position:absolute; top:0; left:var(--edge); right:var(--edge);
  height:calc(var(--display) + var(--hero-travel));
  overflow:hidden; z-index:1; pointer-events:none;
}
.hero-word{
  position:absolute; top:0; left:50%; white-space:pre;
  font-family:"Open Sauce Two",system-ui,sans-serif;
  font-weight:500; font-size:var(--display); line-height:1em; letter-spacing:-.04em;
  transform:translate(-50%,var(--hero-travel)) skewY(var(--skew));
  /* estacionada = invisível. Sem isso as 6 palavras paradas aparecem todas
     ao mesmo tempo atrás do vidro e viram borrão. O fade de saída tem atraso
     para a palavra continuar visível enquanto desce.                        */
  opacity:0;
  transition:transform var(--spring-dur,.5s) var(--spring-ease,ease),
             opacity .45s ease .22s;
  will-change:transform,opacity;
}
/* Tipo chapado, sem tratamento. O prata líquido saiu daqui a pedido —
   o efeito Y2K fica só na mancha cromada do fundo (.glow .g3).            */
.hero-word,
.hero-word .ch{color:var(--fg)}
.hero-word.is-active{
  transform:translate(-50%,0) skewY(0deg);
  opacity:1;
  transition:transform var(--spring-dur,.5s) var(--spring-ease,ease),
             opacity .2s ease;
}
.hero-word .ch{display:inline-block}

/* ── 7. BENTO (home) ───────────────────────────────────────────────────── */
.bento{
  position:relative; z-index:2; flex:1 0 0; height:1px;
  display:grid;
  grid-template-columns:repeat(4,minmax(50px,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:var(--gap); padding-top:var(--grid-offset);
  overflow:hidden;
}
.span-3{grid-column:span 3}
.span-2{grid-column:span 2}
.subgrid{display:grid;gap:var(--gap);height:100%}
.subgrid-3{grid-template-columns:repeat(3,minmax(50px,1fr))}
.subgrid-2r{grid-template-rows:repeat(2,minmax(0,1fr))}

/* ── 8. VIDRO ──────────────────────────────────────────────────────────── */
.card{
  position:relative; overflow:hidden;
  border-radius:var(--radius); padding:var(--pad);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 1px var(--ring);
  display:flex; flex-direction:column; justify-content:flex-end;
  min-width:0; min-height:0;
}
.card .tint{
  position:absolute; inset:0; z-index:1;
  background:var(--fg); opacity:var(--glass-tint);
  transition:opacity .4s cubic-bezier(.33,1,.68,1);
  pointer-events:none;
}
.card:hover .tint,.card:focus-visible .tint{opacity:var(--glass-tint-hover)}
.card .row{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; width:100%;
}
.card .label{font-size:18px;line-height:1.2em}
.arrow{width:18px;height:16px;flex:none}
.arrow svg{display:block;width:16px;height:16px;transform:rotate(-45deg)}

.photo{
  position:relative; overflow:hidden;
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 1px var(--ring);
  min-width:0;min-height:0;
}
.photo img{
  position:absolute; inset:1px; width:calc(100% - 2px); height:calc(100% - 2px);
  object-fit:cover; border-radius:var(--radius);
  transition:transform .8s cubic-bezier(.33,1,.68,1);
}
.photo:hover img{transform:scale(1.03)}

/* ── 9. TICKER ─────────────────────────────────────────────────────────── */
.ticker{
  position:relative; overflow:hidden;
  /* explícito: dentro de .card herdaria column + flex-end e jogaria a
     trilha para o rodapé do card */
  display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.ticker--bleed{mask-image:none;-webkit-mask-image:none}
.ticker-track{display:flex;gap:16px;align-items:center;animation:marquee var(--speed,18s) linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tool{
  width:56px;height:56px;flex:none;border-radius:14px;
  position:relative;overflow:hidden;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--fg) 6%,transparent);
  box-shadow:inset 0 1px 0 1px var(--ring);
  transition:transform .4s cubic-bezier(.33,1,.68,1);
}
.tool img{width:26px;height:26px;object-fit:contain;display:block;
  transition:transform .4s cubic-bezier(.33,1,.68,1)}
.tool:hover img{transform:scale(1.12)}
/* Logos de tinta única (Affinity, Codex): o arquivo é escuro, então no tema
   escuro ele sumiria. Um <img> não herda currentColor, e inverter é o único
   jeito sem inline do SVG. Os coloridos não levam isso.                  */
:root[data-theme="dark"] .tool--mono img{filter:invert(1)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tool--mono img{filter:invert(1)}
}

/* ── 10. TOGGLE SOL/LUA + DOT ──────────────────────────────────────────── */
.theme{
  width:18px;height:18px;flex:none;position:relative;
  display:grid;place-items:center;color:var(--fg);
  transition:transform .5s cubic-bezier(.33,1,.68,1);
}
.theme:hover{transform:rotate(22deg)}
.theme svg{
  position:absolute;width:18px;height:18px;display:block;
  transition:opacity .35s ease,transform .5s cubic-bezier(.33,1,.68,1);
}
/* mostra o ícone do modo para o qual o clique vai levar */
.theme .i-sun {opacity:0;transform:scale(.5) rotate(-70deg)}
.theme .i-moon{opacity:1;transform:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme .i-sun {opacity:1;transform:none}
  :root:not([data-theme="light"]) .theme .i-moon{opacity:0;transform:scale(.5) rotate(70deg)}
}
:root[data-theme="dark"]  .theme .i-sun {opacity:1;transform:none}
:root[data-theme="dark"]  .theme .i-moon{opacity:0;transform:scale(.5) rotate(70deg)}
:root[data-theme="light"] .theme .i-sun {opacity:0;transform:scale(.5) rotate(-70deg)}
:root[data-theme="light"] .theme .i-moon{opacity:1;transform:none}

/* herdado do template original: pílula de status com bolinha piscando.
   Removida — tem cara de badge de dashboard, não de portfólio.          */

/* ── 11. PÁGINAS INTERNAS ──────────────────────────────────────────────── */
.page-main{padding:0 var(--edge-page) 0;display:flex;flex-direction:column;gap:var(--sec-gap)}
/* Portfólio e currículo são páginas de leitura: em 1440px a linha fica
   longa demais e a grade espalha. Um teto centralizado resolve os dois.  */
body.is-read .page-main,
body.is-read .footer{max-width:1240px;margin-left:auto;margin-right:auto;width:100%}
.page-main > section{display:flex;flex-direction:column}
.page-title{padding-top:48px;display:flex;flex-direction:column;gap:80px}
.title-row{display:flex;gap:0}
.title-spacer{flex:0 0 408px}

/* reveal por caractere (scroll) */
.reveal-chars{display:flex;flex-wrap:wrap}
.reveal-chars .w{white-space:pre}
.reveal-chars .ch{opacity:.2;transition:opacity .15s linear}

/* reveal de bloco (entra na viewport) */
[data-reveal]{opacity:0;transform:translateY(30px);
  transition:opacity .6s cubic-bezier(.27,0,.51,1),transform .6s cubic-bezier(.27,0,.51,1)}
[data-reveal].in{opacity:1;transform:none}

.avatar-row{display:flex;justify-content:flex-end}
.avatar{width:476px;max-width:100%;aspect-ratio:476/597;position:relative;
  border-radius:var(--radius);overflow:hidden;box-shadow:inset 0 1px 0 1px var(--ring)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* depoimentos */
.quote{
  width:432px;flex:none;position:relative;overflow:hidden;
  border-radius:var(--radius);padding:var(--pad);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 1px var(--ring);
  display:flex;flex-direction:column;gap:24px;
}
.quote .tint{position:absolute;inset:0;z-index:1;background:var(--fg);opacity:var(--glass-tint);pointer-events:none}
.quote > *{position:relative;z-index:2}
.quote .mark{font-size:24px;line-height:1;color:var(--fg-24)}
.quote .who{display:flex;gap:8px;align-items:baseline}

/* experiência */
.exp-list{display:flex;flex-direction:column;gap:48px}
.exp-row{display:flex;gap:32px;align-items:flex-start}
.exp-left{flex:1 0 0;display:flex;gap:24px}
.exp-year{flex:0 0 368px}
.exp-role{display:flex;flex-direction:column;gap:2px}
.exp-right{flex:0 0 544px;color:var(--fg-48)}

/* marquee grande */
.band{overflow:hidden;margin-left:calc(var(--edge-page) * -1);margin-right:calc(var(--edge-page) * -1)}
.band .ticker-track{gap:48px}
/* line-height:1em corta o rabo do "g" porque o descendente passa da caixa
   e o .ticker tem overflow:hidden                                       */
.band .display{font-size:96px;line-height:1.24em;white-space:nowrap}

/* rodapé */
.footer{padding:0 var(--edge-page) 64px;display:grid;
  /* são 4 itens: em 3 colunas sobrava o LinkedIn sozinho na linha de baixo */
  grid-template-columns:repeat(4,1fr);gap:48px 32px;margin-top:var(--sec-gap)}
.f-item{display:flex;flex-direction:column;gap:8px}
.f-item .val{font-size:24px;line-height:1.2em;width:max-content;max-width:100%;
  padding-bottom:2px;border-bottom:1px solid var(--fg-24)}

/* ── 12. PORTFOLIO ─────────────────────────────────────────────────────── */
.work-list{display:flex;flex-direction:column;gap:16px}
.work-row{display:flex;gap:16px}
.work{
  flex:1 1 0;min-width:0;position:relative;overflow:hidden;
  border-radius:var(--radius);padding:16px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 1px var(--ring);
  display:flex;flex-direction:column;gap:16px;
}
.work .tint{position:absolute;inset:0;z-index:1;background:var(--fg);opacity:var(--glass-tint);
  transition:opacity .4s cubic-bezier(.33,1,.68,1);pointer-events:none}
.work:hover .tint{opacity:var(--glass-tint-hover)}
.work > *{position:relative;z-index:2}
.work-img{
  flex:1 1 auto;border-radius:20px;overflow:hidden;position:relative;
  aspect-ratio:16/11;
}
.work-img > span{
  position:absolute;inset:0;display:block;
  transform:perspective(1200px) scale(1.1);          /* estado de repouso do original */
  transition:transform .9s cubic-bezier(.33,1,.68,1);
}
.work:hover .work-img > span{transform:perspective(1200px) scale(1)}
.work-row--tall .work-img{aspect-ratio:16/8}
.work-foot{display:flex;align-items:center;justify-content:space-between;padding:0 16px 8px}

/* ── 12b. CASE STUDY ───────────────────────────────────────────────────────
   Medidas do /portfolio/gamma @1440. Duas larguras de margem convivem:
   32px nas faixas de imagem e 80px nos blocos de texto.                      */
.case{display:flex;flex-direction:column;gap:64px}  /* o case usa 64, não os 150 do /about */
.case-head{padding:0 var(--edge-page);display:flex;flex-direction:column;gap:48px}
.case-title{display:flex;flex-direction:column;gap:12px}
.case-title h2{
  font-family:"Open Sauce Two",system-ui,sans-serif;font-weight:500;
  font-size:48px;line-height:1.2em;letter-spacing:-.04em;
}
.case-title .cat{font-size:20px;line-height:1.2em;color:var(--fg-48)}

/* moldura: a imagem é maior que o quadro e fica cortada — cover + scale(1.1).
   Não é parallax: o deslocamento é constante em qualquer posição de scroll.  */
.frame{
  position:relative;overflow:hidden;
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 1px var(--ring);
  aspect-ratio:1361/840;
}
.frame > *{position:absolute;inset:0;transform:scale(1.1);transform-origin:center}

.case-details{padding:0 var(--edge-wide);display:flex;gap:32px;justify-content:space-between}
.case-intro{flex:0 1 443px}
.case-meta{flex:0 1 506px;display:flex;flex-direction:column;gap:16px}
.meta-item{display:flex;flex-direction:column;gap:8px}
.meta-item .k{color:var(--fg-48)}

.case-images{padding:0 var(--edge-page);display:flex;flex-direction:column;gap:24px}
.case-pair{display:flex;gap:24px}
.case-pair .frame{flex:1 1 0;min-width:0;aspect-ratio:669/841}

.case-rows{padding:0 var(--edge-wide);display:flex;flex-direction:column;gap:24px}
.rule{height:1px;background:var(--fg-24)}
.case-rows .rows{display:flex;flex-direction:column;gap:64px;padding-top:24px}
.case-row{display:flex;gap:32px;justify-content:space-between}
.case-row .t{flex:0 1 443px}
.case-row .d{flex:0 1 506px;color:var(--fg-48)}

.case-bottom{padding:80px var(--edge-page) 0;display:flex;justify-content:space-between;gap:32px}
.pn{display:flex;align-items:center;gap:16px}
.pn svg{width:16px;height:16px;flex:none}
.pn .pn-txt{display:flex;flex-direction:column;gap:2px}

/* ── 13. CONTATO ───────────────────────────────────────────────────────── */
.contact-row{display:flex;gap:16px;align-items:flex-start}
.contact-left{flex:0 0 336px;display:flex;flex-direction:column;gap:12px}
.c-link{display:flex;flex-direction:column;gap:8px}
.c-link .val{font-size:24px;line-height:1.2em;width:max-content;max-width:100%;
  padding-bottom:2px;border-bottom:1px solid var(--fg-24)}
.form-box{
  flex:1 1 0;min-width:0;position:relative;overflow:hidden;
  border-radius:24px;padding:32px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 1px var(--ring);
}
.form-box .tint{position:absolute;inset:0;z-index:1;background:var(--fg);opacity:var(--glass-tint);pointer-events:none}
.form{position:relative;z-index:2;display:flex;flex-direction:column;gap:32px}
.field{display:flex;flex-direction:column;gap:12px}
.field .lbl{font-size:16px}
.field input[type=text],.field input[type=email],.field textarea{
  width:100%;padding:16px;border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--fg) 5%,transparent);
  border:1px solid transparent;outline:none;
  transition:border-color .3s,background .3s;
}
.field textarea{min-height:140px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-24)}
.field input:focus,.field textarea:focus{border-color:var(--fg-24);
  background:color-mix(in srgb,var(--fg) 8%,transparent)}
.form-section{display:flex;gap:80px;flex-wrap:wrap}
.form-col{flex:1 1 232px;display:flex;flex-direction:column;gap:24px}
.choices{display:flex;flex-direction:column;gap:16px}
.choice{display:flex;align-items:center;gap:10px;cursor:pointer}
.choice input{appearance:none;width:14px;height:14px;flex:none;
  border:1px solid var(--fg-24);background:transparent;transition:background .2s,border-color .2s}
.choice input[type=radio]{border-radius:50%}
.choice input[type=checkbox]{border-radius:3px}
.choice input:checked{background:var(--fg);border-color:var(--fg)}
.btn{
  height:54px;padding:0 24px;border-radius:var(--radius-sm);
  background:var(--fg);color:var(--bg);
  display:inline-flex;align-items:center;justify-content:center;
  width:max-content;transition:opacity .3s,transform .3s cubic-bezier(.33,1,.68,1);
}
.btn:hover{opacity:.85;transform:translateY(-1px)}
.availability{display:block;font-size:15px;color:var(--fg-48);
  padding-left:14px;border-left:2px solid var(--accent)}

/* ── 14. TRANSIÇÃO DE PÁGINA ───────────────────────────────────────────────
   Antes a máscara era aplicada na própria .page. Três problemas:
   · o `delay .2s` com fill `both` segurava opacity:0 — 200ms de tela preta
     em toda abertura, que era a piscada;
   · mascarar a .page joga a página inteira (iframes inclusive) numa camada
     composta; ao tirar a classe, a camada é descartada e tudo repinta;
   · iframe dentro de elemento mascarado repinta sozinho, fora de sincronia.
   Agora quem anima é uma CORTINA por cima. O conteúdo nunca é tocado.     */
.wipe{
  position:fixed; inset:0; z-index:999;
  background:var(--bg);
  pointer-events:none;
  will-change:clip-path;
}
@keyframes wipe-out{ from{clip-path:inset(0 0 0 0)}     to{clip-path:inset(100% 0 0 0)} }
@keyframes wipe-in { from{clip-path:inset(0 0 100% 0)}  to{clip-path:inset(0 0 0 0)} }
.wipe.out{animation:wipe-out .52s cubic-bezier(.27,0,.51,1) both}
.wipe.in {animation:wipe-in  .46s cubic-bezier(.27,0,.51,1) both}

/* ── 15. BREAKPOINTS (os mesmos do original) ───────────────────────────── */
@media (max-width:1439.98px){
  :root{--display:130px;--sec-gap:120px;--hero-travel:280px}
  .band .display{font-size:72px}
  .exp-year{flex:0 0 240px}
  .exp-right{flex:0 0 420px}
  .title-spacer{flex:0 0 300px}
  :root{--edge-wide:56px}
}
@media (max-width:1024.98px){
  :root{--display:100px;--pad:24px;--edge-page:24px;--sec-gap:96px;--radius:24px;--hero-travel:220px}
  .span-3,.subgrid-3{grid-column:1/-1}
  .bento{grid-template-rows:repeat(3,minmax(0,1fr))}
  .nav-left{gap:24px}
  .lead{font-size:32px}
  .sub{font-size:28px}
  .title-spacer{display:none}
  .exp-row{flex-direction:column;gap:16px}
  .exp-left{flex:none;width:100%}
  .exp-year{flex:0 0 200px}
  .exp-right{flex:none;width:100%}
  .contact-row{flex-direction:column}
  .contact-left{flex:none;width:100%;flex-direction:row;gap:32px}
  .form-box{width:100%}
  .footer{grid-template-columns:repeat(2,1fr)}
  .band .display{font-size:56px}
  :root{--edge-wide:24px}
  .case-title h2{font-size:40px}
  .case-details,.case-row{flex-direction:column;gap:24px}
  .case-intro,.case-meta,.case-row .t,.case-row .d{flex:none;width:100%}
  .case-rows .rows{gap:48px}
  .case-bottom{padding-top:56px}
}
@media (max-width:699.98px){
  :root{--display:48px;--gap:12px;--grid-offset:0px;--radius:24px;--pad:20px;
        --edge-page:16px;--nav-h:64px;--sec-gap:72px;--hero-travel:90px}
  body.is-home .header{height:calc(100svh - var(--nav-h));padding:0 12px 12px}
  .hero-window{height:48px;min-height:48px;position:relative;left:0;right:0;margin-bottom:12px;flex:none}
  .bento{display:flex;flex-direction:column;gap:12px;padding-top:0;min-height:0}
  .bento > *{flex:1 1 0;min-height:0}
  .card{min-height:0}
  .subgrid{display:flex;flex-direction:row;gap:12px;min-height:0}
  .subgrid > *{flex:1 1 0;min-width:0;min-height:0}
  .tool{width:40px;height:40px;border-radius:11px;font-size:18px}
  /* sem a cidade, o '•' fica sozinho na frente da hora */
  .nav-left .role,.meta .city,.meta .city + span{display:none}
  .nav-left{gap:16px}
  .lead{font-size:24px}
  .lead-sm{font-size:17px;line-height:1.55em}
  .about-text{gap:28px}
  .sub{font-size:22px}
  .work-row{flex-direction:column}
  .quote{width:300px;padding:24px}
  .exp-left{flex-direction:column;gap:8px}
  .exp-year{flex:none}
  .footer{grid-template-columns:1fr}
  .band .display{font-size:40px}
  .form-section{gap:32px}
  .f-item .val,.c-link .val{font-size:20px}
  /* lado a lado o e-mail não cabe em 375px e corta no meio */
  .contact-left{flex-direction:column;gap:16px}
  :root{--edge-wide:16px}
  .case-title h2{font-size:32px}
  .case-title .cat{font-size:16px}
  .case-pair{flex-direction:column}
  .case-pair .frame{aspect-ratio:4/5}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .page{animation:none;-webkit-mask-image:none;mask-image:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   15. IDIOMA · CONTATO · CURRÍCULO · MINIATURAS
   Tudo daqui para baixo é da versão Linniker — não existe no original.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 15.1 BOTÃO DE IDIOMA ──────────────────────────────────────────────── */
.lang{
  height:24px; min-width:38px; padding:0 8px;
  border-radius:999px; color:var(--fg);
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  font-size:12px; letter-spacing:.06em;
  box-shadow:inset 0 0 0 1px var(--fg-24);
  transition:box-shadow .3s, color .3s, background-color .3s;
}
.lang:hover{box-shadow:inset 0 0 0 1px var(--fg-48); background:color-mix(in srgb,var(--fg) 7%,transparent)}
.lang .lang-now{font-variant-numeric:tabular-nums}

/* ── 15.2 CONTATO: BOTÕES DIRETOS ──────────────────────────────────────── */
.cta-row{display:flex; gap:var(--gap); flex-wrap:wrap}
.cta{
  position:relative; overflow:hidden; isolation:isolate;
  flex:1 1 320px; min-height:132px; padding:var(--pad);
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 1px var(--ring);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; flex-direction:column; justify-content:space-between; gap:24px;
  color:var(--fg);
  transition:transform .5s cubic-bezier(.33,1,.68,1), box-shadow .5s;
}
.cta .tint{position:absolute;inset:0;z-index:1;background:var(--fg);
  opacity:var(--glass-tint);pointer-events:none;transition:opacity .5s}
.cta > *:not(.tint){position:relative;z-index:2}
.cta:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 1px var(--fg-24)}
.cta:hover .tint{opacity:var(--glass-tint-hover)}
.cta-top{display:flex; align-items:center; justify-content:space-between}
.cta-ico{width:28px;height:28px;display:block;flex:none}
.cta-ico svg{width:100%;height:100%;display:block}
.cta-arrow{width:16px;height:16px;flex:none;color:var(--fg-48);
  transition:transform .4s cubic-bezier(.33,1,.68,1), color .4s}
.cta:hover .cta-arrow{transform:translate(3px,-3px); color:var(--fg)}
.cta-txt{display:flex;flex-direction:column;gap:4px}
.cta-txt .t{font-size:24px;line-height:1.2em;letter-spacing:-.01em}
.cta-txt .s{font-size:16px;color:var(--fg-48)}
/* o lime da marca só aqui, no WhatsApp: é o botão que a gente quer que seja clicado */
.cta--go:hover .cta-arrow{color:var(--accent)}
.cta--go .cta-ico{color:var(--accent)}

.cta-or{display:flex;align-items:center;gap:16px;color:var(--fg-48);font-size:16px}
.cta-or::before,.cta-or::after{content:"";flex:1 1 auto;height:1px;background:var(--ring)}

/* ── 15.3 CURRÍCULO ────────────────────────────────────────────────────── */
.cv-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-ghost{
  height:54px;padding:0 24px;border-radius:var(--radius-sm);
  color:var(--fg); box-shadow:inset 0 0 0 1px var(--fg-24);
  display:inline-flex;align-items:center;gap:10px;width:max-content;
  transition:box-shadow .3s,transform .3s cubic-bezier(.33,1,.68,1),background-color .3s;
}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--fg-48);transform:translateY(-1px);
  background:color-mix(in srgb,var(--fg) 6%,transparent)}
.btn-ghost svg{width:16px;height:16px;flex:none}

/* O visor do PDF. aspect-ratio de folha para o documento não ficar
   espremido; em tela estreita vira altura fixa, que é o que cabe.      */
.cv-doc{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 1px var(--ring);
  background:color-mix(in srgb,var(--fg) 4%,transparent);
  aspect-ratio:1/1.3; max-height:1100px;
}
.cv-doc object,.cv-doc iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.cv-doc .cv-fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;padding:32px;
  color:var(--fg-48);
}

/* números grandes */
.cv-stats{display:flex;gap:var(--gap);flex-wrap:wrap}
.stat{
  position:relative;overflow:hidden;isolation:isolate;
  flex:1 1 200px;padding:var(--pad);border-radius:var(--radius);
  box-shadow:inset 0 1px 0 1px var(--ring);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:8px;
}
.stat .tint{position:absolute;inset:0;z-index:1;background:var(--fg);
  opacity:var(--glass-tint);pointer-events:none}
.stat > *:not(.tint){position:relative;z-index:2}
.stat .n{font-size:64px;line-height:1em;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat .l{font-size:16px;color:var(--fg-48)}

/* blocos de gráfico */
.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.chart{
  position:relative;overflow:hidden;isolation:isolate;
  padding:var(--pad);border-radius:var(--radius);
  box-shadow:inset 0 1px 0 1px var(--ring);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:24px;
}
.chart .tint{position:absolute;inset:0;z-index:1;background:var(--fg);
  opacity:var(--glass-tint);pointer-events:none}
.chart > *:not(.tint){position:relative;z-index:2}
.chart h3{font-size:18px;line-height:1.2em;font-weight:500}
.bars{display:flex;flex-direction:column;gap:18px}
.bar{display:flex;flex-direction:column;gap:8px}
.bar .bl{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:16px}
.bar .bl .bv{color:var(--fg-48);font-size:14px;font-variant-numeric:tabular-nums}
.bar .bt{height:6px;border-radius:999px;background:color-mix(in srgb,var(--fg) 10%,transparent);
  overflow:hidden}
.bar .bf{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 55%,var(--fg)),
    var(--accent));
  transition:width 1.1s cubic-bezier(.22,1,.36,1);
}
/* o preenchimento só anda quando o bloco entra na tela */
.chart.in .bar .bf{width:calc(var(--v,0) * 1%)}

/* linha do tempo */
.tl{display:flex;flex-direction:column;gap:14px}
.tl-row{display:flex;flex-direction:column;gap:8px}
.tl-bar{position:relative;height:38px;border-radius:10px;
  background:color-mix(in srgb,var(--fg) 7%,transparent);overflow:hidden}
.tl-fill{
  position:absolute;top:0;bottom:0;border-radius:10px;
  left:calc(var(--a) * 1%); width:0;
  background:color-mix(in srgb,var(--accent) 26%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent);
  display:flex;align-items:center;padding:0 12px;white-space:nowrap;overflow:hidden;
  font-size:14px;color:var(--fg);
  transition:width .9s cubic-bezier(.22,1,.36,1);
}
.chart.in .tl-fill{width:calc((var(--b) - var(--a)) * 1%)}
.tl-meta{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--fg-48)}
.tl-axis{display:flex;justify-content:space-between;font-size:13px;color:var(--fg-24);
  padding-top:4px;font-variant-numeric:tabular-nums}

.edu-list{display:flex;flex-direction:column;gap:20px}
.edu{display:flex;flex-direction:column;gap:4px}
.edu .t{font-size:18px;line-height:1.3em}
.edu .d{font-size:16px;color:var(--fg-48)}
.cv-note{font-size:14px;color:var(--fg-24);max-width:640px}

/* ── 15.4 PREVIEW DENTRO DOS CARDS DA HOME ────────────────────────────────
   Não é desenho nem screenshot: é a PÁGINA DE VERDADE, num <iframe> com
   ?preview=1, reduzida por transform:scale(). Dois motivos para ser assim:
   nunca fica desatualizada, e acompanha tema e idioma sozinha.

   O iframe é renderizado em 1440px de largura e encolhido pelo --pvk que o
   JS calcula por card (largura do card ÷ 1440). Escalar é mais barato que
   deixar a página se re-diagramar numa largura minúscula — e preserva a
   diagramação real, que é o que a pessoa quer ver.                        */
.pv{
  position:absolute; inset:18px 18px 62px 18px; z-index:1;
  pointer-events:none; overflow:hidden;
  border-radius:14px;
  opacity:.8;
}
/* a do contato volta a sangrar até a borda do card, como estava antes */
.pv--full{inset:0 0 70px 0; border-radius:0}
/* Uma faixa na metade de baixo do card. Descer o CONTEÚDO dentro de uma
   caixa inteira traria o título de volta no topo — o que entra em cena é
   sempre o que está acima da âncora. Descendo a CAIXA, o recorte começa
   nos botões e eles caem logo abaixo do centro.                        */
.pv--low{inset:40% 0 44px 0; border-radius:0}
.pv-frame{
  position:absolute; left:var(--pvleft,-10px); top:var(--pvtop,0);
  width:1440px; height:3200px; border:0; display:block;
  transform:scale(var(--pvk,.22));
  transform-origin:top left;
  pointer-events:none;
  background:transparent;
  /* O raio vem do JS: o filter é aplicado ANTES do transform, então um
     blur(2px) aqui viraria 0,5px na tela depois do scale(.25). O JS divide
     pelo fator para o borrão ser o mesmo em qualquer tamanho de card.   */
  filter:blur(var(--pvblur,9px));
}
/* o portfólio é só textura e cor de fundo: mais borrão e sem saturação */
.pv--gray .pv-frame{filter:blur(var(--pvblur,9px)) grayscale(1)}
/* desfoque zerado: tira o filtro de vez em vez de aplicar blur(0), que
   ainda custaria uma camada de composição por quadro                    */
.pv[data-pv-blur="0"] .pv-frame{filter:none}

/* A miniatura termina onde a caixa acaba, e isso dá um corte seco. A
   máscara faz a página se dissolver no fundo do card em vez de bater
   numa linha reta. Vai na CAIXA, não no iframe: assim ela não briga com
   o filter de desfoque, que já vive no iframe.                         */
.pv--fade{
  -webkit-mask-image:linear-gradient(to bottom,#000 18%,transparent 88%);
          mask-image:linear-gradient(to bottom,#000 18%,transparent 88%);
}
/* enquanto não calcula a escala, não mostra a página em tamanho real */
.pv:not(.ready){opacity:0}
/* o rótulo do card fica por cima do preview */
.card:has(.pv) .row{position:relative;z-index:3}

/* ── MODO PREVIEW (dentro do iframe) ──────────────────────────────────────
   A página sabe que está sendo olhada de longe: sem grão, sem luz, sem
   transição de entrada e sem barra de rolagem.                           */
html.is-preview,html.is-preview body{overflow:hidden!important;background:transparent}
html.is-preview .grain,html.is-preview .glow{display:none!important}
html.is-preview .page{animation:none!important;-webkit-mask-image:none!important;mask-image:none!important}
html.is-preview *{animation-play-state:paused!important}
html.is-preview .ticker-track{animation:none!important}

/* ── 15.5 RESPONSIVO DOS BLOCOS NOVOS ──────────────────────────────────── */
@media (max-width:1024.98px){
  .chart-grid{grid-template-columns:1fr}
  .cv-doc{aspect-ratio:auto;height:78vh}
  .footer{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:699.98px){
  /* vem depois da regra de 2 colunas que eu acrescentei acima; sem isto
     o rodapé fica em duas colunas no celular e o e-mail estoura a tela */
  .footer{grid-template-columns:1fr}
  .cta{min-height:112px;padding:20px}
  .cta-txt .t{font-size:20px}
  .stat .n{font-size:44px}
  .cv-doc{height:66vh}
  /* o JS nem monta os previews aqui; isto é a rede caso o JS falhe */
  .pv{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   16. PORTFÓLIO E CASE — trabalhos reais vindos do Behance
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 16.1 DESTAQUES ────────────────────────────────────────────────────── */
.hl-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.hl{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 1px var(--ring);
  display:flex;flex-direction:column;
  color:var(--fg);
  transition:transform .6s cubic-bezier(.33,1,.68,1), box-shadow .6s;
}
.hl:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 1px var(--fg-24)}
.hl-img{position:relative;overflow:hidden;aspect-ratio:16/11;background:color-mix(in srgb,var(--fg) 6%,transparent)}
/* A imagem cresce dentro de um recorte arredondado. Sem camada própria, o
   recorte é refeito a cada quadro e as quinas tremem. translateZ(0) fixa
   a rasterização do recorte; o will-change deixa a escala no compositor. */
.hl-img,.wk-img{transform:translateZ(0)}
.hl-img img,.wk-img img{will-change:transform;backface-visibility:hidden}
/* véu só no pé da imagem, para o rótulo ser legível sobre qualquer foto */
.hl-img.tem-rotulo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,.28) 48%,transparent)}
.hl-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.33,1,.68,1)}
.hl:hover .hl-img img{transform:scale(1.04)}
/* Rótulo do destaque: texto, e só. Nada de pílula com bolinha — isso tem
   cara de badge genérico e não de material editorial.                     */
.hl-badge{
  position:absolute;left:var(--pad);right:var(--pad);bottom:20px;z-index:2;
  display:block;
  font-size:12px;line-height:1.3em;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6);
}
.hl-foot{padding:24px var(--pad) var(--pad);display:flex;flex-direction:column;gap:6px}
.hl-foot .t{font-size:28px;line-height:1.15em;letter-spacing:-.02em}
.hl-foot .s{font-size:16px;color:var(--fg-48)}

/* ── 16.2 FILTRO ───────────────────────────────────────────────────────── */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{
  height:38px;padding:0 16px;border-radius:999px;
  color:var(--fg-48);font-size:15px;
  /* o flex centra a CAIXA DE LINHA; com line-height folgado sobra mais
     espaço embaixo do que em cima e a palavra parece subir             */
  line-height:1;
  display:inline-flex;align-items:center;
  box-shadow:inset 0 0 0 1px var(--ring);
  transition:color .3s,box-shadow .3s,background-color .3s;
  white-space:nowrap;
}
.filter:hover{color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg-24)}
.filter[aria-pressed="true"]{
  color:var(--bg);background:var(--fg);box-shadow:none;
}
.filter .n{font-size:12px;line-height:1;opacity:.6;margin-left:6px;font-variant-numeric:tabular-nums}

/* ── 16.3 GRADE ────────────────────────────────────────────────────────── */
.grid-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.wk{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 1px var(--ring);
  display:flex;flex-direction:column;color:var(--fg);
  transition:transform .6s cubic-bezier(.33,1,.68,1), box-shadow .6s, opacity .4s;
}
.wk:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 1px var(--fg-24)}
.wk-img{position:relative;overflow:hidden;aspect-ratio:4/3;background:color-mix(in srgb,var(--fg) 6%,transparent)}
.wk-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.33,1,.68,1)}
.wk:hover .wk-img img{transform:scale(1.05)}
.wk-foot{padding:20px var(--pad) var(--pad);display:flex;flex-direction:column;gap:4px}
.wk-foot .t{font-size:20px;line-height:1.2em}
.wk-foot .s{font-size:15px;color:var(--fg-48)}
.wk-year{position:absolute;right:16px;top:16px;z-index:2;font-size:13px;color:var(--fg);
  height:26px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;
  background:color-mix(in srgb,var(--bg) 70%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px var(--fg-24);font-variant-numeric:tabular-nums}
/* escondido pelo filtro: sai do fluxo sem deixar buraco */
.wk[hidden]{display:none}

/* ── 16.4 PÁGINA DE CASE ───────────────────────────────────────────────── */
.case-hero{display:flex;flex-direction:column;gap:32px;padding-top:48px}
.case-hero h1{font-size:var(--display);line-height:1em;letter-spacing:-.04em;font-weight:500}
.case-hero .cat{font-size:20px;color:var(--fg-48)}
.case-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);
  padding-top:8px}
.fact{display:flex;flex-direction:column;gap:6px}
.fact .k{font-size:14px;color:var(--fg-48)}
.fact .v{font-size:17px;line-height:1.35em}
.case-desc{font-size:22px;line-height:1.5em;max-width:760px;white-space:pre-line;color:var(--fg)}
/* O prêmio é uma informação, não um selo: fio à esquerda e texto. */
.case-award{
  display:block;max-width:620px;
  padding-left:16px;border-left:2px solid var(--accent);
  font-size:15px;line-height:1.45em;color:var(--fg-48);
}

.media{display:flex;flex-direction:column;gap:var(--gap)}
.media figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius);
  box-shadow:inset 0 1px 0 1px var(--ring);background:color-mix(in srgb,var(--fg) 5%,transparent)}
.media img,.media video{display:block;width:100%;height:auto}
.media .mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.media .mgrid figure{border-radius:var(--radius-sm)}

.case-nav{display:flex;justify-content:space-between;gap:var(--gap);padding-top:24px}

/* ── 16.5 RESPONSIVO ───────────────────────────────────────────────────── */
@media (max-width:1024.98px){
  .grid-work{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .media .mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:699.98px){
  .hl-row,.grid-work{grid-template-columns:1fr}
  .case-facts{grid-template-columns:1fr;gap:20px}
  .hl-foot .t{font-size:22px}
  .case-desc{font-size:17px}
  .media .mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  /* a barra de filtro rola na horizontal em vez de quebrar em 4 linhas */
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 calc(var(--edge-page) * -1);padding:0 var(--edge-page)}
  .filters::-webkit-scrollbar{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   17. LUZ NAS BORDAS — o fio acende conforme o ponteiro chega perto
   ───────────────────────────────────────────────────────────────────────
   O gradiente usa `background-attachment: fixed`, então ele é posicionado
   pela JANELA e não por cada elemento. Resultado: todas as peças de vidro
   leem a MESMA fonte de luz, nas mesmas coordenadas --mx/--my que a luz de
   fundo já usa, e ficam coerentes entre si sem nenhuma conta em JS.

   O anel de 1px sai do par padding + mask-composite:exclude: a máscara
   mostra só a casca entre a borda e a caixa de conteúdo.

   Só entra com ponteiro fino e fora do preview — no toque não há cursor
   para seguir, e dentro do iframe seria peso sem motivo.
   ═══════════════════════════════════════════════════════════════════════ */
.bordas-vivas :is(.card,.cta,.chart,.stat,.form-box,.wk,.hl,.photo,.avatar,
                  .cv-doc,.quote,.media figure){
  position:relative;
}
.bordas-vivas :is(.card,.cta,.chart,.stat,.form-box,.wk,.hl,.photo,.avatar,
                  .cv-doc,.quote,.media figure)::after{
  content:"";
  position:absolute; inset:0; z-index:5;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background:
    radial-gradient(380px circle at var(--mx,50vw) var(--my,18vh),
      color-mix(in srgb,var(--lime) 62%,transparent) 0%,
      color-mix(in srgb,var(--lime) 22%,transparent) 38%,
      transparent 70%) fixed;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.9;
}
/* no tema claro o lime puro estoura; o accent já é a versão escurecida */
:root[data-theme="light"] .bordas-vivas :is(.card,.cta,.chart,.stat,.form-box,
  .wk,.hl,.photo,.avatar,.cv-doc,.quote,.media figure)::after{opacity:.5}

/* O preview é um retrato da página, não um lugar para o cursor: lá dentro
   o ponteiro não existe e o anel ficaria preso num canto.              */
html.is-preview .bordas-vivas :is(.card,.cta,.chart,.stat,.form-box,.wk,.hl,
  .photo,.avatar,.cv-doc,.quote,.media figure)::after{display:none}