/* Página principal da plataforma (spec 2026-11-08 §3). Celular primeiro (390px). */
:root {
  color-scheme: light dark;
  /* identidade PeddiAQ: azul, laranja, grafite e branco */
  --azul: #3949AB;
  --laranja: #F28C52;
  --grafite: #252525;
  --tinta: #252525;
  --papel: #FFFFFF;
  --nevoa: #EEF0FA;
  --azul-texto: #3949AB;
  --sobre-laranja: #252525;
  --sombra-btn: #252525;
  --mudo: #55585F;
  --linha: #D8DBEA;
  --borda-campo: #8A8E9C;
  --erro: #B3261E;
  --foco: #252525;
  --rodape-bg: #252525;
  --rodape-tinta: #F4F5FA;
  --fonte-titulo: Sora, ui-sans-serif, system-ui, sans-serif;
  --t-p: .875rem;
  --t-g: 1.25rem;
  --t-gg: 1.563rem;
  --t-h2: clamp(1.7rem, 5.5vw, 2.4rem);
  --t-h1: clamp(2.15rem, 9vw, 3.7rem);
  --raio: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #F4F5FA;
    --papel: #252525;
    --nevoa: #2E2F38;
    --azul-texto: #A5B0F5;
    --sombra-btn: #B5622E;
    --mudo: #B9BCC8;
    --linha: #44464F;
    --borda-campo: #878B99;
    --erro: #FF8A7A;
    --foco: #F28C52;
    --rodape-bg: #1A1A1A;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.6 Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
img { max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
h2 { margin: 0 0 1.75rem; font-size: var(--t-h2); line-height: 1.1; }
h3 { margin: 0; font-size: var(--t-g); line-height: 1.2; }
p { margin: 0 0 1rem; }

.miolo { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: .5rem; top: -4rem; z-index: 10; padding: .75rem 1rem; background: var(--tinta); color: var(--papel); border-radius: 8px; }
.pular:focus { top: .5rem; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .6rem 1.35rem; border: 2px solid var(--tinta); border-radius: var(--raio); background: transparent; color: var(--tinta); font: inherit; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; transition: transform .12s ease-out, box-shadow .12s ease-out, background-color .12s ease-out; }
/* CTA laranja: chapado e discreto em repouso; no hover/foco sobe, ganha degradê, brilho, sombra colorida e um reflexo que cruza o botão uma vez; a seta anda */
.btn--principal { --laranja-topo: color-mix(in srgb, var(--laranja) 94%, #fff); position: relative; overflow: hidden; gap: .55rem; border: 1px solid color-mix(in srgb, var(--laranja) 82%, #000); background: var(--laranja); color: var(--sobre-laranja); font-family: var(--fonte-titulo); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.btn--principal::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .5) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.btn--principal::after { content: ""; flex: none; width: 1.1em; height: 1.1em; background: currentColor; transition: transform .2s var(--ease); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn--principal:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 3px; }
.btn--p { min-height: 44px; padding: .35rem 1rem; font-size: .95rem; }
.btn:disabled { opacity: .6; cursor: wait; }
@media (hover: hover) and (pointer: fine) {
  .btn--principal:hover, .btn--principal:focus-visible { transform: translateY(-2px); background: linear-gradient(180deg, var(--laranja-topo), var(--laranja)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 14px 30px -10px rgb(242 140 82 / .8), 0 3px 6px rgb(0 0 0 / .18); }
  .btn--principal:hover::before, .btn--principal:focus-visible::before { transform: translateX(120%); transition: transform .7s ease-out; }
  .btn--principal:hover::after, .btn--principal:focus-visible::after { transform: translateX(4px); }
  .btn--contorno:hover, .btn--contorno:focus-visible { background: color-mix(in srgb, currentColor 12%, transparent); }
}
.btn--principal:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 5px 12px -8px rgb(242 140 82 / .7), 0 1px 2px rgb(0 0 0 / .15); }
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .btn--principal:hover, .btn--principal:focus-visible { transform: none; }
  .btn--principal:hover::before, .btn--principal:focus-visible::before { transform: translateX(-120%); transition: none; }
  .btn--principal:hover::after, .btn--principal:focus-visible::after { transform: none; }
}

/* ---------- topo e menu ---------- */
.topo { position: sticky; top: 0; z-index: 20; isolation: isolate; }
/* fundo da barra numa camada própria, para aparecer e sumir só com opacity */
.topo::before { content: ""; position: absolute; inset: 0; z-index: -1; border-bottom: 1px solid var(--linha); background: color-mix(in srgb, var(--papel) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity .8s var(--ease-s); }
/* o topo fixo não cobre o título da seção */
[id] { scroll-margin-top: 5rem; }
.topo__linha { position: relative; display: flex; align-items: center; gap: .6rem; min-height: 4.25rem; }
.logo { display: block; margin: 0 auto 0 0; line-height: 0; }
.logo { --logo-altura: 28px; transform-origin: center; transition: transform .8s var(--ease-s); }
/* topo.js põe .topo--hero enquanto o hero está na tela: só o logo, centralizado e maior; sem JS a barra fica sempre inteira */
.topo--hero::before { opacity: 1; border-color: transparent; background: radial-gradient(ellipse 70% 55% at 50% -10%, rgb(242 140 82 / .22), transparent 70%), #0B0D12; }
.topo--quieto::before, .topo--quieto * { transition: none !important; } /* estado inicial, sem animar */
.topo--hero .logo { transform: translateX(var(--logo-dx, 0px)) scale(1.3); }
.topo__criar, .topo__linha > .topo__abrir { transition: opacity .8s var(--ease-s) .12s, transform .8s var(--ease-s) .12s, visibility 0s; }
.topo--hero .topo__criar, .topo--hero .topo__linha > .topo__abrir { opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none; transition: opacity .8s var(--ease-s), transform .8s var(--ease-s), visibility 0s linear .8s; }
/* dois logos no link (cor e branco): um por tema */
.logo .logo-peddi:last-child { display: none; }
/* logo no meio do texto do hero: na altura das letras, apoiada na linha de base */
.hero__marca { --logo-altura: 1.15em; display: inline-block; margin: 0 -.05em 0 .05em; vertical-align: -.24em; line-height: 0; }
.hero__marca .logo-peddi:last-child { display: none; }
@media (prefers-color-scheme: dark) {
  .logo .logo-peddi:first-child, .hero__marca .logo-peddi:first-child { display: none; }
  .logo .logo-peddi:last-child, .hero__marca .logo-peddi:last-child { display: inline-block; }
}
.topo__abrir { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.hamb { position: relative; display: block; width: 22px; height: 16px; }
.hamb i { position: absolute; left: 0; right: 0; height: 2.2px; border-radius: 2px; background: currentColor; transition: transform .28s var(--ease-sai), opacity .2s ease; }
.hamb i:nth-child(1) { top: 0; }
.hamb i:nth-child(2) { top: 7px; }
.hamb i:nth-child(3) { top: 14px; }
/* menu aberto: o traço do meio some e os outros giram para formar o "×" */
.topo:has(.menu:popover-open) .hamb i { transition-duration: .45s; transition-timing-function: var(--ease-p); }
.topo:has(.menu:popover-open) .hamb i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topo:has(.menu:popover-open) .hamb i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.topo:has(.menu:popover-open) .hamb i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* o botão de dentro da gaveta nasce como ☰ e vira × ao entrar */
@starting-style { .topo:has(.menu:popover-open) .hamb i { transform: none; opacity: 1; } }
/* gaveta do celular: entra com easing longo, o fundo escurece em fade e os itens entram em cascata; fechar é o caminho inverso, mais rápido */
.menu { display: none; position: fixed; inset: 0 0 0 auto; width: min(20rem, 88vw); height: 100dvh; max-height: none; margin: 0; padding: .75rem 1rem 1.5rem; border: 0; background: var(--papel); color: var(--tinta); flex-direction: column; gap: .25rem; overflow-y: auto; transform: translateX(100%); transition: transform .28s var(--ease-sai), overlay .28s allow-discrete, display .28s allow-discrete; }
.menu:popover-open { display: flex; transform: none; transition-duration: .52s; transition-timing-function: var(--ease-p); }
@starting-style { .menu:popover-open { transform: translateX(100%); } }
.menu::backdrop { background-color: rgb(0 0 0 / 0); transition: background-color .28s ease-out, overlay .28s allow-discrete, display .28s allow-discrete; }
.menu:popover-open::backdrop { background-color: rgb(0 0 0 / .5); transition-duration: .52s; }
@starting-style { .menu:popover-open::backdrop { background-color: rgb(0 0 0 / 0); } }
.menu__fechar { align-self: flex-end; }
.menu a { display: flex; align-items: center; min-height: 52px; padding: 0 .85rem; border-radius: 10px; font-size: 1.2rem; font-weight: 700; text-decoration: none; }
.menu .menu__cta { justify-content: center; margin-top: 1rem; padding: .6rem 1.35rem; border-radius: var(--raio); font-size: 1rem; }
@media (max-width: 899.98px) {
  .menu a { opacity: 0; transform: translateX(12px); transition: opacity .2s ease-out, transform .2s var(--ease-sai); }
  .menu .menu__cta { transform: scale(.92); }
  .menu:popover-open a { opacity: 1; transform: none; transition: opacity .5s var(--ease-p) calc(.18s + var(--i, 0) * 45ms), transform .5s var(--ease-p) calc(.18s + var(--i, 0) * 45ms); }
  @starting-style { .menu:popover-open a { opacity: 0; transform: translateX(24px); } .menu:popover-open .menu__cta { transform: scale(.92); } }
}
@media (hover: hover) and (pointer: fine) {
  .menu a:not(.btn):hover, .menu a:not(.btn):focus-visible { background: var(--nevoa); }
  .topo__abrir:hover, .topo__abrir:focus-visible { background: var(--nevoa); }
}
@media (min-width: 900px) {
  .topo__linha { gap: 1rem; }
  .topo__criar { order: 3; }
  .topo__linha > .topo__abrir, .menu .menu__fechar, .menu .menu__cta { display: none; }
  .menu { display: flex; order: 2; position: static; inset: auto; width: auto; height: auto; padding: 0; background: none; flex-direction: row; align-items: center; gap: .15rem; overflow: visible; transform: none; }
  .menu a { min-height: 44px; font-size: .98rem; font-weight: 600; }
  .menu { transition: opacity .8s var(--ease-s) .12s, transform .8s var(--ease-s) .12s, visibility 0s; }
  .topo--hero .menu { opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none; transition: opacity .8s var(--ease-s), transform .8s var(--ease-s), visibility 0s linear .8s; }
}

/* ---------- hero ---------- */
.hero-fim { height: 1px; margin-top: -1px; }
/* hero: túnel em perspectiva. Comandas e mensagens bagunçadas viajam em profundidade (o caos de atender no WhatsApp e no papel) atrás do título.
   Tudo é CSS: cada cartão traz a posição (--fx, --fy em fração da tela), a rotação (--r), o tamanho (--k) e a defasagem (--d); o laço é uma animação de transform e opacity. */
.hero { position: relative; isolation: isolate; background: var(--hero-fundo); color: var(--tinta); display: grid; align-content: center; min-height: calc(100vh - 4.25rem); min-height: calc(100svh - 4.25rem); overflow: clip; --zlonge: -1200px; --zperto: 350px; } /* ocupa a primeira dobra (menos a altura do topo); em tela baixa o conteúdo manda (min-height) */
.tunel__palco { position: absolute; inset: 0; z-index: -2; perspective: 900px; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); } /* os cartões somem nas bordas, sem corte reto */
.tunel__cam { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--cx, 0deg)) rotateY(var(--cy, 0deg)); }
/* luz suave atrás das comandas: um facho quente em cima e um brilho azul embaixo */
.tunel__fundo { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 50% 0%, rgb(255 214 170 / .14), transparent 70%), radial-gradient(ellipse 50% 40% at 85% 100%, rgb(57 73 171 / .35), transparent 70%); }
.tunel__palco { opacity: .85; }
/* véu no centro: dá contraste ao título sem esconder o túnel nas bordas */
.tunel__veu { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 130% 78% at center, color-mix(in srgb, var(--papel) 92%, transparent) 0%, color-mix(in srgb, var(--papel) 88%, transparent) 22%, color-mix(in srgb, var(--papel) 78%, transparent) 40%, color-mix(in srgb, var(--papel) 62%, transparent) 54%, color-mix(in srgb, var(--papel) 44%, transparent) 65%, color-mix(in srgb, var(--papel) 27%, transparent) 75%, color-mix(in srgb, var(--papel) 13%, transparent) 85%, color-mix(in srgb, var(--papel) 4%, transparent) 93%, color-mix(in srgb, var(--papel) 0%, transparent) 100%); }

/* comandas e mensagens: mesma posição, mesmo laço de 28 s, mesma profundidade de campo (desfoque longe e perto) */
.tc, .tb { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; opacity: 0; animation: tunel 28s linear infinite; animation-delay: var(--d);
  transform: translate3d(calc(var(--fx) * 100vw), calc(var(--fy) * 100svh), var(--zlonge)) rotate(var(--r)) rotateY(calc(var(--r) * 5)) rotateX(calc(var(--r) * -3)); }
.tc { --w: calc(130px + var(--k) * 50px); --h: calc(var(--w) * 1.25); --sh: calc(var(--h) / 7); --a: calc(var(--s) * (7deg + var(--k) * 5deg)); width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); color: #252525; font-size: calc(var(--w) / 17); line-height: 1.35; }
/* mensagem do cliente: balão verde simples */
.tb { width: max-content; max-width: 15rem; margin: 0; translate: -50% -50%; padding: .6em 1em; border-radius: 1.2em 1.2em 1.2em .35em; background: linear-gradient(135deg, #22A862, #0F7A43); color: #EAFFF2;
  font: 500 calc(.8rem + var(--k) * .3rem)/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: inset 0 1px 0 rgb(255 255 255 / .2); }
@keyframes tunel {
  0% { opacity: 0; filter: blur(6px) drop-shadow(0 .9rem 1.1rem rgb(0 0 0 / .5)); transform: translate3d(calc(var(--fx) * 100vw), calc(var(--fy) * 100svh), var(--zlonge)) rotate(var(--r)) rotateY(calc(var(--r) * 5)) rotateX(calc(var(--r) * -3)); }
  18% { opacity: .9; filter: blur(2px) drop-shadow(0 .9rem 1.1rem rgb(0 0 0 / .5)); }
  45%, 62% { opacity: 1; filter: blur(0); }
  85% { opacity: .9; filter: blur(5px) drop-shadow(0 .9rem 1.1rem rgb(0 0 0 / .5)); }
  100% { opacity: 0; filter: blur(9px) drop-shadow(0 .9rem 1.1rem rgb(0 0 0 / .5)); transform: translate3d(calc(var(--fx) * 100vw), calc(var(--fy) * 100svh), var(--zperto)) rotate(var(--r)) rotateY(calc(var(--r) * 5)) rotateX(calc(var(--r) * -3)); }
}
.tunel--pausa .tc, .tunel--pausa .tb { animation-play-state: paused; }
/* comanda em fatias: cada faixa mostra a sua parte do papel e gira sobre a borda de cima da anterior, curvando a folha */
.tc__curva { position: absolute; inset: 0; perspective: calc(var(--w) * 3); perspective-origin: 50% 0; }
.fatia { position: relative; height: var(--sh); transform-style: preserve-3d; }
.fatia .fatia { position: absolute; top: 100%; left: 0; width: 100%; transform-origin: 50% 0; transform: rotateX(var(--a)); }
.fatia__papel { position: relative; height: var(--sh); overflow: hidden; }
.fatia__miolo { position: absolute; left: 0; top: calc(var(--i) * var(--sh) * -1); width: 100%; height: var(--h); display: flex; flex-direction: column; gap: .45em; padding: 1.3em 1.1em 1.6em; color: rgb(30 30 30 / .84);
  background: linear-gradient(100deg, #FFFEF9, #F7F4EA); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-shadow: 0 0 .03em currentColor; letter-spacing: -.02em; }
/* luz de cada faixa: brilho na borda de cima, e quanto mais a faixa vira, mais escura */
.fatia__papel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(255 255 255 / .3), #0000 55%), linear-gradient(rgb(0 0 0 / calc(var(--i) * .045)), rgb(0 0 0 / calc(var(--i) * .045))); }
.tc { --dente: calc(.6em + var(--k) * .6em); --serra: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg); --serra-t: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg); }
.tc__curva > .fatia > .fatia__papel { -webkit-mask: var(--serra-t) top / var(--dente) calc(var(--dente) / 2) repeat-x, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--dente) / 2) no-repeat; mask: var(--serra-t) top / var(--dente) calc(var(--dente) / 2) repeat-x, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--dente) / 2) no-repeat; }
.fatia--ultima > .fatia__papel { -webkit-mask: var(--serra) bottom / var(--dente) calc(var(--dente) / 2) repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--dente) / 2) no-repeat; mask: var(--serra) bottom / var(--dente) calc(var(--dente) / 2) repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--dente) / 2) no-repeat; }
.tc__cab { display: block; padding-bottom: .35em; border-bottom: 1px dashed rgb(30 30 30 / .5); font-size: 1.15em; font-weight: 800; text-align: center; letter-spacing: .04em; }
.tc__meta, .tc__itens li, .tc__total { display: flex; justify-content: space-between; gap: .5em; }
.tc__meta { font-size: .82em; opacity: .75; }
.tc__itens { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2em; margin: 0; padding: .35em 0; border-block: 1px dashed rgb(30 30 30 / .4); list-style: none; }
.tc__itens li > :first-child { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tc__itens li > :last-child { flex: none; }
.tc__itens s { text-decoration-thickness: .14em; text-decoration-color: #D7422B; }
.tc__total { font-weight: 800; }
.tc__pag { font-size: .8em; line-height: 1.3; opacity: .75; }
.tc__barras { display: block; height: 1.9em; margin-top: auto; opacity: .8;
  background: repeating-linear-gradient(90deg, #222 0 .07em, #0000 0 .17em, #222 0 .38em, #0000 0 .47em, #222 0 .52em, #0000 0 .7em, #222 0 .9em, #0000 0 1em); }
.tc__nota { position: absolute; left: .9em; bottom: 3.6em; display: block; color: #1F3FBF; font: italic 1.3em/1.1 "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; text-shadow: none; transform: rotate(-7deg); }
.tc__carimbo { position: absolute; right: .6em; top: 40%; padding: .1em .5em; border: .2em double #D7422B; border-radius: .3em; color: #D7422B; font-weight: 800; font-size: 1.3em; letter-spacing: .06em; text-transform: uppercase; text-shadow: none; transform: rotate(-14deg); opacity: .8; mix-blend-mode: multiply; }
/* mancha de copo: anel marrom bem fraco */
.tc--mancha .fatia__miolo::after { content: ""; position: absolute; right: -1.6em; top: 1.5em; width: 5.5em; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #0000 58%, rgb(140 90 40 / .16) 61%, rgb(140 90 40 / .05) 66%, #0000 69%); }

.hero__grade { position: relative; z-index: 1; display: grid; justify-items: center; padding-block: 2.5rem 3rem; text-align: center; }
.hero__texto { max-width: 46rem; }
.hero h1 { margin: 0 0 1rem; font-size: clamp(2.3rem, 9vw, 4.4rem); line-height: 1.04; }
.hero__sub { max-width: 34rem; margin: 0 auto 1.5rem; font-size: var(--t-g); }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }
.hero__acoes .btn:not(.btn--zap) { flex: 1 1 14rem; max-width: 20rem; }
.hero__nota { margin: 1.1rem 0 0; color: var(--mudo); font-size: var(--t-p); }
@media (prefers-reduced-motion: no-preference) {
  .hero__texto { animation: hero-entra .9s var(--ease-p) both; }
}
@keyframes hero-entra { from { opacity: 0; transform: scale(.92); } }
@media (min-width: 900px) {
  .hero { --zlonge: -1700px; --zperto: 500px; }
  .tunel__palco { perspective: 1200px; }
  .tunel__veu { background: radial-gradient(ellipse 62% 60% at center, color-mix(in srgb, var(--papel) 92%, transparent) 0%, color-mix(in srgb, var(--papel) 88%, transparent) 22%, color-mix(in srgb, var(--papel) 78%, transparent) 40%, color-mix(in srgb, var(--papel) 62%, transparent) 54%, color-mix(in srgb, var(--papel) 44%, transparent) 65%, color-mix(in srgb, var(--papel) 27%, transparent) 75%, color-mix(in srgb, var(--papel) 13%, transparent) 85%, color-mix(in srgb, var(--papel) 4%, transparent) 93%, color-mix(in srgb, var(--papel) 0%, transparent) 100%); }
  .tc { --w: calc(180px + var(--k) * 90px); }
  .hero__acoes .btn:not(.btn--zap) { flex: none; }
}
/* hero escuro nos dois temas: fundo abstrato com luz quente em cima e azul/verde nos cantos; o texto e os botões usam as cores do tema escuro */
.hero { --hero-fundo: radial-gradient(ellipse 70% 55% at 50% -10%, rgb(242 140 82 / .22), transparent 70%), radial-gradient(ellipse 60% 50% at 100% 100%, rgb(57 73 171 / .38), transparent 70%), radial-gradient(ellipse 45% 40% at 0% 85%, rgb(31 158 90 / .16), transparent 70%), #0B0D12;
  --tinta: #F4F5FA; --papel: #0B0D12; --mudo: #B9BCC8; --foco: #F28C52; --sombra-btn: #B5622E; --azul-texto: #A5B0F5; --borda-campo: #878B99; }
.hero .hero__marca .logo-peddi:first-child, .topo--hero .logo .logo-peddi:first-child { display: none; }
.hero .hero__marca .logo-peddi:last-child, .topo--hero .logo .logo-peddi:last-child { display: inline-block; }

/* movimento reduzido: comandas paradas, espalhadas em profundidade */
@media (prefers-reduced-motion: reduce) {
  .tc, .tb { animation: none; opacity: .85; transform: translate3d(calc(var(--fx) * 100vw), calc(var(--fy) * 100svh), var(--zs)) rotate(var(--r)) rotateY(calc(var(--r) * 5)) rotateX(calc(var(--r) * -3)); }
}

/* ---------- seções ---------- */
.faixa, .recursos, .preco, .duvidas, .problema, .agita { padding-block: 3.5rem; }
.faixa { background: var(--azul); color: #fff; }
.faixa--clara { background: var(--nevoa); color: var(--tinta); }
.faixa :focus-visible { outline-color: #fff; }
.faixa .btn--contorno { border-color: #fff; color: #fff; }
.faixa--clara .btn--contorno { border-color: var(--tinta); color: var(--tinta); }

/* botão de WhatsApp solto (mesma mecânica do "Continuar com o Google" do login): em repouso só o círculo verde e o texto;
   no hover o círculo gira e desliza até o centro por cima do texto, que some, e um anel verde corre em volta */
.btn--zap { position: relative; padding: 0 1rem 0 .6rem; border: 0; border-radius: 999px; background: none; color: inherit; }
.btn--zap__conteudo { position: relative; display: inline-flex; align-items: center; padding-left: calc(2.25rem + .65rem); }
.btn--zap__g { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; pointer-events: none; }
.btn--zap__ic { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #25D366; transition: transform .6s var(--ease-s); }
.btn--zap__ic svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--zap__fone { fill: #fff; stroke-width: 1; }
/* hover: o ícone fica parado e a frase desliza para a esquerda, sumindo para dentro dele (recorte e deslize andam juntos) */
.btn--zap__txt { clip-path: inset(0 0 0 0); transition: clip-path .6s var(--ease-s), transform .6s var(--ease-s), opacity .6s var(--ease-s); }
/* anel só em volta do ícone (filho da camada que desliza, então vai junto); feito com máscara, o degradê repete a cor do começo no fim */
.btn--zap__g::before { content: ""; position: absolute; left: -6px; top: 50%; width: calc(2.25rem + 12px); height: calc(2.25rem + 12px); margin-top: calc(-1.125rem - 6px); border-radius: 50%; padding: 2.5px; pointer-events: none; background: conic-gradient(#8DF2B0, #25D366, #128C4A, #25D366, #8DF2B0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .btn--zap:hover .btn--zap__g::before, .btn--zap:focus-visible .btn--zap__g::before { opacity: 1; animation: zap-gira 2.4s linear infinite; }
  .btn--zap:hover .btn--zap__ic, .btn--zap:focus-visible .btn--zap__ic { transform: rotate(360deg) scale(1.15); }
  .btn--zap:hover .btn--zap__txt, .btn--zap:focus-visible .btn--zap__txt { clip-path: inset(0 0 0 100%); transform: translateX(-100%); opacity: .2; }
}
@keyframes zap-gira { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .btn--zap:hover .btn--zap__g::before, .btn--zap:focus-visible .btn--zap__g::before { animation: none; }
  .btn--zap:hover .btn--zap__ic, .btn--zap:focus-visible .btn--zap__ic { transform: none; }
  .btn--zap:hover .btn--zap__txt, .btn--zap:focus-visible .btn--zap__txt { clip-path: none; transform: none; opacity: 1; }
}
.faixa--clara :focus-visible { outline-color: var(--foco); }
@media (min-width: 900px) { .faixa, .recursos, .preco, .duvidas, .problema, .agita { padding-block: 5.5rem; } }

/* trajeto: uma linha tracejada liga os três marcos; cada passo traz uma mini peça de interface */
.passos { position: relative; display: grid; gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.passos::before { content: ""; position: absolute; top: 1.5rem; bottom: 1.5rem; left: 1.5rem; border-left: 2px dashed rgb(242 140 82 / .6); }
.passo { position: relative; padding-left: 4.25rem; }
.passo__num { position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #fff; color: var(--azul); font-family: var(--fonte-titulo); font-size: 1.4rem; font-weight: 800; }
.passo h3 { margin: 0 0 .35rem; }
.passo p { max-width: 28rem; margin: 0; color: rgb(255 255 255 / .86); }
.passo__peca { margin: 0 0 1.1rem; transform: rotate(var(--giro)); transition: transform .25s ease-out; }
@media (hover: hover) and (pointer: fine) {
  .passo:hover .passo__peca, .passo:focus-within .passo__peca { transform: rotate(0deg) translateY(-3px); }
}
.mini { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: 20rem; padding: .9rem; border-radius: 14px; background: #fff; color: #252525; font-size: .875rem; line-height: 1.3; box-shadow: 0 .7rem 1.2rem -.6rem rgb(0 0 0 / .45); }
.mini__rotulo { flex: 0 0 100%; color: #55585F; font-size: .75rem; font-weight: 700; }
.mini__campo { flex: 0 0 100%; padding: .5rem .65rem; border: 2px solid #8A8E9C; border-radius: 8px; }
.mini__btn { padding: .45rem .8rem; border-radius: 8px; background: var(--laranja); font-weight: 700; }
.mini__selo { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: 999px; background: #E8EBF8; color: var(--azul); font-size: .8rem; font-weight: 700; }
.mini__selo .plano__ic { width: 1rem; height: 1rem; margin: 0; stroke: var(--azul); }
.mini--produto, .mini--aviso { flex-wrap: nowrap; gap: .75rem; }
.mini__foto { flex: none; width: 3.25rem; height: 3.25rem; border: 3px solid var(--laranja); border-radius: 50%; background: linear-gradient(#E3A857 0 32%, #7BB661 32% 42%, #7A4528 42% 64%, #F2C14E 64% 72%, #E3A857 72%); }
.mini__produto { display: grid; flex: 1; gap: .1rem; }
.mini__produto span { color: #55585F; }
.mini__produto .mini__cod { color: #252525; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.mini__mais { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--laranja); font-size: 1.25rem; font-weight: 700; line-height: 1; }
.mini__sino { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--azul); }
.mini__sino svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
  .passos { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .passos::before { top: 1.5rem; bottom: auto; left: 1.5rem; right: 0; border-left: 0; border-top: 2px dashed rgb(242 140 82 / .6); }
  .passo { padding: 4.5rem 0 0; }
  .mini { max-width: none; }
}

.recursos__bloco { display: grid; gap: .85rem; padding-block: 1.5rem; border-top: 1px solid var(--linha); }
.recursos__bloco:last-child { border-bottom: 1px solid var(--linha); }
.recursos__bloco ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.recursos__bloco li { position: relative; padding-left: 1.5rem; }
.recursos__bloco li::before { content: ""; position: absolute; left: 0; top: .6em; width: .6rem; height: .6rem; border-radius: 2px; background: var(--laranja); }
@media (min-width: 900px) {
  .recursos__bloco { grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: start; }
  .recursos__bloco h3 { font-size: var(--t-gg); }
}

.como__intro { max-width: 34rem; margin: -1rem 0 2.25rem; color: rgb(255 255 255 / .86); font-size: var(--t-g); }
.recursos__troca { margin: 0 0 .3rem; color: var(--mudo); font-size: var(--t-p); }

/* problema: dores como mensagens empilhadas, em fundo neutro */
.problema { background: var(--nevoa); }
.problema__grade { display: grid; gap: 2rem; align-items: center; }
.problema__texto p { max-width: 26rem; margin: 0; font-size: var(--t-g); color: var(--mudo); }
.dores { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.dor { display: flex; align-items: center; gap: .9rem; max-width: 34rem; padding: .95rem 1.1rem; border-radius: 20px 20px 20px 5px; background: var(--papel); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.dor:nth-child(even) { margin-left: auto; border-radius: 20px 20px 5px 20px; }
.dor p { margin: 0; }
.dor__ic { flex: none; box-sizing: content-box; width: 1.5rem; height: 1.5rem; padding: .6rem; border-radius: 50%; background: var(--nevoa); fill: none; stroke: var(--azul-texto); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) { .problema__grade { grid-template-columns: .8fr 1.2fr; gap: 4rem; } }

/* agitação: o custo da rotina e a conta da comissão */
.agita { background: var(--rodape-bg); color: var(--rodape-tinta); }
.agita :focus-visible { outline-color: #fff; }
.agita__grade { display: grid; gap: 2.5rem; align-items: start; }
.custos { display: grid; margin: 0; padding: 0; list-style: none; }
.custos li { padding-block: 1rem; border-top: 1px solid rgb(255 255 255 / .18); color: rgb(244 245 250 / .8); }
.custos li:last-child { border-bottom: 1px solid rgb(255 255 255 / .18); }
.custos strong { display: block; color: #fff; font-family: var(--fonte-titulo); font-size: var(--t-g); font-weight: 700; }
.calc { padding: 1.25rem; border-radius: 16px; background: var(--papel); color: var(--tinta); }
.calc :focus-visible { outline-color: var(--foco); }
.calc h3 { font-size: var(--t-g); }
.calc__aviso { margin: .35rem 0 1rem; color: var(--mudo); font-size: var(--t-p); }
.calc__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .85rem; align-items: end; }
.calc__res { margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: 12px; background: var(--nevoa); }
.calc__res p { margin: 0; }
.calc__valor { display: block; margin-block: .1rem; color: var(--azul-texto); font-family: var(--fonte-titulo); font-size: var(--t-gg); font-weight: 800; line-height: 1.15; }
.calc__res { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
.calc__lado { display: grid; align-content: start; gap: .15rem; padding: .85rem 1rem; border-radius: 10px; background: var(--papel); }
.calc__lado--peddi { box-shadow: inset 0 0 0 2px var(--laranja); }
.calc__rotulo { display: flex; align-items: center; gap: .35rem; font-size: var(--t-p); font-weight: 700; }
.calc__fixo { flex: none; width: 1.2em; height: 1.2em; color: var(--laranja); } /* alfinete: o valor está pregado, não muda */
.calc__lado .calc__valor { margin: 0; font-size: clamp(1.4rem, 5vw, var(--t-gg)); }
.calc__lado--peddi .calc__valor { color: var(--tinta); }
.calc__valor small { font: 500 var(--t-p)/1 var(--fonte); color: var(--mudo); }
.calc__nota { color: var(--mudo); font-size: var(--t-p); }
.calc__economia { grid-column: 1 / -1; font-size: var(--t-m, 1.05rem); }
.calc__economia strong { box-shadow: inset 0 -.35em 0 color-mix(in srgb, var(--laranja) 45%, transparent); } /* grifo laranja, legível nos dois temas */
.calc__conta { margin: .85rem 0 0; color: var(--mudo); font-size: var(--t-p); }
@media (min-width: 900px) {
  .agita__grade { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .calc { padding: 2rem; }
}

.loja-real__grade { display: grid; gap: 2.25rem; align-items: center; }
.loja-real__texto p { max-width: 34rem; }
/* celular: proporção 9:19,5, moldura fina escura com reflexo, ilha e sombra projetada */
/* palco dá a perspectiva; site.js muda --rx, --ry (graus), --gx, --gy (brilho) e --sx, --sy (sombra) conforme o ponteiro */
.celular-palco { width: min(100%, 17.5rem); justify-self: center; perspective: 1200px; }
.celular { position: relative; width: 100%; aspect-ratio: 9 / 19.5; margin: 0; padding: .5rem; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s cubic-bezier(.2, .8, .2, 1); border-radius: 2.75rem; background: linear-gradient(145deg, #4a4a52, #101013 38%, #26262b 70%, #3b3b42); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), inset 0 0 0 .22rem #0a0a0c, var(--sx, 0px) calc(2.5rem + var(--sy, 0px)) 2.5rem -1.25rem rgb(0 0 0 / .4), 0 .6rem .9rem rgb(0 0 0 / .18); }
.celular[data-ativo] { transition-duration: .12s; }
.celular::before { content: ""; position: absolute; z-index: 2; top: .95rem; left: 50%; width: 28%; height: 1.2rem; border-radius: 999px; background: #000; transform: translateX(-50%); }
.celular::after { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--gx, 15%) var(--gy, 10%), rgb(255 255 255 / .22), transparent 55%), linear-gradient(115deg, rgb(255 255 255 / .1), transparent 28%); pointer-events: none; }
.celular__tela { width: 100%; height: 100%; border-radius: 2.3rem; overflow: hidden; background: #000; }
.celular__tela img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.celular__botao { position: absolute; width: 3px; border-radius: 2px; background: #1b1b1f; }
.celular__botao--vol { left: -3px; top: 22%; height: 9%; }
.celular__botao--lig { right: -3px; top: 28%; height: 13%; }
@media (min-width: 900px) {
  .loja-real__grade { grid-template-columns: 1fr auto; gap: 5rem; }
  .celular-palco { width: 19rem; }
  /* parado: levemente inclinado; sem ponteiro fino ou com movimento reduzido o JS não mexe */
  .celular { --rx: 2deg; --ry: -9deg; --sx: 10px; }
}

.preco__cab { max-width: 34rem; margin: 0 auto 3rem; text-align: center; }
.preco__cab h2 { margin-bottom: .6rem; }
.preco__cab p { margin: 0; color: var(--mudo); }
.preco__periodo { width: fit-content; max-width: 100%; margin: 0 auto 2.5rem; padding: 0; border: 0; }
.preco__periodo[hidden] { display: none; }
.preco__periodo legend { float: none; width: auto; margin: 0 auto .65rem; padding: 0; text-align: center; font-weight: 700; }
.preco__opcoes { display: flex; justify-content: center; gap: .25rem; width: fit-content; max-width: 100%; margin-inline: auto; padding: .25rem; border: 1px solid var(--linha); border-radius: 999px; background: color-mix(in srgb, var(--nevoa) 55%, transparent); }
.preco__opcoes input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.preco__opcoes label { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .45rem .9rem; border-radius: 999px; color: var(--tinta); font-size: .95rem; font-weight: 700; cursor: pointer; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.preco__opcoes label span { padding: .1rem .4rem; border-radius: 999px; background: var(--nevoa); color: var(--azul-texto); font-size: .7rem; transition: background-color .3s ease, color .3s ease; }
.preco__opcoes input:checked + label { background: var(--azul); color: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .18); }
.preco__opcoes input:checked + label span { background: #fff; color: var(--azul); }
.preco__opcoes input:focus-visible + label { outline: 3px solid var(--foco); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .preco__opcoes label, .preco__opcoes label span { transition: none; } }
.preco__planos { display: grid; gap: 2rem; max-width: 56rem; margin-inline: auto; }
/* card do plano: o "recomendado", com anel azul suave e leve escala */
.plano { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 32rem; margin-inline: auto; padding: 2.75rem 1.5rem 1.75rem; border: 1px solid var(--linha); border-radius: 20px; background: var(--papel); box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul) 16%, transparent), 0 .6rem 1.6rem -.9rem rgb(0 0 0 / .3); text-align: center; transition: box-shadow .2s ease-out, border-color .2s ease-out; }
.plano__selo { position: absolute; top: 0; left: 50%; padding: .3rem .95rem; border-radius: 999px; background: var(--azul); color: #fff; font-size: .8rem; font-weight: 700; white-space: nowrap; transform: translate(-50%, -50%); }
.plano__icone { width: 40px; height: 40px; border-radius: 10px; }
.plano__nome { margin: .6rem 0 .3rem; font-size: var(--t-gg); }
.plano__desc { margin: 0 auto 1.25rem; max-width: 18rem; color: var(--mudo); font-size: .95rem; }
.plano__de { position: absolute; top: .85rem; right: 1rem; margin: 0; text-align: right; color: var(--mudo); font-size: .75rem; }
.plano__de s { text-decoration-thickness: 2px; }
.preco__planos .plano__selo { left: 1.5rem; transform: translateY(-50%); }
.plano__preco { display: flex; align-items: baseline; justify-content: center; gap: .35rem; margin: 0; font-family: var(--fonte-titulo); font-weight: 800; }
.plano__rs { font-size: 1.5rem; }
.plano__num { font-size: 4.25rem; line-height: 1; letter-spacing: -.04em; }
.plano__mes { margin: 0 0 .5rem; color: var(--mudo); font-size: .95rem; }
.plano__termo { min-height: 2.8em; margin: 0 0 1.25rem; color: var(--mudo); font-size: .85rem; }
.plano__cta { width: 100%; }
.plano__bloco { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linha); text-align: left; }
.plano__bloco h4 { margin: 0 0 .75rem; font: 700 .8rem/1 var(--fonte-titulo); color: var(--mudo); }
.plano__bloco ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.plano__bloco li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; }
.plano__visual { display: grid; gap: .85rem; margin: 1.25rem 0 0; padding: 1rem; border: 1px solid #b7d9c2; border-radius: 14px; background: #eff8f1; color: #203b29; font-size: 1rem; text-align: left; }
.plano__visual p { display: grid; gap: .25rem; margin: 0; }
.plano__visual-titulo { font-size: 1.05rem; line-height: 1.35; }
.plano__visual p span > strong { color: #164b2b; font-size: 1.2rem; white-space: nowrap; }
.plano__visual-cta { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: .65rem 1rem; border-radius: 10px; background: #187a45; color: #fff; font-weight: 800; text-align: center; text-decoration: none; }
.plano__visual-cta:focus-visible { outline: 3px solid #164b2b; outline-offset: 3px; }
.plano__ic { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem; fill: none; stroke: var(--azul-texto); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.plano__nao { color: var(--mudo); }
.plano__nao .plano__ic { stroke: var(--mudo); }
@media (hover: hover) and (pointer: fine) {
  .plano__visual-cta:hover, .plano__visual-cta:focus-visible { background: #125f35; }
  .plano:hover, .plano:focus-within { border-color: var(--azul-texto); box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul) 24%, transparent), 0 1.4rem 2.6rem -1rem rgb(0 0 0 / .4); }
}
@media (min-width: 900px) { .preco__planos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .preco__planos .plano { max-width: none; } }

/* ---------- formulário ---------- */
.contato__grade { display: grid; gap: 2rem; align-items: start; }
.contato__texto p { max-width: 30rem; }
.contato__form :focus-visible { outline-color: var(--foco); }
.contato__form { padding: 1.25rem; color: var(--tinta); border: 0; border-radius: 16px; background: var(--papel); }
.form { display: grid; gap: 1rem; }
.campo label { display: block; margin-bottom: .35rem; font-weight: 700; }
.campo input, .campo select { width: 100%; min-height: 48px; padding: .55rem .8rem; border: 2px solid var(--borda-campo); border-radius: 10px; background: var(--papel); color: var(--tinta); font: inherit; }
/* select próprio: sem seta nativa, chevron por background-image (cor fixa por tema) e espaço à direita para ele */
.campo select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252525' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.2rem; cursor: pointer; }
@media (prefers-color-scheme: dark) {
  .campo select { color-scheme: dark; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F5FA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
}
@media (hover: hover) and (pointer: fine) {
  .campo input:hover, .campo select:hover, .campo input:focus-visible, .campo select:focus-visible { border-color: var(--tinta); }
}
.campo input:focus-visible, .campo select:focus-visible { border-color: var(--tinta); outline: 3px solid var(--foco); outline-offset: 2px; }
.campo [aria-invalid="true"] { border-color: var(--erro); }
.campo__erro { margin: .35rem 0 0; color: var(--erro); font-size: .95rem; font-weight: 600; }
.campo__erro[hidden] { display: none; }
.form > .campo__erro { margin: 0; }
.form__lgpd { margin: 0; color: var(--mudo); font-size: var(--t-p); }
.form__enviar { width: 100%; }
.enviado { padding: .5rem 0; }
.enviado:focus-visible { outline-offset: 6px; }
.enviado::before { content: ""; display: block; width: 3.25rem; height: 3.25rem; margin-bottom: 1rem; border-radius: 50%; background: var(--azul-texto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 60% no-repeat; }
.enviado__titulo { margin: 0 0 .5rem; font-size: var(--t-gg); }
@media (min-width: 900px) {
  .contato__grade { grid-template-columns: 1fr 1.1fr; gap: 4rem; }
  /* o texto fica parado na tela enquanto o formulário rola */
  .contato__texto { position: sticky; top: 6rem; align-self: start; }
  .contato__form { padding: 2rem; }
}

/* ---------- dúvidas: acordeão animado; o item aberto vira cartão ---------- */
.duvidas__grade { display: grid; gap: 2rem; }
.duvidas__lado { display: contents; }
.duvidas__cab { order: 1; }
.duvidas__cab p { max-width: 24rem; margin: 0; color: var(--mudo); }
.duvidas__lista { order: 2; max-width: 46rem; border-top: 1px solid var(--linha); }
.duvidas__ajuda { order: 3; }
.duvidas__ajuda p { margin: 0 0 .75rem; font-weight: 700; }
.duvidas { border-top: 1px solid var(--linha); }
.duvidas details { border-bottom: 1px solid var(--linha); }
.duvidas summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: .75rem .5rem; border-radius: 12px; color: var(--tinta); font-family: var(--fonte-titulo); font-size: 1.05rem; font-weight: 600; cursor: pointer; list-style: none; transition: background-color .2s ease-out; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
/* "+" feito de dois traços em círculo neutro; ao abrir gira e vira "×", e o círculo fica laranja */
.duvidas summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat, var(--nevoa); transition: transform .3s var(--ease), background-color .2s ease-out; }
.duvidas details[open] summary::after { transform: rotate(135deg); background-color: var(--laranja); color: var(--sobre-laranja); }
.duvidas details p { max-width: 38rem; margin: 0 0 1.1rem; padding-inline: .5rem; color: var(--mudo); }
@media (hover: hover) and (pointer: fine) {
  .duvidas summary:hover, .duvidas summary:focus-visible { background-color: color-mix(in srgb, var(--tinta) 5%, transparent); }
  .duvidas summary:hover::after, .duvidas summary:focus-visible::after { background-color: color-mix(in srgb, var(--tinta) 16%, var(--papel)); }
  .duvidas details[open] summary:hover::after, .duvidas details[open] summary:focus-visible::after { background-color: var(--laranja); }
}
/* altura animada (Chrome/Edge/Safari recentes); sem suporte, abre normal */
:root { interpolate-size: allow-keywords; --ease: cubic-bezier(.2, .8, .2, 1); --ease-s: cubic-bezier(.65, 0, .35, 1); --ease-p: cubic-bezier(.22, 1, .36, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-sai: cubic-bezier(.55, 0, 1, .45); }
.duvidas details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
.duvidas details[open]::details-content { block-size: auto; }
.duvidas details p { opacity: 0; transform: translateY(-6px); transition: opacity .3s ease-out, transform .35s var(--ease); }
.duvidas details[open] p { opacity: 1; transform: none; transition-delay: .08s; }
@media (min-width: 900px) {
  .duvidas__grade { grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: start; }
  .duvidas__lado { display: block; position: sticky; top: 6rem; }
  .duvidas__lista { max-width: none; }
  .duvidas__ajuda { margin-top: 2rem; }
}

/* ---------- rodapé ---------- */
.rodape { padding-block: 3rem 1.5rem; background: var(--rodape-bg); color: var(--rodape-tinta); }
.rodape :focus-visible { outline-color: var(--laranja); }
.rodape__grade { display: grid; gap: 2rem; }
.rodape .logo-peddi { --logo-altura: 30px; }
.rodape__slogan { margin: .75rem 0 .35rem; font-family: var(--fonte-titulo); font-weight: 700; }
.rodape__frase { max-width: 22rem; margin: 0; color: color-mix(in srgb, var(--rodape-tinta) 75%, transparent); font-size: .95rem; }
.rodape__grupo h2 { margin: 0 0 .5rem; font-size: .95rem; font-weight: 600; letter-spacing: 0; }
.rodape__grupo ul { margin: 0; padding: 0; list-style: none; }
.rodape a { display: flex; align-items: center; gap: .65rem; min-height: 44px; color: color-mix(in srgb, var(--rodape-tinta) 80%, transparent); text-decoration: none; transition: color .15s ease-out; }
.rodape__ic { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* sublinhado que entra pela esquerda */
.rodape__txt { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .2s ease-out; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
  .rodape a:hover, .rodape a:focus-visible { color: var(--rodape-tinta); }
  .rodape a:hover .rodape__txt, .rodape a:focus-visible .rodape__txt { background-size: 100% 1px; }
}
.rodape__fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--rodape-tinta) 18%, transparent); color: color-mix(in srgb, var(--rodape-tinta) 70%, transparent); font-size: var(--t-p); }
.rodape__fim p { margin: 0; }
@media (min-width: 900px) {
  .rodape { padding-block: 4rem 1.75rem; }
  .rodape__grade { grid-template-columns: 1.6fr 1.3fr 1fr 1fr; gap: 3rem; }
}

/* ---------- privacidade: documento fácil de escanear ---------- */
.doc { display: grid; gap: 1.5rem; padding-block: 2.5rem 4rem; }
.doc__cab h1 { margin: 0 0 .4rem; font-size: var(--t-h1); line-height: 1.05; }
.doc__data { margin: 0 0 1.5rem; color: var(--mudo); font-size: var(--t-p); }
.doc__resumo { padding: 1.1rem 1.25rem; border-left: 4px solid var(--laranja); border-radius: 0 var(--raio) var(--raio) 0; background: var(--nevoa); }
.doc__resumo h2 { margin: 0 0 .4rem; font-size: var(--t-g); }
.doc__resumo p { margin: 0; max-width: 65ch; }
.doc__indice ol { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; counter-reset: sec; }
.doc__indice li { counter-increment: sec; }
.doc__indice a { display: flex; gap: .6rem; align-items: center; min-height: 44px; text-decoration: none; }
.doc__indice a::before { content: counter(sec); flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 6px; background: var(--nevoa); color: var(--azul-texto); font-size: .8rem; font-weight: 700; }
.doc__indice--recolhido { border: 1px solid var(--linha); border-radius: var(--raio); }
.doc__indice--recolhido summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 1rem; font-weight: 700; cursor: pointer; list-style: none; }
.doc__indice--recolhido summary::-webkit-details-marker { display: none; }
.doc__indice--recolhido summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; }
.doc__indice--recolhido[open] summary::after { content: "\2212"; }
.doc__indice--recolhido nav { padding: 0 1rem .75rem; }
.doc__indice--lateral { display: none; }
.doc__texto section { padding-top: 1.75rem; }
.doc__texto h2 { margin: 0 0 .75rem; font-size: var(--t-gg); line-height: 1.15; }
.doc__texto p, .doc__texto ul { max-width: 65ch; margin: 0 0 1rem; }
.doc__texto ul { display: grid; gap: .4rem; padding-left: 1.25rem; }
.doc__texto a { color: var(--azul-texto); }
@media (hover: hover) and (pointer: fine) {
  .doc__indice a:hover, .doc__indice a:focus-visible { color: var(--azul-texto); }
}
@media (min-width: 900px) {
  .doc { grid-template-columns: 15rem 1fr; column-gap: 4rem; padding-block: 4rem 6rem; }
  .doc__cab { grid-column: 1 / -1; max-width: 46rem; }
  .doc__indice--recolhido { display: none; }
  .doc__indice--lateral { display: block; position: sticky; top: 6rem; align-self: start; }
  .doc__indice-titulo { margin: 0 0 .5rem; font: 700 .8rem/1 var(--fonte-titulo); color: var(--mudo); }
  .doc__texto section:first-child { padding-top: 0; }
}

/* ---------- Recebemos ---------- */
.pagina-curta { width: min(100% - 2rem, 44rem); padding-block: 3rem 4rem; }
.pagina-curta .btn { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, .duvidas details::details-content, .menu::backdrop { animation: none !important; transition: none !important; }
}

/* link para o cardápio da loja real: cartãozinho com logo, nome e seta de link externo */
.loja-link { display: inline-flex; align-items: center; gap: .85rem; min-height: 64px; padding: .55rem 1.1rem .55rem .6rem; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 16px;
  background: color-mix(in srgb, currentColor 6%, transparent); color: inherit; text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.loja-link__logo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--azul); color: #fff; font-weight: 800; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent); }
.loja-link__texto { display: grid; line-height: 1.2; text-align: left; }
.loja-link__texto span { font-size: var(--t-p); opacity: .75; }
.loja-link__texto strong { font-family: var(--fonte-titulo); font-size: 1.05rem; }
.loja-link__seta { flex: none; width: 20px; height: 20px; margin-left: .35rem; color: var(--laranja); transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) {
  .loja-link:hover, .loja-link:focus-visible { transform: translateY(-2px); border-color: var(--laranja); box-shadow: 0 10px 24px -14px rgb(0 0 0 / .5); }
  .loja-link:hover .loja-link__seta, .loja-link:focus-visible .loja-link__seta { transform: translate(3px, -3px); }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .loja-link:hover, .loja-link:focus-visible, .loja-link:hover .loja-link__seta, .loja-link:focus-visible .loja-link__seta { transform: none; }
}