/* Natal 2026 · Paim Fotos e Mimos
   Tokens do design system "Paim Fotos e Mimos" (Claude Design). */

@font-face{font-family:'Fredoka';font-weight:500;font-display:swap;src:url('fonts/Fredoka-500.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-weight:600;font-display:swap;src:url('fonts/Fredoka-600.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-weight:700;font-display:swap;src:url('fonts/Fredoka-700.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-weight:400;font-display:swap;src:url('fonts/Nunito-400.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-weight:600;font-display:swap;src:url('fonts/Nunito-600.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-weight:700;font-display:swap;src:url('fonts/Nunito-700.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-weight:800;font-display:swap;src:url('fonts/Nunito-800.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-weight:700;font-display:swap;src:url('fonts/Caveat-700.woff2') format('woff2')}

:root{
  --paim-red-50:#FEF0EC;--paim-red-100:#FDDAD1;--paim-red-200:#FAB3A3;--paim-red-500:#F23D20;--paim-red-600:#D62E13;--paim-red-700:#AF240F;--paim-red-800:#861C0C;
  --paim-teal-50:#E6F1F2;--paim-teal-100:#C2DDE0;--paim-teal-200:#8EBFC4;--paim-teal-400:#1D6770;--paim-teal-500:#024750;--paim-teal-600:#023A42;--paim-teal-700:#012D33;
  --paim-amber-50:#FEF6E3;--paim-amber-100:#FDE8B8;--paim-amber-300:#F8BA37;--paim-amber-400:#F6A301;--paim-amber-600:#A86E00;
  --paim-green-100:#DCEADD;--paim-green-500:#377160;
  --paim-cream-50:#FFFBF4;--paim-cream-100:#FCF2E1;--paim-cream-200:#F5E8D3;--paim-cream-300:#EAD8BC;--paim-cream-400:#D8C2A0;
  --paim-ink-900:#202125;--paim-ink-700:#3D3E44;--paim-ink-500:#6A6B72;--paim-ink-200:#DCD7CE;--paim-white:#FFFFFF;

  --brand-primary:var(--paim-red-500);--brand-primary-hover:var(--paim-red-600);--brand-primary-soft:var(--paim-red-50);
  --brand-secondary:var(--paim-teal-500);--brand-accent:var(--paim-amber-400);
  --surface-page:var(--paim-cream-50);--surface-card:var(--paim-white);--surface-sunken:var(--paim-cream-100);--surface-photo:var(--paim-cream-200);
  --text-strong:var(--paim-ink-900);--text-body:var(--paim-ink-700);--text-muted:var(--paim-ink-500);
  --border-subtle:var(--paim-cream-300);--border-default:var(--paim-ink-200);--border-strong:var(--paim-ink-900);

  --font-display:'Fredoka','Nunito',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
  --font-hand:'Caveat','Nunito',cursive;
  --ls-label:.06em;

  --radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:28px;--radius-pill:999px;
  --container:1200px;--gutter:24px;
  --shadow-sm:0 1px 2px rgba(2,71,80,.08),0 1px 1px rgba(2,71,80,.04);
  --shadow-md:0 6px 16px -4px rgba(2,71,80,.14),0 2px 4px rgba(2,71,80,.06);
  --shadow-lg:0 18px 40px -12px rgba(2,71,80,.24),0 4px 10px rgba(2,71,80,.06);
  --shadow-foto:0 22px 40px -14px rgba(60,10,2,.55),0 4px 10px rgba(60,10,2,.25);
  --shadow-block:4px 4px 0 var(--paim-teal-500);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:120ms;--dur-base:200ms;--dur-slow:360ms;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:400 16px/1.55 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--font-display);color:var(--text-strong);margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
a{color:var(--paim-teal-500)}
a:hover{color:var(--brand-primary)}
ul,ol{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--paim-teal-400);outline-offset:3px;border-radius:6px}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.pular-link{position:absolute;left:12px;top:-60px;z-index:60;background:var(--paim-teal-500);color:#fff;padding:10px 16px;border-radius:var(--radius-pill);font-weight:700}
.pular-link:focus{top:12px;color:#fff}

/* ── Botões (pílula, Fredoka) ───────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:var(--radius-pill);
  border:2px solid transparent;font:600 16px/1 var(--font-display);letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-lg{height:52px;padding:0 28px;font-size:18px}
.btn-sm{height:36px;padding:0 16px;font-size:15px}
.btn-cheio{width:100%}
.btn-primario{background:var(--brand-primary);color:#fff}
.btn-primario:hover{background:var(--brand-primary-hover);color:#fff}
.btn-outline{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.btn-outline:hover{background:var(--surface-sunken);color:var(--text-strong)}
.btn-creme{background:var(--paim-cream-50);color:var(--paim-red-700)}
.btn-creme:hover{background:var(--paim-cream-200);color:var(--paim-red-800)}
.link-claro{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:#fff;font:700 16px var(--font-body);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.link-claro:hover{color:var(--paim-cream-200)}
.btn-linha-clara{background:transparent;color:#fff;border-color:rgba(255,251,244,.85)}
.btn-linha-clara:hover{background:rgba(255,251,244,.14);color:#fff}
.btn-icone{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:0;background:transparent;cursor:pointer;color:var(--text-strong)}
.btn-icone:hover{background:var(--surface-sunken)}
.btn-texto{border:0;background:none;padding:8px;font:700 14px var(--font-body);color:var(--text-muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.btn-texto:hover{color:var(--paim-red-700)}

/* ── Aviso + topo ───────────────────────────────────── */
.aviso{background:var(--paim-teal-500);color:var(--paim-cream-100);text-align:center;font:600 14px/1.4 var(--font-body);padding:9px var(--gutter)}
.topo{position:sticky;top:0;z-index:30;background:rgba(255,251,244,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color var(--dur-base)}
.topo.rolou{border-bottom-color:var(--border-subtle)}
.topo-in{max-width:var(--container);margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;gap:24px}
.marca img{height:52px;width:auto}
.menu{display:flex;gap:4px;margin-left:auto}
.menu a{font:700 15px var(--font-body);color:var(--text-strong);text-decoration:none;padding:8px 12px;border-radius:var(--radius-pill);transition:background var(--dur-fast)}
.menu a:hover{background:var(--paim-cream-200);color:var(--text-strong)}
.btn-lista{position:relative;flex:none}
.contador{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-pill);background:var(--brand-primary);color:#fff;font:800 12px/1 var(--font-body)}
.contador[hidden]{display:none}
.contador.pulou{animation:pulo .42s var(--ease-bounce)}
@keyframes pulo{0%{transform:scale(.6)}100%{transform:scale(1)}}

/* ── Hero: a caixa aberta ───────────────────────────── */
.hero{max-width:calc(var(--container) + 2*var(--gutter));margin:0 auto;padding:20px var(--gutter) 0}
.hero-caixa{position:relative;overflow:hidden;background:var(--paim-red-600);border-radius:var(--radius-xl);min-height:clamp(540px,72vh,680px);
  display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:32px;padding:64px 64px 124px}
.fita{position:absolute;background:var(--paim-cream-50);pointer-events:none}
.fita-v{top:0;bottom:0;left:69%;width:34px}
.fita-h{left:0;right:0;bottom:44px;height:34px}
.hero-caixa .fita{opacity:.96}
.hero-texto{position:relative;z-index:2;max-width:560px}
.hero h1{color:#fff;font-weight:700;font-size:clamp(2.6rem,5.2vw,4.4rem);line-height:1.02}
.hero-sub{margin-top:22px;color:var(--paim-cream-100);font-size:19px;line-height:1.6;max-width:30em}
.hero-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:34px}
.hero-fotos{position:relative;z-index:1;height:100%;min-height:440px}
.polaroide{margin:0;background:var(--paim-cream-50);padding:10px 10px 0;box-shadow:var(--shadow-foto)}
.polaroide img{aspect-ratio:1/1;object-fit:cover;width:100%;background:var(--surface-photo)}
.polaroide figcaption{font:700 26px/1 var(--font-hand);color:var(--paim-teal-500);text-align:center;padding:10px 4px 14px}
.hero-fotos .polaroide{position:absolute;width:clamp(170px,19vw,236px)}
.hero-fotos .p1{left:4%;top:4%;--r:-7deg;transform:rotate(var(--r))}
.hero-fotos .p2{right:0;top:18%;--r:5deg;transform:rotate(var(--r));z-index:2}
.hero-fotos .p3{left:18%;bottom:0;--r:-2deg;transform:rotate(var(--r));z-index:3}
.site-pronto .hero-fotos .polaroide{animation:cai .9s var(--ease-bounce) both}
.site-pronto .hero-fotos .p2{animation-delay:.12s}
.site-pronto .hero-fotos .p3{animation-delay:.24s}
@keyframes cai{0%{opacity:0;transform:translateY(-120px) rotate(calc(var(--r) - 10deg))}35%{opacity:1}100%{opacity:1;transform:rotate(var(--r))}}
html.com-abertura:not(.site-pronto) .hero-fotos .polaroide{opacity:0}

/* ── Atalhos ────────────────────────────────────────── */
.atalhos{max-width:var(--container);margin:0 auto;padding:40px var(--gutter) 8px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.atalhos ul{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:var(--radius-pill);background:var(--surface-sunken);
  border:1.5px solid var(--border-subtle);color:var(--text-strong);font:700 15px var(--font-body);text-decoration:none;transition:background var(--dur-fast)}
.tag .ic{width:17px;height:17px;color:var(--paim-teal-500)}
.tag:hover{background:var(--paim-cream-200);color:var(--text-strong)}
.tag-destaque{background:var(--paim-amber-100);border-color:var(--paim-amber-300)}
.tag-destaque:hover{background:var(--paim-amber-300)}
.bilhete{font:700 28px/1.1 var(--font-hand);color:var(--paim-teal-500);transform:rotate(-2deg)}

/* ── Faixas ─────────────────────────────────────────── */
.faixa{position:relative;padding:88px 0}
.faixa-in{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.faixa-creme{background:var(--surface-sunken)}
.faixa-petroleo{background:var(--paim-teal-500);color:var(--paim-cream-100);margin-top:48px}
.faixa-vermelha{background:var(--paim-red-600);color:var(--paim-cream-100);overflow:hidden}
.secao-cabeca{position:relative;max-width:640px;margin-bottom:40px}
.secao-cabeca h2{font-weight:600;font-size:clamp(2rem,3.6vw,2.75rem);line-height:1.1}
.secao-cabeca p{margin-top:14px;font-size:18px;line-height:1.65;max-width:34em}
.secao-cabeca .bilhete-lado{position:absolute;right:-180px;top:6px;margin:0;font-size:32px}
.faixa-petroleo h2,.faixa-vermelha h2{color:#fff}
.secao-cabeca-lado{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.secao-cabeca-lado>div{max-width:600px}

.passos-foto{display:flex;gap:10px;flex:none}
.passos-foto li{display:flex;align-items:center;gap:10px;background:rgba(255,251,244,.1);border:1.5px solid rgba(255,251,244,.28);border-radius:var(--radius-pill);
  padding:6px 16px 6px 6px;font:700 15px var(--font-body);color:#fff}
.passos-foto span{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--brand-accent);color:var(--paim-ink-900);font:600 16px/1 var(--font-display)}

/* ── Grade de produtos (ProductCard do DS) ──────────── */
.grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px}
.grade-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.produto{display:flex;flex-direction:column;gap:12px}
.produto-foto{position:relative;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-photo);transition:box-shadow var(--dur-base) var(--ease-out)}
.produto-foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.grade .produto.largo{grid-column:span 2}
.grade .produto.largo .produto-foto{aspect-ratio:auto;height:0;padding-bottom:calc(37.5% - 9px);position:relative}
.grade .produto.largo .produto-foto img{position:absolute;inset:0}
.produto:hover .produto-foto{box-shadow:var(--shadow-md)}
.produto:hover .produto-foto img{transform:scale(1.04)}
.produto h3{font-weight:600;font-size:19px;line-height:1.25}
.produto-nota{font-size:15px;line-height:1.5;color:var(--text-muted);margin-top:4px}
.produto-pe{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:2px;min-height:44px}
.preco{font:600 22px/1 var(--font-display);color:var(--paim-red-600);font-variant-numeric:tabular-nums;white-space:nowrap}
.faixa-creme .produto-foto{background:var(--paim-cream-300)}

.adicionar{flex:none}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--paim-teal-500);border-radius:var(--radius-pill);background:var(--paim-teal-50);height:44px}
.stepper button{width:40px;height:40px;border:0;background:transparent;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--paim-teal-500)}
.stepper button:hover{background:rgba(2,71,80,.08)}
.stepper .ic{width:18px;height:18px}
.stepper output{min-width:22px;text-align:center;font:800 16px var(--font-body);color:var(--paim-teal-600);font-variant-numeric:tabular-nums}

/* Polaroides na faixa petróleo */
.grade-polaroide{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px}
.grade-polaroide .produto{background:var(--paim-cream-50);padding:12px 12px 18px;box-shadow:0 22px 40px -16px rgba(0,0,0,.5);transform:rotate(var(--r,0deg));transition:transform var(--dur-slow) var(--ease-out)}
.grade-polaroide .produto:nth-child(3n+1){--r:-1.6deg}
.grade-polaroide .produto:nth-child(3n+2){--r:1.2deg}
.grade-polaroide .produto:nth-child(3n){--r:-.6deg}
.grade-polaroide .produto:hover{transform:rotate(0) translateY(-4px)}
.grade-polaroide .produto-foto{border-radius:0;aspect-ratio:1/1}
.grade-polaroide .produto:hover .produto-foto{box-shadow:none}
.grade-polaroide .produto-texto{padding:6px 4px 0}
.grade-polaroide .produto h3{color:var(--text-strong)}
.grade-polaroide .produto-pe{padding:0 4px}
.grade-polaroide .produto-nota{color:var(--text-muted)}

/* ── Kits ───────────────────────────────────────────── */
.faixa-vermelha .secao-cabeca p{color:var(--paim-cream-100)}
.grade-kits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.kit{display:grid;grid-template-columns:44% 1fr;background:var(--surface-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-block)}
.kit .produto-foto{border-radius:0;aspect-ratio:auto;height:100%;min-height:260px}
.kit:hover .produto-foto img{transform:scale(1.04)}
.kit-corpo{display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px}
.kit h3{font-weight:600;font-size:21px;line-height:1.2}
.selo{align-self:flex-start;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--radius-pill);background:var(--brand-accent);color:var(--paim-ink-900);font:800 12px/1 var(--font-body);letter-spacing:var(--ls-label);text-transform:uppercase}
.kit-itens{font-size:15px;line-height:1.5;color:var(--text-body)}
.kit-itens li{padding-left:16px;position:relative}
.kit-itens li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--paim-red-500)}
.kit-precos{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.kit-precos s{font-size:15px;color:var(--text-muted)}
.kit .preco{font-size:26px}
.kit .produto-pe{margin-top:auto}

/* ── Como pedir: trilha ligada pela fita ────────────── */
.trilha{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.trilha::before{content:"";position:absolute;left:28px;right:28px;top:27px;height:6px;border-radius:3px;background:var(--paim-red-100)}
.trilha li{position:relative}
.trilha-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--paim-red-500);color:#fff;box-shadow:0 0 0 8px var(--surface-page)}
.trilha-ic .ic{width:26px;height:26px}
.trilha h3{font-weight:600;font-size:22px;margin-top:18px}
.trilha p{margin-top:8px;font-size:16px;line-height:1.6;max-width:30ch}
.trilha strong{color:var(--text-strong)}

/* ── Fecho + rodapé ─────────────────────────────────── */
.fecho{padding:0 var(--gutter) 88px}
.fecho-in{max-width:var(--container);margin:0 auto;background:var(--paim-teal-500);border-radius:var(--radius-xl);padding:64px;color:var(--paim-cream-100);text-align:center}
.fecho h2{color:#fff;font-weight:700;font-size:clamp(2rem,4vw,3.25rem);line-height:1.08;max-width:18ch;margin:0 auto}
.fecho p{margin:16px auto 0;font-size:18px;max-width:36em}
.fecho-acoes{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 20px;margin-top:32px}
.fecho .btn-creme{color:var(--paim-teal-600)}
.rodape{background:var(--surface-sunken);border-top:1px solid var(--border-subtle)}
.rodape-in{max-width:var(--container);margin:0 auto;padding:40px var(--gutter) 120px;display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.rodape img{height:64px;width:auto}
.rodape p{font-size:15px;line-height:1.6}
.rodape .bilhete{margin-left:auto}
.rodape-texto{display:flex;flex-direction:column;gap:8px}
.insta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;font:700 16px var(--font-body);color:var(--paim-teal-500);text-decoration:none}
.insta:hover{color:var(--brand-primary)}
.fecho .fecho-insta{margin-top:20px;font-size:16px;color:var(--paim-cream-100)}
.fecho-insta a{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:4px;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.fecho-insta a:hover{color:var(--paim-cream-200)}
.fecho-insta .ic{width:18px;height:18px}

/* ── Barra da lista (celular) ───────────────────────── */
.barra-lista{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:35;display:none}
.barra-lista button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:0 10px 0 20px;border:0;border-radius:var(--radius-pill);
  background:var(--paim-teal-500);color:#fff;font:600 16px var(--font-body);box-shadow:var(--shadow-lg);cursor:pointer}
.barra-acao{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:var(--radius-pill);background:var(--brand-primary);font:600 16px var(--font-display)}

/* ── Lista (painel lateral) ─────────────────────────── */
.lista{margin:0 0 0 auto;padding:0;border:0;width:min(440px,100vw);height:100dvh;max-height:100dvh;max-width:100vw;background:var(--surface-page);color:var(--text-body);box-shadow:var(--shadow-lg)}
.lista::backdrop{background:rgba(32,33,37,.48)}
.lista[open]{animation:entra-lado var(--dur-slow) var(--ease-out)}
@keyframes entra-lado{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.lista-in{display:flex;flex-direction:column;height:100%}
.lista-cabeca{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 14px 24px;border-bottom:1px solid var(--border-subtle)}
.lista-cabeca h2{font-weight:600;font-size:24px}
.lista-corpo{flex:1;overflow:auto;padding:8px 24px}
.lista-itens li{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border-subtle)}
.lista-itens img{width:64px;height:64px;border-radius:var(--radius-md);object-fit:cover;background:var(--surface-photo)}
.lista-itens h3{font:600 16px/1.25 var(--font-display)}
.lista-itens .preco{font-size:16px;margin-top:4px;display:block}
.lista-itens .stepper{height:38px}
.lista-itens .stepper button{width:34px;height:34px}
.lista-vazia{display:none;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:48px 12px}
.lista-vazia img{width:96px}
.lista.vazia .lista-vazia{display:flex}
.lista.vazia .lista-pe{display:none}
.lista-pe{padding:18px 24px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--border-subtle);background:var(--surface-card);display:flex;flex-direction:column;gap:10px}
.lista-total{display:flex;justify-content:space-between;align-items:baseline;font:600 18px var(--font-display);color:var(--text-strong)}
.lista-total strong{font-size:28px;font-weight:600;color:var(--paim-red-600);font-variant-numeric:tabular-nums}
.lista-nota{font-size:14px;color:var(--text-muted)}
.lista-pe .btn-texto{align-self:center}

.aviso-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));z-index:50;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--paim-ink-900);color:#fff;font:600 15px var(--font-body);padding:12px 20px;border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);max-width:calc(100vw - 32px);text-align:center}
.aviso-toast.visivel{opacity:1;transform:translate(-50%,0)}

/* ── Abertura (recriação de "Abertura Logo") ─────────── */
.abertura{display:none}
html.com-abertura .abertura{display:block;position:fixed;inset:0;z-index:100;background:var(--paim-cream-50);overflow:hidden;cursor:pointer}
html.com-abertura body{overflow:hidden}
html.com-abertura.site-pronto body{overflow:auto}
.abertura-palco{position:absolute;left:50%;top:50%;width:1104px;height:680px;transform-origin:0 0}
.abertura-cena{position:absolute;inset:0;transform-origin:552px 326px}
.abertura-logo{position:absolute;left:0;top:0;width:1380px;height:640px;transform:scale(.8);transform-origin:0 0}
.abertura-parte{position:absolute;inset:0;will-change:transform,opacity}
.abertura-parte img{display:block;width:1380px;height:640px;max-width:none}
.abertura-sombra{position:absolute;left:30px;top:598px;width:470px;height:36px;border-radius:50%;background:rgba(2,71,80,.16);filter:blur(6px)}
.abertura-frase{position:absolute;left:0;right:0;top:586px;text-align:center;font:700 64px/1 var(--font-hand);color:var(--paim-teal-500);opacity:0}
.abertura-pular{position:absolute;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));height:40px;padding:0 18px;border-radius:var(--radius-pill);border:1.5px solid var(--border-default);
  background:rgba(255,251,244,.9);color:var(--text-body);font:700 14px var(--font-body);cursor:pointer}
.abertura-pular:hover{background:var(--paim-cream-200)}

/* ── Responsivo ─────────────────────────────────────── */
@media (max-width:1100px){
  .menu{display:none}
  .btn-lista{margin-left:auto}
  .grade{grid-template-columns:repeat(3,minmax(0,1fr))}
  .secao-cabeca .bilhete-lado{position:static;display:inline-block;margin-top:12px}
  .kit{grid-template-columns:1fr}
  .kit .produto-foto{aspect-ratio:4/3;min-height:0}
}
@media (max-width:860px){
  .hero-caixa{grid-template-columns:1fr;padding:44px 28px 36px;gap:12px;min-height:0}
  .hero-caixa .fita-v{display:none}
  .fita-h{bottom:150px;height:26px}
  .hero-fotos{min-height:0;height:340px}
  .hero-fotos .polaroide{width:clamp(140px,38vw,200px)}
  .hero-fotos .p1{left:0;top:10px}
  .hero-fotos .p2{right:0;top:0}
  .hero-fotos .p3{left:28%;bottom:0;top:auto}
  .secao-cabeca-lado{flex-direction:column;align-items:flex-start;gap:24px}
  .passos-foto{flex-wrap:wrap}
  .grade,.grade-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .grade-polaroide{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
  .grade-kits{grid-template-columns:1fr}
  .trilha{grid-template-columns:1fr;gap:28px}
  .trilha::before{left:27px;right:auto;top:28px;bottom:28px;width:6px;height:auto}
  .trilha li{padding-left:84px}
  .trilha-ic{position:absolute;left:0;top:0}
  .trilha h3{margin-top:12px}
  .fecho-in{padding:44px 24px}
  .faixa{padding:64px 0}
  .barra-lista:not([hidden]){display:block}
  .rodape .bilhete{margin-left:0}
}
@media (max-width:560px){
  :root{--gutter:16px}
  .topo-in{gap:12px;padding:8px var(--gutter)}
  .marca img{height:42px}
  .btn-lista span:not(.contador){display:none}
  .btn-lista{width:44px;padding:0;border-width:1.5px}
  .btn-lista .contador{position:absolute;top:-6px;right:-6px}
  .aviso{font-size:13px}
  .hero{padding-top:12px}
  .hero-caixa{border-radius:22px;padding:36px 22px 28px}
  .hero-sub{font-size:17px}
  .hero-acoes .btn{width:100%}
  .hero-acoes .link-claro{margin:0 auto}
  .hero-fotos{height:300px}
  .secao-cabeca p{font-size:17px}
  .grade,.grade-3{gap:28px 12px}
  .produto h3{font-size:16px}
  .produto-nota{display:none}
  .produto-pe{flex-direction:column;align-items:stretch;gap:8px}
  .preco{font-size:19px}
  .produto .adicionar,.produto .stepper{width:100%;justify-content:space-between}
  .produto .adicionar{justify-content:center}
  .grade-polaroide{gap:22px 12px}
  .grade-polaroide .produto{padding:8px 8px 12px}
  .kit-corpo{padding:18px}
  .kit .produto-pe{flex-direction:row;align-items:center}
  .kit .adicionar{width:auto}
  .rodape-in{padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.nowrap{white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}