/* Get Fluency 2.37.0 — cores de fundo e movimento suave.
   Ativado pelas classes do <body>: gf37-colors (fundos) e gf37-motion (movimento).
   Os fundos são levemente translúcidos para manter visível o padrão fonético do tema. */

/* =====================================================================
   FUNDOS COLORIDOS
   ===================================================================== */
body.gf37-colors .gf37-how,
body.gf37-colors #metodo,
body.gf37-colors #sobre,
body.gf37-colors #depoimentos,
body.gf37-colors .gf37-faq,
body.gf37-colors .gf37-included{position:relative;overflow:hidden;isolation:isolate}

/* Como funciona — azul muito claro com brilho vermelho suave */
body.gf37-colors .gf37-how{
  background:
    radial-gradient(circle at 92% 8%,rgba(255,40,69,.10),transparent 30%),
    radial-gradient(circle at 4% 96%,rgba(10,88,255,.10),transparent 34%),
    linear-gradient(180deg,rgba(240,245,255,.94) 0%,rgba(255,255,255,.90) 100%);
}

/* Método — lilás-azulado */
body.gf37-colors #metodo{
  background:
    radial-gradient(circle at 0% 30%,rgba(18,53,166,.10),transparent 36%),
    linear-gradient(135deg,rgba(244,242,255,.95) 0%,rgba(236,243,255,.93) 60%,rgba(255,255,255,.92) 100%);
}

/* O que está incluído — faixa azul-marinho de contraste */
body.gf37-colors .gf37-included{
  background:
    radial-gradient(circle at 85% 0%,rgba(10,88,255,.45),transparent 42%),
    radial-gradient(circle at 10% 100%,rgba(255,40,69,.22),transparent 38%),
    linear-gradient(135deg,#071b57 0%,#0d2a86 55%,#1235a6 100%);
  color:#fff;
}
body.gf37-colors .gf37-included::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;
  background-image:linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 75%);mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 75%);
}
body.gf37-colors .gf37-included .eyebrow{color:#9cc0ff}
body.gf37-colors .gf37-included .section-heading h2{color:#fff}
body.gf37-colors .gf37-included .section-heading p{color:#c9d6ff}
body.gf37-colors .gf37-included .gf37-inc-card{border-color:rgba(255,255,255,.14);box-shadow:0 18px 40px rgba(2,10,40,.28)}
body.gf37-colors .gf37-included .gf37-inc-card,body.gf37-colors .gf37-included .gf37-inc-card h3{color:var(--text)}

/* Sobre — rosado bem claro */
body.gf37-colors #sobre{
  background:
    radial-gradient(circle at 100% 20%,rgba(255,40,69,.09),transparent 34%),
    linear-gradient(180deg,rgba(255,246,248,.95) 0%,rgba(255,255,255,.92) 100%);
}

/* Depoimentos — azul claro com aspas decorativas */
body.gf37-colors #depoimentos{
  background:
    radial-gradient(circle at 15% 0%,rgba(10,88,255,.10),transparent 36%),
    linear-gradient(180deg,rgba(234,242,255,.96) 0%,rgba(245,249,255,.94) 100%);
}
body.gf37-colors #depoimentos::before{
  content:"“";position:absolute;z-index:-1;top:-30px;left:4%;
  font-family:Georgia,serif;font-size:300px;line-height:1;color:rgba(18,53,166,.07);pointer-events:none;
}

/* Perguntas (na página Curso ou na home) — branco com brilho */
body.gf37-colors .gf37-faq{
  background:
    radial-gradient(circle at 50% 0%,rgba(10,88,255,.07),transparent 45%),
    linear-gradient(180deg,rgba(255,255,255,.94),rgba(246,249,255,.94));
}

/* Chamada final: brilho que se move devagar */
body.gf37-colors .cta-box{position:relative;overflow:hidden;isolation:isolate}
body.gf37-colors .cta-box::after{
  content:"";position:absolute;z-index:-1;width:420px;height:420px;right:-120px;top:-180px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,40,69,.35),transparent 65%);pointer-events:none;
}
body.gf37-motion .cta-box::after{animation:gf37-drift 14s ease-in-out infinite alternate}

/* =====================================================================
   MOVIMENTO
   ===================================================================== */

/* Surgir ao rolar (só quando o JavaScript está ativo) */
html.gf37-js body.gf37-motion .gf37-reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.65,.25,1) var(--gf37-delay,0s),transform .7s cubic-bezier(.2,.65,.25,1) var(--gf37-delay,0s);
  will-change:opacity,transform;
}
html.gf37-js body.gf37-motion .gf37-reveal.is-in{opacity:1;transform:none}
html.gf37-js body.gf37-motion .about-media.gf37-reveal{transform:translateX(-30px)}
html.gf37-js body.gf37-motion .about-copy.gf37-reveal{transform:translateX(30px)}
html.gf37-js body.gf37-motion .about-media.gf37-reveal.is-in,
html.gf37-js body.gf37-motion .about-copy.gf37-reveal.is-in{transform:none}

/* Elevação ao passar o mouse */
body.gf37-motion :is(.benefit-card,.method-card,.gf37-step,.gf37-inc-card,.stats > div,.gf-course-level-card,.gf-course-topic-card){transition:transform .35s cubic-bezier(.2,.65,.25,1),box-shadow .35s ease,border-color .35s ease}
/* Depois que a caixa terminou de surgir, volta à transição curta do hover */
html.gf37-js body.gf37-motion .gf37-reveal.is-in.is-done{transition:transform .35s cubic-bezier(.2,.65,.25,1),box-shadow .35s ease,border-color .35s ease,opacity .35s ease}
@media (hover:hover){
  html body.gf37-motion :is(.benefit-card,.method-card,.gf37-step,.stats > div,.gf-course-level-card,.gf-course-topic-card):hover,
  html.gf37-js body.gf37-motion :is(.benefit-card,.method-card,.gf37-step,.stats > div,.gf-course-level-card,.gf-course-topic-card).gf37-reveal.is-in:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(16,46,110,.14);border-color:#cfdaf3}
  html body.gf37-motion .gf37-inc-card:hover,
  html.gf37-js body.gf37-motion .gf37-inc-card.gf37-reveal.is-in:hover{transform:translateY(-6px)}
}

/* Ícones flutuando devagar */
body.gf37-motion .benefit-card .icon,
body.gf37-motion .method-card .mini-icon,
body.gf37-motion .gf37-inc-icon{animation:gf37-float 6s ease-in-out infinite}
body.gf37-motion .benefit-card:nth-child(2) .icon,
body.gf37-motion .method-card:nth-child(2) .mini-icon,
body.gf37-motion .gf37-inc-card:nth-child(2) .gf37-inc-icon{animation-delay:-1.5s}
body.gf37-motion .benefit-card:nth-child(3) .icon,
body.gf37-motion .method-card:nth-child(3) .mini-icon,
body.gf37-motion .gf37-inc-card:nth-child(3) .gf37-inc-icon{animation-delay:-3s}
body.gf37-motion .benefit-card:nth-child(4) .icon,
body.gf37-motion .method-card:nth-child(4) .mini-icon,
body.gf37-motion .gf37-inc-card:nth-child(4) .gf37-inc-icon{animation-delay:-4.5s}
body.gf37-motion .gf37-inc-card:nth-child(5) .gf37-inc-icon{animation-delay:-2.2s}
body.gf37-motion .gf37-inc-card:nth-child(6) .gf37-inc-icon{animation-delay:-3.7s}

/* Número do passo 1 pulsando de leve, chamando para a aula experimental */
body.gf37-motion .gf37-step:first-child .gf37-step-num{animation:gf37-pulse 2.6s ease-out infinite}

/* Linha tracejada dos passos "andando" */
body.gf37-motion .gf37-steps::before{
  border-top:0;height:2px;
  background:repeating-linear-gradient(90deg,#c3d1f0 0 8px,transparent 8px 16px);background-size:32px 2px;
  animation:gf37-dash 1.6s linear infinite;
}

@keyframes gf37-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes gf37-pulse{0%{box-shadow:0 0 0 8px #fff,0 0 0 8px rgba(255,40,69,.35)}70%{box-shadow:0 0 0 8px #fff,0 0 0 20px rgba(255,40,69,0)}100%{box-shadow:0 0 0 8px #fff,0 0 0 8px rgba(255,40,69,0)}}
@keyframes gf37-dash{to{background-position:32px 0}}
@keyframes gf37-drift{0%{transform:translate(0,0)}100%{transform:translate(-140px,90px)}}

@media (max-width:760px){
  body.gf37-motion .gf37-steps::before{width:2px;height:auto;background:repeating-linear-gradient(180deg,#c3d1f0 0 8px,transparent 8px 16px);background-size:2px 32px;animation:gf37-dash-v 1.6s linear infinite}
  body.gf37-colors #depoimentos::before{font-size:180px;top:-10px}
}
@keyframes gf37-dash-v{to{background-position:0 32px}}

/* Quem pede menos movimento no sistema vê tudo parado */
@media (prefers-reduced-motion:reduce){
  html.gf37-js body.gf37-motion .gf37-reveal{opacity:1!important;transform:none!important;transition:none!important}
  body.gf37-motion .benefit-card .icon,
  body.gf37-motion .method-card .mini-icon,
  body.gf37-motion .gf37-inc-icon,
  body.gf37-motion .gf37-step-num,
  body.gf37-motion .gf37-steps::before,
  body.gf37-motion .cta-box::after{animation:none!important}
}

/* Evita rolagem lateral durante a entrada lateral da seção Sobre */
body.gf37-motion #sobre{overflow-x:clip}