/* Versão 3, Mesa Posta: a vontade da foto grande com a rapidez do botão no cartão. */
:root {
  --cor-fundo: var(--creme);
  --cor-texto: var(--cacau);
  --cor-texto-suave: var(--cacau-medio);
  --cor-superficie: #FFFBF5;
  --cor-valor-borda: #A8947D;
  --cor-foco: var(--acao);
  --cor-faixa: var(--preto);
  --cor-faixa-texto: #F6EFE3;
  --cor-abas: var(--preto);
  --cor-abas-texto: #F6EFE3;
  --cor-abas-marca: #D79B52;
  --cor-ver-pedido: var(--preto);
  --raio-botao: 1.75rem;
}
#faixa-previa { border-bottom: 1px solid rgba(246, 239, 227, .28); }
:focus-visible { outline-color: #D79B52; }
.cartao :focus-visible, .corpo :focus-visible { outline-color: var(--acao); }

/* Capa: a mesa preta da foto continua no fundo escuro, onde mora o texto. */
.capa { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 56vh; min-height: 56svh; background: var(--preto); color: #FFFFFF; overflow: hidden; }
.capa-foto { position: absolute; left: 0; right: 0; top: 3.25rem; height: 12.75rem; }
.capa-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.capa-foto::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to bottom, #29292A 0, rgba(41, 41, 42, 0) 10%, rgba(41, 41, 42, 0) 86%, #29292A 100%); }
.capa-topo { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .75rem 1rem 0; margin-bottom: auto; }
.capa-topo img { width: 5.25rem; }
.capa-topo .btn-letra, .faixa-pagina .btn-letra { background: var(--preto); color: #FFFFFF; border-color: #FFFFFF; }
.capa-topo .btn-letra[aria-pressed="true"], .faixa-pagina .btn-letra[aria-pressed="true"] { background: #FFFFFF; color: var(--preto); }
.capa-texto { position: relative; padding: 11.75rem 1rem 1.25rem; }
@media (max-height: 700px) {
  .capa-foto { height: 9.5rem; }
  .capa-texto { padding-top: 8.5rem; }
}
.capa-texto h1 { font-family: var(--fonte-titulo); font-size: 2.5rem; font-weight: 800; line-height: 1.04; }
.capa-texto p { margin-top: .5rem; }
.capa-texto .btn { margin-top: .875rem; display: flex; width: 100%; }

.faixa-pagina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem 1rem; background: var(--preto); }
.faixa-pagina img { width: 5.5rem; }

.corpo { padding-bottom: 1rem; }
.secao { padding: 2rem 1rem 0; }
.secao-cabeca { display: flex; align-items: center; gap: .625rem; }
.secao-cabeca img { width: 2.75rem; height: auto; flex: none; }
.secao-cabeca h1, .secao-cabeca h2 { font-family: var(--fonte-titulo); font-size: 2.125rem; font-weight: 800; line-height: 1.08; }
.secao-frase { margin-top: .5rem; font-size: 1.25rem; line-height: 1.35; }
.secao-aviso { margin-top: .625rem; padding: .625rem .875rem; background: #EADFCC; border-radius: .625rem; font-weight: 700; line-height: 1.3; }
.secao-conta { margin-top: .625rem; font-weight: 700; }
.pilha { display: grid; gap: 1.25rem; margin-top: 1rem; }

.cartao { background: var(--branco-quente); border-radius: 1.125rem; overflow: hidden; border: 1px solid #E2D5C1; }
.cartao-foto { position: relative; aspect-ratio: 4 / 3; background: var(--preto); }
.cartao-foto img { width: 100%; height: 100%; object-fit: cover; }
.etiqueta { position: absolute; right: .75rem; bottom: .75rem; padding: .25rem .75rem; background: var(--creme); color: var(--cacau); border-radius: .5rem; font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.etiqueta-longa { left: .75rem; font-size: 1.125rem; text-align: center; }
.cartao-texto { padding: .875rem 1rem 0; }
.cartao-texto h3 { font-family: var(--fonte-titulo); font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.cartao-texto .desc { margin-top: .375rem; color: var(--cacau-medio); }
.cartao-texto .aviso { margin-top: .5rem; font-weight: 700; }
.controles { padding: .875rem 1rem 1rem; }
.controles .grupo + .grupo { margin-top: .75rem; }
.serve { margin-top: .625rem; font-weight: 700; }
.no-pedido { margin-top: .625rem; font-weight: 700; }
.no-pedido.vazio { visibility: hidden; }
/* O lugar do botão tem altura fixa: "Adicionar" vira mais e menos sem mover o resto. */
.vaga { margin-top: .875rem; min-height: 3.5rem; }
.vaga .btn { display: flex; width: 100%; }

.convite { margin: 2rem 1rem 0; border-radius: 1.125rem; overflow: hidden; background: var(--preto); color: #FFFFFF; }
.convite-foto { aspect-ratio: 16 / 9; }
.convite-foto img { width: 100%; height: 100%; object-fit: cover; }
.convite-texto { padding: 1rem; }
.convite h2 { font-family: var(--fonte-titulo); font-size: 2rem; font-weight: 800; line-height: 1.08; }
.convite p { margin: .375rem 0 .875rem; }
.ver-todas { margin-top: 1rem; }
.btn-escuro { background: transparent; color: var(--cacau); border-color: var(--cacau); }

.rodape { margin-top: 2.25rem; padding: 1.5rem 1rem; background: var(--preto); color: #F6EFE3; }
.rodape p + p { margin-top: .625rem; }
.escolha { padding: 1.5rem 1rem 2rem; background: var(--preto); color: #FFFFFF; border-top: 1px solid rgba(246, 239, 227, .28); }
.escolha p { font-family: var(--fonte-titulo); font-size: 1.75rem; font-weight: 700; margin-bottom: .625rem; }