/* Benquista Joias · página do link da bio · spec: docs/spec/09-SPEC-pagina-link-da-bio.md */

@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url(fontes/cormorant-italico-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fontes/montserrat-variavel.woff2) format('woff2');
}

:root {
  color-scheme: dark;
  --vinho: #6b2138;
  --vinho-claro: #7a2842;
  --vinho-escuro: #3a0f1d;
  --creme: #f2efea;
  --creme-alto: #f8f5f0;
  --creme-baixo: #e4d9cb;
  --creme-linha: rgba(242, 239, 234, .55);
  --ouro: #d8c3a5;
  --serifa: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --texto: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mola: cubic-bezier(.2, .8, .2, 1);
  /* brilho do CRM do ShowDeLive (sombraDoBrilho, força 2,1, cor creme), com as contas já feitas:
     anel de 1px + luz que se espalha para fora (+ luz por dentro nos botões de contorno) */
  --halo-fora: 0 0 0 1px rgb(242 239 234 / .5), 0 0 37.8px .2px rgb(242 239 234);
  --halo-dentro: inset 0 0 29.4px -6px rgb(242 239 234 / .945);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--vinho-escuro); }
body { color: var(--creme); font-family: var(--texto); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }

.tela {
  position: relative; display: flex; flex-direction: column; align-items: center;
  min-height: 100vh; min-height: 100svh; overflow: hidden;
  padding: env(safe-area-inset-top, 0px) 16px calc(18px + env(safe-area-inset-bottom, 0px));
  touch-action: pan-y pinch-zoom;
  background: radial-gradient(120% 80% at 50% 30%, var(--vinho-claro) 0%, var(--vinho) 35%, var(--vinho-escuro) 100%);
}
.conteudo { display: flex; flex-direction: column; align-items: center; width: 100%; }
.marca { margin: 44px 0 0; line-height: 0; }
.logo { display: block; width: 150px; height: auto; opacity: .95; }
.conteudo > a .logo { margin-top: 44px; }
.frase { margin: 10px 0 0; text-align: center; font-family: var(--serifa); font-style: italic; font-weight: 500; font-size: 24px; opacity: .92; }

/* a pedra: o pôster já vem no HTML; o 3D entra por cima depois do 1º quadro */
.palco { position: relative; width: 100%; height: 264px; margin-top: 6px; display: flex; justify-content: center;
         cursor: grab; -webkit-tap-highlight-color: transparent; }
.palco .poster { display: block; height: 100%; width: auto; transition: opacity .5s ease; }
.palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s ease; }
.palco.pronto canvas { opacity: 1; }
.palco.pronto .poster { opacity: 0; }

/* botões */
.botoes { display: flex; flex-direction: column; gap: 12px; width: min(420px, 92%); margin-top: 4px; }
.botao {
  --rx: 0deg; --ry: 0deg; --desce: 0px; --esc: 1; --lx: 50%; --ly: 50%;
  position: relative; display: block; overflow: hidden; isolation: isolate; text-align: center; text-decoration: none;
  border-radius: 18px; padding: 16px 10px 13px; font-weight: 600; letter-spacing: .12em; font-size: 14px; text-transform: uppercase;
  color: var(--vinho-escuro); background: linear-gradient(180deg, var(--creme-alto), var(--creme-baixo));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35), inset 0 -3px 0 rgba(107, 33, 56, .15);
  transform: perspective(600px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--desce)) scale(var(--esc));
  transition: transform .22s var(--mola), box-shadow .3s var(--mola), border-color .3s;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.botao > span { position: relative; z-index: 2; display: block; }
.botao small { display: block; margin-top: 2px; font-family: var(--serifa); font-style: italic; font-weight: 500; font-size: 17px;
               text-transform: none; letter-spacing: 0; color: var(--vinho); }
/* luz dourada no ponto do toque (botão do grupo) */
.botao::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
                background: radial-gradient(150px circle at var(--lx) var(--ly), rgba(216, 195, 165, .6), rgba(216, 195, 165, 0) 70%); }
.botao.aceso::after { opacity: 1; }
.botao.apertado { --esc: .965; --desce: 1px; }

/* botão do grupo: reflexo que passeia sem parar (o único efeito permanente da página) */
.botao.principal::before { content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 55%; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .95) 80%, rgba(255, 255, 255, 0) 88%),
    linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 246, 232, .6) 22%, #fff 38%, #fff 44%, rgba(255, 246, 232, .6) 58%, rgba(255, 255, 255, 0) 72%);
  transform: translateX(-120%) skewX(-18deg); animation: reflexo 2.6s linear infinite; }
@keyframes reflexo { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(205%) skewX(-18deg); } }
.botao.principal.aceso { box-shadow: var(--halo-fora), 0 12px 30px rgba(0, 0, 0, .35), inset 0 -3px 0 rgba(107, 33, 56, .15); }
.botao.principal.apertado { box-shadow: var(--halo-fora), 0 5px 14px rgba(0, 0, 0, .35), inset 0 -2px 0 rgba(107, 33, 56, .15); }

/* botões de contorno: o brilho do ShowDeLive só acende quando aperta (Lidy, 25/09) */
.botao.contorno { background: transparent; color: var(--creme); border: 1.5px solid var(--creme-linha); box-shadow: none; padding: 14px 10px; font-size: 13px;
                  transition: transform .22s var(--mola), box-shadow 200ms ease, border-color 200ms ease; }
.botao.contorno::after { display: none; }
.botao.contorno.aceso, .botao.contorno.apertado { border-color: var(--creme); box-shadow: var(--halo-fora), var(--halo-dentro); }

/* "em breve": aviso, não link. O brilho fica inteiro, só o texto fica mais apagado */
.botao.breve { cursor: default; }
.botao.breve > span { opacity: .55; }
.botao.breve em { display: block; width: max-content; margin: 6px auto 0; font-style: normal; font-size: 10px; letter-spacing: .14em;
                  border: 1px solid rgba(242, 239, 234, .6); border-radius: 20px; padding: 2px 8px; transition: background-color .3s; }

.botao:focus-visible, .rodape a:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
@media (hover: hover) {
  .botao:hover { --desce: -2px; }
  .botao.principal:not(.aceso):hover { box-shadow: 0 18px 38px rgba(0, 0, 0, .42), inset 0 -3px 0 rgba(107, 33, 56, .15); }
  .botao.breve:hover { --desce: 0px; }
}

/* os botões sobem um depois do outro quando a página abre */
.botoes.entrada .botao { animation: sobe .8s var(--mola) both; }
.botoes.entrada .botao:nth-child(2) { animation-delay: .12s; }
.botoes.entrada .botao:nth-child(3) { animation-delay: .24s; }
@keyframes sobe { from { translate: 0 18px; opacity: .35; } }
/* o balanço do "em breve" vem depois da entrada, para vencer se tocar logo que a página abre */
.botao.breve.balanca { animation: balanca .45s var(--mola); }
.botao.breve.balanca em { background: rgba(242, 239, 234, .22); }
@keyframes balanca { 0%, 100% { translate: 0 0; } 20% { translate: -5px 0; } 45% { translate: 4px 0; } 70% { translate: -2px 0; } }

/* rodapé (Decreto 7.962/2013): no fluxo da página, legível */
.rodape { margin-top: auto; padding-top: 28px; width: 100%; text-align: center; font-size: 12px; line-height: 1.7; letter-spacing: .04em; opacity: .78; }
.rodape address, .rodape p { font-style: normal; margin: 0; }
.rodape a { color: inherit; text-decoration: underline; text-decoration-color: rgba(242, 239, 234, .45); text-underline-offset: 2px; }

/* tela baixa (iPhone SE dentro do Instagram): os botões aparecem sem rolar */
@media (max-height: 640px) {
  .marca, .conteudo > a .logo { margin-top: 26px; }
  .palco { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .botao { transition: box-shadow .2s, border-color .2s; }
  .botao.principal::before { animation: none; display: none; }
  .botoes.entrada .botao, .botao.breve.balanca { animation: none; }
  .palco .poster, .palco canvas { transition: none; }
}

/* página de privacidade */
.texto { width: min(620px, 100%); margin: 36px auto 0; font-size: 15px; line-height: 1.65; }
.texto h1 { font-family: var(--serifa); font-style: italic; font-weight: 500; font-size: 30px; margin: 18px 0 8px; text-align: center; }
.texto h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 26px 0 6px; color: var(--ouro); }
.texto p, .texto li { opacity: .92; }
.texto ul { padding-left: 20px; margin: 6px 0; }
.texto a { color: var(--creme); text-underline-offset: 2px; }
.voltar { display: inline-block; margin-top: 30px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }

/* números que não podem quebrar no meio (CNPJ, telefone) */
.inteiro { white-space: nowrap; }