/* =========================================================
   Fernando Kuhn — Soluções (VSL híbrida) · css/solucoes.css
   Página de VENDA: hero com glow, grids de cards, faixa de
   logos, investimento em destaque, CTA fixo no mobile.
   Herda tokens/gnav/gfoot/gfaq de guias.css.
   ========================================================= */

.swrap{max-width:1060px;margin:0 auto;padding:0 var(--pad)}
.snarrow{max-width:800px;margin-left:auto;margin-right:auto}

/* rótulo de seção no padrão da landing: [ ASSIM ] */
.slabel{
  display:block;font-family:'Space Mono',monospace;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--g-40);margin-bottom:14px;
}
.slabel::before{content:'[ '}
.slabel::after{content:' ]'}

/* ---------- HERO ---------- */
.shero{
  position:relative;text-align:center;padding:64px 0 30px;
}
.shero::before{ /* glow suave atrás do título */
  content:'';position:absolute;inset:-40px -10% auto;height:420px;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 30%,rgba(244,244,242,.07),transparent 70%);
}
.shero>*{position:relative}
.shero .gcrumb{padding-top:0;margin-bottom:26px}
.skicker{
  display:inline-block;font-family:'Space Mono',monospace;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--g-60);
  border:1px solid var(--line);border-radius:99px;padding:8px 18px;margin-bottom:26px;
}
.shero h1{font-size:clamp(34px,5.6vw,62px);max-width:19ch;margin:0 auto 22px}
.shero .ssub{color:var(--g-60);font-size:clamp(16px,2vw,19px);max-width:56ch;margin:0 auto 34px;line-height:1.6}
.scta{
  display:inline-block;text-decoration:none;background:var(--white);color:var(--black);
  font-weight:700;font-size:17px;padding:18px 40px;border-radius:99px;
  box-shadow:0 0 0 1px rgba(244,244,242,.08),0 18px 50px -12px rgba(244,244,242,.16);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.scta:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(244,244,242,.14),0 24px 60px -12px rgba(244,244,242,.24)}
.strust{margin-top:18px;font-family:'Space Mono',monospace;font-size:12px;color:var(--g-40);letter-spacing:.04em}
.strust b{color:var(--g-60);font-weight:400}

/* vídeo (quando existir) */
.svideo{max-width:860px;margin:38px auto 6px}
.svideo video{width:100%;border-radius:20px;border:1px solid var(--line);display:block;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}

/* ---------- FAIXA DE LOGOS ---------- */
.slogos{
  display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,56px);
  flex-wrap:wrap;padding:34px 0 10px;margin-top:26px;border-top:1px solid var(--line);
}
.slogos img{height:22px;width:auto;opacity:.45;filter:grayscale(1) brightness(1.6);transition:opacity .3s var(--ease)}
.slogos img:hover{opacity:.9}
.slogos .stxt{font-family:'Sora',sans-serif;font-weight:700;font-size:15px;color:var(--g-40);letter-spacing:.06em}
.slogos-cap{width:100%;text-align:center;font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--g-40);margin-bottom:4px}

/* ---------- seções ---------- */
.ssection{padding:64px 0 8px}
.ssection h2{font-size:clamp(24px,3.4vw,36px);margin-bottom:10px;max-width:24ch}
.ssection .sintro{color:var(--g-60);font-size:16px;max-width:58ch;margin-bottom:8px}

/* dores — grid de cards numerados */
.sgrid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
.scard{
  border:1px solid var(--line);border-radius:18px;padding:26px 26px 24px;background:rgba(244,244,242,.02);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.scard:hover{border-color:var(--g-25);background:rgba(244,244,242,.04)}
.scard .n{font-family:'Space Mono',monospace;font-size:13px;color:var(--g-40);display:block;margin-bottom:12px}
.scard p{color:var(--g-90);font-size:15.5px;line-height:1.6;margin:0}

/* entregas — cards com título forte */
.scard strong{display:block;color:var(--white);font-family:'Sora',sans-serif;font-weight:700;font-size:16.5px;letter-spacing:-.01em;margin-bottom:8px}

/* prova — painel citação */
.sproof{
  margin-top:30px;border-left:3px solid var(--white);border-radius:0 18px 18px 0;
  background:var(--g-15);padding:30px clamp(22px,3.5vw,40px);
}
.sproof p{color:var(--g-90);font-size:clamp(16px,2vw,18px);line-height:1.7;margin:0}
.sproof strong{color:var(--white)}
.sproof em{font-style:normal;color:var(--g-60)}

/* investimento — card destaque */
.sprice{
  margin-top:30px;border-radius:22px;padding:2px;
  background:linear-gradient(135deg,rgba(244,244,242,.22),rgba(244,244,242,.04) 45%,rgba(244,244,242,.14));
}
.sprice-in{background:#0a0a0a;border-radius:20px;padding:36px clamp(22px,4vw,46px);text-align:center}
.sprice-in p{color:var(--g-90);font-size:clamp(16px,2vw,18px);line-height:1.75;max-width:62ch;margin:0 auto 26px}
.sprice-in strong{color:var(--white);font-size:1.12em}
.sprice-in .scta{font-size:15px;padding:15px 32px}

/* passos — 3 colunas */
.ssteps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.sstep{border-top:2px solid var(--g-25);padding-top:20px;transition:border-color .3s var(--ease)}
.sstep:hover{border-color:var(--white)}
.sstep .n{font-family:'Space Mono',monospace;font-size:26px;color:var(--g-25);display:block;margin-bottom:14px}
.sstep strong{display:block;color:var(--white);font-family:'Sora',sans-serif;font-size:17px;margin-bottom:8px}
.sstep p{color:var(--g-60);font-size:14.5px;line-height:1.6;margin:0}

/* FAQ herda .gfaq — só alarga */
.sfaqwrap{max-width:800px;margin:0 auto}

/* CTA final — banner */
.sfinal{
  margin:70px 0 50px;text-align:center;border:1px solid var(--line);border-radius:26px;
  padding:60px clamp(22px,5vw,60px);position:relative;overflow:hidden;background:var(--g-15);
}
.sfinal::before{
  content:'';position:absolute;inset:auto -20% -60% -20%;height:300px;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 50% 100%,rgba(244,244,242,.08),transparent 70%);
}
.sfinal>*{position:relative}
.sfinal h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:14px}
.sfinal p{color:var(--g-60);font-size:16px;max-width:52ch;margin:0 auto 30px}

/* guias relacionados (herda .gmore) centrado */
.srelated{max-width:800px;margin:0 auto}

/* ---------- CTA fixo no mobile ---------- */
.smobile-cta{display:none}
@media (max-width:640px){
  .smobile-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(5,5,5,.9);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  }
  .smobile-cta a{
    display:block;text-align:center;background:var(--white);color:var(--black);
    text-decoration:none;font-weight:700;font-size:15px;padding:14px;border-radius:99px;
  }
  body.has-mobile-cta{padding-bottom:76px}
  .sgrid2{grid-template-columns:1fr}
  .ssteps{grid-template-columns:1fr}
  .shero{padding-top:44px}
}
@media (min-width:641px) and (max-width:900px){
  .ssteps{grid-template-columns:1fr 1fr}
}

/* ---------- índice /solucoes/ ---------- */
.sindex-hero{text-align:center;padding:64px 0 20px;position:relative}
.sindex-hero::before{content:'';position:absolute;inset:-40px -10% auto;height:360px;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 30%,rgba(244,244,242,.06),transparent 70%)}
.sindex-hero>*{position:relative}
.sindex-hero h1{font-size:clamp(34px,5.6vw,60px);max-width:18ch;margin:18px auto}
.sindex-hero p{color:var(--g-60);font-size:17px;max-width:56ch;margin:0 auto}
.sindex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:44px 0 60px}
.sindex-card{
  display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);
  border-radius:20px;padding:30px 28px;background:rgba(244,244,242,.02);
  transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.sindex-card:hover{transform:translateY(-4px);border-color:var(--g-25);background:rgba(244,244,242,.045)}
.sindex-card .gkicker{margin-bottom:14px}
.sindex-card h2{font-size:clamp(19px,2.4vw,24px);margin-bottom:12px;line-height:1.15}
.sindex-card p{color:var(--g-60);font-size:14.5px;line-height:1.6;flex:1}
.sindex-card .arrow{margin-top:20px;font-family:'Space Mono',monospace;font-size:13px;color:var(--g-40);transition:color .3s var(--ease)}
.sindex-card:hover .arrow{color:var(--white)}
@media (max-width:700px){.sindex-grid{grid-template-columns:1fr}}

/* ---------- player VSL: play gigante centrado ---------- */
.svideo{position:relative}
.svideo-play{
  position:absolute;inset:0;margin:auto;width:104px;height:104px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(244,244,242,.96);color:#050505;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 22px 70px -12px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.12);
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.svideo-play svg{width:44px;height:44px;margin-left:5px}
.svideo-play:hover{transform:scale(1.07);background:#fff}
.svideo-play .ring{
  position:absolute;inset:-14px;border-radius:50%;border:2px solid rgba(244,244,242,.45);
  animation:vslring 2.2s var(--ease) infinite;
}
@keyframes vslring{
  0%{transform:scale(.82);opacity:0}
  35%{opacity:.9}
  100%{transform:scale(1.22);opacity:0}
}
.svideo-play.off{display:none}
@media (max-width:640px){
  .svideo-play{width:78px;height:78px}
  .svideo-play svg{width:34px;height:34px;margin-left:4px}
}

/* ---------- painel de fim de vídeo ---------- */
.svideo-end{
  position:absolute;inset:0;border-radius:20px;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:rgba(5,5,5,.88);backdrop-filter:blur(8px);
}
.svideo-end[hidden]{display:none}
.svideo-wa{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  background:#25d366;color:#04130b;font-weight:700;font-size:18px;
  padding:17px 36px;border-radius:99px;
  box-shadow:0 18px 60px -14px rgba(37,211,102,.55);
  transition:transform .25s var(--ease);
}
.svideo-wa:hover{transform:translateY(-2px) scale(1.02)}
.svideo-wa svg{width:24px;height:24px}
.svideo-replay{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--g-60);
  font-size:14px;padding:10px 22px;border-radius:99px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.svideo-replay:hover{color:var(--white);border-color:var(--g-25)}
.svideo-replay svg{width:15px;height:15px}
@media (max-width:640px){
  .svideo-wa{font-size:15px;padding:14px 26px}
}

/* ---------- animações de entrada / scroll-reveal ---------- */
.anim{opacity:0;transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s var(--ease);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
.anim[data-anim=up]{transform:translateY(40px)}
.anim[data-anim=down]{transform:translateY(-36px)}
.anim[data-anim=left]{transform:translateX(-56px)}
.anim[data-anim=right]{transform:translateX(56px)}
.anim[data-anim=zoom]{transform:scale(.9)}
.anim[data-anim=blur]{filter:blur(10px);transform:translateY(24px) scale(.98)}
.anim.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.anim{opacity:1;transform:none;filter:none;transition:none}}
/* glow do hero respira sutilmente */
.shero::before{animation:sbreathe 7s ease-in-out infinite}
@keyframes sbreathe{0%,100%{opacity:.85}50%{opacity:1.15}}

/* ── HERO com REEL vertical (mockup de celular) — usado no FK One ───────────── */
.shero-cols{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;text-align:left;margin-top:6px}
.shero-has-phone .shero-txt h1{margin-left:0;max-width:21ch;font-size:clamp(30px,3.7vw,48px)}
.shero-has-phone .shero-txt .ssub{margin-left:0}
.sphone{display:flex;justify-content:center}
.sphone-frame{
  position:relative;width:min(320px,72vw);aspect-ratio:9/16;border-radius:42px;padding:10px;
  background:#0c0c0e;border:1px solid rgba(244,244,242,.14);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.85),0 0 90px -30px rgba(37,211,102,.35);
  animation:sphonefloat 7s ease-in-out infinite;
}
.sphone-frame::before{ /* brilho de acento atrás do aparelho */
  content:'';position:absolute;inset:-14%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(37,211,102,.14),transparent 70%);
}
.sphone-frame video{display:block;width:100%;height:100%;object-fit:cover;border-radius:33px;background:#050505}
.sphone-sound{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;border:1px solid rgba(244,244,242,.22);
  background:rgba(5,5,5,.72);backdrop-filter:blur(8px);color:#f4f4f2;cursor:pointer;
  font:600 12.5px/1 'Inter',sans-serif;letter-spacing:.02em;border-radius:99px;padding:9px 16px;
  transition:border-color .2s,background .2s;
}
.sphone-sound:hover{border-color:rgba(37,211,102,.6);background:rgba(5,15,9,.85)}
.sphone-sound svg{width:15px;height:15px;color:#25d366}
@keyframes sphonefloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.sphone-frame{animation:none}}
@media (max-width:900px){
  .shero-cols{grid-template-columns:1fr;gap:40px;text-align:center}
  .shero-has-phone .shero-txt h1{margin-left:auto}
  .shero-has-phone .shero-txt .ssub{margin-left:auto}
  .sphone-frame{width:min(270px,74vw)}
}