/* ninjiq · site de apresentação */
@font-face{font-family:'Space Grotesk';font-weight:700;font-style:normal;font-display:swap;src:url(../fontes/space-grotesk-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-weight:700;font-style:normal;font-display:swap;src:url(../fontes/space-grotesk-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Onest';font-weight:400 600;font-style:normal;font-display:swap;src:url(../fontes/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-weight:400 600;font-style:normal;font-display:swap;src:url(../fontes/onest-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --tinta:#120E24; --violeta:#7C5CFF; --chao:#7655FF; --lilas:#B06CFF; --cobalto:#2448E0;
  --ceu:#E1E7FF; --branco:#FFFFFF; --nevoa:#F1EDFF; --tinta-suave:#C9C2E6; --tinta-media:#55506A;
  --display:'Space Grotesk',system-ui,sans-serif; --texto:'Onest',system-ui,sans-serif;
  --borda:clamp(12px,1.6vw,20px); --margem:clamp(36px,5vw,72px); --palco:clamp(34px,4.4vw,52px);
  --saida:cubic-bezier(.16,1,.3,1);
  --sombra:0 24px 60px -24px rgba(18,14,36,.55), 0 4px 14px -6px rgba(18,14,36,.35);
}
*,*::before,*::after{box-sizing:border-box}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--branco);outline-offset:3px;border-radius:8px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pular{position:absolute;left:16px;top:-60px;z-index:50;background:var(--branco);color:var(--tinta);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.pular:focus{top:16px}

/* ---------- peças da marca ---------- */
.olhos{display:inline-flex;gap:.42em;flex:none;transform:translate(var(--ex,0),var(--ey,0));transition:transform .25s var(--saida)}
.olhos i{display:block;width:.62em;height:.62em;border-radius:50%;background:var(--violeta);animation:piscar 4.6s infinite}
@keyframes piscar{0%,91%,100%{transform:scaleY(1)}94.5%{transform:scaleY(.08)}}

.faixa-botao{display:inline-flex;align-items:center;gap:.75em;background:var(--branco);color:var(--tinta);text-decoration:none;font:600 1.0625rem/1 var(--texto);padding:1.05em 1.6em 1.05em 1.25em;border-radius:999px;border:0;box-shadow:var(--sombra);transition:transform .35s var(--saida),box-shadow .35s var(--saida)}
.faixa-botao:hover{transform:translateY(-3px);box-shadow:0 30px 60px -22px rgba(18,14,36,.7),0 6px 16px -6px rgba(18,14,36,.4)}
.faixa-botao:hover .olhos i{animation:none;transform:scaleY(.08);transition:transform .15s}
.faixa-botao:active{transform:translateY(0)}
.faixa-botao{white-space:nowrap}
.faixa-botao-g{font-size:clamp(1rem,2.4vw,1.5rem);padding:1.15em 1.9em 1.15em 1.4em}

.fio{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--branco);border:1.5px solid currentColor;border-radius:999px;padding:.7em 1.25em;font:600 .9375rem/1 var(--texto);text-decoration:none;transition:background .25s,color .25s}
.fio:hover{background:var(--branco);color:var(--tinta);border-color:var(--branco)}
.fio-escuro{color:var(--tinta)}
.fio-escuro:hover{background:var(--tinta);color:var(--branco);border-color:var(--tinta)}
.papo :focus-visible,.oficina :focus-visible{outline-color:var(--tinta)}


.topo{display:flex;align-items:center;justify-content:space-between;gap:16px}
.marca{display:block;border-radius:10px}
.marca svg{display:block;height:clamp(34px,4vw,46px);width:auto}

.faixa:focus-within{box-shadow:0 0 0 6px rgba(124,92,255,.55)}
/* os olhos ocupam metade da altura da faixa, como no ícone */
.faixa .olhos{gap:calc(var(--fh) * .21)}
.faixa .olhos i{width:calc(var(--fh) * .5);height:calc(var(--fh) * .5)}
.faixa input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:0;color:var(--tinta);font:500 clamp(1rem,2.1vw,1.5rem)/1.2 var(--texto);caret-color:var(--violeta)}
.faixa input::placeholder{color:var(--tinta-media);opacity:1}
.faixa button{flex:none;height:calc(100% - clamp(16px,2vw,24px));aspect-ratio:1;border:0;border-radius:50%;background:var(--tinta);color:var(--branco);display:grid;place-items:center;transition:background .25s,transform .35s var(--saida)}
.faixa button svg{width:46%;height:46%}
.faixa button:hover{background:var(--cobalto);transform:scale(1.06)}
.faixa button:focus-visible{outline-color:var(--violeta)}
.faixa.ocupada button{animation:girar 1s linear infinite}
@keyframes girar{50%{transform:scale(.86)}}

.ideias ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.ideias button{background:transparent;border:1.5px solid rgba(255,255,255,.36);color:var(--branco);border-radius:999px;padding:.5em 1em;font:500 .9375rem/1 var(--texto);transition:background .2s,border-color .2s,color .2s}
.ideias button:hover{background:var(--branco);border-color:var(--branco);color:var(--tinta)}

/* ---------- palco ---------- */
.palco-texto>p{margin-top:22px;max-width:44ch;font-size:1.125rem}
.palco-magica svg{flex:none;width:26px;height:26px;color:#C4B5FF;margin-top:2px}
.palco-magica b{display:block;font:700 1.125rem/1.2 var(--display);letter-spacing:-.02em;margin-bottom:4px}
.palco-magica span{color:var(--tinta-suave);font-size:.9875rem;line-height:1.5;display:block}
.palco-fecho{font-weight:600}
.palco-acoes{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
[hidden]{display:none!important}

.celular{justify-self:center;width:min(330px,80vw);perspective:1400px}
.celular-tela{aspect-ratio:9/18.6;background:var(--branco);border:10px solid var(--tinta);border-radius:46px;overflow:hidden;box-shadow:var(--sombra);transform:rotateY(-10deg) rotateX(3deg) rotate(1.2deg);transform-origin:60% 50%;transition:transform .9s var(--saida);color:var(--tinta)}
.celular:hover .celular-tela,.celular.montando .celular-tela{transform:none}
.celular-nota{margin-top:16px;text-align:center;font-size:.875rem;font-weight:500}

/* site gerado dentro do celular */
.t{--tf:#FFF1E6;--tt:#3B2418;--td:#D9583B;height:100%;display:flex;flex-direction:column;background:var(--tf);color:var(--tt);font:400 .8125rem/1.45 var(--texto)}
.t-topo{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 10px;font:700 .875rem/1.1 var(--texto)}
.t-menu{display:grid;gap:3px}.t-menu i{display:block;width:18px;height:2px;border-radius:2px;background:currentColor}
.t-capa{padding:14px 18px 22px}
.t-frase{font:400 1.72rem/1.08 var(--t-fonte,var(--display));letter-spacing:-.02em;min-height:3.3em;text-wrap:balance}
.t-btn{display:inline-block;margin-top:16px;background:var(--td);color:var(--t-btn-tinta,#fff);font:600 .8125rem/1 var(--texto);padding:.85em 1.3em;border-radius:999px}
.t-secoes{background:color-mix(in srgb,var(--tt) 7%,var(--tf));padding:14px 18px;display:grid;gap:10px;flex:1;align-content:start}
.t-sec b{display:block;font:700 .875rem/1.2 var(--texto);margin-bottom:2px}
.t-sec p{opacity:.86;font-size:.78rem}
.t-vitrine{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:6px;min-height:74px;flex:1;max-height:120px;margin-top:4px}
.t-vitrine i{border-radius:12px;background:var(--td)}
.t-vitrine i:nth-child(2){background:color-mix(in srgb,var(--td) 55%,var(--tf))}
.t-vitrine i:nth-child(3){background:color-mix(in srgb,var(--tt) 78%,var(--tf))}
.t-secoes{grid-template-rows:auto auto auto 1fr}
.t-magica{margin:0 12px 12px;background:var(--tt);color:var(--tf);border-radius:16px;padding:11px 14px;display:flex;gap:10px;align-items:center;font:600 .8rem/1.25 var(--texto)}
.t-magica svg{flex:none;width:20px;height:20px;color:var(--td)}
.t>*{opacity:0;transform:translateY(14px);animation:subir .7s var(--saida) forwards;animation-delay:calc(var(--i,0) * 140ms + 80ms)}
.t-secoes .t-sec{opacity:0;transform:translateY(10px);animation:subir .6s var(--saida) forwards;animation-delay:calc(var(--j,0) * 130ms + 520ms)}
@keyframes subir{to{opacity:1;transform:none}}
.t-espera{height:100%;display:grid;place-items:center;background:var(--nevoa);color:var(--tinta)}
.t-espera div{text-align:center;font:600 .9375rem/1.3 var(--texto)}
.pontos{display:inline-flex;gap:7px;margin-bottom:14px}
.pontos i{width:11px;height:11px;border-radius:50%;background:var(--violeta);animation:pulo 1.1s infinite ease-in-out}
.pontos i:nth-child(2){background:var(--lilas);animation-delay:.14s}
.pontos i:nth-child(3){background:var(--cobalto);animation-delay:.28s}
@keyframes pulo{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-9px)}}

/* ---------- frentes ---------- */
.apelido{display:inline-block;background:var(--branco);color:var(--tinta);border-radius:999px;padding:.02em .42em .1em;margin-right:.08em;transform:rotate(-2deg)}
.demo{min-width:0}

/* dojo: antes e depois */
.antes-depois{position:relative;aspect-ratio:5/4;border-radius:var(--palco);overflow:hidden;background:var(--branco);box-shadow:var(--sombra);color:var(--tinta);user-select:none}
.antes-depois:focus-within{outline:3px solid var(--branco);outline-offset:4px}
.site-depois,.site-antes{position:absolute;inset:0}
.site-depois{background:#F3F7EF;font-family:var(--texto);display:flex;flex-direction:column}
.sd-topo{display:flex;align-items:center;gap:clamp(8px,2vw,18px);padding:clamp(12px,2.4vw,20px) clamp(14px,3vw,26px);font-size:clamp(.7rem,1.3vw,.875rem);color:#2F4A36}
.sd-topo b{font:700 clamp(.9rem,1.7vw,1.15rem)/1 var(--display);letter-spacing:-.03em;margin-right:auto;color:#1D3324}
.sd-btn{background:#1D3324;color:#F3F7EF;border-radius:999px;padding:.6em 1.1em;font-weight:600;font-size:clamp(.68rem,1.25vw,.85rem);line-height:1}
.sd-capa{padding:clamp(6px,2vw,20px) clamp(14px,3vw,26px) clamp(12px,2.4vw,22px)}
.sd-chamada{font:700 clamp(1.25rem,3.3vw,2.35rem)/1.04 var(--display);letter-spacing:-.04em;color:#1D3324;max-width:13ch;margin-bottom:clamp(10px,1.8vw,18px)}
.sd-btn-g{display:inline-block;background:#C13D18;color:#fff}
.sd-fotos{flex:1;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px;padding:0 clamp(14px,3vw,26px) clamp(14px,3vw,26px)}
.sd-fotos i{border-radius:16px;background:radial-gradient(circle at 34% 38%,color-mix(in srgb,var(--c) 55%,#fff) 0 18%,transparent 19%),radial-gradient(circle at 66% 56%,color-mix(in srgb,var(--c) 70%,#fff) 0 22%,transparent 23%),radial-gradient(circle at 44% 76%,color-mix(in srgb,var(--c) 40%,#fff) 0 14%,transparent 15%),var(--c)}
.site-antes{background:#FFFDD0;clip-path:inset(0 calc(100% - var(--corte)) 0 0);font-family:'Times New Roman',Times,serif;text-align:center;padding:clamp(12px,3vw,26px);color:#000;display:flex;flex-direction:column;gap:clamp(6px,1.4vw,14px)}
.sa-titulo{font-weight:700;font-size:clamp(1rem,2.6vw,1.7rem);color:#C00000;line-height:1.1}
.sa-links{font-size:clamp(.62rem,1.2vw,.82rem);color:#0000CC;text-decoration:underline}
.sa-texto{font-size:clamp(.72rem,1.5vw,1rem);line-height:1.3;text-align:justify}
.sa-contador{margin-top:auto;font-family:'Courier New',monospace;font-size:clamp(.62rem,1.2vw,.82rem);background:#000;color:#3CFF3C;padding:4px 8px;align-self:center}
.sa-rodape{font-size:clamp(.58rem,1.1vw,.75rem);font-style:italic}
.corte-linha{position:absolute;top:0;bottom:0;left:var(--corte);width:3px;margin-left:-1.5px;background:var(--tinta)}
.corte-linha span{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:var(--tinta);box-shadow:0 8px 18px -6px rgba(18,14,36,.6)}
.corte-linha span::before,.corte-linha span::after{content:"";position:absolute;top:50%;width:9px;height:9px;border:2.5px solid #fff;border-width:0 0 2.5px 2.5px;margin-top:-5px}
.corte-linha span::before{left:12px;transform:rotate(45deg)}
.corte-linha span::after{right:12px;transform:rotate(-135deg)}
.corte{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}

/* shinobi: conversa */
.papo{background:var(--branco);color:var(--tinta);border-radius:var(--palco);box-shadow:var(--sombra);display:flex;flex-direction:column;height:clamp(420px,56vw,500px);overflow:hidden}
.papo-topo{display:flex;gap:12px;align-items:center;padding:16px 20px;border-bottom:1px solid #E7E2F5}
.papo-foto{width:40px;flex:none}.papo-foto svg{display:block;width:100%;height:auto}
.papo-topo b{display:block;font:700 1.0625rem/1.1 var(--display);letter-spacing:-.02em}
.papo-topo span{font-size:.8125rem;color:var(--tinta-media)}
.papo-rolo{flex:1;overflow-y:auto;padding:18px 18px 6px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:#CFC7EC transparent}
.papo-rolo:focus-visible{outline-offset:-3px}
.fala{max-width:82%;padding:.7em 1em;border-radius:20px;font-size:.9375rem;line-height:1.4;animation:fala .45s var(--saida)}
@keyframes fala{from{opacity:0;transform:translateY(10px) scale(.96)}}
.fala.ia{align-self:flex-start;background:var(--nevoa);border-bottom-left-radius:6px}
.fala.eu{align-self:flex-end;background:var(--tinta);color:var(--branco);border-bottom-right-radius:6px}
.fala.pensa{padding:.85em 1em}.fala.pensa .pontos{margin:0;gap:5px}.fala.pensa .pontos i{width:8px;height:8px}
.fala.pedido{background:var(--branco);border:2px solid var(--tinta);max-width:92%}
.fala.pedido b{display:block;font:700 1rem/1.2 var(--display);margin-bottom:4px}
.fala.pedido ul{margin:6px 0 0;padding-left:18px}
.papo-opcoes{padding:10px 14px 16px;display:flex;flex-wrap:wrap;gap:8px;min-height:60px}
.papo-opcoes button{background:var(--branco);border:1.5px solid var(--tinta);color:var(--tinta);border-radius:999px;padding:.55em 1em;font:600 .875rem/1 var(--texto);transition:background .2s,color .2s}
.papo-opcoes button:hover{background:var(--tinta);color:var(--branco)}

/* katana: 3D */
.tresd{position:relative;aspect-ratio:1/1;max-height:480px;margin-inline:auto;border-radius:var(--palco);overflow:hidden;background:radial-gradient(120% 90% at 50% 18%,#FFFFFF 0,#E9E3FF 62%,#D5CBFF 100%);box-shadow:var(--sombra);cursor:grab;touch-action:pan-y}
.tresd.pegando{cursor:grabbing}
.tresd canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tresd-reserva{position:absolute;inset:0;display:none;place-items:center}
.tresd-reserva svg{width:46%;height:auto;animation:flutuar 5s ease-in-out infinite}
@keyframes flutuar{50%{transform:translateY(-12px) rotate(-3deg)}}
.tresd.sem-webgl canvas{display:none}.tresd.sem-webgl .tresd-reserva{display:grid}
.materiais{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.materiais button{display:inline-flex;align-items:center;gap:.55em;background:transparent;border:1.5px solid rgba(255,255,255,.55);color:var(--branco);border-radius:999px;padding:.5em 1em .5em .55em;font:600 .875rem/1 var(--texto);transition:background .2s,color .2s,border-color .2s}
.materiais i{width:1.35em;height:1.35em;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.materiais button:hover{border-color:var(--branco)}
.materiais button[aria-pressed="true"]{background:var(--branco);color:var(--tinta);border-color:var(--branco)}
.materiais button:focus-visible{outline-color:var(--branco)}

/* ninpō: da bagunça ao fluxo */
.mesa{position:relative;aspect-ratio:5/4;border-radius:var(--palco);background:var(--nevoa);box-shadow:var(--sombra);overflow:hidden;color:var(--tinta)}
.mesa-fio{position:absolute;inset:0;width:100%;height:100%}
.mesa-fio path{fill:none;stroke:var(--violeta);stroke-width:4;stroke-dasharray:.1 13;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .5s .5s}
.nota{position:absolute;left:var(--bx);top:var(--by);width:42%;transform:rotate(var(--br));background:#FFE27A;border-radius:14px;padding:clamp(10px,1.8vw,16px);font:600 clamp(.78rem,1.45vw,.98rem)/1.25 var(--texto);box-shadow:0 12px 22px -12px rgba(18,14,36,.55);transition:left .9s var(--saida),top .9s var(--saida),transform .9s var(--saida),background .5s,box-shadow .5s;transition-delay:calc(var(--n,0) * 70ms);display:flex;gap:.7em;align-items:center}
.nota:nth-of-type(2){--n:1;background:#BFE3FF}.nota:nth-of-type(3){--n:2;background:#C9F2D0}.nota:nth-of-type(4){--n:3;background:#FFD0B0}.nota:nth-of-type(5){--n:4;background:#BFE3FF}.nota:nth-of-type(6){--n:5;background:#FFE27A}
.nota b{flex:none;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--tinta);color:var(--branco);font:700 .85em/1 var(--display);opacity:0;transform:scale(.4);transition:opacity .4s,transform .5s var(--saida);transition-delay:calc(var(--n,0) * 70ms + .5s);margin-left:-2.6em}
.mesa[data-estado="organizado"] .nota{left:calc(5% + var(--ox) * 48%);top:calc(7% + var(--oy) * 30%);transform:none;background:var(--branco);box-shadow:0 10px 24px -14px rgba(18,14,36,.5),0 0 0 1.5px #DCD5F5}
.mesa[data-estado="organizado"] .nota b{opacity:1;transform:none;margin-left:0}
.mesa[data-estado="organizado"] .mesa-fio path{opacity:.9}
.nota b{transition-property:opacity,transform,margin}

/* sensei: oficina */
.oficina{background:var(--branco);color:var(--tinta);border-radius:var(--palco);box-shadow:var(--sombra);padding:clamp(16px,2.6vw,26px)}
.oficina-linha{display:flex;gap:6px}
.oficina-linha button{flex:var(--t) 1 auto;min-width:max-content;text-align:left;background:var(--nevoa);border:0;border-radius:16px;padding:14px clamp(10px,1.6vw,16px);color:var(--tinta);transition:background .25s,color .25s,transform .35s var(--saida)}
.oficina-linha b{display:block;font:700 clamp(.9rem,1.6vw,1.0625rem)/1.1 var(--display);letter-spacing:-.02em}
.oficina-linha span{font-size:.8125rem;color:var(--tinta-media)}
.oficina-linha button:hover{background:#E3DBFF}
.oficina-linha button[aria-selected="true"]{background:var(--tinta);color:var(--branco)}
.oficina-linha button[aria-selected="true"] span{color:var(--tinta-suave)}
.oficina-painel{margin-top:18px;min-height:11.5em;border-radius:12px}
.oficina-painel h4{font:700 1.375rem/1.15 var(--display);letter-spacing:-.025em;margin:0 0 8px}
.oficina-painel p{color:var(--tinta-media);max-width:48ch}
.oficina-painel ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.oficina-painel li{display:flex;gap:10px;align-items:baseline;font-weight:500}
.oficina-painel li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--violeta);transform:translateY(-1px)}
.oficina-painel>*{animation:fala .5s var(--saida)}

/* ---------- como funciona ---------- */
.passos{list-style:none;margin:clamp(40px,6vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);counter-reset:passo}
.passos b{font:700 1.375rem/1.15 var(--display);letter-spacing:-.025em}

/* ---------- quem + perguntas ---------- */
.quem{width:min(1120px,100% - 2 * var(--margem));margin:clamp(170px,20vw,260px) auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,96px);align-items:start}
.quem h2{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:24px}
.quem-eu p{font-size:1.1875rem;max-width:38ch}
.quem-eu p+p{margin-top:16px}
.perguntas details{border-top:2px dotted rgba(255,255,255,.6)}
.perguntas details:last-child{border-bottom:2px dotted rgba(255,255,255,.6)}
.perguntas summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 2px;font:700 1.25rem/1.2 var(--display);letter-spacing:-.02em}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"";flex:none;width:18px;height:18px;background:linear-gradient(var(--branco),var(--branco)) center/100% 2.5px no-repeat,linear-gradient(var(--branco),var(--branco)) center/2.5px 100% no-repeat;transition:transform .4s var(--saida)}
.perguntas details[open] summary::after{transform:rotate(135deg)}
.perguntas details p{padding:0 2px 20px;max-width:46ch}

/* ---------- fechamento ---------- */
.fim .fim-aviso{margin-top:18px;font-size:.9375rem;font-weight:500;background:var(--tinta);border-radius:14px;padding:10px 16px}

.rodape-marca{background:transparent;border:0;padding:6px;border-radius:14px}
.rodape-marca svg{display:block;height:clamp(40px,5vw,54px);width:auto}
.rodape-marca:hover .olho{transform-box:fill-box;transform-origin:center;transform:scaleY(.1)}
.segredo{max-width:54ch;color:var(--tinta-suave);animation:fala .6s var(--saida)}
.segredo b{color:var(--branco);font-family:var(--display);letter-spacing:-.01em}
.rodape-linha{color:var(--tinta-suave);font-size:.875rem}

.flutua:hover{transform:translateY(-3px)}

/* olhos e animações do logo inline */
svg .olho{transform-box:fill-box;transform-origin:center;animation:piscar 4.6s infinite;transition:transform .15s}

/* ---------- telas menores ---------- */
@media (max-width:860px){
  .palco,.frente,.quem{grid-template-columns:minmax(0,1fr)}
  .celular-tela{transform:rotate(1.5deg)}
  .passos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .faixa .olhos{gap:calc(var(--fh) * .17)}
  .faixa button{height:calc(100% - 20px)}
  .topo .fio{padding:.6em 1em;font-size:.875rem}
  .passos{grid-template-columns:minmax(0,1fr)}
  .ideias span{flex-basis:100%}
  .oficina-linha{flex-direction:column}
  .oficina-linha button{flex:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .t>*,.t-secoes .t-sec{opacity:1;transform:none}
}


/* ================= versão 2: página na noite, fita de luz, sites no centro ================= */
:root{--noite-2:#1E1840;--largo:min(1180px,100% - 2 * var(--margem))}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:#3A3266 var(--tinta)}
body{margin:0;background:var(--tinta);color:var(--branco);font:400 1.0625rem/1.6 var(--texto);overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:var(--violeta);color:var(--branco)}
#fita{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#voo,.rodape{position:relative;z-index:1}
h2{font-size:clamp(2.2rem,5.4vw,4rem)}

/* abertura */
.capa{width:var(--largo);margin:0 auto;padding-top:clamp(20px,3vw,36px)}
.capa-texto{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end;margin-top:clamp(44px,7vw,100px)}
.capa h1{font-size:clamp(3rem,9.4vw,6rem);line-height:.92;letter-spacing:-.04em}
.capa-lado p{color:var(--tinta-suave);font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.5;max-width:36ch}
.capa-acoes{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* sites: antes e depois em destaque */
.sites{width:var(--largo);margin:clamp(130px,16vw,230px) auto 0;scroll-margin-top:40px}
.sites-texto{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,5vw,72px);align-items:end;margin-bottom:clamp(28px,4vw,52px)}
.sites-texto h2{font-size:clamp(2.6rem,7.4vw,5.25rem);line-height:1.02}
.sites-texto p{color:var(--tinta-suave);font-size:1.125rem;max-width:42ch}
.sites .antes-depois{aspect-ratio:16/9}
.demo-nota{margin-top:14px;font-size:.875rem;font-weight:500;max-width:60ch;color:var(--tinta-suave)}

/* conta o seu sonho */
.palco{width:var(--largo);margin:clamp(130px,16vw,230px) auto 0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,88px);align-items:center;scroll-margin-top:40px}
.palco-texto>p{color:var(--tinta-suave)}
.palco-texto>.palco-fecho{color:var(--branco)}
.faixa{--fh:clamp(60px,6vw,78px);margin-top:28px;display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);background:var(--branco);border-radius:999px;height:var(--fh);padding:0 clamp(8px,1vw,10px) 0 calc(var(--fh) * .3);box-shadow:0 0 0 0 rgba(124,92,255,0);transition:box-shadow .4s var(--saida)}
.faixa input{font-size:clamp(1rem,1.5vw,1.1875rem)}
.ideias{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;color:var(--tinta-suave);font-size:.9375rem}
.palco-magica{margin-top:26px;display:flex;gap:14px;align-items:flex-start;background:var(--noite-2);border-radius:22px;padding:18px 20px;max-width:46ch}

/* o resto, em grade e com menos peso */
.extras{width:var(--largo);margin:clamp(130px,16vw,230px) auto 0}
.extras>h2{font-size:clamp(1.9rem,4vw,3rem);max-width:18ch}
.extras-apoio{margin-top:16px;color:var(--tinta-suave);max-width:48ch}
.extras-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,72px) clamp(24px,4vw,56px);margin-top:clamp(36px,5vw,64px)}
.extra{min-width:0;border-top:2px dotted rgba(255,255,255,.32);padding-top:24px}
.extra h3{font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.15}
.extra h3 .apelido{font-size:.92em;margin-right:.3em}
.extra>p:not(.demo-nota){color:var(--tinta-suave);margin:10px 0 20px;max-width:42ch}
.extra .papo{height:400px}
.extra .tresd{aspect-ratio:4/3;max-height:none}
.extra>.fio{margin-top:16px}

/* como: bloco violeta */
.como{margin:clamp(130px,16vw,230px) var(--borda) 0;background:var(--chao);border-radius:clamp(34px,7vw,92px);padding:clamp(56px,9vw,120px) var(--margem)}
.como h2{font-size:clamp(2.3rem,6vw,4.5rem);max-width:12ch}
.passos li{counter-increment:passo;border-top:2px dotted rgba(255,255,255,.6);padding-top:22px}
.passos li::before{content:counter(passo);display:block;font:700 clamp(3rem,6vw,4.75rem)/.9 var(--display);letter-spacing:-.04em;color:var(--tinta);margin-bottom:16px}
.passos p{margin-top:8px;color:var(--branco);font-size:1rem}

/* fechamento: cartaz violeta */
.fim{margin:clamp(130px,16vw,230px) var(--borda) 0;background:var(--chao);border-radius:clamp(34px,7vw,92px);padding:clamp(80px,12vw,170px) var(--margem);text-align:center;display:flex;flex-direction:column;align-items:center;scroll-margin-top:24px}
.fim h2{font-size:clamp(2.9rem,10.4vw,6rem);letter-spacing:-.04em}
.fim>p{margin-top:22px;font-size:clamp(1.125rem,1.8vw,1.375rem);max-width:34ch}
.fim .faixa-botao{margin-top:clamp(40px,6vw,64px)}
.rodape{background:#0B0818;margin-top:var(--borda);padding:clamp(40px,6vw,72px) var(--margem) 44px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.flutua{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:20;display:inline-flex;align-items:center;gap:.7em;background:var(--branco);color:var(--tinta);text-decoration:none;font:600 .9375rem/1 var(--texto);padding:.95em 1.3em .95em 1.05em;border-radius:999px;box-shadow:var(--sombra);animation:fala .5s var(--saida);transition:transform .3s var(--saida)}

@media (max-width:860px){
  .capa-texto,.sites-texto,.extras-grade,.palco{grid-template-columns:minmax(0,1fr)}
  .sites .antes-depois{aspect-ratio:5/4}
}
@media (max-width:520px){
  .faixa{gap:10px;padding-left:calc(var(--fh) * .26)}
  .capa-acoes .fio{flex:1 1 100%}
  .capa-acoes .faixa-botao{flex:1 1 100%;justify-content:center}
}

.celular-tela{border-color:#2B2452}

/* abertura: texto à esquerda, a fita livre à direita */
.capa-texto{display:block;max-width:920px}
.capa h1{font-size:clamp(3rem,9vw,5.9rem);max-width:13.5ch}
.capa-lado{display:flex;flex-wrap:wrap;align-items:center;gap:20px clamp(24px,4vw,48px);margin-top:clamp(22px,3vw,34px)}
.capa-lado p{max-width:34ch}
.capa-acoes{margin-top:0}
.vitrine{margin-top:clamp(36px,4.6vw,60px)}
/* o texto que fica por cima da fita ganha um halo da cor do fundo, para continuar legível */
.capa p,.sites-texto,.palco-texto,.extras>h2,.extras-apoio,.extra h3,.extra>p,.quem,.demo-nota,.vitrine-nota{text-shadow:0 0 14px var(--tinta),0 0 3px var(--tinta)}
.apelido{text-shadow:none}

/* ================= versão 3: cada demonstração cabe numa tela, fotos nos exemplos ================= */
.capa h1{max-width:12ch}

/* dojo: título mais contido e a comparação inteira numa tela */
.sites{margin-top:clamp(96px,11vw,160px);scroll-margin-top:18px}
.sites-texto{align-items:center;margin-bottom:clamp(18px,2.4vw,30px)}
.sites-texto h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.demo-dojo{width:min(100%,max(300px,calc((100svh - 262px) * 16 / 9)));margin-inline:auto}
.site-depois{background:#EFE6D6;display:block}
.site-depois img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%}
.sd-topo,.sd-capa{position:relative}
.sd-topo{color:#5A1A1A;padding:clamp(12px,2.2vw,26px) clamp(16px,3.4vw,44px)}
.sd-topo b{font-family:'Gloock',serif;font-weight:400;letter-spacing:0;color:#8E1019;font-size:clamp(1rem,2vw,1.5rem)}
.sd-btn{background:#B5121B;color:#FBF4E8}
.sd-capa{padding:clamp(8px,4vw,56px) clamp(16px,3.4vw,44px) 0}
.sd-chamada{font:400 clamp(1.4rem,4.4vw,3.6rem)/1.02 'Gloock',serif;letter-spacing:-.02em;color:#8E1019;max-width:9.5ch;margin-bottom:clamp(12px,2vw,26px)}
.sd-btn-g{background:#B5121B;color:#FBF4E8;font-size:clamp(.75rem,1.4vw,1.0625rem);padding:.9em 1.5em}
.ad-rotulo{position:absolute;bottom:clamp(10px,1.6vw,18px);font:600 clamp(.6875rem,1vw,.8125rem)/1 var(--texto);letter-spacing:.02em;padding:.6em 1em;border-radius:999px;background:var(--tinta);color:var(--branco);font-family:var(--texto);font-style:normal}
.ad-antes{left:clamp(10px,1.6vw,18px)}
.ad-depois{right:clamp(10px,1.6vw,18px)}
.antes-depois *{text-shadow:none}

/* celular: maior, com luz atrás e uma passada de luz quando o site é montado */
.celular{position:relative;width:min(350px,82vw)}
.celular::before{content:"";position:absolute;inset:6% -16% 10%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--brilho,#7C5CFF),transparent);opacity:.34;filter:blur(34px);transition:opacity .8s}
.celular.pronto::before{opacity:.6}
.celular-tela{position:relative}
.celular-tela::after{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%);transform:translateX(-70%);pointer-events:none;opacity:0}
.celular.pronto .celular-tela::after{animation:passada 1.1s var(--saida)}
@keyframes passada{0%{transform:translateX(-70%);opacity:1}100%{transform:translateX(70%);opacity:0}}
.celular.montando .celular-tela{transform:scale(1.03)}

/* site gerado: foto de capa, título por cima, seções e a ideia de IA */
.t{position:relative;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto auto;font-size:.8125rem}
.t-foto{position:absolute;inset:0 0 30% 0;opacity:1;transform:none;animation:none}
.t-foto img{display:block;width:100%;height:100%;object-fit:cover}
.t:not(.parado) .t-foto img{animation:revela 1.4s var(--saida) both}
@keyframes revela{from{transform:scale(1.4);clip-path:inset(100% 0 0 0)}to{transform:none;clip-path:inset(0)}}
.t-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--tf) 3%,color-mix(in srgb,var(--tf) 82%,transparent) 26%,color-mix(in srgb,var(--tf) 30%,transparent) 46%,transparent 62%,transparent 78%,var(--tf) 100%)}
.t-topo,.t-capa,.t-secoes,.t-magica{position:relative}
.t-topo{padding:18px 20px 8px;font-size:.9375rem}
.t-capa{padding:10px 20px 0}
.t-frase{font-size:1.86rem;line-height:1.05;min-height:3.2em}
.t-btn{margin-top:14px;font-size:.875rem;padding:.9em 1.4em;box-shadow:0 10px 24px -10px var(--td)}
.t-secoes{background:none;padding:0 20px 12px;gap:0;grid-template-rows:none;flex:none}
.t-sec{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;padding:9px 0;border-top:1px solid color-mix(in srgb,var(--tt) 20%,transparent)}
.t-sec::before{content:"0" counter(sec);counter-increment:sec;font:600 .6875rem/1 var(--texto);color:var(--td);grid-row:1 / 3}
.t-secoes{counter-reset:sec}
.t-sec b{margin:0;font-size:.875rem}
.t-sec p{grid-column:2;font-size:.75rem;line-height:1.35;opacity:.8}
.t-magica{margin:0 12px 12px;background:var(--td);color:var(--t-btn-tinta,#fff);border-radius:18px;padding:12px 14px;box-shadow:0 14px 30px -14px var(--td)}
.t-magica svg{color:currentColor}
.t:not(.parado) .t-magica{animation:subir .7s var(--saida) 1.5s both,pulso 1.6s ease-in-out 2.3s 2}
@keyframes pulso{50%{transform:scale(1.035)}}
.t-espera{background:radial-gradient(circle at 50% 46%,#2B2452,var(--tinta) 70%);color:var(--branco)}

@media (max-width:860px){
  .demo-dojo{width:100%}
  .sd-chamada{max-width:8.5ch}
}
@media (prefers-reduced-motion:reduce){
  .t-foto img,.t-magica{animation:none!important}
}
.sd-topo b{margin-right:clamp(8px,2vw,28px)}
.sd-topo .sd-btn{margin-left:auto}
.faixa-botao,.fio,.faixa,.palco-magica{text-shadow:none}
/* véu claro atrás do texto do "depois", para o título nunca brigar com as flores */
.site-depois::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#EFE6D6 0%,rgba(239,230,214,.9) 34%,rgba(239,230,214,0) 66%)}
.sd-topo,.sd-capa,.ad-rotulo{z-index:1}
@media (max-width:860px){
  .celular::before{inset:6% 2% 10%}
}
@media (max-width:520px){
  .sd-topo span:not(.sd-btn){display:none}
}

/* ================= versão 3.1: o rascunho cabe numa tela; demonstrações lado a lado com a mesma altura ================= */
.palco{align-items:center}
.palco-texto h2{font-size:clamp(2rem,3.7vw,3.1rem);line-height:1.02}
.palco-texto>p{margin-top:16px}
.palco .faixa{margin-top:22px;--fh:clamp(58px,5.2vw,72px)}
.palco .ideias{margin-top:14px}
.palco-magica{margin-top:18px;padding:14px 18px}
.palco-fecho{margin-top:14px;font-size:1rem}
.palco-acoes{margin-top:18px}
.celular{width:min(350px,82vw,calc((100svh - 124px) * 9 / 18.6))}
.celular-nota{margin-top:12px}

@media (min-width:861px){
  .extras-grade{--demo-h:clamp(380px,33vw,440px)}
  .extra>p:not(.demo-nota){min-height:3.2em}
  .extra .papo,.extra .tresd,.extra .mesa,.extra .oficina{height:var(--demo-h);aspect-ratio:auto;width:100%;max-height:none}
  .extra .oficina{display:flex;flex-direction:column}
  .extra .oficina-painel{flex:1;min-height:0}
}

/* piloto automático: a opção que a demonstração "clica" acende antes de ir */
.papo-opcoes button.tocando{background:var(--tinta);color:var(--branco)}

/* dojo: o "depois" agora é o site de fotografia, escuro */
.site-depois{background:#15100C}
.site-depois::after{background:linear-gradient(90deg,rgba(16,10,6,.9) 0%,rgba(16,10,6,.66) 36%,rgba(16,10,6,0) 68%)}
.sd-topo{color:#E9DAC6}
.sd-topo b,.sd-chamada{color:#F6EBDD}
.sd-chamada{max-width:9ch}
.sd-btn,.sd-btn-g{background:#E8B866;color:#1A1008}
.sd-topo .sd-btn{background:#F6EBDD;color:#1A1008}

/* dojo: o "depois" agora é o estúdio de pilates, claro */
.site-depois{background:#F4EFE6}
.site-depois img{object-position:100% 50%}
.site-depois::after{background:linear-gradient(90deg,rgba(244,239,230,.96) 0%,rgba(244,239,230,.82) 34%,rgba(244,239,230,0) 64%)}
.sd-topo{color:#4A5A4C}
.sd-topo b{color:#2F3E33}
.sd-chamada{color:#2F3E33;max-width:11ch}
.sd-topo .sd-btn{background:#2F3E33;color:#F4EFE6}
.sd-btn-g{background:#7C9A7E;color:#fff}
/* camadas do antes e depois: o texto do "depois" nunca passa por cima do "antes" */
.site-depois{z-index:0}
.site-antes{z-index:1}
.corte-linha{z-index:2}
.corte{z-index:3}

/* ================= versão 3.5: abertura em dois blocos de uma tela =================
   Bloco 1: só o texto e a fita nascendo. Bloco 2: a vitrine, inteira na tela.
   No celular fica empilhado como antes, que já cabe numa tela. */
.capa-palco{min-width:0}
@media (min-width:861px){
  .capa-texto{display:flex;flex-direction:column;justify-content:center;gap:0;min-height:calc(100svh - 110px);margin-top:0;padding-bottom:9svh;max-width:1000px}
  .capa h1{font-size:clamp(3.2rem,8.4vw,6.2rem);max-width:15ch}
  .capa-palco{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:20px 0}
  .capa-palco .vitrine{width:min(100%,calc((100svh - 150px) * 1.6));margin:0 auto}

}

/* site antigo do antes e depois: uma foto simples no meio, como todo site daquela época tinha */
.sa-foto{align-self:center;width:min(44%,360px);height:auto;aspect-ratio:16/10;object-fit:fill;border:4px ridge #8A8A8A;background:#ddd}
.sa-legenda{font-size:clamp(.6rem,1.1vw,.8rem);font-style:italic;margin-top:calc(clamp(6px,1.4vw,14px) * -.6)}

/* a primeira tela tem exatamente a altura da janela: o menu fica por cima dela, e o vídeo só aparece ao rolar */
@media (min-width:861px){
  .capa{position:relative;padding-top:0}
  .topo{position:absolute;left:0;right:0;top:clamp(20px,3vw,36px);z-index:2}
  .capa-texto{min-height:100svh;padding-top:90px}
}