/* ==========================================================================
   IUKA — o assistente de criação (`criar.html`).

   Arquivo próprio, e não uma seção do styles.css, porque a home é a página do
   LCP, do vídeo e do poster com fetchpriority="high": somar centenas de linhas
   de peso morto a ela seria repetir o que as seções do simulador custaram até
   serem apagadas em 2026-08-20 — 493 linhas que a home baixava sem usar.

   Depende dos tokens e das classes de styles.css (.shell, .btn, .kicker,
   .section-title, .sr-only). Aqui só entra o que é do assistente.
   ========================================================================== */

:root {
  /* Erro. Existe para UMA coisa: "isto está errado e você precisa arrumar".
     Estado incompleto ("falta um contato") é --paper-mute, nunca esta cor.
     6,6:1 sobre --ink-2.

     ATENÇÃO: esta cor está a ~17 graus de matiz da --brasa, e as duas são
     indistinguíveis sob deuteranopia — mas a --brasa significa o OPOSTO
     ("está tudo bem, esta é a marca"). Logo a cor aqui é DECORAÇÃO: quem
     carrega o significado é o glifo do .campo-erro::before, o aria-invalid e
     a frase. Não transforme a cor em portadora de sentido. */
  --alerta:      #FF6B6B;
  --alerta-wash: rgba(255, 107, 107, .12);
  --alerta-edge: rgba(255, 107, 107, .38);
}

/* Mão pesada de propósito: `.btn` é display:inline-flex e venceria o `hidden`
   do atributo. Painel escondido tem de sumir de verdade — do Tab, da busca do
   navegador e do leitor de tela. */
[hidden] { display: none !important; }

.criar-main {
  padding-top: calc(var(--header-h) + 2.25rem);
  padding-bottom: 4.5rem;
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   1 · Sem JavaScript
   -------------------------------------------------------------------------- */
.sem-js { max-width: 40rem; }
.tem-js .sem-js { display: none; }
.sem-js-lista-tit {
  margin-top: 2rem; margin-bottom: .35rem;
  font-family: var(--font-display); font-weight: 700;
}
.acoes-semjs { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   2 · O guia dos quatro passos

   Círculo pintado de 36px, mas área de toque de 44 (WCAG 2.5.8): o padding
   fica no botão e o círculo é desenhado dentro. É o controle que mais gente
   vai tocar depois de errar o nome.
   -------------------------------------------------------------------------- */
.guia { margin-bottom: 2.25rem; }
.guia-lista {
  list-style: none; display: flex; gap: 0;
  padding: 0; margin: 0;
}
.guia-lista li { flex: 1 1 0; min-width: 0; }

.bola {
  -webkit-appearance: none; appearance: none;
  display: grid; justify-items: center; gap: .4rem;
  width: 100%; padding: .3rem .1rem;
  background: none; border: 0; cursor: pointer;
  color: var(--paper-soft);
  font: inherit; font-size: .75rem;
  position: relative;
}
/* Passo ainda trancado. `aria-disabled`, não `disabled`, então precisa de sinal
   VISUAL próprio — e o sinal não pode ser só cor: o número fica esmaecido E
   ganha o contorno tracejado, que sobrevive a forced-colors e a daltonismo. */
.bola[aria-disabled="true"] { cursor: default; }
.bola.trancada { color: var(--paper-soft); }
.bola.trancada .bola-n {
  border-style: dashed;
  border-color: var(--line);
  color: var(--paper-mute);
  background: transparent;
}

.bola-n {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--ink-2);
  font-family: var(--font-display); font-weight: 700; font-size: .8125rem;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.bola-t {
  max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* A linha que liga as bolas. Decorativa, e não conta como o sinal de estado. */
.guia-lista li + li .bola::before {
  content: ''; position: absolute;
  top: calc(.3rem + 1.125rem); left: -50%; right: 50%;
  height: 1px; background: var(--line-2);
}
.guia-lista li + li .bola.feito::before,
.guia-lista li + li .bola.atual::before { background: var(--brasa-edge); }

/* Três estados distinguíveis SEM cor: o feito ganha o ✓, o atual ganha anel
   duplo e aria-current, o futuro fica só com o número. */
.bola.feito  .bola-n { background: var(--brasa-wash); border-color: var(--brasa-edge); color: var(--brasa-lit); }
.bola.feito  .bola-n::after { content: '✓'; }
.bola.feito  .bola-n { font-size: .9375rem; }
.bola.feito  .bola-n > * { display: none; }
.bola.atual  .bola-n { background: var(--brasa); border-color: var(--brasa); color: var(--brasa-ink);
                       box-shadow: 0 0 0 3px var(--brasa-wash); }
.bola.atual, .bola.feito { color: var(--paper-dim); }
.bola:focus-visible { outline: none; }
.bola:focus-visible .bola-n { outline: 2px solid var(--brasa-lit); outline-offset: 3px; }

@media (forced-colors: active) {
  .bola.atual .bola-n { outline: 3px double; }
  .bola.feito .bola-n { outline: 1px solid; }
  .bola.trancada .bola-n { border-style: dashed; }
}

/* --------------------------------------------------------------------------
   3 · O passo
   -------------------------------------------------------------------------- */
.passo { max-width: 40rem; }
.passo-h {
  /* O header é fixed: sem isto o scrollIntoView esconde o título que acabou
     de receber foco. Mesmo precedente do styles.css. */
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  font-size: clamp(1.75rem, 6.4vw, 2.75rem);
  margin-bottom: .75rem;
}
.passo-h:focus-visible { outline: 2px solid var(--brasa-lit); outline-offset: 6px; border-radius: 4px; }
.passo-h:focus:not(:focus-visible) { outline: none; }

.passo-sub {
  color: var(--paper-dim); font-size: .9688rem; line-height: 1.6;
  max-width: 46ch; margin-bottom: 1.85rem;
}
.passo-sub b { color: var(--paper); font-weight: 600; }

.grupo { border: 0; margin: 0 0 1.85rem; padding: 0; min-width: 0; }
.grupo legend {
  display: flex; align-items: baseline; gap: .55rem;
  padding: 0; margin-bottom: .55rem;
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: -.015em;
}
.grupo legend .n {
  display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: 50%;
  background: var(--brasa-wash); border: 1px solid var(--brasa-edge);
  color: var(--brasa-lit); font-size: .75rem; font-weight: 700;
}

.ou {
  display: flex; align-items: center; gap: 1rem;
  /* --paper-mute e não --paper-faint: o faint dá 2,86:1 e o README reserva ele
     para ícone, borda e hover. Como cor de TEXTO, sempre o mute (5,8:1). */
  margin: 0 0 1.85rem; color: var(--paper-mute);
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
}
.ou::before, .ou::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* --------------------------------------------------------------------------
   4 · Campos
   -------------------------------------------------------------------------- */
.campo { margin-bottom: 1.15rem; }
.campo-rot {
  display: block; margin-bottom: .35rem;
  font-size: .8125rem; font-weight: 600; color: var(--paper-dim);
}
.opc { font-weight: 400; color: var(--paper-mute); }

.campo-in {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%;
  /* 16px cravado: abaixo disso o Safari do iPhone dá zoom ao focar o campo,
     e a pessoa perde o resto do formulário de vista. */
  font: 400 1rem/1.4 var(--font-body);
  color: var(--paper);
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  min-height: 2.875rem;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.campo-in::placeholder { color: var(--paper-mute); }
.campo-in:hover { border-color: var(--line-2); background: var(--ink-3); }
.campo-in:focus-visible {
  outline: 2px solid var(--brasa-lit); outline-offset: 1px;
  border-color: var(--brasa-edge); background: var(--ink-3);
}
select.campo-in {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F6F4F1'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center;
  background-size: 1.25rem; padding-right: 2.25rem;
}

.campo-in[aria-invalid="true"] { border-color: var(--alerta-edge); background: var(--alerta-wash); }

.dupla { display: grid; gap: 0; }
@media (min-width: 30em) {
  .dupla { grid-template-columns: 10rem 1fr; column-gap: .75rem; }
  .campo-curto { max-width: 14rem; }
}

.campo-dica, .campo-conta, .campo-eco, .campo-erro {
  font-size: .8125rem; line-height: 1.5; margin-top: .35rem;
}
.campo-dica  { color: var(--paper-soft); }
.campo-conta { color: var(--paper-mute); }
.campo-eco   { color: var(--brasa-lit); }
.campo-eco:empty, .campo-erro:empty, .campo-dica:empty, .campo-conta:empty { margin: 0; }

/* O glifo é quem carrega o significado. A cor é reforço. */
.campo-erro { color: var(--alerta); }
.campo-erro:not(:empty)::before { content: '⚠ '; }

.porta { font-size: .875rem; color: var(--paper-mute); margin: 0 0 1.85rem; }
.porta.pronto { color: var(--paper-dim); }
.porta.pronto::before { content: '✓ '; color: var(--brasa-lit); }

/* --------------------------------------------------------------------------
   5 · Resumo de erro do passo
   -------------------------------------------------------------------------- */
.erros {
  border: 1px solid var(--alerta-edge);
  background: var(--alerta-wash);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  margin-bottom: 1.5rem;
}
.erros:focus-visible { outline: 2px solid var(--alerta); outline-offset: 2px; }
.erros-tit { font-weight: 700; font-size: .9375rem; margin-bottom: .35rem; }
.erros ul { margin: 0; padding-left: 1.1rem; font-size: .875rem; }
.erros li + li { margin-top: .2rem; }
.erros button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--paper); font: inherit; text-decoration: underline;
  text-underline-offset: .18em;
}

/* --------------------------------------------------------------------------
   6 · A prévia do nome
   -------------------------------------------------------------------------- */
.previa {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--ink-1); padding: 1.1rem 1.15rem; margin-bottom: 1.85rem;
}
.previa-rot { font-size: .75rem; color: var(--paper-mute); margin-bottom: .35rem;
              text-transform: uppercase; letter-spacing: .06em; }
.previa-nome {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.25rem, 5.4vw, 1.75rem); line-height: 1.15;
  letter-spacing: -.02em; overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   7 · As fotos
   -------------------------------------------------------------------------- */
.solta {
  display: grid; justify-items: center; gap: .3rem;
  padding: 2rem 1.25rem;
  border: 2px dashed var(--line-2); border-radius: var(--radius-lg);
  background: var(--ink-1); cursor: pointer; text-align: center;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.solta:hover { border-color: var(--brasa-edge); background: var(--ink-2); }
.solta.arrastando { border-color: var(--brasa); background: var(--brasa-wash); }
#fotos:focus-visible + .solta { outline: 2px solid var(--brasa-lit); outline-offset: 3px; }
.solta-ico { width: 2.25rem; height: 2.25rem; fill: var(--brasa-lit); }
.solta-t { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.solta-s { font-size: .8125rem; color: var(--paper-soft); }

.fotos-conta { margin-top: .9rem; font-size: .9375rem; color: var(--paper-dim); }
.fotos-conta.falta { color: var(--paper-mute); }
.fotos-conta.ok::before { content: '✓ '; color: var(--brasa-lit); }

.grade {
  list-style: none; padding: 0; margin: 1.35rem 0 0;
  display: grid; gap: .65rem;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}
.item {
  position: relative;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--ink-2); overflow: hidden;
}
.item.capa { border-color: var(--brasa); }
.item.falhou { border-color: var(--alerta-edge); background: var(--alerta-wash); }

.item-fig { margin: 0; aspect-ratio: 4 / 3; background: var(--ink-3); }
.item-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

.selo {
  position: absolute; top: .4rem; left: .4rem;
  background: var(--brasa); color: var(--brasa-ink);
  font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
  padding: .15rem .45rem; border-radius: 999px;
}

/* X flutuante de excluir: canto superior-direito de cada miniatura, sempre
   visível (inclusive em foto que errou). .item-bt.item-x p/ vencer o .item-bt. */
.item-bt.item-x {
  position: absolute; top: .35rem; right: .35rem; z-index: 2;
  width: 2.25rem; height: 2.25rem;
  border-radius: 999px;
  background: rgba(10, 10, 12, .62); color: #fff;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.item-bt.item-x:hover, .item-bt.item-x:focus-visible { background: var(--alerta, #d64545); color: #fff; }
.item.falhou .item-bt.item-x { background: var(--alerta, #d64545); }

.item-pe {
  display: flex; align-items: center; gap: .2rem;
  padding: .3rem .35rem;
  border-top: 1px solid var(--line);
}
.item-bt {
  -webkit-appearance: none; appearance: none;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; flex: none;   /* 44px de toque */
  background: none; border: 0; border-radius: 8px;
  color: var(--paper-mute); cursor: pointer; font: inherit; font-size: .8125rem;
}
.item-bt:hover:not(:disabled) { color: var(--paper); background: var(--ink-3); }
.item-bt:disabled { opacity: .32; cursor: default; }
.item-bt svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.item-bt-larg { width: auto; padding-inline: .5rem; }

.item-prog {
  display: block; width: 100%; height: 3px;
  -webkit-appearance: none; appearance: none; border: 0;
  background: var(--ink-3);
}
.item-prog::-webkit-progress-bar  { background: var(--ink-3); }
.item-prog::-webkit-progress-value { background: var(--brasa); }
.item-prog::-moz-progress-bar      { background: var(--brasa); }

.item-est {
  /* .75rem e não .6875: é o estado do upload, o texto que a pessoa mais relê
     quando algo demora. */
  font-size: .75rem; color: var(--paper-mute);
  padding: 0 .45rem .4rem; min-height: 1.1em;
}
.item.falhou .item-est { color: var(--alerta); }

/* --------------------------------------------------------------------------
   7a · O passo 2 guiado — uma vaga por vez (PLANO-FRENTES.md §2.3)

   O bloco inteiro é DESENHO VAZIO: nenhuma destas regras conhece o nome de uma
   posição do passeio. O texto e a imagem chegam do servidor, que lê a régua.
   Um `.vaga--fachada` aqui seria a régua vazando para a folha de estilo.

   Por que a figura é grande e vem ANTES do botão: a pessoa está na calçada com
   o celular na mão, e quem decide o enquadramento é o olho, não a frase. A
   instrução explica; o exemplo é o que se copia.
   -------------------------------------------------------------------------- */
.vaga {
  margin: 1.35rem 0 1.1rem;
  padding: 1.1rem 1.1rem 1.2rem;
  border: 1px solid var(--brasa-edge); border-radius: var(--radius-lg);
  background: var(--ink-1);
}

/* O passeio: onde a pessoa está na sequência. Chips que quebram a linha em vez
   de rolar na horizontal — rolagem lateral esconde justamente as posições que
   ainda faltam, que são as que importam. */
.passeio {
  list-style: none; display: flex; flex-wrap: wrap; gap: .3rem;
  padding: 0; margin: 0 0 .85rem;
}
.passeio-i {
  font-size: .72rem; font-weight: 600; line-height: 1.2;
  padding: .25rem .5rem; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--paper-mute);
  white-space: nowrap;
}
/* O ✓ e o • não são enfeite: eles são quem carrega o estado. A cor sozinha
   repetiria o erro que a nota da --alerta descreve lá em cima. */
.passeio-i.feita { color: var(--paper-dim); border-color: var(--brasa-edge); }
.passeio-i.feita::before { content: '✓ '; color: var(--brasa-lit); }
.passeio-i.agora {
  color: var(--paper); border-color: var(--brasa); background: var(--brasa-wash);
}
.passeio-i.agora::before { content: '● '; color: var(--brasa-lit); }

.vaga-conta {
  margin: 0; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--paper-mute);
}
.vaga-tit {
  margin: .2rem 0 .35rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.25rem, 4.4vw, 1.6rem); line-height: 1.15;
  letter-spacing: -.02em;
}
.vaga-instr { margin: 0; font-size: 1rem; line-height: 1.55; max-width: 42rem; }
.vaga-faca {
  margin: .5rem 0 0; font-size: .9375rem; color: var(--paper-dim); max-width: 42rem;
}
.vaga-faca::before { content: '→ '; color: var(--brasa-lit); }

.vaga-fig {
  margin: .95rem 0 0;
  border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden;
  background: var(--ink-3);
}
.vaga-fig img {
  display: block; width: 100%; height: auto; max-height: 15rem; object-fit: cover;
}
.vaga-fig figcaption {
  padding: .45rem .6rem; font-size: .75rem; color: var(--paper-mute);
  border-top: 1px solid var(--line-2);
}
/* A linha declarada do §6. Fica fora da figura de propósito: legenda some do
   fluxo de leitura de quem passa o olho; um parágrafo não. */
.vaga-ia {
  margin: .55rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--paper-mute);
  max-width: 42rem;
}

/* --------------------------------------------------------------------------
   7a' · O veredito do curador, e o escape do dono

   Neutro por padrão: a maioria dos vereditos é "boa, seguimos". A moldura de
   erro só entra na recusa, e mesmo ali quem diz o que houve é a FRASE — a
   mesma regra da --alerta lá de cima.
   -------------------------------------------------------------------------- */
.vered {
  margin: .9rem 0 0; padding: .8rem .9rem;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--ink-2);
}
.vered.ok { border-color: var(--brasa-edge); }
.vered.nao { border-color: var(--alerta-edge); background: var(--alerta-wash); }
.vered-txt { margin: 0; font-size: .9375rem; line-height: 1.55; }
.vered.ok .vered-txt::before { content: '✓ '; color: var(--brasa-lit); }
.vered.nao .vered-txt::before { content: '✕ '; color: var(--alerta); }
.vered-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }

/* O estado de curadoria dentro do quadradinho da grade. `.item.insistida` não
   ganha borda de erro: a foto ENTROU no passeio — o que ela não faz é virar
   capa, e isso quem diz é o texto. */
.item.pendente { border-color: var(--line-2); opacity: .85; }
.item.reprovada { border-color: var(--alerta-edge); }
.item-vaga {
  margin: 0; padding: 0 .5rem .1rem; font-size: .72rem; font-weight: 700;
  color: var(--paper-dim); overflow-wrap: anywhere;
}
.item.reprovada .item-vaga { color: var(--alerta); }

/* --------------------------------------------------------------------------
   7b · Logo do negócio (opcional) — base das cores do site
   -------------------------------------------------------------------------- */
.logo-bloco {
  display: flex; align-items: center; gap: .9rem;
  margin: 1.1rem 0 .2rem; padding: .8rem .9rem;
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  background: var(--ink-2);
}
.logo-texto { flex: 1 1 auto; min-width: 0; }
.logo-tit { margin: 0; font-size: .95rem; }
.logo-opc {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--paper-mute); border: 1px solid var(--line-2); border-radius: 999px;
  padding: .05rem .4rem; margin-left: .35rem;
}
.logo-dica { margin: .2rem 0 0; font-size: .8125rem; color: var(--paper-mute); }
.logo-btn { flex: none; }
.logo-previa {
  position: relative; flex: none; margin: 0;
  width: 4rem; height: 4rem; border-radius: 12px; overflow: visible;
  background: #fff; border: 1px solid var(--line-2);
}
.logo-previa img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 12px; }
.logo-x {
  position: absolute; top: -.45rem; right: -.45rem;
  width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--alerta, #d64545); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.logo-x svg { width: .95rem; height: .95rem; fill: currentColor; }

/* --------------------------------------------------------------------------
   8 · Os contatos extras
   -------------------------------------------------------------------------- */
.extras { list-style: none; padding: 0; margin: 0 0 .9rem; }
.extra {
  display: grid; gap: .5rem;
  grid-template-columns: 1fr 2.75rem;
  align-items: end;
  padding-bottom: .9rem; margin-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}
.extra .campo { margin-bottom: .6rem; }
.extra .campo:last-of-type { margin-bottom: 0; }
.extra-campos { min-width: 0; }
.extra-tirar {
  -webkit-appearance: none; appearance: none;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--line-2); border-radius: var(--radius);
  color: var(--paper-mute); cursor: pointer;
}
.extra-tirar:hover { color: var(--alerta); border-color: var(--alerta-edge); }
.extra-tirar svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.mais { margin-top: .2rem; }

/* --------------------------------------------------------------------------
   9 · Isca, aviso e ações
   -------------------------------------------------------------------------- */
/* Fora da tela por POSIÇÃO. `display:none` o navegador não preenche e o bot
   reconhece — é o contrário do que se quer aqui. */
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso-lgpd {
  font-size: .8125rem; line-height: 1.6; color: var(--paper-soft);
  border-top: 1px solid var(--line); padding-top: 1.1rem;
  margin: 0 0 1.85rem; max-width: 52ch;
}
.aviso-lgpd a { color: var(--paper-dim); }

.acoes { display: grid; gap: .65rem; margin-top: 2rem; }
.acoes .btn { width: 100%; }
@media (min-width: 34em) {
  .acoes { display: flex; flex-wrap: wrap; }
  .acoes .btn { width: auto; }
}
.acoes-json { margin-top: 1rem; }

/* Botão que não dá para usar continua CLICÁVEL, com aria-disabled e a razão
   escrita ao lado. `disabled` no toque não emite evento nenhum: a pessoa toca,
   nada acontece, e tem de descobrir o porquê sozinha. */
.btn[aria-disabled="true"] { opacity: .55; }
.acoes-nota { margin-top: .7rem; font-size: .8125rem; color: var(--paper-mute); }
.acoes-nota:empty { margin: 0; }

/* `padding: 0` deixava o alvo com 21px de altura — abaixo dos 24×24 que a WCAG
   2.5.8 exige de qualquer alvo que não esteja dentro de uma frase. O padding
   vertical levanta a ÁREA sem levantar o PESO: o sublinhado segue no texto, a
   fonte segue menor que a do corpo, e o alvo destrutivo continua sendo o mais
   discreto da tela — que é o ponto do §8. */
.link-botao {
  background: none; border: 0; padding: .36rem 0; cursor: pointer;
  color: var(--paper-mute); font: inherit; font-size: .8125rem;
  text-decoration: underline; text-underline-offset: .18em;
}
.link-botao:hover { color: var(--paper); }
/* O bloco de retomada vem ANTES das portas e é o alvo primário (§8). Separado
   do que vem depois, para a pessoa com rascunho não confundir "continuar" com
   "começar outro". */
.retomar { margin: 0 0 2rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.retomar .btn { width: 100%; }
@media (min-width: 40rem) { .retomar .btn { width: auto; } }
/* --------------------------------------------------------------------------
   9.5 · O horário da semana

   Sete linhas e não três ("segunda a sexta / sábado / domingo"): o atalho
   cobriria a maioria e MENTIRIA para o resto, e horário errado é pior que
   horário ausente. Sete linhas iguais também não têm modo, não têm precedência
   e não têm o que explicar — que é o teste do §1.5 do CLAUDE.md.
   -------------------------------------------------------------------------- */
.horarios { margin-top: 1.6rem; }
.horarios-cab { margin: 0 0 .25rem; font-weight: 600; }
.horarios-nota { margin: 0 0 1rem; font-size: .8125rem; color: var(--paper-mute); }
.horarios-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.horarios-dia { display: grid; grid-template-columns: 4.6rem 1fr; gap: .6rem; align-items: center; }
.horarios-rot { font-size: .875rem; color: var(--paper-mute); }
.horarios-par { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.horarios-par input[type="time"] {
  background: var(--ink-2); color: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-s, .5rem); padding: .5rem .55rem; font: inherit;
  font-size: .9375rem; min-height: 2.75rem;
}
.horarios-par input[type="time"]:disabled { opacity: .4; }
.horarios-ate { font-size: .8125rem; color: var(--paper-mute); }
/* O "fechado" é alvo de dedo, não caixinha de 13px: 2.75rem de altura para
   passar dos 24×24 da WCAG 2.5.8 com folga (§8). */
.horarios-fech { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem;
                 font-size: .8125rem; color: var(--paper-mute); cursor: pointer; }
.horarios-fech input { width: 1.1rem; height: 1.1rem; accent-color: var(--brasa, #E2552B); }
.horarios-copia { margin: .7rem 0 0; }
@media (max-width: 30rem) {
  .horarios-dia { grid-template-columns: 1fr; gap: .25rem; }
  .horarios-rot { font-weight: 600; color: var(--paper); }
}

/* O caminho de volta para um site que já existe. Mesmo peso do `.retomar`
   porque a decisão é a mesma: quem já tem trabalho feito acha o que é dele
   antes dos convites para recomeçar (§8). */
.volta { margin: 0 0 2rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.volta-rot { margin: 0 0 .7rem; font-size: .9375rem; color: var(--paper-mute); }
.volta-rot em { font-style: normal; color: var(--paper); font-weight: 600; word-break: break-all; }
.volta-acao { margin: 0; }
.volta .btn { width: 100%; }
@media (min-width: 40rem) { .volta .btn { width: auto; } }
/* Dois blocos empilhados não somam duas linhas: quem tem rascunho E site vê uma
   separação só. */
.retomar + .volta { margin-top: -1.2rem; }
.descartar { margin-top: 3rem; padding-top: 1.35rem; border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   10 · O resumo
   -------------------------------------------------------------------------- */
/* O aviso de que falta mandar o pedido. Fica no fluxo, não é uma nota de pé:
   enquanto o POST não existir, é a instrução mais importante da página. */
.resumo-aviso {
  border: 1px solid var(--brasa-edge); background: var(--brasa-wash);
  border-radius: var(--radius); padding: .95rem 1.05rem;
  margin-top: 1.35rem; font-size: .9375rem; line-height: 1.6;
  color: var(--paper-dim); max-width: 52ch;
}
.resumo-aviso strong { color: var(--paper); font-weight: 600; }

.resumo-blocos { display: grid; gap: 1.1rem; margin: 2rem 0; }
.resumo-bloco {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--ink-1); padding: 1.1rem 1.15rem;
}
.resumo-bloco h3 {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--paper-mute); margin-bottom: .55rem;
}
.resumo-bloco p, .resumo-bloco li { font-size: .9375rem; line-height: 1.6; overflow-wrap: anywhere; }
.resumo-bloco ul { list-style: none; padding: 0; margin: 0; }
.resumo-bloco li + li { margin-top: .3rem; }
.resumo-bloco .rot { color: var(--paper-mute); }
.resumo-chave {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem; color: var(--paper-mute);
}

.resumo-json { margin: 2rem 0; }
.resumo-json summary {
  cursor: pointer; font-size: .875rem; color: var(--paper-dim);
  padding: .5rem 0;
}
.resumo-json pre {
  /* JSON largo rola dentro da própria caixa: a página nunca rola de lado. */
  overflow-x: auto; max-height: 22rem; overflow-y: auto;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem; line-height: 1.5; color: var(--paper-dim);
}
.resumo-json pre:focus-visible { outline: 2px solid var(--brasa-lit); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   11 · Preferências do sistema
   O bloco global de styles.css já zera transição e animação em
   prefers-reduced-motion. Aqui só garantimos que nada novo pisca.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .campo-in, .bola-n, .solta { transition: none; }
}

/* --------------------------------------------------------------------------
   12 · Geração (loading com etapas) e site pronto
   -------------------------------------------------------------------------- */
.etapas { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .9rem; }
.etapa {
  display: flex; align-items: center; gap: .85rem;
  font-size: .9688rem; color: var(--paper-mute);
  transition: color .2s var(--ease);
}
.etapa-bola {
  width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%;
  border: 2px solid var(--line-2); display: grid; place-items: center;
  position: relative;
}
/* etapa em andamento: anel pulsando na brasa */
.etapa.ativa { color: var(--paper); }
.etapa.ativa .etapa-bola { border-color: var(--brasa); }
.etapa.ativa .etapa-bola::after {
  content: ''; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--brasa); animation: pulsa 1s var(--ease) infinite;
}
@keyframes pulsa { 0%,100%{opacity:.35;transform:scale(.7)} 50%{opacity:1;transform:scale(1)} }
/* etapa concluída: preenchida com ✓ */
.etapa.feita { color: var(--paper-dim); }
.etapa.feita .etapa-bola { border-color: var(--brasa); background: var(--brasa); }
.etapa.feita .etapa-bola::after { content: '✓'; color: var(--brasa-ink); font-size: .8rem; font-weight: 700; }

.gerando-nota { margin-top: 1.75rem; font-size: .875rem; color: var(--paper-mute); min-height: 1.2em; }
.pronto-nota { font-size: .875rem; color: var(--paper-mute); margin-bottom: .5rem; }

/* Estado de falha da geração. --paper (não --paper-dim) porque erro pede leitura
   fácil, e a borda em --alerta marca a mudança de tom sem depender só de cor. */
.gerando-erro {
  margin-top: 2rem; padding: 1.35rem 1.25rem;
  border: 1px solid var(--alerta-edge); background: var(--alerta-wash);
  border-radius: 14px;
}
.gerando-erro-msg { color: var(--paper); font-size: .9688rem; line-height: 1.6; margin: 0 0 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .etapa.ativa .etapa-bola::after { animation: none; }
}

/* --- buscador do Google (passo 4) --------------------------------------- */
.place-busca { position: relative; }
.place-lista {
  list-style: none; margin: .4rem 0 0; padding: .3rem; position: absolute; left: 0; right: 0; z-index: 20;
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 16px 44px -14px rgba(0,0,0,.65); max-height: 21rem; overflow-y: auto;
}
.place-op { display: flex; gap: .7rem; align-items: center; padding: .5rem; border-radius: 9px; cursor: pointer; }
.place-op:hover, .place-op:focus-visible { background: var(--ink-3); outline: none; }
.place-op-img, .place-card-img {
  flex: none; border-radius: 8px; object-fit: cover; background: var(--ink-3);
  display: grid; place-items: center; font-size: 1.2rem;
}
.place-op-img { width: 3rem; height: 3rem; }
.place-op-txt { display: flex; flex-direction: column; min-width: 0; }
.place-op-txt b { font-size: .95rem; color: var(--paper, #F6F4F1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-op-txt span { font-size: .82rem; color: var(--paper-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-card {
  display: flex; gap: .8rem; align-items: center; margin-top: .7rem; padding: .7rem;
  background: var(--brasa-wash); border: 1px solid var(--brasa-edge); border-radius: 12px;
}
.place-card-img { width: 3.4rem; height: 3.4rem; }
.place-card-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.place-card-txt b { color: var(--paper, #F6F4F1); }
.place-card-txt span { font-size: .84rem; color: var(--paper-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-card-x {
  background: none; border: 1px solid var(--line-2); color: var(--paper-mute);
  border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .82rem; cursor: pointer;
}
.place-card-x:hover { color: var(--paper, #F6F4F1); border-color: var(--paper-mute); }
.place-fallback { margin-top: .9rem; }
.place-fallback summary { cursor: pointer; color: var(--paper-mute); font-size: .88rem; }
.place-fallback summary:hover { color: var(--paper, #F6F4F1); }
.place-fallback .campo-in { margin-top: .5rem; }

/* O ENDEREÇO ESCRITO À MÃO — a saída de quem não está no Google.

   `<details>` fechado por progressive disclosure: quem acha no Google nunca
   abre; quem não acha encontra a saída onde ela faz falta, e não três telas
   antes. O `summary` tem o mesmo peso do `.place-fallback` de propósito — é
   alternativa, não ação primária (Fitts: o alvo grande é o de achar no
   Google). */
.grupo-alt { margin: 0 0 1.85rem; }
.grupo-alt > summary {
  cursor: pointer; color: var(--paper-mute); font-size: .92rem;
  padding: .25rem 0;
}
.grupo-alt > summary:hover { color: var(--paper, #F6F4F1); }
.grupo-alt[open] > summary { margin-bottom: .9rem; }

/* Duas colunas onde o par é curto (CEP+número, bairro+UF); uma só no celular
   estreito, que é onde a maioria preenche. */
.campo-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; }
.campo-linha .campo-num,
.campo-linha .campo-uf { max-width: 9rem; }
.campo-linha .campo-uf .campo-in { text-transform: uppercase; }
@media (max-width: 27rem) { .campo-linha { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   13 · Passo 0 · as três portas

   O CARTÃO É O BOTÃO desde 14/09/2026. Eram rádios dentro de labels, com um
   "Continuar" embaixo — e esse era o único rótulo genérico do fluxo inteiro,
   vago porque o desenho separava a escolha da ação (skill `fluxo` §1 e §11).
   Agora cada porta é um `<button>` que navega: o rótulo volta a dizer o
   resultado porque ele É o título do cartão, e some o estado intermediário.

   Some também a `.porta-marca`, que era a bolinha de rádio: sem escolha para
   guardar, não há o que marcar. O que ficou dela é o espaço — um botão não
   precisa mostrar que está "selecionado" quando tocar nele já leva embora.
   -------------------------------------------------------------------------- */
.portas {
  border: 0; margin: 0 0 1.85rem; padding: 0; min-width: 0;
  display: grid; gap: .7rem;
}
/* `all: unset` não serve aqui — precisamos de um bloco que herde a fonte e
   estique na largura, sem o `appearance` do botão nativo. */
.porta-op {
  display: block; width: 100%; cursor: pointer; text-align: left;
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; -webkit-appearance: none; appearance: none;
}
.porta-corpo {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem;
  background: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 14px;
  transition: border-color .16s ease, background .16s ease;
}
@media (prefers-reduced-motion: reduce) { .porta-corpo { transition: none; } }

.porta-marca { display: none; }

.porta-ico {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--ink-3); color: var(--paper-mute);
}
.porta-ico svg { width: 1.375rem; height: 1.375rem; fill: currentColor; }

.porta-txt { display: flex; flex-direction: column; gap: .3rem; min-width: 0; flex: 1; }
/* O selo DENTRO da coluna de texto, e não numa terceira coluna do cartão. Em
   390px — a largura do público — uma coluna própria para ele espremia a
   descrição numa tira de seis palavras por linha. Aqui ele divide a linha do
   título e quebra sozinho quando não cabe. */
.porta-linha { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.porta-tit {
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--paper);
}
.porta-desc { font-size: .875rem; line-height: 1.55; color: var(--paper-dim); }
.porta-desc b { color: var(--paper); font-weight: 600; }

.porta-selo {
  flex: none;
  border-radius: 999px; padding: .2rem .6rem;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--brasa-wash); border: 1px solid var(--brasa-edge); color: var(--brasa-lit);
}
.porta-selo.breve { background: transparent; border-color: var(--line-2); color: var(--paper-mute); }

/* O foco e o toque agora são do PRÓPRIO botão. O `:active` existe porque um
   alvo desse tamanho sem resposta ao toque deixa a dúvida de ter funcionado —
   e dúvida é o que faz procurar explicação (skill `fluxo` §5). */
.porta-op:focus-visible { outline: none; }
.porta-op:focus-visible .porta-corpo {
  outline: 2px solid var(--brasa-lit); outline-offset: 3px;
}
.porta-op:active .porta-corpo { border-color: var(--brasa-edge); background: var(--brasa-wash); }
@media (hover: hover) {
  .porta-op:hover .porta-corpo { border-color: var(--paper-faint); }
  .porta-op:hover .porta-ico { color: var(--brasa-lit); }
}

/* Indisponível: a BORDA TRACEJADA é o sinal, não a opacidade — quem não
   enxerga a diferença de contraste ainda vê que o contorno é outro. */
.porta-op.indisponivel { cursor: default; }
.porta-op.indisponivel .porta-corpo {
  border-style: dashed; border-color: var(--line); background: transparent;
}
.porta-op.indisponivel .porta-tit { color: var(--paper-dim); }
.porta-op.indisponivel .porta-ico { background: transparent; border: 1px dashed var(--line); }

/* O que o site vai pedir, em qualquer porta. Este bloco é a razão de o passo 0
   existir: a home perdeu a seção "como funciona" e nada mais avisa que vêm
   cinco fotografias pela frente. */
.p0-precisa { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.p0-precisa-tit {
  margin-bottom: .35rem;
  font-family: var(--font-display); font-weight: 700;
}
.p0-gratis {
  margin-top: 1.5rem; max-width: 46ch;
  font-size: .875rem; line-height: 1.6; color: var(--paper-dim);
}
.p0-gratis b { color: var(--paper); font-weight: 600; }

/* --------------------------------------------------------------------------
   14 · A porta do Maps (painel dentro do passo 0)

   Reusa `.place-busca`, `.place-lista`, `.place-op*` e `.place-card*` da seção
   do buscador do passo 4: é a mesma lista de resultados do mesmo `iuka/maps/
   buscar`, e duplicar o desenho faria as duas divergirem na primeira mudança.
   -------------------------------------------------------------------------- */
.porta-maps { max-width: 40rem; }
.porta-honesto {
  margin-top: 1.6rem; padding: .95rem 1.1rem;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px;
}
.porta-honesto p {
  margin: 0 0 .6rem; max-width: 46ch;
  font-size: .875rem; line-height: 1.6; color: var(--paper-dim);
}
.porta-honesto p:last-child { margin-bottom: 0; }
.porta-honesto b { color: var(--paper); font-weight: 600; }

/* O recado da porta no passo 2. Não é `.campo-dica`: ele não explica um campo,
   ele PEDE uma foto nomeada — a de dentro da porta, a única que o Maps nunca
   tem (0 de 10 perfis, PLANO-FRENTES §3.2). Ganha a faixa da brasa para não se
   perder entre as dicas de tela. */
.porta-recado {
  margin: 0 0 1.6rem; padding: .75rem .95rem; max-width: 46ch;
  background: var(--brasa-wash);
  border-left: 3px solid var(--brasa-edge); border-radius: 0 10px 10px 0;
  font-size: .875rem; line-height: 1.6; color: var(--paper-dim);
}