/* Estilo da página de presentes.
 *
 * Arquivo separado de propósito: o css/estilo.css é do Construtor 1 e a
 * página de presentes é do Construtor 2. Assim os dois não editam o mesmo
 * arquivo. Carregado só em presentes.html.
 *
 * Vale tudo que vale no resto do site: escala áurea de espaço nos degraus
 * --e1 a --e7, nada de caixa alta, nada de fonte abaixo de 16px, botões de
 * 56px de altura e contraste AA. Os tokens vêm de estilo.css, que carrega
 * antes deste.
 */

.pix{margin-top:var(--e6); padding-top:var(--e5); border-top:1px solid var(--linha-fina)}
.pix-titulo{
  font-size:1.125rem; font-weight:500; font-style:italic; letter-spacing:.01em;
  line-height:1.6; color:var(--tinta-suave); margin-bottom:var(--e3);
}
/* O QR sai do gerador já em oliva sobre creme, então assenta no fundo da
   página sem moldura branca. O filete é só para separar do creme, e o
   respiro em volta é a zona de silêncio que o leitor precisa. */
.pix-qr{
  width:240px; height:auto; margin:var(--e4) auto 0;
  border:1px solid var(--linha-fina); padding:var(--e2);
}
.campo-pix{margin-top:var(--e4); text-align:left}
.campo-pix label{
  display:block; margin-bottom:var(--e2);
  font-size:1.0625rem; font-style:italic; color:var(--tinta-suave);
}
/* Código de 140 caracteres: fonte de largura fixa, porque é código e não
   frase, e corpo no piso de 16px, nunca abaixo. O seletor precisa carregar
   o input junto do nome da classe para empatar em peso com a regra
   .campo input[type=text] do estilo.css e vencer por vir depois. */
.campo-pix input.pix-codigo{
  width:100%; padding:var(--e3); border:2px solid var(--linha-fina);
  background:transparent; color:var(--tinta);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1rem; line-height:1.5; text-overflow:ellipsis;
}
.pix-aviso{
  display:block; margin-top:var(--e3);
  font-size:1.0625rem; font-style:italic; line-height:1.6; color:var(--tinta-suave);
}
.pix-aviso:empty{margin-top:0}
/* Os 27 presentes vêm separados por ambiente da casa. Os atalhos ficam no
   alto para quem procura uma coisa específica não rolar a lista inteira. */
.atalhos{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--e2); margin-top:var(--e5);
}
.atalho{
  display:inline-flex; align-items:center; gap:var(--e2);
  min-height:2.75rem; padding:var(--e2) var(--e3);
  border:1px solid var(--linha); text-decoration:none;
  font-size:1.0625rem; line-height:1.4; color:var(--tinta);
}
.atalho:hover,.atalho:focus-visible{background:rgba(120,119,58,.08)}
.atalho-n{font-size:1rem; color:var(--tinta-suave)}
.grupo{margin-top:var(--e6)}
.grupo-titulo{
  margin:0; padding-bottom:var(--e3); border-bottom:1px solid var(--linha-fina);
  font-size:var(--t-medio); font-weight:500; line-height:1.3;
  letter-spacing:.01em; color:var(--tinta); text-align:left;
}
.presentes-lista{list-style:none; display:grid; gap:var(--e4); margin-top:var(--e5); text-align:center}
.presente{
  border:1px solid var(--linha-fina); padding:var(--e4);
  display:flex; flex-direction:column; align-items:center;
}
/* A ilustração vem do Aquarelista já dissolvendo nas bordas, então assenta
   direto no creme, sem moldura e sem fade por cima. */
/* O aspect-ratio guarda o lugar da ilustração antes de ela chegar, para o
   cartão não mudar de altura no meio do caminho. Não foi isto que resolveu
   o salto de layout da página, que vinha de outro lugar e está explicado
   em ferramentas/gerar-presentes.mjs; é só o cuidado devido. */
.presente-arte{width:min(100%,300px); aspect-ratio:1; margin:0 auto var(--e3)}
.presente-nome{font-size:var(--t-medio); font-weight:400; line-height:1.35; color:var(--tinta)}
.presente-desc{margin-top:var(--e1); font-size:1.0625rem; font-style:italic; line-height:1.6; color:var(--tinta-suave)}
.presente-valor{margin-top:var(--e2); font-size:1.25rem; font-weight:500; color:var(--tinta-suave)}
.presente-abrir{margin-top:var(--e4); width:100%}

/* As três formas de presentear ficam guardadas atrás do botão Presentear,
   para o cartão não virar uma pilha de cinco botões no celular. */
.presente-opcoes{
  width:100%; margin-top:var(--e4); padding-top:var(--e4);
  border-top:1px solid var(--linha-fina); text-align:left;
}
.opcao + .opcao{margin-top:var(--e5); padding-top:var(--e4); border-top:1px solid var(--linha-fina)}
.opcao-titulo{font-size:1.125rem; font-weight:500; line-height:1.5; color:var(--tinta)}
.opcao-texto{margin-top:var(--e1); font-size:1.0625rem; font-style:italic; line-height:1.6; color:var(--tinta-suave)}
.opcao-botoes{display:grid; grid-template-columns:1fr; gap:var(--e2); margin-top:var(--e3)}
.opcao-botoes + .opcao-botoes{margin-top:var(--e2)}
/* Respiro lateral curto de propósito: o texto mais longo daqui é
   Pagar R$ 3.999,99 (em breve), e com --e3 dos dois lados ele quebrava
   em quatro linhas dentro do cartão estreito. */
/* Link de texto dentro do cartão, com altura de alvo de toque: sozinho ele
   ficava com 21px de altura, repetido em cada um dos vinte e sete cartões. */
.link-alvo{display:inline-flex; align-items:center; min-height:2.75rem}
.botao-opcao{width:100%; font-size:1.0625rem; padding:var(--e2) var(--e2)}
.pix-chave{
  margin-top:var(--e3); padding:var(--e3); border:2px solid var(--linha-fina);
  font-size:1.125rem; line-height:1.5; color:var(--tinta); word-break:break-all; text-align:center;
}
.presente .pix-chave + .botao{margin-top:var(--e3); width:100%}
.marcador-exemplo{
  display:block; margin:var(--e4) auto 0; max-width:32rem; padding:var(--e3);
  border:2px dashed var(--linha); font-size:1.125rem; font-style:italic;
  line-height:1.6; color:var(--tinta-suave);
}
.voltar{margin-top:var(--e5)}


/* Estas três regras tinham ficado para trás no css/estilo.css quando o
   arquivo foi separado. Funcionavam, porque este carrega depois, mas
   moravam num arquivo que não é mais o dono delas. Achado do Construtor 2. */
@media (min-width:700px){
  .presentes-lista{grid-template-columns:1fr 1fr}
  .presente-arte{width:min(100%,260px)}
  /* Duas colunas só no bloco de Pix do fim da página, que ocupa a largura
     toda. Dentro do cartão não: a lista já está em duas colunas ali, e uma
     segunda divisão deixava cada botão com 104px e o texto em quatro
     linhas. Um botão por linha dentro do cartão, em qualquer tela. */
  .pix .opcao-botoes{grid-template-columns:1fr 1fr}
}


/* ---------- volta do Mercado Pago ----------
   Só existe na tela de quem acabou de pagar. Fica no topo do conteúdo, com
   respiro para a barra fixa não cobrir. */
/* A mesma coluna do resto da página, senão a caixa encosta nas bordas do
   aparelho. O scroll-margin é para a barra fixa não cobrir o título
   quando o script rola até aqui. */
.retorno{width:var(--coluna); margin:var(--e6) auto var(--e5); scroll-margin-top:6rem}
.retorno-caixa{
  padding:var(--e4); border:2px solid var(--linha);
  max-width:36rem; margin:0 auto; text-align:center;
}
.retorno-ok{border-color:var(--oliva)}
.retorno-atencao{border-style:dashed}
.retorno-titulo{font-size:var(--t-medio); font-weight:500; line-height:1.3; color:var(--tinta)}
.retorno-texto{margin-top:var(--e3); font-size:1.125rem; line-height:1.6; color:var(--tinta)}
.retorno-caixa .opcao-botoes{margin-top:var(--e4)}
.retorno-codigo{
  margin-top:var(--e4); font-size:1rem; font-style:italic;
  line-height:1.6; color:var(--tinta-suave); word-break:break-all;
}