/* Variaveis */
:root {
    --primary: #0088aa;
    --primary-dark: #006d8a;
    --bs-primary: #0088aa;
    --bs-primary-rgb: 0, 136, 170;
}

/* Bootstrap overrides */
.btn-primary  { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-primary:hover { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }
.btn-outline-primary { color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-outline-primary:hover { background-color: var(--primary) !important; color: #fff !important; }
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary,
.btn-check:focus + .btn { 
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.text-primary { color: var(--primary) !important; }
.bg-primary   { background-color: var(--primary) !important; }
.form-control:focus, .form-select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 .2rem rgba(0,136,170,.2) !important; }

/* Banner topo */
#banner-promo {
    background: var(--primary);
    color: #fff;
    text-align: center;
    padding: 8px 40px;
    font-size: .88rem;
    position: relative;
    /* 1010 e não 1060: a barra de navegação é sticky-top, que vale
       1020, e o menu suspenso do perfil é filho dela — preso ao mesmo
       plano. Com esta barra acima dos 1020, o menu era pintado por
       baixo dela. Aqui a ordem correcta é a do documento: estas barras
       estão ACIMA da navegação e nunca se sobrepõem a ela. */
    z-index: 1010;
}
#banner-promo a { color: #fff; font-weight: 600; text-decoration: none; }
#banner-promo button {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; line-height: 1;
}

/* Topbar */
.lp-topbar {
    background: #1a4a6a;
    border-bottom: none;
    font-size: .82rem;
    padding: 6px 0;
}
.lp-topbar a { color: #fff; text-decoration: none; }
.lp-topbar a:hover { color: rgba(255,255,255,.75); }
.lp-topbar i { color: #fff; margin-right: 4px; }
.lp-topbar .text-muted { color: rgba(255,255,255,.6) !important; }

/* Navbar */
.lp-navbar {
    background: #fff !important;
    border-bottom: 1px solid #e9ecef;
    padding: 10px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    /* Explícito, para não depender do valor que o sticky-top traz:
       acima das barras do topo (1010 e 1015) e abaixo do fundo dos
       modais (1050), senão a navegação tapava-os. */
    z-index: 1030;
}
.lp-navbar .nav-link {
    font-size: 14px;
    color: #2c4964;
    white-space: nowrap;
    transition: .3s;
    border-bottom: 2px solid #fff;
    border-radius: 0;
    padding: 5px 2px;
    margin: 0 14px;
    background: none;
}
.lp-navbar .nav-link:hover,
.lp-navbar .nav-item:hover > .nav-link,
.lp-navbar .nav-link.active {
    color: #0088aa;
    border-color: #0088aa;
    background: none;
}
.lp-navbar .dropdown-toggle::after { margin-left: 6px; }

/* Dropdown a abrir com o rato */
.lp-navbar .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    margin-top: 30px;
    border: none;
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(127,137,161,.25);
    padding: 10px 0;
    transition: .3s;
    z-index: 1031;
}
.lp-navbar .dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
}
.lp-navbar .dropdown-item {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #082744;
}
.lp-navbar .dropdown-item:hover {
    color: #0088aa;
    background: none;
}
.lp-navbar .dropdown-header { font-size: 12px; }

@media (max-width: 991px) {
    .lp-navbar .dropdown-menu {
        opacity: 1;
        visibility: visible;
        margin-top: 0;
        display: none;
        box-shadow: none;
    }
    .lp-navbar .dropdown-menu.show { display: block; }
    .lp-navbar .nav-link { margin: 0; }
}

/* Hero */
#hero { overflow-x: hidden; }
#hero {
    background: #1a4a5a center/cover no-repeat;
    min-height: 75vh;
    display: flex;
    align-items: flex-end;
    position: relative;   /* âncora da atribuição */
    isolation: isolate;   /* prende o mix-blend-mode ao hero */
}

/* Atribuição da fotografia: ao alto, encostada à direita, centrada
   entre o topo e o fundo do hero, a ler de baixo para cima.

   A COR ADAPTA-SE SOZINHA. O mix-blend-mode: difference pinta cada
   pixel do texto com o inverso do que está por baixo: sobre fundo
   escuro sai claro, sobre claro sai escuro, sem ninguém medir nada.
   Por isso a cor aqui é branca fixa e NÃO herda a do .txt — com o
   difference, branco é o que dá o inverso puro.

   ONDE FALHA: em cinzentos médios. O inverso de um cinzento a meio da
   escala é outro cinzento parecido, e o texto esbate-se. Se apanhares
   uma fotografia assim, troca as duas linhas do difference por:
       background: rgba(0,0,0,.45);
       padding: 6px 3px;
       border-radius: 4px;
   — perde a adaptação automática, garante o contraste. */
.hero-credito {
    position: absolute;
    bottom: 12px;
    left: 6px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: .58rem;
    letter-spacing: .3px;
    max-height: calc(100% - 24px);
    overflow: hidden;
    z-index: 2;

    color: #fff;
    mix-blend-mode: difference;
}
.hero-credito a {
    color: inherit;
    text-decoration: none;
}
.hero-credito a:hover { text-decoration: underline; }

@media (max-width: 575px) {
    .hero-credito { font-size: .52rem; }
}
/* O .hero-logo saiu da página: o logótipo já está na barra de
   navegação, mesmo por cima. A regra fica por não haver garantia de
   que não seja usado noutro sítio. */
.hero-logo { max-width: 200px; }

/* ── Nada transborda para lá da largura do ecrã ───────────────
   O deslocamento lateral no telemóvel vinha do título do hero: um
   clamp com 5vw numa palavra comprida não quebra e empurra a página.
   Isto trava-o na raiz, para qualquer elemento — é a rede que evita
   andar à caça do culpado sempre que se acrescenta um bloco novo. */
/* NÃO usar overflow-x: hidden no html nem no body.
   Um overflow definido num antepassado desliga o position:sticky de
   tudo o que está lá dentro, sem erro nenhum — foi o que fez a barra
   de navegação deixar de colar ao topo ao descer a página.

   O transbordo trava-se na origem: a causa era o título do hero, um
   clamp com 5vw que numa palavra comprida não quebra e empurra a
   página para lá do ecrã. */
/* clip E NÃO hidden. Os dois cortam o que sai para o lado, mas o
   hidden cria um contentor de deslocamento e isso DESLIGA o
   position:sticky de tudo o que está dentro — foi o que fez a barra
   de navegação deixar de colar ao topo. O clip corta sem criar esse
   contentor, e o sticky continua a funcionar.

   O que transborda são os painéis offcanvas: o carrinho e a
   candidatura a revenda ficam estacionados FORA DO ECRÃ, à direita,
   à espera de deslizarem para dentro. É assim que o Bootstrap os
   posiciona, e sem corte esticam a largura da página. */
html, body { max-width: 100%; overflow-x: clip; }
.hero-texto h1, .hero-texto p { overflow-wrap: break-word; word-break: break-word; }

/* ── Filtros dos produtos, todos da mesma largura ─────────────
   Cada um tinha width:auto e tomava a largura do texto mais longo:
   "Todas as categorias" ficava mais estreito do que "Todas as marcas",
   e a coluna parecia desalinhada. */
/* align-items: flex-start explícito. O d-flex do Bootstrap estica os
   filhos à mesma altura por omissão — se um deles alguma vez ficar
   mais alto (por exemplo, se o grupo de preço quebrar linha por o
   ecrã ser estreito de mais), os selects esticavam com ele e ficavam
   com aquele aspecto inchado. Com flex-start, cada campo fica com a
   sua própria altura. */
.filtros-produtos { align-items: flex-start; }
.filtros-produtos .filtro-campo { width: 15rem; }

/* O input-group do preço tem flex-wrap:wrap por definição do
   Bootstrap — é o que fazia o "€ + campo + a + campo" partir-se em
   duas linhas dentro de 15rem. Aqui força-se uma linha só, com largura
   própria e maior. */
.filtros-produtos .filtro-preco {
    width: 17rem;
    flex-wrap: nowrap;
}
.filtros-produtos .filtro-preco .form-control {
    width: auto; flex: 1 1 auto; min-width: 3.5rem;
}

@media (max-width: 767px) {
    /* No telemóvel ocupam a linha toda: lado a lado ficavam estreitos
       de mais para se ler o que está escolhido. Mesmo a 100%, o grupo
       de preço continua numa linha só — a largura do ecrã chega. */
    .filtros-produtos { width: 100%; }
    .filtros-produtos .filtro-campo,
    .filtros-produtos .filtro-preco,
    .filtros-produtos .btn { width: 100%; }
}
.hero-texto { padding: 60px 0 200px; }
.hero-texto h1 { font-size: clamp(2rem, 5vw, 3.5rem); color: #1a4a6a !important; font-weight: 700; }
.hero-texto p { color: #2a5a7a !important; font-size: 1.1rem; }

/* Why us / Marcas */
.why-us {
    margin-top: -180px;
    padding-bottom: 60px;
    position: relative;
    z-index: 2;
}
.hero-card-azul {
    background: var(--primary);
    border-radius: 8px;
    padding: 2.5rem !important;
}
.hero-card-marca {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Animações à entrada no ecrã.
   O .anima esconde o elemento até ele chegar à vista — sem isto,
   aparecia primeiro e só depois animava, que é pior do que não animar.
   O main.js tira o .anima e põe as classes do animate.css.

   Se o JavaScript falhar ou o navegador não tiver IntersectionObserver,
   o main.js remove todos os .anima de uma vez: mais vale sem animação
   do que uma página com metade do conteúdo invisível. */
.anima { opacity: 0; }

/* Quem pediu menos movimento no sistema não leva nada disto. O
   animate.css já respeita esta regra; aqui garante-se que o .anima
   também não deixa nada escondido. */
@media (prefers-reduced-motion: reduce) {
    .anima { opacity: 1 !important; }
}

/* Cards produto */
.card-produto { border-radius: 12px; overflow: hidden; transition: transform .2s, box-shadow .2s; cursor: pointer; border: 1px solid #e9ecef !important; }
.card-produto:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; }
.card-produto.card-promo { border: 2px solid #0088aa !important; }

.card-img-wrap {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, #f8f9fa, #d6eaf3);
    aspect-ratio: 1/1;
}
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.card-img-slide { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity .3s; }
.card-img-slide.ativa { opacity: 1; }

/* Descrição dos cards: um ponto abaixo do .small do Bootstrap
   (14px -> 13px), com tecto de linhas.

   O limite de caracteres no PHP não garante o número de linhas — uma
   descrição de palavras curtas cabe em menos linhas do que outra de
   palavras compridas. O line-clamp corta na linha, aconteça o que
   acontecer. SE ESTIVER A CRIAR UMA LINHA A MAIS, o número a mudar é
   o 3 do -webkit-line-clamp. */
.card-produto .card-text {
    font-size: .8125rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-img-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: #ccc; min-height: 200px;
}

.card-marca-overlay {
    position: absolute; bottom: 8px; left: 8px;
    border-radius: 6px; padding: 3px 7px;
}
.card-marca-logo { max-height: 48px; max-width: 160px; object-fit: contain; }
.card-marca-text { font-size: .7rem; font-weight: 700; color: #444; text-transform: uppercase; }

.badge-promo {
    position: absolute; top: 0; left: 0;
    background: #0088aa; color: #fff; font-size: .8rem;
    font-weight: 700; padding: 5px 10px;
    border-radius: 0 0 10px 0;
    width: 120px; text-align: center;
    z-index: 2;
}

/* Pontos imagem */
.img-dots { position: absolute; bottom: 8px; right: 8px; display: flex; gap: 6px; z-index: 2; }
.img-dot  { width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.25); cursor: pointer; transition: background .2s, border-color .2s; }
.img-dot.active { background: var(--primary); border-color: var(--primary-dark); }

/* Botao revenda */
.btn-revenda {
    position: fixed; bottom: 80px; left: 0;
    background: var(--primary); color: #fff;
    border: none; border-radius: 0 8px 8px 0;
    padding: 10px 12px; font-size: .8rem;
    writing-mode: vertical-lr; letter-spacing: 1px;
    z-index: 1040; cursor: pointer; transition: background .2s;
}
.btn-revenda:hover { background: var(--primary-dark); color: #fff; }

/* Páginas institucionais — sobre, termos, privacidade */
.pagina-inst {
    /* 48 e não 140. A barra de navegação é sticky-top, não fixed —
       empurra o conteúdo em vez de assentar em cima dele, portanto
       nunca foi preciso reservar-lhe espaço. */
    padding: 48px 0 80px;
}
.inst-titulo {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    color: #1a4a6a;
    margin-bottom: .5rem;
}
.inst-risco {
    width: 70px; height: 3px;
    background: var(--primary);
    border-radius: 2px;
    margin-bottom: 2rem;
}
/* O texto dos termos e da privacidade vem da base com quebras de
   linha simples, convertidas por nl2br. Uma medida de leitura mais
   estreita e uma entrelinha maior tornam-no legível. */
.inst-texto {
    max-width: 70ch;
    line-height: 1.75;
    color: #444;
}
.inst-texto h2, .inst-texto h3 { color: #1a4a6a; margin-top: 2rem; }

.inst-caixa {
    background: #f8fafb;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    /* SEM height:100%. Isto existia para as três caixas do "Sobre nós"
       ficarem iguais, mas em colunas com duas caixas empilhadas — como
       no perfil — cada uma tentava ocupar a altura toda e a segunda
       transbordava por cima do rodapé. Quem quiser altura igual usa a
       classe h-100 do Bootstrap na própria caixa. */
}

/* A regra global .btn tem border-radius 25px, que faz sentido nos
   botões soltos e nenhum dentro de um input-group: os cantos ficam
   arredondados a meio do grupo e o conjunto parte-se. Aqui repõem-se
   os cantos rectos, com o arredondado só nas pontas. */
.input-group > .btn { border-radius: 0 !important; padding-left: .75rem !important; padding-right: .75rem !important; }
.input-group > .btn:last-child { border-top-right-radius: .375rem !important; border-bottom-right-radius: .375rem !important; }
.input-group > .btn:first-child { border-top-left-radius: .375rem !important; border-bottom-left-radius: .375rem !important; }

/* Lista de compras do cliente — colunas alinhadas.
   Sem margens automáticas: o .accordion-button já usa margin-left auto
   na seta, e uma segunda margem automática fazia as duas repartirem o
   espaço livre, com o preço a mudar de sítio de linha para linha. */
.compra-id     { width: 4.5rem; flex: 0 0 auto; }
.compra-data   { width: 7rem;   flex: 0 0 auto; }
.compra-estado { width: 11rem;  flex: 0 0 auto; }
.compra-valor  { flex: 1 1 auto; text-align: right; padding-right: 1rem; }

@media (max-width: 575px) {
    /* No telemóvel a data sai: o id, o estado e o valor chegam para
       distinguir as linhas, e assim o preço não é empurrado para fora. */
    .compra-data   { display: none; }
    .compra-id     { width: 3.5rem; }
    .compra-estado { width: 8.5rem; font-size: .8rem; }
    .compra-valor  { padding-right: .5rem; }
}

/* Footer */
.lp-footer { background: #1a2530; color: #adb5bd; }
.lp-footer h6 { color: #fff; }
.lp-footer a  { color: #fff; }
.lp-footer a:hover { color: #0088aa; }
.lp-footer .border-top { border-color: rgba(255,255,255,.1) !important; }
.lp-footer .text-muted { color: #adb5bd !important; }

@media (max-width: 767px) {
    /* Folga extra ao fundo do rodapé, só no telemóvel: o "voltar ao
       topo" é fixo a 24px do fundo e à direita — o mesmo canto do
       livro de reclamações. Ao puxar até ao fundo absoluto da página,
       o botão ficava por cima do livro em vez de ao lado. */
    .lp-footer { padding-bottom: 72px; }
}

/* Menções legais do rodapé: mais discretas do que o resto, mas
   legíveis. Estão lá por obrigação, não para chamar a atenção. */
.lp-legal { font-size: .78rem; line-height: 1.5; display: block; }
.lp-arbitragem { font-size: .72rem; line-height: 1.4; }
@media (max-width: 575px) {
    .lp-legal, .lp-arbitragem { font-size: .7rem; }
    .lp-arbitragem { text-align: left !important; }
}

.offcanvas { z-index: 999999 !important; }
.offcanvas-backdrop { z-index: 99998 !important; }

.btn { border-radius: 25px !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
section h2 { font-weight: 800; }

/* A classe .hidden é usada pelo main.js para alternar as secções do
   modal de entrada — dados de acesso, novo cliente, recuperar. NÃO
   ESTAVA DEFINIDA EM LADO NENHUM: o Bootstrap 5 tem .d-none, não
   .hidden. Sem esta regra as três secções apareciam todas ao mesmo
   tempo, empilhadas. */
.hidden { display: none !important; }

/* Cookies — faixa fixa ao fundo.
   Deixou de ser um offcanvas do Bootstrap: aquele escurecia a página
   por trás e prendia o foco, o que numa faixa de consentimento é
   pressão para carregar no primeiro botão que aparece. Assim o
   visitante pode ler o site e decidir sem ser empurrado. */
#cookieBanner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #1a2530;
    color: #e9ecef;
    padding: 1rem 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.25);
    /* Abaixo dos modais (1050) e acima de tudo o resto. */
    z-index: 1045;
}
#cookieBanner a { color: #7fd3e6; }
#cookieBanner .btn-link { text-decoration: underline; }

@media (max-width: 991px) {
    #cookieBanner .d-flex { justify-content: flex-start !important; }
    #cookieBanner .btn { flex: 1 1 auto; }
}

/* Responsivo */
@media (max-width: 768px) {
    #produtos .col-6 { padding: 6px; }
}