/* ------------------------------------------------------------------
   Complementos ao tema original.

   Contém apenas o que as novas partials introduzem: o formulário
   acessível, o campo isco do anti-spam, o seletor de idioma, os cartões
   de solução e as páginas de erro. O style.css do tema não foi alterado.
   ------------------------------------------------------------------ */

/* Salto para o conteúdo — visível só com navegação por teclado. */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    padding: .75rem 1.25rem;
    background: #2b59d9;
    color: #fff;
}

/* Campo isco: fora do ecrã, sem display:none — alguns bots ignoram
   campos escondidos por display, mas preenchem todos os inputs. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------- Formulários ---------------- */

.form-control-site {
    width: 100%;
    padding: .625rem .75rem;
    color: #fff;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 2px;
    transition: border-color .2s ease;
}

.form-control-site::placeholder { color: rgba(255, 255, 255, .55); }

.form-control-site:focus {
    outline: 2px solid #2b59d9;
    outline-offset: 1px;
    border-color: #2b59d9;
}

.form-control-site.is-invalid { border-color: #ff6b6b; }

.form-control-site option { color: #12131a; }

.field-error {
    display: block;
    margin-top: .25rem;
    font-size: .85rem;
    color: #ff9c9c;
}

.site-form .alert { border-radius: 2px; }

/* ---------------- Seletor de idioma ---------------- */

.language-switcher > a { text-transform: uppercase; }

.language-switcher .sub-menu { min-width: 160px; }

.language-switcher .sub-menu a[aria-current="true"] { font-weight: 600; }

/* ---------------- Menus ---------------- */

/* Mega-menu.

   O tema define `.header__main .main-menu ul li .sub-menu li a` com
   `color: var(--heading-color) !important` — (0,3,3) e importante. O HTML
   antigo só o vencia com `style="color:white !important"` colado em cada
   link. Aqui a cadeia completa faz o mesmo trabalho, uma vez. */
.header__main .main-menu ul li .sub-menu li a.megamenu-link,
.header__main .main-menu ul li.language-switcher .sub-menu li a {
    color: #fff !important;
    font-weight: 400 !important;
    display: block;
    transition: opacity .15s ease;
}

/* O padding é o que distingue os dois painéis, por isso não vive na regra
   partilhada acima: no mega-menu as colunas já trazem a sua própria
   goteira, no selector de idiomas o texto precisa de afastamento da
   margem do painel. */
.header__main .main-menu ul li .sub-menu li a.megamenu-link {
    padding: .55rem 0;
    font-size: 1.0625rem;
}

.header__main .main-menu ul li.language-switcher .sub-menu li a {
    /* 30px é o mesmo afastamento a que o texto do mega-menu começa, para
       que os dois painéis do cabeçalho leiam alinhados. */
    padding: .65rem 1.875rem;
}

.header__main .main-menu ul li .sub-menu li a.megamenu-link:hover {
    color: #fff !important;
    opacity: .72;
}

/* O painel sobrava 100px em altura porque quatro soluções em colunas de
   1/3 deixavam a quarta sozinha numa segunda linha. */
.header__main .main-menu ul li .mega-menu {
    padding: 22px 26px;
}

/* O painel é uma grelha normal do Bootstrap (três por linha em ecrãs
   grandes). Antes forçava tantas colunas quantos os serviços, o que
   espremia cada nome em 145px.
   O <li> do painel é `display:flex` com `justify-content: space-around`:
   a linha lá dentro não crescia e ficava centrada, com o painel vazio à
   esquerda. Cresce agora para a largura toda, e as soluções alinham com
   a margem do painel — como na versão em produção. */
.mega-menu > li > .row { flex: 1 1 100%; width: 100%; }

.megamenu-grid > div { display: flex; align-items: center; }

.megamenu-grid .megamenu-link { display: block; padding: .35rem 0; }

.footer-links,
.footer-legal { list-style: none; padding-left: 0; margin: 0; }

.footer-gradient {
    background: linear-gradient(90deg, #2b59d9 -10%, #00040a 300%);
    color: #fff !important;
}

.footer-gradient a,
.footer-gradient p { color: #fff; }

/* ---------------- Títulos ----------------

   O tema estiliza os títulos pela TAG dentro de cada bloco
   (`.banner-three__content h1`, `.section-header h5`, `h1`…`h6` genéricos).

   O HTML antigo usava as tags pelo aspecto que davam — a página inicial
   começava num <h4> e não tinha <h1> nenhum, o que é um defeito real de
   acessibilidade e de SEO. O HTML novo usa a hierarquia correcta
   (um <h1> por página, depois <h2>, <h3>), e é aqui que se devolve a cada
   tag o tratamento visual que o tema dava à tag original — mantendo o
   aspecto idêntico ao da versão em produção.

   Escala do tema (style.css):
     h1 3.5rem/700   h2 2.5rem/600   h3 1.75rem/600
     h4 1.25rem/600  h5 1rem/500     h6 .875rem/500
   ------------------------------------------------ */

/* Hero: era <h2>. O selector do tema `.banner-three__content h1` impõe
   90px — daí precisarmos de igual ou maior especificidade (0,2,1). */
.banner-three__content h1.banner-heading,
.banner-two__content h1.banner-heading,
.banner__content h1.banner-heading {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
}

@media (max-width: 991px) {
    .banner-three__content h1.banner-heading,
    .banner-two__content h1.banner-heading,
    .banner__content h1.banner-heading { font-size: 2rem; }
}

@media (max-width: 575px) {
    .banner-three__content h1.banner-heading,
    .banner-two__content h1.banner-heading,
    .banner__content h1.banner-heading { font-size: 1.75rem; }
}

/* Topo das páginas interiores e dos formulários: era <h4>, estilizado
   por `.banner__content h4` (18px/600). Sem isto o h1 apanha a regra
   genérica de 3.5rem e o banner fica com um título enorme. */
.banner__inner-page h1.page-title,
.banner__inner-page h1.page-title.fw-bold {
    font-size: 18px;
    line-height: 32px;
    letter-spacing: 1px;
}

/* Título de secção em estilo "sobre-título": era <h5> em `.section-header`
   (maiúsculas, pequeno). Reproduz `.section-header h5` do tema.

   Nota: no HTML antigo o peso destes títulos alternava entre 400 e 500,
   consoante o autor ter ou não colado um `style="font-weight:normal"`.
   Aqui fica 500 em todos — é o valor do próprio tema. */
.section-header h2.section-title--eyebrow {
    font-size: 1rem;
    font-weight: 500;
    padding-bottom: 20px;
    text-transform: uppercase;
    color: #fff;
}

/* Título de secção principal: era <h3>.
   `text-transform: none` é obrigatório: o tema aplica `capitalize` a
   qualquer h2 dentro de `.section-header`, o que punha maiúscula em
   todas as palavras do título. */
.section-header h2.section-title {
    font-size: 1.75rem;
    font-weight: 400;
    text-transform: none;
    color: #fff;
}

@media (max-width: 768px) {
    .section-header h2.section-title { font-size: 1.5rem; }
}

/* Cartões de três colunas: era <h4>. */
.process__content h3.card-title-light {
    font-size: 1.25rem;
    font-weight: 400;
    color: #fff;
}

/* Cartões do carrossel e da grelha de soluções: era <h5>.
   Não usar a classe .h5 do Bootstrap — são 1.25rem, enquanto o h5 do
   tema é 1rem; a diferença via-se ao lado da versão em produção. */
.case__content h3,
.service-card__body h3 {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
}

/* ---------------- Blocos ---------------- */

.checklist { list-style: none; padding: 0; margin-top: 1.25rem; }

.checklist li { color: #fff !important; font-weight: 300 !important; }

/* Um traço, como nas listas das páginas de solução. O visto sugere uma
   lista de verificação, que é linguagem de formulário. */
.checklist li {
    position: relative;
    padding-left: 1.6rem;
}

.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .78em;
    width: .75rem;
    height: 1px;
    background: var(--accent-on-blue);
}

.service-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
}

.service-card__body { padding: 1.5rem; }

.service-card__body i { color: var(--accent-on-blue); font-size: 1.5rem; margin-bottom: .75rem; display: block; }

.btn-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn-link-arrow:hover, .btn-link-arrow:focus-visible { color: #fff; text-decoration-thickness: 2px; }

.service-sidebar {
    padding: 1.5rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
}

/* Conteúdo rico das soluções.

   O corpo é escrito no painel, onde <h2> é a escolha natural para um
   subtítulo. No HTML antigo o mesmo texto era um <h5 class="text-uppercase">.
   Estas regras dão a qualquer título escrito pelo editor o aspecto que o
   tema já usava, sem lhe exigir conhecimento de CSS. */
.service-single__content h2 {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 15px;
}

.service-single__content h3 {
    font-size: 1.25rem;
    font-weight: 500;
    color: #fff;
    margin-top: 25px;
    margin-bottom: 12px;
}

.service-single__content ul { padding-left: 1.1rem; }

.service-single__content li { margin-bottom: .4rem; }

/* Títulos da barra lateral: eram <h5>. */
.service-sidebar h2 {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
}

.process__icon { color: var(--accent-on-blue); font-size: 1.75rem; }

/* ---------------- Fundo da página ----------------

   O tema é light-first: `--main-bg` é #ffffff e o `body` fica branco.
   O azul do site vem de `section { background: var(--gradient-bg) }`, ou
   seja, é pintado secção a secção. Qualquer área que nenhuma secção cubra
   — a margem acima do primeiro bloco, o espaço entre secções durante o
   scroll, o overscroll no fim da página — mostra branco.

   Pintar o body com o mesmo gradiente elimina a classe inteira destes
   artefactos, em vez de os ir tapando um a um.
   -------------------------------------------------- */

/* O fundo tem de estar no <html> e não só no <body>.

   Quando o utilizador chega ao topo e continua a puxar, o browser faz
   overscroll: o conteúdo desce, o header fixo fica onde está, e o que
   aparece nessa faixa é o fundo do *canvas*. O canvas herda o fundo do
   <html>; se este for transparente, herda o do <body> — mas apenas a
   cor, não a área de pintura do gradiente. Resultado: uma faixa branca
   acima do header sempre que se força o scroll para cima.

   A cor sólida no <html> cobre essa faixa e o gradiente no <body> mantém
   o aspecto do site. Sem `background-attachment: fixed` de propósito: em
   iOS obrigaria a repintar o gradiente a cada frame de scroll. */
html {
    background-color: #2b59d9;
}

body {
    background: var(--gradient-bg);
    min-height: 100vh;
}

/* ---------------- Correcção de contraste ----------------

   O tema é "light-first": `:root` define `--sub-bg: #f3f7fb` e só o
   activa em escuro quando existe `data-theme="dark"` no <html> — coisa
   que este site nunca definiu. Resultado: as secções `.sub-bg` pintavam
   um cinzento quase branco por cima do gradiente azul, e como o texto
   dessas secções é branco ficava com contraste de 9 em 255: invisível.

   O defeito existe também na versão em produção; é corrigido aqui em vez
   de se remover a classe, para que qualquer bloco novo criado no painel
   fique automaticamente correcto.
   -------------------------------------------------------- */

.sub-bg {
    background-color: rgba(255, 255, 255, .045);
}

/* ---------------- Páginas de erro ---------------- */

.error-page {
    display: flex;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(160deg, #00040a, #0b1b3f);
}

.error-code {
    font-size: clamp(4rem, 12vw, 8rem);
    font-weight: 700;
    line-height: 1;
    margin: 0;
    color: #2b59d9;
}

/* Respeita a preferência do sistema por menos movimento. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ---------------- Faixa de pré-visualização ---------------- */

.preview-bar {
    position: sticky;
    top: 0;
    z-index: 1500;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: center;
    padding: .6rem 1rem;
    font-size: .875rem;
    color: #43290a;
    background: #fde68a;
}

.preview-bar__action {
    padding: .25rem .75rem;
    font-size: .8rem;
    font-weight: 600;
    color: #43290a;
    background: #fff;
    border: 1px solid #d9a441;
    border-radius: 4px;
    cursor: pointer;
}

.preview-bar__action:hover { background: #fffbeb; }

/* O botão do seletor de idioma tem de parecer um item de menu. */
/* À altura toda do cabeçalho, como os restantes itens do menu: alinha o
   painel e dá ao rato a mesma área de aproximação. */
.language-switcher__toggle {
    padding: 40px 0;
    color: inherit;
    font: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Texto alinhado à esquerda.

   O site usava `text-justify` em quase todos os parágrafos. Em colunas
   estreitas o alinhamento justificado abre "rios" de espaço entre
   palavras e é mais difícil de ler — sobretudo para quem tem dislexia.
   Não há hifenização automática em português no browser que o compense. */
.faq__item p,
.banner-three__content p,
.section-header p { text-align: left; }

/* Sobre-título acima do título de secção. Era um <h5>, que criava um
   salto na hierarquia de cabeçalhos; o aspecto mantém-se. */
.section-eyebrow {
    margin: 0 0 .35rem;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #e3e3e3;
}

/* Cartões de três colunas: o nível da tag varia com o contexto, o
   tamanho não. */
.process__content h2.card-title-light,
.process__content h3.card-title-light {
    font-size: 1.25rem;
    font-weight: 400;
    color: #fff;
}

/* ---------------- Comportamento em ecrãs pequenos ----------------

   A forma decorativa do topo é posicionada em absoluto e transbordava
   38–48px em tablet, criando scroll horizontal. Em ecrãs pequenos não
   acrescenta nada — é decoração — e sai.
   --------------------------------------------------------------- */

@media (max-width: 991px) {
    .banner-three__shape-right { display: none; }
}

/* O carrossel transborda por desenho (é assim que um carrossel funciona),
   mas o transbordo não pode chegar ao documento e criar scroll lateral. */
body { overflow-x: hidden; }

.case-area,
.brand-three-area { overflow-x: clip; }

/* Alvos de toque com pelo menos 44px, a recomendação das WCAG para o
   dedo médio. Os ícones sociais e o menu móvel ficavam abaixo disso. */
@media (max-width: 991px) {
    .social-icon a,
    .sidebar-area .info a,
    .bars button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .footer-links a,
    .footer-legal a {
        display: inline-block;
        padding: .35rem 0;
    }
}

/* O botão de WhatsApp tapava conteúdo em ecrãs baixos. */
@media (max-height: 620px) {
    .btn-whatsapp { display: none; }
}

/* ---------------- Proporção das imagens ----------------

   As imagens levam os atributos `width` e `height` para o browser
   reservar o espaço certo antes de a imagem chegar — sem isso o texto
   salta durante o carregamento.

   Mas o tema define `width: 100%` sem `height: auto`. Nesse caso a
   largura vem do CSS e a altura fica presa ao valor do atributo: uma
   fotografia de 3063×4044 mostrada a 438px de largura era desenhada com
   4044px de altura. A página inicial passou de 5238px para 15414px.

   `height: auto` devolve a proporção e mantém a reserva de espaço.
   ------------------------------------------------------- */

img[width][height] {
    height: auto;
}

/* ================================================================
   Contraste: o azul da marca como fundo de texto
   ================================================================

   `#3c72fc` com texto branco por cima dá 4.20:1. O mínimo da WCAG AA
   para texto normal é 4.5:1, por isso *todo* o texto do site falhava
   por pouco — cerca de 400 nós, incluindo os botões primários.

   A correcção é escurecer um passo o azul quando ele serve de FUNDO:
   `#2f62d8` dá 5.44:1. A cor continua a ser a mesma família; o que
   muda é só a luminosidade. Onde o azul serve de PRIMEIRO PLANO
   (ícones, links) nenhum tom azul chega aos 4.5 sobre este fundo —
   nesses sítios o texto passa a branco e os ícones a `#cfe0ff`, que
   cumpre os 3:1 exigidos a elementos não textuais.
   ---------------------------------------------------------------- */

:root {
    --primary-color: #2f62d8;
    --primary10: rgba(47, 98, 216, .1);
    --gradient-bg: linear-gradient(90deg, #2f62d8 -10.59%, #00060c 300.59%);

    /* Único tom de acento legível sobre o azul (4.08:1 — acima dos 3:1
       exigidos a ícones e outros elementos não textuais). */
    --accent-on-blue: #cfe0ff;
}

/* A classe utilitária do tema pinta ícones E texto. Sobre o azul, o
   azul original ficava invisível (1.30:1). */
.primary-color { color: var(--accent-on-blue) !important; }

/* ...mas quando é texto a sério precisa dos 4.5:1, que só o branco dá. */
span.primary-color, .case__content .primary-color { color: #fff !important; }

/* O cinzento `#585858` do tema é pensado para fundo branco. Sobre o
   azul dá 1.70:1: era o defeito mais grave do site depois do select. */
.service-card p,
.service-card__body p,
.language-switcher > a,
.language-switcher__toggle { color: #fff; }

/* Branco a 80% sobre o azul dá 4.10:1 — fica abaixo do mínimo. A 90%
   dá 4.73:1. Os selectores acompanham a especificidade do tema, que
   aplica o 0.8 em `.footer__item p` e em `.footer-links li a`. */
.footer-area p,
.footer__item p,
.footer__item .footer-links li a,
.footer__item .footer-contact li a,
.footer__item a,
.footer__copyright p,
.footer__copyright a,
.footer-legal li a { opacity: .9; }

/* O botão "Escolher ficheiro" é branco com texto preto. O tema tem
   `.custom-file-button { color: #000 !important }`, mas o `!important`
   só vale para o próprio elemento: o <span> lá dentro tem regra
   própria (`.banner__inner-page span { color: var(--white) }`) e
   ganhava — texto branco sobre botão branco. */
.custom-file-button,
.custom-file-button span { color: #000 !important; }

.file-note { color: rgba(255, 255, 255, .9); }

.section-eyebrow { color: #fff; }

/* ================================================================
   Maiúsculas iniciais em texto corrido
   ================================================================

   O tema põe `text-transform: capitalize` em `.banner__inner-page`,
   que é o invólucro de secção usado pelo formulário de contacto, pelas
   páginas de serviço, pelas carreiras e pelas duas páginas legais.
   Sendo herdável, apanhava parágrafos e listas inteiras: saía
   "Não É Preciso Ter O Projecto Definido" e "Geral@Crimake.Com" — e a
   política de privacidade inteira em Title Case.

   Em português a caixa alta inicial pertence a títulos e botões, não a
   frases. Reposto aqui só para o texto corrido.
   ---------------------------------------------------------------- */

.banner__inner-page p,
.banner__inner-page li,
.banner__inner-page dd,
.banner__inner-page dt,
.banner__inner-page td,
.banner__inner-page blockquote,
.banner__inner-page address,
.banner__inner-page option,
/* O aviso de sucesso dos formulários é uma <div> com texto directo, sem
   <p> por dentro, por isso escapava à lista acima e saía "Mensagem
   Recebida. Entramos Em Contacto Em Breve.". As etiquetas seguem a mesma
   regra: "Endereço de e-mail", não "Endereço De E-Mail". */
.banner__inner-page .alert,
.banner__inner-page label { text-transform: none; }

/* Os títulos escritos no painel também: em português "Onde estamos" não
   leva maiúscula no "estamos". Os títulos do próprio tema — as
   sobrancelhas em maiúsculas e o <h1> da página — ficam como estão. */
.rich-text :is(h2, h3, h4, h5, h6) { text-transform: none; }

/* As sobrancelhas de secção são maiúsculas de propósito. */
.banner__inner-page p.section-eyebrow { text-transform: uppercase; }

/* ================================================================
   Selects nativos
   ================================================================

   O `nice-select` deixou de correr nos formulários do site (ver
   script.js). Estas regras dão ao <select> nativo o mesmo aspecto dos
   restantes campos, e às opções o contraste que o painel branco do
   sistema exige.
   ---------------------------------------------------------------- */

select.form-control-site {
    height: auto;
    line-height: 1.5;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 14px 14px;
    cursor: pointer;
}

/* O painel de opções é desenhado pelo sistema operativo, sempre sobre
   fundo claro — daí o texto escuro. */
select.form-control-site option,
select.form-control-site optgroup {
    color: #12131a;
    background-color: #fff;
    text-transform: none;
}

/* ================================================================
   Área de toque no menu móvel
   ================================================================
   O "+" que abre os submenus media 30x36. O mínimo recomendado é
   44x44 (WCAG 2.5.8 pede 24x24; 44 é a recomendação da Apple e da
   Google, e é o que faz a diferença no polegar).
   ---------------------------------------------------------------- */

.mean-container .mean-nav ul li a.mean-expand {
    width: 44px;
    height: 44px;
    line-height: 44px;
    padding: 0 !important;
    text-align: center;
    /* O tema encosta-o ao topo com `top: 7px`, medida pensada para um
       botão de 15px de altura. Centrá-lo com `top: 50%` também não serve:
       assim que o submenu abre, o <li> cresce e o botão descia para o meio
       da lista. Fica alinhado com a primeira linha, que tem 47px. */
    top: 2px;
    transform: none;
    border-radius: 6px;
    border-top: 0 !important;
}

/* ================================================================
   O menu principal sem JavaScript
   ================================================================

   O tema trazia `<nav style="display:none">` na marcação: o meanmenu
   torna-o a mostrar no arranque. Se o JavaScript não correr — desligado,
   bloqueado, ou um erro anterior na cadeia de scripts — a navegação
   inteira ficava invisível e o site só era navegável pelo rodapé.

   Agora o <nav> nasce visível. Quem tem JavaScript recebe a classe `js`
   no <html> e o menu de secretária é escondido no telemóvel, onde o
   meanmenu o substitui; o próprio meanmenu volta a mostrá-lo (por estilo
   em linha, que ganha a esta regra) acima do ponto de corte.
   ---------------------------------------------------------------- */

@media (max-width: 991px) {
    .js .main-menu > nav { display: none; }
}

/* ================================================================
   Escala de títulos do conteúdo escrito no painel
   ================================================================

   Quem escreve no painel usa <h2> e <h3> — é o natural. O tema dá-lhes
   40px e 28px, tamanhos pensados para títulos de secção a toda a
   largura. O resultado era "Onde Estamos" em 40px por cima de
   "Luanda, Angola", e uma política de privacidade inteira com títulos
   de secção maiores do que o <h1> da própria página (18px).

   A escala abaixo é a que o resto do site já usa: 28 para secção,
   20 para subsecção, 18 para o nível abaixo.
   ---------------------------------------------------------------- */

.rich-text h2 {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: .5rem;
}

.rich-text h3 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    margin-top: 1.5rem;
    margin-bottom: .4rem;
}

.rich-text h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: .35rem;
}

/* O tema pinta os títulos com `--heading-color` (#0f0d1d), pensado para
   fundo branco. O <h2> escapava por herdar de um `.text-white`, mas o
   <h3> e o <h4> saíam quase pretos sobre o azul. Passavam a auditoria
   só porque, a 28px, contavam como "texto grande" (limiar 3:1); ao
   descer para 18px a falha ficou à vista. */
.rich-text :is(h2, h3, h4, h5, h6),
.footer__item .footer-contact .info h3 { color: #fff; }

/* O primeiro título de um bloco não precisa de afastamento extra. */
.rich-text > :is(h2, h3, h4):first-child { margin-top: 0; }

.rich-text p:last-child { margin-bottom: 0; }

/* Títulos das colunas do rodapé: eram 40px e 28px, maiores do que
   qualquer título das páginas que estão por cima deles. */
.footer__item .footer-title { font-size: 1.125rem; font-weight: 600; }

.footer__item .footer-contact .info h3 { font-size: 1rem; font-weight: 600; margin-bottom: .15rem; }

/* A imagem que ilustra cada solução. */
.service-single__image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

/* ================================================================
   Listas e maiúsculas no conteúdo das soluções
   ================================================================

   O tema põe `list-style: none` em todos os <li>: as listas escritas no
   painel saíam como parágrafos indentados, sem marcador nenhum. E o
   `text-transform: capitalize` continuava a apanhar os títulos da barra
   lateral e os botões — "Pedir Um Plano De Suporte". Em português a
   caixa alta inicial é para nomes próprios, não para cada palavra.
   ---------------------------------------------------------------- */

.service-single__content ul,
.rich-text ul {
    list-style: none;
    padding-left: 0;
}

.service-single__content ul > li,
.rich-text ul > li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .45rem;
}

/* Um traço, não um visto. O visto sugere uma lista de verificação, que
   é a linguagem de um formulário e não a de uma página que apresenta
   trabalho. O traço deixa a lista ler-se como um índice. */
.service-single__content ul > li::before,
.rich-text ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .78em;
    width: .75rem;
    height: 1px;
    background: var(--accent-on-blue);
}

/* Listas ordenadas mantêm a numeração. */
.service-single__content ol > li::before,
.rich-text ol > li::before { content: none; }

.service-single__content ol,
.rich-text ol { padding-left: 1.25rem; }

.service-single__content ol > li,
.rich-text ol > li { list-style: decimal; margin-bottom: .45rem; }

/* Botões e títulos da barra lateral em caixa normal. */
.btn-one,
.read-more-btn,
.service-sidebar h2,
.service-sidebar h3 { text-transform: none; }

/* ================================================================
   Item de menu que só abre o submenu
   ================================================================
   "Soluções" deixou de ter página própria. O item é agora um <button>
   — focável e anunciado como botão — pintado como os restantes itens.
   O `:focus-within` abre o painel a quem navega pelo teclado, sem
   depender do rato.
   ---------------------------------------------------------------- */

/* O <button> não herda nada do <a>: `color: inherit` trazia o #585858 do
   corpo e o peso normal do agente do utilizador, e sem o padding vertical
   a área de toque ficava com um quarto da altura dos outros itens.
   Os valores abaixo são os que o tema aplica aos <a> irmãos. */
.main-menu nav > ul > li > .menu-parent {
    padding: 40px 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    color: #fff;
    cursor: pointer;
}

.main-menu nav > ul > li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* Na gaveta do telemóvel o meanmenu clona o <nav>, mas a folha de
   estilos dele só conhece <a>: os dois <button> ("Soluções" e o selector
   de idioma) não recebiam o `float`, a largura, o padding nem a linha de
   separação. A consequência era a linha ficar com zero de altura, o
   rótulo deslocado para fora da coluna, herdando o cinzento do tema, e o
   "+" a flutuar ao lado. Estes valores são exactamente os que o meanmenu
   dá aos <a>. */
.mean-container .mean-nav ul li > .menu-parent,
.mean-container .mean-nav ul li > .language-switcher__toggle {
    /* `.sidebar-area button` no tema é a regra do botão de fechar da
       gaveta, mas apanha qualquer <button> lá dentro: punha estes dois
       em `position: absolute`, o que os tirava do fluxo, deixava a linha
       com zero de altura e deslocava o rótulo para fora da coluna. */
    position: static;
    top: auto;
    right: auto;
    /* A mesma regra do botão de fechar dá-lhes 40x40, `line-height: 40px`,
       `font-size: 20px` e `border-radius: 50%`. O último era o mais
       visível: numa caixa de 270x47 o raio a 50% desenha uma elipse, e a
       linha de separação saía em arco ao lado do rótulo. */
    height: auto;
    line-height: 1.6;
    font-size: inherit;
    border-radius: 0;
    /* E `.sidebar-area button:hover` roda o botão de fechar 90 graus. Num
       ecrã táctil o toque deixa o elemento em :hover, por isso o rótulo
       "Soluções" ficava de lado, na vertical, a flutuar sobre a lista. */
    transform: none;
    transition: none;
    display: block;
    float: left;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .25);
    background: none;
    font: inherit;
    text-align: left;
    color: #fff;
    cursor: pointer;
}

/* ================================================================
   Anexar o currículo
   ================================================================
   O tema desenha um botão bonito (.custom-file-button dentro de um
   <label>) mas nunca esconde o <input type="file"> a que o label
   pertence — apareciam dois botões de upload, o desenhado e o nativo
   do browser, um por cima do outro.

   O input fica acessível: `sr-only` em vez de `display:none`, para
   continuar a ser alcançável pelo teclado e anunciado pelo leitor de
   ecrã. O `:focus-within` desenha o foco no botão visível.
   ---------------------------------------------------------------- */

.file-upload-container input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.custom-file-wrapper { cursor: pointer; }

.file-upload-container:focus-within .custom-file-button {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Caixa alta inicial em cada palavra não pertence a português corrido. */
.file-upload-label,
.custom-file-button,
.custom-file-button span,
.file-name,
.file-note { text-transform: none; }

.file-upload-label { display: block; font-size: 1rem; font-weight: 600; margin-bottom: .6rem; }

.file-note { font-size: .85rem; margin-top: .4rem; }

/* O :hover tem de ser anulado explicitamente: a regra do tema é
   `.sidebar-area button:hover`, que não é vencida por uma declaração no
   estado normal. */
.mean-container .mean-nav ul li > .menu-parent:hover,
.mean-container .mean-nav ul li > .menu-parent:focus,
.mean-container .mean-nav ul li > .language-switcher__toggle:hover,
.mean-container .mean-nav ul li > .language-switcher__toggle:focus {
    transform: none;
    background: none;
}

/* O painel de idiomas ficava com o azul-escuro do tema por cima do azul
   do painel. Passa a acompanhar o mega-menu: mesmo fundo, texto branco,
   e o idioma activo destacado. */
/* O <li> do selector é `position: relative`, ao contrário do de
   "Soluções" que é estático. O `top: 105px` do tema contava por isso a
   partir do próprio <li> (que começava a meio do cabeçalho) e o painel
   caía 40px abaixo do de "Soluções". Com o botão à altura toda do
   cabeçalho, `100% + 9px` põe os dois à mesma distância. */
.header__main .main-menu ul li.language-switcher .sub-menu {
    top: calc(100% + 9px);
    /* É o último item do menu: ancorado à esquerda, o painel saía para
       fora do ecrã pela direita. */
    left: auto;
    right: 0;
}

.language-switcher .sub-menu {
    min-width: 190px;
    padding: .5rem 0;
}

/* O tema separa os itens com `#e3e3e3`, que sobre o azul do painel lê-se
   como um risco branco. A cadeia completa é precisa para vencer
   `.header__main .main-menu ul li .sub-menu li:not(:last-child)`. */
.header__main .main-menu ul li.language-switcher .sub-menu li:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.header__main .main-menu ul li.language-switcher .sub-menu li:last-child {
    border-bottom: 0;
}

.language-switcher .sub-menu li a {
    display: block;
    padding: .6rem 1.25rem;
    text-transform: none;
}

.language-switcher .sub-menu li a:hover,
.language-switcher .sub-menu li a:focus-visible {
    background: rgba(255, 255, 255, .12);
}

.language-switcher .sub-menu li a[aria-current="true"] {
    font-weight: 600;
    background: rgba(255, 255, 255, .08);
}

/* ================================================================
   Pontos decorativos
   ================================================================
   O `about-two-dot.png` do tema tem pontos quase pretos, desenhados
   para o fundo branco do modelo original. Sobre o azul do site ficavam
   invisíveis. O filtro pinta-os de branco sem precisar de um segundo
   ficheiro, e a opacidade mantém-nos decorativos em vez de os pôr a
   competir com o texto ao lado.
   ---------------------------------------------------------------- */

.dots img {
    filter: brightness(0) invert(1);
    opacity: .5;
}

/* ================================================================
   Painel de "Soluções"
   ================================================================

   Duas metades separadas por uma linha vertical: à esquerda uma frase
   que enquadra a oferta, à direita as soluções em duas colunas. O texto
   da esquerda vem das definições (grupo "Menu"), para poder ser
   reescrito no painel sem tocar no código.

   O fundo é um azul mais escuro do que o da página. Sem isso o painel
   confundia-se com o que está por baixo e não se percebia onde acabava.
   Branco por cima dá 9.3:1, e o azul de destaque 4.0:1 — acima dos 3:1
   exigidos ao tamanho a que o título é desenhado.
   ---------------------------------------------------------------- */

.header__main .main-menu ul li .sub-menu.mega-menu {
    background-color: #1c3f9e;
    padding: 45px 0;
}

.megamenu-grid { align-items: stretch; }

.megamenu-intro {
    padding-right: 2.5rem;
    border-right: 1px solid rgba(255, 255, 255, .18);
}

/* A linha corre de topo a fundo do painel. Sem isto parava onde o
   conteúdo acaba e ficava com ar de traço cortado a meio. O par
   margem negativa + padding anula o espaçamento vertical do painel
   para a borda, sem mexer na posição do texto. */
@media (min-width: 992px) {
    .megamenu-intro {
        margin-top: -45px;
        margin-bottom: -45px;
        padding-top: 45px;
        padding-bottom: 45px;
    }
}

.megamenu-intro__heading {
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.28;
    color: #fff;
    margin-bottom: .75rem;
}

.megamenu-intro__lead { color: #7fa8ff; }

.megamenu-intro__text {
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .75);
    margin-bottom: 0;
}

.megamenu-links { padding-left: 2.5rem; }

/* Sem isto os dois blocos ficam colados ao topo e a linha vertical
   parece cortada a meio. */
@media (min-width: 992px) {
    .megamenu-intro, .megamenu-links { display: flex; flex-direction: column; justify-content: center; }
}

/* O painel sangra de margem a margem, como no modelo que serviu de
   referência. Está posicionado dentro de um `.container`, por isso é
   preciso puxá-lo para o centro do ecrã e devolver-lhe a largura toda;
   o `.megamenu-container` lá dentro repõe o alinhamento do conteúdo.

   A largura vem de `100%` do <html> em vez de `100vw`, porque `100vw`
   conta a barra de deslocamento e criava deslocamento horizontal. */
@media (min-width: 992px) {
    .header__main .main-menu ul li .sub-menu.mega-menu {
        left: 50%;
        right: auto;
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        transform: none;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ================================================================
   Sobrancelha de secção e destaque no título
   ================================================================
   A etiqueta acima do título ganha um traço a seguir, e o título pode
   destacar uma parte na cor de acento. É o que dá a uma página de
   serviço o ar de apresentação em vez de folheto.
   ---------------------------------------------------------------- */

.section-eyebrow {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
    letter-spacing: .06em;
}

.section-eyebrow::after {
    content: "";
    flex: 0 0 3rem;
    height: 1px;
    background: var(--accent-on-blue);
}

/* A parte destacada do título. O editor marca-a com asteriscos.

   O destaque é por peso e não por cor. Sobre fundo escuro, um azul mais
   claro do que o branco à volta lê-se como texto secundário, não como
   ênfase, e ainda por cima com menos contraste. O branco é aqui a cor
   mais forte que existe, por isso é o peso que faz o trabalho. */
.heading-accent {
    color: #fff;
    font-weight: 700;
}

/* ================================================================
   Estado de passagem do rato nas ligações
   ================================================================

   O tema pinta as ligações de `var(--primary-color)` no hover, o que
   funcionava quando o fundo era claro. Ao escurecer esse azul para o
   texto branco cumprir os 4.5:1, a cor de hover passou a ser exactamente
   a do fundo da página: as ligações do menu e do rodapé desapareciam
   debaixo do cursor (1.09:1).

   Sobre fundo escuro não há cor mais forte do que o branco que já lá
   está, por isso o sinal passa a ser o sublinhado. Os botões ficam como
   estão: enchem-se de `#0f0d1d` com texto branco, 19:1.
   ---------------------------------------------------------------- */

.header__main .main-menu ul li a:hover,
.header__main .main-menu ul li a:focus-visible,
.footer-links li a:hover,
.footer-links li a:focus-visible,
.footer-legal li a:hover,
.footer-legal li a:focus-visible,
.footer__item .footer-contact li a:hover,
.footer__item .footer-contact li a:focus-visible {
    color: #fff !important;
    text-decoration: underline;
    text-underline-offset: 4px;
    opacity: 1;
}

/* No painel de soluções o sublinhado seria pesado numa grelha; ali o
   sinal é a opacidade, que já estava. */
.header__main .main-menu ul li .sub-menu li a.megamenu-link:hover,
.header__main .main-menu ul li.language-switcher .sub-menu li a:hover {
    text-decoration: none;
}

/* O botão dentro do conteúdo de uma solução está num bloco de texto
   rico, por isso apanhava a cor genérica de hover das ligações e o texto
   passava de branco a azul sobre o preenchimento escuro — 3.5:1, quando
   os restantes botões ficam a 19:1. O texto de um botão primário é
   sempre branco, em qualquer estado. */
.btn-one,
.btn-one:hover,
.btn-one:focus,
.btn-one:focus-visible,
.btn-one:active,
.btn-one:hover i,
.btn-one:hover span {
    color: #fff !important;
}

/* Os dois itens de menu que são <button> não tinham qualquer reacção ao
   rato, ao contrário dos <a> irmãos ao lado. */
.main-menu nav > ul > li > .menu-parent:hover,
.main-menu nav > ul > li > .menu-parent:focus-visible,
.language-switcher__toggle:hover,
.language-switcher__toggle:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* O botão de anexar o currículo é branco sobre branco em ambos os
   estados: sem um sinal, não se percebe que reage. */
.custom-file-wrapper:hover .custom-file-button,
.file-upload-container:focus-within .custom-file-button {
    background-color: #e8e8e8;
}

/* O botão flutuante do WhatsApp não dava qualquer sinal de ser
   carregável. Um ligeiro aumento e uma sombra chegam; a cor é a da
   marca e não deve mudar. */
.btn-whatsapp {
    transition: transform .18s ease, box-shadow .18s ease;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

@media (prefers-reduced-motion: reduce) {
    .btn-whatsapp:hover,
    .btn-whatsapp:focus-visible { transform: none; }
}


/* ================================================================
   Quebras de linha no conteúdo, em ecrãs pequenos
   ================================================================

   O tema esconde todos os <br> abaixo de 991px:

       @media (max-width: 991px) { br { display: none; } }

   Faz sentido para as quebras decorativas dos títulos grandes, que em
   ecrã estreito partiriam a frase em sítios absurdos. Mas apanhava
   também as quebras com significado escritas no painel: na página de
   contactos, o telefone e o rótulo seguinte saíam colados —
   "+244 972 686 303E-mail:" — e a morada, o telefone e o e-mail
   corriam todos na mesma linha.

   Reposto no texto corrido; os títulos do tema ficam como estão.
   ---------------------------------------------------------------- */

@media (max-width: 991px) {
    :is(p, li, dd, dt, td, address, blockquote, figcaption) br,
    .rich-text br { display: inline; }
}

/* Com as quebras de volta, os três blocos da página de contactos ficam
   legíveis mas ainda apertados uns contra os outros em ecrã estreito. */
@media (max-width: 767px) {
    .rich-text h2 { margin-top: 2.5rem; }
    .rich-text h3 { margin-top: 2rem; }
}