/* AI&Media · direcção «Avance» · 18.10.2026
   Estrutura, movimento, transições e formulário medidos numa referência aprovada;
   a cor e os textos são nossos. Títulos em Unbounded, texto em Onest (ambas OFL,
   escolhidas a 18.10.2026). O acento é o azul da logo da AI&Media. */

/* ── Tipos de letra, alojados aqui ──────────────────────────────────────────
   Estavam a vir do Google Fonts, e isso manda o IP de quem visita para a
   Google antes de a pessoa ter dito que sim a seja o que for. Com o banner de
   consentimento a prometer que "sem o seu sim nao guardamos nada", deixar as
   fontes la' tornava a frase falsa.

   Unbounded e Onest sao OFL, por isso alojam-se sem problema. Ambas sao
   variaveis: um ficheiro cobre toda a gama de peso.

   O  fica declarado com o seu unicode-range. Portugues vive todo no
   , por isso o browser so' descarrega esse (83 KB); o outro so' e'
   buscado se aparecer um nome polaco ou checo no texto. */

@font-face{
  font-family:"Unbounded";
  src:url("fontes/unbounded-latin.woff2") format("woff2");
  font-weight:500 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Unbounded";
  src:url("fontes/unbounded-latin-ext.woff2") format("woff2");
  font-weight:500 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Onest";
  src:url("fontes/onest-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Onest";
  src:url("fontes/onest-latin-ext.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --preto:#000; --branco:#fff;
  --acento:#4FA3F7;          /* 7,91:1 sobre preto */
  --acento-forte:#78B9FF;
  --cinza-titulo:#8C8C8C;    /* as afirmações antes de acenderem */
  --cinza-texto:#A6A6A6;     /* corpo dos pilares */
  --linha:rgba(255,255,255,.18);
  --display:"Unbounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --texto:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:120px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--preto);color:var(--branco);font-family:var(--texto);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.env{max-width:1440px;margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}

/* ---------- topo: barra de utilidades + barra principal ---------- */
.topo{position:relative;z-index:50;background:var(--preto);padding-top:env(safe-area-inset-top,0px)}
html.menu-aberto .topo{position:fixed;top:0;left:0;right:0}
.utilidades{display:flex;justify-content:space-between;align-items:center;height:46px;padding:0 24px;
  border-bottom:1px solid var(--linha);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.utilidades nav{display:flex;gap:44px}
.utilidades a:hover{color:var(--acento)}
.principal{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:110px;padding:0 24px}
.logo{font-family:var(--texto);font-weight:700;font-size:30px;letter-spacing:-.04em;color:var(--acento);justify-self:start;line-height:1}
.logo img{display:block;height:30px;width:auto}
.rodape .logo img{height:44px;margin-left:auto}
.pilula{display:flex;gap:2px;border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:6px 10px}
.pilula a{font-size:15px;font-weight:500;padding:9px 20px;border-radius:999px;transition:color .25s}
.pilula a:hover{color:var(--acento)}
.cta-topo{justify-self:end}
.botao{display:inline-flex;align-items:center;gap:14px;background:var(--acento);color:#000;font-weight:500;font-size:16px;
  line-height:1;padding:14px 18px 14px 24px;border-radius:999px;border:0;cursor:pointer;transition:background-color .3s}
.botao:hover{background:var(--acento-forte)}
.botao svg{width:22px;height:22px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.botao:hover svg{transform:translateX(4px)}
.botao.claro{background:#fff}
.botao.claro:hover{background:var(--acento)}

/* ---------- o primeiro ecrã ---------- */
.heroi{position:relative;height:max(620px,min(52.92vw,100svh));text-align:center;overflow:hidden}
.heroi canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.heroi::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 30% 30% at 50% 45%,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,rgba(0,0,0,0) 85%)}
.heroi .conteudo{position:relative;z-index:1;padding:clamp(64px,7.85vw,140px) 24px 0}
.heroi h1{margin:0;font-size:inherit;font-weight:400;line-height:1}
.lema,.tres{display:block}
.lema{margin:0;font-family:var(--display);font-weight:700;color:var(--acento);font-size:clamp(60px,8.5vw,176px);
  line-height:1.04;letter-spacing:-.045em}
.tres{margin:14px 0 0;font-size:clamp(24px,2.64vw,38px);font-weight:400;line-height:1}
.quem{margin:42px auto 0;max-width:467px;color:var(--acento);font-size:20px;font-weight:500;line-height:1;letter-spacing:-.01em}
.quem + .quem{margin-top:26px}
.descer{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:44px;font-size:16px}
.heroi .descer,.leitura .descer{position:absolute;left:50%;bottom:56px;margin:0;transform:translateX(-50%)}
.descer .rato{width:24px;height:46px;border-radius:999px;background:#fff;position:relative}
.descer .rato::after{content:"";position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:#000;
  animation:rato 1.6s ease-in-out infinite}
@keyframes rato{0%,100%{transform:translateY(0);opacity:1}60%{transform:translateY(12px);opacity:0}}

/* ---------- quanto tempo tem (o selector de leitura) ---------- */
.leitura{position:relative;height:100vh;min-height:620px;text-align:center;overflow:hidden}
.leitura canvas{position:absolute;left:50%;top:0;width:min(900px,100vw);height:100%;transform:translateX(-50%);z-index:0}
.leitura .conteudo{position:absolute;z-index:1;left:0;right:0;top:calc(50% - 129px)}
.leitura .rotulo{display:inline-flex;align-items:center;gap:12px;margin:0;color:var(--acento);font-size:34px;font-weight:500;
  letter-spacing:-.04em;line-height:1}
.leitura .rotulo i{width:13px;height:13px;border-radius:50%;background:var(--acento);box-shadow:0 0 0 3px #000,0 0 0 4px var(--acento)}
.leitura .pede{margin:20px 0 31px;font-size:18px;line-height:18px;font-weight:500}
.niveis{display:inline-grid;grid-template-columns:repeat(3,236px);border:1px solid var(--acento);border-radius:999px;padding:0}
.niveis a{display:block;border-radius:999px;color:var(--acento);font-size:18px;font-weight:500;line-height:26px;padding:10px 12px;text-align:center;
  transition:background-color .3s,color .3s}
.niveis a:hover,.niveis a:focus-visible{background:var(--acento);color:#000}
.ler-mais{display:inline-block;margin:0 0 14px;padding:0;border:0;background:none;color:var(--acento);font:inherit;font-weight:700;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px}
.ler-mais:hover{color:var(--acento-forte)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ---------- os três pilares ---------- */
.pilar{position:relative;min-height:100vh;display:flex;align-items:center}
.pilar .env{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px;align-items:center}
.text-col{padding-top:32px}
.col-texto{position:relative;z-index:1}
.col-visual{position:relative;height:min(70vh,640px)}
.col-visual canvas{position:absolute;inset:-12% -18%;width:136%;height:124%}
.afirmacao{margin:0;font-size:clamp(32px,3.2vw,46px);font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--branco)}
.corpo{margin-top:16px;max-width:600px;color:#E6E6E6;font-size:16px;font-weight:700;line-height:1.3}
.corpo p{margin:0 0 20px}
.corpo ul{margin:0 0 20px;padding-left:18px}
.corpo li{margin-bottom:8px}
.corpo b{color:#fff}
.titulo-pilar{margin:24px 0 0;font-family:var(--display);font-weight:700;color:var(--acento);font-size:clamp(28px,2.9vw,42px);
  line-height:1.1;letter-spacing:-.04em}
.kpi{display:flex;flex-direction:column;align-items:center;text-align:center}
.kpi b{font-family:var(--display);font-weight:600;font-size:clamp(40px,3.6vw,52px);line-height:1.2;letter-spacing:-.04em;color:var(--acento);white-space:nowrap}
.kpi span{margin-top:8px;font-family:var(--texto);font-weight:500;font-size:20px;color:var(--acento);max-width:260px;line-height:1.25;letter-spacing:-.01em}
/* a imagem do pilar é uma camada de 1200 x 549 por trás, desviada 144 px para o lado da imagem,
   com um degradê que a apaga por baixo do texto; o número fica desse lado, em baixo e ao centro */
.pilar .env{position:relative;grid-template-rows:minmax(549px,auto)}
.pilar .col-texto{grid-column:1;grid-row:1;z-index:2}
.pilar.inverso .col-texto{grid-column:2}
.pilar .col-visual{position:absolute;z-index:0;top:50%;height:549px;margin-top:-274px;width:calc(100% - 2 * var(--gutter));left:calc(var(--gutter) + 144px)}
.pilar.inverso .col-visual{left:calc(var(--gutter) - 144px)}
.pilar .col-visual canvas{inset:0;width:100%;height:100%}
.pilar .col-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 30%,rgba(0,0,0,0) 56%)}
.pilar.inverso .col-visual::after{background:linear-gradient(270deg,#000 0%,rgba(0,0,0,.92) 30%,rgba(0,0,0,0) 56%)}
.pilar .kpi-col{grid-column:2;grid-row:1;align-self:end;justify-self:center;z-index:2;width:300px}
.pilar.inverso .kpi-col{grid-column:1}

/* ---------- as imagens dos pilares: um cartão por pilar, na coluna do número, centrado com o texto ---------- */
.pilar .kpi-col:has(.pv){align-self:center;justify-self:stretch;width:auto;display:grid;justify-items:center;gap:34px}
.pv{position:relative;z-index:2;width:100%;max-width:560px;font-family:var(--texto);font-size:13px;line-height:1.3;color:#e8e8e8;text-align:left}
.pv p{margin:0}
.pv ul{list-style:none;margin:0;padding:0}
/* pilar 1 · o plano de seis meses a avançar */
.pv-plano{padding:18px 18px 16px;display:grid;gap:12px;--ciclo:10s}
.pp-topo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pp-chip{padding:4px 10px;border-radius:999px;border:1px solid rgba(79,163,247,.45);color:#9fd0ff;font-size:11px}
.pp-meses{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));font-size:11px;color:#8f9aa8}
.pp-pista{position:relative;height:4px;border-radius:2px;background:#20242c}
.pp-feito{position:absolute;inset:0;border-radius:2px;background:var(--acento);transform-origin:left;transform:scaleX(0);animation:pp-enche var(--ciclo) linear infinite}
.pp-cursor{position:absolute;inset:0;transform:translateX(-100%);animation:pp-anda var(--ciclo) linear infinite}
.pp-cursor i{position:absolute;right:-7px;top:-5px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--acento)}
@keyframes pp-enche{0%,4%{transform:scaleX(0)}76%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes pp-anda{0%,4%{transform:translateX(-100%)}76%,94%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.pp-fases{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.pp-f{display:grid;gap:3px;padding:10px;border-radius:10px;background:#16191e;border:1px solid rgba(255,255,255,.06);opacity:.4;animation:pp-f1 var(--ciclo) ease infinite}
.pp-f b{font-size:13px}
.pp-f span{font-size:11px;color:#9aa3ae}
.pp-f1{grid-column:1/2}
.pp-f2{grid-column:2/6;animation-name:pp-f2}
.pp-f3{grid-column:6/7;animation-name:pp-f3}
@keyframes pp-f1{0%,6%{opacity:.4;border-color:rgba(255,255,255,.06)}12%,94%{opacity:1;border-color:var(--acento)}100%{opacity:.4;border-color:rgba(255,255,255,.06)}}
@keyframes pp-f2{0%,18%{opacity:.4;border-color:rgba(255,255,255,.06)}24%,94%{opacity:1;border-color:var(--acento)}100%{opacity:.4;border-color:rgba(255,255,255,.06)}}
@keyframes pp-f3{0%,70%{opacity:.4;border-color:rgba(255,255,255,.06)}76%,94%{opacity:1;border-color:var(--acento)}100%{opacity:.4;border-color:rgba(255,255,255,.06)}}
.pp-depois{display:flex;align-items:baseline;gap:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);opacity:.35;
  animation:pp-depois var(--ciclo) ease infinite}
.pp-depois b{font-size:13px;color:#9fd0ff}
.pp-depois span{font-size:12px;color:#9aa3ae}
@keyframes pp-depois{0%,80%{opacity:.35}86%,94%{opacity:1}100%{opacity:.35}}

/* pilar 2 · o painel em tempo real: o número mexe, o desvio aparece, a correcção é no próprio dia */
.pv-relatorio{padding:18px;display:grid;gap:12px;--ciclo:9s}
.pr-topo,.pw-topo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pr-vivo{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;border:1px solid rgba(79,163,247,.45);color:#9fd0ff;font-size:11px}
.pr-vivo i{width:7px;height:7px;border-radius:50%;background:#5fd38d;animation:pr-pisca 1.6s ease-in-out infinite}
@keyframes pr-pisca{0%,100%{opacity:1}50%{opacity:.25}}
.pr-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pr-k{display:grid;gap:10px;padding:11px 10px;border-radius:10px;background:#16191e;border:1px solid rgba(255,255,255,.06)}
.pr-k span{font-size:11px;color:#9aa3ae;line-height:1.25}
.pr-k b{display:block;height:9px;border-radius:5px;background:#d8ecff;transform-origin:left;animation:pr-mexe 2.4s ease-in-out infinite}
.pr-k:nth-child(1) b{width:78%}
.pr-k:nth-child(2) b{width:62%;animation-delay:-.8s}
.pr-k:nth-child(3) b{width:46%;animation-delay:-1.6s,0s}
@keyframes pr-mexe{0%,100%{transform:scaleX(.92)}50%{transform:scaleX(1)}}
.pr-alvo{animation:pr-desvio var(--ciclo) ease infinite}
.pr-alvo b{animation:pr-mexe 2.4s ease-in-out infinite,pr-desvio-b var(--ciclo) ease infinite}
@keyframes pr-desvio{0%,36%{border-color:rgba(255,255,255,.06)}42%,58%{border-color:#f2b544}64%,92%{border-color:rgba(79,163,247,.6)}100%{border-color:rgba(255,255,255,.06)}}
@keyframes pr-desvio-b{0%,36%{background:#d8ecff}42%,58%{background:#f2b544}64%,100%{background:#d8ecff}}
.pr-linha{position:relative;height:58px;overflow:hidden;border-radius:8px;background:#121418}
.pr-linha svg{position:absolute;left:0;top:4px;width:200%;height:50px;animation:pr-corre 6s linear infinite}
.pr-linha path{fill:none;stroke:var(--acento);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
@keyframes pr-corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pr-estado{display:grid}
.pr-estado p{grid-area:1/1;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:12px;opacity:0}
.pr-estado i{position:relative;flex:none;width:16px;height:16px;border-radius:50%}
.pr-e0{background:#16191e;border:1px solid rgba(255,255,255,.08);color:#9aa3ae;animation:pr-e0 var(--ciclo) ease infinite}
.pr-e0 i{background:#2f3540}
.pr-e1{background:rgba(242,181,68,.08);border:1px solid rgba(242,181,68,.4);color:#f6d79b;animation:pr-e1 var(--ciclo) ease infinite}
.pr-e1 b{color:#ffe2a8}
.pr-e1 i{width:8px;height:8px;margin:0 4px;background:#f2b544}
.pr-e2{background:rgba(79,163,247,.1);border:1px solid rgba(79,163,247,.45);color:#cfe7ff;animation:pr-e2 var(--ciclo) ease infinite}
.pr-e2 i{background:var(--acento)}
.pr-e2 i::after{content:"";position:absolute;left:4px;top:4px;width:6px;height:3px;border-left:2px solid #000;border-bottom:2px solid #000;transform:rotate(-45deg)}
@keyframes pr-e0{0%,36%{opacity:1}40%,94%{opacity:0}98%,100%{opacity:1}}
@keyframes pr-e1{0%,38%{opacity:0}42%,58%{opacity:1}62%,100%{opacity:0}}
@keyframes pr-e2{0%,60%{opacity:0}64%,92%{opacity:1}96%,100%{opacity:0}}

/* pilar 3 · o workshop: segurança, os casos da empresa, tarefas a correr no dia seguinte */
.pv-workshop{padding:18px;display:grid;gap:14px;--ciclo:9s}
.pw-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;border:1px solid rgba(79,163,247,.45);color:#9fd0ff;font-size:11px}
.pw-chip i{position:relative;width:9px;height:7px;margin-top:3px;border:1.5px solid currentColor;border-radius:2px}
.pw-chip i::before{content:"";position:absolute;left:0;top:-6px;width:3px;height:4px;border:1.5px solid currentColor;border-bottom:0;border-radius:3px 3px 0 0}
.pw-relogio{height:4px;border-radius:2px;background:#20242c;overflow:hidden}
.pw-relogio b{display:block;height:100%;background:var(--acento);transform-origin:left;transform:scaleX(0);animation:pw-tempo var(--ciclo) linear infinite}
@keyframes pw-tempo{0%,4%{transform:scaleX(0)}78%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.pw-passos{display:grid;gap:8px}
.pw-passos li{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;background:#16191e;border:1px solid rgba(255,255,255,.06);
  opacity:.4;animation:pw-passo1 var(--ciclo) ease infinite}
.pw-passos li:nth-child(2){animation-name:pw-passo2}.pw-passos li:nth-child(3){animation-name:pw-passo3}
.pw-passos i{position:relative;flex:none;width:18px;height:18px;border-radius:50%;background:var(--acento)}
.pw-passos i::after{content:"";position:absolute;left:5px;top:5px;width:7px;height:4px;border-left:2px solid #000;border-bottom:2px solid #000;transform:rotate(-45deg)}
.pw-passos span{font-weight:500}
@keyframes pw-passo1{0%,10%{opacity:.4;border-color:rgba(255,255,255,.06)}15%,92%{opacity:1;border-color:rgba(79,163,247,.6)}100%{opacity:.4;border-color:rgba(255,255,255,.06)}}@keyframes pw-passo2{0%,34%{opacity:.4;border-color:rgba(255,255,255,.06)}39%,92%{opacity:1;border-color:rgba(79,163,247,.6)}100%{opacity:.4;border-color:rgba(255,255,255,.06)}}@keyframes pw-passo3{0%,58%{opacity:.4;border-color:rgba(255,255,255,.06)}63%,92%{opacity:1;border-color:rgba(79,163,247,.6)}100%{opacity:.4;border-color:rgba(255,255,255,.06)}}
.pw-equipa{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#9aa3ae}
.pw-caras{display:flex}
.pw-caras i{width:24px;height:24px;border-radius:50%;margin-left:-7px;border:2px solid #111317;background:#2a3140}
.pw-caras i:first-child{margin-left:0}
.pw-caras i:nth-child(2){background:#334058}.pw-caras i:nth-child(3){background:#3d5476}.pw-caras i:nth-child(4){background:#4a6a99}.pw-caras i:nth-child(5){background:var(--acento)}

/* ---------- caso: ajudamos empresas a crescer ---------- */
.caso{position:relative;padding:210px 0 40px}
.caso h2{margin:0 0 55px;text-align:center;font-size:clamp(40px,5vw,72px);font-weight:500;line-height:1;letter-spacing:-.04em;text-wrap:balance;
  color:var(--branco);padding:0 24px}
.blobs{display:grid;grid-template-columns:minmax(0,684fr) minmax(0,330fr) minmax(0,330fr);grid-template-rows:308px 308px;column-gap:24px;row-gap:18px;padding:0 24px;max-width:1440px;margin:0 auto}
.blob{border-radius:32px;overflow:hidden;position:relative}
.img-blob{grid-row:1/3;background-color:#16181c;background-size:100% 140%;background-position:50% 100%;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 18px)}
.logo-blob{background:#e6e6e6;display:grid;place-items:center;color:#555;font-size:15px;text-align:center;padding:24px}
.secondary-img-blob{background-color:#1d2026;background-size:100% 160%;background-position:50% 100%;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 18px)}
.detail-blob{grid-column:2/4;background:var(--acento);color:#000;padding:36px 34px 30px;display:flex;flex-direction:column;justify-content:flex-end}
.detail-blob p{margin:0;font-size:28px;font-weight:500;line-height:1.05;letter-spacing:-.01em;max-width:620px}
.detail-blob a{margin-top:16px;display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500}
.blob .marca-dagua{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:32px;color:rgba(255,255,255,.45);font-size:15px;line-height:1.5}

/* ---------- especialidades ---------- */
.especialidades{padding:120px 0 144px}
.especialidades .env{display:grid;grid-template-columns:364px minmax(0,618px);column-gap:64px;align-items:start;padding-left:max(181px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
.especialidades .rot{grid-column:1/-1;margin:0 0 24px;color:var(--acento);font-size:32px;line-height:42px;font-weight:500;letter-spacing:-.02em}
.especialidades ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
/* cada especialidade: nome, uma linha de apoio e uma seta; a activa é um cartão escuro com o fio de luz,
   e uma barra fina mostra quanto falta para passar à seguinte */
.especialidades li button{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 14px;width:100%;
  text-align:left;background:transparent;border:0;color:#fff;cursor:pointer;padding:16px 18px;border-radius:16px;opacity:.5;
  transition:opacity .35s,background-color .35s}
.especialidades li button:hover,.especialidades li button:focus-visible{opacity:.9}
.especialidades li button[aria-selected="true"]{opacity:1;background:#0e1014}
.es-nome{font-size:clamp(20px,1.75vw,25px);font-weight:500;line-height:1.15;letter-spacing:-.02em}
.es-desc{grid-column:1;font-size:14px;line-height:1.3;color:#8f9aa8}
.especialidades li button[aria-selected="true"] .es-desc{color:#9fd0ff}
.es-seta{grid-row:1/3;grid-column:2;width:20px;height:20px;color:var(--acento);opacity:0;transform:translateX(-6px);
  transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1)}
.especialidades li button:hover .es-seta,.especialidades li button[aria-selected="true"] .es-seta{opacity:1;transform:none}
.es-prog{grid-column:1/-1;height:2px;margin-top:10px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;display:none}
.especialidades.auto li button[aria-selected="true"] .es-prog{display:block}
.es-prog b{display:block;height:100%;background:var(--acento);transform-origin:left;transform:scaleX(0)}
.especialidades.auto li button[aria-selected="true"] .es-prog b{animation:es-prog 8s linear forwards}
.especialidades.pausa .es-prog b,.especialidades.fora .es-prog b{animation-play-state:paused!important}
@keyframes es-prog{to{transform:scaleX(1)}}
.espec-visual{position:relative;height:706px;margin-top:8px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.03)}
/* ---------- as especialidades: cada painel mostra o seu assunto a acontecer.
   As cenas são decorativas (aria-hidden); o texto de cada uma está no painel para quem
   lê com leitor de ecrã e para os motores de busca. Tudo anima com transform e opacity. */
.painel{position:absolute;inset:0;z-index:1;outline:none}
.painel .p-rot,.painel .p-entra,.painel .p-no,.painel .p-sai{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.painel .p-texto{position:absolute;left:0;right:0;bottom:34px;margin:0 auto;padding:0 40px;max-width:54ch;text-align:center;color:#d4d4d4;font-size:17px;line-height:1.45}
.painel.entra .cena,.painel.entra .p-texto{animation:painel-entra .7s cubic-bezier(.16,1,.3,1) both}
.painel.entra .p-texto{animation-delay:.12s}
@keyframes painel-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cena{position:absolute;left:30px;right:30px;top:30px;bottom:150px;display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1.3;color:#e8e8e8;--ciclo:8s}
.cena p{margin:0}
.cena ul{list-style:none;margin:0;padding:0}
.c-cartao{background:#111317;border:1px solid rgba(255,255,255,.1);border-radius:14px}
.c-rot{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8f9aa8}
.c-visto{position:relative;flex:none;width:18px;height:18px;border-radius:50%;background:var(--acento)}
.c-visto::after,.op-lista li i::after,.dg-lista li i::after,.tq-ok::after{content:"";position:absolute;left:5px;top:5px;width:7px;height:4px;
  border-left:2px solid #000;border-bottom:2px solid #000;transform:rotate(-45deg)}

/* 1 · tráfego pago: anúncios a correr em três plataformas, contactos a chegar */
.cena-trafego{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:center}
.ct-esq{display:grid;gap:16px}
.ct-linha{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px}
.ct-plat{padding:8px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:#0b0c0f;font-weight:500;white-space:nowrap}
.ct-pista{position:relative;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(79,163,247,.12),rgba(79,163,247,.5))}
.ct-pista b{position:absolute;inset:0;transform:translateX(-100%);opacity:0;animation:ct-corre 2.6s linear infinite}
.ct-pista b::after{content:"";position:absolute;right:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#d8ecff}
.ct-pista b:nth-child(2){animation-delay:-.87s}
.ct-pista b:nth-child(3){animation-delay:-1.73s}
.ct-linha:nth-of-type(2) .ct-pista b{animation-duration:3.1s}
.ct-linha:nth-of-type(3) .ct-pista b{animation-duration:2.2s}
@keyframes ct-corre{0%{transform:translateX(-100%);opacity:0}12%,85%{opacity:1}100%{transform:translateX(0);opacity:0}}
.ct-dir{padding:16px;display:grid;gap:9px}
.ct-novo{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;background:#181b21;opacity:0;animation:ct-chega1 var(--ciclo) cubic-bezier(.16,1,.3,1) infinite}
.ct-novo:nth-of-type(1){animation-name:ct-chega1}
.ct-novo:nth-of-type(2){animation-name:ct-chega2}
.ct-novo:nth-of-type(3){animation-name:ct-chega3}
.ct-novo i{flex:none;width:18px;height:18px;border-radius:50%;border:1px solid rgba(79,163,247,.7);background:rgba(79,163,247,.18)}
.ct-novo span{flex:1;font-weight:500}
.ct-novo em{font-style:normal;font-size:11px;color:#8f9aa8}
.ct-medido{display:flex;align-items:center;gap:8px;margin-top:4px;padding-top:11px;border-top:1px solid rgba(255,255,255,.08);color:#9fd0ff;font-size:12px}
.ct-medido i{position:relative;flex:none;width:16px;height:16px;border-radius:50%;background:var(--acento)}
.ct-medido i::after{content:"";position:absolute;left:4px;top:4px;width:6px;height:3px;border-left:2px solid #000;border-bottom:2px solid #000;transform:rotate(-45deg)}

/* 2 · criativos: três formatos em teste; um fica, os outros saem */
.cena-criativos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end;max-width:470px;margin:0 auto}
.cc-c{position:relative;padding:10px 10px 14px;border-radius:16px;background:#111317;border:1px solid rgba(255,255,255,.1);text-align:center}
.cc-ganha{animation:cc-ganha var(--ciclo) cubic-bezier(.16,1,.3,1) infinite}
.cc-perde{animation:cc-perde var(--ciclo) ease infinite}
@keyframes cc-ganha{0%,56%{transform:none;border-color:rgba(255,255,255,.1)}62%,92%{transform:translateY(-6px);border-color:var(--acento)}100%{transform:none;border-color:rgba(255,255,255,.1)}}
@keyframes cc-perde{0%,56%{opacity:1}62%,92%{opacity:.35}100%{opacity:1}}
.cc-ecra{position:relative;aspect-ratio:9/13;border-radius:10px;background:#1a1d23;overflow:hidden;display:grid;place-items:center}
.cc-v i{width:18px;height:22px;margin-left:5px;background:#d8ecff;clip-path:polygon(0 0,100% 50%,0 100%)}
.cc-i i:first-child{position:absolute;right:20%;top:20%;width:14px;height:14px;border-radius:50%;background:#9fd0ff}
.cc-i i:last-child{position:absolute;left:0;right:0;bottom:0;height:46%;background:rgba(79,163,247,.5);clip-path:polygon(0 100%,0 70%,30% 20%,52% 62%,70% 38%,100% 80%,100% 100%)}
.cc-t{display:grid;align-content:center;gap:8px;padding:0 16%}
.cc-t i{display:block;height:6px;border-radius:3px;background:#3a4250}
.cc-t i:last-child{width:60%}
.cc-c p{margin:10px 0 8px;font-weight:600}
.cc-barra{height:6px;border-radius:3px;background:#20242c;overflow:hidden}
.cc-barra b{display:block;height:100%;background:var(--acento);transform-origin:left;transform:scaleX(0);animation:cc-enche1 var(--ciclo) cubic-bezier(.3,.7,.3,1) infinite}
.cc-c:nth-child(2) .cc-barra b{animation-name:cc-enche2}
.cc-c:nth-child(3) .cc-barra b{animation-name:cc-enche3}
.cc-tag{position:absolute;top:-12px;left:50%;padding:5px 11px;border-radius:999px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;opacity:0;transform:translate(-50%,4px);animation:cc-tag var(--ciclo) cubic-bezier(.16,1,.3,1) infinite}
.cc-ganha .cc-tag{background:var(--acento);color:#000}
.cc-perde .cc-tag{background:#2a2e36;color:#cfcfcf}
@keyframes cc-tag{0%,58%{opacity:0;transform:translate(-50%,4px)}64%,92%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}

/* 3 · traqueamento: três fontes desenham a mesma curva; depois, o relatório do mês */
.cena-traq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:16px;align-items:center}
.tq-fontes{display:grid;gap:10px}
.tq-f{display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:6px 10px;padding:11px 12px;align-items:center}
.tq-f span{font-weight:600;font-size:12px}
.tq-f svg{grid-column:1;width:100%;height:28px;overflow:visible}
.tq-f path{fill:none;stroke:var(--acento);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:160;stroke-dashoffset:160;
  animation:tq-risca1 var(--ciclo) ease-out infinite}
.tq-ok{position:relative;grid-row:1/3;grid-column:2;width:20px;height:20px;border-radius:50%;background:var(--acento);transform:scale(0);
  animation:tq-ok1 var(--ciclo) cubic-bezier(.16,1,.3,1) infinite}
.tq-f:nth-child(2) path{animation-name:tq-risca2}
.tq-f:nth-child(2) .tq-ok{animation-name:tq-ok2}
.tq-f:nth-child(3) path{animation-name:tq-risca3}
.tq-f:nth-child(3) .tq-ok{animation-name:tq-ok3}
.tq-rel{padding:16px;display:grid;gap:9px;opacity:0;transform:translateX(16px);animation:tq-rel var(--ciclo) cubic-bezier(.16,1,.3,1) infinite}
@keyframes tq-rel{0%,52%{opacity:0;transform:translateX(16px)}60%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.tq-barras{display:flex;align-items:flex-end;gap:7px;height:70px;margin:4px 0}
.tq-barras b{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--acento),rgba(79,163,247,.3));transform-origin:bottom;transform:scaleY(0);
  animation:tq-barra var(--ciclo) cubic-bezier(.16,1,.3,1) infinite}
.tq-barras b:nth-child(1){height:45%}.tq-barras b:nth-child(2){height:70%}.tq-barras b:nth-child(3){height:55%}.tq-barras b:nth-child(4){height:88%}.tq-barras b:nth-child(5){height:66%}
@keyframes tq-barra{0%,56%{transform:scaleY(0)}68%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.tq-l{display:block;height:6px;border-radius:3px;background:#2a2f38}
.tq-curta{width:55%}
.tq-bate{display:flex;align-items:center;gap:8px;margin-top:4px;color:#9fd0ff;font-size:12px}
.tq-bate i{position:relative;flex:none;width:16px;height:16px;border-radius:50%;background:var(--acento)}
.tq-bate i::after{content:"";position:absolute;left:4px;top:4px;width:6px;height:3px;border-left:2px solid #000;border-bottom:2px solid #000;transform:rotate(-45deg)}

/* 4 · quadro de contactos: um contacto do WhatsApp passa de coluna em coluna até fechar */
.kq-colunas{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%}
.kq-col{display:grid;align-content:start;gap:8px;min-height:270px;padding:10px 8px;border-radius:12px;background:#0f1114;border:1px solid rgba(255,255,255,.07)}
.kq-col .c-rot{font-size:10px;letter-spacing:.1em;padding:0 2px 4px}
.kq-fant{display:block;height:48px;border-radius:9px;background:#16191e;border:1px solid rgba(255,255,255,.05)}
.kq-fant:first-of-type{margin-top:78px}
.kq-cartao{position:absolute;left:8px;top:38px;width:calc((100% - 30px) / 4 - 16px);display:grid;gap:4px;padding:9px 10px;border-radius:10px;
  background:#1a1f27;border:1px solid rgba(79,163,247,.55);font-size:11px;animation:kq-anda var(--ciclo) cubic-bezier(.65,0,.35,1) infinite}
.kq-cartao b{font-size:12px;font-weight:600}
.kq-origem{justify-self:start;padding:2px 7px;border-radius:999px;background:rgba(79,163,247,.16);color:#9fd0ff;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.kq-meta{display:flex;align-items:center;gap:5px;color:#8f9aa8;font-size:10px}
.kq-meta i{width:6px;height:6px;border-radius:50%;background:var(--acento)}
.kq-feito{position:absolute;right:-6px;top:-10px;padding:3px 8px;border-radius:999px;background:var(--acento);color:#000;font-size:10px;font-weight:700;
  opacity:0;animation:kq-feito var(--ciclo) ease infinite}
@keyframes kq-anda{0%{opacity:0;transform:translate(0,-14px)}6%,20%{opacity:1;transform:translate(0,0)}28%,42%{transform:translate(calc(100% + 26px),0)}
  50%,64%{transform:translate(calc(200% + 52px),0)}72%,92%{opacity:1;transform:translate(calc(300% + 78px),0)}100%{opacity:0;transform:translate(calc(300% + 78px),0)}}
@keyframes kq-anda-m{0%{opacity:0;transform:translate(0,-14px)}6%,20%{opacity:1;transform:translate(0,0)}28%,42%{transform:translate(calc(100% + 18px),0)}
  50%,64%{transform:translate(calc(200% + 36px),0)}72%,92%{opacity:1;transform:translate(calc(300% + 54px),0)}100%{opacity:0;transform:translate(calc(300% + 54px),0)}}
@keyframes kq-feito{0%,74%{opacity:0}78%,92%{opacity:1}100%{opacity:0}}

/* 5 · operações e IA: o processo a ficar feito, com as tarefas automáticas marcadas */
.op-lista{width:min(100%,430px);margin:0 auto;padding:18px 18px 10px}
.op-prog{height:4px;border-radius:2px;background:#20242c;margin:12px 0 6px;overflow:hidden}
.op-prog b{display:block;height:100%;background:var(--acento);transform-origin:left;transform:scaleX(0);animation:op-prog var(--ciclo) linear infinite}
@keyframes op-prog{0%,8%{transform:scaleX(0)}70%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.op-lista li{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.op-lista li:last-child{border-bottom:0}
.op-lista li i{position:relative;flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(255,255,255,.35);animation:op-caixa1 var(--ciclo) ease infinite}
.op-lista li i::after{left:4px;top:4px;opacity:0;animation:op-visto1 var(--ciclo) ease infinite}
.op-lista li span{flex:1;animation:op-texto1 var(--ciclo) ease infinite}
.op-lista li em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;padding:3px 7px;border-radius:999px;background:rgba(79,163,247,.15);color:#9fd0ff;border:1px solid rgba(79,163,247,.4)}
.op-lista li:nth-child(2) i{animation-name:op-caixa2}
.op-lista li:nth-child(2) i::after{animation-name:op-visto2}
.op-lista li:nth-child(2) span{animation-name:op-texto2}
.op-lista li:nth-child(3) i{animation-name:op-caixa3}
.op-lista li:nth-child(3) i::after{animation-name:op-visto3}
.op-lista li:nth-child(3) span{animation-name:op-texto3}
.op-lista li:nth-child(4) i{animation-name:op-caixa4}
.op-lista li:nth-child(4) i::after{animation-name:op-visto4}
.op-lista li:nth-child(4) span{animation-name:op-texto4}
.op-lista li:nth-child(5) i{animation-name:op-caixa5}
.op-lista li:nth-child(5) i::after{animation-name:op-visto5}
.op-lista li:nth-child(5) span{animation-name:op-texto5}

/* 6 · workshops de IA: a equipa pergunta, a IA responde, a equipa revê */
.ws-chat{width:min(100%,450px);margin:0 auto;padding:16px;display:grid;gap:14px}
.ws-topo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ws-cadeado{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:#9fd0ff;padding:4px 10px;border-radius:999px;border:1px solid rgba(79,163,247,.4)}
.ws-cadeado i{position:relative;width:9px;height:7px;margin-top:3px;border:1.5px solid currentColor;border-radius:2px}
.ws-cadeado i::before{content:"";position:absolute;left:0;top:-6px;width:3px;height:4px;border:1.5px solid currentColor;border-bottom:0;border-radius:3px 3px 0 0}
.ws-eu{justify-self:end;max-width:84%;padding:11px 14px;border-radius:14px 14px 4px 14px;background:var(--acento);color:#000;font-weight:500;
  clip-path:inset(0 100% 0 0);animation:ws-escreve var(--ciclo) steps(30,end) infinite}
@keyframes ws-escreve{0%,3%{clip-path:inset(0 100% 0 0)}24%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
.ws-ia{justify-self:start;width:80%;padding:13px 14px;border-radius:14px 14px 14px 4px;background:#1a1d23;display:grid;gap:9px}
.ws-ia i{display:block;height:7px;border-radius:4px;background:#3a4250;transform-origin:left;transform:scaleX(0);animation:ws-linha1 var(--ciclo) cubic-bezier(.16,1,.3,1) infinite}
.ws-ia i:nth-of-type(1){animation-name:ws-linha1}
.ws-ia i:nth-of-type(2){animation-name:ws-linha2}
.ws-ia i:nth-of-type(3){animation-name:ws-linha3}
.ws-ia i:nth-of-type(4){animation-name:ws-linha4}
.ws-curta{width:55%}
.ws-nota{display:flex;align-items:center;gap:8px;font-size:12px;color:#9fd0ff;opacity:0;animation:ws-nota var(--ciclo) ease infinite}
.ws-nota i{position:relative;flex:none;width:16px;height:16px;border-radius:50%;background:var(--acento)}
.ws-nota i::after{content:"";position:absolute;left:4px;top:4px;width:6px;height:3px;border-left:2px solid #000;border-bottom:2px solid #000;transform:rotate(-45deg)}
@keyframes ws-nota{0%,60%{opacity:0}66%,92%{opacity:1}100%{opacity:0}}

/* 7 · diagnóstico: trinta minutos a correr enquanto se olha para cada parte */
.cena-diag{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.dg-relogio{position:relative;width:156px;height:156px;display:grid;place-items:center;align-content:center;text-align:center}
.dg-relogio svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.dg-fundo{fill:none;stroke:#20242c;stroke-width:8}
.dg-arco{fill:none;stroke:var(--acento);stroke-width:8;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;animation:dg-arco var(--ciclo) linear infinite}
@keyframes dg-arco{0%{stroke-dashoffset:327}85%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:327}}
.dg-relogio b{position:relative;font-family:var(--display);font-weight:700;font-size:40px;line-height:1;letter-spacing:-.04em;color:#fff}
.dg-relogio span{position:relative;margin-top:4px;font-size:10px;color:#8f9aa8;text-transform:uppercase;letter-spacing:.14em}
.dg-lado{display:grid;gap:14px}
.dg-lista li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-weight:500}
.dg-lista li i{position:relative;flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(255,255,255,.35);animation:dg-caixa1 var(--ciclo) ease infinite}
.dg-lista li i::after{left:4px;top:4px;opacity:0;animation:dg-visto1 var(--ciclo) ease infinite}
.dg-lista li:nth-child(2) i{animation-name:dg-caixa2}
.dg-lista li:nth-child(2) i::after{animation-name:dg-visto2}
.dg-lista li:nth-child(3) i{animation-name:dg-caixa3}
.dg-lista li:nth-child(3) i::after{animation-name:dg-visto3}
.dg-res{padding:14px;display:grid;gap:7px;opacity:0;transform:translateY(10px);animation:dg-res var(--ciclo) cubic-bezier(.16,1,.3,1) infinite}
.dg-res p:not(.c-rot){display:flex;align-items:center;gap:8px;font-weight:600;color:#fff}
.dg-res p:not(.c-rot)::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acento)}
@keyframes dg-res{0%,62%{opacity:0;transform:translateY(10px)}68%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes ct-chega1{0%,10%{opacity:0;transform:translateY(8px)}14%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(8px)}}
@keyframes ct-chega2{0%,32%{opacity:0;transform:translateY(8px)}36%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(8px)}}
@keyframes ct-chega3{0%,54%{opacity:0;transform:translateY(8px)}58%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(8px)}}
@keyframes cc-enche1{0%,6%{transform:scaleX(0)}52%,92%{transform:scaleX(0.86)}100%{transform:scaleX(0)}}
@keyframes cc-enche2{0%,6%{transform:scaleX(0)}52%,92%{transform:scaleX(0.46)}100%{transform:scaleX(0)}}
@keyframes cc-enche3{0%,6%{transform:scaleX(0)}52%,92%{transform:scaleX(0.3)}100%{transform:scaleX(0)}}
@keyframes tq-risca1{0%,4%{stroke-dashoffset:160}18%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:160}}
@keyframes tq-ok1{0%,18%{transform:scale(0)}22%,92%{transform:scale(1)}97%,100%{transform:scale(0)}}
@keyframes tq-risca2{0%,18%{stroke-dashoffset:160}32%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:160}}
@keyframes tq-ok2{0%,32%{transform:scale(0)}36%,92%{transform:scale(1)}97%,100%{transform:scale(0)}}
@keyframes tq-risca3{0%,32%{stroke-dashoffset:160}46%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:160}}
@keyframes tq-ok3{0%,46%{transform:scale(0)}50%,92%{transform:scale(1)}97%,100%{transform:scale(0)}}
@keyframes op-caixa1{0%,10%{background:transparent;border-color:rgba(255,255,255,.35)}14%,92%{background:var(--acento);border-color:var(--acento)}97%,100%{background:transparent;border-color:rgba(255,255,255,.35)}}
@keyframes op-visto1{0%,10%{opacity:0}14%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes op-texto1{0%,10%{color:#e8e8e8}14%,92%{color:#7d838c}97%,100%{color:#e8e8e8}}
@keyframes op-caixa2{0%,24%{background:transparent;border-color:rgba(255,255,255,.35)}28%,92%{background:var(--acento);border-color:var(--acento)}97%,100%{background:transparent;border-color:rgba(255,255,255,.35)}}
@keyframes op-visto2{0%,24%{opacity:0}28%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes op-texto2{0%,24%{color:#e8e8e8}28%,92%{color:#7d838c}97%,100%{color:#e8e8e8}}
@keyframes op-caixa3{0%,38%{background:transparent;border-color:rgba(255,255,255,.35)}42%,92%{background:var(--acento);border-color:var(--acento)}97%,100%{background:transparent;border-color:rgba(255,255,255,.35)}}
@keyframes op-visto3{0%,38%{opacity:0}42%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes op-texto3{0%,38%{color:#e8e8e8}42%,92%{color:#7d838c}97%,100%{color:#e8e8e8}}
@keyframes op-caixa4{0%,52%{background:transparent;border-color:rgba(255,255,255,.35)}56%,92%{background:var(--acento);border-color:var(--acento)}97%,100%{background:transparent;border-color:rgba(255,255,255,.35)}}
@keyframes op-visto4{0%,52%{opacity:0}56%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes op-texto4{0%,52%{color:#e8e8e8}56%,92%{color:#7d838c}97%,100%{color:#e8e8e8}}
@keyframes op-caixa5{0%,66%{background:transparent;border-color:rgba(255,255,255,.35)}70%,92%{background:var(--acento);border-color:var(--acento)}97%,100%{background:transparent;border-color:rgba(255,255,255,.35)}}
@keyframes op-visto5{0%,66%{opacity:0}70%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes op-texto5{0%,66%{color:#e8e8e8}70%,92%{color:#7d838c}97%,100%{color:#e8e8e8}}
@keyframes ws-linha1{0%,30%{transform:scaleX(0)}34%,92%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
@keyframes ws-linha2{0%,37%{transform:scaleX(0)}41%,92%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
@keyframes ws-linha3{0%,44%{transform:scaleX(0)}48%,92%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
@keyframes ws-linha4{0%,51%{transform:scaleX(0)}55%,92%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
@keyframes dg-caixa1{0%,16%{background:transparent;border-color:rgba(255,255,255,.35)}20%,92%{background:var(--acento);border-color:var(--acento)}97%,100%{background:transparent;border-color:rgba(255,255,255,.35)}}
@keyframes dg-visto1{0%,16%{opacity:0}20%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes dg-caixa2{0%,34%{background:transparent;border-color:rgba(255,255,255,.35)}38%,92%{background:var(--acento);border-color:var(--acento)}97%,100%{background:transparent;border-color:rgba(255,255,255,.35)}}
@keyframes dg-visto2{0%,34%{opacity:0}38%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes dg-caixa3{0%,52%{background:transparent;border-color:rgba(255,255,255,.35)}56%,92%{background:var(--acento);border-color:var(--acento)}97%,100%{background:transparent;border-color:rgba(255,255,255,.35)}}
@keyframes dg-visto3{0%,52%{opacity:0}56%,92%{opacity:1}97%,100%{opacity:0}}

/* ---------- marcas ---------- */
.marcas{padding:184px 0 120px}
.marcas h2{margin:0 auto 56px;max-width:1168px;padding:0 24px;text-align:center;font-size:clamp(40px,5vw,72px);font-weight:500;line-height:1;letter-spacing:-.04em;text-wrap:balance}
.parede{display:grid;grid-template-columns:repeat(20,1fr);gap:16px;max-width:1144px;margin:0 auto;padding:0 24px}
.tile{background:#fff;border-radius:24px;display:grid;place-items:center;text-align:center;color:#8a8a8a;font-size:14px;line-height:1.35;padding:12px}
.tile:nth-child(-n+4){grid-column:span 5;height:186px}
.tile:nth-child(n+5){grid-column:span 4;height:146px}
.parede-nota{margin:26px auto 0;text-align:center;color:var(--cinza-texto);font-size:15px;max-width:60ch;padding:0 24px}

/* ---------- recusas (no lugar da secção de carreiras) ---------- */
.recusa{position:relative;padding:0 0 40px}
.recusa .env{display:grid;grid-template-columns:minmax(0,588fr) minmax(0,532fr);column-gap:80px;align-items:center}
.recusa .col-visual{height:441px}
.recusa h2{margin:0;font-size:clamp(44px,5vw,72px);font-weight:500;line-height:1;letter-spacing:-.04em;text-transform:uppercase}
.recusa .corpo-r{margin-top:16px;font-size:28px;line-height:1.3;color:#fff;max-width:532px}
.recusa ul{list-style:none;margin:22px 0 0;padding:0;max-width:560px}
.recusa li{padding:12px 0;border-top:1px solid var(--linha);color:var(--cinza-texto);font-size:16px;line-height:1.35}
.recusa li b{color:#fff;font-weight:700}

/* ---------- rodapé com o convite ---------- */
.rodape{padding:136px 0 32px}
.rodape .linha1{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start}
.rodape h2{margin:0;max-width:467px;font-size:clamp(46px,5vw,72px);font-weight:500;line-height:1;letter-spacing:-.04em}
.rodape .botao{font-size:20px;line-height:24px;padding:17px 26px 17px 32px;border-radius:32px}
.rodape .linha1 p{margin:16px 0 32px;font-size:20px;max-width:500px;line-height:1.5}
.rodape .logo{font-size:64px}
.sociais{display:flex;gap:18px;margin-top:22px;justify-content:flex-end}
.sociais a{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);border-radius:50%;font-size:12px;font-weight:700}
.sociais a:hover{border-color:var(--acento);color:var(--acento)}
.legal{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:64px;font-size:14px;color:#fff}
.legal a:hover{color:var(--acento)}
.legal .copia{width:100%;font-size:12px;margin-top:8px}

/* ---------- a página de contacto (medidas da página de referência a 1440) ---------- */
.contacto{padding:96px 0 14vh}
.contacto .env{display:grid;grid-template-columns:minmax(0,456fr) minmax(0,164fr) minmax(0,480fr) minmax(0,100fr);align-items:start}
.contacto .lado{grid-column:1}
.contacto .cartao{grid-column:3}
.contacto h2{margin:0 0 20px;font-size:48px;font-weight:500;line-height:1;letter-spacing:-.04em;text-wrap:balance}
.contacto .intro{margin:0 0 16px;font-size:28px;font-weight:500;line-height:1;letter-spacing:-.04em}
.contacto .parceiros{margin:40px 0 16px;color:rgba(255,255,255,.6);font-size:16px;line-height:1;max-width:440px}
.contacto .mini{display:grid;grid-template-columns:repeat(3,minmax(0,110px));gap:14px 26px}
.contacto .mini span{height:34px;display:grid;place-items:center;border-radius:6px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.38);font-size:11px;letter-spacing:.04em}
.contacto .info{margin-top:38px;display:grid;gap:24px}
.contacto .info span{display:block;color:rgba(255,255,255,.6);font-size:14px;line-height:1;margin-bottom:8px}
.contacto .info a{color:var(--acento);font-size:18px;line-height:1;text-decoration:underline;text-underline-offset:3px}
.cartao{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:24px}
.f .obrig{margin:0 0 14px;color:rgba(255,255,255,.6);font-size:12px;line-height:1.2}
.f .campo{margin:0 0 16px}
.f input[type=text],.f input[type=email],.f input[type=tel],.f textarea{display:block;width:100%;height:51px;margin:0;background:transparent;
  border:1px solid rgba(255,255,255,.6);border-radius:8px;color:#fff;font:inherit;font-size:16px;line-height:normal;padding:14px 16px;transition:border-color .25s}
.f textarea{height:120px;resize:vertical}
.f ::placeholder{color:rgba(255,255,255,.6);opacity:1}
.f input:focus,.f textarea:focus{border-color:var(--acento);outline:none}
.f input:user-invalid,.f textarea:user-invalid{border-color:#ff7b7b}
.f fieldset{border:0;margin:21px 0 0;padding:0;min-width:0}
.f legend{padding:0;margin:0 0 8px;font-size:14px;line-height:20px;color:#fff}
.f .opcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px;margin:0;padding:0;list-style:none}
.f .opcoes label{display:flex;align-items:center;gap:12px;min-height:26px;margin:0 0 4px;font-size:14px;line-height:1.25;color:#fff;cursor:pointer}
.f .opcoes input{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:0;border:1px solid rgba(255,255,255,.4);border-radius:4px;
  background:transparent;cursor:pointer;display:grid;place-items:center;transition:background-color .2s,border-color .2s}
.f .opcoes input:checked{background:var(--acento);border-color:var(--acento)}
.f .opcoes input:checked::after{content:"";width:10px;height:5px;border-left:2px solid #000;border-bottom:2px solid #000;transform:translateY(-1px) rotate(-45deg)}
.f .opcoes input:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.f .legal-f{margin:22px 0 0;color:rgba(255,255,255,.6);font-size:11px;line-height:1.45}
.f .legal-f a{color:var(--acento);font-weight:700}
.f .enviar{margin-top:24px;background:var(--acento);color:#000;border:0;border-radius:50px;padding:16px 32px;font:inherit;font-size:16px;font-weight:600;
  line-height:normal;cursor:pointer;transition:background-color .3s}
.f .enviar:hover{background:var(--acento-forte)}
.f .estado{margin:14px 0 0;font-size:14px;color:#ff9b9b;min-height:1.4em}
.obrigado{padding:8px 0 12px}
.obrigado h3{margin:0;color:var(--acento);font-size:48px;font-weight:500;line-height:1;letter-spacing:-.04em}
.obrigado p{margin:16px 0 0;font-size:28px;font-weight:500;line-height:1.05;letter-spacing:-.03em}

/* ---------- o país em pontos (no lugar do mapa dos escritórios) ---------- */
.pais{padding:2vh 0 10vh;text-align:center}
.pais h2{margin:0 0 40px;padding:0 24px;font-size:42px;font-weight:500;line-height:1;letter-spacing:-.04em;text-wrap:balance}
.pais .mapa{position:relative;height:min(72vh,640px);max-width:1408px;margin:0 auto}
.pais .mapa canvas{position:absolute;inset:0;width:100%;height:100%}
.canais{display:flex;justify-content:center;flex-wrap:wrap;gap:20px 64px;margin-top:36px;padding:0 24px}
.canais a{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.canais a span{font-size:14px;line-height:1;color:rgba(255,255,255,.6)}
.canais a b{font-size:24px;font-weight:500;line-height:1;letter-spacing:-.04em;transition:color .25s}
.canais a:hover b{color:var(--acento)}
.rodape.simples .linha1{grid-template-columns:1fr}
.rodape.simples .linha1 > div{text-align:right}

/* ---------- a página de obrigado (quem envia o formulário sem JavaScript chega aqui) ---------- */
.heroi.centrado{display:flex;align-items:center;justify-content:center}
.heroi.centrado .conteudo{padding-top:0}
.heroi h1.obrigado-tit{margin:0;color:var(--acento);font-family:var(--display);font-weight:700;font-size:clamp(34px,4.6vw,66px);line-height:1.05;letter-spacing:-.045em;text-wrap:balance}
.obrigado-sub{margin:18px 0 0;font-size:clamp(20px,2vw,28px);font-weight:500;line-height:1.2}
.obrigado-accoes{margin-top:38px;display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;justify-content:center}
.obrigado-volta{text-decoration:underline;text-underline-offset:4px}
.obrigado-volta:hover{color:var(--acento)}

/* ---------- consentimento: um cartão flutuante em baixo à esquerda.
   «Recusar» e «Aceitar» têm exactamente o mesmo peso: se recusar fosse mais
   difícil de ver do que aceitar, o consentimento não seria livre. As classes e o
   onclick vêm do script de consentimento do cabeçalho da página e não mudam. ---------- */
.consentimento{position:fixed;z-index:90;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));
  width:min(560px,calc(100vw - 32px));display:grid;gap:18px;padding:22px 22px 20px;border-radius:20px;
  background:#0d0e11;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.55);
  font-family:var(--texto);animation:consentimento-entra .6s cubic-bezier(.16,1,.3,1) both}
@keyframes consentimento-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.consentimento-texto strong{display:block;margin-bottom:6px;font-size:16px;font-weight:700;line-height:1.3;color:var(--branco)}
.consentimento-texto p{margin:0;font-size:14px;line-height:1.5;color:#c4c4c4}
.consentimento-texto a{color:var(--acento);text-decoration:underline;text-underline-offset:3px}
.consentimento-botoes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.consentimento .consentimento-botoes .botao{justify-content:center;gap:0;padding:13px 18px;border-radius:999px;font-size:15px;font-weight:500;
  background:transparent;color:var(--branco);border:1px solid rgba(255,255,255,.45);transition:background-color .25s,color .25s,border-color .25s}
.consentimento .consentimento-botoes .botao:hover{background:var(--acento);border-color:var(--acento);color:#000}

/* ---------- o fio de luz: um brilho azul que dá a volta aos botões principais e às bordas dos
   cartões. Só no azul e no ciano da logo (o efeito de origem roda por todas as cores, roxo
   incluído). Os botões do consentimento ficam de fora: recusar e aceitar têm o mesmo peso. ---------- */
@property --giro{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes giro{to{--giro:360deg}}
.botao,.f .enviar,.niveis,.cartao,.pv{position:relative}
.botao::before,.f .enviar::before,.niveis::before,.cartao::before,.espec-visual::before,.pv::before,.especialidades li button[aria-selected="true"]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--giro),rgba(79,163,247,0) 0deg,rgba(79,163,247,0) 210deg,var(--acento) 300deg,#c9edff 340deg,rgba(79,163,247,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:giro 5s linear infinite}
.botao::after,.f .enviar::after{content:"";position:absolute;inset:-5px;border-radius:inherit;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--giro),rgba(79,163,247,0) 0deg,rgba(79,163,247,0) 210deg,rgba(79,163,247,.75) 300deg,rgba(170,228,255,.7) 340deg,rgba(79,163,247,0) 360deg);
  filter:blur(10px);opacity:.55;transition:opacity .35s;animation:giro 5s linear infinite}
.botao:hover::after,.f .enviar:hover::after,.botao:focus-visible::after{opacity:1}
.botao:hover::before,.botao:hover::after,.f .enviar:hover::before,.f .enviar:hover::after{animation-duration:2.2s}
.botao.claro::before{background:conic-gradient(from var(--giro),rgba(79,163,247,0) 0deg,rgba(79,163,247,0) 210deg,var(--acento) 300deg,#2f7fd6 340deg,rgba(79,163,247,0) 360deg)}
.consentimento .botao::before,.consentimento .botao::after{content:none}
.espec-visual::before{border-radius:20px}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- cortes ---------- */
@media (max-width:1100px){
  :root{--gutter:40px}
  .pilula{display:none}
  .principal{grid-template-columns:1fr auto}
  .utilidades nav{gap:24px}
  .pilar{min-height:0;display:block;padding:12vh 0}
  .pilar .env,.recusa .env,.contacto .env{grid-template-columns:1fr;min-height:0;gap:32px}
  .recusa{padding-top:8vh}
  .recusa .col-visual{height:340px}
  .caso{padding-top:14vh}
  .especialidades{padding:90px 0}
  .especialidades .env{grid-template-columns:1fr}
  .espec-visual{height:620px;margin-top:24px}
  .marcas{padding:110px 0 90px}
  .rodape{padding-top:100px}
  .contacto .lado,.contacto .cartao{grid-column:1}
  .contacto{padding-top:72px}
  .contacto .env{gap:48px}
  .cartao{max-width:560px}
  .pilar .env{grid-template-rows:auto}
  .pilar .col-texto,.pilar.inverso .col-texto,.pilar .kpi-col,.pilar.inverso .kpi-col{grid-column:1;grid-row:auto}
  .pilar .col-visual,.pilar.inverso .col-visual{position:relative;top:auto;left:auto;width:auto;margin-top:0;height:380px}
  .pilar .col-visual::after{display:none}
  .pilar:has(.pv) .col-visual{display:none}
  .pilar .kpi-col:has(.pv){justify-items:stretch;gap:26px}
  .pilar .kpi-col:has(.pv) .kpi{align-items:flex-start}
  .pilar .kpi-col{justify-self:start;width:auto}
  .pilar .kpi{align-items:flex-start;text-align:left}
  .col-visual{height:380px}
  .blobs{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .img-blob{grid-column:1/3;grid-row:auto;min-height:380px}
  .logo-blob,.secondary-img-blob{min-height:240px}
  .detail-blob{grid-column:1/3;min-height:260px}
  .especialidades .env{grid-template-columns:1fr;padding-left:max(var(--gutter),env(safe-area-inset-left,0px))}
  .especialidades li button{padding:14px 16px}
  .parede{grid-template-columns:repeat(2,1fr)}
  .tile:nth-child(n){grid-column:auto;height:130px}
  .rodape .linha1{grid-template-columns:1fr}
  .sociais{justify-content:flex-start}
}
@media (max-width:640px){
  :root{--gutter:20px}
  .lema{font-size:calc((100vw - 56px) / 4.8)}
  .niveis::before{content:none}
  .pp-fases{grid-template-columns:minmax(0,1fr)}
  .pp-f1,.pp-f2,.pp-f3{grid-column:auto}
  .espec-visual{height:auto;min-height:0}
  .painel{position:relative;inset:auto;padding:22px 16px 24px}
  .cena{position:relative;left:auto;right:auto;top:auto;bottom:auto;min-height:250px;margin-bottom:20px;font-size:12px}
  .painel .p-texto{position:static;padding:0;max-width:none;text-align:left;font-size:16px}
  .cena-trafego,.cena-traq,.cena-diag{grid-template-columns:minmax(0,1fr)}
  .cena-diag{justify-items:center}
  .dg-lado{width:100%}
  .kq-colunas{gap:6px}
  .kq-col{min-height:210px;padding:8px 6px}
  .kq-fant:first-of-type{margin-top:58px}
  .kq-cartao{left:6px;width:calc((100% - 18px) / 4 - 12px);padding:7px 6px;animation-name:kq-anda-m}
  .kq-origem,.kq-meta{display:none}
  .kq-cartao b{font-size:10px}
  .utilidades{display:none}
  .principal{height:88px}
  .logo img{height:24px}
  .cta-topo .botao{padding:11px 14px 11px 18px;font-size:14px}
  .niveis{grid-template-columns:minmax(0,1fr);gap:8px;width:calc(100vw - 40px);border:0}
  .niveis a{border:1px solid var(--acento);font-size:16px}
  .leitura .rotulo{font-size:28px}
  .kpi{flex-direction:column;gap:6px}
  .blobs{grid-template-columns:1fr}
  .img-blob,.detail-blob{grid-column:auto}
  .logo-blob,.secondary-img-blob{min-height:200px}
  .detail-blob p{font-size:22px}
  .contacto{padding-top:48px}
  .contacto h2{font-size:40px}
  .contacto .intro{font-size:24px}
  .cartao{padding:20px}
  .obrigado h3{font-size:38px}
  .obrigado p{font-size:22px}
  .pais h2{font-size:32px}
  .pais .mapa{height:300px}
  .canais{gap:20px 32px}
  .rodape.simples .linha1 > div{text-align:left}
}
.contacto .info p{margin:0}
/* o que entra de lado (as imagens do caso, as fitas) não alarga a página */
.pilar,.recusa,.caso,.especialidades,.leitura,.pais{overflow-x:clip}
/* ---------- o menu no telemóvel e no tablet ---------- */
.menu-botao{display:none;width:44px;height:44px;margin-left:14px;border:0;background:transparent;cursor:pointer;position:relative;padding:0}
.menu-botao span{position:absolute;left:9px;right:9px;height:2px;background:#fff;border-radius:2px;transition:transform .45s cubic-bezier(.16,1,.3,1),top .45s cubic-bezier(.16,1,.3,1)}
.menu-botao span:first-child{top:16px}
.menu-botao span:last-child{top:26px}
.menu-botao[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.menu-botao[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
.menu-movel{position:fixed;left:0;right:0;bottom:0;top:calc(156px + env(safe-area-inset-top,0px));z-index:49;background:#000;overflow-y:auto;
  padding:28px max(var(--gutter),env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(var(--gutter),env(safe-area-inset-left,0px));
  display:flex;flex-direction:column;gap:34px}
.menu-movel .grandes{display:grid;gap:6px}
.menu-movel .grandes a{font-size:40px;font-weight:500;letter-spacing:-.04em;line-height:1.15}
.menu-movel .pequenos{display:grid;gap:14px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#cfcfcf}
.menu-movel a:hover{color:var(--acento)}
.menu-movel .botao{align-self:flex-start}
html.menu-aberto{overflow:hidden}
@media (max-width:1100px){
  .menu-botao{display:block}
  .principal{grid-template-columns:1fr auto auto}
}
@media (max-width:640px){
  .cta-topo{display:none}
  .principal{grid-template-columns:1fr auto}
  .menu-movel{top:calc(88px + env(safe-area-inset-top,0px))}
}
@media (min-width:1101px){.menu-movel{display:none!important}}
@media (min-width:1101px){.rodape .env{padding-left:max(136px,env(safe-area-inset-left,0px));padding-right:max(136px,env(safe-area-inset-right,0px))}}
/* margens laterais que respeitam a barra do sistema no telemóvel deitado */
.utilidades,.principal,.blobs,.parede,.caso h2,.marcas h2,.pais h2,.canais,.parede-nota,.heroi .conteudo{
  padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}

/* ---------- privacidade e cookies: página de leitura ----------
   Uma coluna de texto com um índice ao lado. O índice acende a secção em
   que se está (avance.js), e a linha por baixo do título é o mesmo azul que
   corre nas bordas dos cartões, aqui parado. */
.doc{padding:72px 0 40px}
.doc-cab{display:grid;gap:20px;padding-bottom:64px}
.doc-etiqueta,.doc-sobre{margin:0;font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--acento)}
.doc h1{margin:0;max-width:14ch;font-family:var(--display);font-weight:500;font-size:clamp(44px,6.2vw,96px);line-height:1;letter-spacing:-.045em;text-wrap:balance}
.doc-resumo{margin:8px 0 0;max-width:620px;font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:var(--cinza-texto)}
.doc-data{margin:0;font-size:14px;color:#7d838c}
.doc-fio{height:1px;background:linear-gradient(90deg,var(--acento),rgba(79,163,247,.3) 35%,rgba(255,255,255,.1) 75%)}
.doc-corpo{display:grid;grid-template-columns:220px minmax(0,720px);column-gap:clamp(48px,8vw,140px);align-items:start;padding-top:64px}
.doc-indice{position:sticky;top:32px}
.doc-indice p{margin:0 0 14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#7d838c}
.doc-indice ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.doc-indice a{display:block;padding:8px 0 8px 16px;border-left:1.5px solid var(--linha);color:var(--cinza-texto);transition:color .25s,border-color .25s}
.doc-indice a:hover{color:var(--branco);border-color:var(--branco)}
.doc-indice a[aria-current]{color:var(--branco);border-color:var(--acento)}
.doc-texto section{margin:0 0 56px;padding:0 0 56px;border-bottom:1px solid var(--linha);scroll-margin-top:32px}
.doc-texto section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.doc-sobre{margin-bottom:14px}
.doc-texto h2{margin:0 0 24px;font-family:var(--display);font-weight:500;font-size:clamp(26px,2.4vw,36px);line-height:1.1;letter-spacing:-.035em;text-wrap:balance}
.doc-texto p,.doc-texto li{font-size:18px;line-height:1.65;color:#c9ced6}
.doc-texto p{margin:0 0 18px}
.doc-texto p:last-child{margin-bottom:0}
.doc-texto strong{color:var(--branco);font-weight:600}
.doc-texto .chamada{margin:0 0 28px;padding-left:20px;border-left:2px solid var(--acento);font-size:20px;line-height:1.5;color:var(--branco)}
.doc-texto ul{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:14px}
.doc-texto li{position:relative;padding-left:26px}
.doc-texto li::before{content:"";position:absolute;left:0;top:.82em;width:12px;height:1.5px;background:var(--acento)}
.doc-texto .lig{color:var(--branco);text-decoration:underline;text-decoration-color:var(--acento);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:color .2s}
.doc-texto .lig:hover{color:var(--acento-forte)}
@media (max-width:1100px){
  .doc-corpo{grid-template-columns:minmax(0,720px);row-gap:40px}
  .doc-indice{position:static}
  .doc-indice ul{display:flex;flex-wrap:wrap;gap:8px}
  .doc-indice a{padding:8px 14px;border:1px solid var(--linha);border-radius:999px}
}
@media (max-width:640px){
  .doc{padding-top:40px}
  .doc-cab{padding-bottom:40px}
  .doc-corpo{padding-top:40px}
  .doc-texto section{margin-bottom:40px;padding-bottom:40px}
  .doc-texto p,.doc-texto li{font-size:17px}
  .doc-texto .chamada{font-size:18px}
}