/* ══════════════════════════════════════════════════════════════════════════════
   JU COOKIE DESIGNER · DESIGN SYSTEM
   Implementação em CSS do documento "Design System Ju.dc.html" (v1.0 · Fundação).

   Este arquivo é a FUNDAÇÃO compartilhada: tokens + base + componentes.
   A Landing consome ele por landing.css. As próximas páginas (/links,
   /ofertas/[slug]) devem consumir este mesmo arquivo — sem componente novo.

   O style.css legado continua servindo sobre.html, galeria.html,
   processo.html e contato.html e NÃO foi alterado.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 1 · TOKENS ─────────────────────────────────────────────────────────── */
:root{
  /* escalas primitivas */
  --ju-cocoa-950:#1F1411; --ju-cocoa-900:#2E1F1A; --ju-cocoa-800:#43302A; --ju-cocoa-700:#5A423A;
  --ju-cocoa-600:#74564B; --ju-cocoa-500:#8F6E60; --ju-cocoa-400:#AE8C7C; --ju-cocoa-300:#CBAE9E;
  --ju-cocoa-200:#E4CFC3; --ju-cocoa-100:#F2E5DC; --ju-cocoa-50:#FAF3EE;
  --ju-cookie-600:#B98B58; --ju-cookie-500:#CB9F6D; --ju-cookie-400:#DCB484; --ju-cookie-300:#E9C79C;
  --ju-cookie-200:#F2DBBC; --ju-cookie-100:#F8E9D6; --ju-cookie-50:#FCF4E9;
  --ju-raspberry-700:#8E3D50; --ju-raspberry-600:#B04C63; --ju-raspberry-500:#C96C80; --ju-raspberry-400:#DC97A7;
  --ju-raspberry-300:#F2C0CB; --ju-raspberry-200:#F8D7DE; --ju-raspberry-100:#FCE9EE; --ju-raspberry-50:#FEF5F7;
  --ju-cyan-800:#2C6169; --ju-cyan-700:#33747C; --ju-cyan-600:#438D96; --ju-cyan-500:#5DAEB7; --ju-cyan-400:#9CD7DC;
  --ju-cyan-300:#BCE4E8; --ju-cyan-200:#D6EEF1; --ju-cyan-100:#EAF7F8;
  --ju-butter-600:#D9AE3F; --ju-butter-500:#E7C45F; --ju-butter-400:#F0D77E; --ju-butter-300:#F6E2A2;
  --ju-butter-200:#FAECC4; --ju-butter-100:#FDF6E2;
  --ju-mint-600:#4E8A68; --ju-mint-500:#6FAE8A; --ju-mint-400:#8FC9A8; --ju-mint-300:#C6E2C9; --ju-mint-100:#EFF8F0;
  --ju-ink-950:#241C20; --ju-ink-900:#3A2A33; --ju-ink-800:#4A3540; --ju-ink-700:#5B4250; --ju-ink-500:#8C7986;
  --ju-ink-400:#B7A6B0; --ju-ink-300:#DCC9C9; --ju-ink-200:#ECDDDD; --ju-ink-150:#EFE1D6;
  --ju-ink-100:#F5EBE3; --ju-ink-75:#FAF4ED; --ju-ink-50:#FBF6F0; --ju-ink-0:#FFFCF8;

  /* tokens semânticos — claro */
  --color-background:var(--ju-ink-50);
  --color-background-alt:var(--ju-ink-100);
  --color-surface:var(--ju-ink-0);
  --color-surface-raised:rgba(255,252,248,.92);
  --color-surface-sunken:var(--ju-ink-100);
  --color-text-primary:var(--ju-ink-900);
  --color-text-secondary:var(--ju-ink-700);
  --color-text-tertiary:#6E5A66;
  --color-text-muted:#7E6C78;
  --color-text-inverse:var(--ju-ink-0);
  --color-border-subtle:var(--ju-ink-200);
  --color-border:var(--ju-ink-300);
  --color-border-strong:var(--ju-ink-400);
  --color-primary:var(--ju-cyan-400);
  --color-primary-strong:var(--ju-cyan-500);
  --color-primary-hover:var(--ju-cyan-800);
  --color-primary-soft:var(--ju-cyan-200);
  --color-on-primary:var(--ju-ink-900);
  --color-accent:var(--ju-raspberry-300);
  --color-accent-strong:var(--ju-raspberry-400);
  --color-accent-hover:var(--ju-raspberry-600);
  --color-accent-soft:var(--ju-raspberry-100);
  /* tinta framboesa para TEXTO PEQUENO: o 600 mede 5,1:1 só contra o creme;
     sobre background-alt e accent-soft ele cai para ~4,4. O 700 passa em todos. */
  --color-accent-ink:var(--ju-raspberry-700);
  --color-whatsapp:var(--ju-mint-400);
  --color-whatsapp-hover:var(--ju-mint-500);
  --color-focus:var(--ju-cyan-600);
  --color-success:#3E7355; --color-success-surface:var(--ju-mint-100);
  --color-warning:var(--ju-cocoa-600); --color-warning-surface:var(--ju-cookie-100);
  --color-error:var(--ju-raspberry-600); --color-error-surface:var(--ju-raspberry-100);
  --color-info:var(--ju-cyan-800); --color-info-surface:var(--ju-cyan-100);

  /* camada de campanha — institucional (default) */
  --campaign-primary:var(--color-primary);
  --campaign-primary-strong:var(--color-primary-strong);
  --campaign-secondary:var(--color-accent-strong);
  --campaign-accent:var(--ju-butter-300);
  --campaign-background:var(--color-background-alt);
  --campaign-surface:var(--color-surface);
  --campaign-text:var(--color-text-primary);
  --campaign-on-primary:var(--color-on-primary);
  --campaign-decoration:var(--color-accent-strong);
  --campaign-pattern:radial-gradient(circle at 1px 1px, rgba(220,151,167,.18) 1px, transparent 0);
  --campaign-pattern-size:22px 22px;

  /* tipografia */
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent:'Caveat', cursive;
  --font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --text-display:clamp(48px, 6.4vw, 90px);
  --text-h1:clamp(38px, 5.6vw, 76px);
  --text-h2:clamp(31px, 4.8vw, 60px);
  --text-h3:clamp(24px, 2.6vw, 34px);
  --text-h4:22px;
  --text-body-lg:18px; --text-body:16px; --text-body-sm:14px;
  --text-label:11px; --text-caption:12px;

  /* espaçamento */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;
  --space-24:96px; --space-30:120px;
  --container-max:1200px; --container-wide:1440px; --container-narrow:720px;
  --gutter:clamp(20px, 4vw, 40px);
  --section-y:clamp(64px, 8vw, 100px);
  --card-pad:clamp(18px, 2.4vw, 28px);
  --gap-grid:20px; --gap-stack:16px;
  --nav-h:72px;

  /* raios, notch e bordas */
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:26px;
  --radius-pill:100px; --radius-circle:50%;
  --notch-sm:8px; --notch-md:12px; --notch-lg:14px; --notch-xl:22px;
  --border-subtle:1px solid var(--color-border-subtle);
  --border-default:1px solid var(--color-border);
  --border-strong:2px solid var(--color-border-strong);

  /* sombras quentes — ameixa, nunca preto puro */
  --shadow-card:0 10px 22px rgba(58,42,51,.06), 0 2px 8px rgba(58,42,51,.04);
  --shadow-raised:0 18px 36px rgba(58,42,51,.10), 0 5px 14px rgba(58,42,51,.06);
  --shadow-modal:0 34px 70px rgba(36,28,32,.24), 0 10px 24px rgba(36,28,32,.12);
  --shadow-product:0 30px 60px rgba(58,42,51,.18), 0 12px 24px rgba(220,151,167,.14);
  --shadow-cta:0 14px 28px rgba(93,174,183,.34);
  --shadow-photo:0 10px 24px rgba(58,42,51,.10);

  /* motion */
  --duration-fast:180ms; --duration-standard:320ms; --duration-slow:620ms;
  --easing-standard:cubic-bezier(.4,0,.2,1);
  --easing-emphasized:cubic-bezier(.16,1,.3,1);
  --easing-exit:cubic-bezier(.65,0,.35,1);
}

/* ─── 1b · TOKENS — TEMA ESCURO ──────────────────────────────────────────── */
/* Igual ao bloco "tokens semânticos — ESCURO" do Design System.
   O atributo vai no <html>, nunca num wrapper interno: só assim o fundo do body
   acompanha e o overscroll do iPhone não mostra uma faixa creme.
   Só vale para quem declarar data-theme="dark" — as outras páginas seguem claras. */
[data-theme="dark"]{
  --color-background:#1B1418;
  --color-background-alt:#241C20;
  --color-surface:#2A2025;
  --color-surface-raised:rgba(56,44,50,.92);
  --color-surface-sunken:#171114;
  --color-text-primary:var(--ju-ink-100);
  --color-text-secondary:var(--ju-ink-300);
  --color-text-tertiary:var(--ju-ink-400);
  --color-text-muted:#A2919C;
  --color-text-inverse:var(--ju-ink-900);
  --color-border-subtle:#3A2E34;
  --color-border:#4C3C44;
  --color-border-strong:#6B5560;
  --color-primary:var(--ju-cyan-400);
  --color-primary-strong:var(--ju-cyan-300);
  --color-primary-hover:var(--ju-cyan-200);
  --color-primary-soft:#2C4247;
  --color-on-primary:#12191A;
  --color-accent:var(--ju-raspberry-300);
  --color-accent-strong:var(--ju-raspberry-300);
  --color-accent-hover:var(--ju-raspberry-200);
  --color-accent-soft:#43272E;
  /* no escuro a tinta framboesa inverte: o 700 sumiria no fundo */
  --color-accent-ink:var(--ju-raspberry-300);
  --color-whatsapp:var(--ju-mint-400);
  --color-whatsapp-hover:var(--ju-mint-300);
  --color-focus:var(--ju-cyan-300);
  --color-success:var(--ju-mint-300); --color-success-surface:#22322A;
  --color-warning:var(--ju-cookie-300); --color-warning-surface:#3A2E22;
  --color-error:var(--ju-raspberry-300); --color-error-surface:#3D2028;
  --color-info:var(--ju-cyan-300); --color-info-surface:#1E3034;
  --shadow-card:0 10px 22px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.24);
  --shadow-raised:0 18px 36px rgba(0,0,0,.44), 0 5px 14px rgba(0,0,0,.28);
  --shadow-product:0 30px 60px rgba(0,0,0,.5), 0 12px 24px rgba(0,0,0,.3);
  --shadow-photo:0 10px 24px rgba(0,0,0,.38);
  --campaign-pattern:radial-gradient(circle at 1px 1px, rgba(242,192,203,.14) 1px, transparent 0);
}

/* ─── 2 · BASE ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;
  background:var(--color-background);
  color:var(--color-text-primary);
  font-family:var(--font-body);
  font-size:var(--text-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:var(--color-primary-hover);text-decoration:none}
a:hover{color:var(--color-accent-hover)}
button{font:inherit}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;border-radius:4px}
::selection{background:var(--color-accent);color:var(--ju-ink-900)}

.u-visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--space-4);top:-100px;z-index:200;
  padding:12px 20px;background:var(--color-surface);border:var(--border-default);
  border-radius:var(--radius-pill);font-size:var(--text-body-sm);font-weight:700;
  color:var(--color-text-primary);transition:top var(--duration-fast) var(--easing-standard);
}
.skip-link:focus-visible{top:var(--space-4)}

/* ─── 3 · LAYOUT ─────────────────────────────────────────────────────────── */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:var(--container-wide)}
.container--narrow{max-width:var(--container-narrow)}

.section{position:relative;padding-block:var(--section-y)}
.section--alt{background:var(--color-background-alt)}
.section--tight{padding-block:clamp(40px,5vw,64px)}

.grid-auto{display:grid;gap:var(--gap-grid);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid-auto--sm{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}

/* ─── 4 · TIPOGRAFIA DE SEÇÃO ────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-3);
  font-size:var(--text-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--color-primary-hover);margin-bottom:var(--space-4);
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;flex:0 0 auto}
.eyebrow--accent{color:var(--color-accent-ink)}
.eyebrow--plain::before{display:none}

.h1,.h2,.h3{font-weight:300;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.h1{font-size:var(--text-h1)}
.h2{font-size:var(--text-h2);letter-spacing:-.04em}
.h3{font-size:var(--text-h3);letter-spacing:-.02em;line-height:1.1}
.h4{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:var(--text-h4);line-height:1.2;letter-spacing:-.015em}

/* a assinatura tipográfica: UMA palavra em Playfair itálico, nunca a frase */
em.word{font-family:var(--font-display);font-style:italic;font-weight:400;color:var(--color-accent-hover)}
em.word--cyan{color:var(--color-primary-hover)}

.lead{font-size:var(--text-body-lg);line-height:1.7;color:var(--color-text-secondary);max-width:62ch;text-wrap:pretty}
.section-head{margin-bottom:var(--space-12);max-width:64ch}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-head--center .lead{margin-inline:auto}
.section-head .lead{margin-top:var(--space-5)}

.script{font-family:var(--font-accent);font-weight:600;font-size:26px;line-height:1.1;color:var(--color-accent-hover)}

/* ─── 5 · NOTCH (a assinatura gráfica) ───────────────────────────────────── */
.notch-sm{clip-path:polygon(var(--notch-sm) 0,100% 0,100% calc(100% - var(--notch-sm)),calc(100% - var(--notch-sm)) 100%,0 100%,0 var(--notch-sm))}
.notch-md{clip-path:polygon(var(--notch-md) 0,100% 0,100% calc(100% - var(--notch-md)),calc(100% - var(--notch-md)) 100%,0 100%,0 var(--notch-md))}
.notch-lg{clip-path:polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg))}
.notch-xl{clip-path:polygon(var(--notch-xl) 0,100% 0,100% calc(100% - var(--notch-xl)),calc(100% - var(--notch-xl)) 100%,0 100%,0 var(--notch-xl))}

/* ─── 6 · BOTÕES ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:48px;padding:10px 26px;
  font-size:15px;font-weight:600;line-height:1.2;text-align:center;
  border:1px solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;text-decoration:none;
  transition:background var(--duration-fast) var(--easing-standard),
             color var(--duration-fast) var(--easing-standard),
             transform var(--duration-standard) var(--easing-standard),
             box-shadow var(--duration-standard) var(--easing-standard),
             border-color var(--duration-fast) var(--easing-standard);
}
.btn svg{flex:0 0 auto}
.btn__arrow{transition:transform var(--duration-standard) var(--easing-emphasized)}
.btn:hover .btn__arrow{transform:translateX(3px)}

.btn--primary{background:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-primary-strong)}
.btn--primary:hover{background:var(--color-primary-strong);color:var(--color-on-primary);transform:translateY(-2px);box-shadow:var(--shadow-cta)}
.btn--secondary{background:var(--color-accent);color:var(--ju-ink-900);border-color:var(--color-accent-strong)}
.btn--secondary:hover{background:var(--color-accent-strong);color:var(--ju-ink-900);transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--color-text-primary);border-color:var(--color-border)}
.btn--outline:hover{background:var(--color-background-alt);color:var(--color-text-primary);border-color:var(--color-border-strong);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--color-primary-hover);padding-inline:var(--space-4)}
.btn--ghost:hover{background:var(--color-primary-soft);color:var(--color-primary-hover)}
/* menta é exclusiva do WhatsApp */
.btn--whatsapp{background:var(--color-whatsapp);color:var(--ju-ink-900);border-color:var(--color-whatsapp-hover);font-weight:700}
.btn--whatsapp:hover{background:var(--color-whatsapp-hover);color:var(--ju-ink-900);transform:translateY(-2px);box-shadow:0 14px 28px rgba(78,138,104,.28)}

.btn--sm{min-height:40px;padding:8px 18px;font-size:13px}
.btn--lg{min-height:54px;padding:12px 30px;font-size:16px}
.btn--block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--color-surface-sunken);color:var(--color-text-muted);border-color:var(--color-border-subtle);cursor:not-allowed;transform:none;box-shadow:none}

/* link discreto com seta — CTA de baixo peso dentro de card */
.link-cta{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-size:var(--text-body-sm);font-weight:700;color:var(--color-accent-hover);
}
.link-cta::after{content:"→";transition:transform var(--duration-standard) var(--easing-emphasized)}
.link-cta:hover{color:var(--color-accent-hover)}
.link-cta:hover::after{transform:translateX(3px)}

/* ─── 7 · BADGE · PILL · TAG · NOTICE ────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--color-primary-soft);color:var(--color-primary-hover);
  border:1px solid var(--color-primary-strong);
  clip-path:polygon(var(--notch-sm) 0,100% 0,100% calc(100% - var(--notch-sm)),calc(100% - var(--notch-sm)) 100%,0 100%,0 var(--notch-sm));
}
.badge--accent{background:var(--color-accent-soft);color:var(--color-accent-ink);border-color:var(--color-accent-strong)}

.pill{
  display:inline-flex;align-items:center;gap:7px;padding:7px 15px;
  font-size:var(--text-caption);font-weight:600;border-radius:var(--radius-pill);
  background:var(--color-primary-soft);color:var(--color-primary-hover);
  border:1px solid var(--color-primary-strong);
}
.pill--accent{background:var(--color-accent-soft);color:var(--color-accent-ink);border-color:var(--color-accent-strong)}
.pill--quiet{background:var(--color-surface);color:var(--color-text-secondary);border-color:var(--color-border)}
.pill__dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto;opacity:.85}

.tag{
  display:inline-flex;align-items:center;padding:8px 14px;
  font-size:var(--text-body-sm);font-weight:600;border-radius:var(--radius-sm);
  background:var(--color-surface);color:var(--color-text-secondary);border:var(--border-default);
}
.meta-index{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--color-text-muted)}

.notice{
  display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);
  background:var(--color-info-surface);border:1px solid var(--color-info);
}
.notice__dot{flex:0 0 auto;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--color-info)}
.notice strong{display:block;font-size:var(--text-body-sm);font-weight:700;color:var(--color-info)}
.notice span{font-size:var(--text-caption);line-height:1.55;color:var(--color-text-secondary)}
.notice--warning{background:var(--color-warning-surface);border-color:var(--color-warning)}
.notice--warning .notice__dot{background:var(--color-warning)}
.notice--warning strong{color:var(--color-warning)}

/* ─── 8 · CARDS ──────────────────────────────────────────────────────────── */
.card{
  display:flex;flex-direction:column;padding:var(--card-pad);
  background:var(--color-surface);border:var(--border-subtle);box-shadow:var(--shadow-card);
  clip-path:polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg));
  transition:transform var(--duration-standard) var(--easing-standard),
             box-shadow var(--duration-slow) var(--easing-standard);
}
.card__media{
  position:relative;overflow:hidden;background:var(--color-surface-sunken);
  box-shadow:var(--shadow-photo);
  clip-path:polygon(var(--notch-md) 0,100% 0,100% calc(100% - var(--notch-md)),calc(100% - var(--notch-md)) 100%,0 100%,0 var(--notch-md));
}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--easing-standard)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-product)}
.card:hover .card__media img{transform:scale(1.06)}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.card__title{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:24px;line-height:1.15;letter-spacing:-.015em}
.card__text{font-size:var(--text-body-sm);line-height:1.65;color:var(--color-text-secondary);text-wrap:pretty}
.card__foot{
  display:flex;flex-wrap:wrap;gap:var(--space-4);padding-top:var(--space-3);
  border-top:var(--border-subtle);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);
}
.card__foot span{display:inline-flex;align-items:center;gap:5px}
.card__foot span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--color-primary)}

/* card cuja foto ocupa tudo, com rótulo por cima (ThemeCard) */
.photo-card{
  position:relative;display:block;overflow:hidden;background:var(--color-surface-sunken);
  clip-path:polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg));
  box-shadow:var(--shadow-card);
  transition:transform var(--duration-standard) var(--easing-standard),box-shadow var(--duration-slow) var(--easing-standard);
}
.photo-card img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--easing-standard)}
/* o scrim garante contraste AA do rótulo sobre qualquer foto, inclusive as claras */
.photo-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(36,28,32,0) 32%,rgba(36,28,32,.58) 62%,rgba(36,28,32,.9) 100%);
}
.photo-card__label{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:var(--card-pad);display:flex;flex-direction:column;gap:4px;
}
.photo-card__kicker{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ju-raspberry-300)}
.photo-card__name{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(20px,2.2vw,26px);line-height:1.1;color:#FFFCF8}
.photo-card__note{font-size:var(--text-caption);color:rgba(255,252,248,.92)}
.photo-card__label > *{text-shadow:0 1px 4px rgba(24,16,20,.55)}
.photo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-product)}
.photo-card:hover img{transform:scale(1.05)}

/* ─── 9 · FORMULÁRIO ─────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:var(--text-caption);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-tertiary)}
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;                 /* 16px impede o zoom automático do Safari */
  min-height:48px;padding:12px var(--space-4);
  color:var(--color-text-primary);background:var(--color-surface);
  border:var(--border-default);border-radius:var(--radius-sm);
  width:100%;
  transition:border-color var(--duration-fast) var(--easing-standard),box-shadow var(--duration-fast) var(--easing-standard);
}
.field textarea{min-height:96px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--color-text-muted)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-primary-strong)}
.field__hint{font-size:var(--text-caption);color:var(--color-text-tertiary);line-height:1.5}
.field--error input,.field--error select,.field--error textarea{border-color:var(--color-error)}
.field__error{font-size:var(--text-caption);color:var(--color-error);font-weight:600}
.field__error:empty{display:none}

/* ─── 10 · ACCORDION ─────────────────────────────────────────────────────── */
.accordion{background:var(--color-surface);border:var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}
.accordion__item + .accordion__item{border-top:var(--border-subtle)}
.accordion__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  min-height:60px;padding:var(--space-4) var(--card-pad);
  font-size:var(--text-body);font-weight:600;text-align:left;
  color:var(--color-text-primary);background:transparent;border:0;cursor:pointer;
  transition:background var(--duration-fast) var(--easing-standard);
}
.accordion__btn:hover{background:var(--color-background-alt)}
.accordion__sign{
  flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;
  font-size:22px;line-height:1;color:var(--color-accent-hover);
  transition:transform var(--duration-standard) var(--easing-standard);
}
.accordion__btn[aria-expanded="true"] .accordion__sign{transform:rotate(45deg)}
.accordion__panel{padding:0 var(--card-pad) var(--card-pad)}
.accordion__panel p{font-size:var(--text-body-sm);line-height:1.7;color:var(--color-text-secondary);text-wrap:pretty}
.accordion__panel p + p{margin-top:var(--space-3)}
.accordion__panel[hidden]{display:none}

/* ─── 11 · NAVBAR ────────────────────────────────────────────────────────── */
.nav-wrap{position:fixed;inset:0 0 auto 0;z-index:60;padding:var(--space-3) 0;pointer-events:none}
.nav{
  pointer-events:auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  padding:8px 8px 8px 14px;
  background:var(--color-surface-raised);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border:var(--border-subtle);border-radius:var(--radius-pill);
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--duration-standard) var(--easing-standard),
             background var(--duration-standard) var(--easing-standard);
}
/* fundo sólido por baixo do blur — Safari e navegador do Instagram */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:var(--ju-ink-0)}
}
.nav.is-stuck{box-shadow:var(--shadow-raised)}
.nav-brand{display:inline-flex;align-items:center;gap:var(--space-3);min-height:44px;color:inherit;flex:0 0 auto}
.nav-brand__mark{
  width:42px;height:42px;flex:0 0 auto;border-radius:var(--radius-circle);overflow:hidden;
  border:var(--border-subtle);background:var(--color-surface);
}
.nav-brand__mark img{width:100%;height:100%;object-fit:cover}
.nav-brand__text{display:flex;flex-direction:column;line-height:1.12}
.nav-brand__name{font-family:var(--font-display);font-style:italic;font-size:18px;color:var(--color-text-primary)}
.nav-brand__sub{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent-ink)}

.nav-links{display:none;gap:var(--space-5);align-items:center}
.nav-links a{
  position:relative;display:inline-flex;align-items:center;min-height:44px;
  padding:0 2px;font-size:var(--text-body-sm);font-weight:600;
  color:var(--color-text-secondary);transition:color var(--duration-fast) var(--easing-standard);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:9px;height:2px;border-radius:2px;
  background:var(--color-accent-strong);transform:scaleX(0);transform-origin:left;
  transition:transform var(--duration-standard) var(--easing-standard);
}
.nav-links a:hover{color:var(--color-text-primary)}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{transform:scaleX(1)}
.nav-links a[aria-current="true"]{color:var(--color-text-primary)}
.nav-cta{display:none}

.nav-burger{
  width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;gap:0;
  background:transparent;border:0;border-radius:var(--radius-circle);cursor:pointer;
}
.nav-burger span{
  display:block;width:20px;height:2px;border-radius:2px;background:var(--color-text-primary);
  transition:transform var(--duration-standard) var(--easing-standard),opacity var(--duration-fast) linear;
}
.nav-burger span + span{margin-top:5px}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-overlay{position:fixed;inset:0;z-index:70;background:rgba(36,28,32,.42);border:0;padding:0;cursor:pointer}
.nav-overlay[hidden]{display:none}
.nav-panel{
  position:fixed;z-index:80;inset:auto 0 0 0;
  display:flex;flex-direction:column;gap:2px;
  padding:var(--space-5) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom));
  background:var(--color-surface);border-top:var(--border-default);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:var(--shadow-modal);
  max-height:82svh;overflow-y:auto;
}
.nav-panel[hidden]{display:none}
.nav-panel__handle{width:44px;height:4px;border-radius:4px;background:var(--color-border);margin:0 auto var(--space-4)}
.nav-panel a{
  display:flex;align-items:center;gap:var(--space-4);min-height:56px;
  padding:var(--space-2) var(--space-2);color:var(--color-text-primary);
  border-bottom:var(--border-subtle);font-size:var(--text-body-lg);font-weight:500;
}
.nav-panel a:last-of-type{border-bottom:0}
.nav-panel .num{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--color-accent-ink);min-width:22px}
.nav-panel .btn{margin-top:var(--space-4)}

@media (min-width:900px){
  .nav-links{display:flex}
  .nav-cta{display:inline-flex}
  .nav-burger{display:none}
  .nav{padding:8px 8px 8px 16px}
}

/* ─── 12 · STICKY CTA MOBILE ─────────────────────────────────────────────── */
.sticky-cta{
  position:fixed;z-index:55;inset:auto var(--space-3) var(--space-3) var(--space-3);
  display:flex;align-items:center;gap:var(--space-3);
  padding:10px 10px 10px var(--space-4);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--color-surface-raised);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border:var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);
  transform:translateY(calc(100% + var(--space-4)));
  opacity:0;visibility:hidden;
  transition:transform var(--duration-standard) var(--easing-emphasized),
             opacity var(--duration-standard) var(--easing-standard),
             visibility 0s linear var(--duration-standard);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sticky-cta{background:var(--ju-ink-0)}
}
.sticky-cta.is-visible{transform:none;opacity:1;visibility:visible;transition-delay:0s}
/* teclado virtual aberto: a barra sai da frente do campo */
html.kb-open .sticky-cta{transform:translateY(calc(100% + var(--space-4)));opacity:0;visibility:hidden}
.sticky-cta__text{display:flex;flex-direction:column;min-width:0;flex:1}
.sticky-cta__kicker{font-size:var(--text-caption);color:var(--color-text-tertiary)}
.sticky-cta__title{font-size:var(--text-body-sm);font-weight:700;color:var(--color-text-primary)}
.sticky-cta .btn{min-height:44px;padding:8px 18px;font-size:var(--text-body-sm);white-space:nowrap}
.sticky-cta__close{
  width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;
  position:absolute;top:-12px;right:-6px;
  background:var(--color-surface);border:var(--border-default);border-radius:var(--radius-circle);
  color:var(--color-text-tertiary);font-size:15px;line-height:1;cursor:pointer;
  box-shadow:var(--shadow-card);
}
/* área de toque de 44px sem engordar o botão visualmente */
.sticky-cta__close::before{content:"";position:absolute;inset:-6px}
@media (min-width:900px){.sticky-cta{display:none}}

/* ─── 13 · RODAPÉ ────────────────────────────────────────────────────────── */
/* Compacto de propósito: marca + uma linha, dois canais, links em chips que
   quebram, e o copyright. Nada que já esteja na FAQ ou na seção de orçamento. */
.footer{background:var(--color-background-alt);border-top:var(--border-subtle);padding-block:var(--space-6) var(--space-5)}
.footer__top{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);align-items:flex-start;justify-content:space-between}
.footer__brand{display:inline-flex;align-items:center;gap:var(--space-3);color:inherit;min-height:44px}
.footer__brand img{width:40px;height:40px;flex:0 0 auto;border-radius:var(--radius-circle);object-fit:cover;border:var(--border-subtle)}
.footer__brand span{font-family:var(--font-display);font-style:italic;font-size:20px;color:var(--color-text-primary)}
.footer__bio{margin-top:6px;font-size:var(--text-body-sm);line-height:1.5;color:var(--color-text-secondary)}

.footer__channels{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.footer__channel{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  font-size:var(--text-body-sm);font-weight:600;color:var(--color-text-primary);
  background:var(--color-surface);border:var(--border-default);border-radius:var(--radius-pill);
  transition:border-color var(--duration-fast) var(--easing-standard),color var(--duration-fast) var(--easing-standard);
}
.footer__channel svg{flex:0 0 auto;color:var(--color-primary-hover)}
.footer__channel:hover{color:var(--color-text-primary);border-color:var(--color-border-strong)}

.footer__links{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:var(--space-5);padding-top:var(--space-4);border-top:var(--border-subtle);
}
.footer__links a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  font-size:var(--text-body-sm);color:var(--color-text-secondary);
  border:1px solid transparent;border-radius:var(--radius-pill);
  transition:background var(--duration-fast) var(--easing-standard),color var(--duration-fast) var(--easing-standard);
}
.footer__links a:hover{background:var(--color-surface);color:var(--color-text-primary);border-color:var(--color-border-subtle)}

.footer__base{
  margin-top:var(--space-4);padding-top:var(--space-4);border-top:var(--border-subtle);
  display:flex;flex-wrap:wrap;gap:6px var(--space-4);align-items:baseline;justify-content:space-between;
  font-size:var(--text-caption);color:var(--color-text-tertiary);
}
.footer__sign{font-family:var(--font-accent);font-size:19px;color:var(--color-accent-ink)}

/* no celular os dois canais dividem a linha em vez de empilhar */
@media (max-width:759px){
  .footer__channels{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
  .footer__channel{justify-content:center;padding:0 10px;font-size:13px;gap:6px}
}
@media (min-width:760px){
  .footer{padding-block:var(--space-12) var(--space-6)}
  .footer__top{flex-wrap:nowrap;align-items:center}
}

/* ─── 14 · ORNAMENTOS (um por seção, sempre aria-hidden) ─────────────────── */
/* glacê pingando sob o título */
.icing-drip{position:relative;display:inline-block}
.icing-drip::after{
  content:"";position:absolute;bottom:-13px;left:50%;width:76%;height:15px;
  transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,var(--campaign-decoration) 0%,transparent 100%);
  clip-path:polygon(0% 0%,100% 0%,100% 30%,96% 70%,92% 30%,86% 80%,82% 25%,76% 90%,72% 40%,68% 65%,62% 20%,56% 78%,50% 35%,44% 88%,38% 30%,32% 75%,28% 20%,22% 95%,18% 30%,14% 70%,8% 25%,4% 80%,0% 30%);
  animation:juDrip 3.5s ease-in-out infinite;
}
@keyframes juDrip{0%,100%{transform:translateX(-50%) scaleY(1);opacity:.85}50%{transform:translateX(-50%) scaleY(1.16);opacity:1}}

/* papel manteiga — textura de fundo, zero bytes de rede */
.paper{
  background-color:var(--ju-cookie-50);
  background-image:
    repeating-linear-gradient(90deg,rgba(185,139,88,.08) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(0deg,rgba(185,139,88,.06) 0 1px,transparent 1px 7px);
}

/* confeitos: 8 traços SVG estáticos */
.sprinkles{position:absolute;pointer-events:none;opacity:.9}
@media (max-width:640px){.sprinkles{display:none}}

/* padrão pontilhado da camada de campanha */
.dotted{
  position:absolute;inset:0;pointer-events:none;
  background-image:var(--campaign-pattern);background-size:var(--campaign-pattern-size);
  opacity:.5;
}

/* fita adesiva do bloco de papel */
.tape{
  position:absolute;top:-7px;left:24px;width:46px;height:14px;
  background:var(--color-primary-soft);border:1px solid var(--color-primary-strong);
  transform:rotate(-3deg);box-shadow:0 2px 4px rgba(58,42,51,.08);pointer-events:none;
}

/* ─── 13b · PROCESSSTEP (papel + fita) ───────────────────────────────────── */
/* Componente do Design System ("ProcessStep · papel + fita"). Mora aqui, e não
   no CSS da Landing, porque a Landing e o template de campanha usam os dois. */
.steps{display:grid;gap:var(--gap-grid);grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.step{
  position:relative;display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-8) var(--card-pad) var(--card-pad);
  background-color:var(--ju-cookie-50);
  background-image:repeating-linear-gradient(180deg,transparent 0 25px,rgba(185,139,88,.12) 25px 26px);
  border:var(--border-default);border-left:4px solid var(--color-accent-strong);
  box-shadow:var(--shadow-card);
}
.step:nth-child(even){border-left-color:var(--color-primary-strong)}
.step:nth-child(even) .tape{background:var(--color-accent-soft);border-color:var(--color-accent-strong)}
.step__num{font-family:var(--font-accent);font-weight:700;font-size:52px;line-height:.85;color:var(--color-accent-ink)}
.step:nth-child(even) .step__num{color:var(--color-primary-hover)}
.step__title{font-family:var(--font-accent);font-weight:700;font-size:27px;line-height:1.05;color:var(--ju-ink-900)}
.step__text{font-size:var(--text-body-sm);line-height:1.65;color:var(--ju-ink-700)}
.step__meta{
  margin-top:auto;padding-top:var(--space-3);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ju-cocoa-700);
}

/* largura de leitura do accordion de FAQ */
.faq{max-width:860px;margin-inline:auto}

/* ─── 15 · MOTION ────────────────────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity var(--duration-slow) var(--easing-emphasized),transform var(--duration-slow) var(--easing-emphasized)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:80ms}
[data-reveal][data-delay="2"]{transition-delay:160ms}
[data-reveal][data-delay="3"]{transition-delay:240ms}

/* sem JS, nada fica invisível */
.no-js [data-reveal]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
}