/* Alisson Piscinas — o médico das piscinas
   Conceito: descer do raso ao fundo. A página clareia no topo e escurece a cada cena,
   como a água de uma piscina vista de cima. Toda mídia do trabalho real fica dentro da
   "pedra de borda". O único gesto ousado é o carrossel 3D dos reels. */

:root {
  /* cor */
  --raso: #EFF6F6;           /* fundo do topo, azulejo claro */
  --meia: #D6ECEE;           /* segunda profundidade */
  --funda: #0B355A;          /* cena dos reels */
  --funda-2: #082A4A;
  --fundo: #06213F;          /* cena de ação */
  --abismo: #041A33;         /* rodapé */
  --tinta: #0B2545;          /* texto no claro, 14:1 sobre raso */
  --tinta-2: #3D5670;        /* texto secundário no claro, 7:1 */
  --royal: #1747B8;          /* azul do uniforme, só na ação principal, 7,3:1 com branco */
  --royal-borda: #0D2F7E;
  --turquesa: #5FE0E3;       /* destaque no escuro */
  --espuma: #EAF6F7;         /* texto no escuro */
  --espuma-2: #A9C6D6;       /* texto secundário no escuro, 7:1 sobre funda */
  --pedra: #D8CDB9;          /* pedra de borda, moldura das mídias */
  --alga: #5B7A12;           /* estado "antes", 4,9:1 com branco */
  --foco: #1747B8;
  --foco-escuro: #5FE0E3;

  /* tipografia */
  --f-titulo: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-texto: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* espaço */
  --gutter: 20px;
  --maxw: 560px;
  --raio: 22px;

  /* motion */
  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --motion-scene: 450ms;
  --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);
  --shift-md: 14px;
  --press-scale: 0.98;

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

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

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--abismo); }
body {
  margin: 0;
  background: var(--abismo);
  color: var(--tinta);
  font: 400 17px/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: fixed; top: -80px; left: 12px; z-index: 50;
  padding: 12px 18px; border-radius: 12px;
  background: var(--tinta); color: var(--espuma); text-decoration: none; font-weight: 600;
}
.pular:focus { top: calc(12px + var(--safe-top)); }

.pagina {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--raso);
  overflow: hidden;
}

/* pedra de borda: moldura de toda mídia do trabalho real */
.borda {
  border: 6px solid var(--pedra);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--meia);
}
.borda-escura { background: var(--funda-2); }

/* ---------- 1. HERO ---------- */
.hero { position: relative; background: var(--raso); }

.hero-media {
  position: relative;
  /* a altura desconta o bloco de texto para a marca e a proposta caberem na primeira tela */
  height: clamp(300px, calc(100vh - 300px), 620px);
  height: clamp(300px, calc(100svh - 300px), 620px);
  overflow: hidden;
  background: #0E5F66;
}
.hero-poster, .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-video { opacity: 0; transition: opacity var(--motion-scene) var(--ease-standard); }
.hero-video.is-playing { opacity: 1; }

.video-toggle {
  position: absolute;
  top: calc(12px + var(--safe-top));
  right: 12px;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgb(4 26 51 / 0.55);
  color: #fff;
  font-size: 15px;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.video-toggle:active { transform: scale(0.92); }
.video-toggle:focus-visible { outline-color: #fff; }

.hero-texto {
  position: relative;
  margin-top: -36px;
  padding: 0 var(--gutter) 40px;
  background: var(--raso);
  border-radius: 28px 28px 0 0;
}

.marca {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  transform: translateY(-30px);
  margin-bottom: -14px;
}
.avatar {
  flex: none;
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 4px solid var(--pedra);
  background: var(--meia);
  object-fit: cover;
}
.marca-nome {
  font-family: var(--f-titulo);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
}
.marca-nome i { color: var(--royal); font-size: 15px; margin-left: 2px; }
.marca-user { font-size: 15px; color: var(--tinta-2); }

h1 {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(31px, 9vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 13ch;
}
.hero-apoio {
  margin-top: 14px;
  max-width: 36ch;
  color: var(--tinta-2);
}

/* botões */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}
/* botão como uma pastilha: aresta inferior visível que afunda no toque */
.btn-principal {
  background: var(--royal);
  color: #fff;
  box-shadow: 0 4px 0 var(--royal-borda);
}
.btn-principal i { font-size: 22px; }
.btn-principal:active {
  transform: translateY(3px) scale(var(--press-scale));
  box-shadow: 0 1px 0 var(--royal-borda);
}
@media (hover: hover) and (pointer: fine) {
  .btn-principal:hover { background: #1B52CF; }
}

/* ---------- cenas: a água escurece a cada seção ---------- */
.cena {
  padding: 48px var(--gutter) 56px;
}
.cena h2 {
  font-family: var(--f-titulo);
  font-weight: 500;
  font-size: clamp(24px, 7vw, 29px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 17ch;
}
.cena-apoio {
  margin-top: 10px;
  max-width: 38ch;
  color: var(--tinta-2);
}

.cena-raso { background: var(--raso); padding-top: 8px; }
.cena-meia { background: linear-gradient(var(--raso), var(--meia) 140px); }
.cena-funda {
  background: linear-gradient(var(--meia), var(--funda) 160px);
  color: var(--espuma);
  padding-top: 96px;
}
.cena-funda .cena-apoio { color: var(--espuma-2); }
.cena-funda + .cena-funda {
  background: linear-gradient(var(--funda), var(--funda-2) 200px);
  padding-top: 24px;
}
.cena-fundo {
  background: linear-gradient(var(--funda-2), var(--fundo) 160px);
  color: var(--espuma);
}
.cena-fundo .cena-apoio { color: var(--espuma-2); }
.cena-funda :focus-visible,
.cena-fundo :focus-visible,
.rodape :focus-visible { outline-color: var(--foco-escuro); }

/* ---------- 2. ANTES E DEPOIS ---------- */
.ba {
  position: relative;
  margin-top: 24px;
  aspect-ratio: 3 / 4;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.ba img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba-antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-linha {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(4 26 51 / 0.18);
  pointer-events: none;
}
.ba-alca {
  position: absolute;
  top: 50%; left: 50%;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: #fff;
  color: var(--tinta);
  font-size: 18px;
  box-shadow: 0 6px 18px rgb(4 26 51 / 0.28);
  transition: transform var(--motion-fast) var(--ease-standard);
}
.ba.is-arrastando .ba-alca { transform: scale(1.08); }
.ba-rotulo {
  position: absolute;
  top: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-standard);
}
.ba.sem-antes .ba-rotulo-antes,
.ba.sem-depois .ba-rotulo-depois { opacity: 0; }
.ba-rotulo-antes { left: 12px; background: var(--alga); color: #fff; }
.ba-rotulo-depois { right: 12px; background: #fff; color: var(--tinta); }
.ba-range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;   /* o arrasto é por pointer events; o range fica para teclado */
}
.ba:has(.ba-range:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
.ba-dica {
  margin-top: 12px;
  font-size: 15px;
  color: var(--tinta-2);
  text-align: center;
}

/* ---------- 3. ETAPAS ---------- */
.etapas {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  counter-reset: etapa;
}
.etapa {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 16px;
  align-items: center;
  counter-increment: etapa;
}
.etapa-foto {
  width: 104px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-width: 4px;
  border-radius: 18px;
}
.etapa h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.etapa h3::before {
  content: counter(etapa);
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--espuma);
  font-size: 13px;
  vertical-align: 2px;
}
.etapa p { margin-top: 4px; font-size: 16px; color: var(--tinta-2); }

/* ---------- 4. DECK 3D DE REELS (assinatura) ---------- */
.deck {
  --card: min(58vw, 240px);
  margin: 28px calc(var(--gutter) * -1) 0;
}
.deck-trilho {
  position: relative;   /* referência do offsetLeft dos cards */
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 12px calc(50% - var(--card) / 2) 8px;
}
.deck-trilho::-webkit-scrollbar { display: none; }

.deck-card {
  --d: 0;      /* distância do centro, em cards (-2 a 2), escrita pelo JS */
  --ad: 0;     /* módulo de --d */
  flex: 0 0 var(--card);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  position: relative;
}
/* tambor visto de fora: os cards laterais giram para trás e recuam */
.deck-face {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 6px solid var(--pedra);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--funda-2);
  box-shadow: 0 24px 40px -18px rgb(0 0 0 / 0.55);
  transform:
    perspective(900px)
    translateX(calc(var(--d) * -16%))
    translateZ(calc(var(--ad) * -120px))
    rotateY(calc(var(--d) * 36deg));
  will-change: transform;
}
.deck-face img, .deck-face video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.deck-face video { opacity: 0; transition: opacity var(--motion-standard) var(--ease-standard); }
.deck-face video.is-playing { opacity: 1; }
.deck-sombra {
  position: absolute; inset: 0;
  background: var(--abismo);
  opacity: calc(var(--ad) * 0.55);
  pointer-events: none;
}
.deck-legenda {
  padding: 16px 4px 0;
  opacity: calc(1 - var(--ad) * 1.4);
}
.deck-legenda h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.deck-legenda a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  color: var(--turquesa);
  text-underline-offset: 3px;
}

.deck-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.deck-seta, .deck-pausa {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgb(169 198 214 / 0.4);
  color: var(--espuma);
  transition: transform var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}
.deck-seta:active, .deck-pausa:active { transform: scale(0.92); background: rgb(95 224 227 / 0.14); }
.deck-seta:disabled { opacity: 0.35; }
.deck-posicao { min-width: 5ch; text-align: center; font-size: 15px; color: var(--espuma-2); }

/* ---------- 5. QUEM CUIDA ---------- */
.quem { display: grid; gap: 24px; padding-bottom: 64px; }
.quem-foto {
  aspect-ratio: 4 / 5;
  transform: rotate(-2deg);
}
.quem-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; }
.quem-texto p { margin-top: 12px; color: var(--espuma-2); max-width: 40ch; }
.link-sub {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 8px;
  color: var(--turquesa);
  font-weight: 600;
  text-underline-offset: 4px;
}

/* ---------- 5b. LINHA ULTRACLOR: produtos boiando ---------- */
.cena-funda.linha {
  background: var(--funda-2);
  padding-top: 8px;
}
.linha-palco {
  --boia-h: 184px;
  --linha-agua: 0.56;          /* fração da altura do produto que fica acima d'água */
  position: relative;
  margin: 28px calc(var(--gutter) * -1) 0;
  padding-top: 18px;
}
/* sem loop (sem JS ou com reduced motion): fila parada, deslizada com o dedo */
.linha-trilho {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 var(--gutter) 4px;
  scroll-padding-inline: var(--gutter);
}
.linha-trilho::-webkit-scrollbar { display: none; }
.produto {
  flex: none;
  width: 150px;
  margin-right: 14px;
  scroll-snap-align: start;
}
.produto a {
  display: block;
  text-align: center;
  text-decoration: none;
  border-radius: 16px;
}
.produto-boia {
  display: block;
  height: var(--boia-h);
  transition: transform var(--motion-fast) var(--ease-standard);
}
.produto-boia img {
  width: auto;
  height: 100%;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgb(0 0 0 / 0.28));
}
.produto a:active .produto-boia { transform: scale(0.95); }
.produto-nome {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--espuma);
}
.produto-uso {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--espuma-2);
}

/* a água cobre a metade de baixo dos produtos, na frente deles */
.agua {
  position: absolute;
  left: 0; right: 0;
  top: calc(18px + var(--boia-h) * var(--linha-agua) - 5px);
  height: calc(var(--boia-h) * (1 - var(--linha-agua)) + 12px);
  overflow: hidden;
  pointer-events: none;
}
.agua::before {
  content: "";
  position: absolute;
  inset: 5px 0 0;
  /* fica mais funda e some embaixo, sem borda seca */
  background: linear-gradient(rgb(95 224 227 / 0.26), rgb(14 95 102 / 0.58) 62%, rgb(14 95 102 / 0));
}
.agua-onda {
  position: absolute;
  top: 0; left: 0;
  width: 200%;
  height: 10px;
}
.agua-onda-corpo { fill: rgb(95 224 227 / 0.26); }
.agua-onda-linha {
  fill: none;
  stroke: rgb(234 246 247 / 0.75);
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
}
/* reflexo de luz na água (cáustica) */
.agua-brilho {
  position: absolute;
  top: 5px; bottom: 0; left: 0;
  width: calc(100% + 240px);
  background:
    radial-gradient(ellipse 34px 7px at 30px 14px, rgb(234 246 247 / 0.55), transparent 70%),
    radial-gradient(ellipse 22px 5px at 92px 34px, rgb(234 246 247 / 0.45), transparent 70%);
  background-size: 120px 48px;
  mix-blend-mode: screen;
  opacity: 0.45;
}

.linha-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.linha-dica { font-size: 15px; color: var(--espuma-2); }
.linha-pausa {
  flex: none;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgb(169 198 214 / 0.4);
  color: var(--espuma);
  transition: transform var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}
.linha-pausa:active { transform: scale(0.92); background: rgb(95 224 227 / 0.14); }

/* com loop (JS ativo e movimento permitido): corrente contínua + boia */
.linha-palco.is-loop {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.is-loop .linha-trilho {
  width: max-content;
  overflow: visible;
  padding: 0;
  scroll-snap-type: none;
  animation: corrente var(--dur, 60s) linear infinite;
}
.is-loop .produto-boia img {
  animation: boia 4.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.73s);
}
.is-loop .agua-onda { animation: onda 5.5s linear infinite; }
.is-loop .agua-brilho { animation: brilho 9s linear infinite; }

/* pausa: fora da tela, aba oculta, botão ou dedo segurando */
.is-parado .linha-trilho,
.is-parado .produto-boia img,
.is-parado .agua-onda,
.is-parado .agua-brilho,
.is-loop .linha-trilho:active,
.is-loop .linha-trilho:active .produto-boia img { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .is-loop .linha-trilho:hover,
  .is-loop .linha-trilho:hover .produto-boia img { animation-play-state: paused; }
}

@keyframes corrente { to { transform: translateX(-50%); } }
@keyframes boia {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-9px) rotate(1.4deg); }
}
@keyframes onda { to { transform: translateX(-50%); } }
@keyframes brilho { to { transform: translateX(-240px); } }

.linha :focus-visible { outline-color: var(--foco-escuro); }

/* ---------- 6. AÇÃO ---------- */
.acao-principal { margin-top: 24px; }
.opcoes { display: grid; gap: 12px; margin-top: 16px; }
.opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 14px 16px 14px 18px;
  border-radius: 16px;
  background: rgb(234 246 247 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(95 224 227 / 0.28);
  text-decoration: none;
  transition: transform var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}
.opcao:active { transform: scale(var(--press-scale)); background: rgb(95 224 227 / 0.16); }
.opcao-texto { display: grid; gap: 2px; }
.opcao-texto strong { font-weight: 600; font-size: 17px; }
.opcao-texto span { font-size: 15px; color: var(--espuma-2); }
.opcao i {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--royal);
  color: #fff;
  font-size: 22px;
}
@media (hover: hover) and (pointer: fine) {
  .opcao:hover { background: rgb(234 246 247 / 0.1); }
}

.telefone { margin-top: 20px; color: var(--espuma-2); font-size: 16px; }
.telefone a {
  display: inline-block;
  padding: 12px 0;
  color: var(--espuma);
  font-weight: 600;
  text-underline-offset: 3px;
}

.redes {
  display: grid;
  margin-top: 28px;
  border-top: 1px solid rgb(169 198 214 / 0.2);
}
.rede {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 2px;
  border-bottom: 1px solid rgb(169 198 214 / 0.2);
  text-decoration: none;
}
.rede > i { width: 24px; text-align: center; font-size: 20px; color: var(--turquesa); }
.rede > span { display: grid; }
.rede strong { font-weight: 600; font-size: 16px; }
.rede span span { font-size: 14px; color: var(--espuma-2); }
.rede:active { background: rgb(95 224 227 / 0.08); }

/* ---------- RODAPÉ + selo ---------- */
.rodape {
  padding: 32px var(--gutter) calc(32px + var(--safe-bottom));
  background: var(--abismo);
  color: var(--espuma-2);
  text-align: center;
  font-size: 14px;
}
.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(--espuma);
  text-decoration: none;
}
.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(--turquesa);
  --seal-ring: 0.4 1.4;          /* pontilhado, como bolhas */
  --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; }
}

/* ---------- reveal (só com JS) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--shift-md));
  transition:
    opacity var(--motion-scene) var(--ease-enter),
    transform var(--motion-scene) var(--ease-enter);
}
.js .quem-foto[data-reveal] { transform: translateY(var(--shift-md)) rotate(-2deg); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .quem-foto[data-reveal].is-in { transform: rotate(-2deg); }

/* ---------- reduced motion: tudo parado e plano ---------- */
@media (prefers-reduced-motion: reduce) {
  .deck-face { transform: none; will-change: auto; }
  .deck-sombra { opacity: 0; }
  .deck-legenda { opacity: 1; }
  .deck-card:not(.is-ativo) .deck-face { box-shadow: none; }
  .deck-card:not(.is-ativo) { opacity: 0.6; }
  .quem-foto, .js .quem-foto[data-reveal], .js .quem-foto[data-reveal].is-in { transform: none; }
  .credito:active .selo-b2 { rotate: none; }
}

/* ---------- telas estreitas (320px) ---------- */
@media (max-width: 359px) {
  :root { --gutter: 16px; }
  .btn { font-size: 16px; padding: 0 14px; gap: 8px; }
}

/* ---------- telas largas ---------- */
@media (min-width: 600px) {
  body { padding: 24px 0; }
  .pagina { border-radius: 28px; box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.6); }
  .rodape { border-radius: 0 0 28px 28px; }
}