/* Home Método RE.SETE */
:root{
  --acento:#E5610A; --acento-h:#FF7A22; --fundo:#0D0D0D; --card:#161616; --card2:#1E1E1E;
  --branco:#F4F1EC; --cinza:#9A968F; --linha:#262626;
  --f-hero:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --f-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,4vw,48px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--branco);font-family:var(--f-body);overflow-x:hidden}
img{max-width:100%}
.nowrap{white-space:nowrap}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);margin:0}
.cond{font-family:var(--f-hero);font-weight:900;text-transform:uppercase;letter-spacing:.4px;line-height:.92;margin:0}

/* Cabeçalho */
.topo{border-bottom:2px solid var(--acento)}
.topo .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:14px;padding-bottom:14px}
.logo{display:block;position:relative;overflow:hidden;aspect-ratio:1375/350;height:38px}
.logo img{position:absolute;width:145.45%;left:-25.45%;top:-51.43%;max-width:none;mix-blend-mode:lighten}
@media (max-width:640px){.logo{height:30px}}

/* Hero */
.hero .wrap{display:grid;grid-template-columns:1fr;gap:8px;align-items:center;padding-top:clamp(36px,7vw,72px);padding-bottom:clamp(20px,4vw,48px)}
.hero h1{font-size:clamp(52px,11vw,108px);margin-top:16px}
.hero h1 span{color:var(--acento)}
.hero .sub{color:var(--cinza);font-size:clamp(17px,2vw,20px);line-height:1.45;max-width:520px;margin:22px 0 0}
.slogan{color:var(--acento)}
@media (min-width:1024px){.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:32px}.hero h1{font-size:clamp(64px,7vw,96px)}}

/* Ecossistema */
.eco{border-top:1px solid var(--linha)}
.eco .wrap{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}
.eco h2{font-size:clamp(32px,5vw,52px);max-width:820px;margin-top:12px}
.pilares{display:grid;grid-template-columns:1fr;gap:1px;background:var(--linha);border:1px solid var(--linha);margin-top:32px;border-radius:4px;overflow:hidden}
.pilar{background:var(--card);padding:clamp(22px,3vw,32px)}
.pilar-top{display:flex;align-items:center;justify-content:space-between}
.num{font-family:var(--f-hero);font-weight:900;font-size:52px;color:var(--acento);line-height:1}
.pilar svg{width:40px;height:40px;stroke:var(--branco);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pilar h3{font-size:28px;margin-top:16px}
.pilar p{color:var(--cinza);font-size:16px;line-height:1.55;margin:10px 0 0}
@media (min-width:768px){.pilares{grid-template-columns:repeat(3,1fr)}}

/* Rodapé com a calculadora */
.bonus{background:var(--card);color:var(--branco);border-top:2px solid var(--acento);position:relative;overflow:hidden}
.bonus .wrap{position:relative}
.bonus h2 span{color:var(--acento)}
.bonus .wrap{display:grid;grid-template-columns:1fr;gap:8px;align-items:center;padding-top:clamp(40px,6vw,64px);padding-bottom:clamp(24px,4vw,48px)}
.bonus .mono{color:var(--acento)}
.bonus .sub{color:var(--cinza)}
.bonus h2{font-size:clamp(40px,7vw,72px);margin-top:12px}
.bonus .sub{font-size:clamp(18px,2.2vw,22px);font-weight:600;line-height:1.35;max-width:560px;margin:14px 0 28px}
.btn{display:inline-block;background:var(--acento);color:var(--fundo);font-family:var(--f-hero);font-weight:800;text-transform:uppercase;letter-spacing:.8px;font-size:18px;padding:16px 28px;border-radius:4px;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--acento-h)}
.calc-link{display:block;text-decoration:none;color:inherit}
@media (min-width:900px){.bonus .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.calc-stage{--w:230px}}
@media (max-width:480px){.btn{display:block;text-align:center}}
.base .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:18px;padding-bottom:18px}

/* ===== Banner animado: RE.SETE, Seller e canais ===== */
.stage{
  --bg:#0D0D0D; --panel:#161616; --line:#2A2622; --fg:#F2EEE8; --muted:#A39C93; --accent:#E5610A;
  --kraft:#9A7650; --kraft-dk:#7A5B3B; --kraft-lt:#B08D63; --ink:#1A130C;
  --s:118px; --tile:72px;
  position:relative;width:100%;max-width:640px;margin:0 auto;height:auto;aspect-ratio:760/680;min-height:460px;min-width:0
}
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.wire{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:.32}
.wire.main{stroke-width:2.2;opacity:.45}
.pulse{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:9 91;stroke-dashoffset:100;filter:drop-shadow(0 0 4px var(--accent));animation:run 2.4s linear infinite}
.pulse.main{stroke-width:3.4;stroke-dasharray:14 86;animation-duration:1.8s}
.dot{fill:var(--accent)}
@keyframes run{to{stroke-dashoffset:0}}
.node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
.cap{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;white-space:nowrap}
.channel .bob{display:flex;flex-direction:column;align-items:center;gap:7px;animation:bob 5s ease-in-out infinite}
.tile{width:var(--tile);height:var(--tile);border-radius:22%;overflow:hidden;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.55)}
.tile.has{border-color:transparent}
.tile.wide{background:#FFFFFF}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile.wide img{object-fit:contain;padding:14%}
.tile .alt{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.25;padding:4px}
@keyframes bob{50%{transform:translateY(-7px)}}
.ch4 .tile img{transform:scale(1.9)} /* o logo da Magalu vem pequeno no quadrado */
.ch1{--x:15.8%;--y:34.7%} .ch2{--x:31.1%;--y:16.7%} .ch3{--x:50%;--y:10.4%} .ch4{--x:68.9%;--y:16.7%} .ch5{--x:84.2%;--y:34.7%}
.ch1 .bob{animation-delay:-.4s}.ch2 .bob{animation-delay:-1.6s}.ch3 .bob{animation-delay:-2.8s}.ch4 .bob{animation-delay:-.9s}.ch5 .bob{animation-delay:-2.1s}
.seller{--x:50%;--y:37%}
.seller-card{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--panel);border:1px solid var(--accent);border-radius:4px;box-shadow:0 0 28px rgba(229,97,10,.25)}
.seller-card svg{width:20px;height:20px;flex:none}
.seller-card b{display:block;font-family:var(--f-hero);font-weight:900;font-size:20px;line-height:.95;text-transform:uppercase}
.seller-card span{font-family:var(--f-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.box{--x:50%;--y:78%;display:flex;flex-direction:column;align-items:center}
.float{animation:float 4.2s ease-in-out infinite;position:relative;z-index:2}
@keyframes float{50%{transform:translateY(-12px)}}
.scene{width:var(--s);height:var(--s);perspective:1000px}
.cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:turn 11s ease-in-out infinite alternate}
@keyframes turn{from{transform:rotateX(-22deg) rotateY(-26deg)}to{transform:rotateX(-22deg) rotateY(-64deg)}}
.f{position:absolute;inset:0;background:var(--kraft);border:1px solid rgba(26,19,12,.25)}
.f.front{transform:translateZ(calc(var(--s)/2))}
.f.back{transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.f.right{transform:rotateY(90deg) translateZ(calc(var(--s)/2));background:var(--kraft-dk)}
.f.left{transform:rotateY(-90deg) translateZ(calc(var(--s)/2));background:var(--kraft-dk)}
.f.top{transform:rotateX(90deg) translateZ(calc(var(--s)/2));background:var(--kraft-lt)}
.f.bottom{transform:rotateX(-90deg) translateZ(calc(var(--s)/2));background:var(--kraft-dk)}
.f.top::after{content:"";position:absolute;left:38%;width:24%;top:0;bottom:0;background:var(--accent)}
.f.front::before,.f.back::before{content:"";position:absolute;left:38%;width:24%;top:0;height:20%;background:var(--accent)}
.f.top::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(26,19,12,.35)}
.mark{position:absolute;left:0;right:0;bottom:16%;text-align:center;font-family:var(--f-hero);font-weight:900;color:var(--ink);font-size:calc(var(--s)*.2);opacity:.85}
.mark small{display:block;font-family:var(--f-mono);font-weight:500;font-size:calc(var(--s)*.06);letter-spacing:.14em;margin-top:2px}
.etq{position:absolute;left:14%;right:14%;top:30%;background:#EDE6DA;padding:6% 7%;font-family:var(--f-mono);color:var(--ink);font-size:calc(var(--s)*.055);line-height:1.5;border-radius:2px}
.pedestal{position:relative;width:calc(var(--s)*1.6);height:calc(var(--s)*.4);margin-top:calc(var(--s)*-.1);border-radius:50%;background:#141210;border:1px solid var(--accent);box-shadow:0 0 34px rgba(229,97,10,.38),0 0 2px var(--accent),inset 0 0 18px rgba(229,97,10,.18)}
.pedestal::before{content:"";position:absolute;inset:16% 18%;border-radius:50%;border:1px solid rgba(229,97,10,.35)}
.shadow{position:absolute;left:50%;top:44%;width:calc(var(--s)*1.05);height:calc(var(--s)*.18);transform:translate(-50%,-50%);border-radius:50%;background:rgba(0,0,0,.65);filter:blur(8px);animation:shade 4.2s ease-in-out infinite}
@keyframes shade{50%{transform:translate(-50%,-50%) scale(.82);opacity:.6}}
.box .cap{margin-top:10px}
@media (max-width:640px){
  .stage{--s:88px;--tile:50px;aspect-ratio:auto;height:490px;min-height:0}
  .ch1{--x:14.9%;--y:34.8%} .ch2{--x:31.1%;--y:16.8%} .ch3{--x:50%;--y:10.5%} .ch4{--x:68.9%;--y:16.8%} .ch5{--x:85.1%;--y:34.8%}
  .seller{--x:50%;--y:39%}
  .seller-card{padding:5px 9px;gap:6px}.seller-card b{font-size:16px}.seller-card svg{width:16px;height:16px}
  .box{--x:50%;--y:80.6%}
}
@media (max-width:360px){.stage{--tile:44px;--s:80px;height:460px}}

/* ===== Calculadora animada ===== */
.calc-stage{
  --bg:#0D0D0D; --body:#1B1917; --edge:#121110; --key:#262321; --line:#2E2A26; --fg:#F2EEE8; --muted:#A39C93; --accent:#E5610A;
  --w:200px; --h:calc(var(--w)*1.4); --d:calc(var(--w)*.11);
  position:relative;display:flex;flex-direction:column;align-items:center;padding-block:32px 8px;color:var(--fg)
}
.calc-float{position:relative;z-index:2;animation:calc-float 4.6s ease-in-out infinite}
@keyframes calc-float{50%{transform:translateY(-12px)}}
.calc-scene{width:var(--w);height:var(--h);perspective:1100px}
.calc{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:calc-turn 12s ease-in-out infinite alternate}
@keyframes calc-turn{from{transform:rotateX(16deg) rotateY(-20deg)}to{transform:rotateX(16deg) rotateY(16deg)}}
.cf{position:absolute;background:var(--edge)}
.cf.front{inset:0;transform:translateZ(calc(var(--d)/2));background:var(--body);border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;gap:calc(var(--w)*.05);padding:calc(var(--w)*.07)}
.cf.back{inset:0;transform:rotateY(180deg) translateZ(calc(var(--d)/2));border-radius:6px}
.cf.left,.cf.right{top:0;width:var(--d);height:var(--h);left:calc((var(--w) - var(--d))/2)}
.cf.left{transform:rotateY(-90deg) translateZ(calc(var(--w)/2))}
.cf.right{transform:rotateY(90deg) translateZ(calc(var(--w)/2));background:#0F0E0D}
.cf.top,.cf.bottom{left:0;width:var(--w);height:var(--d);top:calc((var(--h) - var(--d))/2)}
.cf.top{transform:rotateX(90deg) translateZ(calc(var(--h)/2));background:#24211F}
.cf.bottom{transform:rotateX(-90deg) translateZ(calc(var(--h)/2))}
.calc-brand{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:calc(var(--w)*.045);letter-spacing:.14em;color:var(--muted)}
.calc-brand i{display:block;width:calc(var(--w)*.2);height:calc(var(--w)*.04);background:var(--accent);border-radius:1px}
.screen{height:calc(var(--w)*.36);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:calc(var(--w)*.035) calc(var(--w)*.05);display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 0 14px rgba(229,97,10,.08)}
.screen .lbl{font-family:var(--f-mono);font-size:calc(var(--w)*.045);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-height:1.2em}
.screen .val{font-family:var(--f-hero);font-weight:900;font-size:calc(var(--w)*.17);line-height:1;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.screen .val small{font-size:.5em;color:var(--muted);margin-right:.2em}
.screen.hot{box-shadow:inset 0 0 18px rgba(229,97,10,.28)}
.screen.hot .val{color:var(--accent)}
.keys{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,1fr);gap:calc(var(--w)*.035)}
.k{display:grid;place-items:center;background:var(--key);border-radius:4px;font-family:var(--f-body);font-weight:700;font-size:calc(var(--w)*.07);color:var(--fg);box-shadow:0 3px 0 #0A0909;transition:transform .08s,box-shadow .08s,background .08s}
.k.op{color:var(--accent)}
.k.eq{grid-column:span 2;background:var(--accent);color:var(--bg)}
.k.press{transform:translateY(2px);box-shadow:0 1px 0 #0A0909;background:#34302C}
.k.eq.press{background:#C9540A}
.calc-pedestal{position:relative;width:calc(var(--w)*1.5);height:calc(var(--w)*.36);margin-top:calc(var(--w)*-.06);border-radius:50%;background:#141210;border:1px solid var(--accent);box-shadow:0 0 34px rgba(229,97,10,.38),0 0 2px var(--accent),inset 0 0 18px rgba(229,97,10,.18)}
.calc-pedestal::before{content:"";position:absolute;inset:16% 18%;border-radius:50%;border:1px solid rgba(229,97,10,.35)}
.calc-shadow{position:absolute;left:50%;top:44%;width:calc(var(--w)*.9);height:calc(var(--w)*.14);transform:translate(-50%,-50%);border-radius:50%;background:rgba(0,0,0,.65);filter:blur(8px);animation:calc-shade 4.6s ease-in-out infinite}
@keyframes calc-shade{50%{transform:translate(-50%,-50%) scale(.82);opacity:.6}}
@media (max-width:640px){.calc-stage{--w:160px}}

/* As animações rodam mesmo com "reduzir movimento" ligado no aparelho: decisão do Rodrigo, para o celular ficar igual ao computador. */