/* Página inicial (layout RXBR 2026-10-16). As outras páginas usam este arquivo + paginas.css.
   Layout: chão grafite com grade de papel técnico e a seta da dupla montanha (do logo) subindo atrás do hero.
   Ciano = ação; verde→amarelo = resultado. Sem telas de exemplo: o texto é o do site atual. */
:root{
  --chao:#0B0F14; --chao2:#10161E; --placa:#141C26; --placa2:#1A2430; --fio:#232E3B; --fio2:#2E3A49;
  --texto:#E9EEF4; --texto2:#A9B5C4; --texto3:#77869A;
  --ciano:#00D6FF; --ciano-tinta:#03141A; --verde:#009E49; --amarelo:#FFC400; --ok:#2FCB7A;
  --bandeira:linear-gradient(90deg,#009E49,#FFC400);
  --display:"Chakra Petch","Arial Black",system-ui,sans-serif;
  --corpo:"Poppins","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--chao);color:var(--texto);font-family:var(--corpo);font-size:16px;line-height:1.6;overflow-x:clip}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);line-height:1.04;margin:0;text-wrap:balance;letter-spacing:-.01em;font-weight:700}
p{margin:0}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
.mono{font-family:var(--mono)}
.rotulo{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ciano)}
.rotulo.bandeira{background:var(--bandeira);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--texto2);font-size:clamp(16px,1.5vw,18px);max-width:58ch}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:10px;padding:14px 22px;font-weight:600;font-size:15.5px;border:1px solid transparent;transition:transform .15s,background .15s,border-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}
.btn-acao{background:var(--ciano);color:var(--ciano-tinta)}
.btn-acao:hover{background:#5FE6FF}
.btn-linha{border-color:var(--fio2);color:var(--texto)}
.btn-linha:hover{border-color:var(--texto3)}
.btn-sm{padding:9px 15px;font-size:14px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgb(11 15 20/.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--fio)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.nav .logo img{height:24px;width:auto;display:block}
.nav .links{display:flex;gap:22px;font-size:14px;color:var(--texto2)}
.nav .links a:hover{color:var(--texto)}
.nav .act{margin-left:auto;display:flex;gap:10px}
@media (max-width:880px){.nav .links{display:none}}
@media (max-width:420px){.nav .act .btn-linha{display:none}}

/* hero */
.hero{position:relative;padding-block:56px 72px;overflow:hidden;
  background-image:linear-gradient(var(--fio) 1px,transparent 1px),linear-gradient(90deg,var(--fio) 1px,transparent 1px);
  background-size:32px 32px;background-position:-1px -1px}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 72% 40%,transparent,var(--chao) 78%);pointer-events:none}
.montanha{position:absolute;right:-6%;bottom:-18%;width:min(980px,120%);height:auto;z-index:0;pointer-events:none;opacity:.55;will-change:transform}
.montanha path{fill:none;stroke-width:3;vector-effect:non-scaling-stroke}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(40px,6vw,74px);margin-top:18px}
.hero h1 em{font-style:normal;color:var(--ciano)}
.hero .lead{margin-top:20px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.selos{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-family:var(--mono);font-size:12.5px;color:var(--texto3)}
.selos span::before{content:"✓ ";color:var(--ok)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero{padding-block:36px 56px}}

/* faixa de perfis */
.perfis{border-block:1px solid var(--fio);background:var(--chao2)}
.perfis .wrap{display:flex;flex-wrap:wrap;gap:10px 34px;align-items:center;justify-content:center;padding-block:18px;font-family:var(--mono);font-size:13px;color:var(--texto3)}
.perfis b{font-family:var(--display);font-size:18px;color:var(--texto2);font-weight:600}

/* seções */
section.bloco{padding-block:88px}
.cab-sec{display:grid;gap:14px;max-width:720px;margin-bottom:44px}
.cab-sec h2{font-size:clamp(30px,4vw,46px)}

/* sequência: anamnese → prescrição → acompanhamento */
.seq{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--fio2);border-radius:14px;overflow:hidden}
.passo{padding:26px 24px 28px;display:grid;gap:12px;align-content:start;border-right:1px solid var(--fio2);position:relative;min-width:0}
.passo:last-child{border-right:0}
.passo .hora{font-family:var(--mono);font-size:12px;color:var(--texto3)}
.passo h3{font-size:24px}
.passo p{color:var(--texto2);font-size:15px}
.x-unused{margin-top:6px;background:var(--placa);border:1px solid var(--fio);border-radius:10px;padding:12px 14px;font-size:13.5px;display:grid;gap:4px}
.x-unused small{font-family:var(--mono);font-size:11px;color:var(--texto3)}
.x-unused .ok{color:var(--ok);font-family:var(--mono);font-size:12px}
.x-unused .ciano{color:var(--ciano);font-family:var(--mono);font-size:12px}
.passo:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:28px;width:26px;height:26px;border-radius:50%;background:var(--chao);border:1px solid var(--fio2);display:grid;place-items:center;font-size:13px;color:var(--ciano);z-index:1}
@media (max-width:860px){.seq{grid-template-columns:1fr}.passo{border-right:0;border-bottom:1px solid var(--fio2)}.passo:last-child{border-bottom:0}.passo:not(:last-child)::after{content:"↓";right:24px;top:auto;bottom:-13px}}

/* por dentro */
.dentro{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.peca{background:var(--placa);border:1px solid var(--fio);border-radius:14px;padding:22px;display:grid;gap:10px;align-content:start;min-width:0}
.peca h3{font-size:21px}
.peca p{color:var(--texto2);font-size:14.5px}
.peca.a{grid-column:span 4}.peca.b{grid-column:span 2}.peca.c{grid-column:span 2}.peca.d{grid-column:span 2}.peca.e{grid-column:span 2}
@media (max-width:900px){.dentro{grid-template-columns:1fr 1fr}.peca.a,.peca.b,.peca.c,.peca.d,.peca.e{grid-column:span 2}}
/* evolução: o gráfico que sobe */
.evolucao{background:var(--chao2);border-block:1px solid var(--fio)}
.evo-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
@media (max-width:900px){.evo-grid{grid-template-columns:1fr}}
.placar{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--fio);border:1px solid var(--fio);border-radius:14px;overflow:hidden;margin-top:28px}
.placar div{background:var(--chao2);padding:18px 18px 16px}
.placar b{display:block;font-family:var(--display);font-size:clamp(30px,3.6vw,40px);line-height:1;font-variant-numeric:tabular-nums}
.placar small{color:var(--texto3);font-size:13px}
.placar .bandeira b{background:var(--bandeira);-webkit-background-clip:text;background-clip:text;color:transparent}
/* hoje x com o RXBR */
.troca{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.troca{grid-template-columns:1fr}}
.troca > div{border-radius:14px;padding:24px;border:1px solid var(--fio)}
.troca h3{font-size:20px;margin-bottom:14px}
.troca ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.troca .antes{color:var(--texto3)}
.troca .antes li{text-decoration:line-through;text-decoration-color:var(--fio2)}
.troca .antes li::before{content:"— ";}
.troca .depois{background:var(--placa);border-color:var(--fio2)}
.troca .depois li::before{content:"✓ ";color:var(--ok);font-weight:700}

/* planos */
.alterna{display:inline-flex;border:1px solid var(--fio2);border-radius:10px;padding:3px;gap:3px;margin-bottom:22px;flex-wrap:wrap}
.alterna button{font:inherit;font-size:14px;background:none;border:0;color:var(--texto2);border-radius:7px;padding:8px 14px;cursor:pointer}
.alterna button[aria-pressed="true"]{background:var(--placa2);color:var(--texto)}
.planos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1000px){.planos{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.planos{grid-template-columns:1fr}}
.plano{border:1px solid var(--fio);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px;background:var(--chao2)}
.plano.destaque{border-color:var(--ciano);background:var(--placa)}
.plano .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ciano)}
.plano h3{font-size:22px}
.plano .cap{font-family:var(--mono);font-size:12.5px;color:var(--texto3)}
.plano .preco{font-family:var(--display);font-size:36px;line-height:1;font-variant-numeric:tabular-nums}
.plano .preco small{font-family:var(--corpo);font-size:13px;color:var(--texto3);font-weight:400}
.plano ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14px;color:var(--texto2);flex:1}
.plano li::before{content:"✓ ";color:var(--ok)}
.plano .btn{justify-content:center}
.nota{margin-top:16px;font-size:13.5px;color:var(--texto3)}

/* dúvidas */
.faq{display:grid;gap:0;max-width:820px;border-top:1px solid var(--fio)}
.faq details{border-bottom:1px solid var(--fio)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:500;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--ciano);font-size:18px}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--texto2);padding-bottom:18px;max-width:65ch}

/* fechamento */
.fecho{text-align:center;padding-block:96px;position:relative;overflow:hidden;border-top:1px solid var(--fio)}
.fecho h2{font-size:clamp(34px,5vw,58px);max-width:16ch;margin-inline:auto}
.fecho p{margin-top:14px;color:var(--texto2)}
.fecho .btn{margin-top:26px}
.fecho small{display:block;margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--texto3)}
footer{border-top:1px solid var(--fio);padding-block:28px calc(28px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--texto3)}
footer .logo img{height:18px;width:auto;display:block}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer nav a:hover{color:var(--texto)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* hero: o ícone de verdade no lugar de telas */
.marca-palco{position:relative;display:grid;place-items:center;min-width:0}
.marca-palco img{width:min(380px,80%);height:auto;filter:drop-shadow(0 30px 60px rgb(0 214 255/.16))}
@media (max-width:900px){.marca-palco{display:none}}

/* passos */
.passo .num{font-family:var(--display);font-size:44px;line-height:1;color:var(--ciano)}

/* por dentro: título, subtítulo e a lista real de cada parte */
.peca .num{font-family:var(--mono);font-size:12px;color:var(--texto3)}
.peca .sub{color:var(--texto2);font-size:15px}
.peca ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:0;font-size:14.5px}
.peca li{padding:9px 0;border-top:1px solid var(--fio);color:var(--texto)}
.peca li::before{content:"✓ ";color:var(--ok)}
.dentro .peca{grid-column:span 2}
.dentro .peca.largo{grid-column:span 3}
@media (max-width:900px){.dentro .peca,.dentro .peca.largo{grid-column:span 2}}

/* free */
.free-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
@media (max-width:900px){.free-grid{grid-template-columns:1fr}}
.free-card{background:var(--placa);border:1px solid var(--fio2);border-radius:14px;padding:26px;display:grid;gap:16px}
.free-card .preco{font-family:var(--display);font-size:52px;line-height:1}
.free-card .preco small{font-family:var(--corpo);font-size:14px;color:var(--texto3);font-weight:400}
.free-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.free-card li::before{content:"✓ ";color:var(--ok)}
.free-card .btn{justify-content:center}
.free-card .leva{text-align:center;font-family:var(--mono);font-size:12px;color:var(--texto3)}

/* planos: mensal/anual */
.alternas{display:flex;flex-wrap:wrap;gap:10px 14px;margin-bottom:22px}
.alternas .alterna{margin-bottom:0}
.nota a{color:var(--ciano)}

/* pro seu aluno */
.aluno-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media (max-width:900px){.aluno-grid{grid-template-columns:1fr;gap:28px}}
.lojas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.loja{display:inline-flex;flex-direction:column;border:1px solid var(--fio2);border-radius:10px;padding:9px 18px;line-height:1.2}
.loja small{font-size:11.5px;color:var(--texto3)}
.loja b{font-family:var(--display);font-size:18px}
.loja:hover{border-color:var(--texto3)}
.recursos{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--fio);border:1px solid var(--fio);border-radius:14px;overflow:hidden}
.recursos div{background:var(--chao2);padding:18px;font-size:15px}
.recursos div::before{content:"✓ ";color:var(--ok)}
@media (max-width:480px){.recursos{grid-template-columns:1fr}}

/* menu Entrar, pular conteúdo, CTA fixo no celular */
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:70;background:var(--ciano);color:var(--ciano-tinta);padding:8px 12px;border-radius:8px}
.login{position:relative}
.login summary{list-style:none;cursor:pointer}.login summary::-webkit-details-marker{display:none}
.login[open] .login-menu{display:flex}
.login-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);flex-direction:column;gap:2px;min-width:240px;background:var(--placa2);border:1px solid var(--fio2);border-radius:12px;padding:6px;box-shadow:0 18px 40px rgb(0 0 0/.5)}
.login-menu a{padding:10px 12px;border-radius:8px}.login-menu a:hover{background:var(--placa)}
.login-menu b{display:block;font-size:14.5px}.login-menu small{color:var(--texto3);font-size:12.5px}
.sticky-cta{position:fixed;inset:auto 0 0 0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgb(11 15 20/.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--fio);display:none}
.sticky-cta .btn{width:100%;justify-content:center}
@media (max-width:820px){.sticky-cta{display:block}body{padding-bottom:76px}}

/* "Sou personal / coach / nutricionista" no topo */
.hero .alterna{margin-bottom:0}
.hero h1{margin-top:22px}
@media (max-width:420px){.hero .alterna .sou{display:none}}

/* preço por período (site.js escreve o valor e a linha do anual) */
.plano .per{font-family:var(--mono);font-size:12px;color:var(--texto3);min-height:18px;margin-top:-8px}

/* contato */
.contato-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
@media (max-width:900px){.contato-grid{grid-template-columns:1fr;gap:28px}}
.canais{display:grid;gap:10px;margin-top:26px}
.canal{display:flex;align-items:center;gap:14px;border:1px solid var(--fio2);border-radius:12px;padding:14px 16px;background:var(--chao2)}
.canal:hover{border-color:var(--texto3)}
.canal svg{flex:none;width:22px;height:22px;color:var(--ciano)}
.canal small{display:block;font-size:12px;color:var(--texto3)}
.canal b{font-weight:600;overflow-wrap:anywhere}
.form{background:var(--placa);border:1px solid var(--fio2);border-radius:14px;padding:24px;display:grid;gap:16px}
.form label{display:block;font-size:13.5px;color:var(--texto2);margin-bottom:6px}
.form input,.form textarea{width:100%;font:inherit;font-size:16px;color:var(--texto);background:var(--chao);border:1px solid var(--fio2);border-radius:10px;padding:12px 14px}
.form textarea{resize:vertical;min-height:140px}
.form input:focus,.form textarea:focus{outline:2px solid var(--ciano);outline-offset:1px;border-color:transparent}
.form .btn{justify-content:center;cursor:pointer}
.form .btn:disabled{opacity:.6;cursor:default}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-status{margin:0;font-size:14px;min-height:20px;text-align:center;color:var(--texto2)}
.form-status.ok{color:var(--ok)}.form-status.err{color:var(--amarelo)}

/* rodapé */
footer .wrap > img{height:18px;width:auto}
.rodape-direita{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.rodape-direita img{height:14px;width:auto}
.insta{display:inline-flex;align-items:center;gap:6px}
.insta svg{width:16px;height:16px}