/* ============================================================
   app — casca, componentes e telas
   ============================================================ */

/* ---------------- casca ---------------- */

.casca { min-height: 100vh; display: flex; flex-direction: column; }

.barra {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.barra__int {
  display: flex; align-items: center; gap: var(--e4);
  min-height: 74px; padding-block: var(--e2);
}
.barra__nav { display: flex; align-items: center; gap: var(--e4); margin-left: auto; }
.barra__link {
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding-block: var(--e1);
  border-bottom: 1px solid transparent;
  transition: color var(--t-rapido), border-color var(--t-rapido);
}
.barra__link:hover { color: var(--ink); }
.barra__link[aria-current] { color: var(--ink); border-bottom-color: var(--ouro-marca); }

.menu-btn {
  display: none; background: none; border: 1px solid var(--linha-forte);
  color: var(--ink); padding: 9px 14px; cursor: pointer; margin-left: auto;
  letter-spacing: .16em; text-transform: uppercase; font-size: .66rem;

  /* 44px e o minimo confortavel de toque (Apple HIG e WCAG 2.5.5).
     Media aqui, e nao so no mobile, porque o botao so aparece no
     mobile de qualquer forma. */
  min-height: 44px;
}

@media (max-width: 860px) {
  .barra__nav {
    position: absolute; inset: 74px 0 auto; flex-direction: column;
    align-items: stretch; gap: 0; margin: 0;
    background: var(--surface); border-bottom: 1px solid var(--linha);
    padding: var(--e2) clamp(20px, 5vw, 64px) var(--e4);
  }
  .barra__nav[data-aberto="nao"] { display: none; }
  .barra__link { padding-block: var(--e2); border-bottom: 1px solid var(--linha); }
  .barra__nav .btn { margin-top: var(--e3); justify-content: center; }
  .menu-btn { display: block; }
}

.principal { flex: 1; }

/* ---------------- a marca ---------------- */

.marca { display: flex; align-items: center; gap: var(--e2); }

/* A marca da barra e um link (leva ao inicio), entao tambem e alvo de
   toque. Ganha altura sem mexer no desenho: o conteudo ja e centrado
   verticalmente pelo flex. */
@media (pointer: coarse), (max-width: 860px) {
  .marca { min-height: 44px; }
}
.marca__svg { width: 38px; height: auto; flex: none; }
.marca__txt { display: flex; flex-direction: column; line-height: 1.1; }
.marca__nome { font-family: var(--serif); font-size: 1.06rem; letter-spacing: .005em; }
.marca__papel {
  font-size: .58rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ouro);
}

/* ---------------- filete diagonal (motivo da varredura) ---------------- */

.filete-diag {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(
    90deg, transparent, var(--ouro-marca) 18%, var(--ouro-marca) 82%, transparent);
  opacity: .5;
}

/* ---------------- botoes ---------------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: 14px 26px; cursor: pointer;
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--linha-forte); background: transparent; color: var(--ink);
  transition: background var(--t-rapido), border-color var(--t-rapido), color var(--t-rapido);
}
.btn:hover { border-color: var(--ink); background: var(--ouro-vel); }

.btn--ouro { border-color: var(--ouro-marca); color: var(--ouro); }
.btn--ouro:hover { background: var(--ouro-marca); color: var(--ground); border-color: var(--ouro-marca); }

.btn--solido { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn--solido:hover { background: var(--ouro); border-color: var(--ouro); color: var(--ground); }

.btn--peq { padding: 8px 14px; font-size: .66rem; letter-spacing: .12em; }
.btn--full { width: 100%; justify-content: center; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.btn-texto {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ouro); font-size: .78rem; letter-spacing: .08em;
  border-bottom: 1px solid currentColor;
}
.btn-texto:hover { color: var(--ink); }

/* ---------------- superficies ---------------- */

.cartao {
  background: var(--surface);
  border: 1px solid var(--linha);
  padding: var(--e4);
}
.cartao--alt { background: var(--surface-alt); }

.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid currentColor; color: var(--ink-3); white-space: nowrap;
}
.selo--ok    { color: var(--ok); }
.selo--espera{ color: var(--ouro); }
.selo--erro  { color: var(--erro); }
.selo::before { content: ""; width: 5px; height: 5px; background: currentColor; }

/* ---------------- formulario ---------------- */

.form { display: grid; gap: var(--e3); }
.form__dupla { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.campo { display: grid; gap: var(--e1); }
.campo > label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 13px 15px;
  background: var(--surface-alt); color: var(--ink);
  border: 1px solid var(--linha-forte);
  transition: border-color var(--t-rapido);
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--ink-3); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--ouro); box-shadow: inset 0 -2px 0 var(--ouro);
}
.campo textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--ink-3); opacity: .7; }
.campo[data-erro="sim"] input,
.campo[data-erro="sim"] select,
.campo[data-erro="sim"] textarea { border-color: var(--erro); }
.campo__erro { font-size: .74rem; color: var(--erro); }

/* Escolha em blocos — modalidade, forma de pagamento */
.opcoes { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.opcao {
  display: grid; gap: var(--e1); text-align: left; cursor: pointer;
  padding: var(--e3); background: var(--surface-alt);
  border: 1px solid var(--linha-forte);
  transition: border-color var(--t-rapido), background var(--t-rapido);
}
.opcao:hover { border-color: var(--ink-3); }
.opcao[aria-pressed="true"] { border-color: var(--ouro); background: var(--ouro-vel); }
.opcao__nome { font-family: var(--serif); font-size: 1.15rem; }
.opcao__det  { font-size: .8rem; color: var(--ink-3); line-height: 1.5; }

/* ---------------- landing: hero ----------------
   Split assimetrico. O retrato ocupa a coluna direita, encosta no pe da
   secao e atravessa a borda pro que vem abaixo. O recorte ja sai do
   tools/build_retrato.py com o alpha caindo, entao a travessia e macia
   sem CSS nenhum tentando disfarcar um corte reto. */

.hero { padding-block: clamp(36px, 6vw, 80px) 0; position: relative; }

/* Desktop: identidade e fala empilhadas na coluna da esquerda, retrato
   ocupando a direita inteira e encostando no pe da secao. */
.hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  grid-template-areas:
    "id      retrato"
    "fala    retrato";
  gap: 0 clamp(20px, 4vw, 56px);
  align-items: end;
}
.hero__id { grid-area: id; }
.hero__fala { grid-area: fala; padding-bottom: clamp(52px, 8vw, 112px); }
.retrato { grid-area: retrato; }

.hero__marca { width: clamp(64px, 7vw, 92px); margin-bottom: var(--e3); }
.hero__nome {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.2rem + 4.4vw, 4.2rem);
  line-height: 1.02; letter-spacing: -.022em;
}
.hero__papel {
  margin-top: var(--e2);
  font-size: clamp(.68rem, .62rem + .3vw, .86rem);
  letter-spacing: .4em; text-transform: uppercase; color: var(--ouro);
}
.hero__crp { margin-top: var(--e1); font-size: .76rem; letter-spacing: .08em; color: var(--ink-3); }
.hero__frase {
  font-family: var(--serif);
  font-size: clamp(1.15rem, .95rem + .9vw, 1.6rem);
  line-height: 1.42; color: var(--ink-2); max-width: 30ch;
  margin-block: var(--e4);
}
.hero__acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }

.retrato {
  margin: 0 clamp(-72px, -3.5vw, 0px) -1px 0;
  justify-self: end; align-self: end;
  width: min(100%, 520px);
  position: relative; z-index: 2;
}
.retrato img { width: 100%; height: auto; display: block; }

/* Celular: identidade e retrato dividem a MESMA celula da grade, com o
   nome ancorado no pe da foto. Nao e acidente de largura, e composicao:
   o pe do recorte e justamente onde o alpha ja caiu, entao o texto entra
   sobre a parte dissolvida dela e nao sobre o rosto.

   O veu (::before) e o que torna isso seguro. Sem ele a legibilidade do
   nome dependeria do pixel que calhasse atras. Ele sai do --ground opaco
   e some antes da metade, entao a sobreposicao continua visivel. */
@media (max-width: 900px) {
  .hero { padding-block: clamp(24px, 5vw, 48px) 0; }
  .hero__grade {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "id"
      "fala";
    gap: 0;
  }

  .retrato {
    grid-area: id;
    align-self: start;
    justify-self: end;
    z-index: 1;
    width: calc(70% + 13vw);
    max-width: none;
    margin: 0 calc(-1 * clamp(20px, 5vw, 64px)) 0 0;
  }

  .hero__id {
    grid-area: id;
    align-self: end;              /* o nome desce ate o pe do retrato */
    position: relative;
    z-index: 2;
    padding-bottom: var(--e3);
    padding-right: 22%;
  }
  .hero__id::before {
    content: "";
    position: absolute;
    inset: -10% 0 -12% -8%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(95deg,
      var(--ground) 0%,
      var(--ground) 34%,
      color-mix(in srgb, var(--ground) 78%, transparent) 58%,
      color-mix(in srgb, var(--ground) 30%, transparent) 80%,
      transparent 100%);
    /* O gradiente e horizontal, mas a CAIXA dele tem topo reto, e esse
       topo aparecia como uma linha atravessando o pescoco dela. A mascara
       dissolve a borda de cima. O pe nao precisa: ali o veu ja e da cor do
       fundo, sobre o fundo. */
    mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
  }

  .hero__fala { padding-block: var(--e3) clamp(36px, 7vw, 64px); }
  .hero__frase { margin-block: 0 var(--e3); max-width: none; }
}

@media (max-width: 560px) {
  .hero__marca { width: 54px; margin-bottom: var(--e2); }
  .hero__papel { letter-spacing: .3em; }
  .hero__id { padding-right: 12%; }
  .retrato { width: calc(78% + 13vw); }
}

/* ---------------- landing: secoes ---------------- */

.secao {
  padding-block: clamp(56px, 8vw, 108px);
  border-top: 1px solid var(--linha);
  /* A barra e sticky com 74px. Sem esta folga a ancora encosta o topo da
     secao no topo da viewport e o titulo fica escondido atras dela. */
  scroll-margin-top: 86px;
}
.hero { scroll-margin-top: 0; }
.secao__titulo { max-width: 21ch; margin-block: var(--e2) var(--e5); }
.rotulo + .secao__titulo { margin-top: var(--e2); }
.nota-secao { margin-top: var(--e4); max-width: 60ch; }

/* sobre: texto corrido com uma citacao puxada ao lado */
.sobre {
  display: grid; gap: clamp(28px, 5vw, 64px);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
.sobre__texto { display: grid; gap: var(--e3); }
@media (max-width: 860px) { .sobre { grid-template-columns: 1fr; } }

.destacado {
  margin: 0; padding-left: var(--e4);
  border-left: 1px solid var(--ouro-marca);
  align-self: center;   /* senao sobra um vao morto embaixo dela */
}
@media (max-width: 860px) { .destacado { align-self: start; } }
.destacado p {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  line-height: 1.4; color: var(--ink);
}

/* faixa de fatos: hairline unica em cima, sem borda por linha */
.fatos {
  display: grid; gap: var(--e4) var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: var(--e5); padding-top: var(--e4);
  border-top: 1px solid var(--linha);
}
.fatos dt {
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.fatos dd { margin: 0; color: var(--ink-2); font-size: .94rem; line-height: 1.45; }

/* dois publicos, colunas desiguais, divisao por filete e nao por card */
.publicos {
  display: grid; gap: clamp(28px, 5vw, 72px);
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
}
@media (max-width: 880px) { .publicos { grid-template-columns: 1fr; } }

.publico__t {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem);
  padding-bottom: var(--e2); margin-bottom: var(--e2);
  border-bottom: 1px solid var(--ouro-marca);
}
.publico--alt .publico__t { border-bottom-color: var(--linha-forte); }

.temas { display: grid; }
.tema { padding-block: var(--e3); border-bottom: 1px solid var(--linha); }
.tema:last-child { border-bottom: 0; }
.tema__t { font-size: 1rem; font-weight: 400; letter-spacing: .01em; color: var(--ink); }
.tema__d { margin-top: 4px; font-size: .88rem; line-height: 1.55; color: var(--ink-3); }

/* como funciona: espinha vertical, nao tres cards iguais */
.espinha { display: grid; gap: 0; max-width: 68ch; }
.passo {
  display: grid; grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--e3); padding-block: var(--e4);
  border-top: 1px solid var(--linha);
}
.passo:last-child { border-bottom: 1px solid var(--linha); }
.passo__n {
  font-family: var(--serif); font-size: 2.4rem; line-height: .9;
  color: var(--ouro); font-variant-numeric: tabular-nums;
}
.passo__corpo { display: grid; gap: var(--e2); }
@media (max-width: 620px) {
  .passo { grid-template-columns: 1fr; gap: var(--e2); }
  .passo__n { font-size: 1.8rem; }
}

/* investimento: um numero, nao duas cartas */
.preco {
  display: grid; gap: clamp(28px, 5vw, 72px);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
}
@media (max-width: 860px) { .preco { grid-template-columns: 1fr; } }
.preco__n {
  font-family: var(--serif);
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  line-height: .95; letter-spacing: -.03em; margin-top: var(--e2);
}
.preco__sub { margin-top: var(--e2); font-size: .85rem; color: var(--ink-3); }
.preco__texto { display: grid; gap: var(--e3); }

/* perguntas */
.faq { display: grid; }
.faq details { border-bottom: 1px solid var(--linha); }
.faq details:first-child { border-top: 1px solid var(--linha); }
.faq summary {
  cursor: pointer; list-style: none; padding-block: var(--e3);
  display: flex; align-items: center; gap: var(--e3);
  font-family: var(--serif); font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; color: var(--ouro);
  font-family: var(--sans); font-size: 1.3rem; line-height: 1;
}
.faq details[open] summary::after { content: "‘2"; }
.faq details > .corpo { padding-bottom: var(--e3); }

/* fecho, com a assinatura */
.fecho__int {
  display: grid; gap: var(--e4); justify-items: center; text-align: center;
  padding-block: var(--e3);
}
.marca-fecho { width: clamp(140px, 20vw, 220px); }
.fecho__texto { text-align: center; margin-inline: auto; max-width: 46ch; }

/* ---------------- rodape ---------------- */

.rodape { border-top: 1px solid var(--linha); background: var(--surface); padding-block: var(--e5) var(--e4); }
.rodape__grade { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.rodape__col { display: grid; gap: var(--e2); align-content: start; }
/* Links de texto que fazem as vezes de botao secundario
   ("Voltar ao inicio", "Voltar ao site"). No toque eles precisam da
   mesma area de qualquer outro alvo. */
@media (pointer: coarse), (max-width: 860px) {
  .btn-texto {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
}

.rodape__link { font-size: .9rem; }
.rodape__link:hover { color: var(--ouro); }

/* No toque, cada link do rodape ganha area sem mudar o desenho: o
   acrescimo e padding vertical dentro de uma lista que ja e uma
   coluna.

   As DUAS condicoes de proposito. `pointer: coarse` e a pergunta
   certa (quem decide e o dedo, nao o monitor), mas nem todo ambiente
   a reporta — a emulacao de dispositivo do DevTools, por exemplo, so
   liga isso com emulacao de toque explicita. A largura entra como
   rede, senao a regra existe e nunca vale. */
@media (pointer: coarse), (max-width: 860px) {
  .rodape__link {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
}
.rodape__base {
  margin-top: var(--e5); padding-top: var(--e3); border-top: 1px solid var(--linha);
  display: flex; gap: var(--e3); flex-wrap: wrap; justify-content: space-between;
}

/* ---------------- agendamento ---------------- */

.tela { padding-block: clamp(36px, 6vw, 72px) clamp(52px, 8vw, 104px); }
.tela__cabeca { display: grid; gap: var(--e2); margin-bottom: var(--e5); }

.trilha { display: flex; gap: 1px; background: var(--linha); border: 1px solid var(--linha); margin-bottom: var(--e5); }
.trilha__item {
  flex: 1; background: var(--surface); padding: var(--e2) var(--e3);
  display: grid; gap: 2px; min-width: 0;
}
.trilha__item[data-estado="atual"] { background: var(--surface-alt); box-shadow: inset 0 -2px 0 var(--ouro-marca); }
.trilha__item[data-estado="atual"] .trilha__nome { color: var(--ink); }
.trilha__item[data-estado="feito"] .trilha__nome { color: var(--ink); }
.trilha__n { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; color: var(--ouro); }
.trilha__nome { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.agenda { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .agenda { grid-template-columns: 1fr; } }

.mes { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); }
.mes__nome { font-family: var(--serif); font-size: 1.35rem; }
.mes__setas { display: flex; gap: var(--e1); }
.mes__seta {
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--linha-forte); color: var(--ink);
}
.mes__seta:hover:not([disabled]) { border-color: var(--ouro); color: var(--ouro); }
.mes__seta[disabled] { opacity: .3; cursor: not-allowed; }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.cal__cabeca {
  background: var(--surface); text-align: center; padding: var(--e2) 2px;
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.dia {
  background: var(--surface); border: 0; cursor: pointer; position: relative;
  aspect-ratio: 1; display: grid; place-content: center; gap: 4px;
  color: var(--ink); font-variant-numeric: tabular-nums; font-size: .95rem;
  transition: background var(--t-rapido), color var(--t-rapido);
}
.dia:hover:not([disabled]) { background: var(--ouro-vel); }
.dia[disabled] { color: var(--ink-3); opacity: .38; cursor: not-allowed; }
.dia[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.dia__ponto { width: 4px; height: 4px; background: var(--ouro-marca); justify-self: center; }
.dia[aria-pressed="true"] .dia__ponto { background: var(--ground); }
.dia--vazio { background: var(--surface); opacity: .35; cursor: default; }

.horarios { display: grid; gap: var(--e1); grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.hora {
  padding: 12px 4px; text-align: center; cursor: pointer;
  background: var(--surface-alt); border: 1px solid var(--linha-forte); color: var(--ink);
  font-variant-numeric: tabular-nums; font-size: .92rem;
  transition: border-color var(--t-rapido), background var(--t-rapido);
}
.hora:hover:not([disabled]) { border-color: var(--ouro); }
.hora[disabled] { color: var(--ink-3); opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.hora[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }

.vazio-aviso { padding: var(--e4); border: 1px dashed var(--linha-forte); color: var(--ink-3); font-size: .88rem; text-align: center; }

.resumo { display: grid; gap: var(--e2); }
.resumo__linha { display: flex; justify-content: space-between; gap: var(--e3); padding-block: var(--e2); border-bottom: 1px solid var(--linha); }
.resumo__linha:last-child { border-bottom: 0; }
.resumo__rot { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); flex: none; }
.resumo__val { text-align: right; }

.confirm { display: grid; gap: var(--e4); justify-items: center; text-align: center; padding-block: var(--e5); }
.confirm__marca { width: 108px; }
.confirm__cod { font-family: var(--mono); font-size: 1.1rem; letter-spacing: .18em; color: var(--ouro); }

/* ---------------- painel ---------------- */

.painel__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }

.metricas { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha);
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: var(--e4); }
.metrica { background: var(--surface); padding: var(--e3) var(--e4); display: grid; gap: var(--e1); }
.metrica__n { font-family: var(--serif); font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.metrica__r { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

.filtros { display: flex; gap: var(--e1); flex-wrap: wrap; margin-bottom: var(--e3); }
.filtro {
  padding: 7px 14px; cursor: pointer; background: transparent;
  border: 1px solid var(--linha); color: var(--ink-3);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
}
.filtro:hover { color: var(--ink); border-color: var(--linha-forte); }
.filtro[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }

.lista { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.lista__cabeca, .ag {
  display: grid; gap: var(--e3); align-items: center;
  grid-template-columns: 132px minmax(0, 1.4fr) 108px 150px auto;
  background: var(--surface); padding: var(--e3) var(--e4);
}
.lista__cabeca { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.ag__quando { display: grid; gap: 2px; }
.ag__data { font-variant-numeric: tabular-nums; }
.ag__hora { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ag__nome { font-family: var(--serif); font-size: 1.1rem; }
.ag__contato { font-size: .78rem; color: var(--ink-3); word-break: break-word; }
.ag__acoes { display: flex; gap: var(--e1); flex-wrap: wrap; justify-content: flex-end; }
.ag[data-cancelado="sim"] { opacity: .5; }
.ag[data-cancelado="sim"] .ag__nome { text-decoration: line-through; }

@media (max-width: 900px) {
  .lista__cabeca { display: none; }
  .ag { grid-template-columns: 1fr; gap: var(--e2); }
  .ag__acoes { justify-content: flex-start; }
}

.nota-obs { font-size: .82rem; color: var(--ink-2); padding-top: var(--e2); border-top: 1px dashed var(--linha); grid-column: 1 / -1; }

/* ---------------- entrar / pagamento ---------------- */

.estreito { max-width: 460px; margin-inline: auto; }
.medio    { max-width: 720px; margin-inline: auto; }

.aviso-mock {
  display: flex; gap: var(--e2); align-items: flex-start;
  border: 1px solid var(--ouro-marca); background: var(--ouro-vel);
  padding: var(--e2) var(--e3); font-size: .78rem; line-height: 1.55; color: var(--ink-2);
}
.aviso-mock strong { color: var(--ouro); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; }

.pix { display: grid; gap: var(--e3); justify-items: center; text-align: center; }
.pix__codigo {
  font-family: var(--mono); font-size: .74rem; line-height: 1.7; word-break: break-all;
  background: var(--surface-alt); border: 1px solid var(--linha); padding: var(--e3);
  color: var(--ink-2); width: 100%; text-align: left;
}
.pix__qr {
  width: 168px; height: 168px; border: 1px solid var(--linha-forte);
  background: var(--surface-alt);
  /* Hachura na diagonal da marca, com o rotulo por cima: le como
     "espaco reservado", nao como imagem que falhou. */
  background-image: repeating-linear-gradient(108deg,
    var(--ouro-vel) 0 6px, transparent 6px 13px);
  display: grid; place-content: center; text-align: center;
}
.pix__qr::after {
  content: "QR fictício";
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface-alt); padding: 4px 8px;
}

/* ---------------- passos do fluxo ---------------- */

.passo-conteudo { display: grid; gap: var(--e3); }
.passo-conteudo > .titulo-2 { max-width: 20ch; }
.passo-conteudo > .opcoes,
.passo-conteudo > .agenda { margin-top: var(--e2); }

.acoes-passo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
  margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--linha);
}

.aviso-topo {
  border: 1px solid var(--erro); padding: var(--e2) var(--e3);
  margin-bottom: var(--e3);
}

.legenda-livre { margin-top: var(--e2); display: flex; align-items: center; gap: 8px; }
.legenda-livre::before { content: ""; width: 4px; height: 4px; background: var(--ouro-marca); flex: none; }

.opcional { text-transform: none; letter-spacing: 0; color: var(--ink-3); }

.campo > label.aceite__linha {
  display: flex; gap: var(--e2); align-items: flex-start; cursor: pointer;
  font-size: .82rem; line-height: 1.6; color: var(--ink-3);
  text-transform: none; letter-spacing: 0;
}
.aceite__linha input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--ouro); }
.campo.aceite[data-erro="sim"] .aceite__linha { color: var(--erro); }

.resumo-fixo { align-self: start; position: sticky; top: 96px; display: grid; gap: var(--e3); }
@media (max-width: 900px) { .resumo-fixo { position: static; } }

/* ---------------- confirmacao ---------------- */

.confirm__texto { text-align: center; margin-inline: auto; }
.confirm__cartao { width: 100%; text-align: left; }
.confirm__acoes { display: flex; gap: var(--e2); flex-wrap: wrap; justify-content: center; }


/* ---------------- pagamento ---------------- */

.pg-resumo { margin-block: var(--e4); }
.pg-formas { margin-bottom: var(--e4); }
.pg-pago { display: grid; gap: var(--e3); justify-items: start; }
.aviso-mock { margin-bottom: var(--e4); }
.aviso-mock code { font-family: var(--mono); font-size: .9em; color: var(--ouro); }

/* ---------------- entrar ---------------- */

.entrar__marca { display: flex; justify-content: center; margin-bottom: var(--e4); }
.entrar__svg { width: 68px; }
.entrar__voltar { justify-self: center; margin-top: var(--e2); }
#tela-entrar .tela__cabeca { justify-items: center; margin-bottom: var(--e4); }
#tela-entrar .form { margin-top: var(--e4); }

/* ---------------- painel: colunas ---------------- */

.ag__mod { line-height: 1.4; }
.ag__selos { display: flex; gap: var(--e1); flex-wrap: wrap; }
.ag__cod { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--ouro); }
.ag__primeira { vertical-align: middle; margin-left: var(--e1); }
.painel__aviso { margin-top: var(--e4); max-width: 72ch; }
.painel__aviso code { font-family: var(--mono); font-size: .9em; }

/* Peso unico na fonte: o destaque vem da cor, nao de um bold sintetico. */
.destaque { font-weight: 400; color: var(--ink); }

.opcao__valor { font-size: .8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.atend__acoes { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e2); }