/* =========================================================================
   convite.css — a página dedicada ao convite (/convite/)
   Vitrine escura: o papel é a única coisa iluminada da tela.
   ========================================================================= */

.vitrine{
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #17161b;
  background-image:
    radial-gradient(120% 90% at 50% 38%, #23222a 0%, #17161b 55%, #101015 100%);
  color: color-mix(in srgb, var(--papel) 72%, #17161b);
}

/* --------------------------------------------------------------- cabeçalho */

.vitrine__topo{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(.8rem, 2vw, 1.4rem) clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid rgba(251,250,247,.09);
}

.vitrine__marca{
  font-family: var(--display);
  font-size: 1.1rem;
  text-decoration: none;
  color: color-mix(in srgb, var(--papel) 88%, transparent);
  font-weight: 700;
  letter-spacing: -.01em;
}
.vitrine__marca span{ color: var(--magenta); font-style: italic; font-weight: 400; }

.vitrine__titulo{
  font-family: var(--display);
  font-size: clamp(.85rem, 2.4vw, 1.15rem);
  color: color-mix(in srgb, var(--papel) 80%, transparent);
  text-align: center;
}
.vitrine__data{ color: color-mix(in srgb, var(--papel) 45%, transparent); }

.vitrine__tela{
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid rgba(251,250,247,.16);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.vitrine__tela svg{ width: 1.05rem; height: 1.05rem; fill: none; stroke: color-mix(in srgb, var(--papel) 70%, transparent); stroke-width: 1.6; }
.vitrine__tela:hover{ background: rgba(251,250,247,.08); border-color: rgba(251,250,247,.3); }

@media (max-width: 620px){
  .vitrine__titulo{ display: none; }
}

/* ------------------------------------------------------------------ palco */

.vitrine__palco{
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vh, 4rem) clamp(1rem, 6vw, 5rem);
  min-height: 0;                       /* deixa o grid encolher de verdade */
}

/* o convite é um objeto sobre a mesa, não um pôster colado na parede:
   fica menor que a tela, com ar em volta.
   A medida vai no body para que as setas herdem e se posicionem sozinhas. */
.vitrine{
  --pag-a: min(58vh, 30rem, calc(30vw * 1.38));
  --pag-l: calc(var(--pag-a) / 1.38);
}
@media (max-width: 900px){
  .vitrine{
    --pag-l: min(20rem, 72vw);
    --pag-a: min(calc(var(--pag-l) * 1.38), 62vh);
  }
}

/* as setas ficam encostadas nas bordas da tela, longe do papel */
.vitrine .virar{
  border-color: rgba(251,250,247,.16);
  background: rgba(251,250,247,.06);
}
.vitrine .virar svg{ stroke: color-mix(in srgb, var(--papel) 75%, transparent); }
.vitrine .virar:hover{ background: var(--papel); border-color: var(--papel); }
.vitrine .virar:hover svg{ stroke: var(--tinta); }
.vitrine .virar[disabled]{ opacity: .18; }
.vitrine .virar[disabled]:hover{ background: rgba(251,250,247,.06); }
.vitrine .virar[disabled]:hover svg{ stroke: color-mix(in srgb, var(--papel) 75%, transparent); }
/* as setas ladeiam o papel e acompanham o livro quando ele desliza */
.vitrine .virar{
  translate: var(--desloca, 0) -50%;
  transition: background .2s, border-color .2s, translate var(--tempo) var(--curva);
}
.vitrine .virar--voltar{ left: max(.5rem, calc(50% - var(--pag-l) - 4.5rem)); }
.vitrine .virar--avancar{ right: max(.5rem, calc(50% - var(--pag-l) - 4.5rem)); }

@media (max-width: 900px){
  .vitrine .virar--voltar{ left: .4rem; }
  .vitrine .virar--avancar{ right: .4rem; }
  .vitrine .virar{ translate: 0 -50%; }
}

.vitrine__gesto{
  position: absolute;
  bottom: clamp(.2rem, 2vh, 1rem);
  left: 50%; translate: -50% 0;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: color-mix(in srgb, var(--papel) 40%, transparent);
  display: flex; align-items: center; gap: .6rem;
  transition: opacity .6s;
  pointer-events: none;
}
.vitrine__gesto span{ color: var(--magenta); animation: puxa 2.6s ease-in-out infinite; }
.vitrine__gesto.some{ opacity: 0; }

@keyframes puxa{
  0%, 100%{ transform: translateX(.3rem); opacity: .4; }
  50%     { transform: translateX(-.3rem); opacity: 1; }
}

/* ------------------------------------------------------------------- rodapé */

.vitrine__pe{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(.7rem, 2vw, 1.2rem) clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(251,250,247,.09);
  font-size: .72rem;
}

.indice ol{
  display: flex; gap: .35rem;
  list-style: none; margin: 0; padding: 0;
}
.indice button{
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, var(--papel) 42%, transparent);
  font: inherit;
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.indice button:hover{ color: var(--papel); border-color: rgba(251,250,247,.25); }
.indice button[aria-current="true"]{
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}

.vitrine__contador{
  text-transform: uppercase;
  letter-spacing: .22em;
  color: color-mix(in srgb, var(--papel) 62%, transparent);
  white-space: nowrap;
}

.vitrine__assinatura{
  color: color-mix(in srgb, var(--papel) 38%, transparent);
  text-align: right;
}
.vitrine__assinatura a{
  color: color-mix(in srgb, var(--papel) 70%, transparent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px){
  .vitrine__pe{ flex-wrap: wrap; justify-content: center; text-align: center; }
  .vitrine__assinatura{ width: 100%; text-align: center; }
}
@media (max-width: 520px){
  .indice{ display: none; }          /* no celular, o gesto basta */
}

.vitrine__semjs{
  padding: 2rem var(--margem);
  color: var(--papel);
  max-width: 40rem;
  margin-inline: auto;
}