/* ─── RESET ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; cursor: none; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: none; border: none; background: none; font-family: inherit; }

/* ─── TOKENS ─────────────────────────────────── */
:root {
  --bg: #F5F4EF;  --bg-alt: #EDEDEA;
  --dark: #0F0F0F; --dark-2: #1A1A1A;
  --text: #0F0F0F; --text-muted: #787878; --text-light: #B0B0B0; --white: #FFFFFF;
  --border: rgba(15,15,15,0.11); --border-light: rgba(255,255,255,0.11);
  --font-display: 'Syne', sans-serif; --font-body: 'DM Sans', sans-serif;
  --sp-xs:.5rem; --sp-sm:1rem; --sp-md:2rem; --sp-lg:4rem; --sp-xl:7rem; --sp-2xl:11rem;
  --container: 1320px; --radius: 12px; --radius-sm: 6px;
  --ease: cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --dur: 0.4s; --dur-lg: 0.7s;

  /* ─── SISTEMA MOBILE — variáveis abaixo são SOBRESCRITAS em
     @media (max-width: 700px). Use SEMPRE essas variáveis em vez
     de valores hardcoded em pixels/rem que dependam do device.
     Ver MOBILE.md pra documentação completa. */
  --header-h: 68px;              /* altura do header fixo */
  --hero-h: 100vh;               /* altura do hero */
  --hero-pad-x: clamp(1.5rem, 5vw, 5rem);
  --hero-pad-b: clamp(3rem, 6vw, 5rem);
  --work-card-h: auto;           /* desktop usa aspect-ratio, mobile vira 85dvh */
  --work-meta-pos: relative;     /* desktop fica abaixo, mobile vira absolute overlay */
  --mobile-safe-top: 0px;        /* safe-area-inset-top só quando suportado */
  --mobile-safe-bot: 0px;
}

/* ─── TYPOGRAPHY ─────────────────────────────── */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight:700; line-height:1.05; letter-spacing:-0.025em; text-wrap: pretty; }
h1 { font-size: clamp(3rem,8vw,8rem); }
h2 { font-size: clamp(2.5rem,5.5vw,5.25rem); }
h3 { font-size: clamp(1.125rem,1.8vw,1.5rem); }
p  { font-size: clamp(0.9375rem,1.15vw,1.0625rem); line-height: 1.75; }
em { font-style: italic; font-weight: inherit; }

/* ─── UTILS ──────────────────────────────────── */
.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 clamp(1.5rem,5vw,5rem); }
.section-label { display:inline-block; font-size:0.6875rem; font-weight:500; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--sp-md); }
.section-title { margin-bottom: var(--sp-lg); }
.line-wrap { display:block; overflow:hidden; }
section { padding: var(--sp-2xl) 0; }
.section-header { margin-bottom: var(--sp-xl); }

/* ─── PLACEHOLDER ────────────────────────────── */
.ph {
  width:100%; height:100%;
  background: repeating-linear-gradient(-45deg, var(--bg-alt) 0, var(--bg-alt) 4px, var(--bg) 4px, var(--bg) 14px);
  display:flex; align-items:center; justify-content:center;
}
.ph--dark {
  background: repeating-linear-gradient(-45deg, #191919 0, #191919 4px, #111 4px, #111 14px);
}
.ph__label { font-family:'Courier New',monospace; font-size:0.6875rem; color:var(--text-muted); letter-spacing:0.06em; text-align:center; padding:1rem; }
.ph__label--dark { color:rgba(255,255,255,0.22); }

/* ─── LOADER ─────────────────────────────────── */
#loader { position:fixed; inset:0; background:var(--dark); z-index:9999; display:flex; align-items:center; justify-content:center; }
.loader__name { display:block; font-family:var(--font-display); font-size:clamp(1.75rem,5vw,4rem); font-weight:700; color:var(--white); letter-spacing:-0.025em; opacity:0; transform:translateY(28px); }
.loader__bar-wrap { width:180px; height:1.5px; background:rgba(255,255,255,0.1); margin:1.5rem auto 0; overflow:hidden; border-radius:2px; }
.loader__bar { height:100%; width:0; background:var(--white); }

/* ─── CURSOR ─────────────────────────────────── */
#cursor-dot, #cursor-ring { position:fixed; top:0; left:0; pointer-events:none; z-index:9998; border-radius:50%; transform:translate(-50%,-50%); will-change:transform; }
#cursor-dot { width:5px; height:5px; background:var(--text); }
#cursor-ring { width:34px; height:34px; border:1.5px solid rgba(15,15,15,0.35); transition: width .35s var(--ease-out), height .35s var(--ease-out), background .35s var(--ease-out), border-color .35s var(--ease-out), opacity .3s; }
#cursor-ring.is-hovering { width:52px; height:52px; background:rgba(15,15,15,0.05); border-color:rgba(15,15,15,0.18); }
body.cursor-light #cursor-dot { background:var(--white); }
body.cursor-light #cursor-ring { border-color:rgba(255,255,255,0.35); }
body.cursor-light #cursor-ring.is-hovering { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.2); }
@media (hover:none) { #cursor-dot,#cursor-ring{display:none} body,a,button{cursor:auto} }

/* ─── NAV ────────────────────────────────────── */
#header { position:fixed; top:0; left:0; right:0; z-index:100; transition: background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease); }
#header.is-scrolled { background:rgba(15,15,15,0.82); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:1px solid rgba(255,255,255,0.06); }
.nav { display:flex; align-items:center; justify-content:space-between; height:68px; }
.nav__logo { font-family:var(--font-display); font-size:1.25rem; font-weight:800; color:var(--white); letter-spacing:-0.03em; line-height:1; }
.nav__logo span { color:rgba(255,255,255,0.3); }
.nav__links { display:flex; align-items:center; gap:2.25rem; }
.nav__link { font-size:0.875rem; color:rgba(255,255,255,0.55); position:relative; transition:color var(--dur) var(--ease); }
.nav__link::after { content:''; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:var(--white); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease-out); }
.nav__link:hover { color:var(--white); }
.nav__link:hover::after { transform:scaleX(1); transform-origin:left; }
.nav__right { display:flex; align-items:center; gap:1.5rem; }

/* Lang toggle */
.lang-toggle { display:flex; align-items:center; gap:0.375rem; font-size:0.75rem; font-weight:600; letter-spacing:0.1em; }
.lang-toggle__opt { color:rgba(255,255,255,0.3); transition:color var(--dur) var(--ease); }
.lang-toggle__opt.is-active { color:var(--white); }
.lang-toggle__sep { color:rgba(255,255,255,0.2); }

/* Mobile menu button */
.nav__menu-btn { display:none; flex-direction:column; justify-content:center; gap:5px; width:28px; height:28px; }
.nav__menu-btn span { display:block; width:100%; height:1.5px; background:var(--white); transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease); transform-origin:center; }
.nav__menu-btn.is-active span:first-child { transform:translateY(6.5px) rotate(45deg); }
.nav__menu-btn.is-active span:last-child  { transform:translateY(-6.5px) rotate(-45deg); }
@media (max-width:768px) { .nav__links{display:none} .nav__menu-btn{display:flex} }

.mobile-menu { position:fixed; inset:0; background:var(--dark-2); z-index:99; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem; opacity:0; pointer-events:none; transition:opacity var(--dur-lg) var(--ease); }
.mobile-menu.is-open { opacity:1; pointer-events:auto; }
.mobile-menu__links { text-align:center; display:flex; flex-direction:column; gap:1rem; }
.mobile-menu__link { font-family:var(--font-display); font-size:clamp(2.5rem,10vw,5rem); font-weight:700; color:rgba(255,255,255,0.35); letter-spacing:-0.025em; transition:color var(--dur) var(--ease); }
.mobile-menu__link:hover { color:var(--white); }
.mobile-menu .lang-toggle { border-top:1px solid rgba(255,255,255,0.1); padding-top:2rem; width:100%; justify-content:center; font-size:0.9rem; }

/* ─── HERO ───────────────────────────────────── */
.hero { min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:var(--sp-xl); position:relative; background:var(--dark); color:var(--white); overflow:hidden; }
.hero__canvas { position:absolute; inset:0; width:100%; height:100%; }
.hero__noise { position:absolute; inset:0; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px 200px; pointer-events:none; }

/* ── Hero cut-out figure ── */
.hero__figure { position:absolute; right:0; bottom:0; height:96%; z-index:1; pointer-events:none; display:flex; align-items:flex-end; }
.hero__figure-inner { position:relative; height:100%; }
.hero__cutout { display:block; height:100%; width:auto; object-fit:contain; object-position:bottom; opacity:0; filter:drop-shadow(-20px 0 80px rgba(0,0,0,0.55)); pointer-events:none; }

/* ── Tool icons ── */
.hero__tools { position:absolute; inset:0; pointer-events:none; }
.hero__tool { position:absolute; width:44px; height:44px; pointer-events:auto; }
.hero__tool svg { width:100%; height:100%; display:block; border-radius:9px; box-shadow:0 4px 20px rgba(0,0,0,0.5); transition:transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), filter 0.3s; }
.hero__tool:hover svg { transform:scale(1.25) translateY(-4px); box-shadow:0 8px 32px rgba(0,0,0,0.65); filter:brightness(1.15); }
.hero__tool-tip { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:rgba(15,15,15,0.9); color:rgba(255,255,255,0.85); font-size:0.625rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; padding:.3em .7em; border-radius:4px; opacity:0; pointer-events:none; transition:opacity 0.2s, transform 0.2s; transform:translateX(-50%) translateY(4px); }
.hero__tool:hover .hero__tool-tip { opacity:1; transform:translateX(-50%) translateY(0); }
/* Floating animations - 3 variants, staggered */
@keyframes float-A { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-11px) rotate(1.5deg); } }
@keyframes float-B { 0%,100% { transform:translateY(-5px) rotate(1deg); } 50% { transform:translateY(7px) rotate(-2deg); } }
@keyframes float-C { 0%,100% { transform:translateY(0) rotate(2deg); } 50% { transform:translateY(-15px) rotate(-1deg); } }
.hero__tool--ps    { top:10%;    left:5%;   animation:float-A 3.2s 0.0s ease-in-out infinite; }
.hero__tool--ai    { top:6%;     right:11%; animation:float-B 2.9s 0.7s ease-in-out infinite; }
.hero__tool--id    { top:46%;   right:7%;  animation:float-A 3.1s 0.4s ease-in-out infinite; }
.hero__tool--ae    { bottom:30%; left:5%;   animation:float-C 3.4s 1.1s ease-in-out infinite; }
.hero__tool--figma { bottom:26%; right:9%;  animation:float-B 3.3s 1.8s ease-in-out infinite; }
/* Pause float on hover */
.hero__tool:hover { animation-play-state:paused; }

/* ── Hero text ── */
.hero__content { display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:clamp(3rem,6vw,5rem); position:relative; z-index:2; height:100%; }
.hero__text { max-width:min(52%,620px); display:flex; flex-direction:column; gap:clamp(1.5rem,3vw,2.5rem); }

@media (max-width:1000px) { .hero__figure { height:88%; } .hero__tool { width:38px; height:38px; } .hero__text { max-width:60%; } }
@media (max-width:700px) { .hero__figure { height:70%; opacity:0.6; } .hero__tools { display:none; } .hero__text { max-width:100%; } }
@media (max-width:500px) { .hero__figure { display:none; } }
.hero__eyebrow { display:flex; align-items:center; gap:var(--sp-sm); flex-wrap:wrap; }
.hero__tag { display:inline-flex; align-items:center; font-size:0.6875rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.14); padding:.4em .9em; border-radius:999px; }
.hero__title { color:var(--white); }
.hero__title em { color:rgba(255,255,255,0.38); }
.hero__bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-md); }
.hero__desc { max-width:260px; color:rgba(255,255,255,0.45); font-size:.9375rem; line-height:1.65; }
.hero__scroll-hint { position:absolute; bottom:var(--sp-lg); right:clamp(1.5rem,5vw,5rem); display:flex; flex-direction:column; align-items:center; gap:.75rem; color:rgba(255,255,255,0.22); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; z-index:1; }
.hero__scroll-line { width:1px; height:56px; background:linear-gradient(to bottom, rgba(255,255,255,0.3), transparent); animation:scrollLine 2.2s var(--ease-out) infinite; }
@keyframes scrollLine { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
@media (max-width:700px) { .hero__bottom{flex-direction:column;align-items:flex-start} }

/* ─── HERO AVAILABLE BADGE ───────────────────── */
.hero__available { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.72 0.2 145);
  flex-shrink: 0;
  animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* ─── ABOUT IMAGE GRAD ───────────────────────── */
.about__image-wrap { position: relative; }
.about__image-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 60%, #0F0F0F 100%),
              linear-gradient(to top, #0F0F0F 0%, transparent 20%);
  pointer-events: none;
}
.about__image-wrap--cut { border-radius: 0; background: transparent; overflow: visible; }
.about__image--cut { object-fit: contain; object-position: bottom center; filter: drop-shadow(0 24px 48px rgba(0,0,0,0.6)); }

/* ─── CLIENTS ────────────────────────────────── */
.clients {
  background-color: #0F0F0F;
  color: white;
  padding: 5rem 0 5.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.clients__label {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  margin-bottom: 3.5rem;
}
.clients__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem 5rem;
}
.client-logo {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  overflow: visible;
}
.client-logo svg {
  display: block;
  height: 34px !important;
  width: auto !important;
  max-width: 180px;
  fill: white;
  color: white;
  opacity: 0.25;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease-out);
}
.client-logo__img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  opacity: 0.38;
  filter: grayscale(1);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease-out), filter 0.35s var(--ease);
}
.client-logo:hover .client-logo__img {
  opacity: 0.92;
  filter: grayscale(0);
  transform: scale(1.06);
}
@media (max-width: 600px) {
  .clients__grid { gap: 2rem 2.5rem; }
  .client-logo { height: 28px; }
  .client-logo__img { height: 26px; }
  .client-logo svg { height: 26px !important; }
}

/* ─── WORK v2 ─────────────────────────────────
   Grid editorial: cada projeto é uma "tela" que
   se anima sozinha, mostrando todas as imagens
   em cycle automático. Click → página dedicada.
─────────────────────────────────────────────── */
.work { background: var(--bg); padding-bottom: var(--sp-xl); }
.work .section-header { margin-bottom: var(--sp-lg); }
.section-header .section-title em { color: var(--text-muted); }

.work__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 5rem);
}

/* Item — wrapper do card + meta */
.work-item {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
}
.work-item--wide { grid-column: span 2; }

/* Mídia — proporção definida por --ar (do JS) */
.work-item__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 4 / 5);
  overflow: hidden;
  background: #0a0a0a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Click feedback — leve press antes de navegar */
.work-item__media:active {
  transform: scale(0.985);
  transition: transform 0.12s cubic-bezier(0.4, 0, 0.6, 1);
}

/* Wrapper interno que recebe o magnetic-parallax do JS.
   Separado do .media pra não conflitar com o :active transform. */
.work-item__inner {
  position: absolute;
  inset: 0;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Slides empilhados — cover pq agora o cycle só inclui
   imagens cujo formato bate com o aspect do card (filtro
   em renderProjects). Resultado: enquadra perfeito, sem letterbox. */
.work-item__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.work-item__slide.is-active { opacity: 1; }

/* Wide cards mantêm cover */
.work-item--wide .work-item__slide { object-fit: cover; }

/* Ken Burns pan — só rola em slides com aspect diferente do card
   (transforma o crop forçado em "scrub" intencional pelos detalhes).
   Animação só dispara quando o slide está ativo. */
.work-item__slide--pan-y.is-active {
  animation: workPanY 8s ease-in-out infinite alternate;
}
.work-item__slide--pan-x.is-active {
  animation: workPanX 8s ease-in-out infinite alternate;
}
/* No hover, acelera o pan junto com o cycle */
.work-item:hover .work-item__slide--pan-y.is-active {
  animation-duration: 3s;
}
.work-item:hover .work-item__slide--pan-x.is-active {
  animation-duration: 3s;
}

@keyframes workPanY {
  0%   { object-position: 50% 0%; }
  100% { object-position: 50% 100%; }
}
@keyframes workPanX {
  0%   { object-position: 0% 50%; }
  100% { object-position: 100% 50%; }
}

/* Respeita reduced-motion: sem pan */
@media (prefers-reduced-motion: reduce) {
  .work-item__slide--pan-y.is-active,
  .work-item__slide--pan-x.is-active {
    animation: none;
  }
}

/* Progress bars — estilo Stories, no topo do card */
.work-item__bars {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  z-index: 4;
  pointer-events: none;
  opacity: 0.75;
  transition: opacity 0.3s var(--ease);
}
.work-item:hover .work-item__bars { opacity: 1; }

.work-item__bar {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 1px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  transition: background 0.35s var(--ease);
}
.work-item__bar.is-active {
  background: rgba(255, 255, 255, 0.25);
}
.work-item__bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.95);
  transform-origin: left center;
}
.work-item__bar.is-active .work-item__bar-fill {
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.35), 0 0 14px rgba(255, 255, 255, 0.12);
}

/* Hover overlay — info funcional no canto inferior */
.work-item__hover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem 1rem 0.875rem;
  z-index: 3;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.work-item__media:hover .work-item__hover {
  opacity: 1;
  transform: translateY(0);
}
.work-item__hover-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transform: translateX(-6px);
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease-out);
  transition-delay: 0.08s;
}
.work-item__media:hover .work-item__hover-cta {
  opacity: 1;
  transform: translateX(0);
}
.work-item__hover-cta::after {
  content: '→';
  transition: transform 0.3s var(--ease);
}
.work-item__media:hover .work-item__hover-cta::after { transform: translateX(4px); }
.work-item__counter {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.08em;
  transform: translateX(6px);
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease-out);
  transition-delay: 0.08s;
}
.work-item__media:hover .work-item__counter {
  opacity: 1;
  transform: translateX(0);
}
/* Counter — o número atual faz slide-up animado quando troca de slide.
   JS adiciona/remove a classe .is-changing pra disparar a transição. */
.work-item__counter [data-counter-cur] {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s var(--ease);
  will-change: transform;
}
.work-item__counter [data-counter-cur].is-changing {
  transform: translateY(-8px);
  opacity: 0;
}

/* Meta editorial abaixo do card */
.work-item__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 0 2px;
}
.work-item__title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  max-width: 60%;
  margin: 0;
  position: relative;
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-item:hover .work-item__title { transform: translateX(3px); }

/* Underline animado sob o título — desliza de left no hover do card */
.work-item__title::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.25rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-item:hover .work-item__title::after {
  transform: scaleX(1);
  transform-origin: left;
}

.work-item__caption {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: right;
  max-width: 45%;
  font-style: italic;
  flex-shrink: 0;
  transition: color 0.4s var(--ease);
}
.work-item:hover .work-item__caption { color: var(--text); }

/* Wide items: meta de baixo fica mais editorial */
.work-item--wide .work-item__title { font-size: clamp(1.5rem, 2.2vw, 2rem); max-width: 55%; }
.work-item--wide .work-item__caption { font-size: 1rem; max-width: 40%; }

/* Borda viva — sutil contorno escuro pra dar peso editorial */
.work-item__media::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  z-index: 5;
  pointer-events: none;
}

/* Tablet — 2 colunas mantidas, wide volta a span 2 */
@media (max-width: 900px) {
  .work__grid { gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem); }
  .work-item__title { font-size: 1.0625rem; max-width: 100%; }
  .work-item__caption { font-size: 0.8125rem; max-width: 100%; text-align: left; }
  .work-item__meta { flex-direction: column; gap: 0.4rem; }
  .work-item--wide .work-item__title { font-size: 1.375rem; max-width: 100%; }
}

/* Mobile — uma coluna, wide igual */
@media (max-width: 600px) {
  .work__grid { grid-template-columns: 1fr; gap: 2.75rem; padding: 0 1.25rem; }
  .work-item--wide { grid-column: span 1; }
  .work-item__bars { top: 8px; left: 8px; right: 8px; }
}

/* ─── PROCESS ────────────────────────────────── */
.process { background:var(--dark); color:var(--white); }
.process .section-label { color:rgba(255,255,255,0.4); }
.process .section-title em { color:rgba(255,255,255,0.3); }
/* Two-column layout: steps left, photo right */
.process__inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,7rem); align-items:start; }
.process__left { min-width:0; }
.process__right { position:sticky; top:6rem; }
/* Photo */
.process__photo-wrap { position:relative; overflow:hidden; border-radius:2px; }
.process__photo { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top center; filter:brightness(0.78); }
.process__photo-vignette { position:absolute; inset:0; background: linear-gradient(to right, var(--dark) 0%, transparent 18%), linear-gradient(to top, var(--dark) 0%, transparent 20%), linear-gradient(to bottom, var(--dark) 0%, transparent 10%); pointer-events:none; }
/* Process body text */
.process__body { padding-top: var(--sp-md); }
.process__body p { font-size: clamp(.9rem, 1.4vw, 1.0625rem); color: rgba(255,255,255,0.55); line-height: 1.8; margin-bottom: 1.25em; }
.process__body p:last-child { margin-bottom: 0; }
@media (max-width:900px) { .process__inner{grid-template-columns:1fr} .process__right{position:static; margin-top:var(--sp-xl)} .process__photo{aspect-ratio:16/9; object-position:top} }
@media (max-width:600px) { .process__right{display:none} }

/* ─── ABOUT ──────────────────────────────────── */
.about { background:var(--dark); color:var(--white); }
.about .section-label { color:rgba(255,255,255,0.4); }
.about__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,8vw,8rem); align-items:start; }
.about__image-col { position:sticky; top:5.5rem; }
.about__title em { color:rgba(255,255,255,0.3); }
.about__text { color:rgba(255,255,255,0.5); margin-bottom:var(--sp-md); }
.about__text strong { color:rgba(255,255,255,0.85); }
.about__image-wrap { aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius); }
.about__stats { display:flex; gap:var(--sp-lg); margin:var(--sp-lg) 0; padding:var(--sp-lg) 0; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); flex-wrap:wrap; }
.stat { flex:1; }
.stat__top { display:flex; align-items:baseline; gap:.25rem; line-height:1; margin-bottom:.4rem; }
.stat__number { font-family:var(--font-display); font-size:clamp(2.25rem,4vw,3.25rem); font-weight:800; color:var(--white); line-height:1; }
.stat__plus { font-family:var(--font-display); font-size:1.375rem; font-weight:700; color:rgba(255,255,255,0.3); }
.stat__label { display:block; font-size:.75rem; color:rgba(255,255,255,0.4); }
.about__skills { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--sp-md); }
.skill-tag { display:inline-block; font-size:.6875rem; font-weight:500; letter-spacing:.06em; padding:.4em .9em; border:1px solid var(--border-light); border-radius:999px; color:rgba(255,255,255,0.45); transition:border-color var(--dur), color var(--dur); }
.skill-tag:hover { border-color:rgba(255,255,255,0.45); color:var(--white); }
@media (max-width:900px) { .about__grid{grid-template-columns:1fr} .about__image-col{display:none} }

/* ─── BLOG ───────────────────────────────────── */
.blog { background:var(--bg-alt); }
.blog .section-title em { color:var(--text-muted); }
/* Nav de paginação */
.blog__nav { display:flex; align-items:center; margin-bottom:1.25rem; }
.blog__nav-counter { font-size:.75rem; font-weight:500; letter-spacing:.08em; color:var(--text-muted); margin-right:auto; }
.blog__nav-btns { display:flex; gap:.5rem; }
.blog__nav-btn { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:50%; color:var(--text); font-size:1rem; line-height:1; transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur); cursor:pointer; background:none; }
.blog__nav-btn:hover:not(:disabled) { border-color:var(--text); color:var(--text); }
.blog__nav-btn:disabled { opacity:.2; cursor:default; pointer-events:none; }
/* Grid */
.blog__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--border); }
.blog-card { background:var(--bg-alt); display:flex; flex-direction:column; }
.blog-card__image-wrap { aspect-ratio:3/2; overflow:hidden; background:var(--bg); display:block; cursor:pointer; }
.blog-card__image-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.25,.46,.45,.94); }
.blog-card:hover .blog-card__image-wrap img { transform:scale(1.05); }
.blog-card__body { padding:1.5rem; flex:1; display:flex; flex-direction:column; gap:.75rem; border-top:1px solid var(--border); }
.blog-card__date { font-size:.6875rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.blog-card__title { font-family:var(--font-display); font-size:clamp(1rem,1.5vw,1.25rem); font-weight:700; color:var(--text); line-height:1.2; flex:1; transition:color var(--dur) var(--ease); }
.blog-card__title a { color:inherit; text-decoration:none; }
.blog-card:hover .blog-card__title { color:var(--text-muted); }
.blog-card__excerpt { font-size:.875rem; color:var(--text-muted); line-height:1.6; }
.blog-card__link { display:inline-flex; align-items:center; gap:.375rem; font-size:.8125rem; font-weight:500; color:var(--text); border-bottom:1px solid var(--border); padding-bottom:2px; transition:border-color var(--dur), color var(--dur); width:fit-content; }
.blog-card__link:hover { color:var(--text-muted); border-color:var(--text-muted); }
@media (max-width:768px) { .blog__grid{grid-template-columns:1fr} .blog__nav-btn{width:36px;height:36px;} }

/* ─── CONTACT ────────────────────────────────── */
.contact { background:var(--bg); }
.contact__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,8vw,8rem); align-items:start; }
.contact__title em { color:var(--text-muted); }
.contact__desc { color:var(--text-muted); max-width:320px; margin-bottom:0; }
.contact__socials { display:flex; gap:var(--sp-md); margin-top:var(--sp-lg); flex-wrap:wrap; }
.social-link { font-size:.875rem; font-weight:500; color:var(--text-muted); border-bottom:1px solid var(--border); padding-bottom:2px; transition:color var(--dur), border-color var(--dur); }
.social-link:hover { color:var(--text); border-color:var(--text); }
.contact-form { display:flex; flex-direction:column; gap:1.375rem; }
.form-group { display:flex; flex-direction:column; gap:.5rem; }
.form-label { font-size:.6875rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.form-input { width:100%; padding:.875rem 1rem; background:var(--white); border:1.5px solid transparent; outline:1.5px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font-body); font-size:.9375rem; color:var(--text); transition:outline-color var(--dur) var(--ease); -webkit-appearance:none; }
.form-input::placeholder { color:var(--text-light); }
.form-input:focus { outline-color:var(--text); }
.form-input.has-error { outline-color:#C53030; }
.form-textarea { resize:vertical; min-height:130px; line-height:1.6; }
.form-error { font-size:.8125rem; color:#C53030; display:none; }
.form-error.is-visible { display:block; }
.form-success { display:none; padding:1rem 1.25rem; background:rgba(72,187,120,.1); border:1px solid rgba(72,187,120,.3); border-radius:var(--radius-sm); color:#276749; font-size:.9375rem; text-align:center; }
.form-success.is-visible { display:block; }
@media (max-width:900px) { .contact__grid{grid-template-columns:1fr} }

/* ─── FOOTER ─────────────────────────────────── */
.footer { background:var(--dark); padding:var(--sp-md) 0; }
.footer__inner { display:flex; justify-content:space-between; align-items:center; color:rgba(255,255,255,0.3); font-size:.8125rem; }
.footer__top { transition:color var(--dur) var(--ease); }
.footer__top:hover { color:var(--white); }

/* ─── BUTTONS ────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.625rem; padding:.875em 1.75em; border-radius:999px; font-family:var(--font-body); font-size:.9375rem; font-weight:500; line-height:1; transition:background var(--dur), color var(--dur), opacity var(--dur); white-space:nowrap; }
.btn--primary { background:var(--white); color:var(--dark); }
.btn--primary:hover { background:rgba(255,255,255,.85); }
.btn--dark { background:var(--dark); color:var(--white); }
.btn--dark:hover { background:var(--dark-2); }
.btn--outline { background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.25); }
.btn--outline:hover { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.5); }
.btn--full { width:100%; }
.btn:disabled { opacity:.6; }
.btn__loading { display:none; }
.btn.is-loading .btn__text  { display:none; }
.btn.is-loading .btn__loading { display:inline; }

/* ─── LIGHTBOX ───────────────────────────────── */
.lightbox-backdrop { position:fixed; inset:0; background:rgba(5,5,5,.96); z-index:500; opacity:0; pointer-events:none; transition:opacity .4s ease; }
.lightbox-backdrop.is-open { opacity:1; pointer-events:auto; }

/* Layout: flex coluna — mídia ocupa tudo, info bar embaixo */
.lightbox { position:fixed; inset:0; z-index:501; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .4s ease; overflow:hidden; background:#000; }
.lightbox.is-open { opacity:1; pointer-events:auto; }

/* Área da imagem — flex:1 ocupa todo o espaço restante */
.lightbox__media { flex:1; min-height:0; overflow:hidden; background:#000; display:flex; flex-direction:column; }

/* Stage — centraliza a imagem */
.lb__stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:1.5rem 2rem .75rem; }

/* Viewer — container da imagem sem decorações */
.lb__viewer { position:relative; overflow:hidden; background:#000; flex-shrink:0; }
.lb__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; will-change:transform,opacity; }

/* Frames — só aspect-ratio, sem bordas decorativas */
.lb-frame--phone  { height:min(80vh,620px); aspect-ratio:9/16; }
.lb-frame--post   { height:min(84vh,720px); aspect-ratio:4/5; }
.lb-frame--wide   { width:min(88%,1020px); aspect-ratio:16/9; }
.lb-frame--square { height:min(78vh,660px); aspect-ratio:1; }

/* Filmstrip — dentro da área de mídia, acima da info bar */
.lb__filmstrip { display:flex; gap:3px; padding:.625rem 1.25rem; overflow-x:auto; flex-shrink:0; background:rgba(0,0,0,.7); scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent; align-items:flex-end; }
.lb__filmstrip::-webkit-scrollbar { height:3px; }
.lb__filmstrip::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:2px; }
.lb__thumb { flex-shrink:0; height:64px; width:auto; border:2px solid transparent; border-radius:2px; overflow:hidden; cursor:pointer; background:#111; padding:0; opacity:.35; transition:opacity .2s,border-color .2s; }
.lb__thumb[data-fmt="9:16"] { aspect-ratio:9/16; }
.lb__thumb[data-fmt="4:5"]  { aspect-ratio:4/5; }
.lb__thumb[data-fmt="16:9"] { aspect-ratio:16/9; }
.lb__thumb[data-fmt="1:1"]  { aspect-ratio:1; }
.lb__thumb:hover  { opacity:.7; }
.lb__thumb--active { border-color:rgba(255,255,255,.8); opacity:1; }
.lb__thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* Info bar — barra compacta na base, horizontal */
.lightbox__info { flex-shrink:0; background:#0a0a0a; border-top:1px solid rgba(255,255,255,.07); padding:.875rem 1.5rem; display:flex; align-items:center; gap:1.75rem; overflow:hidden; min-height:0; }
.lightbox__meta { display:flex; align-items:center; gap:.625rem; flex-shrink:0; }
.lightbox__num { font-family:var(--font-display); font-size:.625rem; font-weight:700; color:rgba(255,255,255,.2); letter-spacing:.1em; }
.lightbox__cat { font-size:.625rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.3); }
.lightbox__title { font-family:var(--font-display); font-size:clamp(.9375rem,1.5vw,1.25rem); font-weight:700; color:var(--white); letter-spacing:-.02em; line-height:1.2; flex:1; margin-bottom:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lightbox__desc { display:none; }
.lightbox__nav { display:flex; align-items:center; gap:.5rem; flex-shrink:0; margin-top:0; }
.lightbox__counter { font-size:.6875rem; color:rgba(255,255,255,.25); flex-shrink:0; }
.lightbox__arrow { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.15); border-radius:50%; color:rgba(255,255,255,.5); font-size:.875rem; transition:border-color .2s,color .2s,background .2s; }
.lightbox__arrow:hover { border-color:rgba(255,255,255,.5); color:var(--white); background:rgba(255,255,255,.06); }
.lightbox__link { flex-shrink:0; font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.15); padding:.4em 1em; border-radius:2px; transition:color .2s,border-color .2s; text-decoration:none; }
.lightbox__link:hover { color:var(--white); border-color:rgba(255,255,255,.45); }
/* Botão Behance dentro da barra compacta */
.lightbox__info .btn { font-size:.625rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.38); border:1px solid rgba(255,255,255,.14); padding:.45em 1.1em; border-radius:2px; height:auto; width:auto; min-width:0; flex-shrink:0; transition:color .2s,border-color .2s; }
.lightbox__info .btn:hover { color:var(--white); border-color:rgba(255,255,255,.45); background:transparent; }

.lightbox__close { position:fixed; top:1rem; right:1.25rem; z-index:502; width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.4); font-size:1rem; background:rgba(255,255,255,.06); border-radius:50%; transition:color .2s,transform .2s,background .2s; }
.lightbox__close:hover { color:var(--white); transform:rotate(90deg); background:rgba(255,255,255,.12); }

/* Mobile */
@media (max-width:768px) {
  .lb__stage { padding:.75rem .75rem .5rem; }
  .lb-frame--phone  { height:min(52vh,380px); }
  .lb-frame--post   { height:min(56vh,420px); }
  .lb-frame--wide   { width:96%; }
  .lb-frame--square { height:min(50vh,380px); }
  .lightbox__title { font-size:.875rem; }
  .lightbox__desc { display:none; }
  .lightbox__info { padding:.75rem 1rem; gap:1rem; }
  .lightbox__close { top:.625rem; right:.75rem; }
}

/* ─── TWEAKS ─────────────────────────────────── */
.tweaks-panel { position:fixed; bottom:1.5rem; right:1.5rem; z-index:200; background:var(--dark); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:1.25rem 1.5rem; width:240px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.tweaks-panel__title { font-family:var(--font-display); font-size:.8125rem; font-weight:700; color:var(--white); letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem; }
.tweaks-row { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.875rem; }
.tweaks-row:last-child { margin-bottom:0; }
.tweaks-row label { font-size:.6875rem; color:rgba(255,255,255,.45); letter-spacing:.06em; text-transform:uppercase; }
.tweaks-row input[type=range] { width:100%; accent-color:var(--white); }
.tweaks-row select { width:100%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-sm); color:var(--white); font-family:var(--font-body); font-size:.8125rem; padding:.375rem .625rem; }

/* ─── SCROLL REVEAL (initial) ────────────────── */

/* ─── SCROLL PROGRESS BAR ────────────────────── */
:root { --scroll-progress: 0; }
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.7);
  transform-origin: left;
  transform: scaleX(var(--scroll-progress, 0));
  z-index: 9997;
  pointer-events: none;
  transition: transform 0.08s linear;
}

/* ─── CURSOR — dark section fix ─────────────── */
#header .nav__link { color: rgba(255,255,255,0.55); }

/* ─── WORK GRID — section label override ────── */
.work .section-label { color: var(--text-muted); margin-bottom: var(--sp-md); }
.work .section-header { margin-bottom: var(--sp-lg); }

/* ═══════════════════════════════════════════════
   MOBILE OPTIMIZATIONS
   ─────────────────────────────────────────────
   Bloco focado: pensa em iPhone 12-15 (390px) e
   iPhone Mini/SE (375px). Tablet 601-900px ganha
   tratamento intermediário. Tudo aqui WIN sobre
   as regras espalhadas acima na cascade order.
═══════════════════════════════════════════════ */

/* ── TABLET (601-900px) ─────────────────────── */
@media (max-width: 900px) {
  /* Spacing global menos pesado */
  :root {
    --sp-2xl: 6rem;
    --sp-xl:  4.5rem;
    --sp-lg:  3rem;
  }
  section { padding: 5rem 0; }

  /* Process: foto VOLTA como elemento full-width abaixo do texto */
  .process__right { display: block !important; position: static; margin-top: 3rem; }
  .process__photo { aspect-ratio: 16/9; object-position: center 20%; }

  /* About: imagem VOLTA antes do texto (mobile-first) */
  .about__grid { grid-template-columns: 1fr; }
  .about__image-col {
    display: block !important;
    position: static;
    margin-bottom: 2.5rem;
    max-width: 360px;
  }
  .about__image-wrap { aspect-ratio: 4/5; }

  /* Stats: 3 colunas em grid (não flex) pra não quebrar */
  .about__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; padding: 2rem 0; }
  .stat__number { font-size: 1.875rem; }
  .stat__plus { font-size: 1rem; }
  .stat__label { font-size: 0.6875rem; }
}

/* ═══════════════════════════════════════════════
   MOBILE (≤700px) — CINEMA HIGHLIGHT REEL
   ─────────────────────────────────────────────
   Mobile NÃO é uma versão menor do desktop.
   É uma experiência diferente: imersiva, dark,
   cinematic. Cada projeto fullscreen. Type editorial
   gigante. Hero full-bleed do recorte. Scroll-snap.
═══════════════════════════════════════════════ */

@media (max-width: 700px) {
  /* ─── VARIÁVEIS MOBILE ─────────────────────
     Sobrescreve os tokens do desktop. Tudo abaixo
     consome essas vars — pra mudar comportamento
     global, mexe AQUI, não nas regras individuais. */
  :root {
    /* Spacing scale */
    --sp-2xl: 4rem;
    --sp-xl:  3rem;
    --sp-lg:  2.25rem;
    --sp-md:  1.5rem;

    /* Hero */
    --hero-h: 100dvh;
    --hero-pad-x: 1.5rem;
    --hero-pad-b: 2.25rem;
    --hero-min-h: 580px;

    /* Work card */
    --work-card-h: 85dvh;
    --work-card-min-h: 520px;
    --work-meta-pos: absolute;

    /* Safe area (iPhone notch / home indicator) */
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-bot: env(safe-area-inset-bottom, 0px);

    /* Container padding */
    --container-pad: 1.5rem;
  }
  section { padding: 4rem 0; }

  /* Container */
  .container { padding: 0 var(--container-pad); }

  /* Tipografia editorial — mais peso, menos polidez */
  h1 { font-size: clamp(3rem, 14vw, 4.5rem); line-height: 0.95; letter-spacing: -0.035em; }
  h2 { font-size: clamp(2.5rem, 11vw, 3.75rem); line-height: 0.98; letter-spacing: -0.03em; }
  h3 { font-size: 1.125rem; }
  p  { font-size: 0.9375rem; line-height: 1.65; }

  /* Section header default */
  .section-header { margin-bottom: 2.5rem; }
  .section-title  { margin-bottom: 1.5rem; }

  /* Scroll-snap em proximity: snap quando próximo de um work-item,
     resto da página rola normal (sobre, contato, etc). */
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: var(--header-h);
  }

  /* ═══ HERO — FULL-BLEED CINEMATIC ═══════════ */
  .hero {
    height: var(--hero-h);
    min-height: var(--hero-min-h);
    position: relative;
    overflow: hidden;
    background: var(--dark);
  }
  /* Recorte vira BACKGROUND, não foreground */
  .hero__figure {
    display: block !important;
    position: absolute;
    inset: 0;
    height: 100% !important;
    width: 100% !important;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
  }
  .hero__figure img,
  .hero__figure picture {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: 50% 12%;
    filter: brightness(0.55) saturate(0.85) contrast(1.05);
  }
  /* Gradient overlay pra legibilidade do texto */
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg,
        rgba(15,15,15,0.55) 0%,
        rgba(15,15,15,0.15) 25%,
        rgba(15,15,15,0.15) 45%,
        rgba(15,15,15,0.85) 78%,
        var(--dark) 100%);
    pointer-events: none;
  }
  /* Tools (Ps Ai Id Ae Fig) somem em mobile */
  .hero__tools { display: none; }
  /* Container do hero — respeita safe-area-inset */
  .hero__content {
    position: relative;
    z-index: 3;
    height: 100%;
    padding: var(--mobile-safe-top) var(--hero-pad-x) calc(var(--hero-pad-b) + var(--mobile-safe-bot));
    justify-content: flex-end;
    min-height: 0;
  }
  .hero__text {
    max-width: 100% !important;
    gap: 1.25rem;
  }
  /* Eyebrow: scroll horizontal sem barra, bleed pras laterais */
  .hero__eyebrow {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--hero-pad-x) * -1);
    padding: 0 var(--hero-pad-x);
    gap: 0.5rem;
  }
  .hero__eyebrow::-webkit-scrollbar { display: none; }
  .hero__tag {
    flex-shrink: 0;
    font-size: 0.625rem;
    padding: 0.4em 0.85em;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(255,255,255,0.18);
  }
  /* Title — editorial GIGANTE, ocupa peso visual */
  .hero__title {
    font-size: clamp(2.75rem, 13vw, 4rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }
  /* Bottom: desc + scroll-hint repensados */
  .hero__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .hero__desc {
    max-width: 100%;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.7);
  }
  /* Scroll hint = botão-CTA estilo "Ver trabalhos" */
  .hero__scroll-hint {
    position: relative;
    bottom: auto;
    right: auto;
    flex-direction: row;
    gap: 0.5rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    padding: 0.875rem 1.25rem;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.05);
    align-self: flex-start;
    margin-top: 0.5rem;
  }
  .hero__scroll-line {
    width: 12px;
    height: 1px;
    background: rgba(255,255,255,0.7);
    animation: none;
  }
  .hero__scroll-line::after { display: none; }

  /* ═══ CLIENTS — marquee tighter ═════════════ */
  .clients { padding: 2.5rem 0 3rem; }
  .clients__grid { gap: 1.5rem 2rem; }
  .client-logo { height: 24px; }
  .clients__label { font-size: 0.625rem; letter-spacing: 0.16em; }

  /* ═══ WORK — FULLSCREEN STORIES ════════════ */
  .work {
    background: #0a0a0a;
    color: var(--white);
    padding: 0;
  }
  /* Section header tem seu próprio container preto */
  .work .section-header {
    background: var(--dark);
    padding: 4rem var(--container-pad) 2.5rem;
    margin: 0;
  }
  .work .section-label { color: rgba(255,255,255,0.4); margin-bottom: 1rem; }
  .work .section-title { color: var(--white); margin-bottom: 0; }
  .work .section-title em { color: rgba(255,255,255,0.4); }

  /* Grid: 1 col, sem gap, fundo preto */
  .work__grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    background: #0a0a0a;
    max-width: 100%;
  }

  /* Cada projeto = fullscreen card. Wide vira normal. */
  .work-item,
  .work-item--wide {
    position: relative;
    grid-column: span 1 !important;
    margin: 0;
    flex-direction: column;
    gap: 0;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  /* Media: ocupa --work-card-h (deixa hint do próximo card) */
  .work-item__media {
    aspect-ratio: auto !important;
    height: var(--work-card-h);
    min-height: var(--work-card-min-h);
    width: 100%;
    background: #0a0a0a;
    touch-action: manipulation; /* elimina delay de 300ms em iOS */
  }
  /* Slides: object-fit cover sempre — sem letterbox */
  .work-item__slide {
    object-fit: cover;
    object-position: center;
  }
  /* Borda viva desnecessária em fullscreen */
  .work-item__media::before { display: none; }

  /* Bars no topo com safe area */
  .work-item__bars {
    top: calc(14px + var(--mobile-safe-top));
    left: var(--container-pad);
    right: var(--container-pad);
    gap: 4px;
    opacity: 0.95;
  }
  .work-item__bar { height: 2.5px; background: rgba(255,255,255,0.22); }
  .work-item__bar-fill { background: rgba(255,255,255,1); }

  /* Hover overlay (overlay sempre visível em touch) */
  .work-item__hover {
    opacity: 1;
    transform: none;
    background: none;
    padding: 0;
    top: calc(2.75rem + var(--mobile-safe-top));
    right: var(--container-pad);
    bottom: auto;
    left: auto;
    width: auto;
    display: flex;
    align-items: center;
  }
  .work-item__hover-cta { display: none; }
  .work-item__counter {
    opacity: 1;
    transform: none;
    color: rgba(255,255,255,0.65);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    font-weight: 600;
  }
  .work-item__counter [data-counter-cur] { color: var(--white); }

  /* Meta editorial: OVERLAY no bottom da imagem (não abaixo) */
  .work-item__meta {
    position: var(--work-meta-pos);
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5rem var(--container-pad) calc(2rem + var(--mobile-safe-bot));
    background: linear-gradient(to top,
      rgba(0,0,0,0.92) 0%,
      rgba(0,0,0,0.55) 50%,
      rgba(0,0,0,0.1) 85%,
      transparent 100%);
    z-index: 5;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    color: var(--white);
    pointer-events: none;
  }
  .work-item__title,
  .work-item--wide .work-item__title {
    color: var(--white);
    font-size: clamp(1.5rem, 6vw, 1.875rem);
    max-width: 75%; /* deixa room pro CTA ↗ */
    line-height: 1.1;
    letter-spacing: -0.02em;
    transform: none !important;
  }
  .work-item__title::after { display: none; }
  .work-item__caption,
  .work-item--wide .work-item__caption {
    color: rgba(255,255,255,0.75);
    font-size: 0.875rem;
    max-width: 75%;
    text-align: left;
    line-height: 1.5;
  }

  /* CTA "Ver projeto" — botão circular no canto inferior direito */
  .work-item::after {
    content: '↗';
    position: absolute;
    bottom: calc(2rem + var(--mobile-safe-bot));
    right: var(--container-pad);
    z-index: 6;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.92);
    color: var(--dark);
    border-radius: 50%;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  }

  /* Pan animations (Ken Burns) acelerado em mobile — feels cinemático */
  .work-item__slide--pan-y.is-active,
  .work-item__slide--pan-x.is-active {
    animation-duration: 6s;
  }

  /* ═══ PROCESS — vertical timeline tighter ═══ */
  .process__inner { gap: 2rem; }
  .process__step { padding-bottom: 1.5rem; }
  .process__photo-wrap { margin-top: 1.75rem; }
  .process__photo { aspect-ratio: 4/5; object-position: center 25%; }

  /* ═══ ABOUT — photo full-bleed, stats grandes ═══ */
  .about { padding: 4rem 0; }
  .about__image-col {
    margin: 0 calc(var(--container-pad) * -1) 2rem;
    max-width: none;
  }
  .about__image-wrap {
    aspect-ratio: 4/5;
    border-radius: 0;
  }
  .about__stats {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    margin: 2rem 0;
    border: none;
  }
  .stat {
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .stat:first-child { border-top: 1px solid rgba(255,255,255,0.08); }
  .stat__top {
    display: inline-flex;
    margin-bottom: 0;
  }
  .stat__number {
    font-size: 3rem;
    line-height: 1;
  }
  .stat__plus {
    font-size: 1.5rem;
  }
  .stat__label {
    font-size: 0.75rem;
    margin: 0;
    text-align: right;
    color: rgba(255,255,255,0.5);
    max-width: 50%;
  }
  .about__skills { gap: 0.4rem; margin-top: 1.5rem; }
  .skill-tag { font-size: 0.625rem; padding: 0.4em 0.85em; }

  /* ═══ BLOG ─────────────────────────────────── */
  .blog__grid { grid-template-columns: 1fr; gap: 1px; }

  /* ═══ CONTACT ──────────────────────────────── */
  .contact__grid { gap: 2.5rem; }
  .contact__socials { gap: 1.25rem; }
  .form-input { padding: 0.875rem 1rem; font-size: 1rem; /* prevent iOS zoom */ }
  .form-textarea { min-height: 110px; }

  /* ═══ FOOTER ───────────────────────────────── */
  .footer__inner { flex-direction: column; gap: 0.75rem; text-align: center; font-size: 0.75rem; }

  /* ═══ MOBILE MENU ──────────────────────────── */
  .mobile-menu__link { font-size: clamp(2rem, 9vw, 3rem); }

  /* ═══ SCROLL PROGRESS BAR ──────────────────── */
  body::after { height: 1.5px; }

  /* ═══ BUTTONS ──────────────────────────────── */
  .btn { padding: 0.95em 1.5em; font-size: 0.9375rem; }
}

/* ── LANDSCAPE em mobile (≤900 + altura ≤500) ──
   iPhone deitado: 667×375. Hero "fullscreen" fica
   espremido. Ajusta pra layout mais compacto. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero {
    min-height: 360px;
    height: auto;
  }
  .hero__content {
    padding-top: calc(var(--mobile-safe-top) + 4rem);
    padding-bottom: 2rem;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .hero__title { font-size: clamp(2rem, 7vw, 2.75rem); }
  .hero__figure img { object-position: 50% 25%; }
  /* Work card landscape: usa height auto pra não estourar viewport */
  .work-item__media {
    height: auto;
    aspect-ratio: 16 / 10;
    min-height: 320px;
  }
}

/* ── MOBILE PEQUENO (≤380px) ──────────────────
   iPhone SE 1ª/2ª gen, iPhone Mini quando reescalado.
   Pequenos ajustes — não mude breakpoints aqui sem
   atualizar a doc. */
@media (max-width: 380px) {
  :root {
    --container-pad: 1rem;
  }
  .hero__content { padding-left: var(--container-pad); padding-right: var(--container-pad); }
  .work .section-header { padding: 3rem var(--container-pad) 2rem; }
  .stat__number { font-size: 2.5rem; }
}

/* ── TOUCH DEVICES — Tweaks panel default off ── */
@media (hover: none) and (max-width: 900px) {
  .tweaks-panel { display: none; }
}