/* Lelet Barbosa — BIO PRIME
   Conceito: o papel de fundo do estúdio dela.
   A página inteira é o cacau do fundo infinito em que ela posa com a câmera; as fotos ficam
   sobre ele como provas. A abertura é a lente: as lâminas do diafragma, no mesmo cacau,
   se abrem a partir do rosto e da câmera, o foco trava e o nome aparece no escuro da folhagem.
   O dourado da luz de fim de tarde fica reservado para chamar no WhatsApp. */

:root {
  /* cor */
  --papel: #7A5243;       /* fundo: o papel cacau do estúdio */
  --papel-2: #704A3C;     /* lâmina alternada do diafragma (o mesmo papel na sombra) */
  --sombra: #21160F;      /* hero, CTA final, texto sobre a luz */
  --creme: #F7ECE2;       /* texto: 5.8:1 sobre o papel, 15.2:1 sobre a sombra */
  --leite: #EFD9C6;       /* apoio: 4.95:1 sobre o papel */
  --luz: #F2B35A;         /* ação: a luz dourada do retrato; sombra sobre ela 9.6:1 */
  --luz-funda: #DE9C42;   /* luz pressionada */

  /* tipo */
  --f-nome: "Marcellus", "Optima", "Candara", Georgia, serif;
  --f-texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* motion */
  --m-instant: 80ms;
  --m-fast: 140ms;
  --m-standard: 220ms;
  --m-emphasis: 320ms;
  --m-scene: 420ms;
  --m-diafragma: 1150ms;
  --t-diafragma: 180ms;
  --m-revelar: 1100ms;
  --m-foto: 3200ms;                                /* quanto cada foto fica na tela na apresentação */
  --ease-lente: cubic-bezier(0.55, 0, 0.15, 1);   /* motor da lente: arranca firme e assenta sem quicar */
  --ease-revelar: cubic-bezier(0.3, 0, 0.2, 1);   /* revelador: a imagem demora a aparecer e então assenta */
  --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);
  --shift: 12px;
  --press-scale: 0.97;

  --gutter: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --shift: 0px;
    --press-scale: 1;
    --m-scene: 200ms;
  }
}

/* ---------- base ---------- */

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

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

body {
  margin: 0;
  background: var(--sombra);
  color: var(--creme);
  font: 400 17px/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg { display: block; max-width: 100%; }

h1, h2, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; }

a,
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

.pular {
  position: absolute;
  top: calc(8px + var(--safe-top));
  left: 8px;
  z-index: 50;
  padding: 12px 16px;
  background: var(--creme);
  color: var(--sombra);
  font-weight: 600;
  translate: 0 -200%;
}
.pular:focus-visible { translate: none; }

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

.pagina {
  max-width: 560px;
  margin: 0 auto;
  overflow-x: clip;
  background: var(--papel);
}

.titulo {
  font: 400 clamp(31px, 8.6vw, 40px)/1.08 var(--f-nome);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.apoio {
  margin-top: 10px;
  max-width: 34ch;
  color: var(--leite);
}

.cena {
  padding: 56px var(--gutter) 0;
}

.link-linha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: opacity var(--m-fast) var(--ease-standard);
}
.link-linha:active { opacity: 0.65; }

/* ---------- cena 1 · hero ---------- */

.hero {
  background: var(--sombra);
}

.hero-media {
  position: relative;
  height: 487px;                         /* fallback */
  height: min(125vw, 72svh, 700px);
  min-height: 400px;
  overflow: hidden;
  background: #2C2116;                   /* tom da foto enquanto ela carrega */
}

.hero-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;              /* igual ao xMidYMid slice da íris: lente e foto no mesmo ponto */
}

/* o alto da foto é folhagem no escuro; um véu leve garante a leitura do nome */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(33 22 15 / 0.55), rgb(33 22 15 / 0) 34%),
    linear-gradient(to top, var(--sombra), rgb(33 22 15 / 0) 18%);
  pointer-events: none;
}

.nome {
  position: absolute;
  top: calc(20px + var(--safe-top));
  right: var(--gutter);
  z-index: 1;
  display: grid;
  justify-items: end;
  font: 400 clamp(44px, 13vw, 62px)/0.94 var(--f-nome);
  letter-spacing: 0.01em;
  color: var(--creme);
  text-shadow: 0 1px 18px rgb(33 22 15 / 0.6);
}

.nome-linha { display: block; }

.hero-texto {
  padding: 18px var(--gutter) 36px;
}

.hero-linha {
  max-width: 30ch;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
}

.hero-pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  margin-top: 12px;
}

.perfil,
.ancora {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: var(--leite);
  text-decoration: none;
  transition: opacity var(--m-fast) var(--ease-standard);
}
.ancora {
  color: var(--creme);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.perfil:active,
.ancora:active { opacity: 0.65; }

/* ---------- abertura: o diafragma ----------
   Primeiro quadro: a foto já está lá, vista por uma abertura hexagonal sobre o rosto e a câmera;
   o resto é o papel cacau, em seis lâminas. O script decide:
   .abertura      foto pronta → as lâminas giram e se abrem, o foco trava, o nome sobe, o texto chega (~2s)
   .sem-abertura  foto atrasou → a íris só some
   sem script     a íris some sozinha em 2,6s (iris-sai) e o texto aparece (revela-seguro)
   Com reduced motion não há íris. */

.iris {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;                            /* acima do nome: a lente revela o nome ao abrir */
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.lamina {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translateY(-160px);         /* abertura inicial: 160 de apótema, rosto e câmera à vista */
}
.laminas path { fill: var(--papel); }
.laminas .lamina-b path { fill: var(--papel-2); }
.arestas path {
  fill: none;
  stroke: rgb(247 236 226 / 0.26);
  stroke-width: 1.6;
}

.foco {
  transform-box: view-box;
  transform-origin: 0 0;
  opacity: 0;
  color: var(--creme);
}
.foco path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
  .js .iris {
    display: block;
    animation: iris-sai 0s linear 2.6s forwards;
  }
  .js .hero-texto > * {
    opacity: 0;
    animation: revela-seguro 0s 2.6s forwards;
  }

  .abertura .iris { animation: none; }
  .abertura .lamina { animation: diafragma var(--m-diafragma) var(--ease-lente) var(--t-diafragma) both; }
  .abertura .foco { animation: foco 1500ms var(--ease-standard) 100ms both; }
  .abertura .nome-linha { animation: nome-sobe 760ms var(--ease-enter) 620ms both; }
  .abertura .nome-linha + .nome-linha { animation-delay: 720ms; }
  .abertura .hero-texto > * {
    animation: chegar var(--m-scene) var(--ease-enter) both;
    animation-delay: calc(1200ms + var(--i, 0) * 90ms);
  }

  .sem-abertura .iris { animation: iris-sai 240ms linear both; }
  .sem-abertura .hero-texto > * { animation: chegar var(--m-scene) var(--ease-enter) 120ms both; }
}
.hero-texto > :nth-child(2) { --i: 1; }

@keyframes diafragma {
  from { transform: rotate(0deg) translateY(-160px); }
  to   { transform: rotate(-38deg) translateY(-700px); }
}
@keyframes foco {
  0%   { opacity: 0; transform: scale(1.55); }
  14%  { opacity: 1; }
  52%  { transform: scale(1); color: var(--creme); }
  58%  { color: var(--luz); }
  84%  { opacity: 1; color: var(--luz); }
  100% { opacity: 0; transform: scale(1); color: var(--luz); }
}
@keyframes nome-sobe {
  from { opacity: 0; transform: translateY(0.3em); }
  to   { opacity: 1; transform: none; }
}
@keyframes chegar {
  from { opacity: 0; transform: translateY(var(--shift)); }
  to   { opacity: 1; transform: none; }
}
@keyframes iris-sai { to { opacity: 0; visibility: hidden; } }
@keyframes revela-seguro { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .nome { animation: some-aparece 200ms linear both; }
}
@keyframes some-aparece { from { opacity: 0; } }

/* ---------- cena 2 · plural ---------- */

.plural { padding-top: 48px; }

.tira {
  display: flex;
  gap: 12px;
  margin: 28px calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter) 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tira::-webkit-scrollbar { display: none; }

.quadro {
  flex: 0 0 66%;
  scroll-snap-align: start;
}
.quadro img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
  background: var(--papel-2);
}
.palavra {
  margin-top: 10px;
  font: 400 23px/1.2 var(--f-nome);
}

/* apresentação: a tira anda sozinha uma vez e cada foto se revela como papel no revelador.
   Antes de chegar, a foto é uma imagem latente: clara, quase só contorno (o leite em screen por cima).
   Ao chegar, o véu escoa e a foto assenta. A classe .apresenta só existe com JS e sem reduced motion. */
.quadro {
  position: relative;
  overflow: hidden;            /* corta a foto enquanto ela assenta da escala 1.05 */
}
.quadro img { transform-origin: 50% 100%; }   /* cresce para cima e para os lados, nunca sobre a palavra */
.tira.apresenta .quadro::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  aspect-ratio: 3 / 4;
  border-radius: 2px;
  background: var(--leite);
  mix-blend-mode: screen;
  opacity: 0.86;
  pointer-events: none;
}
.tira.apresenta .quadro img { transform: scale(1.05); }
.tira.apresenta .palavra { opacity: 0.4; }

.tira.apresenta .quadro.is-revelada::before {
  opacity: 0;
  transition: opacity var(--m-revelar) var(--ease-revelar);
}
.tira.apresenta .quadro.is-revelada img {
  transform: none;
  transition: transform 1500ms var(--ease-enter);
}
.tira.apresenta .quadro.is-revelada .palavra {
  opacity: 1;
  transition: opacity var(--m-scene) var(--ease-enter) 500ms;
}

.apresentacao {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.apresentacao[hidden] { display: none; }

/* um segmento por foto: quais já passaram, qual está na tela */
.progresso {
  display: flex;
  flex: 1;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.progresso li {
  display: block;               /* sem marcador: ele criaria uma linha de texto dentro do traço */
  flex: 1;
  height: 2px;
  overflow: hidden;
  background: rgb(247 236 226 / 0.25);
}
.progresso span {
  display: block;
  height: 100%;
  background: var(--creme);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.progresso .is-feita span { transform: scaleX(1); }
.progresso .is-atual span { animation: enche var(--m-foto) linear forwards; }
.apresentacao.is-pausada .progresso .is-atual span { animation-play-state: paused; }
.apresentacao.is-livre .progresso .is-atual span { animation: none; transform: scaleX(1); }
@keyframes enche { to { transform: scaleX(1); } }

.apresentacao-botao {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--creme);
  font-size: 15px;
  cursor: pointer;
  transition: background-color var(--m-fast) var(--ease-standard);
}
.apresentacao-botao:active { background: rgb(33 22 15 / 0.22); }

.plural .link-linha { margin-top: 8px; }

/* ---------- cena 3 · em vídeo ---------- */

/* a faixa rola de lado; com JS ela desliza sozinha em loop (cópias antes e depois) e cada vídeo
   boia um pouco, fora de fase com o vizinho. Formatos diferentes, centrados: provas soltas no papel. */
.reels {
  margin: 20px calc(-1 * var(--gutter)) 0;
  padding: 10px 0 6px;                  /* folga para a boia não cortar */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.reels::-webkit-scrollbar { display: none; }

.reels-faixa {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  padding: 0 var(--gutter);
}

.reel {
  flex: none;
  width: 180px;
}
.reel--largo { width: 300px; }

@media (prefers-reduced-motion: no-preference) {
  .reels.flutua .reel { animation: boia 6s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -2.1s); }
  .reels.flutua.is-parado .reel,
  .is-page-hidden .reels.flutua .reel { animation-play-state: paused; }
}
@keyframes boia {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

.reels-controle {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.reels-controle[hidden] { display: none; }

.reel-capa,
.reel-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 2px;
  overflow: hidden;
  background: var(--sombra);
}
.reel--largo .reel-capa,
.reel--largo .reel-video { aspect-ratio: 16 / 9; }

.reel-capa {
  text-decoration: none;
  transition: transform var(--m-fast) var(--ease-standard);
}
.reel-capa:active { transform: scale(0.98); }
.reel-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reel-video { object-fit: cover; }
.reel--largo .reel-video { object-fit: contain; }

.reel-play {
  position: absolute;
  left: 10px;
  top: 10px;                     /* no alto: não cobre o título das capas nem fica sob o CTA flutuante */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgb(33 22 15 / 0.72);
  color: var(--creme);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.reel-play .fa-play { font-size: 12px; }

.reel figcaption { margin-top: 10px; min-height: 5.6em; }   /* legendas de 2 ou 3 linhas não desalinham a faixa */
.reel figcaption strong {
  display: block;
  font: 400 19px/1.25 var(--f-nome);
}
.reel figcaption small {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--leite);
}

/* ---------- cena 3 · serviços ---------- */

.lista-servicos {
  margin-top: 22px;
  border-bottom: 1px solid rgb(247 236 226 / 0.2);
}

.servico {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 12px 6px 12px 0;
  border-top: 1px solid rgb(247 236 226 / 0.2);
  text-decoration: none;
  transition: background-color var(--m-fast) var(--ease-standard);
}
.servico:active { background-color: rgb(33 22 15 / 0.2); }
.servico img {
  width: 64px;
  height: 80px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--papel-2);
}
.servico-txt strong {
  display: block;
  font: 400 21px/1.2 var(--f-nome);
}
.servico-txt small {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--leite);
}
.servico .fa-whatsapp {
  justify-self: end;
  font-size: 22px;
  color: var(--leite);
}

/* ---------- cena 4 · Milho Verde ---------- */

.campo { padding-top: 64px; }

.campo-aerea {
  margin: 0 calc(-1 * var(--gutter));
}
.campo-aerea img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--papel-2);
}

.campo-texto { margin-top: 22px; }
.campo-texto p {
  margin-top: 12px;
  max-width: 36ch;
}

.campo-quadros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 24px;
}
.campo-quadros img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  background: var(--papel-2);
}

.depoimento {
  margin-top: 28px;
  padding-left: 18px;
  border-left: 2px solid var(--luz);
}
.depoimento p {
  font: 400 21px/1.38 var(--f-nome);
}
.depoimento footer { margin-top: 6px; }
.depoimento a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  color: var(--leite);
  text-underline-offset: 4px;
}

/* ---------- cena 5 · sobre ---------- */

.sobre {
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
  gap: 22px 18px;
  padding-top: 64px;
}
.sobre-foto {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  background: var(--papel-2);
}
.sobre-titulo {
  align-self: end;
  font-size: clamp(27px, 7.4vw, 36px);
}
.sobre-texto {
  grid-column: 1 / -1;
}
.sobre-texto p + p { margin-top: 12px; }
.sobre-texto .link-linha { margin-top: 10px; }

/* ---------- cena 6 · final ---------- */

.final {
  margin-top: 64px;
  padding: 56px var(--gutter) 44px;
  background: var(--sombra);
}

.final-frase {
  font: 400 clamp(29px, 8vw, 38px)/1.16 var(--f-nome);
  text-wrap: balance;
}
.final-apoio {
  margin-top: 14px;
  color: var(--leite);
}

.final-acoes {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition:
    transform var(--m-fast) var(--ease-standard),
    background-color var(--m-fast) var(--ease-standard);
}
.btn:active { transform: scale(var(--press-scale)); }
.btn .fa-whatsapp { font-size: 21px; }

.btn-luz {
  background: var(--luz);
  color: var(--sombra);
}
.btn-luz:active { background: var(--luz-funda); }

.btn-contorno {
  border: 1.5px solid rgb(247 236 226 / 0.55);
  color: var(--creme);
}
.btn-contorno:active { background: rgb(247 236 226 / 0.1); }

.redes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 22px;
}
.redes a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: var(--leite);
  text-decoration: none;
  transition: opacity var(--m-fast) var(--ease-standard);
}
.redes a:active { opacity: 0.65; }

/* ---------- CTA flutuante ---------- */

.cta-flutuante {
  position: fixed;
  left: 50%;
  bottom: calc(16px + var(--safe-bottom));
  z-index: 20;
  min-width: 232px;
  white-space: nowrap;      /* com left: 50% a largura disponível cai pela metade; a pílula não quebra */
  border-radius: 999px;
  box-shadow: 0 10px 26px rgb(33 22 15 / 0.42);
  translate: -50% 16px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--m-standard) var(--ease-exit),
    translate var(--m-standard) var(--ease-exit),
    visibility 0s linear var(--m-standard),
    transform var(--m-fast) var(--ease-standard),
    background-color var(--m-fast) var(--ease-standard);
}
.cta-flutuante.is-visivel {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--m-emphasis) var(--ease-enter),
    translate var(--m-emphasis) var(--ease-enter),
    visibility 0s,
    transform var(--m-fast) var(--ease-standard),
    background-color var(--m-fast) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  .cta-flutuante,
  .cta-flutuante.is-visivel { translate: -50% 0; }
}

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

.rodape {
  padding: 8px var(--gutter) calc(32px + var(--safe-bottom));
  background: var(--sombra);
  color: var(--leite);
  font-size: 14px;
  text-align: center;
}

.credito {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 18px auto 0;
  color: var(--creme);
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  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(--luz);
  --seal-ring: 2.2 1.6;          /* perfuração de filme */
  --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; }
}
@media (prefers-reduced-motion: reduce) {
  .credito:active .selo-b2 { rotate: none; }
}

/* ---------- telas maiores: a coluna fica no centro, no escuro ---------- */

@media (min-width: 600px) {
  .pagina { box-shadow: 0 0 0 1px rgb(247 236 226 / 0.06); }
}