/* ============================================================================
   DESIGN SYSTEM — Identidade visual W. Mendes & Ferreira
   Paleta e fontes EXTRAÍDAS do design original (Claude Designer):
   navy #122E47 · paper #F4EEE0 · coral #D0563B · verde #3C8060 · Lora + Poppins
   ========================================================================== */
:root{
  --navy:      #122E47;
  --navy-2:    #13293F;
  --navy-3:    #26313B;
  --paper:     #F4EEE0;
  --paper-2:   #FAF7F0;
  --paper-card:#FEFCF8;
  --coral:     #D0563B;
  --coral-soft:#F5E2DA;
  --sage:      #7CC0A0;
  --sage-2:    #9FD4B8;
  --sage-soft: #CDE8D8;
  --green-box: #3C8060;
  --green-deep:#235740;
  --ink:       #26313B;
  --ink-soft:  #5C5648;
  --muted:     #857B69;
  --muted-2:   #9AA6B2;
  --gold:      #D9CFBA;
  --line:      #D9CFBA;

  --serif: 'Lora', 'Georgia', serif;
  --sans:  'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --slide-w: 1280px;
  --slide-h: 720px;
}

*{ box-sizing:border-box; }

/* ===== SLIDE BASE ========================================================= */
.slide{
  width:var(--slide-w); height:var(--slide-h);
  position:relative; overflow:hidden;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
}
.slide--navy{ background:var(--navy); color:var(--paper); }
.slide--paper{ background:var(--paper); }

/* arcos decorativos (cantos) */
.arc{ position:absolute; border-radius:50%; border:1px solid currentColor; opacity:.06; pointer-events:none; }
.slide--navy .arc{ color:#cdd6df; opacity:.10; }
.slide--paper .arc{ color:var(--gold); opacity:.30; }

/* ===== HEADER PADRÃO (slides internos) ==================================== */
.s-head{ position:absolute; left:64px; right:64px; top:60px; }
.s-head h2{ font-family:var(--serif); font-size:46px; font-weight:700; margin:0; color:var(--navy); letter-spacing:.2px; }
.s-head .num{ font-family:var(--serif); font-size:30px; color:var(--coral); font-weight:600; margin-right:14px; }
.s-head hr{ border:0; border-top:1px solid var(--line); margin-top:22px; }
.slide--navy .s-head h2{ color:var(--paper); }

/* labels tracked */
.label{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--coral); font-weight:700; }
.label--muted{ color:var(--muted); }
.slide--navy .label{ color:var(--coral); }

/* ===== RODAPÉ PADRÃO ===================================================== */
.s-foot{ position:absolute; left:64px; right:64px; bottom:34px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.s-foot .brand{ font-family:var(--serif); font-weight:700; font-size:15px; letter-spacing:0; color:var(--navy); text-transform:none; }
.s-foot .crumb{ position:absolute; left:50%; transform:translateX(-50%); }
.s-foot .pg{ color:var(--coral); font-weight:700; letter-spacing:.1em; }

/* ===== LOGO ============================================================== */
.logo{ font-family:var(--serif); font-weight:700; letter-spacing:.5px; }
.logo small{ display:block; font-family:var(--sans); font-size:8px; letter-spacing:.42em; font-weight:600; opacity:.8; margin-top:2px; }

/* ===== SLIDE 1 — CAPA ==================================================== */
.cover .top{ position:absolute; left:64px; right:64px; top:56px; display:flex; justify-content:space-between; align-items:flex-start; }
.cover .top .logo{ font-size:30px; color:var(--paper); }
.cover .top .kicker{ font-size:12px; letter-spacing:.24em; color:var(--muted-2); text-transform:uppercase; margin-top:8px; }
.cover .center{ position:absolute; left:64px; top:330px; right:120px; transform:translateY(-50%); }
.cover .center .line{ display:flex; align-items:center; gap:18px; margin-bottom:26px; }
.cover .center .line .dash{ width:46px; height:2px; background:var(--coral); display:inline-block; }
.cover .center .line .txt{ font-size:13px; letter-spacing:.26em; color:var(--coral); text-transform:uppercase; font-weight:700; }
.cover h1{ font-family:var(--serif); font-size:96px; line-height:1.02; font-weight:700; margin:0; color:var(--paper); letter-spacing:.5px; }
.cover .sub{ font-family:var(--serif); font-style:italic; font-size:30px; color:var(--muted-2); margin-top:22px; font-weight:400; }
.cover .foot{ position:absolute; left:64px; right:64px; bottom:60px; display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid rgba(255,255,255,.12); padding-top:22px; }
.cover .foot .blk .lbl{ font-size:11px; letter-spacing:.22em; color:var(--muted-2); text-transform:uppercase; margin-bottom:8px; }
.cover .foot .blk .nm{ font-family:var(--serif); font-size:24px; color:var(--paper); }
.cover .foot .blk .sm{ font-size:14px; color:var(--muted-2); margin-top:3px; }
.cover .foot .right{ text-align:right; }
.cover .foot .right .dt{ font-size:17px; color:var(--muted-2); }
.cover .foot .right .ad{ font-size:13px; color:var(--muted-2); margin-top:4px; }

/* ===== BLOCO DE TEXTO / PARÁGRAFOS ====================================== */
.body-col{ position:absolute; top:188px; left:64px; width:600px; }
.body-col p{ font-family:var(--serif); font-size:22px; line-height:1.5; color:var(--ink); margin:0 0 18px; }
.body-col p strong{ font-weight:700; }

/* caixa navy à direita (identificação) */
.info-box{ position:absolute; top:178px; right:64px; width:520px; background:var(--navy); color:var(--paper);
  padding:34px 36px; border-radius:2px; }
.info-box .label{ color:var(--coral); margin-bottom:18px; }
.info-box .row{ margin-bottom:16px; }
.info-box .row .k{ font-size:13px; color:var(--muted-2); margin-bottom:3px; }
.info-box .row .v{ font-family:var(--serif); font-size:21px; color:var(--paper); }
.note-coral{ position:absolute; right:64px; width:520px; border-left:3px solid var(--coral); padding:4px 0 4px 16px;
  color:var(--ink-soft); font-size:15px; line-height:1.45; }

/* ===== CARTÕES ========================================================= */
.cards{ position:absolute; display:flex; gap:26px; }
.card{ background:var(--paper-card); border:1px solid var(--line); border-radius:2px; padding:30px 30px; }
.card--navy{ background:var(--navy); color:var(--paper); border:none; }
.card--bar{ border-top:3px solid var(--coral); }

/* ===== PREÇOS =========================================================== */
.price{ font-family:var(--serif); font-weight:700; color:var(--sage); }
.price .cur{ font-size:34px; vertical-align:top; margin-right:6px; }
.price .big{ font-size:96px; line-height:1; }
.chip-ok{ display:inline-flex; align-items:center; gap:8px; background:rgba(124,192,160,.15);
  color:var(--sage-2); border:1px solid rgba(124,192,160,.4); border-radius:20px; padding:7px 16px; font-size:13px; }

/* ===== APP SHELL (formulário + preview) ================================= */
body{ margin:0; font-family:var(--sans); background:#eceae4; color:var(--ink); }
.app{ display:grid; grid-template-columns:420px 1fr; height:100vh; }
.panel{ background:#fbfaf7; border-right:1px solid #ddd8cc; overflow-y:auto; padding:22px; }
.panel h1{ font-family:var(--serif); font-size:22px; margin:0 0 2px; color:var(--navy); }
.panel .muted{ color:#8a8f94; font-size:13px; margin:0 0 18px; }
.stage{ overflow:auto; padding:30px; display:flex; flex-direction:column; align-items:center; gap:24px; background:#dcdad3; }
.deck{ display:flex; flex-direction:column; gap:24px; align-items:center; }
.slide-wrap{ box-shadow:0 8px 30px rgba(0,0,0,.18);
  width:calc(1280px * var(--scale,1)); height:calc(720px * var(--scale,1));
  overflow:hidden; background:#fff; }
.slide-wrap > .slide{ transform:scale(var(--scale,1)); transform-origin:top left; }

/* form controls */
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; font-weight:600; color:#5b6470; margin-bottom:5px; letter-spacing:.02em; }
.field input, .field textarea, .field select{
  width:100%; padding:9px 11px; border:1px solid #d2cdbf; border-radius:6px; font-family:var(--sans);
  font-size:14px; background:#fff; color:var(--ink); }
.field textarea{ min-height:80px; resize:vertical; line-height:1.4; }
.sec{ border:1px solid #e1dccf; border-radius:8px; margin-bottom:12px; background:#fff; }
.sec > summary{ cursor:pointer; padding:12px 14px; font-weight:600; color:var(--navy); list-style:none; font-size:14px; }
.sec > summary::-webkit-details-marker{ display:none; }
.sec[open] > summary{ border-bottom:1px solid #eee4d6; }
.sec .sec-body{ padding:14px; }
.btn{ border:none; border-radius:7px; padding:11px 14px; font-weight:600; font-size:14px; cursor:pointer; font-family:var(--sans); }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-coral{ background:var(--coral); color:#fff; }
.btn-ghost{ background:#efece3; color:var(--ink); }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.product-row{ display:grid; grid-template-columns:1fr 120px; gap:8px; align-items:center; padding:8px 0; border-bottom:1px dashed #e4dfd2; }
.product-row .pname{ font-size:13px; }
.toolbar{ position:sticky; top:0; background:#fbfaf7; padding-bottom:12px; margin-bottom:8px; z-index:5; border-bottom:1px solid #eee4d6; }

@media print{
  @page{ size:13.333in 7.5in; margin:0; }
  html, body{ background:#fff; }
  .panel, .toolbar{ display:none !important; }
  .app{ display:block; }
  .stage{ padding:0; background:#fff; gap:0; overflow:visible; display:block; }
  .deck{ gap:0; display:block; }
  .slide-wrap{ box-shadow:none; page-break-after:always; break-after:page;
    width:1280px !important; height:720px !important; overflow:hidden; }
  .slide-wrap > .slide{ transform:none !important; }
  .slide-wrap:last-child{ page-break-after:auto; }
}