/* =========================================================
   Kamaia — componentes interactivos e diagramas
   Sem bibliotecas · preto e branco · sem contornos de cartão
   ========================================================= */

/* ---------- barra de progresso de leitura ---------- */
.progressbar{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:120;
  background:transparent; pointer-events:none;
}
.progressbar > i{
  display:block; height:100%; width:0%; background:var(--azul);
  transform-origin:left center;
}

/* ---------- transição entre páginas ---------- */
.js body{opacity:1}
.js .page-shell{animation:pageIn .32s cubic-bezier(.22,.8,.25,1) both}
.js body.is-leaving .page-shell{animation:pageOut .15s ease-in both}
@keyframes pageIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes pageOut{from{opacity:1; transform:none} to{opacity:0; transform:translateY(-8px)}}

/* ---------- revelação bidireccional ---------- */
.js [data-reveal]{
  opacity:0;
  transition:opacity .42s cubic-bezier(.22,.8,.25,1), transform .42s cubic-bezier(.22,.8,.25,1), filter .42s ease;
  transition-delay:var(--d,0ms);
  will-change:opacity, transform;
}
.js [data-reveal="up"]{transform:translateY(26px)}
.js [data-reveal="down"]{transform:translateY(-26px)}
.js [data-reveal="left"]{transform:translateX(-28px)}
.js [data-reveal="right"]{transform:translateX(28px)}
.js [data-reveal="scale"]{transform:scale(.965)}
.js [data-reveal="blur"]{filter:blur(6px); transform:translateY(16px)}
.js [data-reveal].is-in{opacity:1; transform:none; filter:none}
.js [data-reveal].is-out-up{opacity:0; transform:translateY(-18px)}
.js [data-reveal].is-out-down{opacity:0; transform:translateY(18px)}

/* palavra a palavra nos títulos de secção */
.word{display:inline-block; overflow:hidden; vertical-align:bottom}
.word > i{
  display:inline-block; font-style:normal; transform:translateY(105%);
  transition:transform .44s cubic-bezier(.22,.9,.25,1); transition-delay:var(--d,0ms);
}
.is-in .word > i{transform:none}
.is-out-up .word > i,.is-out-down .word > i{transform:translateY(105%)}

/* ---------- contadores ---------- */
.counter{font-variant-numeric:tabular-nums}

/* ---------- moldura de demonstração ---------- */
.demo{background:var(--paper-2); border-radius:var(--r-lg); overflow:hidden}
.section--paper2 .demo{background:var(--white)}
.section--ink .demo{background:var(--black-2)}
.demo__bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 16px; background:var(--ink); color:#fff;
}
.demo__title{font-size:.75rem; font-weight:600; letter-spacing:.02em; margin-right:auto}
.demo__dots{display:flex; gap:6px}
.demo__dots i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35)}
.demo__body{padding:18px}
.demo__hint{
  padding:0 18px 16px; font-size:.78rem; color:var(--ink-3);
  display:flex; align-items:center; gap:8px;
}
.section--ink .demo__hint{color:var(--on-black-2)}
.kbd{
  display:inline-block; padding:1px 6px; border-radius:5px; background:var(--paper-3);
  font-size:.72rem; font-weight:600; font-family:var(--sans);
}
.section--ink .kbd{background:var(--black-3); color:#fff}

/* separadores (tabs) */
.tabs{display:flex; gap:4px; flex-wrap:wrap}
.tabs button{
  font:inherit; font-size:.78rem; font-weight:600; letter-spacing:.01em;
  padding:7px 14px; border-radius:99px; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; transition:.18s;
}
.tabs button:hover{background:rgba(255,255,255,.26)}
.tabs button[aria-selected="true"]{background:#fff; color:var(--ink)}
.tabpanel{animation:panelIn .28s cubic-bezier(.22,.8,.25,1) both}
@keyframes panelIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ---------- KANBAN ---------- */
.kb{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
@media (max-width:900px){.kb{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kb{grid-template-columns:1fr}}
.kb__col{
  background:var(--white); border-radius:14px; padding:12px; min-height:180px;
  transition:background .15s ease;
}
.section--paper2 .kb__col,.demo .kb__col{background:var(--paper-2)}
.section--paper2 .demo .kb__col{background:var(--paper-3)}
.section--ink .kb__col{background:var(--black-3)}
.kb__col.is-over{background:var(--azul-tinta)}
.section--ink .kb__col.is-over{background:#2a2a2a}
.kb__head{display:flex; align-items:center; gap:8px; margin-bottom:12px; padding:0 4px}
.kb__name{font-size:.68rem; font-weight:650; letter-spacing:.14em; text-transform:uppercase}
.kb__count{
  margin-left:auto; font-size:.7rem; font-weight:650; min-width:22px; text-align:center;
  background:var(--ink); color:#fff; border-radius:99px; padding:1px 7px;
}
.section--ink .kb__count{background:#fff; color:var(--ink)}
.kb__card{
  background:var(--paper-2); border-radius:10px; padding:11px 12px; margin-bottom:8px;
  cursor:grab; transition:transform .18s ease, background .18s ease, opacity .18s ease;
}
.demo .kb__card,.section--paper2 .kb__card{background:var(--white)}
.section--ink .kb__card{background:var(--black-2)}
.kb__card:hover{transform:translateY(-2px); background:var(--paper-3)}
.section--ink .kb__card:hover{background:#242424}
.kb__card:active{cursor:grabbing}
.kb__card.is-dragging{opacity:.35; transform:scale(.97)}
.kb__card.is-landed{animation:landed .35s ease}
@keyframes landed{0%{transform:scale(1.05); background:var(--azul-tinta)}60%{transform:scale(.99)}100%{transform:none}}
.kb__card h5{margin:0 0 5px; font-size:.86rem; font-weight:620; letter-spacing:-0.012em; line-height:1.3}
.kb__meta{margin:0; font-size:.72rem; color:var(--ink-3); display:flex; align-items:center; gap:7px}
.section--ink .kb__meta{color:var(--on-black-2)}
.kb__prio{width:7px; height:7px; border-radius:2px; flex:none; background:var(--line-strong)}
.kb__prio--alta{background:var(--azul)}
.kb__prio--media{background:var(--ink-3)}
.section--ink .kb__prio--alta{background:#fff}
.kb__who{
  margin-left:auto; font-size:.64rem; font-weight:650; letter-spacing:.04em;
  background:var(--ink); color:#fff; border-radius:99px; padding:2px 7px;
}
.section--ink .kb__who{background:#fff; color:var(--ink)}

/* ---------- GANTT ---------- */
.gantt{--weeks:12; font-size:.84rem}
.gantt__head,.gantt__row{display:grid; grid-template-columns:minmax(120px,190px) minmax(0,1fr); gap:14px; align-items:center}
.gantt__head{padding-bottom:8px}
.gantt__scale{display:grid; grid-template-columns:repeat(var(--weeks),1fr); margin-right:14px; font-size:.6rem; color:var(--ink-3); letter-spacing:.02em}
.section--ink .gantt__scale{color:var(--on-black-2)}
.gantt__scale span{text-align:left}
.gantt__body{position:relative; margin-top:22px}
.gantt__row{padding:7px 0}
.gantt__label{font-size:.8rem; font-weight:580; letter-spacing:-0.012em; line-height:1.25}
.gantt__label small{display:block; font-weight:400; font-size:.7rem; color:var(--ink-3); margin-top:2px}
.section--ink .gantt__label small{color:var(--on-black-2)}
.gantt__track{
  position:relative; height:30px; margin-right:14px;
  background-image:repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100%/var(--weeks)));
  background-size:calc(100%/var(--weeks)) 100%;
}
.section--ink .gantt__track{background-image:repeating-linear-gradient(to right, rgba(255,255,255,.14) 0 1px, transparent 1px calc(100%/var(--weeks)))}
.gantt__bar{
  position:absolute; height:11px; border-radius:99px; background:var(--ink);
  transform:scaleX(1); transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,.85,.25,1), background .15s ease;
  transition-delay:var(--d,0ms); cursor:pointer;
}
.section--ink .gantt__bar{background:#fff}
.gantt.is-fresh .gantt__bar{transform:scaleX(.02)}
.gantt__bar--real{top:4px}
.gantt__bar--plan{top:19px; height:5px; background:var(--line-strong); opacity:.9}
.section--ink .gantt__bar--plan{background:rgba(255,255,255,.35)}
.gantt__bar--over{background:repeating-linear-gradient(-45deg, var(--azul) 0 4px, transparent 4px 8px), var(--azul-tinta)}
.gantt__bar:hover{filter:brightness(1.15)}
.gantt__bar:focus-visible{outline:3px solid var(--azul); outline-offset:2px}
.gantt.is-plan-only .gantt__bar--real{opacity:.18}
.gantt__ms{
  position:absolute; top:8px; width:11px; height:11px; background:var(--ink);
  transform:translateX(-50%) rotate(45deg) scale(1); transition:transform .34s cubic-bezier(.3,1.4,.5,1);
  transition-delay:var(--d,0ms);
  box-shadow:0 0 0 3px var(--paper); border-radius:1px; z-index:3;
}
.section--ink .gantt__ms{background:#fff; box-shadow:0 0 0 3px var(--black-2)}
.gantt.is-fresh .gantt__ms{transform:translateX(-50%) rotate(45deg) scale(0)}
.gantt__today{position:absolute; top:0; bottom:0; width:1px; background:var(--azul); z-index:2}
.section--ink .gantt__today{background:#fff}
.gantt__today::after{
  content:"hoje"; position:absolute; top:-16px; left:0; transform:translateX(-50%);
  font-size:.6rem; font-weight:650; letter-spacing:.12em; text-transform:uppercase;
  background:var(--azul); color:#fff; padding:2px 6px; border-radius:99px; white-space:nowrap;
}
.section--ink .gantt__today::after{background:#fff; color:var(--ink)}
.gantt__legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; font-size:.72rem; color:var(--ink-3)}
.section--ink .gantt__legend{color:var(--on-black-2)}
.gantt__legend span{display:flex; align-items:center; gap:7px}
.gantt__key{width:18px; height:5px; border-radius:99px; background:var(--line-strong); flex:none}
.gantt__key--real{height:9px; background:var(--ink)}
.section--ink .gantt__key--real{background:#fff}
.gantt__key--over{background:repeating-linear-gradient(-45deg, var(--azul) 0 4px, transparent 4px 8px), var(--azul-tinta); height:9px}

/* botão de alternância monocromático */
.switch{
  display:inline-flex; align-items:center; gap:9px; font:inherit; font-size:.78rem; font-weight:600;
  background:none; border:0; cursor:pointer; color:inherit; padding:6px 0;
}
.switch__track{
  width:38px; height:21px; border-radius:99px; background:var(--line-strong); position:relative; transition:.2s;
}
.switch__track::after{
  content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%;
  background:#fff; transition:transform .22s cubic-bezier(.3,1.3,.5,1);
}
.switch[aria-pressed="true"] .switch__track{background:var(--azul)}
.switch[aria-pressed="true"] .switch__track::after{transform:translateX(17px)}
.section--ink .switch__track{background:rgba(255,255,255,.3)}
.section--ink .switch[aria-pressed="true"] .switch__track{background:#fff}
.section--ink .switch[aria-pressed="true"] .switch__track::after{background:var(--ink)}

/* ---------- tooltip partilhado ---------- */
.tip{
  position:fixed; z-index:130; pointer-events:none; opacity:0; transform:translate(-50%,-140%) scale(.96);
  background:var(--ink); color:#fff; padding:9px 12px; border-radius:9px;
  font-size:.75rem; line-height:1.45; max-width:260px; transition:opacity .16s ease, transform .16s ease;
}
.tip.is-on{opacity:1; transform:translate(-50%,-125%) scale(1)}
.tip strong{color:#fff; display:block; margin-bottom:2px; font-size:.78rem}

/* ---------- PIPELINE (CLM) ---------- */
.pipe{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px}
@media (max-width:900px){.pipe{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.pipe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pipe__step{
  font:inherit; text-align:left; cursor:pointer; border:0; border-radius:12px;
  background:var(--paper-2); padding:12px 12px 14px; transition:.2s ease; position:relative; overflow:hidden;
}
.section--paper2 .pipe__step{background:var(--white)}
.pipe__step:hover{transform:translateY(-2px); background:var(--paper-3)}
.pipe__step[aria-selected="true"]{background:var(--ink); color:#fff}
.pipe__n{font-size:.63rem; font-weight:650; letter-spacing:.14em; opacity:.6; display:block; margin-bottom:6px}
.pipe__t{font-size:.82rem; font-weight:620; letter-spacing:-0.015em; line-height:1.2}
.pipe__step::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:var(--azul); transform:scaleX(0); transform-origin:left; transition:transform .5s ease;
}
.pipe__step.is-done::after{transform:scaleX(1)}
.pipe__step[aria-selected="true"]::after{background:#fff; transform:scaleX(1)}
.pipe__detail{margin-top:16px; background:var(--paper-2); border-radius:14px; padding:24px}
.section--paper2 .pipe__detail{background:var(--white)}
.pipe__detail h4{margin-bottom:8px; font-size:1.06rem}
.pipe__detail p{color:var(--ink-2); font-size:.95rem; margin:0}
.pipe__stats{display:flex; flex-wrap:wrap; gap:26px; margin-top:18px}
.pipe__stat{font-size:.75rem; color:var(--ink-3)}
.pipe__stat b{display:block; font-size:1.35rem; font-weight:650; letter-spacing:-0.03em; color:var(--ink); font-variant-numeric:tabular-nums}

/* ---------- GRÁFICO (orçamento acumulado) ---------- */
.chart{position:relative}
.chart svg{width:100%; height:auto; display:block; overflow:visible}
.chart .grid line{stroke:var(--line); stroke-width:1}
.section--ink .chart .grid line{stroke:rgba(255,255,255,.16)}
.chart .axis text{font-size:9px; fill:var(--ink-3); font-family:var(--sans)}
.section--ink .chart .axis text{fill:var(--on-black-2)}
.chart .area{fill:var(--azul-tinta); opacity:1; transition:opacity .5s ease .3s}
.section--ink .chart .area{fill:rgba(255,255,255,.12)}
.chart.is-fresh .area{opacity:0}
.chart .line{fill:none; stroke:var(--ink); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.section--ink .chart .line{stroke:#fff}
.chart .line--plan{stroke:var(--line-strong); stroke-width:2; stroke-dasharray:5 5}
.section--ink .chart .line--plan{stroke:rgba(255,255,255,.45)}
.chart .draw{stroke-dasharray:var(--len); stroke-dashoffset:0; transition:stroke-dashoffset .9s cubic-bezier(.3,.8,.3,1) .1s}
.chart.is-fresh .draw{stroke-dashoffset:var(--len)}
.chart .dot{fill:var(--azul); opacity:0; transition:opacity .2s}
.section--ink .chart .dot{fill:#fff}
.chart.is-hover .dot{opacity:1}
.chart .guide{stroke:var(--azul); stroke-width:1; stroke-dasharray:3 3; opacity:0; transition:opacity .2s}
.section--ink .chart .guide{stroke:#fff}
.chart.is-hover .guide{opacity:.5}
.chart__read{
  position:absolute; top:0; left:0; background:var(--ink); color:#fff; border-radius:9px;
  padding:8px 11px; font-size:.73rem; line-height:1.4; pointer-events:none; opacity:0; transition:opacity .18s ease;
  white-space:nowrap; transform:translate(-50%,-118%);
}
.section--ink .chart__read{background:#fff; color:var(--ink)}
.chart.is-hover .chart__read{opacity:1}

/* ---------- CICLO (diagrama circular) ---------- */
.cycle{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,48px); align-items:center}
@media (max-width:820px){.cycle{grid-template-columns:1fr}}
.cycle svg{width:100%; height:auto; max-width:420px; margin-inline:auto; display:block; overflow:visible}
.cycle .ring{fill:none; stroke:var(--line-strong); stroke-width:1.5; stroke-dasharray:4 6}
.section--ink .cycle .ring{stroke:rgba(255,255,255,.3)}
.cycle .node{cursor:pointer}
.cycle .node circle{fill:var(--paper-2); transition:fill .22s ease, r .22s ease}
.section--ink .cycle .node circle{fill:var(--black-3)}
.cycle .node text{font-family:var(--sans); font-size:9px; font-weight:650; fill:var(--ink); text-anchor:middle; dominant-baseline:middle; pointer-events:none; letter-spacing:.02em}
.section--ink .cycle .node text{fill:#fff}
.cycle .node:hover circle{fill:var(--ink)}
.cycle .node.is-on circle{fill:var(--azul)}
.cycle .node:hover text,.cycle .node.is-on text{fill:#fff}
.section--ink .cycle .node:hover circle,.section--ink .cycle .node.is-on circle{fill:#fff}
.section--ink .cycle .node:hover text,.section--ink .cycle .node.is-on text{fill:var(--ink)}
.cycle__panel{min-height:150px}
.cycle__panel h3{margin-bottom:.4em}
.cycle__panel p{color:var(--ink-2); margin:0}
.section--ink .cycle__panel p{color:var(--on-black)}
.cycle__panel.is-swap{animation:panelIn .4s cubic-bezier(.22,.8,.25,1) both}

/* ---------- PERCURSO (formação) ---------- */
.road{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
@media (max-width:820px){.road{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.road{grid-template-columns:1fr}}
.road__line{position:absolute; top:13px; left:6%; right:6%; height:2px; background:var(--line-strong)}
.road__line > i{display:block; height:100%; width:100%; background:var(--ink); transition:width .75s cubic-bezier(.3,.8,.3,1) .12s}
.road.is-fresh .road__line > i{width:0}
@media (max-width:820px){.road__line{display:none}}
.road__stop{position:relative}
.road__head{
  display:block; width:100%; text-align:left; background:none; border:0; padding:0;
  font:inherit; color:inherit; cursor:pointer;
}
.road__dot{
  width:28px; height:28px; border-radius:50%; background:var(--paper-3); color:var(--ink);
  display:grid; place-items:center; font-size:.72rem; font-weight:700; position:relative; z-index:1;
  transition:background .22s ease, color .22s ease, transform .22s ease;
}
.road__head:hover .road__dot{background:var(--ink); color:#fff; transform:scale(1.08)}
.road__head[aria-expanded="true"] .road__dot{background:var(--azul); color:#fff; transform:scale(1.08)}
.road__t{display:block; font-family:var(--display); font-weight:650; font-size:.98rem; letter-spacing:-0.02em; margin:16px 0 6px}
.road__s{display:block; font-size:.86rem; color:var(--ink-3)}
.road__more{
  overflow:hidden; max-height:0; opacity:0;
  transition:max-height .3s cubic-bezier(.22,.8,.25,1), opacity .2s ease, margin .24s ease;
}
.road__stop.is-open .road__more{max-height:320px; opacity:1; margin-top:12px}
.road__more ul{margin:0; padding-left:18px; font-size:.85rem; color:var(--ink-2); display:grid; gap:6px}

/* ---------- CALENDÁRIO DE RENOVAÇÕES ---------- */
.renew__filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.chip{
  font:inherit; font-size:.76rem; font-weight:600; padding:7px 14px; border-radius:99px;
  border:0; cursor:pointer; background:var(--paper-3); color:var(--ink-2); transition:.18s;
}
.chip:hover{background:var(--line-strong); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--azul); color:#fff}
.renew__scale{display:grid; grid-template-columns:repeat(6,1fr); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.renew__track{
  position:relative; min-height:270px; padding:10px 0;
  background-image:repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100%/6));
  background-size:calc(100%/6) 100%;
}
.renew__item{
  position:absolute; transform:translateX(-2px); background:var(--white); border-radius:9px;
  padding:8px 11px; font-size:.76rem; width:min(200px, 30%); cursor:default;
  transition:transform .3s cubic-bezier(.22,.8,.25,1), opacity .3s ease;
  animation:renewIn .34s cubic-bezier(.22,.8,.25,1) both; animation-delay:var(--d,0ms);
}
.section--paper2 .renew__item{background:var(--paper-2)}
@keyframes renewIn{from{opacity:0; transform:translateX(-2px) translateY(12px)} to{opacity:1; transform:translateX(-2px)}}
.renew__item:hover{transform:translateX(-2px) translateY(-3px)}
.renew__item.is-hidden{opacity:.18}
.renew__item b{display:block; font-weight:620; letter-spacing:-0.012em; line-height:1.25}
.renew__item span{color:var(--ink-3); font-size:.71rem}
.renew__flag{
  display:inline-block; margin-top:6px; white-space:nowrap; font-size:.62rem; font-weight:650; letter-spacing:.1em;
  text-transform:uppercase; padding:2px 7px; border-radius:99px; background:var(--paper-3); color:var(--ink);
}
.renew__flag--auto{background:var(--azul); color:#fff}

/* ---------- números animados em destaque ---------- */
.bignum{display:flex; align-items:baseline; gap:10px}
.bignum b{font-size:clamp(2rem,4vw,3rem); font-weight:650; letter-spacing:-0.04em; font-variant-numeric:tabular-nums}

/* ---------- respeito por movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  .js [data-reveal],.js [data-reveal].is-in,.js [data-reveal].is-out-up,.js [data-reveal].is-out-down{
    opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;
  }
  .word > i{transform:none !important; transition:none !important}
  .js .page-shell,.js body.is-leaving .page-shell{animation:none !important}
  .gantt.is-fresh .gantt__bar,.gantt.is-fresh .gantt__ms,.chart.is-fresh .draw,.chart.is-fresh .area,.road.is-fresh .road__line > i{transition:none !important}
  .renew__item,.tabpanel,.cycle__panel.is-swap{animation:none !important}
}

/* folga para descendentes nas palavras animadas */
.word{padding-bottom:.09em; margin-bottom:-.09em}

/* ---------- diagramas largos em ecrãs estreitos ---------- */
.renew__scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.renew__scroll .renew__scale,.renew__scroll .renew__track{min-width:680px}
@media (max-width:760px){
  .demo__body{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .gantt{min-width:600px}
  .renew__item{width:min(190px,34%)}
}

/* =========================================================
   MOVIMENTO AUTÓNOMO — elementos que se mexem sozinhos
   ========================================================= */

/* sinal "ao vivo" nas barras de demonstração */
.demo__dots i:first-child{background:var(--azul-claro); position:relative}
.demo__dots i:first-child::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--azul-claro); animation:pulso 2.4s ease-out infinite;
}
@keyframes pulso{
  0%{transform:scale(.6); opacity:.9}
  70%{transform:scale(1.9); opacity:0}
  100%{opacity:0}
}

/* Gantt: cabeça de leitura que percorre as fases sozinha */
.gantt__bar--real.is-pulse{background:var(--azul)}
.gantt__bar--real.is-pulse::after{
  content:""; position:absolute; inset:-5px -7px; border-radius:99px;
  background:var(--azul); opacity:.16; animation:pulsoBarra .8s ease-out both;
}
@keyframes pulsoBarra{from{transform:scale(.9); opacity:.3} to{transform:scale(1.06); opacity:0}}
.section--ink .gantt__bar--real.is-pulse{background:var(--azul-claro)}

/* marcador que viaja ao longo da linha do gráfico */
.chart .roam{fill:var(--azul); opacity:0; transition:opacity .3s ease}
.chart.is-roaming .roam{opacity:1}
.chart .roam-halo{fill:var(--azul); opacity:.18}
.chart.is-hover .roam,.chart.is-hover .roam-halo{opacity:0}

/* calendário: os cartões respiram */
.renew__item{animation:renewIn .5s cubic-bezier(.22,.8,.25,1) both, bobbing 7s ease-in-out infinite; animation-delay:var(--d,0ms), calc(var(--d,0ms) + 500ms)}
@keyframes bobbing{
  0%,100%{transform:translateX(-2px) translateY(0)}
  50%{transform:translateX(-2px) translateY(-5px)}
}

/* percurso: os pontos acendem em sequência */
.road.is-viva .road__dot::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid var(--azul); opacity:0;
  animation:anelPercurso 6s ease-out infinite; animation-delay:var(--p,0ms);
}
@keyframes anelPercurso{
  0%{transform:scale(.7); opacity:.8}
  12%{transform:scale(1.5); opacity:0}
  100%{opacity:0}
}

/* ticker — banda de conceitos em movimento contínuo */
.ticker{
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:16px 0; -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track{display:flex; width:max-content; animation:deslizar 42s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{
  display:inline-flex; align-items:center; gap:22px; padding-right:22px; white-space:nowrap;
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.ticker span::after{content:""; width:5px; height:5px; border-radius:50%; background:var(--azul); flex:none}
@keyframes deslizar{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* nó do ciclo em rotação automática */
.cycle .node circle{transition:fill .35s ease}

@media (prefers-reduced-motion: reduce){
  .demo__dots i:first-child::after,.gantt__bar--real.is-pulse::after,
  .road.is-viva .road__dot::after{animation:none !important; display:none}
  .renew__item{animation:none !important}
  .ticker__track{animation:none !important}
  .chart .roam,.chart .roam-halo{display:none}
}

/* Em ecrãs estreitos a entrada lateral passa a vertical: o deslocamento
   horizontal de 28px chegava a criar rolagem enquanto o elemento espera
   para ser revelado. */
@media (max-width:760px){
  .js [data-reveal="left"],
  .js [data-reveal="right"]{transform:translateY(22px)}
}

/* ---------- Kanban compacto (painel do herói) ---------- */
.kb--compacto{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.kb--compacto .kb__col{padding:10px; min-height:150px; border-radius:12px}
.kb--compacto .kb__head{margin-bottom:9px; padding:0 2px}
.kb--compacto .kb__name{font-size:.6rem; letter-spacing:.12em}
.kb--compacto .kb__count{font-size:.62rem; padding:0 6px}
.kb--compacto .kb__card{padding:9px 10px; margin-bottom:6px; border-radius:9px}
.kb--compacto .kb__card h5{font-size:.76rem; margin-bottom:4px}
.kb--compacto .kb__meta{font-size:.65rem; gap:6px}
.kb--compacto .kb__who{font-size:.58rem; padding:1px 6px}
@media (max-width:520px){
  .kb--compacto{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kb--compacto .kb__card h5{font-size:.72rem}
}

/* ---------- Gantt sem descrições: coluna de rótulos mais estreita ---------- */
/* sem rótulos: o gráfico ocupa a largura toda */
.gantt__head,.gantt__row{grid-template-columns:minmax(0,1fr)}

/* Em ecrãs estreitos o SVG encolhe e os rótulos ficariam com 7px.
   Escondem-se: os números e a legenda (que nomeia a fase activa)
   contam a mesma história de forma legível. */
@media (max-width:640px){
  .agil__rotulo{display:none}
  .agil__num{font-size:14px}
  .agil__no circle{r:19}
  .agil__no:hover circle,.agil__no.is-on circle{r:21}
  .agil__legenda{font-size:.86rem; min-height:72px}
}

/* ---------- cartões do Kanban em vidro ---------- */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  /* vidro nos dois níveis: a coluna com desfoque curto, o cartão com
     desfoque maior. Os raios são pequenos de propósito — desfoque dentro
     de desfoque custa a compor em cada scroll. */
  /* Tinta neutra em vez de branco translúcido: branco sobre branco
     desaparece. Assim a coluna lê-se sobre a zona clara e sobre a azul. */
  .kb__col,
  .demo .kb__col,
  .section--paper2 .kb__col,
  .section--paper2 .demo .kb__col{
    background:rgba(13,26,60,.05);
    backdrop-filter:blur(9px) saturate(150%);
    -webkit-backdrop-filter:blur(9px) saturate(150%);
  }
  .kb__card{
    backdrop-filter:blur(12px) saturate(180%);
    -webkit-backdrop-filter:blur(12px) saturate(180%);
    box-shadow:0 6px 18px rgba(13,26,60,.07);
  }
  .section--ink .kb__col{background:rgba(255,255,255,.06)}
}
.kb__card{position:relative}
.kb__card.is-a-viajar{z-index:5; box-shadow:0 18px 40px rgba(13,26,60,.16)}

/* ---------- diagrama do Scrum ---------- */
.scrum__svg{width:100%; height:auto; display:block; overflow:visible}
.scrum__trilho{fill:none; stroke:var(--azul); opacity:.42; stroke-width:7; stroke-linecap:round}
.scrum__ponta{fill:var(--azul); opacity:.42}
.scrum__ciclo{fill:none; stroke:var(--azul); stroke-width:9; stroke-linecap:round; opacity:.9}
.scrum__diaria{fill:none; stroke:var(--azul); stroke-width:5; stroke-linecap:round; opacity:.65}
.scrum__no{cursor:pointer}
.scrum__no circle{fill:var(--paper-2); stroke:var(--line-strong); stroke-width:1.5; transition:fill .25s ease, stroke .25s ease}
.scrum__num{font-family:var(--sans); font-size:13px; font-weight:650; fill:var(--ink-3); text-anchor:middle; dominant-baseline:central; pointer-events:none; transition:fill .25s ease}
.scrum__rotulo{font-family:var(--sans); font-size:11px; font-weight:600; fill:var(--ink-2); text-anchor:middle; pointer-events:none}
.scrum__rotulo--diaria{font-size:10px; fill:var(--ink-3)}
.scrum__nota{font-family:var(--sans); font-size:11px; font-weight:650; fill:var(--azul); text-anchor:middle}
.scrum__miolo{font-family:var(--display); font-size:19px; font-weight:600; fill:var(--ink); text-anchor:middle; letter-spacing:-.02em; pointer-events:none}
.scrum__miolo--peq{font-family:var(--sans); font-size:11px; font-weight:500; fill:var(--ink-3); letter-spacing:0}
.scrum__no:hover circle,.scrum__no.is-on circle{fill:var(--azul); stroke:var(--azul)}
.scrum__no:hover .scrum__num,.scrum__no.is-on .scrum__num{fill:#fff}
.scrum__no.is-on .scrum__rotulo{fill:var(--ink); font-weight:650}
.scrum__zona{fill:transparent; cursor:pointer}
.scrum__svg.ciclo-on .scrum__ciclo{opacity:1; stroke-width:11}
.scrum__svg.ciclo-on .scrum__miolo{fill:var(--azul)}
.scrum__svg.diaria-on .scrum__diaria{opacity:1; stroke-width:7}
.scrum__svg.diaria-on .scrum__nota{font-size:13px}
.scrum__legenda{
  margin:6px 0 0; padding:12px 14px; border-radius:10px;
  background:rgba(29,78,216,.07); font-size:.82rem; line-height:1.5; color:var(--ink-2); min-height:62px;
}
.scrum__legenda b{color:var(--ink)}
.section--ink .scrum__legenda{background:rgba(255,255,255,.07); color:var(--on-black)}
.section--ink .scrum__trilho{stroke:var(--azul-claro); opacity:.5}
.section--ink .scrum__ponta{fill:var(--azul-claro); opacity:.5}
.section--ink .scrum__no circle{fill:var(--black-3); stroke:rgba(255,255,255,.25)}
.section--ink .scrum__miolo{fill:#fff}

@media (max-width:640px){
  /* o SVG encolhe para menos de metade: rótulos legíveis passariam a
     sobrepor-se entre nós. Ficam os números e a legenda, que nomeia a
     fase activa em texto de tamanho normal. */
  .scrum__rotulo{display:none}
  .scrum__num{font-size:19px}
  .scrum__miolo{font-size:30px}
  .scrum__miolo--peq{font-size:17px}
  .scrum__nota{font-size:19px}
  .scrum__legenda{font-size:.86rem; min-height:76px}
}
.scrum__trilho--fino{stroke-width:4}
.scrum__rotulo--solto{fill:var(--ink-3); font-size:10px}
.scrum__ponta--ciclo{fill:var(--azul); opacity:.9}
.scrum__ponta--diaria{fill:var(--azul); opacity:.65}
.scrum__svg.ciclo-on .scrum__ponta--ciclo{opacity:1}
.scrum__svg.diaria-on .scrum__ponta--diaria{opacity:1}


/* ---------- cartões do Kanban só com o título ---------- */
.kb__card h5{margin:0; font-size:.88rem; font-weight:600; letter-spacing:-0.012em; line-height:1.35}
.kb--compacto .kb__card h5{margin:0; font-size:.78rem}
.kb__card{padding:13px 14px}
.kb--compacto .kb__card{padding:11px 12px}

/* ---------- altura constante da consola ----------
   As três vistas tinham alturas diferentes (204, 334 e 330 px), o que
   fazia o painel saltar a cada rotação e empurrava a página. Fixa-se a
   altura pela vista mais alta e o conteúdo centra-se nela. É min-height,
   não height: se uma vista crescer, cresce em vez de ser cortada. */
.hero .demo__body{
  --altura-consola:340px;
  min-height:var(--altura-consola);
  display:flex; flex-direction:column; justify-content:center;
}
.hero .demo__body > .tabpanel{width:100%}
@media (max-width:520px){
  .hero .demo__body{--altura-consola:352px}
}

/* =========================================================
   Kanban: legibilidade em telemóvel, tons e contagens
   ========================================================= */

/* Em ecrãs estreitos as três colunas ficavam com 97px e o título partia-se
   em três linhas a 12px. Em vez de encolher a letra, alarga-se a faixa e
   deixa-se deslizar na horizontal dentro do painel. */
@media (max-width:640px){
  .kb--compacto{min-width:474px}
  .kb--compacto .kb__card h5{font-size:.85rem; line-height:1.3}
  .kb--compacto .kb__name{font-size:.63rem; white-space:nowrap}
  .kb--compacto .kb__col{padding:12px}
  .kb--compacto .kb__card{padding:12px 13px}
}

/* Cada cartão tem o seu tom, dentro da família do azul. O tom viaja com
   o cartão de coluna em coluna, o que ajuda a segui-lo durante a
   animação. Todos os tons são claros o suficiente para o título preto
   ficar acima de 12:1. */
.kb__card[data-tom="0"]{background:rgba(29,78,216,.10)}
.kb__card[data-tom="1"]{background:rgba(59,130,246,.20)}
.kb__card[data-tom="2"]{background:rgba(30,64,175,.14)}
.kb__card[data-tom="3"]{background:rgba(96,165,250,.26)}
.kb__card[data-tom="4"]{background:rgba(2,132,199,.16)}
.kb__card[data-tom="5"]{background:rgba(29,78,216,.22)}
.kb__card[data-tom="6"]{background:rgba(125,180,255,.30)}
.kb__card[data-tom="7"]{background:rgba(37,99,235,.13)}
.kb__card:hover{filter:saturate(1.25) brightness(.985)}
.kb__card{transition:transform .18s ease, background .25s ease, filter .18s ease, opacity .18s ease}
.section--ink .kb__card[data-tom]{background:rgba(138,176,255,.14)}
.section--ink .kb__card[data-tom="1"],.section--ink .kb__card[data-tom="3"]{background:rgba(138,176,255,.22)}
.section--ink .kb__card[data-tom="5"],.section--ink .kb__card[data-tom="6"]{background:rgba(138,176,255,.28)}

/* A contagem passa a círculo, num azul suave em vez de preto cheio. */
.kb__count{
  margin-left:auto; display:grid; place-items:center; flex:none;
  width:22px; height:22px; min-width:0; padding:0; border-radius:50%;
  font-size:.7rem; font-weight:650; line-height:1;
  background:rgba(29,78,216,.14); color:var(--azul-forte);
}
.kb--compacto .kb__count{width:20px; height:20px; font-size:.66rem}
.section--ink .kb__count{background:rgba(138,176,255,.2); color:#fff}

/* o rótulo do "hoje" vive no CSS, por isso acompanha a língua da página */
html[lang="en"] .gantt__today::after{content:"today"}