/* ==========================================================================
   Midmark Studio — stylesheet
   Referência: "SITE - MIDMARK - PROTÓTIPO". Todos os tamanhos, espaços e
   cores vêm dos tokens abaixo; não use valores avulsos.
   ========================================================================== */

/* ---- Fonte self-hosted ----
   Fonte do cliente: Sora (OFL, variável 100–800), em
   "SITE MIDMARK - ASSETS/FONTE". Subconjunto Latin (cobre o português)
   convertido para woff2 com fontTools. */
@font-face{
  font-family:"Sora";
  src:url("../assets/fonts/sora-latin-var.woff2") format("woff2");
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
}
/* Fallback com métricas ajustadas para a troca de fonte não mexer no layout */
@font-face{
  font-family:"Sora Fallback";
  src:local("Arial"), local("Helvetica");
  size-adjust:112.62%;
  ascent-override:86.13%;
  descent-override:25.75%;
  line-gap-override:0%;
}

:root{
  /* Cor — só tokens da marca */
  --c-bg:        #0a0a0a;
  --c-bg-2:      #0f0f10;
  --c-surface:   #1d2023;
  --c-line:      #262628;
  --c-white:     #ffffff;
  --c-text:      #f5f5f6;
  --c-muted:     #a6a6ad;   /* 8.3:1 sobre --c-bg */
  --c-dim:       #8c8c94;   /* 5.9:1 sobre --c-bg */
  --c-ghost:     #161617;   /* wordmark de fundo */
  --c-black:     #000000;   /* fundo do hero (arco) */
  --hero-fade-to:  #000000;            /* cor de encontro hero → slide */
  --hero-fade-mid: rgba(0,0,0,.55);
  --hero-fade-h:   38vh;
  --showcase-fade-h: 22vh;
  --radius-curtain: clamp(var(--sp-5), 3vw, var(--sp-7));
  --curtain-dim:   .7;                 /* quanto o hero escurece ao ser coberto */
  --curtain-dim-c: #000000;
  --c-accent:    #918bff;   /* roxo do logotipo — 6.9:1 sobre --c-bg */
  --c-on-light:  #0a0a0a;
  --c-scrim:     rgba(10,10,10,.62);   /* véu do CTA */
  --c-veil:      rgba(10,10,10,.5);    /* véu do slide de projeto (arte aprovada ≈ 50% de brilho) */
  --c-veil-0:    rgba(10,10,10,0);     /* início do gradiente da legenda */
  --c-veil-deep: rgba(10,10,10,.85);   /* fim do gradiente da legenda */
  --c-accent-tint:#e9e8ff;             /* hover do botão branco */

  /* Tipografia */
  --font: "Sora", "Sora Fallback", system-ui, sans-serif;

  --fs-xs:   .75rem;                                  /* 12 — rótulos */
  --fs-sm:   .875rem;                                 /* 14 — nav, legendas */
  --fs-base: 1rem;                                    /* 16 — corpo */
  --fs-md:   1.125rem;                                /* 18 — corpo grande */
  --fs-lg:   clamp(1.375rem, 1.1rem + .9vw, 1.75rem); /* 22→28 — títulos de card */
  --fs-xl:   clamp(2rem, 1.3rem + 2.4vw, 3rem);       /* 32→48 — títulos de seção */
  --fs-2xl:  clamp(2.125rem, 1.2rem + 3.4vw, 3.5rem); /* 34→56 — hero, CTA */
  --wordmark-w: 92vw;                                 /* largura do "Midmark®" de fundo */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  --ls-tight: -.03em;
  --ls-head:  .01em;
  --ls-nav:   .06em;
  --ls-btn:   .04em;
  --ls-label: .3em;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Espaçamento — escala única */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --gutter: clamp(var(--sp-4), 7.5vw, 125px);
  --container: 1280px;
  --header-h: 88px;

  --radius-sm: 12px;
  --radius:    18px;
  --radius-pill: 999px;

  /* Movimento */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 300ms;
  --dur:      450ms;
  --dur-slow: 700ms;
  --lift: calc(-1 * var(--sp-1) / 2); /* elevação no hover (2px) */

  /* Planeta do hero (animação) — geometria e luz derivadas da foto do arco */
  --c-accent-light: #c8c5ff;          /* atmosfera iluminada (tinta do roxo da marca) */
  --c-accent-deep:  #4b45c4;          /* roxo profundo da borda do arco */
  --c-planet-dark:  #120f33;          /* superfície do planeta (roxo da marca quase preto) */
  --planet-w:    max(130vw, 820px);   /* mesma largura da imagem .hero-arc */
  --planet-top:  calc(var(--header-h) + var(--sp-5));
  --planet-par:  18px;                /* amplitude do parallax com o mouse */
  --planet-scroll: 120px;             /* deslocamento do planeta ao rolar */
  --planet-bleed: calc(var(--planet-scroll) + var(--planet-par)); /* folga acima: o parallax nunca revela a borda da área */
  --dur-spin:    42s;                 /* uma volta completa do planeta */
  --planet-halo: var(--planet-top);   /* a área do planeta começa no topo da tela: a aura passa atrás da barra e esmaece, sem corte */
  /* aura escura (só mobile): halo suave acima do arco da foto, em screen */
  --planet-atm: radial-gradient(circle closest-side at 50% 50%,
    rgba(145,139,255,0) 84%, rgba(145,139,255,.30) 87%, rgba(145,139,255,.12) 93%, rgba(145,139,255,0) 98.5%);
  --dur-rim:     8s;                  /* luz percorrendo a borda (uma volta) */
  --dur-pulse:   5s;                  /* pulso da atmosfera */
  --dur-twinkle: 6s;                  /* cintilar das estrelas */
  --dur-planet-fade: 1400ms;          /* fade-in do canvas sobre a foto */
  --fs-hero-kicker:  clamp(.8125rem, .7rem + .5vw, 1.125rem);      /* "Solução em" 13→18 */
  --fs-hero-display: clamp(2.5rem, 1rem + 6.2vw, 7rem);            /* "Design & Estratégia" em Sora 40→112 */
  --hero-title-shift: clamp(var(--sp-6), 12vh, 7.5rem);            /* desce o título para dentro do disco */
  --hero-title-c: var(--c-white);     /* cor do display (tema claro redefine) */
  --hero-kicker-c: var(--c-text);
  --hero-amp-glow: rgba(200,197,255,.65);
  --dur-hero-in: 700ms;               /* entrada do título */
  --hero-in-stagger: 150ms;           /* atraso da 2ª linha (total 850 ms) */
  --dur-parallax: 1200ms;             /* suavização do parallax */
}

/* ---- Base ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font);
  font-size:var(--fs-base);
  font-weight:var(--fw-regular);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
picture{ display:contents; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:var(--fw-light); line-height:var(--lh-snug); }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
section{ position:relative; }

:focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:3px;
  border-radius:var(--sp-1);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--sp-4); top:var(--sp-4); z-index:200;
  padding:var(--sp-3) var(--sp-5);
  background:var(--c-white); color:var(--c-on-light);
  border-radius:var(--radius-pill);
  font-size:var(--fs-sm); font-weight:var(--fw-bold);
  transform:translateY(-200%);
}
.skip-link:focus-visible{ transform:none; }

.u{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.16em;
}

.section-title{
  font-size:var(--fs-xl);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-head);
  text-transform:uppercase;
}

/* ---- Botões ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:308px;
  padding:var(--sp-5) var(--sp-7);
  border-radius:var(--radius-pill);
  background:var(--c-white);
  color:var(--c-on-light);
  font-size:var(--fs-base);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-btn);
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover,
.btn:focus-visible{ background:var(--c-accent-tint); transform:translateY(var(--lift)); }
.btn:active{ transform:none; transition-duration:var(--dur-fast); }
.btn--center{ display:flex; width:max-content; margin:var(--sp-5) auto 0; }

.round-arrow{
  flex:none;
  width:var(--sp-6); height:var(--sp-6);
  display:grid; place-items:center;
  padding:0; border:0; border-radius:50%;
  background:var(--c-white); color:var(--c-on-light);
  transition:background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.round-arrow:hover,
.round-arrow:focus-visible{ background:var(--c-accent); transform:translateY(var(--lift)); }
.round-arrow:active{ transform:none; }
.round-arrow:disabled{ opacity:.35; cursor:default; background:var(--c-white); transform:none; }

/* ---- Entrada ao rolar (só opacity/transform; sem JS tudo fica visível) ---- */
.js .reveal{
  opacity:0;
  transform:translateY(var(--sp-5));
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay:calc(var(--i, 0) * 80ms);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
/* Some ao rolar para baixo (o projeto fica em tela cheia) e volta ao rolar para cima */
.site-header.is-hidden{ transform:translateY(-100%); }
.site-header.is-scrolled{ background:var(--c-bg); }
.header-inner{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  height:var(--header-h);
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--sp-5);
}
.nav-side{
  display:flex; gap:var(--sp-8);
  font-size:var(--fs-sm);
  letter-spacing:var(--ls-nav);
  text-transform:uppercase;
}
.nav-side a{ position:relative; padding:var(--sp-2) 0; transition:color var(--dur-fast) var(--ease-out); }
.nav-side a:hover{ color:var(--c-accent); }
.nav-side a::after{
  content:""; position:absolute; left:0; right:0; bottom:var(--sp-1);
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease-out);
}
.nav-side a:hover::after,
.nav-side a:focus-visible::after{ transform:scaleX(1); }
.menu-mobile a{ transition:color var(--dur-fast) var(--ease-out); }
.menu-mobile a:hover{ color:var(--c-accent); }
.nav-left{ justify-self:start; }
.nav-right{ justify-self:end; }
.logo{ justify-self:center; }
.logo img{ height:var(--sp-6); width:auto; }
.header-sun{
  position:absolute; right:calc(var(--gutter) - var(--sp-8)); top:50%;
  transform:translateY(-50%);
  color:var(--c-accent);
}

.nav-burger{
  display:none;
  position:absolute; right:var(--gutter); top:50%;
  width:var(--sp-7); height:var(--sp-7);
  margin-right:calc(-1 * var(--sp-3));
  transform:translateY(-50%);
  padding:var(--sp-3);
  background:none; border:0;
  flex-direction:column; justify-content:space-between;
}
.nav-burger span{
  display:block; height:2px; width:100%;
  background:var(--c-white); border-radius:2px;
  transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.site-header.is-open .nav-burger span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.site-header.is-open .nav-burger span:nth-child(2){ opacity:0; }
.site-header.is-open .nav-burger span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

.menu-mobile{
  display:none;
  flex-direction:column;
  padding:0 var(--gutter) var(--sp-5);
  background:var(--c-bg);
}
.menu-mobile a{
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--c-line);
  font-size:var(--fs-sm);
  letter-spacing:var(--ls-nav);
  text-transform:uppercase;
}
.site-header.is-open{ background:var(--c-bg); }
.site-header.is-open .menu-mobile{ display:flex; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--c-black); /* mesmo preto do arco enviado pelo cliente */
}
.hero-arc{
  position:absolute; z-index:-1;
  left:50%; top:var(--planet-top);
  width:var(--planet-w); max-width:none; height:auto;
  transform:translateX(-50%);
}

/* ---- Planeta vivo ----
   O JS só escreve as variáveis --hero-mx/--hero-my (mouse, -1..1) e --hero-sy
   (progresso do scroll, 0..1); o movimento em si é CSS (translate com transição),
   logo tudo roda no compositor: transform/opacity, zero layout, zero CLS.          */
.hero{ --hero-mx:0; --hero-my:0; --hero-sy:0; }
.hero-arc,
.hero-planet{
  translate:
    calc(var(--hero-mx) * var(--planet-par))
    calc(var(--hero-my) * var(--planet-par) + var(--hero-sy) * var(--planet-scroll));
  transition:translate var(--dur-parallax) var(--ease-out);
}
.hero-planet{
  position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:calc(var(--planet-top) - var(--planet-halo) - var(--planet-bleed)); bottom:0; /* até o fim do hero; sobe no mobile para a aura passar atrás da barra */
  width:var(--planet-w);
  transform:translateX(-50%);
  overflow:hidden;
}
/* Canvas WebGL (corpo do planeta girando + luz na borda), mesmo retângulo da foto.
   Entra com fade depois do load; a foto (LCP) fica visível desde o primeiro paint. */
.hero-planet canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity var(--dur-planet-fade) var(--ease-inout);
}
.hero-planet.is-on canvas{ opacity:1; }
/* Camadas circulares em CSS, nítidas em qualquer DPR: quadrado de raio 65% da largura da foto,
   centro em 50% / 57% (medido na foto); 100% do gradiente = raio do quadrado.
   ::before = fallback estático do tema claro (sem WebGL / movimento reduzido);
   ::after  = anel/atmosfera do tema claro e aura atrás da barra no mobile. */
.hero-planet::before,
.hero-planet::after{
  content:""; position:absolute; left:-15.1%; width:130.2%; aspect-ratio:1;
  top:calc(var(--planet-w) * -.081 + var(--planet-halo) + var(--planet-bleed));
  border-radius:50%; display:none; pointer-events:none;
}
.hero-planet::before{
  background:radial-gradient(circle closest-side at 50% 50%,
    var(--c-accent-tint) 0, #dcdaff 55%, var(--c-accent-light) 75%,
    var(--c-accent-deep) 77.2%, var(--c-accent) 81.5%, rgba(145,139,255,.45) 88%, rgba(145,139,255,0) 98.5%);
  transition:opacity var(--dur-planet-fade) var(--ease-inout);
}
.hero-planet::after{
  display:block; mix-blend-mode:screen; /* aura em todas as larguras (o claro troca para normal) */
  background:var(--planet-atm);
  animation:planet-pulse var(--dur-pulse) var(--ease-inout) infinite alternate;
}
@keyframes planet-pulse{ from{ opacity:.82; } to{ opacity:1; } }
.is-motion-paused .hero-planet::after,
.hero.is-off .hero-planet::after{ animation-play-state:paused; }
.hero-planet.is-on::before{ opacity:0; }
/* Estrelas: pontos de luz atrás do planeta (a foto, opaca, as cobre no corpo escuro) */
.hero-stars{
  position:absolute; z-index:-2; inset:0; pointer-events:none;
  translate:calc(var(--hero-mx) * var(--planet-par) * -.35) calc(var(--hero-my) * var(--planet-par) * -.35);
  transition:translate var(--dur-parallax) var(--ease-out);
}
.hero-stars::before,
.hero-stars::after{
  content:""; position:absolute; inset:0;
  background-repeat:no-repeat;
  animation:planet-twinkle var(--dur-twinkle) var(--ease-inout) infinite alternate;
}
.hero-stars::before{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(200,197,255,.8) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,.7) 0 .8px, transparent 1.5px),
    radial-gradient(circle, rgba(200,197,255,.9) 0 1.2px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.6) 0 .8px, transparent 1.4px),
    radial-gradient(circle, rgba(145,139,255,.9) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.8) 0 .9px, transparent 1.6px);
  background-size:4px 4px;
  background-position:8% 12%, 22% 6%, 36% 16%, 58% 5%, 71% 14%, 86% 9%, 94% 20%;
}
.hero-stars::after{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.8) 0 .9px, transparent 1.6px),
    radial-gradient(circle, rgba(200,197,255,.9) 0 1.1px, transparent 1.9px),
    radial-gradient(circle, rgba(255,255,255,.6) 0 .8px, transparent 1.4px),
    radial-gradient(circle, rgba(145,139,255,.8) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(200,197,255,.7) 0 .8px, transparent 1.5px);
  background-size:4px 4px;
  background-position:14% 22%, 29% 11%, 47% 8%, 64% 18%, 79% 4%, 91% 13%;
  animation-delay:calc(var(--dur-twinkle) / -2);
}
@keyframes planet-twinkle{
  from{ opacity:.25; }
  to  { opacity:1; }
}
/* Pausa: botão "Pausar animação", hero fora da tela ou aba oculta */
.is-motion-paused .hero-stars::before,
.is-motion-paused .hero-stars::after,
.hero.is-off .hero-stars::before,
.hero.is-off .hero-stars::after{ animation-play-state:paused; }
/* Título: kicker e display em Sora (fonte do cliente), assentado sobre o disco do planeta */
.hero-title{
  margin-top:var(--hero-title-shift);
  padding:0 var(--sp-4);
  text-align:center;
  font-weight:var(--fw-light);
  line-height:var(--lh-tight);
}
.hero-title > span{ display:block; }
.hero-title .l1{
  font-size:var(--fs-hero-kicker);
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--hero-kicker-c);
  margin-bottom:var(--sp-3);
  animation:hero-word-in var(--dur-hero-in) var(--ease-out) both;
}
.hero-title .l2{
  font-weight:var(--fw-light);
  font-size:var(--fs-hero-display);
  line-height:1.02; letter-spacing:-.03em;
  text-wrap:balance;
  color:var(--hero-title-c);
  animation:hero-word-in var(--dur-hero-in) var(--ease-out) both;
  animation-delay:var(--hero-in-stagger);
}
.hero-title .amp{
  color:var(--c-accent);
  animation:hero-amp-glow var(--dur-pulse) var(--ease-inout) infinite alternate;
}
@keyframes hero-word-in{
  0%  { opacity:0; transform:translateY(.45em); filter:blur(8px); }
  35% { opacity:1; }
  100%{ opacity:1; transform:none; filter:blur(0); }
}
@keyframes hero-amp-glow{
  from{ text-shadow:0 0 0 rgba(145,139,255,0); }
  to  { text-shadow:0 0 .45em var(--hero-amp-glow); }
}
.is-motion-paused .hero-title .amp,
.hero.is-off .hero-title .amp{ animation-play-state:paused; }
/* "Midmark®" de fundo: o desenho do próprio logotipo (assets/logos/midmark-wordmark.svg),
   aplicado como máscara e pintado com a cor do tema. Decorativo (aria-hidden). */
.hero-wordmark,
.footer-wordmark{
  display:block;
  width:var(--wordmark-w);
  aspect-ratio:1193.13 / 206.46;      /* proporção do SVG da palavra */
  margin-inline:auto;
  background:currentColor;
  -webkit-mask:url("../assets/logos/midmark-wordmark.svg") center / contain no-repeat;
          mask:url("../assets/logos/midmark-wordmark.svg") center / contain no-repeat;
  color:var(--c-ghost);
  pointer-events:none; user-select:none;
}
.hero-wordmark{ position:absolute; z-index:-1; left:0; right:0; bottom:-4vw; mix-blend-mode:lighten; }

/* ---- Passagem hero → projetos: fusão em degradê (sem corte seco) ----
   O fim do hero escurece até o preto do slide, e o topo do slide parte do mesmo preto. */
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; z-index:0;
  height:var(--hero-fade-h); pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, var(--hero-fade-mid) 55%, var(--hero-fade-to) 100%);
}
.hero-title{ position:relative; z-index:1; }
.showcase::before{
  content:""; position:absolute; inset:0 0 auto 0; z-index:2;
  height:var(--showcase-fade-h); pointer-events:none;
  background:linear-gradient(180deg, var(--hero-fade-to) 0%, transparent 100%);
}

/* ---- Cortina: o hero fica parado e o slide sobe por cima, com cantos arredondados.
   --cp (0→1) é o quanto o slide já cobriu o hero (definido no JS). ---- */
.curtain{ position:relative; }
.curtain > .hero{ position:sticky; top:0; z-index:0; }
.curtain > .showcase{ z-index:1; border-radius:var(--radius-curtain) var(--radius-curtain) 0 0; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:var(--curtain-dim-c);
  opacity:calc(var(--curtain-dim) * var(--cp, 0));
}
.hero-title{
  translate:0 calc(var(--cp, 0) * -6vh);
  scale:calc(1 - .05 * var(--cp, 0));
}

/* ---- Projetos em tela cheia ---- */
.showcase{
  scroll-margin-top:calc(-1 * var(--header-h));
  height:100vh; height:100svh; min-height:560px;
  background:var(--c-bg);
  overflow:hidden;
}
.showcase:focus{ outline:none; }
.showcase-track{ position:absolute; inset:0; }
.showcase-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-slow) var(--ease-inout), visibility 0s linear var(--dur-slow);
}
.showcase-slide.is-active{
  opacity:1; visibility:visible;
  transition:opacity var(--dur-slow) var(--ease-inout), visibility 0s;
}
.showcase-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.04);
  transition:transform var(--dur-slow) var(--ease-out);
}
.showcase-slide.is-active .showcase-bg{ transform:none; }
/* Foto provisória em baixa resolução: desfoca até chegar a definitiva */
.showcase-slide.is-lowres .showcase-bg{ filter:blur(7px); transform:scale(1.08); }
/* Véu uniforme, como na arte aprovada: a foto fica a ~50% para o título dominar */
.showcase-slide::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--c-veil);
}
.showcase-slide .showcase-tag,
.showcase-slide .btn{
  opacity:0; transform:translateY(var(--sp-3));
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.showcase-slide.is-active .showcase-tag,
.showcase-slide.is-active .btn{ opacity:1; transform:none; transition-delay:var(--dur-fast); }
.showcase-slide.is-active .btn{ transition-delay:calc(var(--dur-fast) + 80ms); }
.showcase-slide.is-active .btn:hover,
.showcase-slide.is-active .btn:focus-visible{ transform:translateY(var(--lift)); transition-delay:0s; }
.showcase-content{
  position:absolute; inset:0; z-index:2;
  display:grid;
  grid-template-rows:auto 1fr auto;
  justify-items:center; align-items:center;
  padding:clamp(var(--sp-7), 10vh, var(--sp-9)) var(--sp-5);
  text-align:center;
}
.showcase-tag{
  font-size:var(--fs-sm);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}
.showcase-title{
  font-size:var(--fs-2xl);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-head);
  text-transform:uppercase;
}
.btn--lg{ padding-top:var(--sp-5); padding-bottom:var(--sp-5); }
.showcase-content .btn--lg{ grid-row:3; }  /* título do slide fica só para leitores de tela */
.showcase-arrow{ position:absolute; top:50%; z-index:3; margin-top:calc(-1 * var(--sp-4)); }
.showcase-arrow--prev{ left:clamp(var(--sp-3), 7.4vw, 95px); }
.showcase-arrow--next{ right:clamp(var(--sp-3), 7.4vw, 95px); }

/* ---- Galeria animada ---- */
.portfolio{
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding-top:var(--sp-3);
  overflow:hidden;
}
.pf-row{ --h:clamp(200px, 17.5vw, 330px); overflow:hidden; }
.pf-track{ display:flex; width:max-content; }
.pf-row.is-animated .pf-track{ animation:pf-scroll var(--pf-dur, 80s) linear infinite; }
.portfolio:hover .pf-track,
.portfolio:focus-within .pf-track,
.is-motion-paused .pf-track{ animation-play-state:paused; }
@keyframes pf-scroll{ to{ transform:translateX(calc(-1 * var(--pf-shift, 50%))); } }
.pf-set{ display:flex; gap:var(--sp-3); padding-right:var(--sp-3); }
.pf-cell{
  position:relative; flex:none; margin:0;
  height:var(--h);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--c-surface);
}
.pf-cell.w-narrow{ aspect-ratio:429/348; }
.pf-cell.w-wide{ aspect-ratio:504/349; }
.pf-cell.w-slim{ aspect-ratio:168/349; }
.pf-cell img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out);
}
.pf-cell::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--c-veil-0) 40%, var(--c-veil-deep) 100%);
  opacity:0; transition:opacity var(--dur) var(--ease-out);
}
.pf-cell figcaption{
  position:absolute; left:var(--sp-4); right:var(--sp-4); bottom:var(--sp-4); z-index:2;
  opacity:0; transform:translateY(var(--sp-3));
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.pf-cell figcaption span{ display:block; font-size:var(--fs-sm); font-weight:var(--fw-bold); line-height:var(--lh-snug); }
.pf-cell figcaption small{ display:block; font-size:var(--fs-xs); color:var(--c-muted); }
.pf-cell:hover img,
.pf-cell:focus-within img{ transform:scale(1.06); }
.pf-cell:hover::after,
.pf-cell:focus-within::after,
.pf-cell:hover figcaption,
.pf-cell:focus-within figcaption{ opacity:1; transform:none; }
.w-slim figcaption{ display:none; }

.motion-toggle{
  align-self:flex-end;
  display:inline-flex; align-items:center; gap:var(--sp-2);
  margin-right:var(--gutter);
  padding:var(--sp-2) var(--sp-3);
  background:none; border:0;
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-nav);
  text-transform:uppercase;
  color:var(--c-dim);
  transition:color var(--dur-fast) var(--ease-out);
}
.motion-toggle:hover,
.motion-toggle:focus-visible{ color:var(--c-text); }
.motion-toggle .i-play,
.is-motion-paused .motion-toggle .i-pause{ display:none; }
.is-motion-paused .motion-toggle .i-play{ display:block; }

/* ==========================================================================
   SOBRE
   ========================================================================== */
.about{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  margin-top:var(--sp-3);
}
.about-text{
  padding:var(--sp-9) var(--sp-9) var(--sp-9) var(--gutter);
  max-width:calc(var(--container) / 2);
  justify-self:end;
  width:100%;
}
.about-text h2{
  font-size:var(--fs-xl);
  line-height:var(--lh-tight);
  margin-bottom:var(--sp-6);
}
.about-text p{
  color:var(--c-muted);
  font-size:var(--fs-md);
  font-weight:var(--fw-light);
  line-height:var(--lh-body);
  text-align:justify;
  hyphens:auto;
}
.about-text p + p{ margin-top:var(--sp-6); }
.about-photo{ width:100%; aspect-ratio:8/9; overflow:hidden; }
.about-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }

/* ==========================================================================
   METODOLOGIA
   ========================================================================== */
.methodology,
.services,
.faq{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.methodology{ padding-top:var(--sp-10); padding-bottom:var(--sp-9); }
.methodology .section-title{ margin-bottom:var(--sp-8); }

.steps-bar{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  margin-bottom:var(--sp-10);
}
.step-tab{
  display:flex; flex-direction:column; gap:var(--sp-4);
  padding:var(--sp-2) 0;
  background:none; border:0;
  text-align:left;
  font-size:var(--fs-md);
  color:var(--c-dim);
  transition:color var(--dur-fast) var(--ease-out);
}
.step-tab:nth-child(2){ margin-top:var(--sp-9); }
.step-tab:nth-child(3){ margin-top:calc(var(--sp-9) * 2); }
.step-tab:nth-child(4){ margin-top:calc(var(--sp-9) * 3); }
.step-num{ color:inherit; transition:color var(--dur-fast) var(--ease-out); }
.step-track{ display:block; height:var(--sp-2); background:var(--c-line); overflow:hidden; }
.step-fill{
  display:block; height:100%;
  background:var(--c-accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-slow) var(--ease-out);
}
.step-tab:hover,
.step-tab:focus-visible,
.step-tab.is-done{ color:var(--c-muted); }
.step-tab:hover .step-fill{ transform:scaleX(.12); }
.step-tab.is-active{ color:var(--c-text); }
.step-tab.is-active .step-num,
.step-tab.is-done .step-num{ color:var(--c-accent); }
.step-tab.is-active .step-fill,
.step-tab.is-done .step-fill{ transform:none; }

.step-panel{ outline-offset:var(--sp-3); }
.step-panel.is-active{ animation:fade-up var(--dur) var(--ease-out); }
@keyframes fade-up{ from{ opacity:0; transform:translateY(var(--sp-3)); } }
.step-panel h3{
  margin-bottom:var(--sp-7);
  font-size:var(--fs-xl);
  line-height:var(--lh-tight);
  text-transform:uppercase;
}
.step-h-num{ color:var(--c-accent); text-decoration:underline 2px; text-underline-offset:.14em; }
.step-h-name{ text-decoration:underline 2px; text-underline-offset:.14em; }
.step-item{ padding:var(--sp-6) 0; border-bottom:1px solid var(--c-line); }
.step-item h4{ margin-bottom:var(--sp-2); font-size:var(--fs-md); font-weight:var(--fw-bold); }
.step-item p{ max-width:72ch; color:var(--c-muted); font-weight:var(--fw-light); }

/* ==========================================================================
   SERVIÇOS
   ========================================================================== */
.services{ padding-top:var(--sp-9); padding-bottom:var(--sp-10); }
.services .section-title{ text-align:center; margin-bottom:var(--sp-7); }
.services-carousel{
  display:flex; align-items:center; gap:var(--sp-5);
  margin:0 calc(-1 * var(--sp-6));
}
.services-track{
  flex:1;
  display:flex; gap:var(--sp-4);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  border-radius:var(--radius);
}
.services-track::-webkit-scrollbar{ display:none; }
.service-card{
  scroll-snap-align:start;
  flex:0 0 calc((100% - 2 * var(--sp-4)) / 3);
  min-height:425px;
  display:flex; flex-direction:column;
  padding:var(--sp-8) var(--sp-6) var(--sp-6);
  background:var(--c-surface);
  border-radius:var(--radius);
  transition:transform var(--dur) var(--ease-out);
}
.service-card:hover{ transform:translateY(calc(-1 * var(--sp-1))); }
.service-icon{ transition:transform var(--dur) var(--ease-out); }
.service-card:hover .service-icon{ transform:translateY(var(--lift)); }
.service-icon{ width:72px; height:72px; margin:0 auto; color:var(--c-accent); }
.service-card h3{ margin:var(--sp-9) 0 var(--sp-3); font-size:var(--fs-lg); line-height:var(--lh-snug); }
.service-card p{ color:var(--c-muted); font-weight:var(--fw-light); line-height:var(--lh-body); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ padding-bottom:var(--sp-10); }
.faq .section-title{ margin-bottom:var(--sp-6); }
.faq-item{ border-bottom:1px solid var(--c-line); }
.faq-h{ font-size:inherit; }
.faq-question{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  padding:var(--sp-4) 0;
  background:none; border:0;
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  text-align:left;
  transition:color var(--dur-fast) var(--ease-out);
}
.faq-question:hover{ color:var(--c-accent); }
.faq-question:hover .faq-chevron{ color:var(--c-accent); }
.faq-chevron{ flex:none; color:var(--c-dim); transition:transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.faq-item.is-active .faq-chevron{ transform:rotate(180deg); color:var(--c-accent); }
.faq-answer{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--dur) var(--ease-out);
}
.faq-answer > div{ overflow:hidden; }
.faq-item.is-active .faq-answer{ grid-template-rows:1fr; }
.faq-answer p{
  max-width:64ch;
  padding-bottom:var(--sp-5);
  color:var(--c-muted);
  font-weight:var(--fw-light);
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{
  scroll-margin-top:calc(-1 * var(--header-h));
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  isolation:isolate;
}
.cta-bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.cta::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--c-scrim); }
.cta-content{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-7);
  padding:var(--sp-7) var(--sp-5);
  text-align:center;
}
.cta-content h2{
  font-size:var(--fs-2xl);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-head);
  text-transform:uppercase;
}
.cta-content .hl{ color:var(--c-accent); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  padding-top:var(--sp-8);
  background:var(--c-bg);
  overflow:hidden;
}
.marquee-label{
  margin-bottom:var(--sp-7);
  padding:0 var(--gutter);
  text-align:center;
  font-size:var(--fs-sm);
  font-weight:var(--fw-regular);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}
.marquee{
  display:flex; align-items:center;
  padding-bottom:var(--sp-8);
  border-bottom:1px solid var(--c-line);
  overflow:hidden;
}
.marquee-track{
  flex:none;
  display:flex; align-items:center; gap:var(--sp-8);
  padding-right:var(--sp-8);
  animation:marquee 60s linear infinite;
}
.marquee:hover .marquee-track,
.is-motion-paused .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-100%); } }
.brand-img{ flex:none; width:auto; height:28px; filter:brightness(0) invert(1); }
.brand-img--thin{ height:20px; }

.footer-main{
  max-width:var(--container);
  margin:0 auto;
  padding:var(--sp-9) var(--gutter) var(--sp-5);
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-5);
  flex-wrap:wrap;
}
.footer-contact{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); font-size:var(--fs-md); font-weight:var(--fw-light); }
.footer-contact > a{ transition:color var(--dur-fast) var(--ease-out); }
.footer-contact > a:hover,
.footer-contact > a:focus-visible{ color:var(--c-accent); }
.footer-social{ display:flex; gap:var(--sp-2); margin-top:var(--sp-4); }
.footer-social a{
  width:var(--sp-6); height:var(--sp-6);
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--c-white); color:var(--c-on-light);
  transition:background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer-social a:hover,
.footer-social a:focus-visible{ background:var(--c-accent); transform:translateY(var(--lift)); }
.footer-copy{ font-size:var(--fs-md); font-weight:var(--fw-light); }
.footer-legal{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-1); text-align:right; }
.footer-mark{ font-size:var(--fs-sm); font-weight:var(--fw-light); color:var(--c-muted); }

.footer-wordmark{
  margin-top:var(--sp-5);
  margin-bottom:-4vw;
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:1180px){
  .nav-side{ gap:var(--sp-5); }
  .header-sun{ display:none; }
}

@media (max-width:1100px){
  .nav-side{ display:none; }
  .nav-burger{ display:flex; }
  .header-inner{ grid-template-columns:auto 1fr; }
  .logo{ justify-self:start; }
}

@media (max-width:920px){
  .about{ grid-template-columns:1fr; }
  .about-text{ max-width:none; padding:var(--sp-9) var(--gutter) var(--sp-7); }
  .about-photo{ aspect-ratio:1; }
  .steps-bar{ grid-template-columns:1fr 1fr; gap:var(--sp-5) var(--sp-5); margin-bottom:var(--sp-8); }
  .step-tab:nth-child(n){ margin-top:0; }
  .service-card{ flex-basis:calc((100% - var(--sp-4)) / 2); }
}

@media (max-width:760px){
  :root{
    --header-h:72px;
    --planet-halo: calc(var(--planet-w) * .09);
    --planet-top: calc(var(--header-h) - var(--planet-w) * .045); /* o brilho do arco entra atrás da barra */
  }
  .hero-planet::after{ display:block; mix-blend-mode:screen; }
  .nav-side{ display:none; }
  .nav-burger{ display:flex; }
  .header-inner{ grid-template-columns:auto 1fr; }
  .logo{ justify-self:start; }
  .logo img{ height:var(--sp-5); }

  .hero-title{ margin-top:var(--sp-8); }
  .showcase-arrow--prev{ left:var(--sp-3); }
  .showcase-arrow--next{ right:var(--sp-3); }
  .showcase-title{ padding:0 var(--sp-7); }
  .btn{ min-width:0; padding:var(--sp-4) var(--sp-6); font-size:var(--fs-sm); }

  .pf-cell figcaption{ opacity:1; transform:none; }
  .pf-cell::after{ opacity:1; }

  .about-text p{ text-align:left; font-size:var(--fs-base); }
  .methodology{ padding-top:var(--sp-9); padding-bottom:var(--sp-7); }
  .services{ padding-top:var(--sp-7); padding-bottom:var(--sp-9); }
  .faq{ padding-bottom:var(--sp-9); }
  .marquee-label{ letter-spacing:var(--ls-nav); }
  .step-tab{ font-size:var(--fs-base); }
  .services-carousel{ margin:0; gap:var(--sp-3); }
  .carousel-arrow{ display:none; }
  .service-card{ flex-basis:82%; min-height:0; padding:var(--sp-7) var(--sp-5) var(--sp-5); }
  .service-icon{ width:56px; height:56px; }
  .service-card h3{ margin-top:var(--sp-6); }
  .faq-question{ font-size:var(--fs-base); }

  .footer-main{ flex-direction:column; align-items:flex-start; padding-top:var(--sp-8); }
  .footer-copy{ font-size:var(--fs-sm); }
  .footer-legal{ align-items:flex-start; text-align:left; }
  .footer-mark{ font-size:var(--fs-xs); }
  .brand-img{ height:22px; }
  .brand-img--thin{ height:16px; }
}

/* ==========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .hero-title{ translate:none; scale:none; }
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
  }
  .services-track{ scroll-behavior:auto; }
  .pf-row{ overflow-x:auto; scrollbar-width:none; }
  .pf-row::-webkit-scrollbar{ display:none; }
  .pf-row .pf-track,
  .marquee-track{ animation:none !important; }
  .marquee{ overflow-x:auto; scrollbar-width:none; }
  .motion-toggle{ display:none; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .showcase-bg{ transform:none; }
  /* Planeta estático: arco como na foto, sem camadas nem parallax */
  .hero-planet canvas,
  .hero-stars,
  .hero-planet{ display:none; } /* tema claro reexibe o .hero-planet (fallback estático) */
  .hero-arc{ translate:none; transition:none; }
  .hero-title .l1,
  .hero-title .l2,
  .hero-title .amp{ animation:none; }
  .hero-planet::after{ animation:none; }
  .service-card:hover,
  .btn:hover,
  .round-arrow:hover,
  .footer-social a:hover{ transform:none; }
}