/* ============ MRP White-label deck — design tokens & slide system ============ */
/* Brand = single swappable variable. Derived shades via color-mix. */
:root{
  --brand:#1d4ed8;                                              /* swappable */
  --brand-deep: color-mix(in srgb, var(--brand), #04122e 42%);
  --brand-hover: color-mix(in srgb, var(--brand), #000 14%);
  --brand-soft: color-mix(in srgb, var(--brand) 14%, #fff);
  --brand-wash: color-mix(in srgb, var(--brand) 7%, #fff);
  --brand-line: color-mix(in srgb, var(--brand) 26%, #fff);

  /* neutrals (slate) */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a;
  --ink:#0b1220;

  /* semantic risk colors — NOT brand-linked */
  --risk-baixo:#34a853; --risk-mbaixo:#8bc34a; --risk-medio:#fbc02d;
  --risk-alto:#f7901e; --risk-critico:#e8473a;
  --success-fg:#059669; --success-bg:#ecfdf5;
  --warning-fg:#d97706; --warning-bg:#fffbeb;
  --danger-fg:#dc2626;  --danger-bg:#fef2f2;

  /* fonts */
  --font-display:'Inter Tight',system-ui,sans-serif;
  --font-sans:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* type scale (1920×1080) */
  --type-eyebrow:24px;
  --type-title:62px;
  --type-subtitle:40px;
  --type-lead:34px;
  --type-body:27px;
  --type-small:24px;
  --type-mega:128px;

  /* spacing */
  --pad-x:120px; --pad-top:96px; --pad-bottom:84px;
  --gap-title:46px; --gap-item:24px;

  --shadow-card:0 1px 2px 0 rgba(11,18,32,.04), 0 1px 3px 0 rgba(11,18,32,.08);
  --shadow-pop:0 4px 6px -1px rgba(11,18,32,.10), 0 2px 4px -2px rgba(11,18,32,.08);
  --radius:16px; --radius-sm:10px;
}

*{box-sizing:border-box;}
deck-stage:not(:defined){visibility:hidden;}
deck-stage{background:#0a1024;}

section{
  font-family:var(--font-sans);
  color:var(--ink);
  background:#fff;
  overflow:hidden;
}

/* ---------- shared frame ---------- */
.frame{
  position:absolute; inset:0;
  padding:var(--pad-top) var(--pad-x) var(--pad-bottom);
  display:flex; flex-direction:column;
}
.bg-app{background:var(--slate-50);}
.bg-wash{background:var(--brand-wash);}

/* eyebrow */
.eyebrow{
  font-family:var(--font-mono); font-size:var(--type-eyebrow);
  text-transform:uppercase; letter-spacing:.14em; color:var(--brand);
  font-weight:500; display:flex; align-items:center; gap:16px;
}
.eyebrow::before{content:""; width:40px; height:3px; background:var(--brand); border-radius:2px;}

/* titles */
.s-title{
  font-family:var(--font-display); font-weight:700; font-size:var(--type-title);
  line-height:1.06; letter-spacing:-.022em; color:var(--ink); max-width:24ch;
  text-wrap:balance;
}
.s-title .accent{color:var(--brand);}
.s-sub{
  font-size:var(--type-lead); line-height:1.32; color:var(--slate-600);
  max-width:40ch; font-weight:400; margin-top:6px; text-wrap:pretty;
}
.head{display:flex; flex-direction:column; gap:18px;}
.head + *{margin-top:var(--gap-title);}

/* corner mark (content slides) */
.corner-mark{
  position:absolute; top:54px; right:var(--pad-x); display:flex; align-items:center; gap:12px;
  z-index:5;
}
.corner-mark .pageno{
  font-family:var(--font-mono); font-size:18px; color:var(--slate-400);
  letter-spacing:.08em;
}
.corner-mark--light .wl-logo-ph .nm{color:#fff;}
.corner-mark--light .wl-logo-ph .nm small{color:rgba(255,255,255,.6);}

/* ---------- white-label logo slot ---------- */
.wl-logo{display:inline-flex; align-items:center; gap:14px;}
.wl-logo-img{display:none; object-fit:contain; width:auto;}
.wl-has-logo .wl-logo-img{display:block;}
.wl-has-logo .wl-logo-ph{display:none;}
.wl-logo-ph{display:inline-flex; align-items:center; gap:14px;}
.wl-logo-ph .mk{display:block;}
.wl-logo-ph .nm{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  color:var(--ink); line-height:1.05;
}
.wl-logo-ph .nm small{display:block; font-family:var(--font-mono); font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--slate-400);}

/* corner mark sizing */
.corner-mark .wl-logo-img{max-height:42px; max-width:190px;}
.corner-mark .wl-logo-ph .mk{width:34px; height:34px;}
.corner-mark .wl-logo-ph .nm{font-size:21px;}
.corner-mark .wl-logo-ph .nm small{font-size:9.5px; margin-top:1px;}

/* cover logo sizing (on dark) */
.cover .wl-logo-img{max-height:80px; max-width:380px;}
.cover .wl-logo-ph .mk{width:62px; height:62px;}
.cover .wl-logo-ph .nm{font-size:38px; color:#fff;}
.cover .wl-logo-ph .nm small{font-size:15px; color:rgba(255,255,255,.6);}

/* ---------- icon container ---------- */
.ic{
  flex:none; display:grid; place-items:center; border-radius:12px;
  background:var(--brand-wash); color:var(--brand);
}
.ic svg{width:60%; height:60%; stroke-width:2;}
.ic-56{width:56px; height:56px;}
.ic-64{width:64px; height:64px;}
.ic-72{width:72px; height:72px;}

/* ---------- arquétipos de layout de slide ----------
   O valor de PROJETO de cada slide (a razão das colunas, o respiro) entra por
   custom property no atributo style; a PROPRIEDADE mora aqui. É essa inversão
   que deixa o retrato.css redefinir coluna, respiro e alinhamento com
   especificidade normal — atributo style vence folha, custom property não. */
.split{
  display:grid;
  grid-template-columns:var(--split, 1fr 1fr);
  gap:var(--split-gap, 56px);
  align-items:var(--split-align, stretch);   /* stretch é o padrão do CSS: um .split sem alinhamento declarado tem de continuar como estava */
}
.split--fill{height:100%;}
.grid-cards{
  display:grid;
  grid-template-columns:repeat(var(--cols, 4), 1fr);
  gap:var(--grid-gap, 22px);
  align-items:var(--grid-align, stretch);
}
/* a contagem de colunas é modificador de classe, e não valor no style: em pé
   cada contagem vira uma coluna diferente, e classe o retrato.css alcança */
.grid-cards--2{--cols:2;} .grid-cards--3{--cols:3;} .grid-cards--4{--cols:4;}
/* item que atravessa colunas — classe, e não style, para que o retrato possa
   devolvê-lo a uma coluna só quando a grade encolhe */
.span-2{grid-column:span 2;} .span-3{grid-column:span 3;}

/* generic card */
.card{
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius);
  box-shadow:var(--shadow-card); padding:34px 36px;
}

/* ---------- stat (mega number) ---------- */
.stat-num{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  color:var(--brand); line-height:.92; font-variant-numeric:tabular-nums;
  font-size:var(--stat, 74px);
}
/* a unidade ("mil", "%") ao lado do número — `inherit` no fallback para não
   mexer em nenhum span que não declare a sua */
.stat-num span{font-size:var(--stat-unit, inherit);}
.stat-lbl{font-size:var(--type-small); color:var(--slate-600); line-height:1.3; margin-top:12px;}

/* ---------- risk cells ---------- */
.risk-baixo{background:var(--risk-baixo);}
.risk-mbaixo{background:var(--risk-mbaixo);}
.risk-medio{background:var(--risk-medio);}
.risk-alto{background:var(--risk-alto);}
.risk-critico{background:var(--risk-critico);}

/* matrix grid */
.matrix{display:grid; gap:var(--matrix-gap, 8px); grid-template-columns:var(--matrix-cols);}
.matrix .cell{
  display:grid; place-items:center; color:#fff; font-weight:600;
  font-size:21px; border-radius:8px; text-align:center; padding:14px 6px;
  min-height:70px;
}
.matrix .axis{
  background:var(--slate-100); color:var(--slate-700); font-weight:600;
  font-size:19px;
}
.matrix .corner{background:transparent;}

/* comparison / results table */
.rtable{width:100%; border-collapse:separate; border-spacing:6px; }
.rtable th,.rtable td{padding:0;}
.rtable .rowname{
  text-align:left; font-weight:600; color:var(--slate-700); font-size:20px;
  padding:0 18px 0 6px; line-height:1.2;
}
.rtable .colhd{
  font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:20px;
  text-align:center; padding-bottom:6px;
}
.rtable .subhd{
  font-size:16px; color:var(--slate-500); font-weight:600; text-align:center;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.05em;
}
.rtable .rc{
  color:#fff; font-weight:600; font-size:18px; text-align:center; border-radius:7px;
  height:58px; vertical-align:middle;
}

/* colunas de valor com a mesma largura (slide 19: sem isto a última coluna,
   "RH" de Matriz de risco, encolhia porque os textos dela são curtos).
   Só em paisagem — em pé o retrato.css empilha a tabela. */
deck-stage:not([data-orient="retrato"]) .rtable--eq .rc{width:104px;}

/* foco do mouse — quem apresenta aponta um fator e o resto recua.
   Só com mouse: no toque o :hover gruda depois do toque e deixaria a tabela
   apagada. Quem marca as classes é o foco.js (linha e coluna de cada célula
   não existem no CSS: a matriz é grade de divs e o cabeçalho tem colspan). */
@media (hover:hover){
  .rtable th, .rtable td, .matrix .cell{transition:opacity .18s ease, transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;}
  .rtable.is-foco th:not(.is-foco-on), .rtable.is-foco td:not(.is-foco-on){opacity:.28;}
  .rtable .rc.is-foco-alvo{transform:scale(1.07); box-shadow:0 10px 22px -8px rgba(15,23,42,.55); position:relative; z-index:1;}
  .rtable .rowname.is-foco-on, .rtable .colhd.is-foco-on, .rtable .subhd.is-foco-on{background:var(--brand); color:#fff !important; border-radius:7px;}
  /* a pílula do cabeçalho cresce 6px para cima por SOMBRA, não por padding:
     padding aumentava a linha e a tabela inteira pulava a cada coluna */
  .rtable .colhd.is-foco-on{box-shadow:0 -6px 0 0 var(--brand);}
  .matrix.is-foco .cell:not(.corner):not(.is-foco-on){opacity:.28;}
  .matrix .cell.is-foco-alvo{transform:scale(1.07); box-shadow:0 10px 22px -8px rgba(15,23,42,.55); position:relative; z-index:1;}
  .matrix .axis.is-foco-on{background:var(--brand); color:#fff;}
}

/* check list */
.checklist{display:grid; gap:var(--gap-item);}
.checklist li{display:flex; gap:18px; align-items:flex-start; list-style:none;}
.checklist .ck{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--success-bg); color:var(--success-fg); margin-top:2px;
}
.checklist .ck svg{width:22px; height:22px; stroke-width:2.6;}
.checklist .tx{font-size:var(--type-body); color:var(--slate-700); line-height:1.32;}

/* numbered list */
.numlist{display:grid; gap:18px;}
.numitem{display:flex; gap:20px; align-items:center;}
.numitem .n{
  flex:none; width:52px; height:52px; border-radius:12px; display:grid; place-items:center;
  background:var(--brand); color:#fff; font-family:var(--font-display); font-weight:700;
  font-size:25px; font-variant-numeric:tabular-nums;
}
.numitem .t{font-size:23px; color:var(--slate-700); font-weight:500; line-height:1.22;}

/* utility */
.muted{color:var(--slate-500);}
.strong{font-weight:700; color:var(--ink);}
.brandtext{color:var(--brand);}

/* eyebrow inline mark (for colored eyebrows) */
.ebmark{width:40px; height:3px; border-radius:2px; display:inline-block; margin-right:4px;}
.eyebrow .ebmark{margin-right:12px;}
.eyebrow:has(.ebmark)::before{display:none;}

/* client logos */
.clogo{max-width:160px; max-height:64px; width:auto; height:auto; object-fit:contain;}

/* scientific cards (slide 11) */
.sci{
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card); padding:28px 30px; display:flex; flex-direction:column; gap:12px;
}
.sci-tag{
  font-family:var(--font-display); font-weight:700; font-size:25px; color:var(--brand);
  letter-spacing:-.01em;
}
.sci p{font-size:21px; color:var(--slate-600); line-height:1.36; margin:0;}

/* methodology rows (slide 13) */
.mrow{display:flex; gap:16px; align-items:flex-start;}
.mrow p{font-size:22px; color:var(--slate-700); line-height:1.34; margin:0;}
.mrow p b{color:var(--ink); font-weight:700;}

/* level bars (slide 15) */
.lglvl{color:#fff; font-weight:600; font-size:18px; padding:9px 18px; border-radius:8px; line-height:1;}
.level{
  display:flex; align-items:center; justify-content:space-between;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:30px;
  padding:22px 30px; border-radius:12px; box-shadow:var(--shadow-card);
}
.level i{display:block; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.7);}

/* action rows (slide 15) */
.actrow{display:flex; gap:18px; align-items:center;}
.actrow p{font-size:24px; color:var(--slate-700); line-height:1.32; margin:0;}
.actrow p b{color:var(--ink); font-weight:700;}

/* contact lines (closing slide) */
.contact-line{display:flex; align-items:center; gap:18px; font-size:28px; color:#fff; font-weight:500;}

/* rail (thumbnail menu) toggle — viewer control */
.rail-toggle{
  position:fixed; top:14px; right:14px; z-index:2147483640;
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px;
  border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background:rgba(18,18,18,.82); color:#fff; font-family:var(--font-sans);
  font-size:13px; font-weight:500; cursor:pointer; opacity:.5;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:opacity .15s ease;
}
.rail-toggle:hover{opacity:1;}
.rail-toggle svg{width:16px; height:16px; flex:none;}
@media print{ .rail-toggle{display:none !important;} }
@media (max-width:640px){ .rail-toggle{display:none;} }

/* browser window frame */
.bwin{border-radius:16px; overflow:hidden; border:1px solid var(--slate-200); box-shadow:var(--shadow-pop); background:#fff;}
.bwin__bar{height:48px; background:var(--slate-100); border-bottom:1px solid var(--slate-200); display:flex; align-items:center; gap:9px; padding:0 20px;}
.bwin__dot{width:13px; height:13px; border-radius:50%; flex:none;}
.bwin__url{margin-left:16px; flex:1; height:28px; background:#fff; border:1px solid var(--slate-200); border-radius:8px; display:flex; align-items:center; padding:0 16px; font-family:var(--font-mono); font-size:15px; color:var(--slate-400);}
.bwin img{display:block; width:100%; height:auto;}

/* recreated app header inside the browser frame (slide 4) */
.panel-hdr{display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 26px; background:#fff; border-bottom:1px solid var(--slate-200);}
.panel-hdr .wl-logo-img{max-height:32px; max-width:170px;}
.panel-hdr .wl-logo-ph{gap:10px;}
.panel-hdr .wl-logo-ph .mk{width:30px; height:30px;}
.panel-hdr .wl-logo-ph .nm{font-size:19px;}
.panel-hdr .wl-logo-ph .nm small{font-size:9px; letter-spacing:.16em;}
.panel-user{display:flex; align-items:center; gap:12px;}
.panel-user img{width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--brand);}
.panel-user .pu-name{font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); line-height:1.15;}
.panel-user .pu-role{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:var(--slate-400); text-transform:uppercase;}

/* cover */
.cover{
  position:absolute; inset:0; background:var(--brand-deep); color:#fff;
  padding:96px var(--pad-x); display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
}
.cover h1{font-size:var(--cover-h1, 106px);}
.cover h2{font-size:var(--cover-h2, 78px);}
.cover p{font-size:var(--cover-p, inherit);}
.cover .deco{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.cover .deco span{position:absolute; border-radius:50%; border:1.5px solid rgba(255,255,255,.10);}

/* ---------- campos de imagem a gerar (placeholders) ---------- */
.imgslot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:34px 40px;border:2px dashed #94a3b8;border-radius:14px;background:#f1f5f9;color:var(--slate-500);position:relative;width:100%;box-sizing:border-box}
.imgslot__id{position:absolute;top:14px;left:18px;font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--brand);text-transform:uppercase}
.imgslot__ic{width:64px;height:64px;border-radius:12px;background:#fff;border:1px solid var(--slate-200);display:grid;place-items:center;color:var(--brand);flex:none}
.imgslot__ic svg{width:30px;height:30px}
.imgslot__lbl{font-family:var(--font-mono);font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--brand)}
.imgslot__desc{font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.32;color:var(--slate-700);max-width:34ch}
.imgslot__spec{font-family:var(--font-mono);font-size:15px;color:var(--slate-500)}
.imgslot--sm{padding:24px 28px;gap:10px}
.imgslot--sm .imgslot__desc{font-size:20px}
.imgslot--sm .imgslot__ic{width:52px;height:52px}
.imgslot--sm .imgslot__ic svg{width:24px;height:24px}
.imgslot--light{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.4)}
.imgslot--light .imgslot__ic{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.imgslot--light .imgslot__id,.imgslot--light .imgslot__lbl{color:#fff}
.imgslot--light .imgslot__desc{color:rgba(255,255,255,.92)}
.imgslot--light .imgslot__spec{color:rgba(255,255,255,.6)}
.imgslot--strip{flex-direction:row;justify-content:flex-start;gap:22px;text-align:left;padding:22px 26px}
.imgslot--strip .imgslot__id{position:static}
.imgslot--strip .imgslot__desc{font-size:19px;max-width:none}
.imgslot--strip .imgslot__ic{width:48px;height:48px}

/* ---------- slide "Sua logomarca" — interruptor: capa com sua marca x marca do cliente ---------- */
/* logo do cliente-exemplo (Siga Consultoria): mesma caixa da logo colorida que ela substitui
   em .rcover__owner-mid (ver .rcover__owner-mid .wl-logo-img em platform.css) */
.client-logo-demo{display:none; object-fit:contain; width:auto;}
.rcover__owner-mid .client-logo-demo{max-height:10.08cqw; max-width:100%;}

section.is-client-logo .rcover__owner-mid .wl-logo{display:none;}
section.is-client-logo .rcover__owner-mid .client-logo-demo{display:inline-block;}

/* interruptor — sem transition de propósito: neste deck, transição em slide que já foi
   escondido trava e congela o valor antigo (mesmo problema documentado em licenciamento.css).
   A troca acontece só por display, que não é animável. */
.cvr-switch{
  border:0; background:none; font:inherit; color:inherit;
  display:flex; align-items:center; gap:16px; margin-top:28px;
  cursor:pointer; user-select:none; padding:6px 10px 6px 0;
}
.cvr-switch .lbl{font-size:17px; font-weight:700; color:var(--slate-700);}
.cvr-switch .lbl--client{opacity:.4;}
/* o lado ativo fica cheio, o outro apaga — reforça qual marca está na capa */
section.is-client-logo .cvr-switch .lbl:not(.lbl--client){opacity:.4;}
section.is-client-logo .cvr-switch .lbl--client{opacity:1; color:var(--brand);}

.cvr-track{
  width:64px; height:32px; border-radius:16px; position:relative; flex:none;
  background:var(--slate-300);
}
section.is-client-logo .cvr-track{background:var(--brand);}
.cvr-knob{
  position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(15,23,42,.25);
}
section.is-client-logo .cvr-knob{left:35px;}
.cvr-switch:focus-visible .cvr-track{outline:3px solid var(--brand); outline-offset:3px;}

.cvr-note{margin-top:10px; font-size:16px; color:var(--slate-500);}
.imgslot--strip .imgslot__ic svg{width:22px;height:22px}