/* Escrito à mão, sem framework: são poucas páginas e um formulário, e
   Bootstrap ou Tailwind trariam dezenas de KB para resolver um <input>.

   A identidade vem do app — as cores de extrip_app/lib/theme.dart (claro e
   escuro), AppSpacing, AppRadius, a Inter, a borda fina sem sombra e as
   etiquetas em HSL. A ESTRUTURA não: isto é um site, aberto tanto no celular
   quanto no computador. Por isso topo e rodapé de largura total, contêiner
   largo, duas colunas a partir de 960px e seções separadas por divisória em
   vez de uma pilha de cartões. */

/* Inter servida daqui (wwwroot/fonts, licença OFL), não do Google Fonts: sem
   DNS e TLS extras antes do primeiro texto. ~24 KB por peso, o navegador só
   baixa os que usa, e com swap o texto aparece já na fonte do sistema. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2");
}

:root {
  --primaria: #4a0e52;
  --sobre-primaria: #ffffff;
  --fundo: #fafafa;
  --superficie: #ffffff;
  --texto: #1a1a1a;
  --texto-secundario: #6b6b6b;
  --dica: #a0a0a0;
  --borda: #e0e0e0;
  --erro: #c62828;

  /* AppSpacing */
  --xs: 4px;
  --sm: 8px;
  --md: 16px;
  --lg: 24px;
  --xl: 32px;
  --xxl: 48px;

  /* AppRadius */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-full: 9999px;

  --largura: 1120px;
  --altura-topo: 64px;

  /* Etiquetas: matiz e saturação da cor do status (ExcursaoStatusColors)
     em duas luminosidades, como tonsDeEtiqueta no app. */
  --l-fundo-etiqueta: 93%;
  --l-texto-etiqueta: 28%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primaria: #bb86fc;
    --sobre-primaria: #241033;
    --fundo: #121212;
    --superficie: #1e1e1e;
    --texto: #f5f5f5;
    --texto-secundario: #b3b3b3;
    --dica: #7a7a7a;
    --borda: #2f2f2f;
    --erro: #e57373;

    --l-fundo-etiqueta: 20%;
    --l-texto-etiqueta: 78%;
  }
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fundo);
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

a {
  color: var(--primaria);
}

/* ---------- Estrutura do site ---------- */

.conteiner {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--md);
}

@media (min-width: 768px) {
  .conteiner {
    padding: 0 var(--xl);
  }
}

/* Âncoras (#cancelamento) param abaixo do cabeçalho fixo, não atrás dele. */
html {
  scroll-padding-top: calc(var(--altura-topo) + var(--md));
}

/* Fixo e translúcido: o conteúdo passa por baixo, desfocado. Sem suporte a
   backdrop-filter, o fundo quase opaco segura a leitura do mesmo jeito. */
.site-topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--superficie) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--borda) 70%, transparent);
}

.site-topo .conteiner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  min-height: var(--altura-topo);
}

/* A marca: o símbolo (o mesmo "Ex" do convite do app) e o nome. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-simbolo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sobre-primaria);
  background: linear-gradient(135deg, var(--primaria), color-mix(in srgb, var(--primaria) 70%, #c026d3));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primaria) 30%, transparent);
}

.logo-nome {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--texto);
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: var(--xs);
}

.topo-link {
  padding: 8px 12px;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-secundario);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.topo-link:hover {
  color: var(--texto);
  background: color-mix(in srgb, var(--texto) 6%, transparent);
}

/* Com contorno, não preenchido: o botão cheio da página é o da compra, e dois
   iguais na primeira tela do celular disputariam o mesmo toque. */
.topo-botao {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--md);
  border: 1px solid color-mix(in srgb, var(--primaria) 45%, var(--borda));
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 600;
  color: var(--primaria);
  background: transparent;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.topo-botao:hover {
  border-color: var(--primaria);
  background: color-mix(in srgb, var(--primaria) 6%, transparent);
}

main.conteiner {
  flex: 1;
  padding-top: var(--lg);
  padding-bottom: var(--xxl);
}

@media (min-width: 768px) {
  main.conteiner {
    padding-top: var(--xl);
  }
}

/* Rodapé em colunas no computador (marca, atendimento, app) e a faixa legal
   embaixo; empilhado no celular. Fundo com um toque da marca, para fechar a
   página sem parecer outro cartão. */
.site-rodape {
  border-top: 1px solid var(--borda);
  background: color-mix(in srgb, var(--primaria) 4%, var(--superficie));
  color: var(--texto-secundario);
  font-size: 14px;
}

.site-rodape .conteiner {
  padding-top: var(--xl);
  padding-bottom: var(--lg);
}

.rodape-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lg);
}

@media (min-width: 768px) {
  .rodape-colunas {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--xl);
  }
}

.rodape-colunas ul {
  display: grid;
  gap: var(--sm);
  padding: 0;
  list-style: none;
}

.rodape-colunas a {
  font-weight: 500;
  text-decoration: none;
}

.rodape-colunas a:hover {
  text-decoration: underline;
}

.rodape-marca p {
  max-width: 340px;
  margin-top: var(--md);
}

.rodape-titulo {
  margin-bottom: var(--sm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto);
}

.rodape-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xs) var(--lg);
  margin-top: var(--xl);
  padding-top: var(--md);
  border-top: 1px solid var(--borda);
  font-size: 12px;
  /* O secundário, não o --dica: cinza-claro no fundo do rodapé dava ~2,4:1,
     abaixo dos 4,5:1 de texto pequeno (WCAG AA). */
  color: var(--texto-secundario);
}

/* Páginas de uma coluna só (escolha, status): estreitas mesmo no computador,
   porque linha de texto longa demais cansa. */
.estreita {
  max-width: 720px;
  margin: 0 auto;
}

/* ---------- Grades de duas colunas ---------- */

/* No celular: destaque, compra, detalhes. No computador: destaque e
   detalhes à esquerda, a compra fixa à direita acompanhando a rolagem. */
.layout-venda,
.layout-compra,
.layout-vaga {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lg);
}

.layout-venda {
  grid-template-areas: "destaque" "compra" "detalhes";
}

.layout-venda > .area-destaque { grid-area: destaque; }
.layout-venda > .area-compra { grid-area: compra; }
.layout-venda > .area-detalhes { grid-area: detalhes; }

@media (min-width: 960px) {
  .layout-venda {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto 1fr;
    column-gap: var(--xxl);
    grid-template-areas:
      "destaque compra"
      "detalhes compra";
  }

  .layout-compra,
  .layout-vaga {
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: var(--xxl);
    align-items: start;
  }

  .fixo {
    position: sticky;
    top: calc(var(--altura-topo) + var(--lg));
    align-self: start;
  }
}

/* ---------- Tipografia ---------- */

.titulo-pagina {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--texto);
}

@media (min-width: 768px) {
  .titulo-pagina {
    font-size: 34px;
  }
}

.titulo-secao {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--texto);
}

.titulo-cartao {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--texto);
}

.texto {
  color: var(--texto-secundario);
}

.valor {
  font-weight: 600;
  color: var(--texto);
}

.legenda {
  font-size: 13px;
  line-height: 1.45;
  color: var(--texto-secundario);
}

.preco {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--texto);
}

/* ---------- Destaque da excursão ---------- */

/* Um painel com o tom da marca, não um cartão branco: é a capa da página. */
.destaque {
  padding: var(--lg);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--primaria) 7%, var(--superficie));
}

@media (min-width: 768px) {
  .destaque {
    padding: var(--xl) var(--xl) var(--lg);
  }
}

.destaque .titulo-pagina {
  margin-top: var(--sm);
}

.destaque .subtitulo {
  margin-top: var(--xs);
  font-size: 16px;
  color: var(--texto-secundario);
}

/* Fatos rápidos: o que se pergunta antes de ler o resto. */
.fatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm) var(--lg);
  margin-top: var(--md);
  padding: 0;
  list-style: none;
}

.fatos li {
  display: inline-flex;
  align-items: center;
  gap: var(--sm);
  color: var(--texto);
  font-size: 14px;
  font-weight: 500;
}

.fatos .icone {
  color: var(--primaria);
  width: 18px;
  height: 18px;
}

/* ---------- Seções de detalhe (divisória, não cartão) ---------- */

.secao {
  padding: var(--lg) 0;
  border-top: 1px solid var(--borda);
}

.secao:first-child {
  border-top: 0;
  padding-top: 0;
}

.secao > .titulo-secao + * {
  margin-top: var(--md);
}

/* Saída, evento e retorno: em linha no computador, empilhados no celular. */
.roteiro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--md);
}

@media (min-width: 640px) {
  .roteiro {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.roteiro > div {
  padding: var(--md);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--superficie);
}

.roteiro .icone {
  color: var(--primaria);
  margin-bottom: var(--sm);
}

/* ---------- Cartão ---------- */

/* Superfície + borda de 1px + raio lg, sem sombra: a mesma unidade do app,
   usada aqui só onde agrupar ajuda — o painel de compra e o formulário. */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  padding: var(--lg);
}

.cartao + .cartao {
  margin-top: var(--md);
}

.cartao > .legenda:first-of-type {
  margin-top: 2px;
}

.corpo {
  margin-top: var(--md);
}

.pilha > * + * {
  margin-top: var(--md);
}

.pilha-curta > * + * {
  margin-top: var(--xs);
}

/* ---------- Etiqueta ---------- */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  --h: 0;
  --s: 0%;
  background: hsl(var(--h) var(--s) var(--l-fundo-etiqueta));
  color: hsl(var(--h) var(--s) var(--l-texto-etiqueta));
}

.etiqueta.aberta { --h: 221; --s: 83.2%; }
.etiqueta.lotada { --h: 262; --s: 83.3%; }
.etiqueta.finalizada { --h: 142; --s: 76.2%; }
.etiqueta.cancelada { --h: 0; --s: 72.2%; }
.etiqueta.espera { --h: 32; --s: 94.6%; }
.etiqueta.neutra { --h: 0; --s: 0%; }

/* ---------- Linha de dado ---------- */

.linha {
  display: flex;
  align-items: flex-start;
  gap: var(--md);
}

.linha + .linha {
  margin-top: var(--md);
}

.icone {
  flex: none;
  width: 20px;
  height: 20px;
  fill: currentColor;
  color: var(--texto-secundario);
}

/* ---------- Quadro de valores ---------- */

.quadro {
  margin-top: var(--md);
}

.quadro .item {
  display: flex;
  justify-content: space-between;
  gap: var(--md);
  padding: var(--xs) 0;
}

.quadro .total {
  margin-top: var(--sm);
  padding-top: var(--sm);
  border-top: 1px solid var(--borda);
}

.quadro .total span {
  font-size: 16px;
  font-weight: 600;
  color: var(--texto);
}

/* ---------- Ocupação ---------- */

.barra {
  height: 6px;
  margin-top: var(--sm);
  border-radius: var(--r-full);
  background: var(--borda);
  overflow: hidden;
}

.barra > span {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--primaria);
}

/* ---------- Aviso ---------- */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--md);
  padding: var(--md);
  border-radius: var(--r-lg);
  border: 1px solid var(--borda);
  background: var(--superficie);
}

.aviso + * {
  margin-top: var(--md);
}

.aviso .icone {
  color: var(--primaria);
}

.aviso .titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
}

.aviso.informativo {
  border-color: transparent;
  background: color-mix(in srgb, var(--primaria) 6%, transparent);
}

.aviso.erro {
  border-color: color-mix(in srgb, var(--erro) 40%, transparent);
  background: color-mix(in srgb, var(--erro) 6%, transparent);
  margin-bottom: var(--lg);
}

.aviso.erro .icone,
.aviso.erro .titulo {
  color: var(--erro);
}

.aviso ul {
  margin: var(--xs) 0 0;
  padding-left: var(--md);
}

/* ---------- Etapas ---------- */

/* Numeradas e ligadas por uma linha, como um checkout de site — não as
   pílulas de largura total do app. */
.etapas {
  display: flex;
  align-items: center;
  gap: var(--sm);
  margin: 0 0 var(--lg);
  padding: 0;
  list-style: none;
}

.etapas li {
  display: flex;
  align-items: center;
  gap: var(--sm);
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
  white-space: nowrap;
}

.etapas li::after {
  content: "";
  flex: 1;
  min-width: var(--sm);
  height: 1px;
  background: var(--borda);
}

.etapas li:last-child {
  flex: 0 0 auto;
}

.etapas li:last-child::after {
  display: none;
}

.etapas .numero {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  border: 1px solid var(--borda);
  background: var(--superficie);
  font-size: 13px;
}

.etapas li.feita .numero,
.etapas li.atual .numero {
  border-color: var(--primaria);
  background: var(--primaria);
  color: var(--sobre-primaria);
}

.etapas li.feita::after {
  background: var(--primaria);
}

.etapas li.atual {
  color: var(--texto);
}

/* Celular estreito: só o rótulo da etapa atual, os outros viram número. */
@media (max-width: 420px) {
  .etapas li:not(.atual) .rotulo {
    display: none;
  }
}

/* ---------- Botões ---------- */

/* Antes do login o app usa o botão preenchido na cor primária: é o caso de
   todo o site público. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sm);
  width: 100%;
  min-height: 52px;
  padding: 0 var(--lg);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--sobre-primaria);
  background: var(--primaria);
  border: 1px solid var(--primaria);
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.botao:hover {
  background: color-mix(in srgb, var(--primaria) 88%, var(--texto));
}

.botao.secundario {
  color: var(--primaria);
  background: transparent;
  border-color: var(--borda);
}

.botao.secundario:hover {
  background: color-mix(in srgb, var(--primaria) 6%, transparent);
}

.botao[disabled],
.botao[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.botao + .botao {
  margin-top: var(--sm);
}

/* ---------- Escolha do caminho ---------- */

.opcoes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--md);
}

@media (min-width: 640px) {
  .opcoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Na grade, lado a lado: o espaçamento de cartões empilhados não se aplica. */
.opcoes > .cartao + .cartao {
  margin-top: 0;
}

.opcao {
  display: flex;
  flex-direction: column;
  gap: var(--sm);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s;
}

/* "Já tenho conta": primeiro e na largura toda, acima das outras duas. */
.opcoes > .opcao.inteira {
  grid-column: 1 / -1;
}

.opcao:hover,
.opcao:focus-visible {
  border-color: var(--primaria);
}

.opcao .icone-grande {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--xs);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--primaria) 8%, transparent);
}

.opcao .icone-grande .icone {
  color: var(--primaria);
  width: 22px;
  height: 22px;
}

.opcao .acao {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  margin-top: auto;
  padding-top: var(--sm);
  font-weight: 600;
  color: var(--primaria);
}

.opcao .acao .icone {
  color: var(--primaria);
}

/* ---------- Formulário ---------- */

/* Campos lado a lado a partir de 640px: no computador, uma coluna só de
   campos curtos (CPF, telefone) desperdiça a tela e alonga o formulário. */
.campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--md);
}

@media (min-width: 640px) {
  .campos.duas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campos.duas > .inteiro {
    grid-column: 1 / -1;
  }
}

label {
  display: block;
  margin-bottom: var(--xs);
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
}

label .opcional {
  font-weight: 400;
  color: var(--texto-secundario);
}

input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--md);
  /* 16px exatos: abaixo disso o iOS dá zoom sozinho ao focar um input. */
  font-size: 16px;
  font-family: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
}

/* O aceite dos termos: caixa à esquerda, texto que quebra ao lado. */
.aceite {
  display: flex;
  align-items: flex-start;
  gap: var(--sm);
  margin-bottom: var(--md);
  font-weight: 400;
  line-height: 1.45;
  color: var(--texto-secundario);
  cursor: pointer;
}

.aceite input {
  flex: none;
  width: 18px;
  min-height: 0;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--primaria);
  cursor: pointer;
}

input::placeholder {
  color: var(--dica);
}

input:focus {
  outline: none;
  border-color: var(--primaria);
  box-shadow: 0 0 0 1px var(--primaria);
}

.campo .legenda {
  display: block;
  margin-top: var(--xs);
}

/* ---------- Link da vaga ---------- */

.link-vaga {
  display: flex;
  gap: var(--sm);
  margin-top: var(--md);
}

.link-vaga input {
  min-height: 44px;
  font-size: 13px;
  color: var(--texto-secundario);
}

.link-vaga .botao {
  width: auto;
  min-height: 44px;
  padding: 0 var(--md);
}

/* ---------- Navegação ---------- */

.voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  margin-bottom: var(--lg);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.voltar .icone {
  width: 18px;
  height: 18px;
  color: var(--primaria);
}

/* ---------- Utilitários ---------- */

.entre {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--md);
}

.com-icone {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
}

.com-icone .icone {
  width: 16px;
  height: 16px;
}

.lista {
  padding-left: 18px;
}

.lista li + li {
  margin-top: var(--xs);
}

.pre-linha {
  white-space: pre-line;
}

.cabecalho-pagina {
  margin-bottom: var(--lg);
}

.cabecalho-pagina .titulo-pagina + * {
  margin-top: var(--xs);
}

/* ---------- Barra de compra (só celular) ---------- */

/* No celular o painel de compra fica lá em cima, logo depois do destaque:
   quem rola lendo a viagem perderia o botão de vista. Esta barra o traz de
   volta, sempre ao alcance do polegar. No computador o painel já acompanha a
   rolagem, então ela some. */
.barra-compra[hidden] {
  display: none;
}

.barra-compra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--md);
  padding: var(--sm) var(--md);
  padding-bottom: calc(var(--sm) + env(safe-area-inset-bottom));
  background: var(--superficie);
  border-top: 1px solid var(--borda);
}

.barra-compra .resumo {
  flex: 1;
  min-width: 0;
}

.barra-compra .resumo strong {
  display: block;
  font-size: 17px;
  color: var(--texto);
}

.barra-compra .botao {
  width: auto;
  min-height: 46px;
}

/* Espaço para a barra não cobrir o fim da página. */
body.com-barra-compra {
  padding-bottom: 76px;
}

@media (min-width: 960px) {
  .barra-compra {
    display: none;
  }

  body.com-barra-compra {
    padding-bottom: 0;
  }
}

/* ---------- Avaliações ---------- */

.avaliacoes {
  padding: 0;
  list-style: none;
}

.avaliacoes li {
  padding: var(--md) 0;
  border-bottom: 1px solid var(--borda);
}

.avaliacoes li:first-child {
  padding-top: 0;
}

.avaliacoes li:last-child {
  border-bottom: 0;
}

.avaliacoes li > * + * {
  margin-top: var(--xs);
}

.estrelas {
  display: inline-flex;
  gap: 2px;
}

.estrelas .icone {
  width: 16px;
  height: 16px;
}

/* Âmbar para a estrela cheia: amarelo puro some no fundo claro. */
.icone.cheia {
  color: hsl(38 92% 50%);
}

.icone.vazia {
  color: var(--borda);
}

.distribuicao {
  padding: 0;
  list-style: none;
}

.distribuicao li {
  display: grid;
  grid-template-columns: 36px 1fr 28px;
  align-items: center;
  gap: var(--sm);
}

.distribuicao li + li {
  margin-top: var(--sm);
}

.distribuicao .barra {
  margin-top: 0;
}

.distribuicao .barra > span {
  background: hsl(38 92% 50%);
}

.distribuicao .legenda {
  text-align: right;
}

.destaque .etiqueta .icone {
  width: 14px;
  height: 14px;
  color: inherit;
}

/* Linha própria: colado nas estrelas, parecia parte da nota. */
.link-perfil {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--xs);
  margin-top: var(--sm);
  font-weight: 600;
  text-decoration: none;
}

.link-perfil .icone {
  color: var(--primaria);
  width: 18px;
  height: 18px;
}


/* ---------- QR de embarque ---------- */

/* Fundo branco também no tema escuro: o leitor precisa do contraste. É um
   botão porque tocar amplia, como no app. */
.qr {
  display: block;
  width: 100%;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--md);
  border-radius: var(--r-lg);
  background: #ffffff;
  border: 1px solid var(--borda);
  cursor: zoom-in;
  font: inherit;
}

.qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.qr-dica {
  display: flex;
  justify-content: center;
  margin-top: var(--sm);
}

.qr-ampliado {
  width: min(92vw, 560px);
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}

.qr-ampliado::backdrop {
  background: rgb(0 0 0 / 0.87);
}

.qr-ampliado .qr {
  max-width: none;
  cursor: zoom-out;
}

.icone-grande-solto {
  width: 40px;
  height: 40px;
  margin-bottom: var(--sm);
}

/* ---------- Grupo do WhatsApp ---------- */

.grupo {
  position: relative;
}

.grupo-conteudo {
  flex: 1;
  min-width: 0;
}

/* Bloqueado: esmaecido, sem toques, com o cadeado por cima — o app faz igual. */
.grupo.bloqueado > .linha {
  opacity: 0.45;
  pointer-events: none;
}

.cadeado-sobre {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* O cadeado num círculo da cor do cartão: por cima do texto esmaecido, sem
   parecer um ícone perdido no meio da frase. */
.cadeado-sobre .icone {
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-secundario);
}

.erro-texto {
  margin-top: var(--xs);
  color: var(--erro);
}

.botao .icone {
  color: inherit;
}

/* ---------- Selos de confiança ---------- */

/* Sem cartão: uma lista leve logo abaixo do preço, para não competir com ele. */
.selos {
  display: grid;
  gap: var(--md);
  margin: var(--md) 0 0;
  padding: var(--md) var(--xs) 0;
  list-style: none;
}

.selos li {
  display: flex;
  align-items: flex-start;
  gap: var(--md);
}

.selos .icone {
  color: var(--primaria);
}

.selos .valor {
  font-size: 14px;
}

.selos + .cartao {
  margin-top: var(--md);
}

/* ---------- Capa: etiquetas e compartilhar ---------- */

.topo-destaque {
  align-items: center;
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm);
}

.etiqueta .icone {
  width: 14px;
  height: 14px;
  color: inherit;
}

/* Botão leve, sem moldura de botão principal: compartilhar é secundário. */
.botao-icone {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  min-height: 36px;
  padding: 0 var(--md);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--primaria);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-full);
  cursor: pointer;
  white-space: nowrap;
}

.botao-icone[hidden] {
  display: none;
}

.botao-icone .icone {
  width: 18px;
  height: 18px;
  color: inherit;
}

/* No celular estreito, só o ícone: o texto empurraria as etiquetas. */
@media (max-width: 420px) {
  .botao-icone span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .botao-icone {
    padding: 0 10px;
  }
}

/* ---------- Resumo da viagem ---------- */

.informacoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sm);
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .informacoes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--md);
  }
}

.informacoes li {
  padding: var(--md);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--superficie);
}

.informacoes .icone {
  color: var(--primaria);
  margin-bottom: var(--sm);
}

.informacoes .valor {
  font-size: 14px;
}

.informacoes .valor::first-letter {
  text-transform: uppercase;
}

.link-mapa {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  margin-top: var(--sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--primaria);
  text-decoration: none;
}

.link-mapa .icone {
  width: 15px;
  height: 15px;
  margin: 0;
  color: inherit;
}

/* ---------- Como funciona ---------- */

/* Quatro passos em linha no computador, dois a dois no celular. */
.passos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lg) var(--md);
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .passos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.passos .numero {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--sm);
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 700;
  color: var(--primaria);
  background: color-mix(in srgb, var(--primaria) 10%, transparent);
}

.passos .valor {
  font-size: 15px;
}

.passos .legenda {
  margin-top: 2px;
}

/* ---------- Organizador ---------- */

.organizador {
  display: flex;
  align-items: center;
  gap: var(--md);
}

/* A inicial num círculo da cor da marca, enquanto o perfil não tem foto. */
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  font-size: 22px;
  font-weight: 700;
  color: var(--primaria);
  background: color-mix(in srgb, var(--primaria) 12%, var(--superficie));
}

.avatar.pequeno {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.avatar.grande {
  width: 72px;
  height: 72px;
  font-size: 30px;
}

.organizador .titulo-cartao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sm);
}

/* Os números do organizador numa linha só. */
.numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xs) var(--md);
  margin-top: var(--xs);
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--texto-secundario);
}

.numeros li {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
}

.numeros strong {
  color: var(--texto);
  font-weight: 600;
}

.numeros .icone {
  width: 16px;
  height: 16px;
}

/* ---------- Avaliações em grade ---------- */

/* Cartões lado a lado no computador: em lista, vinte avaliações viravam um
   corredor. */
.grade-avaliacoes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--md);
}

@media (min-width: 768px) {
  .grade-avaliacoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.grade-avaliacoes li,
.grade-avaliacoes li:first-child,
.grade-avaliacoes li:last-child {
  display: flex;
  flex-direction: column;
  gap: var(--sm);
  padding: var(--md) var(--lg);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--superficie);
}

.grade-avaliacoes li > * + * {
  margin-top: 0;
}

.avaliacao .autor {
  display: flex;
  align-items: center;
  gap: var(--sm);
  margin-top: auto;
  padding-top: var(--xs);
}

.avaliacao .autor .valor {
  font-size: 14px;
}

/* ---------- Dúvidas frequentes ---------- */

.duvidas {
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--superficie);
}

.duvidas details + details {
  border-top: 1px solid var(--borda);
}

.duvidas summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  padding: var(--md) var(--lg);
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
  list-style: none;
}

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

.duvidas summary .icone {
  transition: transform 0.15s;
}

.duvidas details[open] summary .icone {
  transform: rotate(180deg);
}

.duvidas details > p {
  padding: 0 var(--lg) var(--md);
}

/* Cartão que abre e fecha (a regra de cancelamento): o título e o resumo
   ficam sempre à vista; a seta gira como nas dúvidas. */
.recolhivel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  cursor: pointer;
  list-style: none;
}

.recolhivel > summary::-webkit-details-marker {
  display: none;
}

.recolhivel > summary > span {
  display: grid;
  gap: 2px;
}

.recolhivel > summary .icone {
  transition: transform 0.15s;
}

.recolhivel[open] > summary .icone {
  transform: rotate(180deg);
}

/* ---------- Seção de largura inteira, fora da grade ---------- */

.secao-larga {
  margin-top: var(--xl);
}

.grade-excursoes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--md);
}

@media (min-width: 640px) {
  .grade-excursoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .grade-excursoes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.grade-excursoes > .cartao + .cartao {
  margin-top: 0;
}

.cartao-excursao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--xs);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s;
}

.cartao-excursao:hover,
.cartao-excursao:focus-visible {
  border-color: var(--primaria);
}

.cartao-excursao .titulo-cartao {
  margin-top: var(--xs);
}

.cartao-excursao .com-icone {
  margin-top: var(--xs);
  font-size: 14px;
}

.cartao-excursao .rodape-cartao {
  align-self: stretch;
  align-items: center;
  margin-top: auto;
  padding-top: var(--md);
}

.cartao-excursao .valor {
  font-size: 18px;
}

.cartao-excursao .acao {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--primaria);
}

.cartao-excursao .acao .icone {
  color: inherit;
}

/* ---------- Minha vaga em grade ---------- */

/* Uma coluna, na ordem do app: situação, check-in, código, grupo. O que encurta
   a página no computador é o QR deitado (código ao lado do texto) e o grupo
   com link e botão numa linha só. */
.grade-vaga {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--md);
  align-items: start;
}

.grade-vaga > .cartao + .cartao,
.grade-vaga > .aviso + * {
  margin-top: 0;
}

.centro {
  text-align: center;
}

.cartao-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md);
  text-align: center;
}

.cartao-qr .qr {
  max-width: 260px;
  margin: 0;
}

.cartao-qr .qr-dica {
  margin-top: var(--sm);
}

@media (min-width: 640px) {
  .cartao-qr {
    flex-direction: row;
    align-items: center;
    gap: var(--xl);
    text-align: left;
  }

  .cartao-qr .qr {
    flex: none;
    width: 220px;
  }

  .cartao-qr .qr-dica {
    justify-content: flex-start;
  }
}

/* Bloqueado (código ou grupo): esmaecido, com o cadeado por cima. */
.cartao.bloqueado {
  position: relative;
}

.cartao.bloqueado > .linha {
  opacity: 0.45;
  pointer-events: none;
}

/* No meio, o cadeado cairia em cima do texto: fica à direita, com o espaço
   dele reservado. */
.cartao.bloqueado > .linha {
  padding-right: 56px;
}

.cartao.bloqueado > .cadeado-sobre {
  place-items: center end;
  padding-right: var(--lg);
}

.grupo-acoes {
  display: grid;
  gap: var(--sm);
  margin-top: var(--md);
}

.grupo-acoes .link-vaga {
  margin-top: 0;
}

@media (min-width: 768px) {
  .grupo-acoes {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .grupo-acoes > .botao {
    width: auto;
    min-height: 44px;
  }
}

.link-vaga input {
  text-overflow: ellipsis;
}

/* ---------- Sugestão do app ---------- */

/* Um cartão com o tom da marca, como a capa: é convite, não aviso. */
.sugestao-app {
  border-color: color-mix(in srgb, var(--primaria) 25%, var(--borda));
  background: color-mix(in srgb, var(--primaria) 5%, var(--superficie));
}

.sugestao-app .cabeca {
  display: flex;
  align-items: center;
  gap: var(--md);
}

.sugestao-app .marca-app {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  font-size: 18px;
  font-weight: 700;
  color: var(--sobre-primaria);
  background: var(--primaria);
}

.vantagens {
  display: grid;
  gap: var(--sm);
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .vantagens {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--md);
  }
}

.vantagens li {
  display: flex;
  align-items: flex-start;
  gap: var(--sm);
  font-size: 14px;
  color: var(--texto);
}

.vantagens .icone {
  width: 18px;
  height: 18px;
  color: var(--primaria);
}

.sugestao-app .acoes-app {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sm) var(--md);
}

@media (min-width: 640px) {
  .sugestao-app .acoes-app > .botao {
    width: auto;
  }
}

/* A excursão em uma faixa, no topo da Minha Vaga do celular. */
.faixa-excursao {
  margin-bottom: var(--lg);
  padding: var(--md) var(--lg);
  border-left: 3px solid var(--primaria);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--primaria) 7%, var(--superficie));
}

.faixa-excursao .com-icone {
  display: flex;
  align-items: flex-start;
  margin-top: 2px;
}

.faixa-excursao .com-icone .icone {
  margin-top: 2px;
}

/* No computador o cartão da excursão já está ao lado. */
@media (min-width: 960px) {
  .so-celular {
    display: none;
  }
}

.pe-botao {
  margin-bottom: var(--md);
}

/* Contagem do prazo para pagar: em destaque, e âmbar nos últimos 5 minutos. */
.contagem {
  display: inline-flex;
  align-items: center;
  gap: var(--sm);
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: 14px;
  color: var(--texto);
  background: color-mix(in srgb, var(--primaria) 8%, var(--superficie));
}

.contagem[hidden] {
  display: none;
}

.contagem .icone {
  width: 18px;
  height: 18px;
  color: var(--primaria);
}

.contagem strong {
  font-variant-numeric: tabular-nums;
}

.contagem.urgente {
  background: hsl(38 92% 50% / 0.16);
}

.contagem.urgente .icone {
  color: hsl(32 94.6% 44%);
}

/* Adicionar à agenda: dois botões lado a lado, no cartão da excursão. */
/* Empilhados no celular; lado a lado só quando cabem sem quebrar o rótulo. */
.agenda-botoes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sm);
  margin-top: var(--sm);
}

@media (min-width: 480px) and (max-width: 959px) {
  .agenda-botoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.agenda-botoes .botao {
  min-height: 44px;
  padding: 0 var(--sm);
  font-size: 14px;
}

.agenda-botoes .botao + .botao {
  margin-top: 0;
}

.agenda-botoes .icone {
  width: 18px;
  height: 18px;
}

.recuperar .aviso {
  margin-bottom: var(--md);
}

.rodape-legal a {
  color: inherit;
  text-decoration: none;
}

.rodape-legal a:hover {
  text-decoration: underline;
}

.divisoria {
  padding-top: var(--md);
  border-top: 1px solid var(--borda);
}

/* ---------- Perfil do organizador ---------- */

.perfil {
  display: grid;
  gap: var(--lg);
}

@media (min-width: 768px) {
  .perfil {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: center;
    gap: var(--xl);
  }
}

.perfil-identidade {
  display: flex;
  align-items: flex-start;
  gap: var(--lg);
}

.perfil-identidade .titulo-pagina {
  margin-top: var(--xs);
}

.perfil .numeros {
  margin-top: var(--md);
}

.perfil-reputacao {
  display: flex;
  align-items: center;
  gap: var(--lg);
  padding: var(--md) var(--lg);
  border-radius: var(--r-lg);
  background: var(--superficie);
  border: 1px solid var(--borda);
}

.nota-grande {
  flex: none;
  text-align: center;
}

.nota-grande .preco {
  font-size: 40px;
}

.perfil-reputacao .distribuicao {
  flex: 1;
}

/* ---------- Fotos ---------- */

/* A foto cobre o círculo; a inicial fica por baixo, para o caso de a imagem
   não carregar. */
.avatar {
  position: relative;
  overflow: hidden;
}

.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galeria-foto {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--primaria) 8%, var(--superficie));
  cursor: zoom-in;
}

.galeria-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s;
}

.galeria-foto:hover img {
  transform: scale(1.03);
}

/* Capa da vitrine — no celular, um carrossel que se arrasta de ponta a ponta
   da tela, com a próxima foto aparecendo na borda para dizer que há mais. */
.galeria.capa {
  display: flex;
  gap: var(--sm);
  margin: 0 calc(var(--md) * -1) var(--md);
  padding: 0 var(--md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.galeria.capa::-webkit-scrollbar {
  display: none;
}

.galeria.capa .galeria-foto {
  flex: 0 0 86%;
  aspect-ratio: 4 / 3;
  scroll-snap-align: center;
}

.galeria.capa.qtd-1 .galeria-foto {
  flex-basis: 100%;
}

.galeria-contador {
  position: absolute;
  right: var(--sm);
  bottom: var(--sm);
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgb(0 0 0 / 0.55);
}

.galeria-contador .icone {
  width: 14px;
  height: 14px;
  color: inherit;
}

/* No computador, um mosaico: a capa grande à esquerda, as outras ao lado. */
@media (min-width: 768px) {
  .galeria.capa {
    display: grid;
    gap: var(--sm);
    height: 380px;
    margin: 0 0 var(--md);
    padding: 0;
    overflow: visible;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .galeria.capa .galeria-foto {
    aspect-ratio: auto;
  }

  .galeria.capa .galeria-foto:first-child {
    grid-row: span 2;
  }

  .galeria.capa.qtd-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .galeria.capa.qtd-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }

  .galeria.capa.qtd-2 .galeria-foto:first-child {
    grid-row: auto;
  }

  .galeria.capa.qtd-3 {
    grid-template-columns: 2fr 1fr;
  }

  .galeria.capa.qtd-4 .galeria-foto:last-child {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  /* No mosaico o contador só atrapalha: as fotos já estão todas à vista. */
  .galeria.capa .galeria-contador {
    display: none;
  }
}

/* Fotos de avaliação: miniaturas quadradas abaixo do comentário. */
.galeria.miniaturas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xs);
}

.galeria.miniaturas .galeria-foto {
  width: 64px;
  height: 64px;
  border-radius: var(--r-sm);
}

@media (min-width: 768px) {
  .galeria.miniaturas .galeria-foto {
    width: 76px;
    height: 76px;
  }
}

/* A capa no cartão de excursão: faixa de foto no topo, colada às bordas. */
.cartao-excursao.com-capa {
  overflow: hidden;
}

.cartao-capa {
  display: block;
  align-self: stretch;
  margin: calc(var(--lg) * -1) calc(var(--lg) * -1) var(--sm);
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--primaria) 8%, var(--superficie));
}

.cartao-capa img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Foto ampliada: tela cheia escura, a foto inteira, setas e fechar. */
.foto-ampliada {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.foto-ampliada::backdrop {
  background: rgb(0 0 0 / 0.9);
}

.foto-ampliada[open] {
  display: grid;
  place-items: center;
}

.foto-ampliada img {
  max-width: 94vw;
  max-height: 84dvh;
  object-fit: contain;
  border-radius: var(--r-sm);
}

.foto-ampliada-contador {
  position: fixed;
  left: 50%;
  bottom: var(--lg);
  transform: translateX(-50%);
  font-size: 14px;
  color: rgb(255 255 255 / 0.85);
}

.foto-ampliada-botao {
  position: fixed;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  color: #fff;
  background: rgb(255 255 255 / 0.14);
  cursor: pointer;
}

.foto-ampliada-botao:hover {
  background: rgb(255 255 255 / 0.24);
}

.foto-ampliada-botao[hidden] {
  display: none;
}

.foto-ampliada-botao svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.foto-ampliada-botao.fechar {
  top: var(--md);
  right: var(--md);
}

.foto-ampliada-botao.anterior,
.foto-ampliada-botao.proxima {
  top: 50%;
  transform: translateY(-50%);
}

.foto-ampliada-botao.anterior {
  left: var(--md);
}

.foto-ampliada-botao.proxima {
  right: var(--md);
}

/* ---------- Pagamento (Minha Vaga) ---------- */

/* Separado do cartão da situação: lá fica o prazo e o valor, aqui a ação. */
.pagamento {
  margin-top: var(--md);
  scroll-margin-top: calc(var(--altura-topo) + var(--md));
}

/* As duas formas de pagar, lado a lado também no celular: a escolha é uma
   só, e as duas cabem. */
.meios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sm);
}

.meio {
  display: flex;
  align-items: center;
  gap: var(--sm);
  min-height: 60px;
  padding: var(--sm) var(--md);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  color: var(--texto);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.meio .icone {
  color: var(--texto-secundario);
}

.meio strong,
.meio small {
  display: block;
  line-height: 1.3;
}

.meio strong {
  font-size: 14px;
  font-weight: 600;
}

.meio small {
  font-size: 12px;
  color: var(--texto-secundario);
}

.meio:hover {
  border-color: color-mix(in srgb, var(--primaria) 40%, var(--borda));
}

.meio[aria-current="page"] {
  border-color: var(--primaria);
  box-shadow: inset 0 0 0 1px var(--primaria);
  background: color-mix(in srgb, var(--primaria) 5%, var(--superficie));
}

.meio[aria-current="page"] .icone {
  color: var(--primaria);
}

.painel-meio {
  margin-top: var(--lg);
}

.vantagens-meio {
  display: grid;
  gap: var(--sm);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.vantagens-meio li {
  display: flex;
  align-items: center;
  gap: var(--sm);
}

.vantagens-meio .icone {
  width: 18px;
  height: 18px;
  color: var(--primaria);
}

/* O Pix gerado: QR à esquerda e os passos ao lado no computador; um sobre
   o outro no celular (o .cartao-qr já faz isso). */
/* O .cartao-qr centraliza o texto no celular; os passos são uma lista, e
   lista centralizada desalinha os números. */
.pix .cartao-qr .pilha {
  align-self: stretch;
  text-align: left;
}

.passos-pix {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
}

.passos-pix li + li {
  margin-top: var(--xs);
}

.aguardando {
  display: flex;
  align-items: center;
  gap: var(--sm);
}

/* A bolinha que pulsa: há algo acontecendo, a página está esperando. */
.pulso {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  background: hsl(32 94.6% 50%);
  animation: pulsar 1.6s ease-in-out infinite;
}

@keyframes pulsar {
  0%, 100% { box-shadow: 0 0 0 0 hsl(32 94.6% 50% / 0.5); }
  50% { box-shadow: 0 0 0 6px hsl(32 94.6% 50% / 0); }
}

@media (prefers-reduced-motion: reduce) {
  .pulso {
    animation: none;
  }
}

.copia-e-cola {
  margin-top: var(--lg);
}

.copia-e-cola .link-vaga {
  margin-top: var(--xs);
}

.copia-e-cola input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
}

.validade-pix {
  margin-top: var(--md);
}

.campo-select {
  width: 100%;
  min-height: 48px;
  margin-top: var(--xs);
  padding: 0 var(--md);
  font: inherit;
  font-size: 16px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
}

/* Enquanto o SDK do Mercado Pago carrega, um espaço reservado da altura do
   formulário: a página não pula quando ele aparece. */
.cartao-brick {
  min-height: 420px;
}

.cartao-brick.pronto {
  min-height: 0;
}

.carregando-brick {
  padding: var(--xl) 0;
  text-align: center;
}

.seguranca {
  margin-top: var(--lg);
  padding-top: var(--md);
  border-top: 1px solid var(--borda);
  font-size: 13px;
}

.seguranca .icone {
  width: 16px;
  height: 16px;
}

/* Aprovado ou em análise: o ícone grande e a mensagem, no lugar das abas. */
.resultado-pagamento {
  display: flex;
  align-items: flex-start;
  gap: var(--md);
}

.icone-resultado {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
}

.icone-resultado .icone {
  width: 26px;
  height: 26px;
}

.icone-resultado.sucesso {
  color: hsl(142 76.2% 30%);
  background: hsl(142 76.2% 93%);
}

.icone-resultado.espera {
  color: hsl(32 94.6% 36%);
  background: hsl(32 94.6% 93%);
}

@media (prefers-color-scheme: dark) {
  .icone-resultado.sucesso {
    color: hsl(142 70% 70%);
    background: hsl(142 76.2% 70% / 0.14);
  }

  .icone-resultado.espera {
    color: hsl(32 94.6% 70%);
    background: hsl(32 94.6% 70% / 0.14);
  }
}

/* O painel da simulação: tracejado, para nunca parecer parte do produto. */
.simulacao {
  margin-top: var(--md);
  padding: var(--md);
  border: 1px dashed color-mix(in srgb, var(--texto) 30%, transparent);
  border-radius: var(--r-lg);
}

.simulacao-titulo {
  margin: 0 0 var(--sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.simulacao-acoes {
  display: grid;
  gap: var(--sm);
}

.simulacao-acoes .botao {
  min-height: 44px;
}

.simulacao-campo {
  display: block;
}

@media (min-width: 640px) {
  .simulacao-acoes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }
}

/* ---------- Minhas vagas (com conta) ---------- */

.conta-atalho {
  margin-top: var(--lg);
}

.secao-vagas + .secao-vagas {
  margin-top: var(--xl);
}

.lista-vagas {
  display: grid;
  gap: var(--sm);
  margin-top: var(--md);
}

.lista-vagas > .cartao + .cartao {
  margin-top: 0;
}

.vaga-item {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s;
}

.vaga-item:hover,
.vaga-item:focus-visible {
  border-color: var(--primaria);
}

.vaga-item[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.6;
}

.vaga-item-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm);
}

.vaga-item .acao {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  margin-top: var(--xs);
  font-weight: 600;
  color: var(--primaria);
}

.vaga-item .acao .icone {
  color: var(--primaria);
}