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

/* contactos */
.u3b-contactos {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 4rem 0;
}

/* Sem imagem, a secção cai para a cor secundária: o cartão claro precisa
   sempre de um fundo escuro por baixo. */
.u3b-contactos-sem-imagem {
    background-color: var(--cor-secundaria);
}

.u3b-contactos-veu {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}

.u3b-contactos-corpo {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------- O cartão */

.u3b-contactos-cartao {
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .5rem;
    padding: 2rem;
    backdrop-filter: blur(6px);
}

.u3b-contactos-cartao h2 {
    color: #fff;
    margin-bottom: .25rem;
}

.u3b-contactos-cartao .u3b-contactos-nota {
    color: rgba(255, 255, 255, .75);
    margin-bottom: 1.5rem;
}

/* Campos claros sobre o cartão escuro, sem etiqueta à vista */
.u3b-contactos-cartao .form-control {
    background: rgba(255, 255, 255, .94);
    border: 0;
    padding: .7rem .9rem;
    margin-bottom: .75rem;
}

.u3b-contactos-cartao .form-control:focus {
    background: #fff;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .35);
}

.u3b-contactos-cartao .form-control::placeholder {
    color: var(--cor-texto-suave);
    opacity: 1;
}

.u3b-contactos-cartao .form-check-label {
    color: rgba(255, 255, 255, .8);
    font-size: .85rem;
}

.u3b-contactos-cartao .btn {
    padding: .7rem 1rem;
}

/* --------------------------------------------------- Dados ao lado do mapa */

.u3b-contactos-dados li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: .75rem;
    color: rgba(255, 255, 255, .85);
}

.u3b-contactos-dados i {
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.5;
}

.u3b-contactos-dados a {
    color: inherit;
    text-decoration: none;
}

.u3b-contactos-dados a:hover {
    color: #fff;
}

.u3b-mapa {
    width: 100%;
    height: 320px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: .375rem;
}

/* Campo isco. Fora do ecrã em vez de display:none — há robôs que ignoram
   campos escondidos por display, mas preenchem estes na mesma. */
.u3b-isco {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* galeria-fotos */
.u3b-galeria-item {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    padding: 0;
    border: 0;
    border-radius: .375rem;
    overflow: hidden;
    background: var(--cor-fundo-alt);
    cursor: zoom-in;
}

.u3b-galeria-item img {
    transition: transform .3s ease;
}

.u3b-galeria-item:hover img {
    transform: scale(1.05);
}

.u3b-galeria-ampliada {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
}

/* ----------------------------------------------- Janela de ampliação */

.u3b-galeria-palco {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    /* O dedo na horizontal muda de fotografia; na vertical, fecha ou
       desliza. Sem isto, o browser ficava com o gesto todo. */
    touch-action: pan-y pinch-zoom;
}

.u3b-galeria-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;

    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease;
}

.u3b-galeria-seta:hover {
    background: rgba(0, 0, 0, .75);
}

.u3b-galeria-seta.anterior { left: .5rem; }
.u3b-galeria-seta.seguinte { right: .5rem; }

.u3b-galeria-seta.u3b-oculto { display: none; }

/* No telemóvel não há setas: o dedo é que manda, e duas pastilhas por cima
   da fotografia só tapavam o que interessa ver. */
@media (max-width: 767.98px) {
    .u3b-galeria-seta { display: none; }
}

/* A fotografia é movida pelo JavaScript enquanto o dedo arrasta. O will-change
   avisa a placa gráfica, que é o que faz a diferença entre acompanhar o dedo
   e ir a reboque dele. */
.u3b-galeria-ampliada {
    will-change: transform, opacity;
    user-select: none;
    -webkit-user-drag: none;
}

/* hero */
.u3b-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

/* Que parte da fotografia sobrevive ao corte. Numa paisagem interessa o
   meio; num prédio interessa o topo; num prato em cima da mesa, o fundo.

   As duas classes juntas de propósito: com uma só, estas regras têm o mesmo
   peso que o `background-position: center` acima e dependem da ordem em que
   as folhas são juntadas — que não controlamos. */
.u3b-hero.u3b-hero-corte-topo   { background-position: center top; }
.u3b-hero.u3b-hero-corte-centro { background-position: center center; }
.u3b-hero.u3b-hero-corte-fundo  { background-position: center bottom; }

/* Nos slides o fundo está em cada item, não na secção. As três classes
   juntas para ganhar a qualquer regra da folha do carrossel. */
.u3b-hero.u3b-hero-corte-topo   .carousel-item.carousel-item { background-position: center top; }
.u3b-hero.u3b-hero-corte-centro .carousel-item.carousel-item { background-position: center center; }
.u3b-hero.u3b-hero-corte-fundo  .carousel-item.carousel-item { background-position: center bottom; }

.u3b-hero-pequeno { min-height: 60vh; }
.u3b-hero-medio   { min-height: 72vh; }
.u3b-hero-total   { min-height: 100vh; }

/* Nomes antigos, para os sites já criados não perderem a altura */
.u3b-hero-meia    { min-height: 60vh; }
.u3b-hero-inteiro { min-height: 100vh; }

.u3b-hero-veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, .65),
        rgba(0, 0, 0, .25)
    );
}

/* Sem véu: a fotografia fica como é. Em troca, o texto ganha sombra — sem
   ela, uma zona clara da imagem faz desaparecer letras brancas.

   Duas sombras: uma justa e escura, que desenha o contorno das letras, e
   outra larga e suave, que separa o bloco de texto do fundo. */
.u3b-hero-sem-veu .u3b-hero-veu {
    display: none;
}

.u3b-hero-sem-veu .u3b-hero-conteudo h1,
.u3b-hero-sem-veu .u3b-hero-conteudo h2 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55),
                 0 4px 18px rgba(0, 0, 0, .35);
}

.u3b-hero-sem-veu .u3b-hero-conteudo .lead,
.u3b-hero-sem-veu .u3b-hero-conteudo p {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5),
                 0 3px 12px rgba(0, 0, 0, .3);
}

/* O subtítulo vem a meio branco do Bootstrap, o que resulta por cima do véu
   mas não por cima de uma fotografia: a imagem atravessa as letras. Sem véu
   fica branco inteiro, e é a sombra que trata do contraste.

   O !important é para ganhar ao .text-white-50, que já o traz. */
.u3b-hero-sem-veu .u3b-hero-conteudo .lead,
.u3b-hero-sem-veu .u3b-hero-conteudo .text-white-50 {
    color: #fff !important;
}

.u3b-hero-conteudo {
    position: relative;
    z-index: 1;
    padding: 4rem 0;
}

/* Um quarto acima do que o Bootstrap dá por omissão. O clamp trava as duas
   pontas: num telemóvel não fica desproporcionado, num ecrã grande cresce. */
.u3b-hero-conteudo h1,
.u3b-hero-conteudo h2 {
    font-size: clamp(2.1rem, 5.5vw, 3.75rem);
    line-height: 1.15;
    font-weight: 600;
}

.u3b-hero-conteudo .lead {
    font-size: clamp(1.15rem, 2.4vw, 1.55rem);
    line-height: 1.5;
}

.u3b-hero-conteudo .btn {
    font-size: 1.35rem;
    padding: .8rem 2rem;
}

@media (max-width: 767.98px) {
    .u3b-hero-pequeno { min-height: 50vh; }
    .u3b-hero-medio   { min-height: 56vh; }
    .u3b-hero-total   { min-height: 70vh; }

    .u3b-hero-meia    { min-height: 50vh; }
    .u3b-hero-inteiro { min-height: 70vh; }

    .u3b-hero-veu {
        background: rgba(0, 0, 0, .55);
    }

    /* Num ecrã estreito não há lado esquerdo nem direito: o texto
       alinhado à esquerda fica encostado e o botão perdido a um canto. */
    .u3b-hero-conteudo {
        text-align: center;
        padding: 3rem 0;
    }

    .u3b-hero-conteudo .btn {
        width: 100%;
        max-width: 320px;
    }
}

/* hero-slides */
.u3b-hero-carrossel,
.u3b-hero-carrossel .carousel-inner,
.u3b-hero-carrossel .carousel-item {
    width: 100%;
    height: 100%;
    min-height: inherit;
}

/* Sem background-position aqui: quem a define é o hero.css, conforme o
   alinhamento escolhido. Estava `inherit`, que herda do .carousel-inner —
   esse não tem posição nenhuma, e o valor inicial é o canto superior
   esquerdo. Daí o fundo da fotografia nunca aparecer. */
.u3b-hero-carrossel .carousel-item {
    background-size: cover;
    display: none;
}

.u3b-hero-carrossel .carousel-item.active,
.u3b-hero-carrossel .carousel-item-next,
.u3b-hero-carrossel .carousel-item-prev {
    display: flex;
    align-items: center;
}

/* Pontinhos: discretos sobre a fotografia, sem a moldura do Bootstrap */
.u3b-hero-pontos {
    margin-bottom: 1.5rem;
}

.u3b-hero-pontos [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .45);
    opacity: 1;
    margin: 0 5px;
    transition: background .2s ease, transform .2s ease;
}

.u3b-hero-pontos [data-bs-target].active {
    background: #fff;
    transform: scale(1.25);
}

/* marcas */
.u3b-fita {
    overflow: hidden;
    padding: 1rem 0;

    /* Esbatimento nas pontas: a fita entra e sai em vez de ser cortada a
       direito. O mask é suportado em tudo o que interessa; onde não for,
       o resultado é só uma fita sem esbatimento. */
    -webkit-mask-image: linear-gradient(to right,
        transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right,
        transparent, #000 6%, #000 94%, transparent);
}

.u3b-fita-carril {
    display: flex;
    width: max-content;
    animation: u3b-fita-andar var(--u3b-fita-tempo, 40s) linear infinite;
    will-change: transform;
}

/* Metade exacta: as duas cópias são iguais, portanto ao fim de -50% a
   segunda está onde a primeira estava e o ciclo recomeça sem salto. */
@keyframes u3b-fita-andar {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.u3b-fita-grupo {
    display: flex;
    gap: 1.5rem;
    padding-right: 1.5rem;
}

/* Com o JavaScript a comandar, a animação de CSS sai de cena. Fica só como
   rede: sem JavaScript, a fita anda na mesma ao ritmo de sempre. */
.u3b-fita.manual .u3b-fita-carril {
    animation: none;
}

/* O cursor diz o que ali se passa: o lado onde está manda no sentido */
.u3b-fita.manual {
    cursor: ew-resize;

    /* O dedo na horizontal arrasta a fita; na vertical, desliza a página.
       Sem isto, o browser fica com o gesto todo e a fita não se mexe. */
    touch-action: pan-y;
}

/* Enquanto o dedo arrasta, nada por baixo reage ao toque */
.u3b-fita.a-arrastar {
    cursor: grabbing;
}

.u3b-fita.a-arrastar a,
.u3b-fita.a-arrastar img {
    pointer-events: none;
}

/* --------------------------------------------------------------- O cartão */

.u3b-marca {
    position: relative;
    flex: 0 0 auto;
    width: 320px;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: .5rem;
    overflow: hidden;
    transition: transform .3s ease;
}

.u3b-marca:hover {
    transform: translateY(-4px);
}

.u3b-marca-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--cor-fundo-alt);
}

.u3b-marca-foto > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* O logótipo sobreposto ao canto inferior direito da fotografia, numa
   pastilha clara — sobre uma fotografia qualquer, um logótipo solto perde-se. */
.u3b-marca-logo {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    background: #fff;
    border-radius: .375rem;
    padding: .4rem .6rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
}

.u3b-marca-logo img {
    height: 28px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    display: block;
}

.u3b-marca-corpo {
    padding: 1.25rem;
}

.u3b-marca-nome {
    font-size: 1.15rem;
    margin-bottom: .5rem;
}

.u3b-marca-descricao {
    color: var(--cor-texto-suave);
    font-size: .9rem;
    margin-bottom: 1rem;
}

/* ------------------------------------------------------------- Telemóvel */

@media (max-width: 575.98px) {
    .u3b-marca { width: 260px; }
    .u3b-fita-grupo { gap: 1rem; padding-right: 1rem; }
}

/* Quem pediu menos movimento não leva fita a andar: fica uma tira que se
   desliza com o dedo, como qualquer lista horizontal. */
@media (prefers-reduced-motion: reduce) {
    .u3b-fita {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .u3b-fita-carril { animation: none; }
    .u3b-marca { scroll-snap-align: center; }

    /* A segunda cópia é decorativa: sem animação, seria conteúdo repetido */
    .u3b-fita-grupo[aria-hidden="true"] { display: none; }
}

/* A página de detalhe da marca leva o mesmo logótipo sobreposto */
.u3b-detalhe-imagem {
    position: relative;
}

/* mote */
.u3b-mote {
    background: var(--cor-principal);
    padding: 3.5rem 0;
    color: #fff;
}

.u3b-mote-frase {
    font-size: clamp(1.25rem, 3vw, 1.9rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.45;
}

.u3b-mote-autor {
    margin-top: 1.25rem;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

@media (max-width: 767.98px) {
    .u3b-mote { padding: 2.5rem 0; }
}