/* =========================================================================
   EZER COMMERCE — página principal · DIREÇÃO A "A loja inteira, um time só"
   Mesma linguagem do Deu Checkout! (tokens do site.css). Refs.: Menzzo, Ouder, cfPRO.
   ========================================================================= */

/* ---------- peças comuns ---------- */
.hb-chip{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)}
.hb-chip__stars{display:flex;gap:1px}
.hb-tags{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.hb-tags i{padding:6px 10px;border-radius:999px;background:#EEF4FF;color:var(--brand);font:600 12px/1 var(--font-body);font-style:normal}
.plat-logo{display:block;height:22px;background:#A9AFBD;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.plat-logo--nuvem{--logo:url(img/plat/nuvemshop.png);aspect-ratio:197 / 32}
.plat-logo--tray{--logo:url(img/plat/tray.png);aspect-ratio:87 / 38;height:24px}
.plat-logo--li{--logo:url(img/plat/loja-integrada.svg);aspect-ratio:603 / 122}
.plat-logo--wbuy{--logo:url(img/plat/wbuy.png);aspect-ratio:115 / 30}
.mz-h2{max-width:18ch;font-size:clamp(2rem,1.25rem + 2.6vw,3.6rem)}
.cm-head--center .mz-h2{margin-inline:auto}
.ca-toast{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:16px;background:#fff;box-shadow:0 24px 48px -24px rgba(10,14,30,.5),inset 0 0 0 1px var(--line);animation:mk-float 5s var(--ease-in-out) infinite alternate}
.ca-toast span:last-child{display:grid;gap:2px}
.ca-toast b{font:600 14.5px/1.2 var(--font-display);color:var(--night)}
.ca-toast small{font-size:12px;color:#4A5070}
.ca-toast__ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--paper-2);color:var(--brand)}
.ca-toast__ic--ok{background:#E7F8EE;color:#1E9E5A}
.ca-toast__ic .ico{width:18px;height:18px}
.ca-faq__max{margin-top:34px}

/* botão principal: btn--expand. No azul, o círculo cresce em azul-noite; no escuro, em branco */
.btn--brand.btn--expand{--btn-fill:var(--night);--btn-fill-ink:#fff}
.btn--brand.btn--expand .btn__icon{background:#fff;color:var(--brand)}
.btn--brand.btn--expand:is(:hover,:focus-visible){background-color:var(--night)}
.theme-dark .btn--brand.btn--expand{--btn-fill:#fff;--btn-fill-ink:var(--night)}
.theme-dark .btn--brand.btn--expand:is(:hover,:focus-visible){background-color:#fff}
.theme-dark .btn--brand.btn--expand:is(:hover,:focus-visible) .btn__icon{background:var(--brand);color:#fff}
.header__cta.btn--expand{--btn-fill:var(--brand);--btn-fill-ink:#fff}
.header__cta.btn--expand .btn__icon{background:var(--brand);color:#fff}
.header__cta.btn--expand:is(:hover,:focus-visible){background-color:var(--brand)}

/* =========================================================================
   HERO (Menzzo): o hero encolhe e vira um card arredondado sobre o escuro
   ========================================================================= */
.mzh{--s:0;background:var(--night);padding:0}
.mzh__card{min-height:100svh;padding-block:96px 0;display:flex;align-items:stretch;overflow:hidden;
  border-radius:calc(var(--s) * 40px);transform:scale(calc(1 - var(--s) * .06));transform-origin:50% 0;
  background:radial-gradient(ellipse 50% 60% at 78% 55%,rgba(79,143,255,.2),transparent 70%),var(--paper)}
.mzh__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(24px,4vw,64px);align-items:stretch;width:100%}
.mzh__copy{display:grid;justify-items:start;align-self:center;gap:22px;padding-block:24px 64px}
.mzh__h1{margin:0;font-size:clamp(2.6rem,1.3rem + 3.6vw,4.6rem);line-height:1;letter-spacing:-.05em;max-width:13ch}
.mzh__l1{display:block}
/* a 2ª linha nasce cinza e se completa em azul (Menzzo) */
.mzh__l2{display:block;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(90deg,var(--brand) 0 50%,#B9C0D3 50% 100%);background-size:200% 100%;background-position:100% 0;transition:background-position 1.6s var(--ease-out) .5s}
.mzh__l2.is-in{background-position:0 0}
.mzh__plat{margin:6px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:12px 26px;color:var(--faint);font:500 12.5px/1 var(--font-mono)}
.mzh__art{position:relative;min-height:560px}
.mzh__ring{position:absolute;right:calc(var(--max-r) - 36px);bottom:-12%;width:min(440px,80%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#D8E6FF 0 58%,#E8EFFC 59% 100%);box-shadow:0 0 0 1px rgba(42,111,219,.12),0 0 0 46px rgba(79,143,255,.05)}
/* o Max fica encostado na borda da tela (fora do container), para o card não ficar em cima dele */
.mzh__art{--edge:calc((100vw - min(100vw, var(--max))) / 2 + var(--gutter));--crop:clamp(0px, (1500px - 100vw) * .25 + 16px, 56px);--max-r:calc(-1 * (var(--edge) + var(--crop)))}
.mzh__max{position:absolute;right:var(--max-r);bottom:0;height:min(clamp(420px,36vw,640px),82svh);width:auto;pointer-events:none}
@media (min-width:1640px){.mzh__art{--max-r:calc(-1 * min(var(--edge) - 24px, 260px))}}
@media (min-width:1221px) and (max-width:1439px){.mzh__art .mzr{width:370px}}

/* a conversa que direciona */
.mzr{position:absolute;left:0;top:50%;z-index:3;translate:0 -50%;width:min(100%,400px);display:grid;gap:12px;padding:16px;border-radius:24px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -36px rgba(10,14,30,.55)}
.mzr__ask{display:flex;align-items:center;gap:12px}
.mzr__ask .maxb__av{width:46px;height:46px}
.mzr__ask p{margin:0;font:600 1.12rem/1.2 var(--font-display);letter-spacing:-.02em;color:var(--night)}
.mzr__ask p b{display:block;margin-bottom:4px;font:600 11.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--brand)}
.mzr__opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mzr__opt{display:flex;align-items:center;gap:9px;min-height:48px;padding:8px 10px;border:0;border-radius:14px;background:#fff;color:var(--night);text-align:left;font:600 13px/1.2 var(--font-body);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .4s var(--ease-out),background .4s,color .4s,transform .4s var(--ease-out)}
.mzr__opt:hover{box-shadow:inset 0 0 0 1.5px var(--brand)}
.mzr__opt:active{transform:scale(.97)}
.mzr__opt.is-on{background:var(--brand);color:#fff;box-shadow:0 14px 28px -14px rgba(42,111,219,.8)}
.mzr__ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#EEF4FF;color:var(--brand);transition:background .4s,color .4s}
.mzr__ic .ico{width:16px;height:16px}
.mzr__opt.is-on .mzr__ic{background:rgba(255,255,255,.2);color:#fff}
.mzr__outs{display:grid}
.mzr__out{grid-area:1/1;display:none;gap:12px;padding:14px;border-radius:16px;background:var(--paper)}
.mzr__out.is-on{display:grid;animation:mz-in .6s var(--ease-out) both}
@keyframes mz-in{from{opacity:0;transform:translateY(8px)}}
.mzr__out p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.45}
.mzr__out p b{display:block;margin-bottom:3px;font:600 1.05rem/1.15 var(--font-display);letter-spacing:-.02em;color:var(--night)}
.mzr__go{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
.mzr__go .btn{min-height:46px;font-size:15px}
.link-u{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.link-u .ico{width:14px;height:14px}

@media (max-width:1220px){
  .mzh__card{border-radius:0;transform:none;min-height:auto}
  .mzh__in{grid-template-columns:minmax(0,1fr)}
  .mzh__card{padding-bottom:56px}
  .mzh__copy{padding-bottom:0}
  .mzh__art{min-height:0;display:grid;justify-items:center;padding-top:190px}
  .mzh__ring{right:auto;left:50%;top:10px;bottom:auto;translate:-50% 0;width:230px}
  .mzh__art{--max-r:auto}
  .mzh__max{right:auto;left:50%;top:0;bottom:auto;translate:-50% 0;height:240px}
  .mzr{position:relative;left:auto;top:auto;translate:none;width:100%;max-width:520px;z-index:3}
  .mzh__max{height:240px}
}
@media (max-width:520px){.mzr__opts{grid-template-columns:minmax(0,1fr)}}

/* =========================================================================
   PROVAS (Ouder): números + os segmentos como textura, em sentidos opostos
   ========================================================================= */
.mzo{padding-block:clamp(56px,7vw,88px);overflow:hidden}
.mzo__nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.mzo__nums p{margin:0;display:grid;gap:8px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.mzo__nums b{font:600 clamp(2rem,1.5rem + 1.6vw,3rem)/1 var(--font-display);letter-spacing:-.05em;color:#fff}
.mzo__nums p > span{color:#A8B1CC;font-size:15px}
.mzo__lines{display:grid;gap:6px;margin-top:clamp(40px,5vw,64px)}
.mzo__line{--gap:28px}
.mzo__line span{font:500 clamp(1.8rem,1.2rem + 2vw,3.2rem)/1.1 var(--font-display);letter-spacing:-.04em;color:#2A3150;white-space:nowrap;transition:color .5s}
.mzo__line span:hover{color:#fff}
.mzo__line i{width:14px;height:14px;flex:none;border-radius:3px;background:var(--brand);transform:skewX(var(--skew));opacity:.7}
@media (max-width:900px){.mzo__nums{grid-template-columns:1fr 1fr}}

/* =========================================================================
   SERVIÇOS (cfPRO + Menzzo): pergunta fixa que troca + serviços com 2 telas
   ========================================================================= */
.sv__max{margin-top:8px}
.sv-item__head{display:flex;align-items:center;gap:12px}
.sv-item__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#EEF4FF;color:var(--brand)}
.sv-item__ic .ico{width:20px;height:20px}
.sv-item h3{font-size:clamp(1.5rem,1.2rem + .9vw,2rem);letter-spacing:-.035em}
.sv-item__desc{margin:0;max-width:52ch;color:var(--muted);font-size:16.5px}
.sv-item__media{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;margin-top:6px}
.sv-shot{margin:0;border-radius:20px;overflow:hidden;background:#E9EDF5;box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -36px rgba(10,14,30,.45);aspect-ratio:16/11}
.sv-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform 1.4s var(--ease-out),object-position 4s var(--ease-in-out)}
.sv-item:hover .sv-shot img{object-position:50% 100%}
.sv-item__go{margin:0;display:flex;flex-wrap:wrap;gap:10px 24px}
.sv-item__go .link-u{color:var(--brand)}

/* mini-UIs */
.ui{display:grid;align-content:start;gap:12px;padding:16px;border-radius:20px;background:#fff;color:var(--night);box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -36px rgba(10,14,30,.45);font-size:13.5px}
.ui__top{margin:0;display:flex;justify-content:space-between;align-items:center;gap:8px}
.ui__top b{font:600 14px/1.2 var(--font-display)}
.ui__top span{font:500 11px/1 var(--font-mono);color:var(--faint)}
.ui-bar{display:block;height:6px;border-radius:6px;background:#EEF1F7;overflow:hidden}
.ui-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--grad);transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease-out) .2s}
.sv-item.is-seen .ui-bar i{transform:none}
.ui-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.ui-list li{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13px}
.ui-list li > i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#E7F8EE;color:#1E9E5A}
.ui-list li > i .ico{width:12px;height:12px}
.ui-list li.is-doing{color:var(--faint)}
.ui-list li.is-doing > i{background:none;box-shadow:inset 0 0 0 2px #C9D6EE;border-top:2px solid var(--brand);animation:mz-spin 1.1s linear infinite}
@keyframes mz-spin{to{transform:rotate(360deg)}}
.ui-list li b{font-family:var(--font-mono);font-weight:500}
.ui-mig__route{margin:0;display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ui-mig__route .plat-logo{height:16px;background:#5B6480}
.ui-mig__route .ico{width:16px;height:16px;color:var(--brand)}
.ui-lay__sw{display:flex;gap:6px}
.ui-lay__sw i{flex:1;height:38px;border-radius:10px;background:var(--c);box-shadow:inset 0 0 0 1px var(--line)}
.ui-lay__type{margin:0;display:flex;align-items:center;gap:12px}
.ui-lay__type b{font:500 2.2rem/1 Georgia,serif;color:#C8643B}
.ui-lay__type span{color:var(--muted);font-size:12px;line-height:1.35}
.ui-lay__pages{display:flex;flex-wrap:wrap;gap:5px}
.ui-lay__pages span{padding:5px 9px;border-radius:999px;background:#F4EEE7;color:#7A4A30;font:600 11.5px/1 var(--font-body)}
.ui-dc__num{margin:0;display:grid;gap:2px}
.ui-dc__num s{color:var(--faint);font:500 13px/1 var(--font-mono)}
.ui-dc__num b{font:600 1.7rem/1 var(--font-display);letter-spacing:-.04em;color:#1E9E5A}
.ui-dc__num small{color:var(--faint);font-size:11.5px}
.ui-dc__bars,.mzd__bars{display:flex;align-items:flex-end;gap:6px;height:70px}
.ui-dc__bars i,.mzd__bars i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#4F8FFF,#2A6FDB);transform-origin:bottom;transform:scaleY(.15);transition:transform 1.2s var(--ease-out)}
.ui-dc__bars i:last-child{background:linear-gradient(180deg,#3DDC84,#1E9E5A)}
.sv-item.is-seen .ui-dc__bars i,.mzd__case.is-in .mzd__bars i{transform:none}
.ui-dc__bars i:nth-child(n){transition-delay:calc(var(--d,0) * 1s)}
.ui-plan ol{margin:0;padding:0;list-style:none;counter-reset:p;display:grid;gap:8px}
.ui-plan li{counter-increment:p;display:grid;grid-template-columns:24px 1fr;gap:2px 10px;font-size:13px}
.ui-plan li::before{content:counter(p);grid-row:span 2;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#EEF4FF;color:var(--brand);font:600 12px/1 var(--font-mono)}
.ui-plan li b{font-weight:600}
.ui-plan li span{font:500 11px/1 var(--font-mono);color:#1E9E5A}

@media (max-width:980px){
  .sv__grid{grid-template-columns:minmax(0,1fr)}
  .sv__side{display:none}
  .sv-item__q{display:block}
}
@media (max-width:560px){.sv-item__media{grid-template-columns:minmax(0,1fr)}}

/* =========================================================================
   ASSINATURA (Menzzo): a frase em pedaços, um por vez, pinada
   ========================================================================= */
.mzp{height:420vh}
.mzp__sticky{position:sticky;top:0;height:100svh;display:grid;place-items:center;align-content:center;gap:26px;padding-inline:var(--gutter);text-align:center;overflow:hidden;
  background:radial-gradient(ellipse 50% 40% at 50% 60%,rgba(42,111,219,calc(.08 + var(--p,0) * .22)),transparent 70%)}
.mzp__sticky .label{margin:0}
.mzp__line{margin:0;display:grid;width:100%}
.mzp__piece{grid-area:1/1;font:500 clamp(2.2rem,1.2rem + 3.6vw,4.4rem)/1.05 var(--font-display);letter-spacing:-.05em;color:#fff;
  opacity:0;transform:translateY(40px) scale(.97);filter:blur(10px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out),filter .7s}
.mzp__piece.is-active{opacity:1;transform:none;filter:none}
.mzp__sticky > *{position:relative;z-index:1}
/* fundo: três luzes azuis que derivam devagar (aurora suave) */
.mzp__sticky > .mzp__glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mzp__glow i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform;animation:mzp-drift 26s ease-in-out infinite alternate}
.mzp__glow i:nth-child(1){left:-18vmax;top:-22vmax;background:radial-gradient(circle,rgba(42,111,219,.55),transparent 62%)}
.mzp__glow i:nth-child(2){right:-20vmax;bottom:-26vmax;background:radial-gradient(circle,rgba(79,143,255,.42),transparent 62%);animation-duration:32s;animation-delay:-9s}
.mzp__glow i:nth-child(3){left:30%;top:35%;width:40vmax;height:40vmax;background:radial-gradient(circle,rgba(24,80,213,.4),transparent 65%);animation-name:mzp-drift2;animation-duration:22s;animation-delay:-4s}
@keyframes mzp-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14vmax,8vmax,0) scale(1.12)}100%{transform:translate3d(6vmax,18vmax,0) scale(.94)}}
@keyframes mzp-drift2{0%{transform:translate3d(-10vmax,-6vmax,0) scale(.9)}100%{transform:translate3d(12vmax,4vmax,0) scale(1.15)}}
.mzp:not(.is-vis) .mzp__glow i{animation-play-state:paused}
@media (max-width:1023px){
  .mzp{height:auto}
  .mzp__sticky{position:relative;height:auto;padding-block:96px}
  .mzp__line{display:block}
  .mzp__piece{display:inline;opacity:1;transform:none;filter:none;font-size:clamp(1.9rem,1.2rem + 3vw,2.6rem)}
  .mzp__piece + .mzp__piece::before{content:" "}
}

/* =========================================================================
   LOJAS (Menzzo): parede 3D de telas; as fileiras correm com o scroll
   ========================================================================= */
.mzw{overflow:hidden;padding-bottom:0}
.mzw__stage{position:relative;height:clamp(420px,52vw,680px);margin-top:clamp(20px,3vw,40px);perspective:1400px;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.mzw__plane{position:absolute;left:50%;top:4%;width:2600px;display:grid;gap:22px;translate:-50% 0;transform:rotateX(46deg) rotateZ(-14deg);transform-origin:50% 0}
.mzw__row{display:flex;gap:22px;width:max-content;will-change:transform}
.mzw__row--a{transform:translateX(calc(var(--p,.5) * -900px))}
.mzw__row--b{transform:translateX(calc(-900px + var(--p,.5) * 900px))}
.mzw__card{margin:0;flex:none;width:400px;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#E3E8F2;box-shadow:0 30px 60px -30px rgba(10,14,30,.5),inset 0 0 0 1px var(--line)}
.mzw__card img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
@media (max-width:700px){.mzw__card{width:260px}.mzw__plane{width:1800px}}

/* =========================================================================
   DEU CHECKOUT!: métrica riscada → nova
   ========================================================================= */
.mzd{background:radial-gradient(ellipse 60% 80% at 100% 0%,rgba(79,143,255,.35),transparent 60%),linear-gradient(160deg,#0E1A4A,var(--night) 70%)}
.mzd__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:center}
.mzd__copy{display:grid;gap:22px;justify-items:start}
.mzd__copy .label{margin:0}
.mzd__go{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px}
.mzd__case{position:relative;display:grid;gap:12px;padding:26px;border-radius:28px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mzd__who{margin:0;display:flex;align-items:center;gap:12px}
.mzd__who span:last-child{display:grid;gap:2px;color:#A8B1CC;font-size:13px}
.mzd__who b{color:#fff;font:600 16px/1.2 var(--font-display)}
.mzd__logo{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#fff;color:var(--night);font:700 14px/1 var(--font-display)}
.mzd__num{margin:8px 0 0;display:grid;gap:4px}
.mzd__num s{color:#6B7290;font:500 1.1rem/1 var(--font-mono)}
.mzd__num b{font:600 clamp(2.2rem,1.6rem + 2vw,3.4rem)/1 var(--font-display);letter-spacing:-.05em;color:#fff}
.mzd__in3{margin:0;color:#3DDC84;font:500 13px/1 var(--font-mono)}
.mzd__bars{height:110px;margin-top:10px}
.mzd__bars i:last-child{background:linear-gradient(180deg,#3DDC84,#1E9E5A)}
.mzd__toast{top:-22px;right:-18px}
@media (max-width:900px){.mzd__in{grid-template-columns:minmax(0,1fr)}.mzd__toast{right:8px}}

/* =========================================================================
   TEMAS: em breve + me avise; as telas em leque
   ========================================================================= */
.mzm__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.mzm__copy{display:grid;gap:22px;justify-items:start}
.mzm__copy .label{margin:0}
.mzm__plats{margin:4px 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px}
.mzm__plats .plat-logo{background:#3A4260}
.mzm__plats .plat-logo--li{height:22px}
.mzm__plats .plat-logo--nuvem{height:16px}
.mzm__plats .plat-logo--wbuy{height:15px}
.mzm__plats .plat-logo--tray{height:19px}
.mzm__fan{position:relative;height:460px}
.mzm__card{position:absolute;left:50%;top:50%;margin:0;width:min(78%,420px);aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#E3E8F2;box-shadow:0 40px 70px -36px rgba(10,14,30,.55),inset 0 0 0 1px var(--line);transition:transform 1s var(--ease-out)}
.mzm__card img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.mzm__card--1{transform:translate(-50%,-50%) translate(-27%,-24%) rotate(-7deg)}
.mzm__card--2{transform:translate(-50%,-50%) translate(27%,-6%) rotate(6deg);z-index:1}
.mzm__card--3{transform:translate(-50%,-50%) translate(-10%,28%) rotate(-2deg);z-index:2}
.mzm__fan:hover .mzm__card--1{transform:translate(-50%,-50%) translate(-32%,-28%) rotate(-10deg)}
.mzm__fan:hover .mzm__card--2{transform:translate(-50%,-50%) translate(32%,-10%) rotate(9deg)}
.mzm__soon{position:absolute;right:6%;top:6%;z-index:3;padding:10px 16px;border-radius:999px;background:var(--night);color:#fff;font:500 12px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;transform:rotate(6deg);box-shadow:0 18px 30px -16px rgba(10,14,30,.6)}
@media (max-width:900px){.mzm__in{grid-template-columns:minmax(0,1fr)}.mzm__fan{height:340px}.mzm__card{width:min(74%,420px)}}

/* =========================================================================
   DEPOIMENTOS
   ========================================================================= */
.mzt__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(36px,4.5vw,56px)}
.mzt__card{margin:0;display:grid;align-content:space-between;gap:28px;padding:26px;border-radius:26px;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.mzt__card:nth-child(2){background:var(--brand)}
.mzt__card blockquote{margin:0;font:500 1.12rem/1.45 var(--font-display);letter-spacing:-.015em;color:#fff}
.mzt__card figcaption{display:flex;align-items:center;gap:12px;color:#A8B1CC;font-size:13px}
.mzt__card:nth-child(2) figcaption{color:#DCE7FB}
.mzt__card figcaption span:last-child{display:grid;gap:2px}
.mzt__card figcaption b{color:#fff;font-size:14.5px}
.mzt__av{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font:600 15px/1 var(--font-display)}
.mzt__stars{display:block;color:#FFC94D;letter-spacing:2px;font-size:12px}
.mzt__more{margin:28px 0 0;text-align:center}
.mzt__more a{color:#A8B1CC;font-size:14px;text-decoration:underline;text-underline-offset:4px;transition:color .4s var(--ease-out)}
.mzt__more a:hover{color:#fff}
@media (max-width:900px){.mzt__grid{grid-template-columns:minmax(0,1fr)}}

/* =========================================================================
   BLOG E MATERIAIS
   ========================================================================= */
.mzb__head .mz-h2{max-width:22ch}
.mzb__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.mzb__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.05fr);gap:16px;margin-top:clamp(36px,4.5vw,56px)}
.mzb__post,.mzb__mat{display:grid;align-content:space-between;gap:30px;min-height:260px;padding:22px;border-radius:24px;background:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.mzb__post:hover,.mzb__mat:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -34px rgba(10,14,30,.4)}
.mzb__post b,.mzb__mat b{font:500 1.28rem/1.2 var(--font-display);letter-spacing:-.03em;color:var(--night)}
.mzb__post small,.mzb__mat small{display:inline-flex;align-items:center;gap:6px;color:var(--faint);font:500 12px/1 var(--font-mono)}
.mzb__post small .ico,.mzb__mat small .ico{width:13px;height:13px}
.mzb__tag{justify-self:start;padding:6px 10px;border-radius:999px;background:#EEF4FF;color:var(--brand);font:600 12px/1 var(--font-body)}
.mzb__mat{position:relative;overflow:hidden;background:var(--brand)}
.mzb__mat b{color:#fff;position:relative;z-index:1;max-width:14ch}
.mzb__mat small{color:#DCE7FB;position:relative;z-index:1}
.mzb__mat .mzb__tag{background:rgba(255,255,255,.18);color:#fff;position:relative;z-index:1}
.mzb__mat-doc{position:absolute;right:-22px;bottom:-96px;width:128px;height:170px;padding:22px 18px;display:grid;align-content:start;gap:12px;border-radius:14px;background:#fff;transform:rotate(-10deg);box-shadow:0 30px 50px -24px rgba(0,0,0,.5);transition:transform .8s var(--ease-out)}
.mzb__mat-doc i{display:block;height:8px;border-radius:4px;background:#E3EAF7}
.mzb__mat-doc i:first-child{width:60%;background:var(--brand)}
.mzb__mat:hover .mzb__mat-doc{transform:rotate(-4deg) translateY(-10px)}
@media (max-width:1100px){.mzb__grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.mzb__grid{grid-template-columns:minmax(0,1fr)}.mzb__post,.mzb__mat{min-height:200px}}

/* =========================================================================
   RODAPÉ: a pergunta volta, com as respostas indo direto ao WhatsApp
   ========================================================================= */
.mzf__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px}
.mzf__chip{padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.07);color:#fff;text-decoration:none;font:600 14.5px/1 var(--font-body);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background .45s var(--ease-out),color .45s,transform .45s var(--ease-out)}
.mzf__chip:hover{background:#fff;color:var(--night);transform:translateY(-2px)}

/* pílula "Fale com o Max" (Menzzo) no lugar do ícone de WhatsApp */
@media (prefers-reduced-motion:reduce){
  .mzh__l2{background-position:0 0;transition:none}
  .mzw__row{transform:none!important}
  .mzp{height:auto}.mzp__sticky{position:relative;height:auto;padding-block:96px}.mzp__line{display:block}
  .mzp__piece{display:inline;opacity:1;transform:none;filter:none}.mzp__piece + .mzp__piece::before{content:" "}
  .mzp__glow i{animation:none}
}

/* ---------- O que fazemos (ref. Sunbeam): abas + painel em gradiente ---------- */
.svx__foot{margin-top:clamp(28px,3.5vw,44px)}
.svt__desc{margin:0;max-width:46ch;color:var(--muted);font-size:16.5px;line-height:1.55}
.svt h3{margin:0;font-size:clamp(1.6rem,1.2rem + 1.1vw,2.3rem);letter-spacing:-.035em;line-height:1.08}
.svt__media{position:relative}
.svt__media .sv-shot img{object-position:50% 50%}
.svt__media:hover .sv-shot img{transform:scale(1.03)}
.is-seen .ui-bar i,.is-seen .ui-dc__bars i{transform:none}
@keyframes svx-in{from{opacity:0;transform:translateY(12px) scale(.985)}}

/* ---------- 1. Sunbeam: abas + painel em gradiente ---------- */
.svt__tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:clamp(32px,4vw,52px);padding:6px;border-radius:22px;background:#E9EDF5}
.svt__tab{display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 12px;border:0;border-radius:16px;background:transparent;color:var(--muted);text-align:left;
  font:600 14px/1.2 var(--font-body);cursor:pointer;transition:background .5s var(--ease-out),color .4s,box-shadow .5s var(--ease-out),transform .2s}
.svt__tab:hover{color:var(--fg);background:rgba(255,255,255,.55)}
.svt__tab:active{transform:scale(.97)}
.svt__tab[aria-selected="true"]{background:#fff;color:var(--fg);box-shadow:0 12px 26px -16px rgba(10,14,30,.45)}
.svt__ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(42,111,219,.08);color:var(--faint);transition:background .4s,color .4s}
.svt__ic .ico{width:17px;height:17px}
.svt__tab[aria-selected="true"] .svt__ic{background:var(--brand);color:#fff}
.svt__panel{display:grid;margin-top:12px;padding:clamp(24px,3.6vw,56px);border-radius:32px;overflow:hidden;
  background:radial-gradient(ellipse 55% 75% at 100% 0%,rgba(79,143,255,.55),transparent 62%),radial-gradient(ellipse 45% 70% at 0% 100%,rgba(24,80,213,.22),transparent 60%),linear-gradient(135deg,#EEF3FF 0%,#DCE7FF 100%)}
.svt__pane{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:center}
.svt__pane[hidden]{display:none}
.svt__pane.is-on{animation:svx-in .6s var(--ease-out) both}
.svt__txt{display:grid;justify-items:start;gap:16px}
.svt__txt .sv-item__go{margin-top:8px;align-items:center}
.svt__txt .hb-tags i{background:rgba(255,255,255,.7)}
.svt__media{padding:0 0 28px 28px}
.svt__media .sv-shot{box-shadow:0 40px 80px -40px rgba(10,14,30,.55)}
.svt__media .ui{position:absolute;left:0;bottom:0;width:min(250px,48%);box-shadow:0 30px 60px -30px rgba(10,14,30,.5)}
@media (max-width:1100px){.svt__tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .svt__tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);border-radius:0;background:none;gap:8px}
  .svt__tabs::-webkit-scrollbar{display:none}
  .svt__tab{flex:none;scroll-snap-align:start;background:#E9EDF5;min-height:50px}
  .svt__pane{grid-template-columns:minmax(0,1fr)}
  .svt__panel{border-radius:24px}
}
@media (max-width:560px){.svt__media{padding:0}.svt__media .ui{position:relative;width:auto;margin-top:12px}}

@media (prefers-reduced-motion:reduce){.svt__pane.is-on{animation:none}}

/* os cards do leque de temas não podem vazar a tela no celular */
.mzm{overflow-x:clip}