/* ============================================================
   Jhonatas Silva
   Uma cor so: preto puro, com a escala de cinza neutra por cima.
   O dourado das patentes saiu em 28/08, junto com o preto quente:
   os dois lidos lado a lado davam aspecto marrom.
   Cor solida sempre: sem gradiente, sem glow, sem sombra colorida.
   ============================================================ */

:root{
  /* paleta neutra. a anterior era a escala stone, quente, e ficava
     marrom ao lado do preto puro da abertura. um preto so agora. */
  --preto:        #000000;
  --preto-fundo:  #000000;
  --superficie:   #101010;
  --linha:        #262626;
  --texto:        #FAFAFA;   /* off-white neutro, nao branco puro */
  --texto-2:      #A3A3A3;
  --destaque:     #FAFAFA;  /* preenchimento e filete de destaque */
  --destaque-2:   #E5E5E5;  /* texto pequeno de destaque */

  --larg:  clamp(20rem, 92vw, 78rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --resp:  clamp(5rem, 12vw, 11rem);

  --curva: cubic-bezier(.22,.61,.36,1);
}

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

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

body{
  margin:0;
  background:var(--preto);
  color:var(--texto);
  font-family:'Archivo', system-ui, sans-serif;
  font-size:clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height:1.65;
  font-variation-settings:'wght' 400,'wdth' 100;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

/* height:auto e obrigatorio: sem ele o atributo height do <img> vence o
   aspect-ratio do CSS e a imagem estica. */
img{ max-width:100%; height:auto; display:block; }
video,svg{ max-width:100%; display:block; }

::selection{ background:var(--destaque); color:#000; }

/* foco visivel, exigencia de acessibilidade */
:focus-visible{
  outline:2px solid var(--destaque-2);
  outline-offset:3px;
  border-radius:2px;
}

.pular{
  position:absolute; left:-9999px;
  background:var(--destaque); color:#000;
  padding:.75rem 1.25rem; z-index:200;
}
.pular:focus{ left:1rem; top:1rem; }

/* ---------- tipografia ---------- */

.mono{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric:tabular-nums;
}

.olho{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--destaque-2);
  display:flex;
  align-items:center;
  gap:.9rem;
  margin:0 0 2.5rem;
}
.olho::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--linha);
  max-width:14rem;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--curva) .15s;
}
.visivel .olho::after,.olho.visivel::after{ transform:scaleX(1); }

h1,h2,h3{
  margin:0;
  font-weight:900;
  line-height:.94;
  letter-spacing:-.04em;
  text-wrap:balance;
}

h1{
  font-size:clamp(3.15rem, 10.5vw, 11rem);
  letter-spacing:-.05em;
  line-height:.9;
  font-variation-settings:'wght' 900,'wdth' 112;
}

h2{
  font-size:clamp(1.9rem, 5vw, 4.25rem);
  letter-spacing:-.035em;
  font-variation-settings:'wght' 800,'wdth' 105;
}

h3{
  font-size:clamp(1.15rem, 1.8vw, 1.6rem);
  letter-spacing:-.02em;
  line-height:1.15;
  font-variation-settings:'wght' 700,'wdth' 100;
}

p{ margin:0 0 1.25rem; max-width:60ch; }
h2 + p,h2 + .grande{ margin-top:clamp(1.5rem,2.5vw,2.25rem); }
h2 + .errado,h2 + ol{ margin-top:clamp(2rem,3.5vw,3rem); }
.suave{ color:var(--texto-2); }
.grande{ font-size:clamp(1.125rem,1.6vw,1.375rem); line-height:1.55; }

/* ---------- estrutura ---------- */

.faixa,section[id]{ scroll-margin-top:5rem; }

.faixa{
  padding-block:var(--resp);
  padding-inline:var(--gutter);
  position:relative;
}
.dentro{ width:var(--larg); margin-inline:auto; }

/* ---------- revelacao no scroll ---------- */

.sobe{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .9s var(--curva), transform .9s var(--curva);
}
.visivel .sobe,.sobe.visivel{ opacity:1; transform:none; }
.visivel .sobe:nth-child(2){ transition-delay:.09s; }
.visivel .sobe:nth-child(3){ transition-delay:.18s; }
.visivel .sobe:nth-child(4){ transition-delay:.27s; }

/* ============================================================
   CABECALHO
   ============================================================ */

.topo{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:1rem var(--gutter);
  background:rgba(0,0,0,0);
  border-bottom:1px solid transparent;
  transform:translateY(-100%);
  transition:transform .5s var(--curva), background .35s linear,
             border-color .35s linear;
}
.topo.preso{
  transform:none;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--linha);
}
.marca{
  font-weight:800; font-size:.95rem; letter-spacing:-.02em;
  color:var(--texto); text-decoration:none;
  font-variation-settings:'wght' 800,'wdth' 100;
}
.marca span{ color:var(--destaque-2); }

.topo nav{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,2rem); }
.topo nav a{
  font-family:'JetBrains Mono', monospace;
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-2); text-decoration:none;
  position:relative; padding-block:.35rem;
  transition:color .25s linear;
}
.topo nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--destaque-2);
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--curva);
}
.topo nav a:hover{ color:var(--texto); }
.topo nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.topo nav .so-largo{ display:none; }
@media (min-width:52rem){ .topo nav .so-largo{ display:inline-block; } }

/* ============================================================
   BOTOES
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--destaque); color:#000;
  font-family:'Archivo',sans-serif;
  font-size:.9375rem; font-weight:600;
  font-variation-settings:'wght' 600,'wdth' 100;
  letter-spacing:.01em;
  padding:.95rem 1.6rem;
  border:1px solid var(--destaque);
  border-radius:2px;
  text-decoration:none;
  transition:background .25s linear, color .25s linear;
}
.btn:hover{ background:var(--texto-2); }
.btn .seta{ transition:transform .35s var(--curva); }
.btn:hover .seta{ transform:translateX(4px); }

.btn-vazio{
  background:transparent; color:var(--texto);
  border-color:var(--linha);
}
.btn-vazio:hover{ background:transparent; border-color:var(--destaque-2); }

.btn-grande{ padding:1.25rem 2.25rem; font-size:1.0625rem; }

/* ============================================================
   1. ABERTURA. montagem portada do hero do mazyos.com.br:
   preto puro, robo a direita cortado pela moldura, fala a
   esquerda, e o ceu de pontos brancos por tras de tudo.
   Posicoes, tempos e opacidades sao os mesmos de la.
   ============================================================ */

.abertura{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:7.5rem 0 4rem;
  overflow:hidden;
  background:var(--preto);
}
/* emenda com o resto do site, que e preto quente e nao preto puro */
.abertura::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:clamp(6rem,16vh,11rem);
  background:linear-gradient(transparent, var(--preto));
  pointer-events:none; z-index:4;
}

/* ---- as duas luzes ---- */

.luz-topo{
  position:absolute; top:-140px; left:50%;
  transform:translateX(-50%);
  width:92%; max-width:1700px; height:460px;
  pointer-events:none; z-index:3;
  background:radial-gradient(ellipse 50% 65% at 50% 30%,
    rgba(255,255,255,.228) 0%, rgba(255,255,255,.101) 30%,
    rgba(255,255,255,.038) 55%, transparent 75%);
  filter:blur(22px);
  opacity:0;
  animation:acender 1800ms var(--curva) 300ms forwards;
}

.luz-lado{
  position:absolute; top:28%; left:0;
  width:160px; height:36%;
  pointer-events:none; z-index:1;
  background:radial-gradient(ellipse 18% 75% at 50% 50%,
    rgba(255,255,255,.55) 0%, rgba(255,255,255,.22) 30%,
    rgba(255,255,255,.06) 55%, transparent 80%);
  filter:blur(14px);
  opacity:0;
  animation:acender 1400ms var(--curva) 500ms forwards;
}
.luz-lado::after{
  content:''; position:absolute;
  top:8%; left:50%; transform:translateX(-50%);
  width:2px; height:84%;
  background:linear-gradient(180deg, transparent,
    rgba(255,255,255,.85) 50%, transparent);
  box-shadow:0 0 10px rgba(255,255,255,.9), 0 0 24px rgba(255,255,255,.55);
  filter:blur(.4px);
}
@keyframes acender{ from{ opacity:0; } to{ opacity:1; } }

/* ---- o robo ---- */

.robo-fundo{
  position:absolute; top:0; right:0; bottom:0;
  width:55%; height:100%;
  z-index:1;
  object-fit:contain;
  object-position:left center;
  pointer-events:none; user-select:none;
  opacity:0;
  transform-origin:50% 88%;
  animation:robo-entra 1400ms var(--curva) 100ms forwards;
}
@keyframes robo-entra{
  from{ opacity:0; transform:scale(1.04); }
  to  { opacity:1; transform:scale(1); }
}

/* o veu apaga o robo do lado do texto */
.veu{
  position:absolute; inset:0;
  pointer-events:none; z-index:1;
  background:linear-gradient(90deg,
    #000 0%, #000 36%, rgba(0,0,0,.7) 44%,
    rgba(0,0,0,.2) 50%, rgba(0,0,0,0) 56%);
}

/* ---- o ruido em cima do robo ---- */

.ruido{
  position:absolute; top:0; right:0;
  width:55%; height:100%;
  pointer-events:none; z-index:2;
  overflow:hidden;
}
.cintila{
  position:absolute; width:3px; height:3px;
  background:var(--texto);
  box-shadow:0 0 6px rgba(255,255,255,.65);
  animation:piscar 1.6s steps(10,end) infinite;
}
.c1{ top:12%; left:58%; animation-delay:0s; }
.c2{ top:34%; left:22%; animation-delay:.4s; }
.c3{ top:63%; left:70%; animation-delay:.9s; }
.c4{ top:81%; left:36%; animation-delay:1.3s; }

.fatia{
  position:absolute; width:4px; height:4px;
  background:#fff;
  box-shadow:1.5px 0 0 rgba(255,255,255,.7),
             -1.5px 0 0 rgba(255,255,255,.55),
             0 0 8px rgba(255,255,255,.3);
  animation:deslocar 2.4s steps(8,end) infinite;
}
.f1{ top:26%; left:44%; animation-delay:.2s; }
.f2{ top:70%; left:18%; animation-delay:1.5s; }

.varre{
  position:absolute; height:1px; width:70%;
  background:linear-gradient(90deg, transparent,
    rgba(255,255,255,.7), rgba(255,255,255,.85),
    rgba(255,255,255,.7), transparent);
  opacity:0;
  animation:passar 3.6s steps(24,end) infinite;
}
.v1{ top:30%; right:12%; animation-delay:.5s; }
.v2{ top:64%; right:8%;  animation-delay:2.1s; width:55%; }

@keyframes piscar{
  0%,100%{ opacity:1;   transform:translate(0,0); }
  8%     { opacity:0; }
  16%    { opacity:.9;  transform:translate(2px,-1px); }
  24%    { opacity:.2; }
  32%    { opacity:1;   transform:translate(-1px,1px); }
  44%    { opacity:0; }
  50%    { opacity:.85; transform:translate(0,0); }
  60%    { opacity:0; }
  66%    { opacity:1;   transform:translate(2px,2px); }
  78%    { opacity:.3; }
  88%    { opacity:.9;  transform:translate(-2px,0); }
}
@keyframes deslocar{
  0%,100%{ opacity:.85; transform:translate(0,0); }
  20%    { opacity:.3;  transform:translate(2px,0); }
  40%    { opacity:.9;  transform:translate(-2px,1px); }
  70%    { opacity:.2;  transform:translate(1px,-1px); }
}
@keyframes passar{
  0%,22%,100%{ opacity:0;   transform:translateX(0); }
  24%        { opacity:.85; transform:translateX(0); }
  26%        { opacity:0;   transform:translateX(6px); }
  27%        { opacity:.7;  transform:translateX(6px); }
  29%        { opacity:0; }
  52%        { opacity:0;   transform:translateX(0); }
  54%        { opacity:.6;  transform:translateX(-4px); }
  56%        { opacity:0;   transform:translateX(-4px); }
  78%        { opacity:0;   transform:translateX(0); }
  80%        { opacity:.75; transform:translateX(3px); }
  82%        { opacity:0; }
}

/* ---- o ceu: constelacao, particulas e riscos ---- */

.ceu{
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  overflow:hidden;
}

.constelacao{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:.85;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,
                     #000 30%, transparent 90%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,
                     #000 30%, transparent 90%);
}
.constelacao .fios line{ opacity:.5; }
/* as bolinhas brilhando: cada uma com seu proprio tempo */
.constelacao .astros circle{
  opacity:.6;
  animation:brilhar var(--t,3.4s) ease-in-out var(--d,0s) infinite;
}
@keyframes brilhar{
  0%,100%{ opacity:.28; }
  50%    { opacity:1; }
}

.particula{
  position:absolute;
  width:4px; height:4px;
  background:rgba(255,255,255,.55);
  border-radius:50%;
  box-shadow:0 0 10px rgba(255,255,255,.35);
  opacity:.5;
}
.p1{ top:18%; left:8%;  animation:vagar 14s ease-in-out infinite; }
.p2{ top:38%; left:22%; width:3px; height:3px; opacity:.45; animation:vagar 18s ease-in-out 2s infinite; }
.p3{ top:62%; left:12%; width:5px; height:5px; animation:vagar 12s ease-in-out 5s infinite; }
.p4{ top:78%; left:30%; width:3px; height:3px; opacity:.4;  animation:vagar-lado 16s ease-in-out 1s infinite; }
.p5{ top:14%; left:44%; width:3px; height:3px; opacity:.45; animation:vagar-lado 20s ease-in-out infinite; }
.p6{ top:28%; right:12%; width:4px; height:4px; animation:vagar 15s ease-in-out 3s infinite; }
.p7{ top:52%; right:22%; width:3px; height:3px; opacity:.45; animation:vagar 19s ease-in-out 6s infinite; }
.p8{ top:72%; right:8%;  width:5px; height:5px; animation:vagar-lado 13s ease-in-out 4s infinite; }

.particula.pulso{
  width:2px; height:2px;
  background:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.65);
  animation:pulsar 4.2s ease-in-out infinite;
}
.pp1{ top:24%; left:66%; animation-delay:.6s; }
.pp2{ top:58%; left:52%; animation-delay:2.2s; }
.pp3{ top:86%; right:28%; animation-delay:3.4s; }

@keyframes vagar{
  0%,100%{ transform:translate(0,0); opacity:.25; }
  20%    { opacity:.7; }
  50%    { transform:translate(6px,-22px); opacity:.55; }
  80%    { opacity:.35; }
}
@keyframes vagar-lado{
  0%,100%{ transform:translate(0,0); opacity:.25; }
  50%    { transform:translate(-10px,-14px); opacity:.6; }
}
@keyframes pulsar{
  0%,100%{ opacity:.15; transform:scale(1); }
  50%    { opacity:.9;  transform:scale(1.6); }
}

/* os riscos que atravessam a tela */
.risco{
  position:absolute; height:1px;
  background:linear-gradient(90deg, transparent,
    rgba(255,255,255,.55) 50%, transparent);
  opacity:0;
  transform-origin:center center;
}
.r1{ width:220px; top:32%; left:-240px;  animation:risco-dir  11s ease-in-out infinite; }
.r2{ width:160px; top:72%; right:-180px; animation:risco-esq  14s ease-in-out 5s infinite; }
.r3{ width:200px; top:18%; left:-220px;  animation:risco-sobe 13s ease-in-out 3s infinite; }
.r4{ width:260px; top:54%; left:-280px;  animation:risco-desce 10s ease-in-out 7s infinite; }
.r5{ width:140px; top:8%;  right:-160px; animation:risco-esq  12s ease-in-out 2s infinite; }

@keyframes risco-dir{
  0%,25%,100%{ opacity:0; transform:translateX(0); }
  30%        { opacity:.75; }
  60%        { opacity:.55; transform:translateX(120vw); }
  65%        { opacity:0;   transform:translateX(120vw); }
}
@keyframes risco-esq{
  0%,25%,100%{ opacity:0; transform:translateX(0); }
  30%        { opacity:.7; }
  60%        { opacity:.5; transform:translateX(-120vw); }
  65%        { opacity:0;  transform:translateX(-120vw); }
}
@keyframes risco-sobe{
  0%,25%,100%{ opacity:0; transform:rotate(-12deg) translateX(0); }
  30%        { opacity:.7; }
  60%        { opacity:.5; transform:rotate(-12deg) translateX(120vw); }
  65%        { opacity:0;  transform:rotate(-12deg) translateX(120vw); }
}
@keyframes risco-desce{
  0%,25%,100%{ opacity:0; transform:rotate(6deg) translateX(0); }
  30%        { opacity:.75; }
  60%        { opacity:.55; transform:rotate(6deg) translateX(120vw); }
  65%        { opacity:0;   transform:rotate(6deg) translateX(120vw); }
}

/* ---- a fala ---- */

.abertura .dentro{
  position:relative; z-index:3;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(20rem, 56%) 1fr;
  gap:clamp(2.5rem,5vw,4rem);
  align-items:center;
}

.marca-olho{
  display:inline-flex; align-items:center; gap:14px;
  margin:0 0 clamp(1.75rem,3vw,2.5rem);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.7rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
  opacity:0;
  animation:entrar 700ms var(--curva) 320ms forwards;
}
.marca-olho strong{
  color:var(--texto); font-weight:700;
  text-shadow:0 0 18px rgba(255,255,255,.42);
}
.risquinho{ width:1px; height:18px; background:rgba(255,255,255,.22); }

.abertura h1{
  margin:0 0 clamp(1.5rem,2.5vw,2rem);
  font-size:clamp(2.4rem, 4.6vw, 4.8rem);
  font-weight:500;
  font-variation-settings:'wght' 500,'wdth' 100;
  line-height:1.06;
  letter-spacing:-.035em;
  color:var(--texto);
  text-shadow:0 0 30px rgba(255,255,255,.06);
}
.abertura h1 .linha{ display:block; }
.abertura h1 em{
  font-style:normal;
  text-shadow:0 0 28px rgba(255,255,255,.32);
}
.abertura h1 .palavra{
  display:inline-block;
  opacity:0;
  animation:entrar 700ms var(--curva) forwards;
}
.linha:nth-child(1) .palavra:nth-child(1){ animation-delay:460ms; }
.linha:nth-child(1) .palavra:nth-child(2){ animation-delay:580ms; }
.linha:nth-child(2) .palavra:nth-child(1){ animation-delay:700ms; }
.linha:nth-child(2) .palavra:nth-child(2){ animation-delay:820ms; }
.linha:nth-child(2) .palavra:nth-child(3){ animation-delay:940ms; }
.linha:nth-child(3) em .palavra:nth-child(1){ animation-delay:1080ms; }
.linha:nth-child(3) em .palavra:nth-child(2){ animation-delay:1210ms; }
.linha:nth-child(3) em .palavra:nth-child(3){ animation-delay:1340ms; }

.abertura .sub{
  margin:0 0 clamp(2rem,3.5vw,3rem);
  max-width:34rem;
  font-size:clamp(1rem,1.1vw + .5rem,1.2rem);
  line-height:1.55;
  color:rgba(255,255,255,.74);
  opacity:0;
  animation:entrar 700ms var(--curva) 1550ms forwards;
}

.chamadas{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }

.pilula{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1.05rem 1.85rem;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:var(--preto);
  color:var(--texto);
  font-size:.8125rem; font-weight:700;
  font-variation-settings:'wght' 700,'wdth' 100;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none;
  transition:background .35s var(--curva), color .35s var(--curva),
             border-color .35s var(--curva), transform .25s var(--curva);
  opacity:0;
  animation:entrar 700ms var(--curva) 1750ms forwards;
}
.pilula:nth-child(2){ animation-delay:1850ms; }
.pilula:hover{
  background:var(--texto); color:#000; border-color:var(--texto);
  transform:translateY(-1px);
}
.pilula-vazia{ background:transparent; }

@keyframes entrar{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}

.rolar{
  position:absolute; left:var(--gutter); bottom:2rem;
  display:flex; align-items:center; gap:.75rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
  opacity:0; animation:acender .9s var(--curva) 2.4s forwards;
  z-index:4;
}
.rolar i{
  display:block; width:4.5rem; height:1px;
  background:rgba(255,255,255,.2);
  position:relative; overflow:hidden;
}
.rolar i::after{
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.75);
  transform:translateX(-100%);
  animation:varrer 2.4s var(--curva) infinite;
}
@keyframes varrer{
  0%{ transform:translateX(-100%); }
  60%,100%{ transform:translateX(100%); }
}

/* ---- celular: o robo vai para tras do texto ---- */
@media (max-width:64rem){
  .abertura{ padding-block:6.5rem 4rem; }
  .abertura .dentro{ grid-template-columns:1fr; }
  .robo-fundo{
    width:100%;
    object-position:center top;
    opacity:.32;
  }
  .veu{
    background:linear-gradient(180deg,
      rgba(0,0,0,.35) 0%, rgba(0,0,0,.72) 45%, #000 85%);
  }
  .ruido{ width:100%; }
  .luz-lado{ display:none; }
  .abertura h1{ font-size:clamp(2rem,9vw,2.9rem); }
}

/* ============================================================
   2. A VIRADA
   ============================================================ */

.virada{ border-top:1px solid var(--linha); }
.virada .dentro{ display:grid; gap:clamp(2rem,5vw,5rem); }
@media (min-width:56rem){
  .virada .dentro{ grid-template-columns:1fr 1fr; align-items:start; }
}
.errado{ list-style:none; margin:0; padding:0; }
.errado li{
  display:flex; align-items:baseline; gap:1rem;
  padding-block:1.1rem;
  border-bottom:1px solid var(--linha);
  color:var(--texto-2);
}
.errado li b{
  font-family:'JetBrains Mono',monospace;
  font-size:.6875rem; font-weight:500; letter-spacing:.12em;
  color:var(--destaque-2); flex:none; width:2.5rem;
}

/* ============================================================
   3. QUEM ESTA NO COMANDO. a prova e o quem e no mesmo bloco.
   ============================================================ */

.autoridade{ border-top:1px solid var(--linha); }

.autoridade .dentro{
  display:grid;
  gap:clamp(2.75rem,5vw,4.5rem);
  align-items:center;
}
@media (min-width:60rem){
  .autoridade .dentro{ grid-template-columns:minmax(0,.86fr) minmax(0,1fr); }
}

/* ---- o retrato ---- */

.retrato{ position:relative; margin:0; }

/* cantoneiras: o futurismo vem da estrutura, nao do brilho */
.retrato::before,.retrato::after{
  content:''; position:absolute;
  width:2.25rem; height:2.25rem;
  border:1px solid var(--destaque);
  pointer-events:none;
}
.retrato::before{ top:-.5rem; left:-.5rem; border-right:0; border-bottom:0; }
/* canto de baixo fica na esquerda: a direita e dos cartoes */
.retrato::after { bottom:-.5rem; left:-.5rem; border-right:0; border-top:0; }

.retrato img{
  width:100%;
  aspect-ratio:3/4;
  border:1px solid var(--linha);
  background:var(--superficie);
  object-fit:cover;
  object-position:50% 12%;
  display:block;
}

/* ---- os dois numeros que provam a fala ---- */

.cartoes{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--linha);
  border:1px solid var(--linha);
  border-top:0;
}
.cartao{ background:var(--preto); padding:1.15rem 1.25rem; }
.cartao .v{
  margin:0 0 .35rem;
  font-size:clamp(1.5rem,3.4vw,2.125rem);
  font-weight:900;
  font-variation-settings:'wght' 900,'wdth' 112;
  letter-spacing:-.035em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.cartao .r{
  margin:0;
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  line-height:1.5;
  color:var(--texto-2);
  max-width:none;
}
@media (min-width:60rem){
  .cartoes{
    position:absolute; z-index:2;
    right:-1.5rem; bottom:1.75rem;
    width:14.5rem;
    grid-template-columns:1fr;
    border-top:1px solid var(--linha);
  }
}

/* ---- a fala ---- */

.autoridade h2 em{
  font-style:normal;
  color:var(--texto);
  text-shadow:0 0 28px rgba(255,255,255,.34);
}

.assina{
  margin:clamp(2rem,3.5vw,2.75rem) 0 0;
  padding-top:1.5rem;
  font-size:1.0625rem; font-weight:800;
  font-variation-settings:'wght' 800,'wdth' 100;
  letter-spacing:-.01em;
  position:relative;
}
.assina::before{
  content:''; position:absolute; top:0; left:0;
  width:2.5rem; height:1px; background:var(--destaque);
}

.canais{
  list-style:none; margin:1.75rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.75rem 2.5rem;
}
.canais li{ display:flex; align-items:baseline; gap:.6rem; }
.canais span{
  font-family:'JetBrains Mono',monospace;
  font-size:.625rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto-2);
}
.canais b{
  font-weight:500; font-size:1rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* ============================================================
   4. SEM APARECER. secao mais escura do site.
   A imagem e lida em pontos e uma varredura passa por ela.
   E a versao nativa do componente que o cliente mandou: mesma
   ideia de leitura por pontos e linha que corre, sem React,
   sem WebGPU e sem baixar nada de fora.
   ============================================================ */

.robo{
  background:
    radial-gradient(ellipse 62% 54% at 50% 44%, #0E0E0E 0%, #000 68%),
    var(--preto-fundo);
  padding-block:clamp(4rem,9vw,8rem);
  overflow:hidden;
  position:relative;
}
/* emenda com as secoes vizinhas: sem corte seco */
.robo::before,.robo::after{
  content:''; position:absolute; left:0; right:0; height:9rem;
  pointer-events:none; z-index:2;
}
.robo::before{ top:0;    background:linear-gradient(var(--preto),transparent); }
.robo::after { bottom:0; background:linear-gradient(transparent,var(--preto)); }

.robo .dentro{
  position:relative; z-index:3;
  display:grid; gap:clamp(2rem,4vw,3.5rem);
  align-items:center;
}
@media (min-width:60rem){
  .robo .dentro{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
}

.varredura{
  position:relative;
  aspect-ratio:4/5;
  max-width:min(90%, 24rem);
  margin-inline:auto;
  order:-1;
}
/* margin-inline:auto faz o item encolher em vez de esticar na coluna,
   e ai o canvas cai no tamanho padrao dele, 300px. no desktop a
   centralizacao nao e mais necessaria. */
@media (min-width:60rem){
  .varredura{ order:0; max-width:none; margin-inline:0; }
}

.varredura canvas{
  width:100%; height:100%;
  display:block;
  -webkit-mask-image:radial-gradient(ellipse 76% 80% at 50% 48%,
                     #000 40%, transparent 84%);
          mask-image:radial-gradient(ellipse 76% 80% at 50% 48%,
                     #000 40%, transparent 84%);
}

.varredura .etiqueta{
  position:absolute; left:50%; bottom:-.25rem;
  transform:translateX(-50%);
  margin:0;
  font-size:.5625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--texto-2); opacity:.55;
  white-space:nowrap;
}

/* ============================================================
   5. O METODO. fundo em movimento + cartoes.
   ============================================================ */

.metodo{
  border-top:1px solid var(--linha);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.metodo .dentro{ position:relative; z-index:1; }

/* ---- o fundo que se mexe. um elemento so, composto. ---- */

.malha{
  position:absolute; inset:0;
  z-index:0; pointer-events:none;
  overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 50%,
                     #000 18%, transparent 82%);
          mask-image:radial-gradient(ellipse 78% 68% at 50% 50%,
                     #000 18%, transparent 82%);
}

/* a grade anda devagar na diagonal. linha de 1px, cor chapada. */
.malha .grade{
  position:absolute; inset:-8rem;
  background-image:
    repeating-linear-gradient(90deg, var(--linha) 0 1px, transparent 1px 7rem),
    repeating-linear-gradient(0deg,  var(--linha) 0 1px, transparent 1px 7rem);
  opacity:.6;
  will-change:transform;
  animation:derivar 28s linear infinite;
}
@keyframes derivar{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-7rem,-7rem,0); }
}

/* o sinal que desce pela grade. mesma linguagem da rota da abertura. */
.malha .pulso{
  position:absolute;
  left:var(--x,20%); top:-22%;
  width:1px; height:22%;
  background:var(--destaque);
  opacity:.5;
  will-change:transform;
  animation:descer var(--dur,18s) linear var(--atraso,0s) infinite;
}
@keyframes descer{
  from{ transform:translateY(0); }
  to  { transform:translateY(560%); }
}

/* ---- os cartoes ---- */

.pilares{
  list-style:none; margin:clamp(2.5rem,5vw,4rem) 0 0; padding:0;
  display:grid;
  gap:clamp(.9rem,1.4vw,1.15rem);
  grid-template-columns:1fr;
}
@media (min-width:46rem){
  .pilares{ grid-template-columns:repeat(6,1fr); }
  .pilar{ grid-column:span 3; }
  .pilar:nth-child(5){ grid-column:span 6; }
}
@media (min-width:64rem){
  .pilar{ grid-column:span 2; }
  .pilar:nth-child(4),.pilar:nth-child(5){ grid-column:span 3; }
}

.pilar{
  position:relative;
  background:var(--preto);
  border:1px solid var(--linha);
  padding:clamp(1.6rem,2.6vw,2.25rem);
  transition:opacity .9s var(--curva), transform .9s var(--curva),
             border-color .35s linear, background .35s linear;
}
/* o stagger da secao nao serve aqui: sao cinco, e a ordem e a leitura */
.metodo .pilares .pilar.sobe{ transition-delay:calc(var(--i) * .08s); }

.pilar:hover{
  background:var(--superficie);
  border-color:var(--destaque);
}

/* filete que desenha no topo quando o cartao entra */
.pilar::before{
  content:''; position:absolute; left:-1px; right:-1px; top:-1px;
  height:1px; background:var(--destaque);
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--curva) calc(var(--i) * .1s + .2s);
}
.pilar.visivel::before{ transform:scaleX(1); }

.pilar .n{
  position:absolute; top:clamp(1rem,2vw,1.4rem); right:clamp(1rem,2vw,1.4rem);
  margin:0;
  font-size:clamp(2.25rem,4.5vw,3.25rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--linha);
  transition:color .35s linear;
}
.pilar:hover .n{ color:var(--destaque); }

.pilar h3{ color:var(--texto); padding-right:3.5rem; }
.pilar .etapa{
  margin:.7rem 0 1.1rem;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--destaque-2);
}
.pilar .desc{ margin:0; color:var(--texto-2); font-size:.9375rem; }

/* ============================================================
   6. O CANAL. palco de tablets, portado do mazyos.com.br.
   Tres telas giram entre tres posicoes fixas: esquerda virada,
   centro de frente, direita virada. Nao e esteira continua.
   ============================================================ */

.canal{ border-top:1px solid var(--linha); overflow:hidden; }

.telas{
  /* largura da tela e o quanto ela anda para o lado */
  --lt:   clamp(19rem, 38vw, 33.75rem);
  --desl: clamp(11rem, 24vw, 21.25rem);

  position:relative;
  display:flex; align-items:center; justify-content:center;
  margin-top:clamp(2.5rem,5vw,3.5rem);
  min-height:calc(var(--lt) * .88);
  perspective:1600px;
  transform-style:preserve-3d;
}

.tela{
  position:absolute; left:50%; top:50%;
  width:var(--lt);
  aspect-ratio:730 / 560;
  margin-left:calc(var(--lt) / -2);
  margin-top:calc(var(--lt) * -.3836);   /* metade da altura */
  background:url('../canal/tablet.png') center center / contain no-repeat;
  /* sombra preta, sem cor: continua valendo a regra de cor solida */
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
  opacity:0;
  will-change:transform, opacity, filter;
  transform-style:preserve-3d;
}

/* a tela de dentro do aparelho */
.vidro{
  position:absolute;
  top:3.6%; left:3%; right:3%; bottom:4%;
  border-radius:10px;
  overflow:hidden;
  background:var(--preto);
}
.vidro img{
  width:100%; height:100%;
  object-fit:contain;      /* 16:9 dentro de tela 4:3, como um player */
  display:block;
  transition:opacity .45s ease;
}

/* botao de play parado. a unica coisa que se mexe aqui e o giro. */
.tela .play{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:4.5rem; height:4.5rem;
  border:2px solid var(--texto);
  border-radius:50%;
  /* escurece so o disco: em miniatura clara o anel branco sumia */
  background:rgba(5,5,5,.38);
  display:grid; place-items:center;
  z-index:3;
}
.tela .play::after{
  content:'';
  width:0; height:0; margin-left:.3rem;
  border-left:.95rem solid var(--texto);
  border-top:.62rem solid transparent;
  border-bottom:.62rem solid transparent;
}

.tela .barra{
  position:absolute; left:6%; right:6%; bottom:5%;
  height:3px; border-radius:999px;
  background:rgba(250,250,249,.18);
  overflow:hidden; z-index:3;
}
.tela .barra i{
  display:block; height:100%;
  width:var(--p,30%);
  background:var(--destaque);
  border-radius:999px;
}

/* posicoes de partida, antes de o giro comecar */
.tela-esq { transform:translate3d(calc(var(--desl) * -1),28px,0) rotateY(26deg) scale(.78); }
.tela-meio{ transform:translate3d(0,0,80px) rotateY(0deg) scale(1); }
.tela-dir { transform:translate3d(var(--desl),28px,0) rotateY(-26deg) scale(.78); }

/* uma volta de 21s. cada tela entra com um terco de atraso, entao
   sempre tem uma no centro.

   duas diferencas para o original do mazyos: a volta e quase o dobro
   mais lenta, e o sumico no fim e gradual. la a tela ia de opaca a
   invisivel em 3% da volta e piscava. aqui ela apaga entre 84% e 92%,
   troca de lado invisivel, e volta acendendo ate 100%.

   o brilho saiu daqui de proposito: animar filter forca repintura a
   cada quadro e era o que fazia parecer travado. quem escurece as
   telas do lado agora e uma camada por cima do vidro, so com opacity,
   que o navegador resolve na placa. aqui so anda transform e opacity. */
@keyframes girar-telas{
  0%,26%{
    transform:translate3d(calc(var(--desl) * -1),28px,0) rotateY(26deg) scale(.78);
    opacity:1; z-index:1;
  }
  33.33%,60%{
    transform:translate3d(0,0,80px) rotateY(0deg) scale(1);
    opacity:1; z-index:3;
  }
  66.66%,84%{
    transform:translate3d(var(--desl),28px,0) rotateY(-26deg) scale(.78);
    opacity:1; z-index:1;
  }
  92%{
    transform:translate3d(calc(var(--desl) + 9rem),44px,-320px) rotateY(-40deg) scale(.56);
    opacity:0; z-index:0;
  }
  93%{
    transform:translate3d(calc((var(--desl) + 9rem) * -1),44px,-320px) rotateY(40deg) scale(.56);
    opacity:0; z-index:0;
  }
  100%{
    transform:translate3d(calc(var(--desl) * -1),28px,0) rotateY(26deg) scale(.78);
    opacity:1; z-index:1;
  }
}

/* a sombra fica fora do giro: e a camada de cima que escurece */
@keyframes escurecer-tela{
  0%,26%{ opacity:.55; }
  33.33%,60%{ opacity:0; }
  66.66%,84%{ opacity:.55; }
  100%{ opacity:.55; }
}

.tela .vidro::after{
  content:'';
  position:absolute; inset:0;
  background:var(--preto-fundo);
  opacity:0;
  pointer-events:none;
  z-index:2;
}
.tela-esq .vidro::after,
.tela-dir .vidro::after{ opacity:.55; }

.canal.visivel .tela{
  animation:girar-telas 21s cubic-bezier(.65,0,.35,1) infinite;
}
.canal.visivel .tela .vidro::after{
  animation:escurecer-tela 21s cubic-bezier(.65,0,.35,1) infinite;
}
.canal.visivel .tela-esq,
.canal.visivel .tela-esq  .vidro::after{ animation-delay:  0s; }
.canal.visivel .tela-meio,
.canal.visivel .tela-meio .vidro::after{ animation-delay: -7s; }
.canal.visivel .tela-dir,
.canal.visivel .tela-dir  .vidro::after{ animation-delay: -14s; }

/* no celular o giro 3D nao cabe: vira faixa que desliza de um em um */
@media (max-width:56rem){
  .telas{
    display:flex; flex-direction:row;
    align-items:center; justify-content:flex-start;
    gap:1rem;
    margin-inline:calc(var(--gutter) * -1);
    padding:.75rem 8vw 1.75rem;
    perspective:none;
    min-height:auto;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding:0 8vw;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .telas::-webkit-scrollbar{ display:none; }
  .tela .vidro::after{ opacity:0 !important; animation:none !important; }

  .tela,.tela-esq,.tela-meio,.tela-dir{
    position:relative; left:auto; top:auto;
    margin:0;
    flex:0 0 84vw; max-width:27.5rem;
    scroll-snap-align:center;
    animation:none !important;
    transform:none;
    filter:drop-shadow(0 16px 30px rgba(0,0,0,.5));
    opacity:1;
  }
}

.acoes.esq{ justify-content:flex-start; }

/* ============================================================
   7. O CURSO
   ============================================================ */

.curso{
  border-top:1px solid var(--linha);
  /* fecha a pagina sem deixar um vao no fim */
  padding-bottom:clamp(4rem,7vw,7rem);
}

.vsl{
  margin-top:clamp(2.5rem,5vw,4rem);
  border:1px solid var(--linha);
  background:var(--preto-fundo);
  aspect-ratio:16/9;
  position:relative; overflow:hidden;
}
/* o player ocupa a caixa inteira, como na landing atual */
.vsl vturb-smartplayer{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  z-index:1;
}
/* fica atras do player: some sozinha quando o video pinta por cima */
.vsl .espera{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:0; margin:0;
  font-family:'JetBrains Mono',monospace;
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto-2); text-align:center;
}

/* ---- a decisao, logo abaixo do video ---- */

.decisao{
  margin-top:clamp(2.25rem,4vw,3rem);
  padding-top:clamp(2rem,3.5vw,2.75rem);
  border-top:1px solid var(--linha);
}
.chamada{
  margin:0 0 clamp(1.5rem,2.5vw,2rem);
  max-width:22ch;
  font-size:clamp(1.35rem,2.6vw,2rem);
  font-weight:800;
  font-variation-settings:'wght' 800,'wdth' 104;
  letter-spacing:-.03em;
  line-height:1.1;
}
/* uma linha no lugar dos tres quadrados de antes */
.condicoes{
  margin:1.5rem 0 0; max-width:none;
  font-family:'JetBrains Mono',monospace;
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  line-height:1.9;
  color:var(--texto-2);
}
.condicoes b{ color:var(--destaque-2); font-weight:400; margin-inline:.4rem; }

/* ---- o que entra: etiquetas, nao doze caixas ---- */

.entregas{
  list-style:none; margin:clamp(2.5rem,5vw,3.5rem) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.65rem;
}
.entregas li{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid var(--linha);
  padding:.6rem 1rem;
  font-size:.875rem;
  color:var(--texto-2);
  transition:border-color .3s linear, color .3s linear;
}
.entregas li::before{
  content:''; flex:none;
  width:5px; height:5px; background:var(--destaque);
}
.entregas li:hover{ border-color:var(--destaque); color:var(--texto); }

/* ============================================================
   8. FECHAMENTO
   ============================================================ */

.fecha{
  border-top:1px solid var(--linha);
  background:var(--preto-fundo);
  text-align:center;
}
/* p tem max-width:60ch. sem isso o bloco fica a esquerda mesmo centrado. */
.fecha p{ margin-inline:auto; }
.fecha .olho{ justify-content:center; }
.fecha .olho::after{ display:none; }
.acoes{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
}
.rodape{
  border-top:1px solid var(--linha);
  padding:2.5rem var(--gutter);
  display:flex; flex-wrap:wrap; gap:1.25rem;
  align-items:center; justify-content:space-between;
  font-size:.8125rem; color:var(--texto-2);
}
.rodape a{ color:var(--texto-2); text-decoration:none; }
.rodape a:hover{ color:var(--destaque-2); }
.rodape nav{ display:flex; gap:1.5rem; flex-wrap:wrap; }

/* ============================================================
   PAGINA DO CURSO
   ============================================================ */

.capa{
  padding-block:clamp(8rem,14vw,12rem) clamp(3rem,7vw,6rem);
  padding-inline:var(--gutter);
  border-bottom:1px solid var(--linha);
}
.capa h1{ font-size:clamp(2.25rem,7vw,6rem); }
.capa h1 + .grande{ margin-top:2rem; }
.ferramentas{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:clamp(2rem,4vw,3rem);
  padding:0; list-style:none;
}
.ferramentas li{
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem; letter-spacing:.06em;
  border:1px solid var(--linha);
  padding:.55rem .9rem;
  color:var(--texto-2);
  transition:border-color .3s linear, color .3s linear;
}
.ferramentas li:hover{ border-color:var(--destaque); color:var(--texto); }

/* ============================================================
   MOVIMENTO REDUZIDO. exigencia de severidade alta.
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .sobe{ opacity:1; transform:none; }
  .malha{ display:none; }
  .canal.visivel .tela,
  .canal.visivel .tela .vidro::after{ animation:none; }
  .tela{ opacity:1; }
  .pilar::before{ transform:scaleX(1); }
  .rolar{ opacity:1; }
  .olho::after{ transform:scaleX(1); }
}