/* ============================================================
   BASE PARTILHADA — Sequeira Agents IA
   Tokens, tipografia, navegação, botões e rodapé. Tudo o que é
   próprio de cada página fica no <style> dessa página.
   Não acrescentar aqui regras que só uma página usa.
   ============================================================ */

/* ---------- fontes autoalojadas ----------
   Sora e Inter são variáveis: um ficheiro por família cobre os
   pesos todos. Sem chamadas a servidores de terceiros — o site
   vende conformidade com o RGPD, não pode ir buscar fontes à Google. */
@font-face{
  font-family:'Sora';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/sora-400-latin.woff2) format('woff2');
  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:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/inter-400-latin.woff2) format('woff2');
  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;
}
/* Newsreader — a serifa dos titulos. Licenca SIL Open Font, o texto fica em
   fonts/OFL-Newsreader.txt e tem de acompanhar os ficheiros para onde quer
   que o site va. Os .woff2 aqui NAO sao os da Google tal e qual: o eixo do
   tamanho optico foi fixado em 30 (o desenho de titulo, mais fino e mais
   contrastado) e o peso limitado a 200-500, o que os poe em 60 e 67 KB em vez
   de 132 e 147. Se um dia for preciso um peso acima de 500, e preciso voltar
   a gerar o ficheiro — nao basta pedi-lo no CSS. */
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:200 500;font-display:swap;
  src:url(fonts/newsreader-display.woff2) format('woff2');
  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:'Newsreader';font-style:italic;font-weight:200 500;font-display:swap;
  src:url(fonts/newsreader-display-italic.woff2) format('woff2');
  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;
}

:root{
  --bg:#0b1120;
  --bg-2:#111a2e;
  --panel:#16213a;
  --ink:#eef4ff;
  --mut:#b3c2de;
  --faint:#8b9dbd;        /* clareado face ao #7c8dae para passar 4.5:1 sobre --bg */
  --blue:#3b82f6;
  --blue-2:#60a5fa;
  --line:rgba(125,165,255,.14);
  /* Filete que nasce e morre no vazio. Usado em vez de border em todo o site
     desde 13/09/2026 — uma borda a direito desenha uma caixa, isto não. */
  --filete:linear-gradient(90deg,transparent,var(--line) 16%,var(--line) 84%,transparent);
  --glow:rgba(59,130,246,.35);
  --ok:#3fcf8e;           /* estados de formulário */
  --erro:#ff8087;
  --grad:linear-gradient(92deg,#7ab5ff 0%,#38bdf8 55%,#7dd3fc 100%);
  --font-d:"Sora","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-t:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  /* A serifa e a voz editorial: titulos, marca e frases-manifesto. A Sora
     fica a ser a voz de interface — etiquetas, botoes, numeros, navegacao.
     Nao misturar: um numero em serifa fina perde a leitura tabular. */
  --font-s:"Newsreader",Georgia,"Times New Roman",serif;
  --max:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-t);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(59,130,246,.35)}
h1,h2{
  font-family:var(--font-s);font-weight:325;
  letter-spacing:-.005em;   /* a serifa nao quer o aperto que a Sora pedia */
  line-height:1.14;text-wrap:balance;
}
h1{font-weight:340;letter-spacing:0}
h3{font-family:var(--font-d);font-weight:600;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
/* O italico e o acento da casa: entra em <em> dentro de titulo ou manifesto,
   nunca em paragrafos inteiros. */
/* A ENFASE DA CASA. A serifa e fina de proposito, por isso o contraste nao
   pode vir do peso — vinha borratado, porque o ficheiro so tem ate 500. Vem do
   italico, que e um desenho diferente e nao um mesmo desenho mais gordo.
   REGRA: uma palavra por titulo, a palavra onde a frase vira. Duas e ruido. */
h1 em,h2 em,.statement em,.lema em,.sec-head .lede em{
  font-style:italic;font-weight:300;
  color:var(--ink);
}
/* Nos manifestos a enfase acende, porque ali a frase e o conteudo todo.
   Peso 400 e nao 300: o gradiente sobre fundo escuro num italico fino lia-se
   como texto APAGADO em vez de destacado — o traco fica fino demais para a
   cor pegar. 400 da-lhe corpo e continua abaixo dos 500 do ficheiro. */
.statement em,.lema em{
  font-weight:400;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
a{color:inherit;text-decoration:none}
img,svg,canvas{max-width:100%;display:block}

/* foco visível em todo o lado; a barra fixa não pode tapar o alvo */
:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px;border-radius:4px}
[id]{scroll-margin-top:5.5rem}

/* saltar para o conteúdo — só aparece com Tab */
.saltar{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  background:var(--panel);color:var(--ink);
  border:1px solid var(--blue-2);border-radius:10px;
  padding:.7rem 1.1rem;font-family:var(--font-d);font-size:.9rem;
  transition:top .2s ease;
}
.saltar:focus{top:1rem}


/* ═══════════ CÉU ═══════════
   Campo de estrelas fixo por trás de tudo. Três camadas de tamanhos e
   opacidades diferentes dão profundidade; sendo `fixed`, o conteúdo desliza
   por cima e o céu fica parado — lê-se como travessia e não como fundo.
   É CSS puro, sem canvas nem JS: não custa nada a desenhar e não interfere
   com o 3D do hero, que continua a ter as suas próprias partículas.
   As posições são geradas com semente fixa; para mudar o céu, muda a semente
   no scratchpad/estetica.py e volta a correr. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1px 1px at 331px 154px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 404px 666px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 49px 74px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 840px 548px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 96px 374px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 596px 59px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 519px 219px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 38px 88px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 444px 428px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 71px 246px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 92px 564px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 434px 60px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 846px 579px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 126px 228px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 645px 642px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 596px 63px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 590px 599px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 406px 50px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 226px 47px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 570px 879px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 136px 296px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 429px 147px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 553px 120px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 584px 315px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 573px 835px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 698px 185px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 105px 595px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 584px 654px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 192px 381px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 99px 560px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 729px 64px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 577px 61px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 633px 210px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 508px 696px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 544px 437px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 795px 321px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 476px 599px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 464px 370px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 306px 254px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 813px 184px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 715px 798px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 249px 83px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 588px 307px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 537px 506px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 896px 351px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 746px 459px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 294px 623px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 74px 120px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 524px 428px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 168px 775px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 350px 155px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 500px 431px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 40px 684px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 79px 782px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 571px 586px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 808px 896px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 837px 321px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 348px 711px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 358px 608px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 508px 593px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 816px 467px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 70px 860px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 95px 276px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 485px 713px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 680px 66px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 62px 748px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 718px 317px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 662px 591px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 697px 841px,rgba(190,215,255,.5),transparent),
    radial-gradient(1px 1px at 456px 291px,rgba(190,215,255,.5),transparent);
  background-size:900px 900px;
  opacity:.55;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1px 1px at 395px 684px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 355px 23px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 472px 363px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 172px 625px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 119px 505px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 60px 223px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 294px 132px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 253px 407px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 400px 508px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 82px 170px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 459px 411px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 562px 284px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 140px 440px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 563px 285px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 425px 367px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 699px 389px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 236px 154px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 84px 180px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 154px 237px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 674px 238px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 12px 496px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 603px 186px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 269px 288px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 4px 149px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 429px 547px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 378px 624px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 579px 326px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 128px 527px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 632px 670px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 692px 55px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 467px 696px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 572px 401px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 407px 408px,rgba(215,232,255,.75),transparent),
    radial-gradient(1px 1px at 403px 106px,rgba(215,232,255,.75),transparent),
    radial-gradient(2px 2px at 493px 410px,rgba(235,244,255,.9),transparent),
    radial-gradient(2px 2px at 63px 195px,rgba(235,244,255,.9),transparent),
    radial-gradient(2px 2px at 68px 213px,rgba(235,244,255,.9),transparent),
    radial-gradient(2px 2px at 451px 166px,rgba(235,244,255,.9),transparent),
    radial-gradient(2px 2px at 112px 348px,rgba(235,244,255,.9),transparent),
    radial-gradient(2px 2px at 53px 104px,rgba(235,244,255,.9),transparent),
    radial-gradient(2px 2px at 0px 580px,rgba(235,244,255,.9),transparent),
    radial-gradient(2px 2px at 154px 549px,rgba(235,244,255,.9),transparent),
    radial-gradient(2px 2px at 103px 372px,rgba(235,244,255,.9),transparent),
    radial-gradient(2px 2px at 26px 72px,rgba(235,244,255,.9),transparent),
    radial-gradient(2px 2px at 212px 385px,rgba(235,244,255,.9),transparent),
    radial-gradient(2px 2px at 152px 258px,rgba(235,244,255,.9),transparent);
  background-size:700px 700px,600px 600px;
  opacity:.7;
}
/* O hero tem o seu próprio céu em 3D; sem isto ficavam dois sobrepostos. */
body.is-3d .hero{isolation:isolate}

@media (prefers-reduced-motion:reduce){
  body::before,body::after{opacity:.35}
}

/* ---------- navegação ---------- */
/* Barra flutuante em pílula, não faixa de ponta a ponta. Fica destacada do
   topo e do 3D por baixo, com vidro fosco.
   ATENÇÃO ao translateX: transform cria bloco de referência para descendentes
   position:fixed. Aqui não há nenhum — se um dia entrar uma gaveta de menu
   fixed dentro da barra, vai ficar do tamanho da pílula e não do ecrã. */
.nav{
  position:fixed;top:.85rem;left:50%;transform:translateX(-50%);z-index:100;
  width:min(1120px, calc(100% - 1.6rem));
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.62rem .62rem .62rem 1.35rem;
  border-radius:999px;
  background:rgba(13,20,38,.72);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(125,165,255,.16);
  box-shadow:0 10px 40px rgba(2,6,18,.5),inset 0 1px 0 rgba(190,220,255,.07);
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease,top .4s ease;
}
/* O véu que aqui estava foi removido a 31/08/2026: existia para dar contraste
   à marca sobre a mão 3D, e a pílula passou a ter fundo próprio desde o
   primeiro instante. Se algum dia a barra voltar a ser transparente no topo,
   é preciso repor alguma forma de contraste — sem ela os links ficam
   ilegíveis por cima do 3D acima dos ~1200px. */
.nav.scrolled{
  background:rgba(11,17,32,.9);
  border-color:rgba(125,165,255,.24);
  box-shadow:0 14px 46px rgba(2,6,18,.62),inset 0 1px 0 rgba(190,220,255,.09);
}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-s);font-weight:400;font-size:1.14rem;letter-spacing:.005em}
.brand-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--grad);
  box-shadow:0 0 10px var(--glow),0 0 22px rgba(56,189,248,.25);
  animation:breathe 3.2s ease-in-out infinite;
}
/* Descritor colado à marca. NÃO é decoração: "Sequeira Agency" sozinho lê-se
   como agência de publicidade junto de PME portuguesas — é o descritor que
   desfaz a ambiguidade, e por isso aparece em todas as páginas. */
.brand small{
  color:var(--faint);font-weight:400;font-family:var(--font-t);
  font-size:.78rem;letter-spacing:.01em;margin-left:.55rem;white-space:nowrap;
}
/* Abaixo dos 900px o descritor sai: a barra já disputa espaço com o selector
   de idioma e o botão, e abaixo dos 640 a marca encolhe para "Sequeira". */
/* Escalonamento da pílula. Com três links, três bandeiras e o botão, o
   espaço acaba depressa — cada coisa sai por ordem de menor utilidade. */
@media (max-width:1080px){ .brand small{display:none} }
@media (max-width:860px){ .nav-links .lnk{display:none} }
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.75);opacity:.7}}

.nav-links{display:flex;align-items:center;gap:clamp(.9rem,2.2vw,1.5rem)}

/* ---------- selector de idioma ---------- */
.idiomas{display:flex;align-items:center;gap:.25rem}
.lang{
  display:inline-flex;align-items:center;gap:.4rem;
  background:none;border:1px solid transparent;border-radius:999px;
  padding:.34rem .6rem;cursor:pointer;
  font-family:var(--font-d);font-size:.78rem;font-weight:600;letter-spacing:.04em;
  color:var(--faint);white-space:nowrap;
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.lang svg{width:19px;height:13px;border-radius:2px;display:block;opacity:.62;transition:opacity .25s ease}
.lang:hover{color:var(--ink)}
.lang:hover svg{opacity:1}
.lang.activo{color:var(--ink);border-color:rgba(125,165,255,.32);background:rgba(125,165,255,.08)}
.lang.activo svg{opacity:1}
.lang:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
/* O selector nunca pode ser esmagado pelo flex da barra: sem isto os tres
   botoes encolhiam para 23px no telemovel e as bandeiras desapareciam. */
.idiomas,.lang,.lang svg{flex-shrink:0}

/* Rotulo do botao da barra: longo no computador, curto no telemovel.
   Com "Falar com o Eduardo" a barra transbordava 28px a 375px de largura. */
.rot-curto,.marca-curta{display:none}

@media (max-width:640px){
  .nav{padding-left:.85rem;padding-right:.85rem;gap:.55rem}
  .nav-links{gap:.55rem}
  .brand{font-size:.9rem;gap:.45rem}
  /* A marca inteira nao cabe ao lado do selector de idioma e do botao:
     a 360px transbordava. No telemovel fica so "Sequeira". */
  .marca-longa{display:none}
  .marca-curta{display:inline}
  .lang span{display:none}
  .lang{padding:.3rem .35rem}
  .lang svg{width:18px;height:12px}
  .btn.small{padding:.55rem .95rem;font-size:.82rem}
  .nav .rot-longo{display:none}
  .nav .rot-curto{display:inline}
}
.nav-links a{font-family:var(--font-d);font-size:.92rem;color:var(--mut);white-space:nowrap;transition:color .25s ease}
.nav-links .lnk{font-size:.88rem;padding:.3rem .1rem}
.nav-links .lnk:hover{color:var(--ink)}
/* O botão da barra é um <a> dentro de .nav-links, por isso a regra de cima
   (.nav-links a — especificidade 0,1,1) ganhava ao .btn (0,1,0) e pintava-lhe
   o texto de cinzento por cima do gradiente claro: contraste medido de 1,1:1,
   ou seja invisível. Esta regra (0,2,1) devolve-lhe a cor escura do desenho,
   que dá 8,9:1. Não mexer sem medir o contraste outra vez. */
.nav-links a.btn{color:#04101f}
.nav-links a.btn:hover{color:#04101f}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current=page]:not(.btn){color:var(--blue-2)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-d);font-weight:600;font-size:.95rem;white-space:nowrap;
  padding:.78rem 1.6rem;border-radius:999px;
  background:var(--grad);color:#04101f;
  box-shadow:0 4px 24px rgba(56,150,255,.28);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
  border:none;cursor:pointer;
}
.btn:hover{transform:perspective(600px) translateY(-2px) rotateX(6deg);box-shadow:0 10px 34px rgba(56,150,255,.42)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid rgba(125,165,255,.35);box-shadow:none}
.btn.ghost:hover{background:var(--grad);color:#04101f;border-color:transparent;box-shadow:0 10px 34px rgba(56,150,255,.42)}
.btn.small{padding:.55rem 1.2rem;font-size:.87rem}
.btn.wide{width:100%;padding:1rem 1.6rem;font-size:1.02rem}
.btn[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}

/* ---------- blocos de secção ---------- */
.section{position:relative;padding:clamp(6rem,13vw,11rem) 1.4rem;max-width:var(--max);margin:0 auto}
.sec-head{max-width:680px;margin-bottom:clamp(3.2rem,7vw,5rem)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- cabecalhos encostados a esquerda ----------
   Estavam TODAS as seccoes centradas, e uma pagina toda ao centro le-se como
   um cartaz: nao tem por onde comecar. As seccoes alternam agora entre ao
   centro e a esquerda. A barra curta por cima marca o inicio da coluna, para
   o desalinhamento se ler como decisao e nao como esquecimento.
   O manifesto (.statement) dessas seccoes fica ao centro na mesma — e o
   contraste entre a coluna a esquerda e a frase ao meio que da o ritmo. */
.sec-head.esq{margin-left:0;margin-right:auto;text-align:left;max-width:720px}
/* A barra de 54x2px em gradiente que aqui estava FOI RETIRADA a 13/09/2026.
   Existia para o alinhamento a esquerda se ler como decisao e nao como
   esquecimento, mas era a ultima aresta dura do site: uma linha curta, de cor
   cheia, com pontas a direito, por cima do sobretitulo de #numeros e de
   #automatizar. Com o resto do site sem molduras, passou a ser a unica coisa
   que se via -- e foi ela que o Eduardo apontou.
   O alinhamento a esquerda aguenta-se sozinho porque e consistente nas
   seccoes que o usam. Se um dia parecer engano, repor com o --filete (que se
   esbate nas pontas) e nunca com cor cheia. */
.sec-head.esq .lede{margin-left:0}
@media (max-width:700px){
  /* Em telemovel a coluna ja ocupa a largura toda: a barra fica, o resto e igual. */
  .sec-head.esq{max-width:100%}
}
.sec-head .eyebrow{margin-bottom:.8rem}
.sec-head h2{font-size:clamp(1.9rem,4.6vw,3rem)}
.sec-head .lede{margin-top:1rem;color:var(--mut);font-size:clamp(1rem,2.2vw,1.12rem);text-wrap:balance}
.eyebrow{
  font-family:var(--font-d);font-size:.82rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--blue-2);text-wrap:balance;
  margin-bottom:1.1rem;
}

/* secções abaixo da dobra: o browser só as desenha quando se aproximam.
   O contain-intrinsic-size reserva a altura para não haver salto de layout. */
.adiada{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* revelação ao scroll — corre uma vez e para */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.22,.9,.3,1),transform .9s cubic-bezier(.22,.9,.3,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}


/* ---------- linha do alvo, no hero ---------- */
.alvo{
  margin:1.6rem auto 0;font-family:var(--font-d);font-size:.84rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  text-wrap:balance;
}




/* ---------- frases-manifesto e filas de botões ----------
   Vivem aqui e não no <style> do index porque são partilhadas: a precos.html
   usa-as também, e enquanto estiveram só no index essa página saía com o
   texto e os botões encostados à esquerda. */
.cta-row{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.statement{
  margin:clamp(3.5rem,7vw,5rem) auto 0;text-align:center;
  font-family:var(--font-s);font-weight:300;
  font-size:clamp(1.3rem,3.4vw,1.85rem);line-height:1.35;
  max-width:880px;text-wrap:balance;
}
.statement strong{
  /* 500 e nao 600: e o peso maximo que existe no ficheiro da serifa. Acima
     disso o browser inventa o negrito e a letra sai borratada. */
  font-weight:500;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.statement-sub{
  margin:1.6rem auto 0;text-align:center;max-width:640px;
  color:var(--mut);font-size:clamp(.98rem,2.2vw,1.06rem);text-wrap:pretty;
}

/* pressuposto fixo, apresentado como campo mas sem ser editável */
.fixo{
  padding:.85rem 1rem;border-radius:12px;
  border:1px dashed var(--line);background:rgba(11,17,32,.35);
  font-family:var(--font-d);font-size:1.15rem;font-weight:600;color:var(--mut);
  font-variant-numeric:tabular-nums;
}
.fixo span{font-weight:400;font-size:.8em;color:var(--faint)}


/* ---------- subtítulo de bloco, na página de preços ----------
   Diz numa linha o que cada nível é: produto de preço fixo, feito à medida,
   ou orçamentado. É esta linha que impede o visitante de esperar preço fixo
   onde não há. */
.bloco-sub{
  text-align:center;margin:-1.4rem auto clamp(1.8rem,4vw,2.6rem);max-width:620px;
  color:var(--faint);font-family:var(--font-d);font-size:.92rem;text-wrap:balance;
}
.prova{
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
  color:var(--mut);font-size:.95rem;line-height:1.65;text-wrap:pretty;
}
.prova b{color:var(--ink);font-weight:600}

/* nota por baixo do resultado do simulador */
.res-nota{margin-top:.7rem;color:var(--faint);font-size:.82rem;line-height:1.5;text-wrap:pretty}

/* nota que desambigua a garantia, por baixo dos selos verdes */
.gar-nota{
  max-width:620px;margin:1.3rem auto 0;text-align:center;
  color:var(--mut);font-size:.92rem;line-height:1.65;text-wrap:pretty;
}
.gar-nota b{color:var(--ink);font-weight:600}

/* Item da lista que é link para uma página de solução. Herda o layout do <li>
   para o link não partir a coluna, e ganha uma seta que só aparece ao passar. */
.menu-auto .item-link{display:flex;flex-direction:column;gap:.3rem;color:inherit}
.menu-auto .item-link b{transition:color .25s ease}
.menu-auto .item-link b::after{
  content:" →";color:var(--blue-2);opacity:0;
  transition:opacity .25s ease,margin-left .25s ease;margin-left:-.2em;
}
.menu-auto .item-link:hover b{color:var(--blue-2)}
.menu-auto .item-link:hover b::after{opacity:1;margin-left:.2em}

/* ---------- teaser de preços no index ---------- */
.preco-linha{
  max-width:760px;margin:0 auto;text-align:center;
  font-family:var(--font-s);font-weight:300;
  font-size:clamp(1.15rem,2.9vw,1.55rem);line-height:1.6;
  color:var(--mut);text-wrap:balance;
}
.preco-linha b{
  font-weight:500;color:var(--ink);white-space:nowrap;   /* ver nota em .statement strong */
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- brilhos de ambiente, alternados ----------
   As secções sem brilho próprio liam-se como painéis lisos empilhados. A luz
   troca de lado de secção para secção, o que dá ritmo ao scroll sem custar
   texto nenhum. Ficam por baixo do conteúdo (z-index:0 no ::before). */
#numeros,#automatizar,#precos,#caso,#testemunhos{position:relative;isolation:isolate}
#numeros::before,#automatizar::before,#precos::before,#caso::before,#testemunhos::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;

  /* ⚠ SEM ESTA MÁSCARA O BRILHO SAI CORTADO A DIREITO.
     As elipses abaixo têm 760px de largura e a secção, no telemóvel ou num
     painel estreito, tem 566px — a elipse ainda tem cor quando chega à borda
     e a caixa corta-a, desenhando um rectângulo visível no lado direito e em
     baixo. Mexer no tamanho da elipse não resolve: seja qual for a geometria,
     há sempre uma largura de ecrã em que ela volta a tocar numa borda.
     A máscara apaga o ::before nas suas próprias arestas, o que garante que
     o brilho nunca encosta a lado nenhum — fica a flutuar no vazio.
     Corrigido a 13/09/2026. */
  -webkit-mask-image:radial-gradient(100% 100% at 50% 50%,#000 32%,transparent 100%);
          mask-image:radial-gradient(100% 100% at 50% 50%,#000 32%,transparent 100%);
}
#numeros::before{background:radial-gradient(760px 340px at 18% 12%,rgba(59,130,246,.14),transparent 68%)}
#automatizar::before{background:radial-gradient(760px 340px at 82% 18%,rgba(56,189,248,.11),transparent 68%)}
#precos::before{background:radial-gradient(700px 320px at 50% 0%,rgba(59,130,246,.13),transparent 70%)}
#caso::before{background:radial-gradient(760px 340px at 20% 85%,rgba(56,189,248,.10),transparent 68%)}
#testemunhos::before{background:radial-gradient(760px 340px at 80% 10%,rgba(59,130,246,.11),transparent 68%)}

/* ---------- tabela de preços ---------- */
.tabela-precos{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2rem);
  max-width:820px;margin:clamp(2.5rem,5vw,3.5rem) auto 0;
}
.preco{
  padding:2rem 1.8rem;border-radius:20px;
  border:1px solid rgba(96,165,250,.28);
  background:
    radial-gradient(420px 160px at 50% 0%,rgba(59,130,246,.14),transparent 70%),
    rgba(17,26,46,.62);
}
.preco-rot{
  font-family:var(--font-d);font-size:.8rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue-2);
}
.preco-val{
  margin:.7rem 0 .9rem;font-family:var(--font-d);font-weight:600;
  font-size:clamp(1.9rem,4.6vw,2.5rem);line-height:1.05;letter-spacing:-.02em;
  /* fica em Sora de proposito: numero com algarismos de largura fixa */
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.preco-val span{color:var(--faint);font-weight:400;font-size:.62em}
.preco-nota{color:var(--mut);font-size:.94rem;line-height:1.6;text-wrap:pretty}

@media (max-width:820px){
  .tabela-precos{grid-template-columns:1fr;max-width:460px}
}

/* ---------- passos do orçamento ---------- */
.passos{
  list-style:none;counter-reset:none;max-width:900px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2rem);
}
.passos li{
  display:flex;flex-direction:column;gap:.55rem;
  padding:2rem 1.7rem;border-radius:20px;
  border:1px solid var(--line);background:rgba(17,26,46,.55);
}
.passo-n{
  font-family:var(--font-d);font-size:.8rem;font-weight:600;letter-spacing:.22em;
  color:var(--blue-2);margin-bottom:.3rem;
}
.passos b{font-family:var(--font-d);font-weight:600;font-size:1.06rem;color:var(--ink);text-wrap:pretty}
.passos span:not(.passo-n){color:var(--mut);font-size:.96rem;line-height:1.6}

@media (max-width:820px){
  .passos{grid-template-columns:1fr;max-width:460px}
}

/* ---------- rodapé ---------- */
footer{position:relative;overflow:hidden}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--filete)}
.foot-bottom{
  max-width:var(--max);margin:0 auto;padding:clamp(2rem,5vw,3rem) 1.4rem 2.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  color:var(--faint);font-size:.82rem;
}
.foot-note{max-width:520px;font-size:.75rem;line-height:1.5}
.foot-legal{display:flex;gap:1rem;flex-wrap:wrap}
.foot-legal a{border-bottom:1px solid rgba(125,165,255,.3);transition:color .25s ease,border-color .25s ease}
.foot-legal a:hover{color:var(--blue-2);border-bottom-color:var(--blue-2)}

@media (max-width:900px){
  .foot-bottom{justify-content:center;text-align:center;flex-direction:column}
}
/* (os links de secção já saem aos 860px, na regra acima) */
@media (max-width:520px){
  body{font-size:16px}
  /* a barra tem de caber numa linha a 375px: marca + botão, sem quebras */
  .nav{padding-left:1rem;padding-right:1rem;gap:.6rem}
  .brand{font-size:.92rem}
  .nav .btn{padding:.5rem .9rem;font-size:.8rem}
  .brand small{display:none}
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* Nota de rodapé dentro de um .statement-sub — a ressalva da McKinsey, que é
   precisa mas não é argumento. Menor e mais apagada para não competir com a
   frase que a antecede. Acrescentada a 13/09/2026. */
.nota-fonte{
  display:block;
  margin-top:.7rem;
  font-size:.86em;
  opacity:.62;
}

/* Última linha da lista #automatizar — a que diz que não há prateleira.
   Distingue-se das outras sem se tornar um cartão: o filete de cima ganha cor
   e o título perde o preto, para se ler como fecho e não como mais um item.
   Acrescentada a 13/09/2026. */
.menu-auto li.item-aberto::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(96,165,250,.5) 16%,rgba(96,165,250,.5) 84%,transparent);
}
.menu-auto li.item-aberto b{
  color:var(--blue-2);
}