/* =====================================================================
   400VOLTZ • SOLUÇÕES EM ALTA POTÊNCIA (flip cards 3D)  — js/services.js
   Paleta do brand kit: grafite #141414 · roxo #6C3BFF · verde ácido #C7FF32
   magenta #FF3D9A (pontual) · off-white #F4F3F0
   ===================================================================== */
.svc{--svc-g:#141414;--svc-card:#1B1822;--svc-v:#6C3BFF;--svc-v2:#9C75FF;--svc-a:#C7FF32;--svc-m:#FF3D9A;--svc-w:#F4F3F0;--svc-line:rgba(244,243,240,.12);--svc-flip:.76s;margin-top:96px}

.svc.svc-nohead{margin-top:20px}
/* ---------- cabeçalho ---------- */
.svc-head{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin-bottom:56px}
.svc-title{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(40px,4.6vw,72px);line-height:1;letter-spacing:-.05em;text-transform:uppercase;color:var(--svc-w)}
.svc-title .acid{color:var(--svc-a);display:block}
.svc-sub{margin:0 0 18px;color:#C9C3D3;font-size:clamp(16px,1.35vw,19px);line-height:1.6;max-width:520px}
.svc-hint{margin:0;display:inline-flex;align-items:center;gap:12px;color:#9E97A9;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.svc-hint-ic{width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(199,255,50,.45);color:var(--svc-a);flex-shrink:0}
.svc-hint-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- grid: 4 em cima, 3 centralizados embaixo, em zigue-zague ---------- */
.svc-grid{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:22px;row-gap:60px;padding-bottom:28px}
.svc-card{grid-column:span 2;--oy:0px}
.svc-card:nth-child(5){grid-column:2 / span 2}
.svc-card:nth-child(2),.svc-card:nth-child(4),.svc-card:nth-child(5),.svc-card:nth-child(7){--oy:28px}
.svc-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}
.svc-link-track{fill:none;stroke:rgba(199,255,50,.28);stroke-width:1}
.svc-link-pulse{fill:none;stroke:var(--svc-a);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(199,255,50,.8))}
.svc-link-dot{fill:var(--svc-a);transform-box:fill-box;transform-origin:center}

/* ---------- card (objeto que vira) ---------- */
.svc-card{position:relative;display:grid;perspective:1600px;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transform:translateY(var(--oy));transition:transform var(--svc-flip) cubic-bezier(.22,.9,.24,1),filter .3s}
.svc-card.is-flipped{transform:translateY(calc(var(--oy) - 8px));z-index:2}
.svc-card:focus-visible{outline:2px solid var(--svc-a);outline-offset:5px}
.svc-inner{display:grid;height:100%;transform-style:preserve-3d;transition:transform var(--svc-flip) cubic-bezier(.22,.9,.24,1)}
.svc-card.is-flipped .svc-inner{transform:rotateY(180deg)}
.svc-face{grid-area:1/1;position:relative;display:flex;flex-direction:column;min-height:400px;padding:24px 24px 26px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);transition:box-shadow .4s}
/* sombra de objeto: cresce enquanto o card está virado */
.svc-card.is-flipped .svc-face{box-shadow:0 26px 50px -24px rgba(0,0,0,.7)}

/* frente: grafite com luz roxa atrás do ícone e grade de circuito */
.svc-front{background:radial-gradient(circle at 50% 36%,rgba(108,59,255,.24),transparent 52%),linear-gradient(160deg,#1F1B28 0%,var(--svc-card) 55%,#16141B 100%);border:1px solid var(--svc-line)}
.svc-front:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(244,243,240,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(244,243,240,.035) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(circle at 50% 38%,#000 0,transparent 70%)}
.svc-front:after{content:"";position:absolute;right:0;top:0;width:34px;height:34px;background:linear-gradient(225deg,var(--svc-a) 0 50%,transparent 50%);opacity:.9;clip-path:polygon(100% 0,100% 100%,0 0)}
.svc-trace{position:absolute;left:0;top:50px;width:120px;height:60px;fill:none;stroke:rgba(156,117,255,.35);stroke-width:1}
.svc-trace circle{fill:var(--svc-v2);stroke:none}
.svc-card:nth-child(even) .svc-trace{left:auto;right:0;transform:scaleX(-1)}
.svc-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px}
.svc-num{font:700 12px var(--display);letter-spacing:.16em;color:var(--svc-a)}
.svc-tag{font-size:10px;letter-spacing:.18em;font-weight:700;color:#8B8496;padding-right:30px}
.svc-icon{position:relative;z-index:1;width:150px;height:150px;margin:auto;padding:18px 0;box-sizing:content-box;color:var(--svc-v2)} /* fica no meio do espaço livre do card */
.svc-svg{width:100%;height:100%;display:block;overflow:visible}
.svc-svg g,.svc-svg ellipse{fill:none;stroke-linecap:round;stroke-linejoin:round}
.svc-svg .i-fill{fill:rgba(108,59,255,.16);stroke:none}
.svc-svg .i-depth{stroke:rgba(108,59,255,.55);stroke-width:1.4}
.svc-svg .i-base{stroke:var(--svc-v2);stroke-width:1.9}
.svc-svg .i-acc{stroke:var(--svc-a);stroke-width:2;filter:drop-shadow(0 0 2.5px rgba(199,255,50,.45))}
.svc-svg .i-nodes circle{fill:var(--svc-a);stroke:#141414;stroke-width:1}
.svc-svg .i-holo{stroke:rgba(156,117,255,.45);stroke-width:1.2;fill:rgba(108,59,255,.12)}
.svc-name{position:relative;z-index:1;margin:0;font-family:var(--display);font-weight:700;font-size:clamp(21px,1.75vw,27px);line-height:1.02;letter-spacing:-.04em;text-transform:uppercase;color:var(--svc-w)}
.svc-name .amp,.svc-back-name .amp{color:var(--svc-a)}
.svc-explore{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:11px;font-weight:700;letter-spacing:.16em;color:#A49DAF}
.svc-explore b{color:var(--svc-a);font-size:14px}
.svc-explore svg{width:14px;height:14px;fill:none;stroke:var(--svc-a);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s}
.svc-card:hover .svc-explore svg{transform:rotate(-180deg)}

/* pulso de energia no ícone antes do giro */
.svc-card.is-charging .svc-svg{animation:svc-charge .62s cubic-bezier(.3,.7,.3,1)}
.svc-card.is-charging .svc-svg .i-acc>*{stroke-dasharray:180;animation:svc-trace .55s ease-out}
.svc-card.is-charging .svc-svg .i-nodes circle{animation:svc-node .55s ease-out}
@keyframes svc-charge{0%{transform:scale(1);filter:none}35%{transform:scale(1.07);filter:drop-shadow(0 0 10px rgba(199,255,50,.55)) brightness(1.35)}100%{transform:scale(1);filter:none}}
@keyframes svc-trace{from{stroke-dashoffset:180}to{stroke-dashoffset:0}}
@keyframes svc-node{0%,100%{fill:var(--svc-a)}40%{fill:#fff}}

/* verso: roxo oficial, textos claros, detalhes verde-ácido */
.svc-back{transform:rotateY(180deg);background:linear-gradient(155deg,#7A4DFF 0%,var(--svc-v) 46%,#5A2EE6 100%);color:var(--svc-w);border:1px solid rgba(255,255,255,.18)}
.svc-back:before{content:"";position:absolute;right:-40px;bottom:-60px;width:180px;height:180px;border:1px solid rgba(255,255,255,.14);transform:rotate(32deg);pointer-events:none}
.svc-back:after{content:"";position:absolute;right:0;top:0;width:34px;height:34px;background:linear-gradient(225deg,var(--svc-a) 0 50%,transparent 50%);clip-path:polygon(100% 0,100% 100%,0 0)}
.svc-back .svc-tag{color:rgba(244,243,240,.7)}
.svc-back-name{margin:18px 0 8px;font-family:var(--display);font-weight:700;font-size:clamp(19px,1.45vw,23px);line-height:1.05;letter-spacing:-.035em;text-transform:uppercase}
.svc-phrase{margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.22);font-size:14.5px;line-height:1.45;font-weight:600;color:#fff}
.svc-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.svc-list li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.35;color:#F4F3F0}
.svc-list li:before{content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;background:var(--svc-a);transform:rotate(45deg);box-shadow:0 0 6px rgba(199,255,50,.7)}
/* o texto do verso entra depois do giro, em cascata */
.svc-back .svc-back-name,.svc-back .svc-phrase,.svc-list li{opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.svc-card.is-flipped .svc-back .svc-back-name,.svc-card.is-flipped .svc-back .svc-phrase,.svc-card.is-flipped .svc-list li{opacity:1;transform:none;transition:opacity .4s ease-out,transform .4s ease-out;transition-delay:.3s}
.svc-card.is-flipped .svc-back .svc-phrase{transition-delay:.36s}
.svc-card.is-flipped .svc-list li{transition-delay:calc(.4s + var(--k) * 35ms)}

/* ---------- chamada comercial ---------- */
.svc-cta{position:relative;margin-top:84px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:56px 56px 56px 60px;background:radial-gradient(ellipse at 100% 0,rgba(108,59,255,.35),transparent 55%),#1B1822;border:1px solid var(--svc-line);clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,40px 100%,0 calc(100% - 40px));overflow:hidden}
.svc-cta:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(var(--svc-a),var(--svc-v))}
.svc-cta:after{content:"";position:absolute;right:12%;top:-30%;width:2px;height:170%;background:linear-gradient(transparent,rgba(199,255,50,.5),transparent);transform:rotate(32deg)}
.svc-cta h3{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(32px,3.6vw,56px);line-height:1.02;letter-spacing:-.045em;text-transform:uppercase;color:var(--svc-w)}
.svc-cta h3 .acid{color:var(--svc-a)}
.svc-cta-copy{position:relative;z-index:1}
.svc-cta-copy p{margin:0 0 26px;color:#C9C3D3;font-size:16px;line-height:1.65}
.svc-cta-btn .arrow{font-size:18px}

/* ---------- tablet: duas colunas ---------- */
@media(max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .svc-card,.svc-card:nth-child(5){grid-column:auto;--oy:0px!important}
  .svc-card:nth-child(7){grid-column:1 / -1;justify-self:center;width:calc(50% - 11px)}
  .svc-head{grid-template-columns:1fr;gap:20px}
  .svc-cta{grid-template-columns:1fr;gap:24px;padding:44px 36px}
}
/* ---------- celular: uma coluna ---------- */
@media(max-width:700px){
  .svc{margin-top:64px}
  .svc-grid{grid-template-columns:1fr;row-gap:16px}
  .svc-card:nth-child(7){width:auto;justify-self:stretch}
  .svc-face{min-height:0;padding:22px 20px 22px}
  .svc-icon{width:118px;height:118px;padding:14px 0}
  .svc-name{font-size:24px}
  .svc-cta{padding:36px 24px 36px 28px;margin-top:56px}
  .svc-hint{font-size:11px}
}

/* ---------- movimento reduzido: sem giro, troca por fade ---------- */
@media(prefers-reduced-motion:reduce){
  .svc-card,.svc-card.is-flipped{transform:none}
  .svc-inner,.svc-card.is-flipped .svc-inner{transform:none;transition:none}
  .svc-back{transform:none;opacity:0;transition:opacity .2s}
  .svc-card.is-flipped .svc-back{opacity:1}
  .svc-card.is-flipped .svc-front{opacity:0}
  .svc-back .svc-back-name,.svc-back .svc-phrase,.svc-list li{opacity:1;transform:none;transition:none}
  .svc-card.is-charging .svc-svg,.svc-card.is-charging .svc-svg *{animation:none}
}