/* Linguagem de vidro da Apple (Liquid Glass).
   Cor de destaque: laranja do logo Tá Tendo Promo, em gradiente. Fonte do sistema: San Francisco no iPhone/Mac, Roboto no Android. */

:root {
  --fundo: #0D0A0C;
  --txt: #F5F5F7;
  --txt-2: rgba(235, 235, 245, .7);
  --txt-3: rgba(235, 235, 245, .6); /* secondaryLabel do iOS escuro: ≥ 5,3:1 sobre o vidro (medido) */
  --linha: rgba(255, 255, 255, .09);
  --zap: #25D366; --zap-hover: #2EE277; --zap-txt: #04120A;
  --q1: #FFC58A; --q2: #FF8A3D; --q3: #FF5A1F; /* gradiente quente: laranja do logo */
  --destaque: #FF5A1F; /* laranja do logo, um pouco mais claro para texto */
  --azul: #0A84FF; --verde: #30D158;
  --raio-g: 26px; --raio-m: 18px;
  --fonte: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.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; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font: 400 16px/1.55 var(--fonte); color: var(--txt); background: var(--fundo); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
b { font-weight: 600; color: var(--txt); }
:focus-visible { outline: 2px solid #64D2FF; outline-offset: 3px; border-radius: 6px; }

/* ---- Fundo: papel de parede no estilo macOS, nas cores da marca. Gradientes radiais são baratos (sem filtro). ---- */
.fundo { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 42% at 8% -2%, rgba(249, 76, 20, .26), transparent 64%),
    radial-gradient(60% 38% at 100% 8%, rgba(124, 92, 255, .14), transparent 64%),
    radial-gradient(70% 45% at 92% 72%, rgba(249, 86, 40, .10), transparent 64%),
    radial-gradient(70% 50% at 0% 92%, rgba(56, 82, 170, .16), transparent 64%),
    var(--fundo); }
.fundo::after { content: ''; position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---- Vidro (fundo transparente com desfoque do que está atrás) ---- */
.vidro {
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .045));
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--raio-g);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 18px 40px -22px rgba(0, 0, 0, .7);
}
/* Sobre um fundo de gradientes suaves o desfoque quase não aparece (diferença medida de 0,5 a 2,2 em 255),
   mas custa caro na rolagem em Android de entrada. Por isso fica só no Safari do iPhone. */
@supports (-webkit-touch-callout: none) {
  .vidro { -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
}

.coluna { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 16px 24px; display: grid; gap: 16px; }

/* ---- Gradiente nas palavras de destaque ---- */
.grad { color: var(--destaque); }

/* ---- Topo ---- */
.topo { display: grid; justify-items: center; gap: 18px; text-align: center; padding: 20px 4px 4px; }
.topo__logo { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 28px; box-shadow: 0 10px 28px rgba(249, 56, 0, .32); }

/* Logos das lojas em blocos 3D de verdade: a face (em) fica na frente e 14 camadas (b) recuam em Z
   formando a lateral sólida, que o navegador desenha em perspectiva. */
.palco { position: relative; width: 100%; height: 170px; }
.loja-3d { position: absolute; left: 50%; top: 50%; width: var(--t); height: var(--t); margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2);
  translate: var(--x) var(--y); rotate: var(--r); perspective: 420px; animation: boiar var(--d) ease-in-out var(--a) infinite; pointer-events: none; }
.loja-3d i { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry));
  animation: balancar calc(var(--d) * 1.3) ease-in-out var(--a) infinite; }
.loja-3d b, .loja-3d em { position: absolute; inset: 0; border-radius: 30%; }
.loja-3d b { background: var(--c3); background: color-mix(in srgb, var(--c3), var(--c4) calc(var(--k) * 7.14%)); transform: translateZ(calc(var(--k) * -.85px)); }
.loja-3d b:last-child { box-shadow: 0 18px 26px -6px rgba(0, 0, 0, .7); }
.loja-3d b:nth-child(1) { --k: 1; }
.loja-3d b:nth-child(2) { --k: 2; }
.loja-3d b:nth-child(3) { --k: 3; }
.loja-3d b:nth-child(4) { --k: 4; }
.loja-3d b:nth-child(5) { --k: 5; }
.loja-3d b:nth-child(6) { --k: 6; }
.loja-3d b:nth-child(7) { --k: 7; }
.loja-3d b:nth-child(8) { --k: 8; }
.loja-3d b:nth-child(9) { --k: 9; }
.loja-3d b:nth-child(10) { --k: 10; }
.loja-3d b:nth-child(11) { --k: 11; }
.loja-3d b:nth-child(12) { --k: 12; }
.loja-3d b:nth-child(13) { --k: 13; }
.loja-3d b:nth-child(14) { --k: 14; }
.loja-3d em { display: grid; place-items: center; background: linear-gradient(150deg, var(--c1), var(--c2) 55%, var(--c3)); transform: translateZ(.5px);
  box-shadow: inset 0 4px 3px rgba(255, 255, 255, .5), inset 4px 0 6px rgba(255, 255, 255, .18), inset 0 -7px 12px rgba(0, 0, 0, .28), inset -4px 0 8px rgba(0, 0, 0, .14); }
.loja-3d em::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(110% 80% at 30% 10%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 50%); }
.loja-3d img { position: relative; z-index: 1; width: 56%; height: auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.l-shopee { --x: max(-122px, -31vw); --y: -44px; --t: 70px; --r: -8deg; --rx: 16deg; --ry: 30deg; --d: 4.2s; --a: -1.2s; --c1: #FF8E6B; --c2: #EE4D2D; --c3: #C0391B; --c4: #7E220D; }
.l-shopee img { filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.l-ml { --x: min(122px, 31vw); --y: 42px; --t: 76px; --r: 7deg; --rx: 14deg; --ry: -32deg; --d: 4.8s; --a: -3s; --c1: #FFF38A; --c2: #FFE600; --c3: #D2BC00; --c4: #8A7A00; }
.l-ml img { width: 74%; }
.l-amazon { --x: max(-106px, -27vw); --y: 52px; --t: 58px; --r: 9deg; --rx: 14deg; --ry: 18deg; --d: 3.6s; --a: -.4s; --c1: #52677F; --c2: #232F3E; --c3: #182029; --c4: #05070A; }
.l-tiktok { --x: min(108px, 27.5vw); --y: -54px; --t: 60px; --r: -7deg; --rx: 14deg; --ry: -18deg; --d: 4.4s; --a: -2.1s; --c1: #55555F; --c2: #1E1E24; --c3: #131317; --c4: #000; }
.l-tiktok img { width: 62%; }
@keyframes boiar { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(4deg); } }
@keyframes balancar {
  0%, 100% { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
  50% { transform: rotateX(calc(var(--rx) - 12deg)) rotateY(calc(var(--ry) * .45)); }
}
h1 { font-size: clamp(28px, 9vw, 52px); font-weight: 700; line-height: 1.08; letter-spacing: -.028em; text-wrap: balance; }
h1 .grad { display: inline-block; }
.topo__sub { color: var(--txt-2); font-size: 16.5px; max-width: 34em; text-wrap: balance; }
.topo__destaque { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--txt); max-width: 30em; text-wrap: balance; }
.topo__caixa, .contagem { width: 100%; max-width: 420px; border-radius: var(--raio-m); padding: 14px 18px; }
.topo__caixa { font-size: 15px; line-height: 1.45; color: var(--txt-2); background: rgba(249, 86, 20, .07); border-color: rgba(255, 147, 80, .18); text-wrap: pretty; }
.contagem { display: grid; gap: 2px; }
.contagem__rotulo { font-size: 13px; font-weight: 500; color: var(--txt-2); }
.contagem__relogio { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--destaque); font-variant-numeric: tabular-nums; }

/* ---- Botão verde ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 420px; min-height: 58px; padding: 0 26px; border-radius: 16px;
  font: 700 16.5px/1.1 var(--fonte); letter-spacing: -.01em; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, background-color .2s ease, box-shadow .2s ease; }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn--zap { background: var(--zap); color: var(--zap-txt); box-shadow: 0 14px 34px -12px rgba(37, 211, 102, .75), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn--zap:hover { background: var(--zap-hover); }
.btn:active { transform: scale(.97); }
.btn[aria-disabled="true"] { opacity: .5; box-shadow: none; pointer-events: none; }

/* ---- Blocos ---- */
.bloco { display: grid; gap: 14px; padding: 26px 22px; }
.bloco h2, .lojas h2 { font-size: clamp(24px, 6.4vw, 31px); font-weight: 700; line-height: 1.14; letter-spacing: -.022em; text-wrap: balance; }
.bloco__sub { color: var(--txt-2); }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--destaque); }
.eyebrow--centro { justify-content: center; }

/* Lista no estilo Ajustes do iPhone */
.tile { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); }
.tile svg { width: 18px; height: 18px; }
.tile--verde { background: linear-gradient(180deg, #3CDC68, #27B34B); }
.tile--laranja { background: linear-gradient(180deg, #FFAE33, #F28A00); }

/* Depoimentos (só aparecem com depoimento real no config) */
.depoimentos { display: grid; gap: 10px; }
.depoimento { padding: 16px; border-radius: var(--raio-m); background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .07); }
.depoimento p { font-size: 15px; color: var(--txt-2); }
.depoimento cite { display: block; margin-top: 10px; font-style: normal; font-size: 14px; font-weight: 600; }
.depoimento cite span { font-weight: 400; color: var(--txt-3); }

/* Lojas */
.lojas { display: grid; gap: 14px; padding: 16px 0 6px; text-align: center; }
.marquee { margin: 0 -16px; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__trilha { display: flex; gap: 10px; width: max-content; padding: 4px 0; animation: rolar 28s linear infinite; }
.marquee__trilha li { display: flex; align-items: center; gap: 8px; padding: 10px 18px 10px 14px; border-radius: 999px; white-space: nowrap; font-size: 14.5px; font-weight: 600;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.marquee__trilha img { width: 20px; height: 20px; flex: none; }
.marquee:hover .marquee__trilha, .marquee.is-pausado .marquee__trilha { animation-play-state: paused; }
@keyframes rolar { to { transform: translateX(calc(-50% - 5px)); } }

/* Avisos */
.avisos { display: grid; gap: 12px; }
.aviso { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: var(--raio-g); }
.aviso h3 { margin-bottom: 3px; font-size: 16px; font-weight: 700; }
.aviso p { font-size: 14.5px; color: var(--txt-2); }



/* Chamada final */
.cta-final { justify-items: center; text-align: center; padding: 32px 22px; }

/* Rodapé */
.rodape { display: grid; justify-items: center; gap: 14px; padding: 24px 20px calc(32px + env(safe-area-inset-bottom)); text-align: center; font-size: 13px; color: var(--txt-3); }
.rodape a { color: var(--txt-2); text-decoration: none; }
.rodape a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape__legal { max-width: 38em; font-size: 12px; line-height: 1.6; }
.rodape__legal a { text-decoration: underline; text-underline-offset: 3px; }
.aviso-pixel { display: none; }
.com-pixel .aviso-pixel { display: inline; }

/* ---- Balão de notificação (banner do iOS) ---- */
.notificacao { position: fixed; z-index: 50; left: 12px; right: 12px; top: calc(10px + env(safe-area-inset-top)); max-width: 400px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 12px 40px 12px 12px; border-radius: 22px;
  background: rgba(44, 42, 52, .78); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 22px 50px -12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .12);
  opacity: 0; visibility: hidden; transform: translateY(calc(-100% - 32px)); /* desce do topo, como no iPhone */
  transition: transform .55s cubic-bezier(.2, .95, .25, 1.12), opacity .3s ease, visibility 0s linear .55s; }
.notificacao.is-visivel { opacity: 1; visibility: visible; transform: none; transition: transform .55s cubic-bezier(.2, .95, .25, 1.12), opacity .3s ease, visibility 0s; }
.notificacao__icone { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--q1), var(--q2) 44%, #C8476A); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5); }
.notificacao__icone img { width: 100%; height: 100%; border-radius: inherit; }
.notificacao__corpo { min-width: 0; display: grid; gap: 1px; }
.notificacao__app { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--txt-2); }
.notificacao__titulo { font-size: 14.5px; font-weight: 700; }
.notificacao__texto { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notificacao__fechar { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .13); color: var(--txt-2); }
.notificacao__fechar svg { width: 11px; height: 11px; }
.notificacao__fechar::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; } /* toque de 44px, visual de 24px */
@media (hover: hover) {
  .notificacao__fechar { opacity: 0; transition: opacity .2s ease; }
  .notificacao:hover .notificacao__fechar, .notificacao__fechar:focus-visible { opacity: 1; }
}

/* ---- Telas maiores ---- */
@media (min-width: 560px) {
  .bloco { padding: 32px 30px; }
}
@media (min-width: 720px) {
  .topo { padding-top: 64px; }
  .notificacao { left: auto; right: calc(20px + env(safe-area-inset-right)); top: calc(20px + env(safe-area-inset-top)); width: 360px; margin: 0; } /* canto de cima à direita, como no Mac */
}

/* ---- Movimento reduzido ---- */
@media (prefers-reduced-motion: reduce) {
  .loja-3d, .loja-3d i { animation: none; }
  html { scroll-behavior: auto; }
  .marquee { -webkit-mask-image: none; mask-image: none; margin: 0; }
  .marquee__trilha { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee__trilha li[aria-hidden] { display: none; }
  .notificacao, .notificacao.is-visivel { transform: none; }
  .btn { transition: none; }
}

.coluna, .bloco { grid-template-columns: minmax(0, 1fr); }

/* ---- Superelipse de verdade onde o navegador suporta (sem efeito no Safari atual) ---- */
@supports (corner-shape: squircle) {
  .tile, .notificacao__icone { corner-shape: squircle; border-radius: 36%; }
}