/* ============================================================
   Dominion Lab · Propostas de estrutura · base partilhada
   Tokens da casa (paper/cream/gold) + componentes de demo vivos
   ============================================================ */

:root{
  --paper:#FBF9F3;
  --cream:#F1EADA;
  --line:#E2D9C2;
  --ink:#0B0905;
  --warm:#1A1408;
  --text:#181614;
  --muted:#6B6357;
  --gold:#C9A24B;
  --gold-l:#E8C781;
  --gold-d:#8B6F2E;

  --bg:var(--paper);
  --surface:var(--cream);
  --surface-2:#FFFFFF;
  --border:var(--line);
  --fg:var(--text);
  --fg-strong:var(--ink);
  --fg-muted:var(--muted);
  --accent:var(--gold);
  --accent-contrast:var(--gold-d);
  --accent-soft:rgba(201,162,75,.14);
  --cta-bg:var(--ink);
  --cta-fg:var(--paper);
  --ok:#1f9d6b;
  --shadow:0 18px 50px -22px rgba(11,9,5,.22);

  --sp-1:80px; --sp-2:96px; --sp-3:112px; --sp-hero:144px;
  --r-chip:30px; --r-cta:40px;

  --font-display:"Fraunces",serif;
  --font-body:"Manrope",system-ui,sans-serif;
}

[data-theme="dark"]{
  --bg:var(--ink);
  --surface:var(--warm);
  --surface-2:#241C0E;
  --border:#3A2F1A;
  --fg:#EFE8D8;
  --fg-strong:var(--paper);
  --fg-muted:#A79C87;
  --accent:var(--gold-l);
  --accent-contrast:var(--gold-l);
  --accent-soft:rgba(232,199,129,.12);
  --cta-bg:var(--gold-l);
  --cta-fg:var(--ink);
  --ok:#34d399;
  --shadow:0 18px 50px -22px rgba(0,0,0,.6);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* guard anti-overflow SÓ com clip (clip não cria scroll-container → nunca quebra position:sticky).
   Nada de overflow-x:hidden aqui: foi isso que soltava o painel da Jornada. */
@supports (overflow:clip){html,body{overflow-x:clip}}
html,body{max-width:100%}
*{min-width:0}
img,video{max-width:100%}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--font-body);
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease,color .35s ease;
}

/* ---------- tipografia ---------- */
h1,h2,h3,.display{font-family:var(--font-display);font-weight:560;color:var(--fg-strong);line-height:1.08;letter-spacing:-.015em;overflow-wrap:break-word}
h1{font-size:clamp(2.3rem,1.4rem + 4.5vw,4.4rem);font-variation-settings:"opsz" 72}
h2{font-size:clamp(1.6rem,1.15rem + 2.2vw,2.6rem);font-variation-settings:"opsz" 40}
h3{font-size:clamp(1.2rem,1.05rem + .8vw,1.55rem)}
.lead{font-size:clamp(1.06rem,1rem + .4vw,1.3rem);color:var(--fg-muted);max-width:56ch}
.kicker{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-contrast);margin-bottom:14px;
}
.container{width:min(1180px,92vw);margin-inline:auto}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{display:flex;align-items:center;gap:14px;padding:12px 0;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:1.15rem;color:var(--fg-strong);text-decoration:none;font-weight:600;white-space:nowrap}
.brand img{width:38px;height:38px;border-radius:9px;object-fit:cover;flex-shrink:0}
.brand em{font-style:normal;color:var(--accent-contrast)}
.env-badge{
  display:inline-flex;align-items:center;padding:5px 12px;border-radius:30px;
  background:#E8A33D;color:#241a05;font-size:.6rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  white-space:nowrap;
}
.topnav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;align-items:center}
.topnav a{
  text-decoration:none;color:var(--fg-muted);font-size:.84rem;font-weight:600;
  padding:8px 14px;border-radius:var(--r-chip);white-space:nowrap;
}
.topnav a:hover,.topnav a.active{color:var(--fg-strong);background:var(--accent-soft)}
.topnav a.nav-portfolio{color:var(--accent-contrast);font-weight:700}
.topnav a.nav-home{opacity:.75}
.theme-toggle{
  margin-left:6px;width:42px;height:42px;border-radius:var(--r-chip);
  border:1px solid var(--border);background:var(--surface);cursor:pointer;
  font-size:1.05rem;display:grid;place-items:center;color:var(--fg);flex-shrink:0;
}
@media(max-width:900px){
  .topnav{gap:2px}
  .topnav a{padding:7px 10px;font-size:.76rem}
}
@media(max-width:640px){
  .env-badge{display:none}
  .brand span{display:none}
}

/* ---------- chips & CTAs ---------- */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:var(--r-chip);
  border:1px solid var(--border);background:var(--surface);
  color:var(--fg);font-size:.88rem;font-weight:600;
  cursor:pointer;transition:all .2s ease;font-family:var(--font-body);
}
.chip:hover{border-color:var(--accent)}
.chip.active{background:var(--cta-bg);color:var(--cta-fg);border-color:var(--cta-bg)}
.cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 34px;border-radius:var(--r-cta);
  background:var(--cta-bg);color:var(--cta-fg);
  font-weight:700;font-size:1rem;text-decoration:none;border:none;cursor:pointer;
  font-family:var(--font-body);transition:transform .18s ease,box-shadow .18s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.cta.ghost{background:transparent;color:var(--fg-strong);border:1.5px solid var(--fg-strong)}
.link-btn{background:none;border:none;color:var(--accent-contrast);font-weight:700;font-size:.9rem;cursor:pointer;font-family:var(--font-body);text-decoration:underline;text-underline-offset:3px}

/* ---------- hero com vídeo ---------- */
.hero{position:relative;padding-block:var(--sp-hero) var(--sp-2);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-media video{width:100%;height:100%;object-fit:cover}
/* Véu do hero: direccional — escuro à esquerda (legibilidade do texto),
   a clarear para a direita (o vídeo respira), fecho suave em baixo para a secção. */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--bg) 84%,transparent) 0%,
      color-mix(in srgb,var(--bg) 58%,transparent) 44%,
      color-mix(in srgb,var(--bg) 30%,transparent) 100%),
    linear-gradient(180deg, transparent 48%, var(--bg) 100%);
}
/* Modo escuro: véu mais leve + leve realce do vídeo para não ficar quase preto. */
[data-theme="dark"] .hero-media::after{
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--bg) 74%,transparent) 0%,
      color-mix(in srgb,var(--bg) 42%,transparent) 46%,
      color-mix(in srgb,var(--bg) 10%,transparent) 100%),
    linear-gradient(180deg, transparent 56%, var(--bg) 100%);
}
[data-theme="dark"] .hero-media video{filter:brightness(1.14) contrast(1.03) saturate(1.04)}
/* Ecrãs pequenos: o texto ocupa toda a largura, por isso o véu volta a ser
   uniforme (vertical) para o texto nunca perder contraste sobre o vídeo. */
@media (max-width:720px){
  .hero-media::after{
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 70%,transparent) 0%,
      color-mix(in srgb,var(--bg) 84%,transparent) 55%,
      var(--bg) 100%);
  }
  [data-theme="dark"] .hero-media::after{
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 60%,transparent) 0%,
      color-mix(in srgb,var(--bg) 80%,transparent) 58%,
      var(--bg) 100%);
  }
}
.hero>.container{position:relative;z-index:1}
.hero .lead{margin-top:22px}
.hero-actions{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- secções ---------- */
.section{padding-block:var(--sp-3);border-top:1px solid var(--border)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- moldura de demo ---------- */
.demo-shell{
  background:var(--surface);border:1px solid var(--border);border-radius:30px;
  padding:22px;box-shadow:var(--shadow);
}
.demo-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.demo-avatar{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-d));
  display:grid;place-items:center;color:var(--paper);
  font-family:var(--font-display);font-weight:700;flex-shrink:0;
}
.demo-title{font-weight:700;color:var(--fg-strong);font-size:.95rem}
.demo-sub{font-size:.78rem;color:var(--fg-muted)}
.demo-live{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--accent-contrast);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.demo-live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.demo-restart{margin-left:10px;width:32px;height:32px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;color:var(--accent-contrast);font-size:.9rem;display:grid;place-items:center}
.demo-restart:hover{border-color:var(--accent)}

.chat{min-height:340px;max-height:420px;overflow-y:auto;padding:18px 4px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:rgba(201,162,75,.45) transparent}
.chat::-webkit-scrollbar{width:6px}
.chat::-webkit-scrollbar-track{background:transparent}
.chat::-webkit-scrollbar-thumb{background:rgba(201,162,75,.4);border-radius:30px}
.msg{max-width:82%;padding:12px 16px;font-size:.92rem;line-height:1.5;border-radius:22px;opacity:0;transform:translateY(8px);animation:msgIn .4s ease forwards}
@keyframes msgIn{to{opacity:1;transform:none}}
.msg.in{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border);color:var(--fg)}
.msg.out{align-self:flex-end;background:var(--cta-bg);color:var(--cta-fg)}
.msg .meta{display:block;font-size:.68rem;opacity:.6;margin-top:5px}
.typing{align-self:flex-start;display:flex;gap:5px;padding:14px 18px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--fg-muted);animation:pulse 1s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}

/* ============ PELES DE CANAL — mockup real por cenário ============ */
.ch-meta{min-width:0}
.ch-avatar{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;flex-shrink:0;color:#fff;
}
.ch-badge{margin-left:auto;display:grid;place-items:center;width:22px;height:22px;flex-shrink:0}
.ch-badge svg{width:20px;height:20px;display:block}
/* chip = título + selo (ícone + nome do canal) */
.chip{display:inline-flex;align-items:center;gap:10px}
.chip .chip-t{white-space:nowrap}
.chip .chip-b{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  font-size:.68rem;font-weight:800;letter-spacing:.03em;
  padding:3px 9px 3px 7px;border-radius:20px;
  background:var(--accent-soft);color:var(--accent-contrast);border:1px solid var(--border);
}
.chip .chip-b svg{width:12px;height:12px;display:block}
.chip .chip-b.whatsapp{background:rgba(37,211,102,.14);color:#25D366;border-color:rgba(37,211,102,.35)}
.chip .chip-b.instagram{background:rgba(221,42,123,.13);color:#E1518D;border-color:rgba(221,42,123,.35)}
.chip.active .chip-b{background:rgba(255,255,255,.16);color:var(--cta-fg);border-color:rgba(255,255,255,.28)}
.chip.active .chip-b.whatsapp,.chip.active .chip-b.instagram{background:rgba(0,0,0,.12);color:var(--cta-fg);border-color:rgba(0,0,0,.2)}

/* acções do cabeçalho (chamada de vídeo / voz / menu) */
.ch-acts{margin-left:auto;display:flex;align-items:center;gap:16px;flex-shrink:0}
.ch-acts svg{width:19px;height:19px;display:block;opacity:.92}

/* WhatsApp: hora + visto duplo azul */
.wa-foot{display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-top:3px;float:right;margin-left:10px}
.wa-foot i{font-style:normal;font-size:.63rem;opacity:.55}
.wa-tick{width:15px;height:10px;color:#8696A0}
.msg.out .wa-tick{color:#53BDEB}

/* Instagram: reação e "Visto" */
.ig-react{
  position:absolute;bottom:-11px;left:12px;font-size:.72rem;line-height:1;
  background:#262626;border:2px solid #fff;border-radius:20px;padding:3px 5px;
}
[data-theme="dark"] .ig-react{border-color:#000}
.ig-seen{display:block;text-align:right;font-size:.64rem;color:#8E8E8E;margin:5px -2px -4px 0;font-weight:600}
.skin-instagram .msg{position:relative}
.skin-instagram .msg.out .ig-seen{color:rgba(255,255,255,.75)}

/* --- WhatsApp --- */
.demo-shell.skin-whatsapp,.demo-shell.skin-instagram{padding:0;overflow:hidden}
.skin-whatsapp .demo-head,.skin-instagram .demo-head{padding:12px 14px;border-bottom:none}
.skin-whatsapp .chat,.skin-instagram .chat{padding:16px 12px}
.skin-whatsapp .demo-head{background:#075E54}
.skin-whatsapp .demo-title{color:#fff}
.skin-whatsapp .demo-sub{color:rgba(255,255,255,.72)}
.skin-whatsapp .ch-avatar{background:#128C7E}
.skin-whatsapp .ch-badge{color:#fff;opacity:.9}
.skin-whatsapp .chat{
  background-color:#ECE5DD;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='0.05' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18h16a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-9l-5 4v-4h-2a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3z'/%3E%3Ccircle cx='64' cy='24' r='7'/%3E%3Cpath d='M61 24l2 2 4-4'/%3E%3Cpath d='M100 15l3.5 7 7 1-5 5 1.2 7-6.7-3.6-6.7 3.6 1.2-7-5-5 7-1z'/%3E%3Cpath d='M22 60c0-3.3 2.7-6 6-6s6 2.7 6 6c0 4.5-6 9-6 9s-6-4.5-6-9z'/%3E%3Crect x='58' y='56' width='18' height='13' rx='2'/%3E%3Cpath d='M58 59.5h18'/%3E%3Cpath d='M98 54v14M91 61h14'/%3E%3Crect x='14' y='96' width='18' height='13' rx='2'/%3E%3Cpath d='M19 96v-3a4 4 0 0 1 8 0v3'/%3E%3Ccircle cx='68' cy='102' r='8'/%3E%3Cpath d='M68 97v5l3 2'/%3E%3Cpath d='M96 109c0-5.5 4-9 9-9s9 3.5 9 9'/%3E%3Ccircle cx='105' cy='93' r='4.5'/%3E%3Cpath d='M126 44l4 4-4 4-4-4z'/%3E%3Cpath d='M44 126h12l-3 7h-6z'/%3E%3Cpath d='M120 122c0-2.8 2.2-5 5-5s5 2.2 5 5c0 3.7-5 7.5-5 7.5s-5-3.8-5-7.5z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:140px 140px;
}
.skin-whatsapp .msg{border:none;border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.13)}
.skin-whatsapp .msg.in{background:#fff;color:#111B21;border-top-left-radius:0}
.skin-whatsapp .msg.out{background:#DCF8C6;color:#111B21;border-top-right-radius:0}
.skin-whatsapp .msg .meta{opacity:.5}
.skin-whatsapp .typing i{background:#8696A0}
[data-theme="dark"] .skin-whatsapp .demo-head{background:#202C33}
[data-theme="dark"] .skin-whatsapp .chat{
  background-color:#0B141A;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.045' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18h16a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-9l-5 4v-4h-2a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3z'/%3E%3Ccircle cx='64' cy='24' r='7'/%3E%3Cpath d='M61 24l2 2 4-4'/%3E%3Cpath d='M100 15l3.5 7 7 1-5 5 1.2 7-6.7-3.6-6.7 3.6 1.2-7-5-5 7-1z'/%3E%3Cpath d='M22 60c0-3.3 2.7-6 6-6s6 2.7 6 6c0 4.5-6 9-6 9s-6-4.5-6-9z'/%3E%3Crect x='58' y='56' width='18' height='13' rx='2'/%3E%3Cpath d='M58 59.5h18'/%3E%3Cpath d='M98 54v14M91 61h14'/%3E%3Crect x='14' y='96' width='18' height='13' rx='2'/%3E%3Cpath d='M19 96v-3a4 4 0 0 1 8 0v3'/%3E%3Ccircle cx='68' cy='102' r='8'/%3E%3Cpath d='M68 97v5l3 2'/%3E%3Cpath d='M96 109c0-5.5 4-9 9-9s9 3.5 9 9'/%3E%3Ccircle cx='105' cy='93' r='4.5'/%3E%3Cpath d='M126 44l4 4-4 4-4-4z'/%3E%3Cpath d='M44 126h12l-3 7h-6z'/%3E%3Cpath d='M120 122c0-2.8 2.2-5 5-5s5 2.2 5 5c0 3.7-5 7.5-5 7.5s-5-3.8-5-7.5z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:140px 140px;
}
[data-theme="dark"] .skin-whatsapp .msg.in{background:#202C33;color:#E9EDEF}
[data-theme="dark"] .skin-whatsapp .msg.out{background:#005C4B;color:#E9EDEF}

/* --- Instagram --- */
.skin-instagram .demo-head{background:#fff;border-bottom:1px solid #DBDBDB}
.skin-instagram .demo-title{color:#000}
.skin-instagram .demo-sub{color:#8E8E8E}
.skin-instagram .ch-avatar{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4)}
.skin-instagram .ch-badge{color:#DD2A7B}
.skin-instagram .chat{background:#fff}
.skin-instagram .msg{border:none;border-radius:22px}
.skin-instagram .msg.in{background:#EFEFEF;color:#000}
.skin-instagram .msg.out{background:linear-gradient(45deg,#DD2A7B,#8134AF,#515BD4);color:#fff}
.skin-instagram .msg .meta{opacity:.65}
.skin-instagram .typing i{background:#8E8E8E}
[data-theme="dark"] .skin-instagram .demo-head{background:#000;border-bottom:1px solid #262626}
[data-theme="dark"] .skin-instagram .demo-title{color:#fff}
[data-theme="dark"] .skin-instagram .chat{background:#000}
[data-theme="dark"] .skin-instagram .msg.in{background:#262626;color:#fff}

/* --- no ecrã inteiro a casca é a própria pele --- */
.fd-live.is-shell{background:none;border:none;padding:0}
.fd-live.is-shell .demo-shell{box-shadow:none}

.scenario-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ============================================================
   DEMOS VIVOS
   ============================================================ */

/* ---------- demo de formulário (auto-preenche + valida) ---------- */
.fdemo{padding:16px 4px 4px;min-height:340px}
.fdemo .f-progress{height:6px;border-radius:30px;background:var(--border);overflow:hidden;margin-bottom:18px}
.fdemo .f-progress i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--gold-d));border-radius:30px;transition:width .5s ease}
.f-field{margin-bottom:14px}
.f-field label{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:700;margin-bottom:6px;color:var(--fg-strong)}
.f-check{font-size:.72rem;font-weight:700;color:var(--ok);opacity:0;transform:translateY(-2px);transition:all .3s}
.f-check.on{opacity:1;transform:none}
.f-input{
  width:100%;padding:12px 16px;border-radius:18px;border:1.5px solid var(--border);
  background:var(--surface-2);color:var(--fg);font-family:var(--font-body);font-size:.92rem;
  transition:border-color .3s;
}
.f-input.ok{border-color:var(--ok)}
.f-input .caret{display:inline-block;width:1px;height:1em;background:var(--accent);vertical-align:-2px;animation:pulse .8s infinite}
.f-done{
  margin-top:16px;padding:14px 18px;border-radius:18px;background:var(--accent-soft);
  border:1px solid var(--accent);color:var(--fg);font-size:.88rem;font-weight:600;
  opacity:0;transform:translateY(6px);transition:all .4s;
}
.f-done.on{opacity:1;transform:none}
.f-done b{color:var(--accent-contrast)}

/* ---------- demo de simulador (auto-cálculo, sem botão) ---------- */
.sim{padding:16px 4px 4px;min-height:340px}
.sim-note{font-size:.78rem;color:var(--fg-muted);margin-bottom:16px}
.sim-ctrl{margin-bottom:18px}
.sim-ctrl label{display:flex;justify-content:space-between;font-size:.8rem;font-weight:700;color:var(--fg-strong);margin-bottom:8px}
.sim-ctrl label output{color:var(--accent-contrast);font-weight:800}
.sim-ctrl input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:30px;
  background:linear-gradient(90deg,var(--gold) var(--fill,50%),var(--border) var(--fill,50%));
  outline:none;cursor:pointer;
}
.sim-ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-l),var(--gold-d));
  border:2px solid var(--paper);box-shadow:0 2px 10px rgba(11,9,5,.3);
}
.sim-ctrl input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-l),var(--gold-d));
  border:2px solid var(--paper);box-shadow:0 2px 10px rgba(11,9,5,.3);
}
.sim-results{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.sim-card{background:var(--surface-2);border:1px solid var(--border);border-radius:18px;padding:16px 18px}
.sim-card small{display:block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:6px}
.sim-card b{font-family:var(--font-display);font-size:clamp(1.15rem,1rem + 1vw,1.6rem);color:var(--accent-contrast);transition:opacity .2s}
.sim-live{margin-top:14px;font-size:.74rem;color:var(--ok);font-weight:700;display:flex;align-items:center;gap:6px}
.sim-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 1.4s infinite}
@media(max-width:520px){.sim-results{grid-template-columns:1fr}}

/* ---------- demo de agente (rotina auto-executada) ---------- */
.agent{padding:16px 4px 4px;min-height:340px}
.agent-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 6px;border-bottom:1px solid var(--border);font-size:.9rem;
  opacity:0;transform:translateY(6px);transition:all .4s;
}
.agent-row.on{opacity:1;transform:none}
.agent-row:last-child{border-bottom:none}
.agent-row .st{font-size:.78rem;font-weight:800;white-space:nowrap}
.agent-row .st.run{color:var(--accent-contrast)}
.agent-row .st.run::after{content:"…";animation:pulse 1s infinite}
.agent-row .st.ok{color:var(--ok)}
.agent-row .st.wait{color:var(--fg-muted)}
.agent-sum{
  margin-top:16px;padding:13px 18px;border-radius:18px;background:var(--accent-soft);
  border:1px solid var(--accent);font-size:.85rem;font-weight:600;
  opacity:0;transition:opacity .4s;
}
.agent-sum.on{opacity:1}
.agent-sum b{color:var(--accent-contrast)}

/* ---------- demo de painel de equipa ---------- */
.team{padding:16px 4px 4px;min-height:340px}
.team-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.team-stat{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:12px 14px;text-align:center}
.team-stat b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--accent-contrast)}
.team-stat small{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-muted)}
.team-feed{display:flex;flex-direction:column;gap:8px;min-height:170px}
.team-evt{
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--border);font-size:.84rem;
  opacity:0;transform:translateY(6px);transition:all .4s;
}
.team-evt.on{opacity:1;transform:none}
.team-evt .tag{font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-contrast);background:var(--accent-soft);padding:3px 9px;border-radius:30px;white-space:nowrap}
.team-sync{margin-top:12px;font-size:.74rem;color:var(--ok);font-weight:700}
@media(max-width:520px){.team-stats{grid-template-columns:1fr 1fr}}

/* ---------- jornada: mocks vivos ---------- */
.mock{background:var(--surface-2);border:1px solid var(--border);border-radius:22px;padding:20px;font-size:.88rem}
.mock-row{display:flex;justify-content:space-between;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border)}
.mock-row:last-child{border-bottom:none}
.mock .ok{color:var(--ok);font-weight:700}
.mock-bar{height:10px;border-radius:30px;background:var(--border);overflow:hidden;margin-top:8px}
.mock-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--gold-d));border-radius:30px;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.mock-num{font-family:var(--font-display);font-size:2rem;color:var(--fg-strong)}
.stage-label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-contrast);margin-bottom:10px;display:block}
.stage .mock-row{opacity:0;transform:translateY(6px);transition:all .45s}
.stage .mock-row.on{opacity:1;transform:none}

/* ---------- cartões ---------- */
.cards{display:grid;gap:22px}
.cards.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:940px){.cards.three{grid-template-columns:1fr}}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:30px;
  padding:34px 30px;display:flex;flex-direction:column;gap:14px;
  transition:transform .2s ease,box-shadow .2s ease;color:inherit;text-decoration:none;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .num{font-family:var(--font-display);font-size:2.4rem;color:var(--accent-contrast);line-height:1}
.card p{font-size:.95rem;color:var(--fg-muted)}
.card .go{margin-top:auto;font-weight:700;color:var(--accent-contrast);font-size:.9rem}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(11,9,5,.55);backdrop-filter:blur(6px);
  display:none;place-items:center;z-index:100;padding:20px;
}
.modal-overlay.open{display:grid}
.modal{
  background:var(--bg);border:1px solid var(--border);border-radius:30px;
  width:min(520px,100%);max-height:88vh;overflow-y:auto;padding:40px;position:relative;
  animation:msgIn .3s ease;
}
.modal.wide{width:min(760px,100%)}
.modal-close{
  position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:var(--r-chip);
  border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--fg);font-size:1rem;
}
.field{margin-top:18px}
.field label{display:block;font-size:.82rem;font-weight:700;margin-bottom:7px;color:var(--fg-strong)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 18px;border-radius:22px;border:1px solid var(--border);
  background:var(--surface);color:var(--fg);font-family:var(--font-body);font-size:.95rem;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);border-color:transparent}
.form-ok{text-align:center;padding:30px 10px}
.form-ok .big{font-size:2.6rem}

/* ---------- demo em ecrã inteiro + relatório gerado ---------- */
.modal.fs{width:min(1120px,96vw);max-height:92vh}
.fd-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-right:44px}
.fd-top h3{margin-top:6px}
.fd-replay{white-space:nowrap}
.fd-grid{display:grid;gap:20px;margin-top:22px}
.fd-grid.has-report{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fd-live{background:var(--surface);border:1px solid var(--border);border-radius:26px;padding:20px;min-width:0}
.fd-live .chat{min-height:360px;max-height:52vh}
.fd-report{min-width:0}
.rep-doc{background:var(--surface-2);border:1px solid var(--border);border-radius:26px;padding:24px 24px 22px;height:100%;animation:msgIn .3s ease}
.rep-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);padding-bottom:14px}
.rep-tag{display:block;font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:5px}
.rep-head b{font-family:var(--font-display);font-size:1.12rem;color:var(--fg-strong);line-height:1.2}
.rep-badge{font-size:.7rem;font-weight:800;color:var(--fg-muted);border:1px solid var(--border);border-radius:20px;padding:4px 12px;white-space:nowrap}
.rep-badge.ok{color:var(--ok);border-color:var(--ok)}
.rep-sub{font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-muted);margin:18px 0 8px}
.rep-grid{display:flex;flex-direction:column}
.rep-row{display:flex;justify-content:space-between;gap:14px;padding:9px 2px;border-bottom:1px dashed var(--border)}
.rep-row:last-child{border-bottom:none}
.rep-k{color:var(--fg-muted);font-size:.9rem}
.rep-v{color:var(--fg-strong);font-weight:700;font-size:.92rem;text-align:right}
.rep-res .rep-v{color:var(--accent-contrast);font-family:var(--font-display);font-size:1.08rem}
.rep-foot{margin-top:16px;font-size:.88rem;color:var(--fg-muted);line-height:1.5}
.rep-foot b{color:var(--accent-contrast)}
.rep-empty{color:var(--fg-muted);font-size:.9rem;padding:38px 14px;text-align:center;border:1px dashed var(--border);border-radius:22px}
@media(max-width:760px){.fd-grid.has-report{grid-template-columns:1fr}.fd-live .chat{max-height:44vh}}

/* ---------- necessidades (proposta 2) ---------- */
.need-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:44px}
.need-card{
  text-align:left;padding:24px 22px;border-radius:30px;border:1px solid var(--border);
  background:var(--surface);cursor:pointer;font-family:var(--font-body);color:var(--fg);
  transition:all .2s ease;display:flex;flex-direction:column;gap:10px;
}
.need-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.need-card.active{background:var(--cta-bg);color:var(--cta-fg);border-color:var(--cta-bg)}
.need-card.active .need-cat{color:var(--gold-l)}
.need-q{font-family:var(--font-display);font-size:1.05rem;line-height:1.3}
.need-cat{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-contrast);margin-top:auto}
.need-panel{display:none}
.need-panel.on{display:block;animation:msgIn .45s ease}

/* ---------- jornada ---------- */
.journey{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px)}
/* mobile: o painel fica PRESO no topo e o texto passa por baixo — mesma sensação do desktop */
@media(max-width:900px){
  .journey{grid-template-columns:1fr;gap:18px}
  .journey-panel{order:-1;position:sticky;top:58px;z-index:5;background:var(--bg);padding-bottom:8px}
  .journey-panel::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;background:linear-gradient(180deg,var(--bg),transparent);pointer-events:none}
  .journey-panel .demo-shell{padding:14px;border-radius:22px}
  .journey-panel .chat{min-height:180px;max-height:32vh}
  .journey-panel .progress-rail{margin-bottom:10px}
  .journey-step{min-height:62vh;padding-block:26px}
}
.journey-steps{display:flex;flex-direction:column}
.journey-step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding-block:40px}
.journey-panel{position:sticky;top:96px;align-self:start}
.stage{display:none}
.stage.on{display:block;animation:stageIn .55s cubic-bezier(.22,.8,.26,1)}
@keyframes stageIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
.progress-rail{display:flex;gap:8px;margin-bottom:16px}
.progress-rail i{height:4px;flex:1;border-radius:30px;background:var(--border);transition:background .3s}
.progress-rail i.done{background:var(--accent)}

/* ---------- footer ---------- */
.final-cta{padding-block:var(--sp-hero);text-align:center;border-top:1px solid var(--border)}
.final-cta .lead{margin:18px auto 34px}
footer{border-top:1px solid var(--border);padding:34px 0;font-size:.82rem;color:var(--fg-muted)}
footer .container{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--accent-contrast);text-decoration:none;font-weight:700}

/* ---------- websites: overlay na mesma página ---------- */
.modal.wsites{width:min(1100px,96vw);max-height:90vh}
.wsites-note{color:var(--fg-muted);font-size:.92rem;margin-top:8px}
.wsites-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
@media(max-width:900px){.wsites-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.wsites-grid{grid-template-columns:1fr}}
.wsite{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.wsite:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.wsite-img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.wsite-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.wsite:hover .wsite-img img{transform:scale(1.05)}
.wsite-cat{position:absolute;top:10px;left:10px;z-index:2;background:color-mix(in srgb,var(--bg) 88%,transparent);color:var(--accent-contrast);font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:30px;backdrop-filter:blur(6px)}
.wsite-body{display:flex;flex-direction:column;gap:5px;padding:14px 16px 16px;flex:1}
.wsite-body b{font-family:var(--font-display);font-size:1.02rem;color:var(--fg-strong)}
.wsite-body small{font-size:.8rem;color:var(--fg-muted);flex:1}
.wsite-go{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-contrast);margin-top:6px}

/* ============================================================
   WEBSITES EM FOCO · takeover na MESMA página (estilo Jornada)
   ============================================================ */
/* vista de websites em FLUXO NORMAL (um só scroll = o da janela).
   Ao abrir, escondem-se as secções do app e mostra-se só esta; o menu (topbar) fica fixo. */
#ws-view{display:none}
body.ws-mode #ws-view{display:block}
body.ws-mode > section:not(#ws-view){display:none!important}
body.ws-mode > footer{display:none!important}
body.ws-mode .topbar .nav-portfolio{color:var(--fg-strong)!important;background:var(--accent-soft)}
#ws-view .ws-panel{position:sticky;top:calc(var(--ws-tbh,64px) + 14px);align-self:start}
@media(max-width:1000px){#ws-view .ws-panel{order:-1;position:sticky;top:var(--ws-tbh,58px);background:var(--bg);padding-block:8px;z-index:5}}

/* guia de progresso à esquerda — dá a sensação de descer/subir */
.ws-guide{position:sticky;top:calc(var(--ws-tbh,64px) + 14px);z-index:4;background:var(--bg);padding:10px 0 16px;margin-bottom:6px}
.ws-guide-count{font-family:var(--font-display);color:var(--fg-strong);font-size:1.4rem;line-height:1;display:flex;align-items:baseline;gap:6px}
.ws-guide-count b{color:var(--accent-contrast);font-size:1.9rem}
.ws-guide-count span{font-size:.9rem;color:var(--fg-muted)}
.ws-guide-bar{height:5px;border-radius:30px;background:var(--border);overflow:hidden;margin:12px 0 10px;max-width:280px}
.ws-guide-bar i{display:block;height:100%;width:8%;background:linear-gradient(90deg,var(--gold),var(--gold-d));border-radius:30px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.ws-guide-hint{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-contrast);transition:opacity .4s}
.ws-guide-hint .chev{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);border:1px solid var(--accent);align-items:center;justify-content:center;animation:wsBounce 1.4s infinite}
.ws-guide.at-end .ws-guide-hint{opacity:0;pointer-events:none}
@keyframes wsBounce{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media(max-width:1000px){.ws-guide{position:static;background:none;padding:6px 0 10px}}
.ws-bar{flex-shrink:0;display:flex;align-items:center;gap:14px;padding:12px 22px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px)}
.ws-bar .wsb-brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:1.1rem;color:var(--fg-strong);font-weight:600}
.ws-bar .wsb-brand img{width:34px;height:34px;border-radius:8px;object-fit:cover}
.ws-bar .wsb-brand em{font-style:normal;color:var(--accent-contrast)}
.ws-back{margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--border);border-radius:30px;padding:8px 16px;color:var(--accent-contrast);font-weight:700;font-size:.85rem;cursor:pointer;font-family:var(--font-body);white-space:nowrap}
.ws-back:hover{border-color:var(--accent)}
.ws-scroll{flex:1;overflow-y:auto;scroll-behavior:smooth}
.ws-hero{padding:52px 0 26px}
.ws-hero h1{font-size:clamp(2rem,1.4rem+3vw,3.4rem)}
.ws-journey{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:clamp(24px,3vw,52px);padding-bottom:60px}
@media(max-width:1000px){.ws-journey{grid-template-columns:1fr;gap:14px}}
.ws-steps{display:flex;flex-direction:column}
.ws-step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding-block:34px}
.ws-step .num{font-family:var(--font-display);font-size:1.1rem;color:var(--accent-contrast);margin-bottom:4px}
.ws-panel{position:sticky;top:20px;align-self:start}
@media(max-width:900px){.ws-panel{order:-1;position:sticky;top:0;background:var(--bg);padding-block:10px;z-index:5}.ws-step{min-height:56vh;padding-block:22px}}
.ws-frame-shell{border:1px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);background:var(--surface)}
.ws-frame-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}
.ws-frame-head .cat{font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-contrast);background:var(--accent-soft);padding:3px 9px;border-radius:30px;white-space:nowrap}
.ws-frame-head b{font-family:var(--font-display);color:var(--fg-strong);font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-frame-head .live{margin-left:auto;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-contrast);white-space:nowrap}
.ws-frame-head .live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;animation:pulse 1.6s infinite}
.ws-frame-wrap{position:relative;background:var(--surface-2);overflow:hidden;width:100%}
.ws-frame{border:0;display:block;transform-origin:0 0;background:#fff}
.ws-panel .ws-panel-hint{margin-top:10px;text-align:center;font-size:.74rem;color:var(--fg-muted)}
.ws-frame-open{display:block;text-align:center;padding:11px;border-top:1px solid var(--border);font-size:.82rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-contrast);text-decoration:none;background:var(--surface)}
.ws-frame-open:hover{background:var(--accent-soft)}
.ws-dots{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.ws-dots i{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .25s}
.ws-dots i.on{background:var(--accent);transform:scale(1.35)}