/* Gerado por CODING-U3B 0.1 em 2026-08-12 00:04 — não editar à mão. */

:root {
    color-scheme: dark;

    /* Fundo do site, e os tons neutros que saem dele. Escolhida uma cor
       escura, o gerador afasta os tons para o branco em vez do preto — é o
       que permite pegar num cliente com site de fundo preto sem lhe mudar a
       identidade. */
    --cor-fundo:        #000000;
    --cor-texto:        #ebebeb;
    --cor-texto-suave:  #8c8c8c;
    --cor-fundo-alt:    #292929;
    --cor-superficie:   #050505;
    --cor-borda:        #424242;

    --cor-principal:  #d1a95d;
    --cor-secundaria: #212529;
    --cor-destaque:   #fef1c8;

    /* Ligação ao Bootstrap 5.3.8 */
    --bs-primary:     var(--cor-principal);
    --bs-primary-rgb: 209, 169, 93;
    --bs-link-color:  var(--cor-principal);
    --bs-link-hover-color: var(--cor-secundaria);
    --bs-body-color:  var(--cor-texto);
    --bs-body-bg:     var(--cor-fundo);
    --bs-border-color: var(--cor-borda);
    --bs-secondary-color: var(--cor-texto-suave);
}

/* --------------------------------------------------------------- Tipografia */

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    padding-top: var(--altura-header, 0);
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

/* Salto suave para as âncoras, com folga para o header fixo não tapar
   o topo da secção de destino. */
html {
    scroll-behavior: smooth;

    /* Folga para o cabeçalho fixo não tapar o topo da secção de destino.
       Variável própria e não a --altura-header: essa é usada no padding do
       corpo, e mexer-lhe abriria um vazio no topo da página. */
    scroll-padding-top: var(--u3b-folga-salto, 90px);
}

/* A mesma folga, agora do lado da secção. São dois mecanismos diferentes: o
   scroll-padding acima serve a navegação por endereço, e o scroll-margin
   aqui serve o scrollIntoView do menu. Sem este, o menu levava a secção até
   ao topo e o cabeçalho fixo tapava-lhe o título. */
section[id] {
    scroll-margin-top: var(--u3b-folga-salto, 90px);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

h1, h2, h3, h4 { font-weight: 600; }

/* Nada deve provocar deslocamento lateral. Basta um elemento a passar da
   margem para o telemóvel ganhar uma barra horizontal e o site parecer mal
   feito — e o culpado é quase sempre invisível.

   ATENÇÃO: aqui usa-se `clip` e não `hidden`. O `overflow: hidden` num
   antepassado quebra o `position: sticky`, e era isso que impedia o menu
   de ficar fixo no topo. O `clip` corta na mesma e não estraga o sticky. */
/* O clip está nas SECÇÕES e não no body.

   Estava no body e cortava o menu lateral: um elemento de posição fixa que
   entra deslizando de fora do ecrã é cortado por um antepassado com clip,
   e o menu nunca chegava a aparecer.

   Nas secções resolve o mesmo problema — o deslocamento lateral vem das
   animações de entrada, que empurram elementos para fora da margem — sem
   apanhar nada que viva por cima da página. */
.seccao,
.u3b-hero {
    overflow-x: clip;
}

img, iframe, video { max-width: 100%; }

/* Em ecrãs estreitos o texto encostava às margens. O !important é para
   ganhar ao Bootstrap, que define a margem do container com variáveis. */
@media (max-width: 767.98px) {
    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    .seccao { padding: 2.5rem 0; }

    /* Rodapé ao centro: em coluna única, quatro blocos alinhados à esquerda
       ficam a flutuar sem nada que os segure desse lado. */
    .u3b-rodape {
        padding: 2.5rem 0 1rem;
        text-align: center;
    }

    .u3b-rodape .col-md-2,
    .u3b-rodape .col-md-3,
    .u3b-rodape .col-md-4 {
        margin-bottom: 2rem;
    }

    .u3b-rodape .d-flex {
        justify-content: center;
    }

    .u3b-rodape img {
        margin-left: auto;
        margin-right: auto;
    }

    /* Os contactos têm ícone antes do texto: ao centro, o par inteiro */
    .u3b-rodape li {
        justify-content: center;
    }

    .u3b-rodape-legal { padding: 1rem 0; }
}

/* ------------------------------------------------- Tiras no telemóvel */

/* Uma grelha que, em ecrã estreito, passa a tira deslizável com o dedo.
   Usa o deslocamento nativo do sistema — nenhum JavaScript imita bem a
   inércia de um dedo, e o do telemóvel já a tem de origem. */
@media (max-width: 767.98px) {
    .u3b-tira-mobile {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding: 0 1.25rem;
        padding-bottom: .5rem;

        /* A barra de deslocamento não se mostra: o encaixe já diz que há
           mais para o lado. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .u3b-tira-mobile::-webkit-scrollbar { display: none; }

    .u3b-tira-mobile > * {
        flex: 0 0 78%;
        max-width: 78%;
        scroll-snap-align: center;
    }

    /* A fatia que fica à vista do cartão seguinte é o que diz, sem palavras,
       que a tira continua. */
    .u3b-tira-mobile > *:last-child {
        margin-right: 11%;
    }
}

.seccao { padding: 4rem 0; }

/* Alternância de fundo. Quem decide é o gerador, que conhece a ordem dos
   blocos na página — não o bloco, que não sabe quem vem antes dele. */
.u3b-fundo-claro { background: var(--cor-fundo-alt); }

.seccao-titulo {
    margin-bottom: 2.5rem;
    text-align: center;
}

/* ------------------------------------------------------------------ Botões */

.btn-primary {
    --bs-btn-bg: var(--cor-principal);
    --bs-btn-border-color: var(--cor-principal);
    --bs-btn-hover-bg: var(--cor-secundaria);
    --bs-btn-hover-border-color: var(--cor-secundaria);
}

.btn-destaque {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cor-destaque);
    --bs-btn-border-color: var(--cor-destaque);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cor-secundaria);
    --bs-btn-hover-border-color: var(--cor-secundaria);
}

/* ------------------------------------------------------------------ Header */

.u3b-header {
    background: var(--cor-superficie);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.u3b-header .navbar-brand img {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;   /* com a largura travada, não se deforma */
}

/* Num ecrã estreito, um logótipo largo empurrava o botão do menu para a
   linha de baixo. Guardam-se-lhe 25% para o botão. */
@media (max-width: 991.98px) {
    .u3b-header .navbar-brand {
        max-width: 75%;
        margin-right: 0;
    }
}

/* As cores do menu vinham das variáveis do Bootstrap, que seguem o modo de
   cor do BROWSER — num fundo escuro com o browser em modo claro, o menu
   ficava escuro sobre escuro e desaparecia. Aqui ficam presas às nossas. */
.u3b-header {
    --bs-navbar-color: var(--cor-texto);
    --bs-navbar-hover-color: var(--cor-principal);
    --bs-navbar-active-color: var(--cor-principal);
    --bs-navbar-brand-color: var(--cor-texto);
    --bs-navbar-toggler-border-color: var(--cor-borda);
    --bs-navbar-toggler-icon-bg: none;
}

.u3b-header .nav-link {
    color: var(--cor-texto);
}

.u3b-header .nav-link:hover,
.u3b-header .nav-link:focus {
    color: var(--cor-principal);
}

/* O botão do menu de telemóvel usa um ícone e não a imagem de fundo do
   Bootstrap, portanto basta herdar a cor. */
.u3b-header .navbar-toggler {
    color: var(--cor-texto);
    border-color: var(--cor-borda);
    padding: .25rem .6rem;
    font-size: 1.4rem;
    line-height: 1;
}

/* A casa é só ícone: sem texto, o alinhamento vertical fica melhor com
   um pouco mais de tamanho. */
.u3b-nav-casa i {
    font-size: 1.15rem;
    line-height: 1;
    vertical-align: -.1em;
}

.u3b-header .nav-link.ativo {
    color: var(--cor-principal);
    font-weight: 600;
}

/* ------------------------------------------------- Menu de telemóvel */

.u3b-menu-mobile {
    /* Largura pelo conteúdo, não pelos 400px do Bootstrap */
    width: auto;
    min-width: 16rem;
    max-width: 84vw;

    /* Altura pelo conteúdo: com quatro entradas, um painel do tamanho do
       ecrã deixava uma coluna vazia por baixo delas. */
    top: 0;
    bottom: auto;
    height: auto;
    max-height: 100dvh;
    overflow-y: auto;
    border-bottom-left-radius: 1rem;

    /* Translúcido, para se ver que a página continua por baixo */
    background: color-mix(in srgb, var(--cor-fundo) 90%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    color: var(--cor-texto);
    border-left: 1px solid var(--cor-borda);
    box-shadow: -8px 0 32px rgba(0, 0, 0, .35);
}

/* Onde o color-mix não existe, fica opaco em vez de invisível */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .u3b-menu-mobile { background: var(--cor-fundo); }
}

.u3b-menu-mobile .offcanvas-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cor-borda);
}

.u3b-menu-mobile .offcanvas-title {
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

/* O X do Bootstrap é um desenho preto. Num fundo escuro tem de ser
   invertido, senão é uma mancha que não se vê. O data-bs-theme na etiqueta
   html já o faz — isto é a rede para o caso de ele não chegar. */
.u3b-menu-mobile .btn-close {
    opacity: .7;
}

[data-bs-theme="dark"] .u3b-menu-mobile .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.u3b-menu-mobile .offcanvas-body {
    padding: .5rem 0 1.25rem;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------- As entradas */

.u3b-menu-lista {
    display: flex;
    flex-direction: column;
}

/* Linha inteira clicável, com altura de dedo — 48px é a medida mínima que
   uma pessoa acerta sem olhar. */
.u3b-menu-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 48px;
    padding: .75rem 1.25rem;
    color: var(--cor-texto);
    text-decoration: none;
    font-size: 1.05rem;
    white-space: nowrap;
    border-left: 3px solid transparent;
    transition: background .15s ease, border-color .15s ease;
}

.u3b-menu-item + .u3b-menu-item {
    border-top: 1px solid color-mix(in srgb, var(--cor-borda) 60%, transparent);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .u3b-menu-item + .u3b-menu-item { border-top: 1px solid var(--cor-borda); }
}

.u3b-menu-item:active,
.u3b-menu-item:hover,
.u3b-menu-item.ativo {
    color: var(--cor-principal);
    border-left-color: var(--cor-principal);
    background: var(--cor-fundo-alt);
}

.u3b-menu-item > span { flex: 1 1 auto; }

.u3b-menu-item > i { font-size: 1.15rem; line-height: 1; }

/* A seta diz para onde a entrada leva, sem gritar */
.u3b-menu-seta {
    color: var(--cor-texto-suave);
    font-size: .9rem !important;
    flex: 0 0 auto;
}

.u3b-menu-accoes {
    padding: 1.25rem 1.25rem 0;
    margin-top: .5rem;
}

/* O véu por trás acompanha: preto opaco dava um ecrã morto */
.offcanvas-backdrop.show { opacity: .45; }

/* ------------------------------------------------------------------ Rodapé */

.u3b-rodape {
    background: var(--cor-secundaria);
    color: rgba(255, 255, 255, .8);
    padding: 3rem 0 1rem;
}

/* Faixa legal — encosta ao rodapé de cima, sem abrir espaço novo */
.u3b-rodape-base {
    background: var(--cor-secundaria);
    color: rgba(255, 255, 255, .8);
}

.u3b-rodape a,
.u3b-rodape-base a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.u3b-rodape a:hover,
.u3b-rodape-base a:hover { color: #fff; }

.u3b-rodape-legal {
    border-top: 1px solid rgba(255, 255, 255, .15);
    padding: 1rem 0;
    font-size: .8rem;
    line-height: 1.6;
}

/* ------------------------------------------------------- Barra de cookies */

.u3b-cookies {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1080;
    background: var(--cor-superficie);
    color: var(--cor-texto);
    border-top: 3px solid var(--cor-principal);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .1);
    padding: 1rem;
    display: none;
}

.u3b-cookies.visivel { display: block; }

/* Substitui mapas e vídeos enquanto não houver consentimento */
.u3b-bloqueado {
    background: var(--cor-fundo-alt);
    border: 1px dashed var(--cor-borda);
    color: var(--cor-texto-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    min-height: 240px;
}

/* --------------------------------------------------------------- Imagens */

.u3b-img { width: 100%; height: auto; display: block; }

.u3b-img-capa { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------- Acessibilidade */

:focus-visible { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .animate__animated { animation: none !important; }
}

/* ------------------------------------------------------- Ecrã de entrada */

.u3b-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--cor-fundo);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;              /* o logótipo cresce: não pode transbordar */
    transition: opacity .9s ease;
}

/* Fusão: a página aparece ao mesmo tempo que o logótipo se apaga, em vez
   de ser simplesmente destapada. */
body.u3b-com-splash > *:not(.u3b-splash) {
    opacity: 0;
}

body.u3b-com-splash.u3b-revelado > *:not(.u3b-splash) {
    opacity: 1;
    transition: opacity .9s ease;
}

/* Duas animações ao mesmo tempo: uma entrada curta, e um crescimento muito
   lento que dura os segundos todos da exposição. É o crescimento que dá a
   sensação de que a página está a preparar-se, sem chamar a atenção. */
.u3b-splash img {
    max-width: min(60vw, 380px);
    height: auto;
    animation:
        u3b-splash-entrada .8s ease both,
        u3b-splash-crescer 3s linear both;
}

/* A sair, deixa de apanhar cliques: senão bloqueia a página durante o fade */
.u3b-splash.a-sair {
    opacity: 0;
    pointer-events: none;
}

@keyframes u3b-splash-entrada {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Cinquenta por cento ao longo dos segundos todos: cresce a olhos vistos,
   mas devagar o suficiente para não distrair. */
@keyframes u3b-splash-crescer {
    from { transform: scale(1); }
    to   { transform: scale(1.5); }
}

/* Quem pediu menos movimento não leva animação nenhuma */
@media (prefers-reduced-motion: reduce) {
    .u3b-splash img { animation: none; transform: none; }
    .u3b-splash { transition: none; }

    body.u3b-com-splash > *:not(.u3b-splash),
    body.u3b-com-splash.u3b-revelado > *:not(.u3b-splash) {
        opacity: 1;
        transition: none;
    }
}

/* Logótipo pintado de branco para o rodapé escuro. Serve para logótipos de
   uma cor só; com vários tons, o cliente deve fornecer uma versão própria. */
.u3b-logo-branco {
    filter: brightness(0) invert(1);
    opacity: .9;
}

/* Indicação obrigatória junto ao número de telefone. Discreta de propósito:
   é informação legal, não argumento de venda. */
.u3b-nota-chamada {
    font-size: .75rem;
    opacity: .7;
    line-height: 1.4;
}

/* Selo do Livro de Reclamações. Vem em branco e verde, feito para fundo
   escuro — que é o do rodapé. Num rodapé claro, é preciso a versão própria
   para fundo claro. */
.u3b-selo-reclamacoes {
    height: 34px;
    width: auto;
    max-width: 100%;
    opacity: .9;
    transition: opacity .2s ease;
}

.u3b-selo-reclamacoes:hover {
    opacity: 1;
}


/* moldura-extras */
/* ---------------------------------------------------------- Barra de topo */

.u3b-barra-topo {
    background: var(--cor-secundaria);
    padding: .4rem 0;
}

.u3b-barra-topo a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
}

.u3b-barra-topo a:hover {
    color: #fff;
}

/* ------------------------------------------------------- Cofinanciamento */

.u3b-cofinanciamento {
    background: var(--cor-superficie);
    border-top: 1px solid var(--cor-borda);
    padding: 2rem 0;
}

.u3b-cofinanciamento dt {
    font-weight: 600;
    color: var(--cor-secundaria);
}

.u3b-cofinanciamento dd {
    color: var(--cor-texto-suave);
}

/* Altura fixa: as normas dos programas exigem os logótipos alinhados
   e à mesma escala. Não levam filtro de cinzento. */
.u3b-cofin-logo {
    height: 56px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}