/* ============================================================
   Área do Aluno — composição

   Mobile é o caso principal: Ana está de pé, uma mão, com pressa.
   No desktop a largura é usada de verdade — coluna principal larga
   com a peça de decisão em tamanho grande, e o assunto secundário
   agrupado ao lado. Sem réguas: o que agrupa é o cartão e o espaço.
   ============================================================ */

/* ---------------------------------------------------------------
   Splash
   --------------------------------------------------------------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--e5);
  background: var(--tinta);
  background-image: var(--ambiente);
  transition: opacity .3s ease, visibility .3s;
}
.splash.saindo { opacity: 0; visibility: hidden; }
.splash img { width: 104px; height: 104px; }
.splash__barra { width: 140px; height: 3px; border-radius: 999px; background: var(--vidro-forte); overflow: hidden; }
.splash__barra span {
  display: block;
  width: 40%; height: 100%;
  border-radius: 999px;
  background: var(--verde);
  animation: correr 1.1s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes correr {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}

/* ============================================================
   ENTRADA — vitrine + acesso
   ============================================================ */
.entrada {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

.vitrine {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: var(--e6);
  padding: var(--e7) var(--margem);
  min-width: 0;
  overflow: hidden;
}

.vitrine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/img/modalidades/musculacao.jpg") center / cover no-repeat;
  filter: grayscale(.82) contrast(1.1) brightness(.6);
  z-index: 0;
}
.vitrine::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 20% 30%, rgb(var(--verde-rgb) / .1), transparent 60%),
    linear-gradient(to right, rgb(var(--capa-escura) / .94) 0%, rgb(var(--capa-escura) / .74) 62%, rgb(var(--capa-escura) / .9) 100%);
  z-index: 0;
}
.vitrine > * { position: relative; z-index: 1; min-width: 0; }

/* A vitrine é uma fotografia com legenda, não uma superfície do tema:
   ela continua escura nos dois temas porque a foto por trás continua
   escura nos dois temas. Escopar os tokens aqui é o que faz o botão
   fantasma e o texto secundário funcionarem sem repetição. */
.vitrine {
  --texto:       var(--texto-sobre-foto);
  --medio:       var(--medio-sobre-foto);
  --fraco:       rgb(244 245 246 / .58);
  --risco:       rgb(244 245 246 / .14);
  --risco-forte: rgb(244 245 246 / .28);
  --grafite:     rgb(244 245 246 / .1);
  --vidro:       rgb(244 245 246 / .1);
  /* `color` herda o VALOR JÁ RESOLVIDO do ancestral mais próximo que o
     declara — que é o body, fora deste escopo. Sem esta linha, todo
     filho que conta com herança ficava com o texto escuro do tema
     claro em cima da foto escura. */
  color: var(--texto);
}

.vitrine__marca { display: flex; align-items: center; gap: var(--e3); }
.vitrine__marca img { width: 54px; height: 54px; }

.vitrine__meio { display: grid; gap: var(--e5); align-content: center; }

.vitrine__frase {
  font-size: clamp(2.5rem, 5.6vw, 4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.vitrine__texto { color: var(--medio); max-width: 44ch; font-size: 1.0625rem; line-height: 1.6; }

/* A sequência real do agendamento. A ordem importa, por isso os
   números ficam — mas em pastilha, não numa lista riscada por réguas. */
.passos { display: grid; gap: var(--e3); }
.passos > div {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: var(--e4);
  min-width: 0;
}
.passos b {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: rgb(var(--verde-rgb) / .18);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--verde-sobre-foto);
}
.passos strong { display: block; font-size: 1rem; font-weight: 650; letter-spacing: -0.015em; }
.passos span { font-size: 0.875rem; color: var(--fraco); }

.vitrine__rodape { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ---------------- acesso ---------------- */
.acesso {
  display: grid;
  place-content: center;
  padding: var(--e7) var(--margem);
  min-width: 0;
}
.acesso__caixa { width: min(420px, 100%); display: grid; gap: var(--e5); }
.acesso__marca { display: none; align-items: center; gap: var(--e3); }
.acesso__marca img { width: 40px; height: 40px; }

.acesso__titulo { font-size: clamp(1.75rem, 4vw, 2.125rem); }
.acesso__sub { color: var(--medio); font-size: 0.9375rem; margin-top: var(--e2); }
.acesso__pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  font-size: 0.9375rem;
  color: var(--medio);
}
.passo { display: grid; gap: var(--e5); }

@media (max-width: 900px) {
  .entrada { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* No celular a vitrine vira uma faixa curta só com a marca — sem
     título nem texto de vendas empurrando o formulário pra baixo. */
  .vitrine {
    padding: var(--e6) var(--margem);
    gap: 0;
    min-height: 0;
    align-content: center;
    justify-items: center;
  }
  .vitrine__marca { justify-content: center; }
  .vitrine__meio, .passos, .vitrine__rodape { display: none; }
  .acesso { padding: var(--e6) var(--margem) var(--e8); }
}

/* ============================================================
   APLICAÇÃO — casca
   ============================================================ */
.app { min-height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }

.topo {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--e5);
  height: var(--altura-topo);
  padding-inline: var(--margem);
  background: rgb(var(--tinta-rgb) / .78);
  backdrop-filter: var(--desfoque);
  -webkit-backdrop-filter: var(--desfoque);
}
.topo__marca { display: flex; align-items: center; gap: var(--e2); text-decoration: none; flex: none; }
.topo__marca img { width: 36px; height: 36px; }

/* Navegação em pastilhas dentro de um trilho, não abas sublinhadas. */
.nav {
  display: flex;
  align-items: center;
  gap: var(--e1);
  margin-inline: auto;
  padding: var(--e1);
  background: var(--vidro);
  border-radius: var(--raio-pill);
}
.nav__item {
  display: flex;
  align-items: center;
  gap: var(--e2);
  height: 40px;
  padding: 0 var(--e4);
  border-radius: var(--raio-pill);
  color: var(--medio);
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  transition: color .14s ease, background .14s ease, box-shadow .14s ease;
}
.nav__item svg { width: 17px; height: 17px; }
.nav__item:hover:not(:disabled) { color: var(--texto); }
.nav__item:disabled { opacity: .4; cursor: not-allowed; }
.nav__item[aria-current="page"] {
  color: var(--texto);
  background: var(--asfalto);
  box-shadow: var(--sombra-cartao);
  font-weight: 650;
}

.topo__conta { display: flex; align-items: center; gap: var(--e2); flex: none; margin-left: auto; }
.topo__perfil {
  display: flex; align-items: center; gap: var(--e3);
  padding: 4px 4px 4px var(--e3);
  border-radius: var(--raio-pill);
  cursor: pointer;
  transition: background .14s ease;
}
.topo__perfil:hover { background: var(--vidro); }
.topo__quem { display: grid; justify-items: end; gap: 0; text-align: right; min-width: 0; }
.topo__quem strong { font-size: 0.875rem; font-weight: 650; letter-spacing: -0.01em; }
.topo__quem .estado { font-size: 0.75rem; }

.conteudo {
  width: 100%;
  max-width: var(--teto);
  margin-inline: auto;
  padding: var(--e6) var(--margem) var(--e8);
  min-width: 0;
}

.rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  padding: var(--e5) var(--margem) var(--e6);
  font-size: 0.875rem;
  color: var(--fraco);
}
.rodape .voz { font-weight: 500; }

.tela { display: grid; gap: var(--e6); align-content: start; min-width: 0; }

/* ---------------------------------------------------------------
   Cabeça de tela — sem régua embaixo
   --------------------------------------------------------------- */
.cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e4) var(--e6);
  flex-wrap: wrap;
  min-width: 0;
}
.cabeca__texto { display: grid; gap: var(--e2); min-width: 0; }
.cabeca__texto p { color: var(--medio); font-size: 1rem; max-width: 56ch; }
/* Sino de notificações: a bolinha com o número de novas. */
.sino { position: relative; }
.sino__conta {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--vermelho, #e5484d); color: #fff;
  font-size: 0.6875rem; font-weight: 700; line-height: 18px; text-align: center;
  pointer-events: none;
}
/* `.raia` no celular joga o estado para uma segunda linha; aqui o ícone
   fica sempre à esquerda do texto, alinhado ao título. */
.raia.notif {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: none;
  gap: var(--e3); align-items: start;
}
.raia.notif > .estado { grid-area: auto; order: 0; align-self: start; margin-top: 2px; }
.raia.notif > .raia__corpo { grid-area: auto; }
.notif--nova { border-color: var(--verde-aceso, #3ddc84); }
.notif__titulo { font-weight: 650; }
.notif__texto { color: var(--texto-2, inherit); font-size: 0.9rem; }
.notif__quando { color: var(--fraco); font-size: 0.75rem; }

.cabeca__lado { display: grid; justify-items: end; gap: var(--e1); flex: none; text-align: right; }

/* Fração da semana */
.fracao { display: flex; align-items: baseline; gap: .06em; justify-content: flex-end; }
.fracao__usadas {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--verde-aceso);
}
.fracao__total {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fraco);
}
.fracao--cheia .fracao__usadas { color: var(--ambar-aceso); }

/* ============================================================
   INÍCIO — composição assimétrica
   ============================================================ */
.inicio {
  display: grid;
  gap: var(--e6);
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: start;
  min-width: 0;
}
.inicio__principal { display: grid; gap: var(--e6); align-content: start; min-width: 0; }
.inicio__lado { display: grid; gap: var(--e4); align-content: start; min-width: 0; }

/* ============================================================
   AGENDAR — assistente por etapas

   Uma decisão por tela. O que já foi escolhido continua visível na
   trilha do topo, e voltar é um clique na própria etapa.
   ============================================================ */
.assistente { display: grid; gap: var(--e5); min-width: 0; }

/* A trilha: pastilhas de estado, sem linha conectora. A etapa
   resolvida mostra o que foi escolhido, e não só o nome do passo. */
.trilha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  min-width: 0;
}
.trilha__passo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: 40px;
  padding: 0 var(--e4) 0 var(--e2);
  border-radius: var(--raio-pill);
  background: var(--vidro);
  color: var(--fraco);
  font-size: 0.875rem;
  font-weight: 550;
  text-align: left;
  min-width: 0;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.trilha__num {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--vidro-forte);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.trilha__num svg { width: 14px; height: 14px; }
.trilha__voz { display: grid; min-width: 0; line-height: 1.2; }
.trilha__voz small { font-size: 0.6875rem; color: var(--fraco); font-weight: 500; }
.trilha__voz b { font-weight: 650; font-size: 0.875rem; letter-spacing: -0.01em; }

.trilha__passo--feito { color: var(--texto); cursor: pointer; }
.trilha__passo--feito:hover { background: var(--vidro-forte); }
.trilha__passo--feito .trilha__num { background: var(--verde); color: var(--preto); }
.trilha__passo--atual {
  color: var(--texto);
  background: var(--asfalto);
  box-shadow: var(--sombra-cartao), inset 0 0 0 1px var(--risco);
}
.trilha__passo--atual .trilha__num { background: var(--texto); color: var(--tinta); }

/* O palco da etapa atual */
.etapa { display: grid; gap: var(--e4); min-width: 0; }
.etapa__voz {
  display: grid;
  gap: var(--e1);
  min-width: 0;
}
.etapa__voz h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.etapa__voz p { color: var(--medio); font-size: 0.9375rem; max-width: 60ch; }

.etapa__pe {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  padding-top: var(--e2);
}
.etapa__pe .btn:last-child { margin-left: auto; }

/* ---------------------------------------------------------------
   OPÇÃO — o cartão selecionável do assistente (tipo de aula e
   modalidade). Um só componente, dois tamanhos.
   --------------------------------------------------------------- */
.escolhas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--e3);
  min-width: 0;
}
.escolhas--duplo { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.opcao {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  background: var(--asfalto);
  border: 1px solid var(--risco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-cartao);
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.opcao:hover:not(.opcao--trancada) { transform: translateY(-2px); box-shadow: var(--sombra); }
.opcao:hover:not(.opcao--trancada) .opcao__foto img { filter: grayscale(.15) contrast(1.06) brightness(.72); transform: scale(1.04); }

.opcao__foto {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--grafite);
}
.opcao__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.45) contrast(1.06) brightness(.66);
  transition: filter .3s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.opcao__foto::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(var(--capa-escura) / .8) 0%, rgb(var(--capa-escura) / .1) 70%);
}

/* Foto alta com o título por cima — usada no passo "tipo de aula",
   onde a imagem carrega o significado (uma pessoa sozinha / uma turma)
   melhor que qualquer ícone. */
.opcao__foto--alta { aspect-ratio: 16 / 10; }

.opcao__cabeca {
  position: absolute;
  left: var(--e5); right: var(--e5); bottom: var(--e4);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-width: 0;
  color: var(--texto-sobre-foto);
}
.opcao__cabeca svg {
  width: 34px; height: 34px;
  flex: none;
  padding: 8px;
  border-radius: 50%;
  background: rgb(var(--capa-escura) / .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--verde-sobre-foto);
}
.opcao__cabeca b {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  min-width: 0;
}
.opcao--ativa .opcao__cabeca svg { background: var(--verde); color: var(--preto); }

.opcao__corpo {
  display: grid;
  gap: var(--e2);
  align-content: start;
  padding: var(--e4) var(--e5) var(--e5);
  min-width: 0;
}
.opcao__nome {
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}
.opcao__texto { font-size: 0.9375rem; color: var(--medio); line-height: 1.5; }
.opcao__meta {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--fraco);
}
.opcao__meta b { color: var(--medio); font-weight: 600; }

/* Marca de estado no canto: check quando escolhida, cadeado quando
   trancada. Não é só a cor que muda — é a superfície e o ícone. */
.opcao__marca {
  position: absolute;
  top: var(--e3); right: var(--e3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgb(var(--capa-escura) / .6);
  color: var(--texto-sobre-foto);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.opcao__marca svg { width: 16px; height: 16px; }

.opcao--ativa {
  border-color: var(--verde);
  box-shadow: 0 0 0 2px var(--verde), var(--sombra);
}
.opcao--ativa .opcao__foto img { filter: grayscale(0) contrast(1.05) brightness(.7); }
.opcao--ativa .opcao__marca { background: var(--verde); color: var(--preto); }
.opcao--ativa .opcao__icone { background: var(--verde); color: var(--preto); }

.opcao--trancada { cursor: default; }
.opcao--trancada .opcao__foto img { filter: grayscale(1) contrast(.95) brightness(.4); }
.opcao--trancada .opcao__nome, .opcao--trancada .opcao__texto { color: var(--fraco); }
.opcao--trancada .opcao__marca { background: var(--vidro-forte); color: var(--medio); }
.opcao__travado {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--ambar-texto);
}
.opcao__travado svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------
   GRADE DE HORÁRIOS — lado a lado, quebrando em bloco

   Um horário é um dado curto; empilhar onze deles numa coluna era
   desperdiçar a tela inteira e obrigar a rolar para comparar.
   --------------------------------------------------------------- */
.grade-horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: var(--e2);
  min-width: 0;
}

.slot {
  display: grid;
  gap: 3px;
  align-content: center;
  justify-items: start;
  min-height: 88px;
  padding: var(--e3) var(--e4);
  background: var(--asfalto);
  border: 1px solid var(--risco);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  text-align: left;
  min-width: 0;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.slot:hover:not(:disabled) { border-color: var(--risco-forte); transform: translateY(-2px); box-shadow: var(--sombra); }
.slot__hora {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.slot__nota { font-size: 0.75rem; color: var(--fraco); line-height: 1.35; overflow-wrap: anywhere; }
.slot__vagas {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--verde-aceso);
}
.slot__vagas::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.slot--livre .slot__hora { color: var(--texto); }
.slot--ativo {
  background: var(--texto);
  border-color: var(--texto);
  color: var(--tinta);
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}
.slot--ativo .slot__hora, .slot--ativo .slot__nota, .slot--ativo .slot__vagas { color: var(--tinta); }
.slot:disabled { cursor: not-allowed; opacity: .42; box-shadow: none; }
.slot--minha { border-color: var(--verde); box-shadow: inset 0 0 0 1px var(--verde); opacity: 1; }
.slot--minha .slot__hora { color: var(--verde-aceso); }
.slot--minha .slot__vagas { color: var(--verde-aceso); }

/* ---------------------------------------------------------------
   CONFIRMADO — a tela de "deu certo"

   Centrada e curta: o objetivo foi cumprido, e o que resta é olhar a
   ficha e decidir o próximo passo.
   --------------------------------------------------------------- */
.sucesso {
  justify-items: center;
  text-align: center;
  gap: var(--e5);
  max-width: 560px;
  margin-inline: auto;
  padding-top: var(--e5);
}
.sucesso__marca {
  display: grid;
  place-items: center;
  width: 104px; height: 104px;
  border-radius: 50%;
  background: var(--verde-fundo);
  animation: pulo-sucesso .42s cubic-bezier(.34, 1.56, .64, 1) both;
}
.sucesso__marca svg { width: 60px; height: 60px; overflow: visible; }
.sucesso__marca .selo-pago__circulo { animation: tracar-circulo .5s ease-out .08s forwards; }
.sucesso__marca .selo-pago__check   { animation: tracar-circulo .3s ease-out .42s forwards; }
@keyframes pulo-sucesso { from { transform: scale(.6); opacity: 0; } }

.sucesso__voz { display: grid; gap: var(--e2); }
.sucesso__voz h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.sucesso__voz p { color: var(--medio); font-size: 0.9375rem; }

.sucesso__ficha { width: 100%; text-align: left; }
.sucesso .etapa__pe { width: 100%; justify-content: center; }
.sucesso .etapa__pe .btn:last-child { margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .sucesso__marca { animation: none; }
  .sucesso__marca .selo-pago__circulo,
  .sucesso__marca .selo-pago__check { animation: none; stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------
   RESUMO DA RESERVA — a etapa de confirmação
   --------------------------------------------------------------- */
.resumo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--e5);
  align-items: start;
  min-width: 0;
}
.resumo__capa {
  position: relative;
  min-height: 260px;
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--grafite);
  box-shadow: var(--sombra-cartao);
}
.resumo__capa img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.28) contrast(1.06) brightness(.6);
}
.resumo__capa::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(var(--capa-escura) / .95) 6%, rgb(var(--capa-escura) / .35) 60%, rgb(var(--capa-escura) / .05) 100%);
}
.resumo__sobre {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: grid;
  gap: 4px;
  padding: var(--e5);
}
.resumo__hora {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--texto-sobre-foto);
}
.resumo__nome {
  font-weight: 650;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--texto-sobre-foto);
}
.resumo__quando { font-size: 0.9375rem; color: var(--medio-sobre-foto); }
.resumo__lado { display: grid; gap: var(--e4); align-content: start; min-width: 0; }

/* ============================================================
   PLANO
   ============================================================ */
.plano {
  display: grid;
  gap: var(--e6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
  min-width: 0;
}
.plano__lado { display: grid; gap: var(--e4); align-content: start; min-width: 0; }
.plano--sozinho { grid-template-columns: minmax(0, 1fr); max-width: 640px; }

/* Vencimento em destaque: a data é a informação da tela. */
.vencimento {
  display: grid; gap: 2px; padding: var(--e4) var(--e5);
  border-radius: var(--raio-sm); background: var(--grafite); border: 1px solid var(--risco);
}
.vencimento__rotulo { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fraco); }
.vencimento__data { font-size: clamp(1.75rem, 5vw, 2.25rem); font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; }
.vencimento__conta { font-size: 0.875rem; color: var(--medio, var(--fraco)); }
.vencimento--ok { background: var(--verde-fundo); border-color: transparent; }
.vencimento--ok .vencimento__data { color: var(--verde-aceso); }
.vencimento--alerta { background: var(--ambar-fundo); border-color: transparent; }
.vencimento--alerta .vencimento__data { color: var(--ambar-aceso); }
.vencimento--ruim { background: var(--vermelho-fundo); border-color: transparent; }
.vencimento--ruim .vencimento__data { color: var(--vermelho-aceso); }

.como-renovar { display: flex; gap: var(--e3); align-items: flex-start; font-size: 0.8125rem; color: var(--fraco); }
.como-renovar svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

.peitoral__botoes { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: center; }

/* Contrato e anamnese */
.dialogo__caixa--largo { max-width: 720px; }
.documento__texto {
  white-space: pre-wrap; font-size: 0.9rem; line-height: 1.6; max-height: 46vh; overflow-y: auto;
  padding: var(--e4); margin-bottom: var(--e5); border: 1px solid var(--risco); border-radius: var(--raio-sm);
  background: var(--grafite);
}
.pendencia { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e2) var(--e3); align-items: center;
  padding: var(--e4); border: 1px solid var(--risco); border-radius: var(--raio-sm); }
.pendencia__icone svg { width: 22px; height: 22px; color: var(--ambar-aceso); }
.pendencia__corpo { display: grid; gap: 2px; }
.pendencia__corpo span { font-size: 0.875rem; color: var(--fraco); }
.pendencia > .btn { grid-column: 1 / -1; }
.pergunta { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e2); min-width: 0; }
.pergunta legend, .pergunta > label { padding: 0; margin-bottom: var(--e2); }
.pergunta__texto { font-weight: 600; font-size: 0.9375rem; line-height: 1.4; }
.pergunta__n { color: var(--fraco); font-variant-numeric: tabular-nums; }
.sim-nao { display: flex; gap: var(--e3); }
.sim-nao label { display: inline-flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e4);
  border: 1px solid var(--risco); border-radius: 999px; cursor: pointer; }
.sim-nao label:has(input:checked) { border-color: var(--verde); background: var(--verde-fundo); }
.sim-nao input { accent-color: var(--verde); }

/* Contrato formatado e pontos em destaque */
/* min-height: na grade do diálogo, a caixa com rolagem própria encolhia até
   duas linhas — e o aluno precisa conseguir ler o que está assinando. */
.documento__texto { white-space: normal; min-height: min(46vh, 360px); }
.documento__texto h2, .documento__texto h3, .documento__texto h4, .documento__texto h5 {
  margin: var(--e4) 0 var(--e2); line-height: 1.3; letter-spacing: -0.01em; }
.documento__texto h2 { font-size: 1.05rem; } .documento__texto h3 { font-size: 0.98rem; } .documento__texto h4 { font-size: 0.92rem; }
.documento__texto p { margin: 0 0 var(--e3); }
.documento__texto ul, .documento__texto ol { margin: 0 0 var(--e3); padding-left: 1.25rem; display: grid; gap: 4px; }
.documento__texto hr { border: 0; border-top: 1px solid var(--risco); margin: var(--e4) 0; }
.doc-destaque { position: relative; margin: var(--e4) 0; padding: var(--e4); border-radius: var(--raio-sm);
  border: 1px solid var(--ambar-aceso); background: var(--ambar-fundo); }
.doc-destaque h4, .doc-destaque > p:first-of-type strong { color: var(--ambar-aceso); }
.doc-destaque__selo { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ambar-aceso); margin-bottom: var(--e2); }
.ciencias { display: grid; gap: var(--e3); padding: var(--e4); border-radius: var(--raio-sm);
  border: 1px solid var(--ambar-aceso); background: var(--ambar-fundo); }
.ciencias__titulo { color: var(--ambar-aceso); }
.ciencia strong { color: var(--texto); }
.uso-imagem { border: 1px solid var(--risco); border-radius: var(--raio-sm); padding: var(--e4); margin: 0; }
.uso-imagem legend { padding: 0 var(--e2); font-weight: 600; }

/* Passo a passo do diálogo de regularização. */
.passos { list-style: none; counter-reset: passo; display: grid; gap: var(--e4); margin: var(--e5) 0 0; padding: 0; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--e3); }
.passos li::before {
  content: counter(passo); grid-row: span 2; width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center; font-weight: 700; font-size: 0.875rem;
  background: var(--verde-fundo); color: var(--verde-aceso);
}
.passos strong { font-weight: 650; }
.passos span { font-size: 0.875rem; color: var(--fraco); }

.assinatura { display: grid; gap: var(--e3); min-width: 0; }
.assinatura__nome {
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.assinatura__preco { display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.assinatura__valor {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Cartão de plano: fotografia no topo, preço em destaque, o que
   está incluído em lista — porque é a informação que decide a
   compra, não um detalhe de rodapé. */
.planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e4);
  align-items: stretch;
}
.plano-col {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--risco);
  border-radius: var(--raio-lg);
  background: var(--asfalto);
  box-shadow: var(--sombra-cartao);
  overflow: hidden;
  min-width: 0;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.plano-col:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.plano-col--destaque { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde), var(--sombra-cartao); }

.plano-col__foto {
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: var(--grafite);
}
.plano-col__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.3) contrast(1.06) brightness(.7);
}
.plano-col__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(var(--capa-escura) / .92) 0%, rgb(var(--capa-escura) / .08) 78%);
}
.plano-col__selo {
  position: absolute;
  top: var(--e3); right: var(--e3);
  z-index: 1;
  padding: 5px var(--e3);
  border-radius: var(--raio-pill);
  background: var(--verde);
  color: var(--preto);
  font-size: 0.75rem;
  font-weight: 700;
}
/* O plano que o aluno já tem: identificado, mas recuado — a atenção
   pertence às opções que ele ainda pode escolher. */
.plano-col__selo--atual { background: rgb(var(--capa-escura) / .66); color: var(--texto-sobre-foto); backdrop-filter: blur(8px); }
.plano-col--atual { opacity: .74; }
.plano-col--atual:hover { transform: none; box-shadow: var(--sombra-cartao); }
.plano-col__nome {
  position: absolute;
  left: var(--e5); right: var(--e5); bottom: var(--e4);
  z-index: 1;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--texto-sobre-foto);
}

.plano-col__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e5);
}
.plano-col__preco {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 2.125rem;
  line-height: 1;
  letter-spacing: -0.045em;
}
.plano-col__preco span { font-size: 0.875rem; font-weight: 500; color: var(--fraco); letter-spacing: 0; }
.plano-col__freq {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.875rem; font-weight: 650; color: var(--verde-aceso);
}
.plano-col p { font-size: 0.875rem; color: var(--fraco); line-height: 1.5; }
.plano-col .btn { margin-top: auto; }

/* O que o plano inclui — a regra do produto, não um detalhe. */
.inclui { display: grid; gap: var(--e2); margin: 0; padding: 0; }
.inclui li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--e2);
  font-size: 0.875rem;
  font-weight: 550;
  min-width: 0;
}
.inclui svg { width: 15px; height: 15px; color: var(--verde-aceso); align-self: center; }
.inclui small { display: block; font-weight: 400; color: var(--fraco); font-size: 0.75rem; }

/* ============================================================
   CHECKOUT — tela própria, não um popup

   Duas colunas: o que preencher à esquerda, o que está sendo
   comprado à direita, fixo enquanto se rola.
   ============================================================ */
.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr);
  gap: var(--e6);
  align-items: start;
  min-width: 0;
}
.checkout__principal { display: grid; gap: var(--e5); align-content: start; min-width: 0; }

/* "esta tela atualiza sozinha" — tranquiliza quem vai pagar no app do
   banco e voltar: não precisa apertar nada. Discreto de propósito; o
   protagonista da tela é o QR. */
.aguardando-pagamento {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--medio);
}
.aguardando-pagamento[hidden] { display: none; }
.aguardando-pagamento__giro {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--verde-aceso);
}
.checkout__lado { position: sticky; top: calc(var(--altura-topo) + var(--e5)); display: grid; gap: var(--e4); min-width: 0; }

.checkout__capa {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--grafite);
}
.checkout__capa img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.3) contrast(1.06) brightness(.66);
}
.checkout__capa::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(var(--capa-escura) / .94) 2%, rgb(var(--capa-escura) / .12) 80%);
}
.checkout__capa strong {
  position: absolute;
  left: var(--e5); right: var(--e5); bottom: var(--e4);
  z-index: 1;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
  color: var(--texto-sobre-foto);
}

.checkout__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
}
.checkout__total b {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.045em;
}

/* Formas de pagamento: três cartões selecionáveis, não três células
   de tabela separadas por 1px de fundo. */
.formas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e2);
}
.forma {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: var(--e4) var(--e2);
  min-height: 116px;
  background: var(--grafite);
  border: 1px solid transparent;
  border-radius: var(--raio);
  text-align: center;
  color: var(--medio);
  transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.forma svg { width: 22px; height: 22px; }
.forma__marca { width: 40px !important; height: 40px !important; }
.forma strong { font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.01em; color: var(--texto); }
.forma small { font-size: 0.75rem; color: var(--fraco); }
.forma:hover { border-color: var(--risco-forte); transform: translateY(-2px); }
.forma.is-ativa {
  background: var(--asfalto);
  border-color: var(--verde);
  box-shadow: 0 0 0 1px var(--verde), var(--sombra-cartao);
  color: var(--texto);
}
.forma.is-ativa small { color: var(--verde-aceso); }

/* Pix */
.pix { display: grid; justify-items: center; gap: var(--e4); }
.pix img { width: min(220px, 100%); background: #fff; padding: var(--e3); border-radius: var(--raio); }
.pix__codigo {
  width: 100%;
  padding: var(--e4);
  background: var(--grafite);
  border-radius: var(--raio-sm);
  font-size: 0.8125rem;
  color: var(--medio);
  word-break: break-all;
  max-height: 92px;
  overflow-y: auto;
}

/* O passo a passo de como pagar */
.passo-a-passo {
  display: grid;
  gap: var(--e3);
  counter-reset: passo;
  padding: var(--e5);
  background: var(--grafite);
  border-radius: var(--raio);
  font-size: 0.9375rem;
  color: var(--medio);
}
.passo-a-passo li {
  display: flex;
  gap: var(--e3);
  line-height: 1.5;
  counter-increment: passo;
}
.passo-a-passo li::before {
  content: counter(passo);
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--verde-fundo);
  color: var(--verde-texto);
  font-size: 0.75rem;
  font-weight: 700;
}

/* ============================================================
   Minhas aulas — cartão com foto
   ============================================================ */
.aulas-lista { display: grid; gap: var(--e3); min-width: 0; }

/* As confirmadas vêm agrupadas pela semana a que pertencem: o limite do
   plano é semanal, e uma lista corrida faz "4 aulas" num plano de 3
   parecer um erro do sistema quando são 3 de uma semana e 1 da outra. */
.grupo-semana { display: grid; gap: var(--e3); min-width: 0; }
.grupo-semana + .grupo-semana { margin-top: var(--e5); }
.grupo-semana__topo {
  display: flex;
  align-items: baseline;
  gap: var(--e2) var(--e4);
  flex-wrap: wrap;
  min-width: 0;
}
.grupo-semana__topo h3 {
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.grupo-semana__conta {
  font-size: 0.8125rem;
  color: var(--fraco);
  font-variant-numeric: tabular-nums;
}

.aula-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-cartao);
  display: flex;
  flex-direction: column;
}
.aula-card__foto {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(135deg, var(--verde-fundo), var(--grafite-alto));
}
.aula-card__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.32) contrast(1.06) brightness(.7);
}
.aula-card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgb(var(--capa-escura) / .5) 0%,
    rgb(var(--capa-escura) / .76) 100%);
}

.aula-card__topo {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  min-width: 0;
  padding: var(--e5) 96px var(--e4) var(--e5);
}
.aula-card__hora {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--texto-sobre-foto);
}
.aula-card__corpo { flex: 1; min-width: 0; display: grid; gap: 3px; padding-top: 2px; }
.aula-card__nome {
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--texto-sobre-foto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aula-card__meta { font-size: 0.875rem; color: var(--medio-sobre-foto); min-width: 0; }

.aula-card__selo {
  position: absolute;
  top: var(--e4); right: var(--e4);
  z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--e3);
  border-radius: var(--raio-pill);
  background: rgb(var(--capa-escura) / .55);
  border: 1px solid rgb(244 245 246 / .16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--texto-sobre-foto);
}
.aula-card__selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.aula-card__selo--ok   { color: var(--verde-sobre-foto); }
.aula-card__selo--ruim { color: #ff8f7a; }
.aula-card__selo--frio { color: rgb(244 245 246 / .6); }

.aula-card__acao:empty { display: none; }
.aula-card__acao { padding: 0 var(--e5) var(--e5); }
.aula-card__acao .btn {
  width: 100%;
  border-color: rgb(244 245 246 / .26);
  background: rgb(var(--capa-escura) / .4);
  color: var(--texto-sobre-foto);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.aula-card__acao .btn:hover { background: rgb(var(--capa-escura) / .65); }

.aula-card--apagada { box-shadow: none; }
.aula-card--apagada .aula-card__foto img { filter: grayscale(.85) contrast(1) brightness(.48); }
.aula-card--apagada .aula-card__hora,
.aula-card--apagada .aula-card__nome { color: rgb(244 245 246 / .55); }

/* ============================================================
   Adaptações
   ============================================================ */
@media (max-width: 1080px) {
  .inicio, .plano, .checkout, .resumo { grid-template-columns: minmax(0, 1fr); }
  .checkout__lado { position: static; }
  /* No empilhado, o que se compra vem ANTES do formulário: ninguém
     preenche cartão sem antes ver o que está levando. */
  .checkout__lado { order: -1; }
  .resumo__capa { min-height: 200px; }
}

/* A navegação desce para a barra inferior bem antes do celular: entre
   ~760 e ~1000px as quatro seções ainda cabiam no topo em teoria, mas
   espremiam a marca e a conta contra elas. Melhor a barra de baixo,
   que é onde o polegar já procura. */
@media (max-width: 1000px) {
  .app { padding-bottom: calc(var(--altura-barra) + env(safe-area-inset-bottom)); }
  .topo__quem { display: none; }
  /* O aviso sobe acima da barra de abas em vez de pousar em cima dela. */
  .toast { --toast-pe: calc(var(--altura-barra) + var(--e3)); }

  /* Sem desfoque no header a partir daqui: `backdrop-filter` cria bloco
     de contenção para descendentes `position: fixed`, e é neste ponto
     que a `.nav` — filha do header — vira a barra fixa do rodapé. Com o
     filtro ligado, ela ficaria presa ao topo. O header fica opaco. */
  .topo {
    background: var(--tinta);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    border-radius: 0;
    height: calc(var(--altura-barra) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgb(var(--tinta-rgb) / .86);
    backdrop-filter: var(--desfoque);
    -webkit-backdrop-filter: var(--desfoque);
    box-shadow: 0 -1px 0 var(--vidro-risco);
  }
  .nav__item {
    height: auto;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0 var(--e1);
    border-radius: 0;
    font-size: 0.6875rem;
    font-weight: 550;
  }
  .nav__item svg { width: 20px; height: 20px; }
  .nav__item[aria-current="page"] {
    background: none;
    box-shadow: none;
    color: var(--verde-aceso);
  }
}

@media (max-width: 760px) {
  .topo { gap: var(--e3); }

  .conteudo { padding: var(--e5) var(--margem) var(--e7); }
  .tela { gap: var(--e5); }

  .cabeca { align-items: flex-start; }
  .cabeca__lado { justify-items: start; text-align: left; }
  .fracao { justify-content: flex-start; }
  .fracao__usadas { font-size: 2.25rem; }

  .peitoral__faixa {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  /* A fita de dias sangra até a borda da tela — a rolagem some sob a
     margem em vez de parar num degrau visível no meio do gesto. */
  .fita-dias__rolagem { margin-inline: calc(var(--margem) * -1); padding-inline: var(--margem); }

  .formas { grid-template-columns: 1fr; }
  .forma { grid-template-columns: 44px minmax(0, 1fr); justify-items: start; text-align: left; min-height: 0; padding: var(--e3) var(--e4); align-items: center; }
  .forma__marca { grid-row: span 2; }
  .planos { grid-template-columns: minmax(0, 1fr); }
  .escolhas, .escolhas--duplo { grid-template-columns: minmax(0, 1fr); }
  .grade-horas { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .slot { min-height: 78px; padding: var(--e3); }
  .slot__hora { font-size: 1.25rem; }

  .resumo__hora { font-size: 2.25rem; }
  .etapa__pe .btn { flex: 1; }
  .etapa__pe .btn:last-child { margin-left: 0; }
}

@media (max-width: 420px) {
  .aula-card__topo { padding: var(--e4) 88px var(--e3) var(--e4); }
  .aula-card__acao { padding: 0 var(--e4) var(--e4); }
  .aula-card__hora { font-size: 1.625rem; }
  .grade-horas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==================================================================
   Remarcação — a troca de horário

   Duas colunas com uma seta no meio, e não uma lista de "antes/depois",
   porque a operação é literalmente uma troca: o aluno precisa ver de
   onde sai e para onde entra no mesmo golpe de vista, antes de
   confirmar algo que solta a vaga dele para outra pessoa.
   ================================================================== */
.agenda__grade:empty { display: none; }

.agenda__grade .aviso { margin-block: var(--e3) 0; }
.agenda__grade .aviso button { margin-inline-start: auto; flex: none; }

.troca {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--e2);
  margin-block: var(--e4);
}

.troca__lado {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--risco);
  border-radius: var(--raio);
  background: var(--teto);
}

.troca__lado small {
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fraco);
}

.troca__lado strong { font-size: 1.05rem; line-height: 1.25; }
.troca__lado span   { font-size: .875rem; color: var(--medio); }

/* A vaga que está sendo largada aparece apagada e riscada de vermelho:
   é a metade da operação que o aluno perde, e ela precisa parecer uma
   perda — não mais uma linha de resumo. */
.troca__lado--sai {
  opacity: .72;
  border-color: var(--vermelho-risco, var(--risco));
}
.troca__lado--sai strong { text-decoration: line-through; text-decoration-thickness: 1px; }

.troca__lado--entra {
  border-color: var(--verde);
  box-shadow: inset 0 0 0 1px var(--verde);
}

.troca__seta {
  display: grid;
  place-items: center;
  color: var(--fraco);
}
.troca__seta svg { width: 22px; height: 22px; }

@media (max-width: 560px) {
  .troca { grid-template-columns: 1fr; }
  .troca__seta { transform: rotate(90deg); padding-block: var(--e1); }
}

/* Motivo do bloqueio embaixo do cartão da aula — o aluno lê por que o
   botão está apagado sem precisar de hover, que não existe no celular. */
.aula-card__nota {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e2);
  padding-top: var(--e2);
  border-top: 1px dashed var(--risco);
  font-size: .8125rem;
  color: var(--medio);
}
.aula-card__nota svg { width: 15px; height: 15px; flex: none; color: var(--fraco); }

/* A contagem entra pelo CSS, a partir do `data-n` que o JS escreve — o
   rótulo do chip continua sendo só a palavra no HTML, legível para
   leitor de tela sem o número colado nela. */
.chips .chip[data-n]::after {
  content: " " attr(data-n);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  opacity: .6;
}

/* Semana cheia é informação de limite, não erro: âmbar, não vermelho.
   O aluno não fez nada errado — ele usou o plano inteiro. */
.grupo-semana__conta--cheia { color: var(--ambar-texto); }

/* ==================================================================
   Cartão de aula em tela estreita

   O selo é absoluto no canto e o topo reservava 88px para ele. Só que
   "Confirmada" com a lanterna mede ~110px: o nome da modalidade batia
   no selo e virava "Funcional & co…" em toda aula de nome comprido —
   que são quase todas.

   Reservar mais padding só encolheria o nome de novo. Em telas
   estreitas o selo sai da sobreposição e passa a ocupar a própria
   linha: o nome recupera a largura inteira, e o estado continua
   visível na mesma altura do olho.
   ================================================================== */
@media (max-width: 560px) {
  .aula-card__selo {
    position: static;
    align-self: flex-start;
    margin: var(--e4) var(--e4) 0;
  }

  /* Sem o selo por cima, o topo não precisa mais guardar espaço à direita. */
  .aula-card__topo { padding: var(--e3) var(--e4) var(--e3); }

  /* O nome ganha a largura toda e pode usar duas linhas antes de cortar:
     "Funcional & condicionamento" cabe inteiro em duas. */
  .aula-card__nome {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Duas ações (Remarcar e Cancelar) empilhadas ocupam a tela inteira à
     toa; lado a lado cada uma ainda passa dos 44px de alvo. */
  .aula-card__acao { display: flex; gap: var(--e2); }
  .aula-card__acao .btn { flex: 1; min-height: 44px; }
}

/* ==================================================================
   Grade fechada — o recado do studio separado da voz do app

   São três informações e três vozes: o estado (sistema), o motivo
   (escrito pelo Fernando, à mão) e o que fazer (sistema). Numa frase
   corrida elas se misturavam: "A grade está fechada. Manutenção de
   horários Fale com o studio para marcar." O texto do admin não termina
   em ponto — ele não foi escrito para emendar em nada.

   As aspas em volta do recado dizem de quem é a frase. É a diferença
   entre o app afirmando algo e o app citando o studio.
   ================================================================== */
.trava { align-items: flex-start; }
.trava__voz { display: grid; gap: var(--e2); min-width: 0; }
.trava__voz strong { font-size: 0.9375rem; }

.trava__recado {
  quotes: "“" "”";
  font-style: italic;
  line-height: 1.45;
  padding-left: var(--e3);
  border-left: 1px solid currentColor;
  opacity: .9;
}

.trava__saida { font-size: 0.875rem; opacity: .78; }