/* Maiara Faria · tokens medidos no logo MF (post 44) — pares conferidos em ../../branding/medir-tokens.mjs */
:root {
  --papel: #F3F9F8;
  --agua: #C5E8E8;
  --agua-media: #9BD4D4;   /* acento: só sobre fundo escuro, ≤10% */
  --turquesa: #2C8D8F;     /* só título grande e ícone sobre claro */
  --petroleo: #10555C;
  --profundo: #0A3337;
  --branco: #FFFFFF;
  --titulo: "Bricolage Grotesque", "Arial Black", sans-serif;
  --corpo: "Figtree", system-ui, sans-serif;
  --raio-folha: 0 46% 0 46%;
  --largura: 1180px;
  --sombra: 0 24px 60px -28px rgba(10, 51, 55, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--profundo); font: 400 1.0625rem/1.65 var(--corpo); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; margin: 0; color: var(--petroleo); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.3rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: inherit; }
.sobretitulo { font: 600 .82rem/1.2 var(--corpo); text-transform: uppercase; letter-spacing: .14em; color: var(--petroleo); margin: 0 0 1rem; }

/* botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 54px; padding: .9rem 1.6rem; border-radius: 999px; background: var(--petroleo); color: var(--branco); font: 600 1rem/1.2 var(--corpo); text-decoration: none; box-shadow: 0 14px 30px -16px rgba(16, 85, 92, .9); transition: transform .2s, background .2s; }
.botao:hover { background: var(--profundo); transform: translateY(-2px); }
.botao:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 3px; }
.botao-pequeno { min-height: 44px; padding: .6rem 1.2rem; font-size: .92rem; }
.botao-claro { background: var(--agua-media); color: var(--profundo); box-shadow: none; }
.botao-claro:hover { background: var(--agua); }
.botao-contorno { background: transparent; color: var(--petroleo); border: 2px solid var(--petroleo); box-shadow: none; }
.botao-contorno:hover { background: var(--petroleo); color: var(--branco); }
.link-seta { font-weight: 600; color: var(--petroleo); text-decoration: none; border-bottom: 2px solid var(--agua-media); padding-bottom: 2px; }
.link-seta::after { content: " →"; }

/* topo */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 2rem; padding: .7rem clamp(1rem, 4vw, 3rem); background: rgba(243, 249, 248, .86); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(16, 85, 92, .1); }
.topo-marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; font: 800 1.15rem/1 var(--titulo); color: var(--petroleo); }
.topo-marca img { width: 40px; height: 40px; }
.topo-links { display: flex; gap: 1.6rem; margin-left: auto; }
.topo-links a { text-decoration: none; font-weight: 600; font-size: .95rem; opacity: .8; }
.topo-links a:hover { opacity: 1; }

/* hero */
.hero { max-width: var(--largura); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.2rem, 4vw, 2rem) clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { margin-bottom: 1.4rem; }
.hero-sub { font-size: 1.2rem; max-width: 34ch; }
.hero-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem; margin: 2rem 0 1.8rem; }
.selos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.selo { padding: .4rem .85rem; border-radius: 999px; background: var(--agua); font-size: .85rem; font-weight: 600; color: var(--profundo); }
.selo-pendente { background: transparent; border: 1.5px dashed var(--petroleo); }

.hero-fotos { position: relative; aspect-ratio: 4 / 5; }
.folha { margin: 0; overflow: hidden; border-radius: var(--raio-folha); box-shadow: var(--sombra); position: relative; }
.folha img { width: 100%; height: 100%; object-fit: cover; }
.folha-grande { position: absolute; inset: 0 0 0 12%; }
.folha-grande img { object-position: 50% 20%; }
.folha-contorno { position: absolute; inset: -4% 6% 6% 4%; border: 2px solid var(--turquesa); border-radius: var(--raio-folha); opacity: .55; }
.cartao-treino { position: absolute; left: -2%; bottom: -6%; width: 40%; margin: 0; background: var(--branco); padding: .55rem .55rem .7rem; border-radius: 18px; box-shadow: var(--sombra); transform: rotate(-3deg); }
.cartao-treino img { border-radius: 12px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; width: 100%; }
.cartao-treino figcaption { font-size: .78rem; font-weight: 600; line-height: 1.3; padding: .55rem .2rem 0; color: var(--petroleo); }

/* entrada do hero (CSS, uma vez) */
.hero-texto > *, .hero-fotos > * { animation: sobe .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero-texto > :nth-child(2) { animation-delay: .08s; }
.hero-texto > :nth-child(3) { animation-delay: .16s; }
.hero-texto > :nth-child(4) { animation-delay: .24s; }
.hero-texto > :nth-child(5) { animation-delay: .32s; }
.folha-grande { animation-delay: .15s; }
.cartao-treino { animation-name: sobe-girado; animation-delay: .45s; }
.folha-contorno { animation-delay: .3s; }
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } }
@keyframes sobe-girado { from { opacity: 0; transform: translateY(24px) rotate(-8deg); } to { transform: rotate(-3deg); } }

/* ícones (sprite Lucide) */
.ico { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.folha-ico { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0 50% 0 50%; background: var(--agua); color: var(--petroleo); flex: none; }
.folha-ico .ico { width: 1.45rem; height: 1.45rem; }

/* palco do hero: Aurora (21st.dev, kevingirelli, MIT) portada para CSS — 3 luzes radiais movidas só com transform */
.palco { position: relative; isolation: isolate; overflow: hidden; }
.aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.aurora span { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; opacity: .55; animation: aurora 24s ease-in-out infinite; will-change: transform; }
.aurora span:nth-child(1) { left: -18%; top: -35%; background: radial-gradient(closest-side, rgba(155, 212, 212, .75), transparent); }
.aurora span:nth-child(2) { left: 45%; top: -20%; background: radial-gradient(closest-side, rgba(197, 232, 232, .9), transparent); animation-duration: 32s; animation-delay: -9s; }
.aurora span:nth-child(3) { left: 20%; top: 40%; background: radial-gradient(closest-side, rgba(44, 141, 143, .28), transparent); animation-duration: 40s; animation-delay: -20s; }
@keyframes aurora {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  33% { transform: translate3d(8%, 6%, 0) rotate(12deg) scale(1.08); }
  66% { transform: translate3d(-6%, 10%, 0) rotate(-8deg) scale(.96); }
}
.pausado .aurora span, .pausado .objeto-hero, .faixa.pausado .faixa-trilho { animation-play-state: paused; }

/* título do hero: Soft Blur In (21st.dev, educalvolpz, MIT) por palavra */
.palavra { display: inline-block; animation: desfoca .9s cubic-bezier(.22, 1, .36, 1) both; }
.pronto .palavra { animation: none; }
@keyframes desfoca { from { opacity: 0; transform: translateY(16px); filter: blur(10px); } }

/* objetos recortados (fotos livres do Unsplash, fundo removido) */
.objeto { position: absolute; pointer-events: none; user-select: none; height: auto; }
.objeto-hero { width: 46%; right: -10%; bottom: -12%; z-index: 3; transform: rotate(-14deg); filter: drop-shadow(0 22px 26px rgba(10, 51, 55, .35)); animation: flutua 7s ease-in-out infinite; }
@keyframes flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.para-quem { position: relative; }
.objeto-fantasma { width: min(34%, 380px); right: 2%; top: 2rem; z-index: 0; opacity: .16; transform: rotate(10deg); filter: grayscale(1) sepia(1) hue-rotate(130deg) saturate(1.6); }
.para-quem .secao-cabeca, .para-quem .situacoes { position: relative; z-index: 1; }
.objeto-duvidas { position: static; display: block; width: 78%; margin: 2.6rem 0 0 -4%; transform: rotate(-8deg); filter: drop-shadow(0 20px 24px rgba(10, 51, 55, .28)); }

/* botão principal: Shine Border (21st.dev, dillionverma, MIT) */
.botao-brilho { position: relative; isolation: isolate; }
.botao-brilho::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 2px; background: radial-gradient(transparent, transparent, var(--agua-media), var(--branco), transparent, transparent) 0 0 / 300% 300%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: brilho 6s linear infinite; z-index: -1; }
@keyframes brilho { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }

/* faixa corrida: Infinite Slider (21st.dev, ibelick, MIT) em CSS */
.faixa { background: var(--petroleo); color: var(--agua); overflow: hidden; padding: 1.05rem 0; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.faixa-trilho { display: flex; width: max-content; animation: corre 42s linear infinite; }
.faixa:hover .faixa-trilho { animation-play-state: paused; }
.faixa-grupo { display: flex; flex: none; }
.faixa-item { display: inline-flex; align-items: center; gap: .6rem; padding: 0 1.6rem; font: 800 clamp(1rem, 1.8vw, 1.25rem)/1.2 var(--titulo); white-space: nowrap; }
.faixa-item .ico { color: var(--agua-media); width: 1.4em; height: 1.4em; }
.faixa-item::after { content: ""; width: 6px; height: 6px; border-radius: 0 50% 0 50%; background: var(--agua-media); margin-left: 2.2rem; opacity: .7; }
@keyframes corre { to { transform: translateX(-50%); } }

/* seções */
.secao { max-width: var(--largura); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) clamp(1.2rem, 4vw, 2rem); }
.secao-cabeca { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.secao-escura { max-width: none; background: var(--profundo); color: var(--papel); padding-inline: max(clamp(1.2rem, 4vw, 2rem), calc((100% - var(--largura)) / 2 + 2rem)); }
.secao-escura h2, .secao-escura h3 { color: var(--papel); }
.secao-escura .sobretitulo { color: var(--agua-media); }
.secao-agua { max-width: none; background: linear-gradient(180deg, var(--agua), #DDF1F0); padding-inline: max(clamp(1.2rem, 4vw, 2rem), calc((100% - var(--largura)) / 2 + 2rem)); }

/* para quem */
.situacoes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.situacao { grid-column: span 2; background: var(--branco); border-radius: 22px; padding: 1.6rem 1.5rem 1.4rem; border: 1px solid rgba(16, 85, 92, .1); }
.situacao:nth-child(4), .situacao:nth-child(5) { grid-column: span 3; }
.situacao { transition: transform .25s, box-shadow .25s; }
.situacao:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.situacao-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.situacao-num { font: 800 1.6rem/1 var(--titulo); color: var(--turquesa); opacity: .55; }
.situacao h3 { margin-bottom: .6rem; }
.situacao p { margin: 0; font-size: 1rem; }

/* etapas */
.etapas { list-style: none; padding: 0; margin: 0 0 3rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: e; }
.etapa { position: relative; padding: 0 1.6rem 0 0; }
.etapa::before { content: ""; position: absolute; top: 1.6rem; left: 4rem; right: .8rem; border-top: 2px dashed rgba(155, 212, 212, .45); }
.etapa:last-child::before { display: none; }
.etapa-num { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 0 50% 0 50%; background: var(--agua-media); color: var(--profundo); margin-bottom: 1.1rem; }
.etapa-num .ico { width: 1.5rem; height: 1.5rem; }
.etapa-passo { display: block; font: 600 .75rem/1 var(--corpo); text-transform: uppercase; letter-spacing: .14em; color: var(--agua-media); margin-bottom: .55rem; }
/* Dot Pattern (21st.dev, dillionverma, MIT) em CSS: pontos discretos na seção escura */
.secao-escura { background-image: radial-gradient(rgba(155, 212, 212, .16) 1.2px, transparent 1.3px); background-size: 22px 22px; background-color: var(--profundo); }
.etapa h3 { margin-bottom: .5rem; }
.etapa p { margin: 0; color: var(--agua); font-size: 1rem; }

/* sobre */
.sobre { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.folha-sobre { aspect-ratio: 1; }
.folha-sobre img { object-position: 50% 12%; }
.sobre h2 { margin-bottom: 1.4rem; }
.credenciais { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .7rem; }
.credencial { display: flex; align-items: center; gap: .9rem; background: var(--branco); border: 1px solid rgba(16, 85, 92, .1); border-radius: 16px; padding: .75rem 1rem; }
.credencial > .ico { width: 1.7rem; height: 1.7rem; color: var(--turquesa); }
.credencial strong { display: block; font-family: var(--titulo); color: var(--petroleo); line-height: 1.25; }
.credencial span { font-size: .88rem; opacity: .8; }
.citacao { margin: 2rem 0 0; padding: 1.4rem 0 0 1.6rem; border-left: 4px solid var(--turquesa); }
.citacao p { font: 400 1.3rem/1.45 var(--titulo); color: var(--petroleo); margin-bottom: .6rem; }
.citacao cite { font-style: normal; font-weight: 600; font-size: .9rem; opacity: .75; }

/* modalidades */
.modalidades { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.modalidade { background: var(--branco); border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: .8fr 1.2fr; border: 1px solid rgba(16, 85, 92, .1); }
.modalidade-foto { margin: 0; position: relative; min-height: 100%; }
.modalidade-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.modalidade-corpo { padding: 1.8rem 1.6rem; display: flex; flex-direction: column; }
.modalidade-titulo { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.modalidade-titulo .folha-ico { width: 2.6rem; height: 2.6rem; }
.modalidade-corpo h3 { font-size: 1.5rem; }
.inclui { list-style: none; padding: 0; margin: .2rem 0 1.6rem; display: grid; gap: .45rem; }
.inclui li { padding-left: 1.6rem; position: relative; font-size: .97rem; }
.inclui li::before { content: ""; position: absolute; left: 0; top: .45em; width: .8rem; height: .8rem; background: var(--turquesa); border-radius: 0 50% 0 50%; }
.modalidade .botao { margin-top: auto; align-self: flex-start; }

/* histórias (só aparece com autorização) */
.historias { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.historia { background: var(--branco); border-radius: 22px; padding: 1.6rem; }
.historia-nome { font-weight: 600; margin: 0; }

/* reels */
.instagram { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.instagram-lado h2 { margin-bottom: 1.2rem; }
.instagram-lado p:not(.sobretitulo) { margin-bottom: 1.8rem; max-width: 36ch; }
.reels { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 1.6rem; justify-content: end; }
.reel { margin: 0; border-radius: 20px; overflow: hidden; background: var(--agua); box-shadow: var(--sombra); aspect-ratio: 9 / 15.5; }
.reel iframe { width: 100%; height: 100%; border: 0; background: var(--agua); display: block; }

/* cidades */
.cidades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cidade { background: var(--branco); border-radius: 22px; padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: .3rem; }
.cidade h3 { font-size: 1.4rem; }
.cidade-ico { width: 1.9rem; height: 1.9rem; color: var(--turquesa); margin-bottom: .6rem; }
.cidade-online .cidade-ico { color: var(--agua-media); }
.cidade p { color: var(--petroleo); font-weight: 600; font-size: .95rem; margin-bottom: 1.2rem; }
.cidade .botao { margin-top: auto; min-height: 48px; font-size: .95rem; padding: .7rem 1.1rem; }
.cidade-online { background: var(--profundo); }
.cidade-online h3 { color: var(--papel); }
.cidade-online p { color: var(--agua-media); }
.cidade-online .botao-contorno { color: var(--agua-media); border-color: var(--agua-media); }
.cidade-online .botao-contorno:hover { background: var(--agua-media); color: var(--profundo); }

/* dúvidas */
.duvidas { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.duvidas-lado { position: sticky; top: 6rem; }
.duvidas-lado h2 { margin-bottom: 1.2rem; }
.duvidas-lado p { margin-bottom: 1.6rem; }
.pergunta { border-bottom: 1px solid rgba(16, 85, 92, .18); padding: 1.3rem 0; }
.pergunta summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; font: 800 1.15rem/1.3 var(--titulo); color: var(--petroleo); }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--turquesa); transition: transform .2s; }
.pergunta[open] summary::after { transform: rotate(45deg); }
.pergunta p { margin: .9rem 0 0; max-width: 60ch; }

/* fecho */
.fecho { background: var(--profundo); color: var(--papel); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; padding: clamp(4rem, 8vw, 6rem) max(clamp(1.2rem, 4vw, 2rem), calc((100% - var(--largura)) / 2 + 2rem)); }
.fecho-logo { width: 150px; margin-bottom: 1.8rem; }
.fecho h2 { color: var(--papel); font-size: clamp(2.2rem, 4.6vw, 3.8rem); margin-bottom: 1rem; }
.fecho p { color: var(--agua); font-size: 1.2rem; margin-bottom: 2rem; }
.folha-fecho { aspect-ratio: 10 / 11; max-width: 440px; justify-self: end; width: 100%; }
.folha-fecho img { object-position: 50% 15%; }

/* rodapé */
.rodape { background: var(--profundo); color: var(--agua); border-top: 1px solid rgba(197, 232, 232, .15); }
.rodape-linha { max-width: var(--largura); margin: 0 auto; padding: 2rem clamp(1.2rem, 4vw, 2rem); display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.rodape-linha img { width: 44px; }
.rodape-linha strong { color: var(--papel); font-family: var(--titulo); }
.rodape-linha p { margin: 0; font-size: .92rem; }
.rodape-contato { margin-left: auto; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.rodape-contato a { text-decoration: none; font-weight: 600; color: var(--agua-media); }
.assinatura-studio { border-top: 1px solid rgba(197, 232, 232, .12); text-align: center; padding: .9rem 1rem 1.1rem; }
.assinatura-studio a { font: 400 .75rem/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; color: rgba(197, 232, 232, .6); text-decoration: none; }
.assinatura-studio a:hover { color: var(--agua-media); }

/* WhatsApp flutuante: só no celular */
.whats-flutuante { display: none; position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 58px; height: 58px; border-radius: 50%; background: var(--petroleo); color: var(--branco); place-items: center; box-shadow: 0 12px 28px -10px rgba(10, 51, 55, .8); }

/* revelação ao rolar (só com JS e sem "menos movimento") */
.anima .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.anima .reveal.visto { opacity: 1; transform: none; }
.anima .situacao.reveal:nth-child(2), .anima .etapa.reveal:nth-child(2), .anima .cidade.reveal:nth-child(2) { transition-delay: .08s; }
.anima .situacao.reveal:nth-child(3), .anima .etapa.reveal:nth-child(3), .anima .cidade.reveal:nth-child(3) { transition-delay: .16s; }
.anima .etapa.reveal:nth-child(4), .anima .cidade.reveal:nth-child(4) { transition-delay: .24s; }

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

/* tablet */
@media (max-width: 980px) {
  .topo-links { display: none; }
  .topo .botao-pequeno { margin-left: auto; }
  .hero { grid-template-columns: 1fr; }
  .hero-fotos { max-width: 520px; width: 100%; justify-self: center; }
  .situacoes { grid-template-columns: 1fr 1fr; }
  .situacao, .situacao:nth-child(4), .situacao:nth-child(5) { grid-column: auto; }
  .situacao:nth-child(5) { grid-column: 1 / -1; }
  .etapas { grid-template-columns: 1fr 1fr; gap: 2.4rem 1.6rem; }
  .etapa::before { display: none; }
  .sobre, .duvidas, .fecho, .instagram { grid-template-columns: 1fr; }
  .reels { justify-content: start; }
  .duvidas-lado { position: static; }
  .objeto-duvidas { display: none; }
  .modalidades { grid-template-columns: 1fr; }
  .cidades { grid-template-columns: 1fr 1fr; }
  .folha-fecho { justify-self: start; }
}

/* celular */
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .topo { gap: 1rem; padding: .6rem 1rem; }
  .topo-marca span { display: none; }
  .hero { padding-top: 1.8rem; gap: 2.6rem; }
  .hero-sub { font-size: 1.08rem; }
  .hero-acoes .botao { width: 100%; }
  .cartao-treino { width: 44%; left: -1%; bottom: -5%; }
  .situacoes { grid-template-columns: 1fr; }
  .situacao:nth-child(5) { grid-column: auto; }
  .etapas { grid-template-columns: 1fr; }
  .modalidade { grid-template-columns: 1fr; }
  .modalidade-foto { aspect-ratio: 4 / 3; }
  .reels { grid-template-columns: 1fr; justify-items: center; }
  .reel { width: 100%; max-width: 340px; }
  .reel:nth-child(n+2) { display: none; }
  .cidades { grid-template-columns: 1fr; }
  .rodape-contato { margin-left: 0; }
  .whats-flutuante { display: grid; }
  .fecho .botao { width: 100%; }
}