/* ============================================================
   app.css — a área do aluno com a apresentação de uma app

   Vem do protótipo que está em referencia/prototipo-app.html. Quem
   quiser comparar abre-o num telemóvel a 390×844: é a referência, e
   quando isto e ele discordarem, ele ganha.

   ---- Porque é que tudo se chama «em-» ----

   O protótipo usa nomes curtos e naturais: .row, .tile, .btn, .quiz,
   .lesson, .k, .n, .sub. Vinte e seis deles já existem no css/styles.css
   e no css/aula.css, que esta página continua a carregar — é o que veste
   as entregas, a compra de um módulo, a conclusão do curso e a caixa de
   perguntas, e nada disso vai ser reescrito.

   Duas regras chamadas .row a cair no mesmo elemento não dão um erro:
   dão uma delas a ganhar por acaso, conforme a ordem dos ficheiros. Por
   isso cada nome do protótipo ganha «em-» à frente. A correspondência
   continua a ser uma para uma — .tile é .em-tile — e a colisão deixa de
   ser possível.

   ---- Uma curva só ----

   Todo o movimento usa cubic-bezier(.32,.72,0,1). Arranca depressa e
   assenta devagar, que é como se move uma coisa com peso. Várias curvas
   na mesma interface fazem-na parecer feita por mãos diferentes.

   ---- O que se anima ----

   Transformações e opacidade, e quase nada mais. Animar a altura ou a
   posição obriga o browser a refazer o desenho da página a cada
   fotograma, e num telemóvel isso é a diferença entre correr e saltar.
   ============================================================ */

.app-nativa {
  /* ---- O papel ---- */
  --bg: #ECE7DD; --bg2: #E3DDD0;
  --tile: #F9F7F2; --tile2: #F1EDE5;
  --mute: #6B6357; --faint: #9A9184;
  --on-ink: #F9F7F2;

  /* ---- As cinco cores das secções, mais o vermelho do erro ----
     Cada curso e cada zona leva uma. Doze cartões da mesma cor não se
     navegam: procura-se pelo título, palavra a palavra. A versão «-s» é
     o mesmo tom lavado, para fundos. */
  --amber-s: #F3E6CC;
  --green: #2F7A4F;   --green-s: #DCEDE1;
  --wine: #8E2F3C;    --wine-s: #F3DDE0;
  --petrol: #1F6F78;  --petrol-s: #D6EBED;
  --plum: #6A4C93;    --plum-s: #E7DFF2;
  --red: #B0453F;     --red-s: #F8E3E0;

  /* ---- As sombras ----
     Em camadas, e com um realce branco por dentro na borda de cima. É
     esse realce que faz um cartão parecer levantado do papel em vez de
     colado a ele — uma sombra só, por forte que seja, não o consegue. */
  --sh: 0 1px 0 rgba(255,255,255,.85) inset, 0 12px 28px -16px rgba(70,52,24,.38), 0 2px 6px -3px rgba(70,52,24,.16);
  --sh-lg: 0 28px 50px -22px rgba(70,52,24,.5), 0 8px 16px -10px rgba(70,52,24,.22);
  /* ---- Sobre tinta ----
     Um número verde de #2F7A4F sobre um fundo de tinta não se lê: foi
     escolhido para contrastar com papel. Estes são os mesmos sinais com
     a luz do outro lado, e existem para o cartão de resultado das
     calculadoras. */
  --on-ink-2: rgba(249,247,242,.62);
  --green-ink: #6FC093;
  --amber-ink: #E3B45C;
  --red-ink: #E8837B;
  --cold-ink: #8FB4D4;

  --scrim-cor: rgba(25,21,16,.34);
  --glass: rgba(236,231,221,.78);

  --disp: "Fraunces", Georgia, "Times New Roman", serif;
  --corpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  /* A largura de um cartão do carrossel. Menos do que o ecrã, de
     propósito: se coubesse inteiro não se via que há outro ao lado. */
  --cw: min(64vw, 290px);

  background: var(--bg);
  background-image: linear-gradient(165deg, var(--bg) 0%, var(--bg2) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--corpo);
  /* Um deslize horizontal de um pixel lê-se como avaria. Numa versão
     anterior a barra de topo saía 117px para fora do ecrã no iPhone. */
  overflow-x: clip;
  min-height: 100dvh;
}

/* ---- O modo escuro, e porque é que não liga sozinho ----

   O protótipo traz um modo escuro completo, e está aqui inteiro. O que
   não está é o @media (prefers-color-scheme: dark) que o ligava ao
   telemóvel de quem entra.

   A razão é simples: esta página carrega também o css/styles.css e o
   css/aula.css, e nenhum dos dois tem modo escuro. As entregas, a compra
   de um módulo, a conclusão do curso e a caixa de perguntas continuam
   vestidas por eles. Ligar isto ao sistema dava meia página escura e
   meia clara na mesma rolagem, que é pior do que não ter modo escuro
   nenhum.

   Fica por escolha explícita, que hoje ninguém faz. O dia em que o resto
   da área tiver as suas cores em variáveis, isto acorda com quatro
   linhas: o @media à volta do bloco de baixo. */
:root[data-theme="dark"] .app-nativa {
  --bg: #15120E; --bg2: #1B1712; --tile: #221E18; --tile2: #2B261F;
  --ink: #F2ECE1; --mute: #ADA392; --faint: #7F7667; --line: #38322A; --line2: #443C32;
  --amber: #E2A74B; --amber-s: #3A2E1A;
  --green: #66BA8A; --green-s: #1C3226;
  --wine: #E27E8B;  --wine-s: #3C2327;
  --petrol: #5CBAC4; --petrol-s: #173338;
  --plum: #B59DE2;  --plum-s: #2E2640;
  --red: #E5776F;   --red-s: #3E2320;
  --on-ink: #15120E;
  --sh: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 30px -16px rgba(0,0,0,.75), 0 2px 6px -3px rgba(0,0,0,.5);
  --sh-lg: 0 28px 50px -20px rgba(0,0,0,.8), 0 8px 16px -10px rgba(0,0,0,.5);
  --scrim-cor: rgba(0,0,0,.55); --glass: rgba(21,18,14,.78);
  color-scheme: dark;
}

/* ---- O básico, só dentro da app ---- */
.app-nativa .em-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em }
.app-nativa .em-app { max-width: 480px; margin: 0 auto; padding-inline: 16px; position: relative }
.app-nativa .em-view { padding-block: 12px 40px }
/* Com as duas barras fixas em baixo — a da aula e a de navegação — o
   fim do conteúdo tem de parar acima das duas. */
.app-nativa .em-view.em-has-bar { padding-bottom: 180px }
.app-nativa svg { display: block }
.app-nativa h1, .app-nativa h2, .app-nativa h3 {
  font-family: var(--disp); font-weight: 600; letter-spacing: -.015em; text-wrap: balance;
}
.app-nativa :focus-visible { outline: 2.5px solid var(--amber); outline-offset: 2px; border-radius: 12px }

/* ---- O toque ----
   Qualquer coisa tocável encolhe enquanto o dedo está em cima. É o sinal
   mais baixo que existe de que o gesto foi recebido, e é o que separa
   uma app de uma página: numa página, carregar num cartão não responde
   nada até a página seguinte chegar. */
.app-nativa .em-tap {
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.app-nativa .em-tap:active { transform: scale(.965) }

/* ============================================================
   1 · INÍCIO
   ============================================================ */

/* A cápsula de cima. A barra antiga era uma faixa de canto a canto com a
   marca em maiúsculas e três ligações a deslizar por falta de espaço. O
   nome da marca sai: quem está aqui já sabe onde está. */
.app-nativa .em-hello {
  display: flex; align-items: center; gap: 12px;
  background: var(--tile); border-radius: 999px; padding: 8px;
  box-shadow: var(--sh);
}
.app-nativa .em-avatar {
  width: 50px; height: 50px; border-radius: 50%; flex: none;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: radial-gradient(circle at 30% 25%, #D9A04A, #8B5A12 70%);
  color: #FFF8EC; font-family: var(--disp); font-size: 1.15rem; font-weight: 600;
  box-shadow: 0 6px 14px -6px rgba(139,90,18,.7), 0 0 0 3px var(--tile);
}
.app-nativa .em-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover }
.app-nativa .em-hello-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2 }
.app-nativa .em-hello-txt .em-hi {
  font-family: var(--disp); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em;
  /* O nome pode ser comprido. Uma linha, e o que não cabe corta-se:
     duas linhas mudavam a altura da cápsula. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-nativa .em-hello-txt .em-sub {
  font-size: .78rem; color: var(--mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-nativa .em-hello-acts { display: flex; gap: 4px; flex: none }
.app-nativa .em-ibtn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: none;
  display: grid; place-items: center; color: var(--ink); cursor: pointer;
}
.app-nativa .em-ibtn svg { width: 22px; height: 22px; fill: currentColor }
.app-nativa .em-ibtn:active { background: var(--tile2) }

.app-nativa .em-sec-h {
  display: flex; align-items: baseline; justify-content: space-between; margin: 26px 4px 2px;
}
.app-nativa .em-sec-h h2 { font-size: 1.25rem; margin: 0 }
.app-nativa .em-sec-h .em-cnt { font-size: .8rem; color: var(--faint) }

/* ---- O carrossel ----
   Os cursos a meio deixam de ser uma grelha e passam a uma pilha que se
   arrasta. É a única zona do ecrã com profundidade, e é de propósito: é
   o que a pessoa veio fazer.

   O CSS trata do encaixe e do recorte. A transformação de cada cartão é
   escrita pelo JS a cada scroll, porque depende da distância ao centro e
   isso o CSS não sabe calcular. */
.app-nativa .em-carousel { margin-inline: -16px; position: relative }
.app-nativa .em-car-track {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  /* O recorte lateral vem do padding e não da margem do primeiro
     cartão: com margem, o encaixe do último falha. */
  padding: 22px calc((100% - var(--cw)) / 2) 34px;
  position: relative; -webkit-overflow-scrolling: touch;
}
.app-nativa .em-car-track::-webkit-scrollbar { display: none }
.app-nativa .em-ccard {
  flex: 0 0 var(--cw); scroll-snap-align: center; scroll-snap-stop: always;
  position: relative; background: var(--tile); border-radius: 24px;
  box-shadow: var(--sh-lg); padding: 20px 18px 18px;
  display: flex; flex-direction: column; gap: 10px; min-height: 340px;
  will-change: transform; transform-origin: 50% 50%; cursor: pointer;
  border: 0; text-align: left; color: inherit;
}
.app-nativa .em-ccard-top { display: flex; align-items: center; justify-content: space-between }
/* O --cut é o truque dos ícones: as partes recortadas do desenho são
   pintadas com a cor do fundo onde ele está, e não com branco. Sem isto,
   um ícone dentro de um quadrado de cor fica com manchas claras. */
.app-nativa .em-ic-c {
  width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center;
  background: var(--cs); color: var(--c); --cut: var(--cs);
}
.app-nativa .em-ic-c svg { width: 32px; height: 32px; fill: currentColor }
.app-nativa .em-pill {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; background: var(--c); color: var(--on-ink);
  white-space: nowrap;
}
.app-nativa .em-ckind {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--faint); margin-top: 6px;
}
.app-nativa .em-ccard h3 { font-size: 1.42rem; line-height: 1.12; margin: 0 }
.app-nativa .em-ccard .em-csub { font-size: .86rem; color: var(--mute); line-height: 1.4; margin: 0 }
.app-nativa .em-ccard .em-grow { flex: 1 }

/* ---- A escala do jigger ----
   Vinte traços, cada um cinco por cento. Uma barra cheia diz «78%»;
   isto diz «quinze de vinte», que é uma quantidade que se vê sem ler. O
   nome vem do medidor: é a peça do bar que marca doses. */
.app-nativa .em-scale { display: flex; align-items: flex-end; gap: 3px; height: 22px }
.app-nativa .em-scale i {
  flex: 1; height: 9px; border-radius: 2px; background: var(--line);
  transition: background-color .4s;
}
/* Cada quinto traço é mais alto, como num medidor a sério: dá a leitura
   de um quarto e de meio sem contar traço a traço. */
.app-nativa .em-scale i:nth-child(5n) { height: 18px }
.app-nativa .em-scale i.em-on { background: var(--c) }

.app-nativa .em-cmeta { display: flex; justify-content: space-between; font-size: .8rem; color: var(--mute) }
.app-nativa .em-cbtn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; border-radius: 14px; border: 1.5px solid var(--line);
  background: var(--tile); font-weight: 600; font-size: .95rem;
  color: inherit; cursor: pointer;
}
.app-nativa .em-cbtn svg { width: 16px; height: 16px; fill: currentColor }
.app-nativa .em-ccard.em-more {
  align-items: center; justify-content: center; text-align: center;
  background: var(--tile2); box-shadow: var(--sh); gap: 12px;
}
.app-nativa .em-ccard.em-more .em-ic-c { width: 64px; height: 64px; border-radius: 50% }

.app-nativa .em-dots { display: flex; justify-content: center; gap: 7px; margin-top: -12px }
.app-nativa .em-dots button {
  width: 9px; height: 9px; border-radius: 999px; border: 1.5px solid var(--faint);
  padding: 0; background: none; cursor: pointer;
  transition: width .35s var(--ease), background-color .25s, border-color .25s;
}
.app-nativa .em-dots button.em-on { width: 30px; background: var(--amber); border-color: var(--amber) }

/* ---- Os mosaicos ----
   Duas colunas, também no telemóvel. Uma lista de uma coluna com doze
   coisas obriga a doze deslizes; em duas, o mesmo cabe em seis, e a cor
   de cada um faz a distinção que o título faria. */
.app-nativa .em-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px }
.app-nativa .em-tile {
  background: var(--tile); border-radius: 28px; box-shadow: var(--sh);
  padding: 22px 12px 18px; min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; color: var(--c); --cut: var(--tile);
  border: 0; cursor: pointer;
}
.app-nativa .em-tile svg { width: 54px; height: 54px; fill: currentColor }
.app-nativa .em-tile .em-tl { color: var(--ink); font-weight: 700; font-size: 1rem; letter-spacing: .01em; line-height: 1.2 }
.app-nativa .em-tile .em-tm { color: var(--faint); font-size: .76rem; margin-top: -6px }
.app-nativa .em-tile.em-wide {
  grid-column: 1 / -1; flex-direction: row; justify-content: flex-start;
  text-align: left; min-height: 0; padding: 20px 22px; gap: 16px;
}
.app-nativa .em-tile.em-wide .em-tx { display: flex; flex-direction: column; gap: 4px }
.app-nativa .em-tile.em-wide .em-tm { margin: 0; font-size: .82rem; color: var(--mute); line-height: 1.4 }

/* ============================================================
   2 · AS BARRAS E AS LINHAS DAS PÁGINAS DE DENTRO
   ============================================================ */

/* A barra de topo em vidro. Fica colada ao cimo e deixa ver o conteúdo a
   passar por baixo — uma faixa opaca deixa uma linha de corte a meio do
   que se está a ler. */
.app-nativa .em-topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  display: flex; align-items: center; gap: 12px;
  margin-inline: -16px; padding: 10px 16px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
}
.app-nativa .em-topbar .em-tt {
  flex: 1; min-width: 0; text-align: center; font-weight: 600; font-size: .95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-nativa .em-sq {
  width: 46px; height: 46px; border-radius: 15px; background: var(--tile);
  box-shadow: var(--sh); display: grid; place-items: center; flex: none;
  border: 0; color: inherit; cursor: pointer;
}
.app-nativa .em-sq svg { width: 21px; height: 21px }
/* O traço dos ícones desenhados a linha, em contraste com os cheios. */
.app-nativa .em-st { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }

/* ---- As linhas ----
   Uma aula, uma opção de menu, um curso à venda: tudo o que é uma lista
   de coisas tocáveis usa a mesma linha. Sessenta e quatro pixéis de
   altura mínima, que é o que um dedo acerta sem pensar. */
.app-nativa .em-rows { display: flex; flex-direction: column; gap: 10px }
.app-nativa .em-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--tile); border-radius: 18px; box-shadow: var(--sh);
  padding: 14px 16px; min-height: 64px; border: 0; color: inherit; cursor: pointer;
}
.app-nativa .em-row .em-ri {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .82rem; color: var(--mute);
  border: 1.5px solid var(--line);
}
.app-nativa .em-row .em-ri svg { width: 17px; height: 17px }
.app-nativa .em-row .em-ri.em-done { background: var(--green); border-color: var(--green); color: var(--on-ink) }
.app-nativa .em-row .em-ri.em-now { border-color: var(--amber); color: var(--amber); border-width: 2px }
.app-nativa .em-row .em-ri.em-lock { border-style: dashed; color: var(--faint) }
.app-nativa .em-row .em-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3 }
.app-nativa .em-row .em-rt b { font-weight: 600; font-size: .97rem }
.app-nativa .em-row .em-rt small { font-size: .8rem; color: var(--mute) }
.app-nativa .em-row .em-chev { width: 18px; height: 18px; color: var(--faint); flex: none }
/* A aula que está aberta neste momento, vista de dentro da lista. */
.app-nativa .em-row.em-cur { box-shadow: var(--sh), 0 0 0 2px var(--amber) inset }

/* ============================================================
   3 · CURSO
   ============================================================ */

.app-nativa .em-c-hero {
  display: flex; align-items: center; gap: 18px; margin-top: 14px;
  background: var(--tile); border-radius: 28px; box-shadow: var(--sh); padding: 20px;
}
/* O anel. Uma barra de progresso de quatro pixéis de altura é uma coisa
   que se ignora; um anel com o número no meio é o assunto do cartão. */
.app-nativa .em-ring { position: relative; width: 104px; height: 104px; flex: none }
.app-nativa .em-ring svg { width: 104px; height: 104px; transform: rotate(-90deg) }
.app-nativa .em-ring .em-bgc { fill: none; stroke: var(--tile2); stroke-width: 9 }
.app-nativa .em-ring .em-fgc {
  fill: none; stroke: var(--c); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset .9s var(--ease);
}
.app-nativa .em-ring .em-rv {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 1.35rem; font-variant-numeric: tabular-nums;
}
.app-nativa .em-c-hero .em-tx { min-width: 0; display: flex; flex-direction: column; gap: 4px }
.app-nativa .em-c-hero h1 { font-size: 1.45rem; line-height: 1.12; margin: 0 }
.app-nativa .em-c-hero .em-k { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint) }
.app-nativa .em-c-hero .em-m { font-size: .84rem; color: var(--mute) }

/* O cartão escuro da próxima aula. É a única peça de tinta cheia nesta
   vista, e é onde o dedo vai. */
.app-nativa .em-next {
  margin-top: 14px; border-radius: 28px; padding: 20px;
  background: var(--ink); color: var(--on-ink);
  display: flex; flex-direction: column; gap: 6px;
}
.app-nativa .em-next .em-k { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; opacity: .7 }
.app-nativa .em-next h2 { font-size: 1.3rem; color: var(--on-ink); margin: 0 }
.app-nativa .em-next p { font-size: .86rem; opacity: .75; margin: 0 }
.app-nativa .em-next .em-go {
  margin-top: 10px; align-self: flex-start;
  display: flex; align-items: center; gap: 8px;
  background: var(--amber); color: #1B1305; font-weight: 700;
  padding: 12px 20px; border-radius: 14px; border: 0; cursor: pointer;
}
.app-nativa .em-next .em-go svg { width: 15px; height: 15px; fill: currentColor }
.app-nativa .em-sec-t { font-size: 1.1rem; margin: 26px 4px 10px }

/* ---- Os módulos que se abrem e fecham ----
   O grid-template-rows de 0fr para 1fr anima uma altura desconhecida sem
   a medir em JS. É o único sítio onde se anima coisa que não seja
   transformação, e é porque a alternativa é pior: um max-height fixo
   corta o módulo que tiver uma aula a mais. */
.app-nativa .em-sg { background: var(--tile); border-radius: 20px; box-shadow: var(--sh); overflow: hidden }
.app-nativa .em-sg-h {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 16px; min-height: 66px; border: 0; background: none; color: inherit; cursor: pointer;
}
.app-nativa .em-sg-h .em-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3 }
.app-nativa .em-sg-h .em-tx b { font-weight: 600; font-size: .95rem }
.app-nativa .em-sg-h .em-tx small { font-size: .76rem; color: var(--faint) }
.app-nativa .em-spill {
  flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; background: var(--cs); color: var(--c);
}
.app-nativa .em-sg-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease) }
.app-nativa .em-sg-b > div { overflow: hidden }
.app-nativa .em-sg.em-open .em-sg-b { grid-template-rows: 1fr }
/* O «>» é o que impede a seta de cada aula de rodar com o módulo: as
   linhas vivem dentro do acordeão, e sem ele a regra apanhava-as a
   todas — cinco setas a apontar para baixo quando só a do cabeçalho o
   devia fazer. */
.app-nativa .em-sg > .em-sg-h .em-chev {
  width: 18px; height: 18px; color: var(--faint); flex: none;
  transition: transform .3s var(--ease);
}
.app-nativa .em-sg.em-open > .em-sg-h .em-chev { transform: rotate(90deg) }
.app-nativa .em-sg-b .em-rows { padding: 0 12px 12px }
.app-nativa .em-sg-b .em-row { box-shadow: none; background: var(--tile2); min-height: 58px }
.app-nativa .em-sg-b .em-row.em-cur { box-shadow: 0 0 0 2px var(--amber) inset }

/* ============================================================
   4 · AULA
   ============================================================ */

.app-nativa .em-lesson { margin-top: 10px }
.app-nativa .em-lesson .em-kick { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint) }
.app-nativa .em-lesson h1 { font-size: 2.05rem; line-height: 1.05; margin: 6px 0 0 }
.app-nativa .em-lesson .em-lsub { font-family: var(--disp); font-size: 1.15rem; color: var(--mute); margin: 4px 0 0 }
.app-nativa .em-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px }
.app-nativa .em-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 500; padding: 6px 12px; border-radius: 999px;
  background: var(--tile); box-shadow: var(--sh); color: var(--mute);
}
.app-nativa .em-chip svg { width: 12px; height: 12px; fill: currentColor }

/* O corpo da aula vem do Firestore e é HTML escrito à mão. Estas regras
   vestem-no sem lhe tocar: é por isso que apontam a etiquetas e não a
   classes. */
.app-nativa .em-corpo { font-size: 1.02rem; line-height: 1.7; color: var(--ink); max-width: 65ch; margin-top: 18px }
.app-nativa .em-corpo > * + * { margin-top: 12px }
.app-nativa .em-corpo h2 { font-size: 1.35rem; margin-top: 28px }
.app-nativa .em-corpo h3 { font-size: 1.2rem; margin-top: 26px }
.app-nativa .em-corpo ul, .app-nativa .em-corpo ol { padding-left: 22px }
.app-nativa .em-corpo li + li { margin-top: 6px }
.app-nativa .em-corpo blockquote {
  margin: 22px 0 0; padding: 18px 20px; border-radius: 22px;
  background: var(--amber-s); font-family: var(--disp); font-size: 1.12rem; line-height: 1.45;
}
.app-nativa .em-corpo img, .app-nativa .em-corpo iframe, .app-nativa .em-corpo video {
  max-width: 100%; border-radius: 18px;
}
/* Uma tabela larga rola dentro do seu contentor. Sem isto é a página
   inteira que rola para o lado. */
.app-nativa .em-corpo table { display: block; overflow-x: auto; max-width: 100% }

.app-nativa .em-quote {
  margin: 22px 0 0; padding: 18px 20px; border-radius: 22px;
  background: var(--amber-s); font-family: var(--disp); font-size: 1.12rem; line-height: 1.45;
}
.app-nativa .em-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px }
.app-nativa .em-fact {
  background: var(--tile); border-radius: 18px; box-shadow: var(--sh);
  padding: 14px 10px; text-align: center; min-width: 0;
}
.app-nativa .em-fact .em-v { font-family: var(--mono); font-size: 1.12rem; color: var(--amber); white-space: nowrap }
.app-nativa .em-fact .em-l { font-size: .72rem; color: var(--mute); line-height: 1.3; margin-top: 4px }
.app-nativa .em-ph {
  margin-top: 18px; padding: 18px; border-radius: 20px;
  border: 1.5px dashed var(--line); color: var(--mute); font-size: .9rem;
}

/* ---- O quiz ----
   Uma pergunta de cada vez, e a explicação a aparecer logo depois da
   resposta. Todas as perguntas na mesma página davam uma folha de exame,
   e uma folha de exame lê-se a saltar. */
.app-nativa .em-quiz { margin-top: 28px; background: var(--tile); border-radius: 26px; box-shadow: var(--sh); overflow: hidden }
.app-nativa .em-qz-top { padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 10px }
.app-nativa .em-qz-top .em-r {
  display: flex; justify-content: space-between;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--mute);
}
.app-nativa .em-qz-bar { height: 5px; border-radius: 9px; background: var(--tile2); overflow: hidden }
.app-nativa .em-qz-bar i {
  display: block; height: 100%; width: 0; background: var(--amber); border-radius: 9px;
  transition: width .45s var(--ease);
}
.app-nativa .em-qz-body { padding: 4px 18px 18px }
.app-nativa .em-q { font-weight: 600; font-size: 1.06rem; line-height: 1.4; margin-bottom: 14px }
.app-nativa .em-opts { display: flex; flex-direction: column; gap: 9px }
.app-nativa .em-opt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  min-height: 52px; padding: 12px 14px; border-radius: 15px;
  background: var(--tile2); font-size: .95rem; line-height: 1.35;
  border: 0; color: inherit; cursor: pointer; width: 100%;
}
.app-nativa .em-opt .em-k {
  width: 28px; height: 28px; flex: none; border-radius: 9px;
  display: grid; place-items: center; font-family: var(--mono); font-size: .75rem;
  background: var(--tile); color: var(--mute);
}
.app-nativa .em-opt.em-ok { background: var(--green-s); box-shadow: 0 0 0 2px var(--green) inset }
.app-nativa .em-opt.em-ok .em-k { background: var(--green); color: var(--on-ink) }
.app-nativa .em-opt.em-no { background: var(--red-s); box-shadow: 0 0 0 2px var(--red) inset }
.app-nativa .em-opt.em-no .em-k { background: var(--red); color: var(--on-ink) }
.app-nativa .em-opt:disabled { cursor: default }
.app-nativa .em-exp { margin-top: 12px; font-size: .9rem; color: var(--mute); line-height: 1.5; animation: em-rise .3s var(--ease) both }
.app-nativa .em-exp b { color: var(--ink) }
.app-nativa .em-qz-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 18px 18px }
.app-nativa .em-done-box { padding: 26px 18px 24px; text-align: center; animation: em-rise .35s var(--ease) both }
.app-nativa .em-score {
  width: 92px; height: 92px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-size: 1.5rem;
  background: var(--green-s); color: var(--green); box-shadow: 0 0 0 3px var(--green) inset;
  animation: em-pop .45s var(--ease) both;
}
.app-nativa .em-score.em-falhou { background: var(--red-s); color: var(--red); box-shadow: 0 0 0 3px var(--red) inset }
.app-nativa .em-done-box h3 { font-size: 1.25rem; margin: 0 }
.app-nativa .em-done-box p { color: var(--mute); font-size: .92rem; margin-top: 4px }

/* ---- Os botões ---- */
.app-nativa .em-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 22px; border-radius: 15px;
  background: var(--ink); color: var(--on-ink); font-weight: 600;
  border: 0; cursor: pointer; font-size: 1rem;
}
.app-nativa .em-btn.em-ghost { background: var(--tile); color: var(--ink); box-shadow: var(--sh) }
.app-nativa .em-btn.em-block { width: 100% }
.app-nativa .em-btn:disabled { opacity: .5; cursor: default }
.app-nativa .em-btn svg { width: 17px; height: 17px }

/* ---- A barra fixa de baixo ---- */
.app-nativa .em-bbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--glass);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
}
.app-nativa .em-bbar .em-in { max-width: 448px; margin: 0 auto; display: flex; gap: 10px }
.app-nativa .em-bbar .em-btn { flex: 1 }
.app-nativa .em-bbar .em-btn.em-ghost { flex: 0 0 auto }

/* ============================================================
   5 · CABEÇALHOS, PESQUISA E DIPLOMAS
   ============================================================ */

.app-nativa .em-pg-h { margin: 14px 4px 0 }
.app-nativa .em-pg-h h1 { font-size: 1.8rem; margin: 0 }
.app-nativa .em-pg-h p { color: var(--mute); font-size: .92rem; margin-top: 4px }

.app-nativa .em-search {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
  background: var(--tile); border-radius: 16px; box-shadow: var(--sh);
  padding: 0 14px; min-height: 52px;
}
.app-nativa .em-search svg { width: 19px; height: 19px; color: var(--faint); flex: none }
/* Dezasseis pixéis e não menos: abaixo disso o iPhone dá zoom ao campo
   quando se toca nele, e a página fica torta. */
.app-nativa .em-search input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--ink); outline: none; min-height: 50px;
}
.app-nativa .em-search input::placeholder { color: var(--faint) }

.app-nativa .em-filters {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 14px -16px 0; padding: 2px 16px 6px;
}
.app-nativa .em-filters::-webkit-scrollbar { display: none }
.app-nativa .em-fchip {
  flex: none; display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px; background: var(--tile);
  box-shadow: var(--sh); font-size: .85rem; font-weight: 500; color: var(--mute);
  border: 0; cursor: pointer;
}
.app-nativa .em-fchip .em-n { font-family: var(--mono); font-size: .75rem; color: var(--faint) }
.app-nativa .em-fchip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink) }
.app-nativa .em-fchip[aria-pressed="true"] .em-n { color: var(--on-ink); opacity: .7 }
.app-nativa .em-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none }
.app-nativa .em-muted-c { text-align: center; color: var(--faint); font-size: .8rem; margin-top: 14px }

/* O diploma. Um certificado não é um cartão com um botão: é um papel, e
   o recorte serrado em baixo é o que o diz sem escrever nada. */
.app-nativa .em-diploma {
  margin-top: 18px; background: var(--tile); border-radius: 28px;
  box-shadow: var(--sh-lg); padding: 10px;
}
.app-nativa .em-diploma .em-fr {
  border: 1.5px solid var(--amber); border-radius: 20px; padding: 26px 18px 20px;
  text-align: center; position: relative;
  background: repeating-linear-gradient(90deg, transparent 0 9px, var(--line) 9px 10px) bottom / 100% 7px no-repeat;
}
.app-nativa .em-diploma .em-k {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber); font-weight: 600;
}
.app-nativa .em-diploma h2 { font-size: 1.55rem; margin-top: 10px }
.app-nativa .em-diploma .em-who { font-family: var(--disp); font-size: 1.05rem; color: var(--mute); margin-top: 8px }
.app-nativa .em-diploma .em-st3 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 14px }
.app-nativa .em-diploma .em-st3 div { background: var(--tile2); border-radius: 14px; padding: 10px }
.app-nativa .em-diploma .em-st3 b { display: block; font-family: var(--mono); font-size: 1.1rem; font-weight: 400 }
.app-nativa .em-diploma .em-st3 span { font-size: .72rem; color: var(--mute) }
.app-nativa .em-diploma .em-code { font-size: .78rem; color: var(--faint); margin-bottom: 10px }
.app-nativa .em-acts { display: flex; gap: 10px; margin-top: 14px }
.app-nativa .em-acts .em-btn { flex: 1; padding: 0 12px }

/* ============================================================
   6 · AS FOLHAS QUE SOBEM DO FUNDO
   ============================================================
   Substituem os diálogos ao meio do ecrã. Num telemóvel uma caixa
   centrada obriga o polegar a subir até ao meio do vidro; uma folha
   chega onde a mão já está. O nome vem disso: é uma folha de papel que
   se levanta pelo fundo.

   As camadas são 80 para o véu e 90 para a folha, e não 40 e 50: a
   barra do modo de teste do administrador vive no 60 e tapava o título
   da folha. Só aparece nesse modo, mas é nesse modo que se prova tudo
   antes de pôr à venda. */
.app-nativa .em-scrim-folha {
  position: fixed; inset: 0; z-index: 80; background: var(--scrim-cor);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .32s var(--ease);
}
.app-nativa .em-scrim-folha.em-on { opacity: 1; pointer-events: auto }
.app-nativa .em-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  margin: 0 auto; max-width: 480px; max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--bg); border-radius: 30px 30px 0 0;
  box-shadow: 0 -10px 40px -10px rgba(0,0,0,.3);
  /* O visibility com atraso é o que impede a folha fechada de continuar
     a apanhar toques no fundo do ecrã. */
  transform: translateY(105%);
  transition: transform .42s var(--ease), visibility 0s linear .42s;
  visibility: hidden;
}
.app-nativa .em-sheet.em-on {
  transform: translateY(0); visibility: visible;
  transition: transform .42s var(--ease), visibility 0s;
}
/* Enquanto o dedo arrasta, a folha segue-o sem transição: com transição,
   a folha ficava sempre um pouco atrás da mão. */
.app-nativa .em-sheet.em-drag { transition: none }
.app-nativa .em-sheet:focus { outline: none }
.app-nativa .em-sh-head { padding: 10px 20px 8px; touch-action: none; cursor: grab; flex: none }
.app-nativa .em-grab { width: 40px; height: 5px; border-radius: 9px; background: var(--line); margin: 0 auto 14px }
.app-nativa .em-sh-title { display: flex; align-items: flex-start; gap: 12px }
.app-nativa .em-sh-title .em-tx { flex: 1; min-width: 0 }
.app-nativa .em-sh-title h2 { font-size: 1.45rem; line-height: 1.15; margin: 0 }
.app-nativa .em-sh-title p { color: var(--faint); font-size: .9rem; margin-top: 2px; overflow-wrap: anywhere }
.app-nativa .em-x {
  width: 40px; height: 40px; border-radius: 50%; background: var(--tile2);
  display: grid; place-items: center; flex: none; color: var(--mute);
  border: 0; cursor: pointer;
}
.app-nativa .em-x svg { width: 16px; height: 16px }
.app-nativa .em-sh-body {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 20px calc(22px + env(safe-area-inset-bottom, 0px));
}

/* As linhas de um menu dentro de uma folha. */
.app-nativa .em-mrow {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--tile); border-radius: 18px; padding: 14px 16px; min-height: 60px;
  box-shadow: var(--sh); margin-bottom: 10px; color: var(--c, var(--ink));
  --cut: var(--tile); border: 0; cursor: pointer;
}
.app-nativa .em-mrow svg.em-mi { width: 24px; height: 24px; fill: currentColor; flex: none }
.app-nativa .em-mrow .em-tx { flex: 1; color: var(--ink); font-weight: 600; font-size: 1rem }
.app-nativa .em-mrow .em-hint { color: var(--faint); font-size: .82rem; font-weight: 400 }
.app-nativa .em-mrow .em-chev { width: 18px; height: 18px; color: var(--faint); flex: none }
.app-nativa .em-mrow.em-danger {
  background: var(--red-s); color: var(--red); margin-top: 16px;
  box-shadow: 0 0 0 1.5px rgba(176, 69, 63, .35) inset;
}
.app-nativa .em-mrow.em-danger .em-tx { color: var(--red) }
.app-nativa .em-mrow .em-st { stroke-width: 2.2 }

/* Um curso à venda, dentro da folha do Descobrir. */
.app-nativa .em-crow {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--tile); border-radius: 22px; padding: 14px; box-shadow: var(--sh);
  margin-bottom: 12px; border: 0; color: inherit; cursor: pointer;
}
.app-nativa .em-crow .em-ic-c { width: 54px; height: 54px }
.app-nativa .em-crow .em-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.app-nativa .em-crow .em-tx b { font-family: var(--disp); font-weight: 600; font-size: 1.08rem; line-height: 1.2 }
.app-nativa .em-crow .em-tx small { font-size: .8rem; color: var(--mute); line-height: 1.35 }
.app-nativa .em-price {
  font-family: var(--mono); font-size: .9rem; padding: 6px 10px; border-radius: 10px;
  background: var(--amber-s); color: var(--amber); flex: none; white-space: nowrap;
}
.app-nativa .em-price.em-gratis { background: var(--green-s); color: var(--green) }
.app-nativa .em-bigprice { font-family: var(--mono); font-size: 2.4rem; line-height: 1; margin: 6px 0 10px }
.app-nativa .em-bigprice small { font-size: 1rem; color: var(--faint) }
.app-nativa .em-incl { list-style: none; margin: 14px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px }
.app-nativa .em-incl li { display: flex; gap: 10px; font-size: .93rem; line-height: 1.45; color: var(--mute) }
.app-nativa .em-incl li svg { width: 18px; height: 18px; flex: none; color: var(--green); margin-top: 2px }

/* ---- O aviso curto ----
   Substitui as duas faixas de mensagem que viviam no cimo da página e
   que, num telemóvel, empurravam o conteúdo para baixo quando
   apareciam. */
.app-nativa .em-toast {
  position: fixed; left: 50%; z-index: 100;
  /* Acima das duas barras: a de navegação e, quando existe, a da aula. */
  bottom: calc(152px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px);
  background: var(--ink); color: var(--on-ink);
  padding: 12px 18px; border-radius: 999px; font-size: .88rem; font-weight: 500;
  box-shadow: var(--sh-lg); text-align: center;
  transition: opacity .25s, transform .35s var(--ease);
}
.app-nativa .em-toast.em-on { opacity: 1; transform: translate(-50%, 0) }
.app-nativa .em-toast.em-mal { background: var(--red); color: #fff }

/* ============================================================
   7 · O MOVIMENTO
   ============================================================ */

@keyframes em-rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes em-pop { 0% { transform: scale(.6); opacity: 0 } 60% { transform: scale(1.08) } 100% { transform: scale(1); opacity: 1 } }
@keyframes em-in-fwd { from { opacity: 0; transform: translateX(26%) } to { opacity: 1; transform: none } }
@keyframes em-out-fwd { to { opacity: 0; transform: translateX(-10%) } }
@keyframes em-in-back { from { opacity: 0; transform: translateX(-26%) } to { opacity: 1; transform: none } }
@keyframes em-out-back { to { opacity: 0; transform: translateX(10%) } }

/* A transição entre ecrãs. O data-dir na raiz é escrito pelo JS antes de
   a troca começar: sem ele, voltar atrás desliza para o mesmo lado que
   avançar, e perde-se a noção de onde se está. */
::view-transition-old(root) { animation: em-out-fwd .26s cubic-bezier(.32,.72,0,1) both }
::view-transition-new(root) { animation: em-in-fwd .38s cubic-bezier(.32,.72,0,1) both }
html[data-dir="back"]::view-transition-old(root) { animation-name: em-out-back }
html[data-dir="back"]::view-transition-new(root) { animation-name: em-in-back }

/* ---- Entre separadores, esmaece ----

   Os quatro separadores são irmãos de uma barra, não são fundo e
   frente. O deslize lateral de cima precisa de uma direcção, e a
   direcção vem do `data-dir` que só a área do aluno escreve: entre
   separadores, ir e voltar deslizavam os dois para o mesmo lado. Um
   movimento que não acompanha a direcção não informa nada, e um
   movimento que não informa lê-se como atraso.

   A regra olha para o documento que entra, porque é lá que estes
   pseudo-elementos vivem. Sair de um separador para um curso continua
   a deslizar, que é o que se quer: aí entra-se mesmo. */
html:has(body.em-separador)::view-transition-old(root) {
  animation: em-sai .16s cubic-bezier(.32,.72,0,1) both
}
html:has(body.em-separador)::view-transition-new(root) {
  animation: em-entra .22s cubic-bezier(.32,.72,0,1) both
}
@keyframes em-sai { to { opacity: 0 } }
@keyframes em-entra { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* ---- E para quem não tem transições de todo ----

   Em Setembro de 2026 isto existe no Chrome, no Edge, no Android e no
   Safari a partir do 18.2. Abaixo disso o salto era seco.

   Só onde a transição não existe: onde existe, acrescentar isto punha
   duas animações a correr pela mesma mudança. */
@supports not (view-transition-name: none) {
  .em-separador main, .em-separador > .container {
    animation: em-entra .24s cubic-bezier(.32,.72,0,1) both
  }
}

/* O recurso para quem não tem transições de vista: a mesma ideia, feita
   à mão no elemento que entra. */
.app-nativa .em-view.em-in-fwd { animation: em-in-fwd .38s var(--ease) both }
.app-nativa .em-view.em-in-back { animation: em-in-back .38s var(--ease) both }

/* A entrada do início, um bloco depois do outro. Não é decoração: dá ao
   olho uma ordem de leitura antes de haver conteúdo para ler. */
.app-nativa .em-home-in > * { animation: em-rise .5s var(--ease) both }
.app-nativa .em-home-in > *:nth-child(2) { animation-delay: .05s }
.app-nativa .em-home-in > *:nth-child(3) { animation-delay: .1s }
.app-nativa .em-home-in > *:nth-child(4) { animation-delay: .14s }
.app-nativa .em-home-in > *:nth-child(5) { animation-delay: .18s }

@media (prefers-reduced-motion: reduce) {
  .app-nativa *, .app-nativa *::before, .app-nativa *::after {
    animation: none !important; transition: none !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important }
}

/* Num ecrã grande a app não cresce para os lados: uma coluna de 480px
   com cartões de 1200 não é a mesma interface, é outra. Fica centrada, e
   o papel em volta é o papel. */
@media (min-width: 520px) {
  .app-nativa .em-app { padding-block: 12px }
}

/* ---- O que a app deixa de mostrar ----
   A barra de cima continua no HTML porque é montada por um módulo que
   doze páginas partilham, e as duas faixas de mensagem porque há
   código antigo que lhes toca. Aqui não se veem: as ligações da barra
   estão na folha da conta, e as mensagens passaram a avisos que
   flutuam em vez de empurrarem a página para baixo. */
/* Só na página dos cursos. As outras quatro que usam esta folha
   precisam da barra de topo: é onde está a conta delas. */
.app-nativa.em-so-app .nav { display: none }
.app-nativa > .msg { display: none }

/* ============================================================
   8 · AS DUAS VISTAS DE DENTRO, DENTRO DA CASCA ANTIGA
   ============================================================
   O curso continua a viver no .shell do css/aula.css, que acima dos
   1024 é uma grelha de duas colunas: painel à esquerda, estudo à
   direita. Estas regras são o que faz a barra nova conviver com ela. */

/* A barra de topo é filha do .shell. Acima dos 1024 desaparece — e
   desaparece com display:none, para deixar de ser um item da grelha: se
   ficasse invisível mas presente, ocupava uma célula e empurrava o
   estudo para a linha de baixo. */
@media (min-width: 1024px) {
  .app-nativa #topo-curso { display: none }
  .app-nativa #mobile-bar { display: none !important }
}
/* O margin-inline negativo da barra existe para sangrar até às bordas
   dentro do .em-app, que tem 16px de lado. Aqui o contentor já não tem
   margem nenhuma, e a mesma regra punha 16px de página para fora do
   ecrã de cada lado. */
.app-nativa #topo-curso { margin-inline: 0; padding: 10px 16px }

/* O corpo da aula e do índice herdam a largura de leitura do .study-in,
   que é o que já lá estava. */
.app-nativa .study-in.em-lesson { margin-top: 10px }
.app-nativa .study .em-c-hero { margin-top: 4px }

/* ---- A revisão do quiz ----
   Todas as perguntas de uma vez, com a resposta certa marcada e a
   explicação por baixo. É o único sítio onde faz sentido ter a folha de
   exame inteira: aqui já não se responde, lê-se o que se errou. */
.app-nativa .em-review { padding: 4px 18px 18px }
.app-nativa .em-qbloco + .em-qbloco { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line) }
.app-nativa .em-qn {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 6px;
}
/* Na revisão as opções não se carregam, e por isso não encolhem ao
   toque nem mudam o cursor. */
.app-nativa .em-review .em-opt { cursor: default }

/* O aviso dentro do quiz: não passaste, ou já não há tentativas. */
.app-nativa .em-aviso {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 18px 4px; padding: 14px 16px; border-radius: 15px;
  background: var(--amber-s); color: var(--ink); font-size: .9rem; line-height: 1.45;
}
.app-nativa .em-aviso .em-btn { min-height: 44px; padding: 0 16px; font-size: .9rem }

/* ---- No ecrã grande ----
   A app não cresce para os lados até ficar outra coisa: uma coluna de
   1200px com cartões de 400 não é esta interface. Mas 480px no meio de
   um portátil é uma tira de papel com muito papel à volta.

   O meio-termo: o início ganha espaço até 860, o carrossel mostra dois
   cartões e meio em vez de um, e os mosaicos abrem para quatro colunas.
   O curso e a aula ficam como estão, que é onde o painel lateral entra e
   já trata da largura. */
@media (min-width: 900px) {
  .app-nativa #vista-home { max-width: 880px; --cw: 300px }
  .app-nativa #vista-home .em-tiles { grid-template-columns: repeat(4, 1fr) }
  .app-nativa #vista-home .em-hello { padding: 10px 10px 10px 8px }
}

/* ---- O que se viu só com a sessão ---- */

/* Um título de curso pode ser «Módulo Aberto (substituído pelo M0 do
   curso de Gestão de Bar)». A 1,42rem são quatro linhas, e o cartão
   fica todo para ele. Três, e o resto corta. */
.app-nativa .em-ccard h3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* E a etiqueta por cima, uma linha. */
.app-nativa .em-ckind {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* A navegação de baixo fica. Eu tinha-a escondido com o argumento de
   que os mosaicos e a folha da conta faziam o mesmo trabalho: fazem,
   mas isso não é razão para ela desaparecer justamente na página onde
   se entra. Uma barra que existe em sete páginas e some na oitava não
   é uma simplificação, é uma surpresa.

   O rodapé esse sai: 256px de ligações por baixo de uma aplicação. Os
   três links legais dele estão na folha da conta. */
/* Idem. E os Clássicos e os Ingredientes são páginas públicas: o
   rodapé leva os links legais e os que o Google segue. */
.app-nativa.em-so-app > footer { display: none }

/* Dentro de uma aula ficam duas barras: a de Aulas e Próxima, e a de
   navegação. Empilham-se, com a de navegação por baixo — é ela que
   está em todo o lado, e trocar-lhe o sítio de página para página era
   pior do que ter duas. */
.app-nativa .em-bbar {
  bottom: calc(var(--nav-baixo-h, 56px) + env(safe-area-inset-bottom, 0px));
  padding-bottom: 10px;
}

/* ============================================================
   9 · OS BLOCOS QUE NÃO FORAM REESCRITOS
   ============================================================
   O fim da aula, a caixa de perguntas, a conclusão do curso, a ponte
   para o curso seguinte e a faixa de compra continuam a ser escritos
   pelo código antigo, com as classes antigas. Não lhes toquei: são
   entregas, pagamentos e certificados, e mudar-lhes a marcação no mesmo
   passo em que se muda a navegação é duas coisas a poder falhar ao mesmo
   tempo.

   Mas ficavam a destoar por dentro da casca nova, e uma costura visível
   é pior do que um desenho antigo assumido. Estas regras vestem-nos sem
   lhes tocar: apontam às classes que eles já têm.
   ============================================================ */

/* ---- O fim da aula ---- */
.app-nativa .lesson-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 26px; padding: 18px; border-radius: 24px;
  background: var(--tile); box-shadow: var(--sh);
}
.app-nativa .lesson-foot .sp { flex: 1 }
.app-nativa .lesson-foot .muted { color: var(--mute); font-size: .88rem }
.app-nativa .lesson-foot button,
.app-nativa .perg-acoes button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 15px;
  background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: .95rem;
  border: 0; cursor: pointer;
  transition: transform .18s var(--ease);
}
.app-nativa .lesson-foot button:active,
.app-nativa .perg-acoes button:active { transform: scale(.965) }
.app-nativa .lesson-foot button:disabled,
.app-nativa .perg-acoes button:disabled { opacity: .5; cursor: default; transform: none }
.app-nativa .lesson-foot .btn-ghost {
  background: var(--tile2); color: var(--ink); box-shadow: none;
}

/* ---- A caixa de perguntas ---- */
.app-nativa .perg {
  margin-top: 28px; padding: 20px 18px;
  border-radius: 24px; background: var(--tile); box-shadow: var(--sh);
}
.app-nativa .perg h3 {
  margin: 0 0 14px; font-size: 1.15rem;
  /* O título vinha em versaletes minúsculos, que ao lado de um quiz com
     perguntas a 1,06rem se lia como uma nota de rodapé. */
  text-transform: none; letter-spacing: -.015em; color: var(--ink);
}
.app-nativa .perg-lista .muted { color: var(--mute); font-size: .9rem; line-height: 1.5 }
/* Cada pergunta respondida é um bloco, não uma linha corrida. */
.app-nativa .perg-lista > div,
.app-nativa .perg-lista > article {
  background: var(--tile2); border-radius: 15px; padding: 14px 16px; margin-bottom: 10px;
}
.app-nativa .perg-form { margin-top: 18px; display: flex; flex-direction: column; gap: 8px }
.app-nativa .perg-form label { font-size: .84rem; color: var(--mute) }
.app-nativa .perg-form textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 15px;
  background: var(--tile2); color: var(--ink);
  /* Dezasseis pixéis e não menos: abaixo disso o iPhone dá zoom ao campo
     quando se toca nele, e a página fica torta. */
  font: inherit; font-size: 16px; line-height: 1.5; padding: 12px 14px;
  resize: vertical; min-height: 92px;
}
.app-nativa .perg-form textarea:focus {
  outline: none; border-color: var(--amber); background: var(--tile);
}
.app-nativa .perg-acoes {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px;
}
.app-nativa .perg-acoes .muted { color: var(--faint); font-size: .8rem; flex: 1; min-width: 180px }

/* ---- A conclusão, a ponte e a faixa de compra ----
   Os três usam o .card do css/styles.css, que dentro desta área aparece
   como um retângulo de cantos pequenos sobre um fundo que já não é o
   dele. Ganham o raio, o papel e a sombra dos outros. */
.app-nativa .study-in .card {
  border-radius: 24px; background: var(--tile);
  border: 0; box-shadow: var(--sh); padding: 20px;
}
.app-nativa .study-in .card + .card { margin-top: 14px }
.app-nativa .study-in .card button {
  min-height: 48px; border-radius: 15px; font-weight: 600;
  transition: transform .18s var(--ease);
}
.app-nativa .study-in .card button:active { transform: scale(.965) }

/* Um título de curso pode ter sessenta caracteres, e numa linha do
   Descobrir com o ícone à esquerda e o preço à direita isso são quatro
   linhas que empurram a legenda para fora da linha. Duas, como no
   cartão do carrossel. */
.app-nativa .em-crow .em-tx b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.app-nativa .em-crow .em-tx small {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Acima dos 1024 o painel lateral está sempre à vista com a mesma lista
   de aulas que o índice desenha por baixo do cartão da próxima. Dois
   índices no mesmo ecrã a dizer o mesmo é um a mais, e o que fica é o
   que não precisa de rolagem. Abaixo dos 1024 não há painel, e este é a
   única lista que existe. */
@media (min-width: 1024px) {
  .app-nativa .em-aulas-indice { display: none }
}

/* ============================================================
   10 · OS COMPONENTES DOS SEPARADORES
   ============================================================
   Clássicos, Caderno, Calculadoras e Ingredientes. Cada uma tinha o seu
   dicionário: o âmbar chamava-se «amber» numa e «gold» noutra, o papel
   «paper» numa e «bg» noutra. Três dicionários para as mesmas coisas.

   O que segue é o vocabulário comum. Quando uma página precisar de algo
   que não esteja aqui, a pergunta a fazer primeiro é se as outras três
   não precisam do mesmo.
   ============================================================ */

/* ---- A cabeça de uma página ----
   Rótulo pequeno, título em Fraunces e a contagem. A contagem é a peça
   que diz «isto tem fundo»: «81 fichas» promete mais do que «Ingredientes». */
.app-nativa .em-cabeca { padding: 14px 0 0 }
.app-nativa .em-cabeca .em-rot {
  display: block; font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--faint);
}
.app-nativa .em-cabeca h1 { font-size: 1.8rem; margin: 6px 0 0; line-height: 1.1 }
.app-nativa .em-cabeca .em-conta {
  font-family: var(--mono); font-size: .82rem; color: var(--mute);
  font-variant-numeric: tabular-nums; margin-top: 6px; display: block;
}

/* ---- A pesquisa que fica ----
   Cola-se ao cimo ao deslizar. Numa lista de 128 fichas, ter de subir ao
   princípio para procurar outra coisa é o que faz alguém desistir e usar
   o dedo em vez da pesquisa. */
.app-nativa .em-search.em-fixa {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 18;
  /* A sombra só aparece quando ele descola do sítio, e é o que diz que
     está por cima de alguma coisa. */
  box-shadow: var(--sh);
}

/* ---- Os selos de estado ----
   Quatro cores e sempre as mesmas: verde é seguro, âmbar é atenção,
   vermelho é risco, ameixa é regulado. Uma cor que muda de significado
   de página para página não é um código, é decoração. */
.app-nativa .em-selo {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--cs); color: var(--c);
}
.app-nativa .em-selo.em-bom { --c: var(--green); --cs: var(--green-s) }
.app-nativa .em-selo.em-atencao { --c: var(--amber); --cs: var(--amber-s) }
.app-nativa .em-selo.em-mau { --c: var(--red); --cs: var(--red-s) }
.app-nativa .em-selo.em-regulado { --c: var(--plum); --cs: var(--plum-s) }
.app-nativa .em-selo.em-neutro { --c: var(--mute); --cs: var(--tile2) }

/* ---- Os campos ----
   Rótulo em cima e não ao lado: ao lado, um rótulo comprido rouba
   metade da largura ao campo. */
.app-nativa .em-campo {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--tile); border-radius: 16px; padding: 10px 14px; box-shadow: var(--sh);
}
.app-nativa .em-campo label { font-size: .72rem; color: var(--mute); letter-spacing: .02em }
.app-nativa .em-campo input,
.app-nativa .em-campo select,
.app-nativa .em-campo textarea {
  border: 0; background: transparent; color: var(--ink); outline: none;
  width: 100%; min-width: 0; padding: 0;
  /* Dezasseis pixéis e não menos: abaixo disso o iPhone dá zoom ao campo
     quando se toca nele, e a página fica torta. */
  font: inherit; font-size: 16px;
}
.app-nativa .em-campo input[inputmode="decimal"],
.app-nativa .em-campo input[inputmode="numeric"],
.app-nativa .em-campo input[type="number"] {
  font-family: var(--mono); font-size: 1.15rem; font-variant-numeric: tabular-nums;
}
.app-nativa .em-campos { display: grid; gap: 10px }
@media (min-width: 420px) { .app-nativa .em-campos.em-duas { grid-template-columns: 1fr 1fr } }

/* ---- O estado vazio ----
   Um ecrã que só diz «Sem resultados» não mostra o que ali vai estar, e
   é por isso que parece avariado. Um desenho, uma frase que diz o que
   fazer, e o botão que o faz. */
.app-nativa .em-vazio {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 44px 24px; color: var(--mute);
}
.app-nativa .em-vazio .em-ic {
  width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center;
  background: var(--tile2); color: var(--faint); --cut: var(--tile2);
}
.app-nativa .em-vazio .em-ic svg { width: 34px; height: 34px; fill: currentColor }
.app-nativa .em-vazio p { margin: 0; font-size: .95rem; line-height: 1.5; max-width: 34ch }
.app-nativa .em-vazio .em-btn { margin-top: 4px }

/* ---- O esqueleto ----
   Com a altura final, não com a altura zero. Um esqueleto mais baixo do
   que o conteúdo faz a página saltar quando ele chega, que é o defeito
   que o esqueleto existia para evitar. */
@keyframes em-pulsar { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
.app-nativa .em-osso {
  background: var(--tile2); border-radius: 12px;
  animation: em-pulsar 1.4s var(--ease) infinite;
}
.app-nativa .em-osso-linha { background: var(--tile); border-radius: 18px; padding: 14px 16px; margin-bottom: 10px;
  min-height: 64px; display: flex; align-items: center; gap: 14px; box-shadow: var(--sh) }
.app-nativa .em-osso-linha .em-osso:first-child { width: 34px; height: 34px; border-radius: 50%; flex: none }
.app-nativa .em-osso-linha .em-osso:last-child { height: 12px; flex: 1 }

/* ---- O botão que flutua ----
   Acima da barra de separadores e com a margem de segurança contada. Num
   iPhone sem isso, ele nasce por baixo da barra do sistema. */
.app-nativa .em-flutua {
  position: fixed; right: 16px; z-index: 25;
  bottom: calc(var(--nav-baixo-h, 56px) + env(safe-area-inset-bottom, 0px) + 14px);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--amber); color: #1B1305; font-weight: 700; font-size: .95rem;
  box-shadow: var(--sh-lg);
}
.app-nativa .em-flutua svg { width: 18px; height: 18px; fill: currentColor }

/* ---- A lista que troca sem saltar ----
   Ao mudar de filtro, o que muda é o conteúdo e não a posição. O fade é
   curto de propósito: mais do que isto e parece que a página recarregou. */
@keyframes em-entrar { from { opacity: 0 } to { opacity: 1 } }
.app-nativa .em-lista-nova { animation: em-entrar .18s var(--ease) both }

/* ---- Trocar de separador ----
   Estas são páginas separadas e não uma aplicação de um ficheiro só.
   `navigation: auto` é a regra que existe para esse caso: o browser
   guarda o ecrã de onde se sai e cruza-o com o de onde se entra, em vez
   do branco que há entre dois documentos.

   As animações são as mesmas de dentro da área do aluno, escritas mais
   acima nesta folha. Quem não tiver isto — e em Outubro de 2026 é o
   Firefox e o Safari mais antigo — navega como sempre navegou. */
@view-transition { navigation: auto }

/* ============================================================
   11 · A ENTRADA
   ============================================================ */

/* Entrar e Criar conta eram dois botões com uma linha por baixo do
   escolhido. Passam a um par dentro de uma pastilha, que é o desenho
   que escolher entre dois tem no resto da casa. */
.app-nativa .tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--tile2); border-radius: 999px; padding: 4px;
  margin-bottom: 20px; border: 0;
}
.app-nativa .tabs button {
  border: 0; background: none; border-radius: 999px; cursor: pointer;
  min-height: 42px; font: 500 .92rem/1 var(--corpo); color: var(--mute);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.app-nativa .tabs button.active { background: var(--ink); color: var(--on-ink); font-weight: 600 }

/* Os campos, no molde da casa. O rótulo em cima e o campo macio, como
   nas calculadoras e no caderno. */
.app-nativa .container.narrow label {
  display: block; font-size: .78rem; color: var(--mute); margin: 0 0 5px;
}
.app-nativa .container.narrow input[type=email],
.app-nativa .container.narrow input[type=password],
.app-nativa .container.narrow input[type=text] {
  width: 100%; border: 1.5px solid var(--line); border-radius: 15px;
  background: var(--tile2); color: var(--ink); padding: 13px 15px;
  /* Dezasseis pixéis: abaixo disso o iPhone dá zoom ao campo quando se
     toca nele, e a página fica torta — no ecrã onde isso é mais caro,
     que é o de escrever uma palavra-passe. */
  font: inherit; font-size: 16px; margin-bottom: 16px;
}
.app-nativa .container.narrow input:focus { outline: none; border-color: var(--amber); background: var(--tile) }

/* ---- O olho da palavra-passe ----
   O botão vive por cima do campo, e o campo ganha espaço à direita para
   o texto não passar por baixo dele. */
.app-nativa .em-pass { position: relative }
.app-nativa .em-pass input { padding-right: 52px }
.app-nativa .em-pass button {
  position: absolute; right: 6px; top: 0; height: 52px; width: 44px;
  display: grid; place-items: center; border: 0; background: none;
  color: var(--faint); cursor: pointer; border-radius: 12px;
}
.app-nativa .em-pass button:hover { color: var(--ink) }
.app-nativa .em-pass svg { width: 20px; height: 20px }

/* ============================================================
   12 · A PÁGINA DOS CURSOS, MAIS BAIXA DE VOZ
   ============================================================
   Ela foi desenhada primeiro, sozinha, a partir de um protótipo que era
   uma app inteira. Quando as outras quatro ficaram calmas, esta passou a
   ser a única a chamar por atenção: cartões de 340px, sombra grande,
   etiquetas em tinta cheia e um carrossel com vinte e quatro graus de
   rotação.

   O que muda é o volume, não a ideia. O carrossel continua a ser um
   carrossel, os cursos continuam a ter a sua cor, e a escala do jigger
   continua a contar aulas.
   ============================================================ */

/* O cartão encolhe e perde a sombra grande. A sombra grande é o que
   levanta uma coisa acima de tudo o resto, e aqui tudo o resto passou a
   ser cartões iguais a ele. */
.app-nativa .em-ccard {
  min-height: 300px;
  box-shadow: var(--sh);
  padding: 18px 16px 16px;
}
/* Só o que está ao centro é que se levanta. É a diferença entre dizer
   «olha para aqui» e dizer «é este que está escolhido». */
.app-nativa .em-ccard:not(.em-more) { transition: box-shadow .3s var(--ease) }

/* A etiqueta em tinta cheia era a coisa mais escura do ecrã, e o que lá
   está escrito é «em curso». Passa ao tom lavado da cor do curso, que
   diz o mesmo sem gritar. A de «A seguir» mantém-se cheia: essa é a
   única que aponta para alguma coisa. */
.app-nativa .em-pill { background: var(--cs); color: var(--c) }
.app-nativa .em-pill.em-primeira { background: var(--c); color: var(--on-ink) }

/* O título de 1,42rem num cartão de 250px de largura dava três linhas
   em metade dos cursos. */
.app-nativa .em-ccard h3 { font-size: 1.24rem }

/* O quadrado do ícone encolhe com o resto. */
.app-nativa .em-ic-c { width: 50px; height: 50px; border-radius: 16px }
.app-nativa .em-ic-c svg { width: 28px; height: 28px }

/* Os mosaicos e a cápsula acompanham: a cápsula tinha a sombra de um
   cartão a flutuar, por cima de uma barra que já não é branca. */
.app-nativa .em-hello { box-shadow: var(--sh); padding: 7px }
.app-nativa .em-avatar { width: 46px; height: 46px; font-size: 1.05rem }
.app-nativa .em-tile { min-height: 132px; border-radius: 20px; padding: 18px 12px 16px }
.app-nativa .em-tile svg { width: 42px; height: 42px }

/* ---- O rodapé não entra nos separadores, no telemóvel ----

   Um rodapé é a saída de uma página que se lê até ao fim. Um separador
   não se lê até ao fim: percorre-se e troca-se. Com a barra de abas
   colada em baixo, aquelas dez ligações são uma segunda navegação
   encostada à primeira — e duas delas, «Clássicos» e «Ingredientes»,
   são separadores que estão dois centímetros abaixo.

   Até aos 760px. Num computador não há barra de abas e o rodapé volta
   a ser o que foi escrito para ser. */
@media (max-width: 760px) {
  .em-separador > footer { display: none }
}

/* ---- A conta, num telemóvel, está em baixo ----

   Abaixo dos 760px existe a barra de abas, e é lá que está o «Conta».
   O círculo do canto de cima seria o mesmo gesto no ponto do ecrã que
   o polegar não alcança — que foi a razão de a barra de baixo existir.

   Acima dos 760 não há barra de baixo, e o círculo é a única porta da
   conta: por isso esconde-se, e não sai do HTML. */
@media (max-width: 760px) {
  .app-nativa .nav .conta,
  .app-nativa .em-avatar { display: none }
}

/* ---- A sobrecapa dos separadores ----

   Uma linha pequena por cima do título, com a voz que o título não
   pode ter: o <h1> é o que o Google lê, e «Calculadoras de bar» e
   «Ingredientes» são as palavras por que alguém procura isto.

   Dezoito pixéis. Em âmbar porque é a cor da casa e porque uma linha
   deste tamanho em cinzento não se lê — passa a sujidade por baixo do
   título. */
.app-nativa .em-sobrecapa {
  display: block; font-family: 'Inter', sans-serif;
  font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber);
  margin-bottom: 7px;
}

/* E o título, em si. A Fraunces a 400 num título de 22px é um texto
   corrido escrito maior; a 600 com o espaçamento fechado é um título. */
.app-nativa .em-separador .hero h1,
.app-nativa .caderno-titulo,
.app-nativa .fer-t {
  font-weight: 600; letter-spacing: -.02em;
}

/* ---- O cartão cresce com o ecrã ----

   Com os três mosaicos fora, a página dos cursos acabava a meio: um
   cartão de 300px e trezentos pixéis de papel por baixo dele. Num
   telemóvel de 976px de altura, metade do ecrã era nada.

   O cartão passa a ocupar o que sobra. A conta é o que está à volta —
   o cabeçalho, o título da secção, os pontos e a barra de abas — e os
   limites impedem os dois extremos: num telemóvel pequeno não empurra
   os pontos para fora do ecrã, e num grande não vira um póster.

   Por dentro não é preciso fazer nada: o cartão já é uma coluna com um
   `.em-grow` no meio, e é esse que absorve a altura a mais. */
@media (max-width: 760px) {
    /* O tecto é 440 e não o que sobra. Com o cartão a 554px — que é o
     que cabia num telemóvel de 976 — abria-se um buraco no meio dele,
     entre a descrição e a barra de progresso: o `.em-grow` absorve a
     altura toda e não há conteúdo que a encha. Um cartão oco lê-se
     como avaria; um palmo de papel no fim de um início lê-se como
     sossego. */
  /* Esta regra prendia a altura nos 440px e ficou para trás quando o
     cartão passou a encher a coluna. Fica o chão, que é o que importa
     num ecrã baixo. */
  .app-nativa.em-so-app .em-ccard { min-height: 300px }
}

/* ---- Quem está sentado, dentro da folha da conta ----

   O cabeçalho da folha diz o que a folha é, como em todas as outras.
   A identidade desce para aqui, que é onde ela é informação e não
   título. */
.app-nativa .em-eu {
  display: flex; align-items: center; gap: 13px;
  padding: 2px 2px 16px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.app-nativa .em-eu-av {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: var(--amber); color: var(--on-ink);
  display: grid; place-items: center;
  font-weight: 700; font-size: .95rem; letter-spacing: .02em;
}
.app-nativa .em-eu-txt { display: flex; flex-direction: column; min-width: 0 }
.app-nativa .em-eu-nome { font-weight: 600; font-size: 1rem; color: var(--ink) }
/* `anywhere`: um endereço comprido não tem espaços por onde quebrar e
   saía pela borda da folha. */
.app-nativa .em-eu-mail { font-size: .84rem; color: var(--faint); overflow-wrap: anywhere }

/* As três ligações do fim da folha da conta. */
.app-nativa .em-legal {
  margin: 22px 0 0; text-align: center; font-size: .8rem;
  color: var(--faint); line-height: 2;
}
.app-nativa .em-legal a { color: inherit }

/* ============================================================
   13 · O TELEMÓVEL NÃO PRECISA DO TÍTULO DA PÁGINA
   ============================================================ */

/* Fora do campo de visão, dentro do documento. É por este <h1> que o
   Google sabe do que trata a página e é o primeiro ponto de referência
   de quem usa leitor de ecrã — `display:none` tirava as duas coisas. */
.app-nativa .em-fora-do-ecra {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (max-width: 760px) {
  /* A barra de abas, colada em baixo, já diz em que separador se está,
     e diz-o com a aba acesa. O título por cima repetia-a e levava uma
     dobra inteira para o fazer. */
  .em-separador .hero h1,
  .em-separador .hero .em-sobrecapa,
  .em-separador .caderno-titulo,
  .em-separador .caderno-topo > .em-sobrecapa,
  .em-separador .fer-t,
  .em-separador .hero > .wrap > .em-sobrecapa {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  /* O título dos cursos é um cabeçalho de secção e não um <h1>: essa
     página só se vê com sessão e não é indexada. Sai de vez. */
  .app-nativa.em-so-app .em-sec-h { display: none }
}

/* ---- O cartão do curso enche o ecrã ----

   Eram 290px de largura num ecrã de 450: o cartão ao meio e papel dos
   dois lados, com trezentos pixéis de nada por baixo. Um início de
   aplicação assim parece uma página que não acabou de carregar.

   Fica a espreitadela do cartão seguinte, que é o que diz que há mais
   e que isto se arrasta. */
@media (max-width: 760px) {
  .app-nativa.em-so-app { --cw: min(86vw, 400px) }

  /* ---- O cartão ocupa o que sobra, e não um número que eu adivinhei ----

     A primeira versão disto era `calc(100dvh - 290px)`: eu media o que
     estava à volta e subtraía. Dá sempre errado por um bocado, porque o
     cabeçalho muda de altura com o nome de quem entra e os pontos só
     existem com mais do que um curso — e o bocado que sobrava ficava em
     papel vazio por baixo dos pontos.

     Agora não se subtrai nada: o início é uma coluna que vai até ao fim
     do ecrã, o bloco dos cursos fica com o que o cabeçalho deixar, e o
     cartão enche-o. O que estiver à volta pode mudar de altura à
     vontade que isto continua a bater certo.

     Os `min-height: 0` não são enfeite: um item de flex recusa encolher
     abaixo do seu conteúdo, e sem eles o carrossel empurrava a coluna
     para baixo em vez de caber nela. */
  /* A altura que sobra: o ecrã menos a barra de abas (o `--nav-baixo-h`
     é posto no body pelo base.css), menos a faixa do queixo do
     telemóvel, menos a respiração de cima e de baixo. */
  .app-nativa.em-so-app #vista-home > .em-view {
    min-height: calc(100dvh - var(--nav-baixo-h, 0px) - env(safe-area-inset-bottom) - 26px);
    padding-bottom: 10px;
    display: flex; flex-direction: column;
  }
  .app-nativa.em-so-app .em-cursos {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
  }
  /* Tudo por flex e nada por percentagem. A primeira tentativa foi
     `height: 100%` na pista: um `100%` precisa de um pai com altura
     definida, e a altura do carrossel vem de um `flex-grow` — que o
     browser não dá por definida para este efeito. A pista ficava pelo
     tamanho do conteúdo e o cartão parava a meio do ecrã.

     Com o carrossel a ser ele próprio um flex, a pista estica por
     `align-items: stretch`, que não pergunta nada a ninguém. */
  .app-nativa.em-so-app .em-carousel { flex: 1; min-height: 0; display: flex }
  .app-nativa.em-so-app .em-car-track { flex: 1; min-height: 0 }
  /* Sem mínimo: quem manda na altura é a coluna. Fica um chão de 300px
     para o caso de um ecrã muito baixo — abaixo disso o cartão deixa de
     caber e é melhor deslizar do que espremer. */
  .app-nativa.em-so-app .em-ccard { min-height: 300px }
}

/* O espaçador passa a painel. Era um vazio que absorvia toda a altura a
   mais do cartão — e foi por causa dele que da última vez travei a
   altura nos 440px. Com o desenho do curso lá dentro, quanto mais alto
   o ecrã maior o painel, e o cartão cresce sem ficar oco. */
.app-nativa .em-ccard .em-grow {
  flex: 1; min-height: 0;
  background: var(--cs); border-radius: 18px;
  display: grid; place-items: center; overflow: hidden;
  margin: 6px 0 4px;
}
/* O `--cut` é a cor por onde o desenho é recortado: aqui dentro, o fundo
   do painel. Sem isto o recorte sai em branco e o desenho fica manchado. */
/* O desenho acompanha o painel. Com o tecto nos 132px ficava uma ilha
   pequena no meio de um painel de meio ecrã. */
.app-nativa .em-ccard .em-grow svg {
  width: 52%; max-width: 208px; height: auto;
  fill: var(--c); opacity: .42; --cut: var(--cs);
}
/* O cartão do «Descobrir» não tem painel: é uma porta e não um curso. */
.app-nativa .em-ccard.em-more .em-grow { background: none }