/* =========================================================
   borges-motion.css — animações de rolagem + microinterações + simulador
   Site: nutrigustavoborges.com.br
   Carregar DEPOIS do styles.css. Só transform/opacity (exceções: o anel girando
   do plano em destaque e o pulso de sombra do botão do WhatsApp).
   Classes do simulador começam com .sim-; as de movimento com .bm-.
   ========================================================= */

html{scroll-behavior:smooth}

/* ---------- 1. Barra de progresso de leitura ---------- */
#bm-progresso{position:fixed;top:0;left:0;height:2px;width:100%;z-index:9999;
  background:var(--off,#f2f0ef);transform-origin:0 50%;transform:scaleX(0);pointer-events:none;mix-blend-mode:difference}

/* ---------- 2. Navbar: depois de 50px ganha fundo com blur e sombra ---------- */
.topo{transition:box-shadow .35s ease,background-color .35s ease}
.topo.bm-rolou{background:rgba(13,13,13,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.28)}

/* ---------- 3. Logo (PNG): fade + scale; tagline: fade + espaçamento de letras ---------- */
@keyframes bm-logo{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes bm-tag{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes bm-tag-ls{from{opacity:0;transform:translateY(6px);letter-spacing:.3em}to{opacity:1;transform:none}}
.bm-js .marca img{animation:bm-logo .9s cubic-bezier(.34,1.2,.64,1) .1s both}
.bm-js .marca span{animation:bm-tag .8s ease .5s both}
@media (min-width:1000px){
  .bm-js .marca span{animation-name:bm-tag-ls;animation-duration:1.2s}
}

/* ---------- 4. Hero: entra da direita, em cascata (.hero-animated é posta pelo JS) ---------- */
.bm-js .hero-grid .olho,
.bm-js .hero-grid h1,
.bm-js .hero-grid .lead,
.bm-js .hero-grid .acoes,
.bm-js .hero-grid .bm-prova,
.bm-js .hero-grid .nota{opacity:0;transform:translateX(32px)}
.bm-js .hero-grid .retrato{opacity:0;transform:translateY(40px) scale(.96)}

.bm-js .hero-grid.hero-animated .olho,
.bm-js .hero-grid.hero-animated h1,
.bm-js .hero-grid.hero-animated .lead,
.bm-js .hero-grid.hero-animated .acoes,
.bm-js .hero-grid.hero-animated .bm-prova,
.bm-js .hero-grid.hero-animated .nota,
.bm-js .hero-grid.hero-animated .retrato{opacity:1;transform:none;
  transition:opacity .8s ease,transform .9s cubic-bezier(.34,1.2,.64,1)}
.bm-js .hero-grid.hero-animated .olho{transition-delay:.1s}
.bm-js .hero-grid.hero-animated h1{transition-delay:.25s}
.bm-js .hero-grid.hero-animated .lead{transition-delay:.4s}
.bm-js .hero-grid.hero-animated .acoes{transition-delay:.55s}
.bm-js .hero-grid.hero-animated .bm-prova{transition-delay:.7s}
.bm-js .hero-grid.hero-animated .nota{transition-delay:.8s}
.bm-js .hero-grid.hero-animated .retrato{transition-delay:.25s;transition-duration:1s,1.3s}
/* mantém a inclinação do .retrato (styles.css) depois da entrada */
@media (min-width:860px){
  .bm-js .hero-grid.hero-animated .retrato{transform:rotate(1.5deg)}
}

/* ---------- 5. Reveal: o conteúdo SOBE enquanto você desce ---------- */
.bm-reveal{opacity:0;transform:translateY(20px);
  transition:opacity .8s ease,transform 1s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--bm-delay,0s)}
.bm-reveal.bm-visivel{opacity:1;transform:none}

/* Blocos grandes acompanham a rolagem (escala + subida contínua) */
.bm-acompanha{will-change:transform;transform-origin:50% 0}

/* ---------- 6. Prova social no topo (injetada pelo JS) ---------- */
.bm-prova{display:flex;align-items:center;gap:12px;margin:18px 0 4px;text-decoration:none;color:inherit;width:max-content;max-width:100%}
.bm-avatares{display:flex}
.bm-avatares span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font:600 .78rem/1 var(--texto,system-ui);background:var(--chumbo,#2b2b2b);color:var(--off,#f2f0ef);
  border:2px solid var(--preto,#0d0d0d);margin-left:-8px}
.bm-avatares span:first-child{margin-left:0}
.bm-prova-txt{font-size:.85rem;line-height:1.25;opacity:.9}
.bm-prova-txt b{display:block;letter-spacing:.12em;font-size:.8rem;color:#e7c873}
.bm-prova:hover .bm-prova-txt{opacity:1;text-decoration:underline;text-underline-offset:3px}

/* ---------- 7. História logo depois do hero, antes da análise ---------- */
.hero{padding-bottom:80px}
.bm-historia-sec{padding-top:32px}
.bm-historia-sec .historia{margin-top:0;padding:24px 20px;gap:18px}
.bm-historia-sec .historia-txt{max-width:none}
.historia-txt p.bm-historia-frase{font-family:var(--texto);font-weight:400;font-size:clamp(1.1rem,3.6vw,1.5rem);line-height:1.5;letter-spacing:0;color:#dcdcdc;max-width:760px}
@media (min-width:860px){.bm-historia-sec .historia{padding:32px 44px;gap:22px}}
.analise{margin-top:0;padding-bottom:40px}
@media (min-width:860px){
  .hero{padding-bottom:104px}
  .bm-historia-sec{padding-top:40px}
}
/* Antes / Hoje: "Antes" entra pela esquerda, "Hoje" pela direita */
.historia-fotos .par.bm-reveal > div{transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .9s ease;transition-delay:calc(var(--bm-delay,0s) + .1s)}
.historia-fotos .par.bm-reveal > div:first-child{transform:translateX(-24px) rotate(-1.5deg);opacity:.4}
.historia-fotos .par.bm-reveal > div:last-child{transform:translateX(24px) rotate(1.5deg);opacity:.4;transition-delay:calc(var(--bm-delay,0s) + .3s)}
.historia-fotos .par.bm-reveal.bm-visivel > div{transform:none;opacity:1}

/* ---------- 8. Seção Sobre: linha que cresce + moldura flutuante ---------- */
.sobre-txt .frase{border-left-color:transparent;position:relative}
.sobre-txt .frase::before{content:"";position:absolute;left:-3px;top:0;bottom:0;width:3px;background:var(--chumbo,#2b2b2b);
  transform:scaleY(0);transform-origin:top;transition:transform 1s cubic-bezier(.22,1,.36,1) .3s}
.sobre-txt.bm-visivel .frase::before,.sobre-txt:not(.bm-reveal) .frase::before{transform:scaleY(1)}
@keyframes bm-flutua{0%,100%{transform:translate(-14px,14px)}25%{transform:translate(-14px,8px)}75%{transform:translate(-14px,20px)}}
.bm-js .sobre-foto::before{animation:bm-flutua 4s ease-in-out infinite}

/* ---------- 9. Hover nos cards ---------- */
.principios li,.passos li,.aval,.quem-sim,.quem-nao,.inclui li{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}
@media (hover:hover){
  .principios li:hover,.passos li:hover,.aval:hover,.quem-sim:hover,.quem-nao:hover{transform:translateY(-4px)}
  .inclui li:hover{transform:translateX(4px)}
}

/* ---------- 10. Cards com efeito vidro (seções escuras) ---------- */
.aval,.plano:not(.plano-destaque){background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-color:rgba(255,255,255,.12);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s ease}
@media (hover:hover){
  .aval:hover,.plano:not(.plano-destaque):hover{border-color:rgba(255,255,255,.32)}
  .plano:not(.plano-destaque):hover{transform:translateY(-5px)}
}

/* ---------- 11. Plano em destaque: brilho pulsando + anel girando e tilt no hover ---------- */
.plano-destaque{position:relative;isolation:isolate}
.plano-destaque::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  box-shadow:0 0 34px 6px rgba(242,240,239,.5);opacity:.2;animation:bm-brilho 3s ease-in-out infinite}
@keyframes bm-brilho{0%,100%{opacity:.18}50%{opacity:.85}}
@property --bm-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes bm-gira{to{--bm-ang:360deg}}
.plano-destaque::after{content:"";position:absolute;inset:-3px;border-radius:calc(var(--raio,18px) + 3px);padding:3px;pointer-events:none;
  background:conic-gradient(from var(--bm-ang),rgba(242,240,239,0) 0%,#fff 20%,rgba(242,240,239,0) 42%,rgba(242,240,239,0) 58%,#b9b9b9 80%,rgba(242,240,239,0) 100%);
  -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,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;transition:opacity .4s ease}
@media (hover:hover){
  .plano-destaque:hover::after{opacity:1;animation:bm-gira 2.6s linear infinite}
}
@media (min-width:860px) and (hover:hover){
  .plano-destaque{transition:transform .25s ease-out}
  .plano-destaque:hover{transform:translateY(-12px) perspective(800px) rotateX(var(--sim-rx,0deg)) rotateY(var(--sim-ry,0deg))}
}

/* ---------- 12. Shimmer: faixa diagonal que atravessa botão principal e cards especiais ---------- */
.btn-claro,.sim-cta{position:relative;overflow:hidden}
.selo{overflow:hidden}
.btn-claro::after,.sim-cta::after,.selo::after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-160%) skewX(-12deg)}
.btn-claro::after,.selo::after{background:linear-gradient(90deg,transparent,rgba(13,13,13,.14),transparent)}
@media (hover:hover){
  .btn-claro:hover::after,.sim-cta:hover::after,.selo:hover::after{transform:translateX(320%) skewX(-12deg);transition:transform .75s ease}
}

/* ---------- 13. Botões: sobe 1px no hover, afunda ao clicar ---------- */
.btn:hover{transform:translateY(-1px)}
.btn:active,.opcao:active,.sim-box button:active{transform:scale(.96)}

/* ---------- 14. Botão flutuante do WhatsApp: pulso verde + scale no hover ---------- */
@keyframes bm-wa{
  0%{box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 0 rgba(37,211,102,.55)}
  70%,100%{box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 20px rgba(37,211,102,0)}
}
.bm-js .wa-flut{animation:bm-wa 3s ease-out infinite}
.wa-flut:hover{transform:scale(1.1)}

/* ---------- 15. FAQ: "+" gira 45° e a resposta abre com transição de altura (altura via JS) ---------- */
summary::after{transition:transform .3s cubic-bezier(.22,1,.36,1)}
details[open] summary::after{content:"+";transform:rotate(45deg)}

/* =========================================================
   SIMULADOR DE PAGAMENTO (dentro de cada .plano, montado por initSimulador)
   ========================================================= */
.sim-wrap{display:grid;gap:10px;margin-top:6px}
.sim-apoio{font-size:.88rem;color:#cfcfcf}
.plano-destaque .sim-apoio{color:var(--suave,#555)}
.sim-vant{font-size:.85rem;line-height:1.35;padding:8px 10px;border-radius:10px;background:rgba(80,200,120,.14);color:#d9f5e3}
.sim-vant b{color:#7fe3a4}
.plano-destaque .sim-vant{background:rgba(30,140,70,.12);color:#1f4d33}
.plano-destaque .sim-vant b{color:#17703b}
.sim-spark{display:block;width:100%;height:46px;overflow:visible;color:#b5b5b5}
.plano-destaque .sim-spark{color:var(--chumbo,#2b2b2b)}
.sim-spark .sim-linha-svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sim-spark .sim-ponto-svg{fill:currentColor}

.sim-lista{display:grid;gap:6px}
.sim-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
  padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:transparent;color:inherit;font:inherit;font-size:.9rem;cursor:pointer;transition:background .2s,border-color .2s}
.plano-destaque .sim-linha{border-color:var(--linha,#ddd)}
.sim-linha[aria-pressed="true"]{background:rgba(255,255,255,.12);border-color:currentColor}
.plano-destaque .sim-linha[aria-pressed="true"]{background:rgba(0,0,0,.06)}
.sim-badge{font-style:normal;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(31,122,69,.18);color:#4fcf8a;margin-left:8px}

.sim-box{display:grid;gap:10px;padding:14px;border-radius:14px;background:#141414;color:var(--off,#f2f0ef);border:1px solid rgba(255,255,255,.1)}
.sim-tit{display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#b5b5b5;margin:0}
@keyframes sim-pulso{0%{transform:scale(1);opacity:1}100%{transform:scale(2.1);opacity:0}}
.sim-ponto{position:relative;width:8px;height:8px;border-radius:50%;background:#3fb98a}
.sim-ponto::after{content:"";position:absolute;inset:0;border-radius:50%;background:#3fb98a;animation:sim-pulso 1.8s ease-out infinite}

.sim-abas{display:flex;gap:4px;flex-wrap:wrap}
.sim-abas button{flex:1 0 auto;min-height:34px;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:transparent;color:inherit;font:600 .7rem var(--texto,system-ui);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.sim-abas button[aria-pressed="true"]{background:var(--off,#f2f0ef);color:var(--preto,#0d0d0d);border-color:var(--off,#f2f0ef)}

.sim-modo{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;border-radius:999px;background:rgba(255,255,255,.07)}
.sim-modo button{min-height:38px;padding:8px 4px;border-radius:999px;border:0;background:transparent;color:#d6d6d6;font:600 .72rem var(--texto,system-ui);cursor:pointer;transition:background .2s,color .2s}
.sim-modo button[aria-pressed="true"]{background:var(--off,#f2f0ef);color:var(--preto,#0d0d0d)}

.sim-parcelas{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.sim-parcelas[hidden]{display:none}
.sim-parcelas button{min-height:38px;padding:8px 0;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--off,#f2f0ef);font:600 .74rem var(--texto,system-ui);cursor:pointer;transition:background .2s,color .2s}
.sim-parcelas button[aria-pressed="true"]{background:var(--off,#f2f0ef);color:var(--preto,#0d0d0d);border-color:var(--off,#f2f0ef)}

.sim-res{padding:12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);min-height:118px}
.sim-rot{margin:0;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#a9a9a9;line-height:1.35}
.sim-val{margin:6px 0 0;font-family:var(--titulo,Georgia,serif);font-size:1.9rem;font-weight:600;line-height:1.1;color:var(--off,#f2f0ef)}
.sim-nota{margin:4px 0 0;font-size:.78rem;color:#bdbdbd;line-height:1.35}
@keyframes sim-troca{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sim-troca{animation:sim-troca .22s ease-out}

.sim-cta{width:100%;margin-top:2px}
.sim-box button:focus-visible,.sim-linha:focus-visible,.sim-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
.plano-destaque .sim-linha:focus-visible,.plano-destaque .sim-cta:focus-visible{outline-color:var(--chumbo,#2b2b2b)}

/* ---------- Acessibilidade: quem desativa animações não vê nada se mexendo ---------- */

/* ===== Espaçamento enxuto entre seções (leitura mais fluida) ===== */
.sec{padding:44px 0}
.final{padding:52px 0}
.sec-escura .sub-t{margin-top:32px}
.rodape{padding-top:36px}
@media (min-width:860px){
  .sec{padding:64px 0}
  .final{padding:68px 0}
}

/* =========================================================
   CINEMA: acabamento de rolagem (só transform/opacity)
   ========================================================= */
/* títulos: palavra por palavra subindo de uma máscara */
.bm-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.bm-w>span{display:inline-block}
.bm-js .bm-split:not(.bm-on) .bm-w>span{transform:translate3d(0,112%,0)}
.bm-js .bm-split .bm-w>span{transition:transform .9s cubic-bezier(.22,1,.36,1)}
.bm-split.bm-on .bm-w>span{transform:none}

/* fotos antes/hoje: cortina escura que sobe e revela, com a foto se aproximando */
.par{position:relative}
.par img{will-change:transform;transform:scale(1.02)}
.bm-cortina{position:absolute;inset:0;background:#0d0d0d;z-index:3;pointer-events:none;transform-origin:50% 0;transform:scaleY(0)}
.bm-js .par:not(.bm-on) .bm-cortina{transform:scaleY(1)}
.bm-js .par .bm-cortina{transition:transform 1.1s cubic-bezier(.77,0,.18,1)}
.par.bm-on .bm-cortina{transform:scaleY(0)}

/* destaques em negrito: peso único em todo o site, sem sublinhado */
p strong,li strong,.frase strong{font-weight:700;font-style:inherit;text-decoration:none}
.bm-historia-frase strong{font-weight:700;color:#fff}
/* etiquetas: ANTES em cima à esquerda da primeira foto, HOJE embaixo à direita da segunda, em todos os pares */
.historia-fotos .par > div:first-child span{top:6px;bottom:auto;left:6px;right:auto}
.historia-fotos .par > div:last-child span{top:auto;bottom:6px;left:auto;right:6px}

/* topo com vinheta de cinema (escurece só as bordas) */
.hero{position:relative}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(130% 95% at 50% 42%,transparent 58%,rgba(0,0,0,.4) 100%)}
.hero-txt{will-change:transform,opacity}

/* ---------- Botões do topo: WhatsApp + BG TEAM ---------- */
.bm-topo-btns{display:flex;align-items:center;gap:8px}
.topo .bm-bg-btn{font-size:.85rem;letter-spacing:.08em;font-weight:700;padding:8px 14px;white-space:nowrap}
.topo .bm-bg-btn .ic{width:16px;height:16px;flex:none}
/* celular: logo à esquerda, botões pequenos à direita na mesma linha, atalhos logo abaixo */
@media (max-width:859px){
  .topo-in{flex-wrap:wrap;row-gap:0;padding-top:8px;align-items:center}
  .topo .marca img{width:min(40vw,150px)}
  .topo .marca span{font-size:.56rem}
  .bm-topo-btns{gap:6px;margin-left:auto}
  .topo .bm-wa-btn{font-size:0;gap:0;padding:0;width:36px;min-width:36px;min-height:36px;border-radius:50%}
  .topo .bm-wa-btn .ic{width:19px;height:19px}
  .topo .bm-bg-btn{min-height:36px;padding:0 12px;font-size:.72rem;letter-spacing:.1em;gap:6px}
  .topo .bm-bg-btn .ic{width:13px;height:13px}
  .menu{padding-top:8px;padding-bottom:9px}
}
@media (max-width:350px){.topo .bm-bg-btn{padding:0 8px;font-size:.62rem;letter-spacing:.05em;gap:4px}.topo .marca img{width:104px}.topo .marca span{font-size:.47rem;letter-spacing:0}.topo-in{column-gap:8px}}

/* frase de destaque do Sobre: letra forte do sistema, sem itálico */
.sobre-txt .frase{font-family:var(--texto);font-style:normal;font-weight:600;font-size:1.2rem;line-height:1.45;letter-spacing:0;color:var(--preto)}
.sobre-txt .frase strong{font-weight:800}
@media (min-width:860px){.sobre-txt .frase{font-size:1.3rem}}

/* passo a passo logo abaixo da análise: faixa branca própria, enxuta */
.bm-passos-sec{padding:36px 0 40px}
@media (min-width:860px){.bm-passos-sec{padding:48px 0 52px}}

/* título "COMO FUNCIONA": caixa alta, letra forte do sistema */
.bm-passos-sec .sub-t{font-family:var(--texto);font-style:normal;font-weight:800;font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;color:var(--preto)}

.passos li{align-content:start}

@media (prefers-reduced-motion:reduce){
  .bm-cortina{display:none!important}.bm-w>span{transform:none!important}.bm-dest::after{transform:none!important}
  html{scroll-behavior:auto}
  .bm-reveal,.bm-js .hero-grid *{opacity:1!important;transform:none!important;transition:none!important}
  .bm-acompanha,[data-bm-vel],.historia-fotos .par > div{transform:none!important;opacity:1!important}
  #bm-progresso{display:none}
  .bm-js .marca img,.bm-js .marca span,.bm-js .sobre-foto::before,.bm-js .wa-flut,
  .plano-destaque::before,.plano-destaque::after,.sim-ponto::after,.sim-troca{animation:none!important}
  .sobre-txt .frase::before{transform:scaleY(1)!important}
  .btn-claro::after,.sim-cta::after,.selo::after{display:none}
}