/* ==========================================================================
   GBNEGÓCIOS — sistema visual
   ==========================================================================

   A TINTA é a identidade VoltFibra (decisão do Rui, 04-09-2026), lida de
   CRM-REFID-SERVER/app/Config/OfferBrand.php: navy #0b1e3a, teal #0d9488 e
   #0f766e nas ações, âmbar #f59e0b para energia, ciano #22d3ee para
   telecomunicações.

   A ESTRUTURA mudou a 05-09: painéis de altura total, uma ideia por ecrã,
   tipografia grande e muito espaço à volta. Onde uma página de produto teria
   fotografia, aqui está o número e a palavra — não há produto para fotografar,
   e imagens de banco de imagens seriam pior do que nada.

   Consequência assumida: isto deixa de ser igual à página da Fase 0 em
   simulador.gbnegocios.com, que está congelada a três dias do lote 1 e
   validada com 350 percursos. A divergência é temporária e deliberada.

   O âmbar puro não tem contraste suficiente para texto sobre branco, por isso
   vive em dois tons: --energia para marcas e --amber para palavras.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipos de letra — servidos do próprio domínio desde 2026-09-07.

   Antes vinham do Google Fonts, e isso transmitia o endereço IP de cada
   visitante à Google só por abrir a página. Estava declarado na privacidade
   como coisa a resolver; está resolvido: os ficheiros são os mesmos woff2 que
   a Google servia (Fraunces v38, Instrument Sans v4, ambos SIL OFL 1.1),
   agora em /assets/fonts.

   São variáveis: um ficheiro por família cobre todos os pesos, e o Fraunces
   traz também os eixos opsz, SOFT e WONK que o desenho usa.

   O unicode-range mantém-se para que o latin-ext só desça quando a página
   tiver mesmo um caractere fora do latin — em português, quase nunca.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url(../fonts/fraunces-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:'Fraunces';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url(../fonts/fraunces-latin-ext.woff2) format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap;
  src:url(../fonts/instrument-sans-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:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap;
  src:url(../fonts/instrument-sans-latin-ext.woff2) format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --ink-3 medido a 2026-09-05: o #7d93a6 anterior dava 3,05:1 sobre este
   papel, abaixo do mínimo de 4,5:1 do WCAG para texto normal — e serve as
   notas da margem, a fonte da tabela e o rodapé, que são conteúdo a sério e
   não decoração. O #5a6f83 dá 4,99:1. No modo escuro o tom claro já passava
   (5,96:1) e fica como estava. */
:root{
  --ink:#0b1e3a; --ink-2:#47617a; --ink-3:#5a6f83;
  --paper:#fbfaf8; --surface:#f3f1ec; --surface-2:#e8e4dc;
  --rule:#e2ddd3; --rule-2:#c9c2b4;
  --barra:#0d9488; --nota:#a45c07;
  --acc:#0d9488; --acc-deep:#0f766e; --acc-soft:#e2f4f1;
  --energia:#f59e0b; --amber:#a45c07; --amber-soft:#fdf2df;
  --telecom:#22d3ee;
  --btn-bg:#0b1e3a; --btn-fg:#ffffff; --link:#0f766e;
  --noite:#08131f; --noite-ink:#eef4fa; --noite-ink-2:#9db2c6; --noite-rule:#1c3145;
  --shadow:0 1px 2px rgba(11,30,58,.05), 0 22px 60px -34px rgba(11,30,58,.55);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e8f0f7; --ink-2:#a8bccd; --ink-3:#7d93a6;
    --paper:#0a1119; --surface:#111b25; --surface-2:#1a2733;
    --rule:#22303d; --rule-2:#3a4a59;
    --barra:#10a99a; --nota:#bd8226;
    --acc:#2dd4bf; --acc-deep:#99f6e4; --acc-soft:#0c2b2a;
    --energia:#f59e0b; --amber:#e0a03a; --amber-soft:#2a2011;
    --telecom:#67e8f9;
    --btn-bg:#e8f0f7; --btn-fg:#08131f; --link:#2dd4bf;
    --noite:#050d16; --noite-ink:#eef4fa; --noite-ink-2:#9db2c6; --noite-rule:#16283a;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 22px 60px -34px rgba(0,0,0,.95);
  }
}
:root[data-theme="dark"]{
  --ink:#e8f0f7; --ink-2:#a8bccd; --ink-3:#7d93a6;
  --paper:#0a1119; --surface:#111b25; --surface-2:#1a2733;
  --rule:#22303d; --rule-2:#3a4a59;
  --barra:#10a99a; --nota:#bd8226;
  --acc:#2dd4bf; --acc-deep:#99f6e4; --acc-soft:#0c2b2a;
  --energia:#f59e0b; --amber:#e0a03a; --amber-soft:#2a2011;
  --telecom:#67e8f9;
  --btn-bg:#e8f0f7; --btn-fg:#08131f; --link:#2dd4bf;
  --noite:#050d16; --noite-ink:#eef4fa; --noite-ink-2:#9db2c6; --noite-rule:#16283a;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 22px 60px -34px rgba(0,0,0,.95);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.62 "Instrument Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---- tipografia ---------------------------------------------------------
   A escala é dramática de propósito: o salto entre o título e o corpo é o que
   faz uma secção ler-se como uma afirmação, e não como mais um parágrafo. */
h1,h2,h3{
  /* Fraunces tem um eixo `WONK` que troca alguns remates por versões com
     mais mão. Ligado de propósito nos títulos: é o que impede a página de
     ler como um modelo. */
  font-family:Fraunces, "Iowan Old Style", Georgia, serif;
  font-variation-settings:"SOFT" 28, "WONK" 1;
  margin:0; text-wrap:balance; letter-spacing:-.022em; line-height:1.05;
}
h1{font-size:clamp(40px, 8.4vw, 92px); font-weight:700}
h2{font-size:clamp(32px, 5.6vw, 62px); font-weight:700; line-height:1.1}
h3{font-size:clamp(20px, 2.4vw, 26px); font-weight:700; line-height:1.25; letter-spacing:-.015em}
p{margin:0}
a{color:var(--link); text-underline-offset:3px}
:focus-visible{outline:3px solid var(--acc); outline-offset:3px; border-radius:6px}

.lede{
  font-size:clamp(18px, 2.2vw, 23px); line-height:1.5;
  color:var(--ink-2); max-width:34ch; margin-top:22px;
}
.lede.larga{max-width:48ch}
.eyebrow{
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:18px;
}
.mono{font-variant-numeric:tabular-nums}

/* ---- estrutura ---------------------------------------------------------- */
.shell{max-width:1080px; margin:0 auto; padding:0 24px}
.shell.estreito{max-width:720px}

.painel{padding:clamp(80px, 14vh, 156px) 0}
.painel.alto{min-height:100svh; display:flex; align-items:center}
.painel.centrado{text-align:center}
.painel.centrado .lede{margin-left:auto; margin-right:auto}
.painel.centrado .acoes{justify-content:center}

/* O contraste é o que faz cada painel ler-se como um momento separado, em vez
   de uma página comprida com subtítulos. */
.painel.noite{background:var(--noite); color:var(--noite-ink)}

/* O `:where()` aqui não é estilo, é uma correção.
   Escritas como `.painel.noite p`, estas regras têm especificidade 0-2-1 e
   ganham a qualquer classe de 0-1-0 aplicada ao próprio elemento — foi assim
   que o `.figurao` apareceu cinzento: o `color:transparent` que deixa ver o
   gradiente estava a ser atropelado por uma cor opaca. O `:where()` zera a
   especificidade do antepassado, e a classe do elemento volta a mandar. É a
   mesma lição do botão vazio de há pouco. */
:where(.painel.noite) h1,
:where(.painel.noite) h2,
:where(.painel.noite) h3{color:var(--noite-ink)}
:where(.painel.noite) .lede,
:where(.painel.noite) p{color:var(--noite-ink-2)}
:where(.painel.noite) .eyebrow{color:var(--acc)}
.painel.macio{background:var(--surface)}

/* ---- cabeçalho ----------------------------------------------------------
   O único elemento persistente da página, e por isso o mais leve que consegue
   ser: 56px, desfoque por trás, e uma linha que só aparece quando já se rolou. */
.topo{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.topo.colado{border-bottom-color:var(--rule)}
.topo .interior{
  max-width:1080px; margin:0 auto; padding:0 24px;
  height:56px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
/* O nome é um acrónimo — GB de "Guia dos Bons", NEGÓCIOS por extenso — e até
   07-09-2026 lia-se como uma palavra só: o motivo do nome não chegava a
   ninguém que não o soubesse já.

   O contraste é de PESO, não de cor. O âmbar já é energia e o teal já é acção;
   dar a marca a qualquer um dos dois punha uma terceira leitura em cima de
   duas que já significam alguma coisa. A Instrument Sans é variável 400–700,
   por isso 700 contra 500 sai limpo em qualquer tamanho.

   Para quem ouve, a palavra continua a ser uma só: está tudo dentro da mesma
   ligação e o leitor de ecrã lê "GBNEGÓCIOS" na mesma. */
.marca{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:500; font-size:14px; letter-spacing:.04em; color:var(--ink);
}
/* O nome tem de ser UM item flex, senao o `gap:9px` do .marca mete-se entre o
   "GB" e o "NEGOCIOS" e parte a palavra em duas. Foi o que aconteceu a primeira
   vez: lia-se "GB NEGOCIOS". O `gap` so separa o ponto do nome. */
.marca .nome{display:inline}
.marca .gb{font-weight:700}
.ponto{width:9px; height:9px; border-radius:50%; background:var(--energia); flex:none}
.topo nav{display:flex; gap:26px; font-size:14px}
.topo nav a{color:var(--ink-2); text-decoration:none}
.topo nav a:hover{color:var(--ink)}
/* Até 06-09 o cabeçalho escondia a navegação inteira abaixo dos 660px, e no
   telemóvel — que é onde a maioria abre isto — sobrava só o logótipo. Passa a
   encolher em vez de desaparecer: cai o "Áreas", que é uma âncora dentro da
   home e não serve a quem está noutra página, e ficam as duas ligações que
   levam a algum lado. Um menu de gaveta para dois links seria mais código do
   que problema. */
@media (max-width:660px){
  .topo .interior{padding:0 18px; gap:12px}
  .topo nav{gap:16px; font-size:13px}
  .topo nav .so-largo{display:none}
}

/* ---- ações -------------------------------------------------------------- */
.acoes{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:38px}
.btn{
  display:inline-block; background:var(--btn-bg); color:var(--btn-fg);
  border:0; border-radius:999px; padding:15px 30px;
  font:600 16px/1 "Instrument Sans", system-ui, sans-serif; text-decoration:none; cursor:pointer;
  transition:transform .18s ease, filter .18s ease;
}
.btn:hover{filter:brightness(1.12); transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){ .btn:hover{transform:none} }
.btn.claro{background:var(--acc); color:#04201d}
.btn.fantasma{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule-2)}
:where(.painel.noite) .btn.fantasma{color:var(--noite-ink); box-shadow:inset 0 0 0 1px #2a4155}
.seta{
  font:500 16px/1 "Instrument Sans", system-ui, sans-serif; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}
.seta::after{content:"\203A"; font-size:19px; transition:transform .18s ease}
.seta:hover::after{transform:translateX(3px)}
.acoes .alt{font-size:16px; color:var(--ink-2)}
:where(.painel.noite) .acoes .alt{color:var(--noite-ink-2)}

/* ---- o número grande ----------------------------------------------------
   Onde uma página de produto teria uma fotografia. */
.figurao{
  font-family:Fraunces, Georgia, serif; font-weight:700;
  font-size:clamp(84px, 21vw, 230px); line-height:.86; letter-spacing:-.05em;
  background:linear-gradient(160deg, var(--acc) 0%, var(--energia) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.figurao-nota{margin-top:28px; font-size:clamp(17px, 2vw, 21px); max-width:42ch}

/* ---- grelha de cartões --------------------------------------------------- */
.grelha{display:grid; gap:20px; margin-top:56px; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr))}
.cartao{
  background:var(--paper); border-radius:22px; padding:34px 30px 38px;
  box-shadow:var(--shadow); border:1px solid var(--rule);
  display:flex; flex-direction:column; gap:10px;
}
:where(.painel.noite) .cartao{background:#0e1c2b; border-color:var(--noite-rule); box-shadow:none}
.cartao p{color:var(--ink-2); font-size:16px; line-height:1.55}
:where(.painel.noite) .cartao p{color:var(--noite-ink-2)}
.selo{
  align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px;
  background:var(--acc-soft); color:var(--acc-deep); margin-bottom:6px;
}
.selo.energia{background:var(--amber-soft); color:var(--amber)}
:where(.painel.noite) .selo{background:#0c2b2a; color:var(--acc)}
:where(.painel.noite) .selo.energia{background:#2a2011; color:var(--energia)}

/* ---- passos numerados ---------------------------------------------------- */
.passos{display:grid; gap:44px; margin-top:60px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr))}
.passo .n{
  font-family:Fraunces, Georgia, serif; font-size:44px; font-weight:700;
  line-height:1; color:var(--acc); letter-spacing:-.03em;
}
.passo h3{margin:14px 0 8px}
.passo p{color:var(--ink-2); font-size:16px}
:where(.painel.noite) .passo p{color:var(--noite-ink-2)}

/* ---- aparecer ao rolar ---------------------------------------------------
   Subtil de propósito: 12px e 600ms. Mais do que isso chama a atenção para a
   animação em vez de para o texto.

   Duas salvaguardas, e nenhuma é opcional: quem pediu menos movimento não
   recebe nenhum, e sem JavaScript nada fica invisível — o conteúdo nunca
   depende de um script para existir. */
.revela{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.revela.dentro{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .revela{opacity:1; transform:none; transition:none}
}
html:not(.js) .revela{opacity:1; transform:none}

/* ---- rodapé ------------------------------------------------------------- */
/* O nome por extenso, dito uma vez por página e no sítio onde já se dizem as
   outras coisas que é preciso dizer uma vez. As iniciais a cheio ensinam o
   acrónimo sem ser preciso explicá-lo. */
.lema{font-size:13px; color:var(--ink-3); letter-spacing:.02em; margin:0 0 6px}
.lema b{color:var(--ink); font-weight:700}

.rodape{border-top:1px solid var(--rule); padding:48px 0 64px; font-size:14px; color:var(--ink-3)}

/* A identificação legal — DL 7/2004 art.º 10.º. Discreta de propósito: é
   informação obrigatória, não é argumento de venda, e competir com a assinatura
   acima dela faria o rodapé ler-se como um aviso legal em vez de um fecho de
   página. O `--ink-3` sobre `--paper` dá 4,99:1, acima do mínimo AA. */
.legal{
  margin-top:18px; font-size:12.5px; line-height:1.65; color:var(--ink-3);
  max-width:76ch;
}
.legal + .legal{margin-top:6px}
.legal a{color:var(--ink-2); text-decoration:underline}
.legal a:hover{color:var(--ink)}
.rodape nav{display:flex; flex-wrap:wrap; gap:22px; margin-bottom:16px}
.rodape a{color:var(--ink-2); text-decoration:none}
.rodape a:hover{text-decoration:underline}

/* ---- texto corrido (privacidade) ---------------------------------------- */
.prosa{max-width:66ch}
.prosa h2{font-size:clamp(24px, 3vw, 32px); margin:44px 0 14px}
/* A `h3` da prosa é subsecção, não secção. Sem isto herda a escala dramática
   dos títulos do site e compete com a `h2` que a contém — nota-se sobretudo na
   página de cookies, onde cada cookie é uma h3 com o nome em `code`. */
.prosa h3{font-size:clamp(18px, 2vw, 21px); margin:30px 0 10px; letter-spacing:-.01em}
.prosa h3 code{font-size:.86em; vertical-align:1px}
.prosa p, .prosa li{color:var(--ink-2); margin-bottom:14px; font-size:17px}
.prosa ul{padding-left:22px; margin:0 0 14px}
.prosa strong{color:var(--ink)}
.prosa code{background:var(--surface-2); padding:2px 6px; border-radius:5px; font-size:15px}

/* ==========================================================================
   Simulador — calmo de propósito
   ==========================================================================
   Aqui a pessoa está a trabalhar, não a ser convencida. A escala desce, o
   painel deixa de ser de altura total, e o que resta da linguagem é o espaço.
   ========================================================================== */
.trilho{display:flex; gap:6px; margin-bottom:30px; max-width:440px}
.trilho i{height:3px; flex:1; border-radius:2px; background:var(--rule-2)}
.trilho i.on{background:var(--acc)}
.trilho i.now{background:var(--ink-2)}

.passo-q h1{font-size:clamp(30px, 4.6vw, 46px)}
.passo-q .lede{margin-top:16px; font-size:19px; max-width:44ch}

.pergunta{margin-top:38px}
.txt{
  width:100%; max-width:440px; background:var(--paper); color:var(--ink);
  border:1px solid var(--rule-2); border-radius:14px; padding:16px 18px;
  font:400 19px/1.3 "Instrument Sans", system-ui, sans-serif;
}
.txt:focus{border-color:var(--acc); outline:none; box-shadow:0 0 0 4px var(--acc-soft)}
.aside{margin-top:10px; font-size:14px; color:var(--ink-3)}
.opcional{color:var(--ink-3); font-weight:400}

.campo{margin-bottom:20px; max-width:440px}
.lbl{display:block; font-size:14px; font-weight:700; margin-bottom:8px}

.opts{display:grid; gap:12px; max-width:440px}
.opt{
  text-align:left; background:var(--paper); color:var(--ink);
  border:1px solid var(--rule-2); border-radius:14px; padding:17px 20px;
  font:500 17px/1.3 "Instrument Sans", system-ui, sans-serif; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.opt:hover{border-color:var(--acc)}
.opt.sel{border-color:var(--acc); background:var(--acc-soft)}

.link{
  background:none; border:0; padding:0; cursor:pointer;
  font:500 16px/1 "Instrument Sans", system-ui, sans-serif; color:var(--link);
  text-decoration:underline; text-underline-offset:3px;
}
.voltar{font-size:16px; color:var(--ink-2); text-decoration:none}
.voltar:hover{text-decoration:underline}

.erro{margin-top:12px; font-size:15px; color:#b42318; font-weight:500}
:root[data-theme="dark"] .erro{color:#fda29b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .erro{color:#fda29b}}

.consent{
  display:flex; gap:12px; align-items:flex-start; max-width:480px;
  margin:26px 0 0; font-size:16px; color:var(--ink-2);
}
.consent input{margin-top:4px; flex:none; width:19px; height:19px; accent-color:var(--acc-deep)}

/* ---- resultado ---------------------------------------------------------- */
.figura{
  font-family:Fraunces, Georgia, serif; font-weight:700;
  font-size:clamp(64px, 15vw, 132px); line-height:.9; letter-spacing:-.04em;
  color:var(--ink); margin-top:10px;
}
.figura-sub{font-size:16px; color:var(--ink-3); margin-top:10px}

.aviso{
  margin-top:24px; padding:16px 18px; border-radius:14px;
  background:var(--amber-soft); color:var(--amber);
  border:1px solid color-mix(in srgb, var(--energia) 34%, transparent);
  font-size:16px; max-width:56ch;
}

.contas{
  margin-top:34px; background:var(--surface); border:1px solid var(--rule);
  border-radius:18px; padding:22px 24px; max-width:620px;
}
.contas summary{cursor:pointer; font-weight:700; font-size:16px}
.contas table{width:100%; border-collapse:collapse; margin-top:18px}
.contas th{text-align:left; font-weight:400; color:var(--ink-2); padding:10px 0; font-size:16px}
.contas td{text-align:right; font-weight:700; padding:10px 0; white-space:nowrap}
.contas p{font-size:16px; color:var(--ink-2)}

/* ==========================================================================
   Editorial — o que tira à página o ar de modelo
   ==========================================================================
   Três coisas, e nenhuma é decoração:
   assimetria (nem tudo centrado), margem com notas (como um documento
   impresso), e uma peça feita de propósito para este negócio — a escada de
   potência — em vez de três cartões iguais com ícones.
   ========================================================================== */

/* Uma coluna larga com margem à direita para as notas. Abaixo dos 900px a
   margem desce para debaixo do texto, que é onde cabe. */
.comnota{display:grid; gap:34px; grid-template-columns:minmax(0,1fr) 220px; align-items:start}
@media (max-width:900px){ .comnota{grid-template-columns:1fr; gap:22px} }

.nota{
  font-size:15px; line-height:1.55; color:var(--ink-3);
  border-left:2px solid var(--rule-2); padding-left:16px;
}
.nota b{color:var(--ink-2); font-weight:600}
@media (min-width:901px){ .nota{margin-top:12px} }

/* Uma linha fina com a espessura de um documento, não de uma interface. */
.regua{border:0; border-top:1px solid var(--rule); margin:0}

/* Serviços em lista editorial, não em três cartões iguais: a energia é o que
   fazemos hoje com uma ferramenta própria, os outros dois não são a mesma
   coisa, e três caixas do mesmo tamanho diziam que eram. */
.servicos{margin-top:56px; border-top:1px solid var(--rule)}
.servico{
  display:grid; gap:8px 30px; padding:34px 0; border-bottom:1px solid var(--rule);
  grid-template-columns:132px minmax(0,1fr) 220px; align-items:start;
}
@media (max-width:980px){ .servico{grid-template-columns:132px minmax(0,1fr)} .servico .servico-media{grid-column:1 / -1; max-width:340px; margin-top:8px} }
@media (max-width:720px){ .servico{grid-template-columns:1fr; gap:10px; padding:26px 0} .servico .servico-media{margin-left:0} }
.servico .quem{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); padding-top:7px;
}
.servico.principal .quem{color:var(--nota)}
.servico h3{margin-bottom:8px}
.servico p{color:var(--ink-2); font-size:17px; max-width:56ch}

/* A citação: o sítio onde a página fala em vez de descrever. */
.citacao{
  font-family:Fraunces, Georgia, serif; font-variation-settings:"SOFT" 40, "WONK" 1;
  font-size:clamp(26px, 4vw, 44px); line-height:1.18; letter-spacing:-.02em;
  max-width:20ch; margin:0;
}
.citacao .marca-cit{color:var(--nota)}

/* ==========================================================================
   A abertura da home — o palco
   ==========================================================================
   Vem do conceito em `landing/index.html` (07-09-2026), e o que se herdou dele
   foi a ATMOSFERA, não a técnica. O conceito desenha sobre uma tela fixa de
   1487x1058 com tudo em `position:absolute` e uma unidade `--u` presa à altura
   do ecrã. Aqui não: o site é fluido, e trazer a tela fixa obrigaria a repetir
   cada medida em `calc()` — ganhava-se o aspecto e perdia-se o único sistema
   de layout que a página tem.

   O que se trouxe, e chega:
   1. o lavado de fundo, que dá profundidade ao primeiro ecrã sem uma imagem
   2. a coluna da direita a deixar de ser só uma nota e passar a ter peça

   O que NÃO se trouxe, e está registado no sítio certo: as barras de
   comparação. Ver a nota em `.mapa`.
   ========================================================================== */
.painel.abertura{position:relative; overflow:hidden}
.painel.abertura > .shell{position:relative; z-index:1}

/* Dois lavados muito quietos — âmbar em cima à direita, teal em baixo à
   esquerda — que são as duas cores do sistema: a energia e as ações. Não é
   imagem, não pesa nada, e some-se em ecrãs pequenos onde só roubaria contraste
   ao texto. */
.brilho{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(112% 82% at 84% 22%, var(--amber-soft) 0%, transparent 60%),
    radial-gradient(88% 68% at 6% 88%, var(--acc-soft) 0%, transparent 56%);
  opacity:.7;
}
@media (max-width:720px){ .brilho{opacity:.45} }

/* A variante da margem para a abertura: a coluna da direita deixa de ser a
   tira de 220px das notas e passa a caber-lhe uma peça. Abaixo dos 900px o
   `.comnota` já desmonta para uma coluna, e isto vai atrás. */
@media (min-width:901px){
  .comnota.aberta{grid-template-columns:minmax(0,1fr) minmax(0,336px); gap:44px}
}

/* ---- o mapa das áreas ---------------------------------------------------
   A peça da direita. Do conceito herda o feitio do cartão — superfície, fio de
   1px, canto redondo, sombra — e a etiqueta em maiúsculas espaçadas.

   O QUE NÃO HERDA SÃO AS BARRAS, e a razão é factual e não estética. O conceito
   punha lado a lado "o que paga hoje" e "com os nossos preços" em €/kWh, com o
   vão tracejado a marcar a diferença. O site não pode desenhar essa barra, e
   di-lo por escrito no `simulador/resultado.php`: *"não sabemos o que paga hoje
   por kWh, e sem isso não há diferença nenhuma que possamos anunciar"*. Uma
   barra é uma afirmação com números; esta não tinha números para lhe corresponder.

   E na /energia as barras já existem, com valores verificados contra a Ficha de
   Informação Padronizada da MEO — ver `partials/escada-potencia.php`. Duplicá-las
   com uma ilustração seria trocar prova por desenho.

   Cada linha daqui é verificável no `#frentes` da mesma página. */
.mapa{
  background:var(--surface); border:1px solid var(--rule); border-radius:18px;
  padding:22px 22px 18px; box-shadow:var(--shadow);
}
.mapa-tit{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:16px;
}
.mapa-grupo{
  font-size:13px; color:var(--ink-3); font-weight:600;
  padding-bottom:9px; border-bottom:1px solid var(--rule); margin-bottom:4px;
}
.mapa-grupo + .mapa-lista{margin-bottom:20px}
.mapa-lista:last-of-type{margin-bottom:14px}

.mapa-lista{list-style:none; margin:0; padding:0}
.ml{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--rule);
}
.mapa-lista .ml:last-child{border-bottom:0}
.ml-nome{font-size:15.5px; color:var(--ink); font-weight:600}

/* A etiqueta de estado. Só duas existem, e a diferença entre elas é a única
   coisa que este cartão afirma: uma das cinco tem ferramenta pública, as outras
   quatro são trabalho por email. Dizê-lo aqui evita a página prometer cinco
   simuladores que não existem. */
.ml-estado{
  flex:none; font-size:12px; font-weight:600; letter-spacing:.01em;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:var(--surface-2); color:var(--ink-2);
}
.ml-estado.tem{background:var(--acc-soft); color:var(--acc-deep)}

.mapa + .nota{margin-top:22px}

.mapa-pe{
  margin-top:2px; padding-top:14px; border-top:1px solid var(--rule);
  font-size:14px;
}

/* ==========================================================================
   A escada de potência
   ========================================================================== */
.escada{margin:0}
.escada figcaption{max-width:46ch; margin-bottom:34px}
.escada figcaption h3{margin-bottom:10px}
.escada figcaption p{color:var(--ink-2)}

.escada-svg{width:100%; height:auto; display:block; overflow:visible}

.escada-svg .bar{fill:var(--barra)}
.escada-svg .alvo{fill:transparent}
.escada-svg .rot-kva{
  font:500 13px/1 "Instrument Sans", system-ui, sans-serif; fill:var(--ink-2);
  text-anchor:end; font-variant-numeric:tabular-nums;
}
.escada-svg .valor{
  font:500 13px/1 "Instrument Sans", system-ui, sans-serif; fill:var(--ink-3);
  font-variant-numeric:tabular-nums; opacity:0; transition:opacity .15s ease;
}
/* Rótulo directo só nos que carregam a leitura. Os outros aparecem ao passar o
   rato, e o `<title>` de cada barra serve quem não tem rato nenhum. */
.escada-svg .valor.fixo{opacity:1; fill:var(--ink-2)}
.escada-svg .linha:hover .valor{opacity:1}
.escada-svg .linha:hover .bar{filter:brightness(1.12)}
.escada-svg .linha.realce .bar{fill:var(--nota)}
.escada-svg .linha.realce .valor{fill:var(--nota); font-weight:700}
.escada-svg .linha.realce .rot-kva{fill:var(--ink); font-weight:700}

.escada-svg .chaveta{fill:none; stroke:var(--rule-2); stroke-width:1.5}
.escada-svg .nota-n{
  font-family:Fraunces, Georgia, serif; font-size:21px; font-weight:700;
  fill:var(--nota); font-variant-numeric:tabular-nums;
}
.escada-svg .nota-t{font:500 12px/1 "Instrument Sans", system-ui, sans-serif; fill:var(--ink-3)}
.escada-svg .eixo{
  font:600 10px/1 "Instrument Sans", system-ui, sans-serif; fill:var(--ink-3);
  letter-spacing:.1em; text-transform:uppercase;
}
/* Alinhado à direita para não entrar no rótulo do lado. Antes isto era um
   `:first-of-type`, que apanha o primeiro <text> irmão — e o primeiro é um
   rótulo de kVA, não este. Os dois rótulos de eixo ficavam sobrepostos. */
.escada-svg .eixo-e{text-anchor:end}

.escada-legenda{
  margin-top:26px; font-size:18px; line-height:1.5; color:var(--ink-2); max-width:52ch;
}
.escada-legenda b{color:var(--ink)}

.escada-tabela{margin-top:26px; font-size:15px}
.escada-tabela summary{cursor:pointer; color:var(--link); font-weight:600}
.escada-tabela table{border-collapse:collapse; margin-top:18px; font-variant-numeric:tabular-nums}
.escada-tabela caption{text-align:left; color:var(--ink-3); font-size:13px; padding-bottom:10px}
.escada-tabela th, .escada-tabela td{
  padding:7px 20px 7px 0; text-align:right; border-bottom:1px solid var(--rule);
  font-weight:400; color:var(--ink-2);
}
.escada-tabela thead th{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.escada-tabela tbody th{text-align:left; color:var(--ink); font-weight:600}
.escada-tabela .fonte{margin-top:16px; font-size:14px; line-height:1.55; color:var(--ink-3); max-width:62ch}
.escada-tabela .fonte b{color:var(--ink-2)}

/* ---- o simulador a falar ------------------------------------------------ */
.passo-conta{
  font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:20px;
}
/* A frase que diz que "não sei" é resposta e não desistência. Discreta, mas
   presente antes de a pessoa decidir fechar o separador. */
.tranquilo{
  margin-top:30px; padding:15px 18px; border-radius:14px;
  background:var(--surface); border:1px solid var(--rule);
  font-size:15px; line-height:1.55; color:var(--ink-2); max-width:440px;
}
.tranquilo b{color:var(--ink)}

.assinatura{max-width:58ch; line-height:1.6}
.assinatura a{color:var(--link)}

/* O formulário e o "obrigado" partilham a coluna de notas da home. Na coluna
   estreita as notas ganham títulos próprios, por isso o parágrafo colado ao
   topo precisa de ar. */
.nota p + p{margin-top:0}

/* A assinatura na nota da margem: um pouco mais escura do que o resto da nota,
   para se ler como quem assina e não como mais uma linha. */
.assina{display:block; margin-top:6px; color:var(--ink); font-weight:600}

/* ==========================================================================
   Media — imagem e vídeo
   ==========================================================================
   O encaixe reserva a proporção antes de o ficheiro chegar, para a página não
   saltar quando ele carrega. O marcador de "falta" só existe fora de produção:
   uma caixa vazia publicada diz ao visitante que o site está a meio, e ninguém
   repara que está a meio há três meses.
   ========================================================================== */
.media{margin:0}
.media-caixa{
  position:relative; overflow:hidden; border-radius:20px;
  background:var(--surface-2); aspect-ratio:var(--proporcao, 3 / 2);
}
.media-suave .media-caixa{box-shadow:var(--shadow); border:1px solid var(--rule)}
.media-nenhuma .media-caixa{border-radius:0}

.media-em{
  display:block; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform 1.2s cubic-bezier(.22,.8,.3,1);
}
/* Um avanço muito leve ao entrar no ecrã: 2% de escala a assentar. Chega para a
   imagem parecer viva sem virar carrossel. */
.media.dentro .media-em{transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .media-em, .media.dentro .media-em{transform:none; transition:none}
}

.media-selo-video{
  position:absolute; left:14px; bottom:14px;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 11px; border-radius:999px;
  background:color-mix(in srgb, var(--noite) 78%, transparent); color:#fff;
  backdrop-filter:blur(6px);
}
.media figcaption{margin-top:14px; font-size:15px; color:var(--ink-3); max-width:52ch}

.media-falta{
  display:flex; flex-direction:column; justify-content:center; gap:7px;
  aspect-ratio:var(--proporcao, 3 / 2); padding:26px;
  border:2px dashed var(--rule-2); border-radius:20px;
  background:var(--surface); color:var(--ink-2); font-size:15px;
}
.media-falta-t{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--nota);
}
.media-falta-p{line-height:1.5; max-width:46ch}
.media-falta-c{font-size:13px; color:var(--ink-3)}
.media-falta code{background:var(--surface-2); padding:2px 6px; border-radius:5px}

/* ---- a área de vídeo, quando é a peça da secção ------------------------- */
.palco{display:grid; gap:34px; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:center}
@media (max-width:900px){ .palco{grid-template-columns:1fr} }

/* ==========================================================================
   O esquema da fatura
   ========================================================================== */
.fatura{margin:0; display:grid; gap:26px; grid-template-columns:minmax(0,1fr) 260px; align-items:center}
@media (max-width:860px){ .fatura{grid-template-columns:1fr; gap:20px} }

.fatura-papel{
  background:var(--paper); border:1px solid var(--rule); border-radius:16px;
  padding:24px 26px 20px; box-shadow:var(--shadow); max-width:460px;
}
.fatura-topo{
  display:flex; align-items:center; gap:12px;
  padding-bottom:16px; margin-bottom:8px; border-bottom:1px solid var(--rule);
}
/* Um selo abstrato: não é a marca de ninguém, e é assim que fica. */
.fatura-selo{width:26px; height:26px; border-radius:7px; background:var(--surface-2); flex:none}
.fatura-tit{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}

.fl{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 12px; margin:0 -12px; border-radius:9px;
}
.fl-nome{font-size:15px; color:var(--ink-2)}
.fl-nome b{color:var(--ink); font-weight:600}
/* Os valores das outras linhas são barras e não números: é o que impede este
   esquema de se parecer com uma fatura verdadeira de alguém. */
.fl-borrao{height:9px; border-radius:5px; background:var(--surface-2); flex:none}
.fl-borrao.forte{background:var(--rule-2); height:11px}
.fl.total{margin-top:6px; padding-top:15px; border-top:1px solid var(--rule)}
.fl.total .fl-nome{color:var(--ink); font-weight:600}

.fl.destaque{background:var(--amber-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--energia) 40%, transparent)}
.fl.destaque .fl-nome{color:var(--amber)}
.fl.destaque .fl-nome b{color:var(--amber)}
.fl-valor{font-weight:700; color:var(--amber); font-size:15px}

/* A linha acende quando entra no ecrã — 700ms, e só uma vez. É a única
   animação do site que aponta para alguma coisa em vez de a apresentar. */
.revela .fl.destaque{background:transparent; box-shadow:inset 0 0 0 1px transparent}
.revela.dentro .fl.destaque{
  background:var(--amber-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--energia) 40%, transparent);
  transition:background .7s ease .25s, box-shadow .7s ease .25s;
}
@media (prefers-reduced-motion:reduce){
  .revela .fl.destaque{
    background:var(--amber-soft);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--energia) 40%, transparent);
  }
  .revela.dentro .fl.destaque{transition:none}
}
html:not(.js) .fl.destaque{
  background:var(--amber-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--energia) 40%, transparent);
}

.fatura-legenda{font-size:16px; line-height:1.55; color:var(--ink-2); display:flex; gap:12px}
.fatura-legenda b{color:var(--ink)}
.fatura-legenda em{display:block; margin-top:10px; font-size:14px; color:var(--ink-3); font-style:normal}
.fatura-seta{
  flex:none; width:2px; align-self:stretch; border-radius:2px;
  background:linear-gradient(var(--energia), transparent);
}

/* ==========================================================================
   As barras da escada — sem animação por barra, e é deliberado
   ==========================================================================
   Houve aqui um `scaleX` de 0 a 1, escalonado, para as barras crescerem do eixo
   para fora. Foi removido a 2026-09-05, e a razão registada na altura estava
   ERRADA — fica corrigida aqui porque a errada leva a conclusões erradas.

   O que se escreveu: que `transform` sobre um `<path>` de SVG com
   `transform-origin` em píxeis era instável entre browsers.

   O que se apurou depois: o `IntersectionObserver` **não estava a disparar de
   todo** no separador onde se testou — um observador criado de raiz sobre um
   `<span>` visível de 32×22 não produziu uma única chamada. O problema era do
   ambiente de teste automatizado, não do CSS. Num browser a sério a animação
   provavelmente funcionava.

   Mesmo assim fica removida, e por uma razão que se mantém: a rede de segurança
   do layout devolve a visibilidade ao fim de três segundos, e **três segundos
   com o gráfico invisível continua a ser mau** para a peça mais importante da
   página. O ganho era um floreado; o risco era não haver gráfico.

   Fica a revelação do conjunto, que é a que funciona.
   ========================================================================== */

/* ==========================================================================
   Vida: escalonamento, números a contar, e o que reage ao rato
   ==========================================================================
   Regra que não se quebra, e já custou uma vez: NENHUMA animação pode ser a
   única razão de um conteúdo estar visível. Tudo o que anima parte de um estado
   legível, ou tem rede de segurança no script do layout.
   ========================================================================== */

/* Escalonamento: cada elemento entra um pouco depois do anterior, pela ordem
   em que se leem. O `--i` vem do HTML. */
.revela{transition-delay:calc(var(--i, 0) * 70ms)}

/* O contador. O número final JÁ ESTÁ no HTML — o script conta de zero até ele.
   Sem script, ou com movimento reduzido, fica lá o número certo e mais nada. */
.conta{font-variant-numeric:tabular-nums}

/* As linhas de serviço ganham vida ao passar o rato: a régua acende e a linha
   desloca-se o suficiente para se saber que é um bloco, não texto solto. */
.servico{transition:background .25s ease, transform .25s ease; border-radius:14px; padding-left:14px; margin-left:-14px}
.servico:hover{background:var(--surface)}
.painel.macio .servico:hover{background:var(--paper)}
@media (prefers-reduced-motion:reduce){ .servico{transition:none} }

/* O trilho do simulador enche-se em vez de aparecer cheio. */
.trilho i{transition:background .45s ease}

/* Os cartões respiram ao passar o rato. */
.cartao{transition:transform .25s ease, box-shadow .25s ease}
.cartao:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){ .cartao, .cartao:hover{transform:none; transition:none} }

/* O rótulo que parte a lista de áreas em dois. Não é decoração: separa o que
   construímos do que apenas revemos, que são dois negócios diferentes. */
.grupo{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--nota); padding:26px 0 4px; border-top:1px solid var(--rule); margin-top:8px;
}
.servicos > .grupo:first-child{border-top:0; margin-top:0; padding-top:14px}
.servicos > .servico:last-child{border-bottom:0}

/* ==========================================================================
   O assistente
   ==========================================================================
   Apresentado como instrumento e não como personagem: sem cara, sem nome de
   pessoa, sem bolha no canto do ecrã. A confiança vem das fronteiras estarem à
   vista — o que sabe e o que não sabe, lado a lado, com o mesmo peso.
   ========================================================================== */
.agente{display:grid; gap:44px; grid-template-columns:220px minmax(0,1fr); align-items:start}
@media (max-width:820px){ .agente{grid-template-columns:1fr; gap:30px} }

.agente-marca{display:flex; justify-content:center}
.agente-svg{width:100%; max-width:200px; height:auto; overflow:visible}

/* Três anéis abertos e um núcleo. Lê-se como atenção e leitura, não como cara.
   Rodam devagar e em sentidos alternados: dá presença sem chamar por si. */
.agente-svg .anel{
  fill:none; stroke-linecap:round; transform-origin:60px 60px;
  stroke:var(--acc); stroke-width:2.5;
  stroke-dasharray:64 36;
}
.agente-svg .a1{animation:gira 26s linear infinite; opacity:.9}
.agente-svg .a2{animation:gira 18s linear infinite reverse; opacity:.65; stroke-dasharray:44 56}
.agente-svg .a3{animation:gira 12s linear infinite; opacity:.45; stroke-dasharray:28 72}
.agente-svg .nucleo{fill:var(--energia)}

@keyframes gira{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* Quem pediu menos movimento fica com a marca parada — e ela continua a ler-se,
   porque o desenho não depende da rotação para fazer sentido. */
@media (prefers-reduced-motion:reduce){
  .agente-svg .anel{animation:none}
}

.agente-texto h2{max-width:18ch}

.agente-limites{list-style:none; padding:0; margin:36px 0 0; display:grid; gap:16px; max-width:60ch}
.agente-limites li{display:flex; gap:13px; align-items:flex-start; font-size:16px; line-height:1.55; color:var(--ink-2)}
.agente-limites b{color:var(--ink)}

/* O que sabe e o que não sabe têm o MESMO peso visual. Se os limites
   aparecessem em cinzento pequeno por baixo, deixavam de ser uma promessa e
   passavam a ser letra miudinha — que é o contrário do que esta secção faz. */
.marca-sim, .marca-nao{
  flex:none; width:20px; height:20px; border-radius:50%; margin-top:2px;
  display:inline-block; position:relative;
}
.marca-sim{background:var(--acc-soft); box-shadow:inset 0 0 0 1.5px var(--acc)}
.marca-sim::after{
  content:""; position:absolute; left:6px; top:5px; width:5px; height:9px;
  border:solid var(--acc-deep); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.marca-nao{background:var(--amber-soft); box-shadow:inset 0 0 0 1.5px var(--nota)}
.marca-nao::after{
  content:""; position:absolute; left:5px; top:9px; width:10px; height:2px;
  background:var(--nota); border-radius:1px;
}

/* ---- a resposta do assistente ------------------------------------------- */
#saida-assistente{margin-top:26px}
.resposta{
  display:flex; gap:14px; align-items:flex-start; max-width:60ch;
  background:var(--surface); border:1px solid var(--rule); border-radius:16px;
  padding:20px 22px;
}
.resposta-marca{
  flex:none; width:14px; height:14px; border-radius:50%; margin-top:5px;
  background:var(--acc); box-shadow:0 0 0 4px var(--acc-soft);
}
.resposta-texto{font-size:17px; line-height:1.6; color:var(--ink)}
textarea.txt{resize:vertical; min-height:96px; font-family:inherit}