/* Estilos partilhados — homepage, guia e política de privacidade. */
/* ════════════════════════════════════════════════════════════
   Paleta e tipografia medidas no site publicado — não alteradas.
   O que muda é a forma como a informação é apresentada.
   ════════════════════════════════════════════════════════════ */
:root{
  --page:#FFFFFF;          /* fundo do site — branco */
  --surface:#FFFFFF;       /* fundo dos cartões */
  --band:#F5F7F2;          /* banda alternada, quase impercetível */
  --field:#F5F7F2;         /* campos de formulário, para se lerem sobre branco */
  --line:#DFE3DA;          /* bordas */
  --line-soft:#ECEFE8;
  --head:#152715;          /* títulos */
  --body:#4A5B46;          /* texto corrente */
  --primary:#0B5D2A;       /* botões */
  --deep:#0C2E1A;          /* verde profundo, para faixas grandes */
  --glow:#399E43;
  --eyebrow:#2F8137;   /* o --glow escurecido o suficiente para ser legivel como texto */          /* verde de destaque */
  --grad:linear-gradient(90deg,#0B5D2A,#399E43 55%,#9FC30A);
  --logo-grad:linear-gradient(90deg,#009F0A,#9FC30A 58%,#FFD90A);
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --gut:clamp(20px,5vw,56px);
  --max:1180px;
  --r:20px;                /* raio dos cartões, como no site atual */
  --tracoFio:#B9C3B4;   /* carril e setas do fluxo: visivel sem competir */
  --rbtn:12px;             /* raio dos botões — cantos suaves, não pílula */
  color-scheme:light;      /* o site nao tem tema escuro; os controlos seguem o claro */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--page)}
body{margin:0; background:var(--page); color:var(--body); font-family:var(--sans);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  /* clip e nao hidden: pela especificacao, overflow:hidden num eixo forca o
     outro a computar auto, e isso faz do <body> um contentor de scroll. Com
     o body a fazer scroll em vez da janela, o salto para #ancora deixa de
     funcionar em todo o site e o scrollY fica sempre a zero. O clip corta na
     horizontal exactamente na mesma, sem criar contentor nenhum. */
  overflow-x:clip}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{color:var(--head); margin:0; text-wrap:balance; letter-spacing:-.022em; line-height:1.08}
p{margin:0}
:where(a,button,input,textarea,summary,label,[tabindex]):focus-visible{outline:2px solid var(--glow); outline-offset:3px; border-radius:4px}
.shell{max-width:var(--max); margin:0 auto; padding-inline:var(--gut)}
section[id],footer[id]{scroll-margin-top:24px}   /* sem barra fixa, basta uma folga pequena */
/* O --glow nao chega para texto: a 12px da 3.2:1 sobre branco, e o minimo
   legivel sao 4.5:1. Este tom tem o mesmo matiz (126°) e a mesma saturacao
   (47%) — so desce a luminosidade de 42% para 34%, o suficiente para passar
   (4.86:1 sobre branco, 4.51:1 sobre a banda). Fica um token proprio porque
   o --glow e usado em 26 sitios onde e fundo ou traco, nao texto. */
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow)}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
/* ênfase no texto corrido — peso 600 e o tom dos títulos, nunca a negrito cheio */
p b, li b, .ans b, .dek b{font-weight:600; color:var(--head)}
/* So a faixa verde e que tem fundo escuro. O .fm-a esta sobre banda clara:
   com o branco, todo o negrito que la se pusesse ficava invisivel. */
#problema p b{color:#FFFFFF}

/* aviso de protótipo */
.todo{color:#8A6100; font-size:.92em; border-bottom:1px dotted currentColor; white-space:nowrap}

/* ── nav ─────────────────────────────────────────── */
/* ── marca ────────────────────────────────────────
   A barra de navegacao saiu: numa landing page so oferecia saidas para
   outras seccoes da propria pagina. A marca passou para dentro do hero,
   com mais presenca do que tinha na barra. */
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand svg{height:34px; width:auto}
.brand b{font-size:15px; font-weight:700; color:var(--head); letter-spacing:-.01em; line-height:1.15}
.brand span{display:block; font-size:11px; font-weight:400; color:var(--body); letter-spacing:.04em}

.marca-topo{display:inline-flex; align-items:center; gap:14px; text-decoration:none;
  margin-bottom:clamp(26px,3.4vw,42px)}
.marca-topo svg{height:clamp(60px,6.2vw,80px); width:auto; flex:none}
.marca-topo b{font-size:clamp(23px,2.4vw,31px); font-weight:700; color:var(--head);
  letter-spacing:-.02em; line-height:1.1}
.marca-topo span{display:block; font-size:12px; font-weight:400; letter-spacing:.07em;
  text-transform:uppercase; color:var(--body); margin-top:3px}
@media(max-width:620px){
  .marca-topo{gap:11px; margin-bottom:22px}
  .marca-topo svg{height:46px}
  .marca-topo b{font-size:19px}
  .marca-topo span{font-size:10.5px}
}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:14px; font-weight:600;
  text-decoration:none; padding:13px 22px; border-radius:var(--rbtn); border:1px solid transparent; cursor:pointer;
  font-family:inherit; transition:background .15s ease,border-color .15s ease}
.btn-p{background:var(--primary); color:#FFFFFF}
.btn-p:hover{background:var(--glow)}
.btn-g{border-color:var(--line); color:var(--head); background:var(--surface)}
.btn-g:hover{border-color:var(--head)}

/* ── HERO ──────────────────────────────────────────
   Abre só com a fotografia. O texto entra à medida que se faz
   scroll, com a página presa. Tudo começa em --r:1 (visível), por
   isso se o JS não correr o hero funciona como um hero normal. */
/* Hero convencional (Lei de Jakob): a headline le-se de imediato, sem ficar
   presa ao scroll. O percurso de 200vh saiu; o mobile ja funcionava assim. */
.hs{position:relative; height:auto}
.hero{position:relative; z-index:1; min-height:0; overflow:hidden;
  background:var(--page); padding-block:clamp(44px,5.5vw,76px)}
/* A fotografia nunca se mexe — sem zoom, sem deslocamento.
   O véu começa invisível (fundo limpo) e entra com o texto,
   só o suficiente para o tornar legível. Por defeito é 1, para que
   sem JavaScript o texto continue a ler-se. */
.hbg{position:absolute; inset:0; z-index:0; overflow:hidden}
.hbg img{width:100%; height:100%; object-fit:cover}
.hbg::after{content:""; position:absolute; inset:0; opacity:var(--veil,1);
  background:linear-gradient(100deg,var(--page) 28%,color-mix(in srgb,var(--page) 72%,transparent) 58%,color-mix(in srgb,var(--page) 26%,transparent))}
.hero .shell{position:relative; z-index:2; width:100%}
/* A marca abre o hero, centrada sobre a fotografia, e sai assim que o copy
   comeca a entrar. Fica escondida por defeito: sem JS o copy le-se logo, e
   uma marca por cima dele so estorvaria. O centro da foto e escuro
   (luminancia .12), por isso entra a versao branca. */
/* marca animada sobre a fotografia: saiu, roubava o lugar a headline */
.hmarca{position:absolute; inset:0; z-index:3; display:none; place-items:center;
  pointer-events:none; opacity:var(--lg,0);
  transform:scale(calc(1 - (1 - var(--lg,0)) * .055));
  transition:opacity .3s ease-out, transform .5s cubic-bezier(.22,.61,.36,1)}
.hmarca .lockup{width:min(470px,54vw); height:auto;
  filter:drop-shadow(0 2px 30px rgba(0,0,0,.42))}
/* So o raio e que se mexe — as letras ficam quietas. Duas camadas, porque
   duas animacoes no mesmo elemento anulavam-se: o grupo respira sem parar,
   o traco por dentro leva as batidas fortes de tempos a tempos. */
/* Oscila no mesmo sitio: sobe, inclina, desce, inclina para o outro lado.
   Ciclo completo em vez de ida-e-volta, para a inclinacao ir aos dois lados.
   Amplitude escolhida a medir: o viewBox de 901 desenha a 470px, por isso
   1 unidade = 0,52px — as 7 unidades de antes davam 3,7px e nao se viam. */
.hmarca .raio-vivo{transform-box:fill-box; transform-origin:50% 50%;
  animation:oscilar 3.4s ease-in-out infinite}
@keyframes oscilar{
  0%  {transform:translateY(0)     rotate(0deg)     scale(1);    filter:drop-shadow(0 0 6px rgba(159,195,10,.25))}
  25% {transform:translateY(-20px) rotate(2.4deg)   scale(1.06); filter:drop-shadow(0 0 18px rgba(255,217,10,.5))}
  50% {transform:translateY(-2px)  rotate(0deg)     scale(1.01); filter:drop-shadow(0 0 9px rgba(159,195,10,.3))}
  75% {transform:translateY(14px)  rotate(-2.1deg)  scale(.965); filter:drop-shadow(0 0 14px rgba(159,195,10,.35))}
  100%{transform:translateY(0)     rotate(0deg)     scale(1);    filter:drop-shadow(0 0 6px rgba(159,195,10,.25))}
}
/* a batida propriamente dita ocupa menos de um segundo e so volta 7s depois:
   e a raridade que a torna um chamariz em vez de ruido de fundo */
.hmarca .raio{transform-box:fill-box; transform-origin:50% 50%;
  animation:bater 5s cubic-bezier(.3,0,.25,1) infinite}
@keyframes bater{
  0%    {transform:scale(1);    filter:drop-shadow(0 0 0 rgba(255,217,10,0))}
  2.2%  {transform:scale(1.16); filter:drop-shadow(0 0 28px rgba(255,217,10,.9))}
  5.3%  {transform:scale(.982); filter:drop-shadow(0 0 6px rgba(255,217,10,.2))}
  8.1%  {transform:scale(1.1);  filter:drop-shadow(0 0 20px rgba(159,195,10,.65))}
  12.6% {transform:scale(1);    filter:drop-shadow(0 0 0 rgba(255,217,10,0))}
  100%  {transform:scale(1);    filter:drop-shadow(0 0 0 rgba(255,217,10,0))}
}
/* As letras tambem nao ficam quietas, mas no compasso delas: 4,3s contra os
   3,1s do raio. Os periodos nao sao multiplos um do outro, por isso nunca
   sincronizam — e o que impede que o conjunto parece mexer-se em bloco. */
/* As letras no compasso delas: 4,7s contra os 3,4s do raio. Os periodos nao
   sao multiplos um do outro, por isso nunca sincronizam — e o que impede que
   o conjunto parece mexer-se em bloco. Mais contido do que o raio: letras a
   abanar de mais leem-se logo como truque. */
.hmarca .letras{transform-box:fill-box; transform-origin:50% 50%;
  animation:bambolear 4.7s ease-in-out infinite}
@keyframes bambolear{
  0%  {transform:translate(0,0)         rotate(0deg)}
  25% {transform:translate(-6px,-16px)  rotate(-.62deg)}
  50% {transform:translate(0,3px)       rotate(.12deg)}
  75% {transform:translate(6px,13px)    rotate(.58deg)}
  100%{transform:translate(0,0)         rotate(0deg)}
}
@media(prefers-reduced-motion:reduce){
  .hmarca .raio,.hmarca .raio-vivo,.hmarca .letras{animation:none}
}
@media(prefers-reduced-motion:reduce){.hmarca{display:none}}
@media(max-width:980px){.hmarca{display:none}}
.hero-eyebrow{font-size:14px; letter-spacing:.17em}
.hcta .btn{position:relative; font-size:16px; padding:19px 34px;
  transition:background .15s ease, border-color .15s ease, transform .18s ease, box-shadow .25s ease}
.hcta .btn:hover{transform:translateY(-1px)}
.hcta .btn:active{transform:translateY(0)}
/* o verde pulsa devagar: um halo que abre e desaparece por fora do botao, sem
   mexer na cor nem no tamanho — a bater no mesmo compasso do raio do logotipo */
.hcta .btn-p{box-shadow:0 6px 20px -10px rgba(11,93,42,.55)}
.hcta .btn-p::before{content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; animation:halo 3.4s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes halo{
  0%  {box-shadow:0 0 0 0 rgba(57,158,67,.5)}
  70% {box-shadow:0 0 0 17px rgba(57,158,67,0)}
  100%{box-shadow:0 0 0 0 rgba(57,158,67,0)}
}
.hcta .btn-p:hover{box-shadow:0 11px 28px -10px rgba(11,93,42,.6)}
.hcta .btn-p:hover::before{animation-play-state:paused}   /* com o rato em cima ja tem a atencao */
/* o segundo aponta para baixo, que e para onde leva: a decomposicao da fatura */
.hcta .btn-g{background:color-mix(in srgb,var(--surface) 84%,transparent);
  border-color:color-mix(in srgb,var(--head) 24%,transparent);
  backdrop-filter:blur(3px)}
.hcta .btn-g:hover{background:var(--surface); border-color:var(--head)}
.btn:focus-visible{outline:2px solid var(--primary); outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .hcta .btn-p::before{animation:none}
  .hcta .btn:hover{transform:none}
}
@media(max-width:620px){.hcta .btn{font-size:14px; padding:14px 22px}}
/* Duas colunas: a mensagem a esquerda, o arranque da analise a direita.
   Tirar o pedido do fim da pagina e o que mais mexe na conversao. */
.hgrid{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(320px,.96fr);
  gap:clamp(24px,3.6vw,52px); align-items:center}
@media(max-width:980px){.hgrid{grid-template-columns:1fr; gap:26px}}
.hl{max-width:none}
.hl [data-rev]{opacity:var(--r,1); transform:translateY(calc((1 - var(--r,1))*26px));
  /* a roda do rato salta aos degraus; esta transição curta liga-os sem atrasar o scroll */
  transition:opacity .28s ease-out, transform .42s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.hl [data-rev]{transition:none}}
.hl h1{font-size:clamp(30px,3.9vw,52px); font-weight:700; margin:18px 0 0; letter-spacing:-.028em;
  line-height:1.07; text-wrap:balance; max-width:21ch}
/* A quebra fica em todos os tamanhos: desligada, as duas frases colavam-se
   uma a outra ("energia.Fazemos"), porque nao ha espaco no HTML. */
.hl h1 br{display:inline}
.hl .dek{font-size:clamp(16.5px,1.45vw,20px); max-width:46ch; margin:18px 0 0; line-height:1.5}
.hcta{display:flex; flex-wrap:wrap; gap:16px; margin-top:54px}
.hnote{font-size:16px; margin-top:38px; display:flex; flex-wrap:wrap; gap:10px 26px}
.hnote span{display:inline-flex; align-items:center; gap:7px}
.hnote span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--glow)}

/* ── arranque da analise, no hero ──
   Dois passos: aqui pede-se o minimo, o resto do formulario fica em baixo.
   Sem envio real — e um prototipo. */
.hform{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(18px,2.2vw,26px); box-shadow:0 1px 2px rgba(21,39,21,.05),0 18px 42px -24px rgba(21,39,21,.3)}
.hf-t{font-size:19px; font-weight:700; color:var(--head); letter-spacing:-.015em}
.hf-s{font-size:12px; font-weight:600; color:var(--body); margin-top:3px}
.hf-bar{height:5px; border-radius:999px; background:var(--line-soft); margin:13px 0 8px; overflow:hidden}
.hf-bar i{display:block; height:100%; width:50%; background:var(--grad);
  transition:width .45s cubic-bezier(.22,.61,.36,1)}
.hf-passo{font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--body); text-align:right; margin-bottom:18px}
.hf-falta{font-size:14.5px; font-weight:600; color:var(--primary); margin-bottom:16px}
/* os dois passos vivem no mesmo cartao: o segundo entra sem a pagina se mexer */
.hf-etapa[hidden]{display:none}
.hf-etapa{animation:entra-etapa .3s ease-out}
@keyframes entra-etapa{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.hf-etapa{animation:none}}
.hf-g2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
@media(max-width:1180px) and (min-width:981px){.hf-g2{grid-template-columns:1fr}}
@media(max-width:430px){.hf-g2{grid-template-columns:1fr}}
.hform .f{margin-bottom:14px}
.hform .drop{margin-bottom:4px}
.hf-voltar{display:block; width:100%; margin-top:12px; padding:8px; background:none; border:0;
  font-family:inherit; font-size:14px; color:var(--body); cursor:pointer}
.hf-voltar:hover{color:var(--head)}
.hf-l{font-size:13px; font-weight:600; color:var(--head); display:block; margin-bottom:7px}
.hf-pick{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px}
.hf-pick button{font-family:inherit; font-size:14px; font-weight:600; color:var(--head);
  background:var(--field); border:1.5px solid var(--line); border-radius:10px; padding:12px 8px; cursor:pointer}
.hf-pick button[aria-pressed="true"]{border-color:var(--primary); background:color-mix(in srgb,var(--glow) 12%,transparent); color:var(--primary)}
.hform input{font-family:inherit; font-size:15px; color:var(--head); background:var(--field);
  border:1px solid var(--line); border-radius:10px; padding:12px 13px; width:100%}
.hform input:focus{outline:0; border-color:var(--glow); box-shadow:0 0 0 3px color-mix(in srgb,var(--glow) 18%,transparent)}
.hform .btn-p{width:100%; margin-top:16px; padding:15px; font-size:15.5px}
/* micro-tranquilizadores colados ao botao, que e onde a duvida aparece */
.hf-note{display:flex; flex-wrap:wrap; justify-content:center; gap:5px 14px;
  margin-top:12px; font-size:12px; color:var(--body)}
.hf-note span{display:inline-flex; align-items:center; gap:5px}
.hf-note span::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--glow)}

/* No telemovel o topo tem de caber: menos respiracao entre blocos, para o
   arranque da analise aparecer sem obrigar a deslizar meia pagina. */
@media(max-width:620px){
  .hero{padding-block:26px 34px}
  .hl .dek{margin-top:14px}
  .hl .hnote{margin-top:18px; font-size:14.5px}


}

.cue{position:absolute; left:50%; translate:-50% 0; bottom:26px; z-index:3;
  display:none; flex-direction:column; align-items:center; gap:9px;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--head);
  opacity:var(--cue,1); text-shadow:0 1px 10px color-mix(in srgb,var(--page) 80%,transparent)}
.cue i{display:block; width:1px; height:30px; background:var(--head); transform-origin:top;
  animation:cueline 1.9s ease-in-out infinite}
@keyframes cueline{0%{transform:scaleY(.2);opacity:.3}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);opacity:.3}}

@media(max-width:980px){
  .hs{height:auto}
  .hero{position:static; height:auto; min-height:0; padding-block:clamp(52px,8vw,88px)}
  .cue{display:none}
}
@media(max-width:820px){
  .hl{max-width:none}
  .hbg::after{background:linear-gradient(180deg,color-mix(in srgb,var(--page) 78%,transparent),var(--page) 66%)}
}
@media(prefers-reduced-motion:reduce){
  .hs{height:auto}
  .hero{position:static; height:auto; min-height:0; padding-block:clamp(52px,8vw,88px)}
  .cue,.cue i{display:none; animation:none}
}

/* ── corrente: dois fios a atravessar a página entre o hero e os números ── */
.corrente{position:relative; height:clamp(44px,5vw,72px); background:var(--page);
  display:flex; align-items:center; overflow:hidden}
.corrente i{position:relative; display:block; width:100%; height:1px}   /* sem linha de base: só a luz é que se vê */
.corrente i::after{content:""; position:absolute; left:0; top:-1.5px; height:4px; width:18%;
  border-radius:3px; will-change:transform;
  filter:drop-shadow(0 0 7px rgba(159,195,10,.6))}
/* faixa de cima: a corrente vai da esquerda para a direita */
.corrente i::after{
  background:linear-gradient(90deg,transparent,#009F0A 30%,#9FC30A 58%,#FFD90A 78%,transparent);
  animation:corrente-ida 3.4s linear infinite}
/* faixa de baixo: volta no sentido contrário, como o retorno de um circuito */
.corrente.volta i::after{
  background:linear-gradient(90deg,transparent,#FFD90A 22%,#9FC30A 42%,#009F0A 70%,transparent);
  animation:corrente-volta 4.6s linear infinite; animation-delay:-1.2s}
@keyframes corrente-ida{from{transform:translateX(-120%)} to{transform:translateX(560%)}}
@keyframes corrente-volta{from{transform:translateX(560%)} to{transform:translateX(-120%)}}
@media(prefers-reduced-motion:reduce){.corrente i::after{animation:none; display:none}}

/* ── secção da fatura — estática, sem efeito de scroll ── */
.fstage{padding-block:clamp(56px,7.5vw,96px)}
.fgrid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  gap:clamp(26px,4.5vw,60px); align-items:center}
@media(max-width:980px){.fgrid{grid-template-columns:1fr; gap:32px}}

/* fatura */
.inv{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(16px,2.2vw,26px); box-shadow:0 1px 2px rgba(21,39,21,.04),0 12px 32px -18px rgba(21,39,21,.22)}
.inv-top{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:13px; border-bottom:1px solid var(--line-soft)}
.inv-top .t{font-size:12.5px; font-weight:600; color:var(--head)}
.inv-top .ex{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--primary); background:color-mix(in srgb,var(--glow) 16%,transparent); padding:4px 9px; border-radius:6px}
.row{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:baseline; padding:12px 0;
  border-bottom:1px solid var(--line-soft); position:relative}
.row .nm{font-size:14px; color:var(--body); transition:color .3s ease}
/* .7 dava 3.5:1 — a 11.5px isso e ilegivel para muita gente. .82 poe o
   cinzento efectivo em #6C7A69, que da 4.5:1, e continua a ler-se como
   nota secundaria debaixo do nome da rubrica. */
.row .nm small{display:block; font-size:11.5px; opacity:.82; margin-top:2px}
.row .vl{font-family:var(--mono); font-size:14.5px; font-variant-numeric:tabular-nums; color:var(--body);
  display:flex; align-items:baseline; gap:10px; justify-content:flex-end}
/* O estado final é o que está por defeito: sem JavaScript vê-se o resultado.
   A classe .antes é que recua para o momento em que só existe o valor antigo. */
/* O valor antigo esta num <s>, que o browser risca por conta propria. Esse
   risco nao obedece a classe .antes: ficava sempre la, e era ele que se via
   no estado inicial. O risco visivel e so o ::after, que e animado. */
.row .old{text-decoration:none;
  position:relative; color:var(--body); opacity:.4; transform:translateX(0);
  transition:opacity .4s ease var(--d2,.5s), transform .55s cubic-bezier(.4,0,.2,1) var(--d2,.5s)}
.row .old::after{content:""; position:absolute; left:-2px; right:-2px; top:52%; height:2px;
  background:#B3261E; transform:scaleX(1); transform-origin:left; border-radius:2px;
  transition:transform .45s cubic-bezier(.4,0,.2,1) var(--d1,0s)}
.row .new{color:var(--primary); font-weight:700; opacity:1;
  transition:opacity .4s ease var(--d3,.55s)}
.row:nth-child(2){--d1:.32s; --d2:.82s; --d3:.87s}
/* O recuo ao início do ciclo é instantâneo: sem isto via-se o risco a
   desdesenhar-se, e no primeiro carregamento via-se o número já riscado. */
.inv.sem-transicao .old,
.inv.sem-transicao .old::after,
.inv.sem-transicao .new,
.inv.sem-transicao .reveal,
.inv.sem-transicao .inv-tot .vl{transition:none !important}
/* recuo: o valor antigo sozinho, no lugar onde o novo vai ficar, sem risco */
.inv.antes .old{opacity:1; transform:translateX(var(--desloc,0px)); transition-delay:0s}
.inv.antes .old::after{transform:scaleX(0); transition-delay:0s}
.inv.antes .new{opacity:0; transition-delay:0s}
.inv.antes .reveal{opacity:0}
.inv.antes .inv-tot .vl{color:var(--head)}
.reveal{transition:opacity .45s ease 1.1s}
.inv-tot .vl{transition:color .4s ease 1.2s}
@media(prefers-reduced-motion:reduce){
  .inv.antes .old,.inv.antes .old::after,.inv.antes .new,.inv.antes .reveal{opacity:1; transform:none}
}
.row::before{content:""; position:absolute; left:-12px; right:-12px; top:0; bottom:0; border-radius:8px;
  background:color-mix(in srgb,var(--glow) 9%,transparent); opacity:0; transition:opacity .35s ease}
.row.on::before{opacity:1}
.row.on .nm,.row.on .vl{color:var(--head)}
.row.act::before{background:color-mix(in srgb,var(--glow) 17%,transparent); opacity:1}
.row.act .nm{color:var(--head); font-weight:600}
.row.act .vl{color:var(--primary); font-weight:600}
/* A etiqueta que marca as rubricas negociaveis. Estava construida em CSS e em
   JS mas nenhuma linha trazia data-tag, por isso nunca chegou a aparecer —
   e e exatamente o que sustenta os 71,8% mostrados mais acima. */
.row .tag{grid-column:1; justify-self:start; margin-top:7px;
  font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#FFFFFF; background:var(--primary);
  padding:3px 8px; border-radius:5px; white-space:nowrap}
/* a linha de varrimento saiu com o efeito de scroll */
.inv-tot{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:baseline; padding-top:14px}
.inv-tot .nm{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--body)}
.inv-tot .vl{font-family:var(--mono); font-size:clamp(21px,2.3vw,27px); font-weight:700; color:var(--head); font-variant-numeric:tabular-nums}

.reveal{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.rtxt{display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; justify-content:space-between}
.rtxt b{font-family:var(--mono); font-size:clamp(18px,2vw,23px); color:var(--primary); font-variant-numeric:tabular-nums; font-weight:700}
.rtxt span{font-size:13.5px; max-width:34ch; text-align:right}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fs{height:auto}
  .fstage{position:static; min-height:0}
}

/* ── secções ──────────────────────────────────────── */
.pad{padding-block:clamp(56px,7.5vw,96px)}
.band{background:var(--band)}
.shead{max-width:62ch; margin-bottom:clamp(28px,4vw,48px)}
.shead h2{font-size:clamp(26px,3.4vw,40px); font-weight:700; margin:11px 0 0}
.shead p{margin:14px 0 0; font-size:17.5px}

/* 0 · os passos que seguimos
   Ativação sequencial conduzida pelo scroll: o numeral acende, o ícone
   desenha-se traço a traço e o bloco assenta. pathLength="100" em cada
   traço permite animar sem medir nada em JS.
   Tudo arranca em --a:1 (completo), para funcionar sem JavaScript. */
.what{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,28px)}
.what>div{text-align:center; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--rbtn);
  position:relative; overflow:visible; padding:0;
  opacity:calc(.34 + var(--a,1)*.66);
  transform:translateY(calc((1 - var(--a,1)) * 14px));
  transition:opacity .5s ease, transform .45s cubic-bezier(.34,.1,.25,1),
             border-color .35s ease, box-shadow .45s ease;
  will-change:transform}
/* Os cartoes nao reagem ao rato. Sao informacao, nao sao botoes: qualquer
   realce ao passar por cima promete uma accao que nao existe. */

@media(prefers-reduced-motion:reduce){
  .what>div{transform:none; box-shadow:none}
}
/* a fotografia fecha o cartao, por isso arredonda-se a ela propria agora que
   o cartao deixou de recortar o que lhe sai por cima */
.foto{position:relative; margin:0; aspect-ratio:16/10; overflow:hidden;
  background:var(--band); border-radius:0 0 calc(var(--rbtn) - 1px) calc(var(--rbtn) - 1px)}
.foto img{width:100%; height:100%; object-fit:cover}

/* o texto abre o cartao e a fotografia fecha-o; flex:1 mantem as fotografias
   alinhadas entre cartoes, mesmo com listas de alturas diferentes */
.corpo{flex:1; display:flex; flex-direction:column; align-items:center;
  padding:calc(clamp(26px,2.8vw,34px) + 30px) clamp(18px,2vw,26px) clamp(22px,2.4vw,30px)}
/* 44px e exatamente o viewBox destes icones. Desenhados a 40 ficavam a 0,909
   da escala e os tracos caiam entre pixeis — dai o ar desfocado. A 1:1 e com
   traco mais grosso, assentam na grelha e leem-se nitidos. */
/* Metade dentro, metade fora: a placa assenta na aresta de cima do cartao.
   Obriga o cartao a nao recortar — dai o overflow:visible la em cima. */
/* Metade dentro, metade fora, sem placa. O fundo e um degrade que muda de cor
   exatamente a meio: a cor da seccao em cima, a do cartao em baixo. Assim
   abre uma falha na moldura em vez de lhe passar por cima. */
.what svg{position:absolute; top:0; left:50%; translate:-50% -50%; z-index:2;
  width:52px; height:52px; padding:6px 14px; box-sizing:content-box;
  background:linear-gradient(to bottom, var(--band) 0 50%, var(--surface) 50% 100%);
  overflow:visible;
  fill:none; stroke:var(--primary); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.what svg [pathLength]{stroke-dasharray:100; stroke-dashoffset:0}
.what svg .marca{stroke:var(--glow); stroke-width:3.2}
/* os pratos da balança são formas fechadas: levam preenchimento */
.what .prato,.no-ic .prato{fill:var(--primary)}
/* Os icones nao ficam parados: cada um mexe-se como aquilo que representa.
   Sem transform-box:view-box, que nem sempre pega em grupos: a escrita nao usa
   transformacao nenhuma, a seta so translada e a balanca gira em fill-box,
   que e o mesmo que ja move o raio do logotipo. */
.what .escreve{animation:escrever 4.2s ease-in-out infinite}
.what .escreve.l2{animation-delay:.34s}
.what .escreve.l3{animation-delay:.68s}
@keyframes escrever{
  0%  {stroke-dashoffset:100}
  20% {stroke-dashoffset:0}
  74% {stroke-dashoffset:0}
  88% {stroke-dashoffset:100}
  100%{stroke-dashoffset:100}
}
/* o fiel da balanca pende para um lado e para o outro, a partir do topo
   do prumo: 50% 0% da caixa do grupo cai exatamente sobre ele */
.what .balanca{transform-box:fill-box; transform-origin:50% 0%;
  animation:pender 3.6s ease-in-out infinite}
@keyframes pender{
  0%,100%{transform:rotate(0deg)}
  28%    {transform:rotate(6.5deg)}
  64%    {transform:rotate(-5.5deg)}
}
/* A seta que descia em ciclo saiu com o ícone que a usava. */
@media(prefers-reduced-motion:reduce){
  .what .escreve,.what .balanca{animation:none}
  .what .escreve{stroke-dashoffset:0}
}
.what>div.desenhar svg [pathLength]:not(.vivo){animation:tracar .8s cubic-bezier(.4,0,.2,1) both}
.what>div.desenhar svg .marca:not(.vivo){animation-delay:.34s}
@keyframes tracar{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.what h3{font-size:21px; font-weight:700; margin:0 0 13px; letter-spacing:-.018em}
.what ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;
  text-align:left; max-width:29ch}
.what li{position:relative; padding-left:18px; font-size:15px; line-height:1.45}
.what li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:2px;
  border-radius:2px; background:var(--glow)}
@media(max-width:820px){
  .what{grid-template-columns:1fr; gap:44px}
}
@media(prefers-reduced-motion:reduce){
  .what>div{opacity:1; transform:none}
  .what>div.desenhar svg [pathLength]{animation:none}
}

/* 0b · o problema — banda verde, uma citação e mais nada */
#problema{background:var(--deep); color:#FFFFFF; overflow:hidden;
  display:grid; grid-template-columns:1.18fr .82fr; align-items:center}
#problema .eyebrow{color:#9FC30A}
/* o texto alinha com o contentor do resto da página, mesmo sem .shell */
/* Composicao em diagonal: o dado encostado ao canto de cima, a nossa
   pergunta em baixo e alinhada a direita. O espaco entre os dois e o que
   faz a leitura cair de um para o outro. */
#problema .lado{padding-block:clamp(46px,5.6vw,78px);
  padding-left:max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
  padding-right:clamp(26px,3.4vw,56px);
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(54px,8vw,110px)}
/* O dado tem o mesmo tratamento da pergunta, um degrau abaixo em tamanho:
   a pergunta e que fecha a section, este prepara-a. Duas linhas, com a
   quebra posta a mao — sozinho partia em tres. */
/* Entram com o scroll: a citacao pela esquerda, a pergunta pela direita e um
   pouco depois. O repouso e --e:1, por isso sem JS ambas ja estao no sitio. */
#problema .dado,#problema .nossa{opacity:var(--e,1); will-change:transform;
  transition:opacity .34s ease-out, transform .62s cubic-bezier(.22,.61,.36,1)}
#problema .dado{transform:translateX(calc((1 - var(--e,1)) * -70px))}
#problema .nossa{transform:translateX(calc((1 - var(--e,1)) * 70px))}
@media(prefers-reduced-motion:reduce){
  #problema .dado,#problema .nossa{opacity:1; transform:none; transition:none}
}
#problema .dado{margin:0; max-width:41ch; color:#FFFFFF; font-weight:700;
  font-size:var(--frase); line-height:1.1; letter-spacing:-.03em;
  font-style:italic; text-indent:-.34em}   /* a aspa curva e mais estreita que a angular */
#problema .dado em{font-style:inherit; color:#FFD90A}
#problema .dado cite{display:block; margin-top:16px; font-style:normal; text-indent:0;
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb,#9FC30A 90%,transparent)}
@media(max-width:900px){
  #problema .dado{text-wrap:balance; max-width:none}
  #problema .dado br{display:none}
}
/* Todo o bloco escuro alinhado a esquerda: a citacao e a pergunta liam-se em
   eixos diferentes e a leitura saltava de um lado para o outro. */
#problema .nossa{align-self:flex-start; text-align:left}
#problema .nossa .rule{margin-left:0}
#problema .eolicas{position:relative; align-self:stretch; min-height:320px}
/* o verde dissolve-se na fotografia: sem corte a direito entre as duas metades */
#problema .eolicas::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, var(--deep) 0%, color-mix(in srgb,var(--deep) 55%,transparent) 22%,
    transparent 46%)}
#problema .eolicas img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%; border-radius:0}

/* numa metade de ecrã largo o painel chegaria a 3:1 e cortaria a fotografia quase
   toda; a altura mínima mantém o rácio perto do do ficheiro (2,28) */
@media(min-width:1600px){ #problema{min-height:min(72svh,700px)} }
@media(max-width:820px){
  #problema{grid-template-columns:1fr}
  #problema .lado{gap:clamp(30px,7vw,46px)}
  #problema .nossa{align-self:flex-start; text-align:left}
  #problema .nossa .rule{margin-left:0}
  #problema .dado{max-width:none}
  #problema .lado{padding-inline:var(--gut)}
  #problema .eolicas{order:-1; min-height:240px}
}
#problema{--frase:clamp(21px,2.9vw,33px)}   /* medido: a linha mais longa tem 36 caracteres e cabe ate 35px */
#problema blockquote{margin:0; font-size:var(--frase); font-weight:700;
  line-height:1.1; letter-spacing:-.03em; color:#FFFFFF; max-width:34ch; text-wrap:nowrap}
#problema blockquote br{display:inline}
@media(max-width:900px){#problema blockquote{text-wrap:balance; max-width:none}
  #problema blockquote br{display:none}}
#problema blockquote em{font-style:normal; color:#FFD90A}
#problema .rule{margin-top:clamp(20px,2.6vw,30px); height:3px; width:96px; border-radius:2px;
  background:linear-gradient(90deg,#9FC30A,#FFD90A)}
/* A citacao atribuida a ERSE saiu: nao temos a referencia do documento.
   Ficou uma afirmacao que se sustenta nos dados que a propria pagina mostra. */
#problema .dado{font-style:normal; text-indent:0}
#problema .nossa .custo{margin-top:16px; max-width:40ch; margin-left:0; font-size:16px;
  color:color-mix(in srgb,#FFFFFF 82%,transparent)}
/* O CTA da faixa escura e o unico amarelo da pagina: sobre verde profundo, e
   a cor que salta mais, e o halo chama o olho sem mexer o botao de sitio. */
.btn-claro{position:relative; background:#FFD90A; color:var(--deep);
  font-size:15.5px; font-weight:700; padding:16px 30px; margin-top:26px;
  box-shadow:0 10px 28px -12px rgba(255,217,10,.6);
  transition:background .15s ease, transform .18s ease, box-shadow .25s ease}

.btn-claro::before{content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; animation:halo-amarelo 3.4s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes halo-amarelo{
  0%  {box-shadow:0 0 0 0 rgba(255,217,10,.6)}
  70% {box-shadow:0 0 0 19px rgba(255,217,10,0)}
  100%{box-shadow:0 0 0 0 rgba(255,217,10,0)}
}
.btn-claro:hover{background:#FFE555; transform:translateY(-2px);
  box-shadow:0 16px 34px -12px rgba(255,217,10,.75)}
.btn-claro:hover::before{animation-play-state:paused}   /* com o rato em cima ja tem a atencao */
.btn-claro:active{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .btn-claro::before{animation:none}
  .btn-claro:hover{transform:none}
}
@media(max-width:820px){#problema .nossa .custo{margin-left:0}}

/* 1 · pilares — réguas, sem caixas */
/* Tres compromissos, sem cartao e sem icone. Cada um e uma linha de duas
   colunas: a afirmacao a esquerda, em corpo grande, a explicacao a direita.
   Nenhuma outra seccao da pagina esta disposta assim. */
.pill{display:grid; grid-template-columns:1fr; gap:clamp(28px,3.2vw,44px)}
.pill>div{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(14px,3vw,54px); align-items:baseline}
@media(max-width:760px){
  .pill{gap:26px}
  .pill>div{grid-template-columns:1fr; gap:8px}
}
.pill h3{font-size:clamp(20px,2.2vw,27px); font-weight:700; letter-spacing:-.022em;
  line-height:1.15; margin:0; text-wrap:balance}
.pill p{font-size:17px; line-height:1.6; max-width:48ch}
/* 2 · big numbers — ecrã inteiro, branco puro, texto ao mínimo.
   Os números sobem e convergem à medida que se faz scroll.
   Por defeito --n:1 (assentes), para funcionarem sem JavaScript. */
/* Encolhida: os tres numeros nao precisavam de meio ecra so para eles. */
#numeros{background:#FFFFFF; padding-block:clamp(28px,3.2vw,44px)}
#numeros .shell{max-width:1080px}   /* folga entre os números, sem filetes a separar */
.bn{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px);
  margin-top:clamp(14px,1.8vw,22px)}
.bn>div{opacity:var(--n,1);
  transform:translate(calc((1 - var(--n,1)) * var(--dx,0px)), calc((1 - var(--n,1)) * 64px))}
.bn>div:first-child{--dx:-46px}
.bn>div:nth-child(2){--dx:0px}
.bn>div:last-child{--dx:46px}
.bn .k{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;
  font-size:15.5px; font-weight:600; color:var(--head); letter-spacing:-.008em}
.bn .k li{line-height:1.45}
.bn .val{font-variant-numeric:tabular-nums; white-space:nowrap}
/* ponto que pulsa enquanto os números estão a contar */
.live{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--glow);
  margin-left:7px; opacity:0; transition:opacity .3s ease; vertical-align:middle}
.live.on{opacity:1; animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.45}}
@media(prefers-reduced-motion:reduce){.live{display:none}}
/* a unidade passa para baixo do número, para os dígitos poderem ocupar a coluna toda */
.bn .n{font-family:var(--mono); font-size:clamp(34px,4.3vw,58px); font-weight:700; color:var(--head);
  letter-spacing:-.05em; line-height:.95; white-space:nowrap;
  display:flex; flex-direction:row; align-items:baseline; gap:.12em}
/* a unidade vive ao lado do número e herda-lhe a cor: lê-se como uma coisa só */
.bn .n em{font-style:normal; font-size:.34em; font-weight:700; letter-spacing:-.02em; color:inherit}
.bn>div:nth-child(1) .n{color:var(--primary)}
.bn>div:nth-child(2) .n{color:#8A7A00}
@media(max-width:820px){
  .bn{grid-template-columns:1fr; gap:22px}
  .bn>div{--dx:0px !important}
}
@media(prefers-reduced-motion:reduce){.bn>div{opacity:1; transform:none}}

/* 3 · diagrama de barra empilhada */
/* Uma coluna so. Em duas, o grafico acabava a meio e as notas continuavam
   sozinhas: ficava meia pagina em branco a esquerda e o CTA ao abandono. */
.dg{display:grid; grid-template-columns:1fr; gap:clamp(22px,2.6vw,30px); align-items:start}
/* com a largura toda, a percentagem e o valor ficavam a meio metro do nome */
.dg > div:not(.notes){max-width:660px}
.stk-h{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:9px}
.stk-h .k{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase}
.stk-h b{font-family:var(--mono); font-size:27px; font-weight:700; color:var(--head)}
/* A barra e uma figura, nao uma faixa: a 60px de altura e a largura toda,
   lia-se como um separador gigante em vez de um grafico. */
.stkbar{display:flex; height:26px; border-radius:7px; overflow:hidden}
.stkbar i{display:block}
.stk-l{margin-top:6px}
/* Sem filete por linha: a grelha ja alinha os numeros, as linhas eram ruido. */
.sl{display:grid; grid-template-columns:11px 1fr auto auto; gap:13px; align-items:center;
  padding:11px 0; font-size:15px}
.sl u{width:11px; height:11px; border-radius:3px; text-decoration:none}
.sl .p{font-family:var(--mono); font-variant-numeric:tabular-nums; min-width:54px; text-align:right}
.sl .v{font-family:var(--mono); font-weight:600; color:var(--head); font-variant-numeric:tabular-nums; min-width:76px; text-align:right}
/* As quatro notas em grelha 2x2 no desktop e uma coluna no telemovel. */
/* Quatro blocos com titulo proprio em vez de quatro paragrafos corridos com
   o inicio a negrito: o titulo diz do que e, o corpo cabe em duas frases. */
.notes{display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(26px,3.2vw,40px) clamp(30px,3.6vw,54px);
  margin-top:clamp(18px,2.2vw,28px)}
.notes h3{margin:0 0 11px; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--primary)}
@media(max-width:760px){.notes{grid-template-columns:1fr}}
/* data e fonte dos valores, coladas ao grafico que descrevem */
.stk-fonte{font-size:12.5px; color:var(--body); margin:-2px 0 12px}
.notes p{font-size:15.5px; line-height:1.6; margin:0}
.notes p + p{margin-top:10px}
.notes b{color:var(--head); font-weight:600}
.notes hr{display:none}

/* 4 · barras ordenadas */
.erc{display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:0 clamp(20px,3vw,40px)}
.eb{padding:15px 0; border-top:1px solid var(--line)}
.eb .t{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.eb .c{font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--body)}
.eb .v{font-family:var(--mono); font-size:21px; font-weight:700; color:var(--head); font-variant-numeric:tabular-nums}
.eb .n{font-size:14.5px; margin:2px 0 10px}
.eb .track{height:6px; border-radius:999px; background:var(--line-soft); overflow:hidden}
.eb .track i{display:block; height:100%; background:var(--grad)}
.eb.tot .track{background:var(--head); height:3px}

/* 5 · workflow */
/* Tela de fluxo: cinco nós ligados por fios com corrente. Os nós mostram só
   o essencial — ícone, número, quem faz e o título. O detalhe aparece por
   baixo, ao passar o rato, fora do fluxo do documento para nada saltar. */
/* Sem espaco reservado por baixo: o detalhe passou para dentro do cartao e
   ja nao flutua por cima do ramo "nao tem a fatura a mao". */
.tela{position:relative; margin-top:clamp(22px,3vw,34px); padding-bottom:0}
.fluxo,.ramo{display:grid; align-items:stretch;
  grid-template-columns:minmax(0,1fr) minmax(54px,.62fr) minmax(0,1fr) minmax(54px,.62fr)
                        minmax(0,1fr) minmax(54px,.62fr) minmax(0,1fr) minmax(54px,.62fr) minmax(0,1fr)}
.fluxo{list-style:none; margin:0; padding:0}

/* GEOMETRIA DO DIAGRAMA — tudo assenta nestes números:
   padding-top 18 + placa 40 ⇒ o centro da placa fica a 38px do topo interior.
   É a essa altura que os fios e as setas se alinham. Mexer num, mexer nos outros. */
/* Sem cartao: cada passo e uma coluna de texto. O que os separa e o espaco
   da grelha e a seta entre eles. */
/* A etiqueta fica em posicao absoluta no topo: so dois dos cinco passos a
   tem, e sem isto os titulos dos outros subiam e desalinhavam. */
.no{position:relative; display:flex; flex-direction:column; align-items:flex-start;
  text-align:left; background:none; border:0; border-radius:0;
  padding:30px 10px 0 0}
/* Os cinco nos sao informacao: nao sao clicaveis, nao levantam, nao reagem
   ao rato. Quem quiser agir tem o CTA logo por baixo do fluxo. */
/* Os cinco cartoes sao brancos e iguais. A divisao do trabalho fica por
   conta das etiquetas VOCE e NOS. */


/* As bolas nos cantos saíram: nunca assentavam na linha e enchiam o desenho
   de pontos a competir com os ícones. O fio encosta ao cartão, e chega. */

/* Sem placa, centrado e com traco grosso. A GEOMETRIA muda com ele:
   borda 1 + padding 18 + icone 34 ⇒ centro a 36px do topo da linha.
   E a esse valor que o fio (35 + metade da sua altura) se alinha. */
/* Sem cartao nao ha aresta onde assentar: o icone volta ao fluxo, no topo
   da coluna. */
.no-ic{height:30px; display:grid; place-items:center; justify-items:start;
  margin:12px 0 0; color:var(--primary)}
.no-ic svg{width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round}
/* O número deixou de flutuar a cinzento no canto: fica ao lado da placa,
   centrado com ela pela altura de linha, e legível. */
.no-n{position:absolute; top:18px; left:66px; height:40px; line-height:40px;
  font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:.06em;
  color:color-mix(in srgb,var(--body) 55%,transparent)}
.no-q{position:absolute; top:0; left:0; font-size:9.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--body);
  padding:3px 9px; border-radius:999px;
  background:color-mix(in srgb,var(--head) 8%,transparent)}
.no.nosso .no-q{color:var(--primary);
  background:color-mix(in srgb,var(--primary) 13%,transparent)}
.no h3{font-size:15.5px; font-weight:700; margin:0; letter-spacing:-.012em; line-height:1.25;
  min-height:2.5em}   /* duas linhas sempre: mantem os titulos a mesma altura */

/* o detalhe vive fora do nó: assim o cartão nunca cresce nem empurra o vizinho */
/* O detalhe vive dentro do no, separado por um filete: informacao a serio nao
   fica escondida atras do rato, nem a flutuar por cima do que vem a seguir. */
/* Encostado ao título, não ao fundo do cartão: preso ao fundo, o filete de
   cada cartão parava a uma altura diferente conforme o texto fosse maior. */
/* Sem filete: cinco cartoes com uma linha cada eram cinco linhas repetidas.
   O que separa o titulo do detalhe e espaco. */
.no .detalhe{align-self:stretch; margin:16px 0 0;
  font-size:13.5px; line-height:1.5; color:var(--body)}
.no .detalhe b{color:var(--head)}

/* 38px = centro da placa. A seta é do mesmo tom do fio e está centrada nele. */
/* Seta desenhada: o eixo tem uma curva quase impercetivel e mantem a
   espessura mesmo quando estica (non-scaling-stroke); a ponta e cheia,
   de pincel, com os lados desiguais. 79px poe o centro aos 88 do topo
   do cartao, que e onde esta o meio dos titulos. */
.fio{position:relative; align-self:start; margin-top:87px; height:18px;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 22' preserveAspectRatio='none'><path d='M2 11 98 11' fill='none' stroke='%23B9C3B4' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>") left center/calc(100% - 32px) 22px no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path fill='%23B9C3B4' d='M2 1.8c5 2.3 9.8 4.7 14.3 7.2.4.2.4.6 0 .8-4.5 2.5-9.3 4.9-14.3 7.2-.6.3-1-.1-1-.7V2.5c0-.6.4-1 1-.7z'/></svg>") right 18px center/17px 17px no-repeat;}
.fio::after{display:none}
/* So o troco onde o trabalho passa de si para nos e que e verde. */
.fio.entrega{
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 22' preserveAspectRatio='none'><path d='M2 11 98 11' fill='none' stroke='%230B5D2A' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>") left center/calc(100% - 32px) 22px no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path fill='%230B5D2A' d='M2 1.8c5 2.3 9.8 4.7 14.3 7.2.4.2.4.6 0 .8-4.5 2.5-9.3 4.9-14.3 7.2-.6.3-1-.1-1-.7V2.5c0-.6.4-1 1-.7z'/></svg>") right 18px center/17px 17px no-repeat;}
/* A corrente luminosa saiu: quatro gradientes a correr ao mesmo tempo eram
   o que mais desarrumava o desenho, e não diziam nada que a seta não diga. */
.fio i{display:none}

/* O ramo desce do primeiro passo e vira para a nota, em cotovelo — e assim
   que um desvio se desenha num diagrama. Antes era um risco solto no meio
   do nada, sem ligar uma coisa a outra. */
.ramo{margin-top:0; display:flex; align-items:flex-start; gap:0}
/* O ramo desce do nó 01 — é aí que se anexa a fatura. A ligação estava a
   tracejado claro e não se via; passou a traço cheio, alinhada com a placa. */
/* O cotovelo e desenhado com o mesmo traco das setas — 2,4 de espessura,
   pontas redondas, a mesma cor — apenas sem ponta no fim. */
.ramo .desvio{flex:none; width:50px; height:45px; margin:0 0 0 14px; border:0;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 34' fill='none' stroke='%23B9C3B4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M1.4 4.5v10.5c0 6.2 5 11.2 11.2 11.2h19.1'/></svg>") no-repeat left top/50px 45px}
/* Deixou de ser caixa. E uma nota de margem pendurada no passo 01: a
   pergunta a verde, a resposta a seguir, na mesma linha de leitura. */
.no-alt{border:0; background:none; padding:22px 0 0; max-width:64ch}
.no-alt .bl{display:inline; font-size:16.5px; font-weight:700; color:var(--primary);
  letter-spacing:-.01em}
.no-alt p{display:inline; font-size:16.5px; line-height:1.6; margin:0}

@media(max-width:900px){
  /* LINHA DE TEMPO. Em coluna unica as setas ficavam reduzidas a um toco com
     um triangulo enorme, e os passos empilhavam-se sem ligacao nenhuma.
     Passa a haver um carril continuo a esquerda, com o icone pousado nele e
     o conteudo ao lado. O ramo da nota fica logo a seguir ao passo 01,
     porque com display:contents os nos passam a irmaos dele. */
  .tela{display:flex; flex-direction:column; padding:0}
  .fluxo{display:contents}
  .fluxo > li:nth-child(1){order:1}
  .ramo{order:2}
  .fluxo > li:nth-child(3){order:3}
  .fluxo > li:nth-child(5){order:4}
  .fluxo > li:nth-child(7){order:5}
  .fluxo > li:nth-child(9){order:6}
  .fio{display:none}   /* o carril substitui as setas */

  .no{position:relative; display:grid; grid-template-columns:34px minmax(0,1fr);
    column-gap:16px; align-items:start; padding:0 0 26px; text-align:left}
  /* o carril desce do icone ate ao passo seguinte */
  .no::before{content:""; position:absolute; left:16px; top:38px; bottom:0; width:2px;
    background:var(--tracoFio)}
  .no:last-of-type::before{display:none}
  /* o troco que desce do passo 02 e onde o trabalho passa para a EVA */
  .fluxo > li:nth-child(3)::before{background:var(--primary)}
  .no-ic{grid-column:1; grid-row:1; height:34px; width:34px; margin:0;
    place-items:center; background:var(--page); position:relative; z-index:1}
  .no-ic svg{width:28px; height:28px}
  .no-q{position:static; grid-column:2; grid-row:1; justify-self:start; margin-bottom:9px}
  .no h3{grid-column:2; min-height:0; font-size:16.5px}
  .no .detalhe{grid-column:2; align-self:auto; margin-top:8px; font-size:14.5px}

  /* a nota alinha com a coluna do conteudo, sem cotovelo */
  .ramo{display:block; padding:0 0 26px 50px; position:relative}
  .ramo::before{content:""; position:absolute; left:16px; top:-26px; bottom:0; width:2px;
    background:var(--tracoFio)}
  .ramo .desvio{display:none}
  .no-alt{padding:0; max-width:none}
}

/* 6 · formulário */
.fm{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(26px,4.5vw,60px); align-items:start}
@media(max-width:880px){.fm{grid-template-columns:1fr; gap:30px}}
.fm-a h2{font-size:clamp(26px,3.4vw,40px); font-weight:700; margin:11px 0 14px}
.fm-a p{max-width:38ch}
form{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,3vw,32px)}
.g2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:560px){.g2{grid-template-columns:1fr}}
.f{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.f label{font-size:13px; font-weight:600; color:var(--head)}
.f label u{color:var(--glow); text-decoration:none}
.f input,.f textarea{font-family:inherit; font-size:15px; color:var(--head); background:var(--field);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; width:100%}
.f textarea{min-height:82px; resize:vertical}
.f input:focus,.f textarea:focus{outline:0; border-color:var(--glow); box-shadow:0 0 0 3px color-mix(in srgb,var(--glow) 18%,transparent)}
.f input::placeholder,.f textarea::placeholder{color:color-mix(in srgb,var(--body) 62%,transparent)}
.drop{display:block; border:1.5px dashed var(--line); border-radius:14px; padding:22px; text-align:center;
  font-size:14px; cursor:pointer; background:var(--field)}
.drop:hover{border-color:var(--glow)}
.drop b{display:block; color:var(--head); font-size:15px; margin-bottom:4px}
.consent{display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; margin:20px 0 18px; padding-top:18px; border-top:1px solid var(--line-soft)}
.consent input{width:17px; height:17px; margin-top:2px; accent-color:var(--primary)}
.consent label{font-size:13.5px; line-height:1.6}
.consent a{color:var(--primary)}
form .btn-p{width:100%; padding:15px; font-size:15px}
form .btn-p:disabled{opacity:.45; cursor:not-allowed}
.falt{font-size:13.5px; text-align:center; margin-top:13px}
.falt a{color:var(--primary)}

/* 7 · FAQ */
.faq{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center;
  padding:19px 0; font-size:18px; font-weight:600; color:var(--head)}
summary::-webkit-details-marker{display:none}
summary i{font-style:normal; font-size:20px; color:var(--glow); transition:transform .2s ease; line-height:1}
details[open] summary i{transform:rotate(45deg)}
.ans{padding:0 0 20px; max-width:64ch; font-size:16.5px}
.ans p{margin-bottom:.75em} .ans p:last-child{margin-bottom:0}
.ans b{color:var(--head)}

/* 8 · footer */
/* O rodape fecha no mesmo verde da faixa do problema: a pagina abre em branco,
   passa pelo verde a meio e volta a fechar nele. Tudo o que la dentro herdava
   cores pensadas para fundo claro tem de ser redito — a comecar pelo .todo,
   que em castanho sobre verde escuro seria ilegivel. */
footer{background:var(--deep); color:color-mix(in srgb,#FFFFFF 78%,transparent);
  border-top:none; padding-block:clamp(48px,6vw,72px) 26px}
footer .brand b{color:#FFFFFF}
footer .brand span{color:color-mix(in srgb,#FFFFFF 56%,transparent)}
footer .fg h3{color:color-mix(in srgb,#9FC30A 92%,transparent)}
footer .fg a{color:#FFFFFF}
footer .fg a:hover{color:#FFD90A}
footer .fg .tag{color:color-mix(in srgb,#FFFFFF 76%,transparent)}
footer .legal{border-top:1px solid color-mix(in srgb,#FFFFFF 16%,transparent);
  color:color-mix(in srgb,#FFFFFF 56%,transparent)}
footer .todo{color:#FFD90A}
.fg{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) repeat(2,minmax(0,1fr)); gap:clamp(22px,4vw,44px); padding-bottom:32px}
@media(max-width:880px){.fg{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fg{grid-template-columns:1fr}}
/* h3 e nao h4: o ultimo titulo antes do rodape e sempre um h2, e saltar
   directamente para h4 deixava um buraco na hierarquia em todas as paginas.
   O tamanho e o mesmo — o nivel do titulo e estrutura, nao aparencia. */
.fg h3{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--body); margin-bottom:14px}
.fg ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:15px}
.fg a{text-decoration:none} .fg a:hover{color:var(--primary)}
.fg .tag{margin-top:14px; max-width:34ch; font-size:15.5px}
.legal{padding-top:20px; border-top:1px solid var(--line); font-size:13px;
  display:flex; flex-wrap:wrap; gap:6px 24px; line-height:1.8}

/* As duas regras numa afirmacao so, em corpo grande. Nao e uma grelha nem
   sao cartoes: e a empresa a dizer o que faz aos dados, em voz corrida. */
.regras{max-width:38ch; font-size:clamp(17.5px,1.7vw,22px); font-weight:600;
  line-height:1.4; letter-spacing:-.022em; color:var(--head);
  margin-top:clamp(20px,2.4vw,30px)}
.regras b{color:var(--primary); font-weight:700}
@media(min-width:880px){.regras{max-width:52ch}}
.regras-link{margin-top:clamp(20px,2.4vw,28px); font-size:16px}
.regras-link a{color:var(--primary); font-weight:600; text-decoration:none;
  border-bottom:2px solid color-mix(in srgb,var(--glow) 45%,transparent)}
.regras-link a:hover{border-bottom-color:var(--primary)}
/* ══ Fase 3 — páginas do guia e política ═══════════════════════ */

/* Mais largo: 72ch dava uma coluna estreita de mais para paginas que sao
   so texto. 84ch mantem a linha legivel e ocupa a pagina. */
.artigo{max-width:84ch; padding-block:clamp(38px,5vw,64px)}
.artigo .migalhas{font-size:13px; color:var(--body); margin-bottom:18px}
.artigo .migalhas a{color:var(--body)}
.artigo .migalhas a:hover{color:var(--head)}
.artigo h1{font-size:clamp(28px,3.6vw,44px); font-weight:700; letter-spacing:-.03em;
  line-height:1.08; text-wrap:balance}
.artigo .resumo{font-size:clamp(17.5px,1.6vw,21px); line-height:1.55; margin-top:18px}
.artigo h2{font-size:clamp(21px,2.2vw,27px); font-weight:700; letter-spacing:-.02em;
  margin-top:clamp(34px,3.6vw,48px)}
.artigo h3{font-size:18px; font-weight:700; margin-top:26px}
.artigo p{margin-top:15px; font-size:17px; line-height:1.68}
.artigo ul{margin:14px 0 0; padding-left:0; list-style:none}
.artigo li{position:relative; padding-left:20px; margin-top:10px; font-size:17px; line-height:1.62}
.artigo li::before{content:""; position:absolute; left:0; top:11px; width:9px; height:2px;
  border-radius:2px; background:var(--glow)}
.artigo .fonte{font-size:13.5px; color:var(--body); border-left:2px solid var(--line);
  padding-left:14px; margin-top:20px}
.artigo table{width:100%; border-collapse:collapse; margin-top:18px; font-size:15.5px}
.artigo th,.artigo td{text-align:left; padding:11px 12px 11px 0; border-bottom:1px solid var(--line)}
.artigo th{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--body)}

/* páginas relacionadas, no fim de cada artigo */
.relacionados{margin-top:clamp(34px,4vw,48px); padding-top:24px; border-top:1px solid var(--line)}
.relacionados h2{font-size:14px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--body); margin:0}
/* Colunas fixas em vez de auto-fit/auto-fill. Sao sempre seis cartoes, por
   isso 2 colunas no telemovel e 3 no desktop dao sempre filas completas —
   3x2 e 2x3 — sem nenhum cartao esticado a preencher o que sobra.
   Com auto-fit, uma fila incompleta alargava os cartoes que la estavam e
   ficavam maiores do que os de cima. Em coluna unica o bloco ficava com
   431px no telemovel, mais de meio ecra so para "continuar a ler". */
.relacionados ul{list-style:none; margin:14px 0 0; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:10px}
@media(min-width:700px){.relacionados ul{grid-template-columns:repeat(3,1fr)}}
.relacionados li{padding:0}
.relacionados li::before{display:none}
/* mais apertados do que eram: passaram de tres para seis, e com o espacamento
   antigo o bloco do fim do artigo ficava maior do que a ultima seccao do texto */
.relacionados a{display:block; padding:12px 14px; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--rbtn); background:var(--surface);
  font-size:14.5px; font-weight:600; line-height:1.3; color:var(--head)}
.relacionados a:hover{border-color:var(--primary); color:var(--primary)}

/* índice do guia */
/* auto-FILL e nao auto-fit: com sete artigos a ultima fila tem um cartao
   so, e o auto-fit esticava-o a toda a largura. O auto-fill deixa as colunas
   vazias e ele fica do tamanho dos outros. Mesmo motivo do .relacionados. */
.indice{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:clamp(16px,2vw,24px); margin-top:clamp(26px,3vw,38px)}
.indice a{display:block; padding:24px; text-decoration:none; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r)}
.indice a:hover{border-color:var(--primary); box-shadow:0 12px 30px -22px rgba(11,93,42,.7)}
/* h3 e nao h2: cada cartao esta agora dentro de um grupo com o h2 da
   categoria por cima. O tamanho e o mesmo — o nivel e estrutura. */
.indice h3{font-size:19px; font-weight:700; color:var(--head); margin:0; letter-spacing:-.015em}
.indice p{margin-top:9px; font-size:15px; line-height:1.55; color:var(--body)}

/* ══ Fase 3 — footer ═══════════════════════════════════════════ */

.fg .todo{display:inline-block}

/* o negrito dentro da faixa de CTA (a resposta sobre como a EVA e paga) */
/* CTA de fim de seccao. Estas regras tinham-se perdido num corte anterior e o
   botao colava-se ao que vinha por cima — dai aparecer encavalitado. */
.cta-linha{display:flex; flex-wrap:wrap; align-items:center; gap:18px 32px;
  margin:clamp(36px,4.6vw,58px) 0 6px; padding:0;
  background:none; border:0; border-radius:0}
.cta-linha .btn{font-size:16px; padding:17px 30px;
  box-shadow:0 8px 22px -12px rgba(11,93,42,.65)}
.cta-linha .btn:hover{box-shadow:0 12px 26px -12px rgba(11,93,42,.7)}
.cta-linha span{font-size:clamp(17px,1.6vw,20px); font-weight:600; line-height:1.45;
  color:var(--head); max-width:42ch; letter-spacing:-.012em}
.cta-linha b{color:var(--head); font-weight:600}
@media(max-width:860px){
  .cta-linha{flex-direction:column; align-items:stretch; text-align:left}
  .cta-linha .btn{width:100%; order:2}
  .cta-linha span{order:1; font-size:15px}
}
/* fecho do FAQ: nao e um botao, e um convite a ligar ou escrever */
.cta-duvida{display:block}
.cta-duvida span{max-width:none; font-size:17px; font-weight:600}
.cta-duvida a{color:var(--primary); font-weight:700; text-decoration:none;
  white-space:nowrap;
  border-bottom:2px solid color-mix(in srgb,var(--glow) 45%,transparent)}
.cta-duvida a:hover{border-bottom-color:var(--primary)}

/* CTA sozinho, sem frase ao lado: fica centrado, que é onde o olho o procura
   quando não há mais nada na linha. */
.cta-so{justify-content:center}
@media(max-width:860px){.cta-so .btn{width:auto; min-width:min(100%,340px)}}


/* Indicativo ao lado do número, não dentro dele. O seletor é nativo de
   propósito: no telemóvel abre a roda do sistema, que toda a gente já sabe usar. */
.f-tel{display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px}
.f-tel select{font-family:inherit; font-size:15px; font-variant-numeric:tabular-nums;
  color:var(--head); background:var(--field); border:1px solid var(--line);
  border-radius:10px; padding:11px 9px; cursor:pointer}
.f-tel select:focus{outline:0; border-color:var(--glow);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--glow) 18%,transparent)}

/* ══ Reposto: blocos perdidos num corte de CSS ═════════════════ */

/* quem está por trás — três afirmações com um acento curto de cor */
.quem{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,44px)}
@media(max-width:820px){.quem{grid-template-columns:1fr; gap:30px}}
.quem > div{padding:0; border:0}
.quem b{display:block; font-size:clamp(22px,2.2vw,28px); font-weight:700;
  color:var(--head); letter-spacing:-.028em; line-height:1.15}
.quem > div::after{content:""; display:block; width:46px; height:3px; border-radius:2px;
  margin:14px 0 0; background:var(--head)}
.quem > div:nth-child(2)::after{background:var(--glow)}
.quem > div:nth-child(3)::after{background:#9FC30A}
.quem span{display:block; margin-top:14px; font-size:16px; max-width:32ch; line-height:1.55}
/* a equipa só aparece quando houver nomes e fotografias reais */
.equipa{margin-top:clamp(28px,3.4vw,42px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:22px}
.equipa[hidden]{display:none}

/* formulário do hero */
.hf-pick-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1180px) and (min-width:981px){.hf-pick-3{grid-template-columns:1fr 1fr}}
@media(max-width:420px){
  .hf-pick-3{grid-template-columns:1fr 1fr}
  .hf-pick-3 button:last-child{grid-column:1 / -1}
}
.hf-opcional{font-size:12.5px; color:var(--body); text-align:center; margin:8px 0 16px}
.hf-sem-fatura[hidden]{display:none}
.hf-ajuda{font-size:12.5px; color:var(--body); line-height:1.45; margin-top:6px}
/* os erros aparecem onde o erro está, nunca no topo do formulário */
.hf-erro{font-size:13px; font-weight:600; color:#B3261E; margin:7px 0 0}
.hf-erro[hidden]{display:none}
.hform input.erro{border-color:#B3261E; box-shadow:0 0 0 3px rgba(179,38,30,.13)}
.hform textarea{font-family:inherit; font-size:15px; color:var(--head); background:var(--field);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; width:100%;
  min-height:78px; resize:vertical}
.hform textarea:focus{outline:0; border-color:var(--glow);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--glow) 18%,transparent)}
/* a confirmação substitui o formulário, para não restar dúvida de que foi */
.hf-feito{text-align:center; padding:18px 0 6px}
.hf-feito-ic{width:46px; height:46px; margin:0 auto 14px; border-radius:50%;
  background:color-mix(in srgb,var(--glow) 16%,transparent); color:var(--primary);
  font-size:23px; font-weight:700; line-height:46px}
.hf-feito-t{font-size:19px; font-weight:700; color:var(--head); letter-spacing:-.015em}
.hf-feito-s{font-size:15px; color:var(--body); margin-top:7px}

/* nota do IVA, colada ao total da fatura de exemplo */
.inv-tot .sem-iva{display:block; font-style:normal; font-size:10.5px; font-weight:600;
  letter-spacing:.06em; text-transform:none; color:var(--body); margin-top:3px}

/* Texto em cima a ocupar a largura, e em baixo uma linha so com o botao e,
   a seguir, o link da politica — separados por espaco, nao por filete. */
#garantias .shell{display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:0 clamp(22px,3vw,44px); align-items:start}
#garantias .shead{grid-column:1 / -1; margin-bottom:0}
#garantias .regras{grid-column:1 / -1; margin-top:clamp(18px,2.2vw,28px)}
#garantias .cta-linha{grid-column:1; grid-row:3; align-self:center;
  margin:clamp(26px,3.2vw,40px) 0 0; flex-direction:row; align-items:center}
#garantias .regras-link{grid-column:2; grid-row:3; align-self:center;
  margin:clamp(26px,3.2vw,40px) 0 0}
@media(max-width:620px){
  #garantias .shell{grid-template-columns:1fr}
  #garantias .cta-linha,#garantias .regras-link{grid-column:1; grid-row:auto}
  #garantias .regras-link{margin-top:18px}
}

/* Data de atualização nos artigos do guia. Os motores de resposta
   despriorizam conteúdo sem data — não sabem se é de ontem ou de 2015. */
.artigo .datado{margin-top:12px; font-size:13.5px; color:var(--body)}

/* Erro de envio: fica debaixo do botao, centrado com ele, e com espaco em
   cima para nao parecer legenda do botao. */
.hf-erro-geral{text-align:center; margin-top:12px; line-height:1.45}

/* O <picture> do hero e so um invólucro para o browser escolher entre AVIF,
   WebP e JPG — nao pode introduzir uma caixa nova no layout, senao o
   width:100%/height:100% da imagem passava a medir-se contra ele em vez de
   contra o .hbg. Ocupa exactamente o lugar que a <img> ocupava. */
.hbg picture{position:absolute; inset:0; display:block}

/* ── cabecalho das subpaginas ────────────────────────────────────────
   A homepage nao tem cabecalho de proposito: e uma landing page, e cada
   link no topo e uma saida antes do formulario. As outras paginas tem,
   porque ai a pessoa precisa de caminho de volta.

   Estas regras faltavam. As classes .topo, .marca e .tel estavam no HTML
   das subpaginas desde o inicio sem uma linha de CSS que as apanhasse, e o
   logo saia em tamanho natural a encher o ecra. */
.topo{border-bottom:1px solid var(--line); background:var(--page); padding-block:14px}
.topo .shell{display:flex; align-items:center; gap:clamp(12px,2vw,24px)}

/* margin-right:auto empurra o telefone e o botao para a direita sem
   precisar de space-between, que abriria buracos quando o telefone sai */
.topo .marca{display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; margin-right:auto}
.topo .marca svg{height:38px; width:auto; flex:none}
.topo .marca b{font-size:17px; font-weight:700; color:var(--head);
  letter-spacing:-.02em; line-height:1.1}
.topo .marca span{display:block; font-size:10.5px; font-weight:400;
  letter-spacing:.07em; text-transform:uppercase; color:var(--body); margin-top:2px}

.topo .tel{font-size:15px; font-weight:600; color:var(--head);
  text-decoration:none; white-space:nowrap}
.topo .tel:hover{color:var(--primary)}
.topo .btn{font-size:14.5px; padding:11px 18px; white-space:nowrap}

@media(max-width:720px){
  /* o numero sai: o botao e o caminho principal e o telefone esta no rodape */
  .topo .tel{display:none}
  .topo .marca svg{height:32px}
  .topo .marca b{font-size:15px}
  .topo .marca span{display:none}
}
@media(max-width:420px){
  .topo .btn{font-size:13px; padding:10px 13px}
}

/* ── "Onde para o seu dinheiro", no desktop ──────────────────────────
   O grafico tem 660px e a coluna tem 1068px: encostado a esquerda sobrava
   um vazio grande a direita e o bloco ficava ao abandono. Passa ao eixo
   central, e o cabecalho acompanha — se so o grafico fosse ao centro,
   ficavam dois eixos diferentes na mesma seccao.

   As notas ficam como estao: sao paragrafos, e texto corrido centrado
   custa a ler. O limite e o mesmo ja usado para as notas passarem a uma
   coluna, para nao haver dois pontos de quebra a competir aqui. */
@media(min-width:761px){
  #mercado .shead{margin-inline:auto; text-align:center}
  #mercado .dg > div:not(.notes){margin-inline:auto}
}

/* Ressalva permanente — nao e um espaco por preencher.
   O amarelo do .todo fica reservado para o que falta o cliente responder. Se
   as duas coisas partilhassem a cor, dizer "o amarelo e o que falta
   preencher" obrigava logo a uma excepcao a meio da frase.
   Cinzento neutro a 5.1:1 sobre branco: discreto, mas bem acima do minimo
   legivel de 4.5:1. Sem o sublinhado pontilhado, que e o que faz o .todo
   parecer uma coisa por fazer. */
.ressalva{color:#6E6E6E; font-size:.92em}

/* A seccao dos paineis tem dois blocos .notes seguidos; com o espacamento
   normal o conjunto respirava de mais e lia-se como pecas soltas. */
#solar .notes{margin-top:clamp(12px,1.4vw,18px)}
#solar .regras{margin-top:clamp(14px,1.6vw,20px)}

/* ── grupos do guia ──────────────────────────────────────────────────
   O rodape lista categorias e nao artigos: artigos acumulam-se e aquela
   coluna, com trinta deles, ficava impossivel. Aqui e o mesmo principio —
   o indice agrupa em vez de alinhar, e cada grupo tem uma ancora para onde
   o rodape aponta. Um artigo novo entra num grupo que ja existe. */
.grupo{margin-top:clamp(34px,4.6vw,56px); scroll-margin-top:24px}
.grupo .cat-intro{margin-top:7px; font-size:16px; line-height:1.55; color:var(--body); max-width:60ch}
.grupo .indice{margin-top:clamp(16px,2vw,22px)}

/* ── faixa de logotipos de clientes ──────────────────────────────────
   ESQUELETO. A seccao tem o atributo hidden e nao esta a ser mostrada.
   Fica a seguir aos numeros de proposito: e ali que a prova social vale
   mais, logo a seguir a quem ja leu a promessa e antes de descer.

   PARA A LIGAR: tirar o hidden da <section id="clientes"> e substituir
   cada [A PREENCHER] por um <img>. Cada logotipo liga a sua empresa em
   clientes.html#id-da-empresa. Ver as instrucoes no topo do clientes.html.

   Regra pratica: manter alturas semelhantes entre logotipos, senao a
   faixa fica aos altos. O max-height abaixo trata da maioria dos casos. */
#clientes[hidden]{display:none}
.logos{list-style:none; margin:clamp(18px,2.2vw,26px) 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:clamp(12px,1.6vw,20px)}
.logos li{padding:0}
.logos li::before{display:none}
.logos a{display:flex; align-items:center; justify-content:center; min-height:66px;
  padding:12px; text-decoration:none; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--rbtn)}
.logos a:hover{border-color:var(--primary)}
.logos img{max-width:100%; width:auto; height:auto; max-height:42px}

/* A garantia sobre os dados, debaixo do consentimento. Estava numa seccao
   propria oito ecras abaixo; a hesitacao em entregar a fatura acontece aqui.
   Discreta de proposito: e para tranquilizar quem ja esta a decidir, nao
   para disputar atencao com o botao. */
.hf-dados{margin-top:10px; font-size:12.5px; line-height:1.5; color:var(--body)}
.hf-dados a{color:var(--primary); font-weight:600; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--primary) 35%,transparent)}
.hf-dados a:hover{border-bottom-color:var(--primary)}

/* O CSS do #garantias ficou acima, orfao: a seccao foi fundida e os
   selectores #garantias ... ja nao casam com nada. Fica para nao mexer no
   ficheiro por posicao, que e como se partem folhas de estilo. */

/* ── compromissos, dentro do #quem-somos ─────────────────────────────
   Terceira tentativa, e a boa. A primeira deu-lhes a mesma barrinha da
   grelha de cima e as duas filas ficaram a rimar. A segunda meteu-os em
   cartoes numerados, que pesava e parecia formulario.

   Agora cada compromisso e uma linha: o titulo grande a esquerda, o texto
   em coluna a direita. Sem caixa, sem numero, sem contorno. Le-se como uma
   lista de promessas e nao disputa nada com a grelha de credenciais, que
   e de colunas curtas. */
#quem-somos .compromissos{margin-top:clamp(38px,4.6vw,60px);
  padding-top:clamp(26px,3vw,38px); border-top:1px solid var(--line)}

/* uma coluna de linhas, nao tres colunas */
#quem-somos .pill{grid-template-columns:1fr; gap:clamp(26px,3.2vw,40px);
  margin-top:clamp(20px,2.4vw,28px)}
#quem-somos .pill>div{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(16px,3vw,48px); align-items:baseline; align-content:start;
  padding:0; border:0; background:none}

#quem-somos .pill h3{font-size:clamp(20px,2.1vw,26px); letter-spacing:-.022em;
  line-height:1.15}
#quem-somos .pill p{margin-top:0; font-size:16.5px; line-height:1.62; max-width:52ch}

@media(max-width:760px){
  #quem-somos .pill{gap:24px}
  #quem-somos .pill>div{grid-template-columns:1fr; gap:7px}
  #quem-somos .pill h3{font-size:19px}
}

/* O CTA do indice do guia vinha colado ao ultimo cartao: a margem normal do
   .cta-linha chega quando o que esta acima e texto, mas nao quando e uma
   caixa com contorno — o olho le a borda como fim e precisa de mais ar. */
.grupo + .cta-linha{margin-top:clamp(50px,6.2vw,80px)}

/* ══ revisão de espaçamentos ═══════════════════════════════════════════

   O CTA das paginas de artigo estava esmagado a 15px. A causa nao era a
   margem do .cta-linha, que pede 36 a 58px — era a especificidade: dentro
   do .artigo, o selector ".artigo p" (0,1,1) ganha a ".cta-linha" (0,1,0) e
   impunha os 15px dos paragrafos de texto corrido. Afectava a FAQ, a
   privacidade, a 404, os clientes e os sete artigos do guia. */
.artigo p.cta-linha{margin-top:clamp(40px,5vw,64px)}
/* dois CTA seguidos (o "tem outra duvida" e o botao) nao precisam do vao
   todo entre si, mas 15px colava-os um ao outro */
.artigo p.cta-linha + p.cta-linha{margin-top:clamp(20px,2.4vw,28px)}

/* o acordeao comecava colado ao titulo da seccao: zero pixeis medidos */
.artigo .faq{margin-top:clamp(20px,2.4vw,28px)}

/* o botao para o guia completo, debaixo dos tres artigos relacionados */
.rel-todos{margin-top:clamp(18px,2.2vw,26px)}
.artigo p.rel-todos{margin-top:clamp(18px,2.2vw,26px)}

/* Apertei estes de mais quando se cortou o texto da seccao dos paineis:
   12px entre blocos de assunto diferente le-se como um bloco so. 22 separa
   sem voltar ao espalhamento que havia antes. */
#solar .notes{margin-top:clamp(20px,2.4vw,28px)}
#solar .regras{margin-top:clamp(18px,2.2vw,26px)}

/* a etiqueta por cima dos numeros grandes estava a 14px deles */
#numeros .eyebrow{margin-bottom:clamp(14px,1.8vw,22px)}

/* ── #mercado: uma coluna so ─────────────────────────────────────────
   O grafico tinha 660px centrados numa coluna de 1068 e as notas usavam a
   largura toda. Duas medidas diferentes na mesma seccao: sobravam uns 200px
   mortos de cada lado do grafico e o olho nao sabia onde comecava o bloco.

   Agora o grafico e as notas partilham a mesma caixa de 780px, centrada.
   As bordas alinham, o vazio desaparece e as notas ficam em duas colunas de
   leitura confortavel em vez de duas colunas largas e esparsas. */
#mercado .dg{max-width:780px; margin-inline:auto}
#mercado .dg > div:not(.notes){max-width:none}


/* ── #solar: estrutura propria, nao a grelha do #mercado ─────────────
   As duas seccoes usavam a mesma .notes 2x2 e liam-se como gemeas. Aqui o
   conteudo pede outra coisa: duas modalidades lado a lado para se
   compararem, o "como comeca" numa linha larga por baixo, e o que falta
   confirmar numa tira discreta no fim. Hierarquia, em vez de quatro caixas
   do mesmo tamanho. */
.modalidades{display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.8vw,20px); margin-top:clamp(20px,2.4vw,28px)}
.mod{padding:clamp(18px,2.2vw,26px); border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface)}
/* a sem investimento e a que vende: fundo cheio e contorno da cor da marca */
.mod.destaque{background:var(--band);
  border-color:color-mix(in srgb,var(--primary) 26%,transparent)}
.mod h3{font-size:clamp(17px,1.6vw,20px); letter-spacing:-.018em}
.mod p{margin-top:10px; font-size:15.5px; line-height:1.62}
.mod-nota{font-size:14px}

.solar-como{margin-top:clamp(18px,2.2vw,26px); font-size:16.5px; line-height:1.62;
  max-width:68ch}
/* a tira do que falta: discreta, mas a marca amarela continua a saltar */
.solar-falta{margin-top:clamp(16px,2vw,22px); padding-top:14px;
  border-top:1px solid var(--line); font-size:14.5px; line-height:1.7;
  color:var(--body)}

@media(max-width:760px){.modalidades{grid-template-columns:1fr; gap:12px}}

/* O grafico tinha margin-inline:auto de quando era ele que se centrava
   sozinho dentro da coluna larga. Num item de grelha, a margem automatica
   desliga o stretch e encolhe-o ao conteudo: media 522px em vez dos 780 da
   caixa, e a borda esquerda nao batia certo com a das notas. Agora quem
   centra e o .dg, e o grafico volta a esticar. */
#mercado .dg > div:not(.notes){margin-inline:0}


/* ── comparacao das modalidades (#solar) ─────────────────────────────
   Sem cartoes. Dois blocos de texto lado a lado nao se comparam: o olho tem
   de saltar de um paragrafo para o outro a procurar o que corresponde a que.
   Numa tabela, cada linha poe os dois valores no mesmo eixo e a comparacao
   faz-se sozinha.

   A coluna sem investimento leva um fundo claro em vez de contorno: destaca
   sem desenhar mais uma caixa. */
.comparar{width:100%; border-collapse:collapse; margin-top:clamp(20px,2.4vw,28px);
  font-size:15.5px; line-height:1.5}
.comparar th,.comparar td{text-align:left; padding:13px 16px;
  border-bottom:1px solid var(--line); vertical-align:top}
.comparar thead th{font-size:12px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--body); padding-bottom:10px;
  border-bottom:2px solid var(--line)}
.comparar tbody th{font-weight:400; color:var(--body); padding-left:0; width:44%}
.comparar td{color:var(--head)}
.comparar tbody tr:last-child th,.comparar tbody tr:last-child td{border-bottom:0}

/* a coluna que vende, assinalada pelo fundo e nao por um contorno */
.comparar .col-a{background:var(--band)}
.comparar thead .col-a{color:var(--eyebrow)}

/* so para leitores de ecra: a celula do canto fica vazia a vista, mas uma
   tabela sem cabecalho nessa coluna le-se mal em voz alta */
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

@media(max-width:620px){
  .comparar{font-size:14.5px}
  .comparar th,.comparar td{padding:11px 10px}
  .comparar tbody th{width:40%; padding-left:0}
}


/* A tabela crescia alem do contentor no telemovel e punha a pagina inteira
   com scroll horizontal. Duas causas: o table-layout automatico, que deixa a
   tabela esticar ate caber o conteudo, e o white-space:nowrap do .todo, que
   fazia de "[A CONFIRMAR]" um bloco de 95px indivisivel numa coluna de 100.
   Com larguras fixas e a marca a poder quebrar, a tabela respeita o espaco
   que tem. */
.comparar{table-layout:fixed}
.comparar tbody th{width:42%}
.comparar .todo{white-space:normal}
@media(max-width:620px){
  .comparar tbody th{width:38%}
  .comparar th,.comparar td{padding:10px 8px}
  .comparar .todo{font-size:.86em}
}


/* ── #solar: as duas modalidades, com pesos diferentes ───────────────
   A versao em tabela dava-lhes o mesmo peso e nao se percebia o que a EVA
   esta a vender. Mas so uma delas esta explicada: o email do cliente detalha
   a sem investimento e nao diz quase nada da outra.

   Por isso a sem investimento leva fundo, o numero grande e a lista do que
   fica do lado da EVA; a com investimento fica ao lado, curta e sem fundo.
   A hierarquia e a do que sabemos, nao uma invencao comercial. */
.opcoes{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);
  gap:clamp(18px,2.4vw,32px); align-items:start;
  margin-top:clamp(20px,2.4vw,28px)}

.opcao .op-rotulo{font-size:12px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--eyebrow); margin:0}

.principal{background:var(--band); border-radius:var(--r);
  padding:clamp(20px,2.4vw,30px)}
/* o numero que vende: zero euros de investimento */
.op-numero{font-family:var(--mono); font-size:clamp(34px,4.4vw,54px); font-weight:700;
  line-height:1; color:var(--primary); letter-spacing:-.03em; margin-top:12px}
.op-sub{font-size:14.5px; color:var(--body); margin-top:8px}

.op-trata{list-style:none; margin:clamp(16px,2vw,22px) 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:8px 18px}
.op-trata li{position:relative; padding-left:23px; font-size:15px; line-height:1.4;
  color:var(--head)}
/* visto desenhado em CSS, sem imagem nem fonte de icones */
.op-trata li::before{content:""; position:absolute; left:2px; top:4px;
  width:6px; height:11px; border:solid var(--primary); border-width:0 2px 2px 0;
  transform:rotate(43deg)}

.op-ganho{margin-top:clamp(16px,2vw,22px); padding-top:14px;
  border-top:1px solid color-mix(in srgb,var(--head) 12%,transparent);
  font-size:16px; line-height:1.55}

/* a outra: sem fundo, para nao competir */
.opcao:not(.principal){padding-top:clamp(4px,1vw,10px)}
.opcao:not(.principal) p{margin-top:12px; font-size:15.5px; line-height:1.6}
.op-nota{color:var(--body)}

@media(max-width:860px){
  .opcoes{grid-template-columns:1fr; gap:18px}
  .opcao:not(.principal){padding-top:0}
}
@media(max-width:460px){.op-trata{grid-template-columns:1fr}}


/* ligacao para a fonte, por baixo de um numero citado */
.fonte-link{margin-top:8px; font-size:13px; color:var(--body)}
.fonte-link a,.stk-fonte a{color:var(--primary); font-weight:600; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--primary) 32%,transparent)}
.fonte-link a:hover,.stk-fonte a:hover{border-bottom-color:var(--primary)}


/* O "comeca na mesma fatura" e a tira do que falta passaram para dentro da
   coluna da direita, que tinha tres linhas e um buraco branco ate ao fundo.
   A seccao encurta e o espaco morto desaparece. */
.opcao .solar-como{margin-top:clamp(20px,2.4vw,28px); padding-top:16px;
  border-top:1px solid var(--line); font-size:15.5px; max-width:none}
.opcao .solar-falta{margin-top:14px; padding-top:0; border-top:0; font-size:14px}

/* ── as quatro notas do #mercado ─────────────────────────────────────
   Medido: 40px entre filas e 46px entre colunas. Ao contrario do que devia.
   Numa grelha 2x2 de blocos de texto, as filas tem de separar mais do que as
   colunas: se nao separarem, o olho le na horizontal e junta blocos que nao
   tem nada a ver um com o outro. Era o que fazia a zona parecer uma papa.

   Corrige-se a proporcao aproximando as colunas em vez de afastar as filas,
   para a seccao nao crescer em altura. */
/* as filas ficam na medida que ja tinham: o que muda e as colunas, que
   apertam. A proporcao corrige-se sem a seccao crescer um pixel. */
#mercado .notes{gap:clamp(30px,3.2vw,40px) clamp(20px,2.2vw,28px)}

/* e uma linha a dizer onde acaba o grafico e comeca o comentario: sao duas
   coisas diferentes e estavam so separadas por espaco */
#mercado .notes{margin-top:clamp(20px,2.2vw,26px); padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line)}


/* ── o que falta confirmar, na coluna da direita do #solar ───────────
   Quatro perguntas distintas em lista, nao numa linha corrida separada por
   pontos. O marcador e um traco neutro e nao o visto verde da coluna da
   esquerda: ali sao coisas que a EVA faz, aqui sao coisas que nao sabemos.
   O mesmo sinal para as duas seria enganador. */
.falta-rotulo{margin-top:clamp(20px,2.4vw,28px); padding-top:16px;
  border-top:1px solid var(--line)}
.falta-lista{list-style:none; margin:10px 0 0; padding:0}
.falta-lista li{position:relative; padding-left:18px; margin-top:7px;
  font-size:14.5px; line-height:1.45; color:var(--body)}
.falta-lista li::before{content:""; position:absolute; left:0; top:10px;
  width:8px; height:1px; background:var(--body); opacity:.55}

/* o .solar-como volta a ser largo, por baixo das duas colunas */
.solar-como{margin-top:clamp(20px,2.4vw,28px)}




/* ═══════════════════ O MERCADO HOJE (faixa da página inicial) ════════════
   Três valores escritos no ficheiro pela acção do GitHub. Sem botão de
   actualizar e sem JavaScript a buscá-los: o número está no HTML que o
   servidor entrega, que é a única forma de o Google e as IAs o lerem. */
.faixa-mercado{padding-block:clamp(40px,5vw,62px)}

.fm-topo{display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:6px 24px;
  margin-bottom:clamp(20px,2.4vw,28px)}
.fm-topo h2{margin:0; font-size:clamp(20px,2.3vw,26px); letter-spacing:-.015em}
.fm-sub{margin:0; font-size:14.5px; color:var(--body)}

/* Cartões separados, não um bloco único cortado por filetes: colados liam-se
   como uma tabela de três colunas em vez de três coisas. */
.fm-grid{display:grid; gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fm-card{display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(18px,2.1vw,24px)}

/* ── o rótulo, com o ícone na mesma linha ───────────────────────────────
   Sem pastilha à volta: o ícone é desenho, não botão. */
.fm-k{display:flex; align-items:center; gap:10px; margin:0;
  font-size:12px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--body)}
.fm-i{display:block; flex:none; line-height:0; color:var(--primary)}
.fm-i svg{width:28px; height:28px; fill:none; stroke:currentColor;
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; overflow:visible}

/* ── o traço que se desenha ──────────────────────────────────────────────
   O mesmo efeito que a secção dos três compromissos usava. O pathLength=100
   no HTML normaliza o comprimento de todos os traços, para se desenharem ao
   mesmo ritmo por mais diferentes que sejam uns dos outros.
   Enquanto a faixa não entra no ecrã fica por desenhar; quando entra, traça.
   Quem não tiver JavaScript vê-os desenhados, que é o estado natural. */
.por-desenhar .fm-i svg [pathLength]{stroke-dasharray:100; stroke-dashoffset:100}
.desenhar .fm-i svg [pathLength]{animation:fm-tracar .85s cubic-bezier(.4,0,.2,1) both}
.desenhar .fm-card:nth-child(2) .fm-i svg [pathLength]{animation-delay:.12s}
.desenhar .fm-card:nth-child(3) .fm-i svg [pathLength]{animation-delay:.24s}
@keyframes fm-tracar{from{stroke-dashoffset:100} to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .por-desenhar .fm-i svg [pathLength],
  .desenhar .fm-i svg [pathLength]{animation:none; stroke-dashoffset:0}
}

/* ── o destaque do ERC ───────────────────────────────────────────────────
   O cliente pediu-o destacado. Chegou a estar num cartão amarelo e isso só
   levantava a pergunta "porque é que aquele é especial?". Uma etiqueta com a
   resposta lá dentro destaca e explica-se ao mesmo tempo. */
.fm-tag{font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--head); white-space:nowrap;
  padding:4px 9px; border-radius:999px;
  background:color-mix(in srgb,#FFD90A 30%,transparent)}

/* ── o número ────────────────────────────────────────────────────────────
   Preto e um tamanho acima. A unidade é um sufixo mais leve e não parte do
   valor: assim o número fica com o peso todo e lê-se de relance. */
/* A etiqueta do ERC vive aqui, ao lado do numero. Na linha do rotulo
   empurrava o numero para baixo e os tres deixavam de estar alinhados — e e
   exactamente na linha dos numeros que o olho os compara. */
.fm-v{display:flex; align-items:baseline; flex-wrap:wrap; gap:7px 9px; margin:14px 0 0}
.fm-v b{font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:clamp(30px,3.6vw,40px); font-weight:700; color:var(--head);
  letter-spacing:-.025em; line-height:1}
.fm-u{font-size:14.5px; font-weight:600; color:var(--body)}

/* os cêntimos por kWh: a unidade da fatura, que não existe em nenhuma das
   duas fontes. É o nosso contributo, por isso fica logo a seguir ao número. */
.fm-x{margin:9px 0 0; font-size:13.5px; color:var(--body)}
.fm-x span{font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-weight:600; color:var(--head)}

.fm-h{margin:14px 0 0; font-size:13.5px; line-height:1.5; color:var(--body)}

/* margin-top:auto encosta a data ao fundo: sem isto, as três assentavam a
   alturas diferentes dentro de cartões que a grelha faz da mesma altura. */
.fm-d{margin:auto 0 0; padding-top:14px; font-size:12.5px; color:var(--body)}
.fm-d span{font-variant-numeric:tabular-nums}
.fm-d a,.fm-nota a{color:var(--primary); font-weight:600; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--primary) 35%,transparent)}
.fm-d a:hover,.fm-nota a:hover{border-bottom-color:var(--primary)}

.fm-nota{margin-top:clamp(18px,2.2vw,26px); font-size:15.5px; color:var(--body)}

@media(max-width:560px){
  .fm-grid{grid-template-columns:1fr; gap:18px}
  .fm-d{margin-top:12px; padding-top:0}
}