/* Focus Atelier: página do produto, textos legais e suporte.
   Cores do app (src/ui/theme.tsx). Títulos, botões e menus na fonte pixel do app (Jersey 20, OFL 1.1, em ../fonts);
   texto corrido na fonte do sistema, para leitura longa. Sem scripts. Funciona do disco e no Cloudflare Pages.
   Em japonês, coreano e chinês, a fonte pixel da língua vem depois da Jersey 20 (veja o fim do arquivo). */

@font-face {
  font-family: "Jersey 20";
  src: url("../fonts/jersey20.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Fontes pixel CJK (OFL 1.1), em subconjuntos só com os caracteres dos títulos, menus e botões de cada língua
   (tools/site/fontes_cjk.py). O navegador só baixa a da página que a usa. */
@font-face {
  font-family: "DotGothic16";
  src: url("../fonts/dotgothic16-ja.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Galmuri11";
  src: url("../fonts/galmuri11-ko.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fusion Pixel 12px SC";
  src: url("../fonts/fusionpixel12-zh-hans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fusion Pixel 12px TC";
  src: url("../fonts/fusionpixel12-zh-hant.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --sky: #bfeaf5;
  --sky-deep: #93d5e8;
  --ink: #4a2b3a;
  --ink-soft: #7a5566;
  --paper: #fff6e6;
  --paper-2: #f4e2c4;
  --tomato: #e8604c;
  --tomato-dark: #b4432f;
  --mint-soft: #e6f4ec;
  --butter: #f7d774;
  --butter-soft: #fff1c9;
  --white: #ffffff;
  --shadow: rgba(74, 43, 58, 0.28);
  --pixel: "Jersey 20", "Trebuchet MS", system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 16px;
  --measure: 760px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* Nuvens em pixel, atrás de tudo (decoração). */
.ceu {
  position: absolute;
  inset: 0 0 auto 0;
  height: 620px;
  pointer-events: none;
  z-index: 0;
  background-image: url("../img/nuvem.png"), url("../img/nuvem.png"), url("../img/nuvem.png");
  background-repeat: no-repeat;
  background-size: 154px 72px, 231px 108px, 154px 72px;
  background-position: -36px 120px, calc(100% + 60px) 40px, 82% 470px;
  image-rendering: pixelated;
  opacity: 0.9;
}

.pular {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--pixel);
  font-size: 1.25rem;
  border-radius: 8px;
  text-decoration: none;
}

.pular:focus {
  top: 8px;
}

.topo,
.idiomas,
main,
.rodape {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ——— Topo: ícone, nome e menu ——— */
.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-top: 18px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--pixel);
  font-size: 1.75rem;
  line-height: 1;
}

.marca img {
  width: 48px;
  height: 48px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--sky);
}

.menu ul,
.idiomas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.menu a,
.idiomas a {
  display: inline-block;
  font-family: var(--pixel);
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--ink);
  line-height: 1.1;
}

.menu a {
  font-size: 1.25rem;
  padding: 7px 12px 6px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.menu a:hover,
.idiomas a:hover {
  background: var(--paper-2);
}

.menu a[aria-current="page"],
.idiomas a[aria-current="page"] {
  background: var(--butter);
}

.menu a:active,
.idiomas a:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

/* ——— Idiomas ——— */
.idiomas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 14px;
}

.idiomas .rotulo {
  font-family: var(--pixel);
  font-size: 1.125rem;
  color: var(--ink-soft);
}

.idiomas ul {
  gap: 6px;
}

.idiomas a {
  font-size: 1.0625rem;
  padding: 6px 10px 5px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border-width: 2px;
  box-shadow: 0 2px 0 var(--ink);
}

/* ——— Conteúdo ——— */
main {
  padding-top: 18px;
  padding-bottom: 8px;
}

.painel {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 6px 0 var(--shadow);
  padding: 22px 20px 24px;
  margin: 0 0 22px;
}

h1,
h2,
h3,
summary {
  font-family: var(--pixel);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.01em;
}

h1 {
  font-size: 2.5rem;
  line-height: 1.05;
  margin: 0 0 8px;
}

h2 {
  font-size: 1.75rem;
  line-height: 1.15;
  margin: 30px 0 8px;
}

h3 {
  font-size: 1.375rem;
  line-height: 1.2;
  margin: 0 0 4px;
}

p,
ul,
ol {
  margin: 0 0 12px;
}

ul,
ol {
  padding-left: 1.3em;
}

li {
  margin: 0 0 6px;
}

li::marker {
  color: var(--tomato-dark);
}

strong {
  font-weight: 700;
}

a {
  color: var(--tomato-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.atualizado {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin: 0 0 18px;
}

.resumo {
  background: var(--butter-soft);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 14px 16px 6px;
  margin: 0 0 20px;
}

.resumo h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
}

.indice {
  border-top: 3px dashed var(--paper-2);
  border-bottom: 3px dashed var(--paper-2);
  padding: 12px 0 6px;
  margin: 0 0 6px;
}

.indice h2 {
  margin: 0 0 6px;
  font-size: 1.375rem;
}

.indice ol {
  columns: 2 220px;
  column-gap: 24px;
  font-size: 0.9375rem;
}

.indice li {
  break-inside: avoid;
}

.indice a {
  text-decoration-thickness: 1px;
}

.doc section {
  scroll-margin-top: 12px;
}

.preencher {
  background: var(--butter-soft);
  border-bottom: 2px dashed var(--tomato-dark);
  padding: 0 2px;
}

/* ——— Início: a página do produto ——— */
.pg-home {
  --measure: 1080px;
}

/* No início, as nuvens ficam longe do texto da abertura (no celular, a de baixo vai para a borda direita). */
.pg-home .ceu {
  background-position: -36px 130px, calc(100% + 60px) 40px, calc(100% + 80px) 290px;
}

@media (min-width: 900px) {
  .pg-home .ceu {
    background-position: -36px 130px, calc(100% + 60px) 40px, 3% 540px;
  }
}

/* Cena do bichinho pintando: tira de 8 quadros de 100 × 72 px, ampliada --px vezes (inteiro, sem borrar). */
.cena {
  --px: 3;
  width: calc(100px * var(--px));
  height: calc(72px * var(--px));
  max-width: 100%;
  background-image: url("../img/pintando.png?v=a75bc960");
  background-repeat: no-repeat;
  background-size: calc(800px * var(--px)) calc(72px * var(--px));
  background-position: 0 0;
  image-rendering: pixelated;
  animation: pintar 1s steps(8) infinite;
}

/* Porcentagem fixa, sem var(): o Safari não resolve variáveis dentro de @keyframes. 8 quadros: 100% × 8/7. */
@keyframes pintar {
  to {
    background-position: 114.2857% 0;
  }
}

/* O quadro no cavalete se pintando aos poucos (como no app): 24 etapas, as 6 últimas com o quadro pronto. */
.cena {
  position: relative;
}

.quadro-pintando {
  --qx: 61; --qy: 7; --qw: 32; --qh: 24; /* posição da tela na arte (gerado por gerar_site.py) */
  position: absolute;
  left: calc(var(--qx) * 1px * var(--px));
  top: calc(var(--qy) * 1px * var(--px));
  width: calc(var(--qw) * 1px * var(--px));
  height: calc(var(--qh) * 1px * var(--px));
  background-image: url("../img/quadro-pintando.png?v=0656dab4");
  background-repeat: no-repeat;
  background-size: calc(var(--qw) * 24px * var(--px)) calc(var(--qh) * 1px * var(--px));
  background-position: 0 0;
  image-rendering: pixelated;
  animation: quadro 8s steps(24) infinite; /* ~6 s pintando, ~2 s pronto */
}

/* 24 etapas: 100% × 24/23 (a etapa k fica em k/23 = 0%…100%). */
@keyframes quadro {
  to {
    background-position: 104.3478% 0;
  }
}

.cena-passo {
  --px: 2;
}

.chamada {
  font-family: var(--pixel);
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--ink-soft);
  margin: 0 0 2px;
}

.lead {
  font-size: 1.1875rem;
  max-width: 36em;
}

.sub {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  margin: 0 0 18px;
}

/* Abertura */
.hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 4px;
  padding: 18px 0 34px;
}

.hero-palco {
  position: relative;
  display: grid;
  place-items: center;
}

.cena-hero {
  position: relative;
  z-index: 1;
}

/* Sombra no chão, sob os pés do bichinho e do cavalete (linha do chão a 64 px dos 72 da cena). */
.chao {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: calc(5px * 3);
  height: calc(6px * 3);
  border-radius: 50%;
  background: rgba(74, 43, 58, 0.14);
}

.hero h1 {
  font-size: clamp(3.25rem, 11vw, 5.75rem);
  line-height: 0.95;
  margin: 0 0 10px;
}

.hero .lead {
  font-size: 1.25rem;
  margin: 0 auto 20px;
  max-width: 30em;
}

.hero-nota {
  margin: 12px 0 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* Botão "Disponível na App Store" no estilo do site (o selo oficial da Apple pode substituir: veja o README). */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 22px 8px 10px;
  color: var(--white);
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--shadow);
  text-decoration: none;
  text-align: left;
}

.selo:hover {
  color: var(--white);
  background: #5d3a4b;
}

.selo:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--shadow);
}

.selo-icone img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 2px solid var(--white);
}

.selo-texto {
  font-family: var(--pixel);
  line-height: 1;
}

.selo .pequeno {
  display: block;
  font-size: 1.0625rem;
  margin-bottom: 3px;
}

.selo .grande {
  display: block;
  font-size: 2rem;
}

/* Blocos */
.bloco {
  margin-bottom: 30px;
}

.bloco > h2 {
  margin: 0 0 4px;
  font-size: 2.25rem;
}

/* Como funciona */
.passos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
  counter-reset: passo;
}

.passo {
  margin: 0;
  padding: 0 0 18px;
  text-align: center;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
}

.passo-arte {
  display: grid;
  place-items: center;
  height: 188px;
  background: var(--sky);
  border-bottom: 3px solid var(--ink);
}

.passo-arte > img {
  display: block;
  image-rendering: pixelated;
}

.passo:nth-child(3) .passo-arte > img {
  width: auto;
  height: 180px;
  image-rendering: auto;
}

.passo .passo-num {
  /* .passo .passo-num vence .passo p (senão a margem e a fonte do parágrafo deslocam o número) */
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -24px auto 6px;
  position: relative;
  font-family: var(--pixel);
  font-size: 1.625rem;
  line-height: 1;
  background: var(--butter);
  border: 3px solid var(--ink);
  border-radius: 50%;
}

.passo h3 {
  margin: 0 16px 6px;
  font-size: 1.5rem;
}

.passo p {
  margin: 0 18px;
  font-size: 1rem;
}

.regra {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 4px 16px;
  align-items: start;
  margin-top: 20px;
  padding: 16px 18px 6px;
  background: var(--butter-soft);
  border: 3px solid var(--ink);
  border-radius: 14px;
}

.regra > img {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
}

.regra h3 {
  margin: 4px 0 4px;
  font-size: 1.5rem;
}

.regra-texto {
  font-size: 1.1875rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.regra-mais {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* Galeria de capturas: no celular, uma fila que desliza; em telas largas, uma grade 3 × 2. */
.bloco-galeria > h2,
.bloco-galeria > .sub {
  text-align: center;
}

.bloco-galeria .sub {
  color: var(--ink);
}

.dica {
  display: block;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.galeria {
  list-style: none;
  margin: 0 calc(-1 * var(--gutter));
  padding: 6px var(--gutter) 14px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(66%, 250px);
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: thin;
}

.galeria li {
  margin: 0;
  scroll-snap-align: start;
}

.galeria figure {
  margin: 0;
}

.celular {
  padding: 8px;
  background: #2b1a24;
  border-radius: 36px;
  box-shadow: 0 6px 0 var(--shadow), inset 0 0 0 2px #5d3a4b;
}

.celular img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top;
  border-radius: 28px;
  background: var(--sky-deep);
}

.galeria figcaption {
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: center;
}

.galeria figcaption strong {
  display: block;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 1.4375rem;
  line-height: 1.1;
  margin-bottom: 2px;
}

/* Destaques */
.destaques {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.destaque {
  margin: 0;
  padding: 16px 18px 14px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 14px;
}

.destaque > img {
  display: block;
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  margin-bottom: 6px;
}

.destaque h3 {
  font-size: 1.5rem;
  margin: 0 0 4px;
}

.destaque p {
  margin: 0;
  font-size: 1rem;
}

.mini-comodos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.mini-comodos img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}

.destaque > img.turma {
  width: 100%;
  max-width: 330px;
  height: auto;
  image-rendering: auto;
  margin: -4px 0 6px;
}

.mini-linguas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.mini-linguas span {
  font-family: var(--pixel);
  font-size: 1.125rem;
  line-height: 1;
  padding: 8px 8px 6px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
}

/* Pro */
.pro {
  background: #fff3d3;
}

.pro-topo {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 4px 14px;
  align-items: center;
  margin-bottom: 14px;
}

.pro-topo img {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
}

.pro-topo h2 {
  margin: 0;
  font-size: 2.25rem;
}

.pro-topo .sub {
  margin: 0;
}

.pro-meio {
  display: grid;
  gap: 22px;
  margin: 0 0 16px;
  align-items: center;
}

/* No celular, a tela do Pro vem entre a lista e os planos. */
.pro-esq {
  display: contents;
}

.pro-lista {
  order: 1;
}

.celular-pro {
  order: 2;
}

.planos {
  order: 3;
}

.celular-pro {
  width: min(62%, 230px);
  justify-self: center;
}

.pro-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px 22px;
}

.pro-lista li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
  margin: 0;
}

.pro-lista img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}

.planos {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  gap: 14px;
}

.plano {
  position: relative;
  margin: 0;
  padding: 16px 16px 14px;
  text-align: center;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 14px;
}

.plano-anual {
  background: var(--butter-soft);
  box-shadow: 0 0 0 3px var(--butter), 0 5px 0 3px var(--ink);
}

.plano h3 {
  font-size: 1.5rem;
  margin: 0 0 4px;
}

.valor {
  margin: 0 0 6px;
  font-size: 1rem;
}

.valor strong {
  display: block;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.05;
  white-space: nowrap;
}

.etiqueta-teste,
.nota-plano {
  display: inline-block;
  font-family: var(--pixel);
  font-size: 1.125rem;
  line-height: 1;
  padding: 7px 10px 5px;
  border-radius: 8px;
}

.etiqueta-teste {
  color: var(--white);
  background: var(--tomato-dark);
  border: 2px solid var(--ink);
}

.nota-plano {
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
}

.pro-nota {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.pro-nota a {
  color: var(--tomato-dark);
}

.faq-mais {
  margin: 14px 0 0;
}

/* Chamada final */
.fim {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 6px 0 34px;
}

.fim h2 {
  margin: 4px 0 4px;
  font-size: 2.5rem;
}

.fim p {
  margin: 0 0 18px;
  max-width: 30em;
}

/* ——— Suporte ——— */
.contato {
  background: var(--mint-soft);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 14px 16px 8px;
  margin: 0 0 22px;
}

.contato h2 {
  margin: 0 0 6px;
  font-size: 1.5rem;
}

.email {
  font-size: 1.1875rem;
  word-break: break-word;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 8px 22px 7px;
  margin: 4px 0 12px;
  font-family: var(--pixel);
  font-size: 1.625rem; /* texto grande: contraste 3,4:1 do branco no tomate passa (AA, texto grande) */
  line-height: 1;
  color: var(--white);
  background: var(--tomato);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 4px 0 var(--tomato-dark), 0 4px 0 3px var(--ink);
  text-decoration: none;
}

.botao:hover {
  color: var(--white);
  background: #d9553f;
}

.botao:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--tomato-dark), 0 1px 0 3px var(--ink);
}

.faq {
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq li {
  margin: 0 0 10px;
}

details {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 12px;
}

summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  font-size: 1.3125rem;
  line-height: 1.15;
}

summary::-webkit-details-marker {
  display: none;
}

/* Seta em pixel (dois quadrados em L), virando ao abrir. */
summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  transform: rotate(45deg) translate(-2px, -2px);
}

details[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

details[open] > summary {
  border-bottom: 3px solid var(--paper-2);
}

.resposta {
  padding: 10px 16px 4px;
}

/* ——— Rodapé ——— */
.rodape {
  padding-top: 6px;
  padding-bottom: 36px;
  color: var(--ink);
  font-size: 0.9375rem;
  text-align: center;
}

.rodape ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  font-family: var(--pixel);
  font-size: 1.25rem;
}

.rodape a {
  color: var(--ink);
}

.rodape p {
  margin: 0 0 4px;
}

.rodape .marcas {
  color: var(--ink);
  opacity: 0.85;
  font-size: 0.8125rem;
}

/* ——— 404 ——— */
.perdido ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.perdido a {
  font-family: var(--pixel);
  font-size: 1.25rem;
}

/* Celular: na regra, o cadeado fica ao lado do título e o texto usa a largura toda; a abertura fica mais justa,
   para o botão da App Store aparecer já na primeira tela. */
@media (max-width: 639px) {
  .hero {
    padding-top: 2px;
  }

  .hero .lead {
    font-size: 1.125rem;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .regra {
    display: block;
    padding-top: 14px;
  }

  .regra > img {
    float: left;
    width: 44px;
    height: 44px;
    margin: 0 12px 6px 0;
  }

  .regra h3 {
    margin-top: 8px;
    min-height: 40px;
  }

  .regra-texto {
    clear: left;
  }

  .pro-topo {
    align-items: start;
  }
}

/* ——— Telas largas ——— */
@media (min-width: 640px) {
  .destaques {
    grid-template-columns: 1fr 1fr;
  }

  .planos {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

@media (min-width: 720px) {
  .painel {
    padding: 30px 34px 32px;
  }

  h1 {
    font-size: 3rem;
  }

  .passos {
    grid-template-columns: repeat(3, 1fr);
  }

}

@media (min-width: 980px) {
  .pro-meio {
    grid-template-columns: 1fr 240px;
    gap: 40px;
  }

  .pro-esq {
    display: block;
  }

  .celular-pro {
    width: 100%;
  }

  .pro-lista {
    margin-bottom: 26px;
  }

  .planos {
    margin-bottom: 0;
  }
}

@media (min-width: 820px) {
  .galeria {
    margin: 0;
    padding: 6px 0 0;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 250px));
    justify-content: center;
    gap: 34px 48px;
    overflow: visible;
  }

  .dica {
    display: none;
  }
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    justify-items: start;
    text-align: left;
    gap: 0 40px;
    padding: 36px 0 52px;
    align-items: center;
  }

  .hero-palco {
    justify-self: center;
  }

  .cena-hero {
    --px: 4;
  }

  .chao {
    bottom: calc(5px * 4);
    height: calc(6px * 4);
  }

  .hero .lead {
    margin-left: 0;
  }

  .destaques {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Celular: o menu vira uma grade 2 × 2, igual em todas as línguas. As 10 línguas ficam numa fila só, que desliza
   (como a galeria), com a língua da página primeiro; assim o botão da App Store continua na primeira tela. */
@media (max-width: 560px) {
  .idiomas {
    flex-wrap: nowrap;
  }

  .idiomas .rotulo {
    display: none;
  }

  .idiomas ul {
    flex-wrap: nowrap;
    width: calc(100% + 2 * var(--gutter));
    margin: 0 calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .idiomas ul::-webkit-scrollbar {
    display: none;
  }

  .idiomas li {
    flex: none;
    margin: 0;
  }

  .idiomas li.atual {
    order: -1;
  }

  .idiomas a {
    white-space: nowrap;
  }

  .menu {
    width: 100%;
  }

  .menu ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .menu a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Telas estreitas (até 400 px): título um pouco menor, para não quebrar no meio. */
@media (max-width: 400px) {
  h1 {
    font-size: 2.25rem;
  }

  .painel {
    padding: 18px 16px 20px;
  }
}

/* Reduzir movimento: a cena fica parada no primeiro quadro. */
@media (prefers-reduced-motion: reduce) {
  .cena {
    animation: none;
  }

  /* Sem movimento: o quadro aparece pronto (última etapa). */
  .quadro-pintando {
    animation: none;
    background-position: 100% 0;
  }

  .menu a:active,
  .idiomas a:active,
  .selo:active,
  .botao:active {
    transform: none;
  }
}

@media print {
  .ceu,
  .pular,
  .menu,
  .idiomas,
  .indice,
  .cena,
  .botao,
  .selo,
  .galeria {
    display: none;
  }

  body {
    background: #fff;
  }

  .painel {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  a {
    color: inherit;
  }
}

/* ——— Japonês, coreano e chinês ———
   Texto corrido: fonte do sistema, com a pilha CJK da língua depois das latinas (vale também para os nomes das
   línguas no seletor e no 404 das outras páginas). Títulos, menus e botões: a Jersey 20 para o latim e a fonte pixel
   da língua para o resto. As fontes pixel só ficam nítidas em múltiplos da grade delas: DotGothic16 (ja) em 16, 32 e
   48 px; Galmuri11 (ko) e Fusion Pixel 12px (zh) em 12, 24, 36 e 48 px. Por isso, nessas páginas os tamanhos são
   fixos em px, a altura de linha também, e o que seria pequeno demais para a grade (rótulos de 17-18 px no coreano e
   no chinês) fica na fonte do sistema. Sem espaçamento negativo entre letras. */
:lang(ja) {
  --cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo;
}

:lang(ko) {
  --cjk: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic";
}

:lang(zh-Hans) {
  --cjk: "PingFang SC", "Noto Sans SC", "Microsoft YaHei";
}

:lang(zh-Hant) {
  --cjk: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei";
}

:lang(ja),
:lang(ko),
:lang(zh) {
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, var(--cjk), sans-serif;
  --pixel: "Jersey 20", var(--cjk), sans-serif;
}

/* A fonte pixel da língua só nas páginas dela (nas outras, o nome no seletor fica na fonte do sistema). */
html:lang(ja),
html:lang(ja) :lang(ja) {
  --pixel: "Jersey 20", "DotGothic16", var(--cjk), sans-serif;
}

html:lang(ko),
html:lang(ko) :lang(ko) {
  --pixel: "Jersey 20", "Galmuri11", var(--cjk), sans-serif;
}

html:lang(zh-Hans),
html:lang(zh-Hans) :lang(zh-Hans) {
  --pixel: "Jersey 20", "Fusion Pixel 12px SC", var(--cjk), sans-serif;
}

html:lang(zh-Hant),
html:lang(zh-Hant) :lang(zh-Hant) {
  --pixel: "Jersey 20", "Fusion Pixel 12px TC", var(--cjk), sans-serif;
}

html:lang(ja) body,
html:lang(zh) body {
  line-height: 1.75;
  line-break: strict;
}

/* Coreano: quebra de linha nos espaços, como se escreve. */
html:lang(ko) body {
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
}

html:lang(ja) h1,
html:lang(ja) h2,
html:lang(ja) h3,
html:lang(ja) summary,
html:lang(ko) h1,
html:lang(ko) h2,
html:lang(ko) h3,
html:lang(ko) summary,
html:lang(zh) h1,
html:lang(zh) h2,
html:lang(zh) h3,
html:lang(zh) summary {
  letter-spacing: 0;
}

/* Japonês (grade de 16 px). Seletores sem :is(), para cada um manter a própria especificidade. Os títulos dos
   cartões (passos, destaques, planos) ficam em 16 px: em 32 px quebrariam em três linhas nos cartões estreitos. */
html:lang(ja) .pular,
html:lang(ja) .menu a,
html:lang(ja) .idiomas .rotulo,
html:lang(ja) .idiomas a:lang(ja),
html:lang(ja) .rodape ul,
html:lang(ja) .chamada,
html:lang(ja) summary,
html:lang(ja) .galeria figcaption strong,
html:lang(ja) .selo .pequeno,
html:lang(ja) .etiqueta-teste,
html:lang(ja) .nota-plano,
html:lang(ja) .passo h3,
html:lang(ja) .destaque h3,
html:lang(ja) .plano h3 {
  font-size: 16px;
  line-height: 24px;
}

html:lang(ja) h2,
html:lang(ja) h3,
html:lang(ja) .resumo h2,
html:lang(ja) .indice h2,
html:lang(ja) .contato h2,
html:lang(ja) .botao,
html:lang(ja) .selo .grande,
html:lang(ja) .painel > h1,
html:lang(ja) .bloco > h2,
html:lang(ja) .pro-topo h2,
html:lang(ja) .fim h2 {
  font-size: 32px;
  line-height: 44px;
}

/* Coreano e chinês (grade de 12 px). */
html:lang(ko) .pular,
html:lang(ko) .menu a,
html:lang(ko) .rodape ul,
html:lang(ko) .chamada,
html:lang(ko) summary,
html:lang(ko) h2,
html:lang(ko) h3,
html:lang(ko) .resumo h2,
html:lang(ko) .indice h2,
html:lang(ko) .contato h2,
html:lang(ko) .galeria figcaption strong,
html:lang(ko) .botao,
html:lang(zh) .pular,
html:lang(zh) .menu a,
html:lang(zh) .rodape ul,
html:lang(zh) .chamada,
html:lang(zh) summary,
html:lang(zh) h2,
html:lang(zh) h3,
html:lang(zh) .resumo h2,
html:lang(zh) .indice h2,
html:lang(zh) .contato h2,
html:lang(zh) .galeria figcaption strong,
html:lang(zh) .botao {
  font-size: 24px;
  line-height: 32px;
}

html:lang(ko) .painel > h1,
html:lang(ko) .bloco > h2,
html:lang(ko) .pro-topo h2,
html:lang(ko) .fim h2,
html:lang(zh) .painel > h1,
html:lang(zh) .bloco > h2,
html:lang(zh) .pro-topo h2,
html:lang(zh) .fim h2 {
  font-size: 36px;
  line-height: 48px;
}

/* Rótulos pequenos: na fonte do sistema (a Jersey 20 continua no latim). */
html:lang(ko) .idiomas .rotulo,
html:lang(ko) .idiomas a:lang(ko),
html:lang(ko) .selo .pequeno,
html:lang(ko) .etiqueta-teste,
html:lang(ko) .nota-plano,
html:lang(zh) .idiomas .rotulo,
html:lang(zh) .idiomas a:lang(zh),
html:lang(zh) .selo .pequeno,
html:lang(zh) .etiqueta-teste,
html:lang(zh) .nota-plano {
  font-family: "Jersey 20", var(--text);
}

/* Telas largas: títulos das páginas e das seções do início maiores. */
@media (min-width: 720px) {
  html:lang(ja) .painel > h1,
  html:lang(ja) .bloco > h2,
  html:lang(ja) .fim h2,
  html:lang(ko) .painel > h1,
  html:lang(zh) .painel > h1 {
    font-size: 48px;
    line-height: 64px;
  }
}