/* ============================================================
   LUCAS PESSOA · PORTFÓLIO
   Head: clara e chapada, texto preto, figura com os ícones das
         ferramentas orbitando em 3D conforme o mouse.
   Corpo: escuro, linguagem Apple (vidro, raio grande, neutro).
   Tudo que é cor/fonte/ritmo mora no :root abaixo.
   ============================================================ */

:root{
  /* superfícies */
  --bg:        #000000;
  --panel:     rgba(255,255,255,.055);
  --panel-2:   rgba(255,255,255,.085);
  --hair:      rgba(255,255,255,.10);
  --hair-soft: rgba(255,255,255,.06);

  /* texto */
  --text:      #F5F5F7;
  --muted:     #8E8E93;
  --dim:       #636366;

  /* destaque */
  --accent:    #0A84FF;
  --accent-2:  #64D2FF;

  /* degradê da head */
  --void:   #01030E;
  --violet: #5B2BD6;
  --cyan:   #1FA2FF;
  --pop:    #FFD60A;   /* o ponto amarelo, único respiro quente */

  /* tipografia */
  --display: 'Inter', 'Segoe UI', system-ui, sans-serif;             /* grotesca pesada */
  --serif:   'Playfair Display', Georgia, 'Times New Roman', serif;  /* itálica */
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
          'Inter', system-ui, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Mono', monospace;

  /* ritmo */
  --wrap: 1180px;
  --gut:  clamp(20px, 5vw, 56px);
  --sec:  clamp(90px, 13vh, 170px);
  --r:    18px;
  --r-lg: 26px;

  --ease:   cubic-bezier(.32,.72,0,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.6;
  letter-spacing:-.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; font-weight:600; line-height:1.05; letter-spacing:-.035em; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ============================================================ MENU BAR */
.menubar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:38px; padding-inline:clamp(14px,2.4vw,26px);
  background:rgba(20,20,22,.55);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border-bottom:1px solid var(--hair-soft);
  font-size:13px; letter-spacing:-.005em;
}
.menubar__name{ font-weight:600; white-space:nowrap; }
.menubar__menu{ display:flex; align-items:center; gap:18px; }
.menubar__menu a{ color:var(--muted); transition:color .2s var(--ease); white-space:nowrap; }
.menubar__menu a:hover,.menubar__menu a.is-active{ color:var(--text); }

/* ============================================================ HEAD
   Fundo chapado, texto preto à esquerda, figura à direita com os
   ícones das ferramentas orbitando nela em 3D.
   ============================================================ */
.head{
  position:relative;
  /* 92svh, não 100: a faixa escura da próxima seção fica aparecendo
     no rodapé. É o mesmo truque das fileiras cortadas da Netflix:
     a borda incompleta é o que diz "tem mais coisa aqui". */
  min-height:92svh;
  display:flex; align-items:center;
  padding:120px var(--gut);
  overflow:hidden;
  background:#F0F0EE;
  text-align:left;
}

.head__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin-inline:auto;
}
/* segura o texto na metade esquerda, longe da órbita */
.head__inner > *{ max-width:min(520px, 43vw); }


/* ------------------------------------------------------- O NOME */
.bigname{
  font-size:clamp(34px,5vw,66px);
  line-height:1.06;
  letter-spacing:-.052em;
  color:#0A0A0A;
}
.bigname__a{ font-family:var(--display); font-weight:900; letter-spacing:-.058em; }
.bigname__b{
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:1.07em; letter-spacing:-.03em;
}

.head__roles{
  margin-top:clamp(18px,2.2vw,26px);
  font-family:var(--mono); font-size:clamp(9.5px,.95vw,11.5px);
  letter-spacing:.15em; text-transform:uppercase; color:#5A5A61;
}
/* rolo vertical das especialidades, um nome de cada vez, o novo
   entrando por cima, como o tambor de um contador */
.roll{
  /* altura de uma linha, compartilhada com o JS: o deslocamento do
     rolo é múltiplo dela. Em % não funciona, a porcentagem no
     translateY é calculada sobre a altura do próprio elemento, que
     aqui é a lista inteira, não um item. */
  --roll-h: 1.5em;

  display:inline-block; overflow:hidden;
  height:var(--roll-h); line-height:var(--roll-h);
  vertical-align:bottom;
}
.roll__list{
  display:block;
  transition:transform .42s cubic-bezier(.22,1,.36,1);
}
.roll__list.is-instant{ transition:none; }
.roll__item{ display:block; height:var(--roll-h); line-height:var(--roll-h); white-space:nowrap; }

.head__lead{
  margin-top:16px;
  color:#4E4E55; font-size:clamp(14.5px,1.2vw,16.5px);
}
.head__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:clamp(26px,3vw,36px); }

/* botões para fundo claro */
.btn--dark{ background:#0A0A0A; color:#fff; }
.btn--dark:hover{ background:#26262C; transform:scale(1.03); }
.btn--outline{ border-color:rgba(0,0,0,.24); color:#0A0A0A; }
.btn--outline:hover{ border-color:#0A0A0A; background:rgba(0,0,0,.04); transform:scale(1.03); }

/* ============================================================ ÓRBITA */
.orbit{
  /* A caixa tem exatamente a altura da figura e encosta no rodapé
     da head. Assim a figura fica rente à faixa preta, sem sobra
     branca, e continua no centro do espaço 3D, que é o que
     impede ela de balançar junto com a rotação.

     Medido no arquivo: 13,7% do topo é transparente e a base tem 0.
     Então --fig não é a altura da pessoa, é 13,7% maior que ela.
     Por isso o valor pode passar de 90vh sem a cabeça chegar perto
     da barra de topo. */
  --fig: min(92vh, 1120px);

  position:absolute; z-index:1;
  right:9%; bottom:0;
  width:min(44vw,780px); height:var(--fig);
  perspective:1400px;
}
.orbit__space{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  /* o JS escreve estes dois conforme o mouse */
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}

/* a figura, no centro do espaço 3D (z = 0) */
.cut{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) rotateY(calc(-1 * var(--ry,0deg))) rotateX(calc(-1 * var(--rx,0deg)));
  transform-style:preserve-3d;
  display:block; pointer-events:none;
}
/* max-width:none anula a regra global das imagens: com altura fixa,
   ela encolheria a largura e achataria a figura */
.cut img{
  height:var(--fig);
  width:auto; max-width:none;
  display:block;
}

/* os ícones, posição e contra-rotação vêm do JS */
.orbit__icon{
  position:absolute; left:50%; top:50%;
  width:clamp(44px,4.6vw,72px); height:auto;
  margin:calc(clamp(44px,4.6vw,72px) / -2);
  border-radius:22%;
  will-change:transform,opacity;
  pointer-events:none;
}

/* ------------------------------------------ indicador de rolagem
   Um traço vertical com um segmento que desce em loop. Alinhado
   à mesma coluna do texto, não ao centro da tela: no centro ele
   encostaria na figura. */
.scrollcue-wrap{
  position:absolute; z-index:3;
  left:0; right:0; bottom:26px;
  padding-inline:var(--gut);
  pointer-events:none;
}
.scrollcue-grid{ max-width:var(--wrap); margin-inline:auto; }

.scrollcue{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:10px;
  color:#6B6B70; pointer-events:auto;
  transition:color .3s var(--ease);
}
.scrollcue:hover{ color:#0A0A0A; }

.scrollcue__label{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase;
}
.scrollcue__line{
  position:relative; display:block;
  width:1px; height:46px;
  background:rgba(0,0,0,.14);
  overflow:hidden;
}
.scrollcue__line i{
  position:absolute; left:0; top:0;
  width:1px; height:15px;
  background:currentColor;
  animation:cueTravel 2s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cueTravel{
  from{ transform:translateY(-15px); }
  to  { transform:translateY(46px); }
}

/* ------------------------------------------- barra de topo clara
   Nasce clara sobre a head e escurece ao entrar no corpo do site. */
.menubar{
  background:rgba(240,240,238,.82);
  border-bottom-color:rgba(0,0,0,.08);
  color:#0A0A0A;
}
.menubar .menubar__menu a{ color:#6B6B70; }
.menubar .menubar__menu a:hover,
.menubar .menubar__menu a.is-active{ color:#0A0A0A; }

.menubar.is-dark{
  background:rgba(20,20,22,.55);
  border-bottom-color:var(--hair-soft);
  color:var(--text);
}
.menubar.is-dark .menubar__menu a{ color:var(--muted); }
.menubar.is-dark .menubar__menu a:hover,
.menubar.is-dark .menubar__menu a.is-active{ color:var(--text); }

/* ------------------------------------------------------- botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 20px; border-radius:100px; border:1px solid transparent;
  font-family:var(--sans); font-size:13.5px; font-weight:500; letter-spacing:-.005em;
  cursor:pointer; white-space:nowrap;
  transition:transform .3s var(--spring), background .25s var(--ease),
             border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--sm{ padding:9px 17px; font-size:13px; }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:#3D9BFF; transform:scale(1.035); box-shadow:0 8px 24px rgba(10,132,255,.34); }
.btn--glass{
  background:var(--panel-2); color:var(--text); border-color:var(--hair);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.btn--glass:hover{ background:rgba(255,255,255,.14); transform:scale(1.035); }
.btn:active{ transform:scale(.98); }

/* ============================================================ SEÇÕES */
.section{ padding-block:var(--sec); position:relative; }
.section + .section{ border-top:1px solid var(--hair-soft); }

.tc{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); margin-bottom:30px;
  display:flex; align-items:center; gap:14px;
}
.tc::after{ content:''; height:1px; flex:1; background:var(--hair-soft); max-width:200px; }

.h2{ font-size:clamp(32px,4.6vw,58px); font-weight:600; letter-spacing:-.04em; }
.h2 em{ font-style:normal; color:var(--dim); }

.section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.section__note{ font-size:13px; color:var(--dim); }

/* ------------------------------------------------------------ sobre */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start; }
.about__body{ display:grid; gap:16px; color:var(--muted); max-width:56ch; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:clamp(44px,6vw,76px); }
.stats li{
  padding:24px 22px; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--hair-soft);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.stats strong{
  display:block; font-size:clamp(30px,3.6vw,44px); font-weight:600;
  line-height:1; letter-spacing:-.04em; margin-bottom:9px;
}
.stats span{ font-size:13px; color:var(--muted); line-height:1.45; display:block; }

/* --------------------------------------------------------- serviços */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:48px; }
.card{
  padding:clamp(24px,2.6vw,32px); border-radius:var(--r-lg);
  background:var(--panel); border:1px solid var(--hair-soft);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  display:flex; flex-direction:column; gap:12px;
  transition:background .35s var(--ease), transform .45s var(--ease), border-color .35s;
}
.card:hover{ background:var(--panel-2); border-color:var(--hair); transform:translateY(-3px); }
.card__n{ font-family:var(--mono); font-size:11.5px; color:var(--dim); letter-spacing:.06em; }
.card h3{ font-size:clamp(20px,2vw,26px); font-weight:600; letter-spacing:-.03em; }
.card p{ color:var(--muted); font-size:14.5px; }
.card ul{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:14px; }
.card ul li{
  font-size:11.5px; border:1px solid var(--hair-soft); border-radius:100px;
  padding:5px 11px; color:var(--muted); background:rgba(255,255,255,.03);
}
/* ------------------------------------------- nota e programas
   A estrela é uma máscara SVG, não um caractere: assim a forma não
   muda de fonte para fonte e a cor sai do mesmo token do resto. */
.card__top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

.rating{
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.85 6.18 6.75.78-5.02 4.6 1.36 6.66L12 17.55l-5.94 3.27 1.36-6.66-5.02-4.6 6.75-.78z'/%3E%3C/svg%3E");
  display:inline-flex; align-items:center; gap:3px;
}
.rating i{
  display:block; flex:none;
  width:12px; height:12px;
  background:rgba(255,255,255,.15);
  -webkit-mask:var(--star) center/contain no-repeat;
          mask:var(--star) center/contain no-repeat;
}
.rating i.on{ background:var(--accent-2); }
.rating b{
  font-family:var(--mono); font-size:10.5px; font-weight:400;
  letter-spacing:.06em; color:var(--dim); margin-left:7px;
}

.card__tools{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:2px;
}
/* Ferramentas que não são software: mesma caixa dos ícones de app,
   mas em grafite, a cor separa hardware de programa sem legenda. */
.card__tools .tool{
  display:grid; place-items:center;
  width:27px; height:27px; border-radius:26%;
  background:linear-gradient(160deg,#3C3C42,#1B1B1F);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
  transition:transform .3s var(--spring);
}
.card__tools .tool:hover{ transform:translateY(-3px) scale(1.06); }
.card__tools .tool svg{ width:16px; height:16px; }

.card__tools img{
  width:27px; height:27px; border-radius:26%;
  transition:transform .3s var(--spring);
}
.card__tools img:hover{ transform:translateY(-3px) scale(1.06); }

.card--cta{
  background:linear-gradient(160deg, rgba(10,132,255,.16), rgba(10,132,255,.04));
  border-color:rgba(10,132,255,.24); justify-content:center;
}
.card--cta .btn{ align-self:flex-start; margin-top:6px; }

/* --------------------------------------------------------- destaques
   Três peças abertas antes das pastas. A pasta funciona bem como
   acervo, mas ela é uma caixa fechada: pede um clique antes de dar
   qualquer motivo para clicar. Aqui o trabalho aparece primeiro, e a
   pasta vira o passo seguinte de quem já se interessou.

   O cartão reaproveita o tombo 3D e a prévia em vídeo dos cartões do
   anel, mesmas classes .ring__play e .ring__prev, mesmo JS. */
/* A primeira peça é a puxada: ganha uma coluna mais larga. Não é só
   hierarquia, é o que permite mostrar uma prancha deitada inteira
   sem que ela boie num cartão alto e estreito. Todos os cartões têm
   a mesma altura, então a fileira fecha alinhada mesmo com as peças
   tendo proporções diferentes. */
.feat{
  display:grid; grid-template-columns:1.32fr 1fr 1fr;
  gap:clamp(14px,2vw,26px); margin-top:44px;
}

.feat__item{ margin:0; cursor:pointer; perspective:1000px; }

.feat__card{
  position:relative; height:clamp(330px,32vw,470px);
  border-radius:var(--r); overflow:hidden;
  background:#17171A;
  box-shadow:0 20px 44px rgba(0,0,0,.5);
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.feat__item:hover .feat__card{
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-6px);
  box-shadow:0 34px 70px rgba(0,0,0,.66);
}
.feat__item:focus-visible{ outline:none; }
.feat__item:focus-visible .feat__card{
  box-shadow:0 0 0 2px var(--accent-2), 0 30px 64px rgba(0,0,0,.6);
}

/* o mesmo brilho que segue o cursor nos cartões do anel */
.feat__card::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(circle 60% at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.34), transparent 62%);
  opacity:0; transition:opacity .35s var(--ease);
  mix-blend-mode:overlay;
}
.feat__item:hover .feat__card::after{ opacity:1; }

.feat__card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .2s var(--ease);
}
/* peça deitada não entra no corte 3:4 sem perder metade do logo:
   aparece inteira, sobre a cor da própria arte */
.feat__card--inteiro img{ object-fit:contain; padding:6%; }

/* com a prévia rodando o selo de play sai de cena, igual no anel */
.feat__item:hover .ring__play{ opacity:0; }

.feat__cap{ margin-top:14px; }
.feat__kicker{
  display:block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  margin-bottom:7px;
}
.feat__title{
  display:block; font-size:clamp(15px,1.5vw,18px); font-weight:600;
  letter-spacing:-.03em; transition:color .3s var(--ease);
}
.feat__item:hover .feat__title{ color:var(--accent-2); }

/* fecha os destaques e anuncia o acervo */
.feat__sep{
  display:flex; align-items:center; gap:16px;
  margin-top:clamp(46px,6vw,74px);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}
.feat__sep::before,.feat__sep::after{
  content:''; height:1px; flex:1; background:var(--hair-soft);
}

/* a faixa de destaques já dá o respiro: a pasta não precisa do dela */
.feat__sep + .folders{ margin-top:34px; }

/* -------------------------------------------------------- trabalhos
   Pastas: fundo escuro, folhas brancas e uma aba frontal fosca.
   O efeito depende de backdrop-filter na aba, é ela que borra as
   folhas atrás, do mesmo jeito que no ícone de referência. */
.folders{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2.2vw,30px); margin-top:48px;
}

.folder__link{
  display:block; width:100%;
  background:none; border:0; padding:0; margin:0;
  font:inherit; color:inherit; text-align:center;
  cursor:pointer;
}

.folder__stage{
  position:relative; display:block;
  aspect-ratio:5/4;
  transition:transform .5s var(--ease);
}
.folder__link:hover .folder__stage{ transform:translateY(-4px); }

/* o corpo da pasta */
.folder__back{
  position:absolute; left:6%; right:6%; top:15%; bottom:5%;
  background:linear-gradient(162deg,#2C2C31 0%,#171719 60%,#101012 100%);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 20px 44px rgba(0,0,0,.55);
  transition:box-shadow .5s var(--ease);
}
.folder__link:hover .folder__back{ box-shadow:0 28px 56px rgba(0,0,0,.62); }

/* as folhas, cada uma vira uma miniatura quando receber um <img> */
.folder__sheet{
  position:absolute; left:19%; width:62%; top:9%; height:56%;
  background:#F2F2EF;
  border-radius:7px;
  box-shadow:0 6px 16px rgba(0,0,0,.34);
  overflow:hidden;
  transform-origin:50% 100%;
  transition:transform .55s var(--ease);
}
.folder__sheet img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* repouso: leque discreto */
.s1{ transform:translate(-13%,6%)  rotate(-6deg); }
.s2{ transform:translate(0,2%)     rotate(-1deg); }
.s3{ transform:translate(13%,5%)   rotate(6deg);  }

/* hover: sobem pouco e continuam dentro da pasta */
.folder__link:hover .s1{ transform:translate(-15%,-3%) rotate(-8deg); }
.folder__link:hover .s2{ transform:translate(0,-7%)    rotate(-1deg); }
.folder__link:hover .s3{ transform:translate(15%,-4%)  rotate(8deg);  }

/* a aba da frente: vidro fosco por cima das folhas */
.folder__front{
  position:absolute; left:6%; right:6%; top:43%; bottom:5%;
  border-radius:14px;
  background:linear-gradient(172deg, rgba(255,255,255,.19), rgba(255,255,255,.06));
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 -1px 0 rgba(255,255,255,.2) inset, 0 14px 30px rgba(0,0,0,.4);
}

.folder__name{
  margin-top:16px;
  font-size:clamp(14px,1.4vw,17px); font-weight:600; letter-spacing:-.025em;
  transition:color .3s var(--ease);
}
.folder__link:hover .folder__name{ color:var(--accent-2); }

/* ---------------------------------------------------------- processo
   Arco de etapas guiado pela rolagem.

   A seção é alta e o miolo fica sticky: enquanto a página rola, o
   conteúdo fica parado e o arco gira. Cada etapa consome --per de
   rolagem, então a altura total é 100svh + (n-1) * --per.
   -------------------------------------------------------------- */
.procx{
  --per:  42vh;                /* rolagem gasta por etapa */
  --numH: clamp(52px, 8.4vw, 112px);   /* altura do número, o detalhe se alinha por ela */
  --R:   min(54vh, 520px);     /* raio do arco */
  padding-block:0;
  height:calc(100svh + 4 * var(--per));
}
.procx__sticky{
  position:sticky; top:0;
  height:100svh;
  overflow:hidden;
}
/* Moldura com a mesma largura e as mesmas margens de .wrap. É ela
   que ancora o cabeçalho, o aviso e o contador, antes eles se
   prendiam à borda da tela, e não à coluna das outras seções. */
.procx__frame{
  position:relative; height:100%;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gut);
  display:flex; flex-direction:column; justify-content:center;
}

/* --------------------------------------------------------- o palco */
.procx__stage{
  position:relative;
  min-height:min(62vh,500px);
}

/* o traço do arco: um círculo enorme com o centro fora da tela,
   à esquerda. Só a borda direita dele atravessa o palco. */
.procx__ring{
  position:absolute; left:0; top:50%;
  width:calc(var(--R) * 2); height:calc(var(--R) * 2);
  margin:calc(var(--R) * -1) 0 0 calc(var(--R) * -1);
  border-radius:50%;
  border:1px solid var(--hair-soft);
  pointer-events:none;
}

/* o conjunto gira; o JS escreve --rot */
.procx__arc{
  position:absolute; left:0; top:50%;
  width:0; height:0;
  transform:rotate(var(--rot,0deg));
  transform-origin:0 0;
  /* o JS só entrega ângulos de etapa inteira; a suavização do
     salto de um número para o outro é esta transição */
  transition:transform .62s var(--ease);
}

/* Cada número é posto no arco por rotate + translateX. Sem
   contra-rotação: é justamente a inclinação que faz os números
   acompanharem a curva, como na referência.

   ATENÇÃO à ordem: o translate(-50%,-50%) tem de vir ANTES do
   rotate. Depois dele, a própria centralização gira junto e o
   número sai do ponto do arco, o erro cresce com o ângulo, some
   na etapa 01 (0°) e chega a ~125px na 05. */
.procx__num{
  position:absolute; left:0; top:0;
  transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--R)) scale(var(--s,1));
  font-family:var(--display); font-weight:900;
  font-size:var(--numH);
  line-height:1; letter-spacing:-.055em;
  color:var(--text); opacity:var(--o,.09);
  white-space:nowrap; user-select:none;
  transition:transform .62s var(--ease), opacity .45s var(--ease);
}
.procx__dot{
  position:absolute; top:50%; left:-26px;
  width:7px; height:7px; border-radius:50%;
  background:var(--hair); transform:translateY(-50%);
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.procx__num.is-on .procx__dot{
  background:var(--accent-2);
  box-shadow:0 0 0 4px rgba(100,210,255,.14);
}

/* ------------------------------------------------------- o detalhe */
/* O bloco de texto fica centrado no número, ao lado dele. O
   desconto de .045 é óptico: com line-height 1, os algarismos ficam
   um pouco acima do centro da própria caixa, então centrar caixa
   com caixa deixaria o texto visualmente baixo. */
.procx__detail{
  position:absolute;
  top:calc(50% - var(--numH) * .045);
  transform:translateY(-50%);
  left:calc(var(--R) + clamp(40px,7vw,120px));
  width:min(430px, calc(100% - var(--R) - clamp(40px,7vw,120px)));
}
.procx__detail h3{
  font-size:clamp(24px,3vw,38px); font-weight:600; letter-spacing:-.035em;
}
.procx__desc{
  margin-top:14px;
  color:var(--muted); font-size:clamp(14.5px,1.2vw,16.5px); line-height:1.6;
}
.procx__out{
  margin-top:18px; padding-top:16px;
  border-top:1px solid var(--hair-soft);
  color:var(--dim); font-size:13.5px; line-height:1.55;
}
.procx__out b{ color:var(--accent-2); font-weight:500; }

/* a troca de etapa é um respiro curto, não um corte seco */
.procx__detail.is-swap{ opacity:0; transform:translateY(calc(-50% + 10px)); }
.procx__detail{ transition:opacity .3s var(--ease), transform .3s var(--ease); }

/* O topo mergulha no preto: o traço do arco e os números de cima
   emergem da escuridão em vez de começarem do nada. */
.procx__fade{
  position:absolute; z-index:2; left:0; right:0; top:0;
  height:42%;
  background:linear-gradient(to bottom,
    #000 0%, #000 26%, rgba(0,0,0,.86) 52%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
/* o mesmo degradê espelhado no rodapé: o 05 mergulha no preto em
   vez de ser cortado em linha reta pelo overflow */
.procx__fade--b{
  top:auto; bottom:0; height:34%;
  background:linear-gradient(to top,
    #000 0%, #000 18%, rgba(0,0,0,.82) 46%, rgba(0,0,0,0) 100%);
}

.procx__head{
  position:absolute; z-index:3;
  left:var(--gut); right:var(--gut);
  top:var(--sec);          /* mesmo respiro de topo das outras seções */
}

/* ------------------------------------------ indicador de rolagem */
.procx__cue{
  z-index:3;
  /* canto direito, empilhado: o texto em cima e o traço descendo
     embaixo, a direção do traço já diz para onde rolar */
  position:absolute; right:var(--gut); bottom:clamp(52px,8vh,86px);
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
  transition:opacity .6s var(--ease);
}
.procx__cue.is-gone{ opacity:0; }
.procx__cueLine{
  position:relative; display:block;
  width:1px; height:34px; background:var(--hair-soft); overflow:hidden;
}
.procx__cueLine i{
  position:absolute; left:0; top:0; width:1px; height:12px;
  background:var(--accent-2);
  animation:procCue 1.9s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes procCue{ from{ transform:translateY(-12px) } to{ transform:translateY(34px) } }

/* medidor: as marcas dizem quantas etapas faltam mesmo depois de o
   aviso de rolagem sair de cena */
.procx__meter{
  position:absolute; z-index:3; left:var(--gut); bottom:clamp(52px,8vh,86px);
  display:flex; align-items:center; gap:14px;
}
.procx__ticks{ display:flex; align-items:center; gap:6px; }
.procx__ticks i{
  display:block; width:22px; height:2px; border-radius:2px;
  background:var(--hair);
  transition:background .45s var(--ease), width .45s var(--ease);
}
.procx__ticks i.is-on{ background:var(--accent-2); }
.procx__ticks i.is-now{ width:34px; }
.procx__count{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--dim); font-variant-numeric:tabular-nums;
}
/* na última etapa o aviso volta, agora apontando para fora da seção */
.procx__cue.is-end{ color:var(--accent-2); }

/* ------------------------------------------------------- estreito */
@media (max-width:900px){
  .procx{ --R: min(40vh, 320px); --per: 40vh; }
  .procx__num{ font-size:clamp(40px,11vw,72px); }
  .procx__detail{
    position:static; transform:none; width:100%;
    margin-top:clamp(24px,5vh,44px);
  }
  .procx__detail.is-swap{ transform:translateY(10px); }
  .procx__stage{ min-height:auto; padding-bottom:clamp(20px,4vh,40px); }
  .procx__ring,.procx__arc{ top:min(30vh,240px); }
  .procx__stage{ min-height:min(46vh,340px); }
}

@media (prefers-reduced-motion:reduce){
  .procx{ height:auto; }
  .procx__sticky{ position:static; height:auto; }
  .procx__cueLine i{ animation:none; }
}

/* ---------------------------------------------------------- contato */
.contact{ text-align:center; }
.contact__title{ font-size:clamp(38px,7vw,88px); font-weight:600; line-height:1.02; letter-spacing:-.045em; }
.contact__title em{ font-style:normal; color:var(--dim); }
.contact__lead{ color:var(--muted); max-width:46ch; margin:24px auto 0; font-size:clamp(15px,1.3vw,17px); }
.contact__links{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin-top:clamp(44px,5.5vw,68px); text-align:left;
}
.clink{
  padding:22px; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--hair-soft);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  transition:background .3s var(--ease), transform .4s var(--ease), border-color .3s;
}
.clink:hover{ background:var(--panel-2); border-color:var(--hair); transform:translateY(-3px); }
.clink__k{ display:block; font-size:12px; color:var(--dim); margin-bottom:8px; }
.clink__v{ display:block; font-size:clamp(14px,1.4vw,17px); font-weight:500; letter-spacing:-.02em; transition:color .3s; }
.clink:hover .clink__v{ color:var(--accent-2); }

/* ---------------------------------------------------------- rodapé */
.footer{ border-top:1px solid var(--hair-soft); padding-block:28px; }
.footer__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--dim); }
.footer__in a:hover{ color:var(--text); }

/* ====================================================== revelar no scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================ VISTA EM ANEL
   Sobreposição que abre ao clicar numa pasta. A roda é enorme e o
   centro dela fica muito abaixo da tela, só o topo do arco passa
   pela área visível, como uma roda-gigante vista de perto.
   ============================================================ */
.ring-view{
  position:fixed; inset:0; z-index:2000;
  background:#0A0A0C;
  opacity:0; transition:opacity .45s var(--ease);
  overscroll-behavior:contain;
}
.ring-view[hidden]{ display:none; }
.ring-view.is-open{ opacity:1; }

/* ------------------------------------------------------ barra */
.ring-view__bar{
  position:absolute; z-index:3; top:0; left:0; right:0;
  display:flex; align-items:flex-start; gap:20px;
  padding:clamp(20px,3vw,34px) var(--gut) 0;
}
.ring-view__eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim);
}
.ring-view__title{
  margin-top:6px;
  font-size:clamp(20px,2.4vw,30px); font-weight:600; letter-spacing:-.035em;
  color:var(--text);
}
.ring-view__close{
  margin-left:auto; display:inline-flex; align-items:center; gap:9px;
  padding:10px 16px; border-radius:100px;
  background:var(--panel-2); border:1px solid var(--hair);
  color:var(--text); font:inherit; font-size:13px; cursor:pointer;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transition:background .25s var(--ease), transform .25s var(--spring);
}
.ring-view__close:hover{ background:rgba(255,255,255,.16); transform:scale(1.04); }
.ring-view__close svg{ width:15px; height:15px; }

/* ------------------------------------------------------ a roda
   O centro fica em (50%, 42vh + R). Como R é maior que a tela, só
   o topo do arco aparece, a roda inteira nunca cabe no quadro. */
.ring{
  --R: min(112vh, 1080px);
  position:absolute; left:50%; top:calc(42vh + var(--R));
  width:0; height:0;
}
.ring__item{
  --w: clamp(150px, 18vw, 262px);
  position:absolute; left:0; top:0; margin:0;
  width:var(--w); aspect-ratio:3/4;
  margin-left:calc(var(--w) / -2);
  margin-top:calc(var(--w) * 4 / 3 / -2);
  cursor:pointer;
  perspective:760px;              /* dá volume ao tombo do card */
  /* --a = ângulo no arco, --s = escala (maior perto do centro).
     Os dois vêm do JS. */
  transform:rotate(var(--a)) translateY(calc(-1 * var(--R))) scale(.5);
  opacity:0;
  transition:transform .8s var(--spring), opacity .5s var(--ease);
  transition-delay:var(--d,0ms);
}
.ring-view.is-open .ring__item{
  transform:rotate(var(--a)) translateY(calc(-1 * var(--R))) scale(var(--s,1));
  opacity:var(--o,1);
}

/* Depois da entrada, o transform perde a transição: quem comanda o
   giro é a interpolação do JS. Se a mola de .8s continuasse valendo,
   cada passo do scroll ficaria mole e atrasado. */
.ring-view.is-spun .ring__item{
  transition:opacity .35s linear;
  transition-delay:0ms;
}

/* A camada de dentro fica com o tombo 3D do mouse. Precisa ser um
   elemento separado: um só transform não comporta a posição no arco
   e a inclinação ao mesmo tempo. */
.ring__card{
  position:absolute; inset:0;
  border-radius:12px; overflow:hidden;
  background:#F2F2EF;
  box-shadow:0 20px 50px rgba(0,0,0,.55);
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ring__item:hover .ring__card{
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(26px);
  box-shadow:0 30px 74px rgba(0,0,0,.7);
}
.ring-view.is-open .ring__item.is-active .ring__card{
  box-shadow:0 26px 66px rgba(0,0,0,.68), 0 0 0 2px var(--accent-2);
}

/* brilho que acompanha o cursor, o que vende o volume */
.ring__card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle 60% at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.55), transparent 62%);
  opacity:0; transition:opacity .35s var(--ease);
  mix-blend-mode:overlay;
}
.ring__item:hover .ring__card::after{ opacity:1; }

.ring__card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .2s var(--ease);
}

/* clipe da prévia, por cima da capa */
.ring__prev{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .35s var(--ease);
}
.ring__prev.is-on{ opacity:1; }

/* com a prévia rodando o selo de play sai de cena */
.ring__play{ z-index:2; transition:opacity .3s var(--ease); }
.ring__item:hover .ring__play{ opacity:0; }
.ring__card figcaption{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  padding:9px 11px; font-size:11.5px; color:#0A0A0A;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

/* -------------------------------------------- rodapé e contador */
.ring-view__hint,
.ring-view__counter{
  position:absolute; z-index:3; bottom:clamp(20px,3vw,32px);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}
.ring-view__hint{ left:var(--gut); transition:opacity .4s var(--ease); }
.ring-view__counter{ right:var(--gut); color:var(--muted); font-variant-numeric:tabular-nums; }

/* --------------------------------------------------- orientação */
.ring-view__coach{
  position:absolute; z-index:5; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(92vw,380px);
  padding:26px 26px 22px; border-radius:var(--r-lg);
  background:rgba(24,24,27,.88);
  backdrop-filter:blur(26px) saturate(160%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  border:1px solid var(--hair);
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  text-align:left;
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.ring-view__coach.is-gone{
  opacity:0; pointer-events:none;
  transform:translate(-50%,-46%) scale(.97);
}
.ring-view__coachTitle{
  font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--text);
  margin-bottom:14px;
}
.ring-view__coach ul{ display:grid; gap:9px; }
.ring-view__coach li{
  font-size:13.5px; color:var(--muted); line-height:1.45;
  padding-left:16px; position:relative;
}
.ring-view__coach li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.ring-view__coach b{ color:var(--text); font-weight:600; }
.ring-view__coachOk{
  margin-top:18px; width:100%;
  padding:11px 18px; border-radius:100px; border:0;
  background:var(--accent); color:#fff; font:inherit; font-size:13.5px; font-weight:500;
  cursor:pointer; transition:background .25s var(--ease);
}
.ring-view__coachOk:hover{ background:#3D9BFF; }

/* ============================================== preview do projeto */
.detail{
  position:absolute; inset:0; z-index:6;
  background:rgba(10,10,12,.86);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  display:flex; flex-direction:column;
  padding:clamp(20px,3vw,34px) var(--gut) clamp(24px,4vw,48px);
  opacity:0; transition:opacity .38s var(--ease);
}
.detail[hidden]{ display:none; }
.detail.is-open{ opacity:1; }

.detail__back{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px 10px 12px; border-radius:100px;
  background:var(--panel-2); border:1px solid var(--hair);
  color:var(--text); font:inherit; font-size:13px; cursor:pointer;
  transition:background .25s var(--ease), transform .25s var(--spring);
}
.detail__back:hover{ background:rgba(255,255,255,.16); transform:translateX(-3px); }
.detail__back svg{ width:16px; height:16px; }

.detail__grid{
  flex:1; min-height:0;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,64px); align-items:center;
  max-width:var(--wrap); width:100%; margin:clamp(18px,3vh,34px) auto 0;
}
/* A moldura não impõe mais formato: ela se ajusta à proporção da
   arte. Antes o object-fit:cover recortava peças em pé para caber
   numa caixa deitada. */
.detail__media{
  display:grid; place-items:center;
  max-height:min(64vh,560px);
  cursor:zoom-in;
}
.detail__media img{
  width:auto; height:auto;
  max-width:100%; max-height:min(64vh,560px);
  border-radius:var(--r-lg);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  display:block;
}
/* vídeo na peça grande: mesma moldura da imagem */
.detail__media video{
  width:auto; height:auto;
  max-width:100%; max-height:min(64vh,560px);
  border-radius:var(--r-lg);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  display:block; background:#000;
}
.detail__media:has(video){ cursor:default; }

/* selo de play, marca a peça que é vídeo, no cartão e na tira */
.ring__play,.detail__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none;
  background:rgba(10,10,12,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.5);
}
.ring__play{ width:46px; height:46px; }
.detail__play{ width:22px; height:22px; }
.ring__play::after,.detail__play::after{
  content:''; position:absolute; top:50%; left:54%;
  transform:translate(-50%,-50%);
  border-style:solid; border-color:transparent transparent transparent #fff;
}
.ring__play::after{ border-width:8px 0 8px 13px; }
.detail__play::after{ border-width:4px 0 4px 7px; }
.detail__piece{ position:relative; }

/* o fundo claro pertence ao espaço reservado, não à moldura */
.detail__media .detail__ph{
  display:grid; place-items:center;
  width:100%; height:min(48vh,420px);
  border-radius:var(--r-lg);
  background:#F2F2EF;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:#9A9A93;
}
.detail__media:has(.detail__ph){ cursor:default; }

.detail__zoomTip{
  position:absolute; z-index:13; left:50%; bottom:22px;
  transform:translateX(-50%);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim);
  pointer-events:none;
}

.detail__body{ min-width:0; }
/* coluna da esquerda: peça grande em cima, tira de peças embaixo */
.detail__col{ min-width:0; display:grid; gap:14px; justify-items:center; }

.detail__strip{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.detail__strip[hidden]{ display:none; }
.detail__piece{
  width:54px; height:68px; padding:0; border-radius:9px; overflow:hidden;
  background:none; border:1px solid var(--hair-soft); cursor:pointer;
  opacity:.5; transition:opacity .3s var(--ease), border-color .3s var(--ease);
}
.detail__piece img{ width:100%; height:100%; object-fit:cover; display:block; }
.detail__piece:hover{ opacity:.85; }
.detail__piece.is-on{ opacity:1; border-color:var(--accent-2); }

/* contador de peças na legenda do cartão da roda */
.ring__card figcaption b{ color:var(--accent); font-weight:600; }

.detail__eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim);
}
.detail__title{
  margin-top:12px;
  font-size:clamp(26px,3.4vw,46px); font-weight:600; letter-spacing:-.04em;
  color:var(--text);
}
.detail__desc{
  margin-top:18px; max-width:52ch;
  color:var(--muted); font-size:clamp(14.5px,1.2vw,16.5px); line-height:1.65;
}

/* ============================================================ VISUALIZADOR
   Camada própria acima do preview. A arte fica no tamanho pedido e o
   palco rola, é o que permite percorrer detalhe por detalhe.
   ============================================================ */
.zoom{
  position:fixed; inset:0; z-index:2100;
  background:rgba(5,5,7,.97);
  display:flex; flex-direction:column;
}
.zoom[hidden]{ display:none; }

.zoom__stage{
  flex:1; min-height:0;
  overflow:auto; overscroll-behavior:contain;
  cursor:grab; touch-action:none;
  display:grid; place-items:center;
  padding:clamp(12px,2vw,28px);
}
.zoom__stage.is-drag{ cursor:grabbing; }
.zoom__stage img{
  display:block;
  max-width:none; max-height:none;   /* anula a regra global das imagens */
  user-select:none; -webkit-user-drag:none;
  border-radius:4px;
}

/* ------------------------------------------------------ controles */
.zoom__bar{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px;
  padding:7px 9px; border-radius:100px;
  background:rgba(40,40,44,.66);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--hair);
  box-shadow:0 18px 44px rgba(0,0,0,.6);
}
.zoom__bar button{
  min-width:34px; height:34px; padding:0 13px;
  border:0; border-radius:100px;
  background:transparent; color:var(--text);
  font:inherit; font-size:13.5px; line-height:1; cursor:pointer;
  transition:background .22s var(--ease);
}
.zoom__bar button:hover{ background:rgba(255,255,255,.14); }
.zoom__bar #zoomLevel{
  min-width:56px; text-align:center;
  font-family:var(--mono); font-size:11.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.zoom__sep{ width:1px; height:20px; background:var(--hair); margin-inline:4px; }
#zoomClose{ background:rgba(255,255,255,.1); }

.zoom__hint{
  position:absolute; left:50%; bottom:72px; transform:translateX(-50%);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
  pointer-events:none; white-space:nowrap;
}

@media (max-width:640px){
  .zoom__hint{ display:none; }
  .zoom__bar{ bottom:18px; }
}

/* trava a página enquanto a roda está aberta */
body.ring-open{ overflow:hidden; }

@media (max-width:860px){
  .ring{ --R: min(96vh, 760px); top:calc(38vh + var(--R)); }
  .ring__item{ --w: clamp(124px, 32vw, 175px); }
  .detail__grid{ grid-template-columns:1fr; align-content:start; overflow-y:auto; }
  .detail__media{ height:min(38vh,300px); }
}
@media (max-width:640px){
  .ring-view__hint{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .ring__item{ transition-delay:0ms!important; }
}


/* ============================================================ RESPONSIVO */
@media (max-width:1080px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .folders{ grid-template-columns:repeat(2,1fr); }
  .feat{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .stats,.contact__links{ grid-template-columns:repeat(2,1fr); }
  .about{ grid-template-columns:1fr; gap:24px; }
  .menubar__menu{ gap:14px; }
}

@media (max-width:860px){
  .menubar__menu{ display:none; }
  .menubar__menu{ display:none; }
  .head{
    flex-direction:column; justify-content:center;
    padding:96px var(--gut) 60px; min-height:auto;
  }
  .head__inner > *{ max-width:100%; }
  .bigname{ letter-spacing:-.045em; }
  /* a órbita sai do canto e vira um bloco abaixo do texto */
  .orbit{
    --fig: min(58vh, 500px);
    position:relative; right:auto; bottom:auto;
    width:min(90vw,470px); height:var(--fig); margin:44px auto 0;
  }
}

@media (max-width:640px){
  .cards,.stats,.contact__links{ grid-template-columns:1fr; }
  .folders{ grid-template-columns:repeat(2,1fr); gap:16px; }
  /* em coluna única o 3:4 fica alto demais e empurra as pastas
     para fora da tela: o cartão deita */
  .feat{ grid-template-columns:1fr; gap:22px; }
  .feat__card{ height:auto; aspect-ratio:4/3; }
  .head__roles{ letter-spacing:.1em; }
  .head__actions{ width:100%; }
  .head__actions .btn{ flex:1; }
}

/* ============================================================ ACESSIBILIDADE */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  .reveal{ opacity:1; transform:none; }
  .scrollcue__line i{ animation:none!important; }

}

@media print{
  .menubar,.orbit,.scrollcue-wrap{ display:none!important; }
  body{ background:#fff; color:#000; }
}