/* ==========================================================================
   TEMA EDIT LAB — kit.css
   --------------------------------------------------------------------------
   Ficheiro ÚNICO de estilos da frente (o Vite só compila o admin — ver
   vite.config.js). É também a sonda que o middleware EnsureThemeInstalled usa
   para decidir se o tema está instalado: se este ficheiro desaparecer, a frente
   passa a servir a página «Brevemente».

   TOKENS: os marcados ✔ vêm do Dev Mode do Figma (valores exactos). Os restantes
   ainda são estimados a partir de capturas — corrigir aqui, que é o único sítio
   a mexer: todo o tema consome estas variáveis.
   ========================================================================== */

/* ── Tipos de letra ──────────────────────────────────────────────────────
   AMBOS SÃO LICENCIADOS e NÃO estão incluídos — não há CDN público para eles.
   Coloque os ficheiros em public/themes/editlab/assets/fonts/ com estes nomes
   e o tema passa a usá-los; até lá, as pilhas de recurso abaixo aguentam o
   desenho (Avenir Next/Century Gothic são geométricas próximas da Zona Pro, e
   a Helvetica Neue existe nativamente na maioria dos sistemas).

   Zona Pro           → títulos, menu, botões (geométrica, pesos 400/700)
   Helvetica Neue LT  → corpo de texto (pesos 400/700)
   -------------------------------------------------------------------------- */
@font-face{
    font-family:"Zona Pro";
    src:url("/themes/editlab/assets/fonts/ZonaPro-Regular.woff2") format("woff2");
    font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
    font-family:"Zona Pro";
    src:url("/themes/editlab/assets/fonts/ZonaPro-Bold.woff2") format("woff2");
    font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
    font-family:"Helvetica Neue LT Std";
    src:url("/themes/editlab/assets/fonts/HelveticaNeueLTStd-Roman.woff2") format("woff2");
    font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
    font-family:"Helvetica Neue LT Std";
    /* O ficheiro BOLD, não o Roman. Esta linha já apontou para o Roman, e o efeito
       era matar o negrito no site inteiro: o browser encontrava um peso 700
       declarado, carregava-o — e era a Roman. Como do ponto de vista dele a
       família TEM um 700 legítimo, não sintetizava negrito nenhum, e cada
       <strong> saía com a mesma espessura do texto à volta. Medido: 250,1px de
       largura contra 250,1px, zero diferença.

       Enquanto o HelveticaNeueLTStd-Bold.woff2 não estiver nesta pasta, este
       @font-face falha a carregar — e é isso que se quer: o browser passa à
       família seguinte da pilha (Helvetica Neue nativa / Arial) e usa o negrito
       REAL dela. Assim que o ficheiro aparecer, entra o traço da marca sem
       mexer aqui. Ver assets/fonts/LEIA-ME.txt. */
    src:url("/themes/editlab/assets/fonts/HelveticaNeueLTStd-Bold.woff2") format("woff2");
    font-weight:700;font-style:normal;font-display:swap;
}

:root{
    /* ── Cor ──────────────────────────────────────────────────────────── */
    /* ✔ Dev Mode: variável "vermelho_Edite_Value". Botões, títulos de realce,
       faixa do Universo, redes sociais do rodapé. */
    --ev-red:        #E1251B;
    --ev-red-escuro: #B81D15;   /* estado :hover — escurecimento da mesma tinta */
    /* ✔ Dev Mode: variável "Cinza_escuro_Edit_Value". É a cor do menu e o fundo
       das secções escuras/rodapé — a mesma tinta nos dois papéis. */
    --ev-escuro:     #323E48;
    --ev-escuro-2:   #2A343D;
    --ev-preto:      #0E1116;   /* faixa "Pensamos hoje o amanhã" */
    --ev-tinta:      #323E48;   /* ✔ texto sobre fundo claro = o mesmo cinza escuro */
    --ev-cinza:      #6B7480;   /* texto secundário */
    --ev-cinza-claro:#C1C5C8;   /* ✔ Figma "cinza_claro_edit_value": datas das
                                   notícias e placeholders dos formulários */
    --ev-claro:      #F4F4F4;   /* fundo das secções claras */
    --ev-branco:     #FFFFFF;
    --ev-linha:      rgba(0,0,0,.10);

    /* Acentos dos cantos do diagrama SIG (financeira / capital humano / estratégica) */
    /* Acentos oficiais da marca (2026-07-27). Substituíram os tons anteriores
       (#34C77B / #2F9BE0 / #F5911E), mais claros, que não batiam certo com os
       SVG do diagrama SIG nem com o desenho. Valem para todo o tema: além do
       SIG, pintam os cartões da secção «Áreas» (.ev-card--verde/azul/laranja). */
    --ev-verde:  #00953B;
    --ev-azul:   #0082CA;
    --ev-laranja:#FF8300;

    /* Faixa da Place Me (imobiliária do grupo) */
    --ev-placeme: #63A98B;

    /* ── Tipografia ───────────────────────────────────────────────────── */
    /* ✔ Dev Mode: Zona Pro nos títulos/menu, Helvetica Neue LT Std no corpo. */
    --ev-display: "Zona Pro", "Avenir Next", Avenir, "Century Gothic", system-ui, sans-serif;
    --ev-corpo:   "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ev-fm:      ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ── Escala tipográfica (máximos = valores exactos do Figma) ───────── */
    --ev-t-h1:     3.5rem;    /* ✔ 56px — h1 do HERÓI da home (nó 407:1159) */
    --ev-t-titulo:  3.125rem;  /* ✔ 50px — h1 de página interior (Contacte-nos) */
    --ev-t-h2:   2.5rem;      /* 40px */
    --ev-t-h3:   1.375rem;    /* 22px */
    --ev-t-lead: 1.5rem;      /* ✔ 24px — corpo do herói */
    --ev-t-menu: 1.0625rem;   /* ✔ 17px — itens do menu */
    --ev-t-base: 1.0625rem;   /* 17px */

    /* ── Ritmo ────────────────────────────────────────────────────────── */
    /* Largura da COLUNA DE CONTEÚDO (sem goteiras). Como o tema é border-box, o
       .ev-wrap soma-lhe o padding no max-width — senão o padding comia-a por
       dentro e o conteúdo ficava ~100px mais estreito do que o desenho pede. */
    --ev-wrap: 1273px;
    --ev-gut: clamp(1.25rem, 4vw, 3rem);
    --ev-sec: clamp(4rem, 9vw, 7.5rem);
    --ev-raio: 8px;             /* ✔ border-radius do botão do menu */
    --ev-header-h: 100px;       /* ✔ altura do cabeçalho */
}

/* ── Base ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0;
    font-family:var(--ev-corpo);
    font-size:var(--ev-t-base);
    line-height:1.6;
    color:var(--ev-tinta);
    background:var(--ev-branco);
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
/* Títulos em Zona Pro. line-height:normal no Figma → ~1.15 aqui (o "normal" do
   browser depende da fonte; fixar evita saltos quando a Zona Pro carregar). */
h1,h2,h3,h4{margin:0;font-family:var(--ev-display);font-weight:700;
    letter-spacing:-.01em;line-height:1.15;text-wrap:balance}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

/* max-width = coluna de conteúdo + as duas goteiras. Assim o conteúdo mede
   exactamente --ev-wrap num ecrã largo, e o padding fica por FORA dessa medida. */
.ev-wrap{width:100%;max-width:calc(var(--ev-wrap) + var(--ev-gut) * 2);
    margin-inline:auto;padding-inline:var(--ev-gut)}
.ev-sec{padding-block:var(--ev-sec)}
.ev-sec--claro{background:var(--ev-claro)}
.ev-sec--escuro{background:var(--ev-escuro);color:var(--ev-branco)}
.ev-sec--preto{background:var(--ev-preto);color:var(--ev-branco)}
.ev-sec--vermelho{background:var(--ev-red);color:var(--ev-branco)}
.ev-sec--centro{text-align:center}

/* Título de secção com a 2.ª parte a vermelho ("Um Grupo com «experiência…»"). */
.ev-realce{color:var(--ev-red)}
.ev-sec--escuro .ev-realce,.ev-sec--preto .ev-realce{color:var(--ev-red)}

/* Sobretítulo curto acima dos títulos ("Pessoas", "Nossos Serviços") */
.ev-eyebrow{
    margin:0 0 .9rem;font-family:var(--ev-display);font-size:.8rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ev-red);
}
.ev-sec--vermelho .ev-eyebrow{color:var(--ev-escuro)}
.ev-sec--escuro .ev-eyebrow{color:var(--ev-red)}

/* ✔ Dev Mode: título de página interior a 50px com entrelinha de 72px (=1.44).
   NÃO confundir com o h1 do herói, que é 55px — são dois papéis distintos. */
.ev-h1{font-size:clamp(2rem,4.8vw,var(--ev-t-titulo));line-height:1.44}
.ev-h2{font-size:clamp(1.75rem,4vw,var(--ev-t-h2))}
.ev-h3{font-size:clamp(1.15rem,2vw,var(--ev-t-h3))}
.ev-lead{font-size:clamp(1.05rem,1.9vw,var(--ev-t-lead));line-height:1.5;color:var(--ev-cinza)}
.ev-sec--escuro .ev-lead,.ev-sec--preto .ev-lead,.ev-sec--vermelho .ev-lead{color:rgba(255,255,255,.9)}

/* ── Botões ──────────────────────────────────────────────────────────── */
/* SEM border: tinha aqui um `border:2px solid transparent` que somava 4px à
   altura de TODOS os botões — o CTA do cabeçalho saía a 41px em vez dos 37 do
   desenho, e o do formulário a 53,5 em vez de 50. A variante fantasma usa um
   inset box-shadow em vez de borda, porque não ocupa espaço de layout. */
/* ✔ Dev Mode: no desenho da homepage TODOS os botões de conteúdo são iguais —
   Helvetica Neue LT Std 65 Medium 17px/115%, 15px/30px de folga, cantos a 8px
   (nós 4182:416, 4182:430, 4182:436, 4182:439, 4214:340). NÃO é Zona Pro: essa
   fica só para o CTA do cabeçalho, que é mais pequeno e tem o seu próprio
   ajuste em `.ev-nav .ev-btn`. Antes a base era Zona Pro 700 a .95rem, e o texto
   de todos os botões saía com a fonte e o corpo errados. */
.ev-btn{
    display:inline-block;text-decoration:none;font-family:var(--ev-corpo);
    font-weight:500;font-size:17px;line-height:1.15;
    padding:15px 30px;border-radius:var(--ev-raio);border:0;
    background:var(--ev-red);color:#fff;transition:background .18s,color .18s,box-shadow .18s;
}
.ev-btn:hover{background:var(--ev-red-escuro)}
.ev-btn--fantasma{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.ev-btn--fantasma:hover{background:currentColor;color:var(--ev-escuro)}

/* ── Cabeçalho ─────────────────────────────────────────────────────────
   ✔ Figma «homepage» 46:170: barra branca de 100px com uma linha de 1px
   (#C1C5C8) em baixo, logótipo à esquerda e os links à direita. A goteira de
   120px do desenho é exactamente a que o .ev-wrap já produz (1512 − 2×120 =
   1272 ≈ --ev-wrap), por isso as medidas passam 1:1. */
.ev-header{position:sticky;top:0;z-index:50;background:var(--ev-branco);color:var(--ev-tinta);
    border-bottom:1px solid var(--ev-cinza-claro)}
.ev-header .ev-wrap{display:flex;align-items:center;gap:1.5rem;min-height:var(--ev-header-h)}
/* Logótipo — ✔ Figma: 109.52 × 60px no cabeçalho (no rodapé é 91.267 × 50).
   As cores vivem dentro do SVG; aqui só se define a caixa. O object-fit com
   object-position à esquerda é o que garante que um logótipo carregado no CMS
   com outra proporção continua a alinhar pela margem — e não a meio da caixa,
   que é onde o `contain` o poria por omissão. */
.ev-logo{display:inline-flex;align-items:center;width:109.52px;height:60px;
    text-decoration:none;color:inherit;flex:none}
.ev-logo img{width:100%;height:100%;object-fit:contain;object-position:left center}
/* ✔ Figma: auto-layout em linha, gap 32px, centrado verticalmente. */
.ev-nav{margin-left:auto;display:flex;flex-direction:row;align-items:center;gap:32px}
/* ✔ Figma: Helvetica Neue LT Std 65 Medium a 15px, line-height normal, na cor
   Cinza Escuro. É a diferença de carácter face ao tema Edit Value, onde o menu
   era Zona Pro 17px/700: aqui a barra é de corpo, mais leve e mais discreta.
   Continuam a existir dois tipos de item de topo: <a> para os que navegam e
   <button class="ev-nav__topo"> para os que só abrem submenu — o desenho do
   Edit Lab não tem submenus, mas o menu do CMS pode passar a ter.
   O :not(.ev-btn) exclui o CTA, que é igualmente um <a> e tem cor própria. */
.ev-nav > a:not(.ev-btn),
.ev-nav__topo{text-decoration:none;font-family:var(--ev-corpo);
    font-size:15px;font-weight:500;line-height:normal;color:var(--ev-tinta);white-space:nowrap}
/* Reposição do estilo nativo do botão, para ficar visualmente igual aos links. */
.ev-nav__topo{background:none;border:0;margin:0;padding:0;cursor:pointer;
    -webkit-appearance:none;appearance:none}
.ev-nav > a:not(.ev-btn):hover,
.ev-nav__topo:hover{color:var(--ev-red)}
/* PÁGINA ACTUAL — ✔ Figma: o item activo («Início», no desenho da homepage) está
   simplesmente a vermelho. Nada de sublinhado: aqui o realce é a cor, e pôr-lhe
   também um traço seria inventar vocabulário que o desenho não usa.
   Nos itens com submenu não há link próprio, por isso o realce passa para o
   botão quando é um dos FILHOS que está activo (data-ativo). */
.ev-nav > a:not(.ev-btn)[aria-current="page"],
.ev-nav__topo[data-ativo="1"]{color:var(--ev-red)}

/* Botão de destaque. O desenho do Edit Lab não tem nenhum — o cabeçalho só o
   desenha se alguém lhe der rótulo e destino em Definições. Fica a régua do
   tema anterior: radius 8px, texto de 15px, padding de 10px. */
.ev-nav .ev-btn{font-size:15px;line-height:115%;padding:10px;border-radius:8px;
    min-width:133px;text-align:center}

/* ── Submenus do cabeçalho ───────────────────────────────────────────────
   O item estica-se à altura do cabeçalho (align-self:stretch) para o painel
   poder abrir exactamente na aresta inferior com `top:100%`. Sem isso ficava
   uma faixa morta entre o link e o painel, e o menu fechava-se a meio caminho
   quando o rato descia. */
.ev-nav__item{position:relative;display:flex;align-items:center;align-self:stretch}

.ev-nav__painel{
    box-sizing:border-box;
    position:absolute;top:100%;left:0;z-index:60;
    display:none;flex-direction:column;align-items:flex-start;
    padding:20px;gap:8px;width:274px;
    background:#FFFFFF;
    border:.5px solid rgba(0,0,0,.1);
    box-shadow:0 25px 37px rgba(0,0,0,.1), 0 10px 15px rgba(0,0,0,.05);
}
/* DESKTOP: abre SÓ ao passar o rato e — para quem navega por teclado, que não
   tem rato nenhum — quando o foco entra num descendente. Nada de clique aqui:
   é tudo CSS, sem depender de JavaScript. */
.ev-nav__item:hover > .ev-nav__painel,
.ev-nav__item:focus-within > .ev-nav__painel{display:flex}

.ev-nav__painel a{
    display:flex;align-items:center;gap:12px;
    box-sizing:border-box;width:100%;min-height:44px;
    padding:12px 8px 12px 16px;
    background:#FFFFFF;text-decoration:none;
    font-family:var(--ev-corpo);font-weight:500;font-size:14px;line-height:20px;
    color:var(--ev-tinta);
}
.ev-nav__painel a:hover,.ev-nav__painel a:focus-visible{background:var(--ev-claro);color:var(--ev-red)}
.ev-nav__painel a[aria-current="page"]{color:var(--ev-red)}

.ev-burger{display:none;margin-left:auto;background:none;border:0;color:inherit;font-size:1.5rem;line-height:1;cursor:pointer;padding:.4rem}

@media (max-width:900px){
    .ev-burger{display:block}
    .ev-nav{
        position:fixed;inset:var(--ev-header-h) 0 auto 0;flex-direction:column;align-items:flex-start;
        gap:0;background:var(--ev-branco);padding:1rem var(--ev-gut) 2rem;margin:0;
        display:none;box-shadow:0 18px 40px rgba(0,0,0,.12);
    }
    .ev-nav[data-aberto="1"]{display:flex}
    .ev-nav > a:not(.ev-btn),
    .ev-nav__topo{padding:.85rem 0;width:100%;text-align:left;
        border-bottom:1px solid var(--ev-linha);cursor:default}
    .ev-nav .ev-btn{margin-top:1rem;border-bottom:0;min-width:0;align-self:stretch}

    /* MOBILE: o submenu deixa de flutuar e passa a acordeão, aberto ao TOQUE
       (data-aberto, gerido pelo kit.js). Um painel absoluto de 274px dentro de
       uma gaveta em coluna era impossível de usar com o polegar. */
    .ev-nav__item{flex-direction:column;align-items:flex-start;align-self:stretch;width:100%}
    .ev-nav__painel{
        position:static;width:100%;
        padding:0 0 .5rem 1rem;gap:0;
        border:0;box-shadow:none;background:transparent;
    }
    /* Aqui NÃO se abre por hover nem por foco: num ecrã táctil o :hover fica
       "colado" depois do toque, e o :focus-within manteria o painel aberto
       impedindo que o segundo toque o fechasse. Só o data-aberto manda. */
    .ev-nav__item:hover > .ev-nav__painel,
    .ev-nav__item:focus-within > .ev-nav__painel{display:none}
    .ev-nav__item[data-aberto="1"] > .ev-nav__painel{display:flex}

    .ev-nav__painel a{min-height:40px;padding:.55rem 0;border-bottom:0;opacity:.85}
    .ev-nav__painel a[aria-current="page"]{opacity:1}
}


/* ── Herói / carrossel ───────────────────────────────────────────────────
   ✔ Figma «homepage», nó 407:1159 — o herói GRANDE: 851px de altura logo
   abaixo do cabeçalho, fotografia a cobrir a faixa toda, véu do cinza escuro
   da marca a correr da ESQUERDA para a direita (opaco a 0%, transparente a
   65,9%) e o texto encostado ao FUNDO esquerdo, a 120px da base.

   Isto é o REGISTO DA HOMEPAGE — as regras base desta secção são as dele, e o
   banner de página interior corrige-as mais abaixo (`.ev-hero--pagina`).
   Substituiu o desenho anterior, que tinha o texto a meia altura, o véu
   quase-preto e uma coluna de metade da faixa; o que se manteve foi a
   mecânica, que é a mesma nos dois.

   O carrossel é uma PISTA que desliza na horizontal: os slides ficam lado a
   lado, cada um com a largura toda, e o que muda é o translateX da pista.
   Antes trocava-se `display:none/block`, que dava um corte seco — a mudança
   para pista é o que permite o deslocamento de banner. */
.ev-hero{position:relative;color:#fff;background:var(--ev-escuro);overflow:hidden}

/* A pista: tantos ecrãs de largura quantos os slides. O translateX é posto
   pelo kit.js; sem JS fica a zero e vê-se o primeiro slide, com os outros
   fora do recorte — o mesmo resultado de antes, sem regra extra. */
.ev-hero__pista{display:flex;flex-wrap:nowrap;
    transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
.ev-hero__slide{flex:0 0 100%;max-width:100%;position:relative;isolation:isolate}

.ev-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* ✔ Desenho: dois pontos só — o cinza escuro da marca, opaco à esquerda, a
   desaparecer aos 65,9% da largura. A cor é a mesma do fundo da faixa, por
   isso um slide sem fotografia não se distingue de um com o véu por cima. */
.ev-hero__slide::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(90deg,
        var(--ev-escuro) 0%,
        rgba(50,62,72,0) 65.9%)}
.ev-hero .ev-wrap{padding-block:clamp(4.5rem,11vw,8rem)}

/* ✔ Desenho: o subtítulo mede 798px e o título 596 — o texto do herói já não
   é uma coluna só, são duas medidas. O `max-width` do h1 é o que dá a quebra
   em «Inovação com / impacto nas PME» sem um <br> escrito à mão.
   (No banner de página interior a coluna é de 543, mais estreita do que os 596,
   por isso este limite nunca lá chega a morder.) */
.ev-hero__texto{width:min(798px,100%)}
/* ✔ Desenho: h1 Zona Pro 56px/1.15 branco; corpo Helvetica Neue LT 22px branco,
   a 28px do título. A entrelinha do corpo vai FIXA em 1.3: o desenho diz
   `normal`, que depende da fonte carregada e faria a faixa saltar quando a
   Helvetica Neue LT entrasse. */
.ev-hero h1{font-size:clamp(2.1rem,3.7vw,var(--ev-t-h1));line-height:1.15;color:#fff;
    max-width:596px}
.ev-hero__texto p{font-family:var(--ev-corpo);font-weight:400;color:#fff;margin-top:28px;
    font-size:clamp(1rem,1.45vw,22px);line-height:1.3}
.ev-hero__botoes{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

/* Abaixo de 1000px a metade deixa de fazer sentido (daria uma coluna de ~34ch
   com o h1 a 2.1rem, que parte as palavras): o texto passa a ocupar a largura
   toda e o gradiente deixa de ser lateral para não clarear a parte de baixo. */
@media (max-width:1000px){
    .ev-hero__texto{width:100%}
    .ev-hero h1{max-width:none}
    .ev-hero__slide::after{background:linear-gradient(180deg,
        rgba(50,62,72,.35) 0%, rgba(50,62,72,.92) 100%)}
}

/* ✔ Desenho: seta vectorial de 28×45 no vermelho da marca. Uma só forma, com a
   da esquerda a ser a mesma rodada 180º — a rotação vai no SVG e não no botão,
   que já usa o transform para se centrar verticalmente. */
.ev-hero__seta{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
    background:none;border:0;cursor:pointer;padding:.5rem .9rem;opacity:.75;
    display:flex;align-items:center;transition:opacity .2s}
.ev-hero__seta:hover{opacity:1}
.ev-hero__seta svg{display:block;width:28px;height:45px}
.ev-hero__seta--ant svg{transform:rotate(180deg)}
/* Uma seta em cada lado, na GOTEIRA à esquerda/direita da coluna de conteúdo.

   A FOLGA ATÉ AO TEXTO é o que este recuo controla, e a conta que aqui estava
   media a coisa errada: comparava a distância da margem do ECRÃ à seta, não da
   seta ao texto. Com o recuo a 3.6rem sobrava menos de 1px entre a ponta da seta
   e a primeira letra do h1 — praticamente coladas, que é o que se via.

   A conta certa é simples: a seta é encostada ao limite da coluna e depois
   recuada; logo, folga = recuo − largura da seta. A seta mede 56.8px (28 do
   desenho + 2 × .9rem de folga interior), portanto 5.3rem (84.8px) deixa 28px
   de ar. O max() trava-a a .5rem da margem quando a goteira não chega para
   tanto — aí a folga encolhe, mas nunca fica negativa acima do ponto de corte. */
.ev-hero__seta--ant{left:max(.5rem, calc(50% - var(--ev-wrap) / 2 - 5.3rem))}
.ev-hero__seta--seg{right:max(.5rem, calc(50% - var(--ev-wrap) / 2 - 5.3rem))}

.ev-hero__pontos{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);z-index:3;
    display:flex;gap:.55rem}
.ev-hero__pontos button{width:10px;height:10px;aspect-ratio:1/1;padding:0;border-radius:2px;
    border:0;cursor:pointer;background:#FFFFFF}
.ev-hero__pontos button[aria-current="true"]{background:var(--ev-red,#E1251B)}

/* Com o texto a ocupar a largura toda (<1000px), as setas não podem ficar a meia
   altura: descem para o rodapé do herói, ao lado dos pontos. Tem de ser DEPOIS da
   regra base — senão o `top:50%` dela ganha, e top+bottom juntos esticavam o botão
   de meia altura até ao fundo em vez de o mover. */
/* PORQUÊ 1440px: abaixo disto o max() já travou a seta nos .5rem da margem, e a
   folga até ao texto passa a ser  início da coluna − 64.8  (os 8px da margem mais
   os 56.8 da seta). A 1440px isso dá 18.7px, que ainda é ar; a 1420 dá 8.7 e a
   1380 já é negativo — a seta por cima do h1. Em vez de a deixar lá, as duas
   descem para o rodapé, onde não disputam espaço com nada. */
@media (max-width:1440px){
    .ev-hero__seta{top:auto;bottom:35.2px;transform:none;padding:.3rem .6rem}
    .ev-hero__seta svg{width:19px;height:30px}
    /* No rodapé voltam a ficar juntas, à direita, longe dos pontos — mas à mesma
       altura deles: os pontos têm 10px e estão a 50px do fundo (centro a 55px), a
       seta mede 39.6px (30 do SVG + 2 × .3rem), logo 35.2px de fundo alinha os
       dois centros. */
    .ev-hero__seta--ant{left:auto;right:3.1rem}
    .ev-hero__seta--seg{right:.5rem}
}
@media (max-width:640px){.ev-hero__seta{display:none}}
/* ── Altura à medida do banner (opção «Altura» da secção, escolhida no CMS) ──
   O herói da homepage sempre teve a altura do CONTEÚDO — a folga vertical do
   .ev-wrap. Um banner de topo precisa de uma MEDIDA: 760px (como a home do
   desenho) ou 465px (frame `contactos` do Figma). A medida entra por
   `--ev-hero-alt`, escrita no atributo style da secção pelo Blade.

   `min-height` e não `height`: num ecrã estreito o título, o texto e os botões
   de um slide podem precisar de mais do que a medida do desenho, e crescer é
   sempre melhor do que cortar texto. O min() com 88vh trava a faixa alta nos
   portáteis baixos, onde 760px não deixariam ver que a página continua. */
.ev-hero--medida .ev-hero__slide{
    /* A medida escolhida (760 ou 465) é a que a faixa tem na PRANCHA do Figma,
       com 1512px de largura. Abaixo disso encolhe na mesma proporção: o
       `--ev-hero-k` é essa razão (altura ÷ 1512), escrita pelo Blade no atributo
       style — em CSS não dá para dividir dois comprimentos e obter um número em
       todos os browsers que o tema serve.

       O max() põe um PISO nos 60% da medida: abaixo dele a faixa deixaria de ter
       altura para o título, o texto e os botões, e o que se ganhava em elegância
       perdia-se num banner apertado. Aos 465px o piso dá 279 e chega-se lá por
       volta dos 900px de largura.

       O min() final trava tudo nos 88% da altura do ecrã — é o que impede uma
       faixa de 760px de tapar a página inteira num portátil baixo ou num
       telemóvel deitado.

       É min-height e não height em todo o lado: se o conteúdo de um slide pedir
       mais do que isto, cresce. Cortar texto nunca é opção. */
    min-height:min(
        max(calc(var(--ev-hero-alt, 465px) * .6), calc(var(--ev-hero-k, .3075) * 100vw)),
        var(--ev-hero-alt, 465px),
        88vh
    );
    /* ✔ Desenho da homepage: o texto ENCOSTA AO FUNDO da faixa. O banner de
       página interior mantém-no a meia altura (nó 31:23) — ver mais abaixo. */
    display:flex;align-items:flex-end;
}
/* A folga vertical deixa de mandar na altura (quem manda é o min-height acima),
   por isso encolhe: com os 8rem do herói da home, um banner de 465px ficaria com
   209px úteis para título + texto + botões — e transbordava a medida pedida.
   ✔ Desenho: 120px por baixo do texto (1512 × 7.9% ≈ 119,4) — é o que o encosta
   ao fundo sem o colar lá. */
.ev-hero--medida .ev-wrap{width:100%;
    padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(2.5rem,7.9vw,120px)}
/* Com mais do que um slide há PONTOS no rodapé, a 50px do fundo — e o texto, que
   agora encosta ao fundo, passava-lhes por cima em ecrã estreito, onde os 7.9%
   da largura descem aos 40px. O piso de 5.4rem (86px) é o que os separa: 50 do
   ponto, 10 da altura dele e 26 de ar. Em ecrã largo a conta do desenho já é
   maior do que o piso, portanto nada muda lá. */
.ev-hero--multi.ev-hero--medida .ev-wrap{
    padding-bottom:max(5.4rem, clamp(2.5rem,7.9vw,120px))}
/* ── BANNER DE TOPO DE PÁGINA INTERIOR ───────────────────────────────────────
   ✔ Figma «quem-somos», nó 31:23. É a mesma peça do herói da homepage noutro
   registo — e é o desenho que o pede, não uma preferência: numa página interior
   o véu é o cinza escuro da marca em vez do quase-preto, o título desce de 55
   para 48px e o corpo de 24 para 18. Vem DEPOIS das regras base para as poder
   corrigir com a mesma especificidade. */
.ev-hero--pagina .ev-hero__slide::after{
    background:linear-gradient(90deg,
        rgba(50,62,72,.95) 0%,
        rgba(50,62,72,.85) 24.5%,
        rgba(50,62,72,.40) 47.6%,
        rgba(50,62,72,.10) 100%)}
/* ✔ Nó 31:23: `items-center` — num banner de página interior o texto fica a
   MEIA ALTURA, e não encostado ao fundo como no herói da homepage. Três classes
   para ganhar às duas da regra do `--medida`, que vem antes. */
.ev-hero--pagina.ev-hero--medida .ev-hero__slide{align-items:center}
.ev-hero--pagina.ev-hero--medida .ev-wrap{padding-block:clamp(2.5rem,5vw,4rem)}
/* ✔ Desenho: coluna de 543px dentro dos 1272 da área de conteúdo. */
.ev-hero--pagina .ev-hero__texto{width:min(543px,100%)}
/* ✔ Desenho: Zona Pro Bold 48px, entrelinha 1.2. */
.ev-hero--pagina h1,.ev-hero--pagina h2{font-size:clamp(1.9rem,4.4vw,48px);line-height:1.2}
/* ✔ Desenho: 20px do título ao texto; Helvetica 18px com entrelinha 1.6. */
.ev-hero--pagina .ev-hero__texto p{margin-top:20px;font-size:clamp(1rem,1.5vw,18px);line-height:1.6}

/* Abaixo de 1000px o texto ocupa a largura toda e o véu deixa de ser lateral,
   pela mesma razão da regra equivalente do herói da homepage: um gradiente da
   esquerda para a direita não protege texto que passou a atravessar o ecrã. */
@media (max-width:1000px){
    .ev-hero--pagina .ev-hero__texto{width:100%}
    .ev-hero--pagina .ev-hero__slide::after{background:linear-gradient(180deg,
        rgba(50,62,72,.78) 0%, rgba(50,62,72,.94) 100%)}
}



/* O cotovelo do cartão da direita sai de propósito para lá da coluna de conteúdo,
   como no desenho — mas isso chegava a empurrar a barra de deslocamento horizontal
   em janelas estreitas. `overflow-x:clip` corta o que passe da secção sem criar um
   contentor de scroll (ao contrário de `hidden`) e sem cortar nada na vertical. */
/* `position:relative` para os filetes de canto se poderem prender à secção; o
   `overflow-x:clip` já lá estava por causa dos cotovelos, e é também ele que
   impede o filete de alargar a página se transbordar. */
.ev-sec--sig{position:relative;overflow-x:clip}
/* O conteúdo fica por cima do filete — que é decoração de fundo. */
.ev-sec--sig > .ev-wrap{position:relative;z-index:1}
/* `max-width:none` pela mesma razão do símbolo da Place Me: a regra geral
   `img{max-width:100%}` deformaria o filete num ecrã estreito. */
.ev-sig__canto{position:absolute;z-index:0;pointer-events:none;user-select:none;
    max-width:none;display:block}
.ev-sig__canto--topo{top:0;left:0;width:160px;height:154px}
.ev-sig__canto--fundo{right:0;bottom:0;width:430px;height:336px}
@media (max-width:900px){
    /* Em ecrã estreito os 430px do filete de baixo cobriam quase toda a faixa.
       Reduz-se na proporção do desenho (430 : 336) para não deformar. */
    .ev-sig__canto--fundo{width:260px;height:203px}
    .ev-sig__canto--topo{width:110px;height:106px}
}
/* ✔ 4094:413: Zona Pro Bold 40px com entrelinha de 50px (1.25), branco e centrado
   numa medida de 1054px. Vinha do .ev-h2 genérico, que tem entrelinha 1.15 — as
   duas linhas do título ficavam mais apertadas do que no desenho. */
.ev-sec--sig .ev-h2{font-size:clamp(1.625rem, 1.321rem + 1.248vw, 40px);
    line-height:1.25;max-width:1054px;margin-inline:auto;
    font-variant-numeric:lining-nums proportional-nums}

/* ── HOME · EDIT VALUE LAB (texto + carrossel de fotografias) ────────────────
   ✔ Figma «homepage», nó 46:195, na medida cheia (1512):

     faixa de 900px, 150 de recuo em cima e em baixo, conteúdo ao centro
     coluna de texto de 509px · 142px de intervalo · carrossel com o resto (741)
     dentro da coluna de texto tudo vai a 16px de distância
     título Zona Pro 38/1.2 · subtítulo Helvetica Medium 24/1.4 a 75%
     corpo Helvetica 17/1.8 a 70% · botão vermelho de 16/32, cantos de 4
     vista do carrossel 500px de altura, cantos de 12 · slides de 550 com 22
     de intervalo · três pontos de 12px por baixo, ao centro

   A FAIXA NÃO TEM GOTEIRA À DIREITA: o carrossel corre até ao limite do ecrã e
   o slide seguinte fica sempre meio à vista — 741px de janela para slides de
   550+22. É esse corte que diz «há mais», e é por isso que esta secção alinha a
   coluna da esquerda à mão (o `padding-left` abaixo repete a conta do `.ev-wrap`)
   em vez de usar o `.ev-wrap`, que fecharia a faixa dos dois lados. */
.ev-lab{display:flex;align-items:center;min-height:900px;padding-block:150px;
    overflow-x:clip;background:var(--ev-branco)}
.ev-lab__grelha{
    flex:1;display:grid;align-items:center;
    grid-template-columns:minmax(0,509px) minmax(0,1fr);
    gap:clamp(2.5rem,9.4vw,142px);
    /* A MESMA margem esquerda do `.ev-wrap`: metade do que sobra da coluna de
       conteúdo, com a goteira como piso quando a janela é mais estreita do que
       ela. À direita não há nada — é essa a diferença. */
    padding-left:max(var(--ev-gut), calc((100% - var(--ev-wrap)) / 2));
}
/* Sem fotografias não vale a pena guardar meia faixa vazia: o texto fica com
   ela toda, na medida do `.ev-wrap`, e a faixa perde a altura fixa. */
.ev-lab--so-texto{min-height:0}
.ev-lab--so-texto .ev-lab__grelha{grid-template-columns:minmax(0,1fr);
    max-width:calc(var(--ev-wrap) + var(--ev-gut) * 2);margin-inline:auto;
    padding-left:var(--ev-gut);padding-right:var(--ev-gut)}
.ev-lab--so-texto .ev-lab__texto{max-width:760px}

/* ✔ Desenho: 16px entre TODAS as peças da coluna, o botão incluído. */
.ev-lab__texto{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ev-lab__titulo{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.65rem,2.6vw,38px);line-height:1.2;color:var(--ev-tinta)}
/* ✔ Desenho: Helvetica 65 Medium 24px a 75% de opacidade. O peso 500 é o que o
   tema tem para o «Medium» — os ficheiros carregados são o Roman e o Bold. */
.ev-lab__sub{margin:0;font-family:var(--ev-corpo);font-weight:500;
    font-size:clamp(1.15rem,1.6vw,24px);line-height:1.4;color:var(--ev-tinta);opacity:.75}
.ev-lab__corpo{font-family:var(--ev-corpo);font-size:17px;line-height:1.8;
    color:var(--ev-tinta);opacity:.7}
.ev-lab__corpo p:last-child{margin-bottom:0}
.ev-lab__accao{margin:0}
/* ✔ Desenho: 16/32 de folga, cantos de 4, 16px — como o botão do cartão de
   contactos. O `.ev-btn` do tema tem 15/30 e cantos de 8, da leitura anterior
   do desenho da homepage; afina-se aqui, dentro da secção, em vez de mexer em
   todos os botões do site por causa de 4px. */
.ev-lab .ev-btn{padding:16px 32px;border-radius:4px;font-size:16px}

/* ── O carrossel ─────────────────────────────────────────────────────────
   A janela recorta; a pista desliza. O passo é medido pelo kit.js no próprio
   layout (distância do slide activo ao primeiro), e não em percentagem — aqui o
   slide é mais estreito do que a janela, e uma percentagem saltaria a mais. */
.ev-lab__galeria{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0}
.ev-lab__vista{position:relative;width:100%;height:500px;border-radius:12px;overflow:hidden}
.ev-lab__pista{display:flex;gap:22px;height:100%;
    transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
/* `min(550px,100%)`: 550 é a medida do desenho, mas numa janela mais estreita do
   que isso o slide teria de transbordar — e um slide cortado dos dois lados
   lê-se como erro, não como «há mais». */
.ev-lab__slide{flex:0 0 min(550px,100%);height:100%;border-radius:12px;overflow:hidden}
.ev-lab__slide img{display:block;width:100%;height:100%;object-fit:cover}

/* ✔ Desenho: três círculos de 12px, o activo no cinza escuro da marca e os
   outros brancos com filete. */
.ev-lab__pontos{display:flex;gap:7.5px}
.ev-lab__pontos button{width:12px;height:12px;padding:0;border-radius:50%;cursor:pointer;
    background:var(--ev-branco);border:1px solid var(--ev-cinza-claro)}
.ev-lab__pontos button[aria-current="true"]{background:var(--ev-escuro);border-color:var(--ev-escuro)}

/* Abaixo de 1000px as duas colunas deixam de caber: a de texto sozinha pede os
   509 do desenho e ao carrossel sobrava menos de metade de um slide. Empilham, e
   aí a faixa volta a ter goteira dos dois lados — sem duas colunas, o corte à
   direita deixava de se ler como carrossel e passava a parecer um descuido. */
@media (max-width:1000px){
    .ev-lab{display:block;min-height:0;padding-block:clamp(3.5rem,9vw,150px)}
    .ev-lab__grelha{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,6vw,48px);
        max-width:calc(var(--ev-wrap) + var(--ev-gut) * 2);margin-inline:auto;
        padding-left:var(--ev-gut);padding-right:var(--ev-gut)}
    .ev-lab__vista{height:clamp(240px,56vw,420px)}
    .ev-lab__texto{gap:14px}
    .ev-lab__corpo{font-size:16px;line-height:1.7}
}

/* ── HOME · INVESTIGAÇÃO PARA FAZER CRESCER AS PME ───────────────────────────
   ✔ Figma «homepage», nó 352:79: cabeçalho centrado e, por baixo, o diagrama —
   uma esfera ao centro, três anéis elípticos e, à volta, um ponto vermelho e um
   cartão por cada item, a rodar juntos.

   O FUNDO é o degradê radial do desenho, lido do SVG que o Dev Mode devolve:
   elipse de 945 × 820 ao centro, com quatro paragens — o cinza da marca aclarado
   no meio e a escurecer até quase preto nos cantos. É o que dá a sensação de
   profundidade por trás do diagrama. */
.ev-inv{padding-block:150px;color:var(--ev-branco);
    background:radial-gradient(ellipse 945px 820px at 50% 50%,
        #384552 0%, #323E48 40%, #242B33 75%, #171C21 100%);
    /* ⚠️ A FAIXA CORTA O QUE LHE SAI PELOS LADOS — senão a página inteira ganha
       barra horizontal, e a ganhá-la a OSCILAR.

       Os grupos de pontos (`.ev-inv__pontos`) são camadas `inset:0`, portanto
       tão largas como a coluna de conteúdo, e o estilo 3 põe-nas a INCLINAR-SE
       (`ev-inclina-d` vai aos 20°). A caixa envolvente de um rectângulo rodado
       é maior do que o rectângulo: 1200 × 647 a 20° mede 1349 de largo. São
       ~75px a sair de cada lado, e os da direita põem scroll na página — que
       aumenta e diminui ao ritmo das animações (37s, 31s), porque a inclinação
       muda. Era esse o «conteúdo que cresce».

       Os PONTOS em si nunca chegam lá: andam a ~390px do centro, dentro dos
       600 que a meia-largura dá. O que transborda são os CANTOS VAZIOS da
       camada rodada — cortá-los não corta desenho nenhum.

       Corta-se AQUI, na faixa (que é da largura do ecrã), e não na
       `.ev-inv__orbita`: essa mede a coluna de conteúdo e, em ecrã largo, os
       cartões saem-lhe legitimamente para fora (a 1512 vão até 1444, a coluna
       acaba nos ~1392) — cortar ali comia-lhes o texto.

       `clip` e não `hidden` de propósito: `overflow-x:hidden` obrigaria o eixo
       vertical a `auto` e a faixa passaria a ser um contentor de scroll, o que
       aprisionaria a folga de ~25px por que o cartão de cima transborda em
       altura. `clip` corta sem criar scroll e deixa o eixo Y em `visible`. */
    overflow-x:clip}
.ev-inv__cab{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
/* ✔ Desenho: medida de 800px para o cabeçalho todo. */
.ev-inv__titulo{margin:0;max-width:800px;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.65rem,2.6vw,38px);line-height:1.2;color:inherit}
/* ✔ Desenho: 20px/1.6 a 65% de opacidade. */
.ev-inv__apoio{max-width:800px;font-family:var(--ev-corpo);
    font-size:clamp(1rem,1.35vw,20px);line-height:1.6;opacity:.65}
.ev-inv__apoio p:last-child{margin-bottom:0}

/* ── O diagrama ──────────────────────────────────────────────────────────────
   UMA VARIÁVEL manda em tudo. Cada medida do desenho fica escrita como o número
   do Figma vezes `--ev-orb-u`, que vale 1px na largura de referência (1512) e
   encolhe com o ecrã até um piso de 0,8. Assim o diagrama reduz-se POR INTEIRO,
   sem que nenhuma peça saia do sítio, e os números do desenho continuam
   legíveis no código — 487.5 é o 487,5 do Figma, não um valor derivado.

   Os CARTÕES são a excepção de propósito: mantêm os 320px e o corpo de letra em
   qualquer largura. Encolhê-los com o resto punha o texto a 10px, e o diagrama
   existe para se ler. É também por isso que abaixo dos 1200 se desmonta a
   órbita: aí já não há largura que chegue para 320px em volta de uma esfera. */
.ev-inv__orbita{
    --ev-orb-u:clamp(.8px, .0661376vw, 1px);
    --ev-orb-rx:calc(487.5 * var(--ev-orb-u));   /* órbita dos cartões */
    --ev-orb-ry:calc(366.8 * var(--ev-orb-u));
    --ev-orb-prx:calc(287.5 * var(--ev-orb-u));  /* órbita dos pontos = anel de dentro */
    --ev-orb-pry:calc(166.75 * var(--ev-orb-u));
    --ev-orb-esf:calc(280 * var(--ev-orb-u));    /* diâmetro da esfera */
    position:relative;
    /* ⚠️ TUDO O QUE ACONTECE NA ÓRBITA FICA DENTRO DA ÓRBITA.
       O kit.js dá a cada cartão e a cada ponto um `z-index` de 0 a 100, conforme
       a profundidade — é o que faz um corpo passar à frente de outro. Só que um
       `position:relative` SEM z-index não abre contexto de empilhamento: aqueles
       números iam parar ao contexto da raiz e competiam com o resto da página.
       O cabeçalho é `sticky` com `z-index:50`, portanto metade da órbita passava
       POR CIMA DO MENU ao rolar a página — cartões e pontos vermelhos.

       O `isolation:isolate` fecha-os aqui dentro: a ordem entre eles mantém-se
       exactamente igual, e a órbita inteira passa a valer, lá fora, o lugar que
       esta caixa ocupa no fluxo — que é por baixo do cabeçalho.

       Preferiu-se isto a limitar o z-index no JavaScript: um tecto de 49 no
       kit.js ficava amarrado ao 50 do cabeçalho, e mudar um sem o outro trazia
       o problema de volta sem deixar rasto. */
    isolation:isolate;
    /* ✔ Desenho: a faixa tem 1312 de altura para 150+153 de cabeçalho e 64 de
       intervalo, o que deixa 795 para o diagrama — menos do que os 845 que os
       cartões varrem de alto a baixo. Ou seja: o próprio desenho deixa o cartão
       transbordar ~25px para dentro da respiração da faixa, e é isso que aqui
       se reproduz. Os 150px de recuo absorvem folgadamente um cartão mais alto. */
    height:calc(var(--ev-orb-ry) * 2 + 60px);
    /* O desenho pedia 64px, mas isso era antes de os cartões terem órbitas
       próprias: o par que anda mais por fora sobe agora mais 13% do que subia,
       e a 64px o cartão de cima quase encostava ao texto do cabeçalho. Ao
       clamp: folga a sério em ecrã largo, e em ecrã estreito não desperdiça
       altura numa faixa que já é a mais alta da página. */
    margin-top:clamp(72px, 8vw, 128px);
}
.ev-inv__aneis,.ev-inv__pontos,.ev-inv__cartoes{position:absolute;inset:0;margin:0;padding:0;
    list-style:none}
/* Os anéis são elipses desenhadas com `border-radius:50%` — não são as órbitas
   de ninguém, são o fundo do desenho. O dos cartões (487,5 × 366,8) não está
   desenhado: eles flutuam entre os anéis, como no Figma. */
.ev-inv__anel{position:absolute;left:50%;top:50%;display:block;
    border:1px solid rgba(255,255,255,.08);border-radius:50%;
    transform:translate(-50%,-50%)}
.ev-inv__anel--a{width:calc(1035 * var(--ev-orb-u));height:calc(644 * var(--ev-orb-u))}
.ev-inv__anel--b{width:calc(805 * var(--ev-orb-u));height:calc(483 * var(--ev-orb-u))}
.ev-inv__anel--c{width:calc(575 * var(--ev-orb-u));height:calc(333.5 * var(--ev-orb-u))}

/* OS ANÉIS OSCILAM, cada um no seu tempo. Não é uma volta completa — uma elipse
   a dar a volta lê-se como uma moeda a girar. São cinco graus para cada lado,
   em períodos diferentes e primos entre si, que é o que faz o conjunto nunca
   repetir a mesma pose: o sistema parece inclinar-se devagar em vez de rodar. */
@keyframes ev-anel{
    0%,100%{transform:translate(-50%,-50%) rotate(-5deg)}
    50%    {transform:translate(-50%,-50%) rotate(5deg)}
}
.ev-inv__anel--a{animation:ev-anel 29s ease-in-out infinite}
.ev-inv__anel--b{animation:ev-anel 23s ease-in-out infinite reverse}
.ev-inv__anel--c{animation:ev-anel 17s ease-in-out infinite}

.ev-inv__nucleo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    display:grid;place-items:center}
/* A ESFERA é desenhada em CSS e não servida como imagem: fica nítida em
   qualquer medida e em retina, não custa um pedido, e o degradê fica à mão de
   quem quiser afiná-lo. As paragens reproduzem o render do nó 352:1144 — luz em
   cima à esquerda, corpo cinza-azulado e a face de baixo à direita a apagar-se
   contra o centro do fundo da faixa (#384552), que é o que lhe dá o volume. */
.ev-inv__esfera{grid-area:1/1;display:block;position:relative;overflow:hidden;
    width:var(--ev-orb-esf);height:var(--ev-orb-esf);border-radius:50%;
    background:radial-gradient(circle at 31% 39%,
        #B0BCC6 0%, #A2AFB9 12%, #8D9BA6 28%, #74818C 46%,
        #5A656F 64%, #47525C 82%, #3C4751 100%)}

/* ── O GLOBO GIRA SOBRE SI ───────────────────────────────────────────────
   Duas camadas por cima do degradê da esfera, e é a relação entre elas que
   convence o olho:

     ::before  a SUPERFÍCIE — manchas suaves que ANDAM, da direita para a
               esquerda, sem fim;
     ::after   a LUZ e a borda — que ficam PARADAS.

   É a segunda que faz a primeira parecer tridimensional. Um padrão a deslizar
   sozinho lê-se como um cilindro a rolar ou como papel a passar; o mesmo padrão
   por baixo de um brilho fixo num canto e de um escurecimento fixo na margem
   lê-se como um CORPO a virar, porque é assim que a luz se comporta num corpo
   real — a iluminação não acompanha a rotação. É o mesmo motivo por que a Lua
   parece rodar e não passar.

   A COSTURA. A camada tem 200% de largura e o padrão repete-se a cada 50% dela
   (`background-size:50% 100%`), ou seja, uma vez por diâmetro. Deslocá-la
   exactamente -50% devolve-a a um estado idêntico ao inicial, e por isso o
   ciclo fecha sem salto — não há um instante em que se veja a emenda.

   Não há compressão do padrão junto às margens, que é o que um render a sério
   faria. Disfarça-se com contraste baixo e manchas grandes: a esta medida, o
   escurecimento da borda domina a leitura e ninguém dá pela diferença. */
.ev-inv__esfera::before{
    content:"";
    position:absolute;
    top:0;left:0;height:100%;width:200%;
    background-image:
        /* ── AS MANCHAS ─────────────────────────────────────────────────
           Só manchas: grandes, moles e de contraste baixo. Chegaram a estar
           aqui crateras — duas elipses desencontradas por cada uma, a fingir a
           parede na sombra e a parede iluminada. Tecnicamente funcionava e a
           forma lia-se como cova; o problema é que doze covas regulares num
           disco claro deixam de parecer a Lua e passam a parecer um queijo.
           A leitura de superfície irregular vem destas manchas a passar; o
           detalhe pequeno só chamava a atenção para o truque.

           NENHUMA pode cruzar a margem do padrão. Ele repete-se em x, e uma
           mancha cortada à esquerda não reaparece à direita — ficava uma risca
           vertical visível a cada repetição. Regra: `posição − raio ≥ 2%` e
           `posição + raio ≤ 98%`.

           As opacidades são o único botão do efeito: abaixo disto a rotação
           deixa de se ler, acima começa a parecer sujidade no ecrã. */
        radial-gradient(ellipse 16% 30% at 22% 28%, rgba(255,255,255,.16), transparent 70%),
        radial-gradient(ellipse 13% 22% at 30% 68%, rgba(0,0,0,.22), transparent 72%),
        radial-gradient(ellipse 22% 19% at 52% 20%, rgba(0,0,0,.16), transparent 70%),
        radial-gradient(ellipse 11% 17% at 19% 86%, rgba(255,255,255,.12), transparent 70%),
        radial-gradient(ellipse 13% 24% at 74% 56%, rgba(0,0,0,.15), transparent 74%),
        radial-gradient(ellipse 09% 14% at 40% 44%, rgba(255,255,255,.11), transparent 72%),
        radial-gradient(ellipse 10% 18% at 62% 78%, rgba(0,0,0,.13), transparent 74%),
        radial-gradient(ellipse 12% 16% at 86% 32%, rgba(255,255,255,.10), transparent 72%);
    background-size:50% 100%;
    background-repeat:repeat-x;
    animation:ev-globo 34s linear infinite;
}
@keyframes ev-globo{
    from{transform:translateX(0)}
    to  {transform:translateX(-50%)}
}

/* A luz e a borda, PARADAS. O escurecimento da margem é o que mais pesa na
   leitura de esfera — sem ele, o disco achata-se de imediato, por mais textura
   que ande lá por baixo. */
.ev-inv__esfera::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(circle at 30% 32%,
            rgba(255,255,255,.22) 0%, rgba(255,255,255,.07) 28%, transparent 54%),
        radial-gradient(circle at 50% 50%,
            transparent 56%, rgba(0,0,0,.10) 78%, rgba(0,0,0,.34) 100%);
    pointer-events:none;
}

/* E a esfera respira — 26s de subida e descida, 2,5% de escala. Não se vê a
   acontecer; nota-se que a faixa não está parada.

   ⚠️ A RESPIRAÇÃO ESTÁ NA ESFERA E NÃO NO NÚCLEO, e não é indiferente. O núcleo
   centra-se com `left:50%; top:50%; transform:translate(-50%,-50%)`, e abaixo
   dos 1200px a media query desmonta-o com `position:static; transform:none`.
   Uma ANIMAÇÃO ganha a uma declaração normal: com os keyframes no núcleo, o
   `translate(-50%,-50%)` que eles carregam voltava a aplicar-se em tablet,
   por cima do `transform:none`, e a esfera saltava meia altura para cima —
   ia parar em cima do título da secção.

   Na esfera não há conflito nenhum: ela não tem transform de centragem, e a
   respiração passa a funcionar nas duas disposições. De brinde, o texto do
   centro fica quieto enquanto o globo respira, que se lê melhor. */
@keyframes ev-esfera{
    0%,100%{transform:scale(1)}
    50%    {transform:scale(1.025)}
}
.ev-inv__esfera{animation:ev-esfera 26s ease-in-out infinite}
/* ✔ Desenho: Zona Pro Bold, 32px na 1.ª linha e 36 na 2.ª, entrelinha 1.1 e 4px
   entre elas, numa medida de 274. */
.ev-inv__centro{grid-area:1/1;position:relative;z-index:1;margin:0;
    display:flex;flex-direction:column;align-items:center;gap:calc(4 * var(--ev-orb-u));
    width:calc(274 * var(--ev-orb-u));text-align:center;
    font-family:var(--ev-display);font-weight:700;line-height:1.1;color:var(--ev-branco)}
.ev-inv__centro span{font-size:calc(32 * var(--ev-orb-u))}
.ev-inv__centro strong{font-weight:700;font-size:calc(36 * var(--ev-orb-u))}

/* AS POSIÇÕES vêm do Blade: o `--ev-cos` e o `--ev-sin` de cada peça são o
   cosseno e o seno do seu ângulo, já calculados em PHP. O CSS só os multiplica
   pelos raios — sem trigonometria, e com o diagrama certo mesmo sem JavaScript.
   Quando o kit.js entra, é só estes dois números que ele reescreve. */
/* `--ev-orb-kx/ky` esticam a elipse desta peça, `--ev-orb-s` encolhe-a quando
   ela está do lado de LÁ do sistema. Nascem a 1 para o diagrama continuar certo
   sem JavaScript; é o kit.js que dá a cada par o seu valor, e é daí que vem o
   facto de cada bloco andar na SUA órbita e não todos na mesma pista. */
.ev-inv__ponto,.ev-inv__cartao{position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%)
        translate(calc(var(--ev-orb-rx) * var(--ev-cos) * var(--ev-orb-kx, 1)),
                  calc(var(--ev-orb-ry) * var(--ev-sin) * var(--ev-orb-ky, 1)))
        scale(var(--ev-orb-s, 1));
    will-change:transform}
.ev-inv__ponto{display:block;width:calc(12 * var(--ev-orb-u));height:calc(12 * var(--ev-orb-u));
    border-radius:50%;background:var(--ev-red);
    transform:translate(-50%,-50%)
        translate(calc(var(--ev-orb-prx) * var(--ev-cos) * var(--ev-orb-kx, 1)),
                  calc(var(--ev-orb-pry) * var(--ev-sin) * var(--ev-orb-ky, 1)))
        scale(var(--ev-orb-s, 1))}

/* O ECO. O anel vive dentro do ponto, por isso herda tudo o que ele tem — a
   posição na órbita, a escala da profundidade e o apagar quando passa à frente
   da esfera. Não é preciso repetir nada disso aqui: um ponto que se apague
   leva a sua onda com ele, que é o que se quer.

   `inset:0` sobre o ponto, portanto o anel começa exactamente do tamanho dele e
   cresce a partir daí. Quem manda quando é que sai é o kit.js, que põe o
   `data-ev-eco` num ponto de cada vez, à sorte. A duração tem de bater certo
   com a constante `ECO_DURACAO` de lá. */
.ev-inv__ponto::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:calc(1.5 * var(--ev-orb-u)) solid var(--ev-red);
    opacity:0;
    pointer-events:none;
}
.ev-inv__ponto[data-ev-eco]::before{animation:ev-eco 1.8s ease-out}

/* ── O COMETA ────────────────────────────────────────────────────────────
   De trinta em trinta segundos atravessa a caixa, de um ponto qualquer da
   margem para outro do lado oposto. O kit.js escreve o trajecto nas quatro
   propriedades de posição e o ângulo na quinta; aqui só se descreve a FORMA.

   O elemento É o rasto: uma faixa fina e comprida, apagada na cauda e viva na
   ponta. A bola é o `::after`, encostado à extremidade direita. Como o
   `transform-origin` está a `100% 50%` — ou seja, NA BOLA — a rotação faz o
   rasto varrer para trás dela, e não a bola andar à roda de um ponto qualquer.

   O rasto ESTICA durante o voo (`scaleX` de .25 a 1): um cometa que entrasse
   já com a cauda toda parecia um risco a ser arrastado. A crescer, lê-se como
   matéria a ficar para trás.

   Fora do ecrã, com a órbita desmontada em grelha ou com «menos movimento»
   pedido no sistema, o kit.js nunca lhe toca — e sem trajecto ele fica onde
   está, a zero de opacidade, sem custar nada. */
.ev-inv__cometa{
    position:absolute;
    left:0; top:0;
    width:calc(210 * var(--ev-orb-u));
    height:calc(5 * var(--ev-orb-u));
    transform-origin:100% 50%;
    opacity:0;
    pointer-events:none;
    border-radius:100px;
    background:linear-gradient(90deg,
        rgba(255,196,128,0) 0%,
        rgba(255,200,136,.28) 34%,
        rgba(255,220,172,.72) 74%,
        rgba(255,250,240,1) 100%);
}
.ev-inv__cometa::after{
    content:"";
    position:absolute;
    right:calc(-6 * var(--ev-orb-u));
    top:50%;
    width:calc(14 * var(--ev-orb-u));
    height:calc(14 * var(--ev-orb-u));
    margin-top:calc(-7 * var(--ev-orb-u));
    border-radius:50%;
    background:radial-gradient(circle,
        #FFFFFF 0%, #FFEBCB 30%, rgba(255,176,92,.75) 58%, rgba(255,140,50,0) 78%);
    box-shadow:0 0 calc(26 * var(--ev-orb-u)) rgba(255,170,90,.6);
}

/* A DURAÇÃO do voo — a «velocidade» da passagem — vem do .env, escrita aqui
   pelo kit.js em `--ev-cvoo` mesmo antes de largar o cometa. O 1,6s do
   `var()` é a rede: é o que se vê se alguém puser a classe à mão, sem
   JavaScript. Já não há dois números para manter iguais — o valor é UM só e
   nasce no .env. */
.ev-inv__cometa[data-ev-voa]{animation:ev-cometa var(--ev-cvoo, 1.6s) linear}

@keyframes ev-cometa{
    0%{
        opacity:0;
        transform:translate(var(--ev-cx0), var(--ev-cy0))
                  rotate(var(--ev-cang)) scaleX(.25);
    }
    9%  {opacity:1}
    /* Apaga-se ao longo do último terço em vez de desaparecer de repente: é o
       que faz a cauda parecer dissipar-se em vez de ser cortada. */
    66% {opacity:1}
    100%{
        opacity:0;
        transform:translate(var(--ev-cx1), var(--ev-cy1))
                  rotate(var(--ev-cang)) scaleX(1);
    }
}

@keyframes ev-eco{
    0%   {transform:scale(1);   opacity:.7}
    70%  {                      opacity:0}
    100% {transform:scale(4.2); opacity:0}
}
/* ✔ Desenho: 320 de largura, 20 de recheio, cantos de 16 e a sombra a 10/12
   pretos a 25%. O fundo é o mesmo #323E48 do meio do degradê — é a sombra que
   separa o cartão do fundo, não o contraste. */
.ev-inv__cartao{width:320px;padding:20px;border-radius:16px;
    background:#323E48;box-shadow:0 10px 12px rgba(0,0,0,.25)}
.ev-inv__cartao-t{margin:0;font-family:var(--ev-display);font-weight:700;font-size:18px;
    line-height:normal;color:var(--ev-branco)}
/* ✔ Desenho: 13px/1.6 a 75%. O 8px de intervalo é a margem do título. */
.ev-inv__cartao-x{margin:8px 0 0;font-family:var(--ev-corpo);font-weight:400;
    font-size:13px;line-height:1.6;color:var(--ev-branco);opacity:.75}

/* A ÓRBITA DESMONTA-SE EM DOIS CASOS: pouca largura, ou nenhum rato.

   POUCA LARGURA (abaixo de 1200) não é gosto, é aritmética: os cartões têm
   320px fixos e a órbita precisa de 975 de largura útil só para eles.

   NENHUM RATO é tablet e telemóvel, com a largura que tiverem — e há tablets
   largos: um iPad Pro deitado dá 1366, passava o corte da largura e ficava com a
   órbita inteira a rodar. Só que a órbita É uma coisa de rato: abranda quando
   se passa por cima, pára sobre um cartão, e nada disso existe num dedo. O que
   sobra é uma animação perpétua a gastar bateria por trás de texto que se quer
   ler. `hover: none` apanha telemóvel e tablet; `pointer: coarse` apanha o dedo
   mesmo onde o sistema finge que há apontador. Um portátil com ecrã táctil E
   rato responde `hover: hover` e fica de fora.

   E ISTO ARRASTA O JAVASCRIPT ATRÁS DE SI, de borla: o kit.js decide se há
   órbita perguntando ao LAYOUT se um cartão ainda está `position:absolute`. Cai
   aqui, cai lá — a rotação pára, o cometa não é lançado, o realce à esquerda não
   se aplica. Não há um segundo sítio para manter alinhado com este.

   O que fica é uma grelha parada, sem anéis, sem pontos e sem globo. */
@media (max-width:1199.98px), (hover: none), (pointer: coarse){
    .ev-inv{padding-block:clamp(3.5rem,9vw,150px)}
    /* O `--ev-orb-u` troca-se AQUI e não no `__nucleo`: um custom property é
       substituído no elemento que o DECLARA, e o `--ev-orb-esf` nasce nesta
       regra. Mudá-lo mais abaixo na árvore não lhe tocava. */
    .ev-inv__orbita{--ev-orb-u:.86px;
        height:auto;margin-top:clamp(2.5rem,6vw,64px);
        display:flex;flex-direction:column;align-items:center;
        gap:clamp(2rem,5vw,56px);
        padding-inline:var(--ev-gut)}
    /* O cometa sai com eles: sem órbita não há galáxia para atravessar, e um
       elemento absoluto solto dentro de uma coluna flex é só uma armadilha à
       espera de alguém lhe mexer no `position`. O kit.js já não o lança aqui
       (nem em qualquer ecrã sem rato) — isto é a segunda tranca. */
    .ev-inv__aneis,.ev-inv__pontos,.ev-inv__cometa{display:none}
    .ev-inv__nucleo,.ev-inv__cartoes,.ev-inv__cartao{position:static;transform:none}

    /* O GLOBO SAI. Sem órbita à volta dele, a esfera deixa de ser o centro de um
       sistema e passa a ser um círculo cinzento com texto por cima — que é a
       leitura errada, e ainda por cima a mais cara: são duas animações a correr
       (a superfície a deslizar e a respiração), e num telemóvel isso é bateria.
       `display:none` pára-as por inteiro, não as esconde.

       O que fica é o TEXTO, como título da grelha de cartões que vem a seguir.
       Um só tamanho para as duas partes: em cima dos 32/36 do desenho havia a
       esfera a justificar a diferença; sem ela, dois tamanhos diferentes leem-se
       como um erro. E um degrau abaixo do h2 da secção, que continua a ser quem
       manda.

       E DEIXA DE SER UMA COLUNA. Na órbita as duas partes são duas linhas
       empilhadas à força, porque é assim que cabem dentro da esfera. Fora dela
       não há razão nenhuma para partir «Como criamos inovação» ao meio: volta a
       ser texto corrido, numa linha se couber e em duas só quando não couber. O
       `text-wrap:balance` é para esse caso — quando parte, parte as duas linhas
       com comprimentos parecidos em vez de deixar uma palavra órfã. Onde não é
       suportado, não faz nada e o texto parte na mesma.

       O espaço entre as duas partes é o do próprio Blade (as duas linhas do
       `@if` deixam lá uma quebra, que em texto corrido colapsa num espaço). Na
       órbita, em coluna, esse espaço é ignorado — daí nunca ter dado nas
       vistas. */
    .ev-inv__esfera{display:none}
    .ev-inv__nucleo{display:block}
    .ev-inv__centro{display:block;width:auto;max-width:100%;
        font-size:clamp(1.35rem,4vw,28px);line-height:1.25;text-wrap:balance}
    .ev-inv__centro span,.ev-inv__centro strong{font-size:inherit}
    .ev-inv__cartoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
        gap:clamp(1rem,2.5vw,24px);width:100%;max-width:900px}
    .ev-inv__cartao{width:auto}
}
@media (max-width:620px){
    .ev-inv__orbita{--ev-orb-u:.72px}
    .ev-inv__cartoes{grid-template-columns:minmax(0,1fr)}
}

/* ══ ESTILO 2 · «ORBITAL» ═════════════════════════════════════════════════
   Ligado por EV_ORBITA_ESTILO=2 (ver config/lk-website.php), que põe
   `ev-inv--v2` na secção. TUDO o que muda o aspecto vive aqui dentro, e nada
   fora deste bloco depende dele: com o interruptor no 1, o CSS acima é o que
   sempre foi e esta parte nunca chega a aplicar-se.

   A MECÂNICA NÃO MUDA. As órbitas, o realce à esquerda, o cometa, a paragem no
   hover e o desmontar em tablet são os mesmos nos dois estilos — o kit.js nem
   sabe que isto existe. É por isso que trocar de estilo é trocar uma linha do
   .env e não refazer a secção.
   ────────────────────────────────────────────────────────────────────────── */

/* O FUNDO QUASE PRETO. Com os cartões sem caixa, é o contraste que separa o
   texto do fundo — e um fundo médio deixava-o a nadar. Escuro, o branco salta,
   o vermelho ganha brilho e os aros leem-se como metal e não como riscos. */
.ev-inv--v2{background:radial-gradient(ellipse 945px 820px at 50% 50%,
    #1E262E 0%, #171E25 40%, #0E1318 75%, #070A0D 100%)}

/* OS AROS: de risco a metal. O halo é um `box-shadow` sem desvio — não é
   sombra, é o brilho que um fio polido deixa à volta. */
.ev-inv--v2 .ev-inv__anel{border-color:rgba(214,228,240,.30);
    box-shadow:0 0 12px rgba(160,190,215,.10)}

/* A CÓPIA DA FRENTE mostra só a metade de BAIXO — ver o comentário no Blade. O
   corte é no contentor e não em cada aro: cortar o aro cortava-lhe também o
   halo, e ficava um fio a acabar a direito no meio. */
.ev-inv--v2 .ev-inv__aneis--frente{clip-path:inset(50% 0 0 0)}
.ev-inv--v2 .ev-inv__aneis--frente .ev-inv__anel{border-color:rgba(226,238,248,.42);
    box-shadow:0 0 16px rgba(170,200,225,.16)}

/* ── OS DOIS AROS QUE ATRAVESSAM A ESFERA ─────────────────────────────────
   ⚠️ SÃO ESTES QUE FAZEM O DESENHO, e a razão é aritmética: a esfera tem 280 de
   diâmetro, logo 140 de raio. As três elipses do Figma têm meias-alturas de 322,
   241 e 167 — TODAS maiores do que 140, portanto passam sempre POR FORA e nunca
   tocam a bola. Duplicá-las à frente não mudava nada: não havia nada para
   cruzar. É por isso que o diagrama clássico se lê como uma bola pousada em
   cima de umas elipses, e não como um corpo com aros à volta.

   Estes dois têm meia-altura de 115 e 75 — abaixo dos 140 — por isso a metade
   de baixo passa mesmo À FRENTE da esfera. É o cruzamento que dá a volta.

   E vêm INCLINADOS, para lados contrários. Um aro achatado e horizontal lê-se
   como um prato; inclinado, lê-se como uma órbita vista de canto — e o par a
   cruzar-se amarra a leitura de gaiola à volta da bola. */
.ev-inv--v2 .ev-inv__anel--d{width:calc(1180 * var(--ev-orb-u));height:calc(230 * var(--ev-orb-u));
    animation:ev-anel-d 37s ease-in-out infinite}
.ev-inv--v2 .ev-inv__anel--e{width:calc(950 * var(--ev-orb-u));height:calc(150 * var(--ev-orb-u));
    animation:ev-anel-e 31s ease-in-out infinite}

/* MAIS GROSSOS, e só estes dois: são os únicos que passam por cima de uma
   superfície CLARA, e um fio de 1px a .30 sobre a esfera desaparece justamente
   onde tem de se ver. Os outros três correm sempre sobre o fundo escuro. */
.ev-inv--v2 .ev-inv__anel--d,
.ev-inv--v2 .ev-inv__anel--e{border-width:calc(1.6 * var(--ev-orb-u))}
.ev-inv--v2 .ev-inv__aneis--frente .ev-inv__anel--d,
.ev-inv--v2 .ev-inv__aneis--frente .ev-inv__anel--e{border-color:rgba(238,246,252,.58);
    box-shadow:0 0 calc(14 * var(--ev-orb-u)) rgba(180,210,235,.20)}

/* Cada um oscila À VOLTA DA SUA inclinação e não à volta do zero: com o
   `ev-anel` comum ficavam ao alto e desfaziam o que vêm cá fazer. As voltas (37
   e 31) são primas entre si e com as dos outros três (29, 23, 17), que é o que
   impede o conjunto de repetir a mesma pose. */
@keyframes ev-anel-d{
    0%,100%{transform:translate(-50%,-50%) rotate(13deg)}
    50%    {transform:translate(-50%,-50%) rotate(20deg)}
}
@keyframes ev-anel-e{
    0%,100%{transform:translate(-50%,-50%) rotate(-19deg)}
    50%    {transform:translate(-50%,-50%) rotate(-11deg)}
}

/* A ESFERA, mais metal e o mesmo corpo. O contraste alto é o que distingue
   metal polido de pedra, e sobre o fundo escuro o degradê clássico lia-se
   lavado. O que NÃO muda é a natureza da coisa: continua a ser a superfície a
   passar por baixo de uma luz parada, que é o que a faz girar como a Lua. Um
   cromado a sério não tem manchas nenhumas — teria de se deitar fora a rotação,
   e essa foi uma escolha sua. */
.ev-inv--v2 .ev-inv__esfera{
    background:radial-gradient(circle at 31% 36%,
        #D9E1E8 0%, #C4CED7 10%, #A5B1BC 26%, #82909B 44%,
        #5F6C78 62%, #434E59 80%, #2C363F 100%);
    box-shadow:0 0 clamp(40px, 6vw, 90px) rgba(150,180,210,.10)}

/* TRÊS HALOS E NÃO UM. Um só, largo, dá uma névoa; três — apertado, médio e
   largo — dão a queda de luz de uma fonte a sério. É o que faz o ponto parecer
   ACESO em vez de pintado. */
.ev-inv--v2 .ev-inv__ponto{
    box-shadow:0 0 calc(6 * var(--ev-orb-u)) rgba(225,37,27,.95),
               0 0 calc(16 * var(--ev-orb-u)) rgba(225,37,27,.55),
               0 0 calc(34 * var(--ev-orb-u)) rgba(225,37,27,.28)}

/* ── OS CARTÕES DEIXAM DE SER CARTÕES ─────────────────────────────────────
   Texto solto sobre o fundo. O que muda não é só decoração: uma caixa é um
   objecto POUSADO sobre a imagem, e o que se quer é texto a FLUTUAR no mesmo
   espaço dos aros. A caixa afastava-o dali.

   A largura fica nos 320: é com ela que estão feitas as contas de quem não se
   sobrepõe a quem. A ALTURA encolhe ~40px (foram-se os 20+20 de recheio), o que
   só AFASTA os vizinhos — a folga do pior momento fica maior, nunca menor.

   A sombra do texto substitui a sombra da caixa: com um aro a passar por trás
   de uma linha, é ela que impede o branco de se confundir com o metal. */
.ev-inv--v2 .ev-inv__cartao{padding:0;border-radius:0;background:none;
    box-shadow:none;
    text-shadow:0 1px 3px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.35)}

/* «INOVAÇÃO» A VERMELHO — o mesmo procedimento do título da secção, e resolve
   um problema a mais: duas linhas brancas do mesmo peso sobre uma esfera clara
   liam-se como um bloco só. */
.ev-inv--v2 .ev-inv__centro strong{color:var(--ev-red)}

/* ── SEM ÓRBITA, A CAIXA VOLTA ────────────────────────────────────────────
   O corte é o MESMO que desmonta a órbita — não é coincidência, é a mesma
   condição: sem órbita não há aros por trás do texto, e era com eles que o
   texto solto fazia sentido. O que fica é uma lista de seis entradas seguidas
   sobre um fundo quase preto, e aí o texto sem caixa deixa de se ler como seis
   coisas e passa a ler-se como uma parede.

   Volta a caixa do estilo 1 — os mesmos 20 de recheio, 16 de canto e a mesma
   sombra — porque o problema em telemóvel é exactamente o que ela sempre
   resolveu: separar uma entrada da seguinte.

   A sombra do TEXTO sai: existia para defender o branco de um aro a passar por
   trás dele, e aqui não há aro nenhum. Somada à caixa, só borrava as letras. */
@media (max-width:1199.98px), (hover: none), (pointer: coarse){
    .ev-inv--v2 .ev-inv__cartao{padding:20px;border-radius:16px;
        background:#323E48;box-shadow:0 10px 12px rgba(0,0,0,.3);
        text-shadow:none}
}
/* ══ ESTILO 3 · «ORBITAL, PONTOS SOBRE AS LINHAS» ═════════════════════════
   EV_ORBITA_ESTILO=3. É o estilo 2 mais uma coisa: a secção leva as DUAS
   classes, portanto tudo o que está acima continua a aplicar-se e aqui só se
   acrescenta o que muda nos pontos.

   O QUE MUDA: cada ponto passa a andar sobre um dos aros desenhados, em vez de
   andarem todos na mesma elipse invisível (a do aro `c`). O raio deixa de vir
   do contentor e passa a vir do próprio ponto — o Blade escreve-lhe o meio-raio
   do aro que lhe calhou.

   ⚠️ E SEM OS MULTIPLICADORES `kx`/`ky`. O kit.js escreve-os em cada satélite
   para dar a cada PAR a sua elipse própria (é o que faz os cartões não andarem
   todos na mesma pista). Aplicados aqui, empurravam o ponto até 10% para fora
   do aro — e um ponto 10% fora da linha é um ponto ao lado da linha, que é
   precisamente o que este estilo existe para evitar. O cartão continua a
   tê-los; o ponto, não.
   ────────────────────────────────────────────────────────────────────────── */
.ev-inv--v3 .ev-inv__ponto{
    transform:translate(-50%,-50%)
        translate(calc(var(--ev-p-rx, 287.5) * var(--ev-orb-u) * var(--ev-cos)),
                  calc(var(--ev-p-ry, 166.75) * var(--ev-orb-u) * var(--ev-sin)))
        scale(var(--ev-orb-s, 1))}

/* CADA GRUPO INCLINA-SE COM O SEU ARO. As durações são as mesmas das animações
   dos aros (29, 23, 17, 37, 31) e o `reverse` do `b` também — é isso, e só
   isso, que mantém o ponto agarrado à linha enquanto ela se mexe. Mudar uma
   duração aqui sem mudar a do aro correspondente descola os dois, devagar e sem
   dar erro nenhum: os primeiros segundos parecem bem e o desencontro vai
   crescendo.

   As curvas são só `rotate()`, sem o `translate(-50%,-50%)` das dos aros: um aro
   está posto a 50%/50% e precisa de recuar meia largura, um grupo de pontos
   ocupa a caixa toda (`inset:0`) e já tem o centro no sítio. */
.ev-inv--v3 .ev-inv__pontos--a{animation:ev-inclina-a 29s ease-in-out infinite}
.ev-inv--v3 .ev-inv__pontos--b{animation:ev-inclina-a 23s ease-in-out infinite reverse}
.ev-inv--v3 .ev-inv__pontos--c{animation:ev-inclina-a 17s ease-in-out infinite}
.ev-inv--v3 .ev-inv__pontos--d{animation:ev-inclina-d 37s ease-in-out infinite}
.ev-inv--v3 .ev-inv__pontos--e{animation:ev-inclina-e 31s ease-in-out infinite}

@keyframes ev-inclina-a{
    0%,100%{transform:rotate(-5deg)}
    50%    {transform:rotate(5deg)}
}
@keyframes ev-inclina-d{
    0%,100%{transform:rotate(13deg)}
    50%    {transform:rotate(20deg)}
}
@keyframes ev-inclina-e{
    0%,100%{transform:rotate(-19deg)}
    50%    {transform:rotate(-11deg)}
}
/* ══ fim do estilo 3 ═══════════════════════════════════════════════════════ */

/* ══ fim do estilo 2 ═══════════════════════════════════════════════════════ */

/* ── HOME · A INOVAÇÃO MEDE-SE PELO IMPACTO ──────────────────────────────────
   ✔ Figma «homepage», nó 46:280: fotografia QUADRADA de 550 (cantos de 12), 80px
   de intervalo, coluna de 642. As colunas alinham pelo TOPO — é isso que deixa a
   fotografia a acabar antes da lista, em vez de esticar com ela. 550 + 80 + 642
   = 1272, a coluna de conteúdo do tema. */
.ev-imp{padding-block:150px;background:var(--ev-branco)}
/* A marcação é sempre TEXTO → IMAGEM, que é a ordem de leitura certa (a
   fotografia não acrescenta informação ao que está escrito). Daí as faixas da
   grelha começarem pela do texto; a opção «Lado da imagem» troca só a ordem
   VISUAL, mais abaixo. */
.ev-imp__grelha{display:grid;grid-template-columns:minmax(0,642fr) minmax(0,550fr);
    gap:clamp(2.5rem,5.3vw,80px);align-items:start}
/* ✔ Desenho: a fotografia à ESQUERDA — é este o estado de fábrica da secção.
   Troca a ordem visual e, com ela, as medidas das faixas: sem a segunda regra a
   coluna larga ficava debaixo da fotografia. */
.ev-imp--esq .ev-imp__grelha{grid-template-columns:minmax(0,550fr) minmax(0,642fr)}
.ev-imp--esq .ev-imp__fig{order:-1}
/* Sem fotografia, a coluna não pode ficar com os 1273 da faixa: o título a 38px
   e as linhas a 18 numa medida dessas deixam de se ler como coluna. Fica numa
   medida de leitura e o título perde o limite de 407, que era para caber ao lado
   da fotografia. */
.ev-imp__grelha--so-texto{grid-template-columns:minmax(0,1fr)}
.ev-imp__grelha--so-texto .ev-imp__col{max-width:760px}
.ev-imp__grelha--so-texto .ev-imp__titulo{max-width:none}
.ev-imp__fig{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:1/1}
.ev-imp__fig img{display:block;width:100%;height:100%;object-fit:cover}
/* ✔ Desenho: 16px do sobretítulo ao título e 24px do cabeçalho à lista. */
.ev-imp__col{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ev-imp__titulo{margin:0;max-width:407px;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.65rem,2.6vw,38px);line-height:1.2;color:var(--ev-tinta)}
/* ✔ Desenho: 28px entre linhas de 18px. Sem marcadores — o destaque a vermelho
   é que abre cada linha, e um ponto à frente competia com ele. */
.ev-imp__lista{margin:8px 0 0;padding:0;list-style:none;
    display:flex;flex-direction:column;gap:28px;width:100%}
.ev-imp__lista li{font-family:var(--ev-corpo);font-size:clamp(1rem,1.2vw,18px);
    line-height:1.4;color:var(--ev-tinta)}
.ev-imp__lista strong{font-weight:700;color:var(--ev-red)}
@media (max-width:1000px){
    .ev-imp{padding-block:clamp(3.5rem,9vw,150px)}
    /* A variante do lado vem listada por nome porque tem mais especificidade do
       que `.ev-imp__grelha` sozinho: sem isto, a regra de duas colunas ganhava
       aqui dentro e a faixa nunca empilhava no telemóvel. */
    .ev-imp__grelha,
    .ev-imp--esq .ev-imp__grelha{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,6vw,48px)}
    /* Empilhada, a fotografia vai sempre para DEPOIS do texto: manter o `order`
       punha a imagem antes do título sem razão nenhuma. */
    .ev-imp--esq .ev-imp__fig{order:0}
    .ev-imp__titulo{max-width:none}
    .ev-imp__lista{gap:20px}
}

/* ── HOME · «A INVESTIGAÇÃO NÃO COMEÇA NO LABORATÓRIO» ───────────────────────
   ✔ Figma «homepage», nó 46:319: fotografia a cobrir a faixa, véu do cinza
   escuro da marca a 90% (opaco, não degradê — aqui a fotografia é textura, não
   assunto) e o texto centrado. Título 38px/1.3 numa medida de 910; corpo 18/1.7
   numa medida de 690, a 28px do título. */
.ev-dif{position:relative;isolation:isolate;overflow:hidden;
    padding-block:150px;background:var(--ev-escuro);color:var(--ev-branco)}
.ev-dif__fundo{position:absolute;inset:0;z-index:-2;
    width:100%;height:100%;object-fit:cover}
/* O véu é um pseudo-elemento e não uma <div>: é decoração pura e não tem de
   existir na marcação. Fica entre a fotografia e o texto. */
.ev-dif::after{content:"";position:absolute;inset:0;z-index:-1;
    background:rgba(50,62,72,.9)}
.ev-dif__conteudo{display:flex;flex-direction:column;align-items:center;gap:28px;
    text-align:center}
.ev-dif__titulo{margin:0;max-width:910px;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.65rem,2.6vw,38px);line-height:1.3;color:inherit}
/* Os parágrafos podem vir num bloco só (dois <p> numa caixa de texto do CMS) ou
   em blocos separados. O espaço entre eles tem de ser o MESMO nos dois casos,
   senão passar de duas caixas para uma mudava o desenho da faixa — daí o
   `margin-bottom` do <p> repetir o `gap` do contentor. */
.ev-dif__texto{max-width:690px;font-family:var(--ev-corpo);
    font-size:clamp(1rem,1.2vw,18px);line-height:1.7}
.ev-dif__texto p{margin:0 0 28px}
.ev-dif__texto p:last-child{margin-bottom:0}
@media (max-width:1000px){
    .ev-dif{padding-block:clamp(3.5rem,9vw,150px)}
    .ev-dif__conteudo{gap:20px}
}

/* ── HOME · O GRUPO EM NÚMEROS (contadores) ──────────────────────────────────
   ✔ Figma «homepage», nó 46:326, na medida cheia (1512):

     faixa clara, 150px de recuo em cima e em baixo
     60px entre o sobretítulo, o bloco do topo e a fila dos números
     topo: título numa coluna de 581 · 72px de intervalo · texto com o resto
     título Zona Pro 40px · corpo Helvetica 18/1.6
     números: três colunas iguais · Zona Pro 56px a vermelho
     legenda Helvetica Medium 18px no cinza escuro, a 10.5px do número

   O fundo do desenho é #F6F7F7 e aqui usa-se o `--ev-claro` do tema (#F4F4F4):
   dois pontos de diferença que não se vêem, e uma cor a menos no sistema. */
.ev-num{padding-block:150px;background:var(--ev-claro);color:var(--ev-tinta)}
/* DUAS classes, e é obrigatório: o `.ev-kicker` declara `margin:0` e vive no
   FIM deste ficheiro. Com um selector de uma classe só, a mesma
   especificidade e a ordem do ficheiro davam-lhe razão, e o sobretítulo
   ficava colado ao título — que é exactamente o que se via aqui. A mesma
   armadilha já tinha apanhado o `.ev-amanha__marca`.
   ✔ Desenho (46:326): a faixa é uma coluna com 60px entre as TRÊS partes —
   sobretítulo, cabeçalho e números. */
.ev-num .ev-num__sobre{margin-bottom:60px}
/* 581 e 619 (e não 581fr + 1fr, que era 581 partes contra UMA e deixava a
   coluna do texto com 2px): o desenho tem 581 de título, 72 de intervalo e o
   resto dos 1272 para o texto. As duas medidas em `fr` mantêm a proporção em
   qualquer largura acima do empilhamento. */
.ev-num__topo{display:grid;grid-template-columns:minmax(0,581fr) minmax(0,619fr);
    gap:clamp(2rem,4.8vw,72px);align-items:start;margin-bottom:60px}
/* Sem texto ao lado, o título não fica com metade da faixa e o resto em branco. */
.ev-num__topo--so-titulo{grid-template-columns:minmax(0,1fr)}
.ev-num__titulo{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.625rem,2.65vw,40px);line-height:1.2;color:var(--ev-tinta)}
/* Os parágrafos podem vir num bloco só (dois <p> numa caixa de texto do CMS) ou
   em blocos separados. O espaço entre eles tem de ser o MESMO nos dois casos,
   senão passar de duas caixas para uma mudava o desenho da faixa — daí o
   `margin-bottom` do <p> repetir o `gap` do contentor. */
.ev-num__texto{display:flex;flex-direction:column;gap:1em;
    font-family:var(--ev-corpo);font-size:clamp(1rem,1.2vw,18px);line-height:1.6}
.ev-num__texto p{margin:0 0 1em}
.ev-num__texto p:last-child{margin-bottom:0}

/* `auto-fit` e não um número fixo de colunas: os números acrescentam-se no CMS.
   Com 3 (o desenho) dá 424px cada, com 4 dá 318, e a partir dos 5 passam para a
   linha seguinte em vez de os espremer. */
/* No desenho as três colunas são encostadas (424 cada, sem intervalo). Aqui vão
   com 32px entre elas: a diferença não se vê e evita que uma legenda mais longa
   fique colada ao número da coluna seguinte. */
.ev-num__grelha{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:32px;margin:0}
.ev-num__item{display:flex;flex-direction:column;gap:10.5px}
/* ✔ Desenho: Zona Pro Bold 56px no vermelho da marca.
   `tabular-nums` porque o número está a contar: com algarismos de larguras
   diferentes, a linha toda dançava para a esquerda e para a direita durante a
   animação. `min-height` de uma linha para a faixa não saltar quando o contador
   arranca do «0», que é mais estreito do que o valor final. */
.ev-num__valor{display:flex;align-items:baseline;margin:0;
    font-family:var(--ev-display);font-weight:700;
    font-size:clamp(2.25rem,3.7vw,56px);line-height:1.1;color:var(--ev-red);
    font-variant-numeric:tabular-nums lining-nums}
.ev-num__simbolo{display:inline-block}
/* ✔ Desenho: Helvetica 65 Medium 18px no cinza escuro. */
.ev-num__rotulo{margin:0;font-family:var(--ev-corpo);font-weight:500;
    font-size:clamp(1rem,1.2vw,18px);line-height:1.3;color:var(--ev-tinta)}

@media (max-width:1000px){
    .ev-num{padding-block:clamp(3.5rem,9vw,150px)}
    .ev-num .ev-num__sobre,
    .ev-num__topo{margin-bottom:clamp(2rem,5vw,60px)}
    .ev-num__topo{grid-template-columns:minmax(0,1fr);gap:clamp(1.25rem,4vw,32px)}
    /* ✔ A PEDIDO: DUAS colunas fora do desktop. O `auto-fit` com mínimo de 150px
       punha os quatro números numa só linha de 1000 até 620px — quatro colunas de
       ~150px com legendas de três palavras. Fixas em duas, ficam 2×2. */
    .ev-num__grelha{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
}

/* ✔ A PEDIDO: as três colunas de números MANTÊM-SE em telemóvel. O `auto-fit`
   com um mínimo de 150px passava a duas colunas por volta dos 560px e a uma por
   volta dos 380 — aqui as colunas são TRÊS, fixas, e é a tipografia que encolhe.

   `minmax(0,1fr)` e não `1fr`: o mínimo automático de uma coluna de grelha é o
   tamanho do seu conteúdo, e uma palavra como «implementados» alargava a coluna
   por dentro e punha a linha toda a transbordar para lá do ecrã. Com o mínimo a
   zero a coluna pode ser mais estreita do que a palavra — e é o `break-word`
   com hifenização que trata do resto.

   Os `clamp` daqui encaixam nos de cima aos 620px (os dois dão 36px e 16px
   nesse ponto), portanto não há salto ao atravessar a fronteira. */
@media (max-width:620px){
    .ev-num__grelha{grid-template-columns:repeat(2,minmax(0,1fr));
        gap:clamp(18px,5vw,28px) clamp(10px,3vw,28px)}
    /* ✔ A PEDIDO: um terço para cada, ALINHADOS À ESQUERDA — como em ecrã
       grande. Nada a acrescentar ao item, portanto: é já o alinhamento de
       fábrica do flex em coluna (`align-items:flex-start`) e do texto. */
    .ev-num__item{gap:6px}
    /* ✔ A PEDIDO: o número mais pequeno em telemóvel. O 6.6vw chega ao tecto de
       36px aos 546px e mantém-no até aos 620 — que é o valor que a regra de cima
       também dá nessa largura, portanto não há salto na fronteira. */
    .ev-num__valor{font-size:clamp(1.25rem,6.6vw,2.25rem)}
    .ev-num__rotulo{font-size:clamp(.75rem,3.2vw,1rem);line-height:1.25;
        overflow-wrap:break-word;hyphens:auto}
}

/* ✔ A PEDIDO: abaixo dos 440px, UM NÚMERO POR LINHA.
   `439.98px` e não `439px`: há ecrãs com larguras fraccionárias, e um corte no
   inteiro deixava de fora as larguras entre 439 e 440.

   Com a linha inteira à disposição, as medidas que tinham sido apertadas para
   caber em três colunas voltam à escala normal — o que as encolhia era a largura
   da coluna, e ela deixou de existir. O intervalo passa a ser de LINHA e não de
   coluna, daí ser maior: empilhados com os 11px de antes, a legenda de um número
   ficava colada ao número seguinte. */
@media (max-width:439.98px){
    .ev-num__grelha{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
    .ev-num__item{gap:10.5px}
    .ev-num__valor{font-size:clamp(2rem,9vw,2.25rem)}
    .ev-num__rotulo{font-size:1rem;line-height:1.3}
}

/* ── Diagrama SIG ────────────────────────────────────────────────────────
   ✔ Desenho: quatro cartões em xadrez à volta do cartão central, cada área com
   a sua cor. Três peças que não existiam e que o desenho pede:

     1. COTOVELO — o "⌐" grosso e arredondado da marca, encostado ao canto
        superior direito do cartão e a transbordar para fora dele (fica ATRÁS,
        z-index:-1, com a haste vertical a passar por trás da caixa);
     2. FILETE — a linha da cor da área no topo do cartão;
     3. LIGAÇÃO — o traço a picotado que vai de cada cartão ao central,
        na cor da área e terminado num ponto do lado do cartão.

   O xadrez é feito com desalinhamentos verticais na grelha (não com posições
   absolutas), para a secção continuar a responder à largura. Abaixo de 900px
   tudo isto desaparece: em coluna única, cotovelos e ligações só sujavam. */
/* ✔ Medido no desenho, sobre a coluna de conteúdo: cartões de área 20.8%,
   cartão central 40.0%, intervalos 9.2% em média (11.3 à esquerda, 7.0 à direita).
   O rácio 1 : 1.9 : 1 das colunas já dava os 40%; o que faltava era o INTERVALO —
   com um gap pequeno as três colunas engordavam e o centro chegava aos 46%.
   O gap vai em percentagem para a proporção se manter em qualquer largura; o
   `row-gap` fica a zero porque os desníveis do xadrez são feitos por margin-top
   (uma percentagem em row-gap resolveria contra uma altura indefinida). */
.ev-sig{position:relative;display:grid;grid-template-columns:1fr 1.9fr 1fr;
    column-gap:9.2%;row-gap:0;align-items:start;text-align:left;
    /* ✔ Medido no desenho: 75px entre o fim do h2 e o topo do cartão, com o
       cotovelo a subir 53px acima do cartão e a deixar 40px livres ao título.
       Convertido para a coluna de 1273px dá ~104px. A folga anterior (4rem)
       contava a partir do CARTÃO e esquecia o cotovelo, que ficava a 7px do
       título — era isso que fazia o verde parecer colado ao texto. */
    margin-top:clamp(3.5rem,9vw,6.5rem)}

/* O fundo do cartão é uma CAMADA (::before), não o background do próprio cartão.
   Sem isto o cotovelo não se conseguia esconder por trás da caixa: um filho com
   `z-index:-1` recua até ao contexto de empilhamento mais próximo e, não havendo
   nenhum no cartão, ia parar atrás do fundo da SECÇÃO — desaparecia por completo.
   Com `isolation:isolate` o cartão passa a ser esse contexto, e a ordem de pintura
   fica: cotovelo (z-index:-1) → camada de fundo (z-index:0) → texto. */
/* ✔ Valores do desenho: raio 10px, fundo rgba(255,255,255,.04) e borda de
   0.667px a rgba(255,255,255,.07) em TRÊS lados — direita, baixo e esquerda. Em
   cima não há borda: o que lá está é o filete de cor.
   (Estava a 8px de raio, fundo .05 e borda de 1px a .10 nos quatro lados.)

   O filete deixou de ser o `border-top` desta camada e passou a ser um elemento
   próprio (::after): como barra independente pode ter a folga de 5px de cada
   lado que o desenho pede, coisa que uma borda — que acompanha os cantos — nunca
   conseguiria. Foi também isso que devolveu os cantos redondos em cima. */
.ev-sig__cartao{position:relative;isolation:isolate;background:transparent;border:0;
    border-radius:10px;padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.7rem;
    min-height:180px}
.ev-sig__cartao::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;
    background:rgba(255,255,255,.04);
    border-right:.667px solid rgba(255,255,255,.07);
    border-bottom:.667px solid rgba(255,255,255,.07);
    border-left:.667px solid rgba(255,255,255,.07)}
/* O filete de cor: 5px de folga em cada lado, encostado ao topo. */
.ev-sig__cartao::after{content:"";position:absolute;top:0;left:5px;right:5px;height:3px;
    background:var(--ac,var(--ev-red));z-index:0;pointer-events:none}
/* O conteúdo posiciona-se para ficar acima da camada de fundo. */
.ev-sig__cartao > h3,.ev-sig__cartao > p,.ev-sig__cartao > a{position:relative}
.ev-sig__cartao--verde  {--ac:var(--ev-verde)}
.ev-sig__cartao--azul   {--ac:var(--ev-azul)}
.ev-sig__cartao--laranja{--ac:var(--ev-laranja)}

/* 1 ── Cotovelo: o SVG oficial da marca (95×97), não uma aproximação com bordas —
   os raios interior e exterior do desenho não se conseguem com border-radius.
   O `fill="currentColor"` no path é o que lhe deixa herdar a cor da área.
   Posição medida no desenho: 53px acima e 51px à direita do canto do cartão, com
   a haste vertical a entrar por trás da caixa (daí o z-index:-1). */
.ev-sig__cotovelo{position:absolute;top:-53px;right:-51px;width:95px;height:97px;
    color:var(--ac);z-index:-1;pointer-events:none;line-height:0}
.ev-sig__cotovelo svg{display:block;width:100%;height:100%}
@media (max-width:1100px){
    .ev-sig__cotovelo{width:68px;height:70px;top:-38px;right:-36px}
}

/* Logótipo da área, na sua medida natural: financeira 152×30, capital humano
   215×33, estratégica 169×35. Não se força altura nem largura — os três têm
   proporções diferentes e qualquer valor único deformaria dois deles.
   O `max-height` é o travão para as imagens que venham do CMS: o editor pode
   carregar um ficheiro de 800px de altura e não deve por isso rebentar o cartão.
   Com `height:auto` a proporção mantém-se. */
/* `align-self:flex-start` é essencial: o cartão é um flex em coluna, e num flex
   em coluna o `align-items:stretch` de defeito estica os filhos à LARGURA do
   cartão. A caixa da imagem ia a 221px em vez dos 152, e o desenho — que mantém a
   proporção — ficava centrado nesse vazio, ou seja ~35px fora do sítio. */
.ev-sig__logo{display:block;align-self:flex-start;height:auto;max-width:100%;
    max-height:44px;object-fit:contain;object-position:left center;
    position:relative;z-index:1}

/* Marca pequena a seguir ao título — o mesmo canto, à escala do texto. Só é usada
   nos cartões que ainda não têm logótipo próprio. */
.ev-sig__marca{display:inline-block;width:13px;height:13px;margin-left:.4rem;
    border-top:3px solid var(--ac);border-right:3px solid var(--ac);
    border-top-right-radius:4px;vertical-align:top}

/* ✔ Dev Mode (4104:277, 4104:279, 4104:298, 4104:317, 4104:330): o texto dos
   cartões é Helvetica Neue 15px/20px a BRANCO — estava a .86rem (13.8px) com
   entrelinha 1.6 e a 78% de opacidade, mais pequeno e mais apagado do que devia.
   O «Saiba Mais» é 12px/15px no peso 500, e não .8rem a 600. */
.ev-sig__cartao h3{font-size:1.15rem;font-weight:700;letter-spacing:.01em}
.ev-sig__cartao p{font-family:var(--ev-corpo);font-size:15px;line-height:20px;color:#fff}
.ev-sig__cartao a{margin-top:auto;font-family:var(--ev-corpo);font-size:12px;line-height:15px;
    font-weight:500;color:var(--ac);
    text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.ev-sig__cartao a::after{content:"›";font-size:1.1em;line-height:1}
.ev-sig__cartao a:hover{filter:brightness(1.25)}

/* 3 ── Ligações ao cartão central. A linha é uma borda a picotado num elemento
   fino; o ponto é o ::after. Uma direcção por posição do cartão. */
.ev-sig__liga{position:absolute;pointer-events:none;--pt:7px}
.ev-sig__liga::after{content:"";position:absolute;width:var(--pt);height:var(--pt);
    border-radius:50%;background:var(--ac)}

/* ✔ Medido no desenho (coluna de 840px), e convertido para % do CARTÃO, que é
   contra quem estas percentagens resolvem — o cartão é 20.9% do conteúdo:
     verde   80px na horizontal × 47 na vertical → 93px de comprimento a 30°  = 53%
     azul    50px na horizontal                                              = 29%
     laranja 83px na vertical                                                = 9.9% do conteúdo
   Antes eram 24% / 26% / 72px, ou seja cerca de metade — daí parecerem curtos. */

/* AS TRÊS LINHAS COMEÇAM FORA DA CAIXA DE ORIGEM E ACABAM DENTRO DO SIG.
   Antes encostavam exactamente às duas arestas: nasciam colados ao cartão de
   origem e morriam na aresta do central, o que as fazia ler como três traços
   soltos entre caixas em vez de ligações. Agora arrancam a 12px do cartão de
   origem e entram 30px pelo cartão do SIG — passam por baixo dele, porque o
   fundo do central é uma camada (::before) por cima da linha.

   Os 12 e os 30 vão em px e não em %: são folgas ópticas, e em percentagem
   mudavam com a largura da coluna — a 1200px ficariam quase a zero. */
/* financeira (1.ª coluna): DIAGONAL a 30°, como no desenho — desce da direita do
   cartão até ao SIG. O traço é `dashed`, igual ao das outras duas (era `dotted`,
   e destoava).

   O comprimento é maior do que a folga horizontal justamente por ser inclinado:
   para o traço avançar (44% + 18px) na horizontal, tem de medir isso a dividir
   por cos30° — daí os 50.8% + 21px. Com a mesma conta das outras, arranca 12px
   fora do cartão e entra 30px pelo SIG. */
.ev-sig__cartao--p1 .ev-sig__liga{right:calc(-50.8% - 33px);top:56%;width:calc(50.8% + 21px);
    border-top:2px dashed var(--ac);transform:rotate(30deg);transform-origin:left center}
.ev-sig__cartao--p1 .ev-sig__liga::after{left:calc(-1 * var(--pt) / 2);top:calc(-1 * var(--pt) / 2)}

/* capital humano (3.ª coluna): entra pelo lado esquerdo, na horizontal.

   A largura tem de ser o INTERVALO INTEIRO entre o cartão e o do centro, senão a
   linha morre a meio do vazio. O intervalo é 9.2% da grelha; o cartão é 1fr de
   `1fr 1.9fr 1fr` com dois intervalos de 9.2%, ou seja 20.92% da grelha. Como
   estas percentagens resolvem contra o CARTÃO: 9.2 ÷ 20.92 = 44%. Estava a 29%,
   isto é, dois terços do caminho — daí parecer curta. */
.ev-sig__cartao--p2 .ev-sig__liga{left:calc(-44% - 30px);top:56%;width:calc(44% + 18px);
    border-top:2px dashed var(--ac)}
.ev-sig__cartao--p2 .ev-sig__liga::after{right:calc(-1 * var(--pt) / 2);top:calc(-1 * var(--pt) / 2)}

/* estratégica (linha de baixo): entra por cima, na vertical. A altura vai em rem
   porque a percentagem resolveria contra a ALTURA do cartão, que varia com o texto. */
/* estratégica: entra por cima, na vertical. O desnível entre a linha do SIG e a
   dela é o `margin-top:5rem` (80px), por isso a linha sobe 110 (80 + 30 dentro do
   SIG) e pára 12px acima do cartão. Em px porque uma percentagem resolveria
   contra a ALTURA do cartão, que varia com o texto. */
.ev-sig__cartao--p3 .ev-sig__liga{left:50%;top:-110px;height:98px;
    border-left:2px dashed var(--ac)}
.ev-sig__cartao--p3 .ev-sig__liga::after{left:calc(-1 * var(--pt) / 2 - 1px);bottom:0}

/* ── Xadrez: cada cartão com o seu desnível, como no desenho. ── */
.ev-sig__cartao--p1{grid-column:1;grid-row:1}
.ev-sig__centro    {grid-column:2;grid-row:1;margin-top:1.6rem}
.ev-sig__cartao--p2{grid-column:3;grid-row:1;margin-top:3.2rem}
/* estratégica: a mesma largura dos outros cartões de área (52% da coluna central
   ≈ 21% do conteúdo, como no desenho) e CENTRADA por baixo do cartão do SIG. */
.ev-sig__cartao--p3{grid-column:2;grid-row:2;margin-top:5rem;
    width:52%;justify-self:center}

/* Cartão central (SIG) — sem cor de área, mais claro, e com o canto superior
   direito muito mais aberto do que os outros, como no desenho. */
/* Canto: só o superior direito é redondo, e a 60px. Os outros três ficam a
   esquadria — era o que distinguia este cartão dos de área, que têm 8px em todos. */
.ev-sig__centro{border-radius:0 60px 0 0;text-align:center;align-items:center;
    justify-content:center;padding:2.6rem 2.2rem;min-height:0}
.ev-sig__centro::before{background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.10);border-radius:inherit}
/* O cartão do SIG não tem área, logo não tem filete de cor — sem isto herdava o
   vermelho de recurso do `var(--ac, var(--ev-red))`. */
.ev-sig__centro::after{display:none}
/* ✔ 4104:328: 37.44px com entrelinha de 40.061 (1.07) e -0.936px de
   espacejamento (-.025em). Estava a chegar aos 30.4px com entrelinha 1.25. */
.ev-sig__centro h3{font-size:clamp(1.5rem, 1.007rem + 2.02vw, 37.44px);
    line-height:1.07;letter-spacing:-.025em}
.ev-sig__centro h3 span{color:var(--ev-red)}
/* ✔ 4104:330: 16px/21px numa medida de 327px — e não a herança dos 15px dos
   cartões de área com uma medida em ch. */
.ev-sig__centro p{font-size:16px;line-height:21px;max-width:327px}

@media (max-width:900px){
    .ev-sig{grid-template-columns:1fr}
    .ev-sig__cartao--p1,.ev-sig__cartao--p2,.ev-sig__cartao--p3,.ev-sig__centro{
        grid-column:1;grid-row:auto;margin-top:0;margin-left:0;width:auto;justify-self:stretch}
    .ev-sig{row-gap:clamp(1rem,2.2vw,1.8rem)}
    /* Em coluna única as ligações apontariam para o lado errado e os cotovelos
       transbordavam para fora do ecrã: saem os dois, fica o filete de cor. */
    .ev-sig__liga,.ev-sig__cotovelo{display:none}
    /* O canto de 60px mantém-se em coluna única: é a assinatura do cartão. */
}

/* ── Faixa Place Me ──────────────────────────────────────────────────── */
/* ✔ Dev Mode (4279:1079 a 4279:1093): fotografia a toda a largura com um painel
   #4CA585 a 92% por cima — e não o verde chapado que aqui estava (o
   --ev-placeme #63A98B é, aliás, outro verde). O painel tem 80px de folga em
   cima/baixo e 340px nos lados; dentro, o logótipo (180×150) e a coluna de texto
   (370.7px) são empurrados para as extremidades.

   Os 340px laterais vão em vw (340 ÷ 1512 = 22.49vw) com um mínimo: fixos,
   abaixo dos 1000px não sobrava largura nenhuma para a coluna de texto. */
.ev-placeme{position:relative;isolation:isolate;overflow:hidden;
    background:#4CA585;color:#fff}
.ev-placeme__fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* O painel é uma camada por cima da fotografia, com a opacidade do desenho. */
.ev-placeme::after{content:"";position:absolute;inset:0;background:#4CA585;opacity:.92;
    z-index:1;pointer-events:none}

/* DUAS COLUNAS A 50%, com o logótipo CENTRADO na da esquerda e o texto na da
   direita. Estava antes em `justify-content:space-between`, que reproduzia as
   posições absolutas do Figma (logótipo colado aos 340px da esquerda, coluna de
   texto a começar aos 801) — matematicamente certo, mas lia-se como duas peças
   soltas em vez de duas colunas. Com 50/50 o logótipo cai a 458px em vez de 340
   e a coluna de texto abre dos 370.7px do desenho para os 416 da meia-largura:
   é um desvio assumido face ao ficheiro, a pedido. */
/* Camadas, de baixo para cima: fotografia (0) · painel verde (1) · símbolo em
   marca-de-água (2) · conteúdo (3). O símbolo fica DEBAIXO do texto de propósito:
   no ficheiro passa-lhe por cima, mas a 15% de branco sobre verde ainda assim
   suja a leitura de um parágrafo a 12px. */
/* `max-width:none` anula a regra geral `img{max-width:100%}`: sem isso, num ecrã
   estreito o símbolo era espremido à largura da janela em vez de transbordar, e
   a casa saía deformada. Transbordar é o comportamento certo — o overflow:hidden
   da secção recorta-o, que é o que uma marca-de-água encostada faz.

   O `right` alinha-o pela margem direita do CONTEÚDO (a mesma do .ev-wrap) e não
   pela da secção. O símbolo está posicionado em relação à secção, que é quem lhe
   dá a altura toda, por isso a distância tem de ser recalculada: metade do que
   sobra depois da caixa de conteúdo, mais a goteira. Com a janela mais estreita
   do que a caixa, a primeira parcela anula-se e sobra só a goteira. */
.ev-placeme__simbolo{position:absolute;top:0;height:100%;width:auto;max-width:none;
    right:calc((100% - min(100%, var(--ev-wrap) + var(--ev-gut) * 2)) / 2 + var(--ev-gut));
    z-index:2;pointer-events:none;user-select:none}

/* Leva a classe .ev-wrap no blade: a largura do conteúdo passa a ser a MESMA do
   resto do site (a mesma que a .ev-grupo__grelha), em vez dos 340px laterais que
   as posições absolutas do Figma davam. Só o espaçamento vertical fica aqui. */
.ev-placeme__conteudo{position:relative;z-index:3;
    display:grid;grid-template-columns:1fr 1fr;align-items:center;
    padding-block:80px}

/* O logótipo é o SVG da marca, à medida do desenho (180×150). `justify-self`
   centra-o na sua metade sem lhe mexer no tamanho. */
.ev-placeme__marca{justify-self:center;display:block;width:180px;height:150px;max-width:100%}

/* 40px a afastar o texto do meio da faixa — a coluna é metade da largura, e sem
   esta folga o parágrafo encostava à linha imaginária que a divide ao meio. */
.ev-placeme__col{min-width:0;padding-left:40px}

/* Título 29px/1.25 com -.03em (os -0.8722px do Dev Mode sobre 29.073px), numa
   medida de 353px. O espacejamento vai em em para acompanhar o corpo. */
.ev-placeme__titulo{font-family:var(--ev-display);font-weight:700;
    font-size:29px;line-height:1.25;letter-spacing:-.03em;
    max-width:353px;color:#fff}

/* 12px/1.6, a 15px do título — os dois parágrafos ficam separados por uma linha
   em branco, como no desenho. */
.ev-placeme__texto{margin-top:15px;
    font-family:var(--ev-corpo);font-weight:400;font-size:12px;line-height:1.6;color:#fff}
.ev-placeme__texto p{margin:0 0 1em}
.ev-placeme__texto p:last-child{margin-bottom:0}

/* O botão desta faixa é MAIS PEQUENO do que o dos outros blocos do site (12px
   contra 17px, 10/21 contra 15/30): é assim no desenho, por isso a excepção fica
   aqui e não na regra base. */
.ev-placeme__acao{margin:21px 0 0}
.ev-placeme .ev-btn{font-size:12px;line-height:1.15;padding:10px 21px;border-radius:6px}

@media (max-width:960px){
    /* Empilhado: o logótipo passa a alinhar à esquerda com o texto, senão ficava
       centrado sozinho por cima de um bloco alinhado à esquerda. */
    .ev-placeme__conteudo{grid-template-columns:1fr;gap:2.5rem;padding-block:4rem}
    .ev-placeme__marca{justify-self:start}
    .ev-placeme__titulo{max-width:none}
    /* Empilhado não há meio nenhum de que afastar: a folga sairia como uma
       indentação do texto em relação ao logótipo. */
    .ev-placeme__col{padding-left:0}
    /* Empilhada, a faixa fica muito mais alta; a 100% de altura o símbolo passava
       a ser mais largo do que o ecrã inteiro. Encosta-se ao fundo, a 60%. */
    .ev-placeme__simbolo{height:60%;top:auto;bottom:0}
}

/* ── Cartões de notícia ──────────────────────────────────────────────── */
/* ── Home · Atualidades ──────────────────────────────────────────────────
   ✔ Dev Mode (4359:3410, 4181:366 a 4181:385, 4182:436). O que aqui estava era o
   bloco `.ev-noticia`: cartão branco com BORDA de 1px, cantos a 8px e 1.6rem de
   folga interior. Nada disso existe no desenho — são duas colunas de texto
   corrido sobre o branco da página, sem caixa nenhuma à volta. Removido, e não
   apenas desligado: não era usado em mais lado nenhum.

   A marcação passou a ser a `.ev-nt` da página de Notícias, para a seta do «Ler
   mais» e o realce ao passar o rato virem de um sítio só. Aqui só se ajustam as
   medidas, que são as desta secção e não as da listagem. */
.ev-atualidades{padding-block:167px 150px}

.ev-atualidades__cabecalho{text-align:center}
/* As duas linhas do cabeçalho tinham a entrelinha de 66.113px do Figma — 1.322
   sobre os 50px do título e 1.889 sobre os 35px do subtítulo. Em Figma isso serve
   para as afastar uma da outra; em CSS a entrelinha reparte-se METADE ACIMA e
   metade abaixo de cada linha, e o que se somava entre elas eram ~16px de espaço
   morto do título mais ~15px do subtítulo — 32px de branco que ninguém pediu, e
   mais 19px pendurados por baixo do subtítulo a inflar o intervalo seguinte.

   Agora cada linha tem a sua entrelinha justa e o afastamento entre as duas é
   uma margem explícita: mexe-se num sítio só e vê-se o que se mexe. */
.ev-atualidades__titulo{font-family:var(--ev-display);font-weight:700;
    font-size:clamp(2rem, 1.609rem + 1.604vw, 50px);line-height:1.1;
    font-variant-numeric:lining-nums proportional-nums;color:var(--ev-red)}
.ev-atualidades__sub{margin:8px 0 0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.5rem, 1.261rem + 0.98vw, 35px);line-height:1.2;
    font-variant-numeric:lining-nums proportional-nums;color:var(--ev-escuro)}

/* Duas colunas com 60px de intervalo. O desenho tem 30 (623 + 30 + 606.6), mas a
   30 as duas notícias liam-se como um bloco só — as linhas de texto acabam curtas
   e o corredor entre colunas confundia-se com as folgas internas. Alargado a
   pedido; as colunas passam de 622 para 606. */
.ev-atualidades__grelha{display:grid;grid-template-columns:1fr 1fr;gap:60px;
    margin-top:48px;align-items:start}

.ev-atualidades .ev-nt__texto{gap:30px}
/* ✔ 15px/21.493 no cinza claro · Zona Pro 25px/1.2 · 15px/24.448 · «Ler mais»
   a 14.5px. O peso da data é 400 e não os 500 da listagem. */
.ev-atualidades .ev-nt__data{font-weight:400;font-size:15px;line-height:21.493px;
    color:var(--ev-cinza-claro)}
.ev-atualidades .ev-nt__titulo{font-size:25px;line-height:1.2;color:#272727}
.ev-atualidades .ev-nt__resumo{font-size:15px;line-height:24.448px;color:#525252}
.ev-atualidades .ev-nt__ler{font-size:14.5px;line-height:1.5}

.ev-atualidades__acao{margin:52px 0 0;text-align:center}

@media (max-width:860px){
    .ev-atualidades{padding-block:5rem}
    .ev-atualidades__grelha{grid-template-columns:1fr;gap:3rem;margin-top:2rem}
    .ev-atualidades__acao{margin-top:3rem}
}

/* ── Página de texto corrido ─────────────────────────────────────────────
   Para as páginas legais e de informação (privacidade, termos, apoio PRR). O
   tipo `generic` do catálogo base não serve aqui: está escrito com classes e
   cores de outro tema (#FAF8F6, #EA5B0C) e destoava por completo.
   Medida de ~72 caracteres — acima disso a leitura de texto legal sofre. */
/* O TÍTULO DA PÁGINA E O TEXTO SÃO A MESMA COISA, em duas secções.
   `titulo-pagina` já leva padding-bottom:0 para a seguinte lhe encostar — mas a
   seguinte trazia o seu próprio padding-top de secção (até 7,5rem), e o vão
   aparecia na mesma. Só se fecha aqui, e só quando uma vem MESMO a seguir à
   outra: uma «página de texto» usada sozinha continua a ter o ar de topo que
   qualquer secção tem. */
.ev-titulopag + .ev-textopag{padding-top:2rem}

.ev-texto__col{max-width:72ch}
.ev-texto__corpo{font-family:var(--ev-corpo);font-weight:400;font-size:1rem;
    line-height:1.7;color:var(--ev-tinta)}
.ev-texto__corpo > * + *{margin-top:1rem}
.ev-texto__corpo p{margin:0 0 1rem}
.ev-texto__corpo p:last-child{margin-bottom:0}
.ev-texto__corpo h2{font-family:var(--ev-display);font-size:1.5rem;margin:2.2rem 0 .8rem}
.ev-texto__corpo h3{font-family:var(--ev-display);font-size:1.15rem;margin:1.8rem 0 .6rem}
.ev-texto__corpo ul,.ev-texto__corpo ol{margin:0 0 1rem;padding-left:1.4rem}
.ev-texto__corpo li + li{margin-top:.35rem}
.ev-texto__corpo a{color:var(--ev-red)}
.ev-texto__corpo table{width:100%;border-collapse:collapse;margin:1rem 0}
.ev-texto__corpo th,.ev-texto__corpo td{border:1px solid var(--ev-linha);padding:.6rem .8rem;text-align:left}

/* ── Notícia (detalhe) ───────────────────────────────────────────────────
   ✔ Figma, nó 4045:376. Medidas do desenho (moldura 1512):
     · «Voltar» a 14px, alinhado à esquerda da coluna de conteúdo;
     · título Zona Pro Bold 40px/1.2 centrado, com 774px de medida máxima;
     · data 12.4px em cinza claro, centrada;
     · fotografia e corpo do artigo numa coluna de 838px (≈65.8% dos 1273 do
       tema) — mais estreita do que a do resto do site, de propósito, para a
       linha de texto não passar dos ~90 caracteres;
     · corpo a 14px/1.5 com 10px entre parágrafos;
     · «Mais notícias» a 30px vermelho, e duas relacionadas em meia coluna cada.
   As fotografias são 16/9 com cantos a 10px, como na listagem. */
.ev-artigo{--ev-artigo-col:838px}
.ev-artigo__col{max-width:var(--ev-artigo-col);margin-inline:auto}

/* ✔ Figma: seta e rótulo com ~4px entre a tinta de um e do outro.
   `align-items:baseline` e NÃO center: centrar alinha a seta pela CAIXA DE LINHA,
   que inclui o espaço dos descendentes e muda com a fonte — bastava a Helvetica
   Neue LT Std carregar para a seta descair em relação ao texto. Pela linha de base,
   a seta (10px) assenta onde as letras assentam e o topo dela cai à altura da
   maiúscula do texto a 14px (~10.1px), que é o alinhamento óptico certo em
   qualquer fonte. */
.ev-artigo__voltar{display:inline-flex;align-items:baseline;gap:4px;
    font-family:var(--ev-corpo);font-weight:500;font-size:.875rem;line-height:1.5;
    color:var(--ev-tinta);text-decoration:none}
/* ✔ Figma: a seta é o SVG da marca (6×10) e vem a VERMELHO, com o rótulo em
   cinza escuro — por isso a cor vai no svg e não é herdada do <a>. */
.ev-artigo__voltar svg{display:block;width:6px;height:10px;flex:none;color:var(--ev-red)}
.ev-artigo__voltar:hover span{color:var(--ev-red)}

.ev-artigo__titulo{font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1.2;color:var(--ev-tinta);
    text-align:center;max-width:774px;margin:1.5rem auto 0}
.ev-artigo__data{margin:1.55rem 0 0;text-align:center;font-family:var(--ev-corpo);
    font-weight:500;font-size:.775rem;line-height:1.5;color:var(--ev-cinza-claro)}
.ev-artigo__foto{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;
    display:block;margin-top:1.7rem}

/* ✔ Figma: 14px/1.5 com 10px entre parágrafos. O conteúdo vem do editor do CMS,
   por isso os estilos vão nos descendentes e não numa classe por parágrafo. */
.ev-artigo__corpo{margin-top:3.1rem;font-family:var(--ev-corpo);font-weight:400;
    font-size:.875rem;line-height:1.5;color:var(--ev-tinta)}
.ev-artigo__corpo > * + *{margin-top:10px}
.ev-artigo__corpo p{margin:0 0 10px}
.ev-artigo__corpo p:last-child{margin-bottom:0}
.ev-artigo__corpo h2,.ev-artigo__corpo h3{font-family:var(--ev-display);margin:1.8rem 0 .6rem}
.ev-artigo__corpo h2{font-size:1.4rem}
.ev-artigo__corpo h3{font-size:1.15rem}
.ev-artigo__corpo a{color:var(--ev-red)}
.ev-artigo__corpo img{max-width:100%;height:auto;border-radius:10px}
.ev-artigo__corpo ul,.ev-artigo__corpo ol{margin:0 0 10px;padding-left:1.3rem}

/* ✔ Figma: 24.8px, vermelho da marca, alinhado à esquerda da coluna do artigo. */
.ev-artigo__partilhar{display:block;margin-top:2.9rem;padding:0;border:0;background:none;
    cursor:pointer;color:var(--ev-red);line-height:0;transition:opacity .2s}
.ev-artigo__partilhar svg{display:block;width:24.8px;height:24.8px}
.ev-artigo__partilhar:hover{opacity:.7}
/* Confirmação de "link copiado", quando o browser não tem menu de partilha. */
.ev-artigo__partilhar[data-ev-copiado]{position:relative}
.ev-artigo__partilhar[data-ev-copiado]::after{content:attr(data-ev-copiado);
    position:absolute;left:calc(100% + .6rem);top:50%;transform:translateY(-50%);
    white-space:nowrap;font-family:var(--ev-corpo);font-size:.8rem;color:var(--ev-cinza)}

/* Painel de partilha (só onde o browser não tem menu nativo). */
.ev-partilha{position:relative;display:inline-block}
.ev-partilha__painel{position:absolute;left:0;top:calc(100% + .6rem);z-index:5;
    min-width:11rem;padding:.4rem;background:#fff;border:1px solid var(--ev-linha);
    border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);
    display:flex;flex-direction:column}
.ev-partilha__painel[hidden]{display:none}
.ev-partilha__painel a,.ev-partilha__painel button{
    padding:.55rem .7rem;border:0;background:none;text-align:left;cursor:pointer;
    font-family:var(--ev-corpo);font-weight:500;font-size:.875rem;line-height:1.4;
    color:var(--ev-tinta);text-decoration:none;border-radius:6px}
.ev-partilha__painel a:hover,.ev-partilha__painel button:hover{
    background:var(--ev-claro);color:var(--ev-red)}

/* Restantes fotografias da notícia, depois do corpo. */
.ev-artigo__galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:2.5rem}
.ev-artigo__galeria img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block}

/* ✔ Figma: 150px entre a base do ícone de partilha (1431.8) e o topo do «Mais
   notícias» (1582). Como são duas secções, a folga era a SOMA dos dois paddings
   de .ev-sec — 120 + 120 = 240px. Zera-se o de baixo do artigo e fixa-se o de
   cima da outra, para o número ser o do desenho e não uma soma acidental. */
.ev-artigo--corpo{padding-bottom:0}

/* ── Detalhe de uma notícia de ATUALIDADES ───────────────────────────────────
   ✔ Figma 4174:337. A vista é a mesma do detalhe do Universo; o que muda é o que
   NÃO aparece (data, fotografia, galeria e «Mais notícias», tudo cortado na
   marcação) e estas três medidas. */
/* ✔ Desenho: o título tem 836px de medida, e não os 774 do outro. */
.ev-artigo--atl .ev-artigo__titulo{max-width:836px}
/* Sem fotografia pelo meio, o corpo passa a encostar ao título: no desenho ficam
   65px entre a base do título e a primeira linha do texto, contra os ~50 que a
   regra base deixa depois da imagem. */
.ev-artigo--atl .ev-artigo__corpo{margin-top:65px}
/* A regra base zera o recuo de baixo porque conta com «Mais notícias» a seguir.
   Aqui não vem nada, e sem isto o botão de partilha ficava colado ao rodapé. */
.ev-artigo--atl.ev-artigo--corpo{padding-bottom:var(--ev-sec)}
.ev-artigo--mais-sec{padding-top:150px}
@media (max-width:860px){
    /* 150px num ecrã de telemóvel é um vazio grande de mais. */
    .ev-artigo--mais-sec{padding-top:90px}
}

/* ✔ Figma: 30px Zona Pro Bold vermelho, centrado. */
.ev-artigo__mais-titulo{font-family:var(--ev-display);font-weight:700;font-size:1.875rem;
    line-height:1.2;color:var(--ev-red);text-align:center;margin:0 0 3.2rem}
/* Duas relacionadas, meia coluna cada (Figma: 621 + 27 + 624). */
.ev-artigo__mais{display:grid;grid-template-columns:repeat(2,1fr);gap:27px}
.ev-artigo__mais .ev-nt__foto{aspect-ratio:16/9}
/* ✔ Figma: título da relacionada a 15px, mais pequeno do que na listagem. */
.ev-artigo__mais .ev-nt__titulo{font-size:.9375rem;line-height:1.3}
.ev-artigo__mais .ev-nt{gap:10px}

@media (max-width:860px){
    .ev-artigo__mais,.ev-artigo__galeria{grid-template-columns:1fr}
}

/* ── Lista de notícias ("Universo Edit Value") ───────────────────────────
   ✔ Figma, nó 4043:62. Medidas do desenho (moldura de 1512, conteúdo 1272):
     · grelha de 3 colunas de 404px com 30px de intervalo → 3×404+2×30 = 1272,
       que é exactamente a coluna de conteúdo do tema (--ev-wrap 1273);
     · fotografias 404×227 e 603×339 — as duas em 16/9, daí o aspect-ratio;
     · cantos a 10px (e não os 8px do --ev-raio, que é o do botão do menu);
     · destaque: imagem 603 + 33 de intervalo + texto 603;
     · dentro de cada coluna, 20px entre data, título, resumo e link.
   Nada disto é um cartão: o desenho não tem caixa nem borda, ao contrário do
   .ev-noticia usado na homepage — por isso é um bloco novo e não um modificador. */
.ev-noticias-lista{display:grid;gap:20px}

.ev-nt{display:flex;flex-direction:column;gap:20px;align-items:flex-start;
    text-decoration:none;color:inherit}
.ev-nt__foto{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block}
/* ✔ Figma: 12.4px, peso 65 Medium, cinza claro. */
.ev-nt__data{margin:0;font-family:var(--ev-corpo);font-weight:500;font-size:.775rem;
    line-height:1.5;color:var(--ev-cinza-claro)}
/* ✔ Figma: Zona Pro Bold 24px sobre o cinza escuro. */
.ev-nt__titulo{font-family:var(--ev-display);font-weight:700;font-size:1.5rem;line-height:1.2;
    color:var(--ev-tinta);margin:0}
/* ✔ Figma: Helvetica 55 Roman 16px/1.5. */
.ev-nt__resumo{margin:0;font-family:var(--ev-corpo);font-weight:400;font-size:1rem;
    line-height:1.5;color:var(--ev-tinta)}
/* ✔ Figma: 14.5px vermelho + seta. A seta é o mesmo motivo rodado 45° que o
   acordeão dos Contactos usa — herda a cor, dispensa um SVG por link. */
.ev-nt__ler{display:inline-flex;align-items:center;gap:.8rem;font-family:var(--ev-corpo);
    font-weight:500;font-size:.9rem;line-height:1.5;color:var(--ev-red);text-decoration:none}
.ev-nt__ler::after{content:"";width:8px;height:8px;flex:none;
    border-top:2px solid currentColor;border-right:2px solid currentColor;
    transform:rotate(45deg) translate(-1px,1px)}
.ev-nt:hover .ev-nt__titulo{color:var(--ev-red)}
.ev-nt:hover .ev-nt__ler{text-decoration:underline}

/* A mesma estrutura serve os dois formatos: <a> com a fotografia e um bloco de
   texto. No cartão normal empilham-se; no destaque ficam lado a lado. */
.ev-nt__texto{display:flex;flex-direction:column;gap:20px;align-items:flex-start}

/* Destaque: fotografia à esquerda, texto à direita (Figma: 603 + 33 + 603). */
.ev-nt--destaque{display:grid;grid-template-columns:1fr 1fr;gap:33px;align-items:start}

/* Grelha das restantes. */
.ev-noticias-lista__grelha{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
    align-items:start}

.ev-noticias-lista__vazio{color:var(--ev-cinza);font-family:var(--ev-corpo)}

@media (max-width:900px){
    .ev-nt--destaque{grid-template-columns:1fr}
    .ev-noticias-lista__grelha{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
    .ev-noticias-lista__grelha{grid-template-columns:1fr}
}

/* ── "Universo Edit Value" (faixa vermelha com fotos) ────────────────── */
/* ── Home · Um Grupo com… ────────────────────────────────────────────────────
   ✔ Figma «homepage», nó 46:348: TEXTO À ESQUERDA numa coluna de 612, 146px de
   intervalo, e a fotografia à direita com 514 de largura (cantos de 12) e a
   altura da coluna de texto. Dentro da coluna, 30px entre cada peça.

   Trocou de lado em relação ao desenho anterior (fotografia à esquerda,
   513 + 137 + 622) e o título subiu de medida. O intervalo acompanha a largura
   (146px a 1512 são 9.66vw), senão a 1100px sobrava-lhe pouco mais de metade da
   coluna de texto. */
.ev-grupo{padding-block:150px;background:var(--ev-branco)}
/* align-items:stretch (o defeito) e não `start`: é o que faz a fotografia tomar
   a altura da linha, e a altura da linha é ditada pela coluna de texto — ver a
   nota na figura abaixo. */
.ev-grupo__grelha{display:grid;grid-template-columns:612fr 514fr;
    gap:clamp(2.5rem, 9.66vw, 146px)}
/* ✔ Desenho: a fotografia à DIREITA — é o estado de fábrica. A opção «Lado da
   imagem» troca a ordem VISUAL (a marcação continua texto → imagem) e, com ela,
   as medidas das faixas. */
.ev-grupo--esq .ev-grupo__grelha{grid-template-columns:514fr 612fr}
.ev-grupo--esq .ev-grupo__fig{order:-1}
.ev-grupo__grelha--so-texto{grid-template-columns:1fr}
/* Pela mesma razão do «impacto»: sem fotografia ao lado, a coluna fica numa
   medida de leitura em vez de atravessar a faixa toda. */
.ev-grupo__grelha--so-texto .ev-grupo__col{max-width:760px}
/* ✔ Desenho: 30px entre o sobretítulo, o título, o corpo e o botão. */
.ev-grupo__col{display:flex;flex-direction:column;align-items:flex-start;gap:30px}

/* A FOTOGRAFIA TEM A ALTURA DO TEXTO.
   Não há forma em CSS de dizer «a minha altura é a do meu irmão», mas há esta:
   tirar a imagem do fluxo (`absolute`), com o que a figura deixa de ter altura
   própria. A linha da grelha passa a ser medida só pela coluna de texto, e o
   `align-self:stretch` estica a figura até essa altura. Se a imagem ficasse no
   fluxo, era ELA a ditar a altura da linha.
   O recorte fica por conta do object-fit:cover; os cantos passam para a figura,
   porque é ela que agora tem a caixa. */
.ev-grupo__fig{margin:0;position:relative;align-self:stretch;min-height:0;
    overflow:hidden;border-radius:12px}
.ev-grupo__fig img{position:absolute;inset:0;display:block;
    width:100%;height:100%;object-fit:cover}

/* ✔ Desenho: Zona Pro 700 40px, na medida toda da coluna. */
.ev-grupo__titulo{
    margin:0;font-family:var(--ev-display);font-weight:700;line-height:1.2;
    font-size:clamp(1.625rem, 1.321rem + 1.248vw, 40px);
    font-variant-numeric:lining-nums proportional-nums;
    color:var(--ev-escuro);
}

/* ✔ Desenho: 18px/1.6. Os parágrafos vão em <div> e não em <p> porque o corpo
   vem do editor rico e pode trazer vários — daí a folga entre eles ir no gap. */
.ev-grupo__texto{
    display:flex;flex-direction:column;gap:1em;
    font-family:var(--ev-corpo);font-weight:400;line-height:1.6;
    font-size:clamp(1rem, 1.2vw, 18px);
    color:var(--ev-escuro);
}
/* Os parágrafos podem vir num bloco só (dois <p> numa caixa de texto do CMS) ou
   em blocos separados. O espaço entre eles tem de ser o MESMO nos dois casos,
   senão passar de duas caixas para uma mudava o desenho da faixa — daí o
   `margin-bottom` do <p> repetir o `gap` do contentor. */
.ev-grupo__texto p{margin:0 0 1em}
.ev-grupo__texto p:last-child{margin-bottom:0}

.ev-grupo__acao{margin:0}
/* ✔ Desenho: 12/24 de folga e cantos de 4 — o botão pequeno do desenho novo. */
.ev-grupo .ev-btn{padding:12px 24px;border-radius:4px;font-size:16px}

@media (max-width:1024px){
    .ev-grupo{padding-block:clamp(3.5rem,9vw,150px)}
    /* A variante do lado vem listada por nome: tem mais especificidade do que
       `.ev-grupo__grelha` sozinho e, sem isto, a faixa nunca empilhava. */
    .ev-grupo__grelha,
    .ev-grupo--esq .ev-grupo__grelha{grid-template-columns:1fr;gap:2.5rem}
    /* Empilhada, a fotografia fica sempre DEPOIS do texto. */
    .ev-grupo--esq .ev-grupo__fig{order:0}
    .ev-grupo__col{gap:20px}
    /* Em coluna única já não há irmão ao lado de quem copiar a altura, e uma
       figura sem altura própria colapsava para zero — a imagem desaparecia.
       Volta tudo ao fluxo normal, com uma altura fixa e o recorte a cargo do
       object-fit. */
    .ev-grupo__fig{position:static;align-self:auto;overflow:hidden}
    .ev-grupo__fig img{position:static;height:clamp(240px, 55vw, 514px)}
}

/* ── Home · Outros Serviços ──────────────────────────────────────────── */
/* ✔ Dev Mode (4094:158, 4094:192 a 4094:194, 4094:332/333, 4182:421/427):
   faixa #F5F5F5 de 706px com 150px de respiração em cima e em baixo; duas
   colunas de 622px com 28px de intervalo (120→742 e 770→1392). */
.ev-outros{padding-block:150px}

.ev-outros__titulo{
    font-family:var(--ev-display);font-weight:700;line-height:normal;
    font-size:clamp(1.625rem, 1.321rem + 1.248vw, 40px);
    font-variant-numeric:lining-nums proportional-nums;color:var(--ev-escuro);
}

.ev-outros__grelha{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:62px}

/* PEDIDO: 40% de folga à direita em cada coluna de texto. Sobre os 622px da
   coluna dá ~249px, o que deixa o texto com ~373px — perto dos 400/412px que o
   desenho lhe dá. A coluna é flex para o botão poder encostar ao fundo. */
.ev-outros__col{display:flex;flex-direction:column;padding-right:40%}

/* 35px com entrelinha de 33.68px. Vai em número SEM unidade (33.68 ÷ 35) e não
   em px: assim a entrelinha encolhe com o corpo. Fixa em px, um subtítulo que
   passasse a duas linhas em ecrã pequeno ficaria com as linhas afastadas de
   33.68px sobre letras de 24px. */
.ev-outros__sub{
    font-family:var(--ev-display);font-weight:700;line-height:.9623;
    font-size:clamp(1.5rem, 1.261rem + 0.98vw, 35px);
    font-variant-numeric:lining-nums proportional-nums;color:var(--ev-red);
}

.ev-outros__texto{
    margin:50px 0 0;
    font-family:var(--ev-corpo);font-weight:400;line-height:normal;
    font-size:clamp(1rem, 0.804rem + 0.8vw, 25px);
    color:var(--ev-escuro);
}

/* `margin-top:auto` alinha os dois botões pela mesma linha, como no desenho
   (ambos em y=2634), apesar de as colunas terem textos de alturas diferentes.
   O padding garante o afastamento mínimo quando as alturas são iguais. */
.ev-outros__acao{margin:auto 0 0;padding-top:49px}

@media (max-width:1024px){
    .ev-outros{padding-block:5rem}
    .ev-outros__grelha{grid-template-columns:1fr;gap:3rem;margin-top:2.5rem}
    /* A folga de 40% era o que separava as duas colunas do texto vizinho; em
       coluna única não há vizinho, e mantê-la só estreitava a leitura. */
    .ev-outros__col{padding-right:0}
    .ev-outros__texto{margin-top:1.5rem}
    .ev-outros__acao{padding-top:1.75rem}
}

/* ── Home · Transformamos conhecimento em valor ──────────────────────── */
/* ✔ Dev Mode (4094:340 a 4094:357). As colunas NÃO são iguais: o título ocupa
   118→622 (504px) e o texto 773→1338 (619px), com 151px de intervalo. A
   `.ev-media` genérica é 1fr 1fr e dava duas colunas de 560px — o título
   quebrava numa linha a mais e o texto ficava mais estreito do que devia. */
/* O intervalo de 151px é o do desenho a 1512px, mas fixo estrangula as colunas
   mal a janela encolhe: a 900px sobravam 267px para o texto (a folga de 20% ainda
   por cima). Passa a acompanhar a largura, com os 151px como tecto. */
.ev-valor__grelha{display:grid;grid-template-columns:504fr 619fr;
    gap:clamp(2.5rem,10vw,151px);align-items:start}

/* Fluido pela mesma reta do corpo: 40px a 1512px (desenho) → 26px a 390px. */
.ev-valor__titulo{
    font-family:var(--ev-display);font-weight:700;line-height:normal;
    font-size:clamp(1.625rem, 1.321rem + 1.248vw, 40px);
    font-variant-numeric:lining-nums proportional-nums;
}

/* O `padding-right:20%` é medido sobre a COLUNA (619px) → ~124px de folga.
   Nota: no desenho a folga é de 54px; os 20% foram pedidos e ficam mais
   apertados do que o Figma — é intencional, não um desvio. */
/* Corpo FLUIDO: 25px a 1512px (o valor do desenho) a descer linearmente até
   16px a 390px. A reta é `0.804rem + 0.8vw` — dá 24.97 aos 1512 e 15.99 aos 390,
   e o clamp trava-a nas duas pontas. O mínimo vai em `rem` e não em `px` de
   propósito: assim continua a crescer com o tamanho de letra que o visitante
   tenha escolhido no browser, coisa que um mínimo em px anularia. */
.ev-valor__texto{
    padding-right:20%;
    font-family:var(--ev-corpo);font-weight:400;
    font-size:clamp(1rem, 0.804rem + 0.8vw, 25px);line-height:normal;
    color:var(--ev-escuro);
}
.ev-valor__texto p{margin:0 0 1em}
.ev-valor__texto p:last-child{margin-bottom:0}

/* ✔ Dev Mode: números Zona Pro 700 56.7px/125% com -1.701px de espacejamento, e
   o rótulo 10.5px abaixo, em Helvetica Neue 500 25px/125%. Regras presas ao
   `.ev-valor` de propósito: a secção genérica `estatisticas` usa as mesmas
   classes noutro contexto e não leva estes valores. */
.ev-valor .ev-stats{gap:31.5px;margin-top:156px}
/* 56.7px a 1512px → 36px a 390px. O espacejamento passa a `-0.03em` em vez dos
   -1.701px do Dev Mode: é o MESMO valor (1.701 ÷ 56.7 = 0.03), mas acompanha a
   fonte — em px, o aperto das letras mantinha-se enquanto o corpo encolhia e o
   número acabava com as letras coladas. */
.ev-valor .ev-stat__n{
    font-family:var(--ev-display);font-weight:700;line-height:125%;
    font-size:clamp(2.25rem, 1.8rem + 1.845vw, 56.7px);
    letter-spacing:-.03em;color:var(--ev-red);
}
/* O rótulo acompanha o corpo do texto (mesma reta, mesmo tecto de 25px): deixá-lo
   fixo enquanto o número por cima encolhe daria um rótulo maior que o número. */
.ev-valor .ev-stat__r{
    margin:10.5px 0 0;
    font-family:var(--ev-corpo);font-weight:500;line-height:125%;
    font-size:clamp(1rem, 0.804rem + 0.8vw, 25px);
    color:var(--ev-escuro);
}

/* 1024px e não 860: às duas colunas ainda cabem letras aos 900px, mas não
   PALAVRAS — o texto partia-se em três ou quatro por linha. */
@media (max-width:1024px){
    .ev-valor__grelha{grid-template-columns:1fr;gap:2rem}
    /* Em coluna única a folga de 20% já não faz sentido: era o que afastava o
       texto da coluna seguinte, e coluna seguinte deixou de haver. O TEXTO
       mantém-se — só a folga é que sai. */
    .ev-valor__texto{padding-right:0}
    /* Sem font-size aqui: os clamps das regras base já cobrem todas as larguras
       de forma contínua. Repeti-los neste limiar criava um DEGRAU — o título, por
       exemplo, saltava de 33.9px para 40px exactamente aos 1024. */
    .ev-valor .ev-stats{margin-top:3rem}
}

/* ── Home · Pensamos hoje o amanhã ───────────────────────────────────────────
   ✔ Figma «homepage», nó 46:358: faixa de 465px, fotografia a cobrir toda a
   largura e DUAS camadas de multiplicação por cima — preto a 40% (46:360) e
   #323E48 a 90% (46:361). São mesmo duas: a primeira aprofunda as sombras da
   fotografia, a segunda tinge-a de cinza-marca. Uma só não dá o mesmo resultado.

   `isolation:isolate` é obrigatório: sem contexto de empilhamento próprio, o
   `mix-blend-mode` multiplicaria contra TUDO o que estivesse por baixo na
   página, e não apenas contra esta fotografia.

   O desenho anterior tinha 455px e o título a 50,4px; o novo é mais contido —
   40px de título e uma linha de apoio de 18 numa medida estreita — e traz a
   marca angular sozinha por cima. */
.ev-amanha{
    position:relative;isolation:isolate;
    min-height:465px;display:flex;align-items:center;
    background:var(--ev-escuro);color:var(--ev-branco);
}
.ev-amanha__fundo{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
/* As camadas SÓ EXISTEM COM FOTOGRAFIA. Sem ela multiplicavam contra o fundo da
   própria secção e a faixa saía quase preta — que não é o cinza da marca nem
   coisa nenhuma do desenho. É esse o estado em que o seeder a deixa, portanto é
   o primeiro que alguém vê. */
.ev-amanha--foto::before,
.ev-amanha--foto::after{content:"";position:absolute;inset:0;pointer-events:none}
.ev-amanha--foto::before{background:rgba(0,0,0,.4);mix-blend-mode:multiply;z-index:1}
.ev-amanha--foto::after{background:var(--ev-escuro);opacity:.9;mix-blend-mode:multiply;z-index:2}
.ev-amanha__conteudo{position:relative;z-index:3}

/* ✔ Desenho: a marca sozinha, ao centro, a 10px do título. Sem texto ao lado o
   `.ev-kicker` continua a servir — é só um item em vez de dois. */
/* DUAS classes de propósito: o `.ev-kicker` declara `margin:0` e vive mais
   abaixo neste ficheiro — com um selector de uma classe só, o `margin-bottom`
   daqui era engolido por ele e a marca ficava colada ao título. */
.ev-amanha .ev-amanha__marca{justify-content:center;margin:0 0 10px}
/* (27-08) As regras do `--so` saíram daqui com o markup que as pedia: a marca
   angular sozinha, sem sobretítulo ao lado, deixou de ser desenhada. Ver
   front/sections/home/amanha.blade.php. */
/* ✔ Desenho: Zona Pro Bold 40px. */
.ev-amanha__titulo{
    font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.625rem,2.65vw,40px);line-height:1.2;
    font-variant-numeric:lining-nums proportional-nums;
    max-width:900px;margin-inline:auto;
}
/* ✔ Desenho: 465px de medida, 18px, a 31.5px do título. É estreito de propósito
   — a linha parte-se em duas e fica debaixo do título, não a atravessar a faixa. */
.ev-amanha__texto{
    margin:31.5px auto 0;max-width:465px;
    font-family:var(--ev-corpo);font-weight:400;
    font-size:clamp(1rem,1.2vw,18px);line-height:1.5;
    color:#FFF;
}
@media (max-width:820px){
    .ev-amanha{min-height:0;padding-block:5rem}
    .ev-amanha__titulo{font-size:clamp(1.5rem,6vw,40px);line-height:1.25}
    .ev-amanha__texto{margin-top:1.5rem}
}

/* ✔ Dev Mode (4094:404 e seguintes): faixa vermelha de 915px com 148px de
   respiração em cima e em baixo; título a 50.4px/67.183px; duas fotografias de
   619×349 com 34px de intervalo e cantos a 10px; legenda a 21px da fotografia e
   botão a 50px da legenda. */
.ev-universo{background:var(--ev-red);color:#fff;padding-block:148px}
.ev-universo .ev-h2{font-size:50.4px;line-height:67.183px;
    font-variant-numeric:lining-nums proportional-nums}
.ev-universo .ev-grelha--2{margin-top:32px;gap:34px}
.ev-universo figure{margin:0;display:flex;flex-direction:column;gap:21px}
.ev-universo img{width:100%;aspect-ratio:619/349;object-fit:cover;border-radius:10px}
/* Zona Pro 700 20px: a legenda é o TÍTULO da notícia, não uma legenda de
   fotografia — por isso leva a fonte de display e não a de corpo. */
.ev-universo figcaption{font-family:var(--ev-display);font-weight:700;font-size:20px;
    line-height:normal;color:#fff}
/* A legenda clicável não leva sublinhado: no desenho é texto branco liso, igual
   ao das legendas sem link. O sublinhado guarda-se para o :hover, que é onde
   passa a ser informação («isto vai a algum lado») e não ruído. */
.ev-universo figcaption a{color:inherit;text-decoration:none}
.ev-universo figcaption a:hover,
.ev-universo figcaption a:focus-visible{text-decoration:underline}
.ev-universo__acao{margin-top:50px}
/* Abaixo dos 820px o título a 50.4px transborda; a entrelinha de 67px também
   deixa de fazer sentido quando o corpo encolhe, daí voltar a um múltiplo. */
@media (max-width:820px){
    .ev-universo{padding-block:5rem}
    .ev-universo .ev-h2{font-size:clamp(2rem,7vw,50.4px);line-height:1.33}
}
/* ✔ Dev Mode (4182:439): o fundo é o cinza-do-site #F5F5F5, não branco puro. */
.ev-btn--branco{background:#F5F5F5;color:var(--ev-red)}
.ev-btn--branco:hover{background:var(--ev-preto);color:#fff}

/* ── Grelha genérica de cartões ──────────────────────────────────────── */
.ev-grelha{display:grid;gap:clamp(1.25rem,2.5vw,2rem);margin-top:2.75rem}
.ev-grelha--2{grid-template-columns:repeat(2,1fr)}
.ev-grelha--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.ev-grelha--2,.ev-grelha--3{grid-template-columns:1fr}}

.ev-card{background:var(--ev-branco);border-radius:var(--ev-raio);padding:1.9rem;
    border:1px solid var(--ev-linha);display:flex;flex-direction:column;gap:.8rem}
.ev-sec--escuro .ev-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:#fff}
.ev-card__topo{height:4px;border-radius:2px;background:var(--ev-red);width:44px}
.ev-card--verde   .ev-card__topo{background:var(--ev-verde)}
.ev-card--laranja .ev-card__topo{background:var(--ev-laranja)}
.ev-card--azul    .ev-card__topo{background:var(--ev-azul)}
.ev-card .ev-btn{align-self:flex-start;margin-top:auto}
.ev-card--verde   .ev-btn{background:var(--ev-verde)}
.ev-card--laranja .ev-btn{background:var(--ev-laranja)}
.ev-card--azul    .ev-btn{background:var(--ev-azul)}

/* ── Bloco imagem + texto ────────────────────────────────────────────── */
.ev-media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.ev-media--inverso .ev-media__fig{order:2}
.ev-media__fig img{border-radius:var(--ev-raio);width:100%}

/* ── Variante: a imagem não passa da altura do texto ────────────────────
   Numa grelha, a linha cresce até ao mais alto dos dois lados — uma imagem
   vertical esticava a linha e ficava muito mais alta do que a coluna de texto.
   Não há forma em CSS de dizer «max-height igual à altura do irmão», mas há
   esta: tirar a imagem do fluxo (absolute), com o que a figura deixa de ter
   conteúdo que conte para a altura da linha. A linha passa a ser medida só
   pelo texto, e a figura, esticada (`align-self:stretch`), dá exactamente essa
   altura à imagem. O `object-fit:cover` recorta o excedente em vez de deformar.
   Trocar para `contain` se preferir nunca recortar (deixa margem em vez disso). */
.ev-media--altura-texto .ev-media__fig{position:relative;align-self:stretch;min-height:0;overflow:hidden;
    border-radius:var(--ev-raio)}
.ev-media--altura-texto .ev-media__fig img{position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;object-position:50% 50%}

@media (max-width:860px){
    .ev-media{grid-template-columns:1fr}
    .ev-media--inverso .ev-media__fig{order:0}
    /* Em coluna única cada um tem a sua linha: se a imagem continuasse fora do
       fluxo, a figura ficava com altura zero e a imagem desaparecia. Volta tudo
       ao normal, com a altura natural da fotografia. */
    .ev-media--altura-texto .ev-media__fig{position:static;overflow:visible}
    .ev-media--altura-texto .ev-media__fig img{position:static;height:auto}
}

/* ── Estatísticas ────────────────────────────────────────────────────── */
.ev-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:clamp(2.5rem,6vw,4.5rem)}
.ev-stat__n{font-size:clamp(2.4rem,5vw,3.4rem);font-weight:700;line-height:1;letter-spacing:-.03em}
.ev-stat__r{margin:.5rem 0 0;font-weight:600;font-size:.98rem}
@media (max-width:760px){.ev-stats{grid-template-columns:1fr;gap:1.75rem}}

/* ── Rodapé ──────────────────────────────────────────────────────────────
   ✔ Figma «homepage» 46:367: fundo #323E48, 80px de padding em cima e 40 em
   baixo, e três colunas (marca 347 · menu 187 · contactos 296px) empurradas
   para as pontas da coluna de conteúdo. A divisória fica 60px abaixo delas e a
   barra final outros 20px abaixo da linha.
   As verticais são dadas por FLUXO NORMAL, e não por posições absolutas: assim
   o rodapé aguenta conteúdo do CMS mais longo ou mais curto sem se desmontar. */
.ev-footer{background:var(--ev-escuro);color:#FFFFFF;
    padding-block:clamp(3rem,5.3vw,80px) clamp(2rem,2.6vw,40px)}
/* Mesmo cuidado do menu: excluir .ev-btn para um botão colocado aqui no futuro
   não herdar a cor dos links do rodapé em vez da sua própria. */
.ev-footer a:not(.ev-btn){text-decoration:none;color:inherit}
.ev-footer a:not(.ev-btn):hover{color:var(--ev-red)}

/* ✔ Figma: no rodapé a marca é menor — 91.267 × 50px (no cabeçalho, 109.52 × 60).
   display:flex, e não o inline-flex da regra base: no cabeçalho o logótipo é
   item de uma flexbox, mas aqui vive numa coluna. Em linha, assentava numa linha
   de texto e a caixa de linha acrescentava ~10px de descendente por baixo, que
   empurravam tudo o que vem a seguir para fora do sítio. */
.ev-footer .ev-logo{display:flex;width:91.267px;height:50px}

/* ✔ Figma: auto-layout em linha com space-between. As bases (flex-basis) são as
   larguras do desenho; o `1` de flex-shrink deixa-as encolher em ecrãs
   estreitos, para as colunas só passarem para a linha de baixo quando têm mesmo
   de passar. */
.ev-footer__topo{display:flex;flex-wrap:wrap;gap:2.5rem 3rem;
    justify-content:space-between;align-items:flex-start}
.ev-footer__marca{flex:0 1 347px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.ev-footer__col{flex:0 1 187px}
.ev-footer__contactos{flex:0 1 296px}

/* ✔ Figma: «Menu» e «Contactos» em Zona Pro Bold 16px, com 20px por baixo.
   (No tema Edit Value os títulos do rodapé eram Helvetica 500 a 19px — aqui
   voltam à letra de display, que é o que o desenho pede.) */
.ev-footer h4{font-family:var(--ev-display);font-weight:700;font-size:16px;line-height:normal;
    color:#FFFFFF;margin:0 0 20px;letter-spacing:0;text-transform:none}

/* ✔ Figma: links em Helvetica Neue 400 a 14px, 12px de intervalo. */
.ev-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ev-footer ul li{font-family:var(--ev-corpo);font-weight:400;font-size:14px;line-height:normal}

/* ✔ Figma: descrição da marca em Helvetica Neue 400 15px com entrelinha 1.6. */
.ev-footer__sobre{margin:0;font-family:var(--ev-corpo);font-weight:400;
    font-size:15px;line-height:1.6;color:#FFFFFF}

/* ✔ Figma: morada 15px/1.6 e o email 14px, 12px abaixo dela. A morada vem de uma
   textarea do CMS e é impressa com as quebras de linha que lá estiverem — são
   elas que dão as quatro linhas do desenho. */
.ev-footer__contactos p{font-family:var(--ev-corpo);font-weight:400;color:#FFFFFF}
.ev-footer__morada{margin:0;font-size:15px;line-height:1.6}
.ev-footer__email{margin:12px 0 0;font-size:14px;line-height:normal}

/* ✔ Figma: divisória branca ténue, 60px abaixo das colunas; o conteúdo da barra
   final começa 20px depois dela. */
.ev-footer__fim{margin-top:60px;padding-top:80px;border-top:1px solid rgba(255,255,255,.2);
    display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-end}
/* ✔ Figma: textos legais em Helvetica Neue 400 a 12px, duas linhas com 6px entre si. */
.ev-footer__legal{display:grid;gap:6px}
.ev-footer__fim p{margin:0;font-family:var(--ev-corpo);font-weight:400;font-size:12px;line-height:normal}
/* O crédito de quem construiu o site fica UM DEGRAU ABAIXO do © e dos links
   legais: mesma medida de letra, menos presença. É informação de rodapé de
   rodapé — quem a procura encontra-a, quem não a procura não tropeça nela.
   Herda a cor e a ausência de sublinhado do `.ev-footer a`; o vermelho no hover
   vem daí também, e por isso a opacidade sobe ao passar por cima — senão o
   vermelho aparecia esbatido e lia-se como estando desligado. */
/* A folga por cima é margem no item da grelha e SOMA-SE aos 6px do `gap`, o que
   dá 24 no total: as três linhas deixam de se ler como um bloco só de três e
   passam a ler-se como duas coisas — os legais do site em cima, o crédito de
   quem o construiu por baixo.

   ⚠️ DUAS CLASSES no selector da margem, e não uma. O `.ev-footer__fim p` acima
   declara `margin:0` e tem MAIS especificidade do que `.ev-footer__lkcom`
   sozinho (uma classe + um elemento ganha a uma classe) — vir depois no ficheiro
   não chegava, o `margin-top` era simplesmente deitado fora. É a mesma armadilha
   do `.ev-kicker` documentada na secção «O Grupo em números».

   `width:100%` é o que o faz SALTAR DE LINHA: a barra final é um flex com
   `flex-wrap:wrap`, e um item que pede a largura toda não cabe ao lado de
   ninguém. É por isso que o crédito vive na barra e não dentro da coluna dos
   legais — lá dentro, era ELE o fundo da coluna e o `align-items:flex-end`
   arrastava a barra do PRR para baixo, desalinhando-a do «©». */
.ev-footer__fim .ev-footer__lkcom{width:100%;margin-top:18px}
.ev-footer__lkcom{opacity:.55;transition:opacity .15s}
.ev-footer__lkcom:hover,.ev-footer__lkcom:focus-within{opacity:1}

/* ✔ Figma: à direita, o aviso do PRR em 9px com 1px de espaçamento entre letras,
   e a barra dos logótipos a 306.686 × 30px, 8px abaixo. */
.ev-footer__prr{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.ev-footer__prr p{font-size:9px;letter-spacing:1px;text-transform:uppercase}
/* A âncora (leva a /apoio-prr) toma a medida da imagem — assim o alinhamento à
   direita é feito pelo flex e não pelo text-align, que num elemento em linha
   depende da fonte. line-height:0 tira a folga de descida que a linha de texto
   deixaria por baixo da imagem. */
.ev-footer__prr a{display:block;width:306.686px;max-width:100%;line-height:0}
.ev-footer__prr img{display:block;width:100%;height:auto}

@media (max-width:1100px){
    .ev-footer__topo{gap:2.5rem 2rem}
    .ev-footer__marca{flex-basis:100%}
}
@media (max-width:680px){
    .ev-footer__col,
    .ev-footer__contactos{flex-basis:100%}
}
@media (max-width:460px){
    .ev-footer__fim{flex-direction:column;align-items:flex-start}
    .ev-footer__prr{align-items:flex-start;text-align:left}
}


/* ── Contactos: acordeão de escritórios + mapa ─────────────────────────
   ✔ Dev Mode: coluna do acordeão 484px, mapa 789px (soma 1273 = área de
   conteúdo). O cartão ABERTO é 604px — 120px MAIS LARGO que a coluna — e
   transborda de propósito por cima do mapa; daí o z-index e o overflow visível. */
/* align-items:stretch (o defeito) de propósito: a altura da linha é ditada pelo
   acordeão e o mapa estica-se para a acompanhar, seja o acordeão maior ou menor. */
.ev-contactos{display:grid;grid-template-columns:484px minmax(0,789px)}
@media (max-width:1000px){.ev-contactos{grid-template-columns:1fr}}

.ev-acordeao{border-right:.667px solid rgba(0,0,0,.07);min-height:600px}
/* SEM borda: o rgba(0,0,0,.07) do Dev Mode pertence à COLUNA (border-right do
   .ev-acordeao), não a cada cartão — os fechados não declaram borda alguma, e
   ficam delimitados apenas pelos 68px de altura. Tirá-la também acerta o 1px
   que o cartão fechado tinha a mais (68 + .667 arredondava para 69). */
.ev-local{border:0}

/* ✔ Dev Mode: fechado 484×68, título Zona Pro 700 20px/28px em #323E48. */
.ev-local > summary{
    list-style:none;cursor:pointer;box-sizing:border-box;
    display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
    min-height:68px;padding:20px 31px;   /* 20+28+20 = 68px exactos */
    font-family:var(--ev-display);font-weight:700;font-size:20px;line-height:28px;
    color:var(--ev-escuro);
}
.ev-local > summary::-webkit-details-marker{display:none}
/* Seta: dois lados de um quadrado rodado — 16×16, traço 1.333px vermelho. */
.ev-local > summary::after{
    content:"";flex:none;width:9px;height:9px;margin:6px 3px 0 0;
    border-right:1.333px solid var(--ev-red);border-bottom:1.333px solid var(--ev-red);
    transform:rotate(45deg);transition:transform .2s,border-color .2s;
}

/* Aberto: mesmo fundo e cantos do desenho, mas com a LARGURA da coluna (484px),
   não os 604px do Figma — manter a mesma largura de aberto e fechado evita o
   salto lateral ao abrir/fechar, que era o efeito indesejado. */
.ev-local[open]{position:relative;z-index:2;
    background:var(--ev-red);color:#FFFFFF;border-radius:10px 0 0 10px;
    /* ✔ Dev Mode: o cartão aberto leva 2.667px de borda ESQUERDA em #E1251B. */
    border-left:2.667px solid var(--ev-red)}
.ev-local[open] > summary{color:#FFFFFF}
.ev-local[open] > summary::after{border-color:#FFFFFF;transform:rotate(-135deg);margin-top:10px}
@media (max-width:1000px){.ev-local[open]{border-radius:10px}}

/* ✔ Dev Mode: linhas Helvetica 400 14px/24px, ícone 13px, intervalo 10px. */
.ev-local__corpo{padding:0 31px 16px}
.ev-local__linha{display:grid;grid-template-columns:13px 1fr;gap:10px;align-items:start;
    margin:0;padding-top:4px;
    font-family:var(--ev-corpo);font-weight:400;font-size:14px;line-height:24px}
.ev-local__linha:first-child{padding-top:16px}
/* ✔ Dev Mode: ícones de TRAÇO (`border: 1.08333px solid`), não preenchidos.
   viewBox 24 + stroke-width 2 desenhado a 13px → 13/24×2 = 1.083px de traço,
   exactamente o valor do desenho. margin-top centra-o na 1.ª linha de 24px. */
.ev-local__linha svg{width:13px;height:13px;margin-top:5.5px;flex:none;
    fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ev-local__corpo a{color:inherit}

/* ✔ Dev Mode: mapa 789px de largura, cantos 0 10px 10px 10px. A ALTURA não é
   fixa: vem do stretch da grelha, ou seja acompanha sempre o acordeão. */
/* `isolation:isolate` é o que impede o mapa de passar por cima do cabeçalho.
   O Leaflet dá z-index altos aos seus painéis e controlos (até 1000) e, sem um
   contexto de empilhamento próprio, esses números competiam à cabeça com o do
   cabeçalho (50) — o zoom e os rótulos do mapa apareciam por cima do menu ao
   deslizar a página. Com o isolamento, todos esses z-index passam a ser internos
   ao mapa, e o mapa inteiro fica abaixo do cabeçalho como um bloco só.
   Baixar os z-index do Leaflet à mão resolvia o sintoma mas partia a ordem
   interna dele (azulejos 200 < marcadores 600 < balões 700). */
.ev-mapa{position:relative;isolation:isolate;border-radius:0 10px 10px 10px;overflow:hidden;
    background:var(--ev-claro)}
.ev-mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* A tela do Leaflet ocupa o mesmo rectângulo que o iframe ocupava. O z-index é o
   do Leaflet por omissão (400 para os painéis), abaixo do cartão aberto do
   acordeão (z-index 2 num contexto de empilhamento diferente) — o cartão continua
   a transbordar por cima do mapa, como no desenho. */
.ev-mapa__tela{position:absolute;inset:0;width:100%;height:100%}
.ev-mapa .leaflet-container{font-family:var(--ev-corpo);background:var(--ev-claro)}
/* Controlo de zoom: caixa branca de cantos redondos no canto superior esquerdo. */
.ev-mapa .leaflet-control-zoom{border:0;border-radius:8px;overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.18)}
.ev-mapa .leaflet-control-zoom a{width:34px;height:34px;line-height:34px;
    color:var(--ev-escuro);border-bottom-color:rgba(0,0,0,.08);font-weight:400}
.ev-mapa .leaflet-control-zoom a:hover{background:#F5F5F5;color:var(--ev-red)}
.ev-mapa .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.8)}

/* ✔ Desenho: alfinete vermelho da marca com o nome do escritório numa etiqueta
   branca à direita. O SVG do alfinete vem do mapa.js. */
.ev-pin svg{width:24px;height:32px;display:block;fill:var(--ev-red);
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.ev-pin svg circle{fill:#FFFFFF}
.ev-pin{transition:opacity .2s}
.ev-pin--esbatido{opacity:.45}
.ev-pin--esbatido:hover{opacity:1}

/* Etiqueta: o Leaflet traz borda, seta e fundo próprios — desliga-se tudo. */
.ev-mapa .leaflet-tooltip.ev-pin__rotulo{
    background:#FFFFFF;border:0;border-radius:8px;padding:11px 20px;
    box-shadow:0 2px 10px rgba(0,0,0,.18);
    font-family:var(--ev-display);font-weight:700;font-size:17px;line-height:1.2;
    color:var(--ev-red);white-space:nowrap}
.ev-mapa .leaflet-tooltip.ev-pin__rotulo::before{display:none}
@media (max-width:640px){
    .ev-mapa .leaflet-tooltip.ev-pin__rotulo{font-size:14px;padding:8px 14px}
}
.ev-mapa__vazio{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    text-align:center;padding:2rem;color:var(--ev-cinza);font-size:.92rem}
@media (max-width:1000px){.ev-mapa{min-height:380px;border-radius:10px;margin-top:1.5rem}}

/* ── Formulário de contacto ──────────────────────────────────────────────
   ✔ Dev Mode: faixa #F5F5F5 com 80px de padding vertical e filete no topo. */
.ev-form-sec{background:#F5F5F5;border-top:.667px solid rgba(0,0,0,.07);padding-block:80px}
/* 460.79 + 80 + 731.21 = 1272 (a área de conteúdo). */
.ev-form-sec__grelha{display:grid;grid-template-columns:460.79fr 731.21fr;gap:80px;align-items:start}
@media (max-width:1000px){.ev-form-sec__grelha{grid-template-columns:1fr;gap:2.5rem}}

/* ✔ Dev Mode: "Fale connosco" Zona Pro 700 48px/60px. */
.ev-form-sec h2{font-family:var(--ev-display);font-weight:700;font-size:48px;line-height:60px;
    color:var(--ev-red);margin:16px 0 0}
/* ✔ Dev Mode (4090:325): 14px/22.75px, largura da coluna 460.79px. */
.ev-form-sec__intro{margin:24px 0 0;font-family:var(--ev-corpo);font-weight:400;
    font-size:14px;line-height:22.75px;color:var(--ev-escuro)}

.ev-form > * + *{margin-top:24px}
/* ✔ Dev Mode: par de 353.6px com 24px de intervalo. */
.ev-form__par{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:640px){.ev-form__par{grid-template-columns:1fr}}

/* ✔ Dev Mode: rótulo Helvetica 500 12px/16px, capitalize, 8px acima do campo. */
.ev-campo label{display:block;padding-bottom:8px;font-family:var(--ev-corpo);font-weight:500;
    font-size:12px;line-height:16px;text-transform:capitalize;color:var(--ev-escuro)}
/* ✔ Dev Mode: campo 48.33px, padding 13/16, radius 5px, borda .667px. */
.ev-campo input,.ev-campo textarea{
    width:100%;box-sizing:border-box;padding:13px 16px;
    font-family:var(--ev-corpo);font-weight:400;font-size:14px;line-height:17px;color:var(--ev-tinta);
    background:#FFFFFF;border:.667px solid rgba(0,0,0,.1);border-radius:5px;
}
.ev-campo input{height:48.33px}
.ev-campo textarea{height:161.71px;min-height:140px;line-height:22px;resize:vertical}
.ev-campo input::placeholder,.ev-campo textarea::placeholder{color:#C1C5C8}
.ev-campo input:focus,.ev-campo textarea:focus{border-color:var(--ev-red);outline:0;
    box-shadow:0 0 0 3px rgba(225,37,27,.14)}
.ev-campo--erro input,.ev-campo--erro textarea{border-color:var(--ev-red)}
.ev-erro{display:block;margin-top:.4rem;color:var(--ev-red);font-size:.8rem;font-weight:600}
/* Sem isto o atributo `hidden` não faz nada: o display:block acima (0,1,0)
   ganha ao [hidden]{display:none} da folha do browser, e o espaço do erro
   ficava sempre visível — vazio — por baixo de todos os campos. */
.ev-erro[hidden]{display:none}
/* Enquanto o POST segue, o botão fica travado contra duplo clique. */
.ev-btn[disabled]{opacity:.6;pointer-events:none}

/* O botão do formulário (201×50 no desenho) deixou de precisar de regra própria:
   a base `.ev-btn` passou a ser exactamente isto. */

.ev-consent{display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:start;
    font-family:var(--ev-corpo);font-size:13px;line-height:20px;color:var(--ev-cinza)}
.ev-consent input{margin-top:.25rem}
.ev-consent a{color:var(--ev-red)}

.ev-alerta{border-radius:5px;padding:1rem 1.2rem;font-family:var(--ev-corpo);font-size:14px;line-height:22px}
.ev-alerta--ok{background:rgba(47,163,124,.12);border:1px solid rgba(47,163,124,.4);color:#1B6B51}
.ev-alerta--erro{background:rgba(225,37,27,.08);border:1px solid rgba(225,37,27,.35);color:var(--ev-red-escuro)}
.ev-alerta ul{margin:.5rem 0 0;padding-left:1.1rem}


/* ── ATUALIDADES · «Informação para a Gestão» ────────────────────────────────
   ✔ Figma 4173:279. As medidas do desenho assumem a página de 1512px, onde a
   .ev-wrap já dá exactamente a coluna certa: --ev-wrap 1273px + goteira de 48px
   põe o conteúdo a começar aos ~120px e com 1273 de largura, que são os 120/1272
   do ficheiro. Por isso nada aqui repete margens — tudo assenta na .ev-wrap. */
/* Sem padding-block próprio: a secção leva `ev-sec` na marcação e é essa que
   manda — `var(--ev-sec)`, clamp(4rem, 9vw, 7.5rem), o mesmo ritmo vertical de
   todas as outras secções do site. Um valor fixo aqui destoava das vizinhas e
   ainda tinha de repetir o seu próprio recuo no responsivo. */

/* O cabeçalho e a newsletter partilham a linha: no desenho a caixa vermelha
   começa aos 912px numa página de 1512 (58.33% + 30px) e mede 480px. Em vez de
   posições absolutas, uma grelha de duas colunas com a caixa fixa em 480px — o
   resultado é o mesmo a 1512px e não parte em ecrãs menores.
   
   A grelha é a própria .ev-wrap e TODAS as partes são células dela, incluindo a
   lista e a navegação. É isso que permite, no responsivo, a newsletter cair para
   o fim: na marcação ela JÁ VEM depois das notícias (é a ordem que faz sentido a
   ler de cima a baixo e com o teclado) e é a colocação explícita abaixo que a
   sobe para o canto no desktop. O contrário — mantê-la no topo da marcação e
   descê-la com `order` — deixava a ordem de tabulação trocada no telemóvel, que
   é onde ela mais custa. */
.ev-atl__grelha{display:grid;grid-template-columns:minmax(0,1fr) 480px;
    column-gap:32px;align-items:start}
.ev-atl__cabecalho{min-width:0;grid-column:1;grid-row:1;margin-bottom:60px}
.ev-atl__lista,.ev-atl__vazio{grid-column:1 / -1;grid-row:2}
.ev-atl .ev-pag{grid-column:1 / -1;grid-row:3}

/* O título usa a classe `ev-h1` na marcação — o mesmo tamanho e entrelinha dos
   h1 de todas as páginas interiores — e aqui só se lhe muda a cor. Repetir os
   valores tipográficos era garantir que um dia divergiam do resto do site. */
.ev-atl__titulo{color:var(--ev-red)}
/* ✔ Dev Mode: subtítulo Zona Pro Bold 35px cinza escuro. O line-height do
   desenho (66.113px) é o da CAIXA de texto, não o das linhas — aplicado tal e
   qual abria um vão enorme; fica 1.15, que é o que se vê entre as duas linhas
   do ficheiro. */
.ev-atl__sub{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.5rem, 1.261rem + 0.98vw, 35px);line-height:1.15;color:var(--ev-escuro)}

/* ── Filtros ─────────────────────────────────────────────────────────────── */
/* ✔ Desenho: pastilha #C1C5C8, raio 8px, 15px/30px, texto 20px com a seta
   vermelha à direita. As opções abrem no MESMO painel branco dos submenus do
   cabeçalho (274px, sombra, itens de 44px em Zona Pro 14px).

   É um <details> com links, e não um <select>: as opções de um select nativo
   não são desenháveis em nenhum navegador. O <details> dá o abrir/fechar, o
   Enter/Espaço e o Escape sem uma linha de JavaScript, e como as opções são
   links o filtro continua a funcionar com o JS desligado. */
.ev-atl__filtros{display:flex;flex-wrap:wrap;align-items:center;gap:30px;margin-top:45px}
.ev-atl__filtro{position:relative}

.ev-atl__pastilha{display:inline-flex;align-items:center;gap:10.5px;
    padding:15px 30px;border-radius:8px;background:var(--ev-cinza-claro);
    font-family:var(--ev-corpo);font-weight:500;font-size:20px;line-height:1.15;
    color:var(--ev-escuro);cursor:pointer;user-select:none;
    /* O triângulo de omissão do <details> é retirado pelas duas vias: a moderna
       (list-style) e a do WebKit, que ainda ignora a primeira em versões antigas. */
    list-style:none}
.ev-atl__pastilha::-webkit-details-marker{display:none}
.ev-atl__pastilha svg{flex:0 0 auto;color:var(--ev-red);transition:transform .18s}
.ev-atl__filtro[open] .ev-atl__pastilha svg{transform:rotate(180deg)}
.ev-atl__pastilha:focus-visible{outline:3px solid var(--ev-red);outline-offset:2px}

/* ✔ Igual ao .ev-nav__painel do cabeçalho: 274px, padding 20px, gap 8px,
   borda .5px e a mesma sombra. Sobe acima da lista com z-index — sem ele o
   painel do «Ano» passava por trás da primeira notícia. */
.ev-atl__painel{position:absolute;top:calc(100% + 8px);left:0;z-index:60;
    box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;
    width:274px;max-height:340px;overflow-y:auto;padding:20px;gap:8px;
    background:#FFFFFF;border:.5px solid rgba(0,0,0,.1);border-radius:8px;
    box-shadow:0 25px 37px rgba(0,0,0,.1), 0 10px 15px rgba(0,0,0,.05)}
.ev-atl__painel a{display:flex;align-items:center;gap:12px;
    box-sizing:border-box;width:100%;min-height:44px;padding:12px 8px 12px 16px;
    background:#FFFFFF;text-decoration:none;
    font-family:var(--ev-display);font-weight:700;font-size:14px;line-height:20px;
    letter-spacing:.01em;color:var(--ev-escuro)}
.ev-atl__painel a:hover,.ev-atl__painel a:focus-visible{background:var(--ev-claro);color:var(--ev-red)}
/* A opção em vigor fica marcada — o rótulo da pastilha já a mostra, mas com o
   painel aberto por cima dele é preciso vê-la na lista. */
.ev-atl__painel a[aria-current]{color:var(--ev-red)}
.ev-atl__painel-vazio{margin:0;padding:12px 8px 12px 16px;
    font-family:var(--ev-corpo);font-size:14px;line-height:20px;color:var(--ev-cinza)}

.ev-atl__limpar{font-family:var(--ev-corpo);font-size:15px;color:var(--ev-cinza);
    text-decoration:underline;text-underline-offset:3px}
.ev-atl__limpar:hover{color:var(--ev-red)}

/* ── Newsletter ──────────────────────────────────────────────────────────── */
/* ✔ Desenho: caixa #E1251B, raio 10px, 24px em cima/baixo, 30/32px aos lados,
   16px entre elementos, tudo centrado. */
.ev-atl__newsletter{grid-column:2;grid-row:1;
    background:var(--ev-red);border-radius:10px;overflow:hidden;
    padding:24px 32px 24px 30px}
.ev-atl__newsletter form{display:flex;flex-direction:column;align-items:center;gap:16px}
.ev-atl__nl-titulo{margin:0;max-width:400px;font-family:var(--ev-display);font-weight:700;
    font-size:18px;line-height:1.25;text-align:center;color:#fff}
.ev-atl__nl-texto{margin:0;font-family:var(--ev-corpo);font-size:16px;line-height:1.3;
    text-align:center;color:#fff;opacity:.85}
/* A linha do email não tem raio nem espaço entre campo e botão no desenho: são
   dois rectângulos encostados a ocupar a largura toda da caixa. */
.ev-atl__nl-linha{display:flex;align-items:stretch;width:100%;overflow:hidden}
.ev-atl__nl-linha input{flex:1 0 0;min-width:0;border:0;background:#fff;
    font-family:var(--ev-corpo);font-size:14px;color:var(--ev-escuro);padding:12px 16px}
.ev-atl__nl-linha input::placeholder{color:var(--ev-cinza-claro);opacity:1}
.ev-atl__nl-linha button{flex:0 0 auto;border:0;cursor:pointer;background:var(--ev-escuro);
    color:#fff;font-family:var(--ev-corpo);font-weight:500;font-size:14px;padding:12px 20px;
    transition:background .18s}
.ev-atl__nl-linha button:hover{background:var(--ev-escuro-2)}
.ev-atl__nl-linha button[disabled]{opacity:.6;cursor:default}
.ev-atl__nl-aviso{margin:0;font-family:var(--ev-corpo);font-size:14px;line-height:1.4;
    text-align:center;color:#fff}
.ev-atl__nl-aviso[hidden]{display:none}

/* ── Lista ───────────────────────────────────────────────────────────────── */
/* ✔ Desenho: três colunas — data (197.69px até ao texto), texto (864.806px) e
   «Ler mais» encostado à direita — separadas por um filete de 0.716px #C1C5C8.
   O filete é border-bottom em TODAS as linhas (no desenho a última também o tem). */
.ev-atl__lista{display:flex;flex-direction:column}
/* Sem column-gap de propósito: no desenho o texto começa EXACTAMENTE aos 197.69px
   da margem, não a 197.69 + um espaço. A folga até ao «Ler mais» nasce do
   max-width do texto (864.806px), não de um gap — assim o «Ler mais» pode
   encostar-se à direita da coluna, como no ficheiro (começa aos 1198 de 1272). */
/* ✔ Desenho: filete de 0.716px em #C1C5C8 por baixo de cada notícia (a última
   também o tem — confirmado no nó 4176:663, onde NÃO há linha por cima da
   primeira).

   Tentei-o como pseudo-elemento de `height:.716px`, porque uma bordura é sempre
   subida para 1px no valor usado e um elemento não. FOI PIOR: 0.716px não é
   pintável, é suavizado, e a opacidade com que sai depende de onde a margem
   inferior da linha cai na grelha de pixéis. Linhas de altura fraccionária
   diferente — as de título com duas linhas, por exemplo — ficavam com o filete
   quase invisível ou mesmo sem ele. Uma bordura não tem esse problema: é sempre
   pintada. Fica a declaração do desenho, tal e qual. */
.ev-atl__item{display:grid;grid-template-columns:197.69px minmax(0,1fr) auto;
    align-items:start;column-gap:0;padding:26px 0 28px;
    border-bottom:.716px solid var(--ev-cinza-claro);
    text-decoration:none;color:inherit}
.ev-atl__data{margin:0;font-family:var(--ev-corpo);font-weight:400;
    font-size:15px;line-height:21.493px;color:var(--ev-cinza-claro)}
.ev-atl__texto{min-width:0;max-width:864.806px}
/* `text-wrap:wrap` para DESLIGAR o `balance` que a regra base dos h1-h4 aplica a
   todos os títulos do tema. O balance reparte o texto por linhas de comprimento
   parecido: num título de duas linhas encurtava a primeira de propósito — a do
   PT2030 parava aos 559px dentro de uma caixa de 864.8px, com meia coluna vazia
   à direita. Serve bem um título curto e centrado; numa lista de texto corrido
   alinhado à esquerda, lê-se como um erro. Sem ele, a linha enche até aos 819px
   e a quebra cai onde o desenho a tem. */
.ev-atl__item-titulo{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:19.343px;line-height:26.597px;color:var(--ev-escuro);text-wrap:wrap;
    transition:color .18s}
/* Ao passar o rato, a linha inteira responde pelo TÍTULO: o fundo fica quieto.
   A regra vive aqui e não no `:hover` da linha para o alvo da transição ser o
   mesmo elemento que muda de cor — assim a passagem é suave nos dois sentidos. */
.ev-atl__item:hover .ev-atl__item-titulo,
.ev-atl__item:focus-visible .ev-atl__item-titulo{color:var(--ev-red)}
.ev-atl__resumo{margin:4.299px 0 0;font-family:var(--ev-corpo);font-weight:400;
    font-size:15px;line-height:24.448px;color:var(--ev-escuro)}
/* «Ler mais» ao MEIO da linha, não alinhado pelo título. Confirmado no desenho
   (nó 4176:663): nas linhas altas — a do PT2030, que tem título de duas linhas —
   ele desce com a linha em vez de ficar colado ao topo. Daí o align-self, que
   sobrepõe o align-items:start herdado da grelha e vale só para esta célula. */
.ev-atl__ler{display:inline-flex;align-items:center;align-self:center;gap:8px;
    font-family:var(--ev-corpo);font-weight:500;font-size:14.5px;line-height:1.5;
    color:var(--ev-red);white-space:nowrap}
.ev-atl__item:hover .ev-atl__ler{text-decoration:underline;text-underline-offset:3px}
.ev-atl__vazio{margin:0;padding:40px 0;font-family:var(--ev-corpo);font-size:17px;
    color:var(--ev-cinza)}


/* ── Responsivo ──────────────────────────────────────────────────────────── */
/* Abaixo de ~1100px os 480px fixos deixam de caber com folga na outra coluna
   (1273 − 480 − 32 ≈ 761 de texto, e o título de 50px começa a partir palavras).
   A grelha passa a uma coluna e, ao largar a colocação explícita, cada parte cai
   na ordem da marcação — com a newsletter no fim, a seguir às notícias e à
   navegação, que é onde foi pedida. */
@media (max-width:1100px){
    .ev-atl__grelha{grid-template-columns:minmax(0,1fr)}
    .ev-atl__cabecalho,.ev-atl__lista,.ev-atl__vazio,
    .ev-atl .ev-pag,.ev-atl__newsletter{grid-column:1;grid-row:auto}
    .ev-atl__cabecalho{margin-bottom:40px}
    /* Sem `max-width`: fora da linha do cabeçalho, os 480px do desenho deixam de
       ter razão de ser — a caixa passa a ocupar a coluna de conteúdo toda, como
       qualquer outro bloco da página. O `margin-top` é o que a separa da última
       notícia (ou da navegação, quando existe). */
    /* Padding a dobrar (24/32/24/30 → 48/64/48/60): ocupando a largura toda, o
       recuo do desenho — pensado para uma caixa de 480px — deixava o texto
       colado às arestas de um bloco muito mais largo. */
    .ev-atl__newsletter{grid-column:1 / -1;width:100%;margin-top:60px;
        padding:48px 64px 48px 60px}
    /* O título deixa de estar preso aos 400px do desenho e a mudança de linha
       guardada no CMS deixa de contar. Os dois faziam o texto partir a meio de
       uma caixa larga, com ar de linha equilibrada de propósito quando é só um
       limite herdado da caixa estreita. O `nl2br` deixa o «\n» a seguir ao <br>,
       por isso escondê-lo devolve um espaço — as palavras não se colam. */
    .ev-atl__nl-titulo{max-width:none}
    .ev-atl__nl-titulo br{display:none}
}
/* A coluna fixa da data deixa de fazer sentido quando o texto fica estreito:
   data por cima, «Ler mais» por baixo, tudo numa coluna só. */
@media (max-width:820px){
    /* No telemóvel o recuo horizontal volta a metade (64/60 → 32/30, os valores
       do desenho): a dobrar, comia 124px de uma caixa de 350 e sobravam 226 para
       o texto, o que punha o título da newsletter em cinco linhas. Na vertical
       fica a dobrar — aí o espaço é o que separa a caixa do resto e não aperta
       nada. */
    .ev-atl__newsletter{padding-inline:30px 32px}
    .ev-atl__item{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:22px 0 24px}
    .ev-atl__filtros{gap:16px;margin-top:32px}
    .ev-atl__pastilha{font-size:17px;padding:12px 22px}
    /* O painel deixa de ter largura fixa: 274px num telemóvel de 360 encostava-se
       às duas margens e, no filtro da direita, transbordava para fora do ecrã. */
    .ev-atl__painel{width:max(220px, 100%);left:auto;right:0}
    .ev-atl__filtro:first-child .ev-atl__painel{left:0;right:auto}
}

/* ── HERÓI DE PÁGINA INTERIOR (carrossel) ────────────────────────────────────
   ✔ Figma «Sobre» 4143:242: faixa de 704px numa página de 1512, fotografia a
   cobrir e título centrado. A altura é fluida com um mínimo — 704px fixos num
   telemóvel deitado ocupavam mais do que o ecrã inteiro. */
.ev-ph{position:relative;overflow:hidden;background:var(--ev-escuro);
    height:clamp(24rem, 46.6vw, 704px)}
.ev-ph__pista{display:flex;flex-wrap:nowrap;height:100%;
    transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
/* `isolation:isolate` para o multiply da camada por cima ficar preso ao slide:
   sem isto misturava-se com o que estivesse por baixo na página. */
.ev-ph__slide{flex:0 0 100%;max-width:100%;height:100%;position:relative;
    isolation:isolate;display:flex;align-items:center;justify-content:center}
.ev-ph__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* ✔ Desenho: `#323E48` inteiro em `mix-blend-multiply`, sem transparência. O
   multiply escurece a fotografia mantendo-lhe o desenho, ao contrário de uma
   camada opaca com opacity, que a lava. */
.ev-ph__slide::after{content:"";position:absolute;inset:0;z-index:1;
    background:var(--ev-escuro);mix-blend-mode:multiply;pointer-events:none}
.ev-ph__conteudo{position:relative;z-index:2;text-align:center}
/* ✔ Desenho: Zona Pro Bold 50px, medida de 632px, centrado, branco. */
.ev-ph__titulo{margin:0 auto;max-width:632px;
    font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.9rem, 3.4vw, var(--ev-t-titulo));line-height:1.2;color:#fff}
/* ✔ Desenho: as palavras realçadas vão no vermelho da marca (ver o asterisco na
   vista da secção). */
.ev-ph__realce{color:var(--ev-red)}
/* Pontos iguais aos do herói da homepage — o carrossel é o mesmo mecanismo e
   não há razão para ter dois desenhos de navegação no mesmo site. */
.ev-ph__pontos{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);z-index:3;
    display:flex;gap:.55rem}
.ev-ph__pontos button{width:10px;height:10px;aspect-ratio:1/1;padding:0;border-radius:2px;
    border:0;cursor:pointer;background:#FFFFFF}
.ev-ph__pontos button[aria-current="true"]{background:var(--ev-red)}

/* ── IMAGEM E TEXTO ──────────────────────────────────────────────────────────
   ✔ Figma «Sobre» 4143:242, bloco «2 About Us»: 150px de recuo vertical e duas
   colunas com 106px entre elas.

   DESVIO ASSUMIDO: no ficheiro as colunas têm 545.639px fixos e sobram 74.7px
   por preencher à direita da área de conteúdo (1272px). Aqui são duas metades
   iguais, o que dá 583.5px a cada uma — 38px mais largas. Preferi encher a
   coluna a deixar um vazio que num ecrã real se lê como erro de alinhamento. */
.ev-it{padding-block:150px}
.ev-it__grelha{display:grid;grid-template-columns:1fr 1fr;gap:106px;align-items:center}
/* A ordem visual troca sem mexer na marcação — a leitura por teclado e por
   leitor de ecrã continua a ser imagem → texto, que é a ordem do conteúdo. */
.ev-it__grelha--inversa .ev-it__fig{order:2}
.ev-it__fig{margin:0;min-width:0}
/* ✔ Desenho: 545.639 × 440.708 (rácio 1.238), cantos de 10px. */
.ev-it__fig img{display:block;width:100%;aspect-ratio:545.639 / 440.708;
    object-fit:cover;border-radius:10px}
.ev-it__col{min-width:0}
/* ✔ Desenho: Zona Pro Bold 30px, entrelinha 1.25, espaçamento -0.9px (-.03em). */
.ev-it__titulo{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.5rem, 1.985vw, 30px);line-height:1.25;letter-spacing:-.03em;
    color:var(--ev-escuro)}
/* ✔ Desenho: Helvetica 16.789px/1.6, espaçamento -0.5037px (-.03em), 20.986px
   abaixo do título. */
.ev-it__texto{margin-top:20.986px;font-family:var(--ev-corpo);font-weight:400;
    font-size:clamp(.95rem, 1.11vw, 16.789px);line-height:1.6;letter-spacing:-.03em;
    color:var(--ev-escuro)}
.ev-it__texto p{margin:0 0 1em}
.ev-it__texto p:last-child{margin-bottom:0}
.ev-it__texto a{color:var(--ev-red)}
/* ✔ Desenho: o ® é 0.645 do corpo à volta (19.35 num título de 30; 10.83 num
   corpo de 16.789). `vertical-align` para não descair com o tamanho menor. */
.ev-it__reg{font-size:.645em;vertical-align:.35em;line-height:0}

@media (max-width:900px){
    /* Uma coluna: com 1fr 1fr abaixo disto a coluna de texto ficava com ~330px e
       o corpo a partir palavras. A fotografia vai para cima em qualquer dos
       lados — o `order` da variante invertida deixa de fazer sentido a prumo. */
    .ev-it{padding-block:80px}
    .ev-it__grelha{grid-template-columns:minmax(0,1fr);gap:40px}
    .ev-it__grelha--inversa .ev-it__fig{order:0}
}

/* ── PASSOS (título + lista numerada + fotografia) ───────────────────────────
   ✔ Figma «Sobre» 4143:242, bloco «3 Our Story»: faixa vermelha com 150px de
   recuo, título centrado e, por baixo, a lista à esquerda e a fotografia à
   direita. */
.ev-ps{padding-block:150px;background:var(--ev-red);color:#fff}
/* ✔ Desenho: Helvetica 65 Medium 40px, centrado, branco. É o corpo e não o
   display — no ficheiro este título está em Helvetica, ao contrário dos títulos
   de secção do resto do site. */
.ev-ps__titulo{margin:0 0 83.944px;text-align:center;
    font-family:var(--ev-corpo);font-weight:500;
    font-size:clamp(1.5rem, 2.65vw, 40px);line-height:1.25;color:#fff}

/* ✔ Desenho: lista de 503.667px e fotografia de 545.639px, com 146.903px entre
   elas — não é metade e metade. Em fracções da largura de conteúdo (1272):
   503.667 → 0.396fr e 545.639 → 0.429fr, o que mantém a proporção em qualquer
   ecrã em vez de a fixar a 1512px. */
.ev-ps__grelha{display:grid;grid-template-columns:503.667fr 545.639fr;
    gap:146.903px;align-items:center}
.ev-ps__grelha--so-lista{grid-template-columns:minmax(0,1fr)}

/* ✔ Desenho: 31.479px entre passos. */
.ev-ps__lista{list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;gap:31.479px;min-width:0}
/* ✔ Desenho: coluna do índice com 62.958px e 62.958px até ao texto. */
.ev-ps__passo{display:grid;grid-template-columns:62.958px minmax(0,1fr);
    gap:62.958px;align-items:start}
/* O número e o traço ficam nas pontas da coluna do índice, como no ficheiro. */
.ev-ps__indice{display:flex;align-items:center;justify-content:space-between;
    /* Alinha o número pela primeira linha do título ao lado: sem isto assentava
       no topo da caixa, uns pixéis acima da letra. */
    padding-top:.55em}
/* ✔ Desenho: Helvetica 65 Medium 14.69px, espaçamento -0.4407px (-.03em). */
.ev-ps__numero{font-family:var(--ev-corpo);font-weight:500;font-size:14.69px;
    line-height:1.15;letter-spacing:-.03em;color:#fff}
/* ✔ Desenho: risco de 16.789px. É uma borda e não uma imagem — no ficheiro são
   três ficheiros de linha diferentes só porque foram exportados em separado. */
.ev-ps__traco{display:block;width:16.789px;height:0;
    border-top:1.05px solid currentColor;opacity:.85}

.ev-ps__conteudo{min-width:0}
/* ✔ Desenho: Zona Pro Bold 33.578px/1.25, espaçamento -1.0073px (-.03em). */
.ev-ps__passo-titulo{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.4rem, 2.22vw, 33.578px);line-height:1.25;letter-spacing:-.03em;
    color:#fff}
/* ✔ Desenho: Helvetica 16.789px/1.6, espaçamento -0.5037px, 12.592px abaixo. */
.ev-ps__passo-texto{margin:12.592px 0 0;font-family:var(--ev-corpo);font-weight:400;
    font-size:clamp(.95rem, 1.11vw, 16.789px);line-height:1.6;letter-spacing:-.03em;
    color:#fff}

.ev-ps__fig{margin:0;min-width:0}
/* ✔ Desenho: 545.639 × 560.329 (rácio 0.974), cantos de 10px. */
.ev-ps__fig img{display:block;width:100%;aspect-ratio:545.639 / 560.329;
    object-fit:cover;border-radius:10px}

.ev-ps__reg{font-size:.645em;vertical-align:.35em;line-height:0}

@media (max-width:900px){
    /* Uma coluna: abaixo disto a lista ficava com ~300px e os títulos de 33px
       partiam palavras. A fotografia passa para baixo da lista — em cima
       empurrava os passos para fora do primeiro ecrã. */
    .ev-ps{padding-block:80px}
    .ev-ps__titulo{margin-bottom:48px}
    .ev-ps__grelha{grid-template-columns:minmax(0,1fr);gap:48px}
    .ev-ps__passo{grid-template-columns:44px minmax(0,1fr);gap:24px}
    .ev-ps__lista{gap:28px}
}

/* ── CRONOLOGIA ──────────────────────────────────────────────────────────────
   ✔ Figma «Sobre» 4143:242, último bloco. As três colunas do ficheiro caem em
   1512px assim: anos aos 201.3, texto aos 309 (463.24 de medida) e fotografia
   aos 852 (512). Traduzido para a grelha: um recuo inicial de 81px, a coluna
   dos anos com a largura do seu conteúdo, e as outras duas em fracções que
   guardam a proporção 463.24 : 512 em qualquer largura. Os intervalos são os
   ~79.6px que sobram entre elas no desenho.

   NOTA: o ficheiro pinta o fundo com `cinza-site` (#F5F5F5) e o tema já tem
   `--ev-claro` (#F4F4F4). A diferença é de um passo em 255 — não vale um cinzento
   novo no sistema, fica o do tema. */
.ev-tl{padding-block:150px;background:var(--ev-claro)}
/* O recuo SOMA-SE à goteira da .ev-wrap, não a substitui. A grelha vive na
   própria .ev-wrap, e um `padding-left` fixo apagava a margem lateral que ela
   dá — no responsivo, onde o recuo passava a zero, a secção ficava encostada à
   aresta esquerda do ecrã com a direita ainda recuada. */
.ev-tl__grelha{display:grid;grid-template-columns:auto 463.239fr 512fr;
    gap:79.6px;align-items:start;padding-left:calc(var(--ev-gut) + 81.8px)}

/* ✔ Desenho: anos na vertical com 5.595px entre eles, Helvetica 12.122px/19.395px
   e espaçamento de 0.3637px (.03em). O activo em #1A1A1A e peso médio; os
   restantes no cinza claro da marca. */
.ev-tl__anos{display:flex;flex-direction:column;gap:5.595px;
    position:sticky;top:calc(var(--ev-header-h, 100px) + 24px)}
.ev-tl__anos a{font-family:var(--ev-corpo);font-weight:400;font-size:12.122px;
    line-height:19.395px;letter-spacing:.03em;color:var(--ev-cinza-claro);
    text-decoration:none;transition:color .18s}
.ev-tl__anos a:hover{color:var(--ev-red)}
.ev-tl__anos a[aria-current]{font-weight:500;color:#1A1A1A}

.ev-tl__palco{display:contents}
/* Cada item ocupa as DUAS colunas da direita: o texto na do meio e a fotografia
   na da direita. `display:contents` no palco faz com que os filhos herdem a
   grelha de cima em vez de criarem uma nova — sem isso era preciso repetir as
   medidas das colunas aqui dentro. */
/* SEM `grid-row` fixo. Prender todos os itens à linha 1 punha-os empilhados uns
   por cima dos outros quando o JavaScript não corre — e é justamente aí que
   todos ficam visíveis. Com colocação automática: com JS, o único item visível
   cai na linha 1, ao lado dos anos; sem JS, seguem-se uns aos outros como uma
   lista. No responsivo é isto que também põe os anos ACIMA do item, em vez de a
   linha 1 estar ocupada e a navegação ser empurrada para baixo. */
.ev-tl__item{display:grid;grid-column:2 / -1;
    grid-template-columns:subgrid;gap:inherit;align-items:start}
/* Sem JS ficam todos visíveis, um a seguir ao outro (ver a vista da secção). O
   `[hidden]` só aparece depois de o kit.js assumir o comando. */
.ev-tl__item[hidden]{display:none}

.ev-tl__col{min-width:0;padding-right:18.649px}
/* ✔ Desenho: filete de 0.932px em #1A1A1A, com 20px até ao ano. */
.ev-tl__filete{display:block;height:.932px;background:#1A1A1A;margin-bottom:20px}
/* ✔ Desenho: Zona Pro Bold 138px, entrelinha 117.302px (MENOR do que o corpo, o
   que aperta o número contra o filete de propósito), espaçamento -3.4501px
   (-.025em), no vermelho da marca. O recuo de topo é o do ficheiro. */
.ev-tl__ano{margin:0;padding-top:26.109px;
    font-family:var(--ev-display);font-weight:700;
    font-size:clamp(4rem, 9.13vw, 138.003px);line-height:.85;letter-spacing:-.025em;
    color:var(--ev-red)}
/* ✔ Desenho: Helvetica 65 Medium 37.298px/42.893px, espaçamento -0.373px. */
.ev-tl__titulo{margin:20px 0 0;font-family:var(--ev-corpo);font-weight:500;
    font-size:clamp(1.6rem, 2.47vw, 37.298px);line-height:1.15;letter-spacing:-.01em;
    color:var(--ev-escuro)}
/* ✔ Desenho: Helvetica 14.919px/26.855px numa medida de 373px. */
.ev-tl__texto{margin:20px 0 0;max-width:373px;
    font-family:var(--ev-corpo);font-weight:400;
    font-size:clamp(.9rem, .99vw, 14.919px);line-height:1.8;color:var(--ev-escuro)}
/* O texto vem do CMS e pode trazer parágrafos, listas e ligações. */
.ev-tl__texto p{margin:0 0 1em}
.ev-tl__texto p:last-child{margin-bottom:0}
.ev-tl__texto a{color:var(--ev-red)}
.ev-tl__texto ul,.ev-tl__texto ol{margin:0 0 1em;padding-left:1.3rem}
/* Um <sup> escrito à mão no texto não deve empurrar a entrelinha da linha onde
   está — é o que acontece por omissão com `vertical-align:super`. */
.ev-tl__texto sup{font-size:.645em;vertical-align:.35em;line-height:0}

.ev-tl__fig{margin:0;min-width:0}
/* ✔ Desenho: 512 × 389 (rácio 1.316), cantos de 10px. */
.ev-tl__fig img{display:block;width:100%;aspect-ratio:512 / 389;
    object-fit:cover;border-radius:10px}

.ev-tl__reg{font-size:.645em;vertical-align:.35em;line-height:0}

@media (max-width:1000px){
    /* MANTÉM AS DUAS COLUNAS: anos à esquerda, conteúdo à direita. O que colapsa
       é a grelha de DENTRO do item — a fotografia deixa de estar ao lado dos
       textos e passa para baixo deles.
       A versão anterior punha os anos numa fila horizontal por cima do conteúdo:
       com dezasseis anos, essa fila transbordava o ecrã e obrigava a arrastar
       para chegar aos últimos. */
    .ev-tl{padding-block:80px}
    /* A goteira da .ev-wrap tem de sobreviver — é ela que dá a margem lateral.
       Só se dispensa o recuo do desenho, que não cabe num ecrã estreito. */
    /* O intervalo entre a coluna dos anos e o conteúdo acompanha a largura em
       vez de ser um valor único: 28px fixos serviam num telemóvel mas colavam as
       duas colunas num tablet, onde há espaço de sobra. O `clamp` dá ~50px a
       1000, ~38px a 768 e não desce dos 28px no telemóvel estreito. */
    .ev-tl__grelha{grid-template-columns:auto minmax(0,1fr);
        gap:clamp(28px, 5vw, 56px);padding-left:var(--ev-gut)}

    /* Alvos de toque: 12px com 5.6px entre eles é confortável com um rato e
       impossível com um dedo. O recuo vertical dá-lhes altura sem mexer no
       desenho da lista, que continua na vertical. */
    .ev-tl__anos{gap:0}
    .ev-tl__anos a{font-size:14px;line-height:1.4;padding-block:8px;white-space:nowrap}

    /* `subgrid` fora: o item deixa de herdar as colunas de cima e passa a uma
       só, com o texto em cima e a fotografia por baixo (a ordem da marcação). */
    .ev-tl__item{grid-template-columns:minmax(0,1fr);gap:24px}
    .ev-tl__col{padding-right:0}
    .ev-tl__texto{max-width:none}

    /* O ANO em ecrã pequeno. A regra base tem um piso de 4rem que, abaixo dos
       ~700px, deixava de ser um piso e passava a ser o tamanho: 64px de Zona Pro
       ao lado de uma coluna de anos, num ecrã de 600, davam um número maior do
       que tudo o resto. Aqui a escala volta a mandar e o piso desce. */
    .ev-tl__ano{font-size:clamp(2.25rem, 8vw, 5rem)}
}


/* ── Navegação de páginas (partilhada pelas listagens de notícias) ───────────
   Não vive dentro do bloco de Atualidades de propósito: o parcial
   front/partials/paginacao.blade.php serve as duas listagens, e um nome
   `ev-atl__*` faria a página do Universo depender do CSS de outra secção. */
.ev-pag{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:8px;margin-top:48px}
.ev-pag__n{display:inline-flex;align-items:center;justify-content:center;
    min-width:38px;height:38px;padding:0 10px;border-radius:8px;
    font-family:var(--ev-corpo);font-weight:500;font-size:16px;line-height:1;
    color:var(--ev-escuro);background:var(--ev-cinza-claro);text-decoration:none;
    transition:background .18s,color .18s}
a.ev-pag__n:hover{background:var(--ev-escuro);color:#fff}
.ev-pag__n--actual{background:var(--ev-red);color:#fff}
.ev-pag__n--inerte{opacity:.45;background:transparent;cursor:default}

/* ── Equipa (página Pessoas) ─────────────────────────────────────────────────
   ✔ Figma «Pessoas», nó 4076:122: introdução de 739px encostada à goteira,
   grelha de 5 colunas com 30px entre cartões (1272px de coluna útil, que é a
   nossa --ev-wrap), cartão de 230.4px com a fotografia quadrada de raio 10,
   16px até ao nome e 6px entre nome e cargo. */
.ev-eq{position:relative;overflow:hidden;background:#fff}
.ev-eq__wrap{position:relative}

/* A forma da marca a 5%, encostada ao topo da secção. `slice` para que se
   comporte como uma fotografia de fundo: enche a largura e o que passar do
   fundo da secção fica cortado, em vez de encolher a forma toda. */
.ev-eq__fundo{position:absolute;left:0;top:0;width:100%;height:100%;
    pointer-events:none;user-select:none}

.ev-eq__intro{max-width:739px;margin-bottom:clamp(48px, 7vw, 108px)}
/* ✔ Desenho: Zona Pro Bold 40px, #323E48, com a palavra realçada a vermelho. */
.ev-eq__titulo{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.75rem, 3.4vw, 40px);line-height:1.3;letter-spacing:-.01em;
    color:var(--ev-escuro)}
.ev-eq__realce{color:var(--ev-red)}
/* ✔ Desenho: Helvetica 55 Roman 30px. */
.ev-eq__subtitulo{margin:24px 0 0;font-family:var(--ev-corpo);font-weight:400;
    font-size:clamp(1.125rem, 2.2vw, 30px);line-height:1.4;color:var(--ev-escuro)}

.ev-eq__grelha{list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:30px}
.ev-eq__celula{min-width:0}

/* O cartão inteiro é a ligação para a ficha (/pessoas/{nome}). */
.ev-eq__cartao{display:flex;flex-direction:column;gap:16px;align-items:center;
    text-align:center;min-width:0;text-decoration:none;color:inherit}

/* ✔ Desenho: 230.4 × 230.4 (quadrado) e cantos de 10px. */
.ev-eq__foto{position:relative;display:block;width:100%;aspect-ratio:1;
    border-radius:10px;overflow:hidden;background:var(--ev-claro)}
.ev-eq__foto img{display:block;width:100%;height:100%;object-fit:cover;
    transition:transform .35s ease}
.ev-eq__cartao:hover .ev-eq__foto img{transform:scale(1.04)}

/* ✔ Desenho: canto da marca 21 × 21, a 10px do topo e da direita. O `overflow`
   da fotografia não o corta porque está dentro do mesmo raio.

   A COR diz a tipologia, com os mesmos três acentos da marca que pintam o
   diagrama SIG e os cartões das Áreas — é a mesma linguagem em toda a casa:
   financeira = verde, estratégica = laranja, capital humano = azul.

   Sem tipologia fica cinza claro, e não verde: verde passou a querer dizer
   «financeira», e pintar de verde quem não tem tipologia era afirmar uma coisa
   que ninguém escreveu. O cinza lê-se como «por preencher», que é o que é. */
.ev-eq__canto{position:absolute;top:10px;right:10px;width:21px;height:21px;
    color:var(--ev-cinza-claro);pointer-events:none}
.ev-eq__celula[data-tipologia="financeira"]     .ev-eq__canto{color:var(--ev-verde)}   /* #00953B */
.ev-eq__celula[data-tipologia="estrategica"]    .ev-eq__canto{color:var(--ev-laranja)} /* #FF8300 */
.ev-eq__celula[data-tipologia="capital-humano"] .ev-eq__canto{color:var(--ev-azul)}    /* #0082CA */

.ev-eq__info{display:flex;flex-direction:column;gap:6px;min-width:0}
/* ✔ Desenho: Helvetica 65 Medium 18px/1.3, #323E48. O desenho corta o nome com
   reticências; aqui deixa-se passar para a linha seguinte — «Cristiano
   Guimarães» e «Co-CEO Financial Management» não cabem em 230px e um nome
   cortado não serve para nada. */
.ev-eq__nome{font-family:var(--ev-corpo);font-weight:500;font-size:18px;
    line-height:1.3;color:var(--ev-escuro);transition:color .18s}
/* ✔ Desenho: Helvetica 55 Roman 13px/1.4, #C1C5C8. */
.ev-eq__cargo{font-family:var(--ev-corpo);font-weight:400;font-size:13px;
    line-height:1.4;color:var(--ev-cinza-claro)}
.ev-eq__cartao:hover .ev-eq__nome{color:var(--ev-red)}

@media (max-width:1100px){
    .ev-eq__grelha{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
@media (max-width:860px){
    .ev-eq__grelha{grid-template-columns:repeat(3, minmax(0, 1fr));gap:24px}
}
@media (max-width:600px){
    .ev-eq__grelha{grid-template-columns:repeat(2, minmax(0, 1fr));gap:20px}
    /* Abaixo dos 300px de cartão o nome de 18px começa a partir em três linhas. */
    .ev-eq__nome{font-size:16px}
}

/* ── Ficha de colaborador (/pessoas/{nome}) ──────────────────────────────────
   ✔ Figma «Pessoas - perfil», nó 4121:182: «Voltar» no topo, fotografia de
   404 × 404 à esquerda e a coluna de texto (495px) à direita, com 138px entre
   elas. Nome em Zona Pro Bold 40px na cor da tipologia, cargo em Helvetica 25px,
   apresentação em 14px/1.5 e as linhas de contacto com ícone de traço.

   `--ac` é o acento da tipologia e chega numa variável em linha, escrita pela
   vista a partir do valor gravado no bloco — uma folha de estilo não escolhe
   uma cor a partir de dados. Sem tipologia cai no cinza escuro do tema. */
.ev-cl{position:relative;overflow:hidden;background:#fff;--ac:var(--ev-escuro)}
.ev-cl__wrap{position:relative}
.ev-cl__fundo{position:absolute;left:0;top:0;width:100%;height:100%;
    color:var(--ac);pointer-events:none;user-select:none}

/* ✔ Desenho: 404 (fotografia) + 138 (intervalo) + 495 (texto) = 1037, centrado
   na coluna de conteúdo. Centrar em vez de fixar o recuo do desenho mantém o
   par no meio em qualquer largura, que é o que o desenho mostra. */
.ev-cl__grelha{margin-top:clamp(40px, 6vw, 72px);
    display:grid;grid-template-columns:minmax(0, 404px) minmax(0, 495px);
    gap:clamp(48px, 9vw, 138px);align-items:center;justify-content:center}

.ev-cl__fig{margin:0;min-width:0}
/* ✔ Desenho: quadrada, cantos de 10px. */
.ev-cl__fig img{display:block;width:100%;aspect-ratio:1;object-fit:cover;
    border-radius:10px}

.ev-cl__col{min-width:0}

/* A marca da tipologia: a palavra e o canto da marca ao lado, alinhado pelo
   topo da caixa da letra e não pela linha de base — é assim no lockup. */
.ev-cl__tipo{margin:0 0 24px;display:flex;align-items:flex-start;gap:6px;
    font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.375rem, 2.3vw, 28px);line-height:1.2;letter-spacing:-.02em;
    color:var(--ev-escuro)}
.ev-cl__tipo svg{width:21px;height:21px;flex:none;color:var(--ac)}

/* ✔ Desenho: Zona Pro Bold 40px na cor da tipologia. */
.ev-cl__nome{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(2rem, 3.4vw, 40px);line-height:1.15;letter-spacing:-.01em;
    color:var(--ac)}
/* ✔ Desenho: Helvetica 55 Roman 25px, cinza escuro. */
.ev-cl__cargo{margin:6px 0 0;font-family:var(--ev-corpo);font-weight:400;
    font-size:clamp(1.0625rem, 1.65vw, 25px);line-height:1.3;color:var(--ev-escuro)}

/* ✔ Desenho: Helvetica 55 Roman 14px/1.5, com os parágrafos separados. */
.ev-cl__texto{margin-top:32px;font-family:var(--ev-corpo);font-weight:400;
    font-size:14px;line-height:1.5;color:var(--ev-escuro)}
.ev-cl__texto p{margin:0 0 1.5em}
.ev-cl__texto p:last-child{margin-bottom:0}

/* ✔ Desenho: ícone de 21px, 10px até ao texto, linhas de 30px. */
.ev-cl__contactos{list-style:none;margin:30px 0 0;padding:0;
    display:flex;flex-direction:column;gap:10px}
.ev-cl__contactos li{display:flex;align-items:center;gap:10px;min-width:0}
.ev-cl__contactos svg{width:21px;height:21px;flex:none;color:var(--ac);
    fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
.ev-cl__contactos a{font-family:var(--ev-corpo);font-weight:400;font-size:14px;
    line-height:1.68;color:var(--ev-escuro);text-decoration:none;
    overflow-wrap:anywhere}
.ev-cl__contactos a:hover{color:var(--ac);text-decoration:underline}

@media (max-width:1000px){
    /* Uma coluna. O par só cabe lado a lado a partir daqui: 404 + 495 mais o
       intervalo dá ~1000px, e abaixo disso as duas colunas encolhiam ambas até
       o nome de 40px se partir em três linhas.

       As colunas são `minmax(0, …)` e não medidas fixas de propósito — entre os
       1000 e os 1100px o par ainda é mais largo do que a coluna de conteúdo, e
       com medidas fixas transbordava para fora do ecrã em vez de encolher. */
    .ev-cl__grelha{grid-template-columns:minmax(0, 495px);justify-content:start;
        gap:clamp(32px, 6vw, 48px)}
    .ev-cl__fig{max-width:404px}
}

/* ── Bloco de texto com fotografia (Pessoas · Recursos Humanos) ──────────────
   ✔ Figma «Pessoas», nó 4158:579: faixa clara com 150px de recuo, coluna de
   texto de 535px à esquerda e fotografia de 509 × 579 (raio 10) à direita, com
   o espaço que sobra todo entre as duas — daí `space-between` e não um
   intervalo fixo: a 1272px de coluna útil dá exactamente os 228px do desenho,
   e mais estreito as colunas encolhem sem nunca se tocarem. */
.ev-bf{padding-block:150px;background:var(--ev-claro)}
.ev-bf__grelha{display:grid;
    grid-template-columns:minmax(0, 535px) minmax(0, 509px);
    justify-content:space-between;gap:48px;align-items:center}
/* Trocar a ORDEM VISUAL e não a do documento: quem ouve a página continua a
   receber o título antes da fotografia, que é a ordem que faz sentido. */
.ev-bf__grelha--inversa{grid-template-columns:minmax(0, 509px) minmax(0, 535px)}
.ev-bf__grelha--inversa .ev-bf__col{order:2}
.ev-bf__grelha--inversa .ev-bf__fig{order:1}

.ev-bf__col{min-width:0}
/* ✔ Desenho: Zona Pro Bold 40px/1.25, espaçamento -1.26px (-.0315em). */
.ev-bf__titulo{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.75rem, 3.2vw, 40px);line-height:1.25;letter-spacing:-.0315em;
    color:var(--ev-escuro)}
.ev-bf__realce{color:var(--ev-red)}

/* ✔ Desenho: 21px entre o título e o texto. */
.ev-bf__texto{margin-top:21px;font-family:var(--ev-corpo);font-weight:400;
    font-size:17px;line-height:1.6;color:var(--ev-escuro)}
.ev-bf__texto p{margin:0 0 1.6em}
.ev-bf__texto p:last-child{margin-bottom:0}
/* ✔ Desenho: o primeiro parágrafo é de abertura — Helvetica 66 Medium Italic
   20px. Pelo LUGAR e não por uma etiqueta: quem edita escreve parágrafos
   normais e o desenho mantém-se mesmo que o editor lhe tire a formatação. */
.ev-bf__texto > p:first-child{font-weight:500;font-style:italic;font-size:20px}

.ev-bf__btn{margin-top:32px}

.ev-bf__fig{margin:0;min-width:0}
/* ✔ Desenho: 509 × 579 (rácio 0.879), cantos de 10px. */
.ev-bf__fig img{display:block;width:100%;aspect-ratio:509 / 579;
    object-fit:cover;border-radius:10px}

.ev-bf__reg{font-size:.645em;vertical-align:.35em;line-height:0}

@media (max-width:900px){
    /* Uma coluna. Abaixo disto a coluna de texto ficava com menos de 300px e o
       título de 40px partia-se em três linhas. A fotografia fica por baixo do
       texto nos dois sentidos — em coluna, a ordem que interessa é a de leitura. */
    .ev-bf{padding-block:clamp(64px, 12vw, 110px)}
    .ev-bf__grelha,
    .ev-bf__grelha--inversa{grid-template-columns:minmax(0, 1fr);gap:40px}
    .ev-bf__grelha--inversa .ev-bf__col,
    .ev-bf__grelha--inversa .ev-bf__fig{order:0}
    .ev-bf__fig{max-width:509px}
}

/* ── CONTACTOS · DETALHES + FORMULÁRIO ───────────────────────────────────────
   ✔ Figma «contactos» 6:566: faixa branca com 150px de recuo vertical, duas
   colunas de 621px e 60px entre elas.

   DESVIO ASSUMIDO (o mesmo critério do `imagem-texto`): no ficheiro as duas
   colunas somam 1302px dentro de uma área de conteúdo de 1272 — transbordam 30px
   para lá da goteira. Aqui são duas metades da coluna real (≈606px cada), o que
   mantém a goteira de 120px do desenho em vez de a comer. */
.ev-cdet{padding-block:150px;background:var(--ev-branco)}
.ev-cdet__grelha{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
/* ✔ Desenho: 40px entre cabeçalho, linhas de contacto e mapa. */
.ev-cdet__col{display:flex;flex-direction:column;gap:40px;min-width:0}
.ev-cdet__cab{display:flex;flex-direction:column;gap:24px}

/* O sobretítulo com a marca angular é o `.ev-kicker` partilhado — ver mais abaixo. */
/* ✔ Desenho: Zona Pro Bold 28px sobre o cinza escuro da marca. */
.ev-cdet__titulo{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.375rem,2.2vw,28px);line-height:1.2;color:var(--ev-escuro)}

/* ✔ Desenho: 20px entre linhas; ícone de 24px e 16px até ao texto. */
.ev-cdet__linhas{display:flex;flex-direction:column;gap:20px}
.ev-cdet__linha{display:flex;gap:16px;align-items:flex-start}
/* Ícones de traço: o stroke-width de 2 num viewBox de 24 desenhado a 24px dá
   exactamente o traço do desenho, e o `currentColor` deixa-os herdar o vermelho
   sem uma variante por cor. */
.ev-cdet__ic{width:24px;height:24px;flex:0 0 24px;fill:none;stroke:var(--ev-red);
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ✔ Desenho: rótulo Helvetica Medium 14px; valor 15px com entrelinha 1.6. */
.ev-cdet__rot{margin:0 0 4px;font-family:var(--ev-corpo);font-weight:500;
    font-size:14px;line-height:1.2;color:var(--ev-escuro)}
.ev-cdet__val{margin:0;font-family:var(--ev-corpo);font-weight:400;
    font-size:15px;line-height:1.6;color:var(--ev-escuro)}
.ev-cdet__val a{text-decoration:none}
.ev-cdet__val a:hover{color:var(--ev-red)}

/* ✔ Desenho: mapa de 260px, cantos de 8px, filete #C1C5C8. Herda do `.ev-mapa`
   a mecânica do Leaflet (o `.ev-mapa__tela` é absoluto), por isso precisa de
   `position:relative` e de uma altura própria. */
.ev-cdet__mapa{position:relative;isolation:isolate;height:260px;width:100%;
    border:1px solid var(--ev-cinza-claro);border-radius:8px;overflow:hidden;
    background:var(--ev-claro)}
.ev-cdet__mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ev-cdet__mapa .ev-mapa__tela{position:absolute;inset:0;width:100%;height:100%}
.ev-cdet__mapa .leaflet-container{font-family:var(--ev-corpo);background:var(--ev-claro)}
.ev-cdet__mapa .leaflet-control-zoom{border:0;border-radius:8px;overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.15)}
.ev-cdet__mapa .leaflet-control-zoom a{width:30px;height:30px;line-height:30px;
    color:var(--ev-escuro);background:#fff}
.ev-cdet__mapa .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.8)}
/* ✔ Desenho: o rótulo do alfinete é uma etiqueta branca de 12px com sombra. */
.ev-cdet__mapa .leaflet-tooltip.ev-pin__rotulo{
    background:#FFFFFF;border:0;border-radius:6px;padding:12px;
    font-family:var(--ev-corpo);font-weight:500;font-size:12px;line-height:1;
    color:var(--ev-escuro);box-shadow:0 4px 6px rgba(0,0,0,.1)}
.ev-cdet__mapa .leaflet-tooltip.ev-pin__rotulo::before{display:none}

/* ── Cartão do formulário ────────────────────────────────────────────────
   ✔ Desenho: cartão branco, cantos de 12px, 48px de folga interior e 32px entre
   o cabeçalho e os campos. Sobre fundo branco não tem filete nem sombra — é o
   recuo que o separa, tal como no ficheiro. */
.ev-cdet__cartao{background:var(--ev-branco);border-radius:12px;padding:48px;
    display:flex;flex-direction:column;gap:32px;min-width:0}
.ev-cdet__formcab{display:flex;flex-direction:column;gap:8px}
/* ✔ Desenho: Zona Pro Bold 24px + Helvetica 14px. */
.ev-cdet__formtit{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:24px;line-height:1.2;color:var(--ev-escuro)}
.ev-cdet__formsub{margin:0;font-family:var(--ev-corpo);font-weight:400;
    font-size:14px;line-height:1.4;color:var(--ev-escuro)}
/* ✔ Desenho: 24px entre campos. */
.ev-cdet__form{display:flex;flex-direction:column;gap:24px}
/* O `.ev-campo` do tema tem a pele do formulário ANTIGO (rótulo 12px
   capitalizado, campo de 48.33px, cantos de 5px). Este cartão é outro desenho —
   rótulo 13px em maiúsculas, campo com 16px de folga e cantos de 4px — por isso
   afina-se aqui, dentro do cartão, sem tocar no outro formulário. */
.ev-cdet__form .ev-campo label{padding-bottom:8px;font-size:13px;line-height:1.2;
    font-weight:500;text-transform:uppercase;letter-spacing:.02em}
.ev-cdet__form .ev-campo input,
.ev-cdet__form .ev-campo textarea{padding:16px;font-size:15px;line-height:1.2;
    border:1px solid var(--ev-cinza-claro);border-radius:4px}
.ev-cdet__form .ev-campo input{height:50px}
.ev-cdet__form .ev-campo textarea{height:120px;min-height:120px;line-height:1.5}
/* ✔ Desenho: botão a toda a largura, 16px/32px de folga, cantos de 4px, 16px. */
.ev-cdet__enviar{width:100%;padding:16px 32px;border-radius:4px;font-size:16px;
    text-align:center;cursor:pointer}

/* Abaixo de 1000px as duas colunas deixam de caber lado a lado (a do formulário
   sozinha pede ~500px com os 48px de folga interior de cada lado). Empilham, e o
   cartão perde a folga interior grande — a 48px num telemóvel de 360 sobravam
   264px de campo. */
@media (max-width:1000px){
    .ev-cdet{padding-block:clamp(3.5rem,9vw,150px)}
    .ev-cdet__grelha{grid-template-columns:minmax(0,1fr);gap:48px}
    .ev-cdet__cartao{padding:0}
}

/* ── Sobretítulo com a marca angular ─────────────────────────────────────────
   ✔ Figma: a marca vermelha de 11.36 × 12 e, a 8px dela, o sobretítulo em
   Helvetica Medium 14px com 1.5px de espaçamento entre letras, em maiúsculas e no
   vermelho da marca. Repete-se em três secções — daí viver aqui e não dentro de
   nenhuma delas. O desenho da marca está em front/partials/marca.blade.php. */
.ev-kicker{display:flex;align-items:baseline;gap:8px;margin:0;
    font-family:var(--ev-corpo);font-weight:500;font-size:14px;line-height:1;
    letter-spacing:1.5px;text-transform:uppercase;color:var(--ev-red)}
/* ALINHAMENTO DA MARCA PELO TOPO DAS MAIÚSCULAS — sobretítulos, «Ler mais» e a
   navegação entre projetos. Uma regra só: é o mesmo sinal ao lado do mesmo tipo
   de texto, e três cópias divergiriam à primeira correcção.

   Centrar (o que aqui estava) encosta o sinal ao meio da CAIXA DE LINHA, que
   inclui o espaço dos acentos e dos descendentes; como o sinal é mais alto do que
   uma maiúscula, sobrava-lhe corpo por baixo da linha de base e lia-se como
   descaído.

   Alinhar pela linha de base assenta a base do sinal onde as letras assentam (num
   elemento substituído, a base é a margem inferior) e o deslocamento baixa-o o
   que sobra: a altura dele menos a altura de uma maiúscula. O 1cap é uma medida
   do PRÓPRIO tipo de letra, por isso continua certo quando a Helvetica Neue LT
   Std carregar por cima da pilha de recurso — o que não aconteceria com um número
   escrito à mão. Onde o cap não existir, a declaração é ignorada e o sinal fica
   assente na linha de base: 2px de erro, e não uma marca desalinhada para sempre.

   Vai numa variável porque os estados de :hover deslocam a marca na horizontal e
   um `transform` substitui o outro por inteiro — sem a variável, passar o rato
   por cima desfazia o alinhamento vertical. */
.ev-kicker .ev-marca,
.ev-projs__ler .ev-marca,
.ev-pw__salto .ev-marca{--ev-marca-y:calc(100% - 1cap);transform:translateY(var(--ev-marca-y))}
.ev-marca{width:12px;height:12px;flex:0 0 auto;display:block}

/* ── TEXTO E IMAGEM (duas colunas, lado e fundo à escolha) ───────────────────
   ✔ Figma «idi-investigacao» 6:373 e 6:386: 150px de recuo vertical, duas colunas
   de 621px com 60px entre elas e uma fotografia de 621 × 480 com cantos de 12px.
   As duas faixas do desenho são esta secção com o lado trocado.

   As cores NÃO se declaram aqui: o fundo entra pelas classes .ev-sec--claro /
   .ev-sec--escuro que o tema já tem, e o texto é `color:inherit` para seguir a
   que a faixa escura define. Escrever a cor do título fixava-a a preto e a faixa
   escura ficava com um título ilegível. */
.ev-ti{padding-block:150px}
.ev-ti__grelha{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
/* ✔ Desenho: 32px entre o cabeçalho e cada parágrafo. */
.ev-ti__col{display:flex;flex-direction:column;gap:32px;min-width:0}
.ev-ti__cab{display:flex;flex-direction:column;gap:16px}
/* ✔ Desenho: Zona Pro Bold 38px, entrelinha 1.2. */
.ev-ti__titulo{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.65rem,2.6vw,38px);line-height:1.2;color:inherit}
/* ✔ Desenho: Helvetica 16px com entrelinha 1.7. */
.ev-ti__texto{font-family:var(--ev-corpo);font-size:16px;line-height:1.7;color:inherit}
.ev-ti__texto p:last-child{margin-bottom:0}
/* A marcação é sempre texto → imagem, que é a ordem de leitura certa (a
   fotografia não acrescenta informação ao que está escrito). A opção «imagem à
   esquerda» troca só a ordem VISUAL da grelha. */
.ev-ti--esq .ev-ti__fig{order:-1}
/* ── Colunas desiguais: «maior o texto que a imagem» ─────────────────────────
   ✔ Figma «quem-somos» 31:39 e 31:126: a fotografia é de 513px e o intervalo de
   80 (e não 621/60, como no «I&D+I»), ficando o texto com o resto da faixa.

   A proporção vai em `fr` e não em pixels fixos para a faixa continuar a
   encolher com a janela: 1.324fr + 1fr sobre os 1192px que sobram dos 1272 da
   área de conteúdo dão exactamente 679 de texto e 513 de imagem — as medidas do
   desenho — e mantêm a mesma relação em qualquer largura acima do empilhamento. */
.ev-ti--texto-maior .ev-ti__grelha{grid-template-columns:1.324fr 1fr;gap:80px}
/* Com a imagem do outro lado a ordem VISUAL troca (é a `order` do .ev-ti--esq),
   mas as faixas da grelha não: a primeira continua a ser a do texto. Sem isto, a
   coluna larga ficaria debaixo da fotografia. */
.ev-ti--texto-maior.ev-ti--esq .ev-ti__grelha{grid-template-columns:1fr 1.324fr}
/* Sem fotografia não há segunda coluna para encher: a medida do texto trava-se
   para não atravessar os 1273px da faixa, que seria ilegível. */
.ev-ti--so-texto .ev-ti__grelha{grid-template-columns:minmax(0,1fr)}
.ev-ti--so-texto .ev-ti__col{max-width:70ch}
.ev-ti__fig{margin:0;min-width:0}
/* ✔ Desenho: 621 × 480 (rácio 1.294), cantos de 12px, filete #C1C5C8. */
.ev-ti__fig img{display:block;width:100%;aspect-ratio:621/480;object-fit:cover;
    border-radius:12px;border:1px solid var(--ev-cinza-claro)}

@media (max-width:1000px){
    .ev-ti{padding-block:clamp(3.5rem,9vw,150px)}
    /* As variantes de colunas desiguais vêm listadas por nome porque têm mais
       especificidade do que `.ev-ti__grelha` sozinho: sem isto, a regra de duas
       colunas ganhava aqui dentro e a faixa nunca empilhava no telemóvel. */
    .ev-ti__grelha,
    .ev-ti--texto-maior .ev-ti__grelha,
    .ev-ti--texto-maior.ev-ti--esq .ev-ti__grelha{grid-template-columns:minmax(0,1fr);gap:40px}
    /* Empilhado, a fotografia vai sempre para DEPOIS do texto: manter o `order`
       punha a imagem antes do título em metade das faixas, sem razão nenhuma. */
    .ev-ti--esq .ev-ti__fig{order:0}
}

/* ── PROCESSO (cartões numerados) ────────────────────────────────────────────
   ✔ Figma «quem-somos» 31:49: 150px de recuo vertical, cabeçalho centrado, 64px
   até aos cartões e 40px entre eles. Cada cartão: fundo #323E48, filete
   #C1C5C8, cantos de 12px, 40px de folga interior, 200px de altura, o ícone num
   quadrado vermelho de 48 e o número em Zona Pro 160px a 20% por baixo de tudo. */
.ev-proc{padding-block:150px}
.ev-proc__cab{display:flex;flex-direction:column;align-items:center;gap:16px;
    margin-bottom:64px;text-align:center}
.ev-kicker--centro{justify-content:center}
/* ✔ Desenho: Zona Pro Bold 38px, entrelinha 1.2 — o mesmo registo do título das
   faixas de texto e imagem, mas ao centro. */
.ev-proc__titulo{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.65rem,2.6vw,38px);line-height:1.2;color:inherit}
.ev-proc__apoio{max-width:760px;font-family:var(--ev-corpo);font-size:17px;
    line-height:1.7;color:inherit}
.ev-proc__apoio p:last-child{margin-bottom:0}

/* `auto-fit` e não um número fixo de colunas: os cartões acrescentam-se no CMS e
   a fila reparte-se sozinha. Com 3 (o desenho) dá 397px cada, com 4 dá 288, e a
   partir dos 5 passa para a linha seguinte em vez de os espremer. As faixas
   vazias colapsam — daí `auto-fit` e não `auto-fill`, que deixaria os 3 cartões
   do desenho encolhidos com um lugar vago ao lado. */
.ev-proc__grelha{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:40px;margin:0;padding:0;list-style:none}
.ev-proc__cartao{position:relative;display:flex;flex-direction:column;gap:24px;
    min-height:200px;padding:40px;border-radius:12px;overflow:hidden;
    background:var(--ev-escuro);border:1px solid var(--ev-cinza-claro);
    box-shadow:0 12px 32px -10px rgba(0,0,0,.08);color:var(--ev-branco)}
/* Numa faixa já escura os cartões perdiam-se no fundo: passam ao segundo tom da
   marca, que é o que os mantém a ler como cartões. */
.ev-sec--escuro .ev-proc__cartao{background:var(--ev-escuro-2)}

/* O número é marca-d'água: fica ATRÁS do conteúdo (os irmãos criam contexto com
   `position:relative`), não se selecciona com o rato e está fora da árvore de
   acessibilidade — a ordem já está na semântica da própria lista <ol>. */
.ev-proc__numero{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-family:var(--ev-display);font-weight:700;font-size:clamp(6rem,14vw,160px);
    line-height:1;white-space:nowrap;color:var(--ev-red);opacity:.2;
    pointer-events:none;user-select:none}

/* ✔ Desenho: quadrado vermelho de 48 com cantos de 6 e o ícone de 24 ao centro. */
.ev-proc__icone{position:relative;display:grid;place-items:center;
    flex:0 0 auto;width:48px;height:48px;border-radius:6px;background:var(--ev-red)}
.ev-proc__icone img{display:block;width:24px;height:24px;object-fit:contain}
/* ✔ Desenho: Zona Pro Bold 20px a branco. */
.ev-proc__nome{position:relative;margin:0;font-family:var(--ev-display);
    font-weight:700;font-size:20px;line-height:1.3;color:inherit}
/* Não está no desenho — existe para quem quiser uma linha de apoio no cartão. */
.ev-proc__texto{position:relative;margin:0;font-family:var(--ev-corpo);
    font-size:15px;line-height:1.6;color:rgba(255,255,255,.82)}

@media (max-width:1000px){
    .ev-proc{padding-block:clamp(3.5rem,9vw,150px)}
    .ev-proc__cab{margin-bottom:clamp(2rem,5vw,64px)}
    /* Em tablet os cartões ficam na MESMA linha, como as linhas de projetos do
       /idi: a medida mínima desce para 180px e o cartão aperta a folga, o número
       e o corpo do título para lá caber sem partir palavras. */
    .ev-proc__grelha{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
    .ev-proc__cartao{padding:24px;gap:16px;min-height:172px}
    .ev-proc__nome{font-size:18px}
    .ev-proc__numero{font-size:clamp(4.5rem,13vw,120px)}
}
/* Daqui para baixo três colunas de 180px já não cabem e a grelha partia-se em
   2 + 1 — um cartão órfão numa linha só, que se lê como erro. Passa a uma
   coluna: são passos de um processo, e em coluna continuam a ler-se por ordem. */
@media (max-width:620px){
    .ev-proc__grelha{grid-template-columns:minmax(0,1fr)}
    .ev-proc__cartao{padding:28px;min-height:0}
}

/* ── O NOSSO PERCURSO (cronologia com eixo ao meio) ──────────────────────────
   ✔ Figma «quem-somos», nó 345:74, na medida cheia (1512px):

     faixa escura #323E48, 150px de recuo vertical
     título centrado, Zona Pro 38px/1.2, entreletra -0,5px, máx. 1083px
     118px do topo da faixa até ao primeiro marco · 96px entre marcos
     ano: Zona Pro 220px a 4% de branco («FUTURO» a 130) · 24px até ao texto
     texto: coluna de 550px, título 26px/1.25 e corpo 15px/1.65 a #C1C5C8
     eixo: 2px a #C1C5C8/40%, do primeiro ponto ao último · ponto vermelho de 20

   OS MARCOS ALTERNAM DE LADO e o ano fica do MESMO lado do seu texto, encostado
   à mesma margem — no desenho, o «2023» e o texto que lhe pertence começam ambos
   a 748px. É por isso que aqui não há grelha de três colunas nenhuma: cada marco
   é uma coluna só, empurrada para a esquerda ou para a direita, e o eixo passa
   por cima, ao meio, como um enfeite.

   NÃO reaproveita o `.ev-tl` da «Página · Cronologia»: aquela é a cronologia do
   tema Edit Value (anos em coluna à esquerda, um momento de cada vez) e não tem
   nada em comum com este desenho a não ser o assunto.
*/
.ev-perc{
    padding-block:150px;
    /* O ano em marca-d'água chega a 220px: num ecrã estreito passaria da faixa. */
    overflow-x:clip;
    --ev-perc-eixo:50%;          /* onde passa a linha, medida no marco */
    --ev-perc-gap:96px;          /* ✔ intervalo entre marcos */
    --ev-perc-ponto:20px;        /* ✔ diâmetro do ponto vermelho */
    /* ✔ 550px é a medida do desenho, mas só cabe enquanto o eixo ao meio ficar
       para lá dela: numa janela de ~1000px metade da faixa são 460 e a coluna
       passava-lhe por cima, com o texto a correr por baixo da linha e do ponto.
       Daí o `min()` — abaixo dos ~1200px a coluna acompanha a faixa. */
    --ev-perc-col:min(550px, 46%);
    --ev-perc-eixo-cor:var(--ev-linha);
}
/* ✔ Desenho: a faixa é escura, e aí a linha é o cinza claro da marca a 40%. */
.ev-sec--escuro.ev-perc,.ev-sec--preto.ev-perc{--ev-perc-eixo-cor:rgba(193,197,200,.4)}

.ev-perc__titulo{max-width:1083px;margin:0 auto;text-align:center;
    font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.65rem,2.6vw,38px);line-height:1.2;letter-spacing:-.5px;
    color:inherit}

/* Pela aritmética do desenho seriam 28px: o primeiro marco começa a 268 do topo
   da faixa (150 de recuo + 118 do espaçador) e o título, em duas linhas, acaba
   nos 241. Só que no desenho o título ocupa a largura toda e aqui, com o
   `text-wrap:balance` dos títulos do tema, sobe a três linhas mais curtas — e o
   ar que sobrava deixou de chegar. Fica mais largo de propósito (68px, e o ano
   ainda lhe soma a entrelinha, perto de 40 a 220 de corpo).
   Em ecrã estreito volta ao valor apertado, mais abaixo: aí o ano é pequeno e
   traz muito menos ar consigo. */
.ev-perc__marcos{display:flex;flex-direction:column;gap:var(--ev-perc-gap);
    margin:clamp(2rem,4.5vw,68px) 0 0;padding:0;list-style:none}

.ev-perc__marco{
    position:relative;display:flex;flex-direction:column;gap:24px;
    /* ✔ 220px na medida cheia. Escala com a largura para não rebentar a coluna. */
    --ev-perc-ano:clamp(4.5rem,14.6vw,220px);
    --ev-perc-ano-h:calc(var(--ev-perc-ano) * 1.2);
}
/* ✔ Desenho: um ano por extenso («FUTURO») desce para 130px. */
.ev-perc__marco--longo{--ev-perc-ano:clamp(2.6rem,8.6vw,130px)}
.ev-perc__marco--esq{align-items:flex-start}
.ev-perc__marco--dir{align-items:flex-end}

/* O ano é marca-d'água: `opacity` sobre a cor herdada, e não um branco fixo, para
   a faixa continuar a funcionar se um dia for clara (a opção «Cor de fundo»). */
.ev-perc__ano{
    width:var(--ev-perc-col);max-width:100%;margin:0;
    /* O desenho pede a Zona Pro Black; o tema só carrega Regular e Bold. A 4% de
       opacidade a diferença de peso não se lê — se o ficheiro Black entrar um
       dia, é aqui que se muda. */
    font-family:var(--ev-display);font-weight:700;
    font-size:var(--ev-perc-ano);line-height:1.2;height:var(--ev-perc-ano-h);
    letter-spacing:-.02em;white-space:nowrap;
    color:inherit;opacity:.04;
}

.ev-perc__corpo{display:flex;flex-direction:column;gap:14px;
    width:var(--ev-perc-col);max-width:100%}
.ev-perc__nome{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.25rem,1.8vw,26px);line-height:1.25;color:inherit}
.ev-perc__texto{font-family:var(--ev-corpo);font-size:15px;line-height:1.65;
    color:var(--ev-cinza)}
.ev-sec--escuro .ev-perc__texto,.ev-sec--preto .ev-perc__texto{color:var(--ev-cinza-claro)}
.ev-perc__texto p:last-child{margin-bottom:0}

/* ── O eixo ──────────────────────────────────────────────────────────────
   Desenha-se marco a marco: cada um traça o troço que lhe fica por baixo, mais o
   intervalo até ao seguinte. O PRIMEIRO começa no seu próprio ponto e o ÚLTIMO
   acaba no dele — é o que o desenho mostra, uma linha ENTRE o primeiro e o
   último ponto, e não uma que atravessa a faixa de ponta a ponta.

   O ponto fica a meio da altura do ano (`--ev-perc-ano-h`), que é fixa por marco;
   é essa altura conhecida que dispensa JavaScript para alinhar tudo. */
.ev-perc__marco::before,.ev-perc__marco::after{content:"";position:absolute;
    left:var(--ev-perc-eixo);pointer-events:none}
.ev-perc__marco::before{top:0;bottom:calc(var(--ev-perc-gap) * -1);
    width:2px;margin-left:-1px;border-radius:1px;background:var(--ev-perc-eixo-cor)}
.ev-perc__marco:first-child::before{top:calc(var(--ev-perc-ano-h) / 2)}
.ev-perc__marco:last-child::before{bottom:auto;height:calc(var(--ev-perc-ano-h) / 2)}
/* Marco único: não há nada a ligar — a linha era só um risco solto. */
.ev-perc__marco:first-child:last-child::before{display:none}

.ev-perc__marco::after{top:calc(var(--ev-perc-ano-h) / 2);
    width:var(--ev-perc-ponto);height:var(--ev-perc-ponto);
    margin:calc(var(--ev-perc-ponto) / -2) 0 0 calc(var(--ev-perc-ponto) / -2);
    border-radius:50%;background:var(--ev-red)}

/* ── Ecrã estreito ───────────────────────────────────────────────────────
   Duas colunas de 550px deixam de caber muito antes de o eixo ao meio deixar de
   fazer sentido: a partir daqui o eixo encosta à esquerda e TODOS os marcos se
   alinham por ele, que é como uma cronologia se lê num telemóvel. */
@media (max-width:900px){
    .ev-perc{padding-block:clamp(3.5rem,9vw,150px);
        --ev-perc-gap:56px;--ev-perc-eixo:7px;--ev-perc-ponto:14px}
    /* Mais folga do que a do ecrã largo em proporção, e não menos: aqui o ano é
       pequeno e já não traz consigo a entrelinha de 40px que, lá em cima, fazia
       metade do intervalo. Sem isto o título ficava colado ao primeiro marco. */
    .ev-perc__marcos{margin-top:clamp(2.25rem,6vw,52px)}
    /* O ano encolhe MUITO mais do que a faixa: numa coluna estreita, o que em
       ecrã largo é um fundo passa a disputar espaço com o texto. Aqui vale
       menos de metade do que valeria pela regra do desenho. */
    .ev-perc__marco{padding-left:40px;gap:16px;
        --ev-perc-ano:clamp(2rem,9vw,78px)}
    /* O ano por extenso NÃO segue aqui a proporção do desenho (130/220 ≈ 0,59):
       a essa conta o «FUTURO» descia ao tamanho dos títulos e deixava de se ler
       como marca-d'água. Numa coluna estreita sobra-lhe largura de sobra, por
       isso encolhe só a 3/4 — o que o desenho evitava era o ano transbordar, e
       isso continua garantido. */
    .ev-perc__marco--longo{--ev-perc-ano:clamp(1.5rem,6.75vw,58px)}
    /* Todos do mesmo lado: alternar sem espaço para alternar só desalinhava. */
    .ev-perc__marco--dir{align-items:flex-start}
    .ev-perc__ano,.ev-perc__corpo{width:100%}
    /* Os 26/15px do desenho são medidas de uma coluna de 550: numa de 350 dão
       linhas curtas de mais e um título que pesa mais do que o assunto. Descem
       para 18/14 em tablet e 16/13 no telemóvel. */
    .ev-perc__corpo{gap:12px}
    .ev-perc__nome{font-size:clamp(1rem,2.2vw,18px)}
    .ev-perc__texto{font-size:clamp(.8125rem,1.7vw,14px)}
}

/* ── LISTAGEM DE PROJETOS (Portefólio) ───────────────────────────────────────
   ✔ Figma «idi-investigacao» 6:403 e 6:455: 150px de recuo vertical, 48px entre
   o sobretítulo, o título, a lista e o botão, e linhas de 40px de folga vertical
   separadas por um filete #C1C5C8.

   As cores do texto não se declaram: entram pelas classes .ev-sec--claro /
   .ev-sec--escuro do tema e o resto é `color:inherit`. */
/* A margem de rolagem é o que faz a âncora parar no sítio certo: o cabeçalho é
   fixo no topo (100px) e, sem ela, saltar da migalha de um projeto para a
   listagem deixava o sobretítulo e o título escondidos por baixo dele. */
.ev-projs{padding-block:150px;scroll-margin-top:calc(var(--ev-header-h) + 24px)}
.ev-projs .ev-wrap{display:flex;flex-direction:column;gap:48px}
/* ✔ Desenho: Zona Pro Bold 38px. */
.ev-projs__titulo{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.65rem,2.6vw,38px);line-height:1.2;color:inherit}

.ev-projs__cartao{display:flex;gap:48px;align-items:center;padding-block:40px;
    border-bottom:1px solid var(--ev-cinza-claro)}
/* Sem isto o `hidden` do «Ver Mais» não faz nada: o display:flex acima (0,1,0)
   ganha ao [hidden]{display:none} da folha do browser. */
.ev-projs__cartao[hidden]{display:none}

/* ✔ Desenho: caixa de 200 × 120, filete #C1C5C8, cantos de 8px. Fica BRANCA mesmo
   na faixa escura — é o fundo de que os logótipos precisam para se lerem. */
.ev-projs__logo{flex:0 0 200px;width:200px;height:120px;display:flex;
    align-items:center;justify-content:center;padding:25px 30px;
    background:var(--ev-branco);border:1px solid var(--ev-cinza-claro);border-radius:8px}
/* `contain` e não `cover`: são logótipos, e cortar um logótipo é estragá-lo. */
.ev-projs__logo img{width:100%;height:100%;object-fit:contain}

.ev-projs__info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
/* ✔ Desenho: período a 13px no cinza claro, com .5px de espaçamento. */
.ev-projs__periodo{margin:0;font-family:var(--ev-corpo);font-weight:400;font-size:13px;
    line-height:1.4;letter-spacing:.5px;color:var(--ev-cinza-claro)}
/* ✔ Desenho: Zona Pro Bold. Medida fluida entre os 24px dos projetos de inovação
   e os 20px dos internacionais — ver a nota na vista da secção. */
.ev-projs__nome{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.15rem,1.6vw,24px);line-height:1.3;color:inherit}
.ev-projs__nome a{text-decoration:none}
.ev-projs__nome a:hover{color:var(--ev-red)}
/* ✔ Desenho: endereço do projeto a 14px no vermelho da marca. */
.ev-projs__url{font-family:var(--ev-corpo);font-size:14px;line-height:1.4;
    color:var(--ev-red);text-decoration:none;word-break:break-word}
.ev-projs__url:hover{text-decoration:underline}

/* ✔ Desenho: «LER MAIS» a 13px, maiúsculas, 1px de espaçamento, seta a 6px. */
/* A ENTRELINHA É 1.25 E NÃO 1. Com 1, a caixa do link mede os 13px do corpo da
   letra e a marca de 10px fica sem folga nenhuma: encosta em cima e em baixo e
   lê-se como cortada. O desenho dá 16px de caixa a este texto de 13px (nó
   24:12) — é exactamente 1.25, e deixa 3px de ar de cada lado da marca. */
.ev-projs__ler{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:6px;
    padding-left:32px;text-decoration:none;font-family:var(--ev-corpo);font-weight:500;
    font-size:13px;line-height:1.25;letter-spacing:1px;text-transform:uppercase;color:inherit}
/* ✔ Desenho: a marca angular a 9.47 × 10, no vermelho da casa. A cor vai NO
   próprio SVG e não é herdada do <a> de propósito — o rótulo é cinza escuro e a
   marca vermelha, como no ficheiro (o mesmo critério da seta do «Voltar»). */
.ev-projs__ler .ev-marca{width:10px;height:10px;color:var(--ev-red);transition:transform .18s}
.ev-projs__ler:hover{color:var(--ev-red)}
.ev-projs__ler:hover .ev-marca{transform:translateY(var(--ev-marca-y)) translateX(3px)}

.ev-projs__rodape{display:flex;justify-content:center}
/* ✔ Desenho: mais pequeno do que o botão padrão — 12/24 de folga, cantos de 6px,
   texto a 16px. */
.ev-projs__mais{padding:12px 24px;border-radius:6px;font-size:16px;cursor:pointer}
.ev-projs__mais[hidden]{display:none}

/* TABLET: a linha do projeto MANTÉM-SE — o que encolhe é a caixa do logótipo e as
   folgas. Empilhar aqui partia cada projeto em três blocos e fazia a lista
   crescer para o triplo sem necessidade nenhuma: a 768px, tirados os 200px do
   logótipo, as folgas e o «Ler mais», ainda sobram ~330px para o título. */
@media (max-width:1024px){
    .ev-projs{padding-block:clamp(3.5rem,9vw,150px)}
    .ev-projs .ev-wrap{gap:32px}
    .ev-projs__cartao{gap:24px;padding-block:28px}
    /* 150 × 90 mantém o rácio 5:3 da caixa do desenho. */
    .ev-projs__logo{flex:0 0 150px;width:150px;height:90px;padding:16px 20px}
    .ev-projs__ler{padding-left:16px}
}

/* TELEMÓVEL: continua numa linha só. Para caber, encolhe a caixa do logótipo e o
   «Ler mais» fica REDUZIDO À MARCA — o rótulo ocupava uns 70px que fazem toda a
   diferença na medida do título. Quem usa leitor de ecrã não perde nada: o <a>
   tem um aria-label que diz o nome do projeto. */
@media (max-width:640px){
    .ev-projs__cartao{gap:16px;padding-block:22px}
    .ev-projs__logo{flex:0 0 100px;width:100px;height:60px;padding:8px 10px}
    .ev-projs__nome{font-size:1rem}
    .ev-projs__periodo{font-size:12px}
    .ev-projs__url{font-size:13px}
    .ev-projs__ler{padding-left:8px}
    .ev-projs__ler span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
        overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}

/* ── FICHA DE UM PROJETO (Portefólio) ────────────────────────────────────────
   ✔ Figma «project-detail-ia-pme» 144:4: migalha, duas colunas de 596px com 80px
   entre elas, linha de partilha e, no fim, «Voltar» e «Seguinte». */

/* ✔ Desenho (nó 144:23): 150px por baixo do cabeçalho e apenas 24px até ao
   conteúdo — a migalha pertence VISUALMENTE ao bloco que abre, não é uma faixa
   isolada a meio caminho. Estava ao contrário (50 em cima, 124 em baixo): os
   valores tinham sido lidos da posição do frame no ficheiro e não do recuo
   declarado, e a diferença é exactamente esta troca.

   O recuo de cima encolhe nos ecrãs pequenos: 150px num telemóvel eram um terço
   do ecrã sem nada lá dentro. */
.ev-pw__migalha{padding:clamp(3rem,10vw,150px) 0 24px;font-family:var(--ev-corpo);
    font-size:13px;line-height:1.4;color:var(--ev-cinza-claro)}
.ev-pw__migalha .ev-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ev-pw__migalha a{color:inherit;text-decoration:none}
.ev-pw__migalha a:hover,.ev-pw__migalha a:focus-visible{color:var(--ev-red)}
/* ✔ Desenho: a página onde se está vai a vermelho e em Medium — é o único item
   que não é um link, e a cor é o que o distingue do rasto que ficou para trás. */
.ev-pw__migalha [aria-current="page"]{font-weight:500;color:var(--ev-red)}

.ev-pw{padding-bottom:150px}
.ev-pw__grelha{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
/* SEM FICHA TÉCNICA não há segunda coluna — e uma coluna de texto com a largura
   das duas (1272) deixa de se ler como coluna. Fica numa medida de leitura, do
   lado de cá, que é onde o olho já estava. */
.ev-pw__grelha--so-texto{grid-template-columns:minmax(0,1fr)}
.ev-pw__grelha--so-texto .ev-pw__col{max-width:760px}
/* ✔ Desenho: 32px entre o cartão do logótipo, o cabeçalho e o texto. */
.ev-pw__col{display:flex;flex-direction:column;gap:32px;min-width:0}

/* ✔ Desenho: cartão branco de 235 × 165, filete #C1C5C8, cantos de 12px, com o
   logótipo ao meio. `contain` porque é um logótipo — cortá-lo é estragá-lo. */
.ev-pw__logo{width:235px;max-width:100%;height:165px;display:flex;
    align-items:center;justify-content:center;padding:40px 39px;
    background:var(--ev-branco);border:1px solid var(--ev-cinza-claro);border-radius:12px}
.ev-pw__logo img{width:100%;height:100%;object-fit:contain}

.ev-pw__cab{display:flex;flex-direction:column;gap:16px}
.ev-pw__tit-grupo{display:flex;flex-direction:column;gap:8px}
/* O período, por cima do título — o mesmo desenho do cartão da listagem, para
   quem vem de lá reconhecer a mesma informação no mesmo tom. */
.ev-pw__periodo{margin:0;font-family:var(--ev-corpo);font-weight:400;font-size:14px;
    line-height:1.4;letter-spacing:.5px;color:var(--ev-cinza-claro)}
/* ✔ Desenho: Zona Pro Bold 40px. */
.ev-pw__titulo{margin:0;font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.75rem,3vw,40px);line-height:1.2;color:var(--ev-escuro)}
/* ✔ Desenho: Helvetica 17px com entrelinha 1.8. É conteúdo do editor, por isso os
   estilos vão nos descendentes e não numa classe por parágrafo. */
.ev-pw__corpo{font-family:var(--ev-corpo);font-size:17px;line-height:1.8;color:var(--ev-escuro)}
.ev-pw__corpo p{margin:0 0 1rem}
.ev-pw__corpo p:last-child{margin-bottom:0}
.ev-pw__corpo a{color:var(--ev-red)}

/* ── A BARRA DOS APOIOS ───────────────────────────────────────────────────
   Uma faixa de logótipos por baixo do texto do projeto. Três decisões:

   O TAMANHO É UM TECTO, não uma medida. `max-width` com `height:auto` e o
   `width` a acompanhar: uma barra estreita fica ao tamanho dela em vez de ser
   esticada até ficar desfocada, e uma larga encolhe sem se deformar. Os 420px
   são os mesmos da barra do /apoio-prr — a mesma coisa deve ter o mesmo peso
   nos dois sítios.

   O ESPAÇO ACIMA são 12px E NÃO MAIS, e a conta é esta: o `.ev-pw__col` já é uma
   coluna flex com `gap:32px`, portanto a barra JÁ vinha com 32px do texto antes
   de esta regra lhe tocar. A primeira versão acrescentava-lhe 32 a 48 por cima
   do gap — 64 a 80 no total — e abria um buraco a meio da página. O gap trata da
   separação; estes 12 são só o que distingue uma nota de rodapé de mais um
   irmão na coluna.

   `display:block` na imagem tira os três pixéis de descida que uma imagem em
   linha herda da linha de texto — a folga por baixo deixava de bater certo com
   a de cima sem que se percebesse porquê. */
.ev-pw__apoios{margin:12px 0 0}
.ev-pw__apoios img{display:block;width:auto;max-width:min(420px, 100%);height:auto}
.ev-pw__corpo ul,.ev-pw__corpo ol{margin:0 0 1rem;padding-left:1.3rem}
.ev-pw__corpo img{max-width:100%;height:auto;border-radius:10px}
/* Endereço próprio do projeto. Mesmo tratamento do cartão da listagem — vermelho,
   sem sublinhado até ao rato. Aqui o vermelho é próprio: é um link SOZINHO, não
   um pedaço de frase como os da ficha técnica (onde a cor picava o texto todo). */
.ev-pw__link{margin:0;font-family:var(--ev-corpo);font-size:16px;line-height:1.5}
.ev-pw__link a{color:var(--ev-red);text-decoration:none;word-break:break-word}
.ev-pw__link a:hover,.ev-pw__link a:focus-visible{text-decoration:underline}

/* ✔ Desenho: a ficha é recuada 32px de cada lado — o conteúdo mede 532 dos 596 da
   coluna. Não tem fundo nem moldura: o que separa as linhas é o filete. */
.ev-pw__ficha{padding:32px;min-width:0}
/* ✔ Desenho: Zona Pro Bold 20px. */
.ev-pw__ficha-titulo{margin:0 0 18px;font-family:var(--ev-display);font-weight:700;
    font-size:20px;line-height:1.3;color:var(--ev-escuro)}
.ev-pw__linhas{margin:0}
/* ✔ Desenho: 8px do rótulo ao valor, 20px até ao filete e 24px até à linha
   seguinte. A última não leva margem — o filete fecha a lista. */
.ev-pw__linha{padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--ev-cinza-claro)}
.ev-pw__linha:last-child{margin-bottom:0}
/* ✔ Desenho: rótulo em maiúsculas a 14px, 1px de espaçamento, no vermelho. */
.ev-pw__linha dt{margin:0 0 8px;font-family:var(--ev-corpo);font-weight:500;font-size:14px;
    line-height:1.2;letter-spacing:1px;text-transform:uppercase;color:var(--ev-red)}
/* ✔ Desenho: valor a 16px com entrelinha 1.5. */
.ev-pw__linha dd{margin:0;font-family:var(--ev-corpo);font-size:16px;line-height:1.5;color:var(--ev-escuro)}
.ev-pw__linha dd p{margin:0 0 .6rem}
.ev-pw__linha dd p:last-child{margin-bottom:0}
/* Os links dentro de um valor da ficha vivem NO MEIO de uma frase (o endereço do
   PRR, por exemplo). A vermelho, cada um puxava o olho para si e a lista perdia a
   leitura corrida — por isso ficam da cor do texto e só coram no rato.

   O sublinhado FICA, e não é decoração: sem cor a distingui-los, é ele que diz
   que aquilo é um link. Marcar um link só pela cor já não bastava (quem não
   distingue vermelho de cinza não o via); sem cor nenhuma, não sobrava nada. */
.ev-pw__linha dd a{color:inherit;text-decoration:underline;text-underline-offset:2px;
    text-decoration-thickness:1px;text-decoration-color:var(--ev-cinza-claro);
    transition:color .18s,text-decoration-color .18s;word-break:break-word}
.ev-pw__linha dd a:hover,
.ev-pw__linha dd a:focus-visible{color:var(--ev-red);text-decoration-color:currentColor}

/* ── Partilha e navegação entre projetos ─────────────────────────────────── */
/* ✔ Desenho: a linha da partilha tem 24px de folga em cima e em baixo e NÃO leva
   filete (nó 284:38). Quem o leva é a navegação, logo a seguir. */
.ev-pw__partilha{display:flex;align-items:center;gap:16px;margin-top:48px;padding-block:24px}
.ev-pw__partilha-rotulo{font-family:var(--ev-corpo);font-weight:500;font-size:14px;
    line-height:1;letter-spacing:1px;text-transform:uppercase;color:var(--ev-escuro)}
/* O botão herda o desenho do detalhe de notícia; só a folga de cima é daqui. */
.ev-pw__partilha .ev-artigo__partilhar{margin-top:0}

/* ✔ Desenho: filete #C1C5C8 por cima do «Voltar / Seguinte», com 24px até aos
   rótulos e 48px de distância à linha da partilha (nó 148:45). */
.ev-pw__nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
    margin-top:48px;padding-top:24px;border-top:1px solid var(--ev-cinza-claro)}
/* Mesma folga do «Ler mais», pela mesma razão — é a mesma marca de 10px ao lado
   de texto de 13px. */
.ev-pw__salto{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;
    font-family:var(--ev-corpo);font-weight:500;font-size:13px;line-height:1.25;
    letter-spacing:1px;text-transform:uppercase;color:var(--ev-escuro)}
.ev-pw__salto .ev-marca{width:10px;height:10px;color:var(--ev-red);transition:transform .18s}
/* ✔ Desenho: no «Voltar» a marca não é a espelhada — é a MESMA rodada 180°. Um
   espelho trocaria o lado do braço mas manteria o corte do canto virado para o
   mesmo sítio; a rotação leva o canto com ele, que é o que o ficheiro mostra. */
.ev-pw__salto--ant .ev-marca{transform:translateY(var(--ev-marca-y)) rotate(180deg)}
.ev-pw__salto:hover{color:var(--ev-red)}
/* No hover afasta-se para a ESQUERDA — é para onde o «Voltar» leva. Continua a
   ser um translateX positivo porque, com o elemento rodado 180°, o eixo X dele
   aponta ao contrário do do ecrã: o mesmo 3px que no «Seguinte» vai para a
   direita, aqui vai para a esquerda. */
.ev-pw__salto--ant:hover .ev-marca{transform:translateY(var(--ev-marca-y)) rotate(180deg) translateX(3px)}
.ev-pw__salto--seg:hover .ev-marca{transform:translateY(var(--ev-marca-y)) translateX(3px)}

@media (max-width:1000px){
    .ev-pw{padding-bottom:clamp(3.5rem,9vw,150px)}
    .ev-pw__grelha{grid-template-columns:minmax(0,1fr);gap:48px}
    /* Empilhada, a ficha não precisa do recuo que a separava da outra coluna. */
    .ev-pw__ficha{padding:0}
}

/* ── Acessibilidade ──────────────────────────────────────────────────── */
.ev-skip{position:absolute;left:-9999px}
.ev-skip:focus{left:1rem;top:1rem;z-index:100;background:#fff;color:var(--ev-tinta);padding:.7rem 1.1rem;border-radius:var(--ev-raio)}
:focus-visible{outline:3px solid var(--ev-red);outline-offset:2px}
/* «Menos movimento» pedido no sistema: pára tudo.
   O `*` TEM de vir acompanhado do `*::before` e do `*::after` — o selector
   universal NÃO alcança pseudo-elementos, e sem eles esta regra deixava a
   correr precisamente as animações que vivem em `::before`/`::after`: as ondas
   do percurso, o traço do eixo, o ponto. Descoberto a medir, não a ler. */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
    }
}

/* ── REVELAÇÃO AO ENTRAR NO ECRÃ ──────────────────────────────────────
   Mecanismo genérico: põe-se `data-ev-revela` num elemento e ele entra a
   subir e a aparecer quando chega ao ecrã.

   ⚠️ DUAS DECISÕES DE DESENHO QUE NÃO SÃO ÓBVIAS:

   1. QUEM ESCONDE É O `.ev-anima`, a classe que o kit.js põe no <html>
      DEPOIS de confirmar que tem IntersectionObserver e que ninguém pediu
      «menos movimento». Sem JavaScript, com o kit.js em falha, ou com o
      sistema a pedir menos movimento, a classe nunca aparece e o conteúdo
      fica VISÍVEL. Uma animação que esconde o que não consegue revelar não
      é uma animação: é uma página em branco.

   2. O ESTADO ESCONDIDO ESTÁ NUM `:not([data-ev-visivel])`, E NÃO HÁ REGRA
      NENHUMA PARA O ESTADO FINAL. É de propósito, e custou um erro a
      descobrir: a primeira versão punha `opacity:1` no fim, e isso ATROPELAVA
      o desenho — o `.ev-lab__sub` tem opacidade .75 e o `.ev-lab__corpo` .70,
      escolhidas a olho, e a animação deixava-os os dois a 1 depois de
      entrarem. Assim, quando o atributo aparece a regra deixa de casar e cada
      elemento volta À SUA opacidade, seja ela qual for. A transição corre na
      mesma, porque está declarada fora do `:not`.

   A curva é `cubic-bezier(.22,.61,.36,1)` — um easeOut: arranca depressa e
   assenta devagar, que é o que faz o movimento parecer travar em vez de
   parar. */
.ev-anima [data-ev-revela]{
    transition:opacity .7s cubic-bezier(.22,.61,.36,1),
               transform .7s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--ev-atraso, 0ms);
}
.ev-anima [data-ev-revela]:not([data-ev-visivel]){
    opacity:0;
    transform:translateY(18px);
    will-change:opacity, transform;
}

/* CONTACTOS · a cascata. Os atrasos são pequenos de propósito: passam a
   sensação de as coisas assentarem umas a seguir às outras, sem que ninguém
   fique à espera. Somados, o último item entra 240 ms depois do primeiro. */
.ev-anima .ev-cdet__linhas .ev-cdet__linha:nth-child(2){--ev-atraso:60ms}
.ev-anima .ev-cdet__linhas .ev-cdet__linha:nth-child(3){--ev-atraso:120ms}
.ev-anima .ev-cdet__linhas .ev-cdet__linha:nth-child(4){--ev-atraso:180ms}
.ev-anima .ev-cdet__linhas .ev-cdet__linha:nth-child(5){--ev-atraso:240ms}

/* O cartão do formulário entra da direita, não de baixo: está ao lado da
   coluna de texto, e vindo de baixo parecia atrasar-se em relação a ela. */
.ev-anima .ev-cdet__cartao[data-ev-revela]:not([data-ev-visivel]){transform:translateX(24px)}

/* TEXTO + IMAGEM · a fotografia entra pelo lado onde está. O `--esq` inverte
   a secção no desenho, e a animação tem de o acompanhar: uma imagem à
   esquerda a entrar da direita atravessava o texto pela frente. */
.ev-anima .ev-ti__texto:nth-of-type(1){--ev-atraso:80ms}
.ev-anima .ev-ti__texto:nth-of-type(2){--ev-atraso:140ms}
.ev-anima .ev-ti__texto:nth-of-type(n+3){--ev-atraso:200ms}
.ev-anima .ev-ti__fig[data-ev-revela]:not([data-ev-visivel]){transform:translateX(28px)}
.ev-anima .ev-ti--esq .ev-ti__fig[data-ev-revela]:not([data-ev-visivel]){transform:translateX(-28px)}

/* PROJETOS · cascata pela ordem em que se lêem. Seis degraus e pára: numa
   lista longa, um sétimo cartão a esperar 420 ms já não parece cascata,
   parece atraso. */
.ev-anima .ev-projs__cartao:nth-child(2){--ev-atraso:70ms}
.ev-anima .ev-projs__cartao:nth-child(3){--ev-atraso:140ms}
.ev-anima .ev-projs__cartao:nth-child(4){--ev-atraso:210ms}
.ev-anima .ev-projs__cartao:nth-child(5){--ev-atraso:280ms}
.ev-anima .ev-projs__cartao:nth-child(n+6){--ev-atraso:350ms}
/* Os que o botão «ver mais» revela apanham a animação sozinhos — o observador
   dispara quando saem do `hidden`. Mas o atraso seria contado pela posição na
   lista, e quem carregou no botão quer vê-los agora. */
.ev-anima .ev-projs__cartao[data-ev-extra]{--ev-atraso:0ms}

/* ── HOMEPAGE ────────────────────────────────────────────────────────
   Seis das oito faixas. Ficam DE FORA, e de propósito:
     · o HERÓI, que é a primeira coisa que se vê — animar o que já está no
       ecrã quando a página abre não é revelar nada, é atrasar;
     · a faixa das ÓRBITAS, que tem animação própria e contínua. Duas
       animações a disputar o mesmo elemento davam um arranque aos solavancos.
   Os atrasos vão do topo para o fundo de cada faixa, como se lê. */
.ev-anima .ev-lab__titulo{--ev-atraso:70ms}
.ev-anima .ev-lab__sub{--ev-atraso:130ms}
.ev-anima .ev-lab__corpo{--ev-atraso:190ms}
.ev-anima .ev-lab__accao{--ev-atraso:250ms}

.ev-anima .ev-imp__titulo{--ev-atraso:70ms}
.ev-anima .ev-imp__lista{--ev-atraso:140ms}
.ev-anima .ev-imp__fig[data-ev-revela]:not([data-ev-visivel]){transform:translateX(28px)}
.ev-anima .ev-imp--esq .ev-imp__fig[data-ev-revela]:not([data-ev-visivel]){transform:translateX(-28px)}

.ev-anima .ev-dif__texto{--ev-atraso:90ms}

.ev-anima .ev-grupo__titulo{--ev-atraso:70ms}
.ev-anima .ev-grupo__texto{--ev-atraso:140ms}
.ev-anima .ev-grupo__acao{--ev-atraso:210ms}
.ev-anima .ev-grupo__fig[data-ev-revela]:not([data-ev-visivel]){transform:translateX(28px)}
.ev-anima .ev-grupo--esq .ev-grupo__fig[data-ev-revela]:not([data-ev-visivel]){transform:translateX(-28px)}

/* «O Grupo em números» — atrasos CURTOS nos três números, de propósito. Cada
   um tem um contador que arranca ao entrar no ecrã (limiar 0,4, contra 0,12
   desta revelação): o número aparece primeiro e conta depois, que é a ordem
   certa. Atrasos maiores punham a contagem a correr por baixo de um elemento
   ainda a aparecer, e ninguém via os primeiros dígitos. */
.ev-anima .ev-num__titulo{--ev-atraso:70ms}
.ev-anima .ev-num__texto{--ev-atraso:130ms}
.ev-anima .ev-num__item:nth-child(2){--ev-atraso:70ms}
.ev-anima .ev-num__item:nth-child(3){--ev-atraso:140ms}

.ev-anima .ev-amanha__texto{--ev-atraso:90ms}

/* ── O PERCURSO: o eixo desenha-se ───────────────────────────────────────
   A única faixa do site com animação PRÓPRIA, e não a revelação genérica.
   Uma cronologia não é uma lista de caixas que aparecem: é uma linha que
   avança no tempo. Aqui a linha avança mesmo — cada marco traça o seu troço
   de cima para baixo, o ponto vermelho assenta quando o traço lá chega, e só
   depois entram o ano e o texto.

   O ALVO OBSERVADO É O `<li>`, e só ele. O traço e o ponto são
   pseudo-elementos (`::before` e `::after`) e nenhum observador os consegue
   vigiar; ficam pendurados no estado do marco, que é o que os faz possíveis.

   Por isso o marco NÃO usa a revelação genérica — se desaparecesse, levava o
   eixo com ele. Fica sempre visível; o que anima são as partes. */
.ev-anima .ev-perc__marco[data-ev-revela]:not([data-ev-visivel]){
    opacity:1;
    transform:none;
}

/* O traço, de cima para baixo. `scaleY` e não `height`: o `height` obriga o
   browser a recalcular a caixa a cada quadro, o `transform` corre na placa
   gráfica e não toca no resto da página. */
.ev-anima .ev-perc__marco::before{
    transform:scaleY(0);
    transform-origin:top center;
    transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.ev-anima .ev-perc__marco[data-ev-visivel]::before{transform:scaleY(1)}

/* O ponto assenta com um ressalto curto, e só depois de o traço lá chegar
   (350 ms). A curva `cubic-bezier(.34,1.56,.64,1)` passa dos 100% e volta —
   é o que dá a sensação de POUSAR em vez de aparecer. */
.ev-anima .ev-perc__marco::after{
    transform:scale(0);
    transition:transform .45s cubic-bezier(.34,1.56,.64,1) .35s;
}
.ev-anima .ev-perc__marco[data-ev-visivel]::after{transform:scale(1)}

/* O ANO é o gesto grande: 220px de marca-d'água a entrar pelo lado onde o
   marco está, com 56px de curso — o triplo do resto do site. Pode ser
   descarado porque vive a 4% de opacidade: lê-se como o fundo a deslocar-se,
   não como texto a saltar.

   Repare que não há regra para o estado final: o `:not()` deixa de casar e o
   ano volta À SUA opacidade (.04), que é do desenho e não desta animação. */
/* A transição do ano vive na regra BASE e não dentro do `.ev-anima`, porque
   serve duas coisas ao mesmo tempo: a entrada em cena e a luz do hover. O
   atraso de 150 ms fica só no `transform` — assim o ano continua a deslizar
   depois do eixo, mas a OPACIDADE responde ao rato de imediato. Com o atraso
   na opacidade, a luz acendia sempre um piscar tarde. */
.ev-perc__ano{
    transition:opacity .5s ease,
               text-shadow .5s ease,
               transform .8s cubic-bezier(.22,.61,.36,1) .15s;
}

/* ── A LUZ ───────────────────────────────────────────────────────────────
   Ao passar o rato sobre o marco, o ano acende: sobe de 4% para 13% e ganha
   um halo vermelho — a mesma tinta do ponto que tem ao lado no eixo. Sai a
   0,5 s nos dois sentidos, que é o tempo de uma coisa a aquecer e a arrefecer;
   mais rápido pareceria um interruptor, mais lento pareceria avaria.

   13% e não mais: o ano é marca-d'água e tem de continuar ATRÁS do texto que
   se lê. Aceso, nota-se; nunca compete.

   `@media (hover:hover)` porque num ecrã táctil não há «sair de cima»: o
   primeiro toque acendia o ano e ele ficava aceso até se tocar noutro sítio.
   `:focus-within` para quem chega ali pelo teclado ter o mesmo sinal. */
@media (hover:hover){
    .ev-perc__marco:hover .ev-perc__ano{
        opacity:.13;
        text-shadow:0 0 clamp(20px, 3.5vw, 56px) rgba(225, 37, 27, .22);
    }
}
.ev-perc__marco:focus-within .ev-perc__ano{
    opacity:.13;
    text-shadow:0 0 clamp(20px, 3.5vw, 56px) rgba(225, 37, 27, .22);
}

/* ── AS ONDAS DO PONTO ───────────────────────────────────────────────────
   Anéis concêntricos a sair do ponto vermelho e a desvanecer, como o eco de
   um sonar. Dois anéis desencontrados a metade do ciclo — com um só, havia
   um vazio entre cada emissão e lia-se como um pisca-pisca; com dois, há
   sempre um a caminho e a coisa respira.

   O span existe porque o `::before` e o `::after` do marco já estão tomados
   pelo troço de eixo e pelo ponto. Ele próprio não se vê: serve de âncora,
   com a medida e a posição EXACTAS do ponto, e são os seus dois
   pseudo-elementos que crescem a partir daí. Por isso o `scale` começa em 1
   — nesse instante o anel é exactamente o ponto.

   3,4× e não mais: a onda tem de morrer bem antes de chegar ao texto do
   marco do lado. Em ecrã largo são 68px a partir do eixo; em telemóvel, onde
   o ponto encolhe para 14px, são 48px.

   Só `transform` e `opacity`, que o browser resolve na placa gráfica sem
   repintar nada à volta. E o `prefers-reduced-motion` da folha já as desliga
   por inteiro — com `animation:none`, o anel fica na opacidade 0 da regra
   base e não sobra nenhum círculo parado à volta do ponto. */
.ev-perc__onda{
    position:absolute;
    left:var(--ev-perc-eixo);
    top:calc(var(--ev-perc-ano-h) / 2);
    width:var(--ev-perc-ponto);
    height:var(--ev-perc-ponto);
    margin:calc(var(--ev-perc-ponto) / -2) 0 0 calc(var(--ev-perc-ponto) / -2);
    pointer-events:none;
}
.ev-perc__onda::before,
.ev-perc__onda::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:2px solid var(--ev-red);
    opacity:0;
    animation:ev-onda 3s ease-out infinite;
}
.ev-perc__onda::after{animation-delay:1.5s}

@keyframes ev-onda{
    0%   {transform:scale(1);   opacity:.55}
    70%  {                      opacity:0}
    100% {transform:scale(3.4); opacity:0}
}

/* Antes de o marco ser revelado não há ondas: o ponto ainda não pousou, e um
   eco a sair de um sítio onde não há nada é ruído. */
.ev-anima .ev-perc__marco:not([data-ev-visivel]) .ev-perc__onda::before,
.ev-anima .ev-perc__marco:not([data-ev-visivel]) .ev-perc__onda::after{
    animation:none;
}

/* ── O MODELO DE INOVAÇÃO: o número sobe por trás ────────────────────────
   Nada de entrar a subir como o resto do site. Aqui aproveita-se uma coisa
   que o cartão JÁ TEM: `overflow:hidden`. O número gigante — a marca-d'água
   vermelha ao centro — nasce por baixo da aresta de baixo e sobe até ao
   lugar, CORTADO pelo cartão durante todo o percurso. Lê-se como se estivesse
   a ser revelado através de uma janela, e não como um elemento a deslizar.

   Repare no `translate(-50%, …)`: o número está centrado com um
   `translate(-50%,-50%)`, e o estado escondido TEM de manter o -50% no eixo
   X. Sem isso, o número saltava para a esquerda ao arrancar.

   O cartão em si entra a CRESCER (.96 → 1) em vez de a subir — é o que o
   distingue das outras faixas sem gritar. */
.ev-anima .ev-proc__cartao[data-ev-revela]{
    transition:opacity .6s ease var(--ev-atraso, 0ms),
               transform .6s cubic-bezier(.22,.61,.36,1) var(--ev-atraso, 0ms);
}
.ev-anima .ev-proc__cartao[data-ev-revela]:not([data-ev-visivel]){
    opacity:0;
    transform:scale(.96);
}

.ev-proc__numero{
    transition:transform .85s cubic-bezier(.22,.61,.36,1) calc(var(--ev-atraso, 0ms) + 150ms),
               opacity .85s ease calc(var(--ev-atraso, 0ms) + 150ms);
}
.ev-anima .ev-proc__cartao:not([data-ev-visivel]) .ev-proc__numero{
    opacity:0;
    transform:translate(-50%, 45%);
}

/* O quadrado vermelho do ícone assenta com o MESMO ressalto do ponto do
   percurso. É de propósito: as duas faixas ficam a falar a mesma língua. */
.ev-proc__icone{
    transition:transform .5s cubic-bezier(.34,1.56,.64,1) calc(var(--ev-atraso, 0ms) + 250ms);
}
.ev-anima .ev-proc__cartao:not([data-ev-visivel]) .ev-proc__icone{
    transform:scale(0);
}

/* O que se lê entra por último e quase sem se dar por isso. Sem regra para o
   estado final — o `.ev-proc__texto` tem a sua opacidade no desenho (82%) e
   é para lá que volta. */
.ev-proc__nome{transition:opacity .5s ease calc(var(--ev-atraso, 0ms) + 300ms),
               transform .5s cubic-bezier(.22,.61,.36,1) calc(var(--ev-atraso, 0ms) + 300ms)}
.ev-proc__texto{transition:opacity .5s ease calc(var(--ev-atraso, 0ms) + 380ms),
                transform .5s cubic-bezier(.22,.61,.36,1) calc(var(--ev-atraso, 0ms) + 380ms)}
.ev-anima .ev-proc__cartao:not([data-ev-visivel]) .ev-proc__nome,
.ev-anima .ev-proc__cartao:not([data-ev-visivel]) .ev-proc__texto{
    opacity:0;
    transform:translateY(10px);
}

/* Os cartões estão lado a lado: a cascata lê-se da esquerda para a direita. */
.ev-anima .ev-proc__cartao:nth-child(2){--ev-atraso:90ms}
.ev-anima .ev-proc__cartao:nth-child(3){--ev-atraso:180ms}
.ev-anima .ev-proc__cartao:nth-child(n+4){--ev-atraso:270ms}
.ev-anima .ev-perc__marco:not([data-ev-visivel]) .ev-perc__ano{
    opacity:0;
    transform:translateX(-56px);
}
.ev-anima .ev-perc__marco--dir:not([data-ev-visivel]) .ev-perc__ano{
    transform:translateX(56px);
}

/* O corpo entra por último, discreto — é o que se lê, e o que se lê não deve
   andar aos saltos. */
.ev-anima .ev-perc__corpo{
    transition:opacity .6s ease .3s,
               transform .6s cubic-bezier(.22,.61,.36,1) .3s;
}
.ev-anima .ev-perc__marco:not([data-ev-visivel]) .ev-perc__corpo{
    opacity:0;
    transform:translateY(14px);
}

@media (max-width:900px){
    /* Com o eixo encostado à esquerda todos os marcos se alinham por ele: o ano
       entra sempre do mesmo lado, e com menos curso — o ecrã é estreito e 56px
       de deslocação horizontal punham-no a sair pela margem. */
    .ev-anima .ev-perc__marco:not([data-ev-visivel]) .ev-perc__ano,
    .ev-anima .ev-perc__marco--dir:not([data-ev-visivel]) .ev-perc__ano{
        transform:translateX(-24px);
    }
}

@media (max-width:900px){
    /* Em coluna única nada está «ao lado» de nada — tudo volta a entrar de
       baixo, como o resto. */
    .ev-anima .ev-cdet__cartao[data-ev-revela]:not([data-ev-visivel]),
    .ev-anima .ev-ti__fig[data-ev-revela]:not([data-ev-visivel]),
    .ev-anima .ev-ti--esq .ev-ti__fig[data-ev-revela]:not([data-ev-visivel]),
    .ev-anima .ev-imp__fig[data-ev-revela]:not([data-ev-visivel]),
    .ev-anima .ev-imp--esq .ev-imp__fig[data-ev-revela]:not([data-ev-visivel]),
    .ev-anima .ev-grupo__fig[data-ev-revela]:not([data-ev-visivel]),
    .ev-anima .ev-grupo--esq .ev-grupo__fig[data-ev-revela]:not([data-ev-visivel]){
        transform:translateY(18px);
    }
}

/* Nome curto do escritório por cima da morada — é um rótulo, não um cabeçalho.
   `display:block` para a morada começar na linha de baixo sem precisar de <br>. */
.ev-footer__local{display:block;font-weight:600;color:var(--ev-branco);opacity:.9}
.ev-footer__morada + .ev-footer__morada{margin-top:1rem}

/* ── AVISO DE COOKIES ────────────────────────────────────────────────────────
   Cartão em baixo à esquerda e não uma barra a atravessar o ecrã: pede-se uma
   resposta, não se bloqueia a leitura. Em telemóvel encosta às três margens e
   fica acima da dobra do teclado.

   O aviso não tranca a página (ver a nota do `role` na vista), por isso não leva
   véu nem `position:fixed` com `inset:0` — é uma peça sobre o canto, e o resto
   do site continua a funcionar por baixo. */
.ev-cookies{
    position:fixed;z-index:1200;
    left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
    width:min(420px, calc(100vw - clamp(2rem,6vw,4rem)));
    padding:24px;border-radius:12px;
    background:var(--ev-escuro);color:var(--ev-branco);
    box-shadow:0 18px 44px -12px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.25);
    display:flex;flex-direction:column;gap:12px;
    transition:opacity .3s ease, transform .3s ease;
}
.ev-cookies[hidden]{display:none}
/* Estado de saída — o kit.js põe o atributo e esconde no fim da transição. */
.ev-cookies[data-ev-fecha]{opacity:0;transform:translateY(12px);pointer-events:none}
.ev-cookies:focus{outline:2px solid var(--ev-red);outline-offset:4px}

.ev-cookies__titulo{
    margin:0;font-family:var(--ev-display);font-weight:700;font-size:20px;
    line-height:1.2;color:inherit;
}
.ev-cookies__texto{
    margin:0;font-family:var(--ev-corpo);font-size:14px;line-height:1.6;
    color:inherit;opacity:.8;
}
.ev-cookies__link{margin:0;font-family:var(--ev-corpo);font-size:14px;line-height:1.6}
.ev-cookies__link a{color:var(--ev-branco);text-underline-offset:3px}
.ev-cookies__link a:hover,.ev-cookies__link a:focus-visible{color:var(--ev-red)}

/* A linha dos dois botões. Lado a lado e do mesmo tamanho, nunca um por cima do
   outro nem um deles recuado — ver o comentário da regra seguinte. */
.ev-cookies__accoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
/* OS BOTÕES DO AVISO DE COOKIES.
   O que a lei pede é que recusar seja tão fácil como aceitar, e é isso que estas
   regras garantem: mesma largura, mesma letra, um clique cada, e o «Só
   essenciais» é um botão a sério. A ÊNFASE é que é diferente — o «Aceitar» leva
   o vermelho da marca — e essa diferença foi decidida e mantida (27-08), não é
   descuido. Contrastes medidos: 4,69:1 no vermelho, 4,89:1 no contorno; os dois
   acima do mínimo AA.
   Para os igualar um dia: apagar a linha do `background`/`border` aqui e deixar
   ambos herdarem o tratamento do `--nao`. */
.ev-cookies__botao{
    /* `flex:1 1 0` e não `1 1 auto`: com `auto`, cada botão fica com a largura do
       seu texto e o «Só essenciais» saía maior do que o «Aceitar». A igualdade de
       tamanho é a que conta para a lei, e tem de aguentar as palavras que o
       cliente escrever nas Definições — com `0` partem a linha ao meio, sejam
       quais forem. */
    flex:1 1 0;min-width:132px;justify-content:center;
    padding:12px 24px;border-radius:4px;
    font-family:var(--ev-corpo);font-weight:500;font-size:15px;
    background:var(--ev-red);color:var(--ev-branco);border:1px solid var(--ev-red);
    cursor:pointer;
}
.ev-cookies__botao:hover,.ev-cookies__botao:focus-visible{background:#B71C14;border-color:#B71C14}
.ev-cookies__botao--nao{
    background:transparent;color:var(--ev-branco);border-color:rgba(255,255,255,.45);
}
.ev-cookies__botao--nao:hover,.ev-cookies__botao--nao:focus-visible{
    background:rgba(255,255,255,.1);border-color:var(--ev-branco);color:var(--ev-branco);
}

/* O link do rodapé que reabre o aviso. É um <button> disfarçado de link: o que
   ele faz é abrir uma janela, não navegar — e um <a href="#"> a fazer isto
   mente ao teclado e aos leitores de ecrã. */
.ev-footer__cookies{
    appearance:none;background:none;border:0;padding:0;margin:0;
    /* SEM sublinhado, para ficar igual aos dois links ao lado («Política de
       Privacidade» e «Termos e Condições»), que .ev-footer a já põe sem. Estão na
       mesma linha, separados por barras: um deles sublinhado lia-se como se fosse
       outra coisa. O vermelho no hover é o que os três têm em comum. */
    font:inherit;color:inherit;cursor:pointer;text-decoration:none;
}
.ev-footer__cookies:hover,.ev-footer__cookies:focus-visible{color:var(--ev-red)}

@media (max-width:520px){
    .ev-cookies{left:1rem;right:1rem;bottom:1rem;width:auto;padding:20px}
    .ev-cookies__botao{flex:1 1 100%}
}
/* Com «menos movimento» pedido no sistema o aviso aparece e desaparece sem
   deslizar. O kit.js tem um `setTimeout` de segurança precisamente porque aqui a
   transição passa a durar zero e o `transitionend` nunca dispara. */
@media (prefers-reduced-motion: reduce){
    .ev-cookies{transition-duration:.01ms}
    .ev-cookies[data-ev-fecha]{transform:none}
}

/* ══ PÁGINAS DE ERRO (.ev-perr) ═══════════════════════════════════════════════
   Usada pelas vistas de `resources/views/themes/editlab/errors/`. Vive dentro do
   layout do site, portanto herda cabeçalho, menu e rodapé — só desenha o miolo.
   Alinhada à esquerda como o resto do tema (o cartão centrado da vista genérica
   do CMS era de outro vocabulário). ──────────────────────────────────────────── */
.ev-perr{
    background:var(--ev-claro);
    padding-block:clamp(4rem, 10vw, 8.5rem);
    min-height:min(58vh, 620px);
    display:flex;align-items:center;
}
.ev-perr__caixa{max-width:660px}

/* O código é ornamento com informação: grande, na cor da marca, e fora da árvore
   de acessibilidade (aria-hidden) porque o título ao lado já diz o mesmo por
   palavras. A 9,5rem está muito acima dos 24px do limiar de texto grande, por
   isso os 4,26:1 do vermelho sobre o #F4F4F4 cumprem AA com folga. */
.ev-perr__cod{
    font-family:var(--ev-display);font-weight:700;
    font-size:clamp(5rem, 16vw, 9.5rem);line-height:.85;
    letter-spacing:-.04em;color:var(--ev-red);
    margin:0 0 clamp(1rem, 2.5vw, 1.75rem);
}
.ev-perr__titulo{
    font-family:var(--ev-display);font-weight:700;
    font-size:clamp(1.75rem, 4.5vw, var(--ev-t-h2));line-height:1.15;
    letter-spacing:-.02em;color:var(--ev-tinta);
    margin:0 0 1rem;text-wrap:balance;
}
.ev-perr__texto{
    font-family:var(--ev-corpo);font-weight:400;font-size:var(--ev-t-base);line-height:1.7;
    color:var(--ev-cinza);max-width:46ch;
    margin:0 0 clamp(1.75rem, 4vw, 2.5rem);
}
.ev-perr__accoes{display:flex;flex-wrap:wrap;gap:14px}

/* Botões a 4px de raio, como o desenho novo (nós 83:40 e 46:355) — o `.ev-btn`
   global ainda está nos 8px de uma leitura anterior, por isso afina-se aqui
   dentro, como já se faz no `.ev-lab` e no `.ev-grupo`. DUAS classes, que é o que
   é preciso para ganhar às regras de uma só que vêm depois no ficheiro. */
.ev-perr .ev-btn{font-size:16px;padding:14px 28px;border-radius:4px}
.ev-perr .ev-btn--fantasma{color:var(--ev-tinta);background:transparent}
.ev-perr .ev-btn--fantasma:hover{background:var(--ev-tinta);color:#fff}