.caixa{
  max-width:520px;margin:0 auto;background:var(--superficie);
  border:1px solid var(--linha);border-radius:var(--raio);padding:1.75rem;
}
.voltar{font-size:.85rem;color:var(--tinta-suave);text-decoration:none}
.voltar:hover{color:var(--tinta)}
.caixa h1{margin:.75rem 0 1.25rem}
.alerta{
  background:#fdf1ee;border:1px solid #f2c9bd;color:#a03a1c;
  padding:.75rem .9rem;border-radius:8px;font-size:.9rem;margin:0 0 1rem;
}
/* Campo com etiqueta por cima. Vivia so no admin.css e o site publico
   usava-o na conta — os campos ficavam sem etiqueta formatada. */
.f-campo{display:block;margin-bottom:.8rem;font-size:.82rem;color:var(--tinta-suave)}
.f-campo input,.f-campo select{
  display:block;width:100%;margin-top:.25rem;font-size:16px;
  padding:.6rem .7rem;border:1px solid var(--linha);border-radius:8px;
  font-family:inherit;color:var(--tinta);background:var(--superficie);
}
.f-campo[hidden]{display:none}

/* ---- pagar o sinal ---- */
.escolher-pagamento{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;margin:1.25rem 0;
}
.bloco-pagar{
  background:var(--fundo);border:1px solid var(--linha);
  border-radius:var(--raio);padding:1.1rem 1.2rem;margin:0;
}
/* O credito vem antes dos outros e ocupa a largura toda: e o meio mais
   barato para o cliente e o mais barato para a casa. */
.bloco-credito{
  background:var(--livre);border-color:#cfe3bd;margin-bottom:1rem;
}
.bloco-pagar h3{margin:0 0 .2rem;font-size:1rem}
.bloco-pagar .sub{font-size:.85rem;margin:0 0 .85rem}
.bloco-pagar label{display:block;margin-bottom:.75rem;font-size:.85rem}

/* A referencia e para ser lida em voz alta ou copiada a mao. Numeros
   grandes, espacados, e cada campo com o seu nome por cima. */
.ref-mb{
  background:var(--livre);border:1px solid #cfe3bd;
  border-radius:var(--raio);padding:1.2rem 1.3rem;margin:1.25rem 0;
}
.ref-mb .etiqueta{
  display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--verde-escuro);margin-bottom:.75rem;font-weight:700;
}
.ref-linhas{display:grid;gap:.6rem;margin-bottom:.85rem}
.ref-linhas > div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.ref-linhas span{font-size:.85rem;color:var(--tinta-suave)}
.ref-linhas strong{
  font-size:1.35rem;font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.pago-ok{color:var(--verde-escuro)}

.lista-horas{margin-bottom:1.25rem}
.linha-hora{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--linha);font-size:.95rem;
}
.linha-hora:last-child{border-bottom:0}
.linha-hora .preco{font-weight:600;font-variant-numeric:tabular-nums}
.totais{
  display:flex;gap:2rem;background:var(--livre);
  border-radius:8px;padding:.9rem 1rem;margin-bottom:1.5rem;
}
.totais .etiqueta{display:block;font-size:.72rem;color:var(--tinta-suave)}
.totais strong{font-size:1.2rem}
form label{display:block;margin-bottom:1rem;font-size:.85rem;color:var(--tinta-suave)}
form input{
  display:block;width:100%;margin-top:.35rem;padding:.7rem .8rem;
  border:1px solid var(--linha);border-radius:8px;font:inherit;
  font-size:1rem;color:var(--tinta);background:var(--fundo);
}
form input:focus{outline:2px solid var(--verde);outline-offset:1px;border-color:transparent}
.opcional{color:#a9b0a7;font-size:.78rem}
.em-nome-de{
  background:var(--fundo);border:1px solid var(--linha);border-radius:8px;
  padding:.85rem 1rem;margin-bottom:1.25rem;position:relative;
}
.em-nome-de .etiqueta{display:block;font-size:.72rem;color:var(--tinta-suave)}
.em-nome-de strong{display:block;font-size:1.05rem;margin:.1rem 0}
.em-nome-de .sub{font-size:.82rem}
.em-nome-de .trocar{
  position:absolute;top:.85rem;right:1rem;
  font-size:.78rem;color:var(--tinta-suave);
}

.outro-nome{margin-bottom:1.25rem}
.outro-nome > summary{
  cursor:pointer;list-style:none;font-size:.88rem;color:var(--verde-escuro);
  min-height:44px;display:flex;align-items:center;
}
.outro-nome > summary::-webkit-details-marker{display:none}
.outro-nome > summary::before{content:'+ ';font-weight:700}
.outro-nome[open] > summary::before{content:'− '}
.outro-nome .nota{text-align:left;margin:0 0 .75rem}

.para-quem{
  background:#fdf8ec;border:1px solid #f0e0bd;border-radius:8px;
  padding:.6rem .8rem;margin:0 0 1.25rem;font-size:.88rem;
}

.selo-outro{
  display:inline-block;background:#fdf8ec;border:1px solid #f0e0bd;
  color:#8a6414;border-radius:5px;padding:.1rem .45rem;font-size:.72rem;
}
.largo{width:100%}
.nota{font-size:.8rem;color:var(--tinta-suave);margin:.9rem 0 0;text-align:center}
.etiqueta-codigo{margin:0;font-size:.75rem;color:var(--tinta-suave);
  text-transform:uppercase;letter-spacing:.1em}
.codigo-reserva{font-size:2rem;letter-spacing:.15em;margin:.15rem 0 1.5rem}
.pendente{
  background:#fdf8ec;border:1px solid #f0e0bd;border-radius:8px;
  padding:.9rem 1rem;margin-bottom:1.25rem;font-size:.9rem;
}
.pendente p{margin:0 0 .4rem}
.pendente p:last-child{margin:0}

.convite{margin-top:1.5rem;border-color:#dcebcd;background:#fbfdf8}
.convite h2{font-size:1.15rem;margin:0 0 .3rem}
.convite.feito{background:#eef7e6}
.vantagens{
  margin:1rem 0 1.25rem;padding-left:1.15rem;
  font-size:.92rem;line-height:1.8;color:var(--tinta);
}