/* LIZ'S · Portfólio de projetos 2026 — site
   Paleta e tipografia do manual da marca: preto/branco, violeta de acento, amarelo só sobre escuro,
   Space Grotesk nos títulos e IBM Plex Sans no texto. Único grafismo: anéis de traço grosso. */
:root{
  --preto:#050505; --branco:#fff; --off:#F4F3F6; --linha:#E3E1E8;
  --cinza:#5E5C66; --cinza2:#8D8A96; --escuro2:#121115; --escuro3:#1E1D22;
  --violeta:#A020F0; --amarelo:#FFF200; --eloar:#901812; --ouro:#d0a94b;
  --largura:1200px; --raio:18px;
  --sombra:0 18px 40px rgba(5,5,5,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;color:var(--preto);background:var(--branco);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,.sg{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.wrap{max-width:var(--largura);margin:0 auto;padding:0 28px}
.label{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.v{color:var(--violeta)}
.dark{background:var(--preto);color:#fff}
.soft{background:var(--off)}
html,body{overflow-x:hidden}
section{position:relative;overflow:hidden}
.secao{padding:120px 0}
.secao-cab{max-width:760px;margin-bottom:56px}
.secao-cab .label{color:var(--violeta)}
.secao-cab h2{font-size:clamp(34px,4.6vw,56px);margin-top:14px}
.secao-cab p{font-size:18px;color:var(--cinza);margin-top:18px;max-width:640px}
.dark .secao-cab p{color:#B9B6C2}
:focus-visible{outline:3px solid var(--violeta);outline-offset:3px;border-radius:6px}

/* ---------- Anéis ---------- */
.anel{position:absolute;border-radius:50%;border-style:solid;pointer-events:none;will-change:transform}
.anel.v{border-color:var(--violeta)} .anel.b{border-color:#fff} .anel.a{border-color:var(--amarelo)} .anel.p{border-color:var(--preto)}

/* ---------- Barra de progresso e topo ---------- */
.progresso{position:fixed;top:0;left:0;height:3px;width:0;background:var(--violeta);z-index:60}
.topo{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .35s,box-shadow .35s,padding .35s;padding:18px 0}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.topo.rolou{background:rgba(5,5,5,.92);backdrop-filter:blur(10px);padding:10px 0;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.marca img{width:42px;height:42px}
.marca b{font-family:'Space Grotesk';font-size:19px;letter-spacing:.06em}
.marca span{display:block;font-size:11px;color:#BDBAC6;letter-spacing:0;font-weight:400}
.menu{display:flex;gap:28px;align-items:center}
.menu a{text-decoration:none;color:#D7D5DD;font-family:'Space Grotesk';font-weight:500;font-size:14px;transition:color .2s}
.menu a:hover,.menu a.ativo{color:#fff}
.menu a.ativo{box-shadow:0 2px 0 var(--violeta)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;font-size:15px;text-decoration:none;border-radius:99px;padding:13px 24px;transition:transform .2s,background .2s,color .2s,box-shadow .2s;cursor:pointer;border:0}
.btn:hover{transform:translateY(-2px)}
.btn-v{background:var(--violeta);color:#fff;box-shadow:0 10px 26px rgba(160,32,240,.35)}
.btn-b{background:#fff;color:var(--preto)}
.btn-o{border:2px solid currentColor;background:transparent}
.btn svg{width:18px;height:18px}
.topo .btn{padding:10px 18px;font-size:14px}
.abrir-menu{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:6px}
.abrir-menu svg{width:28px;height:28px}

/* ---------- Ícones ---------- */
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Herói ---------- */
.heroi{min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:140px 0 120px}
.heroi .wrap{position:relative;z-index:2;width:100%}
.heroi .label{color:#BDBAC6}
.heroi h1{font-size:clamp(30px,9.2vw,128px);line-height:.93;letter-spacing:-.04em;margin-top:22px}
.heroi h1 .palavra{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.heroi h1 .palavra>span{display:inline-block;transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.heroi.pronto h1 .palavra>span{transform:none}
.heroi .sub{font-size:clamp(17px,1.6vw,20px);color:#D7D5DD;max-width:600px;margin-top:30px}
.heroi .acoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.heroi .anel{transition:transform .1s linear}
.heroi-a1{width:620px;height:620px;border-width:124px;right:-200px;top:-170px}
.heroi-a2{width:280px;height:280px;border-width:56px;right:22%;bottom:-120px}
.heroi-a3{width:96px;height:96px;border-width:19px;right:12%;bottom:24%}
.faixa{position:absolute;left:0;right:0;bottom:0;border-top:1px solid #222127;background:var(--preto);padding:18px 0;overflow:hidden;z-index:2}
.faixa-trilho{display:flex;gap:56px;width:max-content;animation:desliza 38s linear infinite}
.faixa span{font-family:'Space Grotesk';font-weight:500;font-size:15px;color:#9C99A6;white-space:nowrap;display:flex;align-items:center;gap:56px}
.faixa span::after{content:"";width:9px;height:9px;border-radius:50%;border:2.5px solid var(--violeta)}
@keyframes desliza{to{transform:translateX(-50%)}}

/* ---------- Revelar ao rolar ---------- */
.revela{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.revela.visivel{opacity:1;transform:none}
.revela[data-atraso="1"]{transition-delay:.12s}.revela[data-atraso="2"]{transition-delay:.24s}
.revela[data-atraso="3"]{transition-delay:.36s}.revela[data-atraso="4"]{transition-delay:.48s}

/* ---------- Quem somos ---------- */
.sobre{display:grid;grid-template-columns:420px 1fr;gap:72px;align-items:center}
.sobre-foto{position:relative}
.sobre-foto img{border-radius:28px;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;width:100%}
.sobre-foto .anel{width:150px;height:150px;border-width:30px;right:-50px;top:-50px}
.sobre h2{font-size:clamp(36px,4.4vw,58px)}
.sobre p{font-size:18px;margin-top:22px;max-width:620px}
.numeros{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--preto);margin-top:40px}
.numeros div{padding:20px 16px 0 0}
.numeros b{display:block;font-family:'Space Grotesk';font-size:clamp(36px,4vw,52px);letter-spacing:-.03em;line-height:1}
.numeros div:first-child b{color:var(--violeta)}
.numeros.cinco{grid-template-columns:repeat(5,1fr)}
.numeros span{display:block;font-size:14px;color:var(--cinza);margin-top:8px;line-height:1.4}

/* ---------- Frentes ---------- */
.frentes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.frente{background:var(--escuro2);border:1.5px solid #2B2A30;border-radius:22px;padding:30px;transition:transform .35s,border-color .35s,background .35s}
.frente:hover{transform:translateY(-6px);border-color:var(--violeta);background:#16151a}
.frente .topo-f{display:flex;justify-content:space-between;align-items:center}
.frente .ic{width:30px;height:30px}
.frente .num{font-family:'Space Grotesk';font-weight:700;color:var(--violeta)}
.frente h3{font-size:24px;margin-top:54px}
.frente p{color:#C3C0CB;font-size:15px;margin-top:10px}
.etiquetas{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.etiqueta{font-family:'Space Grotesk';font-weight:500;font-size:12px;border:1.5px solid var(--preto);border-radius:99px;padding:3px 11px}
.dark .etiqueta{border-color:#45434b;color:#E9E7EE}

/* ---------- Visão geral (projetos) ---------- */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.filtro{font-family:'Space Grotesk';font-weight:500;font-size:14px;border:1.5px solid var(--preto);background:#fff;border-radius:99px;padding:8px 18px;cursor:pointer;transition:background .2s,color .2s}
.filtro.ativo,.filtro:hover{background:var(--preto);color:#fff}
.lista-proj{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.proj{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--linha);border-radius:18px;padding:22px;text-decoration:none;transition:transform .3s,box-shadow .3s,border-color .3s,opacity .3s}
.proj:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--preto)}
.proj.oculto{display:none}
.proj .cli{font-family:'Space Grotesk';font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza2)}
.proj b{font-family:'Space Grotesk';font-size:19px;line-height:1.2;margin-top:8px}
.proj .rodape-p{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:20px}
.proj .fmt-t{font-family:'Space Grotesk';font-weight:500;font-size:12px;border:1.5px solid var(--preto);border-radius:99px;padding:2px 10px;white-space:nowrap}
.proj .fmt-t.app{background:var(--preto);color:#fff}
.proj .st{font-size:13px;color:var(--cinza);text-align:right}
.proj .st b{font-size:13px;color:var(--violeta);font-family:'IBM Plex Sans';font-weight:600}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}

/* ---------- Caixa de formato ---------- */
.fmt{display:flex;gap:14px;align-items:flex-start;border:2px solid var(--violeta);border-radius:18px;padding:18px 20px;background:#fff;margin-top:26px}
.fmt>.ic{color:var(--violeta);width:26px;height:26px;margin-top:2px}
.fmt small{display:block;font-family:'Space Grotesk';font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--violeta)}
.fmt b{display:block;font-family:'Space Grotesk';font-size:18px;margin-top:3px;line-height:1.25}
.fmt span{display:block;font-size:15px;color:#2A292E;margin-top:4px}
.fmt.loja{background:var(--preto);border-color:var(--preto);color:#fff}
.fmt.loja>.ic,.fmt.loja small{color:var(--amarelo)}
.fmt.loja span{color:#D7D5DD}
.dark .fmt{background:#121115}
.dark .fmt span{color:#D7D5DD}
.duas .fmt{margin-top:0}

/* ---------- Casos ---------- */
.caso{padding:110px 0;overflow:hidden}
.caso-grade{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
.caso-grade>*,.sobre>*,.contato>*,.elo-grade>*,.duas>*{min-width:0}
.caso.inverte .caso-grade{grid-template-columns:1.15fr 1fr}
.caso.inverte .caso-txt{order:2}
.caso-cli{font-family:'Space Grotesk';font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--violeta)}
.caso h2{font-size:clamp(32px,3.6vw,48px);margin-top:12px}
.metas{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:20px}
.metas div{font-size:14px;line-height:1.4}
.metas b{display:block;font-family:'Space Grotesk';font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza2);margin-bottom:3px}
.dark .metas div{color:#E9E7EE}
.caso-txt>p{font-size:17px;margin-top:20px}
.dark .caso-txt>p{color:#D7D5DD}
ul.ok{list-style:none;display:grid;gap:10px;margin-top:20px}
ul.ok li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5}
ul.ok li::before{content:"";flex:none;width:12px;height:12px;margin-top:6px;border-radius:50%;border:3px solid var(--violeta)}
.dark ul.ok li{color:#E9E7EE}
.link-demo{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:'Space Grotesk';font-weight:700;font-size:15px;text-decoration:none;border-bottom:2px solid var(--violeta);padding-bottom:2px}
.link-demo svg{width:16px;height:16px}
.nota{font-family:'Space Grotesk';font-weight:500;font-size:12.5px;color:var(--cinza);margin-top:14px;letter-spacing:.02em}
.dark .nota{color:#9C99A6}
.selo-prod{display:inline-block;font-family:'Space Grotesk';font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;background:var(--amarelo);color:var(--preto);border-radius:99px;padding:6px 14px;margin-bottom:14px}

/* ---------- Molduras ---------- */
.cel{border:7px solid var(--preto);border-radius:30px;overflow:hidden;background:#000;box-shadow:0 22px 46px rgba(5,5,5,.22);flex:none;cursor:zoom-in;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.cel:hover{transform:translateY(-8px)}
.cel img{width:100%}
.tela{border:1.5px solid var(--preto);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--sombra);cursor:zoom-in;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.tela:hover{transform:translateY(-6px)}
.tela .barra{background:var(--off);padding:9px 12px;display:flex;gap:6px;align-items:center;border-bottom:1.5px solid var(--preto)}
.tela .barra i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--preto)}
.tela .barra span{margin-left:10px;flex:1;background:#fff;border-radius:6px;font-size:11px;padding:2px 10px;color:var(--cinza);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leg{font-family:'Space Grotesk';font-weight:500;font-size:12.5px;color:var(--cinza);margin-top:12px;line-height:1.4}
.leg b{color:var(--preto)}
.dark .leg{color:#9C99A6}
.dark .leg b{color:#fff}
.trilho{display:flex;gap:18px;align-items:flex-end}
.trilho.centro{justify-content:center}
.post{border-radius:10px;overflow:hidden;box-shadow:0 12px 26px rgba(5,5,5,.16);flex:none;cursor:zoom-in;transition:transform .35s}
.post:hover{transform:translateY(-6px) rotate(-.6deg)}
.vid{border-radius:14px;overflow:hidden;box-shadow:0 16px 34px rgba(5,5,5,.24);flex:none;cursor:zoom-in;transition:transform .35s}
.vid:hover{transform:translateY(-6px)}
.empilha{position:relative}
.empilha .cel.sobre-tela{position:absolute;right:-18px;bottom:-34px;width:150px}

/* ---------- Elô ---------- */
.elo{background:#14080a;color:#fff;padding:120px 0;overflow:hidden}
.elo .anel{border-color:var(--eloar)}
.elo-grade{display:grid;grid-template-columns:1fr 320px 1fr;gap:48px;align-items:center}
.elo .caso-cli{color:#f0a19b}
.elo h2{font-size:clamp(34px,4vw,54px);margin-top:12px}
.elo p{color:#E6D9D7;font-size:17px;margin-top:20px}
.elo-num{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;margin-top:30px;border-top:2px solid #3a1c1f;padding-top:22px}
.elo-num b{display:block;font-family:'Space Grotesk';font-size:40px;letter-spacing:-.03em;line-height:1}
.elo-num div:first-child b{color:#ff6b5e}
.elo-num span{display:block;font-size:13.5px;color:#C9B4B1;margin-top:6px;line-height:1.35}
.fone{width:320px;height:640px;border:10px solid #050505;border-radius:44px;background:#efe8dd;overflow:hidden;position:relative;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.fone .entalhe{position:absolute;top:0;left:50%;transform:translateX(-50%);width:110px;height:24px;background:#050505;border-radius:0 0 16px 16px;z-index:3}
.fone-cab{background:var(--eloar);color:#fff;padding:32px 14px 12px;display:flex;align-items:center;gap:10px}
.fone-cab img{width:36px;height:36px;border-radius:50%}
.fone-cab b{display:block;font-family:'Space Grotesk';font-size:14px;line-height:1.1}
.fone-cab span{display:flex;align-items:center;gap:5px;font-size:11px;color:#f1d9d6}
.fone-cab span::before{content:"";width:7px;height:7px;border-radius:50%;background:#7CFF8A}
.conversa{padding:10px 10px;display:flex;flex-direction:column;gap:8px}
.bolha{max-width:84%;padding:8px 11px;border-radius:14px;font-size:12.5px;line-height:1.4;background:#fff;color:var(--preto);opacity:0;transform:translateY(10px) scale(.98);transition:opacity .45s,transform .45s}
.bolha.mostra{opacity:1;transform:none}
.bolha.sai{background:var(--eloar);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.bolha.entra{border-bottom-left-radius:4px}
.bolha.equipe{background:#fff;border:1.5px solid var(--preto);margin-left:auto}
.bolha .hora{display:block;text-align:right;font-size:9.5px;opacity:.6;margin-top:3px}
.aviso-pausa{align-self:center;font-family:'Space Grotesk';font-weight:500;font-size:11px;background:#fff;color:var(--preto);border:1.5px solid var(--eloar);border-radius:99px;padding:4px 12px;display:flex;gap:6px;align-items:center;opacity:0;transition:opacity .45s}
.aviso-pausa.mostra{opacity:1}
.aviso-pausa .ic{width:13px;height:13px;color:var(--eloar)}
.digitando{display:flex;gap:4px;padding:10px 12px;background:#fff;border-radius:14px;width:fit-content;opacity:0;transition:opacity .25s}
.digitando.mostra{opacity:1}
.digitando.direita{margin-left:auto;background:var(--eloar)}
.digitando i{width:7px;height:7px;border-radius:50%;background:#B9B6C2;animation:pisca 1s infinite}
.digitando.direita i{background:#f1d9d6}
.digitando i:nth-child(2){animation-delay:.15s}.digitando i:nth-child(3){animation-delay:.3s}
@keyframes pisca{0%,100%{opacity:.3}50%{opacity:1}}
.elo-passos{display:grid}
.elo-passo{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid #3a1c1f;opacity:.35;transition:opacity .5s}
.elo-passo.ativo{opacity:1}
.elo-passo:last-child{border-bottom:0}
.elo-passo .n{width:34px;height:34px;border-radius:50%;border:3px solid #fff;display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:13px}
.elo-passo.ativo .n{border-color:#ff6b5e}
.elo-passo b{display:block;font-family:'Space Grotesk';font-size:17px;line-height:1.2}
.elo-passo span{display:block;font-size:14px;color:#C9B4B1;margin-top:3px}

/* ---------- AlphaGreen ---------- */
.alpha{background:#080706;color:#f3ecdd;padding:120px 0;overflow:hidden}
.alpha .caso-cli{color:var(--ouro)}
.alpha h2{font-size:clamp(32px,4vw,52px);margin-top:4px;color:#fff;max-width:900px}
.alpha .metas div{color:#E9E1CC}
.alpha .metas b{color:#a89877}
.alpha-fluxo{margin-top:46px;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);cursor:zoom-in}
.alpha .duas{margin-top:34px}
.alpha ul.ok li{color:#E9E1CC}
.alpha ul.ok li::before{border-color:var(--ouro)}

/* ---------- Método ---------- */
.passos{display:grid;grid-template-columns:repeat(5,1fr);position:relative;margin-top:10px}
.passos::before{content:"";position:absolute;left:28px;right:calc(20% - 28px);top:28px;height:2px;background:var(--preto);transform-origin:left;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.passos.visivel::before{transform:scaleX(1)}
.passo{padding-right:24px;position:relative}
.passo .c{width:58px;height:58px;border-radius:50%;border:5px solid var(--preto);background:var(--off);display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:18px}
.passo:first-child .c{border-color:var(--violeta)}
.passo h3{font-size:22px;margin-top:20px}
.passo p{font-size:15px;color:#2A292E;margin-top:8px}
.principios{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.principio{background:#fff;border:1.5px solid #E1DFE6;border-radius:18px;padding:22px}
.principio b{display:block;font-family:'Space Grotesk';font-size:18px}
.principio span{display:block;font-size:14.5px;color:var(--cinza);margin-top:6px}
.ferramentas{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:44px}
.ferramentas .label{display:block;color:var(--violeta);margin-bottom:10px;font-size:11px}
.ferramentas .etiqueta{background:#fff}

/* ---------- Contato ---------- */
.contato{display:grid;grid-template-columns:1fr 380px;gap:64px;align-items:center}
.contato h2{font-size:clamp(42px,6vw,84px);line-height:.95;letter-spacing:-.035em}
.canais{display:grid;gap:18px;margin-top:40px}
.canais a{display:flex;align-items:center;gap:16px;text-decoration:none;font-family:'Space Grotesk';font-weight:500;font-size:22px;transition:color .2s}
.canais a:hover{color:var(--violeta)}
.canais .ic{width:28px;height:28px;color:var(--violeta)}
.canais small{display:block;font-family:'IBM Plex Sans';font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9C99A6}
.contato-foto{position:relative}
.contato-foto img{border-radius:28px;aspect-ratio:3/4;object-fit:cover;object-position:58% 30%;width:100%}
.contato-foto .anel{width:120px;height:120px;border-width:24px;right:-40px;bottom:60px}
.rodape{border-top:1px solid #222127;padding:28px 0;color:#9C99A6;font-size:13px}
.rodape .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------- WhatsApp flutuante ---------- */
.wa{position:fixed;right:22px;bottom:22px;z-index:55;width:58px;height:58px;border-radius:50%;background:var(--violeta);color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px rgba(160,32,240,.45);transition:transform .25s;opacity:0;pointer-events:none}
.wa.mostra{opacity:1;pointer-events:auto}
.wa:hover{transform:scale(1.07)}
.wa .ic{width:28px;height:28px}

/* ---------- Ampliar imagem ---------- */
.amplia{position:fixed;inset:0;z-index:80;background:rgba(5,5,5,.92);display:flex;align-items:center;justify-content:center;padding:40px;opacity:0;pointer-events:none;transition:opacity .3s;cursor:zoom-out}
.amplia.aberta{opacity:1;pointer-events:auto}
.amplia img{max-width:min(1300px,94vw);max-height:88vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:scale(.96);transition:transform .3s}
.amplia.aberta img{transform:none}
.amplia button{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:34px;cursor:pointer;line-height:1}

/* ---------- Responsivo ---------- */
@media (max-width:1080px){
  .elo-grade{grid-template-columns:1fr 320px}
  .elo-passos{grid-column:1/-1;grid-template-columns:repeat(5,1fr);gap:14px}
  .elo-passo{grid-template-columns:1fr;border-bottom:0;border-top:1px solid #3a1c1f}
}
@media (max-width:900px){
  .heroi-a1{width:300px;height:300px;border-width:60px;right:-150px;top:-110px}
  .heroi-a2{width:170px;height:170px;border-width:34px;right:-70px;bottom:-50px}
  .heroi-a3{width:56px;height:56px;border-width:12px;right:24px;top:118px;bottom:auto}
  .secao,.caso,.elo,.alpha{padding:80px 0}
  .menu{position:fixed;inset:64px 0 auto 0;background:rgba(5,5,5,.97);flex-direction:column;gap:0;padding:10px 0 20px;transform:translateY(-120%);transition:transform .35s}
  .menu.aberto{transform:none}
  .menu a{padding:14px 28px;width:100%;font-size:17px}
  .menu a.ativo{box-shadow:inset 3px 0 0 var(--violeta)}
  .abrir-menu{display:block}
  .topo .btn{display:none}
  .sobre,.caso-grade,.caso.inverte .caso-grade,.contato{grid-template-columns:1fr;gap:44px}
  .caso.inverte .caso-txt{order:0}
  /* grades com colunas definidas no HTML viram uma coluna só no celular */
  .caso-grade,.caso.inverte .caso-grade{grid-template-columns:1fr!important;gap:36px}
  /* anéis decorativos menores, parados e atrás do texto */
  .wrap{position:relative;z-index:1}
  section>.anel:not(.heroi-a1):not(.heroi-a2):not(.heroi-a3){width:120px!important;height:120px!important;border-width:24px!important;transform:none!important;opacity:.9}
  .trilho .cel,.trilho .vid,.trilho .post{max-width:72vw}
  #posture-videos .duas{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .alpha-fluxo::after{content:"Arraste para o lado para ver o fluxo completo";display:block;font-family:'Space Grotesk';font-size:12px;color:#a89877;padding:10px 4px 0;position:sticky;left:0}
  .sobre-foto{max-width:420px}
  .frentes,.lista-proj{grid-template-columns:1fr 1fr}
  .duas{grid-template-columns:1fr}
  .numeros{grid-template-columns:1fr 1fr;gap:10px 0}
  .passos{grid-template-columns:1fr;gap:28px}
  .passos::before{display:none}
  .principios{grid-template-columns:1fr 1fr}
  .ferramentas{grid-template-columns:1fr 1fr}
  .elo-grade{grid-template-columns:1fr;justify-items:center}
  .elo-grade>div{width:100%}
  .elo-passos{grid-template-columns:1fr}
  .elo-passo{grid-template-columns:34px 1fr;border-top:0;border-bottom:1px solid #3a1c1f}
  .numeros.cinco{grid-template-columns:repeat(3,1fr);gap:16px 0}
  .alpha-fluxo{overflow-x:auto;border-radius:14px}
  .alpha-fluxo img{min-width:760px}
  .trilho{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;justify-content:flex-start!important;margin-right:-28px;padding-right:28px}
  .trilho>*{scroll-snap-align:start}
  .empilha .cel.sobre-tela{width:110px;right:-6px;bottom:-26px}
  .contato-foto{max-width:360px}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .trilho{margin-right:-20px;padding-right:20px}
  .frentes,.lista-proj,.principios,.ferramentas{grid-template-columns:1fr}
  .heroi{padding:120px 0 110px}
  .fone{width:296px;height:660px}
  .bolha{font-size:12px}
  .marca span{display:none}
  .canais a{font-size:18px}
  .rodape{padding-bottom:96px}
  .amplia{padding:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .revela{opacity:1;transform:none}
  .heroi h1 .palavra>span{transform:none}
  .bolha,.aviso-pausa,.elo-passo{opacity:1;transform:none}
  .passos::before{transform:none}
}