/* ==========================================================================
   BASE DOS SLIDES — palco, barra de progresso, troca e o celular desenhado
   --------------------------------------------------------------------------
   Tamanho de referência: 393 x 660 px, o que sobra de um iPhone quando o
   link abre pelo WhatsApp ou pelo Safari (medido pelo designer em
   10/10/2026: uns 640 a 660 px de altura útil, não os 852 da tela inteira).
   No computador, o palco fica em pé no meio da janela.
   ========================================================================== */

@font-face {
  font-family: "Newsreader";
  src: url("fontes/newsreader-400-600.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fontes/hanken-grotesk-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fora);
  color: var(--texto);
  font-family: var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
img, video { max-width: 100%; }
[hidden] { display: none !important; }   /* um "display" do CSS venceria o hidden */
h1, h2, h3, p, ul, ol, figure { margin: 0; }

/* ---------- o palco ---------- */
.deck {
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--fundo);
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  cursor: pointer;
}
@media (min-width: 560px) {
  .deck {
    inset: auto;
    top: 50%;
    left: 50%;
    width: min(440px, calc(100dvh * 0.6));
    height: min(100dvh - 32px, 860px);
    transform: translate(-50%, -50%);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  }
}

/* ---------- a barra de progresso ---------- */
.deck__barra {
  position: absolute;
  z-index: 5;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 14px;
  right: 14px;
  display: flex;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.deck__barra li {
  flex: 1 1 0;
  height: 3px;
  border-radius: 2px;
  background: var(--barra-fundo);
  overflow: hidden;
}
.deck__barra li::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--barra);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .36s cubic-bezier(.22, 1, .36, 1);
}
.deck__barra li.feito::after,
.deck__barra li.agora::after { transform: scaleX(1); }
.deck[data-barra="clara"] .deck__barra li { background: rgba(255, 255, 255, .34); }
.deck[data-barra="clara"] .deck__barra li::after { background: #fff; }

/* ---------- os slides e a troca ---------- */
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 38px) 24px calc(env(safe-area-inset-bottom, 0px) + 22px);
  opacity: 0;
  visibility: hidden;
  /* O slide que ainda não chegou espera 24 px à direita; o que já passou
     fica 12 px à esquerda. 360 ms, saída forte (a Apple usa 320 ms). */
  transform: translate3d(28px, 0, 0);
  /* O slide que SAI some rápido (160 ms) e o que ENTRA aparece um pouco
     depois: sem isso os dois títulos ficavam sobrepostos a meio caminho por
     uns 100 ms, ilegíveis (revisão do designer, 11/10/2026). */
  transition: opacity .16s linear,
              transform .36s cubic-bezier(.22, 1, .36, 1),
              visibility 0s linear .36s;
}
.slide--passou { transform: translate3d(-12px, 0, 0); }
.slide--ativo {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .28s ease-out .08s,
              transform .42s cubic-bezier(.25, .8, .25, 1),
              visibility 0s linear 0s;
}
.deck:not([data-sentido]) .slide { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .slide, .slide--passou { transform: none; transition-duration: .01s, .01s, 0s; }
  .deck__barra li::after { transition: none; }
}

/* Os dois botões de passar, para teclado e leitor de tela: só aparecem com o foco. */
.deck__passo {
  position: absolute;
  z-index: 6;
  bottom: 12px;
  padding: 10px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--texto);
  color: var(--fundo);
  font: 600 .9rem/1 var(--fonte-texto);
  opacity: 0;
  pointer-events: none;
}
.deck__passo--voltar { left: 12px; }
.deck__passo--avancar { right: 12px; }
.deck__passo:focus-visible { opacity: 1; pointer-events: auto; outline: 3px solid var(--marca); outline-offset: 2px; }
.deck__anuncio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- o celular desenhado ----------
   --w é a largura da TELA do aparelho e --u vale "1 ponto do iPhone" já na
   escala. Em cima, a barra de status desenhada (59 pontos: hora, ilha,
   bateria); embaixo dela, a página da loja inteira, como ela foi gravada
   (393 x 852 pontos). Assim nada da loja fica embaixo da ilha nem na curva
   do canto (o defeito da versão anterior: "comida pela borda"). O traço de
   voltar ao início fica por cima, como no iPhone de verdade.
   O aparelho é sempre reto. */
.aparelho {
  --w: 250px;
  --u: calc(var(--w) / 393);
  --moldura: 5px;
  flex: none;
  width: calc(var(--w) + var(--moldura) * 2);
  margin: 0 auto;
  padding: var(--moldura);
  border-radius: calc(var(--u) * 55 + var(--moldura));
  background: var(--aparelho);
}
.aparelho__tela {
  position: relative;
  width: var(--w);
  aspect-ratio: 393 / 911;
  border-radius: calc(var(--u) * 55);
  overflow: hidden;
  background: var(--site-topo, #fff);
}
.aparelho__status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--u) * 59);
  padding: calc(var(--u) * 14) calc(var(--u) * 34) 0 calc(var(--u) * 42);
  background: var(--site-topo, #fff);
  color: var(--site-texto, #1d1d1f);
  font: 600 calc(var(--u) * 16) / 1 -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  letter-spacing: -.01em;
}
.aparelho__ilha {
  position: absolute;
  top: calc(var(--u) * 11);
  left: 50%;
  width: calc(var(--u) * 124);
  height: calc(var(--u) * 36);
  border-radius: 999px;
  background: #0d0d0e;
  transform: translateX(-50%);
}
.aparelho__status svg { display: block; height: calc(var(--u) * 12.5); width: auto; }
.aparelho__site {
  display: block;
  width: 100%;
  aspect-ratio: 393 / 852;
  object-fit: cover;
  object-position: top center;
  background: var(--site-topo, #fff);
}
.aparelho__tela::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 8);
  width: calc(var(--u) * 134);
  height: calc(var(--u) * 5);
  border-radius: 999px;
  background: rgba(20, 16, 18, .55);
  transform: translateX(-50%);
}

/* O espaço que sobra embaixo do texto. O celular cabe INTEIRO nele, centrado:
   o tamanho sai da ALTURA que sobra (100cqh), não da largura. Antes ele saía
   pela borda de baixo, e no iPhone sumia atrás da barra do Safari (o Pedro, em
   11/10/2026: "não fica legal ter só metade do celular"). */
.recorte {
  flex: 1 1 auto;
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}