/* arilsondev.com | estilos */

:root{
  --canvas:#0F0E0B;
  --panel:#1A1813;
  --panel-2:#221F18;
  --line:#2E2A21;
  --line-strong:#6F6650;
  --accent:#FFCC00;
  --accent-hover:#FFD84D;
  --accent-muted:#6B5A1A;
  --on-accent:#14120C;
  --text-primary:#F4F1E8;
  --text-secondary:#A8A397;

  --display:'Archivo', 'Arial Black', system-ui, sans-serif;
  --body:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gutter:clamp(16px, 4vw, 48px);
  --tshadow:0 1px 2px rgba(5,5,4,.95), 0 3px 12px rgba(5,5,4,.78), 0 10px 44px rgba(5,5,4,.8);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;overflow-x:hidden;overflow-x:clip;
  background:var(--canvas);color:var(--text-primary);
  font:400 17px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  animation:pagein .9s var(--ease-out);
}
@keyframes pagein{from{opacity:0}}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
.mono{font-family:var(--mono)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none;transition:top .3s var(--ease-out)}
.skip:focus{top:16px}
main:focus{outline:none}

/* ---------- ambiente fixo ---------- */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(55% 40% at 18% 8%, rgba(255,204,0,.045), transparent 70%),
    radial-gradient(45% 45% at 88% 72%, rgba(255,204,0,.035), transparent 70%),
    var(--canvas)}
.ambient::before{content:"";position:absolute;inset:-25%;
  background:radial-gradient(30% 26% at 50% 50%, rgba(255,204,0,.05), transparent 70%);
  animation:drift 80s var(--ease-io) infinite alternate;animation-delay:-30s}
.ambient::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{from{transform:translate(-12%,-8%)}to{transform:translate(14%,10%)}}
.mote{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;
  background:var(--accent);opacity:.18;box-shadow:0 0 10px rgba(255,204,0,.6);
  animation:mote 26s var(--ease-io) infinite alternate;animation-delay:var(--d)}
@keyframes mote{from{transform:translate(0,0)}to{transform:translate(24px,-60px)}}

/* ---------- navegação ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gutter);
  background:linear-gradient(to bottom, rgba(15,14,11,.88), rgba(15,14,11,.55) 60%, rgba(15,14,11,0))}
.brand{display:inline-flex;align-items:baseline;gap:.42em;text-decoration:none}
.brand-name{font:900 1.4rem/1 var(--display);color:var(--accent);letter-spacing:-.03em}
.brand-pill{font:500 .78rem/1 var(--mono);background:var(--accent);color:var(--on-accent);padding:.38em .75em .34em;border-radius:999px;transform:translateY(-.15em)}
.cursor{display:inline-block}
.nav .cursor,.live .cursor{animation:caret 1.2s var(--ease-io) infinite}
@keyframes caret{0%,45%{opacity:1}55%,100%{opacity:.15}}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font:800 1rem/1 var(--display);letter-spacing:.005em;text-decoration:none;
  color:var(--on-accent);background:var(--accent);
  padding:1.05em 1.6em;border-radius:999px;border:0;cursor:pointer;
  box-shadow:0 0 0 0 rgba(255,204,0,0), 0 10px 30px rgba(255,204,0,.12);
  transition:background-color .3s var(--ease-out), box-shadow .5s var(--ease-out), transform .3s var(--ease-out)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .ico{width:1.15em;height:1.15em;flex:none}
.btn-small{padding:.75em 1.1em;font-size:.88rem}
.btn-big{font-size:1.15rem;padding:1.2em 2em}
.btn.lit{box-shadow:0 0 0 7px rgba(255,204,0,.12), 0 0 70px rgba(255,204,0,.38)}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---------- hero ---------- */
.hero{position:relative;height:575vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas);isolation:isolate}
.poster,.stage video,.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.poster{background:var(--canvas) center/cover no-repeat}
.stage video{object-fit:cover;opacity:0;transform:translateZ(0);will-change:transform;transition:opacity .7s var(--ease-out)}
.stage.media-ready video{opacity:1}
.stage canvas{display:none;opacity:0;transition:opacity .7s var(--ease-out)}
html.mode-frames .stage canvas{display:block}
html.mode-frames .stage video{display:none}
html.mode-frames .stage.media-ready canvas{opacity:1}
html.mode-frames .hero{height:580vh}
/* motor em código: a faísca e a rede desenhadas no canvas */
html.mode-code .stage canvas{display:block}
html.mode-code .stage video{display:none}
html.mode-code .stage.media-ready canvas{opacity:1}
html.engine-code.mode-static .stage canvas{display:block;opacity:1}
/* no celular a abertura é curta: metade da rolagem do computador */
@media (max-width:720px), (orientation:portrait) and (max-width:1024px){html.mode-code .hero{height:311vh}}

.scrim{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 120% 90% at 50% 45%, rgba(10,9,7,0) 35%, rgba(10,9,7,.62) 100%)}

.band{position:absolute;z-index:3;opacity:0;visibility:hidden;width:min(500px, 36vw);text-shadow:var(--tshadow)}
.band.on{visibility:visible}
.band::before{content:"";position:absolute;inset:-28% -22%;z-index:-1;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 62% at 50% 50%, rgba(6,5,4,var(--sa,.66)) 0%, rgba(6,5,4,calc(var(--sa,.66)*.66)) 46%, rgba(6,5,4,0) 76%)}
.band .btn{text-shadow:none}
.b1{left:var(--gutter);top:50%;transform:translateY(-50%);--sa:.72}
.b2{left:var(--gutter);top:50%;transform:translateY(-50%);--sa:.66}
.b3{left:var(--gutter);top:50%;transform:translateY(-50%);--sa:.66}
.b4{left:var(--gutter);bottom:12vh;bottom:12svh;--sa:.7}

.say{font:900 clamp(2.1rem, 4.1vw, 4.1rem)/1.03 var(--display);letter-spacing:-.028em;margin:0;max-width:13ch}
.b3 .say{max-width:16ch}
.say.em{color:var(--accent)}
.say-sub{font:600 clamp(1.15rem, 1.7vw, 1.55rem)/1.35 var(--body);color:var(--text-primary);opacity:.82;margin-top:14px;max-width:28ch}
.b4 .sub{font:600 clamp(1.05rem, 1.5vw, 1.3rem)/1.45 var(--body);color:var(--text-primary);opacity:.86;margin-top:16px;max-width:34ch}
.cta-row{margin-top:26px}

/* palavras e letras divididas */
.ln .w{display:inline-block;white-space:nowrap}
.ln .c{display:inline-block}
/* faixa 1: deriva para baixo (ecoa a queda) */
.b1 .w{--kc:clamp(0, (var(--k,0) - var(--th,0)) * 2.8, 1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * -26px))}
/* faixa 2: metades se abrindo (ecoa a divisão) */
.b2 .w{--kc:clamp(0, (var(--k,0) - var(--th,0)) * 2.6, 1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)))}
/* faixa 3: trama (ecoa os fios se cruzando) */
.b3 .c{--kc:clamp(0, (var(--k,0) - var(--th,0)) * 2.6, 1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * var(--jy,0px)))}
/* faixa 4: subida em etapas */
.b4 .w{--kc:clamp(0, (var(--k,0) - var(--th,0)) * 3, 1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * 30px))}
.b4 .sub{--ks:clamp(0, (var(--k,0) - .62) * 4, 1);opacity:calc(var(--ks) * .86);transform:translateY(calc((1 - var(--ks)) * 14px))}
.b4 .cta-row{--kb:clamp(0, (var(--k,0) - .78) * 5, 1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 14px))}
.b1 .say-sub{--ks:clamp(0, (var(--k,0) - .45) * 3, 1);opacity:calc(var(--ks) * .82)}

.ring{position:absolute;right:var(--gutter);bottom:28px;z-index:4;width:40px;height:40px;color:var(--accent);
  transform:rotate(-90deg);transition:opacity .6s var(--ease-out)}
.stage.media-ready .ring,.stage.media-failed .ring{opacity:0}
.cue{position:absolute;left:50%;bottom:26px;z-index:4;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--text-secondary);font-size:.72rem;letter-spacing:.14em;transform:translateX(-50%);transition:opacity .6s var(--ease-out)}
.cue svg{width:20px;height:20px}
.live-hero .cue svg{animation:nudge 2.4s var(--ease-io) infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.stage.scrolled .cue{opacity:0}

/* hero estático: sem JS, movimento reduzido, celular deitado */
html:not(.js) .hero,html.mode-static .hero{height:auto}
html:not(.js) .stage,html.mode-static .stage{position:relative;height:100vh;height:100svh;min-height:560px}
html:not(.js) .stage video,html:not(.js) .stage canvas,html.mode-static .stage video,html.mode-static .stage canvas{display:none}
html:not(.js) .band:not(.b4),html.mode-static .band:not(.b4){display:none}
html:not(.js) .band.b4,html.mode-static .band.b4{opacity:1;visibility:visible;--k:1}
html:not(.js) .poster{background-image:url("hero-ending.jpg")}
html:not(.js) .ring,html.mode-static .ring,html:not(.js) .cue,html.mode-static .cue{display:none}

/* ---------- trilha e fio ---------- */
.trilha{position:relative}
.fio{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.fio-path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;opacity:.85}
.fio-glow{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;opacity:.1}
.fio-dot{fill:var(--accent);filter:drop-shadow(0 0 6px rgba(255,204,0,.9))}
html:not(.js) .fio{display:none}

/* ---------- seções ---------- */
.sec{position:relative;z-index:1;padding:clamp(96px, 15vh, 168px) 0}
.wrap{width:min(1120px, 100% - 2*var(--gutter));margin-inline:auto}
@media (min-width:1024px){.trilha .wrap{padding-left:56px}}
.kicker{display:inline-flex;align-items:baseline;gap:1px;font:500 .82rem/1 var(--mono);color:var(--accent);letter-spacing:.06em;margin:0 0 22px}
.h2{font:900 clamp(2.2rem, 5vw, 4rem)/1.03 var(--display);letter-spacing:-.028em;margin:0 0 22px;max-width:16ch;text-wrap:balance}
.lede{font-size:clamp(1.05rem, 1.35vw, 1.2rem);line-height:1.6;color:var(--text-secondary);max-width:46ch}
.h3{font:800 1.3rem/1.15 var(--display);letter-spacing:-.01em;margin:22px 0 8px}

/* entradas */
html.js .reveal [data-i]{opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), border-color .4s var(--ease-out), background-color .4s var(--ease-out);
  transition-delay:calc(var(--i,0) * 95ms)}
html.js .reveal.in [data-i]{opacity:1;transform:none}
html.js .reveal.in.done [data-i]{transition-delay:0s}

/* problema */
.grid-2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end}
.stat{position:relative;justify-self:end;text-align:right}
.stat::before{content:"";position:absolute;inset:-10% -6% -10% 10%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,204,0,.16), transparent);opacity:.5}
.live .stat::before{animation:breathe 5.5s var(--ease-io) infinite;animation-delay:-2s}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:.85}}
.stat-num{font:900 clamp(6rem, 15vw, 12.5rem)/.82 var(--display);letter-spacing:-.05em;color:var(--accent);font-variant-numeric:tabular-nums}
.stat-pct{font-size:.45em;letter-spacing:0;margin-left:.04em}
.stat-note{margin-top:14px;font-size:.75rem;color:var(--text-secondary);letter-spacing:.04em}

/* dores */
.dores{list-style:none;margin:0;padding:0;align-self:end}
.dores li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:baseline;padding:22px 0;border-top:1px solid var(--line);
  font:800 clamp(1.1rem, 1.6vw, 1.35rem)/1.3 var(--display);letter-spacing:-.01em}
.dores li:last-child{border-bottom:1px solid var(--line)}
.dor-n{color:var(--accent);font-size:.8rem;font-weight:500;letter-spacing:.04em}

/* serviços */
.card-main{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center;margin-top:44px;padding:26px}
.card-main .media{aspect-ratio:200/120}
.card .tag,.tag{display:inline-block;font-size:.72rem;letter-spacing:.06em;color:var(--on-accent);background:var(--accent);padding:.45em .8em;border-radius:999px}
.h3-big{font-size:clamp(1.7rem, 2.8vw, 2.4rem);margin-top:16px}
.bullets{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.bullets li{position:relative;padding-left:22px;color:var(--text-primary)}
.bullets li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--accent);border-radius:2px}
.cards{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:22px;margin-top:22px}
.card{border:1px solid var(--line);border-radius:22px;padding:22px 22px 26px;
  background:linear-gradient(180deg, rgba(34,31,24,.72), rgba(26,24,19,.38))}
.cards .card:nth-child(2){margin-top:36px}
.cards .card:nth-child(3){margin-top:72px}
.card:hover{border-color:var(--line-strong)}
.card p{color:var(--text-secondary);max-width:32ch}
.media{border-radius:14px;aspect-ratio:200/120;
  background:radial-gradient(70% 90% at 50% 40%, rgba(255,204,0,.09), transparent 70%), rgba(15,14,11,.6);
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.media svg{width:86%;height:auto}
.media .draw{fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html.js .media .draw{stroke-dasharray:1;stroke-dashoffset:1}
html.js .reveal.in .media .draw{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease-out) calc(var(--i,0) * 95ms + 250ms)}
html.js .reveal.in .media .d2{transition-delay:calc(var(--i,0) * 95ms + 650ms)}
html.js .reveal.in .media .d3{transition-delay:calc(var(--i,0) * 95ms + 950ms)}
.media .pulse{fill:var(--accent);opacity:.9}
.live .media .pulse{animation:dot 1.6s var(--ease-io) infinite;animation-delay:-.4s}
.live .media .p2{animation-delay:-.15s}
.live .media .p3{animation-delay:-1.3s}
@keyframes dot{0%,100%{opacity:.25}50%{opacity:1}}

/* antes e depois */
.antes-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.antes-head .lede{text-align:center}
.ba{position:relative;margin-top:44px;aspect-ratio:16/9;border-radius:22px;overflow:hidden;border:1px solid var(--line);
  user-select:none;-webkit-user-select:none;touch-action:pan-y;box-shadow:0 40px 90px rgba(0,0,0,.45)}
.ba-pane{position:absolute;inset:0}
.ba-new{clip-path:inset(0 0 0 var(--pos))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--accent);pointer-events:none;box-shadow:0 0 18px rgba(255,204,0,.6)}
.ba-knob{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.ba-knob svg{width:22px;height:22px}
.ba-knob::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--accent);opacity:0}
.live .ba-knob::after{animation:halo 3.6s var(--ease-io) infinite;animation-delay:-1s}
.ba:has(.ba-range:focus-visible) .ba-knob{outline:2px solid var(--text-primary);outline-offset:4px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba-label{position:absolute;top:14px;z-index:2;font-size:.72rem;letter-spacing:.06em;padding:.45em .8em;border-radius:999px;background:rgba(8,8,6,.66);color:var(--text-primary);pointer-events:none}
.ba-l{left:14px}.ba-r{right:14px}
/* o site antigo, de propósito */
.ba-old{background:#E9E6DF;color:#222;font-family:'Times New Roman',Times,serif;padding:4% 5% 3%;display:flex;flex-direction:column;gap:3%}
.old-top{background:#2B4C9B;color:#fff;font:700 clamp(.85rem, 2vw, 1.6rem)/1 Arial,sans-serif;padding:3% 4%;letter-spacing:.06em}
.old-menu{font-size:clamp(.7rem, 1.3vw, 1rem);color:#1a0dab}
.old-body{display:grid;grid-template-columns:35% 1fr;gap:4%;flex:1;min-height:0}
.old-img{background:#bdb9b0;display:grid;place-items:center;color:#777;font:italic clamp(.7rem, 1.2vw, .95rem) serif}
.old-title{font-size:clamp(1rem, 2.4vw, 1.9rem);color:#c00;font-weight:700;line-height:1.1}
.old-text{font-size:clamp(.7rem, 1.3vw, 1rem);margin-top:.6em;line-height:1.35}
.old-warn{margin-top:.8em;display:inline-block;background:#ff0;color:#000;font:700 clamp(.65rem, 1.1vw, .85rem) Arial,sans-serif;padding:.2em .5em}
.old-foot{font:clamp(.6rem, 1vw, .8rem)/1 'Courier New',monospace;color:#555}
/* o site novo */
.ba-new{background:radial-gradient(60% 70% at 72% 40%, rgba(255,204,0,.2), transparent 70%), #100F0B;padding:4% 5%;display:flex;flex-direction:column}
.new-top{display:flex;justify-content:space-between;align-items:center}
.new-logo{font:900 clamp(.9rem, 1.8vw, 1.4rem)/1 var(--display);color:var(--text-primary);letter-spacing:-.02em}
.new-logo b{color:var(--accent);font-weight:900}
.new-pill{background:var(--accent);color:var(--on-accent);font:800 clamp(.6rem, 1vw, .8rem)/1 var(--display);padding:.6em 1em;border-radius:999px}
.new-body{margin:auto 0 auto auto;width:46%}
.new-kick{color:var(--accent);font-size:clamp(.6rem, 1vw, .8rem)}
.new-title{font:900 clamp(1.3rem, 3.6vw, 3rem)/1.02 var(--display);letter-spacing:-.03em;margin:.3em 0 .6em;color:var(--text-primary)}
.new-btn{display:inline-block;background:var(--accent);color:var(--on-accent);font:800 clamp(.65rem, 1.1vw, .9rem)/1 var(--display);padding:.8em 1.3em;border-radius:999px}
.new-cards{display:grid;grid-template-columns:repeat(3, 1fr);gap:3%}
.new-cards span{height:clamp(22px, 5vw, 60px);border-radius:10px;border:1px solid var(--line);background:rgba(34,31,24,.75)}

/* teste */
.teste-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:center}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px;max-width:480px}
.cmp{padding:18px 18px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(26,24,19,.6)}
.cmp-label{display:block;font-size:.74rem;color:var(--text-secondary);margin-bottom:10px;letter-spacing:.04em}
.cmp-val{display:block;font:900 clamp(1.6rem, 3vw, 2.2rem)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cmp-auto .cmp-val{color:var(--accent)}
.cmp-foot{display:block;font-size:.82rem;color:var(--text-secondary);margin-top:8px}
.phone{justify-self:center;width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:30px;padding:14px;
  box-shadow:0 40px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04)}
.phone-head{display:flex;gap:12px;align-items:center;padding:6px 6px 14px;border-bottom:1px solid var(--line)}
.phone-head strong{display:block;font-weight:600;font-size:.98rem;line-height:1.2}
.avatar{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font:900 .9rem/1 var(--display)}
.status{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-secondary)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.live .live-dot{animation:dot 2.4s var(--ease-io) infinite;animation-delay:-1s}
.chat{min-height:270px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:16px 4px}
.chat-hint{align-self:center;font-size:.74rem;color:var(--text-secondary);margin-bottom:auto;margin-top:auto;transition:opacity .4s var(--ease-out)}
.msg{max-width:82%;padding:10px 14px 8px;border-radius:18px;font-size:.95rem;line-height:1.4;opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out)}
.msg.show{opacity:1;transform:none}
.msg.out{align-self:flex-end;background:var(--panel-2);border:1px solid var(--line);border-bottom-right-radius:6px}
.msg.in{align-self:flex-start;background:var(--accent);color:var(--on-accent);border-bottom-left-radius:6px}
.msg time{display:block;font:500 .68rem/1 var(--mono);opacity:.65;margin-top:6px;text-align:right}
.typing{align-self:flex-start;display:flex;gap:5px;padding:12px 14px;border-radius:18px;background:var(--panel-2);border:1px solid var(--line);opacity:0;transition:opacity .3s var(--ease-out)}
.typing.show{opacity:1}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--text-secondary);animation:dot 1s var(--ease-io) infinite}
.typing span:nth-child(2){animation-delay:-.66s}.typing span:nth-child(3){animation-delay:-.33s}
.sim-send{width:100%;margin-top:4px;font-size:.95rem}
.sim-send[disabled]{opacity:.55;cursor:default;transform:none}

/* como funciona */
.como .wrap{text-align:center}
.como .h2{margin-inline:auto}
.steps{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:32px;position:relative;text-align:left}
.steps::before{content:"";position:absolute;top:22px;left:22px;right:22px;height:1px;background:var(--line-strong)}
.step p{color:var(--text-secondary);max-width:30ch;margin-top:22px}
.step strong{display:block;color:var(--text-primary);font:800 1.25rem/1.2 var(--display);margin-bottom:6px}
.node{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--canvas);border:1.5px solid var(--accent);color:var(--accent);font-size:.8rem}
.node::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--accent);opacity:0}
.live .node::after{animation:halo 4.5s var(--ease-io) infinite}
.live .step:nth-child(2) .node::after{animation-delay:-1.5s}
.live .step:nth-child(3) .node::after{animation-delay:-3s}
@keyframes halo{0%,100%{opacity:0;transform:scale(.9)}50%{opacity:.45;transform:scale(1.08)}}

/* quem faz */
.quem-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
.foto{position:relative;margin:0;max-width:460px}
.foto img{width:100%;height:auto;border-radius:26px;filter:saturate(.92) contrast(1.03)}
.foto::after{content:"";position:absolute;inset:0;border-radius:26px;pointer-events:none;
  background:linear-gradient(to top, rgba(15,14,11,.4), rgba(15,14,11,0) 45%)}
.foto-corner{position:absolute;right:-12px;bottom:-12px;width:84px;height:84px;border-right:3px solid var(--accent);border-bottom:3px solid var(--accent);border-bottom-right-radius:34px;opacity:.85}
.live .foto-corner{animation:breathe 6s var(--ease-io) infinite;animation-delay:-3s}

/* perguntas */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
.faq-head{position:sticky;top:110px}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:24px 0;font:800 clamp(1.1rem, 1.6vw, 1.3rem)/1.3 var(--display);transition:color .3s var(--ease-out)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font:500 1.4rem/1 var(--mono);color:var(--accent);transition:transform .4s var(--ease-out);flex:none}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--accent-hover)}
.faq-list details p{color:var(--text-secondary);max-width:52ch;padding:0 0 26px}
.faq-list details[open] p{animation:open .5s var(--ease-out)}
@keyframes open{from{opacity:0;transform:translateY(-6px)}}

/* contato */
.contato{padding-bottom:clamp(120px, 20vh, 220px)}
.contato-inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.h2-big{font-size:clamp(2.4rem, 6.2vw, 5.2rem);max-width:15ch;margin-bottom:40px}

/* rodapé */
.foot{position:relative;z-index:1;border-top:1px solid var(--line);padding:34px 0}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-meta{font-size:.8rem;color:var(--text-secondary)}
.foot-link{font-weight:600;text-decoration:none;color:var(--text-primary);border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:color .3s var(--ease-out), border-color .3s var(--ease-out)}
.foot-link:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- celular e tablet ---------- */
@media (max-width:1023px){
  .card-main{grid-template-columns:1fr;gap:24px}
  .cards{grid-template-columns:1fr 1fr}
  .cards .card:nth-child(2){margin-top:36px}
  .cards .card:nth-child(3){margin-top:0;grid-column:1 / -1}
}
@media (max-width:720px){
  body{font-size:16px}
  .nav{padding:12px var(--gutter)}
  .brand-name{font-size:1.2rem}
  .btn-small{padding:.7em 1em}
  .grid-2,.teste-grid,.quem-grid,.faq-grid{grid-template-columns:1fr;gap:40px}
  .stat{justify-self:start;text-align:left}
  .cards{grid-template-columns:1fr;gap:18px}
  .cards .card:nth-child(n){margin-top:0;grid-column:auto}
  .card-main{padding:22px}
  .ba{aspect-ratio:4/5}
  .old-body{grid-template-columns:1fr;grid-template-rows:38% auto}
  .new-body{width:42%}
  .new-title{font-size:clamp(1.05rem, 5.4vw, 1.6rem)}
  .steps{grid-template-columns:1fr;gap:28px;padding-left:4px}
  .steps::before{top:22px;bottom:22px;left:22px;right:auto;width:1px;height:auto}
  .step{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start}
  .step p{margin-top:8px}
  .como .wrap{text-align:left}
  .como .h2{margin-inline:0}
  .faq-head{position:static}
  .foto{max-width:none}
  .compare{max-width:none}
}
/* celular e tablet em pé: legendas no terço de baixo, ação livre no centro */
@media (max-width:720px), (orientation:portrait) and (max-width:1024px){
  .band{left:var(--gutter);right:var(--gutter);width:auto;top:auto;bottom:13vh;bottom:13svh;transform:none;text-align:left}
  .b2 .say{margin-left:0}
  .band::before{inset:-35% -10% -25%}
  .say{font-size:clamp(1.9rem, 8.6vw, 3.4rem);max-width:15ch}
  .b4{bottom:10vh;bottom:10svh}
}
@media (max-height:560px){.cue,.ring{display:none}}

/* ---------- pausa: aba escondida ---------- */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- movimento reduzido ---------- */
html.reduce{scroll-behavior:auto}
html.reduce *,html.reduce *::before,html.reduce *::after{animation:none!important;transition:none!important;transition-delay:0s!important}
html.reduce .reveal [data-i]{opacity:1!important;transform:none!important}
html.reduce .media .draw{stroke-dashoffset:0!important}
html.reduce .msg,html.reduce .typing.show{opacity:1;transform:none}