:root{color-scheme:light dark;--raio-controle:14px;--raio-botao:18px;--raio-cartao:26px;--raio-figurinha:22px;--raio-video:24px;--raio-folha:32px;--alvo:44px;--alvo-botao:56px;--curva:cubic-bezier(.2, .8, .2, 1);--curva-entrada:cubic-bezier(.16, 1, .3, 1);--rapido:180ms;--medio:240ms;--longo:360ms;--faixa-fundo:#251119;--faixa-texto:#F3E1E8;--faixa-tinta:#FFF4EE;--faixa-apoio:#CBB0BC;--faixa-marca:#FF8FB7;--branco:#FFFFFF;--fonte-display:'Bricolage Grotesque', 'Bricolage Reserva', system-ui, sans-serif;--fonte-texto:'Figtree', 'Figtree Reserva', system-ui, sans-serif;--fundo:#FFF4EE;--cartao:#FFFFFF;--elevado:#FFFFFF;--recesso:#FCE6DB;--linha:#F0DCD3;--borda:#9A7585;--tinta:#210716;--texto:#3B1A2B;--texto2:#7A5566;--desativado:#9A7D8A;--foco:#C8125A;--marca:#C8125A;--sobre-marca:#FFFFFF;--marca-cheia:#E8336D;--sobre-marca-cheia:#210716;--marca-wash:#FFE4EC;--suco-1:#FF7A59;--suco-2:#E8336D;--sobre-suco:#210716;--energia:#E2562C;--energia-txt:#C8125A;--energia-acao:#FF7A59;--sobre-energia:#210716;--energia-wash:#FFE5DA;--sol:#FFD25E;--sobre-sol:#210716;--ouro:#745000;--ouro-txt:#745000;--ouro-wash:#FFF0C2;--menta:#7FD8B4;--sobre-menta:#210716;--sucesso:#0A6E4E;--sucesso-wash:#DDF5EA;--alerta:#A3122A;--alerta-wash:#FFE3E3;--mapa-pele:#F6E4DA;--mapa-contorno:#E3C3B4;--mapa-vazio:#EFD3C6;--mapa-foco:#FFC6D9;--mapa-sulco:#FFF4EE;--mapa-cabelo:#3A2230;--sombra-1:0 1px 2px #21071610, 0 1px 1px #2107160A;--sombra-2:0 6px 20px #2A0F1E12;--sombra-3:0 24px 56px -20px #2A0F1E47;--sombra-suco:0 10px 24px #E8336D4D;--grad-suco:linear-gradient(135deg, #FF7A59, #E8336D);--grad-festa:linear-gradient(160deg, #FF7A59, #E8336D);--grad-traco:linear-gradient(90deg, #E2562C, #E8336D);}
@media (prefers-color-scheme: dark){:root{--fundo:#1A0B13;--cartao:#251119;--elevado:#301A24;--recesso:#311A25;--linha:#3E2733;--borda:#8E6B7B;--tinta:#FFF4EE;--texto:#F3E1E8;--texto2:#CBB0BC;--desativado:#7F6371;--foco:#FF8FB7;--marca:#FF8FB7;--sobre-marca:#210716;--marca-cheia:#E8336D;--sobre-marca-cheia:#210716;--marca-wash:#3D1427;--suco-1:#FF7A59;--suco-2:#E8336D;--sobre-suco:#210716;--energia:#FF9A6B;--energia-txt:#FF8FB7;--energia-acao:#FF7A59;--sobre-energia:#210716;--energia-wash:#3E1A12;--sol:#FFD25E;--sobre-sol:#210716;--ouro:#FFD25E;--ouro-txt:#FFD25E;--ouro-wash:#3A2A0E;--menta:#3CC793;--sobre-menta:#210716;--sucesso:#29A583;--sucesso-wash:#0F3226;--alerta:#E45D58;--alerta-wash:#3D1418;--mapa-pele:#3A2430;--mapa-contorno:#5A3D4B;--mapa-vazio:#4A2F3C;--mapa-foco:#64223F;--mapa-sulco:#251119;--mapa-cabelo:#120609;--sombra-1:none;--sombra-2:none;--sombra-3:0 0 0 1px #3E2733;--sombra-suco:0 8px 28px #E8336D47;--grad-suco:linear-gradient(135deg, #FF7A59, #E8336D);--grad-festa:linear-gradient(160deg, #FF7A59, #E8336D);--grad-traco:linear-gradient(90deg, #FF7A59, #E8336D);}}
/* Site de busca da marca, rota Pop suculento (aprovada em 31/10). Cor só por variável dos papéis do
   @fiorza/tokens (estilo/pop.ts), claro e escuro pelo prefers-color-scheme. Regras do contrato da raia M:
   nada abaixo de 15 px, alvo de 44 px, botão principal no suco com texto amora madura (branco reprova),
   estado nunca só por cor, festa só com motivo, movimento com "reduzir movimento". Primeiro o celular; o
   computador ganha colunas (nunca uma coluna de celular esticada). */

@font-face { font-family: 'Bricolage Grotesque'; src: url('/fontes/bricolage.9b047d0ee4.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fontes/figtree.550f50f620.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap; }
/* Reservas com a medida das fontes do site (o texto não pula quando a fonte web chega): Arial ajustada
   pela largura média ponderada, como o capsize; números de ferramentas/metricas-fonte.py (31/10/2026). */
@font-face { font-family: 'Bricolage Reserva'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial');
  font-weight: 800; size-adjust: 99.16%; ascent-override: 93.79%; descent-override: 27.23%; line-gap-override: 0%; }
@font-face { font-family: 'Figtree Reserva'; src: local('Arial'), local('ArialMT');
  font-weight: 400 800; size-adjust: 101.17%; ascent-override: 93.91%; descent-override: 24.71%; line-gap-override: 0%; }

/* o mapa muscular detalhado (mapa/mapa.ts) usa estes nomes; aqui eles viram papéis do contrato */
:root { --corpo: var(--mapa-pele); --corpo-linha: var(--mapa-contorno); --cabelo: var(--mapa-cabelo); --musculo: var(--mapa-vazio);
  --gluteo-1: var(--suco-1); --gluteo-2: var(--suco-2); --gluteo-borda: var(--marca); --hachura: var(--suco-1);
  --borda-cartao: transparent; }
@media (prefers-color-scheme: dark) { :root { --borda-cartao: var(--linha); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte-texto);
  font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; }
a { color: var(--marca); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
svg { max-width: 100%; }
::selection { background: var(--marca-wash); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 8px; }
main:focus { outline: none; }
[id] { scroll-margin-top: 24px; }
.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -120px; z-index: 50; padding: 12px 18px; border-radius: var(--raio-controle);
  background: var(--marca); color: var(--sobre-marca); font-weight: 700; text-decoration: none; }
.pular:focus { top: 12px; }
.moldura { width: min(100% - 40px, 1200px); margin-inline: auto; }
@media (min-width: 760px) { .moldura { width: min(100% - 64px, 1200px); } }

/* ---------- tipo ---------- */
.kicker { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 14px; border-radius: 999px;
  background: var(--marca-wash); color: var(--marca); font: 700 15px/20px var(--fonte-texto); letter-spacing: .08em; text-transform: uppercase; }
.lead { margin-top: 18px; font-size: 19px; line-height: 1.55; color: var(--texto); max-width: 60ch; text-wrap: pretty; }
@media (min-width: 1024px) { .lead { font-size: 21px; } }
.apoio { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--texto2); max-width: 80ch; }
.texto-largo { margin-top: 16px; max-width: 70ch; text-wrap: pretty; }
.texto-largo + .texto-largo { margin-top: 12px; }
.h-cartao { display: flex; align-items: center; gap: 10px; font: 700 20px/26px var(--fonte-texto); color: var(--tinta); }
.h-cartao .ic { color: var(--marca); }
.pagina-topo h1, .hub-texto h1, .app-topo h1, .guia-topo h1, .teste-topo h1 { font-family: var(--fonte-display); font-weight: 800;
  font-size: clamp(40px, 6vw, 76px); line-height: .98; letter-spacing: -.035em; color: var(--tinta); margin-top: 14px; text-wrap: balance; }
.pagina-topo { margin-top: 28px; max-width: 900px; }
.pagina-topo > h1:first-child { margin-top: 0; }
.destaque { margin-top: 20px; padding: 18px 22px; border-radius: 20px; background: var(--marca-wash); color: var(--tinta);
  font: 600 18px/1.5 var(--fonte-texto); max-width: 70ch; }

/* ---------- botões ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--alvo-botao); padding: 0 24px;
  border-radius: var(--raio-botao); font: 700 17px/22px var(--fonte-texto); text-align: center; text-decoration: none; isolation: isolate;
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), background-color var(--rapido) var(--curva); }
.btn .ic { width: 20px; height: 20px; transition: transform var(--medio) var(--curva); }
.btn-acao { background: var(--grad-suco); color: var(--sobre-suco); box-shadow: var(--sombra-suco); }
.btn-acao::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--branco); opacity: 0; transition: opacity var(--rapido) var(--curva); }
.btn-acao:hover { transform: translateY(-2px); }
.btn-acao:hover .ic { transform: translateX(3px); }
.btn-acao:active { transform: scale(.97); }
.btn-acao:active::after { opacity: .1; }
.btn-sec { background: var(--cartao); color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--borda); }
.btn-sec:hover { box-shadow: inset 0 0 0 2px var(--tinta); }
.btn-sec:active { transform: scale(.97); }
.btn-grande { min-height: 60px; padding: 0 28px; font-size: 18px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- cabeçalho ---------- */
.topo { position: relative; z-index: 5; background: var(--fundo); }
.topo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 12px 0 8px; }
.marca { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); text-decoration: none; }
.assinatura { display: block; height: 36px; width: auto; }
.simbolo { width: 28px; height: 28px; flex: none; }
/* no celular a navegação rola de lado; a borda direita esmaece para mostrar que tem mais */
.nav { order: 3; flex: 1 0 100%; overflow-x: auto; margin: 0 -4px; padding: 2px 4px 6px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent); mask-image: linear-gradient(to right, black calc(100% - 48px), transparent); }
.nav::-webkit-scrollbar { display: none; }
.nav ul { padding-right: 48px; }
.nav ul, .linguas ul { display: flex; gap: 4px; list-style: none; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; white-space: nowrap;
  font: 600 16px/20px var(--fonte-texto); color: var(--texto); text-decoration: none; transition: background-color var(--rapido) var(--curva); }
.nav a:hover { background: var(--recesso); color: var(--tinta); }
.nav a[aria-current] { background: var(--tinta); color: var(--fundo); }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.linguas ul { padding: 4px; border-radius: 999px; background: var(--recesso); gap: 2px; }
.linguas a { display: grid; place-items: center; min-width: 44px; min-height: 40px; padding: 0 10px; border-radius: 999px;
  font: 700 15px/20px var(--fonte-texto); color: var(--texto2); text-decoration: none; }
.linguas a:hover { color: var(--tinta); }
.linguas a[aria-current] { background: var(--cartao); color: var(--tinta); box-shadow: var(--sombra-1), inset 0 0 0 1.5px var(--borda-cartao); }
.btn-topo { min-height: 44px; padding: 0 18px; font-size: 16px; }
/* no celular o botão do topo não cabe ao lado das línguas: o app vira o 1º item da linha de navegação */
.nav a.nav-app { background: var(--grad-suco); color: var(--sobre-suco); font-weight: 700; }
.nav a.nav-app:hover { background: var(--grad-suco); color: var(--sobre-suco); }
@media (max-width: 759px) { .btn-topo { display: none; } .assinatura { height: 32px; } }
@media (min-width: 760px) { .nav-app-celular { display: none; } }
@media (min-width: 1100px) {
  .topo-linha { flex-wrap: nowrap; min-height: 84px; padding: 0; }
  .nav { order: 0; flex: 0 1 auto; overflow: visible; margin: 0 0 0 16px; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .nav ul { padding-right: 0; }
}

/* ---------- migalha ---------- */
.migalha ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin-top: 18px; }
.migalha li { display: inline-flex; align-items: center; gap: 6px; }
.migalha a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--recesso);
  color: var(--tinta); font: 600 15px/20px var(--fonte-texto); text-decoration: none; }
.migalha a:hover { box-shadow: inset 0 0 0 1.5px var(--borda); }
.migalha [aria-current] { padding-left: 2px; color: var(--texto2); font: 600 15px/20px var(--fonte-texto); }
.migalha .sep { width: 16px; height: 16px; color: var(--texto2); }

/* ---------- seções e grades ---------- */
.secao, .ex-secao { margin-top: 64px; }
@media (min-width: 1024px) { .secao, .ex-secao { margin-top: 88px; } }
.cab-secao { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 16px; }
.cab-secao h2, .guia-secao h2, .porque h2 { font-family: var(--fonte-display); font-weight: 800; font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.02; letter-spacing: -.03em; color: var(--tinta); text-wrap: balance; }
.cab-secao .kicker { margin-bottom: 12px; }
.cab-sub { margin-top: 8px; color: var(--texto2); font-size: 17px; line-height: 25px; max-width: 60ch; }
.cab-com-acao .btn { min-height: 44px; padding: 0 18px; font-size: 16px; }
.contagem { display: inline-grid; place-items: center; min-width: 40px; height: 34px; margin-left: 8px; padding: 0 12px; border-radius: 999px;
  background: var(--grad-suco); color: var(--sobre-suco); font: 800 18px/20px var(--fonte-display); letter-spacing: 0; vertical-align: 6px; }
.grade { display: grid; gap: 14px; margin-top: 24px; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .grade-2, .grade-3, .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .grade { gap: 18px; }
  .grade-3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .grade-4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}

/* ---------- cartões ---------- */
.cartao-link { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 22px; border-radius: var(--raio-cartao);
  background: var(--cartao); box-shadow: var(--sombra-2), inset 0 0 0 1px var(--borda-cartao);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva); }
.cartao-link:not(.sem-link):hover { transform: translateY(-3px); box-shadow: var(--sombra-3), inset 0 0 0 1.5px var(--borda); }
.cartao-link:not(.sem-link):active { transform: scale(.985); }
.ic-caixa { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--marca-wash); color: var(--marca); margin-bottom: 8px; }
.ic-caixa .ic { width: 24px; height: 24px; }
.cartao-t { font: 700 19px/24px var(--fonte-texto); color: var(--tinta); text-wrap: pretty; }
.cartao-t a { color: inherit; text-decoration: none; }
.cartao-t a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.cartao-d { font-size: 16px; line-height: 23px; color: var(--texto2); }
.cartao-rodape { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cartao-seta { margin-top: auto; padding-top: 8px; align-self: flex-end; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--recesso); color: var(--tinta); transition: background var(--medio) var(--curva), color var(--medio) var(--curva), transform var(--medio) var(--curva); }
.cartao-seta .ic { width: 18px; height: 18px; }
.cartao-link:not(.sem-link):hover .cartao-seta { background: var(--grad-suco); color: var(--sobre-suco); transform: translateX(2px); }
.cartao-ex { min-height: 0; }
.cartao-compacto { padding: 16px 18px; gap: 4px; border-radius: 20px; }
.cartao-compacto .cartao-t { font-size: 17px; line-height: 23px; }
.cartao-compacto .cartao-d { font-size: 15px; line-height: 21px; }
.cartao-compacto .cartao-seta { display: none; }
.cartao-largo { min-height: 0; }
.cartao-destaque { background: var(--grad-suco); box-shadow: var(--sombra-suco); }
.cartao-destaque .cartao-t, .cartao-destaque .cartao-d { color: var(--sobre-suco); }
.cartao-destaque .ic-caixa, .cartao-destaque .cartao-seta { background: color-mix(in srgb, var(--branco) 45%, transparent); color: var(--sobre-suco); }
/* o mapa do cartão vai num ladrilho no alto, como o ícone dos outros cartões (o corpo inteiro, nunca recortado) */
.cartao-visual { display: flex; align-self: flex-start; margin: 0 0 8px; padding: 10px 16px; border-radius: 18px;
  background: radial-gradient(90% 90% at 50% 35%, var(--marca-wash), var(--recesso) 78%); }
@supports selector(:has(a)) {
  .cartao-link .cartao-t a:focus-visible { outline: none; }
  .cartao-link:has(a:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
}
.etiqueta { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--recesso); color: var(--tinta); font: 600 15px/20px var(--fonte-texto); }
.etiqueta b { font-weight: 800; }
.etiqueta-sol { background: var(--sol); color: var(--sobre-sol); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 4px; }

/* ---------- nota ---------- */
.nota { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 16px 18px; border-radius: 18px;
  background: var(--marca-wash); color: var(--tinta); font-size: 16px; line-height: 24px; }
.nota > .ic { color: var(--marca); width: 22px; height: 22px; margin-top: 1px; }
.nota-alerta { background: var(--alerta-wash); }
.nota-alerta > .ic { color: var(--alerta); }
.pilha-notas { display: grid; gap: 12px; margin-top: 16px; }
.pilha-notas .nota { margin-top: 0; }

/* ---------- página do exercício ---------- */
.ex-topo { display: grid; gap: 28px; margin-top: 18px; }
.h-ex { font-family: var(--fonte-display); font-weight: 800; font-size: clamp(40px, 5.4vw, 68px); line-height: .98;
  letter-spacing: -.035em; color: var(--tinta); margin-top: 14px; text-wrap: balance; overflow-wrap: break-word; }
.ex-lado .lead { font-size: 19px; }
.musculos-lista { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; margin-top: 22px; padding: 18px 0;
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.musculos-lista dt { display: flex; align-items: center; font-size: 16px; line-height: 24px; color: var(--texto2); }
.musculos-lista dd { font-size: 17px; line-height: 24px; font-weight: 700; color: var(--tinta); }
.ponto { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--grad-suco); margin-right: 10px; flex: none; }
.ponto.sec { background: repeating-linear-gradient(45deg, var(--suco-1) 0 2.5px, var(--mapa-vazio) 2.5px 5px); box-shadow: inset 0 0 0 1.5px var(--suco-1); }
.cta-cartao { display: grid; gap: 4px; margin-top: 24px; padding: 22px; border-radius: var(--raio-cartao); background: var(--cartao);
  box-shadow: var(--sombra-2), inset 0 0 0 1px var(--borda-cartao); }
.cta-t { font: 700 19px/24px var(--fonte-texto); color: var(--tinta); }
.cta-d { font-size: 16px; line-height: 23px; color: var(--texto2); }
.cta-cartao .btn { margin-top: 14px; width: 100%; }
.video { position: relative; aspect-ratio: 4 / 3; border-radius: var(--raio-video); overflow: hidden; display: grid; place-items: center; padding: 24px; text-align: center;
  background: radial-gradient(80% 70% at 50% 38%, var(--cartao), var(--marca-wash) 55%, var(--recesso)); box-shadow: inset 0 0 0 1px var(--borda-cartao); }
.video::before, .video::after { content: ''; position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; }
.video::before { width: 46%; aspect-ratio: 1; left: -10%; bottom: -16%; background: radial-gradient(circle, var(--suco-1), transparent 70%); }
.video::after { width: 38%; aspect-ratio: 1; right: -8%; top: -12%; background: radial-gradient(circle, var(--sol), transparent 70%); }
.video-dentro { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; }
.video-simbolo { width: 64px; height: 64px; filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--suco-2) 28%, transparent)); }
.video-t { margin-top: 8px; font-family: var(--fonte-display); font-weight: 800; font-size: 26px; line-height: 30px; letter-spacing: -.02em; color: var(--tinta); }
.video-s { max-width: 34ch; color: var(--texto); font-size: 16px; line-height: 24px; }
.dicas { display: grid; gap: 12px; margin-top: 16px; list-style: none; }
.dica { padding: 16px 18px; border-radius: 20px; background: var(--cartao); box-shadow: var(--sombra-1), inset 0 0 0 1px var(--borda-cartao);
  font: 600 17px/25px var(--fonte-texto); color: var(--tinta); }
.dica-n { display: inline-flex; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px; background: var(--sol); color: var(--sobre-sol);
  font: 700 15px/20px var(--fonte-texto); letter-spacing: .04em; text-transform: uppercase; }
.ex-sentir { display: grid; gap: 24px; align-items: center; padding: 24px; border-radius: var(--raio-folha); background: var(--recesso); }
.ex-sentir-mapa { padding: 18px; border-radius: var(--raio-cartao); background: radial-gradient(90% 80% at 50% 30%, var(--cartao), var(--marca-wash)); }
.ex-sentir-texto h2 { font-family: var(--fonte-display); font-weight: 800; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.05; letter-spacing: -.03em; color: var(--tinta); }
.sentir-frase { margin-top: 12px; font-size: 19px; line-height: 28px; color: var(--tinta); }
.ex-sentir .musculos-lista { border-color: var(--linha); }
.passos { display: grid; gap: 12px; margin-top: 24px; list-style: none; max-width: 920px; }
.passo { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 22px; border-radius: var(--raio-cartao);
  background: var(--cartao); box-shadow: var(--sombra-1), inset 0 0 0 1px var(--borda-cartao); }
.passo-n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--grad-suco); color: var(--sobre-suco);
  font: 800 24px/1 var(--fonte-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.passo p { font-size: 18px; line-height: 27px; color: var(--texto); padding-top: 9px; }
.passo h3 { padding-top: 2px; }
.passo h3 + p { padding-top: 4px; font-size: 17px; line-height: 25px; }
.erros { display: grid; gap: 14px; margin-top: 24px; list-style: none; }
.erro { display: grid; border-radius: var(--raio-cartao); overflow: hidden; background: var(--cartao); box-shadow: var(--sombra-1), inset 0 0 0 1px var(--borda-cartao); }
.erro-lado { padding: 18px 22px; }
.erro-bom { background: var(--sucesso-wash); }
.rot { display: flex; align-items: center; gap: 8px; font: 700 15px/20px var(--fonte-texto); letter-spacing: .03em; text-transform: uppercase; }
.rot .ic { width: 18px; height: 18px; }
.rot.ruim { color: var(--texto2); }
.rot.bom { color: var(--sucesso); }
.erro-t { margin-top: 6px; font-size: 18px; line-height: 26px; color: var(--tinta); }
.tabela-series-caixa { margin-top: 24px; border-radius: var(--raio-cartao); overflow: hidden; background: var(--cartao); box-shadow: var(--sombra-1), inset 0 0 0 1px var(--borda-cartao); }
.tabela-series { width: 100%; border-collapse: collapse; }
.tabela-series th, .tabela-series td { padding: 15px 20px; text-align: left; font-size: 17px; line-height: 24px; border-bottom: 1px solid var(--linha); }
.tabela-series thead th { background: var(--recesso); font: 700 15px/20px var(--fonte-texto); color: var(--tinta); }
.tabela-series tbody th { font-weight: 700; color: var(--tinta); }
.tabela-series td { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-series tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 759px) {
  .tabela-series thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .tabela-series, .tabela-series tbody, .tabela-series tr, .tabela-series th, .tabela-series td { display: block; }
  .tabela-series tbody tr { padding: 14px 20px; border-bottom: 1px solid var(--linha); }
  .tabela-series tbody tr:last-child { border-bottom: 0; }
  .tabela-series tbody th { padding: 0 0 6px; border: 0; }
  .tabela-series td { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; border: 0; }
  .tabela-series td::before { content: attr(data-rotulo); font-weight: 500; color: var(--texto2); white-space: normal; }
}
.revisao { padding: 24px; border-radius: var(--raio-cartao); background: var(--recesso); }
.revisao .h-cartao .ic { color: var(--texto2); }
.revisao p { margin-top: 8px; color: var(--texto); max-width: 80ch; }
.revisao .apoio { color: var(--texto2); }
.fontes { display: grid; gap: 12px; margin-top: 24px; list-style: none; }
.fonte { display: grid; gap: 8px; align-content: start; padding: 18px 20px; border-radius: 20px; background: var(--cartao); box-shadow: inset 0 0 0 1px var(--linha); }
.fonte-uso { width: fit-content; padding: 2px 10px; border-radius: 999px; background: var(--recesso); font: 700 15px/20px var(--fonte-texto); color: var(--texto); }
.fonte-c { font-size: 16px; line-height: 24px; color: var(--texto); overflow-wrap: anywhere; }
.fonte-links { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--recesso);
  color: var(--tinta); font: 700 15px/20px var(--fonte-texto); text-decoration: none; }
.chip-link:hover { background: var(--marca-wash); color: var(--marca); }
@media (min-width: 760px) {
  .dicas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .erro { grid-template-columns: 1fr 1fr; }
  .fontes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passo { grid-template-columns: 52px minmax(0, 1fr); gap: 18px; }
  .passo-n { width: 52px; height: 52px; font-size: 26px; }
  .ex-sentir { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: 32px; }
}
@media (min-width: 1024px) {
  .ex-topo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; margin-top: 24px; }
  .ex-midia { grid-column: 1; grid-row: 1; }
  .ex-lado { grid-column: 2; grid-row: 1; padding-top: 4px; }
}

/* ---------- mapa muscular detalhado ---------- */
.mapa-vistas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mapa-vistas[data-vistas='1'] { grid-template-columns: 1fr; }
.mapa-vista { display: grid; justify-items: center; gap: 8px; }
.corpo { display: block; width: auto; height: clamp(240px, 32vw, 360px); }
.mapa-mini .corpo { height: 116px; }
.mapa-rotulo { font: 600 15px/20px var(--fonte-texto); color: var(--texto2); }
/* papel de cada caminho do desenho (mapa/mapa.ts) por classe: o site não tem style em linha (CSP style-src 'self');
   o principal e o secundário trazem o gradiente e a hachura no atributo fill */
.mc-contorno { fill: var(--corpo); stroke: var(--corpo-linha); stroke-width: 2; }
.mc-neutra { fill: var(--corpo); }
.mc-cabelo { fill: var(--cabelo); }
.mc-musculo { fill: var(--musculo); stroke: var(--corpo); stroke-width: 3; }
.mc-principal { stroke: var(--gluteo-borda); stroke-width: 3; }
.mc-secundario { stroke: var(--corpo); stroke-width: 3; }
.mc-grad-1 { stop-color: var(--gluteo-1); }
.mc-grad-2 { stop-color: var(--gluteo-2); }
.mc-hach-fundo { fill: var(--musculo); }
.mc-hach-traco { fill: var(--hachura); }

/* ---------- mapa do bumbum da marca (o mesmo do app) ---------- */
/* Sempre o corpo inteiro, do quadril aos pés (nunca recortado no bumbum: regra 13 da obra e R10), frente e
   costas lado a lado quando a região aparece nas duas, e no máximo um terço da altura do cartão: o cartão de
   região mais baixo tem perto de 255 px (ladrilho 100, título, texto e seta), e o mapa 80; o item da rotina,
   perto de 200 px, e o mapa 64; o celular de mostra do app, perto de 380 px, e o mapa 112. */
.mapa-marca { display: block; width: 100%; height: auto; }
.mapa-par { display: flex; gap: 10px; align-items: flex-end; justify-content: center; }
.mapa-par > .mapa-marca { flex: none; }
.mapa-cartao { width: auto; height: 80px; max-width: none; }
.mapa-rotina { width: auto; height: 64px; max-width: none; }
/* o mapa enche ao abrir a home, uma vez (o mesmo gesto do app quando a série é feita) */
.mapa-heroi g[clip-path] > rect:first-child { transform-box: fill-box; transform-origin: 50% 100%; animation: encher 900ms var(--curva-entrada) both; }
.mapa-heroi g[clip-path]:nth-of-type(2n) > rect:first-child { animation-delay: 140ms; }
.mapa-heroi g[clip-path]:nth-of-type(3n) > rect:first-child { animation-delay: 280ms; }
@keyframes encher { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- hubs ---------- */
.hub-topo { display: grid; gap: 24px; margin-top: 24px; align-items: center; }
.hub-texto .kicker { margin-bottom: 2px; }
.sobre { margin-top: 24px; max-width: 72ch; font-size: 18px; line-height: 1.6; color: var(--texto); text-wrap: pretty; }
.hub-mapa { padding: 18px 22px 22px; border-radius: var(--raio-folha); background: radial-gradient(90% 80% at 50% 30%, var(--cartao), var(--marca-wash) 70%, var(--recesso)); }
.hub-icone { display: grid; place-items: center; min-height: 220px; border-radius: var(--raio-folha); color: var(--marca);
  background: radial-gradient(90% 80% at 50% 35%, var(--cartao), var(--marca-wash) 70%, var(--recesso)); }
.hub-icone .ic { width: 120px; height: 120px; stroke-width: 1.4; }
.hub-topo-equip .hub-icone { min-height: 200px; }
@media (min-width: 900px) {
  .hub-topo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; }
  .hub-icone { min-height: 300px; }
}

/* ---------- herói da home ---------- */
.heroi { position: relative; padding: 20px 0 8px; }
.heroi-grade { display: grid; gap: 36px; align-items: center; }
.adesivo { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--sol); color: var(--sobre-sol);
  font: 700 16px/20px var(--fonte-texto); transform: rotate(-2deg); box-shadow: var(--sombra-1); }
.simbolo-adesivo { width: 26px; height: 26px; }
.h-heroi { margin-top: 22px; font-family: var(--fonte-display); font-weight: 800; font-size: clamp(42px, 4.7vw, 68px); line-height: .96;
  letter-spacing: -.04em; color: var(--tinta); text-wrap: balance; }
.heroi-sub { margin-top: 22px; font-size: clamp(19px, 2vw, 23px); line-height: 1.5; color: var(--texto); max-width: 36ch; }
.heroi-palco { position: relative; justify-self: center; width: min(460px, 100%); aspect-ratio: 4 / 5; border-radius: 44px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 34%, var(--marca-wash), var(--recesso) 72%); box-shadow: var(--sombra-3); }
.palco-brilho { position: absolute; inset: 18% 22% auto; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sol) 45%, transparent), transparent 65%);
  animation: brilho 5s ease-in-out infinite alternate; }
@keyframes brilho { from { transform: scale(.92); opacity: .7; } to { transform: scale(1.06); opacity: 1; } }
.mapa-heroi { position: absolute; left: 50%; bottom: 0; width: 86%; height: 86%; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 14%); mask-image: linear-gradient(to bottom, transparent, black 14%); }
.adesivo-palco { position: absolute; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 20px;
  background: var(--cartao); color: var(--tinta); box-shadow: var(--sombra-3), inset 0 0 0 1px var(--borda-cartao); font: 800 16px/1.2 var(--fonte-texto);
  animation: flutuar 5.5s ease-in-out infinite alternate; }
.adesivo-palco small { display: block; margin-top: 2px; font: 500 15px/1.25 var(--fonte-texto); color: var(--texto2); font-variant-numeric: tabular-nums; }
.adesivo-palco .simbolo { width: 36px; height: 36px; }
.adesivo-semana { top: 18px; left: 18px; rotate: -2deg; }
.adesivo-recorde { right: 18px; bottom: 22px; rotate: 2deg; animation-delay: -2.7s; }
.bola-sol { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--sol); color: var(--sobre-sol); box-shadow: inset 0 0 0 2px var(--tinta); }
.bola-sol .ic { width: 20px; height: 20px; }
@keyframes flutuar { from { translate: 0 0; } to { translate: 0 -6px; } }
@media (max-width: 599px) { .heroi .acoes .btn { width: 100%; } .adesivo-palco { padding: 8px 12px 8px 8px; } .adesivo-semana { top: 12px; left: 12px; } .adesivo-recorde { right: 12px; bottom: 14px; } }
@media (min-width: 900px) {
  .heroi { padding-top: 36px; }
  .heroi-grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; min-height: 600px; }
  .heroi-palco { justify-self: end; }
}

/* ---------- cartão do app (exemplo da tela Hoje) ---------- */
.app-mock { display: grid; gap: 10px; }
.app-mock-tela { padding: 16px; border-radius: 24px; background: var(--cartao); box-shadow: var(--sombra-3), inset 0 0 0 1px var(--borda-cartao); }
.app-mock-data { font: 700 15px/20px var(--fonte-texto); color: var(--texto2); }
.app-mock-titulo { margin-top: 2px; font: 800 28px/30px var(--fonte-display); letter-spacing: -.03em; color: var(--tinta); }
.app-mock-mapa { margin-top: 10px; padding: 12px 18px; border-radius: 18px; background: var(--recesso); }
.app-mock-mapa .mapa-par { gap: 14px; }
.mapa-mock { width: auto; height: 112px; max-width: none; }
.app-mock-rotulo { margin-top: 10px; font: 700 15px/20px var(--fonte-texto); color: var(--tinta); }
.app-mock-barra { margin-top: 8px; height: 10px; border-radius: 999px; background: var(--recesso); overflow: hidden; }
/* 14 de 16 séries do exemplo (87,5%): no CSS, não em style em linha */
.app-mock-barra b { display: block; width: 87.5%; height: 100%; border-radius: inherit; background: var(--grad-traco); }
.app-mock-sub { margin-top: 8px; font-size: 15px; line-height: 21px; color: var(--texto2); font-variant-numeric: tabular-nums; }
.app-mock-marco { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: var(--ouro-wash); }
.app-mock-marco .app-mock-rotulo { margin-top: 0; font-weight: 600; color: var(--texto); }
.app-mock-broche { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--sol); color: var(--sobre-sol); box-shadow: inset 0 0 0 2px var(--tinta); }
.app-mock-broche .ic { width: 18px; height: 18px; }
.app-mock-marco-t { font: 800 17px/22px var(--fonte-texto); color: var(--tinta); font-variant-numeric: tabular-nums; }
.app-mock-legenda { justify-self: end; padding: 2px 10px; border-radius: 999px; background: var(--recesso); font: 600 15px/20px var(--fonte-texto); color: var(--texto2); }

/* ---------- faixa escura (ciência) ---------- */
.faixa-escura { margin-top: 72px; }
.faixa-escura-grade { display: grid; gap: 28px; padding: 36px 26px; border-radius: 36px; background: var(--faixa-fundo); color: var(--faixa-texto);
  background-image: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--suco-2) 28%, transparent), transparent 60%), radial-gradient(50% 60% at 0% 100%, color-mix(in srgb, var(--suco-1) 18%, transparent), transparent 60%); }
.faixa-escura h2 { margin-top: 12px; font-family: var(--fonte-display); font-weight: 800; font-size: clamp(32px, 4vw, 52px); line-height: 1; letter-spacing: -.03em; color: var(--faixa-tinta); max-width: 18ch; }
.faixa-escura .kicker { background: color-mix(in srgb, var(--faixa-marca) 14%, transparent); color: var(--faixa-marca); }
.faixa-escura .acoes { margin-top: 4px; }
.numeros { display: grid; gap: 14px; list-style: none; margin-top: 24px; }
.numero { display: grid; gap: 4px; padding: 18px 20px; border-radius: 22px; background: var(--cartao); box-shadow: var(--sombra-1), inset 0 0 0 1px var(--borda-cartao); }
.numero-n { font: 800 clamp(34px, 4vw, 48px)/1 var(--fonte-display); letter-spacing: -.03em; color: var(--marca); font-variant-numeric: tabular-nums; }
.numero-t { font-size: 16px; line-height: 23px; color: var(--texto); }
.numeros-faixa { margin-top: 0; }
.numeros-faixa .numero { background: color-mix(in srgb, var(--faixa-tinta) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--faixa-tinta) 12%, transparent); }
.numeros-faixa .numero-n { background: var(--grad-suco); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(38px, 3.6vw, 52px); white-space: nowrap; }
.numeros-faixa .numero-t { color: var(--faixa-texto); }
@media (min-width: 760px) { .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .faixa-escura-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: center; padding: 56px; gap: 40px; } .faixa-escura .acoes { grid-column: 1; } }

/* ---------- chamada da calculadora na home ---------- */
.calc-chamada { display: grid; gap: 20px; align-items: center; padding: 28px; border-radius: var(--raio-folha); background: var(--cartao); box-shadow: var(--sombra-2), inset 0 0 0 1px var(--borda-cartao); }
.calc-chamada-n { font: 800 clamp(72px, 12vw, 148px)/.9 var(--fonte-display); letter-spacing: -.05em; background: var(--grad-suco); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc-chamada h2 { margin-top: 12px; font-family: var(--fonte-display); font-weight: 800; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.04; letter-spacing: -.03em; color: var(--tinta); }
@media (min-width: 900px) { .calc-chamada { grid-template-columns: auto minmax(0, 1fr); gap: 48px; padding: 40px 48px; } }

/* ---------- faixa do app ---------- */
.faixa-app { position: relative; display: grid; gap: 20px; align-items: center; margin-top: 88px; padding: 30px; border-radius: 36px; overflow: hidden;
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--sol) 35%, transparent), transparent 60%), var(--marca-wash); }
.faixa-simbolo { width: 72px; height: 72px; }
.simbolo-grande { width: 72px; height: 72px; filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--suco-2) 30%, transparent)); }
.faixa-app .kicker { background: var(--cartao); }
.faixa-app h2 { margin-top: 12px; font-family: var(--fonte-display); font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.02;
  letter-spacing: -.03em; color: var(--tinta); text-wrap: balance; }
.faixa-app p { color: var(--texto); max-width: 60ch; }
.faixa-texto > p:last-child { margin-top: 10px; }
@media (min-width: 900px) { .faixa-app { grid-template-columns: auto minmax(0, 1fr) auto; gap: 36px; padding: 44px 52px; } .faixa-simbolo, .simbolo-grande { width: 96px; height: 96px; } }

/* ---------- calculadoras ---------- */
.calc-grade { display: grid; gap: 20px; margin-top: 32px; }
.calc-cartao { padding: 24px; border-radius: var(--raio-cartao); background: var(--cartao); box-shadow: var(--sombra-2), inset 0 0 0 1px var(--borda-cartao); }
.calc-info { background: var(--recesso); box-shadow: none; }
.calc-info p { margin-top: 10px; color: var(--texto); }
.campos { display: grid; gap: 16px; margin-top: 18px; }
.campo { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.campo label, .campo .rotulo { padding: 0; font: 700 15px/20px var(--fonte-texto); color: var(--tinta); }
.ajuda { font-weight: 500; color: var(--texto2); }
.campo input[type='number'] { width: 100%; min-height: 60px; padding: 0 18px; border-radius: var(--raio-controle); border: 1.5px solid var(--borda);
  background: var(--cartao); color: var(--tinta); font: 800 26px/1 var(--fonte-texto); font-variant-numeric: tabular-nums; }
.campo input[type='number']:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-color: var(--marca); }
.segmentado { display: inline-flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--recesso); }
.seg { position: relative; display: grid; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-width: 64px; min-height: 52px; padding: 0 16px; border-radius: 12px;
  font: 700 17px/22px var(--fonte-texto); color: var(--texto2); transition: background var(--rapido) var(--curva); }
.seg input:checked + span { background: var(--cartao); color: var(--tinta); box-shadow: var(--sombra-1), inset 0 0 0 1.5px var(--tinta); }
.seg input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.resultado { display: grid; gap: 4px; margin-top: 20px; padding: 20px 22px; border-radius: 22px; background: var(--marca-wash); }
.resultado-r { font: 700 15px/20px var(--fonte-texto); color: var(--tinta); }
.resultado-n { font: 800 clamp(44px, 6vw, 60px)/1.05 var(--fonte-display); letter-spacing: -.03em; color: var(--marca); font-variant-numeric: tabular-nums; }
.resultado-f { font-size: 15px; line-height: 22px; color: var(--texto); font-variant-numeric: tabular-nums; }
.calc[data-valido='nao'] .resultado { opacity: .55; }
.resultado-mais { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.resultado-mais > div { padding: 14px 16px; border-radius: 16px; background: var(--recesso); }
.resultado-mais dt { font-size: 15px; line-height: 20px; color: var(--texto); }
.resultado-mais dd { margin-top: 4px; font: 800 26px/30px var(--fonte-texto); color: var(--tinta); font-variant-numeric: tabular-nums; }
.tabela-pct { width: 100%; margin-top: 12px; border-collapse: collapse; }
.tabela-pct th, .tabela-pct td { padding: 12px 6px; border-bottom: 1px solid var(--linha); text-align: left; font-size: 17px; line-height: 24px; font-variant-numeric: tabular-nums; }
.tabela-pct thead th { font: 700 15px/20px var(--fonte-texto); color: var(--texto2); }
.tabela-pct tbody th { font-weight: 700; color: var(--tinta); }
.tabela-pct td { font-weight: 700; color: var(--tinta); }
.tabela-pct tbody tr:last-child > * { border-bottom: 0; }
.formulas { display: grid; gap: 12px; margin-top: 24px; }
.formula { padding: 20px 22px; border-radius: 20px; background: var(--cartao); box-shadow: inset 0 0 0 1px var(--linha); }
.formula-nome { width: fit-content; padding: 2px 10px; border-radius: 999px; background: var(--marca-wash); font: 700 15px/20px var(--fonte-texto); letter-spacing: .04em; text-transform: uppercase; color: var(--marca); }
.formula-f { margin-top: 10px; font: 700 21px/30px var(--fonte-texto); color: var(--tinta); font-variant-numeric: tabular-nums; }
.formula-conta { margin-top: 6px; font-size: 16px; line-height: 24px; color: var(--texto2); font-variant-numeric: tabular-nums; }
.uso { display: grid; gap: 12px; margin-top: 20px; }
.uso-faixa { display: grid; gap: 4px; padding: 18px 20px; border-radius: 20px; background: var(--recesso); }
.uso-n { font: 800 28px/1.1 var(--fonte-display); color: var(--tinta); font-variant-numeric: tabular-nums; }
.uso-rotulo { font: 700 15px/20px var(--fonte-texto); color: var(--texto2); }
@media (min-width: 600px) {
  .campos { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .campos > .campo:nth-child(3) { grid-column: 1 / -1; }
  .formulas, .uso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) { .calc-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.faixa-calc { margin-top: 64px; }

/* ---------- guia ---------- */
.pagina-guia { max-width: 1200px; }
.guia-topo { margin-top: 28px; max-width: 920px; }
.numeros-dose .numero-n { font-size: clamp(40px, 5vw, 60px); }
.guia-indice { margin-top: 32px; }
.guia-indice ol, .guia-indice ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.guia-indice a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--cartao);
  box-shadow: inset 0 0 0 1.5px var(--linha); color: var(--tinta); font: 600 15px/20px var(--fonte-texto); text-decoration: none; }
.guia-indice a:hover { box-shadow: inset 0 0 0 1.5px var(--borda); }
.guia-secao { margin-top: 64px; max-width: 760px; }
.guia-larga { max-width: none; }
.guia-secao > p, .guia-secao > ul:not([class]) , .guia-secao > ol:not([class]) { margin-top: 16px; font-size: 18px; line-height: 29px; color: var(--texto); max-width: 68ch; }
.guia-secao > ul:not([class]) , .guia-secao > ol:not([class]) { padding-left: 22px; display: grid; gap: 8px; }
.como-lista { display: grid; gap: 10px; margin-top: 18px; list-style: none; }
.como-lista li { position: relative; padding: 14px 18px 14px 50px; border-radius: 18px; background: var(--cartao); box-shadow: inset 0 0 0 1px var(--linha); font-size: 17px; line-height: 26px; color: var(--texto); }
.como-lista li::before { content: ''; position: absolute; left: 18px; top: 19px; width: 16px; height: 16px; border-radius: 50%; background: var(--grad-suco); }
.estudos { display: grid; gap: 14px; margin-top: 24px; list-style: none; }
.estudo { display: grid; gap: 10px; padding: 22px; border-radius: var(--raio-cartao); background: var(--cartao); box-shadow: var(--sombra-2), inset 0 0 0 1px var(--borda-cartao); }
.estudo-nome { font: 800 22px/26px var(--fonte-display); letter-spacing: -.02em; color: var(--tinta); }
.estudo-nome a { color: inherit; }
.estudo-dados { display: grid; gap: 8px; }
.estudo-dados dt { font: 700 15px/20px var(--fonte-texto); letter-spacing: .03em; text-transform: uppercase; color: var(--texto2); }
.estudo-dados dd { font-size: 16px; line-height: 24px; color: var(--texto); }
.estudo-achou { padding: 12px 14px; border-radius: 14px; background: var(--marca-wash); color: var(--tinta); font-weight: 600; }
@media (min-width: 900px) { .estudos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.naos { display: grid; gap: 14px; margin-top: 24px; list-style: none; }
.nao { display: grid; gap: 10px; padding: 22px; border-radius: var(--raio-cartao); background: var(--cartao); box-shadow: var(--sombra-1), inset 0 0 0 1px var(--borda-cartao); }
.nao-rotulo { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 2px 12px; border-radius: 999px; background: var(--alerta-wash); color: var(--alerta);
  font: 700 15px/22px var(--fonte-texto); letter-spacing: .03em; text-transform: uppercase; }
.nao-titulo { font: 800 22px/27px var(--fonte-display); letter-spacing: -.02em; color: var(--tinta); }
.nao-texto { font-size: 16px; line-height: 25px; color: var(--texto); }
.nao-verdade { padding: 12px 14px; border-radius: 14px; background: var(--sucesso-wash); color: var(--tinta); font-size: 16px; line-height: 24px; }
.nao-verdade strong { color: var(--sucesso); }
.nao-fontes { font-size: 15px; line-height: 22px; color: var(--texto2); }
@media (min-width: 760px) { .naos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- página do app ---------- */
.app-topo { display: grid; gap: 32px; align-items: center; margin-top: 28px; }
.app-topo .kicker { margin-bottom: 2px; }
.app-topo-visual { justify-self: center; width: min(380px, 100%); padding: 28px; border-radius: 40px;
  background: radial-gradient(70% 60% at 50% 30%, var(--marca-wash), var(--recesso) 75%); }
@media (min-width: 900px) { .app-topo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; } }
.passos-app { margin-top: 24px; max-width: none; }
@media (min-width: 900px) { .passos-app { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cartao-preco { padding: 26px; border-radius: var(--raio-cartao); background: var(--recesso); }
.cartao-preco p { margin-top: 10px; max-width: 70ch; color: var(--texto); }
.aviso-legal { margin-top: 32px; max-width: 80ch; font-size: 15px; line-height: 22px; color: var(--texto2); }

/* ---------- teste em espanhol (glúteo brasileño) ---------- */
.pagina-teste { max-width: 1200px; }
.teste-topo { display: grid; gap: 24px; align-items: center; margin-top: 28px; }
.teste-selo { width: 168px; justify-self: start; }
.selo { display: block; width: 100%; height: auto; }
/* só o anel de texto gira; o símbolo da marca fica parado no meio */
.selo-anel { transform-box: view-box; transform-origin: 50% 50%; animation: girar 28s linear infinite; }
.selo-fundo { fill: var(--sol); }
.selo-texto { fill: var(--sobre-sol); font: 800 17px/1 var(--fonte-texto); letter-spacing: .1em; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (min-width: 900px) { .teste-topo { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } .teste-selo { width: 220px; order: 2; } }
.porque { padding: 28px; border-radius: var(--raio-folha); background: var(--recesso); }
.porque > p { margin-top: 14px; max-width: 70ch; font-size: 18px; line-height: 28px; color: var(--texto); }
.rotina { display: grid; gap: 14px; margin-top: 24px; list-style: none; }
.rotina-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px 16px; align-items: start; padding: 20px; border-radius: var(--raio-cartao);
  background: var(--cartao); box-shadow: var(--sombra-2), inset 0 0 0 1px var(--borda-cartao); }
.rotina-n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--grad-suco); color: var(--sobre-suco); font: 800 24px/1 var(--fonte-display); }
.rotina-mapa { grid-column: 2; grid-row: 1 / span 2; display: none; }
.rotina-corpo { grid-column: 2; }
.rotina-nome { font: 800 22px/27px var(--fonte-display); letter-spacing: -.02em; color: var(--tinta); }
.rotina-nome a { color: inherit; text-decoration: none; }
.rotina-nome a:hover { text-decoration: underline; }
.rotina-equip { margin-top: 2px; font-size: 15px; line-height: 21px; color: var(--texto2); }
.rotina-dados { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rotina-dados > div { padding: 8px 12px; border-radius: 14px; background: var(--recesso); }
.rotina-dados dt { font-size: 15px; line-height: 20px; color: var(--texto2); }
.rotina-dados dd { font: 800 18px/24px var(--fonte-texto); color: var(--tinta); font-variant-numeric: tabular-nums; }
.rotina-sentir { margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--texto); }
@media (min-width: 760px) {
  .rotina-item { grid-template-columns: 52px 120px minmax(0, 1fr); padding: 22px 24px; }
  .rotina-mapa { display: grid; place-items: center; grid-column: 2; grid-row: 1; padding: 6px; border-radius: 18px; background: radial-gradient(90% 90% at 50% 35%, var(--marca-wash), var(--recesso) 78%); }
  .rotina-corpo { grid-column: 3; grid-row: 1; }
}
.teste-texto .lead { max-width: 52ch; }

/* ---------- rodapé (sempre amora noite) ---------- */
.rodape { margin-top: 96px; padding: 48px 0 40px; background: var(--faixa-fundo); color: var(--faixa-texto); border-radius: 36px 36px 0 0; }
.rodape .marca { color: var(--faixa-tinta); }
.rodape-grade { display: grid; gap: 32px; }
.rodape .promessa { margin-top: 14px; max-width: 420px; font: 800 22px/1.15 var(--fonte-display); letter-spacing: -.02em; color: var(--faixa-tinta); }
.rodape .voz { margin-top: 10px; color: var(--faixa-apoio); font-size: 16px; line-height: 24px; }
.rodape h2 { font: 700 15px/20px var(--fonte-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--faixa-apoio); }
.rodape ul { display: grid; gap: 2px; margin-top: 10px; list-style: none; }
.rodape ul a { display: inline-flex; align-items: center; min-height: 44px; color: var(--faixa-tinta); font: 600 17px/24px var(--fonte-texto); text-decoration: none; }
.rodape ul a:hover { text-decoration: underline; }
.rodape ul a[aria-current] { color: var(--faixa-marca); }
.rodape :focus-visible { outline-color: var(--faixa-marca); }
.rodape-avisos { display: grid; gap: 8px; margin-top: 36px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--faixa-tinta) 14%, transparent); font-size: 15px; line-height: 22px; color: var(--faixa-apoio); }
.aviso-rascunho { display: flex; gap: 10px; align-items: flex-start; color: var(--faixa-tinta); }
.aviso-rascunho .ic { width: 20px; height: 20px; color: var(--sol); margin-top: 1px; }
@media (min-width: 900px) { .rodape-grade { grid-template-columns: minmax(0, 1.4fr) repeat(3, auto); gap: 64px; } .rodape { padding-top: 64px; } }

/* ---------- movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; scroll-behavior: auto !important; }
  .btn-acao:hover, .cartao-link:not(.sem-link):hover { transform: none; }
}
@media print {
  .topo, .rodape, .cta-cartao, .faixa-app, .btn-topo, .heroi-palco { display: none; }
  body { background: var(--branco); }
}

/* mapa do bumbum dentro do HTML (mapa/mapa-marca.ts): cor por classe, sem style em linha */
.mbf-mapa-pele{fill:var(--mapa-pele)}
.mbs-mapa-pele{stroke:var(--mapa-pele)}
.mbc-mapa-pele{stop-color:var(--mapa-pele)}
.mbf-mapa-contorno{fill:var(--mapa-contorno)}
.mbs-mapa-contorno{stroke:var(--mapa-contorno)}
.mbc-mapa-contorno{stop-color:var(--mapa-contorno)}
.mbf-mapa-vazio{fill:var(--mapa-vazio)}
.mbs-mapa-vazio{stroke:var(--mapa-vazio)}
.mbc-mapa-vazio{stop-color:var(--mapa-vazio)}
.mbf-mapa-sulco{fill:var(--mapa-sulco)}
.mbs-mapa-sulco{stroke:var(--mapa-sulco)}
.mbc-mapa-sulco{stop-color:var(--mapa-sulco)}
.mbf-suco-1{fill:var(--suco-1)}
.mbs-suco-1{stroke:var(--suco-1)}
.mbc-suco-1{stop-color:var(--suco-1)}
.mbf-suco-2{fill:var(--suco-2)}
.mbs-suco-2{stroke:var(--suco-2)}
.mbc-suco-2{stop-color:var(--suco-2)}
.mbf-sol{fill:var(--sol)}
.mbs-sol{stroke:var(--sol)}
.mbc-sol{stop-color:var(--sol)}
.mbf-marca{fill:var(--marca)}
.mbs-marca{stroke:var(--marca)}
.mbc-marca{stop-color:var(--marca)}
.mbf-mapa-foco{fill:var(--mapa-foco)}
.mbs-mapa-foco{stroke:var(--mapa-foco)}
.mbc-mapa-foco{stop-color:var(--mapa-foco)}