/*!
 * Ajustes de responsividade e legibilidade, Roger Barroso, Unipessoal, Lda.
 *
 * Nenhuma regra aqui altera o desenho. Todas corrigem coisas que ficavam
 * cortadas, transbordavam ou eram pequenas demais para tocar. Cada uma diz
 * o que corrige e com que medida, tirada do browser e nao de estimativa.
 *
 * As classes do Framer sao especificas (.framer-ABC .framer-xyz), por isso
 * estas regras precisam de !important para ganhar. Nao e desleixo.
 *
 * Os tres breakpoints do site:
 *   Desktop  min-width: 1200px (era 1440; ver o commit do corte)
 *   Tablet   768px a 1199.98px
 *   Phone    max-width: 767.98px
 */

/* ============================================== PORTATEIS, 1200 A 1439 === */

/* O desenho de computador comecava nos 1440px, e os portateis de 1280 e
   1366px, que sao a maioria, recebiam o de tablet inteiro: menu hamburguer,
   os cartoes do "Porque a Roger?" numa lista, as obras empilhadas, e a
   pagina inicial 2000px mais comprida. O corte passou para 1200px (no CSS
   das paginas e nos modulos, ver o commit). O desenho de computador tinha
   medidas fixas pensadas para 1440; as regras abaixo tornam-nas fluidas,
   e a partir de 1440 dao exatamente o que estava. */

@media (min-width: 1200px) {
  /* Cabecalho: contentor com max-width de 1312px e margem zero. Abaixo de
     1312px de ecra o logotipo e o botao encostavam as bordas. Fica com os
     mesmos 40px de margem que o rodape tem nessas larguras. */
  .framer-1y6pq8o { max-width: min(1312px, calc(100% - 80px)) !important; }

  /* Rodape: entre o bloco da marca e as colunas havia um gap fixo de
     270px. A 1200px sobravam 274px para Paginas, Legal e Redes, que
     precisam de 400: as colunas colavam-se e "Redes Sociais" saia do
     ecra, e o texto da marca perdia 70px. O gap passa a crescer com o
     ecra, de 64px a 1200 ate aos 270 originais a 1440. */
  .framer-1ahsen7 { gap: clamp(64px, calc(64px + (100vw - 1200px) * .858), 270px) !important; }
}

/* ===================================================== PAGINA INICIAL === */

/* O texto dos seguros e muito mais longo do que o rotulo que aqui estava,
   "Testemunhos". Sem isto transbordava o cartao do heroi: a cadeia de flex
   dimensionava-se ao conteudo em vez de quebrar linha. */
.framer-m9y30a,
.framer-m9y30a * { min-width: 0; max-width: 100%; }
.framer-m9y30a p { font-size: 12px; line-height: 1.35; white-space: normal; }

/* A fotografia da carrinha estava em object-fit:cover numa caixa mais larga
   do que a proporcao da imagem, o que cortava 30% da altura em tablet, o
   tejadilho e a base das rodas. Com contain aparece inteira; o bottom
   assenta-a na linha do chao em vez de a deixar a flutuar. */
img[src*="UfSZgiqj4"] {
  object-fit: contain !important;
  object-position: right bottom !important;
}

/* "Somos da sua terra" (fotografia trocada a 28 de setembro de 2026). Em
   computador e tablet o cartao e mais estreito do que a fotografia (334 por
   250 contra 3:2) e, cortada ao centro, a carrinha ficava "ROGE". Encostada
   a 90%, o nome aparece inteiro e perde-se so parede a esquerda. No
   telemovel a caixa e mais larga do que a fotografia e isto nao muda nada. */
img[src*="RogerCarrinhaCalcada2026"] { object-position: 90% 50% !important; }

/* Carrinha maior e encostada a direita (pedido de 22 de setembro de 2026).
   A caixa .framer-9cy4fo tem a animacao de entrada da Framer, que usa
   transform, por isso quem cresce e o involucro de dentro. A caixa cortava
   o que lhe saisse (overflow:clip); passa a deixar ver.

   O crescimento acompanha o espaco livre a esquerda da carrinha, que e o
   que o titulo deixa: a 1200px a caixa ja comeca onde o titulo acaba, por
   isso a carrinha fica a 96%; a partir de 1440 fica 15% maior e 40px mais a
   direita, ainda dentro do ecra. Pelo meio, cresce em linha reta. Medido de
   1200 a 1920px, a imagem fica sempre a 24px ou mais do fim do titulo; com
   22% a 1440 o farol tocava no "S" de REPARACOES. */
@media (min-width: 1200px) {
  .framer-VMkIw .framer-9cy4fo { overflow: visible !important; }
  .framer-VMkIw .framer-9cy4fo > div {
    top: auto !important;
    left: auto !important;
    bottom: 0 !important;
    right: calc(-1 * clamp(0px, calc((100vw - 1200px) / 6), 40px)) !important;
    width: clamp(96%, calc(96% + (100vw - 1200px) * .68), 115%) !important;
    height: clamp(96%, calc(96% + (100vw - 1200px) * .364), 115%) !important;
  }

  /* O titulo tem text-wrap:balance e 100px de letra. Abaixo dos 1366px a
     coluna encolhe (388px a 1200) e "& REPARACOES", que precisa de 442,
     partia em tres linhas: "REMODELACOES / & / REPARACOES". A letra desce
     com a coluna, de 88px a 1200 ate aos 100 originais a 1366. */
  .framer-VMkIw .framer-1foqeef h1,
  .framer-VMkIw .framer-1foqeef h1 * {
    font-size: clamp(88px, calc(88px + (100vw - 1200px) * .0723), 100px) !important;
  }
}

/* No tablet a caixa da carrinha sai 36px pela direita da coluna
   (right:-36px na Framer). Encostada a direita, a carrinha ficava 6px fora
   do ecra; fica dentro da margem de 30px. Nao cresce: por cima dela esta o
   titulo, e com 10% a mais a carrinha subia ate as letras. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .framer-VMkIw .framer-9cy4fo > div {
    left: auto !important;
    right: 36px !important;
  }
}


/* Heroi no telemovel: a Framer fixa a seccao em 866px e encosta o conteudo
   ao fundo. A carrinha, que ocupava o espaco de cima, esta escondida nesta
   largura, por isso ficavam 341px seguidos so com o fundo escuro, medidos
   a 320 e a 375px, antes de aparecer o titulo. A seccao passa a ter a
   altura do conteudo, com o mesmo espaco em cima para o menu. */
@media (max-width: 767.98px) {
  .framer-VMkIw .framer-x33y4y {
    height: auto !important;
    justify-content: flex-start !important;
    padding-bottom: 56px !important;
  }
}

/* Faixa "Empresa certificada, segurada e registada", logo a seguir ao heroi.
   No telemovel a Framer fixa a caixa em 161px com overflow:clip e o
   conteudo centrado; o texto que la esta mede 241px. Medido a 390px: o
   titulo ficava 80px acima da caixa, invisivel, e a linha dos materiais
   abaixo dela; a 767px o titulo ainda perdia 8px. Em tablet e computador a
   caixa ja acompanha o conteudo. */
@media (max-width: 767.98px) {
  .framer-VMkIw .framer-1k5svoz { height: auto !important; }
}

/* "Porque a Roger?": os quatro cartoes empilham-se ao descer. Na Framer so
   os tres primeiros (1, 2 e 3) estavam em position:sticky; o quarto, "Somos
   da Sua Terra", ja tinha z-index 4 mas ficou em relative. Medido a 1440px:
   chegava aos 67px do topo, 27px antes de assentar nos 40px dos outros, e o
   monte comecava logo a subir, por isso nunca cobria o terceiro por
   inteiro. Pedido do cliente a 19 de setembro de 2026: que fizesse a mesma
   sobreposicao que os de cima.

   O ::after acrescenta 200px no fim da coluna dos cartoes. E essa folga que
   deixa o quarto assentar e ficar parado com os outros antes de sairem
   juntos; sem ela, um sticky no ultimo filho nao tem para onde colar. O
   espaco ate a seccao seguinte fica igual (60px), porque a folga e gasta
   enquanto o monte esta parado.

   So a partir dos 768px, como os outros tres: no telemovel a Framer nao
   empilha os cartoes. */
@media (min-width: 768px) {
  .framer-VMkIw .framer-1k1rr1w {
    position: sticky !important;
    top: 40px !important;
  }
  .framer-VMkIw .framer-115hmtn::after {
    content: "";
    display: block;
    flex: none;
    height: 200px;
  }
}

/* Os tres numeros do "Quem Somos" (anos, projetos, garantia) ficam numa
   fila com space-between. Em tablet a fila mede 433px e os tres blocos
   medem 144 cada, exatamente 432: nao sobra nada para separar, e
   "Projetos Finalizados" ficava colado aos vizinhos dos dois lados. Com
   uma folga de 16px os blocos encolhem e o rotulo passa a duas linhas,
   como ja acontece nos outros dois. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .framer-VMkIw .framer-cxrcp9 { gap: 16px; }
}

/* ================================== FRASES PARTIDAS EM DOIS PARAGRAFOS === */

/* Algumas frases vinham da Framer partidas em dois paragrafos, no sitio
   onde a linha acabava no desenho de computador: "Respondemos em 24 a 48" /
   "horas e marcamos a visita", "entregamos solucoes tecnicas" / "completas
   na Beira Interior", "ligue" / "ou mande mensagem". No computador a quebra
   coincide com o fim da linha e nao se nota; no tablet e no telemovel
   deixava linhas de uma ou duas palavras e o numero separado da unidade.
   Nessas larguras os dois paragrafos passam a correr como uma frase so. */
@media (max-width: 1199.98px) {
  /* O contentor de texto da Framer e flex, e os filhos de um flex sao
     sempre blocos: sem isto o display:inline dos paragrafos nao pega. */
  .framer-1qkyr2e,
  .framer-1ommv7z,
  .framer-1xkw73,
  .framer-1fxh3mj,
  .framer-le15z9,
  .framer-yh9y3z,
  .framer-7let25 { display: block !important; }
  /* o texto do fecho "A sua obra comeca com uma conversa" e centrado; com
     os paragrafos em linha, o alinhamento passa a vir do contentor */
  .framer-1xkw73 { text-align: center !important; }
  .framer-1qkyr2e > p,
  .framer-1ommv7z > p,
  .framer-1xkw73 > p,
  .framer-1fxh3mj > p,
  .framer-le15z9 > p,
  .framer-7let25 > p,
  .framer-yh9y3z > p:nth-child(n+2) { display: inline !important; }
  .framer-1qkyr2e > p + p::before,
  .framer-1ommv7z > p + p::before,
  .framer-1xkw73 > p + p::before,
  .framer-1fxh3mj > p + p::before,
  .framer-le15z9 > p + p::before,
  .framer-7let25 > p + p::before,
  .framer-yh9y3z > p:nth-child(3)::before { content: " "; }
  /* em Servicos, "Reunimos as duvidas...": sem equilibrio, o "ligue" ficava
     sozinho numa linha a 390 px */
  .framer-7let25 { text-wrap: balance !important; }
  /* no "resultado que fala / por si" o primeiro paragrafo e outra frase:
     fica em bloco, e so o segundo e o terceiro se juntam */
}

/* ====================================== CARTOES DE SERVICO, DUAS PAGINAS === */

/* Os tres cartoes de servico (na inicial e em Servicos) ficavam numa fila
   alinhada ao centro, cada um com a altura do seu texto. O do meio tem uma
   linha a menos e acabava mais acima: o "Ver Servico" dele ficava 21px mais
   alto do que os outros em computador, e ate 54px desencontrado em tablet.
   A fila estica os tres a mesma altura, o interior de cada cartao ocupa o
   espaco que sobra, e o "Ver Servico" desce para o fundo. */
@media (min-width: 768px) {
  /* Cada cartao vive numa caixa sua (.framer-omspxh na inicial,
     .framer-9698qh em Servicos), que e uma celula de uma grelha, alinhada
     ao topo e com height:min-content. E essa caixa que tem de esticar. */
  .framer-omspxh,
  .framer-9698qh {
    height: auto !important;          /* era min-content, que nao estica */
    align-self: stretch !important;
    align-items: stretch !important;
  }
  .framer-omspxh > [class*="-container"],
  .framer-omspxh > .ssr-variant > [class*="-container"],
  .framer-9698qh > [class*="-container"],
  .framer-9698qh > .ssr-variant > [class*="-container"] { display: flex !important; }
  .framer-NIjiU { height: auto !important; }
  .framer-NIjiU > .framer-s6yf3w { flex: 1 1 auto !important; }
  .framer-s6yf3w > .framer-1b1iunt { margin-top: auto !important; }
}

/* ========================================================= PAGINA SOBRE === */

/* As quatro vantagens (Empresa Certificada e Segurada, Orcamentos
   Transparentes...) tem 289px fixos dentro de uma caixa de 280px com
   overflow escondido. A 320px passavam 9px para fora; hoje isso so come
   margem, mas qualquer texto mais longo, ou um ecra abaixo de 329px, cortava
   as ultimas letras. Passam a ocupar no maximo a largura da caixa. */
.framer-1qtbe44-container { max-width: 100% !important; }

/* ================================================ PAGINA DE CONTACTOS === */

/* Tres blocos desta pagina estavam em white-space:pre com largura
   automatica, o que os fazia sair do cartao em vez de quebrar linha. Medido
   a 375px: o texto do consentimento tinha 415px dentro de um contentor de
   287px, 154px cortados, e a ligacao "Termos e Condicoes" ficava 147px fora
   do ecra. E um campo obrigatorio para submeter o pedido, portanto tem de
   se ler inteiro. A morada perdia 82px e a linha do WhatsApp 15px.

   pre-wrap e nao normal de proposito: preserva as quebras de linha do texto
   e so acrescenta a mudanca de linha automatica. E a mesma convencao que o
   Framer ja usa nos blocos de texto corrido desta pagina.

   Ate 19 de setembro de 2026 isto so valia no telemovel. Em tablet e nos
   portateis que caem nesse breakpoint (768 a 1439px) os mesmos tres blocos
   continuavam em white-space:pre: a 768px o consentimento saia 131px do
   cartao, a morada 105px e o WhatsApp 40px; a 834px, 98, 72 e 7px. A partir
   dos 1440px cabem, por isso a regra para ai. */
@media (max-width: 1439.98px) {
  .framer-VACAg .framer-g7nvpr,
  .framer-VACAg .framer-1ef3wlq {
    white-space: pre-wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    word-break: break-word;
  }

  /* O consentimento e irmao da caixa de selecao dentro de um flex, por isso
     width:100% resolvia para a largura do pai inteiro e ignorava a caixa:
     sobrava 26px de transbordo. Com flex e min-width:0 ocupa so o espaco
     que resta. */
  .framer-VACAg .framer-1jjupzv {
    white-space: pre-wrap !important;
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    word-break: break-word;
  }
}

/* As ligacoes "Politica de Privacidade" e "Termos e Condicoes" dentro do
   consentimento do formulario tinham exatamente a cor do texto a volta
   (rgb 136,136,136) e nenhum sublinhado, que so aparecia ao passar o rato.
   Distinguir uma ligacao so pela cor ja nao chega (WCAG 1.4.1); aqui nem a
   cor a distinguia. Passam a estar sempre sublinhadas. */
.framer-VACAg .framer-1jjupzv a {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* O cartao do formulario tem 870px de altura fixa e overflow:clip no
   breakpoint de tablet, mas o conteudo passou a medir 892 a 910px desde que
   entraram a nota sobre dados e o consentimento mais longo. O botao "Enviar
   Pedido", que tem 45px, ficava com 5 a 23px a vista, de 768 a 1439px, o que
   inclui os portateis de 1280 e 1366px. Em telemovel e em computador a
   Framer ja usa min-content; aqui passa a auto. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .framer-VACAg .framer-1hdhhq2 { height: auto !important; }
}

/* ================================================ PASTILHAS DE TOPO ===== */

/* NAO ha regra aqui, e e de proposito.
 *
 * A pastilha do topo dizia "Covilha, Fundao, Guarda e Castelo Branco" e
 * saia 52px para fora do ecra a 320px, por estar em white-space:pre. Cheguei
 * a por aqui uma regra a deixa-la quebrar linha, mas espremia-a numa coluna
 * de 69px e duas linhas: ficava pior do que o problema.
 *
 * Quando o texto passou a "Covilha, Fundao e arredores" o problema
 * desapareceu sozinho: medido a 320px, cabe numa linha com 152px e acaba
 * aos 206px, bem dentro do ecra. A regra foi retirada.
 *
 * Se algum dia o texto voltar a crescer, o sintoma volta. A saida nao e
 * deixar quebrar: e encurtar o texto, ou baixar o corpo da letra so nesse
 * breakpoint. */

/* ============================================ RODAPE, TODAS AS PAGINAS == */

@media (max-width: 767.98px) {

  /* A linha das colunas do rodape estava em flex-wrap:nowrap. A 320px a
     coluna REDES SOCIAIS ficava 34px fora do ecra, cortada. Com wrap
     desce para baixo em vez de sair. Nas larguras onde ja cabia, nada
     muda. */
  .framer-1bxjptn { flex-wrap: wrap !important; }

  /* Entre 370 e 420px, a largura da maioria dos telemoveis, as tres
     colunas cabiam a justa e colavam-se: a 375px ficava 1px entre Paginas e
     Legal e 0 entre Legal e Redes Sociais. Com um espaco minimo de 24px,
     quando nao cabem as tres, Redes Sociais desce, como ja fazia a 320. */
  .framer-1bxjptn { column-gap: 24px !important; row-gap: 32px !important; }

  /* "Desenvolvido por: Aeternus Progressus" tinha width:363px fixo e
     flex-shrink:0 dentro de um contentor de 280px com overflow:clip. A
     320px perdiam-se 63px de texto, a 360px 23px. Passa a poder encolher
     e quebrar linha. */
  .framer-t5g04o {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  /* Efeito secundario da regra de cima, medido a 19 de setembro de 2026:
     com o credito a encolher, passou a caber na mesma linha que o texto dos
     direitos, e esse ficava com a sobra. A 360px tinha 28px de largura e
     734px de altura, com palavras partidas ("Unipes / soal"); a 390px, 58
     por 381; a 430px, 98 por 218. Com 240px de largura minima, quando os
     dois nao cabem lado a lado o credito desce para a linha de baixo; a
     partir de uns 540px continuam lado a lado, como no desenho. */
  .framer-10wmxi4 {
    flex: 1 1 240px !important;
    min-width: 240px !important;
  }

}

/* Por baixo de "Gerir Cookies", no fim da coluna LEGAL, ficava um desenho
   da Framer com 1px de largura por 5 de altura, cinzento claro: na pagina
   parece uma marca de sujidade. Vem assim do export original, esta em todas
   as paginas e nao tem funcao (aria-hidden, sem texto, sem ligacao). */
footer .framer-1mkjoqm { display: none !important; }

/* ================================= ALVOS DE TOQUE DO RODAPE, EM TODO O LADO */

/* Os contactos do rodape, email, telefone, morada e redes, tinham 20 a 21px
   de altura tocavel. O minimo recomendado sao 24px.

   Isto NAO esta dentro do media query do telemovel de proposito. Um tablet
   e tao tatil como um telemovel, e a 768px os alvos continuavam nos 20px.
   Em elementos inline o padding vertical nao altera a altura da linha,
   aumenta so a area clicavel, por isso pode ficar em todas as larguras sem
   mexer um pixel no desenho: em desktop so torna o clique mais facil.

   O <footer> e um seletor seguro: o botao grande de telefone do corpo da
   pagina esta fora dele e nao e apanhado.

   O !important e preciso: sem ele uma regra da Framer mais especifica poe o
   padding a zero e o alvo continuava nos 20px. Verificado. */
footer a { padding-block: 6px !important; }

/* O Facebook e o Whatsapp sao flex, nao inline, por isso aqui o padding
   mudaria mesmo a caixa. Crescem 3px para chegar aos 24, so ate a largura
   de tablet, onde o dedo e o apontador. */
@media (max-width: 1024px) {
  footer a.framer-nn6mcx {
    padding-block: 0 !important;
    min-height: 24px !important;
    align-items: center !important;
  }
}

/* Os mesmos 20px de altura apareciam fora do rodape: o email e o telefone
   do cartao de contactos e a ligacao para o mapa. Sao ligacoes sozinhas na
   linha, nao ligacoes no meio de uma frase, por isso a excecao da WCAG 2.5.8
   nao as cobre.

   As duas primeiras sao inline dentro de um bloco de texto: o padding
   vertical so cresce a area de toque. A do mapa e um bloco, ai o padding
   mudaria mesmo a altura, e a margem negativa devolve o espaco. */
.framer-text a[href^="mailto:"],
.framer-text a[href^="tel:"] { padding-block: 6px !important; }

a[href^="https://www.google.com/maps/search/"] {
  padding-block: 3px !important;
  margin-block: -3px !important;
}

/* ============================================ PAGINAS LEGAIS ============ */

/* Os seis quadros obrigatorios (dados do formulario, bases legais, prazos,
   cookies) eram um unico paragrafo com as celulas coladas: lia-se
   "CampoObrigatorioPara que serve". Passaram a tabelas a serio, no HTML e
   no modulo. Aqui so o aspeto: risco discreto e cabecalho com fundo leve.

   As 43 seccoes numeradas e os seis subtitulos eram paragrafos com o
   tamanho e o peso do corpo. Passaram a h2 e h3; aqui ganham o peso e o ar
   que um titulo precisa, sem mudar o tipo nem o tamanho da letra. */
.roger-tabela-caixa { overflow-x: auto; margin: 4px 0; }

.roger-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}

.roger-tabela th,
.roger-tabela td {
  border: 1px solid rgba(33, 29, 29, .18);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  /* O texto do site traz overflow-wrap:anywhere, e so esse valor conta
     para a largura minima de uma coluna: a coluna dos nomes encolhia ate
     partir "roger_cookie_consent" a meio. Com break-word a coluna pede a
     palavra inteira e so parte se mesmo assim nao couber. */
  overflow-wrap: break-word;
}

.roger-tabela thead th {
  background: rgba(33, 29, 29, .06);
  font-weight: 600;
}

.roger-tabela tbody th { font-weight: 600; }

/* As ligacoes no corpo das tres paginas legais, o email, a CNPD e as sete
   remissoes entre as politicas, tinham exatamente a cor do texto a volta e
   nenhum sublinhado: nada as distinguia. Os seletores sao os contentores do
   corpo de cada pagina, que nao incluem o rodape. */
.framer-9nr9cx a.framer-text,
.framer-1h87y5f a.framer-text,
.framer-rrat96 a.framer-text {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* Dentro de <strong>, a classe framer-text poe peso 400 na ligacao e o
   negrito da remissao perdia-se. */
strong > a.framer-text { font-weight: inherit !important; }

.roger-seccao {
  font-weight: 600 !important;
  margin-top: 14px !important;
}

.roger-subseccao { margin-top: 10px !important; }

/* No telemovel quatro colunas nao cabem: ou se espremem ate ficarem uma
   letra por linha, ou ficam escondidas atras de um rolamento lateral que
   ninguem ve. Em vez disso cada linha passa a um bloco, com o nome da
   coluna a frente de cada valor (o atributo data-rotulo, posto no HTML e
   no modulo). O cabecalho sai da vista mas continua a ser lido.

   Os display:block apagam a tabela da arvore de acessibilidade; por isso
   as tabelas trazem role="table", role="row", role="cell" escritos a mao,
   e quem usa leitor de ecra continua a ouvir uma tabela. */
@media (max-width: 767.98px) {
  .roger-tabela { font-size: 15px; }

  .roger-tabela,
  .roger-tabela thead,
  .roger-tabela tbody,
  .roger-tabela tr,
  .roger-tabela th,
  .roger-tabela td { display: block; }

  .roger-tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .roger-tabela tbody tr {
    border: 1px solid rgba(33, 29, 29, .18);
    border-radius: 8px;
    padding: 4px 0;
    margin-bottom: 10px;
  }

  .roger-tabela tbody tr:last-child { margin-bottom: 0; }

  .roger-tabela th,
  .roger-tabela td {
    border: 0;
    padding: 5px 12px;
  }

  .roger-tabela tbody th { font-size: 16px; }

  .roger-tabela td[data-rotulo]::before,
  .roger-tabela th[data-rotulo]::before {
    content: attr(data-rotulo) ": ";
    font-weight: 600;
  }
}

/* A navbar do computador e transparente: nas paginas do inicio e dos servicos
   fica por cima de fundos escuros e as letras brancas leem-se. Nas paginas
   legais o fundo e claro e as mesmas letras brancas desapareciam. Damos-lhes
   aqui a barra preta, igual a que o telemovel ja tem. Abaixo dos 1200 a barra
   preta ja vem do desenho original, por isso so mexemos no computador. */
@media (min-width: 1200px) {
  body.roger-legal header nav {
    background-color: #000 !important;
    border-radius: 32px;
    /* nos 1200px a barra ia de margem a margem e os cantos redondos batiam no
       bordo do ecra; fica sempre a pelo menos 24px de cada lado */
    width: min(100%, 100vw - 48px) !important;
    margin-inline: auto !important;
    /* A barra tinha a altura exata do botao "Pedir orcamento" (48px). Com o
       desenho novo dos botoes (28 de setembro de 2026), o trilho de 4px e a
       sombra saiam da barra para a pagina clara. Com 8px em cima e em baixo
       fica com 64px, a altura da barra do telemovel, e o trilho cabe la
       dentro; a sombra, que no preto nao se ve, deixa de sair por baixo. */
    padding-block: 8px !important;
  }
  body.roger-legal header nav a.framer-rmN8o.framer-h9kgwd { --rb-sombra: transparent; }
}

/* Telemovel, topo da pagina inicial.
   1. A palavra ROGER, a 178px, era mais larga do que o ecra (438px em 390) e
      comecava por baixo da barra do menu, que e fixa e tem 64px: ficava
      cortada nos lados e em cima. Passa a caber na coluna e o bloco todo desce
      o suficiente para ela aparecer inteira por baixo da barra.
   2. O desenho original do Framer nao mostrava a carrinha no telemovel. Fica
      por baixo dos botoes, a largura toda da coluna. Para isso saiu-lhe a
      classe hidden-1y3res7 no HTML e no modulo, e nao so aqui: antes de
      hidratar, o Framer apaga do DOM tudo o que tem a classe hidden do
      tamanho activo, e o React voltava a desenha-la (erro #418 e #422). */
@media (max-width: 767.98px) {
  /* o "Roger" deixou de ser h1 (so pode haver um por pagina): apanha os dois */
  .framer-VMkIw .framer-1dg08dh :is(h1, p),
  .framer-VMkIw .framer-1dg08dh :is(h1, p) * {
    font-size: min(178px, calc((100vw - 40px) * .4)) !important;
  }
  /* A barra do menu tem 64px; o ROGER fica a 74px acima do bloco de texto.
     Com 146px de folga, a palavra comeca uns 8px abaixo da barra. */
  .framer-VMkIw .framer-x33y4y { padding-top: 146px !important; }
  /* O contentor tinha altura fixa de 394px e centrava o conteudo: com a
     carrinha la dentro, o texto subia para tras da barra. */
  .framer-VMkIw .framer-x1g9is { height: auto !important; }

  .framer-VMkIw .framer-9cy4fo {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1616 / 973;
    order: 99;
  }
}

/* Inicial: a linha dos comparadores da Framer (framer-dyfz58) e trocada pela
   grelha do antes-depois.js, que so a escondia depois de montar. Ate la, o
   browser descarregava as 4 fotografias de fundo dela (cerca de 459 KB) antes
   da imagem principal. Escondida aqui, no <head>, nao chega a pedi-las. O
   antes-depois.js so a usa como ancora, e querySelector encontra-a na mesma. */
.framer-VMkIw .framer-dyfz58:not(.roger-obras-linha) { display: none !important; }

/* Rodape, no fim: em vez da palavra "roger" em letra gigante, o logotipo da
   barra do menu, com a mesma largura e esbatido para baixo como a palavra
   era (pedido de 25 de setembro de 2026). So CSS: o texto continua no DOM,
   escondido, por isso o HTML e o modulo nao mudam e a hidratacao nao mexe.

   As pontas dos parafusos e do pincel, no topo das letras, parecem cortadas
   a este tamanho grande: e o proprio desenho do logotipo (uma ponta de
   chave de fendas, nao uma letra redonda), visivel em detalhe aqui e quase
   impercetivel no tamanho pequeno da barra do menu. Confirmado a 28 de
   setembro de 2026, pixel a pixel no ficheiro original: nao e um corte da
   caixa nem da mascara. */
footer .framer-1r3phri > svg { visibility: hidden; }
footer .framer-1r3phri {
  background: url("/assets/framerusercontent.com/images/SsA9Ot9fUHveL0YGjvi31J6wiw.19b6il9.png") center / contain no-repeat;
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, .12) 25%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .8) 75%);
          mask-image: linear-gradient(0deg, rgba(0, 0, 0, .12) 25%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .8) 75%);
}

/* ================================================= BOTOES PRINCIPAIS === */

/* Esta seccao, ao contrario do resto do ficheiro, muda o desenho: foi pedida
   a 28 de setembro de 2026, com seis regras para os botoes principais.

   1. Tamanho: 48px de altura, 24px de recuo de cada lado.
   2. Rotulo: 17px, seminegrito (600), so a primeira letra maiuscula,
      verbo mais objeto ("Pedir orcamento", "Ligar 924 140 860"). O texto
      muda no HTML e nos modulos da Framer, nao aqui.
   3. Contraste: rotulo a 4,5:1 ou mais, contorno a 3:1 ou mais, fundo
      acetinado (degrade de cima para baixo) e aro de 1px. O vermelho da
      marca, rgb(247,65,62), com letra branca dava 3,63:1; o degrade
      comeca em rgb(222,46,43), 4,63:1 no ponto mais claro.
   4. Profundidade, com a luz a vir de cima: um trilho de 4px a volta, o
      rebordo de cima iluminado, sombra 8px para baixo com 24px de desfoque
      e uma luz fina ao longo do aro.
   5. Pormenor: pilula com raio igual a metade da altura (24px) e um so
      icone de 20px, a 10px do rotulo.
   6. Movimento: ao passar o rato, a luz da uma volta ao aro em 200ms; ao
      carregar, o botao desce 1px; no envio, roda e depois visto. Resposta
      em 100ms, tudo acabado em 300ms.

   Onde vale:
   - a.framer-rmN8o.framer-h9kgwd: os botoes da Framer (Pedir orcamento,
     Ver servicos, Conhecer a Roger, Ver todos os servicos, Ligar). As
     variantes sao classes framer-v-*: 1qp05fs branca, 12inwiw vermelha,
     1xjt8sa e m7y9p3 escuras sobre fundo escuro, 9g7ol6 escura sobre claro.
   - button.framer-PiPxd: o "Enviar pedido" do contacto, com os estados da
     Framer (v-ooaxay a enviar, v-2xs5yg enviado, v-gorq8u erro).
   - .roger-botao: os botoes feitos por nos (testemunho, cookies, mapa).
     A pagina 404 nao carrega este ficheiro e tem uma copia curta no HTML.

   As variantes mudam as variaveis --rb-* (a vermelha nossa tambem a cor da
   letra); a construcao e uma so.

   A borda de 1px da Framer e um ::after (data-border); passa a ser o aro
   de dentro da sombra, para os botoes da Framer e os nossos terem o mesmo
   aro. O ::before fica para a luz do aro. */

@property --rb-luz {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* --- construcao ------------------------------------------------------- */

a.framer-rmN8o.framer-h9kgwd,
button.framer-PiPxd,
.roger-botao {
  /* Branco acetinado, para fundo escuro (a variante mais comum). */
  --rb-topo: #fff;
  --rb-base: #ebe5df;
  --rb-aro: rgba(33, 29, 29, .22);
  --rb-luz-topo: #fff;
  --rb-trilho: rgba(255, 255, 255, .12);
  --rb-sombra: rgba(0, 0, 0, .34);
  --rb-brilho: rgba(247, 65, 62, .9);
  --rb-brilho-repouso: 0;
  --rb-foco: #fff;
  --border-style: none !important;

  box-sizing: border-box !important;
  height: 48px !important;
  min-height: 48px;
  padding: 0 24px !important;
  gap: 10px !important;
  border-radius: 24px !important;
  background-image: linear-gradient(180deg, var(--rb-topo), var(--rb-base)) !important;
  box-shadow:
    inset 0 0 0 1px var(--rb-aro),
    inset 0 2px 0 var(--rb-luz-topo),
    0 0 0 4px var(--rb-trilho),
    0 8px 24px var(--rb-sombra) !important;
  transition: translate .1s ease-out, box-shadow .1s ease-out, filter .1s ease-out;
}

/* A luz do aro: um degrade conico num anel de 1px (a mascara deixa so a
   borda). O ponto mais claro esta no angulo --rb-luz, 0 e em cima. */
a.framer-rmN8o.framer-h9kgwd::before,
button.framer-PiPxd::before,
.roger-botao::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from calc(var(--rb-luz, 0deg) - 50deg),
    transparent 0deg, var(--rb-brilho) 50deg, transparent 100deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: var(--rb-brilho-repouso);
  pointer-events: none;
  transition: opacity .1s ease-out;
}

/* So com rato: num ecra tatil o :hover fica preso depois do toque. */
@media (hover: hover) {
  a.framer-rmN8o.framer-h9kgwd:hover,
  button.framer-PiPxd:not(:disabled):hover,
  .roger-botao:not(:disabled):hover {
    filter: brightness(1.04);
    translate: 0 -2px;
    box-shadow:
      inset 0 0 0 1px var(--rb-aro),
      inset 0 2px 0 var(--rb-luz-topo),
      0 0 0 4px var(--rb-trilho),
      0 14px 32px var(--rb-sombra) !important;
  }
  /* A seta avanca 4px (a do telefone nao, fica no sitio). */
  a.framer-rmN8o.framer-h9kgwd:not(.framer-v-1xjt8sa):hover > svg,
  button.framer-PiPxd.framer-v-6wrk7l:hover > svg,
  .roger-botao:not(:disabled):hover .roger-icone-seta { translate: 4px 0; }
  /* No vermelho nao: mais claro, o branco do rotulo descia a 4,32:1. */
  a.framer-rmN8o.framer-v-12inwiw:hover,
  .roger-botao-vermelho:not(:disabled):hover { filter: none; }
  a.framer-rmN8o.framer-h9kgwd:hover::before,
  button.framer-PiPxd:not(:disabled):hover::before,
  .roger-botao:not(:disabled):hover::before {
    --rb-luz: 360deg;
    opacity: 1;
    transition: --rb-luz .2s ease-out, opacity .1s ease-out;
  }
}

a.framer-rmN8o.framer-h9kgwd:active,
button.framer-PiPxd:not(:disabled):active,
.roger-botao:not(:disabled):active {
  translate: 0 1px;
  box-shadow:
    inset 0 0 0 1px var(--rb-aro),
    inset 0 2px 0 var(--rb-luz-topo),
    0 0 0 4px var(--rb-trilho),
    0 4px 12px var(--rb-sombra) !important;
}

a.framer-rmN8o.framer-h9kgwd:focus-visible,
button.framer-PiPxd:focus-visible,
.roger-botao:focus-visible {
  outline: 2px solid var(--rb-foco) !important;
  outline-offset: 6px !important;
}

/* O rotulo. A Framer poe a letra em variaveis no <p>; o !important ganha
   ao estilo do preset, que tambem muda por breakpoint. */
a.framer-rmN8o.framer-h9kgwd .framer-text,
button.framer-PiPxd .framer-text {
  --framer-font-size: 17px !important;
  --framer-font-weight: 600 !important;
  --framer-letter-spacing: -.01em !important;
  --framer-line-height: 1.2em !important;
}
a.framer-rmN8o.framer-h9kgwd > svg,
button.framer-PiPxd > svg { width: 20px !important; height: 20px !important; transition: translate .2s ease-out; }
.roger-botao .roger-icone-seta { transition: translate .2s ease-out; }

/* --- variantes -------------------------------------------------------- */

/* Vermelho acetinado, sobre claro. */
a.framer-rmN8o.framer-v-12inwiw,
.roger-botao-vermelho {
  --rb-topo: rgb(222, 46, 43);
  --rb-base: rgb(196, 32, 30);
  --rb-aro: rgb(168, 24, 22);
  --rb-luz-topo: rgba(255, 196, 186, .5);
  --rb-trilho: rgba(33, 29, 29, .07);
  --rb-sombra: rgba(168, 24, 22, .26);
  --rb-brilho: rgba(255, 238, 232, .95);
  --rb-brilho-repouso: .55;
  --rb-foco: #211d1d;
}

/* Tinta acetinada com o aro vermelho que ja tinha. m7y9p3 era
   transparente com aro vermelho; passa a ter o mesmo fundo. */
a.framer-rmN8o.framer-v-1xjt8sa,
a.framer-rmN8o.framer-v-m7y9p3,
a.framer-rmN8o.framer-v-9g7ol6,
button.framer-PiPxd.framer-v-gorq8u {
  --rb-topo: rgb(58, 51, 50);
  --rb-base: rgb(27, 23, 23);
  --rb-aro: rgb(247, 65, 62);
  --rb-luz-topo: rgba(255, 255, 255, .14);
  --rb-trilho: rgba(255, 255, 255, .08);
  --rb-sombra: rgba(0, 0, 0, .36);
  --rb-brilho: rgba(255, 200, 194, .95);
  --rb-brilho-repouso: .6;
  --rb-foco: #fff;
}
/* A escura do cabecalho das paginas de fundo claro. */
a.framer-rmN8o.framer-v-9g7ol6 {
  --rb-trilho: rgba(33, 29, 29, .07);
  --rb-sombra: rgba(33, 29, 29, .24);
  --rb-foco: #211d1d;
}

/* O "Aceitar" do aviso de cookies continua vermelho, como era, mas sem a
   luz no aro em repouso e com a sombra neutra dos outros dois: o desenho
   novo nao lhe pode dar mais destaque do que ao "Rejeitar". */
.roger-botao-vermelho.roger-botao-sobrio {
  --rb-sombra: rgba(33, 29, 29, .14);
  --rb-brilho-repouso: 0;
}

/* Branco sobre claro (cookies): o aro tem de fazer o contorno, 3,8:1. */
.roger-botao-branco {
  --rb-aro: rgba(33, 29, 29, .55);
  --rb-trilho: rgba(33, 29, 29, .06);
  --rb-sombra: rgba(33, 29, 29, .14);
  --rb-foco: #211d1d;
}

/* --- espaco para o trilho e a sombra ---------------------------------- */

/* O trilho (4px a volta) e a sombra (8px para baixo, 24 de desfoque) saem
   da caixa do botao. Estes contentores da Framer tinham overflow hidden ou
   clip e cortavam-nos a direito, rentes ao botao. Medido a 1440, 834 e
   390px: nenhum filho sai deles, por isso deixar ver so mostra a sombra.
   - a fila dos dois botoes do heroi e o bloco do "Ver todos os servicos"
     (inicial e Sobre);
   - a fila e o formulario do "Enviar pedido". No formulario ha um campo-
     armadilha fora da caixa, mas o cartao a volta (framer-1hdhhq2)
     continua a corta-lo;
   - o cabecalho, so em computador: no telemovel e no tablet e ele que
     esconde o menu enquanto abre e fecha. */
.framer-5l2tc:has(a.framer-rmN8o.framer-h9kgwd),
.framer-7t2zdp:has(a.framer-rmN8o.framer-h9kgwd),
.framer-jovp27:has(a.framer-rmN8o.framer-h9kgwd),
.framer-99jylo:has(button.framer-PiPxd),
form.framer-5gzi5w { overflow: visible !important; }
@media (min-width: 1200px) {
  header:has(a.framer-rmN8o.framer-h9kgwd) { overflow: visible !important; }
}

/* --- estados do "Enviar pedido" --------------------------------------- */

/* Ao passar o rato a Framer punha o botao a 70% de opacidade; o desenho
   novo ja tem resposta ao rato. A variante Disabled (v-1xgysta) fica. */
button.framer-PiPxd:not(.framer-v-1xgysta) { opacity: 1 !important; }

/* A enviar: so a roda da Framer (20px), sem a seta ao lado. */
button.framer-PiPxd.framer-v-ooaxay > svg { display: none !important; }

/* Enviado: a seta da lugar a um visto. */
button.framer-PiPxd.framer-v-2xs5yg > svg { display: none !important; }
button.framer-PiPxd.framer-v-2xs5yg::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: #211d1d;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: roger-visto .2s ease-out;
}

/* Erro: fundo de tinta e o texto num vermelho claro. O vermelho da Framer
   sobre o fundo dela, meio transparente no cartao escuro, dava 4:1. Este
   da 5,4:1. */
button.framer-PiPxd.framer-v-gorq8u .framer-text { --framer-text-color: rgb(255, 138, 128) !important; }
button.framer-PiPxd.framer-v-gorq8u > svg { --34440n: rgb(255, 138, 128) !important; }

@keyframes roger-visto {
  from { opacity: 0; transform: scale(.6); }
}

/* --- os nossos botoes ------------------------------------------------- */

.roger-botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  margin: 0;
  color: #211d1d;
  font: 600 17px/1.2 Inter, "Inter Placeholder", sans-serif;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.roger-botao-vermelho { color: #fff; }
.roger-botao:disabled { cursor: progress; }

/* Um so icone de 20px por botao; os estados trocam qual se ve. */
.roger-botao .roger-icone { flex: none; width: 20px; height: 20px; display: none; }
.roger-botao:not([data-estado]) .roger-icone-seta,
.roger-botao[data-estado="pronto"] .roger-icone-seta { display: block; }
.roger-botao[data-estado="a-enviar"] .roger-icone-roda { display: block; animation: roger-roda .8s linear infinite; }
.roger-botao[data-estado="enviado"] .roger-icone-visto { display: block; animation: roger-visto .2s ease-out; }

@keyframes roger-roda {
  to { transform: rotate(360deg); }
}

/* Alto contraste do Windows (forced-colors): o sistema apaga sombras e
   fundos, e o contorno destes botoes e feito so com isso. Sem esta regra
   ficavam como texto solto, sem limite, e o visto do "Obrigado" sumia. */
@media (forced-colors: active) {
  a.framer-rmN8o.framer-h9kgwd,
  button.framer-PiPxd,
  .roger-botao { border: 1px solid ButtonText !important; }
  button.framer-PiPxd.framer-v-2xs5yg::after {
    forced-color-adjust: none;
    background: ButtonText;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.framer-rmN8o.framer-h9kgwd,
  button.framer-PiPxd,
  .roger-botao,
  a.framer-rmN8o.framer-h9kgwd > svg,
  button.framer-PiPxd > svg,
  .roger-botao .roger-icone-seta,
  a.framer-rmN8o.framer-h9kgwd::before,
  button.framer-PiPxd::before,
  .roger-botao::before { transition: none !important; }
  a.framer-rmN8o.framer-h9kgwd:hover::before,
  button.framer-PiPxd:hover::before,
  .roger-botao:hover::before { --rb-luz: 0deg !important; }
  button.framer-PiPxd.framer-v-2xs5yg::after,
  .roger-botao .roger-icone { animation: none !important; }
  /* A roda continua a rodar, mais devagar: parada nao diz que esta a
     trabalhar. */
  .roger-botao[data-estado="a-enviar"] .roger-icone-roda { animation: roger-roda 1.6s linear infinite !important; }
}

/* ============================================ CARTOES E PASTILHAS ===== */

/* Pedido de 28 de setembro de 2026: cartoes, pastilhas e os outros
   componentes com o mesmo material dos botoes. Fundo acetinado (de cima
   para baixo), aro de 1px, rebordo de cima iluminado e sombra 8px para
   baixo com 24 de desfoque; nas pastilhas e nos comandos redondos tambem o
   trilho de 4px. O que se carrega sobe 2px ao passar o rato e a sombra
   cresce. A borda da Framer (::after, data-border) da lugar ao aro. */

/* Pastilhas sobre fundo claro: as etiquetas das seccoes (variante Black da
   Framer), a do testemunho e os selos (Alvara e os outros). */
.framer-86UpX.framer-v-1hm6xdk,
p.roger-t-etiqueta,
ul > li[style*="border-radius:90px"] {
  background-image: linear-gradient(180deg, #fff, #ebe5df) !important;
  border-color: transparent !important;
  --border-style: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(33, 29, 29, .22),
    inset 0 2px 0 #fff,
    0 0 0 4px rgba(33, 29, 29, .06),
    0 8px 24px rgba(33, 29, 29, .10) !important;
}
/* A mesma pastilha sobre o heroi escuro (variante White). */
.framer-86UpX.framer-v-ghv6f4 {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)) !important;
  --border-style: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .35),
    inset 0 2px 0 rgba(255, 255, 255, .22),
    0 0 0 4px rgba(255, 255, 255, .06),
    0 8px 24px rgba(0, 0, 0, .25) !important;
}
.framer-86UpX .framer-text { --framer-font-weight: 600 !important; }
p.roger-t-etiqueta,
ul > li[style*="border-radius:90px"] { font-weight: 600 !important; }

/* Pastilhas e comandos por cima das fotografias: Antes/Depois, contador,
   pega do comparador, setas e play da galeria. */
.roger-pastilha,
.roger-port-contador,
.roger-pega,
.roger-port-botao,
.roger-port-play {
  background-image: linear-gradient(180deg, #fff, #ebe5df) !important;
  box-shadow:
    inset 0 0 0 1px rgba(33, 29, 29, .22),
    inset 0 2px 0 #fff,
    0 0 0 4px rgba(255, 255, 255, .22),
    0 8px 24px rgba(0, 0, 0, .28) !important;
}
.roger-pastilha,
.roger-port-contador { font-weight: 600 !important; }
.roger-port-botao,
.roger-port-play { transition: translate .1s ease-out, box-shadow .1s ease-out; }
@media (hover: hover) {
  .roger-port-botao:not([aria-disabled="true"]):hover,
  .roger-port-play:hover {
    translate: 0 -2px;
    box-shadow:
      inset 0 0 0 1px rgba(33, 29, 29, .22),
      inset 0 2px 0 #fff,
      0 0 0 4px rgba(255, 255, 255, .3),
      0 14px 32px rgba(0, 0, 0, .34) !important;
  }
}
.roger-port-botao:active,
.roger-port-play:active { translate: 0 1px; }

/* Cartoes claros: servicos, "Porque a Roger?", perguntas frequentes,
   clientes satisfeitos e a caixa do mapa. */
.framer-NIjiU.framer-p7DIC,
.framer-1WaOM.framer-p7DIC,
.framer-uCh4G.framer-7A7UT,
.framer-dx9ord,
[data-cookie-placeholder-for] {
  background-image: linear-gradient(180deg, #fff, #f5f0eb) !important;
  --border-style: none !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 0 0 1px rgba(33, 29, 29, .08),
    inset 0 2px 0 #fff,
    0 8px 24px rgba(33, 29, 29, .07) !important;
  transition: translate .2s ease-out, box-shadow .2s ease-out;
}
/* Os que se carregam (servicos e perguntas) sobem ao passar o rato. */
@media (hover: hover) {
  .framer-NIjiU.framer-p7DIC:hover,
  .framer-uCh4G.framer-7A7UT:hover {
    translate: 0 -2px;
    box-shadow:
      inset 0 0 0 1px rgba(33, 29, 29, .12),
      inset 0 2px 0 #fff,
      0 14px 32px rgba(33, 29, 29, .12) !important;
  }
}

/* Cartoes escuros: o do formulario de contacto e o do testemunho. */
.framer-1hdhhq2,
.roger-t-cartao {
  background-image: linear-gradient(180deg, rgb(48, 42, 42), rgb(27, 23, 23)) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    inset 0 2px 0 rgba(255, 255, 255, .08),
    0 8px 24px rgba(33, 29, 29, .18) !important;
}

/* Fotografias e video em cartao: aro e sombra (o rebordo de cima ficaria
   por baixo da imagem). */
.roger-cortina,
.roger-port-slide,
.roger-port-video,
.framer-1xs7t97 {
  box-shadow: 0 0 0 1px rgba(33, 29, 29, .08), 0 8px 24px rgba(33, 29, 29, .12) !important;
}

/* Campos dos formularios: rebaixados, como o trilho dos botoes. */
.framer-form-input-wrapper {
  --framer-input-box-shadow: inset 0 1px 2px rgba(33, 29, 29, .16), inset 0 0 0 1px rgba(33, 29, 29, .12) !important;
}
.roger-t input[type="text"],
.roger-t input[type="email"],
.roger-t textarea {
  box-shadow: inset 0 1px 2px rgba(33, 29, 29, .16), inset 0 0 0 1px rgba(33, 29, 29, .12) !important;
}

/* Aviso de cookies: aro e rebordo iluminado na caixa. */
#roger-cookies > div {
  box-shadow:
    inset 0 0 0 1px rgba(33, 29, 29, .08),
    inset 0 2px 0 #fff,
    0 18px 50px rgba(0, 0, 0, .22) !important;
}

/* WhatsApp: o verde da marca, acetinado, com o mesmo aro e sombra. */
#roger-whatsapp {
  background-image: linear-gradient(180deg, rgb(52, 222, 118), rgb(30, 184, 88)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .12),
    inset 0 2px 0 rgba(255, 255, 255, .35),
    0 8px 24px rgba(0, 0, 0, .28) !important;
}
@media (hover: hover) {
  #roger-whatsapp:hover {
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, .12),
      inset 0 2px 0 rgba(255, 255, 255, .35),
      0 14px 32px rgba(0, 0, 0, .34) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .framer-NIjiU.framer-p7DIC,
  .framer-uCh4G.framer-7A7UT,
  .roger-port-botao,
  .roger-port-play { transition: none !important; }
}

/* ================================================== BARRA DO MENU ===== */

/* Pedido de 28 de setembro de 2026: a barra do menu com o mesmo material
   dos botoes, fixa em cima, e so com fundo, em pilula, depois de o topo da
   pagina passar por baixo dela. O navegacao.js mede o topo e liga a classe
   roger-nav-pilula no <html>.

   Computador: a barra era absolute a 24px e ia-se embora com a pagina.
   Passa a fixed. Ha duas variantes da Framer: jk8ve2 (letras brancas, topo
   escuro: inicial e paginas de servico) fica numa pilula de tinta;
   1a8hdz1 (letras pretas, topo claro: Sobre, Servicos, Contacto) numa
   pilula clara. Nas paginas legais nao ha topo escuro: a pilula esta sempre.

   Telemovel e tablet: a barra preta ja era fixa e sempre com fundo (o topo
   de varias paginas e claro e o logotipo e branco). Passa a pilula de tinta
   a flutuar, 56px a 8px do alto: ocupa os mesmos 64px de antes. O menu
   aberto e outra variante (1op11ro) e fica como estava. */

nav.framer-0lhZb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease-out;
}
/* Pilula de tinta. */
nav.framer-0lhZb.framer-v-jk8ve2::before,
nav.framer-0lhZb.framer-v-15un14u::before {
  background: linear-gradient(180deg, rgb(48, 42, 42), rgb(27, 23, 23));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 2px 0 rgba(255, 255, 255, .08),
    0 0 0 4px rgba(33, 29, 29, .06),
    0 8px 24px rgba(33, 29, 29, .22);
}
/* Pilula clara. */
nav.framer-0lhZb.framer-v-1a8hdz1::before {
  background: linear-gradient(180deg, #fff, #ebe5df);
  box-shadow:
    inset 0 0 0 1px rgba(33, 29, 29, .14),
    inset 0 2px 0 #fff,
    0 0 0 4px rgba(33, 29, 29, .06),
    0 8px 24px rgba(33, 29, 29, .12);
}

@media (min-width: 1200px) {
  header:has(> nav.framer-0lhZb),
  header:has(nav.framer-0lhZb) {
    position: fixed !important;
    top: 24px !important;
    z-index: 60 !important;
    transition: top .2s ease-out;
  }
  html.roger-nav-pilula header:has(nav.framer-0lhZb) { top: 12px !important; }

  nav.framer-0lhZb.framer-v-jk8ve2,
  nav.framer-0lhZb.framer-v-1a8hdz1 {
    box-sizing: border-box !important;
    border-radius: 32px !important;
    transition: padding .2s ease-out;
    /* A 1200px a barra ia de bordo a bordo: fica a 24px de cada lado. */
    width: min(100%, 100vw - 48px) !important;
    margin-inline: auto !important;
  }
  html.roger-nav-pilula nav.framer-0lhZb.framer-v-jk8ve2,
  html.roger-nav-pilula nav.framer-0lhZb.framer-v-1a8hdz1,
  body.roger-legal header nav.framer-0lhZb {
    padding: 8px 8px 8px 24px !important;
  }
  html.roger-nav-pilula nav.framer-0lhZb::before,
  body.roger-legal header nav.framer-0lhZb::before { opacity: 1; }
  /* Nas legais a barra preta passa a ser a mesma pilula de tinta. */
  body.roger-legal header nav.framer-0lhZb { background-color: transparent !important; }
}

@media (max-width: 1199.98px) {
  nav.framer-0lhZb.framer-v-15un14u {
    box-sizing: border-box !important;
    width: calc(100% - 24px) !important;
    height: 56px !important;
    margin: 8px 12px 0 !important;
    border-radius: 28px !important;
    background-color: transparent !important;
  }
  nav.framer-0lhZb.framer-v-15un14u > .framer-1y6pq8o { height: 100% !important; }
  nav.framer-0lhZb.framer-v-15un14u::before { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  header:has(nav.framer-0lhZb),
  nav.framer-0lhZb,
  nav.framer-0lhZb::before { transition: none !important; }
}