/* ============================================================
   HUGO ZUFFO — v5 · DARK
   Sistema escuro. Helvetica display, tracking apertado.
   Sem fontes externas, sem requisições externas.

   Lógica de cor (3 níveis de fundo, como a Apple):
     --bg        #000000  preto puro — hero e respiro entre blocos
     --surface   #0A0A0A  fundo padrão das seções
     --surface-2 #161617  cinza escuro — blocos de ênfase e cards
   Texto: ivory quente #F6F4EF · secundário #86868B (cinza Apple)
   ============================================================ */

:root{
  /* fundos */
  --bg:#000000;
  --surface:#0A0A0A;
  --surface-2:#161617;
  --surface-3:#1D1D1F;

  /* texto */
  --text:#F6F4EF;
  --text-soft:#B8B8BD;   /* legenda e apoio */
  --accent:#B89B6E;      /* dourado/champagne Tom Ford — segunda linha dos blocos e <em> do hero */
  --text-dim:#86868B;
  --text-dimmer:#757578;   /* era #5E5E63: dava 3,26:1 no preto e reprovava em AA
                              nas legendas de vídeo (12px). Agora 4,88:1. */

  /* quanto a imagem dos blocos .feature-edge estoura a coluna */
  --media-bleed:16%;

  /* linhas */
  --hairline:#2A2A2C;
  --hairline-soft:#1E1E20;

  /* aliases legados (páginas ainda não migradas) */
  --ink:var(--text);
  --ivory:var(--bg);
  --paper:var(--surface-2);
  --grey:var(--text-dim);

  /* UMA família em todo o site: Helvetica Neue (base do Tom Ford).
     Título e corpo usam o mesmo sans; a diferença é CAIXA ALTA + tracking
     no título (ver .up mais abaixo), caixa normal no corpo. */
  --display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --fw-display:600;          /* peso do título em caixa alta — médio, não bold; menos gritante */
  --track-display:-0.015em;  /* Tom Ford aperta o título em caixa alta, não espalha */
  --track-body:-0.005em;
  --track-label:0.14em;
  --header-h:81px;   /* valor de partida; o site.js sobrescreve com a altura real medida */
  --fs-label:.72rem;                        /* TÍTULO DE BLOCO (kicker/tag/meta) — tamanho único do site */

  /* ESCALA TIPOGRÁFICA — três tamanhos, só isso.
     display  → hero claim e statements (frase-manchete)
     title    → todo título de bloco (h2 e h3 de seção)
     sub      → lede, hero-sub, statement-sub
     body     → TODO o resto: parágrafo, legenda, label de número,
                ficha técnica, lista de impacto. Um tamanho só. */
  --fs-display:clamp(1.9rem,4.2vw,3.1rem);  /* NÍVEL 1 — hero e "o projeto em uma frase". Máx. 2× por página. */
  --fs-title:clamp(1.5rem,2.4vw,2rem);      /* TÍTULO ÚNICO — abertura de seção e título de bloco, ~32px. Não criar outro tamanho de título. */
  --fs-sub:clamp(1.12rem,1.5vw,1.4rem);     /* lede, hero-sub, statement-sub — ~22px (era 27) */
  --fs-body:clamp(1.02rem,1.3vw,1.2rem);    /* corpo — ~19px, legível e mais clean (era 24) */
  --lh-title:1.08;
  --lh-body:1.45;
  --max:1200px;
  --pad:clamp(20px,4vw,48px);

  /* superfícies e profundidade dos cards (wireframe 2026-08-04) */
  --radius:14px;
  --radius-lg:20px;
  --shadow-card:0 1px 2px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.45);
  --shadow-card-hover:0 2px 4px rgba(0,0,0,.6), 0 16px 40px rgba(0,0,0,.55);
  /* moldura para quadros preto-sobre-preto (vídeo e box do showcase):
     anel ivory de 1px + brilho cinza leve, para a borda aparecer no preto */
  --shadow-frame:0 0 0 1px rgba(246,244,239,.14), 0 18px 50px -14px rgba(184,184,189,.16);
  --ease:cubic-bezier(.2,.6,.2,1);

  /* espaço vertical PADRÃO de todo bloco. O intervalo entre dois blocos é 2×.
     Um só valor no site inteiro — mexa aqui para reajustar todos de uma vez. */
  --sec:clamp(64px,8vw,104px);

  /* bloco final em fundo claro ("continue explorando") */
  --light-bg:#F6F4EF;
  --light-surface:#FFFFFF;
  --light-text:#0A0A0A;
  --light-text-soft:#5E5E63;
  --light-hairline:#DCD8D0;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;background:var(--bg)}
/* overflow-x:hidden faz o overflow-y virar `auto`, e aí html/body viram
   contêiner de rolagem: todo position:sticky passa a grudar neles em vez de
   grudar na viewport, e simplesmente não funciona. `clip` corta igual e NÃO
   cria contêiner de rolagem. O @supports mantém o hidden onde clip não existe;
   lá o sticky continua quebrado, mas a auditoria de 375px provou que não há
   overflow horizontal nenhuma página para cortar. */
@supports (overflow:clip){ html{overflow-x:clip} }
body{
  overflow-x:hidden;   /* ver nota do html acima; o @supports abaixo troca por clip */
  font-family:var(--body);
  font-size:16px;line-height:1.65;
  letter-spacing:var(--track-body);
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@supports (overflow:clip){ body{overflow-x:clip} }
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--text);color:var(--bg)}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}

/* ---------- type scale ---------- */
h1,h2,h3,.display-xl,.display-l{
  font-family:var(--display);
  font-weight:var(--fw-display);
  letter-spacing:var(--track-display);
  line-height:1.04;
}
.display-xl{font-size:clamp(2.2rem,5vw,4rem)}
.display-l{font-size:clamp(1.9rem,3.8vw,3rem)}
h2{font-size:var(--fs-title);line-height:var(--lh-title)}
h3{font-size:var(--fs-title);line-height:var(--lh-title)}
/* Tom Ford: TÍTULO É CAIXA ALTA. Toda a camada de título/display sobe para
   maiúsculas com tracking apertado. Corpo, subtítulo e lede ficam em caixa
   normal — a diferença de nível vem do case, não de outra fonte. */
h2,h3,.display-xl,.display-l,
.hero-claim,.statement,.pull-quote,.stats .n,
.awards-row .medal,.award-year,.impact-list strong{
  text-transform:uppercase;
}
p{color:var(--text);font-size:var(--fs-body);line-height:var(--lh-body)}
.kicker{
  font-size:var(--fs-label);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--text-dim);margin-bottom:14px;
}

/* ÚLTIMA PALAVRA sobre o tamanho do título de bloco.
   Bug encontrado em 27/08/2026: `.kicker` tem especificidade (0,1,0) e estava
   sendo atropelado por regras de container que miram `p` genérico, como
   `.video-sec .intro p` (0,2,1) e `.oneliner p` (0,1,1). Resultado: em 4 dos 7
   blocos de cada página de case o kicker saía a 18,7px em vez de 11,5px, quase
   o dobro. RECONHECIMENTO (18,7px) e INTERNACIONAL (11,5px) eram o mesmo
   componente em tamanhos diferentes.
   O `:is()` herda a especificidade do argumento mais específico, então este
   seletor vale (0,3,0) e ganha de todas elas sem precisar tocar em cada regra
   de container uma a uma. */
:is(.oneliner, .video-sec .intro, .diff .d-text, .feature .f-text,
    .feature-edge .f-text, .video-row .f-text, .movement, .award-item,
    .about-bio, .sc-panel, .phase-card, .plain-row, .writing-list,
    .explore-card, .home-card, .home-grid .head) .kicker{
  font-size:var(--fs-label);letter-spacing:var(--track-label);
}
.lede{font-size:var(--fs-sub);line-height:1.35;max-width:54ch;color:var(--text)}
.meta-quiet{font-size:var(--fs-body);color:var(--text-dim);margin-top:18px}
.small{font-size:var(--fs-body);color:var(--text-dim)}

/* ---------- layout ---------- */
.container{
  max-width:var(--max);margin:0 auto;
  /* max() com env(): em iPhone deitado a barra lateral do notch invade a
     margem. Sem isto o texto encosta no recorte da tela. Em telas sem notch
     env() vale 0 e o padding é o de sempre. */
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
}
section{padding:clamp(64px,10vw,140px) 0}
.section-head{margin-bottom:clamp(28px,5vw,56px);max-width:820px}
hr.rule{border:0;border-top:1px solid var(--hairline);margin:0}

/* faixas de fundo — alternar para separar blocos sem usar régua */
.s-black{background:var(--bg)}
.s-surface{background:var(--surface)}
.s-grey{background:var(--surface-2)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(0,0,0,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline-soft);
}
.site-header .inner{
  max-width:var(--max);margin:0 auto;padding:16px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
/* LOGO — "HUGO ZUFFO" em Helvetica Neue, caixa alta, kerning -50 (=-0.05em).
   Feito em CSS: o HTML segue "Hugo Zuffo" (leitor de tela e SEO leem normal). */
.wordmark{
  font-family:var(--display);font-weight:var(--fw-display);
  text-transform:uppercase;letter-spacing:-0.05em;
  font-size:1.15rem;color:var(--text);
}
.site-nav ul{display:flex;gap:28px;list-style:none}
.site-nav a{
  font-size:.78rem;font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--text-dim);
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .2s;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--text)}
.nav-toggle{
  display:none;background:none;border:1px solid var(--hairline);color:var(--text);
  font:inherit;font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);padding:8px 14px;cursor:pointer;
}
@media(max-width:760px){
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(0,0,0,.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--hairline)}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;gap:0;padding:8px var(--pad) 20px}
  .site-nav li{border-top:1px solid var(--hairline-soft)}
  .site-nav a{display:block;padding:14px 0;border-bottom:none}
}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--text);color:var(--bg);padding:10px 16px;z-index:100}
/* Some da tela, continua no leitor de tela. Usa clip-path em vez de
   display:none justamente para não sair da árvore de acessibilidade. */
.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;
}
.skip-link:focus{left:0}

/* ============================================================
   SISTEMA DE IMAGENS — 4 formatos, todos 16:9
   XG 2560×1440 · G 1600×900 · M 1200×675 · P 800×450
   Nomenclatura: case-NN-TAMANHO   (01 = capa, 02 = hero)
   ============================================================ */
.ph{
  background:
    repeating-linear-gradient(45deg,#131315,#131315 14px,#1A1A1C 14px,#1A1A1C 28px);
  border:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:center;
  min-height:180px;aspect-ratio:16/9;
  text-align:center;padding:16px;
}
.ph span{font-size:.72rem;text-transform:uppercase;letter-spacing:var(--track-label);color:var(--text-dimmer);line-height:1.5}
.ph--video{outline:2px dashed var(--text-dimmer);outline-offset:-10px}
.ph--dark{border:0;width:100%;height:100%;aspect-ratio:auto;min-height:0}
.ph--hero,.ph--wide{aspect-ratio:16/9}
.ph--tall{aspect-ratio:3/4}
.ph--square{aspect-ratio:1/1}

/* imagens reais */
.f-media img,.inline-fig img,.work-card .frame img,figure > img{
  width:100%;height:auto;display:block;
}
img.bleed-img{
  width:100%;aspect-ratio:16/9;max-height:88vh;
  object-fit:cover;object-position:center;display:block;
}
.work-card .frame img{transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.work-card:hover .frame img{transform:scale(1.03)}
@media(prefers-reduced-motion:reduce){.work-card .frame img{transition:none}}

/* ============================================================
   PAGE HERO
   ============================================================ */
.page-hero{
  position:relative;overflow:hidden;
  background:var(--bg);color:var(--text);
  min-height:clamp(500px,82vh,860px);
  display:flex;align-items:center;
}
.page-hero__media{position:absolute;inset:0;z-index:0}
.page-hero__media img,.page-hero__media video{width:100%;height:100%;object-fit:cover;object-position:center}
.page-hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.68) 32%,rgba(0,0,0,.2) 58%,rgba(0,0,0,0) 78%),
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 22%);
}
.page-hero__inner{
  position:relative;z-index:2;width:100%;
  padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(48px,7vw,88px);
}
.page-hero h1{margin:0;letter-spacing:normal}
.hero-name{
  display:block;font-family:var(--body);font-weight:600;
  font-size:clamp(.95rem,1.5vw,1.25rem);letter-spacing:var(--track-body);
  line-height:1.3;margin-bottom:clamp(10px,1.4vw,20px);color:var(--text);
}
.hero-claim{
  display:block;font-family:var(--display);font-weight:var(--fw-display);
  letter-spacing:var(--track-display);line-height:1.02;
  font-size:var(--fs-display);max-width:17ch;color:var(--text);
}
.hero-claim em{font-style:normal;color:var(--accent)}
.hero-sub{
  margin-top:clamp(16px,2.2vw,26px);
  font-weight:600;font-size:var(--fs-sub);
  line-height:1.35;max-width:46ch;color:var(--text);
}
.hero-actions{margin-top:clamp(24px,3vw,36px)}

@media(max-width:760px){
  /* svh em vez de vh: com vh a altura muda quando a barra do navegador
     recolhe e o herói "pula" durante a rolagem. */
  .page-hero{align-items:flex-end;min-height:clamp(580px,92vh,780px)}
  @supports (height:100svh){
    .page-hero{min-height:clamp(580px,92svh,780px)}
  }
  .page-hero__media img,.page-hero__media video{object-position:center 20%}
  /* O texto começa por volta de 59% da altura do herói no celular, e a rampa
     antiga só escurecia de verdade aos 68%: as duas primeiras linhas do título
     caíam em cima da parte clara do packshot. A rampa agora chega escura antes
     do texto começar, sem tapar a imagem na metade de cima. */
  .page-hero__scrim{
    background:linear-gradient(180deg,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,0) 22%,
      rgba(0,0,0,.55) 46%,
      rgba(0,0,0,.92) 62%,
      rgba(0,0,0,1) 100%);
  }
  .page-hero__inner{text-align:center;padding-bottom:clamp(44px,10vw,64px)}
  .hero-claim,.hero-sub{max-width:none;margin-left:auto;margin-right:auto}
  .tag-row{justify-content:center}
}

/* ---------- bloco de abertura ---------- */
.page-intro{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(40px,6vw,72px)}
.page-intro .statement{margin-bottom:22px}

/* ---------- sub-nav de capítulos ---------- */
.subnav{
  position:sticky;top:var(--header-h);z-index:40;
  background:rgba(0,0,0,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline-soft);
}
.subnav .inner{
  max-width:var(--max);margin:0 auto;padding:12px var(--pad);
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
}
.subnav .inner::-webkit-scrollbar{display:none}
.subnav a{
  white-space:nowrap;padding:9px 16px;
  font-size:.7rem;font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--text-dim);
  border:1px solid var(--hairline);
  transition:color .2s,border-color .2s,background .2s;
}
.subnav a:hover{color:var(--text);border-color:var(--text-dim)}
.subnav a.active{background:var(--text);color:var(--bg);border-color:var(--text)}
/* o alvo de toque manda: 44px de altura no dedo, e o rótulo segue o token */
.subnav a{font-size:var(--fs-label)}
@media(hover:none){.subnav a{min-height:44px;display:flex;align-items:center}}
@media(max-width:760px){.subnav .inner{gap:6px;padding:10px var(--pad)}}

/* ---------- full-bleed — centralizado e expandido até as duas laterais.
   O cálculo abaixo faz o bloco escapar de qualquer container em que esteja,
   então vale mesmo quando o módulo for reaproveitado dentro de .container. ---------- */
.bleed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.bleed figcaption,.bleed .cap{
  max-width:var(--max);margin:14px auto 0;
  padding-left:var(--pad);padding-right:var(--pad);
  font-size:var(--fs-body);color:var(--text-soft);line-height:var(--lh-body);
}
figure{margin:0}
.cap{font-size:var(--fs-body);color:var(--text-soft);margin-top:16px;max-width:62ch;line-height:var(--lh-body)}

/* ---------- chapter / statement ---------- */
.chapter{margin-bottom:clamp(24px,4vw,44px);max-width:860px}
.chapter .num,.f-text .num{
  font-size:var(--fs-label);font-weight:600;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--text-dim);display:block;margin-bottom:16px;
}
.chapter h2{margin-bottom:18px}
/* corpo do capítulo — NÃO tocar nos statements, que têm tamanho display próprio */
.chapter p:not(.statement):not(.statement-sub){max-width:60ch;color:var(--text-soft);font-size:var(--fs-body);line-height:var(--lh-body)}
.chapter p:not(.statement):not(.statement-sub):first-of-type{color:var(--text)}
.chapter p:not(.statement):not(.statement-sub) + p:not(.statement):not(.statement-sub){margin-top:16px}
.chapter p em{font-style:italic;color:var(--text)}
.statement{
  font-family:var(--display);font-weight:var(--fw-display);letter-spacing:var(--track-display);
  font-size:var(--fs-title);line-height:var(--lh-title);max-width:24ch;color:var(--text);
}
.statement + .statement-sub{margin-top:22px;color:var(--text-soft);max-width:52ch;font-size:var(--fs-sub);line-height:1.35}

/* ============================================================
   FEATURE — texto + imagem
   .feature        contido na grid
   .feature-edge   imagem sangra até a borda da tela (padrão Apple)
   ============================================================ */
.feature{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,72px);align-items:center;
}
.feature + .feature{margin-top:clamp(56px,8vw,110px)}
.feature--flip .f-text{order:2}
.feature--flip .f-media{order:1}
.feature .f-text h3{font-size:var(--fs-title);line-height:var(--lh-title);margin-bottom:18px}
.feature .f-text p{max-width:42ch;color:var(--text-soft);font-size:var(--fs-body);line-height:var(--lh-body)}
.feature .f-text p strong{color:var(--text)}
.feature .f-text p + p{margin-top:14px}
@media(max-width:820px){
  .feature{grid-template-columns:1fr;gap:22px}
  .feature--flip .f-text,.feature--flip .f-media{order:initial}
}
.feature--wide-media{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
@media(max-width:820px){.feature--wide-media{grid-template-columns:1fr}}

a.f-media{display:block;overflow:hidden}
a.f-media img,a.f-media .ph{transition:transform .7s cubic-bezier(.2,.6,.2,1)}
a.f-media:hover img,a.f-media:hover .ph{transform:scale(1.03)}
@media(prefers-reduced-motion:reduce){a.f-media img,a.f-media .ph{transition:none}}

/* ---------- feature-edge: usar FORA de .container ---------- */
.feature-edge{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.35fr);
  align-items:center;gap:clamp(24px,3vw,52px);
  width:100%;overflow:hidden;
}
/* a imagem estoura a coluna e sai pela borda da tela.
   Os renders têm fundo preto, então o excesso funde com a página. */
.feature-edge .f-media{overflow:visible}
.feature-edge .f-media img,
.feature-edge .f-media .ph{
  width:calc(100% + var(--media-bleed));max-width:none;
}
.feature-edge.is-left .f-media img,
.feature-edge.is-left .f-media .ph{margin-left:calc(var(--media-bleed) * -1)}
.feature-edge + .feature-edge{margin-top:clamp(72px,10vw,150px)}
/* quando o bloco é filho direto de <main>, ele mesmo cria seu respiro */
main > .feature-edge{margin-top:clamp(56px,8vw,110px);margin-bottom:clamp(56px,8vw,110px)}
.feature-edge .f-text{
  padding-left:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));
  padding-right:var(--pad);
}
.feature-edge .f-text h3{
  font-family:var(--display);font-weight:var(--fw-display);letter-spacing:var(--track-display);
  font-size:var(--fs-title);line-height:var(--lh-title);margin-bottom:20px;max-width:15ch;
}
.feature-edge .f-text p{
  font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:600;color:var(--text);max-width:26ch;
}
.feature-edge .f-text p + p{margin-top:18px;color:var(--accent)}
.feature-edge .f-text .cap{margin-top:20px}
/* variante espelhada: imagem sangra pela esquerda.
   As COLUNAS também invertem — a imagem tem que ficar sempre na coluna larga
   (1.35fr), senão ela encolhe e sobra vazio do lado do texto. */
.feature-edge.is-left{grid-template-columns:minmax(0,1.35fr) minmax(0,.88fr)}
.feature-edge.is-left .f-text{
  order:2;
  padding-right:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));
  padding-left:var(--pad);
}
.feature-edge.is-left .f-media{order:1}
@media(max-width:900px){
  .feature-edge{grid-template-columns:1fr;gap:24px}
  .feature-edge .f-text,
  .feature-edge.is-left .f-text{order:2;padding-left:var(--pad);padding-right:var(--pad)}
  .feature-edge .f-media,.feature-edge.is-left .f-media{order:1}
  .feature-edge .f-text h3{max-width:none}
  .feature-edge .f-media img,.feature-edge .f-media .ph,
  .feature-edge.is-left .f-media img,.feature-edge.is-left .f-media .ph{
    width:100%;margin-left:0;
  }
}

/* ---------- imagem inline na coluna de texto ---------- */
.inline-fig{max-width:760px;margin:clamp(28px,4vw,44px) 0}

/* ============================================================
   VÍDEO VERTICAL (9:16, material de celular)
   Bloco preto: qualquer letterbox do arquivo some no fundo.
   ============================================================ */
.video-block{background:var(--bg);padding:clamp(56px,8vw,110px) 0}
.video-row{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,5vw,88px);align-items:center;
}
@media(max-width:900px){.video-row{grid-template-columns:1fr;gap:28px}}
.v-portrait{width:100%;max-width:420px;margin-left:auto;margin-right:auto}
.v-portrait video{
  width:100%;height:auto;display:block;
  aspect-ratio:480 / 854;object-fit:cover;
  background:#000;border:0;
}
.v-portrait figcaption{margin-top:14px;font-size:.8rem;color:var(--text-dimmer);text-align:center;letter-spacing:var(--track-label);text-transform:uppercase}
.video-row .f-text h3{
  font-family:var(--display);font-weight:var(--fw-display);letter-spacing:var(--track-display);
  font-size:var(--fs-title);line-height:var(--lh-title);margin-bottom:20px;max-width:16ch;
}
.video-row .f-text p{color:var(--text-soft);max-width:42ch;font-size:var(--fs-body);line-height:var(--lh-body)}
.video-row .f-text p:first-of-type{color:var(--text)}
.video-row .f-text p + p{margin-top:14px}

/* ============================================================
   GRIDS DE COLUNAS COM DIVISOR
   Um só esqueleto para três blocos: números (.stats),
   prêmios (.awards-row) e o resumo em 3 segundos (.plain-row).
   Regra: o texto nunca encosta na linha — respiro dos dois lados.
   ============================================================ */
.stat-band{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:var(--surface-2)}
.stats,.awards-row,.plain-row{display:grid}
.stats{grid-template-columns:repeat(4,1fr)}
.awards-row{grid-template-columns:repeat(4,1fr)}
.plain-row{grid-template-columns:repeat(3,1fr)}

.stats > div,.awards-row > div,.plain-row > div{
  padding:clamp(38px,5vw,72px) clamp(28px,3.4vw,56px);
  border-right:1px solid var(--hairline);
}
.stats > div:first-child,.awards-row > div:first-child,.plain-row > div:first-child{padding-left:0}
.stats > div:last-child,.awards-row > div:last-child,.plain-row > div:last-child{border-right:none;padding-right:0}

.stats .n{
  font-family:var(--display);font-weight:var(--fw-display);letter-spacing:var(--track-display);
  font-size:clamp(1.7rem,3vw,2.5rem);line-height:1;display:block;color:var(--text);
}
.stats .l{
  display:block;margin-top:20px;
  font-size:var(--fs-body);color:var(--text-soft);
  line-height:var(--lh-body);max-width:16ch;
}
@media(max-width:820px){
  .stats,.awards-row{grid-template-columns:repeat(2,1fr)}
  .plain-row{grid-template-columns:1fr}
  .stats > div,.awards-row > div,.plain-row > div{
    padding:clamp(28px,6vw,40px) clamp(18px,4vw,28px);
    border-bottom:1px solid var(--hairline);
  }
  .stats > div:nth-child(2n),.awards-row > div:nth-child(2n){border-right:none}
  .stats > div:nth-child(2n+1),.awards-row > div:nth-child(2n+1){padding-left:0}
  .stats > div:nth-last-child(-n+2),.awards-row > div:nth-last-child(-n+2){border-bottom:none}
  .plain-row > div{border-right:none;padding-left:0;padding-right:0}
  .plain-row > div:last-child{border-bottom:none}
}

/* ---------- faixa de prêmios (ícone + medalha + descrição) ---------- */
.awards-band{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:var(--surface)}
.awards-band .awards-row > div{padding-top:clamp(30px,3.4vw,46px);padding-bottom:clamp(30px,3.4vw,46px)}
.awards-row .ico{display:block;width:26px;height:26px;margin-bottom:16px;color:var(--text)}
.awards-row .ico svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.4}
.awards-row .medal{
  display:block;font-family:var(--display);font-weight:var(--fw-display);
  letter-spacing:var(--track-display);font-size:var(--fs-sub);
  line-height:1.1;color:var(--text);
}
.awards-row .who{
  display:block;margin-top:14px;font-size:var(--fs-body);
  color:var(--text-soft);line-height:var(--lh-body);max-width:18ch;
}
.awards-row a{border-bottom:1px solid var(--hairline);color:var(--text-soft)}
.awards-row a:hover{color:var(--text);border-bottom-color:var(--text)}

/* ---------- o que eu faço, em 3 segundos ---------- */
.plain-band{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.plain-row .step{
  display:block;font-size:var(--fs-label);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--text-dim);margin-bottom:16px;
}
.plain-row h3{
  font-family:var(--display);font-weight:var(--fw-display);letter-spacing:var(--track-display);
  font-size:var(--fs-title);line-height:var(--lh-title);margin-bottom:18px;
}
.plain-row p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-soft);max-width:32ch}

/* ---------- tabela de specs ---------- */
.specs{border-top:1px solid var(--hairline);max-width:940px}
.specs > div{
  display:grid;grid-template-columns:210px 1fr;gap:24px;
  padding:22px 0;border-bottom:1px solid var(--hairline);
}
.specs dt{font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:var(--track-label);color:var(--text-dim)}
.specs dd{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text)}
.specs dd ul{list-style:none}
.specs dd li + li{margin-top:6px}
@media(max-width:640px){.specs > div{grid-template-columns:1fr;gap:6px}}

/* ---------- work grid ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px)}
@media(max-width:760px){.work-grid{grid-template-columns:1fr}}
.work-card{display:block}
.work-card .frame{overflow:hidden;margin-bottom:18px;background:var(--surface-2)}
.work-card .frame .ph{transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.work-card:hover .frame .ph{transform:scale(1.03)}
.work-card h3{margin-top:14px;font-size:var(--fs-sub);line-height:1.2}
.work-card .desc{color:var(--text-soft);font-size:var(--fs-body);line-height:var(--lh-body);margin-top:12px;max-width:44ch}
/* NÃO é clicável — então não pode parecer botão.
   Vira uma linha de metadados separada por ponto médio. */
.tag-row{display:flex;flex-wrap:wrap;align-items:center;gap:0 0}
.tag{
  font-size:var(--fs-label);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--text-dim);
  border:0;padding:0;background:none;
}
.tag + .tag::before{content:"·";margin:0 12px;color:var(--text-dimmer)}
@media(max-width:640px){.tag + .tag::before{margin:0 8px}}

/* ---------- filtro (índice de work) ---------- */
.filter-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,4vw,48px)}
.filter-btn{
  font:inherit;font-size:var(--fs-label);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--text-dim);
  background:none;border:1px solid var(--hairline);padding:9px 16px;cursor:pointer;
}
.filter-btn:hover{color:var(--text);border-color:var(--text)}
.filter-btn[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ---------- links & botões ---------- */
.link-arrow{font-weight:600;font-size:.95rem;color:var(--text);border-bottom:1px solid var(--text);padding-bottom:2px;transition:opacity .2s}
.link-arrow:hover{opacity:.6}
.btn-outline{
  display:inline-block;border:1px solid var(--text);color:var(--text);padding:14px 28px;
  font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--track-label);
  transition:background .25s,color .25s;
}
.btn-outline:hover{background:var(--text);color:var(--bg)}
.verify-link{font-size:.8rem;color:var(--text-dim);border-bottom:1px solid var(--hairline)}
.verify-link:hover{color:var(--text);border-bottom-color:var(--text)}

/* ---------- faixa de ênfase / pull quote ---------- */
.band-dark,.band-emphasis{background:var(--surface-2);color:var(--text)}
.band-dark .kicker,.band-emphasis .kicker{color:var(--text-dim)}
.pull-quote{
  font-family:var(--display);font-weight:var(--fw-display);letter-spacing:var(--track-display);
  font-size:var(--fs-title);line-height:1.2;max-width:28ch;color:var(--text);
}
.pull-quote cite{display:block;font-family:var(--body);font-weight:400;font-style:normal;
  letter-spacing:var(--track-label);text-transform:uppercase;font-size:var(--fs-label);color:var(--text-dim);margin-top:26px}

/* ---------- case pages ---------- */
.case-hero{padding-top:clamp(56px,9vw,110px)}
.eyebrow{font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:var(--track-label);color:var(--text-dim);margin-bottom:16px}
/* Era 18ch: a 1440px o título ocupava 39% da largura e sobrava um vão preto
   à direita nas páginas Prêmios, Projetos e Contato. 34ch ocupa ~2/3 da
   largura e derruba o título de 5 para 2-3 linhas, sem virar linha de leitura
   corrida (a regra de 65-75 caracteres é para corpo de texto, não para
   display). No celular a trava sai do caminho: o texto usa a coluna inteira. */
.case-hero h1{max-width:34ch}
@media(max-width:760px){.case-hero h1{max-width:none}}
.case-hero .lede{margin-top:20px}
.case-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  margin-top:clamp(28px,4vw,48px);
}
.case-meta div{padding:18px 18px 18px 0;border-right:1px solid var(--hairline)}
.case-meta div:last-child{border-right:none}
.case-meta dt{font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:var(--track-label);color:var(--text-dim);margin-bottom:6px}
.case-meta dd{font-size:.9rem;line-height:1.45}
.movement{max-width:740px}
.movement + .movement{margin-top:clamp(36px,5vw,64px)}
.movement h2{margin-bottom:16px}
.movement p{color:var(--text-soft);font-size:var(--fs-body);line-height:var(--lh-body)}
.movement p:first-of-type{color:var(--text)}
.movement p + p{margin-top:16px}
.impact-list{list-style:none;margin-top:16px}
.impact-list li{padding:16px 0;border-top:1px solid var(--hairline);display:flex;gap:18px;align-items:baseline}
.impact-list li:last-child{border-bottom:1px solid var(--hairline)}
.impact-list strong{font-family:var(--display);letter-spacing:var(--track-display);font-size:1.4rem;min-width:104px;display:inline-block;color:var(--text)}
.impact-list span{color:var(--text-soft);font-size:var(--fs-body);line-height:var(--lh-body)}

/* ---------- galeria / tiras ---------- */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,3vw,36px);margin-top:clamp(36px,5vw,64px)}
.gallery .g-full{grid-column:1/-1}
.gallery figcaption{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-soft);margin-top:14px}
@media(max-width:640px){.gallery{grid-template-columns:1fr}}
.strip{display:grid;gap:clamp(18px,3vw,32px);margin-top:clamp(28px,4vw,48px)}
.strip--2{grid-template-columns:repeat(2,1fr)}
.strip--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.strip--3{grid-template-columns:1fr}}
@media(max-width:640px){.strip--2{grid-template-columns:1fr}}

/* ---------- next case / more work ---------- */
.next-case{border-top:1px solid var(--hairline)}
.next-case a{display:block}
.next-case .np{font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:var(--track-label);color:var(--text-dim);margin-bottom:16px}
.next-case h2{max-width:22ch}
.next-case h2 span{color:var(--text-dim);transition:color .2s}
.next-case a:hover h2 span{color:var(--text)}
.more-work{border-top:1px solid var(--hairline)}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,36px)}
@media(max-width:760px){.more-grid{grid-template-columns:1fr}}
.more-grid .work-card h3{font-size:var(--fs-body);line-height:1.3}

/* ---------- writing ---------- */
.writing-list{list-style:none;max-width:860px}
.writing-list li{border-top:1px solid var(--hairline);padding:28px 0}
.writing-list li:last-child{border-bottom:1px solid var(--hairline)}
.writing-list h3{font-size:var(--fs-sub);line-height:1.25;margin-bottom:12px}
.writing-list h3 a{transition:opacity .2s}
.writing-list li:hover h3 a{opacity:.65}
.writing-list p{color:var(--text-soft);font-size:var(--fs-body);line-height:var(--lh-body);max-width:60ch}
.writing-list .small{margin-top:8px;display:block}
article.prose{max-width:700px}
article.prose h1{margin-bottom:18px;max-width:20ch}
article.prose h2{margin:44px 0 16px}
article.prose p{color:var(--text-soft);font-size:var(--fs-body);line-height:1.55}
article.prose p strong{color:var(--text)}
article.prose p + p{margin-top:16px}
article.prose ul,article.prose ol{margin:16px 0 16px 22px}
article.prose li + li{margin-top:8px}
article.prose blockquote{
  border-left:2px solid var(--text);padding-left:22px;margin:30px 0;
  font-family:var(--display);font-weight:var(--fw-display);letter-spacing:var(--track-display);
  font-size:1.3rem;line-height:1.28;
}
.article-meta{font-size:.8rem;text-transform:uppercase;letter-spacing:var(--track-label);color:var(--text-dim);margin-bottom:28px}

/* ---------- awards ---------- */
.award-group{max-width:880px}
.award-group + .award-group{margin-top:clamp(40px,6vw,72px)}
.award-item{border-top:1px solid var(--hairline);padding:28px 0;display:grid;grid-template-columns:120px 1fr;gap:24px}
.award-item:last-child{border-bottom:1px solid var(--hairline)}
@media(max-width:640px){.award-item{grid-template-columns:1fr;gap:8px}}
.award-year{font-family:var(--display);font-weight:var(--fw-display);letter-spacing:var(--track-display);font-size:var(--fs-sub)}
.award-item h3{font-size:var(--fs-sub);line-height:1.25;margin-bottom:6px}
.award-item .medal{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--track-label);border:1px solid var(--text);padding:3px 10px;margin-left:10px;vertical-align:middle}
.award-item p{color:var(--text-soft);font-size:var(--fs-body);line-height:var(--lh-body);max-width:62ch;margin-top:12px}
.award-item p em{color:var(--text);font-style:normal;font-weight:600}

/* ---------- prêmios: retrato no header + selo por item ---------- */
/* Foto à ESQUERDA, texto à direita alinhado à esquerda (decisão 2026-08-27).
   A ordem no HTML continua texto → foto, para o leitor de tela encontrar o H1
   antes da imagem; quem troca a posição é o grid, não o DOM. */
.awards-intro{
  display:grid;grid-template-columns:minmax(240px,380px) minmax(0,1fr);
  gap:clamp(24px,3.5vw,52px);align-items:center;
}
.awards-intro > :not(.awards-intro__photo){grid-column:2;grid-row:1}
.awards-intro__photo{grid-column:1;grid-row:1}
/* o dourado é o mesmo <em> do hero: aqui o título inteiro assume o papel */
.awards-intro h1{color:var(--accent)}
/* No celular o texto volta a vir primeiro: uma foto vertical antes do H1
   empurraria o título inteiro para fora da primeira tela. */
@media(max-width:820px){
  .awards-intro{grid-template-columns:1fr;gap:32px}
  .awards-intro > :not(.awards-intro__photo){grid-column:1;grid-row:1}
  .awards-intro__photo{grid-column:1;grid-row:2}
}
.awards-intro__photo{margin:0;border:1px solid var(--hairline);padding:10px;background:var(--surface)}
.awards-intro__photo img{width:100%;height:auto;display:block}
.awards-intro__photo figcaption{
  font-size:var(--fs-label);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--text-dim);
  margin-top:12px;line-height:1.5;
}
.award-seal{width:100%;max-width:120px;height:auto;display:block}
@media(max-width:640px){.award-seal{max-width:88px}}
.award-item .aw-meta{
  font-size:var(--fs-label);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--text-dim);
  margin-top:8px;max-width:none;
}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:clamp(32px,6vw,80px);align-items:start}
@media(max-width:820px){.about-grid{grid-template-columns:1fr}}
.about-grid > div > img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.about-bio p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-soft)}
.about-bio p strong{color:var(--text)}
.about-bio > p:first-child{font-size:var(--fs-sub);line-height:1.35;color:var(--text)}
.about-section{margin-top:38px}
.about-section h2{font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:var(--track-label);color:var(--text-dim);margin-bottom:12px}
.about-section ul{list-style:none}
.about-section li{padding:14px 0;border-top:1px solid var(--hairline);color:var(--text-soft);font-size:var(--fs-body);line-height:var(--lh-body)}
.about-section li strong{color:var(--text)}
.about-bio .btn-outline{margin-top:40px}
/* Largura inteira da página, abaixo da foto e separado da bio. Duas colunas a
   partir de ~900px: numa coluna só, 1200px dariam mais de 120 caracteres por
   linha, o dobro do limite de leitura confortável. */
.about-more{
  margin-top:clamp(44px,6vw,80px);
  padding-top:clamp(32px,4vw,48px);
  border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
  gap:clamp(32px,4vw,52px) clamp(32px,5vw,72px);
  align-items:start;
}
/* O espaço entre blocos vem do row-gap do grid, não do margin-top de cada
   .about-section. Com margin-top, só o PRIMEIRO item zerava, então a segunda
   coluna começava 38px mais baixo: COMO EU TRABALHO e RECONHECIMENTO saíam
   desalinhados no topo. */
.about-more .about-section{margin-top:0}
@media(max-width:900px){
  .about-more{grid-template-columns:1fr;gap:clamp(32px,5vw,44px) 0}
}

/* ---------- contact ---------- */
/* Era um bloco de 700px isolado no canto esquerdo de uma página de 1200px.
   Agora o bloco usa a largura toda e quem segura a medida é cada elemento pelo
   seu papel: título de display largo, texto corrido na medida de leitura, e a
   lista de contatos aberta de ponta a ponta (rótulo à esquerda, valor à
   direita), que é onde a largura vira informação em vez de vão. */
.contact-block{max-width:none}
.contact-block .lede{max-width:62ch}
.contact-links{list-style:none;margin-top:38px}
.contact-links li{border-top:1px solid var(--hairline);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.contact-links li:last-child{border-bottom:1px solid var(--hairline)}
.contact-links .label{font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:var(--track-label);color:var(--text-dim)}
.contact-links a{font-weight:600;border-bottom:1px solid var(--text)}
.contact-note{margin-top:28px;color:var(--text-soft);font-size:var(--fs-body);line-height:var(--lh-body);max-width:70ch}


/* ---------- barra de saída do case (só celular) ----------
   Uma página de case passa de 12 telas no telefone. Sem isso, sair dela para
   outro projeto exige rolar até o fim ou abrir o menu. A barra entra depois de
   55% da leitura e sai de cena quando o bloco "Continue explorando" aparece,
   para não haver dois caminhos concorrentes na mesma tela. */
.next-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;
  visibility:hidden;pointer-events:none;
  background:rgba(0,0,0,.86);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--hairline);
  padding:12px var(--pad);
  padding-bottom:max(12px,env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .28s var(--ease);
}
.next-bar__label{
  display:block;font-size:var(--fs-label);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--text-dim);margin-bottom:2px;
}
.next-bar__name{
  display:block;font-family:var(--display);font-weight:var(--fw-display);
  letter-spacing:var(--track-display);text-transform:uppercase;
  font-size:1rem;line-height:1.2;color:var(--text);
}
.next-bar__name::after{content:" \2192";color:var(--accent)}
@media(max-width:760px){
  .next-bar:not([hidden]){display:block;min-height:56px}
  /* inerte enquanto escondida: não recebe toque nem foco de teclado */
  .next-bar.is-on{transform:none;visibility:visible;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){.next-bar{transition:none}}

/* ---------- footer ---------- */
/* rodapé compacto — 60% mais baixo que a versão original (175px → ~70px),
   com tudo centralizado. Mesmo conteúdo. */
.site-footer{border-top:1px solid var(--hairline);padding:clamp(28px,4vw,44px) 0;text-align:center}
/* logotipo de duas linhas: HUGO ZUFFO / DESIGNER DE EMBALAGENS.
   As duas linhas usam o MESMO .wordmark — mesmo peso, caixa e kerning −50. */
.site-footer .footer-logo{display:block;line-height:1.25}
.site-footer .footer-logo--sub{color:var(--text)}
.site-footer .meta{font-size:.78rem;color:var(--text-dim)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   MÓDULOS DO WIREFRAME (2026-08-04) — página de case
   Ordem dos blocos: header · prêmios · destaques(accordion) ·
   frase do projeto · fases · diferencial · full-bleed · vídeo ·
   continue explorando (fundo claro).
   Usados em work/deca-disposer/. Os módulos antigos (.page-hero,
   .feature-edge, .awards-band, .next-case) seguem no arquivo
   porque as outras páginas ainda dependem deles.
   ============================================================ */

/* ---------- 02 · HEADER — usa o .page-hero (imagem de fundo + scrim + texto
     no terço esquerdo). Decisão do Hugo em 2026-08-04: header é imagem DE FUNDO,
     não imagem ao lado. O módulo já existe mais acima no arquivo. ---------- */

/* ---------- 03 · PRÊMIOS — cards clicáveis, raio + sombra ---------- */
.awards-cards{padding:var(--sec) 0}
.awards-cards .grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(12px,1.6vw,20px);
}
/* Ordem da informação no card (decisão de 2026-08-04):
   nome do prêmio → ano → medalha/categoria → organizador → ano • cidade.
   Todos os cards têm a MESMA superfície, com ou sem link; o que sinaliza
   "clicável" é o "Conferir →" e o hover, não a caixa. */
.award-card{
  display:flex;flex-direction:column;
  min-height:132px;padding:22px;
  background:var(--surface-2);
  border:1px solid var(--hairline);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.award-card .aw-name{
  font-family:var(--display);font-weight:var(--fw-display);
  text-transform:uppercase;letter-spacing:var(--track-display);
  font-size:var(--fs-sub);line-height:1.15;color:var(--text);
}
.award-card .aw-year{
  margin-top:4px;font-size:var(--fs-body);line-height:1.3;color:var(--accent);font-weight:600;
}
.award-card .aw-medal{
  margin-top:12px;font-size:var(--fs-body);line-height:1.35;color:var(--text);font-weight:600;
}
.award-card .aw-org{
  margin-top:6px;font-size:var(--fs-body);line-height:1.35;color:var(--text-soft);
}
.award-card .aw-place{
  margin-top:10px;font-size:var(--fs-label);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--text-dim);
}
.award-card .go{
  margin-top:auto;padding-top:16px;
  font-size:var(--fs-label);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--accent);
}
a.award-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:var(--accent)}
a.award-card:focus-visible{outline:2px solid var(--text);outline-offset:3px}
@media(prefers-reduced-motion:reduce){a.award-card{transition:none}a.award-card:hover{transform:none}}

/* ---------- 04 · DESTAQUES — accordion à esquerda + imagem que troca ---------- */
/* fundo mais curto: o "O projeto em uma frase" logo abaixo estava com espaço
   demais em cima (era ~270px do box ao texto). */
.showcase{padding:var(--sec) 0}
.showcase-box{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(20px,3vw,44px);align-items:center;
  /* box PRETO com a mesma moldura do vídeo (decisão 2026-08-04), não mais cinza */
  background:var(--bg);
  border:0;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-frame);
  padding:clamp(20px,2.6vw,32px);
}
/* imagem larga (paisagem): o JS marca .is-media-wide → o bloco empilha,
   texto em cima e imagem embaixo ocupando a largura toda (aproveita a
   proporção panorâmica, ex.: os ícones 1920×670 do diferencial). */
.showcase-box.is-media-wide{grid-template-columns:1fr}
.showcase-box.is-media-wide .sc-list{align-self:stretch}
.sc-list{display:flex;flex-direction:column;gap:8px;align-self:center}
.sc-item{border-bottom:1px solid var(--hairline-soft)}
.sc-item:last-child{border-bottom:0}
.sc-trigger{
  width:100%;min-height:52px;                 /* alvo de toque confortável */
  display:flex;align-items:center;gap:12px;
  padding:14px 6px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:var(--fs-body);font-weight:600;
  color:var(--text-soft);text-align:left;
  transition:color .2s var(--ease);
}
.sc-trigger:hover{color:var(--text)}
.sc-trigger:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:8px}
.sc-trigger .dot{
  flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--text-dimmer);transition:background .2s var(--ease),transform .2s var(--ease);
}
.sc-trigger[aria-expanded="true"]{color:var(--text)}
.sc-trigger[aria-expanded="true"] .dot{background:var(--accent);transform:scale(1.4)}
.sc-panel{overflow:hidden;max-height:0;transition:max-height .32s var(--ease)}
.sc-panel .in{padding:0 6px 18px 26px}
.sc-panel p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-soft);max-width:52ch}
/* quadro padrão (O SISTEMA): 16:9 fixo. As faces são 1920×1080, então
   cobrem o quadro exatamente — cabem 100%, sem corte nem sobra. */
.sc-media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--bg);aspect-ratio:16/9}
.sc-media > *{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .4s var(--ease);
}
.sc-media > *.is-on{opacity:1}
/* variante --fit (O DIFERENCIAL): as duas artes têm proporções diferentes
   (infográfico retrato 870×1080, ícones panorâmico 1920×670). O quadro assume
   a proporção da imagem ATIVA (definida no site.js) e object-fit:contain mostra
   a arte inteira. Como as artes têm fundo preto, o respiro funde com a página. */
.sc-media[data-fit]{aspect-ratio:auto;background:transparent}
.sc-media[data-fit] > *{object-fit:contain}
@media(max-width:900px){
  .showcase-box{grid-template-columns:1fr}
  .sc-media{order:-1}
  .sc-media > *{position:absolute}
}
@media(prefers-reduced-motion:reduce){
  .sc-panel{transition:none}.sc-media > *{transition:none}
}

/* ---------- 05 · O PROJETO EM UMA FRASE (+ FOTO REAL) ---------- */
/* espaço padrão do bloco vem do --sec; a placa não adiciona respiro vertical */
.oneliner{padding:var(--sec) 0}
/* sem placa cinza — o bloco respira direto no fundo preto (decisão 2026-08-04) */
.oneliner .plate{
  padding:0 clamp(24px,5vw,72px);text-align:center;
}
/* a frase e a foto real são UM bloco: gap curto entre elas (2026-08-14) */
.oneliner.has-bleed .bleed{margin-top:clamp(32px,4.5vw,56px)}
.oneliner .kicker{margin-bottom:14px}
.oneliner h2{
  font-size:var(--fs-display);line-height:1.06;
  max-width:20ch;margin:0 auto;color:var(--text);
}
.oneliner h2 em{font-style:normal;color:var(--accent)}
.oneliner p{
  margin:clamp(20px,3vw,32px) auto 0;max-width:60ch;
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-soft);
}

/* ---------- 06 · FASES DO PROJETO ---------- */
.phases{padding:var(--sec) 0}
/* Eram 4 colunas de 250px: com o padding do card sobravam 186px de texto,
   uns 21 caracteres por linha. Legível é a partir de ~45. Com 420px de mínimo
   o grid cai para 2 colunas no desktop (2x2 para as 4 fases), e o texto sobe
   para ~53ch sem mudar o conteúdo nem o número de cards. */
.phases .grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.phase-card{
  padding:clamp(24px,2.6vw,32px);
  background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;
}
.phase-card .n{
  font-family:var(--display);font-weight:var(--fw-display);
  font-size:1.5rem;line-height:1;color:var(--accent);margin-bottom:16px;
}
/* título do card de fase: 30% menor que o título de bloco e em caixa baixa.
   --fs-sub é exatamente 70% de --fs-title, então o nível 4 do sistema serve. */
.phase-card h3{margin-bottom:12px;font-size:var(--fs-sub);line-height:1.2;text-transform:none}
.phase-card p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-soft)}

/* ---------- 07 · DIFERENCIAL — imagem à esquerda, texto à direita ---------- */
.diff{padding:var(--sec) 0}
/* Colunas iguais. Com 1.15/0.85 a coluna de texto ficava em 447px, e o título
   de seção (~14ch nessa largura) era o único da página a quebrar em duas linhas
   apertadas: mesmo corpo dos outros h2, o dobro de massa visual. 1fr/1fr põe o
   texto em ~530px, a mesma medida do bloco de vídeo, e o título volta a ler no
   mesmo peso do resto. O tamanho do h2 não muda: é --fs-title em toda a página. */
.diff .inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;
}
.diff .d-media img,.diff .d-media .ph{width:100%;height:auto;display:block;border-radius:var(--radius)}
.diff .d-text h2{margin-bottom:18px}
.diff .d-text p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-soft);max-width:50ch}
.diff .d-text p + p{margin-top:16px;color:var(--accent)}
@media(max-width:900px){.diff .inner{grid-template-columns:1fr;gap:24px}}

/* ---------- 09 · VÍDEO — intro acima, vídeo abaixo ---------- */
.video-sec{padding:var(--sec) 0;background:var(--bg)}
.video-sec .intro{max-width:60ch;margin:0 auto clamp(28px,4vw,48px);text-align:center}
.video-sec .intro h2{margin-bottom:16px}
.video-sec .intro p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-soft)}
.video-sec .stage{max-width:420px;margin:0 auto}
/* vídeo horizontal (16:9) — quando a prova é uma demo em paisagem, não vertical */
.video-sec .stage--wide{max-width:min(900px,100%)}
.video-sec .stage video,.video-sec .stage .ph{
  width:100%;display:block;border-radius:var(--radius);background:#000;
  /* moldura preto-sobre-preto (mesma do box do showcase) */
  box-shadow:var(--shadow-frame);
}
.video-sec .stage video{aspect-ratio:9/16;object-fit:cover}
/* wide vem depois e com especificidade maior, senão o 9/16 acima venceria */
.video-sec .stage.stage--wide video{aspect-ratio:16/9}
.video-sec figcaption{
  margin-top:14px;text-align:center;font-size:.72rem;color:var(--text-dimmer);
  text-transform:uppercase;letter-spacing:var(--track-label);
}

/* ---------- 10 · CONTINUE EXPLORANDO — fundo claro ---------- */
.explore{
  background:var(--light-bg);color:var(--light-text);
  padding:var(--sec) 0;
}
.explore h2{color:var(--light-text);margin-bottom:clamp(24px,4vw,44px)}
/* Mesmo caso das fases: 4 cards de 230px deixavam o texto em ~23ch. Com 340px
   de mínimo são 3 no desktop e 2 no tablet, com a medida em ~40ch. */
.explore .grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.explore-card{
  display:flex;flex-direction:column;
  background:var(--light-surface);
  border:1px solid var(--light-hairline);border-radius:var(--radius-lg);
  padding:clamp(20px,2.4vw,28px);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.explore-card .ec-kicker{
  font-size:var(--fs-label);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--light-text-soft);margin-bottom:12px;
}
.explore-card h3{font-size:var(--fs-sub);line-height:1.2;color:var(--light-text);margin-bottom:10px}
.explore-card p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--light-text-soft)}
.explore-card .ec-media{margin:18px 0 0}
.explore-card .ec-media img,.explore-card .ec-media .ph{width:100%;height:auto;display:block;border-radius:10px}
/* margin-top:auto encosta o "+" na base — alinha entre cards de alturas diferentes */
.explore-card .ec-foot{display:flex;justify-content:flex-end;margin-top:auto;padding-top:18px}
.explore-card .plus{
  width:34px;height:34px;border-radius:50%;
  background:var(--light-text);color:var(--light-surface);
  display:grid;place-items:center;font-size:1.1rem;line-height:1;
  transition:transform .25s var(--ease);
}
a.explore-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.12)}
a.explore-card:hover .plus{transform:rotate(90deg)}
a.explore-card:focus-visible{outline:2px solid var(--light-text);outline-offset:3px}
/* placeholder precisa de contraste próprio no fundo claro.
   min-height:0 para o 16:9 valer dentro do card estreito */
.explore .ph{
  background:repeating-linear-gradient(45deg,#EDEAE3,#EDEAE3 14px,#E3DFD6 14px,#E3DFD6 28px);
  border-color:var(--light-hairline);
  min-height:0;border-radius:10px;
}
.explore .ph span{color:#8A857C}
/* full-bleed: o placeholder respeita o teto de altura da imagem real (88vh).
   min-width:100% é obrigatório — sem ele, max-height + aspect-ratio fazem o
   navegador ENCOLHER a largura para manter os 16:9, e sobra faixa preta na
   lateral. A imagem real não sofre isso porque usa object-fit:cover. */
.bleed .ph{min-height:0;max-height:88vh;width:100%;min-width:100%}
@media(prefers-reduced-motion:reduce){
  a.explore-card{transition:none}a.explore-card:hover{transform:none}
  a.explore-card:hover .plus{transform:none}
}

/* ============================================================
   LUPA / LIGHTBOX (2026-08-14) — clicar numa imagem de conteúdo amplia
   ============================================================ */
/* cursor de lupa nas imagens ampliáveis */
.bleed img,.sc-media img,.diff .d-media img,.gallery img,.g-full img{cursor:zoom-in}
/* no showcase, só a imagem ativa recebe clique (as outras ficam por baixo) */
.sc-media > *:not(.is-on){pointer-events:none}

/* FLEX (não grid): o container tem altura definida (inset:0), então o
   max-height:100% da imagem resolve e imagens altas ficam centralizadas em vez
   de estourar para baixo da tela. */
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(0,0,0,.92);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  cursor:zoom-out;
}
.lightbox.open{display:flex}
.lightbox__img{
  max-width:100%;max-height:100%;min-height:0;
  width:auto;height:auto;object-fit:contain;
  border-radius:var(--radius);box-shadow:var(--shadow-frame);
}
.lightbox__cap{
  position:absolute;left:0;right:0;bottom:clamp(12px,2.5vw,28px);
  margin:0 auto;max-width:60ch;padding:0 var(--pad);
  text-align:center;font-size:var(--fs-body);color:var(--text-soft);
}
.lightbox__close{
  position:absolute;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(246,244,239,.25);
  color:var(--text);font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .2s var(--ease),border-color .2s var(--ease);
}
.lightbox__close:hover{background:rgba(0,0,0,.85);border-color:var(--text)}
.lightbox__close:focus-visible{outline:2px solid var(--text);outline-offset:3px}
@media(prefers-reduced-motion:no-preference){
  .lightbox.open .lightbox__img{animation:lb-in .25s var(--ease)}
}
@keyframes lb-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ============================================================
   HOME — TEMA CLARO (2026-08-15)
   A home é clara (diagramação apple.com); as páginas de case seguem
   pretas. `body.theme-light` sobrescreve os TOKENS, então todos os
   módulos existentes funcionam sem alteração. Blocos de projeto e
   rodapé continuam pretos, como ilhas escuras dentro da página clara.
   ============================================================ */
body.theme-light{
  --bg:#FFFFFF;
  --surface:#F5F5F7;          /* cinza claro da Apple */
  --surface-2:#FFFFFF;
  --text:#1D1D1F;
  --text-soft:#494950;
  --text-dim:#6E6E73;
  --text-dimmer:#727276;   /* era #86868B: 3,62:1 no branco, reprovava. Agora 4,79:1 */
  --hairline:#D2D2D7;
  --hairline-soft:#E8E8ED;
  /* dourado ESCURECIDO: o #B89B6E dá só 2,6:1 no branco (reprova).
     Este dá ~5:1 — passa em AA para texto. */
  --accent:#8A6B39;
  /* faixa da cor da página entre um bloco e outro — a "tile" da apple.com.
     Separa as faixas cinza/preta sem precisar de linha divisória. */
  --tile-gap:12px;
  /* valores sempre escuros, para as ilhas pretas dentro da home */
  --ink-bg:#000000;
  --ink-text:#F6F4EF;
  --ink-soft:#B8B8BD;
  --ink-dim:#86868B;
  --ink-accent:#B89B6E;       /* no preto o dourado original volta */
  background:var(--bg);color:var(--text);
}
/* INTERVALO ENTRE BLOCOS — cada seção é uma "tile" e o fundo da página
   aparece como uma faixa fina entre elas (padrão apple.com). */
body.theme-light main > section + section{margin-top:var(--tile-gap)}
body.theme-light .site-footer{margin-top:var(--tile-gap)}

/* header claro translúcido */
body.theme-light .site-header{
  background:rgba(255,255,255,.78);
  border-bottom:1px solid var(--hairline-soft);
}
@media(max-width:760px){
  body.theme-light .site-nav{background:rgba(255,255,255,.97)}
}
/* rodapé segue PRETO na home clara */
body.theme-light .site-footer{
  background:var(--ink-bg);border-top:0;
}
body.theme-light .site-footer .wordmark{color:var(--ink-text)}
body.theme-light .site-footer .meta{color:var(--ink-dim)}
/* placeholder no claro */
body.theme-light .ph{
  background:repeating-linear-gradient(45deg,#EDEDF0,#EDEDF0 14px,#E3E3E8 14px,#E3E3E8 28px);
  border-color:var(--hairline);
}
body.theme-light .ph span{color:#8A8A90}

/* ---------- SELETOR DE IDIOMA — bandeira em cima, código embaixo ----------
   Opção E, decisão de 2026-08-26. Presente no cabeçalho das 16 páginas.

   As bandeiras são SVG em data URI AQUI DENTRO: uma fonte só para manter,
   nenhuma requisição extra, nenhum CDN. NUNCA troque por emoji de bandeira
   (🇺🇸🇧🇷🇩🇪) — o Windows não tem os glifos e renderiza "US"/"BR"/"DE" em
   caixinhas, justamente na máquina do recrutador alemão.

   A bandeira é reforço visual; quem carrega o significado é o CÓDIGO abaixo
   dela. Bandeira é país, não idioma: a alemã não cobre Áustria nem Suíça,
   a americana não cobre Reino Unido. Nunca deixe a bandeira sozinha. */
.lang{
  display:inline-flex;align-items:center;gap:10px;
  padding:0;border:0;border-radius:0;background:transparent;
}
.lang__label{
  font-size:.66rem;font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--text-dim);white-space:nowrap;
}
.lang__group{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--hairline);border-radius:0;
}
.lang button,.lang a{
  font:inherit;font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--text-dim);background:none;border:0;cursor:pointer;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;line-height:1;padding:7px 13px;min-height:46px;border-radius:0;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.lang button + button,.lang a + a{border-left:1px solid var(--hairline)}
/* A bandeira leva um anel duplo: o escuro a separa de header claro,
   o claro a separa de header escuro. Serve nos dois temas sem troca. */
.lang__flag{
  display:block;width:21px;height:14px;flex:none;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  box-shadow:0 0 0 1px rgba(0,0,0,.30),0 0 0 1.5px rgba(255,255,255,.18);
}
.lang__flag--en{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2014%22%3E%3Crect%20width%3D%2221%22%20height%3D%2214%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20fill%3D%22%23B22234%22%3E%3Crect%20width%3D%2221%22%20height%3D%221.08%22%2F%3E%3Crect%20y%3D%222.15%22%20width%3D%2221%22%20height%3D%221.08%22%2F%3E%3Crect%20y%3D%224.31%22%20width%3D%2221%22%20height%3D%221.08%22%2F%3E%3Crect%20y%3D%226.46%22%20width%3D%2221%22%20height%3D%221.08%22%2F%3E%3Crect%20y%3D%228.62%22%20width%3D%2221%22%20height%3D%221.08%22%2F%3E%3Crect%20y%3D%2210.77%22%20width%3D%2221%22%20height%3D%221.08%22%2F%3E%3Crect%20y%3D%2212.92%22%20width%3D%2221%22%20height%3D%221.08%22%2F%3E%3C%2Fg%3E%3Crect%20width%3D%228.9%22%20height%3D%227.54%22%20fill%3D%22%233C3B6E%22%2F%3E%3Cg%20fill%3D%22%23fff%22%3E%3Ccircle%20cx%3D%221.9%22%20cy%3D%221.5%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%224.4%22%20cy%3D%221.5%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%226.9%22%20cy%3D%221.5%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%223.15%22%20cy%3D%223.2%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%225.65%22%20cy%3D%223.2%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%221.9%22%20cy%3D%224.9%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%224.4%22%20cy%3D%224.9%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%226.9%22%20cy%3D%224.9%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%223.15%22%20cy%3D%226.4%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%225.65%22%20cy%3D%226.4%22%20r%3D%22.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.lang__flag--pt{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2014%22%3E%3Crect%20width%3D%2221%22%20height%3D%2214%22%20fill%3D%22%23009B3A%22%2F%3E%3Cpath%20d%3D%22M10.5%201.5%2019.6%207%2010.5%2012.5%201.4%207Z%22%20fill%3D%22%23FEDF00%22%2F%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%227%22%20r%3D%223.15%22%20fill%3D%22%23002776%22%2F%3E%3C%2Fsvg%3E")}
.lang__flag--de{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2014%22%3E%3Crect%20width%3D%2221%22%20height%3D%224.67%22%20fill%3D%22%23141414%22%2F%3E%3Crect%20y%3D%224.67%22%20width%3D%2221%22%20height%3D%224.67%22%20fill%3D%22%23DD0000%22%2F%3E%3Crect%20y%3D%229.34%22%20width%3D%2221%22%20height%3D%224.66%22%20fill%3D%22%23FFCE00%22%2F%3E%3C%2Fsvg%3E")}
.lang button:hover,.lang a:hover{color:var(--text)}
.lang button[aria-pressed="true"],.lang a[aria-current="true"]{background:var(--text);color:var(--bg)}
.lang button:focus-visible,.lang a:focus-visible{outline:2px solid var(--text);outline-offset:2px}
@media(hover:none){.lang button,.lang a{min-height:48px;padding:8px 14px}}
@media(max-width:760px){
  /* logo · idiomas · botão Menu — tudo em uma linha, sem quebrar.
     Aos 390px: logo ~105 + seletor ~107 + Menu ~64 + gaps ~20 = ~296px. Cabe. */
  .site-header .inner{gap:10px}
  .wordmark{white-space:nowrap}
  .lang{order:2;margin-left:auto;gap:0}
  /* alvo de toque: 44px é o mínimo nos DOIS eixos. A bandeira (17px) é mais
     estreita que isso, então quem garante a largura é o padding lateral. */
  .lang button,.lang a{min-height:46px;padding:6px 13px;gap:4px;font-size:.6rem;letter-spacing:.06em}
  .lang__flag{width:17px;height:11px}
  .nav-toggle{order:3}
  /* não cabe o rótulo no celular: some da tela, mas continua no leitor de tela */
  .lang__label{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
}
/* abaixo de 380px (iPhone SE e afins) o logo, o seletor e o Menu não cabem
   os três com 44px. Aperta o Menu e o logo primeiro; o seletor é o último
   a encolher, porque é ele que precisa do alvo de toque. */
@media(max-width:379px){
  .site-header .inner{gap:6px;padding-left:14px;padding-right:14px}
  .wordmark{font-size:1rem}
  .lang button,.lang a{padding:6px 11px}
  .nav-toggle{padding:9px 10px}
}

/* ---------- HERO DA HOME — centralizado (padrão apple.com) ---------- */
.home-hero{padding:var(--sec) 0 0;text-align:center;background:var(--bg)}
.home-hero h1{
  font-size:var(--fs-display);line-height:1.05;
  max-width:18ch;margin:0 auto;color:var(--text);
}
.home-hero h1 em{font-style:normal;color:var(--accent)}
.home-hero .sub{
  margin:clamp(18px,2.6vw,28px) auto 0;max-width:56ch;
  font-size:var(--fs-sub);line-height:1.4;color:var(--text-soft);
}
.home-hero .cta-row{margin-top:clamp(24px,3.4vw,38px)}
.home-hero .portrait{
  margin:clamp(36px,5vw,64px) auto 0;max-width:420px;
}
.home-hero .portrait img,.home-hero .portrait .ph{
  width:100%;height:auto;display:block;border-radius:var(--radius-lg);
}

/* CTA — a ação primária da página.
   REGRA DO SITE: todo CTA é RETANGULAR, de cantos retos (referência Tom Ford).
   Nada de border-radius em botão. Ver CLAUDE_Instructions §5. */
.btn-cta{
  display:inline-block;border-radius:0;
  padding:15px 32px;min-height:44px;
  background:var(--text);color:var(--bg);
  font-size:.8rem;font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);
  transition:opacity .2s var(--ease);
}
.btn-cta:hover{opacity:.85}
.btn-cta:focus-visible{outline:2px solid var(--text);outline-offset:3px}
/* variante para uso dentro dos blocos pretos */
.btn-cta--ink{background:var(--ink-text);color:var(--ink-bg)}


/* ============================================================
   ALVO DE TOQUE — só em ponteiro grosso (dedo). No desktop, com mouse,
   um link de 19px é normal; num celular ele é um erro de acerto. A regra
   de 44px (Apple HIG) e 48dp (Material) vale onde não existe hover.

   Dois tratamentos, de propósito:
   · botões e links de bloco crescem de verdade (min-height), porque ali
     um alvo maior também lê melhor;
   · links dentro de texto corrido ganham área invisível via ::after, para
     o sublinhado e o ritmo do parágrafo não se moverem.
   ============================================================ */
@media(hover:none){
  .nav-toggle,.filter-btn,.contact-links a,.btn-cta,.btn-outline{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
  .wordmark,.footer-logo,.verify-link,.link-arrow,.award-card .go,.next-case a{
    position:relative;
  }
  .wordmark::after,.footer-logo::after,.verify-link::after,
  .link-arrow::after,.award-card .go::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    height:44px;transform:translateY(-50%);
  }
}


/* ============================================================
   MOBILE COMO PROJETO, NÃO COMO ADAPTAÇÃO  ·  2026-08-27
   O layout já não quebrava no celular, mas quebrava a EXPERIÊNCIA:
   o accordion mandava numa imagem que saía da tela, o header comia 10%
   da altura útil e o conteúdo passava por baixo do notch em paisagem.
   ============================================================ */

/* toque: tira o atraso de 300ms e o flash cinza do iOS/Android sem tirar
   o feedback, que continua vindo do :active e do :focus-visible. */
a,button,summary,[role="button"]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
a:active,button:active{opacity:.72}

@media(max-width:900px){
  /* O ACCORDION E A IMAGEM SÃO UM CONTROLE SÓ.
     Empilhados, tocar um item mudava uma imagem que já tinha rolado para
     fora da tela: o usuário operava algo que não via. Fixando a imagem no
     topo, a relação causa-efeito volta a existir no celular. */
  .sc-media{
    position:sticky;top:calc(var(--header-h) + 8px);z-index:1;
    max-height:46svh;
  }
  .sc-media[data-fit]{max-height:52svh}
  .sc-media > *{object-position:center}

  /* Texto antes da imagem nos blocos de duas colunas: no celular o leitor
     precisa saber o que está olhando antes de olhar. */
  .diff .inner > :not(.d-media){grid-column:1;grid-row:1}
  .diff .d-media{grid-column:1;grid-row:2}
}

/* ============================================================
   DESTAQUES DA HOME NO CELULAR  ·  2026-08-27
   Título e CTA centralizados EM CIMA do packshot não funcionavam: a caixa do
   Triturador tem o logo dourado e o nome do produto exatamente onde o claim
   cai, e escurecer o packshot para o texto caber estraga justamente o que o
   bloco quer mostrar. Aqui o herói vira duas faixas: a foto inteira em cima,
   claim e CTA embaixo sobre preto. Ninguém disputa espaço com ninguém.
   ============================================================ */
@media(max-width:760px){
  /* Vale para o herói de case E para os destaques da home. O herói da home
     (--text-right) tem tratamento próprio: lá a foto TEM área livre no topo,
     então o texto entra por cima. Aqui não: o packshot ocupa o quadro inteiro,
     e qualquer texto por cima ou some ou exige escurecer o produto. */
  .page-hero{
    min-height:0;align-items:stretch;
    display:grid;grid-template-rows:auto auto;
    /* No desktop a mídia é absoluta e cobre o padding da section; empilhada ela
       entra no fluxo e esse mesmo padding vira uma faixa preta de 64px entre o
       header e a foto. O respiro do texto vem do .page-hero__inner. */
    padding:0;
  }
  .page-hero .page-hero__media{
    position:relative;inset:auto;grid-row:1;aspect-ratio:4/5;
  }
  /* o object-position inline existe para reenquadrar o 16:9 no desktop; o
     recorte mobile já vem enquadrado, então aqui ele atrapalha */
  .page-hero .page-hero__media img{
    object-position:center center !important;
  }
  .page-hero .page-hero__scrim{display:none}
  .page-hero .page-hero__inner{
    grid-row:2;background:var(--bg);text-align:left;
    padding-top:clamp(24px,5vw,34px);padding-bottom:clamp(28px,6vw,40px);
  }
  .page-hero .hero-claim,
  .page-hero .hero-sub{max-width:none}
  .page-hero--feature .cta-row{margin-top:clamp(18px,3vw,24px)}
  .page-hero--feature .cta-row .btn-cta{display:block;text-align:center}
}

/* header mais baixo no celular: 81px numa tela de 812 é 10% do campo de
   visão preso o tempo todo. */
@media(max-width:760px){
  .site-header .inner{
    padding-top:8px;padding-bottom:8px;
    padding-top:max(8px,env(safe-area-inset-top));
  }
}

/* ---------- HOME: kicker do header 50% maior ---------- */
.page-hero--text-right .hero-copy .kicker{font-size:1.08rem}

/* ---------- HOME: destaque de projeto usando o header do case ----------
   Mesmo módulo .page-hero da página do projeto (mesma imagem, mesmo scrim),
   só com o claim e o CTA. Um pouco mais baixo que o header de página. */
.page-hero--feature{min-height:clamp(440px,64vh,680px)}
.page-hero--feature .cta-row{margin-top:clamp(22px,3vw,32px)}

/* ---------- BIG NUMBERS DA HOME ---------- */
.home-stats{padding:var(--sec) 0;background:var(--surface)}
.home-stats .grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(24px,3vw,40px);text-align:center;
}
.home-stats .n{
  display:block;font-family:var(--display);font-weight:var(--fw-display);
  letter-spacing:var(--track-display);
  font-size:clamp(2.6rem,5.5vw,4.2rem);line-height:1;color:var(--text);
}
.home-stats .l{
  display:block;margin:14px auto 0;max-width:22ch;
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-soft);
}

/* ---------- DESTAQUE DE PROJETO — ilha PRETA na home clara ---------- */
.case-feature{
  background:var(--ink-bg);color:var(--ink-text);
  padding:var(--sec) 0 0;text-align:center;overflow:hidden;
}
.case-feature .head{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.case-feature h2{color:var(--ink-text)}
.case-feature .sub{
  margin:16px auto 0;max-width:52ch;
  font-size:var(--fs-sub);line-height:1.4;color:var(--ink-soft);
}
.case-feature .sub em{font-style:normal;color:var(--ink-accent)}
.case-feature .cta-row{margin-top:clamp(22px,3vw,32px)}
.case-feature .shot{margin-top:clamp(36px,5vw,64px)}
.case-feature .shot img,.case-feature .shot .ph{
  width:100%;height:auto;display:block;
}
/* placeholder dentro da ilha preta volta ao padrão escuro */
.case-feature .ph{
  background:repeating-linear-gradient(45deg,#131315,#131315 14px,#1A1A1C 14px,#1A1A1C 28px);
  border-color:#2A2A2C;
}
.case-feature .ph span{color:#5E5E63}

/* ---------- GRID DE PROJETOS (2×2) ---------- */
.home-grid{padding:var(--sec) 0;background:var(--bg)}
.home-grid .head{text-align:center;margin-bottom:clamp(28px,4vw,48px)}
.home-grid .head p{margin:14px auto 0;max-width:54ch;color:var(--text-soft)}
/* 2×2 no desktop (como o wireframe), 1 coluna no mobile */
.home-grid .grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2vw,28px);
}
@media(max-width:760px){.home-grid .grid{grid-template-columns:1fr}}
.home-card{
  display:flex;flex-direction:column;
  background:var(--surface);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.home-card .frame{background:var(--hairline-soft)}
.home-card .frame img,.home-card .frame .ph{width:100%;height:auto;display:block;border:0;border-radius:0}
.home-card .body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;flex:1}
.home-card .ec-kicker{
  font-size:var(--fs-label);font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--text-dim);margin-bottom:10px;
}
.home-card h3{font-size:var(--fs-sub);line-height:1.2;color:var(--text);margin-bottom:10px}
.home-card p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-soft)}
.home-card .foot{display:flex;justify-content:flex-end;margin-top:auto;padding-top:18px}
.home-card .plus{
  width:34px;height:34px;border-radius:50%;
  background:var(--text);color:var(--bg);
  display:grid;place-items:center;font-size:1.1rem;line-height:1;
  transition:transform .25s var(--ease);
}
a.home-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.10)}
a.home-card:hover .plus{transform:rotate(90deg)}
a.home-card:focus-visible{outline:2px solid var(--text);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  a.home-card,a.home-card .plus{transition:none}
  a.home-card:hover{transform:none}
  a.home-card:hover .plus{transform:none}
  .btn-pill{transition:none}
}

/* ============================================================
   HERO COM FOTO — variante "sujeito à ESQUERDA, texto à DIREITA"
   (2026-08-15). O .page-hero padrão tem o degradê escuro à esquerda
   e o texto lá; esta variante espelha, para fotos em que o sujeito
   ocupa o lado esquerdo. No celular a foto tem o sujeito embaixo,
   então o texto sobe para o topo.
   ============================================================ */
.page-hero--text-right .page-hero__scrim{
  background:
    linear-gradient(270deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.70) 34%,rgba(0,0,0,.22) 60%,rgba(0,0,0,0) 82%),
    linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 24%);
}
.page-hero--text-right .hero-copy{
  margin-left:auto;                 /* empurra o texto para a direita */
  /* bloco mais largo = começa mais à esquerda, perto de quem está na foto */
  max-width:min(600px,58%);
  text-align:left;                  /* o texto em si fica alinhado à esquerda */
}
.page-hero--text-right .hero-claim,
.page-hero--text-right .hero-sub{max-width:none}
/* caixa baixa no claim — como no comp do Hugo (o hero dos cases segue em
   caixa alta; aqui a frase é longa e lê melhor em caixa normal) */
.hero-claim--sentence{text-transform:none}
.page-hero--text-right .cta-row{margin-top:clamp(22px,3vw,32px)}

/* ============================================================
   HERÓI DA HOME: TEXTO SOBRE A FOTO — SÓ EM CELULAR DE VERDADE
   O retrato mobile (1080x3237) tem 61,3% de preto puro no topo, medido: a
   primeira linha com informação está em y=1984. Dando ao herói a MESMA
   proporção da foto, o cover não corta nada e o texto cai na área livre,
   branco sobre preto, sem precisar de scrim.

   Isto vale até 440px, que cobre todo celular real (o maior iPhone dá 430). Acima disso a conta desanda: numa janela larga e baixa
   (552x700, por exemplo) a proporção pediria 1654px de altura, e qualquer
   tentativa de limitar com max-height junto de aspect-ratio ENCOLHE A LARGURA
   do bloco — foi o que deixou o herói com 296px numa tela de 552 e branco
   sobrando à direita. De 441 a 760px o herói usa o mesmo empilhamento dos
   outros: foto em cima, texto embaixo. Uma regra a menos e nenhum conflito.
   ============================================================ */
@media(max-width:440px){
  .page-hero--text-right{
    display:block;min-height:0;
    padding:clamp(64px,10vw,140px) 0 0;   /* aqui a mídia é absoluta: não vira faixa */
    /* Duas proporções, não uma. A conta que garante folga a 320px (onde o texto
       quebra em mais linhas) deixa 208px de preto vazio a 375px+. Acima de
       360px o texto ocupa menos altura, então a foto pode subir: 1080/2900
       aperta o vazio sem encostar no rosto. */
    aspect-ratio:1080/3237;
  }
  @media(min-width:361px){
    .page-hero--text-right{aspect-ratio:1080/2900}
  }
  .page-hero--text-right .page-hero__media{
    position:absolute;inset:0;aspect-ratio:auto;
  }
  .page-hero--text-right .page-hero__media img{object-position:center bottom !important}
  .page-hero--text-right .page-hero__scrim{display:block;background:none}
  .page-hero--text-right .page-hero__inner{
    position:relative;z-index:2;background:none;
    padding-top:clamp(28px,6vw,44px);padding-bottom:clamp(20px,4vw,28px);
    text-align:left;
  }
  .page-hero--text-right .hero-copy{margin-left:0;max-width:none}
}

/* de 441 a 760 o retrato entra empilhado: 3:4 ancorado embaixo mostra rosto e
   busto sem o vazio preto do topo */
@media(min-width:441px) and (max-width:760px){
  .page-hero--text-right .page-hero__media{aspect-ratio:3/4}
  .page-hero--text-right .page-hero__media img{object-position:center bottom !important}
}

/* No tema claro (home), o hero é uma ilha escura: os tokens viram os
   valores "ink" dentro dele, então título, texto e o pill do CTA
   ficam legíveis sobre a foto sem CSS duplicado. */
body.theme-light .page-hero{
  --bg:var(--ink-bg);
  --text:var(--ink-text);
  --text-soft:var(--ink-soft);
  --text-dim:var(--ink-dim);
  --accent:var(--ink-accent);
}