/* =========================================================
   Lista de presentes — usa as variáveis e fontes de styles.css
   ========================================================= */

/* a home rola em seções travadas; esta página rola normal */
html{
  scroll-snap-type:none;
  scroll-behavior:auto;
}

body{
  background:
    radial-gradient(120% 60% at 50% 0%, #FFFCF6 0%, var(--creme) 55%, var(--creme-quente) 100%);
  min-height:100vh;
  min-height:100dvh;
}
body.travado{overflow:hidden;}

.pagina{
  max-width:64rem;
  margin-inline:auto;
  padding:clamp(1.2rem,5vw,2.5rem) clamp(1.1rem,5vw,2rem) clamp(2.5rem,8vw,4rem);
}

/* ---------------- cabeçalho ---------------- */
.voltar-convite{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  text-indent:.26em;
  color:var(--tinta-suave);
  text-decoration:none;
  padding:.5rem 0;
  transition:color .25s ease;
}
.voltar-convite:hover{color:var(--terracota);}
.voltar-convite:focus-visible{outline:2px solid var(--terracota);outline-offset:3px;}

.cabecalho{
  text-align:center;
  margin-top:clamp(1rem,4vw,1.8rem);
}
.cabecalho-nomes{
  font-family:var(--script);
  font-size:clamp(1.9rem,8vw,2.6rem);
  color:var(--terracota);
  line-height:1.1;
}
.cabecalho h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem,6.5vw,2.1rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--vinho);
  margin:.5rem 0 0;
}
.cabecalho-texto{
  font-size:clamp(1rem,4.3vw,1.12rem);
  line-height:1.6;
  color:var(--tinta-suave);
  max-width:32rem;
  margin-inline:auto;
}
.cabecalho-pix{
  display:inline-block;
  margin-top:clamp(.9rem,3.5vw,1.2rem);
  padding:.45rem 1rem;
  border:1px solid rgba(132,134,112,.4);
  border-radius:2px;
  font-family:var(--sans);
  font-size:.64rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  text-indent:.26em;
  color:var(--oliva);
}

/* ---------------- catálogo ---------------- */
.grade{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.7rem,3vw,1.3rem);
  margin-top:clamp(1.8rem,7vw,3rem);
}

.presente{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.55rem;
  padding:clamp(.6rem,2.5vw,.9rem) clamp(.6rem,2.5vw,.9rem) clamp(.9rem,3.5vw,1.2rem);
  background:var(--creme-quente);
  border:1px solid rgba(132,134,112,.28);
  border-radius:2px;
  font:inherit;
  color:inherit;
  text-align:center;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.presente:hover{
  transform:translateY(-3px);
  border-color:rgba(235,95,36,.55);
  box-shadow:0 14px 28px -18px rgba(59,48,43,.55);
}
.presente:active{transform:translateY(0);}
.presente:focus-visible{outline:2px solid var(--terracota);outline-offset:3px;}

.presente-foto{
  width:100%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  background:#FFFCF6;
  border:1px solid rgba(132,134,112,.2);
  overflow:hidden;
}
/* ilustração: cabe inteira, com respiro */
.presente-foto img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:10%;
}
/* foto de verdade (qualquer arquivo que não seja .svg): preenche o quadro */
.presente-foto--real img{
  object-fit:cover;
  padding:0;
}

.presente-nome{
  font-family:var(--serif);
  font-size:clamp(1rem,4.2vw,1.15rem);
  line-height:1.3;
  color:var(--tinta);
  margin-top:.2rem;
}
.presente-piada{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(.93rem,3.9vw,1.04rem);
  line-height:1.35;
  color:var(--tinta-suave);
  margin-top:.1rem;
}

.presente-preco{
  font-family:var(--sans);
  font-size:clamp(.8rem,3.4vw,.9rem);
  letter-spacing:.1em;
  color:var(--terracota);
  margin-top:auto;
  padding-top:.35rem;
}

.sem-script{
  margin-top:2rem;
  text-align:center;
  font-style:italic;
  color:var(--vinho);
}

.rodape{
  margin-top:clamp(2.5rem,9vw,4rem);
  text-align:center;
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  text-indent:.32em;
  color:var(--tinta-suave);
  opacity:.75;
}

/* ---------------- modal ---------------- */
.modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:clamp(.8rem,4vw,2rem);
}
.modal[hidden]{display:none;}

.modal-fundo{
  position:absolute;
  inset:0;
  background:rgba(45,35,30,.62);
}

.modal-caixa{
  position:relative;
  width:min(100%,27rem);
  max-height:calc(100dvh - 1.6rem);
  overflow-y:auto;
  padding:clamp(1.6rem,6vw,2.2rem) clamp(1.1rem,5vw,2rem) clamp(1.4rem,5vw,2rem);
  background:var(--creme);
  border:1px solid rgba(132,134,112,.35);
  outline:1px solid rgba(132,134,112,.16);
  outline-offset:5px;
  box-shadow:0 26px 60px -30px rgba(30,22,18,.8);
  text-align:center;
  animation:surgir .22s ease-out;
}
/* o foco vai para o diálogo ao abrir; mantém a borda decorativa,
   sem anel de foco (quem navega por teclado já está dentro do modal) */
.modal-caixa:focus,
.modal-caixa:focus-visible{
  outline:1px solid rgba(132,134,112,.16);
  outline-offset:5px;
}
@keyframes surgir{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

.modal-fechar{
  position:absolute;
  top:.65rem;
  right:.65rem;
  width:2.4rem;
  height:2.4rem;
  display:grid;
  place-items:center;
  background:none;
  border:0;
  border-radius:50%;
  color:var(--tinta-suave);
  cursor:pointer;
  transition:color .2s ease, background-color .2s ease;
}
.modal-fechar:hover{color:var(--vinho);background:rgba(132,134,112,.12);}
.modal-fechar:focus-visible{outline:2px solid var(--terracota);outline-offset:2px;}
.modal-fechar svg{width:1.1rem;height:1.1rem;}

.modal-etiqueta{
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.38em;
  text-transform:uppercase;
  text-indent:.38em;
  color:var(--oliva);
}
.modal-caixa h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.4rem,6vw,1.75rem);
  line-height:1.25;
  color:var(--vinho);
  margin:.45rem 0 0;
}
.modal-piada{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.05rem,4.4vw,1.16rem);
  line-height:1.4;
  color:var(--tinta-suave);
  margin-top:.3rem;
}
.modal-piada[hidden]{display:none;}

.modal-valor{
  font-family:var(--sans);
  font-size:clamp(1.25rem,5.5vw,1.5rem);
  letter-spacing:.06em;
  color:var(--terracota);
  margin-top:.6rem;
}

.modal-qr{
  width:min(14rem,58vw);
  margin:clamp(1.1rem,4.5vw,1.5rem) auto 0;
  padding:.55rem;
  background:#fff;
  border:1px solid rgba(132,134,112,.3);
}
.modal-qr svg{display:block;width:100%;height:auto;}

.modal-instrucao{
  font-size:clamp(.92rem,3.9vw,1rem);
  line-height:1.5;
  color:var(--tinta-suave);
  margin-top:clamp(.8rem,3.5vw,1.1rem);
  max-width:22rem;
  margin-inline:auto;
}
.modal-instrucao strong{color:var(--vinho);font-weight:500;}

.modal-ou{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin:clamp(1.1rem,4.5vw,1.5rem) auto clamp(.7rem,3vw,.9rem);
  width:min(16rem,80%);
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--oliva);
}
.modal-ou::before,
.modal-ou::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(132,134,112,.4);
}

.modal-copia-rotulo{
  display:block;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  text-indent:.28em;
  color:var(--tinta-suave);
  margin-bottom:.5rem;
}

#pix-codigo{
  display:block;
  width:100%;
  resize:none;
  padding:.7rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.68rem;
  line-height:1.45;
  color:var(--tinta-suave);
  background:#FFFCF6;
  border:1px solid rgba(132,134,112,.3);
  border-radius:2px;
  word-break:break-all;
}
#pix-codigo:focus-visible{outline:2px solid var(--terracota);outline-offset:1px;}

.modal-copiar{
  width:100%;
  margin-top:.7rem;
  padding:.9rem 1rem;
  background:var(--terracota);
  color:var(--creme);
  border:1px solid var(--terracota);
  border-radius:2px;
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  text-indent:.26em;
  cursor:pointer;
  transition:background-color .22s ease;
}
.modal-copiar:hover{background:#D24F16;}
.modal-copiar:focus-visible{outline:2px solid var(--vinho);outline-offset:3px;}

.modal-aviso{
  margin-top:clamp(1.1rem,4.5vw,1.5rem);
  padding:clamp(.9rem,4vw,1.2rem);
  border:1px solid rgba(119,57,66,.35);
  background:rgba(243,149,43,.1);
  text-align:left;
  font-size:clamp(.9rem,3.8vw,.98rem);
  line-height:1.55;
  color:var(--tinta);
}
.modal-aviso p + p{margin-top:.5rem;}
.modal-aviso code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.85em;
  background:rgba(132,134,112,.16);
  padding:.1em .35em;
  border-radius:2px;
}

/* ---------------- telas maiores ---------------- */
@media (min-width:600px){
  .grade{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (min-width:900px){
  .grade{grid-template-columns:repeat(4,minmax(0,1fr));}
}

@media (prefers-reduced-motion:reduce){
  .presente{transition:none;}
  .modal-caixa{animation:none;}
}