/* ==========================================================================
   NUTRIÇÃO ESPORTIVA — grafite e laranja-energia, Archivo + Inter.
   Topo escuro com foto em silhueta e brilho quente, painel com cartões de
   números que sobem, dia de treino em 3 tempos, parte clara no "como funciona".
   ========================================================================== */

body { background: var(--fundo); color: var(--texto); font-family: var(--fonte-texto); }
h1, h2, h3, .marca { font-family: var(--fonte-titulos); letter-spacing: -.035em; line-height: 1.02; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 800; margin: 10px 0 12px; }
h1 em, h2 em { font-style: normal; color: var(--destaque); }
section { padding: 96px 6vw; }
.cab { max-width: 760px; margin-bottom: 40px; }
.cab > p:not(.kicker) { color: var(--suave); }
.kicker { font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--destaque); }
.rot { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); margin: 24px 0 10px; }
.rot b { font-family: var(--fonte-titulos); font-size: 1.6rem; color: var(--texto); letter-spacing: -.03em; text-transform: none; }
.rot:first-child { margin-top: 0; }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; border-radius: 10px; background: var(--destaque); color: #1a0d06; font-weight: 800; transition: transform .2s, box-shadow .2s; }
.botao:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px var(--destaque); }
.botao.vazado { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.botao.pequeno { padding: 11px 18px; font-size: .9rem; }
.botao.largo { width: 100%; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }

.topo { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 28px; padding: 16px 6vw; transition: background .3s, box-shadow .3s; }
.topo.rolou { background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linha); }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.12rem; margin-right: auto; min-width: 0; }
.marca > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca-ico { width: 34px; height: 34px; flex: none; }
.m-fundo { fill: var(--destaque); }
.m-linha { fill: none; stroke: #1a0d06; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.topo-nav { display: flex; gap: 26px; font-weight: 600; font-size: .94rem; color: var(--suave); }
.topo-nav a:hover { color: var(--texto); }
@media (max-width: 900px) { .topo-nav { display: none; } }
@media (max-width: 520px) { .topo-cta { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; margin-top: -76px; min-height: 96vh; padding: 160px 6vw 60px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--img) 60% 50% / cover; animation: zoom 3s cubic-bezier(.2,.7,.2,1) both; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 70% 60%, rgba(255,122,69,.18), transparent 70%), linear-gradient(180deg, rgba(15,18,20,.35), rgba(15,18,20,.2) 40%, var(--fundo)); }
@keyframes zoom { from { transform: scale(1.1); } }
.h-txt { max-width: 760px; }
.hero h1 { font-size: clamp(3rem, 7.6vw, 6.6rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; margin: 16px 0 18px; line-height: .95; animation: sobe .9s .2s both; }
.h-frase { color: #c9d0d3; font-size: 1.15rem; max-width: 540px; margin-bottom: 30px; animation: sobe .9s .35s both; }
.hero .acoes { animation: sobe .9s .5s both; }
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } }
.h-mods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 54px; }
.h-mods li { padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); font-weight: 600; font-size: .86rem; color: #dfe4e6; animation: sobe .6s both; }
.h-mods li:nth-child(n) { animation-delay: calc(.6s + var(--n, 0) * .05s); }
@media (max-width: 600px) { .hero { padding-top: 130px; min-height: 90vh; } }

/* ---------- Painel ---------- */
.pn-grade { display: grid; grid-template-columns: .95fr 1.05fr; gap: 4vw; align-items: start; }
.pn-ctrl { padding: 28px; border-radius: 22px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha); }
.objs { display: grid; gap: 6px; }
.objs button { text-align: left; padding: 14px 16px; border-radius: 12px; font-weight: 700; background: var(--papel2); transition: background .2s, color .2s, transform .2s; }
.objs button:hover { transform: translateX(4px); }
.objs button.ativo { background: var(--destaque); color: #1a0d06; }
.mods { display: flex; flex-wrap: wrap; gap: 6px; }
.mods button { padding: 8px 13px; border-radius: 99px; font-weight: 600; font-size: .86rem; box-shadow: inset 0 0 0 1px var(--linha); color: var(--suave); transition: color .2s, box-shadow .2s; }
.mods button.ativo { color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--destaque); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--destaque) var(--p, 50%), var(--linha) 0); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--destaque); cursor: grab; }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--destaque); cursor: grab; }
.pn-linha { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: end; }
.passo-num { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--papel2); }
.passo-num button { width: 40px; height: 40px; border-radius: 9px; font-size: 1.3rem; font-weight: 700; background: var(--papel); }
.passo-num b { min-width: 46px; text-align: center; font-family: var(--fonte-titulos); font-size: 1.3rem; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--papel2); }
.seg button { padding: 11px 6px; border-radius: 9px; font-weight: 700; font-size: .9rem; color: var(--suave); }
.seg button.ativo { background: var(--texto); color: var(--fundo); }
@media (max-width: 520px) { .pn-linha { grid-template-columns: 1fr; } }
.pn-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pc { position: relative; padding: 22px; border-radius: 20px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha); overflow: hidden; animation: sobe .45s both; }
.pc-prot { grid-column: 1 / -1; background: linear-gradient(135deg, #2a1a12, var(--papel) 60%); box-shadow: inset 0 0 0 1px rgba(255,122,69,.35); }
.pc small { display: block; color: var(--suave); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.pc b { display: block; font-family: var(--fonte-titulos); font-weight: 900; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; margin: 6px 0 12px; }
.pc-prot b { font-size: clamp(2.6rem, 5.4vw, 4.2rem); color: var(--destaque); }
.pc i { display: block; height: 6px; border-radius: 6px; background: var(--linha); position: relative; overflow: hidden; }
.pc i::after { content: ''; position: absolute; inset: 0; width: var(--w); border-radius: 6px; background: var(--destaque); transition: width .6s cubic-bezier(.3,.7,.2,1); animation: enche .8s cubic-bezier(.3,.7,.2,1) both; }
.pc-agua i::after { background: #4dabf7; }
.pc-carbo i::after { background: #ffd43b; }
@keyframes enche { from { width: 0; } }
.pc em { display: block; font-style: normal; color: var(--suave); font-size: .82rem; margin-top: 8px; }
.pn-foco { margin: 16px 0; padding: 14px 16px; border-radius: 14px; background: rgba(255,122,69,.1); color: #ffd8c6; font-size: .94rem; }
.pn-dia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pn-dia li { padding: 18px; border-radius: 18px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha); }
.pn-dia li.leve { opacity: .7; }
.pn-dia span { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--destaque); color: #1a0d06; font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.pn-dia b { display: block; font-size: .98rem; margin-bottom: 4px; }
.pn-dia p { color: var(--suave); font-size: .86rem; line-height: 1.45; }
.pn-aviso { margin-top: 14px; color: var(--suave); font-size: .8rem; }
@media (max-width: 900px) { .pn-grade { grid-template-columns: 1fr; } .pn-dia { grid-template-columns: 1fr; } }

/* ---------- Como funciona (parte clara) ---------- */
.como { background: var(--claro); color: #15191b; border-radius: 40px; margin: 0 2vw; }
.como .cab > p:not(.kicker) { color: #5b6468; }
.como-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: center; }
.como-passos { display: grid; gap: 0; }
.como-passos li { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 22px 0; border-top: 1px solid #ddd6cc; transition-delay: calc(var(--i) * .1s); }
.como-passos span { font-family: var(--fonte-titulos); font-weight: 900; font-size: 2.2rem; color: var(--destaque); line-height: 1; }
.como-passos b { display: block; font-family: var(--fonte-titulos); font-size: 1.25rem; margin-bottom: 4px; }
.como-passos p { color: #5b6468; }
.como-fotos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px; gap: 10px; }
.cf { border-radius: 20px; overflow: hidden; }
.cf img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.cf:hover img { transform: scale(1.06); }
.cf-0 { grid-row: span 2; }
@media (max-width: 860px) { .como-grade { grid-template-columns: 1fr; } .como { border-radius: 28px; margin: 0; } .como-fotos { grid-template-rows: 160px 160px; } }

/* ---------- Sobre ---------- */
.sobre { max-width: 900px; }
.sobre h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); text-transform: uppercase; font-weight: 900; }
.sb-reg { display: inline-block; padding: 6px 12px; border-radius: 99px; background: rgba(255,122,69,.14); color: var(--destaque); font-weight: 700; font-size: .86rem; margin-bottom: 18px; }
.sb-txt { color: #c9d0d3; font-size: 1.2rem; line-height: 1.6; }

/* ---------- Agendar ---------- */
.agendar { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6vw; align-items: start; }
.ag-txt p:not(.kicker) { color: var(--suave); }
.ag-form { padding: 28px; border-radius: 22px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha); }
.ag-resumo { display: grid; gap: 1px; border-radius: 14px; overflow: hidden; background: var(--linha); }
.ag-resumo div { padding: 12px 16px; background: var(--papel2); display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ag-resumo small { color: var(--suave); }
.ag-resumo b { text-align: right; font-size: .94rem; }
.ag-form label { display: grid; gap: 8px; margin-top: 18px; font-weight: 700; font-size: .92rem; }
.ag-form input { padding: 15px 16px; border-radius: 12px; border: 1.5px solid var(--linha); background: var(--papel2); color: var(--texto); outline: none; }
.ag-form input:focus { border-color: var(--destaque); }
.erro { color: #ff8787; font-size: .88rem; min-height: 1.2em; margin: 6px 0; }
.aviso-horario { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--papel2); margin: 4px 0 16px; font-size: .88rem; }
.aviso-horario p { color: var(--suave); }
@media (max-width: 860px) { .agendar { grid-template-columns: 1fr; } .ag-form { padding: 20px; } }

/* ---------- FAQ e rodapé ---------- */
.faq { max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--linha); }
.faq-item button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; text-align: left; font-family: var(--fonte-titulos); font-weight: 700; font-size: 1.12rem; }
.faq-item button span { position: relative; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--papel2); color: var(--destaque); }
.faq-item button span::before, .faq-item button span::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.faq-item button span::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s; }
.faq-item.aberto button span::after { transform: translate(-50%, -50%) rotate(0); }
.faq-resp { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-resp p { padding-bottom: 22px; color: var(--suave); }
.rodape { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 52px 6vw 110px; text-align: center; color: var(--suave); font-size: .9rem; border-top: 1px solid var(--linha); }
.rd-marca { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--texto); font-family: var(--fonte-titulos); font-weight: 800; font-size: 1.15rem; margin-bottom: 6px; }
.rodape small { flex-basis: 100%; opacity: .75; }