/* ============================================================
     RESET + BASE
     ============================================================ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    /* Paleta principal — azul profundo + branco */
    --blue-950: #060f3f;
    --blue-900: #0a1654;
    --blue-800: #131f6e;
    --blue-700: #1e2d8c;
    --blue-600: #2a3eaf;
    --blue-500: #3b54d6;
    --blue-400: #6378e8;
    --blue-300: #93a3f0;
    --blue-200: #c2cdf7;
    --blue-100: #e6ecfd;
    --blue-50:  #f3f5fe;

    --ink:        #1a1f3a;
    --ink-soft:   #4a5275;
    --ink-faded:  #8a91ab;
    --white:      #ffffff;
    --off-white:  #fbfcff;

    --accent:     #00d4ff;   /* cyan elétrico — para destaque */
    --accent-warm:#ffb547;   /* dourado para destaques */

    --success:    #2e7d32;
    --danger:     #c62828;
    --warning:    #f57c00;

    --shadow-card:  0 1px 2px rgba(10,22,84,.06), 0 8px 24px rgba(10,22,84,.06);
    --shadow-deep:  0 30px 80px rgba(10,22,84,.18), 0 12px 32px rgba(10,22,84,.10);
    --shadow-glow:  0 0 0 1px rgba(255,255,255,.1), 0 20px 60px rgba(59,84,214,.35);

    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 22px;

    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body:    'IBM Plex Sans', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', monospace;
  }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    background: var(--off-white);
    color: var(--ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* ============================================================
     NAVBAR
     ============================================================ */
  .nav {
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(255,255,255,.82);
    border-bottom: 1px solid rgba(10,22,84,.06);
    padding: 14px 32px;
    display: flex; align-items: center; justify-content: space-between;
    transition: all .3s;
  }
  .nav-brand { display: flex; align-items: center; gap: 12px; }
  .nav-logo { width: 38px; height: 38px; }
  .nav-name {
    font-family: var(--font-display);
    font-weight: 800; font-size: 19px; color: var(--blue-900);
    letter-spacing: -0.5px;
  }
  .nav-name span { color: var(--blue-500); }
  .nav-links { display: flex; gap: 28px; align-items: center; }
  .nav-link {
    font-size: 14px; font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color .15s;
  }
  .nav-link:hover { color: var(--blue-700); }
  .nav-counter {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px;
    background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
    color: white;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(30,45,140,.25);
  }
  .nav-counter .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
  @keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  .nav-counter .num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    font-weight: 600;
  }
  .nav-cta {
    padding: 9px 18px;
    background: var(--blue-900);
    color: white;
    border-radius: 100px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all .2s;
    border: none;
    cursor: pointer;
    font-family: inherit;
  }
  .nav-cta:hover {
    background: var(--blue-700);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(10,22,84,.22);
  }

  /* ============================================================
     HERO — fundo azul com gradient + decorações
     ============================================================ */
  .hero {
    position: relative;
    min-height: 88vh;
    background:
      radial-gradient(ellipse 80% 60% at 80% 20%, rgba(0,212,255,.18) 0%, transparent 60%),
      radial-gradient(ellipse 70% 50% at 10% 80%, rgba(99,120,232,.22) 0%, transparent 55%),
      linear-gradient(135deg, var(--blue-950) 0%, var(--blue-800) 45%, var(--blue-600) 100%);
    overflow: hidden;
    color: white;
    padding: 80px 32px 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Grid pattern de fundo */
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at center, black 30%, transparent 80%);
    pointer-events: none;
  }

  /* Orbes de luz flutuantes */
  .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    pointer-events: none;
    animation: float 18s ease-in-out infinite;
  }
  .orb-1 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, var(--blue-500), transparent 70%);
    top: -100px; right: -50px;
  }
  .orb-2 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, var(--accent), transparent 70%);
    bottom: -80px; left: 10%;
    opacity: .25;
    animation-delay: -8s;
  }
  .orb-3 {
    width: 220px; height: 220px;
    background: radial-gradient(circle, #6378e8, transparent 70%);
    top: 40%; left: -50px;
    animation-delay: -4s;
  }
  @keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -30px) scale(1.05); }
    66% { transform: translate(-30px, 30px) scale(0.95); }
  }

  /* Documentos decorativos flutuando ao fundo */
  .deco-doc {
    position: absolute;
    width: 180px; height: 240px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    animation: floatDoc 12s ease-in-out infinite;
  }
  .deco-doc::before, .deco-doc::after {
    content: '';
    position: absolute;
    left: 16px;
    height: 2px;
    background: rgba(255,255,255,.2);
    border-radius: 2px;
  }
  .deco-doc::before { top: 30px; right: 16px; height: 8px; background: rgba(0,212,255,.4); }
  .deco-doc::after  { top: 50px; right: 16px; }
  .deco-doc-1 { top: 12%; left: 6%; transform: rotate(-12deg); }
  .deco-doc-2 { top: 20%; right: 8%; transform: rotate(15deg); animation-delay: -6s; }
  .deco-doc-3 { bottom: 10%; right: 14%; transform: rotate(-8deg); animation-delay: -3s; opacity: 0.5; }
  @keyframes floatDoc {
    0%, 100% { transform: rotate(var(--r, -12deg)) translateY(0); }
    50% { transform: rotate(var(--r, -12deg)) translateY(-25px); }
  }
  .deco-doc-1 { --r: -12deg; }
  .deco-doc-2 { --r: 15deg; }
  .deco-doc-3 { --r: -8deg; }

  .hero-inner {
    position: relative;
    max-width: 1100px;
    width: 100%;
    text-align: center;
    z-index: 2;
    animation: fadeUp .9s cubic-bezier(.16,1,.3,1);
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Logo grande */
  .hero-logo-wrap {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 32px;
    padding: 10px 22px 10px 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 100px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .hero-logo { width: 56px; height: 56px; }
  .hero-logo-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.6px;
    color: white;
  }
  .hero-logo-text span { color: var(--accent); }

  /* Tagline pequeno acima */
  .hero-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    color: var(--blue-200);
    text-transform: uppercase;
    margin-bottom: 24px;
    padding: 6px 14px;
    border: 1px solid rgba(194,205,247,.25);
    border-radius: 100px;
  }
  .hero-eyebrow .pulse-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 8px;
    box-shadow: 0 0 10px var(--accent);
    animation: pulse 2s infinite;
    vertical-align: middle;
  }

  /* Headline gigante */
  .hero-headline {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(36px, 6.5vw, 78px);
    line-height: 1.04;
    letter-spacing: -2.5px;
    margin-bottom: 28px;
    color: white;
  }
  .hero-headline .highlight {
    background: linear-gradient(120deg, var(--accent) 0%, #93a3f0 50%, var(--accent) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: shine 6s linear infinite;
  }
  @keyframes shine {
    to { background-position: 200% center; }
  }
  .hero-headline em {
    font-style: italic;
    font-weight: 600;
    color: var(--blue-200);
  }

  /* Subtitle */
  .hero-sub {
    font-size: clamp(15px, 1.6vw, 18px);
    color: var(--blue-100);
    max-width: 680px;
    margin: 0 auto 44px;
    line-height: 1.65;
    font-weight: 400;
  }
  .hero-sub strong {
    color: white;
    font-weight: 600;
  }

  /* CTAs */
  .hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 60px;
  }
  .btn {
    padding: 16px 30px;
    border: none;
    border-radius: 100px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all .25s cubic-bezier(.16,1,.3,1);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    letter-spacing: -0.2px;
  }
  .btn svg { width: 16px; height: 16px; }
  .btn-primary {
    background: white;
    color: var(--blue-900);
    box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.5) inset;
  }
  .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.5) inset;
  }
  .btn-secondary {
    background: rgba(255,255,255,.1);
    color: white;
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .btn-secondary:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.4);
  }

  /* Stats / trust marks */
  .hero-stats {
    display: flex;
    gap: 60px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .stat {
    text-align: center;
  }
  .stat-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 36px;
    color: white;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 6px;
  }
  .stat-num.live {
    color: var(--accent);
  }
  .stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--blue-200);
    font-weight: 500;
  }

  /* ============================================================
     SECTION DIVIDER (wave)
     ============================================================ */
  .section-wave {
    position: relative;
    height: 80px;
    background: var(--off-white);
    margin-top: -1px;
  }
  .section-wave svg {
    position: absolute;
    top: -1px; left: 0;
    width: 100%;
    height: 80px;
    display: block;
  }

  /* ============================================================
     FEATURES (mini)
     ============================================================ */
  .features {
    padding: 60px 32px 40px;
    background: var(--off-white);
    text-align: center;
  }
  .features-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
  }
  .feat {
    padding: 28px 24px;
    background: white;
    border: 1px solid rgba(10,22,84,.06);
    border-radius: var(--radius);
    text-align: left;
    transition: all .25s;
    position: relative;
    overflow: hidden;
  }
  .feat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--blue-50), transparent);
    opacity: 0;
    transition: opacity .3s;
  }
  .feat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
    border-color: var(--blue-200);
  }
  .feat:hover::before { opacity: 1; }
  .feat > * { position: relative; }
  .feat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
    color: white;
    display: grid; place-items: center;
    margin-bottom: 16px;
  }
  .feat-icon svg { width: 22px; height: 22px; }
  .feat-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--blue-900);
    margin-bottom: 6px;
    letter-spacing: -0.3px;
  }
  .feat-desc {
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.55;
  }

  /* ============================================================
     APP SECTION (gerador)
     ============================================================ */
  .app-section {
    padding: 80px 32px 100px;
    background:
      linear-gradient(180deg, var(--off-white) 0%, var(--blue-50) 100%);
    position: relative;
  }
  .app-header {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
  }
  .app-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    color: var(--blue-600);
    text-transform: uppercase;
    margin-bottom: 16px;
    padding: 6px 14px;
    background: var(--blue-100);
    border-radius: 100px;
  }
  .app-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--blue-950);
    margin-bottom: 16px;
  }
  .app-subtitle {
    font-size: 16px;
    color: var(--ink-soft);
    max-width: 540px;
    margin: 0 auto;
  }

  .app-shell {
    max-width: 1600px;
    margin: 0 auto;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-deep);
    overflow: hidden;
    border: 1px solid rgba(10,22,84,.06);
  }

  /* Faux-toolbar (browser-like) */
  .app-topbar {
    background: linear-gradient(180deg, #f6f8ff 0%, #eef1fb 100%);
    border-bottom: 1px solid rgba(10,22,84,.06);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .app-dots { display: flex; gap: 6px; }
  .app-dot { width: 10px; height: 10px; border-radius: 50%; }
  .app-dot.r { background: #ff6058; }
  .app-dot.y { background: #ffbd2d; }
  .app-dot.g { background: #28c840; }
  .app-url {
    flex: 1;
    background: white;
    border: 1px solid rgba(10,22,84,.08);
    border-radius: 100px;
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--blue-700);
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
  }
  .app-url::before {
    content: '🔒 ';
    margin-right: 4px;
    font-size: 10px;
  }

  /* WORKSPACE (sidebar + preview) */
  .workspace {
    display: grid;
    grid-template-columns: minmax(480px, 540px) 1fr;
    height: 75vh;
    min-height: 700px;
    overflow: hidden;
  }
  .sidebar {
    background: white;
    border-right: 1px solid rgba(10,22,84,.06);
    overflow-y: auto;
    padding: 24px;
  }
  .sidebar::-webkit-scrollbar { width: 8px; }
  .sidebar::-webkit-scrollbar-thumb { background: #d2d8ee; border-radius: 4px; }

  .sidebar h2 {
    font-family: var(--font-display);
    font-size: 13px; font-weight: 700; color: var(--blue-900);
    text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px;
  }
  .sidebar .lead { font-size: 13px; color: var(--ink-soft); margin-bottom: 22px; }

  .section-card {
    margin-bottom: 16px;
    border: 1px solid rgba(10,22,84,.08);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: white;
    transition: all .2s;
  }
  .section-card:hover { border-color: var(--blue-200); }
  .section-head {
    background: linear-gradient(180deg, #fafbff 0%, #f0f3fc 100%);
    padding: 12px 16px;
    border-bottom: 1px solid rgba(10,22,84,.06);
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
    user-select: none;
  }
  .section-head .num {
    width: 24px; height: 24px;
    background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
    color: white;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700;
    font-family: var(--font-mono);
  }
  .section-head h3 {
    font-family: var(--font-display);
    font-size: 13.5px; font-weight: 600;
    color: var(--blue-900); flex: 1;
    letter-spacing: -0.2px;
  }
  .section-head .chevron {
    width: 16px; height: 16px;
    color: var(--ink-faded);
    transition: transform .2s;
  }
  .section-card.collapsed .chevron { transform: rotate(-90deg); }
  .section-card.collapsed .section-body { display: none; }
  .section-body { padding: 16px; }

  .field { margin-bottom: 14px; }
  .field:last-child { margin-bottom: 0; }
  .field label {
    display: block;
    font-size: 12px; font-weight: 600;
    color: var(--ink); margin-bottom: 6px;
  }
  .field label .req { color: var(--danger); }
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="password"],
  .field input[type="tel"],
  .field input[type="search"],
  .field input[type="url"],
  .field input[type="number"],
  .field input[type="date"],
  .field textarea,
  .field select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid rgba(10,22,84,.1);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    background: white;
    transition: all .15s;
  }
  .field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px rgba(59,84,214,.12);
  }
  .field .hint { font-size: 11px; color: var(--ink-faded); margin-top: 4px; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  .signatory-template-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid rgba(10,22,84,.08);
    border-radius: 8px;
    background: var(--blue-50);
  }

  .signatory-template-picker[hidden] { display: none; }
  .signatory-template-picker .field { margin-bottom: 0; }

  /* LOGO upload */
  .logo-upload { display: flex; align-items: center; gap: 12px; }
  .logo-preview {
    width: 64px; height: 64px;
    border: 2px dashed rgba(10,22,84,.15);
    border-radius: 8px;
    display: grid; place-items: center;
    background: var(--blue-50);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
  }
  .logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .logo-preview .placeholder { color: var(--blue-300); font-size: 11px; text-align: center; }
  .logo-preview .clear-logo {
    position: absolute; top: 2px; right: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(198,40,40,.92);
    color: white; border: none; cursor: pointer;
    font-size: 11px; line-height: 1;
    display: none;
  }
  .logo-preview.has-logo .clear-logo { display: block; }
  .file-btn {
    flex: 1; padding: 10px;
    border: 1px solid rgba(10,22,84,.1);
    border-radius: 8px;
    background: white; color: var(--blue-700);
    font-size: 12px; font-weight: 600;
    cursor: pointer; text-align: center;
    transition: all .15s;
    font-family: inherit;
  }
  .file-btn:hover { background: var(--blue-50); border-color: var(--blue-500); }
  .file-btn input { display: none; }

  /* EDITOR rico */
  .editor-wrap {
    border: 1px solid #cfd6ea;
    border-radius: 6px;
    background: #eef1f7;
    overflow: visible;
    box-shadow: 0 1px 2px rgba(10,22,84,.06);
  }
  .editor-ribbon-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 34px;
    padding: 0 10px;
    background: #f8f9fd;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid #dce2f1;
  }
  .editor-ribbon-tabs span {
    height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    color: #4f5a78;
    font-size: 12px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
  }
  .editor-ribbon-tabs span.active {
    color: var(--blue-800);
    background: white;
    border-left: 1px solid #dce2f1;
    border-right: 1px solid #dce2f1;
    border-bottom-color: white;
  }
  .editor-toolbar {
    display: flex; flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px 10px;
    background: white;
    border-bottom: 1px solid #dce2f1;
  }
  .ai-assistant-panel {
    border: 1px solid rgba(30,45,140,.14);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
    box-shadow: 0 10px 24px rgba(10,22,84,.08);
    padding: 14px;
    margin-bottom: 14px;
  }
  .ai-assistant-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  .ai-assistant-head strong {
    display: block;
    font-family: var(--font-display);
    color: var(--blue-900);
    font-size: 14px;
  }
  .ai-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--blue-100);
    color: var(--blue-800);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    margin-bottom: 4px;
  }
  .ai-status {
    color: var(--ink-faded);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
  }
  .ai-status.error { color: var(--danger); }
  .ai-status.success { color: var(--success); }
  .ai-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }
  .ai-grid .field {
    min-width: 0;
  }
  .ai-grid select,
  .ai-grid textarea {
    width: 100%;
  }
  .ai-prompt-field textarea {
    min-height: 78px;
    resize: vertical;
  }
  .ai-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .ai-output {
    min-height: 96px;
    max-height: 220px;
    overflow: auto;
    margin-top: 12px;
    border: 1px solid #d9deea;
    border-radius: 8px;
    background: white;
    padding: 14px 16px;
    color: var(--ink);
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 14px;
    line-height: 1.55;
    outline: none;
  }
  .ai-output:empty::before {
    content: attr(data-placeholder);
    color: var(--ink-faded);
    font-family: var(--font-body);
    font-size: 13px;
  }
  .ai-output:focus {
    border-color: #9eb3ef;
    box-shadow: 0 0 0 3px rgba(59,84,214,.10);
  }
  .ai-output p { margin-bottom: 8px; }
  .tb-group {
    display: flex; gap: 2px;
    padding: 0 8px 0 0;
    border-right: 1px solid #dce2f1;
    align-items: center;
    min-height: 34px;
  }
  .tb-group:last-child { border-right: none; }
  .tb-btn {
    width: 30px; height: 30px;
    border: 1px solid transparent;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: grid; place-items: center;
    color: var(--ink);
    transition: all .12s;
    font-family: inherit;
    font-size: 13px;
    padding: 0;
  }
  .tb-btn:hover { background: #eef3ff; border-color: #cbd7f7; color: var(--blue-700); }
  .tb-btn.active { background: #dfe8ff; border-color: #9eb3ef; color: var(--blue-800); }
  .tb-btn svg { width: 14px; height: 14px; }
  .tb-btn[data-cmd="bold"] { font-weight: 800; }
  .tb-btn[data-cmd="italic"] { font-style: italic; }
  .tb-btn[data-cmd="underline"] { text-decoration: underline; }
  .tb-select {
    height: 30px;
    padding: 0 8px;
    border: 1px solid #cfd6ea;
    border-radius: 4px;
    background: white;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    color: var(--ink);
    max-width: 130px;
  }
  .tb-color {
    width: 30px; height: 30px;
    border: 1px solid #cfd6ea;
    border-radius: 4px;
    padding: 2px;
    cursor: pointer;
    background: white;
  }
  .editor-area {
    min-height: 360px;
    max-height: 560px;
    overflow-y: auto;
    width: calc(100% - 24px);
    margin: 12px;
    padding: 28px 34px;
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    outline: none;
    border-radius: 2px;
    border: 1px solid #d9deea;
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      repeating-linear-gradient(90deg, transparent 0, transparent 23px, rgba(30,45,140,.05) 24px) border-box;
    box-shadow: 0 8px 22px rgba(10,22,84,.10);
  }
  .editor-area:focus { border-color: #9eb3ef; box-shadow: 0 8px 26px rgba(30,45,140,.14); }
  .editor-area p { margin-bottom: 8px; }
  .editor-area ol, .editor-area ul { margin: 8px 0 8px 24px; }
  .editor-area li { margin-bottom: 4px; }
  .editor-area h1 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 12px 0 6px; color: var(--blue-900); }
  .editor-area h2 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin: 10px 0 5px; color: var(--blue-900); }
  .editor-area h3 { font-family: var(--font-display); font-size: 14px; font-weight: 700; margin: 8px 0 4px; color: var(--blue-900); }
  .editor-area ol[type="a"] { list-style-type: lower-alpha; }
  .editor-area ol[type="A"] { list-style-type: upper-alpha; }
  .editor-area ol[type="i"] { list-style-type: lower-roman; }
  .editor-area ol[type="I"] { list-style-type: upper-roman; }
  .editor-area ul.dash { list-style: none; padding-left: 18px; }
  .editor-area ul.dash > li::before { content: "– "; color: var(--blue-700); font-weight: 700; }
  
  .editor-area table { width: 100%; border-collapse: collapse; margin: 10px 0; }
  .editor-area table td, .editor-area table th { border: 1px solid #ddd; padding: 8px; min-width: 50px; }

  .editor-wrap {
    border-color: #aeb8c9;
    border-radius: 4px;
    background: #d9dee8;
    box-shadow: 0 10px 26px rgba(15,23,42,.12);
  }
  .editor-titlebar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    background: #185abd;
    color: #fff;
  }
  .editor-quick-access {
    display: flex;
    gap: 4px;
    align-items: center;
  }
  .editor-quick-access button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #fff;
    cursor: pointer;
  }
  .editor-quick-access button:hover {
    border-color: rgba(255,255,255,.24);
    background: rgba(255,255,255,.14);
  }
  .editor-quick-access svg {
    width: 14px;
    height: 14px;
  }
  .editor-document-title {
    overflow: hidden;
    padding: 0 14px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .editor-window-controls {
    display: flex;
    gap: 7px;
    align-items: center;
  }
  .editor-window-controls span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.45);
  }
  .editor-ribbon-tabs {
    min-height: 33px;
    padding: 0;
    background: #f7f8fb;
    border-radius: 0;
    overflow-x: auto;
  }
  .editor-ribbon-tabs span {
    height: 33px;
    padding: 0 13px;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }
  .editor-ribbon-tabs span.file-tab {
    background: #1f6fd1;
    color: #fff;
  }
  .editor-ribbon-tabs span.active {
    color: #185abd;
    border-left: 1px solid #d6dce8;
    border-right: 1px solid #d6dce8;
  }
  .editor-toolbar {
    gap: 0;
    align-items: stretch;
    overflow-x: auto;
    padding: 8px 8px 5px;
    background: #fff;
  }
  .tb-group {
    position: relative;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 72px;
    padding: 5px 10px 18px;
    border-right-color: #d6dce8;
  }
  .tb-group-label {
    position: absolute;
    right: 10px;
    bottom: 2px;
    left: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tb-btn {
    width: 28px;
    height: 28px;
    border-color: transparent;
    border-radius: 3px;
    font-size: 12px;
  }
  .tb-select {
    height: 28px;
    max-width: 150px;
    border-radius: 3px;
  }
  .tb-select-compact {
    max-width: 70px;
  }
  .tb-color {
    width: 28px;
    height: 28px;
    border-radius: 3px;
  }
  .editor-page-shell {
    background: #d9dee8;
    border-top: 1px solid #c6cedc;
    padding: 0 10px 12px;
  }
  .editor-ruler-grid {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: 24px minmax(0, 1fr);
    min-height: 580px;
  }
  .editor-ruler-corner {
    border-right: 1px solid #b7c0cf;
    border-bottom: 1px solid #b7c0cf;
    background: #eef1f6;
  }
  .editor-ruler {
    position: relative;
    background-color: #f8fafc;
  }
  .editor-ruler-horizontal {
    border-bottom: 1px solid #b7c0cf;
    background-image:
      repeating-linear-gradient(90deg, transparent 0, transparent 23px, rgba(71,85,105,.45) 24px),
      repeating-linear-gradient(90deg, transparent 0, transparent 119px, rgba(71,85,105,.8) 120px);
  }
  .editor-ruler-horizontal span {
    position: absolute;
    top: 4px;
    width: 9px;
    height: 9px;
    transform: translateX(-50%) rotate(45deg);
    background: #64748b;
  }
  .editor-ruler-vertical {
    border-right: 1px solid #b7c0cf;
    background-image:
      repeating-linear-gradient(180deg, transparent 0, transparent 23px, rgba(71,85,105,.45) 24px),
      repeating-linear-gradient(180deg, transparent 0, transparent 119px, rgba(71,85,105,.8) 120px);
  }
  .editor-canvas {
    overflow: auto;
    padding: 16px 18px 26px;
    background:
      linear-gradient(90deg, rgba(15,23,42,.05) 1px, transparent 1px),
      linear-gradient(180deg, rgba(15,23,42,.05) 1px, transparent 1px),
      #cfd5df;
    background-size: 24px 24px, 24px 24px, auto;
  }
  .editor-paper {
    width: min(100%, 720px);
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,.12), 0 18px 34px rgba(15,23,42,.18);
    transform: scale(var(--editor-zoom, 1));
    transform-origin: top center;
  }
  .editor-area {
    width: 100%;
    min-height: 620px;
    max-height: 680px;
    margin: 0;
    padding: 54px 58px;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    color: #1f2937;
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 15px;
    line-height: 1.62;
  }
  .editor-area:focus {
    border-color: transparent;
    box-shadow: inset 0 0 0 2px rgba(24,90,189,.2);
  }
  .editor-area:empty::before {
    content: attr(data-placeholder);
    color: #9aa4b2;
    font-family: var(--font-body);
  }
  .editor-statusbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 28px;
    padding: 4px 10px;
    border-top: 1px solid #c6cedc;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
  }
  .editor-statusbar strong {
    color: #1f2937;
  }
  .editor-zoom-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }
  .editor-zoom-control button {
    width: 22px;
    height: 22px;
    border: 1px solid #c6cedc;
    border-radius: 3px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
  }
  .editor-zoom-control button:hover {
    border-color: #185abd;
    color: #185abd;
  }

  .tb-dropdown { position: relative; }
  .tb-menu {
    position: absolute;
    top: calc(100% + 4px); left: 0;
    background: white;
    border: 1px solid rgba(10,22,84,.1);
    border-radius: 10px;
    box-shadow: var(--shadow-deep);
    padding: 6px;
    min-width: 210px;
    z-index: 30;
    display: none;
  }
  .tb-dropdown.open .tb-menu { display: block; }
  .tb-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink);
  }
  .tb-menu-item:hover { background: var(--blue-100); color: var(--blue-700); }
  .tb-menu-item .marker {
    font-weight: 700; color: var(--blue-700);
    width: 22px; text-align: center;
    font-family: var(--font-mono);
  }

  /* SIGNATÁRIOS */
  .sig-list { display: flex; flex-direction: column; gap: 12px; }
  .sig-row {
    border: 1px solid rgba(10,22,84,.08);
    border-radius: 8px;
    padding: 12px;
    background: var(--blue-50);
    position: relative;
  }
  .sig-row .remove {
    position: absolute;
    top: 8px; right: 8px;
    background: transparent; border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 18px;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
  }
  .sig-row .remove:hover { background: #fde8e8; }
  .sig-row .sig-num {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 600;
    color: var(--blue-700);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }

  .add-btn {
    background: transparent;
    border: 1px dashed var(--blue-500);
    color: var(--blue-700);
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    width: 100%;
    transition: all .15s;
    margin-top: 10px;
    font-family: inherit;
  }
  .add-btn:hover { background: var(--blue-100); }
  .add-btn:disabled {
    border-style: solid;
    border-color: rgba(10,22,84,.1);
    color: var(--ink-faded);
    cursor: not-allowed;
    background: var(--blue-50);
  }
  .add-btn:disabled:hover { background: var(--blue-50); }

  .signatory-limit-banner {
    margin-top: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #fff8e8 0%, #ffeec7 100%);
    border: 1px solid #ffd285;
    border-radius: 10px;
    font-size: 11.5px;
    color: #5d4515;
    line-height: 1.55;
    display: flex; gap: 10px; align-items: flex-start;
  }
  .signatory-limit-banner .limit-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    background: var(--accent-warm);
    border-radius: 6px;
    display: grid; place-items: center;
    color: white;
    font-weight: 800;
    font-size: 12px;
  }
  .signatory-limit-banner strong { color: var(--warning); }

  .sidebar-footer {
    position: sticky;
    bottom: -24px;
    margin: 0 -24px -24px;
    padding: 16px 24px;
    background: white;
    border-top: 1px solid rgba(10,22,84,.08);
    display: flex; gap: 8px;
  }
  .app-btn {
    padding: 11px 18px;
    border: none;
    border-radius: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all .18s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
  }
  .app-btn svg { width: 14px; height: 14px; }
  .app-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  .app-btn:disabled:hover {
    transform: none;
    box-shadow: none;
  }
  .app-btn-primary {
    background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
    color: white;
    box-shadow: 0 4px 14px rgba(30,45,140,.25);
  }
  .app-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(30,45,140,.35);
  }
  .app-btn-ghost {
    background: white;
    color: var(--blue-700);
    border: 1px solid rgba(10,22,84,.1);
  }
  .app-btn-ghost:hover { background: var(--blue-50); border-color: var(--blue-500); }

  /* PREVIEW E RENDERIZAÇÃO ESTILO DOCS */
  .preview-area {
    overflow-y: auto;
    padding: 40px; 
    background: #f0f2f5; 
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .preview-area::-webkit-scrollbar { width: 10px; }
  .preview-area::-webkit-scrollbar-thumb { background: #b8c2dd; border-radius: 5px; }

  /* Indicador de paginas flutuante */
  .page-counter {
    position: sticky;
    top: 8px;
    align-self: flex-end;
    z-index: 10;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(10,22,84,.08);
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--blue-700);
    font-weight: 500;
    box-shadow: 0 4px 14px rgba(10,22,84,.08);
    margin-bottom: 14px;
    transition: all .25s;
  }
  .page-counter:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(10,22,84,.12); }
  .page-counter svg { width: 13px; height: 13px; color: var(--blue-500); }
  .page-counter strong {
    color: var(--blue-900);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* Wrapper das páginas */
  .pages-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }

  /* Página individual A4 — layout em coluna: header chrome / inner / footer chrome */
  .page {
    width: 210mm;
    height: 297mm; /* altura FIXA — força a paginação */
    padding: 20mm;
    background: white;
    box-shadow: 0 0 15px rgba(0,0,0,0.1); 
    font-family: 'Helvetica', 'Arial', sans-serif;
    color: #333;
    font-size: 11pt;
    line-height: 1.55;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    transition: box-shadow .25s;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .page:hover { box-shadow: 0 0 25px rgba(10,22,84,.18); }

  body.exporting-pdf .page {
    box-shadow: none !important;
    transform: none !important;
  }

  body.exporting-pdf .page::before {
    display: none !important;
  }

  .pdf-export-pages {
    font-family: 'Helvetica', 'Arial', sans-serif;
    color: #333;
  }

  .pdf-export-pages .page {
    display: flex !important;
    width: 210mm !important;
    height: 297mm !important;
    min-height: 297mm !important;
    max-height: 297mm !important;
    padding: 20mm !important;
    margin: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    page-break-after: always;
    break-after: page;
  }

  .pdf-export-pages .page:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  .page::before {
    content: "";
    position: absolute;
    top: 0; left: 20mm; right: 20mm; height: 100%;
    border-left: 1px dashed rgba(59, 84, 214, 0.08);
    border-right: 1px dashed rgba(59, 84, 214, 0.08);
    pointer-events: none;
    z-index: 0;
  }

  /* Cabeçalho FIXO em todas as páginas (chrome) */
  .page-chrome-header {
    flex-shrink: 0;
    display: flex; justify-content: space-between; align-items: flex-end;
    padding-bottom: 3mm;
    border-bottom: 1px solid #e0e4ee;
    margin-bottom: 6mm;
    z-index: 1;
  }
  .page-chrome-header .left,
  .page-chrome-header .right {
    font-weight: normal; color: #555; font-size: 10pt; text-transform: none;
  }

  /* Container central onde o conteúdo flui */
  .page .page-inner {
    flex: 1;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  /* Rodapé FIXO em todas as páginas (chrome) — rodapé do documento + número da página */
  .page-chrome-footer {
    flex-shrink: 0;
    margin-top: 4mm;
    padding-top: 3mm;
    border-top: 1px solid #e0e4ee;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10mm;
    z-index: 1;
  }
  .page-chrome-footer-content {
    flex: 1;
    text-align: center;
    font-size: 8pt;
    color: #555;
    line-height: 1.4;
  }
  .page-chrome-footer-content .addr {
    font-weight: 600; color: #333;
  }
  .page-chrome-footer-content .note {
    font-style: italic; margin-top: 1mm;
  }
  /* Sobrescreve a borda padrão do .doc-footer quando ele está dentro do chrome */
  .page-chrome-footer-content.doc-footer {
    margin: 0;
    padding: 0;
    border-top: none;
  }

  /* Etiqueta "Página X de Y" — ALINHADA NA MESMA LINHA do rodapé */
  .page-label {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 8pt;
    color: #999;
    font-weight: 500;
    letter-spacing: 0.5px;
    white-space: nowrap;
    align-self: center;
    min-width: 60mm;
    text-align: right;
  }

  /* "Fonte" oculta — onde o conteúdo real vive antes de ser paginado */
  .page-source {
    position: absolute;
    top: -99999px;
    left: -99999px;
    width: 170mm;
    visibility: hidden;
    pointer-events: none;
  }

  /* Estilos do header (também usado no preview source) */
  .doc-header-native-preview {
    display: flex; justify-content: space-between; align-items: flex-end;
    padding-bottom: 3mm; border-bottom: 1px solid #e0e4ee; margin-bottom: 8mm;
  }
  .doc-header-native-preview .left,
  .doc-header-native-preview .right {
    font-weight: normal; color: #555; font-size: 10pt; text-transform: none;
  }

  /* INÍCIO DO CORPO DO DOCUMENTO (Logo Lado a Lado com Títulos) */
  .doc-start { 
    display: flex; 
    align-items: center; 
    gap: 8mm; 
    margin-bottom: 8mm; 
  }
  .doc-logo { text-align: left; flex-shrink: 0; }
  .doc-logo img { height: 22mm; width: auto; display: block; }

  .doc-id { text-align: left; flex: 1; margin-bottom: 0; }
  .doc-id .type {
    font-weight: 700; text-transform: uppercase;
    font-size: 11pt; color: #333;
    letter-spacing: 1px; margin-bottom: 3mm;
  }
  .doc-id .title {
    font-size: 16pt; font-weight: 700;
    color: var(--blue-800);
    line-height: 1.2; margin-bottom: 2mm;
  }
  .doc-id .subtitle {
    font-size: 10.5pt; font-style: italic; color: #555;
  }

  /* CONTEÚDO */
  .doc-content {
    text-align: justify;
    box-sizing: border-box;
  }
  .doc-content p { margin-bottom: 4mm; text-indent: 8mm; }
  .doc-content ol, .doc-content ul { margin: 0 0 4mm 8mm; padding-left: 5mm; }
  .doc-content ol li, .doc-content ul li { margin-bottom: 2mm; text-align: justify; }
  .doc-content ol[type="a"] { list-style-type: lower-alpha; }
  .doc-content ol[type="A"] { list-style-type: upper-alpha; }
  .doc-content ol[type="i"] { list-style-type: lower-roman; }
  .doc-content ol[type="I"] { list-style-type: upper-roman; }
  .doc-content ul.dash { list-style: none; padding-left: 5mm; }
  .doc-content ul.dash > li::before { content: "– "; color: var(--blue-800); font-weight: 700; }
  .doc-content h1 { font-size: 14pt; color: var(--blue-800); margin: 5mm 0 3mm; font-weight: 700; }
  .doc-content h2 { font-size: 12pt; color: var(--blue-800); margin: 4mm 0 2mm; font-weight: 700; }
  .doc-content h3 { font-size: 11pt; color: var(--blue-800); margin: 3mm 0 2mm; font-weight: 700; }

  .doc-content table { width: 100%; border-collapse: collapse; margin: 10px 0; }
  .doc-content table td, .doc-content table th { border: 1px solid #333; padding: 8px; }

  /* ============================================================
     ESTILOS PARA EXPORTAÇÃO PDF (.pdf-sheet)
     Replicam os estilos do conteúdo para garantir que apareçam no PDF,
     já que ao copiar o innerHTML o wrapper .doc-content é removido.
     ============================================================ */
  .pdf-sheet {
    text-align: justify;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .pdf-sheet > p { margin-bottom: 4mm; text-indent: 8mm; }
  .pdf-sheet > ol, .pdf-sheet > ul { margin: 0 0 4mm 8mm; padding-left: 5mm; }
  .pdf-sheet > ol > li, .pdf-sheet > ul > li { margin-bottom: 2mm; text-align: justify; }
  .pdf-sheet > ol[type="a"] { list-style-type: lower-alpha; }
  .pdf-sheet > ol[type="A"] { list-style-type: upper-alpha; }
  .pdf-sheet > ol[type="i"] { list-style-type: lower-roman; }
  .pdf-sheet > ol[type="I"] { list-style-type: upper-roman; }
  .pdf-sheet > ul.dash { list-style: none; padding-left: 5mm; }
  .pdf-sheet > ul.dash > li::before { content: "– "; color: var(--blue-800); font-weight: 700; }
  .pdf-sheet > h1 { font-size: 14pt; color: var(--blue-800); margin: 5mm 0 3mm; font-weight: 700; }
  .pdf-sheet > h2 { font-size: 12pt; color: var(--blue-800); margin: 4mm 0 2mm; font-weight: 700; }
  .pdf-sheet > h3 { font-size: 11pt; color: var(--blue-800); margin: 3mm 0 2mm; font-weight: 700; }
  .pdf-sheet > table { width: 100%; border-collapse: collapse; margin: 10px 0; }
  .pdf-sheet > table td, .pdf-sheet > table th { border: 1px solid #333; padding: 8px; }
  .pdf-sheet .doc-start { display: flex; align-items: center; gap: 8mm; margin-bottom: 8mm; }
  .pdf-sheet .doc-start .doc-logo img { height: 22mm; width: auto; display: block; }
  .pdf-sheet .doc-id .type { font-weight: 700; text-transform: uppercase; font-size: 11pt; color: #333; letter-spacing: 1px; margin-bottom: 3mm; }
  .pdf-sheet .doc-id .title { font-size: 16pt; font-weight: 700; color: var(--blue-800); line-height: 1.2; margin-bottom: 2mm; }
  .pdf-sheet .doc-id .subtitle { font-size: 10.5pt; font-style: italic; color: #555; }

  /* TERMOS E ASSINATURAS */
  .doc-term {
    margin-top: 8mm;
    padding: 5mm;
    background: #f6f8fc;
    border-left: 3px solid var(--blue-800);
    font-size: 10pt; text-align: justify;
  }

  .doc-city-date {
    margin-top: 12mm;
    margin-bottom: 18mm;
    font-size: 10.5pt;
    color: #333;
    text-align: right;
  }

  .signatures { margin-top: 12mm; display: grid; column-gap: 10mm; row-gap: 20mm; }
  .signatures.cols-1 { grid-template-columns: 1fr; max-width: 70%; margin-left: auto; margin-right: auto; }
  .signatures.cols-2,
  .signatures.cols-3,
  .signatures.cols-4 { grid-template-columns: 1fr 1fr; max-width: none; margin-left: 0; margin-right: 0; }
  .sig-block {
    text-align: center;
    border-top: 1px solid #333;
    padding-top: 5mm; font-size: 10pt;
    min-height: 24mm;
  }
  .sig-block .name { font-weight: 700; color: var(--blue-800); margin-bottom: 1mm; }
  .sig-block .role { color: #555; margin-bottom: 1mm; }
  .sig-block .cpf { font-size: 9pt; color: #555; }
  /* NOVO RODAPÉ (Apenas Visual - Injetado em todas as páginas via jsPDF) */
  .doc-footer {
    margin-top: auto; 
    border-top: 1px solid #e0e4ee;
    padding-top: 3mm;
    font-size: 8pt; color: #555;
    text-align: center;
    line-height: 1.4;
    width: 100%;
  }
  .doc-footer .addr { font-weight: 600; color: #333; }
  .doc-footer .note { font-style: italic; margin-top: 1mm; }

  /* ============================================================
     FOOTER do site
     ============================================================ */
  .site-footer {
    background: linear-gradient(180deg, var(--blue-950) 0%, var(--blue-900) 100%);
    color: var(--blue-200);
    padding: 60px 32px 30px;
    position: relative;
    overflow: hidden;
  }
  .site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
  }
  .footer-content {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 30px;
  }
  .footer-brand-block .nav-name {
    color: white; font-size: 22px;
    margin-bottom: 12px;
  }
  .footer-brand-block .nav-name span { color: var(--accent); }
  .footer-tagline {
    color: var(--blue-200);
    font-size: 14px;
    line-height: 1.6;
    max-width: 360px;
  }
  .footer-col h4 {
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    margin-bottom: 14px;
    font-weight: 700;
  }
  .footer-col a {
    display: block;
    color: var(--blue-200);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 8px;
    transition: color .15s;
  }
  .footer-col a:hover { color: white; }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--blue-300);
    letter-spacing: 0.5px;
  }
  .footer-credit {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .footer-credit .sep {
    width: 4px; height: 4px;
    background: var(--blue-500);
    border-radius: 50%;
  }
  .footer-credit strong {
    color: white;
    font-weight: 600;
  }
  .footer-status {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px;
    background: rgba(0,212,255,.08);
    border: 1px solid rgba(0,212,255,.2);
    border-radius: 100px;
    color: var(--accent);
    font-size: 11px;
  }
  .footer-status .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse 2s infinite;
  }

  /* ============================================================
     TOAST
     ============================================================ */
  .toast {
    position: fixed;
    top: 90px; right: 24px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--success), #1b5e20);
    color: white;
    border-radius: 12px;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 16px 40px rgba(0,0,0,.2);
    z-index: 200;
    transform: translateX(140%);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
  }
  .toast.show { transform: translateX(0); }
  .toast.error { background: linear-gradient(135deg, var(--danger), #b71c1c); }
  .toast.warning { background: linear-gradient(135deg, var(--warning), #e65100); }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 1100px) {
    .workspace { grid-template-columns: 1fr; height: auto; min-height: auto; }
    .sidebar { max-height: none; border-right: none; border-bottom: 1px solid rgba(10,22,84,.08); }
    .preview-area { padding: 20px; }
    .page { transform: scale(0.85); transform-origin: top center; }
    .footer-top { grid-template-columns: 1fr; }
  }
  @media (max-width: 720px) {
    .nav { padding: 12px 18px; }
    .nav-links { display: none; }
    .hero { padding: 60px 20px 80px; }
    .hero-stats { gap: 30px; }
    .stat-num { font-size: 28px; }
    .features { padding: 40px 20px; }
    .app-section { padding: 50px 16px 70px; }
    .deco-doc { display: none; }
    .nav-counter { display: none; }
  }

  @media print {
    body { background: white; }
    .nav, .hero, .features, .app-section .app-header, .app-shell .app-topbar,
    .sidebar, .toast, .site-footer, .section-wave { display: none !important; }
    .app-section { padding: 0; background: white; }
    .app-shell { box-shadow: none; border: none; border-radius: 0; }
    .workspace { grid-template-columns: 1fr; height: auto; }
    .preview-area { padding: 0; background: white; overflow: visible; }
    .page { box-shadow: none; transform: none; padding: 0; }
  }