/* ============================================================
   Agência FG — Hero (headline central + shader) + Prova social
   Sem dependências. Anima só transform/opacity (compositor).
   ============================================================ */

/* Home: hero cola no topo, atrás do header fixo transparente do tema
   (anula o padding-top:120px/80px que o style-geral põe no #content) */
body.home.header-transparente #content{padding-top:0}

/* ---------- PALCO (hero + prova social sobre UM shader contínuo) ---------- */
.fg-stage{position:relative;overflow:hidden;background:linear-gradient(160deg,#4d151f 0%,#2b0d14 52%,#1c080d 100%)}
.fg-stage__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- HERO ---------- */
.fg-hero{
  position:relative;
  min-height:clamp(640px,92vh,800px);
  overflow:hidden;
  background:transparent; /* a luz vem do canvas do .fg-stage */
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  color:#fff;
  display:flex;flex-direction:column;
}
.fg-hero__scrim{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 45%,rgba(28,8,13,.35),rgba(28,8,13,0) 75%);pointer-events:none}

.fg-hero__slides{position:relative;flex:1;z-index:2}
.fg-hero__slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:96px 24px 140px;
  opacity:0;visibility:hidden;transform:scale(1.015);
  transition:opacity .65s cubic-bezier(.2,.8,.2,1),transform .65s cubic-bezier(.2,.8,.2,1),visibility 0s .65s;
  pointer-events:none;
}
.fg-hero__slide.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s;pointer-events:auto}

.fg-hero__kicker{display:flex;align-items:center;gap:14px;font:600 11px/1.4 'IBM Plex Sans',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.fg-hero__kicker::before,.fg-hero__kicker::after{content:"";width:34px;height:2px;background:#e8112d}
.fg-hero__slide--promo .fg-hero__kicker::before,.fg-hero__slide--promo .fg-hero__kicker::after{background:#fa3b5f}

.fg-hero__title{margin:28px 0 0;font-weight:700;font-size:clamp(34px,4.5vw,64px);line-height:1.04;letter-spacing:-.03em;max-width:20ch}
.fg-hero__title .hl{color:#fa3b5f}
/* spans gerados pelo JS (split por caractere) */
.fg-hero__title .w{display:inline-block;white-space:nowrap}
.fg-hero__title .c{display:inline-block;animation:fgChar .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}

.fg-hero__sub{margin:22px 0 0;max-width:600px;font:400 clamp(15px,1.3vw,18px)/1.55 'IBM Plex Sans',sans-serif;color:rgba(255,255,255,.72)}

.fg-hero__cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:36px;
  padding:18px 36px;border-radius:999px;background:#e8112d;color:#fff;
  font:600 clamp(15px,1.2vw,17px)/1 'IBM Plex Sans',sans-serif;text-decoration:none;
  transition:background .16s ease,transform .16s ease;
}
.fg-hero__cta:hover{background:#c60e26;transform:translateY(-1px);color:#fff}
.fg-hero__cta--pink{background:#fa3b5f}
.fg-hero__cta--pink:hover{background:#e02a4e}

/* logo interno removido — o header transparente do tema já sobrepõe o logo/menu no hero */

.fg-hero__plataformas{
  position:absolute;left:50%;transform:translateX(-50%);bottom:44px;z-index:3;
  display:inline-flex;align-items:center;gap:16px;padding:13px 26px;
  background:rgba(20,5,9,.5);border:1px solid rgba(255,255,255,.10);border-radius:999px;white-space:nowrap;
}
.fg-hero__plataformas .lbl{font:600 10px/1 'IBM Plex Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.fg-hero__plataformas .sep{width:1px;height:14px;background:rgba(255,255,255,.14)}
.fg-hero__plataformas .p{font:600 13px/1 'IBM Plex Sans',sans-serif;color:rgba(255,255,255,.8)}
.fg-hero__plataformas .dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.25)}

.fg-hero__nav{position:absolute;right:clamp(24px,6.6vw,96px);bottom:52px;z-index:3;display:flex;align-items:center;gap:24px}
.fg-hero__dots{display:flex;gap:8px}
.fg-hero__dot{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.3);cursor:pointer;transition:all .3s cubic-bezier(.2,.8,.2,1)}
.fg-hero__dot.is-active{width:26px;background:#fa3b5f}
.fg-hero__arrows{display:flex;gap:10px}
.fg-hero__arrow{width:44px;height:44px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.85);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .16s,color .16s;padding:0}
.fg-hero__arrow:hover{border-color:#fa3b5f;color:#fa3b5f}

@media (max-width:768px){
  .fg-hero__slide{padding:96px 20px 170px}
  .fg-hero__kicker::before,.fg-hero__kicker::after{display:none}
  .fg-hero__kicker{font-size:10px;letter-spacing:.18em}
  .fg-hero__plataformas{left:16px;right:16px;transform:none;justify-content:center;gap:12px;padding:11px 8px;bottom:74px}
  .fg-hero__plataformas .lbl,.fg-hero__plataformas .sep{display:none}
  .fg-hero__plataformas .p{font-size:11.5px}
  .fg-hero__nav{left:0;right:0;bottom:34px;justify-content:center}
  .fg-hero__arrows{display:none}
}

@keyframes fgChar{
  from{opacity:0;transform:translateY(.4em);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* ---------- PROVA SOCIAL (parceiros & certificações) ---------- */
/* camada única translúcida sobre o shader contínuo do .fg-stage:
   escurece p/ legibilidade e deixa a luz do hero seguir por baixo */
.fg-prova{position:relative;background:rgba(20,5,9,.55);padding:clamp(44px,6vw,80px) 20px;font-family:'IBM Plex Sans',system-ui,sans-serif}
/* largura alinhada ao .container do tema (1265px) — o fundo segue full-width */
.fg-prova__inner{position:relative;z-index:1;display:flex;gap:80px;align-items:center;max-width:1265px;margin:0 auto}
.fg-prova__txt{flex:1.1}
.fg-prova__eyebrow{display:flex;align-items:center;gap:14px;font:600 11px/1 'IBM Plex Sans',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.fg-prova__eyebrow::before{content:"";width:34px;height:2px;background:#e8112d}
.fg-prova__title{margin:26px 0 0;font:700 clamp(28px,3vw,44px)/1.06 'IBM Plex Sans',sans-serif;letter-spacing:-.025em;color:#fff}
.fg-prova__title .hl{color:#fa3b5f}
.fg-prova__body{margin:20px 0 0;font:400 17px/1.6 'IBM Plex Sans',sans-serif;color:rgba(255,255,255,.72);max-width:480px}
.fg-prova__nums{display:flex;gap:48px;margin-top:44px}
.fg-prova__nums .div{width:1px;background:rgba(255,255,255,.12)}
.fg-prova__num{font:700 clamp(32px,3.3vw,48px)/1 'IBM Plex Sans',sans-serif;letter-spacing:-.03em;color:#fff}
.fg-prova__numlbl{margin-top:8px;font:400 13px/1.4 'IBM Plex Sans',sans-serif;color:rgba(255,255,255,.55)}
/* selos soltos no fundo escuro (cada arte já é um badge): 4 parceiros em 2x2 */
.fg-prova__selos{flex:1;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:130px;gap:28px;align-items:center;justify-items:center}
.fg-prova__selo{display:flex;align-items:center;justify-content:center;padding:0;background:transparent;border:none;border-radius:0}
.fg-prova__selo img{width:auto;height:auto;max-height:96px;max-width:100%;display:block}
.fg-prova__selo--2c{grid-column:auto}

@media (max-width:900px){
  .fg-prova__inner{flex-direction:column;align-items:stretch;gap:36px}
  .fg-prova__nums{gap:24px;margin-top:28px}
  .fg-prova__selos{grid-template-columns:1fr 1fr;grid-auto-rows:104px;gap:16px}
  .fg-prova__selo img{max-height:72px}
}

/* ---------- Shader em outras seções da home (.fg-shader-canvas) ---------- */
/* session-02 (Nossas soluções): troca a foto estática pelo shader do hero;
   o gradiente é o fallback quando não há WebGL */
body.home .session-02{position:relative;overflow:hidden;background-image:none;background:linear-gradient(160deg,#4d151f 0%,#2b0d14 52%,#1c080d 100%)}
body.home .session-02 .fg-shader-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
body.home .session-02 .container{position:relative;z-index:1}

/* ---------- Setas do slider de depoimentos (Vozes que impulsionam) ----------
   Os SVGs vêm do geral.js com traço #6A0B11, que some na faixa vermelha;
   aqui viram brancas e sem caixa de fundo, no estilo das setas do hero */
body.home .depoimentos .slider .slick-arrow{background:transparent!important;border:none;padding:0;box-shadow:none}
body.home .depoimentos .slider .slick-arrow svg circle{stroke:rgba(255,255,255,.75)}
body.home .depoimentos .slider .slick-arrow svg path{stroke:#fff}
body.home .depoimentos .slider .slick-arrow:hover svg circle{stroke:#fff}

/* ---------- Acessibilidade / reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .fg-hero *,.fg-hero{animation:none !important;transition:none !important}
  .fg-hero__title .c{opacity:1;transform:none;filter:none}
}