/* 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;
}
/* as 3 letras que só a Loja Personalizada oferece (18/10/2026) */
@font-face {
  font-family: "Playfair Display";
  src: url("../fontes/playfair-display-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Dancing Script";
  src: url("../fontes/dancing-script-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fontes/outfit-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); }
/* o WhatsApp de contorno, na tela do link do meio do caminho (o cheio é o Continuar) */
.copiar--whats { display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* lado a lado, para o Continuar caber na primeira tela do celular */
.link--meio { margin: 14px 0 18px; }
.link--meio .link__acoes { grid-template-columns: 1fr auto; }

/* 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;
}

/* "Uma cor ou paleta só minha": o ladrilho vazio e tracejado (ela ainda vai dizer a cor).
   Com 8 paletas ele seria o 9º, sozinho na linha: ocupa a linha inteira, deitado
   (o tracejado à esquerda, o nome e o preço à direita). */
.vitrine--sua { background: var(--papel); border: 2px dashed var(--tracejado); }
.vitrine--sua .vitrine__nome { color: var(--suave); font-size: 1rem; }
.cartoes--paleta .cartao--sua { grid-column: 1 / -1; }
.cartao--sua .cartao__corpo { grid-template-columns: 112px minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 4px; }
.cartao--sua .vitrine { grid-row: span 2; min-height: 76px; }
.cartao--sua .cartao__titulo { align-self: end; }
.cartao--sua .cartao__d { align-self: start; padding-left: 32px; }

/* 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; }
.letra-romantica { font-family: "Playfair Display", Georgia, serif; font-weight: 700; }
.letra-manuscrita { font-family: "Dancing Script", "Brush Script MT", cursive; font-weight: 700; font-size: 1.15em; }
.letra-moderna { font-family: "Outfit", system-ui, sans-serif; font-weight: 700; }

/* ------------------------------ o visual da Personalizada ------------------------------ */
/* Cada opção desenha um pedacinho da loja, nas cores da Areia (a de fábrica):
   só muda o que aquela pergunta escolhe. */
.cartoes--estilo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartoes--estilo .cartao--simples,
.cartoes--estilo .opcoes__ou { grid-column: 1 / -1; }
.cartoes--estilo .opcoes__ou { padding-left: 0; }
.cartoes--letra .vitrine { min-height: 84px; }
.cartoes--letra .vitrine__nome { font-size: 1.3rem; }
.cartoes--capa { grid-template-columns: minmax(0, 1fr); }
.cartoes--borda { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cartoes--borda .mini { height: 84px; }
.cartoes--estilo .cartao__corpo { grid-template-columns: minmax(0, 1fr); }
.cartoes--borda .cartao:not(.cartao--simples) .cartao__titulo { gap: 6px; font-size: .95rem; }

.mini {
  --m-capa: #efe6da; --m-marca: #806146; --m-escuro: #3b3128; --m-meio: #d4b995; --m-claro: #fbf8f4;
  --m-raio: 999px; --m-raio-p: 6px;
  position: relative;
  display: block;
  height: 96px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--m-claro);
  box-shadow: inset 0 0 0 1px rgba(59, 49, 40, .1);
}
.cartoes--capa .mini { height: 120px; }
.mini > span { position: absolute; display: none; }
/* a "foto": um degradê no tom da cesta */
.mini__foto { background: linear-gradient(150deg, var(--m-meio), var(--m-marca) 70%, var(--m-escuro)); border-radius: var(--m-raio-p); }
.mini__nome { height: 12px; border-radius: 3px; background: var(--m-escuro); }
.mini__linha { height: 5px; border-radius: 3px; background: var(--m-escuro); opacity: .35; }
.mini__botao { height: 14px; width: 30%; border-radius: var(--m-raio); background: var(--m-marca); }
.mini__cartao { width: 34%; height: 58%; top: 21%; border-radius: var(--m-raio-p); background: #fff; box-shadow: 0 1px 3px rgba(59, 49, 40, .18); }
.mini__cartao + .mini__cartao { left: 54%; }

/* as capas */
.mini--capa-cartaz, .mini--capa-editorial { background: var(--m-capa); }
.mini--capa-cartaz :is(.mini__foto, .mini__nome, .mini__linha, .mini__botao),
.mini--capa-foto :is(.mini__foto, .mini__nome, .mini__linha, .mini__botao),
.mini--capa-editorial :is(.mini__foto, .mini__nome, .mini__linha, .mini__botao) { display: block; }
.mini--capa-cartaz .mini__nome { left: 8%; top: 26%; width: 42%; height: 16px; }
.mini--capa-cartaz .mini__linha { left: 8%; top: 50%; width: 34%; }
.mini--capa-cartaz .mini__botao { left: 8%; top: 64%; width: 26%; }
.mini--capa-cartaz .mini__foto { right: 12%; top: 12%; width: 26%; height: 76%; transform: rotate(4deg); box-shadow: -10px 4px 0 -2px var(--m-meio); }
.mini--capa-foto .mini__foto { inset: 0; border-radius: 0; }
.mini--capa-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, .1)); }
.mini--capa-foto :is(.mini__nome, .mini__linha, .mini__botao) { z-index: 1; left: 50%; transform: translateX(-50%); }
.mini--capa-foto .mini__nome { top: 34%; width: 46%; height: 16px; background: #fff; }
.mini--capa-foto .mini__linha { top: 56%; width: 36%; background: #fff; opacity: .8; }
.mini--capa-foto .mini__botao { top: 68%; width: 26%; background: var(--m-meio); }
.mini--capa-editorial :is(.mini__nome, .mini__linha, .mini__botao) { left: 50%; transform: translateX(-50%); }
.mini--capa-editorial .mini__nome { top: 10%; width: 40%; height: 14px; }
.mini--capa-editorial .mini__linha { top: 28%; width: 30%; }
.mini--capa-editorial .mini__botao { top: 37%; width: 20%; height: 10px; }
.mini--capa-editorial .mini__foto { left: 10%; right: 10%; top: 54%; bottom: -8px; }

/* os cantos, os botões e o fundo: dois cartões de cesta e um botão */
:is(.mini--borda-redonda, .mini--borda-suave, .mini--borda-reta, .mini--fundo-claro, .mini--fundo-cor) .mini__cartao { display: block; left: 10%; }
:is(.mini--borda-redonda, .mini--borda-suave, .mini--borda-reta, .mini--fundo-claro, .mini--fundo-cor) .mini__cartao + .mini__cartao { left: 54%; }
:is(.mini--borda-redonda, .mini--borda-suave, .mini--borda-reta) .mini__cartao { height: 46%; top: 12%; }
:is(.mini--borda-redonda, .mini--borda-suave, .mini--borda-reta) .mini__botao { display: block; left: 50%; bottom: 12%; width: 50%; height: 16px; transform: translateX(-50%); }
.mini--borda-redonda { --m-raio: 999px; --m-raio-p: 9px; }
.mini--borda-suave { --m-raio: 6px; --m-raio-p: 5px; }
.mini--borda-reta { --m-raio: 0; --m-raio-p: 0; }
:is(.mini--botao-cheio, .mini--botao-contorno) .mini__botao { display: block; left: 50%; top: 50%; width: 62%; height: 26px; transform: translate(-50%, -50%); }
.mini--botao-contorno .mini__botao { background: transparent; border: 2px solid var(--m-marca); }
.mini--fundo-cor { background: var(--m-capa); }

/* ------------------------------ o movimento da loja (18/10/2026) ------------------------------ */
/* Miniaturas que se mexem. Só transform e opacity. Começam paradas; o
   movimento.js põe "toca" em quem está na tela. O quadro parado já mostra a
   opção (os atrasos negativos espalham os enfeites desde o começo). */
@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }

.mov-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 12px; background: var(--papel-2); }
.mov-barra__texto { flex: 1 1 180px; margin: 0; font-size: .95rem; color: var(--suave); }

.mini--mov { --m-enfeite: #dc8aa0; --m-ouro: #c3923c; }
.mini--mov > span { display: block; inset: 0; }
.mini--mov span span { display: block; position: absolute; }
.mini--mov *, .mini--mov *::before, .mini--mov *::after { animation-play-state: paused; }
.mini--mov.toca *, .mini--mov.toca *::before, .mini--mov.toca *::after { animation-play-state: running; }

/* a capa em miniatura: o nome, uma linha, o botão e a foto da cesta */
.mm-capa { background: var(--m-capa); overflow: hidden; }
.mm-foto { right: 9%; top: 13%; width: 30%; height: 74%; border-radius: 6px; background: linear-gradient(150deg, var(--m-meio), var(--m-marca) 70%, var(--m-escuro)); }
.mm-nome { left: 9%; top: 28%; width: 40%; height: 12px; border-radius: 3px; background: var(--m-escuro); }
.mm-linha { left: 9%; top: 50%; width: 32%; height: 5px; border-radius: 3px; background: var(--m-escuro); opacity: .35; }
.mm-botao { left: 9%; top: 62%; width: 26%; height: 13px; border-radius: 999px; background: var(--m-marca); }
.mm-enfeites { inset: 0; z-index: 2; }
.mm-e { left: var(--x); }

/* quanto se mexe: a foto "respira" e as pétalas caem, cada uma no seu ritmo */
.mini--mov-calma .mm-foto { animation: mm-respira 9s ease-in-out infinite; }
.mini--mov-viva .mm-foto { animation: mm-respira 4.5s ease-in-out infinite; }
.mini--mov-viva .mm-botao { animation: mm-pulsa 2.2s ease-in-out infinite; }
.mini--mov-parada .mm-foto { animation: mm-respira-pouco 18s ease-in-out infinite; }
@keyframes mm-respira { 0%, 100% { transform: scale(1.02); } 50% { transform: scale(1.09); } }
@keyframes mm-respira-pouco { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes mm-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* pétalas: 12 a 15 px, rosadas, caem balançando */
.mm-petala { top: -16px; width: 12px; height: 12px; border-radius: 0 80% 0 80%; background: linear-gradient(135deg, #f4c6d1, var(--m-enfeite)); opacity: 0; animation: mm-cai 7s linear infinite; animation-delay: calc(var(--i) * -1s); }
.mm-petala:nth-child(3n) { width: 15px; height: 15px; }
.mm-petala:nth-child(3n + 2) { width: 13px; height: 13px; }
.mini--mov-calma .mm-petala { animation-duration: 9s; animation-delay: calc(var(--i) * -3s); }
.mini--mov-viva .mm-petala { animation-duration: 4.5s; animation-delay: calc(var(--i) * -.64s); }
@keyframes mm-cai {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: .95; }
  25% { transform: translate(7px, 32px) rotate(70deg); }
  50% { transform: translate(-5px, 64px) rotate(150deg); }
  75% { transform: translate(6px, 96px) rotate(230deg); }
  90% { opacity: .95; }
  100% { transform: translate(-2px, 124px) rotate(300deg); opacity: 0; }
}

/* corações: sobem leves, como bolhas */
.mm-coracao { bottom: -14px; width: 13px; height: 12px; background: var(--m-enfeite); opacity: 0;
  clip-path: path("M6.5 12C6.5 12 0 7.6 0 3.8C0 1.6 1.6 0 3.6 0C4.9 0 6 .8 6.5 1.8C7 .8 8.1 0 9.4 0C11.4 0 13 1.6 13 3.8C13 7.6 6.5 12 6.5 12Z");
  animation: mm-sobe 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.96s); }
@keyframes mm-sobe {
  0% { transform: translate(0, 0) scale(.7); opacity: 0; }
  15% { opacity: .85; }
  50% { transform: translate(5px, -55px) scale(1); }
  85% { opacity: .7; }
  100% { transform: translate(-3px, -112px) scale(.9); opacity: 0; }
}

/* brilhinhos: estrelinhas de 4 pontas que acendem e apagam no lugar */
.mm-brilho { top: var(--y); width: 15px; height: 15px; background: var(--m-ouro); opacity: 0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: mm-pisca 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
.mm-brilho:nth-child(odd) { width: 11px; height: 11px; }
@keyframes mm-pisca { 0%, 100% { transform: scale(.2) rotate(0deg); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* do seu logo: a inicial da loja dela, pequena, flutuando no lugar */
.mm-logo { top: var(--y); font: 700 15px/1 "Fraunces", Georgia, serif; color: var(--m-marca); opacity: .5;
  animation: mm-flutua 4.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
.mm-logo:nth-child(even) { font-size: 12px; }
@keyframes mm-flutua { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-5px) rotate(5deg); } }

/* ao rolar e tocar: a página sobe e desce sozinha */
.mm-tela { background: var(--m-claro); overflow: hidden; }
.mm-pagina { left: 0; right: 0; top: 0; height: 150px; animation: mm-rola 5s ease-in-out infinite; }
.mm-pagina .mm-capa { left: 0; right: 0; top: 0; height: 70px; }
.mm-pagina .mm-capa .mm-nome { top: 22%; }
.mm-pagina .mm-capa .mm-linha { top: 48%; }
.mm-pagina .mm-capa .mm-botao { top: 62%; }
.mm-cartoes { left: 8%; right: 8%; top: 80px; height: 62px; z-index: 1; }
.mm-cartao { top: 0; bottom: 0; width: 44%; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(59, 49, 40, .18); }
.mm-cartao + .mm-cartao { left: 56%; }
.mm-cartao__foto { left: 4px; right: 4px; top: 4px; height: 62%; border-radius: 4px; background: linear-gradient(150deg, var(--m-meio), var(--m-marca)); }
@keyframes mm-rola { 0%, 12% { transform: translateY(0); } 42%, 72% { transform: translateY(-58px); } 94%, 100% { transform: translateY(0); } }
/* com efeito: a capa se afasta mais devagar, os cartões entram e o 1º responde ao toque */
.mini--mov-efeito .mm-capa { animation: mm-afasta 5s ease-in-out infinite; }
.mini--mov-efeito .mm-cartao { animation: mm-entra 5s ease-out infinite; }
.mini--mov-efeito .mm-cartao + .mm-cartao { animation-delay: .15s; }
.mini--mov-efeito .mm-cartao:first-child { animation: mm-entra 5s ease-out infinite, mm-aperta 5s ease-in-out infinite; }
@keyframes mm-afasta { 0%, 12% { transform: translateY(0); opacity: 1; } 42%, 72% { transform: translateY(26px); opacity: .55; } 94%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes mm-entra { 0%, 14% { translate: 0 10px; opacity: .2; } 42%, 76% { translate: 0 0; opacity: 1; } 96%, 100% { translate: 0 10px; opacity: .2; } }
@keyframes mm-aperta { 0%, 50% { scale: 1; } 55% { scale: .93; } 62%, 100% { scale: 1; } }

/* o painel dela: a luz que passeia, a cestinha, o número que conta e as barras */
.mm-painel { background: var(--m-claro); overflow: hidden; }
.mm-luz { left: -40%; top: -60%; width: 130%; height: 170%; background: radial-gradient(closest-side, rgba(212, 185, 149, .38), rgba(212, 185, 149, 0)); opacity: 0; }
.mini--mov-painel-vivo .mm-luz { opacity: 1; animation: mm-deriva 6s ease-in-out infinite alternate; }
@keyframes mm-deriva { 0% { transform: translate(0, 0); } 100% { transform: translate(35%, 20%); } }
.mm-ola { left: 8%; right: 8%; top: 9%; height: 20px; }
.mm-cesta { left: 0; top: 8px; width: 16px; height: 11px; border-radius: 1px 1px 5px 5px; background: var(--m-marca); }
.mm-cesta::before { content: ""; position: absolute; left: 2px; top: -8px; width: 8px; height: 6px; border: 2px solid var(--m-marca); border-bottom: 0; border-radius: 8px 8px 0 0; }
.mini--mov-painel-vivo .mm-cesta { animation: mm-boia 3s ease-in-out infinite; }
@keyframes mm-boia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.mm-ola__texto { left: 24px; top: 10px; width: 48%; height: 6px; border-radius: 3px; background: var(--m-escuro); opacity: .45; }
.mm-numero { left: 8%; top: 36%; font: 800 15px/1 var(--letra); color: var(--m-escuro); font-variant-numeric: tabular-nums; counter-reset: n var(--n); animation: mm-conta 6s ease-out infinite; animation-delay: -3s; }
.mm-numero::before { content: "R$ " counter(n); }
@keyframes mm-conta { 0% { --n: 0; } 18%, 100% { --n: 980; } }
.mini--mov .mm-barras { left: 8%; right: 8%; bottom: 10%; height: 36%; display: flex; align-items: flex-end; gap: 6%; }
.mini--mov .mm-barra { position: relative; flex: 1; height: var(--alt); border-radius: 3px 3px 0 0; background: var(--m-marca); opacity: .75; transform-origin: bottom; animation: mm-cresce 6s ease-out infinite; animation-delay: calc(-3s + var(--i) * .08s); }
@keyframes mm-cresce { 0% { transform: scaleY(0); opacity: .75; } 14%, 90% { transform: scaleY(1); opacity: .75; } 100% { transform: scaleY(1); opacity: 0; } }

/* ------------------------------ 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) {
  /* as prévias do movimento ficam de fora: começam paradas e só tocam se ela pedir */
  *:not(.mini--mov *), *:not(.mini--mov *)::before, *:not(.mini--mov *)::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; }
}

/* ------------------------------ como funciona ------------------------------ */

.como { margin: 22px 0 26px; padding: 0; list-style: none; }
.como__passo { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid var(--fio); }
.como__passo:first-child { border-top: 0; padding-top: 0; }
.como__num { font-family: var(--letra); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--acao); }
.como__corpo { min-width: 0; }
.como__corpo > * + * { margin-top: 10px; }
.como__titulo { margin: 0; font-size: 1.2rem; }
.como__corpo p { margin-bottom: 0; }
/* a miniatura: uma "foto" da tela, não dá para tocar */
.como__exemplo { padding: 10px 14px 14px; border-radius: 12px; background: var(--papel-2); pointer-events: none; }
.como__rotulo { display: block; margin-bottom: 8px; font-size: .82rem; font-weight: 600; color: var(--suave); }
.como__tarefa { min-height: 48px; padding: 8px 0; }
.como__tarefa:last-child { border-bottom: 0; }
.como__tarefa .tarefa__link { text-decoration: underline; color: var(--acao-fundo); font-size: .98rem; }
.como__sair { display: inline-flex; align-items: center; background: var(--papel); }
.como__botao { min-height: 50px; font-size: 1rem; }
.link-sec--junto { margin-top: 10px; }