/* O visual do formulário. Os mesmos tokens e botões da apresentação
   (suacestaonline.pages.dev), com as regras do pacote do revisor-design:
   lista de partes do GOV.UK, uma pergunta por bloco, erro no padrão GOV.UK,
   fotos no jeito do Airbnb. A CSP não deixa atributo style no HTML: tudo
   o que é visual mora aqui. */

/* ------------------------------ fontes (no próprio site) ------------------------------ */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fontes/hanken-grotesk-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fontes/bricolage-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* as 3 letras dos títulos da loja, só para as amostras */
@font-face {
  font-family: "Fraunces";
  src: url("../fontes/fraunces-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fontes/cormorant-garamond-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fontes/quicksand-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ------------------------------ tokens ------------------------------ */

:root {
  --tinta: #15171A;
  --suave: #4A4F57;
  --papel: #FFFFFF;
  --papel-2: #F3F4F1;
  --acao: #0E7A52;
  --acao-fundo: #0A5A3C;
  --acao-claro: #EAF5EF;   /* fundo do que está escolhido */
  --fio: #DDDFDA;
  --borda: #6B7079;        /* borda das caixas de texto: 4,9:1 no branco */
  --tracejado: #8E938C;
  --erro: #B3261E;         /* só para erro: 6,5:1 no branco */
  --sombra-papel: 0 0 0 1px rgba(21, 23, 26, .06), 0 2px 3px rgba(21, 23, 26, .06), 0 24px 34px -24px rgba(21, 23, 26, .5);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --largura: 560px;
  --lado: clamp(16px, 5vw, 24px);
  --letra: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  color-scheme: light;
}

/* ------------------------------ base ------------------------------ */

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* o topo fixo não cobre o que o foco ou o link de erro levam para o alto */
  scroll-padding-top: calc(96px + env(safe-area-inset-top, 0px));
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; }

h1, h2 {
  font-family: var(--titulo);
  font-weight: 700;
  color: var(--tinta);
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.9rem, 7vw, 2.4rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0 0 20px;
}

h2 {
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 28px 0 10px;
}

p { margin: 0 0 14px; }

a {
  color: var(--acao-fundo);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  a:hover { text-decoration-thickness: 2px; }
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 4px;
}

/* o foco que o JavaScript põe no título (tabindex -1) não desenha moldura */
[tabindex="-1"]:focus { outline: none; }

button { font: inherit; color: inherit; }

fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }

.so-leitor {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* isca para robô: fora da tela e fora do teclado */
.isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pular {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 50;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--tinta);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.pular:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* ------------------------------ topo ------------------------------ */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--papel);
  border-bottom: 1px solid var(--fio);
}

/* marca em cima, "Salvo" embaixo, "Salvar e sair" à direita: cabe em 320 px */
.topo__dentro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "marca sair" "salvo sair";
  align-items: center;
  column-gap: 12px;
  max-width: var(--largura);
  min-height: 58px;
  margin: 0 auto;
  padding: 8px var(--lado);
}

.topo__marca {
  grid-area: marca;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topo__salvo {
  grid-area: salvo;
  margin: 0;
  font-size: .84rem;
  line-height: 1.3;
  color: var(--suave);
}
.topo__salvo:empty { display: none; }
.topo__salvo[data-situacao="offline"],
.topo__salvo[data-situacao="erro"] { color: var(--tinta); font-weight: 600; }

.topo__sair {
  grid-area: sair;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--tinta);
  border-radius: 10px;
  background: transparent;
  color: var(--tinta);
  font: 600 .9rem/1 var(--letra);
  cursor: pointer;
  transition: transform .14s ease-out;
}
.topo__sair:active { transform: scale(.96); }

/* ------------------------------ a coluna ------------------------------ */

.tela {
  display: block;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 20px var(--lado) calc(64px + env(safe-area-inset-bottom, 0px));
}
.tela:focus { outline: none; }

.carregando { margin: 40px 0; color: var(--suave); }

.tela--entra { animation: entra .18s ease-out both; }
@keyframes entra { from { opacity: 0; } }

.intro {
  font-size: 1.12rem;
  line-height: 1.45;
  color: var(--suave);
  margin-bottom: 22px;
}

/* O ponto fica preso no fim do nome da parte: se "Página 1 de 4" não couber,
   desce sozinha para a linha de baixo, sem um "·" solto no começo */
.legenda {
  margin: 6px 0 8px;
  font-size: .95rem;
  color: var(--suave);
}
.legenda__texto { font-weight: 600; }
.legenda__texto:has(+ .legenda__pagina)::after { content: "\00a0·"; font-weight: 400; }
.legenda__texto + .legenda__pagina { margin-left: .35em; }
.legenda__pagina { white-space: nowrap; }

/* "Voltar" do GOV.UK: pequeno, no alto, com a seta desenhada */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--tinta);
  font-size: .98rem;
}
.voltar::before {
  content: "";
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.link-sec { margin-top: 26px; }
.nota {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--papel-2);
  color: var(--suave);
  font-size: 1rem;
}

/* ------------------------------ botões ------------------------------ */

.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  width: 100%;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: var(--acao);
  color: #fff;
  font-family: var(--letra);
  font-weight: 700;
  font-size: 1.08rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--acao-fundo), 0 14px 22px -14px rgba(14, 122, 82, .7);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.botao:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--acao-fundo), 0 6px 12px -10px rgba(14, 122, 82, .7);
}
.botao:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 14px; }
.botao[disabled] { opacity: .6; cursor: progress; transform: none; }

.botao--secundario {
  background: var(--papel-2);
  color: var(--tinta);
  box-shadow: 0 3px 0 #C6C9C3;
}
.botao--secundario:active { box-shadow: 0 0 0 #C6C9C3; }

.copiar {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--tinta);
  border-radius: 10px;
  background: transparent;
  color: var(--tinta);
  font: 600 .9rem/1 var(--letra);
  cursor: pointer;
  transition: transform .14s ease-out;
}
.copiar:active { transform: scale(.96); }

/* botão pequeno: sugestões de categoria, "Pôr o nome da cesta" */
.botao-leve {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--fio);
  border-radius: 10px;
  background: var(--papel-2);
  color: var(--tinta);
  font: 600 .95rem/1.2 var(--letra);
  cursor: pointer;
  transition: transform .14s ease-out;
}
.botao-leve:active { transform: scale(.96); }

.botao-leve--mais {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  border: 2px dashed var(--tracejado);
  background: transparent;
  color: var(--acao-fundo);
  font-weight: 700;
}
.botao-leve--mais::before { content: "+"; font-size: 1.4em; line-height: 1; }

.botoes-linha { display: flex; flex-wrap: wrap; gap: 8px; }

.acoes {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

/* fora dos botões, o recado é um parágrafo como os outros (ex.: "Tudo salvo" na tela de salvo) */
.recado { margin: 0 0 14px; color: var(--suave); }
.acoes .recado { margin: 0; }
.recado:empty { display: none; }
/* o botão tem 3 px de "degrau" e a sombra embaixo: o recado precisa de mais folga para não parecer colado */
.acoes .botao + .recado { margin-top: 8px; }
.nota--antes { margin-top: 30px; }
.nota--antes + .acoes { margin-top: 20px; }

/* ------------------------------ erros (GOV.UK) ------------------------------ */

.erros {
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 4px solid var(--erro);
  border-radius: 8px;
}
.erros:focus { outline: 3px solid var(--tinta); outline-offset: 3px; }
.erros__titulo {
  margin: 0 0 8px;
  font-family: var(--letra);
  font-size: 1.15rem;
  letter-spacing: 0;
}
.erros__lista { margin: 0; padding: 0; list-style: none; }
.erros__lista li + li { margin-top: 6px; }
.erros__lista a { color: var(--erro); font-weight: 700; }

.campo--erro {
  padding-left: 14px;
  border-left: 4px solid var(--erro);
}
.campo__erro {
  margin: 0 0 8px;
  color: var(--erro);
  font-weight: 700;
}

/* ------------------------------ campos ------------------------------ */

.campos { display: grid; gap: 30px; }

.campo { min-width: 0; }

.campo__rotulo {
  display: block;
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--tinta);
}
legend.campo__rotulo { margin-bottom: 8px; }

.campo__opcional { margin-left: .3em; font-weight: 400; color: var(--suave); }

.campo__dica {
  margin: 0 0 10px;
  font-size: .98rem;
  color: var(--suave);
}

.campo__conta { margin: 6px 0 0; font-size: .9rem; color: var(--suave); }
.campo__conta--passou { color: var(--erro); font-weight: 700; }

.campo__extras { display: grid; gap: 8px; margin-top: 12px; }
.campo__extras .campo__dica { margin: 4px 0 0; }

/* Só para ler: o que ela já escreveu em outra parte (o que vem dentro da cesta) */
.leitura__titulo { margin: 0 0 6px; color: var(--suave); font-size: 1rem; }
.leitura__lista { margin: 0; padding-left: 1.2em; color: var(--tinta); }
.leitura__lista li + li { margin-top: 4px; }
.leitura__lista li::marker { color: var(--acao); }

.entrada {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 14px;
  border: 2px solid var(--borda);
  border-radius: 10px;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.0625rem/1.35 var(--letra);   /* 17 px: o iPhone não dá zoom */
  -webkit-appearance: none;
  appearance: none;
}
.entrada:focus {
  outline: 3px solid var(--tinta);
  outline-offset: 2px;
  border-color: var(--tinta);
}
.entrada[aria-invalid="true"] { border-color: var(--erro); }
.entrada::placeholder { color: #767B82; }

.entrada--curta { max-width: 11em; }
.entrada--media { max-width: 16em; }

.entrada--area {
  min-height: 112px;
  line-height: 1.45;
  resize: vertical;
}

.entrada--select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2315171A' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* data no iPhone: alinha à esquerda como as outras */
input[type="date"].entrada { text-align: left; }
input[type="date"].entrada::-webkit-date-and-time-value { text-align: left; }

/* "R$" antes, ".pages.dev" e "%" depois */
.entrada-com { display: flex; align-items: stretch; max-width: 100%; }
.entrada-com:has(.entrada--curta) { max-width: 13.5em; }
.entrada-com .entrada { flex: 1; min-width: 0; max-width: none; }
.entrada-com .entrada:focus { z-index: 1; }
.entrada-com__antes,
.entrada-com__depois {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 2px solid var(--borda);
  background: var(--papel-2);
  color: var(--suave);
  font-weight: 600;
  white-space: nowrap;
}
.entrada-com__antes { border-right: 0; border-radius: 10px 0 0 10px; }
.entrada-com__depois { border-left: 0; border-radius: 0 10px 10px 0; }
.entrada-com__antes + .entrada { border-radius: 0 10px 10px 0; }
.entrada-com .entrada:has(+ .entrada-com__depois) { border-radius: 10px 0 0 10px; }

/* o balão de WhatsApp (o mesmo da apresentação) */
.balao {
  display: block;
  margin: 0;
  padding: 14px 16px 12px;
  border-radius: 4px 18px 18px 18px;
  background: var(--papel);
  border: 1px solid var(--fio);
  text-align: left;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--tinta);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 10px 22px -16px rgba(21, 23, 26, .4);
}
.balao--opcao { margin-top: 10px; font-size: .95rem; font-weight: 400; }
.balao--confira { margin-top: 8px; font-size: .95rem; }

/* ------------------------------ escolhas (rádio e caixa) ------------------------------ */

/* O input fica por baixo do desenho, no mesmo lugar: o leitor de tela e o
   teclado usam o de verdade; o toque vale no cartão inteiro (o label). */
.opcoes { display: grid; gap: 10px; }
.opcoes--lado { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.opcoes__ou { margin: 0; padding-left: 16px; color: var(--suave); font-size: .95rem; }

.opcao { position: relative; }

.opcao__marca {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 26px;
  height: 26px;
  margin: 0;
  opacity: 0;
}

.opcao__rotulo {
  position: relative;
  display: block;
  min-height: 54px;
  padding: 14px 16px 14px 54px;
  border: 1.5px solid var(--fio);
  border-radius: 12px;
  background: var(--papel);
  cursor: pointer;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.opcao__rotulo::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 14px;
  width: 26px;
  height: 26px;
  border: 2px solid var(--borda);
  border-radius: 50%;
  background: var(--papel);
}
.opcao--caixa .opcao__rotulo::before { border-radius: 6px; }

.opcao__marca:checked + .opcao__rotulo {
  border-color: var(--acao);
  background: var(--acao-claro);
}
.opcao__marca:checked + .opcao__rotulo::before {
  border-color: var(--acao);
  background: radial-gradient(circle, var(--acao) 0 6px, var(--papel) 6.5px);
}
.opcao--caixa .opcao__marca:checked + .opcao__rotulo::before {
  background: var(--acao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.opcao__marca:focus-visible + .opcao__rotulo { outline: 3px solid var(--tinta); outline-offset: 2px; }
.opcao__marca[aria-invalid="true"] + .opcao__rotulo::before { border-color: var(--erro); }

@media (hover: hover) {
  .opcao__rotulo:hover { border-color: var(--borda); }
}

.opcao__t { display: block; font-weight: 600; line-height: 1.35; }
.opcao__d { display: block; margin-top: 2px; font-size: .95rem; color: var(--suave); }
.opcao__lista {
  margin: 6px 0 0;
  padding-left: 1.1em;
  font-size: .95rem;
  color: var(--suave);
}
.opcao__lista li + li { margin-top: 2px; }

.pergunta { margin-top: 32px; }
.pergunta__titulo {
  font-family: var(--titulo);
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* ------------------------------ cartões (pacote, cores, letra) ------------------------------ */

.cartoes { display: grid; gap: 12px; }
.cartoes--paleta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartoes--paleta .cartao--simples,
.cartoes--paleta .opcoes__ou { grid-column: 1 / -1; }
.cartoes--paleta .opcoes__ou { padding-left: 0; }

.cartao { position: relative; min-width: 0; }

.cartao__marca {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
}

.cartao__corpo {
  display: grid;
  gap: 10px;
  height: 100%;
  padding: 10px 10px 14px;
  border: 2px solid var(--fio);
  border-radius: 14px;
  background: var(--papel);
  cursor: pointer;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.cartao--simples .cartao__corpo { padding: 14px 14px; align-content: center; }

.cartao__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  line-height: 1.25;
}
/* o rádio desenhado, junto do nome */
.cartao__titulo::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--borda);
  border-radius: 50%;
  background: var(--papel);
}
.cartao__marca:checked + .cartao__corpo { border-color: var(--acao); background: var(--acao-claro); }
.cartao__marca:checked + .cartao__corpo .cartao__titulo::before {
  border-color: var(--acao);
  background: radial-gradient(circle, var(--acao) 0 5px, var(--papel) 5.5px);
}
.cartao__marca:focus-visible + .cartao__corpo { outline: 3px solid var(--tinta); outline-offset: 2px; }

@media (hover: hover) {
  .cartao__corpo:hover { border-color: var(--borda); }
}

/* os 2 pacotes, como na apresentação: título grande, sem preço */
.cartao--pacote .cartao__corpo { padding: 18px 18px 20px; gap: 8px; }
.cartao--pacote .cartao__titulo { font-family: var(--titulo); font-size: 1.35rem; letter-spacing: -.01em; }
.cartao__d { color: var(--suave); }
.cartao__lista {
  margin: 4px 0 0;
  padding-left: 1.15em;
  font-size: .98rem;
}
.cartao__lista li + li { margin-top: 4px; }
.cartao__lista li::marker { color: var(--acao); }

/* a amostra: um pedaço da loja com as cores e a letra daquela escolha */
.vitrine {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  min-height: 112px;
  padding: 14px 10px;
  border-radius: 9px;
  background: var(--v-capa, var(--papel-2));
  text-align: center;
}
.vitrine__nome {
  max-width: 100%;
  color: var(--v-escuro, var(--tinta));
  font-size: 1.2rem;
  line-height: 1.05;
  text-wrap: balance;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vitrine__botao {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--v-marca, var(--tinta));
  color: var(--v-claro, #fff);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
}

/* "A cor da minha marca": o 6º ladrilho, vazio e tracejado (ela ainda vai dizer a cor) */
.vitrine--sua { background: var(--papel); border: 2px dashed var(--tracejado); }
.vitrine--sua .vitrine__nome { color: var(--suave); font-size: 1rem; }

/* letra: uma por linha, com a amostra larga */
.cartoes--fonte .vitrine { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; text-align: left; min-height: 84px; padding: 14px 16px; }
.cartoes--fonte .vitrine__nome { font-size: 1.45rem; }

.letra-classica { font-family: "Fraunces", Georgia, serif; font-weight: 700; }
.letra-delicada { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 1.12em; }
.letra-suave { font-family: "Quicksand", system-ui, sans-serif; font-weight: 700; }

/* ------------------------------ fotos (Airbnb) ------------------------------ */

.campo--fotos .campo__dica { margin-bottom: 8px; }

.fotos__contagem { margin: 0 0 8px; font-size: .95rem; color: var(--suave); }
.fotos__contagem:empty { display: none; }

.fotos__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foto {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--papel-2);
}
.foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .2s ease-out;
}

/* a capa ocupa 2 x 2, como no Airbnb */
.foto--capa { grid-column: span 2; grid-row: span 2; }

.foto[data-situacao="esperando"] img,
.foto[data-situacao="enviando"] img { opacity: .55; }

.foto__etiqueta {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--papel);
  color: var(--tinta);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 1px 3px rgba(21, 23, 26, .25);
}
.foto__etiqueta + .foto__etiqueta--aviso { top: 34px; }

/* "Enviando", "Na fila", "Não enviou": escrito numa faixa, sem anel */
.foto__envio {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 6px;
  background: rgba(21, 23, 26, .78);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.foto__envio:empty { display: none; }
.foto[data-situacao="erro"] .foto__envio,
.foto[data-situacao="falta"] .foto__envio { background: var(--erro); }

.foto--preparando {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: preparando 1.4s ease-in-out infinite alternate;
}
.foto--preparando .foto__envio {
  position: static;
  background: none;
  color: var(--suave);
}
@keyframes preparando { to { background: #E4E6E1; } }

/* o "•••": o alvo de toque tem 44 px, o desenho é a plaquinha branca */
.foto__menu {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 44px;
  height: 44px;
  padding: 6px;
  border: 0;
  background: none;
  cursor: pointer;
}
.foto__menu span {
  padding: 2px 6px 4px;
  border-radius: 6px;
  background: var(--papel);
  color: var(--tinta);
  font-size: .72rem;
  letter-spacing: 1px;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(21, 23, 26, .3);
}
.foto__menu:focus-visible { outline: 3px solid var(--tinta); outline-offset: -3px; border-radius: 10px; }

/* "Adicionar mais" no espaço tracejado */
.fotos__mais { position: relative; aspect-ratio: 1; }
.fotos__arquivo {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.fotos__mais label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  padding: 8px;
  border: 2px dashed var(--tracejado);
  border-radius: 10px;
  color: var(--acao-fundo);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease-out;
}
.fotos__mais label:active { background: var(--papel-2); }
.fotos__mais-sinal { font-size: 1.9rem; font-weight: 400; line-height: 1; }
.fotos__arquivo:focus-visible + label { outline: 3px solid var(--tinta); outline-offset: 2px; }

/* sem foto ainda: o espaço tracejado ocupa a largura toda */
.fotos__grade > .fotos__mais:only-child { grid-column: 1 / -1; aspect-ratio: auto; min-height: 132px; }

/* uma foto só (o logo): quadrado médio, sem cortar */
.fotos--uma .fotos__grade { grid-template-columns: minmax(0, 200px); }
.fotos--uma .fotos__grade > .fotos__mais:only-child { grid-column: auto; aspect-ratio: 1; min-height: 0; }
.fotos--uma .foto img { object-fit: contain; padding: 10px; }

.fotos__avisos { display: grid; gap: 8px; margin-top: 10px; }
.fotos__avisos:empty { display: none; }
.fotos__recado {
  margin: 0;
  padding: 10px 12px;
  border-left: 4px solid var(--tinta);
  border-radius: 0 8px 8px 0;
  background: var(--papel-2);
  font-size: .95rem;
}

/* ------------------------------ linhas (itens, versões) ------------------------------ */

.linhas__conta { margin: 0 0 8px; font-size: .95rem; color: var(--suave); }
.linhas__conta:empty { display: none; }

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

.linha__caixa {
  padding: 6px 16px 10px;
  border: 1px solid var(--fio);
  border-radius: 14px;
}
.linha__titulo {
  padding: 0 6px;
  margin-left: -6px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--suave);
}
.linha__caixa .campos { gap: 20px; margin-top: 6px; }

.linha__tirar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--erro);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.campos-lista + .nota,
.linhas + .nota { margin-top: 12px; }

/* ------------------------------ capa ------------------------------ */

.capa h1 { font-size: clamp(2.3rem, 9vw, 2.9rem); margin-top: 12px; }
.capa__tempo {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--papel-2);
}
.capa__titulo { margin-top: 26px; font-size: 1.2rem; }
.capa__lista { margin: 0; padding-left: 1.2em; }
.capa__lista li + li { margin-top: 6px; }
.capa__lista li::marker { color: var(--acao); }
.capa > .botao { margin-top: 30px; }

/* ------------------------------ lista de partes (GOV.UK) ------------------------------ */

.progresso { margin: 4px 0 6px; font-weight: 700; }

.tarefas__grupo { margin-top: 26px; }
.tarefas__titulo { margin: 0 0 6px; font-size: 1.22rem; }

.tarefas {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--fio);
}

.tarefa {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 12px 0;
  border-bottom: 1px solid var(--fio);
}
.tarefa__texto { min-width: 0; }
.tarefa__link { font-weight: 700; }
/* a linha inteira é o alvo de toque */
.tarefa__link::after { content: ""; position: absolute; inset: 0; }
.tarefa__link:focus-visible { outline: none; }
.tarefa__link:focus-visible::after { outline: 3px solid var(--tinta); outline-offset: -1px; border-radius: 6px; }
.tarefa__nome { font-weight: 600; color: var(--suave); }
.tarefa__dica { margin: 2px 0 0; font-size: .92rem; color: var(--suave); }

.tarefa__situacao { flex: none; font-weight: 600; font-size: .95rem; }
.tarefa__situacao--impedida { font-weight: 400; color: var(--suave); }

@media (hover: hover) {
  .tarefa:has(.tarefa__link:hover) .tarefa__link { text-decoration-thickness: 2px; }
}

.etiqueta {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.etiqueta--comecada { background: #DCEFE5; color: var(--acao-fundo); }
.etiqueta--nao { background: #ECEDE9; color: #3B3F45; }

.tarefas__grupo--enviar { margin-top: 34px; }
.tarefas__grupo--enviar .botao { margin-top: 14px; }

/* ------------------------------ faixas de recado ------------------------------ */

.faixa {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-left: 5px solid var(--acao);
  border-radius: 0 12px 12px 0;
  background: var(--acao-claro);
}
.faixa p { margin: 0; }
.faixa--aviso { border-left-color: var(--tinta); background: var(--papel-2); }
.faixa__titulo { margin: 0 0 6px; font-family: var(--letra); font-size: 1.08rem; letter-spacing: 0; }
.faixa__lista { margin: 0; padding-left: 1.2em; }
.faixa__lista li + li { margin-top: 4px; }

/* ------------------------------ confira (GOV.UK "check answers") ------------------------------ */

.confira__grupo + .confira__grupo { margin-top: 8px; }
.confira__titulo { margin: 24px 0 6px; font-size: 1.22rem; }

.confira__linhas {
  margin: 0 0 8px;
  border-top: 1px solid var(--fio);
}

.confira__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "chave mudar" "valor valor";
  column-gap: 16px;
  row-gap: 2px;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--fio);
}
.confira__chave { grid-area: chave; align-self: center; font-weight: 700; }
.confira__valor {
  grid-area: valor;
  margin: 0;
  min-width: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.confira__valor--vazio { color: var(--suave); }
.confira__mudar { grid-area: mudar; margin: 0; align-self: center; }
.confira__mudar a { display: inline-block; padding: 10px 0 10px 12px; margin: -10px 0; }

.confira__lista { margin: 0; padding-left: 1.2em; white-space: normal; }
.confira__lista li + li { margin-top: 2px; }

.confira__fotos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.confira__minis { display: flex; gap: 4px; }
.confira__minis img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--papel-2);
}

/* ------------------------------ cestas (HMRC "adicionar outra") ------------------------------ */

.cestas-lista {
  margin: 20px 0 8px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--fio);
}

.cesta-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0 10px;
  border-bottom: 1px solid var(--fio);
}
.cesta-item__foto {
  width: 76px;
  height: 76px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--papel-2);
}
.cesta-item__foto--vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--tracejado);
  color: var(--suave);
  font-size: .8rem;
  text-align: center;
}
.cesta-item__nome {
  margin: 0;
  font-family: var(--letra);
  font-size: 1.1rem;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.cesta-item__resumo { margin: 2px 0 0; font-size: .95rem; color: var(--suave); }
.cesta-item__falta { margin: 6px 0 0; font-size: .95rem; }
.cesta-item__falta .etiqueta { margin-right: 6px; }
.cesta-item__acoes { display: flex; flex-wrap: wrap; column-gap: 20px; margin-top: 2px; }

.acao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--acao-fundo);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.acao--tirar { color: var(--erro); }

/* ------------------------------ o link de volta ------------------------------ */

.link { display: grid; gap: 10px; margin: 18px 0 24px; }
.link .campo__rotulo { margin: 0; }
.link__texto { background: var(--papel-2); font-size: .95rem; }
.link__acoes { display: grid; gap: 10px; }
.link__acoes .copiar { min-height: 48px; font-size: 1rem; }
.link__aviso { margin: 0; color: var(--acao-fundo); font-weight: 600; }
.link__aviso:empty { display: none; }

/* ------------------------------ enviado ------------------------------ */

/* a faixa verde com o código (GOV.UK "confirmation panel") */
.painel {
  margin: 8px 0 24px;
  padding: 28px 22px 26px;
  border-radius: 18px;
  background: var(--acao);
  color: #fff;
  text-align: center;
}
.painel__titulo { margin: 0 0 10px; color: #fff; font-size: clamp(2.2rem, 9vw, 2.6rem); }
.painel__texto { margin: 0; color: rgba(255, 255, 255, .92); font-size: 1.08rem; }
.painel__codigo {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 2rem;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}

.passos { margin: 0 0 20px; padding-left: 1.4em; }
.passos li + li { margin-top: 10px; }
.passos li::marker { font-weight: 700; }

/* ------------------------------ a folha que sobe de baixo ------------------------------ */

.folha {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: var(--largura);
  max-height: 86dvh;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--papel);
  color: var(--tinta);
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 -12px 34px -12px rgba(21, 23, 26, .35);
}
.folha[open] { animation: folha-sobe .26s var(--ease); }
.folha::backdrop { background: rgba(21, 23, 26, .45); animation: folha-fundo .2s ease-out; }
@keyframes folha-sobe { from { transform: translateY(100%); } }
@keyframes folha-fundo { from { opacity: 0; } }

.folha__dentro { padding: 10px 20px calc(18px + env(safe-area-inset-bottom, 0px)); }
/* o puxador: diz que é uma folha por cima da tela */
.folha__dentro::before {
  content: "";
  display: block;
  width: 38px;
  height: 4px;
  margin: 0 auto 6px;
  border-radius: 2px;
  background: var(--fio);
}
.folha__titulo { margin: 10px 0 6px; font-size: 1.3rem; }
.folha__texto { color: var(--suave); }
.folha__previa { margin: 10px 0 6px; }
.folha__previa img {
  display: block;
  max-height: 160px;
  width: auto;
  margin: 0 auto;
  border-radius: 10px;
}
.folha__erro { margin: 8px 0 0; color: var(--erro); font-weight: 700; }
.folha__erro:empty { display: none; }

.folha__opcoes { display: grid; margin-top: 4px; }
.folha__opcao {
  min-height: 56px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--fio);
  background: none;
  color: var(--tinta);
  font-weight: 600;
  font-size: 1.0625rem;
  text-align: left;
  cursor: pointer;
}
.folha__opcao:last-child { border-bottom: 0; }
.folha__opcao:active { background: var(--papel-2); }
.folha__opcao--tirar { color: var(--erro); }
.folha__opcao[disabled] { color: #9A9EA4; cursor: default; }

.folha__cancelar {
  width: 100%;
  min-height: 52px;
  margin-top: 10px;
  border: 0;
  border-radius: 12px;
  background: var(--papel-2);
  color: var(--tinta);
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
}

/* ------------------------------ telas maiores ------------------------------ */

@media (min-width: 520px) {
  .fotos__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cartoes--paleta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .tela { padding-top: 32px; }
  h1 { font-size: 2.6rem; margin-bottom: 28px; }
  .capa h1 { font-size: 3rem; }
  .confira__linha {
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr) auto;
    grid-template-areas: "chave valor mudar";
    align-items: start;
  }
  .confira__chave, .confira__mudar { align-self: start; }
  .link__acoes { grid-template-columns: 1fr auto; }
  /* no computador a folha vira uma janela no meio */
  .folha { inset: 0; margin: auto; max-width: 440px; height: fit-content; border-radius: 18px; }
  .folha[open] { animation: folha-entra .2s var(--ease); }
  @keyframes folha-entra { from { opacity: 0; transform: scale(.97); } }
}

/* ------------------------------ alto contraste do Windows ------------------------------ */

@media (forced-colors: active) {
  .opcao__marca:checked + .opcao__rotulo::before,
  .cartao__marca:checked + .cartao__corpo .cartao__titulo::before {
    forced-color-adjust: none;
    background: Highlight;
    border-color: Highlight;
  }
  .opcao__marca:checked + .opcao__rotulo,
  .cartao__marca:checked + .cartao__corpo { border-color: Highlight; }
}

/* ------------------------------ reduzir movimento ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .botao:active, .copiar:active, .topo__sair:active, .botao-leve:active { transform: none; }
}