/* =========================================================================
   EZER COMMERCE — LANDING (ref. Sunbeam + fitas da Baristi)
   Max de corpo inteiro no hero, prova acima do título, método em abas com mini-telas
   ========================================================================= */

/* hero */
.ca-hero{padding-block:120px 70px;background:radial-gradient(ellipse 60% 70% at 85% 30%,rgba(79,143,255,.16),transparent 70%),var(--paper)}
.ca-hero__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center;width:100%}
.ca-hero__copy{display:grid;gap:24px;justify-items:start}
.ca-h1{margin:0;font-size:clamp(2.6rem,1.3rem + 3.8vw,4.9rem);max-width:15ch}
.ca-h1 .hl{white-space:normal}
.ca-proof{margin:0;display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:600 13.5px/1.2 var(--font-body);color:var(--night)}
.ca-proof__stars{display:flex;gap:1px}
.ca-ctas{display:flex;flex-wrap:wrap;gap:12px}
.ca-plat{margin:4px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted)}
.ca-plat{gap:10px 22px}
.ca-plat__logo{display:block;height:22px;background:#A9AFBD;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;transition:background .4s}
.ca-plat__logo:hover{background:var(--muted)}
.ca-plat__logo--nuvem{--logo:url(img/plat/nuvemshop.png);aspect-ratio:197 / 32}
.ca-plat__logo--tray{--logo:url(img/plat/tray.png);aspect-ratio:87 / 38;height:24px}
.ca-plat__logo--li{--logo:url(img/plat/loja-integrada.svg);aspect-ratio:603 / 122}

.ca-stage{position:relative;display:grid;justify-items:center;padding-top:20px}
/* a foto mora dentro da forma: o arredondado do topo recorta os cantos da imagem e o fundo é a mesma cor da foto */
.ca-stage__shape{position:relative;z-index:1;display:block;width:min(400px,84%);padding-top:22px}
.ca-stage__max{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.ca-stage__say{position:absolute;z-index:3;left:-14%;bottom:6%;max-width:300px}

/* dor */
.ca-painsec{overflow:hidden;padding-top:0}
.ca-ribs{margin:40px 0 clamp(56px,7vw,96px)}
.ca-pains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(36px,4.5vw,56px)}
.ca-pain{display:grid;gap:18px;align-content:start;padding:24px;border-radius:22px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ca-pain .ico{width:30px;height:30px;color:var(--bright)}
.ca-pain p{margin:0;font:500 1.12rem/1.4 var(--font-display);letter-spacing:-.02em;color:#fff}
.ca-painsec__foot{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-top:clamp(32px,4vw,48px)}
.ca-painsec__foot .cm-lead{color:#C9D2EC}

/* método */
.ca-tabs{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:stretch;margin-top:clamp(36px,4.5vw,56px)}
.ca-tabs__list{display:grid;gap:10px;align-content:start}
.ca-tab{position:relative;display:grid;gap:6px;padding:20px 22px;border:0;border-radius:20px;background:transparent;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:background .4s,box-shadow .4s}
.ca-tab small{font:500 12px/1 var(--font-mono);color:var(--faint)}
.ca-tab b{font:600 1.4rem/1.1 var(--font-display);letter-spacing:-.03em;color:var(--night)}
.ca-tab span{font-size:15px;line-height:1.5;color:var(--muted)}
.ca-tab:hover{background:#fff}
.ca-tab.is-on{background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 24px 48px -30px rgba(10,14,30,.45)}
.ca-tab.is-on small{color:var(--brand)}
.ca-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand);transform:scaleX(0);transform-origin:left}
.ca-tabs.is-auto .ca-tab.is-on::after{animation:sl-prog 6.5s linear forwards}
.ca-tabs__stage{position:relative;display:grid;place-items:center;padding:clamp(24px,3.4vw,48px);border-radius:28px;background:linear-gradient(140deg,var(--brand),#5B8DEF 55%,#9DB9F5)}
.ca-win{width:100%;max-width:520px;border-radius:18px;background:#fff;box-shadow:0 40px 80px -30px rgba(10,14,30,.55);overflow:hidden}
.ca-win__bar{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ca-win__bar i{width:9px;height:9px;border-radius:50%;background:#E3E5EC}
.ca-win__bar em{margin-left:10px;padding:5px 12px;border-radius:999px;background:var(--paper-2);font:500 11.5px/1 var(--font-mono);font-style:normal;color:var(--faint)}
.ca-win__body{display:grid;min-height:290px}
.ca-panel{grid-area:1 / 1;padding:22px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .6s var(--ease-out);pointer-events:none}
.ca-panel.is-on{opacity:1;transform:none;pointer-events:auto;transition-delay:.1s}
.ca-ui{display:grid;gap:14px;color:var(--night)}
.ca-ui__title{margin:0;font:600 15px/1.2 var(--font-display)}
.ca-ui__foot{margin:0;font-size:13px;color:var(--muted)}
.ca-ui__foot b{color:var(--night)}
.ca-funnel{display:grid;gap:9px}
.ca-funnel span{position:relative;display:flex;align-items:center;justify-content:space-between;width:var(--w);min-width:120px;height:38px;padding:0 12px;border-radius:10px;background:#DCE7FB}
.ca-funnel span i{font:600 12.5px/1 var(--font-body);font-style:normal;color:var(--deep);white-space:nowrap}
.ca-funnel .is-leak{background:#FDE7E7;box-shadow:inset 0 0 0 1.5px #E5484D}
.ca-funnel .is-leak i{color:#B4262A}
.ca-funnel em{position:absolute;left:calc(100% + 10px);padding:4px 8px;border-radius:999px;background:#E5484D;color:#fff;font:600 11px/1 var(--font-body);font-style:normal;white-space:nowrap}
.ca-panel.is-on .ca-funnel span{animation:ca-grow .8s var(--ease-out) both}
.ca-panel.is-on .ca-funnel span:nth-child(2){animation-delay:.1s}.ca-panel.is-on .ca-funnel span:nth-child(3){animation-delay:.2s}.ca-panel.is-on .ca-funnel span:nth-child(4){animation-delay:.3s}
@keyframes ca-grow{from{clip-path:inset(0 100% 0 0)}}
.ca-ui--exec{grid-template-columns:1fr 1fr;align-items:center}
.ca-pdp{display:grid;gap:8px;padding:12px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.ca-pdp__img{aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,#DCE7FB,#B9CEF7)}
.ca-pdp__l{height:9px;border-radius:5px;background:var(--paper-2)}
.ca-pdp__l--s{width:60%}
.ca-pdp__price{font:600 15px/1 var(--font-display)}
.ca-pdp__buy{padding:9px;border-radius:10px;background:#1E9E5A;color:#fff;text-align:center;font:600 12.5px/1 var(--font-body)}
.ca-check{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ca-check li{display:flex;align-items:center;gap:9px;font:600 13.5px/1.25 var(--font-body)}
.ca-check .ico{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;background:#E7F8EE;color:#1E9E5A}
.ca-panel.is-on .ca-check li{animation:ca-in .5s var(--ease-out) both}
.ca-panel.is-on .ca-check li:nth-child(2){animation-delay:.15s}.ca-panel.is-on .ca-check li:nth-child(3){animation-delay:.3s}.ca-panel.is-on .ca-check li:nth-child(4){animation-delay:.45s}
@keyframes ca-in{from{opacity:0;transform:translateX(10px)}}
.ca-chart{width:100%;height:150px}
.ca-chart__area{fill:rgba(42,111,219,.12)}
.ca-chart__line{fill:none;stroke:var(--brand);stroke-width:3;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.ca-panel.is-on .ca-chart__line{animation:ca-draw 1.4s var(--ease-out) .2s forwards}
@keyframes ca-draw{to{stroke-dashoffset:0}}
.ca-ab{justify-self:start;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--night);color:#fff;font-size:13px}
.ca-ab span{font:500 11px/1 var(--font-mono);color:var(--bright)}
.ca-fronts{margin-top:clamp(64px,8vw,112px)}
.ca-fronts__head{display:grid;gap:12px}
.ca-fronts__head .label{margin:0}
.ca-fronts__t{margin:0;font:600 clamp(1.8rem,1.3rem + 1.6vw,2.7rem)/1.05 var(--font-display);letter-spacing:-.04em}


/* resultados */
.ca-case{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.ca-case__copy{display:grid;gap:22px;justify-items:start}
.ca-case__copy .h2,.ca-case__copy .label{margin:0}
.ca-case__copy .cm-lead{color:#C9D2EC}
.ca-chart-bars{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:18px;height:360px;padding:24px;border-radius:28px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ca-bar{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;height:var(--h);padding:16px;border-radius:16px;background:rgba(255,255,255,.1);transform-origin:bottom;transition:transform 1.2s var(--ease-out)}
.ca-bar b{font:500 clamp(1.3rem,1rem + 1vw,1.9rem)/1 var(--font-display);letter-spacing:-.04em;color:#fff}
.ca-bar span{font-size:13px;color:#A8B1CC}
.ca-bar--up{background:linear-gradient(180deg,var(--bright),var(--deep))}
.ca-bar--up span{color:#DCE7FB}
.js .ca-chart-bars:not(.is-in) .ca-bar{transform:scaleY(.06)}
.ca-chart-bars.is-in .ca-bar--up{transition-delay:.25s}
.ca-mult{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);padding:8px 14px;border-radius:999px;background:#fff;color:var(--night);font:600 14px/1 var(--font-display)}
.ca-proofs{margin-top:clamp(48px,6vw,80px)}
.ca-results .proof b{color:#fff}

/* comparativo */
.ca-compare{background:var(--paper-2)}
.ca-compare__lead{margin:16px auto 0;text-align:center}
.ca-compare .cmp .is-us{background:#fff}

/* diagnóstico: passos em linha e o formulário no centro (veio da direção C) */
.ca-diag{background:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(42,111,219,.28),transparent 70%),var(--night)}
.ca-dsteps{list-style:none;margin:clamp(32px,4vw,48px) auto 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1080px}
.ca-dsteps li{display:grid;gap:6px;align-content:start;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.ca-dsteps span{font:500 12.5px/1 var(--font-mono);color:var(--bright)}
.ca-dsteps b{font:600 17px/1.25 var(--font-display);color:#fff}
.ca-dsteps small{font-size:14.5px;line-height:1.5;color:#A8B1CC}
.ca-diag__card{display:grid;gap:26px;max-width:820px;margin:clamp(32px,4vw,48px) auto 0;padding:clamp(24px,3vw,40px);border-radius:30px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 50px 100px -50px rgba(42,111,219,.6)}
.ca-diag__max{max-width:none}

/* faq */
.ca-faq__max{margin-top:34px}

@media (max-width:1100px){
  .ca-stage__say{left:0}
}
@media (max-width:900px){
  .ca-hero{padding-top:110px}
  .ca-hero__in,.ca-tabs,.ca-case,.ca-dsteps{grid-template-columns:minmax(0,1fr)}
  .ca-pains{grid-template-columns:1fr 1fr}
  .ca-ui--exec{grid-template-columns:1fr}
  .ca-chart-bars{height:300px}
}
@media (max-width:560px){
  .ca-pains{grid-template-columns:minmax(0,1fr)}
  .ca-stage__shape{width:82%}
  .ca-funnel em{position:static;margin-left:8px}
}

/* =========================================================================
   AS 8 FRENTES: bento assimétrico com o Max no centro (refs. enviadas pelo Jonh:
   alturas diferentes por coluna, tipo grande, painéis de UI vazando da borda, foto com chips)
   ========================================================================= */
.cx-orbit{--r:105px;position:relative;justify-self:center;width:calc(var(--r) * 2);aspect-ratio:1;display:grid;place-items:center}
.cx-orbit__ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,255,255,.18)}
.cx-orbit::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 290deg,rgba(79,143,255,.55) 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent 86%,#000 87%);mask:radial-gradient(closest-side,transparent 86%,#000 87%);animation:cx-spin 8s linear infinite}
.cx-orbit i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:#33406B;box-shadow:0 0 0 3px rgba(79,143,255,.14);
  transform:rotate(calc(var(--i) * 45deg)) translateY(calc(var(--r) * -1));animation:cx-dot 8s linear infinite;animation-delay:calc(var(--i) * 1s - 8s)}
.cx-orbit__core{position:relative;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#22C55E;color:#fff;box-shadow:0 0 0 12px rgba(34,197,94,.12),0 0 40px rgba(34,197,94,.45)}
.cx-orbit__core .ico{width:34px;height:34px}
@keyframes cx-spin{to{rotate:360deg}}
@keyframes cx-dot{0%,12%{background:var(--bright);box-shadow:0 0 0 4px rgba(79,143,255,.3),0 0 16px var(--bright)}30%,100%{background:#33406B;box-shadow:0 0 0 3px rgba(79,143,255,.14)}}
@media (prefers-reduced-motion:reduce){.cx-orbit::before,.cx-orbit i{animation:none}}
.ax-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:52px;gap:14px;margin-top:clamp(28px,3.5vw,44px)}
.ax{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;border-radius:26px;
  grid-column:var(--c) / span var(--cs);grid-row:var(--r) / span var(--rs);container-type:inline-size;color:var(--night);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.ax:hover{transform:translateY(-4px)}
/* tons */
.ax--mono{background:#E8EFFC}
.ax--monophoto{background:radial-gradient(circle at 50% 92%,#C9DCFF 0 38%,transparent 38.5%),radial-gradient(circle at 50% 92%,#D8E6FF 0 52%,transparent 52.5%),#E8EFFC}
.ax--brand{color:#fff;background:radial-gradient(ellipse 80% 90% at 100% 0%,rgba(255,255,255,.18),transparent 60%),linear-gradient(150deg,#3B7BEA,var(--deep))}
.ax--dark{color:#fff;background:radial-gradient(ellipse 90% 60% at 50% 110%,rgba(79,143,255,.45),transparent 70%),linear-gradient(170deg,#0E1A4A,var(--night) 60%)}
.ax--brand,.ax--dark{--ax-em:#A9C8FF;--ax-lab:#A9BCE6}
/* tipografia */
.ax-label{font:500 12px/1 var(--font-mono);color:var(--ax-lab,var(--muted))}
.ax-k{margin:0;font:500 12px/1 var(--font-mono);color:var(--ax-lab,var(--muted))}
.ax-big{margin:0;font:600 clamp(1.7rem,1.2rem + 1.2vw,2.3rem)/1.02 var(--font-display);letter-spacing:-.045em}
.ax-mid{margin:0;font:600 clamp(1.2rem,1rem + .5vw,1.45rem)/1.1 var(--font-display);letter-spacing:-.035em}
.ax em{font-style:normal;color:var(--ax-em,var(--brand))}
/* painéis de UI que vazam da borda */
.ax-panel{position:absolute;padding:14px;border-radius:18px;background:#fff;color:var(--night);box-shadow:inset 0 0 0 1px var(--line),0 24px 48px -24px rgba(10,14,30,.4)}
.ax-panel--br{right:-18px;bottom:-18px;width:80%}
.ax-panel--b{left:24px;right:24px;bottom:-18px}

/* método em uma frase */

/* órbita */
.ax-o{align-items:stretch}
.ax-o .cx-orbit{--r:88px;margin:auto}
.ax-o .cx-orbit__core{width:64px;height:64px}

/* A/B: barras crescendo */
.ax-chart b{font:600 12.5px/1 var(--font-body)}
.ax-bars{position:relative;display:flex;align-items:flex-end;gap:9px;height:92px;margin-top:14px}
.ax-bars i{flex:1;height:var(--h);border-radius:8px 8px 4px 4px;background:#D5E2FA;transform:scaleY(.04);transform-origin:bottom;transition:transform 1s var(--ease-out) calc(var(--k) * .09s + .3s)}
.ax-bars i:last-of-type{background:var(--brand)}
.ax.is-in .ax-bars i{transform:none}
.ax-bars em{position:absolute;right:-4px;top:-26px;padding:5px 8px;border-radius:999px;background:#E7F8EE;color:#16A34A;font:700 11.5px/1 var(--font-body);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ease-out);transition-delay:1.1s}
.ax.is-in .ax-bars em{opacity:1;transform:none}
.ax-weeks{display:flex;gap:9px;margin-top:8px}
.ax-weeks small{flex:1;text-align:center;font:500 10.5px/1 var(--font-mono);color:var(--faint)}

/* Max + chips flutuando */
.ax-mx{padding:20px}
.ax-max{position:absolute;bottom:0;left:50%;translate:-50% 0;height:94%;width:auto;pointer-events:none}
.ax-label--float{position:relative;z-index:2;padding:7px 11px;border-radius:999px;background:#fff;color:var(--night);box-shadow:0 10px 20px -12px rgba(10,14,30,.4)}
.ax-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:14px;background:#fff;color:var(--night);font-size:12px;
  box-shadow:0 18px 36px -18px rgba(10,14,30,.5);animation:mk-float 5s var(--ease-in-out) infinite alternate}
.ax-chip b{font:600 12.5px/1.15 var(--font-display)}
.ax-chip--pdp{left:10px;top:52%;animation-delay:-1.2s}
.ax-chip--pdp > i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#DCE7FB}
.ax-chip--pdp .cp-sil{width:70%;fill:var(--ink)}
.ax-chip--pdp > span{display:grid;gap:2px}
.ax-chip--pdp em{font:700 12px/1 var(--font-body);color:var(--brand)}
.ax-chip--rate{right:10px;top:22%;flex-wrap:wrap;max-width:128px;gap:4px 6px;animation-duration:6s}
.ax-chip--rate > span{display:flex;gap:1px}
.ax-chip--rate svg{width:10px;height:10px;fill:#FFC53D}
.ax-chip--rate small{width:100%;color:var(--muted);font-size:11px}
.ax-chip--cart{right:12px;bottom:18px;background:#22C55E;color:#fff;animation-delay:-2.4s}
.ax-chip--cart .ico{width:15px;height:15px}
.cp-sil{height:auto}

/* checkout */
.ax-pay{display:grid;gap:7px}
.ax-pay__opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;box-shadow:inset 0 0 0 2px var(--brand);font:600 12.5px/1 var(--font-body)}
.ax-pay__opt i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 4px var(--brand)}
.ax-pay__opt em{margin-left:auto;padding:3px 7px;border-radius:999px;background:#E7F8EE;color:#16A34A;font:700 10.5px/1 var(--font-body)}
.ax-pay__btn{position:relative;overflow:hidden;display:grid;place-items:center;height:36px;border-radius:10px;background:#22C55E;color:#fff;font:700 12.5px/1 var(--font-body)}
.ax-pay__btn::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-100%);animation:ax-shine 3.2s var(--ease-in-out) infinite}
@keyframes ax-shine{60%,100%{transform:translateX(100%)}}

/* vitrines: tarjas escuras */
.ax-pills{margin:0;display:grid;justify-items:start;gap:4px;font:600 clamp(1.25rem,1rem + .6vw,1.5rem)/1.12 var(--font-display);letter-spacing:-.035em}
.ax-pills span{padding:4px 12px 6px;border-radius:10px;background:var(--night);color:#fff;clip-path:inset(0 100% 0 0 round 10px);transition:clip-path .8s var(--ease-out) calc(var(--k) * .14s + .25s)}
.ax.is-in .ax-pills span{clip-path:inset(0 0 0 0 round 10px)}
.ax--brand .ax-pills span,.ax--dark .ax-pills span{background:#fff;color:var(--night)}
.ax-banner{display:grid;gap:3px;padding:16px 18px;color:#fff;background:linear-gradient(135deg,var(--deep),var(--bright));box-shadow:0 24px 48px -20px rgba(24,80,213,.6)}
.ax-banner small{font:500 10.5px/1 var(--font-mono);opacity:.8}
.ax-banner b{font:600 17px/1.1 var(--font-display);letter-spacing:-.03em}
.ax-banner em{justify-self:start;margin-top:8px;padding:6px 11px;border-radius:999px;background:#fff;color:var(--brand);font:700 11px/1 var(--font-body)}

/* pop-up: o cursor clica e o cupom libera */
.ax-pop{position:absolute;left:50%;bottom:-16px;translate:-50% 0;display:grid;gap:8px;width:min(84%,236px);padding:14px 14px 22px;border-radius:16px;background:#fff;color:var(--night);text-align:center;box-shadow:0 24px 48px -16px rgba(0,0,0,.55)}
.ax-pop > b{font:600 14px/1.2 var(--font-display)}
.ax-pop__in{padding:8px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line);color:var(--faint);font-size:12px}
.ax-pop__btn{display:grid;padding:9px;border-radius:9px;background:var(--brand);color:#fff;font:700 12px/1 var(--font-body);animation:ax-btn 5s infinite}
.ax-pop__btn > span{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:5px}
.ax-pop__btn > span:last-child{opacity:0;animation:ax-on 5s infinite}
.ax-pop__btn > span:first-child{animation:ax-off 5s infinite}
.ax-pop__btn .ico{width:13px;height:13px}
.ax-cursor{position:absolute;left:62%;top:78%;width:22px;height:22px;fill:var(--night);stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));animation:ax-cursor 5s var(--ease-in-out) infinite}
@keyframes ax-cursor{0%{transform:translate(70px,40px)}30%{transform:translate(0,0)}36%{transform:translate(0,0) scale(.82)}42%,80%{transform:translate(0,0)}100%{transform:translate(70px,40px)}}
@keyframes ax-btn{0%,38%{background:var(--brand)}42%,90%{background:#22C55E}100%{background:var(--brand)}}
@keyframes ax-on{0%,38%{opacity:0}42%,90%{opacity:1}100%{opacity:0}}
@keyframes ax-off{0%,38%{opacity:1}42%,90%{opacity:0}100%{opacity:1}}

/* e-mail: a sequência acende passo a passo */
.ax-ml__txt{display:grid;gap:12px;position:relative;z-index:1}
.ax-seq{position:absolute;left:24px;right:-18px;bottom:-18px;display:grid;gap:8px;padding:14px;border-radius:18px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ax-seq > span{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:9px 11px;border-radius:12px;background:#fff;color:var(--night);animation:ax-step 6s infinite;animation-delay:calc(var(--k) * 2s)}
.ax-seq .ico{grid-row:span 2;width:28px;height:28px;padding:6px;border-radius:8px;background:#EEF4FF;color:var(--brand)}
.ax-seq small{font:500 10.5px/1 var(--font-mono);color:var(--faint)}
.ax-seq b{font:600 12.5px/1.25 var(--font-body)}
.ax-seq .is-ok .ico{background:#22C55E;color:#fff}
@keyframes ax-step{0%,28%{box-shadow:inset 0 0 0 2px var(--bright),0 10px 24px -10px rgba(42,111,219,.6);transform:translateX(-4px)}36%,100%{box-shadow:none;transform:none}}
@container (min-width:480px){

  .ax-ml__txt{width:44%}
  .ax-seq{left:auto;width:52%;top:18px;bottom:-18px;align-content:start}
}

/* CRM: anel + avatares */
.ax-crm{display:flex;align-items:center;gap:16px;margin-top:auto}
.ax-ring{position:relative;flex:none;display:grid;place-items:center;width:84px;height:84px}
.ax-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ax-ring circle{fill:none;stroke-width:9;stroke:rgba(10,14,30,.08)}
.ax-ring .ax-ring__fg{stroke:var(--brand);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s var(--ease-out) .4s}
.ax.is-in .ax-ring__fg{stroke-dashoffset:30}
.ax-ring b{display:grid;justify-items:center;font:600 1.5rem/1 var(--font-display);letter-spacing:-.04em}
.ax-ring small{font:500 10px/1.2 var(--font-mono);color:var(--muted)}
.ax-crm__txt{display:grid;gap:10px}
.ax-crm__txt > b{font:600 1.05rem/1.2 var(--font-display);letter-spacing:-.02em}
.ax-avs{display:flex}
.ax-avs i{display:grid;place-items:center;width:30px;height:30px;margin-left:-8px;border-radius:50%;background:var(--b);color:#fff;font:700 10.5px/1 var(--font-body);font-style:normal;box-shadow:0 0 0 2px #fff}
.ax-avs i:first-child{margin-left:0}

/* IA: a conversa acontece sozinha */
.ax-chat{position:absolute;left:18px;right:18px;bottom:16px;display:grid;gap:7px}
.ax-chat > span{max-width:86%;padding:8px 12px;font-size:13px;line-height:1.3}
.ax-chat__q{justify-self:start;border-radius:14px 14px 14px 4px;background:var(--paper-2);color:var(--night);animation:ax-q 7s infinite}
.ax-chat__a{justify-self:end;border-radius:14px 14px 4px 14px;background:var(--brand);color:#fff;animation:ax-a 7s infinite}
.ax-chat__dots{justify-self:end;display:flex;gap:4px;padding:10px 12px!important;border-radius:14px;background:#DCE7FB;animation:ax-dots 7s infinite}
.ax-chat__dots i{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:ax-dot 1s infinite}
.ax-chat__dots i:nth-child(2){animation-delay:.15s}.ax-chat__dots i:nth-child(3){animation-delay:.3s}
.ax--dark .ax-chat__q{background:rgba(255,255,255,.12);color:#fff}
@keyframes ax-q{0%{opacity:0;transform:translateY(8px)}8%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ax-dots{0%,12%{opacity:0;height:0;padding-block:0!important;margin-top:-7px}16%,38%{opacity:1;height:auto}42%,100%{opacity:0;height:0;padding-block:0!important;margin-top:-7px}}
@keyframes ax-a{0%,40%{opacity:0;transform:translateY(8px) scale(.96)}46%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ax-dot{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-2px)}}

/* número */
.ax-num{font:600 clamp(3.2rem,2.4rem + 2.2vw,4.4rem)/.9 var(--font-display);letter-spacing:-.06em;color:var(--brand)}
.ax-num__p{position:relative;z-index:1;margin:0;max-width:24ch;font-size:14.5px;line-height:1.45;color:var(--muted)}
.ax-spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:38%}
.ax-spark__a{fill:rgba(42,111,219,.1)}
.ax-spark__l{fill:none;stroke:var(--brand);stroke-width:3;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease-out) .4s}
.ax.is-in .ax-spark__l{stroke-dashoffset:0}
@container (min-width:480px){.ax-nm .ax-spark{left:42%;height:70%}}

/* o Max sai do card, por cima do 3,1x */
.ax-grid .ax-mx{overflow:visible;z-index:2}
.ax-grid .ax-max{height:112%}
.ax-grid .ax-chip--pdp{left:6%;top:46%}
.ax-grid .ax-chip--rate{right:7%;top:30%}
.ax-grid .ax-chip--cart{right:9%;bottom:12%}
.ax-grid .ax-pills span{background:var(--night)}


/* ---------- responsivo ---------- */
@media (max-width:1100px){
  .ax-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense}
  .ax{grid-column:auto / span var(--cs);grid-row:auto / span var(--rs)}
}
@media (max-width:640px){
  .ax-grid{grid-template-columns:minmax(0,1fr)}
  .ax{grid-column:auto}
  .ax-ml,.ax-ia,.ax-ck,.ax-pp,.ax-cr{grid-row:auto / span 4}
  .ax-grid .ax-max{height:100%}
}
@media (prefers-reduced-motion:reduce){
  .ax-chip,.ax-pay__btn::after,.ax-cursor,.ax-pop__btn,.ax-pop__btn > span,.ax-seq > span,.ax-chat > span,.ax-chat__dots i{animation:none}
  .ax-pop__btn > span:last-child,.ax-chat__dots{display:none}
}

/* 3,1x no azul vivo */
.ax--brand .ax-label{color:#CFE0FF}
.ax--brand .ax-num{color:#fff}
.ax--brand .ax-num__p{color:#DCE7FB}
.ax--brand .ax-spark__a{fill:rgba(255,255,255,.14)}
.ax--brand .ax-spark__l{stroke:#fff}
/* vitrine: o banner sobe até perto das tarjas e preenche o card */
.ax-bn .ax-banner{position:relative;flex:1;align-self:stretch;align-content:end;margin:8px -42px -42px 0;min-height:110px;padding:18px 20px 34px;overflow:hidden}
.ax-banner__img{position:absolute;right:18px;top:14px;width:92px;opacity:.9;transform:rotate(8deg)}
.ax-banner__img .cp-sil{width:100%;fill:rgba(255,255,255,.28)}
.ax.is-in .ax-banner__img{animation:mk-float 6s var(--ease-in-out) infinite alternate}
/* e-mail: com espaço, a sequência completa; estreito, uma linha do tempo curta */
.ax-tl{display:none}
@container (max-width:479px){
  .ax-ml .ax-seq{display:none}
  .ax-tl{position:relative;align-self:stretch;display:flex;justify-content:space-between;margin-top:auto;padding:0 4px}
  .ax-tl::before{content:"";position:absolute;left:24px;right:24px;top:18px;height:2px;background:repeating-linear-gradient(90deg,rgba(42,111,219,.4) 0 6px,transparent 6px 12px)}
  .ax-tl span{position:relative;display:grid;justify-items:center;gap:6px}
  .ax-tl .ico{width:38px;height:38px;padding:9px;border-radius:50%;background:#fff;color:var(--brand);box-shadow:0 8px 18px -10px rgba(10,14,30,.4);animation:ax-tl 6s infinite;animation-delay:calc(var(--k) * 2s)}
  .ax-tl .is-ok .ico{background:#22C55E;color:#fff}
  .ax-tl small{font:500 11px/1 var(--font-mono);color:var(--muted)}
}
@keyframes ax-tl{0%,28%{box-shadow:0 0 0 4px rgba(79,143,255,.35),0 8px 18px -10px rgba(10,14,30,.4);transform:scale(1.08)}36%,100%{box-shadow:0 8px 18px -10px rgba(10,14,30,.4);transform:none}}
.ax-ml .ax-mid{font-size:clamp(1.15rem,.95rem + .45vw,1.3rem)}
/* fileira de baixo mais baixa: conteúdo encostado no título, sem vão */
.ax-cr .ax-crm{margin-top:auto}
.ax-ck .ax-panel--b{bottom:-14px}
@media (prefers-reduced-motion:reduce){.ax-tl .ico,.ax.is-in .ax-banner__img{animation:none}}

/* =========================================================================
   PLANOS: a faixa de faturamento escolhe o plano (ref. Clario: preços com toggle)
   ========================================================================= */
.pl1__box{display:grid;justify-items:center;gap:28px;margin-top:clamp(32px,4vw,48px)}
.pl1__tog{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:6px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 20px 40px -30px rgba(10,14,30,.4)}
.pl1__tog button{position:relative;z-index:1;padding:12px 20px;border:0;border-radius:999px;background:none;color:var(--muted);font:600 15px/1 var(--font-body);cursor:pointer;transition:color .4s}
.pl1__tog button:hover{color:var(--night)}
.pl1__tog button.is-on{color:#fff}
.pl1__pill{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:999px;background:var(--night);box-shadow:0 10px 24px -10px rgba(10,14,30,.6);transition:left .55s var(--ease-out),width .55s var(--ease-out)}
.pl1__stage{display:grid;width:100%;max-width:1040px}
.pl1__panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);padding:clamp(28px,4vw,48px);border-radius:32px;color:#fff;
  background:radial-gradient(ellipse 70% 90% at 100% 0%,rgba(79,143,255,.35),transparent 60%),linear-gradient(160deg,#0E1A4A,var(--night) 65%);box-shadow:0 50px 100px -50px rgba(42,111,219,.65);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);transition:opacity .5s var(--ease-out),transform .7s var(--ease-out),visibility 0s .5s}
.pl1__panel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease-out),transform .7s var(--ease-out)}
.pl1__main{display:grid;align-content:start;justify-items:start;gap:14px}
.pl1__tier{padding:7px 12px;border-radius:999px;background:rgba(79,143,255,.18);color:#CFE0FF;font:500 12.5px/1 var(--font-mono)}
.pl1__main h3{margin:6px 0 0;font:600 clamp(2.2rem,1.6rem + 1.6vw,3rem)/1 var(--font-display);letter-spacing:-.05em}
.pl1__main p{margin:0;max-width:36ch;color:#A8B1CC;line-height:1.6}
.pl1__main .btn{margin-top:12px}
.pl1__list{display:grid;align-content:start;gap:14px;padding-left:clamp(0px,3vw,40px);border-left:1px solid rgba(255,255,255,.1)}
.pl1__prev{font:500 12.5px/1 var(--font-mono);color:var(--bright)}
.pl1__list ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pl1__list li{display:flex;align-items:center;gap:12px;font-size:16px;color:#E4EBFA}
.pl1__list .ico{flex:none;width:24px;height:24px;padding:5px;border-radius:50%;background:#22C55E;color:#fff}
.pl1__panel.is-on li{animation:pl-li .6s var(--ease-out) both}
.pl1__panel.is-on li:nth-child(2){animation-delay:.06s}.pl1__panel.is-on li:nth-child(3){animation-delay:.12s}.pl1__panel.is-on li:nth-child(4){animation-delay:.18s}.pl1__panel.is-on li:nth-child(5){animation-delay:.24s}
@keyframes pl-li{from{opacity:0;transform:translateX(-10px)}}
.pl1__foot{display:flex;justify-content:center;margin-top:28px}
@media (max-width:900px){.pl1__panel{grid-template-columns:minmax(0,1fr)}.pl1__list{padding-left:0;padding-top:24px;border-left:0;border-top:1px solid rgba(255,255,255,.1)}.pl1__tog{border-radius:22px}.pl1__tog button{padding:11px 14px;font-size:14px}}
.pl1__more{margin:28px 0 0;text-align:center;color:var(--muted);font-size:15px}
.pl1__more a{color:var(--brand);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.pl1__more .ico{width:14px;height:14px}

/* ---------- planeta atrás do Max no hero (ref. ClickMax): esfera azul clara + ondas que pulsam ---------- */
.ca-hero{overflow-x:clip}
.ca-stage > .cafx{position:absolute;z-index:0;left:50%;top:36%;width:0;height:0;pointer-events:none}
.cafx--planet .cafx__disc{position:absolute;left:-200px;top:-200px;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFFFFF 0%,#E4EDFF 30%,#BCD2FF 70%,#9DBCFF 100%);box-shadow:0 60px 120px -50px rgba(42,111,219,.6),inset 0 -30px 60px -20px rgba(42,111,219,.25)}
.cafx--planet .cafx__wave{position:absolute;left:-200px;top:-200px;width:400px;height:400px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(42,111,219,.35);
  opacity:0;animation:cafx-wave 6s var(--ease-out) infinite}
.cafx--planet .cafx__wave:nth-of-type(2){animation-delay:2s}
.cafx--planet .cafx__wave:nth-of-type(3){animation-delay:4s}
@keyframes cafx-wave{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}
@media (max-width:560px){.ca-stage > .cafx{transform:scale(.72)}}
@media (prefers-reduced-motion:reduce){.cafx--planet .cafx__wave{animation:none}}