/* =========================================================================
   APP DO CLIENTE: casca e telas
   ========================================================================= */

/* ---------- Casca ---------- */
.app { min-height: 100dvh; }
.tela { outline: none; }
.tela__conteudo { max-width: 1120px; margin: 0 auto; padding: var(--e5) 20px calc(var(--abas-altura) + 48px + env(safe-area-inset-bottom)); }

.logo-barberos { display: inline-flex; align-items: center; gap: 10px; }
.logo-barberos__simbolo { width: 32px; height: 32px; flex: none; }
.logo-barberos__nome { font-family: var(--f-titulo); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.12em; }

.loja { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.loja__logo { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 2px; background: var(--escuro); color: var(--sobre-escuro); font-family: var(--f-display); font-size: 1.4rem; font-weight: 400; }
.loja__logo--g { width: 48px; height: 48px; font-size: 1.9rem; }
.loja__texto { display: grid; min-width: 0; }
.loja__texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }

/* Barra superior (celular) */
.topo-app {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: calc(var(--e3) + env(safe-area-inset-top)) 20px var(--e3);
  background: color-mix(in srgb, var(--fundo) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
}
.topo-app .loja { flex: 1; }
.topo-app__perfil { border-radius: 50%; }

/* Abas inferiores (celular) */
.abas {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--superficie) 94%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--linha);
}
.abas ul { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 560px; margin: 0 auto; }
.abas__link {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 6px 0;
  color: var(--texto-3);
  font-size: 0.68rem;
  font-weight: 600;
}
.abas__link i { display: grid; place-items: center; width: 56px; height: 30px; border-radius: var(--r-pilula); font-size: 1.35rem; transition: background-color var(--medio) var(--ease), color var(--medio); }
.abas__link .ativo-icone,
.lateral__link .ativo-icone { display: none; }
.abas__link[aria-current="page"] { color: var(--texto); }
.abas__link[aria-current="page"] i { background: var(--marca-suave); color: var(--marca-texto); }
.abas__link[aria-current="page"] .ph:not(.ativo-icone),
.lateral__link[aria-current="page"] .ph:not(.ativo-icone) { display: none; }
.abas__link[aria-current="page"] .ativo-icone,
.lateral__link[aria-current="page"] .ativo-icone { display: grid; }

/* Barra lateral (computador) */
.lateral { display: none; }

@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); }
  .topo-app,
  .abas { display: none; }
  .lateral {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e5);
    height: 100dvh;
    padding: var(--e6) var(--e4);
    border-right: 1px solid var(--linha);
    background: var(--superficie);
  }
  .lateral__marca { padding: 0 var(--e2); }
  .loja--lateral { padding: var(--e3); border-radius: var(--r-cartao); background: var(--superficie-2); }
  .lateral__nav { display: grid; gap: 2px; }
  .lateral__link { display: flex; align-items: center; gap: var(--e3); min-height: 44px; padding: 0 var(--e3); border-radius: var(--r-campo); color: var(--texto-2); font-weight: 600; transition: background-color var(--rapido), color var(--rapido); }
  .lateral__link i { font-size: 1.3rem; }
  .lateral__link:hover { background: var(--superficie-2); color: var(--texto); }
  .lateral__link[aria-current="page"] { background: var(--marca-suave); color: var(--marca-texto); }
  .lateral__rodape { display: grid; gap: var(--e2); margin-top: auto; padding-top: var(--e4); border-top: 1px solid var(--linha); }
  .lateral__admin,
  .lateral__demo { display: flex; align-items: center; gap: var(--e2); min-height: 40px; padding: 0 var(--e3); border-radius: var(--r-campo); color: var(--texto-2); font-size: 0.86rem; font-weight: 600; text-align: left; }
  .lateral__admin:hover,
  .lateral__demo:hover { background: var(--superficie-2); color: var(--texto); }
  .lateral__demo { color: var(--demo-texto); }
  .tela__conteudo { padding: var(--e10) var(--e10) var(--e12); }
  .avisos { bottom: 24px; left: calc(50% + var(--lateral) / 2); }
  .rolagem-x { margin-inline: 0; padding-inline: 0; grid-auto-columns: minmax(220px, 1fr); }
  .chips { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; }
}

/* ---------- Início ---------- */
.inicio__ola { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e4); margin-bottom: var(--e5); }
.inicio__saudacao { color: var(--texto-2); font-weight: 600; }
.inicio__nome { font-family: var(--f-display); font-size: clamp(2.8rem, 6vw, 4rem); font-weight: 400; letter-spacing: -0.015em; line-height: 0.95; outline: none; }
.inicio__data { margin-top: 2px; font-size: 0.86rem; }
.inicio__data::first-letter { text-transform: uppercase; }
.pontos-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--linha-forte); font-size: 0.84rem; white-space: nowrap; }
.pontos-chip i { color: var(--acento); font-size: 1.05rem; }
.pontos-chip:hover { border-color: var(--linha-forte); }

.inicio__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
.inicio__lado { display: grid; gap: var(--e4); align-content: start; }
@media (min-width: 1100px) {
  .inicio__grade { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e8); }
  .inicio__lado { position: sticky; top: var(--e10); }
}

/* Próximo agendamento (cartão escuro) */
.proximo {
  position: relative;
  overflow: hidden;
  padding: var(--e5);
  border-radius: var(--r-cartao);
  background: var(--escuro);
  color: var(--sobre-escuro);
}
.proximo__topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); }
.proximo__rotulo { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento-claro); }
.proximo__quando { padding: 2px 8px; border: 1px solid rgba(242, 241, 237, 0.3); font-size: 0.74rem; font-weight: 600; }
.proximo__servico { margin-top: var(--e3); font-family: var(--f-display); font-size: 2.3rem; font-weight: 400; line-height: 1; }
.proximo__data { margin-top: 2px; color: var(--sobre-escuro-2); }
.proximo__data::first-letter { text-transform: uppercase; }
.proximo__data strong { color: var(--sobre-escuro); }
.proximo__prof { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e4); font-size: 0.9rem; color: var(--sobre-escuro-2); }
.proximo__prof strong { color: var(--sobre-escuro); }
.proximo__acoes { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e5); }
.proximo--compacto { padding: var(--e4); border-radius: var(--r-cartao); }
.proximo--compacto .proximo__servico { font-size: 1.7rem; }
.proximo--vazio { background: transparent; color: var(--texto); border: 1px dashed var(--linha-forte); }

/* Botão grande de agendar */
.botao-agendar {
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin-top: var(--e4);
  padding: var(--e4) var(--e5);
  border-radius: var(--r-cartao);
  background: var(--marca);
  color: var(--sobre-marca);
  transition: transform var(--rapido), background-color var(--rapido);
}
.botao-agendar:hover { background: var(--marca-forte); }
.botao-agendar:active { transform: scale(0.99); }
.botao-agendar__icone { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--sobre-marca) 35%, transparent); border-radius: 50%; font-size: 1.3rem; }
.botao-agendar__texto { display: grid; flex: 1; gap: 2px; min-width: 0; }
.botao-agendar__texto strong { font-family: var(--f-display); font-size: 1.7rem; font-weight: 400; line-height: 1; }
.botao-agendar__texto small { font-size: 0.82rem; opacity: 0.85; }
.botao-agendar__seta { font-size: 1.3rem; transition: transform var(--rapido); }
.botao-agendar:hover .botao-agendar__seta { transform: translateX(3px); }
.chip-livre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--e3);
  min-height: 36px;
  padding: 0 var(--e4);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-pilula);
  color: var(--texto);
  font-size: 0.84rem;
  font-weight: 600;
}
.chip-livre i { color: var(--acento); }
.chip-livre:hover { border-color: var(--texto); }

/* Atalhos */
.atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.atalho {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  padding: var(--e4) var(--e2);
  border: 1px solid var(--linha);
  border-radius: var(--r-cartao);
  background: var(--superficie);
  color: var(--texto);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color var(--rapido), transform var(--rapido), background-color var(--rapido);
}
.atalho i { display: grid; place-items: center; width: 32px; height: 32px; color: var(--texto-2); font-size: 1.35rem; }
.atalho:hover { border-color: var(--texto); }
.atalho:hover i { color: var(--texto); }
.atalho:active { transform: scale(0.97); }
@media (min-width: 720px) { .atalhos { grid-template-columns: repeat(6, 1fr); } }

/* Cartão de serviço */
.cartao-servico {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
  padding: var(--e4);
  border-top: 1px solid var(--texto);
  background: transparent;
}
.cartao-servico__icone { display: none; }
.cartao-servico__nome { padding-right: 44px; font-family: var(--f-display); font-size: 1.6rem; font-weight: 400; line-height: 1.05; }
.cartao-servico__desc { color: var(--texto-2); font-size: 0.84rem; }
.cartao-servico__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); margin-top: var(--e2); padding-top: var(--e3); border-top: 1px solid var(--linha); }
.meta { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-2); font-size: 0.82rem; }
.preco { font-weight: 600; font-variant-numeric: tabular-nums; }
.cartao-servico__acao { position: absolute; top: var(--e4); right: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--texto); border-radius: 50%; color: var(--texto); font-size: 1rem; transition: transform var(--rapido), background-color var(--rapido), color var(--rapido); }
.cartao-servico__acao:hover { background: var(--texto); color: var(--fundo); transform: rotate(90deg); }

/* Cartão de profissional */
.cartao-prof__abrir { position: relative; display: grid; width: 100%; overflow: hidden; text-align: left; }
.cartao-prof__foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--superficie-2); }
.cartao-prof__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--ease); }
.cartao-prof__abrir:hover .cartao-prof__foto img { scale: 1.04; }
.cartao-prof__iniciais { display: grid; place-items: center; width: 100%; height: 100%; min-height: 160px; background: var(--superficie-2); color: var(--texto); font-family: var(--f-display); font-size: 3rem; }
.cartao-prof__info { display: grid; gap: 4px; padding: var(--e3) 0 var(--e2); }
.cartao-prof__nome { font-family: var(--f-display); font-size: 1.6rem; line-height: 1; }
.cartao-prof__esp { color: var(--texto-2); font-size: 0.82rem; }
.cartao-prof--compacto .cartao-prof__foto { aspect-ratio: 1; }

/* Clube (resumo) e loja */
.clube-mini,
.loja-info { padding: var(--e5); display: grid; gap: var(--e3); }
.clube-mini__topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); }
.clube-mini__pontos { font-size: 0.92rem; color: var(--texto-2); }
.clube-mini__pontos strong { font-family: var(--f-display); font-size: 2.6rem; font-weight: 400; color: var(--texto); line-height: 1; }
.clube-mini__meta { margin-bottom: var(--e2); font-size: 0.86rem; color: var(--texto-2); }
.clube-mini__beneficios { display: grid; gap: var(--e2); padding: var(--e3) 0; border-top: 1px solid var(--linha); }
.clube-mini__beneficios li { display: flex; align-items: center; gap: var(--e2); font-size: 0.86rem; }
.clube-mini__beneficios i { color: var(--texto-3); font-size: 1.1rem; }
.loja-info__topo { display: flex; align-items: center; gap: var(--e3); }
.loja-info__end { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; }

/* Como chegar */
.como-chegar { display: grid; gap: var(--e3); }
.como-chegar__end { display: flex; gap: var(--e2); }
.como-chegar__end i { margin-top: 3px; color: var(--acento); font-size: 1.2rem; }
.mapa-falso {
  display: grid;
  place-items: center;
  gap: var(--e2);
  aspect-ratio: 16 / 9;
  padding: var(--e4);
  border-radius: var(--r-cartao);
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, var(--linha) 34px 35px),
    repeating-linear-gradient(90deg, transparent 0 34px, var(--linha) 34px 35px),
    var(--superficie-2);
  color: var(--texto-2);
  font-size: 0.85rem;
  text-align: center;
}
.mapa-falso i { font-size: 1.8rem; color: var(--acento); }
.lista-horarios { display: grid; }
.lista-horarios li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 0.9rem; }
.lista-horarios li.hoje { font-weight: 600; }
.lista-horarios li.hoje span:first-child::after { content: "hoje"; margin-left: 8px; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento); }

/* ---------- Agendar ---------- */
.etapas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e2); margin-bottom: var(--e6); counter-reset: etapa; }
.etapas__botao { display: grid; justify-items: start; gap: 6px; width: 100%; padding-top: 10px; border-top: 2px solid var(--linha); color: var(--texto-3); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; }
.etapas__botao:not(:disabled):hover { color: var(--texto); }
.etapas__num { display: inline-grid; place-items: center; font-family: var(--f-display); font-size: 1.6rem; font-weight: 400; letter-spacing: 0; line-height: 1; transition: color var(--medio); }
.etapas__num i { font-size: 1.1rem; }
.etapas__item { position: relative; }
.etapas__item--feita .etapas__botao { border-top-color: var(--texto); color: var(--texto-2); }
.etapas__item--atual .etapas__botao { border-top-color: var(--acento); color: var(--texto); }
.etapas__item--atual .etapas__num { color: var(--acento); }
.etapas__botao:disabled { cursor: default; }

.agendar__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
.etapa__titulo { margin-bottom: var(--e4); font-family: var(--f-display); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 400; line-height: 1; outline: none; }
.etapa__sub { margin: calc(var(--e3) * -1) 0 var(--e4); color: var(--texto-2); }

/* Opções em lista com linhas finas (não em cartões) */
.opcoes { display: grid; border-top: 1px solid var(--texto); }
.opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4) var(--e2) var(--e4) var(--e3);
  border-bottom: 1px solid var(--linha);
  cursor: pointer;
  transition: background-color var(--rapido);
}
.opcao::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: transparent; transition: background-color var(--rapido); }
.opcao:hover { background: var(--superficie); }
.opcao__radio { position: absolute; opacity: 0; pointer-events: none; }
.opcao:has(.opcao__radio:checked) { background: var(--superficie); }
.opcao:has(.opcao__radio:checked)::before { background: var(--acento); }
.opcao:has(.opcao__radio:focus-visible) { outline: 2px solid var(--marca); outline-offset: -2px; }
.opcao__icone { display: none; }
.opcao__texto { display: grid; flex: 1; gap: 2px; min-width: 0; }
.opcao__texto > strong { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-family: var(--f-display); font-size: 1.5rem; font-weight: 400; line-height: 1.1; }
.opcao__texto .etiqueta { border: 0; padding: 0; font-family: var(--f-texto); color: var(--acento); }
.opcao__texto > span { color: var(--texto-2); font-size: 0.85rem; }
.opcao__meta { display: grid; justify-items: end; gap: 2px; text-align: right; white-space: nowrap; }
.opcao__meta span { display: inline-flex; align-items: center; gap: 3px; color: var(--texto-2); font-size: 0.8rem; }
.opcao__meta strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.opcao__check { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1px solid var(--linha-forte); color: transparent; font-size: 0.8rem; transition: all var(--rapido); }
.opcao:has(.opcao__radio:checked) .opcao__check { border-color: var(--marca); background: var(--marca); color: var(--sobre-marca); }
.opcao--prof { align-items: flex-start; flex-wrap: wrap; }
.opcao__avatar { border-radius: 0; }
.opcao__avatar--icone { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--linha-forte); color: var(--texto-2); font-size: 1.4rem; }
.opcao--prof .link-acao { position: absolute; right: var(--e4); bottom: var(--e3); }
.opcao--prof .opcao__texto { padding-bottom: var(--e4); }

/* Calendário */
.calendario { padding: var(--e4); }
.calendario__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--e3); }
.calendario__mes { font-family: var(--f-display); font-size: 1.6rem; font-weight: 400; }
.calendario__mes::first-letter { text-transform: uppercase; }
.calendario__semana,
.calendario__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario__semana span { padding: 4px 0; text-align: center; font-size: 0.74rem; font-weight: 700; color: var(--texto-3); }
.calendario__dias .esqueleto { grid-column: 1 / -1; }
.dia {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-height: 52px;
  border-radius: 1px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--rapido), color var(--rapido), transform var(--rapido);
}
.dia--livre { color: var(--texto); }
.dia--livre::after { content: ""; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--acento); }
.dia--livre:hover { background: var(--superficie-2); }
.dia--indisponivel { color: var(--texto-3); opacity: 0.55; text-decoration: line-through; text-decoration-thickness: 1px; }
.dia--hoje span { text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 4px; }
.dia--escolhido { background: var(--marca) !important; color: var(--sobre-marca) !important; }
.dia--escolhido::after { background: var(--sobre-marca); }
.dia:active:not(:disabled) { transform: scale(0.94); }

.legenda { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin: var(--e3) 0 var(--e5); font-size: 0.8rem; color: var(--texto-2); }
.legenda li { display: flex; align-items: center; gap: 6px; }
.legenda__marca { width: 14px; height: 14px; border: 1px solid var(--linha-forte); background: var(--superficie); }
.legenda__marca--ocupado { background: repeating-linear-gradient(135deg, var(--superficie-2) 0 3px, var(--linha-forte) 3px 4px); }
.legenda__marca--escolhido { background: var(--marca); border-color: var(--marca); }

.horarios__titulo { margin-bottom: var(--e3); font-family: var(--f-display); font-size: 1.6rem; font-weight: 400; }
.horarios__titulo::first-letter { text-transform: uppercase; }
.periodo + .periodo { margin-top: var(--e4); }
.periodo__nome { display: flex; justify-content: space-between; margin-bottom: var(--e2); padding-bottom: 6px; border-bottom: 1px solid var(--linha); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-2); }
.periodo__nome span { font-weight: 600; color: var(--texto-3); }
.periodo__horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--e2); }
.horario {
  min-height: 44px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-pilula);
  background: transparent;
  font-weight: 600;
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido), transform var(--rapido);
}
.horario:hover:not(:disabled) { border-color: var(--texto); }
.horario:active:not(:disabled) { transform: scale(0.95); }
.horario--ocupado { border-style: dashed; color: var(--texto-3); background: repeating-linear-gradient(135deg, var(--superficie-2) 0 4px, transparent 4px 8px); text-decoration: line-through; }
.horario--escolhido { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca) !important; }

/* Resumo e barra de ação */
.resumo-cartao { padding: var(--e5); background: transparent; border: 0; border-top: 1px solid var(--texto); }
.resumo-cartao__titulo { margin-bottom: var(--e2); font-family: var(--f-display); font-size: 1.8rem; font-weight: 400; }
.resumo-lista { display: grid; }
.resumo-item { display: grid; gap: 2px; padding: var(--e3) 0; border-bottom: 1px solid var(--linha); }
.resumo-item dt { font-size: 0.76rem; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.04em; }
.resumo-item dd { font-weight: 600; }
.resumo-item dd::first-letter { text-transform: uppercase; }
.resumo-item--vazio dd { color: var(--texto-3); font-weight: 500; }
.resumo-total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--e4) 0; color: var(--texto-2); }
.resumo-total strong { font-family: var(--f-display); font-size: 2.2rem; font-weight: 400; line-height: 1; color: var(--texto); }
.barra-acao__mini { display: none; }
.barra-acao__botoes { display: flex; gap: var(--e2); }
.barra-acao__botoes .botao { flex: 1; }
.barra-acao__ajuda { margin-top: var(--e2); font-size: 0.8rem; color: var(--texto-3); text-align: center; }

@media (min-width: 1024px) {
  .agendar__grade { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .agendar__resumo { position: sticky; top: var(--e10); }
}
@media (max-width: 1023px) {
  /* No celular, o resumo vira uma barra fixa acima das abas */
  .agendar__resumo { position: fixed; z-index: 35; left: 0; right: 0; bottom: calc(var(--abas-altura) + env(safe-area-inset-bottom)); }
  .resumo-cartao { padding: var(--e3) 20px; border: 0; border-top: 1px solid var(--texto); background: var(--fundo); }
  .resumo-cartao__titulo,
  .resumo-lista,
  .resumo-total,
  .barra-acao__ajuda { display: none; }
  .barra-acao { display: flex; align-items: center; gap: var(--e3); }
  .barra-acao__mini { display: grid; flex: 1; min-width: 0; font-size: 0.82rem; color: var(--texto-2); }
  .barra-acao__mini strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); font-size: 0.9rem; }
  .barra-acao__botoes { flex: none; }
  .barra-acao__botoes .botao--fantasma span { display: none; }
  .agendar { padding-bottom: calc(var(--abas-altura) + 140px + env(safe-area-inset-bottom)); }
  .etapas__nome { font-size: 0.7rem; }
}

.revisao { padding: var(--e5); }
.revisao__prof { display: flex; align-items: center; gap: var(--e3); padding-bottom: var(--e3); border-bottom: 1px solid var(--linha); }
.revisao__prof > div { display: grid; }
.revisao__prof span { color: var(--texto-2); font-size: 0.85rem; }
.revisao .resumo dd::first-letter { text-transform: uppercase; }
.revisao__pontos { display: flex; align-items: center; gap: var(--e2); margin: var(--e3) 0 var(--e4); padding: var(--e3) 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); color: var(--texto-2); font-size: 0.88rem; }
.revisao__pontos i { color: var(--acento); }
.agendar .alerta { margin-top: var(--e4); }

.resultado { display: grid; justify-items: center; gap: var(--e3); max-width: 520px; margin: 0 auto; padding: var(--e8) var(--e6); text-align: center; animation: surge 0.4s var(--ease); }
.resultado__icone { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--demo-linha); border-radius: 50%; color: var(--demo-texto); font-size: 1.6rem; }
.resultado__titulo { font-family: var(--f-display); font-size: 2.6rem; font-weight: 400; line-height: 1; outline: none; }
.resultado .resumo { width: 100%; margin: var(--e2) 0; text-align: left; }
.resultado__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2); }

/* ---------- Profissionais ---------- */
.grade-profs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--e4); }
@media (max-width: 520px) { .grade-profs { grid-template-columns: 1fr 1fr; gap: var(--e3); } .grade-profs .cartao-prof__foto { aspect-ratio: 1; } }

.perfil-prof__foto { margin: calc(var(--e2) * -1) calc(var(--e5) * -1) var(--e4); aspect-ratio: 4 / 3; overflow: hidden; background: var(--superficie-2); }
.perfil-prof__esp { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acento); }
.perfil-prof__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.perfil-prof__cabeca { display: grid; gap: 4px; }
.perfil-prof__nome { font-family: var(--f-display); font-size: 2.8rem; font-weight: 400; line-height: 0.95; }
.perfil-prof__bio { color: var(--texto-2); }
.lista-servicos { display: grid; }
.lista-servicos li { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; border-bottom: 1px solid var(--linha); }
.lista-servicos__icone { display: none; }
.lista-servicos__nome { display: grid; flex: 1; font-weight: 600; }
.lista-servicos__nome small { font-weight: 500; color: var(--texto-3); }
.galeria-prof { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.galeria-prof__item { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--superficie-2); cursor: zoom-in; }
.galeria-prof__item img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.5s var(--ease); }
.galeria-prof__item:hover img { scale: 1.06; }

/* ---------- Clube ---------- */
.saldo { position: relative; overflow: hidden; padding: var(--e6); border-radius: var(--r-cartao); background: var(--escuro); color: var(--sobre-escuro); }
.saldo__topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); }
.saldo__cliente { color: var(--sobre-escuro-2); font-size: 0.85rem; }
.saldo__pontos { margin: var(--e4) 0 var(--e2); color: var(--sobre-escuro-2); }
.saldo__pontos strong { display: block; font-family: var(--f-display); font-size: clamp(3.4rem, 9vw, 5rem); font-weight: 400; line-height: 0.9; letter-spacing: -0.02em; color: var(--sobre-escuro); }
.saldo__meta { margin-bottom: var(--e2); font-size: 0.9rem; color: var(--sobre-escuro-2); }
.saldo__meta strong { color: var(--sobre-escuro); }
.saldo .progresso { background: rgba(242, 241, 237, 0.16); }
.saldo .progresso__barra { background: var(--menta); }
.saldo__nivel { display: flex; align-items: center; gap: 6px; margin-top: var(--e4); font-size: 0.82rem; color: var(--sobre-escuro-2); }

.abas-internas { display: flex; gap: var(--e5); margin: var(--e6) 0 var(--e4); border-bottom: 1px solid var(--linha); max-width: 100%; overflow-x: auto; }
.aba-interna { min-height: 42px; padding: 0 2px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--texto-2); font-weight: 600; font-size: 0.86rem; white-space: nowrap; transition: color var(--rapido), border-color var(--rapido); }
.aba-interna[aria-selected="true"] { border-bottom-color: var(--texto); color: var(--texto); }

.recompensas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--e3); }
.recompensa { display: grid; gap: var(--e2); padding: var(--e4) 0; border-top: 1px solid var(--texto); }
.recompensa__icone { display: none; }
.recompensa__nome { font-family: var(--f-display); font-size: 1.6rem; font-weight: 400; line-height: 1.05; }
.recompensa__desc { color: var(--texto-2); font-size: 0.85rem; }
.recompensa__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); margin-top: var(--e1); }
.recompensa__custo { font-weight: 600; font-variant-numeric: tabular-nums; }
.recompensa__falta { font-size: 0.8rem; font-weight: 700; color: var(--texto-3); }

.extrato__mes { margin: var(--e4) 0 var(--e2); font-size: 0.8rem; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.05em; }
.extrato__mes:first-child { margin-top: 0; }
.extrato { display: grid; border-top: 1px solid var(--texto); }
.extrato__item { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; border-bottom: 1px solid var(--linha); }
.extrato__item + .extrato__item { border-top: 1px solid var(--linha); }
.extrato__icone { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--linha-forte); border-radius: 50%; color: var(--texto-2); }
.extrato__icone--saida { color: var(--texto-3); }
.extrato__texto { display: grid; flex: 1; min-width: 0; }
.extrato__texto span { color: var(--texto-3); font-size: 0.8rem; }
.extrato__pontos { font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.extrato__pontos--saida { color: var(--texto-2); }

.beneficios { display: grid; gap: var(--e3); }
@media (min-width: 720px) { .beneficios { grid-template-columns: 1fr 1fr; } }
.beneficio { display: flex; gap: var(--e3); padding: var(--e4) 0; border-top: 1px solid var(--linha); }
.beneficio__icone { display: grid; place-items: start; flex: none; width: 28px; color: var(--acento); font-size: 1.2rem; }
.beneficio h2 { font-size: 0.95rem; font-weight: 700; }
.beneficio p { color: var(--texto-2); font-size: 0.86rem; }
.niveis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); margin-top: var(--e4); }
.niveis__item { display: grid; gap: 2px; padding: var(--e3) 0; border-top: 2px solid var(--linha); font-size: 0.82rem; color: var(--texto-2); }
.niveis__item strong { font-family: var(--f-display); font-size: 1.4rem; font-weight: 400; color: var(--texto); }
.niveis__item em { font-style: normal; font-weight: 600; color: var(--acento); }
.niveis__item--atual { border-top-color: var(--acento); }

.planos-chamada { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e6); padding: var(--e4); }
.planos-chamada > span:nth-child(2) { display: grid; flex: 1; }
.planos-chamada > span:nth-child(2) span { color: var(--texto-2); font-size: 0.86rem; }
.planos-chamada__icone { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--linha-forte); border-radius: 50%; color: var(--texto-2); font-size: 1.2rem; }
.planos-chamada:hover { border-color: var(--texto); }

/* ---------- Planos: estilos em publico.css (coluna editorial) ---------- */

/* ---------- Perfil ---------- */
.perfil__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4); padding: var(--e5); }
.perfil__id { display: grid; gap: 2px; flex: 1; min-width: 200px; }
.perfil__nome { font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 400; line-height: 0.95; outline: none; }
.perfil__selos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e2); }
.perfil__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2) var(--e6); }
.perfil__coluna { display: grid; gap: var(--e2); align-content: start; }
@media (min-width: 960px) { .perfil__grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.perfil__coluna > .secao:first-child { margin-top: var(--e6); }
.secao-cartao { margin-top: var(--e4); padding: var(--e5); }
.secao-cartao .secao__titulo { margin-bottom: var(--e3); }
.perfil .proximo { margin-top: var(--e3); }

.historico { display: grid; border-top: 1px solid var(--texto); margin-top: var(--e3); }
.historico__item { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; border-bottom: 1px solid var(--linha); }
.historico__item + .historico__item { border-top: 1px solid var(--linha); }
.historico__data { display: grid; justify-items: center; flex: none; width: 48px; padding: 2px 0; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; color: var(--texto-2); text-transform: uppercase; }
.historico__data strong { font-family: var(--f-display); font-size: 1.8rem; font-weight: 400; line-height: 1; color: var(--texto); }
.historico__texto { display: grid; flex: 1; min-width: 0; }
.historico__texto span { color: var(--texto-2); font-size: 0.82rem; }
.perfil .botao--texto { margin-top: var(--e2); }

.plano-atual { display: flex; align-items: center; gap: var(--e3); }
.plano-atual > div { display: grid; }
.plano-atual span { color: var(--texto-2); font-size: 0.86rem; }
.plano-atual__icone { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--linha-forte); border-radius: 50%; color: var(--texto-2); font-size: 1.2rem; }
.linha-botoes { display: flex; gap: var(--e2); margin-top: var(--e4); }

.dados { display: grid; }
.dados > div { display: grid; grid-template-columns: 110px 1fr; gap: var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--linha); font-size: 0.9rem; }
.dados dt { color: var(--texto-2); }
.dados dd { font-weight: 600; overflow-wrap: anywhere; }
.secao-cartao .campo { margin-top: var(--e4); }

.linha-link { display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 48px; padding: 0 var(--e1); border-bottom: 1px solid var(--linha); font-weight: 600; text-align: left; }
.linha-link span { flex: 1; }
.linha-link i:first-child { font-size: 1.25rem; color: var(--texto-2); }
.linha-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.secao-cartao .rodape-demo { margin-top: var(--e4); }