/* Olhar de Arquiteta — estrutura do Vaca Ofertas com linguagem de vidro da Apple (Liquid Glass).
   Cor de destaque: a terracota da Karin, aquecida em gradiente. Fonte do sistema: San Francisco no iPhone/Mac, Roboto no Android. */

:root {
  --fundo: #0B0A10;
  --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: #FFB38A; --q2: #FF7A59; --q3: #E8577A; /* gradiente quente: terracota da Karin */
  --destaque: #FF8F6B;
  --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(255, 122, 89, .40), transparent 64%),
    radial-gradient(60% 38% at 100% 8%, rgba(124, 92, 255, .30), transparent 64%),
    radial-gradient(70% 45% at 92% 72%, rgba(232, 87, 122, .24), transparent 64%),
    radial-gradient(70% 50% at 0% 92%, rgba(56, 82, 170, .32), 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); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad { background: linear-gradient(100deg, var(--q1), var(--q2) 52%, var(--q3)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}

/* ---- Ícone de app (raio de ~22,4% do lado; superelipse de verdade onde o navegador suporta corner-shape) ---- */
.app-icone { position: relative; width: 112px; height: 112px; border-radius: 25px; display: grid; place-items: center; isolation: isolate;
  background: linear-gradient(150deg, var(--q1) 0%, var(--q2) 44%, #C8476A 100%);
  box-shadow: 0 24px 56px -14px rgba(255, 122, 89, .7), inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -3px 8px rgba(0, 0, 0, .18); }
.app-icone::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 46%); pointer-events: none; }
.app-icone img { width: 56%; position: relative; z-index: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2)); }
.topo .app-icone::before { content: ''; position: absolute; inset: -42%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 122, 89, .42), transparent); pointer-events: none; }
.app-icone--p { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 14px 30px -10px rgba(255, 122, 89, .6), inset 0 1px 1px rgba(255, 255, 255, .5); }
.app-icone--pp { width: 34px; height: 34px; border-radius: 8px; box-shadow: none; }

/* ---- Topo ---- */
.topo { display: grid; justify-items: center; gap: 18px; text-align: center; padding: 40px 4px 4px; }

/* Logos das lojas em blocos 3D de verdade atrás do ícone: 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; display: grid; place-items: center; }
.palco .app-icone { z-index: 1; }
.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: -100px; --y: -28px; --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: 104px; --y: 4px; --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(-114px, -29vw); --y: 38px; --t: 54px; --r: 9deg; --rx: 14deg; --ry: 28deg; --d: 3.6s; --a: -.4s; --c1: #52677F; --c2: #232F3E; --c3: #182029; --c4: #05070A; }
@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)); }
}
.selo { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--txt-2);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.selo__ponto { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(48, 209, 88, .18); }
.selo__ponto::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--verde); animation: pulsar 2.4s ease-out 6; }
@keyframes pulsar { from { transform: scale(1); opacity: .55; } to { transform: scale(2.6); opacity: 0; } }
h1 { font-size: clamp(31px, 8.4vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: -.028em; text-wrap: balance; }
.topo__sub { color: var(--txt-2); font-size: 16.5px; max-width: 34em; }
.topo__linha { font-size: 14px; color: var(--txt-3); }

/* ---- 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; }

/* ---- Números ---- */
/* Uma linha só, como no Vaca Ofertas: número em laranja, legenda cinza, divisória curta. */
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-top: 6px; border-radius: var(--raio-g); overflow: hidden; }
.numeros li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 4px; text-align: center; }
.numeros li + li::before { content: ""; position: absolute; left: 0; top: 18%; height: 64%; width: 1px; background: var(--linha); }
.numeros b { font-size: clamp(18px, 6vw, 23px); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--destaque); white-space: nowrap; }
.numeros span { font-size: 11px; line-height: 1.3; color: var(--txt-3); text-wrap: balance; }

/* ---- 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; }

/* Curadora */
.curadora { display: flex; align-items: center; gap: 16px; }
.curadora__foto { width: 84px; height: 84px; flex: none; border-radius: 20px; object-fit: cover; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6); }
.bloco .curadora__nome { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; text-wrap: wrap; }
.curadora__cargo { font-size: 14px; color: var(--txt-2); }
.citacao { margin: 0; padding-left: 16px; border-left: 2px solid var(--q2); }
.citacao p { font-size: 16.5px; font-style: italic; line-height: 1.6; color: var(--txt-2); }

/* Lista no estilo Ajustes do iPhone */
.lista-ios { border-radius: var(--raio-m); background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .06); overflow: hidden; }
.lista-ios li { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 16px; font-size: 15.5px; line-height: 1.4; }
.lista-ios li + li::before { content: ''; position: absolute; top: 0; left: 60px; right: 0; height: 1px; background: var(--linha); }
.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); }
.tile--azul { background: linear-gradient(180deg, #3B9BFF, #0A6FE0); }
.tile--roxo { background: linear-gradient(180deg, #C877F5, #9E3FD6); }
.tile--rosa { background: linear-gradient(180deg, #FF5C7A, #E5274B); }
.tile--ciano { background: linear-gradient(180deg, #5AC8FA, #2A9FD8); }

/* Diferencial */
.bloco__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--raio-m); border: 1px solid rgba(255, 255, 255, .1); }
.criterios { display: grid; gap: 16px; }
.criterios li { display: flex; align-items: flex-start; gap: 14px; }
.criterios .tile { margin-top: 1px; }
.criterios h3 { margin-bottom: 2px; font-size: 16px; font-weight: 700; }
.criterios p { font-size: 14.5px; color: var(--txt-2); }

/* 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); }

.frase { padding: 18px 8px 6px; text-align: center; font-size: clamp(19px, 5vw, 23px); font-weight: 600; line-height: 1.35; letter-spacing: -.015em; text-wrap: balance; }


/* 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__marca { display: flex; align-items: center; gap: 10px; text-align: left; line-height: 1.35; color: var(--txt-2); }
.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: 58%; }
.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; }
  .selo__ponto::after { animation: none; }
  .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) {
  .app-icone, .tile, .notificacao__icone, .curadora__foto { corner-shape: squircle; border-radius: 36%; }
}