/* ==========================================================
   NIS2 · BUT Informática
   Montserrat. Azuis. Cantos redondos, sombras, sem traços cinzentos.
   ========================================================== */

:root{
  /* Tinta */
  --ink:#0C1A2B;
  --ink-2:#26374A;
  --muted:#5A6B7E;
  --faint:#8A99A9;

  /* Azuis da marca */
  --blue:#0170B9;
  --blue-dark:#01528A;
  --blue-deep:#082A46;
  --blue-400:#2E9BD8;
  --blue-300:#63BBE8;
  --blue-100:#D5EAF8;
  --blue-50:#EDF6FC;
  --cyan:#12A5C4;
  --indigo:#4A6FD4;

  /* Superfícies */
  --white:#FFFFFF;
  --paper:#FBFDFE;
  --surface:#F2F7FB;
  --hair:rgba(12,26,43,.07);

  --font:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* Medidas */
  --shell:960px;
  --pad:40px;
  --band:96px;

  /* Escala de espaçamento, base 4 */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;
  --s5:24px; --s6:32px;  --s7:40px;  --s8:48px;
  --s9:64px; --s10:80px; --s11:96px;

  /* Cantos */
  --r-xs:10px;
  --r-sm:14px;
  --r:18px;
  --r-lg:24px;
  --r-xl:32px;

  /* Sombras */
  --sh-1:0 1px 2px rgba(12,26,43,.04), 0 3px 8px rgba(12,26,43,.045);
  --sh-2:0 2px 4px rgba(12,26,43,.04), 0 10px 24px rgba(12,26,43,.065);
  --sh-3:0 4px 10px rgba(12,26,43,.05), 0 20px 48px rgba(12,26,43,.09);
  --sh-blue:0 4px 12px rgba(1,112,185,.24), 0 12px 30px -8px rgba(1,112,185,.34);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  position:relative;
  font-family:var(--font);
  font-size:15px;line-height:1.62;font-weight:400;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* ---------- Fundo: nuvens de gradiente ---------- */
.aura{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aura i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(80px);will-change:transform;
}
.aura i:nth-child(1){
  width:52vw;height:52vw;max-width:780px;max-height:780px;top:-16vw;right:-12vw;
  background:radial-gradient(circle,rgba(1,112,185,.34),rgba(1,112,185,0) 68%);
  animation:drift-a 30s var(--ease-soft) infinite alternate;
}
.aura i:nth-child(2){
  width:44vw;height:44vw;max-width:640px;max-height:640px;top:38vh;left:-16vw;
  background:radial-gradient(circle,rgba(18,165,196,.26),rgba(18,165,196,0) 68%);
  animation:drift-b 38s var(--ease-soft) infinite alternate;
}
.aura i:nth-child(3){
  width:40vw;height:40vw;max-width:580px;max-height:580px;bottom:-14vw;right:-8vw;
  background:radial-gradient(circle,rgba(74,111,212,.22),rgba(74,111,212,0) 68%);
  animation:drift-c 34s var(--ease-soft) infinite alternate;
}
.aura i:nth-child(4){
  width:34vw;height:34vw;max-width:480px;max-height:480px;top:120vh;left:34vw;
  background:radial-gradient(circle,rgba(99,187,232,.24),rgba(99,187,232,0) 68%);
  animation:drift-b 42s var(--ease-soft) infinite alternate-reverse;
}
@keyframes drift-a{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-7%,9%,0) scale(1.16)}}
@keyframes drift-b{0%{transform:translate3d(0,0,0) scale(1.08)}100%{transform:translate3d(9%,-7%,0) scale(.92)}}
@keyframes drift-c{0%{transform:translate3d(0,0,0) scale(.94)}100%{transform:translate3d(-6%,-8%,0) scale(1.14)}}

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{font-weight:700;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(28px,3.1vw,38px);line-height:1.16;letter-spacing:-.026em}
h2{font-size:clamp(21px,2.1vw,27px);line-height:1.22;letter-spacing:-.022em}
h3{font-size:16px;line-height:1.35;letter-spacing:-.012em;font-weight:600}
h4{font-size:15px;line-height:1.4;font-weight:600}
p{text-wrap:pretty}
strong{font-weight:600;color:var(--ink)}

.lead{font-size:16px;line-height:1.66;color:var(--muted)}
.sm{font-size:13px;line-height:1.58;color:var(--muted)}
.xs{font-size:12px;line-height:1.5;color:var(--faint)}
.measure{max-width:58ch}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);margin-bottom:var(--s3);
}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--cyan))}

/* ---------- Estrutura ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.band{padding-block:var(--band);position:relative}
.band--sm{padding-block:var(--s9)}
.head{margin-bottom:var(--s8);max-width:60ch}
.head p{margin-top:var(--s3)}

.grid{display:grid;gap:var(--s5)}
.grid > *{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.g2,.g3{grid-template-columns:1fr}}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 24px;border-radius:999px;
  background:linear-gradient(135deg,var(--blue-400),var(--blue) 55%,var(--blue-dark));
  color:#fff;font-size:14px;font-weight:600;letter-spacing:-.005em;
  box-shadow:var(--sh-blue);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),filter .22s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(1,112,185,.3),0 18px 40px -10px rgba(1,112,185,.42);filter:saturate(1.08)}
.btn:active{transform:translateY(0)}
.btn--ghost{
  background:rgba(255,255,255,.72);color:var(--ink);
  box-shadow:var(--sh-1), inset 0 0 0 1px rgba(12,26,43,.07);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{box-shadow:var(--sh-2), inset 0 0 0 1px rgba(1,112,185,.28);color:var(--blue);filter:none}
.btn--block{width:100%}
.btn--sm{height:36px;padding:0 var(--s4);font-size:13px}

/* ---------- Cabeçalho ---------- */
.nav{
  position:fixed;inset:12px 0 auto 0;z-index:100;
  transition:transform .3s var(--ease);
}
.nav__in{
  display:flex;align-items:center;height:64px;gap:var(--s5);
  max-width:calc(var(--shell) - 16px);margin-inline:auto;
  padding:0 var(--s3) 0 var(--s5);border-radius:999px;
  background:rgba(255,255,255,.7);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 2px rgba(12,26,43,.04), inset 0 0 0 1px rgba(255,255,255,.6);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.nav.stuck .nav__in{background:rgba(255,255,255,.86);box-shadow:var(--sh-2), inset 0 0 0 1px rgba(255,255,255,.7)}
.nav__logo{display:flex;align-items:center;gap:var(--s3);margin-right:auto;flex:none}
.nav__logo img{width:32px;height:32px}
.nav__logo b{font-size:14px;font-weight:700;letter-spacing:-.02em}
.nav__logo span{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,var(--blue-400),var(--blue));
  padding:var(--s1) var(--s2);border-radius:999px;
}
.nav__links{display:flex;align-items:center;gap:var(--s5)}
.nav__links a:not(.btn){
  font-size:13.5px;font-weight:500;color:var(--muted);
  transition:color .2s var(--ease);
}
.nav__links a:not(.btn):hover,.nav__links a:not(.btn).on{color:var(--blue)}
.nav__burger{display:none;width:44px;height:44px;border-radius:999px;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(1,112,185,.08)}
.nav__burger i{display:block;width:15px;height:1.6px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}

.nav__burger.open i:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.nav__burger.open i:nth-child(2){opacity:0}
.nav__burger.open i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

@media (max-width:900px){
  .nav__links{
    position:fixed;inset:86px 12px auto 12px;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,.96);backdrop-filter:blur(16px);
    border-radius:var(--r-lg);padding:var(--s3) var(--s5) var(--s5);box-shadow:var(--sh-3);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  }
  .nav__links.open{opacity:1;visibility:visible;transform:none}
  .nav__links a:not(.btn){padding:var(--s3) 0;font-size:15px;color:var(--ink);box-shadow:inset 0 -1px 0 var(--hair)}
  .nav__links .btn{margin-top:16px}
  .nav__burger{display:flex}
}

/* ---------- Superfícies ---------- */
.card{
  position:relative;border-radius:var(--r);padding:var(--s5);
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--sh-1), inset 0 0 0 1px rgba(255,255,255,.66);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-2), inset 0 0 0 1px rgba(255,255,255,.8)}
.card h3{margin-bottom:var(--s2)}
.card p{font-size:14px;line-height:1.6;color:var(--muted)}

.ico{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  margin-bottom:var(--s4);color:#fff;
  background:linear-gradient(140deg,var(--blue-400),var(--blue));
  box-shadow:0 3px 10px rgba(1,112,185,.28);
}
.ico--cyan{background:linear-gradient(140deg,#3FC2DB,var(--cyan));box-shadow:0 3px 10px rgba(18,165,196,.28)}
.ico--indigo{background:linear-gradient(140deg,#7B96E6,var(--indigo));box-shadow:0 3px 10px rgba(74,111,212,.26)}
.ico--deep{background:linear-gradient(140deg,#1C4D77,var(--blue-deep));box-shadow:0 3px 10px rgba(8,42,70,.26)}


/* ---------- Revelação ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important}}

.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:var(--s3) var(--s4);background:var(--blue);color:#fff;font-size:13px;font-weight:600;border-radius:0 0 12px 0}
.skip:focus{left:0}
.mt-s{margin-top:var(--s3)}.mt-m{margin-top:var(--s5)}.mt-l{margin-top:var(--s8)}

/* ---------- Hero ---------- */
.hero{padding-top:160px;padding-bottom:var(--band)}
.hero h1{max-width:20ch}
.hero .lead{margin-top:var(--s4);max-width:50ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s9)}
.facts > *{min-width:0}
.fact{
  border-radius:var(--r);padding:var(--s5);
  background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(237,246,252,.75));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--sh-1), inset 0 0 0 1px rgba(255,255,255,.7);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.fact:hover{transform:translateY(-3px);box-shadow:var(--sh-2), inset 0 0 0 1px rgba(255,255,255,.85)}
.fact b{
  display:block;font-size:26px;font-weight:700;letter-spacing:-.032em;line-height:1.1;
  background:linear-gradient(120deg,var(--blue-dark),var(--blue) 45%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fact span{display:block;margin-top:var(--s2);font-size:13px;line-height:1.5;color:var(--muted)}
@media (max-width:760px){.facts{grid-template-columns:1fr}}

/* ---------- Cronologia vertical animada ---------- */
.tl{position:relative;padding-left:72px}
.tl::before{
  content:"";position:absolute;left:26px;top:var(--s2);bottom:var(--s2);width:4px;border-radius:4px;
  background:rgba(12,26,43,.08);
}
.tl__fill{
  position:absolute;left:26px;top:var(--s2);width:4px;border-radius:4px;transform-origin:top;
  height:calc(100% - var(--s4));
  background:linear-gradient(180deg,var(--blue-400),var(--blue) 40%,var(--cyan));
  transform:scaleY(var(--p,0));
  transition:transform .18s linear;
  box-shadow:0 0 14px rgba(1,112,185,.34);
}
.tl__i{position:relative;padding-bottom:var(--s6)}
.tl__i:last-child{padding-bottom:0}
.tl__dot{
  position:absolute;left:-72px;top:2px;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  box-shadow:var(--sh-1), inset 0 0 0 1px rgba(12,26,43,.07);
  font-size:12px;font-weight:700;letter-spacing:-.01em;color:var(--faint);
  transition:color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease),background .45s var(--ease);
}
.tl__i.lit .tl__dot{
  color:#fff;transform:scale(1.06);
  background:linear-gradient(140deg,var(--blue-400),var(--blue));
  box-shadow:0 4px 14px rgba(1,112,185,.34), inset 0 0 0 1px rgba(255,255,255,.4);
}
.tl__i.now .tl__dot{color:#fff;background:linear-gradient(140deg,#3FC2DB,var(--cyan));box-shadow:0 4px 16px rgba(18,165,196,.4), inset 0 0 0 1px rgba(255,255,255,.4)}
.tl__i.now .tl__dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  box-shadow:0 0 0 2px rgba(18,165,196,.34);animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{0%{transform:scale(.92);opacity:.9}70%,100%{transform:scale(1.22);opacity:0}}
.tl__card{
  border-radius:var(--r);padding:var(--s5);
  background:rgba(255,255,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--sh-1), inset 0 0 0 1px rgba(255,255,255,.66);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.tl__i.lit .tl__card{box-shadow:var(--sh-2), inset 0 0 0 1px rgba(255,255,255,.8)}
.tl__card h3{margin-bottom:var(--s2)}
.tl__card p{font-size:13.5px;line-height:1.6;color:var(--muted)}
.tl__when{
  display:inline-block;margin-bottom:var(--s2);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);
}
.tl__i.now .tl__when{color:var(--cyan)}
/* No telemóvel o ano deixa de viver numa goteira de 64px ao lado do cartão,
   que roubava 30% da largura do ecrã, e passa a ser uma etiqueta dentro do
   próprio cartão. O carril fica fino, encostado à esquerda, com um ponto. */
@media (max-width:640px){
  .tl{padding-left:24px}
  .tl::before,.tl__fill{left:4px;width:3px}

  .tl__i::before{
    content:"";position:absolute;left:-24px;top:10px;
    width:11px;height:11px;border-radius:50%;
    background:rgba(12,26,43,.15);
    transition:background .45s var(--ease),box-shadow .45s var(--ease);
  }
  .tl__i.lit::before{background:var(--blue);box-shadow:0 0 9px rgba(1,112,185,.55)}
  .tl__i.now::before{background:var(--cyan);box-shadow:0 0 9px rgba(18,165,196,.6)}

  .tl__dot{
    position:static;width:auto;height:auto;
    display:inline-flex;align-items:center;justify-content:center;
    padding:5px 12px;border-radius:999px;
    margin-bottom:var(--s3);
    font-size:11px;letter-spacing:.03em;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(242,247,251,.95);
    box-shadow:inset 0 0 0 1px rgba(12,26,43,.07);
  }
  .tl__i.lit .tl__dot{transform:none}
  .tl__i.now .tl__dot::after{display:none}
}


/* ---------- Âmbito ---------- */
.panes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
.panes > *{min-width:0}
@media (max-width:640px){.panes{grid-template-columns:1fr}}

.pane{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:var(--s6);border-radius:var(--r-lg);
}
.pane--a{
  color:#fff;
  background:
    radial-gradient(115% 80% at 90% -14%, rgba(58,172,228,.55), transparent 62%),
    linear-gradient(158deg,#0D3C63,#07243B);
  box-shadow:0 18px 44px rgba(6,32,54,.26), inset 0 0 0 1px rgba(255,255,255,.1);
}
.pane--b{
  background:
    radial-gradient(110% 80% at 92% -12%, rgba(18,165,196,.14), transparent 58%),
    rgba(255,255,255,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--sh-2), inset 0 0 0 1px rgba(255,255,255,.85);
}

.pane__t{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5)}
.pane__t h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.pane--a .pane__t h3{color:#fff}
.pane__n{
  flex:none;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;
}
.pane--a .pane__n{color:rgba(255,255,255,.48)}

.rule{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s4);border-radius:var(--r-sm);margin-bottom:var(--s5);
}
.pane--a .rule{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pane--b .rule{background:rgba(237,246,252,.92)}
.rule__r{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.rule__r span{font-size:13px;font-weight:500;line-height:1.35;color:var(--ink-2)}
.pane--a .rule__r span{color:rgba(255,255,255,.8)}
.tagv{flex:none;font-size:11.5px;font-weight:700;padding:6px 13px;border-radius:999px;white-space:nowrap}
.tagv--ess{color:var(--blue-deep);background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.tagv--imp{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.pane--b .tagv--imp{color:#0A6570;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(18,165,196,.42)}

.setores{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s1)}
.setores li{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2);border-radius:var(--r-xs);
  transition:background .25s var(--ease);
}
.pane--a .setores li:hover{background:rgba(255,255,255,.07)}
.pane--b .setores li:hover{background:rgba(237,246,252,.85)}
.si{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center}
.si svg{display:block}
.pane--a .si{color:var(--blue-300);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.pane--b .si{color:var(--cyan);background:rgba(18,165,196,.1)}
.sl{display:flex;flex-direction:column;gap:2px;min-width:0}
.sl b{font-size:13.5px;font-weight:600;line-height:1.35}
.pane--b .sl b{color:var(--ink)}
.sl small{font-size:12px;font-weight:400;line-height:1.42}
.pane--a .sl small{color:rgba(255,255,255,.56)}
.pane--b .sl small{color:var(--muted)}

.pane__f{margin-top:auto;padding-top:var(--s6);font-size:12.5px;line-height:1.6}
.pane--a .pane__f{color:rgba(255,255,255,.6)}
.pane--b .pane__f{color:var(--muted)}

.notas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s7);margin-top:var(--s6)}
.notas p{font-size:13px;line-height:1.62;color:var(--muted)}
.notas strong{color:var(--ink);font-weight:700}
@media (max-width:600px){.notas{grid-template-columns:1fr;gap:var(--s4)}}


/* ---------- Verificador ---------- */
.check{
  border-radius:var(--r-lg);overflow:hidden;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sh-3), inset 0 0 0 1px rgba(255,255,255,.72);
}
.check__bar{height:3px;background:rgba(12,26,43,.07)}
.check__bar i{display:block;height:100%;border-radius:0 3px 3px 0;width:0;
  background:linear-gradient(90deg,var(--blue-400),var(--cyan));transition:width .4s var(--ease)}
.check__in{padding:var(--s6)}
.step{display:none}
.step.on{display:block;animation:fade .34s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step__n{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.step h3{margin:var(--s3) 0 var(--s1);font-size:19px;font-weight:700;letter-spacing:-.022em}
.step > p{font-size:13.5px;color:var(--muted);margin-bottom:var(--s5)}
.opts{display:grid;gap:var(--s2)}
.opt{
  display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  padding:var(--s4);border-radius:var(--r-sm);
  background:rgba(242,247,251,.72);
  box-shadow:inset 0 0 0 1px rgba(12,26,43,.05);
  font-size:14px;line-height:1.45;color:var(--ink);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
}
.opt::before{
  content:"";flex:none;width:18px;height:18px;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(12,26,43,.14);
  transition:box-shadow .22s var(--ease),background .22s var(--ease);
}
.opt:hover{transform:translateX(3px);background:rgba(255,255,255,.95);box-shadow:var(--sh-1), inset 0 0 0 1px rgba(1,112,185,.24)}
.opt:hover::before{box-shadow:inset 0 0 0 6px var(--blue)}
.check__back{margin-top:var(--s5);font-size:13px;font-weight:600;color:var(--muted);transition:color .2s var(--ease)}
.check__back:hover{color:var(--blue)}

.result{display:none}
.result.on{display:block;animation:fade .34s var(--ease) both}
.result__tag{
  display:inline-block;padding:var(--s2) var(--s4);border-radius:999px;margin-bottom:var(--s4);
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  box-shadow:0 3px 10px rgba(1,112,185,.28);
}
.result__tag.cy{background:linear-gradient(135deg,#3FC2DB,var(--cyan));box-shadow:0 3px 10px rgba(18,165,196,.28)}
.result__tag.gr{background:rgba(242,247,251,.95);color:var(--muted);box-shadow:inset 0 0 0 1px var(--hair)}
.result h3{font-size:21px;font-weight:700;letter-spacing:-.024em;line-height:1.25;margin-bottom:var(--s3)}
.result > p{font-size:14.5px;line-height:1.62;color:var(--muted);max-width:56ch}
.result__act{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6);padding-top:var(--s5);box-shadow:inset 0 1px 0 var(--hair)}
.result__note{margin-top:var(--s4);font-size:12px;line-height:1.5;color:var(--faint);max-width:62ch}

.ticks{display:grid;gap:var(--s3);margin-top:var(--s5)}
.ticks li{position:relative;padding-left:var(--s5);font-size:13.5px;line-height:1.55;color:var(--muted)}
.ticks li::before{
  content:"";position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:50%;
  background:linear-gradient(140deg,var(--blue-400),var(--blue));
  box-shadow:0 2px 5px rgba(1,112,185,.24);
}
.ticks li::after{
  content:"";position:absolute;left:4.5px;top:8px;width:6px;height:3px;
  border-left:1.8px solid #fff;border-bottom:1.8px solid #fff;transform:rotate(-45deg);
}
.ticks strong{color:var(--ink)}



/* ---------- Serviços ---------- */
.plan__step{
  display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);
}
.plan__step i{
  flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  font-style:normal;font-size:12px;color:#fff;
  background:linear-gradient(140deg,var(--blue-400),var(--blue));box-shadow:0 2px 7px rgba(1,112,185,.26);
}

/* Bloco de arranque */
/* Projetos iniciais, lado a lado */
.projs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);align-items:stretch}
.projs > *{min-width:0}
@media (max-width:1000px){.projs{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}
.proj{
  display:flex;flex-direction:column;
  border-radius:var(--r-lg);padding:var(--s6);
  background:linear-gradient(155deg,rgba(255,255,255,.92),rgba(213,234,248,.6));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--sh-2), inset 0 0 0 1.5px rgba(1,112,185,.18);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.proj:hover{transform:translateY(-3px);box-shadow:var(--sh-3), inset 0 0 0 1.5px rgba(1,112,185,.26)}
.proj .ticks{flex:1}
.proj h3{font-size:20px;font-weight:700;letter-spacing:-.024em;margin-bottom:var(--s2)}
.proj > p{font-size:13.5px;line-height:1.6;color:var(--muted)}
.proj .ticks{margin-top:var(--s5)}
.proj .ticks li{font-size:13px}


/* Seis frentes do acompanhamento */
.frentes{
  margin-top:var(--s9);
  padding:var(--s7);border-radius:var(--r-lg);
  background:rgba(237,246,252,.7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72);
}
.frentes__h{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s6);
}
.frentes__h h3{font-size:21px;font-weight:700;letter-spacing:-.024em;line-height:1.25}
.frentes .plan__step{margin-bottom:var(--s3)}
.lnk{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--blue);
  transition:color .2s var(--ease);
}
.lnk:hover{color:var(--blue-dark)}
.ticks a{
  color:var(--blue-dark);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(1,112,185,.34);
  transition:text-decoration-color .2s var(--ease);
}
.ticks a:hover{text-decoration-color:var(--blue)}
@media (max-width:640px){.frentes{padding:var(--s5);margin-top:var(--s8)}}

.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.svc > *{min-width:0}
@media (max-width:860px){.svc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svc{grid-template-columns:1fr}}
.svc .card h3{margin-bottom:var(--s3)}
.mini{display:grid;gap:var(--s2)}
.mini li{
  position:relative;padding-left:var(--s4);
  font-size:13px;line-height:1.5;color:var(--muted);
}
.mini li::before{
  content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;
  background:var(--blue-400);
}

/* Nota destacada */
.note{
  display:flex;gap:var(--s4);align-items:flex-start;
  border-radius:var(--r);padding:var(--s5);
  background:rgba(255,255,255,.72);backdrop-filter:blur(8px);
  box-shadow:var(--sh-1), inset 0 0 0 1px rgba(255,255,255,.6);
}
.note__ico{
  flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,#7B96E6,var(--indigo));box-shadow:0 2px 8px rgba(74,111,212,.26);
}
.note b{display:block;font-size:13.5px;font-weight:600;margin-bottom:var(--s1)}
.note p{font-size:13px;line-height:1.6;color:var(--muted);max-width:68ch}


/* ---------- Contacto ---------- */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s8);align-items:start}
.contact > *{min-width:0}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:var(--s6)}}
.details{display:grid;gap:var(--s2);margin-top:var(--s6)}
.details div{
  padding:var(--s4);border-radius:var(--r-sm);
  background:rgba(255,255,255,.7);box-shadow:var(--sh-1), inset 0 0 0 1px rgba(255,255,255,.6);
}
.details dt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:var(--s1)}
.details dd{font-size:14px;font-weight:500}
.details dd a{transition:color .2s var(--ease)}
.details dd a:hover{color:var(--blue)}
.details dd small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:var(--s1)}

.form{
  border-radius:var(--r-lg);padding:var(--s6);
  background:rgba(255,255,255,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sh-3), inset 0 0 0 1px rgba(255,255,255,.72);
}
.form__g{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.form__g > *{min-width:0}
@media (max-width:560px){.form__g{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:var(--s2)}
.f--w{grid-column:1/-1}
.f label{font-size:12.5px;font-weight:600}
.f input,.f select,.f textarea{
  width:100%;min-width:0;height:44px;padding:0 var(--s4);border-radius:var(--r-xs);
  border:0;background:rgba(242,247,251,.8);
  box-shadow:inset 0 0 0 1px rgba(12,26,43,.06);
  font-size:14px;
  transition:box-shadow .2s var(--ease),background .2s var(--ease);
}
.f textarea{height:auto;padding:var(--s3) var(--s4);resize:vertical;min-height:96px;line-height:1.55}
.f input::placeholder,.f textarea::placeholder{color:var(--faint)}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;background:#fff;box-shadow:inset 0 0 0 1.5px var(--blue), 0 0 0 4px rgba(1,112,185,.12);
}
.f select{
  appearance:none;cursor:pointer;padding-right:var(--s7);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6B7E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s4) center;
}
.consent{display:flex;gap:var(--s3);align-items:flex-start;grid-column:1/-1;margin-top:var(--s1)}
.consent input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--blue);cursor:pointer;padding:0;box-shadow:none;background:none;height:16px}
.consent label{font-size:12px;font-weight:400;line-height:1.5;color:var(--muted)}
.consent label a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.form__foot{margin-top:var(--s5)}
.form__err{display:none;margin-bottom:var(--s3);font-size:13px;font-weight:600;color:#C0491C}
.form__err.on{display:block}
.sent{display:none;text-align:center;padding:var(--s8) var(--s5)}
.sent.on{display:block;animation:fade .34s var(--ease) both}
.sent .ico{margin:0 auto var(--s4)}
.sent h3{font-size:19px;margin-bottom:var(--s2)}
.sent p{font-size:14px;color:var(--muted);max-width:40ch;margin-inline:auto}

/* ---------- Faixa final ---------- */
.cta{
  border-radius:var(--r-xl);padding:var(--s8) var(--s7);text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--blue-deep),#0E4674 45%,var(--blue-dark));
  box-shadow:var(--sh-3);
}
.cta::after{
  content:"";position:absolute;width:52%;aspect-ratio:1;border-radius:50%;right:-10%;top:-40%;
  background:radial-gradient(circle,rgba(99,187,232,.34),transparent 66%);
  filter:blur(26px);animation:drift-a 24s var(--ease-soft) infinite alternate;
}
.cta > *{position:relative;z-index:1}
.cta h2{color:#fff;max-width:22ch;margin-inline:auto}
.cta p{color:rgba(224,240,251,.8);font-size:15px;line-height:1.65;max-width:50ch;margin:var(--s4) auto 0}
.cta__act{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s6)}
.cta .btn--ghost{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.cta .btn--ghost:hover{background:rgba(255,255,255,.2);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.cta .btn:not(.btn--ghost){background:#fff;color:var(--blue-dark);box-shadow:0 6px 18px rgba(0,0,0,.24)}

/* ---------- Rodapé ---------- */
.foot{padding-block:var(--s9) var(--s6);position:relative}
.foot__in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s7)}
@media (max-width:760px){.foot__in{grid-template-columns:1fr 1fr;gap:var(--s5)}}
@media (max-width:480px){.foot__in{grid-template-columns:1fr}}
.foot__logo{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.foot__logo img{width:30px;height:30px}
.foot__logo b{font-size:14px;font-weight:700;letter-spacing:-.02em}
.foot p{font-size:13px;line-height:1.6;color:var(--muted);max-width:38ch}
.foot h4{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:var(--s4)}
.foot ul{display:grid;gap:var(--s2)}
.foot ul a,.foot ul li{font-size:13px;color:var(--muted);transition:color .2s var(--ease)}
.foot ul a:hover{color:var(--blue)}
.foot__end{
  margin-top:var(--s7);padding-top:var(--s5);box-shadow:inset 0 1px 0 var(--hair);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;justify-content:space-between;
}
.foot__end p,.foot__end a{font-size:12px;color:var(--faint)}
.foot__end nav{display:flex;flex-wrap:wrap;gap:var(--s5)}
.foot__end a:hover{color:var(--blue)}
.foot__legal{font-size:12px;line-height:1.55;color:var(--faint);max-width:76ch;margin-top:var(--s6)}

@media (max-width:1000px){:root{--pad:var(--s6);--band:var(--s10)}}
@media (max-width:640px){
  :root{--pad:var(--s5);--band:var(--s9)}
  .hero{padding-top:128px;padding-bottom:var(--band)}
  .check__in,.form,.plan,.cta{padding:var(--s5)}
  .cta{padding:var(--s6) var(--s5)}
}

/* ==========================================================
   Telemóvel
   ========================================================== */

html{-webkit-tap-highlight-color:transparent}
.nw{white-space:nowrap}

/* Em ecrãs de toque o :hover fica colado depois do toque */
@media (hover:none){
  .card:hover,.proj:hover,.tl__card:hover,.pane:hover,.details div:hover,
  .opt:hover,.setores li:hover{transform:none}
  .opt:hover{background:rgba(242,247,251,.72);box-shadow:inset 0 0 0 1px rgba(12,26,43,.05)}
  .opt:hover::before{box-shadow:inset 0 0 0 2px rgba(12,26,43,.14)}
  .btn:hover{transform:none;box-shadow:var(--sh-blue);filter:none}
  .btn:active{transform:scale(.97)}
  .opt:active{background:rgba(255,255,255,.95);box-shadow:var(--sh-1), inset 0 0 0 1px rgba(1,112,185,.24)}
  .card:active,.proj:active{transform:scale(.995)}
}

/* Margens seguras nos ecrãs com recorte */
@supports (padding:max(0px)){
  .shell{
    padding-left:max(var(--pad),env(safe-area-inset-left));
    padding-right:max(var(--pad),env(safe-area-inset-right));
  }
  .nav{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  .foot{padding-bottom:calc(var(--s6) + env(safe-area-inset-bottom))}
}

@media (max-width:900px){
  .nav__links{
    inset:84px 12px auto 12px;padding:var(--s2) var(--s5) var(--s5);
    max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;
  }
  .nav__links a:not(.btn){padding:var(--s4) 0;font-size:16px}
  .nav__links .btn{height:48px;font-size:15px}
}

@media (max-width:640px){
  /* O Safari faz zoom ao focar campos com menos de 16px */
  .f input,.f select,.f textarea{font-size:16px;height:50px}
  .f textarea{height:auto;min-height:124px}
  .f label{font-size:13px}

  /* Alvos de toque de 44px ou mais */
  .btn{height:48px;padding:0 var(--s5);font-size:15px}
  .btn--sm{height:42px;padding:0 var(--s4)}
  .opt{padding:var(--s4) var(--s4);font-size:15px;align-items:flex-start;gap:var(--s4)}
  .opt::before{margin-top:3px}
  .check__back{display:inline-block;padding-block:8px}
  .details dd a,.ticks a{display:inline-block;padding-block:6px}
  .lnk{display:inline-flex;padding-block:6px}
  .foot ul a{display:inline-block;padding-block:10px}
  .foot__legal a{display:inline-block;padding-block:8px}
  .foot__end nav{gap:var(--s3) var(--s5)}
  .foot__end a{display:inline-block;padding-block:8px}
  .nav__logo{min-height:44px}
  .consent{gap:var(--s4)}
  .consent input{width:22px;height:22px;margin-top:0}
  .consent label{font-size:13px}

  /* Menos custo gráfico: menos nuvens, menos desfoque, sem backdrop-filter */
  .aura i{filter:blur(52px)}
  .aura i:nth-child(3),.aura i:nth-child(4){display:none}
  .card,.proj,.tl__card,.form,.check__in,.check,.pane--b,.note,.details div,.nav__in{
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .card,.proj,.tl__card,.note,.details div{background:rgba(255,255,255,.94)}
  .form,.check{background:rgba(255,255,255,.95)}
  .nav__in{background:rgba(255,255,255,.93)}
  .nav.stuck .nav__in{background:rgba(255,255,255,.97)}
  .pane--b{
    background:
      radial-gradient(110% 80% at 92% -12%, rgba(18,165,196,.14), transparent 58%),
      #fff;
  }

  /* Leitura */
  .head{margin-bottom:var(--s7)}
  .lead{font-size:15px}
  .opts{gap:var(--s3)}
  .frentes__h{gap:var(--s3)}
}

.btnrow{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* Grupos de botões: no telemóvel empilhavam com larguras diferentes, o que
   deixava a coluna esfarrapada. Passam a ocupar a largura toda. */
@media (max-width:640px){
  .hero__cta,.cta__act,.result__act,.btnrow{
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:var(--s3);
  }
  .hero__cta .btn,.cta__act .btn,.result__act .btn,.btnrow .btn{width:100%}
}

/* Densidade em telemóvel. Empilhar tudo a tamanho de secretária dava
   uma página de 20 ecrãs de altura, e isso é o que faz um site parecer
   feito para computador e espremido para o telefone. */
@media (max-width:640px){
  :root{--band:48px}
  .head{margin-bottom:var(--s6)}
  .grid,.g2,.g3{gap:var(--s4)}

  /* Herói */
  .hero{padding-top:104px}
  .hero__cta{margin-top:var(--s5)}
  .facts{gap:var(--s3);margin-top:var(--s7)}
  .fact{padding:var(--s4)}
  .fact b{font-size:23px}
  .fact span{font-size:12.5px;margin-top:6px}

  /* Cartões */
  .card{padding:var(--s4)}
  .card p{font-size:13.5px;line-height:1.55}
  .ico{width:34px;height:34px;border-radius:11px;margin-bottom:var(--s3)}

  /* Cronologia */
  .tl__i{padding-bottom:var(--s5)}
  .tl__card{padding:var(--s4)}
  .tl__card p{font-size:13px;line-height:1.55}
  .tl__when{margin-bottom:6px}

  /* Âmbito */
  .pane{padding:var(--s5)}
  /* O título parte em duas linhas e a contagem ficava pendurada ao lado da
     primeira. Passa a etiqueta por cima, como um sobretítulo. */
  .pane__t{flex-direction:column-reverse;align-items:flex-start;gap:var(--s2);margin-bottom:var(--s4)}
  .pane__n{font-size:10px}
  /* A regra não cabe numa linha: o rótulo partia em duas e a pastilha ficava
     a meio. Passa a pastilha em cima e o rótulo por baixo, sem quebras. */
  .rule{padding:var(--s4);gap:var(--s4);margin-bottom:var(--s4)}
  .rule__r{flex-direction:column-reverse;align-items:flex-start;gap:5px}
  .rule__r span{font-size:13.5px}
  .setores{gap:0}
  .setores li{padding:5px var(--s2) 5px 0;gap:10px;align-items:flex-start}
  .si{width:27px;height:27px;border-radius:9px}
  .si svg{width:14px;height:14px}
  .sl{padding-top:4px}
  .sl b{font-size:13px}
  .sl small{font-size:11.5px;line-height:1.38;margin-top:1px}
  .pane__f{padding-top:var(--s4);font-size:12px}
  .notas{margin-top:var(--s5)}

  /* Serviços */
  .proj{padding:var(--s5)}
  .proj h3{font-size:18px}
  .proj > p{font-size:13px;line-height:1.55}
  .proj .ticks{margin-top:var(--s4);gap:var(--s2)}
  .ticks li{font-size:12.8px;line-height:1.5}
  .frentes{margin-top:var(--s7);background:rgba(230,242,251,.82)}
  .frentes__h{margin-bottom:var(--s4)}
  .frentes .card{background:#fff;box-shadow:var(--sh-2), inset 0 0 0 1px rgba(255,255,255,.9)}
  /* A nota tinha o ícone ao lado e sobravam 229px para o texto. O ícone sobe
     para a sua própria linha e o parágrafo fica com a largura toda. */
  .note{flex-direction:column;gap:var(--s3);padding:var(--s4)}
  .svc{gap:var(--s3)}
  .svc .card h3{margin-bottom:var(--s2)}
  .mini{gap:5px}
  .mini li{font-size:12.5px;line-height:1.45}

  /* Verificador */
  .check__in{padding:var(--s5)}
  .step > p{margin-bottom:var(--s4)}

  /* Contacto e rodapé */
  .details{gap:6px;margin-top:var(--s5)}
  .details div{padding:var(--s3)}
  .foot{padding-block:var(--s7) var(--s5)}
  .foot__in{gap:var(--s5)}
}

@media (max-width:360px){
  .nav__logo b{font-size:13px}
  .pane,.frentes{padding:var(--s5)}
  .btn{padding:0 var(--s4);font-size:14.5px}
}

@media print{
  .nav,.aura,.cta{display:none}
  .rv{opacity:1;transform:none}
  body{font-size:10pt;background:#fff}
}