/* ATP Esportes · paleta MukaNutri: preto quente, branco quente e dourado só em detalhes */
:root{--fundo:#080807;--fundo2:#11110f;--linha:#24231f;--branco:#F4F2EE;--texto:#C0BCB4;--mudo:#8a867e;--ouro:#C09A58;--ouro-claro:#E8D5A8;--max:1120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--texto);font:400 17px/1.65 "DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;color:var(--branco);font-weight:700;line-height:1.15;margin:0}
h1{font-size:clamp(38px,6vw,68px);letter-spacing:-.5px}
h1 em,h2 em{font-style:italic;color:var(--texto)}
h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:18px}
h3{font-size:22px;margin:14px 0 8px}
p{margin:0 0 14px}

.topo{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:28px;max-width:var(--max);margin:0 auto;padding:18px 24px;background:rgba(8,8,7,.92);backdrop-filter:blur(8px)}
.marca{font:700 22px "Playfair Display",Georgia,serif;color:var(--branco);text-decoration:none;letter-spacing:.3px}
.marca span{font-style:italic;font-weight:700;color:var(--texto)}
.topo nav{display:flex;gap:24px;margin-left:auto}
.topo nav a{text-decoration:none;font-size:15px;color:var(--texto)}
.topo nav a:hover{color:var(--branco)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border-radius:999px;font:500 15px "DM Sans",sans-serif;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.btn-claro{background:var(--branco);color:var(--fundo)}
.btn-claro:hover{background:#fff}
.btn-contorno{border:1px solid #3a3933;color:var(--branco)}
.btn-contorno:hover{border-color:var(--texto)}
.topo .btn{min-height:40px;padding:0 20px}

main{max-width:var(--max);margin:0 auto;padding:0 24px}
.sobre{font-size:13px;letter-spacing:2.4px;text-transform:uppercase;color:var(--mudo);margin-bottom:18px}
.sobre::before{content:"◆";color:var(--ouro);margin-right:10px;font-size:10px;vertical-align:2px}
.lead{font-size:19px;max-width:620px;color:var(--texto)}
.sub{color:var(--mudo);font-size:15px}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 8px}

.hero{padding:110px 0 120px;border-bottom:1px solid var(--linha)}
.hero h1{margin-bottom:26px;max-width:880px}

.secao{padding:96px 0;border-bottom:1px solid var(--linha)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px}
.card{background:var(--fundo2);border:1px solid var(--linha);border-radius:14px;padding:26px 24px}
.card p{font-size:15px;margin:0}
.num{font:500 13px "DM Sans",sans-serif;color:var(--mudo);letter-spacing:1px}

.secao-dupla{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.lista{list-style:none;margin:0;padding:0}
.lista li{padding:16px 0 16px 26px;border-bottom:1px solid var(--linha);position:relative;font-size:16px}
.lista li:first-child{padding-top:4px}
.lista li::before{content:"◆";position:absolute;left:0;top:19px;color:var(--ouro);font-size:9px}
.lista li:first-child::before{top:7px}
.lista b{color:var(--branco);font-weight:500}

.quem h2{margin-bottom:6px}
.contato{text-align:center;border-bottom:0}
.contato .lead{margin:0 auto}
.contato .acoes{justify-content:center}
.contato .sub a{color:var(--texto)}

.rodape{max-width:var(--max);margin:0 auto;padding:30px 24px 40px;display:flex;flex-wrap:wrap;gap:22px;font-size:14px;color:var(--mudo);border-top:1px solid var(--linha)}
.rodape a{text-decoration:none}.rodape a:hover{color:var(--branco)}
.rodape span{margin-right:auto}

/* página de texto (política de privacidade) */
.texto{max-width:760px;padding:70px 0 90px}
.texto h1{font-size:clamp(32px,4.5vw,46px);margin-bottom:10px}
.texto h2{font-size:24px;margin:40px 0 12px}
.texto li{margin-bottom:8px}
.aviso{border:1px solid var(--linha);border-radius:10px;padding:14px 18px;font-size:15px;color:var(--mudo);margin:24px 0}

@media (max-width:960px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.secao-dupla{grid-template-columns:1fr;gap:28px}}
@media (max-width:640px){
  body{font-size:16px}
  .topo{gap:14px;padding:14px 16px}.topo nav{display:none}.topo .btn{margin-left:auto}
  main{padding:0 16px}.hero{padding:64px 0 72px}.secao{padding:64px 0}
  .cards{grid-template-columns:1fr}.acoes .btn{width:100%}
  .rodape{padding:24px 16px 32px}
}

/* página principal MukaNutri */
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.planos{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.plano{display:flex;flex-direction:column}.plano h3{margin-top:6px}.plano .btn{margin-top:auto}
.plano.destaque{border-top:2.5px solid var(--ouro)}
.lista-curta{margin:6px 0 26px}.lista-curta li{padding:9px 0 9px 22px;font-size:15px}.lista-curta li::before{top:13px}.lista-curta li:first-child{padding-top:9px}.lista-curta li:first-child::before{top:13px}
.claro{color:var(--branco);font-weight:500}
.link{color:var(--branco);text-decoration:none;border-bottom:1px solid #3a3933}.link:hover{border-color:var(--texto)}
.clubes-chamada{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end}.clubes-chamada .acoes{justify-content:flex-end;margin:0}
.marca small{display:block;font:400 11px "DM Sans",sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--mudo);margin-top:2px}
@media (max-width:960px){.cards-3,.planos{grid-template-columns:1fr}.clubes-chamada{grid-template-columns:1fr}.clubes-chamada .acoes{justify-content:flex-start}}
.lista-curta li::before{color:#5c5953}

/* landing v2: prova curta, carrossel de fotos, para quem é, perguntas */
.prova-curta{margin-top:22px}
.carrossel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,300px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 14px;margin-top:30px;scrollbar-width:thin;scrollbar-color:#3a3933 transparent}
.foto{margin:0;scroll-snap-align:start;position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--fundo2);border:1px solid var(--linha)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(8,8,7,.85));color:var(--branco);font-size:14px}
.foto.vazia{display:flex;align-items:center;justify-content:center;border-style:dashed;border-color:#34332e}
.foto.vazia span{color:var(--mudo);font-size:13px;letter-spacing:1.5px;text-transform:uppercase}
.duas-listas{display:grid;gap:26px}
.lista-nao li::before{content:"✕";color:var(--mudo);font-size:11px}
.lista-nao li{color:var(--mudo)}
.faq{margin-top:26px;border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha);padding:18px 0}
.faq summary{cursor:pointer;color:var(--branco);font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--mudo);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:12px 0 0;max-width:720px}

/* página de links (bio do Instagram) */
.pagina-links,.pagina-entrar{min-height:100vh}
.links{max-width:480px;margin:0 auto;padding:56px 20px 40px}
.links-cabeca{text-align:center;margin-bottom:28px}
.avatar{width:84px;height:84px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;background:var(--fundo2);border:1px solid #3a3933;color:var(--branco);font:700 34px "Playfair Display",Georgia,serif}
.links-cabeca h1{font-size:28px;margin-bottom:4px}
.links-cabeca p{margin:0 0 6px;font-size:15px}
.links-cabeca .sub{margin-top:10px}
.links-lista{display:grid;gap:12px}
.link-btn{display:block;padding:16px 20px;border:1px solid #2c2b27;border-radius:14px;background:var(--fundo2);text-decoration:none;transition:border-color .15s,background .15s}
.link-btn:hover{border-color:#4a4842}
.link-btn b{display:block;color:var(--branco);font-weight:500;font-size:16px}
.link-btn small{color:var(--mudo);font-size:13px}
.link-btn.principal{background:var(--branco);border-color:var(--branco)}
.link-btn.principal b{color:var(--fundo)}.link-btn.principal small{color:#55524c}
.links-rodape{text-align:center;color:var(--mudo);font-size:13px;margin-top:32px}
.links-rodape a{color:var(--texto)}

/* páginas de entrada */
.entrar{max-width:980px;margin:0 auto;padding:56px 20px 40px}
.entrar>.marca{display:inline-block;margin-bottom:36px}
.entrar>h1{font-size:clamp(34px,5vw,48px);margin-bottom:6px}
.entrar-opcoes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.entrar-card{background:var(--fundo2);border:1px solid var(--linha);border-radius:16px;padding:30px 28px}
.entrar-card h1,.entrar-card h2{font-size:26px;margin-bottom:14px}
.entrar-card .acoes{margin:22px 0 14px}
.entrar-unico{max-width:560px}
.btn-largo{width:100%}
@media (max-width:760px){.entrar-opcoes{grid-template-columns:1fr}}

/* acabamento: um só tema escuro, títulos equilibrados, leitura confortável, foco visível */
:root{color-scheme:dark}
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
.hero h1{max-width:21ch;font-size:clamp(36px,5vw,58px)}
.lead,.secao p{max-width:65ch}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* prova logo abaixo da chamada */
.provas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:48px 0 0;border-top:1px solid var(--linha)}
.provas div{padding:20px 20px 0 0}
.provas div+div{padding-left:20px;border-left:1px solid var(--linha)}
.provas dt{font:700 26px "Playfair Display",Georgia,serif;color:var(--branco);font-variant-numeric:tabular-nums}
.provas dd{margin:4px 0 0;font-size:14px;color:var(--mudo)}

/* método: linhas numeradas com algarismo grande em itálico (o único gesto ousado da página) */
.passos{list-style:none;margin:36px 0 34px;padding:0;border-top:1px solid var(--linha)}
.passos li{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.4fr);gap:28px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--linha)}
.passo-num{font:italic 700 72px/0.8 "Playfair Display",Georgia,serif;color:#3a3832}
.passos h3{margin:0;font-size:26px}
.passos p{margin:0}

/* chamada fixa no celular */
.cta-fixo{display:none}
@media (max-width:640px){
  .provas{grid-template-columns:1fr 1fr}.provas div:nth-child(3){padding-left:0;border-left:0}
  .passos li{grid-template-columns:56px minmax(0,1fr);gap:6px 16px}.passos p{grid-column:2}.passo-num{font-size:48px}
  .cta-fixo{display:flex;align-items:center;justify-content:center;position:fixed;left:12px;right:12px;bottom:12px;z-index:20;min-height:52px;border-radius:999px;background:var(--branco);color:var(--fundo);font:600 16px "DM Sans",sans-serif;text-decoration:none;box-shadow:0 8px 30px rgba(0,0,0,.5)}
  body{padding-bottom:76px}
}

/* ===== movimento ===== */
/* barra de leitura */
.progresso{position:fixed;top:0;left:0;right:0;height:2px;background:var(--ouro);transform:scaleX(0);transform-origin:0 50%;z-index:30;opacity:.8}

/* brilho que acompanha o ponteiro no topo (quase imperceptível) */
.hero{position:relative;isolation:isolate}
.brilho{position:absolute;inset:-10% -20%;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--x,30%) var(--y,35%),rgba(192,154,88,.09),transparent 60%);transition:background .25s ease-out}

/* título palavra por palavra */
.mov .palavra{display:inline-block;opacity:0;transform:translateY(.45em);animation:subir .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 55ms + 120ms)}
@keyframes subir{to{opacity:1;transform:none}}
.mov .entrada .sobre,.mov .entrada .lead,.mov .entrada .acoes{opacity:0;animation:aparecer .8s ease-out forwards}
.mov .entrada .sobre{animation-delay:.05s}.mov .entrada .lead{animation-delay:.75s}.mov .entrada .acoes{animation-delay:.95s}
@keyframes aparecer{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* seções que aparecem ao rolar (só com o script ativo) */
.mov [data-mostrar]{opacity:0;transform:translateY(28px);transition:opacity .9s ease-out,transform .9s cubic-bezier(.2,.7,.2,1)}
.mov [data-mostrar].visto{opacity:1;transform:none}

/* ===== escada de frases (pegada Ladeira) ===== */
.escada{padding:110px 0}
.escada-lista{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.escada-lista li{font:700 clamp(24px,3.4vw,40px)/1.25 "Playfair Display",Georgia,serif;color:var(--mudo)}
.escada-lista b{color:var(--branco);font-weight:700}
.virada{margin:56px 0 0;font:italic 700 clamp(28px,4.2vw,52px)/1.15 "Playfair Display",Georgia,serif;color:var(--branco);max-width:20ch}
.tese{margin-top:18px;font-size:19px;color:var(--texto)}
.mov .escada-lista li,.mov .escada .virada,.mov .escada .tese{opacity:0;transform:translateX(-18px);transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.7,.2,1)}
.mov .escada.visto .escada-lista li,.mov .escada.visto .virada,.mov .escada.visto .tese{opacity:1;transform:none}
.mov .escada.visto .escada-lista li:nth-child(2){transition-delay:.35s}
.mov .escada.visto .escada-lista li:nth-child(3){transition-delay:.7s}
.mov .escada.visto .escada-lista li:nth-child(4){transition-delay:1.05s}
.mov .escada.visto .virada{transition-delay:1.7s}
.mov .escada.visto .tese{transition-delay:2.1s}
.virada{background:linear-gradient(var(--ouro),var(--ouro)) 0 100%/0 1px no-repeat;padding-bottom:6px;transition:background-size 1.1s ease .2s}
.mov .escada.visto .virada{background-size:100% 1px;transition:opacity .7s ease-out 1.7s,transform .7s 1.7s,background-size 1.2s ease 2.3s}

/* micro-história */
.historia p{font-size:18px}
.destaque-frase{color:var(--branco);font-size:20px!important}

/* faixa de palavras em movimento contínuo */
.faixa{overflow:hidden;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);padding:18px 0;margin:0 -24px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.faixa-trilho{display:flex;gap:56px;width:max-content;animation:faixa 38s linear infinite}
.faixa span{font:italic 700 26px "Playfair Display",Georgia,serif;color:#4a4842;white-space:nowrap}
.faixa span::after{content:"◆";font-style:normal;font-size:10px;color:var(--ouro);margin-left:56px;vertical-align:4px}
@keyframes faixa{to{transform:translateX(-50%)}}

/* botão com seta que anda no hover */
.btn-seta::after{content:"→";margin-left:10px;transition:transform .25s ease}
.btn-seta:hover::after{transform:translateX(5px)}
.btn{transition:background .15s,color .15s,border-color .15s,transform .2s}
.btn:active{transform:scale(.98)}

/* cartões dos planos sobem de leve */
.plano{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s}
.plano:hover{transform:translateY(-6px);border-color:#3a3933}

/* ===== resultados: comparador antes/depois ===== */
.resultados{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.comparador{--pos:50%;position:relative;margin:0;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--fundo2);border:1px solid var(--linha);user-select:none}
.comp-lado{position:absolute;inset:0;display:flex;align-items:flex-start;padding:14px;background-size:cover;background-position:center}
.comp-depois{background-color:#14130f;justify-content:flex-end}
.comp-antes{background-color:#1b1a16;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.comp-lado span{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--mudo);background:rgba(8,8,7,.6);padding:4px 8px;border-radius:999px}
.comparador::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--branco);box-shadow:0 0 0 1px rgba(0,0,0,.2);pointer-events:none}
.comparador::before{content:"↔";position:absolute;top:50%;left:var(--pos);z-index:2;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:var(--branco);color:var(--fundo);display:flex;align-items:center;justify-content:center;font-size:16px;pointer-events:none}
.comparador input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3}
.comparador figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(transparent,rgba(8,8,7,.85));font-size:13px;color:var(--texto);pointer-events:none}

/* ===== serviços (clubes) ===== */
.marca-logo img{display:block;height:35px;width:auto}
.servicos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.servico{background:var(--fundo2);border:1px solid var(--linha);border-radius:16px;padding:30px 28px;transition:border-color .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.servico:hover{border-color:#3a3933;transform:translateY(-4px)}
.servico-num{font:italic 700 56px/1 "Playfair Display",Georgia,serif;color:#34322d}
.servico h3{font-size:26px;margin:12px 0 8px}

@media (max-width:960px){.resultados{grid-template-columns:1fr 1fr}.servicos{grid-template-columns:1fr}}
@media (max-width:640px){.resultados{grid-template-columns:1fr}.faixa{margin:0 -16px}.escada{padding:72px 0}.virada{margin-top:40px}}
@media (prefers-reduced-motion:reduce){.faixa-trilho{animation:none}}
html,body{overflow-x:clip}

/* ===== topo novo: título com palavra que gira + semana animada ===== */
.hero-duplo{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:56px;align-items:center}
.hero-duplo h1{max-width:none;font-size:clamp(36px,4.6vw,60px)}
.giro{display:inline-block;color:var(--ouro-claro);font-style:italic}
.giro-palavra{display:inline-block;transition:opacity .32s ease,transform .32s cubic-bezier(.2,.7,.2,1)}
.giro-palavra.saindo{opacity:0;transform:translateY(-.35em)}
.giro-palavra.entrando{opacity:0;transform:translateY(.35em);transition:none}

.semana{margin:0;background:var(--fundo2);border:1px solid var(--linha);border-radius:18px;padding:24px 22px 22px}
.semana figcaption{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--mudo);margin-bottom:16px}
.semana ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.semana li{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.semana li span{font-size:12px;color:var(--mudo)}
.semana li i{font-style:normal;width:100%;aspect-ratio:1;border-radius:10px;border:1px solid #2c2b27;display:flex;align-items:center;justify-content:center;color:var(--fundo);font-weight:700;font-size:16px;background:var(--branco)}
.semana li.escorregou i{background:transparent;color:var(--ouro-claro);border:1px dashed var(--ouro);font-size:20px}
.semana li small{position:absolute;top:100%;margin-top:6px;font-size:10px;color:var(--ouro-claro);white-space:nowrap}
.semana-ajuste{margin:34px 0 0;font-size:15px;color:var(--texto)}
.semana-ajuste b{color:var(--branco);font-weight:500}
.semana-total{margin:8px 0 0;font-size:13px;color:var(--mudo)}
.semana-total b{color:var(--branco);font-weight:500;font-variant-numeric:tabular-nums}

/* a semana se preenche um dia de cada vez */
.mov .semana li i{opacity:0;transform:scale(.6);animation:marcar .45s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:calc(1.2s + var(--d) * .38s)}
.mov .semana li small{opacity:0;animation:aparecer .5s ease-out forwards;animation-delay:2.55s}
.mov .semana-ajuste{opacity:0;animation:aparecer .6s ease-out forwards;animation-delay:2.9s}
.mov .semana-total{opacity:0;animation:aparecer .6s ease-out forwards;animation-delay:4.1s}
.mov .semana{opacity:0;animation:aparecer .8s ease-out forwards;animation-delay:.6s}
@keyframes marcar{to{opacity:1;transform:none}}

@media (max-width:960px){.hero-duplo{grid-template-columns:1fr;gap:40px}.semana{max-width:460px}}
.giro{color:var(--branco);background:linear-gradient(var(--ouro),var(--ouro)) 0 92%/100% 1px no-repeat}
.mov .entrada h1{opacity:0;animation:aparecer .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.15s}

.marca-original{display:block;line-height:0;flex-shrink:0}.marca-original img{display:block;width:190px;height:auto;filter:invert(1);mix-blend-mode:screen}.entrar>.marca-original{margin-bottom:36px}@media(max-width:640px){.marca-original img{width:155px}}

.marca-original img{filter:none;mix-blend-mode:normal;width:215px;height:auto;object-fit:contain}.marca-original{filter:drop-shadow(0 2px 9px #0005)}@media(max-width:640px){.marca-original img{width:175px}}

.links-retrato{display:block;width:126px;height:126px;object-fit:cover;object-position:center 18%;border-radius:50%;margin:0 auto 24px;background:#181711;border:1px solid var(--linha)}