/* Serviços v2 — grid bento, cards em vidro, ícones 3D e feixes em canvas.
   Montado por assets/wb-servicos-v2.js. Tudo aqui é escopado em #beneficios. */

/* ================= Moldura do grid ================= */
.cortex-landing #beneficios .cl-benefits-grid{
  grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;padding:14px;border-radius:34px;
  background:
    radial-gradient(70% 50% at 50% 0%,#3baaff1f,#0000 70%),
    linear-gradient(180deg,#0e131b,#0a0d13 40%,#08090d);
  border:1px solid #9fe3ff1f;
  box-shadow:inset 0 1px 0 #d7f6ff2e,inset 0 0 0 1px #ffffff05,0 40px 80px -40px #000,0 0 90px -30px #3baaff40;
}
.cortex-landing #beneficios .cl-benefits-grid::before{
  background:linear-gradient(90deg,#0000 8%,#9fe3ff 30%,#e9fbff 50%,#9fe3ff 70%,#0000 92%) top/100% 1px no-repeat;
  padding:0;-webkit-mask:none;mask:none;opacity:.55;inset:0;
}
.cortex-landing #beneficios .cl-benefits-grid::after{
  inset:-90px -120px;border-radius:0;opacity:1;
  background:radial-gradient(50% 40% at 50% 0%,#3baaff2b,#0000 70%),radial-gradient(#8ddeff12 .7px,#0000 .9px) 0 0/5px 5px;
  -webkit-mask:radial-gradient(60% 55% at 50% 30%,#000 30%,#0000 75%);mask:radial-gradient(60% 55% at 50% 30%,#000 30%,#0000 75%);
}

/* Bento: 7/5 · 5/7 · 7/5 */
#beneficios .cl-benefits-grid>.cl-benefit{grid-column:span 6}
#beneficios .cl-benefits-grid>.cl-benefit:nth-child(4n+1),#beneficios .cl-benefits-grid>.cl-benefit:nth-child(4n){grid-column:span 7}
#beneficios .cl-benefits-grid>.cl-benefit:nth-child(4n+2),#beneficios .cl-benefits-grid>.cl-benefit:nth-child(4n+3){grid-column:span 5}

/* ================= Card ================= */
.cortex-landing #beneficios .cl-benefit,.cortex-landing #beneficios .cl-benefit:first-child,.cortex-landing #beneficios .cl-benefit:nth-child(2n){
  --c1:#3baaff;--c2:#9fe3ff;
  display:flex;flex-direction:column;min-height:0;padding:10px 10px 26px;border-radius:24px;
  background:
    radial-gradient(120% 60% at var(--mx,50%) 0%,color-mix(in srgb,var(--c1) 10%,#0000),#0000 60%),
    linear-gradient(180deg,#12161d,#0d1015 55%,#0b0d11);
  border:1px solid #ffffff12;
  box-shadow:inset 0 1px 0 #ffffff14,0 1px 0 #00000080,0 24px 48px -28px #000000d9;
  transition:border-color .35s,box-shadow .35s,translate .5s cubic-bezier(.2,.8,.2,1);
}
.cortex-landing #beneficios .cl-benefit:hover{
  border-color:color-mix(in srgb,var(--c2) 30%,#ffffff12);
  box-shadow:inset 0 1px 0 #ffffff1f,0 0 0 1px color-mix(in srgb,var(--c1) 18%,#0000),0 30px 60px -28px color-mix(in srgb,var(--c1) 45%,#000);
}
/* Contorno de luz que segue o mouse */
.cortex-landing #beneficios .cl-benefit::after{
  content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--c2),#0000 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  background-size:auto;transition:opacity .35s;
}
.cortex-landing #beneficios .cl-benefit:hover::after{opacity:.75}

/* Texto */
.cortex-landing #beneficios .cl-benefit h3{margin:4px 18px 0;font-size:22px;letter-spacing:-.035em;line-height:1.2}
.cortex-landing #beneficios .cl-benefit p{margin:8px 18px 0;max-width:440px;min-height:0;color:#9aa3ad;font-size:14px;line-height:1.65}
#beneficios .wbx-tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 18px 0;padding:0;list-style:none;position:relative;z-index:2}
#beneficios .wbx-tags li{padding:4px 10px;border-radius:999px;font-size:11.5px;letter-spacing:.01em;color:#c9e9ff;
  background:color-mix(in srgb,var(--c1) 10%,#ffffff05);border:1px solid color-mix(in srgb,var(--c2) 16%,#ffffff0d)}

/* ================= Área da arte ================= */
.cortex-landing #beneficios .cl-benefit-art{
  flex:0 0 268px;height:268px;margin:0 0 22px;border-radius:16px;overflow:hidden;isolation:isolate;container-type:inline-size;
  background:
    radial-gradient(60% 70% at 50% 46%,color-mix(in srgb,var(--c1) 22%,#0000),#0000 70%),
    linear-gradient(180deg,#0b1018,#080a0f);
  box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 1px 0 #ffffff12;
}
/* grade em perspectiva + vinheta */
.cortex-landing #beneficios .cl-benefit-art::before{
  content:"";position:absolute;inset:-40% -10% 0;z-index:0;pointer-events:none;
  background:
    linear-gradient(color-mix(in srgb,var(--c2) 14%,#0000) 1px,#0000 1px) 0 0/100% 28px,
    linear-gradient(90deg,color-mix(in srgb,var(--c2) 14%,#0000) 1px,#0000 1px) 50% 0/28px 100%;
  transform:perspective(420px) rotateX(58deg);transform-origin:50% 100%;
  -webkit-mask:radial-gradient(55% 60% at 50% 88%,#000,#0000 75%);mask:radial-gradient(55% 60% at 50% 88%,#000,#0000 75%);
}
.cortex-landing #beneficios .cl-benefit-art::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 100% at 50% 40%,#0000 55%,#05070acc);
}
#beneficios .wb-service-scene,#beneficios .cl-bv-corner-light,#beneficios .wb3,#beneficios .wb-bits-frame{display:none!important}
#beneficios .wbx-index{position:absolute;left:14px;top:12px;z-index:6;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;
  color:color-mix(in srgb,var(--c2) 75%,#fff);opacity:.7;display:flex;align-items:center;gap:8px}
#beneficios .wbx-index::after{content:"";width:22px;height:1px;background:currentColor;opacity:.5}

.wbx-art{position:absolute;inset:0;z-index:1;--ts:128px;--k:1;--cs:1}
.wbx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask:linear-gradient(90deg,#0000,#000 9%,#000 91%,#0000);mask:linear-gradient(90deg,#0000,#000 9%,#000 91%,#0000)}
.wbx-halo{position:absolute;left:50%;top:49%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--c1) 34%,#0000),#0000 62%);animation:wbx-breathe 6s ease-in-out infinite}
@keyframes wbx-breathe{50%{transform:scale(1.12);opacity:.75}}

/* ================= Ícone 3D ================= */
.wbx-hero{position:absolute;left:50%;top:49%;width:0;height:0;z-index:3;perspective:900px}
.wbx-rig{position:absolute;left:0;top:0;transform-style:preserve-3d;
  transform:rotateX(calc(16deg + var(--rx,0deg))) rotateY(calc(-20deg + var(--ry,0deg)));
  transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.wbx-tile{position:absolute;width:var(--ts);height:var(--ts);left:calc(var(--ts) / -2);top:calc(var(--ts) / -2);
  transform-style:preserve-3d;animation:wbx-float 6.5s ease-in-out infinite}
@keyframes wbx-float{50%{transform:translate3d(0,-7px,6px)}}
.wbx-slab{position:absolute;inset:0;border-radius:28px;transform:translateZ(calc(var(--i) * -3.2px));
  background:linear-gradient(160deg,color-mix(in srgb,var(--c1) 45%,#0a1424),#060a12 70%);
  border:1px solid color-mix(in srgb,var(--c2) 22%,#0000)}
.wbx-slab:last-of-type{box-shadow:0 30px 40px -12px #000}
.wbx-face{position:absolute;inset:0;border-radius:28px;overflow:hidden;
  background:
    radial-gradient(110% 80% at 18% 0%,#e8faff4d,#0000 50%),
    radial-gradient(90% 90% at 80% 110%,color-mix(in srgb,var(--c1) 55%,#0000),#0000 60%),
    linear-gradient(150deg,color-mix(in srgb,var(--c1) 38%,#0c1526),#0a0f1b 72%);
  box-shadow:inset 0 1px 0 #ffffffa6,inset 0 0 0 1px color-mix(in srgb,var(--c2) 38%,#0000),inset 0 -16px 28px -10px color-mix(in srgb,var(--c1) 60%,#0000)}
.wbx-face::before{content:"";position:absolute;inset:0;opacity:.35;
  background:linear-gradient(#ffffff14 1px,#0000 1px) 0 0/100% 14px,linear-gradient(90deg,#ffffff14 1px,#0000 1px) 0 0/14px 100%;
  -webkit-mask:radial-gradient(80% 80% at 70% 100%,#000,#0000 70%);mask:radial-gradient(80% 80% at 70% 100%,#000,#0000 70%)}
.wbx-sheen{position:absolute;top:-30%;bottom:-30%;width:40%;left:-60%;transform:skewX(-18deg);
  background:linear-gradient(90deg,#0000,#ffffff40,#0000);animation:wbx-sheen 6.5s cubic-bezier(.6,0,.3,1) infinite}
@keyframes wbx-sheen{0%,62%{left:-60%}100%{left:130%}}
.wbx-glyph{position:absolute;inset:16%;width:68%;height:68%;overflow:visible;transform:translateZ(26px);
  filter:drop-shadow(0 0 9px color-mix(in srgb,var(--c1) 85%,#0000)) drop-shadow(0 8px 6px #000a)}
.wbx-flash{position:absolute;inset:-10%;border-radius:34px;pointer-events:none;opacity:0;transform:translateZ(2px);
  background:radial-gradient(circle,color-mix(in srgb,var(--c2) 55%,#0000),#0000 65%)}
.wbx-shadow{position:absolute;left:calc(var(--ts) * -.5);width:var(--ts);top:calc(var(--ts) * .5 + 22px);height:22px;border-radius:50%;
  background:radial-gradient(closest-side,#000c,#0000);filter:blur(4px);animation:wbx-shadow 6.5s ease-in-out infinite}
@keyframes wbx-shadow{50%{transform:scale(.86);opacity:.7}}

/* Microanimações dos glifos */
.wbx-g-cursor{animation:wbx-cursor 4.8s ease-in-out infinite;transform-box:fill-box}
@keyframes wbx-cursor{0%,100%{transform:translate(6px,6px)}40%,60%{transform:translate(0,0)}48%{transform:translate(0,0) scale(.88)}}
.wbx-g-ray{opacity:0;animation:wbx-ray 4.8s ease-out infinite}
@keyframes wbx-ray{0%,46%{opacity:0}52%{opacity:1}70%,100%{opacity:0}}
.wbx-g-cta{animation:wbx-cta 4.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes wbx-cta{0%,46%,60%,100%{transform:none}50%{transform:scale(.92)}}
.wbx-g-check{stroke-dasharray:1;animation:wbx-draw 4.4s ease-in-out infinite}
@keyframes wbx-draw{0%,12%{stroke-dashoffset:1}40%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.wbx-g-l1{animation:wbx-l1 5s ease-in-out infinite}.wbx-g-l2{animation:wbx-l2 5s ease-in-out infinite}
@keyframes wbx-l1{50%{transform:translateY(-3.5px)}}@keyframes wbx-l2{50%{transform:translateY(-1.5px)}}
.wbx-g-pen{animation:wbx-pen 5.6s ease-in-out infinite;transform-origin:32px 57px}
@keyframes wbx-pen{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.wbx-g-play{transform-box:fill-box;transform-origin:center;animation:wbx-play 2.8s ease-in-out infinite}
@keyframes wbx-play{50%{transform:scale(1.12)}}
.wbx-g-prog{stroke-dasharray:48;animation:wbx-prog 5.6s linear infinite}
@keyframes wbx-prog{from{stroke-dashoffset:48}to{stroke-dashoffset:0}}
.wbx-g-head{animation:wbx-head 5.6s linear infinite}
@keyframes wbx-head{from{transform:translateX(-22px)}to{transform:translateX(26px)}}

/* ================= Chips flutuantes ================= */
.wbx-sat{position:absolute;left:0;top:0;transform:translate3d(calc(var(--x) * var(--k)),calc(var(--y) * var(--k)),var(--z));transform-style:preserve-3d}
.wbx-sat>*{translate:var(--ax,0%) 0;scale:var(--cs);transform-origin:calc(var(--ax,0%) * -1) 50%;animation:wbx-bob var(--d,6s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes wbx-bob{50%{transform:translateY(-6px)}}
.wbx-chip{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 11px;border-radius:12px;
  font:500 11px/1.2 var(--cl-sans,inherit);color:#d9efff;
  background:linear-gradient(180deg,#1b2433f2,#0d121bf2);
  border:1px solid color-mix(in srgb,var(--c2) 26%,#ffffff10);
  box-shadow:0 14px 26px -10px #000,inset 0 1px 0 #ffffff1c,0 0 24px -8px color-mix(in srgb,var(--c1) 55%,#0000)}
.wbx-k{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#8ea3b8}
.wbx-v{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:700;letter-spacing:-.02em;color:#f2fbff}
.wbx-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:#a8c4da}
.wbx-stat{display:grid;grid-template-columns:auto auto;align-items:end;column-gap:12px}
.wbx-stat .wbx-k{grid-column:1}.wbx-stat .wbx-v{grid-column:1}
.wbx-stat .wbx-spark{grid-column:2;grid-row:1/3}
.wbx-up{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;color:#05140b;background:#5ff2a6;font-style:normal}
.wbx-spark-line{stroke-dasharray:1;animation:wbx-draw 5s ease-in-out infinite}
.wbx-cta{position:relative;padding:9px 14px;border-radius:999px;color:#06111f;font-weight:700;
  background:linear-gradient(180deg,#f2fcff,var(--c2) 60%,var(--c1));border-color:#ffffff80;
  box-shadow:0 14px 28px -10px color-mix(in srgb,var(--c1) 80%,#000),inset 0 1px 0 #fff}
.wbx-c-cursor{position:absolute;right:-12px;bottom:-14px;animation:wbx-cursor 4.8s ease-in-out infinite;animation-delay:-1s}
.wbx-thumb{width:30px;height:30px;border-radius:8px;flex:none;
  background:radial-gradient(circle at 30% 25%,#ffffff70,#0000 40%),linear-gradient(140deg,var(--c2),var(--c1) 55%,#0c2a52)}
.wbx-dot-ok{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:#04130b;background:#5ff2a6;font-style:normal;
  box-shadow:0 0 12px #5ff2a680}
.wbx-badge{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:700 12px/1 var(--cl-sans,inherit);color:#06111f;
  background:linear-gradient(180deg,#fff,var(--c2));box-shadow:0 0 0 4px color-mix(in srgb,var(--c1) 25%,#0000),0 10px 20px -6px #000}
.wbx-stars{color:#ffd66b;letter-spacing:1px;font-size:11px}
.wbx-pin{display:grid;place-items:center;width:30px;height:30px;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);color:#fff;
  background:linear-gradient(180deg,var(--c2),var(--c1));box-shadow:0 10px 20px -6px #000,inset 0 1px 0 #ffffffa0}
.wbx-pin svg{transform:rotate(45deg)}
.wbx-donut{flex:none}
.wbx-chip-sq{padding:5px;border-radius:14px}
.wbx-bars{display:flex;align-items:flex-end;gap:3px;height:26px}
.wbx-bars i{width:5px;height:calc(var(--h) * 100%);border-radius:2px;background:linear-gradient(180deg,var(--c2),color-mix(in srgb,var(--c1) 50%,#0000));
  transform-origin:bottom;animation:wbx-bar 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.3s)}
@keyframes wbx-bar{50%{transform:scaleY(.7)}}
.wbx-live-dot,.wbx-rec-dot{width:8px;height:8px;border-radius:50%;background:#5ff2a6;box-shadow:0 0 0 0 #5ff2a699;animation:wbx-ping 1.8s ease-out infinite}
.wbx-rec-dot{background:#ff5d6c;box-shadow:0 0 0 0 #ff5d6c99}
@keyframes wbx-ping{70%,100%{box-shadow:0 0 0 7px #0000}}
.wbx-rec b{font-size:10.5px;letter-spacing:.1em}
.wbx-swatches{gap:5px;padding:8px}
.wbx-swatches i{width:18px;height:18px;border-radius:6px;background:var(--s);box-shadow:inset 0 1px 0 #ffffff80,0 0 0 1px #0004}
.wbx-swatches i:nth-child(2){animation:wbx-pick 4s ease-in-out infinite}
@keyframes wbx-pick{0%,30%,70%,100%{box-shadow:inset 0 1px 0 #ffffff80,0 0 0 1px #0004}40%,60%{box-shadow:inset 0 1px 0 #ffffff80,0 0 0 2px #fff}}
.wbx-aa{font-size:20px;font-weight:700;letter-spacing:-.04em;color:#fff;
  background:linear-gradient(180deg,#fff,var(--c2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wbx-tl{flex-direction:column;align-items:flex-start;gap:6px}
.wbx-wave{display:flex;align-items:center;gap:2px;height:18px}
.wbx-wave i{width:3px;height:calc(var(--h) * 100%);border-radius:2px;background:var(--c2);opacity:.85;animation:wbx-bar 1.4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.11s)}

/* ================= Responsivo ================= */
@container (max-width:500px){.wbx-art{--ts:116px;--k:.88;--cs:.9}}
@container (max-width:400px){.wbx-art{--ts:96px;--k:.72;--cs:.8}}
@container (max-width:350px){.wbx-art{--ts:86px;--k:.64;--cs:.74}}
@container (max-width:420px){.wbx-stat .wbx-spark{display:none}.wbx-stat{column-gap:0}}
@media (max-width:980px){
  #beneficios .cl-benefits-grid>.cl-benefit:nth-child(n){grid-column:span 6}
  .cortex-landing #beneficios .cl-benefit-art{flex-basis:240px;height:240px}
}
@media (max-width:700px){
  .cortex-landing #beneficios .cl-benefits-grid{gap:10px;padding:10px;border-radius:26px}
  #beneficios .cl-benefits-grid>.cl-benefit:nth-child(n){grid-column:1/-1}
  .cortex-landing #beneficios .cl-benefit,.cortex-landing #beneficios .cl-benefit:first-child,.cortex-landing #beneficios .cl-benefit:nth-child(2n){padding:8px 8px 22px;border-radius:20px;min-height:0}
  .cortex-landing #beneficios .cl-benefit-art{display:block;flex-basis:220px;height:220px;margin:0 0 18px;border-radius:14px}
  .cortex-landing #beneficios .cl-benefit h3{margin-inline:12px;font-size:19px}
  .cortex-landing #beneficios .cl-benefit p{margin-inline:12px;font-size:13.5px}
  #beneficios .wbx-tags{margin-inline:12px}
}

/* ================= Modo leve (celular): uma camada, sem 3D ================= */
html.wb-lite .wbx-rig{transform:none;transform-style:flat;transition:none}
html.wb-lite .wbx-tile,html.wb-lite .wbx-sat{transform-style:flat}
html.wb-lite .wbx-tile{animation:none}
html.wb-lite .wbx-sat{transform:translate(calc(var(--x) * var(--k)),calc(var(--y) * var(--k)))}
html.wb-lite .wbx-sat>*{animation:none}
html.wb-lite .wbx-slab{display:none}
html.wb-lite .wbx-face{box-shadow:inset 0 1px 0 #ffffffa6,inset 0 0 0 1px color-mix(in srgb,var(--c2) 38%,#0000),inset 0 -16px 28px -10px color-mix(in srgb,var(--c1) 60%,#0000),0 5px 0 color-mix(in srgb,var(--c1) 30%,#08101d),0 22px 30px -10px #000}
html.wb-lite .wbx-glyph{transform:none;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--c1) 80%,#0000))}
html.wb-lite .wbx-halo,html.wb-lite .wbx-shadow{animation:none}
html.wb-lite .wbx-chip{box-shadow:0 10px 18px -8px #000,inset 0 1px 0 #ffffff1c}
html.wb-lite #beneficios .cl-benefit::after{display:none}
@media (prefers-reduced-motion:reduce){
  .wbx-art *,.wbx-art *::before{animation:none!important;transition:none!important}
}

/* ================= Tema claro ================= */
.cortex-landing[data-landing-theme=light] #beneficios .cl-benefits-grid{
  background:radial-gradient(70% 50% at 50% 0%,#3baaff22,#0000 70%),linear-gradient(180deg,#eef7fb,#e3eff5);
  border-color:#b9d4e0;box-shadow:inset 0 1px 0 #fff,0 30px 60px -36px #0a194259}
.cortex-landing[data-landing-theme=light] #beneficios .cl-benefit,
.cortex-landing[data-landing-theme=light] #beneficios .cl-benefit:first-child,
.cortex-landing[data-landing-theme=light] #beneficios .cl-benefit:nth-child(2n){
  background:linear-gradient(180deg,#ffffff,#f3f8fb);border-color:#d3e3ec;box-shadow:inset 0 1px 0 #fff,0 18px 36px -26px #0a19424d}
.cortex-landing[data-landing-theme=light] #beneficios .cl-benefit p{color:#5b6977}
.cortex-landing[data-landing-theme=light] #beneficios .wbx-tags li{color:#1f5f99;background:#3baaff12;border-color:#3baaff33}