/* ═══════════════════════════════════════════════════════════════════════════
   INARI, folha de estilos única.
   Deriva do design system "Modernist": Archivo, vermelho #ec3013, grelha
   visível, réguas de 2px, raio 0. Tema escuro (site) + componentes de app.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --color-bg: #0c0b0b;
  --color-bg-deep: #0a0908;
  --color-surface: #161413;
  --color-surface-2: #1d1a19;
  --color-text: #efece9;
  --color-accent: #ec3013;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-divider: rgba(203, 197, 190, .16);
  --color-plat: #b9b3ac;
  --color-dim: #8f8a83;
  --color-ok: #3fae6a;
  --color-warn: #d9a13b;

  --font-heading: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius: 0px;
  --wrap: 1280px;
  --pad-x: 48px;
}

/* INARI Academy */
.progress-track{height:9px;background:var(--color-divider);border-radius:99px;overflow:hidden;margin:18px 0 8px}.progress-track span{display:block;height:100%;background:var(--color-accent);border-radius:inherit}.academy-layout{display:grid;grid-template-columns:minmax(220px,290px) minmax(0,1fr);gap:36px;align-items:start}.academy-syllabus{margin:0;position:sticky;top:105px;max-height:calc(100vh - 130px);overflow:auto}.academy-syllabus>strong{display:block;margin:20px 0 8px}.academy-lesson-link{display:block;padding:9px 11px;margin:2px 0;border-radius:8px;color:var(--color-muted);font-size:13px}.academy-lesson-link:hover,.academy-lesson-link.active{background:var(--color-card);color:var(--color-text)}.academy-lesson-link.active{box-shadow:inset 3px 0 var(--color-accent)}.academy-video{display:block;width:100%;max-height:70vh;background:#080808;border-radius:12px;margin:24px 0}.academy-stream{width:100%;aspect-ratio:16/9;margin:24px 0}.academy-stream .academy-video{height:100%;max-height:none;margin:0;border:0}.academy-content{margin:28px 0 38px;max-width:820px}.academy-content img{max-width:100%;height:auto}.mfa-codes{columns:2;white-space:pre-wrap;background:#171717;color:#fff;padding:22px;border-radius:10px;line-height:1.9;letter-spacing:.08em}.certificate{max-width:900px;margin:20px auto;padding:70px;border:10px double var(--color-text);text-align:center;background:#fff}.certificate h1{font-size:44px}.certificate h2{font-size:28px;color:var(--color-accent)}.certificate code{display:inline-block;margin-top:24px;padding:8px 12px;background:var(--color-card)}
.mfa-recovery-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}.mfa-recovery-grid code,.mfa-secret{background:#171717;color:#fff;padding:12px;border-radius:8px}.mfa-secret{display:flex;flex-direction:column;gap:7px;margin:18px 0}.mfa-secret code{overflow-wrap:anywhere}.mfa-steps{padding-left:20px;line-height:1.7}
.academy-lesson-link{color:var(--color-dim)}.academy-lesson-link:hover,.academy-lesson-link.active{background:var(--color-surface-2)}.certificate{border-color:#1b1918;background:#fff;color:#1b1918}.certificate h1{color:#1b1918}.certificate code{background:#efefef;color:#1b1918}
@media(max-width:850px){.academy-layout{grid-template-columns:1fr}.academy-syllabus{position:relative;top:auto;max-height:none}.mfa-codes{columns:1}.certificate{padding:35px 20px}.certificate h1{font-size:30px}}
@media print{.site-nav,.certificate+*,.academy-syllabus{display:none!important}.certificate{border-color:#111;margin:0;box-shadow:none}body{background:#fff}}

/* INARI Academy, páginas públicas e área autenticada */
.hero { border-top: 2px solid var(--color-divider); background: radial-gradient(circle at 82% 35%, rgba(236,48,19,.12), transparent 34%); }
.hero > .wrap { min-height: 620px; padding-top: clamp(86px,9vw,132px); padding-bottom: clamp(76px,8vw,112px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero h1 { font-size: clamp(58px,8vw,108px); line-height: .88; letter-spacing: -.045em; }
.hero h1 em { color: var(--color-accent); font-style: normal; }
.hero p { max-width: 62ch; margin-top: 28px; color: rgba(239,236,233,.68); font-size: clamp(17px,2vw,20px); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.section { border-top: 2px solid var(--color-divider); }
.section > .wrap { padding-top: clamp(72px,7vw,96px); padding-bottom: clamp(72px,7vw,96px); }
.section-dark { background: var(--color-bg-deep); }
.section-num { display: block; color: var(--color-accent); font-size: 11px; font-weight: 800; letter-spacing: .16em; margin-bottom: 24px; }
.section-head { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr); gap: 48px; align-items: end; margin-bottom: 44px; }
.section-head.section-head-single { grid-template-columns: 1fr; }
.section-head h2 { font-size: clamp(36px,4vw,58px); line-height: 1; }
.section-head p { color: rgba(239,236,233,.66); font-size: 16px; line-height: 1.7; margin: 0; }
.academy-catalog-card { margin: 0; display: flex; min-height: 290px; flex-direction: column; border-top: 3px solid var(--color-accent); }
.academy-catalog-card h3 { margin-top: 20px; font-size: 24px; }
.academy-catalog-card .academy-card-price { margin-top: auto; padding-top: 22px; font-size: 25px; font-weight: 800; }
.academy-app-main { padding-top: 72px; padding-bottom: 70px; min-height: calc(100vh - 78px); }
.academy-home-link { color: var(--color-accent) !important; }
.academy-user-name { white-space: nowrap; font-size: 12px; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-x: clip;
}
main > section { overflow: hidden; overflow: clip; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: 800;
  line-height: 1.12; letter-spacing: -.015em; margin: 0 0 var(--space-2);
}
p { margin: 0 0 var(--space-3); }
a { color: var(--color-text); text-decoration: none; }
img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: rgba(236, 48, 19, .35); }

.plat  { color: var(--color-plat); }
.muted { color: rgba(239, 236, 233, .6); }
.dim   { color: var(--color-dim); }
.accent { color: var(--color-accent); }
.brushed {
  background: linear-gradient(100deg, #6b665f 0%, #e7e1d8 42%, #a49e96 60%, #f2ede5 78%, #6b665f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grayscale { filter: grayscale(1) contrast(1.08); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
[data-section] { scroll-margin-top: 78px; }

.kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.kicker .sq { width: 9px; height: 9px; background: var(--color-accent); display: block; flex: none; }
.kicker span:last-child {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-plat);
}

.h-display { font-size: clamp(56px, 7vw, 96px); line-height: .95; letter-spacing: -.025em; margin: 0; }
/* Títulos comerciais de entrada: frases mais longas do que o display de marca,
   por isso precisam de mais ar entre linhas do que o display de uma palavra. */
.h-display-lead {
  font-size: clamp(26px, 4.9vw, 70px);
  line-height: 1.08; letter-spacing: -.02em;
  overflow-wrap: break-word;
}
/* Em ecrãs estreitos o tamanho desce o suficiente para cada linha escrita caber
   numa linha real, sem quebras a meio da frase. */
@media (max-width: 760px) { .h-display-lead { line-height: 1.24; letter-spacing: -.005em; } }
.h-section { font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -.025em; margin: 0; }

/* ── Botões ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 13px; line-height: 1.2; letter-spacing: .04em;
  color: var(--color-text); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 13px 22px;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #0c0b0b; }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: rgba(239, 236, 233, .08); }
.btn-sm { padding: 8px 14px; font-size: 12px; }
.ghost-btn {
  border: 2px solid #0c0b0b; color: #0c0b0b;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: .04em;
  padding: 16px 30px; text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s; display: inline-block;
}
.ghost-btn:hover { background: #0c0b0b; color: #efece9; }

/* ── Formulários ────────────────────────────────────────────────────────── */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px; color: rgba(239, 236, 233, .7);
}
.input {
  width: 100%; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius);
}
.input:hover { border-color: rgba(203, 197, 190, .4); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 110px; resize: vertical; }
select.input { appearance: auto; }
/* Variante compacta para barras de filtro; volta ao tamanho normal em telemóvel. */
.input-compact { min-height: 34px; padding: 4px 10px; font-size: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: rgba(239,236,233,.75); }
.check input { margin-top: 3px; accent-color: var(--color-accent); }

/* ── Nav do site ────────────────────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 11, 11, .86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--color-divider);
}
.site-nav .bar { display: flex; align-items: center; gap: 26px; padding-top: 16px; padding-bottom: 16px; }
.site-nav .brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.site-nav .brand span { font-weight: 800; font-size: 19px; letter-spacing: .03em; }
.site-nav .nav-links { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.site-nav .nav-links > a { display: block; white-space: nowrap; color: rgba(239,236,233,.78); transition: color .2s; font-size: var(--fs-meta); }
.site-nav .nav-links > a:hover { color: var(--color-accent); }
.site-nav a[data-navlink] { display: block; white-space: nowrap; color: rgba(239, 236, 233, .78); transition: color .2s; font-size: var(--fs-meta); }
.site-nav a[data-navlink]:hover,
.site-nav a[data-navlink][aria-current="true"] { color: var(--color-accent); }
.site-nav .clock {
  font-size: var(--fs-micro); letter-spacing: .14em; color: var(--color-dim); font-variant-numeric: tabular-nums;
}
.nav-toggle { display: none; background: none; border: 1px solid var(--color-divider); color: var(--color-text); padding: 8px 12px; font-family: var(--font-heading); font-weight: 800; cursor: pointer; }

/* ── Secções / estatísticas ─────────────────────────────────────────────── */
.rule-top { border-top: 2px solid var(--color-divider); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-cell { padding: 38px var(--pad-x); border-right: 1px solid var(--color-divider); }
.stat-cell:last-child { border-right: 0; }
.stat-cell .num { font-weight: 800; font-size: clamp(38px, 3.6vw, 54px); letter-spacing: -.03em; line-height: 1; }
.stat-cell .lbl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-top: 12px; color: var(--color-plat); }

/* ── Tiles (setores / equipa) ───────────────────────────────────────────── */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.work-tile { display: block; background: var(--color-surface); border: 1px solid var(--color-divider); }
.work-tile .tile-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.work-tile .tile-img { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.work-tile:hover .tile-img { transform: scale(1.06); }
.work-tile .tile-over {
  position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease;
  background: linear-gradient(180deg, rgba(12, 11, 11, .1), rgba(12, 11, 11, .82));
  display: flex; flex-direction: column; justify-content: flex-end; padding: 22px;
}
.work-tile:hover .tile-over { opacity: 1; }
.work-tile .tile-foot { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; }
.work-tile .tile-title { font-weight: 800; font-size: 18px; transition: color .3s; }
.work-tile:hover .tile-title { color: var(--color-accent); }
.tile-cat { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-plat); }

/* Placeholder de imagem (padrão de grelha + marca torii) */
.ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    linear-gradient(rgba(203, 197, 190, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203, 197, 190, .06) 1px, transparent 1px),
    var(--color-surface-2);
  background-size: 46px 46px, 46px 46px, auto;
}
.ph span { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--color-dim); }

.filter-btn {
  background: transparent; border: 1px solid var(--color-divider); color: rgba(239, 236, 233, .7);
  font-family: var(--font-heading); font-weight: 800; font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; padding: 9px 15px; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.filter-btn:hover { border-color: var(--color-accent); color: var(--color-text); }
.filter-btn[aria-pressed="true"] { background: var(--color-accent); color: #0c0b0b; border-color: var(--color-accent); }


/* ── Linhas de serviços ─────────────────────────────────────────────────── */
.svc-row {
  display: grid; grid-template-columns: 80px minmax(0, 340px) 1fr 40px;
  gap: 32px; align-items: baseline; padding: 30px 16px;
  border-top: 2px solid var(--color-divider); transition: background .3s;
}
.svc-row:last-of-type { border-bottom: 2px solid var(--color-divider); }
.svc-row:hover { background: #141312; }
.svc-row .n { font-weight: 800; font-size: 15px; color: var(--color-accent); }
.svc-row h3 { font-size: 24px; letter-spacing: -.01em; margin: 0; }
.svc-row p { font-size: var(--fs-body); line-height: 1.65; margin: 0; max-width: 58ch; }
.svc-arrow { font-weight: 800; font-size: 20px; color: var(--color-dim); text-align: right; transition: transform .3s, color .3s; }
.svc-row:hover .svc-arrow { transform: translateX(6px); color: var(--color-accent); }

/* ── Método ─────────────────────────────────────────────────────────────── */
.method-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.method-cell { padding: 34px 28px; border-top: 2px solid var(--color-divider); border-left: 1px solid var(--color-divider); }
.method-cell:first-child { border-left: 0; padding-left: 0; }
.method-cell:last-child { padding-right: 0; }
.method-cell .n { font-weight: 800; font-size: 13px; color: var(--color-accent); margin: 22px 0 8px; }
.method-cell h3 { font-size: 20px; margin: 0 0 6px; }
.method-cell .sub { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; color: var(--color-plat); }
.method-cell p { font-size: var(--fs-compact); line-height: 1.65; margin: 0; }

/* ── Poster / footer ────────────────────────────────────────────────────── */
.poster { background: var(--color-accent); color: #0c0b0b; }
.poster h2 { font-size: clamp(34px, 4.4vw, 62px); letter-spacing: -.03em; line-height: .98; margin: 0; color: #0c0b0b; }
.site-footer { border-top: 2px solid var(--color-divider); }
.site-footer .bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-top: 36px; padding-bottom: 36px; }
.site-footer a { color: var(--color-plat); }
.site-footer a:hover { color: var(--color-accent); }
.footer-links { display: flex; gap: 22px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; flex-wrap: wrap; }

/* ── Tabelas ────────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-dim); padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td { padding: 10px 8px; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.table tbody tr:hover { background: rgba(239, 236, 233, .04); }
.table a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-divider); text-underline-offset: 3px; }
.table a:hover { color: var(--color-accent); }

/* ── Etiquetas de estado ────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; font-size: 11px; letter-spacing: .04em;
  padding: 3px 10px; text-transform: uppercase; font-weight: 600; white-space: nowrap;
}
.tag-novo        { background: rgba(236, 48, 19, .18); color: #ff9783; }
.tag-em_contacto { background: rgba(217, 161, 59, .16); color: #e9c07a; }
.tag-proposta    { background: rgba(120, 140, 220, .16); color: #aebdf5; }
.tag-ganho       { background: rgba(63, 174, 106, .16); color: #7fd9a4; }
.tag-perdido     { background: rgba(143, 138, 131, .18); color: #b9b3ac; }
.tag-rascunho    { background: rgba(143, 138, 131, .18); color: #b9b3ac; }
.tag-pendente    { background: rgba(217, 161, 59, .16); color: #e9c07a; }
.tag-aprovado    { background: rgba(63, 174, 106, .16); color: #7fd9a4; }
.tag-rejeitado   { background: rgba(236, 48, 19, .18); color: #ff9783; }
.tag-admin       { background: rgba(236, 48, 19, .18); color: #ff9783; }
.tag-member      { background: rgba(143, 138, 131, .18); color: #b9b3ac; }

/* ── Layout de aplicação (CRM / KITSUNE) ────────────────────────────────── */
.app-shell { display: grid; grid-template-columns: 262px 1fr; min-height: 100vh; }
.app-side {
  border-right: 1px solid var(--color-divider); padding: 0 0 12px;
  display: flex; flex-direction: column; gap: 2px; background: var(--color-bg-deep);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.app-side .brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px; border-bottom: 1px solid var(--color-divider); margin-bottom: 8px; }
.app-side .brand b { font-size: 17px; letter-spacing: .04em; line-height: 1; }
.app-side .brand small { display: block; font-size: 10px; letter-spacing: .2em; color: var(--color-dim); text-transform: uppercase; margin-top: 4px; }
.app-nav-links { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; }
.nav-group-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #57534e; padding: 14px 12px 6px; }
.app-side a.nav-item {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 9px 12px; font-size: 13.5px; color: rgba(239, 236, 233, .72);
  border: 1px solid transparent; border-radius: 7px; transition: background .14s, color .14s;
}
.app-side a.nav-item svg { flex: none; opacity: .7; transition: opacity .14s; }
.app-side a.nav-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-side a.nav-item:hover { color: var(--color-text); background: rgba(239, 236, 233, .05); }
.app-side a.nav-item:hover svg { opacity: 1; }
.app-side a.nav-item[aria-current="page"] { color: var(--color-text); background: rgba(236, 48, 19, .12); border-color: rgba(236, 48, 19, .28); }
.app-side a.nav-item[aria-current="page"] svg { opacity: 1; color: var(--color-accent); }
.nav-badge { flex: none; min-width: 20px; text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; padding: 1px 7px; border-radius: 20px; background: var(--color-accent); color: #0c0b0b; }
.nav-item[aria-current="page"] .nav-badge { background: var(--color-accent); }
.app-side .side-foot { margin-top: auto; padding: 14px 20px 6px; border-top: 1px solid var(--color-divider); font-size: 12px; color: var(--color-dim); line-height: 1.5; }
.nav-account { display: none; }
.app-topbar { display: none; }
.app-main { padding: 36px 44px 64px; min-width: 0; }
.app-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.app-head h1 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.02em; margin: 0; }

.panel { min-width: 0; background: var(--color-surface); border: 1px solid var(--color-divider); padding: 22px; }
.panel + .panel { margin-top: 22px; }
.panel h2 { font-size: 16px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 16px; color: var(--color-plat); }
.admin-actions { display: flex; flex-direction: column; gap: 12px; }
.admin-actions form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--color-divider); background: var(--color-bg-deep); }
.admin-actions .field { flex: 1 1 160px; margin: 0; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.health-table { min-width: 980px; }
.health-action { min-width: 260px; line-height: 1.45; }
.health-steps { padding-left: 20px; }
.health-steps li { margin: 0 0 12px; line-height: 1.55; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
pre { max-width: 100%; overflow-x: auto; white-space: pre; }

.kpi { border: 1px solid var(--color-divider); background: var(--color-surface); padding: 20px 22px; }
.kpi .num { font-weight: 800; font-size: 34px; letter-spacing: -.02em; line-height: 1; }
.kpi .lbl { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-plat); margin-top: 10px; }

.flash { padding: 12px 16px; margin-bottom: 20px; font-size: 14px; border: 1px solid; }
.flash-ok  { border-color: rgba(63, 174, 106, .4); background: rgba(63, 174, 106, .08); color: #9fe4bd; }
.flash-err { border-color: rgba(236, 48, 19, .4); background: rgba(236, 48, 19, .08); color: #ffb3a5; }

/* ── Componentes de dashboard (painel/pipeline/atividade) ────────────────── */
.kpi { position: relative; }
.kpi .delta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .02em; margin-top: 8px; }
.kpi .delta.up { color: #7fd9a4; }
.kpi .delta.down { color: #ff9783; }
.kpi .delta.flat { color: var(--color-dim); }
.kpi .note { display: block; font-size: 11px; color: var(--color-dim); margin-top: 6px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head h2 { margin: 0; }
.panel-head a { font-size: 12px; letter-spacing: .04em; color: var(--color-accent); white-space: nowrap; }
.panel-head a:hover { color: var(--color-text); }
.avatar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-surface-2); border: 1px solid var(--color-divider); font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--color-plat); }
.avatar.accent { background: rgba(236,48,19,.16); color: #ff9783; border-color: rgba(236,48,19,.28); }
.data-list { display: flex; flex-direction: column; }
.data-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-divider); min-width: 0; }
.data-row:first-child { border-top: 0; }
.data-row .data-body { flex: 1; min-width: 0; }
.data-row .data-body strong { display: block; font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.data-row .data-body span { display: block; font-size: 11.5px; color: var(--color-dim); margin-top: 2px; }
.data-row .data-end { flex: none; font-size: 11.5px; color: var(--color-dim); text-align: right; }
.stage-bars { display: flex; flex-direction: column; gap: 12px; }
.stage-bar { min-width: 0; }
.stage-bar .stage-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 6px; }
.stage-bar .stage-top strong { font-weight: 700; }
.stage-bar .stage-top span { color: var(--color-dim); font-variant-numeric: tabular-nums; }
.stage-bar .stage-track { height: 8px; background: var(--color-bg-deep); overflow: hidden; }
.stage-bar .stage-track i { display: block; height: 100%; background: var(--color-accent); }
.lock-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--color-divider); font-size: 13px; }
.lock-row:first-child { border-top: 0; }
.lock-row .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.lock-row .dot.open { background: var(--color-ok); }
.lock-row .dot.taken { background: var(--color-accent); }
.lock-row .lock-sector { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lock-row .lock-state { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-dim); }

/* ── Tarefas da equipa ──────────────────────────────────────────────────── */
.task-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-divider); min-width: 0; }
.task-group .task-row:first-of-type { border-top: 0; }
.task-check { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid var(--color-divider); background: transparent; color: #0c0b0b; cursor: pointer; display: grid; place-items: center; font-size: 12px; font-weight: 800; line-height: 1; transition: border-color .14s, background .14s; }
.task-check:hover { border-color: var(--color-accent); }
.task-check.checked { background: var(--color-ok); border-color: var(--color-ok); }
.task-body { flex: 1; min-width: 0; }
.task-body strong { font-size: 13.5px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.task-meta { font-size: 12px; color: var(--color-plat); margin-top: 3px; }
.task-meta a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.task-end { flex: none; display: flex; align-items: center; gap: 8px; }
.task-del { background: transparent; border: 0; color: var(--color-dim); cursor: pointer; font-size: 13px; padding: 2px 4px; line-height: 1; }
.task-del:hover { color: var(--color-accent); }
.task-row.is-done .task-body strong { text-decoration: line-through; color: var(--color-dim); }
.task-row.is-done .task-meta { opacity: .7; }

/* ── Listas reordenáveis (arrastar módulos/aulas) ───────────────────────── */
.reorder-list { display: flex; flex-direction: column; }
.reorder-list.reorder-saving { opacity: .6; pointer-events: none; }
.reorder-item { display: flex; align-items: flex-start; gap: 10px; border-top: 1px solid var(--color-divider); padding: 12px 0; min-width: 0; background: transparent; }
.reorder-item:first-child { border-top: 0; }
.reorder-item.reorder-dragging { opacity: .4; }
.reorder-handle { flex: none; cursor: grab; color: var(--color-dim); font-size: 15px; line-height: 1.4; padding: 2px 4px; margin-top: 1px; user-select: none; letter-spacing: -2px; }
.reorder-handle:active { cursor: grabbing; }
.reorder-item:hover .reorder-handle { color: var(--color-accent); }
.reorder-body { flex: 1; min-width: 0; }

/* ── Editor de aula lado-a-lado ─────────────────────────────────────────── */
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.editor-toolbar .filter-btn { padding: 6px 11px; font-size: 11.5px; }
.editor-toolbar .filter-btn em { font-style: italic; }
.lesson-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; min-width: 0; }
.lesson-editor > textarea.input { min-height: 440px; resize: vertical; font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.6; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.editor-preview { min-width: 0; min-height: 440px; max-height: 660px; overflow: auto; margin: 0; padding: 18px 20px; border: 1px solid var(--color-divider); background: var(--color-bg-deep); }
.editor-preview:empty::before { content: "A pré-visualização aparece aqui à medida que escreve."; color: var(--color-dim); font-size: 13px; }
.editor-preview > :first-child { margin-top: 0; }
.editor-preview h2 { font-size: 24px; margin: 22px 0 10px; }
.editor-preview h3 { font-size: 18px; margin: 20px 0 8px; }
.editor-preview p, .editor-preview li { font-size: 14.5px; line-height: 1.7; color: rgba(239, 236, 233, .82); }
.editor-preview ul, .editor-preview ol { padding-left: 22px; }
.editor-preview blockquote { border-left: 3px solid var(--color-accent); margin: 18px 0; padding: 4px 0 4px 16px; color: var(--color-plat); }
.editor-preview code { background: var(--color-surface-2); padding: 1px 6px; font-size: 13px; }
.editor-preview pre { background: var(--color-surface-2); padding: 14px; overflow-x: auto; }
.editor-preview a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.editor-preview img { max-width: 100%; height: auto; }
.editor-preview table { width: 100%; border-collapse: collapse; }
.editor-preview th, .editor-preview td { border: 1px solid var(--color-divider); padding: 7px 10px; text-align: left; }
@media (max-width: 900px) { .lesson-editor { grid-template-columns: 1fr; } .editor-preview { max-height: 380px; } }


/* ── Pipeline kanban (arrastar-e-largar) ────────────────────────────────── */
@keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }
.pipeline-hint { display: none; font-size: 13px; margin: -12px 0 16px; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(238px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: start; }
.kanban-col { background: var(--color-bg-deep); border: 1px solid var(--color-divider); min-width: 0; display: flex; flex-direction: column; }
.kanban-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 10px; border-bottom: 1px solid var(--color-divider); }
.kanban-col-title { font-size: 11px; }
.kanban-col-count { font-size: 12px; font-weight: 800; color: var(--color-dim); font-variant-numeric: tabular-nums; }
.kanban-list { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-height: 90px; flex: 1; transition: background .15s; }
.kanban-list.drag-over { background: rgba(236, 48, 19, .07); box-shadow: inset 0 0 0 1px rgba(236, 48, 19, .4); }
.kanban-card { background: var(--color-surface); border: 1px solid var(--color-divider); padding: 12px; cursor: grab; display: flex; flex-direction: column; gap: 8px; transition: border-color .14s, transform .14s, box-shadow .14s; }
.kanban-card:hover { border-color: rgba(203, 197, 190, .4); }
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: .4; }
.kanban-card.saving { opacity: .55; pointer-events: none; }
.kanban-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.kanban-card-top strong { font-size: 13.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.kanban-card-top .avatar { width: 26px; height: 26px; font-size: 10px; }
.kanban-card-sub { font-size: 12px; color: var(--color-plat); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; }

/* ── Drawer lateral (detalhe da lead) ───────────────────────────────────── */
.drawer-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(6, 5, 5, .58); animation: fadeIn .18s ease; }
.drawer-scrim[hidden] { display: none; }
.drawer { position: fixed; top: 0; right: 0; z-index: 91; width: min(420px, 100%); height: 100dvh; overflow-y: auto; background: var(--color-surface); border-left: 1px solid var(--color-divider); box-shadow: -18px 0 44px rgba(0, 0, 0, .5); animation: slideIn .22s cubic-bezier(.2, .7, .2, 1); }
.drawer[hidden] { display: none; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 22px 16px; border-bottom: 1px solid var(--color-divider); position: sticky; top: 0; background: var(--color-surface); }
.drawer-sector { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.drawer-head h2 { font-size: 22px; margin: 6px 0 0; letter-spacing: -.01em; overflow-wrap: anywhere; }
.drawer-close { flex: none; background: transparent; border: 1px solid var(--color-divider); color: var(--color-text); width: 34px; height: 34px; cursor: pointer; font-size: 15px; }
.drawer-close:hover { border-color: var(--color-accent); color: var(--color-accent); }
.drawer-body { padding: 20px 22px 30px; }
.drawer-tag { margin-bottom: 18px; }
.drawer-facts { display: flex; flex-direction: column; gap: 0; margin: 0; }
.drawer-facts > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--color-divider); }
.drawer-facts dt { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-dim); }
.drawer-facts dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.drawer-facts dd a { color: var(--color-accent); }
.drawer-next { margin: 20px 0; padding: 14px 16px; border-left: 3px solid var(--color-accent); background: var(--color-bg-deep); }
.drawer-next dt { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-dim); margin-bottom: 6px; }
.drawer-next p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.drawer-stages { margin: 22px 0; }
.drawer-stages-label { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-dim); margin-bottom: 10px; }
.drawer-stages-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.drawer-stages-btns .filter-btn[aria-pressed="true"] { background: var(--color-accent); color: #0c0b0b; border-color: var(--color-accent); }

/* ── Página de autenticação ─────────────────────────────────────────────── */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px; }
.auth-card { width: min(420px, 100%); border: 1px solid var(--color-divider); background: var(--color-surface); padding: 36px; }
.auth-card .mark { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.auth-card h1 { font-size: 24px; margin: 0 0 6px; }
.auth-card form { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.auth-card .field { margin: 0; }
.auth-card .btn { width: 100%; min-height: 46px; justify-content: center; }
.auth-links { display: flex; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 22px 0 0; font-size: 12px; }
.auth-links a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Calendário ─────────────────────────────────────────────────────────── */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-left: 1px solid var(--color-divider); border-top: 1px solid var(--color-divider); }
.cal-cell { min-height: 96px; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); padding: 8px; font-size: 12px; }
.cal-cell .d { font-weight: 800; color: var(--color-dim); }
.cal-cell.today .d { color: var(--color-accent); }
.cal-cell .ev { display: block; margin-top: 6px; padding: 4px 6px; background: rgba(236, 48, 19, .14); color: #ffb3a5; font-size: 11px; line-height: 1.3; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-dim); }
.cal-head span { padding: 8px; }

/* ── KITSUNE, pipeline e integrações ───────────────────────────────────── */
.pipeline { display: grid; grid-template-columns: repeat(7, minmax(190px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.pipeline-col { background: var(--color-bg-deep); border: 1px solid var(--color-divider); padding: 12px; min-height: 180px; }
.pipeline-col h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-plat); }
.pipeline-card { background: var(--color-surface); border: 1px solid var(--color-divider); padding: 12px; margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.pipeline-card span { color: var(--color-accent); font-weight: 800; }
.pipeline-card small { color: var(--color-dim); }
.integration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.integration-card { border: 1px solid var(--color-divider); padding: 14px; background: var(--color-bg-deep); }
.integration-card summary { cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.progress { height: 10px; background: var(--color-bg-deep); margin-bottom: 18px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--color-accent); }

/* ── Cookie banner ──────────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 100;
  max-width: 560px; margin: 0 auto;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-top: 3px solid var(--color-accent);
  padding: 22px; box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.cookie-banner h3 { font-size: 15px; margin: 0 0 8px; }
.cookie-banner p { font-size: 13px; color: rgba(239, 236, 233, .7); margin: 0 0 16px; }
.cookie-banner .row { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-banner a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Páginas legais / prosa ─────────────────────────────────────────────── */
.prose { max-width: 76ch; }
.prose h2 { font-size: 22px; margin: 36px 0 12px; }
.prose h3 { font-size: 17px; margin: 26px 0 10px; }
.prose p, .prose li { font-size: 15px; line-height: 1.7; color: rgba(239, 236, 233, .82); }
.prose ul { padding-left: 22px; }
.prose strong { color: var(--color-text); }

/* KITSUNE, central de ajuda */
.context-help {
  position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 42px; height: 42px;
  display: grid; place-items: center; border-radius: 50%; background: var(--color-accent);
  color: #fff; font-weight: 800; font-size: 18px; box-shadow: 0 8px 28px rgba(0,0,0,.38);
}
.context-help:hover { transform: translateY(-2px); color: #fff; }
.app-nav-links { display: flex; flex-direction: column; gap: 4px; }
.app-nav-toggle { display: none; margin-left: auto; border: 1px solid var(--color-divider); background: var(--color-surface); color: var(--color-text); padding: 8px 12px; font: inherit; cursor: pointer; }
.docs-search { display: flex; gap: 10px; margin-bottom: 30px; max-width: 820px; }
.docs-search .input { flex: 1; }
.docs-section { margin-top: 34px; }
.docs-section > h2 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-plat); }
.docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.docs-card { display: block; margin: 0 !important; transition: border-color .16s ease, transform .16s ease; }
.docs-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.docs-card h3 { font-size: 17px; margin: 8px 0; }
.docs-card p { font-size: 13.5px; line-height: 1.55; min-height: 64px; }
.docs-article { max-width: 860px; padding: clamp(24px, 4vw, 46px); }
.docs-article h2 { font-size: clamp(28px, 4vw, 42px); text-transform: none; letter-spacing: -.02em; color: var(--color-text); margin: 14px 0; }
.docs-article h3 { margin-top: 30px; font-size: 16px; }
.docs-article li { color: rgba(239,236,233,.82); line-height: 1.7; padding: 4px 0; }
.docs-intro { font-size: 18px; line-height: 1.65; color: var(--color-plat); max-width: 64ch; }

/* ── Landing KITSUNE: ritmo e composição próprios ───────────────────────── */

/* Kyubi landing */
.kyubi-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 78% 40%, rgba(236,48,19,.12), transparent 34%); }
.kyubi-hero .h-display { overflow-wrap: anywhere; }
.kyubi-hero-grid { min-height: 720px; padding-top: 92px; padding-bottom: 92px; display: grid; grid-template-columns: minmax(0,1fr) 430px; gap: 70px; align-items: center; }
.kyubi-lede { color: rgba(239,236,233,.7); font-size: 19px; line-height: 1.7; max-width: 62ch; margin: 32px 0 0; }
.kyubi-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.kyubi-disclosure { max-width: 70ch; margin-top: 22px; font-size: 12px; }
.kyubi-signal { width: 390px; aspect-ratio: 1; position: relative; border: 1px solid var(--color-divider); border-radius: 50%; display: grid; place-items: center; }
.kyubi-signal::before, .kyubi-signal::after { content: ''; position: absolute; inset: 14%; border: 1px solid var(--color-divider); border-radius: 50%; }
.kyubi-signal::after { inset: 31%; }
.kyubi-core { width: 116px; height: 116px; display: grid; place-items: center; background: var(--color-accent); color: #0c0b0b; font-weight: 800; letter-spacing: .12em; z-index: 2; }
.kyubi-signal > span { --a: calc(var(--i) * 40deg); position: absolute; left: 50%; top: 50%; width: 8px; height: 44%; transform-origin: 50% 0; transform: rotate(var(--a)) translateY(-100%); background: linear-gradient(var(--color-accent), transparent); opacity: .72; }
.kyubi-section { padding-top: clamp(72px,7vw,96px); padding-bottom: clamp(72px,7vw,96px); }
.kyubi-section > .h-section { max-width: 20ch; }
.kyubi-section-lede { font-size: 17px; line-height: 1.75; max-width: 66ch; margin-top: 22px; }
.kyubi-cards { margin-top: 42px; }
.kyubi-cards .panel { margin: 0; min-height: 210px; }
.kyubi-cards .n, .kyubi-outcomes strong { display: block; color: var(--color-accent); font-size: 12px; letter-spacing: .14em; margin-bottom: 22px; }
.kyubi-cards h3, .kyubi-outcomes h3 { font-size: 22px; }
.kyubi-outcomes { margin-top: 46px; border-top: 1px solid var(--color-divider); }
.kyubi-outcomes > div { padding: 30px 22px; border-left: 1px solid var(--color-divider); }
.kyubi-outcomes > div:first-child { border-left: 0; padding-left: 0; }
.kyubi-checklist { margin: 0; }
.kyubi-checklist ul { padding-left: 20px; margin: 18px 0 0; }
.kyubi-checklist li { padding: 7px 0; color: rgba(239,236,233,.75); }
.kyubi-interest-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(420px,520px); gap: 70px; align-items: start; }
.kyubi-form { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.kyubi-privacy { border-left: 3px solid var(--color-accent); padding: 16px 20px; margin-top: 30px; color: var(--color-plat); }
.kyubi-privacy p { margin: 6px 0 0; }
.kyubi-faq { margin-top: 38px; max-width: 940px; }
.kyubi-faq details { border-top: 1px solid var(--color-divider); padding: 20px 0; }
.kyubi-faq details:last-child { border-bottom: 1px solid var(--color-divider); }
.kyubi-faq summary { cursor: pointer; font-weight: 800; font-size: 18px; }
.kyubi-faq p { max-width: 74ch; color: rgba(239,236,233,.7); line-height: 1.7; margin: 14px 0 0; }
.kyubi-course-offer { margin: 0; align-self: center; width: 100%; border-top: 3px solid var(--color-accent); }
.kyubi-course-price { font-size: clamp(42px,5vw,64px); font-weight: 800; line-height: 1; margin: 28px 0 14px; }
.kyubi-course-offer ul { padding-left: 20px; margin: 24px 0; color: rgba(239,236,233,.75); }
.kyubi-course-offer li { padding: 6px 0; }
.kyubi-course-offer .btn { width: 100%; justify-content: center; }
.kyubi-course-modules { margin-top: 42px; border-top: 1px solid var(--color-divider); }
.kyubi-course-modules article { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 24px; padding: 26px 8px; border-bottom: 1px solid var(--color-divider); }
.kyubi-course-modules article > span { color: var(--color-accent); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.kyubi-course-modules h3 { font-size: 22px; }
.kyubi-course-final { padding-top: 76px; padding-bottom: 76px; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.kyubi-course-final h2 { font-size: clamp(38px,5vw,66px); }
.kyubi-course-final p { max-width: 58ch; }

/* Public blog and block editor */
.blog-hero { padding-top: 86px; padding-bottom: 66px; }
.blog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.blog-card { border: 1px solid var(--color-divider); background: var(--color-surface); display: flex; flex-direction: column; min-width: 0; }
.blog-card-media { aspect-ratio: 16/9; background: var(--color-surface-2); overflow: hidden; display: grid; place-items: center; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.blog-card h2 { font-size: 24px; line-height: 1.18; }
.blog-card p { color: rgba(239,236,233,.65); line-height: 1.65; }
.blog-card-meta { margin-top: auto; padding-top: 20px; font-size: var(--fs-micro); color: var(--color-dim); }
.article-header { max-width: 940px; padding-top: 82px; padding-bottom: 52px; }
.article-header h1 { font-size: clamp(42px,6vw,78px); line-height: 1; margin-top: 18px; }
.article-deck { font-size: 20px; line-height: 1.65; color: var(--color-plat); max-width: 70ch; margin-top: 24px; }
.article-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; color: var(--color-dim); font-size: 12px; }
.article-body { max-width: 860px; padding-top: 54px; padding-bottom: 92px; }
.article-body p, .article-body li { font-size: 18px; line-height: 1.85; color: rgba(239,236,233,.82); }
.article-body h2 { font-size: clamp(30px,4vw,46px); margin: 54px 0 20px; }
.article-body h3 { font-size: 25px; margin: 38px 0 16px; }
.article-body blockquote { border-left: 4px solid var(--color-accent); margin: 34px 0; padding: 10px 0 10px 26px; font-size: 23px; line-height: 1.55; color: var(--color-plat); }
.article-body figure { margin: 42px 0; }
.article-body figure img { width: 100%; height: auto; }
.article-body figcaption { color: var(--color-dim); font-size: 12px; margin-top: 10px; }
.article-faq { border-top: 1px solid var(--color-divider); padding: 24px 0; }
.article-faq h3 { margin: 0 0 10px; }
.article-faq p { margin: 0; }
.editor-block { border: 1px solid var(--color-divider); padding: 18px; margin-top: 14px; background: var(--color-bg-deep); }
.editor-block-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.seo-meter { height: 8px; background: var(--color-divider); margin: 12px 0; }
.seo-meter span { display: block; height: 100%; background: var(--color-accent); transition: width .25s ease; }

/* ── Páginas de erro ────────────────────────────────────────────────────── */
.erro-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.erro-links .btn { min-height: 48px; }
.erro-mapa { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--color-divider); }
.erro-mapa-titulo { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-dim); margin-bottom: 14px; }
.erro-mapa ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.erro-mapa a { color: var(--color-plat); font-size: 15px; text-decoration: none; }
.erro-mapa a:hover { color: var(--color-accent); }
@media (max-width: 760px) {
  .erro-links { flex-direction: column; align-items: stretch; }
  .erro-links .btn { width: 100%; justify-content: center; }
  .erro-mapa ul { flex-direction: column; gap: 0; }
  .erro-mapa a { display: block; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
}

/* ── Editor de artigos por blocos ───────────────────────────────────────── */
.be { position: relative; }
.be-hint { font-size: 12.5px; line-height: 1.6; margin: -6px 0 18px; }
.be-hint code { font-size: 12px; background: var(--color-bg-deep); padding: 1px 5px; }
.be-status { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.be-status[data-state="idle"]   { color: var(--color-dim); }
.be-status[data-state="saving"] { color: #e9c07a; }
.be-status[data-state="error"]  { color: #ff9783; text-transform: none; letter-spacing: .02em; font-size: 12px; }
.be-list { display: flex; flex-direction: column; gap: 10px; }
.be-block {
  border: 1px solid var(--color-divider); background: var(--color-bg-deep);
  padding: 12px 14px 14px; transition: border-color .14s, opacity .14s;
}
.be-block:focus-within { border-color: rgba(236, 48, 19, .45); }
.be-block.be-dragging { opacity: .4; }
.be-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
/* Pega de arrasto desenhada em CSS, para não depender de ícones externos. */
.be-drag {
  width: 18px; height: 18px; flex: none; cursor: grab;
  background-image: radial-gradient(currentColor 1.4px, transparent 1.4px);
  background-size: 6px 6px; background-position: 1px 2px; color: var(--color-dim);
}
.be-drag:active { cursor: grabbing; }
.be-kind {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--color-surface); color: var(--color-plat);
  border: 1px solid var(--color-divider); padding: 5px 8px; font-family: inherit;
}
.be-kind-static { color: var(--color-dim); }
/* Subir e descer, seta desenhada em CSS. O arrasto nativo nao funciona em
   ecra tatil, por isso estes botoes sao o caminho principal em telemovel. */
.be-move {
  margin-left: auto; width: 30px; height: 30px; flex: none; cursor: pointer;
  background: transparent; border: 1px solid var(--color-divider); position: relative;
}
.be-move + .be-move { margin-left: 0; }
.be-move::before {
  content: ''; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px;
  border-left: 2px solid var(--color-plat); border-top: 2px solid var(--color-plat);
  transform: translate(-50%, -30%) rotate(45deg);
}
.be-move[data-be-down]::before { transform: translate(-50%, -70%) rotate(-135deg); }
.be-move:hover { border-color: var(--color-accent); }
.be-move:hover::before { border-color: var(--color-accent); }
.be-remove {
  background: transparent; border: 0; cursor: pointer;
  color: var(--color-dim); font: inherit; font-size: 12px; padding: 6px 4px;
}
.be-remove:hover { color: var(--color-accent); }
.be-input {
  display: block; width: 100%; min-height: 24px; padding: 6px 0;
  font: inherit; font-size: 15px; line-height: 1.65; color: var(--color-text);
  white-space: pre-wrap; overflow-wrap: anywhere; outline: none;
}
.be-input:empty::before,
.be-input[data-empty]::before { content: attr(data-placeholder); color: var(--color-dim); }
.be-input-heading2 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.be-input-heading3 { font-size: 17px; font-weight: 700; }
.be-input-quote { font-style: italic; border-left: 3px solid var(--color-accent); padding-left: 14px; }
.be-input-list { font-size: 14.5px; }
.be-line { border-top: 1px solid var(--color-divider); margin-top: 10px; padding-top: 8px; }
.be-line.be-missing { border-top-color: rgba(236, 48, 19, .5); }
.be-line.be-missing .be-label { color: #ff9783; }
.be-label { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-dim); }
.be-img { display: block; max-height: 220px; max-width: 100%; margin-bottom: 10px; }
.be-og {
  margin-top: 10px; background: transparent; border: 1px solid var(--color-divider);
  color: var(--color-plat); font: inherit; font-size: 11.5px; padding: 7px 12px; cursor: pointer;
}
.be-og:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.be-og:disabled { opacity: .5; cursor: default; }
.be-empty { margin: 16px 0 0; }
.be-add { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-divider); }
.be-add-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-dim); margin-right: 2px; }
/* Estado de largar ficheiros. */
.be.be-drop::after {
  content: 'Largue para carregar a imagem'; position: absolute; inset: 0;
  display: grid; place-items: center; pointer-events: none;
  background: rgba(236, 48, 19, .1); border: 2px dashed var(--color-accent);
  color: var(--color-text); font-size: 14px; font-weight: 700; letter-spacing: .04em;
}

/* ── Calendário da equipa ───────────────────────────────────────────────── */
.team-calendar-titlebar { align-items: center; }
.team-calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 390px); gap: 22px; align-items: start; }
.team-calendar-panel, .team-calendar-form { margin: 0; overflow: hidden; }
.team-calendar-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 18px; }
.team-calendar-toolbar > div:first-child { display: flex; gap: 6px; }
.team-calendar-toolbar h2 { color: var(--color-text); text-transform: none; letter-spacing: -.015em; font-size: 21px; margin: 0; text-align: center; }
.team-calendar-legend { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--color-dim); }
.team-calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.calendar-dot { width: 8px; height: 8px; display: inline-block; }
.calendar-dot.global { background: var(--color-accent); }
.calendar-dot.private { background: #7b89c8; }
.team-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--color-divider); border-left: 1px solid var(--color-divider); }
.team-calendar-weekday { padding: 9px 8px; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); color: var(--color-dim); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.team-calendar-day { min-height: 124px; min-width: 0; padding: 7px; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); background: rgba(255,255,255,.012); }
.team-calendar-day.outside { background: rgba(0,0,0,.13); color: var(--color-dim); }
.team-calendar-day.today { box-shadow: inset 0 0 0 1px var(--color-accent); }
.team-calendar-day-number { font-size: 11px; font-weight: 800; color: var(--color-plat); margin-bottom: 6px; }
.team-calendar-day.today .team-calendar-day-number { color: var(--color-accent); }
.mobile-day-label { display: none; }
.team-calendar-day-events { display: flex; flex-direction: column; gap: 5px; }
.team-calendar-event { display: block; min-width: 0; padding: 5px 6px; border-left: 3px solid; background: rgba(255,255,255,.045); color: var(--color-text); font-size: 10px; line-height: 1.3; overflow: hidden; }
.team-calendar-event.global { border-left-color: var(--color-accent); }
.team-calendar-event.privado { border-left-color: #7b89c8; }
.team-calendar-event:hover { background: rgba(255,255,255,.09); }
.team-calendar-event strong, .team-calendar-event small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-calendar-event strong { font-size: 10.5px; }
.team-calendar-event small, .calendar-event-time { color: var(--color-dim); font-size: 9px; }
.team-calendar-form { position: sticky; top: 18px; }
.calendar-form-intro { font-size: 13px; line-height: 1.55; }
.calendar-event-form { display: flex; flex-direction: column; gap: 14px; }
.calendar-form-grid { gap: 12px; }
.calendar-form-actions, .calendar-agenda-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.calendar-delete-form { border-top: 1px solid var(--color-divider); margin-top: 18px; padding-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.team-calendar-agenda { margin-top: 22px; }
.calendar-agenda-list { display: flex; flex-direction: column; }
.calendar-agenda-item { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 20px; padding: 20px 0; border-top: 1px solid var(--color-divider); }
.calendar-agenda-item:first-child { border-top: 0; padding-top: 0; }
.calendar-agenda-date { border-left: 3px solid; padding-left: 12px; display: flex; flex-direction: column; }
.calendar-agenda-item.global .calendar-agenda-date { border-left-color: var(--color-accent); }
.calendar-agenda-item.privado .calendar-agenda-date { border-left-color: #7b89c8; }
.calendar-agenda-date strong { font-size: 28px; line-height: 1; }
.calendar-agenda-date span { color: var(--color-dim); font-size: 10px; text-transform: uppercase; margin-top: 5px; }
.calendar-agenda-copy h3 { font-size: 18px; margin: 8px 0; }
.calendar-agenda-copy p { max-width: 75ch; }
.calendar-agenda-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--color-dim); font-size: 11px; }
.calendar-agenda-links { font-size: 12px; color: var(--color-plat); }
.calendar-agenda-links a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── Responsivo ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  :root { --pad-x: 28px; }
  .tile-grid, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .method-grid { grid-template-columns: repeat(2, 1fr); }
  .method-cell:first-child { padding-left: 28px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-cell { border-bottom: 1px solid var(--color-divider); }
  .svc-row { grid-template-columns: 48px minmax(0, 1fr) 40px; }
  .svc-row p { grid-column: 2 / 4; }
  .svc-row h3 { overflow-wrap: break-word; }
  .hero-grid, .split-2 { grid-template-columns: 1fr !important; }
  .integration-grid { grid-template-columns: repeat(2, 1fr); }
  .docs-grid { grid-template-columns: repeat(2, 1fr); }
  .team-calendar-layout { grid-template-columns: 1fr; }
  .kyubi-hero-grid, .kyubi-interest-grid { grid-template-columns: 1fr; }
  .kyubi-signal { width: min(390px,80vw); margin: 0 auto; }
  .blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .team-calendar-form { position: static; }
  .section-head { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 960px) {
  .site-nav .bar { flex-wrap: wrap; gap: 14px; }
  .site-nav .clock { display: none; }
  .site-nav .nav-links { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 0; order: 10; }
  .site-nav .nav-links.open { display: flex; }
  .academy-user-name { display: none; }
  .site-nav a[data-navlink] { padding: 10px 4px; }
  .nav-toggle { display: block; }
  .app-shell { grid-template-columns: 1fr; }
  .app-side {
    position: sticky; top: 0; z-index: 60; height: auto; overflow: visible;
    flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px;
    padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--color-divider);
    background: rgba(12, 11, 11, .94);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .app-side .brand { flex: 1; min-width: 0; border: 0; padding: 0; margin: 0; }
  .app-side .brand small { display: none; }
  .app-nav-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; }
  /* Ícone "hambúrguer" desenhado em CSS, muda para × quando o menu abre. */
  .app-nav-toggle::before {
    content: ''; width: 16px; height: 10px; flex: none;
    border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
    box-shadow: inset 0 0 0 1px transparent, 0 -4px 0 -1px currentColor;
    transition: opacity .14s;
  }
  .app-nav-toggle[aria-expanded="true"]::before { opacity: .45; }
  .app-nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 2px; padding: 8px 12px 18px;
    background: var(--color-bg-deep); border-bottom: 1px solid var(--color-divider);
    box-shadow: 0 20px 38px rgba(0, 0, 0, .55);
    max-height: calc(100dvh - 62px); overflow-y: auto; overscroll-behavior: contain;
  }
  .app-nav-links.open { display: flex; }
  .nav-group-label { padding: 12px 12px 6px; }
  .app-side a.nav-item { padding: 12px; min-height: 44px; }
  /* O rodapé da barra lateral é substituído pelo bloco dentro do menu. */
  .app-side .side-foot { display: none; }
  .nav-account {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px 14px; margin-bottom: 4px;
    border-bottom: 1px solid var(--color-divider);
    font-size: 13px; color: var(--color-plat);
  }
  .app-main { padding: 26px 22px 52px; }
}
@media (max-width: 760px) {
  :root { --pad-x: 20px; }
  .tile-grid, .grid-2, .grid-3, .grid-4, .method-grid, .stats-grid { grid-template-columns: 1fr; }
  .svc-row { grid-template-columns: 34px minmax(0, 1fr); gap: 10px 14px; padding: 24px 0; }
  .svc-row h3 { font-size: 21px; }
  .svc-row p { grid-column: 2 / -1; }
  .svc-arrow { display: none; }
  .site-nav .bar { flex-wrap: wrap; gap: 14px; }
  .site-nav .clock { display: none; }
  .site-nav .nav-links { display: none; width: 100%; flex-direction: column; gap: 4px; padding: 10px 0; }
  .site-nav .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .app-main { padding: 24px 20px 48px; }
  .cal-cell { min-height: 64px; }
  .integration-grid { grid-template-columns: 1fr; }
  .docs-grid { grid-template-columns: 1fr; }
  .docs-search { flex-wrap: wrap; }
  .docs-search .input { flex-basis: 100%; }
  .context-help { right: 16px; bottom: 16px; }
  .panel { min-width: 0; overflow-wrap: anywhere; }
  .hero > .wrap { min-height: 520px; }
  .hero h1 { font-size: clamp(48px,16vw,72px); }
  .app-head { align-items: flex-start; flex-wrap: wrap; }
  .cal-head, .cal-grid { min-width: 700px; }
  input, select, textarea, button { max-width: 100%; }
  .admin-actions form { align-items: stretch; }
  .admin-actions .field { flex-basis: 100%; min-width: 0; }
  .admin-actions .btn { width: 100%; }
  .team-calendar-toolbar { grid-template-columns: 1fr; }
  .team-calendar-toolbar h2 { grid-row: 1; text-align: left; }
  .team-calendar-legend { justify-content: flex-start; }
  .team-calendar-grid { display: none; }
  .team-calendar-panel { padding-bottom: 18px; }
  .team-calendar-panel::after { content: 'No telemóvel, os eventos do mês aparecem na agenda abaixo.'; display: block; color: var(--color-dim); font-size: 12px; line-height: 1.5; }
  .calendar-form-grid { grid-template-columns: 1fr; }
  .calendar-form-actions .btn { width: 100%; }
  .calendar-agenda-item { grid-template-columns: 52px minmax(0,1fr); gap: 14px; padding: 18px 0; }
  .calendar-agenda-date strong { font-size: 22px; }
  .kyubi-hero-grid { min-height: 0; padding-top: 64px; padding-bottom: 64px; }
  .kyubi-lede { font-size: 16px; }
  .kyubi-signal { width: min(310px,82vw); }
  .kyubi-outcomes > div { border-left: 0; border-top: 1px solid var(--color-divider); padding-left: 0; }
  .kyubi-course-modules article { grid-template-columns: 44px minmax(0,1fr); gap: 14px; }
  .blog-grid { grid-template-columns: 1fr; }
  .article-body p, .article-body li { font-size: 16px; }
}

/* ── CRM em telemóvel ───────────────────────────────────────────────────────
   O CRM é denso (tabelas largas, formulários em grelha, kanban). Abaixo dos
   760px reorganiza-se: tabelas viram cartões empilhados, grelhas fixas passam
   a uma coluna e os alvos de toque sobem para 44px. */
@media (max-width: 760px) {
  .app-main { padding: 20px 16px 64px; }
  .app-head { gap: 14px; margin-bottom: 22px; }
  .app-head h1 { font-size: clamp(24px, 7vw, 30px); }
  .app-head .kicker { margin-bottom: 12px; }
  .app-head .kicker span:last-child { font-size: 11px; }
  /* Ações do cabeçalho ocupam a largura toda, em vez de encolherem. */
  .app-head > .btn, .app-head > a.btn, .app-head > form, .app-head > div:last-child:not(:first-child) { width: 100%; }
  .app-head > .btn, .app-head > a.btn { justify-content: center; }

  .app-main .panel { padding: 16px 14px; }
  .app-main .panel + .panel { margin-top: 16px; }
  .app-main .flash { font-size: 13.5px; }

  /* Grelhas declaradas em style="" nas páginas do CRM passam a uma coluna. */
  .app-main [style*="grid-template-columns"]:not(.keep-cols) { grid-template-columns: 1fr !important; }
  /* Barras de filtros: cada campo ocupa a linha inteira. */
  .app-main form .input[style*="max-width"] { max-width: none !important; }
  .app-main form[style*="display:flex"] > .input,
  .app-main form[style*="display:flex"] > .field { flex: 1 1 100% !important; min-width: 0; }
  .app-main form[style*="display:flex"] > .btn { width: 100%; justify-content: center; }

  /* Alvos de toque e tipografia de formulário (16px evita o zoom automático
     do Safari iOS ao focar um campo). Restrito ao CRM e às páginas de sessão,
     para não alterar os formulários do site público. */
  .app-shell .input, .app-shell select.input, .app-shell textarea.input,
  .app-shell .input-compact, .app-shell select.input-compact,
  .auth-card .input, .auth-card select.input, .auth-card textarea.input {
    font-size: 16px; min-height: 46px; padding: 8px 12px;
  }
  .app-shell textarea.input, .auth-card textarea.input { min-height: 104px; }
  .app-shell .btn, .auth-card .btn { min-height: 46px; justify-content: center; padding: 12px 18px; }
  .app-shell .btn-sm { min-height: 42px; padding: 10px 16px; font-size: 12.5px; }
  .app-shell .field > label { font-size: 12.5px; }
  .app-shell .check { font-size: 14px; }

  /* Editor de artigos: 16px evita o zoom do iOS ao focar um bloco, e a pega
     de arrasto desaparece porque o drag nativo nao existe em toque. */
  .be-input { font-size: 16px; }
  .be-drag { display: none; }
  .be-move { width: 44px; height: 44px; }
  .be-remove { min-height: 44px; padding: 6px 10px; }
  .be-kind { min-height: 44px; font-size: 12px; }
  .be-bar { flex-wrap: wrap; gap: 8px; }
  .be-og { min-height: 44px; }
  .be-hint { font-size: 12px; }

  /* KPIs: dois por linha, que é o que cabe legivelmente em 375px.
     Sem suporte para :has(), a regra geral acima deixa-os a uma coluna. */
  .grid-2:has(> .kpi), .grid-3:has(> .kpi), .grid-4:has(> .kpi) {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  }
  .kpi { padding: 14px; }
  .kpi .num { font-size: 26px; }
  .kpi .lbl { font-size: 10px; letter-spacing: .08em; margin-top: 8px; }

  /* ── Tabelas como cartões ────────────────────────────────────────────────
     site.js marca as tabelas com cabeçalho (.is-stacked) e copia o texto de
     cada <th> para data-label nas células, para não haver duplicação no HTML. */
  .table.is-stacked, .table.is-stacked thead, .table.is-stacked tbody,
  .table.is-stacked tr { display: block; width: auto; }
  .table.is-stacked { min-width: 0 !important; font-size: 13.5px; }
  .table.is-stacked thead { display: none; }
  .table.is-stacked tr {
    border: 1px solid var(--color-divider); background: var(--color-bg-deep);
    padding: 12px 14px; margin-bottom: 12px;
  }
  .table.is-stacked tr:last-child { margin-bottom: 0; }
  .table.is-stacked tbody tr:hover { background: var(--color-bg-deep); }
  /* Rótulo à esquerda e valor à direita: mantém o cartão curto e legível. */
  .table.is-stacked td {
    display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 2px 10px;
    align-items: baseline; width: auto; line-height: 1.45;
    border: 0; border-top: 1px solid var(--color-divider);
    padding: 7px 0 0; margin-top: 7px; overflow-wrap: anywhere;
  }
  .table.is-stacked td::before {
    content: attr(data-label);
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-dim); line-height: 1.5;
  }
  /* A primeira célula é o título do cartão: ocupa a largura toda, sem rótulo. */
  .table.is-stacked td:first-child {
    display: block; border-top: 0; padding-top: 0; margin-top: 0;
    font-size: 15px; line-height: 1.4;
  }
  .table.is-stacked td:first-child::before { display: none; }
  .table.is-stacked td[data-label=""] { display: block; }
  .table.is-stacked td[data-label=""]::before { display: none; }
  /* Célula vazia (ex.: coluna só com botão de apagar) não gera linha morta. */
  .table.is-stacked td:empty { display: none; }
  .table.is-stacked td .btn { width: 100%; }
  .table.is-stacked td form { margin: 0; }
  /* Células de ação: o botão ocupa a linha inteira, por baixo do rótulo. */
  .table.is-stacked td:has(> form), .table.is-stacked td:has(> .btn) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Tabelas sem cabeçalho (pares chave/valor) ficam legíveis sem virar cartão. */
  .table:not(.is-stacked) { font-size: 13px; }
  .table:not(.is-stacked) th, .table:not(.is-stacked) td { padding: 8px 6px; }

  /* Tabelas de diagnóstico que continuam a fazer sentido em largura total. */
  .table-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .health-table { min-width: 640px; }

  /* ── Kanban do pipeline ──────────────────────────────────────────────────
     Colunas quase à largura do ecrã, com encaixe ao deslizar. */
  .kanban {
    grid-auto-columns: minmax(84vw, 84vw); gap: 12px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; padding-bottom: 14px;
  }
  .kanban-col { scroll-snap-align: start; }
  .kanban-card { padding: 14px; }
  .kanban-card-sub { white-space: normal; }
  .pipeline-hint { display: block; }

  /* O detalhe da lead passa a folha inferior, mais alcançável com o polegar. */
  .drawer {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    height: auto; max-height: 88dvh;
    border-left: 0; border-top: 1px solid var(--color-divider);
    box-shadow: 0 -18px 44px rgba(0, 0, 0, .5);
    animation: slideUp .22s cubic-bezier(.2, .7, .2, 1);
  }
  .drawer-head { padding: 16px 16px 14px; }
  .drawer-head h2 { font-size: 19px; }
  .drawer-close { width: 42px; height: 42px; }
  .drawer-body { padding: 16px 16px 26px; }
  .drawer-facts > div { grid-template-columns: 1fr; gap: 3px; }
  .drawer-stages-btns .filter-btn { flex: 1 1 45%; min-height: 44px; justify-content: center; }

  /* Gráfico de barras do Analytics e mapa de calor: deslizam na horizontal. */
  .chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Login, MFA e definição de palavra-passe. */
  .auth-wrap { padding: 20px 14px; }
  .auth-card { padding: 24px 18px; }
}

@media (max-width: 420px) {
  .app-main { padding: 18px 12px 60px; }
  .panel { padding: 14px 12px; }
  .app-head h1 { font-size: 23px; }
}

@media print {
  .app-side, .btn, form { display: none !important; }
  .app-shell { display: block; }
  .app-main { padding: 0; }
  body { background: #fff; color: #111; }
  .panel, .kpi { break-inside: avoid; background: #fff; border-color: #bbb; }
  .muted, .dim, .panel h2 { color: #555; }
}

.mfa-qr-panel { margin: 24px 0; }
.mfa-qr {
  display: grid;
  place-items: center;
  width: min(300px, 100%);
  aspect-ratio: 1;
  margin: 18px auto;
  padding: 14px;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 14px;
}
.mfa-qr svg { display: block; width: 100%; height: auto; max-width: 272px; }
.mfa-qr-privacy { text-align: center; max-width: 440px; margin: 10px auto 18px; }
.mfa-manual { margin-top: 18px; }
.mfa-manual .mfa-secret { margin-top: 14px; }

/* ── Escala tipográfica do site público ─────────────────────────────────── */
/* Cinco degraus, sem meios pixéis. O corpo passa a 16px, mínimo recomendado
   para leitura confortável. A aplicação interna mantém a base de 15px. */
:root {
  --fs-micro:   12px;  /* etiquetas em maiúsculas, kickers, meta */
  --fs-meta:    14px;  /* legendas, rodapé, navegação */
  --fs-compact: 15px;  /* texto de apoio dentro de cartões */
  --fs-body:    16px;  /* corpo corrente */
  --fs-lead:    18px;  /* introduções de secção */
  --fs-hero:    20px;  /* entrada do hero */
}
.site-body { font-size: var(--fs-body); }
.site-body .u-micro   { font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; }
.site-body .u-meta    { font-size: var(--fs-meta); }
.site-body .u-compact { font-size: var(--fs-compact); line-height: 1.65; }
.site-body .u-body    { font-size: var(--fs-body);  line-height: 1.7; }
.site-body .u-lead    { font-size: var(--fs-lead);  line-height: 1.7; }
/* Títulos de bloco dentro das secções, três degraus apenas. */
.site-body .u-h3   { font-size: 20px; margin: 0 0 10px; }
.site-body .u-h3-s { font-size: 18px; margin: 0 0 8px; }
.site-body .u-h3-l { font-size: 24px; margin: 0 0 12px; }

/* ── Ritmo vertical dos heros comerciais ────────────────────────────────── */
.hero-block { padding-top: clamp(60px, 7.5vw, 96px); padding-bottom: clamp(56px, 6.5vw, 80px); }
.hero-block .kicker { margin-bottom: clamp(18px, 1.9vw, 26px); }
.hero-lead {
  margin: clamp(24px, 2.6vw, 34px) 0 0; max-width: 54ch;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.72;
}
.hero-actions-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 3.2vw, 40px); }
.hero-tags {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  margin-top: clamp(34px, 4vw, 48px); padding-top: 22px;
  border-top: 1px solid var(--color-divider);
}
.hero-tags span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* ── Torii decorativo do hero ───────────────────────────────────────────── */
/* Dimensão fixa: é um símbolo, não um elemento fluido. Quando a grelha do hero
   passa a uma coluna, o torii centra-se em vez de esticar. */
.torii-figure {
  position: relative; flex: none;
  width: 340px; height: 460px;
  margin-left: auto; margin-right: auto;
}
.torii-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(203, 197, 190, .06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(203, 197, 190, .06) 1px, transparent 1px);
  background-size: 46px 46px;
}
.torii-lintel { position: absolute; top: 20px; left: 6px; right: 6px; height: 15px; background: var(--color-accent); }
.torii-tie    { position: absolute; top: 38px; left: 30px; right: 30px; height: 9px; background: #cbc5be; }
.torii-beam   { position: absolute; top: 64px; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #6b665f, #e7e1d8, #8f8a83); }
.torii-pillar { position: absolute; top: 35px; bottom: 0; width: 18px; background: linear-gradient(180deg, #e7e1d8, #8f8a83); }
.torii-pillar-left  { left: 66px; }
.torii-pillar-right { right: 66px; }
.torii-label {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  writing-mode: vertical-rl; font-size: 11px; letter-spacing: .4em; color: var(--color-dim);
}
@media (max-width: 1080px) { .torii-figure { margin-top: 8px; } }
/* Abaixo de 380px de conteúdo, reduz mantendo a proporção exata (340:460). */
@media (max-width: 420px) { .torii-figure { width: 300px; height: 406px; } }

/* ── Coluna vertical decorativa dos heros ───────────────────────────────── */
/* Vive na margem do .wrap. Abaixo de 1080px a margem encolhe para 28px e a
   coluna passaria por cima do conteúdo, por isso desaparece. */
.side-rail {
  position: absolute; top: 0; left: 28px; bottom: 0;
  display: flex; align-items: center; pointer-events: none;
}
.side-rail span {
  writing-mode: vertical-rl; font-size: 11px; letter-spacing: .42em;
  text-transform: uppercase; color: #6f6a64;
}
.side-rail-strong span { color: #aaa49d; }
@media (max-width: 1080px) { .side-rail { display: none; } }

/* ── Páginas de setor, perguntas frequentes ─────────────────────────────── */
.faq-item { border-top: 1px solid var(--color-divider); padding: 20px 0; }
.faq-item:last-of-type { border-bottom: 1px solid var(--color-divider); }
.faq-item > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 18px; line-height: 1.35;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; color: var(--color-accent); font-size: 22px; line-height: 1; flex: none; }
.faq-item[open] > summary::after { content: "-"; }
.faq-item > summary:hover { color: var(--color-accent); }
.faq-item p { font-size: 15.5px; line-height: 1.7; margin: 14px 0 0; max-width: 74ch; }
.sector-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.sector-process > div { border-top: 2px solid var(--color-divider); padding: 22px 0 28px; }
@media (max-width: 900px) { .sector-process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sector-process { grid-template-columns: 1fr; } }

.site-footer { background: var(--color-bg-deep); }
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(4, minmax(120px, .72fr));
  gap: clamp(28px, 4vw, 56px);
  padding-top: clamp(52px, 7vw, 88px);
  padding-bottom: clamp(42px, 6vw, 70px);
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-brand p { max-width: 39ch; margin: 8px 0; color: var(--color-plat); line-height: 1.65; }
.footer-mark { display: inline-flex; align-items: center; gap: 13px; color: var(--color-text) !important; font-size: 18px; letter-spacing: .04em; }
.footer-contact { color: var(--color-text) !important; font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 5px; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-column strong { margin-bottom: 8px; color: var(--color-text); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.footer-column a { font-size: var(--fs-meta); line-height: 1.5; }
.site-footer .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  padding-bottom: 28px;
  border-top: 1px solid var(--color-divider);
  color: var(--color-dim);
  font-size: 12px;
}
.footer-bottom-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 22px; }
.footer-bottom-links a { font-size: 12px; }
@media (max-width: 920px) {
  .site-footer .footer-grid { grid-template-columns: minmax(240px, 1.5fr) repeat(2, minmax(130px, 1fr)); }
  .footer-brand { grid-row: span 2; }
}
@media (max-width: 640px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 26px; }
  .footer-brand { grid-column: 1 / -1; grid-row: auto; }
  .site-footer .footer-bottom { align-items: flex-start; flex-direction: column; }
  .footer-bottom-links { justify-content: flex-start; }
}