/* ============================================================
   BIO PRIME — JADER FERRARI ARTES
   Conceito: ATELIÊ DIGITAL DE HIPER-REALISMO
   Mobile first: 360 / 375 / 390 / 393 / 412 / 430
   Direção de luz: superior esquerda (coerente em toda a página)
   ============================================================ */

:root{
  /* --- paleta -------------------------------------------------- */
  --preto:        #0A0A0B;   /* base, quase preto com viés grafite */
  --carvao:       #111113;   /* seções alternadas                  */
  --grafite:      #17171A;   /* surface / cards                    */
  --grafite-2:    #202024;   /* surface elevada                    */
  --borda:        #2B2B30;
  --linha:        rgba(240,238,233,.10);

  --papel:        #EDE9E2;   /* off-white de papel                 */
  --papel-2:      #D8D3C9;
  --texto:        #F1EFEB;
  --texto-2:      #9C988F;   /* cinza quente, texto secundário     */
  --texto-3:      #6B6862;

  --vermelho:     #C8102E;   /* tensão, CTA, numeração ativa       */
  --vermelho-2:   #E11B3C;

  /* --- tipografia ---------------------------------------------- */
  --display: "Bodoni Moda", "Times New Roman", serif;
  --ui: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- escala de espaçamento ----------------------------------- */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px;

  /* --- raio: papel cortado, quase reto ------------------------- */
  --r-papel:2px; --r-card:4px; --r-btn:2px;

  /* --- elevação (luz superior esquerda) ------------------------ */
  --s1: 0 2px 6px rgba(0,0,0,.40);
  --s2: 0 10px 26px -8px rgba(0,0,0,.60);
  --s3: 0 1px 0 rgba(0,0,0,.65), 0 20px 44px -14px rgba(0,0,0,.75);
  --s-cta: 0 10px 26px -10px rgba(200,16,46,.65);

  --cx: 430px;               /* medida editorial, não estica       */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--preto);
  color:var(--texto);
  font-family:var(--ui);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,p,figure,figcaption{ margin:0; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
        -webkit-tap-highlight-color:transparent; }
:focus-visible{ outline:2px solid var(--vermelho-2); outline-offset:3px; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--vermelho); color:#fff; padding:12px 16px; font-size:13px;
}
.pular:focus{ left:8px; top:8px; }

.cx{
  width:100%; max-width:var(--cx); margin-inline:auto;
  padding-inline:max(22px, env(safe-area-inset-left));
}

/* ============================================================
   TEXTURA DE FUNDO — grão fino de grafite, quase imperceptível
   Existe para tirar o preto digital chapado e dar sensação de papel.
   ============================================================ */
.grao{
  position:fixed; inset:-50%; z-index:0; pointer-events:none;
  opacity:.055; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   TIPOGRAFIA DE SISTEMA
   ============================================================ */

/* rótulo de seção — etiqueta de catálogo */
.rot{
  display:flex; align-items:center; gap:10px;
  font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--texto-3);
  margin-bottom:var(--e5);
}
.rot__n{
  font-family:var(--display); font-size:12px; font-weight:500; letter-spacing:0;
  color:var(--vermelho-2);
}
.rot::after{ content:""; flex:1; height:1px; background:var(--linha); }

/* título de seção — didone, contraste de traço como o grafite */
.tit{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(32px,9.2vw,40px);
  line-height:1.02;
  letter-spacing:-.015em;
  margin-bottom:var(--e4);
}
.tit--big{ font-size:clamp(38px,11.5vw,50px); }
.tit--sobre{ margin-top:var(--e5); }

.lead{
  color:var(--texto-2); font-size:15px; line-height:1.6;
  max-width:34ch;
}

.num,.contador,.proc__n,.obra__num{
  font-family:var(--display); font-variant-numeric:lining-nums tabular-nums;
}

.pt{ display:inline-block; width:3px; height:3px; border-radius:50%;
     background:var(--texto-3); vertical-align:middle; margin:0 5px 2px; }

.sec{ position:relative; z-index:1; padding-block:var(--e9); }
.sec--enc,.sec--cursos{ background:var(--carvao); }
.sec--enc::before,.sec--cursos::before,.sec--contato::before{
  content:""; position:absolute; inset:0 0 auto; height:1px; background:var(--linha);
}

/* ============================================================
   BOTÕES
   Retos, secos, editoriais. Vermelho só no CTA principal.
   ============================================================ */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:56px; padding:0 18px;
  border-radius:var(--r-btn);
  font-size:13px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease),
             background .25s var(--ease), border-color .25s var(--ease);
}
.btn svg{ width:20px; height:20px; display:block; }
.btn__seta{ display:flex; margin-left:auto; opacity:.85;
            transition:transform .25s var(--ease), opacity .25s var(--ease); }
.btn__seta svg{ width:18px; height:18px; }
.btn:active{ transform:translateY(1px); }
.btn:active .btn__seta{ transform:translateX(3px); }

/* ---- CTA primário: placa vermelha com bisel, não um retângulo chapado --- */
.btn--1{
  color:#fff;
  background:linear-gradient(178deg, var(--vermelho-2) 0%, var(--vermelho) 46%, #A50C25 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 2px 0 rgba(0,0,0,.5),
    0 16px 30px -14px rgba(200,16,46,.7);
}
.btn--1:active{
  background:linear-gradient(178deg, var(--vermelho) 0%, #A50C25 100%);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4), 0 1px 0 rgba(0,0,0,.5);
}

/* ---- CTA secundário: chapa de grafite, nunca transparente ------------- */
.btn--2{
  color:var(--texto);
  background:linear-gradient(178deg, #1F1F24 0%, #15151A 100%);
  border:1px solid var(--borda);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), var(--s1);
}
.btn--2:active{ background:#131317; box-shadow:inset 0 1px 3px rgba(0,0,0,.5); }

.btn--bloco{ display:flex; width:100%; }
.btn--grande{ min-height:66px; }

/* ---- hierarquia interna: rótulo + o que acontece ao tocar ------------- */
.btn--duplo{ justify-content:flex-start; text-transform:none; letter-spacing:0; }
.btn__ico{
  flex:0 0 auto; display:grid; place-items:center;
  width:38px; height:38px; border-radius:var(--r-btn);
  background:rgba(0,0,0,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 2px rgba(0,0,0,.35);
}
.btn--2 .btn__ico{ background:rgba(255,255,255,.05);
                   box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }
.btn__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; text-align:left; }
.btn__txt b{
  font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.btn__txt i{
  font-style:normal; font-size:11.5px; letter-spacing:.01em; text-transform:none;
  color:rgba(255,255,255,.72);
}
.btn--2 .btn__txt i{ color:var(--texto-2); }
.btn--grande .btn__txt b{ font-size:14px; }

@media (hover:hover){
  .btn--1:hover{ box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.35),
    0 2px 0 rgba(0,0,0,.5), 0 20px 36px -14px rgba(225,27,60,.8); }
  .btn:hover .btn__seta{ transform:translateX(4px); opacity:1; }
  .btn--2:hover{ border-color:#3A3A42; background:linear-gradient(178deg,#24242A,#191920); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; z-index:1;
  padding-top:max(var(--e7), calc(env(safe-area-inset-top) + 40px));
  padding-bottom:var(--e7);
  overflow:hidden;
}

/* luz de ateliê: gradiente radial discreto, superior esquerdo */
.luz{
  position:absolute; top:-22%; left:-18%; width:92%; aspect-ratio:1;
  background:radial-gradient(circle at 40% 40%,
              rgba(255,252,244,.085) 0%,
              rgba(255,252,244,.035) 38%,
              transparent 68%);
  pointer-events:none;
}

.olho{
  font-size:10px; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--texto-3);
  margin-bottom:var(--e4);
}

.marca{
  font-family:var(--display); font-weight:400;
  font-size:clamp(52px,17vw,86px);
  line-height:.86; letter-spacing:-.025em;
  margin:0;
}
.marca__l1,.marca__l2{ display:block; }
.marca__l2{ padding-left:.06em; color:var(--papel); }

.regua{ display:flex; align-items:center; gap:12px; margin:var(--e5) 0 var(--e4); }
.regua i{ flex:1; height:1px; background:linear-gradient(90deg,var(--vermelho) 0 42px,var(--linha) 42px); }

.hero__head{
  font-family:var(--display); font-weight:500;
  font-size:clamp(26px,7.6vw,34px); line-height:1.08; letter-spacing:-.01em;
}
.hero__sub{
  margin-top:var(--e3); color:var(--texto-2); font-size:14.5px; line-height:1.6;
}

.hero__acoes{ display:grid; gap:10px; margin-top:var(--e5); }
.hero__acoes .btn{ width:100%; }

.hero__dica{
  margin-top:var(--e4);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--texto-3);
  display:flex; align-items:center; gap:10px;
}
.hero__dica::after{ content:""; width:26px; height:1px; background:var(--texto-3); }

/* ============================================================
   FOLHA — a obra como objeto físico sobre a interface
   Sombra de contato (curta) + sombra de elevação (difusa).
   Sai levemente do frame: profundidade vem do próprio desenho.
   ============================================================ */
.folha{ position:relative; }

.folha--hero{
  margin:var(--e6) 0 var(--e4);
  margin-right:calc(-1 * max(22px, env(safe-area-inset-right)));
  margin-left:var(--e5);
  transform:rotate(-1.1deg);
}
.folha--enc{
  margin:var(--e6) 0 var(--e5);
  margin-left:calc(-1 * max(22px, env(safe-area-inset-left)));
  transform:rotate(.9deg);
}

.folha__papel{ aspect-ratio:4/5; }

/* a imagem é maior que a tela: o parallax acontece DENTRO da moldura,
   sem deslocar a legenda nem colidir com o texto ao lado */
.folha__img{ position:absolute; inset:-7% 0; width:100%; height:114%;
             object-fit:cover; will-change:transform; }

.folha__cap{
  display:flex; align-items:center; gap:8px;
  margin-top:var(--e3); padding-right:24px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--texto-3);
  justify-content:flex-end;
}
.folha__cap .num{ color:var(--vermelho-2); font-size:12px; letter-spacing:0; }

/* ============================================================
   MOLDURA — todo desenho da página é apresentado emoldurado
   Caixilho de grafite com bisel iluminado no alto à esquerda
   (a mesma direção de luz do restante da página) e rebaixo
   interno, para a obra parecer recuada atrás do caixilho.
   Sem reflexo de vidro: nada é sobreposto à obra.
   ============================================================ */
.moldura{
  --caixilho:9px;
  position:relative;
  padding:var(--caixilho);
  border-radius:var(--r-papel);
  /* o cônico a partir de 45° divide os quatro lados exatamente nas
     diagonais: são as juntas de meia-esquadria de um caixilho real.
     Topo mais claro, base mais escura — a luz vem de cima à esquerda. */
  background:
    conic-gradient(from 45deg,
      #26262D  0deg  90deg,   /* lado direito  */
      #0E0E12 90deg 180deg,   /* base          */
      #313139 180deg 270deg,  /* lado esquerdo */
      #4C4C56 270deg 360deg   /* topo          */
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 1px 0 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.8),
    inset -1px 0 0 rgba(0,0,0,.65),
    var(--s2);
  transition:box-shadow .4s var(--ease);
}
/* nível 3 — protagonistas: a obra em foco, o hero, a encomenda, o retrato */
.obra.ativa .obra__papel,
.folha__papel,
.retrato,
.comparador__quadro{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 1px 0 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.8),
    inset -1px 0 0 rgba(0,0,0,.65),
    var(--s3);
}
/* nível 1 — apoio: encomendas recentes, alunos, macro recortes */
.enc__fig, .aluno__fig, .macro, .processo__fig{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 1px 0 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.75),
    inset -1px 0 0 rgba(0,0,0,.6),
    var(--s1);
}
/* filete claro entre o caixilho e a obra — o corte do passe-partout */
.moldura__tela{
  position:relative; overflow:hidden; height:100%;
  background:var(--grafite);
  box-shadow:
    0 0 0 1px rgba(237,233,226,.16),
    inset 0 2px 6px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(0,0,0,.5);
}
.moldura__tela>img{ width:100%; height:100%; object-fit:cover; }

@media (min-width:760px){ .moldura{ --caixilho:13px; } }

/* ============================================================
   ESTADO PENDENTE
   Placeholder tecnicamente necessário: os arquivos originais em alta
   ainda não foram fornecidos. Marcado como tal, nunca disfarçado.
   ============================================================ */
.pendente{
  position:absolute; inset:0; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:16px; text-align:center;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--texto-3);
  background:
    repeating-linear-gradient(52deg, rgba(255,255,255,.022) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-38deg, rgba(255,255,255,.016) 0 1px, transparent 1px 9px),
    linear-gradient(160deg,#1B1B1F 0%,#131316 100%);
}
.pendente b{
  font-family:var(--display); font-weight:400; font-size:13px;
  letter-spacing:.02em; text-transform:none; color:var(--texto-2);
}
.pendente::before{
  content:""; position:absolute; inset:12px; border:1px dashed rgba(255,255,255,.10);
}
.sem-arquivo img{ visibility:hidden; }
.sem-arquivo .pendente{ display:flex; }

/* ============================================================
   GALERIA HORIZONTAL — o momento principal da página
   Catálogo de arte que se folheia. Sem setas obrigatórias.
   ============================================================ */
.galeria{ margin-top:var(--e7); }

.trilho{
  display:flex; gap:14px; align-items:flex-start;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-inline:max(22px, env(safe-area-inset-left));
  padding-bottom:var(--e4);
}
.trilho::-webkit-scrollbar{ display:none; }

.obra{
  flex:0 0 auto;
  width:min(84vw, 360px);              /* próximo card fica visível na lateral */
  scroll-snap-align:center;
  transform:scale(.94);
  opacity:.62;
  transition:transform .42s var(--ease), opacity .42s var(--ease);
  will-change:transform;
}
.obra.ativa{ transform:scale(1); opacity:1; }

/* a moldura acompanha o formato real da obra — nada é deformado */
.obra--paisagem{ width:min(90vw, 440px); }
.obra--paisagem .obra__papel{ aspect-ratio:3/2; }
.obra--quadrado .obra__papel{ aspect-ratio:1; }

.obra__botao{ display:block; width:100%; }

.obra__papel{ aspect-ratio:4/5; }

/* revelação em máscara: a obra sobe por trás de uma aresta,
   como um quadro sendo descoberto — não é um fade comum */
.obra__img{
  width:100%; height:100%; object-fit:cover;
  clip-path:inset(0 0 100% 0);
  transform:translateY(14px) scale(1.04);
  transition:clip-path .85s var(--ease), transform .85s var(--ease);
}
.obra.revelada .obra__img{
  clip-path:inset(0 0 0 0);
  transform:translateY(0) scale(1);
}

.obra__lupa{
  position:absolute; right:calc(var(--caixilho) + 8px); bottom:calc(var(--caixilho) + 8px);
  width:36px; height:36px; display:grid; place-items:center;
  color:var(--papel);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(10,10,11,.6);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:var(--r-btn);
  opacity:0; transition:opacity .35s var(--ease);
}
.obra.ativa .obra__lupa{ opacity:1; }
.obra__lupa svg{ width:17px; height:17px; display:block; }

.obra__legenda{
  display:flex; align-items:baseline; gap:10px;
  margin-top:var(--e3);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--texto-3);
}
.obra__num{ font-size:13px; letter-spacing:0; color:var(--vermelho-2); }
.obra.ativa .obra__legenda{ color:var(--texto-2); }

/* rodapé da galeria: contador de catálogo + régua de progresso */
.galeria__pe{
  display:flex; align-items:center; gap:16px;
  margin-top:var(--e5);
}
.contador{
  display:flex; align-items:baseline; gap:6px;
  font-size:15px; color:var(--texto-2);
}
.contador #contadorAtual{ color:var(--papel); }
.contador i{ font-style:normal; color:var(--texto-3); }
.progresso{ flex:1; height:1px; background:var(--linha); position:relative; }
.progresso i{
  position:absolute; inset:0 auto 0 0; width:16%;
  background:var(--vermelho); transition:width .4s var(--ease), transform .4s var(--ease);
}

/* ============================================================
   COMPARADOR FOTO -> DESENHO
   ============================================================ */
.comparador{ margin-top:var(--e6); }
.comparador__quadro{ aspect-ratio:1; }
.comparador__palco{ touch-action:pan-y; cursor:ew-resize; }
.comparador__palco img{ width:100%; height:100%; object-fit:cover; }
.comparador__antes{
  position:absolute; inset:0; width:var(--pos,50%); overflow:hidden;
}
.comparador__antes img{ width:100vw; max-width:none; height:100%;
                        width:var(--largura,100%); }
.comparador__alca{
  position:absolute; top:0; bottom:0; left:var(--pos,50%);
  width:2px; background:var(--papel); transform:translateX(-1px);
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
.comparador__alca i{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%;
  background:var(--papel); box-shadow:var(--s2);
}
.comparador__tag{
  position:absolute; bottom:12px;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  padding:5px 9px; background:rgba(10,10,11,.6); color:var(--papel);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.comparador__tag--e{ left:12px; }
.comparador__tag--d{ right:12px; }
.comparador__range{ position:absolute; opacity:0; pointer-events:none; }
.comparador__cap{
  margin-top:var(--e3); text-align:center;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--texto-3);
}

/* ============================================================
   CHIPS — o que costuma ser encomendado
   ============================================================ */
/* etiquetas de catálogo: numeração didone + rótulo, não pílulas genéricas */
.chips{
  display:flex; flex-wrap:wrap; gap:7px;
  margin:var(--e5) 0 var(--e6);
  counter-reset:chip;
}
.chips li{
  counter-increment:chip;
  display:flex; align-items:baseline; gap:7px;
  padding:8px 12px 8px 10px;
  border:1px solid var(--borda); border-radius:var(--r-btn);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-2);
  background:linear-gradient(170deg,#1B1B20,#141418);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.chips li::before{
  content:"0" counter(chip);
  font-family:var(--display); font-size:11px; letter-spacing:0;
  color:var(--vermelho-2);
}

/* ============================================================
   ENCOMENDAS RECENTES — carrossel menor, abaixo da obra protagonista
   ============================================================ */
.trilho--enc{ margin:var(--e5) 0 var(--e6); gap:12px; }
.enc{ flex:0 0 auto; scroll-snap-align:center; width:min(58vw,220px); }
.enc__fig{ aspect-ratio:4/5; }
.enc__cap{
  margin-top:10px; display:flex; align-items:baseline; gap:8px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--texto-3);
}
.enc__cap i{ font-family:var(--display); font-style:normal; font-size:12px;
             letter-spacing:0; color:var(--vermelho-2); }

/* ============================================================
   PROCESSO — a obra fotografada em construção
   ============================================================ */
.processo{ margin:var(--e6) 0 var(--e5); }
.processo__fig{ aspect-ratio:4/5; max-width:260px; transform:rotate(.7deg); }
.processo__cap{
  margin-top:var(--e4); font-size:12px; color:var(--texto-3); max-width:30ch;
}
.processo__cap .num{ color:var(--vermelho-2); font-size:13px; }

/* ============================================================
   MACROS — olhe mais de perto
   ============================================================ */
.macros{
  display:flex; gap:12px; margin-top:var(--e6);
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-inline:max(22px, env(safe-area-inset-left));
}
.macros::-webkit-scrollbar{ display:none; }
.macro{
  flex:0 0 auto; scroll-snap-align:center;
  width:min(66vw,280px); aspect-ratio:3/4;
}
.macro:nth-child(even){ aspect-ratio:1; align-self:center; width:min(56vw,240px); }
.macro__cap{
  position:absolute; left:var(--caixilho); right:var(--caixilho); bottom:var(--caixilho);
  padding:26px 10px 8px;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--papel);
  background:linear-gradient(transparent, rgba(0,0,0,.8));
}

/* ============================================================
   CURSOS
   ============================================================ */
/* técnicas: dado real da bio, ocupa a seção sem inventar curso */
.tecnicas{
  display:grid; grid-template-columns:1fr 1fr;
  margin:var(--e6) 0 var(--e5);
  border-top:1px solid var(--linha);
}
.tecnicas li{
  display:flex; align-items:baseline; gap:9px;
  padding:14px 0; border-bottom:1px solid var(--linha);
  font-size:14px; color:var(--texto);
}
.tecnicas li:nth-child(odd){ padding-right:14px; border-right:1px solid var(--linha); }
.tecnicas li:nth-child(even){ padding-left:14px; }
.tecnicas__n{ font-family:var(--display); font-size:11px; color:var(--vermelho-2); }

.cursos{ display:grid; gap:12px; margin:0 0 var(--e5); }
.cursos:not(:empty){ margin-top:var(--e5); }
.curso{
  display:grid; grid-template-columns:96px 1fr; gap:14px;
  padding:12px; background:var(--grafite); border:1px solid var(--borda);
  border-radius:var(--r-card); box-shadow:var(--s1);
}
.curso__fig{ position:relative; overflow:hidden; aspect-ratio:1;
             border-radius:var(--r-papel); background:var(--grafite-2); }
.curso__fig img{ width:100%; height:100%; object-fit:cover; }
.curso__cor{ align-self:center; }
.curso__tec{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
             color:var(--vermelho-2); }
.curso__nome{ font-family:var(--display); font-size:19px; line-height:1.15; margin-top:4px; }
.curso__desc{ font-size:13px; color:var(--texto-2); margin-top:5px; }
.curso__cta{ display:inline-flex; align-items:center; gap:6px; margin-top:9px;
             font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.curso__cta::after{ content:""; width:14px; height:1px; background:var(--vermelho); }

/* ============================================================
   ALUNOS — carrossel menor, hierarquia claramente inferior
   ============================================================ */
.nota{
  display:flex; gap:9px; align-items:flex-start;
  font-size:12px; line-height:1.5; color:var(--texto-3);
  border-left:1px solid var(--borda); padding-left:12px;
  max-width:36ch;
}
.nota i{ width:5px; height:5px; margin-top:7px; background:var(--vermelho);
         flex:0 0 auto; }

.trilho--alunos{ margin-top:var(--e6); gap:10px; }
.aluno{
  flex:0 0 auto; scroll-snap-align:center;
  width:min(52vw,200px);
}
.aluno__fig{ aspect-ratio:4/5; }
.aluno__sel{
  position:absolute; top:calc(var(--caixilho) + 6px); left:calc(var(--caixilho) + 6px);
  font-size:8.5px; letter-spacing:.18em; text-transform:uppercase;
  padding:4px 7px; background:rgba(10,10,11,.7); color:var(--texto-2);
  border:1px solid var(--borda);
}
.aluno__cap{ margin-top:9px; font-size:10.5px; letter-spacing:.14em;
             text-transform:uppercase; color:var(--texto-3); }

/* ============================================================
   SOBRE
   ============================================================ */
.retrato{
  aspect-ratio:1; max-width:260px;
  transform:rotate(-.8deg);
}
.retrato img{ position:absolute; inset:-6% 0; width:100%; height:112%;
              object-fit:cover; will-change:transform; }

.sobre__txt{ color:var(--texto-2); font-size:15px; line-height:1.65; max-width:38ch; }

.numeros{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  margin-top:var(--e6);
  background:var(--borda); border:1px solid var(--borda);
}
.numeros>div{ background:var(--preto); padding:16px 12px; }
.numeros dt{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
             color:var(--texto-3); }
.numeros dd{ font-family:var(--display); font-size:24px; line-height:1.1; margin-top:5px; }
.numeros dd span{ font-family:var(--ui); font-size:12px; color:var(--texto-2);
                  letter-spacing:.04em; }

.assinatura{ margin-top:var(--e6); width:180px; opacity:.5;
             filter:brightness(0) invert(1); }

/* ============================================================
   PROCESSO
   ============================================================ */
.proc{ margin-top:var(--e6); border-top:1px solid var(--linha); }
.proc li{
  display:grid; grid-template-columns:44px 1fr; align-items:baseline;
  gap:0 14px; padding:18px 0; border-bottom:1px solid var(--linha);
}
.proc__n{ grid-row:1/3; font-size:17px; color:var(--vermelho-2); }
.proc b{ font-weight:500; font-size:15px; letter-spacing:.02em; }
.proc em{ font-style:normal; font-size:13px; color:var(--texto-2); }

/* ============================================================
   CONTATO / REDES
   ============================================================ */
.sec--contato{ padding-bottom:var(--e8); }
.sec--contato .btn{ margin-top:var(--e6); }

.rot--redes{ margin-top:var(--e8); }

/* Redes: hierarquia terciária. Cards pequenos, sem vermelho, sem sombra
   forte — não podem disputar com o CTA de WhatsApp logo acima. */
.redes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rede{
  display:flex; flex-direction:column; gap:2px;
  min-height:96px; padding:14px;
  border-radius:var(--r-card);
  background:linear-gradient(170deg,#1B1B20 0%,#141418 100%);
  border:1px solid var(--borda);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--s1);
  transition:transform .2s var(--ease), border-color .25s var(--ease),
             box-shadow .25s var(--ease);
}
.rede__ico{
  display:block; color:var(--texto-2); margin-bottom:auto;
  transition:color .25s var(--ease);
}
.rede__ico svg{ width:22px; height:22px; display:block; }
.rede__k{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--texto-3); }
.rede__v{ font-size:13px; color:var(--texto); overflow:hidden; text-overflow:ellipsis;
          white-space:nowrap; }
.rede:active{ transform:translateY(1px); box-shadow:inset 0 1px 4px rgba(0,0,0,.5); }
@media (hover:hover){
  .rede:hover{ border-color:#3A3A42; }
  .rede:hover .rede__ico{ color:var(--papel); }
}

/* hub de links: uma linha só, largura cheia, fecha o bloco */
.hub{
  display:flex; align-items:center; gap:4px 14px; flex-wrap:wrap;
  margin-top:10px; padding:16px 16px 16px 18px;
  border-radius:var(--r-card);
  border:1px solid var(--borda);
  background:linear-gradient(170deg,#17171C 0%,#121216 100%);
  position:relative;
}
/* filete vermelho: mesma marcação de "início de bloco" da régua do hero */
.hub::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:2px;
  background:var(--vermelho);
}
.hub__k{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--texto-3); }
.hub__v{ font-size:13px; color:var(--texto); }
.hub .btn__seta{ margin-left:auto; color:var(--texto-2); }
.hub .btn__seta svg{ width:18px; height:18px; }
.hub:active{ background:#101014; }

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape{
  position:relative; z-index:1;
  padding:var(--e7) 0 calc(var(--e9) + env(safe-area-inset-bottom));
  border-top:1px solid var(--linha); text-align:center;
}
.rodape__marca{ font-family:var(--display); font-size:26px; letter-spacing:-.01em; }
.rodape__sub{ margin-top:6px; font-size:10px; letter-spacing:.24em;
              text-transform:uppercase; color:var(--texto-3); }
.rodape__cr{ margin-top:var(--e5); font-size:11px; color:var(--texto-3); }

/* ============================================================
   CTA FIXO — entra depois do portfólio, sai no contato
   ============================================================ */
.barra{
  position:fixed; left:0; right:0; z-index:60;
  bottom:0; padding:10px max(16px, env(safe-area-inset-left))
           calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, rgba(10,10,11,.88) 34%);
  transform:translateY(120%);
  transition:transform .45s var(--ease);
}
.barra .btn{ width:100%; max-width:var(--cx); margin-inline:auto; min-height:52px; }
.barra.visivel{ transform:translateY(0); }

/* ============================================================
   LUPA — visualização ampliada da obra
   ============================================================ */
.lupa{
  position:fixed; inset:0; z-index:100;
  background:#000; display:flex; flex-direction:column;
  opacity:0; transition:opacity .3s var(--ease);
}
.lupa.aberta{ opacity:1; }
.lupa__palco{
  flex:1; position:relative; overflow:hidden;
  touch-action:none;
}
.lupa__quadro{
  position:absolute; left:0; right:0;
  top:calc(env(safe-area-inset-top) + 56px); bottom:8px;
}
.lupa__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;
  transform-origin:50% 50%; will-change:transform;
}
.lupa__x{
  position:absolute; top:calc(env(safe-area-inset-top) + 10px); right:12px; z-index:2;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
}
.lupa__x svg{ width:17px; height:17px; fill:none; stroke:#fff; stroke-width:1.4;
              stroke-linecap:round; }
.lupa__pe{
  padding:14px 22px calc(18px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.lupa__cap{ display:flex; align-items:baseline; gap:10px; white-space:nowrap;
            font-size:11px; letter-spacing:.16em; text-transform:uppercase;
            color:var(--texto-2); }
.lupa__cap span{ font-family:var(--display); font-size:14px; letter-spacing:0;
                 color:var(--vermelho-2); }
.lupa__cap i{ font-style:normal; }
.lupa__dica{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
             color:var(--texto-3); text-align:right; }
.lupa__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:60px; display:grid; place-items:center;
  background:linear-gradient(90deg, rgba(0,0,0,.5), transparent);
}
.lupa__nav--ant{ left:0; }
.lupa__nav--pro{ right:0; background:linear-gradient(-90deg, rgba(0,0,0,.5), transparent); }
.lupa__nav svg{ width:16px; height:16px; fill:none; stroke:#fff; stroke-width:1.5;
                stroke-linecap:round; stroke-linejoin:round; }
body.travado{ overflow:hidden; }

/* ============================================================
   ENTRADA POR SCROLL — nunca tudo ao mesmo tempo
   ============================================================ */
.anima{ opacity:0; transform:translateY(16px); }
.anima.dentro{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--atraso,0ms);
}

/* ============================================================
   DESKTOP — adaptação secundária, sem esticar
   ============================================================ */
@media (min-width:760px){
  :root{ --cx:600px; }
  body{ font-size:16px; }
  .sec{ padding-block:140px; }
  .hero{ padding-top:110px; }
  .marca{ font-size:104px; }
  .tit{ font-size:52px; }
  .tit--big{ font-size:66px; }
  .hero__head{ font-size:40px; }
  .hero__acoes{ grid-template-columns:auto auto; justify-content:start; }
  .hero__acoes .btn{ width:auto; }
  .folha--hero{ max-width:400px; margin-left:auto; }
  .folha--enc{ max-width:400px; }
  .obra{ width:400px; }
  .trilho,.macros{ padding-inline:max(calc((100vw - 600px)/2), 22px); }
  .curso{ grid-template-columns:150px 1fr; gap:20px; padding:16px; }
  .retrato{ max-width:340px; }
  .barra{ padding-bottom:18px; }
  .lupa__nav{ width:64px; height:96px; }
}

@media (min-width:1100px){
  :root{ --cx:760px; }
  .marca{ font-size:120px; }
  .obra{ width:440px; }
}

/* ============================================================
   ACESSIBILIDADE DE MOVIMENTO
   Todas as funções permanecem; só o movimento sai.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .anima{ opacity:1; transform:none; }
  .obra{ transform:none; opacity:1; }
  .obra__img{ clip-path:none; transform:none; }
  .obra__lupa{ opacity:1; }
  .folha--hero,.folha--enc,.retrato{ transform:none; }
  .barra{ transform:translateY(0); }
  .barra[hidden]{ display:none; }
}