/* ==========================================================================
   AGENDAMENTO DE REUNIÃO — prefixo agd-
   Painel de vidro com três passos: fila de dias, grade de horários e um
   formulário curto de confirmação. Sem imagem — o que ocupa a dobra é a
   agenda.

   Tokens usados:
     --accent           dia e horário marcados, filete aceso, passo corrente
     --display          face dos números do dia e do horário
     --sans             face do texto e dos campos
     --ease --dur       curva e tempo do projeto
     --fg --fg-2        tinta dos números e do texto
     --fg-muted         rótulos, vagas, ressalva
     --rule --rule-2    contorno em repouso e régua dos campos
     --radius-media     canto do painel, dos dias e dos horários (0 em flat)
     --radius-pill      só via .btn e .pill do core
     --sec-gap          respiro derivado, nunca clamp solto

   Primitivas do core consumidas, e por isso NÃO recopiadas: .glass (o
   painel), .visually-hidden (a região aria-live e os complementos de rótulo
   dos botões Editar), .btn/.btn-primary/.btn-ghost, .pill/.pill-accent.

   A primitiva .field é a exceção: o campo daqui tem a mesma medida dela, mas
   não a veste. O motivo, medido, está no bloco CAMPOS.

   A REGRA QUE ORGANIZA O ARQUIVO: nada aqui esconde passo, grade ou campo.
   Quem esconde é o script, com [hidden]. Sem JavaScript o CSS entrega os dez
   dias, as oito grades e os quatro campos empilhados — que é o que se quer.
   ========================================================================== */

.agd{
  /* Largura mínima do dia na fila, e é ela sozinha que decide se a fila rola.
     Um valor só para todas as larguras, e de propósito: com minmax(92px,1fr)
     as dez colunas crescem e dividem o painel enquanto couberem (acima de
     ~1150px de janela), e viram trilho horizontal assim que não couberem —
     sem trocar o display, sem segunda árvore de markup, sem breakpoint.

     92px não é gosto: é o que "4 horários" pede em 10,5px com tracking, mais
     os 6px de respiro de cada lado. Abaixo disso a linha de vagas vaza da
     coluna e encosta na do dia seguinte — o texto continua sendo o piso, e
     encurtá-lo é o que permite baixar este número. */
  --agd-dia-min:92px;

  /* Largura mínima do bloco de horário. Em px porque o alvo é o dedo: abaixo
     de ~100px o bloco fica menor que a área de toque confortável. */
  --agd-hora-min:104px;

  /* Piso do palco. Cobre os passos 1 e 2, que são os de troca frequente e de
     altura parecida (fila de dias ~104px; grade de até duas linhas). O passo
     3 é um formulário e passa disso de propósito: um piso que coubesse nele
     abriria 200px de vão morto embaixo da fila de dias.

     Diferente do irmão conversao/diagnostico-perfil, aqui o piso NÃO é medido
     pelo script. Lá as cinco telas são do mesmo tipo e só variam com a quebra
     de linha do enunciado — medir é a única saída. Aqui os três passos são de
     tipos diferentes, e igualá-los seria esconder essa diferença. */
  --agd-palco-min:clamp(292px,32vh,360px);

  /* Saída do passo que sai. O script lê o MESMO número (SAIDA em script.js):
     mudar aqui pede mudar lá, senão o passo some antes ou depois da hora. */
  --agd-saida:.26s;

  /* Atraso entre blocos na entrada de um passo. 34ms x 10 dias = .34s, que é
     quanto dura a leitura do primeiro. Acima disso a fila parece lenta. */
  --agd-bloco-passo:34ms;
}

/* [hidden] vem da folha do navegador com especificidade (0,1,0), e QUALQUER
   regra de autor que declare display vence — e este componente declara grid e
   flex em oito lugares. Sem esta linha o script põe [hidden] nos passos 2 e 3,
   o atributo aparece no inspetor, e eles continuam na tela. Uma regra só, no
   topo, cobre o componente inteiro. Mesma pegadinha documentada no
   .hgal-nav[hidden] da midia/galeria-scroll-horizontal. */
.agd [hidden]{display:none}

/* ==========================================================================
   CABEÇALHO
   ========================================================================== */

.agd-convite{margin-top:16px}
.agd-apoio{max-width:56ch}

/* ==========================================================================
   PAINEL
   O bloco de reveal do core. O respiro que o separa do cabeçalho sai de
   --sec-gap, como o resto do ritmo vertical (§4) — nunca um clamp solto.
   ========================================================================== */

.agd-painel{
  position:relative;
  margin-top:calc(var(--sec-gap) * .34);
  padding:clamp(22px,3.2vw,38px);
  border-radius:var(--radius-media);
  --glass-blur:26px;
}

/* ==========================================================================
   TRILHA DE PASSOS
   Decorativa: [aria-hidden] no markup, e a informação de verdade na região
   aria-live. Nasce [hidden] e é o script que a mostra.
   ========================================================================== */

.agd-barra{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--rule);
}

/* A trilha é uma ordem de verdade, então o elemento é <ol>. O reset do core
   zera `ul` e `ol` juntos — aqui não sobra nada a desfazer. */
.agd-trilha{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
}

.agd-etapa{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-muted);
  transition:color .3s var(--ease);
}
/* O traço entre um passo e o seguinte. Vive no ::before do próximo, e não
   numa caixa própria, para a fila poder quebrar em duas linhas no celular
   sem deixar um traço órfão no fim da primeira. */
.agd-etapa + .agd-etapa::before{
  content:"";width:22px;height:1px;background:var(--rule-2);
}
.agd-etapa-n{
  display:grid;place-items:center;
  width:22px;height:22px;
  border:1px solid var(--rule-2);border-radius:var(--radius-pill);
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:0;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
/* Passo corrente acende; passo já cumprido volta ao texto de apoio. Progresso
   em texto, nunca barra que enche: gamificação é o registro errado para uma
   assessoria. */
.agd-etapa.is-atual{color:var(--accent)}
.agd-etapa.is-atual .agd-etapa-n{color:var(--accent);border-color:var(--accent)}
.agd-etapa.is-feita{color:var(--fg-2)}
.agd-etapa.is-feita .agd-etapa-n{border-color:var(--rule-2)}

/* "Voltar" nunca é disabled: no primeiro passo ele simplesmente não existe.
   Botão apagado que não faz nada é pior que botão ausente. */
.agd-voltar{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-muted);
  background:none;border:0;padding:0;
  transition:color .3s var(--ease);
}
.agd-voltar:hover{color:var(--accent)}

/* A região aria-live (.agd-anuncio) não tem regra própria: leva a primitiva
   .visually-hidden do core, que existe exatamente para isto — texto que o
   leitor de tela recebe e o olho não vê, com clip-path em vez de
   display:none, porque display:none tira o elemento da árvore de
   acessibilidade e o anúncio nunca sairia. */

/* ==========================================================================
   PALCO E PASSOS
   ========================================================================== */

.agd-palco{
  position:relative;
  min-height:var(--agd-palco-min);
  padding-top:clamp(22px,3vh,34px);
}

/* fieldset traz border, padding e margin da folha do navegador, e um
   min-inline-size:min-content que estoura a coluna em tela estreita quando
   um texto longo não quebra. Os quatro zeros são obrigatórios. */
.agd-passo{border:0;margin:0;padding:0;min-inline-size:0}

/* legend recebe o foco na troca de passo (tabindex="-1" no markup). Sem
   display:block ela é tratada como caixa especial da borda do fieldset e se
   recusa a virar bloco. width:fit-content não é capricho: é o que faz o anel
   de foco do core abraçar o TÍTULO — em largura cheia o anel sairia com a
   coluna inteira em volta de três palavras. */
.agd-legenda{
  display:block;float:none;width:fit-content;max-width:100%;padding:0;margin:0;
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(21px,2.2vw,28px);line-height:1.2;color:var(--fg);
}

.agd-dica,
.agd-fuso{
  margin-top:10px;max-width:64ch;
  font-size:13.5px;line-height:1.6;color:var(--fg-muted);
}
/* O fuso é uma declaração, não uma legenda: a pílula à esquerda existe para
   ele ser lido antes da grade, e não depois de a pessoa já ter escolhido. */
.agd-fuso{display:flex;align-items:center;flex-wrap:wrap;gap:10px}

/* ==========================================================================
   PASSO 1 — A FILA DE DIAS
   ========================================================================== */

.agd-dias{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(var(--agd-dia-min),1fr);
  gap:8px;
  margin-top:clamp(20px,3vh,30px);
  /* O trilho existe SEMPRE, e é a --agd-dia-min que decide se ele rola. Em
     janela larga as dez colunas cabem e o overflow nunca dispara; em janela
     estreita o piso estoura a largura e a fila vira trilho. Um só bloco de
     markup para os dois casos. overflow-x:auto no CONTÊINER é também o que
     impede a página inteira de estourar na horizontal — que é o erro que o
     §4 do manual descreve com margin negativa e 100vw. */
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  /* O anel de foco do core sai 3px para fora do dia. Sem este respiro ele
     seria cortado pela própria caixa de rolagem, justamente em quem depende
     dele para saber onde está. */
  padding:6px;
}

.agd-dia{
  position:relative;
  display:grid;justify-items:center;align-content:center;gap:3px;
  padding:14px 6px 12px;
  scroll-snap-align:start;
}

/* O RADIO É DE VERDADE, e cobre o dia inteiro em vez de ficar escondido num
   canto de 1px. Duas coisas dependem disso: o :focus-visible do core cai
   exatamente em volta do dia, e o clique em qualquer ponto chega ao input sem
   depender de for/id — que colidiria se o componente aparecesse duas vezes na
   mesma página. appearance:none, e não opacity:0: com opacity:0 o anel de
   foco some junto com o widget. */
.agd-dia-in,
.agd-hora-in{
  -webkit-appearance:none;appearance:none;
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;border:0;background:none;
  cursor:pointer;
}
.agd-dia-in:disabled{cursor:default}

.agd-dia-sem{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-muted);
  transition:color .3s var(--ease);
}
.agd-dia-num{
  font-family:var(--display);font-weight:700;
  font-size:clamp(22px,2.2vw,28px);line-height:1;letter-spacing:-.02em;
  color:var(--fg);
  transition:color .3s var(--ease);
}
.agd-dia-mes{
  font-family:var(--sans);font-size:11px;letter-spacing:.1em;
  color:var(--fg-2);
  transition:color .3s var(--ease);
}
/* O número de vagas é o que faz a fila informar em vez de só oferecer: dez
   dias iguais escondem que dois estão cheios. */
.agd-dia-vagas{
  margin-top:4px;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.04em;
  color:var(--fg-muted);white-space:nowrap;
  transition:color .3s var(--ease);
}

/* O contorno fica numa caixa própria, esticada sobre o dia, e não no <label>:
   é ela que permite reagir ao :disabled e ao :checked do input com um seletor
   de irmão, sem :has e sem classe posta por script. pointer-events:none para
   não roubar o clique do input que está por baixo. */
.agd-dia-marca,
.agd-hora-marca{
  position:absolute;inset:0;pointer-events:none;
  border:1px solid var(--rule);
  border-radius:var(--radius-media);
  transition:border-color .32s var(--ease),background .32s var(--ease);
}

.agd-dia-in:hover ~ .agd-dia-marca{border-color:var(--rule-2)}
.agd-dia-in:hover ~ .agd-dia-num{color:var(--accent)}
.agd-dia-in:checked ~ .agd-dia-marca{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
}
.agd-dia-in:checked ~ .agd-dia-num,
.agd-dia-in:checked ~ .agd-dia-sem,
.agd-dia-in:checked ~ .agd-dia-mes{color:var(--accent)}

/* Dia sem vaga: apagado e de contorno tracejado, mas PRESENTE. Some da ordem
   de tabulação e da navegação por seta pelo `disabled` do próprio input, que
   é comportamento nativo do grupo de radio — nada disso é feito por script. */
.agd-dia-in:disabled ~ .agd-dia-marca{border-style:dashed;border-color:var(--rule)}
.agd-dia-in:disabled ~ .agd-dia-num{color:var(--fg-muted);opacity:.6}
.agd-dia-in:disabled ~ .agd-dia-sem,
.agd-dia-in:disabled ~ .agd-dia-mes,
.agd-dia-in:disabled ~ .agd-dia-vagas{opacity:.6}
.agd-dia-in:disabled:hover ~ .agd-dia-marca{border-color:var(--rule)}
.agd-dia-in:disabled:hover ~ .agd-dia-num{color:var(--fg-muted)}

/* ==========================================================================
   PASSO 2 — A GRADE DE HORÁRIOS
   ========================================================================== */

.agd-grade{margin-top:clamp(20px,3vh,30px)}

/* O dia escrito em cima da grade não é redundância com o passo 1: com script,
   é a confirmação do que foi escolhido; sem script, é o que separa oito
   grades soltas de oito grades identificadas. */
.agd-grade-dia{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
}

.agd-horas{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--agd-hora-min),1fr));
  gap:8px;
  margin-top:12px;
}

.agd-hora{
  position:relative;
  display:grid;place-items:center;
  padding:15px 8px;
}
.agd-hora-txt{
  font-family:var(--display);font-weight:700;
  font-size:15px;letter-spacing:.02em;color:var(--fg-2);
  transition:color .3s var(--ease);
}
.agd-hora-in:hover ~ .agd-hora-marca{border-color:var(--rule-2)}
.agd-hora-in:hover ~ .agd-hora-txt{color:var(--fg)}
.agd-hora-in:checked ~ .agd-hora-marca{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
}
.agd-hora-in:checked ~ .agd-hora-txt{color:var(--accent)}

/* ==========================================================================
   PASSO 3 — RESUMO E CAMPOS
   ========================================================================== */

.agd-resumo{
  display:grid;grid-template-columns:1fr 1fr;gap:0 24px;
  margin-top:clamp(20px,3vh,30px);
  padding:18px 20px;
  border:1px solid var(--rule-2);
  border-radius:var(--radius-media);
}
.agd-resumo-item{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 12px}
.agd-resumo-rot{
  flex:0 0 100%;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-muted);
}
.agd-resumo-val{
  font-family:var(--display);font-weight:700;
  font-size:clamp(16px,1.5vw,19px);letter-spacing:-.01em;color:var(--fg);
  margin-top:6px;
}
/* "Editar" é texto, e não um segundo botão de pílula: dois .btn-primary na
   mesma caixa disputariam com o Confirmar, que é a ação da tela. */
.agd-editar{
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-muted);
  background:none;border:0;padding:0;
  border-bottom:1px solid var(--rule-2);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.agd-editar:hover{color:var(--accent);border-color:var(--accent)}
.agd-resumo-fuso{
  grid-column:1/-1;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--rule);
  font-size:12px;color:var(--fg-muted);
}

/* gap 0 na vertical: o respiro entre linhas vem do padding do próprio campo,
   senão a régua de baixo de um campo fica longe demais do seguinte. */
.agd-campos{
  display:grid;grid-template-columns:1fr 1fr;gap:0 26px;
  margin-top:clamp(18px,2.6vh,26px);
}

/* O campo veste a primitiva `.field` do core: régua embaixo em vez de caixa,
   que acende no foco. Aqui sobra só o que é deste componente.

   O rótulo continua local. O <label> EMBRULHA o campo em vez de usar for/id
   — pelo mesmo motivo dos radios, id não sobrevive a dois componentes na
   mesma página —, então o rótulo é um <span class="agd-rot">, e o seletor do
   core (`.field label`, descendente) não casaria com nada.

   O anel de foco do input vem do `::focus-visible` do core e NÃO é zerado por
   ninguém: a régua de 1px sozinha é indicador fraco demais para quem navega
   por teclado, e as duas coisas convivem. Houve um dia, entre a criação da
   primitiva e este comentário, em que `.field input` zerava o `outline` e
   vestir a primitiva mataria o anel — está no histórico da ficha. */
.agd-campo.is-full{grid-column:1/-1}

.agd-rot{
  display:block;margin-bottom:8px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);
}
.agd-rot-op{letter-spacing:.06em;text-transform:none;opacity:.7}

.agd-input{
  width:100%;background:none;border:none;padding:0;
  font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.4;
  color:var(--fg);
}
.agd-input::placeholder{color:var(--fg-muted);opacity:.7}
/* Campo vazio marcado pela validação do script. Some no primeiro toque —
   ver script.js. */
.agd-campo.is-erro{border-color:var(--accent-2)}

.agd-envio{
  display:flex;align-items:center;flex-wrap:wrap;gap:18px;
  margin-top:clamp(22px,3vh,32px);
}

/* A ressalva de compliance fica onde a pessoa ENTREGA O DADO, não em letra
   miúda no rodapé da página. */
/* A tipografia vem da primitiva .nota do core; daqui sai só a posição — e os
   dois parafusos. 11,5px e 62ch porque a ressalva DIVIDE a barra de ações com
   o botão de enviar: no corpo padrão ela empurraria o botão para a linha de
   baixo. A entrelinha aberta compensa o corpo menor. */
.agd-nota{
  flex:1 1 320px;
  --nota-size:11.5px;
  --nota-max:62ch;
  line-height:1.7;
}

.agd-ok{
  margin-top:20px;padding:16px 18px;
  border:1px solid var(--accent);border-radius:var(--radius-media);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  font-size:14px;line-height:1.6;color:var(--accent);
}

/* ==========================================================================
   AÇÕES
   O botão nasce disabled e só libera quando o passo está respondido. Ele
   existe SEMPRE, e não só em movimento reduzido: o avanço automático é
   cortesia para quem clica, nunca a única saída. Ver o gotcha da ficha.
   ========================================================================== */

.agd-acoes{margin-top:clamp(24px,3.4vh,36px)}

.agd .btn:disabled{
  opacity:.34;cursor:default;
  background:none;color:var(--fg-muted);border-color:var(--rule);
}
.agd .btn:disabled:hover{
  background:none;color:var(--fg-muted);border-color:var(--rule);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* ==========================================================================
   SEM JAVASCRIPT
   Bloco visível por padrão; o script o esconde na inicialização. Nada aqui
   depende de @media nem de :has — o estado honesto é o estado de partida.
   ========================================================================== */

.agd-sem-js{
  margin-top:clamp(24px,3.4vh,36px);padding-top:20px;
  border-top:1px solid var(--rule);
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
}

/* ==========================================================================
   A TROCA DE PASSO — o movimento da peça
   Só existe com script: as regras estão todas sob .agd.is-live, classe que o
   script põe na seção ao iniciar. Sem ela o CSS não esconde nem move nada.

   Não dá para usar data-rv aqui, e a razão é estrutural: o data-rv do core é
   observer de ENTRADA NA TELA — dispara uma vez, desobserva e nunca volta.
   Uma peça que troca de conteúdo no mesmo lugar precisa de transição por
   classe. O que o core continua fazendo é o que ele sabe: revelar o painel
   quando a dobra chega.
   ========================================================================== */

/* Sai com blur e subida. */
.agd.is-live .agd-passo.is-out{
  opacity:0;filter:blur(12px);transform:translateY(-18px);
  transition:opacity var(--agd-saida) var(--ease),
             filter var(--agd-saida) var(--ease),
             transform var(--agd-saida) var(--ease);
}

/* Entra em bloco: título, dica e resumo juntos. */
.agd.is-live .agd-legenda,
.agd.is-live .agd-dica,
.agd.is-live .agd-fuso,
.agd.is-live .agd-resumo,
.agd.is-live .agd-campos,
.agd.is-live .agd-envio,
.agd.is-live .agd-grade-dia{
  opacity:0;filter:blur(10px);transform:translateY(14px);
  transition:opacity .62s var(--ease),
             filter .62s var(--ease),
             transform .62s var(--ease);
}
.agd.is-live .agd-passo.is-in .agd-legenda,
.agd.is-live .agd-passo.is-in .agd-dica,
.agd.is-live .agd-passo.is-in .agd-fuso,
.agd.is-live .agd-passo.is-in .agd-resumo,
.agd.is-live .agd-passo.is-in .agd-campos,
.agd.is-live .agd-passo.is-in .agd-envio,
.agd.is-live .agd-passo.is-in .agd-grade-dia{opacity:1;filter:blur(0);transform:none}

/* E os blocos escalonam. O índice mora no style de cada dia e de cada horário
   (--agd-i, escrito pelo script), e não numa cadeia de :nth-child: a agenda
   muda a cada carga, e cravar o atraso na posição faria a entrada se
   desalinhar sozinha na primeira grade de tamanho diferente. Mesmo recurso do
   --perf-i do conversao/diagnostico-perfil. */
.agd.is-live .agd-dia,
.agd.is-live .agd-hora{
  opacity:0;filter:blur(8px);transform:translateY(12px);
  transition:opacity .5s var(--ease),
             filter .5s var(--ease),
             transform .5s var(--ease);
  transition-delay:calc(.1s + var(--agd-i,0) * var(--agd-bloco-passo));
}
.agd.is-live .agd-passo.is-in .agd-dia,
.agd.is-live .agd-passo.is-in .agd-hora{opacity:1;filter:blur(0);transform:none}

/* Movimento reduzido: o passo troca, mas não anda. O script já pula a saída
   animada; o que sobra é o estado inicial dos blocos, que sem esta regra
   deixaria o passo invisível para sempre. A peça continua inteira — o que
   morre é o escalonamento, não a funcionalidade. Colada à regra que desliga,
   como manda o §6.5 do contrato. */
@media(prefers-reduced-motion:reduce){
  .agd.is-live .agd-legenda,
  .agd.is-live .agd-dica,
  .agd.is-live .agd-fuso,
  .agd.is-live .agd-resumo,
  .agd.is-live .agd-campos,
  .agd.is-live .agd-envio,
  .agd.is-live .agd-grade-dia,
  .agd.is-live .agd-dia,
  .agd.is-live .agd-hora{
    opacity:1;filter:none;transform:none;transition:none;
  }
  .agd-dia-marca,
  .agd-hora-marca,
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media(max-width:900px){
  .agd-resumo{grid-template-columns:1fr;gap:0}
  .agd-resumo-item + .agd-resumo-item{margin-top:16px}
  .agd-campos{grid-template-columns:1fr}
  .agd-campo.is-full{grid-column:auto}
}

@media(max-width:560px){
  .agd{
    /* Três horários por linha em 390px, em vez de dois. A fila de dias não
       precisa de ajuste aqui: ela já virou trilho sozinha, pelo piso de
       --agd-dia-min, umas seiscentas larguras acima desta. */
    --agd-hora-min:88px;
    /* Sem piso no celular, e de propósito: ali o passo já ocupa boa parte da
       tela, e o piso só abriria um vão morto embaixo da grade mais curta. */
    --agd-palco-min:auto;
  }
  /* "1 DIA — 2 HORÁRIO — 3 CONFIRMAÇÃO" em caixa alta com tracking largo pede
     ~350px, e quebraria em duas linhas deixando um traço órfão no começo da
     segunda. Somem os rótulos, ficam os três discos numerados: o progresso
     continua visível, e o nome do passo já está no título dele, dois dedos
     abaixo. A informação para o leitor de tela nunca esteve aqui — está na
     região aria-live. */
  .agd-etapa-t{display:none}
  .agd-envio .btn,
  .agd-acoes .btn,
  .agd-sem-js .btn{width:100%}
}