/* Sanches — BIO PRIME
   Conceito: do decalque à pele. Tudo o que é desenho nasce em roxo de decalque e vira tinta;
   o âmbar da lâmpada do estúdio só acende para ação e para o mapa do corpo. Fundo preto. */

:root {
  --fundo: #000000;          /* fundo: preto, padrão das páginas de tatuador */
  --cedro: #1A1410;          /* superfície: folha da peça, placeholders */
  --osso: #F2E8DA;           /* texto (17.3:1 no preto) */
  --sepia: #C2AE96;          /* apoio (9.8:1 no preto) */
  --lampada: #F2A93B;        /* ação e região acesa (texto preto em cima: 10.5:1) */
  --lampada-funda: #D98E22;
  --decalque: #8E72F2;       /* roxo do stencil: traços, contornos, progresso (5.8:1) */
  --decalque-claro: #B7A4FF; /* roxo em texto pequeno (9.8:1) */
  --linha: rgb(242 232 218 / 0.16);
  --linha-forte: rgb(242 232 218 / 0.34);

  --f-alta: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-texto: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --motion-instant: 90ms;
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --motion-scene: 460ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-agulha: cubic-bezier(0.45, 0.05, 0.25, 1);  /* passada firme e constante, como a agulha */
  --ease-papel: cubic-bezier(0.7, 0, 0.2, 1);        /* o papel descola devagar e sai de uma vez */
  --ease-lampada: cubic-bezier(0.3, 0.7, 0.2, 1);

  --press-scale: 0.97;
  --gutter: 20px;
  --coluna: 560px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --press-scale: 1; }
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--fundo);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--osso);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--lampada);
  outline-offset: 3px;
  border-radius: 6px;
}

.coluna {
  width: 100%;
  max-width: var(--coluna);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.titulo {
  margin: 0;
  font-family: var(--f-alta);
  font-weight: 800;
  font-size: 40px;
  line-height: 0.95;
  letter-spacing: 0.005em;
}

.intro {
  margin-top: 12px;
  max-width: 36ch;
  color: var(--sepia);
  font-size: 16px;
}

.marco-scroll {
  position: absolute;
  top: 160px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* =========================================================
   Abertura: traço roxo -> tinta -> o papel sobe
   ========================================================= */

.abertura { display: none; }

.com-abertura .abertura {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  padding: 0 28px;
  background: var(--fundo);
  transform-origin: 50% 0;
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.7);
  animation: papel-sobe 640ms var(--ease-papel) 1300ms forwards;
  cursor: pointer;
}

/* a borda do papel: um fio roxo que só aparece quando ele descola */
.com-abertura .abertura::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--decalque);
}

.abertura-nome {
  width: min(78vw, 420px);
  height: auto;
  overflow: visible;
}

.letra {
  fill: var(--osso);
  fill-opacity: 0;
  stroke: var(--decalque);
  stroke-width: 22;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation:
    letra-traca 620ms var(--ease-agulha) calc(var(--i) * 70ms) forwards,
    letra-tinge 380ms var(--ease-standard) 940ms forwards;
}

.abertura-linha {
  display: block;
  width: min(78vw, 420px);
  height: 1px;
  background: var(--decalque);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: linha-corre 900ms var(--ease-agulha) 80ms forwards;
}

.abertura-pular {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(28px + var(--safe-bottom));
  text-align: center;
  font-size: 13px;
  color: var(--sepia);
  opacity: 0;
  animation: aparece 400ms var(--ease-standard) 500ms forwards;
}

@keyframes letra-traca { to { stroke-dashoffset: 0; } }
@keyframes letra-tinge { to { fill-opacity: 1; stroke: var(--osso); } }
@keyframes linha-corre { to { transform: scaleX(1); } }
@keyframes aparece { to { opacity: 1; } }
@keyframes papel-sobe {
  0% { transform: translateY(0) skewY(0); }
  100% { transform: translateY(-104%) skewY(-3deg); visibility: hidden; }
}
@keyframes papel-sai {
  to { transform: translateY(-104%) skewY(-3deg); visibility: hidden; }
}
@keyframes abertura-some { to { opacity: 0; visibility: hidden; } }

/* toque pula: o papel sai na hora */
.abertura-pulando .abertura { animation: papel-sai 420ms var(--ease-papel) forwards; }

/* reduzir movimento: o nome já vem pronto e a tela só esmaece */
.abertura-curta .abertura { animation: abertura-some 320ms var(--ease-standard) 650ms forwards; box-shadow: none; }
.abertura-curta .abertura::after { display: none; }
.abertura-curta .letra { animation: none; fill-opacity: 1; stroke: none; }
.abertura-curta .abertura-linha { animation: none; transform: none; }
.abertura-curta .abertura-pular { display: none; }

/* =========================================================
   Capa: o artista de borda a borda
   ========================================================= */

.capa {
  position: relative;
  max-width: var(--coluna);
  margin-inline: auto;
  padding-top: var(--safe-top);
}

.capa-quadro {
  position: relative;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 2px;
}

.capa-foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 40%;
  background: var(--cedro);
  transform-origin: 40% 35%;
}

/* o preto sobe do suéter para baixo e funde a foto na página */
.capa-quadro::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px;
  height: 58%;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.55) 30%, rgb(0 0 0 / 0.9) 58%, var(--fundo) 80%);
  pointer-events: none;
}

.capa-texto {
  position: relative;
  z-index: 1;
  margin-top: -128px;
  padding: 0 var(--gutter) 8px;
}

.capa-texto > * { text-shadow: 0 1px 14px rgb(0 0 0 / 0.5); }

.perfil {
  font-size: 15px;
  font-weight: 500;
  color: var(--sepia);
}

.nome {
  margin: 6px 0 10px;
  font-family: var(--f-alta);
  font-weight: 800;
  font-size: 92px;
  line-height: 0.82;
  letter-spacing: -0.005em;
}

.nome-mascara {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}

.nome-mascara > span { display: block; }

.proposta {
  max-width: 30ch;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 500;
}

.local {
  margin-top: 12px;
  font-size: 15px;
  color: var(--sepia);
}

.local i { margin-right: 4px; color: var(--osso); }

.capa-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 10px;
}

.ancora {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-color: var(--decalque);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 7px;
  touch-action: manipulation;
  transition: text-underline-offset var(--motion-fast) var(--ease-standard);
}

.ancora:active { text-underline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  /* a capa espera o papel subir: tudo fica pausado até .capa-viva */
  .js .capa-foto { animation: capa-entra 1500ms var(--ease-enter) both paused; }
  .js .nome-mascara > span { animation: nome-sobe 900ms var(--ease-enter) 80ms both paused; }
  .js .entra { animation: entra 700ms var(--ease-enter) calc(200ms + var(--d, 0) * 90ms) both paused; }
  .capa-viva .capa-foto,
  .capa-viva .nome-mascara > span,
  .capa-viva .entra { animation-play-state: running; }
}

@keyframes capa-entra { from { transform: scale(1.14); } }
@keyframes nome-sobe { from { transform: translateY(108%); } }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }

/* =========================================================
   Faixa: contorno de decalque que vira tinta com o scroll
   ========================================================= */

.faixa {
  overflow: hidden;
  padding: 64px 0 40px;
}

.faixa-linha {
  font-family: var(--f-alta);
  font-weight: 800;
  font-size: clamp(64px, 23vw, 128px);
  line-height: 0.92;
  white-space: nowrap;
}

.faixa-corre {
  position: relative;
  display: inline-block;
  padding-left: var(--gutter);
}

.faixa-volta { margin-top: 6px; }
.faixa-volta .faixa-corre { transform: translateX(-22%); }

.faixa-contorno {
  color: transparent;
  -webkit-text-stroke: 1.3px var(--decalque);
}

/* a tinta é uma cópia exata do contorno, revelada da esquerda para a direita */
.faixa-tinta {
  position: absolute;
  inset: 0;
  padding-left: var(--gutter);
  color: var(--osso);
}

/* sem timeline de scroll: a tinta entra de uma vez quando a faixa aparece */
.js .faixa-tinta { clip-path: inset(-25% 100% -25% 0); }
.js .faixa.is-in .faixa-tinta {
  clip-path: inset(-25% 0 -25% 0);
  transition: clip-path 1600ms var(--ease-agulha);
}

/* =========================================================
   Processo: palco preso + etapas que passam por cima
   ========================================================= */

.processo { padding-top: 40px; }

.processo-topo { margin-bottom: 28px; }

.processo-corpo { position: relative; }

.palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  max-width: var(--coluna);
  margin-inline: auto;
  overflow: hidden;
  background: var(--fundo);
}

html:not(.js) .palco { position: relative; height: 70vh; }

.quadro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition:
    opacity 700ms var(--ease-standard),
    transform 2400ms var(--ease-enter);
}

.quadro > img,
.quadro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quadro.is-ativo { opacity: 1; transform: none; }

.quadro-video {
  opacity: 0;
  transition: opacity 500ms var(--ease-standard);
}

.quadro-video.is-tocando { opacity: 1; }

/* véu: em cima para o fio da agulha, embaixo para o cartão da etapa */
.palco::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0) 22%, rgb(0 0 0 / 0) 52%, rgb(0 0 0 / 0.8) 100%);
  pointer-events: none;
}

.agulha {
  position: absolute;
  left: 14px;
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 12px;
  height: 44vh;
  height: 44svh;
  translate: 0 -50%;
}

.agulha-trilho {
  position: absolute;
  inset: 4px auto 4px 50%;
  width: 2px;
  translate: -50% 0;
  background: rgb(242 232 218 / 0.24);
}

.agulha-tinta {
  position: absolute;
  inset: 0;
  background: var(--decalque);
  transform: scaleY(var(--p, 0));
  transform-origin: 50% 0;
  transition: transform 700ms var(--ease-agulha);
}

.agulha-ponto {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fundo);
  border: 1.5px solid rgb(242 232 218 / 0.55);
  transition:
    background-color var(--motion-emphasis) var(--ease-standard),
    border-color var(--motion-emphasis) var(--ease-standard),
    transform var(--motion-emphasis) var(--ease-emphasis);
}

.agulha-ponto.is-feito { background: var(--decalque); border-color: var(--decalque); }
.agulha-ponto.is-atual { transform: scale(1.4); }

.etapas {
  position: relative;
  z-index: 2;
  max-width: var(--coluna);
  margin: 0 auto;
  margin-top: -100vh;
  margin-top: -100svh;
  padding: 0;
  list-style: none;
}

html:not(.js) .etapas { margin-top: 0; }

.etapa {
  display: flex;
  align-items: flex-end;
  min-height: 92vh;
  min-height: 92svh;
  padding: 0 var(--gutter) calc(108px + var(--safe-bottom)) 46px;
}

.etapa:last-child { min-height: 100vh; min-height: 100svh; }

.etapa-cartao {
  max-width: 34ch;
  padding: 16px 18px 18px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: rgb(0 0 0 / 0.74);
}

.js .etapa-cartao {
  opacity: 0.3;
  transform: translateY(12px);
  transition:
    opacity var(--motion-scene) var(--ease-standard),
    transform var(--motion-scene) var(--ease-enter);
}

.js .etapa.is-ativa .etapa-cartao { opacity: 1; transform: none; }

.etapa-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--decalque-claro);
  font-variant-numeric: tabular-nums;
}

.etapa-titulo {
  margin: 4px 0 6px;
  font-family: var(--f-alta);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
}

.etapa-cartao p:last-child { font-size: 16px; }

/* =========================================================
   Na pele: mapa do corpo + regiões + trilho
   ========================================================= */

.pele { padding-top: 56px; }

.mapa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 26px;
  margin-bottom: 14px;
}

.corpo {
  flex: none;
  width: 76px;
  height: auto;
  overflow: visible;
}

.parte {
  fill: rgb(242 232 218 / 0.04);
  stroke: rgb(194 174 150 / 0.55);
  stroke-width: 1.3;
}

.regiao {
  cursor: pointer;
  transition:
    fill var(--motion-emphasis) var(--ease-lampada),
    stroke var(--motion-emphasis) var(--ease-lampada);
}

.regiao.is-acesa { fill: var(--lampada); stroke: var(--lampada); }

.mapa-legenda { min-width: 0; }

.mapa-regiao {
  font-family: var(--f-alta);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  color: var(--lampada);
}

.mapa-nota {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
}

.mapa-conta {
  margin-top: 2px;
  font-size: 14px;
  color: var(--sepia);
  font-variant-numeric: tabular-nums;
}

.mapa-num { display: inline-block; }
.mapa-num.troca { animation: num-troca 340ms var(--ease-enter); }
@keyframes num-troca { from { opacity: 0; transform: translateY(70%); } }

.trilho-nav {
  display: flex;
  gap: 8px;
  margin-left: auto;
  align-self: flex-end;
}

html:not(.js) .trilho-nav,
html:not(.js) .regioes { display: none; }

.seta {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  background: transparent;
  color: var(--osso);
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}

.seta:active { transform: scale(var(--press-scale)); }
.seta:disabled { opacity: 0.35; cursor: default; }

.regioes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.chip {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: transparent;
  color: var(--osso);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color var(--motion-standard) var(--ease-standard),
    color var(--motion-standard) var(--ease-standard),
    border-color var(--motion-standard) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.chip:active { transform: scale(0.95); }
.chip[aria-pressed="true"] { background: var(--lampada); border-color: var(--lampada); color: var(--fundo); }

.trilho {
  --largura: min(78vw, 420px);
  display: flex;
  gap: 14px;
  margin: 0 auto;
  max-width: var(--coluna);
  padding: 4px calc((100% - var(--largura)) / 2) 8px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.trilho::-webkit-scrollbar { display: none; }

.peca {
  flex: 0 0 var(--largura);
  scroll-snap-align: center;
}

.js .peca {
  opacity: 0.45;
  transform: scale(0.92);
  transition:
    opacity var(--motion-scene) var(--ease-standard),
    transform 560ms var(--ease-enter);
}

.js .peca.is-ativa { opacity: 1; transform: none; }

.peca-abrir {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: var(--cedro);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.peca-abrir:active { transform: scale(var(--press-scale)); }

.peca-abrir img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.peca-fala {
  margin-top: 12px;
  padding-inline: 2px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--sepia);
}

.peca.is-ativa .peca-fala { color: var(--osso); }

/* =========================================================
   Traço fino: o sol da coluna se desenha
   ========================================================= */

.fino {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  gap: 18px;
  align-items: end;
  margin-top: 96px;
}

.fino-foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px 18px 18px;   /* arco fino, o oposto da peça cheia */
  background: var(--cedro);
}

.fino-desenho {
  display: block;
  width: 96px;
  height: auto;
  margin-bottom: 12px;
  overflow: visible;
}

.traco {
  fill: none;
  stroke: var(--osso);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.js .traco {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--ease-agulha) calc(var(--t) * 120ms);
}

.js .fino.is-in .traco { stroke-dashoffset: 0; }

.fino-texto p {
  margin-top: 10px;
  color: var(--sepia);
  font-size: 16px;
}

.fino > .btn-linha {
  grid-column: 1 / -1;
  justify-self: start;
}

/* =========================================================
   Onde
   ========================================================= */

.onde { margin-top: 88px; }

.cidades {
  margin: 20px 0 0;
  border-top: 1px solid var(--linha);
}

.cidade {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
}

.cidade dt {
  font-family: var(--f-alta);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
}

.cidade dd {
  margin: 0;
  font-size: 15px;
  color: var(--sepia);
  text-align: right;
}

.cidade:first-child dd { color: var(--osso); font-weight: 600; }

.studio { margin-top: 18px; font-size: 16px; }
.onde .btn-linha { margin-top: 14px; }

/* =========================================================
   Botões + gota de tinta no toque
   ========================================================= */

.btn-principal,
.btn-linha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--f-texto);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.btn-principal { background: var(--lampada); color: var(--fundo); }
.btn-principal i { font-size: 20px; }
.btn-principal:active { transform: scale(var(--press-scale)); background: var(--lampada-funda); }

.btn-linha {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--linha-forte);
  color: var(--osso);
  font-size: 15px;
}

.btn-linha:active { transform: scale(var(--press-scale)); }

@media (hover: hover) and (pointer: fine) {
  .btn-principal:hover { background: #F6B85A; }
  .btn-linha:hover,
  .seta:hover,
  .chip:hover { border-color: var(--osso); }
}

.btn-principal,
.btn-linha,
.chip,
.seta,
.copiar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.gota {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: -1;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  transform: scale(0);
  pointer-events: none;
  animation: gota 600ms var(--ease-enter) forwards;
}

@keyframes gota { to { transform: scale(1); opacity: 0; } }

/* =========================================================
   Orçamento: monte a mensagem
   ========================================================= */

.fim {
  margin-top: 96px;
  padding-top: 40px;
  padding-bottom: 40px;
  border-top: 1px solid var(--linha);
}

.fim-intro {
  margin-top: 14px;
  max-width: 34ch;
  color: var(--sepia);
}

.monte { display: none; }
.js .monte { display: block; margin-top: 24px; }

.escolha {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  min-width: 0;
}

.escolha legend {
  margin-bottom: 10px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--sepia);
}

.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opcao { position: relative; }

.opcao input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.opcao span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  font-size: 15px;
  transition:
    background-color var(--motion-standard) var(--ease-standard),
    color var(--motion-standard) var(--ease-standard),
    border-color var(--motion-standard) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.opcao:active span { transform: scale(0.95); }
.opcao input:checked + span { background: var(--osso); border-color: var(--osso); color: var(--fundo); font-weight: 600; }
.opcao input:focus-visible + span { outline: 3px solid var(--lampada); outline-offset: 3px; }

.previa {
  min-height: 3.1em;
  margin-top: 4px;
  padding-left: 12px;
  border-left: 2px solid var(--decalque);
  font-size: 15px;
  color: var(--sepia);
}

.previa.troca { animation: entra 360ms var(--ease-enter); }

.fim .btn-principal {
  width: 100%;
  margin-top: 22px;
}

.copiar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border: 1px dashed var(--linha-forte);
  border-radius: 999px;
  background: transparent;
  color: var(--osso);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    border-color var(--motion-standard) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.copiar:active { transform: scale(var(--press-scale)); }
.copiar.is-ok { border-style: solid; border-color: var(--decalque-claro); }
.copiar.is-ok i { color: var(--decalque-claro); }

.numero {
  margin-top: 12px;
  text-align: center;
  font-size: 15px;
  color: var(--sepia);
  font-variant-numeric: tabular-nums;
}

.js .numero { display: none; }
html:not(.js) .copiar { display: none; }

/* =========================================================
   Rodapé + selo
   ========================================================= */

.rodape {
  max-width: var(--coluna);
  margin-inline: auto;
  padding: 28px var(--gutter) calc(32px + var(--safe-bottom));
  border-top: 1px solid var(--linha);
  text-align: center;
  font-size: 13px;
  color: var(--sepia);
}

.credito {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 18px auto 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  color: var(--osso);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.credito-txt strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.selo-b2 {
  --seal-ink: currentColor;
  --seal-accent: var(--lampada);
  --seal-ring: 0.4 1.4;          /* pontilhado, como o decalque antes da agulha */
  --seal-font: var(--f-texto);
  flex: none;
  width: 72px;
  height: 72px;
  overflow: visible;
  transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.selo-borda,
.selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: 0.7; stroke-dasharray: var(--seal-ring); opacity: 0.75; }
.selo-texto {
  fill: var(--seal-ink);
  font-family: var(--seal-font);
  font-size: 6.3px;
  font-weight: 600;
  letter-spacing: 0.8px;
}
.selo-b { fill: var(--seal-ink); }
.selo-acento { fill: var(--seal-accent); }

.credito:active .selo-b2 { rotate: -10deg; }

.selo-giro {
  transform-box: view-box;
  transform-origin: 50px 50px;
}

@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

@media (prefers-reduced-motion: no-preference) {
  .selo-giro { animation: selo-gira 24s linear infinite; }
  .selo-b2 { animation: selo-flutua 4.8s ease-in-out infinite; }
  .selo-b2.is-still,
  .selo-b2.is-still .selo-giro,
  .is-page-hidden .selo-b2,
  .is-page-hidden .selo-giro { animation-play-state: paused; }
}

/* =========================================================
   CTA flutuante (Regra do CTA)
   ========================================================= */

.cta-flutuante {
  position: fixed;
  left: 50%;
  bottom: calc(16px + var(--safe-bottom));
  z-index: 20;
  min-height: 52px;
  padding: 0 26px;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.6);
  translate: -50% 16px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--motion-standard) var(--ease-exit),
    translate var(--motion-standard) var(--ease-exit),
    visibility 0s linear var(--motion-standard),
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.cta-flutuante.is-visivel {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--motion-emphasis) var(--ease-enter),
    translate var(--motion-emphasis) var(--ease-enter),
    visibility 0s,
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

/* =========================================================
   Folha da peça (dialog) + elemento compartilhado
   ========================================================= */

.folha {
  width: 100%;
  max-width: var(--coluna);
  max-height: 94vh;
  max-height: 94svh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--cedro);
  color: var(--osso);
  overscroll-behavior: contain;
}

.folha::backdrop { background: rgb(0 0 0 / 0.78); }

.folha[open] { animation: folha-sobe var(--motion-emphasis) var(--ease-enter); }
.folha[open]::backdrop { animation: folha-fade var(--motion-emphasis) var(--ease-standard); }
.folha.via-vt[open] { animation: none; }

@keyframes folha-sobe { from { transform: translateY(48px); opacity: 0; } }
@keyframes folha-fade { from { opacity: 0; } }

html:has(.folha[open]) { overflow: hidden; }

.folha-corpo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px var(--gutter) calc(20px + var(--safe-bottom));
}

.folha-fechar {
  position: absolute;
  top: 24px;
  right: calc(var(--gutter) + 8px);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.72);
  color: var(--osso);
  font-size: 20px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.folha-fechar:active { transform: scale(var(--press-scale)); }

.folha-foto {
  width: auto;
  max-width: 100%;
  height: min(62vh, 640px);
  height: min(62svh, 640px);
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  object-fit: cover;
  border-radius: 16px;
  background: var(--fundo);
}

.folha-titulo {
  margin: 6px 0 0;
  font-family: var(--f-alta);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  color: var(--lampada);
}

.folha-fala { font-size: 16px; }
.folha .btn-principal { margin-top: 6px; }

::view-transition-group(peca-foto) {
  animation-duration: 440ms;
  animation-timing-function: var(--ease-emphasis);
}

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 240ms; }

/* =========================================================
   Scroll ligado ao movimento (onde o navegador suporta)
   ========================================================= */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* a capa fica para trás e escurece enquanto a página sobe */
    .capa-quadro {
      animation: capa-rola linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }

    /* as linhas da faixa correm em sentidos opostos e a tinta enche o contorno;
       tudo preso à mesma linha do tempo, a da faixa */
    .faixa { view-timeline-name: --faixa; }
    .faixa-corre {
      animation: faixa-anda linear both;
      animation-timeline: --faixa;
      animation-range: cover 0% cover 100%;
    }
    .faixa-volta .faixa-corre { animation-name: faixa-volta; }
    .js .faixa-tinta {
      animation: tinta-enche linear both;
      animation-timeline: --faixa;
      animation-range: cover 20% cover 58%;
    }
  }
}

@keyframes capa-rola { to { transform: translateY(10%); opacity: 0.3; } }
@keyframes faixa-anda { from { transform: translateX(6%); } to { transform: translateX(-30%); } }
@keyframes faixa-volta { from { transform: translateX(-34%); } to { transform: translateX(2%); } }
@keyframes tinta-enche { from { clip-path: inset(-25% 100% -25% 0); } to { clip-path: inset(-25% 0 -25% 0); } }

/* =========================================================
   Telas
   ========================================================= */

@media (min-width: 560px) {
  .capa-foto { border-radius: 0 0 22px 22px; }
  .nome { font-size: 104px; }
}

@media (max-width: 359px) {
  :root { --gutter: 16px; }
  .nome { font-size: 78px; }
  .capa-texto { margin-top: -112px; }
  .fino { grid-template-columns: 1fr; }
  .fino-foto { max-width: 220px; }
}

/* =========================================================
   Reduzir movimento: mesmo conteúdo, troca por estado
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .quadro { transform: none; transition: opacity 160ms linear; }
  .quadro-video { display: none; }
  .agulha-tinta,
  .agulha-ponto { transition: none; }
  .js .etapa-cartao { transform: none; transition: opacity 160ms linear; }
  .js .faixa-tinta { clip-path: none; animation: none; }
  .js .traco { stroke-dashoffset: 0; transition: none; }
  .regiao,
  .js .peca { transition: none; }
  .js .peca { transform: none; }
  .mapa-num.troca,
  .previa.troca { animation: none; }
  .gota { display: none; }
  .cta-flutuante,
  .cta-flutuante.is-visivel { translate: -50% 0; }
  .folha[open] { animation-name: folha-fade; }
  .credito:active .selo-b2 { rotate: none; }
  .trilho { scroll-behavior: auto; }
}