/* Páginas públicas de pilatesguiado.com (vendas, entrar, obrigado, privacidade). Mesmas cores do app. */
:root { color-scheme: light dark; --fundo:#F3EFE9; --superficie:#FFFFFF; --texto:#17222B; --suave:#46535F; --acento:#0B6B5F; --texto-acento:#FFFFFF; --borda:#6E7B87; --foco:#B4330E; --raio:16px; }
@media (prefers-color-scheme: dark) { :root { --fundo:#0F171D; --superficie:#1A252E; --texto:#EEF3F6; --suave:#B3C0CA; --acento:#4FD1BE; --texto-acento:#06231F; --borda:#7F8E9A; --foco:#FFB38F; } }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font: 19px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; display: grid; gap: 18px; }
h1 { font-size: 32px; line-height: 1.15; margin: 8px 0 0; }
h2 { font-size: 23px; margin: 0; }
p { margin: 0; }
a { color: var(--acento); }
.marca { font-weight: 800; color: var(--acento); font-size: 20px; text-decoration: none; }
.sub { color: var(--suave); }
.cartao { background: var(--superficie); border-radius: var(--raio); padding: 18px; display: grid; gap: 12px; }
.pendente { border: 2px dashed var(--borda); }
.b-principal { display: block; width: 100%; min-height: 60px; border: 0; border-radius: 999px; background: var(--acento); color: var(--texto-acento); font: inherit; font-size: 21px; font-weight: 800; text-align: center; text-decoration: none; padding: 16px 20px; cursor: pointer; }
.b-principal[disabled] { opacity: .6; cursor: default; }
.b-secundario { display: block; min-height: 52px; border: 2px solid var(--borda); border-radius: 999px; background: transparent; color: var(--texto); font: inherit; font-weight: 700; text-align: center; text-decoration: none; padding: 12px 18px; cursor: pointer; }
label { font-weight: 700; }
input[type=email] { width: 100%; min-height: 56px; font: inherit; padding: 12px 14px; border: 2px solid var(--borda); border-radius: 12px; background: var(--superficie); color: var(--texto); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.aviso { color: var(--suave); font-size: 18px; }
.demo { width: 100%; aspect-ratio: 3 / 4; border: 0; border-radius: var(--raio); background: #D9CBB8; }
footer { color: var(--suave); font-size: 18px; display: grid; gap: 8px; border-top: 1px solid var(--borda); padding-top: 16px; }
[hidden] { display: none !important; }
/* página de vendas */
.landing { gap: 16px; padding-top: 14px; }
.hero { display: grid; gap: 14px; }
.sobretitulo { margin: 0 0 -8px; font-size: 17px; font-weight: 800; letter-spacing: .02em; color: var(--acento); }
.hero h1 { font-size: clamp(30px, 7vw, 46px); }
.hero .sub { font-size: 19px; color: var(--texto); }
@media (min-width: 900px) { .hero .sub { font-size: 21px; } }
.compra { display: grid; gap: 8px; }
.em-breve { font-weight: 800; font-size: 21px; }
.demo-moldura { position: relative; width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: 3 / 4; border-radius: var(--raio); overflow: hidden; background: var(--fundo); }
.demo-capa, .demo-capa img, .demo-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }
.demo-iframe { position: absolute; left: 0; top: 0; width: 480px; height: 640px; border: 0; display: block; transform-origin: 0 0; }
.demo-iframe { opacity: 0; transition: opacity .3s; background: var(--fundo); }
.demo-moldura.interativa .demo-iframe { opacity: 1; }
/* botão de som DENTRO da cena: canto superior direito do palco da demo (desenho de 480×640: palco começa em y=158,
   termina em x=472; botão 8 px para dentro). Em % da moldura, para ficar no mesmo lugar sobre o vídeo e sobre a 3D. */
.demo-som { position: absolute; top: calc(166 / 640 * 100%); right: calc(16 / 480 * 100%); z-index: 3; width: 62px; height: 56px; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-radius: 14px; border: 1px solid rgb(255 255 255 / .45); background: rgb(10 16 22 / .72); color: #fff; font: inherit; font-size: 15px; font-weight: 800; line-height: 1.1; cursor: pointer; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.demo-som .ic { width: 22px; height: 22px; display: block; }
.demo-som .mudo { display: none; }
.demo-som[aria-pressed=true] .ondas { display: none; }
.demo-som[aria-pressed=true] .mudo { display: inline; }
.demo-som[aria-pressed=true] { background: rgb(6 70 62 / .85); }
.legenda { text-align: center; font-weight: 700; margin-top: 8px; }
.revisor { font-weight: 700; }
.nota { color: var(--suave); font-size: 18px; }
.lista-check, .lista-trilhas, .passos { margin: 0; padding-left: 26px; display: grid; gap: 10px; }
.lista-trilhas span { display: block; color: var(--suave); }
.preco { text-align: center; }
.preco .valor { font-size: 40px; font-weight: 900; }
.garantia { color: var(--suave); }
details { border-top: 1px solid var(--borda); padding: 12px 0; }
summary { font-weight: 800; cursor: pointer; min-height: 32px; }
details p { margin-top: 8px; }
@media (min-width: 900px) {
  main.landing { max-width: 1080px; grid-template-columns: minmax(0, 1fr) 460px; column-gap: 40px; align-items: start; }
  main.landing > * { grid-column: 1 / -1; }
  main.landing > .marca { grid-column: 1 / -1; }
  main.landing > .hero { grid-column: 1; align-self: center; }
  main.landing > .hero { grid-row: 2 / span 2; }
  main.landing > .demo-bloco { grid-column: 2; grid-row: 2; }
  main.landing > .compra:first-of-type { grid-column: 2; grid-row: 3; }
  main.landing > .cartao, main.landing > footer { max-width: 760px; }
}
.instalar { display: grid; gap: 18px; }
.instalar figure { margin: 0; display: grid; gap: 8px; }
.instalar img { width: 180px; height: auto; }
.instalar ol { margin: 6px 0 0; padding-left: 24px; }
@media (min-width: 700px) { .instalar { grid-template-columns: 1fr 1fr; } }
.para-quem h2 { font-size: 22px; }
.para-quem p { font-size: 19px; }
.cuidado p, .cuidado li { font-size: 19px; }
.lista-nao { margin: 0; padding-left: 26px; display: grid; gap: 8px; }
/* vídeos tutoriais (/ajuda/ e /obrigado) */
video.tutorial { display: block; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 9 / 16; border-radius: var(--raio); background: #1C2A35; }
video.tutorial.v-16x9 { max-width: 100%; aspect-ratio: 16 / 9; }
.sem-internet { margin: 0; padding: 12px 14px; border-radius: 12px; background: #FFF4D6; color: var(--texto); font-weight: 700; text-align: center; }

.pequeno { font-size: 16px; color: var(--suave); margin: 0; }
.linha-compra { margin: 0; text-align: center; font-size: 16px; color: var(--suave); }

/* Barra de compra fixa embaixo (25/10): sólida, sombra leve, área segura do iPhone; no computador, centralizada ≤ 480 px */
.barra-compra { position: fixed; z-index: 50; left: 50%; bottom: 0; width: min(100%, 480px); box-sizing: border-box;
  padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--fundo, #F3EFE9); border-top: 1px solid rgb(0 0 0 / .08);
  box-shadow: 0 -6px 18px rgb(0 0 0 / .12); border-radius: 16px 16px 0 0;
  transform: translate(-50%, 110%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
.barra-compra.on { transform: translate(-50%, 0); visibility: visible; transition: transform .2s ease, visibility 0s; }
.barra-compra .b-comprar { min-height: 52px; padding: 12px 16px; font-size: 19px; }
.barra-linha { margin: 0 0 6px; text-align: center; font-size: min(14px, 3.35vw); white-space: nowrap; color: var(--suave); }
body.com-barra-compra { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .barra-compra, .barra-compra.on { transition: none; } }
.resumo { text-align: center; margin: 6px 0 0; font-size: 17px; color: var(--suave); }